/* ==========================================================================
   Mission App · Hülle, Kursleser, Lehrtext
   Grundlage: Styleguide Mission Medizin Teil 3 (UI-System) und tokens.css.
   Präfix ma-. Gearbeitet wird nur mit den semantischen Rollen (--mm-color-…).
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-serif-4-latin-600.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ma { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.ma img { max-width: 100%; height: auto; }
.ma-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ma-sprung { position: absolute; left: var(--mm-space-4); top: -100px; z-index: var(--mm-z-toast); background: var(--mm-color-surface); padding: var(--mm-space-2) var(--mm-space-4); border-radius: var(--mm-radius-sm); }
.ma-sprung:focus { top: var(--mm-space-2); }

.ma-etikett {
	margin: 0;
	font-family: var(--mm-font-ui);
	font-size: var(--mm-text-label);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-label);
	text-transform: uppercase;
	color: var(--mm-color-ink-secondary);
}

/* ---------- Knöpfe ---------- */
.ma-knopf, .ma-knopf-zweit {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 var(--mm-space-5);
	border-radius: var(--mm-radius-md);
	font: var(--mm-weight-semibold) var(--mm-text-body)/1 var(--mm-font-ui);
	text-decoration: none; white-space: nowrap;
	transition: background-color var(--mm-duration-fast) var(--mm-ease-standard), border-color var(--mm-duration-fast) var(--mm-ease-standard);
}
.ma-knopf { background: var(--mm-color-brand-action); color: #fff; border: 1px solid var(--mm-color-brand-action); }
.ma-knopf:hover { background: var(--mm-color-brand-strong); border-color: var(--mm-color-brand-strong); color: #fff; }
.ma-knopf-zweit { background: transparent; color: var(--mm-color-ink); border: 1px solid var(--mm-color-border-strong); }
.ma-knopf-zweit:hover { border-color: var(--mm-color-ink); color: var(--mm-color-ink); }

/* ---------- Kopfzeile ---------- */
.ma-kopf { position: sticky; top: 0; z-index: var(--mm-z-sticky); background: var(--mm-color-surface); border-bottom: 1px solid var(--mm-color-border); }
.ma-kopf-innen { max-width: var(--mm-container-page); margin: 0 auto; padding: 0 var(--mm-space-5); min-height: 72px; display: flex; align-items: center; gap: var(--mm-space-6); }
.ma-marke { display: block; flex: none; line-height: 0; }
.ma-marke svg { height: 46px; width: auto; }
.ma-navigation { flex: 1; display: flex; align-items: center; gap: var(--mm-space-5); }
.ma-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--mm-space-1); flex-wrap: wrap; }
.ma-navigation ul a { display: block; padding: var(--mm-space-2) var(--mm-space-3); border-radius: var(--mm-radius-sm); color: var(--mm-color-ink); text-decoration: none; font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); }
.ma-navigation ul a:hover { background: var(--mm-color-surface-subtle); color: var(--mm-color-ink); }
.ma-navigation ul a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mm-color-brand); border-radius: 0; }
.ma-konto { margin-left: auto; display: flex; align-items: center; gap: var(--mm-space-4); }
/* Kurswechsel (huelle.php, mapp_kurswechsel) */
.ma-kurswechsel { position: relative; }
.ma-kurswechsel summary { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--mm-space-3); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); font: var(--mm-weight-semibold) var(--mm-text-small)/1 var(--mm-font-ui); color: var(--mm-color-ink); cursor: pointer; list-style: none; }
.ma-kurswechsel summary::-webkit-details-marker { display: none; }
.ma-kurswechsel summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ma-kurswechsel[open] summary::after { transform: translateY(1px) rotate(225deg); }
.ma-kurswechsel summary:focus-visible { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-navigation .ma-kurswechsel ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: block; min-width: 200px; margin: 0; padding: var(--mm-space-1); list-style: none; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); box-shadow: var(--mm-shadow-md); }
.ma-navigation .ma-kurswechsel ul a { display: block; padding: var(--mm-space-2) var(--mm-space-3); border-radius: var(--mm-radius-sm); font-size: var(--mm-text-small); }
.ma-navigation .ma-kurswechsel ul a[aria-current="true"] { background: var(--mm-color-surface-subtle); box-shadow: inset 3px 0 0 var(--mm-color-brand); }
.ma-kopf-link { color: var(--mm-color-ink); font-weight: var(--mm-weight-semibold); font-size: var(--mm-text-small); text-decoration: none; }
.ma-kopf-link:hover { color: var(--mm-color-brand-action); }
.ma-menue-knopf { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); cursor: pointer; position: relative; }
.ma-menue-strich, .ma-menue-strich::before, .ma-menue-strich::after { position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: var(--mm-color-ink); content: ""; }
.ma-menue-strich { top: 21px; }
.ma-menue-strich::before { left: 0; top: -6px; }
.ma-menue-strich::after { left: 0; top: 6px; }

@media (max-width: 1240px) { /* Kopfzeile: darunter Menüknopf, sonst bricht die Navigation mit Kurswechsel um */
	.ma-menue-knopf { display: block; }
	.ma-navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--mm-color-surface); border-bottom: 1px solid var(--mm-color-border); padding: var(--mm-space-4) var(--mm-space-5) var(--mm-space-5); flex-direction: column; align-items: stretch; box-shadow: var(--mm-shadow-md); }
	.ma-navigation.ist-offen { display: flex; }
	.ma-navigation ul { flex-direction: column; }
	.ma-navigation ul a { padding: var(--mm-space-3); font-size: var(--mm-text-body); }
	.ma-konto { margin-left: 0; padding-top: var(--mm-space-4); border-top: 1px solid var(--mm-color-border); flex-wrap: wrap; }
	.ma-kopf-innen { position: relative; }
	/* Im Handymenü klappt die Kursliste an Ort und Stelle auf statt zu schweben */
	.ma-kurswechsel { flex: 1 0 100%; }
	.ma-navigation .ma-kurswechsel ul { position: static; margin-top: var(--mm-space-2); box-shadow: none; }
}
@media (max-width: 480px) {
	.ma-kopf-innen { padding: 0 var(--mm-space-4); min-height: 64px; }
	.ma-marke svg { height: 38px; }
}

/* ---------- Rahmen mit Kapitelleiste ---------- */
.ma-rahmen { flex: 1; width: 100%; max-width: var(--mm-container-page); margin: 0 auto; padding: var(--mm-space-7) var(--mm-space-5) var(--mm-space-8); }
.ma-rahmen.ma-mit-leiste { display: grid; grid-template-columns: var(--mm-container-sidebar) minmax(0, 1fr); gap: var(--mm-space-7); align-items: start; }
.ma-haupt { min-width: 0; }

.ma-leiste { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding-right: var(--mm-space-2); font-size: var(--mm-text-small); }
.ma-leiste > .ma-etikett { margin-bottom: var(--mm-space-3); }
.ma-leiste > .ma-etikett a { color: inherit; text-decoration: none; }
.ma-leiste ol, .ma-leiste ul { list-style: none; margin: 0; padding: 0; }
.ma-leiste a { display: block; padding: 6px var(--mm-space-3); border-radius: var(--mm-radius-sm); color: var(--mm-color-ink-secondary); text-decoration: none; line-height: 1.35; }
.ma-leiste a:hover { background: var(--mm-color-surface-subtle); color: var(--mm-color-ink); }
.ma-leiste a[aria-current="page"] { color: var(--mm-color-ink); font-weight: var(--mm-weight-semibold); box-shadow: inset 2px 0 0 var(--mm-color-brand); border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0; background: var(--mm-color-surface); }
.ma-leiste-lektionen > li.ist-offen > a { color: var(--mm-color-ink); font-weight: var(--mm-weight-semibold); }
.ma-leiste-themen { margin: 2px 0 var(--mm-space-2) var(--mm-space-3) !important; border-left: 1px solid var(--mm-color-border); }
.ma-leiste-abschnitt { margin: var(--mm-space-4) 0 var(--mm-space-1); padding: 0 var(--mm-space-3); font-size: var(--mm-text-label); font-weight: var(--mm-weight-bold); letter-spacing: var(--mm-tracking-label); text-transform: uppercase; color: var(--mm-color-ink-muted); }
.ma-leiste-lektionen > .ma-leiste-abschnitt:first-child { margin-top: 0; }

@media (max-width: 1024px) {
	.ma-rahmen.ma-mit-leiste { grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-5); }
	.ma-leiste { position: static; max-height: none; order: 2; border-top: 1px solid var(--mm-color-border); padding-top: var(--mm-space-5); }
}
@media (max-width: 480px) {
	.ma-rahmen { padding: var(--mm-space-5) var(--mm-space-4) var(--mm-space-7); }
}

/* ---------- Seitenkopf ---------- */
.ma-brotkrumen { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); align-items: center; margin-bottom: var(--mm-space-4); font-size: var(--mm-text-small); color: var(--mm-color-ink-muted); }
.ma-brotkrumen a { color: var(--mm-color-ink-secondary); text-decoration: none; }
.ma-brotkrumen a:hover { color: var(--mm-color-brand-action); text-decoration: underline; }
.ma-titel { margin: 0 0 var(--mm-space-6); max-width: var(--mm-container-prose); font-family: var(--mm-font-display); font-weight: var(--mm-weight-semibold); font-size: var(--mm-text-h1); line-height: 1.1; letter-spacing: -0.018em; color: var(--mm-color-ink); }
@media (max-width: 768px) { .ma-titel { font-size: var(--mm-text-h2); } }

/* ---------- Lesestrecke ---------- */
.ma-prosa {
	max-width: var(--mm-container-prose);
	font-family: var(--mm-font-prose);
	font-size: var(--mm-text-prose);
	line-height: var(--mm-leading-prose);
	color: var(--mm-color-ink);
	hyphens: auto; -webkit-hyphens: auto;
}
.ma-prosa > * { margin-top: 0; margin-bottom: 0; }
.ma-prosa > * + * { margin-top: 1.1em; }
.ma-prosa h2 { margin-top: var(--mm-space-7); font-size: var(--mm-text-h2); line-height: var(--mm-leading-heading); letter-spacing: var(--mm-tracking-heading); hyphens: manual; }
.ma-prosa h3 { margin-top: var(--mm-space-6); font-size: var(--mm-text-h3); line-height: 1.24; hyphens: manual; }
.ma-prosa h4 { margin-top: var(--mm-space-5); font-family: var(--mm-font-ui); font-size: var(--mm-text-h4); }
.ma-prosa h2 + *, .ma-prosa h3 + *, .ma-prosa h4 + * { margin-top: var(--mm-space-3); }
.ma-prosa ul, .ma-prosa ol { padding-left: 1.3em; }
.ma-prosa li + li { margin-top: 0.35em; }
.ma-prosa blockquote { margin-left: 0; padding-left: var(--mm-space-5); border-left: 2px solid var(--mm-color-border-strong); color: var(--mm-color-ink-secondary); }
.ma-prosa figure { margin-left: 0; margin-right: 0; }
.ma-prosa figcaption, .ma-prosa .wp-element-caption { margin-top: var(--mm-space-2); font-family: var(--mm-font-ui); font-size: var(--mm-text-caption); line-height: 1.45; color: var(--mm-color-ink-secondary); }
.ma-prosa .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.ma-prosa .has-text-align-center { text-align: center; }
.nur-buch { display: none !important; }

/* Tabellen: Zebrastreifen, Tabellenziffern */
.ma-prosa .wp-block-table { overflow-x: auto; }
.ma-prosa table { width: 100%; border-collapse: collapse; font-family: var(--mm-font-ui); font-size: var(--mm-text-small); line-height: 1.45; font-variant-numeric: tabular-nums; background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); }
.ma-prosa th, .ma-prosa td { padding: 10px var(--mm-space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mm-color-border); }
.ma-prosa thead th { font-size: var(--mm-text-label); letter-spacing: var(--mm-tracking-label); text-transform: uppercase; color: var(--mm-color-ink-secondary); background: var(--mm-color-surface-subtle); }
.ma-prosa tbody tr:nth-child(even) td { background: var(--mm-color-surface-paper); }

/* Formeln: KaTeX setzt .katex-eq; bis dahin (oder ohne Skript) steht der Quelltext in Festbreitenschrift */
.ma-prosa .katex-eq:not(.katex-rendered) { font-family: var(--mm-font-mono); font-size: 0.85em; }
.ma-prosa .katex { font-size: 1.08em; }
.ma-prosa .katex-display { margin: 0.6em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.ma-prosa .mm-formelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mm-space-3); }
.ma-prosa .mm-formelkarte { display: flex; flex-direction: column; gap: var(--mm-space-1); padding: var(--mm-space-4); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); }
.ma-prosa .mm-formelkarte-name { font-family: var(--mm-font-ui); font-weight: var(--mm-weight-semibold); font-size: var(--mm-text-small); }
.ma-prosa .mm-formel-hinweis { font-family: var(--mm-font-ui); font-size: var(--mm-text-caption); color: var(--mm-color-ink-secondary); }

/* ---------- Didaktik-Kästen: vier Muster, zwei Sonderformen (Styleguide Teil 3, Abschnitt 7) ---------- */
.ma-prosa .wp-block-group:is(.merke, .pruefungswissen, .definition, .beispiel, .achtung, .falle, .trick, .exkurs, .zusammenfassung, .auf-einen-blick, .formel) {
	padding: var(--mm-space-5);
	border-radius: var(--mm-radius-md);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.ma-prosa .wp-block-group:is(.merke, .pruefungswissen, .definition, .beispiel, .achtung, .falle, .trick, .exkurs, .zusammenfassung, .auf-einen-blick, .formel) > * + * { margin-top: 0.7em; }
.ma-prosa .wp-block-group:is(.merke, .pruefungswissen, .definition, .beispiel, .achtung, .falle, .trick, .exkurs, .zusammenfassung, .auf-einen-blick, .formel)::before {
	display: block; margin-bottom: var(--mm-space-2);
	font-family: var(--mm-font-ui); font-size: var(--mm-text-label); font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-label); text-transform: uppercase;
}
.ma-prosa .ma-kasten-titel {
	display: block; margin-bottom: 0.25em; font-family: var(--mm-font-ui); font-size: var(--mm-text-body); line-height: 1.4;
}
.ma-prosa .merke::before { content: "Merke"; }
.ma-prosa .pruefungswissen::before { content: "Prüfungswissen"; }
.ma-prosa .definition::before { content: "Definition"; }
.ma-prosa .beispiel::before { content: "Beispiel"; }
.ma-prosa .achtung::before { content: "Achtung"; }
.ma-prosa .falle::before { content: "Falle"; }
.ma-prosa .trick::before { content: "Trick"; }
.ma-prosa .exkurs::before { content: "Exkurs"; }
.ma-prosa .zusammenfassung::before, .ma-prosa .auf-einen-blick::before { content: "Auf einen Blick"; }
.ma-prosa .wp-block-group.formel::before { content: "Formel"; }

/* Akzent: Vermilion-Kante, Vermilion-50-Fläche */
.ma-prosa .wp-block-group:is(.merke, .pruefungswissen) { background: var(--mm-color-brand-wash); border-left: 3px solid var(--mm-color-brand-action); }
.ma-prosa .wp-block-group:is(.merke, .pruefungswissen)::before { color: var(--mm-color-brand-action); }
/* Neutral: Navy-700-Kante, weiße Fläche auf Papier */
.ma-prosa .wp-block-group:is(.definition, .beispiel) { background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-left: 3px solid var(--mm-color-ink-secondary); }
.ma-prosa .wp-block-group:is(.definition, .beispiel)::before { color: var(--mm-color-ink-secondary); }
/* Warnung: Karmin */
.ma-prosa .wp-block-group:is(.achtung, .falle) { background: var(--mm-color-danger-wash); border-left: 3px solid var(--mm-color-danger); }
.ma-prosa .wp-block-group:is(.achtung, .falle)::before { color: var(--mm-color-danger); }
/* Zurückgenommen: gestrichelt, Sand 100 */
.ma-prosa .wp-block-group:is(.trick, .exkurs) { background: var(--mm-color-surface-subtle); border: 1px dashed var(--mm-sand-400); }
.ma-prosa .wp-block-group:is(.trick, .exkurs)::before { color: var(--mm-color-ink-secondary); }
/* Sonderform invers */
.ma-prosa .wp-block-group:is(.zusammenfassung, .auf-einen-blick) { background: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }
.ma-prosa .wp-block-group:is(.zusammenfassung, .auf-einen-blick)::before { color: var(--mm-navy-300); }
.ma-prosa .wp-block-group:is(.zusammenfassung, .auf-einen-blick) a { color: var(--mm-vermilion-300); }
/* Sonderform Formel */
.ma-prosa .wp-block-group.formel { background: var(--mm-color-surface-subtle); text-align: center; }
.ma-prosa .wp-block-group.formel::before { color: var(--mm-color-ink-secondary); }

/* ---------- Blättern ---------- */
.ma-blaettern { max-width: var(--mm-container-prose); display: grid; grid-template-columns: 1fr 1fr; gap: var(--mm-space-4); margin-top: var(--mm-space-8); padding-top: var(--mm-space-5); border-top: 1px solid var(--mm-color-border); }
.ma-blaettern a { display: flex; flex-direction: column; gap: var(--mm-space-1); padding: var(--mm-space-4); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface); color: var(--mm-color-ink); text-decoration: none; font-weight: var(--mm-weight-semibold); line-height: 1.35; }
.ma-blaettern a:hover { border-color: var(--mm-color-border-strong); }
.ma-blaettern-weiter { text-align: right; grid-column: 2; }
@media (max-width: 480px) { .ma-blaettern { grid-template-columns: 1fr; } .ma-blaettern-weiter { grid-column: 1; } }

/* ---------- Kursseite ---------- */
.ma-abschnitt { margin: var(--mm-space-7) 0 var(--mm-space-4); font-family: var(--mm-font-display); font-size: var(--mm-text-h3); font-weight: var(--mm-weight-semibold); }
.ma-kursinhalt { counter-reset: lektion; }
.ma-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--mm-grid-gap); }
.ma-karte a { counter-increment: lektion; display: flex; flex-direction: column; gap: var(--mm-space-2); height: 100%; padding: var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); color: var(--mm-color-ink); text-decoration: none; transition: border-color var(--mm-duration-fast) var(--mm-ease-standard), box-shadow var(--mm-duration-fast) var(--mm-ease-standard); }
.ma-karte a::before { content: counter(lektion, decimal-leading-zero); font-family: var(--mm-font-ui); font-size: var(--mm-text-label); font-weight: var(--mm-weight-bold); letter-spacing: var(--mm-tracking-label); color: var(--mm-color-ink-muted); }
.ma-karte a:hover { border-color: var(--mm-color-border-strong); box-shadow: var(--mm-shadow-md); }
.ma-karte-titel { font-family: var(--mm-font-display); font-size: var(--mm-text-h4); font-weight: var(--mm-weight-semibold); line-height: 1.25; }
.ma-karte-zahl { margin-top: auto; font-size: var(--mm-text-small); color: var(--mm-color-ink-secondary); }

/* ---------- Kartenansicht der Lehrtexte (aus Mission Topic Cards) ---------- */
.ma-kartensystem { max-width: calc(var(--mm-container-prose) + 2 * var(--mm-space-6) + 2px); }
.ma-karten-vorspann { margin-bottom: var(--mm-space-6); }
.ma-karten-werkzeug { position: sticky; top: 72px; z-index: 5; margin: 0 0 var(--mm-space-4); padding: var(--mm-space-3) 0; background: var(--mm-color-surface-paper); border-bottom: 1px solid var(--mm-color-border); }
.ma-karten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2); }
.ma-karten-suche { flex: 1 1 220px; display: flex; align-items: center; gap: var(--mm-space-2); min-height: 40px; padding: 0 var(--mm-space-3); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); color: var(--mm-color-ink-muted); }
.ma-karten-suche:focus-within { border-color: var(--mm-color-ink-secondary); }
.ma-karten-suche svg { flex: none; width: 18px; height: 18px; }
.ma-karten-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--mm-text-small)/1.4 var(--mm-font-ui); color: var(--mm-color-ink); }
.ma-karten-knopf { min-height: 40px; padding: 0 var(--mm-space-3); background: transparent; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); font: var(--mm-weight-semibold) var(--mm-text-small)/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); cursor: pointer; }
.ma-karten-knopf:hover { border-color: var(--mm-color-border-strong); color: var(--mm-color-ink); }
.ma-karten-inhalt ol { list-style: none; margin: var(--mm-space-3) 0 0; padding: 0 0 2px; display: flex; gap: var(--mm-space-2); overflow-x: auto; scrollbar-width: none; }
.ma-karten-inhalt ol::-webkit-scrollbar { display: none; }
.ma-karten-inhalt a { display: inline-flex; align-items: center; gap: var(--mm-space-2); padding: 5px 12px 5px 6px; border: 1px solid var(--mm-color-border); border-radius: 999px; background: var(--mm-color-surface); color: var(--mm-color-ink-secondary); font: var(--mm-text-caption)/1.3 var(--mm-font-ui); text-decoration: none; white-space: nowrap; }
.ma-karten-inhalt a:hover { border-color: var(--mm-color-ink-secondary); color: var(--mm-color-ink); }
.ma-karten-inhalt a.ist-aktiv { background: var(--mm-color-surface-inverse); border-color: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }
.ma-karten-inhalt a.ist-aktiv .ma-karten-nr { background: rgba(255, 255, 255, 0.16); color: inherit; }
.ma-karten-inhalt li[hidden] { display: none; }
.ma-karten-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--mm-color-surface-subtle); font: var(--mm-weight-bold) 12px/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); font-variant-numeric: tabular-nums; }
.ma-karten-leer { margin: var(--mm-space-4) 0; color: var(--mm-color-ink-secondary); }
.ma-abschnitt-karte { margin: 0 0 var(--mm-space-3); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); scroll-margin-top: 190px; }
.ma-abschnitt-karte[open] { box-shadow: var(--mm-shadow-sm); }
.ma-abschnitt-karte > summary { display: flex; align-items: center; gap: var(--mm-space-3); padding: var(--mm-space-4) var(--mm-space-5); cursor: pointer; list-style: none; border-radius: var(--mm-radius-lg); }
.ma-abschnitt-karte > summary::-webkit-details-marker { display: none; }
.ma-abschnitt-karte > summary:hover .ma-abschnitt-karte-titel { color: var(--mm-color-brand-action); }
.ma-abschnitt-karte > summary:focus-visible { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-abschnitt-karte-titel { flex: 1; margin: 0; font-family: var(--mm-font-display); font-size: var(--mm-text-h4); font-weight: var(--mm-weight-semibold); line-height: 1.25; color: var(--mm-color-ink); hyphens: manual; }
.ma-abschnitt-karte-pfeil { flex: none; display: inline-flex; color: var(--mm-color-ink-muted); transition: transform var(--mm-duration-fast) var(--mm-ease-standard); }
.ma-abschnitt-karte[open] .ma-abschnitt-karte-pfeil { transform: rotate(180deg); }
.ma-abschnitt-karte-inhalt { padding: var(--mm-space-5) var(--mm-space-6) var(--mm-space-6); border-top: 1px solid var(--mm-color-border); }
.ma-abschnitt-karte[hidden] { display: none; }
@media (max-width: 768px) {
	.ma-karten-werkzeug { position: static; }
	.ma-abschnitt-karte { scroll-margin-top: 84px; }
	.ma-abschnitt-karte > summary { padding: var(--mm-space-4); }
	.ma-abschnitt-karte-inhalt { padding: var(--mm-space-4); }
}

/* ---------- Schranke, Probekapitel, Einladung, Testende (Wortlaut und Klassen wie Topic Cards 1.9.5) ---------- */
.mm-probe-hinweis { max-width: var(--mm-container-prose); margin: 0 0 var(--mm-space-5); padding: 10px var(--mm-space-4); background: var(--mm-color-surface-subtle); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); }
.mm-probe-hinweis p { margin: 0; font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.mm-probe-hinweis a { color: var(--mm-color-brand-action); }
.ma-prosa .mm-schranke { font-family: var(--mm-font-ui); hyphens: manual; }
.mm-schranke-fade { position: relative; height: 110px; margin: -110px 0 0; background: linear-gradient(to bottom, rgba(253, 249, 244, 0), var(--mm-color-surface-paper)); pointer-events: none; }
.mm-schranke-box { position: relative; margin: 0 0 var(--mm-space-5); padding: 26px 28px; background: var(--mm-color-brand-wash); border-left: 5px solid var(--mm-color-brand); border-radius: 0 var(--mm-radius-lg) var(--mm-radius-lg) 0; }
.mm-schranke-kicker, .mm-einladung-kicker { margin: 0 0 var(--mm-space-2); font: var(--mm-weight-bold) 12px/1.4 var(--mm-font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--mm-color-brand-action); }
.mm-schranke-titel, .mm-einladung-titel { margin: 0 0 10px; font: var(--mm-weight-semibold) 25px/1.24 var(--mm-font-display); letter-spacing: -0.01em; color: var(--mm-color-ink); text-wrap: balance; }
.mm-schranke-text { margin: 0 0 18px; max-width: 560px; font-size: 15.5px; line-height: 1.55; color: var(--mm-color-ink-secondary); }
.mm-schranke-aktionen, .mm-einladung-aktionen, .mm-testende-aktionen { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.mm-schranke-knopf, .mm-einladung-knopf, .mm-testende-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--mm-radius-md); background: var(--mm-color-brand-action); color: #fff !important; font: var(--mm-weight-semibold) 15.5px/1.2 var(--mm-font-ui); text-decoration: none !important; }
.mm-schranke-knopf:hover, .mm-einladung-knopf:hover, .mm-testende-knopf:hover { background: var(--mm-color-brand-strong); }
.mm-schranke-login, .mm-einladung-login { font: 14px/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary) !important; text-decoration: underline; text-underline-offset: 3px; }
.mm-schranke-login:hover, .mm-einladung-login:hover { color: var(--mm-color-brand-action) !important; }
.mm-schranke-gliederung { padding: 20px 24px; background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.mm-schranke-gliederung-titel { margin: 0 0 12px; font: var(--mm-weight-bold) 13px/1.4 var(--mm-font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--mm-color-ink-muted); }
.ma-prosa .mm-schranke-gliederung ol { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: mm-glied; }
.ma-prosa .mm-schranke-gliederung li { counter-increment: mm-glied; display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 7px 0; font-size: 15.5px; line-height: 1.4; color: var(--mm-color-ink-secondary); border-top: 1px solid var(--mm-color-border); }
.ma-prosa .mm-schranke-gliederung li:first-child { border-top: 0; }
.mm-schranke-gliederung li::before { content: counter(mm-glied); flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--mm-color-surface-subtle); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--mm-color-ink-muted); }
.mm-schranke-gliederung li::after {
	content: ""; flex: none; width: 13px; height: 13px; margin-left: auto; background: currentColor; opacity: .45;
	-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'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%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'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Einladung: Geschwister der Schranke, aber ruhig – keine Auslaufkante, keine Vermilion-Kante, mittig */
.mm-einladung { max-width: var(--mm-container-prose); margin: var(--mm-space-8) 0 var(--mm-space-2); }
.mm-einladung-box { padding: 32px 32px 28px; background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); text-align: center; }
.mm-einladung-titel { margin: 0 auto 12px; font-size: 26px; line-height: 1.22; }
.mm-einladung-text { margin: 0 auto 22px; max-width: 54ch; font: 17.5px/1.6 var(--mm-font-prose); color: var(--mm-color-ink-secondary); }
.mm-einladung-aktionen { justify-content: center; gap: 12px 22px; }
.mm-einladung-fuss { margin: 18px 0 0; font: 13px/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
/* Testende: oben, schmal, mit Ausblenden */
.mm-testende { max-width: var(--mm-container-prose); margin: 0 0 var(--mm-space-6); }
.mm-testende-box { padding: var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.mm-testende-text { margin: 0 0 var(--mm-space-4); font: 15.5px/1.55 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.mm-testende-titel { display: block; margin-bottom: 4px; font: var(--mm-weight-semibold) 19px/1.3 var(--mm-font-display); color: var(--mm-color-ink); }
.mm-testende-aus { min-height: 44px; padding: 0 var(--mm-space-4); background: transparent; border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-md); font: var(--mm-weight-semibold) 14px/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); cursor: pointer; }
@media (max-width: 600px) {
	.mm-schranke-box { padding: 20px 18px; }
	.mm-schranke-titel { font-size: 21px; }
	.mm-einladung-box { padding: 24px 18px 22px; }
	.mm-einladung-titel { font-size: 22px; }
	.mm-einladung-aktionen { flex-direction: column; }
	.mm-einladung-knopf { width: 100%; }
}

/* ---------- Hinweis ---------- */
.ma-hinweis { max-width: var(--mm-container-prose); margin-top: var(--mm-space-6); padding: var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-hinweis p { margin: 0; }
.ma-hinweis p + p { margin-top: var(--mm-space-2); }

/* ---------- Fußzeile ---------- */
.ma-fuss { background: var(--mm-color-surface); border-top: 1px solid var(--mm-color-border); font-size: var(--mm-text-small); color: var(--mm-color-ink-secondary); }
.ma-fuss-innen { max-width: var(--mm-container-page); margin: 0 auto; padding: var(--mm-space-7) var(--mm-space-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--mm-space-7); }
.ma-fuss-marke svg { height: 42px; width: auto; margin-bottom: var(--mm-space-3); }
.ma-fuss-marke p { margin: 0 0 var(--mm-space-2); max-width: 34ch; }
.ma-fuss-links { list-style: none; margin: 0; padding: 0; columns: 3 160px; column-gap: var(--mm-space-5); }
.ma-fuss-links li { break-inside: avoid; margin-bottom: var(--mm-space-2); }
.ma-fuss a { color: var(--mm-color-ink-secondary); text-decoration: none; }
.ma-fuss a:hover { color: var(--mm-color-brand-action); text-decoration: underline; }
@media (max-width: 768px) { .ma-fuss-innen { grid-template-columns: 1fr; gap: var(--mm-space-5); padding: var(--mm-space-6) var(--mm-space-4); } }

/* ---------- Lektionsinhalt: Themen und Tests unter der Lektion ---------- */
.ma-lehrtext .ma-lektionsinhalt { max-width: calc(var(--mm-container-prose) + 2 * var(--mm-space-6) + 2px); }
.ma-lehrtext .ma-lektionsinhalt:first-child, .ma-titel + .ma-lektionsinhalt > .ma-abschnitt:first-child { margin-top: 0; }
.ma-testliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface); }
.ma-testliste li + li { border-top: 1px solid var(--mm-color-border); }
.ma-testliste a { display: block; padding: var(--mm-space-3) var(--mm-space-5); color: var(--mm-color-ink); text-decoration: none; font-weight: var(--mm-weight-semibold); }
.ma-testliste a:hover { color: var(--mm-color-brand-action); }

/* ---------- Testspieler: Prüfungsansicht ohne Vermilion (Styleguide), Handlung in Navy 900 ---------- */
.ma-testspieler { max-width: calc(var(--mm-container-prose) + 2 * var(--mm-space-6) + 2px); margin-top: var(--mm-space-5); scroll-margin-top: 90px; }
.ma-test-reiter { display: flex; gap: var(--mm-space-1); margin-bottom: var(--mm-space-4); border-bottom: 1px solid var(--mm-color-border); }
.ma-test-reiter button { margin-bottom: -1px; padding: var(--mm-space-3) var(--mm-space-4); background: none; border: 0; border-bottom: 2px solid transparent; font: var(--mm-weight-semibold) var(--mm-text-small)/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); cursor: pointer; }
.ma-test-reiter button[aria-selected="true"] { color: var(--mm-color-ink); border-bottom-color: var(--mm-color-ink); }
.ma-test-material { padding: var(--mm-space-6); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-test-buehne[aria-busy="true"] { opacity: .6; pointer-events: none; }

.ma-test-start, .ma-test-frage, .ma-test-zusammenfassung, .ma-test-ergebnis-kopf { padding: var(--mm-space-6); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-test-fakten { list-style: none; margin: var(--mm-space-3) 0 var(--mm-space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--mm-space-2) var(--mm-space-5); font: var(--mm-text-body)/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-fakten strong { color: var(--mm-color-ink); }
.ma-test-hinweis { margin: 0 0 var(--mm-space-5); max-width: 56ch; font: var(--mm-text-small)/1.55 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }

.ma-test-knopf, .ma-test-knopf-zweit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--mm-space-5); border-radius: var(--mm-radius-md); font: var(--mm-weight-semibold) var(--mm-text-body)/1 var(--mm-font-ui); cursor: pointer; }
.ma-test-knopf { background: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); border: 1px solid var(--mm-color-surface-inverse); }
.ma-test-knopf:hover { background: var(--mm-navy-800); border-color: var(--mm-navy-800); }
.ma-test-knopf-zweit { background: var(--mm-color-surface); color: var(--mm-color-ink); border: 1px solid var(--mm-color-border-strong); }
.ma-test-knopf-zweit:hover { border-color: var(--mm-color-ink); }
.ma-test-knopf-zweit:disabled { opacity: .4; cursor: default; }
.ma-test-knopf:focus-visible, .ma-test-knopf-zweit:focus-visible, .ma-test-feld:focus-visible, .ma-test-link:focus-visible { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-test-link { margin-top: var(--mm-space-3); padding: 0; background: none; border: 0; font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ma-test-link:hover { color: var(--mm-color-ink); }

.ma-test-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mm-space-4); margin-bottom: var(--mm-space-3); font-family: var(--mm-font-ui); }
.ma-test-stand { margin: 0; font-size: var(--mm-text-body); color: var(--mm-color-ink-secondary); }
.ma-test-stand strong { color: var(--mm-color-ink); }
.ma-test-uhr { margin: 0; font-size: var(--mm-text-small); font-variant-numeric: tabular-nums; color: var(--mm-color-ink-secondary); }
.ma-test-uhr.ist-knapp { color: var(--mm-color-danger); font-weight: var(--mm-weight-semibold); }

.ma-test-uebersicht { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--mm-space-4); }
.ma-test-feld { width: 36px; height: 36px; padding: 0; border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-sm); background: var(--mm-color-surface); font: var(--mm-weight-semibold) 13px/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); font-variant-numeric: tabular-nums; cursor: pointer; position: relative; }
.ma-test-feld:hover { border-color: var(--mm-color-ink); color: var(--mm-color-ink); }
.ma-test-feld.ist-beantwortet { background: var(--mm-navy-100); border-color: var(--mm-navy-300); color: var(--mm-color-ink); }
.ma-test-feld.ist-markiert::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mm-color-warning-wash); border: 2px solid var(--mm-color-warning); }
.ma-test-feld.ist-aktuell { background: var(--mm-color-surface-inverse); border-color: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }

.ma-test-frage > .ma-etikett { margin-bottom: var(--mm-space-3); }
.ma-test-text:focus { outline: none; }
.ma-test-text img { display: block; margin: var(--mm-space-3) auto; border-radius: var(--mm-radius-sm); }
.ma-test-optionen { display: flex; flex-direction: column; gap: var(--mm-space-2); margin: var(--mm-space-5) 0 0; padding: 0; list-style: none; }
.ma-test-option { display: flex; align-items: flex-start; gap: var(--mm-space-3); min-height: 48px; padding: var(--mm-space-3) var(--mm-space-4); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); font: var(--mm-text-body)/1.5 var(--mm-font-ui); color: var(--mm-color-ink); position: relative; }
label.ma-test-option { cursor: pointer; }
label.ma-test-option:hover { border-color: var(--mm-color-border-strong); }
.ma-test-option input { position: absolute; opacity: 0; width: 1px; height: 1px; clip-path: inset(50%); }
.ma-test-option:focus-within { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-test-buchstabe { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--mm-color-border-strong); border-radius: 50%; font: var(--mm-weight-bold) 13px/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-option-text { flex: 1; min-width: 0; padding-top: 3px; overflow-x: auto; }
.ma-test-option-text p { margin: 0; }
.ma-test-option.ist-gewaehlt { border-color: var(--mm-color-ink); background: var(--mm-navy-50); box-shadow: inset 0 0 0 1px var(--mm-color-ink); }
.ma-test-option.ist-gewaehlt .ma-test-buchstabe { background: var(--mm-color-surface-inverse); border-color: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }
.ma-test-tipp { margin-top: var(--mm-space-4); font: var(--mm-text-small)/1.55 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-tipp summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ma-test-tipp .ma-prosa { margin-top: var(--mm-space-2); padding: var(--mm-space-3) var(--mm-space-4); background: var(--mm-color-surface-subtle); border-radius: var(--mm-radius-md); font-size: var(--mm-text-small); }

.ma-test-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2); margin-top: var(--mm-space-5); }
.ma-test-leiste .ma-test-knopf { margin-left: auto; }
.ma-test-frage + .ma-test-leiste + .ma-test-link { display: block; margin-left: auto; }
.ma-test-gross { margin: 0 0 var(--mm-space-2); font: var(--mm-text-h4)/1.35 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-gross strong { color: var(--mm-color-ink); }
.ma-test-zusammenfassung > p:not(.ma-test-gross) { margin: 0 0 var(--mm-space-4); color: var(--mm-color-ink-secondary); }
.ma-test-meldung { margin: 0 0 var(--mm-space-3); padding: var(--mm-space-3) var(--mm-space-4); background: var(--mm-color-danger-wash); border-radius: var(--mm-radius-md); font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-danger); }

/* Ergebnis */
.ma-test-zeit-um { margin: 0 0 var(--mm-space-3); font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-warning); }
.ma-test-prozent { margin: 0; font: var(--mm-weight-semibold) 56px/1 var(--mm-font-display); color: var(--mm-color-ink); font-variant-numeric: tabular-nums; }
.ma-test-prozent span { font-size: 0.5em; color: var(--mm-color-ink-secondary); }
.ma-test-ergebnis-kopf .ma-test-gross { margin-top: var(--mm-space-3); }
.ma-test-ergebnis-fakten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2) var(--mm-space-5); margin: var(--mm-space-3) 0 0; font: var(--mm-text-small)/1.4 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-plakette { padding: 4px 10px; border-radius: 999px; font-weight: var(--mm-weight-semibold); }
.ma-test-plakette.ist-bestanden { background: var(--mm-color-success-wash); color: var(--mm-color-success); }
.ma-test-plakette.ist-offen { background: var(--mm-color-surface-subtle); color: var(--mm-color-ink-secondary); }
.ma-test-filter { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); margin-bottom: var(--mm-space-4); }
.ma-test-filter-knopf { min-height: 36px; padding: 0 var(--mm-space-4); border: 1px solid var(--mm-color-border); border-radius: 999px; background: var(--mm-color-surface); font: var(--mm-weight-semibold) var(--mm-text-small)/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); cursor: pointer; }
.ma-test-filter-knopf[aria-pressed="true"] { background: var(--mm-color-surface-inverse); border-color: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }
.ma-test-aufloesung { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mm-space-4); }
.ma-test-aufgabe { padding: var(--mm-space-5) var(--mm-space-6); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-left: 4px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-lg); }
.ma-test-aufgabe.ist-richtig { border-left-color: var(--mm-color-success); }
.ma-test-aufgabe.ist-falsch { border-left-color: var(--mm-color-danger); }
.ma-test-aufgabe-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--mm-space-3); }
.ma-test-urteil { font: var(--mm-weight-semibold) var(--mm-text-small)/1 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ist-richtig .ma-test-urteil { color: var(--mm-color-success); }
.ist-falsch .ma-test-urteil { color: var(--mm-color-danger); }
.ma-test-optionen.ist-aufgeloest .ma-test-option { min-height: 0; }
.ma-test-option.ist-loesung { border-color: var(--mm-color-success); border-style: dashed; }
.ma-test-option.ist-loesung.ist-gewaehlt { border-style: solid; background: var(--mm-color-success-wash); box-shadow: none; }
.ma-test-option.ist-loesung .ma-test-buchstabe { border-color: var(--mm-color-success); color: var(--mm-color-success); }
.ma-test-option.ist-loesung.ist-gewaehlt .ma-test-buchstabe { background: var(--mm-color-success); color: #fff; }
.ma-test-option.ist-irrtum { border-color: var(--mm-color-danger); background: var(--mm-color-danger-wash); box-shadow: none; }
.ma-test-option.ist-irrtum .ma-test-buchstabe { background: var(--mm-color-danger); border-color: var(--mm-color-danger); color: #fff; }
.ma-test-notiz { flex: none; align-self: center; font: var(--mm-weight-semibold) 12px/1.2 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ist-loesung .ma-test-notiz { color: var(--mm-color-success); }
.ist-irrtum .ma-test-notiz { color: var(--mm-color-danger); }
.ma-test-erklaerung { margin-top: var(--mm-space-4); padding: var(--mm-space-4) var(--mm-space-5); background: var(--mm-color-surface-subtle); border-radius: var(--mm-radius-md); }
.ma-test-erklaerung .ma-etikett { margin-bottom: var(--mm-space-2); }
.ma-test-erklaerung .ma-prosa { font-size: 1.0625rem; }
.ma-test-melden { margin-top: var(--mm-space-3); }
.ma-test-melden-form { margin-top: var(--mm-space-3); padding: var(--mm-space-4); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); font-family: var(--mm-font-ui); }
.ma-test-gruende { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); margin: 0 0 var(--mm-space-3); padding: 0; border: 0; }
.ma-test-gruende legend { margin-bottom: var(--mm-space-2); font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); }
.ma-test-grund { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--mm-color-border); border-radius: 999px; font-size: var(--mm-text-small); cursor: pointer; }
.ma-test-grund:has(input:checked) { background: var(--mm-color-surface-inverse); border-color: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); }
.ma-test-grund input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ma-test-grund:focus-within { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-test-anmerkung { display: block; width: 100%; margin-bottom: var(--mm-space-3); padding: var(--mm-space-3); border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-md); font: var(--mm-text-small)/1.5 var(--mm-font-ui); }
.ma-test-melden-form .ma-test-link { margin-left: var(--mm-space-4); }
.ma-test-gemeldet { margin: 0; font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-success); }

/* Mehrfachwahl (Emotionen erkennen) und Rangreihe (Soziales Entscheiden) */
.ma-test-art { margin-top: var(--mm-space-5); }
.ma-test-art .ma-test-optionen { margin-top: var(--mm-space-3); }
.ma-test-anleitung { margin: 0 0 var(--mm-space-3); font: var(--mm-text-small)/1.5 var(--mm-font-ui); color: var(--mm-color-ink-secondary); }
.ma-test-kreuz .ma-test-buchstabe { border-radius: var(--mm-radius-sm); }
.ma-test-rang { display: flex; flex-direction: column; gap: var(--mm-space-2); margin: 0; padding: 0; list-style: none; }
.ma-test-rang-zeile { display: flex; align-items: center; gap: var(--mm-space-3); min-height: 52px; padding: var(--mm-space-2) var(--mm-space-2) var(--mm-space-2) var(--mm-space-4); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); font: var(--mm-text-body)/1.5 var(--mm-font-ui); color: var(--mm-color-ink); }
.ma-test-rang-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--mm-radius-sm); background: var(--mm-color-surface-inverse); color: var(--mm-color-ink-inverse); font: var(--mm-weight-bold) 13px/1 var(--mm-font-ui); font-variant-numeric: tabular-nums; }
.ma-test-rang-zeile .ma-test-option-text { padding-top: 0; }
.ma-test-rang-pfeile { flex: none; display: flex; gap: 4px; }
.ma-test-rang-pfeil { width: 40px; height: 40px; padding: 0; border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-sm); background: var(--mm-color-surface); font: var(--mm-weight-bold) 18px/1 var(--mm-font-ui); color: var(--mm-color-ink); cursor: pointer; }
.ma-test-rang-pfeil:hover:not(:disabled) { border-color: var(--mm-color-ink); }
.ma-test-rang-pfeil:disabled { opacity: .3; cursor: default; }
.ma-test-rang-pfeil:focus-visible { outline: 2px solid var(--mm-color-ink); outline-offset: 2px; }
.ma-test-rang-ok { margin-top: var(--mm-space-3); }
.ma-test-rang.ist-aufgeloest .ma-test-rang-zeile { padding-right: var(--mm-space-4); }
.ma-test-rang-zeile.ist-loesung { border-color: var(--mm-color-success); background: var(--mm-color-success-wash); }
.ma-test-rang-zeile.ist-loesung .ma-test-rang-nr { background: var(--mm-color-success); }
.ma-test-rang-zeile.ist-irrtum { border-color: var(--mm-color-border-strong); }
.ma-test-rang-zeile.ist-irrtum .ma-test-notiz { color: var(--mm-color-danger); }
.ma-test-rang-loesung { margin-top: var(--mm-space-5); }
.ma-test-aufgabe.ist-teilweise { border-left-color: var(--mm-warning-500); }
.ist-teilweise .ma-test-urteil { color: var(--mm-color-warning); }
@media (max-width: 600px) {
	.ma-test-rang-zeile { gap: var(--mm-space-2); padding-left: var(--mm-space-3); font-size: var(--mm-text-small); }
	.ma-test-rang-pfeile { flex-direction: column; }
	.ma-test-rang-pfeil { width: 40px; height: 34px; font-size: 16px; }
}
@media (max-width: 600px) {
	.ma-test-start, .ma-test-frage, .ma-test-zusammenfassung, .ma-test-ergebnis-kopf, .ma-test-material { padding: var(--mm-space-4); }
	.ma-test-aufgabe { padding: var(--mm-space-4); }
	.ma-test-leiste .ma-test-knopf { flex: 1 0 100%; margin-left: 0; order: -1; }
	.ma-test-leiste .ma-test-knopf-zweit { flex: 1; }
	.ma-test-prozent { font-size: 44px; }
}

/* ---------- Lernbereich: Schreibtisch, Einstellungen, Deine Kurse (lernbereich.php) ---------- */
.ma-lernleiste ul + ul { margin-top: var(--mm-space-3) !important; padding-top: var(--mm-space-3) !important; border-top: 1px solid var(--mm-color-border); }
.ma-st .ma-titel { margin-bottom: var(--mm-space-2); }
.ma-st-unter { margin: 0 0 var(--mm-space-6); font-size: var(--mm-text-body); color: var(--mm-color-ink-secondary); }
.ma-st-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mm-space-6); align-items: start; }
.ma-st-haupt { display: flex; flex-direction: column; gap: var(--mm-space-5); min-width: 0; }
.ma-st-seite { display: flex; flex-direction: column; background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-st-kachel { padding: var(--mm-space-4) var(--mm-space-5); }
.ma-st-kachel + .ma-st-kachel { border-top: 1px solid var(--mm-color-border); }
.ma-st-kachel p { margin: var(--mm-space-2) 0 0; }
.ma-st-kachel .ma-etikett { margin: 0; }
.ma-st-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mm-space-4); padding: var(--mm-space-5); background: var(--mm-color-brand-wash); border: 1px solid var(--mm-vermilion-100); border-radius: var(--mm-radius-lg); }
.ma-st-band > div { flex: 1 1 280px; min-width: 0; }
.ma-st-titel { margin: var(--mm-space-1) 0 0; font-size: var(--mm-text-h3); line-height: 1.24; }
.ma-st-knoepfe { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); margin: 0; }
.ma-st-liste ol { list-style: none; margin: var(--mm-space-2) 0 var(--mm-space-3); padding: 0; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface); }
.ma-st-liste li + li { border-top: 1px solid var(--mm-color-border); }
.ma-st-liste li a { display: flex; gap: var(--mm-space-3); align-items: baseline; padding: var(--mm-space-3) var(--mm-space-4); color: var(--mm-color-ink); text-decoration: none; }
.ma-st-liste li a:hover { background: var(--mm-color-surface-subtle); }
.ma-st-art { flex: 0 0 4.5rem; font-size: var(--mm-text-label); font-weight: var(--mm-weight-bold); letter-spacing: var(--mm-tracking-label); text-transform: uppercase; color: var(--mm-color-ink-muted); }
.ma-st-wert { font-family: var(--mm-font-display); font-size: var(--mm-text-h2); font-weight: var(--mm-weight-semibold); line-height: 1.1; color: var(--mm-color-ink); font-variant-numeric: tabular-nums; }
.ma-st-klein { font-size: var(--mm-text-small); color: var(--mm-color-ink-secondary); }
.ma-st-klein.ist-ok { color: var(--mm-color-success); }
.ma-st-klein.ist-warn { color: var(--mm-color-warning); }
.ma-pfeil { font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); color: var(--mm-color-brand-action); text-decoration: none; }
.ma-pfeil::after { content: " →"; }
.ma-pfeil:hover { text-decoration: underline; }
.ma-balken { display: block; height: 6px; margin-top: var(--mm-space-2); border-radius: var(--mm-radius-full); background: var(--mm-color-surface-subtle); overflow: hidden; }
.ma-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--mm-color-success); }
.ma-st-kurse, .ma-st-zugaenge { list-style: none; margin: var(--mm-space-2) 0 0; padding: 0; }
.ma-st-kurs { display: block; margin: 0 calc(-1 * var(--mm-space-2)); padding: var(--mm-space-2); border-radius: var(--mm-radius-sm); color: var(--mm-color-ink); text-decoration: none; }
.ma-st-kurs:hover { background: var(--mm-color-surface-subtle); }
.ma-st-kurs.ist-aktiv { background: var(--mm-color-brand-wash); }
.ma-st-kurs-kopf { display: flex; justify-content: space-between; font-size: var(--mm-text-small); }
.ma-st-kurs-kopf span { color: var(--mm-color-ink-secondary); font-variant-numeric: tabular-nums; }
.ma-st-zugaenge li { display: flex; flex-direction: column; padding: var(--mm-space-2) 0; }
.ma-st-zugaenge li + li { border-top: 1px solid var(--mm-color-border); }
.ma-st-zugaenge a { font-weight: var(--mm-weight-semibold); color: var(--mm-color-ink); text-decoration: none; }
.ma-st-zugaenge a:hover { color: var(--mm-color-brand-action); }
.ma-st-block { padding: var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-st-block h2 { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-h4); }
.ma-st-block p { margin: 0 0 var(--mm-space-3); max-width: var(--mm-container-prose); color: var(--mm-color-ink-secondary); line-height: 1.6; }
.ma-st-block p:last-child { margin-bottom: 0; }
.ma-st-block a:not([class]) { color: var(--mm-color-brand-action); }
.ma-st-hinweis { margin: 0 0 var(--mm-space-5); padding: var(--mm-space-3) var(--mm-space-4); border-radius: var(--mm-radius-md); background: var(--mm-color-warning-wash); color: var(--mm-color-ink); }
.ma-st-hinweis.ist-ok { background: var(--mm-color-success-wash); }
.ma-formular { display: flex; flex-wrap: wrap; gap: var(--mm-space-3) var(--mm-space-4); align-items: end; margin-top: var(--mm-space-3); }
.ma-formular label { display: flex; flex-direction: column; gap: var(--mm-space-1); flex: 1 1 200px; font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); color: var(--mm-color-ink); }
.ma-formular input { min-height: 44px; padding: 0 var(--mm-space-3); border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-md); font: var(--mm-text-body) var(--mm-font-ui); color: var(--mm-color-ink); background: var(--mm-color-surface); }
.ma-formular p { margin: 0 !important; flex: 0 0 auto; }
.ma-angebot { margin-top: var(--mm-space-7); }
.ma-angebot-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mm-space-4); margin: var(--mm-space-3) 0; }
.ma-angebot-karte { display: flex; flex-direction: column; gap: var(--mm-space-2); padding: var(--mm-space-4) var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); }
.ma-angebot-karte p { margin: 0; }
.ma-angebot-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mm-space-2); }
.ma-angebot-kopf a { font-family: var(--mm-font-display); font-size: var(--mm-text-h4); font-weight: var(--mm-weight-semibold); color: var(--mm-color-ink); text-decoration: none; }
.ma-angebot-kopf span { font-size: var(--mm-text-caption); color: var(--mm-color-ink-muted); }
.ma-angebot-text { flex: 1; font-size: var(--mm-text-small); line-height: 1.5; color: var(--mm-color-ink-secondary); }
.ma-angebot-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--mm-space-2); padding-top: var(--mm-space-3); border-top: 1px solid var(--mm-color-border); }
.ma-angebot-fuss b { font-variant-numeric: tabular-nums; }
.ma-angebot-fuss span { display: flex; gap: var(--mm-space-2); }
.ma-angebot-fuss .ma-knopf, .ma-angebot-fuss .ma-knopf-zweit { min-height: 38px; padding: 0 var(--mm-space-4); font-size: var(--mm-text-small); }
.ma-meine { margin: 0 0 var(--mm-space-7); }
.ma-meine h2 { margin: 0 0 var(--mm-space-4); }
.ma-meine-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--mm-space-4); }
.ma-meine-karte { display: flex; flex-direction: column; padding: var(--mm-space-5); background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); font-family: var(--mm-font-ui); }
.ma-meine-karte h3 { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-h4); }
.ma-meine-karte h3 a { color: var(--mm-color-ink); text-decoration: none; }
.ma-meine-karte p { margin: var(--mm-space-2) 0 0; }
.ma-meine-karte p:last-child { margin-top: var(--mm-space-4); }
.ma-pille { align-self: flex-start; padding: 2px var(--mm-space-3); border-radius: var(--mm-radius-full); font-size: var(--mm-text-caption); font-weight: var(--mm-weight-semibold); background: var(--mm-color-surface-subtle); color: var(--mm-color-ink-secondary); }
.ma-pille.ist-ok { background: var(--mm-color-success-wash); color: var(--mm-color-success); }
.ma-pille.ist-warn { background: var(--mm-color-warning-wash); color: var(--mm-color-warning); }
.mm-meine-kurse-doppelt { display: none !important; }
@media (max-width: 900px) {
	.ma-st-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Erledigt-Haken (erledigt.php) ---------- */
.ma-erledigt { max-width: var(--mm-container-prose); margin: var(--mm-space-7) 0 0; }
.ma-erledigt-knopf { gap: var(--mm-space-2); cursor: pointer; }
.ma-erledigt-knopf.ist-erledigt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--mm-space-4); border: 1px solid var(--mm-color-success); border-radius: var(--mm-radius-md); background: var(--mm-color-success-wash); color: var(--mm-color-success); font: var(--mm-weight-semibold) var(--mm-text-body)/1.3 var(--mm-font-ui); text-align: left; }
.ma-erledigt-knopf.ist-erledigt:hover { border-color: var(--mm-success-700); color: var(--mm-success-700); }
.ma-erledigt-haken { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; height: 22px; border-radius: var(--mm-radius-full); background: var(--mm-color-success); color: #fff; font-size: 13px; }
.ma-erledigt-leise { font-weight: var(--mm-weight-regular); color: var(--mm-color-ink-secondary); }
.ma-erledigt-meldung { max-width: var(--mm-container-prose); margin: var(--mm-space-7) 0 0; font-size: var(--mm-text-small); color: var(--mm-color-ink-secondary); }
.ma-erledigt-meldung + .ma-erledigt { margin-top: var(--mm-space-3); }
.ma-leiste a.ist-erledigt::after { content: "✓"; margin-left: var(--mm-space-2); font-weight: var(--mm-weight-bold); color: var(--mm-color-success); }
.ma-karte a.ist-erledigt { border-color: var(--mm-success-100); }
.ma-karte a.ist-erledigt::after { content: "✓ erledigt"; font-family: var(--mm-font-ui); font-size: var(--mm-text-caption); font-weight: var(--mm-weight-semibold); color: var(--mm-color-success); }

/* ---------- Gemeinsam für Startseite, Landingpages und Blog ---------- */
.ma-ss-rahmen { max-width: var(--mm-container-page); margin: 0 auto; padding: 0 var(--mm-space-5); }
.ma-ss-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mm-space-3); }
.ma-voll { width: 100%; }
.ma-landing-kopf { padding-top: var(--mm-space-7); }
.ma-landing-kopf .ma-titel { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Blog (blog.php) ---------- */
.ma-blog-beitrag { max-width: var(--mm-container-prose); margin: 0 auto; }
.ma-blog-kopf { margin-bottom: var(--mm-space-5); }
.ma-blog-kopf .ma-titel { margin-bottom: var(--mm-space-3); text-wrap: balance; }
.ma-blog-meta { margin: 0; font-size: var(--mm-text-small); color: var(--mm-color-ink-muted); }
.ma-blog-meta a { color: var(--mm-color-ink-secondary); }
.ma-blog-bild { margin: 0 0 var(--mm-space-6); }
.ma-blog-titelbild { display: block; width: 100%; height: auto; border-radius: var(--mm-radius-lg); }
.ma-blog-schluss { margin: var(--mm-space-8) 0 0; padding: var(--mm-space-6); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface-subtle); text-align: center; }
.ma-blog-schluss h2 { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-h3); }
.ma-blog-schluss p { margin: 0 auto var(--mm-space-4); max-width: 34em; color: var(--mm-color-ink-secondary); }
.ma-blog-schluss .ma-ss-knoepfe { margin-bottom: 0; }
.ma-blog-verwandt { max-width: var(--mm-container-page); margin: var(--mm-space-8) auto 0; }
.ma-blog-verwandt > h2 { margin: 0 0 var(--mm-space-4); font-size: var(--mm-text-h3); text-align: center; }
.ma-blog-listenkopf { max-width: 46rem; margin: 0 auto var(--mm-space-6); text-align: center; }
.ma-blog-listenkopf .ma-etikett a { color: var(--mm-color-brand-action); text-decoration: none; }
.ma-blog-listenkopf .ma-titel { margin: var(--mm-space-2) auto var(--mm-space-3); }
.ma-blog-beschreibung { color: var(--mm-color-ink-secondary); font-family: var(--mm-font-prose); font-size: 1.1rem; line-height: 1.6; }
.ma-blog-beschreibung a { color: var(--mm-color-brand-action); }
.ma-blog-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--mm-space-5); }
.ma-blog-karte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface); transition: box-shadow var(--mm-duration-fast) var(--mm-ease-standard); }
.ma-blog-karte:hover { box-shadow: var(--mm-shadow-md); }
.ma-blog-karte-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ma-blog-karte-text { display: flex; flex-direction: column; flex: 1; padding: var(--mm-space-4) var(--mm-space-5) var(--mm-space-5); }
.ma-blog-karte-text .ma-etikett { margin-bottom: var(--mm-space-2); }
.ma-blog-karte h2 { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-h4); line-height: 1.25; }
.ma-blog-karte h2 a { color: var(--mm-color-ink); text-decoration: none; }
.ma-blog-karte h2 a:hover { color: var(--mm-color-brand-action); }
.ma-blog-karte-text p { margin: 0 0 var(--mm-space-3); font-size: var(--mm-text-small); line-height: 1.55; color: var(--mm-color-ink-secondary); }
.ma-blog-karte-text .ma-blog-datum { margin: auto 0 0; color: var(--mm-color-ink-muted); font-size: var(--mm-text-caption); }
.ma-blog-seiten { margin-top: var(--mm-space-7); }
.ma-blog-seiten ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mm-space-2); margin: 0; padding: 0; list-style: none; }
.ma-blog-seiten a, .ma-blog-seiten span { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: 0 var(--mm-space-3); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-md); background: var(--mm-color-surface); color: var(--mm-color-ink); font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); text-decoration: none; }
.ma-blog-seiten .current { background: var(--mm-color-ink); border-color: var(--mm-color-ink); color: var(--mm-color-ink-inverse); }
/* Landingpages ohne mm-lp-Rahmen (Blog-Übersicht): Spalte wie im alten Theme */
.ma-landing-spalte { max-width: 1240px; margin: 0 auto; padding: 0 var(--mm-space-5); box-sizing: border-box; }
.ma-landing .ma-sr + * { margin-top: 0; }
.ma-landing-kopf:has(.ma-sr) { padding: 0; }
.ma-landing { padding-bottom: var(--mm-space-8); }
/* Anmeldung mit Passwort unter dem Code-Kasten von Mission Auth (/anmelden/, Elementor-Login-Widget) */
.ma-prosa #loginform { max-width: 420px; margin: var(--mm-space-4) auto 0; padding: var(--mm-space-5); border: 1px solid var(--mm-color-border); border-radius: var(--mm-radius-lg); background: var(--mm-color-surface); font-family: var(--mm-font-ui); }
.ma-prosa #loginform p { margin: 0 0 var(--mm-space-3); }
.ma-prosa #loginform label { display: block; margin-bottom: var(--mm-space-1); font-size: var(--mm-text-small); font-weight: var(--mm-weight-semibold); color: var(--mm-color-ink); }
.ma-prosa #loginform input[type="text"], .ma-prosa #loginform input[type="password"] { width: 100%; min-height: 44px; padding: 0 var(--mm-space-3); border: 1px solid var(--mm-color-border-strong); border-radius: var(--mm-radius-md); font: var(--mm-text-body) var(--mm-font-ui); box-sizing: border-box; }
.ma-prosa #loginform .login-remember label { display: inline; font-weight: var(--mm-weight-regular); }
.ma-prosa #loginform input[type="submit"] { min-height: 44px; padding: 0 var(--mm-space-5); border: 1px solid var(--mm-color-ink); border-radius: var(--mm-radius-md); background: var(--mm-color-ink); color: var(--mm-color-ink-inverse); font: var(--mm-weight-semibold) var(--mm-text-body) var(--mm-font-ui); cursor: pointer; }
.ma-seite-anmelden .ma-prosa > h1, .ma-seite-anmelden .ma-prosa > h1 + p { text-align: center; margin-left: auto; margin-right: auto; }

/* Einwilligungsbanner aus dem Elementor-Snippet 33337 (snippets.php): auf dem Handy enger gesetzt wie live im Customizer-CSS
   (Usability 04.09.2026: er deckte 243 von 812 px) */
@media (max-width: 767px) {
	#mm-consent { padding: 14px 16px !important; font-size: 13px; }
	#mm-consent p { font-size: 13px !important; line-height: 1.38 !important; margin: 0 0 10px !important; }
	#mm-consent .mm-c-btns { gap: 8px; }
	#mm-consent .mm-nein, #mm-consent .mm-ja { padding: 9px 16px !important; font-size: 14px !important; }
}

/* Rollbalken der Leisten im Markenstil: schmal, warmes Grau, beim Darüberfahren Vermilion (Deniz: „den Regler schön im CI“) */
.ma-al-nav,
.ma-leiste {
	scrollbar-width: thin;
	scrollbar-color: #DFD5C9 transparent;
}
.ma-al-nav:hover,
.ma-leiste:hover {
	scrollbar-color: #D63500 transparent;
}
.ma-al-nav::-webkit-scrollbar,
.ma-leiste::-webkit-scrollbar { width: 6px; }
.ma-al-nav::-webkit-scrollbar-track,
.ma-leiste::-webkit-scrollbar-track { background: transparent; }
.ma-al-nav::-webkit-scrollbar-thumb,
.ma-leiste::-webkit-scrollbar-thumb { background: #DFD5C9; border-radius: 999px; }
.ma-al-nav:hover::-webkit-scrollbar-thumb,
.ma-leiste:hover::-webkit-scrollbar-thumb { background: #D63500; }
.ma-al-nav::-webkit-scrollbar-button,
.ma-leiste::-webkit-scrollbar-button { display: none; height: 0; }

/* ---------- Kursübersicht (Deniz 03.11.: „viel schöner“) ---------- */
.ma-kurs-held {
	position: relative; overflow: hidden; margin: 0 0 var(--mm-space-6); padding: clamp(28px, 4vw, 52px);
	border-radius: 22px; color: #fff;
	background:
		radial-gradient(520px 260px at 92% 118%, rgba(255, 66, 3, .32), transparent 65%),
		radial-gradient(420px 220px at 8% -20%, rgba(255, 255, 255, .06), transparent 70%),
		var(--mm-color-surface-inverse, #232F3F);
}
.ma-kurs-held::after {
	content: ""; position: absolute; right: -10px; bottom: -6px; width: 300px; height: 150px; opacity: .22; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 60'%3E%3Cpath d='M0 60 L28 8 L44 36 L64 0 L88 60 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}
.ma-kurs-etikett { margin: 0 0 10px; font: 600 .75rem/1 var(--mm-font-ui, "Inter", sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #FF8A5C; }
.ma-kurs-held .ma-titel { color: #fff; margin: 0 0 16px; max-width: 22ch; }
.ma-kurs-vorspann p { margin: 0; max-width: 68ch; font-size: 1.08rem; line-height: 1.7; color: rgba(255, 255, 255, .84); position: relative; z-index: 1; }

.ma-kurs-reihe { display: grid; gap: var(--mm-space-5); align-items: start; margin: 0 0 var(--mm-space-7); }
@media (min-width: 1100px) {
	.ma-kurs-reihe { grid-template-columns: minmax(0, 1fr) 380px; }
	.ma-kurs-reihe > .ma-prosa { grid-column: 1; grid-row: 1 / span 6; }
	.ma-kurs-reihe > :not(.ma-prosa) { grid-column: 2; margin: 0 !important; }
}
.ma-kurs .ma-kurs-reihe > .ma-prosa { max-width: none; }
.ma-kurs .mm-kursintro > ul.mm-kursfakten { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 12px !important; margin: 0 !important; }
.ma-kurs .mm-kursfakten li {
	flex-direction: column !important; gap: 6px !important; padding: 18px 20px !important;
	background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: 16px;
	transition: border-color .15s, transform .15s;
}
.ma-kurs .mm-kursfakten li:hover { border-color: var(--mm-color-border-strong); transform: translateY(-1px); }
.ma-kurs .mm-kursfakten b { font-size: 2rem !important; line-height: 1 !important; color: var(--mm-color-ink) !important; }
.ma-kurs .mm-kursfakten li:nth-child(1) b, .ma-kurs .mm-kursfakten li:nth-child(4) b { color: var(--mm-color-brand-action, #D63500) !important; }

/* Abschnitte und Lektionskarten mit Themensymbol */
.ma-kurs .ma-abschnitt { margin: var(--mm-space-7) 0 var(--mm-space-4); padding-top: var(--mm-space-5); border-top: 1px solid var(--mm-color-border); }
.ma-kurs .ma-kursinhalt > .ma-abschnitt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ma-karte a { position: relative; border-radius: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ma-karte a:hover { transform: translateY(-2px); }
.ma-karte-sym {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 4px;
	background: var(--mm-color-brand-wash, #FFF4F2); color: var(--mm-color-brand-action, #D63500);
}
.ma-karte-sym .ma-al-sym { width: 22px; height: 22px; }
.ma-karte a:has(.ma-karte-sym)::before { position: absolute; top: var(--mm-space-5); right: var(--mm-space-5); }

/* ---------- Themenseite: mehr Breite, Klappblöcke als Karten ---------- */
body.ma-app .ma-kartensystem { max-width: 920px; }
.ma-haupt .wp-block-accordion {
	margin: 0 0 1.5em; border: 1px solid var(--mm-color-border); border-radius: 14px; overflow: hidden;
	background: var(--mm-color-surface-paper, #FDF9F4);
}
.ma-haupt .wp-block-accordion-item + .wp-block-accordion-item { border-top: 1px solid var(--mm-color-border); }
.ma-haupt .wp-block-accordion-heading { margin: 0 !important; font-size: 1rem; }
.ma-haupt .wp-block-accordion-heading__toggle {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border: 0; background: transparent; cursor: pointer; text-align: left;
	font: 600 .98rem/1.3 var(--mm-font-ui, "Inter", sans-serif); color: var(--mm-color-ink);
}
.ma-haupt .wp-block-accordion-heading__toggle:hover { background: var(--mm-color-surface-subtle); }
.ma-haupt .wp-block-accordion-heading__toggle-icon {
	flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
	background: var(--mm-color-brand-wash, #FFF4F2); color: var(--mm-color-brand-action, #D63500); font-size: 1.15rem; line-height: 1;
	transition: transform .2s;
}
.ma-haupt .wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
.ma-haupt .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle[aria-expanded="true"]) .wp-block-accordion-panel { padding: 0 18px 16px; }
.ma-haupt .wp-block-accordion-heading__toggle-title { text-decoration: none !important; }
.ma-haupt .wp-block-accordion-item { border-bottom: 0 !important; background: transparent !important; }
/* Countdown, Testzugang und Kaufkasten neben den Zahlen als Karten */
.ma-kurs-reihe > .mm-tor {
	box-sizing: border-box; padding: 24px 26px; background: var(--mm-color-surface);
	border: 1px solid var(--mm-color-border); border-radius: 18px; box-shadow: 0 1px 2px rgba(35, 47, 63, .04);
}
.ma-kurs-reihe > .mm-ticker .mm-tor-titel { margin: 0 0 8px; font-size: 1.25rem; }
.ma-kurs-reihe > .mm-ticker .mm-ticker-rest { margin: 0 0 8px; }
.ma-kurs-reihe > .mm-tor .mm-tor-vorspann { margin-bottom: 0; }

/* ---------- Breite im Lernbereich: Lesespalte 960 px, mittig (Deniz: „alle Seiten nur zur Hälfte“) ---------- */
body.ma-app { --mm-container-prose: 960px; }
body.ma-app .ma-haupt > .ma-lehrtext,
body.ma-app .ma-haupt > .ma-test { max-width: 1000px; margin-inline: auto; }
body.ma-app .ma-haupt > .ma-lehrtext .ma-prosa,
body.ma-app .ma-haupt > .ma-lehrtext .ma-kartensystem { max-width: none; }

/* ---------- Reiter Lernen und Üben ---------- */
.ma-reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--mm-space-6); }
.ma-reiter-knopf {
	display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; cursor: pointer;
	background: var(--mm-color-surface); border: 1px solid var(--mm-color-border); border-radius: 16px;
	color: var(--mm-color-ink); font: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ma-reiter-knopf .ma-al-sym {
	width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border-radius: 12px;
	background: var(--mm-color-surface-subtle); color: var(--mm-color-ink-secondary);
}
.ma-reiter-text { display: grid; gap: 2px; }
.ma-reiter-text strong { font: 600 1.05rem/1.2 var(--mm-font-display, Georgia, serif); }
.ma-reiter-text span { font-size: .86rem; color: var(--mm-color-ink-secondary); }
.ma-reiter-knopf:hover { border-color: var(--mm-color-border-strong); }
.ma-reiter-knopf[aria-selected="true"] { border-color: var(--mm-color-brand-action, #D63500); box-shadow: inset 0 0 0 1px var(--mm-color-brand-action, #D63500); background: var(--mm-color-brand-wash, #FFF4F2); }
.ma-reiter-knopf[aria-selected="true"] .ma-al-sym { background: var(--mm-color-brand-action, #D63500); color: #fff; }
.ma-reiter-knopf:focus-visible { outline: 2px solid var(--mm-color-brand); outline-offset: 2px; }
.ma-teil[hidden] { display: none; }
@media (max-width: 560px) { .ma-reiter-knopf { padding: 12px; gap: 10px; } .ma-reiter-knopf .ma-al-sym { width: 36px; height: 36px; padding: 8px; } }

/* ---------- Testliste ---------- */
.ma-testliste { overflow: hidden; border-radius: 16px; }
.ma-testliste a {
	display: flex !important; align-items: center; gap: 14px; padding: 14px 18px !important;
	color: var(--mm-color-ink) !important; font-weight: 600; transition: background .15s;
}
.ma-testliste a:hover { background: var(--mm-color-surface-subtle); color: var(--mm-color-ink) !important; }
.ma-testliste a:hover .ma-test-name { color: var(--mm-color-brand-action, #D63500); }
.ma-test-sym { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mm-color-brand-wash, #FFF4F2); color: var(--mm-color-brand-action, #D63500); }
.ma-test-sym .ma-al-sym { width: 20px; height: 20px; }
.ma-test-name { flex: 1; min-width: 0; }
.ma-test-zahl { flex: none; font-size: .82rem; font-weight: 500; color: var(--mm-color-ink-muted); }
.ma-testliste a > .ma-al-sym:last-child { flex: none; width: 16px; height: 16px; color: var(--mm-color-ink-muted); }
@media (min-width: 900px) {
	.ma-testliste-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0 !important; background: transparent !important; gap: 10px; overflow: visible; }
	.ma-testliste-raster li { border: 1px solid var(--mm-color-border) !important; border-radius: 14px; background: var(--mm-color-surface); overflow: hidden; }
}

/* ---------- Tabellen im Lehrtext: nur waagerechte Linien, Schlüssel-Wert-Tabellen mit heller erster Spalte ---------- */
.ma-haupt .ma-prosa table, .ma-haupt .ma-kartensystem table {
	width: 100%; border-collapse: separate !important; border-spacing: 0; margin: 1.5em 0;
	background: var(--mm-color-surface); border: 1px solid var(--mm-color-border) !important; border-radius: 14px; overflow: hidden;
	font: .95rem/1.5 var(--mm-font-ui, "Inter", sans-serif);
}
.ma-haupt .ma-prosa :is(td, th), .ma-haupt .ma-kartensystem :is(td, th) { border: 0 !important; border-top: 1px solid var(--mm-color-border) !important; padding: 12px 16px !important; vertical-align: top; text-align: left; }
.ma-haupt .ma-prosa tr:first-child > :is(td, th), .ma-haupt .ma-kartensystem tr:first-child > :is(td, th) { border-top: 0 !important; }
.ma-haupt .ma-prosa thead th, .ma-haupt .ma-kartensystem thead th { background: var(--mm-color-surface-subtle); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mm-color-ink-secondary); }
.ma-haupt .ma-prosa tbody tr > :first-child:is(th, :has(> strong:only-child)),
.ma-haupt .ma-kartensystem tbody tr > :first-child:is(th, :has(> strong:only-child)) { width: 32%; background: var(--mm-color-surface-paper, #FDF9F4); font-weight: 600; color: var(--mm-color-ink); }
.ma-haupt .wp-block-table { margin: 1.5em 0; overflow-x: auto; }
.ma-haupt .wp-block-table table { margin: 0; }

/* ---------- Knopf für Gäste unten in der Leiste ---------- */
.ma-al-gast .ma-knopf {
	display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px !important;
	border-radius: 12px; font: 600 .95rem/1 var(--mm-font-ui, "Inter", sans-serif); text-decoration: none;
	box-shadow: 0 6px 16px -8px rgba(214, 53, 0, .55); transition: transform .15s, box-shadow .15s, background .15s;
}
.ma-al-gast .ma-knopf::after { content: "→"; font-weight: 500; transition: transform .15s; }
.ma-al-gast .ma-knopf:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(214, 53, 0, .6); }
.ma-al-gast .ma-knopf:hover::after { transform: translateX(2px); }

/* Such- und Kapitelleiste der Karten klebt im Lernbereich nicht mehr: ohne Kopfzeile stand sie mitten im Text und verdeckte ihn */
body.ma-app .ma-karten-werkzeug { position: static; background: transparent; }