/* ==========================================================================
   LENG-TOOLS — Design-Tokens (EINE Quelle für statische Site UND Woo-Theme)
   Herkunft: design/DESIGN-SYSTEM.md · Farben aus Bestands-CD (Logo-Sampling)
   ========================================================================== */

:root {
  /* ---- Farbe ---- */
  --ink:         #1d2b38;
  --ink-2:       #3d4c5c;
  --ink-3:       #67788a;
  --paper:       #f6f7f8;
  --surface:     #ffffff;
  --line:        #d8dde2;
  --line-strong: #aeb8c2;

  --blue:        #0071b9;   /* Logo-Kernblau — CTA, Links, Interaktion */
  --blue-deep:   #005a94;   /* Hover/aktiv */
  --blue-light:  #00a1e1;   /* Maß-Ticks, aktive Marker — sparsam! */
  --blue-tint:   #e8f3fa;   /* Quick-Answer-Flächen, aktive Tabs */

  --navy:        #16222e;   /* dunkle Sektionen, Footer */
  --navy-text:   #e9eef2;   /* Text auf Navy (AA) */

  --ok:          #1e7d46;
  --warn:        #a05a00;
  --err:         #a3272d;

  /* ---- Typografie ---- */
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-text:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", monospace;

  --fs-display: clamp(2.75rem, 6vw, 5.25rem);      /* Startseiten-/Video-Hero (v2: cinematic) */
  --fs-hero:    clamp(2.25rem, 4.6vw, 3.75rem);    /* Seiten-Hero-Overlay */
  --fs-h1:      clamp(2rem, 3.6vw, 2.75rem);
  --fs-h2:      clamp(1.625rem, 2.8vw, 2.25rem);
  --fs-h3:      clamp(1.1875rem, 1.6vw, 1.375rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.3125rem); /* Hero-Sublines/Leads */
  --fs-small:   0.875rem;
  --fs-label:   0.8125rem;                          /* Mono-/Bemaßungs-Labels */

  --lh-tight:  1.15;
  --lh-head:   1.25;
  --lh-body:   1.6;
  --measure:   65ch;

  /* ---- Raum ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-pad: clamp(72px, 10vw, 144px);
  --section-pad-lg: clamp(96px, 13vw, 192px);      /* v2: großzügiger Apple-Rhythmus */

  /* ---- Cinematic Hero / Bänder (v2) ---- */
  --scrim-side: linear-gradient(100deg, rgba(8, 14, 20, .86) 0%, rgba(8, 14, 20, .55) 42%, rgba(8, 14, 20, .08) 75%, rgba(8, 14, 20, 0) 100%);
  --scrim-bottom: linear-gradient(180deg, rgba(8, 14, 20, 0) 40%, rgba(8, 14, 20, .55) 100%);
  --scrim-band: rgba(10, 17, 24, .58);
  --hero-min-h: clamp(420px, 62vh, 640px);         /* Unterseiten */
  --hero-min-h-home: clamp(560px, 86vh, 900px);    /* Startseiten (Video) */
  --content-max: 1200px;
  --stage-max:   1400px;
  --gutter:      clamp(16px, 2.5vw, 32px);

  /* ---- Form ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* ---- Linien & Schatten ---- */
  --hairline: 1px solid var(--line);
  --hairline-strong: 1px solid var(--line-strong);
  --shadow-sticky: 0 1px 0 var(--line), 0 6px 16px -8px rgba(29, 43, 56, .18);
  --shadow-pop:    0 2px 6px -2px rgba(29, 43, 56, .12), 0 12px 28px -12px rgba(29, 43, 56, .22);

  /* ---- Motion ---- */
  --t-fast: 150ms;
  --t-med:  250ms;
  --ease:   cubic-bezier(.25, .6, .3, 1);

  /* ---- Fokus (A11y) ---- */
  --focus-ring: 2px solid var(--blue);
  --focus-offset: 2px;
}

/* Reduced Motion: Endzustände sofort (design/DESIGN-SYSTEM.md §6) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}