/* BIANCO — Design-Tokens (:root). Ladereihenfolge: tokens → page-shell → layout → pages */

:root {
	--white: #f6f7f3;
	/* BIANCO.svg / Logomark.svg als Maske färben = exakt --white (kein reines #fff durch invert(1)) */
	--bianco-wordmark-mask: url("../svg/BIANCO.svg");
	--bianco-logomark-mask: url("../svg/Logomark.svg");
	--black: #000000;
	--bg: var(--white);
	--bg-warm: var(--white);
	--fg: var(--black);
	/* Keine abgeschwächten Grau-Töne für Text — nur Vorder- und Hintergrundfarbe */
	--fg-muted: var(--fg);
	--accent: #e60012;
	--font-display: "Geist Sans", system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, monospace;
	/* Eine Größe für alle Geist-Mono-UI / Fließ (px, unabhängig vom Root) */
	--text-mono: 14px;
	/*
	 * Typo-Skala: Mono-UI einheitlich 14px; Display-/Clamp-Werte separat.
	 */
	--text-body: var(--text-mono);
	--text-ui-sm: var(--text-mono);
	--text-reading: var(--text-mono);
	--text-lede: var(--text-mono);
	--text-label: var(--text-mono);
	--text-micro: var(--text-mono);
	--text-list-mega-item: clamp(1.15rem, 3.4vw, 2.25rem);
	--text-page-title: clamp(1.25rem, 5vw, 3rem);
	--text-page-title-sm: clamp(1.15rem, 4.2vw, 2.35rem);
	--text-hero-title: clamp(1.25rem, 4vw, 2.75rem);
	--text-hero-title-sm: clamp(1.15rem, 3.7vw, 2.15rem);
	--text-brand-logo: clamp(2rem, 14vw, 9.5rem);
	--space: 2rem;
	/* Vertikaler Rhythmus für Lede/Intro/Teaser (Service, Contact, Home, About, …) */
	--page-intro-vspace: 4rem;
	--page-pad: 1rem;
	/* Luft zwischen Nav-Zeile und Typewriter (im Home-Header als padding-bottom umgesetzt) */
	--home-intro-nav-gap: 3rem;
	--home-preview-viewport-gap: 2rem;
	--max: 118rem;
	/*
	 * Layout-Raster: 12 Spalten Standard.
	 * Feineres 16er-Raster z. B.:
	 *   --layout-grid-cols: 16;
	 *   --layout-content-start: 5;
	 *   --layout-content-span: 10;
	 */
	--layout-grid-cols: 12;
	--layout-grid-gap: 1rem;
	/* Haupt-Spalte (Home-Listen, Innentexte, Footer-Zeilen) — Gitterlinie 1 = links */
	--layout-content-start: 4;
	--layout-content-span: 8;
	/*
	 * Home nur Talents: Liste weiter rechts (+3 Spalten: Start 4→7). span muss kleiner werden,
	 * sonst ragt aus dem 12er-Raster (max. Start+span = 13). Für +4: z. B. Start 8, span 5.
	 */
	--layout-talents-content-start: 6;
	--layout-talents-content-span: 6;
	/* Nur für Debug-Overlay (data-design-grid*), nicht in Produktion aktivieren */
	--layout-grid-debug-opacity: 0.09;
	--layout-grid-debug-rgb: 230, 0, 18;
	/* Home Cases/Talents Mega-Liste: cap 5rem ≈ 80px (16px-Root), flüssig bis runter auf Mobile */
	--home-mega-list-size: clamp(1.75rem, 1.2rem + 4.25vw, 5rem);
	/* Schmale Viewports: etwas kompakter (Vorschau nimmt mehr Raum wahr) */
	--home-mega-list-size-sm: clamp(1.42rem, 0.92rem + 3.15vw, 4.35rem);
	/* Case-Unterseite Hero: engerer Zeilenabstand als Einzeiler-Liste */
	--home-case-hero-line-height: 0.92;
	/* Footer unten: wie Header oben — max(page-pad, safe-area), nicht addiert (sonst doppelte Luft auf Mobile). */
	--site-footer-pad-bottom: max(var(--page-pad), env(safe-area-inset-bottom, 0px));
	/* Hash / scrollIntoView: Abstand zur fixen Kompaktleiste */
	--anchor-scroll-padding: 4.5rem;
}