/**
 * Raster, Kopf- und Fußbereich, Inhaltsbereich.
 */

/* ------------------------------------------------------------------ */
/* Container und Abschnitte                                           */
/* ------------------------------------------------------------------ */

.zel-container {
	width: 100%;
	max-width: var(--zel-container);
	margin-inline: auto;
	padding-inline: var(--zel-gutter);
}

.zel-container--wide {
	max-width: calc(var(--zel-wide) + 2 * var(--zel-gutter));
}

.zel-container--narrow {
	max-width: calc(var(--zel-narrow) + 2 * var(--zel-gutter));
}

.zel-section {
	margin-block: var(--zel-section);
}

.zel-main {
	display: block;
	min-height: 40vh;
	padding-bottom: var(--zel-section);
}

.zel-main:focus {
	outline: none;
}

/* ------------------------------------------------------------------ */
/* Hinweisleiste über der Kopfzeile                                   */
/* ------------------------------------------------------------------ */

.zel-notice-bar {
	background: var(--zel-anthrazit);
	color: var(--zel-weiss);
	font-size: var(--zel-fs-small);
	text-align: center;
}

.zel-notice-bar__inner {
	padding: 0.625rem var(--zel-gutter);
}

/* Mit Motiv: Zeichen fest links und rechts auf Höhe der ersten Zeile, nur der Text bricht um */
.zel-notice-bar__inner:has(> .zel-motiv-zeichen) {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.zel-notice-bar__text {
	min-width: 0;
}

.zel-notice-bar a {
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* Kopfzeile                                                          */
/* ------------------------------------------------------------------ */

/* Menü und Kopf-Symbole (Konto, Warenkorb, Menüknopf – color: inherit) in --zel-nav-color (tokens.css) */
.zel-site-header {
	position: relative;
	z-index: 50;
	color: var(--zel-nav-color, var(--zel-weiss));
}

.zel-page-light .zel-site-header {
	color: var(--zel-schwarz);
}

.zel-site-header__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding-top: clamp(1.5rem, 3.5vw, 3.125rem);
	padding-bottom: 1rem;
}

.zel-logo {
	position: relative;
	z-index: 60;
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.zel-logo img {
	width: auto;
	height: clamp(5.5rem, 11vw, 10rem);
}

.zel-logo__dark {
	display: none;
}

.zel-page-light .zel-logo__light {
	display: none;
}

.zel-page-light .zel-logo__dark {
	display: block;
}

.zel-site-header__right {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 3.125rem);
}

/* Hauptmenü (Desktop): Abstand 25 px, ab 1200 px 50 px wie im Entwurf */
.zel-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.5625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.zel-nav__list {
		gap: 0 3.125rem;
	}
}

.zel-nav__list > li {
	position: relative;
}

/* Menüpunkt wie im Entwurf: 22 px, Zeile 25 px, 5 px über dem Text, Punktlinie 4 px darunter.
   Die Klickfläche ist trotzdem 44 px hoch (oben mehr Innenabstand, per negativem Rand ausgeglichen). */
.zel-nav a,
.zel-nav__toggle {
	display: inline-block;
	margin-top: -0.5625rem;
	padding: 0.875rem 0 0.0625rem;
	border: 0;
	border-bottom: var(--zel-dot) solid transparent;
	background: none;
	color: inherit;
	font-family: var(--zel-font-display);
	font-size: var(--zel-fs-menu);
	font-weight: 500;
	line-height: 1.5625rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.zel-nav a:hover,
.zel-nav__toggle:hover,
.zel-nav .current-menu-item > a,
.zel-nav .current-menu-ancestor > a,
.zel-nav .current-menu-ancestor > .zel-nav__toggle,
.zel-nav .current_page_item > a {
	border-bottom-style: dotted;
	border-bottom-color: currentColor;
}

/* Aktuelle Seite fett wie im Entwurf */
.zel-nav .current-menu-item > a,
.zel-nav .current_page_item > a {
	font-weight: var(--zel-fw-heading);
}

.zel-nav__toggle .zel-icon {
	width: 1rem;
	height: 1rem;
	margin-left: 0.25rem;
	vertical-align: 0.05em;
	transition: transform 0.2s ease;
}

.zel-nav__toggle[aria-expanded="true"] .zel-icon {
	transform: rotate(180deg);
}

/* Untermenü als weißer Kasten mit Spitze (wie im Entwurf „Entdecken“) */
.zel-nav .sub-menu {
	position: absolute;
	top: calc(100% + 1.25rem);
	left: 50%;
	z-index: 70;
	display: none;
	min-width: 13.5rem;
	margin: 0;
	padding: 1.75rem 2rem;
	list-style: none;
	background: #fff;
	box-shadow: var(--zel-shadow);
	text-align: center;
	transform: translateX(-50%);
}

.zel-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -0.45rem;
	left: calc(50% - 0.5rem);
	width: 1rem;
	height: 1rem;
	background: #fff;
	transform: rotate(45deg);
}

.zel-nav .is-open > .sub-menu {
	display: block;
}

.zel-nav .sub-menu a {
	color: var(--zel-schwarz);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

.zel-nav .sub-menu li + li {
	margin-top: 0.25rem;
}

/* Symbole Konto / Warenkorb */
.zel-header-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zel-header-icons a,
.zel-header-icons button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.zel-header-icons .zel-icon {
	width: 1.625rem;
	height: 1.625rem;
}

.zel-cart-count {
	position: absolute;
	top: 0.125rem;
	right: -0.125rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: 0.625rem;
	background: var(--zel-schwarz);
	color: var(--zel-weiss);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}

.zel-cart-count[data-count="0"] {
	display: none;
}

.zel-page-light .zel-cart-count {
	background: var(--zel-braun);
}

/* Burger (mobil) */
.zel-menu-button {
	display: none;
	position: relative;
	z-index: 60;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.zel-menu-button .zel-icon {
	width: 2rem;
	height: 2rem;
}

.zel-menu-button .zel-icon--schliessen {
	display: none;
}

/* Runder Menü-Knopf oben rechts, sobald die Kopfzeile weggescrollt ist (nav.js, nur im Handy-Aufbau): weiß mit
   schwarzem Symbol, Größe, Schatten und Einblendung wie der Warenkorb-Knopf unten rechts (cart-drawer.css).
   Ebenen: Warenkorb-Knopf 40, er 45, Kopfzeile 50, Abdunkelung des Cookie-Banners 51; bei offenem Menü über der
   Liste (60), dann schließt er sie. */
.zel-menu-fab {
	display: none;
}

@media (max-width: 991.98px) {
	.zel-menu-fab {
		position: fixed;
		top: max(1rem, env(safe-area-inset-top));
		right: max(1rem, env(safe-area-inset-right));
		z-index: 45;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.75rem;
		height: 3.75rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--zel-weiss, #fffffe);
		color: var(--zel-schwarz, #000);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0.375rem 1rem rgba(0, 0, 0, 0.22);
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-1rem) scale(0.9);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.zel-menu-fab[hidden] {
		display: none;
	}

	.zel-menu-fab.is-visible,
	.zel-menu-open--fab .zel-menu-fab {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	.zel-menu-fab.is-visible:hover {
		transform: scale(1.03);
	}

	.zel-menu-fab:focus-visible {
		outline: var(--zel-focus, 3px solid #000);
		outline-offset: 3px;
		box-shadow: 0 0 0 3px var(--zel-weiss, #fffffe), 0 0.375rem 1rem rgba(0, 0, 0, 0.22);
	}

	.zel-menu-fab .zel-icon {
		width: 1.625rem;
		height: 1.625rem;
	}

	.zel-menu-fab .zel-icon--schliessen,
	.zel-menu-open--fab .zel-menu-fab .zel-icon--menue {
		display: none;
	}

	.zel-menu-open--fab .zel-menu-fab .zel-icon--schliessen {
		display: inline;
	}

	/* Vom Kopf geöffnet: der runde Knopf tritt zurück (der Kopf hat seinen eigenen Schließen-Knopf) */
	.zel-menu-open:not(.zel-menu-open--fab) .zel-menu-fab {
		visibility: hidden;
		opacity: 0;
	}

	/* Offen: nur das weiße X auf dem dunklen Menü, ohne weißen Kreis (Vincent 01.10.) */
	.zel-menu-open--fab .zel-menu-fab {
		z-index: 60;
		background: transparent;
		box-shadow: none;
		color: var(--zel-weiss, #fffffe);
	}

	.zel-menu-open--fab .zel-menu-fab:focus-visible {
		box-shadow: none;
	}

	/* Vom runden Knopf geöffnet: Die Kopfzeile ist weggescrollt – nav.js legt eine Kopie des Logos an seine Stelle
	   oben links (wie beim Öffnen ganz oben), die Liste beginnt darunter (nav.js setzt top).
	   Vorher: ohne Logo, Liste ab oben unter dem Knopf. */
	.zel-menu-logo {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 60;
		padding-top: clamp(1.5rem, 3.5vw, 3.125rem);
		color: var(--zel-weiss);
		pointer-events: none;
	}

	body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-menu-logo {
		padding-top: 2.5rem;
	}

	/* Das Logo selbst ist klickbar wie oben (zur Startseite) – nur die übrige Fläche lässt Klicks durch */
	.zel-menu-logo .zel-logo {
		display: inline-block;
		pointer-events: auto;
	}

	.zel-menu-logo .zel-logo__light {
		display: block;
	}

	.zel-menu-logo .zel-logo__dark {
		display: none;
	}

	/* Konto und Warenkorb oben rechts wie in der Kopfzeile, links neben dem runden Knopf (mittig zu ihm) */
	.zel-menu-logo .zel-menu-logo__icons {
		position: fixed;
		pointer-events: auto; /* die Logo-Kopie selbst lässt Klicks durch (pointer-events: none) */
		top: calc(max(1rem, env(safe-area-inset-top)) + 0.5rem);
		right: calc(max(1rem, env(safe-area-inset-right)) + 4.25rem);
		color: var(--zel-weiss);
	}
}

@media print {
	.zel-menu-fab {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zel-menu-fab,
	.zel-menu-fab.is-visible,
	.zel-menu-open--fab .zel-menu-fab {
		transform: none;
		transition: none;
	}
}

@media (max-width: 991.98px) {
	.zel-menu-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Offenes Menü: Die Liste scrollt erst unterhalb des Logos (--zel-nav-top = Rand oben + Logohöhe wie bei
	   .zel-site-header__inner und .zel-logo img), so läuft sie nie unter Logo, Symbolen und Schließen-Knopf durch
	   (Paket 20, Nr. 7). Den Schleier über dem Kopf zeichnet der Schatten, Logo und Knopf liegen darüber (60).
	   Vorher: inset 0, padding-top Logohöhe + 3rem. */
	.zel-nav {
		--zel-nav-top: calc(clamp(1.5rem, 3.5vw, 3.125rem) + clamp(5.5rem, 11vw, 10rem));
		position: fixed;
		inset: var(--zel-nav-top) 0 0;
		z-index: 55;
		display: none;
		overflow-y: auto;
		padding: 1.5rem var(--zel-gutter) 3rem;
		background: rgba(0, 0, 0, 0.85);
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85);
		color: var(--zel-weiss);
	}

	/* Mit Ankerpositionierung (Chrome, Safari 26) genau an der Unterkante des Logos – auch wenn die Hinweisleiste
	   das Logo nach unten schiebt oder das Logo der Bühne auf schmalen Handys kleiner ist. Sonst --zel-nav-top. */
	@supports (top: anchor(--zel-logo bottom)) {
		.zel-site-header .zel-logo {
			anchor-name: --zel-logo;
		}

		.zel-nav {
			top: anchor(--zel-logo bottom, var(--zel-nav-top));
		}
	}

	.zel-menu-open .zel-nav {
		display: block;
	}

	.zel-menu-open .zel-site-header {
		color: var(--zel-weiss);
	}

	.zel-menu-open .zel-logo__light {
		display: block;
	}

	.zel-menu-open .zel-logo__dark {
		display: none;
	}

	.zel-menu-open .zel-menu-button .zel-icon--menue {
		display: none;
	}

	.zel-menu-open .zel-menu-button .zel-icon--schliessen {
		display: inline;
	}

	/* Offenes Menü: Die Seite darunter scrollt nicht mit – sonst wanderte die Kopfzeile unter der festen Liste weg
	   (Vincent 01.10.). Am html, weil Safari am Handy overflow am body allein nicht beachtet. */
	html:has(body.zel-menu-open),
	.zel-menu-open {
		overflow: hidden;
	}

	.zel-nav {
		overscroll-behavior: contain;
	}

	/* Konto und Warenkorb über dem Schleier wie Logo und Knopf (60) – vorher lagen sie darunter und verschwanden */
	.zel-menu-open .zel-site-header .zel-header-icons {
		position: relative;
		z-index: 60;
	}

	/* Im offenen Menü: Anzahl im Warenkorb weiß mit schwarzer Zahl (auf dunklem Grund) */
	body.zel-menu-open .zel-cart-count {
		background: var(--zel-weiss);
		color: var(--zel-schwarz);
	}

	.zel-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	/* Jeder Menüpunkt über die ganze Breite, Text mittig: Klappt „Entdecken“ auf, bleibt der Punkt gleich breit und
	   das Wort steht still, nur der Pfeil dreht sich. Vorher wuchs der Punkt mit dem breiteren Untermenü (143 → 172 px)
	   und das Wort, links im Punkt, rückte um 14 px nach links. */
	.zel-nav__list > li {
		align-self: stretch;
		text-align: center;
	}

	/* Entwurf: 27 px (ab 768 px 30 px), Zeile 1,3. Punktlinie knapp unter dem Text (2 px statt 10 px Abstand,
	   Vincent 01.10.); die Tippfläche bleibt gleich hoch, der Innenabstand liegt jetzt oben. */
	.zel-nav a,
	.zel-nav__toggle {
		margin-top: 0;
		padding: 1.125rem 0 0.125rem;
		font-size: 1.6875rem;
		line-height: 1.3;
	}

	/* Untermenü („Entdecken“) in zwei Spalten, zeilenweise wie Text gelesen (links, rechts, nächste Zeile – so läuft
	   auch die Tab-Reihenfolge); die Punkte einer Zeile stehen auf gleicher Höhe, auch wenn einer umbricht. Immer
	   zwei Spalten, auch ein einzelner letzter Punkt bleibt in der linken (Vincent 01.10.; vorher mittig über beide).
	   Lange Einträge brechen um (Silbentrennung, notfalls im Wort), nichts wird abgeschnitten. Vorher eine Spalte,
	   bei fünf Punkten 319 px hoch. */
	/* Ohne weiße Karte: Das Untermenü steht auf dem dunklen Grund des Menüs wie die übrigen Punkte, Schrift und
	   Punktlinie weiß (currentColor). Vorher weiße Fläche mit Schatten, Schrift schwarz (wie am Desktop). */
	.zel-nav .sub-menu {
		position: static;
		width: min(100%, 26rem);
		min-width: 0;
		margin: 0 auto; /* näher an „Entdecken“ und an „Shop“ darunter (Vincent 30.09.); vorher 0.5rem auto 0 */
		padding: 0.125rem 1rem 0.25rem; /* vorher 0.75rem 1rem */
		background: none;
		box-shadow: none;
		transform: none;
	}

	.zel-nav .is-open > .sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 0 1rem;
	}

	.zel-nav .sub-menu li + li {
		margin-top: 0;
	}

	.zel-nav .sub-menu::before {
		display: none;
	}

	/* Tippfläche mindestens 44 px hoch: einzeilig 16 + 26,4 + 4 px (Punktlinie); vorher 0.625rem (50 px).
	   Punktlinie knapp unter dem Text, der Innenabstand liegt oben. */
	.zel-nav .sub-menu a {
		max-width: 100%;
		padding: 0.875rem 0 0.125rem;
		color: inherit;
		font-size: 1.375rem;
		line-height: 1.2;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.zel-nav a,
	.zel-nav__toggle {
		padding: 0.875rem 0 0.125rem;
		font-size: 1.875rem;
	}
}

/* Seiten mit Bühne (Modul „Einstieg“ ganz oben) wie im Entwurf: Die Kopfzeile ist nur so hoch wie das
   Menü (25 px + 40 bzw. 50 px Rand oben und unten), das Logo (160 px, auch am Handy) ragt über die Bühne.
   Ohne :has() (alte Browser) bleibt die normale Kopfzeile. */
body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-site-header__inner {
	--zel-header-pad: 2.5rem;
	box-sizing: border-box;
	height: calc(1.5625rem + 2 * var(--zel-header-pad));
	padding-top: var(--zel-header-pad);
	padding-bottom: var(--zel-header-pad);
}

/* Logo 149 × 160 px; auf sehr schmalen Handys (unter ~390 px) schrumpft es, damit Konto, Warenkorb und
   Menüknopf daneben Platz haben. */
body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-logo {
	flex: 0 1 auto;
	min-width: 0;
}

body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-logo img {
	width: 9.3125rem;
	max-width: 100%;
	height: auto;
}

@media (max-width: 575.98px) {
	body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-site-header__inner {
		gap: 1rem;
	}
}

body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-site-header__right {
	margin-top: -0.625rem;
}

@media (min-width: 992px) {
	body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-site-header__inner {
		--zel-header-pad: 3.125rem;
	}

	body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-site-header__right {
		margin-top: -0.5625rem;
	}
}

/* Offenes Menü unter dem Logo der Bühne: 40 px Rand + höchstens 160 px Logo (schmaler schrumpft es). Vorher:
   padding-top 17rem ab dem oberen Rand – bei 320 × 568 war das Untermenü nur durch Scrollen erreichbar. */
@media (max-width: 991.98px) {
	body:has(.zel-content > .wp-block-zelenka-einstieg:first-child) .zel-nav {
		--zel-nav-top: 12.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Seitenkopf normaler Seiten                                         */
/* ------------------------------------------------------------------ */

.zel-page-head {
	padding-top: clamp(1rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 4vw, 3.5rem);
}

.zel-page-head__title {
	margin-bottom: 1rem;
}

.zel-breadcrumbs {
	margin-bottom: 1.5rem;
	color: #6b6b6b;
	font-family: var(--zel-font-display);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.zel-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.zel-breadcrumbs a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Inhalt aus dem Editor                                              */
/* ------------------------------------------------------------------ */

.zel-content > * {
	max-width: var(--zel-narrow);
	margin-left: auto;
	margin-right: auto;
}

.zel-content > .alignwide {
	max-width: var(--zel-wide);
}

.zel-content > .alignfull,
.zel-content > [class*="wp-block-zelenka-"] {
	max-width: none;
}

/* Fließtext aus dem Editor (Rechtstexte, Rezepte, Kontakt …) wie in den Modulen: Tokens --zel-fs-text/
   --zel-lh-text (19 px / 1,5 – vorher 17 px / 1,75). Auch die Textzeile der 404-Seite. */
.zel-content > p,
.zel-content > ul,
.zel-content > ol,
.zel-404 > p:not([class]) {
	font-size: var(--zel-fs-text);
	line-height: var(--zel-lh-text);
}

.zel-content > h2,
.zel-content > h3 {
	margin-top: 3rem;
}

/* Lange Wörter und Adressen im Fließtext (z. B. „http://ec.europa.eu/consumers/odr/“ im Impressum) brechen am Handy
   um, statt die Seite seitlich scrollen zu lassen (Runde 3, Paket 10.1). „break-word“ lässt die Mindestbreite von
   Tabellen unverändert; Links dürfen an jeder Stelle umbrechen. */
.zel-content {
	overflow-wrap: break-word;
}

.zel-content a {
	overflow-wrap: anywhere;
}

.zel-content .wp-block-image img {
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Fußbereich                                                         */
/* ------------------------------------------------------------------ */

/* Wie im Entwurf: Text 14 px in 80 % Weiß, Überschriften 21 px weiß. Handy eine Spalte mittig,
   Tablet zwei Spalten mittig, ab 992 px eine Zeile linksbündig (Logo, Kontakt, Infos, Shop, Symbole).
   Darunter die Pflichtzeile (Widerruf, Gewährleistung, Cookies) – die gibt es im Entwurf nicht. */
.zel-site-footer {
	--zel-footer-pad: 1.5625rem;
	--zel-footer-space: 1.875rem;
	background: var(--zel-anthrazit);
	color: var(--zel-footer-text);
	font-size: var(--zel-fs-small);
	line-height: 1.5;
	text-align: center;
}

.zel-site-footer a {
	color: inherit;
	text-decoration: none;
}

.zel-site-footer a:hover {
	color: var(--zel-weiss);
	text-decoration: underline;
}

.zel-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-top: var(--zel-footer-pad);
	padding-bottom: var(--zel-footer-pad);
}

.zel-site-footer__inner > * {
	flex: 0 0 100%;
	min-width: 0;
	margin-bottom: var(--zel-footer-space);
}

.zel-site-footer__logo {
	line-height: 0;
}

.zel-site-footer__logo img {
	display: inline-block;
	width: 7.5rem;
	height: auto;
	opacity: 0.8;
}

.zel-site-footer__title {
	margin: 0 0 0.625rem;
	color: var(--zel-weiss);
	font-size: 1.3125rem;
}

/* Auch auf hellen Seiten weiß: „.zel-page-light h2“ (base.css) wäre sonst stärker – anthrazit auf anthrazit */
.zel-site-footer .zel-site-footer__title {
	color: var(--zel-weiss);
}

.zel-site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zel-site-footer p {
	margin: 0;
}

.zel-site-footer address {
	font-style: normal;
}

.zel-site-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
}

.zel-site-footer__social a {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
}

.zel-site-footer__social a:hover {
	opacity: 1;
}

.zel-site-footer__social .zel-icon {
	width: 2.25rem;
	height: 2.25rem;
}

.zel-site-footer__bio img {
	width: auto;
	height: 2.5rem;
	filter: invert(1); /* Siegel schwarz auf durchsichtig – im dunklen Fuß weiß */
}

.zel-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 254, 0.25);
}

/* Widerrufsbutton: hervorgehoben, wie vom Gesetz verlangt */
.zel-withdraw-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--zel-weiss);
	color: var(--zel-weiss);
	font-weight: 700;
}

@media (min-width: 768px) {
	.zel-site-footer {
		--zel-footer-pad: 2.1875rem;
		--zel-footer-space: 3.125rem;
	}

	.zel-site-footer__inner > * {
		flex-basis: 50%;
	}

	.zel-site-footer__social,
	.zel-site-footer__legal {
		flex-basis: 100%;
	}

	.zel-site-footer__title {
		margin-bottom: 1.25rem;
	}
}

@media (min-width: 992px) {
	.zel-site-footer {
		--zel-footer-pad: 3.125rem;
		--zel-footer-gap: 3.125rem;
		text-align: left;
	}

	.zel-site-footer__inner {
		flex-wrap: wrap;
	}

	.zel-site-footer__inner > * {
		flex: 0 0 auto;
		margin-bottom: 0;
	}

	.zel-site-footer__col:nth-child(2) {
		margin-left: var(--zel-footer-gap);
		margin-right: auto;
	}

	.zel-site-footer__col:nth-child(3) {
		margin-left: var(--zel-footer-gap);
		margin-right: var(--zel-footer-gap);
	}

	.zel-site-footer__col:nth-child(4) {
		margin-right: var(--zel-footer-gap);
	}

	.zel-site-footer__social {
		flex-basis: auto;
		align-self: flex-end;
		margin-top: 3.125rem;
	}

	.zel-site-footer__legal {
		flex: 0 0 100%;
		justify-content: flex-start;
		margin-top: var(--zel-footer-pad);
	}
}

@media (min-width: 1200px) {
	.zel-site-footer {
		--zel-footer-gap: 4.375rem;
	}
}

/* Klickflächen im Fußbereich mindestens 24 px hoch (WCAG 2.5.8) */
.zel-site-footer address a,
.zel-site-footer li a {
	display: inline-block;
	min-height: 1.5rem;
	padding-block: 0.09375rem;
}

/* ------------------------------------------------------------------ */
/* Fußbereich: Gruß zur Jahreszeit (Plugin: includes/extras/jahreszeit.php) */
/* ------------------------------------------------------------------ */

/* Ganz unten, leise: kleine Schrift in 80 % Weiß, Biene davor; Handy und Tablet mittig, ab 992 px linksbündig */
.zel-site-footer .zel-site-footer__gruss {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	color: var(--zel-footer-text);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4;
}

.zel-site-footer__gruss .zel-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	opacity: 0.8;
}

/* Zähler „Seitdem Sie hier auf unserer Website sind …“ (Einstellungen → Verspieltes, inc/ueberraschungen.php): unter dem Gruß, die
   Zahl in fester Ziffernbreite, damit der Satz beim Hochzählen nicht wackelt. */
.zel-site-footer .zel-site-footer__zaehler {
	flex: 0 0 100%;
	margin: 0.5rem 0 0;
	color: var(--zel-footer-text);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4;
	text-align: center;
}

.zel-site-footer__gruss + .zel-site-footer__zaehler {
	margin-top: 0.25rem;
}

.zel-site-footer__zaehler-zusatz {
	display: block;
	margin-top: 0.125rem;
	opacity: 0.8;
}

.zel-site-footer__zaehler strong {
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

/* Zählwerk: je Ziffer ein Rädchen (ueberraschungen.js), genau eine Ziffer hoch (1em, Zeilenhöhe 1em), die Walze
   rollt nach oben weiter. Ein Kasten mit overflow: hidden steht mit der Unterkante auf der Grundlinie – darum ein
   Stück tiefer gesetzt, damit die Ziffern auf der Linie des Satzes stehen. */
.zel-rad {
	display: inline-block;
	height: 1em;
	overflow: hidden;
	line-height: 1em;
	vertical-align: -0.15em;
}

.zel-rad__walze {
	display: block;
	width: 1ch;
	white-space: normal;
	word-spacing: 0;
	transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);
}

@media (min-width: 992px) {
	.zel-site-footer .zel-site-footer__gruss {
		justify-content: flex-start;
	}

	.zel-site-footer .zel-site-footer__zaehler {
		text-align: left;
	}
}