/* Fundus · Rezept „Hundeschule und Tierbetreuung: draußen, klar, freundlich“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/hundeschule-tierbetreuung/ · 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: 'Zalando Sans'; src: url('../../../../assets/fonts/zalando-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Anybody', system-ui, sans-serif;
  --schrift-text: 'Zalando Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Anybody clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), wdth 125, wght 800, Laufweite -0.02em, Zeilenhöhe 0.95; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem), wdth 115, wght 750. H3, Kursnamen und Gebrauchsüberschriften Zalando Sans 650, 1.25rem. Fließtext Zalando Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.58, höchstens 64ch. Termine, Plätze und Preise Zalando Sans 500 mit Tabellenziffern. Knöpfe Zalando Sans 650, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.58;

  /* Farbe (Prinzip: Mit Hundeaugen: nur Blau, Gelb und Neutraltöne, so wie Hunde Farben sehen. Kies als Grund, Taubenblau als Fläche für Kurse, Termine und Preise, Dämmerblau für Kapitel und Fuß. Apportiergelb nur für „Anmelden“, immer mit dunkler Schrift und Rand in Textfarbe. Kein Grün, kein Rot, keine Pfoten-Ornamente.) */
  --farbe-grund: #F3F1EC; /* Grund Kies */
  --farbe-text: #1B1F2A; /* Text (14,6 : 1 auf Grund) */
  --farbe-flaeche: #DCE3F0; /* Fläche Taubenblau: Kurse, Termine, Preise (Text 12,8 : 1) */
  --farbe-dunkel: #1F2F5C; /* Dunkel Dämmerblau: Kapitel, Footer (Weiß darauf 13,0 : 1, Apportiergelb darauf 7,7 : 1) */
  --farbe-signal: #F2C230; /* Signal Apportiergelb: Anmelden (Text darauf 9,8 : 1; auf Kies nur 1,5 : 1, deshalb Knopf mit 2 px Rand in Textfarbe) */
  --farbe-leise: #585E6B; /* Leise: Termine, Stand-Daten (5,8 : 1 auf Grund, 5,1 : 1 auf Taubenblau) */
  --farbe-linie: #D0CFCD; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.8 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 400 (Knopf und Häkchen federn), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 500 (Duoton wird Farbe), 800 (Seitenwechsel als Kreis vom Bild, zurück 540) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 400ms;
  --dauer-rezept-5: 500ms;
  --dauer-rezept-6: 800ms;
  /* 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 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: 500ms; /* = --dauer-rezept-5 */
  --dauer-seitenwechsel: 800ms; /* = --dauer-rezept-6 */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  --ease-ausnahme: cubic-bezier(0.76, 0, 0.24, 1); /* nur: nur den Kreis beim Seitenwechsel (seitenwechsel-wachsende-form, klickpunkt); alle anderen Flächen nehmen --ease-flaeche */
  --ease-kreis: var(--ease-ausnahme); /* Name, den die Partitur beim Laden nennt */
  /* Laden 1: H1 (zwei Zeilen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 500ms;
  --dauer-laden-1-versatz: 80ms;

  /* Raum (mittel): Kräftig und luftig: Kurskarten mit 24 px Innenabstand, Termine dicht, Haltung mit viel Raum neben dem Bild. */
  --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: 136px;
  --raum-sektion: clamp(64px, 8vw, 136px);
  /* Raster: Hero randlos über 12 Spalten, Text unten links über 7. Kurse als drei ungleich breite Karten (5/4/3) am Desktop, auf dem Telefon untereinander; Haltung 6/6 sticky. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(14px, 2vw, 28px);
  --raster-max: 1280px;
  /* Form: Rund und griffig wie ein Ball: Knöpfe als Pille, Karten 28 px; der gelbe Knopf trägt immer den dunklen Rand. */
  --radius-klein: 12px;
  --radius-gross: 28px;
  --radius-button: 999px;
  --linie-staerke: 2px; /* 2px #1B1F2A am gelben Knopf; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, pfeil-icon-button (Variante seitenwechsel) */
  --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: Alle Bilder in Farbe ohne Duoton-Wechsel; H1 in voller Breite; Knopf ohne Federn; Seitenwechsel als Überblendung 150 ms ohne Kreis. */
  /* Reduziert laut Stil: ohne Überschwingen, opacity 150 ms */
}