/* Fundus · Rezept „Luxus und Manufaktur: Stille“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/luxus-manufaktur-stille/ · 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: 'Bodoni Moda'; src: url('../../../../assets/fonts/bodoni-moda-latin-opsz-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../../../../assets/fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; 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: 'Bodoni Moda', system-ui, sans-serif;
  --schrift-text: 'Instrument Sans', system-ui, sans-serif;
  /* Größen laut Rezept: Titel clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, opsz an Größe gekoppelt (font-optical-sizing auto), -0.01em, line-height 1.05. Labels und Navigation Instrument Sans 0.75rem Versal, letter-spacing +0.08em (NOMOS .08em, Lange bis 2px). Fließtext 0.9375rem/1.47 (Lange line-height-base 1.4706), wght 400. Kaliber- und Preisangaben tabular-nums. Script (imperial-script) höchstens für ein Monogramm, wie Messikas KunstlerScript. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Anthrazit statt Schwarz (Lange #23282f) und Weiß, sektionsweise im Wechsel. Edelmetall nur als feine Linie oder Detailfarbe, nie als Fläche oder Verlauf. Produktfotos auf neutralem Hellgrau.) */
  --farbe-text: #23282f; /* Anthrazit, dunkle Sektionen und Text */
  --farbe-grund: #ffffff; /* Grund */
  --farbe-flaeche: #f4f4f2; /* Produktfläche */
  --farbe-leise: #8b9097; /* Meta, Referenznummern */
  --farbe-linie: #d9dadb; /* Linien */
  --farbe-linie-2: #a88a5a; /* Messing, nur Linien und Fokus */
  --farbe-text-2: #71757B; /* Meta-Text barrierefrei (4.6 : 1 auf #ffffff; #8b9097 nur für Linien oder Schrift ab 24 px) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.5 : 1 auf Grund */
  --farbe-signal: var(--farbe-linie-2); /* Haupthandlung, abgeleitet aus „Messing, nur Linien und Fokus“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): UI 125–250, Menü auf 300 / zu 200, Bildwechsel 400–500, Abdunklung auf 800 / zu 600 */
  --dauer-rezept-1: 125ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 250ms;
  --dauer-rezept-4: 300ms;
  --dauer-rezept-5: 400ms;
  --dauer-rezept-6: 500ms;
  --dauer-rezept-7: 600ms;
  --dauer-rezept-8: 800ms;
  /* 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 (luftig): Ruhe durch Raum (kurz): die größten Sektionsabstände aller Rezepte. Technische Daten dagegen eng in Tabellenziffern. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 16px;
  --raum-4: 24px;
  --raum-5: 40px;
  --raum-6: 64px;
  --raum-7: 96px;
  --raum-8: 144px;
  --raum-9: 200px;
  --raum-10: 240px;
  --raum-sektion: clamp(112px, 14vw, 240px);
  /* Raster: Asymmetrisch (broken-grid-asymmetrisch): Bild 7 Spalten, Text 4 Spalten versetzt. Freisteller zentriert mit viel Rand. Sektionen wechseln Anthrazit und Weiß. */
  --raster-spalten: 12;
  --raster-rand: clamp(24px, 6vw, 96px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1440px;
  /* Form: Bilder und Flächen eckig. Einzige runde Form ist die dunkle Pille der Haupthandlung (pfeil-icon-button, Variante tausch); Nebenweg mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel). */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #d9dadb; Messing #a88a5a nur als feine Linie und Fokus */
  /* Schatten: keiner */

  /* Buttons: kontur-button-zeichnen (Variante doppel), pfeil-icon-button (Variante tausch) */
  --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 */
}