/*
 * Finale Fassung Richtung 2 in der Abfolge von Richtung 1 (proben/final): Lage, Kette, Vorgehen mit
 * Leistungen, Kundenstimmen, Einstieg mit Preis, Warum mit Video, FAQ, Schluss. Texte unverändert aus
 * final-2. Hier nur, was die neue Abfolge an Übergängen braucht.
 */

/* Vorgehen und Leistungen lesen sich als ein Kapitel: Die drei Schritte führen direkt zu den
   Bausteinen, die nach denselben drei Schritten gruppiert sind. */
#vorgehen {
	padding-bottom: calc(var(--abstand) / 2);
}

#leistungen {
	padding-top: calc(var(--abstand) / 2);
	border-top: 0;
}

/* Einstieg mit Preis auf hellem Grund: der Punkt, an dem aus Lesen Anfragen wird. Nach den
   Kundenstimmen hebt er sich ab, ohne ein weiteres dunkles Band neben dem Schluss. */
.einstieg {
	border-top: 0;
	background: var(--hell);
	box-shadow: 0 0 0 100vmax var(--hell);
	clip-path: inset(0 -100vmax);
}

#warum {
	padding-bottom: calc(var(--abstand) / 2);
	border-top: 0;
}

/* Comp V3 „Paar im Inhalt“ (.impeccable/mocks/warum-2/): Fotopaar zwischen Titel und Punkten,
   Knopf „Mehr über uns“ darunter; die Etikettspalte bleibt wie in den anderen Abschnitten frei */

.warum__bilder {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 1rem;
	margin-top: 3rem;
}

.warum__bilder img {
	width: 100%;
	height: clamp(14rem, 24vw, 22rem);
	border-radius: 0.5rem;
	object-fit: cover;
}

.warum__bilder img + img {
	object-position: 60% 40%;
}

.warum__knopf {
	margin-top: 3rem;
}

@media (max-width: 40rem) {
	.warum__bilder {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.warum__bilder img {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* Warum und Video als ein Kapitel wie in Richtung 1: das Video vertieft die Abgrenzung */
.video {
	padding-top: 0;
	background: none;
}

.video__innen {
	padding-top: calc(var(--abstand) / 2);
	border-top: 0.0625rem solid var(--linie);
}

/* Video-Standbild in Originalfarben */
.video__vorschau img {
	filter: none;
}

.video__vorschau::after {
	content: none;
}