/*
  workspace-bento-projekt.css — Gestaltung der Projekt-Bausteine in der Bento-Ansicht (Logik: workspace-bento-projekt.js).

  Kurzbeschreibung (für Laien): Ralph, 25.10.2026. (1) Karte „In den Plan übernehmen" im Besprechungsprotokoll: weiche
  graue Karte über der Knopfleiste, Titel fett und dunkel, Ziel-Auswahl als Pillen, je Aufgabe eine Zeile mit Häkchen,
  Text, Wer und Frist; schon Übernommenes ist blass mit Hinweis. Der Knopf „Übernehmen" hat seine eigene Farbe (Blau der
  Navigation). (2) Kachel „Projekt-Warnungen": Zeilen wie die anderen Startseiten-Kacheln, ein roter bzw. gelber Punkt
  zeigt Risiko oder Warnung. Farben nur aus der Marke, Hover überall, nie seitlich scrollen.
*/

/* ── Karte „In den Plan übernehmen" ── */
.bpu { margin-top: 16px; padding: 16px; border-radius: var(--bs-r-k, 14px); background: var(--bs-weich, var(--marke-flaeche-2));
  display: flex; flex-direction: column; gap: 12px; min-width: 0; box-sizing: border-box; }
.bpu-titel { margin: 0; font: 700 15px var(--marke-schrift); color: var(--bs-text, var(--marke-text)); }
.bpu-satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bs-leise, var(--marke-text-2)); }
.bpu-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bpu-label { flex: none; width: 96px; font-size: 12px; font-weight: 600; color: var(--bs-leise, var(--marke-text-2)); }
.bpu-hinweis { font-size: 13px; color: var(--bs-leise, var(--marke-text-2)); }
.bpu-pillen { min-width: 0; }
.bpu-pillen .wb-pille { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

.bpu-kopf, .bpu-zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 180px) 148px; gap: 8px; align-items: center; }
.bpu-kopf { font-size: 12px; font-weight: 600; color: var(--bs-leise, var(--marke-text-2)); padding: 0 8px; }
.bpu-liste { display: flex; flex-direction: column; gap: 4px; }
.bpu-zeile { padding: 8px; border-radius: var(--marke-r-m, 9px); background: var(--bs-karte, var(--marke-flaeche)); transition: background .15s, box-shadow .15s; }
.bpu-zeile:hover { box-shadow: 0 0 0 1px var(--bs-linie, var(--marke-linie)); }
.bpu-zeile.schon { opacity: .7; }
.bpu-zeile.schon:hover { opacity: 1; }
.bpu-schon { grid-column: 2 / -1; font-size: 12px; color: var(--bs-leise, var(--marke-text-2)); }
.bpu-haken { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bpu-haken input { width: 16px; height: 16px; accent-color: var(--marke-nav-blau); cursor: pointer; }
.bpu-feld { width: 100%; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--bs-linie, var(--marke-linie));
  border-radius: var(--marke-r-s, 6px); background: var(--bs-karte, var(--marke-flaeche)); color: var(--bs-text, var(--marke-text)); font: 400 13px var(--marke-schrift); }
.bpu-feld:hover { border-color: color-mix(in srgb, var(--bs-text, var(--marke-text)) 30%, transparent); }
.bpu-feld:focus { outline: 2px solid var(--marke-akzent); outline-offset: 0; border-color: transparent; }
.bpu-aufgabe { font-weight: 600; }

.bpu-msg { min-height: 0; font-size: 13px; color: var(--bs-text, var(--marke-text)); }
.bpu-msg.rot { color: var(--marke-gefahr); font-weight: 600; }
.bpu-lade { display: flex; align-items: center; justify-content: center; padding: 16px 0; }
.bpu-lade .a4h-spin { color: var(--marke-ladekreis); }
.bpu-fertig { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--bs-text, var(--marke-text)); }
.bpu-fertig span { color: var(--bs-leise, var(--marke-text-2)); }
.bpu-aktion { display: flex; flex-wrap: wrap; gap: 8px; }
/* Zweit-Knopf auf der grauen Karte: eigene weiße Fläche, sonst verschwände er im Grund */
.bpu .bs-knopf.zweit { background: var(--bs-karte, var(--marke-flaeche)); color: var(--bs-text, var(--marke-text)); box-shadow: 0 0 0 1px var(--bs-linie, var(--marke-linie)); }
.bpu .bs-knopf.zweit:hover { background: color-mix(in srgb, var(--bs-text, var(--marke-text)) 8%, var(--bs-karte, var(--marke-flaeche))); }
.bs-knopf.bpu-los, .bs-knopf.bpu-oeffnen { background: var(--marke-nav-blau); color: #fff; }
.bs-knopf.bpu-los:hover:not(:disabled), .bs-knopf.bpu-oeffnen:hover:not(:disabled) { background: color-mix(in srgb, var(--marke-nav-blau) 84%, #fff); }

@media (max-width: 720px) {
  .bpu-kopf { display: none; }
  .bpu-zeile { grid-template-columns: 28px minmax(0, 1fr); }
  .bpu-wer, .bpu-frist { grid-column: 2; }
  .bpu-label { width: 100%; }
}

/* ── Kachel „Projekt-Warnungen" ── */
.bpw-liste { margin-top: 0; }
.bpw-zeile em { font-style: normal; color: var(--wb-leise, var(--marke-text-2)); font-weight: 400; }
.bpw-punkt { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; vertical-align: 1px; background: var(--marke-warn); }
.bpw-punkt.rot { background: var(--marke-gefahr); }