/* Fundus · Rezept „Freizeit und Erlebnis: Zeitfenster, Gruppe, Geburtstag“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/freizeit-erlebnis-ticket/ · 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: '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; }

:root {
  /* Schrift */
  --schrift-headline: 'Anybody', system-ui, sans-serif;
  --schrift-text: 'TikTok Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Anybody clamp(2.75rem, 1.4rem + 6vw, 6.5rem), wdth 70, wght 850, Laufweite -0.02em, Zeilenhöhe 0.9; h2 clamp(2rem, 1.4rem + 2.6vw, 3.5rem), wdth 80, wght 800. Fließtext TikTok Sans 1.0625rem (17 px), wdth 100, wght 400, Zeilenhöhe 1.55, höchstens 64ch. Zeitfenster, Preise und Plätze TikTok Sans 600 mit Tabellenziffern, Uhrzeiten 1.25rem. Knöpfe TikTok Sans 700, 1.0625rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Hallengrau als Grund, helleres Grau als Fläche für Preise und Pakete, fast schwarzes Hallendunkel für Hero-Leiste und Footer. Eine kräftige Farbe aus Griffen, Bahnen oder Raumdesign, hier Griff-Magenta, nur für Zeitfenster buchen. Je Anlage austauschbar, immer mit 4,5 : 1 geprüft. Keine Neon-Verläufe, keine Comic-Explosionen.) */
  --farbe-grund: #F4F3EF; /* Grund Hallengrau */
  --farbe-text: #17161A; /* Text (16,2 : 1 auf Grund) */
  --farbe-flaeche: #E6E3DA; /* Fläche Matte: Preise, Pakete, Regeln (Text 14,0 : 1) */
  --farbe-dunkel: #19181D; /* Dunkel Halle: Hero-Leiste, Footer (Weiß darauf 17,7 : 1) */
  --farbe-signal: #AE1650; /* Signal Griff-Magenta: Zeitfenster buchen (Weiß darauf 6,9 : 1; als Fläche auf Grund 6,2 : 1, auf Matte 5,4 : 1); auf Dunkel stattdessen heller Knopf mit dunkler Schrift */
  --farbe-leise: #5B595F; /* Leise: Meta-Angaben, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Matte) */
  --farbe-linie: #D3D0C7; /* Linie: Haarlinien in Preislisten (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 400 (Zähler, Häkchen), 500 (Form des Signatur-Knopfs), 300 (Panel, Dialog öffnen), 200 (schließen) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 400ms;
  --dauer-rezept-5: 500ms;
  /* Bewegung: token-federnd-verspielt */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ein: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-aus: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-feder: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);
  --dauer-s: 400ms;
  --dauer-m: 500ms;
  --dauer-l: 800ms;
  --stagger: 50ms;
  --aus-faktor: 0.6; /* Schließen = Öffnen × Faktor */
  /* Wege: Überschwingen nur auf kleinen Elementen (Buttons, Badges), Opazität immer linear 200 ms */

  /* 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 */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ui-ease-ein); /* die Hauptkurve federt: Überschwingen nur auf kleinen Elementen, nie auf Flächen */
  --ease-flaeche-aus: var(--ui-ease-aus);
  --dauer-xl: 500ms; /* größte Stufe für große Flächen (= --dauer-gross der Partitur); der Seitenwechsel nimmt --dauer-seitenwechsel */

  /* Bewegungs-Partitur (rezept.bewegung, Stand 04.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 150ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-3 */
  --dauer-gross: 500ms; /* = --dauer-rezept-5 */
  --dauer-seitenwechsel: 450ms; /* = --ui-dauer-l */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 400ms;
  --dauer-hover-aus: 240ms;
  /* Laden 1: H1 */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 450ms;
  --dauer-laden-1-versatz: 40ms;

  /* Raum (mittel): Kräftig und klar: große Überschriften, Zeitfenster als Kacheln mit 12 px Spalt, Preise eng. */
  --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(64px, 8vw, 128px);
  /* Raster: Hero randlos mit Leiste im unteren Drittel. Zeitfenster als Raster mit 4 bis 6 Spalten, mobil 2. Pakete als Tabelle mit drei Spalten. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1320px;
  /* Form: Kräftig gerundet wie Griffe und Matten; die Signatur-Form ist die einzige freie Silhouette. */
  --radius-klein: 8px;
  --radius-gross: 20px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D3D0C7 in Preislisten; Felder 1px in Leise (3:1) */
  /* Schatten: nur die Tiefen-Taste (Kante in Dunkel) */

  /* Buttons: tiefen-taste-3d (Variante stapel), kontur-button-zeichnen (Variante zeichnen) */
  --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; }
  :root { --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Formen und Zähler wechseln sofort (Rezept); Bilder stehen; Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: ohne Überschwingen, opacity 150 ms */
}