/* Globaler Rahmen (Header/Footer) – Chrome, das theme.json nicht ausdrückt. */

/* =================== DESIGN-SYSTEM-HOOKS =================== */
/* Container-Gutter responsiv: 20 / 32 / 48 px (Root-Padding für volle Bänder). */
body {
	--wp--style--root--padding-left: 20px;
	--wp--style--root--padding-right: 20px;
}
@media (min-width: 640px) {
	body { --wp--style--root--padding-left: 32px; --wp--style--root--padding-right: 32px; }
}
@media (min-width: 1024px) {
	body { --wp--style--root--padding-left: 48px; --wp--style--root--padding-right: 48px; }
}

/* 4-stufiges Container-System (analog decoster-global.css). Sichtbare Inhaltsbreite
   = Stufe; der responsive Gutter (20/32/48px) kommt zusätzlich außen drauf.
   Jedes Pattern wählt die Stufe per Klasse: container-xl|l|m|s am Inhalts-Wrapper. */
.container-xl,
.container-l,
.container-m,
.container-s {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	box-sizing: border-box;
}
.container-xl { max-width: calc(1600px + 2 * var(--wp--style--root--padding-left)); } /* Hero, Vollformat */
.container-l  { max-width: calc(1280px + 2 * var(--wp--style--root--padding-left)); } /* Multi-Card-Grids, Stats */
.container-m  { max-width: calc(960px  + 2 * var(--wp--style--root--padding-left)); } /* Standard-Sektion + Bild */
.container-s  { max-width: calc(720px  + 2 * var(--wp--style--root--padding-left)); } /* Text-/Lesesektionen, FAQ */

/* ---- Full-Bleed-Sektionen sitzen bündig (Wurzel: blockGap-Streifen) ----
   Zwei Quellen setzen denselben vertikalen blockGap (spacing-30 ≈ 0.67rem):
   (1) der Seiten-Wrapper .wp-site-blocks zwischen Header/Main/Footer,
   (2) das constrained-Inhaltslayout zwischen gestapelten Sektionen.
   Dadurch entsteht zwischen je zwei Full-Bleed-Sektionen — und bei Header→§1 und
   §last→Footer — ein Hintergrund-Streifen. Hier an der Wurzel flush gestellt; gilt
   für front-page (main > section) UND die „Volle Breite"-Vorlage
   (main > post-content > section). Normaler Fließtext in der Lesespalte (NICHT
   .alignfull) behält bewusst seinen blockGap. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
main#content > .alignfull,
main#content > .wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Typo-Tokens, die theme.json nicht je-Preset ausdrückt. */
.has-display-font-size {
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
}
/* WP hyphenisiert ziffrige Preset-Slugs: h2→has-h-2-font-size, h3→has-h-3-font-size. */
.has-h-2-font-size,
.has-h-3-font-size {
	letter-spacing: -0.02em;
}
.has-eyebrow-font-size {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 700;
}

/* Überschriften brechen überlange Wörter, statt die Sektion zu sprengen
   (decoster global.css Z. 171–176). Niedrige Spezifität, kein color → der
   Farb-Override der Block-Auswahl bleibt unberührt. */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: anywhere;
}

/* =================== HEADER =================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 0; /* Höhe kommt allein aus __inner (min-height 80px). */
	border-bottom: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.site-header__inner {
	max-width: 1280px;
	margin-inline: auto;
	min-height: 80px;
	padding-inline: var(--wp--style--root--padding-left);
}
.site-logo {
	display: inline-flex;
	align-items: center;
}
.site-logo img {
	height: 40px;
	width: auto;
	display: block;
}
/* Nav-Links: Body-Größe, normal gewichtet, mit Luft (px-4 py-2) → klar getrennt. */
.site-header .wp-block-navigation-item__content {
	font-weight: 400;
	padding: 0.5rem 1rem;
}
/* Bar-blockGap zurücknehmen — die Trennung kommt jetzt aus dem Item-Padding. */
.site-header .wp-block-navigation__container {
	gap: 0.25rem;
}

/* Aktiver Menüpunkt: Burgunder + dezenter Unterstrich (aria-current vom Block). */
.wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* Trennlinie im Services-Submenu (vor „Corporate Branding"). */
.wp-block-navigation .nav-sep {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 6px;
	padding-top: 6px;
}

/* „Contact" als kompakte Pille (≈40px, mittig in der 80px-Leiste, NICHT volle Höhe).
   0,3,0 überstimmt a11y (min-height:44px, 0,2,0) + die Bar-Link-Regeln. */
.wp-block-navigation .nav-cta .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	/* Label in ALLEN Zuständen weiß erzwingen. a11y setzt Bar-Links auf Burgunder
	   (0,3,0) und :hover auf primary-hover — gleiche Spezifität, lädt aber NACH
	   theme.css → ohne !important gewänne a11y → Burgunder-Text auf Burgunder-Pille
	   = unsichtbar. Hover-BG ist #5C0017, Text bleibt weiß. */
	color: var(--wp--preset--color--base) !important;
	border-radius: 6px;
	padding: 0.625rem 1.25rem;
	font-weight: 600;
	min-height: 0;
	box-sizing: border-box;
	line-height: 1.2;
}
.wp-block-navigation .nav-cta .wp-block-navigation-item__content:hover,
.wp-block-navigation .nav-cta .wp-block-navigation-item__content:focus,
.wp-block-navigation .nav-cta .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--base) !important;
}

/* =================== PRIMÄR-BUTTONS — eine gemeinsame Geste =================== */
/* Header „Contact", Hero-CTA, Formular-Submit, Footer „Subscribe": identische
   Hover-/Focus-Geste — translateY(-2px), Schatten wächst, Burgunder→primary-hover
   (außer Footer-Subscribe = weiß auf Burgunder), Pfeil →0.4rem. Reduced-Motion: aus.
   (Der §4-Submit trägt dieselbe Signatur zusätzlich lokal; identische Werte.) */
.nav-cta .wp-block-navigation-item__content,
.hero__cta .wp-block-button__link,
.wd-cf-submit,
.footer-subscribe {
	transition: background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}
.nav-cta .wp-block-navigation-item__content:hover,
.nav-cta .wp-block-navigation-item__content:focus-visible,
.hero__cta .wp-block-button__link:hover,
.hero__cta .wp-block-button__link:focus-visible,
.wd-cf-submit:hover,
.wd-cf-submit:focus-visible,
.footer-subscribe:hover,
.footer-subscribe:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 12px 28px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}
/* Burgunder-Hintergrund-Buttons: dunkler werden, Text bleibt weiß
   (0,3,0 für nav-cta überstimmt die a11y-Hover-Farbe primary-hover). */
.wp-block-navigation .nav-cta .wp-block-navigation-item__content:hover,
.wp-block-navigation .nav-cta .wp-block-navigation-item__content:focus-visible,
.hero__cta .wp-block-button__link:hover,
.hero__cta .wp-block-button__link:focus-visible,
.wd-cf-submit:hover,
.wd-cf-submit:focus-visible {
	/* !important: der Hero-Button trägt has-primary-background-color (WP-Preset-Klasse
	   mit !important) — ohne !important bliebe sein Hover-BG auf primary stehen. */
	background-color: var(--wp--preset--color--primary-hover) !important;
	color: var(--wp--preset--color--base);
}
/* Pfeil-Geste (Hero + Submit). */
.hero__cta .wp-block-button__link:hover .hero__arrow,
.hero__cta .wp-block-button__link:focus-visible .hero__arrow,
.wd-cf-submit:hover .wd-cf-submit-arrow,
.wd-cf-submit:focus-visible .wd-cf-submit-arrow {
	transform: translateX(0.4rem);
}
.hero__arrow,
.wd-cf-submit-arrow {
	display: inline-block;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.nav-cta .wp-block-navigation-item__content,
	.hero__cta .wp-block-button__link,
	.wd-cf-submit,
	.footer-subscribe,
	.hero__arrow,
	.wd-cf-submit-arrow { transition: none; }
	.nav-cta .wp-block-navigation-item__content:hover,
	.hero__cta .wp-block-button__link:hover,
	.wd-cf-submit:hover,
	.footer-subscribe:hover { transform: none; }
}

/* =================== SERVICES-DROPDOWN =================== */
/* Weißes Panel, lesbar (Burgunder auf Weiß), keine Default-Bullets, kein Navy.
   !important nötig: Core hängt dem Submenu-<ul> die Overlay-Farben als Klassen an
   (has-secondary-background-color = Navy, has-base-color = weiß; beide !important).
   Desktop = schwebendes weißes Panel; im offenen Mobile-Overlay zurück auf Navy (s. u.). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14), 0 4px 10px rgba(0, 0, 0, .06);
	min-width: 320px !important;
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	list-style: none;
}
.wp-block-navigation__submenu-container li { list-style: none; }
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	display: block;
	width: 100%;
	padding: 0.7rem 1.25rem;
	min-height: 0;
	white-space: normal;
	line-height: 1.3;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}
/* Featured ★-Services (Social Media, Web Design) hervorheben. */
.wp-block-navigation__submenu-container .nav-feature .wp-block-navigation-item__content {
	font-weight: 600;
}
/* Mobile-Overlay (Navy): Submenu blendet sich ein, KEIN weißes Panel.
   !important + höhere Spezifität (0,3,0) schlägt die Desktop-Panel-Regel oben. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0;
	box-shadow: none;
	min-width: 0 !important;
	padding: 0;
	margin-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: rgba(255, 255, 255, 0.10);
	color: var(--wp--preset--color--base);
}

/* =================== HAMBURGER (mobil) =================== */
/* Klar sichtbar: 28px, Burgunder. Core nutzt ein Fill-Icon (rect-Linien) →
   stroke-width greift nicht; Größe + Burgunder-Fill machen es deutlich. */
.site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--primary);
}
.site-header .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* =================== FOOTER =================== */
.footer-logo {
	display: inline-flex;
}
.footer-logo img {
	height: 40px;
	width: auto;
	display: block;
}
.footer-tagline {
	margin-top: 1rem;
	max-width: 20rem; /* Original max-w-xs */
}
.footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.05em; /* Original tracking-wider */
	font-weight: 700;
	margin-bottom: 0.75rem;
}

/* Footer-Navigation: core/navigation (ref → wp_navigation „Footer-Menü"), vertikal,
   overlayMenu:never (kein Burger). Optik 1:1 wie die frühere .footer-list: keine Bullets,
   0.4rem-Abstand, weiß, body-Größe, kein Dauer-Unterstrich (Hover underline via
   .site-footer a-Regel weiter unten). Struktur an TT5 footer-columns.php orientiert. */
/* Navigate-Liste (core/list, wie das Original-<ul>): keine Bullets, kompakt,
   weiß aus dem Footer-Kontext; Hover-Unterstrich aus `.site-footer a:hover`. */
.footer-nav {
	list-style: none;
	font-size: var(--wp--preset--font-size--body);
	margin: 0;
	padding: 0;
}
.footer-nav li + li {
	margin-block-start: 0.375rem; /* Original space-y-1.5 */
}
.footer-nav a {
	color: var(--wp--preset--color--base);
}

/* Contact-Zeilen: Original space-y-1.5 (schlägt die Flow-blockGap-Marge) */
.site-footer__cols .wp-block-column p + p {
	margin-block-start: 0.375rem;
}

/* Footer-Links ohne Dauer-Unterstrich; erst beim Hover (Subscribe ausgenommen). */
.site-footer a:where(:not(.footer-subscribe)) {
	text-decoration: none;
}
.site-footer a:where(:not(.footer-subscribe)):hover {
	text-decoration: underline;
}

/* Newsletter-Formular (Platzhalter, action="#"). */
.footer-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 360px;
}
.footer-newsletter__input {
	flex: 1 1 180px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	font: inherit;
	color: var(--wp--custom--inset-ink);
	background: var(--wp--custom--inset-bg);
}
.footer-newsletter__input::placeholder {
	color: var(--wp--custom--inset-placeholder);
}
.footer-subscribe {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	cursor: pointer;
}
.footer-subscribe:hover {
	background: var(--wp--preset--color--surface-alt);
}
.footer-microcopy {
	opacity: var(--wp--custom--footer-micro-opacity);
	margin-top: 0.6rem;
}

/* Social-Icons: runde weiß-transparente Kreise (Original bg-white/15,
   Hover /30, 44px, Icon weiß 16px). Doppelklasse (0,4,0) schlägt die
   service-farbenen Kreise der Block-Library. */
.site-footer .wp-block-social-links {
	gap: 8px;
}
.site-footer .wp-block-social-links .wp-social-link.wp-social-link {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.site-footer .wp-block-social-links .wp-social-link.wp-social-link:hover {
	background-color: rgba(255, 255, 255, 0.30);
	transform: none;
}
.site-footer .wp-block-social-links .wp-social-link svg {
	width: 16px;
	height: 16px;
}
@media (prefers-reduced-motion: reduce) {
	.site-footer .wp-block-social-links .wp-social-link.wp-social-link { transition: none; }
}

/* Schluss-Zeile. */
.site-footer .footer-rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	margin-block: 2rem 1.5rem;
}
.footer-legal {
	gap: 12px;
}
.footer-legal__links a {
	white-space: nowrap;
}

/* =================== HERO (Pattern: decoster/hero) =================== */
/* Text-Innenblock: max 36rem, in der Spalte zentriert (linke Kante ~unter Logo). */
.hero__text-inner {
	max-width: 36rem;
	margin-inline: auto;
}
.hero-eyebrow {
	display: inline-block;
	width: fit-content; /* Pille umschließt nur den Text, nicht die Spaltenbreite. */
	color: var(--wp--custom--eyebrow-ink);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--custom--eyebrow-border);
	border-radius: 6px;
	background: var(--wp--custom--eyebrow-bg);
}
.hero__headline {
	color: var(--wp--preset--color--primary);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.035em;
}
.hero__subline {
	line-height: 1.6;
}
.hero__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem; /* Abstand „Start the conversation" ↔ Pfeil. */
	padding: 0.9rem 1.5rem;
	min-height: 44px;
	font-weight: 600;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}
/* Hover-/Pfeil-Geste siehe „PRIMÄR-BUTTONS — eine gemeinsame Geste". */
.hero__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Breite + horizontaler Gutter regelt container-xl; das Default-„global-padding"
   der Vollbreit-Sektion hier ausschalten (sonst doppelte Einrückung). */
.hero.wp-block-group {
	padding-inline: 0;
}
/* Off-White-Grund VOLLBREIT auf der align:full-Sektion (wie .wd-problem/.wd-proof/
   .wd-cf): „BG vollbreit, Inhalt gecapped". Der BG saß früher auf dem inneren
   container-xl (1600px) → ab >1600px Fenster schimmerte der Creme-Body daneben. */
.hero {
	background-color: var(--wp--preset--color--surface-alt);
}

/* Mobile (<782px = WP-Columns-Stack): eine Spalte, Text über Bild, Bild 4:5
   (max 60vh), Trennlinie OBEN. */
@media (max-width: 781px) {
	.hero__grid {
		padding-block: var(--wp--preset--spacing--section);
	}
	.hero__media {
		border-top: 1px solid var(--wp--preset--color--line);
		padding-top: var(--wp--preset--spacing--30);
		margin-top: var(--wp--preset--spacing--10);
	}
	.hero__img img {
		aspect-ratio: 4 / 5;
		max-height: 60vh;
		object-fit: cover;
	}
}

/* Desktop (≥782px): Sektion 80vh, Spalten auf gleiche (volle) Höhe; das Bild füllt
   die gesamte Sektionshöhe randlos (object-fit cover, height 100%), dünne LINKE
   Trennlinie (keine obere). Text vertikal zentriert mit eigenem Padding. */
@media (min-width: 782px) {
	.hero {
		min-height: 80vh;
		padding-block: 0; /* Bild randlos bis Sektion-Ober-/Unterkante. */
	}
	/* Columns-Reihe auf volle Sektionshöhe; .wp-block-columns erhöht die
	   Spezifität über die später geladene WP-Columns-Layout-Regel. */
	.hero__grid.wp-block-columns {
		min-height: 80vh;
		align-items: stretch;
		padding-block: 0; /* Off-White-Default-Padding raus, damit Bild voll füllt. */
	}
	.hero__text.wp-block-column {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--wp--preset--spacing--section);
		padding-right: clamp(2rem, 4vw, 4rem);
	}
	.hero__media.wp-block-column {
		align-self: stretch;
		display: flex;
		padding: 0;
		border-left: 1px solid var(--wp--preset--color--line);
	}
	/* Bild füllt die Spalte (= volle Sektionshöhe) randlos. */
	.hero__media .wp-block-image {
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.hero__media .wp-block-image img {
		width: 100%;
		height: 100%;
		min-height: 100%;
		object-fit: cover;
		border-radius: 0;
		aspect-ratio: auto;
	}
}

/* =================== PROBLEM-HOOK (Pattern: decoster/problem-hook) =================== */
/* Aus Core-Blöcken gebaut (group/columns/heading/paragraph) → jeder Text editierbar.
   Look lebt allein hier per Klassen. Farben an theme.json-Tokens gekoppelt:
   Burgunder = primary · Roségold = accent · Honig = highlight · Off-White = surface-alt. */

/* ---- Leere Section (Scaffold), Pattern decoster/section-blank ----
   Dieselbe Section-Staffel wie die Patterns (padding-block 4/6/8rem, kanonisch wie
   Talk/Our-Approach), Default-Global-Padding raus → der innere container-* setzt den
   Gutter; Breite + Heading-Größen kommen aus demselben Token-/Klassen-System. So sitzt
   eine eigene Section nahtlos zwischen den Patterns (kein Default-Abstand-Bruch). */
.wd-section.wp-block-group {
	padding-inline: 0;
}
.wd-section {
	padding-block: 4rem;
}
@media (min-width: 768px)  { .wd-section { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-section { padding-block: 8rem; } }

/* Vollbreit-Band: Default-Global-Padding raus (der container-m innen setzt den Gutter). */
.wd-problem.wp-block-group {
	padding-inline: 0;
}
.wd-problem {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background-color: var(--wp--preset--color--surface-blush);
	background-image:
		linear-gradient(180deg, var(--wp--preset--color--surface-alt) 0%, var(--wp--preset--color--surface-blush) 12%, var(--wp--preset--color--surface-blush) 100%),
		radial-gradient(ellipse 50% 40% at 95% 18%, color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent), transparent 70%),
		radial-gradient(ellipse 40% 30% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--highlight) 14%, transparent), transparent 70%);
}
@media (min-width: 768px)  { .wd-problem { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-problem { padding-block: 9rem; } }

/* Grid: mobil gestapelt, ab 1024px asymmetrisch 5fr/7fr. Compound-Selektor
   (.wd-problem-grid.wp-block-columns) schlägt die Core-Columns-Layoutregel,
   die sonst ab 782px nebeneinander setzen würde. */
.wd-problem-grid.wp-block-columns {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
@media (min-width: 1024px) {
	.wd-problem-grid.wp-block-columns {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: 5rem;
		align-items: start;
	}
}

/* Lede: nur die Eigen-Margins der Blöcke sollen wirken → Core-blockGap neutralisieren. */
.wd-problem-lede > * {
	margin-block-start: 0;
}

/* Marker */
.wd-problem-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.25rem;
}
.wd-problem-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
.wd-problem-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}

/* Headline. Das <em> (Roségold-„problem.") wird per Element-Selektor gestylt, NICHT
   per Klasse — so überlebt der Look auch, wenn der Editor beim Bearbeiten die Inline-
   Klasse abstreift (Editierbarkeit = Demo-Kernziel, keine „ungültiger Block"-Warnung). */
.wd-problem-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 900;
	line-height: 1.02;
	font-size: clamp(1.875rem, 7vw, 2.75rem);
	letter-spacing: -0.03em;
	margin: 0 0 1.5rem;
}
.wd-problem-headline em {
	display: inline-block;
	color: var(--wp--preset--color--accent);
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-top: .15em;
	padding-right: .06em;
	white-space: nowrap;
	font-size: clamp(2.25rem, 9vw, 3.5rem);
}
@media (min-width: 768px)  { .wd-problem-headline em { font-size: clamp(2.75rem, 5vw, 3.75rem); } }
@media (min-width: 1024px) { .wd-problem-headline em { font-size: clamp(3.25rem, 4.5vw, 4.5rem); } }

/* Kicker */
.wd-problem-kicker {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0;
	max-width: 28rem;
}
@media (min-width: 768px) { .wd-problem-kicker { font-size: 1.125rem; } }

/* Statements: definierter vertikaler Abstand; Eigen-Margins der Items machen den Rest. */
.wd-problem-statements {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.wd-problem-statements > *,
.wd-problem-item > * {
	margin-block-start: 0;
}
.wd-problem-item {
	position: relative;
	padding: .25rem 0 .25rem 1.25rem;
}
@media (min-width: 768px) { .wd-problem-item { padding-left: 1.5rem; } }
.wd-problem-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5rem;
	bottom: .5rem;
	width: 2px;
	border-radius: 1px;
}
.wd-problem-item--burgundy::before { background: var(--wp--preset--color--primary); }
.wd-problem-item--rosegold::before { background: var(--wp--preset--color--accent); }
.wd-problem-item--honey::before    { background: var(--wp--preset--color--highlight); }

.wd-problem-item-num {
	display: block;
	font-weight: 900;
	font-size: clamp(1.5rem, 5.5vw, 2rem);
	line-height: 1;
	letter-spacing: -.05em;
	margin-bottom: .5rem;
}
@media (min-width: 768px) { .wd-problem-item-num { font-size: clamp(1.75rem, 3vw, 2.25rem); } }
.wd-problem-item--burgundy .wd-problem-item-num { color: var(--wp--preset--color--primary); }
.wd-problem-item--rosegold .wd-problem-item-num { color: var(--wp--preset--color--accent); }
.wd-problem-item--honey   .wd-problem-item-num { color: var(--wp--custom--highlight-deep); } /* WCAG-Fix: Honig auf Hell sonst 1.71:1 */

.wd-problem-item-title {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	letter-spacing: -0.03em;
	margin: 0 0 .55rem;
}
.wd-problem-item-body {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	margin: 0;
	max-width: 32rem;
}

/* =================== OUR APPROACH (Pattern: decoster/our-approach) =================== */
/* Reine Core-Blöcke → editierbar; Look hier per Klassen, an theme.json-Tokens gekoppelt
   (Burgunder=primary, Roségold=accent, Honig=highlight, Off-White/Weiß=base, Text=ink,
   Text-sekundär=text-secondary). Das Zitat-<em> trägt KEINE Klasse → per Descendant-
   Selektor gestylt (Gutenberg streift Inline-Klassen ab → „ungültiger Block"). */

.wd-proof.wp-block-group {
	padding-inline: 0;
}
.wd-proof {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background:
		radial-gradient(ellipse 60% 40% at 30% 0%, color-mix(in srgb, var(--wp--preset--color--highlight) 14%, transparent), transparent 65%),
		radial-gradient(ellipse 50% 50% at 80% 100%, color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent), transparent 65%),
		linear-gradient(180deg, var(--wp--preset--color--surface-warm) 0%, var(--wp--preset--color--surface-deep) 100%);
}
@media (min-width: 768px)  { .wd-proof { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-proof { padding-block: 8rem; } }

/* Header */
.wd-proof-header {
	margin-bottom: 2rem;
	max-width: 42rem;
}
.wd-proof-header > * { margin-block-start: 0; }
.wd-proof-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.25rem;
}
.wd-proof-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
.wd-proof-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}
/* Literal-clamp statt var(--wp--preset--font-size--h2): WP hyphenisiert Preset-Slugs
   an der Buchstabe/Ziffer-Grenze → die Variable heißt --…--font-size--h-2 (mit Bindestrich),
   NICHT --h2. var(--…--h2) wäre undefiniert → Headline fiele auf Default-Größe zurück.
   Wie bei der §2-Headline daher robust als Literal (Größenordnung der echten H2-Stufe). */
.wd-proof-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -0.03em;
	margin: 0;
}

/* Lead: mobil gestapelt, ab 768px asymmetrisch 7fr/5fr. Compound-Selektor schlägt
   die Core-Columns-Layoutregel. */
.wd-proof-lead {
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.wd-proof-lead.wp-block-columns {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: 2.5rem;
		align-items: center;
		margin-bottom: 4rem;
	}
}
@media (min-width: 1024px) {
	.wd-proof-lead.wp-block-columns {
		gap: 3.5rem;
		margin-bottom: 5rem;
	}
}
.wd-proof-lead .wp-block-column > * { margin-block-start: 0; }

/* Pull-Quote. Compound .wd-proof-quote.wp-block-quote überstimmt den Core-
   Block-Library-Quote-Stil (border-left/padding) ohne is-style-plain. */
.wd-proof-quote.wp-block-quote {
	position: relative;
	margin: 0 0 2rem;
	padding: 1.5rem 1.25rem 1.5rem 2.25rem;
	border-left: 3px solid var(--wp--preset--color--accent);
}
.wd-proof-quote::before {
	content: "\201C";
	position: absolute;
	top: -.5rem;
	left: 1rem;
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: .42;
	font-family: var(--wp--preset--font-family--serif);
	pointer-events: none;
}
.wd-proof-quote p {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 5.5vw, 2.25rem);
	line-height: 1.22;
	letter-spacing: -.012em;
	margin: 0;
}
.wd-proof-quote em {
	color: var(--wp--preset--color--accent);
	font-style: italic;
	font-weight: 500;
	white-space: nowrap;
}
@media (min-width: 768px) {
	.wd-proof-quote.wp-block-quote { padding: 2rem 1.75rem 2rem 3rem; margin-bottom: 2rem; }
	.wd-proof-quote p { font-size: clamp(1.625rem, 3vw, 2.25rem); }
}
@media (min-width: 1024px) {
	.wd-proof-quote.wp-block-quote { padding: 2.5rem 2rem 2.5rem 3.5rem; }
	.wd-proof-quote p { font-size: clamp(2rem, 2.8vw, 2.75rem); }
	.wd-proof-quote::before { font-size: 5rem; left: 1.5rem; }
}

/* Kicker */
.wd-proof-kicker {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	margin: 0 0 2.5rem;
	max-width: 38rem;
}
@media (min-width: 768px) { .wd-proof-kicker { margin-bottom: 0; } }

/* Bild 4:5, cover */
.wd-proof-image { margin: 0; }
.wd-proof-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
}

/* Timeline: mobil vertikal mit durchlaufender Linie, ab 1024px 3-Spalten-Grid mit
   horizontaler Linie durch die Knoten. */
.wd-proof-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
}
.wd-proof-timeline > * { margin-block-start: 0; }
.wd-proof-timeline::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	bottom: 1.5rem;
	left: 1.1rem;
	width: 2px;
	opacity: .35;
	z-index: 0;
	background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 50%, var(--wp--preset--color--highlight) 100%);
}
.wd-proof-stage {
	position: relative;
	padding-left: 3rem;
	z-index: 1;
}
.wd-proof-stage > * { margin-block-start: 0; }
.wd-proof-stage-num {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid;
	font-weight: 900;
	font-size: .8125rem;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}
.wd-proof-stage--burgundy .wd-proof-stage-num { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.wd-proof-stage--rosegold .wd-proof-stage-num { border-color: var(--wp--preset--color--accent);  color: var(--wp--preset--color--accent); }
.wd-proof-stage--honey    .wd-proof-stage-num { border-color: var(--wp--preset--color--highlight); color: var(--wp--custom--highlight-deep); } /* WCAG-Fix: Honig auf Hell */
.wd-proof-stage-label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: .4rem;
}
.wd-proof-stage-title {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin: 0 0 .625rem;
}
.wd-proof-stage-body {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	margin: 0;
	max-width: 32rem;
}
@media (min-width: 1024px) {
	.wd-proof-timeline {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
	.wd-proof-timeline::before {
		top: 1.1rem;
		bottom: auto;
		left: 4rem;
		right: 4rem;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 50%, var(--wp--preset--color--highlight) 100%);
	}
	.wd-proof-stage {
		padding-left: 0;
		padding-top: 3.25rem;
	}
	.wd-proof-stage-num {
		left: 50%;
		transform: translateX(-50%);
		width: 2.5rem;
		height: 2.5rem;
		font-size: .875rem;
	}
	.wd-proof-stage-label,
	.wd-proof-stage-title { text-align: center; }
	.wd-proof-stage-body { max-width: 100%; }
}

/* =================== CONTACT (Pattern: decoster/contact) =================== */
/* Texte links = Core-Blöcke (editierbar), Formular rechts = ein statischer core/html-
   Block (Demo, kein Versand). Look hier per Klassen, an theme.json-Tokens gekoppelt
   (Burgunder=primary, Burgunder-dunkel=primary-hover, Text=ink/text-secondary,
   Weiß=base, Serif=serif). Headline als Literal-clamp (h2-Slug → --…--h-2, s. §3). */

.wd-cf.wp-block-group { padding-inline: 0; }
.wd-cf {
	padding-block: 4rem;
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--wp--preset--color--highlight) 18%, transparent), transparent 60%),
		radial-gradient(ellipse 70% 60% at 90% 100%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 60%),
		linear-gradient(180deg, var(--wp--preset--color--surface-warm) 0%, var(--wp--preset--color--surface-deep) 100%);
}
@media (min-width: 768px)  { .wd-cf { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-cf { padding-block: 8rem; } }

/* Grid: mobil gestapelt (1fr), ab 1024px 5fr/7fr. Compound-Selektor schlägt die
   Core-Columns-Reihe (sonst nebeneinander ab 782px). */
.wd-cf-grid.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 1024px) {
	.wd-cf-grid.wp-block-columns {
		grid-template-columns: 5fr 7fr;
		gap: 4rem;
		align-items: start;
	}
}

/* Linke Spalte */
.wd-cf-text { max-width: 32rem; }
@media (min-width: 1024px) { .wd-cf-text { padding-top: 1.5rem; } }
.wd-cf-text > * { margin-block-start: 0; }
.wd-cf-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.25rem;
}
.wd-cf-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.wd-cf-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}
.wd-cf-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: clamp(3rem, 13vw, 5rem);
	line-height: .95;
	letter-spacing: -0.03em;
	margin: 0 0 1.25rem;
}
@media (min-width: 768px)  { .wd-cf-headline { font-size: clamp(4.5rem, 13vw, 6.5rem); } }
@media (min-width: 1024px) { .wd-cf-headline { font-size: clamp(5.5rem, 11vw, 8rem); } }
.wd-cf-tagline {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
	max-width: 28rem;
}
@media (min-width: 768px) { .wd-cf-tagline { font-size: 1.125rem; } }
.wd-cf-promise {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	margin: 0;
}

/* Rechte Spalte — Formular (statischer core/html-Block) */
.wd-cf-form {
	background: var(--wp--custom--inset-bg);
	padding: 2rem 1.75rem;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
@media (min-width: 768px) { .wd-cf-form { padding: 2.5rem; gap: 1.5rem; } }
.wd-cf-field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.wd-cf-label {
	font-weight: 600;
	font-size: .875rem;
	color: var(--wp--custom--inset-ink);
}
.wd-cf-input {
	width: 100%;
	box-sizing: border-box; /* min-height inkl. Padding+Border → ~50px statt ~70px (content-box) */
	padding: .75rem .875rem;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--custom--inset-ink);
	background: var(--wp--custom--inset-bg);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	border-radius: 8px;
	min-height: 44px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wd-cf-input:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); }
.wd-cf-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}
.wd-cf-textarea { min-height: 110px; resize: vertical; }
.wd-cf-privacy {
	font-size: .8125rem;
	color: var(--wp--custom--inset-ink-muted);
	margin: 0;
}
.wd-cf-privacy strong { color: var(--wp--preset--color--primary); }
.wd-cf-notice {
	font-size: .8125rem;
	color: var(--wp--custom--inset-ink-muted);
	line-height: 1.5;
	margin: -.5rem 0 0;
}
.wd-cf-notice a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wd-cf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 1rem 2rem;
	margin-top: .25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.005em;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
	transition: background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}
.wd-cf-submit:hover,
.wd-cf-submit:focus-visible {
	background: var(--wp--preset--color--primary-hover); /* #5C0017 = Burgunder-dunkel (Token existiert) */
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 12px 28px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}
.wd-cf-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}
.wd-cf-submit-arrow {
	display: inline-block;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.wd-cf-submit:hover .wd-cf-submit-arrow { transform: translateX(.4rem); }
.wd-cf-done {
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: .25rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
	.wd-cf-submit,
	.wd-cf-submit-arrow,
	.wd-cf-input { transition: none; }
	.wd-cf-submit:hover { transform: none; }
}

/* =================== STRATEGY FIRST (Pattern: decoster/strategy-first) =================== */
/* „BG vollbreit, Inhalt gecapped": warmer Verlauf auf der align:full-Sektion (wie
   .wd-proof/.wd-cf), Inhalt im container-m. position:relative + overflow:hidden, damit
   das absolute „S"-Wasserzeichen an der Sektion ausgerichtet UND beschnitten wird.
   #FAFAFA = surface-alt-Token; #FAF5E8 + die rgba-Verlaufsfarben als exakte Literale
   (1:1 aus dem decoster-Original, kein color-mix-Näherungswert). */
.wd-strat.wp-block-group { padding-inline: 0; }
.wd-strat {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(213, 181, 110, 0.16), transparent 70%),
		linear-gradient(180deg, #FAF5E8 0%, var(--wp--preset--color--surface-alt) 60%, var(--wp--preset--color--surface-alt) 100%);
}
@media (min-width: 768px)  { .wd-strat { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-strat { padding-block: 8rem; } }

.wd-strat-inner {
	position: relative;
	z-index: 1;
}

/* „S"-Wasserzeichen: Vollfläche (color), KEIN -webkit-text-stroke (Outline erzeugt
   Dreieck-Artefakte in Montserrat-Black). Rosegold #B76E79 @14% als Literal. */
.wd-strat-watermark {
	position: absolute;
	z-index: 0;
	top: 1rem;
	right: 1rem;
	color: rgba(183, 110, 121, 0.14);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	font-size: clamp(8rem, 28vw, 14rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	pointer-events: none;
	user-select: none;
}
@media (min-width: 768px)  { .wd-strat-watermark { top: 1.5rem; right: 1.5rem; font-size: clamp(12rem, 24vw, 18rem); } }
@media (min-width: 1024px) { .wd-strat-watermark { top: 2rem;   right: 2rem;   font-size: clamp(16rem, 22vw, 24rem); } }

/* Header */
.wd-strat-header {
	margin-bottom: 2.5rem;
	max-width: 44rem;
}
.wd-strat-header > * { margin-block-start: 0; }
.wd-strat-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.25rem;
}
.wd-strat-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
/* Literal-clamp statt var(--wp--preset--font-size--h2): WP hyphenisiert den ziffrigen
   Slug zu --…--h-2; var(--…--h2) wäre undefiniert (s. §2/§3-Headlines). */
.wd-strat-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -0.03em;
	margin: 0 0 1.25rem;
}
.wd-strat-intro {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	margin: 0;
	max-width: 40rem;
}

/* Lead: Pull-Quote links + Foto rechts; mobil gestapelt, ab 768px 7fr/5fr.
   Compound-Selektor schlägt die Core-Columns-Layoutregel. */
.wd-strat-lead { margin-bottom: 3rem; }
@media (min-width: 768px) {
	.wd-strat-lead.wp-block-columns {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: 2.5rem;
		align-items: center;
		margin-bottom: 4rem;
	}
}
@media (min-width: 1024px) {
	.wd-strat-lead.wp-block-columns { gap: 3.5rem; }
}
.wd-strat-lead .wp-block-column > * { margin-block-start: 0; }

/* Pull-Quote: Serif, ohne Core-Border/Padding (Compound schlägt is-style-default).
   „Pixels next." = Rosegold-italic per Descendant-Selektor (KEINE Inline-em-Klasse). */
.wd-strat-quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
}
.wd-strat-quote p {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0;
}
.wd-strat-quote em {
	color: var(--wp--preset--color--accent);
	font-style: italic;
	font-weight: 500;
}

/* Foto 4:5, cover. aspect-ratio reserviert den Platz (kein CLS), weil das <img>
   bewusst KEINE width/height trägt (id-lose core/image-save-Form, s. Stolperstein). */
.wd-strat-image { margin: 0; }
.wd-strat-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
}

/* Lead-in (Burgunder, fett) */
.wd-strat-leadin {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.5;
	margin: 0 0 1.75rem;
	max-width: 42rem;
}

/* Drei Übungs-Karten: vertikaler Marken-Balken links, große Nummer, Titel, Text.
   Mobil gestapelt, ab 768px 3 Spalten. */
.wd-strat-exercises {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin: 0 0 3rem;
}
@media (min-width: 768px) {
	.wd-strat-exercises {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}
.wd-strat-exercise {
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--primary);
}
.wd-strat-exercise > * { margin-block-start: 0; }
.wd-strat-exercise--burgundy { border-left-color: var(--wp--preset--color--primary); }
.wd-strat-exercise--rosegold { border-left-color: var(--wp--preset--color--accent); }
.wd-strat-exercise--honey    { border-left-color: var(--wp--custom--highlight-deep); }
.wd-strat-exercise-num {
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0 0 .75rem;
}
.wd-strat-exercise--burgundy .wd-strat-exercise-num { color: var(--wp--preset--color--primary); }
.wd-strat-exercise--rosegold .wd-strat-exercise-num { color: var(--wp--preset--color--accent); }
.wd-strat-exercise--honey    .wd-strat-exercise-num { color: var(--wp--custom--highlight-deep); } /* #8B6E1F: AA-Kontrast, NICHT helles Honig */
.wd-strat-exercise-title {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 .5rem;
}
.wd-strat-exercise-body {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	margin: 0;
}

/* Schluss: 2 Absätze links + Deliverable-Karte rechts; mobil gestapelt, 7fr/5fr ab 768px. */
.wd-strat-close { margin-bottom: 2.5rem; }
@media (min-width: 768px) {
	.wd-strat-close.wp-block-columns {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: 2.5rem;
		align-items: start;
		margin-bottom: 3rem;
	}
}
@media (min-width: 1024px) {
	.wd-strat-close.wp-block-columns { gap: 3.5rem; }
}
.wd-strat-close .wp-block-column > * { margin-block-start: 0; }
.wd-strat-close-text {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	margin: 0 0 1.25rem;
	max-width: 36rem;
}
.wd-strat-close-text:last-child { margin-bottom: 0; }

/* Deliverable-Karte */
.wd-strat-deliverable {
	background: var(--wp--custom--inset-bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
}
.wd-strat-deliverable > * { margin-block-start: 0; }
.wd-strat-deliverable-label {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--custom--inset-ink-muted);
	margin: 0 0 1rem;
}
.wd-strat-deliverable-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wd-strat-deliverable-list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--wp--custom--inset-ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	margin: 0 0 .75rem;
}
.wd-strat-deliverable-list li:last-child { margin-bottom: 0; }
.wd-strat-deliverable-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Outcome-Block: Rosegold-Border links. Label in Burgunder (AA; Rosegold-Klein wäre
   < 4.5:1 → Verstoß), Border bleibt Rosegold (dekorativ, kein Kontrast-Erfordernis). */
.wd-strat-outcome {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: .25rem 0 .25rem 1.5rem;
	max-width: 44rem;
}
.wd-strat-outcome > * { margin-block-start: 0; }
.wd-strat-outcome-label {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 .5rem;
}
.wd-strat-outcome-text {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	font-weight: 500;
	margin: 0;
}

/* =================== LEISTUNGS-KARTEN (Pattern: decoster/leistungen-karten) =================== */
/* Karten-Grid für Leistungen. Reine Core-Blöcke (group/heading/paragraph), Look hier per
   Klasse. Token-getrieben: Marken-Balken = primary/accent, Titel = primary (groß/fett →
   AA-Großtext), Body = ink (kippt mit surface → AA in hellen UND dunklen Varianten). Sektion
   vollbreit mit dezentem Verlauf (wie .wd-problem/.wd-strat — konsistente Theme-Optik). */
.wd-lk.wp-block-group { padding-inline: 0; }
.wd-lk {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background-color: var(--wp--preset--color--surface-alt);
	background-image:
		radial-gradient(ellipse 50% 40% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent), transparent 70%),
		radial-gradient(ellipse 40% 35% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--highlight) 10%, transparent), transparent 70%);
}
@media (min-width: 768px)  { .wd-lk { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-lk { padding-block: 8rem; } }

/* Zentrierter Header */
.wd-lk-header { text-align: center; margin-bottom: 2.5rem; }
.wd-lk-header > * { margin-block-start: 0; }
.wd-lk-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.25rem;
}
.wd-lk-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
.wd-lk-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}
/* Headline: h2 als Literal-clamp (ziffriger Preset-Slug → --h-2-Bindestrich-Falle). */
.wd-lk-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}
.wd-lk-intro {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	margin: 0 auto;
	max-width: 36rem;
}

/* Karten-Grid: flexibel/zentriert für BELIEBIGE Kachel-Anzahl. Flexbox-wrap statt fixem Grid,
   damit eine unvollständige letzte Reihe ZENTRIERT wird (auto-fit-Grid ließe leere Spuren /
   linksbündig). Phone 1, Tablet 2, Desktop 2–3 je nach Breite — 2/3/4/5 Kacheln immer mittig. */
/* <1024 (Leistungen max 5): Wisch-Karussell wie Ablauf — keine 5+1-Lone-Card mehr.
   Ab 1024 komfortables zentriertes Raster (5 in eine Reihe; container-m fasst 5). */
.wd-lk-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 0.5rem 0 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) transparent;
}
.wd-lk-grid::-webkit-scrollbar { height: 6px; }
.wd-lk-grid::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	border-radius: 999px;
}
/* WPs is-layout-flow injiziert margin-block-start aufs 2.+ Kind → in Flexbox bricht das
   Gleichhöhe (Stretch rechnet Margin ab) + verschiebt Karten vertikal. Neutralisieren
   (Abstand kommt aus gap). :where()-WP-Regel = 0 Spezifität → kein !important nötig. */
.wd-lk-grid > * { margin-block: 0; }
@media (min-width: 768px) { .wd-lk-grid { gap: 2rem; } }
@media (min-width: 1024px) {
	.wd-lk-grid {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
		scroll-snap-type: none;
		padding: 0;
	}
}

/* Karte: 3px Marken-Balken links (primary/accent abwechselnd), Hover translateX.
   Breite 280–360px (wächst mit, gekappt) → nie gequetscht, nie überbreit. */
.wd-lk-card {
	position: relative;
	flex: 0 0 80%;
	scroll-snap-align: start;
	padding-left: 1.5rem;
	transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .wd-lk-card { flex-basis: 46%; } }
.wd-lk-card > * { margin-block-start: 0; }
/* Desktop „mitwachsend" (F5, ≥1024): flex-basis = min-width = Floor (150px) → bis zu
   5 Karten packen in EINE Reihe (container-m ≈ 928px @1024 / 960px @1280), grow:1
   füllt gleichmäßig auf (Cap 400, damit 2 Karten nicht absurd breit werden). 6+ →
   zentrierter Umbruch. Tablet/Phone-Verhalten (2/1 pro Reihe) steckt in der Basis-
   Regel oben und bleibt unangetastet. Floor niedrig, weil sonst die hypothetische
   Flex-Größe (=clamp(basis,min,max)) zu früh umbricht. */
@media (min-width: 1024px) {
	.wd-lk-card {
		flex: 1 1 150px;
		min-width: 150px;
		max-width: 400px;
		scroll-snap-align: none;
	}
}
/* Wisch-Hinweis nur im Karussell-Modus (<1024). */
@media (max-width: 1023px) {
	.wd-lk-header::after {
		content: "Swipe →";
		display: block;
		margin-top: 1.25rem;
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-secondary);
	}
}
.wd-lk-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35rem;
	bottom: .35rem;
	width: 3px;
	border-radius: 1.5px;
	background: var(--wp--preset--color--primary);
}
.wd-lk-card--accent::before { background: var(--wp--preset--color--accent); }
.wd-lk-card:hover { transform: translateX(4px); }
.wd-lk-card-title {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 .75rem;
}
.wd-lk-card-body {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	margin: 0 0 1rem;
}
/* Link „Explore": Pfeil per ::after (KEIN Inline-<span> → Editor strippt sonst die Klasse). */
.wd-lk-card-link { margin: 0; }
.wd-lk-card-link a {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
}
.wd-lk-card-link a::after {
	content: "→";
	margin-left: .4rem;
	transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-lk-card:hover .wd-lk-card-link a::after { transform: translateX(0.4rem); }
.wd-lk-card-link a:hover { text-decoration: underline; }
.wd-lk-card-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.wd-lk-card,
	.wd-lk-card-link a::after { transition: none; }
	.wd-lk-card:hover { transform: none; }
	.wd-lk-card:hover .wd-lk-card-link a::after { transform: none; }
}

/* =================== ABLAUF-SCHRITTE (Pattern: decoster/ablauf-schritte) =================== */
/* Nummerierte Schritt-Strecke als STATISCHES responsives Grid (1→2→4 Spalten). Bewusst KEIN
   JS-Horizontal-Scroll-Carousel wie das Original: aus reinen Core-Blöcken nicht editor-robust
   abbildbar + fragil. Karten wechseln Light (--inset-*: weiße Box + dunkler Text, AA-sicher in
   hellen UND dunklen Varianten via Dark-Contract) und Warm (surface-warm + ink, kippt mit). */
.wd-proc.wp-block-group { padding-inline: 0; }
.wd-proc {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background-color: var(--wp--preset--color--surface);
	background-image:
		radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--highlight) 12%, transparent), transparent 70%);
}
@media (min-width: 768px)  { .wd-proc { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-proc { padding-block: 8rem; } }

/* Zentrierter Header */
.wd-proc-header { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.wd-proc-header > * { margin-block-start: 0; }
.wd-proc-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.25rem;
}
.wd-proc-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
.wd-proc-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}
.wd-proc-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.25rem); /* h2 als Literal-clamp (Slug-Falle) */
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}
.wd-proc-intro {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	margin: 0;
}

/* Mobil + Tablet (<1024): reines CSS-Wisch-Karussell (KEIN JS). Karten nebeneinander, horizontal
   wischbar, Scroll-Snap rastet ein; die nächste Karte „peekt" als Wisch-Affordanz. Schmale,
   dezente Scrollbar. Ab 1024px wird daraus wieder ein flexibles, zentriertes Raster (s. u.). */
.wd-proc-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 0.5rem 0 1.5rem; /* Raum für Karten-Schatten/-Lift → kein vertikales Clipping */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) transparent;
}
.wd-proc-grid::-webkit-scrollbar { height: 6px; }
.wd-proc-grid::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	border-radius: 999px;
}
.wd-proc-grid > * { margin-block: 0; } /* WP-is-layout-flow-Kindmargin neutralisieren (s. .wd-lk-grid) */
@media (min-width: 768px) { .wd-proc-grid { gap: 1.5rem; } }
/* Ab 1200 (HARTE Vorgabe „6 in eine Reihe bis 1200, darunter Karussell"): zentriertes
   Raster. Unter 1200 bleibt das Wisch-Karussell — so gibt es KEINE 5+1-Lone-Card-Zone. */
@media (min-width: 1200px) {
	.wd-proc-grid {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
		scroll-snap-type: none;
		padding: 0;
	}
}

/* Karte: Radius, dezenter Schatten + hauchfeine primary-Border; Hover translateY(-4px).
   Als Flex-ITEM: <768 ~80% Breite (Phone-Karussell, peekende Nachbarkarte), 768–1023 ~46%
   (Tablet-Karussell), ≥1024 flexibel 220–300px im zentrierten Raster (beliebige Anzahl). */
.wd-proc-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 80%;
	scroll-snap-align: start;
	border-radius: 14px;
	padding: 1.75rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
	transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px)  { .wd-proc-card { flex-basis: 46%; } }
@media (min-width: 1200px) {
	/* Desktop-Raster ab 1200 (F5-Regel flex-basis = min-width = Floor 160px). Bei 1200px
	   fasst container-l 1104px Inhalt → 6×160 + 5×24(gap) = 1080 ≤ 1104 → 6 in EINE Reihe;
	   flex-grow:1 füllt gleichmäßig (Cap 300). Unter 1200 Karussell → KEINE 5+1-Zone. */
	.wd-proc-card {
		flex: 1 1 160px;
		min-width: 160px;
		max-width: 300px;
		scroll-snap-align: none;
	}
}
.wd-proc-card > * { margin-block-start: 0; }
.wd-proc-card:hover { transform: translateY(-4px); }
.wd-proc-card--light { background: var(--wp--custom--inset-bg); }
.wd-proc-card--warm  { background: var(--wp--preset--color--surface-warm); }

/* Dezenter Wisch-Hinweis — NUR im Karussell-Modus (<1024). Per ::after am Header (kein
   Markup-Eingriff). text-secondary = guter Kontrast; axe prüft Pseudo-Inhalt nicht. */
@media (max-width: 1199px) {
	.wd-proc-header::after {
		content: "Swipe →";
		display: block;
		margin-top: 1.25rem;
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-secondary);
	}
}

/* Display-Nummer (groß/900 → AA-Großtext): primary/accent abwechselnd. */
.wd-proc-num {
	font-weight: 900;
	font-size: clamp(3.5rem, 8vw, 5rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	margin: 0 0 1rem;
}
.wd-proc-num--primary { color: var(--wp--preset--color--primary); }
.wd-proc-num--accent  { color: var(--wp--preset--color--accent); }

/* Label uppercase (Body-Klein → flip-sichere Sekundär-Töne, AA in beiden Varianten). */
.wd-proc-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 .5rem;
}
.wd-proc-card--light .wd-proc-label { color: var(--wp--custom--inset-ink-muted); }
.wd-proc-card--warm  .wd-proc-label { color: var(--wp--preset--color--text-secondary); }

/* Titel: Light-Karte = primary (Brand; primary↔Weiß ≥4.5 in beiden Varianten). Warm-Karte
   = ink (flip-sicher) — primary-Orange auf Mahoney-Navy #142C4F nur 3.07:1 → Normaltext-AA-
   Verstoß bei schmalen Breiten (Titel <18.66px bold). Die Display-Nummer trägt die Brand-Farbe. */
.wd-proc-title {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 .75rem;
}
.wd-proc-card--light .wd-proc-title { color: var(--wp--preset--color--primary); }
.wd-proc-card--warm  .wd-proc-title { color: var(--wp--preset--color--ink); }
.wd-proc-body {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	margin: 0;
}
.wd-proc-card--light .wd-proc-body { color: var(--wp--custom--inset-ink); }
.wd-proc-card--warm  .wd-proc-body { color: var(--wp--preset--color--ink); }

/* Meta-Pille (optional): zarter Honig-Tint, Text in der Karten-Textfarbe (→ immer AA). */
.wd-proc-meta {
	align-self: flex-start;
	margin: 1.25rem 0 0;
	font-size: 0.7rem;
	font-weight: 600;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--highlight) 22%, transparent);
}
.wd-proc-card--light .wd-proc-meta { color: var(--wp--custom--inset-ink); }
.wd-proc-card--warm  .wd-proc-meta { color: var(--wp--preset--color--ink); }

@media (prefers-reduced-motion: reduce) {
	.wd-proc-card { transition: none; }
	.wd-proc-card:hover { transform: none; }
}

/* =================== PREISE / PAKETE (Pattern: decoster/preise-pakete) =================== */
/* 3 Plan-Karten, mittlere hervorgehoben. Normale Karten = --inset-* (weiße Box + dunkler Text,
   AA via Dark-Contract in beiden Varianten). Featured = primary-BG + base(weiß) Text (primary↔
   weiß = 10.8:1 decoster / 4.55:1 Mahoney, das gesperrte AA-Paar). Badge = highlight-BG +
   inset-ink (dunkel in beiden → AA auf Gold). Token-getrieben, reine Core-Blöcke. */
.wd-pp.wp-block-group { padding-inline: 0; }
.wd-pp {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	padding-block: 4rem;
	background-color: var(--wp--preset--color--surface-deep);
	background-image:
		radial-gradient(ellipse 55% 40% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent), transparent 70%);
}
@media (min-width: 768px)  { .wd-pp { padding-block: 6rem; } }
@media (min-width: 1024px) { .wd-pp { padding-block: 8rem; } }

/* Zentrierter Header */
.wd-pp-header { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.wd-pp-header > * { margin-block-start: 0; }
.wd-pp-marker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.25rem;
}
.wd-pp-marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	flex-shrink: 0;
}
.wd-pp-marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: .4;
}
.wd-pp-headline {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.25rem); /* h2 als Literal-clamp (Slug-Falle) */
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}
.wd-pp-intro {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	margin: 0;
}

/* Plan-Grid: umfließendes VERGLEICHS-Raster (KEIN Karussell — Preistafeln sind Vergleichs-
   Inhalt, Wischen wäre UX-falsch, Jan-Entscheid). Immer flex-wrap + zentriert → ungerade
   letzte Karte (z. B. 3. Plan in Reihe 2) sitzt mittig, kein Lone-Card-Gefühl.
   Stufen: <600 = 1-up gestapelt · 600–1199 = 2-up · ≥1200 = bis 6 in EINER Reihe (Stand
   unverändert). Schwelle 600 gemessen: bei 2-up fällt die Karte darunter < ~240px → Feature-
   Liste bricht auf 4+ Zeilen (unkomfortabel) → dort auf 1-up. Höhen je Reihe gleich (stretch). */
.wd-pp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1.25rem;
}
.wd-pp-grid > * { margin-block: 0; } /* WP-is-layout-flow-Kindmargin neutralisieren (s. .wd-lk-grid) */
@media (min-width: 600px) { .wd-pp-grid { gap: 1.5rem; } }

/* Karte (normal): weiße Inset-Box auf warmem Grund. Breite 300–360px (wächst mit, gekappt)
   → Phone 1, Tablet 2, Desktop bis 3 je nach Breite, immer zentriert. */
.wd-pp-plan {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;          /* <600: 1-up, gestapelt */
	max-width: 100%;
	border-radius: 12px;
	padding: 2rem 1.5rem;
	background: var(--wp--custom--inset-bg);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
	transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-pp-plan > * { margin-block-start: 0; }
/* Tablet 600–1199: 2-up. flex-basis = halbe Reihe minus halber gap (1.5rem→12px) → genau
   2 pro Reihe; flex-grow füllt bis Cap 420, justify-content:center zentriert eine ungerade
   Restkarte (z. B. 3. Plan) als halbbreite, mittige Karte (kein Lone-Card-Gefühl). */
@media (min-width: 600px) {
	.wd-pp-plan {
		flex: 1 1 calc(50% - 12px);
		max-width: 420px;
	}
}
/* Desktop ab 1200 (UNVERÄNDERT, bestätigter Stand): F5-Floor 160 → bis 6 in EINER Reihe;
   6×160 + 5×24(gap) = 1080 ≤ 1104 (container-l-Inhalt @1200). Gestapelte Preiszeile hält
   den großen Preis (3.5rem) in der ~160px-Karte lesbar (s. u.). */
@media (min-width: 1200px) {
	.wd-pp-plan {
		flex: 1 1 160px;
		min-width: 160px;
		max-width: 380px;
	}
}
/* Hover-Lift 1:1 wie die Ablauf-Karten (.wd-proc-card): translateY(-4px), gleiche Transition.
   Featured trägt ab 1200 statisch -1rem → Hover hebt zusätzlich (calc), kein Abwärts-Sprung. */
.wd-pp-plan:hover { transform: translateY(-4px); }
@media (min-width: 1200px) { .wd-pp-plan--featured:hover { transform: translateY(calc(-1rem - 4px)); } }
@media (prefers-reduced-motion: reduce) {
	.wd-pp-plan { transition: none; }
	.wd-pp-plan:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1200px) {
	.wd-pp-plan--featured:hover { transform: translateY(-1rem); } /* statischen Lift halten, keine Hover-Bewegung */
}

/* Featured (mittlere): primary-BG, heller Text, Desktop angehoben. */
.wd-pp-plan--featured {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 40px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}
@media (min-width: 1200px) { .wd-pp-plan--featured { transform: translateY(-1rem); } }

/* „Most popular"-Badge: Honig-BG + dunkler Inset-Text (AA in beiden Varianten). */
.wd-pp-badge {
	align-self: flex-start;
	margin: 0 0 1rem;
	padding: .3rem .75rem;
	border-radius: 999px;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--wp--preset--color--highlight);
	color: var(--wp--custom--inset-ink);
}

/* Tier-Label */
.wd-pp-tier {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1rem;
}
/* Featured-Tier bewusst base(weiß) statt highlight: highlight(Gold) auf primary-Orange wäre
   in Mahoney nur 2.06:1 (AA-Verstoß) — weiß ist 4.55:1 (AA). */
.wd-pp-plan--featured .wd-pp-tier { color: var(--wp--preset--color--base); }

/* Preis */
.wd-pp-pre {
	font-size: .8rem;
	font-weight: 600;
	color: var(--wp--custom--inset-ink-muted);
	margin: 0 0 .1rem;
}
/* Kompaktes Preis-Layout: Zahl GESTAPELT über „/ month" (statt inline nebeneinander) →
   Karten-Innenbreite muss nur die Zahlbreite (~92px @3.5rem) fassen, nicht Zahl+Einheit
   (~151px). So passt die große Preiszahl in die ~160px-Karte des 6er-Rasters bei 1200px,
   ohne den Premium-Look zu schrumpfen. nowrap (s. .wd-pp-price/.wd-pp-period) hält
   Zahl und „/ month" je heil (kein „month"-Umbruch, Gürtel+Hosenträger). */
.wd-pp-price-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .1rem;
	margin: 0 0 1rem;
}
.wd-pp-price-row > * { margin-block-start: 0; }
.wd-pp-price {
	font-weight: 900;
	font-size: clamp(2.5rem, 10vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--primary);
	margin: 0;
	white-space: nowrap;
}
.wd-pp-period {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--custom--inset-ink-muted);
	margin: 0;
	white-space: nowrap;
}
.wd-pp-plan--featured .wd-pp-price,
.wd-pp-plan--featured .wd-pp-period { color: var(--wp--preset--color--base); }

/* Tagline: Serif kursiv per Klasse (KEINE Inline-<em>-Klasse → Editor-strip-Falle). */
.wd-pp-tagline {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--wp--custom--inset-ink);
	margin: 0 0 1.5rem;
}
.wd-pp-plan--featured .wd-pp-tagline { color: var(--wp--preset--color--base); }

/* Feature-Liste: Trenner oben, „→"-Bullet per ::before (kein Inline-Markup). */
.wd-pp-features {
	list-style: none;
	margin: auto 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}
.wd-pp-features li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--custom--inset-ink);
	margin: 0 0 .75rem;
}
.wd-pp-features li:last-child { margin-bottom: 0; }
.wd-pp-features li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
.wd-pp-plan--featured .wd-pp-features {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
}
.wd-pp-plan--featured .wd-pp-features li { color: var(--wp--preset--color--base); }
.wd-pp-plan--featured .wd-pp-features li::before { color: var(--wp--preset--color--highlight); }

/* Outro, zentriert */
.wd-pp-outro {
	text-align: center;
	max-width: 40rem;
	margin: 2.5rem auto 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

/* ── Home Hero (decoster demo, Replik HeroHome.astro) ───────────────── */
.home-hero { color: var(--wp--preset--color--base); text-align: center; isolation: isolate; }
.home-hero .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; }
/* Scroll-Hint-Voraussetzung: Cores __inner-container ist der positionierte
   Containing Block des absoluten Hints, hat aber nur Inhaltshöhe → auf volle
   Cover-Höhe strecken (align-self überstimmt das align-items:center des
   Covers), Inhalt darin weiter vertikal zentrieren. */
.home-hero .wp-block-cover__inner-container {
	align-self: stretch;
	justify-content: center;
}
.home-hero__eyebrow {
	display: inline-block;
	margin: 0 auto 1.5rem;
	padding: 0.4rem 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.875rem; /* Original-Wert (nicht der 0.7rem-eyebrow-Preset) */
	color: var(--wp--preset--color--highlight);
	background-color: rgba(0,0,0,0.40);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 8px;
}
.home-hero__headline {
	margin: 0 0 1.5rem;
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.45);
}
.home-hero__subline {
	max-width: 36rem;
	margin: 0 auto 2.5rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.96);
	text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* Cover-Reveal-Pattern (Replik HeroHome.astro): Hero füllt Viewport minus 80px
   Sticky-Header; !important überschreibt das inline min-height des Cover-Blocks
   (auch in bereits eingefügten Seiten-Kopien).
   Vollhöhe + Cover-Reveal NUR im echten Front-End; Editor-/Inserter-Vorschau
   (Iframe-Body .block-editor-iframe__body) ausgenommen → dort greift die feste
   640px-Höhe des Cover-Blocks, die Vorschau-Kachel rendert normal. */
body:not(.block-editor-iframe__body) .home-hero {
	min-height: calc(100vh - 80px) !important;
	min-height: calc(100svh - 80px) !important;
}
/* Sticky-Header-Reparatur (Befund 1b-plus): .site-header trägt zwar
   sticky/top:0, klebt aber nie — sein Containing Block ist der nur ~81px
   hohe header.wp-block-template-part (sticky wirkt nur innerhalb des
   Parents). Fix: den Template-Part-Wrapper selbst sticky machen (Parent =
   .wp-site-blocks = ganze Seite). Stellt das dokumentierte Soll
   „Header: sticky" her — erst durch den Cover-Reveal sichtbar geworden
   (sonst leere 80px-Leiste über dem fixierten Hero). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Nur Desktop + Maus: Hero bleibt sticky, Sektionen gleiten drüber. */
@media (min-width: 768px) and (hover: hover) {
	body:not(.block-editor-iframe__body) .home-hero {
		position: sticky;
		top: 80px;
		height: calc(100vh - 80px);
		height: calc(100svh - 80px);
		z-index: 1;
	}
}
/* Vorhang: jede Home-Sektion NACH dem Hero muss z-index:2 haben, sonst
   verschwindet sie hinter dem stickenden Hero. Bei JEDER neuen Home-Sektion
   deren Wrapper-Klasse hier ergänzen (Patterns werden in Seiten kopiert →
   Selektor muss die vorhandenen Klassen treffen). */
.home-pain,
.agitation,
.solution,
.pillars,
.founder,
.focus,
.beyond,
.stats,
.testimonials,
.manifesto,
.closing-cta {
	position: relative;
	z-index: 2;
}

/* Scroll-Hint unten links (Replik .hero-scroll-hint): Anker-Link zur 1. Sektion,
   absolut im Cover (Cover ist position:relative bzw. desktop sticky = Containing Block). */
.home-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	z-index: 3;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.home-hero__scroll a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	margin-left: -0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	text-decoration: none;
	text-shadow: 0 2px 8px rgba(0,0,0,0.55);
	transition: color 0.15s ease;
}
.home-hero__scroll a:hover { color: var(--wp--preset--color--base); }
.home-hero__scroll a:focus-visible {
	outline: 2px solid var(--wp--preset--color--highlight);
	outline-offset: 3px;
	border-radius: 4px;
}
/* ↓-Pfeil als ::before, sanfter Bounce. */
.home-hero__scroll a::before {
	content: "↓";
	font-size: 1.1rem;
	display: inline-block;
	animation: home-hero-scroll-bounce 2.4s ease-in-out infinite;
}
@keyframes home-hero-scroll-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}
@media (max-width: 640px) {
	.home-hero__scroll { bottom: 1.5rem; left: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.home-hero__scroll a::before { animation: none; }
}

/* Weiches Scrollen fürs Anker-Springen (global) + Sprungziel: Headline
   landet mit Luft unter dem 80px-Sticky-Header, nicht dahinter. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.home-pain__headline { scroll-margin-top: 100px; }

/* ── Home Pain (decoster demo, Replik Pain.astro §2) ─────────────────── */
/* Sektion: BG kommt token-getrieben aus dem Block-Attribut backgroundColor:cream
   (has-cream-background-color); hier nur Rhythmus + Zentrierung.
   ⚠️ fontSize-Slugs h2/h3 werden von WP hyphenisiert ausgegeben (--h-2/--h-3,
   s. Stolperstein-Log) → Token mit Literal-Fallback (= exakter Token-Wert). */
.home-pain {
	padding: 7rem 1.25rem;
	text-align: center;
}
@media (min-width: 640px) {
	.home-pain { padding: 10rem 3rem 7rem; }
}
@media (min-width: 1024px) {
	.home-pain { padding: 11rem 3rem 7rem; }
}

/* Eyebrow: Punkt vor (Honey), Linie nach (primary, 40 %) — wie Original */
.home-pain .home-pain__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 2.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.home-pain .home-pain__eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.home-pain .home-pain__eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

/* Headline: Zeile 1 leicht (400), Zeile 2 (em) = Crescendo 900 kursiv */
.home-pain .home-pain__headline {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--wp--preset--font-size--h-2, clamp(2rem, 5vw, 3.5rem));
	font-weight: 400;
	font-variation-settings: 'wght' 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
.home-pain .home-pain__headline em {
	font-style: italic;
	font-weight: 900;
	font-variation-settings: 'wght' 900;
}

/* Rule: 56×3 Honey-Bar, zentriert */
.home-pain .home-pain__rule {
	width: 56px;
	height: 3px;
	margin: 2.5rem auto 3.5rem;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--honey);
	opacity: 1;
}

/* Statements: 3-spaltig via core/columns (Core-Stack-Breakpoint 782px ≈
   Vorgabe ≥768px — bewusst das Columns-Layout genutzt), Text linksbündig */
.home-pain .home-pain__statements {
	gap: 2.25rem;
	margin: 0 0 3rem;
	text-align: left;
}

/* Brand-Bar 2px links je Statement, Farbe je Akzent-Klasse */
.home-pain .home-pain__stmt {
	position: relative;
	padding: 0.25rem 0 0.25rem 1.25rem;
}
.home-pain .home-pain__stmt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--primary);
}
.home-pain .home-pain__stmt.is-burgundy::before { background: var(--wp--preset--color--primary); }
.home-pain .home-pain__stmt.is-rosegold::before { background: var(--wp--preset--color--rosegold); }
.home-pain .home-pain__stmt.is-honey::before { background: var(--wp--preset--color--honey); }

/* Nummern: h3-Skala, 900; Farbe je Akzent.
   ⚠️ WCAG: reines Honey auf Cream fällt durch → Honey-Nummer nutzt die
   abgedunkelte Custom-Prop highlight-deep (AA-fähig), NICHT --honey. */
.home-pain .home-pain__num {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 5.5vw, 2rem); /* Original-Basis, ab 768px eigene Skala */
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.home-pain .home-pain__stmt.is-rosegold .home-pain__num { color: var(--wp--preset--color--rosegold); }
.home-pain .home-pain__stmt.is-honey .home-pain__num { color: var(--wp--custom--highlight-deep, #8B6E1F); }

.home-pain .home-pain__stmt-title {
	margin: 0 0 0.55rem;
	font-size: var(--wp--preset--font-size--card-title, clamp(1.125rem, 1.6vw, 1.3125rem));
	font-weight: 700;
	font-variation-settings: 'wght' 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
.home-pain .home-pain__stmt-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Emphasis: zentrierter Abschluss mit feiner Primary-Oberlinie
   (color-mix = exakt rgba(128,0,32,0.15), aber token-getrieben/rebrandbar) */
.home-pain .home-pain__emphasis {
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.5;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Pain: responsive Original-Feinwerte (nach den Basisregeln — Kaskade) */
@media (min-width: 768px) {
	.home-pain .home-pain__statements { gap: 2rem; }
	.home-pain .home-pain__stmt { padding-left: 1.5rem; }
	.home-pain .home-pain__num { font-size: clamp(1.75rem, 3vw, 2.25rem); }
}
@media (min-width: 1024px) {
	.home-pain .home-pain__statements { gap: 2.5rem; margin-bottom: 4rem; }
}

/* ── Home Agitation (decoster demo, Replik Agitation.astro §3) ───────── */
/* Sektion: Grundfarbe kommt token-getrieben aus dem Block-Attribut
   backgroundColor:primary (has-primary-background-color); die Roségold-Glows
   liegen als background-image OBENDRAUF (Effekt-Literale, exakt Original) —
   NICHT als background-Shorthand, das würde die Grundfarbe resetten.
   ⚠️ fontSize-Slug h2 → hyphenisierte Var --h-2 (Stolperstein, wie 1c). */
.agitation {
	position: relative;
	overflow: hidden;
	padding: 7rem 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--base);
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 100%, rgba(183, 110, 121, 0.30), transparent 70%),
		radial-gradient(ellipse 60% 40% at 90% 0%, rgba(183, 110, 121, 0.20), transparent 70%);
}
@media (min-width: 768px) {
	.agitation { padding: 10rem 3rem; }
}

.agitation .agitation__content {
	max-width: 50rem;
	margin: 0 auto;
}

/* Marker: Punkt vor + Linie nach (beides Honey) — wie Original */
.agitation .agitation__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 2.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--honey);
}
.agitation .agitation__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.agitation .agitation__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--honey);
	opacity: 0.5;
}

.agitation .agitation__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2, clamp(2rem, 5vw, 3.5rem));
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--base);
}

/* XXL-Display „Compounds.": bewusst Literal-clamp (einmaliges Display,
   kein Skalen-Slug). Serif-Slug = EB Garamond Variable
   (echte Kursive aus eigenem Italic-Schnitt). */
.agitation .agitation__display {
	margin: 2.5rem 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(3.5rem, 14vw, 7rem);
	font-weight: 500;
	font-variation-settings: 'wght' 500;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--honey);
}
.agitation .agitation__display em { font-style: italic; }

/* Rule: 56×3 Roségold-Bar, zentriert */
.agitation .agitation__rule {
	width: 56px;
	height: 3px;
	margin: 2.5rem auto;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--rosegold);
	opacity: 1;
}

/* Body: bewusstes Weich-Weiß (Effekt-Literal, exakt Original) */
.agitation .agitation__body {
	max-width: 44rem;
	margin: 0 auto 1.5rem;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

.agitation .agitation__emphasis {
	max-width: 44rem;
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--base);
}

/* ── Home Solution (decoster demo, Replik Solution.astro §4) ─────────── */
/* Sektion: Grundfarbe token-getrieben aus dem Block-Attribut
   backgroundColor:cream. Bild OHNE width/height-Attribute (Stolperstein
   core/image ohne Attachment-id — Maße bräche die Block-Validität);
   CLS-Schutz über CSS aspect-ratio wie bei strategy-first/our-approach.
   ⚠️ fontSize-Slug h2-md → hyphenisierte Var --h-2-md (Stolperstein). */
.solution {
	overflow: hidden;
	padding: 6rem 1.25rem;
}
@media (min-width: 640px) {
	.solution { padding: 8rem 3rem; }
}
@media (min-width: 1024px) {
	.solution { padding: 10rem 3rem; }
}

/* Grid: Spaltenabstand + Editorial-Versatz (nur ≥768px, mobil gestapelt ohne) */
.solution .solution__grid {
	gap: 3rem;
	/* !important nötig: Cores Columns-CSS setzt align-items:normal !important */
	align-items: start !important;
}
@media (min-width: 1024px) {
	.solution .solution__grid { gap: 5rem; }
}
@media (min-width: 768px) {
	.solution .solution__grid { gap: 4rem; align-items: center !important; }
	.solution .solution__text { padding-top: 2rem; }
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c */
.solution .solution__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 2rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.solution .solution__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.solution .solution__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.solution .solution__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-md, clamp(2rem, 4.5vw, 3rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

/* Rule: 56×3 Honey-Bar, linksbündig im Textlauf */
.solution .solution__rule {
	width: 56px;
	height: 3px;
	margin: 2rem 0;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--honey);
	opacity: 1;
}

.solution .solution__body {
	margin: 0 0 2rem;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}

/* Pull-Quote: Roségold-Kante + großes Serif-Anführungszeichen.
   Serif-Slug = EB Garamond Variable → em in echter Kursive.
   Quote-Größe bewusst Literal-clamp (einmalige Pull-Quote, kein Slug). */
.solution .solution__quote {
	position: relative;
	margin: 0;
	padding: 1.25rem 0 0.5rem 2rem;
	border-left: 3px solid var(--wp--preset--color--rosegold);
}
.solution .solution__quote::before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: 0.6rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--rosegold);
	opacity: 0.42;
}
.solution .solution__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	/* Basiszeile aufrecht (Core-Quote-Stil ist kursiv) — nur das em ist italic */
	font-style: normal;
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 500;
	font-variation-settings: 'wght' 500;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--primary);
}
.solution .solution__quote em {
	color: var(--wp--preset--color--rosegold);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: 'wght' 500;
}

/* Bild: 4:5, gerundet, gestaffelte Schatten (Effekt-Literale, exakt
   Original); Fallback-Verlauf nur sichtbar, falls das Bild fehlt */
.solution .solution__image {
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 6px 16px rgba(0, 0, 0, 0.06),
		0 16px 40px rgba(128, 0, 32, 0.08);
	background:
		radial-gradient(ellipse 70% 80% at 30% 30%, rgba(183, 110, 121, 0.40), transparent 70%),
		radial-gradient(ellipse 60% 70% at 80% 80%, rgba(213, 181, 110, 0.30), transparent 70%),
		linear-gradient(135deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--cream-deep) 100%);
}
.solution .solution__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Editorial-Versatz NACH der Basisregel (Fix des 1e-Kaskaden-Bugs:
   margin:0 der Basisregel überschrieb die frühere @media-Regel) */
@media (min-width: 768px) {
	.solution .solution__image { margin-top: -2rem; margin-bottom: 2rem; }
}

/* ── Home Key Pillars (decoster demo, Replik KeyPillars.astro §5) ────── */
/* Sektion: Grundfarbe token-getrieben aus dem Block-Attribut
   backgroundColor:base. ⚠️ fontSize-Slug h2-md → hyphenisierte Var
   --h-2-md (Stolperstein, wie 1e). Nummern 01/02/03 sind dekorative
   Akzente (Original aria-hidden) — kein Text-Kontrast-Erfordernis. */
.pillars {
	padding: 6rem 1.25rem;
}
@media (min-width: 640px) {
	.pillars { padding: 8rem 3rem; }
}
@media (min-width: 1024px) {
	.pillars { padding: 10rem 3rem; }
}

.pillars .pillars__inner {
	max-width: 80rem;
	margin: 0 auto;
}

.pillars .pillars__header {
	max-width: 48rem;
	margin: 0 auto 4rem;
	text-align: center;
}
@media (min-width: 768px) {
	.pillars .pillars__header { margin: 0 auto 5rem; }
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c/1e */
.pillars .pillars__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 1.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.pillars .pillars__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.pillars .pillars__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.pillars .pillars__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-md, clamp(2rem, 4.5vw, 3rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

/* Grid: Spaltenabstände (3-spaltig via core/columns, Core-Stack <782px) */
.pillars .pillars__grid {
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.pillars .pillars__grid { gap: 2rem; }
}
@media (min-width: 1024px) {
	.pillars .pillars__grid { gap: 2.5rem; }
}

/* Säule: Brand-Bar 3px links, Farbe je Akzent-Klasse */
.pillars .pillar {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.5rem;
	display: flex;
	flex-direction: column;
}
.pillars .pillar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	border-radius: 1.5px;
	background: var(--wp--preset--color--primary);
}
.pillars .pillar.is-burgundy::before { background: var(--wp--preset--color--primary); }
.pillars .pillar.is-rosegold::before { background: var(--wp--preset--color--rosegold); }
.pillars .pillar.is-honey::before { background: var(--wp--preset--color--honey); }

/* Nummer: dekorativer Mini-Akzent (Original aria-hidden) */
.pillars .pillar__number {
	margin: 0 0 0.875rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0.7;
	color: var(--wp--preset--color--primary);
}
.pillars .pillar.is-rosegold .pillar__number { color: var(--wp--preset--color--rosegold); }
.pillars .pillar.is-honey .pillar__number { color: var(--wp--custom--highlight-deep, #8B6E1F); }

/* Titel: XXL-Manifest-Wort, Literal-clamp (einmalige Skala) */
.pillars .pillar__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--primary);
}
.pillars .pillar.is-rosegold .pillar__title { color: var(--wp--preset--color--rosegold); }
.pillars .pillar.is-honey .pillar__title { color: var(--wp--custom--highlight-deep, #8B6E1F); }

/* Mini-Rule: 40×2, Farbe je Akzent (dekorativ) */
.pillars .pillar__rule {
	width: 40px;
	height: 2px;
	margin: 0 0 1.25rem;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 1;
}
.pillars .pillar.is-rosegold .pillar__rule { background: var(--wp--preset--color--rosegold); }
.pillars .pillar.is-honey .pillar__rule { background: var(--wp--preset--color--honey); }

.pillars .pillar__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* ── Home Founder (decoster demo, Replik Founder.astro §5b) ──────────── */
/* Faithful-Variante: mobil gestapelt (Foto 4:5 + weiße Card überlappt
   nach oben), ab 768px full-bleed Foto-Band + Text-Card links auf
   Creme-Scrim. Grundfarbe cream aus dem Block-Attribut. Bild OHNE
   width/height (core/image-ohne-id-Stolperstein); EIN Bild statt drei
   art-direkter Crops (Core kann kein picture-Element). Scrim/Schatten =
   Effekt-Literale exakt Original. */
.founder {
	position: relative;
	overflow: hidden;
}
.founder .founder__image {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
}
.founder .founder__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 88% center;
	display: block;
}
.founder .founder__card-wrap {
	padding: 0 1.25rem;
}
.founder .founder__card {
	position: relative;
	margin-top: -3rem;
	background-color: var(--wp--preset--color--base);
	padding: 2rem 1.75rem;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(26, 9, 14, 0.06), 0 12px 32px -8px rgba(26, 9, 14, 0.18);
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1f */
.founder .founder__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.founder .founder__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.founder .founder__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.founder .founder__headline {
	margin: 0;
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.founder .founder__rule {
	width: 40px;
	height: 2px;
	margin: 1.25rem 0;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--rosegold);
	opacity: 1;
}

.founder .founder__body {
	margin: 0 0 1.5rem;
	max-width: 32rem;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

/* Link mit CSS-Pfeil; Hover-Ton bewusst rosegold (statt Original #8a4f58) */
.founder .founder__link {
	margin: 0;
}
.founder .founder__link a {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.founder .founder__link a::after {
	content: " →";
	white-space: pre;
	display: inline-block;
	transition: transform 0.2s ease;
}
.founder .founder__link a:hover,
.founder .founder__link a:focus-visible {
	color: #8a4f58; /* Original rosegold-dark, kein Preset */
	border-bottom-color: var(--wp--preset--color--rosegold);
}
.founder .founder__link a:hover::after,
.founder .founder__link a:focus-visible::after {
	transform: translateX(3px);
}

/* Desktop: full-bleed Foto-Band, Card links auf Creme-Scrim */
@media (min-width: 768px) {
	.founder {
		min-height: clamp(28rem, 52vh, 38rem);
		display: flex;
		align-items: center;
	}
	.founder .founder__image {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		height: 100%;
	}
	.founder .founder__image img {
		object-position: 82% center;
	}
	.founder .founder__image::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(247,242,236,0.97) 0%, rgba(247,242,236,0.93) 30%, rgba(247,242,236,0.72) 42%, rgba(247,242,236,0) 56%);
	}
	.founder .founder__card-wrap {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 80rem;
		margin: 0 auto;
		padding: 0 3rem;
	}
	.founder .founder__card {
		margin-top: 0;
		max-width: 30rem;
		background-color: transparent;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.founder .founder__headline {
		font-size: clamp(2rem, 3vw, 2.75rem);
	}
}
@media (min-width: 1024px) {
	.founder .founder__card { max-width: 32rem; }
}

/* ── Home Focus Services (decoster demo, Replik index.astro §6) ──────── */
/* Sektion auf Weiß (backgroundColor:base aus Block-Attr). ⚠️ h2-md →
   hyphenisierte Var --h-2-md (Stolperstein). Bewusst: nur der
   Explore-Link klickbar (Original = ganze Karte als Link — mit
   editierbaren Core-Blöcken nicht abbildbar), Hover daher nur am Link.
   Display-Nummern 01/02 dekorativ (Original aria-hidden). */
.focus {
	padding: 6rem 1.25rem;
}
@media (min-width: 640px) {
	.focus { padding: 8rem 3rem; }
}
@media (min-width: 1024px) {
	.focus { padding: 10rem 3rem; }
}

.focus .focus__container {
	max-width: 64rem;
	margin: 0 auto;
}

.focus .focus__header {
	max-width: 40rem;
	margin: 0 auto 4rem;
	text-align: center;
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1g */
.focus .focus__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 1.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.focus .focus__marker::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.focus .focus__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.focus .focus__headline {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--h-2-md, clamp(2rem, 4.5vw, 3rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.focus .focus__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Grid: 2 Spalten via core/columns (Core-Stack <782px) */
.focus .focus__grid {
	gap: 2.5rem;
}
@media (min-width: 768px) {
	.focus .focus__grid { gap: 3rem; }
}
@media (min-width: 1024px) {
	.focus .focus__grid { gap: 4rem; }
}

/* Service-Block: Brand-Bar 3px links, Farbe je Akzent-Klasse */
.focus .focus-block {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.5rem;
}
.focus .focus-block::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	border-radius: 1.5px;
	background: var(--wp--preset--color--primary);
}
.focus .focus-block.is-burgundy::before { background: var(--wp--preset--color--primary); }
.focus .focus-block.is-rosegold::before { background: var(--wp--preset--color--rosegold); }

/* Display-Nummer (dekorativ, Großtext) */
.focus .focus-block__num {
	display: block;
	margin: 0 0 0.625rem;
	font-size: clamp(2rem, 6vw, 2.75rem);
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--wp--preset--color--primary);
}
.focus .focus-block.is-rosegold .focus-block__num { color: var(--wp--preset--color--rosegold); }

.focus .focus-block__title {
	margin: 0 0 0.875rem;
	font-size: var(--wp--preset--font-size--h-3, clamp(1.5rem, 3vw, 2rem));
	font-weight: 700;
	font-variation-settings: 'wght' 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.focus .focus-block__body {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Explore-Link mit CSS-Pfeil */
.focus .focus-block__link {
	margin: 0;
}
.focus .focus-block__link a {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.focus .focus-block__link a::after {
	content: " →";
	white-space: pre;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.focus .focus-block__link a:hover,
.focus .focus-block__link a:focus-visible {
	color: var(--wp--preset--color--rosegold);
	border-bottom-color: var(--wp--preset--color--rosegold);
}
.focus .focus-block__link a:hover::after,
.focus .focus-block__link a:focus-visible::after {
	transform: translateX(0.35rem);
}
@media (prefers-reduced-motion: reduce) {
	.focus .focus-block__link a,
	.focus .focus-block__link a::after { transition: none; }
}

/* ── Home Beyond (decoster demo, Replik index.astro §7) ──────────────── */
/* Kurzer Vollbreite-Block auf Off-White (backgroundColor:off-white aus
   Block-Attr); Oberlinie token-getrieben via color-mix (= exakt Original
   rgba(128,0,32,0.08)). Link-Liste als zentrierte ·-Zeile, kein
   Aufzählungs-Stil. */
.beyond {
	padding: 5rem 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
@media (min-width: 640px) {
	.beyond { padding: 6rem 3rem; }
}
@media (min-width: 1024px) {
	.beyond { padding: 7rem 3rem; }
}

.beyond .beyond__container {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1h */
.beyond .beyond__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 1.25rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.beyond .beyond__marker::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.beyond .beyond__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.beyond .beyond__headline {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--h-3, clamp(1.5rem, 3vw, 2rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.beyond .beyond__intro {
	margin: 0 0 2.25rem;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

/* Link-Zeile: flex-zentriert, ·-Trenner zwischen den Items; bricht per
   flex-wrap zentriert um, wenn die Zeile nicht passt (mit den
   Original-Maßen body-lg/48rem bricht auch das Original bei Desktop —
   die 1i-Einzeiligkeit war ein Artefakt des zu kleinen alten
   body-lg-Tokens). */
.beyond .beyond__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.6;
}
.beyond .beyond__list li {
	position: relative;
}
.beyond .beyond__list li + li::before {
	content: "·";
	color: var(--wp--preset--color--primary);
	opacity: 0.5;
	margin: 0 0.875rem;
}
.beyond .beyond__list a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.1rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.beyond .beyond__list a:hover,
.beyond .beyond__list a:focus-visible {
	color: var(--wp--preset--color--rosegold);
	border-bottom-color: var(--wp--preset--color--rosegold);
}
@media (prefers-reduced-motion: reduce) {
	.beyond .beyond__list a { transition: none; }
}

/* ── Maß-Korrektur: Demo-Container auf volle Original-Inhaltsbreite ──── */
/* WPs has-global-padding legt das Root-Gutter INNERHALB der contentSize
   an → Inhalt real contentSize − 2×Gutter (gemessen 672 statt 768px
   @1280, Etappe 1i). Wie beim Theme-Container-System: max-width =
   contentSize + 2×Gutter → Innenbreite nach Gutter-Padding = exakt die
   Original-contentSize. Gilt für alle Demo-Home-Sektionen (CSS-only,
   erreicht auch bereits eingefügte Seiten-Kopien). */
.home-pain .home-pain__content { max-width: calc(64rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }
.agitation .agitation__content { max-width: calc(50rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }
.solution .solution__inner { max-width: calc(80rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }
.pillars .pillars__inner { max-width: calc(80rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }
.focus .focus__container { max-width: calc(64rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }
.beyond .beyond__container { max-width: calc(48rem + 2 * var(--wp--style--root--padding-left, 0px)); margin-inline: auto; }

/* ── Home Stat Highlight (decoster demo, Replik StatHighlight.astro §8) ─ */
/* Sektion auf Weiß (backgroundColor:base aus Block-Attr). Container nach
   dem Maß-/Ausrichtungs-Muster (contentSize + 2×Gutter, zentriert).
   ⚠️ h2-md → hyphenisierte Var --h-2-md (Stolperstein). Zahlen bewusst
   statisch (Original zählt per JS hoch — CSP-sichere Nachrüstung in der
   Politur-Runde). Honey-Zahl auf highlight-deep (reines Honey auf Weiß
   1.89:1 = FAIL). */
.stats {
	padding: 6rem 1.25rem;
}
@media (min-width: 640px) {
	.stats { padding: 8rem 3rem; }
}
@media (min-width: 1024px) {
	.stats { padding: 10rem 3rem; }
}

.stats .stats__container {
	max-width: calc(80rem + 2 * var(--wp--style--root--padding-left, 0px));
	margin-inline: auto;
}

.stats .stats__header {
	max-width: 48rem;
	margin: 0 auto 4rem;
	text-align: center;
}
@media (min-width: 768px) {
	.stats .stats__header { margin: 0 auto 5rem; }
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1i */
.stats .stats__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 1.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.stats .stats__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.stats .stats__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.stats .stats__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-md, clamp(2rem, 4.5vw, 3rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

/* Grid: 3-spaltig via core/columns (Core-Stack <782px) */
.stats .stats__grid {
	gap: 3rem;
}
@media (min-width: 768px) {
	.stats .stats__grid { gap: 2rem; }
}
@media (min-width: 1024px) {
	.stats .stats__grid { gap: 3rem; }
}

.stats .stat {
	text-align: center;
}

/* Riesen-Zahl: Literal-clamp (einmalige Display-Skala), Farbe je Akzent */
.stats .stat__number {
	display: block;
	margin: 0 0 1.25rem;
	font-size: clamp(4rem, 10vw, 7rem);
	font-weight: 900;
	font-variation-settings: 'wght' 900;
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--wp--preset--color--primary);
}
.stats .stat.is-rosegold .stat__number { color: var(--wp--preset--color--rosegold); }
.stats .stat.is-honey .stat__number { color: var(--wp--custom--highlight-deep, #8B6E1F); }

/* Mini-Rule: 56×3, zentriert, Farbe je Akzent (dekorativ) */
.stats .stat__rule {
	width: 56px;
	height: 3px;
	margin: 0 auto 1.25rem;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 1;
}
.stats .stat.is-rosegold .stat__rule { background: var(--wp--preset--color--rosegold); }
.stats .stat.is-honey .stat__rule { background: var(--wp--preset--color--honey); }

.stats .stat__label {
	display: block;
	margin: 0 auto;
	max-width: 18rem;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* ── Home Testimonials (decoster demo, Replik Testimonials.astro §10) ── */
/* Sektion auf Weiß (backgroundColor:base aus Block-Attr). Container nach
   dem Maß-/Ausrichtungs-Muster. ⚠️ h2-md → hyphenisierte --h-2-md
   (Stolperstein). ⚠️ Platzhalter-Reviews (Demo) — vor Kunden-Go-Live
   durch echte Google-Reviews ersetzen (FTC). Honey-Sterne = grafisches
   Rating exakt wie Original (bewusst, kein Text-Kontrast-Erfordernis).
   Serif-Zitat = EB Garamond (echte Kursive). */
.testimonials {
	padding: 6rem 1.25rem;
}
@media (min-width: 640px) {
	.testimonials { padding: 8rem 3rem; }
}
@media (min-width: 1024px) {
	.testimonials { padding: 9rem 3rem; }
}

.testimonials .testimonials__container {
	max-width: calc(80rem + 2 * var(--wp--style--root--padding-left, 0px));
	margin-inline: auto;
}

.testimonials .testimonials__header {
	max-width: 44rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}
@media (min-width: 768px) {
	.testimonials .testimonials__header { margin: 0 auto 4.5rem; }
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1j */
.testimonials .testimonials__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto 1.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.testimonials .testimonials__marker::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.testimonials .testimonials__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.testimonials .testimonials__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2-md, clamp(2rem, 4.5vw, 3rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

/* Grid: 3-spaltig via core/columns (Core-Stack <782px) */
.testimonials .testimonials__grid {
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.testimonials .testimonials__grid { gap: 2rem; }
}
@media (min-width: 1024px) {
	.testimonials .testimonials__grid { gap: 2.5rem; }
}

/* Review-Karte: weiße Karte mit feiner Primary-Kante + gestaffelten
   Schatten (Effekt-Literal exakt Original), Roségold-Anführungszeichen */
.testimonials .testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
	border-radius: 0.75rem;
	padding: 2.5rem 2rem;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 6px 16px rgba(0, 0, 0, 0.06),
		0 16px 40px rgba(128, 0, 32, 0.08);
}
@media (min-width: 1024px) {
	.testimonials .testimonial { padding: 3rem 2.5rem; }
}
.testimonials .testimonial::before {
	content: "\201C";
	font-weight: 400;
	pointer-events: none;
	position: absolute;
	top: 0.75rem;
	left: 1.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 5rem;
	line-height: 1;
	color: var(--wp--preset--color--rosegold);
	opacity: 0.42;
}

/* Sterne: grafisches Rating (Honey, wie Original) */
.testimonials .testimonial__stars {
	margin: 0.5rem 0 0;
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 0.15rem;
	color: var(--wp--preset--color--honey);
}

.testimonials .testimonial__body {
	flex: 1;
	margin: 1.75rem 0 2rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	font-weight: 500;
	font-variation-settings: 'wght' 500;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary);
}

.testimonials .testimonial__attrib {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	padding-top: 1rem;
}
.testimonials .testimonial__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.testimonials .testimonial__role {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-secondary);
}

/* ── Home Manifesto (decoster demo, Replik Manifesto.astro §11) ──────── */
/* Contrast-Flip auf Cream (backgroundColor:cream aus Block-Attr).
   Container nach Maß-/Ausrichtungs-Muster. ⚠️ h2 → hyphenisierte --h-2
   (Stolperstein). Bild OHNE width/height (core/image-ohne-id) — CLS-
   Schutz via aspect-ratio; Serif-Anteile = EB Garamond
   (echte Kursive). Stagger kommt vom globalen section-reveal.js. */
.manifesto {
	overflow: hidden;
	color: var(--wp--preset--color--primary);
	padding: 7rem 1.25rem;
}
@media (min-width: 768px) {
	.manifesto { padding: 10rem 3rem 7rem; }
}
@media (min-width: 1024px) {
	.manifesto { padding: 11rem 3rem 7rem; }
}

.manifesto .manifesto__inner {
	max-width: calc(80rem + 2 * var(--wp--style--root--padding-left, 0px));
	margin-inline: auto;
}

/* Grid: 6/5 mit Editorial-Versatz (nur ≥768px, mobil gestapelt ohne) */
.manifesto .manifesto__grid {
	gap: 3rem;
	/* !important nötig: Cores Columns-CSS setzt align-items:normal !important */
	align-items: center !important;
}
@media (min-width: 768px) {
	.manifesto .manifesto__grid { gap: 4rem; align-items: start !important; }
	.manifesto .manifesto__text { padding-top: 2rem; }
}
@media (min-width: 1024px) {
	.manifesto .manifesto__grid { gap: 5rem; }
}

/* Marker: Punkt vor (Honey) + Linie nach (primary, 40 %) — wie 1c–1k */
.manifesto .manifesto__marker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 2rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.manifesto .manifesto__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
}
.manifesto .manifesto__marker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.manifesto .manifesto__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2, clamp(2rem, 5vw, 3.5rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.manifesto .manifesto__rule {
	width: 56px;
	height: 3px;
	margin: 2rem 0;
	border: none;
	border-radius: 2px;
	background: var(--wp--preset--color--rosegold);
	opacity: 1;
}

.manifesto .manifesto__body {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}

/* Pull-Quote: Roségold-Kante + großes Serif-Anführungszeichen (wie 1e) */
.manifesto .manifesto__quote {
	position: relative;
	margin: 0;
	padding: 1.5rem 0 0.5rem 2rem;
	border-left: 3px solid var(--wp--preset--color--rosegold);
}
.manifesto .manifesto__quote::before {
	content: "\201C";
	position: absolute;
	top: 0.25rem;
	left: 0.6rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--rosegold);
	opacity: 0.42;
}
.manifesto .manifesto__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	/* Basiszeile aufrecht (Core-Quote-Stil ist kursiv) — nur das em ist italic */
	font-style: normal;
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	font-weight: 500;
	font-variation-settings: 'wght' 500;
	line-height: 1.18;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--primary);
}
.manifesto .manifesto__quote em {
	color: var(--wp--preset--color--rosegold);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: 'wght' 500;
}

/* Bild: 4:5, gerundet, Burgunder-Schatten (Effekt-Literale, exakt
   Original); Tropical-Twilight-Fallback nur sichtbar, falls Bild fehlt */
.manifesto .manifesto__image {
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.10),
		0 6px 16px rgba(128, 0, 32, 0.18),
		0 20px 48px rgba(128, 0, 32, 0.22);
	background:
		radial-gradient(ellipse 80% 100% at 70% 30%, rgba(255, 140, 66, 0.55), transparent 60%),
		radial-gradient(ellipse 70% 80% at 20% 80%, rgba(183, 110, 121, 0.55), transparent 65%),
		linear-gradient(135deg, var(--wp--preset--color--primary-hover) 0%, var(--wp--preset--color--primary) 100%);
}
.manifesto .manifesto__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Editorial-Versatz NACH der Basisregel (margin:0-Shorthand dort würde
   eine frühere @media-Regel überschreiben — Kaskade, nicht Spezifität) */
@media (min-width: 768px) {
	.manifesto .manifesto__image { margin-top: -2rem; margin-bottom: 2rem; }
}

/* ── Home Closing CTA (decoster demo, Replik index.astro §12) ────────── */
/* Letzte Home-Sektion, auf Weiß (backgroundColor:base aus Block-Attr).
   Container nach Maß-/Ausrichtungs-Muster. ⚠️ h2 → hyphenisierte --h-2
   (Stolperstein). Button-Grundfarben aus den Block-Attributen
   primary/base; Schatten/Transition = Effekt-Literale exakt Original.
   Bewusst: KEIN Scroll-Reveal (§12 hat im Original kein data-reveal);
   data-magnetic-Hover weggelassen (Politur-Backlog). */
.closing-cta {
	padding: 8rem 1.25rem 6rem;
}
@media (min-width: 768px) {
	/* asymmetrisch (unten 15rem) — bewusst, exakt Original */
	.closing-cta { padding: 10rem 3rem 15rem; }
}

.closing-cta .closing-cta__container {
	max-width: calc(48rem + 2 * var(--wp--style--root--padding-left, 0px));
	margin-inline: auto;
	text-align: center;
}

.closing-cta .closing-cta__headline {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--h-2, clamp(2rem, 5vw, 3.5rem));
	font-weight: 800;
	font-variation-settings: 'wght' 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.closing-cta .closing-cta__body {
	max-width: 36rem;
	margin: 0 auto 3rem;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary);
}

.closing-cta .closing-cta__button .wp-block-button__link {
	display: inline-block;
	padding: 1.25rem 2.75rem;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	letter-spacing: -0.02em;
	border-radius: 0.5rem;
	text-decoration: none;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 6px 16px rgba(128, 0, 32, 0.30),
		0 16px 40px rgba(128, 0, 32, 0.20);
	transition:
		background-color 0.2s ease,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.2s ease;
}
.closing-cta .closing-cta__button .wp-block-button__link:hover,
.closing-cta .closing-cta__button .wp-block-button__link:focus-visible {
	/* !important: WP-Preset-Klasse has-primary-background-color trägt !important */
	background-color: var(--wp--preset--color--primary-hover) !important;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.08),
		0 10px 24px rgba(128, 0, 32, 0.40),
		0 24px 56px rgba(128, 0, 32, 0.28);
}
.closing-cta .closing-cta__button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.closing-cta .closing-cta__button .wp-block-button__link { transition: none; }
}

/* ── Footer Original-Treue: Padding/Gaps/Spalten (Replik Footer.astro) ── */
/* Markup-Padding (spacing|section) entfernt → exakte Original-Werte hier.
   py 2.5/3.5/5rem, px 1.25/2.5rem; Spalten-Gap 2/2.5/3rem; Desktop 4
   gleiche Spalten, mobil 2-spaltig (Brand + Follow über volle Breite). */
.site-footer.wp-block-group {
	padding: 2.5rem 1.25rem;
}
@media (min-width: 768px) {
	.site-footer.wp-block-group { padding: 3.5rem 2.5rem; }
}
@media (min-width: 1024px) {
	.site-footer.wp-block-group { padding: 5rem 2.5rem; }
}
.site-footer .site-footer__cols {
	gap: 2rem;
}
@media (min-width: 768px) {
	.site-footer .site-footer__cols { gap: 2.5rem; }
}
@media (min-width: 1024px) {
	.site-footer .site-footer__cols { gap: 3rem; }
}
@media (max-width: 781px) {
	/* Original-Mobilraster: Brand + Follow volle Breite, Contact + Navigate
	   nebeneinander (überschreibt Cores Stack; !important gegen die
	   flex-wrap/basis-Defaults der Block-Library, am DOM verifiziert) */
	.site-footer .site-footer__cols {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
	.site-footer .site-footer__cols > .wp-block-column:first-child,
	.site-footer .site-footer__cols > .wp-block-column:last-child {
		grid-column: 1 / -1;
	}
}