/* 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");
	/* Warm near-black (subtle brown undertone vs #000); pairs with --white */
	--black: #12110f;
	--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;
	/* Abstand Nav/Unterkante Header → erster Inhalt (Section, Hero-Titel, Intro) — überall gleich (Home-Lede, Talents-Intro, Service, …) */
	--page-intro-vspace: 4rem;
	/* Case/Talent-Hero (Karussell) + Home-Talents (section--dark): gleiche untere Luft zum hellen Anschluss; schmal 6rem */
	--hero-dark-pad-bottom: 8rem;
	/* Home Site-Intro: gleiche max. Lesbreite in Typewriter-Phase (fixed) und im Cases-Grid */
	--home-site-intro-text-max: 38rem;
	--page-pad: 1rem;
	/* Home cases/talents preview strip: keep in sync with layout.css (max --bianco-preview-panel-narrow-max / min --bianco-preview-panel-wide-min) and assets/js/home-cases-preview.js PREVIEW_PANEL_TO_BODY_MQ */
	--bianco-preview-panel-narrow-max: 52rem;
	--bianco-preview-panel-wide-min: 52.0625rem;
	--home-preview-viewport-gap: 2rem;
	/* Home-Listen: Vorschau-Teaser — rem statt vh (kein Viewport-Flattern); Cap für 3∶4 bzw. Panel-Ratio */
	--home-preview-teaser-max-h: 32rem;
	--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: Abstand BERLIN → Viewport = wie seitliches --page-pad (Oberkante-Inset wirkt über Header, nicht doppelt mit Safe-Area unten). */
	--site-footer-pad-bottom: var(--page-pad);
	/* Hash / scrollIntoView: Abstand zur fixen Kompaktleiste */
	--anchor-scroll-padding: 4.5rem;
	/*
	 * Case-Video-Modal: Basis z-index; aktiv body…modal mit höherer Ebene (layout.css).
	 */
	--z-case-video-modal-layer: 100000;

	/*
	 * Motion — Easings/Dauern (Shell, Home-Vorschau, Case-Hero, Modals).
	 * Hinweis: max-height-/margin-Übergänge sind layout-lastig; hier bewusst für Teaser/Menü-Collapse.
	 */
	--ease-out-ui: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-editorial: cubic-bezier(0.24, 0.9, 0.22, 1);
	--ease-out-soft: cubic-bezier(0.22, 0.82, 0.18, 1);
	--ease-out-expand: cubic-bezier(0.33, 0.86, 0.24, 1);
	--ease-modal-exit: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-panel-collapse: cubic-bezier(0.55, 0.06, 0.68, 1);
	--ease-panel-open: cubic-bezier(0.22, 0.75, 0.2, 1);
	--ease-aux-fade: cubic-bezier(0.2, 0.9, 0.35, 1);
	--ease-teaser-img: cubic-bezier(0.25, 0.85, 0.2, 1);
	--ease-home-intro: cubic-bezier(0.26, 0.88, 0.18, 1);
	--ease-load-sweep: cubic-bezier(0.45, 0.05, 0.2, 1);

	--duration-micro: 0.15s;
	--duration-ui-tight: 0.22s;
	--duration-ui-short: 0.26s;
	--duration-slide: 0.3s;
	--duration-ui: 0.38s;
	--duration-ui-md: 0.4s;
	--duration-ui-long: 0.42s;
	--duration-reveal: 0.48s;
	--duration-modal-out: 0.42s;
	--duration-structural: 0.52s;
	--duration-panel-open: 0.54s;
	--duration-chc-mask: 0.72s;
	--duration-chc-wave: 0.45s;
	--duration-project-hero: 0.55s;
	/*
	 * Home-Vorschau schmal (li.is-preview-open): Auf-/Zuklappen — layout.css @media max. Panelbreite;
	 * assets/js/home-cases-preview.js PREVIEW_HIDE_OUT_FALLBACK_MS soll darüber liegen.
	 */
	--home-preview-narrow-motion-duration: 0.78s;
	--home-preview-narrow-motion-ease: var(--ease-out-expand);
	--home-preview-narrow-tag-delay: 0.48s;

	/* Mega-Listen Case/Talent: nur Farb-Transition (Dauer/Easing) */
	--duration-mega-link: var(--duration-ui-tight);
	--ease-mega-link: var(--ease-out-ui);
}

@media (max-width: 52rem) {
	:root {
		--hero-dark-pad-bottom: 6rem;
	}
}

/* Typografische Anführungszeichen für <q> (Ersatz-HTML; Standard Engl., DE: html lang=de) */
q {
	quotes: "“" "”" "‘" "’";
}
:lang(de) q {
	quotes: "„" "“" "‚" "‘";
}
/*
 * Engl. Fließtext (Cases, About, …): Besitz- und Auslassungs-Apostroph immer als
 * U+2019 (’) setzen, nicht U+0027 (ASCII). Dasselbe in Kirby-Textfeldern/Panel.
 */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}