/* Fundus · Rezept „Gastronomie: warm und einladend“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/ · 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: 'Commissioner'; src: url('../../../../assets/fonts/commissioner-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Fraunces', Georgia, serif;
  --schrift-text: 'Commissioner', system-ui, sans-serif;
  /* Größen laut Rezept: h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces wght 450–600, opsz automatisch, SOFT 50–100, Laufweite -0.01em, Zeilenhöhe 1.02; Fließtext Commissioner FLAR 0, wght 400, 1.0625rem, Zeilenhöhe 1.55; Versal-Labels und Karten-Rubriken (Öffnungszeiten, Kategorien) Commissioner FLAR 60–100 als Brücke zur Serif, 0.75rem mit 0.15em (Dishoom); Speisekarte: Gericht 1.125rem/500, Beschreibung 0.9375rem, Preis rechtsbündig mit tabellarischen Ziffern. DM Mono aus der Paarung weglassen – Preise in Mono wirken nach Tech. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Warmes Papier-Weiß statt Reinweiß, warme dunkle Schrift, eine bis zwei Hausfarben aus Interieur, Geschirr oder Logo. Food-Fotos immer in voller Farbe; Flächenfarben eher gedeckt, damit das Essen leuchtet.) */
  --farbe-grund: #F0ECE0; /* Grund (Dishoom) */
  --farbe-text: #353839; /* Text */
  --farbe-flaeche: #7F937A; /* Hausfarbe Salbei für Flächen */
  --farbe-dunkle: #293E3A; /* dunkle Sektion/Footer (Bonanza) */
  --farbe-akzent: #EAC16E; /* Akzent Senf für Navigation/Badges (Dishoom nav-bg) */
  --farbe-akzent-2: #E1A894; /* Zweitakzent Rosé, sparsam */
  --farbe-signal: #293E3A; /* Signal: Haupthandlung als dunkle Pille (Senf nur als Kreis oder Akzent; Salbei trägt keine Schrift: 2,8 : 1 mit Weiß) */
  --farbe-leise: #696A68; /* abgeleitet: Meta-Text, 4.6 : 1 auf Grund */
  --farbe-linie: #D2CFC5; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.5 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Tabs), 700 (Bild-Einblendung), 400 (Menü/Overlay) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 400ms;
  --dauer-rezept-3: 700ms;
  /* Bewegung: token-editorial-langsam */
  --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-m: 1000ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1600ms;
  --stagger: 100ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Text 100 % in Zeilenmaske, Bilder clip-path inset und scale 1.1 → 1, Haarlinien scaleX */

  /* 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): Speisekarte dicht und gut scanbar (Gericht und Beschreibung 4 px, Gerichte 20 px auseinander), Bilder mit viel Luft. Öffnungszeiten immer im ersten Bildschirm. */
  --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: 144px;
  --raum-sektion: clamp(72px, 9vw, 128px);
  /* Raster: Hero asymmetrisch 7/5 (Foto/Text) oder Foto randlos. Karte in 2 Spalten, Preis rechtsbündig. Bildstrecken dürfen randlos laufen. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1360px;
  /* Form: Weich, aber nicht verspielt: 12 px an Fotos und Karten, Pillen nur für Reiter (Mittag, Abend, Getränke) und Badges in #EAC16E. */
  --radius-klein: 6px;
  --radius-gross: 12px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #353839 mit 20 % Deckkraft zwischen Gerichten */
  /* Schatten: keiner */

  /* Buttons: pfeil-icon-button (Variante tausch), druck-feedback */
  --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: opacity 200 ms, Masken offen */
}