/* Fundus · Rezept „SaaS & KI: das Produkt zeigt sich selbst“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/ · 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: 'Geist'; src: url('../../../../assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../../../../assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Geist', system-ui, sans-serif;
  --schrift-text: 'Geist', system-ui, sans-serif;
  --schrift-akzent: 'Geist Mono', ui-monospace, monospace;
  /* Größen laut Rezept: Stufen wie Linear: 1.0625 / 1.25 / 1.5 / 2 / 2.5 / 3 / 3.5 / 4 / 4.5rem. h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 560–600, Laufweite -0.022em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.4rem + 2vw, 3rem), -0.018em, 1.1; Fließtext 1rem–1.0625rem, wght 400, -0.006em, Zeilenhöhe 1.6; Geist Mono 0.75–0.8125rem für Labels, Code, Kennzahlen. Gewichte maximal 400 / 500 / 600 (Linear arbeitet mit 510 / 590). */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Graustufen tragen alles, ein einziger Markenton für Primär-Button, Fokus und aktive Zustände. Dark Mode ist bei Dev-Tools Standard (Linear, Raycast), für KMU-Software eher heller Grund wie n8n (#fafafa) mit dunkler Variante. Statusfarben nur in UI-Ausschnitten, nie als Deko-Verlauf.) */
  --farbe-grund: #08090A; /* Grund dunkel (Linear bg-primary) bzw. #FAFAFA hell (n8n grey-50) */
  --farbe-flaeche: #161718; /* Panel/Karte (Linear) */
  --farbe-text: #F7F8F8; /* Text auf dunkel */
  --farbe-text-2: #8A8F98; /* Sekundärtext/Meta (Linear tertiary) */
  --farbe-linie: #242728; /* Linien/Ränder (Raycast border) */
  --farbe-marke: #7170FF; /* Markenton für Aktion/Fokus (Linear accent; im Template austauschbar) */
  --farbe-fehler: #FF8A80; /* abgeleitet: Fehlermeldungen, 8.7 : 1 auf Grund */
  --farbe-signal: var(--farbe-marke); /* Haupthandlung, abgeleitet aus „Markenton für Aktion/Fokus“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 100–160 (Hover, Farbe, Buttons), 180–200 (Menüs, Tabs), 300–400 (Drawer/Modal), 500–600 (Einblendung von Sektionen) */
  --dauer-rezept-1: 100ms;
  --dauer-rezept-2: 160ms;
  --dauer-rezept-3: 180ms;
  --dauer-rezept-4: 200ms;
  --dauer-rezept-5: 300ms;
  --dauer-rezept-6: 400ms;
  --dauer-rezept-7: 500ms;
  --dauer-rezept-8: 600ms;
  /* Bewegung: token-tech-praezise */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-ein: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-aus: cubic-bezier(0.2, 0, 1, 0.9);
  --dauer-xs: 70ms;
  --dauer-s: 110ms;
  --dauer-m: 150ms;
  --dauer-l: 240ms;
  --dauer-xl: 400ms;
  --dauer-xxl: 700ms;
  --stagger: 30ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: 4 bis 8 px, keine Skalierung, kein Federn */

  /* Raum (dicht): App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch. */
  --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: 64px;
  --raum-10: 96px;
  --raum-sektion: clamp(64px, 8vw, 128px);
  /* Raster: Inhalt 1024 bis 1200px (Regel). Kapitel in der Reihenfolge des Arbeitsablaufs, jedes mit einem UI-Ausschnitt; Bento nur in der Dark-Variante. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 32px);
  --raster-spalt: clamp(16px, 2vw, 24px);
  --raster-max: 1200px;
  /* Form: Radien aus der App: 6 px für Knöpfe, Felder und Tags, 10 px für Panels. Kein Linien- oder Punktraster als Hintergrund; verlaufs-rahmen nur am Prompt-Feld im Fokus. */
  --radius-klein: 6px;
  --radius-gross: 10px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #242728 auf Dunkel; auf Hell dieselbe Linie aus Graustufen */
  /* Schatten: nur das Produkt-UI im Hero bekommt einen tiefen, farblosen Schatten; sonst keiner */

  /* Buttons: button-gruppe-expressiv (Variante split), kopieren-feedback */
  --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 rein, 100 ms raus */
}