/*
  bento-spalte.css — Aussehen des Bausteins „rechte Menüspalte“ (Logik: bento-spalte.js).

  Kurzbeschreibung (für Laien): Ralph, 08.11.2026 — „Die Menüs rechts sehen immer unterschiedlich aus. Wir brauchen eine Stilvorlage.“
  Eine schmale Spalte (224 px) rechts im Seitenfenster mit einer feinen Linie links: kleine graue Überschriften, darunter die
  Einträge mit Symbol im Kästchen, Titel und ggf. einer zweiten Zeile; rechts Anzahl, Wert, Abzeichen oder Haken; unten das ＋.
  Der gewählte Eintrag ist nur leise hinterlegt. Nur die Liste scrollt, das ＋ bleibt stehen. Am Handy steht erst die Liste, dann das Detail.
  Farben nur aus den Bento-/Marken-Variablen (hell und dunkel); die Gruppenfarbe kommt aus --wbm-f. Kein Lila, keine Seitenstreifen.
*/
:root { --bsp-b: 224px; }
.bsp { --bsp-text: var(--wb-text, var(--bs-text, var(--marke-text, #1a1a1a))); --bsp-leise: var(--wb-leise, var(--bs-leise, #6b7280));
  --bsp-linie: var(--wb-linie, var(--bs-linie, #e5e7eb)); --bsp-weich: var(--wb-weich, var(--bs-weich, #f3f4f6)); --bsp-f: var(--wbm-f, var(--bsp-leise));
  display: flex; flex-direction: column; width: var(--bsp-b); min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; flex: none;
  border-left: 1px solid var(--bsp-linie); font: 400 13px var(--marke-schrift, inherit); color: var(--bsp-text); }
.bsp svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bsp button { font: inherit; color: inherit; cursor: pointer; }
.bsp-kopf { padding: 0 16px 8px; font: 400 12px var(--marke-schrift, inherit); color: var(--bsp-leise); }
.bsp-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0 8px 8px 7px; display: flex; flex-direction: column; gap: 2px; }
.bsp-gruppe { margin: 16px 8px 2px; padding: 0; border: 0; background: none; display: flex; align-items: center; gap: 4px; text-align: left;
  font: 600 11px var(--marke-schrift, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--bsp-leise); }
.bsp-liste > .bsp-gruppe:first-child { margin-top: 0; }
/* Aufeinanderfolgende Gruppen OHNE Titel (z. B. Ansichten, darunter Landkarte/Teamleitungen): dünne Trennlinie + Luft statt Verschmelzen (Ralph 08.11.2026) */
.bsp-gruppe-ohne { display: flex; flex-direction: column; gap: 2px; }
.bsp-gruppe-ohne + .bsp-gruppe-ohne { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bsp-linie); }
button.bsp-gruppe { cursor: pointer; }
button.bsp-gruppe svg { width: 12px; height: 12px; transition: transform .15s; }
button.bsp-gruppe[aria-expanded="true"] svg { transform: rotate(90deg); }
.bsp-zeile { position: relative; border-radius: var(--marke-r-m, 9px); }
.bsp-eintrag { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 0; border-radius: inherit; background: transparent; text-align: left; }
.bsp-zeile:hover { background: var(--bsp-weich); }
.bsp-zeile.an { background: color-mix(in srgb, var(--bsp-f) 10%, transparent); }
.bsp-zeile.an .bsp-titel { font-weight: 600; }
.bsp-zeile.gesperrt .bsp-eintrag { opacity: .7; }
.bsp-sym { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--marke-r-s, 6px);
  background: color-mix(in srgb, var(--bsp-f) 12%, transparent); color: var(--bsp-f); font: 700 11px var(--marke-schrift, inherit); }
.bsp-sym.rund { border-radius: 50%; overflow: visible; }
.bsp-sym img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.bsp-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--bsp-leise); }
.bsp-punkt.rot { background: var(--marke-gefahr, #d33); } .bsp-punkt.gelb { background: var(--marke-warn, #e0a100); } .bsp-punkt.gruen { background: var(--marke-ok, #2e9e5b); }
.bsp-online { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--marke-ok, #2e9e5b); border: 2px solid var(--wb-karte, var(--bs-karte, #fff)); box-sizing: content-box; }
.bsp-symabz { position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 14px; padding: 0 2px; box-sizing: border-box; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--wb-karte, var(--bs-karte, #fff)); color: var(--bsp-text); border: 1px solid var(--bsp-linie); font: 700 9px/1 var(--marke-schrift, inherit); }
.bsp-symabz svg { width: 9px; height: 9px; stroke-width: 2.4; }
.bsp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bsp-titel { font: 500 13px var(--marke-schrift, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsp-meta { font: 400 12px var(--marke-schrift, inherit); color: var(--bsp-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsp-zahl, .bsp-wert { flex: none; font: 600 12px var(--marke-schrift, inherit); color: var(--bsp-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsp-wert { font-weight: 500; }
.bsp-zahl.rot { color: var(--marke-gefahr, #d33); }
.bsp-abz { flex: none; max-width: 72px; height: 18px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11px/18px var(--marke-schrift, inherit); background: var(--bsp-weich); color: var(--bsp-leise); }
.bsp-abz.rot { background: color-mix(in srgb, var(--marke-gefahr, #d33) 14%, transparent); color: var(--marke-gefahr, #d33); }
.bsp-abz.ok { background: color-mix(in srgb, var(--marke-ok, #2e9e5b) 14%, transparent); color: var(--bsp-text); }
.bsp-abz.warn { background: color-mix(in srgb, var(--marke-warn, #e0a100) 18%, transparent); color: var(--bsp-text); }
.bsp-haken, .bsp-schloss, .bsp-pfeil { flex: none; display: flex; color: var(--bsp-leise); }
.bsp-haken { color: var(--bsp-f); }
.bsp-zeile.rot .bsp-titel { color: var(--marke-gefahr, #d33); }
.bsp-zeile.rot .bsp-sym { background: color-mix(in srgb, var(--marke-gefahr, #d33) 12%, transparent); color: var(--marke-gefahr, #d33); }
.bsp-aktionen { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding-left: 8px; background: var(--bsp-weich); border-radius: var(--marke-r-s, 6px); }
.bsp-zeile.an .bsp-aktionen { background: color-mix(in srgb, var(--bsp-f) 10%, var(--wb-karte, var(--bs-karte, #fff))); }
.bsp-zeile:hover .bsp-aktionen, .bsp-zeile:focus-within .bsp-aktionen { display: flex; }
.bsp-aktionen button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--marke-r-s, 6px); background: transparent; color: var(--bsp-leise); padding: 0; }
.bsp-aktionen button:hover { background: color-mix(in srgb, var(--bsp-text) 8%, transparent); color: var(--bsp-text); }
.bsp-zeile.hat-aktionen:hover .bsp-zahl, .bsp-zeile.hat-aktionen:hover .bsp-wert, .bsp-zeile.hat-aktionen:hover .bsp-abz, .bsp-zeile.hat-aktionen:hover .bsp-haken { visibility: hidden; }
@media (hover: none) { .bsp-aktionen { display: flex; position: static; transform: none; background: none; padding: 0; } .bsp-zeile { display: flex; align-items: center; } .bsp-zeile.hat-aktionen .bsp-eintrag { flex: 1 1 auto; width: auto; min-width: 0; } }
.bsp-eintrag[aria-expanded="true"] .bsp-pfeil svg { transform: rotate(90deg); }
.bsp-kinder { display: flex; flex-direction: column; gap: 2px; padding-left: 20px; }
.bsp-kinder .bsp-eintrag { padding: 5px 8px; }
.bsp-fuss { flex: none; padding: 8px 16px 0 15px; }
.bsp-neu { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px);
  background: color-mix(in srgb, var(--bsp-f) 12%, transparent); color: var(--bsp-f); }
.bsp-neu:hover { background: color-mix(in srgb, var(--bsp-f) 22%, transparent); }
.bsp-leer { margin: 8px 16px; font: 400 13px/1.5 var(--marke-schrift, inherit); color: var(--bsp-leise); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bsp-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bsp-linie); border-top-color: var(--bsp-leise); animation: bsp-dreh .8s linear infinite; }
@keyframes bsp-dreh { to { transform: rotate(360deg); } }
.bsp-nochmal { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bsp-linie); background: transparent; font-weight: 600; font-size: 12px; }
.bsp-eintrag:focus-visible, .bsp-neu:focus-visible, .bsp-gruppe:focus-visible, .bsp-aktionen button:focus-visible, .bsp-nochmal:focus-visible { outline: 2px solid var(--marke-akzent, #3b6ea5); outline-offset: -2px; }
:root[data-theme="dark"] .bsp-sym, :root[data-theme="dark"] .bsp-neu { background: color-mix(in srgb, var(--bsp-f) 28%, transparent); color: var(--bsp-text); }
:root[data-theme="dark"] .bsp-zeile.rot .bsp-sym { background: color-mix(in srgb, var(--marke-gefahr, #d33) 28%, transparent); }
:root[data-theme="dark"] .bsp-zeile.an { background: color-mix(in srgb, var(--bsp-f) 18%, transparent); }

/* Seite mit Detail links und Spalte rechts (24 px Luft vor der Linie); Handy: erst Liste, dann Detail mit „Zur Liste“ */
.bsp-seite { display: grid; grid-template-columns: minmax(0, 1fr) var(--bsp-b); column-gap: 24px; min-height: 0; height: 100%; }
.bsp-seite > .bsp-detail { min-width: 0; min-height: 0; overflow-y: auto; }
.bsp-zurueck { display: none; align-items: center; gap: 4px; margin: 0 0 12px; padding: 4px 10px 4px 6px; border: 0; border-radius: 999px; background: var(--wb-weich, var(--bs-weich, #f3f4f6)); font: 600 13px var(--marke-schrift, inherit); color: inherit; cursor: pointer; }
@media (max-width: 900px) {
  .bsp { width: 100%; border-left: 0; }
  .bsp-seite { grid-template-columns: minmax(0, 1fr); }
  .bsp-seite > .bsp-detail { display: none; }
  .bsp-seite.bsp-detail-auf > .bsp-detail { display: block; }
  .bsp-seite.bsp-detail-auf > .bsp { display: none; }
  .bsp-seite .bsp-zurueck { display: inline-flex; }
}