/**
 * 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.
 *
 * Stand 28.09.2026: Entwürfe /x /y /z 1:1 (Kundenwunsch). Jeder Wert, der sich dafür geändert hat,
 * trägt den alten Wert als Kommentar „vorher: …“ – ein Rückweg ist eine Zeile hier.
 * Übersicht: docs/abweichungen-entwurf.md.
 */

: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;
	--zel-dunkelgrau: #595959; /* gedämpfter Text auf Weiß und Papier (7 : 1), z. B. Mein Konto – nur Oberfläche, nicht in theme.json */

	/* Textfarben auf Beige wie im Entwurf (auf hellen Seiten dunkel, siehe .zel-page-light unten).
	   Weiß auf Beige hat nur 1,91 : 1 – ob es so bleibt, entscheidet Thomas (Vorher-nachher:
	   docs/kontrast-vergleich.md). Umstellen ist je eine Zeile hier. */
	--zel-heading-color: var(--zel-weiss); /* Überschriften h1–h6 (base.css), Rezepttitel „Passt dazu“ (shop.css) */
	--zel-lead-color: var(--zel-weiss); /* Unterzeile „» …“ – vorher: var(--zel-schwarz) */
	--zel-eyebrow-color: var(--zel-weiss); /* Kartenzeile über Titeln – vorher: var(--zel-anthrazit) */
	--zel-nav-color: var(--zel-weiss); /* Hauptmenü und Kopf-Symbole (layout.css .zel-site-header); helle Seiten: schwarz */
	/* Formulare auf Beige: Anfrageformular, Bienenpost, Suchfeld (die Beschriftung im Feld von Bienenpost und Suche
	   bleibt fest 85 % Weiß – --zel-newsletter-label/--zel-suche-label bei einem Wechsel mit umstellen). Auf hellen
	   Seiten setzen Anfrageformular und Suche Schwarz selbst; die Bienenpost der Danke-Seite steht auf Beige. */
	--zel-form-color: var(--zel-weiss);
	--zel-footer-text: rgba(255, 255, 254, 0.8); /* Fußbereich 80 % Weiß – vorher: var(--zel-weiss) */

	/* 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;

	/* Schriftschnitte: Barlow Condensed 600 hat die Strichstärke von Trade Gothic Next Condensed Bold
	   (Stamm/Versalhöhe 0,168 zu 0,163; Barlow 700: 0,203). Mit dem Adobe-Kit wählt der Browser für 600
	   den Schnitt 700 (Trade Gothic hat nur 400/700). */
	--zel-fw-heading: 600; /* Überschriften, runde und eckige Buttons, aktiver Menüpunkt – vorher: 700 */
	--zel-fw-lead: 700; /* Unterzeile Roboto Bold Italic – vorher: 500 */
	--zel-ls-heading: normal; /* Laufweite Überschriften und Buttons – vorher: 0.01em */
	/* Kartentitel und Kartenzeilen aller Karten (Produkte, Projekte, Rezepte, Presse, Angebote, Shop-Raster,
	   Referenzen). Gemessen 28.09. abends bei 20 px: mit der Glättung des Entwurfs (unten) hat Barlow 600 die
	   Strichstärke von Trade Gothic Bold (Stamm/Versalhöhe 0,169 zu 0,168); 700 wäre 20 % fetter. */
	--zel-fw-card: 600; /* vorher: --zel-fw-heading (auch 600, aber ohne eigene Stellschraube) */
	/* Schriftglättung wie im Entwurf (Standard des Browsers). „antialiased“ zeichnet am Mac alle Schriften rund
	   10 % dünner (Roboto 19 px: Stamm 1,79 statt 1,98 px) – darum wirkten Fließtext und Kartentitel dünner
	   als im Entwurf. Nur macOS wertet das aus. */
	--zel-font-smoothing: auto; /* vorher: antialiased */
	--zel-font-smoothing-moz: auto; /* Firefox am Mac – vorher: grayscale */

	/* Größen (Entwurf: feste Stufen statt fließender Werte) */
	/* H1 am Handy auf allen Seitentypen gleich (Paket 20, Nr. 17): 40 px wie die Bühne im Entwurf, unter 381 px
	   10,5vw (320 px: 33,6 px), damit „BIENENPATENSCHAFT“ in eine Zeile passt. Seitenköpfe mit eigener Größe
	   (Projekt/Rezept, Shop, Produkt, Warenkorb, 404) nehmen es als Untergrenze: clamp(var(--zel-fs-h1-mobil), …). */
	--zel-fs-h1-mobil: min(2.5rem, 10.5vw);
	--zel-fs-h1: var(--zel-fs-h1-mobil); /* Seitenkopf normaler Seiten, ab 576 px unten (Bühne: blocks/einstieg) – vorher auch am Handy clamp(2.125rem, 10.5vw, 6rem): 34 px bei 320, 40,95 px bei 390 */
	--zel-fs-h2: 2.5rem; /* 40 px, ab 768 px 55 px – vorher: clamp(2.5rem, 4.4vw, 3.4375rem) */
	--zel-fs-h3: 1.875rem; /* 30 px, ab 768 px 35 px – vorher: clamp(1.875rem, 3vw, 2.1875rem) */
	--zel-fs-h4: 1.25rem;
	--zel-fs-lead: 1.875rem; /* 30 px auch am Handy – vorher: clamp(1.25rem, 2vw, 1.9375rem) */
	--zel-lh-lead: 1.3; /* vorher: 1.45 */
	--zel-fs-body: 1rem;
	/* Fließtext überall wie im Entwurf und im Abschnitt „Thomas Zelenka“ (Kundenwunsch 28.09. abends:
	   „Ist der Text einheitlich?“): Roboto 400, 19 px, Zeile 1,5. Gilt für Module, Editor-Inhalte, Rechtstexte,
	   Übersichten, Shop-Beschreibungen. Ausnahmen (Kleingedrucktes, Pflichtangaben, Formularhinweise):
	   docs/abweichungen-entwurf.md, Abschnitt „Einheitlichkeit“. */
	--zel-fs-text: 1.1875rem; /* vorher: 1.125rem (18 px) auf Bestandsseiten, 19 px nur auf /x /y /z */
	--zel-lh-text: 1.5; /* vorher: 1.75 auf Bestandsseiten */
	--zel-fs-text-mobil: 1.0625rem; /* 17 px: Fließtext am Handy (unter 576 px wird --zel-fs-text dazu, s. unten) */
	--zel-fs-small: 0.875rem;
	--zel-fs-menu: 1.375rem;
	--zel-fs-eyebrow: 1.25rem;

	/* Raster (Seitenrand wie im Entwurf: 25 / 35 / 50 / 70 px) */
	--zel-container: 120rem;
	--zel-wide: 81.25rem;
	--zel-narrow: 60rem;
	--zel-gutter: 1.5625rem; /* vorher: 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; /* 130 px auf allen Breiten – vorher: am Handy 6.875rem */
	--zel-bubble-card: 6.25rem; /* Runder Button auf Karten unter 992 px (Entwurf: 130 px × 0,77), in Kartenrastern am Handy --zel-card-button-mobil */
	/* Kartenraster am Handy (Runde „mobil“, 29.09.: „am Handy ist in den Kartenrastern alles zu groß“): mindestens
	   zwei Spalten wie das Shop-Raster, für alle Raster gleich – Shop, Suche, „Passt dazu“ (shop.css .zel-products,
	   bis 767 px) und Übersichten Projekte/Rezepte/Presse, „Weitere …“ (components.css .zel-cards ohne
	   data-zel-scroll, unter 576 px). Nur Raster – Wisch-Reihen und Karussells behalten ihre Werte.
	   Vorher dort eine Spalte, Abstand 105 / 20 px, Bild 10 : 11, runder Button 100 px mit Beschriftung. */
	--zel-cards-gap-mobil: 2.5rem 0.875rem; /* Zeile 40 px, Spalte 14 px (Werte des Shop-Rasters) */
	--zel-card-ratio-raster: 1 / 1; /* Bild im Shop-Raster (alle Breiten) und in allen Kartenrastern am Handy */
	--zel-card-button-mobil: 2.75rem; /* Runder Button der Karten in Rastern am Handy: 44 px, nur das Symbol */
	--zel-card-button-inset-mobil: 0.5rem; /* … im Bild unten rechts, 8 px vom Rand */
	/* Karten: Bild → erste Zeile (Kartenzeile oder, wenn es keine gibt, Titel) 20 px wie im Entwurf – für alle
	   Karten gleich. Vorher: Standard 24 px, Produkt-Karussell 20 px + leere Zeile (43 px bis zum Namen),
	   Übersichten Projekte/Rezepte/Presse 15 px, Shop-Raster 16 px, Referenzen 18 px. */
	--zel-card-gap: 1.25rem;
	--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;
}

/* Handy (unter 576 px): Überschriften und Fließtext rund 10 % kleiner (Vincent 30.09.: „am Handy etwas kleiner,
   einheitlich“) – Fließtext wie die Produktbeschreibung 17 px. Tablet und Desktop unverändert.
   Vorher am Handy: h1 min(40 px, 10,5vw), h2 40, h3 30, h4 20, Einleitung 30, Kartenzeile 20, Fließtext 19 px. */
@media (max-width: 575.98px) {
	:root {
		--zel-fs-h1-mobil: min(2.25rem, 9.45vw);
		--zel-fs-h2: 2.25rem;
		--zel-fs-h3: 1.6875rem;
		--zel-fs-h4: 1.125rem;
		--zel-fs-lead: 1.6875rem;
		--zel-fs-eyebrow: 1.125rem;
		--zel-fs-text: var(--zel-fs-text-mobil);
	}
}

@media (min-width: 576px) {
	:root {
		--zel-fs-h1: clamp(2.125rem, 10.5vw, 6rem);
	}
}

@media (min-width: 768px) {
	:root {
		--zel-fs-h2: 3.4375rem;
		--zel-fs-h3: 2.1875rem;
		--zel-gutter: 2.1875rem;
	}
}

@media (min-width: 992px) {
	:root {
		--zel-gutter: 3.125rem;
		--zel-bubble-card: var(--zel-bubble);
	}
}

@media (min-width: 1200px) {
	:root {
		--zel-gutter: 4.375rem;
	}
}

/* Bis 28.09. abends galt 19 px / 1,5 nur auf den drei neuen Seiten (Regel
   „body:has(.wp-block-zelenka-zeitreise, .wp-block-zelenka-angebots-karten)“), sonst 18 px / 1,75 – seitdem
   überall 19 px / 1,5 (oben). Rückweg für die Bestandsseiten: oben 1.125rem / 1.75 eintragen und die Regel
   mit 1.1875rem / 1.5 für diese Seiten wieder einsetzen. */

/* Helle Seiten (Shop, Kasse, Danke-Seite, Konto, Rechtstexte): Unterzeilen und Kartenzeilen dunkel */
.zel-page-light {
	--zel-lead-color: var(--zel-schwarz);
	--zel-eyebrow-color: var(--zel-anthrazit);
}

/* Karten (Angebote, Produkte, Projekte): runder Button unter 992 px 100 px statt 130 px wie im Entwurf.
   Nur die Größe – Aussehen der Karten: components.css (.zel-card*). */
.zel-card {
	--zel-bubble: var(--zel-bubble-card);
}