/*
 * Online-PR-Seite im Aufbau von final-2-fotos (05.11.2026). basis.css, abschnitte.css, gezielt.css,
 * final.css, abfolge.css, fotos.css und seite.js sind unverändert aus final-2-fotos kopiert.
 * Hier nur, was die Online-PR-Inhalte zusätzlich brauchen: Beispiele vor den Kundenstimmen,
 * Zahlen in der Ausgangslage und sichtbare Markierungen für offene Stellen.
 */

/* Ausgangslage: die zwei Zahlen des TÜV-Verbands unter der Einleitung */
.zahlen dd {
	color: var(--wald-80);
}

/* Beispiele und Kundenstimmen lesen sich als ein Kapitel „Ergebnisse“ */
#ergebnisse {
	padding-bottom: calc(var(--abstand) / 2);
}

#ergebnisse + .register {
	padding-top: calc(var(--abstand) / 2);
	border-top: 0;
}

/* Beispiele: je Kunde eine Zeile, Name und Branche links, Ergebnis rechts (aus 2-weissraum-isometrie-online-pr) */
.beispiele {
	margin: 3rem 0 0;
	padding: 0;
	border-bottom: 0.0625rem solid var(--linie);
	list-style: none;
}

.beispiele > li {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0.5rem 2.5rem;
	padding-block: 2rem;
	border-top: 0.0625rem solid var(--linie);
}

.beispiele h3 {
	font-size: 1.375rem;
}

.beispiel__kopf .etikett {
	margin-top: 0.5rem;
}

.beispiel__text {
	max-width: 36rem;
	font-size: 1rem;
}

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

/* Offene Stellen: sichtbar, damit sie in der Besprechung nicht als fertiger Text durchgehen */
.offen {
	display: block;
	margin-top: 0.5rem;
	color: var(--wald-80);
	font-family: var(--schrift-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.ruf-band .offen {
	color: var(--wald-20);
}

@media (max-width: 40rem) {
	.beispiele > li {
		grid-template-columns: 1fr;
	}
}