/* ============================================================
   WAS GmbH — Design-Tokens
   System: angelehnt an bat-duro (Archivo/Fira Sans, schwebende Navi,
   dunkle Sektionen, Pill-Buttons, 14px-Rundungen).
   Farben: WAS-Logo 2024 (Cyan #1EBAE7, Blau #008BC4, Amber #E5A100)
   + Dunkelgrün der Imagebroschüre 2024 (#003B31).
   ============================================================ */
:root {
  /* Marke */
  --c-blue:       #0077aa;   /* Text-/Link-Blau: Logo-Blau abgedunkelt (Kontrast 4.9:1 auf Weiß) */
  --c-blue-logo:  #008bc4;
  --c-blue-deep:  #005d86;
  --c-blue-ink:   #06344c;   /* CTA-Block, tiefes Wasserblau */
  --c-cyan:       #1ebae7;   /* Logo-Hellblau: Akzent auf dunklen Flächen */
  --c-cyan-soft:  #8fdcf3;
  --c-blue-pale:  #e7f5fb;
  --c-amber:      #e5a100;   /* Logo-„S": Handlungsaufforderungen */
  --c-amber-hi:   #f2b41c;
  --c-green:      #003b31;   /* Broschüre: Dunkelgrün */
  --c-green-mid:  #0f5a48;
  --c-leaf:       #7fac2b;   /* Broschüre: Wiesengrün (sparsam) */

  /* Neutrale */
  --c-ink:       #1d1d1b;
  --c-gray:      #55605e;
  --c-gray-mid:  #88948f;
  --c-line:      #d6dedb;
  --c-surface:   #f1f4f3;
  --c-bg:        #ffffff;

  /* Dunkle Sektionen: Grün-Schwarz aus der Broschüre statt neutralem Schwarz */
  --d-bg:      #04201b;
  --d-surface: #072923;
  --d-card:    #0b312a;
  --d-line:    #1a463d;
  --d-text:    #f1f6f4;
  --d-muted:   #a7bdb7;

  /* Typografie */
  --f-sans:    'Fira Sans', 'Segoe UI', system-ui, sans-serif;
  --f-display: 'Archivo', 'Fira Sans', system-ui, sans-serif;

  --fs-display: clamp(2.4rem, 5.5vw, 4.2rem);
  --fs-h2:      clamp(1.85rem, 3.3vw, 2.65rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;

  --lh-tight: 1.05;
  --lh-head:  1.2;
  --lh-body:  1.7;

  /* Abstände (8pt-Basis) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;
  --sp-section-s: clamp(56px, 8vw, 88px);
  --sp-section-m: clamp(80px, 10vw, 128px);

  /* Layout */
  --w-content: 1200px;
  --w-text:    720px;
  --w-lp:      min(90vw, 1720px);
  --gutter:    clamp(20px, 4vw, 40px);

  /* Form */
  --r-s: 4px;
  --r-m: 8px;
  --r-card: 14px;
  --r-pill: 999px;
  --hairline: 1px solid var(--c-line);

  /* Bewegung */
  --t-fast: 150ms ease;
  --t-med:  280ms cubic-bezier(.4, 0, .2, 1);

  /* Ebenen */
  --z-header: 100;
  --z-skip:   200;
}