/* Fundus · Rezept „Online-Kurs & Coaching: klarer Lernweg“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kurs-coaching-lernweg/ · 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: 'Bricolage Grotesque'; src: url('../../../../assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../../../../assets/fonts/onest-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Shantell Sans'; src: url('../../../../assets/fonts/shantell-sans-latin-full-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Bricolage Grotesque', system-ui, sans-serif;
  --schrift-text: 'Onest', system-ui, sans-serif;
  --schrift-akzent: 'Shantell Sans', cursive;
  /* Größen laut Rezept: h1 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage wght 700, opsz 72–96, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wght 650; Fließtext Onest 1.0625–1.125rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Shantell Sans (INFM 30–60, BNCE 0) sparsam für Randnotizen und Modul-Labels („Modul 03 · 45 min“), 0.875–0.9375rem, nie für Fließtext, Buttons oder Preise. Für Kurse mit viel Lesetext reicht Bricolage im Text nicht – deshalb eine eigene Textschrift. Barrierearme Variante: Text atkinson-hyperlegible-next. */
  --mass: 65ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Heller, leicht kühler oder warmer Grund, fast schwarze Tinte, ein Markenton für Aktionen und ein eigener Erfolgston für Fortschritt/Häkchen. Kategorie-Farben nur bei echten Kurskatalogen (Maven, Brilliant), sonst eine Akzentfarbe für Hervorhebungen.) */
  --farbe-grund: #F4F6FA; /* Grund (Maven) */
  --farbe-flaeche: #FFFFFF; /* Karten */
  --farbe-text: #141414; /* Text (Brilliant) */
  --farbe-marke: #7491FF; /* Markenton/Buttons (Brilliant; austauschbar) */
  --farbe-erfolg: #10BF7A; /* Erfolg/Fortschritt (Ness Labs) */
  --farbe-hervorhebung: #F7C325; /* Hervorhebung/Badge 'Nächster Start' (Brilliant) */
  --farbe-leise: #6E6E70; /* abgeleitet: Meta-Text, 4.7 : 1 auf Grund */
  --farbe-linie: #D0D2D5; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.0 : 1 auf Grund */
  --farbe-signal: var(--farbe-marke); /* Haupthandlung, abgeleitet aus „Markenton/Buttons“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 100–200 (Buttons, Tabs, Antworten), 300 (Akkordeon, Karten), 500–600 (Einblendungen); Federn 400–600 nur für Erfolgsmomente */
  --dauer-rezept-1: 100ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 400ms;
  --dauer-rezept-5: 500ms;
  --dauer-rezept-6: 600ms;
  /* 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 */

  /* Raum (mittel): Strukturiert: Module mit 16 px zwischen Label, Titel und Ergebnis, 24 px zwischen Modulen. Preisvergleich mit gleich hohen Karten. */
  --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: 120px;
  --raum-sektion: clamp(64px, 8vw, 112px);
  /* Raster: Hero 7/5 (Text/Foto) oder split-screen-sticky-seiten. Module in einer Spalte, Pakete als 3er-Raster. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2vw, 28px);
  --raster-max: 1200px;
  /* Form: Freundlich rund: Pillen für Knöpfe und Badges, 20 px für Karten. verlaufs-rahmen nur am Button (Variante button). */
  --radius-klein: 10px;
  --radius-gross: 20px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #141414 mit 12 % Deckkraft */
  /* Schatten: nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten flach in #FFFFFF auf #F4F6FA */

  /* Buttons: tiefen-taste-3d (Variante stapel), verlaufs-rahmen (Variante button) */
  --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: ohne Überschwingen, opacity 150 ms */
}