/* ==========================================================================
   LevelUp — ergänzende Stile

   Alles Grundlegende (Farben, Schriften, Abstände) steckt in theme.json.
   Hier steht nur, was sich dort nicht ausdrücken lässt.
   ========================================================================== */

/* --- Vertikale Abstandsskala ---------------------------------------------- */

/*
 * Vier Stufen, mehr nicht. Alle Abstände auf der Seite greifen darauf zurück,
 * damit sich nicht Werte einschleichen, die nur an einer Stelle passen.
 *
 * Jede Stufe wächst mit der Fensterbreite: auf dem Handy spürbar schmaler,
 * ohne gedrängt zu wirken.
 */
:root {
	/* zwischen ganzen Abschnitten */
	--levelup-abstand-gross: clamp(3.5rem, 8vw, 7rem);

	/* Bild zu Text, Überschriftengruppe zu Inhalt */
	--levelup-abstand-mittel: clamp(1.9rem, 4.5vw, 3rem);

	/* Text zu Schaltfläche */
	--levelup-abstand-knopf: clamp(1.6rem, 3.2vw, 2.4rem);

	/* Überschrift zu Text, Absatz zu Absatz */
	--levelup-abstand-klein: clamp(1rem, 1.8vw, 1.4rem);

	/*
	 * Der Rest, den ein angrenzender Abschnitt behält. Beide Polsterungen voll
	 * zu addieren ergäbe eine Kluft, sie ganz zu streichen ein Gedränge —
	 * zusammen mit der vollen Polsterung des Nachbarn ergibt das rund 185px.
	 */
	--levelup-abstand-uebergang: calc( var(--levelup-abstand-gross) * 0.6 );
}

/* --- Grundgerüst ---------------------------------------------------------- */

/*
 * Der globale Blockabstand setzt sonst einen weissen Spalt zwischen Kopfbereich
 * und erstem Abschnitt — und einen zweiten zwischen letztem Abschnitt und Footer.
 */
.wp-site-blocks > main,
.wp-site-blocks > :last-child {
	margin-block-start: 0;
}

/*
 * Der Fussbereich sitzt immer unten, auch wenn der Inhalt kurz ist. Möglich
 * wird das dadurch, dass `.levelup-huelle { display: contents }` Kopf und Fuss
 * zu direkten Kindern von .wp-site-blocks macht — sie sind damit Teil dieses
 * Flex-Layouts, und `main` füllt den Rest.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	/*
	 * Die Adminleiste sitzt über der Seite und zählt zur Fensterhöhe dazu.
	 * Ohne Abzug entstünde für angemeldete Nutzer ein Scrollbalken von genau
	 * ihrer Höhe. Für Besucher ist die Variable nicht gesetzt, dann greift 0.
	 */
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/*
 * Abstand zum Fussbereich. Die Startseite ist ausgenommen: Sie endet mit einem
 * farbigen Band, das seine Polsterung bereits mitbringt — zusätzlicher Abstand
 * ergäbe dort eine leere weisse Zone zwischen Band und Fuss.
 */
body:not(.home) .wp-site-blocks > main {
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.wp-site-blocks > .levelup-footer {
	margin-top: auto;
}

/* --- Seitenkopf der Unterseiten -------------------------------------------- */

/*
 * Jede Unterseite bekommt denselben Kopf: kein Bild, nur die Antwort auf die
 * Frage „wo bin ich hier“ — Titel gross, darüber optional eine Einordnung,
 * darunter ein kurzer Untertitel in Gold.
 */
.levelup-seitenkopf {
	padding-block: var(--levelup-abstand-gross) !important;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

/*
 * Linksbündig statt zentriert: `max-width` würde WordPress' constrained-Layout
 * mit `margin-left: auto !important` mittig setzen. Über padding-right bleibt
 * die linke Kante stehen. Die Grösse entspricht der Überschrift auf der
 * Startseite, damit kein Kopf grösser wirkt als der Einstieg.
 */
.levelup-seitenkopf h1,
.levelup-seitenkopf .wp-block-post-title,
.levelup-seitenkopf .wp-block-query-title {
	margin: 0;
	box-sizing: border-box;
	/*
	 * Die Textspalte muss ein langes Einzelwort tragen: „Geschäftsbedingungen“
	 * ist bei dieser Schriftgrösse gut 38rem breit. War hier weniger reserviert,
	 * brach das Wort mitten drin um.
	 */
	padding-right: clamp(0rem, 100% - 38rem, 40rem);
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	/* Wo auch das nicht reicht (Handy), lieber mit Trennstrich als hart. */
	hyphens: auto;
}

.levelup-seitenkopf__auge,
.levelup-seitenkopf .wp-block-post-terms {
	line-height: 1;
	margin: 0 0 .6rem;
	box-sizing: border-box;
	padding-right: clamp(0rem, 100% - 20rem, 58rem);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.levelup-seitenkopf .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

.levelup-seitenkopf__unter,
.levelup-seitenkopf .wp-block-post-excerpt {
	margin: var(--levelup-abstand-klein) 0 0;
	box-sizing: border-box;
	padding-right: clamp(0rem, 100% - 52rem, 26rem);
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.45;
	color: var(--wp--preset--color--gold);
}

.levelup-seitenkopf .wp-block-post-excerpt__more-link {
	display: none;
}

.levelup-seitenkopf .wp-block-post-date {
	margin: var(--levelup-abstand-klein) 0 0;
	color: #B5AFA6;
}

/*
 * Der erste Block nach dem Kopf braucht Luft — aber die mittlere Stufe reicht.
 * Auf Angebotsseiten steht darüber bereits die Faktenbox mit eigenem Abstand;
 * mit der grossen Stufe klaffte dort eine Lücke.
 */
.levelup-inhalt--seite > *:first-child {
	margin-block-start: var(--levelup-abstand-knopf);
}

/* Die Faktenbox trägt ihren Abstand selbst — der Behälter braucht keinen. */
.levelup-inhalt--fakten {
	margin-block-start: var(--levelup-abstand-knopf);
}

/*
 * Überschriften im Fliesstext brauchen oben deutlich mehr Luft als unten.
 * Sonst hängen sie am vorangehenden Absatz und wirken wie dessen Fortsetzung,
 * statt einen neuen Gedanken zu eröffnen.
 *
 * Ausdrücklich nur direkte Kinder: Als Nachfahren-Selektor traf die Regel auch
 * die Titel in den Angebotskacheln und riss dort eine Lücke zwischen
 * Kennzeichnung und Titel auf.
 */
.levelup-inhalt--seite > h2,
.levelup-inhalt--seite > h3,
.levelup-inhalt--seite > h4 {
	margin-block-start: var(--levelup-abstand-mittel);
	margin-block-end: var(--levelup-abstand-klein);
}

.levelup-inhalt--seite > h2:first-child,
.levelup-inhalt--seite > h3:first-child {
	margin-block-start: 0;
}

/* Absätze und Listen im Fliesstext atmen gleichmässig. */
.levelup-inhalt--seite > p,
.levelup-inhalt--seite > ul,
.levelup-inhalt--seite > ol {
	margin-block: 0 var(--levelup-abstand-klein);
}

/*
 * Nur echte Aufzählungen, nicht das Kartenraster: Dort schob der Abstand die
 * zweite und dritte Kachel um genau diese 8px nach unten, wodurch die Reihe
 * nicht mehr auf einer Linie stand.
 */
.levelup-inhalt--seite > ul:not(.levelup-karten) li + li,
.levelup-inhalt--seite > ol li + li {
	margin-top: .5rem;
}

/* --- Links auf dunklem Grund ---------------------------------------------- */

/*
 * theme.json setzt Links global auf die dunkle Textfarbe. In den schwarzen
 * Abschnitten wären sie damit unsichtbar.
 */
.has-contrast-background-color a:where( :not( .wp-element-button ) ),
.levelup-hero a:where( :not( .wp-element-button ) ),
.levelup-band a:where( :not( .wp-element-button ) ) {
	color: inherit;
	text-underline-offset: 0.2em;
}

.has-contrast-background-color a:where( :not( .wp-element-button ) ):hover,
.levelup-hero a:where( :not( .wp-element-button ) ):hover,
.levelup-band a:where( :not( .wp-element-button ) ):hover:hover {
	color: var(--wp--preset--color--gold);
}

.has-contrast-background-color .wp-block-post-terms a {
	text-decoration: none;
}

/* --- Kopfbereich ---------------------------------------------------------- */

/*
 * Der Template-Part-Block umschliesst den Header mit einem <div>, das exakt so
 * hoch ist wie der Header selbst. `position: sticky` klebt aber nur innerhalb
 * seines Elternelements — in einer gleich hohen Hülle hat es keinen Weg und
 * scrollt einfach mit weg. `display: contents` löst die Hülle aus dem Layout,
 * der Header wird dadurch direktes Kind von .wp-site-blocks.
 */
.levelup-huelle {
	display: contents;
}

/*
 * KEIN backdrop-filter hier. Ein Filter auf dem Sticky-Header erzeugt einen
 * neuen Bezugsrahmen, wodurch das position:fixed des mobilen Menü-Overlays
 * in die Kopfleiste eingesperrt wird — das Menü lässt sich dann nicht öffnen.
 */
.levelup-header {
	position: sticky;
	top: 0;
	z-index: 100;

	/* Das Logo ragt nach unten heraus, deshalb darf hier nichts beschnitten werden. */
	overflow: visible;

	/* Die Fläche malt das ::before — hier selbst nichts, sonst läge sie darüber. */
	background: transparent !important;
}

/*
 * Der Hintergrund liegt bewusst auf einem Pseudo-Element und nicht auf dem
 * Header selbst: `backdrop-filter` erzeugt einen Bezugsrahmen für fixierte
 * Nachfahren. Am Header würde das erneut das mobile Menü-Overlay einsperren
 * (siehe Hinweis oben). Das ::before ist kein Vorfahr der Navigation, deshalb
 * ist der Effekt hier gefahrlos.
 */
.levelup-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--base);
	transition: background-color .32s ease, backdrop-filter .32s ease;
}

/* Im gescrollten Zustand leicht durchscheinend — nur die Fläche, nicht der Inhalt. */
.levelup-gescrollt .levelup-header::before {
	background: rgba(255, 255, 255, .82);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

/* Logo und Navigation liegen über der Fläche und bleiben voll deckend. */
.levelup-header > * {
	position: relative;
	z-index: 1;
}

.admin-bar .levelup-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .levelup-header { top: 46px; }
}

/*
 * Das Logo steht grösser als die Leiste und wächst nach unten darüber hinaus.
 * Umgesetzt über eine feste Höhe plus negativen Rand — das hält die Leiste
 * selbst niedrig, während das Logo optisch heraussticht.
 */
.levelup-header .wp-block-site-logo {
	position: relative;
	z-index: 2;
	line-height: 0;
}

.levelup-header .custom-logo {
	display: block;
	width: auto;
	height: var(--levelup-logo-hoehe, 104px);
	margin-bottom: calc( var(--levelup-logo-hoehe, 104px) * -0.34 );
	transition:
		height .32s cubic-bezier(.3, .8, .3, 1),
		margin-bottom .32s cubic-bezier(.3, .8, .3, 1),
		transform .32s cubic-bezier(.3, .8, .3, 1),
		filter .32s ease;
	filter: drop-shadow(0 8px 18px rgba(18, 18, 17, .22));
	transform-origin: left center;
}

/* Nach dem ersten Stück Scrollen zieht sich das Logo in die Leiste zurück. */
.levelup-gescrollt .levelup-header .custom-logo {
	--levelup-logo-hoehe: 58px;
	margin-bottom: 0;
	filter: none;
}

.levelup-header {
	transition: box-shadow .32s ease, padding .32s cubic-bezier(.3, .8, .3, 1);
}

.levelup-gescrollt .levelup-header {
	padding-block: 0.55rem;
}

.levelup-gescrollt .levelup-header::before {
	box-shadow: 0 4px 20px rgba(18, 18, 17, .1);
}

@media (max-width: 899px) {
	.levelup-header .custom-logo { --levelup-logo-hoehe: clamp(84px, 12vw, 104px); }
	.levelup-gescrollt .levelup-header .custom-logo { --levelup-logo-hoehe: 50px; }
}

/*
 * Auf dem Handy steht das Logo bewusst gross, bevor es beim Scrollen einklappt.
 * Die Höhe hängt an der Fensterbreite, weil das Logo mit 940×370 px rund 2,5-mal
 * so breit wie hoch ist: Bei fester Höhe würde es auf sehr schmalen Geräten mit
 * dem Menü-Symbol kollidieren. 22vw hält es auch bei 320 px Breite im Rahmen.
 */
@media (max-width: 599px) {
	.levelup-header .custom-logo { --levelup-logo-hoehe: clamp(66px, 22vw, 96px); }

	/*
	 * Zunächst mittig: Die Verschiebung rechnet von der linken Kante zur
	 * Fenstermitte und zieht die halbe Eigenbreite ab — bei `translateX` bezieht
	 * sich ein Prozentwert auf das Element selbst, deshalb sitzt das Logo exakt
	 * in der Mitte, unabhängig von seiner Grösse.
	 *
	 * Bewusst über `transform` statt über das Layout: Nur so lässt sich der Weg
	 * zurück nach links weich animieren.
	 */
	.levelup-header .custom-logo {
		transform: translateX(calc(50vw - var(--wp--style--root--padding-left, 1.75rem) - 50%));
	}

	/* Beim Scrollen: kleiner und zurück an die linke Kante. */
	.levelup-gescrollt .levelup-header .custom-logo {
		--levelup-logo-hoehe: 46px;
		transform: translateX(0);
	}
}

.levelup-header .wp-block-navigation a {
	text-decoration: none;
	position: relative;
	padding-block: 0.35em;
}

.levelup-header .wp-block-navigation__container {
	gap: clamp(1.5rem, 2.4vw, 2.4rem);
}

.levelup-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transition: right .22s ease;
}

.levelup-header .wp-block-navigation a:hover::after,
.levelup-header .wp-block-navigation .current-menu-item a::after {
	right: 0;
}

/* Dasselbe Gold wie im Logo, nur so weit abgedunkelt, dass es auf Weiss trägt. */
.levelup-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--gold-signal);
}

.levelup-header .wp-block-navigation a::after {
	background: var(--wp--preset--color--gold);
}

.levelup-header .wp-block-navigation__responsive-container-open,
.levelup-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.levelup-header .wp-block-navigation__responsive-container-open svg,
.levelup-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* --- Startseiten-Symbol und aktive Seite ---------------------------------- */

/*
 * Der Verweis auf die Startseite trägt statt eines Wortes ein Haus-Symbol
 * (Lucide, Strichstärke 1.75 — passend zur Schriftstärke der Navigation).
 * Der Text bleibt für Screenreader erhalten und wird nur optisch ersetzt.
 */
/*
 * Nur in der Leiste ab 600px: Dort ist der Platz knapp und ein Symbol spart
 * ihn. Im aufklappenden Menü darunter ist Platz im Überfluss — dort steht das
 * Wort, weil ein einzelnes Symbol zwischen fünf Wörtern fehl am Platz wirkt.
 */
@media (min-width: 600px) {
	.levelup-nav-start .wp-block-navigation-item__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.levelup-nav-start .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.levelup-nav-start .wp-block-navigation-item__content::before {
		content: "";
		width: 1.35rem;
		height: 1.35rem;
		background-color: currentColor;
		-webkit-mask: var(--levelup-symbol-haus) center / contain no-repeat;
		mask: var(--levelup-symbol-haus) center / contain no-repeat;
	}
}

:root {
	--levelup-symbol-haus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

/* Die aktuell gezeigte Seite ist dauerhaft unterstrichen und farbig. */
.levelup-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--gold-signal);
}

.levelup-header .wp-block-navigation .current-menu-item > a::after {
	right: 0;
}

/*
 * Das Haus-Symbol bekommt keinen Unterstrich — bei einem Symbol wirkt der
 * Balken wie ein Fehler. Die Färbung allein genügt als Markierung.
 */
.levelup-header .levelup-nav-start a::after {
	content: none;
}

.levelup-header .current-menu-item.levelup-nav-start > a {
	color: var(--wp--preset--color--gold);
}

/* Im Overlay reicht die Farbe — dort gibt es keine Unterstreichung. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
	color: var(--wp--preset--color--gold-signal);
}

/* --- Profile -------------------------------------------------------------- */

.levelup-social {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.levelup-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	transition: background-color .18s ease, color .18s ease;
}

/*
 * Die Umhüllung des Symbols ist ein <span> und damit inline: Sie sitzt auf der
 * Grundlinie und lässt darunter Platz für Unterlängen frei. Genau das schob das
 * Symbol im runden Feld nach oben. Als Flex-Element verschwindet der Effekt.
 */
.levelup-social__link > span {
	display: flex;
	align-items: center;
	justify-content: center;
}

.levelup-social__link svg {
	display: block;
}

.levelup-social--header .levelup-social__link:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

.levelup-social--footer {
	margin-top: var(--levelup-abstand-klein);
}

/*
 * Im Fussbereich eine beschriftete Fläche statt eines einzelnen runden
 * Symbols: Dort steht es sonst allein neben viel Text und wirkt übersehen.
 */
.levelup-social--footer {
	flex-wrap: wrap;
}

.levelup-social--footer .levelup-social__link {
	width: auto;
	height: auto;
	gap: .6rem;
	padding: .6em 1.2em;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 2rem;
	color: #DDD7CE;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

.levelup-social--footer .levelup-social__link:hover {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

.levelup-kopf-rechts {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
}

.levelup-social--header {
	align-self: center;
}

@media (max-width: 599px) {
	/*
	 * Auf dem Handy gehört das Symbol nicht in die Leiste, sondern ins geöffnete
	 * Menü. Der Block liegt im Markup ausserhalb des Navigations-Blocks — dort
	 * lässt sich nichts einhängen, weil dieser nur Navigationslinks aufnimmt.
	 * Deshalb wird er ausgeblendet und bei geöffnetem Menü über :has() als
	 * fixiertes Element wieder eingeblendet, unterhalb der Menüpunkte.
	 */
	.levelup-social--header {
		display: none;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .levelup-social--header {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: clamp(3rem, 12vh, 6rem);
		z-index: 201;
		justify-content: center;
		animation: levelup-social-ein .16s ease .16s both;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .levelup-social--header .levelup-social__link {
		width: 3rem;
		height: 3rem;
		border: 1px solid var(--wp--preset--color--linie);
	}
}

@keyframes levelup-social-ein {
	from { opacity: 0; transform: translateY(0.6rem); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .levelup-social--header {
		animation: none;
	}
}

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

/* --- Mobiles Menü: Ein- und Ausblenden ------------------------------------ */

/*
 * WordPress schaltet das Overlay über `display: none` ↔ `display: flex`. Das
 * lässt sich klassisch nicht animieren, deshalb `transition-behavior: allow-discrete`
 * zusammen mit `@starting-style`: Der Browser hält `display` bis zum Ende der
 * Ausblendung und kennt beim Einblenden einen Startwert, von dem aus er
 * überblenden kann.
 *
 * Browser ohne Unterstützung ignorieren beides und zeigen das Menü schlicht
 * sofort — die Bedienung bleibt in jedem Fall vollständig.
 */
/*
 * WICHTIG: nur unterhalb von 600px. Ab dort zeigt WordPress die Navigation über
 * `:not(.is-menu-open)` ganz normal an — eine unbedingte `opacity: 0` würde die
 * Menüpunkte auf dem Desktop unsichtbar machen, weil dort nie eine Regel
 * greift, die sie zurücksetzt.
 */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container {
		opacity: 0;

		/* Kurz gehalten — ein Menü soll da sein, nicht auftreten. */
		transition:
			opacity .12s ease,
			display .12s allow-discrete;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
	}

	@starting-style {
		.wp-block-navigation__responsive-container.is-menu-open {
			opacity: 0;
		}
	}
}

/*
 * Die Einträge kommen versetzt von unten nach — 40 ms Abstand, das reicht für
 * einen erkennbaren Ablauf, ohne dass das Menü sich träge anfühlt.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity .14s ease,
		transform .18s cubic-bezier(.2, .8, .3, 1);
}

@starting-style {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		opacity: 0;
		transform: translateY(0.7rem);
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { transition-delay: .02s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { transition-delay: .045s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { transition-delay: .07s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { transition-delay: .095s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { transition-delay: .12s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { transition-delay: .145s; }

/* Das Schliessen-Kreuz blendet zuerst ein, damit der Ausweg sofort sichtbar ist. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	opacity: 1;
	transition: opacity .18s ease;
}

@starting-style {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		opacity: 0;
	}
}

/*
 * Nach dem Scrollen tritt neben das Symbol ein zurückhaltendes „Menü“. Beim
 * ersten Blick auf die Seite ist das Symbol gross genug und braucht keine
 * Beschriftung; ist die Leiste geschrumpft, hilft das Wort beim Wiederfinden.
 */
/*
 * ACHTUNG: unbedingt im Mobilbereich halten. WordPress blendet den Öffner ab
 * 600px mit `display: none` aus — eine Regel ohne Medienabfrage gewinnt gegen
 * diese Vorgabe und liesse das Symbol auch auf dem Desktop erscheinen.
 */
@media (max-width: 599px) {
	.levelup-header .wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}

	.levelup-header .wp-block-navigation__responsive-container-open::before {
		content: "Menü";
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		opacity: 0;
		font-family: var(--wp--preset--font-family--jost);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: .06em;
		color: var(--wp--preset--color--grau);
		transition: max-width .28s ease, opacity .28s ease;
	}

	.levelup-gescrollt .levelup-header .wp-block-navigation__responsive-container-open::before {
		max-width: 4rem;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levelup-header .wp-block-navigation__responsive-container-open::before {
		transition: none;
	}
}

/*
 * Das Schliessen-Kreuz sitzt genau dort, wo eben noch das Menü-Symbol war.
 * Die Mitte kommt als Variable aus dem Kopfbereich-Skript; `translate(-50%,-50%)`
 * zentriert den Knopf darauf, ohne dass seine Grösse bekannt sein muss.
 *
 * Fehlt die Variable (kein JavaScript), greift die Vorgabe von WordPress.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	left: var(--levelup-kreuz-x);
	top: var(--levelup-kreuz-y);
	right: auto;
	bottom: auto;
	margin: 0;
	transform: translate(-50%, -50%);
}

@supports not (left: var(--levelup-kreuz-x)) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		transform: none;
	}
}

/* Das Overlay muss über allem liegen, auch über dem Sticky-Header. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 200;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	width: 100%;
	padding-top: 0;
}

/*
 * Im Overlay mittig — waagerecht wie senkrecht. Die Rechtsbündigkeit gilt nur
 * der Kopfleiste; sie kommt vom Navigations-Block als Klasse
 * `items-justified-right` mit `align-items: flex-end`. Deshalb muss die hier
 * ausdrücklich mitgenannt werden, sonst gewinnt sie im Overlay.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.4em;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	font-size: clamp(1.75rem, 7vw, 2.75rem);
	letter-spacing: -0.02em;
	text-decoration: none;
}

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

/* --- Hero ----------------------------------------------------------------- */

/*
 * Das Foto sitzt nicht als Kachel neben dem Text, sondern läuft nach rechts aus
 * dem Bild heraus und wird nach links per Maske weich in das Schwarz gezogen.
 * Dadurch verschwindet die harte Rechteckkante, die den Hero vorher kastig
 * wirken liess.
 */
.levelup-hero {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
}

.levelup-hero__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	min-height: min(78vh, 46rem);
}

.levelup-hero__text {
	padding-block: var(--levelup-abstand-gross);
	position: relative;
	z-index: 2;
}

.levelup-hero__text h1 {
	/* Etwas kleiner als die globale H1, damit „Der nächste Schritt“ auf eine Zeile passt. */
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	max-width: 22ch;
	margin: 0 0 var(--levelup-abstand-klein);
}

.levelup-hero__text .levelup-lead {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.45;
	max-width: 34ch;
	color: #F0EBE2;
	margin: 0 0 var(--levelup-abstand-klein);
}

.levelup-hero__text p:not(.levelup-lead) {
	max-width: 46ch;
	color: #B8B2A8;
	margin: 0 0 var(--levelup-abstand-knopf);
}

.levelup-hero__bild {
	margin: 0;
	align-self: stretch;
	position: relative;
}

/*
 * Das Bild greift über den rechten Rand des Rasters hinaus bis an die
 * Fensterkante — deshalb 50vw statt einer festen Breite.
 */
.levelup-hero__bild img {
	position: absolute;
	inset: 0;
	width: 50vw;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 46%;
	/*
	 * Ein einzelner Verlauf. Zwei Masken zu kombinieren wäre reizvoll, aber
	 * mask-composite wird von -webkit- und Standard unterschiedlich benannt —
	 * das Ergebnis war je nach Browser eine härtere statt weichere Kante.
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 34%, #000 72%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 34%, #000 72%);
}

@media (max-width: 860px) {
	/*
	 * Auf schmalen Schirmen stehen Bild und Text nicht mehr nebeneinander,
	 * sondern übereinander in derselben Rasterzelle: Das Foto füllt die Fläche,
	 * der Text liegt darauf. Das spart die halbe Höhe gegenüber der gestapelten
	 * Variante und wirkt zugleich ruhiger.
	 */
	.levelup-hero__raster {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 0;
		min-height: min(82vh, 40rem);
		padding-inline: 0;
	}

	.levelup-hero__text,
	.levelup-hero__bild {
		grid-area: 1 / 1;
	}

	.levelup-hero__bild {
		position: relative;
		height: 100%;
		width: 100%;
	}

	.levelup-hero__bild img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-position: center 32%;

		/* Kein seitlicher Verlauf mehr — der Lesbarkeitsverlauf kommt unten. */
		-webkit-mask-image: none;
		mask-image: none;
	}

	/*
	 * Verlauf für die Lesbarkeit: unten fast deckend, oben offen. Ohne ihn
	 * würde die weisse Schrift auf hellen Bildstellen verschwinden.
	 */
	.levelup-hero__bild::after {
		content: "";
		position: absolute;
		inset: 0;
		/*
		 * Abgestimmt auf den Textblock, der die unteren rund 55 % einnimmt:
		 * dort deckend genug für weisse Schrift, darüber schnell offen, damit
		 * vom Foto auch etwas zu sehen bleibt.
		 */
		background: linear-gradient(
			to top,
			rgba(18, 18, 17, .92) 0%,
			rgba(18, 18, 17, .78) 26%,
			rgba(18, 18, 17, .46) 48%,
			rgba(18, 18, 17, .16) 72%,
			rgba(18, 18, 17, 0) 100%
		);
	}

	.levelup-hero__text {
		position: relative;
		z-index: 2;
		align-self: end;

		/* Unten derselbe Abstand wie seitlich — sonst wirkt der Block angeschnitten. */
		padding-block: var(--levelup-abstand-gross) var(--wp--style--root--padding-left, 1.75rem);
		padding-inline: var(--wp--style--root--padding-left, 1.75rem);
	}

	.levelup-hero__text h1 {
		max-width: none;
	}

	/*
	 * Der ausführliche Absatz entfällt hier. Auf dem Handy zählt, dass Aussage
	 * und Handlungsaufforderung ohne Scrollen sichtbar sind — die Schilderung
	 * darunter ist schön, aber nicht das, wofür jemand die Seite öffnet.
	 */
	.levelup-hero__text p:not(.levelup-lead) {
		display: none;
	}

	.levelup-hero__text .levelup-lead {
		max-width: 30ch;
	}

	/*
	 * Die beiden Schaltflächen stehen nebeneinander statt untereinander. Dafür
	 * müssen sie kleiner werden — in Normalgrösse passen sie zusammen nicht in
	 * eine Zeile. Der Umbruch bleibt erlaubt: Auf sehr schmalen Geräten (unter
	 * etwa 340 px) rutscht die zweite dann doch darunter, was besser ist als
	 * ein abgeschnittener Text.
	 */
	.levelup-hero__text .wp-block-buttons {
		gap: 0.5rem;
	}

	.levelup-hero__text .wp-block-button__link {
		font-size: 0.875rem;
		padding: 0.8em 1.15em;
	}
}

.levelup-lead {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.5;
}

/* --- Vorstellung ---------------------------------------------------------- */

.levelup-vorstellung {
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	grid-template-areas:
		"bild titel"
		"bild text"
		"bild knopf";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.levelup-vorstellung__titel {
	grid-area: titel;
	margin: 0 0 var(--levelup-abstand-klein);
	font-family: var(--wp--preset--font-family--jost);
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.12;
	max-width: 20ch;
}

.levelup-vorstellung__text {
	grid-area: text;
	max-width: 46ch;
}

.levelup-vorstellung__text p {
	margin: 0 0 var(--levelup-abstand-klein);
	color: var(--wp--preset--color--grau);
}

.levelup-vorstellung__text p:last-child {
	margin-bottom: 0;
}

.levelup-vorstellung__bild {
	grid-area: bild;
	margin: 0;
}

.levelup-vorstellung__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.25rem;
}

.levelup-vorstellung__knopf {
	grid-area: knopf;
	margin: var(--levelup-abstand-knopf) 0 0;
}

@media (max-width: 860px) {
	.levelup-vorstellung {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"bild"
			"titel"
			"text"
			"knopf";
		grid-template-rows: auto;
		row-gap: 0;
	}

	/* Text darf nie am Bild kleben — deshalb die mittlere Stufe, nicht die kleine. */
	.levelup-vorstellung__bild {
		margin-bottom: var(--levelup-abstand-mittel);
	}

	/*
	 * Auf dem Handy steht direkt darüber der Hero mit ganzflächigem Foto. Ein
	 * zweites Bild in voller Höhe würde das Muster unnötig wiederholen, deshalb
	 * hier ein flacherer Ausschnitt.
	 */
	.levelup-vorstellung__bild img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center 28%;
	}

	.levelup-vorstellung__titel {
		max-width: none;
	}
}

/* --- Bilder --------------------------------------------------------------- */

.levelup-bild-portraet img {
	border-radius: 1.25rem;
	display: block;
	width: 100%;
	height: auto;
}

/* --- Fussbereich ---------------------------------------------------------- */

.levelup-footer {
	border-top: 3px solid var(--wp--preset--color--gold);
	overflow: hidden;
}

.levelup-footer__claim {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 800;
	font-size: clamp(2.5rem, 7vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	margin: 0 0 var(--levelup-abstand-mittel);
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--gold);
}

.levelup-footer__spalten {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--levelup-abstand-mittel);
	align-items: start;
}

@media (max-width: 900px) {
	.levelup-footer__spalten { grid-template-columns: 1fr 1fr; }
	.levelup-footer__marke { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.levelup-footer__spalten { grid-template-columns: 1fr; }
}

.levelup-footer__marke .custom-logo {
	max-height: 66px;
	width: auto;
}

.levelup-footer__text {
	color: #B5AFA6;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.7;
	max-width: 36ch;
	margin: var(--levelup-abstand-klein) 0 0;
}

.levelup-footer__siegel {
	display: inline-block;
	margin: 1.25rem 0 0;
	padding: 0.45em 1em;
	border: 1px solid rgba(248, 184, 56, .45);
	border-radius: 2rem;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gold);
}

.levelup-footer__titel {
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 1.1rem;
}

.levelup-footer__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--klein);
}

.levelup-footer__liste li + li { margin-top: 0.7rem; }

.levelup-footer__liste a {
	text-decoration: none;
	color: #DDD7CE;
	transition: color .16s ease, padding-left .16s ease;
}

.levelup-footer__liste a:hover {
	color: var(--wp--preset--color--gold);
	padding-left: 0.4rem;
}

.levelup-footer__kontakt .wp-block-buttons { margin-top: 1rem; }

/* Im Fussbereich klein, etwa so gross wie die Profil-Verweise links. */
.levelup-footer__kontakt .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.25rem;
	font-size: .9375rem;
}

/*
 * Briefumschlag (Lucide, ISC) vor dem Text. Als Maske, damit er die Textfarbe
 * übernimmt und der Knopf im Editor ein gewöhnlicher Knopf bleibt.
 */
.levelup-footer__kontakt .wp-block-button__link::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.levelup-footer__fuss {
	margin-top: var(--levelup-abstand-mittel);
	padding-top: var(--levelup-abstand-klein);
	border-top: 1px solid rgba(255, 255, 255, .1);
	gap: 0.5rem 2rem;
}

.levelup-footer__fuss p {
	margin: 0;
	font-size: 0.8125rem;
	color: #8A857D;
}

/*
 * Die Widerrufsfunktion nach § 356a BGB muss gut lesbar und hervorgehoben
 * sein — deshalb eine Schaltfläche, kein unauffälliger Textverweis zwischen
 * den übrigen Fusszeilen.
 */
.levelup-footer__fuss .levelup-footer__widerruf a {
	display: inline-flex;
	align-items: center;
	padding: .45em 1.1em;
	border: 1px solid #8A857D;
	border-radius: 2rem;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	color: #DDD7CE;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease;
}

.levelup-footer__fuss .levelup-footer__widerruf a:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

/* --- Inhaltsbreite -------------------------------------------------------- */

/*
 * Alle Abschnitte teilen sich denselben 78rem-Container, damit Kopfbereich,
 * Überschriften, Karten und Footer dieselbe linke Kante haben.
 *
 * Fliesstext darf aber nicht 78rem breit laufen — das liest niemand. Statt an
 * WordPress' Zentrierung zu rütteln (die steht auf `margin-left: auto !important`
 * und liesse sich nur mit einem !important-Duell kontern), bleibt der Block auf
 * voller Breite und bekommt rechts einen Innenabstand. Ergebnis: linke Kante
 * sitzt wie überall, die Zeile bricht trotzdem bei angenehmer Lesebreite.
 *
 * Das clamp() sorgt dafür, dass der Abstand auf schmalen Schirmen von selbst
 * auf null zusammenfällt — dort ist ohnehin kein Platz zu verschenken.
 */
.levelup-inhalt > p,
.levelup-inhalt > ul,
.levelup-inhalt > ol,
.levelup-inhalt > dl,
.levelup-inhalt > blockquote,
.levelup-inhalt > .wp-block-buttons,
.levelup-inhalt > .wp-block-list,
.levelup-inhalt > .wp-block-post-date,
.levelup-inhalt > .levelup-faq,
.levelup-inhalt > .levelup-fakten,
.levelup-inhalt > .levelup-termine,
.levelup-inhalt > h1,
.levelup-inhalt > h2,
.levelup-inhalt > h3,
.levelup-inhalt > h4,
.levelup-inhalt > .wp-block-post-title {
	/*
	 * Ohne border-box würde der Innenabstand die Box über 78rem hinaus wachsen
	 * lassen. Da WordPress mittig ausrichtet, wanderte die linke Kante dann je
	 * nach Abstand unterschiedlich weit nach links — genau die schiefen Kanten,
	 * die hier eigentlich verschwinden sollen.
	 */
	box-sizing: border-box;
}

.levelup-inhalt > p,
.levelup-inhalt > ul,
.levelup-inhalt > ol,
.levelup-inhalt > dl,
.levelup-inhalt > blockquote,
.levelup-inhalt > .wp-block-buttons,
.levelup-inhalt > .wp-block-list,
.levelup-inhalt > .wp-block-post-date,
.levelup-inhalt > .levelup-faq {
	/*
	 * 64rem statt 52: Bei der engeren Fassung blieb rechts ein auffällig
	 * breiter leerer Streifen, und die Zeilen brachen deutlich vor dem
	 * Containerrand um. Etwas länger als die reine Lehre empfiehlt, dafür
	 * ruhiger im Gesamtbild.
	 */
	padding-right: clamp(0rem, 100% - 64rem, 14rem);
}

/*
 * Faktenbox, Terminliste, Kartenraster und Wartelisten-Formular sind
 * strukturierte Elemente, keine Fliesstexte — sie dürfen die volle Bandbreite
 * nutzen. Ihre Spalten verteilen sich dann von selbst.
 *
 * Das Kartenraster muss ausdrücklich dabeistehen: Es ist ein <ul> und fiele
 * sonst unter die Lesebreite-Regel für Listen, wodurch nur zwei statt drei
 * Karten je Reihe Platz hätten.
 */
/*
 * Nur das Kartenraster: Es ist ein <ul> und fiele sonst unter die
 * Lesebreite-Regel für Listen, wodurch nur zwei statt drei Karten je Reihe
 * Platz hätten.
 *
 * Faktenbox und Terminliste stehen hier bewusst NICHT mehr: Sie sind <div> und
 * werden von der Lesebreite-Regel ohnehin nicht erfasst. Das
 * `padding-right: 0` hat bei ihnen den eigenen Innenabstand überschrieben, so
 * dass der Inhalt am rechten Rand klebte.
 */
.levelup-inhalt > .levelup-karten {
	padding-right: 0;
}

/*
 * Überschriften brechen etwas früher als Fliesstext, aber nicht zu früh —
 * bei 34rem stand „Häufige Fragen“ zweizeilig, obwohl reichlich Platz war.
 */
.levelup-inhalt > h1,
.levelup-inhalt > h2,
.levelup-inhalt > .wp-block-post-title {
	padding-right: clamp(0rem, 100% - 52rem, 26rem);
}

.levelup-inhalt > h3,
.levelup-inhalt > h4 {
	padding-right: clamp(0rem, 100% - 58rem, 20rem);
}

/* --- Abschnitte über die volle Breite ------------------------------------- */

/*
 * Ganzflächige Abschnitte brauchen deutlich mehr Luft nach oben und unten als
 * normale Blöcke — sonst kleben sie am Nachbarn und der Wechsel der
 * Hintergrundfarbe wirkt wie ein Fehler statt wie eine Gliederung.
 */
.levelup-abschnitt,
.levelup-band {
	padding-block: var(--levelup-abstand-gross) !important;
}

/*
 * Aneinandergrenzende Abschnitte würden ihre Polsterungen addieren. Damit der
 * Abstand über die ganze Seite gleich bleibt, trägt ihn jeweils nur eine Seite:
 *
 *   Abschnitt | Abschnitt   → der obere Abstand des zweiten fällt weg
 *   Abschnitt | Band        → der untere Abstand des Abschnitts fällt weg
 *   Band      | Abschnitt   → der obere Abstand des Abschnitts fällt weg
 *
 * Farbige Bänder behalten ihre Polsterung in jedem Fall — bei ihnen liegt sie
 * innerhalb der Farbfläche, ohne sie klebte die Überschrift an der Kante.
 */
.levelup-abschnitt + .levelup-abschnitt {
	padding-top: var(--levelup-abstand-uebergang) !important;
}

.levelup-abschnitt:has( + .levelup-band ) {
	padding-bottom: var(--levelup-abstand-uebergang) !important;
}

.levelup-band + .levelup-abschnitt {
	padding-top: var(--levelup-abstand-uebergang) !important;
}

/*
 * Der Seitenkopf ist selbst eine Farbfläche mit eigener Polsterung. Beginnt der
 * Inhalt mit einem Abschnitt, trägt der Kopf den Abstand — sonst summierte er
 * sich auf mehr als das Doppelte der übrigen Übergänge.
 */
.levelup-inhalt--seite > .levelup-abschnitt:first-child,
.levelup-inhalt--seite > .levelup-band:first-child {
	margin-block-start: 0 !important;
	padding-top: var(--levelup-abstand-uebergang) !important;
}

/*
 * Endet die Seite mit einem Abschnitt, bringt dieser den Abstand zum
 * Fussbereich schon mit. Es bleibt nur der Blockabstand, den es zwischen zwei
 * Abschnitten ebenfalls gibt — sonst wäre der letzte Übergang 11px enger als
 * alle anderen.
 */
/*
 * Gilt auch für die Startseite: Dort steckt der Inhalt in `.wp-block-post-content`
 * statt in `.levelup-inhalt--seite`, endet aber ebenso mit einem Abschnitt.
 */
.wp-site-blocks > main:has(
	:is( .levelup-inhalt--seite, .wp-block-post-content )
		> :is( .levelup-abschnitt, .levelup-band ):last-child
) {
	padding-bottom: calc( var(--levelup-abstand-uebergang) + var(--wp--style--block-gap, 0px) );
}

.levelup-abschnitt__kopf {
	margin-bottom: var(--levelup-abstand-mittel);
}

.levelup-abschnitt__fuss {
	margin-top: var(--levelup-abstand-mittel);
}

/*
 * Der Abschluss-Button steht mittig unter dem Karussell — und zwar mittig im
 * Fenster, nicht im 78rem-Raster. Das Karussell läuft über die volle Breite,
 * ein am Raster ausgerichteter Button sässe sichtbar daneben.
 */
.levelup-abschnitt__fuss {
	max-width: none !important;
	padding-inline: var(--wp--preset--spacing--30) !important;
}

.levelup-abschnitt__fuss .wp-block-buttons {
	justify-content: center;
	max-width: none !important;
	padding-right: 0 !important;
}

/* --- Helles Band ---------------------------------------------------------- */

.levelup-band--hell {
	background: var(--wp--preset--color--sand);
}

.levelup-band--hell h2 {
	margin-top: 0;
}

/* --- Angebots-Karussell --------------------------------------------------- */

/*
 * Endlosschleife rein über CSS: Der Kartensatz steht zweimal in der Spur, die
 * Animation verschiebt genau um die Hälfte und springt dann unsichtbar zurück.
 * Kein JavaScript nötig.
 */
.levelup-karussell {
	position: relative;
	overflow: hidden;

	/*
	 * Luft nach oben und unten: Die Folie wächst beim Überfahren und wirft einen
	 * weichen Schatten — beides würde das overflow:hidden der Laufbahn sonst an
	 * der Kante abschneiden. Der Wert ist zugleich der sichtbare Abstand zum
	 * Text darüber, deshalb aus der Skala.
	 */
	padding-block: var(--levelup-abstand-mittel);

	/*
	 * Breiter Ausklang an beiden Rändern: Die Folien tauchen aus dem Nichts auf
	 * und verschwinden wieder, statt an einer Kante abgeschnitten zu werden.
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.levelup-karussell__spur {
	display: flex;
	gap: clamp(1rem, 1.6vw, 1.75rem);
	width: max-content;
	animation: levelup-laufband var(--levelup-tempo, 46s) linear infinite;

	/*
	 * Die Spur bekommt von vornherein eine eigene Compositor-Ebene. Ohne den
	 * Hinweis promoten manche Browser sie erst beim Start der Animation und
	 * zeichnen im ersten Moment die Bilder darin nicht mit.
	 */
	will-change: transform;
}

.levelup-folie__bild img {
	/* Erzwingt, dass das Bild in derselben Ebene wie die Spur gerastert wird. */
	transform: translateZ(0);
}

/* Anhalten, solange jemand hinschaut oder sich per Tastatur darin bewegt. */
.levelup-karussell:hover .levelup-karussell__spur,
.levelup-karussell:focus-within .levelup-karussell__spur {
	animation-play-state: paused;
}

@keyframes levelup-laufband {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.levelup-folie {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: clamp(17rem, 27vw, 25rem);
	aspect-ratio: 4 / 5;
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

/* Die ganze Folie ist der Link, deshalb reicht :hover und :focus-visible. */
.levelup-folie:hover,
.levelup-folie:focus-visible {
	transform: scale(1.045);
	box-shadow: 0 18px 44px rgba(9, 9, 8, .38);
	z-index: 2;
}

.levelup-folie:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
 * Stapelung bewusst ohne negative z-index-Werte: In der laufenden
 * Transform-Animation zeichnet der Compositor Ebenen hinter dem Elternelement
 * unzuverlässig — einzelne Folien blieben dann schwarz.
 */
.levelup-folie__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.levelup-folie__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	transition: transform .6s ease;
}

.levelup-folie:hover .levelup-folie__bild img,
.levelup-folie:focus-visible .levelup-folie__bild img {
	transform: scale(1.07);
}

/* Verlauf, damit die Schrift auf jedem Foto lesbar bleibt. */
.levelup-folie::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(9, 9, 8, .95) 0%,
		rgba(9, 9, 8, .82) 32%,
		rgba(9, 9, 8, .3) 62%,
		rgba(9, 9, 8, .05) 100%
	);
}

.levelup-folie__inhalt {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(1.4rem, 2vw, 2rem);
	color: var(--wp--preset--color--base);
}

.levelup-folie__form {
	display: block;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: .4rem;
}

.levelup-folie__titel {
	font-family: var(--wp--preset--font-family--jost);
	font-size: clamp(1.6rem, 2.4vw, 2.125rem) !important;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 .55rem;
	color: var(--wp--preset--color--base);
}

.levelup-folie:hover .levelup-folie__titel {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.levelup-folie__satz {
	margin: 0 0 .8rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #DDD7CE;

	/* Höchstens drei Zeilen, damit die Folien gleich hoch wirken. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.levelup-folie__meta {
	margin: 0;
	padding-top: .7rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #A9A39A;
}

/*
 * Auf Touchgeräten wird aus dem Laufband ein echter Scrollbereich: Die
 * CSS-Animation verschiebt nur die Darstellung, nicht die Scrollposition —
 * anfassen liesse sie sich also nicht. Stattdessen schiebt karussell.js die
 * Scrollposition weiter, und der Finger kann jederzeit übernehmen.
 *
 * Der zweite Kartensatz bleibt hier bewusst stehen: Er ist die Voraussetzung
 * dafür, dass der Rücksprung am Ende unsichtbar bleibt.
 */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
	.levelup-karussell {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;

		/* Der Balken stört im Bild; gewischt wird ohnehin direkt. */
		scrollbar-width: none;
	}

	.levelup-karussell::-webkit-scrollbar {
		display: none;
	}

	.levelup-karussell__spur {
		animation: none;
		will-change: auto;
	}

	/* Beim Wischen gibt es kein Überfahren — die Vergrösserung entfällt. */
	.levelup-folie:hover {
		transform: none;
		box-shadow: none;
	}

	.levelup-folie:hover .levelup-folie__bild img {
		transform: none;
	}
}

/* Ohne Bewegung: nur wischen, kein automatischer Lauf. */
@media (prefers-reduced-motion: reduce) {
	.levelup-karussell {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.levelup-karussell__spur {
		animation: none;
	}

	.levelup-folie[aria-hidden="true"] {
		display: none;
	}

	.levelup-folie,
	.levelup-folie:hover,
	.levelup-folie:focus-visible,
	.levelup-folie__bild img,
	.levelup-folie:hover .levelup-folie__bild img,
	.levelup-folie:focus-visible .levelup-folie__bild img {
		transition: none;
		transform: none;
	}
}

/* --- Karten (Angebote) ---------------------------------------------------- */

/*
 * Dasselbe Bild wie die Folien im Karussell — Foto als Fläche, Verlauf darüber,
 * Text unten. Hier stehen mehr Angaben drin, weil man auf dieser Seite gezielt
 * vergleicht statt nur zu überfliegen.
 */
.levelup-karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--levelup-abstand-klein);
	margin: 0;
	list-style: none;
	padding-inline: 0;
	padding-block: var(--levelup-abstand-mittel);
}

.levelup-karte {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease;
}

.levelup-karte:hover,
.levelup-karte:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(9, 9, 8, .28);
}

.levelup-karte:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.levelup-karte__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.levelup-karte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	display: block;
	transition: transform .5s ease;
}

.levelup-karte:hover .levelup-karte__bild img,
.levelup-karte:focus-visible .levelup-karte__bild img {
	transform: scale(1.05);
}

/*
 * Der Verlauf sorgt dafür, dass die Schrift auf jedem Foto lesbar bleibt —
 * auch auf den hellen Strandaufnahmen. Er liegt über dem Bild, aber unter dem
 * Text und lässt Klicks durch.
 */
.levelup-karte::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(9, 9, 8, .96) 0%,
		rgba(9, 9, 8, .88) 34%,
		rgba(9, 9, 8, .55) 60%,
		rgba(9, 9, 8, .18) 82%,
		rgba(9, 9, 8, .04) 100%
	);
}

.levelup-karte__inhalt {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	color: var(--wp--preset--color--base);
}

.levelup-karte__form {
	display: block;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);

	/*
	 * Knapp über dem Titel. Grosszügige Zeilenhöhe und Aussenabstand ergaben
	 * zusammen eine auffällige Lücke — die Kennzeichnung gehört zum Titel und
	 * soll nicht wie eine eigene Zeile wirken.
	 */
	margin-bottom: .35rem;
}

.levelup-karte__titel {
	font-family: var(--wp--preset--font-family--jost);
	font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--base);
}

.levelup-karte:hover .levelup-karte__titel {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/*
 * Feste Zeilenzahl, damit alle Kacheln gleich aufgebaut sind: Sonst
 * verschiebt ein längerer Satz alles darunter, und die Angaben stünden von
 * Kachel zu Kachel auf anderer Höhe.
 */
.levelup-karte__satz {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	margin-bottom: .7rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: #DDD7CE;
}

.levelup-karte__angaben {
	display: block;
	margin: 0 0 .85rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #B5AFA6;

	/* Genau eine Zeile — was nicht passt, wird abgeschnitten. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.levelup-karte__fuss {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.levelup-karte__preis {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--base);
}

.levelup-karte__preis--offen {
	font-size: 1rem;
	font-weight: 600;
	color: #B5AFA6;
}

.levelup-karte__mehr {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.levelup-karte__mehr::after {
	content: " →";
}

@media (prefers-reduced-motion: reduce) {
	.levelup-karte,
	.levelup-karte:hover,
	.levelup-karte:focus-visible,
	.levelup-karte__bild img {
		transition: none;
		transform: none;
	}
}

/* --- Faktenbox ------------------------------------------------------------ */

/*
 * Untereinander statt als Kachelraster. Vier gleich grosse Kästchen wirkten
 * beliebig, und auf schmalen Schirmen ergaben sie ein 2×2-Feld, in dem die
 * Lesereihenfolge verlorenging.
 */
.levelup-fakten {
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 1.25rem;
	padding: clamp(1.4rem, 3.5vw, 2.25rem);
	margin: var(--levelup-abstand-mittel) 0;
}

.levelup-fakten__liste {
	margin: 0;
	display: grid;
	gap: 0;
}

.levelup-fakten__zeile {
	display: grid;
	grid-template-columns: 1.75rem minmax(5.5rem, auto) 1fr;
	align-items: baseline;
	gap: .25rem 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.levelup-fakten__zeile:first-child { padding-top: 0; }
.levelup-fakten__zeile:last-child { border-bottom: 0; padding-bottom: 0; }

.levelup-fakten__symbol {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--wp--preset--color--gold-dunkel);

	/* Grundlinie der Zeile treffen, nicht der Zeilenmitte folgen. */
	align-self: center;
}

.levelup-fakten__liste dt {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	align-self: center;
}

.levelup-fakten__liste dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	align-self: center;
}

.levelup-fakten__liste dd small {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--grau);
	margin-top: .15rem;
	line-height: 1.45;
}

@media (max-width: 599px) {
	/*
	 * Auf dem Handy rückt der Wert unter die Bezeichnung. Nebeneinander bliebe
	 * für längere Angaben wie „4× Hundeschule, 1× auswärts“ zu wenig Platz.
	 */
	.levelup-fakten__zeile {
		grid-template-columns: 1.75rem 1fr;
		gap: .1rem .75rem;
	}

	.levelup-fakten__symbol { grid-row: 1 / span 2; align-self: start; padding-top: .15rem; }
	.levelup-fakten__liste dt { grid-column: 2; }
	.levelup-fakten__liste dd { grid-column: 2; }
}

.levelup-fakten__extra {
	margin-top: var(--levelup-abstand-mittel);
	padding-top: var(--levelup-abstand-klein);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.levelup-fakten__extra h3 {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	margin: 0 0 var(--levelup-abstand-klein);
}

/* Haken statt Aufzählungspunkten — es sind Zusagen, keine Aufzählung. */
.levelup-fakten__haken {
	list-style: none;
	margin: 0;
	padding: 0;
}

.levelup-fakten__haken li {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.55;
}

.levelup-fakten__haken li + li {
	margin-top: .6rem;
}

.levelup-fakten__haken li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .42em;
	width: .8rem;
	height: .42rem;
	border-left: 2px solid var(--wp--preset--color--gold-dunkel);
	border-bottom: 2px solid var(--wp--preset--color--gold-dunkel);
	transform: rotate(-45deg);
}

.levelup-hinweis {
	margin-top: var(--levelup-abstand-klein);
	padding: .85rem 1.1rem;
	background: var(--wp--preset--color--base);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: .3rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

/* --- Termine -------------------------------------------------------------- */

.levelup-termine { margin: var(--levelup-abstand-mittel) 0; }
.levelup-termine + .levelup-termine { margin-top: var(--levelup-abstand-mittel); }
.levelup-termine h2 a { text-decoration: none; }
.levelup-termine h2 a:hover { text-decoration: underline; }

/* Überschrift und Verweis auf einer Grundlinie, auf schmalen Geräten gestapelt. */
.levelup-termine__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	flex-wrap: wrap;
}

.levelup-termine__kopf h2 {
	margin: 0;
}

.levelup-termine__mehr {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--grau);
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease;
}

.levelup-termine__mehr:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.levelup-termine__leer {
	margin: var(--levelup-abstand-klein) 0 0;
	max-width: 52ch;
	color: var(--wp--preset--color--grau);
}

/*
 * Die Spalten werden an der Liste definiert, nicht an der einzelnen Zeile.
 * Vorher spannte jede Kachel ihr eigenes Raster auf — dadurch richteten sich
 * Uhrzeit und Ort nach dem jeweils eigenen Inhalt und sprangen von Zeile zu
 * Zeile. Mit `subgrid` übernehmen alle Zeilen dieselben Spaltenbreiten.
 */
.levelup-termine__liste {
	list-style: none;
	margin: var(--levelup-abstand-klein) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns:
		minmax(9rem, max-content)
		minmax(6rem, max-content)
		1fr
		max-content
		max-content;
	gap: .75rem;
}

/*
 * Feste Spalten. Vorher standen Uhrzeit und Ort in einer zusammengesetzten
 * Zeile — je nachdem welche Angaben gefüllt waren, sass die Uhrzeit mal neben
 * den Plätzen und mal darunter. Jede Angabe hat jetzt ihre eigene Spalte und
 * bleibt an derselben Stelle, auch wenn sie leer ist.
 */
.levelup-termin {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	gap: .5rem 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .9rem;
	transition: border-color .16s ease;
}

/*
 * Ohne subgrid-Unterstützung fällt jede Zeile auf ein eigenes Raster zurück.
 * Die Spalten richten sich dann nicht exakt aneinander aus, bleiben aber
 * bedienbar — feste Breiten statt max-content halten den Unterschied klein.
 */
@supports not (grid-template-columns: subgrid) {
	.levelup-termine__liste {
		grid-template-columns: 1fr;
	}

	.levelup-termin {
		grid-template-columns: 11rem 8rem 1fr max-content max-content;
	}
}

.levelup-termin:hover {
	border-color: #D9D0C2;
}

.levelup-termin__datum {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: var(--wp--preset--font-size--gross);
}

/* „5 Termine · bis 11. Dez.“ unter dem Startdatum einer Kursreihe. */
.levelup-termin__umfang {
	display: block;
	margin-top: .15rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--grau);
}

.levelup-termin__zeit,
.levelup-termin__ort {
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--klein);
}

.levelup-termin__status {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	padding: .35rem .9rem;
	border-radius: 2rem;
	white-space: nowrap;
	text-align: center;
}

.levelup-termin__status--frei {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

.levelup-termin__status--voll {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--grau);
}

.levelup-termin__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .6em 1.4em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.levelup-termin__knopf:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Ausgebucht: zurückhaltender, weil es nur noch um die Warteliste geht. */
.levelup-termin__knopf--still {
	border-color: var(--wp--preset--color--linie);
	color: var(--wp--preset--color--grau);
}

.levelup-termin__knopf--still:hover {
	background: var(--wp--preset--color--grau);
	border-color: var(--wp--preset--color--grau);
	color: var(--wp--preset--color--base);
}

@media (max-width: 760px) {
	/*
	 * Auf schmalen Schirmen gestapelt. Die Liste gibt hier nur noch eine Spalte
	 * vor; das subgrid der Zeile richtet sich danach, sonst würde die
	 * Schaltfläche über die Kachel hinauswachsen.
	 */
	.levelup-termine__liste {
		grid-template-columns: 1fr;
	}

	.levelup-termin {
		grid-template-columns: 1fr auto;
		gap: .35rem 1rem;
	}

	.levelup-termin__datum {
		grid-column: 1;
		grid-row: 1;
	}

	.levelup-termin__status {
		grid-column: 2;
		grid-row: 1;
	}

	.levelup-termin__zeit {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.levelup-termin__ort {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.levelup-termin__knopf {
		grid-column: 1 / -1;
		grid-row: 4;
		justify-self: stretch;
		margin-top: .6rem;
	}
}

/* --- Fussleiste unter einem Angebot --------------------------------------- */

.levelup-angebot-fuss {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: var(--levelup-abstand-mittel);
	padding-top: var(--levelup-abstand-klein);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.levelup-angebot-fuss a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6em 1.3em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--grau);
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.levelup-angebot-fuss a:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Rückweg im Seitenkopf ------------------------------------------------ */

/*
 * Als Block, nicht inline-flex: WordPress richtet Kinder des Containers über
 * `margin-inline: auto` aus. Bei einem inline-level Element greift das nicht —
 * der Verweis sass dadurch 75px weiter links als die Überschrift.
 */
.levelup-seitenkopf__zurueck {
	display: block;
	margin: 0 0 var(--levelup-abstand-klein);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: .02em;
}

.levelup-seitenkopf__zurueck a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: #B5AFA6;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.levelup-seitenkopf__zurueck a:hover {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--gold);
}

@media (prefers-reduced-motion: reduce) {
	.levelup-angebot-fuss a,
	.levelup-seitenkopf__zurueck a {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levelup-termin,
	.levelup-termin__knopf {
		transition: none;
	}
}

/* --- Sprungziele ---------------------------------------------------------- */

/*
 * Die Kopfleiste klebt oben und würde ein angesprungenes Ziel verdecken.
 * scroll-margin-top hält den nötigen Abstand frei.
 */
:target,
#anfragen,
#warteliste,
#termine {
	scroll-margin-top: clamp(6rem, 14vh, 9rem);
}

/* --- Kontaktmöglichkeiten ------------------------------------------------- */

.levelup-kontakt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--levelup-abstand-klein);
	margin: var(--levelup-abstand-mittel) 0;
}

.levelup-kontakt__karte {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: .35rem;
	padding: clamp(1.2rem, 2.5vw, 1.6rem);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 1.1rem;
	background: var(--wp--preset--color--base);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

a.levelup-kontakt__karte:hover {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(18, 18, 17, .09);
}

/*
 * WhatsApp steht vorn und über die volle Breite: Dort erreicht man Corinna am
 * schnellsten, und eine kurze Nachricht ist für viele die kleinere Hürde als
 * eine E-Mail.
 */
.levelup-kontakt__karte--wichtig {
	grid-column: 1 / -1;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 1.1rem;
	background: var(--wp--preset--color--sand);
	border-color: transparent;
}

.levelup-kontakt__karte--wichtig .levelup-kontakt__symbol {
	grid-row: 1 / span 2;
	align-self: center;
	width: 3.2rem;
	height: 3.2rem;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

.levelup-kontakt__karte--wichtig .levelup-kontakt__name {
	font-size: 1.35rem;
}

.levelup-kontakt__karte--wichtig .levelup-kontakt__text {
	grid-column: 2;
}

.levelup-kontakt__karte--wichtig .levelup-kontakt__wert {
	grid-column: 2;
	margin-top: .3rem;
}

a.levelup-kontakt__karte--wichtig:hover {
	border-color: var(--wp--preset--color--gold);
}

.levelup-kontakt__karte--leer {
	background: var(--wp--preset--color--base);
	border-style: dashed;
}

.levelup-kontakt__symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--gold-dunkel);
}

.levelup-kontakt__name {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.levelup-kontakt__text {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

.levelup-kontakt__wert {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gold-dunkel);
	word-break: break-word;
}

/* --- Haltung (Über mich) -------------------------------------------------- */

.levelup-haltung {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--levelup-abstand-klein) var(--levelup-abstand-mittel);
	margin: var(--levelup-abstand-mittel) 0 0;
	padding: 0;
	list-style: none;
}

.levelup-haltung li {
	position: relative;
	padding-left: 1.6rem;
}

/* Kein Aufzählungspunkt, sondern ein kurzer Strich — ruhiger im Bild. */
.levelup-haltung li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .85rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

.levelup-haltung strong {
	display: block;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: .2rem;
}

.levelup-haltung span {
	display: block;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.55;
	color: var(--wp--preset--color--grau);
}

@media (prefers-reduced-motion: reduce) {
	.levelup-kontakt__karte { transition: none; }
	a.levelup-kontakt__karte:hover { transform: none; }
}

/* --- Formulare ------------------------------------------------------------ */

/*
 * Ein Aussehen für alle Formulare: heller Sandgrund statt dunklem Kasten.
 * Dunkle Eingabefelder wirkten wie ein Fremdkörper zwischen dem übrigen
 * Inhalt und waren auf hellen Bildschirmen schlechter lesbar.
 */
/*
 * Der Kasten nutzt die volle Containerbreite — so steht er bündig mit der
 * Terminliste darüber. Die Felder darin sind ohnehin zweispaltig begrenzt.
 */
.levelup-formular-box {
	/* Innenabstand als Variable: Abschnittslinien reichen damit bis an den Rand. */
	--levelup-box-rand: clamp(1.5rem, 5vw, 3.25rem);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 1.5rem;
	padding: var(--levelup-box-rand);
	margin: var(--levelup-abstand-mittel) 0;
}

/*
 * Mobil wird aus dem Panel ein sandfarbenes Band über die volle Breite. Sonst
 * kosten Seitenrand und Innenabstand zusammen gut ein Viertel der Breite, und
 * die Felder werden schmal. Die Felder fluchten dann mit dem übrigen Text.
 *
 * Der negative Rand hebt genau den Seitenrand auf (nicht `50% - 50vw`: das
 * zählt eine Scrollleiste mit und erzeugt Querscrollen). `!important`, weil das
 * constrained-Layout `margin-inline: auto !important` setzt.
 */
@media (max-width: 599px) {
	.levelup-formular-box {
		--levelup-box-rand: var(--wp--style--root--padding-left, 1.75rem);
		margin-inline: calc(var(--wp--style--root--padding-left, 1.75rem) * -1) !important;
		border-inline: 0;
		border-radius: 0;
	}
}

.levelup-formular-box h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.levelup-formular-box__hinweis {
	margin: var(--levelup-abstand-klein) 0 0;
	max-width: 58ch;
	color: var(--wp--preset--color--grau);
}

.levelup-formular {
	margin-top: var(--levelup-abstand-mittel);
}

/*
 * Der Weg ohne Formular, im Anmelde-Panel direkt unter der Kursauswahl: ein
 * Knopf mit WhatsApp-Logo, darunter „oder“, dann der Rest des Formulars.
 * Bewusst zurückhaltend: klein, so breit wie sein Text, Grün nur im Logo. Ein
 * grüner Balken wirkte wie der einzige Weg zur Anmeldung.
 */
.levelup-whatsapp-knopf {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	width: fit-content;
	margin-inline: auto;
	padding: .5rem 1.15rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .16s ease, background-color .16s ease;
}

.levelup-whatsapp-knopf:hover,
.levelup-whatsapp-knopf:focus-visible {
	border-color: #25D366;
	color: var(--wp--preset--color--contrast);
}

/* Das Logo trägt das Grün. Auf Weiss ist das hellere Grün zu blass. */
.levelup-whatsapp-knopf__symbol {
	display: flex;
	color: #1EBE5A;
}

.levelup-whatsapp-knopf__symbol svg {
	width: 1.15rem;
	height: 1.15rem;
}

/*
 * Auf dem Desktop kein WhatsApp-Knopf: Dort ist WhatsApp meist nicht zur Hand,
 * das Formular ist der naheliegende Weg. Die Linie bleibt als Trennung zur
 * Kursauswahl, nur ohne Text. Gegenstück zur Touch-Abfrage weiter oben —
 * schmale Fenster und Touch-Geräte behalten den Knopf.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
	.levelup-whatsapp-knopf {
		display: none;
	}

	.levelup-oder span {
		display: none;
	}
}

/* „oder“ zwischen zwei feinen Linien, leise genug, um nur zu trennen. */
.levelup-oder {
	display: flex;
	align-items: center;
	/* Linien bis an den Rand des Panels, wie zwischen den Abschnitten. */
	margin: var(--levelup-abstand-klein) calc(var(--levelup-box-rand, 0px) * -1) 0;
	padding: var(--levelup-abstand-klein) 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

/* Ohne Text (kein Social Walk, Desktop) laufen beide Linien ohne Lücke ineinander. */
.levelup-oder span {
	padding-inline: 1rem;
}

.levelup-oder::before,
.levelup-oder::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--linie);
}


@media (prefers-reduced-motion: reduce) {
	.levelup-whatsapp-knopf { transition: none; }
}

/*
 * Höchstens zwei Spalten. Mit `auto-fit` wurden auf breiten Schirmen vier
 * daraus — Eingabefelder in einer langen Reihe lesen sich schlecht, weil das
 * Auge zwischen Beschriftung und Feld weit springen muss.
 */
/*
 * `minmax(0, 1fr)` statt `1fr`: Eine Spalte darf schmaler werden als ihr
 * breitester Inhalt. Sonst schiebt ein Feld mit fester Eigenbreite (das
 * Datumsfeld in iOS Safari tat das) die Seite mobil über den Rand, und der
 * Browser zoomt heraus.
 */
.levelup-formular__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 640px) {
	.levelup-formular__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.levelup-formular__feld {
	margin: 0 0 var(--levelup-abstand-klein);
}

.levelup-formular__feld--voll {
	grid-column: 1 / -1;
}

.levelup-formular label {
	display: block;
	margin-bottom: .45rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* „freiwillig“ steht kleiner und ruhiger neben der Beschriftung. */
.levelup-formular label span {
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--wp--preset--color--grau);
}

.levelup-formular input[type="text"],
.levelup-formular input[type="email"],
.levelup-formular input[type="tel"],
.levelup-formular select,
.levelup-formular textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: .85rem 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--normal);
	transition: border-color .16s ease, box-shadow .16s ease;
}

/*
 * WebKit (Safari, jeder Browser auf dem iPhone) zählt den Text der gewählten
 * Option als Überlauf der Auswahl, auch wenn sie ihn gar nicht zeigt. Bei den
 * langen Einträgen der Kursreihen wurde die Seite dadurch breiter als der
 * Bildschirm, und das iPhone zoomte heraus. `overflow: hidden` hält den Text in
 * der Auswahl.
 */
.levelup-formular select {
	overflow: hidden;
}

.levelup-formular input::placeholder,
.levelup-formular textarea::placeholder {
	color: #A9A39A;
}

.levelup-formular input:hover,
.levelup-formular select:hover,
.levelup-formular textarea:hover {
	border-color: #CFC6B8;
}

.levelup-formular input:focus-visible,
.levelup-formular select:focus-visible,
.levelup-formular textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(248, 184, 56, .32);
}

.levelup-formular textarea {
	min-height: 7em;
	resize: vertical;
}

/* Eigenes Pfeilsymbol, damit die Auswahl wie die übrigen Felder aussieht. */
.levelup-formular select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121211' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.1rem;
	cursor: pointer;
}

/*
 * Ein Auswahlfeld bricht nicht um, lange Termine wären mobil abgeschnitten.
 * Mit Skript (`ist-aktiv`) zeigt eine Anzeige den gewählten Eintrag vollständig;
 * das echte Feld liegt unsichtbar darüber und öffnet beim Tippen wie gewohnt
 * die Auswahl. Ohne Skript bleibt es beim normalen Auswahlfeld.
 */
.levelup-auswahl {
	display: block;
	position: relative;
}

.levelup-auswahl__anzeige {
	display: none;
}

.levelup-auswahl.ist-aktiv .levelup-auswahl__anzeige {
	display: block;
	box-sizing: border-box;
	padding: .85rem 2.75rem .85rem 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .75rem;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121211' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.4;
	min-height: 1.4em;
	/* Notbremse: Was dennoch zu breit ist, wird abgeschnitten statt die Seite zu verbreitern. */
	overflow: hidden;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.levelup-auswahl__name,
.levelup-auswahl__termin {
	display: block;
	text-wrap: pretty;
}

.levelup-auswahl__termin {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

/* Jede Angabe bleibt zusammen, umbrochen wird zwischen ihnen. */
.levelup-auswahl__termin span {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
}

.levelup-auswahl.ist-aktiv select {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
}

.levelup-auswahl.ist-aktiv:hover .levelup-auswahl__anzeige {
	border-color: #CFC6B8;
}

.levelup-auswahl.ist-aktiv:has(select:focus-visible) .levelup-auswahl__anzeige {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(248, 184, 56, .32);
}

.levelup-formular .ist-fehlerhaft .levelup-auswahl__anzeige {
	border-color: #C83C28;
}

.levelup-formular input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: .85rem 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--normal);
}

/* --- Abschnitte im Anmeldeformular ---------------------------------------- */

/* Hier gibt es keine Überschrift über dem Formular, der Kasten beginnt direkt. */
.levelup-formular--anmeldung {
	margin-top: 0;
}

.levelup-formular__abschnitt {
	margin: 0 0 var(--levelup-abstand-klein);
	padding: 0;
	border: 0;
	min-width: 0;
}

.levelup-formular__abschnitt + .levelup-formular__abschnitt {
	margin-top: var(--levelup-abstand-klein);
	margin-inline: calc(var(--levelup-box-rand, 0px) * -1);
	padding: var(--levelup-abstand-mittel) var(--levelup-box-rand, 0px) 0;
	border-top: 1px solid var(--wp--preset--color--linie);
}

/*
 * Ein neuer Abschnitt soll nicht zwischen den Feldern untergehen: deutlich mehr
 * Luft, eine Linie über die ganze Breite des Panels und die Überschrift darunter
 * statt in der Linie (`float` holt die legend aus dem Rahmen des fieldset).
 */
.levelup-formular__abschnitt legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 1.25rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: clamp(1.6rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.levelup-formular__abschnitt legend + * {
	clear: both;
}

/* Beschriftung einer Auswahlgruppe — sieht aus wie ein label, ist aber keins. */
.levelup-formular__label {
	display: block;
	margin-bottom: .45rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.levelup-formular__label span {
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--wp--preset--color--grau);
}

.levelup-formular__wahl {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.levelup-formular .levelup-formular__wahl label {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .8rem 1.1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .75rem;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.levelup-formular__wahl label:has( input:checked ) {
	border-color: var(--wp--preset--color--gold);
}

.levelup-formular__wahl input {
	margin: 0;
	accent-color: var(--wp--preset--color--gold-dunkel);
}

.levelup-formular__hilfe,
.levelup-formular__hinweis {
	margin: 0 0 var(--levelup-abstand-klein);
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

.levelup-formular__hinweis {
	margin-top: var(--levelup-abstand-klein);
}

/* Die Haftpflicht ist Teilnahmebedingung, kein Kleingedrucktes. */

.levelup-formular-box__termin {
	margin: var(--levelup-abstand-klein) 0 0;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 700;
	color: var(--wp--preset--color--gold-dunkel);
}

.levelup-formular-box__zurueck {
	margin: var(--levelup-abstand-klein) 0 0;
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Einwilligung --------------------------------------------------------- */

.levelup-formular__consent {
	margin: var(--levelup-abstand-klein) 0 0;
}

.levelup-formular__consent label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .85rem;
	align-items: start;
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: .75rem;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.55;
	color: var(--wp--preset--color--grau);
	cursor: pointer;
	transition: border-color .16s ease;
}

.levelup-formular__consent label:hover {
	border-color: #CFC6B8;
}

.levelup-formular__consent input {
	width: 1.25rem;
	height: 1.25rem;
	margin: .1rem 0 0;
	accent-color: var(--wp--preset--color--gold-dunkel);
	cursor: pointer;
}

.levelup-formular__consent label:has( input:focus-visible ) {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(248, 184, 56, .32);
}

/* --- Absenden ------------------------------------------------------------- */

.levelup-formular__aktion {
	margin: var(--levelup-abstand-knopf) 0 0;
}

.levelup-formular__rechtshinweis {
	margin: var(--levelup-abstand-klein) 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

.levelup-formular button {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 2.5rem;
	padding: .95em 2.2em;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.levelup-formular button:hover {
	background: var(--wp--preset--color--gold-dunkel);
	color: var(--wp--preset--color--base);
}

.levelup-formular button:active {
	transform: translateY(1px);
}

@media (max-width: 599px) {
	/* Auf dem Handy über die volle Breite — leichter zu treffen. */
	.levelup-formular button {
		width: 100%;
	}
}

/* --- Erledigt ------------------------------------------------------------- */

/*
 * Die Antwort auf ein abgeschicktes Formular steht an dessen Stelle — als
 * Aussage, nicht als schmale Hinweiszeile, die man beim Zurückkommen auf die
 * Seite übersieht. Steht etwas darüber, gleicher Abstand wie beim Formular;
 * allein in der Box reicht deren Innenabstand.
 */
* + .levelup-fertig {
	margin-top: var(--levelup-abstand-mittel);
}

.levelup-fertig h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.levelup-fertig p {
	margin: var(--levelup-abstand-klein) 0 0;
	max-width: 58ch;
	color: var(--wp--preset--color--grau);
}

/* --- Rückmeldungen -------------------------------------------------------- */

.levelup-notice {
	padding: .95rem 1.15rem;
	border-radius: .75rem;
	margin-bottom: var(--levelup-abstand-mittel);
	font-size: var(--wp--preset--font-size--klein);
	background: var(--wp--preset--color--base);
}

.levelup-notice--ok {
	border-left: 3px solid var(--wp--preset--color--gold);
}

.levelup-notice--error {
	border-left: 3px solid #C83C28;
	color: #8C2A1C;
}

/*
 * Fehlendes Feld nach dem Absenden (gesetzt von formular.js). Dieselben Rottöne
 * wie die Fehlermeldung oben, damit es nicht nach einem zweiten System aussieht.
 */
.levelup-formular .ist-fehlerhaft input:not([type="radio"]):not([type="checkbox"]),
.levelup-formular .ist-fehlerhaft select,
.levelup-formular .ist-fehlerhaft textarea {
	border-color: #C83C28;
}

.levelup-formular__consent.ist-fehlerhaft label {
	border-color: #C83C28;
}

.levelup-formular__fehler {
	margin: .4rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: #8C2A1C;
}

/*
 * Ohne Skript springt der Browser selbst zum Feld; der Abstand hält es unter
 * der klebenden Kopfleiste.
 */
.levelup-formular input,
.levelup-formular select,
.levelup-formular textarea {
	scroll-margin-top: clamp(7rem, 16vh, 10rem);
}

@media (prefers-reduced-motion: reduce) {
	.levelup-formular input,
	.levelup-formular select,
	.levelup-formular textarea,
	.levelup-formular button,
	.levelup-formular__consent label {
		transition: none;
	}

	.levelup-formular button:active {
		transform: none;
	}
}

/* --- Häufige Fragen ------------------------------------------------------- */

.levelup-faq__eintrag {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding: var(--levelup-abstand-klein) 0;
}

.levelup-faq__eintrag summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	padding-right: 2.5rem;
	position: relative;
}

.levelup-faq__eintrag summary::-webkit-details-marker { display: none; }

.levelup-faq__eintrag summary::after {
	content: "";
	position: absolute;
	right: .4rem;
	top: .4em;
	width: .6rem;
	height: .6rem;
	border-right: 2.5px solid var(--wp--preset--color--gold-dunkel);
	border-bottom: 2.5px solid var(--wp--preset--color--gold-dunkel);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.levelup-faq__eintrag[open] summary::after { transform: rotate(-135deg); }
.levelup-faq__eintrag summary:hover { color: var(--wp--preset--color--gold-dunkel); }

.levelup-faq__antwort { padding-top: var(--levelup-abstand-klein); max-width: 62ch; }
.levelup-faq__antwort > p:first-child { margin-top: 0; }

.levelup-faq__bezug {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

/* --- Kleinkram ------------------------------------------------------------ */

.levelup-fehlt {
	background: repeating-linear-gradient(45deg, #FFF4D6, #FFF4D6 8px, #FFE9B0 8px, #FFE9B0 16px);
	border: 1px dashed #B8830F;
	border-radius: .3rem;
	padding: .1em .5em;
	font-size: .85em;
	font-weight: 700;
	color: #7A5510;
}

.wp-block-group.is-style-karte {
	background: var(--wp--preset--color--sand);
	border-radius: 1.25rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.wp-block-list.is-style-haken { list-style: none; padding-left: 0; }

.wp-block-list.is-style-haken li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .7rem;
}

.wp-block-list.is-style-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .75rem;
	height: .4rem;
	border-left: 2.5px solid var(--wp--preset--color--gold-dunkel);
	border-bottom: 2.5px solid var(--wp--preset--color--gold-dunkel);
	transform: rotate(-45deg);
}

/* --- Preloader ------------------------------------------------------------ */

/*
 * Standardmässig unsichtbar. Erst das Inline-Skript setzt .levelup-laedt auf
 * <html> — ohne JavaScript passiert hier also nichts.
 */
.levelup-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--contrast);
}

.levelup-laedt .levelup-preloader { display: flex; }
.levelup-laedt body { overflow: hidden; }

.levelup-preloader__logo {
	width: min(300px, 62vw);
	height: auto;
	animation: levelup-atmen 1.5s ease-in-out infinite;
}

.levelup-geladen .levelup-preloader {
	display: flex;
	animation: levelup-weg .45s ease forwards;
	pointer-events: none;
}

@keyframes levelup-atmen {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .72; transform: scale(.965); }
}

@keyframes levelup-weg {
	to { opacity: 0; visibility: hidden; }
}

/* --- Bewegung reduzieren -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.levelup-karte,
	.levelup-footer__liste a,
	.levelup-header .wp-block-navigation a::after,
	.levelup-faq__eintrag summary::after {
		transition: none;
	}

	.levelup-karte:hover { transform: none; }
	.levelup-header,
	.levelup-header::before,
	.levelup-header .custom-logo,
	.wp-block-navigation__responsive-container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		transition: none;
		transform: none;
	}
	.levelup-preloader__logo { animation: none; }
	.levelup-geladen .levelup-preloader { animation-duration: .01ms; }
}