/*
  workspace-bento-ziele-tabelle.css — Aussehen der Ziele-Tabelle im Menü (Beta-Ring), Vorbild: die Ziele im Kunden-AIOS (Kunden-AIOS).
  Gehört zu workspace-bento-ziele-tabelle.js. Farben nur aus der Marke / den Seiten-Token (--bs-*), hell und dunkel.

  Kurzbeschreibung (für Laien): eine weiße Karte auf grauem Grund mit der Tabelle Kennzahl · Ziel · Ist · Verlauf; die Abschnitte
  (Persönlich, An mich delegiert, Team, Unternehmensziele) haben je eine Überschrift mit ihrem „+“-Knopf rechts. Am Handy entfällt
  die Spalte Verlauf. Die Tabelle nutzt die volle Breite (keine Listenspalte), deshalb gibt es hier keine Seitenwahl.
*/
#bsBereich[data-bereich="ziele"][data-inhalt="eigen"] { --zt-linie: var(--bs-linie, var(--wb-linie)); }
:root.wb-menue-modus #bsBereich[data-bereich="ziele"][data-inhalt="eigen"] { background: var(--az-grund, var(--bs-grund)); border-radius: var(--marke-r-l, 16px); padding: 16px; box-sizing: border-box; }
#bsBereich[data-bereich="ziele"][data-inhalt="eigen"] .bs-liste { overflow-y: auto; }
.zt-karte { background: var(--bs-karte); border-radius: var(--bs-r, 16px); padding: 8px 20px 12px; min-width: 0; }
.zt { width: 100%; border-collapse: collapse; font: 400 13px var(--marke-schrift); color: var(--bs-text); table-layout: fixed; }
.zt thead th { padding: 12px 8px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-leise); border-bottom: 1px solid var(--zt-linie); }
.zt .zt-ziel { width: 14%; } .zt .zt-ist { width: 12%; } .zt .zt-verlauf { width: 26%; } .zt .zt-akt { width: 56px; text-align: right; }
.zt-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zt-kopf th { padding: 22px 0 8px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--zt-linie); }
.zt-h { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.zt-h b { font-size: 15px; font-weight: 700; }
.zt-h small { font-size: 12.5px; color: var(--bs-leise); }
.zt-kopf th > .zt-neu { float: right; margin-left: 8px; }
.zt-neu { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--marke-r-pill, 999px); border: 1px solid var(--zt-linie); background: var(--bs-karte); color: var(--bs-text); font: 600 12.5px var(--marke-schrift); cursor: pointer; }
.zt-neu:hover { border-color: var(--marke-nav-blau); color: var(--marke-nav-blau); }
.zt-neu.haupt { background: var(--bs-dunkel, var(--bs-text)); border-color: transparent; color: var(--marke-auf-akzent, #fff); }
.zt-neu.haupt:hover { opacity: .9; color: var(--marke-auf-akzent, #fff); }
.zt-neu svg, .zt-stift svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zt-leerzeile td { padding: 12px 8px 4px; color: var(--bs-leise); }
.zt-zeile { cursor: pointer; }
.zt-zeile > td { padding: 10px 8px; border-bottom: 1px solid var(--zt-linie); vertical-align: middle; }
.zt-zeile:hover > td { background: var(--bs-weich); }
.zt-zeile:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: -2px; }
.zt-zeile.fertig .zt-k b { color: var(--bs-leise); }
.zt-k { min-width: 0; }
.zt-k b { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.zt-k small { display: block; font-size: 12px; color: var(--bs-leise); }
.zt-rot { color: var(--marke-gefahr); font-weight: 600; }
.zt-zeile .zt-ziel, .zt-zeile .zt-ist { font-weight: 700; font-variant-numeric: tabular-nums; }
.zt-leer { font-size: 12.5px; color: var(--bs-leise); }
.zt-verlauf .bz-kurve { height: 34px; }
.zt-stift { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--zt-linie); border-radius: var(--marke-r-s, 8px); background: var(--bs-karte); color: var(--bs-text); cursor: pointer; }
.zt-stift:hover { border-color: var(--marke-nav-blau); color: var(--marke-nav-blau); }
.zt-fuss { margin: 12px 0 0; font-size: 12px; color: var(--bs-leise); }

@media (max-width: 900px) {
  :root.wb-menue-modus #bsBereich[data-bereich="ziele"][data-inhalt="eigen"] { padding: 8px; }
  .zt-karte { padding: 4px 12px 10px; }
  .zt .zt-verlauf { width: 0; padding: 0; border: 0; overflow: hidden; font-size: 0; }   /* Spalte bleibt (wegen der Abschnitts-Zeilen), ist aber unsichtbar */
  .zt .zt-verlauf > * { display: none; }
  .zt .zt-ziel { width: 22%; } .zt .zt-ist { width: 20%; } .zt .zt-akt { width: 44px; }
  .zt-h { flex-wrap: wrap; gap: 0 8px; }
  .zt-kopf th > .zt-neu { float: none; margin: 6px 6px 0 0; }
}