/*
 * Finale Fassung: Abfolge nach dem UX-Review vom 04.11.2026
 * (reviews/2026-11-04-abfolge-klar-nuechtern.md, zweiter Durchlauf).
 * Der Einstieg „Auswahl“ steht in final.css, basis.css und abschnitte.css sind unverändert.
 * Hier steht nur, was die neue Abfolge braucht: Kopf bleibt stehen, Ergebniskette
 * auf hellem Grund, Vorgehen und Leistungen in einer Section, Einstieg mit Preis,
 * Kundenstimme groß, Video im Abschnitt „Warum“, FAQ in Gruppen, Schlussband mit
 * Ansprechperson und den drei Schritten nach der Anfrage.
 */

[id] {
	scroll-margin-top: 6rem;
}

.start a:focus-visible,
.fuss a:focus-visible {
	outline-color: var(--weiss);
}

/* Kopf: Navigationslinks mit voller Klickhöhe */

.kopf__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* Fuß: Links als Touch-Ziele */

.fuss nav {
	gap: 0;
}

.fuss nav a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

.fuss__zeile {
	align-items: center;
}

.fuss__zeile a {
	display: inline-block;
	padding-block: 0.75rem;
}

/* Kopf bleibt stehen, damit „Anfragen“ auf jedem Bildschirm erreichbar ist */

.kopf {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* Ergebniskette: direkt nach der dunklen Ausgangslage, deshalb auf hellem Grund */

.kette .nummer {
	color: var(--wald-80);
}

.kette__glieder li {
	border-left-color: var(--linie);
}

.kette__zahl {
	color: var(--wald);
}

.kette .quelle {
	color: var(--wald-80);
	opacity: 1;
}

/* Quelle noch nicht belegt: als offen markiert, wie in Fassung E */

.quelle--offen {
	padding: 0 0.375rem;
	border: 0.0625rem dashed var(--wald-80);
}

@media (max-width: 56rem) {
	.kette__glieder li,
	.kette__glieder li:first-child {
		border-top-color: var(--linie);
	}
}

/*
 * Vorgehen und Leistungen (Comp D2 „Drei Spalten“, .impeccable/mocks/vorgehen/, Review
 * reviews/2026-11-04-vorgehen-comps.md): die drei Schritte nebeneinander, jede Leistung klappt
 * in ihrer Spalte auf. Der Volltext steht im HTML und bleibt für Suche und KI-Systeme lesbar.
 */

/* Kopf wie die übrigen Sections einspaltig, die Einleitung als Lead direkt unter der Überschrift */

.vorgehen .abschnitt__kopf p {
	max-width: 42rem;
	margin-top: 1.25rem;
	font-size: 1.1875rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.schritte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem clamp(2rem, 4vw, 4rem);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.schritt {
	padding-top: 1.75rem;
	border-top: 0.125rem solid var(--tinte);
}

/* Versatz-Icon als Haltepunkt des Schritts, nur hier auf der Seite (Set E, Kopien in icons/) */

.schritt__kopf .e-icon {
	display: block;
	width: 5rem;
	height: auto;
	margin: 0 0 1.25rem -0.75rem;
}

.schritt__kopf .nummer {
	margin-bottom: 0.375rem;
}

.schritt__kopf h3 {
	font-size: 1.5rem;
}

.schritt__kopf p {
	margin-top: 0.75rem;
	font-size: 1rem;
}

/* Leistungen: Register mit Haarlinien, Titel als Schalter, Text klappt darunter auf */

.schritt__leistungen {
	margin: 2rem 0 0;
	padding: 0;
	border-top: 0.0625rem solid var(--wald-20);
	list-style: none;
}

.leistung {
	border-bottom: 0.0625rem solid var(--wald-20);
}

.leistung summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	min-height: 3.5rem;
	padding-block: 0.875rem;
	list-style: none;
	cursor: pointer;
}

.leistung summary::-webkit-details-marker {
	display: none;
}

.leistung summary::after {
	content: "+";
	color: var(--wald-80);
	font-family: var(--schrift-titel);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
}

.leistung details[open] > summary::after {
	content: "–";
}

.leistung h4 {
	margin: 0;
	color: var(--tinte);
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-wrap: pretty;
}

.leistung summary:hover h4 {
	text-decoration: underline;
	text-decoration-thickness: 0.0625rem;
	text-underline-offset: 0.3em;
}

.leistung__text {
	padding-bottom: 1.5rem;
}

.leistung__text p,
.leistung__text li {
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.leistung__text > * + * {
	margin-top: 0.75rem;
}

/* Zwischentitel, wo die Live-Seite eine Liste oder einen Exkurs hat */

.leistung__text .leistung__zwischen {
	margin-top: 1.25rem;
	color: var(--tinte);
	font-family: var(--schrift-titel);
	font-size: 0.875rem;
	font-weight: 600;
}

.leistung__text .leistung__zwischen + * {
	margin-top: 0.375rem;
}

.leistung__punkte {
	margin-bottom: 0;
	padding-left: 1.125rem;
}

@media (max-width: 56rem) {
	.vorgehen .abschnitt__kopf p {
		font-size: 1.0625rem;
	}

	.schritte {
		grid-template-columns: minmax(0, 1fr);
	}

	.schritt__kopf .e-icon {
		width: 4.5rem;
	}
}

/* Kundenstimmen: die Stimme zum Audit groß, direkt vor dem Einstieg */

.stimme h2 {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.stimme__haupt {
	max-width: 52rem;
	margin: 0 0 clamp(3rem, 5vw, 4rem);
}

.stimme__haupt blockquote {
	margin: 0 0 1.75rem;
}

.stimme__haupt blockquote p {
	color: var(--tinte);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.45;
}

.stimme__haupt figcaption {
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 1rem;
	line-height: 1.4;
}

.stimme__haupt img {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.stimme__haupt strong {
	display: block;
	color: var(--tinte);
	font-weight: 600;
}

.stimme__weitere {
	max-width: 62rem;
}

/* Einstieg mit Preis, direkt nach den Kundenstimmen */

.start {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--wald);
	color: var(--wald-20);
}

.start__raster {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.75rem 4rem;
	align-items: center;
}

.start h2 {
	color: var(--weiss);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.start p {
	max-width: 44rem;
	margin-top: 0.75rem;
}

@media (max-width: 56rem) {
	.start__raster {
		grid-template-columns: 1fr;
	}

	.start .knopf {
		justify-self: start;
	}
}

/* Warum: Texte beginnen auf einer Höhe, das Video gehört zu „Erfahrung aus erster Hand“ */

/* Comp W2 „Paar“ (.impeccable/mocks/warum/): Knopf neben dem Titel, Fotopaar vor den vier Punkten */

.warum__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	align-items: end;
	justify-content: space-between;
	max-width: none;
}

.warum__kopf h2 {
	max-width: 46rem;
}

.warum__kopf .knopf {
	flex-shrink: 0;
}

.warum__bilder {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 1rem;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.warum__bilder img {
	width: 100%;
	height: clamp(16rem, 30vw, 27rem);
	object-fit: cover;
}

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

.warum__raster {
	grid-template-rows: auto auto;
	row-gap: 0;
}

.warum__raster article {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0.75rem;
}

.warum__raster h3 {
	margin-bottom: 0;
}

.warum__video {
	margin-top: clamp(3.5rem, 7vw, 6rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 0.0625rem solid var(--linie);
}

.warum__video-titel {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.video__start {
	background: var(--wald);
	color: var(--weiss);
}

.video__start::before {
	border-left-color: var(--weiss);
}

.video__vorschau:hover .video__start {
	background: var(--wald-80);
}

@media (max-width: 64rem) {
	.warum__raster {
		row-gap: 2.5rem;
	}
}

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

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

/* FAQ in drei Gruppen, vor dem Schlussband */

.faq h2 {
	position: sticky;
	top: 7rem;
	align-self: start;
}

.faq__gruppe + .faq__gruppe {
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

/* Zwei klar getrennte Ebenen: Gruppentitel als Montserrat mit kräftiger Oberkante
   (wie Vorgehen und „Warum“), Fragen in der Textschrift, Antworten leiser */

.faq__gruppe h3 {
	margin-bottom: 0.5rem;
	padding-top: 1.25rem;
	border-top: 0.125rem solid var(--tinte);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.faq__gruppe details:first-child {
	border-top: 0;
}

.faq summary {
	padding-block: 1.125rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.45;
	text-wrap: pretty;
}

.faq summary::after {
	top: 0.875rem;
	color: var(--wald-80);
}

.faq details p {
	max-width: 36rem;
}

@media (max-width: 56rem) {
	.faq h2 {
		position: static;
	}
}

/* Schlussband: Ansprechperson und die drei Schritte nach der Anfrage */

/* Raster: oben Claim und Schritte, unten Person und Knopf auf einer Linie. Mobil: Claim, Schritte, Person, Knopf */

.ruf__raster {
	grid-template-areas:
		"claim schritte"
		"person knopf";
	row-gap: 3rem;
	align-items: start;
}

.ruf__claim {
	grid-area: claim;
}

.ruf__schritte {
	grid-area: schritte;
}

.ruf__person {
	display: flex;
	grid-area: person;
	gap: 1rem;
	align-items: center;
	align-self: center;
}

.ruf__knopf {
	grid-area: knopf;
	align-self: center;
	justify-self: start;
}

@media (max-width: 56rem) {
	.ruf__raster {
		grid-template-areas:
			"claim"
			"schritte"
			"person"
			"knopf";
		row-gap: 2.5rem;
	}

	.ruf__knopf {
		margin-top: -1rem;
	}
}

.ruf__bild {
	flex: none;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: 58% 22%;
}

.ruf__person p {
	font-size: 1rem;
	line-height: 1.4;
}

.ruf__person strong {
	display: block;
	font-family: var(--schrift-titel);
	font-size: 1.125rem;
	font-weight: 700;
}

/* Schritte nach der Anfrage als Register: Nummer, Titel, eine Zeile, getrennt durch Haarlinien wie in der FAQ (Comp S1) */

.ruf__schritte {
	margin: 0;
	padding: 0;
	border-top: 0.0625rem solid rgb(17 42 40 / 0.25);
	list-style: none;
}

.ruf__schritte li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: baseline;
	padding-block: 1.125rem;
	border-bottom: 0.0625rem solid rgb(17 42 40 / 0.25);
}

.ruf__schritte .nummer {
	color: var(--wald);
}

.ruf__schritte p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}

.ruf__schritte strong {
	display: block;
	margin-bottom: 0.125rem;
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	font-weight: 600;
}