/* =============================================================================
   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}

/* =============================================================================
   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:var(--font-size-display-sm);line-height:var(--line-height-display);font-weight:var(--font-weight-extrabold);letter-spacing:-.025em;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) */
@media (max-width:760px){.stmt-h{font-size:var(--font-size-h1)}}   /* Mobil: Sektions-Headline EINMAL zentral verkleinern — nicht je Sektion */
.lead{margin-top:var(--spacing-6);margin-bottom:var(--spacing-8);font-size:var(--font-size-body-lg);line-height:var(--line-height-relaxed);color:var(--color-text-primary);max-width:var(--measure-text)}
.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;font-weight:var(--font-weight-semibold);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;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)}