/* Fundus · Rezept „Tierarztpraxis: zugewandt und klar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/tierarztpraxis/ · 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: 'Young Serif'; src: url('../../../../assets/fonts/young-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; 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; }

:root {
  /* Schrift */
  --schrift-headline: 'Young Serif', Georgia, serif;
  --schrift-text: 'Onest', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Young Serif clamp(2.25rem, 1.4rem + 3.6vw, 4rem), Laufweite -0.015em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem). Fließtext Onest 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch. Sprechzeiten, Notdienst und Gebühren Onest 500 mit Tabellenziffern. Knöpfe Onest 600, 1rem. Young Serif hat nur einen Schnitt; Hervorhebungen über Größe. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Warm und sauber: Hafer als Grund, helles Salbei als Fläche für Tierarten, Sprechzeiten und Kosten, Tannengrün für Notdienst-Karte und Footer. Ein Kürbiston nur für Termin und Anrufen. Notdienst ist Tannengrün mit weißer Schrift, nicht Alarmrot. Keine Pfoten-Ornamente, kein Knochen-Icon, kein Babyblau.) */
  --farbe-grund: #F4EFE6; /* Grund Hafer */
  --farbe-text: #1F2421; /* Text (13,8 : 1 auf Grund) */
  --farbe-flaeche: #DCE4DA; /* Fläche Salbei: Tierarten, Sprechzeiten, Kosten (Text 12,1 : 1) */
  --farbe-dunkel: #23403A; /* Dunkel Tanne: Notdienst-Hinweis im Hero, Footer (Weiß darauf 11,3 : 1) */
  --farbe-signal: #B4491B; /* Signal Kürbis: Termin, Anrufen (Weiß darauf 5,4 : 1; als Fläche auf Grund 4,7 : 1); auf Tanne stattdessen Hafer-Knopf mit dunkler Schrift */
  --farbe-leise: #5C625D; /* Leise: Meta-Angaben, Stand-Daten (5,5 : 1 auf Grund, 4,8 : 1 auf Salbei) */
  --farbe-linie: #CFD3C9; /* Linie: Haarlinien in Sprechzeiten (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 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 200 (Zustandswechsel der Figur), 2400 (Atmen der Figur, nur im Formular) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 2400ms;
  /* Bewegung: token-toggle-asymmetrisch */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --dauer-xs: 150ms;
  --dauer-s: 220ms;
  --dauer-m: 300ms;
  --dauer-l: 450ms;
  --stagger: 40ms;
  --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);
  --dauer-xl: 300ms; /* 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: 300ms; /* = --dauer-rezept-3 */
  --dauer-seitenwechsel: 300ms; /* = --dauer-rezept-3 */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;

  /* Raum (mittel): Ruhig und übersichtlich: Sprechzeiten dicht, Tierarten mit großzügigen Reitern, Notdienst-Karte mit 24 px Innenabstand. */
  --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: 88px;
  --raum-10: 120px;
  --raum-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Hero-Foto über 12 Spalten mit Karte unten links über 5 Spalten. Leistungen als zweispaltige Liste, Formular 6/6 mit der Figur rechts. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(16px, 2vw, 28px);
  --raster-max: 1240px;
  /* Form: Weich gerundet, freundlich; Notdienst-Karte mit 20 px Radius in Tanne. */
  --radius-klein: 8px;
  --radius-gross: 20px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #CFD3C9 in Sprechzeiten; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), 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: Figur in ruhiger Pose (Rezept); Reiter und Dialoge ohne Weg; Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: opacity 150 ms */
}

/* ---------------------------------------------------------------------------
   Abgeleitet für den Starter „Tierarztpraxis Thamsen“ (05.11.2026), nur aus den Werten oben.
   Leitidee Karteikarte: Reiter-Raster, Kartenpapier, Linien der Karte. */
:root {
  --farbe-karte: #FBF8F2;          /* Kartenpapier: Grund Hafer aufgehellt, Text 15,2 : 1 */
  --farbe-karte-linie: #E4DED2;    /* Linien der Karteikarte (nur Dekoration) */
  --farbe-tanne-hell: #E9F0EB;     /* Text auf Tanne, 9,9 : 1 */
  --farbe-tanne-leise: #BFD2C7;    /* Meta auf Tanne, 7,0 : 1 */
  --farbe-signal-dunkel: #963A14;  /* Kürbis gedrückt / Hover, Weiß 7,0 : 1 */
  --farbe-signal-text: #9A3E17;    /* Kürbis als Textfarbe auf Hafer, 5,9 : 1 */
  --reiter-breite: clamp(132px, 15vw, 196px);
  --reiter-hoehe: 40px;
  --reiter-schritt: clamp(72px, 8.4vw, 112px); /* Versatz je Karte im Kasten */
  --h1-seite: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  --h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  /* Signatur „Karte ziehen“ (Nachbesserung nach Jury 05.11.2026, Abweichung von der Partitur, siehe LIESMICH):
     langsamer Anzug wie eine Karte mit Gewicht, kurzes Herausheben über das Ziel, dann Absetzen. Eine Kurve für
     Seitenwechsel, Kartenstapel, Register-Auftritt und Knopf-Füllung. */
  --ease-karte: linear(0, 0.015 8%, 0.09 18%, 0.3 32%, 0.62 48%, 0.86 62%, 0.985 74%, 1.012 84%, 1);
  --dauer-karte: 620ms;      /* Seitenwechsel (Partitur 300 ms; im 80-ms-Raster sonst nur 2 bis 3 Bilder sichtbar) */
  --dauer-karte-zurueck: 580ms; /* Browser-Zurück: Karte sinkt in den Kasten, schneller als das Ziehen (Schließen < Öffnen) */
  --ease-karte-zurueck: linear(0, 0.1 10%, 0.28 24%, 0.52 40%, 0.76 57%, 0.92 73%, 0.985 87%, 1); /* gleiche Form ohne Überschwinger, früher in Bewegung, damit der kürzere Rückweg sichtbar bleibt */
  --dauer-karte-zug: 480ms;  /* Karte im Stapel nach vorn ziehen (Leistungen, Tierarten) */
  --dauer-fuellung: 420ms;   /* Knopf-Füllung: mit --ease (Expo-out) war sie nach 150 ms schon fertig */
  --monument-zahl: clamp(3rem, 1.4rem + 6vw, 7rem); /* große Zahl je Seite (Summe, Gebühr), Onest mit Tabellenziffern */
  --monument-tel: clamp(2.25rem, .8rem + 4.6vw, 5.25rem);
  --monument: clamp(3.5rem, 2rem + 7vw, 8rem); /* große Ziffern: Telefon, 404 (Young Serif) */
}