/* Fundus · Rezept „Yoga und Achtsamkeit: Atem und Stundenplan“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/yoga-studio-achtsamkeit/ · 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: 'Fraunces'; src: url('../../../../assets/fonts/fraunces-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../../../../assets/fonts/fraunces-latin-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../../../../assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Fraunces', Georgia, serif;
  --schrift-text: 'Familjen Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Fraunces clamp(2.5rem, 1.5rem + 4vw, 5rem), opsz an die Größe gekoppelt (144 erst ab 4.5rem), wght 300 erst ab 4rem (darunter 400), SOFT 100, WONK 0, Laufweite -0.015em, Zeilenhöhe 1.02; h2 clamp(1.875rem, 1.3rem + 2vw, 3rem), opsz an die Größe gekoppelt, wght 450; Kursive für Stilnamen. Der Statement-Absatz der Signatur Fraunces 1.75rem bis 2.5rem, wght 350, Zeilenhöhe 1.3, höchstens 32ch. Fließtext Familjen Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.65, höchstens 62ch. Stundenplan Familjen Grotesk 500 mit Tabellenziffern. Knöpfe Familjen Grotesk 600, 1rem. */
  --mass: 32ch;
  --zeilenhoehe-text: 1.65;

  /* Farbe (Prinzip: Warm und gedämpft wie ein Raum am Abend: Leinen als Grund, Ton als Fläche für Stundenplan und Preise, Abendbraun für Footer und das Statement. Ein dunkles Salbei nur für Buchen und Probestunde. Keine Lila-, Pink- oder Türkis-Verläufe, keine Chakra-Farben, kein Weiß wie in einer Klinik.) */
  --farbe-grund: #F2EEE8; /* Grund Leinen */
  --farbe-text: #2A2622; /* Text (13,0 : 1 auf Grund) */
  --farbe-flaeche: #E3D8CA; /* Fläche Ton: Stundenplan, Preise, Neu-hier (Text 10,7 : 1) */
  --farbe-dunkel: #3A3430; /* Dunkel Abend: Statement-Band, Footer (Weiß darauf 12,3 : 1) */
  --farbe-signal: #4C5B47; /* Signal Salbei: Klasse buchen, Probestunde (Weiß darauf 7,3 : 1; als Fläche auf Grund 6,3 : 1, auf Ton 5,2 : 1); auf Abend stattdessen Leinen-Knopf mit dunkler Schrift */
  --farbe-leise: #655E57; /* Leise: Meta-Angaben, Lehrer:in und Raum im Plan (5,5 : 1 auf Grund, 4,5 : 1 auf Ton) */
  --farbe-linie: #D7CFC4; /* Linie: Haarlinien im Stundenplan (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.7 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 300 (Filter, Dialog öffnen), 200 (schließen), 1400 (Masken-Reveal eines Fotos, einmal), 2200 (Hero-Foto 1.04 → 1, einmal); Statement scrollgekoppelt */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 1400ms;
  --dauer-rezept-5: 2200ms;
  /* Bewegung: token-luxus-weich */
  --ease: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-ein: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-aus: cubic-bezier(0.37, 0, 0.63, 1);
  --dauer-s: 500ms;
  --dauer-m: 1200ms;
  --dauer-l: 1400ms;
  --dauer-xl: 2200ms;
  --stagger: 120ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: y 16 px, Bild scale 1.08 → 1, blur 8 px → 0 (ohne Blur auf Touch) */

  /* 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(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);

  /* Bewegungs-Partitur (rezept.bewegung, Stand 05.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: 1400ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 500ms; /* = --dauer-s */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  /* Laden 1: H1 */
  --dauer-laden-1-ab: 200ms;
  --dauer-laden-1: 1200ms;
  --dauer-laden-1-versatz: 120ms;

  /* Raum (luftig): Viel Atemraum zwischen Kapiteln; der Stundenplan bleibt kompakt (8 px Zeilenabstand), damit er auf einen Bildschirm passt. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 72px;
  --raum-9: 104px;
  --raum-10: 152px;
  --raum-sektion: clamp(72px, 10vw, 152px);
  /* Raster: Hero 5/7 (Text links, Passepartout rechts). Statement mittig über 8 Spalten. Stundenplan über 12 Spalten, mobil Tages-Reiter. */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 5vw, 72px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1200px;
  /* Form: Weich und rund wie eine Matte; Knöpfe als Pille. */
  --radius-klein: 10px;
  --radius-gross: 24px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #D7CFC4 im Stundenplan; Felder 1px in Leise (3:1) */
  /* Schatten: nur die weiche Taste (tiefen-taste-3d, soft) */

  /* Buttons: tiefen-taste-3d (Variante soft), pfeil-icon-button (Variante linie) */
  --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: Absatz steht in voller Farbe, Fotos stehen (Rezept); Seitenwechsel als Überblendung. Kapitelkanten stehen gewölbt ohne Bewegung. */
  /* Reduziert laut Stil: opacity 300 ms, kein Zoom, kein Blur */
}