/* ============================================================
   Boproma – Modulinhalt-Stylesheet
   Wird in allen Themes vor der theme-eigenen CSS eingebunden,
   sodass Themes diese Stile bei Bedarf überschreiben können.
   CSS-Variablen nutzen Fallback-Werte, damit das Stylesheet
   auch ohne ein bestimmtes Theme funktioniert.
   ============================================================ */

/* ===== A11y-Utilities ===== */
/* Visuell unsichtbar, für Screenreader lesbar. Standard-Snippet
   (WebAIM). Gedacht für Tabellen-Kopfzellen von Aktions-Spalten,
   Icon-Only-Buttons etc. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===== Reiter-Leiste =====
   Generische Tab-Navigation, die Geschwister-Ansichten eines
   thematischen Clusters verlinkt (z. B. Bereiche / Hauptkategorien
   / Unterkategorien im Asset-Modul). Tabs sind echte Links auf
   Views, kein Lazy-Tab-Pattern — das hält die Mechanik einfach
   und Deeplinks funktionieren weiter. */
.reiter-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--abst-1);
	margin-bottom: var(--abst-5);
	border-bottom: 1px solid var(--f-border, #45475a);
}

.reiter {
	padding: var(--abst-2) 0.875rem;
	color: var(--f-text-schwach, #6c7086);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.12s, border-color 0.12s;
}

.reiter:hover {
	color: var(--f-text, #cdd6f4);
}

.reiter--aktiv {
	color: var(--f-aktiv, #89b4fa);
	border-bottom-color: var(--f-aktiv, #89b4fa);
}

.reiter--aktiv:hover {
	color: var(--f-aktiv, #89b4fa);
}

/* Optionaler Zähler-Badge im Reiter (z. B. Anzahl pro Status). Modul rendert
   die Zahl, Core liefert die Pille. Aktiv-Variante hebt sich ab. Lokaler
   `inline-block` + `margin-left` halten das Badge sauber neben dem Text,
   ohne den Reiter selbst auf Flex umzustellen — das hatte unerwünschte
   Wechselwirkungen mit der Aktiv-Border (`border-bottom: 2px`). */
.reiter__zaehler {
	display: inline-block;
	margin-left: 0.375rem;
	background: var(--f-hover, #313244);
	color: var(--f-text-schwach, #6c7086);
	padding: 1px var(--abst-2);
	border-radius: 0.625rem;
	font-size: 0.8rem;
	font-weight: 600;
}

.reiter--aktiv .reiter__zaehler {
	background: var(--f-aktiv, #89b4fa);
	color: var(--f-aktiv-text, #1e1e2e);
}

/* ===== Seiten-Kopf ===== */
.seiten-kopf {
	display: flex;
	align-items: center;
	gap: var(--abst-3);
	margin-bottom: var(--abst-6);
}

.seiten-kopf h1 {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
	margin: 0;
}

.anzahl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.625rem;
	height: 1.375rem;
	padding: 0 var(--abst-2);
	background: var(--f-hover, #313244);
	color: var(--f-text-schwach, #6c7086);
	border-radius: var(--radius-pille);
	font-size: 0.8rem;
	font-weight: 600;
}

/* ===== Seiten-Aktionen ===== */
.seiten-aktionen {
	margin-bottom: var(--abst-5);
}

/* ===== Tabelle ===== */
.tabellen-bereich {
	overflow-x: auto;
	border-radius: 0.625rem;
	border: 1px solid var(--f-border, #45475a);
}

.datentabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.datentabelle thead tr {
	background: var(--f-seitenleiste, #181825);
	border-bottom: 1px solid var(--f-border, #45475a);
}

.datentabelle th {
	padding: 0.6875rem 0.875rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--f-text-schwach, #6c7086);
	white-space: nowrap;
}

.th-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--abst-1);
	color: inherit;
	text-decoration: none;
}

.th-sort:hover {
	color: var(--f-text, #cdd6f4);
}

.th-sort--aktiv {
	color: var(--f-text, #cdd6f4);
}

.th-sort:focus-visible {
	outline: 2px solid var(--f-aktiv, #89b4fa);
	outline-offset: 2px;
	border-radius: 3px;
}

.datentabelle tbody tr {
	border-bottom: 1px solid var(--f-border, #45475a);
	transition: background 0.15s ease;
}

.datentabelle tbody tr:last-child {
	border-bottom: none;
}

.datentabelle tbody tr:hover {
	background: var(--f-hover, #313244);
}

.datentabelle td {
	padding: 0.6875rem 0.875rem;
	color: var(--f-text, #cdd6f4);
	vertical-align: middle;
}

/* Tabellenzellen-Hilfsstile */
.td-id {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.85rem;
	width: var(--abst-12);
}

.td-fett {
	font-weight: 500;
}

.td-fett a {
	color: var(--f-aktiv, #89b4fa);
	text-decoration: none;
}

.td-fett a:hover {
	text-decoration: underline;
}

.td-datum {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.85rem;
	white-space: nowrap;
}

.td-leer {
	color: var(--f-text-schwach, #6c7086);
	opacity: 0.5;
}

.td-aktionen {
	white-space: nowrap;
	text-align: right;
}

.td-aktionen .btn + .btn {
	margin-left: 0.375rem;
}

/* Drag-Handle für sortierbare Tabellenzeilen. Cell-Modifier `.td-drag` hält die
   Spalte schmal; `.drag-handle` ist das eigentliche Greifelement (Text "⋮⋮" o. ä.). */
.td-drag {
	width: 1.5rem;
	text-align: center;
}

.drag-handle {
	cursor: grab;
	user-select: none;
	color: var(--f-text-schwach, #6c7086);
}

.drag-handle:active {
	cursor: grabbing;
}

tr.zeile--dragend {
	opacity: 0.5;
}

tr.zeile--drop-target {
	outline: 2px dashed var(--f-akzent, #89b4fa);
	outline-offset: -2px;
}

/* Hilfsklasse zum Zentrieren von Tabellen-Zellen — passt visuell zu .td-id /
   .td-aktionen / .td-fett (allesamt Tabellen-Cell-Modifier). */
.td-zentriert {
	text-align: center;
	vertical-align: middle;
}

/* Stack-Layout für schmale Viewports: Tabellen werden pro Zeile zur Karte,
   jede Zelle rendert ihren data-label-Wert als linksbündiges Label. Views
   müssen `data-label="…"` an jedem `<td>` setzen (außer Aktionszellen). */
@media (max-width: 40em) {
	.tabellen-bereich {
		overflow-x: visible;
		border: none;
		border-radius: 0;
	}
	.datentabelle {
		border-collapse: separate;
		border-spacing: 0 0.625rem;
	}
	.datentabelle thead {
		display: none;
	}
	.datentabelle tbody tr {
		display: block;
		background: var(--f-hintergrund, #1e1e2e);
		border: 1px solid var(--f-border, #45475a);
		border-radius: 0.625rem;
		padding: var(--abst-2) 0.875rem;
	}
	.datentabelle tbody tr:hover {
		background: var(--f-hover, #313244);
	}
	.datentabelle td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--abst-4);
		padding: 0.375rem 0;
		border-bottom: 1px dashed var(--f-border, #45475a);
		text-align: right;
		white-space: normal;
	}
	.datentabelle td:last-child {
		border-bottom: none;
	}
	.datentabelle td[data-label]::before {
		content: attr(data-label);
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--f-text-schwach, #6c7086);
		font-weight: 600;
		white-space: nowrap;
		text-align: left;
		flex-shrink: 0;
	}
	.datentabelle .td-aktionen {
		justify-content: flex-end;
	}
}

/* ===== Status-Badge ===== */
.status-badge {
	display: inline-block;
	padding: 2px 0.625rem;
	border-radius: var(--radius-pille);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.status-aktiv {
	background: color-mix(in srgb, var(--f-status-aktiv, #a6e3a1) 15%, transparent);
	color: var(--f-status-aktiv, #a6e3a1);
	border: 1px solid color-mix(in srgb, var(--f-status-aktiv, #a6e3a1) 40%, transparent);
}

.status-inaktiv {
	background: color-mix(in srgb, var(--f-status-inaktiv, #6c7086) 15%, transparent);
	color: var(--f-status-inaktiv, #6c7086);
	border: 1px solid color-mix(in srgb, var(--f-status-inaktiv, #6c7086) 40%, transparent);
}

.status-ausstehend {
	background: color-mix(in srgb, var(--f-status-ausstehend, #f9e2af) 25%, transparent);
	color: var(--f-status-ausstehend, #e6a817);
	border: 1px solid color-mix(in srgb, var(--f-status-ausstehend, #f9e2af) 60%, transparent);
}

.status-neutral {
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 12%, transparent);
	color: var(--f-text-schwach, #6c7086);
	border: 1px solid color-mix(in srgb, var(--f-text-schwach, #6c7086) 30%, transparent);
}

.status-gefahr {
	background: color-mix(in srgb, var(--f-gefahr, #f38ba8) 15%, transparent);
	color: var(--f-gefahr, #f38ba8);
	border: 1px solid color-mix(in srgb, var(--f-gefahr, #f38ba8) 40%, transparent);
}

.status-info {
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 15%, transparent);
	color: var(--f-aktiv, #89b4fa);
	border: 1px solid color-mix(in srgb, var(--f-aktiv, #89b4fa) 40%, transparent);
}

.status-warnung {
	background: color-mix(in srgb, var(--f-warnung, #f9e2af) 15%, transparent);
	color: var(--f-warnung, #f9e2af);
	border: 1px solid color-mix(in srgb, var(--f-warnung, #f9e2af) 40%, transparent);
}

.status-neu {
	background: color-mix(in srgb, var(--f-status-neu, #94e2d5) 15%, transparent);
	color: var(--f-status-neu, #94e2d5);
	border: 1px solid color-mix(in srgb, var(--f-status-neu, #94e2d5) 40%, transparent);
}

.status-akzent {
	background: color-mix(in srgb, var(--f-akzent, #fab387) 15%, transparent);
	color: var(--f-akzent, #fab387);
	border: 1px solid color-mix(in srgb, var(--f-akzent, #fab387) 40%, transparent);
}

/* Für Rolle-/Flag-Indikatoren (z. B. Superadmin), visuell
   getrennt von „aktiv"-Badges in derselben Zeile. */
.status-hinweis {
	background: color-mix(in srgb, var(--f-status-hinweis, #cba6f7) 15%, transparent);
	color: var(--f-status-hinweis, #cba6f7);
	border: 1px solid color-mix(in srgb, var(--f-status-hinweis, #cba6f7) 40%, transparent);
}

.text-gedaempt {
	color: var(--f-gedaempt, #6c7086);
}

.td-gedaempt {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.85rem;
}

.zone-hinweis {
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--f-text-schwach, #6c7086);
	opacity: 0.8;
	margin-left: 3px;
}

/* ===== Hinweise ===== */
.leer-hinweis {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.95rem;
	padding: var(--abst-4) 0;
}

.leer-hinweis--buendig {
	padding: 0;
	margin: 0;
}

/* ===== Leer-Zustand (legitim leere Datenmenge mit CTA) ===== */
.leer-zustand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--abst-3);
	padding: var(--abst-12) var(--abst-6);
	text-align: center;
	background: var(--f-seitenleiste, #181825);
	border: 1px dashed var(--f-border, #45475a);
	border-radius: var(--abst-3);
	color: var(--f-text-schwach, #6c7086);
}

.leer-zustand__icon svg {
	width: var(--abst-12);
	height: var(--abst-12);
	color: var(--f-text-schwach, #6c7086);
}

.leer-zustand__titel {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
}

.leer-zustand__hinweis {
	margin: 0;
	max-width: 52ch;
	font-size: 0.9rem;
}

.leer-zustand__cta {
	margin-top: var(--abst-1);
}

/* Container für primären + sekundären CTA — `.leer-zustand__cta` selbst hat
   `margin-top: var(--abst-1)`, das übernimmt nun der Container.
   Die `.form-inline`-Variante (POST-CTA) hat ihren eigenen `margin: 0`. */
.leer-zustand__aktionen {
	margin-top: var(--abst-1);
	display: flex;
	flex-wrap: wrap;
	gap: var(--abst-2);
	justify-content: center;
	align-items: center;
}

.leer-zustand__aktionen .leer-zustand__cta {
	margin-top: 0;
}

.leer-zustand__aktionen .form-inline {
	margin: 0;
}

/* ===== Fehler-Zustand (nicht gefunden / kein Recht / ungültig) ===== */
.fehler-zustand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--abst-3);
	padding: var(--abst-12) var(--abst-6);
	text-align: center;
	background: color-mix(in srgb, var(--f-meldung-fehler, #f38ba8) 10%, var(--f-seitenleiste, #181825));
	border: 1px solid color-mix(in srgb, var(--f-meldung-fehler, #f38ba8) 40%, transparent);
	border-radius: var(--abst-3);
	color: var(--f-text, #cdd6f4);
}

.fehler-zustand__icon svg {
	width: 2.75rem;
	height: 2.75rem;
	color: var(--f-meldung-fehler, #f38ba8);
}

.fehler-zustand__titel {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.fehler-zustand__beschreibung {
	margin: 0;
	max-width: 52ch;
	font-size: 0.9rem;
	color: var(--f-text-schwach, #6c7086);
}

.fehler-zustand__zurueck {
	margin-top: var(--abst-1);
}

/* ===== Meldungen ===== */
.meldung {
	padding: 0.625rem 0.875rem;
	border-radius: 0.4375rem;
	font-size: 0.9rem;
	margin-bottom: var(--abst-5);
	border: 1px solid transparent;
	display: flex;
	align-items: flex-start;
	gap: var(--abst-3);
}

.meldung-text {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
}

.meldung-schliessen {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 var(--abst-1);
	opacity: 0.6;
}

.meldung-schliessen:hover,
.meldung-schliessen:focus {
	opacity: 1;
}

.meldung-versteckt {
	display: none;
}

.meldung-1 {
	background: color-mix(in srgb, var(--f-meldung-info, #a6e3a1) 15%, transparent);
	border-color: color-mix(in srgb, var(--f-meldung-info, #a6e3a1) 40%, transparent);
	color: var(--f-meldung-info, #a6e3a1);
}

.meldung-2 {
	background: color-mix(in srgb, var(--f-meldung-warnung, #f9e2af) 15%, transparent);
	border-color: color-mix(in srgb, var(--f-meldung-warnung, #f9e2af) 40%, transparent);
	color: var(--f-meldung-warnung, #f9e2af);
}

.meldung-3 {
	background: color-mix(in srgb, var(--f-meldung-fehler, #f38ba8) 15%, transparent);
	border-color: color-mix(in srgb, var(--f-meldung-fehler, #f38ba8) 40%, transparent);
	color: var(--f-meldung-fehler, #f38ba8);
}

/* ===== Karte (Formular-Container) ===== */
.karte {
	width: 100%;
	max-width: var(--breite-text-mittel);
	margin: 0 auto var(--abst-8);
	background: var(--f-seitenleiste, #1e1e2e);
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--abst-3);
	padding: 2.25rem var(--abst-10) var(--abst-8);
	box-shadow: 0 var(--abst-1) var(--abst-6) rgba(0, 0, 0, 0.25);
}

/* Karte ohne Breitenbegrenzung (z. B. Dokumentansicht, Settings-Container).
   Erhöhte Spezifität (`.karte.karte--voll`), damit andere Modifier wie
   `.karte--schmal`/`.karte--gefahr` ihre eigene `max-width` nicht stillschweigend
   zurückwirken — sonst müsste die Modifier-Reihenfolge im Stylesheet manuell
   gepflegt werden. */
.karte.karte--voll {
	max-width: none;
}

/* Schmale Karte für Anmelde-/Registrierformulare */
.karte--schmal {
	max-width: var(--breite-text-eng);
	margin-top: var(--abst-12);
}

/* Karte mit Gefahren-Hervorhebung für Bestätigungsdialoge */
.karte--gefahr {
	max-width: 56ch;
	margin-top: var(--abst-12);
	border-color: color-mix(in srgb, var(--f-gefahr, #f38ba8) 40%, transparent);
}

/* Karten in einer responsiven Reihe (z. B. Hinweis + Konfiguration auf Admin-
   Seiten). Auto-Fit füllt den Wrapper mit so vielen Karten ab `minmax`-Breite,
   wie hineinpassen — bei schmalem Viewport kollabieren die Karten untereinander,
   ohne dass ein expliziter Breakpoint nötig wäre. Verwendung: zwei Wrapper
   untereinander für zwei Reihen à 2 Karten, ein Wrapper für n Karten.
   Kinder verlieren ihre zentrierte Maximalbreite und ihren Außenabstand —
   Spacing liegt am Wrapper bzw. dem Grid-Gap. */
.karten-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--abst-5);
	margin-bottom: var(--abst-8);
}

.karten-reihe > .karte {
	max-width: none;
	margin: 0;
}

.karte h2 {
	font-size: 1.35rem;
	font-weight: 600;
	margin-bottom: 1.75rem;
	color: var(--f-text, #cdd6f4);
}

.karte--gefahr h2 {
	font-size: 1.2rem;
}

.karte--gefahr p {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.95rem;
	margin-bottom: 1.75rem;
	line-height: 1.5;
}

/* Startseite */
.startseite {
	text-align: center;
	padding: 3.5rem var(--abst-12);
}

.startseite__titel {
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: -1px;
	color: var(--f-aktiv, #89b4fa);
	margin: 0;
}

.startseite__trenner {
	border: none;
	border-top: 1px solid var(--f-border, #45475a);
	margin: var(--abst-6) auto;
	width: var(--abst-12);
}

.startseite__copyright {
	font-size: 0.82rem;
	color: var(--f-text-schwach, #6c7086);
}

.karte--gefahr p strong {
	color: var(--f-text, #cdd6f4);
}

/* ===== Formular-Gruppe (Label + Eingabefeld) ===== */
.formular-gruppe {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1.125rem;
}

.formular-gruppe label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--f-text-schwach, #6c7086);
}

.formular-optional {
	font-weight: 400;
	color: var(--f-text-schwach, #6c7086);
	opacity: 0.75;
	font-size: 0.8rem;
	margin-left: var(--abst-1);
}

.formular-gruppe input,
.formular-gruppe select {
	padding: 0.5625rem var(--abst-3);
	background: var(--f-hintergrund, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.4375rem;
	color: var(--f-text, #cdd6f4);
	font-size: 0.95rem;
	font-family: inherit;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.formular-gruppe select option {
	background: var(--f-seitenleiste, #1e1e2e);
}

.formular-gruppe input:focus-visible,
.formular-gruppe select:focus-visible {
	border-color: var(--f-aktiv, #89b4fa);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-aktiv, #89b4fa) 20%, transparent);
	outline-color: var(--f-aktiv, #89b4fa);
}

@media (forced-colors: active) {
	.formular-gruppe input:focus-visible,
	.formular-gruppe select:focus-visible {
		outline: 2px solid Highlight;
	}
}

.formular-gruppe input::placeholder {
	color: var(--f-text-schwach, #6c7086);
	opacity: 0.6;
}

.formular-hilfetext {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.825rem;
	margin-top: var(--abst-1);
}

/* Fehler-Zustand eines Feldes */
.formular-gruppe--fehler label {
	color: var(--f-gefahr, #f38ba8);
}

.formular-gruppe--fehler input,
.formular-gruppe--fehler select,
.formular-gruppe--fehler textarea {
	border-color: var(--f-gefahr, #f38ba8);
}

.formular-gruppe--fehler input:focus-visible,
.formular-gruppe--fehler select:focus-visible,
.formular-gruppe--fehler textarea:focus-visible {
	outline-color: var(--f-gefahr, #f38ba8);
}

.formular-fehler {
	color: var(--f-gefahr, #f38ba8);
	font-size: 0.825rem;
	margin-top: var(--abst-1);
}

/* Checkbox-Variante */
.formular-gruppe-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 0.625rem;
}

.formular-gruppe-checkbox input[type="checkbox"] {
	width: 1.0625rem;
	height: 1.0625rem;
	accent-color: var(--f-aktiv, #89b4fa);
	cursor: pointer;
}

.formular-gruppe-checkbox label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--f-text, #cdd6f4);
	cursor: pointer;
}

/* ===== Formular-Reihe (2 Spalten) ===== */
.formular-reihe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--abst-5);
}

/* Grid-Items erben default `min-width: auto`, das der intrinsischen
   Mindestbreite der Inputs entspricht — in schmalen Karten (`karte--schmal`)
   würden die Spuren sonst über den Rand wachsen. */
.formular-reihe > * {
	min-width: 0;
}

/* ===== Formular-Block (fieldset/legend) ===== */
.formular-block {
	border: 0;
	padding: 0;
	margin: 0 0 var(--abst-6);
	min-width: 0;
}

.formular-block > legend {
	font-size: 1rem;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
	padding: 0;
	margin-bottom: var(--abst-3);
}

/* ===== Formular-Grid (12-Spalten-Layout für benutzerdefinierte Formulare) =====
   Wrapper für dynamisch zusammengesetzte Felder, deren Spannweite und
   Umbruch-Verhalten am Element via data-Attribute gesteuert werden:
   data-breite: 3=1/4, 4=1/3, 6=1/2, 8=2/3, 9=3/4, 12=1/1 (Default 12).
   data-umbruch="1": erzwingt Zeilenumbruch davor (grid-column-start: 1). */
.formular-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 var(--abst-5);
}

.formular-grid > * {
	min-width: 0;
	grid-column: span 12;
}

.formular-grid > [data-breite="3"] { grid-column: span 3; }
.formular-grid > [data-breite="4"] { grid-column: span 4; }
.formular-grid > [data-breite="6"] { grid-column: span 6; }
.formular-grid > [data-breite="8"] { grid-column: span 8; }
.formular-grid > [data-breite="9"] { grid-column: span 9; }

.formular-grid > [data-umbruch="1"][data-breite="3"]  { grid-column: 1 / span 3; }
.formular-grid > [data-umbruch="1"][data-breite="4"]  { grid-column: 1 / span 4; }
.formular-grid > [data-umbruch="1"][data-breite="6"]  { grid-column: 1 / span 6; }
.formular-grid > [data-umbruch="1"][data-breite="8"]  { grid-column: 1 / span 8; }
.formular-grid > [data-umbruch="1"][data-breite="9"]  { grid-column: 1 / span 9; }
.formular-grid > [data-umbruch="1"][data-breite="12"] { grid-column: 1 / span 12; }

@media (max-width: 37.5em) {
	.formular-grid > [data-breite] {
		grid-column: 1 / span 12;
	}
}

/* ===== Formular-Gruppe: read-only Modifier =====
   BEM-Modifier zu .formular-gruppe — visualisiert eingefrorene Felder
   (z.B. nach Anlage nicht mehr änderbar). Wird gemeinsam mit dem
   `disabled`-Attribut der Inputs verwendet (per JS oder server-seitig
   gerendert). Tatsächliche Schreibblockade gehört in die Server-Logik —
   das hier ist UX-Visualisierung. */
.formular-gruppe--readonly {
	opacity: 0.65;
}
.formular-gruppe--readonly input,
.formular-gruppe--readonly select,
.formular-gruppe--readonly textarea {
	background-color: var(--f-card, var(--f-seitenleiste, #181825));
	cursor: not-allowed;
}

/* ===== Formular-Aktionen (Schaltflächen-Zeile) ===== */
.formular-aktionen {
	margin-top: var(--abst-6);
	display: flex;
	/* Umbruch statt Überlauf — schmale Karten (z. B. karte--gefahr mit drei
	   Buttons) brechen die Zeile, statt aus der Box zu ragen. */
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
}

/* ===== Trenner & Hinweis-Text ===== */
.formular-trenner {
	border: none;
	border-top: 1px solid var(--f-border, #45475a);
	margin: var(--abst-6) 0 var(--abst-5);
}

.formular-hinweis {
	text-align: center;
	font-size: 0.875rem;
	color: var(--f-text-schwach, #6c7086);
}

.formular-hinweis--links {
	text-align: left;
	margin-bottom: 1.125rem;
}

.form-inline {
	display: inline;
}

.versteckt {
	display: none;
}

.pflichtfeld {
	color: var(--f-gefahr, #f38ba8);
	font-weight: 600;
}

.formular-hinweis a {
	color: var(--f-aktiv, #89b4fa);
	font-weight: 500;
	text-decoration: none;
}

.formular-hinweis a:hover {
	text-decoration: underline;
}

/* ===== Radio-/Checkbox-Optionen =====
   `<label class="radio-option">` umschließt einen Radio- oder Checkbox-Input
   plus Beschriftung; der Browser-Default reicht für die Standard-Darstellung,
   nur die deaktivierte Variante (`.ist-deaktiviert`) hebt sich gedimmt ab. */
.radio-option.ist-deaktiviert {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ===== Schaltflächen ===== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: var(--abst-2) var(--abst-4);
	border-radius: 0.4375rem;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

.btn:hover  { opacity: 0.85; }
.btn:active { opacity: 0.7; }

.btn-primaer {
	background: var(--f-aktiv, #89b4fa);
	color: var(--f-aktiv-text, #1e1e2e);
}

.btn-primaer:hover {
	box-shadow: 0 var(--abst-1) 0.875rem color-mix(in srgb, var(--f-aktiv, #89b4fa) 35%, transparent);
}

.btn-gefahr {
	background: color-mix(in srgb, var(--f-gefahr, #f38ba8) 15%, transparent);
	color: var(--f-gefahr, #f38ba8);
	border: 1px solid color-mix(in srgb, var(--f-gefahr, #f38ba8) 40%, transparent);
}

.btn-gefahr:hover {
	background: color-mix(in srgb, var(--f-gefahr, #f38ba8) 25%, transparent);
}

.btn-neutral {
	background: var(--f-hover, #313244);
	color: var(--f-text, #cdd6f4);
	border: 1px solid var(--f-border, #45475a);
}

.btn-neutral:hover {
	background: var(--f-border, #45475a);
}

.btn-klein {
	padding: var(--abst-1) 0.625rem;
	font-size: 0.8rem;
}

/* Volle Breite (z. B. einzige Schaltfläche in einer Karte) */
.btn-breit {
	width: 100%;
	justify-content: center;
}

/* ===== Icon-Schaltflächen ===== */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0;
	border-radius: 0.375rem;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease;
}

.btn-icon svg {
	width: 0.9375rem;
	height: 0.9375rem;
	flex-shrink: 0;
}

.btn-icon.btn-neutral {
	background: var(--f-hover, #313244);
	color: var(--f-text-schwach, #a6adc8);
	border: 1px solid var(--f-border, #45475a);
}

.btn-icon.btn-neutral:hover {
	background: var(--f-border, #45475a);
	color: var(--f-text, #cdd6f4);
}

.btn-icon.btn-gefahr {
	background: color-mix(in srgb, var(--f-gefahr, #f38ba8) 12%, transparent);
	color: var(--f-gefahr, #f38ba8);
	border: 1px solid color-mix(in srgb, var(--f-gefahr, #f38ba8) 30%, transparent);
}

.btn-icon.btn-gefahr:hover {
	background: color-mix(in srgb, var(--f-gefahr, #f38ba8) 22%, transparent);
}

@media (hover: none), (max-width: 48em) {
	.btn-icon {
		width: var(--abst-10);
		height: var(--abst-10);
	}

	.btn-icon svg {
		width: 1.125rem;
		height: 1.125rem;
	}
}

/* ===== Select als Schaltfläche =====
   Ein <select>, das visuell zu .btn-neutral passt — z. B. neben Links in
   .seiten-aktionen. Der Caret wird per CSS-Gradient gezeichnet (currentColor),
   damit er Skin-Wechsel mitgeht. */
.btn-select {
	display: inline-flex;
	align-items: center;
	padding: var(--abst-2) var(--abst-8) var(--abst-2) var(--abst-4);
	border-radius: 0.4375rem;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	background: var(--f-hover, #313244);
	color: var(--f-text, #cdd6f4);
	border: 1px solid var(--f-border, #45475a);
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		right var(--abst-4) top 50%,
		right 0.6875rem top 50%;
	background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
	background-repeat: no-repeat;
	transition: opacity 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-select:hover {
	background-color: var(--f-border, #45475a);
}

.btn-select:focus-visible {
	border-color: var(--f-aktiv, #89b4fa);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-aktiv, #89b4fa) 20%, transparent);
	outline: 2px solid transparent;
}

.btn-select option {
	background: var(--f-seitenleiste, #1e1e2e);
	color: var(--f-text, #cdd6f4);
}

/* ===== Paginierung ===== */
.paginierung {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: var(--abst-4);
	font-size: 0.875rem;
	color: var(--f-text-schwach, #6c7086);
}

.paginierung-seiten,
.paginierung-pro-seite {
	display: flex;
	align-items: center;
	gap: 3px;
}

.paginierung-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--abst-8);
	height: var(--abst-8);
	padding: 0 0.4375rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--f-text-schwach, #6c7086);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.15s ease, color 0.15s ease;
	cursor: pointer;
	user-select: none;
}

a.paginierung-link:hover {
	background: var(--f-hover, #313244);
	color: var(--f-text, #cdd6f4);
	border-color: var(--f-border, #45475a);
}

.paginierung-aktiv {
	background: var(--f-aktiv, #89b4fa);
	color: var(--f-aktiv-text, #1e1e2e);
	border-color: var(--f-aktiv, #89b4fa);
	font-weight: 600;
	cursor: default;
}

.paginierung-deaktiviert {
	opacity: 0.3;
	cursor: default;
}

.paginierung-luecke {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--abst-8);
	height: var(--abst-8);
	color: var(--f-text-schwach, #6c7086);
	cursor: default;
	user-select: none;
}

/* ===== Filter-Leiste ===== */
.filter-leiste {
	margin-bottom: var(--abst-5);
	padding: 0.875rem var(--abst-4);
	background: var(--f-seitenleiste, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.625rem;
}

.filter-leiste .formular-reihe {
	margin-bottom: 0;
}

.filter-leiste .formular-gruppe {
	margin-bottom: 0;
}

.formular-gruppe-aktion {
	display: flex;
	align-items: flex-end;
}

/* ===== Filter-Zeile (Inline-Filter-Form innerhalb einer Filter-Leiste) ===== */
.filter-zeile {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.filter-zeile label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--f-text-schwach, #6c7086);
}

.filter-zeile input,
.filter-zeile select {
	padding: 0.4375rem 0.625rem;
	background: var(--f-hintergrund, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	color: var(--f-text, #cdd6f4);
	font-size: 0.9rem;
	font-family: inherit;
}

.filter-zeile input:focus-visible,
.filter-zeile select:focus-visible {
	outline: 2px solid var(--f-aktiv, #89b4fa);
	outline-offset: 1px;
	border-color: var(--f-aktiv, #89b4fa);
}

@media (forced-colors: active) {
	.filter-zeile input:focus-visible,
	.filter-zeile select:focus-visible {
		outline: 2px solid Highlight;
	}
}

/* ===== Detail-Bereich (Bestätigungsdialoge) ===== */
.detail-bereich {
	max-width: var(--breite-text-mittel);
	margin: 0 auto var(--abst-6);
}

.detail-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: var(--f-seitenleiste, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.625rem;
	overflow: hidden;
}

.detail-tabelle th,
.detail-tabelle td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	border-bottom: 1px solid var(--f-border, #45475a);
	vertical-align: top;
}

.detail-tabelle th {
	font-weight: 600;
	color: var(--f-text-schwach, #6c7086);
	white-space: nowrap;
	width: 11.25rem;
}

.detail-tabelle td {
	color: var(--f-text, #cdd6f4);
}

.detail-tabelle tr:last-child th,
.detail-tabelle tr:last-child td {
	border-bottom: none;
}

/* ===== Hinweis (informeller Absatz, z. B. unter Bestätigungsdialogen) ===== */
.hinweis {
	max-width: var(--breite-text-mittel);
	margin: 0 auto var(--abst-6);
	padding: var(--abst-3) var(--abst-4);
	background: var(--f-seitenleiste, #181825);
	border-left: 3px solid var(--f-aktiv, #89b4fa);
	border-radius: var(--abst-1);
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.9rem;
	line-height: 1.5;
}

.hinweis code {
	color: var(--f-text, #cdd6f4);
	font-size: 0.85em;
	padding: 1px 0.3125rem;
	background: var(--f-hover, #313244);
	border-radius: 3px;
}

/* Variante für Hinweise direkt unter einem Form-Feld: gleiche Optik wie
   .hinweis, aber linksbündig in voller Container-Breite (statt zentriert
   mit max-width). */
.hinweis--block {
	max-width: none;
	margin: 0.5rem 0 0;
}

/* ===== Hierarchischer Baum ===== */
.baum-bereich {
	margin-top: 1rem;
}

.baum,
.baum-kinder {
	list-style: none;
	margin: 0;
	padding: 0;
}

.baum-kinder {
	padding-left: 1.5rem;
	border-left: 2px solid var(--f-border, #45475a);
	margin-left: 0.75rem;
}

.baum-kinder.eingeklappt {
	display: none;
}

.baum-knoten {
	margin: 0.2rem 0;
}

.baum-zeile {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem;
	border-radius: var(--abst-1);
}

.baum-zeile:hover {
	background: var(--f-hover, #313244);
}

.baum-toggle {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--f-text-schwach, #6c7086);
	display: flex;
	align-items: center;
	justify-content: center;
}

.baum-toggle svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.15s ease;
}

.baum-toggle:not(.eingeklappt) svg {
	transform: rotate(90deg);
}

.baum-toggle-platzhalter {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.baum-name {
	flex: 1;
	font-size: 0.95rem;
}

.baum-name--link {
	color: var(--f-aktiv, #89b4fa);
}

.baum-inaktiv {
	color: var(--f-text-schwach, #94a3b8);
}

.baum-sort {
	font-size: 0.8rem;
	color: var(--f-text-schwach, #6c7086);
	min-width: 2rem;
	text-align: right;
}

.baum-aktionen {
	display: flex;
	gap: 0.2rem;
	opacity: 0;
	transition: opacity 0.1s;
}

.baum-zeile:hover .baum-aktionen {
	opacity: 1;
}

/* ===== Abschnittstitel (innerhalb von Seiten) ===== */
.abschnitt-titel {
	font-size: 1rem;
	font-weight: 600;
	color: var(--f-text-schwach, #6c7086);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 1.5rem 0 0.6rem;
}

/* ===== Radio-Gruppe (vertikale Optionsliste) ===== */
.radio-gruppe {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.radio-gruppe--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

.radio-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--f-text, #cdd6f4);
	cursor: pointer;
}

.radio-option input[type="radio"] {
	accent-color: var(--f-aktiv, #89b4fa);
	width: var(--abst-4);
	height: var(--abst-4);
	cursor: pointer;
}

/* ===== Workflow-Karte (Übersichtszeile) ===== */
.wf-karte {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0.75rem;
	background: var(--f-seitenleiste, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--abst-2);
	margin-bottom: 0.5rem;
}

.wf-karte-inhalt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

.wf-karte-aktionen {
	display: flex;
	gap: 0.4rem;
}

.wf-info {
	font-size: 0.875rem;
	color: var(--f-text-schwach, #6c7086);
}

.wf-status {
	font-size: 0.8rem;
	margin-left: auto;
	padding-right: 0.5rem;
}

.wf-geerbt {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.8rem;
	font-style: italic;
}

/* ===== AJAX-Ladeindikator ===== */
.wird-geladen {
	position: relative;
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.wird-geladen::after {
	content: 'Lädt …';
	position: absolute;
	top: var(--abst-6);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--abst-2) var(--abst-4);
	background: var(--f-seitenleiste, #181825);
	color: var(--f-text, #cdd6f4);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	font-size: 0.85rem;
	font-weight: 500;
	box-shadow: 0 2px var(--abst-2) rgba(0, 0, 0, 0.3);
	opacity: 0;
	animation: wird-geladen-einblenden 0.25s ease 0.25s forwards;
}

@keyframes wird-geladen-einblenden {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.wird-geladen::after {
		animation: none;
		opacity: 1;
	}
}

/* ===== Responsive (einheitlicher Mobil-Breakpoint 40em ≈ 640px) ===== */
@media (max-width: 40em) {
	.formular-reihe {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.karte,
	.karte--schmal {
		margin-top: var(--abst-4);
		padding: 1.75rem var(--abst-5) var(--abst-6);
		border-radius: var(--abst-2);
	}
}

/* ===== Tastatur-Fokus (WCAG 2.1 — 2.4.7 Focus Visible) ===== */
:focus-visible {
	outline: 2px solid var(--f-aktiv, #89b4fa);
	outline-offset: 2px;
	border-radius: 3px;
}

.btn:focus-visible,
.btn-icon:focus-visible,
.paginierung-link:focus-visible,
.td-fett a:focus-visible {
	outline: 2px solid var(--f-aktiv, #89b4fa);
	outline-offset: 2px;
}

/* ===== Reduzierte Bewegung (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== Integritätsprüfung (integritaet.php) ===== */
.status-ok      { color: var(--f-ok, #a6e3a1); font-weight: 600; }
.status-warnung { color: var(--f-warnung, #f9e2af); font-weight: 600; }
.status-fehler  { color: var(--f-fehler, #f38ba8); font-weight: 600; }

.befund-liste {
	list-style: none;
	padding: 0;
	margin: 0;
}

.befund-liste li {
	padding: 2px 0.375rem;
	margin: 2px 0;
	border-left: 3px solid transparent;
}

/* ============================================================
   Aufklapp-Bereich (native <details>/<summary>)
   ------------------------------------------------------------
   Wiederverwendbar für sekundäre Aktionen, die die Hauptansicht
   nicht überfrachten sollen. Tastatur- und a11y-tauglich von
   Haus aus.
   ============================================================ */
.aufklapp {
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.4375rem;
	background: var(--f-seitenleiste, #181825);
	margin: var(--abst-3) 0;
	overflow: hidden;
}

.aufklapp > summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.875rem;
	font-weight: 500;
	color: var(--f-text, #cdd6f4);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background 0.2s ease;
}

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

.aufklapp > summary::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 0.3125rem solid var(--f-text-schwach, #6c7086);
	border-top: var(--abst-1) solid transparent;
	border-bottom: var(--abst-1) solid transparent;
	transition: transform 0.2s ease;
}

.aufklapp[open] > summary::before {
	transform: rotate(90deg);
}

.aufklapp > summary:hover {
	background: var(--f-hover, #313244);
}

.aufklapp > summary:focus-visible {
	outline: 2px solid var(--f-aktiv, #89b4fa);
	outline-offset: -2px;
}

.aufklapp-koerper {
	padding: 0.875rem;
	border-top: 1px solid var(--f-border, #45475a);
}

.aufklapp[open] > summary {
	border-bottom: 1px solid var(--f-border, #45475a);
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 8%, transparent);
}

/* Kompakter Anzeige-Badge — z. B. Kommentar-Counter in Listen */
.kommentar-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: var(--abst-2);
	padding: 2px 0.4375rem;
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 18%, transparent);
	color: var(--f-text, #cdd6f4);
	border: 1px solid color-mix(in srgb, var(--f-aktiv, #89b4fa) 35%, transparent);
	border-radius: 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	vertical-align: middle;
}

/* ============================================================
   Mehrfachauswahl-Komponente (modules/core/js/mehrfachauswahl.js)
   ------------------------------------------------------------
   Ersetzt klobige <select multiple>-Selektoren durch eine UI mit
   Chips + Suchfeld + filterbarer Vorschlagsliste. Original-Select
   bleibt im DOM (off-screen) und wird per JS synchronisiert.
   ============================================================ */
.mehrfachauswahl {
	display: flex;
	flex-direction: column;
	gap: var(--abst-2);
}

.mehrfachauswahl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	min-height: 2.25rem;
	padding: 0.375rem;
	background: var(--f-hintergrund, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.4375rem;
}

.mehrfachauswahl-leer {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.875rem;
	padding: var(--abst-1) 0.375rem;
	font-style: italic;
}

.mehrfachauswahl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: var(--abst-1) var(--abst-1) var(--abst-1) 0.625rem;
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 18%, transparent);
	color: var(--f-text, #cdd6f4);
	border: 1px solid color-mix(in srgb, var(--f-aktiv, #89b4fa) 35%, transparent);
	border-radius: var(--radius-pille);
	font-size: 0.875rem;
	line-height: 1.3;
	max-width: 100%;
}

.mehrfachauswahl-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mehrfachauswahl-chip-entfernen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--abst-5);
	height: var(--abst-5);
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--f-text-schwach, #6c7086);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.mehrfachauswahl-chip-entfernen:hover,
.mehrfachauswahl-chip-entfernen:focus-visible {
	background: var(--f-gefahr, #f38ba8);
	color: var(--f-hintergrund, #181825);
	outline: none;
}

.mehrfachauswahl-sucheBox,
.einzelauswahl-feldBox {
	position: relative;
}

.mehrfachauswahl-suche,
.einzelauswahl-feld {
	width: 100%;
	padding: 0.5625rem var(--abst-3);
	background: var(--f-hintergrund, #181825);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.4375rem;
	color: var(--f-text, #cdd6f4);
	font-size: 0.95rem;
	font-family: inherit;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mehrfachauswahl-suche:focus-visible,
.einzelauswahl-feld:focus-visible {
	border-color: var(--f-aktiv, #89b4fa);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-aktiv, #89b4fa) 20%, transparent);
	outline-color: var(--f-aktiv, #89b4fa);
}

.mehrfachauswahl-vorschlaege,
.einzelauswahl-vorschlaege {
	position: absolute;
	top: calc(100% + var(--abst-1));
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 15rem;
	overflow-y: auto;
	margin: 0;
	padding: var(--abst-1);
	list-style: none;
	background: var(--f-seitenleiste, #1e1e2e);
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.4375rem;
	box-shadow: 0 var(--abst-1) var(--abst-4) rgba(0, 0, 0, 0.35);
}

.mehrfachauswahl-vorschlag,
.einzelauswahl-vorschlag {
	padding: var(--abst-2) var(--abst-3);
	border-radius: 0.3125rem;
	cursor: pointer;
	font-size: 0.925rem;
	color: var(--f-text, #cdd6f4);
	user-select: none;
}

.mehrfachauswahl-vorschlag--aktiv,
.einzelauswahl-vorschlag--aktiv {
	background: var(--f-hover, #313244);
}

.mehrfachauswahl-vorschlag--deaktiviert {
	color: var(--f-text-schwach, #6c7086);
	cursor: not-allowed;
	opacity: 0.55;
}

.mehrfachauswahl-vorschlag-leer,
.einzelauswahl-vorschlag-leer {
	padding: var(--abst-2) var(--abst-3);
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.875rem;
	font-style: italic;
}

/* Einzelauswahl-spezifisch (modules/core/js/einzelauswahl.js): zweizeiliger
   Pfad-Treffer (Kontext gedämpft, Blatt betont) + „Keine/Alle"-Zeile. Die
   Input-/Popover-Stile teilt sie sich über die Selektor-Listen oben. */
.einzelauswahl {
	position: relative;
}

.einzelauswahl-vorschlag {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.35rem;
}

.einzelauswahl-kontext {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.8rem;
}

.einzelauswahl-blatt {
	font-weight: 600;
}

.einzelauswahl-vorschlag--leerwahl {
	color: var(--f-text-schwach, #6c7086);
	font-style: italic;
}

/* ===== Detail-Layout (Karten-Reihe + Feld-Grid) =====
   Wiederverwendbare Bausteine für Detail-/Anzeige-Views beliebiger Module.
   - .detail-reihe: zwei Karten nebeneinander auf großen Bildschirmen.
   - .feld-grid:   Label/Wert-Boxen im mehrspaltigen Grid (2/3/4 Spalten).
*/
.detail-reihe {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}
@media (min-width: 64em) {
	.detail-reihe {
		grid-template-columns: 1fr 1fr;
	}
}


.feld-grid {
	display: grid;
	gap: 1rem 1.5rem;
}
.feld-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 48em) {
	.feld-grid--2,
	.feld-grid--3,
	.feld-grid--4 { grid-template-columns: 1fr; }
}

.feld { min-width: 0; }
.feld--breit { grid-column: 1 / -1; }

.feld-label {
	display: block;
	font-size: 0.72rem;
	color: var(--f-text-schwach, #6c7086);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.3rem;
	font-weight: 600;
}

.feld-wert {
	color: var(--f-text, #cdd6f4);
	word-break: break-word;
	font-size: 0.95rem;
	line-height: 1.4;
}
.feld-wert--text { white-space: pre-wrap; }
.feld-wert--leer {
	color: var(--f-text-schwach, #6c7086);
	font-style: italic;
	font-size: 0.85rem;
}
.feld-wert--code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	background: var(--f-hover, #313244);
	padding: 2px var(--abst-2);
	border-radius: var(--abst-1);
	font-size: 0.9rem;
	display: inline-block;
}

/* ===== Jodit-Editor: feste Anzeige-Farben =====
   Der Schreibbereich des Editors bekommt unabhängig vom aktiven Theme-Skin
   einen hellen Hintergrund mit dunklem Text — beim Editieren immer gut lesbar
   und passend zur Realität des späteren Outputs (Beiträge, Dokumente, Mails
   erscheinen für Leser fast immer auf hellem Hintergrund). Wichtig: nur am
   Editor-Container setzen, nicht ins gespeicherte Markup einfließen lassen. */
.jodit-wysiwyg {
	background: #ffffff;
	color: #1a2733;
}

.jodit-wysiwyg a {
	color: #0566b3;
}

/* ===== Richtext-Anzeige =====
   Stilvertrag für gerendertes HTML aus cHtmlSanitizer (Editor-Output).
   Wird modulübergreifend an dem <div> verwendet, das Sanitizer-HTML zeigt
   (z. B. Beitragsinhalt, Ticket-Beschreibung, Doc-Versionen). Die Selektoren
   decken die in der Sanitizer-Allowlist erlaubten Elemente ab. */
.richtext-inhalt {
	line-height: 1.75;
	color: var(--f-text, #cdd6f4);
	overflow-wrap: anywhere;
	word-break: break-word;
	overflow-x: auto;
}

.richtext-inhalt pre,
.richtext-inhalt code {
	white-space: pre-wrap;
}

.richtext-inhalt h1,
.richtext-inhalt h2,
.richtext-inhalt h3,
.richtext-inhalt h4,
.richtext-inhalt h5,
.richtext-inhalt h6 {
	margin-top: 1.4em;
	margin-bottom: 0.4em;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
}

.richtext-inhalt table {
	border-collapse: collapse;
	width: 100%;
	margin: 1em 0;
}

.richtext-inhalt table td,
.richtext-inhalt table th {
	border: 1px solid var(--f-border, #45475a);
	padding: 0.375rem 0.625rem;
}

.richtext-inhalt table th {
	background: var(--f-seitenleiste, #181825);
	font-weight: 600;
}

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

/* Auto-fill-Grid für Modul-Übersichten (Beitragsliste etc.) — Pendant zu
   .formular-grid (12-Spalten), aber responsive ohne feste Spaltenzahl.
   Mindestbreite 24rem ergibt auf einem ~1280px-Inhaltsbereich drei Karten
   nebeneinander; auf Tablets zwei, auf Smartphones eine. */
.kachel-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: 1.25rem;
	margin-top: 1rem;
}

/* ===== Dashboard ===== */
/* Layout-Container: .formular-grid (12-Spalten + data-breite) + .karte (Box).
   Im Grid-Kontext braucht .karte aber andere Größenregeln als im Formular —
   keine zentrierte Maximalbreite, kein Außenabstand, kein eigenes Padding
   (Padding setzen die internen .widget__kopf / .widget__inhalt selbst). */
.formular-grid > .karte,
.kachel-raster > .karte {
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Hover-Feedback nur für klickbare Karten (Anker). Dashboard-Widgets sind
   <div class="karte"> ohne Anker und bleiben statisch — sie haben eigene
   Drag-/Drop-Cursor-Interaktion. */
a.karte {
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

a.karte:hover,
a.karte:focus-visible {
	border-color: var(--f-aktiv);
	transform: translateY(-2px);
	box-shadow: 0 var(--abst-1) var(--abst-3) rgba(0, 0, 0, 0.1);
}

/* ===== Modul-Startseite (Einstiegskacheln) ===== */
/* Große klickbare Karten mit Icon, Titel und Kurztext. Container ist
   .kachel-raster, Hover-/Fokus-Feedback kommt von a.karte — hier stehen nur
   Innenabstände, Zentrierung und Icon-Vergrößerung. Steht nach
   `.kachel-raster > .karte`, damit das eigene Padding dessen Reset gewinnt. */
.karte.start-kachel {
	padding: var(--abst-8) var(--abst-5);
	align-items: center;
	text-align: center;
	gap: var(--abst-3);
}

.start-kachel__icon {
	color: var(--f-aktiv, #89b4fa);
}

.start-kachel__icon svg {
	width: 3rem;
	height: 3rem;
}

.karte.start-kachel h2 {
	font-size: 1.15rem;
	margin-bottom: 0;
}

.start-kachel p {
	margin: 0;
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Bild-Variante: Bild läuft randlos bis an die Kartenkante, Text darunter. */
.karte.start-kachel--bild {
	padding: 0;
	gap: 0;
}

.start-kachel--bild img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.start-kachel--bild .start-kachel__text {
	padding: var(--abst-5);
	display: flex;
	flex-direction: column;
	gap: var(--abst-3);
	align-items: center;
}

/* `.formular-grid` selbst hat `gap: 0 var(--abst-5)` (kein Zeilenabstand, weil Form-
   Felder kompakt untereinander sitzen sollen). Auf dem Dashboard sind die
   Boxen aber Karten-Container — sie brauchen vertikalen Abstand. */
.formular-grid.dashboard-grid {
	gap: var(--abst-5);
}

/* Innere Box-Struktur eines Widgets — von Modul-Render-Methoden befüllt. */
.widget__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abst-3);
	padding: 0.875rem 1.125rem;
	border-bottom: 1px solid var(--f-border, #45475a);
	background: color-mix(in srgb, var(--f-bg, #11111b) 40%, transparent);
}

/* Selektor mit erhöhter Spezifität — sonst gewinnt `.karte h2` (Bestand)
   gegen ein nacktes `.widget__titel`. */
.widget__kopf .widget__titel {
	font-size: 1rem;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.widget__aktionen {
	display: flex;
	gap: var(--abst-1);
	flex-shrink: 0;
}

/* Drag-Handle links vom Titel — Aktivierungspunkt für Drag-and-Drop.
   Karte ist standardmäßig nicht draggable; JS schaltet `draggable=true` beim
   `mousedown` auf dem Handle ein, damit Klick auf den Inhalt nicht draggt. */
.widget__drag-handle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--f-text-schwach, #6c7086);
	cursor: grab;
	border-radius: var(--abst-1);
	transition: background 120ms ease, color 120ms ease;
}

.widget__drag-handle:hover,
.widget__drag-handle:focus-visible {
	color: var(--f-text, #cdd6f4);
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 18%, transparent);
	outline: none;
}

.widget__drag-handle:active {
	cursor: grabbing;
}

/* Drag-Visualisierung — gilt auf der gerade gedraggten Karte.
   Pointer-Events bleiben aktiv, sonst feuert dragend nicht zuverlässig. */
.karte.widget--dragging {
	opacity: 0.5;
}

/* Drop-Target — Karte, über der gerade geschwebt wird. Akzent-Border zeigt,
   dass hier abgesetzt werden kann. Linker oder oberer Rand je nach Position
   relativ zum Drop-Punkt — die JS-Logik setzt die Klasse defensiv ohne Seite,
   das CSS rendert einen umlaufenden Hint. */
.karte.widget--drop-target {
	box-shadow: 0 0 0 2px var(--f-aktiv, #89b4fa);
}

.widget__aktionen .form-inline {
	margin: 0;
}

.widget__aktionen .btn {
	padding: var(--abst-1) var(--abst-2);
	min-height: auto;
}

.widget__inhalt {
	padding: 0.875rem 1.125rem;
	max-height: 26.25rem;
	overflow-y: auto;
	font-size: 0.9rem;
}

.widget__leer {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.875rem;
	font-style: italic;
	margin: 0;
	text-align: center;
	padding: var(--abst-4) 0;
}

/* Listen-Pattern (Tickets, abonnierte Dokumente, …). Reset analog zu
   .befund-liste; eigene Klasse, weil das Trenn-Linien-Verhalten zwischen
   den Einträgen widget-spezifisch ist. */
.widget__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget__listenzeile {
	border-bottom: 1px solid color-mix(in srgb, var(--f-border, #45475a) 60%, transparent);
}

.widget__listenzeile:last-child {
	border-bottom: none;
}

.widget__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0.625rem 0;
	text-decoration: none;
	color: inherit;
	transition: color 120ms ease;
}

.widget__link:hover,
.widget__link:focus-visible {
	color: var(--f-aktiv, #89b4fa);
	outline: none;
}

.widget__titel-text {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.widget__meta {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.78rem;
}

.widget__fussleiste {
	margin: var(--abst-3) 0 0;
	font-size: 0.825rem;
	text-align: right;
}

.widget__fussleiste a {
	color: var(--f-aktiv, #89b4fa);
	text-decoration: none;
}

.widget__fussleiste a:hover,
.widget__fussleiste a:focus-visible {
	text-decoration: underline;
}

/* Mehrfach-Auswahl-Container für den Konfig-Wizard. Kein Bestand-Pendant —
   .formular-gruppe-checkbox deckt nur Boolean ab, hier sind es N Optionen. */
.checkbox-gruppe {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: var(--abst-2) 0;
}

.checkbox-eintrag {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	font-size: 0.875rem;
	color: var(--f-text, #cdd6f4);
	cursor: pointer;
}

.checkbox-eintrag input[type="checkbox"] {
	width: var(--abst-4);
	height: var(--abst-4);
	accent-color: var(--f-aktiv, #89b4fa);
	cursor: pointer;
}

/* ===== Druck-Layout =====
   App-weite Druck-Anpassung — gilt für alle Themes. Reduziert die App auf
   den Inhalts-Bereich: Seitenleiste, mobile Kopfzeile, Tooltip-Layer,
   Skip-Link und alle Aktionsleisten werden ausgeblendet. Karten verlieren
   Hintergrund/Schatten/Rahmen für tintensparende Ausgabe. Aktion-Buttons
   werden ausgeblendet (sie funktionieren auf Papier ohnehin nicht).
   Klassen mit `nicht-drucken` lassen sich pro View gezielt unterdrücken.

   Hinweis: Selektoren wie `.seitenleiste` / `.mobil-kopfzeile` werden im
   Theme definiert, nicht im Core — die `display: none`-Regel hier greift
   defensiv (wenn das Theme die Klasse nicht hat, ist die Regel unwirksam,
   kein Fehler). Ein eigenes Theme darf seinen Layout-Klassen andere Namen
   geben; sollte es ein anderes Print-Verhalten brauchen, kann es diesen
   Block in seiner theme.css überschreiben (Theme-CSS wird nach Core-CSS
   geladen). */
@media print {
	@page {
		size: A4;
		margin: 1.5cm 1.8cm;
	}

	html, body {
		background: #fff !important;
		color: #000 !important;
	}

	.seitenleiste,
	.mobil-kopfzeile,
	.sl-tooltip,
	.skip-link,
	.formular-aktionen,
	.filter-leiste,
	.paginierung,
	.btn,
	.btn-icon,
	.nicht-drucken {
		display: none !important;
	}

	.hauptinhalt,
	.hauptinhalt.schmal {
		margin-left: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	.inhalt-bereich {
		padding: 0 !important;
		max-width: 100% !important;
	}

	.karte,
	.karte--schmal,
	.karte--voll,
	.karte--gefahr {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 0 12pt 0 !important;
		page-break-inside: avoid;
	}

	.seiten-kopf {
		border-bottom: 1pt solid #000;
		padding-bottom: 4pt;
		margin-bottom: 12pt;
	}

	h1, h2, h3 {
		page-break-after: avoid;
		color: #000 !important;
	}

	table {
		page-break-inside: auto;
	}

	tr, td, th {
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	a {
		color: #000 !important;
		text-decoration: none !important;
	}

	/* Externe Links inkl. URL drucken (interne ?-Links nicht — wertlos auf Papier) */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}

	.meldung,
	.wird-geladen,
	.leer-hinweis {
		display: none !important;
	}
}