/* ════════════════════════════════════════════════════════════════════════
   KONTAKT — Formular /kontakt (Konformitätsplan 22.10.2026)

   Baut auf legal.css auf, das davor lädt. Eine schmale Spalte, Felder in
   voller Breite, Werte nur aus tokens.css. Wächter: tests/kontakt.test.js.
   ════════════════════════════════════════════════════════════════════════ */

.kontakt-seite {
    max-width: 640px;
    margin: 0 auto;
}

.kontakt-form {
    display: grid;
    gap: var(--jt-a-6);
}

.kontakt-feld {
    display: grid;
    gap: var(--jt-a-2);
}

.kontakt-feld label {
    font-family: var(--jt-schrift-text);
    font-size: var(--jt-t-s);
    font-weight: 700;
    color: var(--jt-text);
}

.kontakt-freiwillig {
    font-weight: 400;
    color: var(--jt-text-leise);
}

.kontakt-feld input,
.kontakt-feld select,
.kontakt-feld textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--jt-a-3) var(--jt-a-4);
    border: 1px solid var(--jt-linie-stark);
    border-radius: var(--jt-r-m);
    /* NICHT die Kurzform `background`: Sie setzte background-repeat auf
       „repeat", und style.css legt den Auswahlpfeil mit !important als
       Hintergrundbild auf jedes select (dunkles Thema) — der Pfeil stand
       dann gekachelt über das ganze Feld. */
    background-color: var(--jt-grund-2);
    color: var(--jt-text);
    font-family: var(--jt-schrift-text);
    font-size: var(--jt-t-m);
    line-height: 1.5;
}

.kontakt-feld textarea {
    resize: vertical;
}

/* Der Pfeil kommt aus style.css (Hintergrundbild); hier nur, wo er sitzt. */
.kontakt-feld select {
    appearance: none;
    padding-right: 2.75rem;
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 16px 12px;
}

.kontakt-feld input:focus-visible,
.kontakt-feld select:focus-visible,
.kontakt-feld textarea:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 2px;
    border-color: var(--jt-messing);
}

.kontakt-feld [aria-invalid="true"] {
    border-color: var(--jt-fehler);
}

.kontakt-fehler {
    margin: 0;
    font-size: var(--jt-t-s);
    color: var(--jt-fehler-hell);
}

.kontakt-fehler--allgemein {
    padding: var(--jt-a-3) var(--jt-a-4);
    border: 1px solid var(--jt-fehler);
    border-radius: var(--jt-r-m);
}

.kontakt-hinweis {
    margin: 0;
    font-size: var(--jt-t-s);
    color: var(--jt-text-leise);
}

.kontakt-hinweis a,
.kontakt-bestaetigt a {
    color: var(--jt-messing-hell);
}

/* Das Lockfeld: aus dem Fluss genommen, nicht nur unsichtbar — ein
   display:none-Feld füllen manche Bots gar nicht erst aus, eines außerhalb
   des Bildes schon. */
.kontakt-falle {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kontakt-form .jt-knopf {
    justify-self: start;
}

.kontakt-bestaetigt {
    display: grid;
    gap: var(--jt-a-3);
    padding: var(--jt-a-6);
    border: 1px solid var(--jt-messing-kante);
    border-radius: var(--jt-r-l);
    background: var(--jt-grund-1);
}

.kontakt-bestaetigt__titel {
    margin: 0;
    font-family: var(--jt-schrift-text);
    font-size: var(--jt-t-xl);
    color: var(--jt-gold);
}

/* Ein Haken mit Satz (Meldeformular /melden, Block F 22.10.2026). Die
   Spezifität schlägt bewusst .kontakt-feld input (volle Breite, 44 px Höhe). */
.kontakt-feld .kontakt-haken {
    display: flex;
    gap: var(--jt-a-3);
    align-items: flex-start;
    font-weight: 400;
}

.kontakt-feld .kontakt-haken input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    margin-top: 0.15rem;
    padding: 0;
    accent-color: var(--jt-messing);
}