/* Logo-Marquee — Bühnenkind
   Die Variablen --bk-logo-h, --bk-gap und --bk-fade setzt der Shortcode pro
   Instanz und Breakpoint; --bk-duration berechnet das JS aus der Streckenlänge. */

.bk-marquee {
	--bk-logo-h: 44px;
	--bk-gap: 40px;
	--bk-fade: 44px;
	--bk-reihenabstand: 1.4rem;
	position: relative;
}

.bk-marquee__reihe {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bk-fade),
		#000 calc(100% - var(--bk-fade)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--bk-fade),
		#000 calc(100% - var(--bk-fade)), transparent);
}

.bk-marquee__reihe + .bk-marquee__reihe {
	margin-top: var(--bk-reihenabstand);
}

.bk-marquee__viewport {
	display: flex;
	width: max-content;
}

/* Uncode setzt in .post-content ein `list-style: disc` mit hoher Spezifität
   (mehrere :not()-Ausnahmen). Die Klasse `no-list` ist der dafür vorgesehene
   Opt-out des Themes; die Regel hier fängt Kontexte außerhalb von .post-content ab. */
.bk-marquee .bk-marquee__track,
.bk-marquee .bk-marquee__item {
	list-style: none;
}

.bk-marquee__item::marker {
	content: none;
}

.bk-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--bk-gap);
	margin: 0;
	padding: 0 0 0 var(--bk-gap);
	list-style: none;
	animation: bk-marquee var(--bk-duration, 40s) linear infinite;
	will-change: transform;
}

/* Zwei gleich lange Spuren nebeneinander: -100 % verschiebt exakt um eine
   Spurbreite, dort steht die Kopie pixelgenau am Startpunkt der ersten. */
@keyframes bk-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

.bk-marquee__reihe--rueckwaerts .bk-marquee__track {
	animation-direction: reverse;
}

.bk-marquee__item {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	/* display:list-item bliebe im Flex-Container erhalten und würde den
	   Aufzählungspunkt weiter zeichnen. */
	display: block;
}

.bk-marquee__link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.bk-marquee__item img {
	display: block;
	height: var(--bk-logo-h);
	width: auto;
	/* schlägt Uncodes globales img { max-width: 100% } */
	max-width: none;
	object-fit: contain;
	transition: filter .3s ease, opacity .3s ease;
}

.bk-marquee--graustufen .bk-marquee__item img {
	filter: grayscale(100%);
	opacity: .5;
}

.bk-marquee--graustufen .bk-marquee__item a.bk-marquee__link:hover img,
.bk-marquee--graustufen .bk-marquee__item a.bk-marquee__link:focus-visible img {
	filter: none;
	opacity: 1;
}

.bk-marquee__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Pause bei Hover und bei Tastaturfokus — Letzteres, damit man ein Logo
   überhaupt ansteuern kann, ohne es zu jagen. */
.bk-marquee--pause-hover:hover .bk-marquee__track,
.bk-marquee:focus-within .bk-marquee__track,
.bk-marquee.is-pausiert .bk-marquee__track {
	animation-play-state: paused;
}

.bk-marquee__hinweis {
	padding: 1rem 1.2rem;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: .7;
	font-size: .9em;
}

@media (prefers-reduced-motion: reduce) {
	.bk-marquee__track {
		animation: none;
	}
	/* Ohne Animation wird aus dem Band ein normal scrollbarer Streifen. */
	.bk-marquee__viewport {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
	}
	.bk-marquee__track[aria-hidden="true"] {
		display: none;
	}
}