/*
Theme Name: lightzins-2026
Author: Banana One
Description: Block-Theme (Full Site Editing) für die Unternehmenswebsite der Lightzins eG. Verbindliche Gestaltungswerte: DESIGN.md im Projektstamm.
Version: 0.1
Requires at least: 6.9
Requires PHP: 8.3
License: proprietary
Text Domain: www.lightzins.de
*/

/* ==========================================================================
   Komponenten-CSS für Elemente, die theme.json nicht abbilden kann.
   Alle Werte sind Referenzen auf Presets/Custom-Variablen aus theme.json;
   die Zuordnung DESIGN.md → theme.json ist in
   .agent/context/2026-09-05_18-58_block-theme-umsetzung.md dokumentiert.
   Ausnahmen (bewusst, nicht erfunden):
   - Schatten unten bei Karten/Boxen: wartet auf Tokenisierung in DESIGN.md 0.11.
   - Breakpoints 600/800/900/1024 px: CSS erlaubt keine Variablen in
     Media Queries (DESIGN.md §8, „Breakpoints").
   - #000 in der Hero-Maske: Deckkraft, kein Gestaltungswert (DESIGN.md §8).
   ========================================================================== */

/* --- Schriften (DESIGN.md §7: Roboto, lokal ausgeliefert, kein externer
   Request) ---------------------------------------------------------------
   Die Woff2 liegen unter assets/fonts/ — Schriften sind die ausdrückliche
   Ausnahme der Medienregel (AGENTS.md 7). Relative Pfade vom Theme-Root. */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( ./assets/fonts/roboto-regular.woff2 ) format( 'woff2' );
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url( ./assets/fonts/roboto-medium.woff2 ) format( 'woff2' );
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( ./assets/fonts/roboto-bold.woff2 ) format( 'woff2' );
}

/* --- Basis: Typo-Feinschliff (1.2, 1.3) -----------------------------------
   Die Fließtext-Größen und -Gewichte stehen in theme.json. Ergänzt wird nur,
   was dort keinen Platz hat: Akzentwort, Textbausteine, Fließmaß. */

/* Abstandsskala mobil (DESIGN.md 0.18, §8): unter 600 px sinken die drei
   großen Stufen um je eine Stufe — xl 48 → 32, 2xl 64 → 48, 3xl 96 → 64.
   Die Presets behalten Namen und Rolle, nur der Wert wechselt. Die mobilen
   Werte stehen in theme.json (custom.spacingMobile) — ein Verweis der
   Presets aufeinander ginge nicht, CSS löste ihn mit dem bereits gesenkten
   Wert auf. Wirkt auf jede Verwendung, auch auf Blockmarkup mit Presets. */
@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--70: var(--wp--custom--spacing-mobile--70);
		--wp--preset--spacing--80: var(--wp--custom--spacing-mobile--80);
		--wp--preset--spacing--90: var(--wp--custom--spacing-mobile--90);
	}
}

/* Notbremse für lange Komposita („Nachlassregulierungsservice"): ein Wort,
   das breiter ist als die Zeile, bricht um, statt die Seite auf dem Handy
   seitlich scrollbar zu machen. break-word statt anywhere, damit die
   Mindestbreite von Tabellenspalten unberührt bleibt. */
.wp-site-blocks {
	overflow-wrap: break-word;
}

/* Vertikaler Rhythmus (DESIGN.md §8): Überschrift steht näher am Text,
   den sie einleitet, als an dem, der ihr vorausgeht (~3:1).
   :root hebt die Spezifität auf (0,1,1) — Core setzt über
   ":root :where(.is-layout-flow) > *" jeden Kinder-Block auf
   margin-block-end 0 (0,1,0) und würde die Rhythmus-Werte sonst
   löschen. Redaktionelle Einzelwerte im Editor bleiben möglich. */
:root :where(main) :is(h1) { margin: 0 0 var(--wp--preset--spacing--50); }
:root :where(main) :is(h2) { margin: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--40); }
:root :where(main) :is(h3) { margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--30); }
:root :where(main) :is(h4) { margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--20); }
:root :where(main) :is(h1, h2, h3, h4):first-child { margin-top: 0; }

/* Erste Überschrift in einem Container bekommt keinen Vorabstand;
    gilt ebenso in Gruppen und Spalten des Site-Editors. */
:root :where(.wp-block-group, .wp-block-column, .is-layout-constrained, .wp-block-quote) > :is(h1, h2, h3, h4):first-child {
	margin-top: 0;
}

.is-style-accent-word {
	color: var(--wp--preset--color--accent);
}

.is-style-lead {
	line-height: var(--wp--custom--line-height--lead);
}

/* Listen im Fließtext (1.6): Einzug --cst-list-indent (DESIGN.md 0.17) statt
   des Browser-Standards. :where hält die Regel bei Spezifität 0,0,1, damit
   Listen mit eigener Regel (Kernaussagen, Inhaltsverzeichnis, Quellen)
   ihren Einzug behalten. */
:where(.is-style-prose, .entry-content) :is(ul, ol) {
	padding-inline-start: var(--wp--custom--list-indent);
}

/* Kurzantwort (4.24, DESIGN.md 0.16): beantwortet die Frage der H1 in ein
   bis zwei Sätzen. Schrift des Leads, links ein grüner Strich, damit sie
   nicht als Lead gelesen wird; Breite wie die H1. */
.is-style-short-answer {
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
	color: var(--wp--preset--color--contrast);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: var(--wp--custom--border-width--strong) solid var(--wp--preset--color--accent);
}

/* Lead-Zeilenhöhe (DESIGN.md §7, --cst-lh-lead, 0.11): die Seite setzt
   Leads über die Preset-Klasse has-lead-font-size — core erzeugt daraus
   nur die Schriftgröße, nicht die Zeilenhöhe. */
:where(p).has-lead-font-size {
	line-height: var(--wp--custom--line-height--lead);
}

/* Vorzeile und Überschrift bilden eine Einheit (DESIGN.md §8): kein
   trennender Vorabstand der Überschrift. */
.is-style-eyebrow + :is(h1, h2, h3, h4) {
	margin-top: 0;
}

/* Bild mit Schlagschatten wie .cst-figure im Entwurf; wartet mit auf
   die Schatten-Tokenisierung in DESIGN.md 0.11. */
.wp-block-image.is-style-figure-shadow img {
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
}

.is-style-section-intro {
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--70);
	text-wrap: pretty;
}

/* Fließmaß 68ch für Textspalten (DESIGN.md §7). */
.is-style-prose {
	max-width: var(--wp--custom--measure);
}

/* USP-Titel und -Text (2.28). */
.is-style-usp-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--font-weight--heading);
	font-size: var(--wp--preset--font-size--body-l);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.is-style-usp-text {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.5;
	margin: 0;
}

.is-style-usp-list svg {
	width: var(--wp--custom--icon-size--l);
	height: var(--wp--custom--icon-size--l);
	flex: none;
	stroke: var(--wp--preset--color--accent);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Sektionen (Seitengerüst, 2.25–2.31) ---------------------------------- */

/* Vollbreite Sektionen: das Theme arbeitet ohne root-padding-aware
   alignments (Sonst würde der Post-Content-Wrapper die Sektionen auf
   contentSize verengen). Der seitliche Abstand --cst-gutter liegt seit
   DESIGN.md 0.11 innerhalb der Box — Sektionen und Vollbreiten-Bar
   (Header, Infoleiste, Footer) laufen randlos, ihre inneren Container
   begrenzen auf 1180/760 px Boxbreite einschließlich Gutter. */

/* Flow-Layout margins zwischen Sektionen aus: der vertikale Rhythmus
   gehört in die Sektions-Polsterung, nicht in Abstände dazwischen —
   sonst entstehen weiße Streifen zwischen cremefarbenen Sektionen. */
.is-style-hero,
.is-style-section,
.is-style-section-cream,
.is-style-info-bar,
.is-style-article-head {
	margin-block: 0;
}

/* Core setzt jede Template-Ebene unter .wp-site-blocks (main, footer)
   mit margin-block-start spacing-50. Das soll hier nicht: der Abstand
   oberhalb von main würde als weißer Streifen zwischen Header und Hero
   sichtbar, der Abstand vor dem footer ist durch die Padding-Polsterung
   der letzten Sektion und die_margin-top_ der Übergangslinien gedeckt. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Abstand zwischen Seitenkopf und Content (64 px, spacing--80): sichert
   den Rhythmus, wenn der Content ohne Sektion beginnt (z. B. reiner
   Absatzinhalt auf Platzhalter-Seiten). Startet der Content mit einer
   gepolsterten Sektion, trägt diese den Abstand bereits über ihr eigenes
   padding-block — der Abstand von main fällt dann weg, sonst addiert er
   sich zur Sektionspolsterung und wird doppelt. */
.lzc-page-main {
	padding-top: var(--wp--preset--spacing--80);
}

.lzc-page-main:has(> .entry-content > .is-style-section:first-child),
.lzc-page-main:has(> .entry-content > .is-style-section-cream:first-child) {
	padding-top: 0;
}

/* Seiten ohne Vollbreiten-Template (index & Co.): Seitenrand sichern,
   nachdem das body-Padding entfallen ist. Vollbreite Sektionen ausnehmen —
   ihren Seitenrand führen die inneren Container selbst; sonst zweifach.
   Nur für den Inhalt direkt in main: steht er in einem Container (Beitrag,
   single.html), trägt der Container den Seitenrand bereits. */
body:not(.home) main > .entry-content.is-layout-constrained > :not(.alignfull) {
	padding-inline: var(--wp--custom--layout--gutter);
}

.is-style-section {
	padding-block: var(--wp--preset--spacing--80);
}

.is-style-section-cream {
	background-color: var(--wp--preset--color--base-alt);
	padding-block: var(--wp--preset--spacing--80);
}

/* Innerer Container: 1180 px Boxbreite einschließlich Gutter
   (DESIGN.md §8, Layoutbreiten, 0.11) — Contentbreite 1140 px. */
.is-style-container > .wp-block-group__inner-container,
.wp-block-group.is-style-container {
	width: 100%;
	max-width: var(--wp--custom--layout--container);
	padding-inline: var(--wp--custom--layout--gutter);
	margin-inline: auto;
}

.is-style-container-narrow > .wp-block-group__inner-container,
.wp-block-group.is-style-container-narrow {
	width: 100%;
	max-width: var(--wp--custom--layout--container-narrow);
	padding-inline: var(--wp--custom--layout--gutter);
	margin-inline: auto;
}

/* Zentriertes Sektionsintro (2.29). */
.is-style-sectionintro {
	text-align: center;
}

/* Vorzeile (Eyebrow, 2.27): bildet mit der folgenden Überschrift eine
   Einheit — kein trennender Abstand dazwischen (DESIGN.md §8,
   „Vertikaler Rhythmus"). */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* --- Header (2.25) --------------------------------------------------------- */

.is-style-site-header {
	background-color: var(--wp--preset--color--base);
	position: sticky;
	top: 0;
	z-index: 40;
	box-shadow: var(--wp--preset--shadow--header);
}

/* .cst-header__inner aus dem Entwurf: Zeile mit Logo links,
   Navigation rechts, Mindesthöhe 84px (68px unter 1024px).
   Boxbreite 1180 px inkl. Gutter (DESIGN.md §8, 0.11). */
.is-style-header-inner {
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-height: var(--wp--custom--header--height);
	max-width: var(--wp--custom--layout--container);
	padding-inline: var(--wp--custom--layout--gutter);
	margin-inline: auto;
	width: 100%;
}

/* flex: none — sonst staucht die Leiste das Logo auf schmaler Breite
   (Seitenverhältnis bricht, wie .cst-logo im Entwurf). */
.is-style-site-header .wp-block-site-logo {
	flex: none;
}

.is-style-site-header .wp-block-site-logo img {
	height: var(--wp--custom--header--logo-height);
	width: auto;
}

.is-style-site-header .wp-block-navigation {
	margin-left: auto;
}

/* Menüpunkte: gedämpfte Schrift, keine Unterstreichung; aktueller Punkt
   grün mit 2px-Linie (DESIGN.md §8, border-width-strong). Buttons im
   Navigationblock ausgenommen — sie tragen ihre eigene Optik.
   Nachfahren- statt Kind-Combinator: eine automatische Seitenliste
   liegt als weiteres <ul class="wp-block-page-list"> zwischen
   Container und Listenpunkt. */
.is-style-site-header .wp-block-navigation__container .wp-block-navigation-item__content:not(.wp-block-button__link) {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--ui);
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--border-width--strong) solid transparent;
}

.is-style-site-header .wp-block-navigation__container .wp-block-navigation-item__content:not(.wp-block-button__link):hover,
.is-style-site-header .wp-block-navigation__container .wp-block-navigation-item.is-current-item > .wp-block-navigation-item__content:not(.wp-block-button__link),
.is-style-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:not(.wp-block-button__link),
.is-style-site-header .wp-block-navigation-item__content[aria-current="page"]:not(.wp-block-button__link) {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.is-style-site-header .wp-block-buttons {
	margin-left: var(--wp--preset--spacing--40);
	flex: none;
}

@media (max-width: 1024px) {
	.is-style-header-inner {
		min-height: var(--wp--custom--header--height-compact);
	}
	.is-style-site-header .wp-block-site-logo img {
		height: var(--wp--custom--header--logo-height-compact);
	}
}

/* --- Mobiles Menü (2.26) ----------------------------------------------------
   Unter 1024 px wie im Entwurf: Hamburger rechts in der Leiste, der Button
   wandert ins aufgeklappte Menü, das als Panel unter dem Header aufklappt
   (nicht als Vollbild). Core schaltet erst unter 600 px um; die Regeln
   hier ziehen die Grenze auf 1024 px (DESIGN.md §8, Breakpoints).
   Inhalt des Panels: parts/navigation-overlay.html (Navigation + Button). */

.is-style-nav-overlay {
	padding: var(--wp--preset--spacing--40) var(--wp--custom--layout--gutter) var(--wp--preset--spacing--50);
}

/* Die Navigation im Panel nimmt die volle Breite ein; margin-left: auto
   der Leistennavigation gilt hier nicht. */
.is-style-site-header .is-style-nav-overlay .wp-block-navigation {
	margin-left: 0;
}

.is-style-nav-overlay .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}

.is-style-nav-overlay .wp-block-navigation-item {
	display: block;
}

/* Gleiche Spezifität wie die Menüpunkt-Regel des Headers, steht danach;
   Hover und aktueller Punkt färben Schrift und Linie weiter grün. */
.is-style-site-header .is-style-nav-overlay .wp-block-navigation-item__content:not(.wp-block-button__link) {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
}

.is-style-site-header .is-style-nav-overlay .wp-block-buttons {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.is-style-site-header .wp-block-navigation__responsive-container-open,
.is-style-site-header .wp-block-navigation__responsive-container-close {
	padding: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent);
}

.is-style-site-header .wp-block-navigation__responsive-container-open svg,
.is-style-site-header .wp-block-navigation__responsive-container-close svg {
	width: var(--wp--custom--icon-size--m);
	height: var(--wp--custom--icon-size--m);
}

@media (max-width: 1024px) {
	.is-style-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.is-style-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.is-style-header-inner > .wp-block-buttons {
		display: none;
	}

	/* Bezugsrahmen des Panels ist der sticky Header: Navigation und Dialog
	   geben ihre Positionierung ab. */
	.is-style-site-header .wp-block-navigation,
	.is-style-site-header .wp-block-navigation__responsive-dialog {
		position: static;
	}

	/* overflow: visible, damit der Schließen-Knopf oberhalb des Panels
	   sichtbar bleibt; gescrollt wird im Inhalt. animation: none — die
	   Core-Animation hinterlässt ein transform. */
	.is-style-site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		overflow: visible;
		animation: none;
		background-color: var(--wp--preset--color--base);
		border-bottom: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
		box-shadow: var(--wp--preset--shadow--card);
	}

	.is-style-site-header .wp-block-navigation__overlay-container {
		max-height: calc(100dvh - var(--wp--custom--header--height-compact));
		overflow-y: auto;
	}

	/* Schließen-Knopf genau an der Stelle des Hamburgers: Leiste mittig,
	   rechts auf dem Gutter. */
	.is-style-site-header .wp-block-navigation__responsive-container-close {
		top: calc(-1 * (var(--wp--custom--header--height-compact) + var(--wp--custom--icon-size--m) + 2 * var(--wp--preset--spacing--20)) / 2);
		right: var(--wp--custom--layout--gutter);
		background-color: var(--wp--preset--color--base);
	}
}

/* --- Hero (2.27) ------------------------------------------------------------
   Zweispaltig: Text links im Container, Bild rechts bis zum Fensterrand,
   nach links in die Cremefläche auslaufend. Auslauf über eine Maske, nicht
   in der Bilddatei (DESIGN.md §8, „Seitengerüst"). */

.is-style-hero {
	background-color: var(--wp--preset--color--base-alt);
	position: relative;
	z-index: 1;
	box-shadow: var(--wp--preset--shadow--hero);
}

/* Vierspaltenraster wie im Entwurf: die äußeren Spalten übernehmen die
   Zentrierung des Seitencontainers, die inneren entsprechen seinen
   Hälften. Text in Spalte 2, Bild von Spalte 3 bis zum rechten
   Bildschirmrand. Ohne vw — die schließen die Scrollleiste ein. */
.is-style-hero .wp-block-columns {
	display: grid;
	grid-template-columns:
		minmax(var(--wp--custom--layout--gutter), 1fr)
		minmax(0, calc((var(--wp--custom--layout--container) - 2 * var(--wp--custom--layout--gutter)) / 2))
		minmax(0, calc((var(--wp--custom--layout--container) - 2 * var(--wp--custom--layout--gutter)) / 2))
		minmax(var(--wp--custom--layout--gutter), 1fr);
	align-items: center;
	min-height: var(--wp--custom--hero--min-height);
	gap: 0;
	margin: 0;
	width: 100%;
}

.is-style-hero .wp-block-columns > .wp-block-column:first-child {
	grid-column: 2;
	padding-block: var(--wp--preset--spacing--80);
	padding-inline-end: var(--wp--preset--spacing--80);
	flex-basis: auto;
	width: auto;
	min-width: 0;
}

.is-style-hero .wp-block-columns > .wp-block-column:last-child {
	grid-column: 3 / -1;
	align-self: stretch;
	min-height: var(--wp--custom--hero--media-min-height);
	flex-basis: auto;
	width: auto;
	min-width: 0;
}

.is-style-hero .wp-block-image {
	margin: 0;
	height: 100%;
}

.is-style-hero .wp-block-image img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: right center;
	border-radius: 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wp--custom--hero--mask-start));
	        mask-image: linear-gradient(to right, transparent 0, #000 var(--wp--custom--hero--mask-start));
}

/* Unter 900 px eine Spalte wie .cst-hero__inner im Entwurf: Text mit
   Gutter, Bild darunter. Die Bildspalte ist selbst ein Raster, damit das
   Bild ihre Mindesthöhe ausfüllt (height: 100 % greift bei min-height
   allein nicht). */
@media (max-width: 900px) {
	.is-style-hero .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.is-style-hero .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1;
		padding: var(--wp--preset--spacing--70) var(--wp--custom--layout--gutter);
	}
	.is-style-hero .wp-block-columns > .wp-block-column:last-child {
		grid-column: 1;
		display: grid;
		min-height: var(--wp--custom--hero--media-min-height-compact);
	}
	/* Am Handy steht das Bild unter dem Text — ein Auslauf nach links
	   wäre dort sinnlos. */
	.is-style-hero .wp-block-image img {
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* --- Icon-USP-Leiste (2.28) --------------------------------------------------
   Drei Spalten mit vertikalen Trennern; unter 900 px eine Spalte mit
   horizontalen Trennern. */

.is-style-usp-list {
	gap: 0;
	align-items: stretch;
}

.is-style-usp-list > .wp-block-column {
	border-left: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	padding-inline: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
	flex-basis: 0 !important;
	gap: var(--wp--preset--spacing--40);
}

.is-style-usp-list > .wp-block-column:first-child {
	border-left: 0;
	padding-left: 0;
}

.is-style-usp-list > .wp-block-column:last-child {
	padding-right: 0;
}

@media (max-width: 900px) {
	.is-style-usp-list {
		flex-direction: column;
	}
	.is-style-usp-list > .wp-block-column {
		border-left: 0;
		border-top: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
		padding: var(--wp--preset--spacing--50) 0;
	}
	.is-style-usp-list > .wp-block-column:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.is-style-usp-list > .wp-block-column:last-child {
		padding-bottom: 0;
	}
}

/* --- Infoleiste (2.31) -------------------------------------------------------- */

.is-style-info-bar {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--text-invert);
	font-size: var(--wp--preset--font-size--ui);
	padding-block: var(--wp--preset--spacing--40);
	/* die Leiste ist selbst der Flex-Container (kein innerer Container im
	   Markup) — ohne Gutter läuft eine lange Zeile am Handy bis an den Rand. */
	padding-inline: var(--wp--custom--layout--gutter);
}

.is-style-info-bar > .wp-block-group__inner-container {
	max-width: var(--wp--custom--layout--container);
	padding-inline: var(--wp--custom--layout--gutter);
	margin-inline: auto;
	width: 100%;
}

.is-style-info-bar .wp-block-group {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

.is-style-info-bar a,
.is-style-info-bar p {
	color: var(--wp--custom--color--text-invert);
}

.is-style-info-bar svg {
	width: var(--wp--custom--icon-size--s);
	height: var(--wp--custom--icon-size--s);
	flex: none;
	stroke: currentcolor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Buttons (1.8–1.11) --------------------------------------------------------
   Grundoptik, Hover und Fokus stehen in theme.json (elements.button).
   Hier nur, was theme.json nicht kann: Mindesthöhen, Icon-Abstand,
   Sekundär-/Tertiärvariante, Zustand „auf grüner Fläche". */

/* Gemeinsame Basis .cst-btn aus dem Entwurf: inline-flex mit 8 px
   Abstand zwischen Text und Icon/Pfeil (DESIGN.md §8, Icon-Abstand). */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-primary a.wp-block-button__link:visited {
	min-height: var(--wp--custom--button--min-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-secondary a.wp-block-button__link:visited {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--accent-dark);
	min-height: var(--wp--custom--button--min-height);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--custom--color--accent-dark);
}

.wp-block-button.is-style-tertiary .wp-block-button__link,
.wp-block-button.is-style-tertiary a.wp-block-button__link:visited {
	background: transparent;
	border-color: transparent;
	color: var(--wp--custom--color--accent-dark);
	padding-inline: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--button--min-height);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wp-block-button.is-style-tertiary .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-button-s .wp-block-button__link {
	min-height: var(--wp--custom--button--min-height-s);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-s);
}

.wp-block-button.is-style-button-l .wp-block-button__link {
	min-height: var(--wp--custom--button--min-height-l);
}

/* --- Karten (2.13), Teaser der Leistungssektion ------------------------------
   Der Bordschatten ist der Wert aus den Entwürfen; er wartet auf seine
   Tokenisierung in DESIGN.md 0.11 (Arbeitsgang „Literale auflösen"). */

.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--default);
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
	overflow: hidden;
}

.wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.is-style-card .wp-block-group.is-style-card-media {
	aspect-ratio: 16 / 10;
	background-color: var(--wp--preset--color--base-alt);
	padding: 0;
}

.is-style-card .is-style-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.is-style-card .wp-block-heading {
	font-size: 1.2rem;
	margin: 0;
}

.is-style-card .wp-block-group.is-style-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50);
	flex: 1;
}

.is-style-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

.is-style-card .wp-block-image {
	margin: 0;
	height: 100%;
}

.is-style-card .is-style-card-body > p {
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

/* Vorzeile auf der Karte („Leistung", „Ratgeber"). */
.is-style-card-eyebrow {
	font-size: .8rem; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	font-weight: var(--wp--custom--font-weight--bold);
	text-transform: uppercase;
	letter-spacing: .08em; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

/* --- Highlightbox (2.11) -------------------------------------------------------- */

:is(.wp-block-group.is-style-highlight-box, .wp-block-group.is-style-highlight-box-warning, .wp-block-group.is-style-highlight-box-tip) {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--60);
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
}

:is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip) .wp-block-group.is-style-box-head {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Der Boxtitel ist eine echte H4 — ihre Größe kommt aus theme.json.
   Zeilenhöhe 1,3 wie .cst-box__title im Entwurf; wartet auf Token in
   DESIGN.md 0.11 (§10, Literale). */
:is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip) .wp-block-heading {
	margin: 0;
	line-height: 1.3;
}

:is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip) svg {
	width: 34px;
	height: 34px;
	flex: none;
	stroke: var(--wp--preset--color--accent);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Variante „Häufiger Irrtum": Icon und Titel in Rostrot (Statusfarbe,
   DESIGN.md §5 — als Signal, nie als Gestaltungsmittel). */
.wp-block-group.is-style-highlight-box-warning svg {
	stroke: var(--wp--custom--color--warning);
}

.wp-block-group.is-style-highlight-box-warning .wp-block-heading {
	color: var(--wp--custom--color--warning);
}

/* --- Kundenstimme (2.17) ----------------------------------------------------------
   Karte mit großem, halbtransparentem Anführungszeichen unten rechts.
   Wrapper trägt die Karte, damit das Zeichen (absolutes SVG) relativ
   verankert ist; der Zitatblock selbst bleibt ungestylt. */

.is-style-testimonial-card {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--60);
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
}

.is-style-testimonial-card > .wp-block-quote {
	border: none;
	box-shadow: none;
	background: none;
	padding: 0;
	margin: 0;
}

.is-style-testimonial-card > *:not(.is-style-quote-mark) {
	position: relative;
	z-index: 1;
}

.is-style-testimonial-card .wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	line-height: 1.45;
	margin: 0;
}

/* Anführungszeichen: CI-Rot mit 14 % Deckkraft (DESIGN.md §6). */
.is-style-quote-mark {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--20);
	width: 140px;
	height: auto;
	fill: var(--wp--preset--color--secondary);
	opacity: .14;
	z-index: 0;
	pointer-events: none;
	margin: 0;
}

.is-style-testimonial-card cite {
	display: block;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-s);
	font-style: normal;
	color: var(--wp--preset--color--contrast-muted);
}

.is-style-rating-stars {
	color: var(--wp--preset--color--secondary);
	letter-spacing: .12em;
}

.is-style-testimonial-src {
	font-size: .85rem; /* wartet auf Tokens in DESIGN.md 0.11 */
	color: var(--wp--preset--color--contrast-muted);
}

/* --- CTA-Block (2.23) -------------------------------------------------------------
   „Auf grüner Fläche wird der Primärbutton weiß" (DESIGN.md §8, Buttons):
   ein grüner Button auf grüner Fläche verschwindet. */

.is-style-cta {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--text-invert);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--70);
}

.is-style-cta .wp-block-group__inner-container,
.is-style-cta.wp-block-group > .wp-block-heading,
.is-style-cta .wp-block-heading {
	color: var(--wp--custom--color--text-invert);
}

.is-style-cta p {
	opacity: .92;
}

/* .cst-cta :is(h2,h3) aus dem Entwurf: enger Abstand zum Text unter der
   Überschrift (8px), kein Vorabstand — die Box beginnt mit ihr. */
.is-style-cta .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.is-style-cta .wp-block-button.is-style-primary .wp-block-button__link {
	background: var(--wp--custom--color--text-invert);
	border-color: var(--wp--custom--color--text-invert);
	color: var(--wp--custom--color--accent-dark);
}

.is-style-cta .wp-block-button.is-style-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--custom--color--accent-dark);
}

/* --- Seitenkopf der Inhaltsseite (2.32) ---------------------------------------
    Creme-Fläche mit Breadcrumb (4.14), H1, Lead und CTA-Paar; sitzt im
    Template page.html, nicht im Seiteninhalt. Werte: DESIGN-styleguide-seite
    (.cst-article-head), Abstände aus DESIGN.md §8 „Vertikaler Rhythmus". */

.is-style-article-head {
	background-color: var(--wp--preset--color--base-alt);
	border-top: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-bottom: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--70);
}

.is-style-article-head .wp-block-post-title,
.is-style-article-head .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Der Excerpt-Block legt die Lead-Größe auf den Wrapper, der sichtbare Text
   sitzt im inneren p. Zeilenhöhe muss hier gesetzt werden — das Preset
   .has-lead-font-size gilt nur dem p, der Div erbt sie sonst nicht. */
.is-style-article-head .wp-block-post-excerpt {
	margin: 0 0 var(--wp--preset--spacing--50);
	line-height: var(--wp--custom--line-height--lead);
}

/* Der Lead im Seitenkopf ist der Excerpt-Block — er teilt Größe und
   Zeilenhöhe des Leads (has-lead-font-size, s. o.). */

/* Kurzantwort (4.24) im Beitragskopf, direkt unter der H1 (DESIGN.md 0.16):
   nach oben trägt der Abstand der H1 (24 px), nach unten der Absatzabstand
   (24 px) bis zur Meta-Zeile. */
.is-style-article-head .is-style-short-answer {
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Kernaussagen (4.6) im Beitragskopf, unter der Kurzantwort oder ohne sie
   direkt unter der H1 (DESIGN.md 0.14, 0.16): nach oben trägt der Abstand
   der H1 (24 px), nach unten der Abstand der Blockelemente (48 px) bis zur
   Meta-Zeile. */
.is-style-article-head .is-style-keypoints {
	margin: 0 0 var(--wp--preset--spacing--70);
}

/* Kurzantwort → Kernaussagen: Absatz → Blockelement, 48 px. */
.is-style-article-head .is-style-short-answer + .is-style-keypoints {
	margin-top: var(--wp--preset--spacing--70);
}

/* Breadcrumb (4.14): kleine gedämpfte Zeile direkt über der H1 — der
   Entwurf kennt dazwischen keinen Abstand. Abgetrennt durch „›". */
.lzc-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.lzc-breadcrumb li + li::before {
	content: "›";
	margin-right: var(--wp--preset--spacing--20);
}

/* --- Inhaltstypografie der Inhaltsseite --------------------------------------
    Sprungmarken der Inhaltsverzeichnis-Links nicht unter den sticky Header.
    100 px = Headerhöhe (84) + 16 px Luft, deshalb als Rechnung aus Tokens. */
main :is(h2, h3, h4) {
	scroll-margin-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--40));
}

/* Marker (Bullets und Ziffern) — projektweit grün, DESIGN.md §6. */
li::marker {
	color: var(--wp--custom--color--marker);
}

/* Definitionsliste (1.6) — kein Core-Block, liegt als rohes dl im Pattern. */
dl.lzc-deflist { margin: 0; }
dl.lzc-deflist dt {
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--custom--color--term);
	margin-top: var(--wp--preset--spacing--40);
}
dl.lzc-deflist dt:first-child { margin-top: 0; }
dl.lzc-deflist dd {
	margin: var(--wp--preset--spacing--10) 0 0;
	padding-left: 0;
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Beitragsbild (2.33) -------------------------------------------------------
    Bild am Anfang des Inhalts: volle Spaltenbreite, Rundung und Schatten
    wie .cst-article-media im Entwurf. */
.wp-block-image.is-style-article-media {
	margin-block: 0 var(--wp--preset--spacing--70);
}

.wp-block-image.is-style-article-media img,
.wp-block-image.is-style-figure-shadow img {
	width: 100%;
	height: auto;
}

/* --- Kernaussagen-Box „Das Wichtigste in Kürze" (4.6) --------------------------- */

.is-style-keypoints {
	background-color: var(--wp--preset--color--accent-light);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}

.is-style-keypoints-title {
	font-size: var(--wp--preset--font-size--ui);
	text-transform: uppercase;
	letter-spacing: .08em; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	color: var(--wp--custom--color--accent-dark);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.is-style-keypoints > ul {
	margin: 0;
	padding-left: 1.2em;
}

.is-style-keypoints li {
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--ui);
}

/* --- Inhaltsverzeichnis (4.15) -------------------------------------------------- */

.is-style-toc {
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--50);
}

.is-style-toc-title {
	font-size: var(--wp--preset--font-size--ui);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.is-style-toc ol {
	margin: 0;
	padding-left: 1.3em;
	font-size: var(--wp--preset--font-size--ui);
}

/* --- Prozess / Ablauf (2.21) -----------------------------------------------------
    Nummerierte Liste mit Schiene und grünen Zählmarken; counter ersetzt die
    Core-Nummerierung des Patterns (ordered-Liste ohne Core-Styles sichtbar). */

.is-style-steps {
	list-style: none;
	counter-reset: lzc-step;
	padding-left: 0;
}

.is-style-steps > li {
	counter-increment: lzc-step;
	position: relative;
	padding-left: 56px; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	padding-bottom: var(--wp--preset--spacing--50);
	border-left: var(--wp--custom--border-width--strong) solid var(--wp--preset--color--border);
	margin-left: 18px; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
}

.is-style-steps > li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.is-style-steps > li::before {
	content: counter(lzc-step);
	position: absolute;
	left: -19px; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	top: 0;
	width: 36px; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	height: 36px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--text-invert);
	display: grid;
	place-items: center;
	font-weight: var(--wp--custom--font-weight--bold);
	font-size: var(--wp--preset--font-size--ui);
}

.is-style-steps .wp-block-heading {
	margin: var(--wp--preset--spacing--10) 0;
}

.is-style-steps li > p:last-child {
	margin-bottom: 0;
}

/* --- FAQ, offene Darstellung (4.22) ----------------------------------------------
    Fragen und Antworten stehen vollständig im HTML; Trennlinien statt Karten. */

.is-style-faq > .wp-block-group {
	border-bottom: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--40);
}

.is-style-faq > .wp-block-group:first-child {
	border-top: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
}

.is-style-faq .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.is-style-faq p {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui);
}

/* --- Tabelle im Fließtext (2.15) ---------------------------------------------------
    Wrapper erlaubt seitliches Scrollen auf schmalen Geräten; Kopfzeile auf
    Hellgrün wie im Entwurf. */

.is-style-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--wp--preset--spacing--50);
}

.is-style-table-wrap .wp-block-table {
	margin: 0;
	/* core/table keeps its caption in a figcaption after the table. the design
	   shows it above the table (DESIGN.md 2.15), so the figure orders it back. */
	display: flex;
	flex-direction: column;
}

.is-style-table-wrap table {
	width: 100%;
	min-width: 480px; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	border-collapse: collapse;
}

.is-style-table-wrap figcaption {
	order: -1;
	text-align: left;
	font-weight: var(--wp--custom--font-weight--bold);
	padding-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* core/table draws a dark frame around every cell and a 3 px rule under the
   head row. the design has neither — only horizontal lines in the border
   colour (DESIGN.md 2.15) — so both are reset before the own lines are set. */
.is-style-table-wrap thead,
.is-style-table-wrap tfoot {
	border: 0;
}

.is-style-table-wrap th,
.is-style-table-wrap td {
	border: 0;
	border-bottom: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: top;
}

.is-style-table-wrap thead th {
	background-color: var(--wp--preset--color--accent-light);
	font-weight: var(--wp--custom--font-weight--bold);
	border-bottom-width: var(--wp--custom--border-width--strong);
}

.is-style-table-wrap tbody th[scope="row"] {
	font-weight: var(--wp--custom--font-weight--bold);
}

/* --- Ansprechpartner-Box (4.4) ------------------------------------------------------
    Porträt links, Name/Rolle/Chips/Buttons rechts; grüner Rahmen wie im
    Entwurf. Unter 800 px eine Spalte (Breakpoint, DESIGN.md §8). */

.is-style-contact-person {
	display: grid;
	grid-template-columns: 110px 1fr; /* 110 px: wartet auf Token, s. §10 */
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}

/* Im Raster übernimmt der gap den Abstand (DESIGN.md §8, „Vertikaler
   Rhythmus"); Außenabstände von Bild und Flow-Layout kämen sonst hinzu. */
.is-style-contact-person > .wp-block-image,
.is-style-contact-person > .wp-block-group {
	margin: 0;
}

.is-style-contact-person .wp-block-image img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--border);
}

.is-style-contact-person .wp-block-group {
	gap: var(--wp--preset--spacing--10);
}

/* Der Name steht fester als die fluiden H3 der Seite — 1.3rem wie im
   Entwurf; wartet auf Token in DESIGN.md 0.11 (§10, Literale). */
.is-style-contact-person .wp-block-heading {
	font-size: 1.3rem;
	margin: 0;
}

@media (max-width: 800px) {
	.is-style-contact-person {
		grid-template-columns: 1fr;
	}
	.is-style-contact-person .wp-block-image img {
		width: 96px; /* wartet auf Token, s. §10 */
		height: 96px;
	}
}

/* Chips (Qualifikationen in der Ansprechpartner-Box). */
.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.is-style-chips li {
	font-size: .85rem; /* wartet auf Token in DESIGN.md 0.11 (§10, Literale) */
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent-light);
	color: var(--wp--custom--color--accent-dark);
	font-weight: var(--wp--custom--font-weight--bold);
}

/* --- Highlightbox-Variante „Praxistipp" (2.11) --------------------------------------
    Wie die Info-Box, aber Titel und Icon in Arbeitsgrün. */

.is-style-highlight-box-tip .wp-block-heading {
	color: var(--wp--preset--color--accent);
}

/* --- Übergang zum Footer (5.8) ------------------------------------------------------
   Zwei Linien nach dem Vorbild des Logos. Ausrichtung am Textraster:
   Rot beginnt an der linken Textkante, Grün endet an der rechten.
   100 % statt 100vw — vw schließt die Scrollleiste ein. Das Theme arbeitet
   mit Root-Padding, deshalb plus dessen Breite. */

.is-style-footer-lines {
	/* Das Element liegt als direktes Body-Kind auf voller Viewportbreite;
	   100 % beziehen sich hier auf keine eingefasste Contentbox. */
	--lzc-text-edge: max(
		var(--wp--custom--layout--gutter),
		calc((100% - var(--wp--custom--layout--container)) / 2 + var(--wp--custom--layout--gutter))
	);
	position: relative;
	height: 8px;
	margin-top: var(--wp--preset--spacing--80);
	padding: 0;
	min-height: 0;
}

.is-style-footer-lines::before,
.is-style-footer-lines::after {
	content: "";
	position: absolute;
	height: 4px;
}

.is-style-footer-lines::before {
	top: 0;
	left: var(--lzc-text-edge);
	right: 0;
	background: var(--wp--preset--color--secondary);
	border-radius: 2px 0 0 2px;
}

.is-style-footer-lines::after {
	top: 4px;
	left: 0;
	right: var(--lzc-text-edge);
	background: var(--wp--preset--color--accent);
	border-radius: 0 2px 2px 0;
}

/* --- Footer (2.30) -------------------------------------------------------------------- */

.is-style-site-footer {
	background-color: var(--wp--custom--color--footer-bg);
	color: var(--wp--custom--color--footer-text);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--ui);
}

.is-style-site-footer > .wp-block-group__inner-container {
	max-width: var(--wp--custom--layout--container);
	padding-inline: var(--wp--custom--layout--gutter);
	margin-inline: auto;
	width: 100%;
}

.is-style-site-footer a {
	color: var(--wp--custom--color--text-invert);
}

/* Raster 1.4fr 1fr 1fr (DESIGN.md §8, --cst-footer-grid);
   unter 800px eine Spalte. */
.is-style-footer-grid {
	display: grid;
	grid-template-columns: var(--wp--custom--footer--grid);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 800px) {
	.is-style-footer-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.is-style-footer-heading,
.is-style-site-footer .is-style-footer-heading .wp-block-site-title,
.is-style-site-footer .is-style-footer-heading:is(h1, h2, h3, h4, p) {
	color: var(--wp--custom--color--text-invert);
	font-size: var(--wp--preset--font-size--body-l);
	margin-bottom: var(--wp--preset--spacing--40);
}

.is-style-site-footer ul {
	list-style: none;
	padding-left: 0;
}

.is-style-site-footer ul li {
	margin-bottom: var(--wp--preset--spacing--20);
}

.is-style-nap {
	font-style: normal;
	line-height: 1.7;
}

.is-style-footer-bottom {
	border-top: var(--wp--custom--border-width--default) solid var(--wp--custom--color--footer-divider);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--small);
}

.is-style-footer-bottom > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	justify-content: space-between;
	align-items: baseline;
}

.is-style-footer-bottom ul {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.is-style-footer-bottom li + li::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--20);
}

/* --- Globaler Fokusring (DESIGN.md §8, „Fokus": Pflicht, ohne Ausnahme) -----
   theme.json deckt nur elements.link und elements.button ab; für
   Formularfelder, summary und tabindex-Elemente ist diese Regel die
   begründete CSS-Ausnahme. Bewusst ohne border-radius: der Ring übernimmt
   die Eckenform des Elements. !important, weil Core-Fokusstile
   (z. B. im Buttons-Block) sonst spezifischer wären. */

:where(a, button, input, select, textarea, summary, [href], [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent) !important;
	outline-offset: var(--wp--custom--focus--offset) !important;
	box-shadow: none !important;
}

/* Skip-Link (DESIGN.md §8 „Fokus"): liegt außerhalb des Bildschirms und
   erscheint bei Fokus oben links. Klasse am rohen <a> im Header-Part. */
.lzc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--text-invert);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	z-index: 100;
	text-decoration: none;
}

.lzc-skip-link:focus {
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
}

/* Reduzierte Bewegung respektieren (DESIGN.md §8, „Bewegung"). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Beitrag (templates/single.html) — Elemente des Seitenentwurfs
   DESIGN-styleguide-blogpost.html. Alle Werte als Presets; Literale nur,
   wo DESIGN.md den Wert noch nicht als Token führt (Abschnitt 10,
   „Literale in nummerierten Elementen") — jeweils am Eintrag vermerkt.
   ========================================================================== */

/* --- Kategorie-Label über der Überschrift (2.32) -------------------------- */
.lzc-category {
	display: inline-block;
	font-size: .8rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: .1em; /* wartet auf Token in DESIGN.md (§10, Literale) */
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-light);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	margin: var(--wp--preset--spacing--40) 0;
	text-decoration: none;
}

/* --- Meta-Zeile (4.8) und Rechtsstand (4.9) --------------------------------
   Bricht die Zeile um, stehen ihre Zeilen 8 px untereinander, nebeneinander
   16 px; zum Rechtsstand ebenfalls 8 px (DESIGN.md 0.15.1, 0.15.3). */
.lzc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.5; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0 0 var(--wp--preset--spacing--20);
}

.lzc-rechtsstand {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.5; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0;
}

/* --- Autorenbox kurz (4.2) --------------------------------------------------
   Geschlossener Kasten mit grünem Rahmen; Wertefolge wie .cst-author-mini. */
.lzc-author-mini {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default);
	margin-block: var(--wp--preset--spacing--70);
}

.lzc-author-mini__img {
	width: 64px; /* wartet auf Token in DESIGN.md (§10, Literale) */
	height: 64px;
	flex: none;
	border-radius: var(--wp--custom--radius--default);
	object-fit: cover;
	background: var(--wp--preset--color--base-alt);
}

.lzc-author-mini__name {
	font-weight: var(--wp--custom--font-weight--bold);
}

.lzc-author-mini__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

/* --- Autorenbox vollständig (4.1) -------------------------------------------
   Grüne Kopfleiste, Porträt links, Text rechts; unter 800 px eine Spalte
   (Breakpoint, DESIGN.md §8). */
.lzc-author {
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default);
	overflow: hidden;
	margin-block: var(--wp--preset--spacing--70);
}

.lzc-author__header {
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--color--text-invert);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	font-weight: var(--wp--custom--font-weight--bold);
	font-size: var(--wp--preset--font-size--body-s);
	letter-spacing: .04em; /* wartet auf Token in DESIGN.md (§10, Literale) */
}

.lzc-author__body {
	display: grid;
	grid-template-columns: 110px 1fr; /* 110 px: wartet auf Token, s. §10 */
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
}

.lzc-author__img {
	width: 110px; /* wartet auf Token in DESIGN.md (§10, Literale) */
	height: 110px;
	border-radius: var(--wp--custom--radius--default);
	object-fit: cover;
	background: var(--wp--preset--color--base-alt);
}

/* hoehere Spezifitaet: ":root :where(main) :is(h2)" (0,1,1) wuerde den
   Namen 12px Abstand zur Rolle geben, der Entwurf sieht 2px vor */
body.single .lzc-author__name {
	font-size: 1.35rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0 0 2px; /* wartet auf Token in DESIGN.md (§10, Literale) */
}

.lzc-author__role {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--ui);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.lzc-author__bio {
	font-size: var(--wp--preset--font-size--ui);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.lzc-author__bio > p {
	margin: 0;
}

.lzc-author__bio > p + p {
	margin-top: var(--wp--preset--spacing--30);
}

.lzc-profile-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* die Chip-Liste haelt 16px Abstand zu den Profil-Links darueber (Entwurf 4.1) */
.lzc-author .is-style-chips {
	margin-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 800px) {
	.lzc-author__body {
		grid-template-columns: 1fr;
	}
	.lzc-author__img {
		width: 96px; /* wartet auf Token, s. §10 */
		height: 96px;
	}
}

/* --- Beitragsbild-Hülle (2.33) ----------------------------------------------
   Das post-featured-image-Block liegt als Hüllengruppe im Template; Bild
   volle Spaltenbreite, Rundung und Schatten wie .cst-article-media. */
.lzc-article-media {
	margin: 0 0 var(--wp--preset--spacing--70);
}

.lzc-article-media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--default);
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
}

/* --- Definitionsbox (4.7) ---------------------------------------------------- */
.is-style-definition {
	background: var(--wp--preset--color--accent-light);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--50);
}

/* hoehere Spezifitaet: die theme.json-Regel ":root :where(main) :is(h3)"
   (0,1,1) wuerde gegen die einfache Klassenregel gewinnen */
.is-style-definition .is-style-definition__term {
	font-size: 1.15rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0 0 var(--wp--preset--spacing--10);
}

/* --- Datenpunkt mit Quelle (4.11) ---------------------------------------------
   Bewusst ohne Fläche: die Aussage trägt, die Herkunft steht kleingesetzt
   darunter über einer Haarlinie. */
.is-style-datapoint {
	max-width: var(--wp--custom--measure);
}

.is-style-datapoint__claim {
	font-size: 1.15rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	line-height: 1.5; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0;
}

.is-style-datapoint__source {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	border-top: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-top: var(--wp--preset--spacing--20);
}

/* --- Angebotsblock im Beitrag (2.24) --------------------------------------------
   Cremefläche mit Rahmen: erkennbar anders als der redaktionelle Text. */
.is-style-offer {
	background: var(--wp--preset--color--base-alt);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--60);
}

.is-style-offer > :first-child {
	margin-top: 0;
}

.is-style-offer > :last-child {
	margin-bottom: 0;
}

.is-style-offer__label {
	font-size: .8rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: .1em; /* wartet auf Token in DESIGN.md (§10, Literale) */
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Vorzeile und Überschrift bilden eine Einheit (DESIGN.md §8). */
.is-style-offer__label + .wp-block-heading {
	margin-top: 0;
}

/* --- Quellenblock (4.11) --------------------------------------------------------- */
.is-style-sources {
	font-size: var(--wp--preset--font-size--small);
	border-top: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}

.is-style-sources ol {
	padding-left: 1.3em;
	margin: 0;
}

/* --- Weiterlesen-Leiste (2.34) ----------------------------------------------------
   Zwei Karten nebeneinander; unter 800 px eine Spalte (Breakpoint, §8). */
.lzc-nextread {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--60);
}

.lzc-nextread-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--default);
	box-shadow: 0 1px 2px rgba(25, 28, 29, .05), 0 5px 16px -8px rgba(25, 28, 29, .12);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.lzc-nextread-card__body {
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1;
}

.lzc-nextread-card__title {
	font-size: 1.2rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0;
}

.lzc-nextread-card__text {
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.lzc-nextread-card__footer {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

.lzc-nextread > * {
	margin-block: 0;
}

@media (max-width: 800px) {
	.lzc-nextread {
		grid-template-columns: 1fr;
	}
}

/* --- Vertikaler Rhythmus der Inhaltskästen im Beitrag ------------------------------
   Werte aus dem Seitenentwurf: Kästen stehen 48 px (xl) vom Fließtext
   abgesetzt, nach einer Überschrift 16 px (s), am Containeranfang ohne
   Vorabstand. Bewusst auf single beschränkt: der Abgleich der bereits
   gebauten Seiten mit diesem Rhythmus ist ein eigener Arbeitsgang. */
body.single main :is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip, .is-style-keypoints, .is-style-definition, .is-style-datapoint, .is-style-toc, .is-style-offer, .is-style-faq, .is-style-table-wrap, .is-style-steps) {
	margin-block: var(--wp--preset--spacing--70);
}

/* ueberschreibt ":root :where(.is-layout-flow) > :last-child" (0,2,0) —
   ohne diese Regel fiele der untere Rand der letzten Box im Container weg. */
body.single :is(.lzc-author-mini, .lzc-author) {
	margin-block: var(--wp--preset--spacing--70);
}

/* steht die Box als erstes im Container, entfaellt der obere Rand —
   der Abschnittspadding traegt den Abstand schon (Entwurf §1627) */
body.single :is(.lzc-author-mini, .lzc-author):first-child {
	margin-top: 0;
}

body.single main .is-style-sources {
	margin: var(--wp--preset--spacing--80) 0 0;
}

body.single main :is(h1, h2, h3, h4) + :is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip, .is-style-keypoints, .is-style-definition, .is-style-datapoint, .is-style-toc, .is-style-offer, .is-style-faq, .is-style-table-wrap, .is-style-steps) {
	margin-top: var(--wp--preset--spacing--40);
}

body.single main :is(.is-style-highlight-box, .is-style-highlight-box-warning, .is-style-highlight-box-tip, .is-style-keypoints, .is-style-definition, .is-style-datapoint, .is-style-toc, .is-style-offer, .is-style-faq, .is-style-sources, .is-style-table-wrap, .is-style-steps):first-child {
	margin-top: 0;
}

/* Letztes Element des Beitragstexts ohne unteren Rand, wie
   ".cst-prose > :last-child" im Entwurf — den Abstand zum Abschnittsende
   trägt die Sektionspolsterung; sonst kämen 48 px hinzu. */
body.single main .entry-content > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   RATGEBER-ÜBERSICHT (home.html) UND SUCHE (search.html)
   Elemente 2.35, 2.36, 3.11 und 5.9 aus DESIGN.md, Abschnitt 9.
   ========================================================================== */

/* --- Suchleiste (3.11) ---------------------------------------------------------
   Beschriftung über der Zeile, Eingabefeld und Sekundärbutton nebeneinander.
   Die gemeinsame Feldbasis aus DESIGN.md §8 („Formularfelder") ist projektweit
   noch nicht gesetzt — sie hängt an der offenen Formular-Strategie. Hier steht
   sie deshalb nur am Suchfeld; beim Umstellen wandert sie an die zentrale
   Stelle und diese Regel schrumpft auf das Layout. */
.wp-block-search.is-style-search-bar {
	margin-top: var(--wp--preset--spacing--50);
}

.is-style-search-bar .wp-block-search__label {
	display: block;
	width: 100%;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--bold);
	margin-bottom: var(--wp--preset--spacing--20);
}

.is-style-search-bar .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	border: 0;
	padding: 0;
}

.is-style-search-bar .wp-block-search__input {
	flex: 1 1 240px; /* wartet auf Token in DESIGN.md (§10, Literale) */
	width: auto;
	min-height: var(--wp--custom--field--min-height);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--ui);
}

.is-style-search-bar .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--contrast-muted);
	opacity: 1;
}

/* Der Suchbutton ist ein Sekundärbutton (1.9); core gibt ihm kein
   .wp-block-button, deshalb die Werte hier statt über die Buttonregeln. */
.is-style-search-bar .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--field--min-height);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border-width--strong) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default);
	background-color: transparent;
	color: var(--wp--custom--color--accent-dark);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.is-style-search-bar .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--accent-light);
	color: var(--wp--custom--color--accent-dark);
}

/* --- Beitragsraster (2.35) ------------------------------------------------------
   Ordnet die Karte 2.13 an, mehr nicht. Spaltenzahl aus dem Token, Abstand
   aus der Abstandsskala. Unter 1024 px zwei Spalten, unter 800 px eine — der
   zweite Sprung fällt mit dem allgemeinen Spaltenbruch zusammen. */
.wp-block-post-template.is-style-archive-grid {
	display: grid;
	grid-template-columns: var(--wp--custom--archive--grid);
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-archive-grid > li.wp-block-post {
	margin: 0;
	display: flex;
}

.is-style-archive-grid > li.wp-block-post > .is-style-card {
	width: 100%;
}

/* Unter 1024 px zwei Spalten, unter 800 px eine — der zweite Sprung fällt
   mit dem allgemeinen Spaltenbruch zusammen (DESIGN.md §8, Breakpoints). */
@media (max-width: 1024px) {
	.wp-block-post-template.is-style-archive-grid {
		grid-template-columns: var(--wp--custom--archive--grid-compact);
	}
}

@media (max-width: 800px) {
	.wp-block-post-template.is-style-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Die Karte im Raster: das Beitragsbild sitzt im Medienfeld, der Titel
   erbt die Kartengröße (1.2rem) aus den Kartenregeln oben. */
.is-style-archive-grid .is-style-card-media .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.is-style-archive-grid .is-style-card-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.is-style-archive-grid .is-style-card .wp-block-post-title {
	font-size: 1.2rem; /* wartet auf Token in DESIGN.md (§10, Literale) */
	margin: 0;
}

.is-style-archive-grid .is-style-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.is-style-archive-grid .is-style-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px; /* wartet auf Token in DESIGN.md (§10, Literale) */
}

.is-style-archive-grid .is-style-card .wp-block-post-excerpt {
	margin: 0;
}

.is-style-archive-grid .is-style-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

/* „Beitrag lesen" ist ein Tertiärbutton (1.10). core/read-more rendert ein
   nacktes <a>, deshalb stehen die Werte hier statt über die Buttonregeln.
   Der nachgestellte Pfeil kommt aus DESIGN.md §8 („Nachgestellter Pfeil");
   die Alternativtext-Schreibweise content: "…" / "" hält ihn aus dem
   Linktext heraus — er ist Schmuck, keine Information. */
.is-style-archive-grid .is-style-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--button--icon-gap);
	margin-top: auto;
	color: var(--wp--custom--color--accent-dark);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--bold);
	text-decoration: underline;
	text-underline-offset: 4px; /* wartet auf Token in DESIGN.md (§10, Literale) */
}

.is-style-archive-grid .is-style-card .wp-block-read-more::after {
	content: "→" / "";
}

.is-style-archive-grid .is-style-card .wp-block-read-more:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Seitennummerierung (2.36) --------------------------------------------------
   Keine eigenen Maße: die Felder sitzen auf der Buttonbasis in Größe S
   (DESIGN.md §8, Buttons). Die aktuelle Seite ist ein Primärbutton, die
   übrigen sind Sekundärbuttons. */
.wp-block-query-pagination.is-style-pagenav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--70);
}

.is-style-pagenav .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.is-style-pagenav :is(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--min-height-s);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--strong) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default);
	color: var(--wp--custom--color--accent-dark);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.is-style-pagenav a:hover {
	background-color: var(--wp--preset--color--accent-light);
	color: var(--wp--custom--color--accent-dark);
}

.is-style-pagenav .page-numbers.current {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base-alt);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Auslassung zwischen weit auseinanderliegenden Seitenzahlen: kein Feld. */
.is-style-pagenav .page-numbers.dots {
	border: 0;
	padding-inline: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-muted);
	min-height: 0;
}

/* --- Leerzustand (5.9) ----------------------------------------------------------
   Cremefläche mit Haarrahmen, kein Warn- und kein Fehlerton: Ein leeres
   Ergebnis ist kein Fehler der Nutzerin. Den Rahmen trägt der Kasten, weil
   ein Schatten auf Cremefläche nicht sichtbar wird. */
.wp-block-group.is-style-empty-state {
	background-color: var(--wp--preset--color--base-alt);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--70);
	text-align: center;
}

.is-style-empty-state > :first-child {
	margin-top: 0;
}

.is-style-empty-state > :last-child {
	margin-bottom: 0;
}

.is-style-empty-state p {
	color: var(--wp--preset--color--contrast-muted);
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
}

.is-style-empty-state .wp-block-buttons {
	justify-content: center;
}

/* Beitrag ohne Beitragsbild: das Medienfeld entfällt, statt eine leere
   Cremefläche zu zeigen. Kein Platzhalter und kein Theme-Fallback — die
   Karte sieht dann aus wie die der Weiterlesen-Leiste (AGENTS.md §7:
   ein fehlendes Bild wird nicht ersetzt). */
.is-style-archive-grid .is-style-card-media:not(:has(img)) {
	display: none;
}

/* core/post-terms gibt die Kategorie als Verweis aus. Auf der Karte ist sie
   Vorzeile und kein Bedienelement: Farbe und Unterstreichung entfallen, der
   Verweis bleibt und führt auf das Kategoriearchiv (templates/archive.html). */
.is-style-card-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.is-style-card-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 4px; /* wartet auf Token in DESIGN.md (§10, Literale) */
}

/* ==========================================================================
   FORMULARE — Elemente 3.1–3.6 aus DESIGN.md, Abschnitt 9; Werte aus §8
   („Formularfelder", „Buttons").
   Contact Form 7 gibt sein Markup selbst aus. Gestylt werden deshalb seine
   eigenen Klassen (.wpcf7-*), damit jedes CF7-Formular gleich aussieht; die
   Layout-Hüllen (.lzc-*) bringt das Formular-Template mit
   (bin/seed-contact-form.php). Vorangestelltes .wpcf7 .wpcf7-form, damit die
   Regeln vor dem Plugin-CSS stehen, unabhängig von der Ladereihenfolge.
   Fokus: globale Regel oben (DESIGN.md §8, „Fokus").
   Spezifität: Die Feldbasis zählt über :is(input[type=…]) mit (0,4,1);
   Folgeregeln für einzelne Feldtypen und Zustände brauchen mindestens
   dieselbe, sonst greifen sie nicht.
   ========================================================================== */

.wpcf7 .lzc-field {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Zwei Felder nebeneinander; unter 600 px untereinander (Breakpoint, §8). */
.wpcf7 .lzc-field-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.wpcf7 .lzc-field-pair {
		grid-template-columns: 1fr;
	}
}

.wpcf7 .lzc-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--bold);
}

.wpcf7 .lzc-required {
	color: var(--wp--custom--color--error);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/* --- Feldbasis (3.1–3.5) --------------------------------------------------- */
.wpcf7 .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea).wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--field--min-height);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--body);
	transition: border-color var(--wp--custom--transition);
}

.wpcf7 .wpcf7-form :is(input, select, textarea).wpcf7-form-control:hover {
	border-color: var(--wp--preset--color--contrast-muted);
}

.wpcf7 .wpcf7-form textarea.wpcf7-form-control.wpcf7-textarea {
	min-height: 140px; /* wartet auf Token in DESIGN.md (§10, Literale) */
	resize: vertical;
}

/* Platzhaltertext und Auswahlhinweis (DESIGN.md §8): gedämpft, solange nichts
   eingegeben oder gewählt ist. "Bitte wählen" ist bei first_as_label die erste
   Option mit leerem Wert; die aufgeklappte Liste steht in der Textfarbe. */
.wpcf7 .wpcf7-form :is(input, textarea).wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--contrast-muted);
	opacity: 1;
}

.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-select:has(option[value=""]:checked) {
	color: var(--wp--preset--color--contrast-muted);
}

.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-select option {
	color: var(--wp--preset--color--contrast);
}

/* Aufklappfeld (DESIGN.md §8): Systempfeil aus, eigener Pfeil rein. Der
   Pfeil ist reine CSS-Form aus zwei Verlaufslinien (AGENTS.md §7, Ausnahme 3)
   statt einer data:-Grafik. Geometrie wie der Pfad M6 9 L12 15 L18 9 im
   viewBox 24: zwei Schenkel von je einem Viertel der Pfeilgröße, Strichstärke
   2.5/24 der Pfeilgröße. Die rechte Pfeilkante steht im Abstand inset vom
   Rand; der rechte Innenabstand wächst um Pfeil und 2xs mit. */
.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-select {
	--lzc-arrow-size: var(--wp--custom--select-arrow--size);
	--lzc-arrow-inset: var(--wp--custom--select-arrow--inset);
	--lzc-arrow-color: var(--wp--preset--color--contrast);
	--lzc-arrow-half: calc(var(--lzc-arrow-size) * 2.5 / 48);
	--lzc-arrow-soft: calc(var(--lzc-arrow-size) / 48);
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--lzc-arrow-inset) + var(--lzc-arrow-size) + var(--wp--preset--spacing--20));
	background-image:
		linear-gradient(45deg, transparent calc(50% - var(--lzc-arrow-half)), var(--lzc-arrow-color) calc(50% - var(--lzc-arrow-half) + var(--lzc-arrow-soft)), var(--lzc-arrow-color) calc(50% + var(--lzc-arrow-half) - var(--lzc-arrow-soft)), transparent calc(50% + var(--lzc-arrow-half))),
		linear-gradient(135deg, transparent calc(50% - var(--lzc-arrow-half)), var(--lzc-arrow-color) calc(50% - var(--lzc-arrow-half) + var(--lzc-arrow-soft)), var(--lzc-arrow-color) calc(50% + var(--lzc-arrow-half) - var(--lzc-arrow-soft)), transparent calc(50% + var(--lzc-arrow-half)));
	background-repeat: no-repeat;
	background-position:
		right calc(var(--lzc-arrow-inset) + var(--lzc-arrow-size) / 2) center,
		right calc(var(--lzc-arrow-inset) + var(--lzc-arrow-size) / 4) center;
	background-size: calc(var(--lzc-arrow-size) / 4) calc(var(--lzc-arrow-size) / 4);
}

.wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-select:disabled {
	--lzc-arrow-color: var(--wp--preset--color--contrast-muted);
}

.wpcf7 .wpcf7-form :is(input, select, textarea).wpcf7-form-control[readonly] {
	background-color: var(--wp--preset--color--base-alt);
	border-style: dashed;
}

.wpcf7 .wpcf7-form :is(input, select, textarea).wpcf7-form-control:disabled {
	background-color: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast-muted);
	cursor: not-allowed;
}

/* --- Fehlerzustand: Rahmen in Fehlerfarbe, Text unter dem Feld ------------- */
.wpcf7 .wpcf7-form :is(input, select, textarea).wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--custom--color--error);
	border-width: var(--wp--custom--border-width--strong);
}

.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--custom--color--error);
}

/* --- Einwilligung, einzelne Checkbox (3.1–3.5) ---------------------------- */
.wpcf7 .wpcf7-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7 .wpcf7-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--body);
}

.wpcf7 .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
	flex: none;
	width: 20px; /* wartet auf Token in DESIGN.md (§10, Literale) */
	height: 20px;
	margin: 0.3em 0 0; /* Ausrichtung an der ersten Textzeile, wie im Entwurf */
	accent-color: var(--wp--preset--color--accent);
}

/* --- Absendebutton: Primärbutton, volle Breite, mit Pfeil (§8) -------------
   Grundoptik aus theme.json (elements.button, über .wp-element-button). */
.wpcf7 .wpcf7-form .lzc-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	min-height: var(--wp--custom--button--min-height);
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wpcf7 .wpcf7-form .lzc-submit:disabled {
	opacity: var(--wp--custom--button--disabled-opacity);
	cursor: not-allowed;
}

/* Erklärung des Sternchens unter dem Button (Pflicht laut Katalog 3.1–3.5). */
.wpcf7 .lzc-form-note {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Rückmeldung nach dem Absenden (3.1–3.5): Erfolg grün, Fehler rot ----- */
.wpcf7 .wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 0;
	border-left: 4px solid; /* wartet auf Token in DESIGN.md (§10, Literale) */
	border-radius: var(--wp--custom--radius--default);
	font-size: var(--wp--preset--font-size--ui);
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--custom--color--success);
	background-color: var(--wp--custom--color--success-bg);
	color: var(--wp--custom--color--success);
}

.wpcf7 .wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required) .wpcf7-response-output {
	border-color: var(--wp--custom--color--error);
	background-color: var(--wp--custom--color--error-bg);
	color: var(--wp--custom--color--error);
}