/* Fundus · Rezept „Freelancer: Stille Visitenkarte“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/freelancer-stille-visitenkarte/ · 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: 'Host Grotesk'; src: url('../../../../assets/fonts/host-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Host Grotesk', system-ui, sans-serif;
  --schrift-text: 'Host Grotesk', system-ui, sans-serif;
  --schrift-akzent: 'Newsreader', Georgia, serif;
  /* Größen laut Rezept: Kein Riesen-Hero: h1 als Satz clamp(1.25rem, 2vw, 1.5rem), wght 500, line-height 1.4. h2 1rem, wght 500, Farbe Sekundärgrau. Fließtext 1rem/1.6 (Paco 16px, Leading 20–32px), Klein 0.875rem. Spalte max-width 640px (Paco --content-width), Seite 1072px. Newsreader Italic nur für einzelne Wörter im Satz, 1.05em, opsz auto. Laufweite 0 bis -0.01em. Host Grotesk nur in 400 und 500. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Fast nur Graustufen in 8–10 Stufen (Paco #fcfcfc bis #646464, Emil #0b0b09 bis #f8f8f8), Kontrast über Grauwert statt über Farbe. Höchstens eine Farbe für Fokus- und Link-Zustände. Dark Mode als gleichwertige Variante.) */
  --farbe-grund: #fcfcfc; /* Grund */
  --farbe-text: #0b0b09; /* Text */
  --farbe-text-2: #646464; /* Sekundärtext, h2 */
  --farbe-linie: #e8e8e8; /* Linien, Trenner */
  --farbe-flaeche: #f0f0f0; /* Hover-Fläche */
  --farbe-fokusring: #2f5bea; /* Fokus-Ring und Link-Hover (einzige Farbe) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.4 : 1 auf Grund */
  --farbe-signal: var(--farbe-fokusring); /* Haupthandlung, abgeleitet aus „Fokus-Ring und Link-Hover“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): Hover/Farbe 80–160, Transform 200–240, Einblendungen 320–480, nie über 500 außer Theme-Wechsel */
  --dauer-rezept-1: 80ms;
  --dauer-rezept-2: 160ms;
  --dauer-rezept-3: 200ms;
  --dauer-rezept-4: 240ms;
  --dauer-rezept-5: 320ms;
  --dauer-rezept-6: 480ms;
  --dauer-rezept-7: 500ms;
  /* 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): Dichter Rhythmus in einer schmalen Spalte: Zeilen 20 bis 32 px (Paco), Listeneinträge 12 px, Abschnitte 48 bis 80 px. Ruhe entsteht durch den breiten Rand, nicht durch große Sprünge. */
  --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(48px, 6vw, 80px);
  /* Raster: Eine Spalte, linksbündig. Jahreszahlen in Listen rechtsbündig in Tabellenziffern. Projektseiten dürfen Bilder bis 1072px zeigen. */
  --raster-spalten: 1;
  --raster-rand: clamp(20px, 5vw, 48px);
  --raster-spalt: 24px;
  --raster-max: 640px (Spalte), Seite 1072px;
  /* Form: Konturpille für den Kontakt (pfeil-icon-button, Variante seitenwechsel), 6 px für Hover-Flächen und Kopier-Feedback, 8 px für Vorschaubilder. */
  --radius-klein: 6px;
  --radius-gross: 8px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #e8e8e8 als Trenner */
  /* Schatten: keiner; Hover nur über Fläche #f0f0f0 */

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