/* ===========================================================================
   Terminseite Berlin — Stylesheet

   Aufbau
     1. Farb- und Groessen-Token (OKLCH)
     2. Registrierte Eigenschaften und Seitenuebergaenge
     3. Grundlagen
     4. Layout
     5. Effektebene (Aurora, Raster, Fortschritt)
     6. Bausteine
     7. Scroll-gesteuerte Animationen
     8. Ruecksichtnahme und Druck

   Grundsatz: alles laeuft lokal. Keine Schriftdatei, kein CDN, keine
   Bibliothek. Die Bewegungseffekte sind nativer CSS-Stand 2026
   (animation-timeline, @property, @view-transition, :has(), color-mix) und
   brauchen kein JavaScript — die Seite ist ohne JS vollstaendig nutzbar und
   sieht ohne JS genauso aus.

   Farben in OKLCH: gleiche Helligkeitszahl heisst gleiche wahrgenommene
   Helligkeit. Das macht die Kontrastpruefung nach WCAG AA berechenbar und
   den hellen wie den dunklen Modus gleichwertig — nicht einen davon als
   Nachgedanken.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Token — dunkel ist der Standard
   --------------------------------------------------------------------------- */

:root {
    color-scheme: dark light;

    /* Flaechen */
    --grund:          oklch(0.165 0.014 255);
    --grund-tief:     oklch(0.135 0.014 255);
    --flaeche:        oklch(0.215 0.016 255);
    --flaeche-hoch:   oklch(0.255 0.018 255);

    /* Schrift */
    --tinte:          oklch(0.975 0.004 255);
    --tinte-leise:    oklch(0.780 0.014 255);
    --tinte-still:    oklch(0.640 0.016 255);

    /* Akzente — bewusst Teal und Violett. Kein Rot. */
    --akzent:         oklch(0.800 0.135 190);
    --akzent-tief:    oklch(0.680 0.120 190);
    --akzent-2:       oklch(0.740 0.150 292);
    --signal:         oklch(0.790 0.170 150);

    /* Kanten */
    --rand:           oklch(0.310 0.018 255);
    --rand-hell:      oklch(0.400 0.022 255);

    /* Knopf */
    --knopf-grund:    oklch(0.845 0.135 190);
    --knopf-tinte:    oklch(0.180 0.030 220);
    --knopf-glanz:    oklch(0.960 0.070 190);

    /* Warnung und Fehler — gedaempft, nie Signalrot */
    --fehler:         oklch(0.760 0.130  30);
    --fehler-grund:   oklch(0.300 0.060  30);
    --hinweis:        oklch(0.840 0.130  85);
    --hinweis-grund:  oklch(0.300 0.055  85);

    /* Masse */
    --radius:      18px;
    --radius-s:    12px;
    --radius-xs:    8px;
    --breite:    1080px;
    --breite-s:   660px;

    --schatten:   0 1px 2px oklch(0 0 0 / .3), 0 12px 40px oklch(0 0 0 / .35);
    --schatten-s: 0 1px 2px oklch(0 0 0 / .25), 0 4px 14px oklch(0 0 0 / .22);

    --schrift: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;

    --tempo: 260ms;
    --kurve: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: light) {
    :root {
        --grund:          oklch(0.985 0.004 255);
        --grund-tief:     oklch(0.960 0.006 255);
        --flaeche:        oklch(1     0     0);
        --flaeche-hoch:   oklch(0.975 0.005 255);

        --tinte:          oklch(0.215 0.020 255);
        --tinte-leise:    oklch(0.455 0.020 255);
        --tinte-still:    oklch(0.545 0.018 255);

        --akzent:         oklch(0.505 0.110 195);
        --akzent-tief:    oklch(0.430 0.100 195);
        --akzent-2:       oklch(0.500 0.160 292);
        --signal:         oklch(0.560 0.140 150);

        --rand:           oklch(0.905 0.008 255);
        --rand-hell:      oklch(0.845 0.012 255);

        --knopf-grund:    oklch(0.455 0.105 195);
        --knopf-tinte:    oklch(0.995 0.005 195);
        --knopf-glanz:    oklch(0.620 0.110 195);

        --fehler:         oklch(0.480 0.140  30);
        --fehler-grund:   oklch(0.960 0.030  30);
        --hinweis:        oklch(0.450 0.100  75);
        --hinweis-grund:  oklch(0.965 0.045  85);

        --schatten:   0 1px 2px oklch(0.2 0.02 255 / .06), 0 14px 40px oklch(0.2 0.02 255 / .09);
        --schatten-s: 0 1px 2px oklch(0.2 0.02 255 / .05), 0 4px 14px oklch(0.2 0.02 255 / .07);
    }
}

/* ---------------------------------------------------------------------------
   2. Registrierte Eigenschaften und Seitenuebergaenge
   --------------------------------------------------------------------------- */

/* Ohne @property waere ein Winkel nur ein Text und nicht animierbar. Damit
   laesst sich der rotierende Rand der Ausweiskarte ohne JavaScript bewegen. */
@property --winkel {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --leuchtkraft {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

/* Weiche Uebergaenge zwischen den Seiten. Rein nativ, kein Router noetig.
   Browser ohne Unterstuetzung wechseln einfach hart — nichts geht kaputt. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: ueberblende-raus 180ms var(--kurve) both;
}
::view-transition-new(root) {
    animation: ueberblende-rein 320ms var(--kurve) both;
}
@keyframes ueberblende-raus {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes ueberblende-rein {
    from { opacity: 0; transform: translateY(10px); }
}

/* ---------------------------------------------------------------------------
   3. Grundlagen
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Damit Sprungziele nicht unter dem Fortschrittsbalken kleben. */
    scroll-padding-top: 2rem;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
    overflow-x: hidden;
}

h1, h2, h3 {
    margin: 0 0 .6em;
    line-height: 1.15;
    font-weight: 660;
    letter-spacing: -.022em;
    /* Verhindert einzelne Woerter in der letzten Zeile. */
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7.5vw, 3.6rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.15rem); }
h3 { font-size: 1.1rem; letter-spacing: -.014em; }

p  { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--akzent);
    text-decoration-color: color-mix(in oklch, var(--akzent) 40%, transparent);
    text-underline-offset: 3px;
    transition: color var(--tempo) var(--kurve),
                text-decoration-color var(--tempo) var(--kurve);
}
a:hover {
    color: var(--tinte);
    text-decoration-color: currentColor;
}

img { max-width: 100%; height: auto; }

::selection {
    background: color-mix(in oklch, var(--akzent) 30%, transparent);
    color: var(--tinte);
}

:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 3px;
    border-radius: 4px;
}

.klein { font-size: .875rem; color: var(--tinte-leise); }

/* Sprungmarke — sichtbar, sobald sie den Fokus bekommt. */
.sprungmarke {
    position: fixed;
    top: .5rem;
    left: -100vw;
    z-index: 90;
    padding: .7rem 1.2rem;
    background: var(--akzent);
    color: var(--knopf-tinte);
    font-weight: 620;
    text-decoration: none;
    border-radius: var(--radius-xs);
}
.sprungmarke:focus { left: .5rem; color: var(--knopf-tinte); }

/* ---------------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------------- */

.huelle {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1.35rem;
}
.huelle-schmal { max-width: var(--breite-s); }

main > section,
main > article { padding: clamp(3rem, 9vw, 5.5rem) 0; position: relative; }

/* Haarlinie zwischen den Abschnitten statt harter Farbwechsel. */
main > section + section::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklch, var(--rand) 90%, transparent) 22%,
        color-mix(in oklch, var(--rand) 90%, transparent) 78%,
        transparent);
}

/* ---------------------------------------------------------------------------
   5. Effektebene
   --------------------------------------------------------------------------- */

/* Lesefortschritt am oberen Rand. Vollstaendig scrollgesteuert — kein
   Scroll-Listener, kein Ruckeln, laeuft im Compositor. */
.fortschritt {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 80;
    background: linear-gradient(90deg, var(--akzent), var(--akzent-2));
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
}

/* Kopfbereich: Aurora-Verlauf plus feines Punktraster mit Vignette. */
.einstieg {
    position: relative;
    isolation: isolate;
    padding-top: clamp(3.5rem, 12vw, 7rem);
    overflow: hidden;
}

.einstieg::before {
    content: '';
    position: absolute;
    inset: -35% -20% auto -20%;
    height: 150%;
    z-index: -2;
    background:
        radial-gradient(42% 38% at 18% 22%, color-mix(in oklch, var(--akzent)   22%, transparent), transparent 70%),
        radial-gradient(38% 34% at 82% 12%, color-mix(in oklch, var(--akzent-2) 20%, transparent), transparent 70%),
        radial-gradient(46% 40% at 52% 78%, color-mix(in oklch, var(--akzent)   14%, transparent), transparent 72%);
    filter: blur(18px);
    animation: aurora 22s ease-in-out infinite alternate;
}

@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}

.einstieg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
        circle at 1px 1px,
        color-mix(in oklch, var(--tinte) 16%, transparent) 1px,
        transparent 0);
    background-size: 26px 26px;
    /* Vignette: das Raster verliert sich zu den Raendern hin. */
    -webkit-mask-image: radial-gradient(78% 68% at 50% 34%, #000 35%, transparent 100%);
            mask-image: radial-gradient(78% 68% at 50% 34%, #000 35%, transparent 100%);
    opacity: .55;
}

/* Verfuegbarkeits-Plakette mit ruhig pulsierendem Punkt. */
.plakette {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .85rem .38rem .7rem;
    margin-bottom: 1.35rem;
    font-size: .8rem;
    font-weight: 560;
    letter-spacing: .01em;
    color: var(--tinte-leise);
    background: color-mix(in oklch, var(--flaeche) 70%, transparent);
    border: 1px solid var(--rand);
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.plakette b { color: var(--tinte); font-weight: 620; }

.punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--signal) 60%, transparent);
    animation: pulsieren 2.6s ease-out infinite;
    flex: none;
}
@keyframes pulsieren {
    0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--signal) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in oklch, var(--signal)  0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in oklch, var(--signal)  0%, transparent); }
}

.ueberzeile {
    margin: 0 0 .55rem;
    font-size: .78rem;
    font-weight: 660;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--akzent);
}

.fuehrung {
    font-size: clamp(1.02rem, 2.4vw, 1.16rem);
    color: var(--tinte-leise);
    max-width: 62ch;
}
.fuehrung strong { color: var(--tinte); font-weight: 620; }

/* Farbverlauf im Text — nur auf einem einzelnen Wort, sonst wird es unruhig. */
.hervor {
    background: linear-gradient(100deg, var(--akzent), var(--akzent-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* ---------------------------------------------------------------------------
   6. Bausteine
   --------------------------------------------------------------------------- */

/* --- Knopf ---------------------------------------------------------------- */

.knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .92rem 1.7rem;
    min-height: 52px;
    font: inherit;
    font-weight: 630;
    letter-spacing: -.005em;
    color: var(--knopf-tinte);
    background: var(--knopf-grund);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--tempo) var(--kurve),
                box-shadow var(--tempo) var(--kurve),
                filter var(--tempo) var(--kurve);
    box-shadow: 0 1px 0 color-mix(in oklch, #fff 22%, transparent) inset,
                0 8px 24px color-mix(in oklch, var(--akzent) 26%, transparent);
}
.knopf:hover {
    color: var(--knopf-tinte);
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 1px 0 color-mix(in oklch, #fff 26%, transparent) inset,
                0 12px 30px color-mix(in oklch, var(--akzent) 34%, transparent);
}
.knopf:active { transform: translateY(0); }

/* Glanzstreifen, der einmal alle paar Sekunden durchlaeuft. */
.knopf::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg,
        transparent 38%,
        color-mix(in oklch, var(--knopf-glanz) 55%, transparent) 48%,
        transparent 58%);
    background-size: 260% 100%;
    background-position: 160% 0;
    animation: glanz 4.5s ease-in-out infinite;
}
@keyframes glanz {
    0%, 62% { background-position: 160% 0; }
    92%,100% { background-position: -60% 0; }
}

.knopf-gross { width: 100%; font-size: 1.05rem; padding: 1.05rem 1.7rem; min-height: 56px; }

/* Knopfzeile im Kopfbereich: untereinander am Handy, nebeneinander ab Tablet. */
.einstieg-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}
.einstieg-knoepfe .knopf { flex: 1 1 100%; }

.datenhinweis { margin-top: 1rem; }

/* Zweitrangiger Knopf: nur Kontur. */
.knopf-still {
    background: transparent;
    color: var(--tinte);
    border-color: var(--rand-hell);
    box-shadow: none;
}
.knopf-still::after { content: none; }
.knopf-still:hover {
    color: var(--tinte);
    background: var(--flaeche);
    border-color: var(--akzent);
    filter: none;
}

/* --- Ausweiskarte: der Vertrauensanker der Seite -------------------------- */

.ausweis-karte {
    position: relative;
    display: grid;
    gap: 1.6rem;
    padding: clamp(1.4rem, 4vw, 2.1rem);
    border-radius: var(--radius);
    background: color-mix(in oklch, var(--flaeche) 78%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--schatten);
    isolation: isolate;
}

/* Rotierender Verlaufsrand. Bewusst nur an dieser einen Stelle — die Karte
   traegt die Legitimation und darf als Einzige Aufmerksamkeit ziehen. */
.ausweis-karte::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--winkel),
        transparent 30%,
        var(--akzent) 45%,
        var(--akzent-2) 55%,
        transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: rand-drehen 8s linear infinite;
}
@keyframes rand-drehen { to { --winkel: 360deg; } }

/* Ruhiger Grundrand, damit die Karte auch zwischen den Lichtblitzen steht. */
.ausweis-karte::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    border: 1px solid var(--rand);
}

.portraet {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 20px;
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    box-shadow: var(--schatten-s);
}

.ausweis-daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1.25rem;
    margin: 1.15rem 0;
    padding: 1rem 1.15rem;
    background: color-mix(in oklch, var(--grund-tief) 60%, transparent);
    border: 1px solid var(--rand);
    border-radius: var(--radius-s);
}
.ausweis-daten dt {
    font-size: .74rem;
    font-weight: 620;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinte-still);
    align-self: center;
}
.ausweis-daten dd { margin: 0; font-weight: 620; }
.ausweis-daten .nummer {
    font-family: var(--schrift-zahl);
    font-size: .95rem;
    letter-spacing: .06em;
    color: var(--akzent);
}

/* --- Leistungskarten mit Lichtkegel unter dem Zeiger ---------------------- */

.karten {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.karte {
    --zx: 50%;
    --zy: 50%;
    container-type: inline-size;
    position: relative;
    padding: 1.5rem 1.4rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--tempo) var(--kurve),
                transform var(--tempo) var(--kurve);
}
.karte:hover {
    border-color: var(--rand-hell);
    transform: translateY(-3px);
}

/* Der Lichtkegel folgt dem Zeiger. Die Koordinaten setzt formular.js per
   CSSOM — reine Verbesserung, ohne JavaScript bleibt die Karte einfach ruhig. */
.karte::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(320px circle at var(--zx) var(--zy),
        color-mix(in oklch, var(--akzent) 14%, transparent),
        transparent 62%);
    opacity: 0;
    transition: opacity var(--tempo) var(--kurve);
}
.karte:hover::before { opacity: 1; }

.karte-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: .9rem;
    font-family: var(--schrift-zahl);
    font-size: .82rem;
    font-weight: 600;
    color: var(--akzent);
    background: color-mix(in oklch, var(--akzent) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--akzent) 30%, transparent);
    border-radius: 10px;
}

.karte h3 { margin-bottom: .4rem; }
.karte p  { color: var(--tinte-leise); margin: 0; font-size: .95rem; }

/* Ab genug Breite in der Karte selbst — nicht im Fenster — mehr Luft. */
@container (min-width: 320px) {
    .karte { padding: 1.75rem 1.65rem; }
}

.hinweis-preise {
    display: flex;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: color-mix(in oklch, var(--flaeche) 60%, transparent);
    border: 1px solid var(--rand);
    border-left: 2px solid var(--akzent);
    border-radius: var(--radius-s);
    color: var(--tinte-leise);
    font-size: .9rem;
}

/* --- Ablauf: Schritte mit fliessender Verbindung -------------------------- */

.schritte {
    display: grid;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.schritte li {
    counter-increment: schritt;
    position: relative;
    padding-left: 3.4rem;
}

.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    font-family: var(--schrift-zahl);
    font-size: .9rem;
    font-weight: 600;
    color: var(--knopf-tinte);
    background: linear-gradient(140deg, var(--akzent), var(--akzent-2));
    border-radius: 12px;
    box-shadow: 0 6px 18px color-mix(in oklch, var(--akzent) 26%, transparent);
}

/* Gestrichelte Verbindung zwischen den Schritten, die langsam wandert. */
.schritte li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: 2.5rem;
    bottom: -1.75rem;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--rand-hell) 0 5px,
        transparent 5px 11px);
    animation: fliessen 1.4s linear infinite;
}
@keyframes fliessen { to { background-position-y: 11px; } }

.schritte h3 { margin-bottom: .25rem; }
.schritte p  { color: var(--tinte-leise); margin: 0; font-size: .95rem; }

/* --- Formular ------------------------------------------------------------- */

.formularbereich { position: relative; }

.formular-karte {
    padding: clamp(1.4rem, 4.5vw, 2.35rem);
    background: color-mix(in oklch, var(--flaeche) 82%, transparent);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--schatten);
}

.formular { margin-top: 1.6rem; }

.feld { margin-bottom: 1.15rem; }
.feld label {
    display: block;
    margin-bottom: .4rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--tinte);
}

input[type="text"], input[type="tel"], input[type="email"],
select, textarea {
    width: 100%;
    min-height: 50px;
    padding: .78rem .95rem;
    /* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt. */
    font: inherit;
    font-size: 16px;
    color: var(--tinte);
    background: var(--grund-tief);
    border: 1px solid var(--rand-hell);
    border-radius: var(--radius-s);
    transition: border-color var(--tempo) var(--kurve),
                box-shadow var(--tempo) var(--kurve),
                background var(--tempo) var(--kurve);
}
textarea { min-height: 118px; resize: vertical; line-height: 1.6; }

input::placeholder, textarea::placeholder { color: var(--tinte-still); }

input:hover, select:hover, textarea:hover { border-color: var(--tinte-still); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--akzent);
    background: var(--flaeche);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--akzent) 18%, transparent);
}

/* Ausgefuellte Felder bekommen eine ruhige Bestaetigung. */
input:not(:placeholder-shown):valid,
textarea:not(:placeholder-shown):valid {
    border-color: color-mix(in oklch, var(--signal) 45%, var(--rand-hell));
}

input[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--fehler);
}

select {
    appearance: none;
    /* Pfeil als eingebettetes SVG — kein Icon-Font, keine externe Datei. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.6rem;
}

.feldgruppe {
    margin: 0 0 1.15rem;
    padding: 1.25rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius-s);
    background: color-mix(in oklch, var(--grund-tief) 45%, transparent);
    transition: border-color var(--tempo) var(--kurve);
}
/* :has() — die Gruppe reagiert darauf, dass eines ihrer Felder Fokus hat. */
.feldgruppe:has(:focus-visible) { border-color: color-mix(in oklch, var(--akzent) 55%, var(--rand)); }
.feldgruppe legend {
    padding: 0 .5rem;
    font-size: .92rem;
    font-weight: 640;
}
.feldgruppe .feld:last-child { margin-bottom: 0; }

.feld-paar { display: grid; gap: 0; }

.pflicht { color: var(--akzent); font-weight: 700; }

/* Einwilligung — grosse Trefferflaeche, deutliche Bestaetigung beim Setzen. */
.einwilligung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    padding: 1.15rem;
    margin-bottom: 1.35rem;
    background: color-mix(in oklch, var(--grund-tief) 55%, transparent);
    border: 1px solid var(--rand);
    border-radius: var(--radius-s);
    transition: border-color var(--tempo) var(--kurve),
                background var(--tempo) var(--kurve);
}
.einwilligung:has(input:checked) {
    border-color: color-mix(in oklch, var(--signal) 55%, var(--rand));
    background: color-mix(in oklch, var(--signal) 8%, transparent);
}
.einwilligung input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 1px 0 0;
    accent-color: var(--akzent);
    cursor: pointer;
    flex: none;
}
.einwilligung label {
    margin: 0;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--tinte-leise);
    cursor: pointer;
}
.einwilligung .feldfehler { grid-column: 1 / -1; }

/* Solange die Einwilligung fehlt, tritt der Absendeknopf zurueck. Er bleibt
   bedienbar — der Server entscheidet, nicht das CSS. Es ist nur ein Hinweis. */
.formular:has(#einwilligung:not(:checked)) .knopf-gross {
    filter: saturate(.45) brightness(.9);
    box-shadow: none;
}
.formular:has(#einwilligung:not(:checked)) .knopf-gross::after { animation: none; }

.feldfehler {
    margin: .45rem 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--fehler);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Bewusst nicht display:none — manche Bots ueberspringen das. */
.koeder {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Meldungen ------------------------------------------------------------ */

.meldung {
    padding: .95rem 1.15rem;
    margin-bottom: 1.35rem;
    border-radius: var(--radius-s);
    border: 1px solid;
    font-size: .93rem;
}
.meldung-fehler {
    color: var(--fehler);
    background: color-mix(in oklch, var(--fehler-grund) 55%, transparent);
    border-color: color-mix(in oklch, var(--fehler) 40%, transparent);
    font-weight: 600;
}
.meldung-hinweis {
    color: var(--hinweis);
    background: color-mix(in oklch, var(--hinweis-grund) 55%, transparent);
    border-color: color-mix(in oklch, var(--hinweis) 35%, transparent);
}

.hinweiskasten {
    padding: 1.25rem 1.35rem;
    margin: 1.6rem 0;
    background: color-mix(in oklch, var(--flaeche) 65%, transparent);
    border: 1px solid var(--rand);
    border-radius: var(--radius-s);
}
.hinweiskasten h2 { font-size: 1.02rem; margin-bottom: .6rem; }
.hinweiskasten ul { margin: 0; padding-left: 1.15rem; color: var(--tinte-leise); }
.hinweiskasten li { margin-bottom: .4rem; }

/* --- Bestaetigungsseite --------------------------------------------------- */

.bestaetigung { position: relative; isolation: isolate; }
.bestaetigung::before {
    content: '';
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 120%;
    z-index: -1;
    background: radial-gradient(45% 40% at 50% 18%,
        color-mix(in oklch, var(--signal) 18%, transparent), transparent 70%);
    filter: blur(16px);
}

.haken {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1.35rem;
    font-size: 1.5rem;
    color: var(--knopf-tinte);
    background: linear-gradient(140deg, var(--signal), var(--akzent));
    border-radius: 18px;
    box-shadow: 0 10px 30px color-mix(in oklch, var(--signal) 30%, transparent);
    animation: haken-auf 620ms var(--kurve) both;
}
@keyframes haken-auf {
    from { opacity: 0; transform: scale(.72) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- Rechtstexte ---------------------------------------------------------- */

.rechtstext h2 {
    margin-top: 2.4rem;
    font-size: 1.24rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--rand);
}
.rechtstext h3 { margin-top: 1.7rem; color: var(--tinte-leise); }
.rechtstext p, .rechtstext li { color: var(--tinte-leise); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .45rem; }
.rechtstext code {
    font-family: var(--schrift-zahl);
    font-size: .88em;
    padding: .1em .4em;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 5px;
    color: var(--tinte);
}

/* --- Footer --------------------------------------------------------------- */

.fuss {
    padding: 2.75rem 0 2.25rem;
    background: var(--grund-tief);
    border-top: 1px solid var(--rand);
    color: var(--tinte-leise);
    font-size: .92rem;
}

/* Der Unabhaengigkeitshinweis ist kein Kleingedrucktes — er bekommt Gewicht. */
.fuss-hinweis {
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.5rem;
    background: color-mix(in oklch, var(--flaeche) 55%, transparent);
    border: 1px solid var(--rand);
    border-left: 2px solid var(--akzent);
    border-radius: var(--radius-s);
    line-height: 1.65;
}
.fuss-hinweis strong {
    display: block;
    margin-bottom: .3rem;
    color: var(--tinte);
    font-weight: 640;
}

.fuss-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: .85rem;
}
.fuss-links a { color: var(--tinte); font-weight: 560; }
.fuss-zeile { margin: 0; color: var(--tinte-still); font-size: .85rem; }

/* ---------------------------------------------------------------------------
   7. Scroll-gesteuerte Animationen

   animation-timeline koppelt den Ablauf an die Scrollposition statt an die
   Uhr. Das laeuft im Compositor, braucht keinen Scroll-Listener und keinen
   IntersectionObserver. Alles steht in @supports: wo der Browser es nicht
   kann, ist der Inhalt schlicht sofort da.
   --------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    .aufblenden {
        animation: aufblenden linear both;
        animation-timeline: view(block);
        animation-range: entry 8% cover 26%;
    }
    @keyframes aufblenden {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Karten laufen leicht versetzt ein — der Versatz kommt aus dem
       eigenen Sichtbarkeitsfenster, nicht aus animation-delay. */
    .karten > li:nth-child(2) { animation-range: entry 12% cover 32%; }
    .karten > li:nth-child(3) { animation-range: entry 16% cover 38%; }

    .fortschritt {
        animation: fortschritt linear;
        animation-timeline: scroll(root block);
    }
    @keyframes fortschritt { to { transform: scaleX(1); } }

    /* Der Kopfbereich zieht sich beim Wegscrollen leicht zurueck. */
    .einstieg-inhalt {
        animation: zuruecktreten linear both;
        animation-timeline: view(block);
        animation-range: exit 0% exit 90%;
    }
    @keyframes zuruecktreten {
        to { opacity: .25; transform: translateY(-16px) scale(.985); }
    }
}

/* Ohne Unterstuetzung bleibt der Balken unsichtbar, statt als Strich zu stehen. */
@supports not (animation-timeline: scroll(root)) {
    .fortschritt { display: none; }
}

/* ---------------------------------------------------------------------------
   8. Groessere Ansicht
   --------------------------------------------------------------------------- */

@media (min-width: 640px) {
    body { font-size: 18px; }
    .knopf-gross { width: auto; min-width: 290px; }
    .einstieg-knoepfe .knopf { flex: 0 0 auto; }
    .feld-paar { grid-template-columns: 1fr 1.6fr; gap: 1rem; }
    .ausweis-karte { grid-template-columns: 128px 1fr; align-items: start; gap: 2rem; }
    .portraet { width: 128px; height: 128px; }
}

@media (min-width: 920px) {
    .karten   { grid-template-columns: repeat(3, 1fr); }
    .schritte { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    /* Waagerecht laufen die Verbindungen zwischen den Schritten. */
    .schritte li:not(:last-child)::after {
        left: 2.9rem;
        right: -1.5rem;
        top: 1.05rem;
        bottom: auto;
        width: auto;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            var(--rand-hell) 0 5px,
            transparent 5px 11px);
        animation-name: fliessen-quer;
    }
    @keyframes fliessen-quer { to { background-position-x: 11px; } }
    .ausweis-karte { grid-template-columns: 160px 1fr; }
    .portraet { width: 160px; height: 160px; }
}

/* ---------------------------------------------------------------------------
   9. Ruecksichtnahme und Druck
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    /* Scrollgesteuerte Verlaeufe abschalten, sonst bliebe der Inhalt
       auf dem Anfangsbild stehen. */
    .aufblenden, .einstieg-inhalt { animation: none !important; opacity: 1 !important; transform: none !important; }
    .fortschritt { display: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

@media (prefers-contrast: more) {
    :root { --rand: var(--tinte-still); --tinte-leise: var(--tinte); }
}

@media print {
    .sprungmarke, .fortschritt, .knopf, .formularbereich { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .einstieg::before, .einstieg::after { display: none; }
    a { color: #000; }
}