/* Fundus · Rezept „Weingut und Hofladen: Herkunft zuerst“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/weingut-hofladen-herkunft/ · 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: 'EB Garamond'; src: url('../../../../assets/fonts/eb-garamond-latin-wght-normal.woff') format('woff'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('../../../../assets/fonts/eb-garamond-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../../../../assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'EB Garamond', Georgia, serif;
  --schrift-text: 'EB Garamond', Georgia, serif;
  --schrift-akzent: 'DM Mono', ui-monospace, monospace;
  /* Größen laut Rezept: h1 EB Garamond clamp(2.75rem, 1.6rem + 5vw, 6rem), wght 400, Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.5rem + 2vw, 3.25rem), wght 400; Lagennamen und Jahrgangstitel in EB Garamond Italic. Fließtext EB Garamond 1.25rem (20 px, wegen der kleinen x-Höhe), wght 400, Zeilenhöhe 1.55, höchstens 66ch, Mediävalziffern (onum) nur im Fließtext. DM Mono für alle Zahlen und Etiketten: Preis 1rem wght 500, Grundpreis, Füllmenge, % vol, Jahrgang, Analysewerte 0.875rem wght 400; Labels 0.75rem, Versal, +0.1em; Knöpfe DM Mono 500, 0.875rem, Versal, +0.08em. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Grund und Flächen kommen aus dem Boden der Hauptlage, nicht aus dem Wein. Beispiel hier: Kalkstein hell als Grund, Löss als Fläche für Kaufbox und Steckbrief, Schiefer für dunkle Bänder, das Lagen-Kapitel und den Footer. Signal Buntsandstein-Rot nur für In den Warenkorb, Kaufen und Tickets; auf Schiefer wird der Kauf-Knopf kalkhell mit Schiefer-Schrift. Je nach Lage austauschbar (Schiefer-Blau, Löss-Ocker, Granit-Grau), immer mit 4,5 : 1 geprüft. Weinfarben (Rot, Gold, Rosé) nur aus den Fotos, nie als Fläche. Kein Bordeaux-Verlauf, kein Rebenblatt-Grün als Marke, keine Holzmaserung.) */
  --farbe-grund: #F1ECE2; /* Grund Kalkstein */
  --farbe-text: #22211F; /* Text (13,7 : 1) */
  --farbe-flaeche: #E6DCCB; /* Fläche Löss: Kaufbox, Steckbrief, Hofladen-Zeiten (Text 11,9 : 1) */
  --farbe-schiefer: #2F3236; /* Schiefer: dunkle Bänder, Lagen-Kapitel, Footer (Kalk darauf 10,9 : 1) */
  --farbe-signal: #8A3A2B; /* Signal Buntsandstein: In den Warenkorb, Kaufen, Ticket (Weiß darauf 7,7 : 1; als Fläche auf Kalk 6,6 : 1, auf Löss 5,7 : 1); auf Schiefer stattdessen Kalk-Knopf mit Schiefer-Schrift */
  --farbe-grund-2: #5A564F; /* Sekundärtext, Grundpreis, Analysewerte (6,2 : 1 auf Kalk) */
  --farbe-linie: #D8CFC0; /* Linien, Etikett-Rahmen */
  --farbe-leise: #686661; /* abgeleitet: Meta-Text, 4.9 : 1 auf Grund */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.6 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Farbe, Hover), 300 (Drawer, Filter, Popover öffnen), 200 (schließen), 1600 (Masken-Reveal eines Lagenbilds), 2200 (Zurückskalieren 1.08 → 1, einmalig); Licht der Signatur per Lerp 0.06 je Bild */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 1600ms;
  --dauer-rezept-5: 2200ms;
  /* Bewegung: token-luxus-weich */
  --ease: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-ein: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-aus: cubic-bezier(0.37, 0, 0.63, 1);
  --dauer-s: 500ms;
  --dauer-m: 1200ms;
  --dauer-l: 1400ms;
  --dauer-xl: 2200ms;
  --stagger: 120ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: y 16 px, Bild scale 1.08 → 1, blur 8 px → 0 (ohne Blur auf Touch) */

  /* 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): Wie ein Etikett: Weinzeilen mit Jahrgang, Füllmenge, Preis und Grundpreis eng (4 bis 8 px), Lagen-Kapitel mit viel Luft. */
  --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, 144px);
  /* Raster: Sortiment als Liste oder 3er-Raster, Lage als Filter. Lagen-Kapitel 7/5 (Foto/Steckbrief), Kaufbox auf Löss. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1320px;
  /* Form: Eckig wie ein Etikett. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Buntsandstein gefüllt nur für Kaufen und Tickets. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D8CFC0 als Etikett-Rahmen um Kaufbox und Steckbrief */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, kontur-button-zeichnen (Variante ecken) */
  --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 300 ms, kein Zoom, kein Blur */
}