/* =============================================================================
   ds.css — Design-System-Scale für die Landing-Mockups
   1:1 aus src/frontend/static/css/tokens.css + base.css (Semantic-Layer).
   Zweck: Mockups nutzen DIESELBE Type-Scale / Spacing / Line-Heights / Weights /
   Typo-Rollen wie die App — keine ad-hoc px-Werte mehr (Harmonie).
   Farben + Komponenten kommen aus beweis-kit.css.
   ============================================================================= */
:root{
  /* Type-Scale (App + Landing) */
  --font-size-display-sm: 40px;   /* Landing-Hero-Headline */
  --font-size-h1:         24px;
  --font-size-h2:         18px;   /* + Landing Trust-Card-H3 */
  --font-size-h3:         16px;
  --font-size-body-lg:    17px;   /* Landing-Body / Lead */
  --font-size-body:       14px;
  --font-size-label:      13px;
  --font-size-hint:       12px;
  --font-size-xs:         11px;
  --font-size-2xs:        10px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:   1.1;
  --line-height-snug:    1.2;
  --line-height-display: 1.2;
  --line-height-heading: 1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Spacing (4px-Grid) */
  --spacing-0:0; --spacing-0-5:2px; --spacing-0-75:3px;
  --spacing-1:4px; --spacing-1-5:6px; --spacing-2:8px;
  --spacing-3:12px; --spacing-3-5:14px; --spacing-4:16px;
  --spacing-5:20px; --spacing-6:24px; --spacing-8:32px;
  --spacing-10:40px; --spacing-12:48px; --spacing-16:64px; --spacing-24:96px;

  /* Radien + Border-Widths */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-pill:9999px;
  --border-width-1:1px; --border-width-2:2px; --border-width-3:3px;

  /* Container */
  --max-width-prose:720px; --max-width-content:1080px; --landing-max-width:1120px;

  /* Laufbreite (Measure) — zentrale Lese-Zeilenlänge. Breit genug für ruhigen Fluss,
     schmal genug, dass Text + analytische Exhibits nicht „gestreckt" wirken. */
  --measure-text:800px;       /* Fließtext: Lead, Keystone, Sub-Absätze */
  --measure-heading:800px;    /* Überschriften laufen aufs Text-Maß */
  --measure-exhibit:700px;    /* Balken + Tabellen — Cap gegen das Strecken */

  /* Grid-Pass — EINE linke Achse, Container zentriert. Über alle Sektionen anwendbar.
     Text + Grafiken docken an dieselbe linke Kante; kein margin-inline:auto auf Exhibits. */
  --grid-page:1040px;         /* Section-Container (margin:0 auto, zentriert im Viewport) */
  --grid-figure:860px;        /* breite Exhibits (Balken/Tabellen/Diagramme), linksbündig */
  --rhythm-section:var(--spacing-24);  /* 96 — Sektion ↔ Sektion */
  --rhythm-block:var(--spacing-12);    /* 48 — Block ↔ Block in einer Sektion */
  --rhythm-group:var(--spacing-6);     /* 24 — Kopf → Inhalt */
}

/* Typo-Rollen — setzen font-size + line-height + font-weight als EINE Klasse.
   Neue Bausteine nutzen die Klasse statt das Token-Trio. */
.text-display-sm{font-size:var(--font-size-display-sm);line-height:var(--line-height-display);font-weight:var(--font-weight-extrabold)}
.text-h1{font-size:var(--font-size-h1);line-height:var(--line-height-heading);font-weight:var(--font-weight-bold)}
.text-h2{font-size:var(--font-size-h2);line-height:var(--line-height-heading);font-weight:var(--font-weight-bold)}
.text-h3{font-size:var(--font-size-h3);line-height:var(--line-height-heading);font-weight:var(--font-weight-semibold)}
.text-lead{font-size:var(--font-size-body-lg);line-height:var(--line-height-relaxed);font-weight:var(--font-weight-regular)}
.text-body{font-size:var(--font-size-body);line-height:var(--line-height-normal);font-weight:var(--font-weight-regular)}
.text-label{font-size:var(--font-size-label);line-height:var(--line-height-normal);font-weight:var(--font-weight-regular)}
.text-caption{font-size:var(--font-size-hint);line-height:var(--line-height-normal);font-weight:var(--font-weight-regular)}
.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-snug);font-weight:var(--font-weight-regular)}
.text-micro{font-size:var(--font-size-2xs);line-height:var(--line-height-snug);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em}

/* lp-*-Rampe — Formen-Kontrakt docs/work/2026-08-13-landing-formen-kontrakt.md §1.
   Ersetzt .stmt-h/.eyebrow/.lead NUR in neu gebauten Kapitel-Partials (Migration
   sektionsweise, kein Big-Bang). Keine Farbe/Font-Family gesetzt (wie .text-*
   oben) — Mono/Terracotta kommen als lokaler Modifier am Verwendungsort. */
.lp-kapitel{font-size:clamp(2rem, 1.74rem + 1.13vw, 2.75rem);font-weight:var(--font-weight-extrabold);line-height:1.1;letter-spacing:-.01em}
/* Nummernstempel vor einem Prozess-Unterkapitel — derselbe Kreis wie die Station der
   Laufmappe (.mp-st__stamp, _kap-prozess.html), in em skaliert er mit dem Titel. */
.lp-kapitel__stamp{display:inline-grid;place-items:center;width:1.8em;height:1.8em;margin-right:.45em;border-radius:50%;
  vertical-align:.12em;background:var(--color-primary-edge);color:var(--color-on-accent);
  font-family:var(--mono);font-size:.5em;font-weight:var(--font-weight-semibold);letter-spacing:0;font-variant-numeric:tabular-nums}
/* Lead = Vorspann in Textgröße — hebt sich über Farbe (secondary) und Breite (60ch)
   ab, nicht über Größe; nur der Sektionstitel trägt Größe. .lead (Kopf-Block-Kanon)
   trägt dieselbe Rolle, s.u. */
.lp-lead{font-size:var(--font-size-body-lg);font-weight:400;line-height:1.6;color:var(--color-text-secondary);max-width:60ch}
.lp-body{font-size:17px;font-weight:400;line-height:1.55}
.lp-label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}

/* Exponat-Textmarker als Fließtext-Akzent — Akzent-Hierarchie der Landing:
   Headlines tragen Schwung/Terracotta, Fließtext-Beweisstellen (Beträge,
   Konten, DAS Wort) diesen Marker, sonst nichts. Maximal EINE Stelle je
   Sektion. Rezept identisch mit .nz-mark der Nutzen-Karten (dort wegen der
   rough.js-Kopplung eigene Klasse); Stiftfarbe --hand-marker aus
   landing-kit.css, Dark-Ton dort gedämpft. Registry-Texte setzen ihn per
   ==text== (Renderer preview.py _render_body). */
.lp-mark{background:var(--hand-marker);color:inherit;padding:0 2px;border-radius:2px}

/* Gewichts-Leiter der Satzauszeichnung — EINE zentrale Regel für <b>/<strong> in
   der Landing-Welt: Pointe oder Fachbegriff im Fließtext bekommt Gewicht, nie die
   Extrabold-Stufe der Titel. Zeilenkopf (.lp-zk, vom Renderer gesetzt — Fett am
   Zeilenanfang, das die Zeile betitelt, preview.py _render_body) bleibt extrabold:
   er wirkt wie ein Mini-Titel, nicht wie eine Pointe im Satz. */
b, strong { font-weight: var(--font-weight-semibold); }
.lp-zk { font-weight: var(--font-weight-extrabold); }

/* =============================================================================
   Landing-Chrome — die EINE Quelle für Sektions-Kopf, Container, CTA und Achse.
   Jede Sektion nutzt diese Klassen (kein eigenes .head/.lead/.mv-head mehr).
   Achse: linksbündig, eine Kante. Container zentriert im Viewport, Inhalt links.
   Section-spezifische Bauteile (Mekko, Ordner, Engine-Overrides) bleiben lokal.
   ============================================================================= */
.section{max-width:var(--grid-page);margin-inline:auto}

/* Kopf-Block — Eyebrow → Headline → Lead, alles an der linken Achse.
   Hierarchie-Abstände: Eyebrow ist Label zur Headline (enger Abstand, gemeinsame Einheit);
   Lead steht als eigener Absatz unter der Headline (großzügigerer Abstand). */
.eyebrow{font-family:var(--mono);font-size:var(--font-size-label);font-weight:var(--font-weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-accent);display:block}
.stmt-h{margin-top:var(--spacing-3);font-size:clamp(2rem, 1.74rem + 1.13vw, 2.75rem);line-height:1.1;font-weight:var(--font-weight-extrabold);letter-spacing:-.01em;color:var(--color-text-primary);max-width:var(--measure-heading)}
.stmt-h .acc{color:var(--color-text-accent)}   /* Terracotta-Schlüsselwort ohne Hand-Unterstreichung (Alternative zu .key) */
.lead{margin-top:var(--spacing-6);margin-bottom:var(--spacing-8);font-size:var(--font-size-body-lg);line-height:1.6;color:var(--color-text-secondary);max-width:60ch}
.src{margin-top:var(--spacing-8);font-size:var(--font-size-xs);line-height:var(--line-height-normal);font-style:italic;color:var(--color-text-muted);max-width:var(--measure-text)}
.src b{font-style:normal;color:var(--color-text-primary)}

/* rough.js-Schlüsselwort — ein Terracotta-Wort mit loser Hand-Unterstreichung */
.key{position:relative;color:var(--color-text-accent);white-space:nowrap;display:inline-block}
.key-dot{color:var(--color-text-primary)}
.key svg{position:absolute;left:-6px;right:-6px;bottom:-11px;width:calc(100% + 12px);height:18px;overflow:visible;pointer-events:none}

/* CTA — linksbündig, primäre Handlung direkt unter dem Kopf */
.cta{display:flex;align-items:center;gap:var(--spacing-5);margin-top:var(--spacing-6);flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;border:0;cursor:pointer;background:var(--color-primary);color:var(--color-on-primary);font-family:var(--font);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);padding:11px 22px;border-radius:var(--radius-md);text-decoration:none;box-shadow:0 2px 10px -3px rgba(101,38,11,.4);transition:background var(--lp-dur-fast) var(--lp-ease-out),transform var(--lp-dur-fast) var(--lp-ease-out),box-shadow var(--lp-dur-fast) var(--lp-ease-out)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 6px 18px -4px rgba(101,38,11,.45)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px -3px rgba(101,38,11,.4)}
.cta-sec{font-family:var(--font);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-decoration:none;transition:color var(--lp-dur-fast) var(--lp-ease-out)}
.cta-sec:hover{color:var(--color-text-accent)}

/* Fall-Akkordeon (.kv-fall, native <details>) — sanftes Auf-/Zuklappen per
   ::details-content statt Hart-Umschalten. Progressive Enhancement: ohne
   Browser-Support (kein Chromium) bleibt es das native Hart-Umschalten.
   Reduced-Motion ist bereits global abgeschaltet (landing-chrome.css). */
.kv-fall{interpolate-size:allow-keywords}
.kv-fall::details-content{block-size:0;overflow-y:clip;
  transition:block-size var(--lp-dur-base) var(--lp-ease-out),content-visibility var(--lp-dur-base) allow-discrete}
.kv-fall[open]::details-content{block-size:auto}

/* Kopfzeile des Falls: ganze Zeile klickbar (Hover/Fokus-Fläche), Chevron aus
   zwei Bordern rechts statt Text-Marker (▸ wird nicht als „aufklappbar"
   erkannt), dreht bei [open] um 180°. Trennlinien setzt der jeweilige
   Listen-Container im Partial. */
.kv-fall__sum{display:flex;align-items:center;gap:var(--spacing-4);list-style:none;cursor:pointer;
  padding:var(--spacing-4) 0;color:var(--color-text-primary);padding-left:var(--spacing-5);
  border-radius:var(--radius-lg);transition:background var(--lp-dur-fast) var(--lp-ease-out)}
.kv-fall__sum::-webkit-details-marker{display:none}
.kv-fall__sum:hover,.kv-fall__sum:focus-visible{background:var(--lp-accent-warm-soft)}
.kv-fall__sum:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.kv-fall__sum::after{content:"";flex:0 0 auto;align-self:center;width:8px;height:8px;
  border-right:var(--border-width-2) solid var(--color-text-secondary);
  border-bottom:var(--border-width-2) solid var(--color-text-secondary);
  transform:rotate(45deg);transition:transform var(--lp-dur-fast) var(--lp-ease-out)}
.kv-fall[open] > .kv-fall__sum::after{transform:rotate(225deg)}
.kv-fall__label{flex:1 1 auto;min-width:0;max-width:var(--measure-text)}

/* Fall-Kopf (Titel + Story + Begründung) — geteilt zwischen Hero-Exponat
   (_hero.html, per JS gefüllt) und Beispiele-Galerie (_beispiele.html,
   serverseitig gerendert): eine Stelle statt zwei Kopien. bz-grund ist der
   längste Lesetext der Fläche (Begründung) und läuft darum auf Landing-
   Fließtextgröße statt kleiner als seine eigene Titelzeile; bz-titel bleibt
   eine Gewichtsstufe + 2px darüber (Karten-Titel-Rolle). */
/* Fuß-Links eines Kapitels (Brücke Startseite ↔ /funktionen, Beispiel-Galerie):
   Label-Größe, fett, Akzent — wie .lp-zurueck. Mehrere Links stehen nebeneinander. */
.lp-bruecke{display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-6);margin-top:var(--spacing-6)}
.lp-bruecke a{font-size:var(--font-size-label);font-weight:var(--font-weight-bold);
  color:var(--color-text-accent);text-decoration:none}
.lp-bruecke a:hover{text-decoration:underline}

.bz-kopf{max-width:var(--measure-text);margin-bottom:var(--spacing-6)}
.bz-titel{margin:0;font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);
  line-height:var(--line-height-snug);letter-spacing:-.005em;color:var(--color-text-primary)}
.bz-story{margin-top:var(--spacing-2);font-size:var(--font-size-body-lg);line-height:1.55;
  color:var(--color-text-secondary);max-width:60ch}
.bz-story p{margin:0}
.bz-story p + p,.bz-story p + .bz-story__ul,.bz-story__ul + p{margin-top:var(--spacing-2)}
.bz-story__ul{margin:0;padding-left:var(--spacing-5);list-style:disc}
.bz-story__ul li{margin-top:var(--spacing-0-5)}
.bz-grund{margin-top:var(--spacing-4);font-size:var(--font-size-body-lg);line-height:1.55;
  color:var(--color-text-primary);max-width:var(--measure-text)}
/* Nach dem Mount steht dieselbe Begründung als .vreason in der Karte —
   Server-Text bleibt im DOM (Suchmaschinen), verschwindet nur optisch. */
.kv-fall[data-mounted="1"] .bz-grund,.bz-fall[data-mounted="1"] .bz-grund{display:none}