/* Erscheinungsbild der Anwendung.
 *
 * Bootstrap wird NICHT neu übersetzt, sondern über seine CSS-Variablen
 * umgefärbt. Das hat zwei Gründe: die ausgelieferte `bootstrap.min.css`
 * bleibt unverändert und damit austauschbar, und die Templates brauchen
 * keine eigenen Farbklassen -- `btn-primary`, `table`, `alert` usw. sehen
 * überall von selbst richtig aus.
 *
 * Achtung: In Bootstrap 5.3 stehen die Komponentenfarben NICHT in
 * `--bs-primary`, sondern je Komponente in eigenen Variablen mit fest
 * eingetragenen Werten (`.btn-primary { --bs-btn-bg: #0d6efd }`). Ein
 * Überschreiben von `--bs-primary` allein bliebe deshalb wirkungslos --
 * die Komponentenblöcke weiter unten sind kein Beiwerk, sondern nötig.
 */

/* --------------------------------------------------------------------------
 * Palette
 * ------------------------------------------------------------------------*/

:root {
    --bk-navi: #26323d;          /* Kopfleiste */
    --bk-navi-hell: #34434f;     /* Kopfleiste, aktiver Eintrag */
    --bk-primaer: #2f6690;       /* Links, Schaltflächen, Auswahl */
    --bk-primaer-dunkel: #26536f;
    --bk-primaer-hell: #eaf0f5;
    --bk-akzent: #b85c1f;        /* Hervorhebung, Warnung */
    --bk-flaeche: #f5f6f7;       /* Seitenhintergrund */
    --bk-karte: #ffffff;         /* Inhaltsflächen */
    --bk-text: #1f2429;
    --bk-text-leise: #5f6b76;
    --bk-linie: #dde1e5;
    --bk-linie-kraeftig: #c3cad1;
}

/* --------------------------------------------------------------------------
 * Grundlagen: Schrift, Flächen, Linien
 * ------------------------------------------------------------------------*/

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* 15px statt 16px: Die Kalkulationsmasken zeigen viele Spalten
       nebeneinander -- eine Stufe kleiner spart je Zeile spürbar Platz,
       ohne die Lesbarkeit anzugreifen. */
    --bs-body-font-size: 0.9375rem;
    --bs-body-color: var(--bk-text);
    --bs-body-color-rgb: 31, 36, 41;
    --bs-body-bg: var(--bk-flaeche);
    --bs-body-bg-rgb: 245, 246, 247;
    --bs-secondary-color: var(--bk-text-leise);
    --bs-secondary-bg: #eceef0;
    --bs-tertiary-bg: #f0f2f3;
    --bs-border-color: var(--bk-linie);
    --bs-border-color-translucent: var(--bk-linie);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;

    --bs-primary: var(--bk-primaer);
    --bs-primary-rgb: 47, 102, 144;
    --bs-primary-bg-subtle: var(--bk-primaer-hell);
    --bs-primary-border-subtle: #b9cbd9;
    --bs-primary-text-emphasis: var(--bk-primaer-dunkel);

    --bs-link-color: var(--bk-primaer);
    --bs-link-color-rgb: 47, 102, 144;
    --bs-link-hover-color: var(--bk-primaer-dunkel);
    --bs-link-hover-color-rgb: 38, 83, 111;

    --bs-warning: var(--bk-akzent);
    --bs-warning-rgb: 184, 92, 31;

    --bs-heading-color: var(--bk-text);
}

body {
    /* Ohne diese Zeile bliebe der Seitenhintergrund weiß: `--bs-body-bg`
       wirkt nur, weil Bootstrap es am body verwendet -- der Wert oben ist
       gesetzt, die Regel hier hält ihn gegen spätere Vendor-Regeln. */
    background-color: var(--bk-flaeche);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Überschrift einer Maske: mit feiner Linie vom Inhalt abgesetzt. */
.bk-seitenkopf {
    border-bottom: 1px solid var(--bk-linie);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
 * Kopfleiste
 * ------------------------------------------------------------------------*/

.bk-navbar {
    background-color: var(--bk-navi);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.bk-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bk-navbar .nav-link {
    border-radius: var(--bs-border-radius-sm);
    padding-inline: 0.7rem;
}

.bk-navbar .nav-link:hover,
.bk-navbar .nav-link:focus {
    background-color: var(--bk-navi-hell);
}

/* Aktiver Bereich: Ohne Markierung war an der Kopfleiste nicht ablesbar, in
   welchem Modul man sich befindet (Kontext-Prozessor `core.context_processors
   .navigation`). */
.bk-navbar .nav-link.aktiv {
    background-color: var(--bk-navi-hell);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--bk-akzent);
}

/* --------------------------------------------------------------------------
 * Schaltflächen
 * ------------------------------------------------------------------------*/

.btn {
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--bk-primaer);
    --bs-btn-border-color: var(--bk-primaer);
    --bs-btn-hover-bg: var(--bk-primaer-dunkel);
    --bs-btn-hover-border-color: var(--bk-primaer-dunkel);
    --bs-btn-active-bg: #1f4560;
    --bs-btn-active-border-color: #1f4560;
    --bs-btn-disabled-bg: var(--bk-primaer);
    --bs-btn-disabled-border-color: var(--bk-primaer);
}

.btn-outline-primary {
    --bs-btn-color: var(--bk-primaer);
    --bs-btn-border-color: var(--bk-primaer);
    --bs-btn-hover-bg: var(--bk-primaer);
    --bs-btn-hover-border-color: var(--bk-primaer);
    --bs-btn-active-bg: var(--bk-primaer-dunkel);
    --bs-btn-active-border-color: var(--bk-primaer-dunkel);
    --bs-btn-disabled-color: var(--bk-primaer);
    --bs-btn-disabled-border-color: var(--bk-primaer);
}

/* Die zahlreichen Nebenaktionen der Kalkulationsmaske („Aus Katalog
   übernehmen", „Mengen aus Formeln aktualisieren", …) stehen als
   `btn-outline-secondary` zu einem grauen Block nebeneinander. Ruhiger
   Rahmen, damit die eigentliche Tabelle die Aufmerksamkeit behält. */
.btn-outline-secondary {
    --bs-btn-color: #46535f;
    --bs-btn-border-color: var(--bk-linie-kraeftig);
    --bs-btn-hover-color: var(--bk-text);
    --bs-btn-hover-bg: #e7eaed;
    --bs-btn-hover-border-color: var(--bk-linie-kraeftig);
    --bs-btn-active-color: var(--bk-text);
    --bs-btn-active-bg: #dde1e5;
    --bs-btn-active-border-color: var(--bk-linie-kraeftig);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 102, 144, 0.25);
    border-color: var(--bk-primaer);
}

/* --------------------------------------------------------------------------
 * Karten, Flächen, Reiter
 * ------------------------------------------------------------------------*/

.card {
    --bs-card-bg: var(--bk-karte);
    --bs-card-border-color: var(--bk-linie);
    box-shadow: 0 1px 2px rgba(31, 36, 41, 0.05);
}

.card > .card-header {
    background-color: #fafbfb;
    border-bottom-color: var(--bk-linie);
    font-weight: 600;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--bk-linie);
    --bs-nav-tabs-link-active-color: var(--bk-primaer-dunkel);
    --bs-nav-tabs-link-active-bg: var(--bk-karte);
    --bs-nav-tabs-link-active-border-color: var(--bk-linie) var(--bk-linie) var(--bk-karte);
    --bs-nav-link-color: var(--bk-text-leise);
    --bs-nav-link-hover-color: var(--bk-primaer);
}

/* Die Projektreiter fassen zehn Masken in vier Gruppen mit Aufklappmenü
   (Projekt, Kalkulieren, Auswerten, Organisieren -- core/navigation.py), im
   Regelfall also nur vier sichtbare Reiter. Knapperer Abstand und eine Stufe
   kleinere Schrift stammen noch aus der Zeit der zehn Einzelreiter, als das
   Bootstrap-Maß von 1rem seitlichem Innenabstand die Leiste in eine zweite
   Zeile umbrechen ließ; sie schaden der neuen, kürzeren Leiste nicht und
   bleiben für die Dropdown-Einträge (.dropdown-item erbt keine Nav-Maße)
   ebenso passend. */
.nav-tabs .nav-link {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--bk-primaer);
}

/* --------------------------------------------------------------------------
 * Tabellen
 * ------------------------------------------------------------------------*/

.table {
    --bs-table-bg: var(--bk-karte);
    --bs-table-border-color: var(--bk-linie);
    --bs-table-hover-bg: var(--bk-primaer-hell);
    --bs-table-striped-bg: #fafbfc;
    margin-bottom: 0;
}

/* Tabellen stehen auf der grauen Seitenfläche -- ohne eigenen Rahmen
   verlören sie ihre Kante. */
.table-responsive,
.bk-tabelle-rahmen {
    background-color: var(--bk-karte);
    border: 1px solid var(--bk-linie);
    border-radius: var(--bs-border-radius);
    overflow: hidden auto;
}

.table-responsive {
    overflow-x: auto;
}

.table > thead {
    background-color: #f2f4f6;
}

.table > thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bk-text-leise);
    border-bottom: 1px solid var(--bk-linie-kraeftig);
    white-space: nowrap;
}

/* Zahlen untereinander: Ziffern mit fester Breite, damit Beträge in einer
   Spalte optisch fluchten und Größenordnungen auf einen Blick vergleichbar
   sind. Gilt für alle rechtsbündigen Zellen -- das sind in dieser Anwendung
   genau die Mengen-, Preis- und Summenspalten. */
.table td.text-end,
.table th.text-end,
.bk-zahl {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Summen- und Ergebniszeilen deutlich absetzen. In einer Kalkulationstabelle
   ist die Summe der Wert, den das Auge sucht -- sie darf nicht wie eine
   weitere Datenzeile aussehen.

   Die Fläche steht als Variable, weil die Kostenverteilung sie ein zweites
   Mal braucht: Ihre erste Spalte bleibt beim seitlichen Blättern stehen und
   trägt dafür eine eigene, deckende Hintergrundfarbe (siehe
   templates/kalkulation/verteilung.html). Ohne gemeinsamen Wert liefe die
   Summenzeile dort zweifarbig auseinander. */
:root {
    --bk-summe-flaeche: #eef1f4;
}

.table tr.bk-summe > td,
.table tr.bk-summe > th {
    background-color: var(--bk-summe-flaeche);
    border-top: 2px solid var(--bk-linie-kraeftig);
    font-weight: 600;
}

/* Anklickbare Zeilen (Projektliste): der Zeiger allein reicht als Hinweis
   nicht, wenn die Maus die Zeile noch nicht berührt hat. */
tr[data-href] {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Positionsbaum der Kalkulation
 * ------------------------------------------------------------------------*/

/* Kopfzeile bleibt beim Blättern stehen. Voraussetzung ist ein eigener
   Scroll-Bereich: `position: sticky` bezieht sich auf den nächsten
   scrollenden Vorfahren, und `.table-responsive` ist wegen `overflow-x`
   bereits einer -- ohne begrenzte Höhe scrollt der Bereich nie und der
   Kopf bliebe wirkungslos. */
.bk-baum-bereich {
    max-height: calc(100vh - 13rem);
    min-height: 12rem;
}

.bk-baum-bereich > table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f2f4f6;
}

/* Gliederungsebenen: Die Einrückung allein trägt bei tiefen Bäumen nicht
   mehr -- eine feine senkrechte Linie je Ebene macht die Zugehörigkeit auch
   über viele Zeilen hinweg sichtbar.
   Der Farbverlauf zeichnet die Linien im Abstand der Einrückung (1,25em) und
   endet an deren Ende; wie weit das ist, steht als `--bk-einzug` an der Zelle,
   weil es von der Tiefe abhängt. Der Verlauf kommt ohne zusätzliche Elemente
   je Zeile aus -- eine Template-Schleife über die Ebenen wäre der einzige
   andere Weg. */
.bk-baum-titel {
    background-image: repeating-linear-gradient(
        to right, var(--bk-linie) 0 1px, transparent 1px 1.25em);
    background-repeat: no-repeat;
    background-size: var(--bk-einzug, 0) 100%;
}

/* Positionen der obersten Ebene sind die DIN-276-Hauptgruppen und tragen
   die Gliederung -- etwas kräftiger als ihre Unterpositionen. */
.table tr[data-tiefe="0"] > td:first-child {
    font-weight: 600;
}

/* Lange Positionstitel: Der Titel ist eine Schaltfläche und damit eine
   geschlossene Box -- sie bricht nie über Zeilen hinweg, sondern rutscht als
   Ganzes nach unten, sobald sie nicht mehr neben das Aufklapp-Feld passt.
   Genau das geschah bei langen Titeln: Die Zeile begann dann am linken
   Zellenrand, und die Gliederungsebene war nicht mehr ablesbar. Ihre Breite
   richtet sich nach der ganzen Zelle, deshalb muss der Platz des
   Aufklapp-Feldes (1,4em) ausdrücklich abgezogen werden -- dann bleibt sie
   in der Zeile und bricht ihren Text intern um. */
.bk-baum-titel .btn-link {
    max-width: calc(100% - 1.7em);
    white-space: normal;
    text-align: left;
    vertical-align: top;
}

.baum-klapp-knopf {
    color: var(--bk-text-leise);
    text-decoration: none;
    width: 1.4em;
}

.baum-klapp-knopf:hover {
    color: var(--bk-primaer);
}

/* Gliederungszeilen: Eine Position MIT Unterpositionen ist keine normale
   Eingabezeile, sondern eine Summenzeile -- ihr Betrag entsteht aus dem
   Teilbaum darunter (konzept/04-module-und-masken.md, "Gliederungszeilen
   sind als solche erkennbar"). Halbfetter Titel plus sehr dezente Fläche
   heben das beim Überfliegen hervor, ohne die Tabelle unruhig zu machen --
   `--bs-tertiary-bg` ist bereits die projektweite Variable für zurückhaltende
   Flächen (siehe Grundlagen-Block oben), kein neuer Farbwert nötig.
   Ausdrücklich ausgenommen: eine grob kalkulierte Position (§2a) -- sie
   rechnet wie ein Blatt und trägt bereits das Kennzeichen "grob" (Regel dazu
   in `_position_zeile.html`, nicht hier).
   `:not(.table-warning):not(.table-active)` lässt die beiden Bootstrap-
   Kontextfarben (unvollständig / in Bearbeitung) unangetastet, statt sie zu
   überdecken; `opacity-50` (wirkungslos) bleibt bewusst kombinierbar -- die
   Tönung verblasst dann einfach mit. */
tr.bk-baum-gliederung:not(.table-warning):not(.table-active) > td {
    background-color: var(--bs-tertiary-bg);
}

tr.bk-baum-gliederung .bk-baum-titel .btn-link {
    font-weight: 600;
}

/* Gespeicherte, aber wirkungslose Angabe (konzept/03-fachkonzept.md §2/§2c):
   Hat eine Position kalkulierte Unterpositionen, rechnet sie mit deren Summe
   -- ihre eigenen EP-Felder und ihr eigener Status bleiben gespeichert, gehen
   aber in keine Rechnung ein (siehe _position_formularfelder.html und
   _position_zeile.html). Reines Ausgrauen, KEINE Sperre: Anders als bei
   `disabled`/`readonly` bleiben die Felder ausdrücklich bearbeitbar, denn
   genau darüber kommt man von der Fein- zur Grobkalkulation zurück (§2a) --
   derselbe Grundsatz wie bei `opacity-50` einer wirkungslosen Zeile
   (_position_zeile.html Kopfkommentar). Verträgt sich mit den vorhandenen
   Zeilenzuständen: Die Klasse sitzt am Feldblock selbst, nicht an der Zeile,
   und wirkt deshalb unabhängig von `table-warning`, `table-active` oder
   `opacity-50` der umgebenden Tabellenzeile. */
.bk-wert-wirkungslos {
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
 * Formulare
 * ------------------------------------------------------------------------*/

.form-label {
    font-weight: 500;
    margin-bottom: 0.2rem;
    color: #3c4750;
}

/* Feldzeilen: mehrere Felder nebeneinander, Beschriftung über dem Feld.
 *
 * In einer solchen Zeile bricht KEINE Beschriftung um. Bricht eine doch, geht
 * die Zeile an zwei Linien gleichzeitig kaputt: Das Eingabefeld darunter
 * rutscht um eine Textzeile tiefer als seine Nachbarn, und die Beschriftungen
 * selbst stehen auch nicht mehr auf einer Höhe. Welche Beschriftung es trifft,
 * hängt an der Fensterbreite, das Bild wechselt also von Bildschirm zu
 * Bildschirm.
 *
 * `nowrap` erzwingt deshalb die eine Zeile. Die Spalten der Feldzeilen sind
 * inhaltsbreit (`row-cols-auto`): Die Beschriftung bestimmt damit die
 * Spaltenbreite mit, und das Eingabefeld wird so breit wie sie. Wo das zu
 * breite Felder gäbe, ist die Beschriftung zu kürzen. Was dort nicht mehr
 * hineinpasst, gehört in die Feldhilfe hinter dem „?" -- sie ist genau dafür
 * da und steht ohnehin an jedem Feld.
 *
 * Die Breitengrenzen der Spalten (`style="max-width:…"` in den Masken) müssen
 * dazu passen: Ein Deckel, der schmaler ist als die Beschriftung, lässt sie
 * über den Spaltenrand laufen, statt sie umbrechen zu lassen. Beim Ändern
 * einer Beschriftung also die Spaltenbreite mitprüfen.
 *
 * ANWENDEN auf jede Zeile (`.row`), in der mehrere Felder nebeneinander
 * stehen: `class="row row-cols-auto g-2 align-items-start bk-feldzeile"`.
 * Bei einem einzelnen Feld je Zeile schadet die Klasse nicht, nützt aber auch
 * nichts. */
.bk-feldzeile .form-label {
    white-space: nowrap;
}

/* Pflichtfelder. Der Stern kommt aus dem CSS statt aus jedem Template -- die
   Klasse setzt `{% feld %}` (core/templatetags/formular.py), und zwar nur an
   Feldern ohne Vorgabewert: Ein vorbelegtes Auswahlfeld ist technisch
   erforderlich, aber es gibt dort nichts auszufüllen. */
/* Pflichtangaben. Der Stern steht als echtes Zeichen im Markup und nicht als
   `::after` am Label (siehe core/_pflichtzeichen.html): Neben der Beschriftung
   steht häufig noch das „?" der Feldhilfe, und ein `::after` landete dahinter.
   Das CSS gibt ihm nur sein Aussehen.
   Gesetzt wird er von `{% feld %}` (core/templatetags/formular.py) -- und in
   den Tabellen, die direkt in der Zeile bearbeitet werden (Aufschläge,
   Raumbuch), am Spaltenkopf: Dort haben die Felder keine eigene Beschriftung. */
.pflicht-zeichen {
    margin-left: 0.15em;
    color: var(--bk-akzent);
    font-weight: 600;
}

/* Bootstrap gibt Eingabefeldern eine feste `font-size: 1rem` -- also 16px,
   unabhängig von `--bs-body-font-size`. Die Grundschrift der Anwendung steht
   aber bewusst auf 15px (siehe oben: die Kalkulationsmasken zeigen viele
   Spalten nebeneinander). Ohne diese Angleichung sind ausgerechnet die
   Eingabefelder größer als der Text um sie herum, und jede Formularzeile
   trägt vier Pixel mehr, als sie braucht.

   Zusammen mit dem knapperen senkrechten Innenabstand ergibt das rund 34
   statt 38 Pixel Feldhöhe. Waagerecht bleibt es beim Bootstrap-Maß: Der
   Abstand vom Rahmen zum ersten Zeichen ist Lesbarkeit, kein verschenkter
   Platz. Die `-sm`-Varianten der Erfassungstabellen bleiben davon unberührt
   und weiterhin eine Stufe kleiner. */
.form-control,
.form-select {
    border-color: var(--bk-linie-kraeftig);
    font-size: var(--bs-body-font-size);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.form-control::placeholder {
    color: #9aa4ad;
}

/* Zahleneingaben rechtsbündig -- so, wie die Werte danach in der Tabelle
   stehen (siehe js/zahlenformat.js). */
input.dezimalfeld,
input[inputmode="decimal"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.invalid-feedback,
.errorlist {
    color: var(--bs-danger);
    font-size: 0.85em;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
 * Meldungen
 * ------------------------------------------------------------------------*/

.alert {
    border-left-width: 4px;
}

.alert-info {
    --bs-alert-color: #1c4a66;
    --bs-alert-bg: var(--bk-primaer-hell);
    --bs-alert-border-color: var(--bk-primaer);
}

.alert-warning {
    --bs-alert-color: #7a3c12;
    --bs-alert-bg: #fbf1e8;
    --bs-alert-border-color: var(--bk-akzent);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
 * HTMX-Rückmeldung
 * ------------------------------------------------------------------------*/

/* Bei jeder mutierenden Aktion rendert der Server die halbe Maske neu
   (kalkulation/views.py). Dauert das, passierte bisher sichtbar nichts.
   Der Balken läuft am oberen Rand, solange eine Anfrage offen ist --
   HTMX setzt `.htmx-request` selbst. */
#bk-ladebalken {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 2000;
    background: linear-gradient(90deg,
        transparent 0%, var(--bk-akzent) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

body.htmx-request #bk-ladebalken {
    opacity: 1;
    animation: bk-laden 1.1s linear infinite;
}

@keyframes bk-laden {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

/* Während eine Anfrage läuft, wird der auslösende Bereich blass -- so ist
   erkennbar, dass die angezeigten Werte gerade veralten. */
.htmx-request.bk-in-arbeit {
    opacity: 0.55;
    transition: opacity 0.1s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.htmx-request #bk-ladebalken {
        animation: none;
        background: var(--bk-akzent);
    }
}

/* --------------------------------------------------------------------------
 * Startseite
 * ------------------------------------------------------------------------*/

.bk-kennzahl {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bk-primaer-dunkel);
    font-variant-numeric: tabular-nums;
}

.bk-kennzahl-titel {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bk-text-leise);
}

/* Der Geldbetrag unter der Stückzahl. Bewusst kleiner als diese: Die Anzahl
   ist die Sprungmarke in die gefilterte Liste, der Betrag die Einordnung. */
.bk-kennzahl-betrag {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bk-text);
}

.bk-kennzahl-einheit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bk-text-leise);
}

/* Der Kalkulator-Teil der Kachel: Netto-VK, Netto-EK, Marge. Durch eine feine
   Linie abgesetzt, weil er anderen Augen vorbehalten ist als die Leitgröße
   darüber -- wer die Maske zu zweit ansieht, soll die Grenze erkennen. */
.bk-kennzahl-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.75rem;
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bk-linie);
    font-size: 0.82rem;
}

.bk-kennzahl-detail dt {
    font-weight: 400;
    color: var(--bk-text-leise);
}

.bk-kennzahl-detail dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bk-kennzahl-detail .bk-marge {
    font-weight: 600;
    color: var(--bk-primaer-dunkel);
}

/* --------------------------------------------------------------------------
 * Seitenpanel für Eingaben (Kalkulationsmaske)
 * ------------------------------------------------------------------------*/

/* Deutlich breiter als Bootstraps 400 Pixel: Die Feldblöcke des
   Positionsformulars (_position_formularfelder.html) tragen Mindestbreiten bis
   14rem; erst ab dieser Breite stehen die fachlich zusammengehörenden Felder
   (Menge/Einheit, die drei EP-Felder) wieder nebeneinander statt jedes in
   eigener Reihe. Auf schmalen Fenstern nimmt das Panel bis auf einen Rest die
   volle Breite -- dort verhält es sich wie ein Vollbilddialog. */
.bk-seitenpanel {
    width: 44rem;
    max-width: calc(100vw - 1.5rem);
    border-left: 1px solid var(--bk-linie);
    box-shadow: -0.5rem 0 1.5rem rgba(31, 36, 41, 0.12);
}

/* Der Träger ist das Element, in das HTMX den Panelinhalt swappt -- er liegt
   damit zwischen `.offcanvas` und `.offcanvas-body`. Genau dort hängt
   Bootstrap sein Scrollen auf: `.offcanvas` ist eine Flex-Spalte, und der
   Body wächst darin (`flex-grow: 1; overflow-y: auto`). Ohne diese Regeln
   wäre der Träger das einzige Flex-Kind, der Body bekäme keine begrenzte
   Höhe, und alles unterhalb des Fensterrandes wäre abgeschnitten und nicht
   erreichbar -- lange Formulare verloren so ihre Schaltflächen.
   `min-height: 0` gehört dazu: Ohne die Angabe schrumpft ein Flex-Kind nicht
   unter die Höhe seines Inhalts, und der Überlauf wanderte wieder nach außen. */
.bk-seitenpanel-traeger {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.bk-seitenpanel-traeger .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Der Kopf bleibt beim Blättern stehen -- er trägt Titel und Schließen-Knopf. */
.bk-seitenpanel-traeger .offcanvas-header {
    flex: 0 0 auto;
}

/* Ohne Verdunkelung fehlt dem Panel die optische Trennung vom Baum darunter
   -- der Schatten oben und die etwas kräftigere Kopffläche übernehmen das. */
.bk-seitenpanel .offcanvas-header {
    background-color: var(--bk-flaeche);
}

/* --------------------------------------------------------------------------
 * Werkzeugmenü (Kopf der Kalkulationsmaske)
 * ------------------------------------------------------------------------*/

/* Anders als ein gewöhnliches Aufklappmenü trägt hier jeder Eintrag unter der
   Beschriftung eine Erläuterung. Deshalb die feste Breite und der erlaubte
   Umbruch -- Bootstrap setzt .dropdown-item sonst auf `white-space: nowrap`,
   die Erläuterungen würden das Menü über den Bildschirmrand hinaus ziehen. */
.bk-werkzeugmenue {
    width: 30rem;
    max-width: calc(100vw - 2rem);
}

.bk-werkzeugmenue .dropdown-item {
    white-space: normal;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.bk-werkzeugmenue .bk-werkzeug-titel {
    display: block;
    font-weight: 500;
}

.bk-werkzeugmenue .bk-werkzeug-hilfe {
    display: block;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--bk-text-leise);
}

/* Zweiter Erläuterungsabsatz (nur beim Formel-Eintrag, der die erlaubten
   Bezüge auflistet). */
.bk-werkzeugmenue .bk-werkzeug-hilfe + .bk-werkzeug-hilfe {
    margin-top: 0.25rem;
}

.bk-werkzeugmenue .bk-werkzeug-hilfe code {
    color: inherit;
    font-size: 0.95em;
    background-color: var(--bk-flaeche);
    border-radius: 0.2rem;
    padding: 0 0.15rem;
}

/* Auf dem hervorgehobenen Eintrag würde das Grau der Erläuterung zu schwach
   stehen -- dort erbt sie die Textfarbe des Eintrags. */
.bk-werkzeugmenue .dropdown-item:hover .bk-werkzeug-hilfe,
.bk-werkzeugmenue .dropdown-item:focus .bk-werkzeug-hilfe,
.bk-werkzeugmenue .dropdown-item:active .bk-werkzeug-hilfe {
    color: inherit;
}

/* Die Formulare der POST-Aktionen sind nur Träger des CSRF-Feldes; sie dürfen
   den Eintrag nicht schmaler machen als die übrigen. */
.bk-werkzeugmenue form {
    margin: 0;
}

/* --------------------------------------------------------------------------
 * Fußzeile
 * ------------------------------------------------------------------------*/

.bk-footer {
    border-top: 1px solid var(--bk-linie);
    background-color: var(--bk-karte);
    font-size: 0.8rem;
    color: var(--bk-text-leise);
}

/* --------------------------------------------------------------------------
 * Planminiaturen (Standansicht, Planablage -- konzept/09-gebaeudestruktur.md,
 * Abschnitt 4.8)
 * ------------------------------------------------------------------------*/

/* Klein genug, um in einer Tabellenzeile mehrere nebeneinander zu zeigen --
   die Standansicht listet je Zeile bis zu fünf Pflichtpläne (Gebäude) oder
   mehrere Fotos (Raum). */
.bk-planminiatur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--bk-linie);
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background-color: var(--bk-karte);
    flex: none;
}

.bk-planminiatur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Der Hauptplan (höchstens einer je Ziel und Rolle, Regel R6) hebt sich
   farbig ab -- sonst ist die Kennzeichnung nur beim Anklicken sichtbar. */
.bk-planminiatur-haupt {
    border-color: var(--bk-primaer);
    border-width: 2px;
}

.bk-planminiatur-ersatz {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--bk-text-leise);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Druck
 * ------------------------------------------------------------------------*/

@media print {
    .navbar,
    .bk-footer,
    .btn,
    .dropdown {
        display: none !important;
    }

    .bk-baum-bereich {
        max-height: none;
        overflow: visible;
    }

    body,
    .table {
        background: #fff;
    }
}