/**
 * Wiederkehrende Bauteile (Markup aus zelenka-core/includes/ui.php).
 * Module bauen darauf auf und bringen ihr eigenes CSS mit (blocks/<slug>/style.css).
 */

/* Gepunktete Linie unter Überschriften */
.zel-dotted {
	display: inline-block;
	padding-bottom: 0.625rem;
	border-bottom: var(--zel-dot) dotted currentColor;
}

.zel-heading {
	margin-bottom: 1.5rem;
}

.zel-heading--h1 {
	font-size: var(--zel-fs-h1);
}

.zel-heading--h2 {
	font-size: var(--zel-fs-h2);
}

.zel-heading--h3 {
	font-size: var(--zel-fs-h3);
}

/* Unterzeile „» …“ – Entwurf: Roboto Bold Italic, 30 px, weiß (auf hellen Flächen dunkel, tokens.css) */
.zel-lead {
	margin: 0 0 1.75rem;
	color: var(--zel-lead-color);
	font-family: var(--zel-font-text);
	font-size: var(--zel-fs-lead);
	font-style: italic;
	font-weight: var(--zel-fw-lead);
	line-height: var(--zel-lh-lead);
}

.zel-lead::before {
	content: "» ";
}

.zel-lead a {
	color: inherit;
}

/* Runder schwarzer Button mit Symbol. Entwurf: 130 px, 20 px Schrift, 20 px Innenabstand, Symbol 25 px
   mit 10 px Abstand – alles wächst mit --zel-bubble (Karten unter 992 px: 100 px). */
.zel-bubble {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--zel-bubble) * 0.077);
	flex: 0 0 auto;
	width: var(--zel-bubble);
	height: var(--zel-bubble);
	padding: calc(var(--zel-bubble) * 0.154);
	border: 0;
	border-radius: 50%;
	background: var(--zel-schwarz);
	color: var(--zel-weiss);
	font-family: var(--zel-font-display);
	font-size: calc(var(--zel-bubble) * 0.154);
	font-weight: var(--zel-fw-heading);
	line-height: 1.2;
	letter-spacing: var(--zel-ls-heading);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Schatten knapp um den Kreis (statt --zel-shadow, der gut 2,5 rem weit reicht): Module mit overflow: hidden
   schnitten ihn sonst ab (Kundenwunsch 30.09.). */
.zel-bubble:hover {
	transform: scale(1.04);
	text-decoration: none;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.22);
}

.zel-bubble:focus-visible {
	outline: 3px solid var(--zel-weiss);
	outline-offset: -8px;
	box-shadow: 0 0 0 3px var(--zel-schwarz);
}

.zel-bubble__icon {
	flex: 0 0 auto;
	width: calc(var(--zel-bubble) * 0.192);
	height: calc(var(--zel-bubble) * 0.192);
	stroke-width: 1.75;
}

/* Die Logo-Biene reicht mit den Flügeln genau bis an den Rand ihres Felds – nicht abschneiden */
.zel-icon--biene {
	overflow: visible;
}

/* Honigtropfen beim Überfahren: Er zieht sich in die Länge, löst sich, fällt beschleunigt nach unten und
   verschwindet hinter dem Rand des Buttons (während des Tropfens schneidet der Kreis ab) – dann wächst er an
   seinem Platz sanft wieder heran. Die Klasse setzt nav.js einmal je Überfahren und nimmt sie erst am Ende
   wieder weg – so läuft die Animation auch nach dem Verlassen zu Ende. Beim Nachladen („Mehr laden“) gilt
   zel-more-tropfen. Die anderen Symbole (Pfeil, Geschenk, Koffer, Brief, Biene, Warenkorb, Lupe, Kalender,
   Ort, Telefon, Dokument, Honigglas, Bienenstock, Urkunde) haben je eine eigene kleine Animation (unten). */
.zel-bubble.is-dripping:not(.is-loading) {
	overflow: hidden;
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon--tropfen {
	transform-origin: 50% 10%; /* Spitze des Tropfens */
	animation: zel-bubble-tropfen 2.8s;
}

@keyframes zel-bubble-tropfen {
	0% {
		transform: translateY(0) scale(1);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	/* Der Tropfen wird schwer … */
	30% {
		transform: translateY(0) scale(0.9, 1.16);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	/* … löst sich und fällt immer schneller über den Rand hinaus (abgeschnitten, nicht ausgeblendet) … */
	54% {
		opacity: 1;
		transform: translateY(calc(var(--zel-bubble) * 0.62)) scale(0.8, 1.26);
		animation-timing-function: steps(1, end);
	}

	/* … springt unsichtbar zurück … */
	55%,
	60% {
		opacity: 0;
		transform: translateY(0) scale(0.2);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* … und wächst an seinem Platz sanft wieder heran. */
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Pfeil: holt kurz Schwung (zieht sich zurück), schießt nach rechts aus dem Kreis hinaus (abgeschnitten) und gleitet
   von links wieder an seinen Platz. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--pfeil {
	animation: zel-bubble-pfeil 2.4s;
}

@keyframes zel-bubble-pfeil {
	0% {
		transform: translateX(0) scaleX(1);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	22% {
		transform: translateX(-12%) scaleX(0.82);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	46% {
		transform: translateX(calc(var(--zel-bubble) * 0.62)) scaleX(1.25);
		animation-timing-function: steps(1, end);
	}

	47%,
	52% {
		transform: translateX(calc(var(--zel-bubble) * -0.62)) scaleX(1.1);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	100% {
		transform: translateX(0) scaleX(1);
	}
}

/* Geschenk: wackelt vor Vorfreude, dann springt der Deckel samt Schleife auf (links angeschlagen) und fällt mit
   kleinem Nachfedern wieder zu. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--geschenk {
	overflow: visible; /* der aufgeklappte Deckel ragt über das Symbol hinaus */
	transform-origin: 50% 92%;
	animation: zel-bubble-geschenk 2.6s ease-in-out;
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon--geschenk .zel-icon__deckel {
	transform-box: view-box;
	transform-origin: 2px 12px; /* linke untere Ecke des Deckels */
	animation: zel-bubble-geschenk-deckel 2.6s;
}

@keyframes zel-bubble-geschenk {
	0%,
	44%,
	100% {
		transform: rotate(0);
	}

	8% {
		transform: rotate(-9deg);
	}

	16% {
		transform: rotate(8deg);
	}

	24% {
		transform: rotate(-6deg);
	}

	32% {
		transform: rotate(4deg);
	}

	/* Beim Aufspringen hüpft die Schachtel kurz mit */
	52% {
		transform: translateY(-6%) scaleY(1.04);
	}

	62% {
		transform: translateY(2%) scaleY(0.94);
	}

	70% {
		transform: translateY(0) scaleY(1);
	}
}

@keyframes zel-bubble-geschenk-deckel {
	0%,
	44% {
		transform: translateY(0) rotate(0);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	56% {
		transform: translateY(-5px) rotate(-22deg);
		animation-timing-function: ease-in-out;
	}

	72% {
		transform: translateY(-4px) rotate(-18deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	82% {
		transform: translateY(0) rotate(0);
	}

	88% {
		transform: translateY(-1.2px) rotate(-3deg);
	}

	94%,
	100% {
		transform: translateY(0) rotate(0);
	}
}

/* Koffer: wird am Griff gemächlich ein Stück angehoben, pendelt sanft aus und wird mit einem kleinen Plumps wieder
   abgestellt. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--koffer {
	transform-origin: 50% 12%; /* Griff */
	animation: zel-bubble-koffer 3.4s;
}

@keyframes zel-bubble-koffer {
	0% {
		transform: translateY(0) rotate(0) scale(1);
		animation-timing-function: ease-in-out;
	}

	20% {
		transform: translateY(-9%) rotate(12deg);
		animation-timing-function: ease-in-out;
	}

	32% {
		transform: translateY(-9%) rotate(-10deg);
		animation-timing-function: ease-in-out;
	}

	44% {
		transform: translateY(-9%) rotate(7deg);
		animation-timing-function: ease-in-out;
	}

	55% {
		transform: translateY(-9%) rotate(-4deg);
		animation-timing-function: ease-in-out;
	}

	65% {
		transform: translateY(-9%) rotate(2deg);
		animation-timing-function: ease-in-out;
	}

	74% {
		transform: translateY(-9%) rotate(0);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	84% {
		transform: translateY(2%) rotate(0) scale(1.07, 0.9);
		animation-timing-function: ease-out;
	}

	92% {
		transform: translateY(0) rotate(0) scale(0.98, 1.03);
	}

	100% {
		transform: translateY(0) rotate(0) scale(1);
	}
}

/* Brief: wackelt erst ein paar Mal hin und her, holt dann Schwung, fliegt rechts aus dem Kreis hinaus und gleitet von
   links wieder an seinen Platz (wie der Pfeil). */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--mail {
	animation: zel-bubble-mail 3s;
}

@keyframes zel-bubble-mail {
	0% {
		transform: translateX(0) rotate(0);
		animation-timing-function: ease-in-out;
	}

	7% {
		transform: rotate(-10deg);
		animation-timing-function: ease-in-out;
	}

	14% {
		transform: rotate(9deg);
		animation-timing-function: ease-in-out;
	}

	21% {
		transform: rotate(-6deg);
		animation-timing-function: ease-in-out;
	}

	28% {
		transform: rotate(3deg);
		animation-timing-function: ease-in-out;
	}

	34% {
		transform: translateX(0) rotate(0);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	44% {
		transform: translateX(-14%) rotate(-8deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	60% {
		transform: translateX(calc(var(--zel-bubble) * 0.62)) rotate(6deg);
		animation-timing-function: steps(1, end);
	}

	61%,
	66% {
		transform: translateX(calc(var(--zel-bubble) * -0.62)) rotate(0);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	100% {
		transform: translateX(0) rotate(0);
	}
}

/* Biene: summt kurz auf der Stelle, hebt ab, fliegt eine kleine Runde (nur in Flugrichtung geneigt, ohne sich zu
   drehen) und landet wieder. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--biene {
	animation: zel-bubble-biene 3s ease-in-out;
}

@keyframes zel-bubble-biene {
	0%,
	100% {
		transform: translate(0, 0) rotate(0);
	}

	4% {
		transform: translate(-4%, 0) rotate(-6deg);
	}

	8% {
		transform: translate(4%, 0) rotate(6deg);
	}

	12% {
		transform: translate(-3%, 0) rotate(-4deg);
	}

	16% {
		transform: translate(0, 0) rotate(0);
	}

	30% {
		transform: translate(-55%, -25%) rotate(-25deg);
	}

	46% {
		transform: translate(0, -42%) rotate(8deg);
	}

	62% {
		transform: translate(55%, -20%) rotate(25deg);
	}

	76% {
		transform: translate(22%, 14%) rotate(-18deg);
	}

	88% {
		transform: translate(0, -6%) rotate(-6deg);
	}

	94% {
		transform: translate(0, 2%) rotate(0);
	}
}

/* Warenkorb: holt Schwung, rollt ein Stück vor, macht auf dem Hinterrad einen kleinen Wheelie und setzt wieder auf. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--warenkorb {
	transform-origin: 40% 88%; /* hinteres Rad */
	animation: zel-bubble-warenkorb 2.6s;
}

@keyframes zel-bubble-warenkorb {
	0% {
		transform: translateX(0) rotate(0);
		animation-timing-function: ease-in-out;
	}

	16% {
		transform: translateX(-12%) rotate(0);
		animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
	}

	36% {
		transform: translateX(22%) rotate(0);
		animation-timing-function: ease-out;
	}

	48% {
		transform: translateX(22%) rotate(-16deg);
		animation-timing-function: ease-in;
	}

	58% {
		transform: translateX(22%) rotate(0);
		animation-timing-function: ease-out;
	}

	64% {
		transform: translateX(22%) rotate(-4deg);
		animation-timing-function: ease-in;
	}

	70% {
		transform: translateX(22%) rotate(0);
		animation-timing-function: ease-in-out;
	}

	100% {
		transform: translateX(0) rotate(0);
	}
}

/* Lupe: sucht in einer kleinen Runde umher und vergrößert zum Schluss kurz – gefunden! */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--suche {
	animation: zel-bubble-suche 2.6s ease-in-out;
}

@keyframes zel-bubble-suche {
	0%,
	100% {
		transform: translate(0, 0) rotate(0) scale(1);
	}

	15% {
		transform: translate(-18%, -10%) rotate(-10deg);
	}

	30% {
		transform: translate(0, -20%) rotate(0);
	}

	45% {
		transform: translate(18%, -8%) rotate(10deg);
	}

	60% {
		transform: translate(4%, 8%) rotate(4deg);
	}

	72% {
		transform: translate(0, 0) rotate(0) scale(1);
	}

	80% {
		transform: scale(1.3);
	}

	90% {
		transform: scale(0.95);
	}
}

/* Honigglas: Der Deckel wird aufgeschraubt (dreht hin und her und hebt sich), schwebt kurz, das Glas hüpft, und der
   Deckel setzt sich wieder auf. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--honigglas {
	overflow: visible;
	animation: zel-bubble-honigglas 2.8s ease-in-out;
}

/* Der Deckel ist mit der Farbe des Buttons gefüllt und verdeckt Hals und Schultern, solange er aufliegt */
.zel-bubble .zel-icon--honigglas .zel-icon__deckel rect {
	fill: var(--zel-schwarz, #000);
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon--honigglas .zel-icon__hals {
	animation: zel-bubble-honigglas-hals 2.8s;
}

@keyframes zel-bubble-honigglas-hals {
	0%,
	100% {
		opacity: 1;
	}
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon--honigglas .zel-icon__deckel {
	transform-box: view-box;
	transform-origin: 12px 6.75px;
	animation: zel-bubble-honigglas-deckel 2.8s ease-in-out;
}

@keyframes zel-bubble-honigglas {
	0%,
	44%,
	60%,
	100% {
		transform: translateY(0) scaleY(1);
	}

	50% {
		transform: translateY(-6%) scaleY(1.03);
	}

	55% {
		transform: translateY(2%) scaleY(0.95);
	}
}

@keyframes zel-bubble-honigglas-deckel {
	0% {
		transform: translateY(0) rotate(0);
	}

	10% {
		transform: translateY(-0.6px) rotate(-12deg);
	}

	20% {
		transform: translateY(-1.2px) rotate(10deg);
	}

	30% {
		transform: translateY(-2px) rotate(-12deg);
	}

	40%,
	62% {
		transform: translateY(-5px) rotate(-8deg);
	}

	76% {
		transform: translateY(0) rotate(0);
		animation-timing-function: ease-out;
	}

	82% {
		transform: translateY(-1px) rotate(0);
	}

	88%,
	100% {
		transform: translateY(0) rotate(0);
	}
}

/* Bienenstock: summt (zittert leicht), dann fliegt eine Biene aus dem Flugloch, dreht eine Runde und kehrt heim. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--bienenstock {
	overflow: visible;
	transform-origin: 50% 90%;
	animation: zel-bubble-bienenstock 3s ease-in-out;
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon__flieger {
	animation: zel-bubble-bienenstock-flieger 3s ease-in-out;
}

@keyframes zel-bubble-bienenstock {
	0%,
	24%,
	100% {
		transform: rotate(0);
	}

	4%,
	12% {
		transform: rotate(-4deg);
	}

	8%,
	16% {
		transform: rotate(4deg);
	}

	20% {
		transform: rotate(-2deg);
	}
}

@keyframes zel-bubble-bienenstock-flieger {
	0%,
	22% {
		opacity: 0;
		transform: translate(0, 0);
	}

	26% {
		opacity: 1;
		transform: translate(0, 0);
	}

	40% {
		transform: translate(9px, -4px);
	}

	54% {
		transform: translate(10px, -15px);
	}

	66% {
		transform: translate(-1px, -21px);
	}

	78% {
		transform: translate(-10px, -12px);
	}

	90% {
		opacity: 1;
		transform: translate(-3px, -1px);
	}

	96%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

/* Urkunde: wackelt kurz, das Siegel hebt sich groß an und wird mit einem Ruck aufgestempelt. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--urkunde {
	overflow: visible;
	animation: zel-bubble-urkunde 2.6s ease-in-out;
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon__siegel {
	transform-box: view-box;
	transform-origin: 17.5px 16.5px;
	animation: zel-bubble-urkunde-siegel 2.6s;
}

@keyframes zel-bubble-urkunde {
	0%,
	30%,
	62%,
	100% {
		transform: rotate(0) scale(1);
	}

	8% {
		transform: rotate(-6deg);
	}

	16% {
		transform: rotate(5deg);
	}

	24% {
		transform: rotate(-3deg);
	}

	/* Stempel trifft auf */
	56% {
		transform: rotate(0) scale(1.06, 0.94);
	}
}

@keyframes zel-bubble-urkunde-siegel {
	0%,
	28% {
		transform: translate(0, 0) scale(1);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	44% {
		transform: translate(-3px, -6px) scale(1.5) rotate(-12deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	54% {
		transform: translate(0, 0) scale(0.85) rotate(0);
		animation-timing-function: ease-out;
	}

	64%,
	100% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
}

/* Kalender: wackelt kurz wie ein Wecker, dann wird ein Blatt nach oben umgeblättert, und der Kalender hüpft. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--kalender {
	overflow: visible;
	transform-origin: 50% 90%;
	animation: zel-bubble-kalender 2.8s ease-in-out;
}

.zel-bubble .zel-icon__blatt {
	fill: var(--zel-schwarz, #000); /* verdeckt beim Umblättern, was darunter liegt */
}

.zel-bubble.is-dripping:not(.is-loading) .zel-icon__blatt {
	transform-box: view-box;
	transform-origin: 12px 10px; /* Bindung unter den Ringen */
	animation: zel-bubble-kalender-blatt 2.8s;
}

@keyframes zel-bubble-kalender {
	0%,
	26%,
	74%,
	100% {
		transform: translateY(0) rotate(0);
	}

	5%,
	15% {
		transform: rotate(-7deg);
	}

	10%,
	20% {
		transform: rotate(7deg);
	}

	80% {
		transform: translateY(-8%) rotate(0);
	}

	88% {
		transform: translateY(2%) rotate(0);
	}
}

@keyframes zel-bubble-kalender-blatt {
	0%,
	30% {
		opacity: 0;
		transform: scaleY(1);
	}

	31% {
		opacity: 1;
		transform: scaleY(1);
		animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	}

	58% {
		opacity: 1;
		transform: scaleY(-0.85);
	}

	70%,
	100% {
		opacity: 0;
		transform: scaleY(-0.85);
	}
}

/* Ort: Die Stecknadel hüpft zweimal sanft auf der Stelle und federt beim Aufsetzen leicht nach (Kundenwunsch 02.10.:
   vorher Abheben mit Drehung – zu viel). */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--karte {
	transform-origin: 50% 95%; /* Spitze */
	animation: zel-bubble-karte 2s ease-in-out;
}

@keyframes zel-bubble-karte {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	14% {
		transform: translateY(-12%) scale(1);
	}

	26% {
		transform: translateY(0) scale(1.05, 0.94);
	}

	36% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-7%) scale(1);
	}

	62% {
		transform: translateY(0) scale(1.03, 0.97);
	}

	72% {
		transform: translateY(0) scale(1);
	}
}

/* Telefon: klingelt zweimal (schnelles Zittern), dazwischen eine kurze Pause. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--telefon {
	animation: zel-bubble-telefon 2.4s;
}

@keyframes zel-bubble-telefon {
	0%,
	30%,
	46%,
	76%,
	100% {
		transform: rotate(0);
	}

	3%,
	9%,
	15%,
	21%,
	27%,
	49%,
	55%,
	61%,
	67%,
	73% {
		transform: rotate(-14deg) scale(1.06);
	}

	6%,
	12%,
	18%,
	24%,
	52%,
	58%,
	64%,
	70% {
		transform: rotate(14deg) scale(1.06);
	}
}

/* Dokument: wird ein Stück angehoben und schräg gehalten, wie zum Lesen, und dann wieder abgelegt. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--pdf {
	transform-origin: 50% 100%;
	animation: zel-bubble-pdf 2.6s ease-in-out;
}

@keyframes zel-bubble-pdf {
	0%,
	100% {
		transform: translateY(0) rotate(0) scale(1);
	}

	22% {
		transform: translateY(-16%) rotate(-12deg) scale(1.08);
	}

	40% {
		transform: translateY(-16%) rotate(-8deg) scale(1.08);
	}

	58% {
		transform: translateY(-16%) rotate(-12deg) scale(1.08);
	}

	80% {
		transform: translateY(0) rotate(0) scale(0.97, 1.02);
	}

	90% {
		transform: translateY(0) rotate(0) scale(1);
	}
}

/* Pfeil nach unten („Weitere Projekte/Rezepte“ laden darunter nach): holt kurz Schwung nach oben, schießt nach unten
   aus dem Kreis hinaus und taucht danach an seinem Platz wieder auf – nicht von oben, sonst flöge er über die Schrift. */
.zel-bubble.is-dripping:not(.is-loading) .zel-icon--pfeil-runter {
	animation: zel-bubble-pfeil-runter 2.4s;
}

@keyframes zel-bubble-pfeil-runter {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	22% {
		opacity: 1;
		transform: translateY(-14%) scaleY(0.82);
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	46% {
		opacity: 1;
		transform: translateY(calc(var(--zel-bubble) * 0.5)) scaleY(1.25);
		animation-timing-function: steps(1, end);
	}

	47%,
	58% {
		opacity: 0;
		transform: translateY(0) scale(0.4);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Eckiger Button („Hier geht’s zur Patenschaft“) – Entwurf: 20 px Innenabstand, 20/24 px */
.zel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 1.25rem;
	border: 0;
	background: var(--zel-schwarz);
	color: var(--zel-weiss);
	font-family: var(--zel-font-display);
	font-size: 1.25rem;
	font-weight: var(--zel-fw-heading);
	line-height: 1.2;
	letter-spacing: var(--zel-ls-heading);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.zel-btn:hover {
	background: var(--zel-anthrazit);
	text-decoration: none;
}

.zel-btn--hell {
	background: var(--zel-weiss);
	color: var(--zel-schwarz);
}

.zel-btn--hell:hover {
	background: var(--zel-papier);
}

.zel-btn--kontur {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

.zel-btn--kontur:hover {
	background: rgba(0, 0, 0, 0.06);
}

/* Textlink mit » (Größe wie bisher; der Link der Bühne ist im Entwurf größer: blocks/einstieg) */
.zel-arrow-link {
	color: inherit;
	font-size: clamp(1.25rem, 2vw, 1.9375rem);
	font-style: italic;
	font-weight: 500;
}

.zel-arrow-link::before {
	content: "» ";
}

.zel-arrow-link {
	display: inline-block;
	padding-block: 0.5rem;
}

/* Illustrationen (dekorativ) */
.zel-illu {
	pointer-events: none;
	user-select: none;
	mix-blend-mode: multiply;
}

/* Eyebrow: kleine kursive Zeile über Kartentiteln („Für Dich“) – Entwurf weiß, fett kursiv; Gewicht wie die
   Kartenzeilen (--zel-fw-card) */
.zel-eyebrow {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--zel-eyebrow-color);
	font-family: var(--zel-font-display);
	font-size: var(--zel-fs-eyebrow);
	font-style: italic;
	font-weight: var(--zel-fw-card, 600);
	letter-spacing: var(--zel-ls-heading);
	text-transform: uppercase;
}

/* Formularfeld auf Beige: sichtbare Beschriftung, gepunktete Linie */
.zel-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
}

.zel-field label {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
}

.zel-field input,
.zel-field select,
.zel-field textarea {
	border: 0;
	border-bottom: var(--zel-dot) dotted var(--zel-schwarz);
	background: rgba(255, 255, 255, 0.35);
	padding: 0.625rem 0.5rem;
}

.zel-field input:focus,
.zel-field textarea:focus,
.zel-field select:focus {
	background: rgba(255, 255, 255, 0.7);
}

.zel-field--error input,
.zel-field--error textarea {
	border-bottom-color: var(--zel-rot);
}

.zel-field__error {
	color: var(--zel-rot);
	font-size: var(--zel-fs-small);
	font-weight: 500;
}

/* Meldungen */
.zel-message {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--zel-gruen);
	background: rgba(255, 255, 255, 0.7);
	color: var(--zel-schwarz);
}

.zel-message--error {
	border-left-color: var(--zel-rot);
}

/* Platzhalter im Editor (Plugin liefert zel_placeholder) */
.zel-placeholder {
	padding: 1rem 1.25rem;
	border: 1px dashed rgba(0, 0, 0, 0.45);
	background: rgba(255, 255, 255, 0.5);
	color: var(--zel-schwarz);
	font-family: var(--zel-font-text);
	font-size: 0.875rem;
}

/* Hinweisfenster (Einstellungen → Hinweise) */
.zel-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--zel-gutter);
	background: rgba(0, 0, 0, 0.55);
}

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

.zel-popup__box {
	position: relative;
	width: min(34rem, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--zel-beige);
	color: var(--zel-schwarz);
	box-shadow: var(--zel-shadow);
}

.zel-popup__title {
	margin-bottom: 1rem;
}

.zel-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Karte (Angebote, Produkte im Karussell, Projekte)                  */
/* Bild oben, runder Button überlappt die untere rechte Ecke,         */
/* darunter kursive Zeile und Titel in Versalien.                     */
/* ------------------------------------------------------------------ */

.zel-card {
	--zel-card-ratio: 10 / 11;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--zel-schwarz);
}

/* Bild → erste Zeile: bei allen Karten gleich (--zel-card-gap, 20 px wie im Entwurf – vorher 24 px bzw. je
   Modul anders). Module setzen hier keinen eigenen Abstand mehr. */
.zel-card__media {
	position: relative;
	margin-bottom: var(--zel-card-gap, 1.25rem);
}

.zel-card__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--zel-card-ratio);
	overflow: hidden;
	background: var(--zel-papier);
}

.zel-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zel-card--produkt .zel-card__image img {
	object-fit: contain;
	padding: 8%;
}

.zel-card:hover .zel-card__image img {
	transform: scale(1.03);
}

.zel-card__bubble {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.25rem);
	bottom: calc(var(--zel-bubble) * -0.5);
	z-index: 2;
}

.zel-card__body {
	padding-right: calc(var(--zel-bubble) + 1rem);
}

/* Kartenzeile und Titel wie im Entwurf (28.09.2026) – für alle Karten der Website gleich: Zeile weiß (auf
   hellen Seiten anthrazit), 2 px über dem Titel; Gewicht --zel-fw-card (Barlow 600 ≙ Trade Gothic Bold bei
   der Glättung des Entwurfs), Zeilenhöhe 21 px. Tokens: tokens.css. */
.zel-card__eyebrow {
	display: block;
	margin: 0 0 0.125rem;
	color: var(--zel-eyebrow-color);
	font-family: var(--zel-font-display);
	font-size: var(--zel-fs-eyebrow, 1.25rem);
	font-style: italic;
	font-weight: var(--zel-fw-card, 600);
	line-height: 1.05;
	letter-spacing: var(--zel-ls-heading);
	text-transform: uppercase;
}

/* WebKit (Safari) kennt hyphenate-limit-chars nicht und trennte deshalb fast jedes Wort („ORI-GINAL“, „HIMBEE-REN“,
   Mobil-Befund W2) – gleiche Grenzen über die -webkit-Eigenschaften: Überschriften wie base.css (5/5), Karten 4/4. */
h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-hyphenate-limit-before: 5;
	-webkit-hyphenate-limit-after: 5;
}

.zel-card__title {
	margin: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	color: var(--zel-schwarz);
	font-family: var(--zel-font-display);
	font-size: var(--zel-fs-h4, 1.25rem);
	font-weight: var(--zel-fw-card, 600);
	line-height: 1.05;
	letter-spacing: var(--zel-ls-heading);
	text-transform: uppercase;
}

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

/* Ganze Karte klickbar über den Titel-Link (Button bleibt eigener Link) */
.zel-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.zel-card__price {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
}

.zel-card__legal {
	display: block;
	color: var(--zel-anthrazit);
	font-size: 0.75rem;
}

.zel-cards {
	display: grid;
	grid-template-columns: repeat(var(--zel-cards-columns, 3), minmax(0, 1fr));
	gap: calc(var(--zel-bubble) * 0.5 + 2.5rem) var(--zel-gap);
}

@media (max-width: 991.98px) {
	.zel-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Handy (unter 576 px): Raster zweispaltig wie das Shop-Raster (Runde „mobil“, 29.09.) – Abstand aus tokens.css
   (--zel-cards-gap-mobil, 40 / 14 px wie shop.css .zel-products). Vorher eine Spalte, 105 / 20 px. Nur Raster:
   Wisch-Reihen mit dieser Klasse (data-zel-scroll, Angebots-Karten) bleiben, wie sie sind. */
@media (max-width: 575.98px) {
	.zel-cards:not([data-zel-scroll]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--zel-cards-gap-mobil, 2.5rem 0.875rem);
	}
}

/* Sichtbarer Fokus auf Kartentiteln (die ganze Karte ist über den Titel-Link klickbar) */
.zel-card__title a:focus-visible {
	outline: 3px solid var(--zel-schwarz);
	outline-offset: 4px;
}

.zel-card:focus-within .zel-card__image {
	box-shadow: 0 0 0 3px var(--zel-schwarz);
}

/* Karten in Rastern am Handy (unter 576 px, Runde „mobil“ 29.09.) wie im Shop-Raster – nur in Rastern
   (.zel-cards ohne data-zel-scroll: Übersichten Projekte/Rezepte/Presse, „Weitere …“). Karten in Wisch-Reihen
   und Karussells (data-zel-scroll, .zel-slider) behalten ihr Aussehen.
   - Bild quadratisch (--zel-card-ratio-raster).
   - Runder Button 44 px (--zel-card-button-mobil) nur mit Symbol, im Bild unten rechts wie „In den Warenkorb“
     (shop.css .zel-card__cart). Die Beschriftung bleibt für Screenreader (verdeckt, nicht entfernt).
   - Der Text braucht darum rechts keinen Platz mehr für den Button; der Bildnachweis rückt nach oben.
   Vorher: Bild 10 : 11, Button 100 px mit Beschriftung halb unter dem Bild, Text 116 px vom rechten Rand. */
@media (max-width: 575.98px) {
	.zel-cards:not([data-zel-scroll]) > .zel-card {
		--zel-card-ratio: var(--zel-card-ratio-raster, 1 / 1);
		--zel-bubble: var(--zel-card-button-mobil, 2.75rem);
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-card__bubble {
		right: var(--zel-card-button-inset-mobil, 0.5rem);
		bottom: var(--zel-card-button-inset-mobil, 0.5rem);
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-bubble {
		padding: 0;
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-bubble__label {
		position: absolute;
		inset: 0;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-bubble__icon {
		width: 1.375rem;
		height: 1.375rem;
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-card__body {
		padding-right: 0;
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card .zel-image-credit--box {
		top: 0;
		bottom: auto;
	}
}

/* Kartenraster ab 576 px (Übersichten, „Weitere …“): Titel und Text weichen nur dem runden Button aus (schwebender
   Platzhalter oben rechts), darunter nutzen sie die volle Kartenbreite – wie Angebots-Karten, Produkt-Karussell und
   Projekte-Slider (Vincent 29.09.). Vorher: fester rechter Rand calc(var(--zel-bubble) + 1rem) über die ganze Höhe. */
@media (min-width: 576px) {
	.zel-cards:not([data-zel-scroll]) > .zel-card:has(.zel-card__bubble) .zel-card__body {
		padding-right: 0;
	}

	.zel-cards:not([data-zel-scroll]) > .zel-card:has(.zel-card__bubble) .zel-card__body::before {
		content: "";
		float: right;
		width: calc(var(--zel-bubble) + clamp(0.75rem, 2vw, 1.25rem) + 0.5rem);
		height: calc(var(--zel-bubble) * 0.5 - var(--zel-card-gap, 1.25rem) + 0.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Shop vorübergehend geschlossen (zelenka-core/includes/shop/        */
/* shop-lock.php): Hinweis auf Shop, Produktseite, Warenkorb, Kasse   */
/* und in der Warenkorb-Schublade – wie die Hinweisleiste             */
/* ------------------------------------------------------------------ */

.zel-shop-lock {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--zel-anthrazit);
	color: var(--zel-weiss);
	font-size: 1rem;
	line-height: 1.5;
}

.zel-shop-lock__icon {
	flex: 0 0 auto;
	margin-top: 0.0625rem;
}

.zel-shop-lock__text {
	margin: 0;
}

.zel-shop-lock__title {
	display: block;
	font-weight: 700;
}

/* Produktseite: an der Stelle von „In den Warenkorb“ */
.zel-shop-lock--product {
	margin-block: 1.5rem;
}

/* Warenkorb-Schublade: statt „Zur Kasse“, über „Weiter einkaufen“ */
.zel-shop-lock--drawer {
	margin: 0;
	padding: 0.875rem 1rem;
	font-size: var(--zel-fs-small);
}