/* =============================================================================
   Modul Formulare – Darstellung
   Standard ist schlicht: das Formular steht direkt auf der Sektion.
   Abschnitte tragen die Nummer im Kaestchen (Feldmarke, Lora), Felder sind
   ruhige Flaechen; beim Fokus baut sich die Unterstreichung auf. Beim Senden
   laeuft im Knopf die Taktspur ab, als wuerde der Bogen gelesen.
   Option „Als Blatt“ (.epi-formular--blatt, Block-Einstellung): eigene weisse
   Flaeche mit Tiefe, zwei Passermarken und unten die Taktspur wie auf einem
   Erfassungsbogen; dort laeuft beim Senden diese Spur ab.
   Labels stehen sichtbar ueber dem Feld, Pflichtfelder tragen ein Sternchen,
   Fehler zeigen Rand, Icon und Klartext. Bewegung entfaellt mit
   prefers-reduced-motion.
   ============================================================================= */

.epi-formular {
    --formular-uebergang: var(--motion-state-duration) var(--motion-state-easing);
    --formular-aufbau: 320ms var(--motion-entrance-easing);
    --blatt-rand: clamp(1.25rem, 4vw, 2.5rem);
    --takt-hoehe: 10px;
    --takt-abstand: 1.25rem;
    /* Taktspur: Zeitmarken im Takt des Kaestchenrasters */
    --takt: repeating-linear-gradient(to right, currentColor 0 7px, transparent 7px var(--grid-mesh));
    /* Feder-Haken der Feldmarke (tokens.components.feldmarke.haken.pfad) */
    --formular-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 19.5 17'%3E%3Cpath d='M4.1 11.8Q4 10.6 5.4 10.7L10.3 15.5Q15.7 9.4 20.2 3.6Q21 2.6 21.6 3.3Q22 3.8 21.3 4.7Q16.7 10.8 11.3 17.9Q10.1 19.3 8.9 18.1L4.3 12.6Q4 12.3 4.1 11.8Z'/%3E%3C/svg%3E");

    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* Lesbare Zeilen: breiter wird ein Formular nicht, auch in voller Sektion. */
    max-width: 52rem;
    color: var(--color-text);
}

.epi-formular [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Option Blatt
   --------------------------------------------------------------------------- */

.epi-formular--blatt {
    /* oben mind. 2,5 rem, damit die Passermarke nichts ueberdeckt */
    padding: max(var(--blatt-rand), 2.5rem) var(--blatt-rand) calc(var(--blatt-rand) + var(--takt-hoehe) + var(--takt-abstand));
    border-radius: var(--radius-lg);
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
}

/* Passermarken: zwei Winkel in Orange, oben links und unten rechts. */
.epi-formular--blatt::before,
.epi-formular--blatt::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 0 solid var(--color-primary);
    pointer-events: none;
}

.epi-formular--blatt::before {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    border-width: 3px 0 0 3px;
}

.epi-formular--blatt::after {
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    border-width: 0 3px 3px 0;
}

/* Die Taktspur liegt am Formular, damit sie mit dem Erfolg verschwindet;
   die Sendeanzeige ist dieselbe Spur in Orange. */
.epi-formular--blatt .epi-formular__form::before,
.epi-formular--blatt .epi-formular__form::after {
    content: "";
    position: absolute;
    inset-inline: var(--blatt-rand) calc(var(--blatt-rand) + 1.5rem);
    inset-block-end: var(--takt-abstand);
    height: var(--takt-hoehe);
    background-image: var(--takt);
    pointer-events: none;
}

.epi-formular--blatt .epi-formular__form::before {
    color: var(--color-line);
}

.epi-formular--blatt .epi-formular__form::after {
    color: var(--color-primary);
    clip-path: inset(0 100% 0 0);
}

/* ---------------------------------------------------------------------------
   Option Glas (CSS-Klasse epi-formular--glas, im Block unter „Erweitert“):
   die Karte ist mattes, halbdurchsichtiges Weiss. Dahinter liegen zwei
   stark weichgezeichnete Flaechen in Orange und Tuerkis, die nur als Hauch
   durchscheinen. Die Flaechen liegen am Rahmen, die Glasflaeche an Formular
   und Erfolg, damit backdrop-filter sie erfasst. Ohne backdrop-filter und
   bei prefers-reduced-transparency wird die Karte (fast) deckend. Keine
   Bewegung.
   --------------------------------------------------------------------------- */

.epi-formular--glas {
    --glas-hauch: 0.18;
    --glas-weich: 64px;
    isolation: isolate;
}

.epi-formular--glas::before,
.epi-formular--glas::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: var(--glas-hauch);
    filter: blur(var(--glas-weich));
    pointer-events: none;
}

.epi-formular--glas::before {
    inset: -6% auto auto -4%;
    background-color: var(--color-primary);
}

.epi-formular--glas::after {
    inset: auto -6% -4% auto;
    background-color: var(--color-accent);
}

.epi-formular--glas > :is(.epi-formular__form, .epi-formular__erfolg) {
    padding: var(--blatt-rand);
    border: 1px solid rgb(255 255 255 / 0.75);
    border-radius: var(--radius-lg);
    /* 0.7: Grau #6F6E68 haelt so auch ueber der staerksten Toenung 4,5:1. */
    background-color: rgb(255 255 255 / 0.7);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.06);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}

/* Auswahl und Felder auf dem Glas: hell und leicht statt deckender
   Cremeflaechen. Felder und Kacheln sind halbdurchsichtiges Weiss mit
   Haarlinie; die Grenze, die das Bedienelement erkennbar macht, tragen
   Grundlinie, Kreis und Kaestchen in Grau (4,7:1). Zeilen haben keine
   Flaeche; beim Zeigen ein Hauch Weiss nur so breit wie der Inhalt und
   Tuerkis an Kreis bzw. Kaestchen. Gewaehlt ist staerker: 2 px Tuerkis,
   getoentes Weiss, gefuellter Kreis. Der Fokusring bleibt unabhaengig. */
.epi-formular--glas .epi-formular__optionen {
    justify-items: start;
}

.epi-formular--glas .epi-formular__option {
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.epi-formular--glas .epi-formular__option:hover {
    background-color: rgb(255 255 255 / 0.6);
    color: var(--color-dark);
}

.epi-formular--glas .epi-formular__option:hover input:not(:checked) {
    border-color: var(--color-accent-dark-wcag);
}

.epi-formular--glas .epi-formular__feld--kacheln .epi-formular__optionen {
    justify-items: stretch;
}

.epi-formular--glas .epi-formular__feld--kacheln .epi-formular__option {
    background-color: rgb(255 255 255 / 0.55);
    box-shadow: inset 0 0 0 1px var(--color-line);
}

.epi-formular--glas .epi-formular__feld--kacheln .epi-formular__option:hover {
    background-color: rgb(255 255 255 / 0.9);
    box-shadow: inset 0 0 0 1px var(--color-accent-dark-wcag);
}

.epi-formular--glas .epi-formular__feld--kacheln .epi-formular__option:has(input:checked) {
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-base));
    box-shadow: inset 0 0 0 2px var(--color-accent-dark-wcag);
}

.epi-formular.epi-formular--glas :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    border-color: var(--color-line);
    border-bottom-color: var(--color-secondary);
    border-radius: var(--standard-border-radius);
    background-color: rgb(255 255 255 / 0.55);
}

.epi-formular.epi-formular--glas .epi-formular__feld:not(.ist-fehlerhaft) :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover {
    border-color: var(--color-accent-dark-wcag);
    border-bottom-color: var(--color-accent-dark-wcag);
    background-color: rgb(255 255 255 / 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .epi-formular--glas .epi-formular__option {
        transition: none;
    }
}

/* Mobil: kleinere Weichzeichnung, Flaechen innerhalb der Karte (kein
   seitlicher Ueberstand, weniger Rechenarbeit beim Scrollen). */
@media (max-width: 767px) {
    .epi-formular--glas {
        --glas-weich: 40px;
    }

    .epi-formular--glas::before {
        inset: 0 auto auto 0;
    }

    .epi-formular--glas::after {
        inset: auto 0 0 auto;
    }

    .epi-formular--glas > :is(.epi-formular__form, .epi-formular__erfolg) {
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .epi-formular--glas > :is(.epi-formular__form, .epi-formular__erfolg) {
        background-color: rgb(255 255 255 / 0.92);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .epi-formular--glas > :is(.epi-formular__form, .epi-formular__erfolg) {
        background-color: var(--color-base);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---------------------------------------------------------------------------
   Aufbau: Hinweis, Abschnitte, Felder
   --------------------------------------------------------------------------- */

.epi-formular__form {
    container-type: inline-size;
    display: grid;
    gap: 2rem;
}

.epi-formular__hinweis {
    margin: 0 0 -1rem;
    justify-self: end;
    font-size: 0.875rem;
    color: var(--color-secondary);
}

.epi-formular__pflicht {
    margin-inline-start: 0.125rem;
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}

.epi-formular__gruppe,
.epi-formular fieldset.epi-formular__feld {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.epi-formular__gruppe-titel {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

/* Nummer im Kaestchen wie .epi-step (Feldmarke „nummer“), in Lora wie die
   Ueberschriften. */
.epi-formular__nummer {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    box-sizing: border-box;
    border: 2px solid var(--color-accent-dark-wcag);
    border-radius: 2px;
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent-dark-wcag);
}

/* Nummerierte Fragen zaehlt das CSS: eine ausgeblendete (hidden) zaehlt nicht mit. */
.epi-formular__form {
    counter-reset: epi-abschnitt;
}

.epi-formular__abschnitt--nummer {
    counter-increment: epi-abschnitt;
}

.epi-formular__nummer::before {
    content: counter(epi-abschnitt);
}

.epi-formular__beschreibung {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Bedingter Hinweis (Feldtyp hinweis), etwa „Produkt ausgewählt …“: steht
   dicht unter der Auswahl, mit dem Feder-Haken als Bestaetigung. */
.epi-formular__bedingter-hinweis {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    margin: -1.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.epi-formular__bedingter-hinweis::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 0.875rem;
    background: var(--color-accent-dark-wcag);
    -webkit-mask: var(--formular-haken) center / contain no-repeat;
    mask: var(--formular-haken) center / contain no-repeat;
}

/* Hinweis unter dem Formular, z. B. zur Datenschutzerklaerung. */
.epi-formular__datenschutz {
    margin: -0.75rem 0 0;
    max-width: 40rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

.epi-formular__datenschutz a {
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-formular__datenschutz a:hover {
    color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   Auswahl (radio, auswahl_mehrfach): jede Option eine klickbare Zeile mit
   mind. 44 px. Einfachauswahl untereinander, Mehrfachauswahl in zwei
   Spalten, wo Platz ist. Die Zeile ist ruhig; beim Zeigen hinterlegt,
   gewaehlt in Gewicht 600.
   --------------------------------------------------------------------------- */

.epi-formular__optionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.125rem 0.75rem;
}

.epi-formular__feld--radio .epi-formular__optionen {
    grid-template-columns: minmax(0, 1fr);
}

.epi-formular__option {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--touch-min);
    padding: 0.5rem 0.625rem;
    border-radius: var(--standard-border-radius);
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--formular-uebergang);
}

.epi-formular__option:hover {
    background-color: var(--color-primary-light);
}

.epi-formular__option:has(input:checked) {
    font-weight: 600;
}

/* Kacheln (darstellung: kacheln): ganze Flaeche klickbar, drei Spalten,
   schmal zwei, mobil eine. Die erste Option (die neutrale Antwort) ist
   doppelt breit: fuenf Optionen fuellen so ein 2x3-Raster. */
.epi-formular .epi-formular__feld--kacheln .epi-formular__optionen {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
}

@container (min-width: 24rem) {
    .epi-formular .epi-formular__feld--kacheln .epi-formular__optionen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .epi-formular__feld--kacheln .epi-formular__option:first-child {
        grid-column: span 2;
    }
}

@container (min-width: 40rem) {
    .epi-formular .epi-formular__feld--kacheln .epi-formular__optionen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.epi-formular__feld--kacheln .epi-formular__option {
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color var(--formular-uebergang),
                box-shadow var(--formular-uebergang);
}

.epi-formular__feld--kacheln .epi-formular__option:hover {
    background-color: var(--color-secondary-20);
}

.epi-formular__feld--kacheln .epi-formular__option:has(input:checked) {
    background-color: var(--color-base);
    box-shadow: inset 0 0 0 2px var(--color-accent-dark-wcag);
}

@media (forced-colors: active) {
    .epi-formular__feld--kacheln .epi-formular__option:has(input:checked) {
        outline: 2px solid CanvasText;
    }
}

/* Fokus an der ganzen Zeile, nicht nur am kleinen Kreis. */
.epi-formular__option:has(input:focus-visible) {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 0;
}

.epi-formular .epi-formular__option input[type]:focus-visible {
    outline: none;
}

.epi-formular input[type="radio"] {
    appearance: none;
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    background: var(--color-base);
    cursor: pointer;
    transition: border-color var(--formular-uebergang);
}

.epi-formular input[type="radio"]::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--color-accent-dark-wcag);
    transform: scale(0);
    transition: transform var(--formular-uebergang);
}

.epi-formular input[type="radio"]:checked {
    border-color: var(--color-accent-dark-wcag);
}

.epi-formular input[type="radio"]:checked::before {
    transform: scale(1);
}

.epi-formular__option input[type="checkbox"] {
    margin: 0;
}

.epi-formular .ist-fehlerhaft input[type="radio"] {
    border-color: var(--color-error);
}

.epi-formular__felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.25rem;
}

.epi-formular__feld {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.375rem;
    align-content: start;
}

/* Halbe Breite nur, wo das Blatt Platz hat (rechte Spalte, Handy). */
@container (min-width: 30rem) {
    .epi-formular__feld--halb {
        grid-column: span 1;
    }
}

.epi-formular__label {
    font-size: 1rem;
    font-weight: 600;
    line-height: var(--line-height-ui);
    transition: color var(--formular-uebergang);
}

/* Das Label des aktiven Feldes nimmt die Fokusfarbe auf. */
.epi-formular__feld:focus-within .epi-formular__label {
    color: var(--color-accent-dark-wcag);
}

/* ---------------------------------------------------------------------------
   Eingabefelder: ruhige Flaeche mit Grundlinie, Unterstreichung baut sich
   beim Fokus von links auf. Hoehe 53 px, Nachricht 160 px.
   --------------------------------------------------------------------------- */

.epi-formular input[type="text"],
.epi-formular input[type="email"],
.epi-formular input[type="tel"],
.epi-formular select,
.epi-formular textarea {
    --linie: var(--color-accent-dark-wcag);
    width: 100%;
    min-height: 53px;
    box-sizing: border-box;
    padding: 0.8125rem 0.875rem;
    border: 1px solid transparent;
    border-bottom-color: var(--color-secondary);
    border-radius: var(--standard-border-radius) var(--standard-border-radius) 0 0;
    background-color: var(--color-primary-light);
    background-image: linear-gradient(var(--linie), var(--linie));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 3px;
    color: var(--color-text);
    font: inherit;
    line-height: var(--line-height-ui);
    /* Ueberschreibt die globale :focus/:invalid-Markierung aus forms.css. */
    outline: none;
    transition: background-color var(--formular-uebergang),
                border-color var(--formular-uebergang),
                background-size var(--formular-aufbau);
}

.epi-formular :is(input, textarea)::placeholder {
    color: var(--color-secondary); /* 4,7:1 auf Creme; nur Beispiel, nie Label-Ersatz */
    opacity: 1;
}

.epi-formular textarea {
    min-height: 160px;
    resize: vertical;
}

.epi-formular select {
    padding-right: 2.75rem;
    background-image: linear-gradient(var(--linie), var(--linie)), url("../../../assets/img/chevron.svg");
    background-position: left bottom, right 0.75rem center;
    background-size: 0 3px, 1.25rem;
    cursor: pointer;
}

.epi-formular :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover {
    border-bottom-color: var(--color-dark);
    background-color: var(--color-secondary-20);
}

.epi-formular :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
    border-color: var(--color-line);
    border-bottom-color: var(--color-accent-dark-wcag);
    background-color: var(--color-base);
    background-size: 100% 3px;
}

.epi-formular select:focus {
    background-size: 100% 3px, 1.25rem;
}

/* Ohne Hintergrundbilder (Kontrastmodus) traegt ein Rahmen den Fokus. */
@media (forced-colors: active) {
    .epi-formular :is(input, select, textarea):focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: 0;
    }
}

/* ---------------------------------------------------------------------------
   Einwilligung: 24-px-Kaestchen, angehakt tuerkise Flaeche mit weissem
   Feder-Haken
   --------------------------------------------------------------------------- */

.epi-formular__einwilligung {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.epi-formular input[type="checkbox"] {
    appearance: none;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.0625rem 0 0;
    border: 2px solid var(--color-secondary);
    border-radius: 3px;
    background: var(--color-base);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: border-color var(--formular-uebergang),
                background-color var(--formular-uebergang);
}

.epi-formular input[type="checkbox"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: var(--color-base);
    -webkit-mask: var(--formular-haken) center / contain no-repeat;
    mask: var(--formular-haken) center / contain no-repeat;
    transform: scale(0);
    transition: transform var(--formular-uebergang);
}

.epi-formular input[type="checkbox"]:hover {
    border-color: var(--color-dark);
}

.epi-formular input[type="checkbox"]:checked {
    border-color: var(--color-accent-dark-wcag);
    background: var(--color-accent-dark-wcag);
}

.epi-formular input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.epi-formular input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 0;
    border-color: var(--color-accent-dark-wcag);
}

.epi-formular__einwilligung {
    min-height: var(--touch-min);
}

/* Das Label ist das Klickziel: mind. 44 px hoch. */
.epi-formular__einwilligung label {
    padding-block: 0.625rem;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

.epi-formular__einwilligung input[type="checkbox"] {
    margin-top: 0.6875rem;
}

.epi-formular__einwilligung a {
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-formular__einwilligung a:hover {
    color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   Fehler: Rand, rote Grundlinie, Icon und Klartext
   --------------------------------------------------------------------------- */

.epi-formular__fehler {
    margin: 0;
    color: var(--color-error);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: var(--line-height-ui);
}

.epi-formular__fehler:empty {
    display: none;
}

.epi-formular__fehler::before,
.epi-formular__zusammenfassung-titel::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.375rem;
}

.epi-formular .ist-fehlerhaft :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    --linie: var(--color-error);
    border-color: var(--color-error);
    background-color: var(--color-base);
    background-size: 100% 3px;
}

.epi-formular .ist-fehlerhaft select {
    background-size: 100% 3px, 1.25rem;
}

/* Im Fokus zeigt der Rahmen den Fokus, die rote Linie bleibt als Fehler. */
.epi-formular .ist-fehlerhaft :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
    border-color: var(--color-accent-dark-wcag);
    border-bottom-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-accent-dark-wcag);
}

.epi-formular .ist-fehlerhaft input[type="checkbox"] {
    border-color: var(--color-error);
}

.epi-formular__zusammenfassung {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-error);
    border-radius: var(--standard-border-radius);
    background: var(--color-error-subtle);
    color: var(--color-text);
}

/* Zusammenfassung und Erfolg bekommen den Fokus nur per Skript, damit
   Screenreader sie vorlesen; sie sind nicht bedienbar, daher ohne Fokusring. */
.epi-formular__zusammenfassung:focus,
.epi-formular__erfolg:focus {
    outline: none;
}

.epi-formular__zusammenfassung-titel {
    margin: 0;
    font-weight: 600;
    color: var(--color-error);
}

.epi-formular__zusammenfassung-liste {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
}

.epi-formular__zusammenfassung-liste li + li {
    margin-top: 0.25rem;
}

.epi-formular__zusammenfassung-liste:empty {
    display: none;
}

.epi-formular__zusammenfassung-liste a {
    color: var(--color-error);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-formular__zusammenfassung-liste a:hover {
    color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   Absenden
   --------------------------------------------------------------------------- */

.epi-formular__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}

/* Farben und Hover vom globalen Button; der Pfeil rueckt beim Zeigen vor.
   display: global unter 768 px block, hier immer flex fuer den Pfeil. */
.epi-formular .epi-formular__senden {
    display: inline-flex;
    gap: 0.75rem;
    min-height: 53px;
    padding: 0.75rem 1.75rem;
}

.epi-formular .epi-formular__senden::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    transition: transform var(--formular-uebergang);
}

.epi-formular .epi-formular__senden:is(:hover, :focus-visible)::after {
    transform: translateX(4px);
}

@container (max-width: 29.99rem) {
    .epi-formular .epi-formular__senden {
        width: 100%;
    }
}

/* Waehrend des Sendens: Disabled-Look, Text im Knopf (formular.js), statt
   des Pfeils laeuft die Taktspur ab. */
.epi-formular .epi-formular__senden[aria-disabled="true"] {
    cursor: progress;
}

.epi-formular .epi-formular__senden[aria-disabled="true"]::after {
    content: none;
}

.epi-formular--blatt .epi-formular__form:has(.epi-formular__senden[aria-disabled="true"])::after {
    animation: epi-formular-lesen 1.4s steps(12, end) infinite;
}

/* Schlicht: dieselbe Spur, klein an der Unterkante des Knopfs. */
.epi-formular:not(.epi-formular--blatt) .epi-formular__senden[aria-disabled="true"] {
    position: relative;
    overflow: hidden;
}

.epi-formular:not(.epi-formular--blatt) .epi-formular__senden[aria-disabled="true"]::before {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.375rem;
    height: 4px;
    background-image: repeating-linear-gradient(to right, var(--color-accent-dark-wcag) 0 6px, transparent 6px 14px);
    clip-path: inset(0 100% 0 0);
    animation: epi-formular-lesen 1.4s steps(12, end) infinite;
}

/* Die Statuszeile ist fuer Screenreader; sehend zeigt der Knopf den Zustand. */
.epi-formular__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Mehrstufig (Schluessel „schritt“): ohne Skript stehen die Schritte mit
   Ueberschrift untereinander. Mit formular.js (.ist-mehrstufig) ist immer
   einer sichtbar; die Ueberschrift ist dann nur fuer Screenreader da und
   bekommt beim Wechsel den Fokus. Oben die Etappen: je eine Haarlinie mit
   Namen, erledigte und aktuelle fuellen sich in Orange von links.
   --------------------------------------------------------------------------- */

.epi-formular__schritte,
.epi-formular__schritt {
    display: grid;
    gap: 2rem;
    min-width: 0;
}

.epi-formular__schritt-titel {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    line-height: var(--line-height-heading);
}

.epi-formular__schritt-titel:focus {
    outline: none;
}

/* Mit Skript: Schritte als Spalte, die Leiste unten. --schritt-hoehe (vom
   Einsatzort gesetzt) gibt allen Schritten dieselbe Mindesthoehe; nur ein
   laengerer waechst darueber hinaus. */
.ist-mehrstufig .epi-formular__schritte {
    min-height: var(--schritt-hoehe, 0);
}

.ist-mehrstufig .epi-formular__schritt {
    display: flex;
    flex-direction: column;
}

.ist-mehrstufig .epi-formular__schritt > .epi-formular__aktionen {
    margin-top: auto;
}

.ist-mehrstufig .epi-formular__schritt-titel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.epi-formular__etappen {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    margin: 0 0 -0.5rem;
    padding: 0;
    list-style: none;
    scroll-margin-top: 7rem;
}

.epi-formular__etappen li {
    position: relative;
    margin: 0;
    padding-top: 0.75rem;
    color: var(--color-secondary);
    font-size: 0.9375rem;
    line-height: var(--line-height-ui);
    transition: color var(--formular-uebergang);
}

.epi-formular__etappen li::before,
.epi-formular__etappen li::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--color-secondary-20);
}

.epi-formular__etappen li::after {
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--formular-aufbau);
}

.epi-formular__etappen :is(.ist-erledigt, [aria-current])::after {
    transform: none;
}

.epi-formular__etappen [aria-current] {
    color: var(--color-text);
    font-weight: 700;
}

@media (forced-colors: active) {
    .epi-formular__etappen :is(.ist-erledigt, [aria-current])::after {
        background: CanvasText;
    }
}

/* Der Pfeil im Weiter-Knopf wie beim Absenden. */
.epi-formular .epi-formular__weiter {
    display: inline-flex;
    gap: 0.75rem;
    min-height: 53px;
    padding: 0.75rem 1.75rem;
}

.epi-formular .epi-formular__weiter::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    transition: transform var(--formular-uebergang);
}

.epi-formular .epi-formular__weiter:is(:hover, :focus-visible)::after {
    transform: translateX(4px);
}

/* Leiste unten im Schritt: Zurueck links als Textknopf, der Hauptknopf
   (Weiter, im letzten Schritt Absenden) rechts an der Innenkante, auch
   wenn es kein Zurueck gibt. Die Reihenfolge im Markup ist die sichtbare.
   Passt beides nicht in eine Zeile, steht Zurueck oben links und der
   Hauptknopf darunter rechts; so bleibt die Tab-Folge die sichtbare. */
.epi-formular__schritt .epi-formular__aktionen {
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.epi-formular .epi-formular__schritt :is(.epi-formular__weiter, .epi-formular__senden) {
    width: auto;
    margin-inline-start: auto;
}

.epi-formular .epi-formular__zurueck {
    display: inline-flex;
    gap: 0.5rem;
    width: auto;
    min-height: var(--touch-min);
    padding: 0.5rem 0.25rem;
    border: 0;
    background: none;
    color: var(--color-secondary);
    font-size: 1rem;
    font-weight: 600;
    transition: color var(--formular-uebergang);
}

.epi-formular .epi-formular__zurueck::before {
    content: "\f060";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.875em;
    transition: transform var(--formular-uebergang);
}

/* Zeigen: Grau wird Tuerkis, der Pfeil rueckt nach links; keine Linie. */
.epi-formular .epi-formular__zurueck:is(:hover, :active, :focus-visible) {
    background: none;
    color: var(--color-accent-dark-wcag);
    box-shadow: none;
}

.epi-formular .epi-formular__zurueck:is(:hover, :focus-visible)::before {
    transform: translateX(-3px);
}

.epi-formular .epi-formular__zurueck:focus-visible {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

/* Schmal: Hauptknopf etwas enger, damit beide in eine Zeile passen. */
@container (max-width: 29.99rem) {
    .epi-formular .epi-formular__schritt :is(.epi-formular__weiter, .epi-formular__senden) {
        padding-inline: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------
   Erfolg: der Bogen ist angekreuzt. Kaestchen mit Feder-Haken, der sich
   von links schreibt, daneben die Meldung.
   --------------------------------------------------------------------------- */

.epi-formular__erfolg {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    padding-block: 1rem;
}

.epi-formular__erfolg::before,
.epi-formular__erfolg::after {
    content: "";
    grid-area: 1 / 1;
    width: 3.5rem;
    height: 3.5rem;
}

.epi-formular__erfolg::before {
    box-sizing: border-box;
    border: 2px solid var(--color-accent-dark-wcag);
    border-radius: 2px;
}

.epi-formular__erfolg::after {
    background: var(--color-accent-dark-wcag);
    -webkit-mask: var(--formular-haken) center / 74% no-repeat;
    mask: var(--formular-haken) center / 74% no-repeat;
    animation: epi-formular-haken 520ms var(--motion-entrance-easing) 200ms both;
}

.epi-formular__erfolg p {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: var(--line-height-heading);
}

/* ---------------------------------------------------------------------------
   Bewegung
   --------------------------------------------------------------------------- */

@keyframes epi-formular-auftritt {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes epi-formular-fehler {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes epi-formular-lesen {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes epi-formular-haken {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.epi-formular__zusammenfassung,
.epi-formular__erfolg {
    animation: epi-formular-auftritt var(--motion-entrance-duration) var(--motion-entrance-easing);
}

.epi-formular .ist-fehlerhaft .epi-formular__fehler {
    animation: epi-formular-fehler var(--motion-entrance-duration) var(--motion-entrance-easing);
}

/* Eingeblendetes bedingtes Feld (formular.js), nur nach einer Auswahl. */
.epi-formular .ist-eingeblendet {
    animation: epi-formular-auftritt var(--motion-entrance-duration) var(--motion-entrance-easing);
}

@media (prefers-reduced-motion: reduce) {

    .epi-formular .ist-eingeblendet,
    .epi-formular__zusammenfassung,
    .epi-formular__erfolg,
    .epi-formular__erfolg::after,
    .epi-formular .ist-fehlerhaft .epi-formular__fehler,
    .epi-formular--blatt .epi-formular__form:has(.epi-formular__senden[aria-disabled="true"])::after {
        animation: none;
    }

    /* Im Knopf steht die Spur dann still. */
    .epi-formular:not(.epi-formular--blatt) .epi-formular__senden[aria-disabled="true"]::before {
        animation: none;
        clip-path: none;
    }

    /* Unterstreichung erscheint sofort statt sich aufzubauen. */
    .epi-formular :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
        transition: background-color var(--formular-uebergang), border-color var(--formular-uebergang);
    }

    .epi-formular :is(.epi-formular__senden, .epi-formular__weiter)::after,
    .epi-formular .epi-formular__zurueck::before,
    .epi-formular__etappen li::after {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Falle fuer Bots: fuer Menschen und Screenreader unsichtbar, im DOM vorhanden
   --------------------------------------------------------------------------- */

.epi-formular__falle {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.epi-formular .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}