/**
 * Mission Ergebnisse – Oberfläche
 *
 * Dieselben Marken- und Abstandswerte wie Diagnostik, Therapie und
 * Simulation: 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.
 *
 * 🚨 Die Herkunft eines Eintrags ist das wichtigste Merkmal auf dieser
 * Seite und bekommt deshalb Farbe: Eine amtliche Ergebnismitteilung darf
 * nicht aussehen wie eine Übung von einem Anbieter. Wer das gleich
 * gestaltet, lädt dazu ein, ein halbes Jahr später Äpfel mit Birnen zu
 * vergleichen.
 */

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

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

	--merg-sand-50:  var( --mm-sand-50, #FDF9F4 );
	--merg-sand:     var( --mm-sand-100, #F9F3EB );

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

	font-family: var( --merg-ui );
	color: var( --merg-navy-800 );
	line-height: 1.6;
}

/* 🚨 Eigene Kennung als Anker. Das Lehrtext-CSS des Child-Themes
   überschreibt sonst jeden Absatz (Source Serif 19 px, Navy 900) - dieselbe
   Falle wie bei der Diagnostik 0.1.1. */
#merg-app p,
#merg-app li,
#merg-app span,
#merg-app label {
	font-family: var( --merg-ui );
	font-size: 16px;
	color: var( --merg-navy-800 );
}

.merg .merg-kopf h2 {
	font-family: var( --merg-display );
	font-size: 28px;
	line-height: 1.2;
	color: var( --merg-navy );
	margin: 0 0 8px;
}

.merg .merg-lead {
	max-width: 46em;
	margin: 0 0 20px;
}

/* ---------------- Die Kurve ----------------
 *
 * 🚨 Die y-Achse geht immer von 0 bis 100. Ein Ausschnitt, der bei 50
 * beginnt, macht aus zwei Punkten einen Berg - genau die Massstabsfalle,
 * vor der die Ansage zu Diagrammen und Tabellen warnt.
 */
.merg .merg-kurve {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid var( --merg-navy-100 );
	border-radius: 12px;
	background: #fff;
}

.merg .merg-kurve svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.merg .merg-kurve figcaption {
	font-size: 13px;
	color: var( --merg-navy-600 );
	margin-top: 10px;
	max-width: 52em;
}

.merg .merg-legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 10px 0 0;
	font-size: 13px;
	color: var( --merg-navy-600 );
}

.merg .merg-lg {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: -1px;
}

.merg .merg-lg-vermilion { background: var( --merg-vermilion ); }
.merg .merg-lg-navy      { background: var( --merg-navy-800 ); }
.merg .merg-lg-grau      { background: var( --merg-navy-300 ); }
.merg .merg-lg-ring      { background: #fff; box-shadow: inset 0 0 0 2px var( --merg-vermilion ); }

.merg .merg-fest {
	font-size: 13px;
	color: var( --merg-navy-600 );
	font-style: italic;
}

/* ---------------- Die Liste ---------------- */

.merg .merg-liste {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 14px;
	margin-bottom: 20px;
}

.merg .merg-eintrag {
	border: 1px solid var( --merg-navy-100 );
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
}

.merg .merg-eintrag-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

/*
 * 🚨 DIESELBE MARKE WIE IN DER LEGENDE DER KURVE: ein farbiger Punkt
 * und das Wort daneben, in normaler Schreibung.
 *
 * Vorher stand hier eine Pille in Versalien. Wer oben einen
 * vermilionfarbenen Punkt für die Diagnostik sieht und unten eine
 * andersartige Marke für dieselbe Sache, muss zweimal lernen, was
 * dasselbe bedeutet - und beim nächsten Umgestalten laufen die beiden
 * auseinander. Deshalb teilen sie sich die Punkt-Klassen.
 *
 * Und sie bricht nicht um: Eine über zwei Zeilen gezogene Marke sieht
 * aus wie ein Fehler, mit Silbentrennung erst recht.
 */
.merg .merg-quelle {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var( --merg-navy-800 );
	white-space: nowrap;
	hyphens: none;
	flex: 0 0 auto;
}

.merg .merg-datum {
	font-size: 13px;
	color: var( --merg-navy-600 );
}

.merg .merg-eintrag h3 {
	font-family: var( --merg-display );
	font-size: 17px;
	color: var( --merg-navy );
	margin: 0 0 6px;
}

.merg .merg-wert {
	margin: 4px 0;
	font-size: 15px;
	color: var( --merg-navy-600 );
}

.merg .merg-wert b {
	font-family: var( --merg-display );
	font-size: 30px;
	color: var( --merg-navy );
}

.merg .merg-wert-leer {
	font-size: 14px;
	font-style: italic;
}

/* Ein Teilergebnis muss sich als solches zu erkennen geben. */
.merg .merg-teil {
	font-size: 13px;
	color: var( --merg-navy-600 );
	background: var( --merg-sand-50 );
	border-left: 3px solid var( --merg-navy-300 );
	padding: 6px 10px;
	margin: 8px 0 0;
}

.merg .merg-notiz {
	font-size: 14px;
	color: var( --merg-navy-600 );
	margin: 8px 0 0;
}

.merg .merg-eintrag-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 12px 0 0;
}

/* Ein längerer Hinweis nimmt die ganze Zeile - sonst drückt er den Knopf
   daneben an den Rand, und der sieht dort aus, als gehörte er nicht dazu. */
.merg .merg-eintrag-fuss .merg-fest { flex: 1 1 100%; }

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

.merg .merg-btn {
	display: inline-block;
	background: var( --merg-vermilion );
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font-family: var( --merg-ui );
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.merg .merg-btn:hover { background: var( --merg-aktion ); }

.merg .merg-link {
	background: none;
	border: 0;
	padding: 0;
	font-family: var( --merg-ui );
	font-size: 14px;
	color: var( --merg-aktion );
	cursor: pointer;
	text-decoration: underline;
}

.merg .merg-link-still { color: var( --merg-navy-600 ); }

/* ---------------- Das Formular ---------------- */

.merg .merg-formular {
	border: 1px solid var( --merg-navy-200 );
	border-radius: 12px;
	padding: 16px;
	background: var( --merg-sand-50 );
}

.merg .merg-formular h3 {
	font-family: var( --merg-display );
	font-size: 19px;
	color: var( --merg-navy );
	margin: 0 0 12px;
}

.merg .merg-kopffelder,
.merg .merg-felder {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 10px 14px;
	margin-bottom: 12px;
}

.merg .merg-feld {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.merg .merg-feld-breit { grid-column: 1 / -1; }

.merg .merg-feld > span {
	font-size: 13px;
	font-weight: 600;
	color: var( --merg-navy-800 );
}

.merg .merg-feld > em {
	font-size: 12px;
	font-style: normal;
	color: var( --merg-navy-600 );
}

.merg .merg-feld input,
.merg .merg-feld select {
	font-family: var( --merg-ui );
	font-size: 15px;
	padding: 8px 10px;
	border: 1px solid var( --merg-navy-300 );
	border-radius: 8px;
	background: #fff;
	color: var( --merg-navy );
	width: 100%;
	box-sizing: border-box;
}

.merg .merg-form-fuss {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 14px 0 0;
}

.merg .merg-hinweis {
	font-size: 14px;
	color: var( --merg-navy-600 );
	margin: 0 0 12px;
}

.merg .merg-leer {
	background: var( --merg-sand );
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.merg .merg-fehler {
	background: var( --mm-danger-100, #FDE7E4 );
	color: var( --mm-danger-600, #B3261E );
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 14px;
}

.merg .merg-neu { margin: 0; }

/* ---------------- Ergebnismitteilung einlesen ----------------
 *
 * 🚨 Die Datei verlässt den Rechner nicht - gelesen wird im Browser,
 * derselbe Weg wie in der Diagnostik. Deshalb heisst der Knopf „einlesen"
 * und nicht „hochladen": Das Wort soll stimmen.
 */
.merg .merg-lesen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px dashed var( --merg-navy-300 );
	border-radius: 10px;
	background: #fff;
}

.merg .merg-lesen-text {
	font-size: 13px;
	color: var( --merg-navy-600 );
	flex: 1 1 16em;
}

.merg .merg-btn-still {
	background: var( --merg-navy-50 );
	color: var( --merg-navy-800 );
	border: 1px solid var( --merg-navy-300 );
	cursor: pointer;
}

.merg .merg-btn-still:hover { background: var( --merg-navy-100 ); }

/*
 * Die aufgeklappte Auswertung eines Eintrags.
 *
 * 🚨 Sie traegt die Klasse .msim mit, weil der Renderer aus der
 * Simulation stammt und deren Stilblatt braucht - genau wie die
 * Nachlese darueber. Ohne sie staende hier eine unformatierte Tabelle.
 */
.merg-auswertung {
	margin: 14px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var( --mm-sand-200, #EFE6DC );
}