/* =============================================================================
   Agenten-Demo — Gestaltung
   -----------------------------------------------------------------------------
   Uebernimmt die Gestaltungssprache der neuland-Demo-Reihe (Referenz:
   Uni Bonn / Uniklinikum Erlangen) und bildet sie auf die Farbwelt der
   Deutschen Bahn ab. Maße, Abstaende, Schriftgroessen, Rahmenstaerken,
   Radien und die gesperrten Grossbuchstaben-Labels folgen der Referenz.

   Harte Auflagen dieser Datei:
   * KEINE externen Requests: kein @import, kein @font-face, keine Google
     Fonts, keine Bilder, keine URLs. Die Seite laeuft unter einer strengen
     Content-Security-Policy (default-src 'self').
   * KEIN Dunkelmodus. Die Referenz ist ein reines Hell-Design; Hintergrund
     und Textfarbe werden explizit gesetzt, damit die Systemeinstellung
     nichts umfaerbt.
   * Alle Symbole sind Text-Zeichen (§, ↗, ✓, ×, !) — keine Grafikdateien.

   Aufbau
     1  Token: Farben, Maße, Schrift
     2  Kompatibilitaets-Token (--db-*) fuer die bestehenden Fachmodule
     3  Reset und Grundtypografie
     4  Fokus, Sprungmarke, Screenreader
     5  Layout-Geruest
     6  Seitenleiste
     7  Hauptbereich: Seitenkopf, Inhalt, Fusszeile, Kopfzeile
     8  Bausteine: Karte, Kennzahl, Raster, Badge, Hinweis, Tabelle,
        Rechenweg, Quelle, KI-Kennzeichen, Button, Feld, Fortschritt, Tabs
     9  Hilfsklassen
    10  Feinschliff der Modul-eigenen Klassen (.rw-*)
    11  Schmale Fenster
    12  Druck
   ========================================================================== */

/* =============================================================================
   1  TOKEN
   -----------------------------------------------------------------------------
   Farbabbildung: die Referenz nutzt Uni-Blau als Marke und Orange als
   Akzent. Hier ist DB Rot beides — Marke und Akzent. Rot steht deshalb nur
   auf Flaechen, Linien und Markern; als Textfarbe wird ausschliesslich
   --marke-text (DB Rot 700) verwendet.

   Geprüfte Kontraste (WCAG 2.1, Verhaeltnis nach WCAG-Formel):
     --text     #3C414B auf --card  #ffffff .......... 10,24:1  AA/AAA
     --text     #3C414B auf --paper #f5f7f9 ...........  9,54:1  AA/AAA
     --text     #3C414B auf --sky   #fdeced ...........  8,98:1  AA/AAA
     --dunkel   #282D37 auf --card  #ffffff .......... 13,81:1  AA/AAA
     --dunkel   #282D37 auf --sky   #fdeced .......... 12,10:1  AA/AAA
     --muted    #646973 auf --card  #ffffff ...........  5,51:1  AA
     --muted    #646973 auf --paper #f5f7f9 ...........  5,13:1  AA
     --muted    #646973 auf --sky   #fdeced ...........  4,83:1  AA
     --muted    #646973 auf --grund #f0f3f5 ...........  4,95:1  AA
     --marke-text #9B000E auf --card ..................  8,75:1  AA/AAA
     --marke-text #9B000E auf --paper .................  8,15:1  AA/AAA
     --marke-text #9B000E auf --sky ...................  7,67:1  AA/AAA
     #ffffff auf --marke   #EC0016 ....................  4,59:1  AA (Text)
     #ffffff auf --marke-hover #C50014 ................  6,21:1  AA
     #ffffff auf --dunkel  #282D37 ................... 13,81:1  AA/AAA
     --good     #2A7230 auf --card ....................  5,92:1  AA
     --good     #2A7230 auf Erfolgsflaeche #eaf5eb ....  5,29:1  AA
     --warn     #955F20 auf --card ....................  5,34:1  AA
     --warn     #955F20 auf Warnflaeche  #fdf4e3 ......  4,89:1  AA
     --bad      #C50014 auf --card ....................  6,21:1  AA
     --bad      #C50014 auf --sky   #fdeced ...........  5,44:1  AA
     --petrol   #00797C auf --card ....................  5,22:1  AA
     --petrol   #00797C auf Infoflaeche #e9f4f5 .......  4,65:1  AA
     --muted    #646973 auf --zebra #f7f9fa ...........  5,22:1  AA
     --muted    #646973 auf --kachel #fafbfc ..........  5,32:1  AA
     --marke-text #9B000E auf --zebra (Tabellenkopf) ..  8,29:1  AA/AAA
     #ffffff auf --good  #2A7230 ......................  5,92:1  AA
     #ffffff auf --warn  #955F20 ......................  5,34:1  AA
     #ffffff auf --bad   #C50014 ......................  6,21:1  AA
     #ffffff auf --petrol #00797C .....................  5,22:1  AA
     #ffffff auf --muted #646973 ......................  5,51:1  AA
       (die vier Zeilen darueber: Symbolkreise der Hinweis-Titel)
     Nichttext (WCAG 1.4.11, mind. 3:1):
     --marke    #EC0016 auf --card ....................  4,59:1  OK
     --marke    #EC0016 auf --paper ...................  4,27:1  OK
     --marke    #EC0016 auf Balkenspur #e6eaee ........  3,79:1  OK
     --linie-stark #878c96 auf --card .................  3,38:1  OK
     Fokusring  #282D37 auf --paper .................. 12,86:1  OK
     --hair #dfe3e8 ist eine rein dekorative Haarlinie (1,29:1) und traegt
     nie allein eine Information.
   ========================================================================== */
:root {
	/* --- Marke und Akzent ------------------------------------------------- */
	--marke: #ec0016; /* DB Rot 500 — Flaechen, Marker, Buttons */
	--marke-hover: #c50014; /* DB Rot 600 */
	--marke-aktiv: #9b000e; /* DB Rot 700 */
	--marke-text: #9b000e; /* DB Rot 700 — Rot als Textfarbe */

	/* --- Text und Flaechen ------------------------------------------------ */
	--dunkel: #282d37; /* DB Cool Gray 700 — Ueberschriften */
	--text: #3c414b; /* DB Cool Gray 600 — Fliesstext */
	--muted: #646973; /* DB Cool Gray 500 — Sekundaertext */
	--paper: #f5f7f9; /* Seitenhintergrund */
	--card: #ffffff; /* Karten, Leiste, Kopf */
	--grund: #f0f3f5; /* versenkte Flaechen: Formeln, Kopfzeilen */
	--zebra: #f7f9fa; /* jede zweite Tabellenzeile */
	--kachel: #fafbfc; /* Kennzahl-Kacheln */
	--hair: #dfe3e8; /* Haarlinie */
	--linie-stark: #878c96; /* Bedienelement-Rahmen, 3,38:1 */
	--sky: #fdeced; /* zarte Rotflaeche: aktiv, hover, Auswahl */

	/* --- Signalfarben ----------------------------------------------------- */
	--good: #2a7230; /* DB Gruen 700 */
	--warn: #955f20; /* DB Orange 800 */
	--bad: #c50014; /* DB Rot 600 */
	--petrol: #00797c; /* DB Turquoise 700 — Zitate, Quellen, Info */

	/* --- Signalflaechen --------------------------------------------------- */
	--flaeche-erfolg: #eaf5eb;
	--linie-erfolg: #cde3cf;
	--flaeche-warnung: #fdf4e3;
	--linie-warnung: #ecdcbb;
	--flaeche-fehler: #fdeced;
	--linie-fehler: #f7ced2;
	--flaeche-info: #e9f4f5;
	--linie-info: #cbe4e5;

	/* --- Maße (aus der Referenz uebernommen) ------------------------------ */
	--leiste: 308px; /* Breite der Seitenleiste */
	--lese: 1040px; /* lesbare Maximalbreite im Inhalt */
	--rand: 34px; /* Innenabstand Kopf/Inhalt/Fuss */
	--radius: 3px;
	--radius-klein: 2px;
	--schatten: 0 1px 3px rgba(40, 45, 55, 0.05);

	/* --- Schrift: reiner System-Stack, humanistische Grotesk -------------- */
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
		"Noto Sans", "Liberation Sans", Arial, sans-serif;
	--head: var(--sans);
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", "Courier New", monospace;
}

/* =============================================================================
   2  KOMPATIBILITAETS-TOKEN
   -----------------------------------------------------------------------------
   Die sechs Fachmodule sind fertig gebaut und werden nicht angefasst. Sie
   greifen in Inline-Styles und in einem zur Laufzeit eingefuegten <style>
   (js/agenten/regelwerk.js) auf --db-*-Token zu. Genau die hier benoetigten
   Namen werden deshalb weitergefuehrt und auf das neue System gemappt.
   Alles andere aus dem alten Token-Satz entfaellt.
   ========================================================================== */
:root {
	/* Abstaende */
	--db-abstand-2xs: 0.25rem;
	--db-abstand-xs: 0.5rem;
	--db-abstand-sm: 0.75rem;
	--db-abstand-md: 1rem;
	--db-abstand-lg: 1.5rem;

	/* Radien und Rahmenstaerken */
	--db-radius-sm: 3px;
	--db-rahmen-3xs: 1px;
	--db-rahmen-2xs: 2px;
	--db-rahmen-xs: 3px;

	/* Flaechen und Linien */
	--db-flaeche-erhoben: var(--card);
	--db-flaeche-versenkt: var(--grund);
	--db-linie: var(--hair);
	--db-linie-stark: var(--linie-stark);

	/* Text */
	--db-text: var(--text);
	--db-text-schwach: var(--muted);
	--db-text-sm: 12.5px;
	--db-zeile-normal: 1.6;
	--db-gewicht-semibold: 600;
	--db-gewicht-bold: 700;
	--db-headline-5: clamp(1rem, 0.85rem + 0.7vw, 1.35rem);

	/* Marke und Signale */
	--db-akzent: var(--marke);
	--db-akzent-flaeche-zart: var(--sky);
	--db-warnung: var(--warn);
	--db-info: var(--petrol);
	--db-red-500: var(--marke);
	--db-cool-gray-300: #afb4bb;
	/* Ausgewaehlte Zeilen sollen ueberall gleich aussehen: der frueher blaue
	   Auswahlton wird auf die zarte Rotflaeche gelegt. */
	--db-blue-100: var(--sky);
}

/* =============================================================================
   3  RESET UND GRUNDTYPOGRAFIE
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	color-scheme: only light; /* keine Umfaerbung durch die Systemeinstellung */
}

body {
	background: var(--paper);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.62;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* es scrollt der Inhaltsbereich, nicht die Seite */
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--head);
	color: var(--dunkel);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 22px;
}
h2 {
	font-size: 17px;
	margin: 18px 0 8px;
}
h3 {
	font-size: 15px;
	margin: 16px 0 7px;
}
h4,
h5,
h6 {
	font-size: 13.5px;
	margin: 14px 0 6px;
}
h2:first-child,
h3:first-child,
h4:first-child {
	margin-top: 0;
}

p {
	margin: 9px 0;
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}

strong,
b {
	color: var(--dunkel);
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

ul,
ol {
	margin: 8px 0 8px 19px;
}
li {
	margin: 5px 0;
}

hr {
	border: none;
	border-top: 1px solid var(--hair);
	margin: 16px 0;
}

a {
	color: var(--marke-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
a:hover {
	text-decoration-thickness: 2px;
}
a:visited {
	color: var(--marke-aktiv);
}

code,
kbd,
samp,
pre {
	font-family: var(--mono);
	font-size: 0.92em;
}

code {
	background: var(--grund);
	border-radius: var(--radius-klein);
	padding: 1px 5px;
	color: var(--dunkel);
}

kbd {
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: var(--radius-klein);
	padding: 1px 7px;
	font-family: var(--sans);
	font-size: 11.5px;
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

svg {
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* =============================================================================
   4  FOKUS, SPRUNGMARKE, SCREENREADER
   -----------------------------------------------------------------------------
   Deutlich sichtbarer Ring in Kaltgrau 700 mit weissem Gegenring — bleibt
   auch auf DB-roten Flaechen sichtbar (12,86:1 auf --paper).
   ========================================================================== */
:focus-visible {
	outline: 3px solid var(--dunkel);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
	border-radius: var(--radius-klein);
}

.btn--primaer:focus-visible,
.btn--gefahr:focus-visible {
	box-shadow: 0 0 0 5px #ffffff;
}

.sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 50;
	background: var(--dunkel);
	color: #ffffff;
	padding: 11px 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 var(--radius) 0;
}
.sprungmarke:focus {
	left: 0;
}
.sprungmarke:visited {
	color: #ffffff;
}

.nur-screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   5  LAYOUT-GERUEST
   ========================================================================== */
.layout {
	display: flex;
	flex: 1;
	min-height: 0;
}

/* Vollflaechige Rahmenseite, falls ein Modul sie als Wurzel nutzt. */
.seite {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	gap: 0;
}

/* =============================================================================
   6  SEITENLEISTE
   ========================================================================== */
nav.seitenleiste {
	width: var(--leiste);
	flex-shrink: 0;
	background: var(--card);
	border-right: 1px solid var(--hair);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

/* --- Markenblock ---------------------------------------------------------- */
.marke {
	padding: 24px 22px 18px;
	border-bottom: 4px solid var(--marke); /* kraeftige Akzentlinie */
	flex-shrink: 0;
}

.marke__zeile {
	display: flex;
	align-items: center;
	gap: 10px;
}

.marke__zeichen {
	width: 34px;
	height: 34px;
	flex: none;
	display: block;
}

.marke__name {
	font-family: var(--head);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--marke-text);
}

.marke__unterzeile {
	font-family: var(--head);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--dunkel);
	margin-top: 2px;
}

.marke__kontext {
	margin-top: 12px;
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--marke-text);
	line-height: 1.5;
}

/* --- Stationsliste -------------------------------------------------------- */
.navliste {
	padding: 8px 12px 10px;
}

.navgruppe {
	font-family: var(--head);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 11px 10px 4px;
	margin: 0;
}
.navgruppe:first-child {
	padding-top: 2px;
}

.station {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-left: 3px solid transparent; /* linker Rahmen = aktiv-Marker */
	padding: 7px 10px 7px 38px; /* Platz fuer die Ziffernspalte wie in der Referenz */
	margin-bottom: 1px;
	color: var(--text);
	cursor: pointer;
	font-family: var(--head);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 0 var(--radius) var(--radius) 0;
	text-decoration: none;
}
.station:hover {
	background: var(--sky);
	color: var(--marke-text);
	text-decoration: none;
}
.station:visited {
	color: var(--text);
}
.station--aktiv,
.station[aria-current="page"] {
	background: var(--sky);
	border-left-color: var(--marke);
	color: var(--marke-text);
}

.station__zusatz {
	display: block;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 400;
	line-height: 1.35;
	margin-top: 1px;
}
.station--aktiv .station__zusatz,
.station:hover .station__zusatz {
	color: var(--muted);
}

/* --- Fuss der Leiste ------------------------------------------------------ */
/* Abweichung von der Referenz: dort stehen zwei Woerter in Versalien, hier
   drei ganze Saetze. Versalsatz waere bei 9px unlesbar — gesperrt gesetzt
   ist deshalb nur die Absenderzeile. */
.nav-fuss {
	margin-top: auto;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--hair);
	color: var(--muted);
	font-size: 9.5px;
	line-height: 1.65;
	flex-shrink: 0;
}
.nav-fuss b {
	color: var(--dunkel);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--head);
}

/* =============================================================================
   7  HAUPTBEREICH
   ========================================================================== */
.hauptbereich {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--paper);
}

/* --- Seitenkopf (Referenz: .scenehead) ------------------------------------ */
.seitenkopf {
	padding: 20px var(--rand) 18px;
	background: var(--card);
	border-bottom: 1px solid var(--hair);
	flex-shrink: 0;
}

.seitenkopf__inhalt {
	max-width: var(--lese);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.seitenkopf__over {
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--marke-text);
	margin-bottom: 7px;
}

.seitenkopf__titel {
	font-family: var(--head);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--dunkel);
	margin: 0;
}

.seitenkopf__text,
.seitenkopf .text-klein {
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.55;
	max-width: 700px;
	margin: 7px 0 0;
}

/* --- Inhaltsbereich (Referenz: .chat) ------------------------------------- */
.inhalt {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 30px var(--rand) 50px;
	scroll-behavior: smooth;
	outline: none;
}

/* Lesbare Maximalbreite, zentriert — wie die Bubble-Spalte der Referenz. */
.inhalt > * {
	max-width: var(--lese);
	margin-left: auto;
	margin-right: auto;
}

.inhalt > section > * + * {
	margin-top: 16px;
}

/* --- Fusszeile ------------------------------------------------------------ */
.fusszeile {
	flex-shrink: 0;
	background: var(--card);
	border-top: 1px solid var(--hair);
	padding: 10px var(--rand) 12px;
	color: var(--muted);
	font-size: 10.5px;
	line-height: 1.6;
}

.fusszeile__inhalt {
	max-width: var(--lese);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.fusszeile p {
	margin: 0;
}
.fusszeile strong {
	color: var(--dunkel);
}

/* --- Kopfzeile (Balkenvariante, von den Modulen optional nutzbar) --------- */
.kopfzeile {
	background: var(--marke);
	color: #ffffff;
	border-bottom: 3px solid var(--marke-aktiv);
	flex-shrink: 0;
}

.kopfzeile__inhalt {
	max-width: var(--lese);
	margin: 0 auto;
	padding: 12px var(--rand);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.kopfzeile__titel {
	font-family: var(--head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: inherit;
	margin: 0;
}

.kopfzeile a,
.kopfzeile .text-schwach {
	color: inherit;
}

.kopfzeile :focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 5px var(--marke-aktiv);
}

.kopfzeile--neutral {
	background: var(--dunkel);
	border-bottom-color: var(--marke);
}

/* =============================================================================
   8  BAUSTEINE
   ========================================================================== */

/* --- .karte (Referenz: .bubble) ------------------------------------------- */
.karte {
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	min-width: 0;
}

.karte__kopf {
	padding: 14px 20px 0;
}

.karte__titel {
	font-family: var(--head);
	font-size: 15px;
	font-weight: 700;
	color: var(--dunkel);
	letter-spacing: -0.005em;
	line-height: 1.35;
	margin: 0;
}

.karte__untertitel {
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.45;
	margin: 3px 0 0;
}

.karte__inhalt {
	padding: 14px 20px 16px;
	font-size: 14px;
	line-height: 1.62;
	min-width: 0;
}
.karte__kopf + .karte__inhalt {
	padding-top: 12px;
}
.karte__inhalt > p {
	max-width: 74ch;
}

.karte__fuss {
	padding: 10px 20px 12px;
	border-top: 1px solid var(--hair);
	background: var(--zebra);
	border-radius: 0 0 var(--radius) var(--radius);
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.55;
}

/* Farbige Kanten wie .msg.agent .bubble der Referenz. */
.karte--akzent {
	border-left: 3px solid var(--marke);
}
.karte--erfolg {
	border-left: 3px solid var(--good);
}
.karte--warnung {
	border-left: 3px solid var(--warn);
}
.karte--fehler {
	border-left: 3px solid var(--bad);
}

/* --- .kennzahl (Referenz: .kpi) ------------------------------------------- */
.kennzahl {
	display: flex;
	flex-direction: column;
	background: var(--kachel);
	border: 1px solid var(--hair);
	border-top: 3px solid var(--marke);
	border-radius: var(--radius-klein);
	padding: 11px 13px 12px;
	min-width: 0;
}

.kennzahl--akzent {
	background: var(--sky);
	border-color: var(--linie-fehler);
	border-top-color: var(--marke);
}

.kennzahl__label {
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}

.kennzahl__wert {
	font-size: 23px;
	font-weight: 300;
	color: var(--dunkel);
	margin-top: 6px;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.kennzahl__einheit {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--muted);
	margin-left: 2px;
	white-space: nowrap;
}

.kennzahl__zusatz {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.45;
	margin-top: 6px;
}

.kennzahl__delta {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	margin-top: 5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
/* Richtung nie nur ueber Farbe (WCAG 1.4.1) — Pfeil als Textzeichen. */
.kennzahl__delta--auf {
	color: var(--good);
}
.kennzahl__delta--auf::before {
	content: "\2191\00A0";
}
.kennzahl__delta--ab {
	color: var(--bad);
}
.kennzahl__delta--ab::before {
	content: "\2193\00A0";
}

.kennzahl .quellen-liste {
	margin-top: auto;
	padding-top: 9px;
}

/* --- .raster / .stapel / .zeile (Referenz: .kpirow) ----------------------- */
.raster {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(var(--spalten, 1), minmax(0, 1fr));
	margin: 13px 0;
}

.raster--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.stapel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

/* --- .badge (Referenz: .tag) ---------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--muted);
	background: var(--grund);
	color: var(--muted);
	padding: 1px 8px;
	font-family: var(--head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
	border-radius: var(--radius-klein);
	white-space: nowrap;
	vertical-align: baseline;
}

.badge--neutral {
	border-color: var(--muted);
	background: var(--grund);
	color: var(--muted);
}
.badge--erfolg {
	border-color: var(--good);
	background: var(--flaeche-erfolg);
	color: var(--good);
}
.badge--warnung {
	border-color: var(--warn);
	background: var(--flaeche-warnung);
	color: var(--warn);
}
.badge--fehler {
	border-color: var(--bad);
	background: var(--flaeche-fehler);
	color: var(--bad);
}
.badge--info {
	border-color: var(--petrol);
	background: var(--flaeche-info);
	color: var(--petrol);
}

.badge--klein {
	font-size: 9px;
	padding: 0 6px;
	letter-spacing: 0.08em;
}

.badge--rund {
	border-radius: 500rem;
	padding-left: 10px;
	padding-right: 10px;
}

/* Punkt als zweiter, nicht farblicher Zustandstraeger. */
.badge--punkt::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* --- .hinweis (Referenz: .msg.sys .bubble bzw. .memo) --------------------- */
.hinweis {
	--ton: var(--muted);
	background: var(--grund);
	border: 1px solid var(--hair);
	border-left: 3px solid var(--ton);
	border-radius: var(--radius-klein);
	padding: 13px 17px;
	margin: 13px 0;
	font-size: 12.5px;
	line-height: 1.62;
	color: var(--text);
}
.hinweis > p {
	max-width: 74ch;
}

.hinweis__titel {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ton);
	line-height: 1.6;
	margin: 0 0 8px;
}

/* Symbolkreis: Zeichen in Weiss auf dem Ton der Meldung (5,2–6,2:1). */
.hinweis__titel::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--ton);
	color: #ffffff;
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hinweis--info {
	--ton: var(--petrol);
	background: var(--flaeche-info);
	border-color: var(--linie-info);
	border-left-color: var(--petrol);
}
.hinweis--info .hinweis__titel::before {
	content: "i";
}

.hinweis--erfolg {
	--ton: var(--good);
	background: var(--flaeche-erfolg);
	border-color: var(--linie-erfolg);
	border-left-color: var(--good);
}
.hinweis--erfolg .hinweis__titel::before {
	content: "\2713"; /* Haken */
}

/* Warnung = die Memo-Anmutung der Referenz: warme Flaeche, kraeftige Kante. */
.hinweis--warnung {
	--ton: var(--warn);
	background: var(--flaeche-warnung);
	border-color: var(--linie-warnung);
	border-left-color: var(--warn);
}
.hinweis--warnung .hinweis__titel::before {
	content: "!";
}

.hinweis--fehler {
	--ton: var(--bad);
	background: var(--flaeche-fehler);
	border-color: var(--linie-fehler);
	border-left-color: var(--bad);
}
.hinweis--fehler .hinweis__titel::before {
	content: "\00D7"; /* Kreuz */
}

.hinweis a {
	color: var(--ton);
}
.hinweis a:visited {
	color: var(--ton);
}

/* --- .tabelle (Referenz: .bubble table / table.rr-m) ---------------------- */
.tabelle-wrap {
	overflow-x: auto; /* breite Tabellen scrollen hier, nie die Seite */
	background: var(--card);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	margin: 13px 0;
	max-width: 100%;
}

.tabelle {
	border-collapse: collapse;
	width: 100%;
	font-size: 13px;
	background: var(--card);
}

.tabelle caption {
	caption-side: top;
	text-align: left;
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 10px 11px 6px;
}

.tabelle th,
.tabelle td {
	border-bottom: 1px solid var(--hair);
	padding: 7px 11px;
	text-align: left;
	vertical-align: top;
}

/* Gesperrte Kopfzeile in der Marke — wie .bubble th der Referenz. */
.tabelle thead th {
	font-family: var(--head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--marke-text);
	background: var(--zebra);
	vertical-align: bottom;
	line-height: 1.35;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.tabelle tbody th {
	font-weight: 600;
	color: var(--dunkel);
}

.tabelle tbody tr:last-child > * {
	border-bottom: none;
}

.tabelle tbody tr:hover {
	background: var(--sky);
}

.tabelle--zebra tbody tr:nth-child(even) {
	background: var(--zebra);
}
.tabelle--zebra tbody tr:nth-child(even):hover {
	background: var(--sky);
}

.tabelle--kompakt th,
.tabelle--kompakt td {
	padding: 4px 8px;
	font-size: 12px;
}

/* Zahlenspalten rechtsbuendig mit Ziffern gleicher Breite. */
.tabelle .zahl,
.tabelle [data-typ="zahl"] {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Die Module kennzeichnen Zahlen als <span class="text-zahl"> in der Zelle.
   Der Block-Umbruch richtet sie auch ohne :has-Unterstuetzung rechts aus;
   die :has-Regel darunter zieht die ganze Zelle nach (eigener Block, damit
   ein Browser ohne :has die Regel oben nicht mitverwirft). */
.tabelle td > .text-zahl,
.tabelle th > .text-zahl {
	display: block;
	text-align: right;
}

.tabelle td:has(> .text-zahl),
.tabelle th:has(> .text-zahl) {
	text-align: right;
	white-space: nowrap;
}

.tabelle tfoot {
	font-weight: 700;
}
.tabelle tfoot th,
.tabelle tfoot td {
	border-top: 2px solid var(--linie-stark);
	background: var(--grund);
	color: var(--dunkel);
}

/* Ausgewaehlte Zeile (die Module setzen aria-selected). */
.tabelle tbody tr[aria-selected="true"] {
	background: var(--sky);
}

/* --- .rechenweg (Referenz: .memo, aber nummeriert) ------------------------ */
.rechenweg {
	background: var(--card);
	border: 1px solid var(--hair);
	border-left: 3px solid var(--marke);
	border-radius: var(--radius-klein);
	padding: 14px 18px;
	margin: 13px 0;
	counter-reset: rechenschritt;
	font-size: 13px;
}

.rechenweg__titel {
	font-family: var(--head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 10px;
}

.rechenweg__schritt {
	position: relative;
	counter-increment: rechenschritt;
	padding: 11px 0 11px 38px;
	border-bottom: 1px solid var(--hair);
}
.rechenweg__schritt:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Schrittnummer als Kreis in Kaltgrau — nicht in DB Rot, damit die Marke
   nicht als Bedeutungstraeger missverstanden wird. */
.rechenweg__schritt::before {
	content: counter(rechenschritt);
	position: absolute;
	left: 0;
	top: 11px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--grund);
	border: 1px solid var(--hair);
	color: var(--dunkel);
	font-family: var(--head);
	font-size: 10.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rechenweg__schritt > strong {
	display: block;
	font-family: var(--head);
	font-size: 13px;
	color: var(--dunkel);
	line-height: 1.4;
}

.rechenweg__formel {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	background: var(--grund);
	border-radius: var(--radius-klein);
	padding: 7px 10px;
	margin: 7px 0 0;
	color: var(--dunkel);
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.rechenweg__zwischenergebnis {
	margin: 7px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

.rechenweg__zwischenergebnis-wert {
	color: var(--dunkel);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rechenweg__erlaeuterung {
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 74ch;
}

.rechenweg__ergebnis {
	margin: 13px 0 0;
	padding: 11px 14px;
	background: var(--sky);
	border-left: 3px solid var(--marke);
	border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
}

.rechenweg .quellen-liste {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}

/* --- .quelle / .quellen-liste (Referenz: .src, .cite, .quellen .q) -------- */
.quellen-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 11px;
	padding-top: 9px;
	border-top: 1px solid var(--hair);
}

.quelle {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	max-width: 100%;
	border: 1px solid var(--linie-info);
	border-radius: var(--radius-klein);
	background: var(--card);
	color: var(--petrol);
	padding: 1px 8px;
	font-size: 10.5px;
	line-height: 1.7;
	text-decoration: none;
}
a.quelle:hover {
	background: var(--flaeche-info);
	border-color: var(--petrol);
	text-decoration: underline;
}
.quelle:visited {
	color: var(--petrol);
}

/* Paragraphenzeichen als reines Text-Icon. */
.quelle::before {
	content: "\00A7";
	font-weight: 700;
	flex: none;
}

.quelle--dokument::before {
	content: "\1F5CE\FE0E"; /* Dokumentsymbol, Text-Praesentation */
}

.quelle--extern::after {
	content: "\2197"; /* Pfeil: oeffnet extern */
	font-size: 0.9em;
	flex: none;
}

.quelle__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.quelle .badge {
	margin-left: 3px;
}

/* --- .ki-kennzeichen ------------------------------------------------------ */
/* Dezent, aber erkennbar. Das Praefix „KI" setzt die Klasse selbst. */
.ki-kennzeichen {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--hair);
	border-radius: var(--radius-klein);
	background: var(--card);
	color: var(--muted);
	padding: 3px 9px 3px 3px;
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
}

.ki-kennzeichen::before {
	content: "KI";
	flex: none;
	background: var(--marke);
	color: #ffffff; /* 4,59:1 */
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 6px;
	border-radius: var(--radius-klein);
}

/* Blockvariante: ganze Abschnitte als maschinell erzeugt markieren. */
.ki-kennzeichen--block {
	display: flex;
	align-items: flex-start;
	width: 100%;
	background: var(--kachel);
	border-left: 3px solid var(--marke);
	padding: 11px 15px 11px 11px;
	margin: 13px 0;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.6;
	color: var(--muted);
}
.ki-kennzeichen--block::before {
	margin-top: 1px;
}

/* --- .btn (Referenz: .btn / .btn.ghost) ----------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--card);
	color: var(--marke-text);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	padding: 11px 24px;
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover {
	border-color: var(--marke);
	background: var(--sky);
	text-decoration: none;
}
.btn:visited {
	color: var(--marke-text);
}
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.32;
	cursor: default;
}

.btn--primaer {
	background: var(--marke);
	border-color: var(--marke);
	color: #ffffff; /* 4,59:1 */
}
.btn--primaer:visited {
	color: #ffffff;
}
.btn--primaer:hover {
	background: var(--marke-hover);
	border-color: var(--marke-hover);
	color: #ffffff;
}

.btn--sekundaer {
	background: transparent;
	border-color: var(--hair);
	color: var(--marke-text);
}
.btn--sekundaer:hover {
	border-color: var(--marke);
	background: var(--sky);
}

.btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--marke-text);
}
.btn--ghost:hover {
	background: var(--sky);
	border-color: transparent;
	text-decoration: underline;
}

.btn--gefahr {
	background: var(--bad);
	border-color: var(--bad);
	color: #ffffff; /* 6,21:1 */
}
.btn--gefahr:visited {
	color: #ffffff;
}
.btn--gefahr:hover {
	background: var(--marke-aktiv);
	border-color: var(--marke-aktiv);
	color: #ffffff;
}

.btn--klein {
	padding: 6px 13px;
	font-size: 10px;
	letter-spacing: 0.1em;
}

.btn--breit {
	width: 100%;
}

.btn-gruppe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

/* --- .feld ---------------------------------------------------------------- */
.feld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 13px 0;
	min-width: 0;
}

.feld__label {
	font-family: var(--head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.5;
}

.feld input[type="text"],
.feld input[type="search"],
.feld input[type="number"],
.feld input[type="date"],
.feld select,
.feld textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: var(--card);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	padding: 9px 12px;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.4;
	color: var(--text);
}
.feld select {
	cursor: pointer;
}
input:hover,
select:hover,
textarea:hover {
	border-color: var(--muted);
}
input:focus,
select:focus,
textarea:focus {
	border-color: var(--marke);
}

input[type="range"] {
	width: 100%;
	accent-color: var(--marke);
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	accent-color: var(--marke);
	cursor: pointer;
}

.feld__hilfe {
	font-size: 11px;
	line-height: 1.5;
	color: var(--muted);
}

.feld__fehler {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--bad);
}
.feld__fehler::before {
	content: "\00D7\00A0"; /* Kreuz — Fehler nicht nur ueber Farbe */
	font-weight: 700;
}

/* --- .fortschritt (Referenz: .bar / .b-t / .b-f) -------------------------- */
/* Die Module setzen die Fuellung ueber --wert (0–100), teils am Balken,
   teils am Rahmen — Custom Properties vererben, beides funktioniert. */
.fortschritt {
	height: 9px;
	background: #e6eaee;
	border-radius: 1px;
	overflow: hidden;
	margin: 4px 0;
	min-width: 40px;
}

.fortschritt__balken {
	display: block;
	height: 100%;
	width: calc(var(--wert, 0) * 1%);
	max-width: 100%;
	background: var(--marke);
	border-radius: 1px;
}

.fortschritt--dick {
	height: 14px;
}

.fortschritt--erfolg .fortschritt__balken {
	background: var(--good);
}
.fortschritt--warnung .fortschritt__balken {
	background: var(--warn);
}
.fortschritt--fehler .fortschritt__balken {
	background: var(--bad);
}

.fortschritt-feld {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.fortschritt-feld__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted);
}

.fortschritt-feld__wert {
	font-family: var(--head);
	font-weight: 700;
	font-size: 12px;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Schrittkette (Prozessfortschritt in der Sachbearbeitung). */
.fortschritt-schritte {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 13px 0;
	padding: 0;
}

.fortschritt-schritte > li {
	flex: 1 1 8rem;
	margin: 0;
	padding: 7px 2px 0;
	border-top: 3px solid var(--hair);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted);
}

.fortschritt-schritte > li[aria-current="step"] {
	border-top-color: var(--marke);
	color: var(--dunkel);
	font-weight: 700;
}

.fortschritt-schritte > li[data-status="erledigt"] {
	border-top-color: var(--good);
	color: var(--text);
}
.fortschritt-schritte > li[data-status="erledigt"]::before {
	content: "\2713\00A0"; /* Haken */
	color: var(--good);
	font-weight: 700;
}

/* --- .tabs / .tab / .tab-panel -------------------------------------------- */
.tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 2px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--hair);
	scrollbar-width: thin;
}
.tabs > li {
	margin: 0;
	flex: none;
}

.tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 9px 16px;
	font-family: var(--head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.tab:hover {
	color: var(--dunkel);
	border-bottom-color: var(--linie-stark);
	text-decoration: none;
}

/* Aktiver Reiter: DB Rot als Unterstreichung plus Fettung — der Zustand
   haengt nicht an der Farbe allein. */
.tab--aktiv,
.tab[aria-selected="true"] {
	color: var(--dunkel);
	font-weight: 700;
	border-bottom-color: var(--marke);
	background: var(--sky);
}

.tab:focus-visible {
	outline-offset: -3px;
}

.tab-panel {
	padding: 4px 0;
}
.tab-panel[hidden] {
	display: none;
}

/* =============================================================================
   9  HILFSKLASSEN
   ========================================================================== */
.text-klein {
	font-size: 11.5px;
	line-height: 1.55;
}

.text-schwach {
	color: var(--muted);
}

.text-mono {
	font-family: var(--mono);
	font-size: 0.94em;
}

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

.text-rechts {
	text-align: right;
}

.abstand-oben-lg {
	margin-top: 24px;
}

.abstand-unten-lg {
	margin-bottom: 24px;
}

.abstand-0 {
	margin: 0;
}

[hidden] {
	display: none !important;
}

/* =============================================================================
   10  FEINSCHLIFF DER MODUL-EIGENEN KLASSEN
   -----------------------------------------------------------------------------
   js/agenten/regelwerk.js fuegt zur Laufzeit ein eigenes <style> ein, das auf
   die --db-*-Token oben zugreift. Was dort nur grob gesetzt ist, wird hier
   mit hoeherer Spezifitaet an die Referenz herangefuehrt (Zitatverweise in
   Petrol, wie .cite).
   ========================================================================== */
.inhalt .rw-zitat {
	border-inline-start-color: var(--petrol);
	background-color: var(--flaeche-info);
}

.inhalt .rw-zitat p {
	color: var(--text);
	font-style: italic;
}

.inhalt .rw-zitat__herkunft {
	font-style: normal;
	color: var(--petrol);
	letter-spacing: 0.02em;
}

.inhalt .rw-variante__rolle {
	font-family: var(--head);
	letter-spacing: 0.14em;
	color: var(--muted);
}

.inhalt .rw-variante__wert {
	font-weight: 300;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
}

.inhalt .rw-variante--massgeblich {
	border-inline-start: 3px solid var(--marke);
}

.inhalt .rw-variante__fuss {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.55;
}

.inhalt .rw-detail {
	box-shadow: var(--schatten);
}

.inhalt .rw-filter {
	gap: 16px;
}
.inhalt .rw-filter .feld {
	margin: 0;
	flex: 1 1 14rem;
}

.inhalt .rw-liste-eng li {
	margin: 3px 0;
	line-height: 1.55;
}

/* =============================================================================
   11  SCHMALE FENSTER
   -----------------------------------------------------------------------------
   Unter 900px klappt die Navigationsleiste nach oben und die Seite scrollt
   normal — nichts darf abgeschnitten werden.
   ========================================================================== */
@media (max-width: 1100px) {
	:root {
		--rand: 22px;
	}
}

@media (max-width: 900px) {
	body {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}

	/* Normaler Dokumentfluss statt Flex-Hoehenverteilung — sonst begrenzt der
	   Flex-Container die Hoehe des Inhalts und der Text laeuft unter die
	   Fusszeile. */
	.layout,
	.hauptbereich,
	.seite {
		display: block;
		min-height: 0;
	}

	nav.seitenleiste {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--hair);
		overflow-y: visible;
	}

	.marke {
		padding: 18px 18px 14px;
	}

	.nav-fuss {
		margin-top: 0;
	}

	.seitenkopf__inhalt {
		flex-direction: column;
		align-items: flex-start;
	}

	.inhalt {
		flex: none;
		overflow-y: visible;
		padding: 22px 18px 40px;
	}

	.fortschritt-feld__kopf {
		flex-wrap: wrap;
	}
}

@media (max-width: 560px) {
	.karte__kopf {
		padding: 12px 14px 0;
	}
	.karte__inhalt {
		padding: 12px 14px 14px;
	}
	.karte__fuss {
		padding: 9px 14px 11px;
	}
	.btn {
		padding: 10px 16px;
	}
	.btn-gruppe .btn {
		flex: 1 1 auto;
	}
	.raster {
		grid-template-columns: minmax(0, 1fr);
	}
	.rechenweg {
		padding: 12px 13px;
	}
	.seitenkopf__titel {
		font-size: 19px;
	}
}

/* Bewegungsreduktion respektieren. */
@media (prefers-reduced-motion: reduce) {
	.inhalt {
		scroll-behavior: auto;
	}
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================================
   12  DRUCK
   -----------------------------------------------------------------------------
   Navigationsleiste ausblenden, Inhalt vollflaechig, Ziele externer Links
   ausschreiben.
   ========================================================================== */
@media print {
	body {
		height: auto;
		overflow: visible;
		background: #ffffff;
		font-size: 10.5pt;
	}

	.layout {
		display: block;
	}

	nav.seitenleiste,
	.sprungmarke,
	.btn,
	.btn-gruppe,
	.tabs {
		display: none !important;
	}

	.hauptbereich {
		display: block;
		background: #ffffff;
	}

	.seitenkopf,
	.fusszeile {
		border-color: #999999;
		padding-left: 0;
		padding-right: 0;
	}

	.inhalt {
		overflow: visible;
		padding: 12pt 0;
	}

	.inhalt > *,
	.seitenkopf__inhalt,
	.fusszeile__inhalt {
		max-width: none;
	}

	.karte,
	.kennzahl,
	.hinweis,
	.rechenweg,
	.tabelle-wrap {
		box-shadow: none;
		break-inside: avoid;
	}

	.tabelle-wrap {
		overflow: visible;
	}

	.tabelle thead th {
		position: static;
	}

	.rechenweg__schritt,
	.tabelle tr {
		break-inside: avoid;
	}

	.quelle--extern[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		white-space: normal;
	}

	.quelle__text {
		overflow: visible;
		white-space: normal;
	}
}


/* ——— Ziffernspalte der Stationen (wie .station .no der Referenz) ——— */

.station__nr {
	position: absolute;
	left: 12px;
	top: 7px;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--head);
	color: var(--marke-soft, #C87C82);
	letter-spacing: 0.02em;
}

.station--aktiv .station__nr {
	color: var(--marke-text);
}