/* vend-one Startseite. Statisch, ohne Bibliothek, ohne Fremdressourcen.
   Eine Stimmung: warmes Papier, tiefe Tinte, ein Kobalt. 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.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("schrift/Archivo-Italic.woff2") format("woff2"); font-weight: 100 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;
  --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-flaeche: #16202C;
  --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 */

  --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 */
  --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;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 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;
    --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: #2A2118;
    --pfirsich-tief: #3A2C1D;
    --verlauf-flaeche: linear-gradient(160deg, #1C1424 0%, #22190F 100%);
    --verlauf-bild: linear-gradient(160deg, #3A1030 0%, #3A2C1D 100%);
    --app-grund: #16202C;
    --app-flaeche: #1E2936;
    --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);
    --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;
  --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: #2A2118;
  --pfirsich-tief: #3A2C1D;
  --verlauf-flaeche: linear-gradient(160deg, #1C1424 0%, #22190F 100%);
  --verlauf-bild: linear-gradient(160deg, #3A1030 0%, #3A2C1D 100%);
  --app-grund: #16202C;
  --app-flaeche: #1E2936;
  --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);
  --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; }

/* ------------------------------------ Die Nutzen-Bühne am Scrollweg
   DIESELBE URSACHE WIE BEIM HELDEN (19.09.2026, Swen: „jetzt zittert es bei
   ‚was sie in der Hand haben' beim Runterscrollen bei den letzten Kacheln").

   Die Spur fuhr je Bild aus JavaScript. Die Buehne selbst ist geheftet, also
   steht sie still -- aber die Spur darin bewegt sich gegen den Scrollweg, und
   genau da faellt der eine Bildtakt Verzug auf.

   `view()` statt `scroll()`: die Fahrt haengt am Durchlauf DIESES Abschnitts,
   nicht am Weg des ganzen Dokuments. `contain 0% .. contain 100%` ist genau
   die Strecke, auf der die Huelle das Fenster vollstaendig fuellt -- also die
   Zeit, in der die Buehne geheftet steht.

   DIE STRECKE KANN CSS NICHT AUSRECHNEN: sie haengt an der Breite der Karten.
   `seite.js` setzt `--pan-strecke` einmal je Fenstergroesse; gefahren wird
   danach ohne JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes nutzen-fahrt { to { transform: translate3d(calc(-1 * var(--pan-strecke, 0px)), 0, 0); } }
    html.css-pan .nutzen { view-timeline-name: --nutzen; view-timeline-axis: block; }
    html.css-pan .nutzen-spur {
      animation: nutzen-fahrt linear both;
      animation-timeline: --nutzen;
      animation-range: contain 0% contain 100%;
    }
  }
}

/* ------------------------------------------------ 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;
  -webkit-tap-highlight-color: transparent;
}
@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%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
  caret-color: var(--akzent-tief);
}
::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: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
: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: 1.0625rem; 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: 42px; padding: 0 18px; font-size: 0.95rem; }
.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; }

@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--papier) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.kopf.gescrollt { border-bottom-color: var(--rand); }
@media (max-width: 899px) { .kopf { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.kopf-innen { max-width: var(--breite); margin: 0 auto; height: 66px; padding: 0 20px; display: flex; align-items: center; gap: 28px; }
.wortmarke { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.wortmarke span { color: var(--akzent-gross); }
.kopf-nav { display: none; gap: 26px; margin-left: auto; }
.kopf-nav a { text-decoration: none; color: var(--tinte-2); font-weight: 600; font-size: 0.95rem; 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: 0.95rem; 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; }
/* 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: 40px; 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; }
.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; counter-reset: menue; }
.menue-liste li { counter-increment: menue; 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;
}
.menue-liste a::before {
  content: counter(menue, decimal-leading-zero);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--akzent-gross); font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
}
.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: clamp(2.2rem, 1rem + 5.3vw, 4.9rem);
  text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.92; font-weight: 900;
}
/* „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) { .held-titel { font-size: 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: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); 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%);
  border-radius: 50%; filter: blur(60px); opacity: 0.9; pointer-events: none;
  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; will-change: transform; }
.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. */
  .held-titel { font-size: 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." */
  .schwebe-b { top: 190px; left: calc(50% - 265px); }
  /* 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% - 225px); } }
  .schwebe-c { top: 100px; left: calc(50% + 95px); }
  .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. */
@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(70px) scale(0.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes einflug-b { from { opacity: 0; transform: translate(-110px, 60px) rotate(-20deg); } to { opacity: 1; transform: translate(0, 0) rotate(-8deg); } }
@keyframes einflug-c { from { opacity: 0; transform: translate(110px, 60px) rotate(18deg); } to { opacity: 1; transform: translate(0, 0) rotate(7deg); } }
@keyframes glanz-auf { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 0.9; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .held-titel .zeile-innen { animation: zeile-auf 900ms var(--ease-out) both; }
  .held-titel .zeile:nth-child(2) .zeile-innen { animation-delay: 70ms; }
  .held-titel .zeile:nth-child(3) .zeile-innen { animation-delay: 140ms; }
  .held-titel .zeile:nth-child(4) .zeile-innen { animation-delay: 210ms; }
  .held-satz { animation: einblenden 700ms var(--ease-out) both; animation-delay: 260ms; }
  .held-knoepfe { animation: einblenden 700ms var(--ease-out) both; animation-delay: 340ms; }
  .glanz { animation: glanz-auf 1200ms var(--ease-out) both; }
  .telefon-a { animation: einflug-a 1000ms var(--ease-out) both; animation-delay: 160ms; }
  .telefon-b { animation: einflug-b 1100ms var(--ease-out) both; animation-delay: 320ms; }
  .telefon-c { animation: einflug-c 1100ms var(--ease-out) both; animation-delay: 440ms; }
}

/* Beim Scrollen driften die Telefone in drei Tiefen auseinander. */
@keyframes drift-a { to { transform: translateY(-90px); } }
@keyframes drift-b { to { transform: translateY(-40px) translateX(-30px); } }
@keyframes drift-c { to { transform: translateY(-160px) translateX(30px); } }

/* ------------------------------------------- Der Held auf dem Telefon
   AUF DEM COMPOSITOR, NICHT JE BILD AUS JAVASCRIPT (19.09.2026, nach Swens
   „die drei Kacheln zittern beim Runterscrollen").

   Der Scrollmotor rechnet jede Lage in JavaScript und schreibt sie ins
   transform. Am Schreibtisch faellt das nicht auf; auf dem Telefon scrollt
   der Browser auf einem eigenen Faden weiter, waehrend die Rechnung noch
   laeuft -- die Kachel steht ein Bild zu spaet und zittert sichtbar. Je
   staerker sie der Scrollrichtung entgegenlaeuft, desto deutlicher.

   Scrollgetriebene CSS-Animationen (`animation-timeline: scroll()`) laufen
   dort, wo auch das Scrollen laeuft. Sie koennen deshalb nicht nachhinken.
   Beide Kerne koennen es (Safari 26, Chromium); wo nicht, rechnet weiter der
   Motor -- der Rueckfall ist die alte, sichtbar ruckelnde, aber vorhandene
   Bewegung. `seite.js` laesst diese Elemente dann in Ruhe (Klasse `css-held`). */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes held-weicht { to { transform: translate3d(0, -148px, 0); opacity: 0; } }
    @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 { transform: translate(-50%, -50%) scale(1.36); opacity: 0.3; } }

    html.css-held [data-scroll="hero"] { animation: held-weicht linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
    html.css-held .schwebe-a { animation: drift-a-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.css-held .schwebe-b { animation: drift-b-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.css-held .schwebe-c { animation: drift-c-mobil linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    html.css-held .glanz { animation: glanz-weicht linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}


/* ------------------------------------------------------------ Laufband */
.laufband { overflow: hidden; 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; will-change: transform; }
.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); }
@keyframes lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: lauf 26s linear infinite; }
  @media (hover: hover) and (pointer: fine) { .laufband:hover .laufband-spur { animation-play-state: paused; } }
}

/* ------------------------------------------------------------ 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;
}
/* 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: 70ms; }
html.js:not(.ruhig) .problem-satz.auf .zeile:nth-child(3) .zeile-innen { animation-delay: 140ms; }
html.js:not(.ruhig) .problem-satz.auf .zeile:nth-child(4) .zeile-innen { animation-delay: 210ms; }
html.js .problem-satz .zeile, html.js .problem-antwort { will-change: transform, opacity; }
.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-antwort { max-width: 58ch; margin-top: 36px; color: var(--tinte-2); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); }
@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-antwort { 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; }

.story-innen { max-width: var(--breite); margin: 0 auto; padding: 96px 20px 40px; }
.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: clamp(2rem, 1.2rem + 3vw, 3.8rem); text-transform: uppercase; letter-spacing: -0.04em; transition: color 300ms ease; }
.schritt p { color: var(--app-text-2); max-width: 44ch; font-size: 1.12rem; }
.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, gestaffelt. */
@media (prefers-reduced-motion: no-preference) {
  .zeig { opacity: 0; transform: translateY(26px) scale(0.985); }
  .zeig.sichtbar { opacity: 1; transform: none; transition: opacity 650ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
}

/* ------------------------------------------------------------ Rundgang */
.rundgang { max-width: var(--breite); margin: 0 auto; padding: 120px 20px 40px; display: grid; gap: 36px; align-items: center; }
.rundgang-text p { color: var(--tinte-2); margin-top: 18px; font-size: 1.12rem; max-width: 46ch; }
.rundgang-text .knopf { margin-top: 8px; }
.rundgang .telefon-video { justify-self: center; width: 300px; }
.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; }
@media (min-width: 900px) { .rundgang { grid-template-columns: 1fr 1fr; padding: 140px 20px 60px; } .rundgang .telefon-video { width: 340px; } }

/* ---------------------------------------------------------- Funktionen */
.funktionen { padding: 60px 20px 90px; }
.funktionen-innen { max-width: var(--breite); margin: 0 auto; }
.funktionen-kopf { max-width: 760px; margin-bottom: 40px; }
.funktionen-kopf p { color: var(--tinte-2); margin-top: 18px; font-size: 1.12rem; max-width: 58ch; }
.bereich-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bereich-kacheln a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; padding: 20px 22px; min-height: 100%; border: 1px solid var(--rand); border-radius: var(--radius-karte); background: var(--flaeche); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten-klein); transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bereich-kacheln a:hover { transform: translateY(-3px); border-color: var(--tinte); box-shadow: var(--schatten); } }
.bereich-kacheln a:active, .bereich-kacheln a:hover:active { transform: scale(0.98); }
.bereich-kacheln a:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 3px; }
/* Umkehr: Fläche ist Tinte, Schrift ist Papier. Beides dreht sich in der
   Dunkelfassung mit, und das Verhältnis bleibt -- 17:1 hier wie dort. Stünde
   hier die feste App-Schrift, wäre die Ziffer im Dunkeln hell auf hell. */
.kachel-nr { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--tinte); color: var(--papier); font-weight: 800; font-variant-numeric: tabular-nums; }
.bereich-kacheln strong { font-size: 1.08rem; letter-spacing: -0.01em; }
.bereich-kacheln a > span:last-child { color: var(--tinte-2); font-size: 0.95rem; }
@media (min-width: 640px) { .bereich-kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bereich-kacheln { grid-template-columns: repeat(3, 1fr); gap: 18px; } .funktionen { padding: 80px 20px 110px; } }

/* -------------------------------------------------------------- Zahlen */
.zahlen { padding: 60px 20px; }
.zahlen-innen { max-width: var(--breite); margin: 0 auto; display: grid; gap: 28px; padding: 40px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.zahl strong { display: block; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--akzent-gross); }
.zahl > span:last-child { display: block; margin-top: 10px; color: var(--tinte-2); max-width: 30ch; } /* nur die Beschreibung -- ohne das > brach das %-Zeichen unter die Zahl */
.zahlen-quelle { color: var(--tinte-2); font-size: 0.85rem; grid-column: 1 / -1; }
@media (min-width: 900px) { .zahlen-innen { grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 56px 0; } }


/* ------------------------------------------------- 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: 80px 20px 60px; }
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); }
.held-titel .zeile, .held-satz, .held-knoepfe, .glanz { will-change: transform, opacity; }

/* Laufband: außen vom Scrollweg geschoben, innen von der Zeit. */
.laufband-schub { will-change: transform; }

/* Bildrahmen (allies float-img-frame): Rahmen wächst und blendet ein,
   das Bild darin zoomt heraus, danach Parallaxe. Grundzustand nur mit JS. */
.telefon { overflow: clip; }
html.js [data-scroll="rahmen"] { opacity: 0; will-change: transform, opacity; }
html.js [data-scroll="rahmen"] > img, html.js [data-scroll="rahmen"] > video { will-change: transform; transform-origin: 50% 50%; }
.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: 80px 20px 60px; }
.nutzen-titel { max-width: var(--breite); margin: 0 auto 36px; }
.nutzen-spur { display: grid; gap: 16px; max-width: var(--breite); margin: 0 auto; }
.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: hidden; display: flex; flex-direction: column; justify-content: center; padding: 66px 0 0 max(20px, (100vw - var(--breite)) / 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; will-change: transform; }
  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); }
  /* 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: 80px 20px 60px; }
.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 (`--app-flaeche`). 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); }
@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: 1.1rem; }
}

/* ------------------------------------------------------------ Einstieg */
.einstieg { max-width: var(--breite); margin: 0 auto; padding: 90px 20px; }
.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: 60ch; }
@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; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .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: 20px 12px; }
.preis-innen { max-width: var(--breite); margin: 0 auto; padding: 90px 20px; display: grid; gap: 40px; align-items: center; }
.preis-text { max-width: 54ch; }
.preis-text p { color: var(--tinte-2); margin-top: 18px; font-size: 1.12rem; }
.preis-hinweis { font-size: 0.95rem !important; }
.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-zahl); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; }
input[type="range"] { flex: 1; accent-color: var(--akzent-tief); height: 32px; }
.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; }
.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: 1.1rem; 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: 0.98rem; }
.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: 0.9rem; color: var(--tinte-2); }
@media (min-width: 900px) {
  .preis { margin: 40px 20px; }
  .preis-innen { grid-template-columns: 1fr 1fr; column-gap: 60px; padding: 110px 40px; }
  .preis-text { justify-self: end; }
  .preis-rechner { justify-self: start; }
}

/* -------------------------------------------------------------- Fragen */
.fragen { max-width: 860px; margin: 0 auto; padding: 110px 20px 80px; }
.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 var(--tinte); border-bottom: 2px solid var(--tinte); transform: translateY(-70%) rotate(45deg); transition: transform 240ms var(--ease-out); }
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: 62ch; }

/* --------------------------------------------------------------- Start */
.start { padding: 40px 12px 60px; }
.start-innen { max-width: var(--breite); margin: 0 auto; background: var(--papier-tief); border-radius: 40px; padding: 60px 20px 70px; display: grid; gap: 40px; }
.start-text p { color: var(--tinte-2); margin-top: 18px; font-size: 1.12rem; 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: 0.85rem; 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: 0.95rem; 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(--rand); border-radius: var(--radius-feld);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input::placeholder { color: var(--tinte-2); opacity: 0.75; }
input:focus, select:focus { outline: none; border-color: var(--akzent-tief); box-shadow: 0 0 0 4px color-mix(in oklab, var(--akzent) 26%, transparent); }
.feld.ungueltig input, .feld.ungueltig select, .wahl.ungueltig .wahl-option { border-color: var(--fehler-rand); }
.feld-hilfe { font-size: 0.88rem; color: var(--tinte-2); margin-top: 6px; }
.feld-fehler { font-size: 0.9rem; color: var(--fehler); margin-top: 6px; font-weight: 600; }
.wahl { margin-bottom: 16px; }
.wahl legend { font-size: 0.95rem; 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(--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: 0.95rem; 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: 0.98rem; }
/* 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: 60px 20px 80px; }
  .start-innen { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 60px; padding: 80px 60px 90px; }
  .start-text { max-width: 520px; }
  .formular { justify-self: end; }
}

/* ---------------------------------------------------------------- Fuß */
.fuss { padding: 36px 20px 48px; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; color: var(--tinte-2); font-size: 0.95rem; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.fuss-nav a { text-decoration: none; }
.fuss-nav a:hover { color: var(--tinte); text-decoration: underline; }

/* ------------------------------------------------------ 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; }
  .stufen-linie path { stroke-dashoffset: 0; }
  .buehne-bild { transition: opacity 200ms ease; transform: none; }
}