/*
  workspace-bento-ziele.css — Aussehen der Ziele in der Bento-Ansicht (Logik: workspace-bento-ziele.js).

  Kurzbeschreibung (für Laien): Die Ziele nutzen die Bento-Bereichsvorlage (workspace-bento-seite.css: blaue Kopf-Karte,
  Pillen, Kachel-Raster). Hier stehen nur die neuen Teile: Ziel-Kacheln mit Fortschrittsbalken, Unternehmensziel-Kacheln
  (doppelt breit) mit Kennzahl oben und kleiner Verlaufskurve, das Detail mit großer Kurve und Werten über den Punkten,
  „Stand melden", das Formular als Kacheln (wie „Neue Aktion") und die Pillen. Farben nur aus den Variablen der Marke
  bzw. der Vorlage — Dunkelmodus gilt dadurch automatisch. Greift nur im Bereich „ziele" (und der Home-Kachel z-ziele).
*/

/* Neu nur über die „+"-Kachel (sie erscheint nur für Berechtigte) — der runde Plus-Knopf der Vorlage bleibt aus */
#bsBereich[data-bereich="ziele"] .bs-werkzeug { display: none; }

/* Leerer Filter: kompakte Kachel + „+"-Kachel daneben — gilt für alle Raster-Bereiche, steht in workspace-bento-seite.css */

/* ── Kacheln ── */
#bsBereich[data-bereich="ziele"] .bs-kachel.bz-firma { grid-column: span 2; }
#bsBereich[data-bereich="ziele"] .bs-kachel.bz-fertig { opacity: .72; }
#bsBereich[data-bereich="ziele"] .bs-kachel.bz-spezial { background: var(--bs-weich); box-shadow: none; }
#bsBereich[data-bereich="ziele"] .bs-k-kopf { align-items: center; min-height: 24px; }
#bsBereich[data-bereich="ziele"] .bz-art { flex: 1; min-width: 0; font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bsBereich[data-bereich="ziele"] .bz-titel { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--bs-text); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#bsBereich[data-bereich="ziele"] .bz-stand { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bsBereich[data-bereich="ziele"] .bz-balken { height: 8px; border-radius: var(--marke-r-pill); background: var(--bs-weich); overflow: hidden; flex: none; }
#bsBereich[data-bereich="ziele"] .bz-balken i { display: block; height: 100%; border-radius: inherit; background: var(--marke-akzent); }
#bsBereich[data-bereich="ziele"] .bz-fertig .bz-balken i { background: var(--marke-ok); }
#bsBereich[data-bereich="ziele"] .bz-prozent { font-size: 13px; font-weight: 700; color: var(--bs-text); font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="ziele"] .bz-frist { margin-left: auto; font-size: 12px; color: var(--bs-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
#bsBereich[data-bereich="ziele"] .bz-frist.rot { color: var(--marke-gefahr); font-weight: 600; }

/* Kennzahl oben (Unternehmensziel) */
#bsBereich[data-bereich="ziele"] .bz-kpi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; }
#bsBereich[data-bereich="ziele"] .bz-kpi b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--bs-text); font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="ziele"] .bz-kpi span { font-size: 13px; font-weight: 600; color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .bz-kpi small { margin-left: auto; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="ziele"] .bz-kpi.gross { margin: 0 0 12px; }
#bsBereich[data-bereich="ziele"] .bz-kpi.gross b { font-size: 34px; }
#bsBereich[data-bereich="ziele"] .bz-kpi.gross small { margin-left: 8px; }

/* Verlaufskurve */
#bsBereich[data-bereich="ziele"] .bz-kurve { display: block; width: 100%; height: 64px; flex: none; overflow: visible; }
#bsBereich[data-bereich="ziele"] .bz-kurve.gross { height: 180px; margin: 4px 0 16px; }
#bsBereich[data-bereich="ziele"] .bz-linie { fill: none; stroke: var(--marke-akzent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#bsBereich[data-bereich="ziele"] .bz-ziel-linie { stroke: var(--bs-leise); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
#bsBereich[data-bereich="ziele"] .bz-punkt { fill: var(--bs-karte); stroke: var(--marke-akzent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
#bsBereich[data-bereich="ziele"] .bz-wert { font: 700 12px var(--marke-schrift); fill: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .bz-monat { font: 500 11px var(--marke-schrift); fill: var(--bs-leise); }
#bsBereich[data-bereich="ziele"] .bz-kurve-leer { margin: 0; font-size: 12px; color: var(--bs-leise); }

/* ── Detail ── */
#bsBereich[data-bereich="ziele"] .bz-detail { display: flex; flex-direction: column; flex: 1 0 auto; max-width: 820px; }
#bsBereich[data-bereich="ziele"] .bz-gross { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; margin: 0 0 16px; }
#bsBereich[data-bereich="ziele"] .bz-gross b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="ziele"] .bz-gross span { font-size: 13px; color: var(--bs-leise); }
#bsBereich[data-bereich="ziele"] .bz-gross .bz-balken { grid-column: 1 / -1; height: 10px; margin-top: 8px; }
#bsBereich[data-bereich="ziele"] .bz-h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .bz-stand-form { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--bs-linie); }
#bsBereich[data-bereich="ziele"] .bz-stand-form .a4h-field { width: 100%; box-sizing: border-box; }
#bsBereich[data-bereich="ziele"] .bz-zahl { max-width: 200px; font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="ziele"] .bz-zahl.klein { max-width: 80px; height: 32px; }
#bsBereich[data-bereich="ziele"] .bz-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#bsBereich[data-bereich="ziele"] .bz-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 180px; }
#bsBereich[data-bereich="ziele"] .bz-aktion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#bsBereich[data-bereich="ziele"] .bz-verlauf { padding: 16px 0; border-top: 1px solid var(--bs-linie); }
#bsBereich[data-bereich="ziele"] .bz-verlauf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#bsBereich[data-bereich="ziele"] .bz-verlauf li { padding: 8px 12px; border-radius: var(--bs-r-k); background: var(--bs-weich); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
#bsBereich[data-bereich="ziele"] .bz-verlauf small { display: block; font-size: 11px; color: var(--bs-leise); }
#bsBereich[data-bereich="ziele"] .bs-knopf.bz-gefahr { color: var(--marke-gefahr); }
#bsBereich[data-bereich="ziele"] .bz-tl { display: flex; flex-direction: column; gap: 16px; }

/* ── Formular: Kacheln auf dem grauen Grund (Vorbild „Neue Aktion") ── */
#bsBereich[data-bereich="ziele"][data-ansicht="raster"].bs-detail-auf .bs-detail:has(> .bz-form) { background: transparent; box-shadow: none; padding: 10px 2px 20px; }
#bsBereich[data-bereich="ziele"] .bz-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; gap: 16px; padding-top: 4px; }
#bsBereich[data-bereich="ziele"] .bz-form-kopf { grid-column: span 2; min-height: 0; }
#bsBereich[data-bereich="ziele"] .bz-k { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 20px 22px;
  border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wb-rand, var(--wbs-schatten)); transition: box-shadow .25s; }
#bsBereich[data-bereich="ziele"] .bz-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)), var(--wb-rand, var(--wbs-schatten)); }
#bsBereich[data-bereich="ziele"] .bz-k-breit { grid-column: span 4; }
#bsBereich[data-bereich="ziele"] .bz-k-titel { margin: 0 0 4px; font: 700 15px/1.3 var(--marke-schrift); color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .bz-k .a4h-field { width: 100%; box-sizing: border-box; min-width: 0; }
#bsBereich[data-bereich="ziele"] .bz-titel-feld { font-size: 20px; font-weight: 600; }
#bsBereich[data-bereich="ziele"] .bz-hinweis { margin: auto 0 0; font-size: 12px; }
#bsBereich[data-bereich="ziele"] .bz-mess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bsBereich[data-bereich="ziele"] .bz-mess[hidden] { display: none; }
#bsBereich[data-bereich="ziele"] .bz-mess .bz-feld { flex: none; }
#bsBereich[data-bereich="ziele"] .bz-k-sichern { justify-content: flex-end; }

/* Auswahl als Pillen — schwarz = gewählt (wie im Aktionsplan) */
#bsBereich[data-bereich="ziele"] .bz-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
#bsBereich[data-bereich="ziele"] .bz-pillen button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; background: var(--bs-weich);
  border-radius: var(--marke-r-pill); padding: 7px 12px; font: 600 12px var(--marke-schrift); color: var(--bs-leise); cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
#bsBereich[data-bereich="ziele"] .bz-pillen button:hover { background: var(--marke-feld); color: var(--bs-text); }
#bsBereich[data-bereich="ziele"] .bz-pillen button.an { background: var(--bs-dunkel); color: #fff; }
#bsBereich[data-bereich="ziele"] .bz-pillen button:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; }

/* Home-Kachel: Prozent rechts in der Zeile */
.bz-heim-p { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { #bsBereich[data-bereich="ziele"] .bz-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  #bsBereich[data-bereich="ziele"] .bz-form { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  #bsBereich[data-bereich="ziele"] .bz-form-kopf, #bsBereich[data-bereich="ziele"] .bz-k, #bsBereich[data-bereich="ziele"] .bz-k-breit { grid-column: 1 / -1; }
  #bsBereich[data-bereich="ziele"] .bz-k { padding: 16px 18px; }
}
@media (max-width: 899px) {
  #bsBereich[data-bereich="ziele"] .bs-plus-kachel { min-height: 96px; }
}
@media (max-width: 699px) {
  #bsBereich[data-bereich="ziele"] .bs-kachel.bz-firma { grid-column: auto; }
  #bsBereich[data-bereich="ziele"] .bz-kurve.gross { height: 140px; }
  #bsBereich[data-bereich="ziele"] .bz-mess { grid-template-columns: minmax(0, 1fr); }
}

/* Rechtsklick-Menü einer Kachel (BentoKernMenue, Klasse bz-menue): im offenen Bereich ist der Kern (html.bt-an) nicht immer
   an — dann fehlen seine Farben. Dieselbe Zuordnung wie workspace-bento-crm.css (.bc-menue), nur für diese Menü-Karte. */
.bt-menue.bz-menue {
  --bt-karte: var(--wb-karte, var(--marke-flaeche)); --bt-text: var(--marke-text); --bt-leise: var(--marke-text-2); --bt-linie: var(--marke-linie);
  --bt-linie-stark: var(--marke-linie-stark); --bt-weich: var(--marke-flaeche-2); --bt-feld: var(--marke-feld); --bt-dunkel: var(--wb-dunkel, var(--marke-grafit));
  --bt-auf-dunkel: #fff; --bt-rot: var(--marke-gefahr); --bt-fokus-ring: var(--marke-akzent); --bt-schatten: var(--marke-schatten); --bt-rand: var(--wb-rand, 0 0 0 1px var(--marke-linie));
  --bt-schrift: var(--marke-schrift); --bt-r: var(--wb-r, 22px); }

/* Kurze Meldung unten rechts (Marke: hell, grüner Rand links, kein Emoji) — wie .ba-meldung im Aktionsplan */
.bz-toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 16px;
  border-radius: var(--bs-r-k, 14px); border: 1px solid color-mix(in srgb, var(--marke-ok) 40%, var(--marke-linie)); background: var(--marke-flaeche); color: var(--marke-text); box-shadow: var(--marke-schatten);
  font: 500 13px var(--marke-schrift); }
.bz-toast.fehler { border-color: color-mix(in srgb, var(--marke-gefahr) 45%, var(--marke-linie)); }
@media (max-width: 699px) { .bz-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }