/* =============================================================
   KEEV — Design Tokens
   Quelle: CI-Moodboard (nur Farben + Schriften übernommen,
   Bildwelt und Layout des Moodboards bewusst NICHT).
   Art Direction: Grafik Günther
   ============================================================= */

/* ---------- Schriften: selbst gehostet, kein Google-CDN ----------
   Grund: Einbindung über fonts.googleapis.com überträgt die IP des
   Besuchers in die USA. Nach dem Urteil des LG München I
   (Az. 3 O 17493/20) ist das ohne Einwilligung abmahnfähig.
   Dateien liegen unter /assets/fonts/. ---------------------------- */

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Farben: exakt die fünf aus dem CI ---------- */
  --volt:        #D4FF00;   /* Akzent. Sparsam. Nie als Flächenfarbe für Text-Blöcke. */
  --black:       #0B0B0B;   /* Grundfläche */
  --surface:     #1A1A1A;   /* Karten, erhöhte Flächen */
  --border:      #333333;   /* Trennlinien, Rahmen */
  --paper:       #E8E8E8;   /* Fließtext auf Dunkel */

  /* Abgeleitete Stufen — keine neuen Farbtöne, nur Deckkraft.
     So bleibt die Palette geschlossen und es entsteht kein Farbwildwuchs. */
  --paper-70:    rgba(232, 232, 232, 0.70);  /* Sekundärtext */
  --paper-45:    rgba(232, 232, 232, 0.45);  /* Meta, Captions */
  --paper-12:    rgba(232, 232, 232, 0.12);  /* Hairlines auf Dunkel */
  --volt-16:     rgba(212, 255, 0, 0.16);    /* Glow, Hover-Fläche */
  --volt-40:     rgba(212, 255, 0, 0.40);    /* Focus-Ring innen */
  --black-88:    rgba(11, 11, 11, 0.88);     /* Sticky-Header-Backdrop */

  /* Kontraste geprüft:
     #E8E8E8 auf #0B0B0B  = 15.9:1  → AAA
     #D4FF00 auf #0B0B0B  = 16.3:1  → AAA
     #0B0B0B auf #D4FF00  = 16.3:1  → AAA (Volt-Button mit schwarzer Schrift)
     paper-45 auf #0B0B0B =  6.1:1  → AA, nur für Meta-Text ≥ 14px */

  /* ---------- Typografie ---------- */
  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Fluid Type Scale, clamp() statt Media-Query-Treppe.
     Basis 16px, Verhältnis ~1.25 mobil / ~1.333 desktop. */
  --fs-eyebrow:  clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem);  /* 11 → 13 */
  --fs-small:    clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);   /* 13 → 14 */
  --fs-body:     clamp(1rem, 0.96rem + 0.18vw, 1.125rem);        /* 16 → 18 */
  --fs-lead:     clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);    /* 18 → 22 */
  --fs-h4:       clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --fs-h3:       clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --fs-h2:       clamp(2rem, 1.4rem + 3vw, 4rem);
  --fs-h1:       clamp(2.75rem, 1.4rem + 6.75vw, 8rem);
  --fs-mega:     clamp(4rem, 1rem + 15vw, 16rem);                /* Hero-Wortmarke */

  --lh-tight:    0.92;   /* Mega-Headlines, Rajdhani verträgt das */
  --lh-heading:  1.06;
  --lh-body:     1.65;   /* Montserrat braucht Luft */

  /* Rajdhani wirkt erst mit weiter Laufweite wie im CI-Logo */
  --ls-mega:     0.02em;
  --ls-heading:  0.04em;
  --ls-eyebrow:  0.22em;
  --ls-button:   0.10em;

  /* ---------- Raster & Abstände (8px-Basis) ---------- */
  --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;    --sp-11: 12rem;

  --section-y:   clamp(4rem, 10vw, 11rem);   /* vertikaler Sektionsrhythmus */
  --gutter:      clamp(1.25rem, 5vw, 4.5rem);
  --maxw-page:   88rem;    /* 1408px */
  --maxw-text:   38rem;    /* ~68 Zeichen, Lesbarkeitsoptimum */

  /* ---------- Rahmen & Radien ----------
     Bewusst kantig. Das Logo ist aus geraden Schrägen gebaut,
     runde Ecken würden dagegenarbeiten. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --hairline: 1px solid var(--border);

  /* ---------- Motion ----------
     Ein einziges Easing für alles Zustandsbezogene, damit die
     Seite sich wie ein Gerät anfühlt und nicht wie eine Diashow. */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   280ms;
  --dur-slow:   620ms;
  --dur-reveal: 900ms;

  /* ---------- Ebenen ---------- */
  --z-base: 0;  --z-sticky: 100;  --z-nav: 200;
  --z-overlay: 300;  --z-modal: 400;  --z-toast: 500;
}

/* Wer Bewegung reduziert haben will, bekommt keine Bewegung.
   Nicht "weniger" — keine. Sonst bleibt Vestibularreiz übrig. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Die Seite ist dunkel entworfen und bleibt dunkel.
   Kein Light-Mode-Flip — das CI hat keine helle Variante,
   und eine erfundene wäre genau der Slop, den wir nicht wollen.
   color-scheme sorgt nur dafür, dass Scrollbars und
   Formular-Chrome des Browsers mitziehen. */
:root { color-scheme: dark; }