/* ═══════════════════════════════════════════════════════════════════════════════════
 * Bordmittel für ERPNext / Frappe
 * Ein Theme, kein Fork. Es überschreibt Variablen und, wo Variablen nicht hinreichen,
 * einzelne Stellen der Desk-Oberfläche. Keine Änderung an Frappe selbst.
 *
 * EINBINDEN
 *   1. Datei nach <ihre_app>/public/css/bordmittel_erpnext.css legen,
 *      den Ordner fonts/ daneben (die @font-face-Pfade sind relativ).
 *   2. In hooks.py:
 *        app_include_css = ["/assets/<ihre_app>/css/bordmittel_erpnext.css"]   # Desk
 *        web_include_css = ["/assets/<ihre_app>/css/bordmittel_erpnext.css"]   # Portal
 *   3. bench build --app <ihre_app> && bench clear-cache
 *   Ohne eigene App: Inhalt in Website Theme → „Custom CSS“ (dann Schriften über
 *   /files/ ablegen und die zwei @font-face-Pfade anpassen).
 *
 * DREI ENTSCHEIDUNGEN, DIE HIER GETROFFEN SIND
 *   • Mittelweg beim Aufbau: ERPNexts Struktur bleibt (Navbar oben, Sidebar links,
 *     Awesomebar). Bordmittel bringt die Farbe: dunkle Kopfzeile, beige Arbeitsfläche,
 *     weiße Karten ohne Rahmen.
 *   • Orbitron Regular für große Zahlen und Diagramme. Kennzahlen, Zählerwerte und die
 *     Beschriftung der Diagramme laufen in Orbitron; Tabellen, Listen, Formulare und
 *     Belegnummern bleiben Manrope mit tabular-nums — in einer Spalte steht „24“ neben
 *     „SO-2026-00144“, und gemischte Schriften flackern dort.
 *   • ERPNexts elf Statusfarben werden auf die vier Bordmittel-Zustände abgebildet:
 *     grün brauchbar, blau in Arbeit, rot im Weg, grau vorbei. Orange und Gelb werden
 *     rot getönt — Bordmittel hat kein Warngelb.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Manrope';
	src: url('fonts/Manrope-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
	font-family: 'Manrope';
	src: url('fonts/Manrope-latin-ext.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Orbitron';
	src: url('fonts/Orbitron-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ── 1. Die neun Farben und alles daraus Abgeleitete ──────────────────────────────
 * Es gibt keine zehnte Farbe. Fehlt ein Ton, wird er getönt, getieft oder aufgehellt
 * und bekommt hier einen Namen. Niemand erfindet unterwegs ein Hex. */
html:root {
	--bm-beige:        #DFD9C2;
	--bm-dark-grey:    #1F1F1F;
	--bm-beige-light:  #EAE7DB;
	--bm-blue:         #1E3E4C;
	--bm-red:          #E74620;
	--bm-green:        #3C644B;
	--bm-white:        #FFFFFF;
	--bm-grey-light:   #CACACA;
	--bm-grey-medium:  #5F5F5E;

	--bm-green-deep:   #2E4E3B;
	--bm-red-deep:     #B4310F;
	--bm-green-light:  #9CC0A9;
	--bm-blue-light:   #8FB6C7;
	--bm-red-light:    #F09A82;
	--bm-grey-on-dark: #8C8C8B;

	--bm-tint-green: rgba(60, 100, 75, 0.12);
	--bm-tint-blue:  rgba(30, 62, 76, 0.10);
	--bm-tint-red:   rgba(231, 70, 32, 0.12);
	--bm-tint-dark:  rgba(31, 31, 31, 0.08);

	/* Vier Papierstufen, ALLE aus dem Beige aufgehellt — nicht aus Weiss
	 * abgedunkelt. Der Unterschied ist der ganze Punkt: das alte #F7F5EF hatte
	 * gegen Reinweiss nur 1,090:1 Kontrast und war auf einem Schirm von Weiss
	 * nicht zu unterscheiden. Deshalb sah jedes Modul weiter weiss aus, obwohl
	 * die Variablen laengst umgebogen waren — Frappe fragte korrekt nach
	 * --card-bg, und --card-bg antwortete „fast weiss".
	 *
	 * Diese vier liegen bei 1,14 bis 1,27 gegen Weiss. Sie sehen aus wie helles
	 * Beige, weil sie helles Beige SIND: 60 / 45 / 30 / 15 Prozent Weiss im
	 * Firmenbeige #DFD9C2. Reinweiss steht in --bm-white und gehoert dem
	 * Druckformat. */
	--bm-paper-1: #F2F0E7;
	--bm-paper-2: #EDEADD;
	--bm-paper-3: #E9E4D4;
	--bm-paper-4: #E4DECA;

	/* Linien werden GETIEFT, nicht aufgehellt. Die Linienfarbe stand vorher auf
	 * --bm-paper-4 = #F4F2EC und war damit HELLER als jede Flaeche, auf der sie
	 * lag. Genau daraus wurden die hellen Striche quer durch alle Formulare.
	 * Eine Linie muss dunkler sein als ihr Grund, sonst ist sie keine Linie.
	 * 12 und 22 Prozent Dunkelgrau im Firmenbeige. */
	--bm-linie:       #C8C3AE;
	--bm-linie-stark: #B5B09E;

	/* Ordinale Skala: Fortschritt, Reifegrade, Deal-Phasen. Helligkeit trägt die
	 * Reihenfolge, Farbe das Ergebnis. */
	--bm-ramp-1: #B4C6CE;
	--bm-ramp-2: #97AFBA;
	--bm-ramp-3: #7A98A6;
	--bm-ramp-4: #5D8192;
	--bm-ramp-5: #3F6A7E;

	/* Die Kopfzeile ist dunkel — in jedem Schema. Sie ist Gerüst, nicht Dekor. */
	--bm-rail-bg:          #1F1F1F;
	--bm-rail-text:        #EAE7DB;
	--bm-rail-mute:        rgba(234, 231, 219, 0.55);
	--bm-rail-hover:       rgba(234, 231, 219, 0.10);
	--bm-rail-line:        rgba(234, 231, 219, 0.12);
	--bm-rail-active-bg:   #DFD9C2;
	--bm-rail-active-text: #1F1F1F;

	--bm-motion-hover: 120ms ease-out;
	--bm-motion-panel: 180ms ease-out;
	--bm-motion-enter: 220ms cubic-bezier(0.2, 0, 0.2, 1);

	/* Radien und der Verweis. Diese Datei muss ohne die Bordmittel-Token-Dateien
	 * vollständig sein — in der App wird nur sie geladen. */
	--bm-radius-chip:    12px;
	--bm-radius-control:  8px;
	--bm-radius-card:    12px;
	--bm-radius-panel:   14px;
	--bm-link: var(--bm-blue);
	/* SCHRIFTEN. Manrope traegt den Text, Orbitron Regular die Zahlen -- das ist
	 * die Hausregel: Zahlen sind Orbitron, ausser im Fliesstext und bei
	 * Datumsangaben. Abschnitt 42 setzt das um und zaehlt auf, was davon
	 * erfassbar ist.
	 *
	 * HIER STAND FRUEHER DAS GEGENTEIL. Der alte Kommentar begruendete, warum
	 * Zahlen NICHT in Orbitron laufen: die Null der Schrift ist durchgestrichen
	 * und es gibt keine Alternativglyphe. Diese Beobachtung ist nicht widerrufen,
	 * sie ist ueberstimmt -- es ist die Schrift des Hauses und die Entscheidung
	 * des Hauses. Wenn eine Kennzahl mit ,0,00' falsch aussieht, kommt es daher,
	 * und das Zurueckdrehen ist die eine Zeile --bm-font-numeric weiter unten.
	 *
	 * --bm-font-display haelt Orbitron fuer Ueberschriften bereit. Abschnitt 42
	 * setzt --bm-font-numeric spaeter auf Orbitron; hier steht der Rueckfall. */
	--bm-font-body:    'Manrope', sans-serif;
	--bm-font-numeric: 'Manrope', sans-serif;
	--bm-font-display: 'Orbitron', 'Manrope', sans-serif;
}

/* ── 2. Frappe-Variablen, hell ────────────────────────────────────────────────────
 * Der größte Teil des Themes steckt hier: Frappe zieht fast alle Flächen und Texte
 * aus diesen Namen. Was hier gesetzt ist, wirkt in Desk, Portal und Druckformat. */
html:root,
[data-theme='light'] {
	/* Grauleiter → Bordmittel-Neutrale. Frappe benutzt sie für Ränder, Chips,
	 * Hinterlegungen und Avatare; ohne diese Umlegung bleiben kalte Grautöne stehen. */
	--gray-50:  #FCFBF8;
	--gray-100: #F7F5EF;
	--gray-200: #EAE7DB;
	--gray-300: #DFD9C2;
	--gray-400: #CACACA;
	--gray-500: #A9A9A6;
	--gray-600: #5F5F5E;
	--gray-700: #4A4A49;
	--gray-800: #333332;
	--gray-900: #1F1F1F;

	/* Bunte Leitern: Frappe hat je Farbe 50…900. Bordmittel hat je Farbe eine.
	 * Die Abstufungen zeigen auf denselben Wert oder auf eine Tönung. */
	--blue-50:  rgba(30, 62, 76, 0.06);
	--blue-100: rgba(30, 62, 76, 0.10);
	--blue-200: #B4C6CE;
	--blue-300: #97AFBA;
	--blue-400: #5D8192;
	--blue-500: #1E3E4C;
	--blue-600: #1E3E4C;
	--blue-700: #17313C;
	--blue-800: #12262F;
	--blue-900: #0D1C22;

	--green-50:  rgba(60, 100, 75, 0.06);
	--green-100: rgba(60, 100, 75, 0.12);
	--green-200: #9CC0A9;
	--green-300: #7FA88C;
	--green-400: #578870;
	--green-500: #3C644B;
	--green-600: #3C644B;
	--green-700: #2E4E3B;
	--green-800: #253F2F;
	--green-900: #1C3024;

	--red-50:  rgba(231, 70, 32, 0.06);
	--red-100: rgba(231, 70, 32, 0.12);
	--red-200: #F09A82;
	--red-300: #EC7B5C;
	--red-400: #E95E3B;
	--red-500: #E74620;
	--red-600: #E74620;
	--red-700: #B4310F;
	--red-800: #90270C;
	--red-900: #6C1D09;

	/* Kein Warngelb. Orange und Gelb tragen Rot getönt — dieselbe Farbe wie der
	 * Fehler, weil beide dasselbe sagen: hier stimmt etwas nicht. */
	--yellow-50:  rgba(231, 70, 32, 0.06);
	--yellow-100: rgba(231, 70, 32, 0.12);
	--yellow-300: #F09A82;
	--yellow-500: #B4310F;
	--yellow-600: #B4310F;
	--yellow-700: #90270C;
	--orange-50:  rgba(231, 70, 32, 0.06);
	--orange-100: rgba(231, 70, 32, 0.12);
	--orange-300: #F09A82;
	--orange-500: #B4310F;
	--orange-600: #B4310F;
	--orange-700: #90270C;

	/* Violett, Rosa, Cyan, Türkis kommen in ERPNext als Zweitfarben vor. Bordmittel
	 * hat sie nicht — sie werden zu „in Arbeit“ (Blau) beziehungsweise Neutral. */
	--purple-50:  rgba(30, 62, 76, 0.06);
	--purple-100: rgba(30, 62, 76, 0.10);
	--purple-300: #97AFBA;
	--purple-500: #1E3E4C;
	--purple-600: #17313C;
	--pink-50:  rgba(30, 62, 76, 0.06);
	--pink-100: rgba(30, 62, 76, 0.10);
	--pink-300: #97AFBA;
	--pink-500: #1E3E4C;
	--pink-600: #17313C;
	--cyan-50:  rgba(30, 62, 76, 0.06);
	--cyan-100: rgba(30, 62, 76, 0.10);
	--cyan-300: #97AFBA;
	--cyan-500: #1E3E4C;
	--cyan-600: #17313C;
	--teal-100: rgba(60, 100, 75, 0.12);
	--teal-500: #3C644B;
	--teal-600: #2E4E3B;
	--dark-green-100: rgba(60, 100, 75, 0.12);
	--dark-green-500: #2E4E3B;

	/* Flächen. Die Arbeitsfläche ist beige, die Karten sind weiß — der
	 * Helligkeitsunterschied trägt sie, deshalb fällt der Rahmen weg (siehe 4.). */
	--bg-color:            var(--bm-beige-light);
	--fg-color:            var(--bm-paper-1);
	--fg-hover-color:      var(--bm-paper-3);
	--card-bg:             var(--bm-paper-1);
	--subtle-fg:           var(--bm-paper-3);
	--subtle-accent:       var(--bm-paper-3);
	--highlight-color:     var(--bm-paper-3);
	--control-bg:          var(--bm-paper-3);
	--control-bg-on-gray:  var(--bm-paper-1);
	--disabled-control-bg: var(--bm-paper-4);
	--modal-bg:            var(--bm-paper-1);
	--popover-bg:          var(--bm-paper-1);
	--toast-bg:            var(--bm-paper-1);
	--awesomebar-focus-bg: var(--bm-paper-1);
	--sidebar-select-color: var(--bm-beige);
	--code-block-bg:       var(--bm-paper-3);
	--fold-bg:             var(--bm-paper-3);
	--scrollbar-thumb-color: var(--bm-grey-light);
	--scrollbar-track-color: transparent;

	/* Schrift und Text */
	--text-color:          var(--bm-dark-grey);
	--heading-color:        var(--bm-dark-grey);
	--text-light:          var(--bm-grey-medium);
	--text-muted:          var(--bm-grey-medium);
	--text-on-light-gray:  var(--bm-dark-grey);
	--disabled-text-color: var(--bm-grey-medium);
	--invalid-fg:          var(--bm-red-deep);
	--icon-fill:           transparent;
	--icon-stroke:         currentColor;

	/* Linien. Zwei Stärken, mehr braucht es nicht. */
	--border-color:        var(--bm-beige-light);
	--dark-border-color:   var(--bm-grey-light);
	--table-border-color:  var(--bm-beige-light);
	--border-primary:      var(--bm-grey-light);

	/* Primäre Aktion: Dark Grey, nicht Blau. Blau ist in Bordmittel der Verweis. */
	--primary:       var(--bm-dark-grey);
	--primary-color: var(--bm-dark-grey);
	--primary-light: var(--bm-tint-dark);
	--btn-primary:   var(--bm-dark-grey);
	--text-on-primary: var(--bm-beige-light);
	--link-color:    var(--bm-blue);

	/* Zustandsflächen. Nur „im Weg“ ist voll gefüllt; alles andere ist getönt —
	 * eine Fläche bekommt nur, was die Arbeit blockiert. */
	--bg-green:      var(--bm-tint-green);   --text-on-green:      var(--bm-green-deep);
	--bg-blue:       var(--bm-tint-blue);    --text-on-blue:       var(--bm-blue);
	--bg-cyan:       var(--bm-tint-blue);    --text-on-cyan:       var(--bm-blue);
	--bg-purple:     var(--bm-tint-blue);    --text-on-purple:     var(--bm-blue);
	--bg-pink:       var(--bm-tint-blue);    --text-on-pink:       var(--bm-blue);
	--bg-red:        var(--bm-red);          --text-on-red:        var(--bm-white);
	--bg-orange:     var(--bm-tint-red);     --text-on-orange:     var(--bm-red-deep);
	--bg-yellow:     var(--bm-tint-red);     --text-on-yellow:     var(--bm-red-deep);
	--bg-gray:       var(--bm-beige-light);  --text-on-gray:       var(--bm-grey-medium);
	--bg-light-gray: var(--bm-paper-3);      --text-on-light-gray: var(--bm-grey-medium);
	--bg-dark-gray:  var(--bm-tint-dark);    --text-on-dark-gray:  var(--bm-dark-grey);
	--alert-text-danger:  var(--bm-red-deep);
	--alert-text-warning: var(--bm-red-deep);
	--alert-text-info:    var(--bm-blue);
	--alert-text-success: var(--bm-green-deep);
	--alert-bg-danger:  var(--bm-tint-red);
	--alert-bg-warning: var(--bm-tint-red);
	--alert-bg-info:    var(--bm-tint-blue);
	--alert-bg-success: var(--bm-tint-green);
	--diff-added:   var(--bm-tint-green);
	--diff-removed: var(--bm-tint-red);

	/* Avatare tragen keine Buntheit mehr — ein bunter Kreis neben schwarzem Text
	 * zieht die Aufmerksamkeit auf den Kreis, und der Kreis ist nie die Aussage. */
	--avatar-frame-bg:  var(--bm-beige);
	--blue-avatar-bg:   var(--bm-beige);   --blue-avatar-color:   var(--bm-dark-grey);
	--green-avatar-bg:  var(--bm-beige);   --green-avatar-color:  var(--bm-dark-grey);
	--red-avatar-bg:    var(--bm-beige);   --red-avatar-color:    var(--bm-dark-grey);
	--orange-avatar-bg: var(--bm-beige);   --orange-avatar-color: var(--bm-dark-grey);
	--purple-avatar-bg: var(--bm-beige);   --purple-avatar-color: var(--bm-dark-grey);
	--pink-avatar-bg:   var(--bm-beige);   --pink-avatar-color:   var(--bm-dark-grey);
	--cyan-avatar-bg:   var(--bm-beige);   --cyan-avatar-color:   var(--bm-dark-grey);
	--yellow-avatar-bg: var(--bm-beige);   --yellow-avatar-color: var(--bm-dark-grey);

	/* Datentabelle (frappe-datatable) */
	--dt-border-color:  var(--bm-beige-light);
	--dt-text-color:    var(--bm-dark-grey);
	--dt-text-light:    var(--bm-grey-medium);
	--dt-primary-color: var(--bm-blue);
	--dt-cell-bg:       var(--bm-paper-1);
	--dt-selection-highlight-color: var(--bm-tint-blue);
	--dt-focus-border-color: var(--bm-blue);
	--dt-toast-message-border: var(--bm-beige-light);

	/* Radien. Weiche Kanten — Bedienelemente 8, Karten 12, Panels 14. */
	--border-radius:      8px;
	--border-radius-sm:   6px;
	--border-radius-md:   8px;
	--border-radius-lg:   12px;
	--border-radius-xl:   14px;
	--border-radius-full: 999px;

	/* Schatten. Fast nichts, damit die Kante nicht ausfranst. */
	--shadow-base: 0 1px 2px rgba(31, 31, 31, 0.06);
	--shadow-sm:   0 1px 2px rgba(31, 31, 31, 0.06);
	--shadow-md:   0 1px 2px rgba(31, 31, 31, 0.06), 0 10px 28px -14px rgba(31, 31, 31, 0.18);
	--shadow-lg:   0 4px 20px rgba(31, 31, 31, 0.18);
	--drop-shadow: 0 1px 2px rgba(31, 31, 31, 0.06);
	--modal-shadow: 0 4px 20px rgba(31, 31, 31, 0.18);

	/* Schrift */
	--font-stack: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--text-xs:   11px;
	--text-sm:   12.5px;
	--text-base: 13.5px;
	--text-md:   15px;
	--text-lg:   17px;
	--text-xl:   21px;
	--text-2xl:  23px;
	--text-3xl:  27px;
	--text-4xl:  40px;
	--text-regular:  400;
	--text-medium:   500;
	--text-semibold: 600;
	--text-bold:     700;
	--navbar-height: 52px;
}

/* ── 3. Frappe-Variablen, dunkel ──────────────────────────────────────────────────
 * Nicht das gleiche Theme invertiert: das dunkle Schema hat eigene Flächenwerte, und
 * die Sekundärfarben werden aufgehellt, weil sie sonst auf #161616 verschwinden.
 * Rot bleibt Rot — es muss stechen. */
:root[data-theme='dark'] {
	/* GRAULEITER IN FRAPPES RICHTUNG, auch im Dunkeln: 50 ist der HELLSTE Ton,
	 * 900 der dunkelste -- in beiden Schemata. Frappe dreht die Leiter naemlich
	 * NICHT um; sein Dunkelblock zeigt nur die semantischen Namen auf das andere
	 * Ende: --text-color und --text-neutral auf var(--gray-50), --icon-stroke auf
	 * var(--gray-300), --btn-default-bg auf var(--gray-800).
	 *
	 * Hier stand vorher die umgekehrte Leiter. Damit lasen 110 Variablen, die
	 * Frappe im Dunkeln umzeigt, das falsche Ende: --text-neutral wurde #1B1B1B
	 * (der aktive Formularreiter war unsichtbar), --icon-stroke wurde #333332
	 * (Zeichen in Aufklappmenues unsichtbar), --btn-default-bg wurde beige.
	 * Eine Entscheidung, 110 Folgefehler. */
	--gray-50:  #EAE7DB;
	--gray-100: #DFD9C2;
	--gray-200: #CACACA;
	--gray-300: #A9A5A0;
	--gray-400: #8C8C8B;
	--gray-500: #6E6E6D;
	--gray-600: #545453;
	--gray-700: #3A3A39;
	--gray-800: #2A2A2A;
	--gray-900: #1B1B1B;

	/* Frappe zeigt --placeholder-color im Dunkeln auf var(--gray-700). Mit der
	 * richtigen Leiter ist das #3A3A39 und damit zu dunkel fuer ein Eingabefeld.
	 * Ein Platzhalter ist Text und braucht Lesbarkeit. */
	--placeholder-color: #8C8C8B;

	--blue-100: rgba(126, 169, 189, 0.16);
	--blue-300: #8FB6C7;
	--blue-500: #8FB6C7;
	--blue-600: #B4C6CE;
	--green-100: rgba(127, 168, 140, 0.18);
	--green-300: #9CC0A9;
	--green-500: #9CC0A9;
	--green-600: #B7D2C0;
	--red-100: rgba(231, 70, 32, 0.20);
	--red-300: #F09A82;
	--red-500: #E74620;
	--red-600: #F09A82;
	--yellow-100: rgba(231, 70, 32, 0.20);
	--yellow-500: #F09A82;
	--orange-100: rgba(231, 70, 32, 0.20);
	--orange-500: #F09A82;
	--purple-100: rgba(126, 169, 189, 0.16);
	--purple-500: #8FB6C7;
	--pink-100: rgba(126, 169, 189, 0.16);
	--pink-500: #8FB6C7;
	--cyan-100: rgba(126, 169, 189, 0.16);
	--cyan-500: #8FB6C7;

	--bg-color:            #161616;
	--fg-color:            #232323;
	--fg-hover-color:      #2C2C2C;
	--card-bg:             #232323;
	--subtle-fg:           #1B1B1B;
	--subtle-accent:       #1B1B1B;
	--highlight-color:     #2C2C2C;
	--control-bg:          #1B1B1B;
	--control-bg-on-gray:  #282828;
	--disabled-control-bg: #1B1B1B;
	--modal-bg:            #232323;
	--popover-bg:          #282828;
	--toast-bg:            #282828;
	--awesomebar-focus-bg: #282828;
	--sidebar-select-color: rgba(223, 217, 194, 0.16);
	--code-block-bg:       #1B1B1B;
	--fold-bg:             #1B1B1B;
	--scrollbar-thumb-color: rgba(234, 231, 219, 0.26);

	--text-color:          var(--bm-beige-light);
	--heading-color:       var(--bm-beige-light);
	--text-light:          var(--bm-grey-on-dark);
	--text-muted:          var(--bm-grey-on-dark);
	--disabled-text-color: var(--bm-grey-on-dark);
	--invalid-fg:          var(--bm-red-light);

	--border-color:       rgba(234, 231, 219, 0.14);
	--dark-border-color:  rgba(234, 231, 219, 0.26);
	--table-border-color: rgba(234, 231, 219, 0.14);
	--border-primary:     rgba(234, 231, 219, 0.26);

	/* Auf dunklem Grund ist die primäre Aktion Beige — Dark Grey auf Dark Grey
	 * wäre kein Knopf. */
	--primary:         var(--bm-beige);
	--primary-color:   var(--bm-beige);
	--primary-light:   rgba(223, 217, 194, 0.16);
	--btn-primary:     var(--bm-beige);
	--text-on-primary: var(--bm-dark-grey);
	--link-color:      var(--bm-blue-light);

	--bg-green:      rgba(127, 168, 140, 0.18); --text-on-green:      var(--bm-green-light);
	--bg-blue:       rgba(126, 169, 189, 0.16); --text-on-blue:       var(--bm-blue-light);
	--bg-cyan:       rgba(126, 169, 189, 0.16); --text-on-cyan:       var(--bm-blue-light);
	--bg-purple:     rgba(126, 169, 189, 0.16); --text-on-purple:     var(--bm-blue-light);
	--bg-pink:       rgba(126, 169, 189, 0.16); --text-on-pink:       var(--bm-blue-light);
	--bg-red:        var(--bm-red);             --text-on-red:        var(--bm-white);
	--bg-orange:     rgba(231, 70, 32, 0.20);   --text-on-orange:     var(--bm-red-light);
	--bg-yellow:     rgba(231, 70, 32, 0.20);   --text-on-yellow:     var(--bm-red-light);
	--bg-gray:       rgba(234, 231, 219, 0.10); --text-on-gray:       var(--bm-grey-on-dark);
	--bg-light-gray: rgba(234, 231, 219, 0.10); --text-on-light-gray: var(--bm-grey-on-dark);
	--bg-dark-gray:  rgba(234, 231, 219, 0.14); --text-on-dark-gray:  var(--bm-beige-light);
	--alert-text-danger:  var(--bm-red-light);
	--alert-text-warning: var(--bm-red-light);
	--alert-text-info:    var(--bm-blue-light);
	--alert-text-success: var(--bm-green-light);
	--alert-bg-danger:  rgba(231, 70, 32, 0.20);
	--alert-bg-warning: rgba(231, 70, 32, 0.20);
	--alert-bg-info:    rgba(126, 169, 189, 0.16);
	--alert-bg-success: rgba(127, 168, 140, 0.18);

	--avatar-frame-bg:  rgba(223, 217, 194, 0.20);
	--blue-avatar-bg:   rgba(223, 217, 194, 0.20); --blue-avatar-color:   var(--bm-beige-light);
	--green-avatar-bg:  rgba(223, 217, 194, 0.20); --green-avatar-color:  var(--bm-beige-light);
	--red-avatar-bg:    rgba(223, 217, 194, 0.20); --red-avatar-color:    var(--bm-beige-light);
	--orange-avatar-bg: rgba(223, 217, 194, 0.20); --orange-avatar-color: var(--bm-beige-light);
	--purple-avatar-bg: rgba(223, 217, 194, 0.20); --purple-avatar-color: var(--bm-beige-light);

	--dt-border-color:  rgba(234, 231, 219, 0.14);
	--dt-text-color:    var(--bm-beige-light);
	--dt-text-light:    var(--bm-grey-on-dark);
	--dt-primary-color: var(--bm-blue-light);
	--dt-cell-bg:       #232323;
	--dt-selection-highlight-color: rgba(126, 169, 189, 0.16);

	--shadow-base: none;
	--shadow-sm:   none;
	--shadow-md:   0 10px 28px -14px rgba(0, 0, 0, 0.60);
	--shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.55);
	--drop-shadow: none;
	--modal-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);

	--bm-link: var(--bm-blue-light);

	/* Die Kopfzeile wird im dunklen Schema nicht heller — sie bleibt die Konstante. */
	--bm-rail-bg: #101010;
}

/* ── 4. Was Variablen nicht erreichen ────────────────────────────────────────────
 * Ab hier stehen einzelne Stellen. Jede hat einen Grund; wo der Grund entfällt, kann
 * die Regel weg. Kein !important außer dort, wo Frappe inline setzt. */

body,
.page-container,
.layout-main-section-wrapper,
.desk-page {
	font-family: var(--font-stack);
	background-color: var(--bg-color);
	color: var(--text-color);
	text-wrap: pretty;
}

/* Zahlen: gleiche Ziffernbreiten, ohne die Schrift zu wechseln. Beim Filtern springen
 * die Spalten sonst. */
input, select, textarea,
.list-row-col, .dt-cell, td, th,
.stat-value, .value, .currency,
.like-disabled-input, .control-value,
.text-right, .amount, .grid-row .col {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

/* Orbitron Regular: große Zahlen, sonst nichts. Siehe Abschnitt 47 --
 * hier standen einmal `.frappe-chart text` und `.chart-container .chart-label`,
 * und das ist JEDER Text im Diagramm, Kategorien und Legende inbegriffen.
 * Dort steht eine Zahl allein und trägt die Aussage. Tabellen, Listen und Formulare
 * bleiben Manrope — in einer Spalte steht „24“ neben „SO-2026-00144“. */
.number-widget-box .number,
.widget .number,
.dashboard-section .number,
.stat-value,
.report-summary .summary-item .summary-value,
.chart-container .y.axis .chart-label,
.chart-container .data-point-value,
.chart-container .legend-dataset-value,
.graph-svg-tip .value,
.bm-figure {
	font-family: var(--bm-font-numeric);
	font-weight: 400;
	letter-spacing: 0;
	/* Gleiche Ziffernbreite: In einer Kachelreihe sollen die Kommas
	 * untereinander stehen, und beim Hochzaehlen darf die Zahl nicht zappeln. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* — Kopfzeile: dunkel, in beiden Schemata — */
header.navbar,
.navbar.navbar-expand,
#navbar,
.navbar-default {
	background-color: var(--bm-rail-bg);
	border-bottom: 1px solid var(--bm-rail-line);
	box-shadow: none;
	color: var(--bm-rail-text);
	min-height: var(--navbar-height);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-nav > li > a,
.navbar .dropdown-toggle,
.navbar .navbar-icon,
.navbar #navbar-breadcrumbs a,
.navbar .breadcrumb-item a {
	color: var(--bm-rail-text);
	transition: color var(--bm-motion-hover), background-color var(--bm-motion-hover);
}
.navbar #navbar-breadcrumbs a,
.navbar .breadcrumb-item a {
	color: var(--bm-rail-mute);
}
.navbar #navbar-breadcrumbs a:hover,
.navbar .nav-link:hover,
.navbar .navbar-nav > li > a:hover {
	color: var(--bm-rail-text);
	background-color: var(--bm-rail-hover);
}
.navbar .navbar-brand img,
.navbar .app-logo,
.navbar .navbar-brand svg {
	/* logo.svg führt keine Füllfarbe und erbt Schwarz. Auf der dunklen Zeile muss es
	 * invertiert werden — nie schwarz stehen lassen. */
	filter: brightness(0) invert(1);
	height: 18px;
	width: auto;
}
/* Awesomebar: durchscheinend auf der dunklen Zeile, ohne Unschärfe. */
.navbar .search-bar .awesomplete input,
.navbar input.form-control,
#navbar-search {
	background-color: rgba(234, 231, 219, 0.10);
	border: 1px solid transparent;
	color: var(--bm-rail-text);
	border-radius: var(--border-radius-md);
	height: 32px;
	backdrop-filter: none;
}
.navbar .search-bar .awesomplete input::placeholder,
#navbar-search::placeholder {
	color: var(--bm-rail-mute);
}
.navbar .search-bar .awesomplete input:focus,
#navbar-search:focus {
	background-color: rgba(234, 231, 219, 0.16);
	border-color: rgba(234, 231, 219, 0.26);
	box-shadow: none;
	outline: none;
}
.navbar .avatar-frame,
.navbar .avatar .avatar-frame {
	background-color: rgba(234, 231, 219, 0.20);
	color: var(--bm-rail-text);
}

/* — Seitenkopf: steht, ohne Rahmenlinie unten — */
.page-head {
	background-color: var(--bg-color);
	border-bottom: none;
	box-shadow: none;
}
.page-head .title-text,
.page-title .title-text,
h1, h2, h3, h4, h5 {
	color: var(--heading-color);
	letter-spacing: -0.015em;
	font-weight: var(--text-bold);
}

/* — Karten: weiße Fläche auf beigem Grund, Radius 12, kein Rahmen —
 * Der Helligkeitsunterschied trägt sie; ein Rahmen dazu wäre eine Linie, die nichts
 * trennt. Rahmen gibt es nur, wo eine Karte auf weißem Grund liegt. */
.widget,
.frappe-card,
.form-section .section-body .frappe-control .control-input-wrapper,
.dashboard-section,
.new-timeline .timeline-item .timeline-content,
.comment-box,
.form-dashboard-section,
.list-sidebar .sidebar-section,
.number-card,
.shortcut-widget-box,
.links-widget-box,
.onboarding-widget-box,
.chart-widget,
.custom-block-widget {
	background-color: var(--card-bg);
	border: none;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-base);
}
.widget:hover,
.frappe-card:hover {
	box-shadow: var(--shadow-base);
	transform: none;
}
.widget .widget-head .widget-title,
.section-head,
.form-section .section-head,
.head-title {
	color: var(--heading-color);
	font-weight: var(--text-bold);
	font-size: var(--text-md);
	letter-spacing: -0.015em;
}
/* Rubriken: Großbuchstaben, gesperrt, Grey Medium. Ersetzt die Reihe gleich lauter
 * Überschriften — sechs in derselben Größe sind keine Hierarchie. */
.widget-group-head .widget-group-title,
.list-sidebar .sidebar-label,
.sidebar-label,
.form-sidebar .sidebar-label,
.uppercase,
.text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: var(--text-xs);
	font-weight: var(--text-semibold);
	color: var(--text-muted);
}

/* — Knöpfe — */
.btn {
	border-radius: var(--border-radius-md);
	font-weight: var(--text-semibold);
	font-size: var(--text-base);
	height: 34px;
	padding: 0 13px;
	box-shadow: none;
	transition: background-color var(--bm-motion-hover), color var(--bm-motion-hover),
		border-color var(--bm-motion-hover);
}
.btn-sm, .btn-xs {
	height: 30px;
	padding: 0 10px;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
	background-color: var(--primary);
	border: 1px solid var(--primary);
	color: var(--text-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: #333333;
	border-color: #333333;
	color: var(--text-on-primary);
	box-shadow: none;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-primary:focus {
	background-color: #EAE7DB;
	border-color: #EAE7DB;
}
.btn-default,
.btn-secondary {
	background-color: var(--card-bg);
	border: 1px solid var(--dark-border-color);
	color: var(--text-color);
}
.btn-default:hover,
.btn-secondary:hover {
	background-color: var(--fg-hover-color);
	border-color: var(--dark-border-color);
	color: var(--text-color);
}
.btn-danger {
	background-color: var(--bm-red);
	border-color: var(--bm-red);
	color: var(--bm-white);
}
.btn:disabled, .btn.disabled {
	opacity: 0.45;
	cursor: default;
}

/* — Zustandszeichen: die vier Farben —
 * Nur „im Weg“ ist voll gefüllt. ERPNext liefert elf Farbnamen; sie sind über die
 * --bg-*-Variablen oben schon zusammengeführt, hier bekommen sie die Form: echte
 * Pille (Radius = halbe Höhe), 24px, gesperrter Kleinsatz. */
.indicator-pill,
.indicator-pill-round {
	border-radius: var(--bm-radius-chip, 12px);
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	font-size: var(--text-xs);
	font-weight: var(--text-semibold);
	border: none;
	text-transform: none;
}
.indicator-pill.red, .indicator-pill-round.red {
	background-color: var(--bm-red);
	color: var(--bm-white);
}
.indicator-pill.red::before,
.indicator-pill.red .indicator-dot { background-color: var(--bm-white); }
.indicator-pill::before,
.indicator::before,
.indicator-right::after {
	width: 6px;
	height: 6px;
}
.indicator.green::before, .indicator-pill.green::before { background-color: var(--bm-green); }
.indicator.blue::before,  .indicator-pill.blue::before  { background-color: var(--bm-blue); }
.indicator.orange::before, .indicator-pill.orange::before,
.indicator.yellow::before, .indicator-pill.yellow::before { background-color: var(--bm-red-deep); }
.indicator.grey::before, .indicator.gray::before,
.indicator-pill.grey::before, .indicator-pill.gray::before { background-color: var(--bm-grey-light); }

/* — Listenansicht — */
.frappe-list .list-row-head,
.list-row-head {
	background-color: var(--subtle-fg);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-muted);
	font-weight: var(--text-semibold);
	font-size: var(--text-sm);
	border-radius: 0;
}
.frappe-list .list-row,
.list-row {
	border-bottom: 1px solid var(--border-color);
	transition: background-color var(--bm-motion-hover);
	font-size: var(--text-base);
}
.frappe-list .list-row:hover,
.list-row:hover {
	background-color: var(--fg-hover-color);
}
.list-subject a,
.list-row-col a,
a.text-color,
.ellipsis a {
	color: var(--text-color);
	font-weight: var(--text-semibold);
}
.list-subject a:hover,
.list-row-col a:hover {
	color: var(--bm-link);
	text-decoration: none;
}
.list-row-col .level-item.text-muted,
.list-row-col .text-muted {
	color: var(--text-muted);
}
/* Gewählte Zeile: Fläche Beige, Text Dark Grey, Gewicht 700. Nicht nur Farbe — das
 * Gewicht trägt mit, damit es ohne Farbwahrnehmung erkennbar bleibt. */
.list-row.selected,
.list-row-container.selected .list-row,
.sidebar-item.selected,
.standard-sidebar-item.selected,
.desk-sidebar-item.selected,
.sidebar-item-label.selected {
	background-color: var(--sidebar-select-color);
	color: var(--text-color);
	font-weight: var(--text-bold);
}

/* — Sidebar / Bereichswechsler — */
.layout-side-section .sidebar-item,
.desk-sidebar .desk-sidebar-item,
.standard-sidebar-item {
	border-radius: var(--border-radius-md);
	min-height: 36px;
	transition: background-color var(--bm-motion-hover);
	color: var(--text-color);
}
.layout-side-section .sidebar-item:hover,
.desk-sidebar .desk-sidebar-item:hover,
.standard-sidebar-item:hover {
	background-color: var(--fg-hover-color);
}

/* — Filter, Chips, Eingaben — */
.filter-button,
.sort-selector .btn,
.filter-selector .btn,
.tag-link,
.data-pill,
.btn-tag {
	border-radius: var(--bm-radius-chip, 12px);
	height: 28px;
	border: 1px solid var(--border-color);
	background-color: var(--card-bg);
	color: var(--text-color);
	font-size: var(--text-sm);
}
input.form-control,
select.form-control,
textarea.form-control,
.input-with-feedback,
.like-disabled-input,
.awesomplete input {
	background-color: var(--control-bg);
	border: 1px solid transparent;
	border-radius: var(--border-radius-md);
	color: var(--text-color);
	height: 34px;
	font-size: var(--text-base);
	box-shadow: none;
	transition: background-color var(--bm-motion-hover), border-color var(--bm-motion-hover);
}
textarea.form-control { height: auto; }
input.form-control:hover, select.form-control:hover {
	background-color: var(--fg-hover-color);
}
/* Fokus: 2px Blau, 2px Abstand. Nie ein Fremdring. */
:focus-visible,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.btn:focus-visible,
.list-row:focus-visible {
	outline: 2px solid var(--bm-link);
	outline-offset: 2px;
	border-color: transparent;
	box-shadow: none;
}
.control-label {
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: var(--text-semibold);
}

/* — Reiter — */
.form-tabs-list,
.nav-tabs {
	border-bottom: 1px solid var(--border-color);
}
.form-tabs .nav-link,
.nav-tabs .nav-link {
	color: var(--text-muted);
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	height: 40px;
	font-weight: var(--text-semibold);
	font-size: var(--text-base);
	background: transparent;
	transition: color var(--bm-motion-hover), border-color var(--bm-motion-hover);
}
.form-tabs .nav-link.active,
.nav-tabs .nav-link.active {
	color: var(--text-color);
	background: transparent;
	border-bottom-color: var(--bm-dark-grey);
	font-weight: var(--text-bold);
}
[data-theme='dark'] .form-tabs .nav-link.active,
[data-theme='dark'] .nav-tabs .nav-link.active {
	border-bottom-color: var(--bm-beige);
}

/* — Datentabelle und Berichte — */
.datatable .dt-header,
.datatable .dt-cell--header .dt-cell__content {
	background-color: var(--dt-header-cell-bg);
	color: var(--text-muted);
	font-weight: var(--text-semibold);
	border-color: var(--dt-border-color);
}
.datatable .dt-cell {
	border-color: var(--dt-border-color);
	background-color: var(--dt-cell-bg);
}
.datatable .dt-row:hover .dt-cell {
	background-color: var(--fg-hover-color);
}
.datatable .dt-cell--focus,
.datatable .dt-cell--highlight {
	background-color: var(--bm-tint-blue);
	border-color: var(--bm-link);
}
.datatable .dt-scrollable { background-color: var(--dt-cell-bg); }

/* — Dialoge und Menüs. Kein Weichzeichner, nirgends. — */
.modal-content {
	background-color: var(--modal-bg);
	border: none;
	border-radius: var(--border-radius-xl);
	box-shadow: var(--modal-shadow);
	animation-duration: 220ms;
}
.modal-header, .modal-footer {
	border-color: var(--border-color);
	background-color: transparent;
}
.modal-backdrop {
	background-color: rgba(31, 31, 31, 0.45);
	backdrop-filter: none;
}
.dropdown-menu,
.popover,
.awesomplete > ul {
	background-color: var(--popover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	backdrop-filter: none;
}
.dropdown-item:hover, .dropdown-item:focus,
.awesomplete > ul > li[aria-selected='true'] {
	background-color: var(--fg-hover-color);
	color: var(--text-color);
}

/* — Meldungen. „Alles andere ist echt“ gehört in den Text, nicht in die Farbe. — */
.alert, .form-message, .msgprint {
	border-radius: var(--border-radius-lg);
	border: none;
	font-size: var(--text-base);
}
.alert-warning, .form-message.orange, .form-message.yellow {
	background-color: var(--bm-tint-red);
	color: var(--bm-red-deep);
}
.alert-danger, .form-message.red {
	background-color: var(--bm-tint-red);
	color: var(--bm-red-deep);
}
.alert-info, .form-message.blue { background-color: var(--bm-tint-blue); color: var(--bm-blue); }
.alert-success, .form-message.green { background-color: var(--bm-tint-green); color: var(--bm-green-deep); }

/* — Fortschritt und ordinale Skalen: die Rampe, keine Palette — */
.progress { background-color: var(--subtle-fg); border-radius: 4px; height: 6px; }
.progress-bar { background-color: var(--bm-ramp-5); border-radius: 4px; }

/* — Anmeldung und Portal — */
.for-login .page-card,
.for-signup .page-card,
.login-content {
	background-color: var(--card-bg);
	border: none;
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-md);
}
body[data-path='login'], .for-login {
	background-color: var(--bg-color);
}
.website-navbar, .navbar.website-navbar {
	background-color: var(--bm-rail-bg);
	border-bottom: none;
}
.hero, .hero-content { background-color: var(--bg-color); }
a, .text-primary { color: var(--bm-link); }
a:hover { color: var(--bm-link); text-decoration: underline; }
[data-theme='dark'] a { color: var(--bm-blue-light); }

/* — Druckformat: die Seite ist Papier — */
.print-format,
.print-format-gutter .print-format {
	font-family: var(--font-stack);
	color: var(--bm-dark-grey);
	background-color: var(--bm-white);
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(31, 31, 31, 0.12), 0 16px 40px -16px rgba(31, 31, 31, 0.30);
}
.print-format table,
.print-format .table {
	border-color: var(--bm-beige-light);
	font-variant-numeric: tabular-nums;
}
.print-format th {
	background-color: var(--bm-beige-light);
	color: var(--bm-dark-grey);
	font-weight: 700;
	border-color: var(--bm-beige-light);
}
@media print {
	.print-format { box-shadow: none; border-radius: 0; }
}

/* — Bewegung: kurz. Es ist ein Arbeitswerkzeug, kein Auftritt. — */
.sidebar-item, .list-row, .btn, .widget, .nav-link, .dropdown-item {
	transition-duration: 120ms;
	transition-timing-function: ease-out;
}
.modal.fade .modal-dialog { transition: transform 220ms cubic-bezier(0.2, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 12. Frappe v16 — die zweite Variablenschicht („espresso")
 *
 * WARUM DIESER ABSCHNITT DER WICHTIGSTE IST: Alles darüber belegt Frappes
 * KLASSISCHE Variablen — --bg-color, --card-bg, --control-bg, --text-color und
 * 234 weitere. v16 hat darunter eine ZWEITE Schicht eingezogen:
 * scss/espresso/_colors.scss mit 293 Token in drei Familien — --surface-*
 * (Flächen), --ink-* (Schrift und Symbole), --outline-* (Linien). Die neuen
 * Oberflächen greifen auf diese Schicht zu, nicht auf die alte. Wer nur die
 * alte belegt, bekommt genau das Bild, das die Instanz am 25.08.2026 zeigte:
 * Arbeitsflächen beige, Formulare weiß, Hover hell auf hell, Suchtreffer
 * unlesbar.
 *
 * Deshalb wird hier abgebildet und nicht nachgebessert. Die neun Farben bleiben
 * die neun Farben; die Token bekommen ihre Bordmittel-Entsprechung.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

html:root {
	/* — Flächen — */
	--surface-white:    var(--bm-paper-1);
	--surface-modal:    var(--bm-paper-1);
	--surface-menu-bar: var(--bm-paper-3);
	--surface-gray-1:   var(--bm-paper-2);
	--surface-gray-2:   var(--bm-paper-3);
	--surface-gray-3:   var(--bm-paper-4);
	--surface-gray-4:   var(--bm-grey-light);
	--surface-gray-5:   var(--bm-grey-medium);
	--surface-gray-6:   var(--bm-dark-grey);
	--surface-gray-7:   var(--bm-dark-grey);

	/* Die vier Zustände, nicht elf. Gelb und Orange werden rot getönt —
	 * Bordmittel hat kein Warngelb, und das gilt auch für die neue Schicht. */
	--surface-green-1:  var(--bm-tint-green);
	--surface-green-2:  var(--bm-tint-green);
	--surface-green-3:  var(--bm-green);
	--surface-blue-1:   var(--bm-tint-blue);
	--surface-blue-2:   var(--bm-tint-blue);
	--surface-blue-3:   var(--bm-blue);
	--surface-red-1:    var(--bm-tint-red);
	--surface-red-2:    var(--bm-tint-red);
	--surface-red-3:    var(--bm-red);
	--surface-red-4:    var(--bm-red);
	--surface-red-5:    var(--bm-red-deep);
	--surface-red-6:    var(--bm-red-deep);
	--surface-red-7:    var(--bm-red-deep);
	--surface-amber-1:  var(--bm-tint-red);
	--surface-amber-2:  var(--bm-tint-red);
	--surface-amber-3:  var(--bm-red-deep);
	--surface-orange-1: var(--bm-tint-red);
	--surface-violet-1: var(--bm-tint-blue);
	--surface-cyan-1:   var(--bm-tint-blue);
	--surface-pink-1:   var(--bm-tint-blue);

	/* — Schrift und Symbole. 9 ist am dunkelsten, 1 am hellsten. — */
	--ink-gray-9: var(--bm-dark-grey);
	--ink-gray-8: var(--bm-dark-grey);
	--ink-gray-7: var(--bm-grey-medium);
	--ink-gray-6: var(--bm-grey-medium);
	--ink-gray-5: var(--bm-grey-medium);
	--ink-gray-4: var(--bm-grey-light);
	--ink-gray-3: var(--bm-grey-light);
	--ink-gray-2: var(--bm-paper-4);
	--ink-gray-1: var(--bm-paper-3);

	--ink-green-1: var(--bm-tint-green);
	--ink-green-2: var(--bm-green);
	--ink-green-3: var(--bm-green-deep);
	--ink-blue-1:  var(--bm-tint-blue);
	--ink-blue-2:  var(--bm-blue);
	--ink-blue-3:  var(--bm-blue);
	--ink-blue-link: var(--bm-blue);
	--ink-red-1:   var(--bm-tint-red);
	--ink-red-2:   var(--bm-red-light);
	--ink-red-3:   var(--bm-red);
	--ink-red-4:   var(--bm-red-deep);
	--ink-amber-1: var(--bm-tint-red);
	--ink-amber-2: var(--bm-red);
	--ink-amber-3: var(--bm-red-deep);
	--ink-cyan-1:  var(--bm-blue);
	--ink-pink-1:  var(--bm-blue);
	--ink-violet-1: var(--bm-blue);

	/* — Linien — */
	--outline-gray-1: var(--bm-linie);
	--outline-gray-2: var(--bm-linie);
	--outline-gray-3: var(--bm-grey-light);
	--outline-gray-4: var(--bm-grey-light);
	--outline-gray-5: var(--bm-linie);
	--outline-gray-modals: var(--bm-linie);
	--outline-white:  var(--bm-paper-1);
	--outline-green-1: var(--bm-green-light);
	--outline-green-2: var(--bm-green);
	--outline-blue-1:  var(--bm-blue-light);
	--outline-red-1:   var(--bm-red-light);
	--outline-red-2:   var(--bm-red);
	--outline-red-3:   var(--bm-red-deep);
	--outline-amber-1: var(--bm-red-light);
	--outline-amber-2: var(--bm-red);
	--outline-orange-1: var(--bm-red-light);

	--neutral:       var(--bm-paper-3);
	--neutral-white: var(--bm-paper-1);

	/* Die Schiene hat ihren eigenen Hover — siehe Abschnitt 13. */
	--sidebar-hover-color: var(--bm-tint-dark);
}

:root[data-theme="dark"] {
	--surface-white:    #171717;
	--surface-modal:    #171717;
	--surface-menu-bar: #101010;
	--surface-gray-1:   #1C1C1C;
	--surface-gray-2:   #222222;
	--surface-gray-3:   #2A2A2A;

	--ink-gray-9: var(--bm-beige-light);
	--ink-gray-8: var(--bm-beige-light);
	--ink-gray-7: var(--bm-grey-on-dark);
	--ink-gray-6: var(--bm-grey-on-dark);
	--ink-gray-5: var(--bm-grey-on-dark);
	--ink-gray-4: var(--bm-grey-medium);
	--ink-gray-3: var(--bm-grey-medium);
	--ink-gray-2: #2A2A2A;
	--ink-gray-1: #222222;

	--outline-gray-1: #2A2A2A;
	--outline-gray-2: #2A2A2A;
	--outline-gray-3: var(--bm-grey-medium);
	--outline-gray-5: #2A2A2A;
	--outline-gray-modals: #2A2A2A;

	--sidebar-hover-color: var(--bm-rail-hover);
}

/* ── 13. Die Schiene links ────────────────────────────────────────────────────────
 *
 * Bis v15 saß die Navigation oben (header.navbar) — darauf zielt Abschnitt 6,
 * und in v16 trifft das ins Leere: Anwendungswechsel, Suche, Meldungen und die
 * Arbeitsflächen stehen jetzt in .body-sidebar.
 *
 * DIE FESTLEGUNG, DIE SICH DAMIT UMKEHRT: Das README nannte die dunkle Schiene
 * links ausdrücklich als das, was NICHT gemacht wird — sie hätte „jedes
 * ERPNext-Update zu einem Umbau gemacht". Das Update ist gekommen und hat den
 * anderen Weg abgeräumt. Die dunkle Fläche ist das Gerüst der Gestaltung, kein
 * Dekor; sie wandert dorthin, wo v16 die Navigation hingelegt hat.
 */

.body-sidebar {
	/* Frappe malt die Schiene aus --surface-menu-bar und den Hover aus
	 * --sidebar-hover-color (sidebar.scss). Beide hier umbelegt, damit auch die
	 * Symbole mitgehen, die über text-ink-gray-7 eingefärbt werden. */
	--surface-menu-bar:     var(--bm-rail-bg);
	--sidebar-border-color: var(--bm-rail-line);
	--sidebar-hover-color:  var(--bm-rail-hover);
	--sidebar-active-color: var(--bm-rail-active-bg);

	--surface-white:  transparent;
	--surface-gray-1: var(--bm-rail-hover);
	--surface-gray-2: var(--bm-rail-hover);
	--surface-gray-3: var(--bm-rail-hover);

	/* Die Tintenleiter kehrt sich um: was auf Papier am dunkelsten war, ist auf
	 * der Schiene das hellste. */
	--ink-gray-9: var(--bm-rail-text);
	--ink-gray-8: var(--bm-rail-text);
	--ink-gray-7: var(--bm-rail-text);
	--ink-gray-6: var(--bm-rail-text);
	--ink-gray-5: var(--bm-rail-mute);
	--ink-gray-4: var(--bm-rail-mute);
	--ink-gray-3: var(--bm-rail-line);
	--ink-gray-2: var(--bm-rail-line);
	--ink-gray-1: var(--bm-rail-line);
	--outline-gray-1: var(--bm-rail-line);
	--outline-gray-2: var(--bm-rail-line);
	--outline-gray-3: var(--bm-rail-line);

	background: var(--bm-rail-bg);
	border-right: 1px solid var(--bm-rail-line);
	color: var(--bm-rail-text);
}

/* Die Fläche sitzt auf dem ANKER, nicht auf der Zeile: .item-anchor ist das 28
 * Pixel hohe Element, das Symbol und Beschriftung trägt (sidebar.scss). Auf
 * .standard-sidebar-item gelegt lief sie höher als die Nachbarzeilen und stand
 * sichtbar daneben. Radius 8px wie Frappes eigener Hover, sonst springt die
 * Ecke beim Überfahren. */
/* KEIN einseitiges Padding. Hier stand `padding-right: 6px` — nur rechts, also
 * saß die Beschriftung aus der Mitte und die Fläche lief rechts weiter als
 * links. Genau das war die „unförmige" Schaltfläche. Frappe gibt dem Anker
 * seine Maße selbst (height: 28px, Symbol mit 7px Innenabstand); wer hier
 * nachschiebt, verschiebt sie. */
.body-sidebar .standard-sidebar-item .item-anchor,
.body-sidebar .sidebar-user-button,
.body-sidebar .onboarding-sidebar {
	border-radius: 8px;
	color: var(--bm-rail-text);
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar) .item-anchor:hover,
.body-sidebar .sidebar-user-button:hover,
.body-sidebar .onboarding-sidebar:hover {
	background-color: var(--bm-rail-hover);
	/* DIE SCHRIFT MUSS MITGEHEN. Frappes Hover setzt nur die Fläche; die
	 * Beschriftung blieb auf --ink-gray-6 stehen und verschwand. */
	color: var(--bm-rail-text);
	--ink-gray-6: var(--bm-rail-text);
	--ink-gray-5: var(--bm-rail-text);
}

/* Die gewählte Arbeitsfläche: beige Fläche, dunkle Schrift — dieselbe Umkehr
 * wie bei den Zustandspillen.
 *
 * SIE SITZT AUF DER ZEILE, NICHT AUF DEM ANKER. sidebar.scss malt
 * `.active-sidebar` selbst: `background: var(--sidebar-active-color)` plus
 * `box-shadow: var(--shadow-sm)`, Radius 8px. Wer die Farbe stattdessen auf
 * `.item-anchor` legt, malt sie UNTER Frappes eigene Fläche — heraus kam ein
 * schlammiges Oliv aus beidem, und der Schatten lag auf der dunklen Schiene
 * obendrauf. Also dasselbe Element, nur andere Farbe, und der Schatten weg:
 * auf Dunkel trennt eine Fläche, kein Schlagschatten. */
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.selected {
	background: var(--bm-rail-active-bg);
	box-shadow: none;
	border-radius: 8px;
}
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor:hover,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label {
	background: transparent;
	color: var(--bm-rail-active-text);
	--ink-gray-9: var(--bm-rail-active-text);
	--ink-gray-8: var(--bm-rail-active-text);
	--ink-gray-7: var(--bm-rail-active-text);
	--ink-gray-6: var(--bm-rail-active-text);
	--ink-gray-5: var(--bm-rail-active-text);
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label { font-weight: 600; }

.body-sidebar .body-sidebar-bottom { border-top: 1px solid var(--bm-rail-line); padding-top: 8px; }
.body-sidebar .divider { border-top-color: var(--bm-rail-line); }

/* Die Meldungsliste klappt AUS der Schiene heraus und steht dann auf Papier —
 * dort gelten wieder die hellen Werte, nicht die der Schiene. */
.body-sidebar .dropdown-notifications .notifications-list {
	--ink-gray-9: var(--bm-dark-grey);
	--ink-gray-8: var(--bm-dark-grey);
	--ink-gray-7: var(--bm-grey-medium);
	--ink-gray-6: var(--bm-grey-medium);
	--ink-gray-5: var(--bm-grey-medium);
	--sidebar-hover-color: var(--bm-tint-dark);
	background-color: var(--bm-paper-1);
	color: var(--text-color);
}

/* Die Wortmarke steht auf Dunkel und erbt Schwarz — wie in der alten Kopfzeile. */
.body-sidebar img.app-logo,
.body-sidebar .app-switcher-menu img,
.body-sidebar .sidebar-header img { filter: brightness(0) invert(1); }

/* ── 14. Trefferhervorhebung ──────────────────────────────────────────────────────
 *
 * Frappe hebt den Suchtreffer mit <mark> hervor, und Bootstrap färbt das gelb.
 * Bordmittel hat kein Warngelb — ein gelber Balken behauptet eine Warnung, wo
 * nur ein Treffer steht.
 *
 * KEINE GEFÜLLTE FLÄCHE, UND DAS IST DER PUNKT. Frappe setzt <mark> um JEDEN
 * einzelnen Treffer-Buchstaben, nicht um das Wort: aus „Shift Attendance" wird
 * S·hift Atten·da·nce mit drei eigenen Kästchen. Jede Füllung — gelb, blau,
 * grau — zerhackt damit das Wort in Blöcke und macht die Liste unlesbar. Erst
 * getönt versucht, dann gefüllt; beides war falsch, weil das Problem nicht die
 * Farbe war, sondern die Fläche.
 *
 * Der Treffer trägt deshalb Gewicht und Farbe, keinen Kasten. Das Wort bleibt
 * ein Wort. */
mark,
.highlight,
.awesomplete mark,
.global-search-results mark,
.modal mark {
	background: none;
	background-color: transparent;
	color: var(--bm-blue);
	font-weight: 700;
	padding: 0;
	border-radius: 0;
}
[data-theme="dark"] mark,
[data-theme="dark"] .highlight,
[data-theme="dark"] .modal mark {
	color: var(--bm-blue-light);
}

/* ── 15. Das Formular steht AUF der Arbeitsfläche ─────────────────────────────────
 *
 * form.scss malt die Formularfläche aus --card-bg, und .layout-main-section ist
 * eine Karte ohne Rahmen und Schatten. Randlos über die volle Breite gelegt sah
 * das nicht nach weißer Karte auf beiger Fläche aus, sondern nach weißem
 * Hintergrund. Ein Radius gibt der Karte ihre Kante zurück — dieselbe Gestalt
 * wie die Kacheln auf den Arbeitsflächen.
 */
body[data-route^="Form"] .layout-main-section.frappe-card {
	border-radius: var(--bm-radius-m, 10px);
	margin-bottom: var(--margin-md, 15px);
}

/* ── 16. Nachgemessen an der ausgelieferten CSS ───────────────────────────────────
 *
 * Statt weiter Selektoren zu raten: `desk.bundle.css` (659 kB) ausgewertet.
 * Ergebnis — nur ZWOELF Variablen tragen dort Weiss, und zehn davon belegt das
 * Theme bereits. Das verbliebene Weiss kommt also nicht aus Variablen, sondern
 * aus einzelnen Regeln. Die hier sind die, die man wirklich sieht.
 */

/* Die Filterzeile ueber der Liste holt sich --card-bg, ist also eine weisse
 * Karte quer ueber die volle Breite. Sie ist aber keine Karte, sondern ein Teil
 * der Arbeitsflaeche - die Karten sind die Listenzeilen darunter. */
.page-form,
.page-head .page-form,
.filter-section .page-form {
	background-color: transparent;
	border-bottom: 1px solid var(--bm-linie);
}

/* Die Schiene: der Anwendungswechsel oben links.
 *
 * Er faerbt seinen Namen ueber die Blau-Token ein - und --bm-blue ist ein
 * TIEFES Blau, gedacht fuer Text auf Papier. Auf der dunklen Schiene stand
 * dunkelblau auf fast schwarz. Innerhalb der Schiene gilt deshalb das helle
 * Blau, und der Anwendungsname laeuft ohnehin in der Schienenfarbe. */
.body-sidebar {
	--ink-blue-link: var(--bm-blue-light);
	--ink-blue-2:    var(--bm-blue-light);
	--ink-blue-3:    var(--bm-blue-light);
}
.body-sidebar a,
.body-sidebar .text-blue,
.body-sidebar .sidebar-header,
.body-sidebar .sidebar-header * {
	color: var(--bm-rail-text);
}
.body-sidebar .sidebar-header .app-title,
.body-sidebar .app-switcher-name { color: var(--bm-rail-text); }

/* Der Hover war ein Kasten, kein Hinweis.
 *
 * 10 Prozent Beige auf #1F1F1F ergeben ein sichtbares Grau - im Screenshot ein
 * grauer Block neben der beigen aktiven Zeile, zwei konkurrierende Kaesten
 * untereinander. Ein Hover soll zeigen, wo der Zeiger steht, und nicht mit der
 * Auswahl um Aufmerksamkeit ringen. Also halbiert. */
.body-sidebar {
	--bm-rail-hover: rgba(234, 231, 219, 0.055);
}

/* ── 17. Was nach dem dritten Anlauf noch stand ───────────────────────────────────
 *
 * Vier Meldungen, vier Ursachen. Hier mit Nachdruck, weil Frappe an diesen
 * Stellen eigene Regeln mitbringt, die sonst gewinnen.
 */

/* SCHATTEN AUF DER SCHIENE. sidebar.scss legt `box-shadow: var(--shadow-sm)`
 * auf `.active-sidebar`, und `--shadow-sm` ist für Papier gerechnet: auf
 * #1F1F1F wird daraus ein schmutziger Rand um die beige Fläche. Auf Dunkel
 * trennt eine Fläche, kein Schlagschatten — deshalb hier ausnahmslos weg. */
.body-sidebar *,
.body-sidebar .standard-sidebar-item,
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .item-anchor {
	box-shadow: none !important;
}

/* DAS EINGABEFELD IN STRG+K. Der Suchdialog setzt sein Feld auf --control-bg
 * und die Schrift auf eine der Tintenstufen. Beides stand ungenannt, das Feld
 * war heller als der Dialog und die eingetippten Zeichen kaum sichtbar. Also
 * ausdrücklich: Papierfläche, dunkle Schrift, sichtbarer Platzhalter. */
.modal input[type="text"],
.modal input[type="search"],
.modal .form-control,
.modal .awesomplete input,
#navbar-search,
.search-dialog input,
input.search-input {
	background-color: var(--bm-paper-2) !important;
	color: var(--text-color) !important;
	border: 1px solid var(--bm-linie);
	caret-color: var(--bm-red);
}
.modal input::placeholder,
.search-dialog input::placeholder,
input.search-input::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/* WEISSE RAHMEN. Frappe zeichnet Ränder aus --border-color und den
 * outline-Token. Wo ein Rahmen weiß auf Beige steht, ist er kein Rahmen,
 * sondern eine helle Kante — er soll die Papierkante tragen, nicht Weiß. */
html:root {
	--border-color: var(--bm-linie);
	--dark-border-color: var(--bm-grey-light);
	--table-border-color: var(--bm-linie);
	--white: var(--bm-paper-1);
}
.card,
.frappe-card,
.list-group-item,
.page-form,
.form-section,
.modal-content,
.popover {
	border-color: var(--bm-linie);
}

/* ── 18. Kein Reinweiß mehr. Nirgends. ────────────────────────────────────────────
 *
 * Bis hierher war --card-bg auf --bm-paper-1 gesetzt, und das ist #FFFFFF.
 * Damit war JEDE Karte, JEDES Formular und JEDER Dialog reinweiß — die
 * Formularfläche holt sich das über
 * `.std-form-layout > .form-layout > .form-page`, nachgesehen im gebauten
 * desk.bundle.css. Beige war nur der Rand drumherum, und genau so sah es aus.
 *
 * Die Leiter rückt deshalb um eine Stufe warm:
 *
 *     Arbeitsfläche   --bm-beige      #DFD9C2   (vorher #EAE7DB)
 *     Karte, Dialog   --bm-paper-3    #F7F5EF   (vorher #FFFFFF)
 *
 * Der Abstand zwischen beiden bleibt, das Weiß ist weg. Reinweiß bleibt in der
 * Palette und für das Druckformat — auf Papier ist Papier weiß.
 */

html:root {
	--bg-color:      var(--bm-beige);
	--fg-color:      var(--bm-paper-3);
	--card-bg:       var(--bm-paper-3);
	--modal-bg:      var(--bm-paper-3);
	--popover-bg:    var(--bm-paper-3);
	--control-bg:    var(--bm-paper-2);
	--subtle-fg:     var(--bm-paper-4);

	--surface-white: var(--bm-paper-3);
	--surface-modal: var(--bm-paper-3);
	--surface-cards: var(--bm-paper-3);
}

/* Die Formularabschnitte tragen keine eigene Fläche — sie sitzen auf der
 * Formularkarte. Zwei Flächen übereinander ergeben nur eine Kante ohne Grund. */
.form-section,
.card-section,
.form-page > .form-section {
	background-color: transparent;
}

/* Der Einstiegskasten („Getting Started") ist eine eigene Vue-Insel mit eigenen
 * Klassen — .onb-*. Er kannte keine unserer Flächen und stand deshalb reinweiß
 * in der Ecke. */
/* Der Kasten selbst steht in Abschnitt 48 -- hier gewinnt er nicht, siehe dort. */
.onb-panel .body,
.onb-panel .header {
	background-color: var(--bm-paper-3);
	border-color: var(--bm-linie);
	color: var(--text-color);
}
.onb-progress-badge {
	/* War orange. Bordmittel hat kein Warngelb und kein Orange — ein
	 * Fortschritt von null Prozent ist nicht dringend, er ist unangefangen. */
	background-color: var(--bm-tint-blue);
	color: var(--bm-link);
}
.onb-skip { color: var(--text-muted); }
.onb-title-steps { color: var(--text-muted); }

/* Der Schatten der aktiven Zeile kommt aus --shadow-sm, und das ist für Papier
 * gerechnet. Auf der Schiene gibt es keinen. */
.body-sidebar {
	--shadow-sm: none;
	--shadow-base: none;
}

/* ── 19. Der Kopf der Schiene ─────────────────────────────────────────────────────
 *
 * Der Anwendungswechsel trägt ein FARBIGES Bild, kein Symbol aus der
 * Icon-Schrift: <img src=".../desktop_icons/solid/projects.svg">. Ein solches
 * Bild lässt sich nicht über die Textfarbe hellen, und auf #1F1F1F ging es
 * unter. Frappe setzt dort ausserdem `background-color: var()` — eine leere
 * Angabe, die nichts tut.
 *
 * Also bekommt das Bild eine helle Kachel unter sich, wie eine Marke auf einem
 * Briefbogen. Das ist die einzige Stelle der Schiene, die hell ist, und sie
 * darf es sein: dort steht, in welcher Anwendung man ist.
 */
/* HIER STAND EINE BEIGE KACHEL UNTER DEM ANWENDUNGSSYMBOL, UND SIE WAR FALSCH.
 *
 * Der Gedanke war, ein farbiges Bild auf Dunkel lesbar zu machen. Dabei habe
 * ich dem Bild `width: 100%; height: 100%` gegeben — sein Elternteil hat aber
 * keine feste Groesse, also ist es in sich zusammengefallen. Uebrig blieb die
 * leere Kachel: ein heller Fleck ohne Symbol darin.
 *
 * Das Symbol braucht die Kachel gar nicht. ERPNexts `solid`-Symbole bringen
 * ihre eigene farbige Flaeche mit (ein blaues Quadrat mit weissem Zeichen) und
 * stehen damit auf der dunklen Schiene fuer sich. Frappes eigenes
 * `background-color: var()` ist leer und damit durchsichtig - genau richtig.
 * Also nichts, ausser der Groesse, die Frappe ohnehin setzt. */
.body-sidebar .sidebar-header .header-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}
.body-sidebar .sidebar-header .header-title {
	color: var(--bm-rail-text);
	font-weight: 600;
}
.body-sidebar .sidebar-header .header-subtitle {
	color: var(--bm-rail-mute);
}
.body-sidebar .sidebar-header:hover {
	background-color: var(--bm-rail-hover);
	border-radius: 8px;
}

/* ── 20. Die Wortmarke gehört in die Schiene ──────────────────────────────────────
 *
 * Sie fehlte ganz. `Navbar Settings → App Logo` zeigt zwar auf logo.svg, aber
 * v16 stellt dort das Symbol der ANWENDUNG dar (invoicing.svg, projects.svg) —
 * die Wortmarke kam nirgends vor.
 *
 * KEINE MASKE MEHR: die Maske war ein Behelf, solange logo.svg keine Füllfarbe
 * führte. Es liegt jetzt eine beige Fassung im Bilderordner, also nimmt die
 * Schiene das Bild direkt.
 *
 * NUR IN DER AUSGEKLAPPTEN SCHIENE: Der Schriftzug ist 1922 zu 168 Einheiten
 * breit, also gut elfmal so breit wie hoch. In der eingeklappten Schiene (50px)
 * bliebe davon ein Strich. Dort steht ohnehin das Anwendungssymbol.
 */
.body-sidebar-container.expanded .body-sidebar-bottom::before {
	content: "";
	display: block;
	height: 15px;
	margin: 2px 10px 12px 10px;
	background: url("../img/BMLogo_Main_Beige.svg") no-repeat left center;
	background-size: contain;
	opacity: 0.75;
}
.body-sidebar-container.expanded .body-sidebar-bottom:hover::before { opacity: 1; }

/* ── 21. Der Kopf der Schiene ist kein Menüpunkt ──────────────────────────────────
 *
 * Frappe hängt `active-sidebar` auch an den Anwendungswechsel. Damit bekam er
 * die beige Fläche der gewählten Arbeitsfläche — und weil sein Titel auf die
 * helle Schienenfarbe gesetzt war, stand Beige auf Beige. Kein Kontrast.
 *
 * Er ist aber keine Auswahl, sondern eine Überschrift: er sagt, wo man ist,
 * nicht wohin man geklickt hat. Also keine Fläche.
 */
.body-sidebar .sidebar-header,
.body-sidebar .sidebar-header.active-sidebar,
.body-sidebar a.sidebar-header.active-sidebar {
	background: transparent !important;
	box-shadow: none !important;
}
.body-sidebar .sidebar-header .header-title { color: var(--bm-rail-text); font-weight: 600; }
.body-sidebar .sidebar-header .header-subtitle { color: var(--bm-rail-mute); }
.body-sidebar .sidebar-header:hover { background: var(--bm-rail-hover) !important; border-radius: 8px; }

/* ── 22. Der Punkt, der hineinragt ────────────────────────────────────────────────
 *
 * `.sidebar-toggle-btn` ist ein 24px-Kreis mit `right: -12px` — er sitzt
 * absichtlich halb ausserhalb der Schiene, damit man sie ein- und ausklappen
 * kann. Getragen hat er einen Rahmen und `box-shadow: 0 1px 4px rgba(0,0,0,.1)`,
 * beides für eine helle Leiste gedacht. Auf Dunkel wurde daraus ein
 * schmutziger Fleck, der in die Arbeitsfläche ragt.
 *
 * Er bleibt, wo Frappe ihn hinsetzt — aber als sauberer dunkler Knopf mit
 * beiger Kante, nicht als Schatten.
 */
.body-sidebar .sidebar-toggle-btn {
	background: var(--bm-rail-bg) !important;
	border: 1px solid var(--bm-rail-line) !important;
	box-shadow: none !important;
	color: var(--bm-rail-text);
}
.body-sidebar .sidebar-toggle-btn:hover {
	background: var(--bm-dark-grey) !important;
	border-color: var(--bm-rail-mute) !important;
}

/* ── 23. Abgeschnittene Unterlängen ───────────────────────────────────────────────
 *
 * „Getting Started" und „Invoicing" verloren das g. Ursache ist nicht die
 * Schriftgrösse, sondern die Kastenhöhe: `.sidebar-item-label` läuft durch
 * Frappes truncate()-Mischung (`overflow: hidden`), und der Einstiegspunkt
 * steht in einem <p>, dessen Zeilenhöhe die Unterlänge nicht mitzählt. Ein
 * abgeschnittenes g ist kein Gestaltungsmittel.
 */
.body-sidebar .sidebar-item-label,
.body-sidebar .onboarding-sidebar,
.body-sidebar .onboarding-sidebar span,
.body-sidebar .header-title,
.body-sidebar .header-subtitle,
#navbar-breadcrumbs a,
.breadcrumb-item,
.breadcrumb-item a,
.page-head .title-text {
	line-height: 1.5;
	padding-bottom: 1px;
}
.body-sidebar .onboarding-sidebar {
	display: flex;
	align-items: center;
	min-height: 28px;
}
.body-sidebar p:has(.onboarding-sidebar) { margin-bottom: 0; }

/* ── 24. Aufklappmenüs ────────────────────────────────────────────────────────────
 *
 * `.frappe-menu` ist das Kontextmenü hinter dem Anwendungswechsel — eigene
 * Klassen, eigene Fläche, und es kannte keine unserer Variablen. Es stand
 * reinweiss über der beigen Arbeitsfläche.
 */
.frappe-menu,
.frappe-menu.context-menu,
.dropdown-menu,
.frappe-menu .dropdown-menu-item > a {
	background-color: var(--bm-paper-3);
	border-color: var(--bm-linie);
	color: var(--text-color);
}
.frappe-menu .dropdown-menu-item > a:hover,
.dropdown-menu .dropdown-item:hover {
	background-color: var(--bm-tint-dark);
	color: var(--text-color);
}
.frappe-menu .menu-item-shortcut { color: var(--text-muted); }
.frappe-menu .dropdown-divider { border-top-color: var(--bm-linie); }

/* ── 25. Der Einstiegskasten, vollständig ─────────────────────────────────────────
 *
 * Beim ersten Anlauf waren nur `.onb-panel`, sein `.header` und sein `.body`
 * erfasst. Dazwischen liegen aber `.onb-collapsible`, die Schrittliste und die
 * einzelnen Schrittzeilen — die trugen weiter ihre eigene helle Fläche. Hier
 * jetzt alle, samt Rahmen in der Papierkante.
 */
.onb-panel,
.onb-panel .header,
.onb-panel .body,
.onb-collapsible,
.onb-collapsible--expanded,
.onb-title,
.onb-steps,
.onb-group,
.onb-step-left,
.onb-step-icon {
	background-color: var(--bm-paper-3);
	color: var(--text-color);
}
.onb-panel .onb-step-text { color: var(--text-color); }
.onb-panel .onb-title-steps,
.onb-panel .onb-skip,
.onb-panel .text-ink-gray-7 { color: var(--text-muted); }

/* ── 26. Der Einstiegskasten bekommt einen eigenen Ton ────────────────────────────
 *
 * Er ist weder Beleg noch Arbeitsfläche, sondern Anleitung — etwas, das
 * verschwindet, sobald man es nicht mehr braucht. Als weiße Karte auf beiger
 * Fläche sah er aus wie ein Dokument und stand mit den Kacheln in einer Reihe,
 * obwohl er nicht dazugehört.
 *
 * KEINE ZEHNTE FARBE: Bordmittel führt für „in Arbeit" Blau, und das ist genau
 * die Aussage dieses Kastens — angefangen, nicht fertig. Der Ton unten ist das
 * aufgehellte Bordmittel-Blau (#1E3E4C über Papier), und er bekommt hier einen
 * Namen, wie es Abschnitt 1 verlangt. Die Kante trägt das helle Blau, damit der
 * Kasten eine sichtbare Grenze hat und nicht in die Fläche ausfranst.
 */
html:root {
	--bm-paper-blue: #EDF1F3;
}
:root[data-theme="dark"] {
	--bm-paper-blue: #1A2A32;
}

.onb-panel {
	background-color: var(--bm-paper-blue);
	border: 1px solid var(--bm-blue-light);
	border-radius: var(--bm-radius-m, 10px);
	box-shadow: none;
	color: var(--text-color);
}

/* Die Innenteile tragen keine eigene Fläche mehr — sonst läge wieder Papier
 * über dem Ton, und der Kasten sähe aus wie zwei Kästen ineinander. */
.onb-panel .header,
.onb-panel .body,
.onb-panel .onb-collapsible,
.onb-panel .onb-collapsible--expanded,
.onb-panel .onb-title,
.onb-panel .onb-steps,
.onb-panel .onb-group,
.onb-panel .onb-step-left,
.onb-panel .onb-step-icon,
.onb-panel .onb-progress-row {
	background-color: transparent;
}

/* Die Kopfzeile des Kastens trennt der Abstand, nicht ein Strich. Hier stand
 * eine hellblaue Linie — sie sollte die zweite Fläche ersetzen, war aber nur
 * ein Strich quer durch einen kleinen Kasten. Bordmittel trennt mit Fläche und
 * Abstand, nicht mit Strichen. */

/* Das Fortschrittszeichen stand auf getöntem Blau — auf einem blau getönten
 * Kasten ist das keine Auszeichnung mehr. Gefüllt, damit es trägt. */
.onb-panel .onb-progress-badge {
	background-color: var(--bm-blue);
	color: var(--bm-beige-light);
	border-radius: 4px;
	font-weight: 600;
}

.onb-panel .onb-step-text,
.onb-panel .text-base { color: var(--text-color); }
.onb-panel .onb-title-steps,
.onb-panel .onb-skip,
.onb-panel .text-ink-gray-7 { color: var(--text-muted); }

/* Die Häkchen vor den Schritten laufen in Blau mit: ein unangefangener Schritt
 * ist nicht grau, er ist offen. */
.onb-panel .onb-step-icon svg { color: var(--bm-link); }

/* Überfahren: eine Spur tiefer, kein Kasten im Kasten. */
.onb-panel .onb-group:hover {
	background-color: var(--bm-tint-blue);
	border-radius: 6px;
}

/* ── 27. Was in den Einstellungsformularen noch ungedeckt war ─────────────────────
 *
 * Aus dem übergebenen DOM von `Accounts Settings` abgezählt: sieben Bauteile,
 * die das Theme bis hier nicht kannte. Sie tragen deshalb Frappes
 * Auslieferungswerte — also Weiß, Bootstrap-Grau und die Tintenleiter, die wir
 * sonst überall ersetzt haben.
 */

/* Die Kindtabellen. `.form-grid` ist der Rahmen, `.grid-heading-row` die
 * Kopfzeile darüber. Ohne Zutun steht dort eine weiße Tabelle mit grauen
 * Linien mitten auf einer Karte. */
.form-grid {
	border: 1px solid var(--bm-linie);
	border-radius: var(--bm-radius-s, 6px);
	background-color: transparent;
}
.form-grid .grid-heading-row {
	background-color: var(--bm-beige-light);
	border-bottom: 1px solid var(--bm-linie);
	color: var(--bm-dark-grey);
	font-weight: 600;
}
.form-grid .grid-row .data-row { border-bottom: 1px solid var(--bm-linie); }
.form-grid .grid-body .grid-row:hover { background-color: var(--bm-tint-dark); }
.form-grid .static-area { color: var(--text-color); }
.form-grid .static-area a { color: var(--bm-link); }

/* Die Erläuterung unter einem Feld. `text-extra-muted` war so blass, dass ein
 * Hinweis, der die halbe Einstellung erklärt, kaum zu lesen war — und die
 * Hinweise hier tragen Fachinhalt („Enabling this ensures each Purchase
 * Invoice has a unique value…"). Gedämpft ja, verschwunden nein. */
.help-box,
.text-extra-muted,
.form-column-description,
.grid-description {
	color: var(--bm-grey-medium);
}

/* Die Auskunftskarte hinter dem i-Zeichen. Sie schwebt über dem Formular und
 * kannte keine unserer Flächen. */
.info-card .frappe-card {
	background-color: var(--bm-paper-1);
	border: 1px solid var(--bm-linie);
	border-radius: var(--bm-radius-s, 6px);
	box-shadow: 0 2px 8px var(--bm-tint-dark);
	color: var(--text-color);
}
.info-card .frappe-card-description a { color: var(--bm-link); }
.info-trigger { color: var(--text-muted); }
.info-trigger:hover { color: var(--bm-link); }

/* Das Zeichen im Auswahlfeld und der Zuklapp-Pfeil einer Rubrik. Beide erben
 * sonst die Frappe-Tinte und stehen dann heller als die Schrift daneben. */
.select-icon svg,
.collapse-indicator svg {
	color: var(--text-muted);
}
.section-head.collapsible:hover .collapse-indicator svg { color: var(--text-color); }

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 28. Das fest verdrahtete Weiß — einmal zentral, nicht Modul für Modul
 *
 * Abschnitt 12 hat die VARIABLEN abgebildet. Daneben steht in Frappes gebauter
 * CSS aber Weiß, das in einzelnen Regeln festgeschrieben ist und keine Variable
 * kennt. Ausgezählt am `desk.bundle.css`: 127 Stellen, davon 109 `color: #fff`
 * — das ist Schrift auf farbigen Knöpfen und bleibt weiß. Übrig bleiben
 * **18 weiße Flächen**, und die sind hier vollständig aufgeführt.
 *
 * DIE SCHLIMMSTE WAR `.table td, .table th { background-color: #fff !important }`
 * — sie zwingt JEDE Tabellenzelle auf Weiß, mit !important, unabhängig vom
 * Modul. Deshalb sah es je nach Ansicht mal richtig, mal falsch aus: es hing
 * nicht am Modul, sondern daran, welche Bauteile eine Ansicht benutzt.
 *
 * EINE VARIABLE FÜR ALLE: `--bm-statt-weiss` ist der eine Ort, an dem sich das
 * ändern lässt. Wer den Ton nachziehen will, ändert hier eine Zeile und nicht
 * achtzehn Regeln.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

html:root {
	--bm-statt-weiss: var(--bm-paper-3);
	--bm-statt-weiss-linie: var(--bm-linie);
}
:root[data-theme="dark"] {
	--bm-statt-weiss: #232323;
	--bm-statt-weiss-linie: #2A2A2A;
}

/* — Flächen —
 *
 * OHNE `body`. Frappe setzt dort `background-color: #fff`, und es steht damit
 * in derselben Liste — aber `body` ist keine Karte, sondern die
 * ARBEITSFLÄCHE. Auf Papier gesetzt stand die Seite unter dem Raster hell und
 * der Rest beige. `--bg-color` regelt sie, und das tut Abschnitt 18. */
.card,
.list-group-item,
.list-group-item.disabled,
.list-group-item:disabled,
.page-link,
.page-item.disabled .page-link,
.popover-header,
.breadcrumb,
.img-thumbnail,
.datepicker,
.datepicker--pointer,
.ql-snow .ql-picker-options,
.ql-snow .ql-tooltip,
[data-page-route="Workspaces"] .codex-editor .ce-toolbar .ce-settings .cdx-settings-sidebar {
	background-color: var(--bm-statt-weiss);
}

/* Diese beiden tragen !important, also muss die Antwort es auch tragen.
 * `.table td/th` ist die Stelle, die jede Tabelle in jedem Modul weiß machte. */
.table td,
.table th {
	background-color: transparent !important;
}
.bg-white {
	background-color: var(--bm-statt-weiss) !important;
}
.border-white {
	border-color: var(--bm-statt-weiss-linie) !important;
}

/* Der aktive Reiter saß auf Weiß und schnitt sich seine untere Kante mit einem
 * weißen Strich frei — auf beiger Fläche wurde daraus ein heller Balken. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	background-color: transparent;
	border-color: var(--bm-statt-weiss-linie) var(--bm-statt-weiss-linie) transparent;
}

/* Der Farbwähler zeichnet seinen Ring in Weiß. */
.color-picker .color-selector:before,
.color-picker .hue-selector:before {
	border-color: var(--bm-statt-weiss) !important;
}

/* AUSDRÜCKLICH NICHT ANGEFASST: `.print-preview { background: white }`.
 * Auf Papier ist Papier weiß — das Druckformat behält sein Weiß. */

/* ── 29. Die aktive Zeile ─────────────────────────────────────────────────────────
 *
 * HIER STAND EINE ERKLAERUNG, DIE FALSCH WAR. Ich hatte vermutet, die Fläche
 * sitze wegen einer Verschachtelung schief, und daraufhin `width: 100%`,
 * `margin: 0` und ein eigenes Kastenmodell auf jeden Eintrag gelegt. Das
 * übergebene DOM zeigt: der Eintrag in `Organization` ist strukturell
 * identisch mit dem in `Projects` — dieselbe Klasse, derselbe Anker, kein
 * zusätzlicher Behälter. Es lag nie an der Verschachtelung.
 *
 * Der Unterschied ist die EINGEKLAPPTE Schiene: dort ist sie 50 Pixel breit
 * mit 8 Pixel Innenabstand, und ein erzwungenes `width: 100%` rechnet gegen
 * den falschen Kasten und läuft über den Rand.
 *
 * Frappe setzt die Maße selbst, in beiden Zuständen, und hat einen eigenen
 * Übergang dafür. Was hier bleibt, ist die FARBE — nicht die Geometrie. Das
 * ist die dritte Stelle heute, an der ein geratenes Maß mehr kaputt gemacht
 * hat als es geheilt hätte.
 */

/* ── 30. Die Wortmarke und der Grund darunter ─────────────────────────────────────
 *
 * `body` bekommt ausdrücklich die Arbeitsfläche. Frappes Auslieferungswert ist
 * Weiß, und weil Abschnitt 28 alle weißen Flächen auf Papier zieht, wäre sie
 * dort mit hineingeraten. Sie gehört aber zur Fläche, nicht zur Karte.
 */
body {
	background-color: var(--bg-color);
}

/* DIE WORTMARKE — jetzt ohne Trick.
 *
 * Hier stand `filter: brightness(0) invert(1)`, weil logo.svg keine Füllfarbe
 * führte und Schwarz erbte. Der Filter ist WEG. Es liegen jetzt drei echte
 * Fassungen derselben Zeichnung im Bilderordner, gleicher viewBox, nur die
 * Füllung wechselt:
 *
 *     BMLogo_Main.svg         fill #1F1F1F   für hellen Grund
 *     BMLogo_Main_Beige.svg   fill #DFD9C2   für dunklen Grund
 *     BMLogo_Main_White.svg   fill #FFFFFF   für farbigen Grund
 *
 * `logo.svg` IST jetzt die beige Fassung, weil `Navbar Settings → App Logo`
 * darauf zeigt und die Kopfleiste des Anwendungswechsels in jedem Schema
 * dunkel ist. Für Papier liegt `logo-dunkel.svg` daneben.
 *
 * WICHTIG, damit die drei älteren Filterregeln weiter oben (Abschnitte 8, 13
 * und die Navigationszeile) unsere eigene Zeichnung nicht mehr verfälschen:
 * ein Filter, der auf Beige angewandt wird, macht daraus Weiss. Fremde
 * Anwendungssymbole bleiben ausdrücklich in Ruhe — die kommen von ERPNext und
 * sind oft dunkle Strichzeichnungen, die auf der dunklen Schiene invertiert
 * werden müssen. Deshalb greift die Aufhebung nur auf unseren eigenen Pfad.
 */
.body-sidebar img[src*="bordmittel_theme"],
.navbar img[src*="bordmittel_theme"],
img[src*="bordmittel_theme/img/logo"] {
	filter: none;
	opacity: 1;
}

/* Ein Filter bleibt, und nur einer: Short_Logo-blanco.png ist reinweisse
 * Zeichnung (nachgemessen: Mittelwert 255,255,255 über 10 239 Bildpunkte).
 * Auf hellem Grund ist sie unsichtbar. Da sie ein Rasterbild ist, lässt sie
 * sich nicht umfärben — `invert(1)` macht aus Reinweiss zuverlässig
 * Reinschwarz, und das ist auf Papier lesbar. */
.print-format img[src$="bordmittel_theme/img/Short_Logo-blanco.png"],
.frappe-card img[src$="bordmittel_theme/img/Short_Logo-blanco.png"] {
	filter: invert(1);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 31. Der Rest, nach Zaehlung statt nach Gefuehl
 *
 * Vorgehen: die vier ausgelieferten Bundles (desk 659 KB, erpnext 52 KB,
 * hrms 6 KB, report 6 KB) wurden geparst und jede Deklaration geprueft, deren
 * Wert Weiss ist — in JEDER Schreibweise: #fff, #ffffff, white,
 * rgba(255,255,255,x), hsl(0,0%,100%). Ergebnis: 31 Variablen und 217 harte
 * Deklarationen. Von den harten sind 47 Leaflet, Plyr und Quill (Karte,
 * Videospieler, Texteditor) — die kommen in dieser Oberflaeche nicht vor.
 *
 * Danach ein zweiter Durchgang ueber die HELLIGKEIT statt ueber den Farbwert,
 * weil „wirkt weiss" nicht dasselbe ist wie „ist weiss". Der hat die eigentliche
 * Ursache gefunden, und sie stand in dieser Datei: siehe den Kommentar an der
 * Papierleiter oben.
 *
 * Hier stehen nur noch die Variablen, die nach dieser Zaehlung uebrig blieben:
 * benutzt, auf Weiss, und vom Theme bisher nicht gesetzt.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

html:root {
	/* Zeichen AUF Farbe bleiben reinweiss. Ein Haken in einem gefuellten
	 * Kaestchen und ein Ring um einen Punkt sind keine Flaechen — sie muessen
	 * gegen die Farbe darunter stehen, nicht gegen das Papier. Deshalb hier
	 * ausdruecklich --bm-white und nicht die Papierleiter. */
	--neutral-white: var(--bm-white);
	--white: var(--bm-white);

	/* Die Achsen eines Diagramms sind Linien. Frappe liefert #f4f5f6 — heller
	 * als jede Flaeche, auf der sie liegen. */
	--charts-axis-line-color: var(--bm-linie);

	/* Der Hinweis am Diagramm schwebt ueber der Karte, also eine Stufe heller
	 * als die Karte. Der Ring um den Datenpunkt liegt AUF der Karte, also
	 * genau die Kartenfarbe — sonst ist er ein heller Fleck. */
	--charts-tooltip-bg: var(--bm-paper-1);
	--charts-dataset-circle-stroke: var(--bm-paper-3);

	/* Bootstraps hellste Flaeche. */
	--light: var(--bm-paper-2);

	/* Die leere Kachel im Kanban beim Ueberfahren. */
	--kanban-new-card-hover-bg: var(--bm-paper-1);
}

:root[data-theme="dark"] {
	--charts-tooltip-bg: #2A2A2A;
	--charts-dataset-circle-stroke: #232323;
	--charts-axis-line-color: rgba(234, 231, 219, 0.14);
	--light: #232323;
	--kanban-new-card-hover-bg: #2A2A2A;
}

/* ── 32. Die Datentabelle: ein Name, den es nicht gibt ────────────────────────────
 *
 * Das Theme setzt weiter oben `--dt-header-bg`. Diese Variable existiert in
 * frappe-datatable NICHT. Nachgesehen in report.bundle.css: die Bibliothek
 * liest `--dt-header-cell-bg`, und ohne Zutun steht dort `#fff`. Deshalb blieb
 * die Kopfzeile jedes Berichts weiss, obwohl das Theme meinte, sie gesetzt zu
 * haben. Der falsche Name bleibt oben stehen — er schadet nicht — hier steht
 * der richtige.
 *
 * Ausserdem zwei Toene, die die Bibliothek fest verdrahtet mitbringt und die
 * bisher niemand angefasst hat: `--dt-light-bg` (#f5f7fa, kuehles Fastweiss)
 * und `--dt-light-yellow` (#fffce7). Bordmittel fuehrt kein Warngelb; die
 * Auswahl wird blau getoent wie ueberall sonst.
 */
html:root {
	--dt-cell-bg:        var(--bm-paper-3);
	--dt-header-cell-bg: var(--bm-paper-4);
	--dt-light-bg:       var(--bm-paper-2);
	--dt-light-yellow:   var(--bm-tint-blue);
	--dt-light-red:      var(--bm-red-light);
	--dt-border-color:   var(--bm-linie);
}
:root[data-theme="dark"] {
	--dt-cell-bg:        #232323;
	--dt-header-cell-bg: #1B1B1B;
	--dt-light-bg:       #2A2A2A;
	--dt-light-yellow:   rgba(126, 169, 189, 0.16);
	--dt-border-color:   rgba(234, 231, 219, 0.14);
}

/* ── 33. Die klassische Textfamilie fehlte auf der Schiene ────────────────────────
 *
 * Der Block `.body-sidebar` weiter oben biegt die espresso-Schicht um:
 * --ink-gray-1 bis -9, --surface-gray-*, --outline-gray-*. Was er NICHT
 * anfasst, ist Frappes klassische Familie — und die benutzt Frappe im Gerüst
 * genauso. Nachgerechnet gegen den Schienengrund #1F1F1F:
 *
 *     --text-color     #1F1F1F   1,00:1   unsichtbar
 *     --heading-color  #1F1F1F   1,00:1   unsichtbar
 *     --link-color     #1E3E4C   1,45:1   die blaue Schrift, die niemand liest
 *     --text-muted     #5F5F5E   2,58:1   zu dunkel
 *
 * Das war die gemeldete „blaue Schrift oben links" und der fehlende Kontrast
 * zwischen Schrift und Hintergrund. Bordmittel-Blau ist eine DUNKLE Farbe
 * (#1E3E4C) — auf der dunklen Schiene gehört das helle Blau hin, das die
 * Palette dafür führt: --bm-blue-light #8FB6C7 kommt auf 7,60:1.
 */
.body-sidebar,
.body-sidebar-container {
	--text-color:          var(--bm-rail-text);
	--heading-color:       var(--bm-rail-text);
	--text-light:          var(--bm-rail-mute);
	--text-muted:          var(--bm-rail-mute);
	--text-on-gray:        var(--bm-rail-text);
	--text-on-light-gray:  var(--bm-rail-mute);
	--link-color:          var(--bm-blue-light);
	--border-color:        var(--bm-rail-line);
	--table-border-color:  var(--bm-rail-line);
}

/* AUSNAHME, und die ist der Grund, warum das kein Einzeiler ist: Frappe hängt
 * die Meldungsliste und die Kontextmenüs INNERHALB von .body-sidebar auf. Die
 * stehen aber auf Papier, nicht auf der Schiene. Ohne diesen Rückschalter
 * erbten sie die helle Schienenschrift und wären beige auf Papier — also genau
 * der Fehler, den die Regel oben behebt, nur umgedreht. */
.body-sidebar .dropdown-notifications,
.body-sidebar .notifications-list,
.body-sidebar .frappe-menu,
.body-sidebar .dropdown-menu,
.body-sidebar .app-switcher-menu {
	--text-color:         var(--bm-dark-grey);
	--heading-color:      var(--bm-dark-grey);
	--text-light:         var(--bm-grey-medium);
	--text-muted:         var(--bm-grey-medium);
	--text-on-gray:       var(--bm-dark-grey);
	--text-on-light-gray: var(--bm-grey-medium);
	--link-color:         var(--bm-blue);
	--border-color:       var(--bm-linie);
	--table-border-color: var(--bm-linie);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 35. Der untere Teil wird dunkel — kein Balken mehr
 *
 * DAS PROBLEM, nachgelesen im Bundle statt geraten:
 *
 *     .new-timeline .timeline-item .timeline-content.frappe-card
 *         background-color: var(--bg-color)
 *     .new-timeline .activity-title, .new-timeline .timeline-actions
 *         background-color: var(--bg-color)
 *
 * Die Zeitstrahlkarten zeichnen mit der ARBEITSFLAECHE, das Formular darueber
 * mit der KARTE. Zwei verschiedene Variablen fuer zwei benachbarte Bereiche —
 * daraus wird zwangslaeufig eine sichtbare Kante quer durch die Seite. Genau
 * der gemeldete Balken hinter Comments.
 *
 * ENTSCHEIDUNG DES NUTZERS: nicht angleichen, sondern der ganze untere Teil
 * dunkel mit heller Schrift. Das ist auch sachlich richtig — Kommentare und
 * Verlauf sind Nebenraum, nicht Beleg, und die Schiene fuehrt denselben Ton.
 *
 * WARUM EIN PSEUDOELEMENT UND NICHT EINFACH BACKGROUND: .form-footer traegt
 * max-width: var(--page-max-width) und margin: auto — es ist zentriert und
 * breitenbegrenzt. Eine Flaeche darauf waere wieder ein Balken, nur ein
 * dunkler. Das ::before liegt mit left/right: -100vw quer, und
 * isolation: isolate haelt das z-index: -1 im eigenen Stapelzusammenhang,
 * damit es hinter dem Inhalt und nicht hinter der Seite landet.
 *
 * Die Toene sind aus --bm-dark-grey mit --bm-beige-light aufgehellt, 5 und 8,5
 * Prozent. Nachgerechnet: Karte gegen Band 1,132:1, Feld gegen Karte 1,102:1,
 * Schrift 11,75:1, gedaempfte Schrift 4,66:1, Verweis 6,72:1.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

html:root {
	--bm-fuss-band:  var(--bm-rail-bg);
	--bm-fuss-karte: #292928;
	--bm-fuss-feld:  #30302F;
}

.form-footer {
	isolation: isolate;

	--bg-color:            var(--bm-fuss-band);
	--fg-color:            var(--bm-fuss-karte);
	--card-bg:             var(--bm-fuss-karte);
	--control-bg:          var(--bm-fuss-feld);
	--control-bg-on-gray:  var(--bm-fuss-feld);
	--subtle-accent:       var(--bm-fuss-karte);
	--highlight-color:     var(--bm-fuss-feld);
	--text-color:          var(--bm-rail-text);
	--heading-color:       var(--bm-rail-text);
	--text-light:          var(--bm-rail-mute);
	--text-muted:          var(--bm-rail-mute);
	--text-neutral:        var(--bm-rail-text);
	--link-color:          var(--bm-blue-light);
	--border-color:        var(--bm-rail-line);
	--dark-border-color:   var(--bm-rail-line);
	--table-border-color:  var(--bm-rail-line);
	--timeline-badge-bg:   var(--bm-fuss-feld);
	--gray-50:             var(--bm-fuss-karte);
	--gray-100:            var(--bm-fuss-karte);
	--gray-200:            var(--bm-fuss-feld);
	--gray-300:            var(--bm-rail-line);

	--surface-white:  var(--bm-fuss-karte);
	--surface-modal:  var(--bm-fuss-karte);
	--surface-cards:  var(--bm-fuss-karte);
	--surface-gray-1: var(--bm-fuss-feld);
	--surface-gray-2: var(--bm-fuss-feld);
	--surface-gray-3: var(--bm-fuss-feld);
	--ink-gray-9: var(--bm-rail-text);
	--ink-gray-8: var(--bm-rail-text);
	--ink-gray-7: var(--bm-rail-text);
	--ink-gray-6: var(--bm-rail-text);
	--ink-gray-5: var(--bm-rail-mute);
	--ink-gray-4: var(--bm-rail-mute);
	--ink-gray-3: var(--bm-rail-line);
	--ink-gray-2: var(--bm-rail-line);
	--ink-gray-1: var(--bm-rail-line);
	--outline-gray-1: var(--bm-rail-line);
	--outline-gray-2: var(--bm-rail-line);
	--outline-gray-3: var(--bm-rail-line);
	--ink-blue-link: var(--bm-blue-light);
	--ink-blue-2:    var(--bm-blue-light);
	--ink-blue-3:    var(--bm-blue-light);

	color: var(--bm-rail-text);
}

.form-footer::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background-color: var(--bm-fuss-band);
	z-index: -1;
}

/* Die Karten des Zeitstrahls und die beiden Ueberschriftszeilen. Sie tragen im
 * Bundle ausdruecklich --bg-color, also muessen sie hier ausdruecklich mit. */
.form-footer .new-timeline .timeline-item .timeline-content.frappe-card {
	background-color: var(--bm-fuss-karte);
	border-color: var(--bm-rail-line);
	color: var(--bm-rail-text);
}
.form-footer .new-timeline .activity-title,
.form-footer .new-timeline .timeline-actions,
.form-footer .new-timeline .timeline-dot {
	background-color: var(--bm-fuss-band);
}
.form-footer .new-timeline:before { border-left-color: var(--bm-rail-line); }
.form-footer .new-timeline .timeline-item .timeline-message-box .content:before {
	background-color: var(--bm-rail-line);
}

/* Das Eingabefeld fuer Kommentare traegt im Bundle !important, also muss die
 * Antwort es auch tragen. */
.form-footer .comment-box .comment-input-container .frappe-control .ql-editor {
	background-color: var(--bm-fuss-feld) !important;
	border-color: var(--bm-rail-line);
	color: var(--bm-rail-text);
}
.form-footer .comment-input-wrapper .ql-editor.ql-blank:before { color: var(--bm-rail-mute); }

/* Die Schaltflaechen im Fussfeld: New Email, Comment, der Pfeil nach oben. */
.form-footer .btn-default,
.form-footer .btn-secondary,
.form-footer .scroll-to-top {
	background-color: var(--bm-fuss-feld);
	border-color: var(--bm-rail-line);
	color: var(--bm-rail-text);
}
.form-footer .btn-default:hover,
.form-footer .btn-secondary:hover,
.form-footer .scroll-to-top:hover {
	background-color: var(--bm-rail-hover);
	border-color: var(--bm-rail-mute);
	color: var(--bm-rail-text);
}
/* ── 36. Die beige Linie in der Schiene ───────────────────────────────────────────
 *
 * Gemeldet: in der Seitenleiste ist unten noch ein Rand, der eingefaerbt wird.
 * Gefunden im ausgelieferten Bundle:
 *
 *     .body-sidebar .divider { border-top: 1px solid var(--gray-300) }
 *
 * Und --gray-300 steht in diesem Theme auf #DFD9C2, also auf dem Firmenbeige.
 * Das war kein dezenter Rand, sondern ein voll deckender beiger Strich quer
 * durch die dunkle Schiene.
 *
 * Der Block .body-sidebar bog bisher nur --outline-gray-* um. Bootstraps
 * Graustufen fehlten dort ganz — deshalb blieb die Linie.
 */
.body-sidebar,
.body-sidebar-container {
	--gray-50:  var(--bm-rail-hover);
	--gray-100: var(--bm-rail-hover);
	--gray-200: var(--bm-rail-line);
	--gray-300: var(--bm-rail-line);
	--gray-400: var(--bm-rail-mute);
}
.body-sidebar .divider {
	border-top: 1px solid var(--bm-rail-line);
}

/* Und der Schatten der gewaehlten Zeile mit Nachdruck. sidebar.scss legt
 * `box-shadow: var(--shadow-sm)` auf `.active-sidebar`. Abschnitt 18 setzt
 * --shadow-sm im Schienenbereich auf none, was reichen SOLLTE — gemeldet wurde
 * trotzdem noch ein heller Schein unter der beigen Flaeche. Deshalb hier
 * ausdruecklich und mit Nachdruck: auf Dunkel trennt eine Flaeche, kein
 * Schlagschatten. */
.body-sidebar .active-sidebar,
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .sidebar-item-container.active-sidebar {
	box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 37. Drei gemeldete Fehler, jeder mit belegter Ursache
 *
 * ZU BEIGE UND GRAU: Abschnitt 34 hat den hellen Modus auf eine neutrale
 * Grauleiter gestellt. Das war ein Missverstaendnis meinerseits — gemeint war
 * mit „grau" das Dunkelgrau der Schiene, nicht die Arbeitsflaeche. Die
 * Hauptfarbe im Fenster ist Beige. Abschnitt 34 ist deshalb ersatzlos entfernt,
 * die Papierleiter steht wieder auf ihren beigen Werten. Diese Datei enthaelt
 * keine Grauleiter mehr.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 37.1 Die Verweise im dunklen Fussfeld ────────────────────────────────────────
 *
 * URSACHE, gefunden in dieser Datei selbst, Zeile 1000:
 *
 *     a, .text-primary { color: var(--bm-link); }
 *
 * Das ist eine DIREKTE Farbregel auf dem Element. Sie schlaegt jede
 * Variablenumlenkung — Abschnitt 35 setzt im Fussfeld --text-color und
 * --link-color auf helle Toene, aber `a` fragt gar nicht danach, weil diese
 * Regel die Farbe unmittelbar setzt. --bm-link ist im hellen Modus --bm-blue
 * #1E3E4C, und das kommt auf dem Schienengrund #1F1F1F auf 1,45:1.
 *
 * Dazu die zweite Haelfte des Befunds: die Zeitstrahlzeilen sind VOLLSTAENDIG
 * Verweise. version_timeline_content_builder.js baut den Text und setzt nur die
 * geaenderten Werte ueber .bold() in ein <b>. Deshalb war genau das Muster zu
 * sehen, das gemeldet wurde: die fetten Werte lesbar, der ganze Rest dunkelblau.
 * `.new-timeline .timeline-item b { color: var(--text-color) }` greift auf die
 * Variable zu, das <b> war also hell — der umgebende Verweis nicht.
 *
 * --bm-blue-light #8FB6C7 kommt auf 6,72:1 gegen die Fusskarte.
 */
.form-footer a,
.form-footer a:hover,
.form-footer .text-primary,
.form-footer .new-timeline a,
.form-footer .timeline-content a,
.form-footer .activity-title a {
	color: var(--bm-blue-light);
}
.form-footer a:hover { text-decoration: underline; }

/* Das <b> im Verweis muss heller bleiben als der Verweis, sonst verschwindet
 * die Auszeichnung. Es ist der geaenderte Wert und damit das Wichtigste an der
 * Zeile. */
.form-footer .new-timeline .timeline-item b,
.form-footer a b,
.form-footer b {
	color: var(--bm-rail-text);
}

/* Gedaempfte Schrift und Zeitangaben im Fussfeld. */
.form-footer .text-muted,
.form-footer .text-light,
.form-footer .frappe-timestamp,
.form-footer .comment-box .comment-input-header .comment-count {
	color: var(--bm-rail-mute);
}

/* Kein Schatten im Fussfeld. Frappes Schatten sind fuer Papier gerechnet; auf
 * dem dunklen Band werden sie zu einem hellen Schein an der Kante. */
.form-footer .frappe-card,
.form-footer .comment-box,
.form-footer .timeline-content,
.form-footer .new-timeline .timeline-item .timeline-content.frappe-card {
	box-shadow: none;
}

/* ── 37.2 Die abgeschnittene Unterlaenge in der Brotkrume ─────────────────────────
 *
 * Gemeldet: bei „Organization" fehlt das g. Abschnitt 23 hat schon die
 * Zeilenhoehe der Verweise erhoeht, das war aber die falsche Stelle. Die Ursache
 * steht am BEHAELTER:
 *
 *     .navbar-breadcrumbs { display: inline-block; overflow: hidden;
 *                           white-space: nowrap; text-overflow: ellipsis }
 *
 * `overflow: hidden` braucht Frappe fuer die Auslassungspunkte bei langen
 * Pfaden, das bleibt. Aber es schneidet an der Kante des Innenabstands ab, und
 * der ist null — also genau an der Grundlinie. Ein Innenabstand unten gibt der
 * Unterlaenge Platz, OHNE die Auslassungspunkte zu verlieren.
 */
.navbar-breadcrumbs,
#navbar-breadcrumbs {
	line-height: 1.7;
	padding-bottom: 3px;
}
.navbar-breadcrumbs > li,
.navbar-breadcrumbs > li > a,
#navbar-breadcrumbs > li,
#navbar-breadcrumbs > li > a {
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 38. Was das uebergebene DOM gezeigt hat
 *
 * Vier Meldungen, vier Ursachen, alle vier nachweisbar — zwei davon in dieser
 * Datei selbst.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 38.1 Die Kaesten hinter Comments und im Zeitstrahl ───────────────────────────
 *
 * URSACHE: Zeile 626 dieser Datei. Der Kartensatz aus Abschnitt 4 fuehrt
 * ausdruecklich mit auf:
 *
 *     .new-timeline .timeline-item .timeline-content,
 *     .comment-box,
 *         background-color: var(--card-bg);
 *         box-shadow: var(--shadow-base);
 *
 * Auf Papier ist das richtig — eine Zeitstrahlzeile ist dort eine Karte. Auf dem
 * dunklen Band ist es zweimal falsch: die Flaeche wird ein Kasten, den niemand
 * bestellt hat, und --shadow-base ist fuer Papier gerechnet und wird zu einem
 * hellen Rahmen an der Kante. Genau die gemeldete „Hintergrundbox mit Rahmen",
 * und weil `.comment-box` in derselben Aufzaehlung steht, an beiden Stellen.
 *
 * Das uebergebene DOM zeigt ausserdem: `class="timeline-content "` fuehrt KEIN
 * frappe-card. Die Regel aus Abschnitt 35, die auf .timeline-content.frappe-card
 * zielte, hat also nie gegriffen — sie stand nur da.
 *
 * Entscheidung: kein Hintergrund. Die Zeilen trennen sich durch Abstand und die
 * Linie links, nicht durch Kaesten.
 */
.form-footer .comment-box,
.form-footer .comment-box .comment-input-header,
.form-footer .new-timeline .timeline-item .timeline-content,
.form-footer .new-timeline .timeline-item .timeline-content.frappe-card,
.form-footer .frappe-card {
	background-color: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

/* ── 38.2 Mehr Luft ueber Comments ────────────────────────────────────────────────
 *
 * Frappe gibt dem Fussfeld `padding: 0 15px`, also oben null. Der Titel klebte
 * an der Oberkante des dunklen Bands. Die seitlichen 15px bleiben unangetastet,
 * es kommt nur oben und unten etwas dazu — und weil das ::before aus Abschnitt
 * 35 mit top/bottom: 0 am Innenabstandskasten haengt, waechst das Band mit.
 */
.form-footer {
	padding-top: 28px;
	padding-bottom: 32px;
}

/* ── 38.3 Das Anhangzeichen und die Linie links ───────────────────────────────────
 *
 * URSACHE, gefunden im ausgelieferten Bundle:
 *
 *     .new-timeline .timeline-item .timeline-badge {
 *         --icon-stroke: var(--timeline-badge-color) }
 *     .es-icon { fill: var(--icon-stroke) }
 *     --timeline-badge-color: var(--gray-900)
 *
 * Und --gray-900 steht in diesem Theme auf #1F1F1F. Das Zeichen war also EXAKT
 * die Farbe des Bands, auf das es gemalt wurde. Nicht zu dunkel — identisch.
 *
 * Der Hebel ist --timeline-badge-color und nicht --icon-stroke: der Kranz setzt
 * --icon-stroke bei sich selbst, und das gewinnt gegen jede Angabe weiter oben.
 * Dieselbe Variable faerbt auch den Punkt (.timeline-dot:before), also sind
 * Zeichen und Punkte mit einer Zeile erledigt.
 *
 * DIE LINIE LINKS war mein Fehler: .new-timeline:before zeichnet sie aus
 * --dark-border-color, und Frappe hat dort --gray-300, in diesem Theme also das
 * Firmenbeige. Abschnitt 35 hat sie auf --bm-rail-line gesetzt, das sind 12
 * Prozent Beige — damit war sie praktisch weg. Sie bekommt den Beigeton zurueck.
 */
.form-footer {
	--timeline-badge-color: var(--bm-rail-text);
	--dark-border-color:    var(--bm-rail-mute);
	--shadow-base:          none;
	--shadow-sm:            none;
}

/* Der Kranz um das Zeichen bleibt eine Stufe heller als das Band, damit das
 * beige Zeichen darauf steht und nicht schwebt. */
.form-footer .new-timeline .timeline-item .timeline-badge {
	background-color: var(--bm-fuss-feld);
}
.form-footer .new-timeline .timeline-item .timeline-badge .es-icon,
.form-footer .new-timeline .timeline-item .timeline-badge .icon {
	fill: var(--bm-rail-text);
	stroke: var(--bm-rail-text);
}

/* Die Linie links mit Nachdruck, weil Frappe sie am Pseudoelement zeichnet. */
.form-footer .new-timeline:before {
	border-left-color: var(--bm-rail-mute);
}

/* ── 38.4 Die gewaehlte Zeile in der Schiene ──────────────────────────────────────
 *
 * Uebernommen aus dem Vorschlag: der Schatten wird auch an den Pseudoelementen
 * abgeschaltet, falls Frappe ihn dort erzeugt.
 *
 * NICHT UEBERNOMMEN: die beige Flaeche gegen #2a2d34 zu tauschen. Beige ist die
 * Hauptfarbe des Hauses und auf der dunklen Schiene die Auszeichnung — falsch
 * war der Schatten, nicht die Farbe. Eine Zeile, wenn es doch dunkel werden soll.
 *
 * WOHL uebernommen: die Zeichen auf der beigen Zeile muessen DUNKEL sein, nicht
 * weiss. Der Vorschlag wollte #ffffff, das waere weiss auf Beige. Auf
 * --bm-rail-active-bg #DFD9C2 gehoert --bm-rail-active-text #1F1F1F hin, und das
 * sind 11,65:1.
 */
.body-sidebar .standard-sidebar-item.active-sidebar::before,
.body-sidebar .standard-sidebar-item.active-sidebar::after,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor::before,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor::after {
	box-shadow: none !important;
}
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
	--icon-stroke: var(--bm-rail-active-text);
	--icon-fill: transparent;
	filter: none;
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg {
	color: var(--bm-rail-active-text);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 39. Kontrast im HELLEN Modus, und die Schiene flach
 *
 * VORBEMERKUNG, damit es niemand falsch fortschreibt: die Vorschlaege, aus denen
 * dieser Abschnitt kommt, gingen von einem durchgehend dunklen Fenster aus
 * (#121417, #1e232a, Tailwind-Slate). Das ist NICHT dieses Theme. Die Hauptfarbe
 * im Fenster ist Beige, dunkel sind die Schiene und das Fussfeld. Die gemeldeten
 * Fehler waren aber echt — sie werden hier im Beige behoben, nicht durch
 * Umschalten auf Dunkel.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 39.1 Die Eingabefelder hatten keinen Rand ────────────────────────────────────
 *
 * URSACHE, Zeile 843 dieser Datei:
 *
 *     input.form-control, select.form-control, textarea.form-control, ...
 *         background-color: var(--control-bg);
 *         border: 1px solid transparent;
 *
 * Frappe liefert dort `border: 1px solid #c7c7c7`. Das Theme hat den Rand also
 * ENTFERNT — mit der Begruendung aus Abschnitt 4, dass der Helligkeitsunterschied
 * eine Flaeche traegt. Nur traegt er hier nichts: --control-bg war --bm-paper-2
 * #EDEADD, die Karte darunter --bm-paper-3 #E9E4D4. Das sind 1,055:1. Ein Feld
 * ohne Rand und ohne Helligkeitsunterschied ist kein Feld, sondern Text auf
 * einer Flaeche — genau das war zu sehen.
 *
 * Zwei Aenderungen zusammen:
 *   Flaeche eine Stufe hoeher, --bm-paper-1 #F2F0E7   -> 1,114:1 gegen die Karte
 *   Rand zurueck, in einem Beigeton mit Substanz      -> 2,99:1 gegen das Feld
 *
 * Der Randton ist 42 Prozent Dunkelgrau im Firmenbeige. WCAG 1.4.11 verlangt
 * fuer die Umrandung eines Bedienelements 3:1, und darum liegt er dort und nicht
 * bei Frappes 1,48:1.
 */
html:root {
	--bm-feld-rand:  #8E8B7E;
	--bm-feld-flaeche: var(--bm-paper-1);
}
:root[data-theme="dark"] {
	--bm-feld-rand:  #4A4A49;
	--bm-feld-flaeche: #2A2A2A;
}

input.form-control,
select.form-control,
textarea.form-control,
.input-with-feedback,
.like-disabled-input,
.awesomplete input,
.control-input input,
.control-input select,
.control-input textarea {
	background-color: var(--bm-feld-flaeche);
	border: 1px solid var(--bm-feld-rand);
}
input.form-control:hover,
select.form-control:hover,
textarea.form-control:hover,
.control-input input:hover,
.control-input select:hover {
	background-color: var(--bm-feld-flaeche);
	border-color: var(--bm-dark-grey);
}

/* Beim Fokus traegt der blaue Ring die Auszeichnung. Der Rand darf dann nicht
 * verschwinden, sonst springt das Feld in der Groesse — er wird blau. */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.control-input input:focus,
.control-input select:focus,
.control-input textarea:focus {
	border-color: var(--bm-link);
}

/* Ein gesperrtes Feld bleibt ein Feld, nur ohne Rand — es ist nichts zu bedienen. */
.form-control:disabled,
.form-control[readonly],
.like-disabled-input {
	background-color: var(--bm-paper-4);
	border-color: transparent;
}

/* ── 39.2 Hilfetexte und Platzhalter waren unlesbar ───────────────────────────────
 *
 * URSACHE: Frappe schreibt
 *
 *     .text-extra-muted { color: var(--gray-500) !important }
 *
 * MIT Nachdruck. Abschnitt 27 setzt dieselbe Klasse OHNE Nachdruck — also
 * gewinnt Frappe, und --gray-500 steht in diesem Theme auf #A9A9A6. Auf der
 * Karte sind das 1,86:1. Der Hinweis unter einem Feld traegt Fachinhalt und war
 * damit praktisch nicht vorhanden.
 *
 * Zwei Hebel, beide notwendig: --gray-500 bekommt Substanz (es faerbt auch die
 * Platzhalter, „Choose a color" war genauso blass), und die Klassen aus
 * Abschnitt 27 bekommen den Nachdruck, den Frappe dort auch benutzt.
 *
 * ANMERKUNG: .field-help, .grid-description und .small-text gibt es in v16
 * nicht — nachgezaehlt im ausgelieferten Bundle, null Vorkommen. Die echten
 * Namen sind .help-box, .form-text, .form-column-description, .description.
 */
html:root {
	--gray-500: #68665D;
}
:root[data-theme="dark"] {
	--gray-500: #8C8C8B;
}

.help-box,
.text-extra-muted,
.form-column-description,
.form-text,
.description,
.grid-description {
	color: var(--bm-grey-medium) !important;
}
[data-theme="dark"] .help-box,
[data-theme="dark"] .text-extra-muted,
[data-theme="dark"] .form-column-description,
[data-theme="dark"] .form-text,
[data-theme="dark"] .description {
	color: var(--bm-grey-on-dark) !important;
}

/* ── 39.3 Der helle Streifen unter dem dunklen Band ───────────────────────────────
 *
 * Das ::before aus Abschnitt 35 deckt genau die Hoehe des Fussfelds. Ist die
 * Seite kuerzer als das Fenster, steht darunter wieder die Arbeitsflaeche — als
 * heller Streifen am unteren Rand. Das Fussfeld ist das letzte Element der
 * Formularansicht, also darf das Band nach unten auslaufen.
 */
.form-footer::before {
	bottom: -100vh;
}

/* ── 39.4 Die rechte Formularleiste ───────────────────────────────────────────────
 *
 * Sie war im Theme fast ungedeckt: ausser .form-sidebar .sidebar-label und zwei
 * Regeln fuer .layout-side-section .sidebar-item stand dort nichts. Sie lief also
 * auf Frappes Auslieferungswerten.
 *
 * WICHTIG UND EHRLICH: das Band aus 39.3 laeuft mit left/right: -100vw quer und
 * liegt damit auch hinter dem unteren Teil der rechten Leiste. Ist die Leiste
 * laenger als der Formularinhalt, kann dort ein dunkler Abschnitt auftauchen —
 * genau die gemeldete Beobachtung „oben beige, unten dunkel". Deshalb bekommt
 * die Leiste hier einen eigenen Stapelplatz VOR dem Band und ihre eigene
 * Flaeche. Damit ist sie in jedem Fall durchgehend hell.
 */
.layout-side-section,
.form-sidebar {
	position: relative;
	z-index: 1;
	background-color: transparent;
}
.form-sidebar .sidebar-section,
.form-sidebar .sidebar-image-section {
	background-color: transparent;
	border: none;
	box-shadow: none;
}
.form-sidebar .sidebar-section + .sidebar-section {
	border-top: 1px solid var(--bm-linie);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 40. Der Schatten in der Schiene, endgueltig — und Beige zurueck
 *
 * WARUM DREI VERSUCHE VORHER NICHT GEGRIFFEN HABEN. Die Regel im ausgelieferten
 * Bundle lautet:
 *
 *     .active-sidebar {
 *         background: var(--sidebar-active-color);
 *         box-shadow: var(--shadow-sm);
 *         border-radius: 8px;
 *     }
 *
 * Ein BLANKER Klassenselektor, ohne Elternteil. Und `.active-sidebar` sitzt
 * nicht nur auf `.standard-sidebar-item` — es haengt auch am Anwendungswechsel
 * (`.sidebar-header.active-sidebar`) und kann an einem Behaelter haengen.
 * Abschnitt 36 und 38 haben durchgehend mit `.standard-sidebar-item` verankert
 * und deshalb jede Stelle verpasst, die diese Klasse woanders traegt. Genau
 * deswegen war der Schatten nach drei Anlaeufen immer noch da.
 *
 * DAS ZWEITE, UND DAS WAR NEU DAZUGEKOMMEN: Abschnitt 39 hat die Flaeche auf
 * `.active-sidebar` UND auf `> .item-anchor` UND auf `> a` gelegt, alle drei mit
 * Nachdruck. Zwei verschachtelte gefuellte Kaesten mit verschiedener Hoehe und
 * gleichem Radius sehen aus wie ein dicker, gestufter Balken. Das war kein
 * Schatten mehr, das war meine eigene Doppelflaeche.
 *
 * DIE ANTWORT IST NICHT EIN VIERTER SELEKTOR, sondern Vollstaendigkeit durch
 * Bauart: in der Schiene gibt es keinen einzigen berechtigten Schlagschatten.
 * Also wird er im GANZEN Behaelter abgeschaltet, an jedem Element und jedem
 * Pseudoelement. Damit kann keine Regel mehr entwischen, gleichgueltig welche
 * Klasse sie traegt. Die eine Ausnahme steht darunter.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

.body-sidebar-container,
.body-sidebar-container *,
.body-sidebar-container *::before,
.body-sidebar-container *::after {
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}

/* Die Schattenvariablen zusaetzlich auf null, damit auch nichts durchkommt, was
 * erst spaeter dazukommt. */
.body-sidebar-container {
	--shadow-sm: none;
	--shadow-base: none;
	--shadow-md: none;
	--shadow-lg: none;
}

/* DIE EINE AUSNAHME: die Meldungsliste und die Kontextmenues schweben ueber der
 * Arbeitsflaeche, haengen im DOM aber in der Schiene. Ein schwebendes Feld ohne
 * Schatten klebt an nichts — hier ist er richtig, und auf Dunkel gehoert er
 * tief und weich, nicht hell. */
.body-sidebar .dropdown-notifications .notifications-list,
.body-sidebar .frappe-menu,
.body-sidebar .dropdown-menu,
.body-sidebar .app-switcher-menu {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ── 40.1 Die gewaehlte Zeile ist wieder beige ────────────────────────────────────
 *
 * Abschnitt 39 hat sie dunkel gemacht. Das war falsch: Beige ist die Hauptfarbe
 * und auf der dunklen Schiene die Auszeichnung. Zurueckgenommen.
 *
 * UND DIE FLAECHE SITZT AUF GENAU EINEM ELEMENT. Der Anker `.item-anchor` ist
 * die 28 Pixel hohe Zeile, die Zeichen und Beschriftung traegt (sidebar.scss).
 * Er bekommt die Flaeche, der Eintrag darum wird ausdruecklich durchsichtig.
 * Eintraege ohne Anker — Rubrikentrenner — behalten sie am Eintrag selbst,
 * deshalb der :not(:has(...))-Zweig.
 *
 * Schrift und Zeichen auf Beige sind DUNKEL: --bm-rail-active-text #1F1F1F auf
 * --bm-rail-active-bg #DFD9C2 sind 11,65:1. Weiss waere dort 1,4:1.
 */
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .sidebar-item-container.active-sidebar,
.body-sidebar .standard-sidebar-item:hover {
	background: transparent !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar > .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar > a,
.body-sidebar .standard-sidebar-item.active-sidebar:not(:has(> .item-anchor)):not(:has(> a)) {
	background-color: var(--bm-rail-active-bg) !important;
	border-radius: 8px;
	color: var(--bm-rail-active-text) !important;
	--icon-stroke: var(--bm-rail-active-text);
	--icon-fill: transparent;
	--ink-gray-9: var(--bm-rail-active-text);
	--ink-gray-8: var(--bm-rail-active-text);
	--ink-gray-7: var(--bm-rail-active-text);
	--ink-gray-6: var(--bm-rail-active-text);
	--ink-gray-5: var(--bm-rail-active-text);
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg {
	color: var(--bm-rail-active-text) !important;
}

/* Ueberfahren, wenn die Zeile NICHT gewaehlt ist: eine Spur heller als die
 * Schiene, ebenfalls nur am Anker. */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover > .item-anchor,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover > a,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(:has(> .item-anchor)):not(:has(> a)):hover {
	background-color: var(--bm-rail-hover) !important;
	border-radius: 8px;
	color: var(--bm-rail-text) !important;
}

/* Der Anwendungswechsel oben traegt dieselbe Klasse, ist aber eine Ueberschrift
 * und keine Auswahl. Er bekommt weiterhin keine Flaeche. */
.body-sidebar .sidebar-header,
.body-sidebar .sidebar-header.active-sidebar,
.body-sidebar a.sidebar-header.active-sidebar {
	background: transparent !important;
}

/* ── 40.2 Die Mindesthoehe des Formularbereichs ───────────────────────────────────
 *
 * Gewuenscht: bei Reitern mit wenig Inhalt soll der Kommentar- und
 * Verlaufsbereich nicht nach oben rutschen.
 *
 * ZUR VERSCHACHTELUNG, weil der Vorschlag hier daneben lag. Nachgelesen in
 * form.js:
 *
 *     this.footer = new frappe.ui.form.Footer({
 *         parent: $("<div>").appendTo(this.page.main.parent()) });
 *
 * `this.page.main` IST `.layout-main-section`. Das Fussfeld haengt also in einem
 * eigenen <div> DANEBEN, als Geschwister im `.layout-main-section-wrapper`:
 *
 *     .layout-main-section-wrapper
 *       ├── .layout-main-section        <- der Formularinhalt
 *       │     └── .form-layout > .form-page > .form-section
 *       └── div > .form-footer          <- Kommentare und Verlauf
 *
 * Daraus folgt zweierlei. Erstens trifft `.form-page .layout-main-section`
 * nichts: `.form-page` liegt INNEN, nicht ausssen — belegt durch Frappes eigene
 * Regel `.form-layout:first-child > .form-page`. Zweitens trifft
 * `.form-page .form-footer` auch nichts, weil das Fussfeld gar nicht im
 * Formular liegt. Das vorgeschlagene `margin-top: auto` waere wirkungslos
 * geblieben.
 *
 * Ebenfalls geprueft: `.form-body` und `.timeline-container` kommen im
 * ausgelieferten Bundle NICHT vor, null Vorkommen.
 *
 * KEIN FLEX. Der Vorschlag wollte `display: flex; flex-direction: column` auf
 * den Formularbereich legen. Das braucht es hier nicht — das Fussfeld ist ein
 * Geschwister, es folgt der Mindesthoehe von selbst — und es waere riskant:
 * Frappes Formularspalten rechnen mit Blocksatz, und ein Flexbehaelter streckt
 * seine Kinder anders. Eine Mindesthoehe genuegt.
 *
 * DER WERT IST EINE ANNAHME und steht deshalb in einer Variablen. Belegt sind
 * --page-head-height: 48px und --navbar-height: 48px; darueber liegt noch die
 * Brotkrumenzeile. 200px ist die Summe mit Reserve. Wer es anders will, aendert
 * eine Zeile.
 */
html:root {
	--bm-formular-mindesthoehe: calc(100vh - 200px);
}

body[data-route^="Form"] .layout-main-section {
	min-height: var(--bm-formular-mindesthoehe);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 41. Tabellen: waagerechte Linien traegt der Blick, senkrechte nicht
 *
 * Frappe hat DREI Tabellensysteme mit je eigenen Klassen, und sie muessen alle
 * drei mit, sonst sieht die Listenansicht anders aus als ein Bericht und der
 * anders als eine Kindtabelle im Formular:
 *
 *     .form-grid   Kindtabellen im Formular   .grid-heading-row / .data-row
 *     .frappe-list Listenansicht              .list-row-head / .list-row
 *     .datatable   Berichte, Abfragen         .dt-cell--header / .dt-cell
 *
 * DREI ENTSCHEIDUNGEN, und die mittlere ist die wichtigste:
 *
 * 1. WAAGERECHT DUNKLER. --bm-linie liegt auf 1,39:1 gegen die Karte. Das traegt
 *    einen Rahmen, aber nicht die Trennung von Zeile zu Zeile. Neu
 *    --bm-linie-tabelle #A9A594, 28 Prozent Dunkelgrau im Firmenbeige: 1,94:1.
 *    Vierzig Prozent mehr Kontrast, ohne dass daraus ein Strich wird.
 *
 * 2. SENKRECHT BLEIBT RUHIG. Die Zeile ist die Einheit, die man liest — die
 *    Spalte ist nur ihre Aufteilung. Werden beide gleich dunkel, entsteht ein
 *    Gitter, das um Aufmerksamkeit konkurriert. Senkrecht bleibt deshalb auf
 *    --bm-linie. Das ist Absicht, kein vergessener Selektor.
 *
 * 3. ZEBRA BEI VIER PROZENT. 1,078:1 gegen die Karte — man sieht es nicht als
 *    Farbe, nur als Fuehrung. Wichtig ist der Abstand zum Ueberfahren: das liegt
 *    auf --bm-tint-dark mit acht Prozent, also 1,164:1. Waere das Zebra
 *    kraeftiger, wuerde die Zeile unter dem Zeiger nicht mehr hervortreten.
 *
 * UND DIE SPALTENUEBERSCHRIFTEN. Ursache war meine eigene Regel bei Zeile 910:
 *
 *     .datatable .dt-header, .datatable .dt-cell--header .dt-cell__content {
 *         background-color: var(--dt-header-bg);   <- Variable gibt es nicht
 *         color: var(--text-muted); }              <- das war das Blasse
 *
 * Eine Spaltenueberschrift ist keine gedaempfte Nebeninformation, sie sagt, was
 * in der Spalte steht. --text-muted #5F5F5E gab 4,75:1, jetzt --bm-dark-grey mit
 * 12,24:1 und Halbfett. Frappe setzt dort ausserdem `font-weight: 400` mit einem
 * vierstufigen Selektor, deshalb steht die Antwort hier ebenso tief.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

html:root {
	--bm-linie-tabelle: #A9A594;
	--bm-zebra:         rgba(31, 31, 31, 0.04);
}
:root[data-theme="dark"] {
	--bm-linie-tabelle: rgba(234, 231, 219, 0.20);
	--bm-zebra:         rgba(234, 231, 219, 0.035);
}

/* ── 41.1 Kindtabellen im Formular ────────────────────────────────────────────────*/
.form-grid,
.form-grid .grid-heading-row,
.form-grid .grid-row .data-row,
.form-grid .grid-body .grid-row {
	border-bottom-color: var(--bm-linie-tabelle);
}
.form-grid .grid-heading-row {
	color: var(--bm-dark-grey);
	font-weight: 600;
	border-bottom: 1px solid var(--bm-linie-tabelle);
}
.grid-heading-row { color: var(--bm-dark-grey); }
.form-grid .grid-body .grid-row:nth-child(even) {
	background-color: var(--bm-zebra);
}
.form-grid .grid-body .grid-row:hover {
	background-color: var(--bm-tint-dark);
}

/* ── 41.2 Listenansicht ───────────────────────────────────────────────────────────*/
.list-row,
.list-row-head,
.frappe-list .list-row-container .list-row {
	border-bottom-color: var(--bm-linie-tabelle);
}
.list-row-head,
.list-row-head .list-subject,
.list-row-head .list-row-col,
.list-row-head .list-row-col span {
	color: var(--bm-dark-grey);
	font-weight: 600;
}
.frappe-list .list-row-container:nth-child(even) .list-row:not(.list-row-head) {
	background-color: var(--bm-zebra);
}
.frappe-list .list-row-container .list-row:not(.list-row-head):hover {
	background-color: var(--bm-tint-dark);
}

/* ── 41.3 Datentabelle: Berichte und Abfragen ─────────────────────────────────────*/
.datatable .dt-cell {
	border-bottom-color: var(--bm-linie-tabelle);
	border-right-color: var(--bm-linie);
}
.datatable .dt-header,
.datatable .dt-header .dt-row-header,
.datatable .dt-header .dt-cell--header,
.datatable .dt-header .dt-cell--header .dt-cell__content {
	background-color: var(--dt-header-cell-bg);
	color: var(--bm-dark-grey);
	font-weight: 600;
	border-bottom: 1px solid var(--bm-linie-tabelle);
}
.datatable .dt-scrollable .dt-row:not(.dt-row-filter):nth-child(even) .dt-cell {
	background-color: var(--bm-zebra);
}
.datatable .dt-row:hover .dt-cell {
	background-color: var(--bm-tint-dark);
}
/* Die Fussnotenzeile eines Berichts ist eine Summe und traegt eine eigene
 * Oberkante, sonst laeuft sie in die letzte Datenzeile. */
.datatable .dt-row.dt-row-totalRow .dt-cell {
	border-top: 2px solid var(--bm-linie-tabelle);
	font-weight: 700;
}

/* ── 41.4 Die einfache Bootstrap-Tabelle ──────────────────────────────────────────
 * Sie steckt in Druckvorschauen, Auskunftsfeldern und einigen Bausteinen. */
.table th,
.table td {
	border-top-color: var(--bm-linie-tabelle);
}
.table thead th {
	border-bottom: 2px solid var(--bm-linie-tabelle);
	color: var(--bm-dark-grey);
	font-weight: 600;
}
.table tbody tr:nth-child(even) {
	background-color: var(--bm-zebra);
}

/* Im dunklen Modus tragen die Ueberschriften die helle Tinte. */
[data-theme="dark"] .grid-heading-row,
[data-theme="dark"] .form-grid .grid-heading-row,
[data-theme="dark"] .list-row-head,
[data-theme="dark"] .list-row-head .list-subject,
[data-theme="dark"] .list-row-head .list-row-col,
[data-theme="dark"] .datatable .dt-header .dt-cell--header .dt-cell__content,
[data-theme="dark"] .table thead th {
	color: var(--bm-beige-light);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 42. Der Kasten um die Arbeitsflaeche, und Orbitron fuer Zahlen
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 42.1 Der aeussere Kasten im Arbeitsbereich ───────────────────────────────────
 *
 * URSACHE, eine einzige Regel im ausgelieferten Bundle:
 *
 *     [data-page-route=Workspaces] .layout-main-section {
 *         background-color: var(--fg-color);
 *         box-shadow: none;
 *         padding: var(--padding-sm) var(--padding-md);
 *     }
 *
 * --fg-color ist in diesem Theme die Kartenfarbe #E9E4D4, die Arbeitsflaeche
 * darunter #DFD9C2. Das sind 1,11:1 — genug, um einen Kasten um alles zu
 * zeichnen, und der hat dort nichts zu suchen: die Kacheln SIND die Karten, ein
 * Kasten um Karten ist eine Karte um Karten.
 *
 * ZWINGEND AUF DEN ARBEITSBEREICH BESCHRAENKT. `.layout-main-section` ist
 * dasselbe Element wie die FORMULARKARTE (`body[data-route^=Form]
 * .layout-main-section.frappe-card`) und der Behaelter der Listenansicht.
 * Durchsichtig ohne diese Einschraenkung wuerde das gesamte Kartenbild
 * aufloesen. Frappe liefert mit [data-page-route=Workspaces] den passenden
 * Haken gleich mit.
 *
 * DREI DER SECHS VORGESCHLAGENEN KLASSEN GIBT ES NICHT: .editor-js-container,
 * .desk-page und .page-main-content kommen im ausgelieferten Bundle null Mal
 * vor. .codex-editor gibt es (82 Mal), es malt aber keine Flaeche — es steht
 * hier trotzdem, damit nichts durchschlaegt, was spaeter dazukommt.
 *
 * DAS INNENMASS BLEIBT. Der Vorschlag wollte `padding: 0`. Ohne Innenabstand
 * kleben die Kacheln an der Schiene und am rechten Rand. Gemeint war der
 * Hintergrund, nicht der Abstand — der Kasten ist so oder so weg.
 */
[data-page-route="Workspaces"] .layout-main-section,
[data-page-route="Workspaces"] .layout-main .layout-main-section,
[data-page-route="Workspaces"] .layout-main-section-wrapper,
[data-page-route="Workspaces"] .codex-editor,
[data-page-route="Workspaces"] .codex-editor__redactor {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	border: none;
}

/* Der Bearbeitungsmodus behaelt seine Flaeche: sie sagt, dass man gerade
 * umbaut, und das ist eine Information und keine Zierde. */

/* ── 42.2 Zahlen laufen in Orbitron ───────────────────────────────────────────────
 *
 * Regel des Hauses: Zahlen sind Orbitron Regular — ausser im Fliesstext und bei
 * Datumsangaben.
 *
 * EIN VORBEHALT, EINMAL UND OHNE ZU DRAENGEN: der Kommentar an
 * NACHGEPRUEFT UND ERLEDIGT (25.08.2026): Orbitrons Null IST durchgestrichen.
 * Gegen die ausgelieferte Schriftdatei gerendert -- 'zero' 0, 'zero' 1,
 * 'ss01' 1 und font-variant-numeric: slashed-zero liefern alle dasselbe Bild,
 * die Schrift bringt keine Alternativglyphe mit. Auf einer Achse steht damit
 * ,O.5' mit durchgestrichener Null.
 * DAS IST SO GEWOLLT und vom Haus bestaetigt. Es ist kein Mangel, es gehoert
 * zur Schrift. Niemand muss das kuenftig noch einmal melden oder pruefen.
 *
 * WAS CSS NICHT KANN, und das gehoert dazugesagt: in der Datentabelle
 * (Berichte, Abfragen) und in der Listenansicht laesst sich eine Zelle nicht
 * danach auswaehlen, OB sie eine Zahl enthaelt. Die Zellen tragen dort keinen
 * Feldtyp und keine eigene Klasse; die Ausrichtung setzt frappe-datatable
 * unmittelbar am Element. Diese Zahlen bleiben deshalb in Manrope mit
 * Ziffernbreiten aus Abschnitt 3.
 *
 * BERICHTIGT DURCH ABSCHNITT 49: Formularfelder standen hier einmal mit auf der
 * Liste. Sie gehoeren nicht dazu — eine Maske wird ausgefuellt, nicht gelesen.
 * Erfasst ist jetzt: Kennzahlkacheln, Berichtskacheln, Diagrammwerte.
 */
html:root {
	--bm-font-numeric: 'Orbitron', 'Manrope', sans-serif;
}

/* HIER STANDEN EINMAL DIE FORMULARFELDER — zwoelf Selektoren auf
 * .frappe-control[data-fieldtype=Currency|Float|Int|Percent]. Sie sind
 * ersatzlos weg; die Begruendung steht in Abschnitt 49. Kurz: eine Maske wird
 * ausgefuellt, nicht gelesen, und dort hat Orbitron nichts zu suchen.
 * Die gleiche Ziffernbreite bleibt und kommt aus Abschnitt 3. */

/* AUSDRUECKLICH NICHT: Datumsangaben und Fliesstext. Ein Datum ist keine
 * Kennzahl, es wird gelesen und nicht verglichen — und im Fliesstext wuerde
 * eine zweite Schrift mitten im Satz stehen. */
.frappe-timestamp,
.frappe-control[data-fieldtype="Date"] input,
.frappe-control[data-fieldtype="Datetime"] input,
.frappe-control[data-fieldtype="Time"] input,
.frappe-control[data-fieldtype="Duration"] input,
.timeline-content,
.timeline-content *,
.comment-content,
.help-box,
.form-column-description,
.description,
.onb-panel {
	font-family: var(--bm-font-body, 'Manrope', sans-serif);
}

/* ── 43. Diagramme: Rasterlinien und Beschriftung ─────────────────────────────────
 *
 * DIE RASTERLINIEN. Sie laufen ueber
 *
 *     .chart-container .axis line, .chart-container .chart-label line {
 *         stroke: var(--charts-axis-line-color) }
 *
 * Abschnitt 31 setzt diese Variable bereits auf --bm-linie. Gemeldet wurde
 * trotzdem, dass die Linien weiss aussehen — die Umlenkung kommt also nicht
 * durch. Statt einen vierten Anlauf ueber dieselbe Variable zu nehmen, steht der
 * Strich hier unmittelbar am Element. Eine Variable, die dreimal nicht greift,
 * ist der falsche Hebel.
 *
 * DER TON: --bm-linie lag auf 1,39:1 gegen die Karte, das ist fuer eine
 * Rasterlinie zu wenig. Neu auf dem Wert der Tabellenlinie, 1,94:1 — dasselbe
 * Mass, das seit Abschnitt 41 die Zeilen in Tabellen trennt. Ein Diagrammraster
 * und ein Tabellenraster tun dasselbe, also sehen sie gleich aus. Eigener Name,
 * damit sich das an einer Stelle nachstellen laesst.
 *
 * NICHT ANGETASTET: die Datenlinien selbst (.dataset-path, .path-group path).
 * Die tragen die Aussage und behalten ihre Farbe. Deshalb greift die Regel nur
 * auf <line> — Datenreihen zeichnet frappe-charts als <path>.
 *
 * DIE BESCHRIFTUNG. --charts-label-color steht bei Frappe auf #313b44, einem
 * Blaugrau. Das Theme hat diese Variable nie abgebildet, also lief die
 * Achsenbeschriftung in einer Fremdfarbe. Sie bekommt die Haustinte.
 */
html:root {
	--bm-diagramm-linie: var(--bm-linie-tabelle);

	--charts-label-color:   var(--bm-dark-grey);
	--charts-legend-label:  var(--bm-grey-medium);
	--charts-legend-value:  var(--bm-dark-grey);
	--charts-tooltip-title: var(--bm-grey-medium);
	--charts-tooltip-label: var(--bm-grey-medium);
	--charts-tooltip-value: var(--bm-dark-grey);
}
:root[data-theme="dark"] {
	--bm-diagramm-linie: rgba(234, 231, 219, 0.20);

	--charts-label-color:   var(--bm-beige-light);
	--charts-legend-label:  var(--bm-grey-on-dark);
	--charts-legend-value:  var(--bm-beige-light);
	--charts-tooltip-title: var(--bm-grey-on-dark);
	--charts-tooltip-label: var(--bm-grey-on-dark);
	--charts-tooltip-value: var(--bm-beige-light);
}

/* Der Strich unmittelbar am Element, damit keine Variablenkette dazwischen
 * liegt. Der dunkle Modus erbt ueber --bm-diagramm-linie mit. */
.chart-container .axis line,
.chart-container .chart-label line,
.chart-container .axis .tick line,
.frappe-chart .axis line,
.frappe-chart line.y-line,
.frappe-chart line.x-line,
.frappe-chart g.y.axis line,
.frappe-chart g.x.axis line {
	stroke: var(--bm-diagramm-linie) !important;
}

/* Die gestrichelte Hilfslinie (Mittelwert, Zielwert) darf sich absetzen. */
.chart-container line.dashed,
.frappe-chart line.dashed {
	stroke: var(--bm-grey-medium) !important;
}

/* Die Beschriftung ist Text und wird in SVG ueber fill gefaerbt, nicht ueber
 * color — deshalb hier ausdruecklich. */
.chart-container .axis text,
.chart-container .axis,
.chart-container .chart-label,
.frappe-chart .axis text {
	fill: var(--charts-label-color);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 44. Der dunkle Modus — zwei Ursachen, kein drittes Dutzend Selektoren
 *
 * HELL WIRD HIER NICHT ANGEFASST. Beide Aenderungen wirken ausschliesslich
 * unter :root[data-theme="dark"].
 *
 * ══ URSACHE 1: SPEZIFITAET, nicht Farbwahl ════════════════════════════════════════
 *
 * `:root` und `[data-theme="dark"]` haben DIESELBE Spezifitaet (0,1,0). Bei
 * Gleichstand gewinnt die spaetere Regel. Diese Datei ist ueber den Tag von 1000
 * auf 3000 Zeilen gewachsen, und jeder nachtraeglich angehaengte `:root`-Block
 * hat damit den Dunkelmodus ueberstimmt — lautlos, ohne Fehlermeldung.
 *
 * Ausgezaehlt waren es ZWOELF Variablen, und es sind genau die tragenden:
 *
 *     --bg-color        #161616  wirkungslos, wirksam war var(--bm-beige)
 *     --card-bg         #232323  wirkungslos, wirksam war var(--bm-paper-3)
 *     --fg-color        #232323            dito
 *     --control-bg      #1B1B1B            dito
 *     --modal-bg, --popover-bg, --surface-white, --surface-modal, --subtle-fg,
 *     --border-color, --table-border-color, --dark-border-color
 *
 * Im dunklen Modus liefen also Seite, Karten und Eingabefelder auf ihren BEIGEN
 * Werten, waehrend die Schrift hell blieb: helle Schrift auf hellem Grund.
 *
 * Die Behebung ist eine Zeichenkette je Block: aus `[data-theme="dark"] {` wird
 * `:root[data-theme="dark"] {`. Das ist (0,2,0) und schlaegt jedes blanke
 * `:root`, unabhaengig von der Reihenfolge. Zehn Bloecke umgestellt, elf der
 * zwoelf Variablen damit erledigt.
 *
 * DAS IST DIE EIGENTLICHE LEHRE: die Reihenfolge einer Datei darf nicht
 * entscheiden, welches Farbschema gilt.
 *
 * ══ URSACHE 2: die Papierleiter kannte kein Dunkel ════════════════════════════════
 *
 * --bm-paper-1 bis -4 und --bm-linie waren NUR unter :root definiert. Zehn
 * Elementregeln zeigen unmittelbar darauf — Meldungsliste, Kontextmenues,
 * Einstiegskasten, Auskunftskarte, gesperrte Felder, Dialogfelder. Die standen
 * im dunklen Modus in Beige.
 *
 * Wieder ein Hebel statt zehn Regeln: die Leiter bekommt Dunkelwerte, alles
 * Nachgelagerte folgt. Die Werte sind dieselben Stufen, die der Dunkelblock
 * schon fuer --card-bg und Verwandte fuehrt, damit nichts auseinanderlaeuft.
 *
 * AUSDRUECKLICH NICHT UMGESTELLT: --bm-beige und --bm-beige-light. Die sind im
 * dunklen Modus keine Flaechen, sondern SCHRIFT und Auszeichnung — --bm-rail-text
 * und --text-color zeigen darauf. Wer sie abdunkelt, macht die Schrift unsichtbar.
 * Die eine Stelle, an der --bm-beige-light doch eine Flaeche ist, steht unten
 * einzeln.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
	--bm-paper-1: #2A2A2A;   /* obenauf: Dialog, Meldung, Auskunftskarte */
	--bm-paper-2: #1B1B1B;   /* Eingabefelder */
	--bm-paper-3: #232323;   /* Karten */
	--bm-paper-4: #171717;   /* tiefste Stufe */

	--bm-linie:       rgba(234, 231, 219, 0.14);
	--bm-linie-stark: rgba(234, 231, 219, 0.26);

	/* Die eine Flaeche, die im hellen Modus fehlte. */
	--surface-cards: #232323;
}

/* Die Kopfzeile einer Kindtabelle ist die einzige Stelle, an der
 * --bm-beige-light eine FLAECHE ist und nicht Schrift. Sie braucht deshalb ihr
 * eigenes Dunkelgegenstueck. */
:root[data-theme="dark"] .form-grid .grid-heading-row {
	background-color: #1B1B1B;
}

/* Papier bleibt weiss: das Druckformat und das Zeichen auf farbigem Grund
 * behalten --bm-white, in jedem Schema. Das ist keine Luecke, das ist Absicht. */

/* ── 45. Meldungsstreifen im dunklen Modus ────────────────────────────────────────
 *
 * Die Streifen liegen auf einer TOENUNG (--bm-tint-*), also auf rgba ueber der
 * Karte darunter. Im hellen Modus ergibt das eine helle Toenung und die tiefen
 * Farben lesen sich darauf gut. Im dunklen Modus ergibt dieselbe rgba eine
 * DUNKLE Toenung, und die tiefen Farben verschwinden:
 *
 *     rot    #B4310F auf #3B2723   2,26:1
 *     gruen  #2E4E3B auf #262B28   1,56:1
 *     blau   #1E3E4C auf #222627   1,34:1
 *
 * Die Palette fuehrt fuer genau diesen Fall die aufgehellten Zweitfarben. Sie
 * kommen auf 6,4 bis 7,2:1.
 */
:root[data-theme='dark'] .alert-warning,
:root[data-theme='dark'] .form-message.orange,
:root[data-theme='dark'] .form-message.yellow,
:root[data-theme='dark'] .alert-danger,
:root[data-theme='dark'] .form-message.red {
	color: var(--bm-red-light);
}
:root[data-theme='dark'] .alert-info,
:root[data-theme='dark'] .form-message.blue {
	color: var(--bm-blue-light);
}
:root[data-theme='dark'] .alert-success,
:root[data-theme='dark'] .form-message.green {
	color: var(--bm-green-light);
}

/* ── 45.1 Was aus der gedrehten Grauleiter noch nachzuziehen war ──────────────────
 *
 * Mit der Leiter in Frappes Richtung loesen sich 110 Variablen von selbst
 * richtig auf. Zwei Faelle bleiben, weil Frappe dort auf ein Ende zeigt, das in
 * Bordmittel anders belegt ist.
 */
:root[data-theme='dark'] {
	/* Frappe zeigt --neutral im Dunkeln auf --neutral-black. Bordmittel fuehrt
	 * keinen Schwarzton als Flaeche; die tiefste Stufe ist der Schienengrund. */
	--neutral: var(--bm-dark-grey);

	/* Das Zeichen auf farbigem Grund bleibt reinweiss, in jedem Schema. */
	--invert-neutral: var(--bm-white);
	--checkbox-color: var(--bm-white);

	/* Der Kranz im Zeitstrahl ausserhalb des Fussfelds. */
	--timeline-badge-bg: #2A2A2A;
	--timeline-badge-color: var(--bm-beige-light);
}

/* ── 46. Die Anmeldung: eine eigene Seite mit einer eigenen Kaskade ───────────────
 *
 * Die Anmeldung sah aus wie Frappe von der Stange auf beigem Grund. Dafuer gibt es
 * drei Ursachen, die nichts miteinander zu tun haben.
 *
 * URSACHE 1: EIN STYLESHEET NACH DEM THEME.
 * Die Seite laedt vier Dateien, in dieser Reihenfolge:
 *     website.bundle  →  erpnext-web.bundle  →  bordmittel  →  login.bundle
 * login.bundle.css bringt einen vollstaendigen eigenen :root-Block mit, 289
 * Variablen. NACHGEZAEHLT: davon setzt es 165 zurueck, die das Theme vorher belegt
 * hatte -- die ganze Grauleiter, saemtliche surface-/ink-/outline-Token, alle
 * Schatten, alle Radien, die komplette Schriftskala und --font-stack. Die
 * Anmeldung lief also nicht einmal in Manrope, sondern in Inter.
 *
 * Frappe haengt diese Datei im Login-Template hinter web_include_css ein; an der
 * Reihenfolge ist von aussen nichts zu drehen. Also muss das Theme ueber die
 * SPEZIFITAET gewinnen statt ueber die Reihenfolge: aus `:root` (0,1,0) wird
 * `html:root` (0,1,1). Das schlaegt jedes blanke :root, gleich wo es steht.
 * Sechzehn Bloecke umgestellt. Abschnitt 44 hat dieselbe Lektion eine Etage
 * tiefer gelernt -- dort war es die Reihenfolge innerhalb dieser Datei.
 *
 * NACHGERECHNET, BEVOR UMGESTELLT, denn der Sprung wirkt auch im Desk:
 *   • Das Theme setzt 58 Variablen hell, die Frappe im Desk unter
 *     [data-theme="dark"] dunkel setzt. Die verliert Frappe HEUTE SCHON durch
 *     Quellreihenfolge, nicht durch Spezifitaet -- der Sprung aendert daran
 *     nichts. (Es sind fast durchweg ink-/outline-Token, die Bordmittel in
 *     beiden Schemata bewusst auf die neun Hausfarben legt.)
 *   • Alle dunklen Variablenbloecke des Themes stehen auf
 *     :root[data-theme='dark'] (0,2,0) und schlagen (0,1,1) weiterhin. Ein
 *     blankes `[data-theme='dark'] {` mit Variablen gibt es nicht; nachgesehen,
 *     der einzige blanke Block ist der helle Zwilling in Abschnitt 2.
 *
 * URSACHE 2: DAS LOGO WAR UNSICHTBAR.
 * Navbar Settings.app_logo zeigt auf logo.svg, und das ist die beige Fassung
 * (#DFD9C2). In der dunklen Desk-Leiste ist das genau richtig. Die Anmeldeseite
 * traegt aber --bg-color als Grund, und das ist DASSELBE Beige: 1,000:1.
 * Es gibt nur diesen einen Wert fuer beide Seiten. Die Loesung kann also nicht
 * das Logo tauschen -- dann waere die Leiste kaputt --, sondern muss den Grund
 * unter dem Logo dunkel machen. Daraus folgt der Aufbau unten: die Karte
 * bekommt ein Kopfband in --bm-rail-bg, das Logo steht darauf mit 11,65:1.
 * Das ist die Ordnung des Desks -- dunkle Leiste ueber heller Flaeche -- eine
 * Etage kleiner. Zwei Farben des Kopfes muessen dabei mitwandern, sonst
 * verschwinden sie auf dem Band: die Ueberschrift stuende auf --heading-color
 * (#1F1F1F, 1,00:1) und der Untertitel auf --ink-gray-6 (2,58:1).
 *
 * URSACHE 3: FRAPPE FAERBT DIE KARTE WIE DIE SEITE.
 * `.for-login .page-card` (0,2,0) setzt background-color: var(--bg-color).
 * Karte und Seite hatten damit dieselbe Farbe, 1,000:1 -- es gab optisch keine
 * Karte. Die Regel des Themes stand auf derselben Spezifitaet und verlor durch
 * die Reihenfolge. `body .login-content.page-card` (0,2,1) faengt das ab;
 * .login-content sitzt auf demselben Element wie .page-card und traegt alle
 * fuenf Karten der Anmeldeseite ebenso wie die von /update-password.
 * Die Eingabefelder standen auf --surface-white, also auf reinem Weiss -- genau
 * dem, was Abschnitt 31 aus dem Theme herausgezaehlt hat.
 *
 * Die Anmeldeseite fuehrt kein data-theme. Sie ist immer hell; ein dunkler
 * Zweig waere hier toter Code.
 */

/* ── 46.1 Die Karte bekommt wieder eine Kante ────────────────────────────────────
 * Papier 1,239:1 gegen den beigen Grund, Rand 1,549:1 gegen das Papier. */
body .login-content.page-card {
	background-color: var(--bm-paper-1);
	border: 1px solid var(--bm-linie);
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-md);
	overflow: hidden;                 /* klemmt das Kopfband in den Radius */
}

/* ── 46.2 Das Kopfband — der einzige Grund, auf dem das beige Logo lesbar ist ──── */
body .login-content.page-card > .page-card-head {
	background-color: var(--bm-rail-bg);
	margin: -24px -24px 0;            /* Frappes Kartenpolster ist 24px */
	padding: 22px 24px;
	gap: 14px;
}
body .login-content.page-card > .page-card-head img.app-logo {
	/* Das Logo ist 11,43:1 breit. Bei Frappes max-height 32px waere es 366px
	 * breit und liefe aus der 323px breiten Karte heraus. */
	max-height: 28px;
	max-width: 100%;
	width: auto;
	height: auto;
}
body .login-content.page-card > .page-card-head h4 {
	color: var(--bm-rail-text);       /* 13,31:1 */
	font-family: var(--font-stack);
}
body .login-content.page-card > .page-card-head .page-card-subtitle {
	color: var(--bm-rail-mute);       /* 4,96:1 */
}

/* ── 46.3 Felder: Papier statt Weiss, und ein Rand, den man sieht ────────────────
 * Frappes Rand --outline-gray-2 lag auf 1,295:1 gegen sein weisses Feld.
 * --bm-feld-rand liegt auf 2,993:1 gegen die Feldflaeche. */
body .login-content.page-card .page-card-body input.form-control {
	background-color: var(--bm-feld-flaeche);
	border: 1px solid var(--bm-feld-rand);
	border-radius: var(--border-radius-sm);
	color: var(--bm-dark-grey);
	height: 34px;
}
body .login-content.page-card .page-card-body input.form-control:focus {
	border-color: var(--bm-dark-grey);
	box-shadow: none;
	outline: none;
}
/* Platzhalter und Feldzeichen standen auf --ink-gray-4: 1,44:1, also nicht da. */
body .login-content.page-card .page-card-body ::placeholder {
	color: var(--bm-grey-medium);
	opacity: 1;
}
body .login-content.page-card .page-card-body .field-icon {
	fill: var(--bm-grey-medium);
}
body .login-content.page-card .page-card-body .password-field .toggle-password {
	fill: var(--bm-grey-medium);
}

/* ── 46.4 Die Knoepfe ────────────────────────────────────────────────────────────
 * Der Hauptknopf zieht --gray-900 und sitzt damit nach der Umstellung von selbst
 * auf dem Hausgrau; hier bleiben Radius, Schrift und Polster.
 * Der zweite Knopf (Keycloak, Anmeldung per Link) stand auf --gray-100 und lag
 * mit 1,05:1 auf der Karte -- er war eine Beschriftung ohne Knopf. */
body .login-content.page-card .page-card-actions .btn-login {
	border-radius: var(--border-radius-sm);
	font-family: var(--font-stack);
	padding: 8px 12px;
}
body .login-content.page-card .page-card-actions .btn-login-option {
	background: var(--bm-paper-2);
	border: 1px solid var(--bm-linie-stark);
	color: var(--bm-dark-grey);
	border-radius: var(--border-radius-sm);
	font-family: var(--font-stack);
	padding: 8px 12px;
}
body .login-content.page-card .page-card-actions .btn-login-option:hover {
	background: var(--bm-paper-4);
	border-color: var(--bm-feld-rand);
	color: var(--bm-dark-grey);
}

/* ── 46.5 Der Verweis unter dem Feld laeuft in der Hausfarbe ─────────────────── */
body .login-content.page-card .page-card-body .forgot-password-message > * {
	color: var(--bm-link);            /* 9,95:1 */
}

/* ── 46.6 Am kleinen Schirm bleibt die Karte randlos, so wie Frappe es vorsieht ── */
@media (max-width: 575.98px) {
	body .login-content.page-card {
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	body .login-content.page-card > .page-card-head {
		margin: -60px -32px 0;        /* dort ist das Polster 60px 32px 32px */
		padding: 40px 32px 22px;
	}

	/* NACHGETRAGEN: randlos war die Karte damit noch nicht. Frappes
	 * Handy-Regel setzt max-width 100%, border-radius 0 und min-height 100svh
	 * -- sie WILL also die volle Breite. Sie bekommt sie nur nicht, weil
	 * <main class="container"> seine 24px Polster behaelt; die 100% beziehen
	 * sich auf einen bereits eingerueckten Kasten. Am Geraet stand die Karte
	 * deshalb als schmale Spalte mit einem beigen Streifen links und rechts.
	 * Nachgemessen im Rahmen: main.container W504, padding 0 24px,
	 * .page_content W456 -- die Karte konnte gar nicht breiter werden.
	 * Nur auf der Anmeldung und nur unterhalb des Umbruchs; die uebrigen
	 * Portalseiten behalten ihr Polster, dort ist es richtig. */
	body[data-path='login'] main.container,
	body[data-path='update-password'] main.container {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
	}
}

/* ── 46.7 Die Karte in die Mitte, und drei Knoepfe im gleichen Abstand ───────────
 *
 * Frappe stellt die Karte oben an: .page-content-wrapper hat padding-top 60px
 * und min-height calc(100vh - 220px). Auf einem gewoehnlichen Schirm stand
 * damit ueber der Karte eine Handbreit und darunter das halbe Fenster leer.
 * min-height statt height: waechst die Karte ueber die Fensterhoehe hinaus --
 * die Registrierung hat mehr Felder --, waechst der Kasten mit, statt oben
 * abzuschneiden. 100vh zuerst, 100svh danach fuer alles, was es kennt.
 *
 * Die Abstaende der drei Knoepfe liefen auseinander: .page-card-actions setzt
 * gap 12px, aber .social-login-buttons brachte oben und .login-button-wrapper
 * unten noch je --margin-md mit. Zwischen "Continue" und "Login with Email
 * Link" lagen also 12px, zwischen diesem und "Login with Keycloak" mehr als
 * das Doppelte. Beide Abstaende auf null, den Rest macht das gap. */
body[data-path='login'] .page-content-wrapper,
body[data-path='update-password'] .page-content-wrapper {
	padding-top: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body .login-content.page-card .page-card-actions .social-logins .social-login-buttons {
	margin-top: 0;
}
body .login-content.page-card .page-card-actions .social-logins .social-login-buttons .login-button-wrapper {
	margin-bottom: 0;
	padding: 0;
}

/* ── 46.8 Der gesperrte Knopf war fast nicht da ──────────────────────────────────
 *
 * Auf /update-password steht "Confirm" gesperrt, bis die Felder gefuellt sind.
 * Frappe faerbt ihn mit --surface-gray-2 auf --ink-gray-4. In Bordmittel zeigen
 * die beiden auf --bm-paper-3 (#E9E4D4) und --bm-grey-light (#CACACA): 1,2:1,
 * also praktisch unsichtbar. In Frappes eigener Belegung waeren es 2,8:1
 * gewesen -- die Umlegung der ink-Leiter hat das hier verschaerft.
 *
 * Gesperrt heisst blass, nicht abwesend: wer den Knopf nicht sieht, sucht ihn.
 * Papier mit Rand und --bm-grey-medium, 5,4:1. Vom aktiven Knopf ist er
 * weiterhin klar zu unterscheiden -- der ist dunkel gefuellt mit weisser
 * Schrift. Nur hier auf den Anmeldekarten, das helle Desk bleibt unberuehrt. */
body .login-content.page-card .page-card-actions .btn-signup:disabled,
body .login-content.page-card .page-card-actions .btn-login:disabled {
	background: var(--bm-paper-3);
	border: 1px solid var(--bm-linie);
	color: var(--bm-grey-medium);
}

/* ── 47. Diagramme: nur Zahlen in Orbitron, und ERPNexts Palette gedaempft ────────
 *
 * ZWEI GEMELDETE FEHLER, beide am selben Diagramm sichtbar (Projektuebersicht).
 *
 * 1. ORBITRON STAND UEBERALL, NICHT NUR AUF ZAHLEN.
 *
 * Die Regel des Hauses lautet: Zahlen sind Orbitron Regular, ausser im
 * Fliesstext und bei Datumsangaben. Der Schriftblock weiter oben trug aber
 *
 *     .frappe-chart text, .chart-container .axis text, .chart-container .chart-label
 *
 * und das ist JEDES Textelement im Diagramm-SVG. Damit liefen die
 * Kategoriebeschriftung ("Testprojekt") und die Legende ("Overdue",
 * "Completed", "Total Tasks") in Orbitron. Das sind Woerter.
 *
 * NACHGESEHEN IN frappe-charts, statt nach Gefuehl zu greifen:
 *   objects/ChartComponents.js fuehrt zwei Achsenschichten, layerClass
 *   'y axis' und 'x axis'. utils/draw.js gibt BEIDEN Achsen dieselbe
 *   Textklasse 'chart-label' -- es gibt also keine Klasse, die "Zahl" bedeutet.
 *   Die Trennung geht nur ueber die Achsengruppe. Die Legende liefert
 *   draw.js/legendDot getrennt: 'legend-dataset-label' fuer das Wort,
 *   'legend-dataset-value' fuer den Wert.
 *
 * Orbitron bekommt jetzt: die y-Achse (.y.axis .chart-label), der Legendenwert,
 * der Datenpunktwert und der Wert im Tooltip. Alles andere faellt auf Manrope
 * zurueck, weil SVG-Text die Schrift vom Rumpf erbt -- dafuer braucht es keine
 * eigene Regel, nur das Weglassen der zu breiten.
 *
 * DIE GRENZE, ausgesprochen: frappe-charts zeichnet nur senkrechte Balken, die
 * y-Achse traegt dort immer Werte. Gaebe es einmal ein waagerechtes Balken-
 * diagramm, stuenden auf der y-Achse Kategorien -- und die liefen dann falsch
 * in Orbitron. CSS kann einer Beschriftung nicht ansehen, ob sie eine Zahl ist.
 *
 * 2. ERPNEXTS DIAGRAMMFARBEN BRENNEN.
 *
 * Die drei Toene kommen nicht aus einer Variablen, sondern stehen fest in
 * ERPNexts Diagrammdefinition -- projects/dashboard_chart/project_summary.json
 * und setup_wizard/data/dashboard_charts.py fuehren
 * ["#fc4f51", "#78d6ff", "#7575ff"]. frappe-charts schreibt sie als
 * style="fill: ..." unmittelbar an den Balken (draw.js, createBar) und als
 * fill-Attribut an den Legendenpunkt. Ueber eine Variable ist da nichts zu
 * drehen.
 *
 * NACHGERECHNET: das helle Blau #78d6ff liegt gegen die Karte auf 1,43:1. Es
 * sticht und ist gleichzeitig schlecht zu sehen -- gesaettigt und hell auf
 * hellem Grund. Entsaettigen hilft also beidem.
 *
 * WARUM DAEMPFEN UND NICHT UMFAERBEN: die naheliegende Loesung waere, die
 * Reihen auf die Hausfarben zu legen. CSS kann sie aber nur ueber ihre
 * Reihenfolge ansprechen (.dataset-0, -1, -2), nicht ueber ihre Bedeutung. Eine
 * feste Zuordnung nach Reihenfolge haette hier "Completed" rot gemacht. Ein
 * Filter laesst die Farbbeziehungen stehen, die ERPNext gewaehlt hat, und nimmt
 * nur die Grelle heraus.
 *
 * DIE STUFE, an gerenderten Mustern verglichen, nicht geschaetzt:
 *   hell    saturate(.5) brightness(.9)   #fc4f51 -> #A65859   4,42:1
 *                                         #78d6ff -> #8FB9CB   1,84:1
 *                                         #7575ff -> #6E6EAC   4,10:1
 *   dunkel  saturate(.6), OHNE brightness. Auf dunklem Grund waere Abdunkeln
 *           reine Verschlechterung; dort genuegt das Entsaettigen und alle drei
 *           bleiben ueber 3,8:1.
 *
 * Zum Nachstellen ist es eine Zahl. Greller: saturate hoeher. Ruhiger: tiefer.
 */
.chart-container .dataset-units,
.chart-container .path-group,
.chart-container .legend-dot,
.frappe-chart .dataset-units,
.frappe-chart .path-group,
.frappe-chart .legend-dot {
	filter: saturate(0.5) brightness(0.9);
}
:root[data-theme="dark"] .chart-container .dataset-units,
:root[data-theme="dark"] .chart-container .path-group,
:root[data-theme="dark"] .chart-container .legend-dot,
:root[data-theme="dark"] .frappe-chart .dataset-units,
:root[data-theme="dark"] .frappe-chart .path-group,
:root[data-theme="dark"] .frappe-chart .legend-dot {
	filter: saturate(0.6);
}

/* ── 47.1 Nachtrag: die Kennzahlkacheln der Berichte ─────────────────────────────
 *
 * Gemeldet an der Projektuebersicht: die vier Kacheln (Average Completion,
 * Total Tasks, Completed Tasks, Overdue Tasks) liefen in Manrope. Das sind
 * Kaesten mit reinen Zahlen, also gehoeren sie nach der Hausregel in Orbitron.
 *
 * NACHGESEHEN: sie entstehen in frappe/public/js/frappe/utils/utils.js,
 * build_summary_item(), als
 *
 *     <div class="summary-item">
 *       <span class="summary-label">…</span>
 *       <div class="summary-value {farbe}">…</div>
 *     </div>
 *
 * innerhalb von .report-summary. Das Theme kannte diese Klasse nicht -- es
 * traf nur die Kacheln der Arbeitsflaeche (.widget .number). Der Bericht hat
 * seine eigenen.
 *
 * NUR .summary-item, NICHT .summary-separator: derselbe Baustein erzeugt fuer
 * type == "separator" ebenfalls ein .summary-value, dort steht aber ein
 * Trennzeichen und keine Zahl.
 *
 * WAS CSS AUCH HIER NICHT KANN: die Klassenliste einer Kachel traegt nur die
 * FARBE (red, green, …), nicht den Datentyp. build_summary_item verarbeitet
 * summary.datatype zwar -- Currency, Int, Float und auch Date --, gibt ihn
 * aber nicht ins DOM. Setzt ein Bericht ein Datum in eine Kachel, laeuft es
 * deshalb in Orbitron. Dieselbe Grenze wie in der Datentabelle: dort steht
 * sie seit Abschnitt 42.2.
 *
 * DABEI ZWEI TOTE SELEKTOREN ENTFERNT. .number-card-value und
 * .progress-percentage standen seit dem ersten Entwurf im Theme. Ueber alle
 * neun installierten Apps gegriffen: sie kommen in genau einer Datei vor --
 * dieser hier. Frappe und ERPNext kennen sie nicht. Ein Selektor, den niemand
 * traegt, sieht wie Abdeckung aus und ist keine.
 */

/* ── 48. „Getting Started": der Kasten stand im Bereich der dunklen Schiene ───────
 *
 * GEMELDET: im hellen Modus war im Einstiegskasten fast nichts zu lesen --
 * Titel, Schritte, „Skip All", sogar die Haekchen standen blass auf Weiss.
 * NACHGEMESSEN: 1,24:1. Die Frage war, ob das beim Bau des dunklen Modus
 * entstanden ist. Antwort: ja, aber nicht dort, wo man es vermutet -- es
 * entstand, als die SCHIENE dunkel wurde. Zwei Ursachen, die sich addieren.
 *
 * 1. DER KASTEN HAENGT IN DER SCHIENE, STEHT ABER NICHT DARIN.
 *
 * Nachgesehen in sidebar.html: der Einhaengepunkt .user-onboarding ist ein
 * GESCHWISTER von .body-sidebar, aber ein Kind von .body-sidebar-container --
 *
 *     <div class="body-sidebar-container">
 *       <div class="body-sidebar"> … </div>
 *       <div class="user-onboarding"></div>     <-- hier haengt der Kasten
 *     </div>
 *
 * und sidebar.js reicht genau dieses Element als wrapper an
 * frappe.ui.UserOnboarding. Der Kasten ist position: fixed, sitzt also unten
 * rechts am Fenster und hat mit der Schiene optisch nichts zu tun. Im DOM
 * steckt er trotzdem darin -- und erbt damit den Variablensatz, den
 * Abschnitt 33 fuer die dunkle Schiene setzt: --text-color auf
 * --bm-rail-text (#EAE7DB), --text-muted auf --bm-rail-mute.
 *
 * Die Regeln des Themes fuer den Kasten (Abschnitte 19 und 26) sind richtig.
 * Sie schreiben color: var(--text-color) -- und genau das war der Fehler nicht,
 * sondern das Opfer. In der Schiene loest dieselbe Variable zu Beige auf.
 *
 * 2. FRAPPE SPRITZT SEIN WEISS ZUR LAUFZEIT EIN.
 *
 * user_onboarding.bundle.js baut ein <style>-Element und haengt es an <head>.
 * Darin steht `.onb-panel { background: #fff }` -- fest, keine Variable. Weil
 * das Element ERST BEIM OEFFNEN entsteht, steht es hinter jedem Stylesheet.
 * Die Regel des Themes stand auf derselben Spezifitaet (0,1,0) und verlor
 * durch die Reihenfolge; deshalb war der Kasten weiss, obwohl das Theme seit
 * Abschnitt 19 Papier dafuer vorsieht. Das ist KEIN Folgefehler des dunklen
 * Modus, das war von Anfang an so.
 *
 * DIE LOESUNG ist beide Male dieselbe: `.user-onboarding .onb-panel` (0,2,0).
 * Das schlaegt die eingespritzte Regel, und es setzt die Variablen am Kasten
 * selbst -- eine eigene Angabe schlaegt jede Vererbung, gleich wie weit oben
 * sie herkommt.
 *
 * GEWAEHLT WURDE .user-onboarding UND NICHT .body-sidebar-container, obwohl
 * beides ginge: der Kasten gehoert zum Einstieg, nicht zur Schiene. Verschiebt
 * Frappe ihn eines Tages aus der Schiene heraus, traegt die Regel weiter.
 *
 * ZURUECKGESTELLT WIRD DER GANZE SATZ, den Abschnitt 33 aendert -- die neun
 * Textfarben und die fuenf Graustufen. Nicht nur die, die der Kasten heute
 * liest. Die Zusage ist damit einfach nachzuhalten: der Kasten steht
 * vollstaendig ausserhalb des Schienenbereichs.
 *
 * NACHGERECHNET, hell auf --bm-paper-1:
 *     Tinte 14,44:1 | gedaempft 5,60:1 | Verweis 9,95:1 | Kasten/Flaeche 1,24:1
 * und dunkel auf demselben Namen (dort #2A2A2A):
 *     Tinte 11,59:1 | gedaempft 4,26:1 | Verweis 6,62:1
 *
 * DER DUNKLE ZWEIG IST KEINE ZIER. Ohne ihn wuerde die Rueckstellung oben die
 * helle Tinte auch im Dunkeln setzen -- #1F1F1F auf #2A2A2A. Der Kasten war
 * im dunklen Modus in Ordnung; er darf es bleiben.
 */
.user-onboarding .onb-panel {
	--text-color:          var(--bm-dark-grey);
	--heading-color:       var(--bm-dark-grey);
	--text-light:          var(--bm-grey-medium);
	--text-muted:          var(--bm-grey-medium);
	--text-on-gray:        var(--bm-dark-grey);
	--text-on-light-gray:  var(--bm-grey-medium);
	--link-color:          var(--bm-blue);
	--border-color:        var(--bm-linie);
	--table-border-color:  var(--bm-linie);
	--gray-50:  #FCFBF8;
	--gray-100: #F7F5EF;
	--gray-200: #EAE7DB;
	--gray-300: #DFD9C2;
	--gray-400: #CACACA;

	background: var(--bm-paper-1);
	color: var(--bm-dark-grey);
	border: 1px solid var(--bm-linie);
	border-radius: var(--border-radius-xl);
	/* Mit Nachdruck: Abschnitt 40 schaltet den Schatten im GANZEN Behaelter der
	 * Schiene ab. Dort ist das richtig -- ein schwebender Kasten braucht ihn,
	 * sonst klebt er an nichts. Dieselbe Ausnahme wie fuer die Meldungsliste. */
	box-shadow: 0 2px 6px rgba(31, 31, 31, 0.10),
	            0 18px 44px -14px rgba(31, 31, 31, 0.30) !important;
}
:root[data-theme="dark"] .user-onboarding .onb-panel {
	--text-color:          var(--bm-beige-light);
	--heading-color:       var(--bm-beige-light);
	--text-light:          var(--bm-grey-on-dark);
	--text-muted:          var(--bm-grey-on-dark);
	--text-on-gray:        var(--bm-beige-light);
	--text-on-light-gray:  var(--bm-grey-on-dark);
	--link-color:          var(--bm-blue-light);
	--border-color:        var(--bm-linie);
	--table-border-color:  var(--bm-linie);

	background: var(--bm-paper-1);
	color: var(--bm-beige-light);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
}

/* ── 49. Kein Orbitron in Masken, die man ausfuellt ───────────────────────────────
 *
 * GEMELDET an der Kindtabelle "Allowances" einer Reisekostenabrechnung: in der
 * aktiven Zeile lief der Platzhalter des Betragsfeldes ("Amount") in Orbitron.
 * Die Anweisung dazu ist eindeutig: in Masken, die man ausfuellt, wird kein
 * Orbitron verwendet.
 *
 * DIE URSACHE WAR EINE REGEL VON MIR, keine von Frappe. Abschnitt 42.2 hat
 * Orbitron ausdruecklich auf Formularfelder gelegt --
 * .frappe-control[data-fieldtype=Currency|Float|Int|Percent], jeweils fuer
 * input, .like-disabled-input und .control-value, zwoelf Selektoren. In einer
 * Kindtabelle wird die angeklickte Zelle genau so ein Bedienelement; deshalb
 * traf es nur die eine Zeile und fiel lange nicht auf.
 *
 * DIE HAUSREGEL WIRD DAMIT SCHAERFER, nicht schwaecher. Sie hiess bisher
 * "Zahlen sind Orbitron, ausser im Fliesstext und bei Datumsangaben". Der
 * ausgeschlossene Bereich ist groesser:
 *
 *     ORBITRON traegt Zahlen, die GELESEN werden.
 *     MANROPE traegt Zahlen, die EINGEGEBEN werden.
 *
 * Das ist keine Geschmacksfrage. Ein Feld, in das man tippt, wird Zeichen fuer
 * Zeichen gelesen, waehrend man es fuellt -- dort zaehlt die vertraute Form der
 * Ziffer, nicht die Wirkung. Eine Kennzahl auf einer Kachel wird als Ganzes
 * erfasst; dort darf die Schrift auftreten. Dazu kommt die durchgestrichene
 * Null: auf einer Kachel ist sie ein Merkmal, in einem Betragsfeld, das gerade
 * geprueft wird, ist sie eine Ruecknahme des Vertrauens.
 *
 * ZWOELF SELEKTOREN ERSATZLOS ENTFERNT, statt eine dreizehnte Regel
 * daraufzusetzen. Nach der Zaehlung bleibt GENAU EINE Stelle im ganzen Theme,
 * die Orbitron zuweist -- die Liste in Abschnitt 3 -- und darin stehen nur
 * Anzeigeflaechen: Kennzahlkacheln der Arbeitsflaeche, Kennzahlkacheln der
 * Berichte, Achsen- und Legendenwerte der Diagramme, der Wert im Tooltip.
 * Kein Formular, keine Liste, keine Tabellenzelle.
 *
 * DIE GLEICHE ZIFFERNBREITE BLEIBT. Sie hat mit der Schrift nichts zu tun und
 * loest ein anderes Problem: beim Filtern und Hochzaehlen sollen die Spalten
 * nicht zappeln. Fuer <input> stand sie schon in Abschnitt 3; .like-disabled-input
 * und .control-value sind keine Eingabefelder, sondern Anzeigen im Formular --
 * die sind dort nachgetragen.
 */