.pe-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 78vh, 760px);
	overflow: hidden;
}

.pe-hero__media { position: absolute; inset: 0; }

.pe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Hero-Bereich ist breiter als 16:9, das Bild wird also zusätzlich
	   oben und unten beschnitten. Standardmäßig mittig — Motive, deren
	   Wichtiges am oberen Rand sitzt (Köpfe), setzen --hero-fokus auf 0%. */
	object-position: 50% var(--hero-fokus, 50%);
}

.pe-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--overlay-media);
}

.pe-hero__inner {
	position: relative;
	width: 100%;
	padding-block: var(--space-3xl) var(--space-2xl);
}

.pe-hero__content { max-width: 720px; }

.pe-hero__title { font-size: clamp(38px, 7vw, var(--text-hero)); }

/* 60ch hält die Zeilen lesbar, ohne die Spalte schmaler zu machen — die
   Leads tragen seit den Kundentexten deutlich mehr Zeichen. */
.pe-hero__lead { margin-top: var(--space-md); max-width: 60ch; color: var(--color-cream); }

.pe-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.pe-hero__hinweis {
	margin-top: var(--space-md);
	max-width: 60ch;
	font-size: var(--text-small);
	color: var(--color-cream-dim);
}

.pe-hero__hinweis a { color: var(--color-cream); text-underline-offset: 3px; }

@media (max-width: 640px) {
	.pe-hero { min-height: 78vh; }
	.pe-hero__actions .pe-btn { flex: 1 1 100%; }

	/* Die Leads der Kundentexte laufen hier über zehn Zeilen und schieben
	   die Knöpfe aus dem Bild. Eine Stufe kleiner und enger geführt holt
	   sie zurück, ohne den Text zu kürzen. */
	.pe-hero__lead {
		font-size: var(--text-body);
		line-height: var(--lh-normal);
	}

	.pe-hero__actions { margin-top: var(--space-lg); }
}