/**
 * Bienenflug (includes/content/bienenflug.php, assets/js/bienenflug.js): Wabe und gepunktete Flugbahn in einem
 * Rahmen 4 : 3 (viewBox 800 × 600, die Wabe 90 % hoch am rechten Rand), die Biene fliegt sie einmal ab.
 * Farbe von Bahn und Biene über --zel-bienenflug-farbe: auf Beige Weiß, auf hellen Seiten Anthrazit.
 *
 * Ein Aufbau für alle Stellen, Vorbild ist die 404-Seite (Befund docs/runde-3-befunde/startseite-404.md, Teil C):
 *   Handy/Tablet: Bild über dem Text, rechtsbündig, höchstens 30 rem breit.
 *   Ab 992 px: Text und Bild je zur Hälfte, senkrecht mittig; das Bild reicht bis an den Seitenrand und ein Stück
 *   (6 %, ab 1200 px 16 % der Spalte) in die Textspalte – die Bahn beginnt hinter dem Text.
 *   Schmale Bühnen (unter 40 rem, etwa die Formulare) behalten den Aufbau wie am Handy.
 */

.zel-bienenflug {
	--zel-bienenflug-farbe: var(--zel-weiss);
	position: relative;
	width: 100%;
	max-width: 30rem;
	aspect-ratio: 4 / 3;
	color: var(--zel-bienenflug-farbe);
	pointer-events: none;
}

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

.zel-page-light .zel-bienenflug {
	--zel-bienenflug-farbe: var(--zel-anthrazit);
}

.zel-bienenflug__wabe {
	position: absolute;
	top: 6.667%;
	right: 0;
	width: auto;
	max-width: none;
	height: 90%;
}

.zel-bienenflug__flug {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.zel-bienenflug__bahn {
	fill: none;
	stroke: currentColor;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 0 15;
}

/* Mit JavaScript fliegt die Biene die Bahn ab (bienenflug.js); bis dahin ist sie unsichtbar – ohne
   JavaScript erscheint sie nach kurzer Zeit am Ziel. */
@keyframes zel-bienenflug-da {
	to {
		opacity: 1;
	}
}

.zel-bienenflug__biene {
	opacity: 0;
	animation: zel-bienenflug-da 0.4s ease 1.2s forwards;
}

.zel-bienenflug__biene.is-fliegend {
	opacity: 1;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.zel-bienenflug__biene {
		opacity: 1;
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Bühne: Text und Bild                                               */
/* ------------------------------------------------------------------ */

.zel-bienenflug-buehne {
	width: 100%;
	container: zel-bienenflug / inline-size;
}

.zel-bienenflug-buehne__innen {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 1.5rem;
}

.zel-bienenflug-buehne__text {
	position: relative;
	z-index: 1; /* über dem Bild, das ab 992 px ein Stück hereinragt */
	min-width: 0;
}

.zel-bienenflug-buehne__innen > .zel-bienenflug {
	order: -1;
	margin-left: auto;
}

@media (min-width: 992px) {
	@container zel-bienenflug (min-width: 40rem) {
		.zel-bienenflug-buehne__innen:has(> .zel-bienenflug:not([hidden])) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			align-items: center;
			column-gap: 0;
		}

		.zel-bienenflug-buehne__innen > .zel-bienenflug {
			--zel-bienenflug-herein: 6%;
			order: 0;
			width: calc(100% + var(--zel-gutter) + var(--zel-bienenflug-herein));
			max-width: none;
			margin: 0 calc(-1 * var(--zel-gutter)) 0 calc(-1 * var(--zel-bienenflug-herein));
		}
	}
}

@media (min-width: 1200px) {
	@container zel-bienenflug (min-width: 40rem) {
		.zel-bienenflug-buehne__innen > .zel-bienenflug {
			--zel-bienenflug-herein: 16%;
		}
	}
}

/* ------------------------------------------------------------------ */
/* Danke-Seite                                                        */
/* ------------------------------------------------------------------ */

/* Das Bild kommt über woocommerce_before_thankyou vor den Kopf (Häkchen, „Vielen Dank …“); umschließen lässt sich
   der Kopf von dort nicht. Deshalb dieselben Maße wie in der Bühne: am Handy Bild rechtsbündig über dem Kopf, ab
   992 px der Kopf in der linken Hälfte (so hoch wie das Bild, Inhalt mittig) und das Bild daneben – halbe Breite
   plus Seitenrand plus 6 % bzw. 16 % der Spalte (3 bzw. 8 cqi der Danke-Seite). */
.zel-thankyou > .zel-bienenflug--danke {
	margin: 0 0 1.5rem auto;
}

@media (min-width: 992px) {
	.zel-thankyou:has(> .zel-bienenflug--danke) {
		position: relative;
		container-type: inline-size;
	}

	.zel-thankyou > .zel-bienenflug--danke {
		position: absolute;
		top: 0;
		right: calc(-1 * var(--zel-gutter));
		width: calc(50cqi + var(--zel-gutter) + 3cqi);
		max-width: none;
		margin: 0;
	}

	.zel-thankyou > .zel-bienenflug--danke + .zel-thankyou__head {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 50%;
		min-height: calc((50cqi + var(--zel-gutter) + 3cqi) * 0.75);
	}
}

@media (min-width: 1200px) {
	.zel-thankyou > .zel-bienenflug--danke {
		width: calc(50cqi + var(--zel-gutter) + 8cqi);
	}

	.zel-thankyou > .zel-bienenflug--danke + .zel-thankyou__head {
		min-height: calc((50cqi + var(--zel-gutter) + 8cqi) * 0.75);
	}
}