/**
 * Elterngeld Buddy – Block-Stile.
 *
 * Alles, was theme.json nicht ausdrücken kann (Formen, Hover-Effekte, Zähler,
 * Scroll-Animationen). Wird im Frontend UND im Editor geladen, damit die
 * Vorschau exakt dem Ergebnis entspricht.
 *
 * Struktur:
 *   1. Basis & Utilities
 *   2. Kopf- und Fußbereich
 *   3. Hero
 *   4. Text-Stile
 *   5. Container-Stile (Karten, Panels, Bänder, Schritte)
 *   6. Listen-Stile
 *   7. Medien-Stile (Smartphone-Rahmen, Bildrahmen)
 *   8. Bewegung
 */

/* ---------------------------------------------------------------- 1. Basis */

:root {
	--eb-ring: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	--eb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

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

h1,
h2,
h3,
.wp-block-post-title {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Auf schmalen Displays dürfen lange deutsche Komposita in Überschriften
   silbengetrennt umbrechen – sonst reißt der Browser mitten im Wort. */
@media (max-width: 620px) {
	:where(h1, h2, h3, h4, h5, h6) {
		hyphens: auto;
	}
}

:where(img) {
	max-width: 100%;
	height: auto;
}

/* Innenabstand und Rahmen zählen zur angegebenen Größe – wie im Entwurf
   (`*{box-sizing:border-box}`) und wie der Block-Editor es ohnehin tut.
   Ohne diesen Ausgleich rechnet das Frontend anders als die Vorschau: eine
   Fläche mit `height: 190px` und `padding: 24px` wäre dort 238 px hoch. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Fokus bleibt jederzeit sichtbar.
   Ausdrücklich ohne `border-radius`: Der Rahmen folgt von sich aus der Rundung
   des Elements. Ein fester Wert hier würde die Form beim Fokussieren ändern –
   aus einer Pille würde ein fast eckiges Feld. */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* -------------------------------------------------- 2. Kopf- und Fußbereich */

/* Kleben muss die Hülle des Template-Teils, nicht die Gruppe darin:
   `position: sticky` bewegt sich nur innerhalb des Elternelements – und das
   ist exakt so hoch wie der Header selbst, also ohne jeden Spielraum. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Der Weichzeichner liegt bewusst auf einem Pseudo-Element (siehe ::before):
   `backdrop-filter` auf dem Header selbst würde ihn zum Bezugsrahmen für
   `position: fixed` machen – das Overlay-Menü bliebe im Header gefangen. */
.eb-header {
	/* Breite der Marke, Höhe folgt aus ihrem Seitenverhältnis (300 × 98). Beide
	   Werte braucht auch das Overlay-Menü, um Logo und Schließen-Symbol genau
	   dort zu platzieren, wo im Kopfbereich Logo und Burger stehen.
	   `--eb-header-pad` entspricht dem Innenabstand der Kopfzeilen-Gruppe in
	   parts/header.html. */
	--eb-logo-w: 174px;
	--eb-logo-h: calc(var(--eb-logo-w) * 98 / 300);
	--eb-header-pad: 14px;

	/* Fläche der Kopfzeile. Das Overlay-Menü greift dieselben Werte ab, damit
	   beim Öffnen kein Farbwechsel entsteht – das Menü wirkt wie die gewachsene
	   Kopfzeile, nicht wie eine zweite Ebene. */
	--eb-surface: rgba(255, 255, 255, 0.94);
	--eb-surface-blur: blur(14px);

	position: relative;
	/* Eigener Stapelkontext, damit das Hintergrund-Pseudo (z-index: -1) im
	   Header bleibt und nicht hinter die Seite rutscht. */
	isolation: isolate;
	transition: transform 0.32s var(--eb-ease), box-shadow 0.32s var(--eb-ease);
}

/* Bei offenem Menü darf kein `transform` aktiv sein: ein transformierter
   Vorfahre würde das `position: fixed` des Overlays einsperren. */
.eb-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	transform: none !important;
	transition: none;
}

.eb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--eb-surface);
	backdrop-filter: var(--eb-surface-blur);
	-webkit-backdrop-filter: var(--eb-surface-blur);
	border-bottom: 1px solid rgba(234, 223, 229, 0.75);
}

/* Mitlaufend: beim Herunterscrollen aus dem Bild, beim Hochscrollen zurück. */
.eb-header.is-hidden {
	transform: translateY(-100%);
}

.eb-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(54, 24, 47, 0.07);
}

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

	.eb-header.is-hidden {
		transform: none;
	}
}

.eb-header .wp-block-site-logo img,
.eb-header .wp-block-image img {
	width: var(--eb-logo-w);
	max-width: 44vw;
	height: auto;
}

/* Editor: kein Sticky-Verhalten im Canvas erzwingen. */
.editor-styles-wrapper .eb-header {
	position: relative;
}

.eb-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
}

.eb-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 6px;
	position: relative;
}

/* Ohne das legt iOS beim Antippen ein dunkles Rechteck über die ganze Fläche –
   bei den bildschirmbreiten Zeilen des Overlay-Menüs fällt das unangenehm auf.
   Die Rückmeldung übernehmen die Farbwechsel weiter unten. */
.eb-header :is(
		.wp-block-navigation-item__content,
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close,
		.wp-block-button__link,
		.custom-logo-link
	) {
	-webkit-tap-highlight-color: transparent;
}

/* Aktive Seite: Markenfarbe. */
.eb-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.eb-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Die Punkte der Desktop-Leiste sind so hoch wie die Kopfzeile selbst –
   `--eb-logo-h` ist genau die Höhe ihrer Inhaltszeile. Zwei Dinge werden
   dadurch richtig: Wer knapp unter der Beschriftung landet, trifft trotzdem.
   Und der Weg zum Untermenü beginnt an der Unterkante der Leiste statt erst
   am Text – aus 13 Pixeln Lücke unter dem Wort wird eine durchgehende Fläche.
   Die Zeile wird davon nicht höher: Sie richtet sich ohnehin am Logo aus.

   Rückmeldung ist allein der Farbwechsel, kein Unterstrich – die Leiste bleibt
   damit so ruhig wie der Rest der Seite. */
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--eb-logo-h);
	padding-block: 0;
	transition: color 0.18s linear;
}

.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Untermenü als schwebende Karte, mittig unter ihrem Elternpunkt.
   Alle Regeln dieses Abschnitts hängen an `:not(.is-menu-open)`: Im Overlay ist
   dasselbe Untermenü eine eingerückte Liste im Fluss – dort wäre die Karte fehl
   am Platz, und die Zentrierung per `transform` würde sie aus der Zeile
   schieben. */
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
	/* Der Core hängt die Karte an die linke Kante des Elternpunkts. Mittig
	   darunter sitzt sie ruhiger – und nur so kann der Zeiger oben in der Mitte
	   auf den Punkt zeigen, zu dem sie gehört. */
	left: 50%;
	transform: translateX(-50%);
	min-width: 17.5rem;
	/* Etwas Luft zur Leiste; die Brücke weiter unten hält den Weg dorthin
	   überfahrbar. */
	margin-top: 13px;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	/* Zwei Schatten: der enge zeichnet die Kante nach, der weite hebt die Karte
	   von der Seite ab. */
	box-shadow:
		0 2px 6px rgba(54, 24, 47, 0.05),
		0 26px 50px -14px rgba(54, 24, 47, 0.22);
}

/* Brücke über den Abstand zur Leiste: Ohne sie fiele das Menü zu, sobald der
   Zeiger die Lücke überquert. Sie liegt in der Karte selbst – das Überfahren
   zählt damit weiter als Überfahren des Elternpunkts. Geschlossen ist die Karte
   `overflow: hidden` und null Pixel groß, die Fläche entsteht also erst mit
   dem geöffneten Menü. */
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -13px 0 auto;
	height: 13px;
}

/* Der Zeiger ist ein gedrehtes Quadrat: Seine beiden oberen Kanten setzen die
   Linie der Karte fort, seine Füllung deckt das Stück Kartenrand darunter zu.
   Die Rundung an der Spitze nimmt die Formensprache der Karte auf. */
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 12px;
	height: 12px;
	transform: translateX(-50%) rotate(45deg);
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 1px solid var(--wp--preset--color--line);
	border-top-left-radius: 4px;
	background: var(--wp--preset--color--base);
}

.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 0.95rem;
	font-weight: 600;
	/* Die Karte ist breit genug für die längste Beschriftung – ein Umbruch wäre
	   hier nur ein Zeichen dafür, dass sie es nicht mehr ist. */
	white-space: nowrap;
	transition: background-color 0.16s linear, color 0.16s linear;
}

.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container li:hover > .wp-block-navigation-item__content,
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container li:focus-within > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--primary);
}

.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--primary);
}

/* Aufblenden nur beim Öffnen. Eine Ausblende gäbe es nicht zu sehen: Der Core
   setzt die Karte beim Schließen im selben Moment auf `height: 0` und
   `visibility: hidden`. Deshalb eine Animation am geöffneten Zustand statt
   eines Übergangs an der Karte – die Selektoren bilden die des Cores nach.
   Die Verschiebung muss die Zentrierung mitführen, sonst springt die Karte. */
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	animation: eb-submenu-in 0.24s var(--eb-ease) both;
}

@keyframes eb-submenu-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-7px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Der Pfeil am Elternpunkt dreht sich mit – der Core kippt ihn bei
   `aria-expanded`, hier bekommt er den Weg dahin und die Markenfarbe. */
.eb-header .wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.24s var(--eb-ease);
}

.eb-header .wp-block-navigation .has-child:hover > .wp-block-navigation-submenu__toggle,
.eb-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
	.eb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		animation: none;
	}

	.eb-header .wp-block-navigation .wp-block-navigation-submenu__toggle svg {
		transition: none;
	}
}

/* --------------------------------------------------- Mobiles Overlay-Menü */

/* Die CTA erscheint nur im Overlay – auf dem Desktop steht sie schon als
   Schaltfläche im Kopfbereich. */
.eb-header .wp-block-navigation__container > .eb-nav-cta {
	display: none;
}

.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .eb-nav-cta {
	display: block;
	width: 100%;
	margin-top: 28px;
}

/* Über die volle Breite: Im Menü ist sie die eine Handlung, zu der alles
   hinführt – als schmale Pille zwischen bündigen Textzeilen wirkte sie wie ein
   weiterer Menüpunkt. */
.wp-block-navigation__responsive-container.is-menu-open .eb-nav-cta .wp-block-navigation-item__content {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 0;
	padding: 17px 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: var(--wp--preset--shadow--brand);
}

.wp-block-navigation__responsive-container.is-menu-open .eb-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Der Core färbt das Overlay über
   `.wp-block-navigation:not(.has-background) … .is-menu-open` weiß – dieser
   Selektor muss deshalb mindestens genauso spezifisch sein. */
.eb-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--eb-surface);
	backdrop-filter: var(--eb-surface-blur);
	-webkit-backdrop-filter: var(--eb-surface-blur);
	padding: 0;
}

/* Die Seite hinter dem offenen Menü darf nicht mitscrollen. */
html.has-modal-open {
	overflow: hidden;
}

/* Das Overlay bekommt denselben Rahmen wie die Kopfzeile: Der innere Dialog
   beginnt exakt dort, wo im Header das Logo sitzt (oben der Innenabstand der
   Kopfzeile, seitlich die Seitenränder der Website). Alles Weitere richtet sich
   daran aus. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	padding: var(--eb-header-pad) var(--wp--style--root--padding-right, 20px);
}

/* Das Logo im Menü ist derselbe Block wie oben – es steht deshalb an derselben
   Stelle und in derselben Größe. In der Desktop-Leiste bleibt es verborgen,
   dort steht es ja schon links im Kopfbereich. */
.eb-header .wp-block-navigation__container > .wp-block-navigation-item:has(> .eb-nav-logo) {
	display: none;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(> .eb-nav-logo) {
	display: block;
	/* Es steht als erster Eintrag im Fluss – dadurch sitzt es von selbst an der
	   Oberkante des Dialogs und damit genau auf der Position des Logos im
	   Kopfbereich. Der Abstand darunter trennt es von den Menüpunkten. */
	margin-bottom: clamp(1.75rem, 6vh, 3.25rem);
}

/* Das Schließen-Symbol liegt genau auf dem Burger: senkrecht auf der Mitte der
   Logo-Zeile, waagerecht bündig mit dem Seitenrand. Die 22 px sind die halbe
   Schaltflächengröße (44 px), die −10 px ihr Überstand – das Symbol selbst ist
   24 px breit und sitzt damit auf demselben Seitenrand wie oben. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(var(--eb-logo-h) / 2 - 22px);
	right: -10px;
}

/* Kein eigener Innenabstand mehr: Die Logo-Zeile gibt den oberen Rand vor. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
	padding-inline: 0;
}

/* Im Overlay linksbündig – die Rechtsbündigkeit gilt nur der Desktop-Leiste.
   Die Variable muss auf dem Overlay selbst sitzen, damit sie sowohl den
   Inhalts-Wrapper als auch Listen und Untermenüs erreicht. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	text-align: left;
}

.eb-header .wp-block-navigation__responsive-container.is-menu-open :is(
		.wp-block-navigation__responsive-container-content,
		.wp-block-navigation__container,
		.wp-block-navigation__submenu-container,
		.wp-block-navigation-item
	) {
	align-items: flex-start;
	justify-content: flex-start;
}

.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

/* Jeder Menüpunkt ist eine ganze Zeile: Die Tippfläche reicht über die volle
   Breite, und eine Haarlinie trennt die Zeilen voneinander – dieselbe Linie wie
   bei den Karten der Seite. Logo und CTA bleiben außen vor, das eine ist keine
   Zeile, das andere eine Schaltfläche. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:has(> .eb-nav-logo)):not(.eb-nav-cta) {
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Der Fokusrahmen folgt der runden Formensprache. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline-offset: 4px;
	border-radius: 10px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 64px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.55rem, 6.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	padding-block: 12px;
	transition: color 0.18s linear;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* Die aktive Seite trägt die Markenfarbe – mehr braucht es nicht. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-item:not(.eb-nav-cta) > .wp-block-navigation-item__content,
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-ancestor:not(.eb-nav-cta) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Untermenüs im Overlay: ausklappbar statt dauerhaft offen.
   Der Eintrag wird zum Raster mit zwei Zeilen – oben Beschriftung und
   Umschalter, unten das Untermenü. Dessen Zeile wächst von `0fr` auf `1fr`;
   das ist der einzige Weg, eine unbekannte Höhe flüssig zu animieren, denn
   auf `height: auto` lässt sich nicht überblenden. */
.eb-header .is-menu-open .wp-block-navigation__container > .has-child {
	display: grid;
	/* `1fr` statt der Vorgabe: Sonst schrumpft die Spalte auf die Breite des
	   Wortes, und der Link endete vor dem Pfeil. */
	grid-template-columns: 1fr;
	grid-template-rows: auto 0fr;
	width: 100%;
	transition: grid-template-rows 0.42s var(--eb-ease);
}

.eb-header .is-menu-open .wp-block-navigation__container > .has-child.eb-submenu-open {
	grid-template-rows: auto 1fr;
}

/* Der Core hält Untermenüs im Overlay mit `overflow: initial`, `height: auto`
   und `visibility: visible` offen – über einen fünfklassigen Selektor
   (`…container-content .has-child …`). Um das zurückzunehmen, bildet dieser
   Selektor ihn nach und übertrifft ihn um eine Klasse. Die seitliche
   Einrückung stammt weiterhin vom Core und bleibt unangetastet. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	background: none;
	box-shadow: none;
	gap: 2px;
	/* Innen statt außen: Ein Außenabstand läge außerhalb des zusammengefalteten
	   Feldes und hielte die Zeile auch geschlossen offen. */
	margin: 0;
	padding-block: 2px 10px;
	/* Beides zwingt das Untermenü auf die Höhe seiner Rasterzeile – der Theme
	   setzt für die Einträge sonst `align-items: flex-start`, dann behielte es
	   seine volle Höhe und liefe über den nächsten Menüpunkt. */
	align-self: stretch;
	min-height: 0;
	overflow: hidden;
	/* Der Inhalt blendet mit weg, statt an der schrumpfenden Zeile hart
	   abgeschnitten zu werden – ohne das sieht das Zuklappen ruckartig aus.
	   Zusammengefaltet gehören die Links außerdem nicht in die
	   Tabulatorreihenfolge; der verzögerte Wechsel der Sichtbarkeit lässt sie
	   erst nach dem Einfahren aus ihr verschwinden. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s var(--eb-ease), visibility 0s linear 0.42s;
}

.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.eb-submenu-open .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	/* Beim Aufklappen erst die Zeile öffnen, dann den Inhalt einblenden. */
	transition: opacity 0.28s var(--eb-ease) 0.12s, visibility 0s;
}

/* Der Pfeil zeigt nur an, ob das Untermenü offen ist – bedient wird über den
   Elternpunkt selbst (siehe assets/js/header.js). Er steht deshalb im Link und
   wird per `pointer-events` durchlässig: Ein Tippen darauf trifft den Link
   darunter, die Zeile ist also bis zum rechten Rand eine einzige Fläche. In der
   Desktop-Leiste bleibt er unsichtbar, dort öffnet das Untermenü beim
   Überfahren. */
.eb-submenu-toggle {
	display: none;
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.eb-header .is-menu-open .eb-submenu-toggle {
	display: grid;
	place-items: center;
	width: 24px;
	/* Schiebt den Pfeil an das Ende der Zeile. */
	margin-left: auto;
	transition: transform 0.42s var(--eb-ease), color 0.18s linear;
}

.eb-header .is-menu-open .has-child.eb-submenu-open > .eb-submenu-toggle {
	transform: rotate(180deg);
	color: var(--wp--preset--color--primary);
}

/* Die Einträge des Untermenüs sind ruhige Textzeilen. Die Karten-Optik der
   Desktop-Leiste – gefüllte Pille für die aktive Seite, Rundungen, Polster –
   muss hier weg: Sie steht der Einrückung entgegen und wird beim Zuklappen
   sichtbar angeschnitten. Der Selektor bildet dafür wieder den des Cores nach.
   Die Hierarchie trägt allein die Einrückung, die aktive Seite die Farbe. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 0;
	padding: 9px 0;
	border-radius: 0;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Der Umschalt-Pfeil des Cores steckt im Link selbst – im Overlay übernimmt
   die eigene Schaltfläche daneben. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* ------------------------------------------- Auf- und Zublenden des Overlays */

/* Einblenden. Der Core bringt dafür eine eigene Animation mit
   (`overlay-menu__fade-in-animation`, 100 ms). Sie lässt sich nicht mit einer
   Deklaration oder einem Übergang übersteuern: Eine Animation mit
   `fill: forwards` gewinnt in der Kaskade auch dann noch, wenn sie längst
   abgelaufen ist. Deshalb wird sie hier ersetzt statt überschrieben.
   Bewegung übernehmen allein die Einträge – ein verschobener Vollbild-Container
   würde am Rand die Seite darunter freilegen. */
.eb-header .wp-block-navigation__responsive-container.is-menu-open {
	animation: eb-menu-fade-in 0.34s var(--eb-ease) both;
}

@keyframes eb-menu-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Ausblenden. Der Core nimmt `is-menu-open` sofort weg – damit fielen mitten in
   der Blende sämtliche Overlay-Stile weg und das Menü sähe für zwei Bilder aus
   wie die Desktop-Leiste. Deshalb hält assets/js/header.js die Klasse für die
   Dauer der Blende und setzt zusätzlich diese hier. Bleibt das Skript aus,
   schließt das Menü ohne Blende – aber nie fehlerhaft. */
.eb-header .wp-block-navigation__responsive-container.eb-menu-closing {
	animation: eb-menu-fade-out 0.3s var(--eb-ease) both;
	pointer-events: none;
}

@keyframes eb-menu-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* Beim Schließen tritt nichts mehr auf. */
.eb-header .wp-block-navigation__responsive-container.eb-menu-closing .wp-block-navigation__container > .wp-block-navigation-item,
.eb-header .wp-block-navigation__responsive-container.eb-menu-closing .wp-block-navigation__responsive-container-close {
	animation: none;
}

/* Die Einträge steigen nacheinander auf und schärfen sich dabei – das Menü
   baut sich auf, statt einfach da zu sein.
   Das Logo bleibt bewusst ausgenommen: Es liegt genau über dem Logo der
   Kopfzeile, und weil das Overlay einblendet, wirkt es, als bliebe es einfach
   stehen, während sich das Menü darunter entfaltet. */
.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:has(> .eb-nav-logo)) {
	animation: eb-menu-item 0.52s var(--eb-ease) both;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) {
	animation-delay: 0.1s;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) {
	animation-delay: 0.15s;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) {
	animation-delay: 0.2s;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) {
	animation-delay: 0.25s;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) {
	animation-delay: 0.3s;
}

.eb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n + 7) {
	animation-delay: 0.35s;
}

@keyframes eb-menu-item {
	from {
		opacity: 0;
		transform: translateY(18px);
		filter: blur(7px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* Das Schließen-Symbol dreht sich an die Stelle des Burgers. */
.eb-header .is-menu-open .wp-block-navigation__responsive-container-close {
	animation: eb-menu-close 0.46s var(--eb-ease) both;
}

@keyframes eb-menu-close {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.72);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Wer Bewegung reduziert haben will, bekommt das Menü ohne Aufbau – sichtbar
   bleibt alles. */
@media (prefers-reduced-motion: reduce) {
	/* Dieselbe Anzahl Klassen wie die Regeln oben, sonst setzen sie sich durch. */
	.eb-header .wp-block-navigation__responsive-container.is-menu-open,
	.eb-header .wp-block-navigation__responsive-container.eb-menu-closing,
	.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		animation: none;
	}

	/* Ohne Blende soll das Menü beim Schließen sofort weg sein und nicht die
	   Nachlaufzeit des Skripts über sichtbar bleiben. */
	.eb-header .wp-block-navigation__responsive-container.eb-menu-closing {
		opacity: 0;
	}

	.eb-header .is-menu-open .wp-block-navigation__container > .has-child,
	.eb-header .is-menu-open .eb-submenu-toggle,
	.eb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		transition: none;
	}
}

/* Schließen-Schaltfläche als runde Taste. */
.wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 8px 22px rgba(54, 24, 47, 0.1);
}

.wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.eb-footer .wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.eb-footer .wp-block-image {
	margin-bottom: 24px;
}

.eb-footer .wp-block-image img {
	width: 200px;
	height: auto;
}

/* Der Markentext bleibt schmal, damit er wie im Original dreizeilig läuft. */
.eb-footer .wp-block-column:first-child p {
	max-width: 340px;
}

.eb-footer .wp-block-heading {
	margin-bottom: 28px;
}

.eb-footer-list {
	list-style: none;
	padding-left: 0;
}

.eb-footer-list a:hover {
	color: #fff;
}

/* Der Separator-Block bringt je nach Einstellung Höhe und Deckkraft mit –
   hier soll es exakt eine 1 px starke Linie sein. */
.eb-footer .wp-block-separator {
	height: 0;
	border: 0;
	border-top: 1px solid #48354c;
	background: none;
	opacity: 1;
}

/* Ausreichend große Tippfläche für das Menü-Symbol (mind. 44 × 44 px). */
.eb-header .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin: -10px;
	border-radius: 50%;
}

/* Der Navigations-Block schaltet fest bei 600 px aufs Burger-Menü um. Für
   Logo + vier Einträge + CTA ist darüber aber erst ab rund 900 px genug Platz –
   sonst bricht die Kopfzeile zweizeilig um. Deshalb verschieben wir den
   Umschaltpunkt auf 900 px, indem wir die 600-px-Regeln des Cores in diesem
   Bereich zurücknehmen. */
@media (min-width: 600px) and (max-width: 899px) {
	.eb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		inset: 0;
		width: auto;
	}

	.eb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Solange das Burger-Menü übernimmt, verschwindet die CTA aus der Kopfzeile –
   im Overlay steht sie ohnehin als letzter Eintrag. */
@media (max-width: 899px) {
	/* Zwei Klassen, sonst gewinnt der Layout-Stil des Buttons-Blocks. */
	.eb-header .eb-header-cta {
		display: none;
	}
}

@media (max-width: 599px) {
	.eb-header {
		--eb-logo-w: 150px;
	}
}

/* Kopfbereich, Inhalt und Fußbereich stoßen bündig aneinander – sonst setzt
   WordPress den globalen Blockabstand zwischen die drei Bereiche. */
body :is(.wp-site-blocks, .editor-styles-wrapper) > * + * {
	margin-block-start: 0;
}

/* Sektionen stoßen bündig aneinander – der vertikale Rhythmus kommt allein aus
   ihrem Innenabstand. Die Regel hängt bewusst an den Blöcken selbst und nicht
   am Container: im Editor gibt es die Container-Klasse des Frontends nicht,
   die Vorschau sähe sonst anders aus als die Seite. */
.alignfull + .alignfull {
	margin-block-start: 0;
}

.wp-block-post-content.eb-sections > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ 3. Hero */

/* Auf schmalen Viewports stehen Text und Foto nicht mehr übereinander, sondern
   untereinander: erst der Text auf Creme, darunter das Motiv in voller Breite.
   So wie im Entwurf – ein Schleier, der den Text über dem Motiv lesbar hält,
   müsste bei dieser Breite fast die ganze Fläche zudecken.

   Damit das Foto dabei nicht wie ein Rest unter dem Text aussieht, greifen drei
   Dinge ineinander: ein enger Ausschnitt, eine Rundung an der Oberkante und die
   Bewertungszeile, die als Karte auf dem Foto liegt und beide Hälften
   zusammenhält. */
@media (max-width: 900px) {
	/* Höhe des Fotos: 460 px auf einem 390er-Handy, ab 441 px Fensterbreite
	   gedeckelt bei 520.

	   Die Höhe steuert den Ausschnitt: Das Motiv ist 2,39:1, `cover` skaliert es
	   also über die Höhe, und je höher der Rahmen, desto schmaler das sichtbare
	   Fenster. Bei den vorherigen 320 px waren 51 % der Bildbreite zu sehen, gut
	   die Hälfte davon leere Wand. Bei 460 px sind es 36 % – die Frau füllt das
	   Bild, statt darin zu verschwinden. */
	.eb-hero {
		--eb-hero-photo: clamp(420px, 118vw, 520px);

		flex-direction: column;
		align-items: stretch;
		/* Der Cover-Block trägt seine Mindesthöhe als Inline-Stil – nur
		   `!important` kommt dagegen an. Gestapelt ergibt sich die Höhe aus
		   Text plus Foto. */
		min-height: 0 !important;
		/* Das Foto füllt nicht mehr die ganze Fläche, die Cremefläche hinter dem
		   Text braucht deshalb eine eigene Farbe. */
		padding: 0;
		background-color: var(--wp--preset--color--cream);
	}

	/* Aus dem Hintergrundbild wird ein normales Element im Fluss, das ans Ende
	   rutscht.

	   Der Anker liegt bei 86 %: Die Frau sitzt zwischen 60 % und 88 % der
	   Bildbreite, bei einem 36-%-Fenster lässt 86 % links etwas Wand stehen und
	   nimmt rechts Pflanze und Sonnenlicht mit. Bei 50 % wäre sie halb draußen.

	   Die Rundung oben macht aus dem Beschnitt eine gesetzte Fläche; unten
	   bleibt sie eckig, weil dort der weiße Trust-Streifen anschließt. */
	.eb-hero .wp-block-cover__image-background {
		position: relative;
		order: 2;
		width: 100%;
		height: var(--eb-hero-photo);
		object-position: 86% center;
		border-radius: 28px 28px 0 0;
	}

	/* Kein Schleier mehr: Er lag als Rechteck über dem Foto und hätte die
	   Rundung an den oberen Ecken wieder überdeckt. Die Kante zwischen Creme und
	   Foto übernehmen jetzt Radius und Bewertungskarte. */
	.eb-hero .wp-block-cover__gradient-background {
		display: none !important;
	}

	/* Der Textblock übernimmt den Seitenabstand, den vorher der Cover-Block
	   gesetzt hat – auf denselben 20 px wie alle anderen Abschnitte. Unten
	   reichen 30 px, weil die Bewertungszeile aus dem Fluss genommen ist und die
	   Store-Buttons den Abschluss bilden. */
	.eb-hero .wp-block-cover__inner-container {
		order: 1;
		padding: 52px var(--wp--style--root--padding-right, 20px) 30px
			var(--wp--style--root--padding-left, 20px);
		/* Core setzt hier `position: relative` – damit wäre der nächste
		   Bezugsrahmen für die Bewertungskarte der Textblock statt des Heros.
		   Auf dem Handy liegt kein Text über dem Foto, die Stapelreihenfolge
		   braucht es hier also nicht. */
		position: static !important;
	}

	.eb-hero .wp-block-cover__inner-container > .wp-block-group {
		position: static !important;
	}

	/* Die Bewertung (Avatare + Sterne) wandert als Karte an den Fuß des Fotos.
	   Sie ist das einzige Element, das sich Text und Bild teilen – ohne sie
	   stehen die beiden Hälften unverbunden übereinander.

	   Angesprochen über `.eb-avatars`, weil die Gruppe selbst keine eigene
	   Klasse trägt und der Hero als Seiteninhalt in der Datenbank liegt. */
	.eb-hero .wp-block-group:has(> .eb-avatars) {
		position: absolute;
		bottom: 20px;
		left: var(--wp--style--root--padding-left, 20px);
		z-index: 3;
		/* Die Karte umschließt ihren Text. Auf dem Handy bricht der Satz um und
		   sie läuft ohnehin bis an die Maximalbreite; auf dem Tablet passt er in
		   eine Zeile und die Karte bleibt entsprechend kurz. */
		width: fit-content;
		max-width: calc(
			100% - var(--wp--style--root--padding-left, 20px) -
				var(--wp--style--root--padding-right, 20px)
		);
		margin: 0 !important;
		padding: 12px 16px;
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 8px 24px rgba(32, 25, 35, 0.1);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}

/*
 * Auf sehr breiten Bildschirmen wächst der Hero mit.
 *
 * Bei fester Höhe wird aus dem Foto (2,39:1) in einem immer breiteren Fenster
 * ein Briefschlitz: Auf einem Studio Display sind es 2560 × 670, also 3,82:1.
 * `object-fit: cover` skaliert das Bild dann auf 2560 × 1071 und schneidet
 * 401 px heraus, 200 davon oben – genau dort sitzt der Kopf.
 *
 * Die Zahlen: Bis 1718 px bleibt es bei 670 px, ein 16-Zoll-MacBook (1728 px)
 * bekommt 674 px und sieht damit aus wie bisher. Auf 2560 px sind es 998 px,
 * der Beschnitt fällt auf 73 px. Nach oben gedeckelt bei 1010 px, sonst
 * verdrängt der Hero auf einem Ultrawide alles andere.
 *
 * Die Medienabfrage ist nötig, weil die gestapelte Fassung weiter oben
 * `min-height: 0 !important` setzt: gleiche Spezifität, und diese Regel steht
 * danach – ohne die Grenze würde sie das Handy-Layout wieder aufreißen.
 */
@media (min-width: 901px) {
	.eb-hero {
		min-height: clamp(670px, 39vw, 1240px) !important;
	}

	/*
	 * Was trotzdem beschnitten wird, geht unten ab, nicht oben.
	 *
	 * Das Motiv hat über dem Kopf nur 14 % Luft und unter den Füßen 9 % – bei
	 * mittigem Anker (50 %) trifft die Hälfte des Beschnitts den Kopf, und der
	 * ist das Erste, was auffällt. 35 % verschiebt das Fenster nach oben: Auf
	 * 2560 px fallen 26 px oben und 47 px unten weg, auf 3440 px sind es 70
	 * oben und 129 unten. Beides bleibt über dem Kopf und an den Füßen.
	 *
	 * Unter etwa 1600 px greift das nicht, weil dort waagerecht beschnitten
	 * wird und senkrecht gar nichts übersteht.
	 */
	.eb-hero .wp-block-cover__image-background {
		object-position: 50% 35%;
	}
}

.eb-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* ------------------------------------------------------------- 4. Text-Stile */

.is-style-eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 16px;
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 650px;
}

.is-style-lead.has-text-align-center {
	margin-inline: auto;
}

.is-style-section-plum .is-style-lead,
.is-style-section-night .is-style-lead,
.is-style-section-brand .is-style-lead {
	color: inherit;
	opacity: 0.86;
}

.is-style-tag {
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Schmale Elemente würden im „constrained“-Layout durch die automatischen
   Seitenränder mittig landen – hier bleiben sie linksbündig, sofern nicht
   ausdrücklich zentriert. `!important`, weil die Layout-Regel des Cores
   ebenfalls mit `!important` arbeitet. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-pill,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-number-badge {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* `text-align` zentriert eine inline-flex-Pille nicht – dafür braucht es eine
   Blockbox mit automatischen Seitenrändern. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-pill.has-text-align-center,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-number-badge.has-text-align-center {
	display: flex;
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-style-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 16px;
	font-size: 0.83rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 10px 25px rgba(54, 24, 47, 0.06);
}

/* Die Nummernfläche der Themenkacheln (Wissen) ist dieselbe wie die der
   nummerierten Karten – deshalb steht sie hier und nicht ein zweites Mal
   weiter unten. Nur der Abstand nach unten gehört zur jeweiligen Karte. */
.is-style-number-badge,
.eb-topic-number {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1;
}

.is-style-stars {
	color: var(--wp--preset--color--star);
	letter-spacing: 2px;
	line-height: 1;
}

/* Lange deutsche Komposita dürfen trennen – aber mit Trennstrich,
   nicht mitten im Wort abgeschnitten. */
.is-style-quote {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

.is-style-stat {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------- 5. Container-Stile */

.is-style-card {
	padding: 30px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s var(--eb-ease), box-shadow 0.25s var(--eb-ease);
	height: 100%;
}

.is-style-card > * {
	position: relative;
	z-index: 1;
}

.is-style-card:hover,
.is-style-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Heller Kasten auf dunkler Sektion (Zitat, Prozessschritte). */
.eb-on-light {
	padding: 42px;
	border-radius: 28px;
}

/* Auf dunklem Grund trennt der Farbunterschied die weiße Karte von der Sektion.
   Auf hellem Grund tut er das nicht mehr – dort braucht sie eine Kante und
   einen Schatten, sonst schwimmt sie in der Fläche. */
.is-style-section-sunrise .eb-on-light,
.is-style-section-cream .eb-on-light,
.is-style-section-dawn .eb-on-light {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Helle Karten behalten ihre eigene Textfarbe, auch wenn sie in einer dunklen
   Sektion liegen. Der `.wp-site-blocks`-Präfix hebt die Spezifität knapp über
   die der Sektions-Stile – ohne !important. */
:is(.wp-site-blocks, .editor-styles-wrapper) .eb-on-light,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-card,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-shot-card,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-steps > *,
:is(.wp-site-blocks, .editor-styles-wrapper) .eb-on-light :is(h1, h2, h3, h4, h5, h6, p, li),
	:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card :is(h1, h2, h3, h4, h5, h6, p, li),
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured :is(h1, h2, h3, h4, h5, h6, p, li),
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-card :is(h1, h2, h3, h4, h5, h6, p),
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-shot-card :is(h1, h2, h3, h4, h5, h6, p),
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-steps :is(h1, h2, h3, h4, h5, h6, p) {
	color: var(--wp--preset--color--contrast);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .eb-on-light .has-muted-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .has-muted-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .has-muted-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-card .has-muted-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-shot-card .has-muted-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-steps .has-muted-color {
	color: var(--wp--preset--color--muted);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .has-primary-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .has-primary-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-card .has-primary-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-shot-card .has-primary-color,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .is-style-eyebrow,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .is-style-tag,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .is-style-tag,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-card .is-style-tag,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-shot-card .is-style-tag {
	color: var(--wp--preset--color--primary);
}

/*
 * Das Nummern-Badge behält seine Markenfarbe.
 *
 * Ohne diese Ausnahme gewinnt die Regel oben: `.is-style-card :is(… p …)` hat
 * zwei Klassen, `.eb-topic-number` nur eine. Genau daran hingen die Nummern der
 * Themenkacheln auf der Wissen-Seite – sie standen dunkel statt in Pink, obwohl
 * ihre eigene Regel `primary` sagte.
 */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .is-style-number-badge,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .eb-topic-number,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .is-style-number-badge {
	color: var(--wp--preset--color--primary);
}

/* Die Badge-Pille bleibt weiß auf Pink – auch innerhalb heller Karten. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .is-style-badge,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .is-style-badge,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-price-card .is-style-badge {
	color: var(--wp--preset--color--base);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .eb-on-light .is-style-stars,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card .is-style-stars,
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-card-featured .is-style-stars {
	color: var(--wp--preset--color--star);
}

.is-style-card-featured {
	padding: 36px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 28px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
	position: relative;
	height: 100%;
}

/* Preiskarte: wie die Karte, aber ohne den dekorativen Farbklecks. */
.is-style-price-card {
	padding: 36px;
	position: relative;
	height: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 28px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Beratungs-Hero: Text links, Beratungsfoto rechts – wie auf den anderen
   Unterseiten. Die Paketauswahl steht als eigene Sektion direkt darunter; im
   Hero war sie eine Entscheidung, bevor irgendetwas erklärt war. */
.eb-consulting-hero__copy h1 {
	max-width: 9.5em;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .eb-consulting-hero__proof > * {
	margin: 0 !important;
}

/*
 * Der große Satz.
 *
 * Statt vier Karten mit je einer Überschrift trägt ein einziger Satz die
 * Sektion, und die vier Situationen sind darin markiert.
 */
.eb-statement {
	/*
	 * Gelb wie ein echter Textmarker – und nicht in der Markenfarbe.
	 *
	 * Rosa war hübsch, sah aber nach Dekoration aus. Gelb liest sich als das,
	 * was es ist: jemand hat hier etwas angestrichen. Dass es die einzige
	 * Stelle der Seite ohne Marken-Pink ist, macht sie zur auffälligsten.
	 *
	 * Der Strich lag anfangs auf gelblichem Sektionsgrund und musste kräftiger
	 * sein als der (#ffdd5c). Seit die Sektion cremefarben ist (#fff9f6), hat er
	 * mehr Abstand zum Hintergrund und darf leiser sein: derselbe Farbton, nur
	 * heller. Er markiert weiter deutlich, drängt sich aber nicht mehr vor den
	 * Satz, den er hervorheben soll.
	 */
	--eb-marker: #ffeaa0;
}

.eb-statement__satz {
	font-size: clamp(1.75rem, 3.6vw, 2.95rem);
	line-height: 1.34;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/*
 * Ein Markerstrich, kein Kasten.
 *
 * Mit einer schlichten `background-color` ist die gefärbte Fläche so hoch wie
 * die Zeilenschachtel, und die ist bei dieser Schrift 1,36em hoch – also höher
 * als jeder vernünftige Zeilenabstand. Bei drei Zeilen stießen die Markierungen
 * deshalb aneinander und sahen aus, als hingen sie zusammen. Erst ab einem
 * Zeilenabstand von etwa 1,5 wäre eine Lücke entstanden, und so viel Luft
 * zerreißt einen Satz, der als ein Block gelesen werden soll.
 *
 * Ein Verlauf malt stattdessen nur ein Band von knapp einem em – ungefähr von
 * der Oberkante der Großbuchstaben bis unter die Grundlinie. Das ist unabhängig
 * vom Zeilenabstand und sieht nebenbei mehr nach Textmarker aus als ein
 * gefüllter Kasten. `no-repeat` und `box-decoration-break: clone` sorgen dafür,
 * dass ein umbrechendes Wortpaar zwei eigene Striche bekommt statt einen langen.
 *
 * Der Preis: Die Farbe steht in dieser Datei und lässt sich nicht mehr im
 * Editor umstellen. Sie ist hier auch eher eine Entscheidung des Designs als
 * ein Stück Inhalt.
 */
:is(.wp-site-blocks, .editor-styles-wrapper) .eb-statement__satz mark {
	padding: 0 0.14em;
	border-radius: 3px;
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(var(--eb-marker), var(--eb-marker));
	background-size: 100% 0.99em;
	background-position: 0 0.27em;
	background-repeat: no-repeat;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Leistungsumfang: neun Punkte im Raster. Die Liste bleibt eine Liste – das
   ist sie inhaltlich, und im Editor lassen sich Punkte so normal ergänzen,
   löschen und umsortieren. */
.wp-block-list.eb-scope {
	padding-left: 0;
}

.eb-scope {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
}

.eb-scope li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	min-height: 78px;
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Als Rasterzelle, nicht als Inline-Zeichen: Im Editor steckt der Listentext in
   einem Block-Element, ein inline-Häkchen davor bekäme eine eigene Zeile. */
.eb-scope li::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--peach);
	/* Dunkel, nicht pink: Pink auf Pfirsich ist zu wenig Unterschied für ein
	   Zeichen, das man auf einen Blick als Häkchen lesen soll. */
	color: var(--wp--preset--color--contrast);
	font-size: 0.85rem;
	font-weight: 800;
}

@media (max-width: 980px) {
	.eb-scope {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.eb-consulting-hero {
		padding-block: 44px !important;
	}

	.eb-consulting-hero__copy h1 {
		max-width: 11em;
	}
}

@media (max-width: 620px) {
	.eb-scope {
		grid-template-columns: 1fr;
	}

	.eb-scope li {
		min-height: 0;
	}
}


/* Bewertungsschnitt: große Zahl links, Sterne und Zusatz rechts daneben. */
.eb-review-summary {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0 13px;
	padding: 18px 22px;
	border-radius: 22px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(54, 24, 47, 0.06);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .eb-review-summary > * {
	margin: 0 !important;
	max-width: none;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .eb-review-summary > :first-child {
	grid-row: 1 / 3;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.3rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.is-style-section-plum .eb-review-summary,
.is-style-section-night .eb-review-summary {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Die Überschrift läuft nicht unter das Badge. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-badge + .wp-block-heading {
	padding-right: 96px;
}

/* Auf schmalen Karten reicht der Platz daneben nicht – dort steht das Badge
   über der Überschrift statt in der Ecke. */
@media (max-width: 620px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-badge {
		position: static;
		width: fit-content;
		margin-bottom: 6px !important;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-badge + .wp-block-heading {
		padding-right: 0;
	}
}

/* Preisblock auf 900 px begrenzt – wie im Entwurf. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-columns.eb-pricing {
	max-width: 900px;
	margin-inline: auto;
}

/* Badge oben rechts in der Karte. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	margin: 0 !important;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.04em;
	width: auto;
	max-width: none;
}

/* Visual-Panel: der weiche Farbkasten hinter Produktbildern. */
.is-style-panel {
	border-radius: var(--wp--custom--radius--x-large);
	border: 1px solid rgba(255, 255, 255, 0.72);
	box-shadow: var(--eb-ring), var(--wp--preset--shadow--deep);
	overflow: hidden;
	position: relative;
	/* Eigener Stapelkontext: die z-index-Werte der Kinder gelten nur innerhalb
	   des Panels und mischen sich nicht in den Rest der Seite ein. */
	isolation: isolate;
	display: grid;
	place-items: center;
}

/* Der Inhalt liegt über den Deko-Kreisen. Ohne diese Regel entscheidet die
   Reihenfolge im Dokument – die Kreise sind Pseudo-Elemente und stehen dort
   hinter dem Inhalt, würden ihn also überdecken. Auf breiten Viewports fällt
   das nicht auf, auf dem Handy legt sich der linke Kreis über das Gerät. */
.is-style-panel > * {
	position: relative;
	z-index: 1;
}

/* Im Editor liegt zwischen Panel und Inhalt noch die Block-Hülle. Weil das
   Panel seine Kinder zentriert (`place-items: center`), schrumpft diese Hülle
   sonst auf die Breite des Geräts – die schwebenden Karten säßen dann viel zu
   weit innen. */
.editor-styles-wrapper .is-style-panel > [data-type="eb/app-showcase"] {
	width: 100%;
}

.is-style-glass {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: 0 18px 40px rgba(56, 24, 44, 0.14);
}

/* CTA-Band: Farbe kommt aus den normalen Hintergrund-Einstellungen. */
.is-style-cta-band {
	border-radius: var(--wp--custom--radius--x-large);
	padding: 58px;
}

/* Die Schaltfläche behält ihre Breite, die Überschrift bricht stattdessen um. */
.is-style-cta-band > .wp-block-buttons {
	flex: 0 0 auto;
}

.is-style-cta-band .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.is-style-cta-band {
		flex-direction: column;
		align-items: flex-start;
		padding: 34px 24px;
	}
}

/* Trust-Leiste mit Trennlinien zwischen den Spalten.
   Die Rahmenlinie sitzt nur auf der äußeren Gruppe – der Spalten-Block trägt
   dieselbe Klasse für die senkrechten Trenner und würde sie sonst verdoppeln. */
.wp-block-group.is-style-trust-strip {
	border-block: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
}

.wp-block-columns.is-style-trust-strip {
	padding-block: 25px;
}

.is-style-trust-strip .wp-block-column {
	padding-inline: 28px;
	border-right: 1px solid var(--wp--preset--color--line);
}

.is-style-trust-strip .wp-block-column:first-child {
	padding-left: 0;
}

.is-style-trust-strip .wp-block-column:last-child {
	border-right: 0;
}

/* Auf Mobilgeräten 2 × 2 statt vier gequetschter Spalten.
   `!important` ist hier nötig, weil der Core für `is-not-stacked-on-mobile`
   selbst mit `!important` arbeitet. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-trust-strip {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-style-trust-strip .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
		flex-grow: 0;
		border-right: 0;
		padding-inline: 0;
		padding-block: 10px;
	}
}

/* Nummerierte Schritte – die Nummer erzeugt CSS, nicht der Redakteur. */
.is-style-steps {
	counter-reset: eb-step;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
	gap: 1px;
	background-color: var(--wp--preset--color--line);
}

.is-style-steps > * {
	counter-increment: eb-step;
	background-color: var(--wp--preset--color--base);
	padding: clamp(1.5rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: 70px 1fr;
	align-items: start;
	margin: 0;
}

.is-style-steps > *::before {
	content: "0" counter(eb-step);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	grid-row: 1 / span 99;
}

.is-style-steps > * > * {
	grid-column: 2;
}

@media (max-width: 620px) {
	.is-style-steps > * {
		grid-template-columns: 52px 1fr;
	}
}

/*
 * Zeitleiste: senkrechte Linie mit einem Punkt je Eintrag.
 *
 * Anders als bei den Schritten steht links kein Zähler, sondern das Datum –
 * und das gehört in den Text, nicht ins Stylesheet. Die Linie liegt hinter den
 * Punkten, deshalb reicht ein durchgehendes ::before am Container.
 */
.is-style-timeline {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding-left: 34px;
	max-width: 820px;
	margin-inline: auto;
}

.is-style-timeline::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 5px;
	width: 2px;
	background-color: var(--wp--preset--color--line);
}

.is-style-timeline > * {
	position: relative;
	margin: 0;
}

.is-style-timeline > *::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -34px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

/* Der letzte Punkt ist der offene: hier geht es weiter. */
.is-style-timeline > :last-child::before {
	background-color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}

/* Artikelkarte: Bild oben, Text unten, komplett klickbar. */
.is-style-article-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s var(--eb-ease), box-shadow 0.25s var(--eb-ease);
}

.is-style-article-card:hover,
.is-style-article-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.is-style-article-card .wp-block-image,
.is-style-article-card .wp-block-post-featured-image,
.is-style-article-card figure {
	margin: 0;
}

/* Farbige Nummernfläche oben auf der Artikelkarte (Alternative zum Foto). */
.is-style-article-art {
	height: 190px;
	padding: 24px;
	display: flex;
	align-items: flex-end;
}

/* Der Präfix hält die Spezifität über der Textfarben-Regel der Artikelkarte
   weiter oben – sonst bekämen alle Nummern deren Farbe statt der eigenen. */
:is(.wp-site-blocks, .editor-styles-wrapper) .is-style-article-art p {
	margin-block: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Editorial-Panel: Bild füllt seine Spalte randlos, feste Höhe wie im Original.
   Als Grid statt Flex, damit das Spaltenverhältnis exakt 1,05 : 0,95 bleibt und
   der Textblock die Bildspalte nicht zusammenschiebt. */
/* Drei Klassen, um den Flex-Layout-Stil des Spalten-Blocks zu überstimmen. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-columns.eb-editorial {
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	min-height: 340px;
}

.eb-editorial > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: auto;
	min-width: 0;
}

@media (max-width: 781px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-columns.eb-editorial {
		grid-template-columns: 1fr;
	}
}

/* Das Bild wächst auf die volle Zeilenhöhe mit – auch wenn der Textblock
   daneben höher wird als die Mindesthöhe der Sektion. */
.eb-editorial .wp-block-image {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
}

.eb-editorial .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 781px) {
	.eb-editorial .wp-block-image img {
		height: 250px;
		min-height: 0;
	}
}

/* Gilt für statische Bilder wie für das Beitragsbild aus dem Query-Loop –
   sonst haben die Karten unterschiedlich hohe Bildbereiche. */
.is-style-article-card .wp-block-image img,
.is-style-article-card .wp-block-post-featured-image img {
	display: block;
	border-radius: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ----------------------------------------------------- 7b. Wissensbereich */

.eb-knowledge-search {
	max-width: 620px;
}

.eb-knowledge-search .wp-block-search__inside-wrapper {
	min-height: 58px;
	padding: 5px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

.eb-knowledge-search .wp-block-search__input {
	padding-inline: 20px;
	border: 0;
	background: transparent;
	font-size: 1rem;
}

.eb-knowledge-search .wp-block-search__input:focus,
.eb-knowledge-search .wp-block-search__input:focus-visible {
	outline: 0;
}

/* Ein einziger, ruhiger Fokusrahmen umfasst das komplette Suchfeld. So sitzt
   der Ring nicht zwischen Eingabe und Suchknopf und die Pillenform bleibt
   optisch geschlossen. */
.eb-knowledge-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	border-color: var(--wp--preset--color--primary);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent),
		var(--wp--preset--shadow--soft);
}

.eb-knowledge-search .wp-block-search__button {
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.eb-knowledge-search:not(.wp-block-search__icon-button) .wp-block-search__button {
	width: auto;
	min-width: 104px;
	padding-inline: 22px;
	border-radius: 999px;
}

/* Kategorie- und Taxonomiearchive: Einstieg, Suche und Beitragsliste bilden
   eine zusammenhängende Wissensseite statt drei voneinander gelöster Blöcke. */
.eb-archive-hero {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 72%, transparent);
	/* Nur der gerichtete Verlauf, kein aufgesetzter heller Kreis mehr: Der saß
	   ohne Bezug zu irgendeinem Inhalt in der Ecke. */
	background: linear-gradient(135deg, var(--wp--preset--color--cream) 0%, #fff2ef 100%);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-columns.eb-archive-hero__layout {
	align-items: center;
}

.eb-archive-hero__copy {
	min-width: 0;
}

.eb-archive-back {
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.eb-archive-back a {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s var(--eb-ease), transform 0.2s var(--eb-ease);
}

.eb-archive-back a:hover,
.eb-archive-back a:focus-visible {
	color: var(--wp--preset--color--primary);
	transform: translateX(-3px);
}

.eb-archive-hero .wp-block-query-title {
	max-width: 760px;
	margin-block: 0;
}

.eb-archive-hero .wp-block-term-description {
	max-width: 650px;
	margin: 22px 0 0;
}

.eb-archive-hero .wp-block-term-description > :first-child {
	margin-top: 0;
}

.eb-archive-hero .wp-block-term-description > :last-child {
	margin-bottom: 0;
}

.eb-archive-search-panel {
	box-sizing: border-box;
	padding: clamp(1.75rem, 4vw, 2.6rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 88%, transparent);
	border-radius: var(--wp--custom--radius--x-large);
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	box-shadow: var(--wp--preset--shadow--card);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.eb-archive-search-panel > :first-child {
	margin-top: 0;
}

.eb-archive-search-panel .wp-block-heading {
	margin-block: 0;
}

.eb-archive-search-panel .eb-knowledge-search {
	max-width: none;
	margin-top: 24px;
}

.eb-archive-search-panel .eb-knowledge-search .wp-block-search__inside-wrapper {
	box-shadow: none;
}

.eb-archive-content {
	background: var(--wp--preset--color--base);
}

.eb-archive-intro {
	align-items: flex-end;
	gap: 24px 48px;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.eb-archive-intro :is(.is-style-eyebrow, .wp-block-heading),
.eb-archive-intro__copy {
	margin-block: 0;
}

.eb-archive-intro__copy {
	max-width: 440px;
	line-height: 1.65;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template.eb-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	align-items: stretch;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.eb-archive-grid > .wp-block-post {
	min-width: 0;
}

.eb-archive-card {
	border-radius: var(--wp--custom--radius--x-large);
}

.eb-archive-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
}

.eb-archive-card__meta {
	gap: 8px 20px;
}

.eb-archive-date,
.eb-archive-date a {
	color: var(--wp--preset--color--muted);
	font-size: 0.76rem;
	font-weight: 650;
	line-height: 1.4;
	text-decoration: none;
}

.eb-archive-card .wp-block-post-title {
	line-height: 1.18;
}

.eb-archive-card .wp-block-post-excerpt {
	margin-bottom: 0;
	line-height: 1.65;
}

.eb-archive-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 22px;
	color: var(--wp--preset--color--contrast);
	font-weight: 750;
	text-decoration: none;
}

.eb-archive-pagination {
	gap: 8px;
}

.eb-archive-pagination :is(a, .page-numbers) {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 13px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
}

.eb-archive-pagination .page-numbers.current,
.eb-archive-pagination a:hover,
.eb-archive-pagination a:focus-visible {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.eb-archive-empty {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 782px) and (max-width: 1023px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template.eb-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 781px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-columns.eb-archive-hero__layout,
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template.eb-archive-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.eb-archive-hero__layout {
		gap: 36px;
	}

	.eb-archive-back {
		margin-bottom: 2rem;
	}

	.eb-archive-intro {
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.eb-archive-search-panel {
		padding: 24px;
		border-radius: var(--wp--custom--radius--large);
	}

	.eb-archive-card .eb-archive-card__body {
		padding: 24px !important;
	}

	.eb-archive-card .wp-block-post-title {
		font-size: 1.25rem !important;
	}
}

.eb-popular-links > p {
	margin: 0;
	font-size: 0.86rem;
}

.eb-popular-links > p:not(:first-child) a {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: none;
}

.eb-topic-grid {
	align-items: stretch;
}

.eb-topic-card {
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

/* Der Titel-Link wird als transparenter Stretched Link über die jeweilige
   Karte gelegt. Sichtbare Links bleiben darüber einzeln bedienbar. */
:is(.eb-topic-card, .eb-action-card, .eb-guide-feature, .is-style-article-card) {
	position: relative;
	cursor: pointer;
}

:is(.eb-topic-card h3, .eb-action-card h3, .eb-guide-feature h2, .eb-guide-feature h3, .is-style-article-card .wp-block-post-title) > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Der allgemeine Kartenstil positioniert seine direkten Kinder relativ. Für
   den Stretched Link müssen Titel und Text-Innenhülle statisch bleiben, damit
   die komplette Außenkarte der Bezugsrahmen ist. */
:is(.eb-topic-card h3, .eb-action-card h3, .eb-guide-feature h2, .eb-guide-feature h3),
.is-style-article-card > .wp-block-group {
	position: static !important;
	z-index: auto !important;
}

:is(.eb-topic-card, .eb-action-card, .eb-guide-feature, .is-style-article-card) :is(.eb-card-link a, .wp-block-post-terms a, .wp-block-post-featured-image a) {
	position: relative;
	z-index: 3;
}

:is(.eb-topic-card, .eb-action-card, .eb-guide-feature, .is-style-article-card):focus-within {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

:is(.eb-topic-card h3, .eb-action-card h3, .eb-guide-feature h2, .eb-guide-feature h3, .is-style-article-card .wp-block-post-title) > a:focus-visible {
	outline: 0;
}

/* Form und Farbe stehen beim Nummern-Badge (Abschnitt 4). Hier bleibt nur der
   Abstand zur Überschrift – der gehört zur Themenkachel, nicht zur Nummer. */
.eb-topic-number {
	margin: 0 0 22px;
}

.eb-topic-card h3 a,
.eb-action-card h3 a,
.eb-guide-feature h2 a,
.eb-guide-feature h3 a {
	color: inherit;
	text-decoration: none;
}

.eb-card-link {
	margin-top: auto;
	font-size: 0.92rem;
	font-weight: 750;
}

.eb-card-link a {
	color: inherit;
	text-decoration: none;
}

.eb-card-link span {
	display: inline-block;
	transition: transform 0.2s var(--eb-ease);
}

:is(.eb-topic-card, .eb-action-card, .eb-guide-feature):hover .eb-card-link span,
:is(.eb-topic-card, .eb-action-card, .eb-guide-feature):focus-within .eb-card-link span {
	transform: translateX(4px);
}

.eb-featured-guides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Core gibt aufeinanderfolgenden Kindern eines Flow-Groups einen oberen
   Blockabstand. Sobald die Gruppe zum Grid wird, darf dieser Abstand nicht
   zusätzlich zum Grid-Gap bestehen bleiben. */
.eb-featured-guides > .eb-guide-feature {
	margin-block-start: 0;
}

.eb-guide-feature {
	min-width: 0;
}

.eb-guide-feature__image {
	position: relative;
	z-index: 1;
}

.eb-guide-feature__body {
	flex: 1;
}

.eb-guide-feature__body > * {
	margin-block: 0;
}

.eb-guide-feature h3 {
	text-wrap: balance;
}

.eb-guide-feature__meta {
	justify-content: space-between;
	gap: 8px 14px;
}

.eb-guide-feature__meta > * {
	margin: 0;
}

.eb-action-card {
	display: flex;
	flex-direction: column;
	min-height: 280px;
}

/* Ruhige, gut scanbare Langform statt einer endlosen Textspalte. */
.eb-article-hero .wp-block-post-title {
	text-wrap: balance;
}

.eb-article-hero .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Der globale Lead-Stil ist für Landingpages auf 650 px begrenzt. Im
   Artikelkopf soll der Teaser dagegen bündig unter dem Titel stehen. */
.eb-article-hero .wp-block-post-excerpt.is-style-lead {
	max-width: 860px;
	text-align: left;
}

.eb-article-meta p,
.eb-article-meta time {
	margin: 0;
}

.eb-article-prose .wp-block-post-content > :where(h2) {
	margin-top: clamp(48px, 7vw, 76px);
	margin-bottom: 18px;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	text-wrap: balance;
}

.eb-article-prose .wp-block-post-content > :where(h3) {
	margin-top: 36px;
	margin-bottom: 12px;
	font-size: clamp(1.28rem, 2vw, 1.55rem);
}

.eb-article-prose .wp-block-post-content > :where(p, ul, ol) {
	line-height: 1.78;
}

/*
 * Fließtext-Links.
 *
 * `theme.json` stellt alle Links auf `currentColor` ohne Unterstreichung – für
 * Navigation, Karten und Sektionen richtig, im Fließtext aber unsichtbar. Die
 * Rechts- und Utility-Seiten (`eb-prose`) brauchen dieselbe Kennzeichnung wie
 * die Artikel: Auf dem Impressum stand die Kontaktadresse sonst als gewöhnlicher
 * Text da, und ein nicht erkennbarer Link ist auf genau dieser Seite der
 * schlechteste Ort zum Sparen.
 *
 * Landingpages sind bewusst nicht dabei: Dort führen Schaltflächen und
 * Kartenlinks, und ein pinkes Wort mitten in einer Sektion wäre Lärm.
 */
.eb-article-prose .wp-block-post-content > p a:not(.wp-element-button),
.eb-prose .wp-block-post-content > :is(p, ul, ol) a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
	font-weight: 650;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * Abschnittsmarken statt Sektionsüberschriften.
 *
 * `theme.json` gibt jedem h2 die Sektionsgröße (2,95 rem). Auf einer Landingpage
 * trägt eine Überschrift dieser Größe einen ganzen Abschnitt – auf dem Impressum
 * steht sie über einer einzigen Zeile. „Kontakt" war dort 48 px groß, der
 * Seitentitel „Impressum" 56: zwei fast gleich laute Stimmen, und die
 * Gliederung ging darin unter.
 *
 * Hier sind h2 Marken über kurzen Antworten, keine Sektionsköpfe. Sie liegen
 * deshalb knapp über der Textgröße und holen ihre Wirkung aus dem Abstand:
 * viel Luft davor, wenig danach, damit Marke und Antwort als Paar lesen.
 *
 * Das enge `letter-spacing` der Anzeigegrößen wird dabei zurückgenommen – bei
 * -0,035 em kleben die Buchstaben in dieser Größe aneinander.
 */
.eb-prose .wp-block-post-content > :is(h2, h3) {
	letter-spacing: -0.015em;
	line-height: 1.28;
}

.eb-prose .wp-block-post-content > h2 {
	margin-top: clamp(38px, 5vw, 46px);
	margin-bottom: 6px;
	font-size: clamp(1.3rem, 2.4vw, 1.55rem);
}

.eb-prose .wp-block-post-content > h3 {
	margin-top: 30px;
	margin-bottom: 4px;
	font-size: 1.08rem;
}

/* Die erste Marke braucht den großen Vorlauf nicht – über ihr steht der
   Einstiegsabsatz, nicht der vorige Abschnitt. */
.eb-prose .wp-block-post-content > :is(h2, h3):first-child {
	margin-top: 0;
}

.eb-article-prose .wp-block-table {
	margin-block: 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
}

.eb-article-prose .wp-block-table :is(th, td) {
	padding: 14px 16px;
	border-color: var(--wp--preset--color--line);
}

.is-style-article-summary,
.is-style-article-tip,
.is-style-article-source,
.is-style-article-toc {
	margin-block: 34px;
	padding: clamp(24px, 4vw, 34px);
	border-radius: 22px;
}

.is-style-article-summary {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	background: var(--wp--preset--color--peach);
}

.is-style-article-toc {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--cream);
}

.is-style-article-toc ol {
	margin: 0;
	padding-left: 1.35rem;
}

.is-style-article-toc li + li {
	margin-top: 8px;
}

.is-style-article-toc a {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: none;
}

.is-style-article-tip {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--cream);
}

/* Links in verschachtelten Artikelboxen werden von der Absatzregel oberhalb
   nicht erfasst. Sie brauchen deshalb eine dauerhaft sichtbare, nicht nur vom
   Hover abhängige Kennzeichnung – im Frontend ebenso wie im Editor. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(
	.is-style-article-summary,
	.is-style-article-tip,
	.is-style-article-source
) a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 650;
	text-decoration-line: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) :is(
	.is-style-article-summary,
	.is-style-article-tip,
	.is-style-article-source
) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--secondary);
	text-decoration-thickness: 2px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) :is(
	.is-style-article-summary,
	.is-style-article-tip,
	.is-style-article-source
) a:not(.wp-element-button):focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.is-style-article-source {
	border: 1px solid var(--wp--preset--color--line);
	background: color-mix(in srgb, var(--wp--preset--color--muted) 6%, var(--wp--preset--color--base));
}

.is-style-article-summary > :first-child,
.is-style-article-tip > :first-child,
.is-style-article-source > :first-child,
.is-style-article-toc > :first-child {
	margin-top: 0;
}

.is-style-article-summary > :last-child,
.is-style-article-tip > :last-child,
.is-style-article-source > :last-child,
.is-style-article-toc > :last-child {
	margin-bottom: 0;
}

.eb-article-navigation {
	gap: 24px;
}

.eb-article-navigation a {
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 781px) {
	.eb-featured-guides {
		grid-template-columns: 1fr;
	}

	/* Core leitet aus minimumColumnWidth eine feste Mindestbreite ab. Safari
	   hält diese bei schmalen Viewports teils auch im einspaltigen Grid fest. */
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		min-width: 0;
		max-width: 100%;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template.is-layout-grid > .wp-block-post,
	:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-post-template .is-style-article-card {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.eb-topic-card,
	.eb-action-card {
		min-height: 0;
	}

	.eb-article-navigation {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* FAQ: der Core-Details-Block bekommt ein Plus statt des Browser-Dreiecks. */
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform 0.25s var(--eb-ease);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	padding-top: 14px;
	padding-right: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details summary::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ 6. Listen-Stile */

/* Der Core rückt jede Liste ein: `:root :where(.wp-block-list){padding-left:1.2em}`.
   `:where()` zählt nicht, `:root` schon – die Regel hat damit exakt die
   Spezifität einer einzelnen Klasse, also Gleichstand mit unseren Listen-Stilen.
   Bei Gleichstand entscheidet die Ladereihenfolge, und die ist in beiden
   Umgebungen verschieden: im Frontend kommt `main.css` nach dem Core, im Editor
   davor. Ohne die zweite Klasse wären unsere Listen im Editor um 19 px
   eingerückt, auf der Seite nicht. Bewusst getrennt von den Stilen unten, damit
   auch Listen ohne `.wp-block-list` (Template-Parts) ihre Regel behalten. */
.wp-block-list.is-style-checklist,
.wp-block-list.is-style-features,
.wp-block-list.is-style-features-numbered,
.wp-block-list.eb-footer-list {
	padding-left: 0;
}

.is-style-checklist {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 12px;
}

/* Das Häkchen liegt absolut statt inline: im Editor steckt der Listentext in
   einem Block-Element, ein inline-Zeichen davor bekäme eine eigene Zeile. */
.is-style-checklist li {
	position: relative;
	padding-left: 26px;
}

.is-style-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
}

.is-style-features {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 18px;
}

/* Das Häkchen liegt absolut, damit der Fließtext des Listeneintrags
   ununterbrochen weiterlaufen kann – ein Grid würde jedes Kindelement
   in eine eigene Spalte zwingen. */
.is-style-features li {
	position: relative;
	padding-left: 45px;
	min-height: 30px;
}

.is-style-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--peach);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 800;
	font-size: 0.85rem;
}

.is-style-features li strong {
	display: block;
	margin-bottom: 2px;
}

.is-style-features li br {
	display: none;
}

.is-style-section-plum .is-style-features li::before,
.is-style-section-night .is-style-features li::before,
.is-style-section-plum .is-style-features-numbered li::before,
.is-style-section-night .is-style-features-numbered li::before {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--base);
}

.is-style-features strong,
.is-style-features-numbered strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	display: block;
}

/* Wie die Feature-Liste, aber mit fortlaufender Nummer statt Häkchen. */
.is-style-features-numbered {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 18px;
	counter-reset: eb-feature;
}

.is-style-features-numbered li {
	position: relative;
	padding-left: 51px;
	min-height: 36px;
	counter-increment: eb-feature;
}

.is-style-features-numbered li::before {
	content: "0" counter(eb-feature);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 0.68rem;
}

.is-style-features-numbered li br {
	display: none;
}

/* Store-Badges unter einem zentrierten Textblock. */
.eb-store-cta .eb-store-badges {
	justify-content: center;
}

/* ------------------------------------------------------------ 7. Medien-Stile */

/* Großzügig gerundeter Bildrahmen mit Innenschein. */
.wp-block-image.is-style-frame,
.wp-block-cover.is-style-frame {
	border-radius: var(--wp--custom--radius--x-large);
	overflow: hidden;
	position: relative;
	box-shadow: var(--eb-ring), var(--wp--preset--shadow--deep);
}

.wp-block-image.is-style-frame img {
	border-radius: 0;
	width: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--eb-ease);
}

.wp-block-image.is-style-frame:hover img {
	transform: scale(1.025);
}

/* Bildunterschrift als schwebende Notiz im Rahmen. */
.wp-block-image.is-style-frame figcaption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	margin: 0;
	padding: 17px 19px;
	border-radius: var(--wp--custom--radius--medium);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 15px 35px rgba(42, 22, 35, 0.13);
	color: var(--wp--preset--color--contrast);
	font-size: 0.86rem;
	text-align: left;
}

.wp-block-image.is-style-frame figcaption strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
}

/* Sekundäre Schaltfläche – identische Maße wie die primäre, nur heller.
   Deshalb kein `is-style-outline` aus dem Core. */
.wp-block-button.is-style-secondary > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--line);
	box-shadow: 0 8px 20px rgba(54, 24, 47, 0.06);
}

.wp-block-button.is-style-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-secondary > .wp-block-button__link:focus,
.wp-block-button.is-style-secondary > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--line);
}

/* Auf dunklen Sektionen bleibt sie hell, aber randlos. */
.is-style-section-plum .wp-block-button.is-style-secondary > .wp-block-button__link,
.is-style-section-night .wp-block-button.is-style-secondary > .wp-block-button__link {
	border-color: transparent;
}

/* Store-Badges nie hochskalieren. */
.eb-store-badges img {
	width: 154px;
	height: auto;
	border-radius: 9px;
	transition: transform 0.22s var(--eb-ease), filter 0.22s var(--eb-ease);
}

.eb-store-badges a:hover img {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

/* Überlappende Avatare in der Social-Proof-Zeile.
   Rahmen und Versatz gehören ausschließlich aufs Bild – liegen sie zusätzlich
   auf der Bildunterschrift-Hülle, verdoppelt sich beides. */
/* Die 32 px sind eine feste Größe, kein Wunsch: In einer schmalen Flex-Zeile –
   etwa der Bewertungskarte im mobilen Hero – geben Gruppe und Bilder sonst als
   Erstes nach und werden aus Kreisen Ovale (gemessen: 27,8 × 32). */
.eb-avatars {
	display: flex;
	align-items: center;
	flex: none;
}

.eb-avatars .wp-block-image {
	margin: 0;
	line-height: 0;
	flex: none;
}

.eb-avatars .wp-block-image + .wp-block-image {
	margin-left: -8px;
}

.eb-avatars img {
	display: block;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

/* --------------------------------------------------------------- 8. Bewegung */

@keyframes eb-reveal-in {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Scroll-gesteuerte Animation – ganz ohne JavaScript. Browser ohne
   Unterstützung zeigen den Inhalt einfach sofort an. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.eb-reveal {
			animation: eb-reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}

/* Im Editor stören Einblend-Animationen beim Bearbeiten. */
.editor-styles-wrapper .eb-reveal {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.is-style-card,
	.is-style-article-card,
	.wp-block-image.is-style-frame img,
	.eb-store-badges img {
		transition: none;
	}
}