/*!
 * Facility Management – Design-System: Ergänzungsschicht (JP FM)
 *
 * WARUM DIESE DATEI EXISTIERT
 * ---------------------------
 * `fm-design-system.css` ist die Basisschicht. Sie enthält im Plugin auch
 * lokale Anpassungen, die dort und nicht im Paket gepflegt werden. Solange jede
 * Runde die Basisdatei mitbrachte, mussten diese Anpassungen bei jedem Paket neu
 * eingepflegt werden.
 *
 * Ab Runde 11 gilt deshalb:
 *
 *   fm-design-system.css              Basis – EINGEFROREN, kommt nicht mehr im
 *                                     Paket, wird im Plugin gepflegt.
 *   fm-design-system-extensions.css   DIESE Datei – gehört dem Paket. Jede Runde
 *                                     hängt hier hinten an. Wird komplett
 *                                     ersetzt, enthält nie lokale Änderungen.
 *   (optional) fm-overrides.css       gehört dem Plugin. Für lokale Feinheiten,
 *                                     die die Systemschicht überstimmen sollen.
 *
 * Damit ist der Merge-Aufwand null: das Paket überschreibt nur Dateien, in denen
 * niemand sonst arbeitet.
 *
 * Ladeposition: NACH fm-design-system.css (Abhängigkeit in
 * class-core-frontend-assets.php). Gleiche Spezifität wie die Basis
 * (#fm-app .klasse) → die Quellreihenfolge entscheidet, kein !important nötig.
 *
 * Tokens: public/css/fm-tokens.css
 */

/* --- Runde 11 (billing: Konten, Kostenstellen, Abschreibungen) --------- */

/* `fm-btn-link` war nirgends definiert – die Zeilenaktionen in Konten, Prüfung
   und Protokoll rendern dadurch als vollwertige Buttons und stehen als
   Button-Trio in der Aktionsspalte. Als Textaktion definieren. */
#fm-app .fm-btn-link {
	min-height: auto;
	padding: 0.15rem 0.25rem;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--fm-primary-700);
	font-weight: 500;
	text-decoration: none;
}

#fm-app .fm-btn-link:hover {
	background: transparent;
	color: var(--fm-primary-900);
	text-decoration: underline;
}

/* `fm-cell-actions` steht in Billing (Konten, Prüfung) und in allen zehn
   Templates des Bankabgleichs, war aber nur in `fm-banking.css` definiert – auf
   allen anderen Seiten also wirkungslos. Alias der Aktionszelle. */
#fm-app .fm-cell-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fm-s-2);
}

/* `fm-field-check` steht in acht Billing-Templates (Konten, Kostenstellen,
   DATEV, DATEV-Migration, Buchhaltung, Prüfung) und war nicht definiert – die
   Checkbox saß ohne Grundlinienbezug unter dem Feldabstand. */
#fm-app .fm-field-check > label {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	min-height: 44px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

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

/* Inline-Bearbeitung in einer Tabellenzeile (`details.fm-inline-edit`): das
   Formular lag bisher unformatiert IN der Aktionszelle und hat die Spalte
   auseinandergezogen. Jetzt als angehefteter Bereich über der Zeile. */
#fm-app .fm-table .fm-cell-actions,
#fm-app .fm-table td:has(> .fm-inline-edit),
#fm-app .fm-table .fm-table-actions {
	position: relative;
}

#fm-app .fm-inline-edit > summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

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

#fm-app .fm-inline-edit[open] > form {
	position: absolute;
	top: calc(100% + var(--fm-s-1));
	right: 0;
	z-index: 20;
	width: max(24rem, 100%);
	max-width: min(34rem, 90vw);
	padding: var(--fm-s-4);
	border: 1px solid var(--fm-stroke);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
	box-shadow: var(--fm-e-3);
	text-align: left;
	white-space: normal;
}

#fm-app .fm-form-compact .fm-field {
	margin-bottom: var(--fm-s-3);
}

#fm-app .fm-form-compact .fm-form-actions {
	margin-top: var(--fm-s-3);
	padding-top: var(--fm-s-3);
}

/* --- Runde 13 (billing: Prüfung, Protokoll, Rentabilität) -------------- */

/* `fm-card-grid` / `fm-card-grid-4` und `fm-stat-card` waren nicht definiert –
   nur `fm-stat-label` und `fm-stat-value` (aus fm-app.css). Die Kennzahlen der
   DATEV-Prüfung, der Einkaufsberichte und der drei Profitabilitäts-Ansichten
   standen dadurch als rahmenlose Textpaare untereinander statt als Kachelreihe. */
#fm-app .fm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--fm-s-4);
	margin-bottom: var(--fm-s-4);
}

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

#fm-app .fm-stat-card {
	display: flex;
	flex-direction: column;
	gap: var(--fm-s-1);
	padding: var(--fm-s-4) var(--fm-s-5);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface);
	box-shadow: var(--fm-e-1);
}

/* --- Runde 16 (Reste: defects, customers) ------------------------------ */

/* `fm-card-form` steht in über 30 Templates quer durch zehn Module (customers,
   tasks, offers, purchasing, forms, absences, system-mail, demo,
   import-onboarding), war aber nirgends definiert. Formularkarten sahen dadurch
   aus wie Listenkarten – und ihre Eingabefelder liefen auf breiten Bildschirmen
   über die gesamte Fensterbreite, was das Lesen der Beschriftungen erschwert.
   Begrenzte Zeilenlänge, links ausgerichtet. */
#fm-app .fm-card-form {
	max-width: 72rem;
}

/* --- Runde 19 (contracts: Liste, Formular, Detail-Shell) --------------- */

/* `fm-toolbar-search` und `fm-toolbar-filter` sind in einem Dutzend Listen
   (customers, tasks, forms, purchasing ×6, contracts) auf Suchfeld und
   Filter-Selects gesetzt, waren aber nur INNERHALB von `.fm-mail-toolbar`
   definiert – überall sonst wirkungslos. Folge: in einer `fm-toolbar` mit acht
   Filtern schrumpfte das Suchfeld auf die Breite seines Platzhalters, während die
   Selects nach Optionslänge auseinanderliefen. Das Suchfeld wächst jetzt, die
   Filter haben eine gemeinsame Grundbreite. */
#fm-app .fm-toolbar .fm-toolbar-search {
	flex: 1 1 16rem;
	min-width: 12rem;
}

#fm-app .fm-toolbar .fm-toolbar-filter {
	flex: 0 1 12rem;
	min-width: 8rem;
}

/* `fm-checkbox-grid` (contracts: Objektauswahl, Qualitätskriterien) war
   undefiniert – die Auswahlzeilen standen als Blockliste untereinander, bei 40
   Objekten eine 40 Zeilen lange Spalte. `fm-checkbox-row` selbst ist in der Basis
   definiert, nur der Rahmen fehlte. */
#fm-app .fm-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--fm-s-1) var(--fm-s-4);
	margin-top: var(--fm-s-2);
}

/* NEUES MUSTER: Überlaufmenü für Zeilenaktionen. Viele Listen tragen vier bis
   fünf Schaltflächen je Zeile (Öffnen, Bearbeiten, Historie, Duplizieren,
   Archivieren) – die Aktionsspalte wird dann breiter als die Inhaltsspalten und
   die eigentliche Aktion verschwindet zwischen den Nebenaktionen. Zwei bleiben
   sichtbar, der Rest kommt hierunter. Reines `<details>`/`<summary>` – kein
   JavaScript, schließt beim Klick daneben nicht von selbst (bewusst: ein
   Klick-außerhalb-Handler wäre JS und die Zeile ist kein Modal). */
#fm-app .fm-row-menu {
	position: relative;
	display: inline-block;
}

#fm-app .fm-row-menu > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	cursor: pointer;
	list-style: none;
}

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

#fm-app .fm-row-menu-panel {
	position: absolute;
	right: 0;
	z-index: 20;
	display: grid;
	gap: var(--fm-s-1);
	justify-items: start;
	min-width: 12rem;
	margin-top: var(--fm-s-1);
	padding: var(--fm-s-2);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
	box-shadow: var(--fm-e-2);
}

/* --- Runde 20 (contracts: Grunddaten, Objekte, Ansprechpartner) -------- */

/* `fm-accordion` / `fm-accordion-summary` sind das Bedienmuster des GANZEN
   Vertragsmoduls – neun der 22 Detail-Panels stecken ihre Bearbeitungsformulare
   in ein solches `<details>` (Ansprechpartner, Notdienst, Preisblatt, Übergabe,
   Leistungen, Winterdienst, Schlüssel). Beide Klassen waren nirgends definiert:
   die Formulare hingen an einem nackten Aufklapp-Dreieck, ohne Rahmen, ohne
   Einzug, ohne Abstand zum Nachbarn – bei fünf Schlüsseln fünf Dreiecke
   untereinander, deren Formulare beim Öffnen ineinander liefen. */
#fm-app .fm-accordion {
	margin-top: var(--fm-s-3);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
}

#fm-app .fm-accordion + .fm-accordion {
	margin-top: var(--fm-s-2);
}

#fm-app .fm-accordion-summary {
	display: flex;
	align-items: center;
	gap: var(--fm-s-2);
	padding: var(--fm-s-3) var(--fm-s-4);
	font-weight: 600;
	color: var(--fm-text);
	cursor: pointer;
}

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

#fm-app .fm-accordion[open] > .fm-accordion-summary {
	border-bottom: 1px solid var(--fm-stroke-soft);
}

/* Alles unterhalb des Summary bekommt den Innenabstand der Karte. */
#fm-app .fm-accordion > :not(summary) {
	padding: var(--fm-s-4);
}

/* `fm-detail-grid` (sechs Vertrags-Panels) war ebenfalls undefiniert. Anders als
   `fm-detail-list` (zweispaltig, Beschriftung links) gruppiert es Paare in
   `<div>`-Kacheln – ohne CSS standen Beschriftung und Wert als Blockelemente
   untereinander, 8 Angaben also 16 Zeilen hoch. */
#fm-app .fm-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--fm-s-3) var(--fm-s-5);
	margin: 0;
}

#fm-app .fm-detail-grid > div {
	display: grid;
	gap: var(--fm-s-1);
}

#fm-app .fm-detail-grid dt {
	font-size: var(--fm-fs-sm);
	color: var(--fm-muted-fg);
}

#fm-app .fm-detail-grid dd {
	margin: 0;
	color: var(--fm-text);
}

/* `fm-card-header-row` (Kartenkopf mit Titel links, Abzeichen/Aktion rechts) wird
   quer durch alle Module verwendet, war aber ausschließlich in
   `public/vendor/tailadmin/tailadmin.css` definiert – einer Fremddatei, deren
   Laden nicht garantiert ist und die nicht zur Systemschicht gehört. Hier als
   Systemregel nachgezogen (deckungsgleich, kein Bruch, falls die Vendor-Datei
   weiter geladen wird). */
#fm-app .fm-card-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fm-s-3);
}

/* --- Runde 21 (contracts: Leistungen, Anlagen-Kopf, Anlagenübersicht) --- */

/* Auswahlspalte für Massenänderungen (Leistungspositionen). Gegenstück zu
   `fm-table-actions-col`: schmal, oben ausgerichtet, damit das Häkchen auf der
   Höhe der ersten Textzeile sitzt und nicht mittig zu einer dreizeiligen Zelle. */
#fm-app .fm-table-select-col {
	width: 2.5rem;
	vertical-align: top;
	text-align: center;
}

/* --- Runde 24 (contracts: zweites Klassen-Vokabular) ------------------- */

/* FUND: die jüngeren Vertrags-Panels (RV7 Versionen, RV8 Dokumente, P4b
   Qualität/Übergabe, Prüfung, Signatur, Aktivierung, Portal) benutzen ein
   EIGENES, nirgends definiertes Klassenset – erkennbar die Handschrift eines
   späteren Ausbaus. Betroffen sind 14 der 31 Templates des Moduls. Ohne diese
   Regeln stehen Formularfelder ohne Abstand aneinander, Zwischentitel sehen aus
   wie Fließtext, „extra kleine“ Schaltflächen sind normal groß und ein
   Gefahrenhinweis ist optisch von einem Info-Hinweis nicht zu unterscheiden.
   Hier einmal zentral definiert, statt in jedem Template ersetzt zu werden – die
   Klassen sind sinnvoll, sie waren nur nie angelegt. */

/* Senkrechter Formularstapel (Gegenstück zu `fm-form`, aber ohne Karten-Kontext). */
#fm-app .fm-stack {
	display: grid;
	gap: var(--fm-s-4);
}

/* Zwei Felder in einer Zeile, z. B. Anzahl + Einheit eines Rhythmus. */
#fm-app .fm-inline-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
}

/* Reihe gleichrangiger Schaltflächen bzw. Mini-Formulare. */
#fm-app .fm-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
}

/* Zwischentitel innerhalb eines Kartenkörpers (kleiner als `fm-card-title`). */
#fm-app .fm-subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
	margin: 0 0 var(--fm-s-2);
	font-size: var(--fm-fs-md);
	font-weight: 600;
	color: var(--fm-text);
}

/* Abschnitt des Versionsvergleichs. */
#fm-app .fm-diff-section + .fm-diff-section {
	margin-top: var(--fm-s-5);
}

/* Abstandshelfer. Bewusst nur die beiden tatsächlich verwendeten Stufen. */
#fm-app .fm-mt {
	margin-top: var(--fm-s-5);
}

#fm-app .fm-mt-1 {
	margin-top: var(--fm-s-3);
}

#fm-app .fm-mt-2 {
	margin-top: var(--fm-s-5);
}

/* Kleinste Textgröße – Zusatzangaben unter einem Tabellenwert. */
#fm-app .fm-text-xs {
	font-size: var(--fm-fs-xs);
	line-height: 1.4;
}

/* Extra kleine Schaltfläche für Zeilen mit mehreren Aktionen. */
#fm-app .fm-btn-xs {
	min-height: 1.75rem;
	padding: 0.15rem var(--fm-s-2);
	font-size: var(--fm-fs-xs);
}

/* Gefahrenhinweis. `fm-notice-info`/`-warning` sind definiert, `-danger` fehlte –
   die unumkehrbare Fixierung sah dadurch aus wie ein beliebiger Hinweis. */
#fm-app .fm-notice-danger {
	border-color: var(--fm-danger-line);
	background: var(--fm-danger-soft);
	color: var(--fm-danger-text);
}

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

/* Schmales Zahlenfeld in einer `fm-inline-fields`-Zeile – ersetzt einen
   Inline-Style `max-width:6rem` im Qualitäts-Panel. */
#fm-app .fm-input-narrow {
	max-width: 6rem;
}

/* Eingerückte Unterzeile im Versionsvergleich – ersetzt einen Inline-Style
   `padding-left:1.5rem`. */
#fm-app .fm-diff-indent {
	padding-left: var(--fm-s-6, 1.5rem);
}

/* --- Runde 25 (contracts: Anlagen 1/2, Unterzeichnung, Aktivierung) ---- */

/* Prüfliste der Aktivierungsvoraussetzungen. `fm-check-list`/`-item`/`-label`
   waren undefiniert – die Punkte standen als Aufzählung mit Punkt-Marker, das
   Abzeichen („OK“ / „fehlt“) mitten im Text. Jetzt eine Zeile je Prüfung mit
   Abzeichen links und Erklärung rechts. */
#fm-app .fm-check-list {
	display: grid;
	gap: var(--fm-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

#fm-app .fm-check-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fm-s-2);
}

#fm-app .fm-check-label {
	font-weight: 500;
}

/* Tabelle, deren erste Spalte Beschriftungen trägt (`<th scope="row">`) –
   Merkmalslisten in Anlage 1. Ohne Regel war die Beschriftungsspalte so breit wie
   der längste Wert. */
#fm-app .fm-th-row th[scope="row"] {
	width: 40%;
	font-weight: 500;
	color: var(--fm-muted-fg);
	text-align: left;
}

/* Unterzeichner-Zeile im Signaturversand: zwei Felder plus die
   Vertretungsbestätigung, die über die ganze Breite läuft. */
#fm-app .fm-signer-row {
	align-items: start;
	padding: var(--fm-s-3);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface-2);
}

#fm-app .fm-signer-row + .fm-signer-row {
	margin-top: var(--fm-s-2);
}

#fm-app .fm-signer-representation {
	grid-column: 1 / -1;
}

/* Kennzeichnet eine Karte, die eine Vertragsanlage in Dokumentform zeigt
   (Anlagen 1 und 2). War undefiniert; die Anlagen sahen aus wie beliebige
   Arbeitskarten. Etwas mehr Innenabstand, ruhigerer Rahmen. */
#fm-app .fm-print-document {
	border-color: var(--fm-stroke);
}

/* --- Runde 26 (contracts: Vorlagen und Kundenportal) ------------------- */

/* `fm-page-header` (Vorlagenverwaltung) war undefiniert – im System heißt die
   Klasse `fm-page-head`. Der Seitenkopf der Vorlagenseite hatte deshalb weder
   Abstand noch die Zeilenaufteilung Titel/Aktion. Als Alias definiert, damit die
   Seite nicht auf eine Umbenennung warten muss. */
#fm-app .fm-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fm-s-3);
	margin-bottom: var(--fm-s-5);
}

/* `fm-def-list` (Kundenportal-Rückfragen) war undefiniert; gleiches Muster wie
   `fm-detail-grid` – Paare in `<div>`-Kacheln. */
#fm-app .fm-def-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--fm-s-3) var(--fm-s-5);
	margin: 0;
}

#fm-app .fm-def-list > div {
	display: grid;
	gap: var(--fm-s-1);
}

#fm-app .fm-def-list dt {
	font-size: var(--fm-fs-sm);
	color: var(--fm-muted-fg);
}

#fm-app .fm-def-list dd {
	margin: 0;
}

/* Zitat des Rückfragetexts im Kundenportal – hebt ab, was WIR gefragt haben. */
#fm-app .fm-quote {
	margin: var(--fm-s-3) 0;
	padding: var(--fm-s-3) var(--fm-s-4);
	border-left: 3px solid var(--fm-stroke);
	background: var(--fm-surface-2);
	white-space: pre-line;
}

/* --- Runde 27 (contracts: Interne Prüfung, Portal-Unterzeichnung) ------- */

/* Der Prüffortschritt-Balken hatte KEINE SPUR: das System definiert
   `fm-progress-track`, das Template schreibt `fm-progress`. Der farbige Balken saß
   damit in einem Element ohne Höhe und Hintergrund – bei 0 % war nichts zu sehen,
   bei 40 % ein schwebender Streifen ohne Bezugsrahmen. Als Alias definiert. */
#fm-app .fm-progress {
	overflow: hidden;
	height: 0.5rem;
	border-radius: var(--fm-r-pill, 999px);
	background: var(--fm-muted-soft);
}

/* Zeile mit Warnhinweis (Stammdatenkonflikt in der Prüfmatrix) – war undefiniert,
   die betroffene Zeile war dadurch nicht von den übrigen zu unterscheiden. */
#fm-app tr.fm-row-warning > td {
	background: var(--fm-warning-soft);
}

/* Aufklappbare Zeilenaktion (Prüfen-Panel je Feld). `fm-row-actions` ist nur in
   fm-notifications.css definiert – einer modulweit geladenen Fremddatei. */
#fm-app .fm-row-actions {
	position: relative;
}

#fm-app .fm-row-actions > summary {
	cursor: pointer;
	list-style: none;
}

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

#fm-app .fm-row-actions-body {
	display: grid;
	gap: var(--fm-s-3);
	min-width: 16rem;
	margin-top: var(--fm-s-2);
	padding: var(--fm-s-3);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface-2);
}

/* Kleinstes Abzeichen (Abweichungsmarke). Bislang nur in fm-ocr.css. */
#fm-app .fm-badge-xs {
	padding: 0 var(--fm-s-1);
	font-size: var(--fm-fs-2xs);
	line-height: 1.4;
}

#fm-app .fm-textarea-sm {
	min-height: 4rem;
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-text-success {
	color: var(--fm-success-text, #15803d);
}

/* Schrittliste des Vertragsassistenten (Kundenportal). `fm-wizard-steps` und
   `fm-wizard-conflict` waren undefiniert – die Schritte standen als nummerierte
   Aufzählung untereinander, der Konflikthinweis ohne Abgrenzung. */
#fm-app .fm-wizard-steps > ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-s-2) var(--fm-s-4);
	margin: var(--fm-s-3) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: fm-step;
}

#fm-app .fm-wizard-steps > ol > li {
	display: flex;
	align-items: center;
	gap: var(--fm-s-1);
	counter-increment: fm-step;
	border: 0;
	padding: 0;
}

#fm-app .fm-wizard-steps > ol > li::before {
	content: counter(fm-step) ".";
	color: var(--fm-muted-fg);
	font-variant-numeric: tabular-nums;
}

#fm-app .fm-wizard-conflict {
	margin-top: var(--fm-s-3);
}

@media print {
	#fm-app .fm-print-document {
		border: 0;
		box-shadow: none;
		break-inside: avoid;
	}
}

/* --- Runde 48 (purchasing: Dashboard, Artikelliste) -------------------- */

/* `fm-detail-links` ist die Aufzählung für verlinkte Kurzlisten (Top-Lieferanten,
   Warnungen, zugeordnete Belege). Sie steht in acht Templates des Einkaufsmoduls
   und in einer Frontend-Klasse, war aber NIRGENDS definiert: die Einträge wurden
   als gewöhnliche Aufzählung mit Punkten und Browser-Einzug gerendert, das
   Betragsabzeichen klebte am Text. Jetzt eine abgesetzte Liste ohne Marker mit
   Trennlinien und rechts stehendem Zusatz. */
#fm-app .fm-detail-links {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

#fm-app .fm-detail-links > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fm-s-3);
	padding: var(--fm-s-2) 0;
	border-bottom: 1px solid var(--fm-stroke-soft);
}

#fm-app .fm-detail-links > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

#fm-app .fm-detail-links > li:first-child {
	padding-top: 0;
}

/* Ein Eintrag, der komplett verlinkt ist (Warnungen), soll die Zeile füllen. */
#fm-app .fm-detail-links > li > a {
	display: flex;
	align-items: baseline;
	gap: var(--fm-s-2);
	flex: 1 1 auto;
	text-decoration: none;
}

#fm-app .fm-detail-links > li > a:hover,
#fm-app .fm-detail-links > li > a:focus-visible {
	text-decoration: underline;
}

/* --- Runde 79 (mail-center: Postfachformular) --------------------------- */

/* `fm-card-footer` ist die abgesetzte Aktionsleiste am Fuß einer Karte – das
   Gegenstück zu `fm-card-header`. Sie steht in vier Templates der
   Kommunikationszentrale (account-form zweimal, settings zweimal, rule-form), war
   aber nirgends definiert: Abbrechen und Speichern klebten ohne Trennlinie und ohne
   Innenabstand direkt am letzten Formularfeld. */
#fm-app .fm-card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fm-s-2);
	padding: var(--fm-s-4) var(--fm-s-5);
	border-top: 1px solid var(--fm-stroke-soft);
	background: var(--fm-surface-sunken, transparent);
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

/* Ein erklärender Text in der Fußleiste steht links, die Knöpfe bleiben rechts. */
#fm-app .fm-card-footer > .fm-card-footer-note {
	margin: 0;
	margin-right: auto;
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
}

/* `fm-mt-4` ergänzt die in Runde 24 nachgezogene Abstandsreihe (fm-mt, -1, -2). */
#fm-app .fm-mt-4 {
	margin-top: var(--fm-s-5);
}

/* --- Runde 82 (mail-center: Vorlagen) ---------------------------------- */

/* `fm-label` ist die Feldbeschriftung der Kommunikationszentrale – 24 Vorkommen in
   NEUN Templates, darunter die drei geteilten Komponenten `mail-compose.php`,
   `mail-template-insert.php` und `mail-signature-select.php`. Nirgends definiert:
   die Beschriftungen standen als gewöhnlicher Fließtext ohne Fettung, Zeilenumbruch
   und Abstand zum Feld – im Verfassen-Dialog liefen „An", „CC", „BCC", „Betreff"
   und „Nachricht" damit optisch mit ihren Eingabefeldern zusammen.
   Gleiche Werte wie die Beschriftung in `.fm-field > label` der Basisschicht. */
#fm-app .fm-label {
	display: block;
	margin-bottom: var(--fm-s-1);
	color: var(--fm-fg);
	font-weight: 600;
	font-size: var(--fm-fs-sm);
	line-height: 1.4;
}

/* `fm-checkbox` ist die Kontrollkästchen-Zeile derselben Templates (Vorlagen- und
   Signaturformular) und war ebenfalls undefiniert: Kästchen und Text standen ohne
   Abstand und ohne gemeinsame Grundlinie. Entspricht `fm-choice`. */
#fm-app .fm-checkbox {
	display: inline-flex;
	align-items: baseline;
	gap: var(--fm-s-2);
	cursor: pointer;
}

#fm-app .fm-checkbox > input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

/* `fm-empty` ist der schlanke Leerzustand innerhalb einer Karte (Vorlagen- und
   Signaturliste) – im Unterschied zu `fm-empty-state`, das eine ganze Karte füllt.
   War undefiniert; der Satz klebte ohne Innenabstand am Kartenrand. */
#fm-app .fm-empty {
	margin: 0;
	padding: var(--fm-s-5);
	color: var(--fm-muted-fg);
	text-align: center;
}

/* --- Runde 85 (mail-center: Adressbuch, Kontext-Mailliste) -------------- */

/* Gegenstück zu `fm-mt-4` (Runde 79); in der Kontext-Mailliste wird der
   Abstand unter der Ansprechpartner-Filterzeile gebraucht. War undefiniert. */
#fm-app .fm-mb-4 {
	margin-bottom: var(--fm-s-5);
}

/* --- Runde 87 (mail-center: Nachrichten-Reader) ------------------------- */

/* `fm-actions-sticky` war undefiniert und ist in Runde 37 als offene Frage vermerkt
   worden (Zeiterfassung, mobile Erfassung). Mit dem Nachrichten-Reader steht jetzt
   ein zweiter Fall fest, in dem die Klasse eindeutig gebraucht wird: die
   Massenauswahl-Leiste gehört über eine Liste mit bis zu 50 Nachrichten und muss
   sichtbar bleiben, während man Häkchen setzt — sonst scrollt man nach jeder
   Auswahl wieder nach oben. Deshalb hier definiert.

   `position: sticky` haftet am oberen Rand des Rollbereichs; der Wert bleibt
   bewusst klein, damit die Leiste im mehrspaltigen Reader nicht über den
   Spaltenkopf rutscht. Beim Drucken wird nichts geklebt. */
#fm-app .fm-actions-sticky {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
	margin-bottom: var(--fm-s-3);
	padding: var(--fm-s-3) var(--fm-s-4);
	border: 1px solid var(--fm-stroke-soft);
	border-radius: var(--fm-r-md);
	background: var(--fm-surface);
	box-shadow: var(--fm-e-1);
}

@media print {
	#fm-app .fm-actions-sticky {
		position: static;
		box-shadow: none;
	}
}

/* --- Runde 91 (forms: Ausfüllen, schreibgeschützte Felder) -------------- */

/* `fm-readonly-field` mit `fm-readonly-label` und `fm-readonly-value` ist die
   schreibgeschützte Darstellung eines ausgefüllten Feldes. Sie steckt in
   `forms/templates/field-readonly.php` und damit in JEDEM Feld der Detail- und der
   Druckansicht — war aber nirgends definiert: Beschriftung und Wert liefen als
   gewöhnlicher Text ineinander („Zählerstand 1420" statt Beschriftung über Wert).
   Bei einer Checkliste mit 30 Feldern wird daraus ein Textblock ohne Struktur, und
   im Ausdruck ist nicht erkennbar, was Frage und was Antwort ist. */
#fm-app .fm-readonly-field {
	display: flex;
	flex-direction: column;
	gap: var(--fm-s-1);
	padding: var(--fm-s-2) 0;
	border-bottom: 1px solid var(--fm-stroke-soft);
	break-inside: avoid;
}

#fm-app .fm-readonly-field:last-child {
	border-bottom: 0;
}

#fm-app .fm-readonly-label {
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
	line-height: 1.4;
}

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

/* Im Ausdruck bleibt die Trennlinie, aber ohne Farbfläche. */
@media print {
	#fm-app .fm-readonly-field {
		border-bottom-color: #cbd5e1;
	}
}

/* --- Runde 49 (purchasing: Artikeldetail, Artikelformular) ------------- */

/* `fm-detail-list-inline` ist der waagerechte Kennzahlenstreifen (Bestand,
   Verfügbar, Reserviert, Bestellt) – eine Definitionsliste, die NICHT als
   Label/Wert-Paare untereinander, sondern als Reihe nebeneinander stehen soll.
   Die Klasse steht in acht Templates des Einkaufsmoduls (Artikel-, Bestell-,
   Wareneingangs-, Bedarfs-, Lager-, Lieferanten- und Rechnungsdetail), war aber
   NIRGENDS definiert: die vier Kennzahlen erschienen als achtzeilige Liste,
   sodass „Gesamtbestand 120 / Verfügbar 90 / Reserviert 30 / Bestellt 50" acht
   Zeilen Höhe brauchte und der Vergleich verloren ging. Jetzt eine Reihe:
   je Kennzahl das Label klein darüber, der Wert darunter. Umgesetzt ohne
   Zusatz-Markup – die `dt`/`dd`-Folge bleibt, wie die Templates sie schreiben. */
#fm-app .fm-detail-list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-s-2) var(--fm-s-6);
	align-items: baseline;
	grid-template-columns: none;
}

#fm-app .fm-detail-list-inline > dt {
	flex: 0 0 auto;
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
}

/* Der Wert hängt direkt am Label; der große Spaltenabstand trennt die Paare. */
#fm-app .fm-detail-list-inline > dd {
	flex: 0 0 auto;
	margin: 0 0 0 calc(var(--fm-s-6) * -1 + var(--fm-s-2));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	#fm-app .fm-detail-list-inline {
		gap: var(--fm-s-1) var(--fm-s-4);
	}

	#fm-app .fm-detail-list-inline > dd {
		margin-left: calc(var(--fm-s-4) * -1 + var(--fm-s-2));
	}
}

/* --- Runde 54 (purchasing: Bestellliste, Bestelldetail) ---------------- */

/* `fm-detail-subtitle` ist die Zwischenüberschrift innerhalb einer Detailkarte
   (Lieferadresse, Notizen, „Material reservieren", „Vorschläge"). Sie steht in
   fünf Templates des Einkaufsmoduls – teils als <h4>, in `order-detail` als <p> –
   und war NIRGENDS definiert: als <h4> übernahm sie die Browser-Grundgröße samt
   großzügiger Eigenabstände, als <p> war sie von gewöhnlichem Fließtext gar nicht
   zu unterscheiden. Jetzt in beiden Fällen dieselbe kleine, kräftige
   Zwischenüberschrift. */
#fm-app .fm-detail-subtitle {
	margin: var(--fm-s-4) 0 var(--fm-s-1);
	color: var(--fm-fg);
	font-size: var(--fm-fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

#fm-app .fm-detail-subtitle:first-child {
	margin-top: 0;
}

/* `fm-small` – gedämpfter Kleintext unter einem Formular oder einer Karte.
   Einmal im Einkauf verwendet, nicht definiert. */
#fm-app .fm-small {
	font-size: var(--fm-fs-sm);
}

/* `fm-toolbar-inline` gruppiert in der Filterleiste mehrere Bedienelemente unter
   EINER Beschriftung – ein Datumsbereich („Bestelldatum" von/bis) oder ein
   Kontrollkästchen samt Text. Steht in vier Templates des Einkaufsmoduls und war
   nicht definiert: die Beschriftung und die zwei Datumsfelder liefen als
   Fließtext auseinander, ohne erkennbare Zusammengehörigkeit.

   ACHTUNG – die Templates werden zusätzlich umgebaut: ein <label> darf nur EIN
   Bedienelement beschriften. Wo hier zwei Datumsfelder in einem Label standen,
   tragen sie jetzt eigene Beschriftungen; `fm-toolbar-inline` bleibt für die
   Kontrollkästchen-Fälle und als Gruppenrahmen (fieldset) erhalten. */
#fm-app .fm-toolbar-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-s-2);
	margin: 0;
	border: 0;
	padding: 0;
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
}

#fm-app .fm-toolbar-inline > legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--fm-s-1);
	padding: 0;
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
}

/* Die Felder in der Gruppe behalten die normale Eingabegröße. */
#fm-app .fm-toolbar-inline .fm-input,
#fm-app .fm-toolbar-inline .fm-select {
	color: var(--fm-fg);
	font-size: var(--fm-fs-base);
}

/* --- Runde 56 (purchasing: Sammelbestellung, Bestellvorschläge) -------- */

/* `fm-table-check-col` ist die schmale Auswahlspalte einer Massenaktions-Tabelle
   (Häkchen je Zeile). Sie steht in mehreren Templates des Einkaufs und der
   Verträge, war aber nicht definiert: die Spalte nahm sich denselben Anteil wie
   eine Textspalte, sodass das Häkchen mittig in einer breiten leeren Fläche stand
   und die eigentlichen Daten zusammengedrückt wurden. Gegenstück zu
   `fm-table-actions-col` aus Runde 9. */
#fm-app .fm-table-check-col {
	width: 2.5rem;
	white-space: nowrap;
}

#fm-app .fm-table th.fm-table-check-col,
#fm-app .fm-table td.fm-table-check-col {
	padding-right: 0;
	text-align: center;
}

/* In der mobilen Kartenansicht steht das Häkchen als erste Zeile der Karte und
   braucht die Breitenbegrenzung nicht. */
@media (max-width: 782px) {
	#fm-app .fm-table-cards td.fm-table-check-col {
		width: auto;
		text-align: left;
	}
}

/* --- Runde 66 (purchasing: Materialbox) -------------------------------- */

/* `fm-detail-total` ist die abgesetzte Summenzeile am Ende eines Kartenabschnitts
   (Materialkosten, Rechnungskosten, Gesamtsumme). Steht in der Materialbox, die an
   Aufgaben-, Objekt-, Fahrzeug- und Gerätedetails angehängt wird, war aber nicht
   definiert: die Summen standen als gewöhnliche Absätze unmittelbar unter der
   Aufzählung, ohne Abgrenzung – und die Gesamtsumme sah aus wie ein weiterer
   Listeneintrag. Jetzt eine oben abgetrennte Zeile mit Zahlenausrichtung. */
#fm-app .fm-detail-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fm-s-2);
	margin: var(--fm-s-3) 0 0;
	border-top: 1px solid var(--fm-stroke-soft);
	padding-top: var(--fm-s-2);
	font-variant-numeric: tabular-nums;
}

/* Zwei aufeinanderfolgende Summenzeilen brauchen nur eine Trennlinie. */
#fm-app .fm-detail-total + .fm-detail-total {
	margin-top: var(--fm-s-1);
	border-top: 0;
	padding-top: 0;
}

/* --- Runde 129 (import-onboarding: LV-Review) --------------------------- */

/* `fm-inline-form-wrap` war nirgends definiert, wird aber dort gebraucht, wo ein
   Zeilenformular MEHR als einen Knopf enthält: die Zuordnungszeile des LV-Reviews
   (zwei Auswahlfelder, ein Textfeld, ein Knopf) und die Korrekturzeile stehen in der
   engsten Tabellenzelle der Anwendung. Ohne Regel steht das Formular als Flex-Zeile
   mit `nowrap` und schiebt die Tabelle waagerecht auf — im Browser gegengeprüft:
   ohne Regel eine Zeile und waagerechter Bildlauf, mit Regel vier Zeilen und kein
   Bildlauf. Auch in `profitability/data-quality.php` verwendet. */
#fm-app .fm-inline-form-wrap {
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fm-s-2);
	white-space: normal;
}

/* Die Felder darin sind Zeilenfelder: kein Blocksatz, keine Außenabstände. */
#fm-app .fm-inline-form-wrap > .fm-field {
	margin: 0;
	min-width: 8rem;
}

/* --- Runde 161 (banking-reconciliation: Regelformular) -------------------- */

/* Hinweisliste unter einer Feldgruppe. Das Regelformular erklärt drei Sonderfälle
   der Bedingungen (Bereich, wiederkehrend, IBAN); bisher standen sie als ein
   Fließtext-Hinweis mit Anführungszeichen in einem `fm-hint`. Als Liste sind sie
   einzeln erfassbar – sie sollen aber die Hinweisgröße behalten und nicht wie
   Inhalt der Karte aussehen.

   NUR dieser Block stammt aus dem Paket — er bleibt deshalb hier und wird beim
   nächsten Paketstand mitgeliefert. Die Paketfassung der Datei ist trotzdem nie
   als Ganzes zu kopieren: sie ist ein eigener kumulativer Stand und bringt die
   in Runde 125/132 bewusst abgelehnten Regeln (`fm-text-danger`,
   `fm-field-error`) wieder mit. Immer nur den neuen Block herausziehen. */
#fm-app .fm-list-hint {
	margin: var(--fm-s-2) 0 0;
	padding-left: var(--fm-s-4);
	color: var(--fm-muted-fg);
	font-size: var(--fm-fs-sm);
	line-height: 1.5;
	list-style: disc;
}

#fm-app .fm-list-hint > li + li {
	margin-top: var(--fm-s-1);
}

/* --- Runde 210 (ocr: Dokumenteneingang) --------------------------------- */

/* Eine ergänzende Angabe UNTER dem Hauptinhalt einer Tabellenzelle (im
   Dokumenteneingang die Fehlermeldung der Texterkennung, die vorher nur im
   `title` des Abzeichens stand). Ohne Regel stünde der Satz in derselben Zeile
   wie Dateiname und Abzeichen und würde die Zelle unlesbar breit machen. */
#fm-app .fm-cell-note {
	display: block;
	margin-top: var(--fm-s-1);
	font-size: var(--fm-fs-sm);
	line-height: 1.45;
}

/* --- Runde 213 (ocr: Dokumentdetail) ------------------------------------ */

/* `fm-table-keyvalue` steht in vier Tabellen des Dokumentdetails (Herkunft,
   Angaben zur Datei, KI-Vorschlag, Protokoll) und war nirgends definiert: die
   Beschriftungsspalte nahm sich denselben Platz wie der Wert, und `th`-Zellen
   sahen aus wie Datenzellen. Als Beschriftungsspalte gehört sie schmal, oben
   ausgerichtet und gedämpft. */
#fm-app .fm-table.fm-table-keyvalue th[scope="row"] {
	width: 32%;
	min-width: 10rem;
	vertical-align: top;
	color: var(--fm-muted-fg);
	font-weight: 500;
}

#fm-app .fm-table.fm-table-keyvalue td {
	vertical-align: top;
}

@media (max-width: 640px) {
	#fm-app .fm-table.fm-table-keyvalue th[scope="row"] {
		width: auto;
		min-width: 0;
	}
}

/* `fm-list-row` (Text links, Aktion rechts) wird im Dokumentdetail für die
   Regelvorschläge verwendet, war aber ausschließlich in `fm-calendar.css`
   definiert — einer Datei, die nur der Kalender lädt. Auf allen anderen Seiten
   standen Beschriftung und Knopf dadurch untereinander.

   ⚠️ Das Paket nennt die Regel „deckungsgleich" — das ist sie NICHT. Die
   Kalenderfassung setzt zusätzlich `padding: .75rem 0` und eine untere Linie
   (beides bleibt, wird hier nicht überschrieben), und ihr `gap: 1rem` wird von
   dieser Regel auf 0,75 rem gezogen, weil `#fm-app .fm-list-row` die höhere
   Spezifität hat. Betroffen ist genau eine Bestandsseite: `calendar/groups.php`. */
#fm-app .fm-list-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-s-3);
}

/* --- Runde 215 (control-center: Lizenz und Abrechnung) ------------------- */

/* `fm-badge-list` (Reihe von Zustandsabzeichen: freigeschaltete Module,
   gebuchte Erweiterungen) war nirgends definiert. Ohne Regel stehen die
   Abzeichen als Inline-Elemente ohne Abstand aneinander und brechen mitten in
   einem Modulnamen um. */
#fm-app .fm-badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-s-2);
	margin-top: var(--fm-s-2);
}