/* Variante B „Precision Lab“ · Startseite (Pattern dkg-precision/start). Grundzustand = gestapelt und vollständig
   lesbar (ohne JS, Reduced Motion, mobil). Sticky-Bühne der Lupe nur unter :root.b-motion ab 64rem.
   Animiert werden nur opacity und transform (Ausnahme: clip-path beim Zustandswechsel der Lupe). */

.b-start {
	--b-sek-start: clamp(6rem, 3.6rem + 6.5vw, 10rem);
	--b-gap: clamp(1rem, .5rem + 1.6vw, 2rem);
	overflow-x: clip;
}

.b-start :where(p, h2, h3, ol, ul, figure, blockquote, table) {
	margin: 0;
}

.b-nw {
	white-space: nowrap;
}

/* ---------- Sektionen, Köpfe ---------- */
.b-sektion {
	position: relative;
	padding: var(--b-sek-start) var(--b-pad);
	border-top: 1px solid var(--b-line);
}

.b-flaeche {
	background: var(--b-mist);
	border-top-color: transparent;
}

.b-kopf {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(3rem, 2rem + 3vw, 5.5rem);
}

.b-h2 {
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 350;
	line-height: 1.05;
	letter-spacing: -.028em;
}

.b-intro {
	max-width: 36ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--b-ink-2);
}

@media (min-width: 64rem) {
	.b-kopf {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--b-gap);
		align-items: end;
	}

	.b-kopf > * {
		grid-column: 1 / -1;
	}

	.b-kopf > .b-h2:has(+ .b-intro) {
		grid-column: 1 / span 7;
	}

	.b-kopf > .b-h2 + .b-intro {
		grid-column: 9 / -1;
		padding-bottom: .35em;
	}
}

.b-hinweis {
	display: flex;
	gap: .75rem;
	max-width: 62ch;
	padding-top: 1rem;
	border-top: 1px solid var(--b-line);
	color: var(--b-ink-2);
}

.b-hinweis::before {
	content: "i";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .1875rem;
	border: 1px solid var(--b-steel);
	border-radius: 50%;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 3rem;
	color: var(--b-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--b-line);
	text-underline-offset: .35em;
	transition: text-decoration-color 150ms var(--b-ease), color 150ms var(--b-ease);
}

.b-link:hover {
	color: var(--b-blau);
	text-decoration-color: currentColor;
}

.b-link__pfeil {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	transition: transform 150ms var(--b-ease);
}

.b-link:hover .b-link__pfeil {
	transform: translateX(3px);
}

.b-skip {
	position: absolute;
	top: 1rem;
	left: var(--b-pad);
	z-index: 5;
	padding: .75rem 1rem;
	background: var(--b-ink);
	color: var(--b-white);
}

.b-skip:not(:focus) {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Anruf (messblaue Fläche) und Sekundäraktionen ---------- */
.b-call {
	display: grid;
	gap: .5rem;
	font-family: var(--b-sans);
}

.b-call__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.25rem;
	padding: .75rem 1.25rem .75rem 1.375rem;
	border-radius: var(--wp--custom--radius);
	background: var(--b-blau);
	color: var(--b-white);
	text-decoration: none;
	transition: background-color 150ms var(--b-ease);
}

.b-call__btn:hover {
	background: var(--b-blau-2);
	color: var(--b-white);
}

.b-call__text {
	display: grid;
	gap: .125rem;
	min-width: 0;
}

.b-call__label {
	font-family: var(--b-mono);
	font-size: .75rem;
	line-height: 1.3;
	color: var(--b-tint);
}

.b-call__nr {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
	font-weight: 450;
	line-height: 1.1;
	letter-spacing: -.01em;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.b-call__pfeil {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	transition: transform 150ms var(--b-ease);
}

.b-call__btn:hover .b-call__pfeil {
	transform: translateX(3px);
}

.b-call__status {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-call__punkt {
	width: .375rem;
	height: .375rem;
	border-radius: 50%;
	background: var(--b-blau);
}

.b-call--kompakt {
	justify-items: start;
}

.b-call--kompakt .b-call__btn {
	min-height: 3.5rem;
	padding-block: .5rem;
}

.b-call--kompakt .b-call__nr {
	font-size: 1.25rem;
}

.b-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
}

.b-aktion {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 3rem;
	color: var(--b-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--b-line);
	text-underline-offset: .35em;
}

.b-aktion:hover {
	color: var(--b-blau);
	text-decoration-color: currentColor;
}

.b-aktion__icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--b-blau);
}

/* Kostenzeile mit Bedingungen */
.b-kosten {
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--b-ink-2);
}

.b-kosten summary {
	display: flex;
	gap: .625rem;
	align-items: flex-start;
	list-style: none;
	cursor: pointer;
}

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

.b-kosten__i {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .125rem;
	border: 1px solid var(--b-blau);
	border-radius: 50%;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-blau);
}

.b-kosten__satz {
	text-decoration: underline;
	text-decoration-color: var(--b-line);
	text-underline-offset: .3em;
}

.b-kosten summary:hover .b-kosten__satz {
	text-decoration-color: var(--b-blau);
}

.b-kosten[open] p {
	margin: .5rem 0 0 1.875rem;
	font-size: .875rem;
}

/* ---------- Bildrahmen, Ringe, Linien (Koordinaten in % des Bildes, inc/lupe-data.php) ---------- */
.b-frame {
	position: relative;
	container-type: inline-size;
	line-height: 0;
	background: var(--b-mist);
}

.b-frame img,
.b-frame picture {
	display: block;
	width: 100%;
	height: auto;
}

.b-bildzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem 1.5rem;
	padding-top: .75rem;
	font-family: var(--b-mono);
	font-size: .75rem;
	line-height: 1.4;
	color: var(--b-steel);
}

.b-ring {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(var(--r) * 2cqi);
	aspect-ratio: 1;
	border: 1.5px solid var(--b-blau);
	border-radius: 50%;
	translate: -50% -50%;
	pointer-events: none;
}

.b-ring::before {
	content: "";
	position: absolute;
	inset: -7px;
	border: 6px solid color-mix(in srgb, var(--b-tint) 55%, transparent);
	border-radius: 50%;
}

.b-ring::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 11px;
	translate: -50% -50%;
	background:
		linear-gradient(var(--b-blau), var(--b-blau)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(var(--b-blau), var(--b-blau)) 0 50% / 100% 1px no-repeat;
}

.b-ring__label {
	position: absolute;
	left: 85.4%;
	bottom: 85.4%;
	padding: .1875rem .4375rem;
	border-radius: var(--wp--custom--radius);
	background: var(--b-paper);
	font-family: var(--b-mono);
	font-size: .75rem;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--b-ink);
	translate: .25rem -.25rem;
}

.b-ring--signal {
	border-color: var(--b-signal);
}

.b-ring--signal::before {
	border-color: color-mix(in srgb, var(--b-signal) 22%, transparent);
}

.b-ring--signal::after {
	background:
		linear-gradient(var(--b-signal), var(--b-signal)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(var(--b-signal), var(--b-signal)) 0 50% / 100% 1px no-repeat;
}

.b-ring--quelle::after {
	content: none;
}

.b-zoom__faktor {
	position: absolute;
	left: .5rem;
	bottom: calc(100% + .25rem);
	padding: .125rem .375rem;
	border-radius: var(--wp--custom--radius);
	background: var(--b-paper);
	font-family: var(--b-mono);
	font-size: .75rem;
	line-height: 1.3;
	color: var(--b-ink);
}

/* Maßlinie über der Messbrücke (Zustand 03): Linie + zwei Hilfslinien bis zur Brücke */
.b-masslinie {
	position: absolute;
	left: var(--x1);
	top: var(--y);
	width: calc(var(--x2) - var(--x1));
	height: calc(var(--yb) - var(--y));
	border-inline: 1.5px solid var(--b-paper);
	background: linear-gradient(var(--b-paper), var(--b-paper)) 0 0 / 100% 1.5px no-repeat;
	pointer-events: none;
}

.b-masslinie::before,
.b-masslinie::after {
	content: "";
	position: absolute;
	top: -4px;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--b-paper);
	border-radius: 50%;
	background: var(--b-blau);
}

.b-masslinie::before {
	left: -5.25px;
}

.b-masslinie::after {
	right: -5.25px;
}

/* Ausschnittvergrößerung (Zustand 02): Kreis mit 2,5-fachem Detail aus demselben Bild, Verbindungslinie */
.b-zoom {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: calc(var(--r) * 2cqi);
	aspect-ratio: 1;
	translate: -50% -50%;
	border: 1.5px solid var(--b-blau);
	border-radius: 50%;
	background-color: var(--b-mist);
	background-image: var(--bg);
	background-repeat: no-repeat;
	background-size: calc(100cqi * var(--m)) auto;
	background-position:
		calc(var(--r) * 1cqi - var(--sx) * var(--m) * 1cqi)
		calc(var(--r) * 1cqi - var(--sy) * var(--m) * 1cqi * 814 / 1440);
	pointer-events: none;
}

.b-zoom::before {
	content: "";
	position: absolute;
	inset: -7px;
	border: 6px solid color-mix(in srgb, var(--b-tint) 55%, transparent);
	border-radius: 50%;
}

.b-zoom__faktor {
	left: 50%;
	bottom: auto;
	top: calc(100% + .5rem);
	translate: -50% 0;
}

.b-zoom__linie {
	position: absolute;
	left: calc(var(--x1) * 1%);
	top: calc(var(--y1) * 1%);
	width: hypot(calc((var(--x2) - var(--x1)) * 1cqi), calc((var(--y2) - var(--y1)) * 1cqi * 814 / 1440));
	height: 1.5px;
	background: var(--b-blau);
	transform-origin: 0 50%;
	rotate: atan2((var(--y2) - var(--y1)) * 814 / 1440, var(--x2) - var(--x1));
	pointer-events: none;
}

/* ---------- 01 Hero ---------- */
.b-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(1.5rem, .5rem + 3vw, 3.5rem) var(--b-pad) 0;
}

.b-hero__h1 {
	max-width: 26ch;
	font-family: var(--b-sans);
	font-size: clamp(1.0625rem, .95rem + .5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--b-ink-2);
}

.b-hero__claim {
	margin-top: .75rem;
	font-size: clamp(2.5rem, .9rem + 6.2vw, 7.5rem);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.04em;
	color: var(--b-ink);
}

.b-hero__claim > span {
	display: block;
}

.b-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 1rem;
}

.b-hero__lead {
	max-width: 30ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--b-ink-2);
}

.b-call--hero {
	align-self: stretch;
	margin-top: 1.5rem;
}

.b-hero__text > .b-aktionen,
.b-hero__text > .b-kosten {
	margin-top: .25rem;
}

.b-hero__wer {
	display: flex;
	align-items: center;
	gap: .875rem;
	align-self: stretch;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--b-line);
	font-size: .875rem;
	line-height: 1.4;
	color: var(--b-ink-2);
}

.b-hero__wer img {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--b-mist);
}

.b-hero__wer strong {
	color: var(--b-ink);
	font-weight: 600;
}

.b-hero__status {
	display: block;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-hero__bild {
	margin: 2.5rem calc(-1 * var(--b-pad)) 0;
}

.b-hero__bild .b-bildzeile {
	padding-inline: var(--b-pad);
}

/* Skala unter dem Hero-Bild: Teilstriche alle 8 px, lang alle 40 px */
.b-skala {
	flex: 1 1 8rem;
	max-width: 22rem;
	height: 9px;
	background:
		repeating-linear-gradient(to right, var(--b-ink) 0 1px, transparent 1px 40px) 0 0 / 100% 9px no-repeat,
		repeating-linear-gradient(to right, var(--b-line) 0 1px, transparent 1px 8px) 0 100% / 100% 5px no-repeat;
	border-bottom: 1px solid var(--b-line);
}

@media (prefers-reduced-motion: no-preference) {
	.b-frame--hero .b-ring {
		animation: b-ring-ein 900ms var(--b-ease) 350ms both;
	}
}

@keyframes b-ring-ein {
	from {
		opacity: 0;
		transform: scale(1.5);
	}
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
	.b-call--hero {
		align-self: flex-start;
		min-width: 26rem;
	}
}

/* Desktop: H1 klein, Claim breit über alle Spalten, darunter Text links (5 Sp.) und Bild rechts randabfallend */
@media (min-width: 64rem) {
	.b-hero {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--b-gap);
	}

	.b-hero > * {
		grid-column: 1 / -1;
	}

	.b-hero__h1 {
		max-width: none;
	}

	.b-hero__claim {
		margin-top: clamp(1rem, 2vw, 2rem);
	}

	.b-hero__text {
		grid-column: 1 / span 5;
		margin-top: clamp(2rem, 3.5vw, 3.5rem);
		padding-bottom: clamp(2.5rem, 4vw, 4rem);
	}

	.b-hero__bild {
		grid-column: 6 / -1;
		grid-row: 3;
		margin: clamp(2rem, 3.5vw, 3.5rem) calc(-1 * max(var(--wp--custom--gutter), (100vw - var(--wp--style--global--wide-size)) / 2)) 0 clamp(1rem, 3vw, 3.5rem);
	}

	.b-hero__bild .b-bildzeile {
		padding-inline: 0 var(--b-pad);
	}
}

/* ---------- 02 Soforthilfe: Protokoll ---------- */
.b-protokoll {
	display: grid;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b-ink);
}

.b-protokoll__punkt {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: .5rem;
	padding: 1.25rem 0 1.5rem;
	border-bottom: 1px solid var(--b-line);
	color: var(--b-ink-2);
}

.b-protokoll__nr {
	font-family: var(--b-mono);
	font-size: .8125rem;
	line-height: 1.9;
	color: var(--b-blau);
}

.b-protokoll__titel {
	display: block;
	margin-bottom: .375rem;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--b-ink);
}

.b-112 {
	color: var(--b-signal);
	font-weight: 600;
}

.b-sofort__fuss {
	display: grid;
	gap: 2.5rem;
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.b-sofort__anruf {
	display: grid;
	gap: 1.25rem;
	max-width: 40rem;
}

@media (min-width: 64rem) {
	.b-protokoll {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 6rem);
		border-top: 0;
	}

	.b-protokoll__punkt {
		border-top: 1px solid var(--b-ink);
		border-bottom: 0;
		padding-bottom: 2rem;
	}

	.b-sofort__fuss {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 6rem);
		align-items: start;
	}
}

/* ---------- 03 Das Auto unter der Lupe ---------- */
.b-lupe {
	scroll-margin-top: var(--b-header-h);
}

.b-lupe__index,
.b-lupe__buehne {
	display: none;
}

.b-lupe__schritte {
	display: grid;
	gap: clamp(4rem, 2.5rem + 5vw, 7rem);
	padding: 0;
	list-style: none;
}

.b-schritt {
	display: grid;
	gap: 1.5rem;
	scroll-margin-top: calc(var(--b-header-h) + 1.5rem);
}

.b-schritt__text {
	display: grid;
	gap: 1rem;
	align-content: start;
	max-width: 36rem;
	color: var(--b-ink-2);
}

.b-schritt__nr {
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-blau);
}

.b-schritt__titel {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 450;
	letter-spacing: -.015em;
	color: var(--b-ink);
}

.b-schritt__gross {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--b-ink);
}

.b-schritt__fall {
	font-family: var(--b-mono);
	font-size: .8125rem;
	color: var(--b-steel);
}

.b-schritt .b-call {
	margin-top: .5rem;
}

.b-betrag {
	display: flex;
	align-items: baseline;
	gap: .15em;
	font-size: var(--wp--preset--font-size--num);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.045em;
	font-feature-settings: "tnum" 1;
	color: var(--b-ink);
	white-space: nowrap;
}

.b-betrag__eur {
	font-size: .42em;
	font-weight: 300;
	letter-spacing: 0;
	color: var(--b-ink-2);
}

.b-feld {
	padding-top: .5rem;
	border-top: 1px solid var(--b-line);
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

@media (min-width: 48rem) {
	.b-schritt {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(2rem, 5vw, 5rem);
		align-items: center;
	}

	.b-schritt > .b-schritt__aktion {
		grid-column: 2;
	}
}

/* Stacked-Zustand: Ring/Zoom erscheinen beim Eintritt nicht animiert, sind einfach da. */

@media (min-width: 64rem) {
	:root.b-motion .b-lupe__raster {
		display: grid;
		grid-template-columns: 9.5rem minmax(0, 4fr) minmax(0, 7.5fr);
		column-gap: clamp(2rem, 3.5vw, 4.5rem);
		align-items: start;
	}

	:root.b-motion .b-lupe__index,
	:root.b-motion .b-lupe__buehne {
		display: block;
		position: sticky;
		top: calc(var(--b-header-h) + 2.5rem);
		grid-row: 1;
	}

	:root.b-motion .b-lupe__index {
		grid-column: 1;
	}

	:root.b-motion .b-lupe__schritte {
		grid-column: 2;
		grid-row: 1;
		gap: 0;
	}

	:root.b-motion .b-schritt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 52svh;
		padding-block: 2rem;
	}

	/* Sticky-Strecke: 3 × 52svh + 64svh = 220svh (≤ 240svh, concept-precision § 8) */
	:root.b-motion .b-schritt:first-child {
		justify-content: flex-start;
		padding-top: 3rem;
	}

	:root.b-motion .b-schritt:last-child {
		min-height: 64svh;
		justify-content: flex-end;
		padding-bottom: 3rem;
	}

	:root.b-motion .b-schritt > .b-zustand {
		display: none;
	}

	/* Inaktive Schritte: nur Farbwechsel auf Steel (≥ 4,5 : 1), keine Transparenz; der Anruf bleibt unberührt */
	:root.b-motion .b-schritt:not(.is-aktiv, :focus-within) .b-schritt__text :is(p, h3) {
		color: var(--b-steel);
	}

	:root.b-motion .b-schritt__text :is(p, h3) {
		transition: color 300ms var(--b-ease);
	}

	:root.b-motion .b-schritt__aktion {
		margin-top: 1.5rem;
	}

	:root.b-motion .b-lupe__buehne {
		grid-column: 3;
		height: calc(100svh - var(--b-header-h) - 5rem);
	}
}

/* Index: 01–04, aktive Station messblau, Skala als Fortschritt */
.b-lupe__index ol {
	display: grid;
	gap: .125rem;
	margin: 0;
	padding: 0 0 0 1.25rem;
	list-style: none;
}

.b-lupe__index a {
	display: grid;
	gap: .125rem;
	min-height: 3rem;
	padding-block: .375rem;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--b-steel);
	text-decoration: none;
	transition: color 300ms var(--b-ease);
}

.b-lupe__index a:hover {
	color: var(--b-ink);
}

.b-lupe__nr {
	font-family: var(--b-mono);
	font-size: .75rem;
}

.b-lupe__index a[aria-current="step"] {
	color: var(--b-blau);
}

.b-lupe__skala {
	position: absolute;
	top: .5rem;
	bottom: .5rem;
	left: 0;
	width: 9px;
	background: repeating-linear-gradient(to bottom, var(--b-line) 0 1px, transparent 1px 8px) 0 0 / 5px 100% no-repeat;
	border-left: 1px solid var(--b-line);
}

.b-lupe__fuellung {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 1.5px;
	background: var(--b-blau);
	transform: scaleY(calc(var(--b-stand, 1) / 4));
	transform-origin: top;
	transition: transform 500ms var(--b-ease);
}

.b-lupe[data-state="1"] { --b-stand: 1; }
.b-lupe[data-state="2"] { --b-stand: 2; }
.b-lupe[data-state="3"] { --b-stand: 3; }
.b-lupe[data-state="4"] { --b-stand: 4; }

/* Bühne: Bilder deckungsgleich gestapelt, Zustandswechsel per opacity/transform */
.b-buehne {
	position: relative;
	height: calc(100% - 2.5rem);
}

.b-buehne__bild {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity 450ms var(--b-ease), transform 700ms var(--b-ease);
}

.b-buehne__bild .b-zustand {
	width: 100%;
	max-height: 100%;
}

/* Hochformat (Zustand 01) in der Bühne: Breite aus der Bühnenhöhe, damit nichts überläuft */
.b-buehne__bild .b-zustand--1 {
	width: min(100%, calc((100svh - var(--b-header-h) - 10rem) * .8));
	justify-self: center;
}

.b-lupe[data-state="1"] [data-bild="1"],
.b-lupe[data-state="2"] [data-bild="2"],
.b-lupe[data-state="3"] [data-bild="3"],
.b-lupe[data-state="4"] [data-bild="4"] {
	opacity: 1;
	transform: none;
}

/* Marker der Bühne erscheinen erst im aktiven Zustand */
.b-buehne__bild :is(.b-ring, .b-zoom) {
	opacity: 0;
	transform: scale(1.4);
	transition: opacity 400ms var(--b-ease) 250ms, transform 500ms var(--b-ease) 250ms;
}

.b-buehne__bild .b-masslinie,
.b-buehne__bild .b-zoom__linie {
	opacity: 0;
	transform: scaleX(.2);
	transform-origin: left center;
	transition: opacity 300ms var(--b-ease) 300ms, transform 600ms var(--b-precise) 300ms;
}

.b-buehne__bild .b-zoom {
	clip-path: circle(0% at 50% 50%);
	transform: none;
	transition: clip-path 600ms var(--b-precise) 350ms, opacity 200ms linear 350ms;
}

.b-lupe[data-state="1"] [data-bild="1"] :is(.b-ring, .b-zoom, .b-masslinie, .b-zoom__linie),
.b-lupe[data-state="2"] [data-bild="2"] :is(.b-ring, .b-zoom, .b-masslinie, .b-zoom__linie),
.b-lupe[data-state="3"] [data-bild="3"] :is(.b-ring, .b-zoom, .b-masslinie, .b-zoom__linie),
.b-lupe[data-state="4"] [data-bild="4"] :is(.b-ring, .b-zoom, .b-masslinie, .b-zoom__linie) {
	opacity: 1;
	transform: none;
}

.b-lupe[data-state="2"] [data-bild="2"] .b-zoom {
	clip-path: circle(75% at 50% 50%);
}

.b-buehne__zaehler {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: .25em;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-buehne__aktuell {
	display: grid;
	color: var(--b-blau);
}

.b-buehne__aktuell > span {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 300ms var(--b-ease);
}

.b-lupe[data-state="1"] [data-z="1"],
.b-lupe[data-state="2"] [data-z="2"],
.b-lupe[data-state="3"] [data-z="3"],
.b-lupe[data-state="4"] [data-z="4"] {
	opacity: 1;
}

/* ---------- 04 Fälle als Untersuchungsberichte ---------- */
.b-berichte {
	display: grid;
	gap: clamp(3.5rem, 2rem + 4vw, 5rem) clamp(2rem, 5vw, 6rem);
	padding: 0;
	list-style: none;
}

.b-bericht {
	display: grid;
	gap: 1rem;
	align-content: start;
	padding-top: .875rem;
	border-top: 1px solid var(--b-ink);
}

.b-bericht__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-bericht__kopf span:first-child {
	color: var(--b-blau);
}

.b-bericht__kopf span + span::before {
	content: "·";
	margin-right: 1rem;
	color: var(--b-line);
}

.b-bericht__bild {
	position: relative;
	overflow: hidden;
	line-height: 0;
	background: var(--b-mist);
}

.b-bericht__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.b-bericht__daten {
	display: grid;
	gap: .625rem;
}

.b-betrag--bericht {
	font-size: clamp(3rem, 1.5rem + 4.2vw, 5.5rem);
}

.b-bericht__hinweis {
	font-size: .875rem;
	color: var(--b-ink-2);
}

/* Lupe (loupe.js): Linse 2-fach, Schalter fokussierbar */
.dkg-loupe__lens {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: clamp(8rem, 30%, 12rem);
	aspect-ratio: 1;
	border: 1.5px solid var(--b-blau);
	border-radius: 50%;
	background-color: var(--b-mist);
	background-repeat: no-repeat;
	outline: 6px solid color-mix(in srgb, var(--b-tint) 55%, transparent);
	pointer-events: none;
}

.b-lupe-schalter {
	position: absolute;
	right: .75rem;
	top: .75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: 3rem;
	min-width: 3rem;
	padding: 0 .75rem;
	border: 1px solid var(--b-line);
	border-radius: var(--wp--custom--radius);
	background: var(--b-paper);
	font: 400 .75rem/1 var(--b-mono);
	color: var(--b-ink);
	cursor: pointer;
	line-height: 1;
}

.b-lupe-schalter[aria-pressed="true"] {
	border-color: var(--b-blau);
	color: var(--b-blau);
}

@media (pointer: fine) {
	.b-bericht__bild {
		cursor: zoom-in;
	}
}

/* Gemeinsame Skala 0–45.000 € */
.b-skala-faelle {
	margin-top: clamp(4rem, 3rem + 3vw, 6rem);
}

.b-skala-faelle__linie {
	position: relative;
	height: 4.5rem;
	background:
		repeating-linear-gradient(to right, var(--b-ink) 0 1px, transparent 1px calc(100% / 9 - .01px)) 0 50% / 100% 13px no-repeat,
		repeating-linear-gradient(to right, var(--b-line) 0 1px, transparent 1px calc(100% / 45 - .01px)) 0 50% / 100% 7px no-repeat,
		linear-gradient(var(--b-ink), var(--b-ink)) 0 50% / 100% 1px no-repeat;
}

.b-skala-faelle__marke {
	position: absolute;
	left: var(--x);
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--b-blau);
	box-shadow: 0 0 0 4px var(--b-paper);
	translate: -50% -50%;
}

.b-skala-faelle__wert {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .625rem);
	font-family: var(--b-mono);
	font-size: .75rem;
	white-space: nowrap;
	color: var(--b-ink);
	translate: -50% 0;
}

.b-skala-faelle__marke:nth-child(even) .b-skala-faelle__wert {
	bottom: auto;
	top: calc(100% + .625rem);
}

.b-skala-faelle__marke:first-child .b-skala-faelle__wert {
	translate: -12% 0;
}

.b-skala-faelle__marke:last-child .b-skala-faelle__wert {
	translate: -100% 0;
	left: 100%;
}

.b-skala-faelle__achse {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-faelle__fuss {
	display: grid;
	gap: 1.25rem;
	max-width: 40rem;
	margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

@media (min-width: 48rem) {
	.b-berichte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.b-bericht:nth-child(even) {
		margin-top: clamp(3rem, 8vw, 8rem);
	}
}

@media (max-width: 47.99rem) {
	.b-skala-faelle__achse span:nth-child(2) {
		display: none;
	}
}

/* ---------- 05 Ablauf: Stationen auf einer Messlinie ---------- */
.b-stationen {
	position: relative;
	display: grid;
	gap: 2.5rem;
	padding: 0 0 0 2rem;
	list-style: none;
}

.b-stationen::before {
	content: "";
	position: absolute;
	top: .5rem;
	bottom: .5rem;
	left: 0;
	width: 1px;
	background: var(--b-ink);
}

.b-station {
	position: relative;
	display: grid;
	gap: .5rem;
	align-content: start;
}

.b-station::before {
	content: "";
	position: absolute;
	top: .3125rem;
	left: calc(-2rem - 5px);
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--b-blau);
	border-radius: 50%;
	background: var(--b-mist);
}

.b-station:first-child::before {
	background: var(--b-blau);
}

.b-station__marke {
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-station__nr {
	color: var(--b-blau);
}

.b-station__titel {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 450;
	letter-spacing: -.015em;
}

.b-station__text {
	max-width: 34ch;
	color: var(--b-ink-2);
}

@media (min-width: 64rem) {
	.b-stationen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 3vw, 3rem);
		padding: 2.5rem 0 0;
	}

	.b-stationen::before {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
	}

	.b-station::before {
		top: calc(-2.5rem - 5px);
		left: 0;
	}
}

/* ---------- 06 Wer zahlt? Entscheidungstabelle ---------- */
.b-tabelle {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--b-ink);
}

.b-tabelle thead {
	display: none;
}

.b-tabelle :is(th, td) {
	display: block;
	padding: 0;
	text-align: left;
	vertical-align: top;
}

.b-tabelle tbody tr {
	display: grid;
	gap: .625rem;
	padding: 1.5rem 0 1.75rem;
	border-bottom: 1px solid var(--b-line);
}

.b-tabelle tbody th {
	display: flex;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 450;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--b-ink);
}

.b-tabelle__nr {
	flex: none;
	padding-top: .35em;
	font-family: var(--b-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--b-blau);
}

.b-tabelle td {
	max-width: 60ch;
	color: var(--b-ink-2);
}

.b-kosten-tab .b-hinweis {
	margin-top: 2.5rem;
}

@media (min-width: 48rem) {
	.b-tabelle thead {
		display: table-header-group;
	}

	.b-tabelle :is(th, td) {
		display: table-cell;
	}

	.b-tabelle tbody tr {
		display: table-row;
	}

	.b-tabelle thead th {
		padding: .75rem 0;
		border-bottom: 1px solid var(--b-line);
		font-weight: 400;
		color: var(--b-steel);
	}

	.b-tabelle tbody :is(th, td) {
		padding: 1.75rem 0 2rem;
		border-bottom: 1px solid var(--b-line);
	}

	.b-tabelle tbody th {
		display: table-cell;
		width: 42%;
		padding-right: 3rem;
	}

	.b-tabelle__nr {
		display: inline-block;
		width: 2.5rem;
	}
}

/* ---------- 07 Der Prüfer ---------- */
.b-pruefer {
	display: grid;
	gap: 2.5rem;
}

.b-pruefer__bild {
	max-width: 32rem;
}

.b-pruefer__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--b-mist);
}

.b-pruefer__text {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	max-width: 40rem;
	color: var(--b-ink-2);
}

.b-pruefer__text .b-h2 {
	margin-bottom: .5rem;
}

.b-daten {
	width: 100%;
	margin-block: .5rem 1rem;
	border-collapse: collapse;
	border-top: 1px solid var(--b-ink);
	font-size: .9375rem;
}

.b-daten :is(th, td) {
	padding: .75rem 0;
	border-bottom: 1px solid var(--b-line);
	text-align: left;
	vertical-align: top;
}

.b-daten th {
	width: 8.5rem;
	font-family: var(--b-mono);
	font-size: .75rem;
	font-weight: 400;
	line-height: 1.9;
	color: var(--b-steel);
}

.b-daten td {
	color: var(--b-ink);
}

.b-zitat {
	margin: .75rem 0;
	padding: 0 0 0 1.25rem;
	border-left: 1.5px solid var(--b-blau);
}

.b-zitat p {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 350;
	line-height: 1.35;
	letter-spacing: -.015em;
	color: var(--b-ink);
}

.b-zitat p::before {
	content: "„";
}

.b-zitat p::after {
	content: "“";
}

@media (min-width: 48rem) {
	.b-pruefer {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(2rem, 6vw, 7rem);
		align-items: start;
	}

	.b-pruefer__bild {
		position: sticky;
		top: calc(var(--b-header-h) + 2rem);
	}
}

/* ---------- 08 Deine Optionen: Spezifikationsvergleich ---------- */
.b-spec {
	display: grid;
	gap: 3rem clamp(1.5rem, 3vw, 3rem);
}

.b-spec__spalte {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	padding-top: 1.25rem;
	border-top: 1px solid var(--b-ink);
}

.b-spec__spalte.is-empfohlen {
	border-top: 3px solid var(--b-blau);
	padding-top: calc(1.25rem - 2px);
}

.b-spec__titel {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 450;
	letter-spacing: -.015em;
}

.b-spec__liste {
	display: grid;
	padding: 0;
	list-style: none;
}

.b-spec__liste li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	padding: .75rem 0;
	border-bottom: 1px solid var(--b-line);
	color: var(--b-ink-2);
}

.b-spec__zeichen {
	font-family: var(--b-mono);
	color: var(--b-steel);
}

.is-empfohlen .b-spec__zeichen {
	color: var(--b-blau);
}

.is-empfohlen .b-spec__liste li {
	color: var(--b-ink);
}

.b-spec__ergebnis {
	font-size: .9375rem;
	color: var(--b-ink-2);
}

@media (min-width: 64rem) {
	.b-spec {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
	}
}

/* ---------- 09 Leistungen + Vermessungsband ---------- */
.b-leistungen__raster {
	display: grid;
	gap: 0 clamp(2rem, 5vw, 6rem);
	border-top: 1px solid var(--b-ink);
}

.b-leistung {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
	gap: .25rem .75rem;
	padding: 1.5rem 0 1.75rem;
	border-bottom: 1px solid var(--b-line);
	color: var(--b-ink);
	text-decoration: none;
}

.b-leistung > :not(.b-leistung__key, .b-leistung__pfeil) {
	grid-column: 2;
}

.b-leistung__key {
	grid-row: 1 / span 3;
	font-family: var(--b-mono);
	font-size: .8125rem;
	line-height: 1.9;
	color: var(--b-blau);
}

.b-leistung__eyebrow {
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-steel);
}

.b-leistung__titel {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 450;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.b-leistung__text {
	max-width: 46ch;
	font-size: .9375rem;
	color: var(--b-ink-2);
}

.b-leistung__pfeil {
	grid-column: 3;
	grid-row: 1 / span 3;
	align-self: center;
	width: 1.5rem;
	height: 1.5rem;
	transition: transform 150ms var(--b-ease), color 150ms var(--b-ease);
}

.b-leistung:hover .b-leistung__pfeil,
.b-leistung:focus-visible .b-leistung__pfeil {
	color: var(--b-blau);
	transform: translateX(4px);
}

.b-leistung:hover .b-leistung__titel {
	color: var(--b-blau);
}

.b-leistung--haupt .b-leistung__titel {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -.03em;
}

.b-leistung--haupt .b-leistung__text {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
}

.b-leistung__liste {
	padding: 0;
	list-style: none;
}

@media (min-width: 64rem) {
	.b-leistungen__raster {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}

	.b-leistung--haupt {
		align-content: start;
		padding-top: 2rem;
		border-bottom: 0;
	}
}

.b-vermessung {
	margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

.b-vergleich {
	--pos: 58%;
	position: relative;
	overflow: hidden;
	line-height: 0;
	background: var(--b-paper);
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}

.b-vergleich__base {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(.32) contrast(1.15);
}

.b-vergleich picture {
	position: absolute;
	inset: 0;
}

.b-vergleich__top {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.b-vergleich__regler {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.b-vergleich:has(.b-vergleich__regler:focus-visible) {
	outline: 2px solid var(--b-blau);
	outline-offset: 3px;
}

.b-vergleich__griff {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 1.5px;
	background: var(--b-blau);
	translate: -50% 0;
	pointer-events: none;
}

.b-vergleich__griff::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--b-blau);
	border-radius: 50%;
	background:
		linear-gradient(var(--b-blau), var(--b-blau)) 50% 50% / 1.5px 40% no-repeat,
		var(--b-paper);
	translate: -50% -50%;
}

.b-vergleich__tag {
	position: absolute;
	top: .75rem;
	padding: .25rem .5rem;
	border-radius: var(--wp--custom--radius);
	background: var(--b-paper);
	font: 400 .75rem/1.3 var(--b-mono);
	color: var(--b-ink);
}

.b-vergleich__tag--foto {
	left: .75rem;
}

.b-vergleich__tag--linie {
	right: .75rem;
}

.b-ausserdem {
	display: grid;
	gap: 1rem;
	margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--b-line);
}

.b-ausserdem__titel {
	font-family: var(--b-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--b-steel);
}

.b-ausserdem__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 0;
	padding: 0;
	list-style: none;
	font-size: 1.0625rem;
	color: var(--b-ink);
}

.b-ausserdem__liste li:not(:last-child)::after {
	content: "·";
	margin: 0 .875rem;
	color: var(--b-line);
}

.b-ausserdem__liste a {
	color: var(--b-ink);
	text-decoration-color: var(--b-line);
}

/* ---------- 10 Einsatzgebiet (Index) + FAQ ---------- */
.b-orte {
	display: grid;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b-ink);
}

.b-orte li {
	border-bottom: 1px solid var(--b-line);
}

.b-orte a {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: .75rem;
	min-height: 3.5rem;
	color: var(--b-ink);
	font-size: 1.1875rem;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: background-color 150ms var(--b-ease);
}

.b-orte a:hover {
	background: var(--b-tint);
}

.b-orte__buchstabe {
	font-family: var(--b-mono);
	font-size: .75rem;
	color: var(--b-blau);
	padding-left: .25rem;
}

.b-orte__pfeil {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--b-steel);
}

.b-orte + p {
	margin-top: 1rem;
}

@media (min-width: 48rem) {
	.b-orte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 6rem);
	}
}

.b-faq {
	display: grid;
	gap: 2rem;
	margin-top: clamp(5rem, 3.5rem + 5vw, 9rem);
}

.b-faq__liste {
	border-top: 1px solid var(--b-ink);
}

.b-frage {
	border-bottom: 1px solid var(--b-line);
}

.b-frage summary {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
	align-items: baseline;
	gap: .5rem;
	min-height: 3.5rem;
	padding: 1.125rem 0;
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--b-ink);
}

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

.b-frage summary:hover .b-frage__text {
	color: var(--b-blau);
}

.b-frage__nr {
	font-family: var(--b-mono);
	font-size: .75rem;
	letter-spacing: 0;
	color: var(--b-blau);
}

.b-frage__plus {
	position: relative;
	align-self: center;
	width: 1.125rem;
	height: 1.125rem;
}

.b-frage__plus::before,
.b-frage__plus::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	background: var(--b-ink);
	transition: transform 300ms var(--b-ease);
}

.b-frage__plus::after {
	transform: rotate(90deg);
}

.b-frage[open] .b-frage__plus::after {
	transform: rotate(0deg);
}

.b-frage p {
	max-width: 64ch;
	padding: 0 2rem 1.75rem 3rem;
	color: var(--b-ink-2);
}

@media (min-width: 64rem) {
	.b-faq {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--b-gap);
	}

	.b-faq > * {
		grid-column: 5 / -1;
	}

	.b-faq > .b-faq__titel {
		grid-column: 1 / span 4;
		grid-row: 1 / span 2;
	}
}

/* ---------- 11 Kontakt: eine starke Handlungsfläche, dann Formular ---------- */
.b-kontakt__kopf {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.b-kontakt__panel {
	display: grid;
	gap: 1.25rem 3rem;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
	border-radius: var(--wp--custom--radius);
	background: var(--b-blau);
	color: var(--b-white);
}

.b-kontakt__anruf {
	display: grid;
	gap: .5rem;
	color: var(--b-white);
	text-decoration: none;
}

.b-kontakt__anruf:hover,
.b-kontakt__anruf:focus-visible {
	color: var(--b-white);
}

.b-kontakt__anruf:focus-visible {
	outline-color: var(--b-white);
}

.b-kontakt__label {
	font-family: var(--b-mono);
	font-size: .8125rem;
	color: var(--b-tint);
}

.b-kontakt__nummer {
	display: flex;
	align-items: center;
	gap: .25em;
	font-size: clamp(2.25rem, .9rem + 5.6vw, 6rem);
	font-weight: 250;
	line-height: 1;
	letter-spacing: -.04em;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.b-kontakt__pfeil {
	flex: none;
	width: .5em;
	height: .5em;
	transition: transform 150ms var(--b-ease);
}

.b-kontakt__anruf:hover .b-kontakt__pfeil {
	transform: translateX(4px);
}

.b-kontakt__neben {
	display: grid;
	gap: .5rem;
	align-content: end;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--b-white) 30%, transparent);
}

.b-kontakt__zeiten {
	font-family: var(--b-mono);
	font-size: .8125rem;
	color: var(--b-tint);
}

.b-kontakt__panel .b-aktion,
.b-kontakt__panel .b-aktion:hover {
	color: var(--b-white);
	text-decoration-color: color-mix(in srgb, var(--b-white) 45%, transparent);
}

.b-kontakt__panel .b-aktion__icon {
	color: var(--b-white);
}

.b-kontakt__panel :focus-visible {
	outline-color: var(--b-white);
}

.b-kontakt__raster {
	display: grid;
	gap: 3rem;
	margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.b-kontakt__text {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	color: var(--b-ink-2);
}

.b-haken {
	display: grid;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b-line);
}

.b-haken li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	padding: .625rem 0;
	border-bottom: 1px solid var(--b-line);
	color: var(--b-ink);
}

.b-haken li::before {
	content: "✓";
	font-family: var(--b-mono);
	color: var(--b-blau);
}

.b-kontakt__formular .dkg-formular {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--b-line);
	border-radius: var(--wp--custom--radius);
	background: var(--b-white);
}

@media (min-width: 64rem) {
	.b-kontakt__panel {
		grid-template-columns: minmax(0, 1fr) minmax(14rem, auto);
		align-items: end;
	}

	.b-kontakt__neben {
		padding: 0 0 0 2rem;
		border-top: 0;
		border-left: 1px solid color-mix(in srgb, var(--b-white) 30%, transparent);
	}

	.b-kontakt__raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: clamp(3rem, 6vw, 7rem);
		align-items: start;
	}
}

/* ---------- Mobil: eine Lesestufe größer und dunkler, Labels ≥ 12 px in Ink 2 ---------- */
@media (max-width: 47.99rem) {
	.b-start {
		--b-steel: var(--wp--preset--color--ink-2);
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.b-start :is(.b-protokoll__punkt, .b-schritt__text, .b-station__text, .b-tabelle td, .b-pruefer__text, .b-spec__liste li, .b-leistung__text, .b-frage p, .b-kontakt__text, .b-hinweis) {
		color: var(--b-ink-2);
	}

	.b-start :is(.b-kosten, .b-leistung__text, .b-spec__ergebnis, .b-bericht__hinweis, .b-hero__wer) {
		font-size: 1rem;
	}

	.b-start :is(.b-bildzeile, .b-feld, .b-bericht__kopf, .b-station__marke, .b-skala-faelle__achse, .b-skala-faelle__wert, .b-daten th, .b-hero__status) {
		font-size: .8125rem;
		color: var(--b-ink-2);
	}

	/* Fälle mobil als gestapelte Kurzberichte: Foto links, Betrag rechts, keine Lupe */
	.b-bericht {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: .75rem;
		align-items: center;
	}

	.b-bericht__kopf {
		grid-column: 1 / -1;
	}

	.b-bericht__img {
		aspect-ratio: 1;
	}

	.b-betrag--bericht {
		font-size: 2.5rem;
	}

	.b-berichte {
		gap: 2rem;
	}

	.b-bericht .b-lupe-schalter,
	.b-bericht .dkg-loupe__lens {
		display: none !important;
	}

	.b-skala-faelle {
		margin-top: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b-buehne__bild,
	.b-buehne__bild * {
		transition: none !important;
	}
}

@media print {
	.b-lupe__index,
	.b-lupe__buehne,
	.b-lupe-schalter {
		display: none !important;
	}

	.b-schritt > .b-zustand {
		display: block !important;
	}
}