/* Fundus · Rezept „Architektur: ruhiges Raster“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/architektur-ruhiges-raster/ · 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: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Hanken Grotesk', system-ui, sans-serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: Stufen mit Faktor 1,25 wie bei Chipperfield (1 / 1.25 / 1.563 / 1.953 / 2.441 / 3.052rem). h1 clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500 (kein Bold), Laufweite -0.02em; Fließtext 1.0625–1.125rem, wght 400, Laufweite -0.012em, Zeilenhöhe 1.45, max-width 50ch; Bildunterschriften/Meta 0.8rem. Kursiv statt fett für Hervorhebungen (KAAN: Book + Book Italic). */
  --mass: 50ch;
  --zeilenhoehe-text: 1.45;

  /* Farbe (Prinzip: Achromatisch, die Projektfotos liefern die Farbe. Weiß als Grund, ein kühles Hellgrau für Flächenwechsel, warmes Fast-Schwarz statt #000. Höchstens ein Interaktionston (Fokus/Links).) */
  --farbe-grund: #FFFFFF; /* Grund */
  --farbe-flaeche: #E1E3E3; /* Fläche/Filter (KAAN bg-dim) */
  --farbe-text: #231F20; /* Text (Chipperfield) */
  --farbe-text-2: #76767A; /* Sekundärtext/Meta */
  --farbe-dunkle: #1F2323; /* dunkle Sektion/Footer (KAAN bg-dark) */
  --farbe-fokus: #0022FF; /* Fokus/Interaktion (steht in beiden CSS-Dateien) */
  --farbe-linie: #DCDBDB; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.5 : 1 auf Grund */
  --farbe-signal: var(--farbe-fokus); /* Haupthandlung, abgeleitet aus „Fokus/Interaktion“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 125 (Farbe/Stroke), 250 (UI, Hover), 500 (Panels), 750–1000 (Bild-Einblendung) */
  --dauer-rezept-1: 125ms;
  --dauer-rezept-2: 250ms;
  --dauer-rezept-3: 500ms;
  --dauer-rezept-4: 750ms;
  --dauer-rezept-5: 1000ms;
  /* Bewegung: token-swiss-knackig */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-ein: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-aus: cubic-bezier(0.5, 0, 0.75, 0);
  --dauer-xs: 200ms;
  --dauer-s: 350ms;
  --dauer-m: 500ms;
  --dauer-l: 700ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: nur x oder y; Text 100 % in Zeilenmaske, Pfeile 8 px; keine Rotation */

  /* Raum (luftig): Weißraum statt Trennlinien (Regel). Große Sprünge zwischen Sektionen, kleine Abstände innerhalb einer Projektzeile: Titel, Ort und Jahr stehen 4 bis 8 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: 80px;
  --raum-9: 128px;
  --raum-10: 200px;
  --raum-sektion: clamp(96px, 12vw, 200px);
  /* Raster: Bilder randlos oder über 8 Spalten, Text in Spalte 1 bis 5 und höchstens 50ch. Projektliste als Liste oder Raster umschaltbar (3 Spalten Desktop, 1 mobil). */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 4vw, 64px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: none;
  /* Form: Keine Pille: Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Nebenaktion als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken). */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #E1E3E3, nur in Projektlisten und Filtern */
  /* Schatten: keiner */

  /* Buttons: pfeil-icon-button (Variante linie), kontur-button-zeichnen (Variante ecken) */
  --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 linear, Masken sofort offen */
}