/* Fundus · Rezept „Kreativstudio: Studio-Bühne“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/ · Bauplan: bauplan.txt · Leitfaden: https://cecodesign.de/lab/fundus/leitfaden.txt
   Alle Gestaltung der Seite nutzt nur diese Variablen. Schriftpfade beim Kopieren in ein Projekt anpassen. */

@font-face { font-family: 'TikTok Sans'; src: url('../../../../assets/fonts/tiktok-sans-latin-wdth-normal.woff2') format('woff2'); 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 {
  /* Schrift */
  --schrift-headline: 'TikTok Sans', system-ui, sans-serif;
  --schrift-text: 'TikTok Sans', system-ui, sans-serif;
  --schrift-akzent: 'DM Mono', ui-monospace, monospace;
  /* Größen laut Rezept: h1 clamp(3.5rem, 10vw, 11rem) (K72 setzt 9–11vw), TikTok Sans wdth 75, wght 800, letter-spacing -0.03em, line-height 0.9 (Fantasy .9/.95). h2 clamp(2rem, 4.5vw, 4.5rem), wdth 100, wght 600, -0.02em. Fließtext 1.125rem/1.4, wght 400. Labels DM Mono 0.75rem, Versal, +0.04em. Zwei Breiten derselben Familie ersetzen den Schnittwechsel Suisse/Suisse Condensed bei Fantasy. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Schwarz und Weiß tragen 90 % der Fläche, dazu genau eine Signalfarbe für CTA, Hover-Flächen und Seitenübergang (K72: #d3fd50 als einzige Farbe). Sektionen dürfen invertieren (Cuberto: -inverse). Kein Verlauf.) */
  --farbe-grund: #0b0b0b; /* Grund dunkel / Text */
  --farbe-grund-2: #f2f2f2; /* Grund hell (Fantasy-Grau) */
  --farbe-text: #ffffff; /* Text auf Dunkel */
  --farbe-leise: #8a8a8a; /* Meta und Labels */
  --farbe-signal: #ff5a1f; /* Signalfarbe, nur CTA, Hover-Fläche, Übergangs-Panel */
  --farbe-grund-3: #6B6B6B; /* Meta-Text barrierefrei auf hellem Grund (4,8 : 1 auf #f2f2f2; #8a8a8a nur auf dunklem Grund oder für Linien) */
  --farbe-linie: #323232; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #FF8A80; /* abgeleitet: Fehlermeldungen, 8.6 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): Reveals und Bildmasken 750–1200, Seitenübergang 800–1000, Hover/UI 200–400, Fades 350 */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 350ms;
  --dauer-rezept-3: 400ms;
  --dauer-rezept-4: 750ms;
  --dauer-rezept-5: 800ms;
  --dauer-rezept-6: 1000ms;
  --dauer-rezept-7: 1200ms;
  /* Bewegung: token-editorial-langsam */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --dauer-m: 1000ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1600ms;
  --stagger: 100ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Text 100 % in Zeilenmaske, Bilder clip-path inset und scale 1.1 → 1, Haarlinien scaleX */

  /* Bewegung für UI (Menüs, Formulare, Buchung): token-toggle-asymmetrisch */
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --ui-dauer-xs: 150ms;
  --ui-dauer-s: 220ms;
  --ui-dauer-m: 300ms;
  --ui-dauer-l: 450ms;
  --ui-stagger: 40ms;
  --ui-aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Panel clip-path, Links yPercent 100 → 0; Schließen schneller und mit Anlauf-Kurve */

  /* Raum (mittel): Werte wie im Starter (starter/kreativstudio-buehne/tokens.css: --abschnitt, --rand, --spalte). Große Sektionssprünge, aber enge Spalten und Label-Zeilen mit 6 px Zeilenabstand. */
  --raum-1: 4px;
  --raum-2: 6px;
  --raum-3: 8px;
  --raum-4: 12px;
  --raum-5: 16px;
  --raum-6: 24px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 112px;
  --raum-10: 176px;
  --raum-sektion: clamp(88px, 12vw, 176px);
  /* Raster: Volle Breite mit Rand, kein zentrierter Container. Leistungen als eigene Vollbild-Sektionen, Arbeiten als Index; Anfrage 6/6. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 2.6vw, 40px);
  --raster-spalt: clamp(12px, 1.6vw, 24px);
  --raster-max: none;
  /* Form: Bilder und Showreel 4 px, Anfrage-Panel 12 px, Knöpfe als Pille (Starter --knopf-radius 999px; pfeil-icon-button, Variante kreis-expand). */
  --radius-klein: 4px;
  --radius-gross: 12px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px Linienfarbe auf Schwarz, als Oberkante von Datenzeilen */
  /* Schatten: nur die Hover-Vorschau im Index (Starter: 0 24px 60px -20px rgb(0 0 0 / .6)), sonst keiner */

  /* Buttons: pfeil-icon-button (Variante kreis-expand), text-roll-hover */
  --button-hoehe: 44px; /* Trefferfläche mindestens 44 × 44 px */
  --button-farbe: var(--farbe-signal, currentColor);
  --fokus-ring: 2px solid var(--farbe-text, currentColor); /* außen um den Knopf, Abstand s. u.; auf dunklen Flächen eigene Farbe setzen */
  --fokus-abstand: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --ui-stagger: 0ms; }
  /* Reduziert laut Stil: opacity 200 ms, Masken offen */
}