/*
 * GOAT Ecom, Referenzen.
 *
 * Uebersicht mit horizontal gepinnter Schiene, Detailseiten mit
 * fester Gliederung.
 */

/* ===================================================================
 * Gepinnte Schiene
 *
 * Die Buehne klebt, die Spur faehrt. Bewegt wird eine einzige
 * Transformation. Ohne JavaScript, unter 900px und bei abbestellter
 * Bewegung wird daraus eine ganz normale Querscrollflaeche.
 * ================================================================= */
.ge-pin {
	position: relative;
	margin-block-start: var(--ge-space-xl);
}

.ge-pin__buehne {
	position: sticky;
	inset-block-start: var(--ge-kopf-hoehe);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: var(--ge-space-l);
}

.ge-pin__spur {
	display: flex;
	gap: var(--ge-space-m);
	margin: 0;
	padding-inline: var(--ge-rand);
	list-style: none;
	width: max-content;
	will-change: transform;
}

@media (min-width: 1100px) {
	.ge-hat-leiste .ge-pin__spur {
		padding-inline-start: var(--ge-leiste-platz);
	}
}

/* Rueckfall: normales Querscrollen */
.ge-pin--frei .ge-pin__buehne {
	position: static;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: var(--ge-rand);
}

.ge-pin--frei .ge-fall {
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.ge-pin__buehne {
		position: static;
		overflow-x: auto;
	}

	.ge-pin {
		height: auto !important;
	}

	.ge-pin__spur {
		transform: none !important;
	}
}

/* ===================================================================
 * Detailseite
 * ================================================================= */
.ge-fall__kopfbild {
	width: 100%;
	height: auto;
	margin-block-start: var(--ge-space-l);
	border-radius: var(--ge-radius-flaeche);
}

.ge-daten {
	display: grid;
	gap: 0;
	margin-block-start: var(--ge-space-l);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-daten__zeile {
	display: grid;
	gap: var(--ge-space-2xs);
	padding-block: var(--ge-space-s);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

@media (min-width: 640px) {
	.ge-daten__zeile {
		grid-template-columns: 200px 1fr;
		gap: var(--ge-space-l);
		align-items: baseline;
	}
}

.ge-daten__kopf {
	color: var(--ge-text-leise);
}

.ge-fall__abschnitt {
	max-width: var(--ge-zeilenlaenge);
	margin-block-start: var(--ge-space-m);
}

/* Weiter zur naechsten Referenz */
.ge-weiter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
	padding-block-start: var(--ge-space-m);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-weiter__posten {
	display: grid;
	gap: var(--ge-space-3xs);
}

.ge-weiter__name {
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: var(--ge-h3);
	letter-spacing: var(--ge-laufweite-display);
}