/**
 * Mission Therapie – Oberfläche (Etappe 1: Statistikseite)
 *
 * Folgt dem Mission-Medizin-Styleguide (Teil 2 und 3, gelesen 26.08.2026):
 * · Schriften  Fraunces (Display) · Source Serif 4 (Fließtext) · Inter (UI)
 * · Abstände   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 – nie freie Zahlen
 * · Radien     4 Badges · 6 Felder · 10 Boxen · 14 Karten · 20 Hero
 * · Buttons    44 px hoch, primär Vermilion 600, Fokusring Pflicht
 *
 * 🚨 Vermilion 500 #FF4203 fällt gegen Weiß durch WCAG AA (3,48:1) und ist
 * deshalb Flächen- und Signalfarbe, nie Textfarbe. Text trägt die
 * Aktionsstufe #D63500. Die Fortschrittsbalken laufen bewusst in 500:
 * „Hier ist der eine Ort, an dem Vermilion 500 als Fläche richtig ist:
 * Fortschritt ist ein Signal, kein Text." – Styleguide Teil 3, Abschnitt 4.
 *
 * Die Bühne ist Wert für Wert dieselbe wie in der Diagnostik – wer beide
 * Werkzeuge nacheinander benutzt, betritt dasselbe Haus.
 */

.mth {
	/* Marke */
	--mth-vermilion:     var( --mm-vermilion-500, #FF4203 );
	--mth-aktion:        var( --mm-vermilion-600, #D63500 );
	--mth-aktion-tief:   var( --mm-vermilion-700, #AB2800 );
	--mth-vermilion-50:  var( --mm-vermilion-50, #FFF4F2 );
	--mth-vermilion-200: var( --mm-vermilion-200, #FFCEC1 );

	--mth-navy:     var( --mm-navy-900, #232F3F );
	--mth-navy-800: var( --mm-navy-800, #374557 );
	--mth-navy-700: var( --mm-navy-700, #4F5E72 );
	--mth-navy-600: var( --mm-navy-600, #6B7A8E );
	--mth-navy-300: var( --mm-navy-300, #BCC8D8 );
	--mth-navy-200: var( --mm-navy-200, #D4DDE9 );
	--mth-navy-100: var( --mm-navy-100, #E9EEF5 );
	--mth-navy-50:  var( --mm-navy-50, #F4F7FB );

	--mth-sand-50:  var( --mm-sand-50, #FDF9F4 );
	--mth-sand:     var( --mm-sand-100, #F9F3EB );
	--mth-sand-200: var( --mm-sand-200, #EFE6DC );

	--mth-info:      var( --mm-info-600, #0061A2 );
	--mth-info-wash: var( --mm-info-100, #DFEFFF );

	/* Abstände und Radien – die 4-px-Basis aus Teil 3 */
	--sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px;
	--sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px;
	--r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;

	/* Schriften */
	--mth-display: var( --mm-font-display, "Fraunces", "Iowan Old Style", Georgia, serif );
	--mth-prosa:   var( --mm-font-prose, "Source Serif 4", "Iowan Old Style", Georgia, serif );
	--mth-ui:      var( --mm-font-ui, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif );

	--mth-lesestrecke: 680px;

	font-family: var( --mth-ui );
	color: var( --mth-navy-800 );
	line-height: 1.6;
	/* Die Lektionsspalte ist rund 760 px breit – alle Umbrüche hängen an
	   der Containerbreite, nicht am Fenster. */
	container-type: inline-size;
}

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

/* ---------------- Typografie ---------------- */

.mth h2,
.mth h3 {
	font-family: var( --mth-display );
	font-weight: 600;
	color: var( --mth-navy );
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var( --sp2 );
}

.mth h2 { font-size: clamp( 1.75rem, 4cqi, 2.5rem ); }
.mth h3 { font-size: clamp( 1.25rem, 2.6cqi, 1.6rem ); }

/*
 * 🚨 Notwehr gegen das Lehrtext-CSS der Lernplattform.
 *
 * Am 26.08.2026 in der Lektion „Lernstatistiken" gemessen: Drei Regeln
 * des Child-Themes fassen JEDEN Absatz und JEDES Listenelement im
 * Inhaltsbereich als Lehrtext an und setzen Source Serif 4, 19 px und
 * Navy 900:
 *     .entry-content p|li                       (0,1,1)
 *     .learndash-wrapper .ld-tabs-content p|li  (0,2,1)
 *     .learndash-wrapper .ld-tab-content li     (0,2,1)
 *
 * Eine einzelne Klasse wie `.mth-hinweis` (0,1,0) verliert dagegen -
 * die Hinweiszeilen standen live in Lehrtextgröße und -farbe. Auch
 * `.mth .mth-hinweis` (0,2,0) reicht nicht, und `.mth p.mth-hinweis`
 * (0,2,1) läge nur gleichauf: Dann entschiede die Ladereihenfolge,
 * und das Inline-CSS des Themes steht später im Dokument.
 *
 * Deshalb hängt die Oberflächen-Typografie an der Kennung des
 * Wurzelelements: (1,0,1) schlägt jede klassenbasierte Themeregel,
 * unabhängig davon, wer zuletzt geladen wird. Der Lehrtext der
 * Plattform bleibt unberührt - alles hier greift ausschliesslich
 * innerhalb von #mth-app.
 */
#mth-app p,
#mth-app li {
	font-family: var( --mth-ui );
	font-size: 1rem;
	line-height: 1.55;
	color: var( --mth-navy-800 );
	margin: 0 0 var( --sp3 );
}

#mth-app li { margin: 0; }

.mth-kicker {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --mth-aktion );
	margin-bottom: var( --sp3 );
}

/* Ebenfalls über die Kennung - sie müssen den Riegel oben überbieten. */
#mth-app p.mth-hinweis {
	color: var( --mth-navy-700 );
	max-width: var( --mth-lesestrecke );
}

#mth-app p.mth-fein {
	font-size: .85rem;
	line-height: 1.5;
	color: var( --mth-navy-600 );
	max-width: var( --mth-lesestrecke );
	margin: var( --sp3 ) 0 0;
}

/* ---------------- Buttons ---------------- */

.mth .mth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --sp2 );
	min-height: 44px;
	padding: 10px 22px;
	border-radius: var( --r-md );
	border: 1.5px solid transparent;
	font-family: var( --mth-ui );
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.mth .mth-btn:focus-visible {
	outline: none;
	box-shadow: var( --mm-focus-ring, 0 0 0 3px rgba( 255, 66, 3, .30 ) );
}

.mth .mth-btn-primaer {
	background: var( --mth-aktion );
	color: #fff !important;
}

.mth .mth-btn-primaer:hover {
	background: var( --mth-aktion-tief );
	color: #fff !important;
}

/* Knopf auf dunklem Grund (Bühne): Vermilion trägt dort keinen Text -
   weiße Kontur, der erste gefüllt. Dieselbe Lösung wie in der Diagnostik. */
.mth .mth-btn-hell {
	background: rgba( 245, 243, 236, .12 );
	color: #F5F3EC !important;
	border-color: rgba( 245, 243, 236, .38 );
	font-size: .85rem;
	padding: 9px 16px;
}

.mth .mth-btn-hell:hover {
	background: rgba( 245, 243, 236, .22 );
	color: #fff !important;
	border-color: rgba( 245, 243, 236, .6 );
}

.mth .mth-kopf-btns .mth-btn-hell:first-child {
	background: #fff;
	color: var( --mth-navy ) !important;
	border-color: #fff;
}

.mth .mth-kopf-btns .mth-btn-hell:first-child:hover {
	background: var( --mth-navy-100 );
	color: var( --mth-navy ) !important;
}

.mth .mth-btn-hell:focus-visible { outline-color: #fff; }

/* ---------------- Bühne ---------------- */

.mth .mth-kopf-banner {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 34px 32px 30px;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #F5F3EC;
	min-height: 230px;
	margin-bottom: var( --sp5 );
}

/* 🚨 `pointer-events: none` ist hier kein Schmuck, sondern eine Sicherung.
   Das Motiv liegt absolut über der ganzen Bühne und hängt daran, dass
   `.mth .mth-kopf-banner` seine Position behält. Fällt diese Regel aus -
   und der Customizer der Lernplattform hat Plugin-CSS schon dreimal
   überschrieben -, sucht sich das SVG den nächsten positionierten Vorfahren
   und legt sich als unsichtbare Schicht über die halbe Seite. Man sähe
   nichts und könnte nichts mehr anklicken. Ein Bild muss nie Klicks
   annehmen; damit ist dieser ganze Fehlerweg zu. */
.mth-kopf-bild { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.mth-kopf-text { position: relative; z-index: 1; flex: 1 1 260px; }

.mth .mth-kopf-banner .mth-kicker {
	display: block;
	font-family: var( --mth-ui );
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* Vermilion 500 fällt gegen Weiß durch; gegen Navy trägt diese
	   aufgehellte Stufe - dieselbe wie in Diagnostik und Rechner. */
	color: #FF8A5C;
	margin-bottom: 6px;
}

.mth .mth-kopf-name, .mth h2.mth-kopf-name {
	font-family: var( --mth-display );
	font-size: 2.15rem;
	line-height: 1.08;
	margin: 0 0 10px;
	color: #F5F3EC;
	font-weight: 600;
}

/* Auch hier über die Kennung - sie müssen den Riegel oben überbieten,
   und auf dunklem Grund wäre die geerbte Navy-Farbe navy auf navy. */
#mth-app p.mth-kopf-unter {
	font-family: var( --mth-ui );
	font-size: .92rem;
	line-height: 1.5;
	margin: 0;
	color: #B9C0CB;
	max-width: 48ch;
}

/* 🚨 Feste Basisbreite, nicht 'auto' - sonst bricht die Bühne um und die
   Knöpfe rutschen unter den Text (in der Diagnostik nachgemessen). */
.mth .mth-kopf-aktion {
	position: relative;
	flex: 0 1 300px;
	min-width: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: var( --sp2 );
}

.mth .mth-kopf-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var( --sp2 );
}

#mth-app p.mth-kopf-satz {
	font-family: var( --mth-ui );
	font-size: .92rem;
	line-height: 1.5;
	margin: 0;
	color: #B9C0CB;
	max-width: 46ch;
	text-align: right;
}

.mth .mth-kopf-banner p.mth-kopf-satz strong {
	color: #F5F3EC;
	font-weight: 600;
	font-family: var( --mth-display );
	font-size: 1.9rem;
	display: block;
	line-height: 1.15;
}

/* ---------------- Karten ---------------- */

.mth-karte {
	background: #fff;
	border: 1px solid var( --mth-navy-100 );
	border-radius: var( --r-lg );
	padding: clamp( 20px, 3cqi, 32px );
	margin-bottom: var( --sp5 );
}

.mth-karte-akzent { border-color: var( --mth-aktion ); }

/* ---------------- Beispiel-Banner ---------------- */

/* Information, keine Warnung: Info-Farben aus der Semantik-Palette, die
   bewusst weit vom Marken-Hue liegt. */
.mth-beispiel-banner {
	background: var( --mth-info-wash );
	border-left: 4px solid var( --mth-info );
	border-radius: 0 var( --r-sm ) var( --r-sm ) 0;
	padding: var( --sp3 ) var( --sp4 );
	margin-bottom: var( --sp5 );
	font-size: .93rem;
}

.mth .mth-beispiel-banner strong { color: var( --mth-info ); font-weight: 600; }

/* ---------------- Kennzahlen ---------------- */

.mth-zahlen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: var( --sp3 );
	margin-bottom: var( --sp5 );
}

.mth-zahl {
	background: var( --mth-sand-50 );
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-md );
	padding: var( --sp4 );
	display: grid;
	gap: var( --sp1 );
	align-content: start;
}

.mth .mth-zahl em {
	font-style: normal;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
}

.mth .mth-zahl strong {
	font-family: var( --mth-display );
	font-size: clamp( 1.6rem, 3.4cqi, 2.1rem );
	font-weight: 600;
	color: var( --mth-navy );
	line-height: 1.1;
	font-feature-settings: "tnum";
}

.mth .mth-zahl strong span { font-size: 1rem; color: var( --mth-navy-700 ); font-family: var( --mth-ui ); }

/* ---------------- Stand je Untertest ---------------- */

.mth-stand { display: grid; gap: var( --sp2 ); margin-top: var( --sp4 ); }

.mth-stand-teil {
	display: flex;
	align-items: baseline;
	gap: var( --sp3 );
	margin-top: var( --sp4 );
	padding-bottom: var( --sp1 );
	border-bottom: 1px solid var( --mth-sand-200 );
}

.mth-stand-teil:first-child { margin-top: 0; }

.mth .mth-stand-teil span {
	font-family: var( --mth-ui );
	font-weight: 700;
	font-size: .95rem;
	color: var( --mth-navy );
}

.mth .mth-stand-teil em {
	font-style: normal;
	font-size: .78rem;
	color: var( --mth-navy-600 );
}

.mth-stand-zeile {
	display: grid;
	grid-template-columns: minmax( 130px, 1.4fr ) 70px minmax( 90px, 2fr ) 130px;
	gap: var( --sp3 );
	align-items: center;
}

.mth .mth-stand-label { font-size: .93rem; color: var( --mth-navy-800 ); }

.mth .mth-stand-wert {
	font-size: .9rem;
	font-weight: 600;
	color: var( --mth-navy );
	text-align: right;
	font-feature-settings: "tnum";
	white-space: nowrap;
}

/* Fortschritt ist ein Signal: die eine Fläche, die Vermilion 500 trägt. */
.mth-balken {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var( --mth-sand-200 );
	overflow: hidden;
}

.mth-balken i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --mth-vermilion );
}

.mth .mth-stand-nutzen {
	font-size: .82rem;
	font-weight: 600;
	color: var( --mth-navy-700 );
	text-align: right;
	font-feature-settings: "tnum";
	white-space: nowrap;
}

.mth .mth-stand-nutzen em {
	font-style: normal;
	font-weight: 400;
	color: var( --mth-navy-600 );
}

/* ---------------- Hebel ---------------- */

.mth-hebel {
	list-style: none;
	margin: var( --sp4 ) 0 0;
	padding: 0;
	display: grid;
	gap: var( --sp2 );
}

.mth-hebel li {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: var( --sp3 );
	align-items: baseline;
	padding: var( --sp2 ) var( --sp3 );
	background: var( --mth-sand-50 );
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-md );
}

.mth .mth-hebel-rang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --mth-navy );
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	align-self: center;
}

/* 🚨 Farben hängen an strong/em selbst, nicht am li - BuddyBoss färbt
   Listenelemente im Inhaltsbereich mit höherer Spezifität um. */
.mth .mth-hebel li strong { color: var( --mth-navy ); font-size: .95rem; }
.mth .mth-hebel li em {
	font-style: normal;
	font-size: .85rem;
	color: var( --mth-navy-700 );
	font-feature-settings: "tnum";
	white-space: nowrap;
}

/* ---------------- Kalender (Etappe 2) ---------------- */

/* Zweitknopf: Rahmen Navy 600 - die 3:1-Regel für Bedienelemente. */
.mth .mth-btn-zweit {
	background: #fff;
	color: var( --mth-navy ) !important;
	border-color: var( --mth-navy-600 );
}

.mth .mth-btn-zweit:hover {
	background: var( --mth-navy-50 );
	color: var( --mth-navy ) !important;
}

.mth-knopfreihe { display: flex; flex-wrap: wrap; gap: var( --sp2 ); }

/* Die Blöcke der aktuellen Woche - große Klickflächen mit Häkchen. */
.mth-bloecke { display: grid; gap: var( --sp2 ); margin: var( --sp4 ) 0 var( --sp2 ); }

.mth .mth-block {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: var( --sp3 );
	align-items: center;
	padding: var( --sp3 ) var( --sp4 );
	background: var( --mth-sand-50 );
	border: 1.5px solid var( --mth-navy-600 );
	border-radius: var( --r-md );
	cursor: pointer;
}

.mth .mth-block input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var( --mth-aktion );
	cursor: pointer;
}

.mth .mth-block input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var( --mm-focus-ring, 0 0 0 3px rgba( 255, 66, 3, .30 ) );
}

.mth .mth-block strong { color: var( --mth-navy ); font-size: .95rem; }

.mth .mth-block em {
	font-style: normal;
	font-weight: 600;
	font-size: .88rem;
	color: var( --mth-navy-700 );
	font-feature-settings: "tnum";
	white-space: nowrap;
}

/* Erledigt: grüner Rand statt Durchstreichen - Completed-Zustand aus
   dem Styleguide, der Text bleibt lesbar. */
.mth .mth-block-an {
	border-color: var( --mm-success-600, #246E3A );
	background: var( --mm-success-100, #DFF3E2 );
}

.mth .mth-block input[type="checkbox"]:disabled { cursor: not-allowed; }

/* Die Wochenliste. */
.mth-wochen { display: grid; gap: 2px; margin-top: var( --sp4 ); }

.mth-woche {
	display: grid;
	grid-template-columns: 32px 96px 88px 1fr auto;
	gap: var( --sp3 );
	align-items: baseline;
	padding: var( --sp2 ) var( --sp3 );
	border-radius: var( --r-sm );
}

.mth-woche:nth-child( odd ) { background: var( --mth-sand-50 ); }

.mth-woche-jetzt {
	background: var( --mth-vermilion-50 ) !important;
	outline: 1.5px solid var( --mth-aktion );
}

.mth .mth-woche-nr {
	font-weight: 700;
	font-size: .85rem;
	color: var( --mth-navy );
	font-feature-settings: "tnum";
}

.mth .mth-woche-zeit,
.mth .mth-woche-phase {
	font-size: .82rem;
	color: var( --mth-navy-600 );
	font-feature-settings: "tnum";
	white-space: nowrap;
}

.mth .mth-woche-themen { font-size: .9rem; color: var( --mth-navy-800 ); }
.mth .mth-woche-themen strong { color: var( --mth-navy ); }
/* Die Themen der Woche - eine Zeile darunter, leiser als der
   Untertest, damit der Schwerpunkt der Schwerpunkt bleibt. */
.mth .mth-woche-stoff { display: block; font-size: .78rem; line-height: 1.35;
	color: var( --mth-navy-600 ); margin-top: .12rem; }

/* Simulations-Marke: Navy, nicht Vermilion - ein Termin ist keine
   Bewertung und kein Fortschritt. */
.mth .mth-simu-marke {
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: var( --mth-navy );
	border-radius: var( --r-xs );
	padding: 1px 6px;
	white-space: nowrap;
}

.mth .mth-woche-status {
	font-style: normal;
	font-size: .82rem;
	color: var( --mth-navy-600 );
	white-space: nowrap;
	text-align: right;
	font-feature-settings: "tnum";
}

.mth .mth-woche-fertig { color: var( --mm-success-600, #246E3A ); font-weight: 600; }
.mth .mth-woche-offen { color: var( --mm-danger-600, #951532 ); font-weight: 600; }

/* Alltagseinstellungen des Kalenders. */
/* 🚨 NEBENEINANDER, nicht untereinander. Deniz: "udn diese einstellungen
   wuerde ich breiter ganz oben hinmachen". Drei kurze Felder in drei
   Zeilen sind eine Treppe, die eine halbe Bildschirmhoehe kostet - und sie
   stehen jetzt ganz oben, wo sie den Plan darunter erklaeren. */
.mth-einstellungen {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --sp4 );
	margin-top: var( --sp3 );
}

.mth-einstellung { display: grid; gap: var( --sp2 ); flex: 0 1 auto; }

/* Der Hinweissatz bricht als Letztes um und nimmt die ganze Breite. */
.mth .mth-einstellungen > .mth-fein { flex: 1 1 100%; margin-top: 0; }

.mth .mth-einstellung > em {
	font-style: normal;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
}

.mth-tagwahlen { display: flex; flex-wrap: wrap; gap: var( --sp2 ); }

/* Tageskästchen: funktionale Ränder in Navy 600 (3:1-Regel); gewählt
   trägt den Selected-Zustand aus dem Styleguide. */
.mth .mth-tagwahl {
	display: inline-flex;
	align-items: center;
	gap: var( --sp1 );
	padding: 6px 12px;
	border: 1.5px solid var( --mth-navy-600 );
	border-radius: var( --r-sm );
	font-size: .88rem;
	font-weight: 600;
	color: var( --mth-navy );
	cursor: pointer;
	background: #fff;
}

.mth .mth-tagwahl input { margin: 0; accent-color: var( --mth-aktion ); }

.mth .mth-tagwahl-an {
	border-color: var( --mth-aktion );
	background: var( --mth-vermilion-50 );
}

.mth .mth-einstellung select,
.mth .mth-einstellung input[type="date"] {
	max-width: 220px;
	min-height: 40px;
	padding: 6px 10px;
	border: 1.5px solid var( --mth-navy-600 );
	border-radius: var( --r-sm );
	font-family: var( --mth-ui );
	font-size: .95rem;
	color: var( --mth-navy );
	background: #fff;
}

.mth .mth-einstellung select:focus-visible,
.mth .mth-einstellung input[type="date"]:focus-visible,
.mth .mth-tagwahl input:focus-visible {
	outline: none;
	box-shadow: var( --mm-focus-ring, 0 0 0 3px rgba( 255, 66, 3, .30 ) );
}

/* Phasen als Aufklapper. */
.mth-karte details {
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-md );
	padding: var( --sp3 ) var( --sp4 );
	margin-bottom: var( --sp2 );
}

.mth-karte summary { cursor: pointer; color: var( --mth-navy ); }
.mth-karte details ul { margin: var( --sp3 ) 0 0; padding-left: 20px; }
.mth-karte details li { margin-bottom: var( --sp2 ); }

/* ---------------- Verlauf (Etappe 4) ---------------- */

/* Die Kopfzahl über den Kurven: das, was sie zusammen bedeuten. */
.mth-projektion {
	border-bottom: 1px solid var( --mth-sand-200 );
	padding-bottom: var( --sp4 );
	margin-bottom: var( --sp2 );
}

.mth-proj-zahlen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp5 );
	margin: var( --sp4 ) 0 var( --sp3 );
}

.mth-proj-zahl { display: grid; gap: 2px; }

.mth .mth-proj-zahl em {
	font-style: normal;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
}

.mth .mth-proj-zahl strong {
	font-family: var( --mth-display );
	font-size: 1.5rem;
	font-weight: 600;
	color: var( --mth-navy );
	line-height: 1.1;
	font-feature-settings: "tnum";
}

/* Die erste Zahl ist die Aussage - sie darf grösser sein. */
.mth .mth-proj-zahl:first-child strong { font-size: clamp( 2rem, 4cqi, 2.6rem ); }

/* 🚨 Gleich hohe Karten innerhalb einer Reihe. Vorher richtete sich jede
   nach ihrem Text, und ein zweizeiliger Name wie "Figuren zusammensetzen"
   riss die Reihe auseinander - bei sieben Karten sieht das aus wie ein
   Fehler. Das leistet schon die Vorgabe align-items: stretch; die Karte
   ist ein flex-Kasten und schiebt ihren Fuss mit margin-top: auto nach
   unten. Ein zusaetzliches grid-auto-rows: 1fr waere falsch: Es blaeht
   eine letzte Reihe mit nur einer Karte auf deren volle Hoehe auf. */
.mth-verlauf {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --sp3 );
	margin-top: var( --sp4 );
}

.mth-verlauf-zelle {
	display: flex;
	flex-direction: column;
	background: var( --mth-sand-50 );
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-md );
	padding: var( --sp3 ) var( --sp4 );
}

.mth-verlauf-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --sp2 );
	margin-bottom: var( --sp1 );
	/* Platz fuer zwei Zeilen Name, damit ein langer Untertest die
	   Zahlen darunter nicht gegen die der Nachbarkarten verschiebt. */
	min-height: 2.6em;
}

.mth .mth-verlauf-kopf strong { color: var( --mth-navy ); font-size: .93rem; }

/* Der Abstand zur Diagnostik als kleine Plakette. Gefaerbt wird nur,
   wenn die Zahl etwas bedeutet - siehe verlaufKarte(). */
.mth-vz-delta {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.5;
	padding: 1px 7px;
	border-radius: 999px;
	white-space: nowrap;
	font-feature-settings: "tnum";
	background: var( --mm-navy-100, #E9EEF5 );
	color: var( --mth-navy-600 );
}

.mth-vz-delta-hoch {
	background: var( --mm-success-50, #EAF4EE );
	color: var( --mm-success-600, #246E3A );
}

.mth-vz-delta-runter {
	background: var( --mm-danger-100, #FDE7E4 );
	color: var( --mm-danger-600, #B3261E );
}

/* Die grosse Zahl: das, weswegen man hinsieht. */
.mth #mth-app p.mth-vz-zahl,
.mth p.mth-vz-zahl {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 .4rem;
	margin: 0 0 var( --sp1 );
	font-size: .95rem;
	color: var( --mth-navy-700 );
	font-feature-settings: "tnum";
}

.mth-vz-zahl b {
	font-family: var( --mth-display );
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.1;
	color: var( --mth-navy );
}

.mth-vz-zahl > span {
	flex: 1 1 100%;
	font-size: .78rem;
	color: var( --mth-navy-600 );
}

.mth-spark {
	display: block;
	width: 100%;
	height: 56px;
	margin: var( --sp1 ) 0 var( --sp2 );
}

.mth .mth-verlauf-zelle .mth-fein { margin-top: 0; }

@container ( max-width: 680px ) {
	.mth-verlauf { grid-template-columns: 1fr; }
}

/* ---------------- Tagesliste (Etappe 5) ----------------
   Die Blöcke des Tages in der Reihenfolge des Testtags. Das ist eine
   Vorschau auf Aufgaben, keine Bewertung - Vermilion bleibt draussen,
   bis auf den Fokusring. */

.mth-block-karte {
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-md );
	padding: var( --sp4 );
	margin-top: var( --sp4 );
	background: var( --mth-sand-50 );
}

.mth-block-kopf {
	display: flex;
	align-items: baseline;
	gap: var( --sp3 );
	margin: 0 0 var( --sp1 );
}

.mth .mth-block-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --mth-navy );
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	align-self: center;
	flex: 0 0 auto;
}

.mth .mth-block-kopf strong { color: var( --mth-navy ); font-size: 1rem; }

.mth .mth-block-kopf em {
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
	margin-left: auto;
	white-space: nowrap;
}

.mth .mth-block-thema {
	margin: 0 0 var( --sp3 ) 34px;
	font-size: .93rem;
	color: var( --mth-navy-800 );
}

.mth .mth-block-thema i { font-style: normal; color: var( --mth-navy-600 ); font-size: .85rem; }

.mth-tunliste { list-style: none; margin: 0 0 0 34px; padding: 0; display: grid; gap: var( --sp2 ); }

.mth .mth-tun {
	display: flex;
	align-items: center;
	gap: var( --sp3 );
	margin: 0;
	font-size: .93rem;
	color: var( --mth-navy-800 );
}

/* 🚨 EIN KÄSTCHEN, DAS MAN ANKREUZEN KANN.
   Am 27.08.2026 wurde die Form von einem abgerundeten Quadrat auf einen
   Kreis geändert, in der Annahme, die runde Form verspreche nichts. Sie
   verspricht doch etwas: Ein leerer Ring am Anfang einer Zeile in einer
   Liste mit der Überschrift "Das sind deine Aufgaben heute" ist ein
   Kästchen zum Abhaken, egal wie eckig er ist. Deniz hat vier Wochen lang
   dagegen geklickt und es als "man kann nichts anklicken" gemeldet - die
   Form war nie das Problem, die fehlende Wirkung war es.
   Seit 3.6.9 haken die Ringe am Lehrtext wirklich ab, und zwar in
   LearnDash selbst. Kein zweiter Merker, keine zweite Wahrheit. */
.mth-tun-haken {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var( --mth-navy-300, #BCC8D8 );
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.mth-tun-haken-an {
	background: var( --mm-success-600, #246E3A );
	border-color: var( --mm-success-600, #246E3A );
}

/* Als Knopf muss er sich auch wie einer anfassen lassen: Zeigefinger,
   Reaktion beim Schweben, sichtbarer Tastaturfokus - und eine Fläche, die
   auch mit dem Daumen zu treffen ist, ohne dass der Ring wächst. */
button.mth-tun-haken {
	cursor: pointer;
	position: relative;
	transition: border-color .12s, background-color .12s, transform .08s;
}

button.mth-tun-haken::after {
	content: "";
	position: absolute;
	inset: -11px;
}

button.mth-tun-haken:hover {
	border-color: var( --mm-success-600, #246E3A );
}

button.mth-tun-haken:not( .mth-tun-haken-an ):hover {
	background: var( --mm-success-50, #EAF4EE );
}

button.mth-tun-haken:active {
	transform: scale( .92 );
}

button.mth-tun-haken:focus-visible {
	outline: 2px solid var( --mm-aktion, #D63500 );
	outline-offset: 2px;
}

button.mth-tun-haken[disabled] {
	opacity: .55;
	cursor: progress;
}

/* Wo es nichts abzuhaken gibt - die Tagesaufgaben zählen sich selbst -,
   bleibt es eine Anzeige und sieht auch danach aus. */
.mth-tun-haken-fest {
	border-style: dashed;
}

.mth .mth-tun-art {
	font-style: normal;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
	flex: 0 0 68px;
}

.mth .mth-tun a { color: var( --mth-aktion ); text-decoration: underline; }
.mth .mth-tun a:hover { color: var( --mth-aktion-tief ); }

/* Erledigt wird nicht durchgestrichen - der Text bleibt lesbar. */
.mth .mth-tun-fertig > span,
.mth .mth-tun-fertig > a { color: var( --mth-navy-600 ); }

.mth .mth-tun-leer > span { color: var( --mth-navy-600 ); font-style: italic; }

.mth .mth-tun-knopf {
	margin-left: auto;
	min-height: 36px;
	padding: 6px 16px;
	font-size: .85rem;
}

@container ( max-width: 680px ) {
	.mth-tunliste, .mth .mth-block-thema { margin-left: 0; }
	.mth .mth-tun { flex-wrap: wrap; }
	.mth .mth-tun-knopf { margin-left: 30px; }
}

/* ---------------- Tagesübung (Etappe 3) ----------------
   🚨 In der Frageansicht erscheint Vermilion NICHT (Styleguide Teil 3:
   in Quiz- und Prüfungsansichten nur Grün, Karmin und Navy - sonst liest
   sich der Marken-Akzent wie eine Bewertung). Einzige Ausnahme ist der
   Fokusring als Bedienzeichen. */

.mth .mth-uebung-kicker {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
	margin: 0 0 var( --sp4 );
	font-feature-settings: "tnum";
}

.mth .mth-wiederholung {
	font-style: normal;
	color: #fff;
	background: var( --mth-navy-700 );
	border-radius: var( --r-xs );
	padding: 1px 6px;
}

.mth .mth-uebung-frage {
	font-family: var( --mth-prosa );
	font-size: 1.1rem;
	line-height: 1.6;
	color: var( --mth-navy );
	max-width: var( --mth-lesestrecke );
	margin-bottom: var( --sp4 );
}

.mth .mth-uebung-frage img { max-width: 100%; height: auto; }

.mth-optionen { display: grid; gap: var( --sp2 ); margin-bottom: var( --sp4 ); }

.mth .mth-opt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --sp3 );
	width: 100%;
	text-align: left;
	padding: var( --sp3 ) var( --sp4 );
	background: #fff;
	border: 1.5px solid var( --mth-navy-600 );
	border-radius: var( --r-md );
	font-family: var( --mth-ui );
	font-size: .95rem;
	line-height: 1.5;
	color: var( --mth-navy-800 );
	cursor: pointer;
}

.mth .mth-opt:hover:not( :disabled ) { background: var( --mth-navy-50 ); }

.mth .mth-opt:focus-visible {
	outline: none;
	box-shadow: var( --mm-focus-ring, 0 0 0 3px rgba( 255, 66, 3, .30 ) );
}

/* Gewählt: Navy statt Vermilion - die Quiz-Ausnahme vom
   Selected-Zustand des Styleguides. */
.mth .mth-opt-gewaehlt {
	border: 2px solid var( --mth-navy );
	background: var( --mth-navy-50 );
	color: var( --mth-navy );
	font-weight: 600;
}

/* Richtig und falsch tragen Farbe, Rahmen UND Wort - Farbe allein
   kodiert nie eine Bedeutung. */
.mth .mth-opt-richtig {
	border: 2px solid var( --mm-success-600, #246E3A );
	background: var( --mm-success-100, #DFF3E2 );
	color: var( --mth-navy );
}

.mth .mth-opt-falsch {
	border: 2px solid var( --mm-danger-600, #951532 );
	background: var( --mm-danger-100, #FFE3E4 );
	color: var( --mth-navy );
}

.mth .mth-opt-still { opacity: .55; }
.mth .mth-opt:disabled { cursor: default; }

.mth .mth-opt em {
	font-style: normal;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mth .mth-opt-richtig em { color: var( --mm-success-600, #246E3A ); }
.mth .mth-opt-falsch em { color: var( --mm-danger-600, #951532 ); }

/* Der Prüfen-/Weiter-Knopf: Navy trägt weißen Text mit 13,55:1. */
.mth .mth-btn-quiz {
	background: var( --mth-navy );
	color: #fff !important;
}

.mth .mth-btn-quiz:hover { background: var( --mth-navy-800 ); color: #fff !important; }

.mth .mth-btn-quiz:disabled {
	background: var( --mth-sand-200 );
	color: var( --mth-navy-600 ) !important;
	cursor: not-allowed;
}

/* Die Erklärung direkt unter der Auswertung - der Moment, in dem
   jemand die Lösung sehen will, ist genau jetzt. */
.mth-warum {
	background: var( --mth-sand-50 );
	border-left: 4px solid var( --mth-navy-700 );
	border-radius: 0 var( --r-sm ) var( --r-sm ) 0;
	padding: var( --sp4 );
	margin-bottom: var( --sp4 );
}

.mth .mth-warum > em {
	display: block;
	font-style: normal;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
	margin-bottom: var( --sp2 );
}

.mth .mth-warum p { max-width: var( --mth-lesestrecke ); }
.mth .mth-warum p:last-child { margin-bottom: 0; }

.mth-fertig-liste {
	list-style: none;
	margin: var( --sp4 ) 0;
	padding: 0;
	display: grid;
	gap: var( --sp2 );
	max-width: 420px;
}

.mth .mth-fertig-liste li {
	display: flex;
	justify-content: space-between;
	gap: var( --sp3 );
	padding: var( --sp2 ) var( --sp3 );
	background: var( --mth-sand-50 );
	border: 1px solid var( --mth-sand-200 );
	border-radius: var( --r-sm );
}

.mth .mth-fertig-liste li strong { color: var( --mth-navy ); font-size: .93rem; }
.mth .mth-fertig-liste li em {
	font-style: normal;
	font-weight: 600;
	color: var( --mth-navy-700 );
	font-feature-settings: "tnum";
}

/* ---------------- BuddyBoss-Notwehr, generisch ---------------- */

/* Die Lernplattform rendert zugeklappte <details> weiter - der generische
   Riegel aus der Diagnostik, damit künftige Aufklapper hier nie offen
   herumliegen. */
.mth details:not( [open] ) > *:not( summary ) { display: none; }

/* ---------------- Schmale Container ---------------- */

/* Die Lektionsspalte gibt rund 760 px; darunter (und im BuddyBoss-Profil)
   muss alles zweispaltige gestapelt bestehen. Bewusst @container, nicht
   @media - die Spalte ist schmaler als das Fenster. */
@container ( max-width: 680px ) {
	.mth-stand-zeile {
		grid-template-columns: 1fr auto;
		row-gap: var( --sp1 );
	}
	.mth-stand-zeile .mth-balken { grid-column: 1 / -1; }
	.mth-stand-zeile .mth-stand-nutzen { grid-column: 1 / -1; text-align: left; }

	/* Der Hebel-Nachsatz (Potenzial · Aufwand) ist zu lang für eine
	   Spalte neben dem Namen - er wandert in eine eigene Zeile und darf
	   dort umbrechen. */
	.mth-hebel li { grid-template-columns: 28px 1fr; }
	.mth .mth-hebel li em { grid-column: 2; white-space: normal; }

	/* Wochenzeile: Themen bekommen die zweite Zeile, Kopfdaten die erste. */
	.mth-woche {
		grid-template-columns: 32px 96px 1fr auto;
		row-gap: 2px;
	}
	.mth .mth-woche-phase { display: none; }
	.mth .mth-woche-themen { grid-column: 2 / -1; }
}

@container ( max-width: 560px ) {
	.mth .mth-kopf-banner {
		padding: 24px 20px;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var( --sp4 );
	}
	/* Ohne `flex: 0 0 auto` wirkt die flex-basis im Spaltenfluss auf die
	   HÖHE - die Falle aus Rechner und Diagnostik. */
	.mth-kopf-text { flex: 0 0 auto; }
	.mth-kopf-bild { opacity: .45; }
	.mth .mth-kopf-name, .mth h2.mth-kopf-name { font-size: 1.55rem; }
	.mth .mth-kopf-aktion { flex: 0 0 auto; align-items: flex-start; }
	.mth .mth-kopf-btns { justify-content: flex-start; }
	#mth-app p.mth-kopf-satz { text-align: left; }
}

/* ---------------- Was du gemacht hast ----------------
 *
 * 🚨 Ohne diese Liste ist die Verlaufskurve eine Behauptung: Sie verdichtet
 * auf Wochen, und was gar nicht in sie eingeht, sah man nirgends. Hier steht
 * jede Sitzung einzeln - und die Zeilen, die nicht zählen, sind als solche
 * kenntlich, statt still zu fehlen.
 */
.mth-tab-huelle { overflow-x: auto; margin: var( --sp4 ) 0 0; }

.mth-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.mth-tabelle th {
	text-align: left;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
	padding: 0 var( --sp3 ) var( --sp2 ) 0;
	border-bottom: 1.5px solid var( --mth-navy-200, #D4DDE9 );
	white-space: nowrap;
}

.mth-tabelle td {
	padding: var( --sp2 ) var( --sp3 ) var( --sp2 ) 0;
	border-bottom: 1px solid var( --mth-navy-100, #E9EEF5 );
	vertical-align: baseline;
	color: var( --mth-navy );
}

.mth-tabelle td em {
	display: block;
	font-style: normal;
	font-size: .74rem;
	color: var( --mth-navy-600 );
}

.mth-versuch-tag { white-space: nowrap; font-variant-numeric: tabular-nums; color: var( --mth-navy-700 ); }
.mth-versuch-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Zählt nicht in die Kurve - gedämpft, aber sichtbar. Ausblenden wäre
   genau der Fehler, der die Frage „warum steht bei Biologie so wenig?"
   unbeantwortbar gemacht hat. */
.mth-versuch-ohne td { color: var( --mth-navy-600 ); }

.mth-versuch-warnung {
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	color: var( --mth-aktion, #D63500 );
	white-space: nowrap;
}

/* Nach Testteil gruppiert - danach fragt man beim Durchsehen ("was habe ich
   im BMS gemacht?"), nicht nach dem einzelnen Untertest. */
.mth-versuch-gruppe { margin-top: var( --sp5 ); }
.mth-versuch-gruppe:first-of-type { margin-top: var( --sp4 ); }

.mth .mth-versuch-gruppe h4 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp2 ) var( --sp3 );
	margin: 0;
	padding-bottom: var( --sp2 );
	border-bottom: 2px solid var( --mth-navy-200, #D4DDE9 );
	font-family: var( --mth-ui );
	font-size: 1rem;
	font-weight: 700;
	color: var( --mth-navy );
}

.mth .mth-versuch-gruppe h4 em {
	font-style: normal;
	font-size: .8rem;
	font-weight: 400;
	color: var( --mth-navy-600 );
	font-variant-numeric: tabular-nums;
}

.mth-versuch-gruppe .mth-tab-huelle { margin-top: 0; }
.mth-versuch-gruppe .mth-tabelle thead { display: none; }

/* Die Zeile führt zurück ins Quiz - dort steht, was man falsch hatte. */
.mth .mth-versuche td a { color: var( --mth-aktion, #D63500 ); text-decoration: underline; }
.mth .mth-versuche td a:hover { text-decoration: none; }

/* Wie stark die eigene Übung schon zählt - je Untertest. Ohne diese Zeile
   hielt man die Kurve für eine Zählung erledigter Aufgaben statt für eine
   Trefferquote. */
.mth-gewicht { display: inline-block; margin-top: 2px; color: var( --mth-navy-600 ); }

/* ---------------------------------------------------------------
   Die drei Griffe an einer Woche (seit 3.7.0)

   Eingeklappt, weil ein Plan bis zu vierzig Wochen hat: Zwei
   Auswahlfelder an jeder Zeile wären eine Wand aus Bedienung. Wer
   nichts ändern will, sieht nur eine schmale Zeile.
   --------------------------------------------------------------- */
.mth-griffe {
	grid-column: 1 / -1;
	margin-top: .25rem;
}

.mth-griffe > summary {
	cursor: pointer;
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	color: var( --mm-aktion, #D63500 );
	padding: .15rem .1rem;
	list-style: none;
}

.mth-griffe > summary::-webkit-details-marker { display: none; }

.mth-griffe > summary::before {
	content: "＋ ";
	font-weight: 400;
}

.mth-griffe[open] > summary::before { content: "− "; }

.mth-griffe > summary:hover { text-decoration: underline; }

.mth-griffe-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .6rem;
	margin-top: .5rem;
	padding: .7rem .8rem;
	border: 1px solid var( --mth-navy-200, #DCE3EC );
	border-radius: 10px;
	background: #fff;
}

.mth-griff {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 11rem;
	flex: 1 1 11rem;
}

.mth-griff > span {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mth-navy-500, #5A6B80 );
}

.mth-griff > select {
	width: 100%;
	padding: .4rem .5rem;
	border: 1px solid var( --mth-navy-300, #BCC8D8 );
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: .9rem;
	color: var( --mth-navy-800 );
}

.mth-griffe-innen .mth-hinweis {
	flex: 1 1 100%;
	margin: 0;
	font-size: .8rem;
}

/* Eine übersprungene Woche bleibt lesbar, tritt aber zurück - sie ist
   nicht erledigt, sie ist weg. */
.mth-woche-ausfall .mth-woche-themen,
.mth-woche-ausfall .mth-woche-phase {
	opacity: .5;
	text-decoration: line-through;
}

.mth-eigen-marke {
	font-style: normal;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --mm-aktion, #D63500 );
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0 .35rem;
	margin-left: .3rem;
	white-space: nowrap;
}

.mth-plan-zurueck {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	margin: .9rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var( --mth-navy-200, #DCE3EC );
}

.mth-plan-zurueck .mth-hinweis {
	margin: 0;
	flex: 1 1 16rem;
	font-size: .8rem;
}

/* Leiser Knopf: Kontur statt Fläche. Für Handgriffe, die etwas
   zurücknehmen - die dürfen nicht so aussehen wie der Weg nach vorn. */
.mth .mth-btn-leise {
	background: #fff;
	color: var( --mth-aktion ) !important;
	border-color: var( --mth-navy-300 );
	min-height: 38px;
	padding: 8px 16px;
	font-size: .88rem;
}

.mth .mth-btn-leise:hover {
	border-color: var( --mth-aktion );
	background: var( --mth-vermilion-50 );
}

/* Fuss der Verlaufskarte: wie viele Antworten dahinterstehen und wie
   stark sie zaehlen. Als Balken, nicht als Satz - der stand vorher an
   jeder der sieben Karten fast gleichlautend und war damit unlesbar.
   Erklaert wird die Gewichtung einmal unter dem ganzen Feld. */
.mth-vz-fuss {
	margin-top: auto;
	padding-top: var( --sp2 );
}

.mth-vz-balken {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var( --mth-navy-100 );
	overflow: hidden;
}

.mth-vz-balken > i {
	display: block;
	height: 100%;
	background: var( --mth-vermilion );
	border-radius: 999px;
}

.mth .mth-vz-fuss-text {
	display: block;
	margin-top: 5px;
	font-size: .75rem;
	line-height: 1.4;
	color: var( --mth-navy-600 );
	font-feature-settings: "tnum";
}

/* Das Themenfeld darf breiter sein - Themennamen wie
   „Herz-Kreislauf-System; Blut" sind laenger als „Biologie". */
.mth-griff-breit { flex: 1 1 22rem; }

/* ---------------------------------------------------------------
   Monatskalender (seit 3.7.2)

   🚨 Loest die Liste aus 44 Zeilen mit je einem Aufklappkasten ab.
   Das Raster beantwortet die Frage "wann ist was dran", die Bedienung
   sitzt darunter an genau einer Stelle: der angeklickten Woche.
   --------------------------------------------------------------- */
.mth-monat { margin-top: var( --sp3 ); }

.mth-monat-kopf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --sp4 );
	margin-bottom: var( --sp3 );
}

.mth .mth-monat-kopf strong {
	font-family: var( --mth-display );
	font-size: 1.15rem;
	font-weight: 600;
	color: var( --mth-navy );
	min-width: 10rem;
	text-align: center;
}

.mth .mth-monat-pfeil {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var( --mth-navy-300 );
	border-radius: 50%;
	background: #fff;
	color: var( --mth-aktion );
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.mth .mth-monat-pfeil:hover:not( [disabled] ) {
	border-color: var( --mth-aktion );
	background: var( --mth-vermilion-50 );
}

.mth .mth-monat-pfeil[disabled] { opacity: .35; cursor: default; }

.mth-kt-kopf,
.mth-kt-raster {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.mth-kt-kopf {
	margin-bottom: 4px;
}

.mth .mth-kt-kopf span {
	text-align: center;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mth-navy-600 );
}

/* Eine Tageszelle. 🚨 KEIN aspect-ratio: 1/1 - bei einer Lektionsspalte
   von rund 760 px sind das 100 px hohe Zellen, und ein Monat passt nicht
   mehr auf einen Blick. Genau dafuer ist das Raster aber da. Feste
   Mindesthoehe, der Rest waechst mit dem Fach. */
.mth .mth-kt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	min-height: 58px;
	padding: 4px 5px;
	border: 1px solid var( --mth-navy-200 );
	border-radius: var( --r-sm );
	background: #fff;
	font: inherit;
	text-align: left;
	overflow: hidden;
	cursor: pointer;
}

.mth .mth-kt b {
	font-size: .78rem;
	font-weight: 700;
	color: var( --mth-navy-700 );
	font-feature-settings: "tnum";
}

.mth-kt-fach {
	font-size: .58rem;
	line-height: 1.15;
	color: var( --mth-navy-700 );
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mth-kt-leer { border: none; background: none; }

.mth .mth-kt[disabled],
.mth .mth-kt-aus {
	background: var( --mth-navy-50 );
	border-color: transparent;
	cursor: default;
}

.mth .mth-kt-aus b { color: var( --mth-navy-300 ); }

/* Lerntage tragen die Farbe ihrer Rolle - Schwerpunkt kraeftig,
   Zweitthema zurueckhaltend, Simulation als Signal. */
.mth-kt-haupt { background: var( --mth-sand ); border-color: var( --mth-sand-200 ); }
.mth-kt-neben { background: var( --mth-sand-50 ); border-color: var( --mth-sand-200 ); }

.mth-kt-sim {
	background: var( --mth-vermilion-50 );
	border-color: var( --mth-vermilion-200 );
}

.mth-kt-sim .mth-kt-fach { color: var( --mth-aktion ); font-weight: 700; }

.mth .mth-kt-fertig { background: var( --mm-success-50, #EAF4EE ); border-color: var( --mm-success-100, #CFE7D8 ); }
.mth .mth-kt-fertig b { color: var( --mm-success-600, #246E3A ); }

.mth-kt-ausfall .mth-kt-fach,
.mth-kt-ausfall b { opacity: .45; text-decoration: line-through; }

.mth .mth-kt-heute { box-shadow: inset 0 0 0 2px var( --mth-navy-300 ); }

.mth .mth-kt-testtag {
	background: var( --mth-navy );
	border-color: var( --mth-navy );
}

.mth .mth-kt-testtag b,
.mth .mth-kt-testtag .mth-kt-fach { color: #F5F3EC; font-weight: 700; }

/* Die angeklickte Woche - alle ihre Tage. */
.mth .mth-kt-wahl { box-shadow: inset 0 0 0 2px var( --mth-aktion ); }

.mth .mth-kt:hover:not( [disabled] ) { border-color: var( --mth-aktion ); }
.mth .mth-kt:focus-visible { outline: 2px solid var( --mth-aktion ); outline-offset: 1px; }

/* Die Bedienung der gewaehlten Woche. */
.mth-wochenpanel {
	margin-top: var( --sp4 );
	padding: var( --sp3 ) var( --sp4 ) var( --sp4 );
	border: 1px solid var( --mth-navy-200 );
	border-radius: var( --r-md );
	background: var( --mth-navy-50 );
}

.mth .mth-wochenpanel h4 {
	margin: 0 0 var( --sp3 );
	font-family: var( --mth-display );
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --mth-navy );
}

.mth .mth-wochenpanel h4 span {
	font-family: var( --mth-ui );
	font-size: .8rem;
	font-weight: 400;
	color: var( --mth-navy-600 );
	margin-left: .5rem;
}

.mth-alleWochen { margin-top: var( --sp4 ); }

.mth-alleWochen > summary {
	cursor: pointer;
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	color: var( --mth-aktion );
	list-style: none;
}

.mth-alleWochen > summary::-webkit-details-marker { display: none; }
.mth-alleWochen > summary::before { content: "＋ "; font-weight: 400; }
.mth-alleWochen[open] > summary::before { content: "− "; }

@container ( max-width: 520px ) {
	.mth .mth-kt { min-height: 34px; padding: 2px 3px; }
	.mth-kt-fach { display: none; }
}

/* Kennzahlenreihe mit dem Weg zurueck zur Diagnostik. Der Knopf stand
   vorher in der Buehne; die ist auf der Lernplanseite weg, weil sie nur
   wiederholte, was in den Kennzahlen genauer steht. */
.mth-zahlenreihe {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var( --sp3 );
	margin-bottom: var( --sp5 );
}

.mth-zahlenreihe > .mth-zahlen { flex: 1 1 20rem; margin-bottom: 0; }

.mth-zahlen-knopf {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Ein Block der Woche: die Zeile mit Haken und Stunden, darunter die
   einzelnen Schritte - welches Thema, lesen oder ueben. */
.mth-wochenblock + .mth-wochenblock { margin-top: var( --sp4 ); }

.mth-wochenblock > .mth-tunliste {
	margin: var( --sp2 ) 0 0;
	padding-left: var( --sp4 );
	border-left: 2px solid var( --mth-navy-200 );
}

/* ---------------------------------------------------------------
   Lernzeit je Wochentag und feste Termine (seit 3.8.0)

   🚨 Die Stundenzahl ERSETZT das Haekchen: Null heisst "kein
   Lerntag". Ein zweites Bedienelement dafuer waere eine zweite
   Wahrheit, die der ersten widersprechen kann.
   --------------------------------------------------------------- */
.mth-tagstunden {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp2 );
}

.mth .mth-tagstunde {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 5px 7px;
	border: 1.5px solid var( --mth-navy-300 );
	border-radius: var( --r-sm );
	background: #fff;
	cursor: text;
}

.mth .mth-tagstunde > span {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var( --mth-navy-600 );
}

.mth .mth-tagstunde input {
	width: 3.4rem;
	padding: 2px 4px;
	border: none;
	background: none;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	color: var( --mth-navy-800 );
	font-feature-settings: "tnum";
}

.mth .mth-tagstunde input:focus-visible {
	outline: 2px solid var( --mth-aktion );
	outline-offset: 1px;
	border-radius: 3px;
}

/* Ein Tag mit Lernzeit traegt den Selected-Zustand - dieselbe Sprache
   wie die alten Tageskaestchen, damit niemand umlernen muss. */
.mth .mth-tagstunde-an {
	border-color: var( --mth-aktion );
	background: var( --mth-vermilion-50 );
}

/* Zahl fester Termine an diesem Tag - erklaert, warum er wenig hergibt. */
.mth .mth-tagstunde > em {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var( --mth-navy );
	color: #fff;
	font-style: normal;
	font-size: .62rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.mth-einstellung-breit { flex: 1 1 100%; }

/* Was du dir vornimmst, gegen das, was der Plan braucht. */
.mth #mth-app p.mth-kapazitaet,
.mth p.mth-kapazitaet {
	flex: 1 1 100%;
	margin: 0;
	padding: var( --sp2 ) var( --sp3 );
	border-radius: var( --r-sm );
	font-size: .88rem;
	line-height: 1.45;
}

.mth-kapazitaet-gut {
	background: var( --mm-success-50, #EAF4EE );
	color: var( --mm-success-600, #246E3A );
}

.mth-kapazitaet-warn {
	background: var( --mth-vermilion-50 );
	color: var( --mth-aktion );
}

/* Die Liste der festen Termine. */
.mth-termine {
	list-style: none;
	margin: 0 0 var( --sp2 );
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp2 );
}

.mth .mth-termin {
	display: inline-flex;
	align-items: center;
	gap: var( --sp2 );
	padding: 4px 4px 4px 10px;
	border: 1px solid var( --mth-navy-200 );
	border-radius: 999px;
	background: var( --mth-navy-50 );
	font-size: .85rem;
}

.mth-termin-tag {
	font-weight: 700;
	font-size: .7rem;
	letter-spacing: .04em;
	color: var( --mth-navy-600 );
}

.mth .mth-termin em {
	font-style: normal;
	color: var( --mth-navy-600 );
	font-feature-settings: "tnum";
}

.mth .mth-termin-weg {
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var( --mth-navy-600 );
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.mth .mth-termin-weg:hover { background: var( --mm-danger-100, #FDE7E4 ); color: var( --mm-danger-600, #B3261E ); }

.mth-termin-neu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --sp2 );
}

.mth .mth-termin-neu select,
.mth .mth-termin-neu input {
	padding: .4rem .5rem;
	border: 1px solid var( --mth-navy-300 );
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: .9rem;
	color: var( --mth-navy-800 );
}

/* Nicht unbegrenzt wachsen lassen - sonst schiebt das Textfeld den
   Eintragen-Knopf aus der Karte. */
.mth .mth-termin-neu input[data-termin-feld="was"] { flex: 1 1 12rem; max-width: 20rem; }
.mth .mth-termin-neu input[data-termin-feld="stunden"] { width: 4.5rem; }

/* Im Kalender: die eigene Lernzeit und die festen Termine des Tages. */
.mth-kt-std {
	font-size: .58rem;
	font-weight: 700;
	color: var( --mth-navy-600 );
	font-feature-settings: "tnum";
}

.mth-kt-fest {
	font-size: .55rem;
	line-height: 1.1;
	color: var( --mth-navy-600 );
	font-style: italic;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.mth .mth-kt-termin { border-style: dashed; }

/* ---------------------------------------------------------------
 * Lernplan-Ausschnitt im Lehrtext ([mission_therapie mode="lernplan"])
 *
 * Steht mitten im Fliesstext einer Lektion, nicht im Werkzeug. Deshalb
 * kein Kasten mit Bühne, keine Kennzahlen - eine Liste, die sich in den
 * Absatz einfügt und im Ausdruck mitkommt.
 * ------------------------------------------------------------- */
.mth-planteil { margin: 1.1em 0; }

.mth-planteil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.mth-planteil-woche {
	display: grid;
	/* minmax( 0, … ), damit ein langer Rollenname die Zeile nicht über
	   den Rand schiebt - siehe die Begründung in analyse.css. */
	grid-template-columns: auto auto minmax( 0, 1fr ) auto;
	gap: 4px 12px;
	align-items: baseline;
	padding: 7px 12px;
	border: 1px solid var( --mth-navy-100, #E9EEF5 );
	border-radius: 6px;
	background: var( --mth-sand-50, #FDF9F4 );
	font-size: .92rem;
}

.mth-planteil-nr { font-weight: 600; color: var( --mth-navy, #232F3F ); }
.mth-planteil-zeit { color: var( --mth-navy-600, #6B7A8E ); font-variant-numeric: tabular-nums; }
.mth-planteil-rolle { color: var( --mth-navy-800, #374557 ); }
.mth-planteil-stand { color: var( --mth-navy-600, #6B7A8E ); font-size: .84rem; }

/* Erledigt wird gedämpft, nicht grün: Die Marke kennt Vermilion und
   Navy, und eine abgehakte Woche soll zurücktreten, nicht leuchten. */
.mth-planteil-fertig { opacity: .62; }
.mth-planteil-fertig .mth-planteil-stand { color: var( --mth-navy, #232F3F ); }

.mth-planteil-leer { color: var( --mth-navy-700, #4F5E72 ); font-size: .95rem; }

@media ( max-width: 560px ) {
	.mth-planteil-woche { grid-template-columns: auto minmax( 0, 1fr ); }
	.mth-planteil-stand { grid-column: 2; }
}