/* ============================================================================
   tokens.css — Farben, Typografie, Maße, Bewegung
   ============================================================================

   GESTALTUNGSIDEE: "Nachtschicht".
   Eine einzige, dunkle Erscheinung. Kein Hell/Dunkel-Umschalter mehr: die
   Seite hat genau ein Gesicht, und das ist auf Wirkung gebaut.

   Hierarchie der Farben — und warum sie so streng ist:
   - Lime (#c8ff3c) ist die EINZIGE Handlungsfarbe. Sie steht auf Schaltflächen,
     Preisen und Häkchen, sonst nirgends. Wer die Seite überfliegt, sieht in
     Lime genau das, was er anklicken oder vergleichen soll. Das ist der
     Conversion-Hebel der ganzen Palette.
   - Violett und Cyan sind Atmosphäre: Lichthöfe im Hintergrund, Verläufe in
     Zahlen. Sie tragen nie eine Handlung.
   - Text steht in fast reinem Weiß auf fast reinem Schwarz. Gedämpfte Stufen
     halten mindestens 5,2:1 auch auf Glasflächen (WCAG AA, kleiner Text).

   Gerechnete Kontraste gegen --bg (#07080b):
     --text      #f1f3f8   18,4:1
     --text-soft #aab0bf    9,2:1
     --text-dim  #80879a    5,6:1  (auf --glass-2 ≈ 5,2:1)
     --lime      #c8ff3c   17,6:1  · --on-lime auf --lime 17,1:1
     --violet    #9d8fff    7,0:1
     --error     #ff7a7a    7,6:1

   Schriften: ausschließlich lokal vorhandene Systemschriften, kein Download,
   keine Third-Party-Anfrage — Voraussetzung dafür, dass die Seite ohne
   Einwilligungsbanner auskommt.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- Flächen ---- */
  --bg:        #07080b;
  --bg-raise:  #0d0f14;
  --bg-deep:   #040507;
  --glass:     rgba(255, 255, 255, 0.028);
  --glass-2:   rgba(255, 255, 255, 0.05);
  --glass-3:   rgba(255, 255, 255, 0.085);
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --line-3:    rgba(255, 255, 255, 0.26);

  /* ---- Text ---- */
  --text:      #f1f3f8;
  --text-soft: #aab0bf;
  --text-dim:  #80879a;

  /* ---- Handlungsfarbe und Atmosphäre ---- */
  --lime:      #c8ff3c;
  --lime-soft: rgba(200, 255, 60, 0.14);
  --on-lime:   #0a0c06;
  --violet:    #9d8fff;
  --cyan:      #3de0e8;
  --amber:     #ffc857;
  --error:     #ff7a7a;
  --focus:     #c8ff3c;

  --grad-brand: linear-gradient(115deg, #c8ff3c 0%, #3de0e8 52%, #9d8fff 100%);
  --grad-head:  linear-gradient(180deg, #ffffff 30%, #bcc2d3 100%);
  --grad-num:   linear-gradient(120deg, #c8ff3c 10%, #3de0e8 90%);

  /* ---- Typografie ---- */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:    0.75rem;
  --fs-s:     0.875rem;
  --fs-base:  1.0625rem;
  --fs-m:     1.1875rem;
  --fs-l:     clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h2:    clamp(2rem, 1.25rem + 3vw, 3.4rem);
  --fs-h1:    clamp(2.4rem, 1.1rem + 4.4vw, 4.5rem);
  --fs-lede:  clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --fs-price: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);

  --lh-body: 1.65;

  /* ---- Maße ---- */
  --wrap:     76rem;
  --gutter:   clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure:  40rem;
  --space-sec: clamp(4rem, 2.5rem + 4.5vw, 7rem);

  --r-s:  10px;
  --r:    16px;
  --r-l:  22px;
  --r-xl: 30px;

  /* ---- Bewegung ---- */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Weiches Aufklappen der FAQ und Hinweise (Chromium 129+) */
  interpolate-size: allow-keywords;
}

/* Winkel für umlaufende Verlaufsränder — als typisierte Eigenschaft, damit er
   animierbar ist. Ohne @property-Unterstützung steht der Rand still. */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}