/*
  workspace-bento-ziele-liste.css — Aussehen der Ziele-Seite im Menü (Beta-Ring): links die Ziele einzeln, rechts die schmale Gruppen-Liste.
  Gehört zu workspace-bento-ziele-liste.js. Farben nur aus der Marke / den Seiten-Token (--bs-*, --wb-*), hell und dunkel; keine Seitenstreifen.

  Kurzbeschreibung (für Laien): Die Seite steht flach auf dem weißen Grund der großen Karte (keine innere Karte, kein grauer Rahmen).
  Die Spaltenaufteilung (Inhalt links, Liste rechts, Trennlinie, Handy gestapelt) kommt vom gemeinsamen Baustein .wss.wss-zwei
  (workspace-bento-schlicht.css / workspace-bento-seite-liste.css); hier stehen nur die Ziel-Zeilen, die Knöpfe und das Formular ohne Kacheln.
  Diese Datei muss NACH workspace-bento-ziele-tabelle.css geladen werden (hebt dessen grauen Rahmen auf).
*/
/* flach auf Weiß: der graue Rahmen der Tabellen-Fassung entfällt */
:root.wb-menue-modus #bsBereich[data-bereich="ziele"][data-inhalt="eigen"]:has(.zl-wss) { background: transparent; border-radius: 0; padding: 0; }
#bsBereich[data-bereich="ziele"][data-inhalt="eigen"]:has(.zl-wss) .bs-liste { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.zl-wss { flex: 1; min-height: 0; --zl-linie: var(--wb-linie, color-mix(in srgb, var(--bs-text) 10%, transparent)); }
.zl-wss.bsp-seite { display: grid; gap: 0 24px; }
.zl-haupt { min-height: 0; min-width: 0; overflow-y: auto; }
.zl-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; }
.zl-kenn { display: flex; align-items: baseline; gap: 8px; }
.zl-kenn b { font: 700 20px var(--marke-schrift); font-variant-numeric: tabular-nums; color: var(--bs-text); }
.zl-kenn span { font: 400 12px var(--marke-schrift); color: var(--bs-leise); }
.zl-kenn.rot b { color: var(--marke-gefahr); }
.zl-wahl-text { margin: 0 0 12px; }


/* linke Seite */
.zl-haupt { padding-bottom: var(--marke-sp-3); }
.zl-haupt-inhalt { display: flex; flex-direction: column; min-width: 0; }
.zl-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.zl-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(--zl-linie);
  background: transparent; color: var(--bs-text); font: 600 12.5px var(--marke-schrift); cursor: pointer; }
.zl-neu { align-self: flex-start; }   /* Knopf nur so breit wie sein Text, nicht über die ganze Mitte */
.zl-neu:hover { border-color: var(--marke-nav-blau); color: var(--marke-nav-blau); }
.zl-neu.haupt { background: var(--bs-dunkel, var(--bs-text)); border-color: transparent; color: var(--marke-auf-akzent, #fff); }
.zl-neu.haupt:hover { opacity: .9; color: var(--marke-auf-akzent, #fff); }
.zl-neu svg, .zl-stift svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zl-leer { margin: 0 0 8px; color: var(--bs-leise); font-size: 13px; }
.zl-fuss { margin: 12px 0 0; font-size: 12px; color: var(--bs-leise); }
.zl-abschnitt { margin: 16px 0 2px; }
.zl-zeile, .zl-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 14% 12% 26% 40px; align-items: center; gap: 0 12px; }
.zl-spalten { padding: 8px 10px; border-bottom: 1px solid var(--zl-linie); font: 700 11.5px var(--marke-schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--bs-leise); }
.zl-zeile { padding: 10px; border-bottom: 1px solid var(--zl-linie); border-radius: var(--marke-r-s, 8px); cursor: pointer; font: 400 13px var(--marke-schrift); color: var(--bs-text); }
.zl-zeile:hover { background: var(--bs-weich); }
.zl-zeile:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: -2px; }
.zl-zeile.fertig .zl-k b { color: var(--bs-leise); }
.zl-k { min-width: 0; }
.zl-k b { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.zl-k small { display: block; font-size: 12px; color: var(--bs-leise); }
.zl-rot { color: var(--marke-gefahr); font-weight: 600; }
.zl-ziel, .zl-ist { font-weight: 700; font-variant-numeric: tabular-nums; }
.zl-leise { font-size: 12.5px; color: var(--bs-leise); }
.zl-verlauf { min-width: 0; }
.zl-verlauf .bz-kurve { height: 34px; }
.zl-akt { text-align: right; }
.zl-stift { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--zl-linie); border-radius: var(--marke-r-s, 8px);
  background: transparent; color: var(--bs-text); cursor: pointer; }
.zl-stift:hover { border-color: var(--marke-nav-blau); color: var(--marke-nav-blau); }

/* geöffnetes Ziel und Formular: flach, ohne Kacheln */
.zl-haupt .zl-zurueck.bs-zurueck { display: inline-flex; margin: 0 0 12px; }
.zl-haupt .bs-d-aktion { background: none; box-shadow: none; position: static; padding-left: 0; margin-left: 0; margin-right: 0; }
.zl-haupt .bz-detail { max-width: 820px; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-form { display: flex; grid-auto-rows: auto; flex-direction: column; gap: 14px; max-width: 640px; padding-top: 0; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-form .bs-kopfkarte { display: block; flex: none; height: auto; min-height: 0; grid-row: auto; background: none; box-shadow: none; padding: 0; color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-form .bs-kopfkarte h2 { margin: 0 0 2px; font: 700 17px var(--marke-schrift); color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-form .bs-kopfkarte p { margin: 0; font-size: 12.5px; color: var(--bs-leise); }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-k { grid-column: auto; grid-row: auto; min-height: 0; flex: none; padding: 0; background: none; box-shadow: none; border-radius: 0; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-k:hover { box-shadow: none; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-titel-feld { font-size: 16px; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-k-sichern { justify-content: flex-start; }
#bsBereich[data-bereich="ziele"] .zl-haupt .bz-hinweis { margin: 0; }

@media (max-width: 900px) {
  .zl-wss.bsp-seite { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .zl-wss.bsp-seite > .zl-haupt { display: block; order: 2; overflow: visible; padding: 0 16px 16px; }
  .zl-wss.bsp-seite > .zl-sp { order: 1; margin-bottom: 16px; }
  .zl-sp .bsp { height: auto; }
  :root.wb-menue-modus #bsBereich[data-bereich="ziele"][data-inhalt="eigen"]:has(.zl-wss) .bs-liste { overflow-y: auto; }
  .zl-spalten { display: none; }
  .zl-zeile { grid-template-columns: minmax(0, 1fr) auto 40px; row-gap: 2px; }
  .zl-zeile .zl-ziel { display: none; }
  .zl-zeile .zl-verlauf { display: none; }
}