/* ===========================================================================
   FESL + BAUER — Design Tokens
   Richtung B „Blaupause"
   Alles Wesentliche hängt an diesen Variablen. Farbe und Schrift sind
   an genau einer Stelle austauschbar.
   ========================================================================= */

:root {
  /* --- Blau ------------------------------------------------------------- */
  --blue-900: #082f4c;   /* dunkle Flächen, Footer-Band              */
  --blue-800: #0b3d62;   /* Primär: Buttons, Header nach dem Scrollen */
  --blue-700: #0d4c78;   /* Hover auf Primär                         */
  --blue-600: #03629d;   /* Logo-Blau des Kunden — Links, Aktivstatus */
  --blue-400: #4d90ba;
  --blue-200: #c9deec;   /* Trenner auf dunklem Grund                */
  --blue-50:  #eff5fa;   /* getönte Abschnitte                       */

  /* --- Neutral (kühl) --------------------------------------------------- */
  --slate-50:  #f8fafb;  /* Seitenhintergrund                        */
  --slate-100: #f1f4f6;
  --slate-200: #e2e8ed;  /* Rahmen, Hairlines                        */
  --slate-300: #cbd5dc;
  --slate-500: #64757f;  /* gedämpfter Text                          */
  --slate-700: #3b4a54;
  --ink:       #16222b;  /* Fließtext — nie reines Schwarz           */
  --white:     #ffffff;

  /* --- Neutrales Dunkel (Bild-Overlays) --------------------------------- */
  --shade-900: #0a0e12;  /* fast farbneutral — hält Fotos aus der Blaustichigkeit */

  /* --- Signal (sparsam: offene Stellen, Kennzahlen) --------------------- */
  --signal:      #e2a33c;
  --signal-soft: #fdf4e4;

  /* --- Semantisch ------------------------------------------------------- */
  --bg:            var(--slate-50);
  --bg-alt:        var(--white);
  --bg-tint:       var(--blue-50);
  --bg-dark:       var(--blue-900);
  --text:          var(--ink);
  --text-muted:    var(--slate-500);
  --text-on-dark:  #dfeaf2;
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --primary:       var(--blue-800);
  --link:          var(--blue-600);

  /* --- Typografie ------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Schrift für Kennzahlen, Labels und Metadaten. Lag anfangs auf IBM Plex Mono,
     läuft jetzt bewusst auf derselben Sans — die Tabellenziffern kommen über
     `font-variant-numeric: tabular-nums`, nicht über eine zweite Schriftfamilie. */
  --font-mono: var(--font-sans);

  --fs-xs:   0.75rem;    /* 12px — Mono-Label            */
  --fs-sm:   0.875rem;   /* 14px                          */
  --fs-base: 1rem;       /* 16px                          */
  --fs-md:   1.0625rem;  /* 17px — Fließtext              */
  --fs-lg:   1.25rem;    /* 20px — Lead                   */
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.375rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  --tracking-label: 0.09em;

  /* --- Raster & Abstand ------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: 1.5rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 8vw, 7rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(8, 47, 76, 0.06);
  --shadow:    0 4px 16px rgba(8, 47, 76, 0.08);
  --shadow-lg: 0 12px 36px rgba(8, 47, 76, 0.12);

  --header-h: 76px;
  --header-h-scrolled: 64px;

  /* --- Bewegung — zurückhaltend, nie dekorativ -------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      200ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}