/* Fundus · Rezept „Fotografie und Film: Bild zuerst“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-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: 'Instrument Serif'; src: url('../../../../assets/fonts/instrument-serif-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../../../../assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; 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; }
@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: 'Instrument Serif', Georgia, serif;
  --schrift-text: 'Instrument Sans', system-ui, sans-serif;
  --schrift-akzent: 'Fragment Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Typo bleibt klein und dient dem Bild. Name/Logo 1.25–1.5rem Instrument Serif, Projekttitel clamp(1.5rem, 3vw, 2.75rem) Instrument Serif 400, line-height 1.1, -0.01em. UI und Text Instrument Sans 0.875–1rem/1.5, wdth 90–100. Bildunterschrift und Zähler („12 / 44“) Fragment Mono 0.75rem, tabular-nums, +0.02em. Kein Text über dem Bild außer im Film-Hero. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Neutrale Fläche, die keine Farbe ins Bild wirft. Hell für Fotografie (warmes Hellgrau wie Nadav #e6e6e6 als Platzhalter), dunkel für Film. Text in einem Ton, Akzentfarbe nur, wenn die Marke sie verlangt.) */
  --farbe-grund: #f4f4f2; /* Grund Fotografie */
  --farbe-text: #141414; /* Text */
  --farbe-bildplatzhalter: #e6e6e6; /* Bild-Platzhalter vor dem Laden */
  --farbe-text-2: #8a8a8a; /* Bildunterschrift, Zähler */
  --farbe-grund-2: #0e0e0e; /* Grund Film-Variante */
  --farbe-grund-3: #f2f2f2; /* Text auf Film-Grund */
  --farbe-text-3: #6D6D6D; /* Meta-Text barrierefrei (4.7 : 1 auf #f4f4f2; #8a8a8a nur für Linien oder Schrift ab 24 px) */
  --farbe-linie: #D0D0CE; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Text“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): Bildwechsel 350–800, Hover-Video-Einblendung 600, UI 200, Seitenwechsel 500–800 */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 350ms;
  --dauer-rezept-3: 500ms;
  --dauer-rezept-4: 600ms;
  --dauer-rezept-5: 800ms;
  /* Bewegung: token-kinetisch-inout */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.76, 0, 0.24, 1);
  --dauer-m: 900ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1500ms;
  --stagger: 50ms;
  --aus-faktor: 0.75; /* Schließen = Öffnen × Faktor */
  /* Wege: Rahmen ±100 %, inneres Bild gegenläufig ±30 %, Text ±101 % in Masken */

  /* 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 (dicht): Die Oberfläche ist dicht und klein, das Bild bekommt alles andere. Abstände zwischen Bildern einer Serie klein (8 bis 16 px), zwischen Serien groß. */
  --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: 128px;
  --raum-sektion: clamp(48px, 8vw, 128px);
  /* Raster: 24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio. */
  --raster-spalten: 24;
  --raster-rand: clamp(12px, 2vw, 24px);
  --raster-spalt: clamp(8px, 1vw, 16px);
  --raster-max: none;
  /* Form: Nichts konkurriert mit dem Bild. Knöpfe als gezeichnete Kontur (kontur-button-zeichnen, Variante zeichnen) oder Textlink (pfeil-icon-button, Variante linie). */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* keine; Platzhalter-Grau #e6e6e6 statt Rahmen */
  /* Schatten: keiner */

  /* Buttons: kontur-button-zeichnen (Variante zeichnen), pfeil-icon-button (Variante linie) */
  --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: Kreuzblende 200 ms */
}