/* utopia theme.css - Portierung des WordPress-Themes auf wpnext (siehe crates/wpnext-render/README.md).
   Erzeugt aus .scratch/convert_css.py; Handpflege direkt in dieser Datei. */
/* Rueckwaertskompatible Namen: importierter Inhalt (Inline-SVG) verweist teils auf WordPress-Presets. */
:root {
	--wp--preset--color--brand: var(--wpnext-color-brand);
	--wp--preset--color--brand-hover: var(--wpnext-color-brand-hover);
	--wp--preset--color--brand-active: var(--wpnext-color-brand-active);
	--wp--preset--color--brand-dark: var(--wpnext-color-brand-dark);
	--wp--preset--color--brand-tint: var(--wpnext-color-brand-tint);
	--wp--preset--color--ink: var(--wpnext-color-ink);
	--wp--preset--color--ink-surface: var(--wpnext-color-ink-surface);
	--wp--preset--color--ink-border: var(--wpnext-color-ink-border);
	--wp--preset--color--bg: var(--wpnext-color-bg);
	--wp--preset--color--bg-dark: var(--wpnext-color-bg-dark);
	--wp--preset--color--text: var(--wpnext-color-text);
	--wp--preset--color--text-dark: var(--wpnext-color-text-dark);
	--wp--preset--color--surface: var(--wpnext-color-surface);
	--wp--preset--color--surface-alt: var(--wpnext-color-surface-alt);
	--wp--preset--color--border: var(--wpnext-color-border);
	--wp--preset--color--muted: var(--wpnext-color-muted);
	--wp--preset--color--muted-dark: var(--wpnext-color-muted-dark);
	--wp--preset--color--gold: var(--wpnext-color-gold);
	--wp--preset--color--danger: var(--wpnext-color-danger);
	--wp--preset--color--danger-dark: var(--wpnext-color-danger-dark);
}

/* =========================================================================================
   0. Grundlagen: das, was WordPress aus theme.json und dem Block-Kern erzeugt (Global Styles,
   Layout-Klassen, Block-Bibliothek), als wpnext-Regeln. Alle Werte kommen aus den Tokens
   (--wpnext-*) des Themes; Layout nur mit Logical Properties (S14-R-046).
   ========================================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	background-color: var(--wpnext-color-bg);
	color: var(--wpnext-color-text);
	font-family: var(--wpnext-font-family-text);
	font-size: var(--wpnext-font-size-body-md);
	line-height: 1.6;
}
img,
video {
	max-inline-size: 100%;
	block-size: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wpnext-font-family-display);
	font-weight: 600;
	line-height: 1.15;
}
h1 {
	font-size: var(--wpnext-font-size-display-xl);
	font-weight: 300;
	line-height: 1.05;
}
h2 {
	font-size: var(--wpnext-font-size-heading-lg);
}
h3 {
	font-size: var(--wpnext-font-size-heading-md);
}
h4 {
	font-size: var(--wpnext-font-size-heading-sm);
}
a:where(:not(.wpnext-button__link)) {
	color: var(--wpnext-color-text);
	text-decoration: underline;
}
a:where(:not(.wpnext-button__link)):hover {
	color: var(--wpnext-color-brand-hover);
}
:where(ul, ol) {
	padding-inline-start: 1.5em;
}
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	inset-inline-start: 0.5rem;
	inset-block-start: -4rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: var(--wpnext-color-surface);
	color: var(--wpnext-color-text);
	border-radius: var(--wpnext-radius-sm);
}
.skip-link:focus {
	inset-block-start: 0.5rem;
	clip-path: none;
	inline-size: auto;
	block-size: auto;
}
main:focus {
	outline: none;
}

/* Palette-Klassen: wie WordPress' has-*-color mit !important, damit sie jede Theme-Regel
   mit gleicher Spezifität übersteuern. */
.wpnext-text-brand { color: var(--wpnext-color-brand) !important; }
.wpnext-text-brand-hover { color: var(--wpnext-color-brand-hover) !important; }
.wpnext-text-brand-active { color: var(--wpnext-color-brand-active) !important; }
.wpnext-text-brand-dark { color: var(--wpnext-color-brand-dark) !important; }
.wpnext-text-brand-tint { color: var(--wpnext-color-brand-tint) !important; }
.wpnext-text-ink { color: var(--wpnext-color-ink) !important; }
.wpnext-text-ink-surface { color: var(--wpnext-color-ink-surface) !important; }
.wpnext-text-ink-border { color: var(--wpnext-color-ink-border) !important; }
.wpnext-text-bg { color: var(--wpnext-color-bg) !important; }
.wpnext-text-bg-dark { color: var(--wpnext-color-bg-dark) !important; }
.wpnext-text-text { color: var(--wpnext-color-text) !important; }
.wpnext-text-text-dark { color: var(--wpnext-color-text-dark) !important; }
.wpnext-text-surface { color: var(--wpnext-color-surface) !important; }
.wpnext-text-surface-alt { color: var(--wpnext-color-surface-alt) !important; }
.wpnext-text-border { color: var(--wpnext-color-border) !important; }
.wpnext-text-muted { color: var(--wpnext-color-muted) !important; }
.wpnext-text-muted-dark { color: var(--wpnext-color-muted-dark) !important; }
.wpnext-text-gold { color: var(--wpnext-color-gold) !important; }
.wpnext-text-danger { color: var(--wpnext-color-danger) !important; }
.wpnext-text-danger-dark { color: var(--wpnext-color-danger-dark) !important; }
.wpnext-bg-brand { background-color: var(--wpnext-color-brand) !important; }
.wpnext-bg-brand-hover { background-color: var(--wpnext-color-brand-hover) !important; }
.wpnext-bg-brand-active { background-color: var(--wpnext-color-brand-active) !important; }
.wpnext-bg-brand-dark { background-color: var(--wpnext-color-brand-dark) !important; }
.wpnext-bg-brand-tint { background-color: var(--wpnext-color-brand-tint) !important; }
.wpnext-bg-ink { background-color: var(--wpnext-color-ink) !important; }
.wpnext-bg-ink-surface { background-color: var(--wpnext-color-ink-surface) !important; }
.wpnext-bg-ink-border { background-color: var(--wpnext-color-ink-border) !important; }
.wpnext-bg-bg { background-color: var(--wpnext-color-bg) !important; }
.wpnext-bg-bg-dark { background-color: var(--wpnext-color-bg-dark) !important; }
.wpnext-bg-text { background-color: var(--wpnext-color-text) !important; }
.wpnext-bg-text-dark { background-color: var(--wpnext-color-text-dark) !important; }
.wpnext-bg-surface { background-color: var(--wpnext-color-surface) !important; }
.wpnext-bg-surface-alt { background-color: var(--wpnext-color-surface-alt) !important; }
.wpnext-bg-border { background-color: var(--wpnext-color-border) !important; }
.wpnext-bg-muted { background-color: var(--wpnext-color-muted) !important; }
.wpnext-bg-muted-dark { background-color: var(--wpnext-color-muted-dark) !important; }
.wpnext-bg-gold { background-color: var(--wpnext-color-gold) !important; }
.wpnext-bg-danger { background-color: var(--wpnext-color-danger) !important; }
.wpnext-bg-danger-dark { background-color: var(--wpnext-color-danger-dark) !important; }

/* Layout (is-layout-flow / constrained / flex / grid) */
.wpnext-layout-flow > *,
.wpnext-layout-constrained > * {
	margin-block: var(--wpnext-spacing-block-gap) 0;
}
.wpnext-layout-flow > :first-child,
.wpnext-layout-constrained > :first-child {
	margin-block-start: 0;
}
.wpnext-layout-constrained > :where(:not(.wpnext-align-left):not(.wpnext-align-right):not(.wpnext-align-full)) {
	max-inline-size: var(--wpnext-content-size, var(--wpnext-layout-content-size));
	margin-inline: auto;
}
.wpnext-layout-constrained > .wpnext-align-wide {
	max-inline-size: var(--wpnext-wide-size, var(--wpnext-layout-wide-size));
}
.wpnext-layout-constrained > .wpnext-align-full {
	max-inline-size: none;
}
/* Seitenwurzel: ihre Kinder folgen dem Maß des Themes, nicht der eigenen Variable
   (eine Gruppe mit eigenem contentSize würde sich sonst selbst beschneiden). */
.wpnext-content.wpnext-layout-constrained > :where(:not(.wpnext-align-left):not(.wpnext-align-right):not(.wpnext-align-full)) {
	max-inline-size: var(--wpnext-layout-content-size);
}
.wpnext-content.wpnext-layout-constrained > .wpnext-align-wide {
	max-inline-size: var(--wpnext-layout-wide-size);
}
.wpnext-layout-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpnext-spacing-block-gap);
}
.wpnext-layout-grid {
	display: grid;
	gap: var(--wpnext-spacing-block-gap);
}
.wpnext-layout-flex > *,
.wpnext-layout-grid > * {
	margin: 0;
}
.wpnext-align-left { text-align: start; }
.wpnext-align-center { text-align: center; }
.wpnext-align-right { text-align: end; }
.wpnext-group { box-sizing: border-box; }
/* WordPress: Bloecke mit Hintergrundfarbe bekommen Innenabstand (has-background). */
:where(.wpnext-group, .wpnext-columns, .wpnext-heading, .wpnext-paragraph, .wpnext-list):where([class*="wpnext-bg-"]) {
	padding: 1.25em 2.375em;
}

/* Spalten (WP: Umbruch bei 782px) */
.wpnext-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: normal;
}
:where(.wpnext-columns) {
	margin-block-end: 1.75em;
}
.wpnext-columns:not(.wpnext-shell) {
	gap: var(--wpnext-spacing-block-gap);
}
@media (min-width: 782px) {
	.wpnext-columns { flex-wrap: nowrap; }
	.wpnext-columns > .wpnext-column:not(.wpnext-column--sized) { flex: 1 1 0; }
}
@media (max-width: 781px) {
	.wpnext-columns:not(.wpnext-columns--nostack) > .wpnext-column { flex-basis: 100% !important; }
}
.wpnext-columns--nostack { flex-wrap: nowrap; }
.wpnext-column {
	flex-grow: 1;
	min-inline-size: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Buttons */
.wpnext-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.wpnext-buttons > .wpnext-button { display: inline-block; margin: 0; }
.wpnext-button__link {
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
	word-break: break-word;
	background-color: var(--wpnext-color-brand-hover);
	border: 0;
	border-radius: var(--wpnext-radius-sm);
	color: #fff;
	font-family: var(--wpnext-font-family-text);
	font-size: var(--wpnext-font-size-body-md);
	font-weight: 600;
	line-height: inherit;
	padding: 14px 28px;
	text-decoration: none;
}
.wpnext-button__link:hover {
	background-color: var(--wpnext-color-brand-active);
	color: #fff;
}
.wpnext-button--outline .wpnext-button__link {
	border: 2px solid;
	padding: 0.667em 1.333em;
	color: currentColor;
	background-color: transparent;
}
.wpnext-button--outline .wpnext-button__link:hover {
	background-color: transparent;
	color: currentColor;
}

/* Bilder, Tabellen, Details, Listen, Zitate, Trenner */
.wpnext-image { margin: 0 0 1em; }
.wpnext-image img { display: block; max-inline-size: 100%; block-size: auto; }
.wpnext-image figcaption,
.wpnext-video figcaption,
.wpnext-audio figcaption {
	color: var(--wpnext-color-muted);
	font-size: var(--wpnext-font-size-caption);
	margin-block-start: 0.5em;
}
.wpnext-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.wpnext-video video { inline-size: 100%; }
.wpnext-table { margin: 0 0 16px; }
.wpnext-table__scroll { overflow-x: auto; }
.wpnext-table table { border-collapse: collapse; inline-size: 100%; font-size: var(--wpnext-font-size-body-sm); }
.wpnext-table th,
.wpnext-table td { padding: 0.5em; border: 1px solid var(--wpnext-color-text); text-align: start; vertical-align: top; }
.wpnext-table th { text-align: center; }
/* WordPress-Standard: dicke Unterkante der Kopfzeile. */
.wpnext-table thead { border-bottom: 3px solid currentColor; }
.wpnext-details { padding-block: var(--wpnext-spacing-sm); border-block-end: 1px solid var(--wpnext-color-border); font-family: var(--wpnext-font-family-text); }
.wpnext-details summary { cursor: pointer; }
.wpnext-list li + li { margin-block-start: 0.25em; }
.wpnext-quote { padding-inline-start: 1em; border-inline-start: 4px solid var(--wpnext-color-brand); }
.wpnext-pullquote { text-align: center; font-size: 1.25em; }
.wpnext-code,
.wpnext-preformatted,
.wpnext-verse { overflow-x: auto; }
.wpnext-code { padding: 1em; background: var(--wpnext-color-surface-alt); border-radius: var(--wpnext-radius-sm); }
.wpnext-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.wpnext-separator { border: 0; border-block-start: 1px solid var(--wpnext-color-border); }
.wpnext-separator--dots { border: 0; text-align: center; line-height: 1; }
.wpnext-separator--dots::before { content: "\00b7 \00b7 \00b7"; letter-spacing: 1em; }
.wpnext-spacer { block-size: 2rem; }
.wpnext-unsupported { padding: 1rem; border: 1px dashed currentColor; }
.wpnext-embed { padding: 1em; border: 1px solid var(--wpnext-color-border); }

/* Cover und Medien-neben-Text */
.wpnext-cover {
	position: relative;
	display: grid;
	min-block-size: 16rem;
	isolation: isolate;
	color: #fff;
	padding-block: var(--wpnext-spacing-xxl);
}
.wpnext-cover > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
.wpnext-cover::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--wpnext-dim, 0.5); z-index: -1; }
.wpnext-cover__inner { align-self: center; }
.wpnext-cover__inner > * + * { margin-block-start: var(--wpnext-spacing-block-gap); }
.wpnext-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.wpnext-media-text--right .wpnext-media-text__media { order: 2; }
@media (max-width: 600px) { .wpnext-media-text { grid-template-columns: 1fr; } }

/* Kontaktformular (utopia/contact-form, statisches Markup) */
.wpnext-form { display: grid; gap: var(--wpnext-spacing-sm); }
.wpnext-form label { font-weight: 600; font-size: var(--wpnext-font-size-body-sm); }
.wpnext-form input,
.wpnext-form select,
.wpnext-form textarea {
	inline-size: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-sm);
	background: var(--wpnext-color-surface);
	color: var(--wpnext-color-text);
	font: inherit;
}
.wpnext-form textarea { min-block-size: 8rem; }
.wpnext-form__note { color: var(--wpnext-color-muted); font-size: var(--wpnext-font-size-body-sm); }

:focus-visible {
	outline: none;
	box-shadow: var(--wpnext-shadow-focus);
	border-radius: var(--wpnext-radius-sm);
}

/* =========================================================================================
   Utopia — theme.css
   Ergänzt theme.json um alles, was Design-Tokens allein nicht können: Motion-Klassen, Header-
   Sticky-Verhalten, Karten-Grids, Timeline, Tier-Table-Scroll-Snap, Donut-Legende, Sprachpille,
   Formular-Feinschliff. Reihenfolge folgt PATTERNS.md 1→20.
   ========================================================================================= */

/* -----------------------------------------------------------------------------------------
   0. Basis / Fokus / Reduced motion
   ----------------------------------------------------------------------------------------- */

/* Sweep-Fix 20.09. (kritisch): WordPress/Gutenberg setzt KEIN globales box-sizing:border-box
   (anders als die meisten CSS-Resets) -- der Browser-Default ist "content-box". Das Theme hatte
   bisher gar keinen eigenen Reset dafuer, wodurch jedes Formularfeld mit "width:100%" + Padding +
   Border (utopia-forms/assets/frontend.css) breiter wurde als sein Container: 100% + 2×14px
   Padding + 2×1px Border = +30px. Live bestaetigt auf /kontakt/ mobil: document.documentElement.
   scrollWidth 405px bei 375px echter Viewport-Breite (genau die 30px) -- das Kontaktformular
   erzeugte dadurch horizontales Scrollen auf JEDER Seite mit dem Formular-Block. Ein globaler
   border-box-Reset behebt das an der Wurzel statt nur das eine Input-Feld zu patchen (betrifft
   sonst z.B. auch kuenftige Select-Felder oder andere width:100%-Elemente mit Padding). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:where(a) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--wpnext-shadow-focus);
	border-radius: var(--wpnext-radius-sm);
}

.wpnext-bg-ink :focus-visible,
.wpnext-bg-bg-dark :focus-visible,
.site-footer :focus-visible {
	box-shadow: var(--wpnext-shadow-focus-dark) !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* Sweep-Fix 20.09. (kritisch, zweite Ursache desselben Befunds): der min-width:0-Fix weiter unten
   (.utopia-org-grid .u-card > h3/p) behebt nur, dass die GRID-SPALTE unter den min-content-Wert
   schrumpfen darf -- ein einzelnes UNTRENNBARES Wort (z.B. "Baumpflanzprojekt", ein deutsches
   Kompositum ohne Leerzeichen) hat trotzdem keine Umbruchstelle und lief mit dem Browser-Default
   "overflow-wrap:normal" weiterhin ueber die (jetzt korrekt schmale) Box hinaus -- die Box selbst
   maß bereits korrekt 148px, der TEXT INNERHALB blieb aber 227px breit und blutete sichtbar unter
   die naechste Karte (per getBoundingClientRect vs. scrollWidth doppelt verifiziert). Globaler
   Sicherheitsnetz-Reset: JEDE Überschrift/jeder Absatz darf als letzten Ausweg mitten im Wort
   umbrechen, sobald kein Leerzeichen mehr hilft. Betrifft nur den SELTENEN Fall, dass ein Wort
   seine Spalte allein sprengt; normaler Fließtext mit Leerzeichen bricht unveraendert an
   Wortgrenzen um.
   Praezisierung nach Live-Test: "Familienbetrieb in vierter Generation" (dieselbe schmale
   Org-Grid-Spalte) brach AUCH ohne hyphens:auto an derselben Stelle mitten im Wort (149px Spalte,
   "Familienbetrieb" allein schon zu breit) -- der Bruch kommt also von overflow-wrap:break-word
   selbst (das faengt jeden zu breiten Einzel-Textlauf ab, nicht nur ganze Woerter), nicht von
   hyphens:auto. hyphens:auto bleibt deshalb aktiv, weil es genau diesen ohnehin unvermeidlichen
   Bruch WENIGSTENS mit einem sichtbaren Trennstrich an einer Silbengrenze zeigt, statt eines
   Bruchs ohne jedes Zeichen mitten im Wort. */
:where( h1, h2, h3, h4, h5, h6, p, li, blockquote, dt, dd ) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Fließtext-Links: Farbe allein reicht bei brand nicht (nur ~3.4:1) — immer Underline-Reveal statt
   reiner text-decoration, sauberer bei Fraunces-Kursiv. */
.wpnext-content a:not(.wpnext-button__link),
.entry-content a:not(.wpnext-button__link) {
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	text-decoration: none;
	transition: background-size 220ms ease-out;
}
@media ( hover: hover ) {
	.wpnext-content a:not(.wpnext-button__link):hover {
		background-size: 100% 1px;
	}
}

/* -----------------------------------------------------------------------------------------
   1. Motion system - ohne JavaScript. Inhalte sind immer sichtbar (kein opacity:0 als
   Grundzustand); wo der Browser scroll-gesteuerte Animationen kann, bewegen sich .u-reveal und
   .u-reveal-up beim Eintritt in den Viewport nach oben. prefers-reduced-motion: keine Bewegung.
   ----------------------------------------------------------------------------------------- */
.u-count {
	font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.u-reveal,
		.u-reveal-up {
			animation: u-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		.u-reveal {
			--u-shift: 8px;
		}
		.u-reveal-up {
			--u-shift: 24px;
		}
		.u-parallax-soft {
			animation: u-parallax linear both;
			animation-timeline: view();
		}
		.u-draw-lines {
			stroke-dasharray: 3000;
			animation: utopia-draw-lines linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 55%;
		}
		.site-header {
			animation: u-header-solid linear both;
			animation-timeline: scroll();
			animation-range: 0 48px;
		}
	}
	/* Nur Bewegung, kein Ausblenden: ein Element unterhalb des sichtbaren Bereichs behaelt
	   seinen vollen Kontrast (WCAG 1.4.3; axe/Lighthouse messen mit der berechneten Deckkraft). */
	@keyframes u-rise {
		from {
			transform: translateY(var(--u-shift, 16px));
		}
		to {
			transform: none;
		}
	}
	@keyframes u-parallax {
		from {
			transform: translateY(24px);
		}
		to {
			transform: translateY(-24px);
		}
	}
	@keyframes utopia-draw-lines {
		from {
			stroke-dashoffset: 3000;
		}
		to {
			stroke-dashoffset: 0;
		}
	}
	@keyframes u-header-solid {
		from {
			background-color: transparent;
			box-shadow: none;
		}
		to {
			background-color: rgba(255, 255, 255, 0.86);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			box-shadow: var(--wpnext-shadow-sm);
		}
	}
}


/* -----------------------------------------------------------------------------------------
   2. Header (eigenes Markup statt wp:navigation; mobiles Menü per Popover-API, ohne JavaScript)
   ----------------------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wpnext-spacing-sm);
	padding: var(--wpnext-spacing-sm) var(--wpnext-spacing-md);
	background: transparent;
}
.site-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.site-header__logo {
	display: inline-flex;
	padding: 6px;
	margin: -6px;
}
.site-header__logo img {
	display: block;
}
.site-header__title {
	font-family: var(--wpnext-font-family-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wpnext-color-text);
	white-space: nowrap;
}
.site-header__nav {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	justify-content: flex-end;
}
.site-header__toggle,
.site-header__close {
	display: none;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
	color: var(--wpnext-color-text);
	cursor: pointer;
}
.site-header__menu {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	inset: auto;
	position: static;
	overflow: visible;
	inline-size: auto;
	block-size: auto;
	max-inline-size: none;
	max-block-size: none;
}
.site-header__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wpnext-spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wpnext-font-family-text);
	font-weight: 600;
	font-size: var(--wpnext-font-size-body-sm);
}
.site-header__list a,
.site-header__list summary {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 10px 12px;
	color: var(--wpnext-color-text);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}
.site-header__list summary::-webkit-details-marker {
	display: none;
}
.site-header__list a:hover,
.site-header__list summary:hover {
	color: var(--wpnext-color-brand-hover);
}
/* Original: die aktive Seite ist im Menue nicht farblich hervorgehoben (aria-current bleibt im Markup). */
.site-header__more {
	position: relative;
}
@media (min-width: 783px) {
	/* Original: 27 px statt 18 px Abstand zwischen Pfeilflaeche und Sprachumschalter. */
	.site-header__more {
		margin-inline-end: 9px;
	}
}
/* Pfeil wie im Original: eigene 24-px-Fläche mit Abstand zum Text, Winkel darin. */
.site-header__list .site-header__more summary {
	position: relative;
	padding-inline-end: 0;
}
.site-header__more summary::after {
	content: '';
	inline-size: 24px;
	block-size: 24px;
	margin-inline-start: 11px;
}
.site-header__more summary::before {
	content: '';
	position: absolute;
	inset-inline-end: 9px;
	inset-block-start: calc(50% - 0.4px);
	inline-size: 4.77px;
	block-size: 4.77px;
	border-inline-end: 1.125px solid currentColor;
	border-block-end: 1.125px solid currentColor;
	transform: rotate(45deg);
}
.site-header__more details[open] summary::before {
	inset-block-start: calc(50% + 0.6px);
	transform: rotate(-135deg);
}
.site-header__more details > ul {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	min-inline-size: 180px;
	margin: 0;
	padding: var(--wpnext-spacing-xxs);
	list-style: none;
	background: var(--wpnext-color-surface);
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
	box-shadow: var(--wpnext-shadow-md);
}
.site-header__more details > ul a {
	display: flex;
	inline-size: 100%;
	border-radius: var(--wpnext-radius-sm);
}
.site-header__flat {
	display: none;
}
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-header__actions--overlay {
	display: none;
}
.site-header__cta {
	min-block-size: 44px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}
.site-header__nav {
	/* Stufenloser Schutz gegen Umbruch bei langen (englischen) Beschriftungen */
	container-type: inline-size;
}
@media (min-width: 783px) and (max-width: 1560px) {
	.site-header__list {
		gap: 2px;
	}
	.site-header__list a,
	.site-header__list summary {
		padding-inline: 8px;
	}
	.site-header__cta {
		padding-inline: 18px;
	}
}
@media (min-width: 783px) and (max-width: 1200px) {
	.site-header__title {
		font-size: 1.0625rem;
	}
}
@media (max-width: 782px) {
	.site-header__nav {
		flex: 0 0 auto;
	}
	.site-header__toggle {
		display: inline-flex;
	}
	.site-header__menu:not(:popover-open) {
		display: none;
	}
	.site-header__menu {
		position: fixed;
		inset: 0;
		z-index: 1000;
		flex-direction: column;
		inline-size: 100%;
		block-size: 100%;
		padding: var(--wpnext-spacing-md);
		overflow: auto;
		background: var(--wpnext-color-bg);
	}
	.site-header__close {
		display: inline-flex;
		align-self: flex-end;
	}
	.site-header__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: var(--wpnext-font-size-heading-sm);
	}
	.site-header__list a,
	.site-header__list summary {
		display: flex;
		inline-size: 100%;
	}
	.site-header__more {
		display: none;
	}
	.site-header__flat {
		display: block;
	}
	.site-header .site-header__actions {
		display: none;
	}
	.site-header__menu .site-header__actions--overlay {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wpnext-spacing-sm);
		margin-block-start: var(--wpnext-spacing-md);
		padding-block-start: var(--wpnext-spacing-md);
		border-block-start: 1px solid var(--wpnext-color-border);
	}
	.site-header__menu .site-header__actions--overlay .wpnext-button__link {
		inline-size: 100%;
	}
}

/* Sprachumschalter-Pille */
.lang-switch {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--wpnext-radius-pill);
	background: var(--wpnext-color-surface-alt);
	gap: 2px;
}
/* Fix-Runde 2: der echte Polylang-Pfad (pll_the_languages()) liefert <li>-Elemente, die jetzt in ein
   <ul class="lang-switch__list"> gewrappt werden (siehe utopia-forms.php, a11y-Fix). Listendefaults
   zuruecksetzen und dieselbe Flex-Pillenreihe wie vorher auf .lang-switch selbst herstellen -- der
   Fallback-Pfad ohne Polylang hat keine <ul> und bleibt von dieser Regel unberuehrt. */
.lang-switch__list {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lang-switch__pill,
.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 4px 12px;
	border-radius: var(--wpnext-radius-pill);
	font-size: var(--wpnext-font-size-body-sm);
	font-weight: 600;
	color: var(--wpnext-color-muted);
	text-decoration: none;
	background-image: none;
}
.lang-switch__pill.is-active,
.lang-switch a.is-active,
.lang-switch a[aria-current="true"] {
	/* WCAG 1.4.3: Weiß auf dem hellen Markengrün erreicht nur 3,3:1; das dunklere Grün 5,4:1. */
	background: var(--wpnext-color-brand-hover);
	color: #fff;
}

/* -----------------------------------------------------------------------------------------
   3. Hero (utopia/hero)
   ----------------------------------------------------------------------------------------- */
.utopia-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.utopia-hero.is-height-full {
	min-height: 560px;
}
.utopia-hero.is-height-full .wpnext-cover__inner {
	min-height: inherit;
}
.utopia-hero.is-height-full {
	min-height: 82vh;
}
.utopia-hero.is-height-compact {
	min-height: 360px;
}
.utopia-hero.is-height-compact {
	min-height: 45vh;
}
@media ( max-width: 782px ) {
	.utopia-hero,
	.utopia-hero.is-height-full,
	.utopia-hero.is-height-compact {
		min-height: auto;
		padding-top: var(--wpnext-spacing-section-compact);
		padding-bottom: var(--wpnext-spacing-section-compact);
	}
}
/* Art-Direction-Runde (Opus, 20.09.): die lose schwebende Konstellation/Linien-Deko lief bisher auf
   JEDEM Hero (voller Hintergrund, alle Seiten) -- auf Unterseiten (z.B. /projekte-organisationen/)
   wirkten die frei im Raum stehenden Punkte/Linien wie ein Render-Fehler statt wie Gestaltung.
   Entschieden: die Deko existiert nur noch auf der Startseite (Content-Feld "heroDeco":true in
   content/de/start.json + content/en/home.json, siehe scripts/blocks.py render_hero()) -- jeder
   andere Hero rendert gar kein <svg> mehr, nicht nur ausgeblendetes. Auf der Startseite selbst sitzt
   sie jetzt bewusst in der rechten Haelfte (nicht mehr ueber die volle Breite verteilt, wo sie mit
   dem linksbuendigen Titel kollidieren koennte) und dezenter (0.55 auf dunklem Ink-Hero statt vorher
   0.22 auf einer VOLLFLAECHIGEN, dadurch optisch viel zurueckhaltenderen Flaeche). */
.utopia-hero__lineart {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY( -50% );
	/* "aspect-ratio" statt "height:auto" auf dem Prozentwert: das Inline-SVG (network.svg) hat kein
	   width/height-Attribut, nur eine quadratische viewBox -- "aspect-ratio" erzwingt die 1:1-Relation
	   unabhaengig davon, ob der Browser die intrinsische SVG-Groesse in diesem Kontext zuverlaessig
	   ausliest (siehe Memory zu 0x0-Rendering bei SVGs ohne width/height-Attribut). */
	width: min( 45%, 620px );
	aspect-ratio: 1 / 1;
	height: auto;
	pointer-events: none;
	opacity: 0.55;
	color: var(--wpnext-color-brand-dark);
	z-index: 0;
}
@media ( max-width: 782px ) {
	.utopia-hero__lineart {
		display: none;
	}
}
.utopia-hero__content {
	position: relative;
	z-index: 1;
}
.utopia-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: var(--wpnext-radius-pill);
	background: var(--wpnext-color-brand-tint);
	color: var(--wpnext-color-brand-hover);
	font-size: var(--wpnext-font-size-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.utopia-hero.is-bg-ink .utopia-hero__eyebrow {
	background: var(--wpnext-color-ink-surface);
	color: var(--wpnext-color-brand-dark);
}
.utopia-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: 10px;
	padding: 4px 12px;
	border-radius: var(--wpnext-radius-pill);
	border: 1px solid var(--wpnext-color-gold);
	color: var(--wpnext-color-gold);
	font-size: var(--wpnext-font-size-caption);
	font-weight: 600;
}
.utopia-hero__title {
	margin-block: var(--wpnext-spacing-sm) var(--wpnext-spacing-md);
}
.utopia-hero__title span {
	display: inline-block;
}
.utopia-hero__cta .wpnext-button.is-style-fill .wpnext-button__link {
	animation: utopia-cta-pop 200ms cubic-bezier( 0.2, 0.7, 0.2, 1 ) 480ms both;
}
@keyframes utopia-cta-pop {
	from {
		transform: scale( 0.97 );
	}
	to {
		transform: scale( 1 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.utopia-hero__cta .wpnext-button.is-style-fill .wpnext-button__link {
		animation: none;
	}
}

/* Button style variant: ghost (secondary CTA on dark backgrounds) */
.wpnext-button.is-style-ghost .wpnext-button__link {
	background: transparent;
	color: var(--wpnext-color-text-dark);
	/* Fix-Runde 9 (mittel): war "border:1px solid" -- ein echter Rahmen zaehlt IMMER zusaetzlich zur
	   Boxhoehe (unabhaengig vom Box-Modell, box-sizing:border-box aendert nur wie die BREITE
	   angegeben wird, nicht wie die HOEHE bei height:auto berechnet wird), dadurch war dieser
	   Sekundaerbutton neben einem Primaerbutton (0 Rahmen, gleiches Padding) in derselben Zeile
	   messbar hoeher. Inset-Box-Shadow zeichnet optisch identisch, aendert aber die Boxgroesse
	   nicht -- Primaer-/Sekundaerbutton sind dadurch exakt gleich hoch. */
	border: none;
	box-shadow: inset 0 0 0 1px var(--wpnext-color-ink-border);
}
.wpnext-button.is-style-ghost .wpnext-button__link:hover {
	background: var(--wpnext-color-ink-surface);
}

/* Fix-Runde 9 (mittel): WP-Cores eigener Default-Stil "is-style-outline" (u.a. "Zur Plattform ↗" im
   Projekte-Grid, "LinkedIn" im Team-Grid) setzt ebenfalls einen echten 2px-Rahmen zusaetzlich zum
   gleichen Padding wie der Fill-Button (theme.json elements.button.spacing.padding) -- gemessen auf
   /team/: Fill-Button 55.6px vs. Outline-Button 59.6px Boxhoehe (Differenz = genau die 2x2px
   Rahmenbreite). Gleicher Fix wie bei ".is-style-ghost" oben: Rahmen durch Inset-Box-Shadow ersetzen,
   dadurch identische Boxhoehe wie der Fill-Button in derselben Zeile. */
.wpnext-button.is-style-outline .wpnext-button__link,
.wpnext-button--outline .wpnext-button__link {
	border: none;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Abstand zwischen Schaltflaechen = Block-Gap des Quell-Themes (WordPress setzt ihn als
   `gap` am Flex-Layout; gemessen bei 390 px: Original 24 px, Kern-Default 0,5em = 7 px). */
.wpnext-buttons {
	gap: var(--wpnext-spacing-block-gap);
}

/* -----------------------------------------------------------------------------------------
   4. section-intro — nothing extra, alignment handled by layout.contentSize
   ----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   5. feature-grid / project-org-grid / team-grid — shared card system
   ----------------------------------------------------------------------------------------- */
/* Art-Direction-Runde (Opus, 20.09.): Padding einheitlich auf 28px (expliziter Gestaltungswert,
   bewusst kein spacingSizes-Token) -- gilt jetzt fuer JEDE Karte im Kartensystem (Feature-Grid,
   Projekt-/Org-Grid, Team-Grid), siehe .utopia-team-card weiter unten, das dieselbe Padding-/Radius-/
   Border-Logik jetzt ebenfalls traegt statt randlos zu sein. */
.u-card,
.wpnext-group.is-style-card {
	background: var(--wpnext-color-surface);
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
	padding: 28px;
	/* Fix-Runde 3 (mittel): "height:100%" ist ein SPEZIFIZIERTER Wert (kein "auto") und wird deshalb
	   von align-items:stretch am Flex-Container NICHT ueberschrieben (CSS-Spec: stretch greift nur bei
	   Cross-Axis-Groesse "auto") -- Karten in derselben Zeile blieben dadurch unterschiedlich hoch, je
	   nach Textlaenge (gemessen z.B. 285/263/263/263/263px auf der Startseite). min-height:100% erlaubt
	   stretch wieder zu greifen (Karten im Grid/Flex werden gleich hoch), fuellt aber weiterhin den
	   Container, wenn die Karte AUSSERHALB eines Flex-Kontexts alleine steht. */
	min-height: 100%;
}
@media ( hover: hover ) {
	.u-card,
	.wpnext-group.is-style-card {
		transition: transform 200ms ease-out, box-shadow 200ms ease-out;
	}
	.u-card:hover,
	.wpnext-group.is-style-card:hover {
		transform: translateY( -4px );
		box-shadow: var(--wpnext-shadow-md);
	}
}
.u-card__icon {
	width: 44px;
	height: 44px;
	color: var(--wpnext-color-brand);
	margin-bottom: var(--wpnext-spacing-sm);
}
.utopia-feature-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpnext-spacing-md);
	align-items: stretch;
}
.utopia-feature-grid > * {
	flex: 1 1 280px;
}
.utopia-feature-grid.cols-5 > * {
	flex-basis: calc( 33.333% - var(--wpnext-spacing-md) );
}
@media ( max-width: 900px ) {
	.utopia-feature-grid.cols-5 > * {
		flex-basis: calc( 50% - var(--wpnext-spacing-md) );
	}
}
@media ( max-width: 600px ) {
	.utopia-feature-grid > *,
	.utopia-feature-grid.cols-5 > * {
		/* Sweep-Runde 2 (kritisch): ".cols-5 > *" hat wegen der Zweit-Klasse hoehere Spezifitaet
		   (0,2,0) als die einfache ".utopia-feature-grid > *"-Reset-Regel oben (0,1,0) -- die
		   900px-Tablet-Regel fuer cols-5 (2 Spalten) gewann dadurch die Kaskade AUCH bei 390px,
		   obwohl beide max-width-Queries dort gleichzeitig zutreffen (CSS entscheidet nach
		   Spezifitaet, nicht nach Quelltext-Reihenfolge, wenn beide Media Queries matchen). Betraf
		   ausschliesslich die zwei 5-Item-Feature-Grids ("Fuenf Saeulen" auf start/home und vision,
		   DE+EN): Karten blieben am Handy zweispaltig (~155px breit), Ueberschriften wie
		   "Umweltschutz"/"Benefit-Programm" brachen dadurch mitten im Wort um. Fix: cols-5 hier
		   explizit mit gleicher Spezifitaet erneut auf 100% setzen, gewinnt jetzt durch spaetere
		   Quelltext-Position bei gleicher Spezifitaet. */
		flex-basis: 100%;
	}
	/* Fix-Runde 3 (kritisch): display:flex behandelte Icon/H3/P als DREI gleichrangige Row-Items ohne
	   Wrap -- der Absatztext wurde dadurch in eine ~110-145px schmale Spalte gequetscht und brach in
	   10+ Zeilen um (identisches Architekturproblem wie .utopia-org-grid .u-card, dort in Fix-Runde 1
	   bereits auf CSS-Grid umgestellt -- hier beim Schwester-Pattern uebersehen). Gleiche Loesung:
	   Grid mit fester Icon-Spalte, H3+P automatisch in Spalte 2 gestapelt. */
	.utopia-feature-grid .u-card {
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: var(--wpnext-spacing-sm);
		align-items: center;
	}
	.utopia-feature-grid .u-card__icon {
		grid-column: 1;
		grid-row: 1 / -1;
		margin-bottom: 0;
	}
	.utopia-feature-grid .u-card h3,
	.utopia-feature-grid .u-card p {
		grid-column: 2;
		/* Gleicher min-width:auto-Grid-Trap wie bei .utopia-org-grid (siehe dortiger Kommentar) --
		   hier defensiv mitgefixt, auch wenn die Mobil-Kartenbreite (~300px) den Fall seltener
		   auslöst als die 214px-Spalte im 4er-Wide-Grid. */
		min-width: 0;
	}
}

/* Art-Direction-Runde (Opus, 20.09.): komplette Neuanlage der Projekt-/Org-Karten -- vorher Icon
   links / Text rechts in einer Grid-Zeile (wirkte wie ein Datensatz, nicht wie eine gestaltete
   Karte). Jetzt vertikal: Icon-Kachel oben, Titel/Text/Button darunter gestapelt, Button per
   margin-top:auto unten buendig ueber die ganze Kartenreihe. Die Spaltenzahl kommt als CSS-Variable
   "--cols" direkt vom Renderer (scripts/blocks.py render_project_org_grid(): 4 nur bei genau 4 oder 8
   Karten, sonst 3) -- ein FESTES grid-template-columns (statt des vorherigen auto-fit/auto-fill)
   loest nebenbei das alte "orphan row"-Problem: bei z.B. 5 Karten in 3 Spalten liegt die letzte Zeile
   (2 Karten) durch das Grid selbst automatisch linksbuendig, ganz ohne separaten Wrapper/Zentrierung. */
.utopia-org-grid {
	display: grid;
	grid-template-columns: repeat( var( --cols, 3 ), minmax( 0, 1fr ) );
	gap: 24px;
}
@media ( max-width: 1023px ) {
	.utopia-org-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 639px ) {
	.utopia-org-grid {
		grid-template-columns: 1fr;
	}
}
.utopia-project-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.utopia-project-card__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--wpnext-color-surface-alt);
}
/* Partnerorganisationen: echtes Logo IN FARBE (kein Graustufenfilter mehr -- vorher liefen reale
   NGO-Logos und generische Platzhalter-Icons durch denselben Grau-bis-Hover-Farbe-Mechanismus, was
   die echten Logos unnoetig verwaschen wirken liess). */
.utopia-project-card__icon--logo {
	padding: 10px;
}
.utopia-project-card__icon--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Eigene Projekte ohne Foto: Lineart-Icon aus theme/utopia/assets/img/icons/*.svg statt der frueheren
   grauen Clipart-PNGs -- currentColor erbt die Brand-Gruen-Farbe hier direkt. */
.utopia-project-card__icon-graphic {
	width: 32px;
	height: 32px;
	color: var(--wpnext-color-brand);
}
.utopia-project-card__title {
	margin-top: 20px;
	margin-bottom: 0;
	font-size: 22px;
	line-height: 1.2;
	/* "hyphens:manual" ueberschreibt hier bewusst die globale ":where(h1,h2,...){hyphens:auto}"-Regel
	   (siehe Kapitel 0) -- die Kartentitel tragen bereits von Hand gesetzte weiche Trennstriche (U+00AD)
	   an sinnvollen Silbengrenzen (content/de/*.json), ein zusaetzliches automatisches "hyphens:auto"
	   koennte in diesem Test-Chromium ohne Silbentrennungs-Woerterbuch nur zu einem harten
	   overflow-wrap-Bruch OHNE Trennstrich an einer anderen, nicht gewaehlten Stelle fuehren. */
	hyphens: manual;
	overflow-wrap: break-word;
}
.utopia-project-card__text {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.55;
	width: 100%;
}
.utopia-project-card .utopia-project-card__cta {
	margin-top: auto;
	padding-top: 20px;
	width: 100%;
}
.utopia-project-card__cta .wpnext-button__link {
	white-space: nowrap;
}

/* Sweep-Fix 20.09.: mit flex-wrap + max-width:25% entscheidet der Browser die Zeilenumbrüche anhand
   der flex-basis (200px) VOR dem Greifen der max-width-Deckelung -- bei 8 Kernteam-Mitgliedern passte
   dadurch eine 5. Karte noch mit Basisbreite in Zeile 1 (200px*5+4*Gap=1096px < 1280px Container),
   wuchs dort aber nur auf ~237px statt der vollen 302px-Deckelung, waehrend Zeile 2 (3 Restkarten) auf
   die vollen 302px wuchs -- zwei sichtbar unterschiedlich breite Kartenreihen im selben Grid (gemessen
   237px vs. 302px). CSS-Grid mit fester Spaltenzahl entscheidet die Spaltenbreite VORHER anhand der
   Spaltenzahl, nicht nachtraeglich per Wachstum -- alle Karten sind dadurch unabhaengig davon, in
   welcher Zeile sie landen, gleich breit. */
.utopia-team-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var(--wpnext-spacing-md);
}
.utopia-team-grid.is-advisors {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
.utopia-team-grid > * {
	text-align: center;
}
/* Art-Direction-Runde (Opus, 20.09.): Team-Karten waren bisher randlos (Foto direkt auf dem
   Seitenhintergrund) -- bekommen jetzt dieselbe Padding/Radius/Border-Logik wie die Projekt-/
   Feature-Grid-Karten (siehe Kapitel 5), damit alle drei Kartentypen aus demselben Design-System
   wirken statt drei verschiedenen Stilen nebeneinander.
   Live gefundene Regression derselben Aenderung: "align-items:center" auf einem Flex-Column-
   Container macht die Kinder NICHT mehr Cross-Axis-stretch (anders als der Default "stretch") --
   das Bild (".utopia-team-grid img{width:100%}") kann seine Prozentbreite dadurch waehrend der
   intrinsischen Groessenermittlung des Grid-Items nicht mehr gegen eine definite Breite aufloesen
   und faellt auf seine NATUERLICHE (grosse) Bildbreite zurueck -- die traegt als Min-Content-Beitrag
   in die "1fr"-Spuren von ".utopia-team-grid" ein (ein "1fr"-Track hat implizit "minmax(auto,1fr)",
   verweigert sich also, unter den Min-Content-Wert seiner Kinder zu schrumpfen). Ergebnis: die
   Mobil-2-Spalten-Reihe wurde insgesamt breiter als der Viewport (gemessen scrollWidth 445px bei
   375px echtem Viewport, klar sichtbarer horizontaler Overflow). "min-width:0" ist der exakt gleiche
   Fix wie an jeder anderen Stelle dieser Datei fuer denselben CSS-Grid-Mechanismus (siehe
   ".utopia-org-grid .u-card > h3/p/.wpnext-buttons" weiter oben) -- erlaubt dem Grid-Item, unter
   seinen eigenen Min-Content zu schrumpfen; die Spalte fuellt sich stattdessen korrekt aus der
   verfuegbaren Breite. */
.utopia-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	background: var(--wpnext-color-surface);
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
	padding: 28px;
	min-height: 100%;
}
@media ( hover: hover ) {
	.utopia-team-card {
		transition: transform 200ms ease-out, box-shadow 200ms ease-out;
	}
	.utopia-team-card:hover {
		transform: translateY( -4px );
		box-shadow: var(--wpnext-shadow-md);
	}
}
/* Fix-Runde 1 (mittel): ein zweizeiliger Name (z.B. "Michel Büdenbender") schob nur SEIN Rollen-Label
   nach unten -- die Karten der Reihe standen dadurch nicht mehr bündig. Feste Mindesthöhe für 2
   Zeilen + Text oben ausgerichtet, damit alle Rollen-Labels unabhängig von der Namenslänge auf
   gleicher Höhe stehen. */
.utopia-team-card .wpnext-heading {
	min-height: calc( 2 * 1.5rem * 1.15 );
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: var(--wpnext-spacing-sm);
}
.utopia-team-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wpnext-radius-sm);
	filter: grayscale( 1 );
	transition: filter 250ms ease-out;
}
.utopia-team-grid.is-advisors img {
	max-width: 80%;
	margin-inline: auto;
}
@media ( hover: hover ) {
	.utopia-team-grid a:hover img,
	.utopia-team-grid a:focus-visible img {
		filter: grayscale( 0 );
	}
}
@media ( max-width: 600px ) {
	.utopia-team-grid img {
		filter: grayscale( 0 );
	}
	.utopia-team-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.utopia-team-grid.is-advisors {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------------------------
   6. stats
   ----------------------------------------------------------------------------------------- */
.utopia-stats {
	max-width: 1600px;
	margin-inline: auto;
}
.utopia-stats .wpnext-column {
	position: relative;
	text-align: center;
	padding-block: var(--wpnext-spacing-sm);
}
.utopia-stats .wpnext-column:not( :first-child )::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var(--wpnext-color-ink-border);
}
.utopia-stats.is-light .wpnext-column:not( :first-child )::before {
	background: var(--wpnext-color-border);
}
/* Art-Direction-Runde (Opus, 20.09.): die "flex-basis:50% !important"-Regel unten hatte auf dem
   echten 390px-Screenshot NIE gegriffen (Zahlen standen weiterhin einzeln untereinander) -- Ursache:
   WPs eigene mobile Stacking-Regel ".wpnext-columns:not(.is-not-stacked-on-mobile) >
   .wpnext-column{flex-basis:100% !important}" hat DREI Klassen-Selektoren (0,3,0), unsere alte
   Regel ".utopia-stats .wpnext-column" nur zwei (0,2,0) -- bei gleichem "!important" gewinnt die
   hoehere Spezifitaet, nicht die Quelltext-Reihenfolge. ".utopia-stats.utopia-stats" verdoppelt die
   Klasse auf DEMSELBEN Element bewusst (gueltiges CSS, zaehlt als zwei Klassen-Selektoren) und hebt
   die Spezifitaet auf (0,4,0) -- schlaegt WPs Regel unabhaengig von der Ladereihenfolge. Breakpoint
   von 600px auf die im Auftrag vorgegebenen 640px angepasst; Zahl/Label bekommen zusaetzlich feste
   Groessen (40px/13px) statt der Desktop-Clamp-Presets, die auf 2 Spalten spuerbar zu gross wirkten. */
@media ( max-width: 640px ) {
	.utopia-stats .wpnext-columns {
		flex-wrap: wrap;
	}
	.utopia-stats.utopia-stats .wpnext-columns .wpnext-column {
		flex-basis: 50% !important;
	}
	.utopia-stats .wpnext-column:not( :first-child )::before {
		inset-inline-start: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
	/* Nachtrag (noch selbe Runde, live gefunden): render_stats() setzt links/rechts pauschal "xl"
	   (48px) OHNE Mobil-Reduktion (anders als quote-block/platform-preview, die auf 600px eigens auf
	   "md" zurueckfahren) -- bei 375px echtem Viewport blieben pro Spalte nur 139.5px. "210.000+" bei
	   festen 40px brach darin klar mitten in die Ziffernfolge um ("210.00" / "0+", per cdp_measure.mjs
	   verifiziert: h3-Boxhoehe 92px = zwei Zeilen). Fix zweigleisig: Innenabstand wie die anderen
	   Sektionen auf "md" reduzieren UND die Zahl nie umbrechen lassen (white-space:nowrap) -- die
	   40px gelten unveraendert fuer kurze Werte ("9","3"), laengere Werte ("210.000+","5,8 Mrd. $",
	   "1.000 Mrd. €") skalieren stattdessen ueber "clamp" nach unten, bevor sie umbrechen koennten. */
	.utopia-stats {
		padding-left: var(--wpnext-spacing-md) !important;
		padding-right: var(--wpnext-spacing-md) !important;
	}
	.utopia-stats h3.wpnext-heading,
	.utopia-stats h3.wp-block-heading {
		font-size: 40px !important;
		white-space: nowrap;
	}
	/* Nachtrag 2 (noch selbe Runde, live gefunden): "clamp(22px,8.5vw,40px)" war fuer den laengsten
	   real vorkommenden Wert ("1.000 Mrd. €"/"471,4 Mrd. $", je 12 Zeichen, Vision-Seite) IMMER NOCH
	   zu gross -- bei 33.15px errechnetem Wert (8.5vw bei 375px) maß der Text 190px SCROLLWIDTH in
	   einer 163.5px breiten Spalte; "white-space:nowrap" verhindert zwar den haesslichen Zeilenumbruch,
	   laesst den ueberstehenden Text aber sichtbar in die NACHBARSPALTE hineinlaufen (verifiziert:
	   "1.000 Mrd. €" kollidierte optisch mit "471,4 Mrd. $" daneben). Kleinerer Clamp mit Sicherheits-
	   marge fuer den laengsten bekannten Wert im Content (12 Zeichen inkl. Leerzeichen/Satzzeichen). */
	.utopia-stats h3.wpnext-heading.is-long-value,
	.utopia-stats h3.wp-block-heading.is-long-value {
		font-size: clamp( 18px, 6.5vw, 26px ) !important;
	}
	.utopia-stats .wpnext-column p {
		font-size: 13px !important;
	}
}

/* -----------------------------------------------------------------------------------------
   6b. split-media-text
   ----------------------------------------------------------------------------------------- */
/* Art-Direction-Runde (Opus, 20.09.): die Lineart-Grafik schwebte bisher frei im Raum (kein Rahmen,
   keine Flaeche) -- wirkte unfertig neben den sonst durchgehend gerahmten Sektionen der Seite. Die
   Medienspalte ist jetzt eine "Figur-Karte": surface-alt-Flaeche, radius-md, festes 4:3-Seiten-
   verhaeltnis, die Grafik selbst zentriert bei 70% Breite -- wirkt wie eine gesetzte Illustration statt
   eines losen Dekor-Elements. */
.utopia-split-media-text .wpnext-columns {
	align-items: flex-start;
}
.utopia-split-media-wrap {
	background: var(--wpnext-color-surface-alt);
	border-radius: var(--wpnext-radius-md);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.utopia-split-media {
	width: 70%;
	height: auto;
	aspect-ratio: 1 / 1;
	color: var(--wpnext-color-brand);
	opacity: 0.9;
}
/* Mobil: die Figur steht IMMER unter dem Text, unabhaengig von "mediaPosition" (links/rechts) auf
   Desktop -- ohne diese "order"-Regeln bestimmt sonst die reine Quelltext-Reihenfolge (bei
   mediaPosition:"left" liegt die Medienspalte im HTML VOR dem Text und wuerde auf Mobil zuerst
   erscheinen). */
@media ( max-width: 782px ) {
	.utopia-split-media-text .wpnext-column {
		flex-basis: 100%;
	}
	.utopia-split-text-col {
		order: 1;
	}
	.utopia-split-media-col {
		order: 2;
	}
}
@media ( max-width: 600px ) {
	.utopia-split-media-wrap {
		max-height: 240px;
		width: auto;
		margin-inline: auto;
	}
}

/* -----------------------------------------------------------------------------------------
   7. quote-block
   ----------------------------------------------------------------------------------------- */
.u-quote {
	font-family: var(--wpnext-font-family-display);
	font-style: italic;
	/* Sweep-Fix 20.09.: "display-lg" traf hier seine clamp-Obergrenze (gemessen 60px bei 1440px) --
	   in der 760px-schmalen, dunkel eingefärbten Box stieß die Serifenschrift dadurch fast an die
	   Kanten. Eigener, niedrigerer Clamp (max. 40px) statt eines vorhandenen Presets, da "heading-lg"
	   mit 44px immer noch über der 40px-Obergrenze läge. */
	font-size: clamp( 1.375rem, 1.05rem + 1.2vw, 2.5rem );
	line-height: 1.3;
	text-align: center;
	position: relative;
}
.wpnext-group.is-style-quote-mark .u-quote::before {
	content: '\201C';
	color: var(--wpnext-color-gold);
	font-style: normal;
	display: block;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 0.25em;
}
.u-quote-attribution {
	display: block;
	text-align: center;
	margin-top: var(--wpnext-spacing-sm);
	font-size: var(--wpnext-font-size-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpnext-color-muted);
}
@media ( max-width: 600px ) {
	/* Sweep-Fix 20.09.: 48px links/rechts sind auf 390px-Breite ~25% der Viewportbreite allein für
	   Innenabstand -- reduziert auf den Mobil-Mindestwert aus der Abnahme-Regel (24px). */
	.wpnext-group.is-style-quote-mark {
		padding-left: var(--wpnext-spacing-md) !important;
		padding-right: var(--wpnext-spacing-md) !important;
	}
}

/* -----------------------------------------------------------------------------------------
   8. platform-preview
   ----------------------------------------------------------------------------------------- */
.utopia-device-frame {
	position: relative;
	border-radius: var(--wpnext-radius-lg);
	background: var(--wpnext-color-ink);
	padding: 10px 10px 0;
	box-shadow: var(--wpnext-shadow-lg);
	overflow: hidden;
}
.utopia-device-frame__dots {
	display: flex;
	gap: 6px;
	padding: 6px 4px 10px;
}
.utopia-device-frame__dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wpnext-color-ink-border);
	display: inline-block;
}
.utopia-device-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wpnext-radius-sm) var(--wpnext-radius-sm) 0 0;
}
/* Mobil: Bild zuerst, Text darunter zentriert (siehe PATTERNS.md #7) -- Quellcode-Reihenfolge ist
   Text-Spalte zuerst (Desktop 40/60), column-reverse dreht das auf schmalen Screens um. */
@media ( max-width: 782px ) {
	.utopia-platform-preview .wpnext-columns {
		flex-direction: column-reverse;
		/* ohne Umbruch: in Spaltenrichtung mit `wrap` schrumpfte die Bildspalte auf ein Drittel */
		flex-wrap: nowrap;
	}
	.utopia-platform-preview .wpnext-column {
		/* Spaltenrichtung: die Basis 40/60 % wäre sonst eine Höhe und die Spalten überlappten. */
		flex-basis: auto !important;
		text-align: center;
	}
	.utopia-platform-preview .wpnext-buttons {
		justify-content: center;
	}
}
@media ( max-width: 600px ) {
	/* Sweep-Fix-Runde 7 (20.09.): gleiches Muster wie .is-style-quote-mark oben -- 48px (xl) auf
	   390px-Breite reduziert, damit auf Mobil genuegend Innenabstand zur Bildschirmkante bleibt. */
	.utopia-platform-preview {
		padding-left: var(--wpnext-spacing-md) !important;
		padding-right: var(--wpnext-spacing-md) !important;
	}
}

/* -----------------------------------------------------------------------------------------
   9. timeline
   ----------------------------------------------------------------------------------------- */
.u-timeline {
	position: relative;
	padding-inline-start: 32px;
	max-width: var(--wpnext-layout-content-size);
	margin-inline: auto;
}
.u-timeline::before {
	content: '';
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--wpnext-color-border);
}
.u-timeline::after {
	content: '';
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	width: 2px;
	height: 0;
	background: var(--wpnext-color-brand);
	transition: height 900ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
.u-timeline::after {
	height: var( --u-timeline-progress, 0% );
}
.u-timeline-step {
	position: relative;
	padding-bottom: var(--wpnext-spacing-lg);
	opacity: 0.7;
}
.u-timeline-step.is-done {
	opacity: 1;
}
.u-timeline-step::before {
	content: '';
	position: absolute;
	inset-inline-start: -32px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wpnext-color-surface);
	border: 2px solid var(--wpnext-color-border);
}
.u-timeline-step.is-done::before {
	background: var(--wpnext-color-brand);
	border-color: var(--wpnext-color-brand);
}
.u-timeline-step:not( .is-done ) {
	border-inline-start: 2px dashed transparent;
}
.u-timeline-step__date {
	font-size: var(--wpnext-font-size-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpnext-color-muted);
}

/* -----------------------------------------------------------------------------------------
   10. tier-table
   ----------------------------------------------------------------------------------------- */
.utopia-tier-table {
	display: flex;
	gap: var(--wpnext-spacing-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: var(--wpnext-spacing-sm);
	padding-inline: 4px;
	scrollbar-width: thin;
}
.utopia-tier-card {
	flex: 0 0 280px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.utopia-tier-card.is-highlight {
	border-color: var(--wpnext-color-brand);
	box-shadow: var(--wpnext-shadow-md);
	transform: translateY( -8px );
}
@media ( hover: hover ) {
	.utopia-tier-card:not( .is-highlight ):hover {
		transform: translateY( -4px );
	}
}
.utopia-tier-card__badge {
	align-self: flex-start;
	display: block;
	width: fit-content;
	background: var(--wpnext-color-brand);
	color: #fff;
	font-size: var(--wpnext-font-size-caption);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--wpnext-radius-pill);
	margin-bottom: var(--wpnext-spacing-xxs);
}
.utopia-tier-card__tokens {
	color: var(--wpnext-color-muted);
	font-size: var(--wpnext-font-size-body-sm);
	margin-bottom: var(--wpnext-spacing-sm);
}
.utopia-tier-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.utopia-tier-card li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--wpnext-font-size-body-sm);
}
.utopia-tier-card li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}
.utopia-tier-card li.is-excluded {
	color: var(--wpnext-color-muted);
	opacity: 0.6;
}
@media ( max-width: 600px ) {
	.utopia-tier-card {
		flex-basis: 240px;
	}
}
/* Fix-Runde 1 (mittel): die 6 Karten passten bei KEINER getesteten Desktop-Breite nebeneinander
   (bei 2000px war Karte 5 schon abgeschnitten) und das seitliche Scrollen dorthin hatte auf Desktop
   keinerlei sichtbaren Hinweis (Pfeile/Schatten/Text). Ab 1024px auf ein umbrechendes 3x2-Grid
   wechseln statt der nicht wrappenden Scroll-Reihe -- auf Mobil/Tablet bleibt der (dort gut
   erkennbare) horizontale Scroll-Peek unverändert bestehen. */
@media ( min-width: 1024px ) {
	.utopia-tier-table {
		display: grid;
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		overflow-x: visible;
		scroll-snap-type: none;
		padding-inline: 0;
	}
	.utopia-tier-card {
		flex: initial;
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------------------
   11. token-distribution (donut)
   ----------------------------------------------------------------------------------------- */
.u-donut-wrap {
	display: flex;
	align-items: center;
	gap: var(--wpnext-spacing-lg);
	flex-wrap: wrap;
}
.u-donut {
	/* Ohne diese Regel hat das <svg class="u-donut" viewBox="0 0 200 200"> (kein width-/height-
	   Attribut, nur viewBox) keinerlei intrinsische Größe -- Chromium/Firefox rendern es dann als
	   0x0px, unsichtbar (leerer Kreis statt Donut-Diagramm). Größe muss der viewBox entsprechen, sonst
	   verzerrt/verpixelt das Rendering. Gefunden 20.09. beim Token-Seiten-Screenshot: nur die
	   Legenden-Liste war sichtbar, kein Kreisdiagramm (Breite/Höhe beide 0 laut getBoundingClientRect). */
	width: 200px;
	height: 200px;
	flex-shrink: 0;
}
.u-donut svg circle.u-donut-seg {
	transition: stroke-dashoffset 600ms ease-out;
	transition-delay: var( --u-delay, 0ms );
	/* Fix-Runde 1 (kritisch): das größte Segment (Public Sale, 88%) war in "brand-tint" (#e7f5ea) auf
	   dem Seitenhintergrund #faf9f6 praktisch unsichtbar (Kontrast 1,07:1) -- Farbe wurde in den
	   content/*.json-Datensätzen bereits auf "muted" geändert (5,16:1 Kontrast). Zusätzlich bekommt
	   hier JEDES Segment eine dünne dunkle Kontur, damit auch von Menschen später im Editor gewählte
	   sehr helle Segmentfarben nicht wieder unsichtbar werden. */
	filter: drop-shadow( 0 0 0.6px rgba( 28, 25, 23, 0.45 ) );
}

.u-donut-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.u-donut-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wpnext-font-size-body-sm);
}
.u-donut-legend .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.u-legal-note {
	font-size: var(--wpnext-font-size-body-sm);
	color: var(--wpnext-color-muted);
	border-top: 1px solid var(--wpnext-color-border);
	padding-top: var(--wpnext-spacing-sm);
	margin-top: var(--wpnext-spacing-sm);
}
@media ( max-width: 782px ) {
	.u-donut-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.u-donut {
		/* Selektor-Fix: die Klasse "u-donut" sitzt direkt auf dem <svg>, es gibt kein verschachteltes
		   "svg svg" -- ".u-donut svg" konnte hier nie greifen. */
		width: 220px;
		height: 220px;
	}
}

/* -----------------------------------------------------------------------------------------
   12. logo-wall
   ----------------------------------------------------------------------------------------- */
.utopia-logo-wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wpnext-spacing-xl);
}
.utopia-logo-wall img {
	/* Sweep-Fix 20.09.: 32px war der untere Rand der Zielspanne (32-48px) und wirkte in der
	   großzügigen surface-alt-Leiste ("Gelistet bei") klein/verloren -- 40px (Mittelwert der Spanne,
	   weiterhin exakt gleich für jedes Logo) füllt die Leiste sichtbar besser, ohne die Spanne zu
	   verlassen. */
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale( 1 ) opacity( 0.75 );
	transition: filter 200ms ease-out;
}
@media ( hover: hover ) {
	.utopia-logo-wall a:hover img,
	.utopia-logo-wall img:hover {
		filter: grayscale( 0 ) opacity( 1 );
	}
}
@media ( max-width: 600px ) {
	.utopia-logo-wall {
		gap: var(--wpnext-spacing-md);
	}
}

/* -----------------------------------------------------------------------------------------
   13. faq
   ----------------------------------------------------------------------------------------- */
.utopia-faq details {
	padding-block: var(--wpnext-spacing-sm);
	border-block-end: 0;
}
.utopia-faq summary {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	font-size: var(--wpnext-font-size-body-lg);
	list-style: none;
	min-height: 44px;
}
.utopia-faq summary::-webkit-details-marker {
	display: none;
}
.utopia-faq summary::after {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 300ms ease-out;
}
.utopia-faq details[open] summary::after {
	transform: rotate( -135deg );
}
.utopia-faq .utopia-faq__answer {
	margin-block-start: 24px;
	padding-top: var(--wpnext-spacing-xxs);
	color: var(--wpnext-color-muted);
}

/* -----------------------------------------------------------------------------------------
   14. document-download
   ----------------------------------------------------------------------------------------- */
.utopia-doc-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpnext-spacing-md);
	/* Sweep-Fix 20.09.: bei nur 1-2 Items (z.B. /token/, das einzelne Whitepaper) hing die Karte links
	   in der 1280px-Wide-Zeile statt zentriert zu stehen -- betrifft nur unvollständige Zeilen, eine
	   volle Reihe (z.B. die 4 Whitepaper-Karten auf /whitepaper/) füllt die Breite ohnehin komplett und
	   bleibt durch justify-content:center unverändert. */
	justify-content: center;
}
/* Fix-Runde 9 (Stilwunsch): die prominente Download-Karte (App-/APK-Seite) stand bisher als
   einzelnes Element direkt auf dem Seitenhintergrund, ohne eigene Sektionsabgrenzung -- wirkte neben
   den klar gerahmten Nachbarsektionen (Stats, Logo-Wand, Notice-Band) unfertig. Eine weiche
   Hintergrundbande (gleicher Ton wie Stats/Logo-Wand) rahmt sie jetzt als eigene, bewusst gestaltete
   Sektion. ":has()" beschraenkt das auf Grids MIT einer "is-prominent"-Karte -- die schlichten
   PDF-Vorschau-Raster (Whitepaper, 4 gleichrangige Karten ohne Download-Fokus) bleiben unveraendert.
   Browser-Support fuer ":has()" ist seit Ende 2023 in allen evergreen Browsern gegeben; ohne
   Unterstuetzung faellt die Regel folgenlos weg (Karte bleibt wie zuvor, kein Bruch). */
.utopia-doc-grid:has( .utopia-doc-card.is-prominent ) {
	background: var(--wpnext-color-surface-alt);
	border-radius: var(--wpnext-radius-lg);
	padding: var(--wpnext-spacing-xl);
}
@media ( max-width: 600px ) {
	.utopia-doc-grid:has( .utopia-doc-card.is-prominent ) {
		padding: var(--wpnext-spacing-md);
	}
}
.utopia-doc-card {
	flex: 1 1 220px;
	text-align: center;
}
.utopia-doc-card img {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--wpnext-radius-sm);
	border: 1px solid var(--wpnext-color-border);
	margin-inline: auto;
	box-shadow: var(--wpnext-shadow-sm);
}
.utopia-doc-card__note {
	font-size: var(--wpnext-font-size-caption);
	color: var(--wpnext-color-muted);
}
/* Sweep-Fix 20.09.: "is-prominent" (App-/Sideload-Download statt PDF-Vorschau, siehe blocks.py
   render_document_download) -- eigenständige Kartenform statt des Portrait-Foto-Rasters: Icon-Kachel
   links (identischer Look wie ".utopia-card-icon" im Projekte-Grid), Titel/Meta/Button rechts,
   randbegrenzt und auf Lesebreite zentriert statt als einzelnes 220px-Kärtchen verloren in der
   1280px-Wide-Zeile zu stehen. */
.utopia-doc-card.is-prominent {
	flex: 1 1 100%;
	max-width: 640px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--wpnext-spacing-md);
	text-align: left;
	background: var(--wpnext-color-surface);
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
	padding: var(--wpnext-spacing-lg);
	/* Stilwunsch 20.09.: die Karte wirkte neben dem restigen Karten-Polish der Seite (Hover-Lift,
	   Schatten auf .u-card) flach/technisch. Gleicher Hover-Lift wie die uebrigen Karten +
	   dezenter Ruhezustand-Schatten, damit sie als eigenstaendige, wichtige Aktion auffaellt. */
	box-shadow: var(--wpnext-shadow-sm);
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
@media ( hover: hover ) {
	.utopia-doc-card.is-prominent:hover {
		transform: translateY( -2px );
		box-shadow: var(--wpnext-shadow-md);
	}
}
.utopia-doc-card__icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wpnext-radius-md);
	/* Stilwunsch 20.09.: neutrales Grau -> markenfarbener "brand-tint" (#e7f5ea), damit die Icon-
	   Kachel als bewusster Akzent statt als generische Platzhalter-Flaeche wirkt. */
	background: var(--wpnext-color-brand-tint);
	padding: 14px;
}
.utopia-doc-card__icon svg {
	width: 44px;
	height: 44px;
	color: var(--wpnext-color-brand);
}
.utopia-doc-card__body {
	min-width: 0;
	flex: 1 1 auto;
}
.utopia-doc-card__eyebrow {
	/* Sweep-Runde 2 (Stilwunsch): siehe Kommentar in blocks.py render_document_download(). */
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin: 0 0 4px;
}
.utopia-doc-card__lead {
	/* Fix-Runde 7 (20.09., Stilwunsch): einordnender Satz zwischen Titel und Badge-Reihe, damit die
	   prominente Karte nicht direkt von der Ueberschrift auf die technischen Badges springt. */
	color: var(--wpnext-color-muted);
	font-size: var(--wpnext-font-size-body-sm);
	margin: 4px 0 var(--wpnext-spacing-sm);
}
.utopia-doc-card.is-prominent .utopia-doc-card__note {
	/* Stilwunsch 20.09.: "Version …/signiert/Groesse" als kleine Badge-Reihe statt eines reinen
	   Fliesstextsatzes -- die Pruefsumme bleibt eine eigene, klar abgesetzte Monospace-Zeile
	   darunter (siehe .utopia-doc-card__hash display:block unten). Nur fuer is-prominent (App-Karte),
	   die schlichten PDF-Vorschau-Karten (Whitepaper) behalten ihre einfache Caption-Zeile. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.utopia-doc-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--wpnext-color-surface-alt);
	border: 1px solid var(--wpnext-color-border);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: var(--wpnext-font-size-caption);
	color: var(--wpnext-color-text);
	white-space: nowrap;
}
.utopia-doc-card__badge--verified {
	background: var(--wpnext-color-brand-tint);
	border-color: var(--wpnext-color-brand-dark);
	color: var(--wpnext-color-brand-active);
	font-weight: 600;
}
.utopia-doc-card__hash-row {
	/* Stilwunsch 20.09.: "SHA-256: <Hash>" gemeinsam als eigene Zeile unter der Badge-Reihe statt
	   inline im selben Fliesstext-Satz -- die Pruefsumme ist die "amtliche" Angabe zum Nachpruefen,
	   verdient optisch mehr Abstand von den Status-Badges. Label und Hash bleiben EIN Flex-Item
	   (statt Label als eigener anonymer Flex-Item-Rest in der Badge-Zeile haengen zu bleiben, waehrend
	   nur der <code>-Teil umbricht). */
	display: block;
	width: 100%;
	margin-top: 2px;
	font-size: var(--wpnext-font-size-caption);
	color: var(--wpnext-color-muted);
}
.utopia-doc-card__hash {
	/* Sweep-Runde 4 (kritisch, Fix-Runde-10-Regression): weder eine 32/64- noch eine 16er-<wbr>-
	   Gruppierung hielt den Umbruch ausgewogen, weil "overflow-wrap: anywhere" (siehe git-history)
	   eine Umbruchgelegenheit an JEDER Zeichenposition eroeffnete und damit jedes <wbr> wirkungslos
	   machte -- die Line-Breaking-Engine fuellte weiterhin bis zum spaetestmoeglichen Zeichen und
	   liess zufaellige 2-Zeichen-Waisenzeilen uebrig (verifiziert per cdp_measure/Screenshot am
	   20.09., "...cc7c" / "6f"). Fix ohne jede Schriftgroessen-/overflow-wrap-Abhaengigkeit: die
	   Pruefsumme kommt aus import.py bereits als 8 atomare 8-Zeichen-<span>-Chunks (siehe
	   .utopia-doc-card__hash-chunk), dieser Container ist selbst ein flex-wrap -- ein einzelner
	   Chunk kann nie mitten durchbrechen, der Browser balanciert nur noch zwischen ganzen Chunks. */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	box-sizing: border-box;
	gap: 3px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	line-height: 1.5;
	background: var(--wpnext-color-surface-alt);
	border: 1px solid var(--wpnext-color-border);
	padding: 8px 12px;
	border-radius: 6px;
	margin-top: 4px;
}
.utopia-doc-card__hash-chunk {
	white-space: nowrap;
}
@media ( max-width: 600px ) {
	.utopia-doc-card.is-prominent {
		flex-direction: column;
		text-align: center;
		padding: var(--wpnext-spacing-md);
	}
	.utopia-doc-card__hash {
		justify-content: center;
	}
}

/* -----------------------------------------------------------------------------------------
   15. contact-form editor preview (frontend styling lives in the plugin's frontend.css)
   ----------------------------------------------------------------------------------------- */
.utopia-form-preview {
	border: 1px dashed var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
	padding: var(--wpnext-spacing-md);
}
.utopia-form-preview__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.utopia-form-preview__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-block: 8px;
}
.utopia-newsletter-preview {
	display: flex;
	gap: 8px;
	border: 1px dashed var(--wpnext-color-border);
	padding: 12px;
	border-radius: var(--wpnext-radius-sm);
}

/* -----------------------------------------------------------------------------------------
   16. app-download
   ----------------------------------------------------------------------------------------- */
.utopia-app-frame {
	max-width: 280px;
	margin-inline: auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wpnext-shadow-lg);
	animation: utopia-app-in 700ms cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
.utopia-app-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
}
@keyframes utopia-app-in {
	from {
		opacity: 0;
		transform: scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.utopia-app-frame {
		animation: none;
	}
}
.utopia-badge-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.utopia-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-sm);
	font-size: var(--wpnext-font-size-body-sm);
	min-height: 44px;
}
.utopia-badge.is-disabled {
	opacity: 0.5;
}

/* -----------------------------------------------------------------------------------------
   17. cta-band
   ----------------------------------------------------------------------------------------- */
.utopia-cta-band {
	/* Sweep-Fix 20.09.: "max-width:720px; margin-inline:auto" saß bisher auf demselben Element, das
	   auch die Klasse "alignfull" trägt (render_cta_band() gibt align="full" UND className="utopia-
	   cta-band" auf denselben <div>) -- das kollidierte mit WPs eigener alignfull-Randberechnung
	   (negative margin-left/right relativ zum Viewport) und ergab live NICHT "volle Breite, Inhalt
	   zentriert", sondern eine 720px schmale, an den linken Rand gepinnte Box (verifiziert:
	   getBoundingClientRect left:0 width:720 auf 1440px). Die Box selbst bleibt jetzt echt alignfull
	   (Hintergrundfarbe über die volle Breite); die Zentrierung auf Lesebreite übernimmt WPs eigene
	   "is-layout-constrained"-Regel für die direkten Kinder (Überschrift/Buttons haben kein eigenes
	   align und werden dadurch automatisch auf contentSize=760px zentriert, inkl. der globalen
	   Root-Padding-Innenabstände dank "useRootPaddingAwareAlignments":true in theme.json). */
	text-align: center;
}
.utopia-cta-band .wpnext-buttons {
	justify-content: center;
}
/* Fix-Runde 3 (klein): "Mehr im Whitepaper"/"Fragen? Kontakt aufnehmen" (Token-Seite) massen 43px statt
   der geforderten min. 44px (Lighthouse "target-size", 1px-Rundungsdifferenz bei theme.json-Default-
   Padding). 1px zusaetzliches Padding oben/unten schafft Sicherheitsabstand ohne sichtbaren Effekt auf
   den Rhythmus. */
.utopia-cta-band .wpnext-button__link {
	padding-top: 15px;
	padding-bottom: 15px;
}
@media ( max-width: 600px ) {
	.utopia-cta-band .wpnext-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.utopia-cta-band .wpnext-button {
		width: 100%;
	}
	/* Sweep-Runde 3 (klein): render_cta_band() liefert jetzt "xl" (48px, Desktop-Mindestmass) als
	   Inline-Style -- auf 390px waere das ~25% der Breite allein fuer Innenabstand. Reduktion auf
	   "lg" (32px, weiterhin ueber dem 24px-Mobil-Mindestwert) per !important, da Inline-Styles sonst
	   jede normale Media-Query-Regel ueberstimmen (gleiches Muster wie .is-style-quote-mark). */
	.utopia-cta-band {
		padding-left: var(--wpnext-spacing-lg) !important;
		padding-right: var(--wpnext-spacing-lg) !important;
	}
}

/* -----------------------------------------------------------------------------------------
   18. notice-band — never animated
   ----------------------------------------------------------------------------------------- */
.utopia-notice-band {
	display: flex;
	align-items: center;
	gap: var(--wpnext-spacing-sm);
	/* Fix-Runde 9 (klein): horizontales Padding war "md" (24px), unter der 40px-Zielmarke fuer
	   farbige Boxen -- auf "lg" (32px) angehoben, naeher an den uebrigen farbigen Sektionen.
	   Sweep-Runde 3 (klein): 32px war IMMER NOCH unter der 40px-Desktop-Mindestmarke (per
	   cdp_measure.mjs auf /token/ + /whitepaper/ bestaetigt) -- jetzt "xl" (48px), Mobil-Reduktion
	   auf "md" (24px, weiterhin am Mindestwert) in der bestehenden max-width:600px-Regel unten. */
	padding: var(--wpnext-spacing-sm) var(--wpnext-spacing-xl);
	border-radius: var(--wpnext-radius-md);
	background: var(--wpnext-color-brand-tint);
	/* Fix-Runde 4 (klein, Mitigationsversuch): auf /token/ zeigte ein echter PerformanceObserver
	   in 1 von 3 Reloads einen CLS-Ausschlag, weil MAIN + dieses Element in einem sehr fruehen
	   Layout-Pass (vor vollstaendigem Font-/CSS-Apply) noch mit 0x0x0x0 gemessen werden, bevor die
	   echte Groesse (gemessen: 760x245 bei 1440px) steht -- selbe offene Ursache wie beim seit
	   Runde 1 bekannten Fall .utopia-contact-form-wrap auf /kontakt/. Reservierte Mindesthoehe nah
	   am gemessenen Wert verkleinert im besten Fall den Sprung, behebt aber nicht die eigentliche
	   Ursache (in 15 eigenen Testlaeufen vor UND nach dieser Aenderung 0 CLS gemessen -- der
	   Fehler liess sich in einem unbelasteten, alleinstehenden Headless-Chromium nicht
	   reproduzieren, vermutlich abhaengig von Systemlast/CPU-Throttling wie bei Lighthouse). Fuer
	   die mobile Stapel-Variante (gemessen 375x311) siehe min-height weiter unten im
	   max-width:600px-Block. */
	min-height: 230px;
}
.utopia-notice-band.is-warning {
	background: #fdf1ef;
	border: 1px solid rgba( 179, 38, 30, 0.25 );
}
.utopia-notice-band__icon {
	display: block;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	color: var(--wpnext-color-brand-hover);
}
.utopia-notice-band.is-warning .utopia-notice-band__icon {
	color: var(--wpnext-color-danger);
}
@media ( max-width: 600px ) {
	.utopia-notice-band {
		flex-direction: column;
		text-align: center;
		/* gestapeltes Layout ist hoeher als die Row-Variante -- gemessen 375x311 auf /token/,
		   siehe Kommentar an der Basisregel oben. */
		min-height: 300px;
		/* Sweep-Runde 3 (klein): Basisregel liefert jetzt "xl" (48px) horizontal -- auf 390px
		   Breite reduziert auf "md" (24px, Mobil-Mindestwert), analog zu allen anderen auf
		   Desktop-"xl" angehobenen Sektionen. */
		padding-left: var(--wpnext-spacing-md);
		padding-right: var(--wpnext-spacing-md);
	}
}

/* -----------------------------------------------------------------------------------------
   19. legal-copy — deliberately plain, no motion classes ever applied
   ----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   20. Footer
   ----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   20. Footer
   ----------------------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--wpnext-color-bg-dark);
	color: var(--wpnext-color-text-dark);
	padding: var(--wpnext-spacing-xxl) var(--wpnext-spacing-md) var(--wpnext-spacing-lg);
}
.site-footer__inner {
	max-inline-size: var(--wpnext-layout-wide-size);
	margin-inline: auto;
}
.site-footer a {
	color: var(--wpnext-color-text-dark);
}
.site-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpnext-spacing-lg);
}
.site-footer__col {
	flex: 1 1 200px;
	min-inline-size: 0;
}
@media (min-width: 782px) {
	.site-footer__cols {
		flex-wrap: nowrap;
	}
	.site-footer__col {
		flex: 0 1 24%;
	}
	.site-footer__col.site-footer__col--brand {
		flex: 0 1 28%;
	}
}
.site-footer__col > * + * {
	margin-block-start: var(--wpnext-spacing-block-gap);
}
.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 24px;
	font-family: var(--wpnext-font-family-display);
	font-weight: 600;
	/* fluid wie im Original: 14,4375 px bei 390 px, 20 px ab 1200 px */
	font-size: clamp(14.4375px, 0.75rem + 0.625vw, 20px);
}
.site-footer__brand a {
	text-decoration: none;
}
.site-footer__heading {
	margin: 0;
	font-size: var(--wpnext-font-size-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.site-footer__small {
	margin-block-end: 0;
	color: var(--wpnext-color-muted-dark);
	font-size: var(--wpnext-font-size-body-sm);
}
.site-footer p,
.site-footer li {
	overflow-wrap: break-word;
	hyphens: auto;
}
.site-footer ul {
	margin: var(--wpnext-spacing-block-gap) 0 0;
	padding-inline-start: 40px;
}
.site-footer li + li {
	margin-block-start: 16px;
}
.site-footer li a {
	display: inline-flex;
	align-items: center;
	padding-block: 6px;
}
.site-footer__newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}
.site-footer__newsletter input {
	box-sizing: border-box;
	flex: 1 1 200px;
	min-block-size: 44px;
	padding: 10px 14px;
	border: 1px solid var(--wpnext-color-ink-border);
	border-radius: var(--wpnext-radius-sm);
	background: var(--wpnext-color-ink-surface);
	color: var(--wpnext-color-text-dark);
	font: inherit;
	line-height: normal;
}
.site-footer__newsletter button {
	box-sizing: border-box;
	flex: 0 0 auto;
	min-block-size: 44px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--wpnext-radius-sm);
	background: var(--wpnext-color-brand-hover);
	color: #fff;
	font: inherit;
	font-family: Arial, sans-serif;
	font-weight: 600;
	line-height: normal;
}
.site-footer__newsletter button[disabled] {
	opacity: 0.85;
}
/* Honeypot (S19-R-047): aus dem Sichtbereich, aber nie display:none. */
.utopia-form__hp {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}
.utopia-form__feedback:empty {
	margin: 0;
	padding: 0;
	block-size: 0;
}
.site-footer__rule {
	max-inline-size: var(--wpnext-layout-content-size);
	margin-block: var(--wpnext-spacing-lg) var(--wpnext-spacing-md);
	margin-inline: auto;
	border: 0;
	border-block-start: 1px solid var(--wpnext-color-ink-border);
}
.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wpnext-spacing-block-gap);
}
.site-footer__meta p {
	margin: 0;
	color: var(--wpnext-color-muted-dark);
	font-size: var(--wpnext-font-size-caption);
}
@media (max-width: 600px) {
	.site-footer__meta {
		flex-direction: column;
		gap: var(--wpnext-spacing-xxs);
	}
}
.site-footer :focus-visible {
	box-shadow: var(--wpnext-shadow-focus-dark);
}

/* Listen- und Eintragsseiten (Blog-Archiv, 404) */
.list-page,
.not-found {
	max-inline-size: var(--wpnext-layout-content-size);
	margin-inline: auto;
	padding: var(--wpnext-spacing-xxl) var(--wpnext-spacing-md);
}
.list-header h1 {
	font-size: var(--wpnext-font-size-display-lg);
	margin-block-end: var(--wpnext-spacing-lg);
}
.entry-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wpnext-spacing-lg);
}
.entry-card {
	display: grid;
	gap: var(--wpnext-spacing-sm);
	padding: var(--wpnext-spacing-md);
	background: var(--wpnext-color-surface);
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-md);
}
.entry-card h2 {
	font-size: var(--wpnext-font-size-heading-md);
}
.entry-card h2 a {
	text-decoration: none;
}
.entry-meta {
	color: var(--wpnext-color-muted);
	font-size: var(--wpnext-font-size-body-sm);
}
.entry--post {
	padding-block: var(--wpnext-spacing-xxl);
}
.entry--post .entry-header {
	max-inline-size: var(--wpnext-layout-content-size);
	margin: 0 auto var(--wpnext-spacing-block-gap);
	padding: 0;
}
.entry--post .entry-header h1 {
	margin: 0;
	font-size: var(--wpnext-font-size-display-lg);
}
.pagination {
	margin-block-start: var(--wpnext-spacing-lg);
}
.not-found {
	text-align: center;
	padding-block: var(--wpnext-spacing-xxxl);
}
.not-found > * + * {
	margin-block-start: var(--wpnext-spacing-block-gap);
}
.not-found h1 {
	font-size: var(--wpnext-font-size-display-lg);
}
.not-found__code {
	color: var(--wpnext-color-muted);
	font-size: var(--wpnext-font-size-caption);
	letter-spacing: 0.08em;
}

/* -----------------------------------------------------------------------------------------
   21. List style variant: checklist
   ----------------------------------------------------------------------------------------- */
.wpnext-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}
.wpnext-list.is-style-checklist li {
	position: relative;
	padding-left: 28px;
}
.wpnext-list.is-style-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wpnext-color-brand-tint);
	box-shadow: inset 0 0 0 1.5px var(--wpnext-color-brand);
}

/* Legenden-Punkte: das style-Attribut der Quelle entfaellt (CSP); Reihenfolge wie die Donut-Segmente. */
.u-donut-legend li:nth-child(1) .dot { background: var(--wpnext-color-brand); }
.u-donut-legend li:nth-child(2) .dot { background: var(--wpnext-color-gold); }
.u-donut-legend li:nth-child(3) .dot { background: var(--wpnext-color-ink-border); }
.u-donut-legend li:nth-child(4) .dot { background: var(--wpnext-color-muted); }
/* --cols aus dem style-Attribut der Quelle kommt als Klasse an. */
.utopia-org-grid.wpnext-var-cols-4 { --cols: 4; }
.utopia-org-grid.wpnext-var-cols-3 { --cols: 3; }
/* Kennzahlen: Schriftgroesse/-gewicht standen im style-Attribut der Quelle (CSP: kein style=). */
.utopia-stats h3 { font-size: var(--wpnext-font-size-display-lg); font-weight: 300; }
.utopia-stats h3.is-long-value { font-size: var(--wpnext-font-size-heading-lg); }
/* Die Quelle setzt die Kennzahl 210.000+ der Startseite per style-Attribut auf display-lg (die
   anderen langen Werte, z. B. "1.000 Mrd. €" der Vision-Seite, bleiben bei heading-lg). */
.utopia-stats h3.is-long-value[data-target="210000"] { font-size: var(--wpnext-font-size-display-lg); }
/* WCAG 1.4.3: gedaempfte Inhalte ohne Deckkraft auf Text (axe misst die berechnete Deckkraft);
   die Quelle verbarg diese Verstoesse hinter dem JS-Reveal (opacity:0 bis zum Einblenden). */
.utopia-tier-card li.is-excluded { opacity: 1; }
.utopia-tier-card li.is-excluded svg { opacity: 0.6; }
.u-timeline-step { opacity: 1; }
.u-timeline-step:not(.is-done) { color: var(--wpnext-color-muted); }
.wpnext-bg-ink .u-quote-attribution,
.wpnext-bg-ink-surface .u-quote-attribution,
.wpnext-bg-bg-dark .u-quote-attribution { color: var(--wpnext-color-muted-dark); }
.utopia-tier-card__badge { background: var(--wpnext-color-brand-hover); }
.utopia-badge.is-disabled { opacity: 1; color: var(--wpnext-color-muted); }
/* WordPress: wp-site-blocks > * { margin-block-start: 1.5rem } */
.site-main,
.site-footer {
	margin-block-start: var(--wpnext-spacing-block-gap);
}

/* ===== utopia-forms: Formular-Basislayout ===== */
/* Utopia Forms — Basislayout. Farb-/Typografie-Feinschliff liegt zusätzlich in theme/utopia/assets/css/theme.css. */

.utopia-form {
	max-width: 640px;
}

.utopia-form__form--inline {
	max-width: none;
}

/* Fix-Runde 4 (mittel): [hidden] ist eine UA-Default-Regel (Spezifitaet 0-1-0) und wird von
   jeder Autoren-Klassenregel mit derselben oder hoeherer Spezifitaet ueberstimmt -- betraf
   ".utopia-form--newsletter .utopia-form__form--inline{display:flex}" weiter unten: das JS setzt
   form.hidden=true korrekt, das Formular blieb aber (leeres Feld + dauerhaft deaktivierter Button)
   sichtbar neben der Erfolgsmeldung. Das Kontaktformular hat keine konkurrierende display-Regel
   und war deshalb nie betroffen. Eigener [hidden]-Attribut-Selektor + !important schlaegt jede
   Autoren-display-Regel auf demselben Element, unabhaengig davon, welche Formular-Variante noch
   dazukommt. */
.utopia-form__form[hidden] {
	display: none !important;
}

.utopia-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.utopia-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media ( max-width: 600px ) {
	.utopia-form__row {
		grid-template-columns: 1fr;
	}
}

.utopia-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.utopia-form__field label,
.utopia-form__consent label {
	font-size: var(--wpnext-font-size-body-sm);
	font-weight: 500;
}

.utopia-form input[type='text'],
.utopia-form input[type='email'],
.utopia-form select,
.utopia-form textarea {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--wpnext-color-border);
	border-radius: var(--wpnext-radius-sm);
	background: var(--wpnext-color-surface);
	color: var(--wpnext-color-text);
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
	transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
}

.utopia-form textarea {
	min-height: 120px;
	resize: vertical;
}

.utopia-form input:focus-visible,
.utopia-form select:focus-visible,
.utopia-form textarea:focus-visible {
	outline: none;
	border-color: var(--wpnext-color-brand);
	box-shadow: var(--wpnext-shadow-focus);
}

.utopia-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wpnext-font-size-body-sm);
	color: var(--wpnext-color-muted);
}

.utopia-form__consent input {
	margin-top: 4px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.utopia-form__actions {
	margin: 8px 0 0;
}

.utopia-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 160px;
	padding: 12px 28px;
	border: none;
	border-radius: var(--wpnext-radius-sm);
	/* Bonus-Fix (bei der Verifikation von Fund #9/#15 per Lighthouse entdeckt, nicht Teil der
	   19 Befunde): weißer Text auf "brand" (#16a34a) hat nur 3,3:1 Kontrast -- derselbe Fehler wie
	   beim Hero-CTA, hier direkt mitbehoben statt eine bekannte Kopie des Bugs stehen zu lassen.
	   "brand-hover" ist seit Fix-Runde 1 die kontraststarke Solid-Button-Farbe (5,4:1). */
	background: var(--wpnext-color-brand-hover);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 200ms ease-out, transform 150ms ease-out;
}

.utopia-form__submit:hover {
	background: var(--wpnext-color-brand-active);
}

.utopia-form__submit:disabled {
	cursor: default;
	opacity: 0.85;
}

.utopia-form__submit.is-loading {
	position: relative;
}

.utopia-form__feedback {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--wpnext-radius-sm);
	font-size: var(--wpnext-font-size-body-sm);
}

.utopia-form__feedback.is-success {
	background: var(--wpnext-color-brand-tint);
	color: var(--wpnext-color-text);
}

.utopia-form__feedback.is-error {
	background: rgba( 179, 38, 30, 0.08 );
	color: var(--wpnext-color-danger);
}

/* Newsletter: einzeilig auf Desktop */
.utopia-form--newsletter .utopia-form__form--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.utopia-form--newsletter input[type='email'] {
	flex: 1 1 200px;
}

.utopia-form--newsletter .utopia-form__submit {
	min-width: auto;
	flex: 0 0 auto;
}

.utopia-form--newsletter .utopia-form__feedback {
	flex-basis: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	.utopia-form__submit {
		transition: none;
	}
}

/* Das Original kennt keine Palettenfarbe `brand-hover`: dort bleibt Text mit dieser Klasse in der
   Textfarbe der Umgebung (Zwischenzeilen wie "Mission" oder "Grundlagen" sind dunkel). */
.wpnext-text-brand-hover { color: inherit !important; }