/* ==========================================================================
   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 ---- */
  /* Hausschrift laut Kundenvorgabe (CI 2026): Roboto, lokal eingebunden.
     Mono bleibt IBM Plex Mono für Maß- und Bemaßungsangaben. */
  --font-display: "Soho Gothic", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Soho Gothic", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", monospace;

  /* Typoskala 2026-08-25 nach Vorbild weller-medizintechnik.dev.ideehost.com:
     große, leichte Headlines (Gewicht 300, enger Durchschuss, leicht negative
     Laufweite), Fließtext 17 px in Roboto Light. Schrift bleibt Roboto (CI). */
  --fs-display: clamp(2.6rem, 5.8vw, 5rem);        /* Startseiten-/Video-Hero (v2: cinematic) */
  --fs-hero:    clamp(2.1rem, 4.4vw, 3.6rem);      /* Seiten-Hero-Overlay */
  --fs-h1:      clamp(1.9rem, 4vw, 3rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3.4rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.625rem);
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.1rem, 1.6vw, 1.35rem);     /* Hero-Sublines/Leads */
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;                          /* Mono-/Bemaßungs-Labels */

  --lh-tight:  1.02;
  --lh-head:   1.25;
  --lh-body:   1.55;
  --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;
  }
}