/**
 * Mission MedAT-Analyse – Oberfläche
 *
 * Folgt dem Mission-Medizin-Styleguide:
 * · 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 Buttons und Optionen · 14 Karten · 20 Hero
 * · Buttons    44 px hoch, primär Vermilion 600
 * · Lesestrecke 680 px
 *
 * 🚨 Farbregel: Vermilion 500 #FF4203 erreicht gegen Weiß nur 3,48:1 und
 * fällt durch WCAG AA. Es ist Flächen- und Signalfarbe, KEINE Textfarbe.
 * Alles, was Text trägt, nimmt die Aktionsstufe #D63500 (4,81:1).
 *
 * „Editorial-Systeme leben von Linien, nicht von Tiefe. Rahmen zuerst,
 * Schatten nur wenn etwas wirklich schwebt." – Styleguide Teil 3
 */

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

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

	--mma-sand:     var( --mm-sand-100, #F9F3EB );
	--mma-gruen:    #167A5B;
	--mma-rot:      #AB2800;

	/* Abstände */
	--sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px;
	--sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px;

	/* Radien */
	--r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;

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

	--mma-lesestrecke: 680px;

	font-family: var( --mma-ui );
	color: var( --mma-navy-800 );
	line-height: 1.6;
	container-type: inline-size;
}

/* Mission MedAT: gleiche Struktur, eigene Primärfarbe. */
.mma[data-brand="medat"] {
	--mma-navy: var( --mm-ink, #0C0F12 );
}

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

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

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

.mma h4 {
	font-family: var( --mma-ui );
	font-weight: 700;
	font-size: 1.06rem;
	color: var( --mma-navy );
	line-height: 1.35;
	margin: 0 0 var( --sp2 );
}

.mma h2 { font-size: clamp( 1.75rem, 4cqi, 2.5rem ); }
.mma h3 { font-size: clamp( 1.25rem, 2.6cqi, 1.6rem ); }
.mma p  { margin: 0 0 var( --sp3 ); }

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

.mma-lead {
	font-family: var( --mma-prosa );
	font-size: 1.16rem;
	line-height: 1.6;
	color: var( --mma-navy-800 );
	max-width: var( --mma-lesestrecke );
}

.mma-hinweis { color: var( --mma-navy-700 ); max-width: var( --mma-lesestrecke ); }
.mma-fein { font-size: .85rem; color: var( --mma-navy-600 ); max-width: var( --mma-lesestrecke ); }
.mma-warn { color: var( --mma-aktion ); }

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

.mma .mma-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --sp2 );
	min-height: 44px;
	padding: 0 var( --sp5 );
	border: 1.5px solid transparent;
	border-radius: var( --r-md );
	background: var( --mma-aktion ) !important;
	color: #fff !important;
	font-family: var( --mma-ui );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}

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

.mma .mma-btn:focus-visible {
	outline: 3px solid var( --mma-navy );
	outline-offset: 2px;
}

.mma .mma-btn-gross { min-height: 52px; padding: 0 var( --sp6 ); font-size: 1.06rem; }
.mma .mma-btn-klein { min-height: 36px; padding: 0 var( --sp4 ); font-size: .92rem; border-radius: var( --r-sm ); }

.mma .mma-btn-flach {
	background: #fff !important;
	color: var( --mma-navy ) !important;
	border-color: var( --mma-navy-600 );
}

.mma .mma-btn-flach:hover {
	background: var( --mma-navy-50 ) !important;
	color: var( --mma-navy ) !important;
	border-color: var( --mma-navy );
}

.mma .mma-link {
	background: none !important;
	border: 0;
	padding: var( --sp2 );
	color: var( --mma-aktion ) !important;
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: underline;
}

.mma .mma-link-weg { color: var( --mma-navy-600 ) !important; }

/* ---------------- Einstieg ---------------- */

.mma-intro {
	background: var( --mma-navy-50 );
	border: 1px solid var( --mma-navy-100 );
	border-radius: var( --r-xl );
	padding: clamp( 24px, 4cqi, 48px );
}

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

.mma-fakt {
	background: #fff;
	border: 1px solid var( --mma-navy-100 );
	border-radius: var( --r-md );
	padding: var( --sp4 );
}

.mma-fakt strong {
	display: block;
	font-family: var( --mma-display );
	font-size: 1.7rem;
	color: var( --mma-navy );
	line-height: 1.1;
}

.mma-fakt span { font-size: .84rem; color: var( --mma-navy-600 ); }

/* ---------------- Gespeicherte Analysen ---------------- */

.mma-gespeichert {
	background: #fff;
	border: 2px solid var( --mma-aktion );
	border-radius: var( --r-lg );
	padding: clamp( 16px, 3cqi, 24px );
	margin-bottom: var( --sp5 );
}

.mma-gespeichert h3 { margin-bottom: var( --sp1 ); }
.mma-gespeichert ul { list-style: none; margin: var( --sp4 ) 0 0; padding: 0; display: grid; gap: var( --sp3 ); }

.mma-gs-karte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp3 );
	background: var( --mma-navy-50 );
	border-radius: var( --r-md );
	padding: var( --sp3 ) var( --sp4 );
}

.mma-gs-jahr { display: block; font-size: .82rem; color: var( --mma-navy-600 ); }

.mma-gs-karte strong {
	font-family: var( --mma-display );
	font-size: 1.5rem;
	color: var( --mma-navy );
	line-height: 1.1;
}

.mma-gs-tun { display: flex; align-items: center; gap: var( --sp2 ); }

/* ---------------- Schrittanzeige ---------------- */

.mma-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp2 );
	list-style: none;
	margin: 0 0 var( --sp5 );
	padding: 0;
}

.mma .mma-steps li {
	display: flex;
	align-items: center;
	gap: var( --sp2 );
	font-size: .85rem;
	color: var( --mma-navy-600 );
	padding: var( --sp2 ) var( --sp4 ) var( --sp2 ) var( --sp2 );
	border-radius: var( --r-md );
	background: var( --mma-navy-50 );
}

.mma-steps li span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var( --mma-navy-200 );
	font-size: .78rem;
	font-weight: 700;
}

/* 🚨 Die Beschriftung steht in einem eigenen <em>, damit die Farbe an ihr
   selbst hängt. Als blosser Textknoten erbte sie die Farbe vom <li> - und
   Themes (BuddyBoss) setzen Farben auf Listenelemente im Inhaltsbereich mit
   höherer Spezifität. Auf der Lernplattform war die aktive Lasche dadurch
   dunkel auf dunkel, also leer. */
.mma .mma-steps li em { font-style: normal; color: var( --mma-navy-600 ); }
.mma .mma-steps li.mma-aktiv { background: var( --mma-navy ); font-weight: 600; }
.mma .mma-steps li.mma-aktiv em { color: #fff; }
.mma-steps li.mma-aktiv span { background: #fff; color: var( --mma-navy ); border-color: transparent; }
.mma-steps li.mma-fertig span { background: var( --mma-aktion ); color: #fff; border-color: transparent; }

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

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

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

.mma-kopf {
	background: var( --mma-navy );
	border-radius: var( --r-lg );
	padding: clamp( 24px, 4cqi, 40px );
	margin-bottom: var( --sp5 );
	color: #fff;
}

/* 🚨 `.mma` davor ist kein Schmuck, sondern Notwehr. Der Customizer der
   Lernplattform färbt `.entry-content p, .entry-content li, … blockquote`
   auf die dunkle Textfarbe. Das ist dieselbe Spezifität wie `.mma-kopf p`
   und steht später im Dokument - also gewinnt es. Auf dunklem Grund heisst
   das: navy auf navy, der Text verschwindet. Mit `.mma` davor liegt die
   Plugin-Regel eine Klasse höher und bleibt vorn.
   Betrifft NUR p, li und blockquote - andere Elemente rührt der
   Customizer nicht an. */
.mma .mma-kopf .mma-kicker { color: var( --mma-vermilion-200 ); }
.mma .mma-kopf p { color: rgba( 255, 255, 255, .92 ); margin: 0; max-width: 60ch; }
.mma .mma-kopf li { color: rgba( 255, 255, 255, .92 ); }
.mma .mma-kopf strong { color: #fff; }

.mma-kopf-wert {
	display: flex;
	align-items: baseline;
	gap: var( --sp2 );
	font-family: var( --mma-display );
	margin: var( --sp1 ) 0 var( --sp3 );
}

.mma-kopf-wert strong { font-size: clamp( 3rem, 9cqi, 4.5rem ); line-height: 1; font-weight: 600; }
.mma-kopf-wert span { font-size: 1.4rem; opacity: .75; }

/* ---------------- Datei hereinziehen ---------------- */

.mma-drop {
	border: 2px dashed var( --mma-navy-300 );
	border-radius: var( --r-lg );
	background: var( --mma-navy-50 );
	padding: clamp( 24px, 5cqi, 44px ) var( --sp5 );
	text-align: center;
	transition: border-color .12s ease, background .12s ease;
	margin-bottom: var( --sp4 );
}

.mma-drop-bereit { border-color: var( --mma-aktion ); background: var( --mma-vermilion-50 ); }

/* 🚨 Das native Dateifeld selbst verstecken - NICHT über `hidden`.
   BuddyBoss führt `input[type="file"] { display: inline-block }`, und das
   ist spezifischer als `[hidden]`. Auf der Lernplattform stand das rohe
   Feld dadurch sichtbar unter dem eigenen Knopf. */
.mma input[type="file"].mma-datei-feld { display: none; }

.mma-drop-inhalt { display: grid; justify-items: center; gap: var( --sp3 ); }

.mma-drop strong {
	font-family: var( --mma-display );
	font-size: clamp( 1.15rem, 2.4cqi, 1.4rem );
	font-weight: 600;
	color: var( --mma-navy );
}

.mma-drop span { color: var( --mma-navy-700 ); max-width: 46ch; }
.mma-drop em { font-style: normal; font-size: .82rem; color: var( --mma-navy-600 ); }

.mma-erfolg {
	background: var( --mma-navy-50 );
	border-left: 4px solid var( --mma-gruen );
	padding: var( --sp3 ) var( --sp4 );
	border-radius: 0 var( --r-sm ) var( --r-sm ) 0;
	font-size: .93rem;
	color: var( --mma-navy );
}

/* ---------------- Laufender Wert ---------------- */

.mma-live {
	display: grid;
	gap: var( --sp2 );
	background: var( --mma-navy-50 );
	border: 1px solid var( --mma-navy-100 );
	border-radius: var( --r-md );
	padding: var( --sp4 );
	margin-bottom: var( --sp4 );
}

.mma-live > div:first-child { display: flex; align-items: baseline; gap: var( --sp3 ); flex-wrap: wrap; }

.mma-live-zahl {
	font-family: var( --mma-display );
	font-size: 2rem;
	font-weight: 600;
	color: var( --mma-navy );
	line-height: 1;
}

.mma-live-text { font-size: .88rem; color: var( --mma-navy-600 ); }
.mma-live-balken { height: 6px; background: var( --mma-navy-200 ); border-radius: var( --r-xs ); overflow: hidden; }
.mma-live-balken div { height: 100%; background: var( --mma-vermilion ); border-radius: var( --r-xs ); transition: width .2s ease; }
.mma-live-voll .mma-live-balken div { background: var( --mma-gruen ); }

/* ---------------- Eingabefelder ---------------- */

.mma-manuell {
	border: 1px solid var( --mma-navy-100 );
	border-radius: var( --r-md );
	padding: var( --sp4 );
	margin-bottom: var( --sp4 );
}

.mma-manuell > summary {
	cursor: pointer;
	font-weight: 600;
	color: var( --mma-navy );
	min-height: 28px;
}

.mma-manuell[open] > summary { margin-bottom: var( --sp4 ); }

.mma-teil {
	border: 0;
	border-top: 1px solid var( --mma-navy-100 );
	padding: var( --sp4 ) 0 0;
	margin: 0 0 var( --sp4 );
	min-width: 0;
}

.mma-teil legend {
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mma-aktion );
	padding: 0;
}

.mma-teil legend small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var( --mma-navy-600 ); font-size: .84rem; }

.mma-raster {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 var( --sp6 );
	max-width: 680px;
}

.mma-raster-3 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

.mma-feld {
	display: grid;
	grid-template-columns: 1fr 80px auto;
	align-items: center;
	gap: var( --sp3 );
	font-size: .95rem;
	padding: var( --sp2 ) 0;
	border-bottom: 1px solid var( --mma-navy-100 );
	min-height: 44px;
}

.mma-feld > span { min-width: 0; overflow-wrap: anywhere; }
.mma-feld em { font-style: normal; color: var( --mma-navy-600 ); font-size: .82rem; white-space: nowrap; }
.mma-feld-breit { max-width: 320px; }
.mma-feld-select { grid-template-columns: 1fr minmax( 0, 210px ); border-bottom: 0; }
.mma-feld-select select { width: 100%; }

.mma input[type="number"],
.mma select,
.mma textarea {
	font-family: var( --mma-ui ) !important;
	font-size: 1rem !important;
	color: var( --mma-navy ) !important;
	background: #fff !important;
	border: 1.5px solid var( --mma-navy-300 ) !important;
	border-radius: var( --r-sm ) !important;
	padding: var( --sp2 ) var( --sp3 ) !important;
	height: auto !important;
	min-height: 40px !important;
	line-height: 1.3 !important;
	width: 100%;
	max-width: 100%;
}

.mma input[type="number"] { width: 80px; flex: 0 0 80px; text-align: center; }
.mma select { padding-right: var( --sp6 ) !important; }

.mma input[type="number"]:focus,
.mma select:focus,
.mma textarea:focus {
	outline: 3px solid var( --mma-navy );
	outline-offset: 1px;
	border-color: var( --mma-navy ) !important;
}

.mma-modus { display: flex; gap: var( --sp2 ); margin: 0 0 var( --sp4 ); flex-wrap: wrap; }

.mma .mma-tab {
	min-height: 36px;
	border: 1.5px solid var( --mma-navy-300 );
	background: #fff !important;
	color: var( --mma-navy-800 ) !important;
	border-radius: var( --r-md );
	padding: 0 var( --sp4 );
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

.mma .mma-tab-aktiv {
	background: var( --mma-navy ) !important;
	color: #fff !important;
	border-color: var( --mma-navy );
}

.mma-fehler {
	background: var( --mma-vermilion-50 );
	border-left: 4px solid var( --mma-rot );
	color: var( --mma-rot );
	padding: var( --sp3 ) var( --sp4 );
	border-radius: 0 var( --r-sm ) var( --r-sm ) 0;
	font-size: .93rem;
}

.mma-nav { display: flex; gap: var( --sp3 ); flex-wrap: wrap; margin-top: var( --sp5 ); }

/* ---------------- Fragen ---------------- */

.mma-frage { padding: var( --sp5 ) 0; border-top: 1px solid var( --mma-navy-100 ); }
.mma-frage:first-of-type { border-top: 0; padding-top: var( --sp2 ); }

.mma-frage-fehlt {
	border-left: 4px solid var( --mma-rot );
	background: var( --mma-vermilion-50 );
	border-radius: 0 var( --r-md ) var( --r-md ) 0;
	padding-left: var( --sp4 );
	padding-right: var( --sp4 );
	margin: var( --sp3 ) 0;
}

.mma-offen {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var( --mma-rot );
	border-radius: var( --r-xs );
	padding: 2px var( --sp2 );
	vertical-align: middle;
}

/*
 * 🚨 Pflicht und freiwillig stehen VOR dem Klick da, „fehlt noch" erst
 * danach. Deshalb sind sie ruhiger gehalten als .mma-offen: Sie sollen
 * eine Frage einordnen, nicht auf einen Fehler zeigen. Bis zum 05.09.2026
 * trug .mma-freiwillig überhaupt keinen Stil und lief als blosser Text im
 * Titel mit - man sah die Marke schlicht nicht.
 */
.mma-pflicht,
.mma-freiwillig {
	display: inline-block;
	font-family: var( --mma-ui );
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: var( --r-xs );
	padding: 2px var( --sp2 );
	vertical-align: middle;
	white-space: nowrap;
}

.mma-pflicht {
	color: var( --mma-navy-800 );
	background: var( --mma-navy-100 );
	border: 1px solid var( --mma-navy-200 );
}

.mma-freiwillig {
	color: var( --mma-navy-600 );
	background: transparent;
	border: 1px dashed var( --mma-navy-300 );
}

.mma-pflichthinweis {
	margin: calc( -1 * var( --sp2 ) ) 0 var( --sp4 );
}

/* --- Der Weg über einen TMS-Testbericht ------------------------------ */

/*
 * Eine Zeile je Aufgabengruppe, nicht zwei Spalten: Die Namen sind lang
 * („Medizinisch-naturwissenschaftliches Grundverständnis") und tragen eine
 * Marke. Nebeneinander bricht das auf schmalen Schirmen in vier Zeilen um
 * und die Zuordnung von Name zu Feld geht verloren.
 */
.mma-tms-raster {
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --sp3 );
}

.mma-tms-name {
	display: block;
	margin-bottom: var( --sp1 );
	line-height: 1.35;
}

/* Was es nur in älteren Testberichten gab, tritt zurück. */
.mma-tms-alt {
	opacity: .75;
}

.mma-tms-karte h4 {
	margin: var( --sp5 ) 0 var( --sp2 );
}

.mma-tms-karte table {
	margin-bottom: var( --sp3 );
}

.mma-echo { font-size: .9rem; color: var( --mma-aktion ); font-weight: 600; margin: var( --sp3 ) 0 0; }

.mma-optionen { display: grid; gap: var( --sp2 ); margin-top: var( --sp3 ); max-width: var( --mma-lesestrecke ); }
.mma-optionen-mehr { grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); }

.mma .mma-opt {
	display: block;
	width: 100%;
	min-height: 44px;
	text-align: left;
	background: #fff !important;
	border: 1.5px solid var( --mma-navy-200 );
	border-radius: var( --r-md );
	padding: var( --sp3 ) var( --sp4 );
	font: inherit;
	color: var( --mma-navy-800 ) !important;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.mma .mma-opt:hover { border-color: var( --mma-navy-600 ); color: var( --mma-navy ) !important; }

.mma .mma-opt:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: 2px; }

.mma .mma-opt-aktiv {
	border-color: var( --mma-aktion );
	border-width: 2px;
	background: var( --mma-vermilion-50 ) !important;
	color: var( --mma-navy ) !important;
	font-weight: 600;
}

.mma .mma-opt em {
	display: block;
	font-style: normal;
	font-weight: 400;
	font-size: .85rem;
	color: var( --mma-navy-600 );
	margin-top: 2px;
}

.mma-slider { display: flex; align-items: center; gap: var( --sp4 ); margin-top: var( --sp3 ); max-width: var( --mma-lesestrecke ); }
.mma-slider input[type="range"] { flex: 1 1 auto; accent-color: var( --mma-aktion ); min-width: 140px; height: 32px; }

.mma-slider output {
	flex: 0 0 auto;
	min-width: 120px;
	text-align: right;
	font-weight: 700;
	color: var( --mma-aktion );
	font-variant-numeric: tabular-nums;
}

/* ---------------- Frühere Antritte ---------------- */

.mma-antritte { margin-top: var( --sp3 ); max-width: 560px; }

.mma-antritt {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) auto;
	gap: var( --sp2 ) var( --sp5 );
	align-items: center;
	padding: var( --sp2 ) 0;
	border-bottom: 1px solid var( --mma-navy-100 );
}

.mma-antritt .mma-feld { border-bottom: 0; padding: 0; min-height: 0; }
.mma-antritt .mma-feld-select { grid-template-columns: auto minmax( 0, 1fr ); }

/* ---------------- Tabellen ---------------- */

.mma-tab-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var( --sp2 ) 0 var( --sp4 ); max-width: 100%; }

.mma-tabelle { width: 100%; border-collapse: collapse; font-size: .94rem; margin: 0; }

.mma-tabelle th,
.mma-tabelle td {
	text-align: left;
	padding: var( --sp2 ) var( --sp3 );
	border-bottom: 1px solid var( --mma-navy-100 );
	vertical-align: middle;
}

.mma-tabelle thead th {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var( --mma-navy-600 );
	font-weight: 700;
	border-bottom: 1.5px solid var( --mma-navy-300 );
}

.mma-tabelle .mma-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mma-tabelle .mma-verlust { color: var( --mma-rot ); font-weight: 700; }
.mma-tr-teil th { padding-top: var( --sp4 ); color: var( --mma-navy ); font-size: .88rem; text-transform: none; letter-spacing: 0; }
.mma-tr-teil small { font-weight: 400; color: var( --mma-navy-600 ); }

.mma-bar { width: 34%; min-width: 90px; }
.mma-bar div { height: 8px; border-radius: var( --r-xs ); background: var( --mma-navy ); }
.mma-bar .mma-bar-gut { background: var( --mma-gruen ); }
.mma-bar .mma-bar-mittel { background: var( --mma-vermilion ); }
.mma-bar .mma-bar-schwach { background: var( --mma-rot ); }

.mma-ampel {
	display: inline-block;
	padding: 3px var( --sp3 );
	border-radius: var( --r-xs );
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mma-ampel-gruen { background: rgba( 22, 122, 91, .12 ); color: var( --mma-gruen ); }
.mma-ampel-gelb { background: var( --mma-vermilion-50 ); color: var( --mma-aktion ); }
.mma-ampel-grau { background: var( --mma-navy-50 ); color: var( --mma-navy-600 ); }

/* Merkkasten nach Styleguide: Sand 100, Vermilion-Kante links. */
.mma-merke {
	background: var( --mma-sand );
	border-left: 4px solid var( --mma-vermilion );
	padding: var( --sp3 ) var( --sp4 );
	border-radius: 0 var( --r-md ) var( --r-md ) 0;
	font-family: var( --mma-prosa );
	font-size: 1rem;
	line-height: 1.55;
	margin: var( --sp4 ) 0;
	max-width: var( --mma-lesestrecke );
}

/* ---------------- Diagramm ---------------- */

.mma-chart { margin: var( --sp5 ) 0 var( --sp2 ); overflow-x: auto; }
.mma-chart svg { width: 100%; min-width: 460px; height: auto; display: block; }
.mma-chart .mma-grid { stroke: var( --mma-navy-100 ); stroke-width: 1; }
.mma-chart .mma-achse { fill: var( --mma-navy-600 ); font-size: 11px; font-family: var( --mma-ui ); }
.mma-chart path { fill: none; stroke-width: 2; }

.mma-chart .mma-l0, .mma-chart .mma-p0 { stroke: #232F3F; }
.mma-chart .mma-l1, .mma-chart .mma-p1 { stroke: #6B7A8E; }
.mma-chart .mma-l2, .mma-chart .mma-p2 { stroke: #167A5B; }
.mma-chart .mma-l3, .mma-chart .mma-p3 { stroke: #AB2800; }
.mma-chart circle { fill: #fff; stroke-width: 2; }

.mma-chart .mma-du-punkt { fill: var( --mma-vermilion ); stroke: #fff; stroke-width: 2; }
.mma-chart .mma-du-text { fill: var( --mma-aktion ); font-size: 12px; font-weight: 700; font-family: var( --mma-ui ); }
.mma-chart .mma-trenn { stroke: var( --mma-navy-200 ); stroke-width: 1; stroke-dasharray: 3 3; }
.mma-chart .mma-achse-prognose { font-weight: 700; fill: var( --mma-navy ); }
.mma-chart .mma-band { stroke-width: 4; opacity: .5; stroke-linecap: butt; }
.mma-chart .mma-gestrichelt { stroke-dasharray: 5 4; opacity: .55; }

.mma-legende { display: flex; flex-wrap: wrap; gap: var( --sp4 ); font-size: .82rem; color: var( --mma-navy-600 ); }
.mma-leg { display: inline-flex; align-items: center; gap: var( --sp2 ); }
.mma-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.mma-leg .mma-p0 { background: #232F3F; }
.mma-leg .mma-p1 { background: #6B7A8E; }
.mma-leg .mma-p2 { background: #167A5B; }
.mma-leg .mma-p3 { background: #AB2800; }
.mma-leg .mma-du-i { background: var( --mma-vermilion ); }

/* ---------------- Empfehlung ---------------- */

.mma-empf { list-style: none; margin: var( --sp3 ) 0 0; padding: 0; counter-reset: e; }

.mma-empf li {
	counter-increment: e;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var( --sp1 ) var( --sp3 );
	padding: var( --sp3 ) 0;
	border-top: 1px solid var( --mma-navy-100 );
}

.mma-empf li:first-child { border-top: 0; padding-top: 0; }

.mma-empf li::before {
	content: counter( e );
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --mma-aktion );
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}

.mma-empf strong {
	grid-column: 2;
	grid-row: 1;
	display: block;
	color: var( --mma-aktion );
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	align-self: center;
}

.mma-empf span { grid-column: 2; grid-row: 2; color: var( --mma-navy-800 ); min-width: 0; }

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

.mma-hebel { list-style: none; margin: var( --sp4 ) 0; padding: 0; }

.mma-hebel li {
	display: grid;
	grid-template-columns: 30px minmax( 0, 1.4fr ) minmax( 60px, 1fr ) 78px;
	align-items: center;
	gap: var( --sp3 );
	padding: var( --sp3 ) 0;
	border-bottom: 1px solid var( --mma-navy-100 );
}

.mma-hebel-text { min-width: 0; }
.mma-hebel-text strong { display: block; color: var( --mma-navy ); font-size: .96rem; overflow-wrap: anywhere; }
.mma-hebel-text em { font-style: normal; font-size: .82rem; color: var( --mma-navy-600 ); }

.mma-rang {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var( --mma-aktion );
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
}

.mma-hebel-bar { background: var( --mma-navy-100 ); border-radius: var( --r-xs ); overflow: hidden; }
.mma-hebel-bar div { height: 10px; background: var( --mma-vermilion ); border-radius: var( --r-xs ); }

.mma-hebel-wert {
	text-align: right;
	font-weight: 700;
	color: var( --mma-aktion );
	font-variant-numeric: tabular-nums;
}

.mma-plan { margin: var( --sp3 ) 0 var( --sp3 ) var( --sp5 ); padding: 0; }
.mma-plan li { margin-bottom: var( --sp1 ); }
.mma-plan span { color: var( --mma-navy-600 ); }

/* ---------------- Lernplan ---------------- */

.mma-plan-titel { margin: var( --sp6 ) 0 var( --sp2 ); font-size: 1.05rem; }

.mma-verteilung { list-style: none; margin: var( --sp2 ) 0 0; padding: 0; }

.mma-verteilung li {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: var( --sp3 );
	align-items: baseline;
	padding: var( --sp2 ) 0;
	border-bottom: 1px solid var( --mma-navy-100 );
}

.mma-plan-anteil { font-weight: 700; color: var( --mma-aktion ); font-variant-numeric: tabular-nums; text-align: right; }
.mma-verteilung strong { display: block; color: var( --mma-navy ); font-size: .96rem; }
.mma-verteilung em { font-style: normal; font-size: .84rem; color: var( --mma-navy-600 ); }

/* 🚨 Vorher: drei Sandblöcke mit Vermilion-Kante untereinander, jeder mit
   vier offenen Aufzählungspunkten. Drei Signalflächen am Stück - der
   Styleguide gibt Vermilion als Signalfarbe frei, nicht als Grundton für
   drei Kästen in Folge. Jetzt trägt die Phasenleiste darüber die Lage, und
   die Phasen selbst sind Aufklapper mit einer ruhigen Navy-Kante. Offen ist
   nur die laufende. */
.mma-phase {
	border-left: 3px solid var( --mma-navy-200 );
	border-radius: 0 var( --r-md ) var( --r-md ) 0;
	padding: 0;
	margin-bottom: var( --sp2 );
	background: var( --mma-navy-50 );
}

.mma-phase[open] { border-left-color: var( --mma-navy ); }

.mma-phase > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp3 );
	padding: var( --sp3 ) var( --sp4 );
	cursor: pointer;
	list-style: none;
}

.mma-phase > summary::-webkit-details-marker { display: none; }

.mma-phase > summary > span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mma-navy-600 );
	font-variant-numeric: tabular-nums;
}

.mma-phase > summary > strong {
	font-family: var( --mma-ui );
	font-size: 1.02rem;
	font-weight: 700;
	color: var( --mma-navy );
}

.mma-phase > summary > em { font-style: normal; font-size: .88rem; color: var( --mma-navy-700 ); }

.mma-phase > summary:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: -3px; }

/* 🚨 Abstand als MARGIN, nicht als Padding. Ein zugeklapptes details setzt
   in Chrome `content-visibility: hidden` auf den Inhalt: Der Kasten bleibt,
   nur sein Inhalt wird übersprungen - senkrechtes Padding zählt dann
   weiterhin zur Höhe, und der zugeklappte Aufklapper ist 16 px hoch.
   Margin zählt nicht zur getBoundingClientRect-Höhe. */
/* 🚨 Die Phasenliste hatte gar keinen eigenen Stil und erbte die
   Aufzählungspunkte des Themes - schwarze Kreise in der Serifenschrift,
   mitten in einer Oberfläche, die überall sonst das vermilionfarbene
   Quadrat benutzt. Derselbe Marker wie bei den Angebotspunkten und im
   gedruckten Bericht, damit die drei Orte dasselbe zeigen. */
.mma-phase ul {
	list-style: none;
	margin: 0 0 var( --sp4 );
	padding: 0 var( --sp5 ) 0 var( --sp5 );
}

.mma .mma-phase li {
	position: relative;
	padding-left: var( --sp4 );
	margin-bottom: var( --sp3 );
	font-family: var( --mma-ui );
	font-size: .95rem;
	line-height: 1.55;
	max-width: var( --mma-lesestrecke );
	color: var( --mma-navy-800 );
}

.mma .mma-phase li:last-child { margin-bottom: 0; }

.mma-phase li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .58em;
	width: 5px;
	height: 5px;
	border-radius: 1px;
	background: var( --mma-vermilion );
}

/* ---------------- Befunde ---------------- */

.mma-befund {
	border-left: 4px solid var( --mma-navy-200 );
	background: var( --mma-navy-50 );
	border-radius: 0 var( --r-md ) var( --r-md ) 0;
	padding: var( --sp4 ) var( --sp5 );
	margin-bottom: var( --sp3 );
}

.mma-befund h4 { margin-bottom: var( --sp1 ); }
.mma-befund p { margin-bottom: var( --sp2 ); max-width: var( --mma-lesestrecke ); }
.mma-befund p:last-child { margin-bottom: 0; }
.mma-stufe-hoch { border-left-color: var( --mma-rot ); }
.mma-stufe-mittel { border-left-color: var( --mma-vermilion ); }
.mma-stufe-info { border-left-color: var( --mma-navy-600 ); }

.mma-tun { font-size: .95rem; color: var( --mma-navy ); }

.mma-beleg {
	font-size: .82rem;
	color: var( --mma-navy-600 );
	border-top: 1px solid var( --mma-navy-200 );
	padding-top: var( --sp2 );
}

.mma-weitere { margin-top: var( --sp2 ); }
.mma-weitere summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var( --mma-aktion ); padding: var( --sp3 ) 0; }
.mma-weitere[open] summary { margin-bottom: var( --sp3 ); }

/* ---------------- Quellen ---------------- */

.mma-quellen summary { cursor: pointer; font-weight: 600; font-family: var( --mma-display ); color: var( --mma-navy ); font-size: 1.15rem; }
.mma-quellen[open] summary { margin-bottom: var( --sp3 ); }

.mma-quellen-zahl {
	display: inline-block;
	font-family: var( --mma-ui );
	font-size: .74rem;
	font-weight: 700;
	color: var( --mma-aktion );
	background: var( --mma-vermilion-50 );
	border-radius: var( --r-xs );
	padding: 2px var( --sp2 );
	vertical-align: middle;
}

.mma-quellen-liste { margin: var( --sp3 ) 0 var( --sp5 ); padding-left: var( --sp5 ); }
.mma-quelle { margin-bottom: var( --sp3 ); }
.mma-quelle .mma-zitat { font-size: .92rem; margin-bottom: 2px; color: var( --mma-navy ); }
.mma-quelle-aussage { font-size: .86rem; color: var( --mma-navy-600 ); margin: 0; max-width: var( --mma-lesestrecke ); }
.mma-quellen h4 { margin-top: var( --sp4 ); }

/* ---------------- Fußleiste ---------------- */

.mma-fuss { display: flex; align-items: center; gap: var( --sp3 ); flex-wrap: wrap; padding: var( --sp4 ) 0 var( --sp1 ); }
.mma-status { font-size: .88rem; color: var( --mma-navy-600 ); }

/* ---------------- Enge Container ---------------- */

@container ( max-width: 560px ) {
	.mma-hebel li { grid-template-columns: 28px minmax( 0, 1fr ) auto; row-gap: var( --sp2 ); }
	.mma-hebel-text { grid-column: 2; grid-row: 1; }
	.mma-hebel-wert { grid-column: 3; grid-row: 1; white-space: nowrap; }
	.mma-hebel-bar { grid-column: 2 / -1; grid-row: 2; }
	.mma-raster { grid-template-columns: 1fr; }
	.mma-feld { justify-content: space-between; }
	.mma-tabelle .mma-bar { display: none; }
	.mma-slider { flex-wrap: wrap; }
	.mma-slider output { min-width: 0; }
	.mma-nav .mma-btn { flex: 1 1 100%; }
}

@media ( max-width: 560px ) {
	.mma-hebel li { grid-template-columns: 28px minmax( 0, 1fr ) auto; row-gap: 8px; }
	.mma-hebel-text { grid-column: 2; grid-row: 1; }
	.mma-hebel-wert { grid-column: 3; grid-row: 1; white-space: nowrap; }
	.mma-hebel-bar { grid-column: 2 / -1; grid-row: 2; }
	.mma-raster { grid-template-columns: 1fr; }
	.mma-tabelle .mma-bar { display: none; }
}

/* ---------------- Druck ---------------- */

@media print {
	.mma-fuss, .mma-steps, .mma-nav, .mma-drop, .mma-live { display: none !important; }
	.mma-karte { break-inside: avoid; border-color: #ccc; }
	.mma-kopf { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
	.mma-kopf p, .mma-kopf strong, .mma-kopf .mma-kicker { color: #000 !important; }
	/* 🚨 Der Bergverlauf ist ein SVG mit eingebauten Navy-Flächen; die
	   Farbregel oben erreicht ihn nicht. Auf Papier stand deshalb schwarze
	   Schrift auf einem dunklen Kasten. Im Druck fällt das Motiv weg. */
	.mma-kopf-bild { display: none !important; }
	.mma .mma-kopf-name { color: #000 !important; }
	/* Die Reiter sind auf Papier sinnlos: Was nicht offen ist, kann man
	   nicht anklicken. Also alle Blätter zeigen und die Leiste weglassen. */
	.mma-reiter { display: none !important; }
	.mma-blatt[hidden] { display: block !important; }
	.mma-blatt { break-before: page; }
	.mma-blatt:first-of-type { break-before: auto; }
}

/* ---------------------------------------------------------------
 * Merksatz - Markenstimme, kein zugeschriebenes Zitat
 * ------------------------------------------------------------- */

.mma-merksatz {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: var( --sp1 ) var( --sp4 );
	align-items: start;
	margin: var( --sp5 ) 0 0;
	padding: var( --sp5 ) var( --sp5 ) var( --sp5 ) var( --sp4 );
	background: var( --mma-sand );
	border-radius: var( --r-md );
}

.mma-gipfel { grid-row: 1 / span 2; color: var( --mma-navy ); display: block; margin-top: 3px; }

.mma .mma-merksatz blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var( --mma-display );
	font-size: 1.15rem;
	line-height: 1.45;
	color: var( --mma-navy );
	text-wrap: pretty;
}

.mma-merksatz figcaption {
	grid-column: 2;
	margin-top: var( --sp3 );
	font-size: .85rem;
	line-height: 1.5;
	color: var( --mma-navy-700 );
}

/* Name in eigener Zeile, Fundstelle kleiner darunter - ein Zitat ohne
   prüfbare Herkunft wäre in diesem Bericht ein Fremdkörper. */
.mma-merksatz figcaption strong {
	display: block;
	font-weight: 600;
	color: var( --mma-navy );
}

.mma-merksatz figcaption strong::before { content: "— "; }

.mma-merksatz figcaption span {
	display: block;
	margin-top: 2px;
	font-size: .8rem;
	color: var( --mma-navy-600 );
}

@media ( max-width: 520px ) {
	.mma-merksatz { grid-template-columns: 1fr; padding: var( --sp4 ); }
	.mma-gipfel { grid-row: auto; margin-bottom: var( --sp2 ); }
	.mma-merksatz figcaption { grid-column: 1; }
	.mma-merksatz blockquote { font-size: 1.05rem; }
}

/* ---------------------------------------------------------------
 * Angaben ändern - das Panel über dem Ergebnis
 * ------------------------------------------------------------- */

.mma-anpassen {
	margin: 0 0 var( --sp5 );
	border: 1.5px solid var( --mma-navy-200 );
	border-radius: var( --r-lg );
	background: #fff;
	overflow: hidden;
}

.mma-anpassen > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp1 ) var( --sp3 );
	min-height: 44px;
	padding: var( --sp3 ) var( --sp4 );
	cursor: pointer;
	list-style: none;
	background: var( --mma-navy-50 );
	font-family: var( --mma-ui );
}

.mma-anpassen > summary::-webkit-details-marker { display: none; }

.mma-anpassen > summary > span {
	font-weight: 600;
	color: var( --mma-navy );
}

.mma-anpassen > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var( --mma-aktion );
	border-bottom: 2px solid var( --mma-aktion );
	transform: rotate( -45deg );
	transition: transform .15s ease;
}

.mma-anpassen[open] > summary::before { transform: rotate( 45deg ); }

.mma-anpassen > summary > em {
	font-style: normal;
	font-size: .85rem;
	color: var( --mma-navy-700 );
}

.mma-anpassen > summary:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: -3px; }

.mma-anpassen-inhalt { padding: var( --sp5 ) var( --sp4 ) var( --sp4 ); }

/* 🚨 Zugeklappt heisst zugeklappt - ausdrücklich, für JEDEN Aufklapper.

   Auf der Lernplattform wird der Inhalt eines GESCHLOSSENEN <details>
   weiter gerendert, sobald das Plugin ihm selbst eine Anzeigeart gibt -
   die Raster hier stehen auf `display: flex`, und das überlebt das
   Zuklappen. Sichtbar ist davon nichts, aber die Schicht fängt jeden
   Klick ab.

   Zweimal erlebt, und beim zweiten Mal hat die Reparatur der ersten
   Stelle nicht geholfen: erst "Angaben ändern" mit 1457 px über dem
   Ergebnis, dann "Oder Werte selbst eintragen" mit 991 px genau über
   Testjahr, Testort und den Knöpfen. Deshalb keine Regel je Klasse mehr,
   sondern eine für alle vier - mma-manuell, mma-anpassen, mma-weitere
   und mma-quellen. */
.mma details:not( [open] ) > *:not( summary ) { display: none; }

.mma-modus-reiter { margin-bottom: var( --sp5 ); }

.mma-nav-weg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --sp3 ) var( --sp5 );
	margin-top: var( --sp5 );
	padding-top: var( --sp4 );
	border-top: 1px solid var( --mma-navy-100 );
}

/* ---------------------------------------------------------------
 * Punktfeld mit Regler
 * ------------------------------------------------------------- */

.mma-feld-regler {
	grid-template-columns: 1fr 80px auto;
	row-gap: var( --sp1 );
	padding-bottom: var( --sp3 );
}

.mma .mma-regler {
	grid-column: 1 / -1;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.mma .mma-regler::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: var( --mma-navy-100 );
}

.mma .mma-regler::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: var( --mma-navy-100 );
}

.mma .mma-regler::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var( --mma-aktion );
}

.mma .mma-regler::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var( --mma-aktion );
}

.mma .mma-regler:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: 2px; }

@media ( prefers-reduced-motion: reduce ) {
	.mma-anpassen > summary::before { transition: none; }
}

/* ---------------------------------------------------------------
 * Angebote - neben der Diagnose, nie davor
 * ------------------------------------------------------------- */

.mma-angebot {
	margin: var( --sp5 ) 0 0;
	padding: var( --sp5 );
	border: 1.5px solid var( --mma-navy-200 );
	border-radius: var( --r-md );
	background: var( --mma-navy-50 );
}

/* Das kostenlose Angebot trägt die Signalfarbe, das bezahlte nicht.
   Sonst konkurrieren beide um denselben Blick. */
.mma-angebot-gratis {
	background: var( --mma-sand );
	border-color: var( --mma-vermilion-200 );
	border-left: 3px solid var( --mma-vermilion );
}

.mma-angebot + .mma-angebot { margin-top: var( --sp4 ); }

.mma-angebot-kicker {
	display: block;
	font-family: var( --mma-ui );
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --mma-aktion );
	margin-bottom: var( --sp2 );
}

.mma-angebot h4 {
	margin: 0 0 var( --sp2 );
	font-family: var( --mma-display );
	font-size: 1.1rem;
	line-height: 1.3;
	color: var( --mma-navy );
}

.mma .mma-angebot p { margin: 0 0 var( --sp3 ); color: var( --mma-navy-800 ); }
.mma-angebot-bezug { font-weight: 600; color: var( --mma-navy ) !important; }

.mma-angebot-punkte {
	list-style: none;
	margin: 0 0 var( --sp4 );
	padding: 0;
}

.mma .mma-angebot-punkte li {
	position: relative;
	padding-left: var( --sp4 );
	margin-bottom: var( --sp1 );
	font-size: .92rem;
	color: var( --mma-navy-700 );
}

.mma-angebot-punkte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 1px;
	background: var( --mma-vermilion );
}

.mma-angebot-fuss {
	display: flex;
	align-items: center;
	gap: var( --sp4 );
	flex-wrap: wrap;
	margin: 0 !important;
}

.mma-angebot-preis { font-size: .9rem; color: var( --mma-navy-700 ); }

.mma-karte-angebot > .mma-hinweis { margin-bottom: 0; }

/* ---------------------------------------------------------------
 * Einstiegswege - die Wahl steht vor allem anderen
 * ------------------------------------------------------------- */

.mma-wege-titel {
	margin: var( --sp7 ) 0 var( --sp4 );
	font-size: 1.15rem !important;
}

.mma-wege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --sp3 );
}

.mma .mma-weg {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff !important;
	border: 1.5px solid var( --mma-navy-200 );
	border-left: 3px solid var( --mma-navy-300 );
	border-radius: var( --r-md );
	padding: var( --sp4 ) var( --sp5 );
	min-height: 44px;
	cursor: pointer;
	font: inherit;
	color: var( --mma-navy-800 ) !important;
	transition: border-color .12s ease, background .12s ease;
}

.mma .mma-weg:hover {
	border-color: var( --mma-navy-600 );
	border-left-color: var( --mma-vermilion );
	background: var( --mma-navy-50 ) !important;
}

.mma .mma-weg:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: 2px; }

.mma-weg-kicker {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --mma-aktion );
	margin-bottom: var( --sp1 );
}

.mma .mma-weg strong {
	display: block;
	font-family: var( --mma-display );
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var( --mma-navy );
	margin-bottom: var( --sp1 );
}

.mma-weg-text {
	display: block;
	font-size: .92rem;
	line-height: 1.5;
	color: var( --mma-navy-700 );
}

/* Eigenes Ergebnis in der Zielwert-Tabelle hervorheben. */
.mma-zeile-du td { font-weight: 600; color: var( --mma-navy ); }

/* ---------------------------------------------------------------
 * Fehlende Punktwerte sichtbar machen
 *
 * 🚨 Die Meldung "Es fehlen noch 13 Werte" stand ohne jede Markierung
 * auf dem Bildschirm, und die Felder lagen im zugeklappten Aufklapper.
 * Wer keine Ergebnismitteilung als PDF hat, kam damit nicht weiter -
 * der Knopf wirkte kaputt. Jetzt zeigt das Feld selbst, dass es fehlt.
 * ------------------------------------------------------------- */

.mma .mma-feld-fehlt {
	background: var( --mma-vermilion-50 );
	border-radius: var( --r-sm );
	box-shadow: inset 3px 0 0 var( --mma-rot );
	padding-left: var( --sp2 );
}

.mma .mma-feld-fehlt > span { color: var( --mma-rot ); font-weight: 600; }
.mma .mma-feld-fehlt input[type="number"] { border-color: var( --mma-rot ); }

/* ---------------------------------------------------------------
 * Einstiegskarte auf der Kursseite (mode="karte")
 *
 * 🚨 Bewusst mit fester, kleiner Höhe: Der volle Ablauf misst bei
 * jemandem mit fertiger Analyse über 9.000 px, und die stünden dort VOR
 * der Lektionsliste - jeden Tag, für jeden Abonnenten. Die Karte ist der
 * Aufmacher, der Ablauf lebt in der Lektion.
 * ------------------------------------------------------------- */

.mma .mma-intro-karte { padding: clamp( 20px, 3cqi, 32px ); }
.mma .mma-intro-karte h2 { font-size: clamp( 1.5rem, 3cqi, 2rem ); }
.mma .mma-intro-karte .mma-lead { font-size: 1.05rem; }
.mma .mma-intro-karte .mma-fakten { margin: var( --sp4 ) 0; }

/* Die Wege nebeneinander statt untereinander - die Karte soll flach bleiben. */
.mma .mma-wege-karte {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --sp3 );
	margin: 0;
}

.mma .mma-wege-karte .mma-weg { height: 100%; text-decoration: none; }
.mma .mma-wege-karte .mma-weg strong { display: block; }

.mma .mma-karte-tun {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --sp3 ) var( --sp4 );
	margin: 0;
}

.mma .mma-karte-wert { font-size: .95rem; color: var( --mma-navy-700 ); }
.mma .mma-karte-wert strong { font-family: var( --mma-display ); font-size: 1.35rem; color: var( --mma-navy ); }

/* ---------------------------------------------------------------
 * Untertitel unter dem Produktnamen
 *
 * 🚨 „Epikrise" steht nie allein. In der Medizin ist die Epikrise die
 * abschliessende Beurteilung eines Falls - das trifft genau, was das
 * Werkzeug tut, aber vor dem ersten MedAT kennt den Begriff kaum jemand.
 * Der Name kann die Botschaft also nicht tragen; diese Zeile tut es.
 * ------------------------------------------------------------- */

.mma .mma-untertitel {
	font-family: var( --mma-ui );
	font-size: 1.02rem;
	font-weight: 600;
	color: var( --mma-navy-700 );
	margin: calc( var( --sp1 ) * -1 ) 0 var( --sp4 );
	max-width: var( --mma-lesestrecke );
}

.mma .mma-intro-karte .mma-untertitel { font-size: .98rem; margin-bottom: var( --sp3 ); }

/* ---------------------------------------------------------------
 * Aufmacher der Ergebnisseite — die Bühne
 *
 * Bewusst Wert für Wert dieselbe wie `.mzr-hero` im Zulassungsrechner
 * auf "Numerus apertus": Bergmotiv im Grund, links Kicker · Titel ·
 * Erklärzeile, rechts die Aktionen auf einer gemeinsamen Kante.
 * Wer beide Werkzeuge nacheinander benutzt, soll dasselbe Haus betreten.
 *
 * 🚨 Die Ausgaben stehen hier, weil die Ergebnisseite über 9.000 px lang
 * ist - die Fußleiste allein war der falsche Ort dafür.
 * ------------------------------------------------------------- */

.mma .mma-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;
}

/* 🚨 Sicherung wie beim Zwilling: Das Motiv liegt absolut über der Bühne.
   Fällt die Positionsregel des Banners aus, sucht sich das SVG den nächsten
   positionierten Vorfahren und legt sich als unsichtbare Schicht über die
   Seite - man sähe nichts und könnte nichts mehr anklicken. */
.mma-kopf-bild { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.mma-kopf-text { position: relative; z-index: 1; flex: 1 1 260px; }

.mma .mma-kopf-banner .mma-kicker {
	display: block;
	font-family: var( --mma-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 der Bühne des Rechners. */
	color: #FF8A5C;
	margin-bottom: 6px;
}

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

.mma .mma-kopf p.mma-kopf-unter {
	font-family: var( --mma-ui );
	font-size: .92rem;
	line-height: 1.5;
	margin: 0;
	color: #B9C0CB;
	max-width: 48ch;
}

/* 🚨 Feste Basisbreite, nicht 'auto': mit dem Abzeichen unter der
   Knopfreihe wird die Spalte sonst so breit angesetzt, dass die Bühne
   umbricht und die Knöpfe unter den Text rutschen. Gemessen: Textspalte
   springt dann von 342 auf 796 px. */
.mma .mma-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 );
	/* Der alte Aufmacher hatte hier eine Trennlinie über der Knopfreihe.
	   In der Bühne steht die Reihe rechts neben dem Text, nicht darunter -
	   eine Linie würde die Spalte willkürlich zerschneiden. */
	margin: 0;
	padding: 0;
	border: 0;
}

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

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

.mma .mma-kopf p.mma-kopf-satz strong { color: #F5F3EC; font-weight: 600; }

/* Knopf auf dunklem Grund: Vermilion trägt hier keinen Text (WCAG),
   also weiße Kontur mit weißer Schrift, der erste gefüllt. */
.mma .mma-btn-hell {
	background: rgba( 245, 243, 236, .12 ) !important;
	color: #F5F3EC !important;
	border-color: rgba( 245, 243, 236, .38 );
	font-family: var( --mma-ui );
	font-size: .85rem;
	padding: 9px 16px;
}

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

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

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

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

/* Auf dem Handy stapelt die Bühne. Ohne `flex: 0 0 auto` wirkt die
   flex-basis im Spaltenfluss auf die HÖHE, und der Kopf wird plötzlich
   320 px hoch - genau die Falle, die im Rechner schon einmal zuschlug. */
@media ( max-width: 720px ) {
	.mma .mma-kopf-banner {
		padding: 24px 20px;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var( --sp4 );
		background-color: var( --mma-navy );
	}
	.mma-kopf-text { flex: 0 0 auto; }
	/* Auf dem Handy tritt das Motiv zurück, sonst liegt es unter dem Text */
	.mma-kopf-bild { opacity: .45; }
	.mma .mma-kopf-name, .mma h2.mma-kopf-name { font-size: 1.55rem; }
	.mma .mma-kopf-aktion { align-items: flex-start; }
	.mma .mma-kopf-btns { justify-content: flex-start; }
	.mma .mma-kopf-aktion .mma-kopf-wert { justify-content: flex-start; }
	.mma .mma-kopf-aktion p.mma-kopf-satz { text-align: left; }
}

/* Der Gesamtwert steht in der rechten Spalte über den Ausgaben: dort
   landet der Blick, bevor er auf die Knöpfe geht. Rechtsbündig, damit
   Zahl, Satz, Knopfreihe und Abzeichen auf einer Kante sitzen. */
.mma .mma-kopf-aktion .mma-kopf-wert {
	align-items: baseline;
	justify-content: flex-end;
	margin: 0;
	color: #F5F3EC;
}

.mma .mma-kopf-aktion .mma-kopf-wert strong { font-size: clamp( 2.4rem, 6cqi, 3.2rem ); }
.mma .mma-kopf-aktion .mma-kopf-wert span { font-size: 1.1rem; }

.mma .mma-kopf-aktion p.mma-kopf-satz {
	text-align: right;
	font-size: .86rem;
	max-width: 34ch;
	margin-bottom: var( --sp2 );
}



/* Abzeichen der Bühne: dieselbe Stelle, an der der Zulassungsrechner
   „Gespeichert" zeigt. Trägt hier den Beleg, worauf der Plan abgestimmt
   ist - leise, weil es eine Fußnote zur Knopfreihe ist, keine Ansage. */
.mma .mma-kopf-badge {
	font-family: var( --mma-ui );
	font-size: .72rem;
	line-height: 1.4;
	color: #9FB0C4;
	text-align: right;
	max-width: 30ch;
}

@media ( max-width: 720px ) {
	.mma .mma-kopf-badge { text-align: left; }
}

/* Der Namenssatz: erklärt „Epikrise" dort, wo die Frage entsteht - direkt
   unter dem Namen. Leiser als der Untertitel, weil er einmal gelesen und
   dann übersprungen wird. */
.mma .mma-namensatz {
	font-family: var( --mma-ui );
	font-size: .88rem;
	line-height: 1.55;
	color: var( --mma-navy-600 );
	margin: 0 0 var( --sp4 );
	max-width: var( --mma-lesestrecke );
}

/* In der Bühne steht er auf dunklem Grund - dieselbe Spezifitätsfalle wie
   beim Untertitel, deshalb mit Element im Selektor. */
.mma .mma-kopf p.mma-namensatz {
	color: #9FB0C4;
	font-size: .82rem;
	max-width: 52ch;
	margin: var( --sp2 ) 0 0;
}

/* Auf der Kursseite zählt jeder Pixel: Die Karte steht dort über dem
   eigentlichen Kurs und darf ihn nicht wegdrücken. Namenssatz und Kacheln
   rücken deshalb enger zusammen als auf der Werkzeugseite - der Prüfstand
   hält die Karte unter 600 px fest. */
.mma .mma-intro-karte .mma-namensatz {
	font-size: .84rem;
	line-height: 1.5;
	margin-bottom: var( --sp3 );
}

.mma .mma-intro-karte .mma-fakt { padding: var( --sp3 ); }
.mma .mma-intro-karte .mma-fakten { gap: var( --sp2 ); }

/* 🚨 Die Bühne steht auf der Lernplattform in einer schmaleren Spalte als
   im Entwurf: BuddyBoss gibt der Lektion rund 760 px, nicht 860. Mit den
   alten Basisbreiten (320 + 360 + Abstand) brach die Zeile dort um, die
   rechte Spalte rutschte unter den Text - und der Wert stand wieder links.
   Deshalb schmalere Basen oben UND ein bewusster Umbruch per Container-
   Abfrage, bevor der unfreiwillige greift. Container-Abfrage, nicht
   Media-Abfrage: Entscheidend ist die Breite der Spalte, in der das
   Werkzeug steht, nicht die des Fensters. */
@container ( max-width: 680px ) {
	.mma .mma-kopf-banner {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var( --sp4 );
		min-height: 0;
	}
	.mma-kopf-text { flex: 0 0 auto; }
	.mma .mma-kopf-aktion {
		flex: 0 0 auto;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.mma .mma-kopf-btns { justify-content: flex-start; }
	.mma .mma-kopf-aktion .mma-kopf-wert { justify-content: flex-start; }
	.mma .mma-kopf p.mma-kopf-satz { text-align: left; max-width: 46ch; }
	.mma .mma-kopf-badge { text-align: left; }
	/* Gestapelt liegt der Text über dem ganzen Motiv - der Gipfel schnitt
	   sonst durch den Namenssatz. */
	.mma-kopf-bild { opacity: .35; }
}

/* Zwischenbreiten: Die Spalten halten noch, aber das freie Fenster für den
   Gipfel wird eng - er stösst dann an den Abstandssatz. Statt das Motiv zu
   verschieben (dann wandert es bei jeder Breite woanders hin) tritt es
   einfach zurück; die Vermilion-Kappe bleibt sichtbar, die Zeile lesbar. */
@container ( max-width: 900px ) {
	.mma-kopf-bild { opacity: .5; }
}

/* ---------------------------------------------------------------
 * Auswertung als Aufklapper (mode="kurs")
 *
 * Auf der Kursstartseite steht das ganze Werkzeug, aber die Auswertung
 * ist über 9.000 px lang - offen wäre der Kurs darunter unerreichbar.
 * Sichtbar bleiben Aufmacher und Bedienzeile, der Rest klappt auf.
 * Gleiche Handschrift wie „Angaben ändern", damit die Seite nicht nach
 * zwei verschiedenen Werkzeugen aussieht.
 * ------------------------------------------------------------- */

.mma-ergebnis-klapp {
	margin: 0 0 var( --sp5 );
	border: 1.5px solid var( --mma-navy-200 );
	border-radius: var( --r-lg );
	background: #fff;
	overflow: hidden;
}

.mma-ergebnis-klapp > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp1 ) var( --sp3 );
	min-height: 44px;
	padding: var( --sp3 ) var( --sp4 );
	cursor: pointer;
	list-style: none;
	background: var( --mma-navy-50 );
	font-family: var( --mma-ui );
}

.mma-ergebnis-klapp > summary::-webkit-details-marker { display: none; }

.mma-ergebnis-klapp > summary > span {
	font-weight: 600;
	color: var( --mma-navy );
}

.mma-ergebnis-klapp > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var( --mma-aktion );
	border-bottom: 2px solid var( --mma-aktion );
	transform: rotate( -45deg );
	transition: transform .15s ease;
}

.mma-ergebnis-klapp[open] > summary::before { transform: rotate( 45deg ); }

.mma-ergebnis-klapp > summary > em {
	font-style: normal;
	font-size: .85rem;
	color: var( --mma-navy-700 );
}

.mma-ergebnis-klapp > summary:focus-visible { outline: 3px solid var( --mma-navy ); outline-offset: -3px; }

/* Der Inhalt bringt seine eigenen Kartenabstände mit - hier nur der
   Rahmenabstand, sonst sitzt die erste Karte an der Kante. */
/* 🚨 Karte in Karte. Der Aufklapper ist selbst ein weisser Kasten mit
   Rahmen; die Karten darin sind es auch - auf der Kursseite stand deshalb
   ein weisser Rahmen im weissen Rahmen, und „Wo du stehst" sah aus wie
   eingeklebt. Der Rumpf bekommt darum den Seitengrund statt Weiss: Dann
   liegen die Karten auf einer Fläche, wie auf der Lektionsseite auch, und
   es bleibt EIN Rahmen - der des Aufklappers. */
.mma-ergebnis-klapp > #mma-ergebnis {
	background: var( --mma-sand );
	padding: var( --sp5 ) var( --sp4 ) var( --sp4 );
}

/* ---------------- Reiter der Ergebnisseite ----------------
 *
 * 🚨 Vorher stapelten sich zehn Karten gleichen Gewichts über 9.376 px.
 * Die Reiter tragen ihre Mengenangabe mit („13", „7 Befunde", „44 Wochen"):
 * Ein Reiter, der sagt, wie viel dahintersteckt, wird angeklickt; „Details"
 * wird es nicht. Unterstreichung statt Fläche, weil eine Reihe gefüllter
 * Kästen die Karten darunter optisch schlägt.
 */

/* 🚨 Keine Bildlaufleiste unter den Reitern. Nebeneinander gesetzt brauchten
   Beschriftung und Mengenangabe zusammen rund 1.150 px - in der Lektion ging
   das knapp auf, im Aufklapper der Kursseite nicht, und darunter lag ein
   fetter grauer Balken quer über die Seite. Die Mengenangabe steht deshalb
   UNTER der Beschriftung: dieselbe Auskunft, rund 480 px statt 1.150, und
   die Leiste passt bis hinunter auf Tablettbreite. */
.mma-reiter {
	display: flex;
	gap: var( --sp1 );
	margin-bottom: var( --sp5 );
	overflow-x: auto;
	/* Bleibt als Rettung fürs Telefon, aber unsichtbar - dort wird
	   gewischt, und ein Balken quer unter der Leiste ist hässlicher als
	   ein Reiter, der halb angeschnitten am Rand steht. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mma-reiter::-webkit-scrollbar { display: none; }

/* 🚨 AUF DEM HANDY BRICHT DIE LEISTE UM, STATT ZU SCROLLEN.

   Gemessen am 03.09.2026 bei 375 px: Die Leiste war 630 px breit in
   einem 301 px schmalen Rahmen. Sie liess sich zwar wischen, aber ohne
   jeden Hinweis darauf - für den Leser existierten die letzten drei
   Reiter nicht, und mit ihnen der Lernplan und die Quellen. Ein
   verstecktes Wischen ist keine Navigation, sondern ein Geheimnis.

   Deshalb: umbrechen. Sechs Reiter in zwei Zeilen sind höher, aber
   vollständig, und die Mengenangabe unter der Beschriftung bleibt
   erhalten. Ab Tablettbreite gilt wieder die einzeilige Leiste. */
@media ( max-width: 560px ) {
	.mma .mma-reiter {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: var( --sp1 ) var( --sp2 );
	}
	.mma .mma-reiter-knopf {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: var( --sp2 );
		padding-right: var( --sp2 );
		white-space: normal;
	}
}

.mma .mma-reiter-knopf {
	flex: 0 0 auto;
	display: block;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: var( --sp2 ) clamp( 10px, 1.6cqi, 18px ) var( --sp3 );
	font-family: var( --mma-ui );
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	color: var( --mma-navy-700 );
	cursor: pointer;
	white-space: nowrap;
	transition: color .12s ease, border-color .12s ease;
}

.mma .mma-reiter-knopf:hover { color: var( --mma-navy ); }

.mma .mma-reiter-knopf em {
	display: block;
	font-style: normal;
	font-size: .74rem;
	font-weight: 400;
	line-height: 1.3;
	color: var( --mma-navy-600 );
}

/* Beschriftung und Mengenangabe stehen untereinander. Das leere <em> bei
   „Auf einen Blick" kommt aus dem Markup - ohne es wäre der Reiter eine
   Zeile kürzer als seine Nachbarn und die Leiste stufig. */
.mma .mma-reiter-knopf > span { display: block; }

.mma .mma-reiter-an {
	color: var( --mma-navy );
	border-bottom-color: var( --mma-aktion );
}
.mma .mma-reiter-an em { color: var( --mma-navy-700 ); }

/* Der Fokusring ist Pflicht: Mit tabindex="-1" auf den ruhenden Reitern ist
   der Ring das Einzige, was beim Blättern mit den Pfeiltasten verrät, wo man
   gerade steht. */
.mma .mma-reiter-knopf:focus-visible {
	outline: 3px solid var( --mma-navy );
	outline-offset: -3px;
	border-radius: var( --r-sm );
}

/* ---------------- Wo du stehst ---------------- */

.mma-stand .mma-kicker { margin-bottom: var( --sp1 ); }

.mma-stand-zahl {
	display: flex;
	align-items: baseline;
	gap: var( --sp3 );
	flex-wrap: wrap;
	margin: var( --sp2 ) 0 var( --sp4 );
}

.mma-stand-zahl strong {
	font-family: var( --mma-display );
	font-size: clamp( 2.6rem, 7cqi, 3.6rem );
	font-weight: 600;
	line-height: 1;
	color: var( --mma-navy );
	font-variant-numeric: tabular-nums;
}

.mma-stand-zahl em {
	font-style: normal;
	font-size: .95rem;
	color: var( --mma-navy-700 );
}

/* ---------------- Zielleiste ----------------
 *
 * 🚨 Der Platz über und unter der Bahn ist kein Weissraum, sondern Bauteil:
 * Die Beschriftungen sitzen absolut und wären ohne ihn abgeschnitten oder
 * lägen auf dem Text darunter. Der eigene Wert steht ÜBER der Bahn, Grenze
 * und Zielwert DARUNTER auf zwei Zeilen - sie unterscheiden sich nur um den
 * Sicherheitsabstand und schöben sich auf einer Zeile ineinander.
 *
 * 🚨 EINE Formensprache, nicht vier. Erst hatte jedes Element seine eigene:
 * ein Strich quer über die Füllung, ein Band mit Rahmen und Überstand, eine
 * lange helle Linie für die Grenze, eine kurze dunkle für den Zielwert. Das
 * sah nach Versehen aus. Jetzt gilt: Zonen liegen IN der Bahn und haben
 * keine Kanten, Marken sind derselbe kurze Strich, und der eigene Wert ist
 * das einzige runde Element - ein Griff, wie man ihn von einem Regler kennt.
 */

.mma-zielleiste { margin: var( --sp1 ) 0 0; padding: 62px 0 106px; }

.mma-zl-bahn {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: var( --mma-navy-100 );
}

/* Das Erwartungsband der letzten Jahre - eine Zone IN der Bahn. Ohne Kanten
   und ohne Überstand, sonst liest es sich als zweiter Balken auf dem ersten. */
.mma-zl-band {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var( --mma-navy-200 );
}

/* Vermilion als Fläche - das ist der eine Balken, auf den der Blick soll. */
.mma-zl-fuell {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: var( --mma-vermilion );
}

/* Der Griff am eigenen Wert. Das einzige runde Element der Leiste - dadurch
   ist auf einen Blick klar, welche der drei Zahlen die eigene ist. */
.mma-zl-knopf {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var( --mma-aktion );
	box-sizing: border-box;
}

.mma-zl-du {
	position: absolute;
	/* Nicht mit einer festen Zahl ueber die Bahn heben: die Beschriftung ist
	   je nach Test verschieden lang, und sobald sie zweizeilig wurde, ragte
	   sie in die Bahn hinein (TMSnat, 04.09.: "dein Vorbereitungsstand" brach
	   nach "dein" um und lag auf dem Balken). bottom bindet den Kasten an die
	   Oberkante der Bahn, gleich wie hoch er wird. */
	bottom: calc( 100% + 14px );
	top: auto;
	width: 220px;
	margin-left: -110px;
	text-align: center;
}

.mma-zl-du strong {
	display: block;
	font-family: var( --mma-display );
	font-size: clamp( 1.5rem, 4cqi, 2rem );
	font-weight: 600;
	line-height: 1;
	color: var( --mma-navy );
	font-variant-numeric: tabular-nums;
}

.mma-zl-du em {
	font-style: normal;
	/* Einzeilig: ein Umbruch traegt hier keine Information, kostet aber Hoehe. */
	display: block;
	white-space: nowrap;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* Textfarbe, nicht Vermilion 500: Das fällt gegen Weiss durch AA. */
	color: var( --mma-aktion );
}
/* Grenze und Zielwert tragen denselben kurzen Strich. Nur ihre Beschriftung
   sitzt auf zwei Zeilen - dass die Marken gleich aussehen, ist der Grund,
   warum die Leiste ruhig wirkt. */
.mma-zl-marke {
	position: absolute;
	top: -7px;
	height: 26px;
	width: 2px;
	background: var( --mma-navy-700 );
	border-radius: 1px;
}

.mma-zl-schild {
	position: absolute;
	top: 30px;
	width: 190px;
	margin-left: -95px;
	text-align: center;
	line-height: 1.35;
}
.mma-zl-schild strong {
	display: block;
	font-size: .88rem;
	font-weight: 700;
	color: var( --mma-navy );
	font-variant-numeric: tabular-nums;
}

.mma-zl-schild em { font-style: normal; font-size: .76rem; color: var( --mma-navy-600 ); }

/* Die beschrifteten Enden. Ohne sie hielte man den Ausschnitt für die
   ganze Skala und den Abstand für dreimal so gross, wie er ist. */
.mma-zl-ende {
	position: absolute;
	top: 24px;
	font-size: .74rem;
	color: var( --mma-navy-600 );
	font-variant-numeric: tabular-nums;
}

.mma-zl-links  { left: 0; }
.mma-zl-rechts { right: 0; }

/* 🚨 Der Zweispalter braucht seinen eigenen unteren Abstand. Die Karten
   darin tragen `margin-bottom: 0`, damit die beiden Spalten oben bündig
   sitzen und nicht die kürzere von beiden den Abstand bestimmt - dadurch
   klebte die Karte darunter ohne einen Pixel Luft an ihm. Gemessen: 0 px,
   während jede andere Fuge auf dem Blatt 24 px hat. */
/* 🚨 minmax( 0, … ) STATT NACKTEM fr - SONST WIRD DIE SPALTE BREITER
   ALS IHR RAHMEN.

   Am 03.09.2026 bei 375 px gemessen: Die Karten ragten 44 px über den
   rechten Rand, und mit ihnen neunundzwanzig Elemente darin. Die
   Container-Anfrage unten hatte längst auf eine Spalte geschaltet -
   nur half das nichts, weil ein Rasterfeld voreingestellt
   min-width: auto trägt und damit nie schmaler wird als sein
   breitester unteilbarer Inhalt. Ein einziges langes Wort genügt.
   minmax( 0, 1fr ) hebt diese Untergrenze auf; das min-width am Kind
   ist der Gürtel zum Hosenträger. */
.mma-spalten {
	display: grid;
	grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr );
	gap: var( --sp5 );
	align-items: start;
	margin-bottom: var( --sp5 );
}

/* Unter 780 px Spaltenbreite stehen in „bis 5,4 Pp · sehr hoch" zwei Wörter
   je Zeile - dann untereinander. Container-Anfrage, nicht Medienanfrage:
   Massgeblich ist die Lektionsspalte, nicht das Fenster. */
@container ( max-width: 780px ) {
	.mma-spalten { grid-template-columns: minmax( 0, 1fr ); }
}

.mma-spalten > * { min-width: 0; }
.mma-kurz { margin-bottom: 0; }
.mma-kurz .mma-kicker { margin-bottom: var( --sp1 ); }
.mma-kurz h3 { margin-bottom: var( --sp3 ); }
.mma-kurz > .mma-fein:last-child { margin-bottom: 0; }

.mma-kurz-hebel { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: minmax( 0, 1fr ); gap: var( --sp2 ); }

.mma .mma-kurz-hebel li {
	display: grid;
	/* 🚨 minmax( 0, 1fr ) - die Mittelspalte muss schrumpfen dürfen.
	   Bei 375 px hiess ein Hebel „Gedächtnis und Merkfähigkeit", und mit
	   nacktem 1fr wuchs die Zeile auf 320 px in einem 259 px schmalen
	   Rahmen. min-width am Kind hebt dieselbe Untergrenze eine Ebene
	   tiefer auf. */
	grid-template-columns: 28px minmax( 0, 1fr ) auto;
	gap: var( --sp3 );
	align-items: center;
	padding: var( --sp3 ) var( --sp4 );
	background: var( --mma-sand );
	border: 1px solid var( --mma-navy-100 );
	border-radius: var( --r-md );
	margin: 0;
}

.mma .mma-kurz-hebel li > * { min-width: 0; }
.mma-kurz-hebel strong { color: var( --mma-navy ); font-size: .96rem; overflow-wrap: anywhere; }

.mma-kurz-wert {
	text-align: right;
	white-space: nowrap;
	font-size: .88rem;
	color: var( --mma-navy-700 );
	font-variant-numeric: tabular-nums;
}

.mma-kurz-plan { display: grid; gap: 2px; }

.mma-kurz-z {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var( --sp3 );
	align-items: baseline;
	padding: var( --sp2 ) var( --sp3 );
	border-radius: var( --r-sm );
	font-size: .92rem;
}

.mma-kurz-z:nth-child( odd ) { background: var( --mma-navy-50 ); }
.mma-kurz-z em { font-style: normal; font-size: .8rem; color: var( --mma-navy-600 ); font-variant-numeric: tabular-nums; }
.mma-kurz-z strong { color: var( --mma-navy ); font-weight: 600; }

/* ---------------- Phasenleiste ---------------- */

.mma-phasen {
	display: flex;
	gap: 2px;
	margin: var( --sp4 ) 0 var( --sp3 );
	border-radius: var( --r-sm );
	overflow: hidden;
}

/* 🚨 Kein „text-overflow: ellipsis". Die Segmente sind nach Wochen
   gewichtet, das kürzeste bekommt in der schmalen Spalte rund 65 px - mit
   Abschneiden stünde dort „Feinschl…", und der Prüfstand meldet zu Recht
   einen Überlauf. Umbrechen statt abschneiden: zwei Zeilen sind hier kein
   Schaden, ein verstümmeltes Wort schon. */
.mma-phasen-teil {
	min-width: 0;
	padding: var( --sp2 ) var( --sp1 );
	background: var( --mma-navy-50 );
	color: var( --mma-navy-700 );
	font-size: .78rem;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: break-word;
	hyphens: auto;
}
.mma-phasen-teil em {
	display: block;
	font-style: normal;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var( --mma-navy-600 );
	font-variant-numeric: tabular-nums;
}

.mma-phasen-jetzt { background: var( --mma-navy ); color: #fff; font-weight: 600; }
.mma-phasen-jetzt em { color: rgba( 255, 255, 255, .72 ); }

/* Beschriftungen am Bahnende: Statt mittig über der Position rasten sie
   bündig an der Kante ein - sonst ragt das halbe Schild aus der Karte,
   links sogar unbemerkt, weil scrollWidth nur nach rechts zählt. */
.mma-zl-anschlag-links  { margin-left: 0; text-align: left; }
.mma-zl-anschlag-rechts { margin-left: 0; transform: translateX( -100% ); text-align: right; }



/* ---------------- Ruhe auf dem ersten Reiter ----------------
 *
 * 🚨 Der Styleguide gibt Vermilion als Signalfarbe frei, nicht als Grundton.
 * Auf „Auf einen Blick" liefen sonst sieben rote Stellen zusammen: drei
 * Kicker, drei Rangpunkte, der Balken, die Reiter-Unterstreichung. Rot bleibt
 * dort, wo es etwas SAGT - am eigenen Wert und am aktiven Reiter -, alles
 * Ordnende wird Navy.
 */
.mma .mma-stand > .mma-kicker,
.mma .mma-kurz > .mma-kicker { color: var( --mma-navy-600 ); }

.mma .mma-kurz-hebel .mma-rang { background: var( --mma-navy ); }

/* 🚨 `overflow-x: auto` setzt auch overflow-y auf auto. Der Reiterknopf ragt
   mit `margin-bottom: -2px` über die Leiste hinaus, damit seine Markierung
   die Trennlinie überdeckt - und genau diese zwei Pixel erzeugten eine
   senkrechte Bildlaufleiste am rechten Rand. Die Linie kommt deshalb als
   Innenschatten, nicht als Rahmen, und der Knopf braucht keinen Überstand. */
.mma .mma-reiter {
	border-bottom: 0;
	box-shadow: inset 0 -2px 0 var( --mma-navy-100 );
}

/* Die tiefer beschriftete Marke behält denselben Strich wie die andere; nur
   eine leise Führungslinie reicht bis zu ihrer Zeile hinunter. Vorher war
   die ganze Linie 68 px lang und in einem eigenen Ton - sie las sich als
   verirrter Strich, nicht als Zeiger. */
.mma-zl-marke-tief::after {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	width: 1px;
	height: 40px;
	background: var( --mma-navy-200 );
}

.mma-zl-schild-tief { top: 72px; }

/* ---------------- Weg ins Konto, ganz oben ---------------- */

/* 🚨 Der Kasten steht VOR den Reitern. mission-auth ersetzt den Knopf
   darin durch das Eingabefeld für die E-Mail-Adresse; die Hülle muss
   deshalb auch ohne eigenen Inhalt Platz lassen. */
.mma-anmelden { margin-bottom: var( --sp5 ); }
.mma-anmelden:empty { display: none; }
.mma-anmelden .mm-tor-huelle { margin: 0; }

/* Vorbehalt unter der Gruppenüberschrift - etwa dort, wo eine
   Aufteilung nicht amtlich ist und die Felder trotzdem Zahlen zeigen. */
.mma-teil-hinweis { margin: 0 0 var( --sp3 ); }