/* Fundus · Rezept „Kultur: Programm und Haltung“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kultur-programm-haltung/ · 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: 'Schibsted Grotesk'; src: url('../../../../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../../../../assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../../../../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Schibsted Grotesk', system-ui, sans-serif;
  --schrift-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --schrift-akzent: 'IBM Plex Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Ausstellungs-/Festival-Titel clamp(2.75rem, 7vw, 7rem), Schibsted 800–900 (Festival auch Italic), -0.02em, line-height 1.0. Teaser-Titel clamp(1.375rem, 2.2vw, 2rem), 700. Fließtext Atkinson 1.125rem/1.6, max. 68ch (Stedelijk liegt bei ≈18–22px). Daten, Uhrzeiten, Räume in IBM Plex Mono 0.8125rem, tabular-nums. Für Festivals statt Schibsted die Paarung plakat-condensed (Big Shoulders 900). */
  --mass: 68ch;
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Schwarz auf warmem Off-White als Grund (Stedelijk #0a0a0a/#ebeae8). Dazu ein Farbsystem mit 4–6 Tönen, je einer pro Sparte oder Programmreihe (Barbican), oder Blöcke, die im Rhythmus Fläche und Schrift tauschen (HKW .color-switch). Jede Spartenfarbe muss auf Off-White und als Fläche mit weißer Schrift WCAG AA erfüllen.) */
  --farbe-text: #0b0b0b; /* Text, Linien */
  --farbe-grund: #efede9; /* Grund */
  --farbe-sparte: #c4421a; /* Sparte Musik */
  --farbe-sparte-2: #3d5f9a; /* Sparte Theater/Tanz */
  --farbe-sparte-3: #2f7d4a; /* Sparte Kunst */
  --farbe-sparte-4: #b0186b; /* Sparte Film */
  --farbe-leise: #666564; /* abgeleitet: Meta-Text, 5.0 : 1 auf Grund */
  --farbe-linie: #CBC9C5; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.6 : 1 auf Grund */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Text, Linien“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): UI und Hover 150–250, Filter/Ansichtswechsel 300–350, Bild-Reveal höchstens 500 */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 250ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 350ms;
  --dauer-rezept-5: 500ms;
  /* Bewegung: token-swiss-knackig */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-ein: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-aus: cubic-bezier(0.5, 0, 0.75, 0);
  --dauer-xs: 200ms;
  --dauer-s: 350ms;
  --dauer-m: 500ms;
  --dauer-l: 700ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: nur x oder y; Text 100 % in Zeilenmaske, Pfeile 8 px; keine Rotation */

  /* Raum (dicht): Programm geht vor: Teaser dicht, Datum, Ort und Ticket mit 8 px Abstand. Laut werden darf nur der Titel, nicht der Weißraum. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;
  --raum-9: 96px;
  --raum-10: 128px;
  --raum-sektion: clamp(56px, 7vw, 112px);
  /* Raster: Teaser 3 bis 4 Spalten, jeder dritte Block tauscht Fläche und Schrift (HKW). Sticky Navigation mit 1px Unterkante. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 3vw, 40px);
  --raster-spalt: clamp(16px, 2vw, 24px);
  --raster-max: 1600px;
  /* Form: Grafisch und eckig. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Tickets füllen sich in Pixeln (fuellung-vom-eintrittspunkt, Variante pixel). */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #0b0b0b als Unterkante der Navigation und zwischen Programmzeilen */
  /* Schatten: keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante pixel), kontur-button-zeichnen (Variante ecken) */
  --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 150 ms linear, Masken sofort offen */
}