/**
 * WNA Vision — Leistungssystem (Phase 1, Design-Leitlinie nach Sprint 13).
 *
 * Gilt für die Übersichtsseite "Leistungen" und die sechs Einzel-Leistungsseiten
 * (page-leistung.php, page-leistungen-uebersicht.php). Übernimmt die Design-DNA
 * der Startseite (Chamfer, Demo-Bildsystem, Eyebrow/Abschnitt-Grundgerüst,
 * Vorher/Nachher-Modul — alle in layout.css, siehe dortigen Architekturhinweis)
 * ohne sie zu kopieren: eigene Hero-Behandlung, eigene familienspezifische
 * Beweis-/Wow-Module (siehe page-leistung.php für die Zuordnung je Seite).
 *
 * Wiederverwendbare Komponenten (Trust-Liste, Projektteaser-Raster, CTA-Band)
 * liegen unverändert in layout.css. Mobile-first, globale Breakpoints (siehe
 * main.css): Mobil 0–599px, Tablet ab 600px, Desktop ab 1024px.
 */

/* ---------- Leistung-Hero: Geschichte statt Formular. Kein separater,
   bildloser Text-Hero mehr — der jeweilige Wow-Moment IST der Hero, damit die
   eigene Geschichte jeder Seite innerhalb der ersten 3–5 Sekunden lesbar ist,
   nicht erst nach dem Leistungsumfang-Absatz. Vier der sechs Seiten nutzen
   dafür ein gemeinsames, parametrisiertes "Hero-Band" (Ton/Höhe/Ausrichtung
   unterscheiden die Silhouette je Seite); Sanierung (interaktiver Regler) und
   Demontage (Bild-Text nebeneinander) bleiben eigenständige Strukturen — siehe
   page-leistung.php für die Zuordnung. Gemeinsame Bausteine (Demo-Bildsystem,
   Chamfer, Reveal) liegen weiterhin in layout.css. ---------- */

.wna-leistung-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

.wna-leistung-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-inline-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--neutral-400);
}

.wna-leistung-breadcrumb a {
	color: var(--wp--preset--color--text-secondary);
}

.wna-leistung__hero-familie {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
}

.wna-leistung__hero-titel {
	font-size: clamp( 2.2rem, 5.2vw, 3.3rem );
	letter-spacing: -0.01em;
	max-width: 15ch;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-leistung__hero-text {
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--lead);
}

/* Hero-Band: gemeinsame Struktur für Objektbetreuung, Winterdienst, Rückbau, Transporte */

.wna-leistung__hero-band {
	position: relative;
	overflow: hidden;
	display: flex;
}

.wna-leistung__hero-band .wna-demo-bild {
	position: absolute;
	inset: 0;
	min-height: unset;
	height: 100%;
}

/* Reales Hero-Bild (Demo-Flächen-Bereinigung, 2026-08-09) — ersetzt die
   .wna-demo-bild-Kompositionssimulation dort, wo bereits passendes echtes
   Material vorliegt (siehe page-leistung.php, 'hero_bild'-Konfiguration).
   Transporte bleibt bis zu neuem Bildmaterial bei der Simulation oben. */
.wna-leistung__hero-band-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wna-leistung__hero-band-schleier {
	position: absolute;
	inset: 0;
}

.wna-leistung__hero-band-rahmen {
	position: absolute;
	inset: var(--wp--preset--spacing--4);
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	background-repeat: no-repeat;
	background-image:
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor );
	background-size:
		26px 1.5px, 1.5px 26px, 26px 1.5px, 1.5px 26px,
		26px 1.5px, 1.5px 26px, 26px 1.5px, 1.5px 26px;
	background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
}

.wna-leistung__hero-band-inhalt {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--wp--preset--spacing--6);
}

/* Ton */

.wna-leistung__hero-band--hell {
	color: var(--wp--custom--color--text-primary);
}

.wna-leistung__hero-band--hell .wna-leistung__hero-band-rahmen {
	color: var(--wp--custom--color--text-primary);
}

.wna-leistung__hero-band--hell .wna-leistung__hero-text {
	color: var(--wp--preset--color--text-secondary);
}

.wna-leistung__hero-band--dunkel {
	color: var(--wp--preset--color--text-inverse);
}

.wna-leistung__hero-band--dunkel .wna-leistung__hero-band-rahmen {
	color: var(--wp--preset--color--text-inverse);
}

.wna-leistung__hero-band--dunkel .wna-leistung__hero-text {
	color: var(--wp--preset--color--neutral-400);
}

.wna-leistung__hero-band--dunkel .wna-leistung-breadcrumb,
.wna-leistung__hero-band--dunkel .wna-leistung-breadcrumb a {
	color: var(--wp--preset--color--neutral-400);
}

.wna-leistung__hero-band--dunkel .wna-leistung-breadcrumb li:not(:last-child)::after {
	color: var(--wp--preset--color--neutral-700);
}

/* Höhe */

.wna-leistung__hero-band--kurz {
	min-height: clamp( 340px, 44vw, 440px );
}

.wna-leistung__hero-band--hoch {
	min-height: clamp( 420px, 54vw, 600px );
}

/* Panorama-Variante von "kurz" (Transporte, 2026-08-09): Das freigegebene
   Hero-Motiv ist mit 1983×793px (Seitenverhältnis ca. 2,5:1) deutlich
   breiter als die übrigen Hero-Bilder. Die normale "kurz"-Mindesthöhe
   (Mobil-Floor 340px) hätte auf schmalen Breiten ein nahezu quadratisches
   Band erzwungen und dadurch object-fit:cover einen Großteil der Bildbreite
   (Transporter, Firmenbeschriftung) wegschneiden lassen. Niedrigerer
   Mobil-Floor hier reduziert den nötigen Zuschnitt spürbar (rechnerisch/
   empirisch geprüft: ca. 33–43 % statt 56 % Seitenbeschnitt auf 320–375px,
   nahezu unbeschnitten zwischen 600–800px), ohne den bereits stimmigen
   Desktop-Wert zu verändern. */
.wna-leistung__hero-band--kurz-panorama {
	min-height: clamp( 200px, 50vw, 320px );
}

@media ( min-width: 800px ) {
	.wna-leistung__hero-band--kurz {
		min-height: clamp( 360px, 40vh, 440px );
	}

	.wna-leistung__hero-band--kurz-panorama {
		min-height: clamp( 360px, 40vh, 440px );
	}

	.wna-leistung__hero-band--hoch {
		min-height: clamp( 460px, 58vh, 680px );
	}
}

/* Ausrichtung */

.wna-leistung__hero-band--mitte {
	align-items: center;
}

.wna-leistung__hero-band--unten {
	align-items: flex-end;
}

/* ---------- Tiefenbühne: fotografische Szenensimulation statt Flächenmuster
   (Auftraggeber-Korrektur: die vorherigen Gradient-Kompositionen wirkten wie
   CSS-Ornament, nicht wie Fotografie). Drei real gestaffelte Ebenen mit
   unterschiedlicher Schärfe (Hintergrund unscharf, Mittelgrund scharf/Motiv,
   Vordergrund leicht unscharf/rahmend) simulieren echte Kameratiefe; eine
   Lichtebene (mix-blend-mode) simuliert eine gerichtete Lichtquelle; ein
   Fokuspunkt trägt den einen Orange-Fund scharf vor unscharfem Umfeld — genau
   dort soll das Auge zuerst hinsehen. Wenn später echte Fotografie entsteht,
   ersetzt sie die Ebenen 1:1, ohne dass sich die Komposition ändert. Weiterhin
   ausschließlich CSS-Gradienten auf bestehenden Tokens (`color-mix()`), keine
   neuen Bildassets, keine neuen Markenfarben, weiterhin "Demo — reales Motiv
   folgt" gekennzeichnet (siehe page-leistung.php). ---------- */

.wna-leistung__buehne {
	position: relative;
}

.wna-leistung__buehne-ebene {
	position: absolute;
	inset: -10%;
}

.wna-leistung__buehne-hintergrund {
	filter: blur( 9px );
}

.wna-leistung__buehne-vordergrund {
	filter: blur( 2px );
}

.wna-leistung__buehne-licht {
	position: absolute;
	inset: 0;
	mix-blend-mode: soft-light;
}

.wna-leistung__buehne-fokus {
	position: absolute;
	width: 9px;
	height: 9px;
	background-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 7px 1px color-mix( in srgb, var(--wp--preset--color--accent) 55%, transparent );
}

/* 1 — Objektbetreuung: Treppenspiralen-Blick. Hintergrund: der unscharfe,
   dunkler werdende Schacht in der Tiefe. Mittelgrund: die Treppenstufen als
   scharfe, nach innen verblassende Ringe (Fokusfall zur Tiefe). Vordergrund:
   der nächste Handlaufbogen, leicht unscharf, rahmt das Bild von unten links.
   Licht: weiches Fenster-/Deckenlicht von oben links. */
.wna-leistung__buehne--spirale .wna-leistung__buehne-hintergrund {
	background: radial-gradient( circle at 50% 46%, var(--wp--preset--color--neutral-400) 0%, var(--wp--preset--color--neutral-200) 45%, var(--wp--preset--color--neutral-100) 100% );
}

.wna-leistung__buehne--spirale .wna-leistung__buehne-mittelgrund {
	background:
		radial-gradient( circle at 50% 46%, transparent 6%, color-mix( in srgb, var(--wp--custom--color--text-primary) 24%, transparent ) 6.8%, transparent 8% ),
		radial-gradient( circle at 50% 46%, transparent 15%, color-mix( in srgb, var(--wp--custom--color--text-primary) 17%, transparent ) 16%, transparent 17.5% ),
		radial-gradient( circle at 50% 46%, transparent 26%, color-mix( in srgb, var(--wp--custom--color--text-primary) 12%, transparent ) 27.2%, transparent 29% ),
		radial-gradient( circle at 50% 46%, transparent 40%, color-mix( in srgb, var(--wp--custom--color--text-primary) 8%, transparent ) 41.5%, transparent 44% );
}

.wna-leistung__buehne--spirale .wna-leistung__buehne-vordergrund {
	background: radial-gradient( 58% 32% at 10% 90%, color-mix( in srgb, var(--wp--custom--color--text-primary) 28%, transparent ) 0%, transparent 72% );
}

.wna-leistung__buehne--spirale .wna-leistung__buehne-licht {
	background: radial-gradient( 58% 58% at 24% 14%, color-mix( in srgb, var(--wp--preset--color--neutral-50) 60%, transparent ), transparent 65% );
}

.wna-leistung__buehne--spirale .wna-leistung__buehne-fokus {
	left: 33%;
	top: 29%;
	border-radius: 50%;
}

/* 2 — Winterdienst: die erste Spur. Hintergrund: unscharfe, dunkle Silhouetten
   in der Morgendämmerung. Mittelgrund: die geräumte Bahn als scharfe helle
   Diagonale durch den Schnee. Vordergrund: dunkle, leicht unscharfe Schneekante
   unten rechts, rahmt das Bild. Licht: kaltes Streiflicht von rechts oben,
   der Orange-Fund (Streugutbehälter) sitzt scharf am Wegrand. */
.wna-leistung__buehne--spur {
	background: linear-gradient( 155deg, var(--wp--custom--color--background-dark) 0%, var(--wp--preset--color--neutral-700) 100% );
}

.wna-leistung__buehne--spur .wna-leistung__buehne-hintergrund {
	background:
		radial-gradient( 50% 60% at 20% 20%, color-mix( in srgb, var(--wp--preset--color--neutral-700) 70%, transparent ), transparent 70% ),
		radial-gradient( 40% 50% at 76% 15%, color-mix( in srgb, var(--wp--preset--color--neutral-700) 55%, transparent ), transparent 70% );
}

.wna-leistung__buehne--spur .wna-leistung__buehne-mittelgrund {
	background:
		linear-gradient( 112deg, transparent 0%, transparent 36%, color-mix( in srgb, var(--wp--preset--color--text-inverse) 26%, transparent ) 44%, color-mix( in srgb, var(--wp--preset--color--text-inverse) 42%, transparent ) 50%, color-mix( in srgb, var(--wp--preset--color--text-inverse) 26%, transparent ) 56%, transparent 64%, transparent 100% ),
		radial-gradient( 90% 60% at 50% 100%, color-mix( in srgb, var(--wp--preset--color--neutral-700) 45%, transparent ), transparent 70% );
}

.wna-leistung__buehne--spur .wna-leistung__buehne-vordergrund {
	background: radial-gradient( 45% 26% at 90% 92%, color-mix( in srgb, var(--wp--custom--color--background-dark) 60%, transparent ) 0%, transparent 75% );
}

.wna-leistung__buehne--spur .wna-leistung__buehne-licht {
	background: radial-gradient( 45% 45% at 78% 28%, color-mix( in srgb, var(--wp--preset--color--accent) 24%, transparent ), transparent 60% );
}

.wna-leistung__buehne--spur .wna-leistung__buehne-fokus {
	left: 77%;
	top: 73%;
}

/* 4 — Rückbau: die offene Struktur. Hintergrund: heller, unscharfer Himmel.
   Mittelgrund: das scharfe Trägerraster (Decken/Stützen) im Gegenlicht.
   Vordergrund: eine dunkle, unscharfe Kante unten rechts (nahe Kante der
   Öffnung), rahmt das Bild. Licht: kühles Gegenlicht von oben, Orange-Fund
   (Absperrung) unten rechts scharf. */
.wna-leistung__buehne--struktur .wna-leistung__buehne-hintergrund {
	background: linear-gradient( 180deg, color-mix( in srgb, var(--wp--preset--color--neutral-100) 85%, transparent ) 0%, color-mix( in srgb, var(--wp--preset--color--neutral-400) 40%, transparent ) 100% );
}

.wna-leistung__buehne--struktur .wna-leistung__buehne-mittelgrund {
	background:
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 55%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 55%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 45%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 45%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 35%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 35%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 45%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 45%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 35%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 35%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--custom--color--text-primary) 28%, transparent ), color-mix( in srgb, var(--wp--custom--color--text-primary) 28%, transparent ) ),
		linear-gradient( 200deg, var(--wp--preset--color--neutral-700) 0%, var(--wp--custom--color--background-dark) 100% );
	background-repeat: no-repeat;
	background-size: 100% 3px, 100% 3px, 100% 3px, 3px 100%, 3px 100%, 3px 100%, 100% 100%;
	background-position: 0 20%, 0 48%, 0 76%, 18% 0, 50% 0, 80% 0, 0 0;
}

.wna-leistung__buehne--struktur .wna-leistung__buehne-vordergrund {
	background: radial-gradient( 50% 55% at 90% 92%, color-mix( in srgb, var(--wp--custom--color--background-dark) 62%, transparent ) 0%, transparent 70% );
}

.wna-leistung__buehne--struktur .wna-leistung__buehne-licht {
	background: linear-gradient( 200deg, color-mix( in srgb, var(--wp--preset--color--neutral-50) 32%, transparent ) 0%, transparent 45% );
}

.wna-leistung__buehne--struktur .wna-leistung__buehne-fokus {
	left: 79%;
	top: 77%;
}

/* 5 — Demontage: die geordnete Reihe. Kein Raster (las sich zuvor wie
   Millimeterpapier — Auftraggeber-Korrektur), sondern eine kleine, bewusst
   unregelmäßige Anzahl einzelner Bauteil-Flächen in zwei Reihen, mit
   Schattenkante darunter. Draufsicht statt Tiefenstaffelung (echte
   Overhead-Aufnahme hat kaum Vorder-/Hintergrund) — Tiefe entsteht über
   Streiflicht und die Schattenebene, nicht über gestaffelte Unschärfe.
   Orange-Fund: ein hervorgehobenes Bauteil in der Reihe. */
.wna-leistung__buehne--reihe .wna-leistung__buehne-hintergrund {
	background: linear-gradient( 135deg, var(--wp--preset--color--neutral-50) 0%, var(--wp--preset--color--neutral-100) 100% );
}

.wna-leistung__buehne--reihe .wna-leistung__buehne-mittelgrund {
	background:
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( var(--wp--preset--color--accent), var(--wp--preset--color--accent) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-400) 70%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ) ),
		linear-gradient( color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ), color-mix( in srgb, var(--wp--preset--color--neutral-700) 8%, transparent ) );
	background-repeat: no-repeat;
	background-size:
		20% 12%, 14% 12%, 24% 10%, 16% 12%,
		12% 12%, 22% 10%, 18% 12%, 14% 10%,
		20% 3%, 14% 3%, 22% 3%, 16% 3%;
	background-position:
		6% 18%, 30% 20%, 48% 16%, 76% 18%,
		6% 48%, 22% 50%, 48% 48%, 70% 50%,
		6% 30%, 30% 32%, 22% 60%, 76% 30%;
}

.wna-leistung__buehne--reihe .wna-leistung__buehne-vordergrund {
	background: none;
}

.wna-leistung__buehne--reihe .wna-leistung__buehne-licht {
	background: radial-gradient( 70% 70% at 18% 8%, color-mix( in srgb, var(--wp--preset--color--neutral-50) 65%, transparent ), transparent 60% );
}

.wna-leistung__buehne--reihe .wna-leistung__buehne-fokus {
	width: 0;
	height: 0;
	left: 12%;
	top: 48%;
	box-shadow: none;
	background-color: transparent;
}

/* 6 — Transporte: die Rampe im ersten Licht. Hintergrund: warmer, unscharfer
   Horizont-Glanz. Mittelgrund: die scharfe Rampenkante als dominante Diagonale.
   Vordergrund: dunkle, unscharfe Kante unten links (nahe Fahrzeugkante).
   Licht: warmes Streiflicht von oben rechts, Orange-Fund unten links scharf. */
.wna-leistung__buehne--rampe .wna-leistung__buehne-hintergrund {
	background: radial-gradient( 70% 60% at 50% 0%, color-mix( in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--neutral-100) ) 0%, var(--wp--preset--color--neutral-50) 70% );
}

.wna-leistung__buehne--rampe .wna-leistung__buehne-mittelgrund {
	background:
		linear-gradient( 198deg, transparent 0%, transparent 40%, color-mix( in srgb, var(--wp--custom--color--text-primary) 24%, transparent ) 46%, transparent 52%, transparent 100% ),
		linear-gradient( 198deg, color-mix( in srgb, var(--wp--preset--color--neutral-400) 45%, transparent ) 0%, transparent 60% );
}

.wna-leistung__buehne--rampe .wna-leistung__buehne-vordergrund {
	background: linear-gradient( 198deg, color-mix( in srgb, var(--wp--custom--color--text-primary) 48%, transparent ) 0%, transparent 30% );
}

.wna-leistung__buehne--rampe .wna-leistung__buehne-licht {
	background: radial-gradient( 60% 50% at 70% 5%, color-mix( in srgb, var(--wp--preset--color--accent) 32%, transparent ), transparent 60% );
}

.wna-leistung__buehne--rampe .wna-leistung__buehne-fokus {
	left: 20%;
	top: 82%;
	border-radius: 50%;
}

/* ---------- Leistungsumfang/Einsatzbereiche/Arbeitsweise: bestehende, kurze
   Absätze bekommen typografische Führung statt neuer, erfundener Inhalte. ---------- */

.wna-leistung__inhalt {
	padding-block: var(--wp--preset--spacing--7);
	max-width: 62ch;
}

.wna-leistung__inhalt > p:first-child {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--custom--color--text-primary);
}

.wna-leistung__inhalt h2 {
	margin-top: var(--wp--preset--spacing--7);
	font-size: var(--wp--preset--font-size--h-4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 2px solid var(--wp--preset--color--neutral-200);
}

.wna-leistung__inhalt h2:first-of-type {
	margin-top: var(--wp--preset--spacing--6);
}

/* ---------- Sanierung: Vorher/Nachher-Regler als eigenständiger Hero (zeigt
   statt erzählt — braucht deshalb weniger begleitenden Text als die anderen
   fünf Seiten). Bewusst ohne Sucherrahmen: der Regler hat mit Griff, Labels
   und Chamfer bereits eine eigene, unverwechselbare Bedienoberfläche. ---------- */

.wna-leistung__hero-schlicht {
	padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--neutral-100);
}

.wna-leistung__vorher-nachher-hero .wna-vorher-nachher {
	aspect-ratio: 16 / 7;
	margin-top: 0;
}

@media ( min-width: 800px ) {
	.wna-leistung__vorher-nachher-hero .wna-vorher-nachher {
		aspect-ratio: 21 / 8;
	}
}

/* ---------- Demontage: ruhiges Bild-Text-Hero nebeneinander — Präzision statt
   Drama, eigenständige Struktur (kein Hero-Band, keine Vollflächen-Dramatik). ---------- */

.wna-leistung__praezision-hero {
	padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	background-color: var(--wp--preset--color--neutral-100);
}

.wna-leistung__praezision-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--5);
	align-items: center;
}

@media ( min-width: 800px ) {
	.wna-leistung__praezision-hero-grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--wp--preset--spacing--7);
	}
}

/* Demontage-Hero-Bild (2026-08-09): Das freigegebene Motiv ist im
   Querformat (1536×1024, 3:2) geliefert, die Fläche war ursprünglich für
   ein Hochformat-Motiv (4:5) vorgesehen. Statt das echte Bild in ein
   falsches Seitenverhältnis zu zwingen (Beschnitt), übernimmt
   .wna-leistung__praezision-hero-bild-wrap dieselbe "Contain"-Technik wie
   das Startseiten-Hero-Bild (width:fit-content + max-width/max-height auf
   dem Bild selbst): Bild und Rahmen schrumpfen proportional auf ihre
   tatsächliche Größe, das Seitenverhältnis bleibt exakt erhalten, kein
   Beschnitt-Pfad vorhanden. */
.wna-leistung__praezision-hero-bild-wrap {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.wna-leistung__praezision-hero-bild {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 260px;
}

@media ( min-width: 800px ) {
	.wna-leistung__praezision-hero-bild {
		max-height: 340px;
	}
}

.wna-leistung__praezision-hero-bild-wrap .wna-leistung__hero-band-rahmen {
	color: var(--wp--custom--color--text-primary);
}

/* ---------- Vertrauens-/Referenzprojekt-Abschnitte: bestehende Komponenten
   (layout.css), hier nur Abstände an das neue Seitenraster angepasst. ---------- */

.wna-leistung__vertrauen,
.wna-leistung__projekte {
	padding-block: var(--wp--preset--spacing--7);
}

.wna-leistung__projekte-leer {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--xs);
	max-width: 62ch;
}

/* Premium-Abzeichen und Betreuungsnachweis-Mosaik (Referenzsystem, Sprint 3 der
   Umsetzungsphase). Identische Regeln wie in projekt.css (Sprint 1) — dort nicht
   wiederverwendbar, da auf Leistungsseiten nur dieses Stylesheet geladen wird;
   bei Änderung an einer Stelle die jeweils andere mitpflegen. */

.wna-projekt-card__abzeichen {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--wp--custom--color--text-primary);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.wna-betreuung-mosaik {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var(--wp--preset--spacing--3);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media ( min-width: 600px ) {
	.wna-betreuung-mosaik {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.wna-betreuung-mosaik {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.wna-betreuung-kachel__bild {
	display: block;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.wna-betreuung-kachel__bild img {
	width: 100%;
	aspect-ratio: 640 / 420;
	object-fit: cover;
	display: block;
}

.wna-betreuung-kachel__label {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	margin: var(--wp--preset--spacing--2) 0 0;
}

.wna-betreuung-kachel__label a {
	color: inherit;
	text-decoration: none;
}

.wna-betreuung-kachel__label a:hover,
.wna-betreuung-kachel__label a:focus-visible {
	text-decoration: underline;
}

.wna-leistung__zielgruppe-link {
	margin-block-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

/* ---------- Übersichtsseite "Leistungen": eigene Aufgabe (Wegweiser, nicht
   Markenerlebnis). Wow-Moment-Konzept (nach Auftraggeber-Korrekturrunde):
   großformatiger, aber begrenzter Split — auf typischen Desktop-/Laptop-Höhen
   müssen beide Säulen, ihre Bedeutung, die Leistungslinks und die Auswahl-
   möglichkeit ohne Suchen sichtbar bleiben (daher clamp() statt hoher vh-Wert).
   Hover ist ausschließlich Zusatzwirkung — im Grundzustand sind beide Säulen
   vollständig hochwertig und gleichwertig lesbar, keine Abhängigkeit von
   Hover/Touch für Inhalt, Kontrast oder Links. Diagonale Chamfer-Naht nutzt
   den neuen Token --wp--custom--cut--lg (theme.json) — dieselbe Formsprache
   wie die kleinen Chamfer-Buttons, nur architektonisch groß angewendet, nicht
   als eigener Effekt erfunden. Auf Mobil entfällt die Diagonale vollständig
   (reine Blockstapelung), keine Interaktionsabhängigkeit auf Touch-Geräten. ---------- */

.wna-leistungen-uebersicht__intro {
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
}

.wna-leistungen-uebersicht__intro-zeile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__intro-zeile {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--6);
	}
}

.wna-leistungen-uebersicht__intro h1 {
	margin: 0;
	font-size: clamp( 2.1rem, 5vw, 3rem );
	letter-spacing: -0.01em;
	max-width: 16ch;
}

.wna-leistungen-uebersicht__intro .wna-abschnitt__unterzeile {
	margin: 0;
	max-width: 42ch;
	font-size: var(--wp--preset--font-size--body);
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__intro .wna-abschnitt__unterzeile {
		text-align: right;
		padding-bottom: 0.25em;
	}
}

.wna-leistungen-uebersicht__split {
	display: flex;
	flex-direction: column;
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__split {
		flex-direction: row;
	}
}

.wna-leistungen-uebersicht__saeule {
	position: relative;
	flex: 1 1 50%;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp( 380px, 52vw, 500px );
	transition: filter 380ms ease;
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__saeule {
		min-height: clamp( 460px, 52vh, 640px );
	}

	/* Hover ist reine Zusatzwirkung (Auftraggeber-Vorgabe): dezentes
	   Zurücknehmen der jeweils nicht gehaltenen Säule, niemals Grundlage
	   für Kontrast/Lesbarkeit — beide Zustände bleiben voll lesbar. */
	.wna-leistungen-uebersicht__split:hover .wna-leistungen-uebersicht__saeule {
		filter: brightness( 0.92 );
	}

	.wna-leistungen-uebersicht__split .wna-leistungen-uebersicht__saeule:hover,
	.wna-leistungen-uebersicht__split .wna-leistungen-uebersicht__saeule:focus-within {
		filter: brightness( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wna-leistungen-uebersicht__saeule {
		transition: none;
	}
}

.wna-leistungen-uebersicht__saeule-bild {
	position: absolute;
	inset: 0;
	min-height: unset;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__saeule--b {
		clip-path: polygon( var(--wp--custom--cut--lg) 0, 100% 0, 100% 100%, 0 100% );
		margin-left: calc( var(--wp--custom--cut--lg) * -1 );
	}
}

.wna-leistungen-uebersicht__saeule-schleier {
	position: absolute;
	inset: 0;
}

.wna-leistungen-uebersicht__saeule--a .wna-leistungen-uebersicht__saeule-schleier {
	background:
		radial-gradient( 120% 90% at 50% 100%, color-mix( in srgb, var(--wp--preset--color--neutral-50) 55%, transparent ), transparent 70% ),
		linear-gradient( 0deg, color-mix( in srgb, var(--wp--preset--color--neutral-50) 90%, transparent ) 0%, color-mix( in srgb, var(--wp--preset--color--neutral-50) 12%, transparent ) 62%, transparent 100% );
}

.wna-leistungen-uebersicht__saeule--b .wna-leistungen-uebersicht__saeule-schleier {
	background:
		radial-gradient( 120% 90% at 50% 100%, color-mix( in srgb, var(--wp--custom--color--background-dark) 60%, transparent ), transparent 70% ),
		linear-gradient( 0deg, color-mix( in srgb, var(--wp--custom--color--background-dark) 94%, transparent ) 0%, color-mix( in srgb, var(--wp--custom--color--background-dark) 32%, transparent ) 62%, transparent 100% );
}

.wna-leistungen-uebersicht__saeule--b {
	color: var(--wp--preset--color--text-inverse);
}

/* Sucherrahmen — signalisiert bereits vor echter Fotografie "hier entsteht
   ein bewusst gerahmtes Bild", statt einer beliebigen Texturfläche. Reine
   CSS-Eckmarken (wie ein Kamera-/Viewfinder-Rahmen), kein neues Bildasset. */

.wna-leistungen-uebersicht__saeule-rahmen {
	position: absolute;
	inset: var(--wp--preset--spacing--4);
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	background-repeat: no-repeat;
	background-image:
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor );
	background-size:
		26px 1.5px, 1.5px 26px,
		26px 1.5px, 1.5px 26px,
		26px 1.5px, 1.5px 26px,
		26px 1.5px, 1.5px 26px;
	background-position:
		top left, top left,
		top right, top right,
		bottom left, bottom left,
		bottom right, bottom right;
}

.wna-leistungen-uebersicht__saeule--a .wna-leistungen-uebersicht__saeule-rahmen {
	color: var(--wp--custom--color--text-primary);
}

.wna-leistungen-uebersicht__saeule--b .wna-leistungen-uebersicht__saeule-rahmen {
	color: var(--wp--preset--color--text-inverse);
}

.wna-leistungen-uebersicht__saeule-inhalt {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
}

@media ( min-width: 800px ) {
	.wna-leistungen-uebersicht__saeule-inhalt {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	}

	.wna-leistungen-uebersicht__saeule--b .wna-leistungen-uebersicht__saeule-inhalt {
		padding-left: calc( var(--wp--preset--spacing--6) + var(--wp--custom--cut--lg) );
	}
}

.wna-leistungen-uebersicht__label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--2);
}

.wna-leistungen-uebersicht__saeule h2 {
	font-size: clamp( 1.9rem, 4.4vw, 2.9rem );
	line-height: 1.02;
	letter-spacing: -0.01em;
	max-width: 12ch;
}

.wna-leistungen-uebersicht__saeule--a h2 {
	color: var(--wp--custom--color--text-primary);
}

.wna-leistungen-uebersicht__saeule--b h2 {
	color: var(--wp--preset--color--text-inverse);
}

.wna-leistungen-uebersicht__differenzierung {
	margin-top: var(--wp--preset--spacing--2);
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--body);
}

.wna-leistungen-uebersicht__saeule--a .wna-leistungen-uebersicht__differenzierung {
	color: var(--wp--preset--color--text-secondary);
}

.wna-leistungen-uebersicht__saeule--b .wna-leistungen-uebersicht__differenzierung {
	color: var(--wp--preset--color--neutral-400);
}

.wna-leistungen-uebersicht__liste {
	list-style: none;
	margin: var(--wp--preset--spacing--4) 0 0;
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid color-mix( in srgb, currentColor 18%, transparent );
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
}

.wna-leistungen-uebersicht__liste a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body);
}

.wna-leistungen-uebersicht__saeule--a .wna-leistungen-uebersicht__liste a {
	color: var(--wp--custom--color--text-primary);
}

.wna-leistungen-uebersicht__saeule--b .wna-leistungen-uebersicht__liste a {
	color: var(--wp--preset--color--text-inverse);
}

.wna-leistungen-uebersicht__liste a:hover,
.wna-leistungen-uebersicht__liste a:focus-visible {
	text-decoration: underline;
}