/*
 * Emotion in Bewegung – ergänzende Regeln.
 *
 * Hier steht nur, was theme.json nicht kann: Fokuszustände, Block-Stile,
 * der Sticky-CTA auf dem Handy und das Mobilmenü.
 * Alle Werte kommen als Variablen aus theme.json. Keine festen Farben,
 * Größen oder Abstände in dieser Datei.
 */

/* ---------------------------------------------------------------------------
 * 1. Fokus: auf jeder Seite sichtbar, auch auf dunklem Grund.
 * ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--small);
}

.has-contrast-background-color :where(a, button, summary):focus-visible,
.has-ink-background-color :where(a, button, summary):focus-visible,
.has-accent-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

.wp-block-button__link:focus-visible {
	outline-offset: 4px;
}

/* Tippziel: mindestens 48 px hoch, im Kopfbereich 44 px. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
}

/* Beim Überfahren läuft ein heller Schimmer über die Schaltfläche.
   Das ist Bewegung im Wortsinn und bleibt in der warmen Familie,
   statt die Fläche abzudunkeln. Es bewegt sich nur die Farbe, keine
   Geometrie: ein "transform" würde den unsichtbaren Klickbereich
   über den Kurskacheln kaputt machen. */
.wp-block-button:not(.is-style-outline):not(.is-style-eib-hell):not(.is-style-eib-dunkel) > .wp-block-button__link {
	background-image: linear-gradient(
		100deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent) 35%,
		var(--wp--custom--color--accent-hell) 55%,
		var(--wp--preset--color--accent) 75%,
		var(--wp--preset--color--accent) 100%
	);
	background-size: 260% 100%;
	background-position: 100% 0;
	transition: background-position 600ms ease, box-shadow 200ms ease;
}

.wp-block-button:not(.is-style-outline):not(.is-style-eib-hell):not(.is-style-eib-dunkel) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-eib-hell):not(.is-style-eib-dunkel) > .wp-block-button__link:focus-visible {
	background-position: 0 0;
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Dunkler Knopf für die Einzelbegleitung. Er nimmt das Orange nicht auf,
   damit die empfohlene Karte der einzige orange Knopf im Abschnitt bleibt,
   und wirkt dadurch ruhiger und hochwertiger. */
.wp-block-button.is-style-eib-dunkel > .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.wp-block-button.is-style-eib-dunkel > .wp-block-button__link:hover,
.wp-block-button.is-style-eib-dunkel > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--soft);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button > .wp-block-button__link {
		transition: none;
	}
}

.eib-header .wp-block-button__link {
	min-height: 2.75rem;
}

/* Tastatur-Sprunglink */
.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--small);
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * 2. Block-Stile aus functions.php
 * ------------------------------------------------------------------------- */

/* Karte. Gilt für Gruppen und für Spalten, beide werden so verwendet. */
.is-style-eib-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-eib-card-outline {
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
}

/* Spalten, die als Karten wirken: gleiche Höhe, Inhalt oben, Button unten */
.wp-block-columns.is-style-eib-cards > .wp-block-column {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-columns.is-style-eib-cards > .wp-block-column > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* Überzeile (core/paragraph speichert ohne eigene Block-Klasse).
   Die Farbe wird geerbt, damit sie auf jedem Hintergrund den Kontrast hält.
   Terrakotta hat als Textfarbe auf Beige nur 2,7:1 und fällt bei WCAG AA durch.
   Den warmen Akzent trägt stattdessen der kurze Strich davor. */
p.is-style-eib-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	margin-bottom: var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	gap: 0.7em;
}

p.is-style-eib-eyebrow::before {
	content: "";
	flex: none;
	width: 1.6em;
	height: 2px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
}

.has-contrast-background-color p.is-style-eib-eyebrow::before,
.has-ink-background-color p.is-style-eib-eyebrow::before {
	background-color: var(--wp--preset--color--base);
}

.has-earth-background-color p.is-style-eib-eyebrow::before {
	background-color: var(--wp--preset--color--ink);
}

p.is-style-eib-eyebrow.has-text-align-center {
	justify-content: center;
}

/* Einleitung. Gleiche Größe wie der Fließtext, nur etwas luftiger.
   Größer wird nur die Unterzeile im Hero. */
p.is-style-eib-lead {
	line-height: 1.5;
}

.eib-hero-panel p.is-style-eib-lead {
	font-size: var(--wp--preset--font-size--large);
}

/* Überschrift mit kurzem Strich darunter */
.wp-block-heading.is-style-eib-underline::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
}

.wp-block-heading.is-style-eib-underline.has-text-align-center::after {
	margin-inline: auto;
}

/* Haken-Liste */
.wp-block-list.is-style-eib-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-eib-checks > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.wp-block-list.is-style-eib-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2.5px solid var(--wp--preset--color--accent);
	border-bottom: 2.5px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

.has-contrast-background-color .wp-block-list.is-style-eib-checks > li::before,
.has-ink-background-color .wp-block-list.is-style-eib-checks > li::before {
	border-color: var(--wp--preset--color--base);
}

.has-earth-background-color .wp-block-list.is-style-eib-checks > li::before {
	border-color: var(--wp--preset--color--ink);
}

/* Marke statt Haken: vor jedem Punkt steht das Herz aus dem Logo. Es ist
   als Maske eingebunden, die Farbe kommt also aus dem Stylesheet und nicht
   aus der Datei. Browser ohne Maskenunterstützung behalten den Haken. */
@supports ((mask-image: url("../images/logo-eib.png")) or (-webkit-mask-image: url("../images/logo-eib.png"))) {
	.wp-block-list.is-style-eib-checks > li::before,
	.has-contrast-background-color .wp-block-list.is-style-eib-checks > li::before,
	.has-ink-background-color .wp-block-list.is-style-eib-checks > li::before {
		top: 0.22em;
		width: 1.05em;
		height: 1.05em;
		border: 0;
		transform: none;
		background-color: var(--wp--preset--color--accent);
		-webkit-mask: url("../images/logo-eib.png") no-repeat center / contain;
		mask: url("../images/logo-eib.png") no-repeat center / contain;
	}

	/* Auf Terrakotta geht das Orange unter. */
	.has-earth-background-color .wp-block-list.is-style-eib-checks > li::before {
		background-color: var(--wp--preset--color--ink);
	}
}

/* Gedanken-Liste: für die kreisenden Fragen im Kurs-Hero */
.wp-block-list.is-style-eib-thoughts {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-eib-thoughts > li {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.wp-block-list.is-style-eib-thoughts > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid var(--wp--preset--color--earth);
}

/* Porträt: hochformatiges Bild mit weicher Kante */
.wp-block-image.is-style-eib-portrait img {
	border-radius: var(--wp--custom--radius--media);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* --- Raster mit fester Spaltenzahl ---------------------------------------
 * Das Raster von WordPress füllt mit "auto-fill" so viele Spalten, wie
 * hineinpassen. Bei drei Karten bleibt dann rechts eine leere Spur und
 * alles hängt links. Ab der jeweiligen Breite geben wir die Spaltenzahl
 * deshalb selbst vor, darunter bleibt der Umbruch automatisch.
 * ------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-group.eib-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.wp-block-group.eib-grid-3,
	.wp-block-group.eib-versprechen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Versprechen-Leiste unter dem Hero ---------------------------------- */

.eib-versprechen > .wp-block-group {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--accent);
}

/* Das Band ist ein Zwischenruf, kein eigener Abschnitt: enge Zeilen,
   kleiner Fließtext, wenig Luft nach oben und unten. */
.eib-versprechen > .wp-block-group > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.eib-versprechen > .wp-block-group > p:not(.has-large-font-size) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* --- Kursablauf: die Schritte laufen untereinander ----------------------
 * Eine Linie verbindet sie. Sie zeigt, dass es weitergeht, und gibt der
 * Sektion die Bewegung, die sonst nur im Namen steckt.
 */

.wp-block-group.eib-schritte {
	max-width: 880px;
	margin-inline: auto;
	position: relative;
}

.eib-schritt {
	position: relative;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
}

/* Ab dieser Breite ist links Platz für die Linie. Sie läuft durchgehend
   hinter den Karten, die Punkte sitzen gefüllt darauf. */
@media (min-width: 1000px) {
	.eib-schritte {
		padding-left: 4rem;
	}

	.eib-schritte::before {
		content: "";
		position: absolute;
		left: 1.25rem;
		top: 2.6rem;
		bottom: 2.6rem;
		width: 2px;
		border-radius: var(--wp--custom--radius--pill);
		background: linear-gradient(
			to bottom,
			var(--wp--preset--color--accent),
			var(--wp--preset--color--earth)
		);
	}

	.eib-schritt::before {
		content: "";
		position: absolute;
		left: -3.25rem;
		top: 2.1rem;
		width: 1rem;
		height: 1rem;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--preset--color--accent);
		box-shadow: 0 0 0 4px var(--wp--preset--color--base);
	}
}

/* --- Kursrahmen: vier Kacheln im Zweier-Raster -------------------------- */

@media (max-width: 599px) {
	.wp-block-group.eib-fakten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Zertifikate auf der Seite Über mich -------------------------------- */

.eib-zertifikat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
}

/* Die Urkunde ist ein Dokument, kein Motiv. Sie bekommt einen hellen
   Rahmen und wird vollständig gezeigt, nicht beschnitten. */
.eib-zertifikat .wp-block-image img {
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
}

@media (min-width: 782px) {
	.wp-block-columns.eib-zertifikate {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@supports (grid-template-rows: subgrid) {
		.wp-block-columns.eib-zertifikate {
			/* Urkunde · Titel · Angaben */
			grid-template-rows: auto auto 1fr;
		}

		.eib-zertifikat {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
		}

		.eib-zertifikat > * {
			align-self: start;
			margin-block: 0;
		}
	}
}

/* --- Google-Bewertungen ------------------------------------------------- */

.eib-bewertungen {
	text-align: center;
}

/* Im Hero sitzt das Siegel direkt unter den Schaltflächen und
   richtet sich am Text aus, nicht in der Mitte. */
.eib-bewertungen-hero {
	text-align: left;
	margin-top: calc(var(--wp--preset--spacing--50) * -0.4);
}

.eib-bewertungen-hero .ti-widget {
	margin-left: -0.35rem;
}

/* Abschluss-Fläche: dunkle Karte auf hellem Grund statt farbigem Vollband. */
.eib-cta-panel {
	border-radius: var(--wp--custom--radius--card);
}

/* Offene Stelle: fällt im Editor und auf der Seite auf und wird
   nach dem Ausfüllen entfernt. */
.eib-todo {
	outline: 2px dashed var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--small);
}

/* --- Preiskarten -------------------------------------------------------
 * Die drei Karten müssen Zeile für Zeile auf einer Linie liegen:
 * Überzeile, Titel, Preis, Leistungen, Schaltfläche. Sonst wirkt der
 * wichtigste Abschnitt der Seite unruhig. Dafür sorgt subgrid.
 */

.eib-price-cards > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	/* Oben etwas mehr Luft, damit das Band Platz hat. Alle Karten
	   bekommen denselben Wert, sonst verrutschen die Zeilen. */
	padding: calc(var(--wp--preset--spacing--50) + 0.6rem) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--card);
}

/* In den Karten sorgt allein das "gap" für die Abstände. Ohne diese Zeile
   kommt der Blockabstand von WordPress als Außenabstand obendrauf und die
   Karte fällt auseinander. */
.eib-price-cards > .wp-block-column > *,
.eib-kurs-kachel > * {
	margin-block: 0;
}

.eib-price-cards > .wp-block-column > .wp-block-buttons {
	margin-top: auto;
}

/* Preis: größer als der Rest, aber nicht als Überschrift ausgezeichnet. */
.eib-price-cards .has-xx-large-font-size {
	line-height: 1.1;
}

@media (min-width: 782px) {
	.wp-block-columns.eib-price-cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@supports (grid-template-rows: subgrid) {
		.wp-block-columns.eib-price-cards {
			/* Überzeile · Titel · Preis · Versprechen · Leistungen ·
			   Schaltfläche · Hinweis. Die letzte Zeile bleibt leer, wenn
			   eine Karte keinen Hinweis hat, und kostet dann keine Höhe. */
			grid-template-rows: auto auto auto auto 1fr auto auto;
		}

		.eib-price-cards > .wp-block-column {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 7;
		}

		/* Jedes Element oben an seiner Zeile, und die Abstände kommen
		   allein aus dem Raster. Sonst sitzen die Zeilen unterschiedlich. */
		.eib-price-cards > .wp-block-column > * {
			align-self: start;
			margin-block: 0;
		}

		/* Im Raster schiebt das Raster die Schaltfläche nach unten,
		   nicht mehr der automatische Abstand. */
		.eib-price-cards > .wp-block-column > .wp-block-buttons {
			margin-top: 0;
		}
	}
}

/* Die empfohlene Karte soll als Erstes auffallen: oranger Ring, kräftiger
   Schatten, das Band und ein Hauch Orange in der Fläche. Der Ring liegt
   außen und ändert die Kartengröße nicht. Eine dickere Rahmenlinie würde
   den Inhalt um einen Pixel verschieben und die Zeilen der drei Karten
   gegeneinander verrutschen lassen. */
.eib-price-cards > .wp-block-column.eib-price-featured {
	border-color: var(--wp--preset--color--accent);
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent),
		transparent 55%
	);
	box-shadow:
		0 0 0 2px var(--wp--preset--color--accent),
		var(--wp--preset--shadow--lifted);
}

/* Das reine Orange erreicht als Zahl auf Weiß nur 2,7:1. Der dunklere
   Ton kommt auf 3,4:1 und bleibt trotzdem deutlich orange. */
.eib-price-cards > .wp-block-column.eib-price-featured .has-xx-large-font-size {
	color: var(--wp--custom--color--accent-hover);
}

/* Die Einzelbegleitung ist die teuerste Stufe. Sie bleibt hell wie die
   anderen beiden Karten und wirkt über Zurückhaltung: eine dunkle
   doppelte Kontur, ein warmer Schimmer in der Fläche und ein dunkler
   Knopf. Der Ring liegt wie bei der empfohlenen Karte außen und
   verschiebt die Zeilen der drei Karten deshalb nicht. */
.eib-price-cards > .wp-block-column.eib-price-premium {
	border-color: var(--wp--preset--color--contrast);
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--earth) 12%, transparent),
		transparent 55%
	);
	box-shadow:
		0 0 0 2px var(--wp--preset--color--contrast),
		var(--wp--preset--shadow--lifted);
}

/* Der Strich vor der Überzeile greift den Erdton der Karte auf. */
.eib-price-cards > .wp-block-column.eib-price-premium p.is-style-eib-eyebrow::before {
	background-color: var(--wp--preset--color--earth);
}

/* Das Werteversprechen steht zwischen Preis und Leistungen. Eine
   Haarlinie darunter trennt Nutzen und Inhalt, ohne eine weitere
   Schriftgröße einzuführen. */
.eib-price-claim {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--custom--color--line);
}

.eib-price-cards > .wp-block-column.eib-price-featured .eib-price-claim {
	border-block-end-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

.eib-price-cards > .wp-block-column.eib-price-premium .eib-price-claim {
	border-block-end-color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

/* Kein Versatz und kein anderer Innenabstand für die empfohlene Karte:
   beides würde die Zeilen der drei Karten gegeneinander verschieben.
   Die Betonung kommt allein aus Ring, Fläche, Preisfarbe und Band. */

/* Kleiner Hinweis direkt unter einer Schaltfläche. */
.eib-cta-hinweis {
	margin-block-start: var(--wp--preset--spacing--30);
	text-align: center;
	opacity: 0.85;
}

.eib-price-cards > .wp-block-column > .eib-cta-hinweis {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Das Band sitzt auf der Kartenkante und zählt nicht als Zeile mit. Es
   beginnt an derselben Linie wie der Text darunter, nicht in der Mitte:
   so liest sich die Karte von links nach unten durch. */
.eib-badge {
	position: absolute;
	top: 0;
	left: var(--wp--preset--spacing--40);
	transform: translateY(-50%);
	margin: 0;
	padding: 0.4rem 1.1rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Liste ohne Punkte, für Fuß- und Linklisten */
.wp-block-list.eib-plain-list {
	list-style: none;
}

/* ---------------------------------------------------------------------------
 * 2b. Sektionen stoßen aneinander
 *
 * WordPress setzt zwischen den Blöcken auf oberster Ebene einen Abstand.
 * Da jede Sektion eine eigene Hintergrundfarbe hat, blitzt dieser Abstand
 * sonst als heller Streifen zwischen den Sektionen durch. Jede Sektion
 * bringt ihren Innenabstand selbst mit.
 * ------------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Kopfbereich
 * ------------------------------------------------------------------------- */

/* Kein backdrop-filter auf der Kopfleiste. Der Hintergrund ist ohnehin
   deckend, und ein Filter macht die Leiste zum Bezugsrahmen für alles,
   was darin "fixed" positioniert ist. Genau daran ist das Menü gescheitert:
   es konnte nur so hoch werden wie die Leiste selbst. */
.eib-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .eib-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* --- Menü über die ganze Seite -----------------------------------------
 * Auf dem Handy geht das Menü als dunkle Fläche über den ganzen Bildschirm
 * auf: oben das Kreuz, in der Mitte die Punkte, darunter die Schaltfläche
 * und ganz unten die Kanäle. Alles ohne Scrollen erreichbar.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-bottom: calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom));
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin-top: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	align-self: flex-end;
	margin-bottom: var(--wp--preset--spacing--60);
	padding: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

/* Die Liste löst sich im Menü auf, damit Punkte, Schaltfläche und Kanäle
   in einer gemeinsamen Spalte liegen und frei sortiert werden können.
   Die Vorlesereihenfolge bleibt gleich, die Listenrolle setzt
   functions.php nach. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	display: contents;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	justify-content: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Die Schaltfläche steht im Menü unter den Punkten, über die volle Breite. */
.wp-block-navigation__responsive-container.is-menu-open .eib-menu-cta {
	order: 8;
	width: 100%;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .eib-menu-cta .wp-block-button,
.wp-block-navigation__responsive-container.is-menu-open .eib-menu-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Die Kanäle sitzen ganz unten. Der Abstand nach oben schiebt sie dorthin,
   egal wie viele Menüpunkte darüber stehen. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(.eib-menu-social) {
	order: 9;
	justify-content: flex-start;
	padding-top: var(--wp--preset--spacing--20);
}

/* Auf dem Rechner gibt es kein Überlagerungsmenü. Dort stehen Schaltfläche
   und Kanäle in der Kopfleiste beziehungsweise im Fuß, nicht in der
   waagerechten Navigation. */
@media (min-width: 782px) {
	.eib-header .eib-menu-cta,
	.eib-header .eib-menu-social {
		display: none;
	}
}

/* Der Kopf-Button bleibt auch im Menü ein Button. */
.eib-header .wp-block-buttons {
	flex-wrap: nowrap;
}

.eib-header .wp-block-button__link {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
 * 4b. Sektionen, die ein eigenes Zuschneiden brauchen
 * ------------------------------------------------------------------------- */

/* Hero: Video oder Bild im Hintergrund, Text in einer ruhigen Fläche davor.
   Das Standbild liegt als Hintergrundbild darunter. Es ist sofort da,
   während das Video lädt, und bleibt stehen, wenn jemand im Betriebssystem
   "Bewegung reduzieren" eingestellt hat. */
.wp-block-cover.eib-hero-cover {
	/* WordPress setzt bei hellen Cover-Blöcken reines Schwarz.
	   Im Hero soll dieselbe Textfarbe gelten wie überall sonst. */
	color: var(--wp--preset--color--contrast);
	min-height: 32rem;
	padding-block: var(--wp--preset--spacing--60);
	/* Derselbe Seitenabstand wie im Rest der Seite. Der Cover-Block ist
	   randlos und bekommt ihn sonst nicht. */
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	border-radius: 0;
	align-items: flex-end;
	background-color: var(--wp--preset--color--base);
	background-size: cover;
	background-position: 70% center;
}

.eib-hero-start {
	background-image: url("../media/hero-start.jpg");
}

.eib-hero-angst {
	background-image: url("../media/hero-angst.jpg");
}

.eib-hero-cover .wp-block-cover__video-background,
.eib-hero-cover .wp-block-cover__image-background {
	object-position: 70% center;
}

/* Hochformat im Querformat-Hero: der Ausschnitt muss Gesicht und Bauch
   zeigen, sonst bleibt nur ein Ausschnitt vom Oberkörper übrig. */
.eib-hero-schwangerschaft .wp-block-cover__image-background {
	object-position: 62% 16%;
}

@media (min-width: 782px) {
	.wp-block-cover.eib-hero-cover {
		min-height: min(86vh, 46rem);
		padding-block: var(--wp--preset--spacing--80);
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eib-hero-cover .wp-block-cover__video-background {
		display: none;
	}
}

/* Die Textfläche im Hero sitzt an der linken Kante der Inhaltsbreite,
   nicht am Bildschirmrand. Dafür sorgt die Gruppe eib-hero-inner: sie
   ist genauso breit wie die breiten Blöcke darunter, die Fläche darin
   läuft im Fluss und beginnt deshalb an deren linker Kante. Die Breite
   steht hier und nicht nur in den Block-Angaben, damit sie unabhängig
   davon gilt, wie WordPress den Cover-Block umbaut. */
.eib-hero-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.eib-hero-panel {
	max-width: 560px;
	margin-inline: 0 auto;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

@media (min-width: 782px) {
	.eib-hero-panel {
		padding: var(--wp--preset--spacing--60);
	}
}

@supports (backdrop-filter: blur(1px)) {
	.eib-hero-panel {
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
		backdrop-filter: blur(10px);
	}
}

/* --- Kurskacheln --------------------------------------------------------
 * Wie die Paketkarten auf den Kursseiten: klare Kante, gleiche Höhe,
 * Schaltfläche unten. Die ganze Kachel ist anklickbar, dafür legt sich
 * die Schaltfläche unsichtbar über die Karte. Es bleibt genau ein Link
 * pro Kachel, damit die Tastaturbedienung nicht leidet.
 */

.eib-kurs-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.eib-kurs-kachel > .wp-block-buttons {
	margin-top: auto;
}

.eib-kurs-kachel .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--card);
}

.eib-kurs-kachel:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.eib-kurs-kachel:has(.wp-block-button__link:focus-visible) {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--lifted);
}


.eib-kachel-bild img {
	border-radius: var(--wp--custom--radius--small);
}

@media (min-width: 782px) {
	.wp-block-columns.eib-kurs-kacheln {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@supports (grid-template-rows: subgrid) {
		.wp-block-columns.eib-kurs-kacheln {
			/* Bild · Überzeile · Titel · Text · Punkte · Schaltfläche */
			grid-template-rows: auto auto auto auto 1fr auto;
		}

		.eib-kurs-kachel {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 6;
		}

		.eib-kurs-kachel > * {
			align-self: start;
			margin-block: 0;
		}

		.eib-kurs-kachel > .wp-block-buttons {
			margin-top: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.eib-kurs-kachel {
		transition: none;
	}

	.eib-kurs-kachel:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Häufige Fragen (core/details)
 * ------------------------------------------------------------------------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--custom--color--line);
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

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

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2.5px solid var(--wp--preset--color--accent);
	border-bottom: 2.5px solid var(--wp--preset--color--accent);
	transform: rotate(45deg) translate(-0.15rem, -0.15rem);
	transition: transform var(--wp--custom--transition);
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
 * 6. Kleinigkeiten
 * ------------------------------------------------------------------------- */

/* Bilder in Gruppen bekommen dieselbe Rundung wie Karten. */
.wp-block-cover {
	border-radius: var(--wp--custom--radius--media);
	overflow: hidden;
}

.wp-block-cover.alignfull,
.wp-block-cover.is-style-eib-flush {
	border-radius: 0;
}

/* Bewegung nur, wenn gewünscht. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Sanftes Scrollen zu Ankern, sonst springt der Kurs-Link hart. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Anker nicht unter dem Kopfbereich verstecken. */
[id] {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------------
 * 7. Bewegung
 *
 * Die Seite heißt Emotion in Bewegung, also darf sie sich auch bewegen.
 * Sparsam: Inhalte kommen beim Scrollen herein, der Strich unter den
 * Überschriften wächst mit. Alles über die Scroll-Zeitleiste des Browsers,
 * ohne JavaScript. Browser ohne Unterstützung zeigen die Seite einfach
 * fertig an. Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
 * sieht gar keine Animation.
 *
 * Wichtig: die Animation bewegt "translate", nicht "transform".
 * Das Überfahren der Karten nutzt "transform". So kommen sich beide
 * nicht in die Quere.
 * ------------------------------------------------------------------------- */

@keyframes eib-auftauchen {
	from {
		opacity: 0;
		translate: 0 1.25rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes eib-strich {
	from {
		width: 0;
	}

	to {
		width: 3.5rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.eib-hero-panel {
		animation: eib-auftauchen 700ms ease-out both;
	}

	@supports (animation-timeline: view()) {
		.eib-kurs-kachel,
		.eib-schritt,
		.eib-zertifikat,
		.eib-versprechen > .wp-block-group,
		.eib-price-cards > .wp-block-column,
		.is-style-eib-card,
		.eib-cta-panel {
			animation: eib-auftauchen linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}

		.wp-block-heading.is-style-eib-underline::after {
			animation: eib-strich linear both;
			animation-timeline: view();
			animation-range: entry 15% entry 65%;
		}
	}
}

/* ---------------------------------------------------------------------------
 * 8. Handy
 *
 * Alles, was auf kleinen Bildschirmen anders sein muss, steht hier an einer
 * Stelle. Grundsatz: weniger Kanten, engerer Rhythmus, eine Schaltfläche
 * über die volle Breite statt mehrerer kleiner nebeneinander.
 * ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Kopfleiste: Menü links, Logo in der Mitte. Die Schaltfläche wandert
	   ins Menü, in der schmalen Leiste war sie zu laut. */
	.wp-block-group.eib-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.eib-header-inner > .wp-block-site-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.wp-block-group.eib-header-aktionen {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.wp-block-buttons.eib-header-cta {
		display: none;
	}

	/* Hero ohne Kasten. Statt einer Fläche vor dem Video liegt die
	   Grundfarbe durchscheinend über dem ganzen Abschnitt: das Video
	   bleibt sichtbar, der Text bleibt lesbar. */
	.eib-hero-panel {
		max-width: none;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* Der Kern setzt die Deckkraft der Tönung mit vier Klassen. Diese Regel
	   muss gleich stark sein, sonst bleibt es bei den 20 Prozent aus den
	   Block-Angaben und der Text steht ungeschützt auf dem Video. */
	.wp-block-cover.eib-hero-cover > .wp-block-cover__background.has-background-dim {
		opacity: 0.84;
	}

	.wp-block-cover.eib-hero-cover {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--70);
	}

	/* Beide Schaltflächen im Hero gleich breit, untereinander. */
	.eib-hero-panel .wp-block-buttons,
	.eib-hero-panel .wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.eib-hero-panel .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* Schaltflächen stehen mittig unter ihrem Text. */
	.wp-site-blocks .wp-block-buttons.is-layout-flex {
		justify-content: center;
	}

	/* Engerer Rhythmus in der Versprechen-Leiste: Überschrift und Satz
	   gehören zusammen und brauchen keinen Sektionsabstand dazwischen. */
	.eib-versprechen > .wp-block-group > * + * {
		margin-block-start: var(--wp--preset--spacing--20);
	}

	/* Kurskacheln: Bild bis an die Kante, engere Abstände darunter. */
	.eib-kurs-kachel {
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
	}

	.eib-kurs-kachel > .eib-kachel-bild {
		margin: calc(var(--wp--preset--spacing--40) * -1);
		margin-bottom: 0;
	}

	.eib-kurs-kachel > .eib-kachel-bild img {
		border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
	}

	/* Karteninhalte enger zusammen. Der Sektionsabstand aus theme.json ist
	   innerhalb einer Karte auf einem schmalen Bildschirm zu viel. */
	.is-style-eib-card > * + * {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/* --- Qualifikationen in der Kurzvorstellung ----------------------------
 * Drei schmale Zeilen mit kleinem Abbild. Deutlich zurückhaltender als
 * die großen Zertifikate auf der Seite "Über mich", aber genug, damit
 * die Ausbildungen auf jeder Seite sichtbar sind.
 */

.wp-block-group.eib-quali-kompakt {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--custom--color--line);
}

.eib-quali-kompakt .wp-block-group.eib-quali-zeile {
	align-items: center;
}

.eib-quali-kompakt .eib-quali-bild {
	flex: none;
	margin: 0;
}

.eib-quali-kompakt .eib-quali-bild img {
	width: 2.75rem;
	height: 3.9rem;
	object-fit: contain;
	padding: 2px;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
}

.eib-quali-kompakt .eib-quali-zeile p {
	margin: 0;
	line-height: 1.4;
}