/* Kopie aus proben/final-3, unverändert. Richtung 3, Fassung 3 in der Abfolge von proben/final. basis.css und abschnitte.css sind unverändert kopiert,
   hier steht nur, was die neue Abfolge braucht: Leistungen im Vorgehen, Kundenstimmen ohne Aufruf, Einstieg mit
   Preis, FAQ in Gruppen und der Schluss mit Ansprechperson. */

/* Vorgehen und Leistungen als ein Kapitel: die acht Leistungen folgen direkt auf die drei Schritte, je Leistung
   steht der Schritt neben der Nummer */

.vorgehen__leistungen {
	margin-top: clamp(4rem, 8vw, 6.5rem);
}

.vorgehen__unter {
	margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
	font-family: var(--schrift-gross);
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: var(--gross-gewicht);
	letter-spacing: var(--gross-spur);
	line-height: 1.05;
}

/* Zeichen der Leistungen nach Comp A (proben/final-3/zeichen/): die Warum-Grafik im Kleinen. Dunkle Kachel, ein
   Feld dünner Linien im Versatz, darauf eine helle Route mit eckigen Wegpunkten und dem grünen Punkt als Ziel.
   Die Striche skalieren nicht mit, damit sie in jeder Größe so dünn bleiben wie in der Warum-Grafik. */

.vorgehen__leistungen .leistung {
	grid-template-columns: clamp(6rem, 9vw, 8rem) minmax(0, 1fr);
}

.vorgehen__leistungen .leistung__motiv {
	overflow: hidden;
	border-radius: var(--ecke-motiv);
	background: var(--wald);
}

.z {
	display: block;
	width: 100%;
	height: 100%;
}

.z polyline {
	fill: none;
	stroke-linecap: square;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
}

.z-feld {
	stroke: var(--wald-80);
	stroke-width: 0.0625rem;
}

.z-route {
	stroke: var(--gruen-40);
	stroke-width: 0.15625rem;
}

.z-wegpunkt {
	fill: var(--wald);
	stroke: var(--gruen-40);
	stroke-width: 0.125rem;
	vector-effect: non-scaling-stroke;
}

.z-ziel {
	fill: var(--gruen);
}

.leistung h4 {
	grid-column: 2;
	margin: 0;
	color: var(--wald);
	font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
}

.leistung__schritt {
	margin-left: 0.75rem;
	color: var(--wald-80);
	font-family: var(--schrift-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	vertical-align: 0.4em;
}

/* Kundenstimmen: das dunkle Band endet nach den Stimmen, der Aufruf steht jetzt im Schluss */

.stimme {
	padding-bottom: var(--abstand);
}

/* Einstieg mit Preis: weiße Kachel, links Angebot und Knopf, rechts die zwei Preise groß */

.start {
	padding-top: var(--abstand);
}

.start__block {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
	align-items: end;
	padding: clamp(2rem, 5vw, 4.5rem);
}

.start__titel {
	max-width: 40rem;
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	text-wrap: balance;
}

.start__text {
	max-width: 36rem;
	margin-top: 1.5rem;
}

.start__knopf {
	margin-top: 2rem;
}

.start__preise {
	display: grid;
	gap: 1.75rem;
	margin: 0;
}

.start__preise div {
	padding-top: 1.25rem;
	border-top: 0.0625rem solid var(--wald-20);
}

.start__preise dt {
	color: var(--wald);
	font-family: var(--schrift-gross);
	font-size: clamp(2.5rem, 4.6vw, 4rem);
	font-weight: var(--gross-gewicht);
	letter-spacing: var(--gross-spur);
	line-height: 1;
}

.start__preise dd {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* FAQ in drei Gruppen, je Gruppe ein Etikett über der Liste */

.faq__gruppen {
	display: grid;
	gap: clamp(2.5rem, 4vw, 3.5rem);
}

.faq__gruppe-titel {
	margin-bottom: 0.5rem;
}

/* Schluss: die grüne Kachel mit Claim und Motiv, darunter drei Schritte nach der Anfrage, die Ansprechperson und
   der letzte Knopf */

.schluss {
	padding-bottom: var(--abstand);
}

.schluss .ruf {
	margin-top: 0;
}

.ruf__schritte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 2rem 0 0;
	border-top: 0.0625rem solid var(--wald);
	list-style: none;
}

.ruf__nr {
	display: block;
	margin-bottom: 0.875rem;
	color: var(--wald);
	font-family: var(--schrift-gross);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	letter-spacing: var(--gross-spur);
	line-height: 1;
}

.ruf__schritte p {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ruf__schritte strong {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 1.0625rem;
}

.ruf__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 0.0625rem solid var(--wald);
}

.ruf__person {
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 0.9375rem;
	line-height: 1.45;
}

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

.ruf__person strong {
	display: block;
	font-size: 1.0625rem;
}

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

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

	.leistung h4 {
		align-self: start;
	}

	.vorgehen__leistungen .leistung {
		grid-template-columns: 5rem minmax(0, 1fr);
	}
}