/* Formular der Seite /kontakt/ (Optik). Wird nur dort geladen; alle Tokens stehen in basis.css. Der Wortlaut und die Struktur kommen aus kontakt/templates. */
.formular{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--spalt)}
.formular-hinweis{margin:0;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--glas-3);box-shadow:inset 4px 0 0 var(--ziegel),var(--schatten-1)}
.gruppe{margin:0;padding:var(--innen);border:0;min-width:0}
legend{hyphens:auto;hyphenate-limit-chars:12 5 5}
.gruppe>legend{float:left;width:100%;margin-bottom:var(--s-5);padding:0;font-size:var(--t-h3);font-weight:740;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.gruppe>legend::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--ziegel)}
.gruppe>legend+*{clear:both}
.feld{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:var(--s-5)}
.feld:last-child{margin-bottom:0}
.feld>label,.optionen>legend{font-weight:650;font-size:1.0625rem;line-height:1.35}
.optionen{margin:0 0 var(--s-5);padding:0;border:0;min-width:0}
.optionen>legend{padding:0;margin-bottom:10px}
.pflicht{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-voll);font-size:.8125rem;font-weight:650;color:var(--ink);background:var(--sand);vertical-align:2px}
.hilfe{margin:0;font-size:var(--t-klein);line-height:1.5;color:var(--gedaempft)}
.eingabe{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--gedaempft);border-radius:var(--r-m);font:inherit;color:var(--ink);background:var(--weiss);box-shadow:inset 0 1px 2px #142c520f}
textarea.eingabe{min-height:140px;resize:vertical}
.eingabe:focus-visible{outline:var(--fokus-breite) solid var(--fokus);outline-offset:2px;border-color:var(--ink)}
.eingabe[aria-invalid=true]{border-color:var(--fehler);border-width:2px}
.feld-fehler{display:flex;gap:8px;margin:0;color:var(--fehler);font-weight:650;font-size:var(--t-klein);line-height:1.45}
.feld-fehler::before,#fehler h2::before{content:"!" / "";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:800 .8125rem/1 var(--schrift);color:var(--weiss);background:var(--fehler)}
.optionen:has(.feld-fehler) .wahl label{box-shadow:inset 0 0 0 2px var(--fehler)}
.optionen .feld-fehler{margin-bottom:10px}
/* Fehlerzusammenfassung: per ID gestaltet, weil die Vorlagen-Wachen das Markup <div id="fehler" role="alert" tabindex="-1"> pinnen */
#fehler{margin-bottom:var(--spalt);padding:var(--innen);border-radius:var(--r-xl);background:var(--weiss);box-shadow:inset 0 0 0 2px var(--fehler),inset 6px 0 0 var(--fehler),var(--schatten-1)}
#fehler:focus-visible{outline-offset:4px}
#fehler h2{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:var(--t-h3);color:var(--fehler)}
#fehler h2::before{width:26px;height:26px;font-size:1rem}
#fehler ul{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:8px}
#fehler li a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--fehler)}
.wahl{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.wahl label{hyphens:manual;overflow-wrap:anywhere;position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border-radius:var(--r-m);cursor:pointer;background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--gedaempft)}
.wahl input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--blau)}
.wahl label:has(:checked){background:var(--flaeche);box-shadow:inset 0 0 0 2.5px var(--blau)}
.wahl label:has(:focus-visible){outline:var(--fokus-breite) solid var(--fokus);outline-offset:2px}
.wahl input:focus-visible{outline-color:transparent}
.absenden{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);justify-items:start}
.hinweis-rahmen{margin-top:var(--s-3)}
/* mobil: kürzere Wege durch das lange Formular (Zielgröße bleibt ≥ 44 px) */
@media (max-width:599px){.gruppe{padding:var(--s-5) 18px}.gruppe>legend{margin-bottom:var(--s-4)}.feld,.optionen{margin-bottom:var(--s-4)}.wahl{gap:6px}.wahl label{min-height:48px;padding:10px 14px}}
/* Freiwillige Angaben: eingeklappt, damit das Formular mobil kurz beginnt (Pflichtfelder bleiben sichtbar) */
.freiwillig{margin-top:var(--s-4)}
.freiwillig>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:var(--r-m);cursor:pointer;list-style:none;font-weight:650;background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--gedaempft)}
.freiwillig>summary::-webkit-details-marker{display:none}
.freiwillig>summary::before{content:"+" / "";flex:none;width:20px;text-align:center;font-weight:800;color:var(--blau)}
.freiwillig[open]>summary::before{content:"–" / ""}
.freiwillig>summary:focus-visible{outline:var(--fokus-breite) solid var(--fokus);outline-offset:2px}
.freiwillig[open]>summary{margin-bottom:var(--s-5)}
@media (forced-colors:active){.freiwillig>summary{border:1px solid CanvasText}.eingabe,.wahl label{border:1px solid CanvasText}.eingabe[aria-invalid=true],.optionen:has(.feld-fehler) .wahl label{border:3px solid CanvasText}#fehler{border:1px solid CanvasText}}