/* Fundus · Rezept „Kanzlei & Beratung: Haltung und Klarheit“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/ · 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: '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; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../../../../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Newsreader', Georgia, serif;
  --schrift-text: 'Schibsted Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: Wie Oppenhoff: Serif nur für Überschriften und Zitate, Grotesk für Text, Navigation, Labels. h1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader wght 400 (opsz automatisch), Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); Fließtext Schibsted Grotesk 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Navigation/Labels wght 500 (Graphik-Prinzip 400/500), Meta 0.8125rem. Kein Bold über 600. */
  --mass: 65ch;
  --zeilenhoehe-text: 1.1;

  /* Farbe (Prinzip: Ein tiefer, gesättigter Markenton (Nachtblau, Aubergine) für Überschriften, Header und dunkle Sektionen; warme Grautöne statt reinem Weiß für Flächen; ein heller Akzent nur für Links, Fokus und aktive Filter. Keine Verläufe, keine Stockfoto-Blautöne.) */
  --farbe-grund: #F9F8F8; /* Grund (Oppenhoff) */
  --farbe-flaeche: #EFEBEB; /* Flächenwechsel/Karten (Oppenhoff; Linien #D2CDC7) */
  --farbe-text: #1E1E50; /* Marke, Überschriften, dunkle Sektion (Oppenhoff; Alternative Aubergine #2E1A47 wie Slaughter and May) */
  --farbe-text-2: #212529; /* Fließtext */
  --farbe-leise: #8E7C6D; /* Meta/Datum */
  --farbe-akzent: #00BEE6; /* Akzent für Links/Fokus (sparsam, Oppenhoff) */
  --farbe-text-3: #7C6C5E; /* Meta-Text barrierefrei (4.8 : 1 auf #F9F8F8; #8E7C6D nur für Linien oder Schrift ab 24 px) */
  --farbe-linie: #D6D5DD; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.2 : 1 auf Grund */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Marke, Überschriften, dunkle Sektion“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 125 (Farbe, Unterstreichung), 250 (Dropdown, Akkordeon), 330 (Mega-Menü, Drawer), 500 (Bild-Einblendung) */
  --dauer-rezept-1: 125ms;
  --dauer-rezept-2: 250ms;
  --dauer-rezept-3: 330ms;
  --dauer-rezept-4: 500ms;
  /* 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 (mittel): Geordnet und ruhig: Insights und Köpfe in festen Rastern mit 32 px Abstand, Fließtext auf 65ch. */
  --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(72px, 9vw, 136px);
  /* Raster: Hero 7/5 (Satz links, Insight rechts). Köpfe als 4er-Raster mit einheitlichem Porträt 4:5, Insights als Liste mit Datum und Rubrik. */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 4vw, 56px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1280px;
  /* Form: Keine Rundung, keine Schatten, kein Glas. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Formularknöpfe eckig im Markenton. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D2CDC7 zwischen Listeneinträgen und um Felder */
  /* Schatten: keiner */

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