/* ===========================================================================
   BAUKASTEN 100.2.4 — wie die Bauteile und die Seitenmuster aussehen.

   KEIN FARBWERT, KEIN EIGENER WERT-NAME, KEIN FESTES MASS — ausser Linien und
   Rändern (1–4 px) und dem Punkt in der Pille (6 px), namentlich in Probe P.
   Jede Farbe, Rundung und Schrift kommt als `var(--…)` aus dem Erscheinungsbild
   (100.2.3); jede Länge ist ein Vielfaches der Grundgröße g (14 px seit Rev. 2),
   die Zahl hinter `*` ist das Mass aus Anhang A des Baukonzepts. Sonst würde bei
   kleinerer Grundgröße nur die Schrift kleiner und der Platz bliebe (§3.7).
   Bewacht von den Proben A (`test_baukasten_bauteile.py`), P
   (`test_baukasten_masse.py`) und haus-weit `…/rahmen/proben/test_keine_farbe_…`.

   DIE SIEBEN REGELN (§3.2): Handlungen nie abgeschnitten · nur der Inhalt scrollt
   (Rahmen) · ein Bauteil scrollt in sich · nichts Wichtiges abgeschnitten ·
   Warten verschiebt nichts · ein Fehler steht, wo er entstand · Auswählen heisst
   anzeigen. Das Verhalten steht in `baukasten.js` und hört nur auf die Haken
   (`data-bk-…`); diese Datei zeichnet sie.
   =========================================================================== */

/* --- Scrollbalken: schmal und dunkel, überall im Haus ---------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--balken-griff) var(--balken-bahn);
}
*:hover { scrollbar-color: var(--balken-griff-drueber) var(--balken-bahn); }
*::-webkit-scrollbar { width: var(--balken-breite); height: var(--balken-breite); }
*::-webkit-scrollbar-track { background: var(--balken-bahn); }
*::-webkit-scrollbar-thumb { background: var(--balken-griff);
                             border-radius: var(--rund-pille); }
*::-webkit-scrollbar-thumb:hover { background: var(--balken-griff-drueber); }

/* Was verborgen ist, bleibt verborgen — auch wenn ein Bauteil unten eine
   eigene Anzeige-Art setzt. */
[class^="bk-"][hidden], [class*=" bk-"][hidden] { display: none !important; }

/* --- Knopf ------------------------------------------------------------------ */

.bk-knopf {
  font: inherit;
  font-size: calc(var(--grundgroesse) * .9);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--grundgroesse) * .43);
  flex: none;
  box-sizing: border-box;
  height: calc(var(--grundgroesse) * 2.55);
  padding: 0 calc(var(--grundgroesse) * 1.1);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  background: var(--knopf-grund);
  color: var(--schrift-1);
  white-space: nowrap;
  cursor: pointer;
}
.bk-knopf:hover { background: var(--zeile-drueber); border-color: var(--schrift-4); }
.bk-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-knopf:disabled { opacity: .4; cursor: not-allowed; }
.bk-knopf-haupt { background: var(--akzent); border-color: var(--akzent);
                  color: var(--auf-akzent); }
.bk-knopf-haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.bk-knopf-gefahr { background: none; border-color: var(--kritisch-rand);
                   color: var(--kritisch); }
.bk-knopf-gefahr:hover { background: var(--kritisch-grund); border-color: var(--kritisch); }
.bk-knopf-klein { height: calc(var(--grundgroesse) * 2.1);
                  padding: 0 calc(var(--grundgroesse) * .8);
                  font-size: calc(var(--grundgroesse) * .82); }

/* --- Status-Pille -------------------------------------------------------------- */

.bk-pille { display: inline-flex; align-items: center; box-sizing: border-box;
            gap: calc(var(--grundgroesse) * .43); max-width: 100%;
            min-height: calc(var(--grundgroesse) * 1.65);
            padding: calc(var(--grundgroesse) * .15) calc(var(--grundgroesse) * .7);
            border-radius: var(--rund-pille); font-size: calc(var(--grundgroesse) * .8);
            font-weight: 600; vertical-align: middle; }
/* Der Punkt in der Bedeutungsfarbe — das eine feste Mass ausser den Linien. */
.bk-pille::before { content: ""; flex: none; width: 6px; height: 6px;
                    border-radius: var(--rund-pille); background: currentColor; }
/* Regel 4 (Inbox 31370): eine Pille schneidet ihren Text nie ab — sie bricht um,
   die Spalte darf sich anpassen. Naiv-rot bewacht Probe B. */
.bk-pille-text { white-space: normal; overflow: visible; text-overflow: clip; }
.bk-pille-gut { color: var(--gut); background: var(--gut-grund); }
.bk-pille-achtung { color: var(--achtung); background: var(--achtung-grund); }
.bk-pille-kritisch { color: var(--kritisch); background: var(--kritisch-grund); }
.bk-pille-neutral { color: var(--schrift-3); background: var(--neutral-grund); }
.bk-pille-info { color: var(--info); background: var(--info-grund); }

/* --- Formularfeld: Beschriftung ÜBER dem Feld, Hilfe/Fehler DARUNTER ---------- */

.bk-feld { display: flex; flex-direction: column; gap: calc(var(--grundgroesse) * .36);
           min-width: 0; }
.bk-feld-beschriftung { font-size: calc(var(--grundgroesse) * .82); font-weight: 500;
                        color: var(--schrift-3); }
.bk-pflicht { color: var(--akzent); margin-left: calc(var(--grundgroesse) * .25); }
.bk-eingabe {
  font: inherit;
  font-size: calc(var(--grundgroesse) * .95);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: calc(var(--grundgroesse) * 2.6);
  padding: 0 calc(var(--grundgroesse) * .8);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  background: var(--feld-grund);
  color: var(--schrift-1);
  color-scheme: var(--farbschema);
}
.bk-eingabe::placeholder { color: var(--schrift-4); }
.bk-eingabe:focus { outline: none; border-color: var(--akzent); }
.bk-eingabe-mehrzeilig { height: calc(var(--grundgroesse) * 5);
                         padding: calc(var(--grundgroesse) * .57) calc(var(--grundgroesse) * .8);
                         line-height: 1.45; resize: vertical; }
.bk-eingabe-zahl { font-family: var(--schriftart-zahlen); font-variant-numeric: tabular-nums; }
/* Regel 6: das Feld mit Fehler ist rot umrandet (`aria-invalid`, gesetzt vom
   Server oder von `baukasten.js`), und der Fehlertext ersetzt die Hilfe. */
.bk-eingabe[aria-invalid="true"] { border-color: var(--kritisch); }
.bk-hilfe { font-size: calc(var(--grundgroesse) * .78); color: var(--schrift-4); }
.bk-fehlertext { font-size: calc(var(--grundgroesse) * .8); color: var(--kritisch); }
.bk-feld:has(.bk-fehlertext:not([hidden])) .bk-hilfe { display: none; }

/* Das Kästchen: die Beschriftung steht NEBEN ihm, nicht darunter. */
.bk-kaestchen { display: inline-flex; align-items: center;
                gap: calc(var(--grundgroesse) * .57);
                min-height: calc(var(--grundgroesse) * 2.1);
                font-size: calc(var(--grundgroesse) * .9); color: var(--schrift-2);
                white-space: nowrap; cursor: pointer; }
.bk-kaestchen-feld { flex: none; margin: 0; width: calc(var(--grundgroesse) * 1.07);
                     height: calc(var(--grundgroesse) * 1.07);
                     accent-color: var(--akzent); }

/* --- Raster: vier Spalten, ein Feld belegt 1, 2 oder alle 4 ------------------ */

.bk-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--grundgroesse) * .9) var(--grundgroesse);
  align-items: start;
}
.bk-zelle { min-width: 0; }
.bk-breite-2 { grid-column: span 2; }
.bk-breite-4 { grid-column: 1 / -1; }
/* Ein Kästchen im Raster steht auf der Höhe der Eingabefelder daneben: es
   rückt um die Höhe einer Feld-Beschriftung nach unten. */
.bk-zelle > .bk-kaestchen { margin-top: calc(var(--grundgroesse) * 1.4);
                            min-height: calc(var(--grundgroesse) * 2.6); }

/* --- Warte-Anzeige und allgemeiner Fehler — in jeder Karte, jedem Fenster ---- */

/* Regel 5 (Eintrag 31372): der Lauf-Balken liegt am oberen Rand ÜBER dem Inhalt
   — er nimmt keinen Platz ein. Sichtbar erst, wenn `baukasten.js` nach 300 ms
   `data-bk-laedt` setzt; eine schnelle Antwort zeigt gar nichts. */
.bk-warte { position: absolute; top: 0; left: var(--rund-flaeche);
            right: var(--rund-flaeche); height: 2px;
            background: var(--warte-verlauf) no-repeat; background-size: 40% 100%;
            opacity: 0; pointer-events: none; }
.bk-karte[data-bk-laedt] > .bk-warte,
.bk-fenster[data-bk-laedt] > .bk-fenster-form > .bk-warte {
  opacity: 1;
  animation: bk-lauf 1.1s ease-in-out infinite;
}
@keyframes bk-lauf { from { background-position: -40% 0; }
                     to { background-position: 140% 0; } }

/* Regel 6 (Eintrag 31373): ein allgemeiner Fehler (Netz, Sitzung) steht in der
   Karte — oder dem Fenster —, deren Handlung ihn ausgelöst hat. */
.bk-meldefehler { margin: 0;
                  padding: calc(var(--grundgroesse) * .5) calc(var(--grundgroesse) * .8);
                  border-left: var(--rand-aktiv) solid var(--kritisch);
                  border-radius: var(--rund-bedien); background: var(--kritisch-grund);
                  color: var(--kritisch); font-size: calc(var(--grundgroesse) * .85); }

/* --- Karte mit Kopf ------------------------------------------------------------ */

.bk-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--grundgroesse) * .8);
  box-sizing: border-box;
  min-width: 0;
  padding: calc(var(--grundgroesse) * 1.1) calc(var(--grundgroesse) * 1.2);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-flaeche);
  background: var(--karte);
}
.bk-karte-kopf { display: flex; align-items: center; flex-wrap: wrap;
                 gap: calc(var(--grundgroesse) * .7); }
.bk-karte-titelblock { min-width: 0; }
.bk-karte-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.05);
                  font-weight: 600; color: var(--schrift-1); }
.bk-karte-anzahl { margin-left: calc(var(--grundgroesse) * .3);
                   font-family: var(--schriftart-zahlen);
                   font-size: calc(var(--grundgroesse) * .85); font-weight: 400;
                   color: var(--schrift-4); }
.bk-karte-unterzeile { margin: calc(var(--grundgroesse) * .25) 0 0;
                       font-size: calc(var(--grundgroesse) * .85); color: var(--schrift-3); }
.bk-karte-handlungen { margin-left: auto; display: flex; align-items: center;
                       flex-wrap: wrap; gap: calc(var(--grundgroesse) * .5); }
/* Der freigehaltene Platz für den Filter (§3.3) — heute leer, also unsichtbar. */
.bk-filterplatz:empty { display: none; }
/* 2.5.0: der befüllte Filterplatz — Umschalter, Auswahl, Suche in einer Zeile, die umbricht. */
.bk-filterplatz { display: flex; flex-wrap: wrap; align-items: center;
                  gap: calc(var(--grundgroesse) * .4); }
/* --- Umschalter (2.5.0): ein Knopf ein/aus, an = Akzent-Rand und -Grund ---------- */
.bk-umschalter { font-family: var(--schriftart); font-size: calc(var(--grundgroesse) * .82);
                 display: inline-flex; align-items: center; gap: calc(var(--grundgroesse) * .4);
                 height: calc(var(--grundgroesse) * 2); padding: 0 calc(var(--grundgroesse) * .7);
                 border: 1px solid var(--linie-karte); border-radius: var(--rund-bedien);
                 background: none; color: var(--schrift-3); cursor: pointer; }
.bk-umschalter:hover { background: var(--zeile-drueber); }
.bk-umschalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-umschalter[aria-pressed="true"] { border-color: var(--akzent); color: var(--schrift-1);
                                      background: var(--zeile-gewaehlt); }
.bk-umschalter-kritisch, .bk-umschalter-kritisch[aria-pressed="true"] { color: var(--kritisch);
                                                                      border-color: var(--kritisch-rand); }
.bk-umschalter-zahl { font-family: var(--schriftart-zahlen); color: var(--schrift-4); }
/* Der Rumpf scrollt in sich, nie die Seite: eine zu breite Tabelle bekommt
   hier ihren eigenen Balken. */
.bk-karte-rumpf { display: flex; flex-direction: column; min-width: 0;
                  gap: calc(var(--grundgroesse) * .8); }
.bk-karte-begrenzt .bk-karte-rumpf { max-height: calc(var(--grundgroesse) * 24);
                                     overflow: auto; }
.bk-karte-rumpf pre { margin: 0; padding: calc(var(--grundgroesse) * .8) var(--grundgroesse);
                      border: 1px solid var(--zeile-linie); border-radius: var(--rund-bedien);
                      background: var(--feld-grund); font-family: var(--schriftart-zahlen);
                      font-size: calc(var(--grundgroesse) * .88); line-height: 1.6;
                      color: var(--schrift-1); white-space: pre-wrap;
                      overflow-wrap: anywhere; }
.bk-abschnitt { margin: 0; font-size: calc(var(--grundgroesse) * .72); font-weight: 600;
                letter-spacing: .08em; text-transform: uppercase; color: var(--schrift-4); }

/* --- Tabelle ---------------------------------------------------------------------- */

.bk-tabelle-rahmen { min-width: 0; overflow: auto; }
.bk-tabelle {
  width: 100%;
  min-width: calc(var(--grundgroesse) * 30);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--schrift-zelle);
}
.bk-breite-s { width: calc(var(--grundgroesse) * 5); }
.bk-breite-m { width: calc(var(--grundgroesse) * 8); }
.bk-breite-l { width: calc(var(--grundgroesse) * 10.5); }
.bk-breite-xl { width: calc(var(--grundgroesse) * 14); }
/* EIN Kopf-Stil für JEDE Spalte (Inbox 31370) — gedämpft, in Montserrat, nie
   abgeschnitten. Er BLEIBT STEHEN, wenn die Tabelle in sich scrollt (§3.3), und
   trägt dafür einen deckenden Grund; die Linie darunter ist ein Schatten, weil
   ein Rand an einer stehenden Zelle mitwandern würde. */
.bk-tabelle th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 calc(var(--grundgroesse) * .7) calc(var(--grundgroesse) * .55);
  background: var(--tabellenkopf-grund);
  box-shadow: inset 0 -1px 0 var(--linie);
  text-align: left;
  font-family: var(--schriftart);
  font-size: calc(var(--grundgroesse) * .72);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schrift-4);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.bk-tabelle td {
  padding: calc(var(--grundgroesse) * .55) calc(var(--grundgroesse) * .7);
  border-bottom: 1px solid var(--zeile-linie);
  vertical-align: middle;
  color: var(--schrift-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Regel 4b (2.6.0, Baukonzept 101.3.3 Notiz 984): IN EINER TABELLENZELLE hält sich
   eine Pille an die Spaltenbreite wie Text — sie läuft nie in die Nachbarspalte,
   sondern wird mit „…" gekürzt; der GANZE Text steht im Hinweis der Pille (`title`,
   beim Darüberfahren). Ausserhalb einer Tabelle gilt weiter Regel 4 (umbrechen).
   Naiv-rot bewacht Probe B (Text) und die Browser-Probe „Pille" (gemessen). */
.bk-tabelle td .bk-pille { max-width: 100%; overflow: hidden; }
.bk-tabelle td .bk-pille-text { min-width: 0; white-space: nowrap; overflow: hidden;
                                text-overflow: ellipsis; }
.bk-tabelle tbody tr:hover td { background-color: var(--zeile-drueber); }
.bk-tabelle tr[data-bk-gewaehlt] td { background-color: var(--zeile-gewaehlt); }
.bk-tabelle tr[data-bk-gewaehlt] td:first-child {
  box-shadow: inset var(--rand-aktiv) 0 0 var(--akzent);
}
/* Form „wählbar" (§3.4): die ganze Zeile ist die Schaltfläche; mit der Tastatur
   erreichbar und sichtbar, wo der Fokus steht. */
.bk-tabelle-waehlbar tbody tr { cursor: pointer; }
.bk-tabelle-waehlbar tbody tr:focus-visible { outline: 2px solid var(--akzent);
                                              outline-offset: -2px; }
.bk-tabelle td.bk-spalte-stark { color: var(--schrift-1); font-weight: 600; }
.bk-tabelle td.bk-spalte-zahl { font-family: var(--schriftart-zahlen);
                                font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.bk-zeile-oben, .bk-zeile-unten { display: block; overflow: hidden; text-overflow: ellipsis; }
.bk-zeile-unten { margin-top: calc(var(--grundgroesse) * .14); font-weight: 400;
                  font-size: calc(var(--grundgroesse) * .82); color: var(--schrift-3); }

/* DER SPALTEN-GRIFF (2.1.0, Baukonzept 101.2.2 §3.2) — am rechten Rand JEDES
   Kopfs. Der stehende Kopf ist sein Bezugsrahmen (`position: sticky` ist einer).
   Der Kopftext bricht wie bisher um; seine Breite in EINER Zeile ist die
   Mindestbreite der Spalte (gemessen von `baukasten_ziehen.js`). Ziehen scrollt
   die Seite nicht (`touch-action`), der Mauszeiger zeigt die Richtung. */
.bk-kopftext { display: inline; }
.bk-griff { position: absolute; top: 0; right: 0; bottom: 0;
            width: calc(var(--grundgroesse) * .6); cursor: col-resize;
            touch-action: none; user-select: none; }
.bk-griff::after { content: ""; position: absolute; top: 20%; bottom: 20%;
                   right: calc(var(--grundgroesse) * .2);
                   border-right: 1px solid var(--linie-karte); }
.bk-griff:hover::after { border-right: 2px solid var(--akzent); }
/* 2.5.0 SORTIEREN: ein sortierender Kopf ist eine Schaltfläche; das Pfeilchen steht
   nur am Kopf, nach dem gerade sortiert ist (`data-bk-sortiert`, gesetzt vom Verhalten). */
.bk-tabelle th[data-bk-sortart] { cursor: pointer; }
.bk-tabelle th[data-bk-sortart]:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.bk-sortpfeil { margin-left: calc(var(--grundgroesse) * .3); color: var(--akzent); }
/* Die gedämpfte Zelle (2.1.0): ein abgeleiteter Wert, etwa eine Summe. */
.bk-tabelle td.bk-zelle-gedaempft, .bk-baum-text[data-bk-gedaempft] {
  color: var(--schrift-4); font-style: italic; }

/* DIE FORM „BAUM" (2.1.0, Hierarchie seit 2.2.0, Inbox 31383): die erste Zelle ist
   um ihre Ebene eingerückt — je 1,6 Grundgrößen, genau die Breite von Pfeil und
   Abstand, sodass der Pfeil des Kindes unter dem Text des Elternteils beginnt.
   Vorne steht der Auf-/Zu-Pfeil (ein Knopf, der NICHT wählt) oder ein gleich
   breiter Platz. Die Regeln tragen `td` mit, weil `.bk-tabelle td` sonst sein
   `padding` über jede einzelne Klasse stellt — so blieb die Einrückung bis 2.1.0
   in jedem Browser bei 0 (gemessen, nicht gesehen).
   Die Stufen folgen dem Inhaltsverzeichnis des Entwurfs: Ebene 0 fett und hell,
   Ebene 1 normal, ab Ebene 2 kleiner und gedämpfter; die Nummer steht immer
   gedämpft in der Schrift der Zahlen. Dezente senkrechte Führungslinien je
   Ebene laufen als Hintergrund der ersten Zelle (`background-color` an
   Hover und Auswahl, damit sie darunter stehen bleiben). */
.bk-tabelle td.bk-baum-zelle { padding-left: calc(var(--grundgroesse) * .4); }
.bk-tabelle td.bk-ebene-1 { padding-left: calc(var(--grundgroesse) * 2); }
.bk-tabelle td.bk-ebene-2 { padding-left: calc(var(--grundgroesse) * 3.6); }
.bk-tabelle td.bk-ebene-3 { padding-left: calc(var(--grundgroesse) * 5.2); }
.bk-tabelle td.bk-ebene-4 { padding-left: calc(var(--grundgroesse) * 6.8); }
.bk-tabelle td.bk-ebene-5 { padding-left: calc(var(--grundgroesse) * 8.4); }
.bk-tabelle td.bk-baum-zelle { background-repeat: no-repeat;
  background-size: calc(var(--grundgroesse) * .08) 100%; }
.bk-tabelle td.bk-ebene-1 {
  background-image: linear-gradient(var(--linie-karte), var(--linie-karte));
  background-position: calc(var(--grundgroesse) * 1.05) 0; }
.bk-tabelle td.bk-ebene-2 {
  background-image: linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte));
  background-position: calc(var(--grundgroesse) * 1.05) 0, calc(var(--grundgroesse) * 2.65) 0; }
.bk-tabelle td.bk-ebene-3 {
  background-image: linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte));
  background-position: calc(var(--grundgroesse) * 1.05) 0, calc(var(--grundgroesse) * 2.65) 0, calc(var(--grundgroesse) * 4.25) 0; }
.bk-tabelle td.bk-ebene-4 {
  background-image: linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte));
  background-position: calc(var(--grundgroesse) * 1.05) 0, calc(var(--grundgroesse) * 2.65) 0, calc(var(--grundgroesse) * 4.25) 0, calc(var(--grundgroesse) * 5.85) 0; }
.bk-tabelle td.bk-ebene-5 {
  background-image: linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte)), linear-gradient(var(--linie-karte), var(--linie-karte));
  background-position: calc(var(--grundgroesse) * 1.05) 0, calc(var(--grundgroesse) * 2.65) 0, calc(var(--grundgroesse) * 4.25) 0, calc(var(--grundgroesse) * 5.85) 0, calc(var(--grundgroesse) * 7.45) 0; }
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="0"] td { font-weight: 700;
                                                       color: var(--schrift-1); }
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="1"] td { font-weight: 400;
                                                       color: var(--schrift-2); }
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="2"] td,
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="3"] td,
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="4"] td,
.bk-tabelle.bk-tabelle-baum tr[data-bk-ebene="5"] td {
  font-weight: 400; color: var(--schrift-3);
  font-size: calc(var(--schrift-zelle) * .92); }
.bk-tabelle.bk-tabelle-baum td.bk-baum-zelle .bk-baum-text {
  font-family: var(--schriftart-zahlen); color: var(--schrift-3); }
.bk-pfeil, .bk-pfeil-platz { display: inline-flex; align-items: center;
                             justify-content: center; vertical-align: middle;
                             box-sizing: border-box;
                             width: calc(var(--grundgroesse) * 1.3);
                             height: calc(var(--grundgroesse) * 1.3);
                             margin-right: calc(var(--grundgroesse) * .3); }
.bk-pfeil { padding: 0; border: 0; border-radius: var(--rund-bedien); background: none;
            color: var(--schrift-3); cursor: pointer; }
.bk-pfeil:hover { color: var(--schrift-1); background: var(--zeile-drueber); }
.bk-pfeil:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.bk-pfeil::before { content: ""; width: calc(var(--grundgroesse) * .35);
                    height: calc(var(--grundgroesse) * .35);
                    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                    transform: rotate(-45deg); }
.bk-tabelle tr[data-bk-offen] .bk-pfeil::before { transform: rotate(45deg); }

/* DIE HANDLUNGS-ZELLE — Regel „Handlungen werden nie abgeschnitten". Sie hebt
   ausdrücklich auf, was jede andere Zelle trägt: kein Überstand verstecken,
   kein Auslassungszeichen, Umbruch erlaubt. Die Knöpfe rutschen in eine zweite
   Zeile, statt zu verschwinden. */
.bk-tabelle th.bk-spalte-handlungen { text-align: right; }
.bk-tabelle td.bk-spalte-handlungen { overflow: visible; text-overflow: clip;
                                      white-space: normal; cursor: default; }
.bk-handlungen { display: flex; flex-wrap: wrap; justify-content: flex-end;
                 gap: calc(var(--grundgroesse) * .43); }

/* Die Leer-Anzeige — statt einer leeren Tabelle, und rechts im Muster
   „Liste–Angaben", solange nichts gewählt ist. */
.bk-leer { margin: 0; padding: calc(var(--grundgroesse) * 1.4);
           border: 1px dashed var(--linie-karte); border-radius: var(--rund-bedien);
           text-align: center; font-size: calc(var(--grundgroesse) * .9);
           color: var(--schrift-3); }

/* --- Fenster: Rückfrage und Formular (`<dialog>`) ------------------------------- */

/* KEINE Anzeige-Art am Fenster selbst: sie überstimmte die Regel des Browsers,
   die ein geschlossenes Fenster verbirgt. Die Anordnung trägt der Innenteil. */
.bk-fenster { box-sizing: border-box; width: calc(var(--grundgroesse) * 44);
              max-width: calc(100% - var(--luft-gross) * 2); padding: 0;
              border: 1px solid var(--linie-karte); border-radius: var(--rund-flaeche);
              background: var(--fenster-grund); color: var(--schrift-2);
              box-shadow: var(--tiefe-fenster); }
.bk-fenster-rueckfrage { width: calc(var(--grundgroesse) * 30); }
.bk-fenster::backdrop { background: var(--fenster-schleier); }
.bk-fenster-form { position: relative; display: flex; flex-direction: column; margin: 0;
                   gap: var(--grundgroesse); padding: calc(var(--grundgroesse) * 1.4); }
.bk-fenster-kopf { display: flex; align-items: center; gap: calc(var(--grundgroesse) * .7); }
.bk-fenster-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.05);
                    font-weight: 600; color: var(--schrift-1); }
.bk-fenster-zu { margin-left: auto; padding: 0 calc(var(--grundgroesse) * .3);
                 border: 0; border-radius: var(--rund-bedien); background: none;
                 font: inherit; font-size: calc(var(--grundgroesse) * 1.43); line-height: 1;
                 color: var(--schrift-3); cursor: pointer; }
.bk-fenster-zu:hover { color: var(--schrift-1); }
.bk-fenster-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-fenster-text { margin: 0; line-height: 1.5; }
.bk-fenster-handlungen { display: flex; flex-wrap: wrap; justify-content: flex-end;
                         gap: calc(var(--grundgroesse) * .6);
                         padding-top: var(--grundgroesse);
                         border-top: 1px solid var(--linie); }

/* --- Seitenkopf: Titel und Einleitung, rechts die Handlungen der Seite ------- */

.bk-seitenkopf { display: flex; align-items: flex-end; flex-wrap: wrap;
                 gap: calc(var(--grundgroesse) * .9); }
.bk-seitenkopf-block { min-width: 0; flex: 1 1 auto; }
.bk-seitenkopf-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.6); font-weight: 700;
                       letter-spacing: -.01em; color: var(--schrift-1); }
.bk-seitenkopf-text { margin: calc(var(--grundgroesse) * .29) 0 0;
                      max-width: calc(var(--grundgroesse) * 55); line-height: 1.45;
                      font-size: calc(var(--grundgroesse) * .93); color: var(--schrift-3); }
.bk-seitenkopf-handlungen { display: flex; align-items: center; flex-wrap: wrap;
                            gap: calc(var(--grundgroesse) * .6); }

/* --- Die zwei Seitenmuster (§3.3) ---------------------------------------------- */

/* Das Muster füllt die Höhe der Inhaltsfläche (die der Rahmen als Spalte legt)
   und scrollt SELBST NIE: `min-height: 0` auf jeder Stufe lässt die Karten
   kleiner werden als ihr Inhalt — erst dann scrollen sie in sich. */
.bk-seite { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
            gap: var(--grundgroesse); }
.bk-seite-rumpf { flex: 1 1 auto; min-height: 0; display: grid;
                  grid-template-columns: minmax(0, 1fr); gap: var(--grundgroesse); }
/* Liste–Angaben: zwei gleich breite Hälften, dazwischen der TRENNBALKEN (2.1.0).
   Gezogen setzt `baukasten_ziehen.js` die linke Breite an dieser Stelle. */
.bk-seite-liste_angaben > .bk-seite-rumpf {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: calc(var(--grundgroesse) * .2);
}
/* 2.5.0: die Liste vorgegeben breiter (3:2, 101.3.3 §3.1) — der Balken zieht weiter. */
.bk-seite-liste-breiter > .bk-seite-rumpf { grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr); }
.bk-balken { position: relative; width: calc(var(--grundgroesse) * .6);
             cursor: col-resize; touch-action: none; user-select: none;
             border-radius: var(--rund-bedien); }
.bk-balken::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
                     border-left: 1px solid var(--linie-karte); }
.bk-balken:hover::before, .bk-balken:focus-visible::before {
  border-left: 2px solid var(--akzent); }
.bk-balken:focus-visible { outline: none; }
.bk-seite-liste, .bk-seite-angaben { min-width: 0; min-height: 0; display: flex;
                                     flex-direction: column; }
.bk-seite-liste > .bk-karte, .bk-seite-angaben > .bk-karte { flex: 1 1 auto; min-height: 0; }
.bk-seite .bk-karte-rumpf { flex: 1 1 auto; min-height: 0; }
.bk-seite .bk-tabelle-rahmen { flex: 0 1 auto; min-height: 0; }
.bk-seite .bk-karte-rumpf pre { flex: 1 1 0; min-height: calc(var(--grundgroesse) * 6);
                                overflow: auto; }

/* --- Das Muster-Blatt (`/baukasten`) -------------------------------------------- */

.bk-muster-reihe { display: flex; flex-wrap: wrap; align-items: center;
                   gap: calc(var(--grundgroesse) * .7); }
.bk-muster-aufruf { font-family: var(--schriftart-zahlen);
                    font-size: calc(var(--grundgroesse) * .75); color: var(--schrift-4); }
.bk-muster-hinweis { margin: 0; font-size: calc(var(--grundgroesse) * .78);
                     color: var(--schrift-4); }
/* Ein Seitenmuster VERKLEINERT: ein Kasten fester Höhe, den das Muster füllt. */
.bk-muster-seite { display: flex; flex-direction: column;
                   height: calc(var(--grundgroesse) * 22);
                   padding: var(--grundgroesse);
                   border: 1px dashed var(--linie-karte);
                   border-radius: var(--rund-bedien); }

/* --- Schmale Fenster ------------------------------------------------------------- */

@media (max-width: 50rem) {
  .bk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Untereinander: kein Balken, und keine gemerkte Teilung überstimmt das. */
  .bk-seite-liste_angaben > .bk-seite-rumpf { grid-template-columns: minmax(0, 1fr) !important; }
  .bk-balken { display: none; }
}

/* ===========================================================================
   BAUKASTEN 100.2.4 — DIE LESE-TEILE (2.3.0, Baukonzept 101.3.1 Phase A).

   Ausgeliefert HINTER `baukasten.css` als EIN Text (`umsetzung.JinjaBauteile.stil`,
   `GET /baukasten.css`). Dieselben Regeln: kein Farbwert, kein eigener Wert-Name,
   jede Länge ein Vielfaches der Grundgröße g — ausser Linien und Rändern (1–4 px).
   Die Formen folgen Entwurf 1 vom 29.9.2026 („Konzept-Ansicht K101.2.2"), dessen
   14-px-Masse hier als Vielfache von g stehen.

   ZWEI BAUKASTEN-REGELN TRAGEN DIESE DATEI (Notiz 967 an 100.2.4): der gewählte
   oder aktive Block — Eintrag im Verzeichnis, Notiz-Karte — trägt den ORANGEN RAND
   LINKS (`--rand-aktiv` in `--akzent`, wie die gewählte Tabellenzeile); und die
   HIERARCHIE: Ebene 1 fett und hell, darunter eingerückt, kleiner und gedämpfter,
   die Nummer gedämpft in der Schrift der Zahlen.
   =========================================================================== */

/* --- Das Seitenmuster „lesen": links schmal, rechts die Lesefläche ------------- */

.bk-seite-lesen > .bk-seite-rumpf {
  grid-template-columns: calc(var(--grundgroesse) * 21.5) auto minmax(0, 1fr);
  column-gap: calc(var(--grundgroesse) * .2);
}
/* Beide Karten rollen IN SICH; die Seite nie. Die rechte ist die Lesefläche, deren
   Rollen das Verzeichnis folgt (`baukasten_lesen.js`). */
.bk-seite-lesen .bk-karte-rumpf { overflow: auto; }
.bk-seite-lesen .bk-seite-angaben .bk-karte-rumpf { gap: calc(var(--grundgroesse) * 1.2); }

/* --- Marker-Abzeichen: [OK] grün, [!] rot, [A] gelb ----------------------------- */

/* Unterscheidbar AUCH IN DER HELLIGKEIT (Konzept §4.2 A), nicht nur im Farbton:
   [OK] helle Schrift auf zarter Fläche, [!] mit kräftigem Rand, [A] DUNKLE Schrift
   auf voller gelber Fläche — so trennt sie auch, wer Grün und Gelb nicht trennt. */
.bk-marker { display: inline-flex; align-items: center; flex: none;
             padding: calc(var(--grundgroesse) * .07) calc(var(--grundgroesse) * .36);
             border-width: 1px; border-style: solid; border-color: var(--neutral-grund);
             border-radius: calc(var(--grundgroesse) * .29);
             font-family: var(--schriftart-zahlen); font-size: calc(var(--grundgroesse) * .75);
             font-weight: 600; line-height: 1.3; white-space: nowrap; }
.bk-marker-ok { color: var(--gut); background: var(--gut-grund); border-color: var(--gut-grund); }
.bk-marker-ausruf { color: var(--kritisch); background: var(--kritisch-grund);
                    border-color: var(--kritisch-rand); }
.bk-marker-anmerkung { color: var(--auf-akzent); background: var(--achtung);
                        border-color: var(--achtung); }
.bk-marker-leer { color: var(--schrift-4); background: none;
                  border: 1px dashed var(--linie-karte); }
.bk-marker-blass { opacity: .35; }

/* --- Das Inhaltsverzeichnis ------------------------------------------------------ */

.bk-verzeichnis-liste { list-style: none; margin: 0; padding: 0; display: flex;
                        flex-direction: column; }
.bk-verzeichnis-eintrag {
  display: flex; align-items: center; gap: calc(var(--grundgroesse) * .57);
  padding: calc(var(--grundgroesse) * .36) calc(var(--grundgroesse) * .57);
  border-radius: calc(var(--grundgroesse) * .43);
  font-size: calc(var(--grundgroesse) * .86); color: var(--schrift-2);
  text-decoration: none; cursor: pointer;
}
.bk-verzeichnis-eintrag:hover { background: var(--zeile-drueber); }
.bk-verzeichnis-eintrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.bk-verzeichnis-eintrag.bk-lese-ebene-1 { color: var(--schrift-1); font-weight: 600;
                                          margin-top: calc(var(--grundgroesse) * .29); }
.bk-verzeichnis-eintrag.bk-lese-ebene-2 {
  padding-left: calc(var(--grundgroesse) * 1.87);
  font-size: calc(var(--grundgroesse) * .82); color: var(--schrift-3); }
.bk-verzeichnis-eintrag.bk-lese-ebene-3 {
  padding-left: calc(var(--grundgroesse) * 3.17);
  font-size: calc(var(--grundgroesse) * .8); color: var(--schrift-3); }
/* DER AKTIVE EINTRAG: der orange Rand links (Baukasten-Regel, Notiz 967). */
.bk-verzeichnis-eintrag[data-bk-aktiv] {
  background: var(--zeile-gewaehlt); color: var(--schrift-1);
  box-shadow: inset var(--rand-aktiv) 0 0 var(--akzent); }
.bk-verzeichnis-nummer { flex: none; min-width: calc(var(--grundgroesse) * 1.86);
                         font-family: var(--schriftart-zahlen); font-weight: 400;
                         color: var(--schrift-4); }
.bk-verzeichnis-titel { flex: 1 1 auto; min-width: 0; overflow: hidden;
                        text-overflow: ellipsis; white-space: nowrap; }
/* Die Zahl offener Notizen im orangen Kreis — nur wenn grösser null. */
.bk-verzeichnis-zahl { flex: none; display: inline-flex; align-items: center;
                       justify-content: center; box-sizing: border-box;
                       min-width: calc(var(--grundgroesse) * 1.2);
                       height: calc(var(--grundgroesse) * 1.2);
                       padding: 0 calc(var(--grundgroesse) * .29);
                       border-radius: var(--rund-pille); background: var(--achtung);
                       color: var(--auf-akzent); font-size: calc(var(--grundgroesse) * .75);
                       font-weight: 700; }

/* --- Notiz-Karte und Notiz-Gruppe ------------------------------------------------ */

.bk-notiz { box-sizing: border-box; min-width: 0;
            padding: calc(var(--grundgroesse) * .7) calc(var(--grundgroesse) * .8);
            border: 1px solid var(--linie-karte);
            border-left: 3px solid var(--achtung);
            border-radius: var(--rund-bedien); background: var(--achtung-grund);
            font-size: calc(var(--grundgroesse) * .84); line-height: 1.5;
            color: var(--schrift-2); cursor: default; }
.bk-notiz-ausruf { border-left-color: var(--kritisch); background: var(--kritisch-grund); }
.bk-notiz-ok, .bk-notiz-leer { border-left-color: var(--linie-karte);
                               background: var(--neutral-grund); }
/* DIE AKTIVE NOTIZ: der orange Rand links (Baukasten-Regel, Notiz 967). */
.bk-notiz[data-bk-aktiv] { border-left: var(--rand-aktiv) solid var(--akzent); }
.bk-notiz:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-notiz-kopf { display: flex; flex-wrap: wrap; align-items: center;
                 gap: calc(var(--grundgroesse) * .43);
                 margin-bottom: calc(var(--grundgroesse) * .36);
                 font-family: var(--schriftart-zahlen);
                 font-size: calc(var(--grundgroesse) * .72); color: var(--schrift-4); }
.bk-notiz-kennung { color: var(--schrift-3); }
.bk-notiz-erledigt { margin-left: auto; display: inline-flex; align-items: center;
                     gap: calc(var(--grundgroesse) * .29); font-family: var(--schriftart);
                     font-size: calc(var(--grundgroesse) * .74); color: var(--schrift-3); }
.bk-notiz-erledigt input { margin: 0; accent-color: var(--akzent); }
.bk-notiz-text { margin: 0 0 calc(var(--grundgroesse) * .4); overflow-wrap: anywhere; }
.bk-notiz-text:last-child { margin-bottom: 0; }
.bk-notizgruppe { display: flex; flex-direction: column; gap: calc(var(--grundgroesse) * .6); }
.bk-notizgruppe-zeile { list-style: none; cursor: pointer;
                        font-size: calc(var(--grundgroesse) * .78); color: var(--schrift-4); }
.bk-notizgruppe-zeile::-webkit-details-marker { display: none; }
.bk-notizgruppe-zeile::before { content: "\25B8\00A0"; }
.bk-notizgruppe-zu[open] > .bk-notizgruppe-zeile::before { content: "\25BE\00A0"; }
.bk-notizgruppe-karten { display: flex; flex-direction: column;
                         gap: calc(var(--grundgroesse) * .6);
                         margin-top: calc(var(--grundgroesse) * .6); }

/* --- Fortschritts-Balken -------------------------------------------------------- */

.bk-fortschritt { width: calc(var(--grundgroesse) * 15.7); max-width: 100%;
                  height: calc(var(--grundgroesse) * .43); overflow: hidden;
                  border-radius: var(--rund-pille); background: var(--neutral-grund); }
.bk-fortschritt-teil { display: block; height: 100%; background: var(--akzent); }
.bk-fortschritt[data-bk-fertig] .bk-fortschritt-teil { background: var(--gut); }

/* --- Formatierter Text ---------------------------------------------------------- */

.bk-text { min-width: 0; color: var(--schrift-2); line-height: 1.6;
           font-size: calc(var(--grundgroesse) * .95); overflow-wrap: anywhere; }
.bk-text > :first-child { margin-top: 0; }
.bk-text > :last-child { margin-bottom: 0; }
.bk-text p, .bk-text ul, .bk-text ol, .bk-text blockquote, .bk-text pre,
.bk-text table { margin: 0 0 calc(var(--grundgroesse) * .6); }
.bk-text ul, .bk-text ol { padding-left: calc(var(--grundgroesse) * 1.3); }
.bk-text li { margin: calc(var(--grundgroesse) * .14) 0; }
.bk-text strong { color: var(--schrift-1); font-weight: 600; }
.bk-text a { color: var(--akzent-hell); }
.bk-text code { font-family: var(--schriftart-zahlen); font-size: .88em;
                color: var(--akzent-hell); background: var(--zeile-gewaehlt);
                padding: 0 calc(var(--grundgroesse) * .29);
                border-radius: calc(var(--grundgroesse) * .29); }
.bk-text pre { padding: calc(var(--grundgroesse) * .8) var(--grundgroesse);
               border: 1px solid var(--zeile-linie); border-radius: var(--rund-bedien);
               background: var(--feld-grund); overflow: auto; }
.bk-text pre code { background: none; padding: 0; color: var(--schrift-1); }
.bk-text h1, .bk-text h2, .bk-text h3, .bk-text h4, .bk-text h5, .bk-text h6 {
  margin: calc(var(--grundgroesse) * .8) 0 calc(var(--grundgroesse) * .3);
  font-size: calc(var(--grundgroesse) * .95); color: var(--schrift-1); font-weight: 600; }
.bk-text blockquote { padding: calc(var(--grundgroesse) * .3) calc(var(--grundgroesse) * .8);
                      border-left: 3px solid var(--linie-karte); color: var(--schrift-3); }
.bk-text table { border-collapse: collapse; font-size: calc(var(--grundgroesse) * .86);
                 display: block; max-width: 100%; overflow: auto; }
.bk-text th, .bk-text td { padding: calc(var(--grundgroesse) * .36) calc(var(--grundgroesse) * .57);
                           border: 1px solid var(--zeile-linie); text-align: left;
                           vertical-align: top; }
.bk-text th { color: var(--schrift-4); font-weight: 600; background: var(--neutral-grund); }
.bk-text hr { border: 0; border-top: 1px solid var(--zeile-linie); }

/* --- Lese-Abschnitt ------------------------------------------------------------- */

/* Mit Notizen zwei Spalten (Text | Notizen), ohne Notizen die ganze Breite. */
.bk-leseabschnitt { display: grid;
                    grid-template-columns: minmax(0, 1fr) calc(var(--grundgroesse) * 23.6);
                    gap: calc(var(--grundgroesse) * 1.2);
                    padding-bottom: calc(var(--grundgroesse) * 1.2);
                    border-bottom: 1px solid var(--zeile-linie);
                    scroll-margin-top: calc(var(--grundgroesse) * .5); }
.bk-leseabschnitt-ohne { grid-template-columns: minmax(0, 1fr); }
.bk-leseabschnitt-haupt { min-width: 0; }
.bk-leseabschnitt-kopf { display: flex; align-items: center; flex-wrap: wrap;
                         gap: calc(var(--grundgroesse) * .6);
                         margin-bottom: calc(var(--grundgroesse) * .5); }
.bk-leseabschnitt-titel { margin: 0; flex: 0 1 auto; min-width: 0;
                          font-size: calc(var(--grundgroesse) * 1.08); font-weight: 700;
                          color: var(--schrift-1); }
.bk-leseabschnitt.bk-lese-ebene-3 .bk-leseabschnitt-titel {
  font-size: var(--grundgroesse); }
.bk-leseabschnitt-nummer { margin-right: calc(var(--grundgroesse) * .57);
                           font-family: var(--schriftart-zahlen); font-weight: 500;
                           color: var(--akzent-hell); }
.bk-leseabschnitt-marker { margin-left: auto; display: flex;
                           gap: calc(var(--grundgroesse) * .29); }
.bk-leseabschnitt-handlungen { display: flex; gap: calc(var(--grundgroesse) * .43); }
.bk-leseabschnitt-notizen { min-width: 0; align-self: start; display: flex;
                            flex-direction: column; gap: calc(var(--grundgroesse) * .6); }
/* Form „allgemein": die Notizen ohne Abschnitt — ein ruhiger Kasten obenan. */
.bk-leseabschnitt-allgemein { padding: calc(var(--grundgroesse) * .6) calc(var(--grundgroesse) * .8);
                              border: 1px solid var(--zeile-linie);
                              border-radius: var(--rund-bedien); }
.bk-leseabschnitt-marke { margin: 0; font-size: calc(var(--grundgroesse) * .72);
                          font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                          color: var(--schrift-4); }
.bk-leseabschnitt-allgemein .bk-leseabschnitt-handlungen { margin-left: auto; }

/* --- Lese-Kopf ------------------------------------------------------------------ */

.bk-lesekopf { display: flex; align-items: flex-start; flex-wrap: wrap;
               gap: calc(var(--grundgroesse) * 1.2); }
.bk-lesekopf-links { margin-right: auto; display: flex; flex-direction: column;
                     gap: calc(var(--grundgroesse) * .43); min-width: 0; }
.bk-lesekopf-zeile1 { display: flex; align-items: center; flex-wrap: wrap;
                      gap: calc(var(--grundgroesse) * .7); }
.bk-lesekopf-kurz { font-family: var(--schriftart-zahlen); font-weight: 500;
                    font-size: calc(var(--grundgroesse) * 1.25); color: var(--akzent-hell); }
.bk-lesekopf-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.6); font-weight: 700;
                     letter-spacing: -.01em; color: var(--schrift-1); }
.bk-lesekopf-meta { font-size: calc(var(--grundgroesse) * .85); color: var(--schrift-3); }
.bk-lesekopf-meta a { color: var(--akzent-hell); text-decoration: none; }
.bk-lesekopf-meta a:hover { text-decoration: underline; }
.bk-lesekopf-meta code { font-family: var(--schriftart-zahlen); color: var(--schrift-2); }
.bk-lesekopf-rechts { display: flex; flex-direction: column; align-items: flex-end;
                      gap: calc(var(--grundgroesse) * .43); }
.bk-lesekopf-stapel { display: flex; align-items: center; justify-content: flex-end;
                      flex-wrap: wrap; gap: calc(var(--grundgroesse) * .57);
                      font-size: calc(var(--grundgroesse) * .82); color: var(--schrift-3); }
.bk-lesekopf-stapel b { color: var(--schrift-1); }

/* --- Hinweis-Band --------------------------------------------------------------- */

.bk-band { margin: 0; padding: calc(var(--grundgroesse) * .6) calc(var(--grundgroesse) * .9);
           border-left: var(--rand-aktiv) solid currentColor;
           border-radius: var(--rund-bedien); font-size: calc(var(--grundgroesse) * .88);
           line-height: 1.45; }
.bk-band-achtung { color: var(--achtung); background: var(--achtung-grund); }
.bk-band-kritisch { color: var(--kritisch); background: var(--kritisch-grund); }
.bk-band-info { color: var(--info); background: var(--info-grund); }
.bk-band-gut { color: var(--gut); background: var(--gut-grund); }
.bk-band-neutral { color: var(--schrift-2); background: var(--neutral-grund); }

@media (max-width: 50rem) {
  .bk-seite-lesen > .bk-seite-rumpf { grid-template-columns: minmax(0, 1fr) !important; }
  .bk-leseabschnitt { grid-template-columns: minmax(0, 1fr); }
}

/* --- 2.4.0: die Schreib-Teile (Baukonzept 101.3.2 Phase B) ------------------------ */

/* Die Marker-Wahl: dieselben Abzeichen, als Knöpfe — Aussehen wie oben, dazu Zeiger,
   Fokus-Rand und ausgegraut, wenn gesperrt. */
.bk-markerwahl { display: inline-flex; gap: calc(var(--grundgroesse) * .29); margin: 0; }
.bk-marker-knopf { cursor: pointer; font-family: var(--schriftart-zahlen); }
.bk-marker-knopf:hover { opacity: .8; }
.bk-marker-knopf.bk-marker-blass:hover { opacity: .7; }
.bk-marker-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-marker-knopf:disabled { cursor: not-allowed; opacity: .2; }
/* Ein Formular, das gerade geht: nichts darin ist noch zu klicken. */
[data-bk-einmal][data-bk-laedt] button { pointer-events: none; opacity: .5; }

/* Das Klapp-Formular: der Knopf bleibt, darunter klappt das Formular auf. */
.bk-klapp { display: inline-block; max-width: 100%; }
.bk-klapp[open] { display: block; width: 100%; }
.bk-klapp-knopf { list-style: none; cursor: pointer; }
.bk-klapp-knopf::-webkit-details-marker { display: none; }
.bk-klapp-form { display: flex; flex-direction: column; gap: calc(var(--grundgroesse) * .5);
                 margin-top: calc(var(--grundgroesse) * .43);
                 padding: calc(var(--grundgroesse) * .6);
                 border: 1px solid var(--linie-karte); border-radius: var(--rund-bedien);
                 background: var(--feld-grund); }
.bk-klapp-handlungen { display: flex; justify-content: flex-end;
                       gap: calc(var(--grundgroesse) * .43); }

/* Der Schalter: ein Kästchen samt Beschriftung, das beim Klick schreibt. */
.bk-schalter-form { display: inline-flex; margin: 0; }
.bk-schalter { display: inline-flex; align-items: center; gap: calc(var(--grundgroesse) * .29);
               padding: 0; border: none; background: none; cursor: pointer;
               font: inherit; color: inherit; }
.bk-schalter:disabled { cursor: not-allowed; opacity: .4; }
.bk-schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-schalter-kasten { width: calc(var(--grundgroesse) * .86); height: calc(var(--grundgroesse) * .86);
                      border: 1px solid var(--schrift-4); border-radius: calc(var(--grundgroesse) * .15);
                      display: inline-flex; align-items: center; justify-content: center; }
.bk-schalter[aria-checked="true"] .bk-schalter-kasten { background: var(--akzent);
                                                        border-color: var(--akzent); }
.bk-schalter[aria-checked="true"] .bk-schalter-kasten::after {
  content: "\2713"; color: var(--auf-akzent); font-size: calc(var(--grundgroesse) * .64); }

/* 2.6.0 — DIE ERKLÄRUNG (ⓘ): ein kleiner Knopf, die Blase darunter. Gezeigt beim
   Darüberfahren und beim Fokus (Tab), festgehalten beim Klick (`data-bk-offen`, gesetzt
   vom Verhalten); Esc und ein Klick daneben schliessen. */
.bk-erklaerung { position: relative; display: inline-block; vertical-align: middle;
                 margin-left: calc(var(--grundgroesse) * .29); }
/* Das ⓘ als „i" im Kreis gezeichnet — das Zeichen ⓘ fehlt in mancher Schrift. */
.bk-erklaerung-knopf { display: inline-flex; align-items: center; justify-content: center;
                       box-sizing: border-box;
                       width: calc(var(--grundgroesse) * 1.05); height: calc(var(--grundgroesse) * 1.05);
                       padding: 0; border: 1px solid currentColor; border-radius: var(--rund-pille);
                       background: none; color: var(--schrift-3); cursor: help;
                       font-family: var(--schriftart); font-weight: 700; font-style: normal;
                       font-size: calc(var(--grundgroesse) * .68); line-height: 1;
                       text-transform: none; vertical-align: middle; }
.bk-erklaerung-knopf:hover, .bk-erklaerung[data-bk-offen] .bk-erklaerung-knopf { color: var(--akzent); }
.bk-erklaerung-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.bk-erklaerung-blase { display: none; position: absolute; z-index: 5; top: calc(100% + var(--grundgroesse) * .29);
                       left: calc(var(--grundgroesse) * -.6);
                       box-sizing: border-box; width: calc(var(--grundgroesse) * 30);
                       max-width: min(calc(var(--grundgroesse) * 30), 80vw);
                       padding: calc(var(--grundgroesse) * .7);
                       border: 1px solid var(--linie-karte); border-radius: var(--rund-bedien);
                       background: var(--fenster-grund); color: var(--schrift-2);
                       box-shadow: var(--tiefe-fenster); font-weight: 400;
                       text-transform: none; letter-spacing: normal;
                       font-size: calc(var(--grundgroesse) * .82); white-space: normal; }
.bk-erklaerung:hover .bk-erklaerung-blase,
.bk-erklaerung:focus-within .bk-erklaerung-blase,
.bk-erklaerung[data-bk-offen] .bk-erklaerung-blase { display: block; }

/* ===========================================================================
   DIE TEILE DES KUNDENBILDS (Baukasten 2.9.0, Baukonzept 102.1.1 §3.6/§3.7).

   Kein eigener Wert: jede Farbe, jede Grösse, jede Schrift kommt als `var(--…)`
   aus dem Erscheinungsbild (Gruppen `kundenfarben` und `kundenbild`). Das
   KUNDENBILD wird über seine HAKEN gewählt (`data-bk-farbe`, `-schrift`,
   `-schriftart`, `-kundenbild`, `-logo`) — eine Vorschau setzt sie im Browser,
   ohne eine Klasse zu kennen. Farbfelder, Farbpunkt und Schriftproben tragen die
   Klassen `bk-kf-<farbe>`, `bk-ks-<schrift>`, `bk-ka-<art>`. Je Palettenschlüssel
   ein Wähler, weil ein Wert nie im Markup stehen darf (Farb-Wächter, Sabotage G).
   =========================================================================== */

/* --- Das Kundenbild: 3:2, Ecken nach dem Radius des Hauses, nichts abgeschnitten */
.bk-kb { display: inline-flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; flex: none; position: relative; overflow: hidden;
  border-radius: var(--rund-bedien); line-height: 1; white-space: nowrap;
  letter-spacing: var(--kundenbild-sperrung); vertical-align: middle; }
[data-bk-kundenbild="klein"] { width: var(--kundenbild-klein); font-size: var(--kundenbild-schrift-klein); }
[data-bk-kundenbild="mittel"] { width: var(--kundenbild-mittel); font-size: var(--kundenbild-schrift-mittel);
  border-radius: var(--rund-flaeche); }
[data-bk-kundenbild="gross"] { width: var(--kundenbild-gross); font-size: var(--kundenbild-schrift-gross);
  border-radius: var(--rund-flaeche); }
/* Das Logo GANZ eingepasst: freie Fläche und durchsichtige Stellen zeigen den
   Grund — die Kundenfarbe (Notiz 1016). */
.bk-kb-logo, [data-bk-kundenbild] > img { display: block; width: 100%; height: 100%;
  object-fit: contain; }
[data-bk-logo] .bk-kb-text { display: none; }

/* --- Die Schriftarten der Initialen ------------------------------------------ */
.bk-ka-pragmatisch, [data-bk-schriftart="pragmatisch"] { font-family: var(--kunde-art-pragmatisch); font-weight: 700; }
.bk-ka-technisch, [data-bk-schriftart="technisch"] { font-family: var(--kunde-art-technisch); font-weight: 700; }
.bk-ka-kuenstlerisch, [data-bk-schriftart="kuenstlerisch"] { font-family: var(--kunde-art-kuenstlerisch); font-weight: 700;
  font-style: italic; }
.bk-ka-dynamisch, [data-bk-schriftart="dynamisch"] { font-family: var(--kunde-art-dynamisch); font-weight: 400; }
.bk-ka-klassisch, [data-bk-schriftart="klassisch"] { font-family: var(--kunde-art-klassisch); font-weight: 700; }

/* --- Die Kundenfarben als Grund ------------------------------------------------ */
.bk-kf-rot, [data-bk-farbe="rot"] { background-color: var(--kunde-01); }
.bk-kf-ziegel, [data-bk-farbe="ziegel"] { background-color: var(--kunde-02); }
.bk-kf-koralle, [data-bk-farbe="koralle"] { background-color: var(--kunde-03); }
.bk-kf-kuerbis, [data-bk-farbe="kuerbis"] { background-color: var(--kunde-04); }
.bk-kf-bernstein, [data-bk-farbe="bernstein"] { background-color: var(--kunde-05); }
.bk-kf-senf, [data-bk-farbe="senf"] { background-color: var(--kunde-06); }
.bk-kf-zitrone, [data-bk-farbe="zitrone"] { background-color: var(--kunde-07); }
.bk-kf-limette, [data-bk-farbe="limette"] { background-color: var(--kunde-08); }
.bk-kf-gras, [data-bk-farbe="gras"] { background-color: var(--kunde-09); }
.bk-kf-tanne, [data-bk-farbe="tanne"] { background-color: var(--kunde-10); }
.bk-kf-mint, [data-bk-farbe="mint"] { background-color: var(--kunde-11); }
.bk-kf-tuerkis, [data-bk-farbe="tuerkis"] { background-color: var(--kunde-12); }
.bk-kf-petrol, [data-bk-farbe="petrol"] { background-color: var(--kunde-13); }
.bk-kf-himmel, [data-bk-farbe="himmel"] { background-color: var(--kunde-14); }
.bk-kf-blau, [data-bk-farbe="blau"] { background-color: var(--kunde-15); }
.bk-kf-marine, [data-bk-farbe="marine"] { background-color: var(--kunde-16); }
.bk-kf-indigo, [data-bk-farbe="indigo"] { background-color: var(--kunde-17); }
.bk-kf-violett, [data-bk-farbe="violett"] { background-color: var(--kunde-18); }
.bk-kf-lavendel, [data-bk-farbe="lavendel"] { background-color: var(--kunde-19); }
.bk-kf-pflaume, [data-bk-farbe="pflaume"] { background-color: var(--kunde-20); }
.bk-kf-magenta, [data-bk-farbe="magenta"] { background-color: var(--kunde-21); }
.bk-kf-rosa, [data-bk-farbe="rosa"] { background-color: var(--kunde-22); }
.bk-kf-sand, [data-bk-farbe="sand"] { background-color: var(--kunde-23); }
.bk-kf-schiefer, [data-bk-farbe="schiefer"] { background-color: var(--kunde-24); }
.bk-kf-ohne, [data-bk-farbe="ohne"] { background-color: var(--kunde-ohne); }
.bk-kf-licht { background-color: var(--kunde-licht); }
.bk-kf-tief { background-color: var(--kunde-tief); }
.bk-kf-auto { background-color: var(--feld-grund); }

/* --- Die Schriftfarben ------------------------------------------------------- */
.bk-ks-rot, [data-bk-schrift="rot"] { color: var(--kunde-01); }
.bk-ks-ziegel, [data-bk-schrift="ziegel"] { color: var(--kunde-02); }
.bk-ks-koralle, [data-bk-schrift="koralle"] { color: var(--kunde-03); }
.bk-ks-kuerbis, [data-bk-schrift="kuerbis"] { color: var(--kunde-04); }
.bk-ks-bernstein, [data-bk-schrift="bernstein"] { color: var(--kunde-05); }
.bk-ks-senf, [data-bk-schrift="senf"] { color: var(--kunde-06); }
.bk-ks-zitrone, [data-bk-schrift="zitrone"] { color: var(--kunde-07); }
.bk-ks-limette, [data-bk-schrift="limette"] { color: var(--kunde-08); }
.bk-ks-gras, [data-bk-schrift="gras"] { color: var(--kunde-09); }
.bk-ks-tanne, [data-bk-schrift="tanne"] { color: var(--kunde-10); }
.bk-ks-mint, [data-bk-schrift="mint"] { color: var(--kunde-11); }
.bk-ks-tuerkis, [data-bk-schrift="tuerkis"] { color: var(--kunde-12); }
.bk-ks-petrol, [data-bk-schrift="petrol"] { color: var(--kunde-13); }
.bk-ks-himmel, [data-bk-schrift="himmel"] { color: var(--kunde-14); }
.bk-ks-blau, [data-bk-schrift="blau"] { color: var(--kunde-15); }
.bk-ks-marine, [data-bk-schrift="marine"] { color: var(--kunde-16); }
.bk-ks-indigo, [data-bk-schrift="indigo"] { color: var(--kunde-17); }
.bk-ks-violett, [data-bk-schrift="violett"] { color: var(--kunde-18); }
.bk-ks-lavendel, [data-bk-schrift="lavendel"] { color: var(--kunde-19); }
.bk-ks-pflaume, [data-bk-schrift="pflaume"] { color: var(--kunde-20); }
.bk-ks-magenta, [data-bk-schrift="magenta"] { color: var(--kunde-21); }
.bk-ks-rosa, [data-bk-schrift="rosa"] { color: var(--kunde-22); }
.bk-ks-sand, [data-bk-schrift="sand"] { color: var(--kunde-23); }
.bk-ks-schiefer, [data-bk-schrift="schiefer"] { color: var(--kunde-24); }
.bk-ks-hell, [data-bk-schrift="hell"] { color: var(--kunde-licht); }
.bk-ks-dunkel, [data-bk-schrift="dunkel"] { color: var(--kunde-tief); }

/* --- Die Farbwahl: 12 Felder je Reihe ---------------------------------------- */
.bk-farbwahl, .bk-schriftwahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-farbfelder { display: grid; grid-template-columns: repeat(12, var(--farbfeld));
  gap: calc(var(--grundgroesse) * .3); }
.bk-farbfeld { position: relative; width: var(--farbfeld); aspect-ratio: 1;
  border-radius: var(--rund-bedien); cursor: pointer; box-shadow: var(--tiefe-kachel); }
.bk-farbfeld-wahl, .bk-schriftfeld-wahl { position: absolute; inset: 0; margin: 0;
  opacity: 0; cursor: pointer; }
.bk-farbfeld:has(.bk-farbfeld-wahl:checked),
.bk-schriftfeld:has(.bk-schriftfeld-wahl:checked) { outline: 2px solid var(--akzent);
  outline-offset: 2px; }
.bk-farbfeld:has(.bk-farbfeld-wahl:focus-visible),
.bk-schriftfeld:has(.bk-schriftfeld-wahl:focus-visible) {
  outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
/* Die Wörter („keine", „automatisch", „hell", „dunkel") als breite Felder. */
.bk-farbfeld-wort { width: auto; aspect-ratio: auto; grid-column: span 4;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--grundgroesse) * .35) calc(var(--grundgroesse) * .6);
  font-size: var(--schrift-bedien); color: var(--schrift-1); }
.bk-farbfeld-ohne { color: var(--kunde-licht); }
.bk-farbfeld-hell { color: var(--kunde-tief); }
.bk-farbfeld-dunkel { color: var(--kunde-licht); }
.bk-farbfeld-auto { border: 1px solid var(--linie-karte); box-shadow: none;
  color: var(--schrift-2); }

/* --- Die Farbanzeige: Punkt und Name ----------------------------------------- */
.bk-farbanzeige { display: inline-flex; align-items: center;
  gap: calc(var(--grundgroesse) * .4); }
.bk-farbpunkt { width: calc(var(--grundgroesse) * .85); aspect-ratio: 1;
  border-radius: var(--rund-pille); border: 1px solid var(--linie-karte); }

/* --- Die Schriftwahl: fünf Felder, je mit den Initialen in ihrer Schrift ---- */
.bk-schriftfelder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--grundgroesse) * .5); }
.bk-schriftfeld { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: calc(var(--grundgroesse) * .25); cursor: pointer;
  padding: calc(var(--grundgroesse) * .5); border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien); background: var(--feld-grund); }
.bk-schriftfeld-probe { font-size: var(--kundenbild-schrift-mittel); line-height: 1;
  letter-spacing: var(--kundenbild-sperrung); color: var(--schrift-1); }
.bk-schriftfeld-name { font-size: var(--schrift-pille); color: var(--schrift-3); }

/* --- Das Feld „datei" ---------------------------------------------------------- */
.bk-eingabe-datei { padding: calc(var(--grundgroesse) * .35); }

/* --- Der Symbolknopf: klein, grau, erst unter der Maus rot (Entwurf 2) ------- */
.bk-symbolknopf { display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--grundgroesse) * .35); border: 0; border-radius: var(--rund-bedien);
  background: none; color: var(--schrift-4); cursor: pointer; }
.bk-symbolknopf:hover, .bk-symbolknopf:focus-visible { color: var(--kritisch);
  background: var(--kritisch-grund); }
.bk-symbol { display: block; width: calc(var(--grundgroesse) * 1.15); aspect-ratio: 1;
  background-color: currentColor; mask-repeat: no-repeat; mask-position: center;
  mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  -webkit-mask-size: contain; }
.bk-symbol-papierkorb { mask-image: url("/erscheinungsbild/icon/papierkorb");
  -webkit-mask-image: url("/erscheinungsbild/icon/papierkorb"); }

/* --- Der Kundenkopf: Bild, Name, eine Zeile, Pillen -------------------------- */
.bk-kundenkopf { display: flex; align-items: center; gap: var(--luft-gross); }
.bk-kundenkopf-block { display: flex; flex-direction: column;
  gap: calc(var(--grundgroesse) * .3); min-width: 0; }
.bk-kundenkopf-titel { margin: 0; font-size: var(--schrift-grosszahl); font-weight: 600;
  color: var(--schrift-1); overflow-wrap: anywhere; }
.bk-kundenkopf-unterzeile { margin: 0; font-family: var(--schriftart-zahlen);
  font-size: var(--schrift-bedien); color: var(--schrift-3); }
.bk-kundenkopf-pillen { display: flex; gap: calc(var(--grundgroesse) * .4);
  flex-wrap: wrap; }

.bk-kundenkopf-rahmen { display: flex; flex-direction: column; gap: var(--luft); }
.bk-kundenkopf-handlungen { display: flex; align-items: center;
  gap: calc(var(--grundgroesse) * .5); }
.bk-kundenkopf-handlungen .bk-symbolknopf { margin-left: auto; }

/* --- Die Klappe: eine Zeile, rechts „Verlauf (n) ▸", darunter der Inhalt ----- */
.bk-klappe { border-top: 1px solid var(--zeile-linie); }
.bk-klappe-zeile { display: flex; align-items: center; justify-content: space-between;
  gap: var(--luft); padding: calc(var(--grundgroesse) * .5) 0; cursor: pointer;
  list-style: none; color: var(--schrift-2); font-size: var(--schrift-zelle); }
.bk-klappe-zeile::-webkit-details-marker { display: none; }
.bk-klappe-rechts { color: var(--akzent-hell); white-space: nowrap; }
.bk-klappe-rechts::after { content: " ▸"; }
.bk-klappe[open] .bk-klappe-rechts::after { content: " ▾"; }
.bk-klappe-inhalt { padding-bottom: calc(var(--grundgroesse) * .5); }

/* --- Die Angabenliste: zweispaltig ------------------------------------------ */
.bk-angaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--luft) var(--luft-gross); margin: 0; }
.bk-angabe { display: flex; flex-direction: column; gap: calc(var(--grundgroesse) * .2);
  min-width: 0; }
.bk-angabe dt { font-size: var(--schrift-spaltenkopf); color: var(--schrift-4);
  text-transform: uppercase; letter-spacing: .06em; }
.bk-angabe dd { margin: 0; color: var(--schrift-1); font-size: var(--schrift-text);
  overflow-wrap: anywhere; }

/* ===========================================================================
   DIE TEILE DER GLIEDERUNG (Baukasten 2.10.0, Baukonzept 100.2.2 Rev. 2 Phase C,
   Entwurf E1 „Einstellungen › Integrationen").

   Kein eigener Wert: jede Farbe, jede Grösse kommt als `var(--…)` aus dem
   Erscheinungsbild (Farb-Wächter, Probe A). Zwei Teile:
     .bk-navseite   links die Navigationsspalte einer Seite (NICHT die
                    Seitenleiste des Rahmens), rechts Pfad und Inhalt
     .bk-reiter     die Reiterleiste über einem Blatt — der gewählte Reiter mit
                    dem orangen Strich unten, je Reiter Zustands-Punkt und Zahl
   =========================================================================== */

/* --- Die Seite mit Navigationsspalte ----------------------------------------- */
.bk-navseite { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0;
  gap: calc(var(--grundgroesse) * 1.4); }
.bk-navspalte { flex: 0 0 calc(var(--grundgroesse) * 16); overflow-y: auto;
  padding: calc(var(--grundgroesse) * .3) calc(var(--grundgroesse) * .9)
           calc(var(--grundgroesse) * .3) 0;
  border-right: 1px solid var(--linie); }
.bk-navinhalt { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; }

.bk-navgruppe + .bk-navgruppe { margin-top: calc(var(--grundgroesse) * 1.1); }
.bk-navgruppe-titel { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(var(--grundgroesse) * .21) calc(var(--grundgroesse) * .43);
  margin: 0 0 calc(var(--grundgroesse) * .36);
  padding: 0 calc(var(--grundgroesse) * .57);
  color: var(--schrift-4); font-size: var(--schrift-spaltenkopf); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
/* Der Hinweis „Admin": nur ein Wort für den Leser, keine Sperre. */
.bk-navgruppe-marke { padding: 0 calc(var(--grundgroesse) * .36);
  border: 1px solid var(--linie-karte); border-radius: var(--rund-pille);
  color: var(--schrift-3); font-size: calc(var(--grundgroesse) * .64);
  font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }

.bk-navliste { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: calc(var(--grundgroesse) * .14); }
.bk-naveintrag { display: flex; align-items: center;
  gap: calc(var(--grundgroesse) * .57);
  padding: calc(var(--grundgroesse) * .43) calc(var(--grundgroesse) * .57);
  border-radius: calc(var(--grundgroesse) * .43);
  color: var(--schrift-2); font-size: calc(var(--grundgroesse) * .93);
  text-decoration: none; }
.bk-naveintrag:hover { background: var(--zeile-drueber); color: var(--schrift-1); }
.bk-naveintrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
/* DER GEWÄHLTE EINTRAG: der orange Rand links (Baukasten-Regel, wie im Verzeichnis). */
.bk-naveintrag[data-bk-aktiv] { background: var(--zeile-gewaehlt); color: var(--schrift-1);
  box-shadow: inset var(--rand-aktiv) 0 0 var(--akzent); }
.bk-navsymbol { flex: none; width: calc(var(--grundgroesse) * 1.15);
  height: calc(var(--grundgroesse) * 1.15);
  color: var(--akzent-hell); background-color: currentColor;
  mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.bk-naveintrag-text { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Die Zeile „Einstellungen › System" rechts oben. */
.bk-navpfad { display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--grundgroesse) * .43);
  margin: 0 0 calc(var(--grundgroesse) * .86);
  color: var(--schrift-3); font-size: calc(var(--grundgroesse) * .86); }
.bk-navpfad span:last-child { color: var(--schrift-1); font-weight: 600; }
.bk-navpfad-trenner { color: var(--schrift-4); }

/* --- Die Zahl (Navigationsspalte und Reiter): im orangen Kreis, nur > 0 -------- */
.bk-zahlblase { flex: none; display: inline-flex; align-items: center;
  justify-content: center; box-sizing: border-box;
  min-width: calc(var(--grundgroesse) * 1.2); height: calc(var(--grundgroesse) * 1.2);
  padding: 0 calc(var(--grundgroesse) * .29); border-radius: var(--rund-pille);
  background: var(--achtung); color: var(--auf-akzent);
  font-size: calc(var(--grundgroesse) * .75); font-weight: 700; line-height: 1; }

/* --- Die Reiterleiste ------------------------------------------------------------ */
.bk-reiter { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: calc(var(--grundgroesse) * .21);
  margin: 0 0 calc(var(--grundgroesse) * 1.1);
  border-bottom: 1px solid var(--linie); }
.bk-reiter-eintrag { display: inline-flex; align-items: center;
  gap: calc(var(--grundgroesse) * .43);
  padding: calc(var(--grundgroesse) * .5) calc(var(--grundgroesse) * .86);
  color: var(--schrift-3); font-size: calc(var(--grundgroesse) * .93);
  text-decoration: none; white-space: nowrap; }
.bk-reiter-eintrag:hover { color: var(--schrift-1); background: var(--zeile-drueber); }
.bk-reiter-eintrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
/* Der GEWÄHLTE Reiter: der orange Strich unten — als innerer Schatten, damit beim
   Wechsel nichts springt. */
.bk-reiter-eintrag[data-bk-aktiv] { color: var(--schrift-1); font-weight: 600;
  box-shadow: inset 0 calc(var(--rand-aktiv) * -1) 0 var(--akzent); }
/* Der Zustands-Punkt: grün verbunden, gelb läuft bald ab, rot gestört, grau aus. */
.bk-reiter-punkt { flex: none; width: calc(var(--grundgroesse) * .5);
  height: calc(var(--grundgroesse) * .5); border-radius: var(--rund-pille);
  background: var(--schrift-4); }
.bk-reiter-punkt[data-bk-zustand="verbunden"] { background: var(--gut); }
.bk-reiter-punkt[data-bk-zustand="bald_ab"] { background: var(--achtung); }
.bk-reiter-punkt[data-bk-zustand="gestoert"] { background: var(--kritisch); }
.bk-reiter-punkt[data-bk-zustand="aus"] { background: var(--schrift-4); }

/* Schmale Schirme: die Spalte über den Inhalt, nicht daneben. */
@media (max-width: 50rem) {
  .bk-navseite { flex-direction: column; }
  .bk-navspalte { flex: none; border-right: 0; border-bottom: 1px solid var(--linie);
    padding-bottom: calc(var(--grundgroesse) * .86); }
}