/* vend-one Startseite. Statisch, ohne Bibliothek, ohne Fremdressourcen.
   Eine Stimmung: warmes Papier, tiefe Tinte, ein Rosa (FARBEN.md). Die App-Welt
   bleibt dunkel, damit die echten Bildschirme darin aufgehen. */

/* ------------------------------------------------------------ Schrift
   Archivo (SIL Open Font License, Lizenz in schrift/OFL.txt), selbst gehostet
   seit 21.09.2026. Variable Schrift, Breite auf 100 festgelegt, Gewicht 100 bis
   900, Latein-Teilmenge (35 KB; Kursive ASCII plus deutsche Zeichen, 28 KB). Die
   Seiten laden die aufrechte Datei mit rel=preload vor; die Kursive braucht nur
   die Startseite (zwei Wörter) und lädt ohne preload, wenn das Stilblatt sie sieht.
   "Archivo Ersatz" ist Arial mit angepassten Maßen: Solange die Schrift lädt,
   steht der Text in derselben Breite, und nichts springt beim Wechsel. */
@font-face { font-family: "Archivo"; src: url("schrift/Archivo-2.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("schrift/Archivo-Italic-2.woff2") format("woff2"); font-weight: 700 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo Ersatz"; src: local("Arial"); font-weight: 100 500; size-adjust: 99%; ascent-override: 88.7%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Ersatz"; src: local("Arial Bold"); font-weight: 600 900; size-adjust: 100%; ascent-override: 87.8%; descent-override: 21%; line-gap-override: 0%; }
/* Gemessen in Chromium (pruefung/schrift-mass.js): Archivo 400 ist 99,1 % so breit wie Arial,
   Archivo 600/800 liegen bei 96 bis 103 % von Arial Bold. Zeilenhöhe "normal" von Archivo: 1,088. */

/* ------------------------------------------------------------- Rollen */
:root {
  color-scheme: light dark;

  --schrift: "Archivo", "Archivo Ersatz", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --papier: #FFF7EC;
  --papier-tief: #FBEEDC;
  --flaeche: #FFFDF8;
  --rand: #EADCC8;
  --feld-rand: #8A7F6F;                 /* Kante von Eingabefeldern: 3,86:1 auf Fläche, 3,70:1 auf Papier (WCAG 1.4.11) */
  --tinte: #0E1621;
  --tinte-2: #4B5566;
  /* Marke: Rosa #FA52C1. Rampe in OKLCH (Farbton 344°), Chroma läuft zu Weiß und Schwarz hin aus.
     Regeln und Kontraste: FARBEN.md. Nur Rollen verwenden, nie eine Stufe direkt im Layout. */
  --rosa-50: #FFF3F9; --rosa-100: #FFE2F1; --rosa-200: #FFC3E5; --rosa-300: #FF9BD7; --rosa-400: #FF70CB;
  --rosa-500: #FA52C1; --rosa-600: #D52AA1; --rosa-700: #B60887; --rosa-800: #8D0068; --rosa-900: #620047;
  --glut: #FF6462;                      /* Partner (Farbton +40°), nur in Verläufen, nie allein */
  --akzent: var(--rosa-500);            /* Flächen und Knöpfe; Text darauf ist Tinte (6,1:1) */
  --akzent-text: var(--tinte);
  --akzent-tief: var(--rosa-700);       /* Text, Links, Fokus, Cursor auf Papier (5,9:1); Weiß darauf 6,2:1 */
  --akzent-gross: var(--rosa-600);      /* Akzentwörter und Zahlen ab 24 px auf Papier (4,2:1) */
  --akzent-hell: var(--rosa-100);       /* Tönung: Flächen, Meldungen, Markierung */
  --akzent-rand: var(--rosa-200);       /* Auswahl, Ränder in getönten Flächen */
  --akzent-hover: var(--rosa-400);      /* Akzentfläche unter dem Zeiger (Weiter-Knopf der Anleitung), in beiden Fassungen */
  --verlauf-marke: linear-gradient(135deg, var(--rosa-500) 0%, var(--glut) 100%);
  --verlauf-flaeche: linear-gradient(160deg, var(--rosa-100) 0%, var(--pfirsich) 100%);
  --verlauf-bild: linear-gradient(160deg, var(--rosa-300) 0%, var(--pfirsich-tief) 100%);
  --verlauf-glanz: radial-gradient(closest-side, rgb(250 82 193 / 0.55), transparent 70%), radial-gradient(closest-side at 30% 30%, var(--pfirsich-tief), transparent 72%);
  --pfirsich: #FFE3C9;
  --pfirsich-tief: #FFD0A8;

  --app-grund: #0E1621;
  --app-rand: #26323F;
  --app-text: #E8EDF3;
  --app-text-2: #93A2B4;
  --app-akzent: var(--rosa-400);        /* in der dunklen App-Welt: 7,3:1 auf Navy (Rolle in FARBEN.md, derzeit ohne Nutzung) */

  --kachel-tinte: #0E1621;              /* die dunkle Kachel im Nutzen-Band */
  --rahmen: #0A1017;                    /* Telefonrahmen um die echten Bildschirme */
  --rahmen-kante: rgb(255 255 255 / 0.08);
  --auf-akzent-tief: #FFFFFF;           /* Schrift auf Stufe 700 (6,2:1) */
  --fehler: #B93A3A;                    /* Fehlertext, 5,3:1 auf Papier */
  --fehler-rand: #D64545;
  --fehler-flaeche: #FBE3E3;
  --fehler-flaeche-text: #6E2222;
  --schein: rgb(250 82 193 / 0.30);     /* der rosa Schein hinter dem festen Telefon */
  --story-kante: transparent;           /* Kante der Story-Insel: im Hellen traegt der Farbunterschied (Navy auf Papier) */
  --untertitel: rgb(11 18 27 / 0.85);

  --schatten: 0 30px 60px -28px rgb(60 40 10 / 0.45), 0 10px 22px -12px rgb(60 40 10 / 0.25);
  --schatten-klein: 0 10px 30px -18px rgb(60 40 10 / 0.35);

  --radius-karte: 28px;
  --radius-feld: 14px;
  --breite: 1240px;                     /* Kasten samt 20 px Rand; Inhalt = --spalte */
  --spalte: 1200px;                     /* EINE linke Kante (Craft P2-1): jeder Abschnitt fuehrt seinen Inhalt auf 1200 px */

  /* Schrift-Leiter (Craft P1-6, 04.10.2026). Text: 13 / 15 / 17 / Lead. Display: die H1 bleibt die groesste
     Rolle (clamp(2.2rem, 1rem + 5.3vw, 4.9rem), ab 900 px eigener Clamp); h2 30,4 / 56 px, Story-Schritt
     28 / 44,8 px, Kennzahl 36 / 64 px (bei 375 / 1440 px). Preis-Betrag und Laufband bleiben, wie sie sind. */
  --t-fein: 0.8125rem;                  /* 13 px */
  --t-klein: 0.9375rem;                 /* 15 px */
  --t-text: 1.0625rem;                  /* 17 px */
  --t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-h1: clamp(2.2rem, 1rem + 5.3vw, 4.9rem);     /* unveraendert; ab 900 px und unter 350 px eigene Clamps (unten) */
  --t-h2: clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
  --t-h3-display: clamp(1.75rem, 1rem + 2.3vw, 2.8rem);
  --t-zahl: min(clamp(2.25rem, 1.2rem + 3.6vw, 4rem), var(--t-h1));   /* nie groesser als die H1 (bei 375 px 35,9 statt 36) */

  /* Abstaende (Craft P2-2): 4-px-Raster, Abschnittsraender ueber --raum-oben/--raum-unten (375: 74,8 / 56 px,
     1440: 120 / 88 px). Geheftete Buehnen (svh-Hoehen, Problem 86/60) laufen bewusst NICHT ueber die Tokens. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
  --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --raum-oben: clamp(72px, 3.5rem + 5vw, 120px);
  --raum-unten: clamp(56px, 2.5rem + 3.5vw, 88px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ----------------------------------------------------- Die Dunkelfassung
   EINE WELT, ZWEI LICHTER (19.09.2026, Swen: „alles soll mit dark und hell
   ausgestattet sein sowie der knopf").

   Hell ist warmes Papier, dunkel ist das Navy der App -- dieselben Werte, die
   `cashapp-app/src/stil.js` traegt. Damit sind Seite und App im Dunkeln
   dieselbe Welt und nicht zwei.

   NUR ROLLEN WECHSELN, KEINE REGEL. Jede Regel unten im Blatt liest eine
   Rolle; hier bekommen die Rollen andere Werte. Was dabei NICHT einfach
   kippen kann, steht mit Grund dabei:

   * Die App-Welt (`--app-*`) war im Hellen der dunkle Block, der sich abhob.
     Im Dunkeln muss sie HELLER werden als die Seite, sonst verschwindet sie.
     Die Hoehe dreht sich um, die Rolle bleibt.
   * Akzentschrift nimmt im Dunkeln Stufe 400 statt 700 (7,3:1 auf Navy);
     Stufe 700 waere dort 2,2:1.
   * Der Telefonrahmen war fast schwarz -- auf Navy unsichtbar. Er wird zur
     Randfarbe und bekommt eine hellere Kante.
   * Schatten tragen auf Dunkel nichts; die Karte traegt ihr Rand.

   Reihenfolge: erst das Geraet (`prefers-color-scheme`), dann die Wahl
   (`data-thema`). Wer ausdruecklich hell gewaehlt hat, bleibt hell, auch wenn
   das Geraet dunkel steht -- deshalb das `:not([data-thema="hell"])`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --papier: #0E1621;
    --papier-tief: #131E2A;
    --flaeche: #16202C;
    --rand: #26323F;
    --feld-rand: #66768A;
    --tinte: #E8EDF3;
    --tinte-2: #93A2B4;
    --akzent-text: #0E1621;
    --akzent-tief: var(--rosa-400);
    --akzent-gross: var(--rosa-400);
    --akzent-hell: #2A1329;
    --akzent-rand: #4A2043;
    --auf-akzent-tief: #0E1621;
    --pfirsich: #361D2C;                 /* E8: Pflaume aus der Rosa-Rampe, oklch(0.27 0.045 344) statt Braun */
    --pfirsich-tief: #3F2334;            /* oklch(0.30 0.05 344) */
    --verlauf-flaeche: linear-gradient(160deg, #1C1424 0%, #2F1A26 100%);   /* zweiter Halt oklch(0.25 0.04 344) */
    --verlauf-bild: linear-gradient(160deg, #3A1030 0%, #3F2334 100%);
    --app-grund: #16202C;
    --app-rand: #33404F;
    --kachel-tinte: #1E2936;
    --rahmen: #26323F;
    --rahmen-kante: rgb(255 255 255 / 0.16);
    --fehler: #FF8A8A;
    --fehler-rand: #FF6B6B;
    --fehler-flaeche: #3A1A1A;
    --fehler-flaeche-text: #FFD7D7;
    --schein: rgb(250 82 193 / 0.22);
    --story-kante: #3D4B5C;
    --schatten: 0 30px 60px -28px rgb(0 0 0 / 0.70), 0 10px 22px -12px rgb(0 0 0 / 0.55);
    --schatten-klein: 0 10px 30px -18px rgb(0 0 0 / 0.55);
  }
}
:root[data-thema="dunkel"] {
  --papier: #0E1621;
  --papier-tief: #131E2A;
  --flaeche: #16202C;
  --rand: #26323F;
  --feld-rand: #66768A;
  --tinte: #E8EDF3;
  --tinte-2: #93A2B4;
  --akzent-text: #0E1621;
  --akzent-tief: var(--rosa-400);
  --akzent-gross: var(--rosa-400);
  --akzent-hell: #2A1329;
  --akzent-rand: #4A2043;
  --auf-akzent-tief: #0E1621;
  --pfirsich: #361D2C;                 /* E8: Pflaume aus der Rosa-Rampe, oklch(0.27 0.045 344) statt Braun */
  --pfirsich-tief: #3F2334;            /* oklch(0.30 0.05 344) */
  --verlauf-flaeche: linear-gradient(160deg, #1C1424 0%, #2F1A26 100%);   /* zweiter Halt oklch(0.25 0.04 344) */
  --verlauf-bild: linear-gradient(160deg, #3A1030 0%, #3F2334 100%);
  --app-grund: #16202C;
  --app-rand: #33404F;
  --kachel-tinte: #1E2936;
  --rahmen: #26323F;
  --rahmen-kante: rgb(255 255 255 / 0.16);
  --fehler: #FF8A8A;
  --fehler-rand: #FF6B6B;
  --fehler-flaeche: #3A1A1A;
  --fehler-flaeche-text: #FFD7D7;
  --schein: rgb(250 82 193 / 0.22);
  --story-kante: #3D4B5C;
  --schatten: 0 30px 60px -28px rgb(0 0 0 / 0.70), 0 10px 22px -12px rgb(0 0 0 / 0.55);
  --schatten-klein: 0 10px 30px -18px rgb(0 0 0 / 0.55);
}
/* Die Wahl am Schalter gilt auch fuer das, was der Browser selbst zeichnet:
   Radios, Kaestchen, Aufklapplisten, Schieberegler, Rollbalken. Ohne diese
   beiden Zeilen folgten sie dem Geraet, nicht der Wahl (20.09.2026). */
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }

/* ------------------------------------------------ Der Schalter im Kopf
   Dieselbe Geste wie in der App: ein Zeichen oben rechts, das zeigt, WOHIN
   es geht. Kein Menue, keine Unterseite. */
.thema-schalter {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; padding: 0;
  color: var(--tinte-2); font-size: 1.15rem; line-height: 1;
  cursor: pointer; border-radius: 999px;
  transition: color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.thema-schalter:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .thema-schalter:hover { color: var(--tinte); background: var(--papier-tief); } }
.thema-schalter svg { display: block; }
.thema-schalter svg[hidden] { display: none; }
.thema-schalter:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }
/* Welches Zeichen darin steht, setzt thema.js -- es kennt die Wahl und das
   Geraet; CSS kennt nur das Geraet. */

/* ------------------------------------------------------------- Grund */
*, *::before, *::after { box-sizing: border-box; }
/* KEIN scroll-behavior: smooth MEHR AM DOKUMENT (20.09.2026): Chromium machte
   daraus bei jedem Sprungverweis eine Fahrt von 1,5 s, auch per Tastatur.
   Sanft faehrt nur noch ein Zeigerklick auf kurze Strecken (seite.js). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 82px; }
/* scroll-padding-top: Sprungziele und Tastaturfokus landen unter dem klebenden Kopf (66 px + Rand) mit 16 px Luft,
   nicht darunter (Craft P1-1, 04.10.2026). Die view()-Zeitachsen tragen deshalb ausdruecklich Einzug 0
   (sonst rechnet `auto` den Abstand mit ein und die Szenen verschoeben sich gegenueber dem Ersatz). */
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-text);
  line-height: 1.55;
  overflow-x: clip;
  caret-color: var(--akzent-tief);
}
/* P3-9 (Auftrag F, 04.10.2026): helle Schrift auf Navy ist laut APCA-W3 0.1.9 schwaecher als dunkle auf Papier
   (Fliesstext Lc −94,83 gegen +100,64). Das Gewicht gleicht genau so viel aus, dass der Fliesstext (17 px) im Dunkeln
   denselben Abstand zur APCA-Schrifttabelle hat wie im Hellen: 464 statt 400 (gerechnet in pruefung/apca-test.js).
   Laufweite und Zeilenhoehe nennt APCA nicht; sie bleiben. Hell bleibt unveraendert. */
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) body { font-weight: 464; } }
:root[data-thema="dunkel"] body { font-weight: 464; }
::selection { background: var(--akzent-rand); color: var(--tinte); }
/* SEITLICH KLIPPEN AM HAUPTINHALT, NICHT NUR AM BODY (19.09.2026, Swen: „auf dem iPhone verschiebbar,
   letzte Karte abgeschnitten"). iOS Safari weitet den Layout-Viewport, sobald ein Element seitlich
   hinausragt -- die driftenden Telefone, die einfliegenden Bildrahmen. Dann lässt sich die Seite
   schieben, und 100vw wird breiter als der Bildschirm. `clip` statt `hidden`, weil hidden einen
   Scrollcontainer erzeugt und jede Heftung (sticky) darin bricht. Ohne clip-Unterstützung (iOS ≤ 15)
   bleibt hidden als Notnagel: dann heften die Bühnen nicht, aber die Seite steht. */
main { overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: var(--t-h2); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
/* Satz (Craft P1-3): Fliesstext ohne Einzelwort-Schlusszeilen, Ueberschriften bleiben ausgeglichen. Kein hyphens: auto
   (gemessen: mehr Waisen, Trennungen wie „rensdokumentation?"). Browser ohne pretty (Firefox) ignorieren es folgenlos. */
p, li, summary, .zahl > span, .bereich-kacheln a > span, .stufen li > span { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; border-radius: 6px; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--akzent-tief); color: var(--auf-akzent-tief); padding: 8px 12px; z-index: 100; }
.sprung:focus { left: 8px; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- Knopf */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  border-radius: 999px;
  background: var(--verlauf-marke); color: var(--akzent-text);
  font-weight: 700; font-size: var(--t-text); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.knopf-leise { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf-klein { min-height: 44px; padding: 0 18px; font-size: var(--t-klein); }
.knopf[disabled] { opacity: 0.5; cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { box-shadow: 0 14px 30px -14px var(--akzent-gross); transform: translateY(-1px); }
  .knopf-leise:hover { background: var(--tinte); color: var(--papier); box-shadow: none; }
}
/* Der Druck steht HINTER dem Hover: gleiche Spezifitaet, spaeter im Blatt, sonst
   ueberschreibt translateY(-1px) den scale(0.97) und die Maus sieht nie einen Druck. */
.knopf:active, .knopf:hover:active { transform: scale(0.97); }
.knopf[aria-busy="true"] { pointer-events: none; }

/* ------------------------------------------------- Fortschritt und Kopf */
.fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--verlauf-marke); transform: scaleX(0); transform-origin: 0 50%; z-index: 30; }


.kopf {
  /* KOPF ALS MATERIAL (Auftrag B, 04.10.2026): bei 86 % Deckkraft und 8 bis 14 px Unschaerfe schienen die grossen
     Versalien beim Scrollen als Geisterschrift durch (gemessen: pruefung/kopf-material.js). Jetzt 92 % und eine
     staerkere Unschaerfe mit Saettigung: der Inhalt darunter bleibt als Farbe ahnbar, aber nicht mehr als Form. */
  --kopf-grund: var(--papier);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--kopf-grund) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.kopf.gescrollt { border-bottom-color: var(--rand); }
@media (max-width: 899px) { .kopf { backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } }
/* Ohne Unschaerfe (Browser ohne backdrop-filter) waere 8 % Durchsicht Geisterschrift: dann deckt der Kopf ganz. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kopf { background: var(--kopf-grund); } }
/* UEBER DER DUNKLEN STORY nimmt der Kopf die dunkle Fassung an (Klasse kopf-dunkel, gesetzt von seite.js per
   IntersectionObserver, nie je Bild). Vorher lag im Hellen ein heller Balken auf Navy. Nur die Kopfzeile selbst
   wechselt die Rollen (Werte = Dunkelfassung oben); das Menue darunter bleibt in der Fassung der Seite. */
.kopf.kopf-dunkel { --kopf-grund: #0E1621; }
.kopf.kopf-dunkel.gescrollt { border-bottom-color: #26323F; }
.kopf.kopf-dunkel .kopf-innen {
  color-scheme: dark;
  --papier: #0E1621; --papier-tief: #131E2A; --rand: #26323F; --tinte: #E8EDF3; --tinte-2: #93A2B4;
  --akzent-tief: var(--rosa-400); --akzent-gross: var(--rosa-400); --auf-akzent-tief: #0E1621;
  color: var(--tinte);
}
.kopf-innen { max-width: var(--breite); margin: 0 auto; height: 66px; padding: 0 20px; display: flex; align-items: center; gap: 28px; min-width: 0; }
/* WORTMARKE ALS BILD (Auftrag H, 04.10.2026): Standbild der Flüssigmetall-Optik (Metall nur auf dem rosa Teil,
   Rosa #FA52C1, dunkler Teil #090E16, im Dunkeln #E8EDF3). Als CSS-Hintergrund, damit genau ein Bild lädt: die Fassung
   (hell, dunkel, über der Story) und die Dichte (1x/2x/3x, AVIF vor WebP) wählt der Browser. Unter 760 px 105 x 26,
   darüber 129 x 32 (bei 375 px passt die Kopfzeile so wie mit der Textmarke). Schimmer bei Zeiger, Tipp oder Fokus:
   marke/marke.js + marke/liquid-logo.js. Erzeugt von design-04-10-2026/h-werkstatt/einbau_assets.py. */
:root {
  --marke-s-hell: image-set(url("/marke/kopf-s-hell-1x.webp") type("image/webp") 1x, url("/marke/kopf-s-hell-2x.avif") type("image/avif") 2x, url("/marke/kopf-s-hell-2x.webp") type("image/webp") 2x, url("/marke/kopf-s-hell-3x.webp") type("image/webp") 3x);
  --marke-s-dunkel: image-set(url("/marke/kopf-s-dunkel-1x.avif") type("image/avif") 1x, url("/marke/kopf-s-dunkel-1x.webp") type("image/webp") 1x, url("/marke/kopf-s-dunkel-2x.avif") type("image/avif") 2x, url("/marke/kopf-s-dunkel-2x.webp") type("image/webp") 2x, url("/marke/kopf-s-dunkel-3x.avif") type("image/avif") 3x, url("/marke/kopf-s-dunkel-3x.webp") type("image/webp") 3x);
  --marke-l-hell: image-set(url("/marke/kopf-l-hell-1x.avif") type("image/avif") 1x, url("/marke/kopf-l-hell-1x.webp") type("image/webp") 1x, url("/marke/kopf-l-hell-2x.avif") type("image/avif") 2x, url("/marke/kopf-l-hell-2x.webp") type("image/webp") 2x, url("/marke/kopf-l-hell-3x.avif") type("image/avif") 3x, url("/marke/kopf-l-hell-3x.webp") type("image/webp") 3x);
  --marke-l-dunkel: image-set(url("/marke/kopf-l-dunkel-1x.avif") type("image/avif") 1x, url("/marke/kopf-l-dunkel-1x.webp") type("image/webp") 1x, url("/marke/kopf-l-dunkel-2x.avif") type("image/avif") 2x, url("/marke/kopf-l-dunkel-2x.webp") type("image/webp") 2x, url("/marke/kopf-l-dunkel-3x.avif") type("image/avif") 3x, url("/marke/kopf-l-dunkel-3x.webp") type("image/webp") 3x);
  --marke-fassung: hell; --marke-s: var(--marke-s-hell); --marke-l: var(--marke-l-hell);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --marke-fassung: dunkel; --marke-s: var(--marke-s-dunkel); --marke-l: var(--marke-l-dunkel); }
}
:root[data-thema="dunkel"], .kopf.kopf-dunkel .kopf-innen { --marke-fassung: dunkel; --marke-s: var(--marke-s-dunkel); --marke-l: var(--marke-l-dunkel); }
.wortmarke { position: relative; display: inline-flex; align-items: center; min-height: 44px;   /* Tippziel 44 px (Craft P3-12) */
  width: 105px; flex: 0 1 auto; min-width: 0;                     /* darf bei sehr schmalen Telefonen schrumpfen (P3-13) */
  color: var(--tinte); text-decoration: none;
  background: url("/marke/kopf-s-hell-2x.webp") left center / contain no-repeat;   /* Rückfall ohne image-set(type()) */
  background-image: var(--marke-s); }
@media (min-width: 760px) { .wortmarke { width: 129px; background-image: var(--marke-l); } }
.wortmarke:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; border-radius: 4px; }
/* Schimmer-Schicht (nur während des Schimmers im DOM): flache Marke + Metall-Leinwand mit soft-light */
.kopf-schimmer { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1543 / 383; transform: translateY(-50%);
  isolation: isolate; pointer-events: none; }
.kopf-schimmer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.metall-leinwand { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
  mix-blend-mode: soft-light; pointer-events: none; }
/* Der Shader lässt ausserhalb der Form eine Restdeckung von 1/255 stehen: die Rosa-Maske schneidet sie weg. */
.kopf-schimmer .metall-leinwand { -webkit-mask: url("/marke/rosa-maske-wortmarke.svg") 0 0 / 100% 100% no-repeat;
  mask: url("/marke/rosa-maske-wortmarke.svg") 0 0 / 100% 100% no-repeat; }
/* Hohe Kontraste des Systems zeigen keine Hintergrundbilder: dann steht die Marke als Text. */
@media (forced-colors: active) {
  .wortmarke { background: none; width: auto; font-weight: 800; font-size: 1.3rem; }
  .wortmarke .versteckt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.kopf-nav { display: none; gap: 26px; margin-left: auto; }
.kopf-nav a { text-decoration: none; color: var(--tinte-2); font-weight: 600; font-size: var(--t-klein); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .kopf-nav a:hover { color: var(--tinte); } }
/* Der Zugang steht rechts neben dem Knopf: auf dem Telefon als einziger Textverweis, am Schreibtisch hinter der Navigation. */
.kopf-zugang { margin-left: auto; text-decoration: none; color: var(--tinte-2); font-weight: 600; font-size: var(--t-klein); white-space: nowrap; transition: color 150ms ease; }
.kopf-zugang[aria-current="page"] { color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .kopf-zugang:hover { color: var(--tinte); } }
.kopf .knopf-klein { margin-left: 0; min-width: 0; }
/* UNTER 760 px TRAEGT DAS MENUE. Wortmarke, Textverweis, Schalter, Knopf und
   Burger nebeneinander sind bei 375 px 17 px zu breit -- und der Kopf liegt
   AUSSERHALB von `main`, wird also nicht geklippt: die ganze Seite wurde damit
   wieder verschiebbar. „Anmelden" steht im Menue, der Knopf wird schmaler. */
@media (max-width: 759px) {
  .kopf-innen { gap: 10px; }
  .kopf-zugang { display: none; }
  .kopf .knopf-klein { min-height: 44px; padding: 0 14px; font-size: 0.9rem; margin-left: auto; }
  .thema-schalter { margin-right: 0; }
}
@media (min-width: 760px) { .kopf-nav { display: flex; } .kopf-zugang { margin-left: 0; } }

/* ------------------------------------------------------- Menü am Telefon
   DIE ANLEITUNG STAND NUR IM FUSS (19.09.2026, Swen: „ganz unten versteckt …
   sie sollte wie bei der Desktop-Variante oben im Menü sein").

   Unter 760 px war die Navigation schlicht ausgeblendet -- am Schreibtisch
   fünf Punkte, auf dem Telefon keiner. Statt sie in die Kopfzeile zu quetschen
   (Wortmarke, Schalter, Knopf und fünf Links passen bei 375 px nicht
   nebeneinander), traegt ein Menü sie: dieselben Punkte, gross genug zum
   Tippen, mit der Ziffer als Ordnung statt als Aufzählungspunkt. */
/* FLEX MIT FESTEM ABSTAND, NICHT GRID. Im Raster verteilen sich die drei
   Striche ueber die ganze Knopfhoehe (44 px), ihre Mitten liegen dann 15 px
   auseinander -- das Kreuz ging nicht auf und sah aus wie ein Pfeil. Im
   Flexkasten sitzen sie als Block in der Mitte, Mitte zu Mitte genau 7 px. */
.menue-knopf { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.menue-knopf:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }
/* Druckgefuehl wie am Schalter (Bewegung C6): 120 ms, scale 0,95. */
.menue-knopf { transition: transform 120ms var(--ease-out); }
.menue-knopf:active { transform: scale(0.95); }
.menue-knopf span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--tinte); transition: transform 260ms var(--ease-out), opacity 160ms ease; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Ein Abdunkler hinter dem Menue: er sagt, dass die Seite gerade wartet, und
   faengt den Tipp daneben ab, ohne dass dafuer ein unsichtbarer Kasten noetig ist. */
.menue-schatten { position: fixed; inset: 66px 0 0; z-index: 18; background: rgb(8 12 18 / 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html.js .menue-schatten[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .menue-schatten { animation: schatten-auf 200ms ease both; }
  @keyframes schatten-auf { from { opacity: 0; } to { opacity: 1; } }
}
@media (min-width: 760px) { .menue-schatten { display: none !important; } }

.menue {
  position: fixed; left: 0; right: 0; top: 66px; z-index: 19;
  background: var(--papier);
  border-bottom: 1px solid var(--rand);
  box-shadow: var(--schatten);
  padding: 8px 20px 22px;
  max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain;
  transform-origin: 50% 0;
}
html.js .menue[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .menue { animation: menue-auf 260ms var(--ease-out) both; }
  @keyframes menue-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}
.menue-liste { list-style: none; margin: 0; padding: 0; }
.menue-liste li { border-bottom: 1px solid var(--rand); }
.menue-liste a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 17px 2px; text-decoration: none; color: var(--tinte);
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.025em;
}
/* Menueziffern 01 bis 04 gestrichen (Auftrag D, E16): die Liste hat vier Punkte, die Ziffer ordnete nichts. */
.menue-liste a:active { color: var(--akzent-tief); }
.menue-fuss { display: grid; gap: 10px; margin-top: 20px; }
.menue-fuss .knopf { width: 100%; }
.menue-zugang { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; text-decoration: none; color: var(--tinte); font-weight: 700; border: 1px solid var(--tinte); border-radius: 999px; }
@media (min-width: 760px) { .menue-knopf, .menue { display: none !important; } }

/* --------------------------------------------------------------- Held */
.held {
  max-width: var(--breite); margin: 0 auto; padding: 36px 20px 0;
  display: grid; gap: 20px; align-items: center; position: relative;
}
.held-titel {
  /* Seit Archivo (21.09.2026) um 9 % kleiner: die Schrift ist bei 900 so viel breiter als der
     Systemstapel, und die vier Zeilen müssen einzeilig bleiben (pruefung/hero-breiten.js). */
  font-size: var(--t-h1);
  text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.92; font-weight: 900;
  word-spacing: 0.08em;   /* Versalien mit enger Laufweite: Wortluecke 0,084 -> rund 0,16 em bei 375 px (Craft P1-2) */
}
/* „Automat sagt.“ ist die längste Zeile: 9,04 em in Archivo 900. Bei 320 px bleiben 280 px,
   also höchstens 31 px Schrift. */
@media (max-width: 349px) { :root { --t-h1: clamp(1.8rem, 0.6rem + 5.9vw, 2.2rem); } }
.held-titel .zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.held-titel .zeile-innen { display: block; }
.held-titel .zeile-leise { color: var(--tinte-2); }
.held-titel em { font-style: italic; color: var(--akzent-gross); font-weight: 900; padding-right: 0.08em; }
.held-satz { max-width: 34ch; font-size: var(--t-lead); color: var(--tinte-2); margin-top: 26px; line-height: 1.45; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 480px) { .held-knoepfe .knopf { flex: 1 1 100%; } }

.held-bilder { position: relative; height: 560px; }
.glanz {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%);
  pointer-events: none;
}
/* EIN SCHREIBER JE EIGENSCHAFT (04.10.2026): der Auftritt beim Laden blendet den Schein selbst ein
   (::before, opacity und transform), das Wachsen und Verblassen beim Scrollen faehrt das Element
   (scale und opacity, Szenen am Scrollweg). Vorher lagen beide auf demselben transform/opacity, und am
   Telefon lief der Auftritt deshalb nie. */
.glanz::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; filter: blur(60px); opacity: 0.9;
  background: var(--verlauf-glanz);
}
.telefon {
  margin: 0; width: 240px;
  background: var(--rahmen); border-radius: 42px; padding: 9px;
  box-shadow: var(--schatten), inset 0 0 0 1px var(--rahmen-kante);
}
.telefon img { border-radius: 34px; width: 100%; height: auto; }
.schwebe { position: absolute; }
.schwebe-a { left: 50%; top: 0; z-index: 3; }
.schwebe-b { left: calc(50% - 250px); top: 120px; z-index: 2; }
.schwebe-c { left: calc(50% + 70px); top: 70px; z-index: 1; }
.telefon-a { width: 250px; transform: translateX(-50%); }
.telefon-b { width: 200px; transform: rotate(-8deg); }
.telefon-c { width: 200px; transform: rotate(7deg); }

@media (min-width: 900px) {
  /* Zwischen 900 und 1200 px brachen „Automat sagt." und „Was im Beutel" in ihrer
     Maske um (Vierzeiler wurde Sechszeiler). Flacher wachsen, ab 1437 px wie zuvor 5,6 rem. */
  :root { --t-h1: clamp(3rem, 0.2rem + 5.2vw, 4.9rem); }
  .held { grid-template-columns: 7fr 5fr; padding-top: 48px; min-height: calc(100svh - 66px); gap: 40px; }
  .held-bilder { height: 720px; }
  .glanz { width: 640px; height: 640px; }
  .schwebe-a { top: 40px; }
  /* 40 px weiter rechts als bis 20.09.2026: davor deckte Telefon b ab 1280 px den Punkt hinter „sagt."; am 04.10.2026
     noch einmal 24 px (Craft P3-10): bei 1440 px blieben 3 px, bei 1920 px 0,4 px Luft, und der Wortabstand der Versalien
     macht die Zeile 6 px breiter (pruefung/held-mass.js). */
  .schwebe-b { top: 190px; left: calc(50% - 241px); }
  /* Zwischen 900 und 1023 px ist die Bildspalte so schmal, dass b noch bis in den Satz reicht: dort weiter rechts. */
  @media (max-width: 1023px) { .schwebe-b { left: calc(50% - 201px); } }
  /* Telefon c ragte unter 1440 px ueber den rechten Fensterrand (1280: 74 px, 1366: 31 px). Seine rechte Kante
     (gedreht 262 px rechts von `left`) bleibt jetzt 16 px vor dem Fenster: Spalte plus Seitenrand minus 278 px. */
  .schwebe-c { top: 100px; left: min(calc(50% + 95px), calc(100% + max(40px, (100vw - var(--spalte)) / 2) - 278px)); }
  /* Niedrige Fenster (1280 x 720, 1366 x 768): die Telefongruppe ist 720 px hoch und lief unten aus dem Fenster.
     Sie wird als Ganzes kleiner (scale um die obere Mitte; Positionen und Drift bleiben im Verhaeltnis). */
  .held-bilder { scale: var(--held-mass, 1); transform-origin: 50% 0; }
  @media (max-height: 820px) { .held-bilder { --held-mass: 0.9; } }
  @media (max-height: 760px) { .held-bilder { --held-mass: 0.8; } }
  @media (max-height: 700px) { .held-bilder { --held-mass: 0.72; } }
  .telefon-a { width: 285px; }
  .telefon-b, .telefon-c { width: 232px; }
}
@media (max-width: 899px) {
  .held-bilder { height: 540px; }
  .schwebe-b { left: calc(50% - 205px); top: 150px; }
  .schwebe-c { left: calc(50% + 40px); top: 90px; }
  .telefon-a { width: 230px; }
  .telefon-b, .telefon-c { width: 170px; }
  .glanz { width: 440px; height: 440px; }
}
@media (max-width: 420px) {
  /* Die Gruppe muss ins Fenster passen: bei 375 px lief b links und c rechts hinaus (19.09.2026). */
  .held-bilder { height: 460px; }
  .schwebe-b { left: calc(50% - 165px); top: 130px; }
  .schwebe-c { left: calc(50% + 40px); top: 80px; }
  .telefon-a { width: 190px; }
  .telefon-b, .telefon-c { width: 130px; }
  .glanz { width: 380px; height: 380px; }
}

/* Einflug beim Laden: Zeilen steigen aus der Maske, Telefone kommen aus drei Richtungen.
   Gestrafft am 04.10.2026 (Plan 7): Ende nach 980 statt 1540 ms, kleinere Drehungen, ruhiger fuer ein Pruefprodukt. */
@keyframes zeile-auf { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes einflug-a { from { opacity: 0; transform: translateX(-50%) translateY(48px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes einflug-b { from { opacity: 0; transform: translate(-72px, 48px) rotate(-14deg); } to { opacity: 1; transform: translate(0, 0) rotate(-8deg); } }
@keyframes einflug-c { from { opacity: 0; transform: translate(72px, 48px) rotate(13deg); } to { opacity: 1; transform: translate(0, 0) rotate(7deg); } }
@keyframes glanz-auf { from { opacity: 0; transform: scale(0.7); } to { opacity: 0.9; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .held-titel .zeile-innen { animation: zeile-auf 700ms var(--ease-out) both; }
  .held-titel .zeile:nth-child(2) .zeile-innen { animation-delay: 60ms; }
  .held-titel .zeile:nth-child(3) .zeile-innen { animation-delay: 120ms; }
  .held-titel .zeile:nth-child(4) .zeile-innen { animation-delay: 180ms; }
  .held-satz { animation: einblenden 480ms var(--ease-out) both; animation-delay: 180ms; }
  .held-knoepfe { animation: einblenden 480ms var(--ease-out) both; animation-delay: 240ms; }
  .glanz::before { animation: glanz-auf 700ms var(--ease-out) both; }
  .telefon-a { animation: einflug-a 700ms var(--ease-out) both; animation-delay: 120ms; }
  .telefon-b { animation: einflug-b 700ms var(--ease-out) both; animation-delay: 200ms; }
  .telefon-c { animation: einflug-c 700ms var(--ease-out) both; animation-delay: 280ms; }
}

/* ------------------------------------------------------------ Laufband */
/* overflow: clip, nicht hidden: hidden macht das Band zum Scrollcontainer, und die view()-Zeitachse
   des Schubs (unten) misst dann am Band statt am Fenster -- nichts bewegt sich (gemessen 21.09.2026). */
.laufband { overflow: clip; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 18px 0; margin-top: 30px; background: var(--flaeche); }
/* Anhalten: ein Tipp oder Klick auf das Band haelt es an (Klasse steht), und fuer
   die Tastatur ein Knopf, der nur sichtbar wird, wenn er den Fokus hat -- wie der
   Sprungverweis. Das Band selbst bleibt aria-hidden (20.09.2026, WCAG 2.2.2). */
.laufband-pause { position: absolute; left: -999px; z-index: 31; margin-top: 8px; background: var(--akzent-tief); color: var(--auf-akzent-tief); border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.laufband-pause:focus { left: 8px; }
.laufband.steht .laufband-spur { animation-play-state: paused !important; }
.laufband-spur { display: flex; gap: 0; width: max-content; }
.laufband-spur span {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1;
  padding: 0 0.5em; white-space: nowrap;
}
.laufband-spur .kontur { color: transparent; -webkit-text-stroke: 2px var(--tinte); }
/* Drei Kopien in der Spur: eine Schleife ist genau ein Drittel. Bis 21.09.2026 stand hier -50 %,
   also anderthalb Kopien -- alle 26 s sprang das Band um zwei Wörter. */
@keyframes lauf { to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: lauf 26s linear infinite; }
  /* Kein Anhalten beim Überfahren mit der Maus mehr (21.09.2026): Wer scrollt, hat den Zeiger irgendwo,
     und jedes Mal, wenn das Band unter ihm durchlief, hielt es an und lief wieder los -- das war das Stottern
     am Schreibtisch. Anhalten geht per Tipp/Klick und über den Tastaturknopf. */
}

/* ------------------------------------------------------------ Problem */
.problem { max-width: var(--breite); margin: 0 auto; padding: 120px 20px 100px; }
.problem-satz {
  font-size: clamp(1.9rem, 0.9rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
  max-width: 24ch; word-spacing: 0.08em; text-wrap: balance;   /* Aussage wie eine Ueberschrift (Craft P1-2, P1-3) */
}
/* Der Satz arbeitet wie die Hero-Zeilen: aus der Maske steigen, beim Scrollen in eigener Rate heben und ausblenden. */
.problem-satz .zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.problem-satz .zeile-innen { display: block; }
.problem-satz .zeile-leise { color: var(--tinte-2); }
.problem-satz em { font-style: italic; color: var(--akzent-gross); padding-right: 0.06em; }
html.js:not(.ruhig) .problem-satz:not(.auf) .zeile-innen { transform: translateY(110%); }
html.js:not(.ruhig) .problem-satz.auf .zeile-innen { animation: zeile-auf 900ms var(--ease-out) both; }
html.js:not(.ruhig) .problem-satz.auf .zeile:nth-child(2) .zeile-innen { animation-delay: 60ms; }
html.js:not(.ruhig) .problem-satz.auf .zeile:nth-child(3) .zeile-innen { animation-delay: 120ms; }
html.js:not(.ruhig) .problem-satz.auf .zeile:nth-child(4) .zeile-innen { animation-delay: 180ms; }
.problem-huelle { position: relative; }
/* Geheftet auf jeder Breite, sobald das Fenster hoch genug ist (19.09.2026, vorher nur ab 900 px):
   Satz und Antwort passen auch auf dem Telefon in eine Fensterhöhe. Unter 600 px Höhe (Querformat) bleibt der Fluss. */
@media (min-height: 600px) {
  html.js:not(.ruhig) .problem-huelle { height: 200svh; }
  html.js:not(.ruhig) .problem-huelle .problem { position: sticky; top: 0; min-height: 100svh; box-sizing: border-box; display: grid; align-content: center; padding-top: 86px; padding-bottom: 60px; }
  html.js:not(.ruhig) .story.deckt { margin-top: -100svh; }
}

.problem-rechts { margin-top: 36px; }
.problem-antwort { max-width: 58ch; color: var(--tinte-2); font-size: var(--t-lead); }
/* Die Quellen des frueheren Zahlenblocks (E5): verkleinert unter der Antwort, die 10 % stehen dort im Text. */
.problem-quelle { margin-top: var(--s-5); max-width: 62ch; color: var(--tinte-2); font-size: var(--t-fein); }
/* Niedrige Telefone (375 x 667): Satz, Antwort und Quellen muessen in die geheftete Fensterhoehe passen (gemessen 703 > 667). */
@media (max-width: 899px) and (max-height: 700px) {
  .problem-rechts { margin-top: var(--s-6); }
  .problem-quelle { margin-top: var(--s-3); }
  html.js:not(.ruhig) .problem-huelle .problem { padding-bottom: var(--s-6) !important; }
}
@media (min-width: 900px) {
  .problem { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: end; padding: 150px 20px 120px; }
  .problem-satz { max-width: none; }
  .problem-rechts { margin-top: 0; }
}

/* ---------------------------------------------------------------- Story
   Die App-Welt: dunkel, mit weichen oberen Ecken, gleitet beim Scrollen
   heran. Auf dem Schreibtisch bleibt ein Telefon stehen und wechselt sein
   Bild, während die drei Schritte vorbeiziehen. */
.story { background: var(--app-grund); color: var(--app-text); border-radius: 40px 40px 0 0; transform-origin: 50% 0;
  /* Im Dunkeln lag die Insel #16202C auf #0E1621 (1,11:1) und verschwand: eine Haarlinie oben (folgt dem Radius)
     und unten hebt sie ab, 2,04:1 auf Papier (FARBEN.md, --story-kante). Im Hellen transparent. */
  box-shadow: inset 0 1px 0 var(--story-kante), inset 0 -1px 0 var(--story-kante); }

.story-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); }
.story-titel { color: var(--app-text); margin-bottom: 30px; }
.story-raster { display: grid; gap: 0; }
.schritt { padding: 56px 0 64px; border-top: 1px solid var(--app-rand); display: grid; gap: 26px; justify-items: start; }
.schritt h3 { color: var(--app-text); font-size: var(--t-h3-display); text-transform: uppercase; letter-spacing: -0.04em; transition: color 300ms ease; }
.schritt p { color: var(--app-text-2); max-width: 44ch; font-size: var(--t-text); }
.telefon-mobil { justify-self: center; width: 250px; }
.story-buehne { display: none; }
@media (min-width: 900px) {
  .story-raster { grid-template-columns: 1fr 1fr; column-gap: 60px; }
  .schritt { min-height: 78vh; align-content: center; padding: 40px 0; }
  .schritt:first-child { border-top: 0; }
  .schritt h3 { color: var(--app-text-2); }
  .schritt.ist-aktiv h3 { color: var(--app-text); }
  .telefon-mobil { display: none; }
  .story-buehne { display: block; position: relative; }
  /* Rosa Schein hinter dem festen Telefon: heftet mit ihm, liegt darunter (früher im Fluss). */
  .story-buehne::before { content: ""; display: block; position: sticky; top: calc(50vh - 360px); width: 720px; height: 720px; margin: 0 auto -720px; border-radius: 50%; background: radial-gradient(closest-side, var(--schein), transparent 70%); pointer-events: none; }
  .telefon-fest { position: sticky; top: calc(50vh - 340px); width: 320px; margin: 0 auto; height: 692px; }
  .buehne-bild { position: absolute; inset: 9px; width: calc(100% - 18px); height: auto; opacity: 0; transform: scale(0.96); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
  .buehne-bild.ist-aktiv { opacity: 1; transform: none; }
}

/* Erscheinen beim Scrollen: Text und Karten. Nur mit JavaScript verborgen (ohne JS, fuer Crawler und
   im Druck steht alles da). Gestaffelt wird je Eintritts-Schub: seite.js setzt data-staffel 0..4, 60 ms
   je Stufe (04.10.2026, vorher fester Index bis 770 ms; Plan 3). */
@media (prefers-reduced-motion: no-preference) {
  html.js .zeig { opacity: 0; transform: translateY(16px); }
  html.js .zeig.sichtbar { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out), transform 700ms var(--ease-out); }
  html.js .zeig.sichtbar[data-staffel="1"] { transition-delay: 60ms; }
  html.js .zeig.sichtbar[data-staffel="2"] { transition-delay: 120ms; }
  html.js .zeig.sichtbar[data-staffel="3"] { transition-delay: 180ms; }
  html.js .zeig.sichtbar[data-staffel="4"] { transition-delay: 240ms; }
}

/* ------------------------------------------------- Seitenmodus fuer Bilder
   Echte Bildschirme hell oder dunkel nach der Fassung der Seite (Auftrag D): zwei Bilder, eines steht. Beide sind
   lazy: das verborgene laedt erst, wenn jemand die Fassung wechselt. */
.nur-dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .nur-hell { display: none !important; }
  :root:not([data-thema="hell"]) .nur-dunkel { display: block !important; }
}
:root[data-thema="dunkel"] .nur-hell { display: none !important; }
:root[data-thema="dunkel"] .nur-dunkel { display: block !important; }

/* ------------------------------------------------- Abgleich (Rechenschrift)
   DER SUMMENSTRICH (Auftrag D, Leitidee „Die Seite rechnet vor"): Soll, Gezaehlt, Strich, Differenz, gesetzt wie eine
   schriftliche Subtraktion. Archivo 900 mit gleich breiten Ziffern, rechtsbuendig. Rosa gehoert nur dem Ergebnis
   (Differenz, „stimmt."). Der Strich ist das ::before der Differenz-Zeile, damit die Liste gueltiges HTML bleibt. */
.abgleich { margin: 0; --betrag: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.abgleich-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s-4); padding: var(--s-1) 0; }
.abgleich dt { color: var(--tinte-2); font-size: var(--t-klein); font-weight: 600; }
.abgleich dd { margin: 0 0 0 auto; font-size: var(--betrag); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--tinte); }
.abgleich-differenz { position: relative; margin-top: var(--s-3); padding-top: var(--s-4); }
.abgleich-differenz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--tinte); transform-origin: 0 50%; }
.abgleich-differenz dd { color: var(--akzent-gross); }
.abgleich-gross { --betrag: min(clamp(1.9rem, 0.9rem + 4.4vw, 4.5rem), var(--t-h1)); }
.abgleich-gross dt { font-size: var(--t-text); }
.abgleich-beispiel { color: var(--tinte-2); font-size: var(--t-fein); margin-top: var(--s-3); }

/* ------------------------------------------------- Held B: Abgleichskarte
   E3: rechts neben der Ueberschrift steht der Abgleich im Fall „stimmt" (Beispiel Block 13). Fassung A (Telefone)
   bleibt im Code: data-held="telefone" an .held schaltet um. Ein Auftritt beim Laden, Ende nach 1160 ms. */
.held-karte { display: none; }
.held[data-held="beleg"] .schwebe { display: none; }
.held[data-held="beleg"] .held-bilder { height: auto; display: grid; place-items: center; padding: var(--s-6) 0 var(--s-8); }
.held[data-held="beleg"] .held-karte {
  display: block; position: relative; width: min(100%, 460px);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  padding: var(--s-7) var(--s-7) var(--s-6); box-shadow: var(--schatten);
}
.abgleich-urteil { margin-top: var(--s-4); text-align: right; font-size: var(--betrag-urteil, clamp(2.2rem, 1.4rem + 3vw, 3.6rem)); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.abgleich-urteil em { font-style: italic; color: var(--akzent-gross); padding-right: 0.06em; }
.held-karte .abgleich-beispiel { text-align: right; margin-top: var(--s-4); }
@media (min-width: 900px) {
  .held[data-held="beleg"] .held-bilder { min-height: 520px; padding: 0; }
}
@media (max-width: 420px) {
  .held[data-held="beleg"] .held-karte { padding: var(--s-6) var(--s-5) var(--s-5); }
}
@keyframes zeile-ein { from { opacity: 0; transform: translateY(10px); } }
@keyframes strich-ein { from { scale: 0 1; } }
@media (prefers-reduced-motion: no-preference) {
  .held-karte .abgleich-zeile:nth-child(1) { animation: zeile-ein 300ms var(--ease-out) both; animation-delay: 200ms; }
  .held-karte .abgleich-zeile:nth-child(2) { animation: zeile-ein 300ms var(--ease-out) both; animation-delay: 320ms; }
  .held-karte .abgleich-differenz::before { animation: strich-ein 300ms var(--ease-out) both; animation-delay: 480ms; }
  .held-karte .abgleich-differenz dt, .held-karte .abgleich-differenz dd { animation: zeile-ein 300ms var(--ease-out) both; animation-delay: 640ms; }
  .held-karte .abgleich-urteil { animation: zeile-ein 300ms var(--ease-out) both; animation-delay: 860ms; }
  .held-karte .abgleich-beispiel { animation: zeile-ein 300ms var(--ease-out) both; animation-delay: 860ms; }
}

/* ------------------------------------------------- Wenn es nicht stimmt.
   E4: die Rechnung nach der Story. Bewegung am Scrollweg unten („Szenen am Scrollweg", rechnung-*). */
.rechnung { overflow-x: clip; }
.rechnung-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); display: grid; gap: var(--s-9); align-items: center; }
.rechnung-block { margin-top: var(--s-8); max-width: 720px; }
.rechnung-grund { margin-top: var(--s-5); font-size: var(--t-lead); color: var(--tinte); max-width: 46ch; }
.rechnung-schluss { margin-top: var(--s-9); font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; max-width: 36ch; }
.rechnung-telefon { justify-self: center; width: 250px; }
.rechnung { --rueck: 30vw; }
@media (min-width: 900px) {
  .rechnung { --rueck: 12vw; }
  .rechnung-innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 60px; }
  .rechnung-telefon { width: 300px; }
}

/* ------------------------------------------------- Fuer Steuerberater und Pruefer (E13) */
.pruefer-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); display: grid; gap: var(--s-9); align-items: center; }
.pruefer-liste { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--rand); max-width: 56ch; }
.pruefer-liste li { padding: var(--s-4) 0; border-bottom: 1px solid var(--rand); font-size: var(--t-lead); color: var(--tinte); }
.pruefer-telefon { justify-self: center; width: 250px; }
@media (min-width: 900px) {
  .pruefer-innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 60px; }
  .pruefer-telefon { width: 285px; }
}

/* ------------------------------------------------------------ Rundgang
   KINOMOMENT (Auftrag D): ein breites dunkles Band wie die Story (App-Welt), das Video groesser, ein eigener grosser
   Abspielknopf. Kein Autoplay. */
.rundgang { background: var(--app-grund); color: var(--app-text); box-shadow: inset 0 1px 0 var(--story-kante), inset 0 -1px 0 var(--story-kante); }
html.js .rundgang.deckt { background: var(--app-grund); }
.rundgang-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); display: grid; gap: var(--s-8); align-items: center; }
.rundgang h2 { color: var(--app-text); }
.rundgang-text p { color: var(--app-text-2); margin-top: 18px; font-size: var(--t-text); max-width: 46ch; }
.rundgang-text .knopf { margin-top: 8px; }
.knopf-band { background: transparent; color: var(--app-text); border-color: var(--app-text); }
@media (hover: hover) and (pointer: fine) { .knopf-band:hover { background: var(--app-text); color: var(--app-grund); box-shadow: none; } }
.rundgang .telefon-video { justify-self: center; width: min(320px, 100%); position: relative; }
.telefon-video video { width: 100%; height: auto; border-radius: 34px; display: block; background: var(--app-grund); }
.telefon-video video::cue { font-family: var(--schrift); font-size: 1rem; background: var(--untertitel); color: #E8EDF3; }
.video-start {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; z-index: 2;
  display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--verlauf-marke); color: #0E1621; box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.6);
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.video-start svg { margin-left: 5px; }
.video-start:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .video-start:hover { transform: scale(1.05); } .video-start:hover:active { transform: scale(0.95); } }
.video-start:focus-visible { outline: 3px solid var(--app-text); outline-offset: 4px; }
html:not(.js) .video-start, .video-start[hidden] { display: none; }
@media (min-width: 900px) {
  .rundgang-innen { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 60px; }
  .rundgang .telefon-video { width: 372px; }
}

/* ---------------------------------------------------------- Funktionen
   ANLEITUNG ALS INDEX (E6/E11): drei Gruppen, Zeilen statt Karten, ab 900 px nebeneinander. Jede Zeile ist ein
   Verweis in die Anleitung, mindestens 44 px hoch. */
.funktionen { padding: var(--raum-oben) 20px var(--raum-unten); }
.funktionen-innen { max-width: var(--spalte); margin: 0 auto; }
.funktionen-kopf { max-width: 760px; margin-bottom: var(--s-8); }
.funktionen-kopf p { color: var(--tinte-2); margin-top: 18px; font-size: var(--t-text); max-width: 58ch; }
.index { display: grid; gap: var(--s-8); }
.index-gruppe h3 { font-size: var(--t-klein); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-2); padding-bottom: var(--s-3); border-bottom: 2px solid var(--tinte); }
.index-liste { list-style: none; margin: 0; padding: 0; }
.index-liste li { border-bottom: 1px solid var(--rand); }
.index-liste a { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: var(--s-3); row-gap: 2px; padding: var(--s-3) 0; min-height: 44px; color: var(--tinte); text-decoration: none; transition: color 150ms ease; }
.index-nr { grid-row: 1 / span 2; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--akzent-tief); font-size: var(--t-text); line-height: 1.45; }
.index-liste strong { font-size: var(--t-text); letter-spacing: -0.01em; }
.index-liste a > span:last-child { color: var(--tinte-2); font-size: var(--t-klein); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .index-liste a:hover strong { color: var(--akzent-tief); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }
.index-liste a:active strong { color: var(--akzent-tief); }
.index-liste a:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 2px; }
@media (min-width: 900px) { .index { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }

/* ------------------------------------------------------------ Vertrauen (E12)
   Zeilen ohne Karten und ohne Mittelpunkte, ab 900 px zweispaltig. Nur vorhandene Saetze. */
.vertrauen-innen { max-width: var(--spalte); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); box-sizing: content-box; }
.vertrauen-liste { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; }
.vertrauen-liste li { padding: var(--s-4) 0; border-top: 1px solid var(--rand); font-size: var(--t-lead); color: var(--tinte); }
@media (min-width: 900px) { .vertrauen-liste { grid-template-columns: 1fr 1fr; column-gap: 60px; } }


/* ------------------------------------------------- Geheftet und überdeckt
   Der Hero bleibt stehen, die folgenden Abschnitte schieben sich darüber
   (allies.studio). Die Hülle ist doppelt so hoch wie das Fenster, damit es
   einen Weg gibt, auf dem das Überdecken stattfindet. */
.held-huelle { position: relative; z-index: 0; }
.deckt { position: relative; z-index: 2; background: var(--papier); }
@media (min-width: 900px) {
  html.js:not(.ruhig) .held-huelle { height: 200svh; }
  html.js:not(.ruhig) .held { position: sticky; top: 0; min-height: 100svh; }
  html.js:not(.ruhig) .laufband.deckt { margin-top: -100svh; }
}
html.ruhig .nutzen-buehne { padding: var(--raum-oben) 20px var(--raum-unten); }
html.ruhig [data-scroll="rahmen"] { opacity: 1 !important; }
html.js .story.deckt { background: var(--app-grund); }
html.js .preis.deckt { background: var(--verlauf-flaeche); }
html.js .fuss.deckt { background: var(--papier); }

/* Bildrahmen (allies float-img-frame): Rahmen wächst und blendet ein, das Bild darin zoomt heraus,
   danach Parallaxe (Szenen am Scrollweg). Ohne Bewegung steht der Rahmen einfach da. */
.telefon { overflow: clip; }
.telefon-mobil { justify-self: center; width: 250px; }

/* Bühne im Story-Block: Bildwechsel mit Zoom (lircle). */
@media (min-width: 900px) {
  .buehne-bild { transform: scale(1.06); }
  .buehne-bild.ist-aktiv { transform: scale(1); }
}

/* Nutzen: geheftete Bühne, die Karten fahren waagerecht durch (lircle hwrap). */
.nutzen { padding: 0; }
.nutzen-buehne { max-width: none; padding: var(--raum-oben) 20px var(--raum-unten); }
.nutzen-titel { max-width: var(--spalte); margin: 0 auto 36px; }
.nutzen-spur { display: grid; gap: 16px; max-width: var(--spalte); margin: 0 auto; }
.nutzen-lauf { display: none; }
.nutzen .kachel-bild { min-height: 320px; }
/* Die Bühne heftet auf jeder Breite, sobald das Fenster hoch genug ist (19.09.2026, vorher nur ab 900 px).
   Auf dem Telefon sind die Karten so breit wie das Fenster minus Rand; dvh, damit die Adressleiste von iOS nicht mitzählt. */
@media (min-height: 600px) {
  html.js:not(.ruhig) .nutzen { height: 260svh; max-width: none; margin: 0; padding: 0; }
  html.js:not(.ruhig) .nutzen-buehne { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; padding: 66px 0 0 max(20px, (100vw - var(--spalte)) / 2); }
  html.js:not(.ruhig) .nutzen-titel { margin: 0 0 32px; }
  html.js:not(.ruhig) .nutzen-spur { display: flex; gap: 22px; max-width: none; margin: 0; width: max-content; }
  html.js:not(.ruhig) .nutzen-spur .kachel { width: min(440px, 100vw - 40px); flex: none; min-height: 0; height: min(440px, 100svh - 230px); display: flex; flex-direction: column; justify-content: flex-end; }
  html.js:not(.ruhig) .nutzen-spur .kachel-rosa { width: min(560px, 100vw - 40px); }
  html.js:not(.ruhig) .nutzen-spur .kachel-bild { width: min(380px, 100vw - 40px); display: block; min-height: 0; }
  html.js:not(.ruhig) .nutzen-spur .kachel-tinte { width: min(520px, 100vw - 40px); }
  /* Laufleiste unter der Spur: nur solange die Buehne heftet und die Spur faehrt (CSS-Zeitachse oder JS-Ersatz). */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.ruhig) .nutzen-lauf { display: block; flex: none; width: 120px; height: 2px; margin-top: 28px; border-radius: 2px; background: var(--rand); overflow: clip; }
    html.js:not(.ruhig) .nutzen-lauf span { display: block; height: 100%; background: var(--akzent-gross); transform-origin: 0 50%; transform: scaleX(0.2); }
  }
  /* Telefon: flachere Karten, sonst steht der Text am Boden einer leeren Fläche. */
  @media (max-width: 899px) { html.js:not(.ruhig) .nutzen-spur .kachel { height: min(380px, 100svh - 240px); } }
}
@media (min-width: 900px) {
  html.ruhig .nutzen-spur { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); }
  html.ruhig .nutzen-spur .kachel-rosa { grid-column: span 4; }
  html.ruhig .nutzen-spur .kachel-bild { grid-column: span 2; grid-row: span 3; }
  html.ruhig .nutzen-spur .kachel:not(.kachel-rosa):not(.kachel-bild) { grid-column: span 2; }
  html.ruhig .nutzen-spur .kachel-tinte { grid-column: span 4; }
}

/* -------------------------------------------------------------- Nutzen */
.nutzen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); }
.bento { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: 1fr; }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: 30px 28px; box-shadow: var(--schatten-klein); }
.kachel h3 { margin-bottom: 12px; }
.kachel p { color: var(--tinte-2); }
.kachel-rosa { background: var(--akzent-hell); border-color: transparent; }
.kachel-pfirsich { background: var(--pfirsich); border-color: transparent; }
/* KEINE UMKEHR, SONDERN EIN STÜCK APP-WELT. Im Hellen hebt sie sich als dunkler
   Block ab; im Dunkeln darf sie nicht zur hellen Karte werden, sondern wird die
   erhobene dunkle Fläche (`--kachel-tinte`). Ihre Schrift bleibt hell. */
.kachel-tinte { background: var(--kachel-tinte); color: var(--app-text); border-color: transparent; }
.kachel-tinte h3 { color: var(--app-text); }
.kachel-tinte p { color: var(--app-text-2); }
.kachel-bild { padding: 0; overflow: clip; background: var(--verlauf-bild); border-color: transparent; min-height: 300px; }
.kachel-bild-innen { display: flex; justify-content: center; align-items: flex-start; height: 100%; padding: 28px 24px 0; }
.kachel-bild img { width: min(100%, 300px); border-radius: 26px 26px 0 0; box-shadow: var(--schatten); }
/* KACHELKOEPFE (Auftrag D): in die leere Flaeche ueber dem Text kommt ein echter Bildschirm als Ausschnitt ohne
   Telefonrahmen, hell oder dunkel nach der Fassung der Seite. Der Kopf nimmt den freien Platz und klippt unten. */
.kachel-kopf { display: flex; gap: var(--s-4); margin: 0 0 var(--s-5); min-height: 0; }
.kachel-ausschnitt { flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: clip; border: 1px solid var(--rand); background: var(--flaeche); align-self: stretch; }
.kachel-ausschnitt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.kachel-ausschnitt picture { height: 100%; }
.kachel-tinte .kachel-ausschnitt { border-color: rgb(255 255 255 / 0.12); }
.kachel-mit-kopf .kachel-kopf { height: 180px; }
html.js:not(.ruhig) .nutzen-spur .kachel-mit-kopf .kachel-kopf { flex: 1 1 auto; height: auto; min-height: 96px; }
/* Der Abholbeleg als HTML-Objekt (beleg-format.md, Abschnitt 2): Wortlaut und Schreibweise wie der echte Beleg
   (Betraege ohne Tausenderpunkt, Einheit nur im Kopf). Ein Ausschnitt: Kopfzeile, Titel, eine Kopfangabe und die
   Gesamtzeile; die Abschnitte je Automat passen nicht in den Kachelkopf (gemessen: 44 px Ueberstand bei 1440). */
.beleg { flex: 1.15 1 0; min-width: 0; align-self: flex-start; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 14px; font-size: var(--t-fein); line-height: 1.35; font-variant-numeric: tabular-nums; box-shadow: var(--schatten-klein); }
.beleg p { margin: 0; }
.beleg-kopfzeile { color: var(--tinte-2); }
.beleg-titel { font-weight: 800; margin-top: 2px; }
.beleg-text { color: var(--tinte-2); }
.beleg-gesamt { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.beleg-gesamt span:last-child { white-space: nowrap; }
.beleg-gesamt { margin-top: 6px; padding-top: 6px; border-top: 3px double var(--tinte); font-weight: 800; }
/* Am Telefon reicht der Platz nicht fuer beides: der Beleg zeigt Titel und Gesamtzeile, der Ausschnitt entfaellt. */
@media (max-width: 759px) {
  .kachel-kopf-archiv .kachel-ausschnitt, .beleg-kopfzeile, .beleg-text { display: none; }
  .beleg { flex-basis: auto; padding: 10px 12px; }
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); }
  .kachel-breit { grid-column: span 4; }
  .kachel-bild { grid-column: span 2; grid-row: span 3; }
  .kachel:not(.kachel-breit):not(.kachel-bild) { grid-column: span 2; }
  .kachel-tinte { grid-column: span 4; }
}
@media (min-width: 1100px) {
  .kachel-breit { padding: 44px 40px; }
  .kachel-breit h3 { font-size: 2.2rem; max-width: 16ch; }
  .kachel-breit p { max-width: 52ch; font-size: var(--t-text); }
}

/* ------------------------------------------------------------ Einstieg */
.einstieg { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); }
.stufen-rahmen { position: relative; margin-top: 40px; }
.stufen-linie { display: none; }
.stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stufen li { position: relative; padding: 26px 0 26px 32px; border-top: 1px solid var(--rand); }
.stufen li::before { content: ""; position: absolute; left: 0; top: 36px; width: 14px; height: 14px; border-radius: 50%; background: var(--akzent-gross); box-shadow: 0 0 0 5px var(--akzent-hell); }
.stufen strong { display: block; font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.stufen span { color: var(--tinte-2); max-width: 46ch; display: block; }
.einstieg-voraussetzung { margin-top: 30px; color: var(--tinte-2); max-width: 56ch; }
@media (min-width: 900px) {
  .stufen-linie { display: block; position: absolute; left: 0; right: 0; top: 0; height: 12px; width: 100%; }
  .stufen-linie path { fill: none; stroke: var(--akzent-gross); stroke-width: 3; stroke-linecap: round; }
  .stufen { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .stufen li { padding: 34px 0 0; border-top: 0; }
  .stufen li::before { top: -1px; left: 0; }
}

/* --------------------------------------------------------------- Preis */
.preis { background: var(--verlauf-flaeche); border-radius: 40px; margin: var(--s-5) var(--s-3); }
.preis-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); display: grid; gap: 40px; align-items: center; }
.preis-text { max-width: 54ch; }
.preis-text p { color: var(--tinte-2); margin-top: 18px; font-size: var(--t-text); }
.preis-text .preis-hinweis { font-size: var(--t-klein); }
.preis-rechner { background: var(--flaeche); border-radius: var(--radius-karte); padding: 32px 28px; max-width: 520px; width: 100%; box-shadow: var(--schatten); }
.preis-label { display: block; font-weight: 600; margin-bottom: 12px; }
.preis-eingabe { display: flex; align-items: center; gap: 18px; }
/* Die Zahl ist ein Feld, kein Anzeigewert: auf dem Telefon bot der Regler 0,94 px je
   Automat, tippen ist genauer (20.09.2026). Regler und Feld halten sich gegenseitig. */
.preis-eingabe input[type="number"] { flex: none; width: 5.6ch; min-height: 46px; padding: 6px 8px 6px 12px; text-align: right; font-family: var(--schrift); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; }
input[type="range"] { flex: 1; accent-color: var(--akzent-tief); height: 44px; }   /* Tippziel 44 px (Craft P3-12) */
.preis-betrag { margin-top: 24px; font-size: clamp(2.8rem, 2rem + 2.4vw, 4.4rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
  /* „€" und „je Monat": Abstand 0,45 em der Einheit (Craft P2-6) statt eines Leerzeichens in Einheitsgroesse (3,5 px);
     flex statt Einzug, damit die umbrochene Einheit bei 375 px buendig links beginnt. */
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(0.45 * var(--t-text)); }
.preis-summe { display: inline-block; transition: filter 180ms ease, opacity 180ms ease; }
.preis-summe.wechselt { filter: blur(3px); opacity: 0.6; }
.preis-einheit { font-size: var(--t-text); font-weight: 600; color: var(--tinte-2); letter-spacing: 0; white-space: nowrap; }
.preis-aufschluesselung { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rand); }
.preis-aufschluesselung li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rand); color: var(--tinte-2); font-size: var(--t-klein); }
.preis-aufschluesselung li span:last-child { font-variant-numeric: tabular-nums; color: var(--tinte); font-weight: 600; white-space: nowrap; }
.preis-klein { margin-top: 16px; font-size: var(--t-klein); color: var(--tinte-2); }
@media (min-width: 900px) {
  .preis { margin: var(--s-8) var(--s-5); }
  .preis-innen { grid-template-columns: 1fr 1fr; column-gap: 60px; padding: var(--raum-oben) 40px var(--raum-unten); }
  .preis-text { justify-self: end; }
  .preis-rechner { justify-self: start; }
}

/* -------------------------------------------------------------- Fragen */
.fragen { max-width: 860px; margin: 0 auto; padding: var(--raum-oben) 20px var(--raum-unten); }
.frage-liste { margin-top: 30px; border-top: 1px solid var(--rand); }
details { border-bottom: 1px solid var(--rand); }
summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 240ms var(--ease-out); }
/* Zustaende (Craft P2-3, Bewegung C6): die Frage zeigt unter dem Zeiger und beim Druck, dass sie aufgeht.
   Eine breite Zeile skaliert man nicht, sie faerbt (Schrift Akzent 5,86:1 hell / 7,30:1 dunkel, Flaeche Papier-tief). */
summary { transition: color 160ms ease, background-color 160ms ease; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { summary:hover { color: var(--akzent-tief); } }
summary:active { color: var(--akzent-tief); background-color: var(--papier-tief); }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.frage-inhalt { overflow: hidden; }
.frage-inhalt p { color: var(--tinte-2); padding: 0 0 24px; max-width: 54ch; }
/* Verweis im Antworttext: Trefferflaeche 44 px hoch, ohne die Zeile zu verschieben (Polster an einem Inline-Element). */
.frage-inhalt p a { padding-block: 13px; }

/* --------------------------------------------------------------- Start */
.start { padding: var(--s-8) var(--s-3) var(--raum-unten); }
.start-innen { max-width: var(--breite); margin: 0 auto; background: var(--papier-tief); border-radius: 40px; padding: var(--s-10) 20px var(--s-11); display: grid; gap: 40px; }
.start-text p { color: var(--tinte-2); margin-top: 18px; font-size: var(--t-text); max-width: 46ch; }
.start-punkte { margin: 22px 0 0; padding: 0 0 0 18px; color: var(--tinte-2); }
.start-punkte li { margin-bottom: 6px; }
.formular { background: var(--flaeche); border-radius: var(--radius-karte); padding: 30px 26px; max-width: 560px; box-shadow: var(--schatten); }
.formular-stand { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 8px; }
.formular-stand li { flex: 1; font-size: var(--t-fein); font-weight: 600; color: var(--tinte-2); padding-top: 10px; border-top: 3px solid var(--rand); transition: border-color 250ms ease, color 250ms ease; }
.formular-stand li[aria-current="step"] { color: var(--tinte); border-top-color: var(--akzent-gross); }
.formular-stand li.erledigt { border-top-color: var(--akzent-gross); }
.abschnitte { position: relative; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.abschnitt { transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.abschnitt.geht { opacity: 0; transform: translateX(-18px); }
.abschnitt.kommt { opacity: 0; transform: translateX(18px); }
legend { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 18px; padding: 0; }
.feld { margin-bottom: 16px; }
.feld-reihe { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 480px) { .feld-reihe { grid-template-columns: 1fr 1fr; } .feld-reihe:has(.feld-kurz) { grid-template-columns: 120px 1fr; } }
label { display: block; font-weight: 600; font-size: var(--t-klein); margin-bottom: 6px; }
.optional { color: var(--tinte-2); font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  width: 100%; min-height: 50px; padding: 10px 16px; font: inherit; color: var(--tinte);
  background: var(--papier); border: 1px solid var(--feld-rand); border-radius: var(--radius-feld);
  transition: border-color 160ms ease;
}
/* Platzhalter voll deckend (bei 0,75 nur 3,87:1 hell / 4,45:1 dunkel, P1-4). */
input::placeholder { color: var(--tinte-2); opacity: 1; }
/* FOKUS AN JEDER EINGABE (P1-5, 04.10.2026): der Ring kommt ueber :focus-visible wie ueberall auf der
   Seite; vorher nahm input:focus ihn allen Eingaben weg (auch dem Regler, der nur einen blassen Schein
   von 1,33:1 bekam). Die Kante wird beim Fokus zusaetzlich zur Akzentfarbe. */
input:focus-visible, select:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus { border-color: var(--akzent-tief); }
.feld.ungueltig input, .feld.ungueltig select, .wahl.ungueltig .wahl-option { border-color: var(--fehler-rand); }
.feld-hilfe { font-size: var(--t-klein); color: var(--tinte-2); margin-top: 6px; }
.feld-fehler { font-size: var(--t-klein); color: var(--fehler); margin-top: 6px; font-weight: 600; }
.wahl { margin-bottom: 16px; }
.wahl legend { font-size: var(--t-klein); font-weight: 600; margin-bottom: 8px; }
.wahl-option { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin-bottom: 8px; border: 1px solid var(--feld-rand); border-radius: var(--radius-feld); font-weight: 500; cursor: pointer; background: var(--papier); transition: border-color 160ms ease, background-color 160ms ease; }
.wahl-option:has(input:checked) { border-color: var(--akzent-tief); background: var(--akzent-hell); } /* Rolle, keine Stufe: rosa-50 blieb im Dunkeln hell, Text darauf 1,09:1 */
.wahl-option input { margin: 4px 0 0; accent-color: var(--akzent-tief); flex: none; width: 18px; height: 18px; }
.wahl-haken { font-size: var(--t-klein); line-height: 1.45; }
.formular-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.formular-meldung { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-feld); background: var(--akzent-hell); font-size: var(--t-klein); }
/* Die Live-Region bleibt im Baum und ist nur leer -- befuellt man sie, solange sie
   hidden ist, bleibt die Ansage bei Vorlesern oft aus (20.09.2026). */
.formular-meldung:empty { padding: 0; margin: 0; }
.formular-meldung a { color: inherit; font-weight: 600; }
.formular-meldung.fehler { background: var(--fehler-flaeche); color: var(--fehler-flaeche-text); }
@media (min-width: 900px) {
  .start { padding: var(--s-10) var(--s-5) var(--raum-unten); }
  .start-innen { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 60px; padding: var(--s-11) 60px var(--s-12); }
  .start-text { max-width: 520px; }
  .formular { justify-self: end; }
}
/* NEUANMELDUNG ZU (02.10.2026): der Schalter ist data-neuanmeldung am Abschnitt (index.html).
   "zu" zeigt nur den Hinweis, alles andere zeigt Einleitung und Formular wie bisher. */
.start-zu p { color: var(--tinte-2); margin-top: 18px; font-size: var(--t-text); max-width: 46ch; }
.start-zu p:last-child { margin-top: 26px; }
.start:not([data-neuanmeldung="zu"]) .start-zu { display: none; }
.start[data-neuanmeldung="zu"] .start-text,
.start[data-neuanmeldung="zu"] .formular { display: none; }
.start[data-neuanmeldung="zu"] .start-innen { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- Fuß */
.fuss { padding: var(--s-8) 20px var(--s-9); }
.fuss-innen { max-width: var(--spalte); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; color: var(--tinte-2); font-size: var(--t-klein); }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.fuss-nav a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss-nav a:hover { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; } }
/* Tippziele (Craft P3-12): unter 760 px sind die Fussverweise 44 px hoch statt 23,5. */
@media (max-width: 759px) { .fuss-nav { gap: 0 18px; } .fuss-nav a { display: inline-flex; align-items: center; min-height: 44px; } }
/* FUSS ALS ABSCHLUSS (Auftrag D), nur auf der Startseite (Klasse fuss-abschluss; Anleitung und Anmeldeseite behalten
   ihren Fuss): Wortmarke gross, ein vorhandener Satz, Verweise auf der Seite, Rechtliches, Stand, Cookie-Zeile. */
.fuss-abschluss { padding: var(--s-10) 20px var(--s-9); border-top: 1px solid var(--rand); }
.fuss-abschluss .fuss-innen { display: grid; gap: var(--s-7) var(--s-8); justify-content: stretch; align-items: start; }
/* FUSS-BUEHNE (Auftrag H): die volle Wortmarke mit Unterzeile, breit; fliesst einmal beim Hineinscrollen.
   isolation: auto an der Metall-Schicht (der Baustein setzt sonst isolation: isolate auf [data-paper-shader]): sonst
   wäre sie eine eigene Gruppe, und soft-light fände die flache Marke darunter nicht. */
.fuss-wortmarke { position: relative; display: block; width: min(100%, 560px); aspect-ratio: 1543 / 491; isolation: isolate;
  color: var(--tinte); text-decoration: none; }
.fuss-wortmarke img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fuss-metall { position: absolute; inset: 0; display: block; isolation: auto; }
.fuss-metall .metall-leinwand { -webkit-mask: url("/marke/rosa-maske-voll.webp") 0 0 / 100% 100% no-repeat;
  mask: url("/marke/rosa-maske-voll.webp") 0 0 / 100% 100% no-repeat; }
.fuss-wortmarke:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 6px; border-radius: 6px; }
.fuss-satz { margin-top: var(--s-3); font-size: var(--t-lead); color: var(--tinte); }
.fuss-fakten { display: flex; flex-wrap: wrap; gap: 0 18px; align-content: flex-start; }
.fuss-abschluss .fuss-nav { gap: 0 18px; align-content: flex-start; }
.fuss-fakten a, .fuss-abschluss .fuss-nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.fuss-fakten a { color: var(--tinte); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .fuss-fakten a:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.fuss-firma, .fuss-cookies { font-size: var(--t-fein); }
.fuss-abschluss .fuss-cookies { margin-top: calc(-1 * var(--s-6)); }
@media (min-width: 900px) {
  .fuss-abschluss .fuss-innen { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
  .fuss-fakten, .fuss-abschluss .fuss-nav { flex-direction: column; }
  .fuss-abschluss .fuss-firma { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--rand); }
  .fuss-abschluss .fuss-cookies { grid-column: 1 / -1; }
}

/* ============================================================ Szenen am Scrollweg
   EIN SATZ SZENEN, ZWEI MOTOREN (04.10.2026, Swen: „Die Seite soll die Scroll-down-Funktionen behalten",
   Firefox „optisch die beste Wirkung").

   Browser mit `animation-timeline` (Chrome ab 115, Safari ab 26) fahren alles hier als CSS auf dem
   Compositor: Klasse `motor-css`, JavaScript schreibt beim Scrollen nichts. Bis 04.10.2026 schrieb ein
   JS-Motor je Bild transform und opacity -- auf dem Geraet scrollt der Compositor voraus, das zitterte
   (LEHREN 19.09. und 21.09.2026). Browser ohne Zeitachse (Firefox) bekommen `motor-js`: seite.js rechnet
   dieselben Bahnen mit denselben Werten, aber nur nach scroll/resize. Wer hier einen Wert aendert, aendert
   ihn in seite.js („Ersatz ohne Zeitachse") mit; pruefung/bewegung-test.js misst den Gleichlauf.

   Ein Schreiber je Element und Eigenschaft: Auftritte beim Laden liegen auf .zeile-innen, .held-satz,
   .held-knoepfe, .telefon-*, .glanz::before; die Scroll-Szenen auf .zeile, .held-text, .schwebe-*, .glanz.
   Einzug der view()-Zeitachsen ausdruecklich 0 (siehe scroll-padding-top am Dokument). */
.held-titel .zeile:nth-child(1), .problem-satz .zeile:nth-child(1) { --tiefe: 0.30; }
.held-titel .zeile:nth-child(2), .problem-satz .zeile:nth-child(2) { --tiefe: 0.22; }
.held-titel .zeile:nth-child(3), .problem-satz .zeile:nth-child(3) { --tiefe: 0.14; }
.held-titel .zeile:nth-child(4), .problem-satz .zeile:nth-child(4) { --tiefe: 0.06; }
.problem-antwort, .problem-quelle { --tiefe: 0.04; }
[data-richtung="links"] { --richtung: -1; }
/* Treiben und Kippen der Bildrahmen ueber die ganze Durchfahrt (gerechnet bei 375 x 629 und 1440 x 900). */
/* Grundwerte fuer JEDEN mitlaufenden Rahmen (04.10.2026): fehlten sie, wurden translate/rotate in rahmen-treibt zu
   "none", und Safari 26 stuerzte beim Ueberblenden ab (WebKit-Fehler in den beschleunigten Animationen; belegt im
   Simulator, design-04-10-2026/BERICHT-ABSTURZ.md). Die Keyframes tragen zusaetzlich Rueckfallwerte. */
[data-scroll="rahmen"] { --treib: 38px; --kipp: 2.8deg; }
.telefon-mobil { --treib: 38px; --kipp: 2.8deg; }
/* Fokuspunkte (Bewegung C4): der Zoom im Story-Telefon beginnt auf der Zeile, um die es im Schritt geht, statt in der
   Bildmitte. Ursprung allein, beide Motoren (CSS und Ersatz) schreiben nur scale. */
/* Neu bestimmt fuer die neuen Bildschirme (Auftrag D), aus der Lage der Texte im Bild (390 x 844, DOM-Messung):
   Melden `automaten`: Nr. 3 „Ist fehlt" bei 455 px = 54 %; Zaehlen `route-blind`: Feld „Gezaehlte Gesamtsumme" und
   „Das Soll erscheint nach der Eingabe" 641 bis 796 px, Mitte 82 %; Vergleichen `start`: „Abweichung −12,60 € ·
   unerklaert" bei 557 px = 66 %. Dieselben Punkte gelten fuer die feste Buehne (C1, Kamera faehrt dorthin). */
.schritt[data-schritt="0"] .telefon-mobil img, .buehne-bild[data-schritt="0"] { transform-origin: 50% 54%; }
.schritt[data-schritt="1"] .telefon-mobil img, .buehne-bild[data-schritt="1"] { transform-origin: 50% 82%; }
.schritt[data-schritt="2"] .telefon-mobil img, .buehne-bild[data-schritt="2"] { transform-origin: 50% 66%; }
.telefon-video { --treib: 52px; --kipp: 3deg; }
.stufen-linie { transform-origin: 0 50%; }

/* Fortschritt: ganze Seite, linear. Lageanzeige, laeuft auch bei reduzierter Bewegung. */
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Zeile hebt sich in eigener Rate und ist bei 1/1,3 des Wegs ausgeblendet. */
@keyframes heben {
  0%    { opacity: 1; transform: translate3d(0, 0, 0); }
  76.9% { opacity: 0; }
  100%  { opacity: 0; transform: translate3d(0, calc(-100vh * var(--tiefe, 0)), 0); }
}
@keyframes held-weicht { to { transform: translate3d(0, -148px, 0); opacity: 0; } }
@keyframes drift-a { to { transform: translate3d(12.25vh, -31.5vh, 0) rotate(10deg); } }
@keyframes drift-b { to { transform: translate3d(-5.25vh, -13.5vh, 0) rotate(-4.3deg); } }
@keyframes drift-c { to { transform: translate3d(21vh, -54vh, 0) rotate(17.3deg); } }
@keyframes drift-a-mobil { to { transform: translate3d(58px, 96px, 0) rotate(3deg); } }
@keyframes drift-b-mobil { to { transform: translate3d(-30px, 96px, 0) rotate(-2deg); } }
@keyframes drift-c-mobil { to { transform: translate3d(74px, 96px, 0) rotate(5deg); } }
@keyframes glanz-weicht { to { scale: 1.36; opacity: 0.3333; } }
@keyframes band-schub { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50vh - 60px), 0, 0); } }
@keyframes heran { from { transform: translate3d(0, 60px, 0) scale(0.94); } }
@keyframes rahmen-ein {
  from { opacity: 0.04; transform: translate3d(calc(70px * var(--richtung, 1)), 70px, 0) scale(0.82) rotate(calc(5deg * var(--richtung, 1))); }
  to   { opacity: 1; transform: none; }
}
@keyframes rahmen-treibt { from { translate: 0 calc(-1 * var(--treib, 38px)); rotate: var(--kipp, 2.8deg); } to { translate: 0 var(--treib, 38px); rotate: calc(-1 * var(--kipp, 2.8deg)); } }
@keyframes rahmen-zoom { from { transform: scale(1.3); } to { transform: none; } }
/* Nutzen-Spur mit Haltepunkten (Auftrag B, Ziel 8): jede Karte steht in einem Abschnitt des Scrollwegs ganz und
   ruhig im Bild, statt an jeder Stelle mitten im Wort angeschnitten zu sein. Fuenf Karten = fuenf Halte zu je 12 %
   des Wegs, dazwischen vier Fahrten zu je 10 % mit weichem An- und Abfahren. Die Halte (--halt-1 bis -3, Ende =
   --pan-strecke) misst seite.js aus dem Layout: Karte i mit ihrer linken Kante am linken Rand, hoechstens bis zum
   Ende der Fahrt. Wer die Prozente aendert, aendert HALTE in seite.js mit (Gleichlauf, pruefung/bewegung-test.js). */
@keyframes nutzen-fahrt {
  0%, 12%   { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  22%, 34%  { transform: translate3d(calc(-1 * var(--halt-1, 0px)), 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  44%, 56%  { transform: translate3d(calc(-1 * var(--halt-2, 0px)), 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  66%, 78%  { transform: translate3d(calc(-1 * var(--halt-3, 0px)), 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  88%, 100% { transform: translate3d(calc(-1 * var(--pan-strecke, 0px)), 0, 0); }
}
/* Laufleiste (Bewegung C3): dieselben Halte, Fuellung = gefahrener Anteil (0,2 bis 1). */
@keyframes nutzen-lauf {
  0%, 12%   { transform: scaleX(0.2); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  22%, 34%  { transform: scaleX(var(--lauf-1, 0.2)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  44%, 56%  { transform: scaleX(var(--lauf-2, 0.2)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  66%, 78%  { transform: scaleX(var(--lauf-3, 0.2)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  88%, 100% { transform: scaleX(1); }
}
@keyframes linie-zieht { from { scale: 0 1; } }
@keyframes punkt-an { from { opacity: 0.25; scale: 0.6; } to { opacity: 1; scale: 1; } }
/* Buehnen-Fokus (Bewegung C1, Auftrag D): waehrend ein Schritt aktiv ist (cover 30 bis 70 % seiner Zeitachse), faehrt
   die Kamera an die Stelle im Bild (scale 1 -> 1,32, halten, zurueck). Eigene Eigenschaft scale, damit der Bildwechsel
   (transform, Uebergang) ein eigener Schreiber bleibt. Ersatz: seite.js „fokusWert", gleiche Kurven. */
@keyframes fokus {
  0%   { scale: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  40%  { scale: 1.32; }
  60%  { scale: 1.32; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  100% { scale: 1; }
}
/* Die Rechnung (E4): Betraege ruecken ein (Soll von links, Gezaehlt von rechts, --rueck 12 vw, am Telefon 30 vw),
   der Strich zeichnet sich, dann erscheinen Differenz und Grund. Bereiche auf der Zeitachse des Rechenblocks. */
@keyframes rueck-links { from { transform: translate3d(calc(-1 * var(--rueck, 12vw)), 0, 0); } }
@keyframes rueck-rechts { from { transform: translate3d(var(--rueck, 12vw), 0, 0); } }
@keyframes auftauchen { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

@supports (animation-timeline: scroll()) {
  html.motor-css .fortschritt { animation: fortschritt linear both; animation-timeline: scroll(root block); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Laufband: ein halber Fensterweg plus 60 px, solange das Band durchs Fenster faehrt. */
    html.motor-css .laufband-schub { animation: band-schub linear both; animation-timeline: view(block 0px); }
    /* Problem-Satz und Antwort: die Huelle (2 Fenster hoch, Satz geheftet) laeuft oben hinaus. */
    html.motor-css .problem-huelle { view-timeline: --problem block; view-timeline-inset: 0px; }
    html.motor-css .problem-satz .zeile, html.motor-css .problem-antwort, html.motor-css .problem-quelle {
      animation: heben linear both; animation-timeline: --problem; animation-range: cover 100vh cover 200vh;
    }
    /* Story-Flaeche gleitet heran, bis sie zur Haelfte eingetreten ist (easeOutCubic). */
    html.motor-css .story {
      animation: heran both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
      animation-timeline: view(block 0px); animation-range: entry 0% entry 50%;
    }
    /* Bildrahmen: Eintritt auf den ersten 60 vh, Treiben und Kippen ueber die ganze Durchfahrt
       (eigene Eigenschaften translate/rotate), das Bild darin zoomt auf derselben Zeitachse heraus. */
    html.motor-css [data-scroll="rahmen"] {
      view-timeline: --rahmen block; view-timeline-inset: 0px;
      animation: rahmen-ein both, rahmen-treibt linear both;
      animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1), linear;
      animation-timeline: --rahmen, --rahmen;
      animation-range: cover 0vh cover 60vh, cover 0% cover 100%;
    }
    html.motor-css [data-scroll="rahmen"] img, html.motor-css [data-scroll="rahmen"] video {
      animation: rahmen-zoom both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
      animation-timeline: --rahmen; animation-range: cover 0vh cover 60vh;
    }
  }
}
/* Rechnung: Soll und Gezaehlt cover 5..35 %, Strich 30..42 %, Differenz und Grund 40..50 % (easeOutCubic wie die Linie). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.motor-css .rechnung-block { view-timeline: --rechnung block; view-timeline-inset: 0px; }
    html.motor-css .rechnung-soll { animation: rueck-links both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-timeline: --rechnung; animation-range: cover 5% cover 35%; }
    html.motor-css .rechnung-ist { animation: rueck-rechts both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-timeline: --rechnung; animation-range: cover 5% cover 35%; }
    html.motor-css .rechnung-diff::before { animation: linie-zieht both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-timeline: --rechnung; animation-range: cover 30% cover 42%; }
    html.motor-css .rechnung-diff dt, html.motor-css .rechnung-diff dd, html.motor-css .rechnung-grund {
      animation: auftauchen both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-timeline: --rechnung; animation-range: cover 40% cover 50%;
    }
  }
}
html.motor-js:not(.ruhig) .rechnung-diff::before { scale: var(--strich, 1) 1; }
/* Buehnen-Fokus (C1), nur am Schreibtisch, wo die Buehne steht. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.motor-css .story-raster { timeline-scope: --schritt-0, --schritt-1, --schritt-2; }
    html.motor-css .schritt[data-schritt="0"] { view-timeline: --schritt-0 block; view-timeline-inset: 0px; }
    html.motor-css .schritt[data-schritt="1"] { view-timeline: --schritt-1 block; view-timeline-inset: 0px; }
    html.motor-css .schritt[data-schritt="2"] { view-timeline: --schritt-2 block; view-timeline-inset: 0px; }
    html.motor-css .buehne-bild { animation: fokus linear both; animation-range: cover 30% cover 70%; }
    html.motor-css .buehne-bild[data-schritt="0"] { animation-timeline: --schritt-0; }
    html.motor-css .buehne-bild[data-schritt="1"] { animation-timeline: --schritt-1; }
    html.motor-css .buehne-bild[data-schritt="2"] { animation-timeline: --schritt-2; }
  }
}
/* Nutzen-Spur: faehrt waagerecht, solange die Buehne heftet (Huelle fuellt das Fenster ganz). */
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) {
  @supports (animation-timeline: view()) {
    html.motor-css:not(.nutzen-hand) .nutzen { view-timeline: --nutzen block; view-timeline-inset: 0px; }
    html.motor-css:not(.nutzen-hand) .nutzen-spur { animation: nutzen-fahrt linear both; animation-timeline: --nutzen; animation-range: contain 0% contain 100%; }
    html.motor-css:not(.nutzen-hand) .nutzen-lauf span { animation: nutzen-lauf linear both; animation-timeline: --nutzen; animation-range: contain 0% contain 100%; }
  }
}
/* Nutzen-Spur von Hand (iOS-WebKit, seite.js „Nutzen-Spur von Hand"): dieselbe Fahrt aus window.scrollY statt Zeitachse,
   weil Safari 26 die Zeitachse mit der Werkzeugleiste versetzt. Eigene Ebene, damit je Bild nur eine Matrix wechselt. */
@media (min-height: 600px) { html.nutzen-hand:not(.ruhig) .nutzen-spur { will-change: transform; } }
/* Schreibtisch: Held geheftet, Zeilen heben sich in vier Tiefen, Telefone driften (Werte bei 900 px Fensterhoehe). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.motor-css .held-titel .zeile { animation: heben linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .schwebe-a { animation: drift-a linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .schwebe-b { animation: drift-b linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .schwebe-c { animation: drift-c linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    /* Linie zeichnet sich zwischen Oberkante bei 0,9 und 0,4 Fensterhoehen (scale statt stroke-dashoffset). */
    html.motor-css .stufen-linie {
      animation: linie-zieht both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
      animation-timeline: view(block 0px); animation-range: cover 10vh cover 60vh;
    }
    /* Stufen-Punkte gehen an, wenn die Linie sie erreicht (Bewegung C5): die ease-out gezeichnete Linie erreicht die
       Punkte bei 0 %, 34 % und 68 % ihrer Breite, also bei cover 10, 16,5 und 25,8 vh; je 4 vh Weg um diese Stelle.
       Ersatz: seite.js setzt --punkt (0 bis 1) am li, die Regel unter html.motor-js liest es. */
    html.motor-css .stufen-rahmen { view-timeline: --stufen block; view-timeline-inset: 0px; }
    html.motor-css .stufen li::before { animation: punkt-an linear both; animation-timeline: --stufen; }
    html.motor-css .stufen li:nth-child(1)::before { animation-range: cover 8vh cover 12vh; }
    html.motor-css .stufen li:nth-child(2)::before { animation-range: cover 14.5vh cover 18.5vh; }
    html.motor-css .stufen li:nth-child(3)::before { animation-range: cover 24vh cover 28vh; }
  }
  html.motor-js:not(.ruhig) .stufen li::before { opacity: calc(0.25 + 0.75 * var(--punkt, 1)); scale: calc(0.6 + 0.4 * var(--punkt, 1)); }
}
/* Telefon: der Held ist nicht geheftet. Der Textblock steigt schneller als die Seite und blendet aus,
   die Telefone bleiben zurueck, der Schein waechst und verblasst. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.motor-css .held-text { animation: held-weicht linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
    html.motor-css .schwebe-a { animation: drift-a-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .schwebe-b { animation: drift-b-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .schwebe-c { animation: drift-c-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.motor-css .glanz { animation: glanz-weicht linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}

/* ------------------------------------------------------ Hell und dunkel
   OHNE MISCHZUSTAND (04.10.2026): beim Wechsel sind alle Uebergaenge gesperrt (sonst liefen einzelne
   Farben 150 bis 200 ms nach, Text kurz 1:1 auf dem Grund), die Ueberblendung uebernimmt eine View
   Transition (thema.js). */
html.thema-wechselt *, html.thema-wechselt *::before, html.thema-wechselt *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
}

/* ------------------------------------------------------ Liquid Glass (Auftrag H, 04.10.2026)
   Muster von Apple: der Hauptknopf ist rosa getöntes Glas (Tinte darauf), die schwebenden Knöpfe (Darstellungs-Schalter,
   Menü, „Anmelden" in der Kopfzeile, Abspielknopf) sind klares Glas. Mattglas mit Glanzkante überall (Unschärfe, eine
   helle Innenkante oben, ein feiner Ring); die Lichtbrechung über den SVG-Filter #glas-brechung bekommt nur Chromium
   (Klasse glas-brechung, gesetzt von marke/marke.js). backdrop-filter wird nie animiert (Safari-26-Absturz vom
   04.10.2026): er steht in keiner transition und keinem @keyframes. Reduzierte Transparenz und höherer Kontrast geben
   feste Flächen. Tippziele bleiben >= 44 px. Gemessen: pruefung/h-glas-test.js. */
:root {
  --glas-klar: rgb(255 255 255 / 0.55); --glas-klar-hover: rgb(255 255 255 / 0.8);
  --glas-kante: rgb(255 255 255 / 0.9); --glas-ring: rgb(14 22 33 / 0.10); --glas-schatten: rgb(60 40 10 / 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --glas-klar: rgb(255 255 255 / 0.07); --glas-klar-hover: rgb(255 255 255 / 0.14);
    --glas-kante: rgb(255 255 255 / 0.22); --glas-ring: rgb(255 255 255 / 0.14); --glas-schatten: rgb(0 0 0 / 0.5); }
}
:root[data-thema="dunkel"], .kopf.kopf-dunkel .kopf-innen { --glas-klar: rgb(255 255 255 / 0.07); --glas-klar-hover: rgb(255 255 255 / 0.14);
  --glas-kante: rgb(255 255 255 / 0.22); --glas-ring: rgb(255 255 255 / 0.14); --glas-schatten: rgb(0 0 0 / 0.5); }
.glas-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

/* klares Glas */
.thema-schalter, .menue-knopf, .kopf-zugang {
  background: var(--glas-klar);
  box-shadow: inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px var(--glas-ring), 0 6px 16px -10px var(--glas-schatten);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
}
.menue-knopf { border-radius: 999px; }
.kopf-zugang { align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--tinte); }
@media (min-width: 760px) { .kopf-zugang { display: inline-flex; } }   /* unter 760 px steht „Anmelden" im Menü */
@media (hover: hover) and (pointer: fine) {
  .thema-schalter:hover, .menue-knopf:hover, .kopf-zugang:hover { background: var(--glas-klar-hover); }
}
.kopf-zugang:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }
.video-start {
  background: rgb(14 22 33 / 0.62); color: #FFFFFF;   /* dunkel getönt genug, dass das Dreieck auf jedem Standbild ≥ 3:1 steht */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 18px 40px -16px rgb(0 0 0 / 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}

/* getöntes Glas: der Hauptknopf (Rosa, Tinte darauf) */
.knopf:not(.knopf-leise):not(.knopf-band) {
  /* Glanz nur als Innenschatten (oben hell, unten ein Hauch Tiefe), nicht als zweite Verlaufsschicht: so bleibt die
     Fläche unter der Schrift genau der getönte Markenverlauf (Kontrastmessung in craft-lokal und h-glas-test). */
  background: linear-gradient(135deg, rgb(250 82 193 / 0.9) 0%, rgb(255 100 98 / 0.9) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 10px 14px -10px rgb(255 255 255 / 0.45),
              inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 10px 24px -14px var(--akzent-gross);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
}
@media (hover: hover) and (pointer: fine) {
  .knopf:not(.knopf-leise):not(.knopf-band):hover {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 10px 14px -10px rgb(255 255 255 / 0.45),
                inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 14px 30px -14px var(--akzent-gross); }
}

/* Lichtbrechung: nur Chromium (SVG-Filter in backdrop-filter können Safari und Firefox nicht), und nur ohne Wunsch nach
   weniger Transparenz oder mehr Kontrast (Chromium kennt beide Abfragen). */
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  .glas-brechung .thema-schalter, .glas-brechung .menue-knopf, .glas-brechung .kopf-zugang {
    backdrop-filter: url(#glas-brechung) blur(12px) saturate(1.6); }
  .glas-brechung .video-start { backdrop-filter: url(#glas-brechung) blur(14px) saturate(1.5); }
  .glas-brechung .knopf:not(.knopf-leise):not(.knopf-band) { backdrop-filter: url(#glas-brechung) blur(10px) saturate(1.6); }
}

/* Rückfälle: feste Flächen */
@media (prefers-reduced-transparency: reduce) {
  html .thema-schalter, html .menue-knopf, html .kopf-zugang {
    background: var(--papier); box-shadow: inset 0 0 0 1px var(--rand); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .video-start { background: #0E1621; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .knopf:not(.knopf-leise):not(.knopf-band) { background: var(--akzent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  html .thema-schalter, html .menue-knopf, html .kopf-zugang {
    background: var(--papier); box-shadow: inset 0 0 0 2px var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .video-start { background: #0E1621; box-shadow: inset 0 0 0 2px #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .knopf:not(.knopf-leise):not(.knopf-band) { background: var(--akzent); box-shadow: inset 0 0 0 2px var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------------------- Druck */
@media print {
  .zeig, [data-scroll="rahmen"] { opacity: 1 !important; transform: none !important; }
  .stufen li::before { opacity: 1 !important; scale: none !important; animation: none !important; }
  .rechnung-soll, .rechnung-ist, .rechnung-diff dt, .rechnung-diff dd, .rechnung-grund { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rechnung-diff::before { scale: none !important; animation: none !important; }
  .video-start { display: none !important; }
  .laufband, .laufband-pause, .fortschritt, .menue-knopf, .thema-schalter, .nutzen-lauf { display: none !important; }
}

/* ------------------------------------------------------ Ruhe erzwingen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeig { opacity: 1; transform: none; }
  .problem-satz .zeile-innen { animation: none !important; transform: none !important; }
  .laufband-spur { animation: none; }
  .buehne-bild { transition: opacity 200ms ease; transform: none; }
}