/* ═══ Baustein Hero ═════════════════════════════════════════
   Vorbild: 03_Design/final/idee-stimme-b.html

   Das Bild traegt, die Schrift liegt drin. Ein Verlauf ueber die
   ganze Hoehe: oben ein Band fuer die weisse Kopfzeile, unten
   kraeftig fuer Ueberschrift, Vorspann und Adresse. Die Schrift
   steht nur dort, wo der Verlauf mindestens 62 Prozent deckt. Die
   Referenz hat oben .34; gemessen lag die Navigation damit bei 3,6
   zu 1 ueber Schnee und Himmel. Die obersten acht Prozent tragen
   deshalb .62, das ist die Hoehe der Kopfzeile.

   Der Hero beginnt am oberen Fensterrand. Die feste Kopfzeile
   liegt weiss darauf, siehe layout.css, kopf-im-bild.
   ═══════════════════════════════════════════════════════════ */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(34rem, 92svh, 58rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: var(--s7);
	color: var(--we);
	background: var(--pa2);
}

/* Ohne diese Zeile schrumpft der Satzspiegel als Flex-Element auf
   die Breite seines laengsten Wortes. */
.hero > .w { width: 100%; }

.hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Tief angesetzt: das Haus bleibt im Bild, der Himmel nicht. */
	object-position: center 78%;
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(10, 11, 13, .66) 0%,
		rgba(10, 11, 13, .62) 8%,
		rgba(10, 11, 13, 0) 32%,
		rgba(10, 11, 13, 0) 46%,
		rgba(10, 11, 13, .62) 72%,
		rgba(10, 11, 13, .9) 100%);
}

.hero h1 {
	font-size: var(--t-d1);
	max-width: 12ch;
	text-shadow: 0 .0625rem 3rem rgba(0, 0, 0, .28);
}

.hero__unten {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s6);
	margin-top: var(--s5);
}

.hero .lead {
	max-width: 38ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}

.hero__adr {
	font-size: .75rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .66);
	white-space: nowrap;
}

@media (max-width: 61.25rem) {
	.hero {
		min-height: clamp(30rem, 88svh, 44rem);
		padding-block: var(--s5);
	}
	.hero h1 { max-width: none; }
	.hero__unten {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s3);
	}
}