/**
 * Mission Simulation – Oberfläche
 *
 * Folgt dem Mission-Medizin-Styleguide, dieselben Marken- und Abstands-
 * werte wie Diagnostik und Therapie: Wer die Werkzeuge nacheinander
 * benutzt, betritt dasselbe Haus.
 *
 * 🚨 Vermilion 500 fällt gegen Weiß durch WCAG AA und ist deshalb
 * Flächen- und Signalfarbe, nie Textfarbe; Text trägt die Aktionsstufe
 * #D63500.
 *
 * 🚨 Diese Ansicht ist eine PRÜFUNGSANSICHT. Sie muss ruhig sein: keine
 * Verläufe, keine Schatten, keine Bewegung ausser der einen, die etwas
 * bedeutet - dem Pulsen der Uhr in der letzten Minute. Alles, was sonst
 * blinkt oder springt, kostet in dieser Lage Aufmerksamkeit, die woanders
 * gebraucht wird.
 */

.msim {
	--msim-vermilion: var( --mm-vermilion-500, #FF4203 );
	--msim-aktion:    var( --mm-vermilion-600, #D63500 );
	--msim-aktion-tief: var( --mm-vermilion-700, #AB2800 );
	--msim-verm-50:   var( --mm-vermilion-50, #FFF4F2 );

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

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

	--msim-display: var( --mm-font-display, "Fraunces", "Iowan Old Style", Georgia, serif );
	--msim-ui:      var( --mm-font-ui, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif );

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

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

.msim h2 {
	font-family: var( --msim-display );
	font-weight: 600;
	font-size: clamp( 1.4rem, 3cqi, 1.9rem );
	color: var( --msim-navy );
	line-height: 1.2;
	margin: 0 0 12px;
}

/* Notwehr gegen das Lehrtext-CSS der Lernplattform: Die Regeln des
   Child-Themes fassen jeden Absatz im Inhaltsbereich an. Über die Kennung
   des Wurzelelements (1,0,1) schlägt das jede klassenbasierte Themeregel. */
#msim-app p,
#msim-app li {
	font-family: var( --msim-ui );
	font-size: 1rem;
	line-height: 1.55;
	color: var( --msim-navy-800 );
	margin: 0 0 12px;
}

.msim-karte {
	background: #fff;
	border: 1px solid var( --msim-navy-200 );
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 16px;
}

.msim .msim-hinweis { color: var( --msim-navy-700 ); max-width: 62ch; }
.msim .msim-fein { font-size: .85rem; color: var( --msim-navy-600 ); margin: 12px 0 0; }

.msim .msim-merke {
	background: var( --msim-verm-50 );
	border-left: 3px solid var( --msim-vermilion );
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	color: var( --msim-navy-800 );
	max-width: 66ch;
}

/* ===== ÜBERGANGSWEISE — WIEDER ENTFERNEN ======================
 * Der Prüfknopf, der einen Abschnitt zufällig ausfüllt. Bewusst
 * unscheinbar und mit einem Hinweis daneben: Er soll erkennbar nicht zur
 * Oberfläche gehören.
 * ============================================================= */
.msim .msim-werkzeug {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 8px 12px;
	border: 1px dashed var( --msim-navy-300 );
	border-radius: 8px;
	background: var( --msim-navy-50 );
}

.msim .msim-werkzeug span {
	font-family: var( --msim-ui );
	font-size: 12px;
	color: var( --msim-navy-600 );
}

/* ---------------- Ansage vor dem Abschnitt ----------------
 *
 * Ruhig und schmal: Sie soll gelesen werden, nicht überflogen. Kein
 * Vermilion auf der Fläche - das bleibt dem einen Knopf vorbehalten, der
 * die Uhr startet.
 */
.msim .msim-ansage {
	max-width: 46em;
	background: var( --msim-sand-50 );
	border: 1px solid var( --msim-navy-100 );
}

.msim .msim-ansage h2 {
	font-family: var( --msim-display );
	font-size: 26px;
	line-height: 1.2;
	color: var( --msim-navy );
	margin: 2px 0 6px;
}

.msim .msim-ansage-kicker {
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
	margin: 0;
}

.msim .msim-ansage-menge {
	font-family: var( --msim-ui );
	font-size: 15px;
	font-weight: 600;
	color: var( --msim-aktion );
	margin: 0 0 14px;
}

.msim .msim-ansage-text {
	font-size: 16px;
	line-height: 1.65;
	color: var( --msim-navy-800 );
	border-left: 3px solid var( --msim-navy-200 );
	padding-left: 14px;
	margin-bottom: 16px;
}

/* ---------------- Lösungen nach dem Durchgang ----------------
 *
 * Zugeklappt, bis jemand sie will: Wer zuerst seine Zahl einordnen möchte,
 * soll nicht über 221 Aufgaben scrollen. Richtige Aufgaben treten zurück,
 * falsche stehen vorn - sie sind der eigentliche Ertrag.
 */
.msim .msim-loesungen { margin-top: 18px; }

.msim .msim-loesungen > summary {
	font-family: var( --msim-ui );
	font-size: 16px;
	font-weight: 600;
	color: var( --msim-aktion );
	cursor: pointer;
}

.msim .msim-los-kopf {
	font-family: var( --msim-display );
	font-size: 17px;
	color: var( --msim-navy );
	margin: 18px 0 8px;
}

.msim .msim-los-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.msim .msim-los {
	display: flex;
	gap: 12px;
	border: 1px solid var( --msim-navy-100 );
	border-left: 3px solid var( --msim-vermilion );
	border-radius: 8px;
	padding: 10px 12px;
	background: #fff;
}

/* Richtig heisst: tritt zurück. Kein Grün, kein Haken - die Aufmerksamkeit
   gehört dem, was fehlt. */
.msim .msim-los-gut {
	border-left-color: var( --msim-navy-200 );
	background: var( --msim-navy-50 );
	opacity: .72;
}

.msim .msim-los-nr {
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	color: var( --msim-navy-600 );
	min-width: 1.8em;
}

.msim .msim-los-inhalt { min-width: 0; flex: 1; }

.msim .msim-los-frage { font-size: 15px; color: var( --msim-navy-800 ); }

.msim .msim-los-wahl {
	font-family: var( --msim-ui );
	font-size: 13px;
	color: var( --msim-navy-600 );
	margin: 6px 0 0;
}

/* Je eine Zeile für die eigene Wahl und für die richtige Antwort -
   seit 4.13.1 mit dem ANTWORTTEXT, nicht nur dem Buchstaben. */
.msim .msim-los-zeile { display: block; margin-top: 3px; }
.msim .msim-los-zeile em { font-style: normal; }
.msim .msim-los-zeile b { color: var( --msim-navy ); }
.msim .msim-los-zeile-gut b { color: var( --msim-aktion ); }
.msim .msim-los-antwort { color: var( --msim-navy-800 ); }
.msim .msim-los-antwort img { max-width: 160px; height: auto; vertical-align: middle; }
.msim .msim-los-reihe { margin: 4px 0 0 18px; padding: 0; }
.msim .msim-los-reihe li { margin: 1px 0; color: var( --msim-navy-800 ); }

.msim .msim-los-erklaerung {
	font-size: 14px;
	line-height: 1.6;
	color: var( --msim-navy-800 );
	background: var( --msim-sand-50 );
	border-radius: 6px;
	padding: 8px 10px;
	margin-top: 8px;
}

.msim .msim-los-erklaerung img,
.msim .msim-los-frage img { max-width: 100%; height: auto; }

/* ---------------- Bestandsauskunft (nur für die Verwaltung) ----
 *
 * Sie steht unter der Mängelliste und beantwortet die Frage, die diese
 * Liste aufwirft: Fehlt der Bestand oder nur die Auswahl? Am 30.08.2026
 * war der TMSnat-Kurs voll, und die Meldung las sich, als wäre er leer.
 */
.msim .msim-bestand {
	background: var( --msim-navy-50 );
	border: 1px solid var( --msim-navy-100 );
	margin-top: 12px;
}

.msim .msim-bestand h3 {
	font-family: var( --msim-display );
	font-size: 17px;
	color: var( --msim-navy );
	margin: 0 0 10px;
}

.msim .msim-bestand td:last-child {
	text-align: right;
	width: 2em;
}

/* ---------------- Material neben den Aufgaben ----------------
 *
 * 🚨 Beim Textverständnis liegt der Text während des Beantwortens offen.
 * Er darf die Aufgaben nicht verdrängen, deshalb ein eigener Kasten mit
 * Höhengrenze und eigenem Bildlauf: Der Text scrollt, die Aufgabe bleibt
 * stehen. Ein Text, der die Frage aus dem Bild schiebt, kostet bei jedem
 * Wechsel Zeit, die am Testtag niemand hat.
 */
.msim .msim-material {
	max-height: 46vh;
	overflow-y: auto;
	background: var( --msim-sand-50 );
	border: 1px solid var( --msim-navy-100 );
}

.msim .msim-mat-titel {
	font-family: var( --msim-display );
	font-size: 17px;
	color: var( --msim-navy );
	margin: 0 0 8px;
}

.msim .msim-mat-inhalt table {
	width: 100%;
	border-collapse: collapse;
}

.msim .msim-mat-inhalt th,
.msim .msim-mat-inhalt td {
	border-bottom: 1px solid var( --msim-navy-100 );
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
}

.msim .msim-mat-inhalt img {
	max-width: 100%;
	height: auto;
}

/*
 * Noch nicht startklar - eine Auskunft, kein Fehler. Deshalb ruhig in
 * Sand und Navy statt in der Warnfarbe: Rot hiesse, etwas sei kaputt.
 */
.msim .msim-warten {
	background: var( --msim-sand );
	color: var( --msim-navy-800 );
	border-left: 3px solid var( --msim-vermilion );
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	font-family: var( --msim-ui );
	line-height: 1.6;
}

.msim .msim-fehler {
	background: var( --mm-danger-100, #FFE3E4 );
	color: var( --mm-danger-600, #951532 );
	border-radius: 8px;
	padding: 10px 14px;
}

/* ---------------- Knöpfe ---------------- */

.msim .msim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}

.msim .msim-btn-primaer { background: var( --msim-aktion ); color: #fff !important; }
.msim .msim-btn-primaer:hover:not( [disabled] ) { background: var( --msim-aktion-tief ); }
.msim .msim-btn-leise {
	background: #fff;
	color: var( --msim-aktion ) !important;
	border-color: var( --msim-navy-300 );
}
.msim .msim-btn-leise:hover:not( [disabled] ) { border-color: var( --msim-aktion ); background: var( --msim-verm-50 ); }
.msim .msim-btn[disabled] { opacity: .45; cursor: default; }
.msim .msim-btn:focus-visible { outline: none; box-shadow: var( --mm-focus-ring, 0 0 0 3px rgba( 255, 66, 3, .30 ) ); }

/* ---------------- Kopf und Uhr ---------------- */

.msim-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 20px;
	background: var( --msim-navy );
	border-radius: 14px 14px 0 0;
	color: #F5F3EC;
}

.msim .msim-kopf-was em {
	display: block;
	font-style: normal;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba( 245, 243, 236, .65 );
}

.msim .msim-kopf-was strong {
	font-family: var( --msim-display );
	font-size: 1.2rem;
	font-weight: 600;
}

/* Die Uhr. Tabellenziffern, damit sie beim Zählen nicht zappelt - eine
   Uhr, deren Breite sich jede Sekunde ändert, zieht den Blick genau dann
   an, wenn er woanders sein sollte. */
.msim-uhr {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.1;
	font-feature-settings: "tnum";
}

.msim-uhr-zahl {
	font-family: var( --msim-display );
	font-size: 1.9rem;
	font-weight: 600;
	color: #F5F3EC;
}

.msim-uhr-wort {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba( 245, 243, 236, .65 );
}

/* 🚨 Die letzte Minute. Farbe UND Bewegung - im Augenwinkel wird eine
   Zahl nicht wahrgenommen, eine Bewegung schon. Zwei Sekunden Takt,
   nicht schneller: Hektik hilft niemandem, der noch drei Aufgaben hat. */
.msim-uhr-knapp .msim-uhr-zahl {
	color: var( --msim-vermilion );
	animation: msim-puls 2s ease-in-out infinite;
}

@keyframes msim-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* Bei null steht sie still - kein Pulsen mehr, nichts mehr zu tun. */
.msim-uhr-aus .msim-uhr-zahl { color: rgba( 245, 243, 236, .45 ); }
.msim-uhr-ueber .msim-uhr-zahl { color: var( --msim-vermilion ); }

@media ( prefers-reduced-motion: reduce ) {
	.msim-uhr-knapp .msim-uhr-zahl { animation: none; text-decoration: underline; }
}

/* ---------------- Schrittleiste ---------------- */

.msim-schritte {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	list-style: none;
	margin: 0;
	padding: 10px 20px;
	background: var( --msim-navy-50 );
	border-left: 1px solid var( --msim-navy-200 );
	border-right: 1px solid var( --msim-navy-200 );
}

.msim .msim-schritt {
	flex: 1 1 0;
	min-width: 34px;
	text-align: center;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
	padding: 4px 2px;
	border-bottom: 3px solid var( --msim-navy-200 );
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.msim .msim-schritt-vorbei { border-bottom-color: var( --msim-navy-600 ); color: var( --msim-navy-700 ); }
.msim .msim-schritt-jetzt  { border-bottom-color: var( --msim-vermilion ); color: var( --msim-aktion ); }
.msim .msim-schritt-merk   { border-bottom-style: dashed; }

/* ---------------- Frage ---------------- */

.msim-frage { border-radius: 0 0 14px 14px; border-top: none; }

.msim .msim-zaehler {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
	margin: 0 0 10px;
}

.msim-frage-text { font-size: 1.05rem; color: var( --msim-navy ); margin-bottom: 18px; max-width: 68ch; }
.msim-frage-text :is( p, li ) { color: var( --msim-navy ); }

.msim-optionen { display: grid; gap: 8px; }

.msim .msim-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var( --msim-navy-200 );
	border-radius: 10px;
	background: #fff;
	font: inherit;
	text-align: left;
	color: var( --msim-navy-800 );
	cursor: pointer;
}

.msim .msim-opt:hover:not( [disabled] ) { border-color: var( --msim-navy-300 ); background: var( --msim-navy-50 ); }

.msim-opt-buchstabe {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var( --msim-navy-300 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	color: var( --msim-navy-600 );
}

.msim .msim-opt-an {
	border-color: var( --msim-navy );
	background: var( --msim-navy-50 );
}

.msim .msim-opt-an .msim-opt-buchstabe {
	background: var( --msim-navy );
	border-color: var( --msim-navy );
	color: #fff;
}

.msim .msim-opt[disabled] { cursor: default; opacity: .55; }

/* 🚨 Nach Ablauf wird das ganze Feld ausgegraut und nimmt keine Klicks
   mehr an. Nur zu sperren reicht nicht: Ein Feld, das noch wie ein Feld
   aussieht, laedt zum Weiterklicken ein. */
.msim-tot { opacity: .55; }
.msim-tot .msim-optionen { pointer-events: none; }

/* ---------------- Leiste und Sprünge ---------------- */

.msim-leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.msim-sprungleiste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	flex: 1 1 12rem;
}

.msim .msim-sprung {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var( --msim-navy-200 );
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: .78rem;
	font-weight: 600;
	color: var( --msim-navy-600 );
	cursor: pointer;
	font-feature-settings: "tnum";
}

.msim .msim-sprung-an { background: var( --msim-navy-100 ); color: var( --msim-navy ); border-color: var( --msim-navy-300 ); }
.msim .msim-sprung-jetzt { border-color: var( --msim-vermilion ); border-width: 2px; color: var( --msim-aktion ); }

/* ---------------- Einstieg, Einprägen, Pause, Ergebnis ---------------- */

.msim-einstieg { background: var( --msim-sand-50 ); border-color: var( --msim-sand-200 ); }
.msim .msim-lead { font-size: 1.05rem; max-width: 62ch; }

.msim-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 18px 0;
	padding: 0;
}

.msim .msim-fakten li {
	flex: 1 1 8rem;
	background: #fff;
	border: 1px solid var( --msim-sand-200 );
	border-radius: 10px;
	padding: 12px 16px;
	margin: 0;
}

.msim .msim-fakten strong {
	display: block;
	font-family: var( --msim-display );
	font-size: 1.7rem;
	font-weight: 600;
	color: var( --msim-navy );
	line-height: 1.1;
	font-feature-settings: "tnum";
}

.msim .msim-fakten span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
}

.msim-merken { border-radius: 0 0 14px 14px; border-top: none; }

/*
 * 🚨 auto-FIT, nicht auto-FILL. Seit die Ausweise als EIN Materialfeld
 * ihres Sets kommen, steht hier nur noch ein Kind - auto-fill legt
 * trotzdem so viele 240-px-Spuren an, wie hineinpassen, und lässt die
 * leeren stehen. Ergebnis war eine schmale Säule am linken Rand mit acht
 * untereinander gestapelten Ausweisen, wie am 30.08.2026 live zu sehen.
 * auto-fit klappt die leeren Spuren zusammen, das eine Kind bekommt die
 * volle Breite.
 */
.msim-merkfeld {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 12px;
	margin-top: 12px;
}

/*
 * Und darin liegen die Ausweise zu zweit nebeneinander - so von Deniz
 * gewünscht. Die Regel greift zweifach, weil die Auszeichnung des
 * Materialfelds nicht in unserer Hand liegt: Steht jeder Ausweis in
 * seinem eigenen Element, ordnet die erste Regel diese; stecken alle in
 * einem Absatz, ordnet die zweite die Bilder darin.
 */
.msim .msim-merk-inhalt {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}

.msim .msim-merk-inhalt > * {
	flex: 1 1 calc( 50% - 6px );
	min-width: 0;
	margin: 0;
}

.msim .msim-merk-inhalt p {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.msim .msim-merk-inhalt p img {
	flex: 1 1 calc( 50% - 6px );
	min-width: 0;
}

.msim .msim-merk-inhalt img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* Überschriften und Fliesstext im Material bleiben über die volle Breite. */
.msim .msim-merk-inhalt > h2,
.msim .msim-merk-inhalt > h3,
.msim .msim-merk-inhalt > h4,
.msim .msim-merk-inhalt > table {
	flex-basis: 100%;
}

.msim-karte-merk {
	margin: 0;
	border: 1px solid var( --msim-navy-200 );
	border-radius: 10px;
	padding: 12px;
	background: var( --msim-sand-50 );
}

.msim-karte-merk img { width: 100%; height: auto; border-radius: 6px; display: block; }

.msim-pause { text-align: center; background: var( --msim-navy ); border-color: var( --msim-navy ); }
.msim-pause h2 { color: #F5F3EC; }
.msim .msim-pause p { color: rgba( 245, 243, 236, .8 ); margin-left: auto; margin-right: auto; }
.msim-pause .msim-uhr { align-items: center; margin: 12px 0 18px; }
.msim-pause .msim-uhr-zahl { font-size: 3rem; }

/*
 * 🚨 DIE PAUSENKARTE IST DUNKEL - alles darin muss hell sein.
 *
 * Seit 3.9.8 steht dort auch die Ansage, was nach der Pause kommt. Ihre
 * Stile waren für die HELLE Ansagekarte gemacht (Navy 800 auf Sand), und
 * auf dem dunklen Grund stand der Text dann grau in grau. Am 01.09.2026
 * live gesehen: lesbar nur, wenn man weiss, was dasteht.
 */
.msim .msim-pause .msim-ansage-text {
	color: rgba( 245, 243, 236, .92 );
	border-left-color: rgba( 245, 243, 236, .35 );
	text-align: left;
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

.msim .msim-pause .msim-ansage-menge {
	color: #F5F3EC;
	font-weight: 600;
}

.msim .msim-pause .msim-hinweis,
.msim .msim-pause .msim-merke {
	color: rgba( 245, 243, 236, .8 );
}

.msim-gesamt { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.msim .msim-gesamt b {
	font-family: var( --msim-display );
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	color: var( --msim-navy );
	font-feature-settings: "tnum";
}
.msim .msim-gesamt span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
	margin-left: 6px;
}

.msim-tab-huelle { overflow-x: auto; margin-bottom: 16px; }

.msim-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.msim-tabelle th {
	text-align: left;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --msim-navy-600 );
	border-bottom: 1px solid var( --msim-navy-200 );
	padding: 6px 10px 6px 0;
}
.msim-tabelle td { padding: 7px 10px 7px 0; border-bottom: 1px solid var( --msim-navy-100 ); }
.msim-tabelle .msim-zahl { text-align: right; font-feature-settings: "tnum"; white-space: nowrap; }

@container ( max-width: 520px ) {
	.msim-karte { padding: 16px; }
	.msim-uhr-zahl { font-size: 1.5rem; }
	.msim .msim-schritt { font-size: 0; min-width: 0; padding: 3px 0; }
}

/* ---------------- Zuordnung und Rangreihung ----------------
 *
 * 🚨 Drei Formate, drei Bedienungen. Bis 4.3.0 sah jede Aufgabe gleich
 * aus, auch wenn der Fragestamm etwas anderes verlangte - „kreuze alle
 * an" über Knöpfen, von denen sich einer drücken liess.
 */

/* Mehrfachauswahl: eckig statt rund, damit man es sieht, bevor man klickt. */
.msim .msim-opt-mehr .msim-opt-buchstabe { border-radius: 5px; }

.msim .msim-opt-mehr.msim-opt-an .msim-opt-buchstabe::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 13px;
}

.msim .msim-opt-mehr .msim-opt-buchstabe { position: relative; }
.msim .msim-opt-mehr.msim-opt-an .msim-opt-buchstabe { color: transparent; }

/* Rangreihung */
.msim .msim-rang {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	counter-reset: rang;
}

.msim .msim-rang-zeile {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var( --msim-navy-200 );
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
}

.msim .msim-rang-nr {
	font-family: var( --msim-display );
	font-size: 20px;
	color: var( --msim-aktion );
	min-width: 1.4em;
	text-align: center;
}

.msim .msim-rang-text { flex: 1; min-width: 0; }

.msim .msim-rang-pfeile { display: flex; flex-direction: column; gap: 2px; }

.msim .msim-pfeil {
	border: 1px solid var( --msim-navy-200 );
	background: var( --msim-navy-50 );
	color: var( --msim-navy-800 );
	border-radius: 6px;
	width: 30px;
	height: 22px;
	line-height: 1;
	cursor: pointer;
	font-size: 13px;
}

.msim .msim-pfeil:disabled { opacity: .35; cursor: default; }
.msim .msim-pfeil:not(:disabled):hover { background: var( --msim-navy-100 ); }

/* ---------------- Die zwei Wege in einen Durchgang ----------------
 *
 * 🚨 Sie dürfen nicht verwechselbar sein. Der Einstiegsdurchgang ist für
 * alle derselbe - nur deshalb bedeutet seine Zahl zwischen zwei Menschen
 * etwas. Ein neu zusammengestellter ist eine Übung. Gleich gestaltet,
 * bekäme man zwei Zahlen, die gleich aussehen und es nicht sind.
 */
.msim .msim-wege {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
	gap: 14px;
	margin-top: 18px;
}

.msim .msim-weg {
	border: 1px solid var( --msim-navy-200 );
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.msim .msim-weg h3 {
	font-family: var( --msim-display );
	font-size: 18px;
	color: var( --msim-navy );
	margin: 0;
}

.msim .msim-weg p { flex: 1; }

.msim .msim-weg .msim-btn { align-self: flex-start; }

/* Ohne Kurs bleibt der zweite Weg sichtbar, aber erkennbar zu. */
.msim .msim-weg-zu {
	background: var( --msim-navy-50 );
	border-style: dashed;
}

/* ---------------- Lösungen: Leiste und Aufklappen ----------------
 *
 * 🚨 Die erste Fassung schrieb alle 221 Aufgaben untereinander - das las
 * niemand. Eine Leiste je Abschnitt mit seiner Trefferzahl, darin jede
 * Aufgabe zugeklappt: Wer nur seine drei falschen Chemieaufgaben sehen
 * will, soll nicht durch Biologie scrollen.
 */
.msim .msim-los-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 10px;
}

.msim .msim-los-reiter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	border: 1px solid var( --msim-navy-200 );
	background: #fff;
	color: var( --msim-navy-700 );
	border-radius: 8px;
	padding: 6px 10px;
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.msim .msim-los-reiter span {
	font-weight: 400;
	font-size: 11px;
	color: var( --msim-navy-600 );
}

.msim .msim-los-reiter-an {
	border-color: var( --msim-vermilion );
	background: var( --msim-verm-50 );
	color: var( --msim-aktion );
}

.msim .msim-los-griffe { margin: 0 0 10px; }

.msim .msim-los > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
}

.msim .msim-los > summary::-webkit-details-marker { display: none; }

.msim .msim-los-kurz {
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	color: var( --msim-aktion );
}

.msim .msim-los-gut .msim-los-kurz { color: var( --msim-navy-600 ); }

.msim .msim-los-inhalt { margin-top: 10px; }

/* Zu welchem Lesetext eine Aufgabe gehoert - steht neben der Zaehlung.
   Zurueckhaltend gesetzt: Es ist eine Orientierung, keine Ansage. */
.msim-zutext { margin-left: .6em; font-weight: 400; color: var( --msim-navy-600, #5A6675 ); }

/* =====================================================================
 * Abschnitte, die auf Papier laufen
 *
 * 🚨 Der Hinweis auf der Einstiegskarte muss auffallen. Wer ihn
 * ueberliest, sitzt im vorletzten Abschnitt ohne Bogen da - und die
 * Gruppe faellt mit null Punkten in die Wertung, obwohl er sie haette
 * bearbeiten koennen. Deshalb Rahmen, Farbe und ein eigener Titel statt
 * eines weiteren grauen Absatzes.
 * =================================================================== */

/*
 * 🚨 KARMIN, NICHT VERMILION. Die Simulation ist eine Pruefungsansicht -
 * dort liest sich der Marken-Akzent wie eine Bewertung (Styleguide
 * Teil 3, Abschnitt 6). Was hier steht, ist ein Achtung-Kasten, und
 * dafuer gibt es das Muster „Warnung": Kante Karmin 600, Flaeche
 * Karmin 100 (Teil 3, Abschnitt 7).
 */
.msim-papier-warnung {
	border: 2px solid var( --mm-danger-600, #951532 );
	background: var( --mm-danger-100, #FFE3E4 );
	border-radius: 10px;
	padding: 14px 16px;
	margin: 16px 0;
}

.msim-papier-warnung strong {
	display: block;
	font-family: var( --msim-ui );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --mm-danger-700, #780A25 );
	margin-bottom: 6px;
}

.msim-papier-warnung p { margin: 0 0 8px; }
.msim-papier-warnung p:last-child { margin-bottom: 0; }
.msim-papier-links { display: flex; flex-wrap: wrap; gap: 8px; }

.msim-papier-text { margin: 12px 0; }

/* Das Punktfeld: eine Zeile, die man nicht uebersieht, mit der
   Bezugsgroesse direkt daneben - „14 von 18" statt einer nackten Zahl. */
.msim-papier-feld {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid var( --msim-navy-200, #D4DDE9 );
	border-radius: 10px;
	background: var( --msim-navy-50, #F4F7FB );
}

.msim-papier-feld > span { flex: 1 1 220px; font-weight: 600; }

.msim-papier-feld input {
	width: 5.5em;
	padding: 8px 10px;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	border: 1px solid var( --msim-navy-300, #BCC8D8 );
	border-radius: 8px;
	background: #fff;
}

.msim-papier-feld em {
	font-style: normal;
	color: var( --msim-navy-600, #6B7A8E );
}

/* =====================================================================
 * Die Auswertung nach dem Durchgang - Kachelzeile, Netz, Tabelle.
 *
 * 🚨 HIER KOMMT KEIN VERMILION VOR. Styleguide Teil 3, Abschnitt 6:
 * „Das Herzstueck. Vermilion kommt hier bewusst nicht vor -- sonst liest
 * sich der Marken-Akzent wie eine Bewertung." Eine orange gefuellte
 * Netzflaeche ueber dem eigenen Ergebnis waere genau das. Die erste
 * Fassung hatte sie, Deniz hat sie zurueckgewiesen.
 *
 * Gezeichnet wird nach den Illustrationsregeln aus Teil 6: Flaeche
 * Sand 200, Kontur Navy 900, Linienstaerken nur 2,5 / 1,5 / 0,75 px,
 * Enden und Ecken rund.
 *
 * Eigener Klassenstamm (.mauw) statt .msim, weil der Renderer keinem der
 * beiden Orte gehoert - die Ergebnisliste zieht ihn spaeter genauso.
 * =================================================================== */

.mauw { margin: 0 0 24px; }

.mauw-kacheln {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 12px;
	margin-bottom: 22px;
}

/* Karten sind weiss, Raender Sand 200 - Styleguide Teil 3. */
.mauw-kachel {
	border: 1px solid var( --msim-sand-200, #EFE6DC );
	border-radius: 10px;
	padding: 12px 14px;
	background: #fff;
	/* 🚨 min-width: auto ist die Grid-Voreinstellung und laesst eine
	   Kachel ueber den Rand wachsen, sobald eine Zahl breit wird. */
	min-width: 0;
}

.mauw-kachel-leise { background: var( --msim-sand-50, #FDF9F4 ); border-style: dashed; }

/* Label: Inter 12 px, 0,07 em gesperrt, versal - Styleguide Teil 2. */
.mauw-kachel-kopf {
	display: block;
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var( --msim-navy-700, #4F5E72 );
}

/* Die Zahl in Fraunces, H3-Groesse. */
.mauw-kachel b {
	display: block;
	font-family: var( --msim-display );
	font-weight: 600;
	font-size: 25px;
	line-height: 1.24;
	letter-spacing: -.01em;
	color: var( --msim-navy, #232F3F );
	margin: 4px 0 2px;
}

/* Caption: Inter 13 px. */
.mauw-kachel em {
	display: block;
	font-style: normal;
	font-family: var( --msim-ui );
	font-size: 13px;
	line-height: 1.45;
	color: var( --msim-navy-700, #4F5E72 );
}

.mauw-netze {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 18px;
	margin-bottom: 22px;
}

.mauw-netz { margin: 0; min-width: 0; }

.mauw-netz figcaption {
	font-family: var( --msim-ui );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --msim-navy-700, #4F5E72 );
	margin-bottom: 8px;
	text-align: center;
}

/* 🚨 Gedeckelt: Ein EINZELNES Netz zoege sich sonst ueber die volle
   Spaltenbreite, und mit ihm die Schrift im viewBox - die
   Achsenbeschriftung stand dann in Ueberschriftgroesse da. */
.mauw-netz svg {
	width: 100%;
	max-width: 360px;
	height: auto;
	display: block;
	margin: 0 auto;
	overflow: visible;
}

/* Linienstaerken: nur 0,75 / 1,5 / 2,5 - Styleguide Teil 6. */
.mauw-ring {
	fill: none;
	stroke: var( --msim-sand-200, #EFE6DC );
	stroke-width: .75;
}

.mauw-speiche {
	stroke: var( --msim-sand-200, #EFE6DC );
	stroke-width: .75;
}

.mauw-flaeche {
	fill: var( --msim-sand-200, #EFE6DC );
	fill-opacity: .85;
	stroke: var( --msim-navy, #232F3F );
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.mauw-knoten { fill: var( --msim-navy, #232F3F ); }

.mauw-achse {
	font-family: var( --msim-ui );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	fill: var( --msim-navy-700, #4F5E72 );
}

/*
 * Das zweite Netz zeigt den Rang, nicht die Quote.
 *
 * 🚨 Unterschieden wird ueber die FORM, nicht ueber eine zweite Farbe:
 * offene Kontur statt gefuellter Flaeche, duennere Linie. Styleguide
 * Teil 3: „Unterschieden wird ueber Label und Icon, nicht ueber die
 * Farbe. So bleibt die Seite ruhig, statt zum Regenbogen zu werden."
 */
.mauw-netze .mauw-netz + .mauw-netz .mauw-flaeche {
	fill: none;
	stroke: var( --msim-navy-600, #6B7A8E );
	stroke-width: 1.5;
	stroke-dasharray: 5 3;
}

.mauw-netze .mauw-netz + .mauw-netz .mauw-knoten {
	fill: var( --msim-navy-600, #6B7A8E );
}

.mauw-tab-huelle { overflow-x: auto; }
.mauw-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }

.mauw-tabelle th,
.mauw-tabelle td {
	padding: 8px 10px;
	border-bottom: 1px solid var( --msim-sand-200, #EFE6DC );
	text-align: left;
	font-family: var( --msim-ui );
}

.mauw-tabelle th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --msim-navy-700, #4F5E72 );
}

.mauw-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }