/*
  workspace-bento-arbeit.css — mehr Inhalt in den Bentos des Reiters „Workspace" (Ralph 27.10.2026: „Das ist immer noch
  alles sehr leer … ein paar schöne Diagramme, mehr Fleisch").

  Kurzbeschreibung (für Laien): Hier stehen nur die neuen Bausteine — Kennzahlen in der blauen Bereichs-Karte,
  gestapelter Balken mit Legende (Aktionsplan, Freigaben), waagerechte Balken je Person (Team), Aushang-Karten (Schwarzes
  Brett), Tabelle „Top-Chancen" (Verkauf) und ein ruhiger Leerzustand mit Symbol statt großer weißer Fläche.
  Säulen, Knöpfe, Listen und Zahlen kommen unverändert aus workspace-bento-kacheln.css. Farben nur über die Marken- bzw.
  --wb-Variablen, daher gilt der Dunkelmodus automatisch. Nie seitlich scrollen: alles bricht um oder wird gekürzt.
  Logik: workspace-bento-bereichskopf.js, -kacheln.js, -aufgabenkachel.js, -team-bento.js, -brett.js, -projekt.js.
*/

/* ── Bereichs-Karte: Kennzahlen in der Mitte der blauen Karte (Grundlayout bleibt: „Bereich" oben, Name + Satz unten) ── */
.wbk-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.wbk-zahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--wb-r-k, 14px);
  background: rgba(255, 255, 255, .14); color: var(--wb-text); text-align: left; border: 0; font: inherit; cursor: pointer; transition: background .15s; }
.wbk-zahl:hover { background: rgba(255, 255, 255, .22); }
.wbk-zahl .wk-z { margin-top: 0; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbk-zahl .wk-l { color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wbk-zahl small { font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbk-zahl small b { color: inherit; font-weight: 700; }
/* helle oder eigene Kartenfarbe: Kästchen leicht grau statt weiß-transparent */
.wb-k[data-id="bereich"]:is([data-flaeche="hell"], .zart) .wbk-zahl { background: rgba(20, 20, 29, .06); }
.wb-k[data-id="bereich"]:is([data-flaeche="hell"], .zart) .wbk-zahl:hover { background: rgba(20, 20, 29, .10); }
/* Kopf-Karte flach (Handy, eine Reihe): Kennzahlen weg, sonst überläuft die Karte */
.wb-k[data-id="bereich"]:is([data-groesse="s"], [data-groesse="m"]) .wbk-zahlen { display: none; }

/* ── Gestapelter Balken mit Legende (Werte stehen in der Legende) ── */
.zk-stapel { display: flex; height: 10px; border-radius: var(--marke-r-pill); overflow: hidden; background: var(--wb-weich); flex: none; gap: 2px; }
.zk-stapel i { display: block; height: 100%; min-width: 4px; }
.zk-stapel i:first-child { border-radius: var(--marke-r-pill) 0 0 var(--marke-r-pill); }
.zk-stapel i:last-child { border-radius: 0 var(--marke-r-pill) var(--marke-r-pill) 0; }
.zk-stapel i:only-child { border-radius: var(--marke-r-pill); }
.zk-f-rot { background: var(--wb-rot); } .zk-f-warn { background: var(--marke-warn); } .zk-f-akzent { background: var(--kachel-balken, var(--wb-akzent)); }
.zk-f-zart { background: color-mix(in srgb, var(--kachel-balken, var(--wb-akzent)) 38%, transparent); } .zk-f-grau { background: color-mix(in srgb, var(--wb-text) 22%, transparent); }
.zk-f-gruen { background: var(--wb-gruen); }
.zk-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--wb-leise); flex: none; min-width: 0; }
.zk-legende span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zk-legende b { color: var(--wb-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.zk-legende i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-stapel { background: rgba(255, 255, 255, .18); }

/* ── Waagerechte Balken je Person (Team) ── */
.zk-hbalken { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 0 1 auto; }
.zk-hb { display: grid; grid-template-columns: auto minmax(0, 7fr) minmax(40px, 6fr) auto; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px;
  border: 0; background: none; border-radius: var(--marke-r-m); font: 500 13px var(--marke-schrift); color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.zk-hb:hover { background: var(--wb-weich); }
.zk-hb .teb-kreis { width: 26px; height: 26px; font-size: 11px; }
.zk-hb-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-hb-n small { display: block; font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-hb-b { display: flex; height: 8px; border-radius: var(--marke-r-pill); background: var(--wb-weich); overflow: hidden; }
.zk-hb-b i { display: block; height: 100%; }
.zk-hb-w { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.zk-hb-w.zk-rot { color: var(--wb-rot); }

/* ── Schwarzes Brett: Aushänge als kleine Karten ── */
.zk-aushaenge { display: grid; grid-template-columns: repeat(var(--zk-sp, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; flex: 1 1 auto; min-height: 0; }
.zk-aushang { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; overflow: hidden; padding: 10px 12px; border: 0; border-radius: var(--wb-r-k, 14px);
  background: var(--wb-weich); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background .15s; }
.zk-aushang:hover { background: color-mix(in srgb, var(--wb-text) 9%, var(--wb-karte)); }
.zk-aushang.wichtig { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-rot) 40%, transparent); }
.zk-aushang b { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.zk-aushang p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wb-leise); display: -webkit-box; -webkit-line-clamp: var(--zk-zeilen, 2); -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.zk-aushang small { margin-top: auto; font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .zk-aushang { background: #fff; color: var(--marke-grafit); }

/* ── Tabelle mit Kopf (Verkauf: Top-Chancen) — Spalten kürzen statt seitlich scrollen ── */
.zk-tab.zk-tab-fest { table-layout: fixed; }
.zk-tab-fest td, .zk-tab-fest th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-tab-fest th:first-child { width: 40%; }
.zk-pille { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: var(--marke-r-pill); background: var(--wb-weich); font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* ── Ruhiger Leerzustand: Symbol im Kreis, ein Satz, ggf. ein Knopf — mittig statt unten in großer weißer Fläche ── */
.zk-leer-bild { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 8px; }
.zk-leer-bild .zk-leer-sym { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wb-weich); color: var(--wb-leise); flex: none; }
.zk-leer-bild .zk-leer-sym svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zk-leer-bild b { font-size: 13px; font-weight: 700; color: var(--wb-text); }
.zk-leer-bild .wk-s { margin: 0; max-width: 34ch; }
.wb-k:is([data-groesse="m"]) .zk-leer-bild { flex-direction: row; justify-content: flex-start; text-align: left; padding: 0; }
.wb-k:is([data-groesse="m"]) .zk-leer-bild .zk-leer-sym { width: 36px; height: 36px; }
.wb-k:is([data-groesse="m"]) .zk-leer-bild .wk-s { display: none; }

/* Projekt-Warnungen: Liste füllt die Höhe und scrollt senkrecht */
.wb-k[data-id="z-projektwarnungen"] .bpw-liste.bl-scroll { flex: 1 1 0; }