/* Fundus · Rezept „Onlineshop & Produktmarke: Produkt zuerst“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/d2c-produkt-zuerst/ · 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: 'Young Serif'; src: url('../../../../assets/fonts/young-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../../../../assets/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Young Serif', Georgia, serif;
  --schrift-text: 'Instrument Sans', system-ui, sans-serif;
  /* Größen laut Rezept: Prinzip aller drei Referenzen: Grotesk für UI/Preise/Produktnamen, eigene Serif nur für Marken-Claims. h1 (Claim) clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, Laufweite -0.01em, Zeilenhöhe 1.05; Sektions-Titel Instrument Sans 600, clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem), -0.015em; Produktname 1rem–1.125rem wght 500–600; Preis gleiche Größe mit tabellarischen Ziffern; Fließtext/Beschreibung 1rem, Zeilenhöhe 1.55; Labels/Badges 0.75rem Versal +0.06em. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Warme Neutraltöne als Bühne für Produktfotos, fast schwarze Tinte und ein schwarzer (oder sehr dunkler) Primär-Button für 'In den Warenkorb'. Markenfarben als Akzent für Badges, Sale, Themenwelten; Produktfarben kommen aus den Varianten (Farb-Swatches als Tokens).) */
  --farbe-grund: #F5F4F1; /* Grund (Allbirds natural-white-25) */
  --farbe-grund-2: #ECE9E2; /* Produktkachel-Hintergrund (Allbirds natural-white-60) */
  --farbe-text: #212121; /* Text und Primär-Button (Allbirds black) */
  --farbe-grund-3: #6B6B6B; /* Sekundärtext/Grundpreis */
  --farbe-nachhaltigkeit: #10714E; /* Nachhaltigkeit/Verfügbar (Allbirds green) */
  --farbe-akzent: #EB5C9D; /* Marken-Akzent/Sale-Badge (ooia; austauschbar) */
  --farbe-leise: #696968; /* abgeleitet: Meta-Text, 5.0 : 1 auf Grund */
  --farbe-linie: #D3D2D0; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Text und Primär-Button“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150–200 (Hover, Swatches, Buttons), 250–300 Öffnen / 200 Schließen (Warenkorb-Drawer, Filter, Mega-Menü), 400 (Produktbild-Wechsel) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 250ms;
  --dauer-rezept-4: 300ms;
  --dauer-rezept-5: 400ms;
  /* Bewegung: token-toggle-asymmetrisch */
  --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-xs: 150ms;
  --dauer-s: 220ms;
  --dauer-m: 300ms;
  --dauer-l: 450ms;
  --stagger: 40ms;
  --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): Shop-Rhythmus: Produktkacheln dicht (8 bis 16 px Spalt), Kaufbox mit 16 px zwischen Variante, Preis und Knopf. Inszenierung kommt nach Kategorien und Bestsellern. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 20px;
  --raum-6: 24px;
  --raum-7: 32px;
  --raum-8: 48px;
  --raum-9: 72px;
  --raum-10: 112px;
  --raum-sektion: clamp(56px, 7vw, 104px);
  /* Raster: Startseite: Bento oder 2 bis 4 große Kacheln, darunter Bestseller in 4 Spalten (2 mobil). Produktseite 7/5: Galerie links, Kaufbox rechts sticky. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 3vw, 40px);
  --raster-spalt: clamp(8px, 1.2vw, 16px);
  --raster-max: 1440px;
  /* Form: Kacheln 12 px auf #ECE9E2, Knöpfe als Pille, Swatches rund. grain-noise-overlay nur am Button (Variante button). */
  --radius-klein: 8px;
  --radius-gross: 12px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #212121 mit 10 % Deckkraft */
  /* Schatten: keiner auf Kacheln; der Warenkorb-Drawer dunkelt den Grund ab */

  /* Buttons: button-gruppe-expressiv (Variante split), grain-noise-overlay (Variante button) */
  --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 150 ms */
}