/**
 * Sektion: Hero
 *
 * Musterfläche (Akzent wählbar) + optionales Bild + Titel als schwarzes,
 * gerissenes Label. Der Titel ist immer die H1 der Seite.
 *
 * Bildmodus (Feld „Bilddarstellung“):
 *   cover / cover-top / cover-bottom  Bild füllt die Fläche
 *   contain                          Freisteller steht auf der Unterkante
 *
 * Titelposition (Feld „Titelposition“):
 *   center  Label vertikal mittig
 *   top     Label sitzt weiter oben, Bildmotiv bleibt sichtbar
 */
.hero {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-inline: var(--gutter);
	min-block-size: clamp(28rem, 38vw, 48rem);
	overflow: hidden;
	padding: var(--space-10) var(--space-6);
}

.hero--title-top {
	align-items: flex-start;
	padding-block-start: var(--space-12);
}

.hero__media {
	inset: 0;
	position: absolute;
	z-index: 0;
}

.hero__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	object-position: center;
}

.hero--image-cover-top .hero__media img { object-position: center top; }
.hero--image-cover-bottom .hero__media img { object-position: center bottom; }
.hero--image-contain .hero__media img {
	object-fit: contain;
	object-position: center bottom;
}

.hero__title {
	background: var(--color-ink-900);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: var(--color-paper);
	font-family: var(--font-family-display);
	font-size: var(--font-size-display);
	letter-spacing: -0.06em;
	line-height: var(--line-height-display);
	-webkit-mask: var(--mask-paper-label) center / 100% 100% no-repeat;
	mask: var(--mask-paper-label) center / 100% 100% no-repeat;
	max-inline-size: min(80%, 52rem);
	padding: 0.5em 0.8em;
	position: relative;
	rotate: -2deg;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	z-index: 1;
}

/* Einstieg: Label „landet“ sanft, Bild blendet ein */
@media (prefers-reduced-motion: no-preference) {
	.hero__title {
		animation: hero-label-in 900ms var(--ease-out) 120ms both;
	}

	.hero__media img {
		animation: hero-media-in 1200ms var(--ease-out) both;
	}
}

@keyframes hero-label-in {
	from {
		opacity: 0;
		rotate: -6deg;
		scale: 0.94;
	}
}

@keyframes hero-media-in {
	from {
		opacity: 0;
		scale: 1.04;
	}
}

@media (max-width: 48.75em) {
	.hero {
		--pattern-size: 32rem;

		margin-inline: 0;
		min-block-size: min(36rem, 170vw);
	}

	.hero--title-top {
		padding-block-start: var(--space-10);
	}

	.hero__title {
		letter-spacing: -0.04em;
		line-height: calc(var(--font-size-display) * 1.05);
		max-inline-size: 94%;
		padding: 0.35em 0.5em;
	}
}