/* Check deine Reparatur — Landing
   Farben, Radien, Abstände, Dauern 1:1 aus lib/core/theme/ (siehe
   .claude/skills/cdr-design/). Bewusste Web-Adaption: die zwei
   Schattenstufen sind für große Marketing-Flächen etwas weicher/tiefer
   als die App-Werte — gleiche Zweistufigkeit, gleiche Low-Alpha-Idee.
   Kontraste: website/HANDOFF.md — berechnet, nicht geschätzt. */

/* ---------- Fonts (lokal, variabel, OFL) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Warme Neutraltöne */
  --paper: #FAF8F4;
  --surface: #FFFFFF;
  --sunken: #F3F0E9;
  --hint: #EFEAE0;
  --border: #E7E2D8;
  --border-card: #F0EDE5;
  --border-input: #948A76;
  /* Ink */
  --ink: #1F2A28;
  --ink-2: #52605D;
  --ink-3: #66736F;
  --ink-inverse: #FFFFFF;
  /* Türkis */
  --t-50: #EFFAF8;
  --t-100: #D7F4EF;
  --t-200: #A8E8DF;
  --t-300: #6ED8CB;
  --t-400: #34BFAF;
  --t-500: #0FA695;
  --t-600: #0C8578;
  --t-700: #0B6B61;   /* primary */
  --t-800: #0D554E;   /* pressed */
  --t-900: #0F4540;
  /* Semantik */
  --warn-fg: #7A5500;
  --warn-bg: #FBF0D9;
  --ok-fg: #1E6B3C;
  --ok-bg: #E1F3E6;
  /* Foto-Inszenierung */
  --photo-bg: #262220;
  --photo-stroke: #E9E2D2;
  --photo-strong: #F7F2E4;
  /* Typo */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Abstände (App-Skala) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;
  /* Radien (App) */
  --r-chip: 10px; --r-btn: 14px; --r-card: 20px; --r-dialog: 24px;
  /* Motion (App) */
  --d-fast: 150ms; --d-base: 250ms; --d-slow: 400ms; --d-entry: 700ms;
  --ease-entry: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  --ease-toggle: cubic-bezier(0.42, 0, 0.58, 1);     /* Flutter easeInOut */
  /* Schatten: weich, zweistufig — nie Material-Elevation */
  --shadow-card: 0 1px 2px rgba(31, 42, 40, 0.05), 0 10px 28px rgba(31, 42, 40, 0.07);
  --shadow-raised: 0 2px 6px rgba(31, 42, 40, 0.07), 0 18px 44px rgba(31, 42, 40, 0.11);
  /* Layout */
  --shell: 1120px;
  --measure: 660px;
  --header-h: 68px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--t-700); text-decoration: none; }
main a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
strong { font-weight: 650; }
svg { display: block; }
.mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.01em; }

:focus-visible {
  outline: 2px solid var(--t-600);
  outline-offset: 2px;
  border-radius: 6px;
}

.shell {
  width: min(var(--shell), 100% - clamp(32px, 6vw, 96px));
  margin-inline: auto;
}

/* Native Anker-Sprünge (ohne Lenis, z. B. Touch) landen sonst unterm Header */
[id] { scroll-margin-top: 84px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  background: var(--surface); color: var(--t-700);
  padding: 10px 16px; border-radius: var(--r-btn);
  box-shadow: var(--shadow-raised);
  transform: translateY(-64px); opacity: 0;
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* ---------- Typo-Rollen ---------- */
.eyebrow {
  font-size: 13px; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-700);
}
.eyebrow--dark { color: var(--t-200); }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.6vw, 58px); }
h2 { font-size: clamp(29px, 3.6vw, 40px); }
h3 { font-size: 18px; line-height: 1.4; font-weight: 650; }
.lede {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--ink-2);
  max-width: var(--measure);
}
section .eyebrow + h2 { margin-top: var(--s-3); }
section h2 + .lede { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-btn);
  font-weight: 650; font-size: 16px;
  transition: background-color var(--d-fast) var(--ease-toggle),
              transform var(--d-fast) var(--ease-toggle),
              box-shadow var(--d-fast) var(--ease-toggle);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--t-700); color: var(--ink-inverse); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--t-800); }
.btn-tonal { background: var(--t-100); color: var(--t-900); }
.btn-tonal:hover { background: var(--t-200); }
/* Auf der eingelassenen Fläche ist die tonale Füllung fast unsichtbar
   (t-100 auf sunken misst 1,06:1) — dort trägt die Kontur den Knopf.
   t-600 auf sunken: 3,55:1, über der 3:1-Grenze für Bedienelemente. */
.btn-secondary {
  background: transparent; color: var(--t-800);
  box-shadow: inset 0 0 0 1.5px var(--t-600);
}
.btn-secondary:hover { background: var(--t-50); }

/* Der Kopf hat 68 px; der Standard-Knopf mit 52 px Höhe und 26 px Polsterung
   drückt die Leiste sonst auseinander und frisst die Navigation. */
.btn-header { min-height: 40px; padding: 0 16px; font-size: 15px; }

.soon-pill {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 4px 14px;
  border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 13px; font-weight: 650; letter-spacing: 0.02em;
  white-space: nowrap;
}
.soon-pill--big {
  min-height: 44px; padding: 8px 22px; font-size: 15px;
  white-space: normal; text-align: center; line-height: 1.5;
}

/* ---------- Statuschips (1:1 AppColors.statusColors) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-chip);
  font-size: 13px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip--created           { background: #F1EDE4; color: #57503F; }
.chip--accepted          { background: #D7F4EF; color: #0F4540; }
.chip--diagnosing        { background: #DFF1F5; color: #0E5560; }
.chip--awaiting_approval { background: #FBF0D9; color: #7A5500; }
.chip--parts_ordered     { background: #ECEAF9; color: #4A3D8F; }
.chip--in_repair         { background: #D7F4EF; color: #0B6B61; }
.chip--quality_check     { background: #E7EDF5; color: #3A506B; }
.chip--ready_for_pickup  { background: #E1F3E6; color: #1E6B3C; }
.chip--completed         { background: #E4EFEA; color: #2A4E46; }
.chip--cancelled         { background: #F7E8E4; color: #8C3B2E; }
.chip--granted           { background: #E1F3E6; color: #1E6B3C; }
.chip--neutral           { background: #F1EDE4; color: #57503F; }
.chip--missing           { background: #FBF0D9; color: #7A5500; }

/* ---------- Icons (Stroke, 1.7, nie in bunten Kreisen) ---------- */
.tick, .row-ic, .benefit-ic, .trust-ic, .seal-ic, .mm-ic {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.tick { width: 18px; height: 18px; stroke-width: 2.4; color: var(--t-600); }
.row-ic { width: 20px; height: 20px; color: var(--t-600); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: box-shadow var(--d-base) var(--ease-toggle);
}
.site-header.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(31, 42, 40, 0.06); }
.header-row {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); padding-block: 8px; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.01em; white-space: nowrap;
}
.site-nav { display: flex; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; }
.site-nav a {
  color: var(--ink-2); font-weight: 550; font-size: 15px;
  padding: 12px 2px;
  transition: color var(--d-fast) var(--ease-toggle);
}
.site-nav a:hover { color: var(--t-700); }
/* „Anmelden" — seit dem 14.09.2026, weil die nackte App-Adresse Abgemeldete
   auf diese Startseite schickt: der Weg zurück ins bestehende Konto gehört
   in die Kopfzeile, leiser als der Werkstatt-Knopf daneben.
   `--ink-2` auf `--paper` 6,21:1; Trefferfläche 44 px hoch. */
.header-login {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  color: var(--ink-2); font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-toggle);
}
.header-login:hover { color: var(--t-700); }

/* ---------- Hero (Film) ----------
   Seit 11.09.2026. Der Hero ist eine Filmbahn: die Aufnahme zeigt Werkstatt
   und Kundschaft gemeinsam vor einem Reparaturfoto, der Text steht links im
   ruhigen Drittel des Bildes.

   Kontrast ist hier GERECHNET, nicht geschätzt — über einem Video ist der
   Untergrund unbekannt, also wird der ungünstigste Fall gerechnet: ein rein
   WEISSES Videopixel unter dem Schleier. Die Zahlen stehen in
   website/HANDOFF.md („Kontrast über dem Film"). Kurzfassung: bei 0,72
   Deckung (rechter Rand der Textspalte, bei 1440 px liegt sie bei ~0,73)
   misst Weiß 7,14:1, bei 0,90 misst Weiß 13,59:1 — beide weit über der
   AA-Grenze von 4,5:1 für Fließtext.
   Wer den Schleier aufhellt, rechnet neu. */
.hero { padding: clamp(48px, 8vh, 84px) 0 clamp(56px, 9vh, 96px); }

.hero--film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #121817;            /* Grundton, falls das Video nie lädt */
  padding: clamp(56px, 9vh, 104px) 0 clamp(60px, 10vh, 112px);
}
.hero-film {
  position: absolute; inset: 0; z-index: 0;
  /* GSAP fährt die Bahn beim Eintritt von 1.055 auf 1 — `transform-origin`
     mittig, damit das Bild nicht aus einer Ecke kippt. */
  transform-origin: 50% 50%;
  /* KEIN `will-change`: die Einfahrt dauert 1,4 s, die Eigenschaft hielte
     danach für die ganze Sitzung eine Compositor-Ebene über die volle
     Bildfläche fest. GSAP setzt sie für die Dauer der Animation selbst. */
}
.hero-film__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Die Menschen stehen im oberen Drittel des Bildes. Ohne diese Zeile
     schneidet `cover` in einer breiten, flachen Bahn genau die Köpfe ab. */
  object-position: 50% 34%;
  display: block;
}
.hero-film__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(18, 24, 23, 0.95) 0%,
      rgba(18, 24, 23, 0.90) 38%,
      rgba(18, 24, 23, 0.72) 56%,
      /* Ab hier trägt der Schleier keinen Text mehr, sondern nimmt dem Bild
         nur noch Kontrast. Er war zu dicht: die beiden Gesichter — der
         eigentliche Grund für diese Aufnahme — lagen im Dunkeln. */
      rgba(18, 24, 23, 0.30) 74%,
      rgba(18, 24, 23, 0.16) 100%),
    /* Zweite, schwache Bahn nach unten: der Fuß des Films trifft auf die
       helle Papierfläche der nächsten Sektion — ohne sie entsteht dort eine
       harte Kante quer durch das Bild. */
    linear-gradient(180deg,
      rgba(18, 24, 23, 0.00) 55%,
      rgba(18, 24, 23, 0.35) 100%);
}
.hero-film__inner { position: relative; z-index: 1; }

.hero-copy--film { max-width: 620px; color: var(--ink-inverse); }
.hero-copy--film .hero-title { color: var(--ink-inverse); }
.hero-title { margin-top: var(--s-4); }
.hero-copy .lede { margin-top: var(--s-5); }
.hero-copy--film .lede--dark { color: var(--t-50); }
.hero-copy--film .lede--dark strong { color: var(--ink-inverse); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* Knöpfe auf dem Film. Das Primär-Türkis der Seite (--t-700) ist auf einem
   dunklen Bild dunkel auf dunkel und verliert genau die Führung, für die es
   da ist. Auf dieser Fläche trägt deshalb die helle Stufe:
   #6ED8CB auf #0F4540 misst 6,35:1 (gerechnet, HANDOFF). */
.btn-film {
  background: var(--t-300); color: var(--t-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 30px rgba(0, 0, 0, 0.22);
}
.btn-film:hover { background: var(--t-200); }
.btn-film-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-inverse);
  box-shadow: inset 0 0 0 1.5px rgba(215, 244, 239, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.btn-film-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1.5px var(--t-200);
}

/* ---------- Neuer Hero-Aufbau (12.09.2026) ----------
   Die Preiszeile steht jetzt VOR den Handlungen statt darunter: „Was kostet
   mich das?" ist bei einem Werkstattthema der erste Reflex, und wer ihn erst
   nach dem Klick beantwortet, hat den Klick nie bekommen. */
.hero-free--lead { margin-top: var(--s-4); }
.hero-cta--second { margin-top: var(--s-4); }
.hero-invite {
  margin-top: var(--s-5);
  color: var(--t-50); font-size: 15px; line-height: 1.6;
}
.hero-invite a { color: var(--ink-inverse); text-decoration-thickness: 2px; }

/* Der Vertrauensblock der Startseite: EIN Absatz plus ein Weg. Die
   Langfassung lebt genau einmal, auf /nachweisfotos — drei eigene Seiten, die
   um dieselbe Suche konkurrieren, gewinnt keine. */
.trust--short { padding-block: var(--s-8); }
.link-arrow { color: var(--t-700); font-weight: 600; }

/* Auf dem dunklen Vertrauensblock gelten die hellen Gegenstücke. Ohne diese
   Zeilen erbten Lede, Zahlenliste und Link die Farben für hellen Grund —
   `--ink` auf `--t-900` ist praktisch unlesbar (12.09., beim Durchsehen im
   Browser gefunden, nicht im Entwurf). */
.trust .lede { color: var(--t-50); }
.trust .facts li { color: var(--t-50); }
.trust .facts li strong { color: var(--ink-inverse); }
.trust .facts li::before { background: var(--t-300); }
.trust .link-arrow { color: var(--t-300); }
.trust .link-arrow:hover { color: var(--t-200); }

.facts { list-style: none; margin: var(--s-6) 0 var(--s-5); padding: 0; max-width: 64ch; }
.facts li { position: relative; padding-left: 26px; margin-top: var(--s-3); color: var(--ink-2); line-height: 1.65; }
.facts li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--t-500);
}
.facts strong { color: var(--ink); }

.finden { padding-block: var(--s-8); background: var(--sunken); }
.finden .lede { max-width: 58ch; }

/* Die sechs Schritte auf /nachweisfotos. Eine Aufzählung, weil die
   Reihenfolge die Aussage IST: der Server vergibt zuerst den Ort, erst
   danach kann er die Bytes prüfen, die dort liegen. */
/* Diese Liste steht IMMER auf dem dunklen Vertrauensblock (`.trust` setzt
   `--t-900` als Grund). Sie bekommt deshalb von vornherein die hellen
   Farben — `--ink-2` darauf misst 1,64:1 und `--ink` 1,37:1, also praktisch
   unsichtbar. Derselbe Fehler wie bei `.facts`, eine Seite weiter: wer ein
   neues Element in einen dunklen Abschnitt setzt, erbt die Farben für hellen
   Grund, und im Entwurf fällt das nie auf (12.09.). */
.trust-steps { margin: var(--s-6) 0 0; padding-left: 1.4em; max-width: 64ch; }
.trust-steps li { margin-top: var(--s-4); color: var(--t-50); line-height: 1.7; }
.trust-steps li strong { color: var(--ink-inverse); }
.trust-steps li::marker { color: var(--t-300); }

/* ---------- Bausteine der Unterseiten ----------
   Seit dem 12.09.2026 ist aus einer Seite eine kleine Website geworden:
   kurze, visuelle Startseite plus drei Themenseiten, die den Langtext
   tragen. Diese Blöcke gibt es nur dort. */

/* Brotkrumen: eine Zeile, zwei Stufen. Mehr wäre bei vier Seiten Theater. */
.crumbs {
  padding-top: var(--s-5);
  font-size: 14px; color: var(--ink-3);
}
.crumbs .shell { display: flex; gap: 8px; align-items: baseline; }
.crumbs a { color: var(--t-700); }
.crumbs [aria-current] { color: var(--ink-2); }

/* Die Kurzfassung oben auf jeder Unterseite. Sie ist kein Stilmittel: eine
   abgeschlossene Passage mit einer Zahl ist die Form, die Antwortmaschinen
   zitieren — und für Menschen ist sie die Erlaubnis, NICHT alles zu lesen. */
.page-intro { padding-top: var(--s-6); }
.page-intro h1 { max-width: 20ch; }
.page-lede {
  margin-top: var(--s-4); max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-2);
}
.page-tldr {
  margin-top: var(--s-5); max-width: 62ch;
  padding: var(--s-4) var(--s-5);
  background: var(--t-50);
  border-left: 3px solid var(--t-600);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--ink); font-size: 16px; line-height: 1.65;
}
.page-tldr strong { color: var(--t-900); }

/* Fragen und Antworten, sichtbar. Sie standen bis zum 12.09. NUR im
   JSON-LD — für Google formal ein Verstoß, für jede Antwortmaschine
   schlicht nicht vorhanden, und es sind die fünf ehrlichsten Absätze, die
   dieses Produkt hat. */
.faq { padding-block: var(--s-8); }
.faq-list { margin-top: var(--s-6); max-width: 68ch; }
.faq-item + .faq-item { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.faq-item dt { font-weight: 600; color: var(--ink); font-size: clamp(17px, 1.5vw, 19px); }
.faq-item dd { margin: 10px 0 0; color: var(--ink-2); line-height: 1.7; max-width: 62ch; }

/* Die Verweise von der Startseite auf die drei Themenseiten. Jeder trägt
   eine ZAHL — ein reiner Verweis ohne Substanz macht die meistverlinkte
   Seite der Domain unzitierbar. */
.paths { padding-block: var(--s-8); }
.path-grid {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.path-tile {
  display: block; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  color: inherit;
}
main a.path-tile:hover { text-decoration: none; box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.path-tile h3 { font-size: clamp(18px, 1.7vw, 21px); }
.path-tile p { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.path-tile .go { display: inline-block; margin-top: var(--s-4); color: var(--t-700); font-weight: 600; font-size: 15px; }

.footer-meta { margin-top: var(--s-3); color: var(--ink-3); font-size: 13px; line-height: 1.6; }

/* ---------- Ortssuche im Hero ----------
   Ein echtes Eingabefeld, kein getarnter Knopf: es muss auf den ersten Blick
   als „hier tippt man" lesbar sein, und auf dem dunklen Film schafft das nur
   eine helle, volle Fläche. Ink auf Weiss ist dasselbe Paar wie in der App
   (--ink auf --surface, 13,6:1 — HANDOFF-Kontrasttabelle).
   Die Beschriftung darüber steht auf dem Film und nimmt --t-50 wie die
   Lede (7,9:1 auf dem Scrim). */
.hero-find { margin-top: var(--s-5); max-width: 560px; }
.hero-find__label {
  display: block; color: var(--t-50);
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
}
.hero-find__box {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 6px 6px 6px 14px;
  background: var(--surface);
  border-radius: var(--r-btn);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(0, 0, 0, 0.26);
}
.hero-find__pin {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: var(--ink-3); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-find__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 17px; color: var(--ink);
  padding: 12px 0;
}
.hero-find__input::placeholder { color: var(--ink-3); }
.hero-find__go {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* 48 dp — dieselbe Untergrenze wie in der App, und hier sitzt der Knopf
     direkt neben einem Feld, in das der Daumen zielt. */
  width: 48px; height: 48px;
  border: 0; border-radius: calc(var(--r-btn) - 4px);
  background: var(--t-700); color: var(--ink-inverse);
  cursor: pointer;
}
.hero-find__go:hover { background: var(--t-800); }
.hero-find__go svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Die Vorschläge. Eigene Fläche mit Rand, damit sie nicht mit dem Feld
   verschmilzt; sie schiebt den Inhalt darunter, statt ihn zu überdecken —
   im Hero ist darunter Platz, und ein Overlay über einem Video ist die
   Bauweise mit den meisten Fallen. */
.hero-find__list {
  list-style: none; margin: 8px 0 0; padding: 4px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 18px 44px rgba(0, 0, 0, 0.3);
}
.hero-find__list[hidden] { display: none; }
.hero-find__option {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 12px;
  border-radius: calc(var(--r-card) - 6px);
  color: var(--ink); font-size: 16px;
  cursor: pointer;
}
.hero-find__option:hover,
.hero-find__option[aria-selected="true"] { background: var(--t-50); }
/* Der aktive Eintrag der Tastaturnavigation braucht mehr als eine Tönung:
   --t-50 auf Weiss ist eine Andeutung, kein Indikator. */
.hero-find__option[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--t-600);
}
.hero-find__option .zip { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hero-find__empty { color: var(--ink-2); font-size: 15px; padding: 12px; }
/* Der Ladezustand bekommt einen laufenden Punkt statt eines Spinners: die
   Zeile ist schon da, sie muss nur zeigen, dass etwas passiert. */
.hero-find__loading::before {
  content: "";
  display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--t-500);
  animation: findPulse 1s ease-in-out infinite;
}
@keyframes findPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-find__loading::before { animation: none; opacity: .8; }
}
.hero-find__note {
  margin-top: 10px; color: var(--t-50); font-size: 14px; opacity: 0.92;
}

.hero-find__input:focus-visible { outline: none; }
.hero-find__box:focus-within {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(0, 0, 0, 0.26),
              inset 0 0 0 2px var(--t-600);
}

@media (max-width: 560px) {
  .hero-find__input { font-size: 16px; } /* < 16px zoomt iOS beim Fokus */
}

/* ---------- Fokus auf dem Film ----------
   Der globale Ring (`outline: 2px var(--t-600)`, Offset 2px) landet hier auf
   dem VIDEO, nicht auf dem Bedienelement — und ein mittleres Türkis auf einer
   hellen Fensterscheibe misst 1,0:1. Gemessen über echte Bilder des Clips,
   nicht geschätzt (cdr-design-reviewer, 11.09.).
   Ein heller Ring IN einem dunklen Hof ist die einzige Konstruktion, die
   gegen einen beliebigen Bildinhalt ≥3:1 hält (SC 1.4.11 / 2.4.11): der Hof
   ist fast deckend, also misst der Ring gegen IHN, nicht gegen das Video.
   Gerechnet: der Hof misst über einem reinweissen Bildpunkt #1F2424, der
   Ring darauf 13,40:1 — und der Hof selbst hebt sich mit 15,6:1 (weiss) bzw.
   4,90:1 (mittelgrau) vom Bild ab. Beides über der 3:1-Grenze. */
.btn-film:focus-visible,
.btn-film-ghost:focus-visible,
.hero-find__go:focus-visible,
.code-cta:focus-visible,
.film-toggle:focus-visible,
.partner-link:focus-visible {
  outline: 2px solid var(--t-100);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(12, 18, 17, 0.92);
}

/* Der Code-Weg. Auffällig, ohne laut zu sein: eine eigene Karte mit den vier
   Kästchen als Bild — wer eine Einladung in der Hand hat, erkennt sie sofort
   wieder, und wer keine hat, versteht in einer Sekunde, worum es geht. */
.code-cta {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6);
  max-width: 560px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: rgba(12, 18, 17, 0.66);
  box-shadow: inset 0 0 0 1.5px rgba(110, 216, 203, 0.45),
              0 14px 36px rgba(0, 0, 0, 0.28);
  /* `-webkit-` zuerst: iOS Safari braucht das Präfix, und ohne es fehlt der
     Effekt genau dort, wo die Karte am wichtigsten ist. (Sie war am 11.09.
     auf dem iPhone unsichtbar — die Ursache lag aber NICHT hier, sondern am
     Schwellwert des Reveal-Beobachters, siehe js/main.js.) */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink-inverse);
  transition: background-color var(--d-fast) var(--ease-toggle),
              box-shadow var(--d-fast) var(--ease-toggle),
              transform var(--d-fast) var(--ease-toggle);
}
.code-cta:hover {
  background: rgba(12, 18, 17, 0.80);
  box-shadow: inset 0 0 0 1.5px var(--t-300),
              0 18px 44px rgba(0, 0, 0, 0.34);
  transform: translateY(-2px);
}
.code-cta:active { transform: translateY(0); }
main a.code-cta:hover { text-decoration: none; }
/* Erbt `.code-boxes` (dieselbe Form wie der Beispielcode in der Bühne), muss
   dessen weisse Füllung auf dem Film aber überschreiben — deshalb der
   doppelte Klassen-Anker. Mit der geerbten Füllung waren die vier Kästchen
   das HELLSTE Element des Heros: heller als der Primärknopf, und sie sahen
   aus wie ein Eingabefeld, in das man tippen kann. Sie sind eine Abbildung;
   getippt wird in der App. */
.code-cta .code-cta__boxes { flex: none; gap: 5px; }
.code-cta .code-cta__boxes span {
  width: 26px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(168, 232, 223, 0.55);
}
/* Der Zeiger wandert über die Kästchen, als würde jemand tippen. Reine
   Zugabe: ohne sie steht die Karte genauso da, und bei reduzierter Bewegung
   tut sie das auch. */
.code-cta:hover .code-cta__boxes span {
  border-color: var(--t-300);
  background: rgba(110, 216, 203, 0.16);
  transition: background-color var(--d-base) var(--ease-toggle),
              border-color var(--d-base) var(--ease-toggle);
}
.code-cta:hover .code-cta__boxes span:nth-child(2) { transition-delay: 60ms; }
.code-cta:hover .code-cta__boxes span:nth-child(3) { transition-delay: 120ms; }
.code-cta:hover .code-cta__boxes span:nth-child(4) { transition-delay: 180ms; }
.code-cta__text { display: grid; gap: 3px; min-width: 0; }
.code-cta__text strong { font-size: 16px; font-weight: 650; }
.code-cta__text span { font-size: 13.5px; color: var(--t-100); line-height: 1.45; }
.code-cta__arrow {
  flex: none; width: 22px; height: 22px; margin-left: auto;
  fill: none; stroke: var(--t-300); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--d-base) var(--ease-toggle);
}
.code-cta:hover .code-cta__arrow { transform: translateX(4px); }

/* Halt für den Film (WCAG 2.2 SC 2.2.2). Klein, unten rechts, aber mit
   44 px Trefferfläche und sichtbarem Fokus — ein Bedienelement, das man nur
   mit der Maus trifft, ist keins. */
.film-toggle {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(12, 18, 17, 0.62);
  box-shadow: inset 0 0 0 1px rgba(215, 244, 239, 0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color var(--d-fast) var(--ease-toggle);
}
.film-toggle:hover { background: rgba(12, 18, 17, 0.85); }
.film-toggle__ic {
  width: 18px; height: 18px;
  fill: none; stroke: var(--t-100); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.film-toggle__ic--pause { display: block; }
.film-toggle__ic--play { display: none; fill: var(--t-100); stroke: none; }
.film-toggle.is-paused .film-toggle__ic--pause { display: none; }
.film-toggle.is-paused .film-toggle__ic--play { display: block; }
.film-toggle__label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.stage-example-note {
  margin-top: 10px;
  text-align: right;
  font-size: 12px; color: var(--ink-3);
}

/* ---------- Warum (der Hebel) ----------
   Eine einzige Zahl steuert alles: `--mix` (0 … 1) am Container. Jede Zeile
   rechnet daraus ihren eigenen Fortschritt `--p` mit einem Versatz über
   `--i` — dadurch kippen die Zeilen NACHEINANDER, ohne dass ein Skript vier
   Timeline-Schritte verwalten muss. Die Verzögerung ist der ganze Reiz: man
   zieht, und die Aussagen fallen wie Dominosteine um.
   `1.34` ist der Kehrwert des größten Versatzes (3 × 0,085 ≈ 0,26), damit
   auch die LETZTE Zeile bei --mix:1 wirklich bei 1 ankommt. */
.why { padding: clamp(56px, 9vh, 100px) 0; background: var(--surface); border-block: 1px solid var(--border); }
.why-switch {
  --mix: 0;
  margin-top: clamp(28px, 4vh, 44px);
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.why-heads {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: 13px; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-card);
}
/* Links steht ruhig, WORUM es geht; rechts wechselt die Beschriftung mit
   dem Hebel, weil genau diese Spalte sich verwandelt. Nie rot und nie
   durchgestrichen — die graue Seite beschreibt eine Informationslücke, kein
   Fehlverhalten (Invariante 46). */
.why-head--case { color: var(--ink-3); }
.why-head--state { display: grid; text-align: right; }
.why-head-off, .why-head-on { grid-area: 1 / 1; }
.why-head-off { color: var(--ink-3); opacity: calc(1 - var(--mix)); }
.why-head-on { color: var(--t-700); opacity: var(--mix); }

.why-rows { display: grid; gap: 0; }
.why-row {
  /* Fortschritt DIESER Zeile, aus dem gemeinsamen Hebel plus Versatz. */
  --p: clamp(0, calc((var(--mix) - var(--i) * 0.085) * 1.34), 1);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-4) clamp(16px, 3vw, 40px);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border-card);
}
.why-row:last-child { border-bottom: 0; padding-bottom: 0; }
.why-case {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
/* Beide Sätze liegen ÜBEREINANDER im selben Raster-Feld — sonst springt die
   Zeilenhöhe beim Überblenden und die ganze Liste ruckelt. */
.why-pair { display: grid; }
.why-off, .why-on {
  grid-area: 1 / 1;
  font-size: 15px; line-height: 1.5;
}
.why-off {
  color: var(--ink-3);
  opacity: calc(1 - var(--p));
  transform: translateY(calc(var(--p) * -6px));
}
.why-on {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink);
  font-weight: 550;
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 8px));
}
.why-on .tick { margin-top: 3px; flex: none; color: var(--t-600); }

/* Der Hebel selbst. 44 px hoch, damit er auf dem Telefon zu treffen ist. */
/* 22 px unten sind der Platz für den Hinweis UNTER dem Griff — ohne ihn
   steht er auf der Kartenkante. */
.why-lever { position: relative; margin: clamp(20px, 3vh, 30px) 0 22px; height: 44px; }
.why-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: grab;
  -webkit-appearance: none; appearance: none; background: transparent;
  z-index: 2;
}
.why-range:active { cursor: grabbing; }
.why-range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; }
.why-range::-moz-range-thumb { width: 56px; height: 100%; border: 0; background: transparent; }
/* Bahn und Füllung tragen den Wert („wie weit habe ich gezogen?"). Mit
   `--hint` auf Papier waren das 1,13:1 und mit `--t-400` gegen die Bahn
   1,90:1 — sichtbar war praktisch nur der Griff. `--t-600` auf der
   abgedunkelten Bahn misst 3,55:1 und damit über der 3:1-Grenze für
   Bedienelemente. */
.why-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 8px; margin-top: -4px;
  border-radius: 999px; background: var(--border);
  display: block;
}
.why-track-fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--mix) * 100%);
  border-radius: 999px; background: var(--t-600);
}
/* Die Bahn ist um einen halben Griff eingerückt, sonst hängt der Griff bei
   0 % und 100 % zur Hälfte AUSSERHALB der Karte — an beiden Enden, und
   ausgerechnet dort steht er am längsten. */
.why-knob {
  position: absolute; top: 50%;
  left: calc(22px + var(--mix) * (100% - 44px));
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--t-700); color: var(--ink-inverse);
  box-shadow: var(--shadow-raised);
  /* Der Griff ist reine Darstellung — die Treffer nimmt der Range-Input. */
  pointer-events: none;
}
.why-knob svg {
  grid-area: 1 / 1;
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.why-knob { display: grid; place-items: center; }
/* Der Pfeil weicht dem Haken, statt sich zu drehen: eine 90°-Drehung machte
   aus dem Rechtspfeil einen ABWÄRTSpfeil, und der heißt auf einer Seite
   „weiterscrollen" — also das Gegenteil von „fertig". */
.why-knob__arrow { opacity: calc(1 - var(--mix) * 1.6); }
.why-knob__check { opacity: calc((var(--mix) - 0.75) * 4); }
.why-range:focus-visible ~ .why-track .why-knob {
  outline: 3px solid var(--t-800); outline-offset: 3px;
}
/* Der Hinweis bleibt stehen, statt mit dem Griff zu wandern: mitlaufend war
   er bei 0 % halb aus der Karte heraus und zog beim Ziehen den Blick vom
   Inhalt weg — er soll den Griff erklären, nicht mit ihm konkurrieren. */
.why-lever-hint {
  position: absolute; left: 0; top: 46px;
  white-space: nowrap;
  font-size: 13px; color: var(--ink-3);
  /* Der Hinweis verschwand, sobald der Selbstlauf `--mix` über 0,45 schob —
     also rund 1,8 s nach dem Hereinscrollen, lange bevor jemand ihn gelesen
     hat. Zurück blieb ein voller Balken mit Haken: er sah FERTIG aus, nicht
     ziehbar, und der Abschnitt existiert genau dafür, dass man selbst zieht.
     Er bleibt jetzt stehen, bis die Person den Hebel wirklich angefasst hat
     (`js/main.js` setzt `data-touched`). */
  transition: opacity var(--d-base) var(--ease-toggle);
}
.why-switch[data-touched] .why-lever-hint { opacity: 0; }
.why-fairness {
  margin: clamp(20px, 3vh, 28px) auto 0;
  max-width: var(--measure);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-3);
}
.why-fairness strong { color: var(--ink-2); }

@media (max-width: 720px) {
  .why-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-items: start; }
  .why-heads { font-size: 11.5px; }
}

/* Ohne JS steht der Endzustand: die belegte Seite. Ein Hebel, den niemand
   bewegen kann, darf nicht die graue Hälfte einfrieren. */
html:not(.js) .why-switch { --mix: 1; }
html:not(.js) .why-lever { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Kein Durchlauf und keine Überblendung — die Aussage steht sofort da.
     Der Hebel bleibt bedienbar, er springt dann nur ohne Weichzeichnung. */
  .why-lever-hint { transition: none; }
}


/* „Für dich kostenlos" — eine ruhige Zeile, kein zweiter Knopf. Sie
   beantwortet die erste Frage der Kundschaft an der Stelle, an der sie
   entsteht, ohne mit den drei Wegen darüber um Aufmerksamkeit zu streiten. */
.hero-free {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s-5); max-width: 560px;
  font-size: 14.5px; line-height: 1.5; color: var(--t-100);
}
.hero-free .tick { margin-top: 3px; flex: none; color: var(--t-300); }
.hero-free strong { color: var(--ink-inverse); font-weight: 650; }

/* Der Beleg-Haken der EMPFOHLENEN Phase steht leiser als die zwei
   verlangten — sonst behauptet die Bühne die zurückgenommene Pflicht
   (Invariante 28). */
.gate-item--optional { opacity: 0.6; }

/* Sichtbare Beispiel-Marke über der Karte. */
.radius-example {
  margin: 0 0 var(--s-2);
  font-size: 12px; font-weight: 650; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Scroll-Story ---------- */
.story { background: var(--surface); border-block: 1px solid var(--border); }
.story-head { padding: clamp(56px, 9vh, 96px) 0 clamp(20px, 4vh, 40px); }

.story-track { position: relative; }
html.js .story-track[data-story] { height: 540vh; }
.story-pin { display: flex; align-items: flex-start; }
html.js .story-pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  align-items: center;
  overflow: hidden;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  width: min(var(--shell), 100% - clamp(32px, 6vw, 96px));
  padding-block: var(--s-6);
}

/* Kapitel als Auftrags-Timeline, nicht als Marketing-1-2-3 */
.story-steps { position: relative; display: grid; gap: clamp(10px, 2.2vh, 22px); }
.story-steps::before {
  content: "";
  position: absolute; left: 5px; top: 14px; bottom: 14px;
  width: 2px; background: var(--border);
  border-radius: 2px;
}
.story-step { position: relative; padding-left: 26px; }
.story-step::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-3);
  transition: border-color var(--d-base) var(--ease-toggle),
              background-color var(--d-base) var(--ease-toggle),
              transform var(--d-base) var(--ease-entry);
}
.step-time {
  font-size: 12px; font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  transition: color var(--d-base) var(--ease-toggle);
}
.story-step h3 {
  font-size: 16.5px; margin-top: 3px;
  color: var(--ink-2);
  transition: color var(--d-base) var(--ease-toggle);
}
.story-step p {
  font-size: 14px; line-height: 1.55; color: var(--ink-3);
  margin-top: 5px;
  transition: color var(--d-base) var(--ease-toggle);
}
html.js .story-step p {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--d-slow) var(--ease-entry),
              opacity var(--d-slow) var(--ease-toggle),
              color var(--d-base) var(--ease-toggle);
}
.story-step.is-active::before { border-color: var(--t-600); background: var(--t-600); transform: scale(1.12); }
.story-step.is-active .step-time { color: var(--t-700); }
.story-step.is-active h3 { color: var(--ink); }
.story-step.is-active p { color: var(--ink-2); }
html.js .story-step.is-active p { max-height: 140px; opacity: 1; }
.story-step.is-done::before { border-color: var(--t-600); background: var(--t-100); }

/* Bühne */
.story-stage { position: relative; min-width: 0; }
.stage-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-dialog);
  box-shadow: var(--shadow-raised);
  padding: clamp(18px, 2.4vw, 28px);
}
.stage-card > * + * { margin-top: var(--s-4); }
.story .stage-card { border-color: var(--border); }
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.stage-head .order-title { font-size: 17px; }
.stage-head .order-issue { font-size: 14px; }

.chip-stack { display: grid; justify-items: end; }
.chip-stack .chip { grid-area: 1 / 1; }
html.js .chip-stack .chip { opacity: 0; }
html:not(.js) .chip-stack .chip:not(:last-child) { opacity: 0; }

.invite-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--t-50);
  border-radius: var(--r-btn);
  padding: 10px 14px;
  font-size: 13.5px; color: var(--t-900);
}
.invite-line .row-ic { color: var(--t-700); }

.code-boxes { display: inline-flex; gap: 6px; }
.code-boxes span {
  width: 44px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1.5px solid var(--border-input);
  border-radius: var(--r-btn);
  font-size: 22px; font-weight: 700;
}
.code-boxes--sm span {
  width: 26px; height: 32px; border-radius: 9px;
  font-size: 15px; border-width: 1.2px;
}

.stage-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.moment { display: grid; gap: 8px; min-width: 0; }
.moment-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--photo-bg);
  overflow: hidden;
}
.moment-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 105% at 50% 8%, rgba(255,255,255,0.08), transparent 52%),
              radial-gradient(120% 120% at 50% 115%, rgba(0,0,0,0.4), transparent 55%);
  pointer-events: none;
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--photo-stroke); }
.scene .scene-strong { stroke: var(--photo-strong); }
/* Echtes Nachweisfoto über der Zeichnung: erscheint im Siegel-Moment
   („aus Behauptung wird Beleg"). Ohne JS/mit reduzierter Bewegung sichtbar. */
.moment-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.moment-missing {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunken);
  border: 1px dashed var(--border-input);
  border-radius: 14px;
  color: var(--ink-2); font-size: 13px; font-weight: 600;
}
html:not(.js) .moment-missing { display: none; }
.moment figcaption { display: grid; gap: 2px; }
.moment-name { font-weight: 650; font-size: 13.5px; }
.moment-hint { color: var(--ink-3); font-size: 12px; }
.seal-line {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-2); font-size: 11.5px;
  min-height: 18px;
  min-width: 0;
}
.seal-line .seal-ic { width: 15px; height: 15px; color: var(--t-600); stroke-width: 2; }
.seal-word { font-weight: 600; white-space: nowrap; }
.seal-line .mono {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.approval-card {
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: 12px 16px;
  display: grid; gap: 10px;
  background: var(--paper);
}
.approval-head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; flex-wrap: wrap; }
.approval-head p { font-size: 14px; }
.approval-amount { font-weight: 700; font-size: 15px; white-space: nowrap; }
.approval-answer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.approval-via { color: var(--ink-3); font-size: 12.5px; }

.part-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2);
  padding: 2px 2px;
}
.part-row strong { color: var(--ink); }

.gate-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}
.gate-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 650; color: var(--ok-fg);
}
.gate-item .tick { color: var(--ok-fg); }
.gate-note { font-size: 13px; color: var(--ink-2); margin-left: auto; }

.story-stage .stage-example-note { position: absolute; right: 6px; bottom: -26px; margin: 0; }

/* ---------- Zielgruppen-Sektionen ---------- */
.audience { padding: clamp(64px, 10vh, 110px) 0; }
.feature-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vh, 44px);
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 2.6vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.feature p { color: var(--ink-2); font-size: 15px; }
.feature-visual { margin-top: auto; padding-top: var(--s-4); }

.chips-rail { display: flex; flex-wrap: wrap; gap: 8px; }

.seal-demo { display: grid; gap: 10px; }
.seal-photo {
  border-radius: 14px; background: var(--photo-bg); color: var(--photo-stroke);
  aspect-ratio: 16 / 5.6; overflow: hidden; position: relative;
}
.seal-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 130% at 50% 120%, rgba(0, 0, 0, 0.22), transparent 55%);
}
.seal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seal-caption {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2);
}
.seal-caption .seal-ic { width: 17px; height: 17px; color: var(--t-600); stroke-width: 2; }

.approval-demo {
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--paper);
  padding: 14px 16px;
  display: grid; gap: 12px;
}
.approval-q { font-size: 14px; }
.approval-a { display: flex; gap: 10px; }
/* Nicht gewählte Option: Dimmen über FARBE, nie über Opacity (AA bleibt) —
   ink-2 auf hint = 5,49:1 */
.approval-a .chip--neutral { background: var(--hint); color: var(--ink-2); }

.code-demo { display: grid; gap: 8px; justify-items: start; }
.code-hint { font-size: 12.5px; color: var(--ink-3); }

/* Werkstätten */
.audience--workshop { background: var(--surface); border-block: 1px solid var(--border); }
.workshop-grid {
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.workshop-intro { position: sticky; top: calc(var(--header-h) + 24px); }
html:not(.js) .workshop-intro { position: static; }
.doc-card {
  margin-top: var(--s-7);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: grid; gap: 13px;
  max-width: 460px;
}
.doc-card-title { font-weight: 650; font-size: 14px; }
.doc-step { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.doc-step .row-ic { margin-top: 1px; }
.doc-gate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 13px;
  font-size: 13px; color: var(--ink-3);
}

.benefit-list { display: grid; gap: 6px; }
.benefit {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--border);
}
.benefit:last-child { border-bottom: 0; }
.benefit-ic { width: 24px; height: 24px; color: var(--t-600); margin-top: 2px; stroke-width: 1.6; }
.benefit h3 { font-size: 17px; }
.benefit p { color: var(--ink-2); font-size: 15px; margin-top: 5px; }

/* Geld-Hebel: ehrlich, ohne Fantasie-Prozente */
/* Der echte Werkstatt-Einstieg. Steht direkt hinter den Argumenten, weil
   genau dort die Frage „und wie mache ich mit?" entsteht — und nicht erst
   400 px weiter unten im Abschluss. Eine Zeile Kontext, ein Knopf; kein
   zweiter Primärknopf in Sichtweite. */
/* ---------- Partner-Band (Werkstatt-Einstieg) ----------
   Die zweite dunkle Fläche der Seite nach dem Hero, und sie gehört der
   anderen Zielgruppe. Gleiche Bauweise wie der Hero — Film, Schleier, Text
   darauf —, damit die Seite EINE Sprache spricht und nicht zwei.
   Kontrast nach demselben ungünstigsten Fall gerechnet: bei 0,88 Deckung
   über einem rein weissen Videopixel misst Weiß 12,71:1, Türkis-300 für die
   Zahlen 7,47:1 (website/HANDOFF.md). */
.partner {
  position: relative; isolation: isolate; overflow: hidden;
  /* In derselben Spur wie alle anderen Karten der Seite. Randlos über die
     volle Breite sahen die runden Ecken am Bildschirmrand nach Versehen aus
     statt nach Absicht. */
  width: min(var(--shell), 100% - clamp(32px, 6vw, 96px));
  margin: clamp(36px, 5vh, 64px) auto 0;
  background: #121817;
  border-radius: var(--r-card);
}
.partner-film { position: absolute; inset: 0; z-index: 0; }
.partner-film__video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 38%;
  display: block;
}
.partner-film__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(18, 24, 23, 0.94) 0%,
    rgba(18, 24, 23, 0.88) 42%,
    rgba(18, 24, 23, 0.58) 64%,
    rgba(18, 24, 23, 0.22) 100%);
}
/* Überschreibt `.shell` bewusst: die Karte IST schon die Spur, ein zweites
   Zentrieren darin würde den Text in die Mitte des Bildes schieben. */
.partner-inner {
  position: relative; z-index: 1;
  width: auto; max-width: 620px;
  padding-block: clamp(40px, 6vh, 72px);
  margin-inline: 0;
  padding-inline: clamp(22px, 4vw, 48px);
  color: var(--ink-inverse);
}
.partner-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15;
  letter-spacing: -0.012em;
  margin-top: var(--s-3);
  color: var(--ink-inverse);
  text-wrap: balance;
}
.partner-lede {
  margin-top: var(--s-4); max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55;
  color: var(--t-50);
}
/* Drei Zahlen, die ein Betrieb VOR der Entscheidung braucht. Keine
   Umsatzversprechen — die haben wir nicht, und die Seite sagt das an anderer
   Stelle ausdrücklich. */
/* Drei Spalten, eine Zeile — drei Zahlen, die man in einem Blick aufnimmt.
   Als umbrechende Flex-Zeile standen sie 2 + 1 und sahen aus wie ein
   Umbruchfehler; und lange Beschreibungen darunter macht sie zu Fliesstext,
   also sind sie auf zwei bis drei Wörter gekürzt. */
.partner-facts {
  margin-top: clamp(20px, 3vh, 28px);
  display: grid; grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: var(--s-4) clamp(20px, 3vw, 44px);
  list-style: none; padding: 0;
}
.partner-facts li { display: grid; gap: 2px; }
.partner-facts strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1; color: var(--t-300);
}
.partner-facts span { font-size: 13.5px; line-height: 1.45; color: var(--t-100); }
.partner-cta {
  margin-top: clamp(22px, 3.5vh, 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5);
}
.partner-link {
  color: var(--t-200); font-weight: 550; font-size: 15px;
  text-underline-offset: 4px;
}
main a.partner-link:hover { color: var(--t-100); }

@media (max-width: 900px) {
  /* Wie im Hero: unter dem Text bekommt der Film eine eigene Bahn, statt
     unter einem dichten Schleier zu verschwinden. */
  .partner { display: flex; flex-direction: column; }
  .partner-inner { order: 1; position: static; max-width: none; }
  .partner-film {
    position: static; order: 2;
    width: 100%; aspect-ratio: 16 / 9;
  }
  .partner-film__scrim {
    background: linear-gradient(180deg,
      rgba(18, 24, 23, 0.55) 0%,
      rgba(18, 24, 23, 0.00) 20%);
  }
}

.money {
  margin-top: clamp(36px, 5vh, 56px);
  grid-column: 1 / -1;
  background: var(--t-50);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.4vw, 40px);
}
.money h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.01em; }
.money-lede { color: var(--ink-2); margin-top: var(--s-2); max-width: var(--measure); font-size: 16px; }
/* Vier Hebel seit dem 14.09.2026 (die Anfragen aus dem Umkreis kamen dazu):
   vier nebeneinander auf breitem Schirm, zwei mal zwei darunter, einer auf
   dem Telefon — nie drei plus ein verwaister vierter. */
.money-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: var(--s-6);
}
@media (max-width: 1080px) {
  .money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Einspaltig erst auf dem Telefon. Eine ältere 900-px-Regel weiter unten
   machte schon ab dort eine Spalte daraus, und ein Tablet las Zeilen von
   rund 110 Zeichen (cdr-design-reviewer, 14.09.). */
@media (max-width: 560px) {
  .money-grid { grid-template-columns: minmax(0, 1fr); }
}
.money-item h4 { margin: 0; font-size: 15.5px; font-weight: 650; display: flex; gap: 9px; align-items: center; }
.money-item .row-ic { color: var(--t-700); }
.money-item p { color: var(--ink-2); font-size: 14.5px; margin-top: 7px; }
.money-note {
  margin-top: var(--s-6);
  font-size: 14px; color: var(--t-900);
  border-top: 1px solid var(--t-200);
  padding-top: var(--s-4);
  max-width: 760px;
}

/* ---------- Preise ----------
   Papier-Sektion zwischen der Werkstatt-Seite (weiß) und dem dunklen
   Vertrauens-Moment: der Preis steht dort, wo jemand nach dem Nutzen fragt,
   was kostet das. Die Zahl ist das schwerste Element der Karte — sie ist
   das, wonach gescannt wird; alles andere ordnet sich ihr unter. */
.pricing { padding: clamp(64px, 10vh, 110px) 0; background: var(--paper); }
/* ---------- Die drei Momente ---------- */
.moments { padding: var(--s-9) 0; }
.moments-grid {
  display: grid; gap: var(--s-5); margin-top: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* `.moment` gehört bereits der Bühne im Ablauf-Abschnitt — deshalb hier ein
   eigener Name. Ein zweites Mal denselben Klassennamen zu vergeben hätte die
   Foto-Kacheln der Bühne mitgestylt, und zwar nur an den Stellen, an denen
   die neuen Regeln zufällig später stehen. */
.moment-card { margin: 0; }
.moment-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card); border: 1px solid var(--border-card);
  background: var(--sunken); box-shadow: var(--shadow-card);
}
.moment-card__video,
.moment-card__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.moment-card figcaption {
  display: grid; gap: 2px; margin-top: var(--s-3);
}
.moment-card figcaption strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.moment-card figcaption span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.moments-note { margin-top: var(--s-5); color: var(--ink-3); font-size: 14px; }

@media (max-width: 860px) {
  .moments-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vorher / Nachher ---------- */
.ba { padding: var(--s-9) 0; }
.ba-lede { margin-bottom: var(--s-6); }
.ba-figure { margin: 0; }
.ba-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; max-width: 620px; margin-inline: auto;
  border-radius: var(--r-card); border: 1px solid var(--border-card);
  background: var(--sunken); box-shadow: var(--shadow-card);
  /* `touch-action` MUSS hier stehen: ohne das scrollt iOS die Seite, sobald
     der Finger auf dem Regler waagerecht wischt, und der Vergleich lässt sich
     auf dem Telefon gar nicht bedienen. */
  touch-action: pan-y;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.ba-clip {
  position: absolute; inset: 0;
  width: var(--ba-pos, 50%);
  overflow: hidden;
  /* Der Ausschnitt bleibt links verankert, das Bild darin behält seine volle
     Breite — sonst staucht es beim Ziehen und die Hälften passen nicht mehr
     aufeinander. */
  border-right: 2px solid var(--photo-strong);
}
/* Das Bild IM Ausschnitt behält die Breite der BÜHNE, nicht die des
   Ausschnitts — sonst staucht es beim Ziehen und die beiden Hälften passen
   nicht mehr aufeinander. `cqw` ist dafür das exakte Maß; `100vw` war nur
   ungefähr richtig und zählt eine Scrollleiste mit. */
.ba-stage { container-type: inline-size; }
.ba-clip .ba-img { width: 620px; max-width: none; }
@supports (width: 1cqw) {
  .ba-clip .ba-img { width: 100cqw; }
}

.ba-tag {
  position: absolute; bottom: var(--s-4);
  padding: 6px var(--s-3); border-radius: var(--r-chip);
  background: rgba(31, 42, 40, 0.72); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  pointer-events: none;
}
.ba-tag--before { left: var(--s-4); }
.ba-tag--after { right: var(--s-4); }

/* Der Range liegt unsichtbar über der ganzen Bühne: er trägt Tastatur,
   Touch und Screenreader, der sichtbare Griff ist nur Darstellung. */
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none;
  appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--ba-pos, 50%);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--photo-strong);
  box-shadow: var(--shadow-raised);
  pointer-events: none;
}
.ba-handle::before, .ba-handle::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.ba-handle::before {
  left: 11px; margin-top: -5px; border-right: 7px solid var(--ink);
}
.ba-handle::after {
  right: 11px; margin-top: -5px; border-left: 7px solid var(--ink);
}
.ba-range:focus-visible ~ .ba-handle {
  outline: 3px solid var(--t-600); outline-offset: 3px;
}
.ba-caption {
  max-width: var(--measure); margin: var(--s-4) auto 0;
  color: var(--ink-3); font-size: 14px; text-align: center;
}

/* ---------- Marktplatz ---------- */
.market { padding: var(--s-9) 0; background: var(--sunken); }
/* ---------- Umkreis-Schema ---------- */
.radius { margin: var(--s-6) 0 var(--s-7); }
.radius-controls {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-5);
}
.radius-lead { color: var(--ink-2); font-size: 15px; margin-right: var(--s-2); }
.radius-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.radius-figure {
  margin: 0; padding: var(--s-5);
  border-radius: var(--r-card); border: 1px solid var(--border-card);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.radius-svg {
  display: block; width: 100%; height: auto;
  /* Ohne Deckel wird das Schema auf einem breiten Bildschirm 735 px hoch und
     schiebt die Aussage darunter aus dem Bild. Es erklärt den Umkreis, es ist
     nicht die Bühne. */
  max-width: 560px; margin-inline: auto;
}

/* ---------- Die gezeichnete Karte ----------
   Sie ist Untergrund, nicht Inhalt: alles hier bleibt leise genug, dass der
   türkise Umkreis und die Punkte darauf sofort die lauteste Sache im Bild
   sind. Deshalb warme Neutraltöne aus dem Token-Satz und kein zweites Türkis
   — eine bunte Karte würde mit genau der Information konkurrieren, für die
   der Abschnitt existiert. */
/* Die Karte liegt auf einer WEISSEN Karte. Mit `--paper` als Grundfläche war
   der Unterschied zum Untergrund ~1 % Helligkeit und die Karte praktisch
   unsichtbar — sie muss lesbar sein, um etwas zu erklären. Also eine Stufe
   tiefer als Papier, und die Häuserblöcke noch eine darunter; die Straßen
   sind Weiß und trennen beides sauber. */
.map-land { fill: var(--sunken); }
.map-blocks rect { fill: #E6E0D3; }
.map-park { fill: #DDE8D3; }
.map-water {
  fill: none; stroke: #CFE2E5; stroke-width: 11;
  stroke-linecap: round; stroke-linejoin: round;
}
.map-roads path { fill: none; stroke: var(--surface); stroke-linecap: round; }
.map-roads--major path { stroke-width: 6.5; }
.map-roads--minor path { stroke-width: 3.5; }
.radius-ring {
  fill: none; stroke: var(--t-600); stroke-width: 2;
  stroke-dasharray: 6 7;
  transition: r var(--d-slow) var(--ease-entry);
}
.radius-ring-fill {
  fill: url(#radius-fill); stroke: none;
  transition: r var(--d-slow) var(--ease-entry);
}
.radius-me__halo { fill: var(--t-500); opacity: 0.18; }
.radius-me__dot { fill: var(--t-700); }

.radius-dot { transition: opacity var(--d-base) var(--ease-toggle),
                          transform var(--d-slow) var(--ease-entry); }
/* Die Punkte werden über die ATTRIBUTE `cx`/`cy` neu gesetzt — eine
   Transition auf `transform` am umgebenden <g> fasst das nicht an. Ergebnis
   bis zum 11.09.2026: der Kreis wuchs sauber animiert, und die Werkstätten
   darin SPRANGEN. `cx`/`cy` sind in SVG2 echte CSS-Eigenschaften und damit
   animierbar; wo ein Browser das nicht kann, springt es wie bisher — der
   Zustand ist also nie falsch, nur weniger schön. Dieselbe Dauer und Kurve
   wie der Ring, sonst laufen Kreis und Punkte auseinander. */
.radius-dot circle {
  fill: var(--t-600);
  transition: cx var(--d-slow) var(--ease-entry),
              cy var(--d-slow) var(--ease-entry);
}
.radius-dot text {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  fill: var(--ink-2); dominant-baseline: middle;
}
.radius-dot--out { opacity: 0; }

.radius-caption {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-4); color: var(--ink-2); font-size: 15px;
  flex-wrap: wrap;
}
/* Der Knopf steht in derselben Zeile wie die Zahl, die ihn begründet, und
   wandert erst auf schmalen Breiten darunter. `margin-left: auto` schiebt
   ihn ans Ende, ohne die Grundlinie von Zahl und Satz zu stören. */
.radius-cta { margin-left: auto; align-self: center; }
@media (max-width: 720px) {
  .radius-cta { margin-left: 0; width: 100%; }
}
/* Eine Zahl groß — der Abschnitt existiert für genau diese Zahl. */
.radius-caption strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 40px; line-height: 1; color: var(--t-900);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .radius-ring, .radius-ring-fill, .radius-dot,
  .radius-dot circle { transition: none; }
}

.market-radius {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin: var(--s-5) 0 var(--s-6);
}
.market-radius__lead { color: var(--ink-2); font-size: 15px; margin-right: var(--s-2); }
.chip {
  padding: 8px var(--s-3); border-radius: var(--r-chip);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: 14px; font-weight: 600;
}
.chip--on {
  background: var(--t-700); border-color: var(--t-700); color: var(--ink-inverse);
}
.market-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.market-side {
  padding: var(--s-6); border-radius: var(--r-card);
  border: 1px solid var(--border-card); background: var(--surface);
}
.market-side--after { box-shadow: var(--shadow-card); border-color: var(--t-200); }
.market-side__label {
  font-weight: 700; color: var(--ink-2); margin-bottom: var(--s-3);
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
}
.market-side--after .market-side__label { color: var(--t-700); }
.market-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.market-list li {
  position: relative; padding-left: var(--s-6);
  color: var(--ink-2); font-size: 15px;
}
.market-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--t-500);
}
/* Die „Bisher"-Seite ist NEUTRAL grau, nie rot: sie beschreibt Aufwand auf
   der Kundenseite, nicht schlechte Arbeit einer Werkstatt (dieselbe
   Richtungsregel wie die Vergleichs-Oberflächen der App, Invariante 46). */
.market-list--plain li::before { background: var(--border-input); }
.market-note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-6); max-width: var(--measure);
  color: var(--ink-2); font-size: 15px;
}
.market-note .row-ic { flex: none; width: 22px; height: 22px; color: var(--t-700); }

@media (max-width: 760px) {
  .market-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Umkreis-Anfrage (Startseite #umkreis, Werkstätten #anfragen) ----------
   Seit dem 14.09.2026. Beide Abschnitte teilen EIN Muster — Aussage links,
   Beweis rechts (`seiten-prinzipien.md`, „der leere halbe Bildschirm") —,
   weil es dieselbe Anfrage aus zwei Blickrichtungen ist: links steht, was
   sie bringt, rechts, wie sie in der App aussieht.
   Kontraste gerechnet (WCAG 2.x, 14.09.): auf `--sunken` trägt Text nur
   `--ink` 12,99 · `--ink-2` 5,78 · `--t-700` 5,61 · `--t-900` 9,48 — und
   NIE `--ink-3` (4,34, verboten). Auf den weißen Nachbau-Karten:
   `--ink-3` 4,94 · `--ink-2` 6,58 · `--t-900` 10,79; auf `--paper` innen
   `--ink-3` 4,66. Der Toast: Weiß auf `--ink` 14,79, Glocke `--t-200` 10,76.
   „Beispiel"-Marke `--warn-fg` auf `--warn-bg` 5,94 (vorher `--ink-2` auf
   `--hint`, deren Fläche kaum zu sehen war). */
.nearby { padding: var(--s-9) 0; background: var(--sunken); }
.leads { padding: var(--s-9) 0; background: var(--sunken); }
.nearby-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
}
.nearby-copy .lede { margin-top: var(--s-4); }

/* Drei Zahlen, groß — wer nur Überschrift und Zahlen liest, hat die Aussage.
   Dieselbe Bauart wie `.partner-facts`, auf hellem Grund. */
/* Umbrechend statt eines festen Dreier-Rasters: seit dem 14.09. stehen dort
   auch WÖRTER („Unverbindlich", „Abschaltbar"), und die ragten bei 1100 px
   52 px aus ihrer Spalte bis 3 px an die Karte daneben (gemessen). Eine
   Zahl, die nicht passt, rutscht jetzt in die nächste Zeile. */
.figures {
  list-style: none; padding: 0;
  margin: clamp(22px, 3vh, 30px) 0 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--s-4) clamp(20px, 3vw, 40px);
}
.figures li { display: grid; gap: 4px; align-content: start; min-width: 0; }
.figures strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.05;
  color: var(--t-900); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.figures span { color: var(--ink-2); font-size: 14px; line-height: 1.45; max-width: 19ch; }
.nearby-cta { align-items: center; margin-top: var(--s-6); gap: var(--s-3) var(--s-5); }
.nearby-note { margin-top: var(--s-3); max-width: var(--measure); color: var(--ink-2); font-size: 14px; }
/* Die Frage steht IM h2 — sie ist die Formulierung, nach der gesucht wird
   (cdr-seo, 14.09.) — und sieht weiter aus wie die Augenbraue darüber. */
h2 .eyebrow--in-title {
  display: block; margin-bottom: var(--s-3);
  font-family: var(--font-ui); line-height: 1.4;
}

.nearby-workshop {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  color: var(--ink-2); font-size: 15px; line-height: 1.6;
}
.nearby-workshop strong { color: var(--ink); }

/* ---------- Der Nachbau: eine Anfrage und ihre Antworten ---------- */
.offers,
.lead-card {
  position: relative; margin: 0;
  display: grid; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card); border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
}
/* Sichtbar, nicht nur im Screenreader: eine erfundene Zahl, die jemand als
   Aussage über seine eigene Lage lesen kann, ist eine Behauptung
   (Invariante 68). Im Fluss, nicht absolut: absolut gesetzt lag die Marke im
   ersten Entwurf über der Ecke des Anfragekastens (14.09., im Browser). */
.mock-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px var(--s-3);
}
/* Über dem GANZEN Nachbau, nicht nur an der Anfrage: gelesen werden die
   Antworten darunter (cdr-design-reviewer, 14.09.). */
.mock-head--end { justify-content: flex-end; }
/* Amber, nicht `--hint`: dessen Fläche maß 1,13:1 auf Papier und 1,20:1 auf
   Weiß — getragen hat die Marke nur die Versalschrift. Bernstein ist in
   diesem System die Farbe für „Achtung, genau hinsehen" (Text 5,94:1). */
.mock-example {
  padding: 3px 8px; border-radius: var(--r-chip);
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.offers-request {
  display: grid; gap: 3px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r-btn);
}
.mock-kicker {
  font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-700);
}
.mock-vehicle { font-weight: 650; color: var(--ink); font-size: 16px; }
.mock-problem { color: var(--ink-2); font-size: 15px; }
.mock-meta { color: var(--ink-3); font-size: 13px; }
.mock-caption { color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.offers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
}
.offer-ic {
  width: 22px; height: 22px; color: var(--t-600);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.offer-who { display: grid; min-width: 0; }
.offer-who strong { font-size: 15px; color: var(--ink); }
.offer-who span { font-size: 13px; color: var(--ink-3); }
.offer-price { display: grid; justify-items: end; text-align: right; }
.offer-price span { font-size: 12px; color: var(--ink-3); }
.offer-price strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.15; color: var(--t-900);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Darf umbrechen: vom `nowrap` der Preise geerbt, nahm eine Notiz auf 320 px
   rund 122 px ein und ließ dem Namen daneben 82 — gerechnet 26 px Text auf
   Text (cdr-design-reviewer, 14.09.). */
.offer-price .offer-price--note {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-2);
  white-space: normal; max-width: 13ch;
}

/* Werkstatt-Seite: dieselbe Karte, aus Sicht des Betriebs */
.lead-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-btn);
  background: var(--ink); color: var(--ink-inverse);
  font-size: 14px; font-weight: 600; line-height: 1.35;
  box-shadow: var(--shadow-card);
}
.lead-toast .row-ic {
  flex: none; color: var(--t-200);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lead-answer {
  display: grid; gap: 6px;
  padding: 14px 16px;
  background: var(--t-50); border-radius: var(--r-btn);
}
.lead-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  color: var(--ink-2); font-size: 14px;
}
.lead-price strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; color: var(--t-900); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .nearby-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Drei Zahlen nebeneinander werden auf dem Telefon zu drei Sätzen im
     Stakkato; zwei plus eine lesen sich wie ein Raster, nicht wie ein
     Umbruchfehler, weil die dritte die volle Breite bekommt. */
  .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures li:last-child { grid-column: 1 / -1; }
  .figures span { max-width: none; }
  .offer { grid-template-columns: minmax(0, 1fr) auto; }
  .offer-ic { display: none; }
}
/* Auf dem schmalsten Telefon rutscht der Preis UNTER den Namen: nebeneinander
   liefen „Partnerwerkstatt" und „Keine Preisschätzung" bei 320 px ineinander.
   Ein Wort ohne Umbruchstelle sprengt seine Spalte, und eine Messung der
   Kästen sieht das nicht — nur das Bildschirmfoto (14.09.). */
@media (max-width: 400px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .offer-price {
    grid-auto-flow: column; justify-content: start; align-items: baseline;
    justify-items: start; text-align: left; gap: 8px;
  }
  .offer-price .offer-price--note { max-width: none; }
}

/* ---------- Umsatz-Rechner (Werkstätten #rechner) ----------
   Seit dem 14.09.2026. Ein echter <input type="range"> je Zahl: Tastatur,
   Touch und Screenreader kommen mit, ohne nachgebaut zu werden (dieselbe
   Entscheidung wie beim Vorher/Nachher-Regler). Angesagt wird über
   `aria-valuetext` der Regler und EINE ruhige Statuszeile, die erst nach
   dem Loslassen spricht — nicht über jede Zahl bei jedem Schritt.
   Ohne JavaScript täten die Regler nichts: dann stehen sie nicht da, und ein
   Satz mit denselben Beispielzahlen steht an ihrer Stelle. */
.calc {
  margin-top: var(--s-6);
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--surface);
  border: 1px solid var(--t-100); border-radius: var(--r-card);
}
.calc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-4); }
.calc-head h4 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2vw, 22px); color: var(--ink);
}
.calc-hint { color: var(--ink-3); font-size: 14px; }
.calc-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  margin-top: var(--s-5);
}
.calc-inputs { display: grid; gap: var(--s-4); }
.calc-label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  color: var(--ink); font-size: 15px; font-weight: 550;
}
.calc-value {
  color: var(--t-900); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-range {
  display: block; width: 100%;
  /* 44 px Trefferfläche wie der Preis-Schalter; der sichtbare Balken bleibt
     schmal, der Finger trifft trotzdem. */
  min-height: 44px; margin: 0;
  accent-color: var(--t-700);
  cursor: pointer;
}
.calc-result {
  display: grid; gap: var(--s-4);
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--t-50); border-radius: var(--r-btn);
}
.calc-result p { display: grid; gap: 2px; }
.calc-result strong {
  font-family: var(--font-display); font-weight: 600;
  color: var(--t-900); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Ab 30 px statt 36: „+ 20.000 €" (Höchstwerte beider Regler) lief bei
   320 px 5 px aus dem Kasten (gemessen, 14.09.). */
.calc-result > * { min-width: 0; }
.calc-big strong { font-size: clamp(30px, 4.4vw, 48px); line-height: 1; }
.calc-result span { color: var(--ink-2); font-size: 14px; }
.calc-result-head { display: flex; }
/* Die Annahme steht AN der Zahl (JS schreibt sie mit) — nie eine Zahl ohne
   ihre Bedingung. Der Vergleich darunter ist der eine, den niemand im Kopf
   rechnet: ein Auftrag gegen den Monatspreis. */
.calc-big span { line-height: 1.45; }
.calc-compare {
  padding-top: var(--s-3);
  border-top: 1px solid var(--t-100);
}
.calc-compare strong { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.1; }
.calc-static { display: none; color: var(--ink-2); font-size: 15px; margin-top: var(--s-4); }
html:not(.js) .calc-grid { display: none; }
html:not(.js) .calc-hint { display: none; }
html:not(.js) .calc-static { display: block; }
.calc-note {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  color: var(--ink-2); font-size: 14px; line-height: 1.6;
}

@media (max-width: 760px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Preis-Schalter ---------- */
.price-switch {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; margin-bottom: var(--s-5);
}
.price-switch__label { color: var(--ink-2); font-size: 15px; }
.price-switch__track {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
.price-switch__opt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  /* 44 px, nicht 40: unter dem Finger ist das der Unterschied zwischen
     „trifft" und „trifft daneben" (WCAG 2.2, Projektmaß 48). */
  min-height: 44px; padding: 0 var(--s-4);
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink-2); background: transparent;
  border: 0; border-radius: 11px; cursor: pointer;
  transition: background var(--d-fast) var(--ease-toggle),
              color var(--d-fast) var(--ease-toggle);
}
.price-switch__opt:hover { color: var(--ink); }
.price-switch__opt.is-on {
  background: var(--surface); color: var(--t-900);
  box-shadow: 0 1px 2px rgba(31, 42, 40, 0.06);
}
.price-switch__gift {
  padding: 2px var(--s-2); border-radius: var(--r-chip);
  background: var(--ok-bg); color: var(--ok-fg);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 460px) {
  /* Der Zusatz ist die erste Sache, die weichen darf: die Zahl darunter
     sagt dasselbe, sobald jemand umschaltet. */
  .price-switch__gift { display: none; }
}

.price-term { color: var(--ink-3); font-size: 14px; margin-top: var(--s-2); }

.price-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(28px, 4vh, 44px);
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 4px;
}
/* Die mittlere Stufe ist die, die die meisten Betriebe betrifft — eine
   ruhige Hervorhebung, kein „Beliebt!"-Aufkleber, den niemand belegen kann. */
/* Die Karten waren das einzige Element im Abschnitt, das auf den Zeiger
   nicht reagierte — auf einer Seite, deren übriger Verlauf sich beim Scrollen
   bewegt, liest sich das wie ein anderes Dokument. Nur Schatten und Rand, in
   den Tokens, die schon da sind. */
.price-card {
  transition: box-shadow var(--d-base) var(--ease-toggle),
              border-color var(--d-base) var(--ease-toggle),
              transform var(--d-base) var(--ease-toggle);
}
@media (hover: hover) {
  .price-card:hover {
    box-shadow: var(--shadow-raised);
    border-color: var(--t-500);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-card { transition: none; }
  .price-card:hover { transform: none; }
}

.price-card--mid {
  border-color: var(--t-200);
  box-shadow: var(--shadow-raised);
}
.price-tier {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px); color: var(--ink);
}
.price-for { color: var(--ink-2); font-size: 15px; }
.price-amount { margin-top: var(--s-3); color: var(--t-900); }
.price-amount strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4vw, 38px); line-height: 1.05;
}
.price-amount span { color: var(--ink-2); font-size: 15px; }
/* `.price-year` gab es bis zum Schalter — die Jahreszeile stand fest in der
   Karte. Die Regel bleibt, falls irgendwo noch eine steht. */
.price-year { color: var(--ink-3); font-size: 14px; margin-top: var(--s-2); }
.price-note {
  margin-top: clamp(16px, 2vh, 22px);
  color: var(--ink-3); font-size: 14px; max-width: var(--measure);
}
.price-cta { margin-top: var(--s-5); }
/* Die Knöpfe füllt `main.js` in leere Plätze. Ohne JavaScript (oder ohne
   konfigurierte Registrierungsadresse) bliebe ein leerer Kasten mit Abstand
   stehen — dann soll der Platz verschwinden. */
.price-cta:not(:has(a)),
.leads .nearby-cta:not(:has(a)) { display: none; }
.price-extra {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(24px, 3.4vh, 36px);
}
.price-panel {
  background: var(--sunken);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.price-panel h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 2vw, 21px); color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.price-panel p { color: var(--ink-2); font-size: 15px; }
.price-panel .row-ic { flex: none; width: 22px; height: 22px; color: var(--t-700); }
.price-panel .btn { margin-top: var(--s-2); }

@media (max-width: 900px) {
  .price-grid, .price-extra { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vertrauen (dunkel) ---------- */
.trust {
  background: var(--t-900);
  color: var(--ink-inverse);
  padding: clamp(64px, 10vh, 110px) 0;
}
.trust .lede--dark { color: var(--t-50); }
.trust-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(28px, 4vh, 44px);
  align-items: start;
}
.trust-list { display: grid; gap: var(--s-6); }
.trust-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.trust-ic { width: 24px; height: 24px; color: var(--t-300); margin-top: 2px; stroke-width: 1.6; }
.trust-list h3 { font-size: 16.5px; color: var(--ink-inverse); }
.trust-list p { color: var(--t-100); font-size: 14.5px; margin-top: 5px; }

.honesty {
  background: var(--t-800);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 32px);
  position: sticky; top: calc(var(--header-h) + 24px);
}
html:not(.js) .honesty { position: static; }
.honesty-kicker {
  font-size: 13px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-200);
}
.honesty-kicker em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.honesty blockquote { margin-top: var(--s-4); }
.honesty blockquote p { font-size: 16px; line-height: 1.66; color: var(--t-50); }
.honesty strong { color: var(--ink-inverse); }
.honesty-note { margin-top: var(--s-4); font-size: 14px; color: var(--t-100); }

/* ---------- Abschluss ---------- */
.closing { padding: clamp(64px, 10vh, 110px) 0 clamp(56px, 9vh, 88px); text-align: center; }
.closing .lede { margin-inline: auto; }
.closing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vh, 44px);
  text-align: left;
}
.path-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 3vw, 32px);
}
.path-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.path-card p { color: var(--ink-2); font-size: 15px; margin-top: 9px; }
/* Ein Link im Fließtext braucht mehr als seine Farbe: t-700 in ink-2 misst
   1,03:1 (WCAG 1.4.1, Stufe A). Gilt für jeden Link mitten in einem Satz. */
.path-card p a,
.calc-note a,
.faq-item dd a { text-decoration: underline; text-underline-offset: 3px; }
.path-card .btn { margin-top: var(--s-5); }
.closing .soon-pill--big { margin-top: clamp(28px, 4vh, 44px); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: var(--s-8) 0 var(--s-9); }
.footer-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-6); flex-wrap: wrap;
}
.brand--footer .brand-mark { width: 26px; height: 26px; }
.brand--footer .brand-name { font-size: 16px; }
.footer-note { color: var(--ink-3); font-size: 13px; line-height: 1.7; text-align: right; }
/* Statutory links: quieter than any product link on the page, but a real
   underline — a legal link that only differs by colour is not findable for
   everyone (WCAG 1.4.1). */
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; margin-top: 10px; }
.footer-legal a { color: var(--ink-3); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--ink-1); }

/* ---------- Reveals ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-entry) var(--ease-toggle),
              transform var(--d-entry) var(--ease-entry);
}
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .trust-grid { grid-template-columns: 1fr; }
  .honesty { position: static; }
}

/* ---------- Der Schleier zwischen 900 und 1200 px ----------
   Die Prozentwerte des Verlaufs sind am Sichtfeld verankert, die Textspalte
   dagegen an der Schale: 620 px feste Breite in einer Schale, die mitschrumpft.
   Der rechte Rand des Textes WANDERT dadurch nach rechts, während der Verlauf
   stehen bleibt — bei 1440 px liegt er bei 55 % der Breite, bei 901 px schon
   bei 72 %. Dort trug der alte Verlauf noch 0,34 Deckung, und Weiß maß über
   einem hellen Fenster des Clips 2,85:1 (gemessen am p99-Pixel des echten
   Videos, nicht an einem gedachten Weiß — cdr-design-reviewer, 11.09.).
   1024 px ist iPad quer und jedes kleine Notebook; die QA-Matrix sprang von
   1440 auf 1024 auf 500 und besuchte genau dieses Band nie.
   Die Stufen rücken hier deshalb nach hinten: bei 72 % trägt der Verlauf
   jetzt 0,80 (Weiß ≈ 9,6:1), bei 55 % 0,89. */
@media (max-width: 1200px) {
  .hero-film__scrim {
    background:
      linear-gradient(100deg,
        rgba(18, 24, 23, 0.95) 0%,
        rgba(18, 24, 23, 0.92) 50%,
        rgba(18, 24, 23, 0.78) 76%,
        rgba(18, 24, 23, 0.40) 90%,
        rgba(18, 24, 23, 0.22) 100%),
      linear-gradient(180deg,
        rgba(18, 24, 23, 0.00) 55%,
        rgba(18, 24, 23, 0.35) 100%);
  }
  /* Dasselbe im Partner-Band, und dort ist es schärfer: die Zahlen sind
     Türkis-300 und brauchen 3:1. Bei 901 px lagen sie auf 2,94:1. */
  .partner-film__scrim {
    background: linear-gradient(96deg,
      rgba(18, 24, 23, 0.95) 0%,
      rgba(18, 24, 23, 0.90) 55%,
      rgba(18, 24, 23, 0.80) 80%,
      rgba(18, 24, 23, 0.45) 92%,
      rgba(18, 24, 23, 0.28) 100%);
  }
}

/* Unter 900 px hört der Film auf, Hintergrund zu sein.
   Der Grund ist gemessen, nicht Geschmack: `object-fit: cover` skaliert in
   einem hohen, schmalen Rahmen nach der HÖHE — aus 1280 px Breite bleiben
   rund 500 sichtbar, und die beiden Gesichter landen ausgerechnet hinter der
   Überschrift. Dort braucht der Text einen dichten Schleier, und unter dem
   war vom Motiv nichts mehr zu erkennen: ein dunkles Rauschen, für das sich
   der Aufwand nicht lohnt. Also bekommt der Film eine eigene Bahn — volle
   Breite, 16:9, ungeschleiert.

   Seit dem 12.09.2026 steht diese Bahn ÜBER dem Text, nicht darunter.
   Vorher begann der Film erst nach rund 950 px Text: ein „Film-Hero", den ein
   Telefonbesucher erst nach einem vollen Scroll sah — 419 KB Video, bezahlt
   und nicht gezeigt (cdr-design-reviewer, 12.09., aus dem CSS gerechnet). Der Text steht auf der vollen
   Markenfläche (Weiß auf #121817 misst 17,97:1), und das Motiv ist zum ersten
   Mal ganz zu sehen. Zwei Aufgaben, zwei Flächen. */
@media (max-width: 900px) {
  .hero--film {
    display: flex; flex-direction: column;
    padding-bottom: 0;
  }
  /* `static`, damit der Halt-Knopf unten am ABSCHNITT hängt (also in der
     Ecke der Filmbahn) und nicht am Textblock. In der Spalte überlagern sich
     die beiden Flächen nicht, der z-index wird hier also nicht gebraucht. */
  .hero-film__inner { order: 1; position: static; padding-top: 0; }
  .hero-film {
    position: static; order: 0;
    width: 100%; aspect-ratio: 16 / 9;
    margin-bottom: clamp(24px, 4vh, 40px);
  }
  .hero-film__video { object-position: 58% 50%; }
  .hero-film__scrim {
    /* Hier liegt kein Text mehr auf dem Bild. Es bleibt eine schmale Kante
       nach oben, damit die Bahn nicht hart gegen die Textfläche stößt. */
    background: linear-gradient(180deg,
      rgba(18, 24, 23, 0.55) 0%,
      rgba(18, 24, 23, 0.00) 20%);
  }
  .hero-copy--film { max-width: none; }
  .code-cta { max-width: none; }
  /* Der Knopf gehört zum Bild, das er anhält. Seit die Filmbahn am 12.09.
     nach OBEN gewandert ist, sitzt er entsprechend oben rechts — vorher
     klebte er unten am Abschnitt und überlappte dort die letzte Textzeile
     („Auftrag mit Code ansehen" war halb verdeckt). Der Scrim ist oben am
     dichtesten (0,55 → 0 bei 20 %), der Knopf hat dort also seinen
     Kontrast. */
  .film-toggle { right: 14px; top: 14px; bottom: auto; }
}

/* Drei Spalten mit einer 26-px-Fraunces-Zahl passen unter ~420 px nicht mehr
   in die Karte — „Geprüft" bricht nicht um und `.partner { overflow: hidden }`
   schneidet es ab. Zwei Spalten und eine kleinere Zahl. */
@media (max-width: 420px) {
  .partner-facts { grid-template-columns: 1fr 1fr; }
  .partner-facts strong { font-size: 22px; }
}

@media (max-width: 560px) {
  /* Zwei Knöpfe nebeneinander sind hier zwei halbe Knöpfe. Untereinander,
     volle Breite, Reihenfolge = Wichtigkeit. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .code-cta { gap: var(--s-3); padding: 13px 14px; }
  .code-cta__boxes span { width: 22px; height: 29px; border-radius: 7px; }
  .code-cta__text strong { font-size: 15px; }
  .code-cta__text span { font-size: 13px; }
}

/* Ab hier ist neben Text und Pfeil kein Platz mehr für vier Kästchen. Sie
   verschwinden statt zu schrumpfen: erkennbar oder gar nicht — ein 14 px
   breites Kästchen sagt niemandem mehr „hier kommt dein Code hin". */
@media (max-width: 380px) {
  .code-cta__boxes { display: none; }
}

@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-5);
    padding-block: var(--s-4);
  }
  /* Mobile: Bühne klebt oben, Kapitel laufen darunter durch (arpiX-Muster) */
  html.js .story-track[data-story] { height: auto; }
  html.js .story-pin { position: static; height: auto; overflow: visible; align-items: start; }
  .story-stage {
    order: -1;
    position: sticky; top: calc(var(--header-h) + 8px);
    z-index: 5;
  }
  html:not(.js) .story-stage { position: static; }
  .stage-card { box-shadow: var(--shadow-raised); }
  .story-steps { padding-top: var(--s-6); }
  html.js .story-steps .story-step { min-height: min(38vh, 330px); }
  html.js .story-step p { max-height: none; overflow: visible; opacity: 1; color: var(--ink-3); }
  html.js .story-step.is-active p { color: var(--ink-2); }
  .story-stage .stage-example-note { position: static; text-align: right; margin-top: 8px; }
  /* Gemessen bei 760 px: Marke + fünf Navigationspunkte + Knopf laufen um
     114 px über die Inhaltsbreite hinaus — und `document.scrollWidth` hätte
     es nicht verraten, weil die Seite `overflow-x` klemmt. Unter 900 px
     trägt der Knopf nichts, was die Seite nicht sowieso mehrfach anbietet
     (Hero-CTA, Werkstatt-Sektion, Preise), also weicht er. */
  /* Nur in dem Band, in dem die Navigation mit dem Knopf um denselben Platz
     kämpft (gemessen: 114 px Überlauf bei 760 px). Unter 700 px ist die
     Navigation ohnehin weg — dort ist Platz, und eine klebende Leiste, in der
     nur noch die Wortmarke steht, kostet 68 px Bildhöhe für nichts
     (cdr-design, 08.09.). */
  .btn-header { display: none; }
  .workshop-grid { grid-template-columns: 1fr; }
  .workshop-intro { position: static; }
  .closing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .site-nav { display: none; }
  /* Der Knopf kommt zurück, sobald die Navigation den Platz freigibt —
     mit kurzem Text und einem Ziel, das der Finger trifft. */
  .btn-header {
    display: inline-flex; min-height: 44px; padding: 0 14px; font-size: 14px;
  }
  .btn-header .btn-header__long { display: none; }
  .hero { padding-top: 28px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .stage-moments { gap: 8px; }
  .moment-hint { display: none; }
  .stage-head { flex-wrap: wrap; }
  .chip-stack { justify-items: start; }
  .gate-note { margin-left: 0; flex-basis: 100%; }
  /* Bühne kompakt halten: das Kapitel darunter braucht Lesefläche */
  .stage-card { padding: 14px; }
  .stage-card > * + * { margin-top: 12px; }
  .invite-line { font-size: 12.5px; padding: 8px 12px; }
  .moment-name { font-size: 12.5px; }
  .seal-line { flex-wrap: wrap; font-size: 10.5px; row-gap: 1px; }
  .seal-line .mono { flex-basis: 100%; }
  .approval-card { padding: 10px 12px; }
  .approval-head p { font-size: 13px; }
  .approval-amount { font-size: 14px; }
  .part-row { font-size: 13px; }
  .gate-item { font-size: 12px; }
  .gate-note { font-size: 12px; }
  .footer-row { flex-direction: column; }
  .footer-note { text-align: left; }
  .footer-legal { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .brand-name { font-size: 16px; }
  .code-boxes span { width: 38px; height: 46px; font-size: 19px; }
  /* Die Abschluss-Sektion wiederholt den Status — hier zählt die Marke */
  .site-header .soon-pill { display: none; }
}

/* ---------- Kopfzeile mit „Anmelden" (14.09.2026, gemessen) ----------
   Das zusätzliche „Anmelden" hat die alte Staffelung gesprengt — im echten
   Chrome gemessen, rechte Kante gegen die Spur statt `scrollWidth`:
   905 px liefen 60 px über, bei ~745 px brach die Navigation zweizeilig um,
   bei 390 px 82 px Überlauf. Die Staffelung jetzt:
     ≥ 1000 px   Marke · Navigation · Anmelden · Werkstatt registrieren
     901–999     Marke · Navigation · Anmelden
     761–900     Marke · Navigation ohne „Preise" · Anmelden
                 („Preise" ist ein Anker auf der Werkstatt-Seite, die in der
                 Navigation direkt davor steht)
     521–760     Marke · Anmelden · Werkstatt   (bei 705 und 725 px brach
                 die Navigation sonst noch zweizeilig um; 745 px war die
                 erste saubere Messung)
     ≤ 520       Marke · Anmelden
   Auf dem Telefon weicht damit der Werkstatt-Knopf dem Weg zurück ins
   Konto: die nackte App-Adresse schickt Abgemeldete seit dem 14.09. HIERHER,
   und ohne „Anmelden" wäre die Startseite für sie eine Sackgasse. Betriebe
   finden ihren Weg auf der Startseite direkt unter dem Hero
   (#umkreis, „Anfragen für Betriebe"). Diese Regeln stehen bewusst am Ende:
   sie müssen die Blöcke bei 900 und 700 px oben überschreiben. */
@media (max-width: 999px) {
  .btn-header { display: none; }
}
@media (max-width: 900px) {
  .site-nav a[href="/fuer-werkstaetten#preise"] { display: none; }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
  .btn-header {
    display: inline-flex; min-height: 44px; padding: 0 14px; font-size: 14px;
  }
  .btn-header .btn-header__long { display: none; }
  .header-login { margin-left: auto; }
}
@media (max-width: 520px) {
  .btn-header { display: none; }
  /* Nur auf der Werkstatt-Seite umgekehrt: dorthin kommt ein Betrieb meist
     über einen weitergeleiteten Link auf dem Telefon, und „Anmelden" als
     einzige Handlung liest sich als „nicht für mich" — der erste
     „Werkstatt registrieren" stand gemessen 5,5 Bildschirme tiefer
     (cdr-persuasion, 14.09.). Wer schon ein Konto hat, findet „Anmelden"
     auf der Startseite. */
  .page-werkstatt .btn-header { display: inline-flex; margin-left: auto; }
  .page-werkstatt .header-login { display: none; }
}
@media (max-width: 400px) {
  .header-row { gap: var(--s-3); }
  .brand { gap: 8px; }
  .header-login { font-size: 14px; padding: 0 2px; }
}
/* 320 px: Marke und „Anmelden" brauchten 297 px in einer 288 px breiten
   Spur (gemessen) — die Wortmarke gibt zuerst nach, nie der Rand. */
@media (max-width: 360px) {
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 15px; }
  /* Auf der Werkstatt-Seite steht rechts der breitere Knopf statt
     „Anmelden": Marke plus Knopf liefen bei 320 px 16 px in den Rand
     (gemessen, 14.09.). */
  .page-werkstatt .brand-name { font-size: 14px; }
  .page-werkstatt .btn-header { padding: 0 10px; font-size: 13px; }
}

/* Ohne JS (und bei reduzierter Bewegung): Kapitel voll lesbar, Punkte „erledigt" */
html:not(.js) .story-step h3 { color: var(--ink); }
html:not(.js) .story-step p { color: var(--ink-2); }
html:not(.js) .step-time { color: var(--t-700); }
html:not(.js) .story-step::before { border-color: var(--t-600); background: var(--t-100); }

/* ---------- Reduzierte Bewegung: Endzustände, keine Degradierung ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Der Film startet gar nicht (js/main.js kehrt vorher zurück) — es steht
     das Standbild, und das IST der Endzustand. Die Bahn darf dann auch nicht
     herangefahren stehenbleiben, falls GSAP je vorher lief. */
  .hero-film { transform: none !important; }
  .code-cta, .code-cta__arrow, .code-cta__boxes span { transition: none; }
  .code-cta:hover { transform: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .story-track[data-story] { height: auto; }
  html.js .story-pin { position: static; height: auto; overflow: visible; }
  html.js .story-steps .story-step { min-height: 0; }
  html.js .story-step p { max-height: none; opacity: 1; overflow: visible; }
  .story-step, .story-step::before, .step-time, .story-step h3 { transition: none; }
  html.js .chip-stack .chip { opacity: 0; }
  html.js .chip-stack .chip:last-child { opacity: 1; }
  html.js .moment-missing { display: none; }
  .story-step.is-active::before { transform: none; }
  html.js .story-step h3 { color: var(--ink); }
  html.js .story-step p { color: var(--ink-2); }
  html.js .step-time { color: var(--t-700); }
  html.js .story-step::before { border-color: var(--t-600); background: var(--t-100); }
  * { scroll-behavior: auto !important; }
}