@charset "utf-8";

/* ===========================================================================
   RecTake — Website-Stylesheet
   ---------------------------------------------------------------------------
   Jeder Farbwert steht woertlich in src/theme/tokens.ts. Keine neue Farbe.
   Keine externe Ressource, kein @import, kein Font-Download, kein Fremdhost.

   Aufbau
     1  Tokens
     2  Grundgeruest und Grundelemente
     3  Kopfzeile
     4  Wiederverwendbare Bausteine (Pill, Knopf, Karte, Telefon, Marke)
     5  Startseite: Hero
     6  Startseite: Belegzeile, Schritte, Merkmalsbloecke
     7  Startseite: Probierfeld
     8  Startseite: Dunkle Flaeche
     9  Startseite: Abgrenzung und Vergleich
    10  FAQ
    11  Schluss-Aufruf, Fusszeile, feste Leiste
    12  Unterseiten (Rechtstexte, Blog)
    13  Bewegung, Sichtbarwerden, Bewegungssperre
   =========================================================================== */

/* --------------------------------------------------- 1. Tokens (tokens.ts) */

:root {
  color-scheme: light dark;

  /* colors.light — woertlich aus src/theme/tokens.ts
     ---------------------------------------------------------------------
     **Die Rollen sind am 30.08.2026 getauscht, die Werte nicht.**

     Rueckmeldung: *"mach diesen cremefarbenen hintergrund bitte weg auf der
     website es soll mehr weiss sein bzw. eine form von weiss."*

     Die Seite stand auf `#F6F1EA` -- dem Grund der App. Das war konsequent
     gedacht (die Website zeigt die App, also traegt sie deren Farbe) und im
     Ergebnis trotzdem falsch: In der App ist das Creme der *Untergrund*
     hinter Karten, auf einer Website wird daraus eine grosse, flaue Flaeche.

     Jetzt traegt Weiss den Grund, und das Creme ist zum **Band** geworden --
     es taucht noch auf, aber als Abschnitt, nicht als Dauerzustand. Damit
     bleibt die Regel dieser Datei unangetastet: Es ist kein neuer Farbwert
     dazugekommen, nur eine andere Zuordnung. */
  --bg: #FFFFFF;
  --surface: #FFFCF7;
  --raised: #FFFFFF;
  /* Der alte Grund. Nur noch fuer Abschnitte, die sich absetzen sollen. */
  --band: #F6F1EA;
  /*
     Die Kante an Objekten -- Karten, Pillen, Schritte, Aufklapper.

     Auf Creme trug `--border` (#E7DFD4) genug Kontrast, um eine Karte
     abzugrenzen. Auf Weiss verschwindet dieselbe Linie fast: Der Grund ist
     heller geworden, die Linie nicht. Zusammen mit *"die grafiken sollen
     BOLDER sein"* bekommen Objekte deshalb eine kraeftigere Kante --
     derselbe Wert wie `--faint`, nur in einer eigenen Rolle, damit
     Trennlinien (Tabellenzeilen, `hr`, Abschnittsregeln) leise bleiben
     duerfen. Eine Kante und eine Trennung sind nicht dasselbe.
  */
  --edge: #A79E95;
  --text: #1E1B18;
  --muted: #6A615A;
  --faint: #A79E95;
  /**
   * Text in der leisesten Stufe. `--faint` selbst liegt bei 2,35 : 1 auf
   * `--bg` und darf deshalb keinen Text tragen -- es bleibt die Farbe fuer
   * Striche, Trenner und Zeichen. Dieser Wert erreicht 4,7 : 1 und haelt
   * trotzdem sichtbar Abstand zu `--muted`.
   */
  --faint-text: #736A62;
  --accent: #1F5138;
  --accent-text: #F4F8F5;
  --positive: #2B7A51;
  --negative: #A32B3F;
  --border: #E7DFD4;

  /* Kategorietoene — nur als Tuepfelchen an Kategoriezeichen, nie als Flaeche */
  --cat-supplement: #7A6BB8;
  --cat-medication: #4A8FB0;
  --cat-food: #C08A3E;
  --cat-drink: #3E9B8F;
  --cat-caffeine: #8A6244;
  --cat-symptom: #B34A6E;

  /* Die dunkle Flaeche. colors.dark aus derselben Datei — die App bringt ihr
     Near-Black also selbst mit; hier ist es kein zweites Farbschema, sondern
     ein Abschnitt, der die Nachtseite der App zeigt. */
  --ink: #141210;
  --ink-surface: #1F1B18;
  --ink-raised: #2A2521;
  --ink-text: #F5EFE7;
  --ink-muted: #A2988E;
  --ink-faint: #6E655D;
  --ink-border: #332C27;
  --ink-accent: #4FA97B;

  --frame: #1A1613;               /* Telefonrahmen */
  --shadow-tint: 58, 36, 22;      /* #3A2416 */

  --shadow-soft: 0 1px 2px rgba(var(--shadow-tint), .04),
                 0 4px 12px rgba(var(--shadow-tint), .05);
  --shadow-lifted: 0 2px 4px rgba(var(--shadow-tint), .05),
                   0 12px 28px rgba(var(--shadow-tint), .09);
  --shadow-floating: 0 4px 8px rgba(var(--shadow-tint), .06),
                     0 24px 56px rgba(var(--shadow-tint), .14);

  /* spacing */
  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px; --s-base: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-xxxl: 64px;

  /* radii */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px;
  --r-card: 24px; --r-xl: 32px; --r-xxl: 40px; --r-pill: 999px;

  /* durations */
  --t-instant: 90ms; --t-fast: 160ms; --t-base: 240ms;
  --t-slow: 400ms; --t-pulse: 1400ms;

  /* easing — die einzigen zwei Kurven */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.42,0,.58,1);

  /* ---------------------------------------------------------------------
     Systemschrift -- und was einer eigenen im Weg steht.

     **Kein Font von einem Fremdhost.** Die erste Verbindung nach draussen
     waere auf der Seite einer App, die mit "kein Tracking" wirbt, der
     Widerspruch, der alles danach entwertet -- und Google Fonts per `<link>`
     ist in Deutschland zusaetzlich ein bekanntes Abmahnrisiko, weil dabei
     die IP-Adresse des Besuchers uebertragen wird.

     **Eine selbst gehostete Schrift waere dagegen unproblematisch** und ist
     hier ausdruecklich erwuenscht (Wunsch vom 30.08.2026: "die schriftart
     eine besondere"). Sie fehlt nur, weil dafuer eine Datei noetig ist:
     Auswahl und Lizenz sind eine Entscheidung des Betreibers, keine, die
     ein Stylesheet treffen kann.

     Zum Einbauen sind es zwei Handgriffe:

       1. Die Dateien nach `website/assets/fonts/` legen (woff2 reicht;
          fuer eine variable Schrift genuegt eine einzige Datei).
       2. Den Block unten einkommentieren und den Namen vorne in
          `--font-display` schreiben.

     ```
     @font-face {
       font-family: "RecTake Display";
       src: url("../fonts/display.woff2") format("woff2");
       font-weight: 400 900;
       font-display: swap;
     }
     ```

     `font-display: swap` ist Absicht: Lieber die Systemschrift eine
     Zehntelsekunde lang als eine leere Flaeche.
     --------------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Noto Sans",
          Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
          "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tnum: "tnum" 1, "lnum" 1;

  /* Layout */
  --page: 1180px;
  /* Die Spalte der Lese-Seiten: Kopf, Beitragsliste, Fliesstext, Aufklapper
     und Rechtstexte teilen sie sich, damit es nur eine linke Kante gibt.
     Genau eine Zahl -- wer sie aendert, verschiebt alle fuenf. */
  --lesespalte: 780px;
  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 9vw, 152px);
  --phone-w: clamp(232px, 26vw, 300px);
  --header-h: 68px;

  /* Typo — fluide Skala */
  --fs-hero:  clamp(2.625rem, 1.35rem + 5.10vw, 4.5rem);   /* 42 -> 72 */
  --fs-h2:    clamp(2.00rem, 1.15rem + 3.40vw, 3.50rem);   /* 32 -> 56 */
  --fs-h3:    clamp(1.375rem, 1.10rem + 1.10vw, 1.875rem); /* 22 -> 30 */
  --fs-h4:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 -> 21 */
  --fs-lead:  clamp(1.1875rem, 1.08rem + 0.50vw, 1.4375rem);/* 19 -> 23 */
  --fs-body:  clamp(1.0625rem, 1.02rem + 0.20vw, 1.125rem);/* 17 -> 18 */
  --fs-label: 0.9375rem;
  --fs-caption: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141210;
    --surface: #1F1B18;
    --raised: #2A2521;
    /* Im Dunkeln gibt es kein "mehr Weiss" -- dort war der Grund nie das
       Problem. Das Band setzt sich hier nach oben ab statt nach unten, mit
       dem Wert, den `--surface` ohnehin traegt. */
    --band: #1F1B18;
    /* Dieselbe Rolle wie im Hellen: die Kante an Objekten, eine Stufe
       kraeftiger als `--border`. Wert von `--faint`. */
    --edge: #6E655D;
    --text: #F5EFE7;
    --muted: #A2988E;
    --faint: #6E655D;
    /* Gemessen gegen die drei dunklen Flaechen: 5,68 : 1 auf `--bg`,
       5,20 auf `--surface`, 4,61 auf `--raised`. Der schlechteste Fall
       entscheidet -- eine Zeit-Angabe steht auf `--raised`. */
    --faint-text: #968C84;
    --accent: #4FA97B;
    --accent-text: #0B1F14;
    --positive: #4FA97B;
    --negative: #E0798A;
    --border: #332C27;

    --cat-supplement: #A99BE0;
    --cat-medication: #7CBBD8;
    --cat-food: #E0B071;
    --cat-drink: #6FC6B8;
    --cat-caffeine: #B98F6C;
    --cat-symptom: #DC819E;

    /* Auf dunklem Grund traegt die Flaeche die Hierarchie, nicht der Schatten. */
    --shadow-soft: none;
    --shadow-lifted: none;
    --shadow-floating: none;

    --frame: #332C27;

    /* Die "dunkle Flaeche" darf im Dunkelmodus nicht im Grund verschwinden —
       sie rueckt eine Stufe hoeher statt eine tiefer. */
    --ink: #0D0B09;
    --ink-surface: #1A1714;
  }
}

/* --------------------------------------------- 2. Grundgeruest, Grundtypen */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  Ueberschriften, seit dem 30.08.2026 deutlich schwerer.

  Rueckmeldung: *"die grafiken sollen BOLDER sein dazu die schriftart eine
  besondere."* Eine eigene Schrift kann diese Seite nicht laden -- die
  Begruendung steht an `--font-display`. Was sie kann, ist die Systemschrift
  so setzen, dass sie nicht nach Systemschrift aussieht: sehr schwer, sehr
  eng, sehr gross.

  820 statt 680, und die Laufweite deutlich enger.

  **Nachgemessen, damit hier nichts Falsches steht:** Auf Windows rendert
  `Segoe UI Variable Display` die Zeile bei 700, 820 und 900 auf exakt
  dieselbe Breite -- oberhalb von "fett" hat diese Schrift keine Achse mehr.
  Der Gewichtssprung ist dort also **wirkungslos**; sichtbar wird nur die
  engere Laufweite. Auf iOS und macOS (SF Pro) und ueberall dort, wo spaeter
  eine eigene Schrift liegt, greift er.

  Der Wert bleibt trotzdem stehen: Er ist richtig, er schadet nirgends, und
  er ist die Haelfte der Antwort auf *"die schriftart eine besondere"*. Die
  andere Haelfte kann diese Datei nicht liefern -- siehe `--font-display`.
*/
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 820;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); letter-spacing: -0.042em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.036em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.026em; }
h4 { font-size: var(--fs-h4); font-weight: 760; letter-spacing: -0.018em; }

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

a { color: inherit; }

a:where(:not([class])) {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast) var(--ease-out);
}
a:where(:not([class])):hover { opacity: .68; }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

b, strong { font-weight: 640; }

mark {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: inherit;
  padding: 0 .18em;
  border-radius: 4px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

.skip {
  /* `absolute` haette ihn bei gescrollter Seite an den Dokumentanfang
     gesetzt, also ausserhalb des Bildes. */
  position: fixed;
  left: -9999px;
  top: var(--s-sm);
  z-index: 200;
  background: var(--accent);
  color: var(--accent-text);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: var(--s-base); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

.measure { max-width: var(--measure); }

.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--tnum); }

.caption {
  font-size: var(--fs-caption);
  color: var(--faint-text);
  line-height: 1.5;
}

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-base);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
}

/* Der Zweck-Satz im Hero. Er steht in derselben Groesse wie der Lead darueber,
   aber in der vollen Textfarbe: Das Auge liest ihn als eigene Aussage und
   nicht als dritten Satz des Absatzes davor. */
.lead-zweck {
  margin-top: var(--s-base);
  color: var(--text);
}
.ink .lead-zweck { color: var(--ink-text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Platzhalter, die vor der Veroeffentlichung ersetzt werden muessen. */
.ph {
  background: color-mix(in srgb, var(--faint) 26%, transparent);
  border-radius: 4px;
  padding: 0 .3em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 3. Kopfzeile */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}
.site-header[data-scrolled] {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  min-height: var(--header-h);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  margin-right: auto;
}
.wordmark .mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid; place-items: center;
  flex: none;
}
.wordmark .mark svg { width: 16px; height: 16px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-base), 1.8vw, var(--s-lg));
}
.site-nav a {
  /* 25 px hohe Textlinks unterschreiten die 24-px-Mindestflaeche knapp; der
     Sprachwechsel "EN" war nur 19 px breit. Das Polster vergroessert die
     Flaeche, ohne die Zeile zu verschieben (der Streifen ist zentriert). */
  padding: 10px 4px;
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: 520;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text); }

/* `.site-nav a` ist spezifischer als `.btn` und hat dem Knopf in der
   Kopfzeile seine Textfarbe genommen: `--muted` auf `--accent` ergab
   1,02 : 1, die Beschriftung war praktisch unsichtbar. */
.site-nav a.btn { color: var(--btn-fg); }
.site-nav a.btn:hover { color: var(--btn-fg); }
.site-nav a.btn--ghost { color: var(--text); }

.nav-cta { display: inline-flex; }

@media (max-width: 959px) {
  .site-nav .nav-hide-sm { display: none; }
}
@media (max-width: 560px) {
  .site-nav .nav-hide-xs { display: none; }
}

/* ------------------------------------------------- 4. Bausteine */

/* 4.1 Pille — kleine, ehrliche Auszeichnung. Nie eine erfundene Zahl. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 7px 14px 7px 10px;
  border: 2px solid var(--edge);
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 540;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.pill svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.pill b { color: var(--text); font-weight: 640; }

/* 4.2 Knopf */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 52px;
  padding: 0 var(--s-lg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 620;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lifted); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-soft); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  /* `--border` liegt bei 1,18 : 1 gegen den Grund -- als Begrenzung eines
     Bedienelements verlangt WCAG 1.4.11 aber 3 : 1. */
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--surface); }

.btn--sm { min-height: 44px; padding: 0 var(--s-base); font-size: var(--fs-caption); }

/* 4.3 Store-Badges — nachgebaut, damit kein Bild von einem Fremdhost kommt. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin: var(--s-lg) 0 0;
  padding: 0;
  list-style: none;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.store:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); }
.store:active { transform: translateY(0); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.16; }
.store .store-small {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .72;
}
.store .store-big { font-size: 1rem; font-weight: 620; letter-spacing: -0.01em; }

/* 4.4 Karte */
.card {
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-lg), 3vw, var(--s-xl));
  box-shadow: var(--shadow-soft);
}

/* 4.5 Telefon — Rahmen um einen echten Screenshot. Keine erfundene Oberflaeche. */
.phone {
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 1080 / 2340;
  border-radius: calc(var(--phone-w) * .115);
  background: var(--frame);
  padding: calc(var(--phone-w) * .026);
  box-shadow: var(--shadow-floating);
  margin: 0;
  flex: none;
}
.phone::after {                     /* Glanzkante, damit der Rahmen Material wird */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .13);
  pointer-events: none;
}
.phone .screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--phone-w) * .092);
  overflow: hidden;
  background: var(--bg);
}
.phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Kein aufgemalter Kameraausschnitt: die Aufnahmen bringen die Statusleiste
   des echten Geraets mit. Ein zweiter Punkt darueber waere ein Telefon, das
   es nicht gibt. Die Klasse bleibt, damit das Markup nicht bricht. */
.phone .notch { display: none; }

/* 4.6 Abschnitts-Grundform */
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }

.section-head { margin-bottom: clamp(var(--s-xl), 5vw, var(--s-xxxl)); max-width: 46ch; }
.section-head .lead { margin-top: var(--s-base); }

/* Ab 960 px steht die Ueberschrift links und der Vorspann rechts daneben,
   an der Grundlinie ausgerichtet. Das fuellt die Zeile, ohne den Text zu
   zentrieren -- zentrierte Kurzzeilen sind das Erkennungszeichen der
   Vorlage, die diese Seite nicht sein soll. */
@media (min-width: 960px) {
  .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(var(--s-xl), 5vw, 80px);
    align-items: end;
  }
  /* Wo darunter nur eine schmale Textspalte folgt, liesse der Zweispalter
     ein leeres Rechteck stehen. Dort steht der Kopf einspaltig. */
  .section-head--stacked {
    display: block;
    max-width: 46ch;
  }
  .section-head--stacked .lead { margin-top: var(--s-base); }
  .section-head .eyebrow { grid-column: 1 / -1; }
  .section-head h2 { max-width: 19ch; }
  .section-head .lead { margin-top: 0; padding-bottom: .25em; }
}

.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ------------------------------------------------------ 5. Hero */

.hero {
  padding-top: clamp(var(--s-xxl), 6vw, 96px);
  padding-bottom: clamp(var(--s-xxl), 6vw, 104px);
  position: relative;
  overflow: hidden;
}

/* Ein einziges ruhiges Leuchten hinter dem Hero. Es ist derselbe Gruenton wie
   der Akzent, nur bei sehr geringer Deckkraft — keine zweite Farbe. */
.hero::before {
  content: "";
  position: absolute;
  top: -30vh; left: 50%;
  translate: -50% 0;
  width: min(1400px, 150vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(var(--s-xl), 4vw, 64px);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s-lg); }
/* Die zweite Zeile ist der Ertrag ("Finde raus, was dir gut tut") und damit
   laenger als die erste. Bei den vollen 80px der h1 passen rund 18 Zeichen in
   eine Zeile -- die Zeile braeche sonst mitten im Satz und die Hero waere
   doppelt so hoch, was die Store-Knoepfe unter die Falz schiebt. Deshalb eine
   Stufe kleiner, nicht kuerzer. */
.hero h1 .quiet {
  color: var(--muted);
  display: block;
  font-weight: 620;
  font-size: .62em;
  line-height: 1.12;
  margin-top: .12em;
}

.hero .lead { max-width: 46ch; }

.hero-note {
  margin-top: var(--s-base);
  font-size: var(--fs-label);
  color: var(--faint-text);
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  flex-wrap: nowrap;
}
.hero-note svg { width: 16px; height: 16px; color: var(--positive); }

/* Die Szene rechts: Telefon plus die Karten, die daneben entstehen. */
.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  --phone-w: clamp(250px, 28vw, 320px);
}

.hero-stage .phone { rotate: 2.5deg; }

/* Die zwei Karten liegen ueber dem Telefon, aber nicht ueber dem
   Aufnahmeknopf: der ist das Zeichen der App und darf nicht halb verdeckt
   sein. Deshalb sitzen sie auf Hoehe der mittleren Routinenkarte. */
.hero-cards {
  position: absolute;
  left: -13%;
  bottom: 27%;
  display: grid;
  gap: 10px;
  width: min(260px, 62%);
  z-index: 3;
}

/* Eine nachgebaute Eintragszeile. Sie zeigt die Form, die die App benutzt —
   Name, Menge, Uhrzeit, Zeichen — und behauptet nichts darueber hinaus.

   Reihenfolge am 30.08.2026 gedreht: In der App steht das Zeichen seit diesem
   Tag rechts am Rand, weil der Text die Auskunft traegt und das Zeichen nur
   der Wiedererkennung dient. Eine Website, die die alte Form zeigt, waere
   eine Falschaussage ueber das Produkt — und zwar die peinlichste Sorte, weil
   sie beim ersten Start auffliegt. */
.entry {
  display: grid;
  grid-template-columns: 1fr auto 34px;
  align-items: center;
  gap: var(--s-md);
  padding: 11px 14px;
  background: var(--raised);
  border: 2px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lifted);
}
.entry .glyph {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cat, var(--accent)) 12%, var(--surface));
  color: var(--cat, var(--accent));
}
.entry .glyph svg { width: 19px; height: 19px; }
.entry .name { font-size: var(--fs-label); font-weight: 600; line-height: 1.25; }
.entry .sub { font-size: var(--fs-caption); color: var(--muted); }
.entry .time {
  font-size: var(--fs-caption);
  color: var(--faint-text);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 2px;
}

/* Ab hier ist der Hero gestapelt. Dann stehen die Karten unter dem Telefon
   statt darueber: `right: -4%` bezoege sich sonst auf die volle Seitenbreite
   und klebte sie an den Fensterrand -- gemessen 2 px Rest bei 600 px, waehrend
   jedes andere Element 20 bis 48 px Steg einhaelt. Ausblenden waere die
   falsche Loesung: die Karten sind die Uebersetzung "gesprochener Satz ->
   Eintrag" und damit die halbe Bildidee. */
@media (max-width: 959px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-xxl); }
  .hero-stage {
    --phone-w: clamp(230px, 40vw, 300px);
    display: grid;
    justify-items: center;
    gap: var(--s-base);
  }
  .hero-stage .phone { rotate: 0deg; }
  .hero-cards {
    position: static;
    inset: auto;
    /* Genau so breit wie das Telefon darueber: die Karten sind dessen
       Fortsetzung, nicht ein zweites Element. */
    width: var(--phone-w);
    max-width: 100%;
  }
}

/* --------------------------------- 6. Belege, Schritte, Merkmalsbloecke */

/* 6.1 Belegzeile — vier Tatsachen, jede nachpruefbar. */
.facts {
  border-block: 1px solid var(--border);
  padding-block: clamp(var(--s-lg), 3vw, var(--s-xl));
}
.facts ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-lg);
}
.facts li { display: flex; gap: var(--s-md); align-items: flex-start; }
.facts .ico {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
}
.facts .ico svg { width: 19px; height: 19px; }
.facts b { display: block; font-size: var(--fs-label); font-weight: 620; }
.facts span { font-size: var(--fs-caption); color: var(--muted); line-height: 1.45; max-width: 34ch; }

@media (max-width: 959px) { .facts ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts ul { grid-template-columns: 1fr; gap: var(--s-base); } }

/* 6.2 Drei Schritte */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--s-base), 2vw, var(--s-lg));
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(var(--s-lg), 2.6vw, var(--s-xl));
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: var(--r-card);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: var(--s-base);
}
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--s-sm); }
.step p { color: var(--muted); font-size: var(--fs-label); margin: 0; }

@media (max-width: 959px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps > :last-child { grid-column: auto; }
}

/* 6.3 Merkmalsblock — Text und Telefon, abwechselnd */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-xl), 6vw, 96px);
  align-items: center;
  padding-block: clamp(var(--s-xxl), 6vw, 104px);
}
.feature + .feature { border-top: 1px solid var(--border); }
.feature:nth-child(even) .feature-media { order: -1; }

.feature-media { display: flex; justify-content: center; }

.feature h3 { margin-bottom: var(--s-base); }
.feature p { color: var(--muted); max-width: 58ch; }
.feature .eyebrow { color: var(--accent); }

.feature ul {
  list-style: none;
  margin: var(--s-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
}
.feature ul li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-md);
  align-items: start;
  font-size: var(--fs-label);
}
.feature ul svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }

@media (max-width: 959px) {
  .feature { grid-template-columns: 1fr; gap: var(--s-xl); }
  .feature:nth-child(even) .feature-media { order: 0; }
}

/* ------------------------------------------------ 7. Probierfeld */

.demo {
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: var(--r-xxl);
  padding: clamp(var(--s-lg), 4vw, var(--s-xxl));
  box-shadow: var(--shadow-soft);
}

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-lg), 4vw, var(--s-xxl));
  /* Nicht `start`: die rechte Spalte war 274 px hoch neben 629 px links und
     liess 355 px Loch in der auffaelligsten Karte der Seite. Das Feld ist
     das Gegenueber der Satzliste, also so hoch wie sie. */
  align-items: stretch;
}

/* Die rechte Spalte traegt die Hoehe selbst: Statuszeile fest, Kasten
   darunter dehnbar. `height: 100%` am Kasten haette die Statuszeile
   obendrauf gerechnet und ihn aus der Zelle geschoben. */
.demo-grid > div:last-child { display: grid; grid-template-rows: auto 1fr; }

.demo-choices { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; gap: var(--s-md); }

.say {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-base) var(--s-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.say:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.say[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--raised));
}
.say .q { color: var(--faint-text); flex: none; }
.say .wave {
  flex: none;
  width: 20px; height: 20px;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.say[aria-pressed="true"] .wave { opacity: 1; }

.demo-out {
  min-height: 240px;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-md);
  align-content: center;
  background: var(--band);
}
.demo-out[data-empty] { align-content: center; justify-items: center; text-align: center; }
.demo-out .hint { color: var(--faint-text); font-size: var(--fs-label); max-width: 28ch; }

.demo-out .entry {
  opacity: 0;
  translate: 0 10px;
  animation: card-in var(--t-slow) var(--ease-out) forwards;
}
@keyframes card-in { to { opacity: 1; translate: 0 0; } }

.demo-status {
  font-size: var(--fs-caption);
  color: var(--muted);
  display: flex; align-items: center; gap: var(--s-sm);
}
.demo-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--positive);
  flex: none;
}

@media (max-width: 959px) { .demo-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------- 8. Dunkle Flaeche */

.ink {
  background: var(--ink);
  color: var(--ink-text);
  --surface: var(--ink-surface);
  --raised: var(--ink-raised);
  --text: var(--ink-text);
  --muted: var(--ink-muted);
  --faint: var(--ink-faint);
  /* Ohne diese Zeile behielte die leiseste Textstufe ihren hellen Wert
     und laege auf der dunklen Flaeche bei 3,5 : 1. */
  --faint-text: #A2988E;
  --border: var(--ink-border);
  --accent: var(--ink-accent);
  --accent-text: #0B1F14;
  --shadow-soft: none;
  --shadow-lifted: none;
  --shadow-floating: 0 24px 60px rgba(0, 0, 0, .45);
  border-radius: var(--r-xxl);
  overflow: hidden;
}

/* Im Dunkelmodus liegt die Flaeche nur eine Nuance unter dem Seitengrund.
   Ohne Haarlinie waere nicht zu erkennen, dass hier ein eigener Abschnitt
   beginnt -- und das ist die einzige Geste, die sich diese Seite erlaubt. */
@media (prefers-color-scheme: dark) {
  .ink { border: 1px solid var(--ink-border); }
}
.ink .lead { color: var(--ink-muted); }
/* Ueberall dort, wo eine Ueberschrift ihren Vorspann direkt traegt und
   nicht in einem .section-head sitzt. */
h2 + .lead { margin-top: var(--s-lg); }

.ink-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(var(--s-xl), 5vw, 80px);
  align-items: center;
  padding: clamp(var(--s-xl), 5vw, 88px);
}

.ink dl {
  margin: var(--s-xl) 0 0;
  display: grid;
  gap: var(--s-lg);
}
.ink dt {
  font-weight: 620;
  font-size: var(--fs-label);
  display: flex; align-items: center; gap: var(--s-sm);
}
.ink dt svg { width: 20px; height: 20px; color: var(--ink-accent); flex: none; }
.ink dd { margin: 4px 0 0 28px; color: var(--ink-muted); font-size: var(--fs-label); }

.ink-figure {
  display: grid;
  gap: var(--s-md);
  justify-items: center;
}

/* --------------------------------------------------- Der Beispielbericht
   Das Blatt ist Text, kein Bild. Drei Gruende: es waechst mit der Schrift
   des Lesers mit, es bleibt im Dunkelmodus Papier (ein PDF hat keinen
   Dunkelmodus -- DESIGN.md 26.9), und eine Suchmaschine kann es lesen.

   Die Zeilen darin stehen woertlich so im echten Bericht. Erzeugt hat sie
   `buildBerichtHtml` aus `src/features/export/internal/bericht.ts` fuer eine
   erfundene Woche; nachgebaut ist hier nichts. Wer die Zahlen anfasst, ohne
   den Bericht neu laufen zu lassen, macht aus dem Beispiel eine Behauptung. */
.bericht-grid {
  display: grid;
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: start;
}
@media (min-width: 860px) {
  .bericht-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.blatt {
  background: #FFFFFF;
  color: #1E1B18;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(30, 27, 24, .05), 0 12px 32px -18px rgba(30, 27, 24, .35);
  padding: clamp(var(--s-lg), 4vw, var(--s-xxl));
  font-size: var(--fs-label);
  line-height: 1.5;
}
.blatt-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  flex-wrap: wrap;
  padding-bottom: var(--s-md);
  border-bottom: 2px solid #1E1B18;
}
.blatt-kopf .eyebrow { margin: 0 0 2px; color: #6A615A; }
.blatt-kopf h3 { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); }
/* Rechtsbuendig nur, solange die beiden Spalten nebeneinander stehen.
   Umgebrochen saehe eine rechtsbuendige volle Zeile aus wie ein Fehler. */
.blatt-kopf p { margin: 0; color: #6A615A; }
@media (min-width: 560px) { .blatt-kopf p { text-align: right; } }
.blatt-kopf b { color: #1E1B18; }

.blatt h4 {
  margin: var(--s-lg) 0 var(--s-sm);
  font-size: var(--fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6A615A;
}

/* Der Balken zeigt Anteile, keine Bewertung: drei Zahlen, die sich zu allen
   erfassten Befinden addieren. Die Breiten stehen im `style`, weil sie Daten
   sind und keine Gestaltung. */
.blatt-skala { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: var(--s-sm) 0; }
.blatt-skala i { display: block; }
.blatt-legende { display: flex; gap: var(--s-md); flex-wrap: wrap; color: #6A615A; }
.blatt-legende span { display: inline-flex; align-items: center; gap: 6px; }
.blatt-legende i { width: 8px; height: 8px; border-radius: 999px; }
.blatt-schnitt { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 700; }
.blatt-schnitt small { font-size: var(--fs-label); font-weight: 500; color: #6A615A; margin-left: 6px; }

.blatt-auffaellt { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-md); }
.blatt-auffaellt li { padding-left: var(--s-md); border-left: 2px solid var(--border); }
.blatt-auffaellt b { font-weight: 640; }
.blatt-auffaellt span { display: block; color: #6A615A; }

.blatt-fuss {
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--border);
  color: #6A615A;
}

/* Die drei Punkte neben dem Blatt. Bewusst keine Karten: `.nots` ist fuer
   vier kurze Kacheln nebeneinander gebaut, hier steht die Liste in einer
   halbbreiten Spalte und jede Ueberschrift braeche dreizeilig um. */
.bericht-punkte { margin: var(--s-lg) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-lg); }
.bericht-punkte li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-md); }
.bericht-punkte svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.bericht-punkte b { display: block; margin-bottom: 2px; }
.bericht-punkte p { margin: 0; color: var(--muted); font-size: var(--fs-label); }

/* Der Weg der Aufnahme, als Diagramm statt als Behauptung. */
.route {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--ink-border);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  padding: var(--s-lg);
}
.route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.route li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-md);
  padding-bottom: var(--s-lg);
  position: relative;
  font-size: var(--fs-label);
}
.route li:last-child { padding-bottom: 0; }
.route li::before {
  content: "";
  position: absolute;
  left: 10px; top: 22px; bottom: 2px;
  width: 2px;
  background: var(--ink-border);
}
.route li:last-child::before { display: none; }
.route .node {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink-accent);
  background: var(--ink);
  display: grid; place-items: center;
  z-index: 1;
}
.route .node svg { width: 12px; height: 12px; color: var(--ink-accent); }
.route b { display: block; font-weight: 620; }
.route span { color: var(--ink-muted); font-size: var(--fs-caption); line-height: 1.45; }

@media (max-width: 959px) { .ink-grid { grid-template-columns: 1fr; } }

/* -------------------------------- 9. Abgrenzung und Vergleich */

.nots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--s-base), 2vw, var(--s-lg));
}
.not {
  padding: clamp(var(--s-lg), 2.4vw, var(--s-xl));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.not h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--s-sm);
  display: flex; align-items: center; gap: var(--s-md);
}
.not h3 svg { width: 22px; height: 22px; color: var(--faint); flex: none; }
.not p { color: var(--muted); font-size: var(--fs-label); margin: 0; max-width: 58ch; }

@media (max-width: 640px) { .nots { grid-template-columns: 1fr; } }

/* Der Vergleich sitzt auf `--surface`. Es ist der dritte und letzte
   Flaechenwechsel der Seite (Belegzeile, dunkle Flaeche, hier) und der
   einzige in der hinteren Haelfte -- ohne ihn laufen 5500 px auf demselben
   Grund durch. */
.tinted {
  background: var(--band);
  border-block: 1px solid var(--border);
}
.tinted .compare th, .tinted .compare td { border-bottom-color: var(--bg); }
.tinted .compare thead th { border-bottom-color: var(--text); }
.tinted .compare .col-hi { background: color-mix(in srgb, var(--accent) 11%, var(--band)); }

/* Vergleichstabelle: Aufwand pro Eintrag. */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-label);
}
/* Ein Bereich, der waagerecht scrollt, braucht einen Tastaturfokus --
   sonst kommt niemand ohne Zeigegeraet zur zweiten Haelfte der Tabelle. */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.compare-scroll:focus-visible, .table-scroll:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.compare th, .compare td {
  padding: var(--s-base) var(--s-lg);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.compare thead th {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 620;
  border-bottom-color: var(--text);
}
.compare tbody th { font-weight: 560; color: var(--text); }
.compare td { color: var(--muted); }
.compare .yes { color: var(--accent); font-weight: 600; }
.compare .col-hi {
  background: color-mix(in srgb, var(--accent) 11%, var(--bg));
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 32%, transparent);
}
.compare thead th.col-hi { border-radius: var(--r-md) var(--r-md) 0 0; }
.compare tbody tr:last-child .col-hi { border-radius: 0 0 var(--r-md) var(--r-md); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare thead th:nth-child(2), .compare tbody td:nth-child(2) { white-space: nowrap; }

/* ------------------------------------------------------------ 10. FAQ */

.faq-layout { display: grid; gap: clamp(var(--s-xl), 4vw, 72px); }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.38fr); align-items: start; }
  .faq-layout > .section-head {
    margin-bottom: 0;
    display: block;
    max-width: none;
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
  /* Eine Stufe kleiner als sonst: in der schmalen Spalte braecht die
     volle H2-Groesse in fuenf Zeilen um. */
  .faq-layout > .section-head h2 {
    max-width: 18ch;
    font-size: clamp(1.875rem, 1.10rem + 2.20vw, 2.625rem);
  }
  .faq-layout > .section-head .lead { margin-top: var(--s-base); max-width: 26ch; }
}

.faq { display: grid; gap: var(--s-md); }
.faq .answer { max-width: none; }

.qa {
  border: 2px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.qa[open] { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); box-shadow: var(--shadow-soft); }

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-lg) var(--s-xl) var(--s-lg) var(--s-lg);
  display: flex;
  align-items: center;
  gap: var(--s-base);
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.012em;
  color: var(--text);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.qa[open] summary::after { rotate: -135deg; translate: 0 3px; border-color: var(--accent); }
.qa summary:hover::after { border-color: var(--accent); }

.qa .answer {
  padding: 0 var(--s-xl) var(--s-lg) var(--s-lg);
  color: var(--muted);
  font-size: var(--fs-label);
  max-width: 62ch;
}
.qa .answer p + p { margin-top: .8em; }

/* ------------------------- 11. Schluss-Aufruf, Fusszeile, feste Leiste */

.closer {
  text-align: center;
  padding-block: clamp(var(--s-xxxl), 9vw, 152px);
}
.closer h2 { max-width: 18ch; margin-inline: auto; }
.closer .lead { margin: var(--s-lg) auto 0; }
.closer .badges { justify-content: center; margin-top: var(--s-xl); }

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(var(--s-xl), 5vw, var(--s-xxxl)) var(--s-xxl);
  font-size: var(--fs-label);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-lg), 4vw, var(--s-xxl));
  margin-bottom: var(--s-xxl);
}
.footer-grid h3 {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 620;
  color: var(--faint-text);
  margin-bottom: var(--s-base);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { text-decoration: none; color: var(--muted); }
.footer-grid a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-about p { color: var(--muted); font-size: var(--fs-label); max-width: 34ch; }
.footer-about .wordmark { margin-bottom: var(--s-md); }

.footer-legal { display: grid; gap: var(--s-md); border-top: 1px solid var(--border); padding-top: var(--s-lg); }
.disclaimer { color: var(--faint-text); font-size: var(--fs-caption); line-height: 1.55; max-width: 56ch; margin: 0; }

/* Vier feste Spalten liessen "Datenschutzerklaerung" bei 775 px um 17 px aus
   der Inhaltsspalte laufen -- ein einzelnes langes Wort kann nicht umbrechen.
   `auto-fit` mit Mindestbreite regelt das ohne weiteren Bruchpunkt. */
@media (max-width: 959px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Feste Leiste auf Mobil — der vierte Impuls, erst ab dem zweiten Bildschirm. */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: var(--s-md);
  padding: var(--s-md) var(--gutter) calc(var(--s-md) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  translate: 0 110%;
  transition: translate var(--t-base) var(--ease-out);
}
.cta-bar[data-shown] { translate: 0 0; }
.cta-bar .btn { flex: 1 1 0; min-height: 48px; }

@media (max-width: 760px) {
  .cta-bar { display: flex; }
  body { padding-bottom: 84px; }
}

/* Sobald die feste Leiste steht, verschwindet der Knopf aus der Kopfzeile.
   Zweimal derselbe Aufruf auf 16 % der Bildschirmhoehe waere fuer eine
   Marke, die "wir schieben dich nicht an" schreibt, der falsche Ton.
   Das Merkmal setzt das Skript, wenn der Hero den Schirm verlaesst. */
@media (max-width: 760px) {
  html[data-bar] .nav-cta { display: none; }
}

/* ------------------------------------------------------ 12. Unterseiten */

.page-head {
  padding-block: clamp(var(--s-xxl), 7vw, 112px) clamp(var(--s-xl), 4vw, var(--s-xxxl));
  border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: var(--fs-h2); max-width: 20ch; }
.page-head .lead { margin-top: var(--s-base); }

/* Kopf und Inhalt teilen sich eine Spalte. Nicht ueber automatische Raender
   an den einzelnen Kindern -- die richten sich nach der Textlaenge und
   ergaben drei verschiedene linke Kanten auf einer Seite -- sondern ueber
   eine gemeinsame, mittige Spalte, in der alles linksbuendig steht. */
.page-head--narrow > .wrap {
  width: min(100% - 2 * var(--gutter), var(--lesespalte));
  margin-inline: auto;
}

.crumbs {
  display: flex; gap: var(--s-sm); align-items: center;
  font-size: var(--fs-caption); color: var(--faint-text);
  margin-bottom: var(--s-base);
  list-style: none; padding: 0;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-sm); color: var(--faint-text); }

/* Fliesstext auf Unterseiten */
.prose { max-width: var(--lesespalte); }
.prose h2 { font-size: var(--fs-h3); margin: 2.2em 0 .6em; }
.prose h3 { font-size: var(--fs-h4); margin: 1.8em 0 .5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose strong, .prose b { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; margin: 1.2em 0; }
.prose blockquote {
  margin: 1.8em 0;
  padding: var(--s-lg) var(--s-xl);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text);
}
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.6em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); margin: 1.6em 0; }
.prose th, .prose td { text-align: left; padding: var(--s-md); border-bottom: 1px solid var(--border); }
.prose th { font-weight: 620; }

/* Blog */
.posts { display: grid; gap: var(--s-lg); }
.post-card {
  display: grid;
  gap: var(--s-md);
  padding: clamp(var(--s-lg), 3vw, var(--s-xl));
  border: 2px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.post-card h2 { font-size: var(--fs-h3); }
.post-card p { color: var(--muted); margin: 0; }
.post-meta {
  display: flex; gap: var(--s-md); align-items: center;
  font-size: var(--fs-caption); color: var(--faint-text);
  flex-wrap: wrap;
}
.post-meta .tag {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  color: var(--muted);
}

/* --- Die Suchseite ---------------------------------------------------------
   Sie ist zuerst eine vollstaendige Liste aller Seiten und erst danach eine
   Suche: Ohne JavaScript steht alles da, mit JavaScript wird ausgeblendet,
   was nicht passt. Deshalb gibt es keinen Ladezustand und keinen leeren
   Anfang -- und keine Anfrage an einen fremden Suchdienst. */
.suchfeld {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  max-width: var(--lesespalte);
  margin: 0 auto var(--s-lg);
}
.suchfeld input {
  flex: 1 1 14rem;
  min-height: 48px;
  padding: 0 var(--s-md);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: var(--r-md);
}
.suchfeld input::placeholder { color: var(--faint-text); }
.suchfeld input:focus-visible { border-color: var(--accent); }
.suchstatus {
  max-width: var(--lesespalte);
  margin: 0 auto var(--s-lg);
  min-height: 1.4em;
}
.posts--suche .post-card { gap: var(--s-sm); padding: var(--s-lg); }
.posts--suche .post-card h2 { font-size: var(--fs-h4); }
.posts--suche .post-card[hidden] { display: none; }
/* Drei Angaben, nur durch eine Luecke getrennt, lasen sich als ein Satz.
   Dasselbe Zeichen wie in den Brotkrumen. */
.post-meta > * + *:not(.tag)::before {
  content: "·";
  margin-inline-end: var(--s-md);
  color: var(--faint-text);
}

.byline {
  display: flex; align-items: center; gap: var(--s-md);
  margin: var(--s-xl) 0 0;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
}
.byline .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem;
  flex: none;
}
.byline b { display: block; font-size: var(--fs-label); }
.byline span { font-size: var(--fs-caption); color: var(--faint-text); }

.note-box {
  margin: 2em 0;
  padding: var(--s-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: var(--fs-label);
  color: var(--muted);
}
.note-box b { color: var(--text); }

/* ----------------------------- 13. Bewegung und Bewegungssperre */

/* Sichtbarwerden. Sehr zurueckhaltend: 12 px und eine Blende, mehr nicht.
   Ohne JavaScript bleibt alles sichtbar — die Klasse wird erst gesetzt,
   wenn der Beobachter laeuft. */
[data-js] [data-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--t-slow) var(--ease-out),
              translate var(--t-slow) var(--ease-out);
}
[data-js] [data-reveal][data-shown] { opacity: 1; translate: 0 0; }

/* Der Pegel im Hero-Telefon. */
@keyframes bar {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
.rt-bar { transform-origin: center; animation: bar var(--t-pulse) var(--ease-in-out) infinite; }
.rt-bar:nth-child(1) { animation-delay: 0ms; }
.rt-bar:nth-child(2) { animation-delay: 160ms; }
.rt-bar:nth-child(3) { animation-delay: 80ms; }
.rt-bar:nth-child(4) { animation-delay: 240ms; }
.rt-bar:nth-child(5) { animation-delay: 120ms; }

@keyframes wave {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
.rt-wave { animation: wave 2s var(--ease-in-out) infinite; }
.rt-wave:nth-child(2) { animation-delay: 200ms; }
.rt-wave:nth-child(3) { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-js] [data-reveal] { opacity: 1; translate: none; }
  .btn:hover, .store:hover, .post-card:hover, .say:hover { transform: none; }
}

/* Druck: die Seite soll als Dokument lesbar bleiben. Wichtig ist die erste
   Zeile -- ohne sie drucken elf Bloecke als weisse Kaesten, weil ihr
   Ruhezustand `opacity: 0` ist und der Beobachter beim Drucken nicht mehr
   laeuft. */
@media print {
  [data-reveal] { opacity: 1 !important; translate: none !important; }

  :root {
    --bg: #fff; --surface: #fff; --raised: #fff;
    --text: #000; --muted: #333; --faint: #999; --faint-text: #555;
    --border: #bbb; --accent: #14361f; --accent-text: #fff;
    --shadow-soft: none; --shadow-lifted: none; --shadow-floating: none;
  }

  body { background: #fff; color: #000; }

  .site-header, .cta-bar, .hero-stage { display: none; }
  /* Nur die Simulation entfaellt, nicht ihre Ueberschrift und Erklaerung. */
  .demo-choices, .demo-out, .demo-status { display: none; }
  .demo { border: none; padding: 0; box-shadow: none; }

  /* Die dunkle Flaeche wuerde sonst eine ganze Seite schwarz einfaerben. */
  .ink { background: #fff; color: #000; border: 1px solid #bbb; }
  .ink .lead, .ink dd, .route span { color: #333; }

  .qa { break-inside: avoid; }
  .qa .answer { display: block !important; }
  .section { padding-block: 24px; }
}

/* ============================ 14. Was das Skript braucht ==================
   Alles hier hat einen Gegenpart in assets/js/spiel.js. Ohne Skript greift
   keine dieser Regeln — die Seite bleibt vollstaendig lesbar.
   ========================================================================= */

/* Kategorietoene fuer die Karten des Probierfelds. Alle Werte woertlich aus
   src/theme/tokens.ts; sie faerben ausschliesslich das Kategoriezeichen und
   toenen dessen Flaeche mit 12 % — nie Text, nie Rahmen. */
:root { --cat-mood: var(--muted); --cat-note: var(--muted); }

/* Die Zeile, die nachfragt statt zu raten. Gestrichelt, weil sie noch keine
   Tatsache ist — das ist der ehrlichste Zustand, den die App kennt. */
.entry--asks {
  border-style: dashed;
  box-shadow: none;
  background: var(--surface);
}
.entry--asks .name { font-weight: 500; color: var(--muted); }

/* Der Punkt vor der Statuszeile ist ein Knopf: 1,4 s halten und die Seite
   steht still. Wer nur tippt, bekommt eine Faehrte, sonst nichts. */
.still-dot {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: -13px 0 -13px -13px;      /* Trefferflaeche aus dem Textfluss holen */
  inline-size: 34px;
  block-size: 34px;
  position: relative;
  flex: none;
  cursor: pointer;
  touch-action: manipulation;
}
.still-dot::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: var(--r-pill);
  background: var(--positive);
}
.still-dot::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: var(--r-pill);
  background: var(--positive);
  opacity: .18;
  transform: scale(1);
}
.still-dot:focus-visible { outline-offset: -9px; border-radius: var(--r-pill); }

@media (prefers-reduced-motion: no-preference) {
  .still-dot[data-holding]::after {
    animation: hold var(--t-pulse) linear forwards;
  }
}
@keyframes hold { from { transform: scale(1); } to { transform: scale(3.2); } }

.still-note { margin: var(--s-sm) 0 0; min-height: 1.2em; }

/* Der Zustand "still". Nichts springt in den Endzustand — es haelt an, wo es
   gerade ist. Ein Sprung waere genau die Bewegung, die man abstellen wollte. */
[data-still], [data-still] *, [data-still] *::before, [data-still] *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
[data-still] { scroll-behavior: auto !important; }

/* Die Merkmalsbloecke sind ein eigener Container, damit `+ .feature` die
   Trennlinien setzen kann, ohne die Abschnittsueberschrift mitzuzaehlen. */
.features > .feature:first-child { padding-top: 0; }
.features > .feature:last-child { padding-bottom: 0; }

/* Die eigenstaendige FAQ-Seite fuehrt die Liste ohne Kopf daneben. Ueber die
   ganze Containerbreite gelesen wuerden die Fragen auseinanderlaufen. */
/* Auf den eigenstaendigen Lese-Seiten sitzt die Spalte in der Mitte. Links
   angeschlagen liess sie 260 bis 500 px tote Flaeche stehen -- die Seite sah
   aus, als waere das Layout abgebrochen. */
.posts { max-width: var(--lesespalte); margin-inline: auto; }
.section > .wrap > .prose,
article > .wrap > .prose { margin-inline: auto; }

/* ================================ 15. Rechtstexte =========================
   Die Seiten Datenschutz, Impressum, Haftungsausschluss und Konto loeschen
   sind Dokumente, keine Werbeflaechen. Sie bekommen eine schmale Spalte, eine
   ruhige Skala und sonst nichts. Klassen wie `.doc` und `.legal` stammen aus
   dem Bestand und bleiben, damit die Texte nicht angefasst werden muessen.
   ========================================================================= */

.wrap.legal {
  width: min(100% - 2 * var(--gutter), var(--lesespalte));
  margin-inline: auto;
  padding-block: clamp(var(--s-xxl), 7vw, 96px) var(--section);
}

.doc { font-size: var(--fs-body); }

.doc h1 {
  /* Dieselbe Stufe wie die Ueberschrift der redaktionellen Unterseiten --
     zwei Seiten derselben Website duerfen nicht unterschiedlich gross
     anfangen. */
  font-size: var(--fs-h2);
  letter-spacing: -0.028em;
  margin-bottom: var(--s-lg);
}
.doc .crumbs { margin-bottom: var(--s-lg); }
.doc h2 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  letter-spacing: -0.018em;
  margin: 2.4em 0 .6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border);
}
.doc h1 + h2 { border-top: none; padding-top: 0; margin-top: 1.4em; }
.doc h3 {
  font-size: var(--fs-h4);
  margin: 1.8em 0 .4em;
}
.doc h4 { font-size: var(--fs-label); margin: 1.4em 0 .3em; }

.doc p, .doc li { color: var(--muted); }
.doc strong, .doc b { color: var(--text); }
.doc ul, .doc ol { padding-left: 1.3em; margin: 1em 0; display: grid; gap: .45em; }
/* Die Brotkrumen sind eine Zeile, keine Liste mit Einzug — `.doc ol` haette
   sie sonst untereinander gestellt. */
.doc .crumbs { display: flex; padding-left: 0; margin: 0 0 var(--s-lg); gap: var(--s-sm); }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }

.doc pre, .doc address {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .875rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-base) var(--s-lg);
  margin: 1.2em 0;
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
  margin: 1.2em 0;
}
.doc th, .doc td {
  text-align: left;
  padding: var(--s-md);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--muted);
}
.doc th { color: var(--text); font-weight: 620; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2em 0; border-radius: var(--r-md); }
.table-scroll table { margin: 0; }

/* Rechtstexte benutzen `blockquote.note` fuer den einen Satz, der nicht
   uebersehen werden darf, und `.note-inline` fuer die halblaute Randbemerkung
   im Fliesstext. Beide standen bisher ohne Regel da und fielen auf den
   Browser-Standard zurueck -- ein eingerueckter Absatz ohne Kante. */
.doc blockquote,
.prose blockquote.note {
  margin: 1.8em 0;
  padding: var(--s-md) var(--s-lg);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}
.doc blockquote p:last-child,
.prose blockquote.note p:last-child { margin: 0; }
.doc blockquote p, .prose blockquote.note p { color: var(--text); }

.note-inline { color: var(--text); }

/* Der Entwurfshinweis. Er steht bewusst oben und ungeschminkt: ein Rechtstext,
   der noch nicht geprueft ist, muss das an der ersten Stelle sagen. */
.draft {
  border: 1px solid var(--border);
  border-left: 3px solid var(--negative);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  padding: var(--s-lg);
  margin: 0 0 var(--s-xl);
  font-size: var(--fs-label);
  color: var(--muted);
}
.draft > :first-child { margin-top: 0; }
.draft h2 {
  border: none;
  padding: 0;
  margin: 0 0 .4em;
  font-size: var(--fs-h4);
  color: var(--text);
}

/* Die alte Fusszeilen-Liste. Bleibt, solange eine Seite sie noch benutzt. */
.footer-links {
  list-style: none;
  margin: 0 0 var(--s-lg);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-lg);
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Eine Trennlinie und die Oberkante der naechsten Ueberschrift ergeben sonst
   zwei Striche mit einer Luecke dazwischen. */
.doc hr + h2 { border-top: none; padding-top: 0; margin-top: 1.2em; }

/* Die eigenstaendige FAQ-Seite ist eine Nachschlageseite, keine Erzaehlung.
   Sie hat deshalb echte Ueberschriften (nicht nur `summary`), und ihre
   Aufklapper schliessen einander nicht aus -- zwei Antworten nebeneinander
   lesen zu koennen ist auf einer Fragenseite der Normalfall. */
.faq-gruppen { display: grid; gap: clamp(var(--s-xl), 4vw, var(--s-xxxl)); max-width: var(--lesespalte); margin-inline: auto; }
.faq-gruppe > h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-lg);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--border);
}
.faq-gruppe .faq { max-width: none; }

/* Die Frage ist eine Ueberschrift, sieht aber aus wie vorher: `summary`
   traegt die Groesse, das `h3` darin gibt nur die Sprungmarke zurueck. */
.qa summary h3 {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  display: inline;
}

/* Der beste Satz der Seite stand als schmaler, grauer Absatz unter einem
   1180 px breiten Raster und sah aus wie eine vergessene Bildunterschrift.
   Jetzt steht er als Aussage: mittig, in `--text`, eine Stufe groesser. */
.verdict {
  margin: clamp(var(--s-xl), 5vw, var(--s-xxxl)) auto 0;
  /* Bei 26ch blieb kein Spielraum fuer gute Kanten: "bist / du" und
     "ist / ein Notizbuch". */
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 640;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: pretty;
}

/* Vier Abstandsklassen statt vierzehn Inline-Styles. Sie stehen fuer
   wiederkehrende Rollen, nicht fuer Zahlen: `tail` ist der Abschluss eines
   Abschnitts, `tail-sm` die Fussnote direkt unter einem Block. */
.tail    { margin-top: var(--s-xl); }
.tail-sm { margin-top: var(--s-base); }
.tail-md { margin-top: var(--s-lg); }
.tail-xl { margin-top: var(--s-xxl); max-width: 62ch; }
.head-sm { margin-bottom: var(--s-base); }
.route-note { max-width: 380px; text-align: center; }

/* Ein Kasten unter einer mittigen Spalte gehoert mittig darunter. */
.wrap > .note-box { margin-inline: auto; }

/* ------------------------------------------------ 14. Luft (09.09.2026) */
/*
   Rueckmeldung: "etwas mehr Whitespace nutzen und es so aehnlich wie cal.ai
   machen." Uebernommen ist die Grosszuegigkeit -- Abstaende zwischen den
   Abschnitten, Groesse der Hero-Zeile, weniger Text je Block. Nicht
   uebernommen sind Testimonials, Sternebewertungen und Nutzerzahlen; die
   Negativliste in ART-DIRECTION.md 8 gilt weiter, weil es nichts davon
   ehrlich gibt.

   Die Werte stehen hier als Ueberschreibungen statt an den Ursprungsstellen,
   damit die Aenderung an einem Ort nachlesbar ist. Reihenfolge im Stylesheet
   entscheidet bei gleicher Spezifitaet -- und dieser Block steht zuletzt.
*/
:root {
  --section: clamp(104px, 13vw, 224px);
}

.hero {
  padding-top: clamp(72px, 9vw, 160px);
  padding-bottom: clamp(88px, 11vw, 184px);
}
.hero h1 {
  font-size: clamp(2.875rem, 1.4rem + 5.6vw, 5rem);   /* 46 -> 80 */
  margin-bottom: var(--s-xl);
}
.hero .lead { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.hero .badges { margin-top: var(--s-xl); }
.hero-grid { gap: clamp(var(--s-xxl), 6vw, 96px); }

.section--tight { padding-block: calc(var(--section) * .78); }
.section-head { margin-bottom: clamp(var(--s-xxl), 7vw, 112px); }

.facts { padding-block: clamp(var(--s-xl), 4vw, var(--s-xxl)); }
.facts ul { row-gap: var(--s-xl); }

.steps { gap: clamp(var(--s-lg), 3vw, var(--s-xl)); }
.step { padding: clamp(var(--s-lg), 3vw, var(--s-xl)); }

.feature { padding-block: clamp(var(--s-xxl), 8vw, 144px); }
.features > .feature:first-child { padding-top: 0; }
.feature p { font-size: var(--fs-lead); }

.nots { gap: clamp(var(--s-lg), 3vw, var(--s-xl)); }
.not { padding: clamp(var(--s-lg), 3vw, var(--s-xl)); }
.verdict { margin-top: clamp(var(--s-xl), 5vw, var(--s-xxxl)); }

.closer { padding-block: clamp(112px, 14vw, 232px); }
.closer .badges { margin-top: var(--s-xxl); }
.site-footer { padding-top: clamp(var(--s-xxl), 6vw, 96px); }

/* ---------------------------------------------------------------- Warteliste
   Steht im Schlussabschnitt unter den Store-Knoepfen: Wer dort ankommt, will
   die App -- nur gibt es sie noch nicht. Die Karte hebt sich vom Abschnitt
   ab, ohne zu schreien; die einzige gefuellte Flaeche bleibt der Knopf.
   -------------------------------------------------------------------------- */
.warteliste {
  max-width: 34rem;
  margin: var(--s-xxl) auto 0;
  padding: var(--s-xl);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface, transparent);
  text-align: left;
}
.warteliste-titel { margin: 0 0 var(--s-sm); font-size: var(--fs-h3, 1.25rem); }
.warteliste .lead { margin: 0 0 var(--s-lg); }
.warteliste-label {
  display: block;
  margin-bottom: var(--s-xs);
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
.warteliste-zeile { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.warteliste-zeile input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--s-md) var(--s-base);
  font: inherit;
  color: var(--ink);
  background: var(--paper, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.warteliste-zeile input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.warteliste-zeile button {
  flex: 0 0 auto;
  padding: var(--s-md) var(--s-xl);
  font: inherit;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}
.warteliste-zeile button:disabled { opacity: 0.6; cursor: default; }
.warteliste-meldung { margin: var(--s-md) 0 0; font-size: var(--fs-label); }
/* Die Rueckmeldung traegt ihre Aussage in der Farbe -- aber nie nur darin:
   der Text sagt dasselbe, fuer alle, die den Unterschied nicht sehen. */
.warteliste-meldung[data-art='fertig'] { color: var(--ink-accent); }
.warteliste-meldung[data-art='fehler'] { color: var(--ink); font-weight: 600; }
.warteliste-meldung[data-art='warten'] { color: var(--ink-muted); }
/* Nach dem Eintragen bleibt die Bestaetigung stehen, das Feld verschwindet:
   ein zweites Mal eintragen muss niemand. */
.warteliste[data-fertig='ja'] form > *:not([data-warteliste-meldung]) { display: none; }
.warteliste .caption { margin-top: var(--s-md); }

/* ------------------------------------------------ Warteliste als Hauptaktion
   Solange die App nicht im Store ist, traegt die Warteliste den Schluss der
   Seite -- dort standen vorher zwei Knoepfe, die auf 404 zeigten. Sie darf
   deshalb aussehen wie ein Ziel und nicht wie ein Anhaengsel.
   -------------------------------------------------------------------------- */
.hero-cta { margin: var(--s-xl) 0 var(--s-sm); }
.knopf-gross {
  display: inline-block;
  padding: var(--s-base) var(--s-xxl);
  font-weight: 600;
  font-size: var(--fs-lead, 1.0625rem);
  color: var(--accent-text);
  background: var(--accent);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.knopf-gross:hover { opacity: 0.92; }
.knopf-gross:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero-stores-bald { max-width: 40ch; }

/* Der Kasten im Schlussabschnitt bekommt mehr Gewicht: eine eigene Flaeche
   statt nur eines Rahmens, und innen mehr Luft. */
.closer .warteliste {
  /* --surface ist das helle Papierweiss (#FFFCF7). Hier stand kurzzeitig
     --ink-surface -- das ist die DUNKLE Flaeche fuer dunkle Abschnitte, und
     der Kasten wurde damit fast schwarz. */
  background: var(--surface);
  border-color: var(--border);
  padding: clamp(var(--s-xl), 4vw, var(--s-xxl));
  text-align: center;
}
.closer .warteliste .warteliste-titel {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin-bottom: var(--s-base);
}
.closer .warteliste .lead { margin-inline: auto; max-width: 46ch; }
.closer .warteliste-label {
  /* Sichtbar bleibt sie fuer Screenreader; im zentrierten Kasten wuerde eine
     zweite linksbuendige Zeile ueber dem Feld die Ruhe zerschlagen. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.closer .warteliste-zeile { max-width: 30rem; margin-inline: auto; }
.closer .warteliste .caption { max-width: 44ch; margin-inline: auto; }