/* Richtung 2 mit gezielten Isometrie-Icons, nach dem UX-Review vom 03.11.2026.
   Icons nur in Ergebniskette und Leistungen, mobiles Menü, Zwischenaufruf, größere Klickflächen im Fuß.
   basis.css und abschnitte.css sind unverändert aus 2-weissraum übernommen. */

/* Ersatzschrift mit den Maßen von Montserrat: Bis die Webschrift geladen ist, bricht die Überschrift
   gleich um wie danach. Sonst wächst der Hero mobil beim Schriftwechsel um eine Zeile und verschiebt die Seite. */

@font-face {
	font-family: "Montserrat Ersatz";
	src: local("Arial"), local("Helvetica");
	size-adjust: 114.8%;
	ascent-override: 85.8%;
	descent-override: 22.2%;
	line-gap-override: 0%;
}

/* Breitenverhältnisse gemessen im Browser: Montserrat 500 ist 14,8 %, Schibsted Grotesk 4,3 % breiter als Arial */
@font-face {
	font-family: "Schibsted Ersatz";
	src: local("Arial"), local("Helvetica");
	size-adjust: 104.3%;
}

:root {
	--schrift-titel: "Montserrat", "Montserrat Ersatz", Arial, sans-serif;
	--schrift-text: "Schibsted Grotesk", "Schibsted Ersatz", Arial, sans-serif;
}

.unsichtbar {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

::selection {
	background: var(--gruen);
	color: var(--weiss);
}

/* Warum: ohne Symbole, der Titel trägt */

.warum h3 {
	margin-top: 0;
}

.warum article {
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--linie);
}

/* Isometrische Icons */

.iso {
	width: 4.5rem;
	height: 4.5rem;
}

/* Ergebniskette */

.kette__karten .iso {
	width: 5.5rem;
	height: 5.5rem;
	margin: -1rem 0 0 -0.75rem;
}

.kette__karten .kette__schritt {
	margin-top: 1.25rem;
}

/* Leistungen: Icon links neben Titel und Text, ohne Nummer */

.leistungen > li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0 2rem;
	align-items: start;
}

.leistungen > li::before {
	display: none;
}

.leistungen .iso {
	grid-row: 1 / span 2;
	margin-top: -0.75rem;
}

.leistungen h4,
.leistung__text {
	grid-column: 2;
}

/* Leistungen gekürzt: Kernaussage sichtbar, der Rest hinter „Mehr dazu“, bleibt im HTML */

.leistung__mehr summary {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wald);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

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

.leistung__mehr summary::after {
	content: "+";
	color: var(--wald-60);
	font-family: var(--schrift-mono);
	font-size: 1.125rem;
	line-height: 1;
}

.leistung__mehr[open] summary::after {
	content: "−";
}

.leistung__mehr summary:hover {
	color: var(--wald-80);
}

.leistung__mehr summary:focus-visible {
	outline: 0.125rem solid var(--gruen);
	outline-offset: 0.25rem;
}

.leistung__mehr > * + * {
	margin-top: 0.875rem;
}

.leistung__mehr > summary + * {
	margin-top: 0.25rem;
}

.leistung__text > .leistung__mehr {
	margin-top: 0.25rem;
}

/* Zwischenaufruf nach den Leistungen */

.zwischenruf {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
	padding-top: 2.5rem;
	border-top: 0.0625rem solid var(--wald-20);
}

.zwischenruf p {
	max-width: 26rem;
	color: var(--wald);
	font-family: var(--schrift-titel);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

/* Mobiles Menü: auf breiten Bildschirmen ausgeblendet */

.kopf {
	position: relative;
	z-index: 2;
}

.menue {
	display: none;
}

.menue__knopf {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 3rem;
	padding: 0.75rem 1.125rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.45);
	border-radius: 999rem;
	color: var(--weiss);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.menue__knopf::-webkit-details-marker {
	display: none;
}

.menue__knopf:hover {
	border-color: var(--weiss);
}

.menue__knopf:focus-visible {
	outline: 0.125rem solid var(--gruen);
	outline-offset: 0.25rem;
}

/* Zwei Striche, offen ein Kreuz */
.menue__striche {
	position: relative;
	width: 1rem;
	height: 0.625rem;
}

.menue__striche::before,
.menue__striche::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.0625rem;
	background: currentColor;
}

.menue__striche::before {
	top: 0;
}

.menue__striche::after {
	bottom: 0;
}

.menue[open] .menue__striche::before {
	top: 50%;
	rotate: 45deg;
}

.menue[open] .menue__striche::after {
	bottom: auto;
	top: 50%;
	rotate: -45deg;
}

.menue__zu,
.menue[open] .menue__auf {
	display: none;
}

.menue[open] .menue__zu {
	display: inline;
}

.menue__feld {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 0.5rem var(--rand) 2rem;
	background: var(--wald);
	box-shadow: 0 1.5rem 2.5rem -1rem rgba(17, 42, 40, 0.6);
}

.menue__feld a:not(.knopf) {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.16);
	color: var(--weiss);
	font-family: var(--schrift-titel);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	text-decoration: none;
}

.menue__feld a:not(.knopf):hover {
	color: var(--wald-20);
}

.menue__feld .knopf {
	align-self: flex-start;
	margin: 1.75rem 0 0;
}

/* Offen: Kopfzeile und Feld bilden eine Fläche */
.kopf:has(.menue[open]) {
	background: var(--wald);
}

@media (max-width: 56rem) {
	.kopf__ruf {
		display: none;
	}

	.menue {
		display: block;
		margin-left: auto;
	}
}

/* Fuß: Links mit Klickfläche von mindestens 2,75 rem */

.fuss nav {
	gap: 0;
}

.fuss nav .etikett {
	margin-bottom: 0.25rem;
}

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

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

/* Mobil */

@media (max-width: 40rem) {
	.iso {
		width: 3.5rem;
		height: 3.5rem;
	}

	.kette__karten .iso {
		width: 4.5rem;
		height: 4.5rem;
		margin: -0.75rem 0 0 -0.5rem;
	}

	/* Icon klein neben dem Titel, Text darunter über die ganze Breite */
	.leistungen > li {
		grid-template-columns: 3rem 1fr;
		gap: 0 1rem;
		align-items: center;
	}

	.leistungen .iso {
		grid-row: 1;
		width: 3rem;
		height: 3rem;
		margin: 0;
	}

	.leistungen h4 {
		grid-column: 2;
	}

	.leistung__text {
		grid-column: 1 / -1;
	}

	.zwischenruf {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Kundenstimmen als Register: Firmen links, ein Zitat rechts, je ein ganzer Satz aus dem Originalzitat. Umschalten über Radio-Buttons, ohne JavaScript.
   Alle Zitate liegen in derselben Rasterzelle, die Höhe richtet sich nach dem längsten, die Seite springt nicht. */

.register__liste {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin: 2.5rem 0 0;
	padding: 0;
	border: 0;
	border-top: 0.0625rem solid var(--linie);
}

.register__liste label {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-height: 3.25rem;
	border-bottom: 0.0625rem solid var(--linie);
	color: var(--wald-80);
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	cursor: pointer;
}

/* Platz für den Punkt, damit die Namen beim Wechsel nicht springen */
.register__liste label::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}

.register__liste label:hover {
	color: var(--wald);
}

.register__liste label:has(input:checked) {
	color: var(--wald);
}

.register__liste label:has(input:checked)::before {
	background: var(--gruen);
}

.register__liste label:has(input:focus-visible) span {
	outline: 0.125rem solid var(--gruen);
	outline-offset: 0.25rem;
}

.register__zitate {
	display: grid;
}

.register__zitat {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	visibility: hidden;
}

.register:has(#stimme-1:checked) .register__zitat:nth-child(1),
.register:has(#stimme-2:checked) .register__zitat:nth-child(2),
.register:has(#stimme-3:checked) .register__zitat:nth-child(3),
.register:has(#stimme-4:checked) .register__zitat:nth-child(4),
.register:has(#stimme-5:checked) .register__zitat:nth-child(5),
.register:has(#stimme-6:checked) .register__zitat:nth-child(6),
.register:has(#stimme-7:checked) .register__zitat:nth-child(7) {
	visibility: visible;
}

.register__zitat blockquote {
	margin: 0;
}

.register__zitat blockquote p {
	color: var(--wald);
	font-family: var(--schrift-titel);
	font-size: clamp(1.375rem, 2.3vw, 1.875rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.register__zitat blockquote p + p {
	margin-top: 0.75rem;
}

.register__zitat figcaption {
	display: flex;
	gap: 1.125rem;
	align-items: center;
	margin-top: 2.25rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.register__zitat figcaption img {
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
}

.register__zitat strong {
	display: block;
	color: var(--wald);
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	font-weight: 500;
}

.register__steuerung {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: auto;
	padding-top: 2rem;
}

.register__zaehler {
	min-width: 3.5rem;
	color: var(--wald);
	font-family: var(--schrift-mono);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.register__pfeil {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0.0625rem solid var(--wald-60);
	color: var(--wald);
	cursor: pointer;
}

.register__pfeil:hover {
	border-color: var(--wald);
}

.register__pfeil svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.register__alle {
	margin-left: auto;
}

/* Tablet und mobil: Firmen als waagrechte Reihe zum Wischen über dem Zitat */
@media (max-width: 56rem) {
	.register {
		grid-template-columns: minmax(0, 1fr);
	}

	.register__liste {
		flex-direction: row;
		gap: 1.5rem;
		margin: 1.5rem calc(-1 * var(--rand)) 0;
		padding-inline: var(--rand);
		overflow-x: auto;
		border-top: 0;
		border-bottom: 0.0625rem solid var(--linie);
		scrollbar-width: none;
	}

	.register__liste label {
		flex: none;
		gap: 0.5rem;
		border-bottom: 0.125rem solid transparent;
		margin-bottom: -0.0625rem;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.register__liste label:has(input:checked) {
		border-bottom-color: var(--wald);
	}

	.register__liste label::before {
		display: none;
	}

	/* Mobil wächst die Höhe mit dem Zitat, sonst stünde unter kurzen Zitaten ein halber Bildschirm leer */
	.register__zitat {
		display: none;
	}

	.register:has(#stimme-1:checked) .register__zitat:nth-child(1),
	.register:has(#stimme-2:checked) .register__zitat:nth-child(2),
	.register:has(#stimme-3:checked) .register__zitat:nth-child(3),
	.register:has(#stimme-4:checked) .register__zitat:nth-child(4),
	.register:has(#stimme-5:checked) .register__zitat:nth-child(5),
	.register:has(#stimme-6:checked) .register__zitat:nth-child(6),
	.register:has(#stimme-7:checked) .register__zitat:nth-child(7) {
		display: flex;
	}

	.register__steuerung {
		flex-wrap: wrap;
		padding-top: 2rem;
	}

	.register__alle {
		flex-basis: 100%;
		margin: 0.75rem 0 0;
	}
}

/* Einstiegspreis im Aufruf, Zahlen aus der FAQ-Antwort „Was kostet eine GEO-Agentur?“ */

.ruf__preis {
	margin-top: 1rem;
	color: var(--wald);
	font-family: var(--schrift-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

/* Fußzeile: Angaben auf einer Linie */

.fuss__zeile {
	align-items: center;
}

/* Textlinks mit Klickhöhe von 2,75 rem, die Unterstreichung bleibt am Text */

.hero__aktionen .text-link,
.video__text .text-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* ---------- Nach der Critique vom 03.11.2026 ---------- */

/* Fokus: auf hellem Grund Deep Forest (Grün auf Weiß hätte nur 2,9:1), auf dunklem Grund Grün */

a:focus-visible,
summary:focus-visible,
.leistung__mehr summary:focus-visible,
.register__liste label:has(input:focus-visible) span {
	outline-color: var(--wald);
}

.hero :focus-visible,
.kette :focus-visible,
.ruf-band :focus-visible,
.menue__feld :focus-visible,
.menue__knopf:focus-visible {
	outline-color: var(--gruen);
}

/* Aufruf nach dem Vorgehen */

.weg__ruf {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: 0.5rem;
}

/* Leistungen in drei Gruppen entlang der Route, Index links bleibt beim Scrollen stehen */

.leistungen__gruppe {
	margin-top: 3.5rem;
}

.leistungen__gruppe .leistungen {
	margin-top: 1rem;
}

.leistungen__phase {
	padding-bottom: 0.75rem;
	border-bottom: 0.0625rem solid var(--wald);
	color: var(--wald);
	font-family: var(--schrift-mono);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.leistungen h4 {
	margin: 0;
	color: var(--wald);
	font-family: var(--schrift-titel);
	font-size: 1.1875rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

.leistungen__gruppe .leistungen > li:first-child {
	border-top: 0;
}

.leistungen__index {
	display: none;
}

@media (min-width: 56.0625rem) {
	.leistungen__seite {
		position: sticky;
		top: 2.5rem;
		align-self: start;
	}

	.leistungen__index {
		display: block;
		max-width: 14rem;
		margin: 2rem 0 0;
		padding: 0;
		border-top: 0.0625rem solid var(--linie);
		list-style: none;
	}

	.leistungen__index a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 14rem;
		min-height: 2.75rem;
		border-bottom: 0.0625rem solid var(--linie);
		color: var(--wald-80);
		font-family: var(--schrift-titel);
		font-size: 0.9375rem;
		font-weight: 500;
		text-decoration: none;
	}

	.leistungen__index a:hover {
		color: var(--wald);
	}

	.leistungen__index span {
		font-family: var(--schrift-mono);
		font-size: 0.75rem;
		font-weight: 400;
	}
}

/* Register: mobil eigener Link unter dem Zitat */

.register__alle-mobil {
	display: none;
}

/* Video: Standbild in den Farben der Seite, die orangen Diagramme der Vorschau fallen weg */

.video__vorschau {
	overflow: hidden;
	border-radius: 0.75rem;
	isolation: isolate;
}

.video__vorschau img {
	filter: grayscale(1) contrast(1.05);
}

.video__vorschau::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wald-80);
	mix-blend-mode: color;
	opacity: 0.85;
	pointer-events: none;
}

.video__start {
	z-index: 1;
}

/* Seitenende als dunkles Band: die Route kommt am Ziel an */

.ruf-band {
	position: relative;
	overflow: hidden;
	padding-bottom: 9rem;
	background: var(--verlauf);
	color: var(--weiss);
	isolation: isolate;
}

.ruf-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--koernung);
	opacity: 0.4;
	mix-blend-mode: soft-light;
}

.ruf-band .zeile {
	border-top: 0;
}

.ruf-band .ruf__titel,
.ruf-band strong {
	color: var(--weiss);
}

.ruf-band .einleitung,
.ruf-band .ruf__einstieg {
	color: var(--wald-20);
}

.ruf__schritte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 0.0625rem solid rgba(255, 255, 255, 0.24);
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wald-20);
}

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

.ruf__nr {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--gruen);
	font-family: var(--schrift-mono);
	font-size: 0.75rem;
}

.ruf__einstieg {
	max-width: 36rem;
	margin-top: 2.5rem;
	font-size: 1rem;
}

.ruf-band .ruf__preis {
	color: var(--weiss);
}

.ruf__aktion {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	margin-top: 2.5rem;
}

.ruf .ruf__aktion .knopf {
	margin-top: 0;
}

.ruf__person {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	color: var(--wald-20);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.ruf__person strong {
	display: block;
	font-weight: 500;
}

/* Platzhalter, bis Foto und Name feststehen */
.ruf__bild {
	flex: none;
	width: 3rem;
	height: 3rem;
	border: 0.0625rem dashed rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.ruf__route {
	left: 0;
	width: 100%;
	height: 9rem;
}

.ruf__route .schein {
	fill: url("#schein-ruf");
}

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

	/* Register mobil: Zähler und Pfeile über dem Zitat, damit sie nicht wandern */
	.register__steuerung {
		order: -1;
		margin: 0 0 1.5rem;
		padding-top: 0;
	}

	.register__steuerung .register__alle {
		display: none;
	}

	.register__alle-mobil {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		margin-top: 1.25rem;
	}
}

/* Hero mobil: Knopf und Link immer untereinander. Sonst entscheidet die Schriftbreite, ob sie in eine Zeile passen,
   und der Hero springt, sobald die Webschrift geladen ist. */
@media (max-width: 30rem) {
	.hero__aktionen {
		flex-direction: column;
		align-items: flex-start;
	}
}