/* ============================================================
   variables.css — Design-System aus artefakte/09-DESIGN-SYSTEM.md
   Farben im Logo gemessen (2026-07-16), Herkunft dokumentiert in 09.
   ============================================================ */

:root {
  /* Farben (09) */
  --rot:      #F04848; /* Logo-Wortmarke: CTA, Preis-Akzent, Pulslinie hell */
  --rot-tief: #C2322F; /* Funktionsrot: Textlinks, Hover, Fehler */
  --rot-aktiv:#A82A27; /* Active-State */
  --blau:     #50B0D8; /* Logo-Subline: NUR Datenfarbe / Pulslinie auf dunkel */
  --nacht:    #14181D; /* Primärtext, dunkle Sektionen, Footer */
  --nacht-2:  #1C2128; /* erhabene Fläche auf Nacht: Monitor, dunkle Karten */
  --linie-dunkel: rgb(245 248 250 / 0.14); /* Linien und Raster auf dunkel */
  --grau:     #4A525C; /* Sekundärtext */
  --nebel:    #E2E5E8; /* Linien, Borders */
  --papier:   #FFFFFF; /* Seitengrund — klar, kühl; die Wärme kommt aus den Fotos */
  --flaeche:  #F3F5F7; /* kühle Wechselfläche: Zebra-Sektionen, stille Füllungen */
  --licht:    #F5F8FA; /* Text/Elemente auf dunklen Flächen (kühl, kein Beige) */
  --weiss:    #FFFFFF;
  --fokus-ring: rgb(240 72 72 / 0.25);
  --puls-lauf: #FFA3A3; /* Wanderimpuls der Pulslinie auf hellen Flächen (helles Rot) */
  --schatten-overlay: 0 8px 24px rgb(20 24 29 / 0.16); /* einzige Schattenstufe */

  /* Typografie (09) — Barlow / Barlow Condensed, self-hosted */
  --font-text: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --fs-mega:      clamp(3rem, 0.8rem + 8.4vw, 7.5rem);
  --fs-display:   clamp(2.6rem, 1rem + 6.4vw, 5rem);
  --fs-statement: clamp(2.1rem, 1.1rem + 4vw, 3.6rem);
  --fs-h2:      clamp(2rem, 1.2rem + 3.2vw, 3.1rem);
  --fs-h3:      clamp(1.35rem, 1.05rem + 1.4vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-meta:    0.875rem;
  --fs-kicker:  0.8125rem;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  /* Spacing-Skala (09) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --container: 1200px;
  --container-text: 720px;
  --gutter: 20px;
  --radius-s: 2px;
  --radius-m: 4px;
  --header-h: 88px;
  --header-h-klein: 64px;

  /* Diagonale (Stencil-Schnitt, 09) */
  --diagonale: 48px;

  /* Animation (09/10) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-ui: 150ms;
  --t-reveal: 320ms;
  --t-medium: 450ms;
  --t-lang: 700ms;
  --t-puls: 600ms;

  /* Master-Takt (DESIGN.md „Ein Takt für alles"): alle Endlos-Bewegungen laufen synchron */
  --takt: 3.8s;
  --takt-start: 1.2s;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}

@media (max-width: 959px) {
  :root { --header-h: 64px; --diagonale: 24px; }
}