/* Startbild: stehende Bühne, darüber Titel; die Szene setzt sich beim Scrollen zusammen. */

.start {
	position: relative;
	height: 180vh;
	background: var(--papier);
}

.start__buehne {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.start__szene,
.start__szene svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* startbild.js rückt die Zeichnung nach unten, wenn Hügel oder Denkmal in den Text ragen (niedrige Fenster) */
.start__szene {
	transform: translateY(var(--szene-versatz, 0px));
}

.start__text {
	position: relative;
	z-index: 2;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin: 0 auto;
	padding: calc(var(--kopf-hoehe) + clamp(24px, 6vh, 72px)) var(--rand) 0;
}

/* Schriftgrößen auch nach der Fensterhöhe (min mit vh, Auftraggeber 11.11.2026): In niedrigen Fenstern
   (Laptop mit Browserleisten) stand die Unterzeile sonst über Waldrand und Denkmal. Hohe Fenster unverändert.
   v0.1.26 rund 15 % kleiner (Auftraggeber: oben zu viel Text). */
.start__titel {
	max-width: 13em;
	font-size: clamp(2rem, min(1.2rem + 3.6vw, 8vh), 4.6rem);
	color: var(--anthrazit);
}

.start__wort {
	display: inline-block;
	color: var(--wein);
	text-shadow: var(--lichthof);
	animation: wort-herein 0.9s var(--weich) both;
	animation-delay: calc(0.25s + var(--i) * 0.18s);
}

.start__wort::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: -0.1em; /* dicht unter dem Wort (Auftraggeber); die Worte haben keine Unterlängen */
	background: var(--gold);
	transform-origin: left;
	animation: unterstrich 0.8s var(--weich) both;
	animation-delay: calc(0.7s + var(--i) * 0.18s);
}

@keyframes wort-herein {
	from {
		opacity: 0;
		transform: translateY(0.4em);
	}
}

@keyframes unterstrich {
	from {
		transform: scaleX(0);
	}
}

.start__unterzeile {
	max-width: 34em;
	color: var(--text-leise);
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
}

/* Heller Lichthof um kleine Schrift, falls sie doch einmal über der Zeichnung steht */
.start__text .vorzeile,
.start__unterzeile {
	text-shadow: 0 0 6px var(--papier), 0 0 14px var(--papier), 0 0 22px var(--papier);
}

/* Logo „WITTICKE · dein-bauprojekt.com“ mit Bagger statt der früheren Startknöpfe (Auftraggeber 11.11.2026).
   Steht vor dem Querformat-Block, damit dessen Maße gewinnen (in v0.1.24 begrenzte diese Regel es auf 480 px). */
.start__logo {
	max-width: 420px;
	margin: 14px 0 0;
}

.start__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Breite Bildschirme: Titel mit der Unterzeile direkt darunter links, Logo rechts daneben – der Textblock
   bleibt flach und steht über freiem Himmel. Die Unterzeile hängt auf allen Größen am Titel (Auftraggeber,
   10.11.2026; vorher Schriftband über den Hügeln, das je nach Bildschirm woanders stand). */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
	.start__text {
		display: grid;
		/* Textspalte so breit wie ihr Inhalt (höchstens 64 %), der Rest gehört dem Logo */
		grid-template-columns: fit-content(64%) minmax(0, 1fr);
		--spalten-abstand: clamp(32px, 4vw, 72px);
		column-gap: var(--spalten-abstand);
		align-items: end;
		padding-top: calc(var(--kopf-hoehe) + clamp(16px, 4vh, 48px));
	}

	.start__text .vorzeile {
		grid-column: 1;
		grid-row: 1;
	}

	.start__titel {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
		margin: 0;
		font-size: clamp(1.9rem, min(1rem + 2.45vw, 6vh), 3.3rem);
	}

	/* Umbruch nach „in“: Die drei Worte bleiben zusammen, auch wenn der kleinere Titel mehr in eine Zeile ließe */
	.start__titel-vor {
		display: block;
	}

	.start__unterzeile {
		grid-column: 1;
		grid-row: 3;
		max-width: 30em;
		margin: 0.7em 0 0;
		font-size: clamp(1rem, min(1rem + 0.35vw, 2.8vh), 1.3rem);
	}

	/* Oben bei der Vorzeile (Abstand zum Denkmal), rechts bündig. v0.1.26 wieder kleiner (Auftraggeber: oben zu
	   viel Text; v0.1.25 reichte es in Spaltenabstand und Seitenrand): höchstens 440 px, in niedrigen Fenstern
	   70 % der Fensterhöhe. startbild_test.mjs prüft Zeilen und Denkmal. */
	.start__logo {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		justify-self: end;
		width: 100%;
		max-width: min(440px, 70vh);
		margin: 0;
	}
}

.start__abschluss {
	position: absolute;
	inset: calc(var(--kopf-hoehe) + 2.5vh) var(--rand) auto;
	z-index: 2;
	margin: 0;
	opacity: 0;
	color: var(--wein);
	font-family: var(--schrift-titel);
	font-size: clamp(2rem, 1.2rem + 3.6vw, 4.6rem);
	font-style: italic;
	font-weight: 600;
	text-align: center;
	text-shadow: var(--lichthof);
	pointer-events: none;
}

.start__hinweis {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 2;
	padding: 6px 14px;
	border-radius: 4px;
	background: rgba(250, 248, 244, 0.9);
	color: var(--text-leise);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transform: translateX(-50%);
	animation: schweben 2.4s ease-in-out infinite;
}

@keyframes schweben {
	50% {
		transform: translate(-50%, 6px);
	}
}

@media (max-width: 760px) {
	.start__titel {
		font-size: clamp(1.8rem, min(1.05rem + 5.4vw, 4.6vh), 2.6rem);
	}

	.start__unterzeile {
		font-size: 1.05rem;
	}
}

/* Niedrige Handys (z. B. 360 × 740 mit Browserleisten): Der Titel bleibt vierzeilig, deshalb engere Abstände,
   damit das Logo über dem Waldrand bleibt (startbild_test.mjs, 11.11.2026) */
@media (max-width: 760px) and (max-height: 760px) {
	.start__text {
		padding-top: calc(var(--kopf-hoehe) + 16px);
	}

	.start__titel {
		margin-bottom: 0.35em;
	}

	.start__unterzeile {
		margin-bottom: 0.6em;
	}
}