/* ---------- Eigene Werte ---------- */

.unyer-banner {
	--unyer-banner-floor: 22.5rem;
	--unyer-banner-target: 43.75rem;
	--unyer-banner-anteil: 36.46vw;
	--unyer-banner-measure: 18em;
	--unyer-banner-scrim-low: 62%;
	--unyer-banner-scrim-mid: 46%;
	--unyer-banner-scrim-high: 14%;
	--unyer-banner-control-fill: 55%;
	--unyer-banner-control-fill-active: 80%;
	--unyer-banner-control-icon: 1.25rem;
	--unyer-banner-control-ring: 0.125rem;
}

/* ---------- Fläche ---------- */

.wp-block-cover.unyer-banner {
	min-block-size: clamp(var(--unyer-banner-floor), var(--unyer-banner-anteil), var(--unyer-banner-target));
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--unyer-kante);
}

body.home .wp-block-cover.unyer-banner {
	--unyer-banner-target: 53.125rem;
	--unyer-banner-anteil: 44.27vw;
	align-items: flex-start;
	padding-block-start: var(--wp--preset--spacing--90);
}

/* ---------- Abdunklung ---------- */

.unyer-banner:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) var(--unyer-banner-scrim-low), transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) var(--unyer-banner-scrim-mid), transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--contrast) var(--unyer-banner-scrim-high), transparent) 100%
	);
	pointer-events: none;
}

/* ---------- Inhaltsspalte ---------- */

.wp-block-cover.unyer-banner > .wp-block-cover__inner-container {
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------- Claim ---------- */

.unyer-banner__claim {
	max-inline-size: var(--unyer-banner-measure);
	margin-block: 0;
	text-wrap: balance;
}

/* ---------- Videosteuerung ---------- */

.wp-block-cover.unyer-banner .unyer-banner__steuerung {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--60);
	inset-inline-end: var(--unyer-kante);
	z-index: 4;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0;
	border: var(--unyer-banner-control-ring) solid currentColor;
	border-radius: var(--wp--custom--radius--round);
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) var(--unyer-banner-control-fill), transparent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--base);
}

.wp-block-cover.unyer-banner:has(> .unyer-banner__steuerung:not([hidden])) {
	padding-block-end: calc(var(--wp--custom--target--min) + 2 * var(--wp--preset--spacing--60));
}

.wp-block-cover.unyer-banner .unyer-banner__steuerung:not([hidden]) {
	display: grid;
	place-items: center;
}

.unyer-banner .unyer-banner__symbol {
	inline-size: var(--unyer-banner-control-icon);
	block-size: var(--unyer-banner-control-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.unyer-banner .unyer-banner__symbol--play {
	fill: currentColor;
}

.unyer-banner :is([data-zustand="laeuft"] .unyer-banner__symbol--play, [data-zustand="pausiert"] .unyer-banner__symbol--pause) {
	display: none;
}

.wp-block-cover.unyer-banner .unyer-banner__steuerung:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) var(--unyer-banner-control-fill-active), transparent);
}

.wp-block-cover.unyer-banner .unyer-banner__steuerung:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--base);
	outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.unyer-banner .unyer-banner__steuerung {
		transition: none;
	}
}