/* Fundus · Rezept „Laden vor Ort: Schaufenster, Beratung, Abholung“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/laden-vor-ort-sortiment/ · 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: 'Libre Caslon Display'; src: url('../../../../assets/fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../../../../assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Libre Caslon Display', Georgia, serif;
  --schrift-text: 'Familjen Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Libre Caslon Display clamp(2.5rem, 1.5rem + 4vw, 5rem), Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(1.875rem, 1.3rem + 2vw, 3rem) in Familjen Grotesk 600 (Libre Caslon Display hat ein Gewicht und feine Haarlinien: nur H1 und große Abteilungsnamen ab 2.5rem). Fließtext Familjen Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch; Kursive für Titel von Büchern und Produktnamen. Preise und Zeiten Familjen Grotesk 500 mit Tabellenziffern; Abteilungsnamen in den Bildstreifen Libre Caslon Display ab 2.5rem, schmale Streifen in Familjen Grotesk 600. Knöpfe Familjen Grotesk 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Je Laden ein Leitmaterial: hier Papier als Grund, Kraftkarton als Fläche für Empfehlungen, Reservierung und Werkstattpreise, fast schwarzes Tintenbraun für Footer. Eine Akzentfarbe aus dem Schaufenster oder der Markise, hier Schaufenstergrün, nur für Reservieren und Termin. Austauschbar je Laden (Markisenrot, Ladenblau), immer mit 4,5 : 1 geprüft. Kein Pastell, keine Holzmaserung, kein Papier-Fake.) */
  --farbe-grund: #F5F1E8; /* Grund Papier */
  --farbe-text: #211F1C; /* Text (14,6 : 1 auf Grund) */
  --farbe-flaeche: #E2D3B8; /* Fläche Kraftkarton: Empfehlungen, Reservierung, Werkstattpreise (Text 11,2 : 1) */
  --farbe-dunkel: #2C2A26; /* Dunkel Tinte: Footer, Veranstaltungs-Band (Weiß darauf 14,3 : 1) */
  --farbe-signal: #2E5B45; /* Signal Schaufenstergrün: Reservieren, Termin (Weiß darauf 7,8 : 1; als Fläche auf Grund 6,9 : 1, auf Kraftkarton 5,3 : 1); auf Tinte stattdessen Papier-Knopf mit dunkler Schrift */
  --farbe-leise: #615B51; /* Leise: Meta-Angaben, Stand-Daten (6,0 : 1 auf Grund, 4,6 : 1 auf Kraftkarton) */
  --farbe-linie: #D9CFBE; /* 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), 1000 (Bildstreifen wächst), 300 (Panel, Dialog öffnen), 200 (schließen), 1200 (Schaufenster-Foto öffnet sich einmal) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 1000ms;
  --dauer-rezept-5: 1200ms;
  /* 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 */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);

  /* 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: 1200ms; /* = --dauer-rezept-5 */
  --dauer-seitenwechsel: 1000ms; /* = --dauer-rezept-4 */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  /* Laden 1: Schaufenster-Foto (inset-rahmen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 1200ms;
  /* Laden 2: H1 */
  --dauer-laden-2-ab: 200ms;
  --dauer-laden-2: 1000ms;
  --dauer-laden-2-versatz: 100ms;

  /* Raum (mittel): Wie ein aufgeräumtes Regal: Empfehlungen mit 24 px Abstand, Preislisten eng (8 px), Bildstreifen mit 6 px Spalt. */
  --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, 9vw, 136px);
  /* Raster: Hero 7/5 (Schaufenster links im Rahmen, Text rechts). Bildstreifen über volle Breite, Höhe clamp(360px, 57vh, 600px). Empfehlungen als Reihe. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(12px, 2vw, 28px);
  --raster-max: 1320px;
  /* Form: Fast eckig wie Etiketten und Buchrücken; Nebenwege als Doppelkontur. */
  --radius-klein: 2px;
  --radius-gross: 6px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D9CFBE in Preislisten; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, kontur-button-zeichnen (Variante doppel) */
  --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: Breite wechselt sofort, das Foto steht (Rezept); Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: opacity 200 ms, Masken offen */
}