/* Scanario — Gestaltung.
 *
 * Umgebaut auf den Stil von grapheneos.org (Auftrag "ui-graphene"). Die
 * Vorlage wurde vermessen und die Abweichungen mit dem Auftraggeber
 * abgestimmt -- diese Datei setzt die abgestimmten Werte um, sie
 * entwirft nicht neu. Vermessene Werte und ihre Herkunft stehen bei den
 * jeweiligen Regeln unten.
 *
 * Werkzeug-Aesthetik bleibt Grundsatz: dicht, gemessen, ohne Schmuck. Die
 * Note ist das mit Abstand lesbarste Element der Seite, weil ein
 * weitergeleiteter Report bei jemandem landet, der zehn Sekunden Zeit hat.
 *
 * Grundsaetze:
 * - Farben ausschliesslich als Custom Properties. Der Dunkelmodus schaltet
 *   nur die Variablen um, es gibt kein zweites Stylesheet.
 * - Schweregrade nie allein ueber Farbe. Die Stufe steht als Wort da, die
 *   Farbe verstaerkt nur.
 * - Keine Webschrift, keine externe Anfrage. Dieselbe Zusage, die dieses
 *   Produkt bei Kunden prueft -- deshalb Systemschriften statt Roboto
 *   (das die Vorlage tatsaechlich nutzt), siehe --schrift unten.
 */

/* ---------------------------------------------------------------- Farben */

:root {
	/* Die Seite ist dunkel, unabhaengig von der Systemeinstellung.
	 * --grund (#121212) ist der vermessene Grundton der Vorlage. */
	color-scheme: dark;

	--grund:        #121212;
	--flaeche:      #1c1c1c;
	--flaeche-tief: #232323;
	--rahmen:       #333333;
	/* Vermessener Textton der Vorlage: rgba(255,255,255,.87), keine
	 * reine Vollfarbe. --text-leise ist nicht vermessen (die Vorlage
	 * nennt nur EINEN Textton) und bewusst als geringere Deckkraft
	 * desselben Weiss abgeleitet, statt eines eigenen Grautons -- so
	 * bleibt sie mit --text verwandt statt zufaellig danebenzuliegen. */
	--text:         rgba(255, 255, 255, .87);
	--text-leise:   rgba(255, 255, 255, .6);

	/* Akzentfarbe: #b39ddb (Violett) statt des Blaus der Vorlage -- auf
	 * Wunsch des Auftraggebers, der Blau ausdruecklich ausgeschlossen
	 * hat. Violett wurde gewaehlt, weil es mit KEINER Befundstufe und
	 * KEINER Note kollidiert (siehe --stufe-* und --note-* unten): die
	 * Befundfarben reichen von Gruen ueber Gelb/Orange bis Rot, die
	 * Noten ebenso -- Violett liegt farblich ausserhalb dieses Spektrums
	 * und kann deshalb nie mit einer Bedeutungsfarbe verwechselt werden.
	 * Schwarze Knopfschrift: Kontrast 8,8:1 gegen #b39ddb. */
	--akzent:       #b39ddb;
	--akzent-text:  #000000;

	/* Schweregrade. UNVERAENDERT -- sie tragen Bedeutung, nicht
	 * Geschmack, und sind vom Umbau ausdruecklich ausgenommen. */
	--stufe-kritisch: #ff7b72;
	--stufe-hoch:     #ffa657;
	--stufe-mittel:   #e3b341;
	--stufe-niedrig:  #8ddb8d;
	--stufe-hinweis:  #9b9b9b;

	/* Noten. UNVERAENDERT, aus demselben Grund wie die Schweregrade. */
	--note-a: #3fb950;
	--note-b: #7fc94a;
	--note-c: #d29922;
	--note-d: #f0883e;
	--note-e: #f85149;
	--note-f: #da3633;

	/* Die Datenschutzerklaerung sagt zu, dass keine fremden Quellen
	 * nachgeladen werden (tests/test_vorlagen_lecken_nicht.py::
	 * test_keine_fremden_quellen_eingebunden) -- deshalb kein Google-Fonts-
	 * Link fuer Roboto, sondern ein System-Stack, der auf jeder Plattform
	 * praktisch dasselbe zeichnet: Roboto selbst unter Android, San
	 * Francisco unter macOS/iOS, Segoe UI unter Windows. */
	--schrift:      system-ui, -apple-system, "Segoe UI", Roboto,
	                "Helvetica Neue", Arial, sans-serif;
	--schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	                "Liberation Mono", monospace;

	--a1: .25rem;  --a2: .5rem;  --a3: .75rem;
	--a4: 1rem;    --a5: 1.5rem; --a6: 2.5rem;

	--radius: 3px;
	/* Inhaltsspalte: vermessene 832px der Vorlage, als rem bei 16px
	 * Wurzelschriftgroesse (832 / 16 = 52). */
	--breite: 52rem;

	/* Navigationsleiste: vermessener Grundton #212121 der Vorlage --
	 * eigenstaendig von --flaeche, weil die Leiste heller ist als eine
	 * gewoehnliche Karte und ausdruecklich nicht mit ihr verwechselt
	 * werden soll. */
	--leiste: #212121;
	/* Vermessen an der Vorlage: #site-menu ul li:hover -> rgb(66,66,66). */
	--leiste-flaeche: #424242;

	/* Code-Behandlung der Vorlage, vermessen: Monospace 14px auf #44474e,
	 * Radius 8px, 4px Innenabstand. Eigene Variable, weil dieser Ton an
	 * keiner anderen Stelle der Seite vorkommt. */
	--code-flaeche: #44474e;
}

/* ----------------------------------------------------------------- Basis */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	/* Fliesstext der Vorlage: 16px/24px Zeilenhoehe (1.5) -- der
	 * spuerbarste Unterschied zur vorherigen, engeren Fassung. */
	font: 16px/1.5 var(--schrift);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Ueberschriften der Vorlage, vermessen: H1 36px, H2 24px, H3 22px, alle
 * Schriftgewicht 700. */
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--a3); font-weight: 700; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.375rem; }
p  { margin: 0 0 var(--a4); }

/* Die Akzentfarbe ist ausdruecklich auf ZWEI Stellen beschraenkt: die
 * Wortmarke und den Pruefen-Knopf. Fliesstextlinks tragen sie deshalb
 * nicht. Damit sie trotzdem als Links erkennbar bleiben, traegt die
 * Unterstreichung diese Aufgabe allein -- WCAG 1.4.1 verlangt, dass
 * Bedeutung nie NUR ueber Farbe transportiert wird, und ohne Farbe ist
 * die Unterstreichung nicht mehr Zierde, sondern das einzige Merkmal. */
a {
	color: var(--text);
	text-decoration-color: var(--text-leise);
	text-underline-offset: 2px;
}
a:hover,
a:focus-visible { text-decoration-color: var(--text); }

code, kbd, samp { font-family: var(--schrift-mono); font-size: .875em; }

/* Bleibt bestehen und wird nur entfaerbt. Ein Fokusrahmen ist keine
 * Zierde, sondern die einzige Rueckmeldung fuer alle, die die Seite mit
 * der Tastatur bedienen (WCAG 2.4.7). Weiss auf dunklem Grund ist der
 * kontrastreichste Ton, den wir haben. */
:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* ------------------------------------------------------- Navigationsleiste */

/* Neu gegenueber der vorherigen Fassung (die nur eine Wortmarke ueber
 * einer Trennlinie zeigte). Auf --leiste (#212121), ueber die volle
 * Seitenbreite -- anders als die Inhaltsspalte bewusst NICHT auf --breite
 * begrenzt, weil die Vorlage die Leiste selbst als vollflaechigen Balken
 * zeigt. 16px Innenabstand (vermessen), nicht klebend (kein position:
 * sticky, wie in der Vorlage). */
.leiste {
	background: var(--leiste);
	display: flex;
	align-items: center;
	/* Alles linksbuendig, Wortmarke und Verweise als eine Gruppe. Vorher
	 * space-between: auf breiten Bildschirmen klaffte dazwischen ein Loch
	 * von mehreren hundert Pixeln, und die Verweise standen am rechten
	 * Rand allein. */
	justify-content: flex-start;
	flex-wrap: wrap;
	/* Weder Luecke noch eigene Polsterung: Beides wandert in die Verweise
	 * selbst (.wortmarke und .leiste__links a). Nur so reicht die
	 * Hoverflaeche ueber die VOLLE Hoehe der Leiste und die Bloecke
	 * stossen aneinander, wie in der Vorlage vermessen. Mit gap oder
	 * Aussenpolsterung blieben Streifen des Untergrunds stehen. */
	gap: 0;
	padding: 0;
}

.leiste__links {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
}

/* Vermessen: Navigationslinks der Vorlage sind weiss, nicht akzentfarben --
 * die Akzentfarbe ist fuer Fliesstextlinks und Knoepfe reserviert (Abweichung
 * 2), nicht fuer die Leiste selbst. */
.leiste__links a {
	display: flex;
	align-items: center;
	padding: var(--a4);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}
/* Keine Unterstreichung, sondern eine hellere Flaeche ueber die volle
 * Leistenhoehe -- so macht es die Vorlage. Der Fokusrahmen bleibt davon
 * unberuehrt und liegt zusaetzlich darauf. */
.leiste__links a:hover,
.leiste__links a:focus-visible {
	background: var(--leiste-flaeche);
}

/* Die Wortmarke IST das Logo: reine Typografie, kein Zeichen, keine Linie,
 * keine Farbe. Schreibmaschinenschrift und weite Sperrung, weil das Werkzeug
 * sich als Messgeraet ausgeben soll und nicht als Marke. Durchgehend klein
 * geschrieben -- Absicht, keine Nachlaessigkeit. Bleibt beim Umbau
 * unveraendert, sitzt jetzt links in der Navigationsleiste. */
.wortmarke {
	font-family: var(--schrift-mono);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: lowercase;
	/* Traegt die Akzentfarbe wie Fliesstextlinks und Knoepfe -- die
	 * Wortmarke ist das einzige farbige Element der Leiste und damit ihr
	 * Ankerpunkt. Die uebrigen Verweise bleiben weiss, sonst konkurrieren
	 * sie mit ihr. */
	color: var(--akzent);
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: var(--a4);
}
/* Dieselbe Flaeche wie die uebrigen Verweise -- die Wortmarke ist in der
 * Leiste ein Menuepunkt wie die anderen. Die Schriftfarbe bleibt der
 * Akzent, nur der Untergrund wechselt. */
.wortmarke:hover,
.wortmarke:focus-visible {
	background: var(--leiste-flaeche);
}

/* ----------------------------------------------------------- Seitenrahmen */

.inhalt,
.fuss__inhalt {
	max-width: var(--breite);
	margin: 0 auto;
	width: 100%;
}

.inhalt {
	flex: 1;
	padding: var(--a6) var(--a4);
}

.fuss {
	border-top: 1px solid var(--rahmen);
	padding: var(--a4);
	font-size: .85rem;
	color: var(--text-leise);
}
/* Die Verweise auf Impressum und Datenschutz stehen seit dem Umbau in der
 * Navigationsleiste auf JEDER Seite. Sie hier zu wiederholen war sichtbare
 * Doppelung; §5 DDG verlangt "leicht erkennbar, unmittelbar erreichbar und
 * staendig verfuegbar" -- das leistet die Leiste, die Fusszeile muss es
 * nicht ein zweites Mal tun. Uebrig bleibt der Hinweissatz, und der steht
 * mittig, weil er allein steht. */
.fuss__inhalt { text-align: center; }
.fuss p { margin: 0 auto; max-width: 60ch; }

/* ------------------------------------------------------------ Startseite */

.start { max-width: 40rem; margin: 0 auto; }
.start__satz { color: var(--text-leise); font-size: 1.05rem; margin-bottom: var(--a5); }

.pruefform { display: flex; gap: var(--a2); margin-bottom: var(--a2); }
.pruefform label {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
}

.pruefform input {
	flex: 1;
	min-width: 0;
	font: 1.1rem var(--schrift-mono);
	padding: var(--a3) var(--a4);
	color: var(--text);
	background: var(--grund);
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
}
.pruefform input::placeholder { color: var(--text-leise); opacity: .7; }
/* Kein weisser Umriss an diesem Feld. Der globale :focus-visible-Rahmen
 * ist hier doppelt auffaellig, weil das Feld autofocus traegt -- er
 * begruesst also jeden Besucher schon beim Laden, zusammen mit dem
 * Rahmen des Feldes selbst.
 *
 * Ersatzlos entfernen waere aber ein Mangel: WCAG 1.4.11 verlangt fuer
 * die Zustandsanzeige eines Bedienelements 3:1 gegen die Nachbarfarben.
 * Deshalb bleibt EINE Anzeige, nur leiser -- der Rahmen wechselt von
 * --rahmen (#333) auf --text-leise (etwa #999). Gemessen: 6,7:1 gegen
 * den Grund und 5,1:1 gegen den Ruhezustand. Dazu kommt der Textcursor
 * im Feld. */
.pruefform input:focus-visible {
	outline: none;
	border-color: var(--text-leise);
}

/* Knopf der Vorlage, vermessen: Radius 20px, Innenabstand 12px/24px,
 * Schriftgewicht 700, 14.4px, schwarze Schrift. Gefuellte Pille ohne
 * Rahmen -- die Vorlage zeigt keinen sichtbaren Rand um ihre Knoepfe. */
.knopf {
	font: 700 .9rem var(--schrift);
	padding: .75rem 1.5rem;
	color: var(--akzent-text);
	background: var(--akzent);
	border: none;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
}
.knopf:hover { filter: brightness(1.1); }

.fehler {
	border-left: 3px solid var(--stufe-hoch);
	background: var(--flaeche);
	padding: var(--a3) var(--a4);
	margin-bottom: var(--a4);
	color: var(--text);
}

.erklaerung {
	display: grid;
	gap: var(--a5);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin-top: var(--a6);
	padding-top: var(--a5);
	border-top: 1px solid var(--rahmen);
}
.erklaerung h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-leise); }
.erklaerung ul { margin: 0; padding-left: 1.1em; }
.erklaerung li { margin-bottom: var(--a1); }

/* ------------------------------------------------------------ Notenblock */

.note {
	display: flex;
	align-items: center;
	gap: var(--a5);
	padding: var(--a5);
	background: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
	margin-bottom: var(--a5);
}

.note__feld {
	flex: none;
	width: 5.5rem; height: 5.5rem;
	display: grid; place-items: center;
	font: 700 3.25rem/1 var(--schrift);
	color: #fff;
	background: var(--note-farbe, var(--stufe-hinweis));
	border-radius: var(--radius);
}
.note--a { --note-farbe: var(--note-a); }
.note--b { --note-farbe: var(--note-b); }
.note--c { --note-farbe: var(--note-c); }
.note--d { --note-farbe: var(--note-d); }
.note--e { --note-farbe: var(--note-e); }
.note--f { --note-farbe: var(--note-f); }

/* Nachpruefung (Wichtig 2): "ein ausgefallener Test darf die Note nie
 * verbessern" (Abschnitt 5) gilt auch fuer die Optik -- eine vorlaeufige
 * Note darf sich nicht wie ein sauberes Ergebnis lesen. Muss NACH
 * .note--a bis .note--f stehen: gleiche Spezifitaet (je eine Klasse), bei
 * gleicher Spezifitaet entscheidet die Reihenfolge im Stylesheet, welche
 * Regel die Custom Property zuletzt setzt. */
.note--vorlaeufig { --note-farbe: var(--stufe-hinweis); }

.note__domain { font: 700 1.35rem var(--schrift-mono); word-break: break-all; margin-bottom: var(--a1); }
.note__eingabe {
	font-size: .85rem;
	color: var(--text-leise);
	margin: 0 0 var(--a2);
}
.note__satz   { font-size: 1.05rem; margin: 0; }
.note__zusatz {
	margin: var(--a2) 0 0;
	font-size: .9rem;
	color: var(--text-leise);
}
.note__vorlaeufig {
	display: inline-block;
	font: 600 .75rem var(--schrift);
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--stufe-hoch);
	border: 1px solid currentColor;
	border-radius: var(--radius);
	padding: 0 var(--a2);
	margin-top: var(--a2);
}

/* ---------------------------------------------------------- Notenlogik */

/* W4 der Gesamtpruefung: Abschnitt 5 der Spezifikation verlangt, dass die
 * Notenlogik im Report offengelegt wird, sonst wird sie zum Streitpunkt mit
 * dem IT-Dienstleister des Kunden. Statisch (<details>/<summary>), kein
 * JavaScript -- und die CSP erlaubt ohnehin weder style= noch <style>. */

.notenlogik {
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
	padding: var(--a3) var(--a4);
	margin-bottom: var(--a5);
	background: var(--flaeche);
	font-size: .9rem;
	color: var(--text-leise);
}
.notenlogik[open] { padding-bottom: var(--a4); }

.notenlogik summary {
	font: 600 .9rem var(--schrift);
	color: var(--text);
	cursor: pointer;
	list-style: none;
}
.notenlogik summary::-webkit-details-marker { display: none; }
.notenlogik summary::before {
	content: "▸";
	display: inline-block;
	margin-right: var(--a2);
	color: var(--text-leise);
}
.notenlogik[open] summary::before { content: "▾"; }

.notenlogik__tabelle {
	width: 100%;
	border-collapse: collapse;
	margin: var(--a4) 0;
	font-size: .85rem;
}
.notenlogik__tabelle th,
.notenlogik__tabelle td {
	text-align: left;
	padding: var(--a1) var(--a3) var(--a1) 0;
	border-bottom: 1px solid var(--rahmen);
}
.notenlogik__tabelle th { color: var(--text-leise); font-weight: 600; }
.notenlogik__tabelle td:first-child { font: 700 .95rem var(--schrift-mono); color: var(--text); width: 2.5rem; }

.notenlogik p { margin: 0 0 var(--a2); }
.notenlogik p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Modulstreifen */

.module {
	display: grid;
	gap: var(--a2);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-bottom: var(--a6);
	padding: 0; list-style: none;
}

/* Modulkarten behalten ihren farbigen linken Rand -- der traegt die
 * Bedeutung (welcher Status vorliegt) und ist vom Umbau ausdruecklich
 * ausgenommen, genau wie die Stufen- und Notenfarben oben. */
.modul {
	border: 1px solid var(--rahmen);
	border-left: 3px solid var(--modul-farbe, var(--text-leise));
	border-radius: var(--radius);
	padding: var(--a3);
	background: var(--flaeche);
}
/* Jeder Wert von checks.base.ModuleStatus braucht hier eine eigene Regel;
   tests/test_vorlagen_lecken_nicht.py haelt die Liste dagegen. Deshalb ist
   auch "erfolgreich" ausdrücklich benannt, obwohl es die Rückfallfarbe der
   Regel darüber bekäme: Eine Rückfallfarbe entscheidet lautlos, wie ein
   unbekannter Status aussieht, und sie sah bis hierher aus wie ein
   bestandener (--stufe-niedrig). Ein nicht durchgeführter Test darf nie wie
   ein bestandener aussehen — das gilt auch für seine Farbe. Der Rückfall
   ist deshalb jetzt die neutrale, leise Farbe; sichtbar ändert sich nichts,
   weil ab sofort jeder Status seine eigene Regel hat. */
.modul--erfolgreich     { --modul-farbe: var(--stufe-niedrig); }
.modul--laeuft,
.modul--nicht_anwendbar { --modul-farbe: var(--text-leise); }
.modul--nicht_pruefbar,
.modul--teilweise       { --modul-farbe: var(--stufe-hoch); }

.modul__name   { font: 600 .95rem var(--schrift); }
.modul__status { font-size: .8rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; }
.modul__grund  { font-size: .85rem; margin: var(--a1) 0 0; color: var(--text); }

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

.bereich { margin-bottom: var(--a6); }
.bereich__titel {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
	color: var(--text-leise);
	border-bottom: 1px solid var(--rahmen);
	padding-bottom: var(--a2);
	margin-bottom: var(--a4);
}

/* Befundkarten behalten ihren farbigen linken Rand ebenfalls -- siehe
 * Begruendung bei .modul oben. */
.befund {
	border: 1px solid var(--rahmen);
	border-left: 3px solid var(--stufe-farbe, var(--stufe-hinweis));
	border-radius: var(--radius);
	padding: var(--a4);
	margin-bottom: var(--a3);
	background: var(--flaeche);
}
.befund--kritisch { --stufe-farbe: var(--stufe-kritisch); }
.befund--hoch     { --stufe-farbe: var(--stufe-hoch); }
.befund--mittel   { --stufe-farbe: var(--stufe-mittel); }
.befund--niedrig  { --stufe-farbe: var(--stufe-niedrig); }
.befund--hinweis  { --stufe-farbe: var(--stufe-hinweis); }

.befund__kopf { display: flex; align-items: baseline; gap: var(--a3); margin-bottom: var(--a2); }

/* Die Stufe steht als WORT da. Farbe verstaerkt nur — rund acht Prozent der
 * Maenner unterscheiden Rot und Gruen schlecht, und dieser Report landet bei
 * Geschaeftsfuehrern. */
.stufe {
	flex: none;
	font: 700 .72rem var(--schrift);
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--stufe-farbe);
	border: 1px solid currentColor;
	border-radius: var(--radius);
	padding: .1em .5em;
}

.befund__titel { font-weight: 650; flex: 1; }

.befund__text { margin: 0 0 var(--a3); color: var(--text); }

/* Belegbloecke (das, was report.js als Beleg rendert) bekommen die
 * Code-Behandlung der Vorlage, vermessen: Monospace 14px auf #44474e,
 * Radius 8px, 4px Innenabstand -- siehe --code-flaeche oben. */
.belege {
	font-family: var(--schrift-mono);
	font-size: 14px;
	background: var(--code-flaeche);
	border-radius: 8px;
	padding: 4px;
	margin: 0 0 var(--a3);
	overflow-x: auto;          /* bricht auf dem Telefon zuerst */
	white-space: pre;
}

.behebung {
	margin: 0;
	padding-left: var(--a4);
	border-left: 2px solid var(--rahmen);
	color: var(--text-leise);
}
.behebung strong { color: var(--text); font-weight: 600; }

.kopieren {
	font: 500 .8rem var(--schrift);
	color: var(--text-leise);
	background: none;
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
	padding: .15em .6em;
	cursor: pointer;
	flex: none;
}
.kopieren:hover { color: var(--text); border-color: var(--text-leise); }

.hinweis-leer {
	border: 1px dashed var(--stufe-hoch);
	border-radius: var(--radius);
	padding: var(--a4);
	color: var(--text);
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 40rem) {
	.leiste { padding: var(--a3); }
	.inhalt { padding: var(--a5) var(--a3); }
	.pruefform { flex-direction: column; }
	.note { flex-direction: column; align-items: flex-start; gap: var(--a3); }
	.note__feld { width: 4rem; height: 4rem; font-size: 2.25rem; }
	.befund__kopf { flex-wrap: wrap; }
}

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

@media print {
	/* Ein Ausdruck, dessen Seite drei nicht mehr verraet, worum es geht,
	 * ist im Besprechungsraum wertlos. */
	:root {
		--grund: #fff; --flaeche: #fff; --flaeche-tief: #fff;
		--rahmen: #999; --text: #000; --text-leise: #333;
	}
	body { font-size: 11pt; }
	.leiste, .kopieren, .note__zusatz { display: none; }
	.inhalt { padding: 0; max-width: none; }

	.note { border: 2px solid #000; page-break-inside: avoid; }
	.note__feld { background: none !important; color: #000; border: 2px solid #000; }

	.befund, .modul { page-break-inside: avoid; background: none; }
	.bereich { page-break-before: auto; }
	.belege { white-space: pre-wrap; overflow: visible; background: none; border: 1px solid #999; }

	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #333; }

	@page { margin: 2cm; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Rechtstexte ---------------------------------------------------------
 * Schmalere Spalte als der Report: Fliesstext liest sich bei etwa 70 Zeichen
 * je Zeile am besten, Befundlisten vertragen mehr. */
.rechtstext {
	max-width: 44rem;
	margin: 0 auto;
}
.rechtstext h1 {
	margin-bottom: var(--a5);
}
.rechtstext h2 {
	margin-top: var(--a6);
	padding-bottom: var(--a2);
	border-bottom: 1px solid var(--rahmen);
}
.rechtstext h3 {
	margin-top: var(--a5);
	color: var(--text-leise);
}
.rechtstext ul {
	margin: 0 0 var(--a4);
	padding-left: var(--a5);
}
.rechtstext li {
	margin-bottom: var(--a2);
}
.rechtstext__vorspann {
	padding: var(--a4);
	background: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
}
.rechtstext__tabelle {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--a5);
}
.rechtstext__tabelle th,
.rechtstext__tabelle td {
	text-align: left;
	padding: var(--a2) var(--a3);
	border-bottom: 1px solid var(--rahmen);
}
.rechtstext__tabelle th {
	color: var(--text-leise);
	font-weight: 500;
	font-size: .85rem;
}
.rechtstext__stand {
	margin-top: var(--a6);
	color: var(--text-leise);
	font-size: .85rem;
}