/**
 * Modul M40 – Referenzen-Slider
 *
 * Masse aus dem Entwurf (Knoten 4:193 und 3:92), gemessen bei 1920px:
 *   Band          148px hoch, randlos, #1B1B1A
 *   Schrift       40px / Zeilenhoehe 90px, versal, "Good Headline Pro Extd
 *                 Black" — aus dem Figma-Textknoten 3:91 ausgelesen
 *   Textblock     33px unter der Bandoberkante
 *   Trenner       5 x 34px in #DC1920, je 38px Luft links und rechts
 *
 * Die Zeilenhoehe steht fest in px: zusammen mit dem Polster 33 + 25 ergibt
 * das genau die 148px Bandhoehe des Entwurfs.
 *   Vorschaubild  352 x 234px, Oberkante 124px unter der Bandoberkante
 *                 (= 24px oberhalb der Bandunterkante) und damit 210px in die
 *                 naechste Sektion hineinragend
 *
 * Die Bandhoehe wird NICHT fest gesetzt, sondern aus Polster + Zeilenhoehe
 * gebildet (33 + 90 + 25 = 148). So schrumpft das Band in den kleineren
 * Stufen von selbst mit der Schriftgroesse mit.
 */

.m40_referenzen {
	position: relative;
	/* Das Vorschaubild haengt in die Folgesektion hinein und muss darueber
	   liegen. */
	z-index: 3;
}

.m40_buehne {
	position: relative;
}

.m40_band {
	position: relative;
	overflow: hidden;
	padding: 33px 0 25px;
	background-color: #1B1B1A;
}

/* --- Laufband --------------------------------------------------------- */

.m40_referenzen .m40_spur {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	animation: m40_lauf var(--m40_dauer, 40s) linear infinite;
}

/* Beim Ueberfahren und bei Tastaturfokus haelt das Band an — sonst rutscht
   der Name unter dem Zeiger weg und das Bild passt nicht mehr zum Namen.
   Die Klasse setzt das JS am Band, nicht per :hover auf der Spur: die Spur
   ist nur so hoch wie ihre Textzeile, im Polster darueber und darunter
   wuerde der Hover abreissen und das Band im Rand zucken. */
.m40_band.is_haelt .m40_spur,
.m40_referenzen .m40_spur:focus-within {
	animation-play-state: paused;
}

@keyframes m40_lauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.m40_referenzen .m40_eintrag {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Der Trenner ist gezeichnet, nicht gesetzt: als Zeichen haengt sein
   Aussehen an der Schrift, und solange die echte Schrift fehlt, saehe er
   voellig anders aus als im Entwurf. */
.m40_referenzen .m40_eintrag::after {
	content: '';
	flex: none;
	width: 5px;
	height: 34px;
	margin: 0 38px;
	background-color: var(--primarbutton_background_color);
}

.m40_referenzen .m40_link {
	font-family: var(--font_extd);
	font-weight: 800;
	font-size: 2.3529rem;
	line-height: 90px;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: color .25s;
}

/* Der Wechsel hell/gedimmt laeuft ueber die Position, damit er auch bei
   wechselnder Anzahl Referenzen stimmt. Deshalb muss die Anzahl je Haelfte
   gerade sein — das rechnet das Template aus. */
.m40_referenzen .m40_eintrag:nth-child(odd) .m40_link {
	color: #FFFFFF;
}

.m40_referenzen .m40_eintrag:nth-child(even) .m40_link {
	color: rgba(255, 255, 255, .3);
}

.m40_referenzen .m40_link:hover,
.m40_referenzen .m40_link:focus-visible {
	color: #FFFFFF;
}

/* --- Vorschaubild ----------------------------------------------------- */

.m40_vorschau {
	position: absolute;
	/* 24px oberhalb der Bandunterkante — im Entwurf 124px unter der
	   Oberkante eines 148px hohen Bandes. Als calc bleibt der Bezug auch in
	   den kleineren Stufen erhalten. */
	top: calc(100% - 24px);
	/* Die waagerechte Lage kommt per JS als --m40_x und wird bewusst NICHT
	   uebergeblendet: das Bild soll dem Zeiger direkt folgen. Uebergeblendet
	   wird nur das Erscheinen. */
	left: var(--m40_x, 0px);
	z-index: 2;
	width: 352px;
	max-width: calc(100vw - 40px);
	aspect-ratio: 352 / 234;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 6px, 0);
	transition: opacity .25s, transform .25s, visibility 0s .25s;
}

.m40_vorschau.is_sichtbar {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	transition: opacity .25s, transform .25s, visibility 0s;
}

.m40_vorschau_bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Ohne Zeigegeraet ------------------------------------------------- */

@media (hover: none) {
	.m40_vorschau {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.m40_referenzen .m40_spur {
		animation: none;
	}

	.m40_vorschau,
	.m40_vorschau.is_sichtbar {
		transform: none;
		transition: opacity .01s, visibility 0s;
	}
}

/* --- Kleinere Stufen -------------------------------------------------- */

@media screen and (max-width: 1199px) {
	.m40_band {
		padding: 24px 0 18px;
	}

	.m40_referenzen .m40_link {
		font-size: 1.8824rem;
		line-height: 65px;
	}

	.m40_referenzen .m40_eintrag::after {
		width: 4px;
		height: 27px;
		margin: 0 30px;
	}
}

@media screen and (max-width: 991px) {
	.m40_band {
		padding: 16px 0 12px;
	}

	.m40_referenzen .m40_link {
		font-size: 1.4118rem;
		line-height: 43px;
	}

	.m40_referenzen .m40_eintrag::after {
		width: 3px;
		height: 20px;
		margin: 0 23px;
	}
}