/* Fundus · Rezept „Studio: Rhythmus und Kursplan“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/fitness-studio-rhythmus/ · 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: 'Anybody'; src: url('../../../../assets/fonts/anybody-latin-wdth-normal.woff') format('woff'); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('../../../../assets/fonts/funnel-sans-latin-wght-normal.woff') format('woff'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('../../../../assets/fonts/azeret-mono-latin-wght-normal.woff') format('woff'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Anybody', system-ui, sans-serif;
  --schrift-text: 'Funnel Sans', system-ui, sans-serif;
  --schrift-akzent: 'Azeret Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Hero-Zeile Anybody clamp(3rem, 1.5rem + 8vw, 9rem), wdth 50–100 (Takt), wght 800, Versal, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.3rem + 3vw, 3.5rem), wdth 75, wght 750; Kursnamen im Plan Anybody wdth 75, wght 700, 1.125rem. Fließtext Funnel Sans 1.0625rem/1.55, wght 400, max. 64ch; Knöpfe Funnel Sans 1rem wght 600. Uhrzeiten, Dauer, freie Plätze, Raum und Labels in Azeret Mono 0.8125rem, Labels Versal +0.08em, alle Ziffern tabular-nums. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Hallenlicht statt Neon-Nacht: Kreide als Grund, Hallenschwarz für Text und dunkle Bühnen (Kursplan-Kopf, Fußzeile), eine Limette als einziger Signalton für Probetraining, Buchen und Mitglied werden. Limette nie als Textfarbe auf hellem Grund, immer als Fläche mit dunkler Schrift, auf Kreide mit 2 px Rand. Kursarten unterscheiden sich per Text-Label, nicht per Farbe. Rot nur für Ausfall und Fehler.) */
  --farbe-grund: #F2F1EC; /* Grund (Kreide) */
  --farbe-text: #121412; /* Text, dunkle Sektionen, Kursplan-Kopf (16 : 1) */
  --farbe-signal: #CCFF33; /* Signal Limette: Probetraining, Buchen (Text #121412, 15,8 : 1; auf Kreide mit 2 px Rand #121412) */
  --farbe-flaeche: #E2E1DA; /* Flächen, Kursplan-Raster */
  --farbe-leise: #5E615C; /* Meta: Trainer:in, Raum, Dauer (5,6 : 1 auf Kreide) */
  --farbe-fehler: #B3261E; /* Ausfall, Fehler (sparsam, 5,8 : 1) */
  --farbe-linie: #CECEC9; /* abgeleitet: Haarlinien (nur Dekoration) */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 0 (Bildwechsel, harter Schnitt), 80 je Stufe (Hero-Zeile in 6 Stufen = 480), 180 (Stufen-Einblendung mit 3 Stufen); UI nach token-tech-praezise: 70 (Hover, Farbe), 110–150 (Reiter, Filter, Tages-Reiter), 240 (Panels, Sheets, Dialog), Austritt 150 */
  --dauer-rezept-1: 70ms;
  --dauer-rezept-2: 80ms;
  --dauer-rezept-3: 110ms;
  --dauer-rezept-4: 150ms;
  --dauer-rezept-5: 180ms;
  --dauer-rezept-6: 240ms;
  /* 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-tech-praezise */
  --ui-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ui-ease-ein: cubic-bezier(0, 0, 0.38, 0.9);
  --ui-ease-aus: cubic-bezier(0.2, 0, 1, 0.9);
  --ui-dauer-xs: 70ms;
  --ui-dauer-s: 110ms;
  --ui-dauer-m: 150ms;
  --ui-dauer-l: 240ms;
  --ui-dauer-xl: 400ms;
  --ui-dauer-xxl: 700ms;
  --ui-stagger: 30ms;
  --ui-aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: 4 bis 8 px, keine Skalierung, kein Federn */

  /* Raum (dicht): Fahrplan statt Bühne: Kursplan-Zellen 8 bis 12 px Innenabstand, Tarife in einer Tabelle, kurze Sektionsabstände. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 80px;
  --raum-10: 112px;
  --raum-sektion: clamp(48px, 6vw, 96px);
  /* Raster: Kursplan am Desktop als Wochenraster mit 7 Spalten, mobil Tages-Reiter. Tarife als Tabelle über volle Breite. */
  --raster-spalten: 12;
  --raster-rand: clamp(12px, 3vw, 32px);
  --raster-spalt: clamp(8px, 1.2vw, 16px);
  --raster-max: 1440px;
  /* Form: Harte Kanten überall. Die Demo-Variante versatz-brutal nennt 6 px Radius; hier auf 0 übersetzt, damit Taste, Plan und Bilder eine Form haben. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 2px; /* 2px #121412 um Knöpfe und die Limette auf Kreide; Kursplan-Raster 1px #E2E1DA */
  /* Schatten: nur der harte Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal), ohne Weichzeichnung */

  /* Buttons: tiefen-taste-3d (Variante versatz-brutal), fuellung-vom-eintrittspunkt (Variante pixel) */
  --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 */
}