/**
 * WNA Vision — Startseite (Sprint 13, Prototyp-v2-Umsetzung).
 *
 * Ersetzt die Sprint-8-Fassung vollständig. Ausschließlich auf der Startseite
 * geladen (siehe functions.php) — alle Klassen hier sind bewusst homepage-
 * exklusiv benannt (wna-hero, wna-trust-band, wna-problem, wna-saeulen,
 * wna-chips, wna-ablauf, wna-massstab, wna-warum, wna-portfolio,
 * wna-final-cta) und überschneiden sich nicht mit den in layout.css
 * definierten, von den Leistungsseiten mitgenutzten Klassen
 * (.wna-vertrauen__liste, .wna-projektteaser__*, .wna-cta-band*) — diese
 * bleiben unverändert, siehe DECISIONS.md.
 *
 * Seit Phase 1 (Leistungssystem-Redesign) sind mehrere ursprünglich hier
 * entwickelte Bausteine — Chamfer, Demo-Bildsystem, Reveal-on-Scroll,
 * Abschnitts-Grundgerüst (Eyebrow/Unterzeile), Vorher/Nachher-Modul — nach
 * layout.css verschoben, weil auch die Leistungsseiten sie nutzen. Seit der
 * Conversion-Priorität (2026-08-04) gilt dasselbe für die Sticky-Mobil-
 * Kontaktleiste (jetzt global). Diese Datei enthält nur noch, was
 * ausschließlich auf der Startseite vorkommt.
 *
 * Nutzt ausschließlich Design-Tokens aus theme.json, inkl. der neuen
 * custom.cut-Token (Sprint 13) für die Chamfer-Formsprache. Mobile-first,
 * globale Breakpoints (siehe main.css): Mobil 0–599px, Tablet ab 600px,
 * Desktop ab 1024px.
 */

/* ---------- Hero ---------- */

.wna-hero {
	padding-block: var( --wp--preset--spacing--7 ) var( --wp--preset--spacing--6 );
	position: relative;
	overflow: hidden;
}

@media ( min-width: 600px ) {
	.wna-hero {
		padding-block: var( --wp--preset--spacing--8 ) var( --wp--preset--spacing--7 );
	}
}

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

@media ( min-width: 1024px ) {
	.wna-hero__grid {
		/* Verhältnis von 1.02fr/0.98fr auf 1.18fr/0.82fr angepasst (2026-08-05,
		   Auftraggeber-Rückfrage): Messung ergab, dass die Textspalte auf jeder
		   Desktop-Breite bislang exakt auf die Breite von "Bestandsimmobilien"
		   traf (Randabstand unter 0,02px) — die Spaltenbreite wird von CSS Grid
		   automatisch auf den Mindestinhalt der Spalte begrenzt, unabhängig vom
		   deklarierten fr-Verhältnis oder der H1-max-width in ch (beides geprüft
		   und ohne Wirkung). Das bisherige Verhältnis stand damit ohne jeden
		   Sicherheitsabstand exakt an der Umbruchgrenze — in dieser Testumgebung
		   noch unauffällig, in anderen Rendering-Engines/Betriebssystemen durch
		   minimale Unterschiede in der Zeichenbreite bereits über die Kante
		   kippend. Neues Verhältnis schafft einen gemessenen Sicherheitsabstand
		   von ca. 18px (1024px Breite) bis 28px (ab 1280px, deckelt danach durch
		   die Container-Höchstbreite). Zeilenaufteilung des Textes bleibt dabei
		   unverändert (geprüft 1024–1920px) — reine Randabstands-Korrektur,
		   keine Schriftgröße, kein Token geändert. */
		grid-template-columns: 1.18fr 0.82fr;
		gap: var( --wp--preset--spacing--7 );
	}
}

.wna-hero__marke {
	position: relative;
	display: inline-block;
	font-size: var( --wp--preset--font-size--xs );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --wp--preset--color--text-secondary );
	margin: 0 0 var( --wp--preset--spacing--4 );
	padding-bottom: var( --wp--preset--spacing--2 );
}

.wna-hero__marke::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 2px;
	background-color: var( --wp--preset--color--accent );
}

.wna-hero h1 {
	font-size: clamp( var( --wp--preset--font-size--h-1 ), 6vw, 3.4rem );
	letter-spacing: -0.01em;
	max-width: 15ch;
	margin-bottom: var( --wp--preset--spacing--4 );
	/* Lokale, begründete Korrektur (2026-08-05, Regressionsprüfung nach dem
	   Typografie-Fix): "Bestandsimmobilien" allein misst bei der jetzt
	   korrekt greifenden 3rem-Mindestgröße ca. 461px Breite — auf schmalen
	   Mobilgeräten breiter als der verfügbare Platz. Beim vorherigen 16px-Bug
	   unsichtbar geblieben. Zwei Maßnahmen statt einer reinen Notbremse:
	   (1) unten eine schmale Bühne mit rechnerisch ermittelter Mindestgröße,
	   damit das Wort auf jeder noch relevanten Telefonbreite (getestet ab
	   320px Gerätebreite) gar nicht erst umbrechen muss; (2) als Absicherung
	   für noch schmalere, praktisch nicht mehr relevante Altgeräte echte
	   deutsche Trennung (hyphens: auto, greift durch das gesetzte lang="de"
	   auf <html>) statt eines rohen Zeichenumbruchs mitten im Wort —
	   overflow-wrap bleibt als letzte Absicherung, falls eine Umgebung weder
	   die schmale Bühnengröße noch die Trennungs-Wörterliste anwendet. */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

@media ( max-width: 600px ) {
	.wna-hero h1 {
		/* Mindestgröße rechnerisch ermittelt, nicht geschätzt: "Bestandsimmobilien"
		   misst bei 48px/3rem ca. 460.6px Breite. Bei 1.8rem (28.8px) ergibt sich
		   daraus eine Wortbreite von ca. 276px — das passt mit Sicherheitsabstand
		   auch auf den schmalsten noch relevanten Bildschirm (320px Gerätebreite,
		   ca. 288px verfügbare Inhaltsbreite nach Seitenabstand). Damit muss das
		   Wort auf keiner realistisch genutzten Bildschirmbreite umbrechen; die
		   Trennungs- bzw. Notumbruch-Regeln oben bleiben nur als Absicherung für
		   noch schmalere, praktisch nicht mehr relevante Altgeräte bestehen. */
		font-size: clamp( 1.8rem, 9vw, 3rem );
	}
}

@media ( min-width: 1024px ) {
	.wna-hero h1 {
		font-size: clamp( var( --wp--preset--font-size--h-1 ), 5.2vw, 4rem );
	}
}

.wna-hero h1 .wna-hero__akzent {
	color: var( --wp--preset--color--accent );
}

.wna-hero__subline {
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-secondary );
	margin-bottom: var( --wp--preset--spacing--5 );
}

.wna-hero__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--5 );
}

.wna-hero__cta {
	display: inline-block;
	padding: var( --wp--preset--spacing--3 ) var( --wp--preset--spacing--6 );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--accent );
}

.wna-hero__cta:hover {
	text-decoration: underline;
}

.wna-hero__link {
	display: inline-block;
	font-weight: 600;
}

.wna-hero__belege {
	margin-top: var( --wp--preset--spacing--5 );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--5 );
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--text-secondary );
}

.wna-hero__belege span {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wna-hero__belege span::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	flex-shrink: 0;
}

/* Netzwerk-Grafik, finale Fassung (2026-08-09, Auftraggeber-Lieferung
   "Netzwerk Final.png"): bewusst im Hochformat gestaltet (1024x1536,
   Seitenverhältnis exakt 2:3) — löst die vorherige Querformat-Fassung (3:2)
   ab. .wna-hero__visual schrumpft per width:fit-content auf die tatsächliche
   Bildgröße statt die volle Grid-Spalte zu füllen (Hochformat + volle
   Spaltenbreite hätte eine unverhältnismäßig hohe Box ergeben); der
   dekorative Rahmen (::after) bleibt dadurch exakt an der Bildkante statt an
   der breiteren Spalte. margin-inline:auto zentriert das Bild mobil/Tablet
   unter dem gestapelten Text; ab Desktop rückt margin-left:auto es stattdessen
   an den rechten Spaltenrand (weg vom Text), wie schon in der Vorfassung. */
.wna-hero__visual {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* max-width:100% + aspect-ratio:2/3 + max-height (width/height beide auto)
   verkleinert das Bild proportional auf die jeweils knappere der beiden
   Grenzen (Spaltenbreite oder Höhen-Deckel), das Seitenverhältnis bleibt
   dabei immer exakt erhalten. Kein object-fit gesetzt (Default "fill" bleibt
   wirkungslos, da Box- und Bildverhältnis durch aspect-ratio ohnehin
   identisch sind) — dadurch strukturell kein Beschnitt-Pfad mehr vorhanden
   (anders als beim vorherigen min-height-Ansatz mit object-fit:cover, der
   genau dadurch einen unbemerkten Crop-Bug verursacht hatte). Die
   Höhen-Deckel je Breakpoint verhindern, dass ein Hochformat-Bild bei voller
   Spaltenbreite eine unverhältnismäßig hohe Hero-Sektion erzwingt; verifiziert
   über eine isolierte Test-Seite mit dem
   echten Bild (Browser-Zugriff auf die WP-Instanz war wie in früheren
   Sprints blockiert): Seitenverhältnis bei 320–1920px durchgehend exakt 2:3,
   kein horizontaler Überlauf, Hero-Höhe wird auf allen getesteten Breiten
   primär vom (unveränderten) Hero-Text bestimmt, nicht vom Bild. */
.wna-hero__visual img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	aspect-ratio: 2 / 3;
	max-height: 420px;
}

@media ( min-width: 600px ) {
	.wna-hero__visual img {
		max-height: 480px;
	}
}

@media ( min-width: 1024px ) {
	.wna-hero__visual {
		margin-inline: 0;
		margin-left: auto;
	}

	.wna-hero__visual img {
		/* In der Praxis selten die bindende Grenze: Die Grid-Spalte ist ab
		   ca. 1200px Viewport-Breite auf ca. 446px gedeckelt, was bei 2:3
		   bereits eine Höhe von ca. 669px ergibt (< 670px) — der eigentlich
		   flächenausnutzende Faktor ist hier die Spaltenbreite selbst. Der
		   Wert dient als bewusst gesetzte Obergrenze, falls die Spalte
		   künftig breiter wird. */
		max-height: 670px;
	}
}

.wna-hero__visual::after {
	content: "";
	position: absolute;
	right: -14px;
	bottom: -14px;
	width: 55%;
	height: 55%;
	/* Die Netzwerk-Grafik nutzt ein eigenes Navy/Gold statt des
	   Anthrazit/Orange-Farbschemas der Website (Farbharmonie-Prüfung,
	   2026-08-09) — ein nachträgliches globales Recolorieren des bereits
	   gerasterten Infografik-Bildes wäre riskant (Text/Icons würden
	   unkontrolliert mitverfärbt). Als sicherer, dezenter Farbanker stattdessen
	   der bestehende Rahmen leicht in Richtung Akzentfarbe getönt. */
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--accent ) 35%, var( --wp--preset--color--neutral-200 ) );
	z-index: -1;
	clip-path: polygon( 0 0, calc( 100% - var( --wp--custom--cut--md ) ) 0, 100% var( --wp--custom--cut--md ), 100% 100%, 0 100% );
}

/* Abschnitts-Grundgerüst (.wna-abschnitt*, .wna-eyebrow) und das Vorher/
   Nachher-Modul (.wna-vorher-nachher*) sind nach layout.css verschoben
   (Phase 1, Leistungssystem nutzt beide mit) — hier nicht mehr definiert. */

/* ---------- Vertrauensarchitektur Kapitel 1 — Vertrauen durch Zusammenarbeit.
   Bewusst vereinfacht (2026-08-04, Variante A): reine Vertrauens-Logozeile,
   keine Beziehungserklärung mehr, keine Karten, keine Trennlinien, kein
   Text unter den Logos — der Firmenname bleibt ausschließlich als Alt-Text
   am Bild zugänglich. Zentrierte Komposition, gemeinsame Grundlinie
   (align-items: flex-end), aber bewusst KEINE einheitliche Pixelhöhe: jedes
   Logo erhält über --wna-partner-logo-scale einen kleinen individuellen
   Ausgleichsfaktor, damit alle vier optisch gleich stark wirken statt nur
   gleich hoch skaliert zu sein (z. B. das feine Pramor-Medical-Logo etwas
   größer als das sehr kräftige Pejano-Logo). Feinjustierung (2026-08-04,
   finale Abnahmerunde): Basishöhe um ca. 25 % angehoben (mehr Bühne für die
   Logos), Abstand zur Überschrift/Einleitung von Space 8 auf Space 9
   vergrößert, Ausgleichsfaktoren je Logo ein weiteres Mal fein nachjustiert.
   Originalproportionen je Logo bleiben über object-fit: contain erhalten,
   unterschiedliche Breiten sind gewollt. Gestaffeltes Einblenden weiterhin
   über die bestehende .wna-reveal-Mechanik (transition-delay je Logo, siehe
   front-page.php) — einzige zulässige Bewegung, kein Hover-Effekt. Array in
   front-page.php ist für weiteres Wachstum ausgelegt (weitere Auftraggeber =
   weitere Array-Einträge, keine Strukturänderung nötig). ---------- */

.wna-partner {
	text-align: center;
}

.wna-partner .wna-abschnitt__unterzeile {
	margin-inline: auto;
}

.wna-partner__liste {
	--wna-partner-logo-base: 50px;
	margin: var( --wp--preset--spacing--9 ) auto 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: clamp( 2.5rem, 6vw, 5.5rem );
	row-gap: var( --wp--preset--spacing--7 );
	list-style: none;
	padding: 0;
	max-width: 980px;
}

.wna-partner__eintrag {
	display: flex;
}

.wna-partner__logo {
	display: block;
	height: calc( var( --wna-partner-logo-base ) * var( --wna-partner-logo-scale, 1 ) );
	width: auto;
	object-fit: contain;
	object-position: bottom center;
}

.wna-partner__logo--ghg {
	--wna-partner-logo-scale: 1.08;
}

.wna-partner__logo--pejano {
	--wna-partner-logo-scale: 0.88;
}

.wna-partner__logo--pramor-medical {
	--wna-partner-logo-scale: 1.2;
}

.wna-partner__logo--up-down {
	--wna-partner-logo-scale: 0.98;
}

@media ( max-width: 900px ) {
	.wna-partner__liste {
		--wna-partner-logo-base: 42px;
		column-gap: clamp( 2rem, 8vw, 3.5rem );
	}
}

@media ( max-width: 600px ) {
	.wna-partner__liste {
		--wna-partner-logo-base: 38px;
		justify-content: space-between;
		column-gap: var( --wp--preset--spacing--5 );
	}

	.wna-partner__eintrag {
		flex: 0 0 calc( 50% - var( --wp--preset--spacing--3 ) );
		justify-content: center;
	}
}

/* ---------- Vertrauensarchitektur Kapitel 2 — Professionelle Standards.
   Klarer 2-Spalten-Kartenbereich statt dossierartiger Liste (gestalterische
   Verfeinerung 2026-08-04): ruhige Neutralfläche je Nachweis, feiner Rahmen
   (per grid-gap-Hairline), kein Schatten. Bewusst kein Siegel-/Badge-Raster:
   dreiteiliges, beliebig erweiterbares Format (Bezeichnung — Fakt — Nutzen). ---------- */

.wna-standards__liste {
	margin-top: var( --wp--preset--spacing--7 );
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --wp--preset--color--neutral-200 );
}

@media ( min-width: 760px ) {
	.wna-standards__liste {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.wna-standards__eintrag {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--3 );
	padding: var( --wp--preset--spacing--6 ) var( --wp--preset--spacing--5 );
	background-color: var( --wp--preset--color--neutral-50 );
}

.wna-standards__eintrag h3 {
	margin: 0;
	font-size: var( --wp--preset--font-size--h-4 );
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --wp--custom--color--text-primary );
}

.wna-standards__fakt {
	margin: 0;
	color: var( --wp--custom--color--text-primary );
}

.wna-standards__nutzen {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	margin: auto 0 0;
	padding-top: var( --wp--preset--spacing--3 );
	border-top: 1px solid var( --wp--preset--color--neutral-200 );
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--text-secondary );
}

.wna-standards__nutzen::before {
	content: "";
	flex: none;
	margin-top: 0.6em;
	width: 14px;
	height: 1px;
	background-color: var( --wp--preset--color--accent );
}

/* ---------- Vertrauensband (dunkel, vierspaltig) ---------- */

.wna-trust-band {
	margin-top: var( --wp--preset--spacing--6 );
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --wp--preset--color--neutral-700 );
	border: 1px solid var( --wp--preset--color--neutral-700 );
}

@media ( min-width: 600px ) {
	.wna-trust-band { grid-template-columns: repeat( 2, 1fr ); }
}

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

.wna-trust-band__punkt {
	background-color: var( --wp--custom--color--background-dark );
	padding: var( --wp--preset--spacing--5 ) var( --wp--preset--spacing--4 );
}

.wna-trust-band__punkt .wna-trust-band__nummer {
	display: block;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--accent );
	margin-bottom: var( --wp--preset--spacing--3 );
}

.wna-trust-band__punkt h3 {
	font-size: var( --wp--preset--font-size--h-4 );
	color: var( --wp--preset--color--text-inverse );
	margin-bottom: var( --wp--preset--spacing--2 );
}

.wna-trust-band__punkt p {
	font-size: var( --wp--preset--font-size--body );
	color: var( --wp--preset--color--neutral-400 );
}

/* ---------- Problem-/Entlastungsabschnitt ---------- */

.wna-problem__liste {
	margin-top: var( --wp--preset--spacing--6 );
	display: grid;
	gap: 1px;
	background-color: var( --wp--preset--color--neutral-200 );
	border-top: 1px solid var( --wp--preset--color--neutral-200 );
}

.wna-problem__zeile {
	display: flex;
	gap: var( --wp--preset--spacing--4 );
	padding: var( --wp--preset--spacing--4 ) 0;
	border-bottom: 1px solid var( --wp--preset--color--neutral-200 );
	align-items: baseline;
	background-color: var( --wp--preset--color--neutral-50 );
}

.wna-problem__zeile span {
	color: var( --wp--preset--color--text-secondary );
	flex-shrink: 0;
}

/* ---------- Zwei Säulen (Bild-Text) ---------- */

.wna-saeulen__grid {
	margin-top: var( --wp--preset--spacing--6 );
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--6 );
}

@media ( min-width: 800px ) {
	.wna-saeulen__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.wna-saeulen__karte {
	border: 1px solid var( --wp--preset--color--neutral-200 );
	overflow: hidden;
}

.wna-saeulen__karte > img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wna-saeulen__inhalt {
	padding: var( --wp--preset--spacing--5 ) var( --wp--preset--spacing--5 ) var( --wp--preset--spacing--6 );
}

.wna-saeulen__label {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--accent );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wna-saeulen__inhalt h3 {
	font-size: var( --wp--preset--font-size--h-3 );
	margin-top: var( --wp--preset--spacing--2 );
}

.wna-saeulen__inhalt p {
	margin-top: var( --wp--preset--spacing--3 );
	color: var( --wp--preset--color--text-secondary );
}

.wna-saeulen__link {
	margin-top: var( --wp--preset--spacing--4 );
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
}

/* ---------- Leistungs-Chips ---------- */

.wna-chips {
	margin-top: var( --wp--preset--spacing--6 );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--3 );
}

.wna-chips__chip {
	border: 1px solid var( --wp--preset--color--neutral-200 );
	padding: 0.6em 1.2em;
	font-size: var( --wp--preset--font-size--body );
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.wna-chips__chip:hover {
	border-color: var( --wp--preset--color--accent );
	background-color: var( --wp--preset--color--neutral-100 );
	text-decoration: none;
}

/* ---------- Maßstab — randlose, vollflächige Sektion ---------- */

.wna-massstab {
	position: relative;
	overflow: hidden;
	min-height: clamp( 380px, 56vw, 560px );
	display: flex;
	align-items: flex-end;
}

.wna-massstab__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rückfall-Absicherung, falls #92 einmal kein Beitragsbild mehr hat (siehe
   PROJECT_LOG.md) — dieselbe Vollflächen-Behandlung wie zuvor für die
   CSS-Demo-Platzhalter. */
.wna-massstab .wna-demo-bild {
	position: absolute;
	inset: 0;
	min-height: unset;
	aspect-ratio: unset;
	height: 100%;
}

.wna-massstab__schleier {
	position: absolute;
	inset: 0;
	background: linear-gradient( 0deg, color-mix( in srgb, var( --wp--custom--color--background-dark ) 92%, transparent ) 0%, color-mix( in srgb, var( --wp--custom--color--background-dark ) 35%, transparent ) 55%, transparent 100% );
}

.wna-massstab__inhalt {
	position: relative;
	z-index: 2;
	padding: var( --wp--preset--spacing--7 ) var( --wp--preset--spacing--4 );
	color: var( --wp--preset--color--text-inverse );
	width: 100%;
}

@media ( min-width: 600px ) {
	.wna-massstab__inhalt {
		padding-inline: var( --wp--preset--spacing--6 );
		padding-block: var( --wp--preset--spacing--8 );
	}
}

.wna-massstab__innen {
	max-width: 1200px;
	margin-inline: auto;
}

.wna-massstab h2 {
	font-size: clamp( var( --wp--preset--font-size--h-2 ), 4.2vw, 2.6rem );
	max-width: 20ch;
	color: var( --wp--preset--color--text-inverse );
}

.wna-massstab p.wna-abschnitt__unterzeile {
	color: var( --wp--preset--color--neutral-400 );
}

.wna-massstab__merkmale {
	margin-top: var( --wp--preset--spacing--5 );
	display: flex;
	gap: var( --wp--preset--spacing--6 );
	flex-wrap: wrap;
}

.wna-massstab__merkmale div {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--neutral-400 );
	border-top: 1px solid var( --wp--preset--color--accent );
	padding-top: var( --wp--preset--spacing--2 );
	max-width: 20ch;
}

/* ---------- Ablauf ---------- */

.wna-ablauf__grid {
	margin-top: var( --wp--preset--spacing--6 );
	display: grid;
	grid-template-columns: 1fr;
}

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

.wna-ablauf__schritt {
	position: relative;
	padding: var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--4 ) 0;
	border-top: 2px solid var( --wp--preset--color--neutral-200 );
}

.wna-ablauf__schritt .wna-ablauf__nummer {
	display: block;
	font-size: var( --wp--preset--font-size--h-4 );
	color: var( --wp--preset--color--accent );
	margin-bottom: var( --wp--preset--spacing--3 );
	margin-top: -2px;
}

.wna-ablauf__schritt h3 {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
	margin-bottom: var( --wp--preset--spacing--2 );
}

.wna-ablauf__schritt p {
	color: var( --wp--preset--color--text-secondary );
	font-size: var( --wp--preset--font-size--body );
}

/* ---------- Warum WNA Vision — vollflächiger zweiter Höhepunkt ---------- */

.wna-warum {
	position: relative;
	overflow: hidden;
	min-height: clamp( 420px, 54vw, 580px );
	display: flex;
	align-items: center;
	color: var( --wp--preset--color--text-inverse );
}

.wna-warum__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rückfall-Absicherung, falls das Gesamtansicht-Bild von #104 einmal fehlt
   (siehe PROJECT_LOG.md) — dieselbe Vollflächen-Behandlung wie zuvor für
   die CSS-Demo-Platzhalter. */
.wna-warum .wna-demo-bild {
	position: absolute;
	inset: 0;
	min-height: unset;
	aspect-ratio: unset;
	height: 100%;
}

.wna-warum__schleier {
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, color-mix( in srgb, var( --wp--custom--color--background-dark ) 94%, transparent ) 0%, color-mix( in srgb, var( --wp--custom--color--background-dark ) 82%, transparent ) 45%, color-mix( in srgb, var( --wp--custom--color--background-dark ) 30%, transparent ) 100% );
}

.wna-warum__inhalt {
	position: relative;
	z-index: 2;
	width: 100%;
}

.wna-warum__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--6 );
}

@media ( min-width: 900px ) {
	.wna-warum__grid {
		grid-template-columns: 1.3fr 0.7fr;
	}
}

.wna-warum h2 {
	font-size: clamp( var( --wp--preset--font-size--h-2 ), 4.4vw, 2.8rem );
	line-height: 1.25;
	color: var( --wp--preset--color--text-inverse );
}

.wna-warum__liste {
	display: grid;
	gap: var( --wp--preset--spacing--4 );
	align-content: start;
}

.wna-warum__liste div {
	border-top: 1px solid var( --wp--preset--color--neutral-700 );
	padding-top: var( --wp--preset--spacing--3 );
}

.wna-warum__liste .wna-warum__label {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--accent );
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wna-warum__liste p {
	font-size: var( --wp--preset--font-size--body );
	color: var( --wp--preset--color--neutral-400 );
	margin-top: var( --wp--preset--spacing--2 );
}

.wna-warum__link {
	display: inline-flex;
	margin-top: var( --wp--preset--spacing--5 );
	gap: 0.5em;
	align-items: center;
	font-weight: 600;
	color: var( --wp--preset--color--accent );
}

/* ---------- Projekte/Portfolio — dichteres Raster ---------- */

.wna-portfolio__grid {
	margin-top: var( --wp--preset--spacing--6 );
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--4 );
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

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

.wna-portfolio__karte {
	border: 1px solid var( --wp--preset--color--neutral-200 );
	overflow: hidden;
}

.wna-portfolio__karte .wna-demo-bild,
.wna-portfolio__karte img {
	aspect-ratio: 4 / 3;
	min-height: unset;
}

.wna-portfolio__karte--gross {
	grid-column: span 2;
}

.wna-portfolio__karte--gross .wna-demo-bild,
.wna-portfolio__karte--gross img {
	aspect-ratio: 16 / 9;
}

@media ( min-width: 700px ) {
	.wna-portfolio__karte--gross {
		grid-column: span 1;
		grid-row: span 2;
	}
	.wna-portfolio__karte--gross .wna-demo-bild,
	.wna-portfolio__karte--gross img {
		aspect-ratio: 3 / 4;
		height: 100%;
	}
}

.wna-portfolio__inhalt {
	padding: var( --wp--preset--spacing--3 ) var( --wp--preset--spacing--4 );
}

.wna-portfolio__saeule {
	font-size: var( --wp--preset--font-size--xs );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--text-secondary );
	margin: 0 0 var( --wp--preset--spacing--1 );
}

.wna-portfolio__inhalt h3 {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
}

.wna-portfolio__inhalt h3 a {
	color: var( --wp--custom--color--text-primary );
	text-decoration: none;
}

.wna-portfolio__inhalt h3 a:hover {
	text-decoration: underline;
}

.wna-portfolio__ort {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--text-secondary );
	margin-top: var( --wp--preset--spacing--1 );
}

.wna-portfolio__leer {
	margin-top: var( --wp--preset--spacing--3 );
	color: var( --wp--preset--color--text-secondary );
	font-size: var( --wp--preset--font-size--xs );
	max-width: 62ch;
}

/* ---------- Abschließendes CTA-Band (homepage-exklusiv, siehe DECISIONS.md —
   .wna-cta-band bleibt für die Leistungsseiten unverändert) ---------- */

.wna-final-cta {
	text-align: center;
}

.wna-final-cta p {
	margin-top: var( --wp--preset--spacing--3 );
	color: var( --wp--preset--color--text-secondary );
	max-width: 46ch;
	margin-inline: auto;
}

.wna-final-cta__button {
	margin-top: var( --wp--preset--spacing--5 );
	display: inline-block;
	padding: var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--7 );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--accent );
}

.wna-final-cta__button:hover {
	text-decoration: underline;
}

/* Sticky Mobile-Kontaktleiste jetzt global — nach layout.css verschoben
   (Conversion-Priorität, 2026-08-04, W4), siehe dortigen Hinweis. */