/* =====================================================================
   Pegel · Tokens (Rezept kreativstudio-buehne)
   Alles andere in style.css nutzt nur diese Variablen.
   Animationsstil: token-editorial-langsam (Kurve, Dauer-Skala)
   UI-Stil:        token-toggle-asymmetrisch (gleiche Öffnen-Kurve, Schließen schneller mit Anlauf-Kurve)
   ===================================================================== */

/* ---------- Schriften: TikTok Sans in zwei Breiten (75 und 100) + DM Mono ---------- */
@font-face {
  font-family: 'TikTok Sans';
  src: url('../../../../assets/fonts/tiktok-sans-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../../../../assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ---------- Bewegung: eine Kurve für alles Sichtbare ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo.out: Reveals, Masken, Hover, Öffnen */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);      /* expo.in: nur Schließen von Menü, Dialog, FAQ (B5) */
  --dur-druck: 100ms;                            /* druck-feedback */
  --dur-hover: 200ms;                            /* Farbe, Unterstreichung */
  --dur-ui: 350ms;                               /* Panels, Fades */
  --dur-1: 600ms;                                /* Menü-Fläche, kurzer Reveal */
  --dur-2: 1000ms;                               /* Zeilen, Begleittexte */
  --dur-3: 1200ms;                               /* Titel, Wortmarke */
  --dur-4: 1600ms;                               /* Bildmasken */
  --dur-seite: 900ms;                            /* Seitenwechsel (Rezept: 800–1000) */
  --zu: 0.65;                                    /* Schließen = 65 % des Öffnens */
  --stagger-line: 100ms;
  --stagger-letter: 60ms;
  --stagger-char: 12ms;                          /* text-roll-hover */

  /* ---------- Farbe: Schwarz und Weiß tragen die Fläche, eine Signalfarbe ---------- */
  --nacht: #0b0b0b;
  --tief: #151515;
  --hell: #f2f2f2;
  --weiss: #ffffff;
  --meta-dunkel: #8f8f8f;      /* Meta auf Nacht: 6,1 : 1 */
  --meta-hell: #6b6b6b;        /* Meta auf Hell: 4,8 : 1 auf #f2f2f2 (Rezept --farbe-grund-3; #8a8a8a nur auf Dunkel) */
  --linie-dunkel: rgb(255 255 255 / .16);
  --linie-hell: rgb(11 11 11 / .16);
  --signal: #ffd21f;           /* Hafenkran-Gelb: nur Haupthandlung, Hover-Fläche, Fokus */
  --auf-signal: #0b0b0b;       /* Text auf Signal: 13,6 : 1 */

  /* ---------- Schrift ---------- */
  --font: 'TikTok Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --h1: clamp(3.5rem, 10vw, 11rem);
  --h2: clamp(2rem, 1.2rem + 3.6vw, 4.5rem);
  --h-riesig: clamp(3rem, 1rem + 8vw, 10rem);
  --text: 1.125rem;
  --text-klein: 1rem;
  --label: 0.75rem;
  --lh-text: 1.5;
  --lh-titel: 0.9;

  /* ---------- Raum ---------- */
  --rand: clamp(16px, 2.6vw, 40px);
  --spalte: clamp(12px, 1.6vw, 24px);
  --abschnitt: clamp(88px, 12vw, 176px);
  --kopf: 68px;

  /* ---------- Buttons: Haupthandlung pfeil-icon-button (kreis-expand), Nebenhandlung Kontur-Pille mit text-roll-hover ---------- */
  --knopf-hoehe: 52px;
  --knopf-radius: 999px;
  --knopf-kreis: 40px;
  --knopf-pad: 22px;

  /* ---------- Fokus: Doppelring (fokus-stil-system, Variante doppel) ---------- */
  --fokus: var(--signal);
  --fokus-innen: var(--nacht);
}

/* Telefon: Dauern um 20 % kürzer (token-editorial-langsam → mobil) */
@media (max-width: 760px) {
  :root {
    --dur-1: 480ms; --dur-2: 800ms; --dur-3: 960ms; --dur-4: 1280ms; --dur-seite: 760ms;
    --kopf: 60px;
  }
}