/* LPS Parallax — vollbreites Bildband. Das Bild ist höher als das Band und
   wird von parallax.js beim Scrollen gegenläufig verschoben, läuft also
   langsamer als die Seite. Ohne JS (oder bei reduzierter Bewegung) steht es
   als gewöhnliches Deckbild. --parallax-overlay, --parallax-reach und
   --parallax-focus setzt das Modul am Abschnitt. */

.parallax {
	--parallax-overlay: .35;
	--parallax-reach: 18%;
	--parallax-focus: 50% 50%;
	--parallax-min: 26rem;
	--parallax-h: 64svh;
	--parallax-max: 46rem;
	--parallax-pad: clamp(3rem, 8vh, 5rem);

	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	height: clamp(var(--parallax-min), var(--parallax-h), var(--parallax-max));
	overflow: hidden;
	background-color: var(--color-ink, #191a1c);
	color: #fff;
	/* Die Einsatzfelder darunter haben oben keinen Abstand (sie hingen bisher
	   am Fuß des Welcome-Textes) — das Band bringt ihn deshalb selbst mit. */
	margin-block-end: 4rem;
}

.parallax--kurz { --parallax-h: 48svh; --parallax-max: 36rem; }
.parallax--hoch { --parallax-h: 82svh; --parallax-max: 56rem; }

@media (min-width: 1280px) {
	.parallax { margin-block-end: 5rem; }
}

.parallax__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.parallax__media picture { display: contents; }

.parallax__image {
	position: absolute;
	left: 0;
	top: calc(-1 * var(--parallax-reach));
	width: 100%;
	height: calc(100% + 2 * var(--parallax-reach));
	object-fit: cover;
	object-position: var(--parallax-focus);
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	will-change: transform;
}

.parallax__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgb(25 26 28 / .55), rgb(25 26 28 / 0) 45%),
		rgb(25 26 28 / var(--parallax-overlay));
}

.parallax__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--parallax-pad);
}

.parallax__content {
	display: grid;
	gap: 1.25rem;
	justify-items: center;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.parallax--start .parallax__content {
	justify-items: start;
	margin-inline: 0;
	text-align: start;
}

.parallax__eyebrow {
	margin: 0;
	font-family: var(--font-sans, inherit);
	font-size: var(--text-meta, 1rem);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-red-bright, #f2594e);
}

.parallax__title {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-size: min(calc(var(--type-unit, 1rem) * 4.5), 11vw);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
	text-shadow: 0 2px 28px rgb(0 0 0 / .4);
}

.parallax__title em {
	font-style: normal;
	color: var(--color-red-bright, #f2594e);
}

.parallax__text {
	margin: 0;
	max-width: 38rem;
	font-size: var(--text-lead, 1.125rem);
	line-height: 1.5;
	text-wrap: pretty;
	text-shadow: 0 1px 14px rgb(0 0 0 / .45);
}

.parallax__cta { margin-block-start: .5rem; }

/* Auftritt des Textes, sobald das Band ins Bild kommt (Klasse von parallax.js) */
.parallax--js .parallax__content {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity .8s ease-out, transform .8s ease-out;
}

.parallax--js.is-inview .parallax__content {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.parallax__image {
		top: 0;
		height: 100%;
		transform: none !important;
		will-change: auto;
	}

	.parallax--js .parallax__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
}