/* Fundus · Rezept „Lebensmittelhandwerk: Theke, Ofen, Filiale“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/lebensmittelhandwerk-theke/ · 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: 'Shrikhand'; src: url('../../../../assets/fonts/shrikhand-latin-400.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: 'Shrikhand', cursive;
  --schrift-text: 'Onest', system-ui, sans-serif;
  /* Größen laut Rezept: Wortmarke Shrikhand randlos eingepasst (foto-hero-wortmarke, bei 390 px etwa 80 bis 95 px für sieben Buchstaben), Laufweite -0.01em, Zeilenhöhe 0.9; h1 und h2 Shrikhand clamp(2rem, 1.3rem + 3vw, 3.75rem) bzw. clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem), Zeilenhöhe 1.05, nie in Versal und nie unter 1.5rem. h3, Produktnamen und alles Übrige Onest: Fließtext 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch; Preise, Gewicht und Abholzeiten Onest 500 mit Tabellenziffern; Allergene 0.875rem wght 500. Knöpfe Onest 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Farben aus Mehl, Kruste und Ofen: helles Mehlweiß als Grund, Krustenbeige als Fläche für Sortiment und Vorbestellung, Ofenschwarz für Footer und Stellenband. Ein Krustenrot nur für Vorbestellen und Bestellung abschicken. Die Fotos bringen die Farbe der Ware; keine Weizenähren, keine Holzmaserung, kein Rot-Weiß-Karo. Eine eigene Markenfarbe (Kirschrot, Senfgelb) ersetzt das Krustenrot, wenn sie mit Weiß 4,5 : 1 erreicht.) */
  --farbe-grund: #F7F1E6; /* Grund Mehl */
  --farbe-text: #241B14; /* Text (15,0 : 1 auf Grund) */
  --farbe-flaeche: #EBD8BB; /* Fläche Kruste: Sortiment, Vorbestellung, Abholfenster (Text 12,1 : 1) */
  --farbe-dunkel: #2B211B; /* Dunkel Ofen: Footer, Stellenband (Weiß darauf 15,7 : 1) */
  --farbe-signal: #8A3C12; /* Signal Krustenrot: Vorbestellen, Bestellung abschicken (Weiß darauf 7,7 : 1; als Fläche auf Grund 6,8 : 1, auf Kruste 5,5 : 1); auf Ofen stattdessen Mehl-Knopf mit dunkler Schrift */
  --farbe-leise: #665746; /* Leise: Meta-Angaben, Gewicht, Stand-Daten (6,2 : 1 auf Grund, 5,0 : 1 auf Kruste) */
  --farbe-linie: #DDCDB4; /* Linie: Haarlinien in Preislisten (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 (Mengen-Knopf, Häkchen), 300 (Panel, Reiter öffnen), 200 (schließen), 800 (Buchstaben der Wortmarke einmal beim Laden, 60 je Buchstabe) ; 800 (Seitenwechsel als Laib, zurück 540, cubic-bezier(0.37, 0, 0.63, 1)) */
  --dauer-rezept-1: 60ms;
  --dauer-rezept-2: 150ms;
  --dauer-rezept-3: 200ms;
  --dauer-rezept-4: 300ms;
  --dauer-rezept-5: 400ms;
  --dauer-rezept-6: 540ms;
  --dauer-rezept-7: 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: 800ms; /* 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-2 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-4 */
  --dauer-gross: 800ms; /* = --dauer-rezept-6 */
  --dauer-seitenwechsel: 800ms;
  --dauer-schliessen: 200ms; /* = --dauer-rezept-3 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  --ease-ausnahme: cubic-bezier(0.37, 0, 0.63, 1); /* nur: wachsende Formen beim Seitenwechsel (Laib, seitenwechsel-wachsende-form) und die Kopfmarke im selben Wechsel; Expo-out verschluckt die Form nach etwa 200 ms (Jury Bäckerei-Probe), alle anderen Flächen nehmen --ease-flaeche */
  --ease-form: var(--ease-ausnahme); /* Name, den die Partitur beim Laden nennt */
  /* Laden 1: Wortmarke (foto-hero-wortmarke, gestapelt) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 800ms;
  --dauer-laden-1-versatz: 60ms;

  /* Raum (mittel): Theke dicht, Backstube luftig: Preislisten mit 8 px Zeilenabstand, Kapitel mit viel Raum. Mobil eine untere Leiste Vorbestellen / Anrufen. */
  --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: Wortmarke über volle Breite, Fotoband 21:9 darunter. Sortiment als Kachelraster 4 Spalten, mobil zweireihige Wischreihe. Backstube 6/6 mit stehendem Bild. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(12px, 2vw, 28px);
  --raster-max: 1320px;
  /* Form: Weich wie ein Laib: runde Ecken an Kacheln und Panels, Knöpfe als Pille. Krustenrot nur für Vorbestellen. */
  --radius-klein: 6px;
  --radius-gross: 16px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #DDCDB4 in Preislisten */
  /* 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: Wortmarke steht klein im Kopf, im Hero als ruhiger Schriftzug; Bestätigungen ohne Weg (Rezept); Kapitelkanten stehen fertig (--kp 1), die Uhr zeigt die Zeit des Kapitels; Seitenwechsel als Überblendung 150 ms ohne Laib und ohne Flug. */
  /* Reduziert laut Stil: ohne Überschwingen, opacity 150 ms */
}