/**
 * Versteckte Überraschungen (Easter Eggs) und Weltbienentag – nur geladen, wenn einer der Schalter unter
 * Einstellungen → Verspieltes an ist (inc/ueberraschungen.php, assets/js/ueberraschungen.js).
 *
 *   Fliegende Bienen: eigene Ebenen ohne Einfluss aufs Layout und ohne Klicks (pointer-events: none),
 *   nur transform und opacity (Web Animations aus dem Skript), danach wieder entfernt. Unter Kopfzeile, Menü und
 *   Fenstern (Kopfzeile 50, runder Menüknopf 45, Menü 55, Hinweisfenster 1000). Bei „Bewegung reduzieren“ gibt
 *   es sie nicht – nur den Gruß zum Weltbienentag, ohne Bewegung.
 */

/* Form der Biene (Symbol im Fußbereich) – ohne Platz im Layout */
.zel-ue-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Ebenen: fest über dem Bildschirm (Schwarm, Weltbienentag) oder über der ganzen Seite (Biene am Logo und
   am Fußbereich – sie bleibt beim Scrollen an ihrem Platz); was hinausfliegt, wird abgeschnitten. */
.zel-ue {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 44;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	pointer-events: none;
}

.zel-ue--seite {
	position: absolute;
	height: auto; /* Höhe der Seite setzt das Skript */
}

/* Die Biene vom Logo fliegt vor der Kopfzeile (50), aber unter dem Menü am Handy (55) */
.zel-ue--logo {
	z-index: 51;
}

/* Bienen dunkel wie auf dem Flugplan, mit feinem hellem Saum – auf Weiß, Beige und dunklen Flächen zu sehen */
.zel-ue-biene {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--s, 24px);
	height: var(--s, 24px);
	margin: calc(var(--s, 24px) / -2) 0 0 calc(var(--s, 24px) / -2);
	color: var(--zel-ink, #272727);
	opacity: 0;
	will-change: transform, opacity;
}

.zel-ue-biene__koerper {
	display: block;
	width: 100%;
	height: 100%;
}

.zel-ue-biene svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 0 1px rgba(255, 255, 254, 0.85));
}

/* Summen: kleine Kreise und Wackeln im Flug (wie die Bienen der Hinweise) */
.zel-ue-biene--summt .zel-ue-biene__koerper {
	animation: zel-ue-summen var(--summen, 0.5s) linear infinite;
}

@keyframes zel-ue-summen {
	0%,
	100% {
		transform: rotate(-12deg) translate(0, 0);
	}

	25% {
		transform: rotate(0deg) translate(1.5px, -2px);
	}

	50% {
		transform: rotate(12deg) translate(0, -1px);
	}

	75% {
		transform: rotate(0deg) translate(-1.5px, -2px);
	}
}

/* Kleiner Schwarm ums Logo, solange die Maus darauf liegt – wie am gezeigten Standort im Flugplan (flugplan.css):
   jede Biene an einem eigenen Platz (--x/--y, ueberraschungen.js), blendet weich ein und aus und schwirrt von dort
   in Kreisen. Im Fußbereich weiß. */
.zel-ue-nest {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

.zel-ue-nest__platz {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	translate: var(--x, 0) var(--y, 0);
	transition: opacity 0.9s ease;
}

.zel-ue-nest__platz.is-da {
	opacity: 1;
}

.zel-ue.is-weg .zel-ue-nest__platz {
	transition-duration: 1.5s;
}

.zel-ue-nest__biene {
	position: absolute;
	top: calc(var(--zel-ue-biene, 1rem) / -2);
	left: calc(var(--zel-ue-biene, 1rem) / -2);
	width: var(--zel-ue-biene, 1rem);
	height: var(--zel-ue-biene, 1rem);
	color: var(--zel-ink, #272727);
	animation: zel-ue-biene-a 9s ease-in-out infinite;
}

.zel-ue-nest__biene svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 1px rgba(255, 255, 254, 0.85));
}

/* Größe der Bienen am Logo: oben 18 px, im Fußbereich 16 px (Kundenwunsch 02.10.); die kleineren Bienen im Schwarm
   sind je 7/8 davon */
.zel-ue--logo {
	--zel-ue-biene: 1.125rem;
}

.zel-ue--logo.zel-ue--fuss {
	--zel-ue-biene: 1rem;
}

/* Weiße Bienen (Logo auf der Startseite, Fußbereich): reines Weiß mit feinem dunklem Saum – auf hellem Grund wirkten
   sie sonst gräulich (Kundenwunsch 02.10.; gefüllt gefiel nicht) */
.zel-ue--weiss .zel-ue-nest__biene {
	color: #fff;
}

.zel-ue--weiss .zel-ue-nest__biene svg {
	filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.55));
}

.zel-ue-nest__biene--2 {
	animation-name: zel-ue-biene-b;
	animation-duration: 11s;
}

.zel-ue-nest__biene--3 {
	width: calc(var(--zel-ue-biene, 1rem) * 0.875);
	height: calc(var(--zel-ue-biene, 1rem) * 0.875);
	animation-name: zel-ue-biene-c;
	animation-duration: 7.5s;
}

.zel-ue-nest__biene--4 {
	width: calc(var(--zel-ue-biene, 1rem) * 0.875);
	height: calc(var(--zel-ue-biene, 1rem) * 0.875);
	animation-name: zel-ue-biene-d;
	animation-duration: 10s;
}

@keyframes zel-ue-biene-a {
	0%,
	100% {
		transform: translate(-2.25rem, 0.5rem) rotate(-20deg);
	}

	25% {
		transform: translate(-1rem, 2rem) rotate(40deg);
	}

	50% {
		transform: translate(1.25rem, 2.25rem) rotate(80deg);
	}

	75% {
		transform: translate(-0.5rem, 1rem) rotate(200deg);
	}
}

@keyframes zel-ue-biene-b {
	0%,
	100% {
		transform: translate(2.5rem, 1.25rem) rotate(160deg);
	}

	30% {
		transform: translate(1rem, 2.5rem) rotate(220deg);
	}

	60% {
		transform: translate(3rem, 2rem) rotate(320deg);
	}

	80% {
		transform: translate(3.25rem, 0.75rem) rotate(380deg);
	}
}

@keyframes zel-ue-biene-c {
	0%,
	100% {
		transform: translate(-1.5rem, 2.25rem) rotate(10deg);
	}

	35% {
		transform: translate(-3rem, 1.5rem) rotate(-60deg);
	}

	70% {
		transform: translate(-2rem, -0.25rem) rotate(-150deg);
	}
}

@keyframes zel-ue-biene-d {
	0%,
	100% {
		transform: translate(1.5rem, -0.5rem) rotate(-30deg);
	}

	40% {
		transform: translate(2.5rem, 1rem) rotate(60deg);
	}

	70% {
		transform: translate(0.5rem, 1.5rem) rotate(170deg);
	}
}

/* Gruß zum Weltbienentag: klein, unten links, schließbar */
.zel-ue-gruss {
	position: fixed;
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: max(1rem, env(safe-area-inset-left));
	z-index: 46;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: min(24rem, calc(100vw - 2rem));
	padding: 0.875rem 0.75rem 0.875rem 1rem;
	border-radius: 0.75rem;
	background: var(--zel-weiss, #fffffe);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	color: var(--zel-ink, #272727);
	font-family: var(--zel-font-text);
	font-size: var(--zel-fs-small, 0.875rem);
	line-height: 1.4;
	animation: zel-ue-gruss 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zel-ue-gruss__biene {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: #e39b10;
}

.zel-ue-gruss__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.zel-ue-gruss__zu {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.zel-ue-gruss__zu:hover {
	background: rgba(0, 0, 0, 0.06);
}

.zel-ue-gruss__zu:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.zel-ue-gruss__zu svg {
	width: 1.125rem;
	height: 1.125rem;
}

@keyframes zel-ue-gruss {
	from {
		opacity: 0;
		transform: translate3d(0, 1rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Logo am Handy: langes Drücken ohne Menü „Link öffnen/teilen“, ohne Markieren und ohne Aufnehmen zum Ziehen
   (Safari bricht sonst das stille Halten nach rund 0,5 s ab) */
.zel-ue-lang,
.zel-ue-lang img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* 404-Seite: Hinweis „Bienen wecken – Handy schütteln!“ (nur mit Finger; das Skript nimmt „hidden“ weg) */
.zel-ue-schuetteln {
	margin: 0 0 1.5rem;
}

.zel-ue-schuetteln__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px dashed currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

.zel-ue-schuetteln__knopf svg {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	animation: zel-ue-wackeln 1.6s ease-in-out infinite;
}

@keyframes zel-ue-wackeln {
	0%,
	60%,
	100% {
		transform: rotate(0);
	}

	70% {
		transform: rotate(-14deg);
	}

	80% {
		transform: rotate(12deg);
	}

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

/* Nach dem Antippen: der Satz statt des Knopfs; bereit zum Schütteln wackelt die Biene kräftiger */
.zel-ue-schuetteln__text {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.zel-ue-schuetteln__text svg {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	animation: zel-ue-wackeln 1.6s ease-in-out infinite;
}

.zel-ue-schuetteln__text.is-bereit svg {
	animation-duration: 0.8s;
}

@media (hover: hover) and (pointer: fine) {
	.zel-ue-schuetteln {
		display: none;
	}
}

/* Biene beim Doppeltippen aufs Produktfoto: groß und weiß mit weichem Schatten wie das Herz bei Instagram, Kopf nach
   oben (das Symbol zeigt mit dem Kopf nach unten); Lage, Sprung und Abflug aus dem Skript, innen das Summen */
.zel-ue-fotobiene {
	position: absolute;
	top: 0;
	left: 0;
	width: 6.5rem;
	height: 6.5rem;
	color: var(--zel-weiss, #fffffe);
	will-change: transform, opacity;
}

.zel-ue-fotobiene__koerper {
	display: block;
	width: 100%;
	height: 100%;
	animation: zel-ue-summen 0.35s linear infinite;
}

.zel-ue-fotobiene svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
	transform: rotate(180deg);
}

/* Querformat: „Huch!“ klein am rechten Rand unten, dezent – über dem runden Warenkorb-Knopf (cart-drawer.css:
   1rem vom Rand, 3,75rem hoch) */
.zel-ue--huch {
	z-index: 46;
}

.zel-ue-huch {
	position: absolute;
	right: max(0.75rem, env(safe-area-inset-right));
	bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5.5rem));
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 254, 0.92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	color: var(--zel-ink, #272727);
	font-family: var(--zel-font-display);
	font-size: 1rem;
	font-weight: var(--zel-fw-heading, 600);
	line-height: 1;
}

.zel-ue-huch__biene {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.zel-ue-huch__biene svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Bienen-Suche: kleine Biene auf der oberen Kante eines Fotos bzw. daneben, auf dem Hintergrund der Seite (dunkel
   mit hellem Saum); zuckt ab und zu mit den Flügeln. Antippfläche 40 px (HUNT_SIZE im Skript). */
.zel-ue-versteck {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 44;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--zel-ink, #272727);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.zel-ue-versteck svg {
	width: 1.5rem;
	height: 1.5rem;
	overflow: visible;
	filter: drop-shadow(0 0 1px rgba(255, 255, 254, 0.9));
	transform: rotate(180deg);
	animation: zel-ue-zucken 6s ease-in-out infinite;
}

.zel-ue-versteck:focus-visible {
	border-radius: 50%;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Kopf nach oben (das Symbol zeigt mit dem Kopf nach unten), ab und zu ein Zucken */
@keyframes zel-ue-zucken {
	0%,
	86%,
	100% {
		transform: rotate(180deg);
	}

	89% {
		transform: rotate(192deg) translate(1px, -1px);
	}

	92% {
		transform: rotate(168deg);
	}

	95% {
		transform: rotate(186deg);
	}
}

/* Warenkorb-Symbol: nach dem Schließen der Schublade kurz ein Honigglas genau über seinem Symbol (eigene Ebene,
   Lage und Farbe aus dem Skript) – über der Kopfzeile (50) und dem runden Knopf (40), unter Schublade und Fenstern */
.zel-ue-glas {
	z-index: 61;
	pointer-events: none;
}

.zel-ue-glas svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.zel-ue-glas__honig {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

/* Biene am Mauszeiger: gelandet putzt sie sich (Vorderbeine reiben – angedeutet durch kurzes Nicken und Wackeln) */
.zel-ue-biene.is-putzt .zel-ue-biene__koerper {
	animation: zel-ue-putzen 2.4s ease-in-out infinite;
}

@keyframes zel-ue-putzen {
	0%,
	100% {
		transform: rotate(0) scale(1);
	}

	10% {
		transform: rotate(-8deg) scale(1, 0.94);
	}

	20% {
		transform: rotate(6deg) scale(1, 0.96);
	}

	30% {
		transform: rotate(-6deg) scale(1, 0.94);
	}

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

	70% {
		transform: rotate(3deg) translate(0, -1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zel-ue {
		display: none;
	}

	.zel-ue-gruss {
		animation: none;
	}

	.zel-ue-versteck svg,
	.zel-ue-schuetteln__knopf svg,
	.zel-ue-schuetteln__text svg {
		animation: none;
	}
}