/* Fundus · Rezept „Mode und Beauty: Kollektion und Ritual“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/ · 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: 'Zalando Sans'; src: url('../../../../assets/fonts/zalando-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Fragment Mono'; src: url('../../../../assets/fonts/fragment-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Zalando Sans', system-ui, sans-serif;
  --schrift-text: 'Zalando Sans', system-ui, sans-serif;
  --schrift-akzent: 'Fragment Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Kampagnen-Headline clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, wght 400–500 (nicht fett), -0.01em, line-height 1.05. Produktname 0.9375rem wght 500, Preis tabular-nums. Fließtext 0.9375–1rem/1.5. Rubriken und Wirkstoffe in Fragment Mono 0.75rem Versal, +0.06em (Lemaire .06–.1rem). Editorial-Zitat optional EB Garamond Italic 1.5rem (Lemaire nutzt Garamond als zweite Stimme). */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Warmes Off-White statt Reinweiß (Toteme #f6f5f3, Lemaire #fdfbf9, Typology #f3efe9), Fast-Schwarz mit Rotstich für Text. Farbe kommt aus Produkt und Kampagnenbild; die UI bleibt zweifarbig. Sale und Fehler sind die einzigen Signalfarben.) */
  --farbe-grund: #f6f3ee; /* Grund */
  --farbe-text: #121010; /* Text */
  --farbe-grund-2: #ebe7e0; /* Kartenfläche, Produkt-Hintergrund */
  --farbe-linie: #cecdc6; /* Linien */
  --farbe-leise: #8c857b; /* Meta, Wirkstoff-Labels */
  --farbe-fehler: #a3402a; /* Sale/Fehler (sparsam) */
  --farbe-text-2: #726D63; /* Meta-Text barrierefrei (4.6 : 1 auf #f6f3ee; #8c857b nur für Linien oder Schrift ab 24 px) */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Text“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): Kampagnen-Bildwechsel 1000, UI (Menü, Akkordeon, Hover) 200–300, Unterstreichung 100 */
  --dauer-rezept-1: 100ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 1000ms;
  /* 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 (luftig): Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander. */
  --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: 160px;
  --raum-sektion: clamp(64px, 8vw, 128px);
  /* Raster: Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen. */
  --raster-spalten: 12;
  --raster-rand: clamp(12px, 2vw, 32px);
  --raster-spalt: clamp(8px, 1vw, 16px);
  --raster-max: none;
  /* Form: Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo. */
  --radius-klein: 2px;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #cecdc6 */
  /* Schatten: keiner */

  /* Buttons: glas-button (Variante getoent), text-roll-hover */
  --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 */
}