/*
Theme Name: kurven.schule Child (Neve)
Theme URI: https://kurven.schule/
Description: Child-Theme von Neve fuer kurven.schule(R). Tokens liegen in theme.json, der Look im Plugin ks-v0-skin. Diese Datei traegt NUR die Struktur, die Neve nicht liefert: Kopf-Pille als Flex-Zeile, Dropdown-Verhalten des klassischen Menues, mobiler Umschalter, Fusszeile. Farben/Schatten/Radien gehoeren NICHT hierher.
Author: kurven.schule
Template: neve
Version: 1.1.20
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: ks-neve-child
*/

/* ==========================================================================
   KOPF — Struktur
   Im Block-Theme kam die Flex-Zeile aus den Layout-Klassen des Gruppen-Blocks
   (is-layout-flex). Klassisch gibt es die nicht, also steht sie hier. Der Look
   (Pille, Blur, Schatten, Zustaende ueber dem Hero) bleibt im Skin.
   ========================================================================== */
header.header {
	background: none;
	border: 0;
}

/* Standard-Seitentitel ausblenden, wenn die Seite einen eigenen ks-hero hat */
body:has(.ks-hero) .nv-page-title-wrap,
body:has(.ks-hero) .nv-page-header,
.home .nv-page-title-wrap {
	display: none !important;
}

/* Die Leiste MUSS schweben — sie ist der Kern der Referenz-Anmutung.
 *
 * Neve klammert alles in <div class="wrapper"> mit overflow-x:hidden, und der body
 * traegt dasselbe. Ein Vorfahre mit overflow != visible macht `position: sticky`
 * wirkungslos: der Browser macht daraus einen Scroll-Container, und das Element
 * klebt an dessen Rand statt am Fenster. Gemessen scrollte die Leiste um volle
 * 900px weg, obwohl position:sticky und die Zustandsklassen korrekt gesetzt waren.
 *
 * `overflow-x: clip` klemmt waagerecht genauso ab wie hidden, erzeugt aber KEINEN
 * Scroll-Container — damit bleibt sticky heil. Das Paar clip/visible ist zulaessig,
 * hidden/visible dagegen nicht (visible wuerde zu auto umgerechnet und der
 * horizontale Ueberlauf kaeme als Scrollbalken zurueck).
 */
body,
body > .wrapper:not(.et-fb-iframe-ancestor) {
	overflow-x: clip;
	overflow-y: visible;
}

/* Inhalt darf nicht dauerhaft hinter der Leiste verschwinden. Beim Sprung auf
 * einen Anker landete die Zielueberschrift bisher UNTER der schwebenden Leiste,
 * weil der Browser bis zur Fensterkante scrollt und nicht bis zur Unterkante der
 * Leiste. `scroll-padding-top` verschiebt genau diesen Zielpunkt — Leistenhoehe
 * plus Versatz plus etwas Luft. Die Hoehe misst das Skin-JS (--ks-header-h).
 *
 * `overflow-anchor: none` gehoert hierher, aus demselben Grund wie
 * scroll-padding-top: beides regelt, wie der Browser mit Scroll-Position
 * umgeht, wenn sich Layout oberhalb des sichtbaren Bereichs aendert.
 *
 * User-Fund 08-23 ("Mega-Menue atmet", Video auf /kurse/): Kopfleiste und
 * Schrumpf-Header aendern beim Kollabieren/Expandieren ihre eigene Hoehe
 * (--ks-header-h, ks-v0-skin.js kompaktState()/stuckState()) UND darueber
 * auch die Hoehe des Hero-Paddings, das an derselben Variable haengt — macht
 * also die Gesamt-Seitenhoehe kleiner/groesser. Per Playwright gemessen:
 * document.body.scrollHeight schwankte dabei um ~400px, OHNE dass sich
 * Kursraster oder Filterpanel aenderten (deren Hoehe blieb exakt konstant) —
 * die Seitenhoehen-Aenderung kam einzig vom Header/Hero-Kollaps selbst.
 * Chrome/Firefox gleichen so eine Hoehenaenderung automatisch per
 * Scroll-Anchoring aus (verschieben scrollY, damit der sichtbare Ausschnitt
 * "stabil" bleibt) — das aendert scrollY OHNE Nutzer-Scroll, was
 * kompaktState()/stuckState() erneut auswertet und prompt zurueckkippt: eine
 * Rueckkopplungsschleife zwischen Layout-Verschiebung und Scroll-State-
 * Maschine (kein Zufall, gemessen: scrollY sprang eigenstaendig von 95 auf 0,
 * waehrend NUR der Header/Hero sich veraenderten). Mit `overflow-anchor: none`
 * bleibt scrollY konstant, exakt EIN sauberer Zustandswechsel, kein Ruecksprung
 * mehr — verifiziert: 25 Messungen alle 80ms zeigen ohne die Regel bis zu
 * vier Zustandswechsel, mit der Regel genau einen.
 */
html {
	scroll-padding-top: calc(var(--ks-header-h, 68px) + 1.5rem);
	overflow-anchor: none;
}

/* Schrumpf-Header: die Zeile (Marke + Menue + CTA) ist der kompakte Zustand.
   Die Info-Flaeche darueber kollabiert beim Scrollen (Skin-JS setzt die Klasse
   .ks-header-kompakt ans <header>, Direktive §9b Stand 08-20). */
.ks-header__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.7rem;
}

/* Mobil traegt nur die Zeile — die Info-Flaeche frisst sonst den halben Schirm. */
.ks-header__info {
	display: none;
}

@media (min-width: 900px) {
	/* Chrome-Flicker-Root-Cause (User-Befund 08-21): eine max-height-Transition
	   zwingt den Browser bei JEDEM Frame zu einem Layout-Reflow der Grid-Struktur
	   darunter (.ks-header__info-inner, 2 Spalten + Bullets) — das erzeugte das
	   ruckelig-blinkende Bild speziell in Chrome/Blink; Safari/WebKit steckt
	   Reflow-Storms sichtbar glatter weg. Ersetzt durch den grid-template-rows-
	   Trick (1fr -> 0fr): reine Grid-Spuren-Animation ohne erzwungenen Reflow der
	   Kind-Elemente, `.ks-header__info-inner` bleibt einziges Grid-Item mit
	   overflow:hidden, damit der Inhalt beim Kollabieren mitschrumpft. */
	.ks-header__info {
		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows .3s ease, opacity .25s ease, background .28s ease;
	}
	.ks-header__info-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		grid-template-areas: "haupt bullets" "ctas ctas";
		gap: 1rem 2.5rem;
		align-items: center;
		padding-block: 1.5rem 1.6rem;
		overflow: hidden;
		min-height: 0;
	}
	.ks-header__info-haupt {
		grid-area: haupt;
		/* User 08-20: im dunklen Bereich ueber dem Hero soll der Text NICHT
		   linksbuendig stehen — zentriert im ridecake-Hero-Stil. */
		text-align: center;
	}
	.ks-header__info-bullets {
		grid-area: bullets;
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: .45rem;
		text-align: center;
	}
	.ks-header__info-ctas {
		grid-area: ctas;
		display: flex;
		flex-wrap: wrap;
		gap: .7rem;
		align-items: center;
		justify-content: center;
	}

	header.ks-header-kompakt .ks-header__info {
		grid-template-rows: 0fr;
		opacity: 0;
	}
}

/* Direktive §9b (Stand 08-20): bei reduced-motion bleibt die Flaeche stehen
   und sichtbar — kein Kollaps, keine Transition. */
@media (prefers-reduced-motion: reduce) {
	header.ks-header-kompakt .ks-header__info {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.ks-header__info {
		transition: none;
	}
}

/* Mega-Panel: Beschreibungszeile darf umbrechen (der Link selbst ist nowrap). */
.ks-megapanel__text {
	display: block;
	white-space: normal;
}

.ks-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-header__nav > ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.5rem;
}

.ks-header__nav li {
	position: relative;
}

/* Untermenues: geschlossen bis Hover ODER Tastaturfokus. focus-within haelt sie
   fuer Tab-Nutzer offen — die Block-Navigation machte das von selbst, klassisch
   muss man es hinschreiben. */
.ks-header__nav .ks-megapanel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* :hover NUR fuer echte Zeigegeraete mit Maus. Touch kennt kein Hover-Out —
   ein beruehrtes Panel bliebe nach dem ersten Tap haengen, und Browser
   emulieren das synthetische Hover uneinheitlich (Firefox am unzuverlaessigsten),
   besonders im Zusammenspiel mit Scroll-Events. Genau das war die Ursache des
   Tablet-Flacker-Bugs (springt beim Scrollen auf/zu, ueberdeckt den Hero) —
   nicht ein weiterer Timing-Fehler, sondern ein falsches Interaktionsmodell
   fuer Touch. Touch bekommt stattdessen ausschliesslich den Klick-Akkordeon
   (s. u. + ks-neve-header.js), unabhaengig von der Bildschirmbreite. */
@media (hover: hover) and (pointer: fine) {
	.ks-header__nav li:hover > .ks-megapanel {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
}

.ks-header__nav li:focus-within > .ks-megapanel {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.ks-header__nav .ks-megapanel li {
	display: block;
}

.ks-header__nav .ks-megapanel a {
	display: block;
	white-space: nowrap;
}

/* Umschalter nur mobil. Desktop-Regel zuerst, damit die Media-Query unten
   ueberschreibt und nicht umgekehrt. */
.ks-header__toggle {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	line-height: 0;
	color: inherit;
}

.ks-header__toggle span,
.ks-header__toggle span::before,
.ks-header__toggle span::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.ks-header__toggle span::before,
.ks-header__toggle span::after {
	content: "";
	position: relative;
}

.ks-header__toggle span::before {
	top: -7px;
}

.ks-header__toggle span::after {
	top: 5px;
}

.ks-header__toggle[aria-expanded="true"] span {
	background: transparent;
}

.ks-header__toggle[aria-expanded="true"] span::before {
	transform: translateY(7px) rotate(45deg);
}

.ks-header__toggle[aria-expanded="true"] span::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* Hamburger-Klapp-Panel gilt fuer ALLES ohne echte Maus-Hover-Faehigkeit —
   nicht nur unter 860px. Landscape-Tablets (iPad 1024px, groessere Android-
   Tablets bis 1280px) sind Touch-Geraete und liegen oft ueber 860px; ohne die
   (hover:none)/(pointer:coarse)-Bedingungen bekaemen sie faelschlich die
   Maus-Hover-Leiste samt vollbreitem Mega-Panel (ks-v0-skin.css) — genau das
   Panel, das auf Touch nicht sauber schliesst. */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
	.ks-header__toggle {
		display: block;
	}

	/* Das Menue faellt unter die Pille statt sie zu sprengen. Geschlossen ist es
	   fuer Screenreader UND Maus weg (display:none), nicht nur unsichtbar. */
	.ks-header__nav {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		padding: 0.6rem 0.8rem 0.9rem;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}

	.ks-header__nav.is-open {
		display: block;
	}

	.ks-header__nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	/* Mobil & Touch: Untermenues standardmaessig eingeklappt (Akkordeon) */
	.ks-header__nav .ks-megapanel {
		display: none;
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		padding-left: 0.9rem;
	}

	.ks-header__nav li.is-expanded > .ks-megapanel {
		display: block;
	}

	/* Auf Tablets mit genuegend Breite (ab 600px) geoeffnete Untermenues mehrspaltig anzeigen */
	@media (min-width: 600px) {
		.ks-header__nav li.is-expanded > .ks-megapanel {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
			gap: 0.2rem 1rem;
		}
	}

	.ks-header__nav a {
		display: block;
		padding: 0.5rem 0.2rem;
	}

	.ks-header__nav li.menu-item-has-children > a {
		position: relative;
		padding-right: 1.8rem;
	}

	.ks-header__nav li.menu-item-has-children > a::after {
		content: '';
		position: absolute;
		right: 0.2rem;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-65%) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.ks-header__nav li.is-expanded > a::after {
		transform: translateY(-35%) rotate(-135deg);
	}

	/* Das Panel braucht eine eigene Flaeche — es liegt UNTER der Pille und damit
	   ueber dem Hero-Foto. Bewusst hier und nicht im Skin: ohne Flaeche waere die
	   Navigation unlesbar, sobald das Skin-Plugin deaktiviert wird, und
	   "Plugin aus = schlichte, aber heile Seite" soll gelten. */
	.ks-header__nav.is-open {
		background: rgba(255, 255, 255, 0.97);
		border: 1px solid var(--wp--preset--color--ks-border, #e4e7eb);
		border-radius: 18px;
		box-shadow: 0 16px 44px rgba(16, 20, 24, 0.16);
	}

	/* Im ausgeklappten Panel ist jedes Untermenue schon eingerueckt — eine zweite
	   weisse Karte darin waere Doppelung. */
	.ks-header__nav .ks-megapanel {
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
		min-width: 0;
		max-width: none;
	}

	/* Ueber dem Hero faerbt der Skin die Menuelinks weiss. Im geoeffneten Panel
	   waere das Weiss auf Weiss — hier zurueckdrehen. Hoehere Spezifitaet als die
	   Skin-Regel, deshalb unabhaengig von der Ladereihenfolge. */
	.ks-header-over-hero:not(.ks-header-stuck) .ks-header__nav.is-open a {
		color: var(--wp--preset--color--ks-text-2, #5a6169);
		text-shadow: none;
	}
}

/* Die Pille braucht einen Bezugsrahmen fuer das mobile Panel. */
.ks-header {
	position: relative;
}

/* ==========================================================================
   FUSS — Struktur
   ========================================================================== */
.ks-footer {
	padding: 3.5rem 1.25rem 2rem;
}

.ks-footer__inner {
	max-width: 1100px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Sitemap-Spalten: Marke + vier Gruppen. */
.ks-footer__spalten {
	display: grid;
	grid-template-columns: minmax(13rem, 1.3fr) repeat(4, minmax(7.5rem, 1fr));
	gap: 2rem;
	align-items: start;
}

.ks-footer__titel {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.75;
	margin: 0 0 0.8rem;
}

.ks-footer__spalte ul {
	display: grid;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-footer__spalte a {
	color: inherit;
	text-decoration: none;
	font-size: 0.88rem;
	opacity: 0.9;
}

.ks-footer__spalte a:hover {
	opacity: 1;
	text-decoration: underline;
}

.ks-footer__highlight a {
	font-weight: 700;
	color: var(--ks-yellow, #ffd500);
}

.ks-footer__brand {
	font-family: var(--ks-fd, sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
}

.ks-footer__logo {
	color: inherit;
	text-decoration: none;
}

.ks-footer__claim {
	font-weight: 400;
	font-size: 0.85rem;
	opacity: 0.75;
	margin: 0.4rem 0 0;
}

.ks-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	font-size: 0.82rem;
	opacity: 0.85;
}

.ks-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-footer__legal-list a {
	color: inherit;
	text-decoration: none;
}

.ks-footer__legal-list a:hover {
	text-decoration: underline;
}

.ks-footer__legal {
	margin: 0;
}

@media (max-width: 1024px) {
	.ks-footer {
		padding: 2.5rem 1.25rem 1.5rem;
	}
	.ks-footer__inner {
		gap: 1.5rem;
	}
	.ks-footer__spalten {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}
	.ks-footer__brand {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		margin-bottom: 0.25rem;
	}
	.ks-footer__claim {
		margin: 0;
	}
}

@media (max-width: 720px) {
	.ks-footer__spalten {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1.25rem;
	}
	.ks-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

@media (max-width: 440px) {
	.ks-footer__spalten {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.ks-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* ==========================================================================
   ZEILENLAENGE AUF INHALTSSEITEN
   theme.json sagt contentSize 760px, und die Variable wird auch ausgegeben
   (--wp--style--global--content-size). Angewandt wird sie aber nur von einem
   Block-Theme ueber die Wurzel-Layoutregeln. Klassisch fehlt genau dieser
   Schritt: die importierten Seiten stecken in einer alignfull-Gruppe, deren
   Innencontainer keine Begrenzung hat — gemessen liefen Absaetze auf 1419px
   statt 760px. Kinder mit eigener Ausrichtung (alignfull/alignwide) bleiben
   ausgenommen, sonst verloeren die randlosen Abschnitte ihre volle Breite.
   ========================================================================== */
body:not(.ks-vollbreite) .entry-content > *:not(.alignfull):not(.alignwide),
body:not(.ks-vollbreite) .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide) {
	max-width: min(var(--wp--style--global--content-size, 760px), 100%);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* ==========================================================================
   NEVE-ANPASSUNGEN
   Neve setzt am Inhaltscontainer Abstaende, die den randlosen Hero brechen.
   Nur dort neutralisieren, wo unsere Vorlagen selbst die volle Breite bauen.
   ========================================================================== */
body.ks-vollbreite #content.neve-main,
body.ks-vollbreite #content.neve-main > .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   LESEFLUSS — Inhaltsverzeichnis, Abschnittszaehler, Abschluss
   Markup erzeugt inc/lesefluss.php. Farben und Radien kommen aus theme.json,
   hier steht nur, was Struktur ausmacht.
   ========================================================================== */

/* Zaehler auf dem Inhaltscontainer starten, nicht global: sonst zaehlt er ueber
   mehrere Beitraege einer Uebersichtsseite hinweg weiter. */
.entry-content {
	counter-reset: ks-abschnitt;
}

/* User-Fund 08-22 (/360-trainings-was-bedeutet-das/): steht der Hero als
   erster Block IM entry-content (statt davor), folgt die naechste
   Ueberschrift ohne jeden Abstand direkt auf die Hero-Unterkante — gemessen
   0px margin/padding auf Wrapper UND Ueberschrift, kein anderer Mechanismus
   erzeugt hier Luft. Zielt bewusst auf den direkten Nachfolger einer vollen
   Hero-Sektion, nicht auf jede Ueberschrift im Content — sonst doppelte sich
   der Abstand bei Seiten, deren erster Block bereits eigene Marge mitbringt. */
.entry-content > .ks-hero.ks-full + * {
	margin-top: 3rem;
}

.entry-content .ks-abschnitt {
	counter-increment: ks-abschnitt;
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	scroll-margin-top: calc(var(--ks-header-h, 68px) + 2rem);
}

/* Die Nummer steht bewusst NICHT im Ueberschriftentext, sondern hier — sonst
   liefe sie in Suchergebnisse und Screenreader-Ausgaben mit ein. */
.entry-content .ks-abschnitt::before {
	content: counter(ks-abschnitt);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--ks-body);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.9;
	min-width: 1.9rem;
	height: 1.9rem;
	text-align: center;
	border-radius: 999px;
	color: #fff;
	background: var(--wp--preset--color--ks-blue, #1510f0);
}

/* ── Inhaltsverzeichnis ── */
.ks-inhalt {
	max-width: min(var(--wp--style--global--content-size, 760px), 100%);
	margin: 2.5rem auto;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--wp--preset--color--ks-border, #e4e7eb);
	border-left: 3px solid var(--wp--preset--color--ks-blue, #1510f0);
	border-radius: var(--wp--custom--radius--card, 16px);
	background: var(--wp--preset--color--ks-surface, #fff);
}

.ks-inhalt__titel {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ks-text-2, #5a6169);
}

.ks-inhalt__liste {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.35rem;
}

.ks-inhalt__liste a {
	color: var(--wp--preset--color--ks-text, #101418);
	text-decoration: none;
	font-weight: 600;
}

.ks-inhalt__liste a:hover,
.ks-inhalt__liste a:focus {
	color: var(--wp--preset--color--ks-blue, #1510f0);
	text-decoration: underline;
}

/* ── Abschluss: der naechste Schritt ── */
.ks-weiter {
	max-width: min(var(--wp--style--global--content-size, 760px), 100%);
	margin: 3rem auto 1rem;
	padding: 1.8rem;
	border-radius: var(--wp--custom--radius--hero, 20px);
	background: var(--wp--preset--gradient--ks-hero-blue, linear-gradient(150deg, #0a0a66 0%, #1510f0 55%, #3a2ee6 100%));
	color: #fff;
}

.ks-weiter__frage {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--ks-display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.ks-weiter__text {
	margin: 0 0 1.2rem;
	color: rgba(255, 255, 255, 0.88);
}

.ks-weiter__aktionen {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
}

.ks-weiter__cta,
.ks-weiter__zweit {
	display: inline-block;
	padding: 0.8em 1.5em;
	border-radius: var(--wp--custom--radius--btn, 14px);
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.18s ease, background 0.18s ease;
}

.ks-weiter__cta {
	background: #fff;
	color: var(--wp--preset--color--ks-blue-dark, #100e7a);
}

.ks-weiter__zweit {
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}

.ks-weiter__cta:hover,
.ks-weiter__zweit:hover {
	transform: translateY(-1px);
}

.ks-weiter__zweit:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   OTTER-ICON-BLOECKE OHNE ERZEUGTES CSS
   Otter legt die Groesse seiner Icon-Bloecke nicht ins Markup, sondern in eine
   pro Beitrag erzeugte CSS-Datei — die entsteht beim Speichern im Editor. Bei
   uebernommenen Inhalten wurde nie gespeichert, also fehlt sie, und das SVG
   waechst auf die Breite seines Containers: auf /kurven-schule-faq/ gemessene
   1265px, ein bildschirmfuellendes schwarzes Icon. (Auf der Produktivseite
   dasselbe in kleiner: 774px — der Fehler ist geerbt, nicht neu.)
   Deshalb eine Vorgabe auf Klassenebene. Otters eigenes CSS adressiert die
   Bloecke ueber ID-Selektoren und gewinnt damit, sobald es existiert — diese
   Regel ist reiner Rueckfall, kein Ueberschreiben.
   ========================================================================== */
.wp-block-themeisle-blocks-font-awesome-icons-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--ks-blue, #1510f0);
}

.wp-block-themeisle-blocks-font-awesome-icons-container > svg {
	width: 1em;
	height: 1em;
	max-width: 100%;
}

/* ==========================================================================
   UEBERNOMMENE INHALTE OHNE BLOCK-QUELLTEXT
   Ein Teil der Beitraege liegt als klassisches HTML mit Otter-Klassen vor (auf
   der Produktivseite ebenso — dort gibt es keinen Blockquelltext zu holen).
   Fuer diese Inhalte greifen weder die Block-Layoutregeln noch Otters erzeugtes
   CSS, deshalb hier das Noetigste: Zeilenlaenge und lesbare Akkordeons.
   ========================================================================== */

/* Otter-Spalten haben einen eigenen Innencontainer. Ohne Begrenzung laufen die
   Fragen ueber die volle Fensterbreite — auf /kurven-schule-faq/ gemessen bis an
   beide Raender. */
body:not(.ks-vollbreite) .entry-content .innerblocks-wrap > *:not(.alignfull):not(.alignwide) {
	max-width: min(var(--wp--style--global--content-size, 760px), 100%);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Akkordeons (details/summary). WordPress liefert nur das nackte Dreieck; als
   FAQ-Liste braucht es eine erkennbare Zeile, sonst sieht man nicht, was
   anklickbar ist. */
.entry-content details {
	max-width: min(var(--wp--style--global--content-size, 760px), 100%);
	margin: 0.5rem auto;
	border: 1px solid var(--wp--preset--color--ks-border, #e4e7eb);
	border-radius: var(--wp--custom--radius--card, 16px);
	background: var(--wp--preset--color--ks-surface, #fff);
	overflow: hidden;
}

.entry-content details > summary {
	cursor: pointer;
	list-style: none;
	padding: 0.9rem 1.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--ks-text, #101418);
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	transition: background 0.18s ease;
}

.entry-content details > summary::-webkit-details-marker {
	display: none;
}

/* Eigenes Zeichen statt des Browser-Dreiecks — dreht beim Oeffnen. */
.entry-content details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--wp--preset--color--ks-blue, #1510f0);
	border-bottom: 2px solid var(--wp--preset--color--ks-blue, #1510f0);
	transform: rotate(-45deg) translate(-0.1em, -0.1em);
	transition: transform 0.2s ease;
}

.entry-content details[open] > summary::before {
	transform: rotate(45deg) translate(0, -0.15em);
}

.entry-content details > summary:hover {
	background: rgba(21, 16, 240, 0.04);
}

.entry-content details > *:not(summary) {
	padding: 0 1.1rem;
	margin-block: 0.6rem;
	color: var(--wp--preset--color--ks-text-2, #5a6169);
}

.entry-content details > *:last-child {
	padding-bottom: 1rem;
}

/* ==========================================================================
   KURSRASTER — Breite und Spaltenzahl nach Regelwerk
   Das Raster kommt aus der Buchungs-App, die bildschirmfuellend gebaut ist.
   Auf der Website lief es dadurch bei 1920px ueber die VOLLE Breite: sechs
   Spalten, 305px schmale Karten, 18px Abstand, kein Seitenrand — gemessen und
   als "eng zusammengepresst" gemeldet.
   Die Direktive gibt eine wideSize von 1240px vor (theme.json). Daran wird das
   Raster gebunden; drei Spalten mit Luft lesen sich besser als sechs gequetschte.
   ========================================================================== */
body.ks-vollbreite .kf-grid {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	gap: clamp(1rem, 1.6vw, 1.6rem);
	/* 320px Mindestbreite: darunter bricht die Datumszeile um. */
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Luft zwischen Kopfbild und Liste.
 *
 * Auf den Kategorie-Archiven begann das Raster exakt an der Unterkante des Heros
 * (gemessen: Hero endet bei 340 px, erste Karte beginnt bei 340 px). Die Karte
 * klebte am Bild und las sich wie ein Teil davon statt wie der Anfang der Liste.
 * Der Wert ist derselbe, mit dem auch sonst Abschnitte getrennt werden. */
body.ks-vollbreite .ks-hero + .kf-filter-panel,
body.ks-vollbreite .ks-hero + .kf-grid,
body.ks-vollbreite .ks-hero + .kf-mobile-filter-bar {
	margin-top: clamp(1.8rem, 4vw, 3rem);
}

/* Auf dem Telefon greift die Regel oben NICHT — und der Grund ist tückisch:
 * zwischen Hero und Mobil-Leiste steht die Desktop-Filterleiste. Die ist unter
 * 768px zwar `display:none`, zählt für den Geschwister-Selektor `+` aber
 * trotzdem mit. Die Mobil-Leiste ist also nie direktes Geschwisterkind des
 * Heros, und ihr Abstand blieb 0 — die Leiste klebte am Bild.
 *
 * `display:none` entfernt ein Element aus der DARSTELLUNG, nicht aus dem
 * Dokument. Selektoren sehen es weiter.
 *
 * Deshalb hier direkt adressiert statt über die Nachbarschaft. */
@media (max-width: 768px) {
	body.ks-vollbreite .kf-mobile-filter-bar,
	body.ks-vollbreite .ks-hero ~ .kf-grid:first-of-type {
		margin-top: clamp(1.4rem, 5vw, 2rem);
	}
}

/* Wenige Karten sollen nicht verloren am linken Rand stehen.
 *
 * `auto-fill` legt auch dann drei Spuren an, wenn nur eine Karte da ist — bei
 * einem einzelnen Termin (Sicherheitstraining hat genau einen) stand die Karte
 * links und rechts daneben zwei Drittel Leere. Das sah nach einem Ladefehler aus,
 * nicht nach „ein Termin".
 *
 * Deckel auf die Spurbreite plus Zentrierung: eine Karte steht mittig, zwei
 * stehen mittig nebeneinander, ab drei fuellt sich die Reihe wie bisher. Der
 * Deckel verhindert zugleich, dass eine einzelne Karte auf 1240 px auseinander-
 * gezogen wird — ein Kursbild in doppelter Breite wirkt plakatig, nicht wertig. */
body.ks-vollbreite .kf-grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 400px));
	justify-content: center;
}

/* Die Karte selbst darf innen etwas grosszuegiger werden, sobald sie Platz hat. */
@media (min-width: 900px) {
	body.ks-vollbreite .kf-karte {
		padding: 26px;
	}
}