/*!
 * jbaconsult — Editorial Layer
 *
 * Ergänzt theme.json um alles, was sich dort nicht ausdrücken lässt:
 * Selection-Farbe, Fokus-Outline, Mono-Eyebrow-Klasse, Site-Chrome
 * (Header, Footer, Burger-Overlay), Pattern-spezifische Sektionen
 * und ein paar defensive Resets gegen WP-Default-Styles. Wird auf
 * Frontend und im Block-Editor geladen.
 *
 * Token-Kürzel:
 *   --wp--preset--color--paper        #F4F1EA
 *   --wp--preset--color--paper-shadow #EBE6DB
 *   --wp--preset--color--body-ink     #141820
 *   --wp--preset--color--deep-ink     #0F1620
 *   --wp--preset--color--brand-navy   #2D4059
 *   --wp--preset--color--signal       #FF5B1F
 *
 * WICHTIG — WP-Slug-Sanitisierung bei Spacing-Stufen:
 *   Slugs in theme.json mit führender Ziffer (z. B. "2xl", "3xl", "4xl")
 *   werden von WordPress beim Generieren der CSS-Custom-Properties mit einem
 *   Bindestrich versehen. Der CSS-Var-Name lautet daher:
 *       --wp--preset--spacing--2-xl  (NICHT --2xl)
 *       --wp--preset--spacing--3-xl  (NICHT --3xl)
 *       --wp--preset--spacing--4-xl  (NICHT --4xl)
 *   Eine falsch geschriebene Variable evaluiert zu leer und macht das
 *   gesamte Shorthand (padding/margin/usw.) ungültig — der Browser fällt
 *   dann auf den initial-Wert (typisch 0) zurück. Siehe DECISIONS.md.
 */

/* ============================================================
   1. Globale Resets — defensive Korrekturen gegen WP-Defaults
   ============================================================ */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* WordPress setzt manchmal eine Default-Schatten/Border-Radius auf Buttons —
   wir überschreiben das hart, falls theme.json mal nicht greift. */
.wp-element-button,
.wp-block-button__link {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Bilder bleiben rechteckig, ohne Schatten. */
img,
.wp-block-image img {
	border-radius: 0;
	box-shadow: none;
	max-width: 100%;
	height: auto;
}

/* ============================================================
   2. Auswahlfarbe — Signal-Orange-Tint auf Paper
   ============================================================ */

::selection {
	background: rgba(255, 91, 31, 0.28);
	color: var(--wp--preset--color--body-ink);
}

::-moz-selection {
	background: rgba(255, 91, 31, 0.28);
	color: var(--wp--preset--color--body-ink);
}

/* ============================================================
   3. Fokus-Outline — sichtbar, in Signal-Orange, 2 px Offset
   ============================================================ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
	border-radius: 0;
}

/* ============================================================
   4. Eyebrow — das Signaletik-Element
   ============================================================
   Syntax in Markup: `<p class="eyebrow">// Sektion · Unterthema</p>`
   Per Default in Signal-Orange. Auf dunklen Stages bleibt der
   Akzent — Eyebrow ist *immer* der Orator.
   ============================================================ */

.eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.8125rem;        /* 13 px */
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	line-height: 1.4;
	margin: 0 0 1.25rem 0;
}

.eyebrow--muted {
	color: rgba(15, 22, 32, 0.55);
}

/* Mono-Label — kleinere Variante für Footer, Captions, Meta-Zeilen.
   Weniger Letter-Spacing, weniger Größe. */
.mono-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;          /* 12 px */
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
}

/* ============================================================
   5. Headings — Schlüsselwort-Akzent
   ============================================================
   Konvention: <span class="k">Wort</span> innerhalb einer Headline
   markiert das *eine* Schlüsselwort in Signal-Orange.
   ============================================================ */

:where(h1, h2, h3, .has-display-font-size, .has-h1-font-size, .has-h2-font-size, .has-h3-font-size) .k {
	color: var(--wp--preset--color--signal);
}

/* ============================================================
   6. Skip-Link — Tastatur-Navigation
   ============================================================ */

.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px 18px;
	text-decoration: none;
	z-index: 100000;
}

/* ============================================================
   7. Editor-spezifisch — Block-Editor-Frame
   ============================================================
   Sorgt dafür, dass im Editor der Hintergrund auch Paper ist und
   die Body-Farbe nicht von Gutenberg-Default übersteuert wird.
   ============================================================ */

.editor-styles-wrapper {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--body-ink);
}

/* ============================================================
   8. Site-Header — Logo links, Hauptnav rechts
   ============================================================
   Mobile-Breakpoint bei 800 px (siehe DECISIONS.md).
   ============================================================ */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--deep-ink);
	color: var(--wp--preset--color--body-ink);
	position: relative;
	z-index: 50;
}

@media (max-width: 800px) {
	.site-header {
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	}
}

/* Logo — eine SVG-Datei mit currentColor, Höhe je Kontext.
   Wichtig: theme.json setzt auf `<a>`-Elemente per Default `text-decoration: underline`
   und schaltet `:hover`/`:focus` auf Signal-Orange. Für das Logo brauchen wir das
   nicht — die Reset-Regeln darunter neutralisieren beides für `.site-logo` und
   forcieren die Kontext-Farbe (Body Ink im Header, Paper auf Navy-Stages). */
.site-logo,
.site-logo:hover,
.site-logo:focus,
.site-logo:active,
.site-logo:visited {
	text-decoration: none;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}

.site-header .site-logo,
.site-header .site-logo:hover,
.site-header .site-logo:focus,
.site-header .site-logo:active {
	color: var(--wp--preset--color--body-ink);
}

.site-footer__brand .site-logo,
.site-footer__brand .site-logo:hover,
.site-footer__brand .site-logo:focus,
.site-footer__brand .site-logo:active,
.mobile-menu .site-logo,
.mobile-menu .site-logo:hover,
.mobile-menu .site-logo:focus,
.mobile-menu .site-logo:active {
	color: var(--wp--preset--color--paper);
}

.site-logo__img {
	display: block;
	height: 36px;
	width: auto;
	color: inherit;
}

@media (max-width: 800px) {
	.site-logo__img {
		height: 28px;
	}
}

/* ============================================================
   9. Hauptnavigation — Desktop
   ============================================================ */

.main-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
	margin: 0;
}

.main-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav__link {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;          /* 12 px */
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.main-nav__link:hover {
	border-bottom-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--body-ink);
}

.main-nav__link.is-active,
.main-nav__list .current-menu-item > .main-nav__link {
	color: var(--wp--preset--color--signal);
}

@media (max-width: 800px) {
	.main-nav { display: none; }
}

/* ============================================================
   10. Burger-Button — Mobile only
   ============================================================ */

.burger {
	display: none;
	width: 36px;
	height: 36px;
	padding: 7px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--body-ink);
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 5px;
}

.burger__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 200ms ease-out, opacity 200ms ease-out;
}

@media (max-width: 800px) {
	.burger { display: inline-flex; }
}

/* ============================================================
   11. Mobile-Menu — Vollbild-Overlay in Brand Navy
   ============================================================ */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--paper);
	display: flex;
	flex-direction: column;
	padding: 20px 24px 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}

.mobile-menu[data-state="open"] {
	visibility: visible;
	opacity: 1;
	transition: opacity 200ms ease-out, visibility 0s linear 0s;
}

.mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
}

.mobile-menu__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--signal);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 300;
	font-size: 32px;
	line-height: 1;
	padding: 4px 8px;
}

.mobile-menu__nav {
	margin-top: 48px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-menu__link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 32px;
	letter-spacing: -0.02em;
	line-height: 1.18;
	padding: 12px 0;
	border-top: 1px solid rgba(244, 241, 234, 0.16);
}

.mobile-menu__list li:last-child .mobile-menu__link {
	border-bottom: 1px solid rgba(244, 241, 234, 0.16);
}

.mobile-menu__link.is-active {
	color: var(--wp--preset--color--signal);
}

.mobile-menu__num {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;        /* 11 px */
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--signal);
	text-transform: uppercase;
	flex: 0 0 auto;
}

.mobile-menu__cta {
	margin-top: 24px;
}

.mobile-menu__cta-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 18px;
	background-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--deep-ink);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	border: 0;
}

.mobile-menu__meta {
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;         /* 10 px */
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.65);
	line-height: 1.7;
}

.mobile-menu__meta a {
	color: rgba(244, 241, 234, 0.85);
	text-decoration: none;
}

.mobile-menu__meta a:hover {
	color: var(--wp--preset--color--paper);
}

/* Wenn Overlay offen ist: Body-Scroll sperren (wird per JS gesetzt). */
body.is-mobile-menu-open {
	overflow: hidden;
}

/* ============================================================
   12. Site-Footer — Brand Navy, 4 Spalten Desktop, 1 Spalte Mobile
   ============================================================
   Hinweis: --wp--preset--spacing--3-xl (mit Bindestrich!) — siehe
   Slug-Sanitisierungs-Hinweis am Datei-Anfang.
   ============================================================ */

.site-footer {
	background-color: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid rgba(244, 241, 234, 0.18);
}

@media (max-width: 800px) {
	.site-footer {
		padding: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
	}
	.site-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
	}
}

.site-footer__brand .site-logo__img {
	height: 40px;
	margin-bottom: var(--wp--preset--spacing--lg);
}

.site-footer__tagline {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;         /* 14 px */
	line-height: 1.55;
	color: rgba(244, 241, 234, 0.7);
	margin: 0 0 var(--wp--preset--spacing--lg);
	max-width: 28ch;
}

.site-footer__col-title {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;        /* 11 px */
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 6px 0 18px;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__list li {
	margin-bottom: 10px;
}

.site-footer__list a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	color: rgba(244, 241, 234, 0.85);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.site-footer__list a:hover {
	color: var(--wp--preset--color--paper);
}

.site-footer__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	padding-top: var(--wp--preset--spacing--lg);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.55);
}

@media (max-width: 800px) {
	.site-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--sm);
	}
}

/* ============================================================
   13. Block-Patterns — Sektions-Layer
   ============================================================
   Jeder Pattern bekommt eine `.pattern-<n>`-Wurzelklasse plus
   BEM-artige Sub-Elemente (`__claim`, `__cta`, …). Patterns werden
   im Theme registriert (siehe `patterns/`-Ordner) und im Inserter
   unter Kategorie „jbaconsult" gelistet.
   ============================================================ */

/* ----- 13.1 · Pattern-übergreifend: Eyebrow auf dunklen Stages ----- */

/* Eyebrow ist auch in Hero/Cta/Footer Signal-Orange — der Akzent bleibt
   konstant. Auf manchen dunklen Stages müssen Body-Texte allerdings den
   Paper-Ton statt Body-Ink tragen — das wird auf Pattern-Ebene gesetzt. */

/* ----- 13.2 · Pattern: Hero · Navy ----- */

.pattern-hero-navy {
	color: var(--wp--preset--color--paper);
}

.pattern-hero-navy__claim {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--paper);
	margin: 0 0 var(--wp--preset--spacing--lg);
	max-width: 14ch;
	text-wrap: balance;
}

.pattern-hero-navy__subline {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(244, 241, 234, 0.85);
	margin: 0;
	max-width: 48ch;
}

/* Subline-Color-Override gegen §19.2 (`.has-lead-font-size`-Eindringling).
   §19.2 setzt `:where(body.page .entry-content) .has-lead-font-size {
   color: rgba(15, 22, 32, 0.82); }` — da `:where()` Spezifität 0,0,0
   beiträgt, ist die effektive Spezifität (0,1,0), gleich wie der einfache
   `__subline`-Selektor. Bei Spezifitäts-Tie gewinnt §19 durch Cascade-
   Order. Folge: schwarzer Body-Ink-Text auf Brand-Navy-BG (Mobile-Test-
   Bug, 2026-04-29). Fix mit Child-Combinator-Selektor (Spezifität 0,2,0)
   plus Doppelklassen-Fallback für robusten Match. Analog §13.5 Lead-Cap.
   Selbe Mechanik in §13.3 für CTA-Deep-Ink-Subline. */
.pattern-hero-navy > .pattern-hero-navy__subline,
.pattern-hero-navy .pattern-hero-navy__subline.has-lead-font-size {
	color: rgba(244, 241, 234, 0.85);
}

.pattern-hero-navy__cta {
	margin-top: var(--wp--preset--spacing--xl);
}

.pattern-hero-navy__portrait {
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(135deg, rgba(244, 241, 234, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--deep-ink);
	border: 1px solid rgba(244, 241, 234, 0.18);
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--lg);
}

.pattern-hero-navy__portrait-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.55);
	margin: 0;
}

@media (max-width: 800px) {
	.pattern-hero-navy__portrait {
		max-width: 360px;
		margin: 0 auto;
	}
	/* Mobile-Wrapping-Fix: 14ch-max-width plus clamp-min 2.75rem (~44px)
	   sprengt einzelne lange Wörter wie „Zielarchitektur“ (15 Zeichen) auf
	   schmalen Viewports — Browser fällt auf overflow-wrap: break-word
	   zurück und bricht mitten im Wort. text-wrap: balance hilft hier
	   nicht (Single-Long-Word ist kein Balancing-Problem). max-width: none
	   gibt dem Container-Padding die Kontrolle, overflow-wrap/word-break/
	   hyphens auf normal/none unterdrückt aggressives Wort-Brechen. */
	.pattern-hero-navy__claim {
		max-width: none;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

/* ----- 13.3 · Pattern: CTA · Deep Ink ----- */

.pattern-cta-deep-ink {
	color: var(--wp--preset--color--paper);
	text-align: center;
}

.pattern-cta-deep-ink__claim {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--paper);
	margin: 0 auto var(--wp--preset--spacing--lg);
	max-width: 16ch;
	text-wrap: balance;
}

.pattern-cta-deep-ink__subline {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: rgba(244, 241, 234, 0.7);
	margin: 0 auto;
	max-width: 52ch;
}

/* Subline-Color-Override gegen §19.2 — Bug-Twin zu §13.2. CTA-Subline
   nutzt `fontSize=lead` und kriegt damit ebenfalls die `.has-lead-font-
   size`-Color-Kapern. Fix mit Child-Combinator-Selektor (Spezifität
   0,2,0) plus Doppelklassen-Fallback. */
.pattern-cta-deep-ink > .pattern-cta-deep-ink__subline,
.pattern-cta-deep-ink .pattern-cta-deep-ink__subline.has-lead-font-size {
	color: rgba(244, 241, 234, 0.7);
}

/* ----- 13.4 · Pattern: Trust-Leiste ----- */

.pattern-trust-leiste .eyebrow {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--xl);
}

.pattern-trust-leiste__logos {
	row-gap: var(--wp--preset--spacing--lg);
	column-gap: var(--wp--preset--spacing--2-xl);
}

.pattern-trust-leiste__logo {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	opacity: 0.55;
	margin: 0;
	transition: opacity 150ms ease-out;
}

.pattern-trust-leiste__logo:hover {
	opacity: 1;
}

.pattern-trust-leiste__badges {
	row-gap: var(--wp--preset--spacing--sm);
	column-gap: var(--wp--preset--spacing--sm);
}

.pattern-trust-leiste__pill {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;             /* 10 px */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	padding: 6px 10px;
	margin: 0;
	line-height: 1.4;
}

@media (max-width: 800px) {
	.pattern-trust-leiste__logos {
		column-gap: var(--wp--preset--spacing--xl);
	}
	.pattern-trust-leiste__logo {
		font-size: 1.125rem;
	}
}

/* ----- 13.5 · Pattern: Leistungen · Grid ----- */

.pattern-leistungen-grid__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.pattern-leistungen-grid__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
}

/* Lead-Cap auf Container-content-size (1200 px). Zwei Layer-Eindringlinge
   müssen überstimmt werden:
   1. WP's container-spezifische Auto-Layout-Regel setzt zwar max-width:
      1200 px auf direct children, aber ohne !important.
   2. §19.2 setzt für `.has-lead-font-size` (die Klasse wird durch
      fontSize="lead" automatisch gesetzt) max-width: 68ch — das sind in
      der Lead-Schrift ~1400 px und sprengt den 1200-px-Container-Cap.
      §19.2 hat Spezifität (0,1,0) wie der einfache Pattern-Selektor,
      gewinnt aber bei Tie durch Cascade-Order (§19 ist nach §13.5).
   Daher hier mit Child-Combinator-Selektor (Spezifität 0,2,0), damit
   Lead und Cards-Grid auf gleicher x-Linie sitzen. Auf mobilen
   Viewports greift max-width ohnehin nicht, dort bestimmt die
   Container-Breite den Wrap. */
.pattern-leistungen-grid > .pattern-leistungen-grid__lead {
	max-width: 1200px;
}

.pattern-leistungen-grid__cards {
	/* Block-Editor setzt hier ein 3-Spalten-Grid via columnCount=3.
	   Unter 800 px: einspaltig stapeln. */
}

@media (max-width: 1024px) {
	.pattern-leistungen-grid__cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.pattern-leistungen-grid__cards {
		grid-template-columns: 1fr !important;
	}
}

.pattern-leistungen-grid__card {
	border: 1px solid rgba(15, 22, 32, 0.18);
	background-color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	transition: background-color 150ms ease-out;
}

.pattern-leistungen-grid__card:hover {
	background-color: var(--wp--preset--color--paper-shadow);
}

.pattern-leistungen-grid__tag {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.pattern-leistungen-grid__card-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.pattern-leistungen-grid__card-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
}

.pattern-leistungen-grid__card-more {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-leistungen-grid__card-more a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
}

.pattern-leistungen-grid__card-more a:hover {
	color: var(--wp--preset--color--signal);
}

/* ----- 13.6 · Pattern: Stats-Block ----- */

.pattern-stats-block__grid {
	/* WP-Grid-Layout columnCount=4 erzeugt grid-template-columns: 1fr 1fr 1fr 1fr.
	   Mobile-Breakpoint: 2x2-Layout (siehe DECISIONS.md) — auf <800 px wechseln. */
}

@media (max-width: 800px) {
	.pattern-stats-block__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--wp--preset--spacing--xl) !important;
	}
}

.pattern-stats-block__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	padding-top: var(--wp--preset--spacing--md);
}

.pattern-stats-block__number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
}

.pattern-stats-block__unit {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 0.55em;
	letter-spacing: -0.015em;
	color: rgba(15, 22, 32, 0.55);
	white-space: nowrap;
}

.pattern-stats-block__label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	line-height: 1.5;
}

/* ----- 13.7 · Pattern: Tech-Stack · Pills ----- */

.pattern-tech-stack-pills__cloud {
	row-gap: var(--wp--preset--spacing--sm);
	column-gap: var(--wp--preset--spacing--sm);
}

.pattern-tech-stack-pills__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;             /* 10 px */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	padding: 6px 10px;
	margin: 0;
	line-height: 1.4;
}

/* ----- 13.8 · Pattern: Testimonial · Pullquote ----- */

.pattern-testimonial {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
}

.pattern-testimonial__quote {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.5vw, 1.75rem);
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	max-width: 40ch;
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding-left: 48px;
	position: relative;
	text-wrap: balance;
}

.pattern-testimonial__quote::before {
	content: "„";
	position: absolute;
	left: 0;
	top: -8px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	color: var(--wp--preset--color--signal);
	font-size: 4rem;                 /* 64 px */
	line-height: 1;
}

.pattern-testimonial__attribution {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	padding-left: 48px;
	margin: 0;
}

.pattern-testimonial__attribution-dim {
	color: rgba(15, 22, 32, 0.55);
}

@media (max-width: 800px) {
	.pattern-testimonial__quote,
	.pattern-testimonial__attribution {
		padding-left: 36px;
	}
	.pattern-testimonial__quote::before {
		font-size: 3rem;
	}
}

/* ----- 13.9 · Pattern: Newsletter · Inline-Form ----- */

.pattern-newsletter__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.pattern-newsletter__lede {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
	max-width: 38ch;
}

.pattern-newsletter__form {
	margin: 0;
}

.pattern-newsletter__inline {
	display: grid;
	grid-template-columns: 1fr auto;
	border: 1px solid var(--wp--preset--color--body-ink);
	background-color: transparent;
}

.pattern-newsletter__input {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	outline: none;
	color: var(--wp--preset--color--body-ink);
	min-width: 0;                    /* prevent grid overflow */
	width: 100%;
}

.pattern-newsletter__input:focus-visible {
	background-color: var(--wp--preset--color--paper-shadow);
}

.pattern-newsletter__submit {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 var(--wp--preset--spacing--lg);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.pattern-newsletter__submit:hover {
	background-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--deep-ink);
}

.pattern-newsletter__privacy {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;             /* 10 px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	line-height: 1.6;
}

.pattern-newsletter__privacy a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 800px) {
	.pattern-newsletter__inline {
		grid-template-columns: 1fr;
	}
	.pattern-newsletter__submit {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--body-ink);
		padding: 14px var(--wp--preset--spacing--lg);
		justify-content: center;
	}
}

/* ----- 13.10 · Pattern: Blog · Teaser ----- */

.pattern-blog-teaser__head {
	margin-bottom: 0;
	gap: var(--wp--preset--spacing--lg);
}

.pattern-blog-teaser__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
}

.pattern-blog-teaser__more {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-blog-teaser__more a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--body-ink);
	padding-bottom: 2px;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}

.pattern-blog-teaser__more a:hover {
	color: var(--wp--preset--color--signal);
	border-bottom-color: var(--wp--preset--color--signal);
}

@media (max-width: 1024px) {
	.pattern-blog-teaser__cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.pattern-blog-teaser__cards {
		grid-template-columns: 1fr !important;
	}
}

.pattern-blog-teaser__card {
	border-top: 1px solid var(--wp--preset--color--deep-ink);
	padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--sm);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.pattern-blog-teaser__cat {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.pattern-blog-teaser__card-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.pattern-blog-teaser__card-title a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	transition: text-decoration-color 150ms ease-out;
}

.pattern-blog-teaser__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--body-ink);
}

.pattern-blog-teaser__meta {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
}

.pattern-blog-teaser__meta-sep {
	margin: 0 4px;
	color: rgba(15, 22, 32, 0.35);
}

.pattern-blog-teaser__excerpt {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
}

/* ----- 13.11 · Pattern: Workshop · Teaser ----- */

.pattern-workshop-teaser__head {
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: 0;
}

.pattern-workshop-teaser__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
}

.pattern-workshop-teaser__more {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-workshop-teaser__more a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--body-ink);
	padding-bottom: 2px;
}

.pattern-workshop-teaser__more a:hover {
	color: var(--wp--preset--color--signal);
	border-bottom-color: var(--wp--preset--color--signal);
}

.pattern-workshop-teaser__featured {
	border: 1px solid rgba(15, 22, 32, 0.18);
	background-color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--xl);
}

.pattern-workshop-teaser__eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-workshop-teaser__featured-row {
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--md);
}

.pattern-workshop-teaser__featured-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.625rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	flex: 1 1 60%;
	text-wrap: balance;
}

.pattern-workshop-teaser__price {
	text-align: right;
	white-space: nowrap;
}

.pattern-workshop-teaser__price-amount {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
	line-height: 1;
}

.pattern-workshop-teaser__price-vat {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 4px 0 0;
}

.pattern-workshop-teaser__featured-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(15, 22, 32, 0.8);
	margin: 0 0 var(--wp--preset--spacing--lg);
	max-width: 60ch;
}

.pattern-workshop-teaser__meta {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	padding-top: var(--wp--preset--spacing--md);
	gap: 0;
	row-gap: var(--wp--preset--spacing--sm);
}

.pattern-workshop-teaser__meta-item {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.7);
	margin: 0;
	padding-right: var(--wp--preset--spacing--lg);
	margin-right: var(--wp--preset--spacing--lg);
	border-right: 1px solid rgba(15, 22, 32, 0.18);
	line-height: 1.5;
}

.pattern-workshop-teaser__meta-item:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.pattern-workshop-teaser__meta-key {
	display: block;
	color: var(--wp--preset--color--body-ink);
	font-weight: 500;
	margin-bottom: 4px;
	opacity: 0.55;
}

.pattern-workshop-teaser__list {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	padding-top: var(--wp--preset--spacing--xl);
}

.pattern-workshop-teaser__list-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-workshop-teaser__list-item {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	padding: var(--wp--preset--spacing--md) 0;
	gap: var(--wp--preset--spacing--md);
}

.pattern-workshop-teaser__list-item:last-of-type {
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.pattern-workshop-teaser__list-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}

.pattern-workshop-teaser__list-title a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
}

.pattern-workshop-teaser__list-title a:hover {
	color: var(--wp--preset--color--signal);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pattern-workshop-teaser__list-meta {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	white-space: nowrap;
}

.pattern-workshop-teaser__list-sep {
	margin: 0 4px;
	color: rgba(15, 22, 32, 0.35);
}

@media (max-width: 800px) {
	.pattern-workshop-teaser__featured {
		padding: var(--wp--preset--spacing--lg);
	}
	.pattern-workshop-teaser__featured-row {
		flex-direction: column !important;
	}
	.pattern-workshop-teaser__price {
		text-align: left;
	}
	.pattern-workshop-teaser__meta-item {
		flex: 0 0 calc(50% - var(--wp--preset--spacing--lg));
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
	}
}

/* ----- 13.12 · Pattern: Featured Case Study ----- */

.pattern-featured-case-study__cover {
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper-shadow);
	border: 1px solid rgba(15, 22, 32, 0.18);
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--lg);
	position: relative;
}

.pattern-featured-case-study__branch {
	position: absolute;
	top: var(--wp--preset--spacing--md);
	left: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	padding: 6px 10px;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
	line-height: 1.4;
}

.pattern-featured-case-study__cover-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
}

.pattern-featured-case-study__case-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.pattern-featured-case-study__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--sm);
	text-wrap: balance;
}

.pattern-featured-case-study__meta {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-featured-case-study__meta-sep {
	margin: 0 6px;
	color: rgba(15, 22, 32, 0.35);
}

.pattern-featured-case-study__lead {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.8);
	margin: 0;
	max-width: 42ch;
}

.pattern-featured-case-study__stats {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
	padding: var(--wp--preset--spacing--md) 0;
}

.pattern-featured-case-study__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pattern-featured-case-study__stat-num {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
}

.pattern-featured-case-study__stat-unit {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 0.6em;
	color: rgba(15, 22, 32, 0.55);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.pattern-featured-case-study__stat-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	line-height: 1.5;
}

.pattern-featured-case-study__pills {
	row-gap: var(--wp--preset--spacing--sm);
	column-gap: var(--wp--preset--spacing--sm);
}

.pattern-featured-case-study__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	padding: 6px 10px;
	margin: 0;
	line-height: 1.4;
}

.pattern-featured-case-study__more {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-featured-case-study__more a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--body-ink);
	padding-bottom: 2px;
}

.pattern-featured-case-study__more a:hover {
	color: var(--wp--preset--color--signal);
	border-bottom-color: var(--wp--preset--color--signal);
}

@media (max-width: 800px) {
	.pattern-featured-case-study__stats {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* Image-Modus: wenn ein <img> als descendant existiert, Stripes-Background
   entfernen, Aspect-Ratio auf 16/9 (cinematic-wide statt 4/3-Default), Cover-
   Label ausblenden. Branch-Badge bleibt als Floating-Tag oben links sichtbar.

   `:has()`-Browser-Support seit Chrome 105 / Safari 15.4 / Firefox 121 — 2026
   weit genug supported für produktive Nutzung. Older-Browser-Fallback: bleibt
   beim Stripes-Hintergrund mit der alten 4/3-Aspect, das ist kein Bruch. */

.pattern-featured-case-study__cover:has(img) {
	background: none;
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
}

.pattern-featured-case-study__cover:has(img) .pattern-featured-case-study__cover-label {
	display: none;
}

.pattern-featured-case-study__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Branch-Badge: bei Image-Modus höheren z-index, damit es über dem Bild bleibt.
   Im Stripes-Modus reicht der Default-Stack (position:absolute lebt im
   normalen Stacking-Context). */
.pattern-featured-case-study__cover:has(img) .pattern-featured-case-study__branch {
	z-index: 2;
}

/* ----- 13.13 · Pattern: Über mich · Teaser ----- */

.pattern-ueber-mich-teaser__portrait {
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--lg);
}

.pattern-ueber-mich-teaser__portrait-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
}

.pattern-ueber-mich-teaser__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.pattern-ueber-mich-teaser__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.8);
	margin: 0;
	max-width: 50ch;
}

.pattern-ueber-mich-teaser__badges {
	row-gap: var(--wp--preset--spacing--sm);
	column-gap: var(--wp--preset--spacing--md);
}

.pattern-ueber-mich-teaser__badge {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.7);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}

.pattern-ueber-mich-teaser__badge-key {
	color: var(--wp--preset--color--signal);
	font-weight: 500;
}

.pattern-ueber-mich-teaser__badge--available::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background-color: #3E7C5E;       /* chip-ok */
	flex: 0 0 auto;
}

@media (max-width: 800px) {
	.pattern-ueber-mich-teaser__portrait {
		max-width: 360px;
		margin: 0 auto;
	}
}

/* ----- 13.14 · Pattern: Hero · Leistung ----- */

.pattern-hero-leistung__breadcrumb {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-hero-leistung__claim {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 18ch;
	text-wrap: balance;
}

.pattern-hero-leistung__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.8);
	margin: 0;
	max-width: 56ch;
}

/* ----- 13.15 · Pattern: Kontakt · Formular ----- */

.pattern-formular-kontakt__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.pattern-formular-kontakt__intro {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.75);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-formular-kontakt__direct {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.pattern-formular-kontakt__direct a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pattern-formular-kontakt__direct a:hover {
	color: var(--wp--preset--color--signal);
}

.pattern-formular-kontakt__form {
	margin: 0;
}

.pattern-formular-kontakt__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.pattern-formular-kontakt__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pattern-formular-kontakt__field--full {
	grid-column: 1 / -1;
}

.pattern-formular-kontakt__field label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
}

.pattern-formular-kontakt__req {
	color: var(--wp--preset--color--signal);
	margin-left: 2px;
}

.pattern-formular-kontakt__field input,
.pattern-formular-kontakt__field textarea {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--body-ink);
	background: transparent;
	outline: none;
	color: var(--wp--preset--color--body-ink);
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
}

.pattern-formular-kontakt__field textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
	font-family: var(--wp--preset--font-family--inter);
}

.pattern-formular-kontakt__field input:focus-visible,
.pattern-formular-kontakt__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
	background-color: var(--wp--preset--color--paper-shadow);
}

.pattern-formular-kontakt__check {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding-top: var(--wp--preset--spacing--xs);
}

.pattern-formular-kontakt__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--signal);
	border: 1px solid var(--wp--preset--color--body-ink);
}

.pattern-formular-kontakt__check label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	line-height: 1.6;
}

.pattern-formular-kontakt__check label a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pattern-formular-kontakt__submit {
	grid-column: 1 / -1;
}

.pattern-formular-kontakt__submit button {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 14px 22px;
	border: 1px solid var(--wp--preset--color--signal);
	background-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--deep-ink);
	cursor: pointer;
	border-radius: 0;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.pattern-formular-kontakt__submit button:hover {
	background-color: var(--wp--preset--color--deep-ink);
	color: var(--wp--preset--color--signal);
	border-color: var(--wp--preset--color--deep-ink);
}

@media (max-width: 800px) {
	.pattern-formular-kontakt__grid {
		grid-template-columns: 1fr;
	}
}

/* ----- 13.16 · Pattern: Workshops · Hub ----- */

/* Strukturvorlage: §13.5 (pattern-leistungen-grid). Cards-Grid mit
   Workshop-spezifischer Card-Anatomie plus Status-Box und Format-Row
   für die Inhouse+Remote-Sektion. Lead-Cap-Falle aus §19.2 wird mit
   Child-Combinator-Selektor (Spezifität 0,2,0) abgesichert — analog §13.5. */

.pattern-workshops-hub__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.pattern-workshops-hub__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
}

/* Lead-Cap auf 1200 px (Container-content-size) gegen §19.2 — siehe
   §13.5 Kommentar zur Spezifitäts-Logik. */
.pattern-workshops-hub > .pattern-workshops-hub__lead {
	max-width: 1200px;
}

/* Status-Box: Inhouse+Remote-Hinweis mit Border-Left-Akzent. */
.pattern-workshops-hub__status {
	border-left: 2px solid var(--wp--preset--color--signal);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xl);
}

/* Cards-Grid: Block-Editor setzt 3-Spalten-Grid via columnCount=3.
   Sechs Cards laufen als 2 Reihen × 3 Spalten. */
@media (max-width: 1024px) {
	.pattern-workshops-hub__cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.pattern-workshops-hub__cards {
		grid-template-columns: 1fr !important;
	}
}

.pattern-workshops-hub__card {
	border: 1px solid rgba(15, 22, 32, 0.18);
	background-color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	transition: background-color 150ms ease-out;
}

.pattern-workshops-hub__card:hover {
	background-color: var(--wp--preset--color--paper-shadow);
}

.pattern-workshops-hub__tag {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.pattern-workshops-hub__card-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.pattern-workshops-hub__card-meta {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	line-height: 1.5;
}

.pattern-workshops-hub__card-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
}

.pattern-workshops-hub__card-more {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-workshops-hub__card-more a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
}

.pattern-workshops-hub__card-more a:hover {
	color: var(--wp--preset--color--signal);
}

/* Format-Row: zwei gleichberechtigte Spalten Inhouse + Remote.
   Block-Editor setzt das Grid via columnCount=2. */
.pattern-workshops-hub__format-row {
	margin-top: var(--wp--preset--spacing--2-xl);
}

@media (max-width: 800px) {
	.pattern-workshops-hub__format-row {
		grid-template-columns: 1fr !important;
		gap: var(--wp--preset--spacing--xl) !important;
	}
}

.pattern-workshops-hub__format-col {
	border-top: 2px solid var(--wp--preset--color--body-ink);
	padding-top: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.pattern-workshops-hub__format-col-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.pattern-workshops-hub__format-col-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
}

.pattern-workshops-hub__format-col-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(15, 22, 32, 0.78);
	margin: 0;
}

/* ----- 13.17 · Pattern: Workshop · Detail (Sub-Pages) ----- */

/* Schlanker Layer für Sub-Pages — §19 (Page-Editorial-Body) liefert
   Heading-Hierarchie und Body-Defaults. Eigene Sub-Elemente nur für
   die workshop-spezifischen Boxen (Lernziele, Agenda-Block-Liste,
   Format-Grid, CTA-Box). */

.pattern-workshop-detail__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.82);
	margin: 0 0 var(--wp--preset--spacing--xl);
	text-wrap: balance;
}

/* Lead-Cap gegen §19.2 — Child-Combinator-Selektor (Spezifität 0,2,0).
   68ch initial — Anpassung nach Visual-Check. */
.pattern-workshop-detail > .pattern-workshop-detail__lead {
	max-width: 68ch;
}

/* Lernziele-Box: Mono-Label-Eyebrow + Border-Top, native <ul> wird
   durch §19.x gestylt. */
.pattern-workshop-detail__lernziele {
	border-top: 2px solid var(--wp--preset--color--body-ink);
	padding-top: var(--wp--preset--spacing--md);
	margin: var(--wp--preset--spacing--xl) 0;
}

.pattern-workshop-detail__lernziele-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

/* Agenda: Block-basierte Liste mit Mono-Label-Block-Markern.
   Jeder Agenda-Block = 2-Spalten-Grid (200px Mono-Label / 1fr Body). */
.pattern-workshop-detail__agenda {
	margin: var(--wp--preset--spacing--xl) 0;
}

.pattern-workshop-detail__agenda-block {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	padding: var(--wp--preset--spacing--md) 0;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--wp--preset--spacing--lg);
}

.pattern-workshop-detail__agenda-block:last-of-type {
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.pattern-workshop-detail__agenda-block-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	line-height: 1.6;
}

.pattern-workshop-detail__agenda-block-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
}

@media (max-width: 800px) {
	.pattern-workshop-detail__agenda-block {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* Format-Grid: zwei gleichberechtigte Spalten Inhouse + Remote.
   Eigene Klassen statt Helper-Pattern (BEM-Sauberkeit). */
.pattern-workshop-detail__format-grid {
	margin: var(--wp--preset--spacing--2-xl) 0;
}

@media (max-width: 800px) {
	.pattern-workshop-detail__format-grid {
		grid-template-columns: 1fr !important;
		gap: var(--wp--preset--spacing--xl) !important;
	}
}

.pattern-workshop-detail__format-col {
	border-top: 2px solid var(--wp--preset--color--body-ink);
	padding-top: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.pattern-workshop-detail__format-col-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.pattern-workshop-detail__format-col-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
}

.pattern-workshop-detail__format-col-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(15, 22, 32, 0.78);
	margin: 0;
}

/* CTA-Box: schlichte Border-Box am Ende der Sub-Page, zentriert.
   Eyebrow + Title + Workshop-anfragen-Button. */
.pattern-workshop-detail__cta-box {
	border: 1px solid var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--xl);
	margin: var(--wp--preset--spacing--2-xl) 0;
	text-align: center;
}

.pattern-workshop-detail__cta-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.pattern-workshop-detail__cta-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 var(--wp--preset--spacing--lg);
	text-wrap: balance;
}

/* ============================================================
   14. Spezial-Template — Single (Blog-Detail)
   ============================================================
   Editorial-Header mit Breadcrumb und Lead, breite Featured-Image-
   Bühne, zweispaltiger Body-Wrap mit Sticky-ToC (Desktop) bzw.
   Akkordeon (Mobile), Author-Box auf Deep-Ink, Related-Posts in
   3-Spalten-Grid (re-uses pattern-blog-teaser__card aus § 13.10).
   ============================================================ */

/* ----- 14.1 · Article-Head ----- */

.single-article-head {
	color: var(--wp--preset--color--body-ink);
}

.article-head .breadcrumb {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0 0 var(--wp--preset--spacing--xl);
}

.article-head .breadcrumb a {
	color: rgba(15, 22, 32, 0.55);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.article-head .breadcrumb a:hover {
	color: var(--wp--preset--color--body-ink);
}

.article-head .breadcrumb .sep {
	margin: 0 8px;
	color: rgba(15, 22, 32, 0.25);
}

/* Kategorie-Eyebrow vom core/post-terms greift mit der eyebrow-Klasse aus § 4.
   Wir entfernen nur die default ul-Liste-Behandlung. */
.article-head__cat,
.article-head__cat a {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	text-decoration: none;
	display: inline;
}

.article-head__cat a:hover {
	color: var(--wp--preset--color--body-ink);
}

/* core/post-terms rendert die Liste mit Komma-Separator — wir wollen das
   inline mit Eyebrow-Look. Default ist `display: block` für die Wurzel. */
.article-head__cat {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.article-head__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--lg);
	text-wrap: balance;
}

.article-head__title .k {
	color: var(--wp--preset--color--signal);
}

.article-meta {
	margin: 0 0 var(--wp--preset--spacing--lg);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
}

.article-meta .article-meta__item,
.article-meta .wp-block-post-author-name,
.article-meta .wp-block-post-date,
.article-meta .wp-block-shortcode {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
}

/* core/post-author-name rendert ein <a class="wp-block-post-author-name">…</a> 
   oder reinen Text — beides soll ohne Underline und in Mono-Style sein. */
.article-meta a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease-out;
}

.article-meta a:hover {
	border-bottom-color: var(--wp--preset--color--body-ink);
}

/* Trenner zwischen den Meta-Items: `·` als Pseudo-Element. */
.article-meta > * + *::before {
	content: " · ";
	margin: 0 8px;
	color: rgba(15, 22, 32, 0.35);
}

.article-lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.82);
	margin: 0;
	max-width: 68ch;
}

/* core/post-excerpt rendert ein <p class="wp-block-post-excerpt__excerpt">,
   wir setzen die article-lead-Klasse zusätzlich am Container. */
.article-lead p,
.article-lead .wp-block-post-excerpt__excerpt {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

/* ----- 14.2 · Featured Image ----- */

.article-feat {
	border: 1px solid rgba(15, 22, 32, 0.18);
}

/* Wenn kein Featured Image gesetzt ist, rendert WP einen leeren Block —
   den blenden wir aus. */
.article-feat:empty,
.article-feat .wp-block-post-featured-image:empty {
	display: none;
}

/* ----- 14.3 · Body-Wrap mit Sticky-TOC ----- */

/* `display: grid` überschreibt das WP-Block-Layout `type:flex` aus dem
   Template (single.html). WP injiziert pro Block-Container eine eigene
   `wp-container-XXX { display: flex; flex-wrap: nowrap; ... }`-Regel mit
   Spezifität (0,1,0) — gleich unserer `.article-body-wrap` (0,1,0). Da der
   WP-injected style nach editorial.css ausgeliefert wird, gewinnt er bei
   gleicher Spezifität. `!important` auf `display` und `grid-template-columns`
   neutralisiert das. Selbes Pattern wie § 14.7 (WP-Core-Width-Override). */

.article-body-wrap {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 220px !important;
	gap: var(--wp--preset--spacing--2-xl);
	align-items: start;
}

@media (max-width: 800px) {
	.article-body-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--wp--preset--spacing--lg);
	}
	/* TOC erscheint auf Mobile *vor* dem Body als Akkordeon. */
	.article-body-wrap .article-toc {
		order: -1;
	}
}

/* ----- 14.4 · Article-Body — typografische Detailpflege ----- */

.article-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;             /* 18 px */
	line-height: 1.65;
	color: var(--wp--preset--color--body-ink);
	max-width: 720px;
}

.article-body > * {
	margin-block: 0;
}

.article-body p {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.article-body p a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body p a:hover {
	color: var(--wp--preset--color--signal);
}

.article-body h2 {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--2-xl) 0 var(--wp--preset--spacing--lg);
	scroll-margin-top: var(--wp--preset--spacing--xl);
	text-wrap: balance;
}

.article-body h2:first-child {
	margin-top: 0;
}

.article-body h3 {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.article-body ul,
.article-body ol {
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding-left: 1.5em;
}

.article-body li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}

.article-body li > ul,
.article-body li > ol {
	margin-top: 0.5em;
}

/* core/code im Article-Body — ergänzt theme.json mit Editor-Tag. */
.article-body .wp-block-code {
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xl);
	position: relative;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	overflow-x: auto;
}

.article-body .wp-block-preformatted {
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xl);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	overflow-x: auto;
}

/* core/pullquote im Article-Body — Editorial-Style mit Signal-Glyph statt 
   theme.json-Default mit Border-oben/unten. */
.article-body .wp-block-pullquote {
	border: 0;
	margin: var(--wp--preset--spacing--xl) 0;
	padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--lg) 56px;
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	position: relative;
	max-width: 60ch;
}

.article-body .wp-block-pullquote::before {
	content: "„";
	position: absolute;
	left: 0;
	top: 8px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	color: var(--wp--preset--color--signal);
	font-size: 4rem;
	line-height: 1;
}

.article-body .wp-block-pullquote blockquote,
.article-body .wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
	text-wrap: balance;
}

.article-body .wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
}

/* core/quote — der einfache Quote-Block (mit Signal-Border-Left) bleibt aus
   theme.json. Hier nur noch Margin angleichen. */
.article-body .wp-block-quote {
	margin: var(--wp--preset--spacing--lg) 0;
}

/* core/image — Captions im Mono-Stil, Inline-Caption ist Editorial. */
.article-body .wp-block-image {
	margin: var(--wp--preset--spacing--xl) 0;
}

.article-body .wp-block-image img {
	border: 1px solid rgba(15, 22, 32, 0.18);
}

.article-body .wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding-left: var(--wp--preset--spacing--md);
	border-left: 2px solid var(--wp--preset--color--signal);
	line-height: 1.5;
}

/* core/table — Editorial-Style mit Mono-Header. */
.article-body .wp-block-table {
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xl);
}

.article-body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.article-body .wp-block-table th {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	text-align: left;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.article-body .wp-block-table td {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

/* core/separator — sauberer Trenner mit etwas Luft. */
.article-body .wp-block-separator {
	margin: var(--wp--preset--spacing--xl) 0;
	border: 0;
	border-top: 1px solid rgba(15, 22, 32, 0.18);
	max-width: 6em;
}

/* ----- 14.5 · Article-TOC — Sticky Desktop, Akkordeon Mobile ----- */

.article-toc {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	position: sticky;
	top: var(--wp--preset--spacing--xl);
	align-self: start;
}

.article-toc[data-empty="true"] {
	display: none;
}

.article-toc__k--desktop {
	display: block;
	color: var(--wp--preset--color--signal);
	margin-bottom: var(--wp--preset--spacing--md);
	font-weight: 500;
	letter-spacing: 0.14em;
}

.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-toc__item {
	border-top: 1px solid rgba(15, 22, 32, 0.18);
}

.article-toc__item:first-child {
	border-top: 0;
}

.article-toc__link {
	display: block;
	padding: 8px 0;
	color: rgba(15, 22, 32, 0.7);
	text-decoration: none;
	line-height: 1.4;
	letter-spacing: 0.06em;
	transition: color 150ms ease-out;
}

.article-toc__link:hover {
	color: var(--wp--preset--color--body-ink);
}

.article-toc__link.is-active {
	color: var(--wp--preset--color--signal);
}

.article-toc__toggle {
	display: none;            /* nur Mobile */
}

@media (max-width: 800px) {
	.article-toc {
		position: static;
		border: 1px solid rgba(15, 22, 32, 0.18);
		background-color: var(--wp--preset--color--paper-shadow);
	}

	.article-toc__k--desktop {
		display: none;
	}

	.article-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: var(--wp--preset--spacing--md);
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
		background: transparent;
		border: 0;
		cursor: pointer;
		font-family: inherit;
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--body-ink);
		text-align: left;
	}

	.article-toc__toggle .article-toc__k {
		color: var(--wp--preset--color--signal);
		flex: 0 0 auto;
	}

	.article-toc__toggle .article-toc__toggle-label {
		flex: 1 1 auto;
		text-align: left;
		padding-left: var(--wp--preset--spacing--sm);
	}

	.article-toc__toggle .article-toc__toggle-sym {
		font-family: var(--wp--preset--font-family--space-grotesk);
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0;
		color: var(--wp--preset--color--signal);
		flex: 0 0 auto;
	}

	.article-toc__list {
		display: none;
		padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
		border-top: 1px solid rgba(15, 22, 32, 0.18);
	}

	.article-toc__toggle[aria-expanded="true"] + .article-toc__list,
	.article-toc__toggle[aria-expanded="true"] ~ .article-toc__list {
		display: block;
	}

	/* Mobile-spezifische Margin im Wrap-Block für ToC. */
	.article-toc {
		margin-bottom: var(--wp--preset--spacing--md);
	}
}

/* ----- 14.6 · Article-Footer (Tags + Share) ----- */

.article-footer__tags,
.article-footer__tags a {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
}

.article-footer__tags a {
	display: inline-block;
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.18);
	padding: 6px 10px;
	margin: 0 6px 6px 0;
	line-height: 1.4;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.article-footer__tags a:hover {
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--body-ink);
}

.article-footer__share {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
}

.article-footer__share-label {
	margin-right: var(--wp--preset--spacing--sm);
}

.article-footer__share a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	margin-left: var(--wp--preset--spacing--md);
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.article-footer__share a:first-of-type {
	margin-left: 0;
}

.article-footer__share a:hover {
	border-bottom-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}

/* ----- 14.7 · Author-Box auf Deep Ink ----- */

.single-author-box {
	color: var(--wp--preset--color--paper);
}

.author-box__portrait {
	aspect-ratio: 1 / 1;
	background:
		repeating-linear-gradient(135deg, rgba(244, 241, 234, 0.06) 0 10px, transparent 10px 20px),
		var(--wp--preset--color--brand-navy);
	border: 1px solid rgba(244, 241, 234, 0.2);
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--md);
}

.author-box__portrait-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.55);
	margin: 0;
}

.author-box__eyebrow {
	color: var(--wp--preset--color--signal);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.author-box__name {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--paper);
}

.author-box__bio {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(244, 241, 234, 0.8);
	margin: 0;
	max-width: 56ch;
}

/* Author-Box-Spalten-Layout — explizite flex-Verteilung mit width-Override.

   Die wp:column-Blocks im author-box-Markup haben verticalAlignment: "center",
   was im DOM die Klasse `is-vertically-aligned-center` setzt. WP-Core injiziert
   dafür eine Inline-Block-Style-Regel mit Spezifität (0,2,0):

     .wp-block-column.is-vertically-aligned-bottom,
     .wp-block-column.is-vertically-aligned-center,
     .wp-block-column.is-vertically-aligned-top { width: 100%; }

   Diese Regel ist spezifischer als unsere `.author-box__*-col`-Selektoren
   (0,1,0) und kommt im injected style nach editorial.css. Konsequenz: bei
   `flex: 0 0 auto` auf cta-col fällt flex-basis: auto auf width zurück, dort
   liegt 100% — die CTA-Column nimmt mit flex-shrink: 0 die ganze Container-
   Breite, body und portrait werden auf 0 gequetscht, der Bio-Text rendert
   als 1-Buchstabe-pro-Zeile-Wurm (verifiziert live: body w=0, body h=4798).

   Fix: explizit `width: auto !important` für alle drei Columns, damit der
   width-Fallback aus dem WP-Core-Style neutralisiert wird. Erst danach
   wirken die flex-Regeln wie geplant:
   - portrait-col: flex-basis 160px (aus Markup-Inline) → fixe 160 px
   - body:         flex 1 1 0 → nimmt allen Restraum
   - cta-col:      flex 0 0 auto → schrumpft auf Button-Breite (~131 px) */

.single-author-box .wp-block-columns {
	align-items: center;
}

.author-box__portrait-col,
.author-box__body,
.author-box__cta-col {
	width: auto !important;
}

.author-box__body {
	flex: 1 1 0 !important;
	min-width: 0;
}

.author-box__cta-col {
	flex: 0 0 auto !important;
}

/* Author-Box CTA-Button: theme.json-Default ist Signal-fill — auf Deep-Ink-Stage 
   wirkt das hart. Outline-Variante mit Paper-Rand bringt das Editorial-Feeling. */
.author-box__cta-col .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}

.author-box__cta-col .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--deep-ink);
	border-color: var(--wp--preset--color--paper);
}

@media (max-width: 800px) {
	.author-box__portrait-col {
		max-width: 160px;
	}
	.single-author-box .wp-block-columns {
		flex-wrap: wrap !important;
	}
}

/* ----- 14.8 · Single Related (re-uses pattern-blog-teaser__card aus § 13.10) ----- */

.single-related__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--2-xl);
	max-width: 22ch;
	text-wrap: balance;
}

/* core/post-template auf single-related__query rendert eine div mit unseren
   Pattern-Klassen. Die pattern-blog-teaser__card-Styles aus § 13.10 greifen
   automatisch. Hier nur noch explizite WP-Block-Klassen-Resets. */
.single-related .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-related .wp-block-post-template .pattern-blog-teaser__card-title a {
	color: var(--wp--preset--color--body-ink);
}

/* ============================================================
   15. Spezial-Template — Archive (Blog-Übersicht)
   ============================================================
   Hero-Compact mit Headline und Lead, statische Kategorie-Filter-
   Pills (Filter-Funktion ist Phase 2), Featured-Post-Komposition
   mit Cover und Body, 3-Spalten-Grid-Loop für Post 2..N (re-uses
   pattern-blog-teaser__card), Pagination am Ende.
   ============================================================ */

/* ----- 15.1 · Hero-Compact ----- */

.archive-hero {
	color: var(--wp--preset--color--body-ink);
}

.archive-hero__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 18ch;
	text-wrap: balance;
}

.archive-hero__title .k {
	color: var(--wp--preset--color--signal);
}

.archive-hero__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
	max-width: 62ch;
}

/* ----- 15.2 · Kategorie-Filter (statisch) ----- */

.cat-filter {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--2-xl);
	padding-bottom: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.cat-pill {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--body-ink);
	background: transparent;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cat-pill:hover {
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
}

.cat-pill.is-active {
	background-color: var(--wp--preset--color--deep-ink);
	border-color: var(--wp--preset--color--deep-ink);
	color: var(--wp--preset--color--paper);
}

/* ----- 15.3 · Featured Post (erster Post als prominenter Block) ----- */

.archive-featured-query .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-featured {
	background-color: var(--wp--preset--color--paper);
	margin-bottom: 0;            /* Abstand zum Grid kommt aus archive-grid-query margin-top */
}

.archive-featured > .wp-block-post-featured-image,
.archive-featured__cover {
	flex: 0 0 50%;
	min-width: 0;
	margin: 0;
	border-right: 1px solid rgba(15, 22, 32, 0.18);
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper-shadow);
}

.archive-featured > .wp-block-post-featured-image {
	display: flex;
	align-items: stretch;
	min-height: 320px;
}

.archive-featured > .wp-block-post-featured-image img,
.archive-featured__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Wenn kein Featured-Image: WP rendert den Block leer — zeigen wir den 
   Cover-Placeholder via background-image. */
.archive-featured > .wp-block-post-featured-image:empty {
	min-height: 320px;
}

.archive-featured__body {
	flex: 1 1 50%;
	min-width: 0;
	background-color: var(--wp--preset--color--paper);
}

.archive-featured__body .article-head__cat,
.archive-featured__cat {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.archive-featured__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.archive-featured__title a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.archive-featured__title a:hover {
	color: var(--wp--preset--color--signal);
}

.archive-featured__meta {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
}

.archive-featured__meta-item,
.archive-featured__meta .wp-block-post-author-name,
.archive-featured__meta .wp-block-post-date,
.archive-featured__meta .wp-block-shortcode {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
}

.archive-featured__meta a {
	color: inherit;
	text-decoration: none;
}

.archive-featured__meta > * + *::before {
	content: " · ";
	margin: 0 6px;
	color: rgba(15, 22, 32, 0.35);
}

.archive-featured__excerpt,
.archive-featured__excerpt p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(15, 22, 32, 0.8);
	margin: 0;
	max-width: 50ch;
}

@media (max-width: 800px) {
	.archive-featured {
		flex-direction: column !important;
	}
	.archive-featured > .wp-block-post-featured-image,
	.archive-featured__cover {
		flex: 0 0 auto;
		border-right: 0;
		border-bottom: 1px solid rgba(15, 22, 32, 0.18);
		min-height: 200px;
	}
	.archive-featured__body {
		flex: 1 1 auto;
	}
}

/* ----- 15.4 · Grid-Loop ----- */

.archive-grid-query .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* re-use von pattern-blog-teaser__cards Mobile-Stufen aus § 13.10 — nichts 
   weiteres nötig. */

.archive-grid-query .pattern-blog-teaser__card-title a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
}

.archive-grid-query .pattern-blog-teaser__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* core/post-template ohne Layout-Property rendert ohne grid — wir setzen das
   im Template per layout-Attribut, aber dieser CSS-Hook stellt sicher, dass
   der Wrapper auch im Editor korrekt aussieht. */
.archive-grid-query .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--lg);
	row-gap: var(--wp--preset--spacing--2-xl);
}

/* ----- 15.5 · Pagination ----- */

.archive-pagination {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.archive-pagination a,
.archive-pagination .wp-block-query-pagination-previous,
.archive-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.archive-pagination a:hover,
.archive-pagination .wp-block-query-pagination-previous:hover,
.archive-pagination .wp-block-query-pagination-next:hover {
	border-bottom-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}

.archive-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 4px;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.archive-pagination .page-numbers {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid transparent;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	transition: border-color 150ms ease-out;
}

.archive-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--body-ink);
}

.archive-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--signal);
}

.archive-pagination .page-numbers.dots {
	color: rgba(15, 22, 32, 0.35);
	pointer-events: none;
}

.archive-grid__empty {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: rgba(15, 22, 32, 0.7);
	margin: var(--wp--preset--spacing--xl) 0;
}

/* ============================================================
   16. Spezial-Template — 404
   ============================================================
   Editorial-404 mit Display-Headline, Lead und drei nummerierten 
   Mono-Quick-Links. Maximal ruhig, nichts Verspieltes.
   ============================================================ */

.error-404 {
	color: var(--wp--preset--color--body-ink);
}

.error-404__eyebrow {
	margin-bottom: var(--wp--preset--spacing--md);
}

.error-404__claim {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--lg);
	max-width: 14ch;
	text-wrap: balance;
}

.error-404__claim .k {
	color: var(--wp--preset--color--signal);
}

.error-404__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.8);
	margin: 0;
	max-width: 56ch;
}

.error-404__links {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(15, 22, 32, 0.18);
}

.error-404__link {
	margin: 0;
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.error-404__link a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md) 0;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	line-height: 1.2;
	transition: padding-left 150ms ease-out, color 150ms ease-out;
}

.error-404__link a:hover {
	padding-left: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--signal);
}

.error-404__link-num {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	flex: 0 0 auto;
}

.error-404__link-label {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--space-grotesk);
}

.error-404__link-arrow {
	font-family: var(--wp--preset--font-family--space-grotesk);
	color: var(--wp--preset--color--signal);
	flex: 0 0 auto;
}

.error-404__meta {
	margin: var(--wp--preset--spacing--2-xl) 0 0;
}

@media (max-width: 800px) {
	.error-404__link a {
		font-size: 1.25rem;
		gap: var(--wp--preset--spacing--sm);
	}
}

/* ============================================================
   17. Spezial-Template — Single-Referenz (Case Study Detail)
   ============================================================
   Editorial-Header mit Breadcrumb, Eyebrow und Lead, breite
   Featured-Cover-Bühne, Body mit dem Case-Study-Schema (Ausgangslage
   · Beitrag · Wirkung · Tech-Stack · Quote) und drei Custom-Blocks
   für strukturierte Felder. Weitere-Referenzen-Grid am Ende
   re-used die archive-referenz__card-Klassen aus § 18.
   ============================================================ */

/* ----- 17.1 · Article-Head ----- */

.single-referenz-head {
	color: var(--wp--preset--color--body-ink);
}

.single-referenz-head .breadcrumb {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0 0 var(--wp--preset--spacing--xl);
}

.single-referenz-head .breadcrumb a {
	color: rgba(15, 22, 32, 0.55);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.single-referenz-head .breadcrumb a:hover {
	color: var(--wp--preset--color--body-ink);
}

.single-referenz-head .breadcrumb .sep {
	margin: 0 8px;
	color: rgba(15, 22, 32, 0.25);
}

.single-referenz-head__eyebrow {
	color: var(--wp--preset--color--signal);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.single-referenz-head__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--lg);
	text-wrap: balance;
}

.single-referenz-head__title .k {
	color: var(--wp--preset--color--signal);
}

.single-referenz-head__lead,
.single-referenz-head__lead p,
.single-referenz-head__lead .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.82);
	margin: 0;
	max-width: 68ch;
}

/* ----- 17.2 · Featured Cover ----- */

.single-referenz-cover {
	border: 1px solid rgba(15, 22, 32, 0.18);
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper-shadow);
	overflow: hidden;
}

.single-referenz-cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* Empty-State: render_block-Filter (siehe inc/case-study-cover-fallback.php)
   rendert eine <figure class="single-referenz-cover single-referenz-cover--empty">,
   wenn kein Featured-Image gesetzt ist. Stripes-Background erbt aus der
   Basis-Klasse; aspect-ratio wird vom Filter inline auf den Wrapper gesetzt. */
.single-referenz-cover--empty {
	margin: 0;
}

/* ----- 17.3 · Body-Container und Typografie ----- */

.single-referenz-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--wp--preset--color--body-ink);
	max-width: 760px;
}

.single-referenz-body > * {
	margin-block: 0;
}

.single-referenz-body p {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.single-referenz-body p a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-referenz-body p a:hover {
	color: var(--wp--preset--color--signal);
}

.single-referenz-body h2 {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--2-xl) 0 var(--wp--preset--spacing--md);
	scroll-margin-top: var(--wp--preset--spacing--xl);
	text-wrap: balance;
}

.single-referenz-body h2:first-child {
	margin-top: 0;
}

.single-referenz-body h3 {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.single-referenz-body ul,
.single-referenz-body ol {
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding-left: 1.5em;
}

.single-referenz-body li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}

.single-referenz-body li > ul,
.single-referenz-body li > ol {
	margin-top: 0.5em;
}

/* core/quote im Body — fett-akzentuierte Kunden-O-Töne mit Signal-Border. */
.single-referenz-body .wp-block-quote {
	margin: var(--wp--preset--spacing--xl) 0;
	padding-left: var(--wp--preset--spacing--lg);
	border-left: 2px solid var(--wp--preset--color--signal);
}

.single-referenz-body .wp-block-quote p {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.single-referenz-body .wp-block-quote cite {
	display: block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
}

/* ----- 17.4 · Custom-Block: case-study-meta ----- */

.case-study-meta {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	margin: var(--wp--preset--spacing--xl) 0;
	padding: var(--wp--preset--spacing--lg) 0;
	border-top: 1px solid var(--wp--preset--color--body-ink);
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.case-study-meta__row {
	display: contents;
}

.case-study-meta__label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	margin: 0;
	line-height: 1.6;
}

.case-study-meta__value {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
}

.case-study-meta__placeholder {
	color: rgba(15, 22, 32, 0.4);
	font-style: italic;
	font-size: 0.875rem;
}

@media (max-width: 800px) {
	.case-study-meta {
		grid-template-columns: 1fr;
		gap: 4px var(--wp--preset--spacing--md);
	}
	.case-study-meta__row {
		display: block;
		margin-bottom: var(--wp--preset--spacing--md);
	}
	.case-study-meta__row:last-child {
		margin-bottom: 0;
	}
	.case-study-meta__label {
		display: block;
		margin-bottom: 2px;
	}
}

/* ----- 17.5 · Custom-Block: case-study-stats ----- */

.case-study-stats {
	margin: var(--wp--preset--spacing--xl) 0;
}

.case-study-stats__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.case-study-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg);
}

/* Patch 0.5.1 — `data-stats-count` sitzt im render.php-Output auf der Wurzel
   `.case-study-stats`, nicht auf dem Grid selbst. Selektor entsprechend
   umgezogen, sodass die Spalten-Anzahl tatsächlich greift. Verifiziert per
   JS-Probe in der Visual-Abnahme (siehe BACKLOG Paket 5). */
.case-study-stats[data-stats-count="1"] .case-study-stats__grid { grid-template-columns: minmax(0, 1fr); }
.case-study-stats[data-stats-count="2"] .case-study-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-study-stats[data-stats-count="3"] .case-study-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.case-study-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding-top: var(--wp--preset--spacing--md);
	border-top: 2px solid var(--wp--preset--color--body-ink);
}

.case-study-stats__number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
}

.case-study-stats__unit {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: rgba(15, 22, 32, 0.7);
	text-transform: none;
}

.case-study-stats__label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(15, 22, 32, 0.55);
	line-height: 1.5;
	margin: 0;
}

.case-study-stats__placeholder {
	color: rgba(15, 22, 32, 0.4);
	font-style: italic;
}

@media (max-width: 800px) {
	/* Mobile: 2-spaltig für 3 oder 4 Stats, 1-spaltig für 1 oder 2. 
	   Selbe Logik wie pattern-stats-block (siehe DECISIONS 2026-04-26).
	   Patch 0.5.1 — Selektoren analog zur Desktop-Korrektur über die Wurzel
	   `.case-study-stats`. */
	.case-study-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.case-study-stats[data-stats-count="1"] .case-study-stats__grid { grid-template-columns: minmax(0, 1fr) !important; }
	.case-study-stats[data-stats-count="2"] .case-study-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ----- 17.6 · Custom-Block: case-study-tech-stack ----- */

.case-study-tech {
	margin: var(--wp--preset--spacing--xl) 0;
}

.case-study-tech__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.case-study-tech__cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
}

.case-study-tech__pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid rgba(15, 22, 32, 0.4);
	padding: 6px 10px;
	line-height: 1.4;
}

.case-study-tech__placeholder {
	color: rgba(15, 22, 32, 0.4);
	font-style: italic;
}

/* Editor-spezifische Anpassungen: leicht andere Hintergründe damit
   Sub-Felder ohne Inhalt erkennbar sind. Greifen nur im Block-Editor
   (--editor-Suffix wird vom Edit-JS gesetzt). */
.case-study-meta--editor,
.case-study-stats--editor,
.case-study-tech--editor {
	position: relative;
}

/* ----- 17.7 · Single-Related (re-uses archive-referenz__card aus § 18) ----- */

.single-referenz-related {
	color: var(--wp--preset--color--body-ink);
}

.single-referenz-related__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--2-xl);
	max-width: 22ch;
	text-wrap: balance;
}

.single-referenz-related__title .k {
	color: var(--wp--preset--color--signal);
}

.single-referenz-related__query .wp-block-post-template,
.single-referenz-related__cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----- 17.8 · Case-Study-Card · Cover (Pattern-Inserter) ----- */

.case-study-card__cover {
	margin: 0 0 var(--wp--preset--spacing--md);
	border: 1px solid rgba(15, 22, 32, 0.18);
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper-shadow);
	overflow: hidden;
}

.case-study-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

.case-study-card__cover--empty {
	margin: 0 0 var(--wp--preset--spacing--md);
}

/* ============================================================
   18. Spezial-Template — Archive-Referenz (Case-Study-Übersicht)
   ============================================================
   Hero-Compact mit Headline und Lead, 3-Spalten-Card-Grid mit
   Cover-Image (Aspect 4/3), Eyebrow, Titel und Excerpt. Pagination
   am Ende. Keine Filter-Pills im Phase-1 — Branche-Filter ist
   Phase-2-Aufgabe (analog zu Cat-Filter im Blog-Archive).
   ============================================================ */

/* ----- 18.1 · Hero-Compact ----- */

.archive-referenz-hero {
	color: var(--wp--preset--color--body-ink);
}

.archive-referenz-hero__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 18ch;
	text-wrap: balance;
}

.archive-referenz-hero__title .k {
	color: var(--wp--preset--color--signal);
}

.archive-referenz-hero__lead {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
	max-width: 62ch;
}

/* ----- 18.2 · Card-Grid ----- */

.archive-referenz__query .wp-block-post-template,
.archive-referenz__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* core/post-template ohne explizite Layout-Klasse stellt sicher, dass auch
   im Editor das Grid-Verhalten konsistent rendert. */
.archive-referenz__query .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--lg);
	row-gap: var(--wp--preset--spacing--2-xl);
}

.archive-referenz__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.archive-referenz__card > * {
	margin: 0;
}

.archive-referenz__cover {
	margin: 0 0 var(--wp--preset--spacing--md);
	border: 1px solid rgba(15, 22, 32, 0.18);
	background:
		repeating-linear-gradient(135deg, rgba(15, 22, 32, 0.06) 0 12px, transparent 12px 24px),
		var(--wp--preset--color--paper-shadow);
	overflow: hidden;
}

.archive-referenz__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	transition: transform 200ms ease-out;
}

.archive-referenz__cover a:hover img {
	transform: scale(1.02);
}

/* Empty-State: render_block-Filter (siehe inc/case-study-cover-fallback.php)
   rendert eine <figure class="archive-referenz__cover archive-referenz__cover--empty">,
   wenn kein Featured-Image gesetzt ist. Stripes-Background erbt aus der
   Basis-Klasse; aspect-ratio kommt inline vom Filter. */
.archive-referenz__cover--empty {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.archive-referenz__eyebrow {
	color: var(--wp--preset--color--signal);
	margin: 0;
}

.archive-referenz__title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	margin: 0;
	text-wrap: balance;
}

.archive-referenz__title a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.archive-referenz__title a:hover {
	color: var(--wp--preset--color--signal);
}

.archive-referenz__excerpt,
.archive-referenz__excerpt p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(15, 22, 32, 0.75);
	margin: 0;
	max-width: 42ch;
}

.archive-referenz__empty {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: rgba(15, 22, 32, 0.7);
	margin: var(--wp--preset--spacing--xl) 0;
}

/* ----- 18.3 · Pagination ----- */

.archive-referenz__pagination {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.archive-referenz__pagination a,
.archive-referenz__pagination .wp-block-query-pagination-previous,
.archive-referenz__pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.archive-referenz__pagination a:hover,
.archive-referenz__pagination .wp-block-query-pagination-previous:hover,
.archive-referenz__pagination .wp-block-query-pagination-next:hover {
	border-bottom-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}

.archive-referenz__pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 4px;
	margin: 0;
}

.archive-referenz__pagination .page-numbers {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid transparent;
	color: var(--wp--preset--color--body-ink);
	text-decoration: none;
	transition: border-color 150ms ease-out;
}

.archive-referenz__pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--body-ink);
}

.archive-referenz__pagination .page-numbers.current {
	border-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--signal);
}

.archive-referenz__pagination .page-numbers.dots {
	color: rgba(15, 22, 32, 0.35);
	pointer-events: none;
}

@media (max-width: 800px) {
	.archive-referenz__query .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: var(--wp--preset--spacing--xl);
	}
	.archive-referenz__title {
		font-size: 1.25rem;
	}
}

/* ============================================================
   19. Spezial-Template — Page (Editorial-Body für statische Seiten)
   ============================================================
   Editorial-Heading-Hierarchie für statische Pages (Impressum,
   Datenschutz, Über mich, Kontakt, Workshops, Leistungen plus
   Sub-Pages). theme.json `elements.h1/h2/h3` wird in der Praxis
   vom WP-Block-Editor-Default-Stylesheet auf `.wp-block-heading`
   überschrieben — alle Headings rendern dann mit ~18 px (Body-
   Schriftgröße aus theme.json), die Section-Hierarchie kollabiert
   visuell. Verifiziert per Live-Probe auf Pages 130/131 vor
   Einführung dieses Layers.

   §19 bindet auf `body.page` und schließt Pattern-Headings über
   `:not([class*="pattern-"])` aus, damit die Front-Page-Patterns
   (`.pattern-hero-navy__claim` etc. aus §13) unberührt bleiben.
   `:where(body.page)` reduziert die Spezifität von body.page auf
   0,0,0, sodass spezifischere Klassen-Selektoren (z. B. aus §13)
   immer noch gewinnen können, wenn sie auf einer Page erscheinen.

   Konvention für Page-Markup (siehe Pflicht-Inhalts-Pages 130/131):
     wp:group  (contentSize bleibt theme.json-Default 720 px)
       wp:paragraph className=eyebrow         // SEKTION
       wp:heading level=1                     <h1><span class="k">…</span>.</h1>
       wp:paragraph fontSize=lead             Lead-Paragraph
       wp:heading level=2                     Section-Headings
       wp:paragraph                           Body
       …

   templates/page.html liefert dafür ausschließlich den
   `wp:post-content`-Slot — kein `wp:post-title`-Block, weil Pages
   ihre eigene H1 mit Schlüsselwort-Akzent setzen. Siehe DECISIONS.md
   2026-04-27 (Heading-Hierarchie-Patch). Folge: Wer eine neue Page
   anlegt, muss eigenständig einen wp:heading-Block mit level=1
   einfügen, sonst hat die Page keinen H1 (semantisch und a11y-relevant).
   ============================================================ */

/* ----- 19.1 · Heading-Hierarchie ----- */

:where(body.page) h1.wp-block-heading:not([class*="pattern-"]) {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--lg);
	text-wrap: balance;
}

:where(body.page) h2.wp-block-heading:not([class*="pattern-"]) {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--2-xl) 0 var(--wp--preset--spacing--md);
	scroll-margin-top: var(--wp--preset--spacing--xl);
	text-wrap: balance;
}

:where(body.page) h3.wp-block-heading:not([class*="pattern-"]) {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

:where(body.page) h4.wp-block-heading:not([class*="pattern-"]) {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--body-ink);
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--sm);
}

/* ----- 19.2 · Lead-Paragraph (Editorial-Variante) ----- */

/* Lead-Paragraph (`fontSize=lead` im wp:paragraph → `class="has-lead-font-size"`)
   bekommt die Editorial-Behandlung: Space-Grotesk-Familie, Weight 500,
   gedämpfte Farbe, balanced wrap, max-width für komfortable Zeilenlänge.
   font-size kommt weiterhin aus theme.json (`fontSizes.lead`: 1.75rem,
   fluid 1.375-2rem) — wir überschreiben sie hier nicht. */

:where(body.page .entry-content) .has-lead-font-size {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(15, 22, 32, 0.82);
	max-width: 68ch;
	margin: 0 0 var(--wp--preset--spacing--xl);
	text-wrap: balance;
}

/* ----- 19.3 · Body-Paragraphen, Listen, Inline-Links ----- */

:where(body.page .entry-content) p {
	margin: 0 0 var(--wp--preset--spacing--md);
}

:where(body.page .entry-content) p a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:where(body.page .entry-content) p a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--signal);
}

:where(body.page .entry-content) ul,
:where(body.page .entry-content) ol {
	margin: 0 0 var(--wp--preset--spacing--md);
	padding-left: 1.5em;
}

:where(body.page .entry-content) li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}

:where(body.page .entry-content) li > ul,
:where(body.page .entry-content) li > ol {
	margin-top: 0.5em;
}

/* ============================================================
   20. CF7-Form-Polish — Newsletter (Form 175)
   ============================================================
   Bringt das CF7-Default-Render-Markup auf die §13.9-Pattern-Linie.
   Selektor-Anker: `.wpcf7-form.pattern-newsletter__form` (gesetzt
   via shortcode-Attribut `html_class` auf der Front-Page).

   CF7-6.1.5-Render-Eigenheiten, die hier neutralisiert werden:
   - <fieldset class="hidden-fields-container">: WP-CF7-Form-State-
     Hiddens (_wpcf7, _wpcf7_version, …). Display: none.
   - <p> als Default-Wrapper: nimmt im reduzierten Form-Aufbau (nur
     Email + Submit) sowohl Email-Wrap als auch Submit auf — wird
     selbst zum Grid-Container für das Inline-Layout.
   - <br> zwischen Email-Wrap und Submit: display: none.
   - <span class="wpcf7-spinner">: CF7-Default-Sprite, plugin-fremd.
     Im Idle versteckt, im Submitting-State als Mono-Caption
     ersetzt.

   Soll-Visual: §13.9 (Newsletter-Pattern). Border um den Inline-
   Container, Email transparent, Submit body-ink mit Signal-Orange-
   Hover, Border-Left als Trenner. Mobile (≤800px) stack auf
   einspaltig, Submit unten in voller Breite.
   ============================================================ */

/* ----- 20.1 · Form-Container und Hidden-Fieldset ----- */

.wpcf7-form.pattern-newsletter__form {
	margin: 0;
}

.wpcf7-form.pattern-newsletter__form .hidden-fields-container {
	display: none;
}

/* ----- 20.2 · Inline-Row (der <p>-Wrapper als Grid) -----

   Spezifität-Hinweis: §19.3 setzt `:where(body.page .entry-content) p`
   mit margin-bottom. Da `:where()` Spezifität 0,0,0 beiträgt, gewinnt
   unsere Regel mit (0,2,1) sicher. Gilt analog für die p:not(...)-Defaults
   aus §19.3, weil dort kein `<p>` direkt unter `.wpcf7-form` matched. */

.wpcf7-form.pattern-newsletter__form > p {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--body-ink);
	background-color: transparent;
	margin: 0;
	padding: 0;
}

.wpcf7-form.pattern-newsletter__form > p > br {
	display: none;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

/* ----- 20.3 · Email- und Text-Inputs ----- */

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-email,
.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-text {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.4;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-ink);
	border-radius: 0;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-email::placeholder,
.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-text::placeholder {
	color: rgba(15, 22, 32, 0.45);
	opacity: 1;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-email:focus-visible,
.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-text:focus-visible {
	background-color: var(--wp--preset--color--paper-shadow);
	outline: 0;
}

/* ----- 20.4 · Submit-Button ----- */

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-submit {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--body-ink);
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 var(--wp--preset--spacing--lg);
	cursor: pointer;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--deep-ink);
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: -2px;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ----- 20.5 · AJAX-Spinner — Idle versteckt, Submit-State als Mono-Caption ----- */

.wpcf7-form.pattern-newsletter__form .wpcf7-spinner {
	display: none;
}

.wpcf7-form.pattern-newsletter__form.submitting .wpcf7-spinner {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--paper);
	color: rgba(15, 22, 32, 0.55);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wpcf7-form.pattern-newsletter__form.submitting .wpcf7-spinner::before {
	content: "// wird gesendet…";
}

/* ----- 20.6 · Response-Output (AJAX-Status-Meldung) -----

   CF7 setzt aria-hidden="true" im Init-Zustand und togglet auf "false",
   sobald eine Meldung erscheint. Wir zeigen die Output-Box nur, wenn
   sie tatsächlich Inhalt trägt. */

.wpcf7-form.pattern-newsletter__form .wpcf7-response-output {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.6;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--paper-shadow);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--body-ink);
}

.wpcf7-form.pattern-newsletter__form .wpcf7-response-output:empty,
.wpcf7-form.pattern-newsletter__form .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.wpcf7-form.pattern-newsletter__form.sent .wpcf7-response-output {
	border-left-color: #3E7C5E;
}

.wpcf7-form.pattern-newsletter__form.invalid .wpcf7-response-output,
.wpcf7-form.pattern-newsletter__form.failed .wpcf7-response-output,
.wpcf7-form.pattern-newsletter__form.spam .wpcf7-response-output,
.wpcf7-form.pattern-newsletter__form.aborted .wpcf7-response-output,
.wpcf7-form.pattern-newsletter__form.unaccepted .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}

/* ----- 20.7 · Validation-Tip (inline am Feld) ----- */

.wpcf7-form.pattern-newsletter__form .wpcf7-not-valid-tip {
	display: block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin-top: 6px;
	padding-left: 10px;
	border-left: 2px solid var(--wp--preset--color--signal);
	line-height: 1.6;
}

/* ----- 20.8 · Acceptance-Checkbox (Future-Use) -----

   Aktuelle Form 175 hat keine Acceptance konfiguriert. Diese Regeln
   greifen automatisch, falls Johannes später ein DSGVO-Opt-in-Feld
   per [acceptance]-Tag im CF7-Form-Builder dazunimmt. */

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-acceptance {
	display: block;
	margin-top: var(--wp--preset--spacing--sm);
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance label {
	display: contents;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--signal);
	cursor: pointer;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance .wpcf7-list-item-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--wp--preset--color--body-ink);
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpcf7-form.pattern-newsletter__form .wpcf7-acceptance a:hover {
	color: var(--wp--preset--color--signal);
}

/* ----- 20.9 · Honeypot-Wraps (Future-Use, CF7-Apps-Plugin) -----

   Plugin ist aktiv (siehe tech-context/01-stack.md), aber in Form 175
   aktuell nicht eingesetzt. Defensive Selektoren — falls später
   [honeypot]-Tag dazukommt, wird das versteckte Feld automatisch aus
   dem Layout-Flow genommen. */

.wpcf7-form.pattern-newsletter__form .wpcf7-form-control-wrap[data-name^="honeypot"],
.wpcf7-form.pattern-newsletter__form .wpcf7-form-control-wrap[data-name^="hp-"],
.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-honeypot {
	display: none !important;
}

/* ----- 20.10 · Mobile (≤800px) — Stack-Layout ----- */

@media (max-width: 800px) {
	.wpcf7-form.pattern-newsletter__form > p {
		grid-template-columns: 1fr;
	}
	.wpcf7-form.pattern-newsletter__form .wpcf7-form-control.wpcf7-submit {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--body-ink);
		padding: 14px var(--wp--preset--spacing--lg);
		justify-content: center;
	}
}

/* ============================================================
   21. CF7-Form-Polish — Kontakt (Form 24)
   ============================================================
   Bringt das CF7-Default-Render-Markup auf die Brand-Linie.
   Selektor-Anker: `.wpcf7-form.pattern-formular-kontakt__form` (gesetzt
   via shortcode-Attribut `html_class` auf Page 129).

   Im Unterschied zu §20 (Newsletter, Inline 1-Feld + Submit) ist Form 24
   ein vertikales Mehrfeld-Formular: Name, E-Mail, Betreff (Pflicht),
   Nachricht (optional), Submit. Layout-Strategie:
   - Container-Border (1 px body-ink) umschließt die ganze Form-Box.
   - Jedes Feld als visuelle Zelle: Mono-Caption-Label oben, Input darunter.
   - Trenner zwischen Zellen via 1 px --line-Border-Bottom auf dem
     `.wpcf7-form-control-wrap` (greift auch unter dem letzten Feld als
     Trenner zum Submit-Bereich).
   - Submit als Orange Primary (Brand-Guide §7.1) am Boden, full-width,
     border-0, Hover-Invertierung auf body-ink/paper.

   CF7-Markup-Hinweis: pro `[text*]/[email*]/[textarea]`-Tag im CF7-
   Form-Template entsteht ein <p>-Wrapper mit `<label>` + `<span class=
   "wpcf7-form-control-wrap" data-name="...">`. Das CSS hängt am
   `.wpcf7-form-control-wrap` als visueller Zell-Anker, nicht am <p>,
   damit das Styling robust ist gegen Variationen im Form-Template
   (Leerzeilen vs. keine Leerzeilen → CF7 wraps unterschiedlich).

   Pflicht-Marker (Stern *) müssen textuell im CF7-Form-Template stehen
   ("Name *" usw.), CF7 setzt keinen Marker im Markup. Optional kann
   eine `.pattern-formular-kontakt__req`-Klasse manuell um den Stern
   gewickelt werden, dann färbt 21.3 ihn signal-orange.

   DSGVO-Hinweis steht aktuell als statischer mono-label-Paragraph
   außerhalb des Forms (Page 129). 21.10 hält Acceptance-Styles
   defensiv vor, falls Johannes später `[acceptance]` ins Form rückt.
   ============================================================ */

/* ----- 21.1 · Form-Container und Hidden-Fieldset ----- */

.wpcf7-form.pattern-formular-kontakt__form {
	margin: 0;
	border: 1px solid var(--wp--preset--color--body-ink);
	background-color: transparent;
}

.wpcf7-form.pattern-formular-kontakt__form .hidden-fields-container {
	display: none;
}

/* ----- 21.2 · <p>-Wrapper neutralisieren -----

   §19.3 setzt margin auf <p> innerhalb von body.page .entry-content via
   :where(...) (Spezifität 0,0,0). Hier override mit (0,2,1) — die <p>-
   Wrapper werden visuell unsichtbar und die `.wpcf7-form-control-wrap`-
   Elemente tragen direkt das Layout. */

.wpcf7-form.pattern-formular-kontakt__form > p {
	margin: 0;
	padding: 0;
}

.wpcf7-form.pattern-formular-kontakt__form > p > br {
	display: none;
}

/* ----- 21.3 · Field-Cell (Label + Form-Control-Wrap) -----

   Jedes [text*]/[email*]/[textarea]-Feld rendert als
   <label>...</label><span class="wpcf7-form-control-wrap" data-name="...">
   <input/textarea ...></span>. Label und Wrap sind im selben <p> und
   bilden zusammen die visuelle Zelle. Trenner zwischen Zellen via
   border-bottom auf dem .wpcf7-form-control-wrap. */

.wpcf7-form.pattern-formular-kontakt__form label {
	display: block;
	padding: 14px 20px 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: rgba(15, 22, 32, 0.55);
}

.wpcf7-form.pattern-formular-kontakt__form label .pattern-formular-kontakt__req {
	color: var(--wp--preset--color--signal);
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control-wrap {
	display: block;
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
	min-width: 0;
}

/* ----- 21.4 · Text- und Email-Inputs ----- */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-text,
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-email {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.4;
	padding: 4px 20px 14px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-ink);
	border-radius: 0;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	display: block;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-text::placeholder,
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-email::placeholder {
	color: rgba(15, 22, 32, 0.45);
	opacity: 1;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-text:focus-visible,
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-email:focus-visible {
	background-color: var(--wp--preset--color--paper-shadow);
	outline: 0;
}

/* ----- 21.5 · Textarea ----- */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-textarea {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	line-height: 1.5;
	padding: 4px 20px 16px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-ink);
	border-radius: 0;
	outline: none;
	width: 100%;
	min-height: 8em;
	resize: vertical;
	box-sizing: border-box;
	display: block;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-textarea::placeholder {
	color: rgba(15, 22, 32, 0.45);
	opacity: 1;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-textarea:focus-visible {
	background-color: var(--wp--preset--color--paper-shadow);
	outline: 0;
}

/* ----- 21.6 · Submit-Button (Orange Primary, Brand-Guide §7.1) -----

   Voll-Breite Orange am Boden, Mono-Caps-Label auf Deep Ink. Hover
   invertiert die Farben (body-ink BG, paper Text) — Brand-Guide §7.1
   erlaubt Farb-Invertierung als einzige Hover-Variante neben Underline.
   Der :focus-visible-Outline greift in body-ink, weil Signal-on-Signal
   aus §3 nicht sichtbar wäre. Pfeil und `// `-Prefix sind nicht im CSS
   — sie kommen optional aus dem CF7-Submit-Value (`[submit "→ ..."]`).
*/

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-submit {
	display: block;
	width: 100%;
	border: 0;
	background-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--deep-ink);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 18px var(--wp--preset--spacing--lg);
	cursor: pointer;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--paper);
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--body-ink);
	outline-offset: -2px;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ----- 21.7 · AJAX-Spinner — Idle versteckt, Submit-State als Mono-Caption ----- */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-spinner {
	display: none;
}

.wpcf7-form.pattern-formular-kontakt__form.submitting .wpcf7-spinner {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--paper);
	color: rgba(15, 22, 32, 0.55);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	text-align: center;
}

.wpcf7-form.pattern-formular-kontakt__form.submitting .wpcf7-spinner::before {
	content: "// wird gesendet…";
}

/* ----- 21.8 · Response-Output (AJAX-Status-Meldung) ----- */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-response-output {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.6;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--paper-shadow);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--body-ink);
	color: var(--wp--preset--color--body-ink);
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-response-output:empty,
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.wpcf7-form.pattern-formular-kontakt__form.sent .wpcf7-response-output {
	border-left-color: #3E7C5E;
}

.wpcf7-form.pattern-formular-kontakt__form.invalid .wpcf7-response-output,
.wpcf7-form.pattern-formular-kontakt__form.failed .wpcf7-response-output,
.wpcf7-form.pattern-formular-kontakt__form.spam .wpcf7-response-output,
.wpcf7-form.pattern-formular-kontakt__form.aborted .wpcf7-response-output,
.wpcf7-form.pattern-formular-kontakt__form.unaccepted .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}

/* ----- 21.9 · Validation-Tip (inline am Feld) ----- */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-not-valid-tip {
	display: block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0;
	padding: 6px 20px 10px;
	border-left: 2px solid var(--wp--preset--color--signal);
	line-height: 1.6;
}

/* ----- 21.10 · Acceptance-Checkbox (Future-Use) -----

   Aktuelle Form 24 hat keine Acceptance konfiguriert (DSGVO-Hinweis
   steht statisch außerhalb). Diese Regeln greifen automatisch, falls
   Johannes später ein Opt-in-Feld per [acceptance]-Tag dazunimmt. */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-acceptance {
	display: block;
	padding: 14px 20px;
	border-bottom: 1px solid rgba(15, 22, 32, 0.18);
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance label {
	display: contents;
	padding: 0;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--signal);
	cursor: pointer;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance .wpcf7-list-item-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--wp--preset--color--body-ink);
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance a {
	color: var(--wp--preset--color--body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-acceptance a:hover {
	color: var(--wp--preset--color--signal);
}

/* ----- 21.11 · Honeypot-Wraps (Future-Use, CF7-Apps-Plugin) -----

   Plugin ist aktiv (siehe tech-context/01-stack.md), aber in Form 24
   aktuell nicht eingesetzt. Defensive Selektoren — falls später
   [honeypot]-Tag dazukommt, wird das versteckte Feld automatisch aus
   dem Layout-Flow genommen. */

.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control-wrap[data-name^="honeypot"],
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control-wrap[data-name^="hp-"],
.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-honeypot {
	display: none !important;
	border-bottom: 0 !important;
}

/* ----- 21.12 · Mobile (≤800px) — Padding-Trim, Layout bleibt vertikal ----- */

@media (max-width: 800px) {
	.wpcf7-form.pattern-formular-kontakt__form label {
		padding: 12px 16px 0;
	}
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-text,
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-email {
		padding: 4px 16px 12px;
	}
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-textarea {
		padding: 4px 16px 14px;
	}
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-submit {
		padding: 16px var(--wp--preset--spacing--md);
	}
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-form-control.wpcf7-acceptance {
		padding: 12px 16px;
	}
	.wpcf7-form.pattern-formular-kontakt__form .wpcf7-not-valid-tip {
		padding: 6px 16px 8px;
	}
}