/**
 * LearnDash Styling - MediaFitPass Design-Integration
 * Passt LearnDash LMS an das MediaFitPass Theme an:
 * Gruen (#258057), Poppins/Playfair, Pill-Buttons, abgerundete Karten
 */

/* ══════════════════════════════════════════════════
   LearnDash Wrapper & Basis
   ══════════════════════════════════════════════════ */

/* LearnDash verschachtelt mehrere .learndash-wrapper ineinander (im Kursbereich
   bis zu drei). Ein eigenes Padding wurde dadurch mehrfach gezaehlt und riss
   grosse Luecken zwischen die Abschnitte. Breite und Aussenabstand kommen jetzt
   ausschliesslich vom Template (single-sfwd-*.html). */
.learndash-wrapper {
	font-family: var(--wp--preset--font-family--poppins), 'Poppins', sans-serif;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ══════════════════════════════════════════════════
   Kurs-Titel (H1 von WordPress Theme)
   ══════════════════════════════════════════════════ */

.single-sfwd-courses .wp-block-post-title,
.single-sfwd-lessons .wp-block-post-title,
.single-sfwd-topic .wp-block-post-title,
.single-sfwd-quiz .wp-block-post-title,
.post-type-archive-sfwd-courses .wp-block-post-title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 1rem;
}

/* Die Kursseite ist eine Einstiegsseite und darf gross auftreten. Module,
   Themen und Tests sind Arbeitsseiten - dort stoert ein Plakat-Titel. */
.single-sfwd-courses .wp-block-post-title {
	font-size: clamp(1.9rem, 3vw, 2.5rem) !important;
}

.single-sfwd-lessons .wp-block-post-title,
.single-sfwd-topic .wp-block-post-title,
.single-sfwd-quiz .wp-block-post-title {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
}

/* ══════════════════════════════════════════════════
   Course Status Box (Einschreibung, Preis, etc.)
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-course-status {
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.04), rgba(0, 56, 227, 0.02)) !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 20px !important;
	padding: 2rem !important;
	margin-bottom: 2.5rem !important;
	box-shadow: 0 4px 16px rgba(37, 128, 87, 0.06);
}

.learndash-wrapper .ld-course-status-segment {
	padding: 1rem !important;
}

.learndash-wrapper .ld-course-status-label {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--wp--preset--color--text-gray) !important;
	margin-bottom: 0.5rem !important;
}

.learndash-wrapper .ld-course-status-content {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	color: var(--wp--preset--color--dark) !important;
	font-weight: 600 !important;
}

.learndash-wrapper .ld-course-status--not-enrolled .ld-course-status-content {
	color: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-course-status-price {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Testphase (Florian, 29.09.2026: "das mit dem kostenlos ist ja auch
   falsch"): Die Kurse stehen in LearnDash auf "kostenlos", damit sich
   Testkonten selbst einschreiben koennen. Verkauft werden sie nicht
   kostenlos (Preise auf den Seiten fuer Eltern und Schulen). Bis es einen
   Bezahlweg gibt, fehlt der Preis-Kasten deshalb ganz. Bekommt ein Kurs
   einen echten Preistyp, erscheint der Kasten von selbst wieder. */
.learndash-wrapper .ld-course-status-seg-price.ld-course-status-mode-free {
	display: none !important;
}

/* ══════════════════════════════════════════════════
   Buttons (Pill-Style, Gradient, Hover-Effekte)
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-button,
.learndash-wrapper button.ld-button,
.learndash-wrapper a.ld-button,
.learndash-wrapper input[type="submit"].ld-button {
	/* Kein Farbverlauf mehr: Gruen nach Blau wirkte matschig und im Focus
	   Mode, wo die Knoepfe oben gross stehen, ausgesprochen unruhig. */
	/* primary-dark statt primary: weiss auf #258057 sind 4.88:1 und damit
	   nur knapp AA, weiss auf #1B5E3F sind 7.72:1. */
	background: var(--wp--preset--color--primary-dark) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 0.7rem 1.6rem !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 4px 16px rgba(37, 128, 87, 0.25) !important;
	text-decoration: none !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem;
}

.learndash-wrapper .ld-button:hover,
.learndash-wrapper button.ld-button:hover,
.learndash-wrapper a.ld-button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(37, 128, 87, 0.35) !important;
	color: #ffffff !important;
}

.learndash-wrapper .ld-button.ld-button-alternate {
	background: transparent !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
}

.learndash-wrapper .ld-button.ld-button-alternate:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
}

/* ══════════════════════════════════════════════════
   Tabs (Content, Materials, Quizzes)
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-tabs {
	border: none !important;
	background: transparent !important;
	margin-bottom: 2rem !important;
}

.learndash-wrapper .ld-tabs-navigation {
	display: flex !important;
	gap: 0.5rem !important;
	border-bottom: 2px solid var(--wp--preset--color--mid-gray) !important;
	padding: 0 !important;
	margin: 0 !important;
}

.learndash-wrapper .ld-tabs-navigation .ld-tab {
	background: transparent !important;
	border: none !important;
	padding: 1rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--text-gray) !important;
	cursor: pointer;
	transition: all 0.2s ease !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
}

.learndash-wrapper .ld-tabs-navigation .ld-tab:hover {
	color: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-tabs-navigation .ld-tab.ld-active {
	color: var(--wp--preset--color--primary) !important;
	border-bottom-color: var(--wp--preset--color--primary) !important;
	font-weight: 600 !important;
}

.learndash-wrapper .ld-tabs-content {
	padding: 2rem 0 !important;
	background: transparent !important;
	border: none !important;
}

/* ══════════════════════════════════════════════════
   Lesson/Module List
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-section-heading {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--dark) !important;
	margin: 2rem 0 1rem 0 !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 2px solid var(--wp--preset--color--mid-gray) !important;
}

.learndash-wrapper .ld-item-list {
	border: none !important;
	background: transparent !important;
	margin-bottom: 2rem !important;
}

.learndash-wrapper .ld-item-list-item {
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 16px !important;
	margin-bottom: 1rem !important;
	padding: 1.25rem 1.5rem !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.learndash-wrapper .ld-item-list-item:hover {
	border-color: var(--wp--preset--color--primary) !important;
	transform: translateX(4px) !important;
	box-shadow: 0 8px 20px rgba(37, 128, 87, 0.08) !important;
}

.learndash-wrapper .ld-item-list-item .ld-item-name,
.learndash-wrapper .ld-item-list-item .ld-item-title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--dark) !important;
}

.learndash-wrapper .ld-item-list-item .ld-item-title:hover {
	color: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-item-details {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	color: var(--wp--preset--color--text-gray) !important;
	font-size: 0.85rem !important;
}

/* Status-Icons (Lesson abgeschlossen, in Bearbeitung, etc.) */
.learndash-wrapper .ld-status-icon {
	/* flex-shrink war offen - in der Focus-Mode-Seitenleiste hat der lange
	   Titel daneben die Icons horizontal zusammengedrueckt, aus Kreisen
	   wurden schmale Ovale. */
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	aspect-ratio: 1 / 1 !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.learndash-wrapper .ld-status-icon.ld-status-incomplete {
	background: var(--wp--preset--color--light-gray) !important;
	border: 2px solid var(--wp--preset--color--mid-gray) !important;
	color: var(--wp--preset--color--text-gray) !important;
}

.learndash-wrapper .ld-status-icon.ld-status-complete {
	background: var(--wp--preset--color--primary) !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
}

.learndash-wrapper .ld-status-icon.ld-status-waiting {
	background: #fff8e1 !important;
	border: 2px solid #f59e0b !important;
	color: #f59e0b !important;
}

/* ══════════════════════════════════════════════════
   Progress Bar
   ══════════════════════════════════════════════════ */

/* .ld-progress ist der AUSSENcontainer (Ueberschrift + Balken).
   Bekam frueher height:8px + overflow:hidden - dadurch wurde die
   Zeile "MODUL PROGRESS / 0% COMPLETE" mittendrin abgeschnitten. */
.learndash-wrapper .ld-progress {
	margin: 1rem 0 !important;
}

/* .ld-progress-bar ist die Schiene */
.learndash-wrapper .ld-progress-bar {
	background: var(--wp--preset--color--light-gray) !important;
	border-radius: 9999px !important;
	height: 8px !important;
	overflow: hidden !important;
}

/* .ld-progress-bar-percentage ist die Fuellung */
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent)) !important;
	height: 100% !important;
	border-radius: 9999px !important;
	transition: width 0.6s ease !important;
}

.learndash-wrapper .ld-progress-stats {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--text-gray) !important;
}

.learndash-wrapper .ld-progress-percentage {
	font-weight: 700 !important;
	color: var(--wp--preset--color--primary) !important;
}

/* ══════════════════════════════════════════════════
   Course Archive (Uebersicht aller Kurse)
   ══════════════════════════════════════════════════ */

/* Page-Container fuer Archiv */
.post-type-archive-sfwd-courses main,
.post-type-archive-sfwd-courses .wp-block-query {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 2rem;
}

/* Post-Template Grid: 3 Spalten gleichmaessig, gap */
.post-type-archive-sfwd-courses ul.wp-block-post-template,
.post-type-archive-sfwd-courses .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Einzelne Kurs-Karte */
.post-type-archive-sfwd-courses li.wp-block-post {
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 20px !important;
	padding: 2.5rem 2rem !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	margin: 0 !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.post-type-archive-sfwd-courses li.wp-block-post:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 40px rgba(37, 128, 87, 0.12) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* Kurs-Titel: kleiner, mit Umbruch, hyphens */
.post-type-archive-sfwd-courses .wp-block-post-title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--wp--preset--color--dark) !important;
	margin: 0 0 1rem 0 !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
	-webkit-hyphens: auto !important;
	-ms-hyphens: auto !important;
}

.post-type-archive-sfwd-courses .wp-block-post-title a {
	color: var(--wp--preset--color--dark) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
}

.post-type-archive-sfwd-courses .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* Excerpt */
.post-type-archive-sfwd-courses .wp-block-post-excerpt {
	flex-grow: 1 !important;
	margin: 0 0 1.25rem 0 !important;
}

.post-type-archive-sfwd-courses .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--text-gray) !important;
	margin: 0 0 1rem 0 !important;
}

.post-type-archive-sfwd-courses .wp-block-post-excerpt__more-text {
	margin: 0 !important;
}

.post-type-archive-sfwd-courses .wp-block-post-excerpt__more-link {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	transition: gap 0.2s ease !important;
}

.post-type-archive-sfwd-courses .wp-block-post-excerpt__more-link::after {
	content: '→';
	transition: transform 0.2s ease;
}

.post-type-archive-sfwd-courses .wp-block-post-excerpt__more-link:hover::after {
	transform: translateX(4px);
}

/* Datum */
.post-type-archive-sfwd-courses .wp-block-post-date {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.8rem !important;
	color: var(--wp--preset--color--text-gray) !important;
	margin-top: auto !important;
	padding-top: 1rem !important;
	border-top: 1px solid var(--wp--preset--color--mid-gray) !important;
}

/* Responsive: Tablet 2 Spalten, Mobile 1 Spalte */
@media (max-width: 900px) {
	.post-type-archive-sfwd-courses ul.wp-block-post-template,
	.post-type-archive-sfwd-courses .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.post-type-archive-sfwd-courses ul.wp-block-post-template,
	.post-type-archive-sfwd-courses .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.post-type-archive-sfwd-courses main,
	.post-type-archive-sfwd-courses .wp-block-query {
		padding: 2rem 1rem;
	}
}

/* ══════════════════════════════════════════════════
   Lesson Navigation (Back/Next)
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-lesson-navigation {
	display: flex !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin: 3rem 0 !important;
	padding-top: 2rem !important;
	border-top: 1px solid var(--wp--preset--color--mid-gray) !important;
}

/* ══════════════════════════════════════════════════
   Expand/Collapse
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-expand-button {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 9999px !important;
	padding: 0.5rem 1rem !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--text-gray) !important;
	cursor: pointer;
	transition: all 0.2s ease !important;
}

.learndash-wrapper .ld-expand-button:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* ══════════════════════════════════════════════════
   Info-Bar (Course Status Header)
   ══════════════════════════════════════════════════ */

.learndash-wrapper .ld-course-info-bar {
	background: linear-gradient(135deg, rgba(37, 128, 87, 0.06), rgba(0, 56, 227, 0.04)) !important;
	border-radius: 16px !important;
	padding: 1.5rem 2rem !important;
	margin-bottom: 2rem !important;
	border: 1px solid rgba(37, 128, 87, 0.1) !important;
}

/* ══════════════════════════════════════════════════
   LearnDash-Eigenfarben auf das MediaFitPass-Gruen ziehen
   ══════════════════════════════════════════════════
   LearnDash vergibt eigene Klassen (ld-primary-*, ld-secondary-*) und faerbt
   damit Kopfleisten, Status-Plaketten und Schaltflaechen in seiner eigenen
   Standardfarbe - einem Blau, das nicht zum Theme passt. */

.learndash-wrapper .ld-primary-background,
.learndash-wrapper .ld-secondary-background,
.learndash-wrapper .ld-status-progress,
.learndash-wrapper .ld-expand-button.ld-primary-background {
	background-color: var(--wp--preset--color--primary) !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-primary-background *,
.learndash-wrapper .ld-secondary-background * {
	color: inherit !important;
}

.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-secondary-color,
.learndash-wrapper .ld-primary-color-hover:hover,
.learndash-wrapper a.ld-primary-color {
	color: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-primary-border,
.learndash-wrapper .ld-secondary-border {
	border-color: var(--wp--preset--color--primary) !important;
}

/* Aufklapp-Schaltflaeche: gruen, aber dezent statt als Farbblock */
.learndash-wrapper .ld-expand-button {
	border-radius: 9999px !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
}

/* ==================================================
   KURSINHALTE - Gestaltungssystem
   ==================================================
   Grundlagen dieser Werte:
   - Zeilenlaenge 65 Zeichen (gaengige Empfehlung fuer Lesetexte)
   - Zeilenabstand 1.75 - Kursinhalte werden gelesen, nicht ueberflogen
   - Fliesstext in text-gray (7.46:1 auf weiss = WCAG AAA)
   - Ueberschriften in dark (17.06:1 = AAA)
   - Textakzente in primary-dark (7.72:1 = AAA); das hellere primary erreicht
     nur 4.88:1 und wird deshalb nur flaechig oder fuer Grosstext genutzt
   - Olivgruen (secondary) kommt als Textfarbe NICHT vor: nur 3.18:1
   Der Rahmen ist 1100px breit, damit Tabellen und Videos Platz haben - der
   Fliesstext darin bleibt auf Lesebreite begrenzt.
   ================================================== */

.single-sfwd-courses .wp-block-post-content,
.single-sfwd-lessons .wp-block-post-content,
.single-sfwd-topic .wp-block-post-content,
.single-sfwd-quiz .wp-block-post-content {
	color: var(--wp--preset--color--text-gray);
	font-size: 1.05rem;
	line-height: 1.75;
}

/* -- Lesespalte ---------------------------------- */
/* Der Text lief vorher gegen eine Grenze von 65 Zeichen und liess rechts
   eine leere Spalte stehen. Auf Wunsch aufgehoben: Absaetze nutzen jetzt
   die volle Inhaltsbreite. Die Breite wird nur noch vom Container
   begrenzt. */

.single-sfwd-courses .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .wp-block-details),
.single-sfwd-lessons .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .wp-block-details),
.single-sfwd-topic .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .wp-block-details),
.single-sfwd-quiz .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .wp-block-details) {
	max-width: none;
}

.single-sfwd-courses .wp-block-post-content > p,
.single-sfwd-lessons .wp-block-post-content > p,
.single-sfwd-topic .wp-block-post-content > p,
.single-sfwd-quiz .wp-block-post-content > p {
	margin-bottom: 1.25em;
}

/* -- Ueberschriften ------------------------------ */

.single-sfwd-courses .wp-block-post-content :is(h2, h3, h4),
.single-sfwd-lessons .wp-block-post-content :is(h2, h3, h4),
.single-sfwd-topic .wp-block-post-content :is(h2, h3, h4),
.single-sfwd-quiz .wp-block-post-content :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	color: var(--wp--preset--color--dark);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.single-sfwd-topic .wp-block-post-content h2,
.single-sfwd-lessons .wp-block-post-content h2,
.single-sfwd-quiz .wp-block-post-content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 2.75rem 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--mid-gray);
}

.single-sfwd-topic .wp-block-post-content h3,
.single-sfwd-lessons .wp-block-post-content h3,
.single-sfwd-quiz .wp-block-post-content h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 2.25rem 0 0.6rem;
}

.single-sfwd-topic .wp-block-post-content h4,
.single-sfwd-lessons .wp-block-post-content h4,
.single-sfwd-quiz .wp-block-post-content h4 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1.75rem 0 0.4rem;
	color: var(--wp--preset--color--primary-dark);
}

.single-sfwd-courses .wp-block-post-content > :is(h2, h3, h4):first-child,
.single-sfwd-lessons .wp-block-post-content > :is(h2, h3, h4):first-child,
.single-sfwd-topic .wp-block-post-content > :is(h2, h3, h4):first-child,
.single-sfwd-quiz .wp-block-post-content > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* -- Hervorhebungen und Links -------------------- */

.single-sfwd-topic .wp-block-post-content strong,
.single-sfwd-lessons .wp-block-post-content strong,
.single-sfwd-quiz .wp-block-post-content strong {
	color: var(--wp--preset--color--dark);
	font-weight: 600;
}

.single-sfwd-topic .wp-block-post-content a:not(.wp-element-button),
.single-sfwd-lessons .wp-block-post-content a:not(.wp-element-button),
.single-sfwd-quiz .wp-block-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.single-sfwd-topic .wp-block-post-content a:not(.wp-element-button):hover,
.single-sfwd-lessons .wp-block-post-content a:not(.wp-element-button):hover,
.single-sfwd-quiz .wp-block-post-content a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
}

/* -- Listen -------------------------------------- */

.single-sfwd-courses .wp-block-post-content :is(ul, ol),
.single-sfwd-lessons .wp-block-post-content :is(ul, ol),
.single-sfwd-topic .wp-block-post-content :is(ul, ol),
.single-sfwd-quiz .wp-block-post-content :is(ul, ol) {
	padding-left: 1.35rem;
	margin-bottom: 1.35em;
}

.single-sfwd-courses .wp-block-post-content li,
.single-sfwd-lessons .wp-block-post-content li,
.single-sfwd-topic .wp-block-post-content li,
.single-sfwd-quiz .wp-block-post-content li {
	margin-bottom: 0.45em;
	padding-left: 0.2rem;
}

.single-sfwd-courses .wp-block-post-content ul li::marker,
.single-sfwd-lessons .wp-block-post-content ul li::marker,
.single-sfwd-topic .wp-block-post-content ul li::marker,
.single-sfwd-quiz .wp-block-post-content ul li::marker {
	color: var(--wp--preset--color--primary);
}

.single-sfwd-courses .wp-block-post-content ol li::marker,
.single-sfwd-lessons .wp-block-post-content ol li::marker,
.single-sfwd-topic .wp-block-post-content ol li::marker,
.single-sfwd-quiz .wp-block-post-content ol li::marker {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

/* ==================================================
   Zitat - das Erkennungszeichen des Kurses
   ==================================================
   Uebernommen von florian-buschmann.de: grosses gruenes Anfuehrungs-
   zeichen links, halbfetter Poppins-Satz, Quelle darunter in normaler
   Staerke. Kein Rahmen, keine Kursive - die Zitate sollen wie Aussagen
   wirken, nicht wie Dekoration. */

.single-sfwd-courses .wp-block-post-content blockquote,
.single-sfwd-lessons .wp-block-post-content blockquote,
.single-sfwd-topic .wp-block-post-content blockquote,
.single-sfwd-quiz .wp-block-post-content blockquote,
body.learndash-cpt .ld-focus-content blockquote,
.learndash-wrapper .ld-tabs-content blockquote,
.wp-block-quote.is-style-mfp-zitat {
	position: relative;
	margin: 2.75rem 0;
	padding: 0.2rem 0 0 4rem;
	border: 0;
	border-radius: 0;
	background: none;
	max-width: none;
	quotes: none;
}

.single-sfwd-courses .wp-block-post-content blockquote::before,
.single-sfwd-lessons .wp-block-post-content blockquote::before,
.single-sfwd-topic .wp-block-post-content blockquote::before,
.single-sfwd-quiz .wp-block-post-content blockquote::before,
body.learndash-cpt .ld-focus-content blockquote::before,
.learndash-wrapper .ld-tabs-content blockquote::before,
.wp-block-quote.is-style-mfp-zitat::before {
	content: "\201D";
	position: absolute;
	left: 0;
	top: 0.34em;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 4.2rem;
	font-weight: 700;
	line-height: 0;
	color: var(--wp--preset--color--primary);
	pointer-events: none;
}

.single-sfwd-courses .wp-block-post-content blockquote p,
.single-sfwd-lessons .wp-block-post-content blockquote p,
.single-sfwd-topic .wp-block-post-content blockquote p,
.single-sfwd-quiz .wp-block-post-content blockquote p,
body.learndash-cpt .ld-focus-content blockquote p,
.learndash-wrapper .ld-tabs-content blockquote p,
.wp-block-quote.is-style-mfp-zitat p {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 1.08rem;
	line-height: 1.85;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.75rem 0;
	max-width: none;
}

.single-sfwd-courses .wp-block-post-content blockquote cite,
.single-sfwd-lessons .wp-block-post-content blockquote cite,
.single-sfwd-topic .wp-block-post-content blockquote cite,
.single-sfwd-quiz .wp-block-post-content blockquote cite,
body.learndash-cpt .ld-focus-content blockquote cite,
.learndash-wrapper .ld-tabs-content blockquote cite,
.wp-block-quote.is-style-mfp-zitat cite {
	display: block;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--text-gray);
}

.single-sfwd-courses .wp-block-post-content blockquote cite::before,
.single-sfwd-lessons .wp-block-post-content blockquote cite::before,
.single-sfwd-topic .wp-block-post-content blockquote cite::before,
.single-sfwd-quiz .wp-block-post-content blockquote cite::before,
body.learndash-cpt .ld-focus-content blockquote cite::before,
.learndash-wrapper .ld-tabs-content blockquote cite::before,
.wp-block-quote.is-style-mfp-zitat cite::before {
	content: "\2013\00a0";
}

/* Auf schmalen Schirmen ruecken Zeichen und Text zusammen */
@media (max-width: 600px) {
	body.learndash-cpt .ld-focus-content blockquote,
	.single-sfwd-topic .wp-block-post-content blockquote,
	.wp-block-quote.is-style-mfp-zitat {
		padding-left: 2.6rem;
	}

	body.learndash-cpt .ld-focus-content blockquote::before,
	.wp-block-quote.is-style-mfp-zitat::before {
		font-size: 3rem;
	}
}

/* ==================================================
   Kasten-Stile (im Editor unter "Stile" waehlbar)
   ==================================================
   Jeder Kartentyp bekommt eine eigene, ruhige Einfaerbung. Eltern erkennen
   dadurch schon beim Scrollen, was sie erwartet. */

.is-style-mfp-hinweis,
.is-style-mfp-aufgabe,
.is-style-mfp-achtung,
.is-style-mfp-hilfe,
.is-style-mfp-beispiel,
.is-style-mfp-merksatz {
	position: relative;
	max-width: none;
	margin: 2rem 0;
	padding: 1.3rem 1.6rem;
	border-radius: 14px;
	border: 1px solid transparent;
	font-size: 1.1rem;
	line-height: 1.65;
}

/* Die Bedeutung stand vorher nur in der Flaechenfarbe und einem Zeichen.
   Wer Farben nicht unterscheiden kann oder im Windows-Kontrastmodus arbeitet,
   sah fuenf identische Kaesten. Jetzt steht die Art als Wort darin (WCAG 1.4.1). */
.is-style-mfp-hinweis::before,
.is-style-mfp-aufgabe::before,
.is-style-mfp-achtung::before,
.is-style-mfp-hilfe::before,
.is-style-mfp-beispiel::before,
.is-style-mfp-merksatz::before {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-style: normal;
}

.is-style-mfp-hinweis > *:last-child,
.is-style-mfp-aufgabe > *:last-child,
.is-style-mfp-achtung > *:last-child,
.is-style-mfp-hilfe > *:last-child,
.is-style-mfp-merksatz > *:last-child {
	margin-bottom: 0;
}

.is-style-mfp-hinweis {
	background: var(--wp--preset--color--light-gray);
	border-color: var(--wp--preset--color--mid-gray);
}

.is-style-mfp-hinweis::before {
	content: "Hinweis";
	color: var(--wp--preset--color--primary-dark);
}

.is-style-mfp-aufgabe {
	background: #F1F6F2;
	border-color: #CFE3D6;
}

.is-style-mfp-aufgabe::before {
	content: "Praxisaufgabe";
	color: var(--wp--preset--color--primary-dark);
}

.is-style-mfp-achtung {
	background: #FCF6EC;
	border-color: #EBD9BC;
}

.is-style-mfp-achtung::before {
	content: "Achtung";
	color: #8A5200;
}

.is-style-mfp-hilfe {
	background: #EFF4FB;
	border-color: #D3E0F2;
}

.is-style-mfp-hilfe::before {
	content: "Hilfe und Anlaufstellen";
	color: #14407A;
}

.is-style-mfp-merksatz {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: #ffffff;
	padding-left: 1.6rem;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.5;
}

.is-style-mfp-merksatz::before {
	content: "Merksatz";
	color: rgba(255, 255, 255, 0.85);
}

.is-style-mfp-merksatz strong,
.is-style-mfp-merksatz b {
	color: #ffffff;
}

/* ==================================================
   Tabellen
   ================================================== */

.single-sfwd-courses .wp-block-table,
.single-sfwd-lessons .wp-block-table,
.single-sfwd-topic .wp-block-table,
.single-sfwd-quiz .wp-block-table {
	overflow-x: auto;
	margin: 2.25rem 0;
	-webkit-overflow-scrolling: touch;
}

.single-sfwd-courses .wp-block-table table,
.single-sfwd-lessons .wp-block-table table,
.single-sfwd-topic .wp-block-table table,
.single-sfwd-quiz .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	/* Ohne Mindestbreite quetscht sich eine vierspaltige Tabelle auf dem
	   Handy auf 90px je Spalte zusammen - lesbar ist das nicht mehr. Mit
	   Mindestbreite scrollt sie stattdessen seitwaerts. Auf dem Schreibtisch
	   (1100px Lesebreite) hat der Wert keine Wirkung. */
	min-width: 40rem;
	font-size: 0.95rem;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 14px;
	overflow: hidden;
}

.single-sfwd-courses .wp-block-table :is(th, td),
.single-sfwd-lessons .wp-block-table :is(th, td),
.single-sfwd-topic .wp-block-table :is(th, td),
.single-sfwd-quiz .wp-block-table :is(th, td) {
	padding: 0.8rem 1rem;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
	vertical-align: middle;
	text-align: left;
}

.single-sfwd-courses .wp-block-table th,
.single-sfwd-lessons .wp-block-table th,
.single-sfwd-topic .wp-block-table th,
.single-sfwd-quiz .wp-block-table th {
	background: var(--wp--preset--color--primary-dark);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.single-sfwd-courses .wp-block-table td:first-child,
.single-sfwd-lessons .wp-block-table td:first-child,
.single-sfwd-topic .wp-block-table td:first-child,
.single-sfwd-quiz .wp-block-table td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--light-gray);
}

.single-sfwd-courses .wp-block-table tbody tr:nth-child(even) td:not(:first-child),
.single-sfwd-lessons .wp-block-table tbody tr:nth-child(even) td:not(:first-child),
.single-sfwd-topic .wp-block-table tbody tr:nth-child(even) td:not(:first-child),
.single-sfwd-quiz .wp-block-table tbody tr:nth-child(even) td:not(:first-child) {
	background: #FAFBFA;
}

.single-sfwd-courses .wp-block-table tbody tr:last-child :is(td, th),
.single-sfwd-lessons .wp-block-table tbody tr:last-child :is(td, th),
.single-sfwd-topic .wp-block-table tbody tr:last-child :is(td, th),
.single-sfwd-quiz .wp-block-table tbody tr:last-child :is(td, th) {
	border-bottom: none;
}

/* ==================================================
   Bedienbarkeit mit der Tastatur
   ==================================================
   Ohne sichtbaren Fokus ist die Seite mit der Tastatur nicht benutzbar
   (WCAG 2.4.7). Betrifft auch Menschen, die keine Maus benutzen koennen. */

/* Der Rahmen muss auf JEDEM Untergrund sichtbar sein. Der vorherige in
   accent-Blau erreicht auf weiss 7.85:1, auf dem dunkelgruenen
   Seitenleistenkopf aber nur 1.02:1 und war dort unsichtbar. Dunkler
   Rahmen plus weisser Hof funktioniert auf hell wie dunkel.
   Gilt jetzt auch fuer Formularfelder - alle Quizze bestehen daraus. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #1A1A2E !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #ffffff !important;
	border-radius: 4px;
}

label:has(:focus-visible) {
	outline: 3px solid #1A1A2E;
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.learndash-wrapper *,
	.learndash-wrapper *::before,
	.learndash-wrapper *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==================================================
   Druckansicht
   ==================================================
   Mehrere Karten sind zum Ausdrucken gedacht - der Satz-Werkzeugkasten
   ausdruecklich "an den Kuehlschrank". Beim Drucken fliegen Navigation,
   Fortschrittsanzeige und Fusszeile raus. */

@media print {
	.site-header,
	#wpadminbar,
	.learndash-wrapper .ld-progress,
	.learndash-wrapper .ld-breadcrumbs,
	.learndash-wrapper .ld-lesson-navigation,
	.learndash-wrapper .ld-item-list-actions,
	.learndash-wrapper .ld-status {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		font-size: 11pt;
	}

	.wp-block-post-content > * {
		max-width: none !important;
	}

	.is-style-mfp-hinweis,
	.is-style-mfp-aufgabe,
	.is-style-mfp-achtung,
	.is-style-mfp-hilfe,
	.is-style-mfp-merksatz,
	.wp-block-table,
	blockquote {
		break-inside: avoid;
	}

	/* Alle Kartenarten drucken mit Rahmen statt als blasse Flaeche - sonst
	   sind sie im Schwarzweiss-Ausdruck nicht voneinander zu unterscheiden. */
	.is-style-mfp-hinweis,
	.is-style-mfp-aufgabe,
	.is-style-mfp-achtung,
	.is-style-mfp-hilfe,
	.is-style-mfp-merksatz {
		background: none !important;
		color: #000000 !important;
		border: 1.5pt solid #000000 !important;
	}

	.is-style-mfp-merksatz::before,
	.is-style-mfp-hinweis::before,
	.is-style-mfp-aufgabe::before,
	.is-style-mfp-achtung::before,
	.is-style-mfp-hilfe::before {
		color: #000000 !important;
	}

	/* Im Focus Mode liegt der Inhalt in anderen Containern */
	.ld-focus-sidebar,
	.ld-focus-header {
		display: none !important;
	}

	.ld-focus-content,
	.ld-focus-content > *,
	.wp-block-post-content > * {
		max-width: none !important;
	}
}

/* ══════════════════════════════════════════════════
   Mobile Responsive
   ══════════════════════════════════════════════════ */

@media (max-width: 781px) {
	/* bewusst kein Padding - siehe Kommentar oben zur Verschachtelung */
	.learndash-wrapper {
		padding: 0;
	}

	.learndash-wrapper .ld-course-status {
		padding: 1.25rem !important;
	}

	.learndash-wrapper .ld-tabs-navigation {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.learndash-wrapper .ld-tabs-navigation .ld-tab {
		white-space: nowrap;
		padding: 0.75rem 1rem !important;
	}

	.learndash-wrapper .ld-item-list-item {
		padding: 1rem !important;
	}

	.learndash-wrapper .ld-lesson-navigation {
		flex-direction: column;
	}
}


/* ==================================================
   FOCUS MODE
   ==================================================
   LearnDash rendert Module, Themen und Tests hier in einem eigenen Layout mit
   Seitenleiste - Website-Kopfzeile und Fusszeile entfallen. Die folgenden
   Regeln ziehen dieses Layout ans MediaFitPass-Design. */

/* -- Kopfleiste ---------------------------------- */

body.learndash-cpt .ld-focus-header {
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray);
	padding: 0.6rem 1.25rem;
	gap: 1.25rem;
	box-shadow: none;
}

/* Die Weiter-Knoepfe standen oben als zwei riesige Farbbloecke und haben die
   Fortschrittsanzeige erdrueckt. Hier gehoeren sie ruhig und schmal hin. */
/* Beschriftungen duerfen umbrechen statt abgeschnitten zu werden: bei
   200 Prozent Zoom stand hier vorher 'Vorheriges Mo...'. Tippflaeche
   mindestens 44px, Schrift wird nie zur Platzgewinnung verkleinert. */
body.learndash-cpt .ld-focus-header .ld-button,
body.learndash-cpt .ld-focus-header a.ld-button {
	padding: 0.5rem 1.1rem !important;
	font-size: 0.95rem !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: min(15rem, 40vw);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.25;
}

/* Nur EINE gefuellte Aktion in der Kopfleiste. Zwei gleich laute Knoepfe
   waren gleichzeitig zu dominant und einzeln zu klein, weil sie sich den
   Platz teilten. Der Zurueck-Weg wird zur ruhigen Zweitform. */
body.learndash-cpt .ld-focus-header .ld-content-action:first-child .ld-button,
body.learndash-cpt .ld-focus-header .ld-button.ld-button-transparent,
body.learndash-cpt .ld-focus-header .ld-button-alternate {
	background: transparent !important;
	color: var(--wp--preset--color--primary-dark) !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
}

body.learndash-cpt .ld-focus-header .ld-progress {
	margin: 0 !important;
	min-width: 12rem;
}

/* 12px in Versalien mit Sperrschrift ist die unleserlichste Kombination
   fuer Menschen mit Sehbeeintraechtigung. */
body.learndash-cpt .ld-focus-header .ld-progress-heading,
body.learndash-cpt .ld-focus-header .ld-progress-stats {
	font-size: 0.9rem !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* -- Seitenleiste -------------------------------- */

body.learndash-cpt .ld-focus-sidebar {
	background: #ffffff;
	border-right: 1px solid var(--wp--preset--color--mid-gray);
}

body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading {
	background: var(--wp--preset--color--primary-dark);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	padding: 1.1rem 1.25rem;
}

body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading a,
body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading * {
	color: #ffffff !important;
}

/* Modul-Zeilen */
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-lesson-title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--dark);
}

/* Themen-Zeilen: kleiner und ruhiger als die Modul-Zeilen darueber */
.learndash-wrapper .ld-course-navigation .ld-topic-list .ld-table-list-item,
.learndash-wrapper .ld-course-navigation .ld-table-list-item-preview {
	font-size: 1rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-gray);
}

.learndash-wrapper .ld-course-navigation .ld-table-list-item-preview:hover {
	background: var(--wp--preset--color--light-gray);
}

/* Das aktuelle Thema muss sofort auffindbar sein */
.learndash-wrapper .ld-course-navigation .ld-is-current-item > .ld-table-list-item-preview,
.learndash-wrapper .ld-course-navigation .ld-item-list-item.ld-is-current-item {
	background: #EEF5F1;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

/* Gesperrte Schritte zurueckhaltend, aber nicht unsichtbar (Kontrast!) */
/* Deckkraft statt Farbe war ein Kontrastfehler: text-gray bei 75 Prozent
   ueber weiss ergibt effektiv rund #808080 = 3.95:1 und faellt unter die
   AA-Schwelle. Und der Unterschied zwischen 100 und 75 Prozent ist fuer
   Menschen mit Sehbeeintraechtigung ohnehin kaum wahrnehmbar. */
.learndash-wrapper .ld-course-navigation .ld-item-list-item.ld-is-locked {
	opacity: 1;
	color: #6B6B6B;
}

body.learndash-cpt .ld-focus-sidebar-trigger,
body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-sidebar-trigger {
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	color: var(--wp--preset--color--primary-dark) !important;
}

/* -- Inhaltsbereich ------------------------------ */

/* Focus Mode nutzt eigene Container - die Lesetypografie von oben ist an
   .wp-block-post-content gebunden und greift hier sonst nicht. */
body.learndash-cpt .ld-focus-content {
	color: var(--wp--preset--color--text-gray);
	font-size: 1.15rem;
	line-height: 1.7;
}

/* Volle Inhaltsbreite auch im Focus Mode. Nachfahren- statt
   Kindselektor, weil LearnDash weitere Container dazwischenschiebt. */
body.learndash-cpt .ld-focus-content :is(p, ul, ol, h2, h3, h4, h5, blockquote),
.learndash-wrapper .ld-tabs-content :is(p, ul, ol, h2, h3, h4, h5, blockquote) {
	max-width: none;
}

body.learndash-cpt .ld-focus-content :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	color: var(--wp--preset--color--dark);
	line-height: 1.25;
	text-wrap: balance;
}

body.learndash-cpt .ld-focus-content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 2.75rem 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--mid-gray);
}

body.learndash-cpt .ld-focus-content h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 2.25rem 0 0.6rem;
}

body.learndash-cpt .ld-focus-content strong {
	color: var(--wp--preset--color--dark);
	font-weight: 600;
}

body.learndash-cpt .ld-focus-content ul li::marker {
	color: var(--wp--preset--color--primary);
}

body.learndash-cpt .ld-focus-content li {
	margin-bottom: 0.45em;
}

/* Der Seitentitel stand als Plakat ueber dem Inhalt */
body.learndash-cpt .ld-focus-content > h1,
body.learndash-cpt .ld-focus-main-content > h1,
body.learndash-cpt .ld-focus-content .ld-focus-content-title {
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: var(--wp--preset--color--dark) !important;
	margin-bottom: 1.25rem !important;
}

/* -- Navigation am Fuss -------------------------- */

.learndash-wrapper .ld-content-actions {
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	padding-top: 1.5rem;
	margin-top: 2.5rem;
}

.learndash-wrapper .ld-content-actions .ld-button {
	padding: 0.65rem 1.4rem !important;
	font-size: 0.9rem !important;
}

/* -- Schmale Bildschirme ------------------------- */

@media (max-width: 900px) {
	body.learndash-cpt .ld-focus-header {
		padding: 0.5rem 0.75rem;
		gap: 0.6rem;
	}

	/* Auch hier: Schrift wird nicht zur Platzgewinnung verkleinert. Die
	   Kopfleiste bricht stattdessen um. */
	body.learndash-cpt .ld-focus-header {
		flex-wrap: wrap;
	}

	body.learndash-cpt .ld-focus-header .ld-progress {
		min-width: 0;
		flex: 1 1 100%;
	}

	body.learndash-cpt .ld-focus-header .ld-button,
	body.learndash-cpt .ld-focus-header a.ld-button {
		padding: 0.5rem 1rem !important;
		font-size: 0.95rem !important;
		min-height: 44px;
		max-width: 45vw;
	}
}

/* ==================================================
   Windows-Kontrastmodus und erhoehter Kontrastbedarf
   ==================================================
   Im Kontrastmodus ersetzt das Betriebssystem alle Farben. Ohne Rahmen
   verschwinden dann saemtliche Kaesten, weil sie sich nur ueber ihre
   Flaechenfarbe definieren - und weisse Schrift auf gruenem Grund kann
   unlesbar werden. WCAG 1.4.11. */

@media (forced-colors: active) {
	.is-style-mfp-hinweis,
	.is-style-mfp-aufgabe,
	.is-style-mfp-achtung,
	.is-style-mfp-hilfe,
	.is-style-mfp-merksatz {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.is-style-mfp-merksatz,
	.is-style-mfp-merksatz strong,
	.is-style-mfp-merksatz::before {
		color: CanvasText;
	}

	:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 3px solid CanvasText !important;
		box-shadow: none !important;
	}

	.learndash-wrapper .ld-status-icon {
		border: 1px solid CanvasText !important;
	}
}

/* ==================================================
   Olivgruen als Textfarbe abfangen
   ==================================================
   secondary #899664 erreicht auf weiss nur 3.18:1 und faellt damit durch.
   Als Flaechenfarbe bleibt es nutzbar; waehlt es jemand im Editor als
   Textfarbe aus, greift hier die lesbare Variante. */

.ld-focus-content .has-secondary-color,
.wp-block-post-content .has-secondary-color {
	color: var(--wp--preset--color--primary-dark) !important;
}

/* ==================================================
   Rechtszeile im Kursbereich
   ==================================================
   Focus Mode entfernt die Fusszeile der Website. Diese Zeile ersetzt sie
   fuer Impressum und Datenschutz - zurueckhaltend, aber auf jeder Kursseite
   erreichbar. */

.mfp-kurs-rechtszeile {
	padding: 2rem 1.5rem 2.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-gray);
	border-top: 1px solid var(--wp--preset--color--mid-gray);
	margin-top: 3rem;
}

.mfp-kurs-rechtszeile a {
	color: var(--wp--preset--color--text-gray);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.mfp-kurs-rechtszeile a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.mfp-kurs-rechtszeile span {
	margin: 0 0.35rem;
	color: var(--wp--preset--color--mid-gray);
}

@media print {
	.mfp-kurs-rechtszeile {
		display: none !important;
	}
}

/* ==================================================
   Kopfleiste: abgeschnittene Knoepfe
   ==================================================
   Die Regel fuer die Fuss-Navigation weiter oben gibt .ld-content-actions
   einen Aussenabstand von 2.5rem nach oben. LearnDash nutzt dieselbe Klasse
   aber auch in der Focus-Mode-Kopfleiste - dort schob der Abstand die
   Knoepfe nach unten aus der Leiste heraus, sie wurden unten abgeschnitten.
   Hier wird das fuer die Kopfleiste zurueckgenommen, und die Leiste darf
   mitwachsen statt zu beschneiden. */

body.learndash-cpt .ld-focus-header .ld-content-actions {
	border-top: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

body.learndash-cpt .ld-focus-header {
	height: auto !important;
	min-height: 0 !important;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.6rem;
	overflow: visible !important;
}

/* Nichts in der Leiste darf den Inhalt beschneiden */
body.learndash-cpt .ld-focus-header > *,
body.learndash-cpt .ld-focus-header .ld-content-action {
	overflow: visible !important;
	min-height: 0;
}

/* Nur die Weiter-Aktion bleibt gefuellt. Der Weg zurueck ist die ruhige
   Zweitform - zwei gleich laute Farbbloecke waren gleichzeitig zu dominant
   und einzeln zu klein, weil sie sich den Platz teilten. */
body.learndash-cpt .ld-focus-header .ld-content-action:first-child .ld-button {
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--primary-dark) !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
}

body.learndash-cpt .ld-focus-header .ld-content-action:first-child .ld-button:hover {
	background: var(--wp--preset--color--light-gray) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
}

/* ==================================================
   Focus Mode: Tiefe statt Weiss auf Weiss
   ==================================================
   Der Kursbereich war durchgehend reinweiss - Seitenleiste, Kopfleiste und
   Inhalt gingen ineinander ueber, nichts hatte eine Kante. Jetzt liegt der
   Inhalt als weisses Blatt auf einem leicht gruenstichigen Grund. Der Ton ist
   bewusst schwach (rund 3 Prozent Saettigung): genug, um Flaechen zu trennen,
   zu wenig, um mit dem Inhalt zu konkurrieren. */

body.learndash-cpt,
body.learndash-cpt .ld-focus,
body.learndash-cpt .ld-focus-main {
	background-color: #EAF0EC;
}

body.learndash-cpt .ld-focus-content {
	background: #ffffff;
	border-radius: 16px;
	padding: 2.5rem 2.75rem 3rem;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04),
	            0 12px 32px -20px rgba(26, 26, 46, 0.18);
}

/* Kopfleiste hebt sich vom getoenten Grund ab */
body.learndash-cpt .ld-focus-header {
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(26, 26, 46, 0.05);
}

/* Seitenleiste als eigene Flaeche, mit klarer Kante zum Inhalt */
body.learndash-cpt .ld-focus-sidebar {
	background: #ffffff;
	border-right: 1px solid #DDE5DF;
}

/* Die Brotkrumen-Leiste bekommt etwas mehr Kontur */
body.learndash-cpt .ld-focus-content .ld-breadcrumbs,
.learndash-wrapper .ld-breadcrumbs {
	background: #F1F5F2;
	border: 1px solid #DCE6E0;
	border-radius: 10px;
}

/* Trennlinie zwischen den Sinnabschnitten statt reiner Leerraum */
body.learndash-cpt .ld-focus-content h2 {
	border-bottom-color: #DDE5DF;
}

@media (max-width: 900px) {
	body.learndash-cpt .ld-focus-content {
		padding: 1.5rem 1.25rem 2rem;
		border-radius: 12px;
	}
}

/* ==================================================
   Feinschliff Focus Mode
   ================================================== */

/* -- Video ---------------------------------------- */
/* Der Player sass mit harten Kanten mitten im Weissen. Gleiche Rundung und
   Schattierung wie die uebrigen Flaechen, damit er zum Blatt gehoert. */

.learndash-wrapper .ld-video,
body.learndash-cpt .ld-focus-content .wp-block-embed__wrapper,
body.learndash-cpt .ld-focus-content .wp-block-embed {
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 2rem;
	box-shadow: 0 2px 6px rgba(26, 26, 46, 0.06),
	            0 18px 40px -24px rgba(26, 26, 46, 0.28);
	line-height: 0;
}

.learndash-wrapper .ld-video iframe,
body.learndash-cpt .ld-focus-content iframe {
	display: block;
	border-radius: 14px;
	border: 0;
}

/* -- Haken an "Als abgeschlossen markieren" -------- */
/* Stand ohne Abstand direkt am Wort: "markieren✓" */

.learndash-wrapper .ld-icon-complete,
.learndash-wrapper .ld-button .ld-icon,
.learndash-wrapper .sfwd-mark-complete .ld-icon {
	margin-left: 0.5em;
}

body.learndash-cpt .ld-focus-header .sfwd-mark-complete,
body.learndash-cpt .ld-focus-header form.sfwd-mark-complete {
	display: flex;
	align-items: center;
}

/* -- Seitenleiste: Kurstitel bleibt stehen --------- */
/* Der gruene Kopf scrollte mit weg, sichtbar blieb ein abgeschnittenes
   "Kurs)". Als Anker gehoert er an den oberen Rand. */

body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading {
	position: sticky;
	top: 0;
	z-index: 5;
	box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08);
}

/* -- Abstand zwischen Brotkrumen und Inhalt -------- */



/* ==================================================
   Eingefuegte Tabellen einfangen
   ==================================================
   Aus Word oder Google Docs kopierte Tabellen bringen eigene Inline-Farben
   mit - typischerweise Blau. Inline-Stile schlagen normales CSS, deshalb
   greift hier nur !important. Gilt fuer alle Tabellen im Kursbereich, auch
   fuer solche ohne wp-block-table-Huelle. */

body.learndash-cpt .ld-focus-content table,
.learndash-wrapper .ld-tabs-content table,
.single-sfwd-topic .wp-block-post-content table,
.single-sfwd-lessons .wp-block-post-content table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	font-size: 0.95rem !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 2rem 0 !important;
	background: #ffffff !important;
}

body.learndash-cpt .ld-focus-content table :is(th, td),
.learndash-wrapper .ld-tabs-content table :is(th, td),
.single-sfwd-topic .wp-block-post-content table :is(th, td),
.single-sfwd-lessons .wp-block-post-content table :is(th, td) {
	padding: 0.8rem 1rem !important;
	border: none !important;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray) !important;
	vertical-align: top !important;
	text-align: left !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--text-gray) !important;
}

body.learndash-cpt .ld-focus-content table th,
.learndash-wrapper .ld-tabs-content table th,
.single-sfwd-topic .wp-block-post-content table th,
.single-sfwd-lessons .wp-block-post-content table th {
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
}

body.learndash-cpt .ld-focus-content table th *,
.single-sfwd-topic .wp-block-post-content table th * {
	color: #ffffff !important;
}

/* Erste Spalte als Zeilenkopf */
body.learndash-cpt .ld-focus-content table td:first-child,
.single-sfwd-topic .wp-block-post-content table td:first-child {
	background-color: var(--wp--preset--color--light-gray) !important;
	color: var(--wp--preset--color--dark) !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

body.learndash-cpt .ld-focus-content table tbody tr:nth-child(even) td:not(:first-child),
.single-sfwd-topic .wp-block-post-content table tbody tr:nth-child(even) td:not(:first-child) {
	background-color: #FAFBFA !important;
}

body.learndash-cpt .ld-focus-content table tbody tr:last-child :is(td, th),
.single-sfwd-topic .wp-block-post-content table tbody tr:last-child :is(td, th) {
	border-bottom: none !important;
}

/* Eingefuegte Schriftgroessen und Familien zuruecksetzen */
body.learndash-cpt .ld-focus-content table :is(p, span, font),
.single-sfwd-topic .wp-block-post-content table :is(p, span, font) {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	margin: 0 !important;
}

/* Tabelle darf bei Ueberbreite scrollen statt die Seite zu sprengen */
body.learndash-cpt .ld-focus-content table {
	display: table;
}

/* -- Leere Flaeche unter der Brotkrumen-Leiste ------ */
/* Auf Themen-Seiten ist der Fortschrittsbereich der Leiste leer und hinterlaesst
   einen leeren grauen Kasten. */

.learndash-wrapper .ld-breadcrumbs .ld-progress:empty,
.learndash-wrapper .ld-breadcrumbs .ld-progress-inline:empty {
	display: none !important;
}

body.learndash-cpt .ld-focus-content .ld-breadcrumbs {
	padding: 0.9rem 1.1rem;
}

/* ==================================================
   Eingefuegte Tabellen - zweiter Anlauf
   ==================================================
   Der erste Versuch hing an .learndash-wrapper als Vorfahr. Im Focus Mode
   liegt der Inhalt aber nicht zwingend darin, also griff nichts. Jetzt haengt
   alles an der Body-Klasse, die WordPress zuverlaessig setzt.
   Zweiter Fehler: Word legt die Farbe haeufig auf die ZEILE (tr), nicht auf
   die Zelle. Die Zelle durchsichtig zu machen liess das Blau der Zeile
   durchscheinen - deshalb wird tr jetzt mit zurueckgesetzt. */

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	font-size: 0.95rem !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 2rem 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) :is(thead, tbody, tfoot, tr) {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) :is(th, td) {
	padding: 0.85rem 1rem !important;
	border: none !important;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray) !important;
	vertical-align: top !important;
	text-align: left !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--text-gray) !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) th,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) thead td {
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: #ffffff !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	vertical-align: middle !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) :is(th, thead td) * {
	color: #ffffff !important;
	background: transparent !important;
}

/* Erste Spalte als Zeilenkopf */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) tbody td:first-child {
	background-color: var(--wp--preset--color--light-gray) !important;
	color: var(--wp--preset--color--dark) !important;
	font-weight: 600 !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) tbody tr:nth-child(even) td:not(:first-child) {
	background-color: #FAFBFA !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) tbody tr:last-child :is(td, th) {
	border-bottom: none !important;
}

/* Mitgebrachte Auszeichnungen in Zellen zuruecksetzen, Fettung erhalten */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) :is(td, th) :is(p, span, font, div) {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	background: transparent !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) td :is(strong, b) {
	color: var(--wp--preset--color--dark) !important;
	font-weight: 600 !important;
}

/* ==================================================
   Focus Mode - Nachtrag nach Sichtung des echten Markups
   ==================================================
   Erkenntnis aus der gespeicherten Seite: .ld-focus-header und
   .ld-focus-sidebar liegen NICHT innerhalb von .learndash-wrapper. Alle
   Regeln mit diesem Prefix liefen ins Leere. Ausserdem laedt
   learndash.min.css nach dieser Datei, gewinnt also bei gleicher
   Spezifitaet - deshalb hier durchgehend !important. */

/* -- Haken am "Als abgeschlossen markieren" -------- */
/* Es ist ein <input type="submit">, kein Button mit Icon-Span. Ein input
   kann keine Pseudo-Elemente haben, das Haekchen kommt als Hintergrundbild.
   Platz dafuer schafft nur Innenabstand. */

body.learndash-cpt .ld-focus-header .learndash_mark_complete_button,
body.learndash-cpt .ld-focus-header input.learndash_mark_complete_button {
	padding: 0.6rem 2.6rem 0.6rem 1.2rem !important;
	background-position: right 1rem center !important;
	background-repeat: no-repeat !important;
	min-height: 44px !important;
	font-size: 0.9rem !important;
	border-radius: 9999px !important;
}

/* -- Kurstitel in der Seitenleiste ---------------- */
/* Steht in .ld-focus-mode-course-heading-wrapper, nicht in einer
   ld-course-navigation-heading. Er scrollte weg und wurde abgeschnitten. */

body.learndash-cpt .ld-focus-sidebar #ld-focus-mode-course-heading,
body.learndash-cpt #ld-focus-mode-course-heading {
	display: block !important;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	padding: 0.2rem 0 !important;
}

body.learndash-cpt .ld-focus-mode-course-heading-wrapper {
	display: block !important;
	min-width: 0 !important;
}

/* -- Kopfleiste ----------------------------------- */

body.learndash-cpt .ld-focus-header {
	background: #ffffff !important;
	border-bottom: 1px solid var(--wp--preset--color--mid-gray) !important;
	height: auto !important;
	min-height: 0 !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	row-gap: 0.6rem !important;
	overflow: visible !important;
}

body.learndash-cpt .ld-focus-header .ld-content-actions {
	border-top: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

body.learndash-cpt .ld-focus-header .ld-progress-heading,
body.learndash-cpt .ld-focus-header .ld-progress-stats,
body.learndash-cpt .ld-focus-header .ld-progress-steps {
	font-size: 0.9rem !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* -- Inhalt als Blatt auf getoentem Grund ---------- */

body.learndash-cpt .ld-focus-content {
	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 2.5rem 2.75rem 3rem !important;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04),
	            0 12px 32px -20px rgba(26, 26, 46, 0.18) !important;
	color: var(--wp--preset--color--text-gray) !important;
	font-size: 1.15rem !important;
	line-height: 1.7 !important;
}

body.learndash-cpt .ld-focus-content :is(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: none;
}

/* Bilder und Videos duerfen die volle Breite nutzen */
body.learndash-cpt .ld-focus-content :is(figure, .wp-block-image, iframe, video) {
	max-width: 100%;
}

body.learndash-cpt .ld-focus-content .wp-block-image img {
	border-radius: 12px;
	display: block;
	height: auto;
}

body.learndash-cpt .ld-focus-content iframe {
	border-radius: 14px;
	display: block;
	border: 0;
}

@media (max-width: 900px) {
	body.learndash-cpt .ld-focus-content {
		padding: 1.5rem 1.25rem 2rem !important;
		border-radius: 12px !important;
	}
}

/* ==================================================
   Focus Mode: Platz fuer die fixierte Kopfleiste
   ==================================================
   Im Browser gemessen: Die Kopfleiste ist position:fixed und 87px hoch, der
   Inhalt begann aber schon bei 64px - er lief zu 55 Pixeln darunter, der
   Seitentitel und der Kurstitel in der Seitenleiste waren abgeschnitten.
   Fixierte Elemente reservieren keinen Platz im Fluss, das muss von Hand
   nachgeholt werden.

   Die Werte sind zweifach gefuehrt, weil die WordPress-Adminleiste die ganze
   Seite um 32px nach unten schiebt: Besucher sehen sie nicht, angemeldete
   Nutzer schon. */

body.learndash-cpt {
	--mfp-kopf: 90px;
}

body.learndash-cpt.admin-bar {
	--mfp-kopf: 122px;
}

body.learndash-cpt .ld-focus {
	padding-top: var(--mfp-kopf) !important;
}

/* Seitenleiste ist fixed - ihr top ist eine Fensterkoordinate, keine
   Fluss-Position, deshalb hier die Adminleiste mitrechnen.

   Dabei muss auch die Hoehe mit, sonst reicht die Leiste unter den
   Fensterrand. LearnDash setzt height: 100vh; zusammen mit unserem
   verschobenen top ergab das eine Leiste, die unten aus dem Bild lief.
   Gemessen am 07.09.2026 auf der Themenseite von Modul 5: Fenster 932px,
   Leiste top 122px und trotzdem 932px hoch, Unterkante also bei 1054.
   Der Scrollbereich endete damit ebenfalls im Unsichtbaren, und der letzte
   Eintrag "Hilfe-Adressen" war auch am Anschlag nicht erreichbar.

   height: auto statt einer gerechneten Hoehe: Bei einem fixierten Element
   mit top UND bottom ergibt sich die Hoehe von selbst. Das kommt ohne
   Arithmetik aus und kann deshalb nicht mit dem Kopf auseinanderlaufen.
   (Eine gerechnete Hoehe wurde hier ausserdem nicht angenommen, auch nicht
   mit !important - der Weg ueber top/bottom greift zuverlaessig.) */
body.learndash-cpt .ld-focus-sidebar {
	top: var(--mfp-kopf) !important;
	bottom: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Der Scrollbereich fuellt jetzt, was zwischen Kurstitel und Unterkante
   uebrig ist. Ohne das behaelt er height: 100% aus LearnDash, rechnet den
   Titel darueber nicht mit und ragt um dessen Hoehe nach unten heraus
   (gemessen 43px). min-height: 0 ist noetig, damit ein Flex-Kind ueberhaupt
   unter seine Inhaltshoehe schrumpfen und scrollen darf. */
body.learndash-cpt .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
}

/* Kurstitel bleibt beim Scrollen der Modulliste stehen */
body.learndash-cpt .ld-course-navigation-heading {
	position: sticky !important;
	top: 0 !important;
	z-index: 5 !important;
}

/* Brotkrumen-Leiste: der wirkte wie ein leerer Kasten unter dem Text */
body.learndash-cpt .ld-breadcrumbs {
	padding: 0.75rem 1.1rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
}

/* Das Statusschild gehoert neben die Krumen, nicht darunter.
   Es stand darunter, weil die Krumen "flex-basis: auto" hatten: Ihre
   Grundbreite ist damit die volle Krumenlaenge, und die passt zusammen mit
   dem Schild nicht in eine Zeile. Flexbox schrumpft in so einem Fall aber
   nicht - es bricht um, und das Schild landet auf einer eigenen Zeile.
   Bei zweizeiligen Krumen wurde der Kasten dadurch dreizeilig.

   Grundbreite 0 statt auto: Jetzt reservieren die Krumen nichts vorab,
   das Schild bekommt seinen Platz, und die Krumen fuellen den Rest.
   Die Mindestbreite von 22rem (352px) ist bewusst groesser als die
   laengste Krume im Kurs (322px, "Praxisaufgabe Lebenszeit sichtbar
   machen") - sonst koennte eine unteilbare Krume seitlich herauslaufen.
   Wird es enger als 352px + Abstand + Schild, rutscht das Schild wieder
   nach unten. Auf dem Telefon ist das richtig so. */
body.learndash-cpt .ld-breadcrumbs .ld-breadcrumbs-segments {
	flex: 1 1 0;
	/* min() deckelt die Mindestbreite am Behaelter. Ohne das laeuft die
	   Leiste auf einem 360px-Telefon 91 px seitlich heraus - gemessen. */
	min-width: min(22rem, 100%);
}

body.learndash-cpt .ld-breadcrumbs .ld-status {
	flex: 0 0 auto;
	margin-left: auto;
}

@media (max-width: 900px) {
	body.learndash-cpt {
		--mfp-kopf: 120px;
	}

	body.learndash-cpt.admin-bar {
		--mfp-kopf: 166px;
	}
}

/* ==================================================
   Grauer Streifen unter den Brotkrumen
   ==================================================
   Im Browser ausgemessen: .ld-topic-status ist der graue Kasten, 84px hoch.
   Darin die Brotkrumen mit 52px - plus 32px Aussenabstand nach unten, den ich
   selbst gesetzt hatte. Der Abstand liegt INNERHALB des grauen Kastens, also
   waechst der Kasten mit und sah aus wie eine leere zweite Zeile.
   Der Fortschrittsbalken darin steht auf display:none, weil LearnDash ihn auf
   Themen-Seiten nicht anzeigt - er war nicht die Ursache.
   Loesung: Abstand nach aussen verlegen. 84px -> 52px. */

body.learndash-cpt .ld-breadcrumbs {
	margin-bottom: 0 !important;
}

/* Nachtrag: Seit die Brotkrumen selbst eine gruene Flaeche haben, wurde der
   graue Grund des Containers als zweiter Streifen darunter sichtbar - der
   Aussenabstand der Brotkrumen liegt ja INNERHALB des Containers. Der
   Container traegt jetzt gar keine Flaeche mehr; sichtbar ist nur noch die
   Leiste selbst, der Abstand sitzt aussen. */
body.learndash-cpt .ld-topic-status,
body.learndash-cpt .ld-lesson-status {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 1.25rem !important;
}

body.learndash-cpt .ld-topic-status .ld-breadcrumbs,
body.learndash-cpt .ld-lesson-status .ld-breadcrumbs {
	margin-bottom: 0 !important;
}

/* ==================================================
   Im Browser gemessen und erprobt
   ================================================== */

/* -- "Als abgeschlossen markieren" ----------------- */
/* Der Haken ist ein ::after auf dem FORMULAR mit Icon-Schrift, absolut
   positioniert - nicht am Knopf. Deshalb liess er sich ueber den Knopf nie
   ansprechen. Der Knopf selbst ist ein <input type="submit">, der Text brach
   auf zwei Zeilen um und der Haken hing daneben in der Luft.
   Eine Zeile, Platz rechts fuer den Haken, Mindesthoehe fuer die Tippflaeche. */

body.learndash-cpt .learndash_mark_complete_button,
body.learndash-cpt input.learndash_mark_complete_button {
	white-space: nowrap !important;
	padding: 0.7rem 3.1rem 0.7rem 1.5rem !important;
	min-height: 44px !important;
	font-size: 0.9rem !important;
	line-height: 1.2 !important;
	border-radius: 9999px !important;
	width: auto !important;
	max-width: none !important;
}

/* -- Brotkrumen vollstaendig zeigen ---------------- */
/* LearnDash schneidet den Pfad per nowrap + ellipsis ab: 563px Platz fuer
   660px Text, also stand da "Modul 1: Das Kinder-Gehirn unter Stro...".
   Der Text ist vollstaendig vorhanden - er darf umbrechen statt zu
   verschwinden. */

body.learndash-cpt .ld-breadcrumbs-segments {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.5 !important;
}

/* -- Seitenleiste: weisse Flaeche ueber dem Kurstitel */
/* .ld-focus-sidebar hatte padding-top: 50px - darueber stand nichts, es sah
   nach vergessenem Abstand aus. Ein kleiner Rest bleibt, damit die Modulliste
   nicht direkt am Titel klebt. */

body.learndash-cpt .ld-focus-sidebar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Der Abstand nach unten gehoert IN den Scrollbereich, nicht an die Leiste.
   Aussen erzeugt er einen weissen Streifen unter der Liste: Der Scrollbereich
   endet dann 32px ueber der Unterkante, ein Eintrag wird mitten im Wort
   abgeschnitten und darunter steht leeres Weiss. Genau das sah nach einem
   Fehler aus. Innen scrollt der letzte Eintrag frei bis zur Unterkante und
   behaelt trotzdem Luft unter sich. */
body.learndash-cpt .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	padding-bottom: 2rem !important;
}

body.learndash-cpt .ld-course-navigation-heading {
	border-radius: 0 !important;
}

body.learndash-cpt .ld-focus-sidebar-wrapper {
	padding-top: 0.75rem;
}

/* Seitenleiste: die weisse Flaeche unter dem Kurstitel.
   Verursacher ist .ld-lesson-navigation aus LearnDash mit margin-top: 3rem
   und padding-top: 2rem - zusammen 80px. Der Aussenabstand faellt durch
   <nav> und .ld-course-navigation-list hindurch (beide ohne Innenabstand
   und Rahmen) und schiebt den ganzen Block nach unten. Am Verursacher
   abgestellt, nicht an den Containern darueber. Der Rahmen oben ist
   ueberfluessig, weil der gruene Titelblock direkt darueber sitzt.
   Gemessen: Luecke 60px -> 12px. */
body.learndash-cpt .learndash-wrapper .ld-lesson-navigation,
body.learndash-cpt .ld-course-navigation .ld-lesson-navigation {
	margin-top: 0 !important;
	padding-top: 0.75rem !important;
	border-top: 0 !important;
}

/* ==================================================
   Portraet
   ==================================================
   Fuer die Vorstellungskarte am Kursanfang. Die Regel weiter oben
   (.ld-focus-content :is(figure, .wp-block-image, ...) { max-width: 100% })
   hat eine hoehere Spezifitaet als eine reine Klassenregel - deshalb hier
   der volle Kontext plus !important, sonst lief das Portraet ueber die
   ganze Inhaltsbreite. Ab 700px steht es links neben dem Text. */

body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet,
.wp-block-post-content .wp-block-image.is-style-mfp-portraet,
.wp-block-image.is-style-mfp-portraet {
	max-width: 180px !important;
	margin: 0.4rem 1.8rem 1.2rem 0;
}

body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet img,
.wp-block-image.is-style-mfp-portraet img {
	border-radius: 14px;
	display: block;
	width: 100%;
	height: auto;
}

body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet figcaption,
.wp-block-image.is-style-mfp-portraet figcaption {
	margin-top: 0.55rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text-gray);
	text-align: left;
}

@media (min-width: 700px) {
	body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet,
	.wp-block-image.is-style-mfp-portraet {
		float: left;
		shape-outside: margin-box;
	}
}

@media (max-width: 699px) {
	body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet,
	.wp-block-image.is-style-mfp-portraet {
		max-width: 140px !important;
		margin: 0 0 1.2rem 0;
	}
}
/* ==================================================
   Gruen bekommt wieder eine Bedeutung
   ==================================================
   Bisher trug Gruen sechs Aufgaben gleichzeitig: Marke, Navigation,
   Fortschritt, Zustand, Betonung und Interaktion. Wenn eine Farbe alles
   auszeichnet, zeichnet sie nichts mehr aus - der Haken "geschafft", der
   Modultitel und der Weiter-Knopf waren gleich laut, obwohl nur einer davon
   eine Handlung ist. Gemessen waren es 13,7 Prozent gruene Volltonflaeche,
   23 gruene Textelemente, 13 gruene Raender.

   Ab hier gilt eine Zuordnung:
     Gruen   = Marke (der Kopf der Seitenleiste) und Zustand (erledigt,
               Fortschritt). Sonst nichts.
     Blau    = alles Anklickbare und die Stelle, an der man gerade steht.
     Neutral = alles, was nur ordnet: Navigationstext, Ueberschriften,
               Aufzaehlungspunkte, Tabellenkoepfe, Mengenangaben.

   Der Kursbereich bleibt erkennbar MediaFitPass: der gruene Leistenkopf,
   die gruenen Haken, der gruene Fortschrittsbalken, das gruene
   Anfuehrungszeichen, die gruene Kante am Merksatz und der gruene
   Praxisaufgaben-Kasten bleiben unangetastet. Gruen wird seltener, damit
   es wieder auffaellt.

   Die Datei laeuft ueber 2000 Zeilen mit !important; die Regeln hier
   muessen deshalb ebenfalls !important tragen, wo sie gegen bestehende
   Regeln oder gegen learndash.min.css antreten. Alle Kontrastwerte sind
   gerechnet und stehen im jeweiligen Kommentar.
   ================================================== */


/* -- Merksatz: Kante statt Flaeche ----------------- */
/* Der groesste Einzelposten: ein einziger Satz belegte 9,6 Prozent des
   Bildschirms mit dunkelgruenem Vollton - mehr als jede andere Flaeche der
   Seite, und das fuer die schwaechste Rolle im System (Betonung). Betonung
   braucht keine Flaeche, sie braucht eine Kante. Aus 9,6 Prozent Vollton
   werden rund 0,3 Prozent.
   Der Kasten bleibt trotzdem der auffaelligste der fuenf: er ist der
   einzige mit Playfair-Kursive und der einzige mit farbiger Kante - er
   unterscheidet sich jetzt durch FORM von Hinweis, Aufgabe, Achtung und
   Hilfe statt durch eine weitere Farbflaeche.
   Nebengewinn fuer Eltern, die abends auf dem Handy lesen: weisse Kursive
   auf sattem Dunkelgruen ist die anstrengendste Kombination der Seite
   (Playfair hat Haarstriche, negativ gesetzt laufen sie zu). */

.is-style-mfp-merksatz {
	/* Text 17.06:1 statt bisher 7.72:1 */
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-left: 5px solid var(--wp--preset--color--primary-dark);
	border-radius: 0 14px 14px 0;
	color: var(--wp--preset--color--dark);
	padding-left: 1.9rem;
}

.is-style-mfp-merksatz::before {
	/* Wortmarke 7.72:1 statt 6.11:1 - sie war der schwaechste Text im Kurs */
	color: var(--wp--preset--color--primary-dark);
}

.is-style-mfp-merksatz strong,
.is-style-mfp-merksatz b {
	color: var(--wp--preset--color--dark);
}

/* Der Hinweis-Kasten ist der mit Abstand haeufigste der fuenf. Seine
   Beschriftung war gruen, ohne dass Gruen dort etwas aussagt - "Hinweis"
   ist keine Handlung und kein Zustand. Gruen bleibt bei der
   Praxisaufgabe, wo es etwas heisst: hier ist etwas zu tun.
   dark auf light-gray = 15.89:1 statt bisher 7.20:1. */
.is-style-mfp-hinweis::before {
	color: var(--wp--preset--color--dark);
}


/* -- Seitenleiste: die Liste ist ein Inhaltsverzeichnis -- */
/* Groesster Posten bei den gruenen Textelementen. Eine Modulliste zeigt
   Reihenfolge und Hierarchie, nicht Markenzugehoerigkeit. Solange jede
   Zeile gruen ist, bleibt keine Farbe uebrig, um den aktuellen Eintrag
   hervorzuheben - und genau der ist die einzige Information, die man in
   der Leiste wirklich sucht.
   Die Datei wollte das schon (die dark-Regel bei den Modul-Zeilen), traf
   aber nicht: die Seitenleiste liegt NICHT in .learndash-wrapper, und
   LearnDash haengt .ld-primary-color an den inneren Link. */

body.learndash-cpt .ld-focus-sidebar :is(
	.ld-primary-color,
	.ld-secondary-color,
	a.ld-primary-color,
	.ld-lesson-title,
	.ld-topic-title,
	.ld-item-title,
	.ld-lesson-item-preview-heading) {
	/* 17.06:1 statt 4.88:1 - auf der hervorgehobenen Zeile waren es sogar
	   nur 4.41:1 und damit unter AA, ausgerechnet beim aktuellen Eintrag */
	color: var(--wp--preset--color--dark) !important;
}

body.learndash-cpt .ld-focus-sidebar .ld-topic-list :is(
	.ld-primary-color,
	a,
	.ld-table-list-item-preview) {
	/* Themen eine Stufe leiser als Module - Hierarchie ueber Helligkeit
	   statt ueber Farbe. 7.46:1 */
	color: var(--wp--preset--color--text-gray) !important;
}

/* Ausserhalb des Focus Mode bleibt LearnDash-Gruen moeglich, aber nicht in
   der schwachen Variante: primary erreicht nur 4.88:1, primary-dark 7.72:1.
   Die Datei begruendet denselben Wechsel weiter oben bei den Knoepfen. */
.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-secondary-color,
.learndash-wrapper a.ld-primary-color {
	color: var(--wp--preset--color--primary-dark) !important;
}

.learndash-wrapper .ld-primary-color-hover:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* "Wo bin ich" ist eine Navigationsaussage, kein Zustand - und sie stand
   bisher in derselben Farbe wie die Haken daneben. In Blau ist die Position
   auf einen Blick von "erledigt" zu unterscheiden. Die Leiste hat danach
   genau drei Toene mit genau drei Bedeutungen: gruener Kopf = Kurs,
   gruene Haken = geschafft, blaue Kante = hier. */
.learndash-wrapper .ld-course-navigation .ld-is-current-item > .ld-table-list-item-preview,
.learndash-wrapper .ld-course-navigation .ld-item-list-item.ld-is-current-item,
body.learndash-cpt .ld-focus-sidebar .ld-is-current-item > .ld-table-list-item-preview,
body.learndash-cpt .ld-focus-sidebar .ld-item-list-item.ld-is-current-item {
	/* Text 15.21:1, Kante 7.00:1 gegen die eigene Flaeche */
	background: #EEF2FB !important;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--dark) !important;
}


/* -- Plaketten: Mengenangaben sind keine Signale --- */
/* "3 Abschnitte" ist eine Beipackangabe und bekam den lautesten Behaelter,
   den das System hat. Und das Abzeichen ABGESCHLOSSEN stand direkt neben
   dem gruenen Haken - dieselbe Information zweimal in derselben Farbe.
   Wenn das Wort neutral wird, bleibt der Haken das eine Signal.
   Der Leistenkopf wird ausgenommen: er ist der Markenanker und bleibt. */

.learndash-wrapper :is(.ld-primary-background, .ld-secondary-background, .ld-status-progress, .ld-status):not(.ld-course-navigation-heading),
.learndash-wrapper .ld-expand-button.ld-primary-background,
body.learndash-cpt .ld-focus-sidebar :is(.ld-status, .ld-primary-background, .ld-secondary-background):not(.ld-course-navigation-heading) {
	/* 15.89:1 statt weiss auf primary 4.88:1 - und das waren winzige
	   Versalien mit Sperrschrift, wo Kontrastreserve am noetigsten ist */
	background-color: var(--wp--preset--color--light-gray) !important;
	background-image: none !important;
	color: var(--wp--preset--color--dark) !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
}

/* Die vorhandene "* { color: inherit }"-Regel traegt die neue Textfarbe
   automatisch mit - ohne die explizite Angabe oben blieben die
   Kindelemente weiss und waeren unsichtbar geworden. */

/* Die Abschnittszaehlung unter den Modultiteln ist gar kein Behaelter,
   sondern eine Angabe. Als Pille stand sie auf derselben Stufe wie der
   Titel, den sie beschreibt - pro Zeile zwei Objekte statt einem. */
body.learndash-cpt .ld-focus-sidebar :is(.ld-item-component, .ld-item-components span) {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--wp--preset--color--text-gray) !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
}


/* -- Zustandssymbole: Gruen bleibt, wird aber leiser -- */
/* "Erledigt" ist die eine Bedeutung, die Gruen sich verdient hat - hier
   bleibt es. Aber ein Dutzend gefuellte Vollton-Scheiben untereinander sind
   ein Dutzend gleich laute Wiederholungen einer Information, die bereits
   vergangen ist. Ein abgeschlossener Abschnitt soll bestaetigen, nicht
   rufen. Aus der Scheibe wird ein Ring: die Farbcodierung bleibt
   vollstaendig, die optische Masse halbiert sich. */

.learndash-wrapper .ld-status-icon.ld-status-complete,
body.learndash-cpt .ld-status-icon.ld-status-complete {
	/* Haken 6.63:1 statt weiss auf primary 4.88:1;
	   Ring 6.63:1 gegen die Fuellung, WCAG 1.4.11 verlangt 3:1 */
	background: #E6F0EA !important;
	border: 2px solid var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--primary-dark) !important;
}

/* Voraussetzung dafuer, dass der Haken leiser werden darf: der offene
   Schritt muss ueberhaupt sichtbar sein. mid-gray erreicht gegen weiss nur
   1.25:1 - der leere Kreis war praktisch nicht vorhanden, und ohne Gegenpol
   ist "noch nicht erledigt" kein Zustand, sondern ein Loch. */
.learndash-wrapper .ld-status-icon.ld-status-incomplete,
body.learndash-cpt .ld-status-icon.ld-status-incomplete {
	/* Ring 3.35:1 gegen weiss statt 1.25:1 */
	border: 2px solid #878E89 !important;
	color: var(--wp--preset--color--text-gray) !important;
}

/* Kein Gruen-Thema, aber im selben Zug gemessen und ein klarer Durchfaller:
   #f59e0b auf #fff8e1 sind 2.02:1 - das Symbol reisst nicht nur die 4.5:1
   fuer Text, sondern auch die 3:1 fuer grafische Objekte. #8A5200 ist keine
   neue Farbe, sondern genau das Braun des Achtung-Kastens. */
.learndash-wrapper .ld-status-icon.ld-status-waiting,
body.learndash-cpt .ld-status-icon.ld-status-waiting {
	/* 5.61:1 statt 2.02:1 */
	background: #FBEFD9 !important;
	border: 2px solid #8A5200 !important;
	color: #8A5200 !important;
}


/* -- Fortschritt: die zweite Bedeutung, die Gruen behaelt -- */
/* Der Balken bleibt gruen. Der Verlauf von Gruen nach Blau muss weg: er
   mischt Markenfarbe und Interaktionsfarbe in einem 8px-Streifen und macht
   beide unscharf - und er sitzt in der fixierten Kopfleiste, also bei jedem
   Scrollen im Bild. Ein Fortschrittsbalken ist eine Mengenangabe; er
   braucht eine Kante, keine Stimmung. */

.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	/* Fuellung 7.20:1 gegen die Schiene, gefordert sind 3:1 */
	background: var(--wp--preset--color--primary-dark) !important;
	background-image: none !important;
}

.learndash-wrapper .ld-progress-percentage,
body.learndash-cpt .ld-focus-header .ld-progress-percentage {
	/* 7.72:1 statt 4.88:1 - die Datei begruendet selbst, dass primary fuer
	   kleinen Text zu schwach ist, und wich hier davon ab */
	color: var(--wp--preset--color--primary-dark) !important;
}


/* -- Knoepfe: Blau sagt "tu etwas" ----------------- */
/* Der Kern der Zuordnung. Solange der Weiter-Knopf dieselbe Farbe hat wie
   der Haken neben dem erledigten Abschnitt, muss man die Bedeutung aus der
   Position erschliessen statt aus der Farbe. Blau ist im Theme ohnehin als
   Link- und Hoverfarbe gesetzt und im Kursbereich bisher praktisch nicht zu
   sehen - es kostet keine neue Farbe, es aktiviert eine vorhandene.
   Nebengewinn: der Knopf ist danach die einzige gefuellte Blauflaeche der
   Seite und dadurch besser auffindbar, obwohl der Bildschirm ruhiger wird.
   Die Regel "nur EINE gefuellte Aktion je Bildschirm" bleibt unberuehrt. */

.learndash-wrapper .ld-button,
.learndash-wrapper button.ld-button,
.learndash-wrapper a.ld-button,
.learndash-wrapper input[type="submit"].ld-button,
body.learndash-cpt .learndash_mark_complete_button,
body.learndash-cpt input.learndash_mark_complete_button {
	/* weiss auf accent 7.85:1 - vorher weiss auf primary-dark 7.72:1,
	   also gleichwertig lesbar */
	background: var(--wp--preset--color--accent) !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(0, 56, 227, 0.20) !important;
}

.learndash-wrapper .ld-button:hover,
.learndash-wrapper button.ld-button:hover,
.learndash-wrapper a.ld-button:hover,
body.learndash-cpt .learndash_mark_complete_button:hover {
	box-shadow: 0 8px 22px rgba(0, 56, 227, 0.28) !important;
}

.learndash-wrapper .ld-button.ld-button-alternate {
	border: 2px solid var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent) !important;
}

.learndash-wrapper .ld-button.ld-button-alternate:hover {
	background: var(--wp--preset--color--accent) !important;
	color: #ffffff !important;
}

/* Der Zurueck-Weg ist ausdruecklich die ruhige Zweitform - dann darf er
   auch nicht in der Markenfarbe beschriftet sein. Die Rueckwaerts-Bewegung
   soll auffindbar sein, nicht beworben. */
body.learndash-cpt .ld-focus-header .ld-content-action:first-child .ld-button,
body.learndash-cpt .ld-focus-header .ld-button.ld-button-transparent,
body.learndash-cpt .ld-focus-header .ld-button-alternate {
	/* 17.06:1 statt 7.72:1 - der Knopf wird sogar lesbarer;
	   sein Rahmen ist das einzige, was ihn als Schaltflaeche ausweist,
	   deshalb 3.35:1 statt der bisherigen 1.25:1 */
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--dark) !important;
	border: 1px solid #878E89 !important;
	box-shadow: none !important;
}

body.learndash-cpt .ld-focus-header .ld-content-action:first-child .ld-button:hover {
	background: var(--wp--preset--color--light-gray) !important;
	border-color: var(--wp--preset--color--dark) !important;
}

body.learndash-cpt .ld-focus-sidebar-trigger,
body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-sidebar-trigger {
	/* Ein Werkzeug, keine Aktion. 7.46:1 */
	color: var(--wp--preset--color--text-gray) !important;
}


/* -- Links und Hover: geschlossen ins Blau --------- */
/* Die Farblogik stand auf dem Kopf: der Ruhezustand war gruen (Marke), der
   Hover blau (Interaktion) - dabei ist ein Link im Ruhezustand schon
   interaktiv. Umgedreht stimmt beides.
   Der zweite Selektorblock ist kein Extra, sondern eine echte Luecke: der
   Focus-Mode-Inhalt liegt nicht in .wp-block-post-content, Links in Modulen
   und Themen erbten bisher gar keine Regel. */

.single-sfwd-topic .wp-block-post-content a:not(.wp-element-button),
.single-sfwd-lessons .wp-block-post-content a:not(.wp-element-button),
.single-sfwd-quiz .wp-block-post-content a:not(.wp-element-button),
body.learndash-cpt .ld-focus-content a:not(.wp-element-button):not(.ld-button):not(.learndash_mark_complete_button) {
	/* 7.85:1 */
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.single-sfwd-topic .wp-block-post-content a:not(.wp-element-button):hover,
.single-sfwd-lessons .wp-block-post-content a:not(.wp-element-button):hover,
.single-sfwd-quiz .wp-block-post-content a:not(.wp-element-button):hover,
body.learndash-cpt .ld-focus-content a:not(.wp-element-button):not(.ld-button):hover {
	/* Hover verdunkelt nur, 17.06:1 */
	color: var(--wp--preset--color--dark);
}

/* Fast alle der gezaehlten gruenen Raender sind Hover- und Aktivzustaende,
   also reine Interaktion. Das ist die guenstigste Stelle des ganzen
   Umbaus: Hover sieht man nur im Moment der Beruehrung, es traegt nichts
   zum Standbild bei - haelt aber das System ehrlich. */
.learndash-wrapper .ld-tabs-navigation .ld-tab:hover,
.learndash-wrapper .ld-tabs-navigation .ld-tab.ld-active,
.learndash-wrapper .ld-item-list-item .ld-item-title:hover,
.learndash-wrapper .ld-expand-button:hover,
.post-type-archive-sfwd-courses .wp-block-post-title a:hover,
.post-type-archive-sfwd-courses .wp-block-post-excerpt__more-link,
.mfp-kurs-rechtszeile a:hover {
	/* 7.85:1 */
	color: var(--wp--preset--color--accent) !important;
}

.learndash-wrapper .ld-tabs-navigation .ld-tab.ld-active {
	border-bottom-color: var(--wp--preset--color--accent) !important;
}

.learndash-wrapper .ld-item-list-item:hover,
.learndash-wrapper .ld-expand-button:hover,
.post-type-archive-sfwd-courses li.wp-block-post:hover {
	border-color: var(--wp--preset--color--accent) !important;
}

/* Ein gruen eingefaerbter Schatten ist Gruen, das man nicht bewusst sieht,
   aber mitzaehlt - er toent den Grund um jede Karte herum. Die neueren
   Stellen der Datei schatten laengst neutral; das ist eine
   Vereinheitlichung, kein Bruch. */
.learndash-wrapper .ld-item-list-item:hover {
	box-shadow: 0 8px 20px rgba(26, 26, 46, 0.08) !important;
}

.post-type-archive-sfwd-courses li.wp-block-post:hover {
	box-shadow: 0 20px 40px rgba(26, 26, 46, 0.12) !important;
}

/* Zwei Marken-Farbverlaeufe bei 4 und 6 Prozent Deckkraft liefern weder
   Kontur noch Bedeutung - nur Farbstich. */
.learndash-wrapper .ld-course-status {
	background: #ffffff !important;
	background-image: none !important;
	box-shadow: 0 4px 16px rgba(26, 26, 46, 0.06);
}

.learndash-wrapper .ld-course-info-bar {
	background: var(--wp--preset--color--light-gray) !important;
	background-image: none !important;
	border: 1px solid var(--wp--preset--color--mid-gray) !important;
}

/* Ein Preis in Gruen liest sich unfreiwillig wie ein Rabattsignal. */
.learndash-wrapper .ld-course-status-price,
.learndash-wrapper .ld-course-status--not-enrolled .ld-course-status-content {
	/* 17.06:1 */
	color: var(--wp--preset--color--dark) !important;
}


/* -- Brotkrumen: Orientierung, kein Angebot -------- */
/* Der Pfad ist die erste Zeile der Inhaltsspalte und stand fett und gruen
   ueber dem Titel - zwei laute Zeilen uebereinander, deren letzte den
   Titel ohnehin wiederholt. Dazu ein harter Kontrastfehler: primary auf dem
   Brotkrumen-Grund #F1F5F2 sind 4.43:1 und damit unter AA, bei fettem Text
   also mit Sicherheit kein Grosstext-Fall.
   Die Anklickbarkeit traegt jetzt die Unterstreichung, nicht die Farbe -
   das ist ohnehin die robustere Codierung (WCAG 1.4.1). */

body.learndash-cpt .ld-breadcrumbs :is(a, .ld-primary-color, .ld-secondary-color),
body.learndash-cpt .ld-breadcrumbs-segments a {
	/* 6.77:1 statt 4.43:1 */
	color: var(--wp--preset--color--primary-dark) !important;
	font-weight: 700 !important;
	/* !important, weil LearnDash die Brotkrumen innerhalb von
	   .wp-block-post-content ausgibt und die Regel fuer Inhaltslinks
	   dort mitgreift - gleiche Spezifitaet, aber weiter hinten. */
	text-decoration: none !important;
}

body.learndash-cpt .ld-breadcrumbs :is(a, .ld-primary-color):hover {
	/* 7.13:1 */
	color: var(--wp--preset--color--accent) !important;
}

/* Der letzte Abschnitt ist der einzige, der Betonung verdient: er
   beantwortet die Frage "wo bin ich". Ueber Gewicht, nicht ueber Farbe. */
body.learndash-cpt .ld-breadcrumbs-segments > :last-child {
	/* 15.21:1 auf dem Brotkrumen-Grund */
	color: var(--wp--preset--color--dark) !important;
	font-weight: 600 !important;
	text-decoration: none;
}


/* -- Lesespalte: Struktur ist neutral -------------- */
/* Aufzaehlungspunkte sind Satzzeichen. Sie strukturieren, sie betonen
   nicht - zwanzig gruene Punkte auf einer Seite sind zwanzig kleine
   Markenbehauptungen ohne Aussage, und bei den langen Listen des
   Elternkurses ergibt das eine gruene Perlenkette am linken Rand.
   Und h2 bis h4 sind ueber Groesse und Gewicht bereits sauber gestuft; die
   Farbe muss die Hierarchie nicht ein zweites Mal erzaehlen - ausgerechnet
   auf der kleinsten Ebene, die am dichtesten am Fliesstext sitzt und dort
   faelschlich nach Verlinkung aussieht. */

.single-sfwd-courses .wp-block-post-content ul li::marker,
.single-sfwd-lessons .wp-block-post-content ul li::marker,
.single-sfwd-topic .wp-block-post-content ul li::marker,
.single-sfwd-quiz .wp-block-post-content ul li::marker,
body.learndash-cpt .ld-focus-content ul li::marker {
	/* 7.46:1 statt 4.88:1 */
	color: var(--wp--preset--color--text-gray);
}

.single-sfwd-courses .wp-block-post-content ol li::marker,
.single-sfwd-lessons .wp-block-post-content ol li::marker,
.single-sfwd-topic .wp-block-post-content ol li::marker,
.single-sfwd-quiz .wp-block-post-content ol li::marker,
body.learndash-cpt .ld-focus-content ol li::marker {
	/* Ziffern sind Text und tragen Information - sie bleiben halbfett,
	   aber neutral. 17.06:1 */
	color: var(--wp--preset--color--dark);
	font-weight: 700;
}

.single-sfwd-topic .wp-block-post-content h4,
.single-sfwd-lessons .wp-block-post-content h4,
.single-sfwd-quiz .wp-block-post-content h4,
body.learndash-cpt .ld-focus-content h4 {
	/* 17.06:1 statt 7.72:1; die Focus-Mode-Fassung fehlte bisher ganz,
	   dieselbe Seite sah in beiden Ansichten verschieden aus */
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1.75rem 0 0.4rem;
	color: var(--wp--preset--color--dark);
}


/* -- Tabellenkoepfe: Struktur, nicht Marke --------- */
/* Ein Tabellenkopf sagt "hier faengt eine Spalte an", nicht "das ist
   MediaFitPass". Der Elternkurs arbeitet viel mit Tabellen - Medienplan,
   Regeln, Altersstufen -, damit ist der dunkelgruene Balken die Flaeche,
   die auf Inhaltsseiten am haeufigsten wiederkehrt; bei zwei Tabellen auf
   einer Seite ist das mehr Gruen als der Leistenkopf. Der Balken bleibt als
   Trennung erhalten, aber ohne Farbaussage: Grundton plus dunkle Unterkante.
   Alle drei Fundstellen der Datei muessen mit, sonst gewinnt die letzte. */

.single-sfwd-courses .wp-block-table th,
.single-sfwd-lessons .wp-block-table th,
.single-sfwd-topic .wp-block-table th,
.single-sfwd-quiz .wp-block-table th,
body.learndash-cpt .ld-focus-content table th,
.learndash-wrapper .ld-tabs-content table th,
.single-sfwd-topic .wp-block-post-content table th,
.single-sfwd-lessons .wp-block-post-content table th,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) th,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) thead td {
	/* 13.60:1 statt weiss auf primary-dark 7.72:1;
	   Unterkante 13.60:1, weit ueber den 3:1 fuer Nicht-Text */
	background-color: var(--wp--preset--color--mid-gray) !important;
	background-image: none !important;
	color: var(--wp--preset--color--dark) !important;
	border-bottom: 2px solid var(--wp--preset--color--dark) !important;
}

body.learndash-cpt .ld-focus-content table th *,
.single-sfwd-topic .wp-block-post-content table th *,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) :is(th, thead td) * {
	color: var(--wp--preset--color--dark) !important;
}


/* -- Was ausdruecklich gruen bleibt ---------------- */
/* Hier steht die Marke, und sie steht nur noch hier gross: eine einzige
   Flaeche, immer an derselben Stelle, auf jeder Kursseite identisch, beim
   Scrollen unveraendert. Genau deshalb funktioniert sie - sie ist die
   Konstante, gegen die alles andere sich abhebt. Ohne sie waeren alle
   Kuerzungen oben unbegruendbar. Die Regel steht hier noch einmal, damit
   die Plaketten-Regel weiter oben sie unter keinen Umstaenden mitnimmt.
   Weiss auf primary-dark = 7.72:1. */

body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading {
	background: var(--wp--preset--color--primary-dark) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 0 !important;
}

body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading a,
body.learndash-cpt .ld-focus-sidebar .ld-course-navigation-heading *,
body.learndash-cpt .ld-focus-sidebar #ld-focus-mode-course-heading,
body.learndash-cpt #ld-focus-mode-course-heading {
	color: #ffffff !important;
}

/* Unveraendert bleiben ausserdem, jeweils mit Absicht:
   - der leicht gruenstichige Grund #EAF0EC und die getoenten Kanten. Rund
     drei Prozent Saettigung lesen sich als Papierton, nicht als Farbe; sie
     tragen die gesamte Flaechentrennung des Focus Mode.
   - das grosse gruene Anfuehrungszeichen am Zitat. Es ist nach diesem
     Umbau die einzige gruene Stelle in der Lesespalte - und wird dadurch
     wieder zum Erkennungszeichen statt zum Grundrauschen.
   - der pastellgruene Praxisaufgaben-Kasten. Gruen sagt dort etwas: hier
     ist etwas zu tun.
   - der Fokusrahmen in dark mit weissem Hof. Er ist bewusst NICHT blau:
     auf dem gruenen Leistenkopf erreicht Blau nur 1.02:1. Die Umstellung
     der Knoepfe auf Blau darf nicht dazu verleiten, ihn mitzuziehen.
   - die Abfangregel gegen Olivgruen als Textfarbe. #899664 erreicht 3.18:1
     und faellt durch; Olivgruen kommt hier auch als Flaeche nicht vor. */


/* -- Kontrastmodus nachziehen ---------------------- */
/* Der forced-colors-Block steht weiter oben in der Datei und ohne
   !important - die Merksatz-Regeln von hier wuerden ihn sonst schlagen und
   den Kasten im Windows-Kontrastmodus wieder verschwinden lassen. */

@media (forced-colors: active) {
	.is-style-mfp-merksatz {
		background: Canvas !important;
		border: 1px solid CanvasText !important;
		color: CanvasText !important;
	}

	.is-style-mfp-merksatz::before,
	.is-style-mfp-merksatz strong,
	.is-style-mfp-merksatz b,
	.is-style-mfp-hinweis::before {
		color: CanvasText !important;
	}
}

/* ==================================================
   Brotkrumenleiste und Statusabzeichen
   ==================================================
   Florian wollte die gruene Fassung zurueck. Beides deshalb wieder farbig,
   aber im dunkleren Gruen (primary-dark) statt im hellen: Das sieht
   praktisch gleich aus und bringt den Kontrast von 4.43:1 auf 6.68:1 -
   die Brotkrumen sind kleine, fette Versalien, da ist Reserve noetig.
   Weiss auf primary-dark im Abzeichen: 7.72:1. */

body.learndash-cpt .ld-breadcrumbs {
	background: #EAF0EC !important;
	border: 1px solid #C6D0C8 !important;
	border-radius: 12px !important;
}

body.learndash-cpt .learndash-wrapper .ld-status,
body.learndash-cpt .learndash-wrapper .ld-status.ld-status-progress,
body.learndash-cpt .learndash-wrapper .ld-status.ld-status-complete,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete,
body.learndash-cpt .ld-focus-sidebar .ld-status {
	background-color: var(--wp--preset--color--primary-dark) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 0 !important;
}

body.learndash-cpt .learndash-wrapper .ld-status *,
body.learndash-cpt .learndash-wrapper .ld-status.ld-status-progress * {
	color: #ffffff !important;
}

/* ==================================================
   Knoepfe: die fehlende Unterkante
   ==================================================
   learndash.min.css setzt border-bottom-style: none !important auf einem
   Selektor mit mehreren :not()-Gliedern und damit hoeherer Spezifitaet als
   die Rahmenregel weiter oben. Ergebnis: Rahmen oben, links und rechts,
   unten offen - die Pille sah abgeschnitten aus. Hier mit genug
   Spezifitaet und allen vier Seiten einzeln. */

body.learndash-cpt .learndash-wrapper .ld-focus-header .ld-content-actions a.ld-button,
body.learndash-cpt .learndash-wrapper .ld-focus-header .ld-content-actions a.ld-button.ld-button-transparent,
body.learndash-cpt .learndash-wrapper .ld-focus-content a.ld-button.ld-button-transparent {
	border-style: solid !important;
	border-color: #878E89 !important;
	border-top-width: 1px !important;
	border-right-width: 1px !important;
	border-bottom-width: 1px !important;
	border-left-width: 1px !important;
}

/* ==================================================
   Lesbarkeit: Zeilenlaenge, Durchschuss, Leerband
   ==================================================
   Im Browser gemessen: 105 Zeichen pro Zeile bei einem Durchschuss von 1,50.
   Empfohlen sind 45 bis 75 Zeichen; jenseits von etwa 90 verliert das Auge
   beim Zeilensprung die Spur, und der Text wirkt als Wand - genau der
   Eindruck von "zu kahl", obwohl die Seite drei Zwischenueberschriften,
   sechs Absaetze, zwei Listen und ein Zitat hat.

   Drei Stellschrauben statt Dekoration:
     1. Fliesstext auf 90 Zeichen - immer noch deutlich breiter als die
        65 Zeichen von vorher, aber wieder greifbar. Tabellen, Bilder und
        Videos behalten die volle Breite, weil sie davon leben.
     2. Durchschuss von 1,50 auf 1,70. Lange Zeilen brauchen mehr Luft
        zwischen den Zeilen, nicht weniger.
     3. Das Leerband zwischen Brotkrumen und erstem Absatz von 96px auf
        etwa die Haelfte. */

body.learndash-cpt .ld-focus-content :is(h1, p, ul, ol, h2, h3, h4, h5, blockquote),
body.learndash-cpt .ld-focus-content .ld-breadcrumbs,
body.learndash-cpt .ld-focus-content .is-style-mfp-hinweis,
body.learndash-cpt .ld-focus-content .is-style-mfp-aufgabe,
body.learndash-cpt .ld-focus-content .is-style-mfp-achtung,
body.learndash-cpt .ld-focus-content .is-style-mfp-hilfe,
body.learndash-cpt .ld-focus-content .is-style-mfp-merksatz {
	/* Keine Begrenzung mehr am Text: Die Zeilenlaenge wird jetzt ueber
	   die Breite der weissen Karte geregelt, nicht ueber eine Spalte
	   darin. Sonst blieb rechts in der Karte ein leerer Streifen und
	   die Brotkrumenleiste war abgeschnitten. */
	max-width: none;
}

body.learndash-cpt .ld-focus-content :is(figure, .wp-block-table, .wp-block-image, iframe, video) {
	max-width: 100%;
}

body.learndash-cpt .ld-focus-content :is(p, ul, ol) {
	line-height: 1.7;
}

body.learndash-cpt .ld-breadcrumbs {
	margin-bottom: 1.25rem !important;
}

/* Das Leerband zwischen Brotkrumen und erstem Absatz war 96px hoch und
   setzte sich aus vier Abstaenden zusammen: Brotkrumen 20px, .ld-tabs 18px,
   .ld-tabs-content 32px und der erste Block noch einmal 32px. Der erste
   Block liegt in .ld-tab-content, nicht direkt in .ld-tabs-content - dort
   hatte meine erste Fassung danebengegriffen. */

body.learndash-cpt .ld-focus-content .ld-tabs {
	margin-top: 0.5rem !important;
}

body.learndash-cpt .ld-focus-content .ld-tabs-content {
	padding-top: 1rem !important;
}

body.learndash-cpt .ld-focus-content .ld-tab-content > :first-child,
body.learndash-cpt .ld-focus-content .wp-block-post-content > :first-child,
body.learndash-cpt .ld-focus-content .ld-tabs-content > :first-child {
	margin-top: 0 !important;
}


/* ==================================================
   Zeichen fuer die fuenf Kastenarten
   ==================================================
   Die Art stand bisher nur als Wort darin. Das muss man lesen; ein Zeichen
   erkennt man beim Scrollen. Das Wort bleibt trotzdem stehen - es ist die
   Absicherung fuer Bildschirmleser und den Windows-Kontrastmodus
   (WCAG 1.4.1), das Zeichen ist die Beschleunigung fuer alle anderen.

   Umgesetzt als Maske, nicht als Bild: So nimmt das Zeichen die Schriftfarbe
   des jeweiligen Kastens an und passt sich jeder spaeteren Farbaenderung von
   allein an. Die Zeichnungen stecken als Datenadresse im Blatt - kein
   Symbolschrift-Plugin, keine zusaetzliche Anfrage ans Netz. */

.is-style-mfp-hinweis::before,
.is-style-mfp-aufgabe::before,
.is-style-mfp-achtung::before,
.is-style-mfp-hilfe::before,
.is-style-mfp-beispiel::before,
.is-style-mfp-merksatz::before {
	padding-left: 1.65rem;
}

.is-style-mfp-hinweis::after,
.is-style-mfp-aufgabe::after,
.is-style-mfp-achtung::after,
.is-style-mfp-hilfe::after,
.is-style-mfp-beispiel::after,
.is-style-mfp-merksatz::after {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: 1.6rem;
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.is-style-mfp-hinweis::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='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%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='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
}

.is-style-mfp-aufgabe::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='M9 3.5h6v3H9z'/%3E%3Cpath d='M9 5h-2.5A1.5 1.5 0 0 0 5 6.5v13A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 17.5 5H15'/%3E%3Cpath d='m9 13.6 2 2 4-4'/%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='M9 3.5h6v3H9z'/%3E%3Cpath d='M9 5h-2.5A1.5 1.5 0 0 0 5 6.5v13A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 17.5 5H15'/%3E%3Cpath d='m9 13.6 2 2 4-4'/%3E%3C/svg%3E");
}

.is-style-mfp-achtung::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 4.2 2.6 20.4h18.8z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.4h.01'/%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 4.2 2.6 20.4h18.8z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
}

.is-style-mfp-hilfe::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='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='m5.6 5.6 3.85 3.85'/%3E%3Cpath d='m14.55 14.55 3.85 3.85'/%3E%3Cpath d='m18.4 5.6-3.85 3.85'/%3E%3Cpath d='M9.45 14.55 5.6 18.4'/%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='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='m5.6 5.6 3.85 3.85'/%3E%3Cpath d='m14.55 14.55 3.85 3.85'/%3E%3Cpath d='m18.4 5.6-3.85 3.85'/%3E%3Cpath d='M9.45 14.55 5.6 18.4'/%3E%3C/svg%3E");
}

.is-style-mfp-merksatz::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='M6.5 3.5h11v17l-5.5-4.2-5.5 4.2z'/%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='M6.5 3.5h11v17l-5.5-4.2-5.5 4.2z'/%3E%3C/svg%3E");
}

/* Der Merksatz hat eine dickere linke Kante, das Zeichen rueckt mit. */
.is-style-mfp-merksatz::after {
	left: 1.9rem;
}

@media (max-width: 600px) {
	.is-style-mfp-hinweis::after,
	.is-style-mfp-aufgabe::after,
	.is-style-mfp-achtung::after,
	.is-style-mfp-hilfe::after,
	.is-style-mfp-merksatz::after {
		left: 1.1rem;
	}
}

/* ==================================================
   Kastentyp "Beispiel"
   ==================================================
   Fuer Mustertexte - den VGZ-Brief, spaeter auch Musterregeln und
   Beispielsaetze. Bisher standen solche Vorlagen als normale Absaetze im
   Erklaertext, und der Leser konnte nicht unterscheiden, was Anweisung ist
   und was Vorlage.

   Warmer Papierton statt einer weiteren Farbe aus der Palette: Ein Beispiel
   ist kein Hinweis und keine Aufgabe, sondern ein Blatt, das jemand
   danebengelegt hat. Text auf dem Grund: 14.2:1. */

.is-style-mfp-beispiel {
	background: #FBF8F1;
	border-color: #E4DAC6;
}

.is-style-mfp-beispiel::before {
	content: "Beispiel";
	color: #6B5424;
}

.is-style-mfp-beispiel::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'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%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'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

/* Mustertexte lesen sich besser mit etwas Luft und leicht eingerueckt -
   sie sollen wie ein zitiertes Blatt wirken, nicht wie Fliesstext. */
.is-style-mfp-beispiel p {
	margin: 0 0 0.9rem 0;
}

.is-style-mfp-beispiel p:last-child {
	margin-bottom: 0;
}

/* ==================================================
   Die Karte bestimmt die Zeilenlaenge, nicht eine Spalte darin
   ==================================================
   Erst hatte ich den Fliesstext innerhalb der weissen Karte begrenzt. Das
   war lesbar, sah aber falsch aus: rechts blieb ein leerer Streifen stehen,
   und die Brotkrumenleiste endete mitten in der Karte statt an ihrem Rand.

   Jetzt andersherum - die Karte wird schmaler, der Inhalt fuellt sie
   randlos. Gemessen: 1000px Karte minus 2x44px Innenabstand ergibt 912px
   Textbreite und damit rund 88 Zeichen je Zeile. Derselbe Lesewert wie
   vorher, aber ohne den abgeschnittenen Eindruck. */

body.learndash-cpt .ld-focus-content {
	max-width: 1000px !important;
}


/* ==================================================
   Erfolgshinweis: einmal reicht
   ==================================================
   Nach dem Abhaken standen zwei gruene Balken uebereinander, beide mit
   einer Pille rechts: der Erfolgshinweis von LearnDash und darunter die
   Brotkrumenleiste mit dem Abzeichen ABGESCHLOSSEN. Zweimal dieselbe
   Nachricht, und zusammen mehr Flaeche als der Inhalt darunter.

   Der Hinweis bleibt - er ist die Rueckmeldung auf eine Handlung. Aber als
   ruhiger Streifen ohne Rahmen. Und das Abzeichen verschwindet, solange er
   steht: Was der Satz schon sagt, muss die Pille nicht wiederholen. */

body.learndash-cpt .learndash-wrapper .ld-alert-success,
body.learndash-cpt .learndash-wrapper .ld-alert.ld-alert-success {
	background: #EAF0EC !important;
	border: 0 !important;
	border-left: 4px solid var(--wp--preset--color--primary-dark) !important;
	border-radius: 10px !important;
	padding: 0.9rem 1.2rem !important;
	margin-bottom: 1rem !important;
}

/* Das Symbol braucht eine feste Flaeche. Mit width/height auto fiel die Box
   auf null zusammen, das Symbol lag ueber dem ersten Buchstaben ("Gut"
   wurde zu "?ut", Florian 29.09.2026). */
body.learndash-cpt .learndash-wrapper .ld-alert-success .ld-alert-icon {
	background: transparent !important;
	color: var(--wp--preset--color--primary-dark) !important;
	position: relative !important;
	flex: 0 0 1.6rem !important;
	width: 1.6rem !important;
	height: 1.6rem !important;
	min-width: 1.6rem !important;
	padding: 0 !important;
	margin-right: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Symbol und Satz in einer Zeile. Der Satz nahm die volle Breite und
   rutschte deshalb unter das Symbol, sobald dieses Platz bekam
   (Florian 29.09.2026, zweites Bild). */
body.learndash-cpt .learndash-wrapper .ld-alert-success .ld-alert-content {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
	flex: 1 1 auto;
	min-width: 0;
}

body.learndash-cpt .learndash-wrapper .ld-alert-success .ld-alert-messages {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* Solange der Erfolgshinweis steht, sagt das Abzeichen nichts Neues. */
body.learndash-cpt .learndash-wrapper .ld-alert-success ~ * .ld-status,
body.learndash-cpt .learndash-wrapper .ld-alert-success ~ .ld-topic-status .ld-status,
body.learndash-cpt .learndash-wrapper .ld-alert-success ~ .ld-lesson-status .ld-status {
	display: none !important;
}

/* ==================================================
   Kaesten umfliessen kein Bild
   ==================================================
   Das Portrait auf der Vorstellungskarte wird links umflossen. Der
   Achtung-Kasten lief dadurch neben dem Bild hoch und schnitt es an - ein
   Kasten ist eine eigenstaendige Aussage, kein Fliesstext. Dasselbe gilt
   fuer Ueberschriften, Tabellen und Zitate: Sie beginnen unter dem Bild. */

body.learndash-cpt .ld-focus-content .is-style-mfp-hinweis,
body.learndash-cpt .ld-focus-content .is-style-mfp-aufgabe,
body.learndash-cpt .ld-focus-content .is-style-mfp-achtung,
body.learndash-cpt .ld-focus-content .is-style-mfp-hilfe,
body.learndash-cpt .ld-focus-content .is-style-mfp-beispiel,
body.learndash-cpt .ld-focus-content .is-style-mfp-merksatz,
body.learndash-cpt .ld-focus-content :is(h2, h3),
body.learndash-cpt .ld-focus-content .wp-block-table,
body.learndash-cpt .ld-focus-content blockquote {
	clear: both;
}

/* ==================================================
   Der gruene Grund traegt bis unten
   ==================================================
   Unterhalb der weissen Karte ging die Seite in Weiss ueber - Karte und
   Grund waren nicht mehr zu unterscheiden, die Karte "verlief". Der gruene
   Papierton laeuft jetzt bis zum Seitenende durch und bekommt unter der
   Karte etwas mehr Luft, damit sie als Blatt darauf liegt. */

body.learndash-cpt,
body.learndash-cpt .learndash-wrapper,
body.learndash-cpt .ld-focus,
body.learndash-cpt .ld-focus-main {
	background-color: #EAF0EC;
}

body.learndash-cpt .ld-focus-main {
	padding-bottom: 3.5rem;
}

/* Luft zwischen Kopfleiste und Karte (Florian, 29.09.2026: "da muss noch
   etwas Platz dazwischen"). LearnDash setzt die Karte bundig unter die
   feste Kopfleiste (margin: 0 auto). Selektor so spezifisch wie der von
   LearnDash plus body, damit nur margin-top ueberschrieben wird. */
body.learndash-cpt .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	margin-top: 2rem;
}

@media (max-width: 900px) {
	body.learndash-cpt .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
		margin-top: 1rem;
	}
}

body.learndash-cpt .ld-focus-content {
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04),
			0 18px 40px -28px rgba(26, 26, 46, 0.22);
}

/* ==================================================
   Brotkrumen brechen zwischen den Gliedern, nicht im Titel
   ==================================================
   Vorher brach der Pfad mitten im Kartentitel um. Mein erster Versuch
   erzwang einen festen Umbruch nach dem Kursnamen - das war zu viel: Wo
   alles in eine Zeile passt, soll es auch in einer stehen.

   display:inline-block macht jedes Glied zu einer eigenen Einheit. Passt
   der Pfad in eine Zeile, bleibt er einzeilig. Wird er zu lang, rutscht
   ein ganzes Glied in die naechste Zeile statt mitten im Titel zu
   brechen. Nur wenn ein einzelnes Glied allein schon breiter ist als die
   Leiste, bricht es innerhalb - als letzter Ausweg richtig so.

   Bewusst ohne Flexbox: Die Leiste ist selbst ein Flex-Container mit dem
   Statusabzeichen daneben, ein zweiter Flex-Kontext darin waere nur
   zerbrechlich. */

body.learndash-cpt .ld-breadcrumbs-segments > li {
	display: inline-block;
	vertical-align: baseline;
}

/* ==================================================
   Zweitrangiger Knopf: Umriss statt Flaeche
   ==================================================
   Der Verweis auf die Einzelberatung stand als gefuellter gruener Block
   mitten im Text - direkt ueber dem Merksatz und wenige Zeilen ueber den
   drei gruenen Knoepfen der Navigation. Vier gruene Flaechen auf einem
   Bildschirm, und die kleinste davon war ein Angebot, kein Weg durch den
   Kurs.

   Als Umriss ist er weiter deutlich als Knopf erkennbar, tritt aber hinter
   die Navigation zurueck und nimmt gruene Flaeche weg, statt sie
   hinzuzufuegen. Beim Ueberfahren fuellt er sich - dann ist er
   kurzzeitig der lauteste Punkt der Seite, aber nur unter dem Zeiger.

   Kontraste: Schrift und Kontur primary-dark auf Weiss 7.72:1, gefuellt
   Weiss auf primary-dark ebenfalls 7.72:1. Beides deutlich ueber den
   4.5:1 fuer Text und 3:1 fuer Bedienelement-Umrisse. */

/* Die fuenffach wiederholte Klasse ist kein Versehen. learndash.min.css
   setzt border-bottom-style: none !important auf einem Selektor mit
   Spezifitaet 0,9,1 (mehrere :not()-Glieder). Meine Regel kam auf 0,5,1
   und verlor trotz !important - die Pille hatte oben, links und rechts
   einen Rahmen und unten keinen. Jede Wiederholung derselben Klasse
   hebt die Spezifitaet, ohne die Treffermenge zu aendern. Im Browser
   nachgemessen: 2px auf allen vier Seiten. */
body.learndash-cpt .learndash-wrapper .ld-focus-content .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--primary-dark) !important;
	/* Alle vier Seiten einzeln: learndash.min.css setzt
	   border-bottom-style: none !important auf einem Selektor mit
	   mehreren :not()-Gliedern und schlaegt damit die Kurzschreibweise
	   border. Ergebnis war eine Pille ohne Unterkante - oben, links und
	   rechts 2px, unten nichts. Genau der Fehler, den die Knoepfe
	   Zurueck und Weiter schon hatten. */
	border-style: solid !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
	border-top-width: 2px !important;
	border-right-width: 2px !important;
	border-bottom-width: 2px !important;
	border-left-width: 2px !important;
	border-radius: 9999px !important;
	padding: 0.7rem 1.6rem !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

body.learndash-cpt .learndash-wrapper .ld-focus-content .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:hover,
body.learndash-cpt .learndash-wrapper .ld-focus-content .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:focus-visible,
.wp-block-buttons .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary-dark) !important;
	background-color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
	color: #ffffff !important;
}

/* Etwas Luft nach oben - er steht im Text, nicht in einer Knopfleiste. */
body.learndash-cpt .ld-focus-content .wp-block-buttons:has(.is-style-mfp-umriss) {
	margin: 1.6rem 0 2rem;
}

/* ==================================================
   PDF-Knopf, solange die Datei fehlt
   ==================================================
   Florian will die Knoepfe schon sehen, um den Ueberblick zu haben - die
   Dateien kommen spaeter. Ein Knopf ohne Ziel darf aber nicht aussehen wie
   einer, der funktioniert: Wer darauf klickt und nichts passiert, haelt die
   Seite fuer kaputt.

   Deshalb gestrichelte Kante, gedaempfte Schrift, kein Fuellen beim
   Ueberfahren und der Zeiger bleibt der normale. Das Wort "(folgt)" steht
   ausserdem in der Beschriftung selbst - sichtbar auch fuer Bildschirmleser
   und im Kontrastmodus, wo die gestrichelte Kante verschwindet.

   Sobald eine Datei da ist: href eintragen, "(folgt)" streichen und die
   Klasse mfp-wartet entfernen. Dann greift der normale Umriss-Stil.
   text-gray auf Weiss 7.46:1, Kante 3.35:1. */

.wp-block-button.mfp-wartet.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link,
body.learndash-cpt .learndash-wrapper .ld-focus-content .wp-block-button.mfp-wartet.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link {
	border-style: dashed !important;
	border-color: #7E857F !important;
	color: var(--wp--preset--color--text-gray) !important;
	background: transparent !important;
	background-color: transparent !important;
	cursor: default !important;
}

/* Kein Fuellen beim Ueberfahren - er tut ja nichts. */
.wp-block-button.mfp-wartet.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:hover,
body.learndash-cpt .learndash-wrapper .ld-focus-content .wp-block-button.mfp-wartet.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss.is-style-mfp-umriss a.wp-block-button__link:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--text-gray) !important;
	border-color: #7E857F !important;
}

/* ==================================================
   Brotkrumen: der Umbruch gehoert hinter den Modulnamen
   ==================================================
   Passte die Leiste nicht auf eine Zeile, brach sie mitten im letzten
   Titel um - "Was Sie Ihrem Kind ueber diesen Kurs / sagen". Das liest
   sich wie ein Fehler.

   Jeder Abschnitt ist jetzt in sich unteilbar. Umbrechen kann die Leiste
   damit nur noch zwischen den Abschnitten, und weil das Trennzeichen als
   ::after am vorangehenden Abschnitt haengt, bleibt es in der ersten
   Zeile stehen. Die zweite Zeile beginnt mit dem vollstaendigen Titel.

   Nur oberhalb von 800 px. Der laengste Abschnitt im Kurs ist
   "Praxisaufgabe „Lebenszeit sichtbar machen“" mit 322 px (im Browser
   gemessen; die Breite haengt nicht am Fenster, die Schriftgroesse ist
   fest). Bei 800 px Fensterbreite bleiben der Leiste auch mit
   Seitenleiste rund 500 px - das passt mit Reserve. Darunter koennte ein
   unteilbarer Abschnitt seitlich herauslaufen, deshalb bricht die Leiste
   auf dem Telefon wie bisher an jeder Wortgrenze. Dort steht sie ohnehin
   dreizeilig, und die Regel aendert unterhalb der Schwelle nichts. */

@media (min-width: 800px) {
	body.learndash-cpt .ld-breadcrumbs-segments > li {
		white-space: nowrap;
	}
}

/* ==================================================
   Vorstellungskarte: zwei Spalten statt Textumfluss
   ==================================================
   Das Portraet stand als float im Text. Das sah unfertig aus, und zwar
   aus zwei Gruenden.

   Erstens die Bildunterschrift: In 180 px brach sie auf vier ungleiche
   Zeilen um und zerriss dabei "OFFLINE HELDEN". Ein Eigenname, der ueber
   zwei Zeilen laeuft, faellt sofort auf.

   Zweitens der letzte Absatz. Er ist kurz, und weil der Umfluss genau
   dort endete, stand er als einzelne Zeile rechts neben einer leeren
   Flaeche - als waere etwas verrutscht.

   Zwei feste Spalten loesen beides. Der Text laeuft nie unter das Bild,
   die Kante links ist auf jeder Zeile dieselbe, und was danach kommt -
   der Achtung-Kasten - beginnt sauber wieder bei voller Breite. */

body.learndash-cpt .ld-focus-content .mfp-vorstellung,
.wp-block-post-content .mfp-vorstellung,
.mfp-vorstellung {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	column-gap: 2.4rem;
	align-items: start;
	margin: 0 0 1.6rem;
}

/* Der Umfluss aus dem allgemeinen Portraet-Stil muss hier weg. */
body.learndash-cpt .ld-focus-content .mfp-vorstellung > .wp-block-image,
.mfp-vorstellung > .wp-block-image {
	float: none !important;
	margin: 0 !important;
	max-width: 200px !important;
}

/* Absatzabstand in der Textspalte.
   WordPress macht aus der inneren Gruppe ein Fluss-Layout und setzt dabei
   alle Aussenabstaende der Kinder auf null - ersetzt werden sie durch
   --wp--style--block-gap, und die steht in diesem Theme auf 0. Ohne diese
   Regel klebten die drei Absaetze aneinander. 1,15rem sind die 18,4 px,
   die ein Absatz im uebrigen Kurs auch bekommt; nachgemessen, nicht
   geschaetzt. */
.mfp-vorstellung .mfp-vorstellung-text > * + * {
	margin-top: 1.15rem;
}

/* Bild und erste Textzeile beginnen auf derselben Hoehe. */
.mfp-vorstellung .mfp-vorstellung-text > :first-child {
	margin-top: 0;
}

.mfp-vorstellung .mfp-vorstellung-text > :last-child {
	margin-bottom: 0;
}

/* Ausgeglichener Zeilenfall in der Bildunterschrift - vier Zeilen mit
   einem Wort in der letzten sehen nach Versehen aus. */
body.learndash-cpt .ld-focus-content .wp-block-image.is-style-mfp-portraet figcaption,
.wp-block-image.is-style-mfp-portraet figcaption {
	text-wrap: balance;
}

@media (max-width: 699px) {
	/* Dieselbe Selektorenkette wie oben, sonst greift die Regel nicht.
		Ein Media-Query erhoeht die Spezifitaet nicht: Die Desktop-Regel
		steht auf 0,3,2, ein blosses .mfp-vorstellung auf 0,1,0 - und
		verliert damit auch innerhalb des Media-Query. Gemessen war die
		Folge, dass die Spalten auf dem Telefon nicht stapelten: bei
		360 px blieb die Textspalte 42 px breit und die Seite lief
		79 px seitlich ueber. */
	body.learndash-cpt .ld-focus-content .mfp-vorstellung,
	.wp-block-post-content .mfp-vorstellung,
	.mfp-vorstellung {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.1rem;
	}

	body.learndash-cpt .ld-focus-content .mfp-vorstellung > .wp-block-image,
	.mfp-vorstellung > .wp-block-image {
		max-width: 150px !important;
	}
}

/* ==================================================
   Ganzes Modul abhaken (functions.php, mediafitpass_modul_abhaken_knopf)
   ==================================================
   Umrissknopf unter der Kartenliste des Moduls: eine Aktion, keine
   Navigation, deshalb nicht gefuellt (Knopfstile im Kursbereich). */

body.learndash-cpt .mfp-modul-abhaken {
	margin: 2rem 0 0.5rem;
	display: flex;
	justify-content: center;
}

body.learndash-cpt .mfp-modul-abhaken__knopf {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	padding: 0.7rem 1.4rem;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.learndash-cpt .mfp-modul-abhaken__knopf:hover,
body.learndash-cpt .mfp-modul-abhaken__knopf:focus-visible {
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--accent, #0038E3);
	border-color: var(--wp--preset--color--accent, #0038E3);
}

/* "Weiter" neben "Als abgeschlossen markieren" nur in der Kopfleiste
   (functions.php, mediafitpass_weiter_neben_abhaken). Unten
   zeigt LearnDash ein eigenes Weiter (mediafitpass_weiter_ohne_abhaken). */
body.learndash-cpt .mfp-weiter-kopf {
	display: none !important;
}

body.learndash-cpt .ld-focus-header .mfp-weiter-kopf {
	display: inline-flex !important;
	align-items: center;
	margin-left: 0.75rem;
}

/* Eigener Knopf "Als abgeschlossen markieren" unter der letzten Karte
   (functions.php, mediafitpass_letzte_karte_knopf) */
body.learndash-cpt .mfp-letzte-karte {
	display: flex;
	justify-content: center;
	margin: 2.5rem 0 0.5rem;
}

/* Hinweis ueber einem der beiden Knoepfe, wenn das Abhaken nicht
   gespeichert wurde (functions.php, mediafitpass_abhaken_hinweis_html).
   Farben wie der Kasten "Achtung". Die Adresse springt per #-Anker hierher,
   der Abstand oben haelt ihn unter der fixierten Kopfleiste. */
body.learndash-cpt .mfp-abhaken-hinweis {
	max-width: 36rem;
	margin: 2rem auto 0;
	padding: 0.9rem 1.2rem;
	background: #FCF6EC;
	border: 1px solid #EBD9BC;
	border-radius: 14px;
	color: var(--wp--preset--color--dark);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: center;
	scroll-margin-top: 8rem;
}

/* ==================================================
   Kursuebersichten: Kurskopf, Fortschritt, "Meine Kurse"
   ==================================================
   Florian, 29.09.2026: Nach dem Login eine Uebersicht aller Kurse, ein
   Klick fuehrt auf die Kursseite, und die Kursseite selbst ohne doppelte
   Modulliste. Kopf und Karten kommen aus functions.php
   ([mfp_kurs_kopf], [mfp_meine_kurse]). */

/* -- Kurskopf ----------------------------------------
   Dritte Fassung (Florian, 29.09.2026: "kannst du das optisch noch
   verbessern"). Der helle Verlauf begann fast im Ton des Papiergrunds der
   Kursseiten (#EAF0EC) und verschwand darin, das Symbol war klein, rechts
   blieb die Haelfte leer. Jetzt eine gruene Flaeche mit weisser Schrift und
   rechts eine weisse Karte mit dem Fortschritt (Nicht-Eingeschriebene: das
   Kurssymbol gross). Weiss auf primary-dark 7.72:1. */

.mfp-kurskopf {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem 2.5rem;
	margin: 0 0 2.25rem;
	padding: clamp(1.75rem, 4.5vw, 3.25rem);
	border-radius: 28px;
	color: #ffffff;
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(46, 168, 102, 0.45) 0%, rgba(46, 168, 102, 0) 70%),
		linear-gradient(135deg, #154A33 0%, var(--wp--preset--color--primary-dark) 45%, var(--wp--preset--color--primary) 100%);
	box-shadow: 0 30px 60px -42px rgba(21, 74, 51, 0.8);
}

/* Feine Ringe als ruhige Zeichnung oben rechts */
.mfp-kurskopf::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -230px;
	right: -150px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.035), 0 0 0 140px rgba(255, 255, 255, 0.025);
	pointer-events: none;
}

.mfp-kurskopf__marke {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.1rem;
}

/* Die Bilddateien der Symbole haben viel weissen Rand, das Motiv fuellt
   knapp die Haelfte der Breite. Groesser gesetzt und im Kreis beschnitten
   fuellt es ihn. */
.mfp-kurskopf__icon {
	position: relative;
	flex: none;
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
}

.mfp-kurskopf__icon img,
.mfp-kurskopf__bild img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 92px;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
}

.mfp-kurskopf .mfp-kurskopf__art {
	margin: 0;
	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: #CDEBDB;
}

.mfp-kurskopf .mfp-kurskopf__titel {
	margin: 0 0 1.4rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* "(Eltern-Kurs)", "(10–13 Jahre)": Teil des Namens, aber leiser */
.mfp-kurskopf__zusatz {
	font-size: 0.6em;
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.78);
	white-space: nowrap;
}

.mfp-kurskopf__umfang {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfp-kurskopf__umfang li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.45rem 0.95rem 0.45rem 0.8rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
}

.mfp-kurskopf__umfang li::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mfp-kurskopf__umfang-module::before {
	-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 3 3 7.5 12 12l9-4.5z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5'/%3E%3Cpath d='m3 16.5 9 4.5 9-4.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 3 3 7.5 12 12l9-4.5z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5'/%3E%3Cpath d='m3 16.5 9 4.5 9-4.5'/%3E%3C/svg%3E");
}

.mfp-kurskopf__umfang-karten::before {
	-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='4' y='7' width='12' height='14' rx='2'/%3E%3Cpath d='M8 3h10a2 2 0 0 1 2 2v12'/%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='4' y='7' width='12' height='14' rx='2'/%3E%3Cpath d='M8 3h10a2 2 0 0 1 2 2v12'/%3E%3C/svg%3E");
}

/* Seit 23.10.2026 dazu Videos, Arbeitsblaetter und Bearbeitungszeit
   (functions.php, mediafitpass_kurs_umfang_angaben). Fuenf Marken brechen
   am Handy um; eine Marke darf nie breiter als der Kopf werden, ihr Text
   bricht dann in sich um. */
.mfp-kurskopf__umfang li {
	box-sizing: border-box;
	max-width: 100%;
}

.mfp-kurskopf__umfang-videos::before {
	-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='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m10 9 5 3-5 3z'/%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='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E");
}

.mfp-kurskopf__umfang-blaetter::before {
	-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='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%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='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
}

.mfp-kurskopf__umfang-dauer::before {
	-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='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 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='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	.mfp-kurskopf__umfang {
		gap: 0.5rem;
	}

	/* Umgebrochene Marken als Kachel statt als Pille */
	.mfp-kurskopf__umfang li {
		border-radius: 14px;
	}
}

/* Fortschritt als Ring in einer weissen Karte */
.mfp-kurskopf__stand {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.2rem 1.1rem;
	box-sizing: border-box;
	width: 320px;
	max-width: 100%;
	padding: 1.5rem;
	border-radius: 22px;
	background: #ffffff;
	color: var(--wp--preset--color--dark);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 28px 50px -30px rgba(0, 0, 0, 0.55);
}

.mfp-ring {
	--mfp-prozent: 0;
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: conic-gradient(var(--wp--preset--color--primary) calc(var(--mfp-prozent) * 1%), #E3ECE6 0);
}

.mfp-ring::before {
	content: "";
	position: absolute;
	inset: 9px;
	border-radius: 50%;
	background: #ffffff;
}

.mfp-ring span {
	position: relative;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--dark);
}

.mfp-kurskopf__standtitel {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

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

.mfp-kurskopf__stand .mfp-knopf {
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	font-size: 1rem;
}

.mfp-kurskopf__link {
	grid-column: 1 / -1;
	justify-self: center;
	margin-top: -0.3rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark) !important;
	text-decoration: none !important;
}

.mfp-kurskopf__link:hover,
.mfp-kurskopf__link:focus-visible {
	color: var(--wp--preset--color--accent) !important;
}

/* Nicht eingeschrieben steht rechts seit 22.10.2026 das Muster-Zertifikat
   (zertifikat.css, Abschnitt 3), das kleine Symbol links bleibt. Nur ohne
   Musterbild (Kurs ausserhalb der drei) rechts das Kurssymbol gross, links
   dafuer keins. */
.mfp-kurskopf__bild {
	position: relative;
	display: block;
	width: clamp(150px, 18vw, 210px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 28px 50px -30px rgba(0, 0, 0, 0.55);
}

.mfp-kurskopf__bild img {
	width: 150%;
}

.mfp-kurskopf:has(> .mfp-kurskopf__bild) .mfp-kurskopf__icon {
	display: none;
}

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

	.mfp-kurskopf__stand {
		width: 100%;
		max-width: 440px;
	}

	.mfp-kurskopf__bild {
		display: none;
	}

	.mfp-kurskopf:has(> .mfp-kurskopf__bild) .mfp-kurskopf__icon {
		display: block;
	}
}

@media (max-width: 600px) {
	.mfp-kurskopf {
		gap: 1.5rem;
		padding: 1.5rem 1.25rem;
		border-radius: 22px;
	}

	.mfp-kurskopf__icon {
		width: 52px;
		height: 52px;
	}

	.mfp-kurskopf__icon img {
		width: 80px;
	}

	.mfp-kurskopf__stand {
		padding: 1.25rem;
	}

	.mfp-ring {
		width: 76px;
		height: 76px;
	}

	.mfp-ring::before {
		inset: 8px;
	}

	.mfp-ring span {
		font-size: 1rem;
	}
}

@media (forced-colors: active) {
	.mfp-kurskopf,
	.mfp-kurskopf__stand {
		border: 1px solid CanvasText;
	}

	.mfp-ring {
		border: 2px solid CanvasText;
	}
}

/* Hinweis aus der Kursbeschreibung, unter der Modulliste
   (functions.php, mediafitpass_kurs_hinweis_shortcode). Farbe wie vorher
   in der Beschreibung. */
.mfp-kurs-hinweis {
	margin-top: 3rem;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kurs-hinweis .is-style-mfp-hinweis {
	margin: 0;
}

/* -- Reihenfolge und Beschreibung ----------------------
   Florian, 29.09.2026: "der text darunter haengt noch sehr in der luft
   eventuell muss unter der box direkt der inhalt kommen". Fuer
   Eingeschriebene steht die Modulliste direkt unter dem Kurskopf, die
   Beschreibung folgt als Karte (functions.php,
   mediafitpass_kurs_beschreibung_umstellen). LearnDashs Reiterflaeche ist
   dann leer und faellt weg. Wer den Kurs nicht hat, liest die Beschreibung
   vor der Modulliste, in derselben Karte. */

.mfp-kurskopf--eingeschrieben ~ .wp-block-post-content .ld-tabs.ld-tab-count-1 {
	display: none !important;
}

.mfp-kurskopf--eingeschrieben ~ .wp-block-post-content .ld-section-heading {
	margin-top: 0 !important;
}

/* LearnDash setzt der Liste 2.1em oben und 2em unten, gemessen 69 px
   zwischen Kopf und "Kurs-Inhalte" und 80 px bis zur Beschreibung. Jetzt
   rund 48 px auf beiden Seiten. */
.mfp-kurskopf--eingeschrieben ~ .wp-block-post-content .ld-lesson-list {
	margin-top: 0.75rem !important;
	margin-bottom: 0 !important;
}

.mfp-kurs-info,
.single-sfwd-courses .learndash-wrapper .ld-tabs-content {
	background: #ffffff !important;
	border: 1px solid #DCE5DF !important;
	border-radius: 22px;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem) !important;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 18px 40px -30px rgba(26, 26, 46, 0.25);
	color: var(--wp--preset--color--text-gray);
	font-size: 1.05rem;
	line-height: 1.75;
}

.mfp-kurs-info {
	margin-top: 2.25rem;
}

.mfp-kurs-info .mfp-kurs-info__titel,
.single-sfwd-courses .learndash-wrapper .ld-tabs-content::before {
	display: block;
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.single-sfwd-courses .learndash-wrapper .ld-tabs-content::before {
	content: "\00DC ber diesen Kurs";
}

.mfp-kurs-info > p:not([class*="is-style-"]) {
	margin: 0 0 1.25em;
}

.mfp-kurs-info > :last-child,
.single-sfwd-courses .learndash-wrapper .ld-tab-content > :last-child {
	margin-bottom: 0 !important;
}

.mfp-kurs-info + .mfp-kurs-hinweis {
	margin-top: 1.5rem;
}

/* -- "Meine Kurse" ------------------------------------ */

.mfp-kurskarte__art {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	margin: 0 0 0.6rem;
}

.mfp-fortschritt {
	max-width: 560px;
	margin: 0 0 1.5rem;
}

.mfp-fortschritt__balken {
	height: 10px;
	background: #DDE7E1;
	border-radius: 9999px;
	overflow: hidden;
}

.mfp-fortschritt__balken span {
	display: block;
	height: 100%;
	min-width: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark));
	border-radius: 9999px;
}

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

.mfp-kurskarte__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mfp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.7rem 1.4rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mfp-knopf--voll {
	background: var(--wp--preset--color--primary);
	color: #ffffff !important;
	border: 1.5px solid var(--wp--preset--color--primary);
}

.mfp-knopf--voll:hover,
.mfp-knopf--voll:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.mfp-knopf--umriss {
	background: transparent;
	color: var(--wp--preset--color--primary-dark) !important;
	border: 1.5px solid var(--wp--preset--color--primary);
}

.mfp-knopf--umriss:hover,
.mfp-knopf--umriss:focus-visible {
	color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent);
}

/* Der Kurskopf zeigt Fortschritt und Weiterlernen. Den Statuskasten von
   LearnDash braucht es fuer Eingeschriebene deshalb nicht mehr. */
.single-sfwd-courses .learndash-wrapper .ld-course-status.ld-course-status-enrolled {
	display: none !important;
}

/* Wer den Kurs nicht hat, sieht seit 23.10.2026 "Jetzt kaufen" im Kurskopf
   (Klasse mfp-kurskopf--kaufbar, functions.php). Der Statuskasten darunter
   wiederholte Preis und Knopf, klein und blau unter "Aktueller Status: Nicht
   eingeschrieben", und Eltern fragten sich im Persona-Test, ob sie sich erst
   einschreiben muessen. Ausgeblendet per CSS statt mit einer eigenen
   Vorlage unter theme/learndash: Eine kopierte Vorlage von LearnDash
   veraltet bei jedem Update still, und ohne "Jetzt kaufen" im Kopf (Kurs
   ohne Einmalpreis) steht der Kasten von selbst wieder da, als einziger Weg
   zum Kurs. Seine Texte sagen dann "Noch nicht freigeschaltet" und "Zugang
   nach dem Kauf" (functions.php, mediafitpass_learndash_labels). */
.mfp-kurskopf--kaufbar ~ .wp-block-post-content .ld-course-status.ld-course-status-not-enrolled {
	display: none !important;
}

/* Kaufknopf von LearnDash, wo er noch zu sehen ist (der Statuskasten bleibt
   bei einem Kurs ohne "Jetzt kaufen" im Kurskopf): gruene Pille wie alle
   Kaufknoepfe
   der Website statt LearnDash-Blau #235AF3 (ld30 learndash.min.css, dort mit
   Spezifitaet 0,4,0, deshalb !important). Hover Blau wie ueberall.
   Weiss auf primary 4.88:1, auf accent 7.85:1. */
.learndash-wrapper .learndash_checkout_buttons .btn-join,
.learndash-wrapper .learndash_checkout_buttons #btn-join {
	min-height: 50px;
	padding: 0.85rem 1.75rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background-color: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}

.learndash-wrapper .learndash_checkout_buttons .btn-join:hover,
.learndash-wrapper .learndash_checkout_buttons .btn-join:focus-visible,
.learndash-wrapper .learndash_checkout_buttons #btn-join:hover,
.learndash-wrapper .learndash_checkout_buttons #btn-join:focus-visible {
	background-color: var(--wp--preset--color--accent) !important;
}

.learndash-wrapper .learndash_checkout_buttons .btn-join:focus-visible,
.learndash-wrapper .learndash_checkout_buttons #btn-join:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark) !important;
	outline-offset: 2px !important;
}

/* "Meine Kurse" */
.mfp-kursliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 0 0 2.5rem;
}

.mfp-kurskarte {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 20px;
	padding: 1.6rem 1.5rem 1.5rem;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 14px 32px -24px rgba(26, 26, 46, 0.22);
}

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

.mfp-kurskarte__titel a {
	color: var(--wp--preset--color--dark);
	text-decoration: none;
}

.mfp-kurskarte__titel a:hover {
	color: var(--wp--preset--color--accent);
}

.mfp-kurskarte .mfp-fortschritt {
	margin-top: auto;
}

.mfp-kurskarte__knoepfe .mfp-knopf {
	flex: 1 1 auto;
}

.mfp-kursliste__leer {
	font-size: 1.05rem;
	color: var(--wp--preset--color--text-gray);
}

/* Knopf "Meine Klassen" fuer Lehrkraefte ueber der Kursliste
   (inc/klassen.php, 20.10.2026) */
.mfp-klassen-link {
	margin: 0 0 1.5rem;
}

/* Kurssymbol auf den Karten von "Meine Kurse", gleiche Darstellung wie auf
   der Website (.kurs-detail__icon) */
.mfp-kurskarte__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 20px -14px rgba(26, 26, 46, 0.25);
	margin: 0 0 1.1rem;
}

.mfp-kurskarte__icon {
	padding: 0.55rem 0.8rem;
	align-self: flex-start;
}

.mfp-kurskarte__icon img {
	width: 72px;
	height: auto;
	display: block;
}

/* "Meine Kurse", zweite Fassung (Florian, 29.09.2026: "hier sollte das icon
   auch hin, bitte huebscher machen"): getoenter Kopf je Kurs mit Symbol,
   ein Hauptknopf, "Zur Kursuebersicht" als ruhiger Link. */
.mfp-kurskarte {
	padding: 0;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mfp-kurskarte:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(26, 26, 46, 0.05), 0 22px 40px -26px rgba(26, 26, 46, 0.35);
}

.mfp-kurskarte__kopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.4rem 1.5rem 1.1rem;
	background: linear-gradient(135deg, #E3F0E8 0%, #F3F8F5 100%);
	border-bottom: 1px solid #E1E9E4;
}

.mfp-kurskarte--kinder .mfp-kurskarte__kopf {
	background: linear-gradient(135deg, #ECEFDF 0%, #F7F8F1 100%);
	border-bottom-color: #E6E9DA;
}

.mfp-kurskarte--jugend .mfp-kurskarte__kopf {
	background: linear-gradient(135deg, #E4EAFB 0%, #F4F6FD 100%);
	border-bottom-color: #DFE5F6;
}

.mfp-kurskarte__kopf .mfp-kurskarte__icon {
	margin: 0 0 0.9rem;
}

.mfp-kurskarte__kopf .mfp-kurskarte__art {
	margin: 0;
}

.mfp-kurskarte__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.3rem 1.5rem 1.5rem;
}

.mfp-kurskarte__titel {
	font-size: 1.2rem;
	margin: 0 0 1.4rem;
}

.mfp-fortschritt__zeile strong {
	color: var(--wp--preset--color--dark);
	font-weight: 700;
	margin-right: 0.35rem;
}

.mfp-kurskarte__knoepfe {
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
}

.mfp-kurskarte__link {
	align-self: center;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark) !important;
	text-decoration: none !important;
}

.mfp-kurskarte__link:hover,
.mfp-kurskarte__link:focus-visible {
	color: var(--wp--preset--color--accent) !important;
}

/* Abmelden unter der Liste: ruhig, nicht als Fliesstext-Link */
.meine-kurse .wp-block-loginout {
	text-align: center;
	margin-top: 1rem;
}

.meine-kurse .wp-block-loginout.logged-in a {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-gray);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 9999px;
	padding: 0.45rem 1.1rem;
}

.meine-kurse .wp-block-loginout.logged-in a:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Anmeldekarte fuer Abgemeldete (Florian, 29.09.2026: "kannst du das bitte
   aufhuebschen und verbessern das sieht aktuell nicht gut aus"). Vorher
   standen Beschriftung und winziges Feld nebeneinander in der Seitenmitte.
   Formular vom Block Anmelden/Abmelden, Kopf und "Passwort vergessen?" aus
   functions.php (mediafitpass_anmeldung_*). */
.meine-kurse .wp-block-loginout.has-login-form {
	max-width: 440px;
	margin: 0 auto;
	text-align: left;
}

.meine-kurse .wp-block-loginout.has-login-form form {
	padding: clamp(1.75rem, 5vw, 2.5rem);
	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);
}

.meine-kurse .has-login-form .mfp-anmeldung__kopf {
	margin: 0 0 1.75rem;
	text-align: center;
}

.meine-kurse .has-login-form .mfp-anmeldung__zeichen {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 56px;
	margin: 0 0 0.9rem;
	border-radius: 50%;
	background: #E6F1EA;
}

.meine-kurse .has-login-form .mfp-anmeldung__zeichen::before {
	content: "";
	position: absolute;
	inset: 15px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14.5v2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14.5v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.meine-kurse .has-login-form .mfp-anmeldung__titel {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--dark);
}

.meine-kurse .has-login-form .mfp-anmeldung__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-gray);
}

.meine-kurse .has-login-form form > p {
	margin: 0 0 1.1rem;
}

.meine-kurse .has-login-form label {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}

.meine-kurse .has-login-form input.input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 1rem;
	border: 1.5px solid #D5DDD8;
	border-radius: 12px;
	background: #ffffff;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--dark);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.meine-kurse .has-login-form input.input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(37, 128, 87, 0.15);
}

.meine-kurse .has-login-form .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-weight: 500;
	color: var(--wp--preset--color--text-gray);
	cursor: pointer;
}

.meine-kurse .has-login-form .login-remember input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.meine-kurse .has-login-form .login-submit {
	margin: 1.5rem 0 0;
}

.meine-kurse .has-login-form .login-submit input[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	cursor: pointer;
}

.meine-kurse .has-login-form .mfp-anmeldung__vergessen {
	margin: 1.1rem 0 0;
	text-align: center;
	font-size: 0.92rem;
}

.meine-kurse .has-login-form .mfp-anmeldung__vergessen a {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.meine-kurse .has-login-form .mfp-anmeldung__vergessen a:hover,
.meine-kurse .has-login-form .mfp-anmeldung__vergessen a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* Anmeldelink statt Passwort (inc/anmeldelink.php, 21.10.2026). Die Karte
   sieht aus wie die Anmeldekarte darueber; das Formular darin ist keine
   eigene Karte. Die Anmeldung mit Passwort steht aufklappbar darunter. */
.meine-kurse .mfp-anmeldelink__karte {
	padding: clamp(1.75rem, 5vw, 2.5rem);
	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);
}

.meine-kurse .has-login-form.mfp-anmeldelink form {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.meine-kurse .mfp-anmeldelink .login-submit button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	cursor: pointer;
}

.meine-kurse .mfp-anmeldelink__hinweis {
	margin: 0 0 1.1rem;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: #FDF3E7;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--wp--preset--color--dark);
}

.meine-kurse .mfp-anmeldelink__klein {
	margin: 1.1rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--text-gray);
}

.meine-kurse .mfp-anmeldelink__klein a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.meine-kurse .mfp-anmeldelink__passwort {
	max-width: 440px;
	margin: 1.5rem auto 0;
}

.meine-kurse .mfp-anmeldelink__passwort summary {
	cursor: pointer;
	text-align: center;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.meine-kurse .mfp-anmeldelink__passwort summary:hover,
.meine-kurse .mfp-anmeldelink__passwort summary:focus-visible {
	color: var(--wp--preset--color--accent);
}

.meine-kurse .mfp-anmeldelink__passwort[open] summary {
	margin-bottom: 1rem;
}

/* -- Kaufinformationen im Kurskopf (nicht eingeschrieben) --
   Preis mit Steuerhinweis, Zahlungsarten und technische Voraussetzungen
   vor dem Kaufknopf (functions.php, mediafitpass_kurs_kaufinfo_html). */

.mfp-kurskopf__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin: 1.4rem 0 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	color: #ffffff;
}

.mfp-kurskopf__preis strong {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.mfp-kurskopf__preis span {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
}

/* Zertifikat vor dem Kauf (functions.php, mediafitpass_kurs_kaufinfo_html).
   Weisse Pille mit gruener Schrift, damit sie sich von den durchsichtigen
   Marken "Module" und "Karten" abhebt (22.10.2026: "Aushaengeschild").
   primary-dark auf Weiss 7.72:1. */
.mfp-kurskopf__zertifikat {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1rem 0 0;
	padding: 0.5rem 1.05rem 0.5rem 0.75rem;
	border-radius: 9999px;
	background: #ffffff;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary-dark);
}

.mfp-kurskopf__zertifikat svg {
	flex: none;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	.mfp-kurskopf__zertifikat {
		border-radius: 14px;
	}
}

.mfp-kurskopf__hinweise {
	max-width: 60ch;
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* "Jetzt kaufen" im Kurskopf (23.10.2026, functions.php,
   mediafitpass_kurs_kaufinfo_html), gross direkt unter Preis und
   Zertifikat, daneben leise "Leseprobe ansehen". primary-light statt
   primary: primary verschwindet auf dem gruenen Kopf (1.58:1 gegen
   primary-dark), primary-light hebt sich ab (2.54:1, gegen #154A33 3.36:1).
   Weiss darauf 3.04:1, deshalb die Schrift mit 1.2rem fett: Grosstext nach
   WCAG, verlangt 3:1. Hover Blau wie alle Knoepfe, Weiss auf accent 7.85:1. */
.mfp-kurskopf__kauf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin: 1.5rem 0 0;
}

.mfp-kurskopf .mfp-kurskopf__kaufen {
	box-sizing: border-box;
	max-width: 100%;
	min-height: 56px;
	padding: 0.85rem 2.5rem;
	background: var(--wp--preset--color--primary-light);
	border-color: var(--wp--preset--color--primary-light);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.65);
}

.mfp-kurskopf .mfp-kurskopf__kaufen:hover,
.mfp-kurskopf .mfp-kurskopf__kaufen:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.mfp-kurskopf .mfp-kurskopf__kaufen:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.mfp-kurskopf__leseprobe {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mfp-kurskopf__leseprobe:hover,
.mfp-kurskopf__leseprobe:focus-visible {
	text-decoration-thickness: 2px;
}

@media (max-width: 600px) {
	.mfp-kurskopf__kauf {
		flex-direction: column;
		align-items: stretch;
	}

	.mfp-kurskopf .mfp-kurskopf__kaufen {
		width: 100%;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.mfp-kurskopf__leseprobe {
		align-self: center;
	}
}

@media (forced-colors: active) {
	.mfp-kurskopf .mfp-kurskopf__kaufen {
		border: 2px solid ButtonText;
	}
}

/* -- Nach dem Kauf: Hinweis auf "Meine Kurse" (?kauf=danke) -- */

.mfp-kauf-danke {
	max-width: 640px;
	margin: 0 auto 2rem;
	padding: 1.4rem 1.6rem;
	background: #ffffff;
	border: 1px solid #DCE5DF;
	border-left: 5px solid var(--wp--preset--color--primary);
	border-radius: 0 16px 16px 0;
	box-shadow: 0 18px 40px -30px rgba(26, 26, 46, 0.3);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-gray);
}

.mfp-kauf-danke p {
	margin: 0 0 0.6rem;
}

.mfp-kauf-danke p:last-child {
	margin-bottom: 0;
}

.mfp-kauf-danke .mfp-kauf-danke__titel {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

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

/* Online-Widerruf und Kuendigung in der Rechtszeile des Kursbereichs:
   hervorgehoben (§ 356a, § 312k BGB) */
.mfp-kurs-rechtszeile a.mfp-kurs-rechtszeile__funktion {
	font-weight: 700;
	text-decoration: underline;
}

/* ==================================================
   Focus Mode: Kopfleiste auf allen Breiten (Review 29.09.2026)
   ==================================================
   Gemessen auf der Karte "Wer Sie begleitet" im Elternkurs:
   - 1440 px: Die Leiste war 146 statt 90 px hoch und verdeckte den
     Kurstitel der Seitenleiste. LearnDash reserviert fuer das Logo 350 px
     (flex: 0 0 350px), auch ohne hochgeladenes Logo, und "Hallo, ..."
     rutschte in eine zweite Zeile.
   - LearnDash stapelt die Knoepfe einer Aktion in einer 50 px hohen
     Spalte. "Als abgeschlossen markieren" und "Weiter" (mfp-weiter-kopf)
     brauchen zusammen 88 px, der obere Knopf ragte 9 px aus der Leiste.
   - 390 px: Die Knoepfe standen in einer Zeile ohne Umbruch, die Seite war
     553 statt 375 px breit. Darueber lagen 120 px Leerraum, mit
     Adminleiste 166 px: LearnDash stellt die Leiste unter 769 px in den
     Fluss (position: relative), der Abstand fuer die fixierte Leiste
     (--mfp-kopf) blieb aber stehen. */

/* Ohne hochgeladenes Logo kein reservierter Platz */
body.learndash-cpt .ld-focus-header .ld-brand-logo:not(:has(img)) {
	display: none !important;
}

/* Aktionen so breit wie ihre Knoepfe, Hoehe nach Inhalt */
body.learndash-cpt .ld-focus-header .ld-content-action {
	flex: 0 0 auto !important;
	height: auto !important;
}

/* "Als abgeschlossen markieren" und "Weiter" nebeneinander */
body.learndash-cpt .ld-focus-header .ld-content-action:has(.mfp-weiter-kopf) {
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.75rem;
}

body.learndash-cpt .ld-focus-header .mfp-weiter-kopf {
	margin-left: 0 !important;
}

/* Unter 961 px stellt LearnDash die Knoepfe einer Aktion wieder
   untereinander (flex-wrap: wrap, Knoepfe max-width: 100%). Bis 769 px
   bleiben sie hier in einer Zeile, darunter gilt das Raster weiter unten. */
@media (min-width: 769px) {
	body.learndash-cpt .ld-focus-header .ld-content-action:has(.mfp-weiter-kopf) {
		flex-wrap: nowrap !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-action > .ld-button,
	body.learndash-cpt .ld-focus-header .ld-content-action > form.sfwd-mark-complete {
		flex: 0 0 auto !important;
		width: auto !important;
	}
}

/* Die Begruessung kostet eine ganze Zeile, sobald es eng wird. Profilbild
   und Menue bleiben. Der Fortschritt darf schmaler werden, damit die Leiste
   bis 901 px einzeilig bleibt (fixiert, Platz nur fuer eine Zeile). */
@media (max-width: 1279px) {
	body.learndash-cpt .ld-focus-header .ld-user-welcome-text {
		display: none !important;
	}
}

/* Grundbreite statt Inhaltsbreite: In einer umbrechenden Flex-Zeile
   entscheidet die Grundbreite, ob etwas in die naechste Zeile rutscht.
   Mit der Inhaltsbreite (LearnDash: flex 1 2 auto) landete das Profil bei
   1024 px in einer zweiten Zeile. */
@media (min-width: 901px) and (max-width: 1279px) {
	body.learndash-cpt .ld-focus-header .ld-progress {
		flex: 1 2 10rem !important;
		min-width: 10rem !important;
	}
}

/* Bis 960 px fehlten dann noch 25 px: engere Abstaende, und LearnDash
   gibt jeder Aktion hier 5 px Innenabstand an den Seiten */
@media (min-width: 901px) and (max-width: 960px) {
	body.learndash-cpt .ld-focus-header {
		column-gap: 0.75rem !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-action {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* 769 bis 900 px: zwei Zeilen, fuer die --mfp-kopf 120 px vorsieht.
   Oben Fortschritt und Profil, darunter die Knoepfe. Mit dem Profil in der
   zweiten Zeile und dem Innenabstand, den LearnDash unter die Knoepfe
   setzt (17 px, dazu 5 px je Aktion), war die Leiste 147 px hoch. */
@media (min-width: 769px) and (max-width: 900px) {
	body.learndash-cpt .ld-focus-header .ld-progress {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-actions {
		order: 5 !important;
		flex: 1 1 100% !important;
		padding-bottom: 0 !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-action {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* 320-px-Telefone: "Als abgeschlossen markieren" braucht in einer Zeile
   293 px und lief unter der Karte seitlich heraus. Hier darf die
   Beschriftung umbrechen. */
@media (max-width: 380px) {
	body.learndash-cpt .ld-focus input.learndash_mark_complete_button {
		white-space: normal !important;
		max-width: 100% !important;
	}
}

@media (max-width: 768px) {
	/* Die Leiste steht hier im Fluss, sie braucht keinen Abstand */
	body.learndash-cpt .ld-focus {
		padding-top: 0 !important;
	}

	/* Die Seitenleiste oeffnet unter der ersten Zeile der Kopfleiste. Dort
	   bleibt der Menueknopf sichtbar, mit dem sie sich wieder schliesst
	   (ihr eigener Pfeil ist auf dem Telefon ausgeblendet). */
	body.learndash-cpt .ld-focus-sidebar {
		top: 60px !important;
	}

	body.learndash-cpt.admin-bar .ld-focus-sidebar {
		top: 106px !important;
	}

	/* LearnDash gibt ihr 350 px, auf einem 320-px-Telefon liefe sie
	   geoeffnet seitlich heraus */
	body.learndash-cpt .ld-focus-sidebar {
		max-width: 100vw;
	}

	/* Erste Zeile: Menue, Fortschritt, Profil */
	body.learndash-cpt .ld-focus-header .ld-progress {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	/* Darunter Zurueck und Weiter nebeneinander, "Als abgeschlossen
	   markieren" ueber die volle Breite */
	body.learndash-cpt .ld-focus-header .ld-content-actions {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem !important;
		flex: 1 1 100% !important;
		width: 100%;
		min-width: 0 !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-action {
		display: contents !important;
	}

	body.learndash-cpt .ld-focus-header .ld-content-action:first-child > * {
		grid-column: 1;
		grid-row: 1;
	}

	body.learndash-cpt .ld-focus-header .mfp-weiter-kopf {
		grid-column: 2;
		grid-row: 1;
	}

	body.learndash-cpt .ld-focus-header form.sfwd-mark-complete {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	body.learndash-cpt .ld-focus-header .ld-content-actions .ld-button,
	body.learndash-cpt .ld-focus-header .ld-content-actions form.sfwd-mark-complete,
	body.learndash-cpt .ld-focus-header .ld-content-actions input.learndash_mark_complete_button {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
}

/* Unten auf der Karte duerfen Zurueck, Abhaken und Weiter umbrechen. Mit
   geoeffneter Seitenleiste bleiben auf dem Tablet (820 px) 455 px fuer den
   Inhalt, die drei Knoepfe brauchen nebeneinander rund 620 px: Die Seite
   lief 189 px seitlich heraus. Wo sie in eine Zeile passen, aendert sich
   nichts; auf dem Telefon stapelt LearnDash sie ohnehin. */
body.learndash-cpt .ld-focus-content .ld-content-actions {
	flex-wrap: wrap !important;
	row-gap: 0.75rem;
}

/* "Alle aufklappen": LearnDash faerbt die Schaltflaeche per Inline-Stil
   (.ld-expand-button:not([disabled])) in der Markenfarbe, die Regel weiter
   oben setzt nur die Schrift dunkel. Zusammen 3.5:1, gefordert sind 4.5:1.
   Weiss auf primary-dark 7.72:1, im Hover weiss auf accent 7.85:1. */
.learndash-wrapper .ld-expand-button.ld-primary-background:not([disabled]) {
	background-color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
	color: #ffffff !important;
}

.learndash-wrapper .ld-expand-button.ld-primary-background:not([disabled]):hover {
	background-color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #ffffff !important;
}

/* Anmelde-Link im Kaufhinweis des Kurskopfs (29.09.2026): weiss und
   unterstrichen auf dem gruenen Kopf */
.mfp-kurskopf__hinweise a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mfp-kurskopf__hinweise a:hover,
.mfp-kurskopf__hinweise a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Abschlusstest im Kurskopf, unter "Weiterlernen" (inc/abschlusstest.php,
   20.10.2026). Der Knopf hat den Umriss: gefuellt bleibt nur der Weg durch
   den Kurs. Auf "Meine Kurse" steht derselbe Knopf in der Knopfspalte der
   Karte und braucht nichts Eigenes. */
.mfp-kurskopf__test {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.45rem;
	padding-top: 1rem;
	border-top: 1px solid #E3ECE6;
}

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

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

.mfp-kurskopf__test--bestanden .mfp-kurskopf__testzeile::before {
	content: "✓ ";
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}