/**
 * MediaFitPass - Custom Styles
 * Ergaenzende Styles zum theme.json
 * Referenz: florian-buschmann.de (heller, cleaner)
 */

/* ── Base ── */
html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Fixierter Header: Beim Tabben und bei Sprunglinks bleibt das Ziel sichtbar (WCAG 2.4.11, Technik C43) */
html {
	scroll-padding-top: 96px;
}

/* Angemeldet: Adminleiste 32px + Kopfleiste (Focus Mode 87px) */
html:has(body.admin-bar) {
	scroll-padding-top: 128px;
}

/* Wer reduzierte Bewegung eingestellt hat, springt ohne Animation */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Fixed Header ── */
.site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
	backdrop-filter: blur(12px);
	background-color: rgba(255, 255, 255, 0.96) !important;
}

.site-header:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Admin-Balken ──
   Der Header ist position:fixed und richtet sich damit am Fenster aus, nicht
   am Dokument. WordPress schiebt die Seite zwar mit html{margin-top:32px}
   nach unten, das erreicht ein fixiertes Element aber nicht - der Header
   verschwindet sonst unter dem schwarzen Balken. Betrifft nur angemeldete
   Nutzer; fuer Besucher aendert sich nichts.
   Das !important ist noetig, weil top:0px als Inline-Stil im Markup steht. */
.admin-bar .site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px !important;
	}
}

/* Unter 600px loest WordPress den Balken vom Fensterrand - er scrollt mit weg,
   der Header gehoert dann wieder nach ganz oben. */
@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0 !important;
	}
}

/* Platz fuer den fixierten Header auf Unterseiten */
body:not(:has(.hero-shader)) .wp-site-blocks {
	padding-top: 70px;
}

/* Hero-Seiten: Header transparent */
body:has(.hero-shader) .site-header {
	background-color: transparent !important;
	box-shadow: none;
	backdrop-filter: none;
}

body:has(.hero-shader) .site-header a,
body:has(.hero-shader) .site-header .wp-block-navigation a,
body:has(.hero-shader) .site-header p {
	color: rgba(255, 255, 255, 0.85) !important;
}

body:has(.hero-shader) .site-header .wp-block-navigation a:hover {
	color: #ffffff !important;
}

body:has(.hero-shader) .site-header .wp-block-navigation a::after {
	background-color: rgba(255, 255, 255, 0.6);
}

body:has(.hero-shader) .site-header .header-cta .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

body:has(.hero-shader) .site-header .header-cta .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Header beim Scrollen: weisser Hintergrund + Schatten */
body:has(.hero-shader) .site-header.site-header--scrolled {
	background-color: rgba(255, 255, 255, 0.96) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(12px);
}

body:has(.hero-shader) .site-header.site-header--scrolled a,
body:has(.hero-shader) .site-header.site-header--scrolled .wp-block-navigation a,
body:has(.hero-shader) .site-header.site-header--scrolled p {
	color: inherit !important;
}

body:has(.hero-shader) .site-header.site-header--scrolled .wp-block-navigation a::after {
	background-color: var(--wp--preset--color--primary);
}

body:has(.hero-shader) .site-header.site-header--scrolled .header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	border: none;
}

/* Header CTA hidden on mobile */
@media (max-width: 781px) {
	.header-cta {
		display: none !important;
	}
}

/* "Gratis-Medienplaner" steht im Menue nur, wo der Knopf oben rechts fehlt
   (header.html, Pruefung vom 24.10.2026) */
.wp-block-navigation .wp-block-navigation-item.mfp-nur-mobil {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-navigation .wp-block-navigation-item.mfp-nur-mobil {
		display: flex;
	}
}

/* ── Mobile Navigation Overlay ──
   23.10.2026 (Persona-Test am Handy, 390 px): Vorher stand alles senkrecht
   in der Mitte. Das Schliessen-X haengt im Core oben rechts am Dialog, sass
   dadurch mitten im Bildschirm, und die Eintraege standen rechtsbuendig
   (Navigation "justifyContent: right") in einer schmalen Spalte. Jetzt
   beginnt das Menue oben: X an der Stelle des Hamburgers, Eintraege
   linksbuendig ueber die volle Breite, je mit Trennlinie und grosser
   Tippflaeche. */
.wp-block-navigation__responsive-container.is-menu-open {
	display: flex !important;
	flex-direction: column;
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 1.25rem 1rem 2.5rem 1.5rem !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0;
	width: 100%;
	padding-top: 4.25rem;
	padding-right: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.3rem !important;
	font-weight: 500;
	text-align: left;
	display: block;
	width: 100%;
	padding: 0.95rem 0 !important;
}

/* Die Unterstreichung aus der Kopfzeile (a::after) laege hier auf der
   Trennlinie; die aktuelle Seite ist im Menue fett und unterstrichen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* backdrop-filter macht den Header zum Bezugsrahmen fuer position:fixed - das Menue-Overlay waere sonst nur so hoch wie der Header, Schliessen-X und erster Link laegen ausserhalb. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: #ffffff !important;
}

/* Hamburger-Icon auf dunklem Hero sichtbar machen */
body:has(.hero-shader) .wp-block-navigation__responsive-container-open {
	color: #ffffff !important;
}

body:has(.hero-shader) .wp-block-navigation__responsive-container-open svg {
	fill: #ffffff;
	stroke: #ffffff;
}

/* Gescrollter Header ist weiss: Hamburger wieder dunkel wie auf Seiten ohne
   dunklen Kopf, sonst weiss auf weiss (22.10.2026) */
body:has(.hero-shader) .site-header.site-header--scrolled .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--dark, #1a1a2e) !important;
}

body:has(.hero-shader) .site-header.site-header--scrolled .wp-block-navigation__responsive-container-open svg {
	fill: currentColor;
	stroke: none;
}

/* Hamburger immer sichtbar */
.wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
}

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

/* ── Navigation ── */
.wp-block-navigation a {
	transition: color 0.2s ease;
	position: relative;
}

.wp-block-navigation a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	transition: width 0.25s ease, left 0.25s ease;
}

.wp-block-navigation a:hover::after,
.wp-block-navigation a[aria-current="page"]::after {
	width: 100%;
	left: 0;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* ── Buttons ── */
.wp-block-button__link {
	transition: all 0.3s ease;
	letter-spacing: 0.01em;
	border: 2px solid transparent;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline Button */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(0, 0, 0, 0.04) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Cards ── */
.mediafitpass-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.mediafitpass-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── Cover / Hero ── */
.wp-block-cover {
	overflow: hidden;
}

/* ── Sections ── */
.alignfull > .wp-block-cover__inner-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Quote ── */
.wp-block-quote.is-style-plain {
	border-left: none;
	position: relative;
}

.wp-block-quote.is-style-plain::before {
	content: '\201C';
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 6rem;
	color: var(--wp--preset--color--primary);
	opacity: 0.15;
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	line-height: 1;
	pointer-events: none;
}

.wp-block-quote.is-style-plain p {
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	color: var(--wp--preset--color--dark);
	position: relative;
}

.wp-block-quote.is-style-plain cite {
	font-family: var(--wp--preset--font-family--poppins);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-gray);
	display: block;
	margin-top: 1rem;
}

.wp-block-quote.is-style-plain cite::before {
	content: '— ';
}

/* ── Separator ── */
.wp-block-separator.is-style-wide {
	opacity: 0.25;
}

/* ── Social Links ── */
.wp-block-social-links .wp-social-link {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.wp-block-social-links .wp-social-link:hover {
	transform: scale(1.2);
	opacity: 0.85;
}

/* ── Footer ── */
/* Fliesstext der Fusszeile: text-gray (#555555) erreicht auf dark nur
   2.29:1, verlangt sind 4.5:1 (WCAG 1.4.3). #9097A8 kommt auf 5.83:1.
   Die Trennlinie traegt dieselbe Klasse und bleibt, wie sie ist. */
.site-footer .has-text-gray-color:not(hr) {
	color: #9097A8 !important;
}

.site-footer a {
	color: var(--wp--preset--color--mid-gray);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: var(--wp--preset--color--white);
}

/* Textlinks unterstrichen: Gegen den Fliesstext kommt die Linkfarbe nur
   auf 2.33:1, die Farbe allein unterscheidet sie also nicht (WCAG 1.4.1).
   Knopf und Social-Icons bleiben ohne Unterstrich. */
.site-footer p a,
.site-footer .is-style-no-bullets a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}

.is-style-no-bullets li {
	padding: 0.25rem 0;
}

/* ── Trust Glance (Produkt-Claim oben, zentriert) ── */
.trust-glance {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.trust-glance__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 1.75rem 0;
	letter-spacing: -0.01em;
}

.trust-glance__claims {
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem 2.5rem;
}

/* Standalone-Variante: ohne unteren Margin, fuer eigene Sektion direkt unter Hero */
.trust-glance__claims.trust-row {
	margin: 0;
}

.trust-glance__claim {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

/* 29.09.2026: Symbole (Lucide) statt Emojis, im gruenen Feld wie die Karten */
.trust-glance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(37, 128, 87, 0.12);
	color: var(--wp--preset--color--primary);
	line-height: 1;
}

.trust-glance__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	color: var(--wp--preset--color--text-gray);
	line-height: 1.65;
	max-width: 940px;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.trust-glance__claims {
		flex-direction: column;
		gap: 0.85rem;
	}
}

/* Startseite: vier Karten statt einer Zeile (30.09.2026, Florian: "optisch
   verbessern"). Nur mit --karten, die Elternseite nutzt trust-glance als
   Zeile weiter. */
.trust-glance__claims--karten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.1rem;
	max-width: 1100px;
	margin: 2.25rem auto 0;
	text-align: left;
}

.trust-glance__claims--karten .trust-glance__claim {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1.5rem 1.4rem 1.6rem;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #f5f8f6 100%);
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 16px 36px -28px rgba(26, 26, 46, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.trust-glance__claims--karten .trust-glance__claim:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 128, 87, 0.35);
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 22px 44px -26px rgba(26, 26, 46, 0.35);
}

.trust-glance__claims--karten .trust-glance__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
}

.trust-glance__claims--karten .trust-glance__icon svg {
	width: 24px;
	height: 24px;
}

.trust-glance__claims--karten .trust-glance__label {
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
}

.trust-glance__detail {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.trust-glance__claims--karten + .trust-glance__text,
.trust-glance__title + .trust-glance__text {
	margin-top: -0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.trust-glance__claims--karten .trust-glance__claim {
		transition: none;
	}

	.trust-glance__claims--karten .trust-glance__claim:hover {
		transform: none;
	}
}

@media (max-width: 1000px) {
	.trust-glance__claims--karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.trust-glance__claims--karten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Trust Numbers (Erfahrung, jetzt unten rechts) ── */
.trust-numbers {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.trust-number {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.trust-number__value {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: clamp(2.4rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	line-height: 1;
}

.trust-number__label {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 781px) {
	.trust-experience {
		flex-basis: 100% !important;
	}
}

/* ── Trust Foundation (unten: Foto + 3 Punkte) ── */
.trust-foundation__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

@media (max-width: 781px) {
	.trust-foundation__media {
		flex-basis: 100% !important;
	}
}

/* ── Section-Title Normalisierung ──
   Einheitlicher Abstand nach Section-Headlines (h2 und h1 in
   Unterseiten-Heros). Hero-Startseite (.hero-shader__title) hat
   eigenes Margin und ist ausgeschlossen. */
.wp-block-group h2.wp-block-heading,
.wp-block-group h1.wp-block-heading:not(.hero-shader__title),
.testimonials-section__title,
.section-title {
	margin-bottom: 1.75rem;
}

/* ── Why Intro (zentrierter Intro-Block ueber Donut) ── */
.why-intro {
	max-width: 820px;
	margin: 0 auto 2.5rem auto;
	text-align: center;
}

.why-intro__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 1.75rem 0;
	letter-spacing: -0.01em;
}

.why-intro__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-gray);
	margin: 0 auto;
	max-width: 720px;
}

/* ── 24-Stunden-Grafik (patterns/why-section.php), neu am 30.09.2026 ──
   Florian: "die grafik soll echt kicken und da fehlt mir auch noch der
   bezug zu den medien". Erst dunkel, am selben Tag hell (Florian: "farblich
   ist der kasten ein sehr starker bruch"), Ueberschrift im Panel ("der text
   ueber dem bereich wirkt irgendwie lose"). Aussenring = Beispiel eines
   Schultags, Innenring = Smartphone laut JIM 2025. Darunter links die
   Balken nach Alter, rechts drei Zahlen untereinander, ohne Kartenrahmen
   (Florian zu den vielen Kartenreihen: "das schafft keine abwechslung").
   Belege im Kopf von
   why-section.php. Umfang aussen 603,19 (r 96), innen 439,82 (r 70); die
   Laengen stehen als --laenge und --versatz am Kreis. Die Animation startet
   day-chart.js ueber die Klasse day-chart--played. */
.tag-panel,
.wp-block-group > .tag-panel {
	position: relative;
	max-width: 1200px;
	margin: 0 auto 2.5rem;
	padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.25rem, 4vw, 3.5rem);
	border: 1px solid #dce5df;
	border-radius: 28px;
	background:
		radial-gradient(circle at 8% 0%, rgba(37, 128, 87, 0.09) 0%, transparent 42%),
		radial-gradient(circle at 96% 100%, rgba(214, 58, 58, 0.05) 0%, transparent 45%),
		linear-gradient(180deg, #f3f7f4 0%, #ffffff 72%);
	color: var(--wp--preset--color--dark);
	overflow: hidden;
	box-shadow: 0 24px 50px -34px rgba(26, 26, 46, 0.28);
}

.tag-panel__kopf {
	max-width: 780px;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.tag-panel__dachzeile {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.tag-panel .why-intro__title {
	margin-bottom: 1rem;
}

.why-intro__text strong {
	color: #d63a3a;
	font-weight: 700;
	white-space: nowrap;
}

.day-chart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.75rem, 5vw, 4.5rem);
}

.day-chart__svg {
	width: min(340px, 78vw);
	height: auto;
	flex-shrink: 0;
	overflow: visible;
}

.day-chart__bg {
	fill: none;
	stroke: #e6ece8;
	stroke-width: 22;
}

.day-chart__seg {
	fill: none;
	stroke-width: 22;
	transform: rotate(-90deg);
	transform-origin: center;
	stroke-dasharray: 0 603.19;
	stroke-dashoffset: var(--versatz);
	transition: stroke-dasharray 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.day-chart--played .day-chart__seg {
	stroke-dasharray: var(--laenge) 603.19;
}

.day-chart__seg--sleep   { stroke: #5b7288; }
.day-chart__seg--school  { stroke: #258057; transition-delay: 0.15s; }
.day-chart__seg--pflicht { stroke: #899664; transition-delay: 0.3s; }
.day-chart__seg--family  { stroke: #b7c49b; transition-delay: 0.45s; }
.day-chart__seg--free    { stroke: #c3d5ca; transition-delay: 0.6s; }

.day-chart__spur {
	fill: none;
	stroke: #f3e7e7;
	stroke-width: 14;
}

.day-chart__handy {
	fill: none;
	stroke: #e03e3e;
	stroke-width: 14;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: center;
	stroke-dasharray: 0 439.82;
	transition: stroke-dasharray 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
	filter: drop-shadow(0 2px 6px rgba(224, 62, 62, 0.35));
}

.day-chart--played .day-chart__handy {
	stroke-dasharray: var(--laenge) 439.82;
}

.day-chart__center {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 40px;
	font-weight: 700;
	fill: var(--wp--preset--color--dark);
	font-variant-numeric: tabular-nums;
}

.day-chart__center-sub {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 11px;
	font-weight: 600;
	fill: #d63a3a;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.day-chart__seite {
	flex: 1 1 320px;
	max-width: 470px;
}

.day-chart__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.day-chart__legend-item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.6rem;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--dark);
}

.day-chart__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #eef2ef;
}

.day-chart__legend-item--sleep .day-chart__icon   { color: #5b7288; background: rgba(91, 114, 136, 0.13); }
.day-chart__legend-item--school .day-chart__icon  { color: #258057; background: rgba(37, 128, 87, 0.12); }
.day-chart__legend-item--pflicht .day-chart__icon { color: #6f7a4c; background: rgba(137, 150, 100, 0.18); }
.day-chart__legend-item--family .day-chart__icon  { color: #7a8757; background: rgba(183, 196, 155, 0.32); }
.day-chart__legend-item--free .day-chart__icon    { color: #587565; background: rgba(195, 213, 202, 0.45); }

.day-chart__legend-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.day-chart__handy-zeile {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	margin: 0.9rem 0 0;
	padding: 0.75rem 0.8rem;
	border: 1px solid rgba(214, 58, 58, 0.22);
	border-radius: 14px;
	background: #fdf1f1;
	color: var(--wp--preset--color--dark);
	font-size: 1rem;
	line-height: 1.45;
}

.day-chart__handy-zeile strong {
	color: #c53030;
}

.day-chart__handy-zeile .day-chart__icon {
	background: rgba(214, 58, 58, 0.13);
	color: #d63a3a;
}

.day-chart__hinweis {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	color: #6b7280;
}

/* Links die Balken, rechts drei Zahlen untereinander (Zahl | Satz) */
.tag-fakten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px solid #dce5df;
}

.tag-fakt--balken {
	grid-row: span 3;
	align-self: center;
	padding-right: clamp(2rem, 4.5vw, 4rem);
	border-right: 1px solid #dce5df;
}

.tag-fakt--zahl {
	display: grid;
	grid-template-columns: 12.5rem minmax(0, 1fr);
	align-items: center;
	gap: 1.25rem;
	padding: 1.1rem 0 1.1rem clamp(2rem, 4.5vw, 4rem);
	border-top: 1px solid #dce5df;
}

.tag-fakt--balken + .tag-fakt--zahl {
	padding-top: 0.25rem;
	border-top: 0;
}

.tag-fakt--zahl:last-child {
	padding-bottom: 0.25rem;
}

.tag-fakt__zahl {
	margin: 0;
	font-size: clamp(1.75rem, 2.8vw, 2.1rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #d63a3a;
}

.tag-fakt__vorsatz {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tag-fakt__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #4b5563;
}

.tag-fakt__titel {
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

.tag-fakt__liste {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.tag-fakt__balken {
	display: grid;
	grid-template-columns: 4.4rem minmax(0, 1fr) 4.8rem;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	color: #4b5563;
}

.tag-fakt__spur {
	height: 10px;
	border-radius: 99px;
	background: #e8eeea;
	overflow: hidden;
}

.tag-fakt__fuellung {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #258057, #3fbf7f);
	transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
}

.day-chart--played .tag-fakt__fuellung {
	width: calc(var(--anteil) * 100%);
}

.tag-fakt__balken--hervor {
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

.tag-fakt__balken--hervor .tag-fakt__fuellung {
	background: linear-gradient(90deg, #d63a3a, #ff6b6b);
}

.tag-fakt__wert {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Quellen: eine Zeile, Rechenweg zum Aufklappen (Florian, 30.09.2026:
   "kann man das reduzieren?") */
.tag-quellen {
	margin: 1.75rem 0 0;
	font-size: 0.78rem;
	line-height: 1.6;
	color: #6b7280;
}

.tag-quellen__kurz {
	cursor: pointer;
	list-style: none;
}

.tag-quellen__kurz::-webkit-details-marker {
	display: none;
}

.tag-quellen__mehr {
	margin-left: 0.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tag-quellen__mehr::after {
	content: " ▾";
	text-decoration: none;
}

.tag-quellen[open] .tag-quellen__mehr::after {
	content: " ▴";
}

.tag-quellen p {
	margin: 0.5rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.day-chart__seg,
	.day-chart__handy,
	.tag-fakt__fuellung {
		transition: none;
	}
}

/* Bis 1024px: Balken oben, darunter die drei Zahlen, getrennt durch Linien */
@media (max-width: 1024px) {
	.tag-fakten {
		grid-template-columns: minmax(0, 1fr);
	}

	.tag-fakt--balken {
		grid-row: auto;
		padding: 0 0 1.5rem;
		border-right: 0;
	}

	.tag-fakt--zahl,
	.tag-fakt--balken + .tag-fakt--zahl {
		padding: 1.25rem 0;
		border-top: 1px solid #dce5df;
	}

	.tag-fakt--zahl:last-child {
		padding-bottom: 0;
	}
}

@media (max-width: 600px) {
	.tag-fakt--zahl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4rem;
	}

	.tag-panel {
		border-radius: 20px;
	}

	.day-chart__svg {
		width: min(270px, 78vw);
	}

	.day-chart__legend-item,
	.day-chart__handy-zeile {
		font-size: 0.95rem;
	}
}

/* ── Why Collapse (ausklappbarer Bereich mit den 4 Features) ──
   Seit 30.09.2026 kein Kasten mehr, sondern eine Linie mit einem
   Umschalter in der Mitte (Florian: "es sind zweimal diese rechteckigen
   bloecke"). Zweiter Selektor gegen die Layout-Regel von WordPress. */
.why-collapse,
.wp-block-group > .why-collapse {
	max-width: 1200px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0 auto;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 0;
	background: none;
}

.why-collapse__summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	padding: 1.5rem 0 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	transition: color 0.2s ease;
}

.why-collapse__summary::-webkit-details-marker {
	display: none;
}

.why-collapse__summary::after {
	content: '+';
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s ease;
}

.why-collapse[open] .why-collapse__summary::after {
	transform: rotate(45deg);
}

.why-collapse__summary:hover {
	color: var(--wp--preset--color--accent);
}

.why-collapse__content {
	text-align: left;
	padding: 1.75rem 0 0;
}

/* ── Why Features (in Collapsible: 2 Spalten) ── */
.why-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (max-width: 781px) {
	.why-features {
		grid-template-columns: 1fr;
	}
}

.why-feature {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.why-feature:hover {
	background: var(--wp--preset--color--light-gray);
	border-color: var(--wp--preset--color--mid-gray);
	transform: translateX(4px);
}

.why-feature__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.1), rgba(0, 56, 227, 0.06));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
	transition: background 0.3s ease;
}

.why-feature:hover .why-feature__icon {
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.18), rgba(0, 56, 227, 0.1));
}

.why-feature__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.3rem 0;
}

.why-feature__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	color: var(--wp--preset--color--text-gray);
	line-height: 1.6;
	margin: 0;
}

/* ── Images ── */
.wp-block-image img {
	border-radius: 12px;
}

.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/* ── FAQ Accordion (Core-Block "Details") ── */
.faq-list .wp-block-details > summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	padding: 1.25rem 1.5rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color 0.2s ease;
}

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

.faq-list .wp-block-details > summary::after {
	content: '+';
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--wp--preset--color--primary);
	transition: transform 0.3s ease;
}

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

.faq-list .wp-block-details > summary:hover {
	color: var(--wp--preset--color--primary);
}

/* ── Team Cards v2 ── */
.team-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	max-width: 900px;
	margin: 0 auto;
}

.team-card-v2 {
	background: var(--wp--preset--color--light-gray);
	border-radius: 20px;
	padding: 2.5rem 2rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card-v2:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(37, 128, 87, 0.1);
}

.team-card-v2__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark));
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 auto 1.25rem auto;
	letter-spacing: 0.02em;
}

.team-card-v2__avatar--accent {
	background: linear-gradient(135deg, var(--wp--preset--color--accent), #1a3a8a);
}

/* Avatar mit echtem Foto (Bild wird beschnitten zum Kreis) */
.team-card-v2__avatar--image {
	width: 96px;
	height: 96px;
	padding: 0;
	background: transparent;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.team-card-v2__avatar--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.team-card-v2__name {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.25rem 0;
}

.team-card-v2__role {
	font-family: var(--wp--preset--font-family--playfair), serif;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1rem 0;
}

.team-card-v2__bio {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-gray);
	line-height: 1.6;
	margin: 0 0 1.25rem 0;
}

.team-card-v2__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.team-card-v2__tag {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.3rem 0.75rem;
	border-radius: 9999px;
	background: rgba(37, 128, 87, 0.08);
	/* primary-dark: primary kam auf dem getoenten Grund nur auf 4.11:1,
	   primary-dark auf 6.51:1 (verlangt 4.5:1). */
	color: var(--wp--preset--color--primary-dark);
}

@media (max-width: 600px) {
	.team-cards {
		grid-template-columns: 1fr;
	}
}

/* ── Pillar Section (Drei Saeulen) ── */
.pillar-section {
	background-color: var(--wp--preset--color--light-gray);
	padding: 6rem 2rem;
}

.pillar-cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	max-width: 1200px;
	margin: 0 auto;
}

.pillar-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 2.5rem 2rem;
	text-align: center;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(37, 128, 87, 0.12);
}

/* Untertitel der Saeulen: Olivgruen (secondary #899664) erreicht auf der
   weissen Karte nur 3.18:1, verlangt sind 4.5:1. primary-dark kommt auf
   7.72:1. Olivgruen bleibt als Flaechenfarbe im Einsatz. */
.pillar-card .has-secondary-color {
	color: var(--wp--preset--color--primary-dark) !important;
}

.pillar-card--featured {
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: 0 4px 16px rgba(37, 128, 87, 0.08);
}

.pillar-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.35rem 1rem;
	border-radius: 0 0 10px 10px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
}

.pillar-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.08), rgba(0, 56, 227, 0.06));
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.5rem;
}

.pillar-card:hover .pillar-card__icon {
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.15), rgba(0, 56, 227, 0.1));
}

/* Image-Variante: groesseres, transparentes Icon (Bild ist 3:2) */
.pillar-card__icon--image {
	width: 180px;
	height: 120px;
	background: transparent;
	border-radius: 0;
	transition: transform 0.35s ease;
}

/* Kurs-Detail-Sektion: kleines Kurs-Icon ueber dem Label */
.kurs-detail__icon {
	margin-bottom: 1rem;
}

.kurs-detail__icon img {
	width: 100px;
	height: auto;
	display: block;
}

.pillar-card:hover .pillar-card__icon--image {
	background: transparent;
	transform: scale(1.05);
}

.pillar-card__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pillar-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.pillar-card__link:hover {
	color: var(--wp--preset--color--primary-dark);
	gap: 0.8rem;
}

@media (max-width: 781px) {
	.pillar-cards {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
}

/* ── Responsive ── */
@media (max-width: 781px) {
	.mediafitpass-card {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.wp-block-quote.is-style-plain::before {
		font-size: 4rem;
		top: -1.5rem;
	}
}

@media (max-width: 480px) {
	.wp-block-cover {
		min-height: 70vh !important;
	}

	.wp-block-buttons {
		flex-direction: column;
		align-items: center;
	}

	.wp-block-button {
		width: 100%;
	}

	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ── Hero (ueberarbeitet April 2026) ── */
.hero-shader .hero-shader__columns {
	align-items: center;
	width: 100%;
}

.hero-shader .hero-shader__title {
	color: #ffffff !important;
}

/* Akzentwort in primary-light: primary (#258057) faellt auf dem gruenen
   Blob unter 3:1 (2.04:1), primary-light (#2EA866) haelt dort 3.28:1 und
   auf dem dunklen Grund 6.45:1. Die gruene Hover-Verstaerkung in hero.css
   ist deshalb gestrichen. */
.hero-shader__title-accent {
	color: var(--wp--preset--color--primary-light);
}

.hero-shader__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Bildunterschrift unter dem Hero-Bild (etwa "Symbolbild, mit KI
   erzeugt"): klein und zurueckhaltend. Weiss mit 65 % wie die
   Beschreibung, auf dem dunklen Grund mindestens 5:1. */
.hero-shader__image .wp-element-caption {
	position: relative;
	z-index: 10;
	margin: 0.75rem 0 0 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
	text-align: right;
}

@media (max-width: 781px) {
	.hero-shader .hero-shader__columns {
		flex-direction: column;
	}
	.hero-shader__image-col {
		order: 2;
	}
	.hero-shader__image img {
		max-height: 320px;
	}
}

/* ── Initiator-Sektion ── */
.initiator-section__image img {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 24px;
	display: block;
	margin-inline: auto;
}

.initiator-mini__avatar img {
	display: block;
	object-fit: cover;
}

@media (max-width: 600px) {
	.initiator-mini .wp-block-columns {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Karten-Layout allgemein: Spalten mit Karten auf gleiche Hoehe
   strecken, Karte fuellt volle Spaltenbreite ── */
.wp-block-column:has(> .mediafitpass-card) {
	display: flex;
	flex-direction: column;
}

.mediafitpass-card {
	flex: 1;
}

/* ── Schulen-Einsatz: aufklappbare Karten (details/summary) ── */
.einsatz-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	max-width: 900px;
	margin: 0 auto;
}

.einsatz-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.einsatz-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 18px rgba(37, 128, 87, 0.1);
	transform: translateY(-1px);
}

.einsatz-card[open] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 24px rgba(37, 128, 87, 0.1);
}

.einsatz-card__summary {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
}

.einsatz-card__summary::-webkit-details-marker {
	display: none;
}

.einsatz-card__icon {
	font-size: 1.6rem;
	line-height: 1;
}

.einsatz-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	line-height: 1.35;
}

.einsatz-card__toggle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(37, 128, 87, 0.08);
	color: var(--wp--preset--color--primary);
	position: relative;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.3s ease;
}

.einsatz-card__toggle::before,
.einsatz-card__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.einsatz-card__toggle::before {
	width: 12px;
	height: 2px;
}

.einsatz-card__toggle::after {
	width: 2px;
	height: 12px;
}

.einsatz-card[open] .einsatz-card__toggle {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.einsatz-card[open] .einsatz-card__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.einsatz-card__content {
	padding: 0 1.5rem 1.4rem calc(1.5rem + 1.6rem + 1rem);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.einsatz-card__content p {
	margin: 0;
}

@media (max-width: 600px) {
	.einsatz-card__summary {
		padding: 1rem 1.1rem;
		gap: 0.75rem;
	}
	.einsatz-card__content {
		padding: 0 1.1rem 1.2rem 1.1rem;
	}
}

/* ── Schulen Prozess (3-Schritte-Ablauf) ── */
.prozess-steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	counter-reset: prozess;
	position: relative;
}

.prozess-step {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 18px;
	padding: 2rem 1.6rem 1.75rem 1.6rem;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.prozess-step:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 14px 32px rgba(37, 128, 87, 0.1);
}

/* Verbindungslinien zwischen den Schritten (Desktop) */
.prozess-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -1.25rem;
	width: 1.25rem;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), rgba(37, 128, 87, 0.25));
	transform: translateY(-50%);
	pointer-events: none;
}

.prozess-step__num {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: 0.25rem;
}

.prozess-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.1), rgba(0, 56, 227, 0.06));
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

.prozess-step__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.6rem 0;
	letter-spacing: -0.01em;
}

.prozess-step__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
	margin: 0;
}

@media (max-width: 781px) {
	.prozess-steps {
		grid-template-columns: 1fr;
		max-width: 540px;
		gap: 2rem;
	}
	.prozess-step:not(:last-child)::after {
		top: auto;
		bottom: -2rem;
		right: 50%;
		width: 2px;
		height: 2rem;
		background: linear-gradient(180deg, var(--wp--preset--color--primary), rgba(37, 128, 87, 0.25));
		transform: translateX(50%);
	}
}

/* ── Schulen Preise (Pricing-Cards) ── */
.preise-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 960px;
	margin: 0 auto;
}

.preis-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 20px;
	padding: 2.5rem 2rem 2rem 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.preis-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.preis-card--featured {
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: 0 10px 28px rgba(37, 128, 87, 0.12);
}

.preis-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.preis-card__name {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 1rem 0;
}

.preis-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.preis-card__amount {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.02em;
	line-height: 1;
}

.preis-card__unit {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-gray);
}

.preis-card__list {
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.preis-card__list li {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	color: var(--wp--preset--color--dark);
	line-height: 1.45;
	padding-left: 1.6rem;
	position: relative;
}

.preis-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

.preis-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.5rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: all 0.25s ease;
}

.preis-card__cta--primary {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.preis-card__cta--primary:hover {
	background: var(--wp--preset--color--accent);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(37, 128, 87, 0.25);
}

.preis-card__cta--outline {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.preis-card__cta--outline:hover {
	background: rgba(37, 128, 87, 0.06);
	transform: translateY(-1px);
}

.preise-note {
	max-width: 720px;
	margin: 2rem auto 0 auto;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-gray);
	text-align: center;
	font-style: italic;
}

@media (max-width: 781px) {
	.preise-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

/* ── Eltern Problem ("Kennen Sie das?") ──
   30.09.2026: Liste ohne Karten und Symbole (Florian: "sieht doppelt aus das
   geht nicht", gemeint die Karten direkt vor "Was sich fuer Sie als Eltern
   aendert"). Zwei Spalten mit feinen Linien, je Situation ein olivgruener
   Strich (kein Haken, Haken stehen fuer das Gute), darunter der Satz in
   Playfair. */
.problem-list {
	list-style: none;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3rem;
}

.problem-list__item {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 1.15rem 0 1.15rem 2rem;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.06rem;
	line-height: 1.55;
	color: var(--wp--preset--color--dark);
}

.problem-list__item:nth-last-child(-n+2) {
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
}

.problem-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(1.15rem + 0.72em);
	width: 1.15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary);
}

.problem-list__close {
	max-width: 720px;
	margin: 3rem auto 0 auto;
	padding: 0;
	font-family: var(--wp--preset--font-family--playfair), serif;
	font-style: italic;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	color: var(--wp--preset--color--dark);
	text-align: center;
	line-height: 1.5;
	text-wrap: balance;
}

.problem-list__close::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto 1.1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
}

@media (max-width: 700px) {
	.problem-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.problem-list__item {
		padding: 1rem 0 1rem 1.8rem;
		font-size: 1rem;
	}

	.problem-list__item::before {
		top: calc(1rem + 0.72em);
	}

	.problem-list__item:nth-last-child(2) {
		border-bottom: 0;
	}
}

/* ── Eltern "Was sich aendert" (4 Karten) ── */
.aendert-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
}

.aendert-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 18px;
	padding: 1.75rem 1.5rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.aendert-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 28px rgba(37, 128, 87, 0.1);
}

.aendert-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.12), rgba(0, 56, 227, 0.06));
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

.aendert-card__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.6rem 0;
	letter-spacing: -0.01em;
}

.aendert-card__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
	margin: 0;
}

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

/* ── Eltern-Kursinhalte: Module-Akkordeon (Zahlen statt Emoji) ── */
.eltern-kursinhalte .einsatz-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.eltern-kursinhalte .einsatz-card__content {
	padding-left: calc(1.5rem + 36px + 1rem);
}

/* Am Handy volle Breite, sonst bleibt fuer Text und Kartenliste zu wenig Platz
   (29.09.2026) */
@media (max-width: 600px) {
	.eltern-kursinhalte .einsatz-card__content {
		padding-left: 1.1rem;
	}
}

/* ── Eltern Format (4 Icon-Karten) ── */
.format-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
}

.format-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 18px;
	padding: 1.75rem 1.25rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.format-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(37, 128, 87, 0.08);
}

.format-card__icon {
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: 0.85rem;
	/* siehe .trust-glance__icon */
	font-variant-emoji: emoji;
}

.format-card__title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.5rem 0;
}

.format-card__text {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
	margin: 0;
}

@media (max-width: 1024px) {
	.format-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.format-grid {
		grid-template-columns: 1fr;
	}
}

/* Kurse-Format: Abschluss-Hinweis unter den 4 Bausteinen */
.kurse-format__note {
	max-width: 760px;
	margin: 2.25rem auto 0 auto;
	padding: 1.1rem 1.5rem;
	background: var(--wp--preset--color--white);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dark);
	text-align: center;
}

/* ── Eltern Preise: 3 Karten ── */
.preise-grid--three {
	grid-template-columns: repeat(3, 1fr);
	max-width: 1200px;
}

@media (max-width: 1024px) {
	.preise-grid--three {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

.preis-card__strike {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	color: var(--wp--preset--color--text-gray);
	text-decoration: line-through;
	margin-left: 0.25rem;
}

.preis-card__save {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.5rem 0;
}

.preis-card__premium-sub {
	font-family: var(--wp--preset--font-family--playfair), serif;
	font-style: italic;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 1.5rem 0;
}

.preis-card__premium-placeholder {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
	margin: 0 0 1.75rem 0;
	padding: 1.25rem 1.25rem;
	border: 1px dashed rgba(212, 175, 55, 0.4);
	border-radius: 10px;
	text-align: center;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preis-card--premium {
	background: linear-gradient(160deg, #1A1A2E 0%, #0a0a1a 100%);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(212, 175, 55, 0.4);
	position: relative;
}

.preis-card--premium .preis-card__name {
	color: #ffffff;
}

.preis-card--premium .preis-card__list li {
	color: rgba(255, 255, 255, 0.8);
}

.preis-card--premium .preis-card__list li::before {
	border-color: #D4AF37;
}

.preis-card__badge--soon {
	background: linear-gradient(135deg, #D4AF37, #B8862C);
	color: #1A1A2E;
}

.preis-card__cta--disabled {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.15);
	cursor: not-allowed;
}

/* ── FAQ (Eltern) -- Core-Block "Details" ── */
.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

.faq-list .wp-block-details {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin: 0;
}

.faq-list .wp-block-details[open] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 14px rgba(37, 128, 87, 0.08);
}

.faq-list .wp-block-details > summary {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	color: var(--wp--preset--color--dark);
}

.faq-list .wp-block-details > :not(summary) {
	padding: 0 1.5rem 1.25rem 1.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

/* ── Testimonials Placeholder ──
   Vorlaeufig komplett ausgeblendet bis erste Pilot-Stimmen vorliegen
   (Florian, 2026-04). Reaktivierung: display-Regel entfernen. */
.testimonials-section--placeholder {
	display: none !important;
}

.testimonials-section--placeholder .testimonials-section__header {
	padding-block: 4rem;
	text-align: center;
}

/* ══════════════════════════════════════════════════
   Kontaktseite (patterns/contact-section.php)
   ══════════════════════════════════════════════════
   Florian, 29.09.2026: "kannst du die seite bitte aufhuebschen und
   verbessern". Statt Emoji-Symbolen und Platzhaltersatz: Ansprechpartner
   mit Foto, Kontaktangaben mit Zeichen und drei Themen als Karten. Die
   ganze Themenkarte ist klickbar (der Link im Titel spannt sich ueber die
   Karte), die Zeichen sind Masken in der Schriftfarbe. */

.mfp-kontakt .wp-block-columns {
	align-items: flex-start;
}

.mfp-kontakt__person {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 1.75rem;
	padding: 1rem 1.25rem;
	background: #F4F8F5;
	border: 1px solid #DCE5DF;
	border-radius: 18px;
}

.mfp-kontakt__person .mfp-kontakt__foto {
	flex: none;
	margin: 0;
}

.mfp-kontakt__person .mfp-kontakt__foto img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	box-shadow: 0 6px 16px -10px rgba(26, 26, 46, 0.5);
}

.mfp-kontakt__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}

.mfp-kontakt__rolle {
	margin: 0.15rem 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kontakt__liste {
	display: grid;
	gap: 1.25rem;
}

.mfp-kontakt__eintrag {
	position: relative;
	min-height: 2.6rem;
	margin: 0;
	padding-left: 3.4rem;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kontakt__eintrag::before,
.mfp-kontakt__thema::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 12px;
	background: #E6F1EA;
}

.mfp-kontakt__eintrag::after,
.mfp-kontakt__thema::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mfp-kontakt__eintrag--mail::after { -webkit-mask-image: 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 x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); mask-image: 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 x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.mfp-kontakt__eintrag--post::after { -webkit-mask-image: 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%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); mask-image: 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%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.mfp-kontakt__thema--schule::after { -webkit-mask-image: 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%3Cpath d='M2.5 9 12 4.5 21.5 9 12 13.5z'/%3E%3Cpath d='M6.5 11v4.5c0 1.4 2.5 3 5.5 3s5.5-1.6 5.5-3V11'/%3E%3Cpath d='M21.5 9v5'/%3E%3C/svg%3E"); mask-image: 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%3Cpath d='M2.5 9 12 4.5 21.5 9 12 13.5z'/%3E%3Cpath d='M6.5 11v4.5c0 1.4 2.5 3 5.5 3s5.5-1.6 5.5-3V11'/%3E%3Cpath d='M21.5 9v5'/%3E%3C/svg%3E"); }
.mfp-kontakt__thema--eltern::after { -webkit-mask-image: 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%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19.5c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M16 14.2c2.9 0 5 1.9 5 4.8'/%3E%3C/svg%3E"); mask-image: 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%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19.5c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M16 14.2c2.9 0 5 1.9 5 4.8'/%3E%3C/svg%3E"); }
.mfp-kontakt__thema--zugang::after { -webkit-mask-image: 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%3Ccircle cx='8' cy='14' r='4'/%3E%3Cpath d='m10.8 11.2 8.7-8.7'/%3E%3Cpath d='m16.5 5.5 2.5 2.5'/%3E%3Cpath d='m14.5 7.5 2 2'/%3E%3C/svg%3E"); mask-image: 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%3Ccircle cx='8' cy='14' r='4'/%3E%3Cpath d='m10.8 11.2 8.7-8.7'/%3E%3Cpath d='m16.5 5.5 2.5 2.5'/%3E%3Cpath d='m14.5 7.5 2 2'/%3E%3C/svg%3E"); }

.mfp-kontakt__art {
	display: block;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
}

.mfp-kontakt__eintrag a,
.mfp-kontakt__direkt a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.mfp-kontakt__eintrag a:hover,
.mfp-kontakt__eintrag a:focus-visible,
.mfp-kontakt__direkt a:hover,
.mfp-kontakt__direkt a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* Rechte Spalte: Karte mit drei Themen */
.mfp-kontakt__karte {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	background: #ffffff;
	border: 1px solid #DCE5DF;
	border-radius: 24px;
	box-shadow: 0 2px 4px rgba(26, 26, 46, 0.04), 0 28px 60px -36px rgba(26, 26, 46, 0.35);
}

.mfp-kontakt__karte .mfp-kontakt__kartentitel {
	margin: 0 0 0.35rem;
	font-size: 1.4rem;
	line-height: 1.25;
}

.mfp-kontakt__kartentext {
	margin: 0 0 1.4rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kontakt__thema {
	position: relative;
	margin: 0 0 0.8rem;
	padding: 1rem 3.25rem 1rem 4.4rem;
	background: #ffffff;
	border: 1px solid #DCE5DF;
	border-radius: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mfp-kontakt__thema::before {
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.mfp-kontakt__thema::after {
	left: 1.75rem;
	top: 50%;
	transform: translateY(-50%);
}

.mfp-kontakt__thema:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 14px 30px -22px rgba(27, 94, 63, 0.55);
	transform: translateY(-1px);
}

/* Der Rahmen gehoert an die ganze Karte, der Link darin spannt sich ueber
   sie. Vorher ein blasses Gruen mit 35 Prozent Deckkraft, jetzt derselbe
   Rahmen wie ueberall (siehe "Fokusrahmen" am Ende der Datei). */
.mfp-kontakt__thema:has(a:focus-visible) {
	outline: 3px solid #1A1A2E;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #ffffff;
}

.mfp-kontakt__themenname a:focus-visible {
	outline: none;
	box-shadow: none;
}

.mfp-kontakt__themenname {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--dark);
}

.mfp-kontakt__themenname a {
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* Der Link spannt sich ueber die ganze Karte, rechts ein Pfeil */
.mfp-kontakt__themenname a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5E3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat right 1.2rem center / 1.1rem 1.1rem;
}

.mfp-kontakt__themeninfo {
	margin: 0.15rem 0 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kontakt__direkt {
	margin: 1.3rem 0 0;
	text-align: center;
	font-size: 0.92rem;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 781px) {
	.mfp-kontakt__karte {
		margin-top: 1rem;
	}

	/* Anschrift und Kasten "Schreiben Sie uns" stiessen am Handy aneinander
	   (Pruefung vom 24.10.2026) */
	.mfp-kontakt .wp-block-columns {
		row-gap: 2rem;
	}

	.mfp-kontakt__thema {
		padding-right: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfp-kontakt__thema,
	.mfp-kontakt__thema:hover {
		transition: none;
		transform: none;
	}
}

/* ══════════════════════════════════════════════════
   Fusszeile: Vertrag widerrufen, Vertraege hier kuendigen
   ══════════════════════════════════════════════════
   § 356a und § 312k BGB: die beiden Funktionen muessen auf jeder Seite
   erreichbar sein und sich deutlich von Impressum, AGB und Datenschutz
   abheben (docs/recht/CHECKOUT-TEXTE.md, Abschnitt 6; Gesetzesbegruendung:
   im Fussbereich mit Farbe, Kontrast und hervorgehobener Platzierung).
   Bis 27.10.2026 Umriss-Knoepfe; seitdem auf Florians Wunsch ("die button
   komplett raus ... oder versteckter") unauffaelliger: kleine weisse,
   unterstrichene Textlinks, abgehoben von den grauen Links zu Impressum
   und AGB. Ganz entfernen geht nicht (Anwalt: QUELLEN-UND-OFFENE-PUNKTE.md,
   A4 und A5). */

.mfp-vertragslinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
}

.mfp-vertragslinks a {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.mfp-vertragslinks a:hover,
.mfp-vertragslinks a:focus-visible {
	color: #6FCF97 !important;
}

/* ── Preiskarten: Steuerhinweis beim Preis, Familien-Paket noch nicht kaufbar ──
   docs/recht/CHECKOUT-TEXTE.md, Abschnitt 1 (Florian, 29.09.2026) */
.preis-card__steuer {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text-gray);
}

.preis-card--featured .preis-card__save {
	font-size: 0.88rem;
	line-height: 1.45;
}

.preis-card--featured .preis-card__cta--disabled {
	background: #F1F4F2;
	color: #5F6B64;
	border: 1.5px dashed #C6D0C8;
}

/* ── Review 29.09.2026: Umbrueche, Fusszeile, Fokusrahmen ── */

/* Kursdetails auf /kurse/ ("Umfang:", "Module:", "Abschluss:"): Die
   Beschriftung steht in einer Flex-Zeile ohne Umbruch neben einer langen
   Angabe und wurde auf 27 bis 30 px zusammengedrueckt, auf dem Telefon stand
   "Abs/chl/uss" da. Jetzt bricht nur die Angabe daneben um. */
main .wp-block-group.is-nowrap.is-layout-flex > p.has-dark-color:first-child {
	flex-shrink: 0;
}

/* Fusszeile auf dem Telefon: Der Abstand zwischen den Bloecken (blockGap)
   ist im Theme 0, die gestapelten Spalten lagen ohne Luft aufeinander */
.site-footer .wp-block-columns {
	row-gap: var(--wp--preset--spacing--40);
}

/* Fokusrahmen fuer die Tastatur (WCAG 2.4.7). Stand bisher nur in
   learndash.css, das nur im Kursbereich laedt. Derselbe Rahmen: dunkel mit
   weissem Hof, sichtbar auf hellem wie dunklem Grund. Nicht im Editor
   (custom.css laedt auch dort), der markiert Bloecke selbst. :where haelt
   die Spezifitaet niedrig, damit Einzelregeln wie bei den Kontaktkarten
   greifen. */
:where(body:not(.editor-styles-wrapper)) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #1A1A2E;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #ffffff;
}

/* ══════════════════════════════════════════════════
   Review 29.09.2026: Elternkurs vorn, Florian vorn, Vertrauen, Schulen
   ══════════════════════════════════════════════════
   Florian am 29.09.2026 zu den fuenf Reviews: "bitte alles anpassen",
   "bitte anpassen", "mach das", "setze das um", "bitte passe das an".
   Karten und Kaesten im Stil der vorhandenen Karten (einsatz-card,
   preis-card), Merksatz wie im Kursbereich (learndash.css,
   .is-style-mfp-merksatz). */

/* Knoepfe mittig unter einem zentrierten Kopf (Schulen, Familien-Paket) */
.hero-shader__cta-row--mitte {
	justify-content: center;
	margin-top: 2rem;
}

/* -- Elternseite: Florians Geschichte ---------------------------------- */
.eltern-florian__bild img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-inline: auto;
	border-radius: 24px;
	box-shadow: 0 20px 44px -24px rgba(26, 26, 46, 0.45);
}

.eltern-florian__titel {
	margin: 0 0 1.25rem;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.25;
}

.eltern-florian__text {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.8;
	color: var(--wp--preset--color--text-gray);
}

.eltern-florian__merksatz,
.leseprobe-karte__merksatz {
	margin: 1.75rem 0;
	padding: 1.2rem 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--primary-dark);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.5;
}

.eltern-florian__name {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
}

.eltern-florian__name strong {
	color: var(--wp--preset--color--dark);
}

/* -- Elternseite: Leseprobe -------------------------------------------- */
/* Die Karten sehen aus wie im Kurs: weisses Blatt auf dem gruenstichigen
   Grund des Kursbereichs (#EAF0EC). */
.leseprobe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	max-width: 880px;
	margin: 0 auto;
}

.leseprobe-karte {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 12px 32px -20px rgba(26, 26, 46, 0.18);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--wp--preset--color--dark);
}

.leseprobe-karte p {
	margin: 0 0 1rem;
}

.leseprobe-karte__ort {
	margin: 0 0 0.4rem !important;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.leseprobe-karte__titel {
	margin: 0 0 1.1rem;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.3;
}

.leseprobe-karte__zwischentitel {
	margin: 1.6rem 0 0.6rem;
	font-size: 1.1rem;
}

.leseprobe-karte ul {
	margin: 0;
	padding-left: 1.2rem;
}

.leseprobe-karte li + li {
	margin-top: 0.4rem;
}

.leseprobe-karte__merksatz {
	margin-bottom: 0 !important;
}

.leseprobe-tabelle {
	margin: 1.25rem 0 1.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.leseprobe-tabelle table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 0.92rem;
	line-height: 1.45;
}

.leseprobe-tabelle th,
.leseprobe-tabelle td {
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid #DCE5DF;
	text-align: left;
	vertical-align: top;
}

.leseprobe-tabelle thead th {
	background: #F1F5F2;
	font-weight: 700;
}

.leseprobe-tabelle tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.leseprobe__weiter {
	max-width: 880px;
	margin: 1.75rem auto 0;
	text-align: center;
	font-size: 1rem;
	color: var(--wp--preset--color--text-gray);
}

.leseprobe__weiter a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

/* Kaufen auf der Leseprobe (26.10.2026, Florian: "auf den einblicksseiten
   muesste auch ein button sein jetzt kaufen"): schmale Leiste ueber den
   Karten, Kasten mit Preis darunter (eltern-leseprobe.php) */
.leseprobe-kauf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	max-width: 880px;
	margin: 1.75rem auto 0;
	padding: 1.75rem 2rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 12px 32px -20px rgba(26, 26, 46, 0.25);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
}

.leseprobe-kauf--kurz {
	width: 100%;
	margin: 0;
	padding: 0.9rem 1rem 0.9rem 1.5rem;
	border-width: 1px;
	border-color: #CFE3D7;
	box-shadow: none;
}

.leseprobe-kauf--kurz p {
	margin: 0;
	color: var(--wp--preset--color--text-gray);
	font-size: 0.92rem;
}

.leseprobe-kauf--kurz strong {
	margin-right: 0.5rem;
	color: var(--wp--preset--color--dark);
}

.leseprobe-kauf__text p {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-gray);
	font-size: 0.98rem;
	line-height: 1.6;
}

.leseprobe-kauf .leseprobe-kauf__dach {
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.leseprobe-kauf .leseprobe-kauf__titel {
	color: var(--wp--preset--color--dark);
	font-size: 1.2rem;
	font-weight: 700;
}

.leseprobe-kauf .leseprobe-kauf__bonus {
	display: inline-block;
	margin: 0.35rem 0 0;
	padding: 0.45rem 0.9rem;
	border-radius: 10px;
	background: #EAF0EC;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.85rem;
}

.leseprobe-kauf__kasse {
	flex: none;
	text-align: right;
}

.leseprobe-kauf__preis {
	margin: 0 0 0.85rem;
}

.leseprobe-kauf__preis strong {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 2rem;
	line-height: 1.1;
}

.leseprobe-kauf__preis span {
	display: block;
	max-width: 15rem;
	margin-left: auto;
	color: var(--wp--preset--color--text-gray);
	font-size: 0.8rem;
	line-height: 1.45;
}

.leseprobe-kauf__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.leseprobe-kauf__knopf:hover,
.leseprobe-kauf__knopf:focus-visible {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
}

/* Elternkurs am Ende der Kinder-Leseprobe (kinder-leseprobe.php) */
.kinder-leseprobe-eltern {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	background: #ffffff;
}

.kinder-leseprobe-eltern .leseprobe-kauf {
	margin-top: 0;
}

.leseprobe-kauf__text a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.leseprobe-kauf {
		flex-direction: column;
		align-items: stretch;
		padding: 1.4rem 1.25rem;
	}

	.leseprobe-kauf--kurz {
		padding: 1rem 1.1rem;
	}

	.leseprobe-kauf__kasse {
		text-align: left;
	}

	.leseprobe-kauf__preis span {
		margin-left: 0;
	}

	.leseprobe-kauf__knopf {
		width: 100%;
	}
}

/* -- Preiskarten ------------------------------------------------------- */
.preis-card__einmal {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.preis-card__header .preis-card__save {
	margin-top: 0.9rem;
}

/* Abstand zur Liste, wenn "Einmalzahlung, kein Abo" die letzte Zeile im Kopf
   ist (Elternkurs); beim Paket folgt noch der Vergleich mit eigenem Abstand */
.preis-card__header .preis-card__einmal:last-child {
	margin-bottom: 1.5rem;
}

/* "Bald verfuegbar" ruhig und neutral, nicht im Gold der alten Premium-Karte */
.preis-card__badge--bald {
	background: var(--wp--preset--color--mid-gray);
	color: var(--wp--preset--color--dark);
}

/* -- Familien-Paket ---------------------------------------------------- */
.paket-kurse {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
}

.paket-kurs {
	padding: 1.75rem 1.5rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 18px;
}

.paket-kurs__icon img {
	display: block;
	width: 120px;
	height: auto;
	margin: 0 0 0.75rem;
}

.paket-kurs__fuer {
	margin: 0 0 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.paket-kurs__name {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	line-height: 1.35;
}

.paket-kurs__module {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.paket-kurs__module li + li {
	margin-top: 0.3rem;
}

.paket-preis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 2rem;
	max-width: 1100px;
	margin: 2.5rem auto 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #F1F5F2;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 20px;
}

.paket-preis p {
	margin: 0;
}

.paket-preis__name {
	font-size: 1.1rem;
	font-weight: 700;
}

.paket-preis__betrag {
	margin: 0.4rem 0 0.3rem !important;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.paket-preis__steuer {
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-gray);
}

.paket-preis__einmal {
	margin-top: 0.3rem !important;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.paket-preis__liste {
	margin: 0 0 1.25rem;
	padding-left: 1.2rem;
	line-height: 1.6;
}

.paket-preis__liste li + li {
	margin-top: 0.35rem;
}

.paket-preis__status {
	margin-bottom: 1.25rem !important;
}

.paket-preis__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 900px) {
	.paket-kurse,
	.paket-preis {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Partner und Mitgliedschaften -------------------------------------- */
.partner-leiste__titel {
	margin-bottom: 2rem !important;
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}

.partner-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.partner-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 1.5rem 1.25rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 16px;
	text-align: center;
}

.partner-logo__marke {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
}

.partner-logo__marke img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 64px;
	height: auto;
}

/* Das Logo der Akademie besteht zu einem guten Teil aus Schrift, bei 64px
   Hoehe waere der Name nicht mehr lesbar (29.09.2026). */
.partner-logo__marke--akademie img {
	max-height: 96px;
}

.partner-logo__rolle {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 900px) {
	.partner-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.partner-logos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Schulen: Planung -------------------------------------------------- */
.planung-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
}

.planung-karte {
	min-width: 0;
	padding: 1.5rem 1.4rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 16px;
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.planung-karte--breit {
	grid-column: 1 / -1;
}

.planung-karte p {
	margin: 0;
}

.planung-karte a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.planung-karte__titel {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--wp--preset--color--dark);
}

.planung-tabelle {
	width: 100%;
	margin: 0.4rem 0 1rem;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.planung-tabelle th,
.planung-tabelle td {
	padding: 0.55rem 0.7rem;
	hyphens: auto;
	overflow-wrap: break-word;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
	text-align: left;
}

.planung-tabelle th {
	background: #F1F5F2;
	color: var(--wp--preset--color--dark);
}

.planung-tabelle td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

@media (max-width: 900px) {
	.planung-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.planung-karten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Schulen: Angaben unter den Preiskarten ---------------------------- */
.preise-fakten {
	max-width: 760px;
	margin: 2rem auto 0;
	padding: 1.25rem 1.5rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 14px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
}

.preise-fakten p {
	margin: 0;
}

.preise-fakten p + p {
	margin-top: 0.6rem;
}

.preise-fakten strong {
	color: var(--wp--preset--color--dark);
}

/* -- Schulen: Unterlagen ----------------------------------------------- */
.unterlagen-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.unterlage__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	height: 100%;
	padding: 1.25rem 4.5rem 1.25rem 1.4rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--dark);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.unterlage__link:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px -18px rgba(27, 94, 63, 0.55);
}

.unterlage__titel {
	font-weight: 700;
	line-height: 1.35;
}

.unterlage__text {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

.unterlage__art {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	padding: 0.2rem 0.55rem;
	border: 1.5px solid var(--wp--preset--color--primary-dark);
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

@media (max-width: 600px) {
	.unterlagen-liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* FOCUS Online in der Partnerleiste: ganze Karte verlinkt auf Florians
   Autorenseite (29.09.2026) */
.partner-logo--link {
	padding: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.partner-logo--link:hover,
.partner-logo--link:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px -18px rgba(27, 94, 63, 0.55);
}

.partner-logo__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	width: 100%;
	height: 100%;
	padding: 1.5rem 1.25rem;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
}

/* Sichtbar als Link: das Wort "Fachbeitraege" (29.09.2026) */
.partner-logo__verweis {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.partner-logo__link:hover .partner-logo__verweis,
.partner-logo__link:focus-visible .partner-logo__verweis {
	color: var(--wp--preset--color--accent);
}

.partner-logo .screen-reader-text,
.unterlage .screen-reader-text,
.planung-karte .screen-reader-text,
.akademie-kasten .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Elternseite: Hinweis auf die Leseprobe, die seit 29.09.2026 auf einer
   eigenen Seite steht (/einblick-elternkurs/). Knopf als Umriss, damit er
   nicht mit "Zur Bestellung" konkurriert. */
.einblick-hinweis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 12px 32px -20px rgba(26, 26, 46, 0.18);
}

.einblick-hinweis__text {
	min-width: 0;
}

.einblick-hinweis__ort {
	margin: 0 0 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.einblick-hinweis__titel {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	line-height: 1.25;
}

.einblick-hinweis__beschreibung {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.einblick-hinweis__knopf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.einblick-hinweis__knopf:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

@media (max-width: 700px) {
	.einblick-hinweis {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Ueber uns: Akademie fuer Neue Medien (akademie-kasten.php, 29.09.2026) ── */
.akademie-kasten__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 2.25rem 2.5rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 20px;
	box-shadow: 0 18px 40px -30px rgba(26, 26, 46, 0.35);
}

.akademie-kasten__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.akademie-kasten__ort {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.akademie-kasten__titel {
	margin: 0 0 0.85rem;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.25;
}

.akademie-kasten__text p:not(.akademie-kasten__ort) {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.akademie-kasten__text .akademie-kasten__hinweis {
	font-size: 0.88rem;
}

.akademie-kasten__weiter a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.akademie-kasten__weiter a:hover,
.akademie-kasten__weiter a:focus-visible {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.akademie-kasten__inhalt {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		padding: 1.75rem 1.4rem;
	}

	.akademie-kasten__logo {
		max-width: 240px;
	}
}

/* ── Eltern Kursinhalte: Karten je Modul (eltern-kursinhalte.php, 29.09.2026) ──
   Art der Karte als farbige Pille, dahinter der Titel. Zwei Spalten, am
   Handy eine, dort steht die Pille ueber dem Titel. */
.einsatz-card__content .kartenliste__titel {
	margin: 1.1rem 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.kartenliste {
	columns: 2;
	column-gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kartenliste__karte {
	break-inside: avoid;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid #EEF1EF;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--wp--preset--color--dark);
}

.kartenliste__art {
	flex-shrink: 0;
	padding: 0.12rem 0.55rem;
	border-radius: 9999px;
	background: #EEF1EF;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #4A5560;
}

.kartenliste__art--video,
.kartenliste__art--animation {
	background: rgba(37, 128, 87, 0.12);
	color: #1B5E3F;
}

.kartenliste__art--praxis,
.kartenliste__art--uebung {
	background: rgba(137, 150, 100, 0.18);
	color: #4d5630;
}

.kartenliste__art--frage {
	background: rgba(0, 56, 227, 0.08);
	color: #1f3fae;
}

.kartenliste__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.kartenliste__hinweis {
	max-width: 900px;
	margin: 1.25rem auto 0;
	font-size: 0.92rem;
	line-height: 1.55;
	text-align: center;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 700px) {
	.kartenliste {
		columns: 1;
	}

	.kartenliste__karte {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}
}

/* ── Kurse fuer Kinder und Jugendliche (29.09.2026) ──
   docs/KONZEPT-JUGENDKURSE-SEITE.md. Die Seite nutzt vorhandene Bausteine
   (hero-shader, aendert-grid, eltern-florian, preis-card, eltern-faq,
   cta-shader); hier nur, was neu ist. */

/* Florian: zwei Merksaetze aus den Kursen. 30.09.2026 (Florian: "kannst du
   das noch weiter verbessern"): Dachzeile, Link auf Ueber uns, Merksaetze als
   Karten mit Kurssymbol ueber die volle Breite unter dem Portraet-Block. */
.jugend-florian__dachzeile {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.jugend-florian .eltern-florian__name {
	margin-top: 1.5rem;
}

/* Seit 30.09.2026 abends drei Absaetze (Eltern ansprechen, Kurse, Florian) */
.jugend-florian .eltern-florian__text + .eltern-florian__text {
	margin-top: 1rem;
}

.jugend-florian__mehr,
.initiator-section__mehr {
	margin: 0.9rem 0 0;
	font-weight: 600;
}

.initiator-section__mehr {
	margin-top: 1.25rem;
}

.jugend-florian__mehr a,
.initiator-section__mehr a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	transition: color 0.2s ease;
}

.jugend-florian__mehr a:hover,
.jugend-florian__mehr a:focus-visible,
.initiator-section__mehr a:hover,
.initiator-section__mehr a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.jugend-florian__zitate-reihe {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.jugend-florian__zitate {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
}

.jugend-florian__zitat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 1.75rem 2rem 2rem;
	border: 1px solid #dce5df;
	border-radius: 20px;
	background: linear-gradient(180deg, #f3f7f4 0%, #ffffff 100%);
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 18px 40px -28px rgba(26, 26, 46, 0.28);
	overflow: hidden;
}

/* grosses Anfuehrungszeichen als Schmuck, fuer Screenreader unsichtbar */
.jugend-florian__zitat::after {
	content: "“";
	content: "“" / "";
	position: absolute;
	top: -0.6rem;
	right: 1.4rem;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-size: 7rem;
	line-height: 1;
	color: rgba(37, 128, 87, 0.13);
	pointer-events: none;
}

.jugend-florian__kurs {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary-dark);
}

.jugend-florian__kurs img {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 1px #dce5df, 0 6px 14px -8px rgba(26, 26, 46, 0.35);
}

.jugend-florian__zitat blockquote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

.jugend-florian__zitat blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--dark);
}

@media (max-width: 781px) {
	.jugend-florian__zitate {
		grid-template-columns: minmax(0, 1fr);
	}

	.jugend-florian__zitat {
		padding: 1.5rem 1.4rem 1.6rem;
	}

	.jugend-florian__zitat::after {
		top: -0.2rem;
		right: 0.9rem;
		font-size: 4.5rem;
	}

	.jugend-florian__kurs {
		padding-right: 2.5rem;
	}
}

/* Modulliste mit je einem Satz (kurs-detail*.php) */
.kurs-module-list--ausfuehrlich li {
	margin-bottom: 0.8rem;
	color: var(--wp--preset--color--text-gray);
}

.kurs-module-list--ausfuehrlich li:last-child {
	margin-bottom: 0;
}

.kurs-module-list--ausfuehrlich li strong {
	color: var(--wp--preset--color--dark);
}

.kurs-detail__hinweis {
	margin: 1.25rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.kurs-detail__hinweis a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

/* Zugang: Stand und zwei Knoepfe je Karte */
.preis-card__stand {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.preis-card__stand a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.preis-card__knoepfe {
	display: grid;
	gap: 0.6rem;
	margin-top: auto;
}

/* Saeulen: Stand je Karte und der Hinweis aufs Familien-Paket */
.pillar-card .pillar-card__stand {
	display: table;
	margin: 0.9rem auto 0;
	padding: 0.3rem 0.8rem;
	border-radius: 9999px;
	background: rgba(37, 128, 87, 0.1);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--primary-dark);
}

.pillar-section__paket {
	margin-top: 2rem;
	font-size: 0.98rem;
	color: var(--wp--preset--color--text-gray);
}

.pillar-section__paket a,
.paket-kurse__weiter a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.pillar-section__paket a:hover,
.paket-kurse__weiter a:hover {
	color: var(--wp--preset--color--accent);
}

.paket-kurse__weiter {
	margin: 1.5rem 0 0;
	text-align: center;
}

/* ── Presse: Florian Buschmann in den Medien (29.09.2026, Kacheln 30.09.2026) ──
   Florian am 30.09.2026: "eher das mit den logos bitte nehmen" (Vorbild ist
   die Logowand auf offline-helden.de/referenzen). Wortmarken als Schrift der
   Website (Poppins, Playfair), keine Logodateien der Medien
   (docs/PRESSE-BELEGE.md). Jede Kachel ist ein Link auf einen Beitrag;
   feine Linien entstehen aus dem 1-px-Abstand vor grauem Grund.
   presse-leiste.php (Startseite) und presse-beitraege.php (Ueber uns). */

/* Seit 30.09.2026 abends direkt unter "Der Kopf hinter dem MediaFitPass":
   beide weiss, ohne Abstand dazwischen wirken sie als ein Abschnitt. Die
   Gruppen tragen ihr Padding inline, deshalb !important. */
.initiator-section + .presse-leiste {
	padding-top: 0 !important;
}

.presse-leiste__titel {
	margin: 0 0 1.1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-gray);
}

.presse-wand {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 1px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--mid-gray);
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 16px;
	overflow: hidden;
}

.presse-wand li {
	display: flex;
	min-width: 0;
	margin: 0;
}

.presse-wand__kachel {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 108px;
	padding: 1rem 0.6rem;
	background: #ffffff;
	color: var(--wp--preset--color--dark);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.presse-wand__kachel:hover,
.presse-wand__kachel:focus-visible {
	background: #f6f7f1;
}

.presse-wand__kachel:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -4px;
}

.presse-marke {
	display: block;
	line-height: 1.05;
	color: #2b2d3a;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.presse-wand__kachel:hover .presse-marke,
.presse-wand__kachel:focus-visible .presse-marke {
	opacity: 1;
}

.presse-marke--sans {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.presse-marke--serif {
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-weight: 700;
}

.presse-marke--gross {
	font-size: 1.4rem;
}

.presse-marke--mittel {
	font-size: 1.08rem;
}

.presse-marke--versal {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.presse-marke--kursiv {
	font-style: italic;
}

.presse-marke__kasten {
	display: inline-block;
	margin-right: 0.12em;
	padding: 0.12em 0.4em;
	border-radius: 2px;
	background: #2b2d3a;
	color: #ffffff;
}

.presse-wand__art {
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-gray);
}

.presse-leiste .screen-reader-text,
.presse-beitraege .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.presse-leiste__unterzeile,
.presse-beitraege__weitere {
	max-width: 760px;
	margin: 1.1rem auto 0;
	font-size: 0.9rem;
	line-height: 1.55;
	text-align: center;
	color: var(--wp--preset--color--text-gray);
}

.presse-beitraege__weitere a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.presse-beitraege__weitere a:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 1023px) {
	.presse-wand {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.presse-wand {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.presse-wand__kachel {
		min-height: 92px;
	}
}

/* ══════════════════════════════════════════════════
   Begleitung fuer Eltern (patterns/begleitung-*.php, 29.09.2026)
   ══════════════════════════════════════════════════
   Die Seite /begleitung/ nutzt die vorhandenen Bausteine: hero-shader,
   aendert-card, prozess-steps, paket-preis, faq-list und cta-shader. Die
   Premium-Karte auf /fuer-eltern/ ist eine preis-card mit dem goldenen
   Abzeichen der frueheren Premium-Karte (.preis-card__badge--soon). Hier
   steht nur, was dafuer fehlt. */

/* Preiszeile im Kopf, unter der Beschreibung. Weiss mit 85 % wie der
   Textlink daneben, der Gesamtpreis fett und ganz weiss: Bei aufgegliederten
   Preisen ist der Gesamtpreis hervorzuheben (PAngV). */
.hero-shader .begleitung-hero__preis {
	position: relative;
	z-index: 10;
	margin: -1rem auto 0 !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.hero-shader .begleitung-hero__preis strong {
	font-weight: 700;
	color: #ffffff;
}

/* Gesamtpreis in der Preiszeile dunkel statt grau, auf der Seite und in der
   Premium-Karte der Elternseite */
.paket-preis__steuer strong,
.preis-card__steuer strong {
	color: var(--wp--preset--color--dark);
}

/* "Passt die Begleitung zu Ihnen?": Haken wie in den Preiskarten, ohne deren
   Abstand nach unten; mehrere Absaetze in einer Karte mit Luft dazwischen */
.begleitung-fuerwen .preis-card__list {
	margin-bottom: 0;
}

.begleitung-fuerwen .aendert-card__text + .aendert-card__text {
	margin-top: 0.75rem;
}

/* Die Grenze in Olivgruen wie "Kennen Sie das?" (.problem-list__icon), das
   Gruen bleibt bei dem, was passt */
.begleitung-grenze .aendert-card__icon {
	background: rgba(137, 150, 100, 0.16);
	color: #5b6538;
}

.begleitung-grenze .aendert-card__text a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	white-space: nowrap;
}

/* Preiskasten direkt unter der Ueberschrift. Beim Familien-Paket folgt er
   auf die Kurskarten und hat deshalb Abstand nach oben. */
.begleitung-preis .paket-preis {
	margin-top: 0;
}

/* Haelt eine Wortgruppe auf einer Zeile, etwa "(Eltern-Kurs)" im Kursnamen,
   das sonst am Bindestrich umbricht. Ein geschuetzter Bindestrich (U+2011)
   geht nicht: Er fehlt in der eingebundenen Poppins. */
.nicht-trennen {
	white-space: nowrap;
}

/* Kursbloecke: Zeile unter "Zur Bestellung", bei den Kinderkursen fuer Schulen,
   beim Elternkurs der Weg zur Seite fuer Eltern (30.09.2026) */
.kurs-detail__schulen,
.kurs-detail__weiter {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	text-align: center;
	color: var(--wp--preset--color--text-gray);
}

.kurs-detail__schulen a,
.kurs-detail__weiter a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

/* Unsere Kurse: vier Preiskarten im Raster 2 x 2 (kurse-preise.php,
   30.09.2026), mehr Abstand zwischen den Reihen fuer die Abzeichen */
.kurse-preise .preise-grid {
	row-gap: 2.5rem;
}

/* ── Drei Schritte zum Durchklicken (eltern-prozess.php, kurse-prozess.php) ──
   30.09.2026, Florian: "ich habe ein problem damit das es immer diese
   rechteckigen felder nebeneinander sind ... eventuell kann man das mit
   einem slider machen wo man die drei schritte durchklicken kann".
   Ohne JavaScript (auch im Editor) stehen die Schritte untereinander.
   assets/js/schritte.js setzt .schritte--aktiv, baut Reiter und Knoepfe und
   zeigt immer einen Schritt; alle liegen in derselben Rasterzelle, damit die
   Hoehe beim Wechsel nicht springt. .prozess-steps (Schulen, Begleitung)
   bleibt unveraendert. Zweiter Selektor, weil die Layout-Regel von
   WordPress (max-width 800px fuer direkte Kinder einer Gruppe) sonst je
   nach Reihenfolge gewinnt, wie bei .tag-panel. */
.schritte,
.wp-block-group > .schritte {
	max-width: 1040px;
	margin: 0 auto;
}

.schritte__liste {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: grid;
	gap: 1.75rem;
}

.schritte__schritt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	margin: 0;
}

.schritte__bild {
	position: relative;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.14), rgba(46, 168, 102, 0.06));
	color: var(--wp--preset--color--primary);
}

.schritte__zahl {
	position: absolute;
	top: -4px;
	right: -4px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
}

.schritte__titel {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--dark);
}

.schritte__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-gray);
}

/* Reiter: Nummern auf einer Linie, die sich mit jedem Schritt fuellt */
.schritte__nav {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--schritte-zahl, 3), minmax(0, 1fr));
	max-width: 820px;
	margin: 0 auto 2rem;
}

.schritte__linie {
	position: absolute;
	top: 23px;
	left: calc(50% / var(--schritte-zahl, 3));
	right: calc(50% / var(--schritte-zahl, 3));
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--mid-gray);
}

.schritte__linie-fuellung {
	display: block;
	width: calc(var(--schritte-anteil, 0) * 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.schritte__reiter {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	color: var(--wp--preset--color--text-gray);
	cursor: pointer;
}

.schritte__reiter-zahl {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--wp--preset--color--mid-gray);
	border-radius: 50%;
	background: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.schritte__reiter-titel {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	transition: color 0.3s ease;
}

.schritte__reiter:hover .schritte__reiter-zahl {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.schritte__reiter.is-erledigt .schritte__reiter-zahl {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.schritte__reiter[aria-selected="true"] .schritte__reiter-zahl {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	box-shadow: 0 0 0 6px rgba(37, 128, 87, 0.15);
}

.schritte__reiter[aria-selected="true"] .schritte__reiter-titel {
	color: var(--wp--preset--color--dark);
}

.schritte__reiter:focus-visible {
	outline: none;
}

.schritte__reiter:focus-visible .schritte__reiter-zahl {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Ein Schritt auf einmal, links grosses Symbol, rechts der Text */
.schritte--aktiv .schritte__liste {
	max-width: none;
	gap: 0;
	touch-action: pan-y;
}

.schritte--aktiv .schritte__schritt {
	grid-area: 1 / 1;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid #dce9e1;
	border-radius: 28px;
	background: linear-gradient(135deg, #f1f7f3 0%, #ffffff 65%);
	opacity: 0;
	visibility: hidden;
	transform: translateX(32px);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}

.schritte--aktiv .schritte__schritt.is-vorher {
	transform: translateX(-32px);
}

/* Die verborgenen Schritte liegen 32 px seitlich versetzt und machten die
   Seite auf dem Handy 8 px breiter, sie liess sich seitlich verschieben
   (22.10.2026). Abgeschnitten wird an der vollbreiten Sektion, also am
   Bildschirmrand, damit der Fokusrahmen der Karte sichtbar bleibt. Die
   Sektion heisst in eltern-prozess.php, kurse-prozess.php und
   schulen-prozess.php gleich. clip legt keinen Scroll-Bereich an; hidden
   davor fuer Safari vor 16. */
.schulen-prozess {
	overflow-x: hidden;
	overflow-x: clip;
}

.schritte--aktiv .schritte__schritt.is-aktuell {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.schritte--aktiv .schritte__schritt:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.schritte--aktiv .schritte__bild {
	width: 100%;
	height: auto;
	min-height: 240px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 25% 20%, rgba(95, 211, 154, 0.35) 0%, transparent 55%),
		linear-gradient(145deg, #258057 0%, #1b5e3f 100%);
	color: #ffffff;
	overflow: hidden;
}

.schritte--aktiv .schritte__bild svg {
	width: 88px;
	height: 88px;
	stroke-width: 1.4;
}

.schritte--aktiv .schritte__zahl {
	top: 0.75rem;
	right: auto;
	left: 1.25rem;
	width: auto;
	height: auto;
	background: none;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--playfair), serif;
	font-size: 5rem;
	font-style: italic;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.22);
}

.schritte--aktiv .schritte__inhalt {
	padding: 0.5rem 0.5rem 0.5rem 0;
}

.schritte--aktiv .schritte__titel {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin-bottom: 0.75rem;
}

/* Zurueck, Stand, Weiter */
.schritte__steuerung {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
}

.schritte__stand {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-gray);
}

.schritte__zurueck,
.schritte__weiter,
.schritte__ziel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.schritte__zurueck {
	background: #ffffff;
	color: var(--wp--preset--color--primary-dark);
}

.schritte__weiter,
.schritte__ziel {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.schritte__zurueck:hover:not(:disabled),
.schritte__zurueck:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.schritte__weiter:hover,
.schritte__weiter:focus-visible,
.schritte__ziel:hover,
.schritte__ziel:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: #ffffff;
}

.schritte__zurueck:disabled {
	opacity: 0.35;
	cursor: default;
}

.schritte__weiter[hidden],
.schritte__ziel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.schritte__linie-fuellung,
	.schritte--aktiv .schritte__schritt,
	.schritte--aktiv .schritte__schritt.is-aktuell {
		transition: none;
	}
}

@media (max-width: 781px) {
	.schritte--aktiv .schritte__schritt {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 1.25rem;
		padding: 1rem 1rem 1.5rem;
		border-radius: 22px;
	}

	.schritte--aktiv .schritte__bild {
		min-height: 150px;
		border-radius: 16px;
	}

	.schritte--aktiv .schritte__bild svg {
		width: 64px;
		height: 64px;
	}

	.schritte--aktiv .schritte__zahl {
		font-size: 3.75rem;
	}

	.schritte--aktiv .schritte__inhalt {
		padding: 0 0.5rem;
	}
}

@media (max-width: 600px) {
	.schritte__schritt {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.schritte__bild {
		width: 76px;
		height: 76px;
	}

	.schritte__nav {
		margin-bottom: 1.5rem;
	}

	.schritte__reiter {
		padding: 0 0.25rem;
	}

	.schritte__reiter-zahl {
		width: 42px;
		height: 42px;
		font-size: 0.95rem;
	}

	.schritte__linie {
		top: 20px;
	}

	.schritte__reiter-titel {
		font-size: 0.8rem;
	}

	/* nur fuer Screenreader, die Reiter zeigen den Stand */
	.schritte__stand {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.schritte__zurueck,
	.schritte__weiter,
	.schritte__ziel {
		padding: 0.65rem 1.1rem;
		font-size: 0.95rem;
	}
}

/* ── Startseite: Medienplaner unter der 24-Stunden-Grafik (why-section.php) ──
   30.09.2026 abends, Florian: "sollte da nicht nochmal ein cta kommen zu den
   kursen oder so?" und "oder den gratismedienplan dort erwaehnen als
   sichtbares freebie?". Der Planer als naechster Schritt nach den Zahlen,
   daneben der Weg zu den Kursen. Seit 30.09.2026 spaet ohne eigenen
   Kasten (Florian: "es sind zweimal diese rechteckigen bloecke"). Texte wie auf /medienplaner/
   (freebie-hero.php). Eigene Klassen statt .freebie-cover, weil freebie.css
   fuer angemeldete Besucher nicht geladen wird. Zweiter Selektor gegen die
   Layout-Regel von WordPress, wie bei .tag-panel. */
.tag-weiter,
.wp-block-group > .tag-weiter {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	max-width: 1100px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding: 0 clamp(0rem, 2vw, 1.5rem);
}

.tag-weiter__bild {
	position: relative;
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	padding: 0.5rem 0 1.5rem;
}

.tag-weiter__seite {
	display: block;
	width: 70%;
	height: auto;
	margin-left: auto;
	border-radius: 10px;
	box-shadow: 0 22px 44px -24px rgba(26, 26, 46, 0.5);
	transform: rotate(4deg);
}

.tag-weiter__cover {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 58%;
	aspect-ratio: 210 / 297;
	padding: 1.2rem 1rem;
	border-radius: 12px;
	background: linear-gradient(160deg, #258057 0%, #1b5e3f 100%);
	box-shadow: 0 22px 44px -22px rgba(26, 26, 46, 0.55);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	transform: rotate(-3deg);
	overflow: hidden;
}

.tag-weiter__cover-kicker {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.tag-weiter__cover-titel {
	font-size: clamp(1rem, 1.8vw, 1.3rem);
	font-weight: 800;
	line-height: 1.12;
}

.tag-weiter__cover-unter {
	font-size: 0.72rem;
	line-height: 1.4;
	opacity: 0.9;
}

.tag-weiter__cover-ampel {
	display: flex;
	gap: 6px;
	margin-top: auto;
}

.tag-weiter__cover-ampel i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #4cc38a;
}

.tag-weiter__cover-ampel i:nth-child(2) {
	background: #f5c542;
}

.tag-weiter__cover-ampel i:nth-child(3) {
	background: #e5484d;
}

.tag-weiter__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.tag-weiter__titel {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
}

.tag-weiter__beschreibung {
	max-width: 560px;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.tag-weiter__knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 1.5rem 0 0;
}

.tag-weiter__knopf {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.tag-weiter__knopf:hover,
.tag-weiter__knopf:focus-visible {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
}

.tag-weiter__link {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	transition: color 0.2s ease;
}

.tag-weiter__link:hover,
.tag-weiter__link:focus-visible {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.tag-weiter,
	.wp-block-group > .tag-weiter {
		grid-template-columns: minmax(0, 1fr);
	}

	.tag-weiter__bild {
		max-width: 250px;
	}
}

/* ── Schulseite, Ueberarbeitung vom 30.09.2026 abends ──
   Florian: "das ist optisch noch nicht so schoen", dazu seine Vorgaben
   gegen Emojis und gegen Reihen gleicher Kaesten. Kopf zweispaltig mit
   Steckbrief, Einstieg in zwei Spalten mit markierten Folgen, Symbole statt
   Emojis, Planung als offene Liste, Unterlagen als Download-Liste. Alles nur
   unter den Klassen der Schul-Patterns. */

/* Kopf: Steckbrief rechts (schulen-hero.php). Am Handy unter dem Text, mit
   Abstand zum Link "Testzugang" (Pruefung vom 24.10.2026). */
@media (max-width: 781px) {
	.schul-steckbrief {
		margin-top: 2rem;
	}
}

.schul-steckbrief {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
}

.schul-steckbrief__titel {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5fd39a;
}

.schul-steckbrief__liste {
	display: grid;
	margin: 0;
}

.schul-steckbrief__zeile {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.schul-steckbrief__zeile:first-child {
	padding-top: 0;
	border-top: 0;
}

.schul-steckbrief__zeile:last-child {
	padding-bottom: 0;
}

.schul-steckbrief dt {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.65);
}

.schul-steckbrief dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: #ffffff;
}

@media (max-width: 781px) {
	.schul-steckbrief__zeile {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}
}

/* Einstieg: Ueberschrift links, Text rechts (schulen-problem.php) */
.schulen-einstieg__titel {
	margin: 0;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.schulen-einstieg__text {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--wp--preset--color--text-gray);
}

.schulen-einstieg__text + .schulen-einstieg__text {
	margin-top: 1.25rem;
}

.schul-marker {
	padding: 0 0.1em;
	background: linear-gradient(transparent 60%, rgba(95, 211, 154, 0.38) 60%);
	font-weight: 500;
	color: var(--wp--preset--color--dark);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Einsatzformen: Symbole statt Emojis (schulen-vorteile.php) */
.schulen-einsatz .einsatz-card__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(37, 128, 87, 0.1);
	color: var(--wp--preset--color--primary);
}

.schulen-einsatz .einsatz-card__icon svg {
	width: 22px;
	height: 22px;
}

.schulen-einsatz .einsatz-card__content {
	padding-left: calc(1.5rem + 40px + 1rem);
}

@media (max-width: 600px) {
	.schulen-einsatz .einsatz-card__content {
		padding-left: 1.1rem;
	}
}

/* Planung: Tabelle im hellen Feld, darunter eine offene Liste in zwei
   Spalten mit Symbol (schulen-planung.php) */
.schulen-planung .planung-karten {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 4rem);
	row-gap: 0;
	max-width: 1060px;
}

.schulen-planung .planung-karte {
	position: relative;
	padding: 1.5rem 0 1.5rem 3.75rem;
	background: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 0;
}

.schulen-planung .planung-karte--breit {
	margin-bottom: 1.75rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 0;
	border-radius: 22px;
	background: #f3f7f4;
}

.schulen-planung .planung-karte--breit .planung-tabelle th {
	background: #e3eee7;
}

.schulen-planung .planung-karte__symbol {
	position: absolute;
	top: 1.35rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(37, 128, 87, 0.1);
	color: var(--wp--preset--color--primary);
}

@media (max-width: 900px) {
	.schulen-planung .planung-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.schulen-planung .planung-karten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Unterlagen: Download-Liste statt Karten (schulen-unterlagen.php) */
.schulen-unterlagen .unterlagen-liste {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: 820px;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
}

.schulen-unterlagen .unterlage__link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-areas:
		"symbol titel art"
		"symbol text art";
	align-items: center;
	column-gap: 1.1rem;
	row-gap: 0.15rem;
	padding: 1.1rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 0;
	background: none;
}

.schulen-unterlagen .unterlage__link::before {
	content: "";
	grid-area: symbol;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(37, 128, 87, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23258057' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.schulen-unterlagen .unterlage__link:hover,
.schulen-unterlagen .unterlage__link:focus-visible {
	background: #f3f7f4;
	box-shadow: none;
}

.schulen-unterlagen .unterlage__titel {
	grid-area: titel;
	align-self: end;
}

.schulen-unterlagen .unterlage__text {
	grid-area: text;
	align-self: start;
}

.schulen-unterlagen .unterlage__art {
	position: static;
	grid-area: art;
	padding: 0.35rem 0.8rem;
	border-radius: 9999px;
}

.schulen-unterlagen .unterlage__art::after {
	content: " ↓";
}

@media (max-width: 600px) {
	.schulen-unterlagen .unterlage__link {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas:
			"symbol titel"
			"symbol text"
			"symbol art";
		padding: 1rem 0.25rem;
	}

	.schulen-unterlagen .unterlage__link::before {
		width: 40px;
		height: 40px;
		background-size: 20px;
	}

	.schulen-unterlagen .unterlage__art {
		justify-self: start;
		margin-top: 0.35rem;
	}
}

/* ── Ueber uns: ausgewaehlte Veroeffentlichungen von Dr. Kai W. Mueller ──
   team-section.php, 30.09.2026 abends (Florian: "auf der seite fehlt eine
   kleine liste der relevanten publikationen von kai mueller"). Offene
   Liste mit Jahr, Titel als Link und Art/Quelle, zwei Spalten, keine
   Kaesten. Belege im Kopf von team-section.php. */
.publikationen {
	max-width: 900px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.publikationen__titel {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.publikationen__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.publikation {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.9rem;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
}

.publikation__jahr {
	padding-top: 0.1rem;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary);
}

.publikation__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.publikation__titel {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.publikation__titel:hover,
.publikation__titel:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.publikation__quelle {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-gray);
}

.publikationen .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.publikationen__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Planer-Vorschau aus echten Seiten (22.10.2026) ──
   Ersetzt die nachgebaute gruene Planer-Karte auf der Startseite
   (why-section.php), auf /medienplaner/ (freebie-hero.php) und im Popup
   (inc/freebie.php). Bilder aus dem PDF, Hintergrund transparent. */
.freebie-planer {
	display: block;
	width: 100%;
	height: auto;
}

.tag-weiter__bild:has(.freebie-planer) {
	max-width: 420px;
	padding: 0;
}

.freebie-vorschau:has(.freebie-planer) {
	max-width: 480px;
	padding: 0;
}

@media (max-width: 781px) {
	.tag-weiter__bild:has(.freebie-planer) {
		max-width: 320px;
	}
}


/* == Personas 23.10.2026, A: Schulseite == */
/* Florian, 23.10.2026: Schulseite kurz, alles Weitere im
   Beratungsgespraech. Einstieg mit Liste "Was Ihre Schule bekommt"
   (schulen-problem.php) und Abschnitt Beratungsgespraech mit
   Ansprechpartner (schulen-beratung.php). Die Zeilen fuer Telefon und
   E-Mail nutzen .mfp-kontakt__eintrag von der Kontaktseite. */

/* Einstieg: Liste als Zeilen mit Linie und Haken, keine Kaesten */
.schulen-einstieg .schulen-einstieg__zwischentitel {
	margin: 2.25rem 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--dark);
}

.schulen-einstieg .schulen-einstieg__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.schulen-einstieg .schulen-einstieg__liste li {
	position: relative;
	margin: 0;
	padding: 0.85rem 0 0.85rem 2.6rem;
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dark);
}

.schulen-einstieg .schulen-einstieg__liste li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
}

.schulen-einstieg .schulen-einstieg__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.95rem;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 9999px;
	background: #E6F1EA;
}

.schulen-einstieg .schulen-einstieg__liste li::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	top: 1.3rem;
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* Beratungsgespraech: Text links, Karte mit Ansprechpartner rechts */
.schulen-beratung .schulen-beratung__marke {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgba(37, 128, 87, 0.25);
	border-radius: 9999px;
	background: #ffffff;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.schulen-beratung .schulen-beratung__titel {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.schulen-beratung .schulen-beratung__text {
	max-width: 34rem;
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-gray);
}

.schulen-beratung .schulen-beratung__testzugang {
	max-width: 34rem;
	margin: 1.75rem 0 0;
	padding: 0.2rem 0 0.2rem 1.1rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

.schulen-beratung .schulen-beratung__testzugang strong {
	color: var(--wp--preset--color--dark);
}

.schulen-beratung .schulen-beratung__karte {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #F4F8F5;
	border: 1px solid #DCE5DF;
	border-radius: 28px;
}

.schulen-beratung .schulen-beratung__person {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.schulen-beratung .schulen-beratung__foto {
	flex: none;
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 9999px;
	object-fit: cover;
	box-shadow: 0 0 0 4px #ffffff, 0 14px 30px -16px rgba(26, 26, 46, 0.55);
}

.schulen-beratung .schulen-beratung__personentext {
	min-width: 0;
}

.schulen-beratung .schulen-beratung__personentext p {
	margin: 0;
}

.schulen-beratung .schulen-beratung__kartentitel {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.schulen-beratung .schulen-beratung__name {
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--dark);
}

.schulen-beratung .schulen-beratung__rolle {
	margin-top: 0.15rem;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-gray);
}

.schulen-beratung .schulen-beratung__wege {
	display: grid;
	gap: 1.1rem;
	margin: 1.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid #DCE5DF;
}

.schulen-beratung .mfp-kontakt__eintrag::before {
	background: #ffffff;
	box-shadow: inset 0 0 0 1px #DCE5DF;
}

.schulen-beratung .mfp-kontakt__eintrag a {
	overflow-wrap: anywhere;
}

.mfp-kontakt__eintrag--telefon::after { -webkit-mask-image: 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%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: 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%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }

.schulen-beratung .schulen-beratung__knoepfe {
	margin-top: 1.75rem;
}

@media (max-width: 781px) {
	.schulen-einstieg .schulen-einstieg__zwischentitel {
		margin-top: 1.75rem;
	}

	.schulen-beratung .schulen-beratung__karte {
		padding: 1.25rem;
	}

	.schulen-beratung .schulen-beratung__foto {
		width: 84px;
		height: 84px;
	}

	.schulen-beratung .schulen-beratung__knoepfe .wp-block-button,
	.schulen-beratung .schulen-beratung__knoepfe .wp-block-button__link {
		width: 100%;
	}

	.schulen-beratung .schulen-beratung__knoepfe .wp-block-button__link {
		padding-right: 1rem;
		padding-left: 1rem;
		font-size: 0.95rem;
		text-align: center;
	}
}
/* == Ende A == */




/* == Personas 23.10.2026, C: Verkaufsseiten (Preiskarten, FAQ, Kopf) == */

/* Startseite: Zeile unter dem Einleitungstext, was, fuer wen, Preis
   (hero.php). Ruhiger als der Text darueber, mit gruener Linie. */
.hero-shader .hero-shader__description:has(+ .hero-shader__fakten) {
	margin-bottom: 1.1rem !important;
}

.hero-shader .hero-shader__fakten {
	position: relative;
	z-index: 10;
	max-width: 580px;
	margin: 0 0 2.25rem !important;
	padding-left: 0.85rem;
	border-left: 2px solid var(--wp--preset--color--primary-light);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.hero-shader .hero-shader__fakten strong {
	font-weight: 600;
	color: #ffffff;
}

/* Paketkarten (kurse-preise.php, eltern-preise.php): Rechnung fuer zwei
   Kinder, bewusst kein weiterer Kasten neben der Zertifikat-Zeile */
.preis-card__list:has(+ .preis-card__rechnung) {
	margin-bottom: 1.1rem;
}

.preis-card__rechnung {
	margin: 0 0 1.1rem;
	padding: 0.1rem 0 0.1rem 0.85rem;
	border-left: 3px solid var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--dark);
}

.preis-card__rechnung strong {
	color: var(--wp--preset--color--primary-dark);
}

/* Unter "Zur Bestellung" der Weg zur Paketseite als Textlink */
.preis-card__mehr {
	align-self: center;
	margin-top: 0.85rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(37, 128, 87, 0.35);
}

.preis-card__mehr:hover,
.preis-card__mehr:focus-visible {
	color: var(--wp--preset--color--accent);
	border-bottom-color: currentColor;
}

/* Kursbloecke auf /kurse/: Link zur Leseprobe unter den fuenf Modulen
   (kurs-detail.php, kurs-detail-jugendliche.php) */
.kurs-detail__leseprobe {
	margin: 1.1rem 0 0;
	font-size: 0.92rem;
}

.kurs-detail__leseprobe a {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(37, 128, 87, 0.35);
}

.kurs-detail__leseprobe a:hover,
.kurs-detail__leseprobe a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-bottom-color: currentColor;
}



/* == Ende C == */




/* == Personas 23.10.2026, D: Leseprobe Kinderkurse == */

/* Seite /einblick-kinderkurse/ (patterns/kinder-leseprobe.php). Karten,
   Ort, Titel, Zwischentitel und Merksatz kommen von der Elternkurs-Leseprobe
   (.leseprobe, .leseprobe-karte weiter oben). Hier steht nur, was dazukommt:
   Sprungleiste, Kopf je Kurs, Zitat, aufklappbare Fragen, Film, Knoepfe. */

.kinder-leseprobe__sprung {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	max-width: 880px;
	margin: 0 auto 2.5rem;
}

.kinder-leseprobe__sprung a {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	background: #ffffff;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kinder-leseprobe__sprung a:hover,
.kinder-leseprobe__sprung a:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.kinder-leseprobe__kopf {
	max-width: 880px;
	margin: 0 auto 1.75rem;
	text-align: center;
}

.kinder-leseprobe__alter {
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.kinder-leseprobe__kurs {
	margin: 0;
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* Liste mitten in der Karte (Selbsteinschaetzung), oben ist sie die letzte */
.kinder-leseprobe .leseprobe-karte ul {
	margin-bottom: 1rem;
}

/* Auf hellgrauem Grund (14-16) brauchen die weissen Karten eine Kante */
.kinder-leseprobe--jugend .leseprobe-karte {
	border: 1px solid var(--wp--preset--color--mid-gray);
}

/* Zitat wie im Kursbereich (learndash.css, blockquote) */
.leseprobe-karte .leseprobe-karte__zitat {
	position: relative;
	margin: 1.75rem 0;
	padding: 0.2rem 0 0 3.25rem;
	border: 0;
}

.leseprobe-karte .leseprobe-karte__zitat::before {
	content: "\201D";
	position: absolute;
	left: 0;
	top: 0.34em;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 0;
	color: var(--wp--preset--color--primary);
	pointer-events: none;
}

.leseprobe-karte .leseprobe-karte__zitat p {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.7;
}

/* Aufklappbare Fragen (Quiz im Kurs als core/details) */
.leseprobe-fragen {
	border-top: 1px solid #DCE5DF;
}

.leseprobe-fragen details {
	border-bottom: 1px solid #DCE5DF;
}

.leseprobe-fragen summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.9rem 0;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
	transition: color 0.2s ease;
}

.leseprobe-fragen summary::-webkit-details-marker {
	display: none;
}

.leseprobe-fragen summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.leseprobe-fragen details[open] > summary::after {
	transform: rotate(45deg);
}

.leseprobe-fragen summary:hover {
	color: var(--wp--preset--color--primary-dark);
}

.leseprobe-fragen summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.leseprobe-fragen details > p {
	margin: 0 0 1rem;
	padding-right: 2rem;
}

/* Film: Standbild mit Abspielknopf, Vimeo erst nach dem Klick
   (assets/js/leseprobe-film.js) */
.leseprobe-film {
	margin: 0.25rem 0 1.5rem;
}

.leseprobe-film__flaeche {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--dark);
}

/* Standbild seit 23.10.2026 (kein Film mehr): fuellt die Flaeche. Ohne die
   Regel zeigte das Bild in voller Groesse nur seine linke obere Ecke, am Handy
   eine schwarze Flaeche (Pruefung vom 24.10.2026). */
.leseprobe-film__flaeche > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leseprobe-film__start,
.leseprobe-film__rahmen {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.leseprobe-film__start img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.leseprobe-film__knopf {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 4.5rem;
	margin: -2.25rem 0 0 -2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.leseprobe-film__knopf::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -0.75rem 0 0 -0.5rem;
	border-style: solid;
	border-width: 0.75rem 0 0.75rem 1.3rem;
	border-color: transparent transparent transparent var(--wp--preset--color--primary);
}

.leseprobe-film__start:hover img {
	transform: scale(1.02);
}

.leseprobe-film__start:hover .leseprobe-film__knopf,
.leseprobe-film__start:focus-visible .leseprobe-film__knopf {
	transform: scale(1.08);
	background: #ffffff;
}

.leseprobe-film__start:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

.leseprobe-film__hinweis {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

.leseprobe-film__hinweis a {
	color: var(--wp--preset--color--primary-dark);
}

/* Umfang, Knoepfe und Preis unter den Karten */
.kinder-leseprobe .kinder-leseprobe__umfang {
	max-width: 880px;
	margin-top: 2rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
}

.kinder-leseprobe .wp-block-buttons.kinder-leseprobe__knoepfe {
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: 1.25rem;
}

.kinder-leseprobe__knoepfe .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: currentColor;
	color: var(--wp--preset--color--primary-dark);
}

.kinder-leseprobe .kinder-leseprobe__preis {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

/* Handy: Film bis an den Kartenrand (die Karte hat hier 1.5rem Innenabstand) */
@media (max-width: 600px) {
	.leseprobe-film {
		margin-right: -1.5rem;
		margin-left: -1.5rem;
	}

	.leseprobe-film__flaeche {
		border-radius: 0;
	}

	.leseprobe-film__hinweis {
		padding: 0 1.5rem;
	}

	.leseprobe-film__knopf {
		width: 3.75rem;
		height: 3.75rem;
		margin: -1.875rem 0 0 -1.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.leseprobe-film__start img,
	.leseprobe-film__knopf,
	.leseprobe-fragen summary::after {
		transition: none;
	}
}

/* == Ende D == */




/* == Personas 23.10.2026, E: Handyansicht und Medienplaner == */

/* Foto und Text in gestapelten Spalten. Der Blockabstand ist im Theme 0
   (theme.json), die Muster setzen nur den waagrechten Abstand. Am Handy lag
   das Foto deshalb ohne Luft auf der Ueberschrift darunter: Startseite
   "Jaehrliche Zahlen aus der Praeventionsarbeit" (trust-elements.php) und
   "Der Kopf hinter dem MediaFitPass" (initiator.php), /kurse/ "Warum es
   diese Kurse gibt" (jugend-florian.php) und /fuer-eltern/ "Wer Sie durch
   diesen Kurs begleitet" (eltern-florian.php, beide .eltern-florian),
   /medienplaner/ und /fuer-schulen/ das runde Foto (initiator-mini.php).
   Ebenso auf /kurse/ die Kursabschnitte (kurs-detail*.php: Zeile zum
   Zertifikat direkt auf dem Kasten "Die fuenf Module") und auf
   /medienplaner/ Formular und Vorschaubild (freebie-hero.php).
   Nebeneinander (ab 782 px) gilt der Zeilenabstand nicht. */
@media (max-width: 781px) {
	.wp-block-columns:has(> .trust-foundation__media),
	.initiator-section .wp-block-columns,
	.eltern-florian > .wp-block-columns,
	#kurs-10-13 > .wp-block-columns,
	#kurs-14-16 > .wp-block-columns,
	#kurs-eltern > .wp-block-columns,
	.freebie-hero .wp-block-columns {
		row-gap: var(--wp--preset--spacing--30);
	}

	.initiator-mini .wp-block-columns {
		row-gap: var(--wp--preset--spacing--20);
	}

	/* "Umfang:", "Aufbau:", "Preis:" in den Kursabschnitten auf /kurse/:
	   Bricht die Angabe daneben um, stand die Beschriftung mittig neben
	   drei Zeilen. Jetzt auf Hoehe der ersten Zeile. */
	#kurs-10-13 .wp-block-group.is-nowrap.is-layout-flex:has(> p.has-dark-color:first-child),
	#kurs-14-16 .wp-block-group.is-nowrap.is-layout-flex:has(> p.has-dark-color:first-child),
	#kurs-eltern .wp-block-group.is-nowrap.is-layout-flex:has(> p.has-dark-color:first-child) {
		align-items: flex-start;
	}
}

/* Kurssymbole: Die Bilder haben einen fast weissen Grund (253 bis 254
   statt 255). Auf hellgrauem Grund (Kursabschnitt 14 bis 16 auf /kurse/)
   und auf dem Handy war er als heller Kasten zu sehen. brightness hebt ihn
   auf reines Weiss, multiply laesst ihn dann im Hintergrund aufgehen; das
   Symbol selbst aendert sich nicht sichtbar. Das runde Symbol in den Zitaten
   (jugend-florian.php) ist bewusst ein weisser Knopf. */
.pillar-card__icon--image img,
.kurs-detail__icon img,
.paket-kurs__icon img {
	filter: brightness(1.012);
	mix-blend-mode: multiply;
}

/* Alters-Check im Popup (inc/freebie.php): Die Knoepfe tragen seit
   23.10.2026 die Stufen der Leitlinie ("9–12" statt "9 bis 11") und sind
   kuerzer. Im Fliesslayout stand dann "16–18" allein in der zweiten Zeile.
   Drei je Zeile wie auf /medienplaner/ (freebie.css, .freebie-alterscheck). */
.mfp-freebie .mfp-alterscheck__knoepfe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* == Ende E == */

/* == Bald erhaeltlich (26.10.2026) ==
   Florian: "Die beiden Kurse fuer die Jugendlichen sollen noch nicht
   erhaeltlich sein". Statt der Kaufknoepfe ein Hinweis ohne Link, leise:
   gestrichelter Umriss, grauer Text, keine Hover-Wirkung. Kurskopf
   (functions.php, mediafitpass_kurs_kaufinfo_html), Preiskarten
   (kurse-preise.php), Kursbloecke und Leseprobe (kurs-detail.php,
   kurs-detail-jugendliche.php, kinder-leseprobe.php), Startseite
   (three-pillars.php). Kopf der Seite Kurse: .kk-bald in hero.css. */
.mfp-bald,
.preis-card__cta--bald,
.wp-block-button.mfp-bald-knopf .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.5rem;
	border: 1.5px dashed #b9c4bc;
	border-radius: 9999px;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--text-gray);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transform: none;
	cursor: default;
	pointer-events: none;
}

.wp-block-button.mfp-bald-knopf.wp-block-button__width-100 .wp-block-button__link {
	width: 100%;
}

/* Im gruenen Kurskopf hell, sonst kaum lesbar */
.mfp-kurskopf .mfp-bald {
	border-color: rgba(255, 255, 255, 0.55);
	color: rgba(255, 255, 255, 0.9);
}

.pillar-card .pillar-card__stand--bald {
	border: 1px dashed #b9c4bc;
	background: transparent;
	color: var(--wp--preset--color--text-gray);
}