/* formulare.css – vermittlung.jobs, Variante 2b · Runde 5 Formulare (15.09.2026)
   Anfrage-Formulare (Kurzbewerbung, Bewerbung, Personalanfrage, Kontakt): Abschnitt, Karte, Schritte mit Fortschritt,
   Felder mit sichtbaren Beschriftungen, Auswahl-Chips, Upload, Fehlerliste, Lade-, Danke- und Ersatz-Zustand.
   Nur auf Seiten mit Formular geladen (nach site.css / Seiten-CSS). Keine Rahmenlinien als Dekor – Eingaben haben nur
   eine feine Innenkante als Bedienhinweis. Sanftes Gold nur im Senden-Knopf (knopf--primaer), im Danke-Zeichen und im
   WhatsApp-Senden des Ersatz-Feldes. Die Karte liegt ruhig auf dem fixierten Navy-Grund (kein Band, keine Vignette).
   Ohne JavaScript (Formular ohne .ist-bereit): alle Schritte untereinander, natives Datei-Feld, normaler POST. */

/* ---------- Abschnitt ---------- */
.formularbereich { padding-block: var(--abschnitt); }
.formularbereich__raster { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.formularbereich__kopf { max-width: 36rem; }
.formularbereich__kopf .kicker { margin-bottom: .7rem; }
.formularbereich__text { max-width: 32rem; margin-top: .85rem; color: var(--text-2); text-wrap: pretty; }
.formularbereich__neben { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.formularbereich__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--schatten-tief); }
.formularbereich__neben .direkt { margin-top: 0; }
.formularbereich__neben .kontakt-vertraulich { margin-top: .25rem; }
@media (min-width: 700px) and (max-width: 1023px) {
  .formularbereich__neben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 1024px) {
  .formularbereich__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 2rem; align-items: start; }
  .formularbereich__kopf { grid-column: 1; grid-row: 1; padding-top: .35rem; }
  .af-rahmen { grid-column: 2; grid-row: 1 / span 2; }
  .formularbereich__neben { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--kopf-h-kompakt) + 1.5rem); }
}

/* ---------- Karte ---------- */
.af-rahmen { position: relative; min-width: 0; padding: clamp(1.15rem, 3.4vw, 2.5rem); border-radius: var(--radius-l); background-color: var(--karte); container-type: inline-size; container-name: anfrage; }
.af { position: relative; min-width: 0; }
/* Honeypot: per hidden-Attribut (display:none) – Passwort- und Identitaetsmanager fuellen unsichtbare Felder nicht aus */
.af__hp { display: none !important; }
.af__kopf { display: grid; gap: .7rem; margin-bottom: 1.25rem; }
.af__pflichtnotiz { justify-self: end; font-size: .75rem; line-height: 1.3; color: var(--text-3); }
.af__stern { margin-left: .22em; color: var(--hell-400); font-weight: 600; }

/* ---------- Fortschritt ---------- */
.af__fortschritt { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.af__fs-knopf { display: grid; gap: .55rem; width: 100%; min-height: 44px; margin: 0; padding: 0 0 .1rem; border: 0; background: none; color: var(--text-3); font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.af__fs-balken { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background-color: var(--weiss-10); }
.af__fs-balken::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--hell-100); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-aus), background-color .3s; }
.af__fs-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.af__fs-nr { margin-right: .35em; font-variant-numeric: tabular-nums; color: var(--hell-500); }
.af__fs.ist-fertig .af__fs-balken::after { transform: scaleX(1); background-color: var(--hell-500); }
.af__fs.ist-aktiv .af__fs-balken::after { transform: scaleX(1); }
.af__fs.ist-aktiv .af__fs-knopf { color: var(--ivory); }
.af__fs.ist-aktiv .af__fs-nr { color: var(--hell-300); }
.af__fs-knopf:hover { color: var(--text); }
.af__fs-knopf:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* ---------- Schritte ---------- */
.af__schritt-titel { margin-bottom: 1.15rem; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--ivory); text-wrap: balance; }
.af__schritt-titel:focus { outline: none; }
.af__schritt-titel:focus-visible { outline: 2px solid var(--hell-100); outline-offset: 4px; border-radius: 4px; }
.af__raster { display: grid; gap: 1.25rem 1rem; }
@container anfrage (min-width: 520px) {
  .af__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .af__feld--breit { grid-column: 1 / -1; }
}
/* Ohne JavaScript bzw. Sicherheitsnetz (html.js-ohne) und Formular nicht eingerichtet: alle Schritte untereinander.
   Bewusst ohne :is(), damit auch sehr alte Browser die No-JS-Regeln lesen. */
html:not(.js) .af:not(.ist-bereit) .af__schritt + .af__schritt,
html.js-ohne .af:not(.ist-bereit) .af__schritt + .af__schritt { margin-top: 2.5rem; }
/* Mit JavaScript schon vor dem Einrichten das Layout von Schritt 1: kein Zusammenfall, wenn formulare.js (deferred)
   auf Schritt 1 abblendet (Anker-Landung "Anfrage", CLS 0,12-0,15). Senden erst im letzten Schritt. */
html.js:not(.js-ohne) .af:not(.ist-bereit) [data-schritt]:not([data-schritt="1"]) { display: none; }
html.js:not(.js-ohne) .af:not(.ist-bereit):has([data-fortschritt]) [data-senden] { display: none; }
/* Fortschritt und Weiter nur mit Skript. Mit .af:not(.ist-bereit): ein eingerichtetes Formular behaelt seine Navigation,
   auch wenn js-ohne wegen main.js gesetzt wird. */
html:not(.js) .af:not(.ist-bereit) .af__fortschritt, html:not(.js) .af:not(.ist-bereit) [data-weiter],
html.js-ohne .af:not(.ist-bereit) .af__fortschritt, html.js-ohne .af:not(.ist-bereit) [data-weiter] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .af__schritt.ist-neu, .af-status.ist-neu { animation: af-einblenden .42s var(--ease-aus) both; }
}
@keyframes af-einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Felder ---------- */
.af__feld { min-width: 0; margin: 0; padding: 0; border: 0; }
.af__label { display: block; margin-bottom: .45rem; padding: 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--ivory); }
.af__label--klein { margin-bottom: .35rem; font-size: .8125rem; font-weight: 500; color: var(--text-2); }
.af__optional { margin-left: .5rem; font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: var(--text-3); }
.af__hinweis { margin: -.15rem 0 .55rem; font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.af__eingabe {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 12px;
  background-color: rgba(0, 1, 24, .42);
  box-shadow: inset 0 0 0 1px rgba(198, 208, 238, .3);
  color: var(--ivory);
  font-family: var(--schrift);
  font-size: 1rem; /* 16 px: kein Zoom beim Fokus in iOS Safari */
  line-height: 1.4;
  transition: box-shadow .2s, background-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.af__eingabe::placeholder { color: rgba(169, 177, 201, .7); }
.af__eingabe:hover { box-shadow: inset 0 0 0 1px rgba(198, 208, 238, .5); }
.af__eingabe:focus { outline: none; background-color: rgba(3, 10, 69, .62); box-shadow: inset 0 0 0 1.5px var(--hell-200), 0 0 0 4px rgba(174, 187, 229, .18); }
.af__eingabe--text { min-height: 136px; resize: vertical; line-height: 1.55; }
.af__auswahl { position: relative; }
.af__auswahl .af__eingabe { padding-right: 2.8rem; cursor: pointer; }
.af__auswahl .af__eingabe option { color: #0b0f2a; background-color: #fff; }
.af__auswahl-pfeil { position: absolute; right: .95rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--hell-300); pointer-events: none; }
.af__unter { display: flex; align-items: flex-start; gap: .75rem; }
.af__unter .af__fehler { flex: 1 1 auto; }
.af__zaehler { flex: none; margin-top: .4rem; margin-left: auto; font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text-3); }
.af__zaehler.ist-knapp { color: var(--hell-100); }
.af__fehler { display: flex; gap: .45rem; align-items: flex-start; margin-top: .45rem; font-size: .8125rem; font-weight: 500; line-height: 1.45; color: var(--fehler); }
.af__fehler:empty { display: none; }
.af__fehler::before, .af__zf-titel::before, .af__meldung [data-meldung-text]::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: .12rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.85 3.6v5.6h1.7V3.6Zm0 7v1.8h1.7v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.85 3.6v5.6h1.7V3.6Zm0 7v1.8h1.7v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.af__feld.ist-fehler > .af__eingabe,
.af__feld.ist-fehler > .af__auswahl > .af__eingabe,
.af__paar.ist-fehler .af__eingabe { box-shadow: inset 0 0 0 1.5px var(--fehler); }
.af__feld.ist-fehler > .af__eingabe:focus,
.af__paar.ist-fehler .af__eingabe:focus { box-shadow: inset 0 0 0 1.5px var(--fehler), 0 0 0 4px rgba(255, 180, 166, .16); }
@media (prefers-reduced-motion: no-preference) {
  .af__feld.ist-vorbefuellt .af__eingabe { animation: af-vorbefuellt 1.8s var(--ease-weich); }
}
@keyframes af-vorbefuellt { 0%, 35% { background-color: rgba(10, 22, 96, .7); box-shadow: inset 0 0 0 1.5px var(--hell-100), 0 0 0 4px rgba(198, 208, 238, .26); } }

/* Telefon oder E-Mail */
.af__paar-felder { display: grid; gap: .9rem 1rem; }
@container anfrage (min-width: 500px) { .af__paar-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Auswahl-Chips ---------- */
.af__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.af__chip-wahl { position: relative; display: flex; min-width: 0; }
.af__chip-eingabe { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.af__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: 999px;
  background-color: rgba(0, 1, 24, .42);
  box-shadow: inset 0 0 0 1px rgba(198, 208, 238, .3);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.af__chip-haken { width: 0; height: 1rem; opacity: 0; stroke-width: 2.2; transition: width .2s var(--ease-aus), opacity .2s; }
.af__chip:hover { background-color: rgba(10, 22, 96, .55); box-shadow: inset 0 0 0 1px rgba(198, 208, 238, .52); }
.af__chip-eingabe:focus-visible + .af__chip { outline: 2px solid var(--hell-100); outline-offset: 3px; }
.af__chip-eingabe:checked + .af__chip { background-color: var(--hell-100); box-shadow: none; color: var(--navy-900); font-weight: 600; }
.af__chip-eingabe:checked + .af__chip .af__chip-haken { width: 1rem; opacity: 1; }
.af__gruppe.ist-fehler .af__chip { box-shadow: inset 0 0 0 1.5px var(--fehler); }
.af__chip--icon { justify-content: flex-start; gap: .65rem; min-height: 54px; padding: .45rem 1.1rem .45rem .45rem; border-radius: 16px; text-align: left; }
.af__chip-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background-color: var(--weiss-10); color: var(--hell-200); transition: background-color .2s, color .2s; }
.af__chip-icon .icon { width: 1.1rem; height: 1.1rem; }
.af__chip-eingabe:checked + .af__chip--icon .af__chip-icon { background-color: rgba(0, 2, 46, .08); color: var(--navy-900); }
.af__chips--anliegen { display: grid; grid-template-columns: minmax(0, 1fr); }
@container anfrage (min-width: 520px) { .af__chips--anliegen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container anfrage (max-width: 499px) {
  .af__chips--vier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af__chips--vier .af__chip { padding-inline: .6rem; font-size: .875rem; }
}
.af__tipp { display: flex; gap: .65rem; align-items: flex-start; margin-top: .75rem; padding: .75rem .95rem; border-radius: 12px; background-color: var(--weiss-06); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.af__tipp .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .12rem; color: var(--hell-300); }
.af__tipp a { color: var(--hell-100); font-weight: 600; }

/* ---------- Einwilligung ---------- */
.af__einwilligung { position: relative; }
.af__check-eingabe { position: absolute; top: 1.2rem; left: 1.4rem; width: 1px; height: 1px; margin: 0; opacity: 0; }
.af__check { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; background-color: var(--weiss-06); font-size: .875rem; line-height: 1.55; color: var(--text-2); cursor: pointer; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.af__check:hover { background-color: var(--weiss-10); }
.af__check-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: .05rem; border-radius: 7px; background-color: rgba(0, 1, 24, .5); box-shadow: inset 0 0 0 1.5px rgba(198, 208, 238, .6); color: var(--navy-900); transition: background-color .2s, box-shadow .2s; }
.af__check-box .icon { width: 16px; height: 16px; stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s var(--ease-aus); }
.af__check-eingabe:checked + .af__check .af__check-box { background-color: var(--hell-100); box-shadow: none; }
.af__check-eingabe:checked + .af__check .af__check-box .icon { stroke-dashoffset: 0; }
.af__check-eingabe:focus-visible + .af__check { outline: 2px solid var(--hell-100); outline-offset: 3px; }
.af__check a { color: var(--hell-100); font-weight: 600; }
.af__einwilligung.ist-fehler .af__check-box { box-shadow: inset 0 0 0 1.5px var(--fehler); }

/* ---------- Upload ---------- */
.af__ablage { position: relative; border-radius: 16px; }
.af__datei-eingabe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.af__ablage-flaeche { display: flex; align-items: center; gap: .9rem; min-height: 84px; padding: 1rem 1.1rem; border-radius: inherit; background-color: rgba(0, 1, 24, .34); box-shadow: inset 0 0 0 1px rgba(198, 208, 238, .24); transition: background-color .2s, box-shadow .2s; }
.af__ablage-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background-color: var(--weiss-10); color: var(--hell-100); transition: background-color .2s, color .2s, transform .3s var(--ease-aus); }
.af__ablage-icon .icon { width: 1.25rem; height: 1.25rem; }
.af__ablage-text { display: grid; gap: .15rem; min-width: 0; }
.af__ablage-titel { font-weight: 600; line-height: 1.35; color: var(--ivory); }
.af__ablage-knopf { color: var(--hell-100); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.af__ablage-hinweis { font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
.af__ablage:hover .af__ablage-flaeche, .af__ablage.ist-ziehen .af__ablage-flaeche { background-color: rgba(10, 22, 96, .55); box-shadow: inset 0 0 0 1.5px var(--hell-300); }
.af__ablage.ist-ziehen .af__ablage-icon { background-color: var(--hell-100); color: var(--navy-900); transform: translateY(-2px); }
.af__datei-eingabe:focus-visible + .af__ablage-flaeche { outline: 2px solid var(--hell-100); outline-offset: 3px; }
.af__ablage.ist-voll .af__ablage-flaeche { opacity: .55; }
.af__upload.ist-fehler .af__ablage-flaeche { box-shadow: inset 0 0 0 1.5px var(--fehler); }
@media (hover: none) { .af__ablage-ziehen { display: none; } }
/* Ohne JavaScript (bzw. js-ohne): Beschreibung oben, darunter das sichtbare native Datei-Feld.
   Mit JavaScript gilt schon vor dem Einrichten die Ablage-Darstellung (gleiches Layout wie nach dem Init). */
html:not(.js) .af:not(.ist-bereit) .af__ablage, html.js-ohne .af:not(.ist-bereit) .af__ablage { display: flex; flex-direction: column-reverse; gap: .6rem; }
html:not(.js) .af:not(.ist-bereit) .af__ablage-titel, html.js-ohne .af:not(.ist-bereit) .af__ablage-titel { display: none; }
html:not(.js) .af:not(.ist-bereit) .af__datei-eingabe, html.js-ohne .af:not(.ist-bereit) .af__datei-eingabe { position: static; width: 100%; height: auto; opacity: 1; font-size: .875rem; color: var(--text-2); }
.af__datei-eingabe::file-selector-button { margin-right: .75rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px; background-color: var(--weiss-16); color: var(--ivory); font: inherit; font-weight: 600; cursor: pointer; }
.af__dateien { display: grid; gap: .4rem; margin-top: .6rem; }
.af__datei { display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .3rem .3rem .3rem .85rem; border-radius: 12px; background-color: var(--weiss-06); }
.af__datei-icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--hell-300); }
.af__datei-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .875rem; font-weight: 600; color: var(--ivory); }
.af__datei-groesse { flex: none; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--text-3); }
.af__datei-weg { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.af__datei-weg:hover { background-color: var(--weiss-10); color: var(--ivory); }
.af__datei-weg .icon { width: 1rem; height: 1rem; }
.af__dateisumme { margin-top: .45rem; font-size: .75rem; color: var(--text-3); }

/* ---------- Fehlerliste und Meldungen ---------- */
/* Ruhiges Navy statt rosa/violetter Flaeche: der Fehlerzustand zeigt sich ueber Zeichen und Textfarbe.
   Die Kaesten werden nur per Skript fokussiert (tabindex=-1) – deshalb kein zusaetzlicher Rahmen beim Fokus. */
.af__zusammenfassung { display: grid; gap: .35rem; margin-bottom: 1.3rem; padding: .95rem 1.1rem; border-radius: 14px; background-color: rgba(10, 22, 96, .62); }
.af__zusammenfassung:focus, .af__zusammenfassung:focus-visible { outline: none; }
.af__zf-titel { display: flex; gap: .5rem; align-items: flex-start; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--ivory); }
.af__zf-titel::before { color: var(--fehler); margin-top: .16rem; }
.af__zf-liste { display: grid; gap: .1rem; padding-left: 1.45rem; }
.af__zf-liste a { display: inline-block; padding-block: .2rem; color: var(--fehler); font-size: .875rem; line-height: 1.45; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.af__zf-liste a:hover { color: #ffd6cd; }
.af__meldung { display: grid; gap: .75rem; margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 14px; background-color: rgba(10, 22, 96, .62); font-size: .9375rem; line-height: 1.5; color: var(--text); }
.af__meldung:focus, .af__meldung:focus-visible { outline: none; }
.af__meldung [data-meldung-text] { display: flex; gap: .55rem; align-items: flex-start; }
.af__meldung [data-meldung-text]::before { margin-top: .22rem; color: var(--fehler); }
.af__meldung-knopf { justify-self: start; margin-left: 1.45rem; white-space: nowrap; }
.af__meldung-knopf .icon { width: 1.05rem; height: 1.05rem; }
/* Telefon: Ersatzweg als Hauptknopf ueber die volle Breite, ohne Einzug (vorher brach "E-Mail" um) */
@container anfrage (max-width: 499px) { .af__meldung-knopf { justify-self: stretch; margin-left: 0; min-height: 48px; } }

/* ---------- Aktionen ---------- */
.af__aktionen { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.af__aktionen .knopf { margin-left: auto; white-space: nowrap; }
.af__zurueck { display: inline-flex; align-items: center; gap: .4rem; min-height: 52px; margin: 0; padding: .5rem 1rem .5rem .75rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.af__zurueck:hover { background-color: var(--weiss-06); color: var(--ivory); }
.af__zurueck .icon { width: 1rem; height: 1rem; }
.af__weiter { color: var(--ivory); background-color: var(--weiss-16); }
.af__weiter:is(:hover, :focus-visible) { background-color: rgba(255, 255, 255, .24); }
@container anfrage (max-width: 499px) {
  .af__aktionen .knopf { flex: 1 1 auto; padding-inline: 1.1em; }
  /* Runde 6: Senden (Champagner) nicht als vollbreiter Balken – Breite nach Inhalt, rechts */
  .af__aktionen .af__senden { flex: 0 1 auto; }
}
/* Schmale Telefone: Zurueck nur als Pfeil (Name bleibt fuer Screenreader), Senden bleibt einzeilig */
@container anfrage (max-width: 419px) {
  .af__zurueck { justify-content: center; width: 52px; flex: none; padding: 0; background-color: var(--weiss-06); }
  .af__zurueck-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.af__spinner { display: none; width: 18px; height: 18px; flex: none; border: 2px solid rgba(0, 2, 46, .2); border-top-color: var(--navy-900); border-radius: 50%; }
.af.ist-sendend .af__spinner { display: block; animation: af-drehen .8s linear infinite; }
.af.ist-sendend .af__senden .knopf__icon { display: none; }
.af__senden:disabled { cursor: progress; }
.af.ist-sendend .af__schritt { opacity: .6; transition: opacity .2s; }
@keyframes af-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af.ist-sendend .af__spinner { animation-duration: 2.4s; } }
.af__vertraulich { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
.af__vertraulich .icon { width: 1rem; height: 1rem; flex: none; color: var(--hell-400); }
@container anfrage (min-width: 500px) { .af__vertraulich { justify-content: flex-end; } }

/* ---------- Danke- und Ersatz-Feld ---------- */
.af-status:focus { outline: none; }
.af-status__zeichen { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--primaer); color: var(--navy-900); }
.af-status--ersatz .af-status__zeichen { background-color: var(--weiss-10); color: var(--hell-100); }
.af-status__zeichen .icon { width: 1.55rem; height: 1.55rem; stroke-width: 1.8; }
.af-status__titel { margin-top: 1.1rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: var(--ivory); text-wrap: balance; }
.af-status__titel:focus { outline: none; }
.af-status__titel:focus-visible { outline: 2px solid var(--hell-100); outline-offset: 4px; border-radius: 4px; }
.af-status__text { max-width: 38rem; margin-top: .65rem; color: var(--text-2); text-wrap: pretty; }
.af-status__zwischen { margin-top: 1.6rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hell-400); }
.af-status__schritte { display: grid; gap: .45rem; margin-top: .7rem; }
.af-status__schritte li { display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem .7rem .7rem; border-radius: 14px; background-color: var(--weiss-06); font-size: .9375rem; line-height: 1.45; color: var(--text); }
.af-status__nr { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background-color: var(--weiss-10); color: var(--hell-100); font-size: .8125rem; font-weight: 600; }
.af-status__eilig { margin-top: 1.1rem; font-size: .875rem; color: var(--text-2); }
.af-status__eilig a { color: var(--hell-100); font-weight: 600; white-space: nowrap; }
.af-status__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-top: 1.5rem; }
.af-status__wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.4rem; }
.af-weg { gap: .55rem; min-width: 0; padding-inline: .8rem; white-space: nowrap; }
.af-weg .icon { width: 1.15rem; height: 1.15rem; flex: none; }
@container anfrage (max-width: 619px) {
  .af-weg { flex-direction: column; gap: .3rem; min-height: 70px; padding: .6rem .3rem; border-radius: 16px; font-size: .8125rem; }
  .af-weg__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.af-status__anhang { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; background-color: var(--weiss-06); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.af-status__anhang .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem; color: var(--hell-300); }
.af-status__vorschau { margin-top: .9rem; }
.af-status__vorschau summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--hell-200); font-size: .9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.af-status__vorschau summary::-webkit-details-marker { display: none; }
.af-status__vorschau summary .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease-aus); }
.af-status__vorschau[open] summary .icon { transform: rotate(180deg); }
.af-status__vorschau summary:hover { color: var(--ivory); }
.af-status__vorschau-text { max-height: 18rem; margin: .3rem 0 0; padding: .9rem 1rem; overflow: auto; border-radius: 12px; background-color: rgba(0, 1, 24, .42); font-family: var(--schrift); font-size: .8125rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.af-status__vorschau-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1rem; }
.af-status__kopiert { font-size: .8125rem; color: var(--hell-200); }
.af-status__fuss { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: .5rem; }
/* Schmale Karten (Telefon): beide Links in einer Reihe statt untereinander mit grossem Abstand */
@container anfrage (max-width: 419px) {
  .af-status__vorschau { margin-top: .6rem; }
  .af-status__fuss { gap: 0 1rem; margin-top: .25rem; }
  .af-status__fuss .af-status__link { font-size: .8125rem; }
}
.af-status__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--hell-200); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(221, 227, 243, .35); text-decoration-thickness: 1px; text-underline-offset: .25em; cursor: pointer; }
.af-status__link:hover { color: var(--ivory); text-decoration-color: currentColor; }
.af-status__link .icon { width: 1rem; height: 1rem; flex: none; }

/* ---------- Runde 6: Hinweis-Modus, Entwurf, Sende-Fortschritt, Datei-Markierung, Unklar, Kontaktzeile ---------- */
.af__offline { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .25rem; align-items: start; padding: .95rem 1rem; border-radius: 14px; background-color: rgba(10, 22, 96, .62); }
.af__offline-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--weiss-10); color: var(--hell-100); }
.af__offline-icon .icon { width: 1.1rem; height: 1.1rem; }
.af__offline-titel { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--ivory); }
.af__offline-text { font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.af__offline-wege { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: .5rem; margin-top: .55rem; }
.af__offline-wege .knopf { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.af__entwurf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .9rem; padding: .15rem .35rem .15rem .95rem; border-radius: 12px; background-color: var(--weiss-06); font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.af__entwurf .af-status__link { font-size: .8125rem; }
.af__senden-fortschritt { display: grid; gap: .45rem; margin-top: .95rem; }
.af__senden-balken { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 6px; background-color: var(--weiss-10); }
.af__senden-fuellung { position: absolute; inset: 0; border-radius: inherit; background-color: var(--hell-100); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s linear; }
.af__senden-fortschritt.ist-hochgeladen .af__senden-fuellung { background-color: var(--hell-300); }
.af__senden-text { font-size: .8125rem; line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .af__senden-fuellung { transition: none; } }
.af.ist-gesperrt .af__schritt, .af.ist-gesperrt .af__fortschritt { pointer-events: none; }
.af__datei-text { display: grid; flex: 1 1 auto; min-width: 0; }
.af__datei-hinweis { font-size: .75rem; font-weight: 600; line-height: 1.35; color: var(--fehler); }
.af__datei.ist-fehler { box-shadow: inset 0 0 0 1.5px var(--fehler); }
.af__datei.ist-fehler .af__datei-icon { color: var(--fehler); }
.af__upload.ist-pruefend .af__ablage-flaeche { opacity: .7; }
.af-status--unklar .af-status__zeichen { background-color: var(--weiss-10); color: var(--hell-100); }
.af-status__kontakt { display: grid; gap: .25rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; background-color: var(--weiss-06); font-size: .9375rem; line-height: 1.5; color: var(--text); }
.af-status__kontakt strong { font-weight: 600; color: var(--ivory); overflow-wrap: anywhere; }
.af-status__kontakt-zusatz { font-size: .875rem; color: var(--text-2); }
.af-status__kontakt a { color: var(--hell-100); font-weight: 600; white-space: nowrap; }
.af-status__lang { display: flex; gap: .65rem; align-items: flex-start; margin-top: .9rem; padding: .8rem 1rem; border-radius: 14px; background-color: rgba(10, 22, 96, .62); font-size: .875rem; line-height: 1.5; color: var(--text); }
.af-status__lang .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem; color: var(--hell-300); }
.af-status__kopieren { width: 100%; margin-top: .6rem; }
.af-status__kopiert--gross { display: block; margin-top: .35rem; }
.af-status__kopiert--gross:empty { display: none; }