/* Fundus · Rezept „Musik und Kunst: Ära und Bühne“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/musik-kuenstler-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: 'Science Gothic'; src: url('../../../../assets/fonts/science-gothic-latin-wght-normal.woff') format('woff'); font-weight: 100 900; font-stretch: 50% 200%; font-display: swap; }
@font-face { font-family: 'Redaction'; src: url('../../../../assets/fonts/redaction-20-latin-400-normal.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Redaction'; src: url('../../../../assets/fonts/redaction-latin-400-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../../../../assets/fonts/martian-mono-latin-wght-normal.woff') format('woff'); font-weight: 100 800; font-stretch: 75% 112%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Science Gothic', system-ui, sans-serif;
  --schrift-text: 'Redaction', Georgia, serif;
  --schrift-akzent: 'Martian Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Name im Hero Science Gothic clamp(3.5rem, 1rem + 11vw, 12rem), wdth 140–200 (je kürzer der Name, desto breiter), wght 800, CTRS 0, Versal, Laufweite -0.02em, Zeilenhöhe 0.86; h2 clamp(2rem, 1.2rem + 3.5vw, 4rem), wdth 120, wght 700, Versal, -0.01em, Zeilenhöhe 0.95. Stadt in der Terminliste Science Gothic 1.25rem, wdth 100, wght 700, Versal. Release- und Werktitel Redaction 400 clamp(1.75rem, 1rem + 2.5vw, 3rem), Werktitel kursiv; im Pixel-Moment einmal Redaction 100 → Redaction 20 → Redaction (3 Stufen à 80 ms). Fließtext (Bio, Presse, Texte) Redaction 1.1875rem/1.6, max. 64ch, nie in den verpixelten Schnitten. Datum, Uhrzeit, Preise und Katalognummern Martian Mono 0.9375rem, wdth 87.5, wght 500, tabular-nums; Status, Format, Credits und Rubriken Martian Mono 0.75rem, Versal, +0.08em; Knöpfe Martian Mono 0.875rem, wght 600, Versal, +0.04em. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Jede Ära hat eine Farbe. Grund ist Tinte, zum Lesen (Bio, Presse, Shop) Papier. Die Ära-Farbe kommt aus dem Cover des aktuellen Releases und ist der einzige Signalton: Haupthandlung, Echo des Namens, Farbe des Dither- bzw. Marmor-Effekts, Verschluss beim Seitenwechsel. Sie liegt als ein Token (--aera) im :root; mit dem nächsten Release wird nur dieses Token getauscht, kein Redesign. Bedingung: als Fläche mit Papier-Schrift mindestens 4,5 : 1. Auf Tinte nie als Textfarbe, nur als Fläche mit 2 px Papier-Kante bzw. Papier-Versatz. Kein Verlauf, kein Pastell-Lila, Pink oder Cyan als Standard (Leitfaden C2, C10). Ticketstatus immer als Wort, nie nur als Farbe.) */
  --farbe-grund: #111113; /* Tinte: Grund für Hero, Termine, Videos, Fußzeile */
  --farbe-grund-2: #EEEBE3; /* Papier: Text auf Tinte (15,8 : 1), Grund für Bio, Presse, Shop */
  --farbe-grund-3: #2D3BFF; /* Ära-Farbe, Beispiel Ultramarin: Fläche mit Papier-Schrift 5,5 : 1; auf Tinte nur mit Papier-Kante (allein 2,9 : 1) */
  --farbe-aerafarbe: #C2361F; /* Ära-Farbe, Beispiel für das nächste Release (Zinnober): Fläche mit Papier-Schrift 4,6 : 1 */
  --farbe-leise: #9A9893; /* Meta auf Tinte (6,5 : 1): Ort, Support, Format */
  --farbe-grund-4: #5C5A55; /* Meta auf Papier (5,8 : 1) */
  --farbe-fehler: #FF6B5E; /* Abgesagt und Fehler auf Tinte (6,8 : 1), immer mit Wort */
  --farbe-signal: var(--farbe-grund); /* Haupthandlung, abgeleitet aus „Tinte: Grund für Hero, Termine, Videos, Fußzeile“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 0 (harter Schnitt, Bildwechsel im Clip, Hover), 80 je Stufe (Cover-Pixelaufbau 6 Stufen = 480, Verschluss beim Seitenwechsel 6 Stufen = 480), 240 (Release-Titel in 3 Stufen); UI nach token-toggle-asymmetrisch: Öffnen 250–300 (Menü, Player-Platzhalter, Warenkorb, Filter), Schließen etwa 65 % davon (170–200) */
  --dauer-rezept-1: 65ms;
  --dauer-rezept-2: 80ms;
  --dauer-rezept-3: 170ms;
  --dauer-rezept-4: 240ms;
  --dauer-rezept-5: 250ms;
  --dauer-rezept-6: 300ms;
  --dauer-rezept-7: 480ms;
  /* Bewegung: token-brutal-hart */
  --ease: steps(1, end);
  --ease-ein: steps(3, end);
  --ease-aus: steps(1, end);
  --dauer-0: 0ms;
  --dauer-xs: 20ms;
  --dauer-s: 80ms;
  --dauer-m: 160ms;
  --stagger: 40ms;
  --aus-faktor: 1; /* Schließen = Öffnen × Faktor */
  /* Wege: harte Wechsel, Stufen, kein Gleiten */

  /* 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): Laute Sprünge zwischen Kapiteln, Terminliste dicht (Zeilen mindestens 44 px, 8 px Innenabstand). Platz für die volle Spreizung des Echos reservieren. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 80px;
  --raum-9: 128px;
  --raum-10: 192px;
  --raum-sektion: clamp(64px, 10vw, 160px);
  /* Raster: Volle Breite. Termine als Zeilen über alle 12 Spalten (Datum, Stadt, Ort, Status, Ticket), Diskografie 4 Spalten, Pressefotos 3. */
  --raster-spalten: 12;
  --raster-rand: clamp(12px, 2.4vw, 32px);
  --raster-spalt: clamp(12px, 1.6vw, 24px);
  --raster-max: none;
  /* Form: Eckig wie Plattenhülle und Plakat. Nebenaktionen als laufende Kontur (kontur-button-zeichnen, Variante laufend). Farbe nur aus Tinte, Papier und --aera. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 2px; /* 2px #EEEBE3 als Papier-Kante um Ära-Flächen auf Tinte */
  /* Schatten: nur der harte Papier-Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal) */

  /* Buttons: tiefen-taste-3d (Variante versatz-brutal), kontur-button-zeichnen (Variante laufend) */
  --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: sofort, ohne Blinken */
}