/* Gemeinsame Struktur der Anfragekomponente. Farben/Schriften kommen aus den --af-* Variablen der jeweiligen Site. */
html { scroll-padding-top: 6.5rem; scroll-padding-bottom: 6rem; }
.af { --af-rand: 1px solid var(--af-linie); position: relative; }
.af *, .af *::before, .af *::after { box-sizing: border-box; }
.af-vorschau-hinweis { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .875rem; margin: 0 0 1rem;
  padding: .5rem .75rem; border: 1px dashed currentColor; border-radius: var(--af-radius, 4px); color: var(--af-text-2); }
.af-vorschau-hinweis strong { color: var(--af-text); }
.af-fortschritt { display: none; list-style: none; margin: 0 0 1.25rem; padding: 0; gap: .5rem; counter-reset: s; }
.af[data-js] .af-fortschritt { display: flex; }
.af-fortschritt li { flex: 1; min-width: 0; }
.af-fortschritt button { all: unset; box-sizing: border-box; display: flex; gap: .5rem; align-items: center; width: 100%; min-height: 44px;
  padding: .35rem .25rem; border-top: 3px solid var(--af-linie); color: var(--af-text-2); font: inherit; font-size: .875rem; cursor: default; }
.af-fortschritt li.erledigt button { cursor: pointer; color: var(--af-text); border-top-color: var(--af-akzent); }
.af-fortschritt li.aktiv button { color: var(--af-text); border-top-color: var(--af-akzent); font-weight: 600; }
.af-fortschritt li.erledigt button:hover .af-name { text-decoration: underline; }
.af-fortschritt button:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 2px; }
.af-nr { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; font-size: .8rem; }
.af-fortschritt li.aktiv .af-nr, .af-fortschritt li.erledigt .af-nr { background: var(--af-akzent); border-color: var(--af-akzent); color: var(--af-auf-akzent); }
.af-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .af-fortschritt li:not(.aktiv) .af-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.af-stepinfo { margin: 0 0 1rem; font-size: .875rem; color: var(--af-text-2); min-height: 1.3em; }
.af:not([data-js]) .af-stepinfo, .af:not([data-js]) .af-nurjs { display: none; }
.af-pane { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.af-pane[hidden] { display: none; }
.af-pane > h3 { margin: 0 0 1rem; outline: none; }
.af-pane > h3:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 4px; }
.af-raster { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.af-feld { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.af-feld.breit, .af-feld.af-ganz { grid-column: 1 / -1; }
.af label, .af legend { font-weight: 600; font-size: .9375rem; color: var(--af-text); }
.af .af-optional { font-weight: 400; color: var(--af-text-2); }
.af .af-hilfe { margin: 0; font-size: .8125rem; color: var(--af-text-2); }
.af input:not([type=checkbox]):not([type=radio]), .af select, .af textarea {
  width: 100%; min-height: 48px; padding: .6rem .75rem; font: inherit; font-size: 1rem; color: var(--af-text);
  background: var(--af-feld); border: 1px solid var(--af-feldrand); border-radius: var(--af-radius, 4px); }
.af textarea { min-height: 6.5rem; resize: vertical; }
.af input:focus-visible, .af select:focus-visible, .af textarea:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 1px; border-color: var(--af-text); }
.af [aria-invalid="true"] { border-color: var(--af-fehler) !important; box-shadow: 0 0 0 1px var(--af-fehler); }
.af input:disabled, .af select:disabled, .af textarea:disabled { opacity: .55; cursor: not-allowed; }
.af-feldfehler { margin: .35rem 0 0; color: var(--af-fehler); font-size: .875rem; font-weight: 600; }
.af-feldfehler::before { content: "! "; }
/* Wert + Einheit nebeneinander */
.af-mit-einheit { display: flex; gap: .5rem; align-items: stretch; }
.af-mit-einheit input { flex: 1 1 auto; min-width: 0; }
.af-mit-einheit select { flex: 0 0 auto; width: auto !important; min-width: 5.5rem; }
.af-masse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: end; }
.af-masse .af-teil { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.af-masse .af-teil label { font-weight: 500; font-size: .8125rem; }
.af-masse select { width: auto !important; min-width: 5.5rem; }
@media (max-width: 400px) { .af-masse { grid-template-columns: repeat(3, minmax(0, 1fr)); } .af-masse > .af-einheit-wahl { grid-column: 1 / -1; } }
.af-gruppe { border: var(--af-rand); border-radius: var(--af-radius, 4px); padding: .9rem 1rem 1rem; margin: 0; min-width: 0; }
.af-gruppe > legend { padding: 0 .35rem; }
.af-gruppe.ist-unbekannt { border-style: dashed; }
.af-check, .af-radio { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .55rem 0; font-weight: 400 !important; cursor: pointer; }
.af-check input, .af-radio input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--af-akzent-dunkel, var(--af-akzent)); }
.af-check input:focus-visible, .af-radio input:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 2px; }
.af-wahl { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.af-wahl > legend { width: 100%; margin-bottom: .1rem; padding: 0; }
.af-wahl.fehler { outline: 2px solid var(--af-fehler); outline-offset: 6px; border-radius: 2px; }
.af-wahl.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .5rem; }
.af-wahl.kacheln .af-radio { border: 1px solid var(--af-feldrand); border-radius: var(--af-radius, 4px); padding: .7rem .8rem; background: var(--af-feld); }
.af-wahl.kacheln .af-radio:has(input:checked) { border-color: var(--af-akzent); box-shadow: inset 0 0 0 1px var(--af-akzent); }
.af-unbekannt { margin-top: .25rem; }
.af-ds { margin-top: 1rem; padding: .5rem .75rem; border: var(--af-rand); border-radius: var(--af-radius, 4px); }
.af-ds.fehler { border-color: var(--af-fehler); }
.af-hinweisbox { margin: 0 0 1rem; padding: .75rem 1rem; border-inline-start: 3px solid var(--af-akzent); background: var(--af-flaeche); font-size: .9375rem; }
.af-hinweisbox[hidden] { display: none; }
/* Zusammenfassung */
.af-zf { margin: 1.5rem 0 0; padding: 1rem; background: var(--af-flaeche); border-radius: var(--af-radius, 4px); }
.af:not([data-js]) .af-zf { display: none; }
.af-zf > h4 { margin: 0 0 .5rem; }
.af-zf-abschnitt + .af-zf-abschnitt { margin-top: 1rem; padding-top: 1rem; border-top: var(--af-rand); }
.af-zf-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.af-zf-kopf h4 { margin: 0; font-size: 1rem; }
.af-zf dl { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .35rem 1rem; margin: .5rem 0 0; font-size: .9375rem; }
.af-zf dt { color: var(--af-text-2); }
.af-zf dd { margin: 0; overflow-wrap: anywhere; }
.af-zf .af-zf-leer { grid-column: 1 / -1; color: var(--af-text-2); }
@media (max-width: 480px) { .af-zf dl { grid-template-columns: 1fr; } .af-zf dd { margin-bottom: .4rem; } }
.af-link-btn { background: none; border: 0; padding: .5rem .25rem; min-height: 44px; font: inherit; font-weight: 600; color: var(--af-link); text-decoration: underline; cursor: pointer; }
.af-link-btn:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 2px; }
/* Meldungen und Aktionen */
.af-meldung { margin: 1rem 0; padding: .9rem 1rem; border-radius: var(--af-radius, 4px); font-weight: 500; }
.af-meldung[hidden] { display: none; }
#af-fehler { background: var(--af-fehler-flaeche); color: var(--af-fehler-text, var(--af-text)); border-inline-start: 4px solid var(--af-fehler); }
#af-fehler[data-art="unklar"] { border-inline-start-color: var(--af-warn, #8a5a00); }
#af-ok { background: var(--af-ok-flaeche); border-inline-start: 4px solid var(--af-ok); outline: none; }
#af-ok:focus-visible { outline: 3px solid var(--af-fokus); }
#af-ok details { margin-top: .5rem; font-weight: 400; font-size: .875rem; }
#af-ok pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; max-height: 16rem; overflow: auto; background: var(--af-feld); padding: .5rem; direction: ltr; text-align: left; }
.af-aktionen { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.af-aktionen [hidden] { display: none; }
.af-aktionen .af-weiter, .af-aktionen .af-senden { margin-inline-start: auto; }
.af:not([data-js]) .af-weiter, .af:not([data-js]) .af-zurueck { display: none; }
.af:not([data-js]) .af-senden { display: inline-flex !important; }
.af-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.4rem; font: inherit; font-weight: 600;
  border-radius: var(--af-radius-btn, var(--af-radius, 4px)); border: 2px solid transparent; cursor: pointer; text-decoration: none; }
.af-btn-primaer { background: var(--af-akzent); color: var(--af-auf-akzent); }
.af-btn-primaer:hover { background: var(--af-akzent-dunkel, var(--af-akzent)); }
.af-btn-sekundaer { background: transparent; color: var(--af-text); border-color: var(--af-feldrand); }
.af-btn:focus-visible { outline: 3px solid var(--af-fokus); outline-offset: 2px; }
.af-btn:disabled { opacity: .6; cursor: progress; }
.af-entwurf { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-size: .875rem; color: var(--af-text-2); margin: 0 0 .75rem; }
.af-entwurf[hidden] { display: none; }
.af-sim { margin-top: 1.5rem; padding: .75rem 1rem; border: 1px dashed var(--af-feldrand); border-radius: var(--af-radius, 4px); font-size: .875rem; color: var(--af-text-2); }
.af-sim summary { cursor: pointer; font-weight: 600; color: var(--af-text); min-height: 44px; display: flex; align-items: center; }
.af-sim label { display: block; margin: .5rem 0 .25rem; }
.af-sim select { min-height: 44px; font: inherit; padding: .4rem .5rem; max-width: 100%; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .af * { transition: none !important; animation: none !important; } }
/* [hidden] muss gegen display-Regeln (z. B. .af-feld { display:flex }) gewinnen */
.af [hidden] { display: none !important; }
/* Fokus für Formularfelder immer sichtbar (WebKit: Datums-Segmente lösen :focus-visible am Feld nicht aus) */
.af input:focus, .af input:focus-within, .af select:focus, .af textarea:focus { outline: 3px solid var(--af-fokus); outline-offset: 1px; }
/* Niedrige Fensterhöhe (z. B. 200 % Zoom): Kopf nicht fixieren, damit er Inhalt nicht verdeckt */
@media (max-height: 520px) { .kopf { position: static !important; } }
/* Ohne JavaScript kann die feste Leiste nicht ausweichen und würde Senden/Felder verdecken – dann ausblenden */
html:not(.js) .mobil-leiste { display: none !important; }
/* Codex R3: keine automatische Silbentrennung in Überschriften; ausgewogener Zeilenfall, lange Komposita brechen nur im Notfall */
h1, h2, h3 { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; overflow-wrap: break-word; }
/* Schnellstart (Anfrageeinstieg im Hero) braucht JS – ohne JS führt der normale CTA zur Anfrage */
html:not(.js) .schnellstart { display: none !important; }
/* Bilder (Nachweise stehen im Impressum) */
.bild { margin: 0; position: relative; min-width: 0; max-width: 100%; }
.bild img { display: block; width: 100%; height: 100%; object-fit: cover; }