/*!
 * Facility Management – Design-System: Komponenten-Schicht
 *
 * Härtet die vorhandenen fm-*-Klassen auf die Marke (Logo-Blau, Navy, Sora/Inter)
 * und schließt die Systemlücken, die bisher jedes Modul selbst gelöst hat
 * (Button-Varianten und -Größen, Notizboxen, Section-Titel, Progress, Avatar,
 * Tabellendichte, Tabs). Keine Template-Änderungen nötig – die Klassennamen
 * existieren bereits in allen Modulen.
 *
 * Ladeposition: ZULETZT (nach allen Modul-Stylesheets), damit die
 * Systemdefinition gegen gewachsene Modul-Overrides gewinnt. Gleiche
 * Spezifität wie die Basis (#fm-app .klasse) → die Quellreihenfolge entscheidet,
 * kein !important nötig.
 *
 * Tokens: public/css/fm-tokens.css
 */

/* ============================================================
   1. Basis & Typografie
   ============================================================ */
#fm-app {
	font-family: var(--fm-font);
	font-size: 15px;
	line-height: var(--fm-lh-ui);
	color: var(--fm-text);
	text-wrap: pretty;
}

#fm-app h1,
#fm-app h2,
#fm-app h3,
#fm-app h4 {
	font-family: var(--fm-font-head);
	line-height: var(--fm-lh-tight);
	color: var(--fm-heading);
	letter-spacing: -0.01em;
}

#fm-app a {
	color: var(--fm-primary-600);
}

#fm-app a:hover {
	color: var(--fm-primary-700);
}

/* Sichtbarer Fokus auf allen interaktiven Elementen – einheitlich. */
#fm-app a:focus-visible,
#fm-app button:focus-visible,
#fm-app summary:focus-visible,
#fm-app [tabindex]:focus-visible,
#fm-app input:focus-visible,
#fm-app select:focus-visible,
#fm-app textarea:focus-visible {
	outline: 2px solid var(--fm-focus-color);
	outline-offset: 2px;
}

/* Zahlen in Tabellen, KPIs und Geldfeldern immer tabellarisch. */
#fm-app .fm-table,
#fm-app .fm-kpi-value,
#fm-app .fm-num,
#fm-app .fm-detail-list dd,
#fm-app input[type="number"],
#fm-app input[type="date"],
#fm-app input[type="time"] {
	font-variant-numeric: tabular-nums;
}

#fm-app code,
#fm-app .fm-code {
	font-family: var(--fm-font-mono);
	font-size: var(--fm-fs-xs);
	background: var(--fm-primary-50);
	color: var(--fm-primary-700);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
}

/* ============================================================
   2. Shell
   ============================================================ */
#fm-app .fm-shell {
	background: var(--fm-bg);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-xl);
}

#fm-app .fm-content {
	padding: var(--fm-s-4);
}

@media (min-width: 640px) {
	#fm-app .fm-content {
		padding: var(--fm-s-6);
	}
}

#fm-app .fm-footer {
	padding: var(--fm-s-3) var(--fm-s-4);
	border-top: 1px solid var(--fm-stroke);
	background: var(--fm-surface);
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

/* ============================================================
   3. Sidebar
   Aktives Item: linker Primärbalken + Flächenwechsel (Position auf
   einen Blick erkennbar, nicht nur über Farbe).
   ============================================================ */
#fm-app .fm-sidebar {
	background: var(--fm-navy-900);
	z-index: var(--fm-z-nav);
	transition: transform var(--fm-t-base) var(--fm-ease);
}

#fm-app .fm-overlay {
	z-index: var(--fm-z-overlay);
	background: rgba(13, 27, 42, 0.55);
}

#fm-app .fm-sidebar-brand {
	padding: var(--fm-s-5) var(--fm-s-4) var(--fm-s-4);
}

#fm-app .fm-brand-name {
	font-family: var(--fm-font-head);
	font-weight: 700;
	font-size: var(--fm-fs-md);
	color: #fff;
}

#fm-app .fm-brand-badge {
	border-radius: var(--fm-r-md);
}

#fm-app .fm-nav {
	gap: 2px;
	padding: var(--fm-s-2) var(--fm-s-2) var(--fm-s-5);
}

#fm-app a.fm-nav-link {
	color: var(--fm-sidebar-text);
	text-decoration: none;
}

#fm-app .fm-nav-link {
	position: relative;
	gap: var(--fm-s-3);
	padding: 0.55rem var(--fm-s-3);
	border-radius: var(--fm-r-md);
	color: var(--fm-sidebar-text);
	font-size: var(--fm-fs-sm);
	font-weight: 500;
	transition: background-color var(--fm-t-fast) var(--fm-ease),
		color var(--fm-t-fast) var(--fm-ease);
}

#fm-app a.fm-nav-link:hover,
#fm-app .fm-nav-link:hover {
	background: var(--fm-navy-800);
	color: #fff;
}

#fm-app a.fm-nav-link.is-active,
#fm-app .fm-nav-link.is-active {
	background: var(--fm-navy-800);
	color: #fff;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--fm-primary-600);
}

#fm-app .fm-nav-link:focus-visible {
	outline-color: var(--fm-focus-color-dark);
	outline-offset: -2px;
}

/* Zähler-Badge im Navigationseintrag (z. B. offene Vorgänge je Modul). */
#fm-app .fm-nav-link .fm-badge,
#fm-app .fm-nav-count {
	margin-left: auto;
	min-width: 1.375rem;
	justify-content: center;
	background: var(--fm-navy-700);
	color: var(--fm-sidebar-heading);
}

#fm-app .fm-nav-link .fm-badge-danger,
#fm-app .fm-nav-count.is-danger {
	background: #7f1d1d;
	color: var(--fm-danger-line);
}

/* Fachgruppen-Überschriften: volle Deckkraft statt opacity-Trick. */
#fm-app .fm-nav-group-title,
#fm-app summary.fm-nav-group-title {
	font-family: var(--fm-font);
	font-size: 0.69rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fm-sidebar-muted);
	opacity: 1;
	border-radius: var(--fm-r-sm);
}

#fm-app summary.fm-nav-group-title:hover {
	background: var(--fm-navy-800);
	color: var(--fm-sidebar-heading);
	opacity: 1;
}

/* Offene Gruppe bzw. Gruppe mit aktiver Seite deutlich heller. */
#fm-app .fm-nav-group[open] > summary.fm-nav-group-title,
#fm-app .fm-nav-group.is-active > summary.fm-nav-group-title {
	color: var(--fm-sidebar-heading);
}

#fm-app .fm-nav-divider {
	border-top-color: var(--fm-sidebar-line);
	opacity: 1;
}

/* ============================================================
   4. Topbar
   ============================================================ */
#fm-app .fm-topbar {
	gap: var(--fm-s-3);
	padding: var(--fm-s-3) var(--fm-s-4);
	background: var(--fm-surface);
	border-bottom: 1px solid var(--fm-stroke);
}

#fm-app .fm-topbar-title {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-md);
	font-weight: 600;
	color: var(--fm-heading);
}

#fm-app .fm-user-name {
	font-size: var(--fm-fs-sm);
	font-weight: 600;
	color: var(--fm-heading);
}

#fm-app .fm-burger {
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
}

/* Avatar / Initialen (bisher nur modulweise vorhanden). */
#fm-app .fm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--fm-r-full);
	background: var(--fm-primary-50);
	color: var(--fm-primary-700);
	font-size: var(--fm-fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
}

#fm-app .fm-avatar-sm {
	width: 1.875rem;
	height: 1.875rem;
	font-size: var(--fm-fs-2xs);
}

#fm-app .fm-avatar-muted {
	background: var(--fm-n-150);
	color: var(--fm-body);
}

/* ============================================================
   5. Seitenkopf – ein Muster für alle Ansichten
   ============================================================ */
#fm-app .fm-page-head {
	margin-bottom: var(--fm-s-5);
}

#fm-app .fm-page-title {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-xl);
	font-weight: 700;
	color: var(--fm-heading);
}

#fm-app .fm-page-sub {
	margin-top: var(--fm-s-1);
	font-size: var(--fm-fs-sm);
	color: var(--fm-body);
	max-width: 72ch;
}

#fm-app .fm-page-head-row {
	gap: var(--fm-s-4);
}

#fm-app .fm-actions-inline {
	gap: var(--fm-s-2);
}

/* Brotkrumen (optional, Markup: <nav class="fm-breadcrumb">). */
#fm-app .fm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
	margin-bottom: var(--fm-s-2);
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

#fm-app .fm-breadcrumb a {
	color: var(--fm-body);
	font-weight: 500;
}

#fm-app .fm-breadcrumb a:hover {
	color: var(--fm-primary-600);
}

#fm-app .fm-breadcrumb [aria-current="page"] {
	color: var(--fm-heading);
	font-weight: 600;
}

/* ============================================================
   6. Karten – Rahmen ODER Schatten, nicht beides
   Header-Trennlinie nur, wenn der Header eine Aktion enthält.
   ============================================================ */
#fm-app .fm-card {
	background: var(--fm-surface);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-e-1);
}

/* Kartenkopf mit Trennlinie — bewusste Abweichung von INTEGRATION.md §4
   („Header ohne Trennlinie, Abstand statt Linie"). Die Linie steht an ALLEN
   Kartenköpfen, nicht nur an solchen mit Aktion.

   Beide Schreibweisen zusammen: `.fm-card-header` ist der kanonische Name,
   `.fm-card-head` der Alias, der in den Templates bleibt. Sie müssen hier
   gemeinsam stehen — eine spätere Einzelregel für den Alias würde bei gleicher
   Spezifität gewinnen und die Linie wieder aushebeln. Ohne das explizite Setzen
   überlebt außerdem die Linie aus fm-app.css, die dort am Alias mit
   padding 1rem 1.25rem steht.

   ⚠️ Lokale Änderung, nicht aus dem Paket — siehe docs/design-system-rueckgabe.md.
   Wird von jedem neuen Paket überschrieben; nach jedem Paket-Update prüfen. */
#fm-app .fm-card-header,
#fm-app .fm-card-head {
	padding: var(--fm-s-4) var(--fm-s-5) var(--fm-s-3);
	border-bottom: 1px solid var(--fm-stroke-soft);
}

#fm-app .fm-card-title {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-lg);
	font-weight: 600;
	color: var(--fm-heading);
}

#fm-app .fm-card-body {
	padding: var(--fm-s-5);
}

#fm-app .fm-card-header + .fm-card-body {
	padding-top: var(--fm-s-3);
}

#fm-app .fm-card-spaced {
	margin-top: var(--fm-s-4);
}

#fm-app .fm-card-danger {
	border-color: var(--fm-danger-line);
	border-left: 3px solid var(--fm-danger);
}

#fm-app .fm-card-link {
	transition: box-shadow var(--fm-t-base) var(--fm-ease),
		border-color var(--fm-t-base) var(--fm-ease);
}

#fm-app .fm-card-link:hover {
	box-shadow: var(--fm-e-2);
	border-color: var(--fm-primary-300);
	transform: none;
}

/* ============================================================
   7. KPI-Kacheln – 4 Spalten bereits ab 1280 px
   ============================================================ */
#fm-app .fm-grid-kpi {
	gap: var(--fm-s-4);
}

#fm-app .fm-card-kpi {
	flex-direction: column;
	align-items: stretch;
	gap: var(--fm-s-3);
	padding: var(--fm-s-4) var(--fm-s-5);
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-e-1);
}

#fm-app .fm-kpi-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 11px;
	background: var(--fm-primary-50);
	color: var(--fm-primary-600);
}

#fm-app .fm-kpi-icon .fm-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Werte/Label sind im Template <span> – ohne display:block laufen sie in der
   Spaltenanordnung in eine Zeile (templates/components/card-kpi.php). */
#fm-app .fm-kpi-value,
#fm-app .fm-kpi-label {
	display: block;
}

#fm-app .fm-kpi-value {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-2xl);
	font-weight: 700;
	line-height: 1.1;
	color: var(--fm-heading);
}

#fm-app .fm-kpi-label {
	margin-top: 0.15rem;
	font-size: var(--fm-fs-sm);
	font-weight: 500;
	color: var(--fm-body);
}

#fm-app a.fm-card-kpi-link {
	color: inherit;
}

#fm-app a.fm-card-kpi-link {
	transition: box-shadow var(--fm-t-base) var(--fm-ease),
		border-color var(--fm-t-base) var(--fm-ease);
}

#fm-app a.fm-card-kpi-link:hover,
#fm-app a.fm-card-kpi-link:focus-visible {
	transform: none;
	border-color: var(--fm-primary-300);
	box-shadow: var(--fm-e-2);
}

#fm-app .fm-accent-success .fm-kpi-icon {
	background: var(--fm-success-soft);
	color: var(--fm-success-text);
}

#fm-app .fm-accent-warning .fm-kpi-icon {
	background: var(--fm-warning-soft);
	color: var(--fm-warning-text);
}

#fm-app .fm-accent-danger .fm-kpi-icon {
	background: var(--fm-danger-soft);
	color: var(--fm-danger);
}

#fm-app .fm-accent-info .fm-kpi-icon {
	background: var(--fm-info-soft);
	color: var(--fm-info);
}

@media (min-width: 1280px) {
	#fm-app .fm-grid-kpi {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ============================================================
   8. Badges – weiche Fläche, dunkler Text
   ============================================================ */
#fm-app .fm-badge {
	padding: 0.2rem 0.55rem;
	border-radius: var(--fm-r-full);
	font-size: var(--fm-fs-2xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

#fm-app .fm-badge-muted {
	background: var(--fm-neutral-soft);
	color: var(--fm-neutral-text);
}

#fm-app .fm-badge-success {
	background: var(--fm-success-soft);
	color: var(--fm-success-text);
}

#fm-app .fm-badge-warning {
	background: var(--fm-warning-soft);
	color: var(--fm-warning-text);
}

#fm-app .fm-badge-danger {
	background: var(--fm-danger-soft);
	color: var(--fm-danger-text);
}

#fm-app .fm-badge-info {
	background: var(--fm-info-soft);
	color: var(--fm-info-text);
}

/* Statuspunkt, damit Status nicht allein über Farbe transportiert wird. */
#fm-app .fm-badge-dot::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-right: 0.4rem;
	border-radius: var(--fm-r-full);
	background: currentColor;
	flex: 0 0 auto;
}

/* ============================================================
   9. Buttons – Varianten und Größen im Kern
   ============================================================ */
#fm-app .fm-btn {
	gap: var(--fm-s-2);
	min-height: 2.625rem;
	padding: 0 var(--fm-s-4);
	border: 1px solid transparent;
	border-radius: var(--fm-r-md);
	font-family: var(--fm-font);
	font-size: var(--fm-fs-sm);
	font-weight: 600;
	transition: background-color var(--fm-t-fast) var(--fm-ease),
		border-color var(--fm-t-fast) var(--fm-ease),
		box-shadow var(--fm-t-fast) var(--fm-ease);
}

#fm-app .fm-btn-primary {
	background: var(--fm-primary-600);
	border-color: var(--fm-primary-600);
	color: var(--fm-primary-contrast);
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}

#fm-app .fm-btn-primary:hover {
	background: var(--fm-primary-700);
	border-color: var(--fm-primary-700);
	color: #fff;
}

#fm-app .fm-btn-ghost {
	background: var(--fm-surface);
	border-color: var(--fm-stroke);
	color: var(--fm-heading);
}

#fm-app .fm-btn-ghost:hover {
	background: var(--fm-surface-2);
	border-color: var(--fm-n-300);
	color: var(--fm-heading);
}

/* Neu im Kern: dezente Variante für tertiäre Aktionen. */
#fm-app .fm-btn-subtle {
	background: var(--fm-primary-50);
	border-color: transparent;
	color: var(--fm-primary-700);
}

#fm-app .fm-btn-subtle:hover {
	background: var(--fm-primary-100);
	color: var(--fm-primary-900);
}

#fm-app .fm-btn-danger {
	background: var(--fm-danger);
	border-color: var(--fm-danger);
	color: #fff;
}

#fm-app .fm-btn-danger:hover {
	background: var(--fm-danger-text);
	border-color: var(--fm-danger-text);
	color: #fff;
}

#fm-app .fm-btn-danger-text {
	background: transparent;
	border-color: transparent;
	color: var(--fm-danger-text);
}

#fm-app .fm-btn-danger-text:hover {
	background: var(--fm-danger-soft);
	color: var(--fm-danger-text);
}

/* Aus fm-dispatch-mobile.css in den Kern gehoben. */
#fm-app .fm-btn-success {
	background: var(--fm-success-text);
	border-color: var(--fm-success-text);
	color: #fff;
}

#fm-app .fm-btn-success:hover,
#fm-app .fm-btn-success:focus {
	background: #166534;
	border-color: #166534;
	color: #fff;
}

/* Aus fm-mail-center.css in den Kern gehoben. */
#fm-app .fm-btn-text {
	background: transparent;
	border-color: transparent;
	padding: 0 var(--fm-s-2);
	color: var(--fm-body);
	font-weight: 600;
}

#fm-app .fm-btn-text:hover {
	background: var(--fm-surface-2);
	color: var(--fm-heading);
}

#fm-app .fm-btn-sm {
	min-height: 2.125rem;
	padding: 0 var(--fm-s-3);
	font-size: var(--fm-fs-xs);
}

#fm-app .fm-btn-lg {
	min-height: 3rem;
	padding: 0 var(--fm-s-5);
	font-size: var(--fm-fs-md);
}

#fm-app .fm-btn-icon {
	width: 2.625rem;
	min-height: 2.625rem;
	padding: 0;
}

#fm-app .fm-btn-block {
	width: 100%;
}

#fm-app .fm-btn[disabled],
#fm-app .fm-btn[aria-disabled="true"],
#fm-app .fm-btn.is-loading {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

#fm-app .fm-btn .fm-icon {
	width: 1.0625rem;
	height: 1.0625rem;
	flex: 0 0 auto;
}

/* ============================================================
   10. Formulare
   ============================================================ */
#fm-app .fm-field {
	margin-bottom: var(--fm-s-5);
}

#fm-app .fm-field > label,
#fm-app .fm-field-label {
	margin-bottom: var(--fm-s-2);
	font-size: var(--fm-fs-sm);
	font-weight: 600;
	color: var(--fm-heading);
}

#fm-app .fm-input,
#fm-app .fm-select,
#fm-app .fm-textarea {
	min-height: 2.625rem;
	padding: 0.55rem var(--fm-s-3);
	border: 1px solid var(--fm-stroke);
	border-radius: 9px;
	background: var(--fm-surface);
	color: var(--fm-heading);
	font-size: var(--fm-fs-sm);
	transition: border-color var(--fm-t-fast) var(--fm-ease),
		box-shadow var(--fm-t-fast) var(--fm-ease);
}

#fm-app .fm-textarea {
	line-height: var(--fm-lh-ui);
	resize: vertical;
}

#fm-app .fm-input::placeholder,
#fm-app .fm-textarea::placeholder {
	color: var(--fm-muted);
}

#fm-app .fm-input:hover,
#fm-app .fm-select:hover,
#fm-app .fm-textarea:hover {
	border-color: var(--fm-n-300);
}

#fm-app .fm-input:focus,
#fm-app .fm-select:focus,
#fm-app .fm-textarea:focus {
	outline: none;
	border-color: var(--fm-primary-600);
	box-shadow: var(--fm-focus-ring);
}

#fm-app .fm-input[disabled],
#fm-app .fm-select[disabled],
#fm-app .fm-textarea[disabled],
#fm-app .fm-input[readonly] {
	background: var(--fm-surface-2);
	color: var(--fm-body);
	cursor: not-allowed;
}

/* Fehlerzustand: Rahmen + Text, nicht nur Farbe. */
#fm-app .fm-input.is-invalid,
#fm-app .fm-select.is-invalid,
#fm-app .fm-textarea.is-invalid,
#fm-app .fm-input[aria-invalid="true"],
#fm-app .fm-select[aria-invalid="true"],
#fm-app .fm-textarea[aria-invalid="true"] {
	border-color: var(--fm-danger);
}

#fm-app .fm-input.is-invalid:focus,
#fm-app .fm-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

#fm-app .fm-field-error {
	display: flex;
	align-items: center;
	gap: var(--fm-s-1);
	margin-top: var(--fm-s-2);
	font-size: var(--fm-fs-xs);
	font-weight: 500;
	color: var(--fm-danger-text);
}

#fm-app .fm-help {
	margin-top: var(--fm-s-2);
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

/* Aus fm-mail-center.css in den Kern gehoben. */
#fm-app .fm-input-sm,
#fm-app .fm-select-sm {
	min-height: 2.125rem;
	padding: 0.3rem var(--fm-s-3);
	font-size: var(--fm-fs-xs);
	border-radius: var(--fm-r-md);
}

#fm-app .fm-checkbox-row input[type="checkbox"],
#fm-app .fm-choice input {
	accent-color: var(--fm-primary-600);
}

#fm-app .fm-choice {
	min-height: 44px;
	border: 1px solid var(--fm-stroke);
	border-radius: 9px;
	background: var(--fm-surface);
	transition: border-color var(--fm-t-fast) var(--fm-ease),
		background-color var(--fm-t-fast) var(--fm-ease);
}

#fm-app .fm-choice:hover {
	border-color: var(--fm-primary-300);
	background: var(--fm-surface-2);
}

#fm-app .fm-choice:has(input:checked) {
	border-color: var(--fm-primary-600);
	background: var(--fm-primary-50);
}

/* Abschnittsüberschrift im Formular – Abstand statt Linie. */
#fm-app .fm-form-section,
#fm-app .fm-section-title {
	margin: var(--fm-s-6) 0 var(--fm-s-4);
	padding-bottom: 0;
	border-bottom: none;
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fm-muted);
}

#fm-app .fm-form-section:first-child,
#fm-app .fm-section-title:first-child {
	margin-top: 0;
}

/* Aktionsleiste am Formularende (optional: <div class="fm-form-actions">). */
#fm-app .fm-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fm-s-3);
	margin: var(--fm-s-6) calc(-1 * var(--fm-s-5)) calc(-1 * var(--fm-s-5));
	padding: var(--fm-s-4) var(--fm-s-5);
	border-top: 1px solid var(--fm-stroke);
	background: var(--fm-surface-2);
	border-radius: 0 0 var(--fm-r-lg) var(--fm-r-lg);
}

#fm-app .fm-form-actions-note {
	margin-right: auto;
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

/* ============================================================
   11. Hinweise & Notizboxen
   fm-note-* stammt aus fm-lexoffice-migration.css → jetzt Kern.
   ============================================================ */
#fm-app .fm-notice,
#fm-app .fm-alert {
	margin-bottom: var(--fm-s-4);
	padding: var(--fm-s-3) var(--fm-s-4);
	border-radius: 9px;
	border-left: 3px solid var(--fm-info);
	background: var(--fm-info-soft);
	color: var(--fm-info-text);
	font-size: var(--fm-fs-sm);
	font-weight: 500;
}

#fm-app .fm-notice-success,
#fm-app .fm-alert-success {
	border-left-color: var(--fm-success);
	background: var(--fm-success-soft);
	color: var(--fm-success-text);
}

#fm-app .fm-notice-error,
#fm-app .fm-alert-error {
	border-left-color: var(--fm-danger);
	background: var(--fm-danger-soft);
	color: var(--fm-danger-text);
}

#fm-app .fm-notice-warning,
#fm-app .fm-alert-warning {
	border-left-color: var(--fm-warning);
	background: var(--fm-warning-soft);
	color: var(--fm-warning-text);
}

#fm-app .fm-note-info,
#fm-app .fm-note-warning,
#fm-app .fm-note-danger,
#fm-app .fm-note-success {
	padding: var(--fm-s-3) var(--fm-s-4);
	border: 1px solid var(--fm-info-line);
	border-radius: 10px;
	background: var(--fm-info-soft);
	color: var(--fm-info-text);
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-note-warning {
	border-color: var(--fm-warning-line);
	background: #fffbeb;
	color: var(--fm-warning-text);
}

#fm-app .fm-note-danger {
	border-color: var(--fm-danger-line);
	background: #fef2f2;
	color: var(--fm-danger-text);
}

#fm-app .fm-note-success {
	border-color: var(--fm-success-line);
	background: var(--fm-success-soft);
	color: var(--fm-success-text);
}

/* ============================================================
   12. Tabellen – Dichte, Sticky-Header, ruhige Linien
   ============================================================ */
#fm-app .fm-table-wrap {
	overflow-x: auto;
	border-radius: var(--fm-r-lg);
}

#fm-app .fm-table {
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0.55rem var(--fm-cell-x);
	background: var(--fm-surface-2);
	border-top: 1px solid var(--fm-stroke-soft);
	border-bottom: 1px solid var(--fm-stroke);
	font-size: 0.69rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fm-body);
	white-space: nowrap;
}

#fm-app .fm-table td {
	padding: var(--fm-cell-y) var(--fm-cell-x);
	border-bottom: 1px solid var(--fm-stroke-soft);
	color: var(--fm-text);
	vertical-align: middle;
}

#fm-app .fm-table tbody tr:last-child td {
	border-bottom: none;
}

#fm-app .fm-table tr:hover td {
	background: var(--fm-surface-2);
}

#fm-app .fm-table a {
	color: var(--fm-heading);
	font-weight: 600;
}

#fm-app .fm-table a:hover {
	color: var(--fm-primary-600);
}

/* Erste Spalte als Zeilenanker. */
#fm-app .fm-table tbody th[scope="row"],
#fm-app .fm-table td:first-child {
	color: var(--fm-heading);
	font-weight: 600;
}

/* Zahlenspalten rechts (Markup: class="fm-num"). */
#fm-app .fm-table .fm-num {
	text-align: right;
}

#fm-app .fm-table-actions {
	gap: var(--fm-s-2);
}

/* Zebra optional, nur wo ausdrücklich gewünscht. */
#fm-app .fm-table-zebra tbody tr:nth-child(even) td {
	background: var(--fm-n-50);
}

#fm-app .fm-table-compact td {
	padding: 0.45rem 0.75rem;
}

/* ============================================================
   13. Tabs / Subnav – Unterstreichung in Primär
   ============================================================ */
#fm-app .fm-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-s-6);
	margin-bottom: var(--fm-s-5);
	border-bottom: 1px solid var(--fm-stroke);
}

#fm-app a.fm-subnav-link {
	color: var(--fm-body);
	-webkit-text-fill-color: currentColor;
	text-decoration: none;
}

#fm-app .fm-subnav-link {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	padding: 0 2px var(--fm-s-3);
	margin-bottom: -1px;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--fm-body);
	-webkit-text-fill-color: currentColor;
	font-size: var(--fm-fs-sm);
	font-weight: 500;
	white-space: nowrap;
}

#fm-app .fm-subnav-link:hover,
#fm-app .fm-subnav-link:focus {
	background: transparent;
	color: var(--fm-heading);
	-webkit-text-fill-color: currentColor;
	border-bottom-color: var(--fm-stroke);
}

#fm-app a.fm-subnav-link.is-active,
#fm-app .fm-subnav-link.is-active,
#fm-app .fm-subnav-link.is-active:hover,
#fm-app .fm-subnav-link.is-active:focus {
	background: transparent;
	color: var(--fm-heading);
	-webkit-text-fill-color: currentColor;
	font-weight: 600;
	border-bottom-color: var(--fm-primary-600);
}

/* Nur unqualifizierte Zähler neutralisieren – Semantikvarianten
   (.fm-badge-danger u. a.) behalten ihre Bedeutung. */
#fm-app .fm-subnav-link .fm-badge:not([class*="fm-badge-"]) {
	background: var(--fm-neutral-soft);
	color: var(--fm-body);
	font-size: 0.68rem;
}

#fm-app .fm-subnav-link .fm-badge {
	font-size: 0.68rem;
}

/* ============================================================
   14. Chips / Filterleiste
   ============================================================ */
#fm-app a.fm-chip,
#fm-app .fm-chip {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
	min-height: 2.125rem;
	padding: 0.3rem var(--fm-s-3);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-full);
	background: var(--fm-surface);
	color: var(--fm-body);
	font-size: var(--fm-fs-xs);
	font-weight: 500;
}

#fm-app .fm-chip:hover {
	border-color: var(--fm-primary-300);
	color: var(--fm-heading);
}

#fm-app a.fm-chip-active,
#fm-app .fm-chip-active {
	background: var(--fm-primary-50);
	border-color: var(--fm-primary-600);
	color: var(--fm-primary-700);
	font-weight: 600;
}

#fm-app .fm-toolbar {
	gap: var(--fm-s-2);
	align-items: center;
	margin-bottom: var(--fm-s-4);
}

#fm-app .fm-filterbar,
#fm-app .fm-chip-row {
	align-items: center;
	gap: var(--fm-s-2);
}

/* ============================================================
   15. Detailliste / Lesedarstellung
   ============================================================ */
#fm-app .fm-detail-list {
	grid-template-columns: minmax(8rem, 34%) 1fr;
	gap: 0 var(--fm-s-4);
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-detail-list dt {
	padding: 0.6rem 0;
	border-top: 1px solid var(--fm-stroke-soft);
	font-weight: 400;
	color: var(--fm-body);
}

#fm-app .fm-detail-list dd {
	padding: 0.6rem 0;
	border-top: 1px solid var(--fm-stroke-soft);
	color: var(--fm-heading);
	font-weight: 600;
}

#fm-app .fm-detail-list dt:first-of-type,
#fm-app .fm-detail-list dd:first-of-type {
	border-top: none;
}

#fm-app .fm-readonly-label {
	color: var(--fm-body);
	font-weight: 400;
}

#fm-app .fm-readonly-value {
	color: var(--fm-heading);
	font-weight: 500;
}

#fm-app .fm-muted {
	color: var(--fm-body);
	font-size: var(--fm-fs-sm);
}

/* ============================================================
   16. Fortschritt & Stepper
   ============================================================ */
#fm-app .fm-progress-track {
	height: 0.5rem;
	border-radius: var(--fm-r-full);
	background: var(--fm-n-150);
	overflow: hidden;
}

#fm-app .fm-progress-bar {
	height: 100%;
	border-radius: var(--fm-r-full);
	background: var(--fm-primary-600);
	transition: width var(--fm-t-base) var(--fm-ease);
}

#fm-app .fm-step-list {
	display: flex;
	flex-direction: column;
	gap: var(--fm-s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

#fm-app .fm-step {
	display: flex;
	align-items: center;
	gap: var(--fm-s-3);
	font-size: var(--fm-fs-sm);
	font-weight: 500;
	color: var(--fm-text);
}

#fm-app .fm-step-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: var(--fm-r-full);
	background: var(--fm-n-150);
	color: var(--fm-muted);
	font-size: var(--fm-fs-2xs);
	font-weight: 700;
}

#fm-app .fm-step.is-done .fm-step-marker {
	background: var(--fm-success-soft);
	color: var(--fm-success-text);
}

#fm-app .fm-step.is-error .fm-step-marker {
	background: var(--fm-danger-soft);
	color: var(--fm-danger-text);
}

#fm-app .fm-step.is-current .fm-step-marker {
	background: var(--fm-primary-600);
	color: #fff;
}

#fm-app .fm-step.is-todo {
	color: var(--fm-muted);
}

/* ============================================================
   17. Leerzustände, Listen, Timeline
   ============================================================ */
#fm-app .fm-empty-state {
	padding: var(--fm-s-10) var(--fm-s-5);
	text-align: center;
	color: var(--fm-body);
}

#fm-app .fm-empty-state .fm-card-title {
	margin-bottom: var(--fm-s-2);
}

#fm-app .fm-plain-list li,
#fm-app .fm-timeline li,
#fm-app .fm-tree-item {
	border-bottom-color: var(--fm-stroke-soft);
}

#fm-app .fm-comment {
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: 10px;
}

#fm-app .fm-comment-meta {
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

/* fm-app.css färbt diese beiden Threads über var(--fm-muted-bg) ein – ein
   semantischer Zustand über einem Neutral-Token. Hier auf die richtigen
   Semantikflächen gesetzt, damit „Ihre Nachricht" grün und „Antwort vom Team"
   blau bleiben, sobald --fm-muted-bg definiert ist. */
#fm-app .fm-comment-own {
	border-left-color: var(--fm-success);
	background: var(--fm-success-soft);
}

#fm-app .fm-comment-team {
	border-left-color: var(--fm-primary-600);
	background: var(--fm-primary-50);
}

/* ============================================================
   18. Pagination
   ============================================================ */
#fm-app .fm-pagination {
	gap: var(--fm-s-4);
	margin-top: var(--fm-s-5);
}

#fm-app .fm-pagination-info {
	font-size: var(--fm-fs-xs);
	color: var(--fm-body);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   19. Login / Auth
   ============================================================ */
#fm-app .fm-auth-wrap {
	background: var(--fm-bg);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-xl);
}

#fm-app .fm-auth-card {
	background: var(--fm-surface);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-e-2);
}

#fm-app .fm-auth-title {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-lg);
	font-weight: 700;
}

#fm-app .fm-auth-text {
	color: var(--fm-body);
	font-size: var(--fm-fs-sm);
}

/* ============================================================
   20. Fließtext (Hilfe, Prosa)
   ============================================================ */
#fm-app .fm-prose {
	max-width: 72ch;
	line-height: var(--fm-lh-prose);
	color: var(--fm-text);
}

#fm-app .fm-prose h3 {
	margin: var(--fm-s-6) 0 var(--fm-s-2);
	font-size: var(--fm-fs-md);
	font-weight: 600;
}

/* ============================================================
   21. Icon-Konvention
   ============================================================ */
#fm-app .fm-icon {
	flex: 0 0 auto;
	stroke-width: 1.6;
}

/* ============================================================
   22. Druck
   ============================================================ */
/* ============================================================
   23. Shell-Erweiterungen (Design-System-Templates)
   Gehört zu templates/components/app-layout.php, page-head.php und
   card-kpi.php in dieser Fassung. Ohne die Templates schaden die
   Regeln nicht – sie matchen dann einfach nichts.
   ============================================================ */

/* Sidebar-Marke mit Untertitel */
#fm-app .fm-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

#fm-app .fm-brand-sub {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fm-sidebar-muted);
}

/* Topbar: Kontext (Betrieb + Ansicht) links, Werkzeuge rechts */
#fm-app .fm-topbar-context {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;
}

#fm-app .fm-topbar-org {
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fm-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#fm-app .fm-topbar-context .fm-topbar-title {
	flex: 0 0 auto;
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-topbar-tools {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	flex: 0 0 auto;
}

/* Globale Suche: der Toggle des Suchmoduls als sauberes Icon-Feld. */
#fm-app .fm-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
	color: var(--fm-text);
	cursor: pointer;
	transition: border-color var(--fm-t-fast) var(--fm-ease),
		background-color var(--fm-t-fast) var(--fm-ease);
}

#fm-app .fm-search-toggle:hover {
	border-color: var(--fm-primary-300);
	background: var(--fm-surface-2);
}

/* Nutzermenü als natives <details> – funktioniert ohne JS. */
#fm-app .fm-user-menu {
	position: relative;
	flex: 0 0 auto;
	margin-left: var(--fm-s-2);
	padding-left: var(--fm-s-3);
	border-left: 1px solid var(--fm-stroke);
}

#fm-app .fm-user-menu-trigger {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	min-height: 2.75rem;
	padding: 0 var(--fm-s-1);
	border-radius: var(--fm-r-md);
	cursor: pointer;
	user-select: none;
	list-style: none;
}

#fm-app .fm-user-menu-trigger::-webkit-details-marker {
	display: none;
}

#fm-app .fm-user-menu-trigger::marker {
	content: "";
}

#fm-app .fm-user-meta {
	display: none;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

#fm-app .fm-user-role {
	font-size: var(--fm-fs-2xs);
	color: var(--fm-muted);
}

#fm-app .fm-user-menu-caret {
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--fm-muted);
	transition: transform var(--fm-t-fast) var(--fm-ease);
}

#fm-app .fm-user-menu[open] .fm-user-menu-caret {
	transform: rotate(180deg);
}

#fm-app .fm-user-menu-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: var(--fm-z-drawer);
	display: flex;
	flex-direction: column;
	min-width: 12rem;
	padding: var(--fm-s-1);
	background: var(--fm-surface);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-e-3);
}

#fm-app a.fm-user-menu-item,
#fm-app .fm-user-menu-item {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	min-height: 2.5rem;
	padding: 0 var(--fm-s-3);
	border-radius: var(--fm-r-md);
	color: var(--fm-text);
	font-size: var(--fm-fs-sm);
	font-weight: 500;
	white-space: nowrap;
}

#fm-app a.fm-user-menu-item:hover {
	background: var(--fm-surface-2);
	color: var(--fm-heading);
}

@media (min-width: 640px) {
	#fm-app .fm-user-meta {
		display: flex;
	}
}

/* Seitenkopf: Titelzeile mit Statusabzeichen */
#fm-app .fm-page-head-main {
	min-width: 0;
}

#fm-app .fm-page-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-3);
}

#fm-app .fm-breadcrumb-sep {
	color: var(--fm-n-300);
}

/* KPI-Kachel: Kopfzeile aus Icon und Hinweis */
#fm-app .fm-kpi-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-s-3);
}

#fm-app .fm-kpi-meta .fm-badge {
	margin-top: 0;
}

/* Aufklappbare Karte: <details class="fm-card"><summary class="fm-card-title">.
   Ersetzt die inline gesetzten cursor/padding-Styles in den Modul-Templates. */
#fm-app details.fm-card > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-s-3);
	padding: var(--fm-s-4) var(--fm-s-5);
	cursor: pointer;
	user-select: none;
	list-style: none;
	border-radius: var(--fm-r-lg);
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-lg);
	font-weight: 600;
	color: var(--fm-heading);
}

#fm-app details.fm-card > summary::-webkit-details-marker {
	display: none;
}

#fm-app details.fm-card > summary::marker {
	content: "";
}

#fm-app details.fm-card > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--fm-muted);
	border-bottom: 2px solid var(--fm-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--fm-t-fast) var(--fm-ease);
}

#fm-app details.fm-card[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

#fm-app details.fm-card > summary:hover {
	background: var(--fm-surface-2);
}

#fm-app details.fm-card[open] > summary {
	border-radius: var(--fm-r-lg) var(--fm-r-lg) 0 0;
	border-bottom: 1px solid var(--fm-stroke-soft);
}

/* In Modul-Templates verwendet, war aber nie definiert – Alias auf die
   Ghost-Variante bzw. eine schlichte Aktionszeile. */
#fm-app .fm-btn-secondary {
	background: var(--fm-surface);
	border-color: var(--fm-stroke);
	color: var(--fm-heading);
}

#fm-app .fm-btn-secondary:hover {
	background: var(--fm-surface-2);
	border-color: var(--fm-n-300);
	color: var(--fm-heading);
}

#fm-app .fm-field-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-s-2);
	margin-top: var(--fm-s-4);
}

#fm-app .fm-field-hint,
#fm-app .fm-form-hint {
	margin-top: var(--fm-s-2);
	font-size: var(--fm-fs-xs);
	color: var(--fm-muted);
}

/* Feldgruppe mit Legende (in mehreren Modulformularen verwendet, war nie
   definiert – wurde als Browser-Default mit Rahmen gerendert). */
#fm-app .fm-fieldset {
	margin: var(--fm-s-6) 0 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--fm-stroke-soft);
	padding-top: var(--fm-s-5);
}

#fm-app .fm-fieldset > legend {
	padding: 0;
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fm-muted);
}

/* In mehreren Modulen wird `fm-card-head` statt `fm-card-header` geschrieben
   (u. a. im gesamten Billing-Modul). Als Alias behandeln, statt 28 Templates zu
   ändern.

   Padding und Trennlinie stehen bewusst NICHT hier, sondern oben gemeinsam mit
   `.fm-card-header`. Eine zweite Alias-Regel an dieser Stelle hätte gleiche
   Spezifität und läge später — sie würde die gemeinsame Regel oben überstimmen
   und die beiden Schreibweisen wieder auseinanderlaufen lassen. */
#fm-app .fm-card-head + .fm-card-body {
	padding-top: var(--fm-s-3);
}

#fm-app .fm-card-head .fm-card-title {
	font-family: var(--fm-font-head);
	font-size: var(--fm-fs-lg);
	font-weight: 600;
	color: var(--fm-heading);
}

/* KPI-Kachel ohne Icon: leeren Farbkreis nicht rendern (Billing übergibt
   bewusst 'icon' => ''). */
#fm-app .fm-kpi-icon:empty {
	display: none;
}

/* --- Runde 7 (billing: Rechnungsdetail, Mahnwesen) -------------------- */

/* `fm-notice-info` war nicht definiert – neutrale Hinweise (Gutschrift zur
   Originalrechnung, PDF-Hinweise) standen ohne Akzentfarbe da, während
   success/warning/error gestaltet sind. */
#fm-app .fm-notice-info,
#fm-app .fm-alert-info {
	border-left-color: var(--fm-primary-600);
	background: var(--fm-primary-50);
	color: var(--fm-text);
}

/* Untertitel im Kartenkopf (Billing: „Mahnvorschläge“). */
#fm-app .fm-card-sub {
	margin-top: var(--fm-s-1);
	font-size: var(--fm-fs-sm);
	line-height: 1.5;
	color: var(--fm-muted);
}

/* Tabelle direkt unter dem Kartenkopf: der Kopf schließt mit padding-bottom 0,
   sonst klebt die Kopfzeile am Titel. */
#fm-app .fm-card-head + .fm-table-wrap,
#fm-app .fm-card-header + .fm-table-wrap {
	margin-top: var(--fm-s-3);
}

/* Mehrere Abschnitte in einer Karte (Tabelle + zugehöriges Formular) mit
   Haarlinie trennen, statt sie mit doppeltem Innenabstand aneinanderzureihen. */
#fm-app .fm-card-body + .fm-card-body,
#fm-app .fm-table-wrap + .fm-card-body {
	border-top: 1px solid var(--fm-stroke-soft);
}

/* --- Runde 9 (billing: Ausgaben, wiederkehrende Ausgaben) -------------- */

/* `fm-table-actions-col` wird in über 20 Templates quer durch die Module als
   Aktionsspalten-Kopf geschrieben, war aber nirgends definiert – die Spalte war
   dadurch beliebig breit und links ausgerichtet. */
#fm-app .fm-table-actions-col {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

/* `fm-filter-bar` (mit Bindestrich) steht in mehreren Modulen, definiert war nur
   `fm-filterbar` – die Filterfelder standen dadurch untereinander statt in einer
   Zeile. Beide Schreibweisen bedienen. */
#fm-app .fm-filter-bar,
#fm-app .fm-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
}

/* Auf dem Handy gilt die Absicht von fm-mobile-usability.css: Filterelemente
   füllen die Breite. Das `align-items: center` oben steht ohne Media Query und
   hat dieselbe Spezifität wie die dortige Regel — da die Systemschicht später
   lädt, gewann bisher `center`, und der Filtern-Button blieb schmal. Diese
   Regel stellt `stretch` unterhalb desselben Breakpoints (640px) wieder her.

   ⚠️ Lokale Änderung, nicht aus dem Paket — siehe docs/design-system-rueckgabe.md. */
@media (max-width: 640px) {
	#fm-app .fm-filter-bar,
	#fm-app .fm-filterbar {
		align-items: stretch;
	}
}

@media print {
	#fm-app .fm-card,
	#fm-app .fm-card-kpi {
		box-shadow: none;
		border-color: var(--fm-n-300);
		break-inside: avoid;
	}

	#fm-app .fm-table th {
		position: static;
	}

	#fm-app .fm-user-menu,
	#fm-app .fm-topbar-tools {
		display: none !important;
	}
}