.albizia-bear-promo,
.albizia-bear-promo * {
	box-sizing: border-box;
}

.albizia-bear-promo {
	position: fixed;
	left: clamp(12px, 2vw, 30px);
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 99990;
	width: clamp(220px, 18vw, 280px);
	aspect-ratio: 13 / 12;
	contain: layout paint style;
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(-18px, 12px, 0) scale(0.96);
	transform-origin: left bottom;
	transition:
		opacity 220ms ease,
		transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 440ms;
}

.albizia-bear-promo.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0) scale(1);
	transition-delay: 0s;
}

.albizia-bear-promo.is-closing {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(-10px, 8px, 0) scale(0.97);
}

.albizia-bear-promo__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.albizia-bear-promo__link:focus-visible {
	outline: 3px solid #b85f2b;
	outline-offset: 4px;
}

.albizia-bear-promo__media {
	position: absolute;
	inset: 0;
	display: block;
	filter: drop-shadow(0 12px 12px rgba(39, 24, 12, 0.2));
	transform: translateZ(0);
	transition:
		filter 220ms ease,
		transform 220ms ease;
}

.albizia-bear-promo__link:hover .albizia-bear-promo__media,
.albizia-bear-promo__link:focus-visible .albizia-bear-promo__media {
	filter: drop-shadow(0 16px 16px rgba(39, 24, 12, 0.26));
	transform: translate3d(0, -2px, 0) scale(1.018);
}

.albizia-bear-promo__poster,
.albizia-bear-promo__video,
.albizia-bear-promo__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.albizia-bear-promo__poster {
	opacity: 1;
	transition: opacity 100ms linear;
}

.albizia-bear-promo.is-playing .albizia-bear-promo__poster {
	opacity: 0;
}

.albizia-bear-promo__video,
.albizia-bear-promo__canvas {
	opacity: 0;
	transition: none;
}

.albizia-bear-promo__video.is-active,
.albizia-bear-promo.is-canvas .albizia-bear-promo__canvas {
	opacity: 1;
}

.albizia-bear-promo__canvas[hidden] {
	display: none;
}

.albizia-bear-promo__close {
	position: absolute;
	/* Am Bären statt in der leeren Bildecke. Die Grafik hört rechts bei 74,5 %
	   der Breite auf, im obersten Drittel schon bei 72,8 %, oben bei 7,6 % der
	   Höhe — in Poster, Klopf- und Schleifenvideo gleich (alle 624 x 576,
	   also genau das 13/12 des Kastens, `contain` skaliert 1:1). Die Mitte des
	   Knopfes liegt deshalb auf 83,5 % / 12 %: der sichtbare Kreis beginnt bei
	   78 % und bleibt damit knapp neben der Hutkrempe, ohne sie zu verdecken.
	   In Prozent gerechnet, damit das in jeder Störergröße gleich sitzt; die
	   44 px Trefferfläche bleiben unabhängig davon erhalten. */
	top: 12%;
	right: 16.5%;
	transform: translate(50%, -50%);
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #24180f;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.albizia-bear-promo__close-icon {
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border: 1px solid rgba(55, 34, 20, 0.14);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 18px rgba(39, 24, 12, 0.2);
	transition:
		background-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.albizia-bear-promo__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

.albizia-bear-promo__close:hover .albizia-bear-promo__close-icon,
.albizia-bear-promo__close:focus-visible .albizia-bear-promo__close-icon {
	background: #24180f;
	color: #ffffff;
	transform: scale(1.06);
}

.albizia-bear-promo__close:focus-visible {
	outline: 3px solid #b85f2b;
	outline-offset: 1px;
}

@media (max-width: 640px) {
	.albizia-bear-promo {
		left: max(4px, env(safe-area-inset-left));
		bottom: calc(68px + env(safe-area-inset-bottom));
		width: clamp(190px, 54vw, 220px);
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.albizia-bear-promo {
		bottom: max(6px, env(safe-area-inset-bottom));
		width: 140px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.albizia-bear-promo,
	.albizia-bear-promo.is-visible,
	.albizia-bear-promo.is-closing {
		transform: none;
		transition: opacity 120ms linear, visibility 0s;
	}

	.albizia-bear-promo__media,
	.albizia-bear-promo__link:hover .albizia-bear-promo__media,
	.albizia-bear-promo__link:focus-visible .albizia-bear-promo__media,
	.albizia-bear-promo__close-icon {
		transform: none;
		transition: none;
	}
}