/*
  workspace-bento-kennzahlen.css — Aussehen des Fensters „Kennzahlen“ (workspace-bento-kennzahlen.js).

  Kurzbeschreibung (für Laien): eine weiße Karte auf grauem Grund. Links die Zahlen als große Kacheln (Maße und Verlauf der .bs-zahl, laufen leicht
  ins Weiße aus), rechts eine schmale Liste „Kennzahlen“ und Dashboards, wie bei den Projekten. Ohne Scrollen. Am Handy stehen die
  Kacheln zweispaltig, die Liste darunter. Farben nur aus der Marke / den Seiten-Token (--bs-*); keine Seitenstreifen.
*/
#bsBereich[data-bereich="kennzahlen"] > .bs-kopf,
#bsBereich[data-bereich="kennzahlen"] .bs-werkzeug, #bsBereich[data-bereich="kennzahlen"] .bs-pillen,
#bsBereich[data-bereich="kennzahlen"] > .bs-raster > .bs-detail { display: none !important; }
#bsBereich[data-bereich="kennzahlen"]:has(> .bs-kopf) { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="kennzahlen"] .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="kennzahlen"] .bs-liste-karte { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
#bsBereich[data-bereich="kennzahlen"] .bs-liste { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; -webkit-mask-image: none; mask-image: none; }
:root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] { background: var(--az-grund, var(--bs-grund)); border-radius: var(--marke-r-l, 16px); padding: 16px; box-sizing: border-box; }

.kz { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bs-karte); border-radius: var(--bs-r, 16px); overflow: hidden; color: var(--bs-text); font-family: var(--marke-schrift); }
.kz-haupt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: 16px; padding: 20px; min-height: 0; align-content: start; }
.kz-k { position: relative; border: 0; border-radius: var(--bs-r, 16px); padding: 20px 24px; box-sizing: border-box; min-width: 0; min-height: 120px; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  color: var(--bs-text); font-family: var(--marke-schrift); box-shadow: var(--wbs-schatten); transition: box-shadow .25s, transform .25s; background: var(--bs-karte); }   /* Maße wie .bs-zahl der Seitenvorlage */
.kz-k:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .10); transform: translateY(-3px); }
.kz-k:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 2px; }
.kz-k[class*="ton-"] { background: linear-gradient(135deg, var(--bs-ton) 30%, color-mix(in srgb, var(--bs-ton) 66%, var(--bs-verlauf-ziel))); }
.kz-k.ton-blau { --bs-ton: var(--wb-akzent-zart, var(--marke-nav-kachel)); }
.kz-k.ton-rot { --bs-ton: color-mix(in srgb, var(--marke-gefahr) 14%, var(--bs-karte)); }
.kz-k span { font-size: 15px; font-weight: 700; line-height: 1.3; }
.kz-k b { margin-top: auto; font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kz-k small { font-size: 12px; color: var(--bs-leise); margin-top: 4px; }
.kz.bsp-seite { grid-template-columns: minmax(0, 1fr) var(--bsp-b, 224px); column-gap: 0; padding: 12px 0; box-sizing: border-box; }
.kz-sp { display: flex; min-height: 0; }

@media (max-width: 900px) {
  :root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] { padding: 8px; }
  .kz, .kz.bsp-seite { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .kz.bsp-seite > .bsp-detail, .kz.bsp-seite > .kz-sp { display: block; }
  .kz-haupt { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); padding: 12px; gap: 12px; }
  .kz-k { min-height: 96px; padding: 14px 16px; }
  .kz-k b { font-size: 26px; }
}

/* Raster (Ralph 08.11.2026): Kacheln beginnen wie überall bei x = 319 / y = 152 und enden rechts bei 1404 – kein zusätzlicher Innenrand (vorher 20 + 12 px oben, 20 px links/rechts, 16 px Fensterrand rechts) */
:root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] { padding-right: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] .kz-haupt { padding: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] .kz.bsp-seite { padding: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="kennzahlen"] .bs-liste { padding: 0; }