/**
 * Design-Tokens Zelenka 2026 (gespiegelt in theme.json). Nie Farbwerte direkt in Komponenten.
 * Wurzel 16 px. Die Schrift für Überschriften setzt inc/fonts.php über --zel-font-display-name.
 */

:root {
	/* Farben */
	--zel-beige: #c0bbb0;
	--zel-anthrazit: #404040;
	--zel-weiss: #fffffe;
	--zel-schwarz: #000;
	--zel-braun: #9c552b;
	--zel-sand: #b3aea3;
	--zel-papier: #f4f3f1;
	--zel-hellgrau: #d1d1d1;
	--zel-gruen: #297f68;
	--zel-rot: #9a0000;
	--zel-bio: #e8f1ed;

	/* Schriften */
	--zel-font-display: var(--zel-font-display-name, "Barlow Condensed"), "Barlow Condensed", "Arial Narrow", sans-serif;
	--zel-font-text: "Roboto", Arial, Helvetica, sans-serif;

	/* Größen */
	--zel-fs-h1: clamp(2.125rem, 10.5vw, 6rem);
	--zel-fs-h2: clamp(2.5rem, 4.4vw, 3.4375rem);
	--zel-fs-h3: clamp(1.875rem, 3vw, 2.1875rem);
	--zel-fs-h4: 1.25rem;
	--zel-fs-lead: clamp(1.25rem, 2vw, 1.9375rem);
	--zel-fs-body: 1rem;
	--zel-fs-text: 1.125rem; /* Fließtext in Modulen (Entwurf 18 px) */
	--zel-fs-small: 0.875rem;
	--zel-fs-menu: 1.375rem;
	--zel-fs-eyebrow: 1.25rem;

	/* Raster */
	--zel-container: 120rem;
	--zel-wide: 81.25rem;
	--zel-narrow: 60rem;
	--zel-gutter: clamp(1.5rem, 4.9vw, 4.375rem);
	--zel-section: clamp(4rem, 9vw, 9rem);
	--zel-gap: clamp(1.25rem, 3.5vw, 3.125rem);

	/* Bauteile */
	--zel-dot: 0.25rem;
	--zel-bubble: 8.125rem;
	--zel-radius: 0;
	--zel-focus: 3px solid var(--zel-schwarz);
	--zel-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
	--zel-header-height: 6.5rem;
}

@media (max-width: 767.98px) {
	:root {
		--zel-bubble: 6.875rem;
	}
}