/* ============================================================
   BHS Design-System · Bausteine
   ------------------------------------------------------------
   Setzt tokens.css voraus. Namensschema:

     .bhs-<baustein>              Grundform
     .bhs-<baustein>--<variante>  Variante
     .bhs-<baustein>__<teil>      Bestandteil
     .is-<zustand>                Zustand (fehler, gesperrt, aktiv …)

   Die Kennung im Katalog (Daten/Liste/Tabelle) entspricht
   der Klasse (.bhs-tabelle) — die Zuordnung steht in
   docs/06-bausteinreferenz.md.
   ============================================================ */

/* ---------- Grundlage ---------- */
.bhs { font-family: var(--font); font-size: var(--text-l); color: var(--ink);
       background: var(--surface); }
.bhs *, .bhs *::before, .bhs *::after { box-sizing: border-box; }

/* Bausteine, die als <a> gebaut sein können, tragen nie die Browser-Unterstreichung.
   Unterstrichen wird nur echter Fließtext-Link — der ist ein Wort im Satz,
   kein anklickbarer Bereich. */
.bhs-nav__eintrag,
.bhs-kompaktliste__eintrag,
.bhs-schrittnav__eintrag,
.bhs-reiter__tab,
.bhs-knopf,
.bhs-chip,
.bhs-option,
.bhs-hinzu { text-decoration: none; }

/* Diese setzen selbst keine Textfarbe — ohne das würden sie als <a> blau. */
.bhs-schrittnav__eintrag,
.bhs-chip,
.bhs-option,
.bhs-hinzu { color: var(--ink); }


/* ════════════════ MARKE ════════════════
   Der meistgenutzte Baustein. Immer Pillenform, immer fett, immer klein.
   Was sie unterscheidet, ist allein die Farbrolle. */

.bhs-marke {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  padding: 3px 11px; border-radius: var(--r-voll);
  font-size: var(--text-s); font-weight: 700; line-height: 1.4;
  background: var(--neutral-flaeche); color: var(--neutral-auf-flaeche);
}
.bhs-marke--erfolg   { background: var(--ok-flaeche);     color: var(--ok-auf-flaeche); }
.bhs-marke--warnung  { background: var(--warn-flaeche);   color: var(--warn-auf-flaeche); }
.bhs-marke--fehler   { background: var(--fehler-flaeche); color: var(--fehler-auf-flaeche); }
.bhs-marke--info     { background: var(--info-flaeche);   color: var(--info-auf-flaeche); }
.bhs-marke--brand    { background: var(--brand-strong);   color: var(--ink); }

/* Merkmalsmarke: zutreffend kräftig, nicht zutreffend blass.
   Nicht-Zutreffendes bleibt sichtbar — sonst weiß niemand, was gefragt wurde.
   Bewusst neutral: ein Merkmal ist eine Eigenschaft, kein Zustand. */
.bhs-merkmal {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-voll);
  font-size: var(--text-s); font-weight: 400;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-faint);
}
/* Nur das Häkchen ist grün — der Text bleibt schwarz und lesbar.
   Eine komplett eingefärbte Marke schreit, ein grünes Häkchen genügt. */
.bhs-merkmal.is-zutreffend {
  background: var(--surface); border-color: #aaaaaa;
  color: var(--ink); font-weight: 700;
}
.bhs-merkmal__zeichen { color: var(--ink-faint); font-weight: 700; }
.bhs-merkmal.is-zutreffend .bhs-merkmal__zeichen { color: var(--ok); }

/* Zähler am Knopf */
.bhs-zaehler {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-voll); background: var(--brand); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}


/* ════════════════ KNOPF ════════════════
   Drei Stufen. Pro Ansicht genau eine primäre — zwei gefüllte
   Knöpfe nebeneinander heben sich gegenseitig auf. */

.bhs-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  padding: 9px 17px; border-radius: var(--r-mittel);
  font-family: inherit; font-size: var(--text-m); font-weight: 700; line-height: 1.3;
  border: 1.5px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.bhs-knopf--primaer   { background: var(--brand); border-color: var(--brand); color: #fff; }
.bhs-knopf--primaer:hover  { background: var(--brand-hover); border-color: var(--brand-hover); }
.bhs-knopf--primaer:active { background: var(--brand-active); border-color: var(--brand-active); }

.bhs-knopf--sekundaer { border-color: var(--brand); color: var(--brand); }
.bhs-knopf--sekundaer:hover  { background: var(--brand-soft); }
.bhs-knopf--sekundaer:active { background: var(--brand-strong); }

.bhs-knopf--tertiaer:hover  { background: var(--surface-sunken); }

.bhs-knopf--loeschen  { background: var(--fehler); border-color: var(--fehler); color: #fff; }

.bhs-knopf[disabled], .bhs-knopf.is-gesperrt {
  background: #e3e3e3; border-color: #e3e3e3; color: #767889; cursor: default;
}
.bhs-knopf--sekundaer[disabled], .bhs-knopf--tertiaer[disabled] {
  background: transparent; border-color: var(--line); color: var(--ink-faint);
}

/* Icon-Knopf */
.bhs-iknopf {
  width: var(--h-s); height: var(--h-s); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-mittel);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.bhs-iknopf--nackt { border-color: transparent; background: transparent; color: var(--ink-soft); }


/* ════════════════ FELD ════════════════
   Zwei Größen, fünf Zustände. Die Zustände gelten für jeden Feldtyp gleich. */

.bhs-feldgruppe { display: flex; flex-direction: column; gap: 6px; }

.bhs-label {
  font-size: var(--text-m); font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--s-xs);
}
.bhs-label__pflicht { font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint); }

.bhs-feld {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-xs);
  height: var(--h-m); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-mittel);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--text-m); width: 100%;
}
.bhs-feld--s { height: var(--h-s); font-size: var(--text-s); padding: 0 11px; }
.bhs-feld--l { height: var(--h-l); font-size: var(--text-l); padding: 0 14px; }

.bhs-feld--mehrzeilig { height: auto; min-height: 76px; padding: 10px 12px;
                        align-items: flex-start; line-height: 1.5; resize: vertical; }

.bhs-feld::placeholder, .bhs-feld.is-leer { color: var(--ink-faint); }

.bhs-feld:focus, .bhs-feld.is-fokus {
  outline: none; border: 1.5px solid var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.bhs-feld.is-fehler { border: 1.5px solid var(--fehler); }
.bhs-feld[disabled], .bhs-feld.is-gesperrt {
  background: var(--surface-sunken); border-color: var(--line);
  color: var(--ink-faint); cursor: default;
}

/* Nachsatz im Feld: Einheit, Symbol */
.bhs-feld__einheit { font-size: var(--text-xs); color: var(--ink-faint); flex-shrink: 0; }

/* Hinweis unter dem Feld — bei Fehlern nie nur rot färben, immer den Grund nennen */
.bhs-hinweis      { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.45; }
.bhs-hinweis--fehler { color: var(--fehler); }
.bhs-hinweis--ok     { color: var(--ok); }


/* ════════════════ AUSWAHL ════════════════
   Bis 3 Optionen Felder, bis 8 Chips, darüber ein Klappfeld. */

.bhs-auswahl { display: flex; gap: 7px; flex-wrap: wrap; }

.bhs-option {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  padding: 9px 14px 9px 11px; border-radius: var(--r-mittel);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-m); font-weight: 400; cursor: pointer;
}
.bhs-option::before {
  content: ""; width: 15px; height: 15px; border-radius: var(--r-voll);
  border: 2px solid #cdcdcd; flex-shrink: 0;
}
.bhs-option.is-gewaehlt {
  border: 1.5px solid var(--brand); background: var(--brand-soft); font-weight: 700;
}
.bhs-option.is-gewaehlt::before {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--brand);
}

.bhs-chip {
  padding: 7px 13px; border-radius: var(--r-voll);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-s); font-weight: 400; cursor: pointer;
}
.bhs-chip.is-gewaehlt {
  border: 1.5px solid var(--brand); background: var(--brand-soft); font-weight: 700;
}


/* ════════════════ KÄSTCHEN UND SCHALTER ════════════════
   Ein Schalter wirkt sofort, ein Kästchen erst beim Speichern.
   Das ist keine Geschmacksfrage. */

/* Ein Kästchen bedeutet fast immer „erledigt“ — deshalb grün, nicht Markenfarbe.
   Nur wo es eine echte Auswahl ist (Spalten einblenden, Empfänger wählen),
   trägt es .bhs-kaestchen--auswahl und wird zur Bedienfarbe. */
.bhs-kaestchen { display: inline-flex; align-items: center; gap: 9px;
                 font-size: var(--text-m); cursor: pointer; }
.bhs-kaestchen__box {
  width: 17px; height: 17px; border-radius: var(--r-klein);
  border: 1.5px solid #aaaaaa; background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bhs-kaestchen.is-an .bhs-kaestchen__box,
.bhs-kaestchen.is-teilweise .bhs-kaestchen__box {
  background: var(--ok); border-color: var(--ok);
}
.bhs-kaestchen.is-an { color: var(--ink-soft); }
.bhs-kaestchen--auswahl.is-an .bhs-kaestchen__box,
.bhs-kaestchen--auswahl.is-teilweise .bhs-kaestchen__box {
  background: var(--brand); border-color: var(--brand);
}
.bhs-kaestchen--auswahl.is-an { color: var(--ink); }
.bhs-kaestchen.is-an .bhs-kaestchen__box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg);
}
.bhs-kaestchen.is-teilweise .bhs-kaestchen__box::after {
  content: ""; width: 9px; height: 2.4px; background: #fff; border-radius: 2px;
}
.bhs-kaestchen.is-gesperrt { opacity: .55; cursor: default; }

/* Ab vier Punkten zweispaltig — spart die halbe Höhe */
.bhs-kaestchenliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: 10px var(--s-l); }

.bhs-schalter { display: inline-flex; align-items: center; gap: 10px;
                font-size: var(--text-m); cursor: pointer; }
.bhs-schalter__gleis {
  width: 36px; height: 20px; border-radius: var(--r-voll); background: #cdcdcd;
  display: flex; align-items: center; padding: 2.5px; flex-shrink: 0;
  transition: background .15s ease;
}
.bhs-schalter__knopf { width: 15px; height: 15px; border-radius: var(--r-voll);
                       background: #fff; transition: transform .15s ease; }
.bhs-schalter.is-an .bhs-schalter__gleis { background: var(--brand); }
.bhs-schalter.is-an .bhs-schalter__knopf { transform: translateX(16px); }
.bhs-schalter.is-gesperrt { opacity: .5; cursor: default; }


/* ════════════════ KARTE UND LISTE ════════════════ */

.bhs-karte {
  border: 1px solid var(--line); border-radius: var(--r-gross);
  background: var(--surface); overflow: hidden;
}
.bhs-karte--fehler { border: 1.5px solid var(--fehler); background: #fff8f8; }
.bhs-karte--brand  { border: 1.5px solid var(--brand); }

/* Beim Überfahren hebt sich die Karte leicht ab: Schatten plus Rahmen
   in Markenfarbe. In einer Liste gleichartiger Karten sieht man dadurch
   sofort, wo die eine aufhört und die nächste anfängt. */
.bhs-karte--interaktiv {
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.bhs-karte--interaktiv:hover {
  border-color: var(--brand);
  box-shadow: var(--schatten-m);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .bhs-karte--interaktiv { transition: none; }
  .bhs-karte--interaktiv:hover { transform: none; }
}
.bhs-karte__kopf {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--s-s); align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
/* Neutral. Ein Symbol oder Kürzel ist kein Zustand — es soll die Zeile
   gliedern, nicht Aufmerksamkeit fordern. */
.bhs-karte__symbol {
  width: 36px; height: 36px; border-radius: var(--r-mittel);
  background: var(--grau-fill); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: var(--text-s); font-weight: 700;
}
.bhs-karte__symbol--brand { background: var(--brand-soft); color: var(--brand-on-soft); }
.bhs-karte__titel { font-size: var(--text-m); font-weight: 700; }
.bhs-karte__unter { font-size: var(--text-s); color: var(--ink-soft); margin-top: 2px; }
.bhs-karte__rumpf { padding: 13px 14px; }

/* Rumpf mit Feldern — die Karten-Listenvariante */
.bhs-karte__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                     gap: var(--s-m); }

/* Tabelle */
.bhs-tabelle { border: 1px solid var(--line); border-radius: var(--r-gross);
               overflow: hidden; background: var(--surface); }
.bhs-tabelle__kopf, .bhs-tabelle__zeile { display: grid; align-items: center;
                                          gap: var(--s-s); padding: 12px 16px; }
.bhs-tabelle__kopf {
  background: var(--surface-sunken); border-bottom: 1px solid var(--line);
  font-size: var(--text-s); font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-soft);
}
.bhs-tabelle__zeile { border-bottom: 1px solid var(--line-soft); font-size: var(--text-m); }
.bhs-tabelle__zeile:nth-child(even) { background: #fafafa; }
.bhs-tabelle__fuss { display: flex; align-items: center; justify-content: space-between;
                     padding: 12px 16px; font-size: var(--text-s); color: var(--ink-soft); }

/* Kompaktliste — Menüs, Sprunglisten */
.bhs-kompaktliste { padding: 5px 0; }
.bhs-kompaktliste__eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 16px; font-size: var(--text-m); color: var(--ink); cursor: pointer;
}
.bhs-kompaktliste__eintrag:hover { background: var(--surface-sunken); }
.bhs-kompaktliste__eintrag--gefahr { color: var(--fehler); }

/* Zeile zum Hinzufügen — beendet jede dynamische Liste */
.bhs-hinzu {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--r-gross);
  border: 1.5px dashed #cdcdcd; color: var(--ink);
  font-size: var(--text-m); font-weight: 500; cursor: pointer;
}
.bhs-hinzu__zusatz { font-size: var(--text-s); color: var(--ink-soft); font-weight: 400; }


/* ════════════════ ABSCHNITT ════════════════
   Die Linie läuft nach rechts aus und begrenzt zugleich die Blockbreite. */

.bhs-abschnitt { display: flex; align-items: center; gap: 10px;
                 width: var(--block); margin-bottom: var(--s-m); }
.bhs-abschnitt h2 { font-family: var(--font-titel); font-size: var(--titel-s);
                    font-weight: 700; margin: 0; }
.bhs-abschnitt__linie { flex-grow: 1; height: 1px; background: var(--line); }

/* Band-Variante: nur eine leicht abgesetzte Fläche, damit der Abschnitt
   im langen Formular auffällt. Kein Rahmen, keine Kante — sonst sieht
   die Überschrift aus wie ein Knopf, den man drücken soll. */
.bhs-abschnitt--band {
  /* Ein Trenner trennt, er bedient nicht — deshalb nur ein Hauch Grau
     statt einer grauen Fläche, die wie ein Knopf aussieht. */
  background: #fafafa;
  border-radius: var(--r-mittel);
  padding: 9px 14px;
  margin-bottom: var(--s-l);
}
.bhs-abschnitt--band h2 { font-size: var(--titel-s); }

/* Zweispaltige Detailzeile: Label links auf fester Breite */
.bhs-detailzeile {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  align-items: center; gap: var(--s-l);
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.bhs-detailzeile__label { font-size: var(--text-l); color: var(--ink-soft); }
.bhs-detailzeile__wert  { font-size: var(--text-l); font-weight: 700; }


/* ════════════════ HINWEIS ════════════════
   Linke Kante trägt die Statusfarbe kräftig — dadurch beim
   Überfliegen erkennbar. */

.bhs-banner {
  display: flex; gap: var(--s-s); align-items: flex-start;
  padding: 14px 17px; border-radius: var(--r-gross);
  font-size: var(--text-m); line-height: 1.55;
  background: var(--info-flaeche); color: var(--info-auf-flaeche);
  border-left: 3.5px solid var(--info);
}
.bhs-banner--info    { background: var(--info-flaeche);   color: var(--info-auf-flaeche);   border-left-color: var(--info); }
.bhs-banner--erfolg  { background: var(--ok-flaeche);     color: var(--ok-auf-flaeche);     border-left-color: var(--ok); }
.bhs-banner--warnung { background: var(--warn-flaeche);   color: var(--warn-auf-flaeche);   border-left-color: var(--warn); }
.bhs-banner--fehler  { background: var(--fehler-flaeche); color: var(--fehler-auf-flaeche); border-left-color: var(--fehler); }
.bhs-banner--brand   { background: var(--brand-soft);     color: var(--brand-on-soft);      border-left-color: var(--brand); }
/* Der Normalfall, und der fehlte: ein Hinweis, der nichts meldet.
   „Der Taster am Router schaltet ebenfalls“ ist wissenswert und
   keine Warnung. Ohne diese Variante greift man zu Bernstein, und
   dann sieht in der ganzen Oberfläche jede Erklärung nach Gefahr
   aus — womit die echte Warnung nicht mehr auffällt. */
.bhs-banner--neutral { background: var(--neutral-flaeche); color: var(--neutral-auf-flaeche); border-left-color: var(--neutral); }
.bhs-banner__titel   { font-weight: 700; margin-bottom: 2px; }


/* ════════════════ LEERER ZUSTAND ════════════════
   Nie „Keine Daten vorhanden“. Überschrift als Aufforderung,
   zwei bis drei Zeilen wozu, genau eine primäre Aktion. */

.bhs-leer {
  background: var(--surface-sunken); border-radius: var(--r-gross);
  padding: 52px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-s);
}
.bhs-leer__titel { font-family: var(--font-titel); font-size: var(--titel-m);
                   font-weight: 700; margin: 0; }
.bhs-leer__text  { margin: 0; max-width: 430px; color: var(--ink-soft);
                   font-size: var(--text-m); line-height: 1.6; }


/* ════════════════ LADEZUSTAND ════════════════
   Platzhalter haben exakt die Maße des späteren Inhalts —
   sonst springt beim Umschalten alles. */

@keyframes bhs-schimmer {
  0%   { background-position: -420px 0; }
  100% { background-position:  420px 0; }
}
.bhs-platzhalter {
  border-radius: var(--r-klein);
  background: linear-gradient(90deg, #e3e3e3 0%, #f3f0ea 45%, #e3e3e3 90%);
  background-size: 420px 100%;
  animation: bhs-schimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bhs-platzhalter { animation: none; background: #e3e3e3; }
}

.bhs-fortschritt { height: 6px; border-radius: var(--r-voll);
                   background: #e3e3e3; overflow: hidden; }
.bhs-fortschritt--schlank { height: 5px; }
.bhs-fortschritt__balken { height: 100%; background: var(--brand);
                           border-radius: var(--r-voll); }

/* Ladebalken am oberen Seitenrand beim Routenwechsel */
.bhs-ladebalken { position: absolute; inset: 0 0 auto 0; height: 2.5px;
                  background: var(--brand); z-index: var(--z-oben); }


/* ════════════════ ÜBERLAGERUNGEN ════════════════ */

.bhs-dialog {
  width: 460px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-gross); padding: var(--s-xl);
  box-shadow: var(--schatten-l);
}
.bhs-dialog--klein { width: 400px; padding: var(--s-l); }
.bhs-dialog--gross { width: 620px; padding: 0; }
.bhs-dialog__titel { font-family: var(--font-titel); font-size: var(--titel-m);
                     font-weight: 700; margin: 0; }
.bhs-dialog__aktionen {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: var(--s-m); border-top: 1px solid var(--line-soft); margin-top: var(--s-m);
}

.bhs-popover {
  width: 280px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-mittel);
  overflow: hidden; box-shadow: var(--schatten-m);
}
.bhs-popover__kopf { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.bhs-popover__titel { font-size: var(--text-m); font-weight: 700; }
.bhs-popover__fuss {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--line-soft);
  font-size: var(--text-m);
}

.bhs-kurzhinweis {
  background: var(--ink); color: var(--surface);
  border-radius: var(--r-mittel); padding: 9px 13px;
  font-size: var(--text-s); line-height: 1.5; max-width: 244px;
}


/* ════════════════ NAVIGATION ════════════════
   Der aktive Eintrag ist ein Reiter, kein Knopf: links bündig
   am Rand, nur rechts gerundet. */

.bhs-nav { background: var(--nav-bg); border-right: 1px solid var(--nav-line);
           padding: 0 0 var(--s-m); }
/* Ruhende Einträge treten zurück: gedämpfte Farbe, normales Gewicht.
   Der aktive kommt nach vorn — dunkler, fetter, mit Fläche. Dadurch
   sieht man den Standort im Menü, ohne hinzusehen. */
.bhs-nav__eintrag {
  display: flex; align-items: center; gap: var(--s-s);
  padding: 9px 12px 9px 24px; margin-right: var(--s-s);
  border-radius: 0 var(--r-mittel) var(--r-mittel) 0;
  color: var(--ink-soft); font-size: var(--text-l); font-weight: 400;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.bhs-nav__eintrag svg { opacity: .75; }
.bhs-nav__eintrag:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.bhs-nav__eintrag.is-aktiv {
  background: var(--brand-strong); color: var(--ink); font-weight: 700;
}
.bhs-nav__eintrag.is-aktiv svg { opacity: 1; }
.bhs-nav__eintrag.is-gesperrt { color: var(--ink-faint); cursor: default; }
.bhs-nav__eintrag.is-gesperrt:hover { background: transparent; color: var(--ink-faint); }
.bhs-nav__trenner { height: 1px; background: var(--nav-line); margin: 14px 20px; }

/* Reiter */
.bhs-reiter { display: inline-flex; gap: 3px; padding: 3px;
              background: var(--surface-sunken); border-radius: var(--r-mittel); }
.bhs-reiter__tab { padding: 7px 15px; border-radius: var(--r-mittel);
                   font-size: var(--text-m); color: var(--ink-soft); cursor: pointer; }
.bhs-reiter__tab.is-aktiv { background: var(--surface); color: var(--ink);
                            font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.09); }

.bhs-reiter--unterstrich { background: transparent; padding: 0; }
.bhs-reiter--unterstrich .bhs-reiter__tab {
  border-radius: 0; border-bottom: 2.5px solid transparent; box-shadow: none; background: none;
}
.bhs-reiter--unterstrich .bhs-reiter__tab.is-aktiv {
  border-bottom-color: var(--brand); color: var(--ink); font-weight: 700;
}


/* ════════════════ AUFKLAPPBARE KARTE ════════════════
   Eine Karte, die zugeklappt nur ihre Kopfzeile zeigt. Damit lässt sich
   eine lange Liste gleichartiger Dinge — Komponenten, Zähler, Positionen
   — auf ihre Überschriften eindampfen. Zugeklappt tritt an die Stelle
   des Inhalts eine Zusammenfassung, sonst müsste man zum Nachsehen
   jedes Mal aufklappen. */

.bhs-klapp__kopf { cursor: pointer; }
.bhs-klapp__inhalt { display: none; }
.bhs-klapp.is-offen .bhs-klapp__inhalt { display: block; }
.bhs-klapp__pfeil { transition: transform .15s ease; color: var(--ink-faint); }
.bhs-klapp.is-offen .bhs-klapp__pfeil { transform: rotate(180deg); }

.bhs-klapp__zus { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bhs-klapp.is-offen .bhs-klapp__zus { visibility: hidden; }
.bhs-klapp__zus-wert { font-size: var(--text-s); font-weight: 700; color: var(--ok);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Was fehlt, ist nicht falsch — nur noch nicht da: grau, nicht rot. */
.bhs-klapp__zus-wert.is-leer { color: var(--ink-faint); font-weight: 400; }
.bhs-klapp__zus-mehr { font-size: var(--text-xs); color: var(--ink-soft);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ════════════════ AUSWAHLMENÜ AM FELD ════════════════
   Derselbe Popover wie in der Kopfzeile, nur an ein Feld gehängt.
   Dadurch ist Auswählen überall dieselbe Geste: Feld anklicken, aus
   einer Liste wählen. Ein <select> kann das nicht — es kann keine
   zweizeiligen Einträge und keine Kennzahl neben dem Klartext. */

.bhs-menue { position: relative; }
.bhs-menue__knopf { cursor: pointer; text-align: left; justify-content: space-between; }
.bhs-menue__knopf .bhs-menue__pfeil { color: var(--ink-faint); flex-shrink: 0; }
.bhs-menue__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhs-menue__text.is-leer { color: var(--ink-faint); }
.bhs-menue__liste { position: absolute; top: calc(100% + 5px); left: 0; z-index: var(--z-elemente);
                    max-height: 300px; overflow-y: auto; }
.bhs-menue__liste[hidden] { display: none; }
.bhs-menue__eintrag.is-gewaehlt { font-weight: 700; background: var(--brand-strong); }
.bhs-menue__kennzahl { font-family: var(--font-mono); font-size: var(--text-s);
                       color: var(--ink-soft); min-width: 44px; }
/* Eine Karte schneidet ihren Inhalt ab, damit die Rundung sauber bleibt.
   Solange ein Menü offen steht, darf es über den Rand hinausragen. */
.bhs-karte.is-menue-offen { overflow: visible; }


/* ════════════════ VERBUNDENE FELDER ════════════════
   Mehrere Felder, die zusammen eine Angabe bilden, werden zu einem
   Block: außen rund, in der Mitte ein gerader, geteilter Steg. Zwei
   getrennte Rundungen nebeneinander lesen sich sonst wie zwei
   überlappende Eingabefelder. */

.bhs-reihe { display: grid; align-items: start; }
.bhs-reihe > * + * { margin-left: -1px; }
.bhs-reihe .bhs-feld { border-radius: 0; }
.bhs-reihe > :first-child .bhs-feld { border-radius: var(--r-mittel) 0 0 var(--r-mittel); }
.bhs-reihe > :last-child  .bhs-feld { border-radius: 0 var(--r-mittel) var(--r-mittel) 0; }
/* Das Feld unter dem Zeiger gehört nach vorn, sonst schneidet der
   Nachbar seinen Fokusrahmen ab. */
.bhs-reihe .bhs-feld:focus,
.bhs-reihe .bhs-feld:focus-within,
.bhs-reihe .bhs-feld:hover { position: relative; z-index: 1; }
.bhs-reihe .bhs-hinweis { display: block; margin-top: 5px; padding: 0 2px; }
/* Die Beschriftungszeile darüber teilt dieselben Spalten */
.bhs-reihe--kopf > * { padding: 0 2px; }

/* Ein Feld ohne eigenen Rahmen — der Rahmen drumherum trägt es, damit
   eine Einheit oder ein Knopf dazugehört statt danebenzustehen. */
.bhs-feld__zahl { border: none; background: none; font: inherit; color: inherit;
                  width: 100%; outline: none; padding: 0; }


/* ════════════════ ZEILE MIT WERKZEUGEN ════════════════
   Eingaben vorn, Knöpfe dahinter — immer mit demselben Abstand, einer
   halben Knopfbreite. Ohne den liest sich der Knopf als Teil des
   Feldes. --zeilenbreite begrenzt den vorderen Teil, damit der Knopf
   nicht an den rechten Rand wandert. */

:root { --werkzeugabstand: 18px; }

.bhs-werkzeugzeile { display: grid; grid-template-columns: minmax(0, var(--zeilenbreite, 1fr)) auto;
                     gap: var(--werkzeugabstand); align-items: center; justify-content: start; }
.bhs-werkzeuge { display: flex; align-items: center; gap: var(--s-xs); }

/* Ein Knopf, der etwas wegnimmt: als Umriss erkennbar, beim Überfahren
   unmissverständlich. */
.bhs-iknopf--gefahr { color: var(--ink-soft); }
.bhs-iknopf--gefahr:hover { background: var(--fehler-flaeche); border-color: var(--fehler);
                            color: var(--fehler); }


/* ════════════════ ZAHLENFELD MIT PFEILEN ════════════════
   Hoch und runter im Feld statt daneben. */

.bhs-tingel { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; margin-right: -4px; }
.bhs-tingel__knopf { width: 16px; height: 13px; padding: 0; border: none; background: none;
                     color: var(--ink-faint); cursor: pointer; border-radius: 3px;
                     display: flex; align-items: center; justify-content: center; }
.bhs-tingel__knopf:hover { background: var(--surface-sunken); color: var(--ink); }


/* ════════════════ NEBENOPTION ════════════════
   Ein Weg, den man auch gehen kann. Klein, gedämpft, unterstrichen —
   ein tertiärer Knopf wäre fett und schwarz und läse sich wie eine
   zweite Überschrift. */

.bhs-linkknopf { background: none; border: none; padding: 0; margin-top: 9px;
                 font: inherit; font-size: var(--text-s); font-weight: 400;
                 color: var(--ink-soft); text-decoration: underline;
                 text-underline-offset: 2px; cursor: pointer; }
.bhs-linkknopf:hover { color: var(--brand); }


/* ════════════════ FELDGRUPPEN IM KARTENRUMPF ════════════════ */

/* Überschrift über einer Gruppe von Feldern */
.bhs-feldtitel { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
                 letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 8px; }

/* Stammdaten: drei Spalten, ein Feld darf sich über alle ziehen */
.bhs-feldraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                  gap: var(--s-m) var(--s-l); }
.bhs-feldraster__breit { grid-column: 1 / -1; }
@media (max-width: 900px) { .bhs-feldraster { grid-template-columns: minmax(0, 1fr); } }


/* ════════════════ KLAPPBARER ABSCHNITT ════════════════
   Der Trenner ist zugleich der Griff. Zugeklappt bleibt sein Zähler
   stehen, damit man auch dann sieht, was dort noch offen ist. */

.bhs-abschnitt--klappbar { cursor: pointer; user-select: none; }
.bhs-abschnitt--klappbar:hover { background: var(--surface-sunken); }
.bhs-abschnitt__pfeil { color: var(--ink-faint); flex-shrink: 0; transition: transform .15s ease; }
[data-abschnitt].is-zu .bhs-abschnitt__pfeil { transform: rotate(-90deg); }
[data-abschnitt].is-zu > *:not(.bhs-abschnitt) { display: none !important; }
[data-abschnitt].is-zu .bhs-abschnitt--band { margin-bottom: 0; }


/* ════════════════ WERKZEUGLEISTE ════════════════
   Griffe über einer Liste — links auf derselben Kante wie die
   Überschrift und die Einträge darunter. Sie brechen um, wenn weitere
   dazukommen. */

.bhs-werkzeugleiste { display: flex; align-items: center; flex-wrap: wrap;
                      gap: 5px; margin-bottom: var(--s-s); padding-left: 2px; }
.bhs-werkzeugleiste .bhs-iknopf { width: 30px; height: 30px; color: var(--ink-soft); }
.bhs-werkzeugleiste .bhs-iknopf:hover { color: var(--ink); border-color: #bdbdbd; }
/* Ein eingeschalteter Filter ist ein Bedienzustand — also Markenfarbe */
.bhs-werkzeugleiste .bhs-iknopf.is-gewaehlt { background: var(--brand); color: #fff;
                                              border-color: var(--brand); }
.bhs-werkzeugleiste__strich { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* Was ein Filter ausblendet */
.is-gefiltert { display: none !important; }


/* ════════════════ GRUNDLAGE ════════════════ */

[hidden] { display: none !important; }