/*
  workspace-bento-aktionsplaene.css — Aussehen der „Aktionspläne“ im Menü (Beta-Ring), Vorbild: die Aktionspläne im Kunden-AIOS (Kunden-AIOS).
  Gehört zu workspace-bento-aktionsplaene.js. Farben nur aus der Marke / den Seiten-Token (--bs-*), hell und dunkel; keine farbigen Seitenstreifen.

  Kurzbeschreibung (für Laien): auf grauem Grund eine Filterzeile, darunter fünf weiße Kennzahl-Karten (Stand 08.11.2026: Filter als Pillen oben, rechts die Pläne über den Baustein BentoSpalte, kein blauer Rand mehr – die gewählte Kennzahl ist leise hinterlegt) und eine große
  weiße Karte mit der Tabelle Plan · Thema · Aufgabe · Verantwortlich · Termin · Status · Letzter Eintrag. Die Tabelle nutzt die volle Breite (keine
  Listenspalte, deshalb keine Seitenwahl). Am Handy stehen die Kennzahlen zu zweit und die Tabelle scrollt nur in ihrer Karte.
*/
#bsBereich[data-bereich="aktionsplaene"] > .bs-kopf, #bsBereich[data-bereich="aktionsplaene"] .bs-werkzeug, #bsBereich[data-bereich="aktionsplaene"] .bs-pillen,
#bsBereich[data-bereich="aktionsplaene"] > .bs-raster > .bs-detail { display: none !important; }
#bsBereich[data-bereich="aktionsplaene"]:has(> .bs-kopf) { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="aktionsplaene"] .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="aktionsplaene"] .bs-liste-karte { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
#bsBereich[data-bereich="aktionsplaene"] .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="aktionsplaene"] { background: var(--az-grund, var(--bs-grund)); border-radius: var(--marke-r-l, 16px); padding: 16px; box-sizing: border-box; }

.ap { --ap-linie: var(--bs-linie, var(--wb-linie)); flex: 1; min-height: 0; min-width: 0; padding: 12px 0; box-sizing: border-box; background: var(--bs-karte); border-radius: var(--bs-r, 16px); color: var(--bs-text); font-family: var(--marke-schrift); overflow: hidden; }
:root.wb-menue-modus .ap { padding-bottom: 0; }   /* Raster: Spalte bis zum unteren Rand, ＋ bei y = 838 wie auf Aufgaben (Ralph 08.11.2026) */
.ap-seite { height: 100%; }
.ap-mitte { padding: 8px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.ap-mitte > * { flex: none; }
.ap-mitte > .ap-karte, .ap-mitte > .ap-raum { flex: 1 1 auto; }
.ap-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-pillen button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill, 999px); background: var(--bs-weich); font: 600 12px var(--marke-schrift); }
.ap-pillen button.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 16%, transparent); }
:where(.ap button) { font: inherit; color: inherit; cursor: pointer; }
.ap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ap button:focus-visible, .ap input:focus-visible, .ap select:focus-visible, .ap-planzeile:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }

/* Filterzeile */
.ap-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.ap-suche, .ap-sel { height: 28px; border: 0; border-radius: var(--marke-r-pill, 999px); background: var(--bs-weich); color: var(--bs-text); font: 400 13px var(--marke-schrift); padding: 0 14px; box-sizing: border-box; }
.ap-suche { width: 200px; }
.ap-sel { padding-right: 8px; font-weight: 600; font-size: 12px; max-width: 200px; }
.ap-sel.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 16%, transparent); }
.ap-sel.kurz { width: 120px; font-weight: 600; color: var(--bs-leise); }
.ap-sel:disabled { opacity: .6; }
.ap-platz { flex: 1; }
.ap-ueber { font-size: 13px; color: var(--bs-leise); }
.ap-neu { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--marke-r-pill, 999px); background: var(--bs-dunkel, var(--bs-text)); color: var(--marke-auf-akzent, #fff); font-weight: 600; font-size: 13px; }
.ap-neu:hover { opacity: .9; }

/* Kennzahlen */
.ap-kzs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; flex: none; }
.ap-kz { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: var(--marke-r-m, 9px); background: var(--bs-weich); text-align: left; min-width: 0; }
.ap-kz:hover { background: var(--marke-feld, var(--bs-weich)); }
.ap-kz.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 14%, transparent); }
.ap-kz span { font-size: 13px; font-weight: 600; color: var(--bs-leise); }
.ap-kz b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ap-kz b.rot, .ap-tab td.rot { color: var(--marke-gefahr); }
.ap-hinweis { margin: -4px 0 0; font-size: 12px; color: var(--bs-leise); flex: none; }
.ap-hinweis:empty { display: none; }

/* Tabelle */
.ap-karte { flex: 1; min-height: 0; overflow: auto; background: transparent; padding: 0; }
.ap-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-tab thead th { position: sticky; top: 0; z-index: 1; background: var(--bs-karte); padding: 12px 8px; text-align: left; font-size: 12px; font-weight: 700; color: var(--bs-leise); border-bottom: 1px solid var(--ap-linie); white-space: nowrap; }
.ap-tab td { padding: 10px 8px; border-bottom: 1px solid var(--ap-linie); vertical-align: top; }
.ap-tab tbody tr:hover td { background: var(--bs-weich); }
.ap-sort { border: 0; background: none; padding: 0; font-weight: 700; color: inherit; }
.ap-plan { display: inline-block; padding: 4px 10px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-nav-blau) 12%, var(--bs-karte)); color: var(--marke-nav-blau); font-size: 12px; font-weight: 600; line-height: 1.3; }
.ap-thema { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--marke-nav-blau); }
.ap-aufgabe { border: 0; background: none; padding: 0; text-align: left; font-weight: 500; }
.ap-aufgabe:hover { color: var(--marke-nav-blau); text-decoration: underline; }
.ap-leise { color: var(--bs-leise); }
.ap-termin, .ap-status, .ap-kommfeld { height: 32px; border: 1px solid transparent; border-radius: var(--marke-r-s, 8px); background: transparent; color: var(--bs-text); font: 400 13px var(--marke-schrift); padding: 0 6px; box-sizing: border-box; }
.ap-termin:hover, .ap-status:hover, .ap-termin:focus, .ap-status:focus { border-color: var(--ap-linie); background: var(--bs-karte); }
.ap-termin.rot { color: var(--marke-gefahr); font-weight: 600; }
.ap-letzter { min-width: 200px; max-width: 340px; font-size: 12.5px; }
.ap-eintrag { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-komm { border: 0; background: none; padding: 4px 0 0; font-size: 12.5px; color: var(--bs-leise); }
.ap-komm:hover { color: var(--marke-nav-blau); }
.ap-kommfeld { width: 100%; margin-top: 4px; border-color: var(--ap-linie); background: var(--bs-karte); }
.ap-leer { margin: 0; padding: 24px 8px; font-size: 13px; color: var(--bs-leise); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ap-meldung { margin: 0; min-height: 0; font-size: 12.5px; color: var(--marke-gefahr); flex: none; }
.ap-meldung:empty { display: none; }

/* Reiter „Aktionspläne“ */
.ap-planzeile { cursor: pointer; }
.ap-pname { font-weight: 700; }
.ap-pname small { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--bs-leise); }
.ap-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; flex: none; background: var(--bs-weich); border-radius: var(--marke-r-m, 9px); padding: 12px 16px; }
.ap-form[hidden] { display: none; }
.ap-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--bs-leise); flex: 1; min-width: 200px; }
.ap-feld input { height: 38px; font-weight: 400; color: var(--bs-text); }
.ap-knopf { height: 34px; padding: 0 16px; border-radius: var(--marke-r-pill, 999px); border: 1px solid var(--ap-linie); background: var(--bs-karte); font-weight: 600; font-size: 13px; }
.ap-knopf.haupt { background: var(--bs-dunkel, var(--bs-text)); border-color: transparent; color: var(--marke-auf-akzent, #fff); }

/* Aufgabe offen (Bausteine der Aufgaben-Zentrale) */
.ap-raum { flex: 1; min-height: 0; overflow-y: auto; padding: 0; }
.ap-zurueck { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 4px 12px 4px 6px; border: 0; border-radius: var(--marke-r-pill, 999px); background: var(--bs-weich); font-size: 13px; font-weight: 600; }
.ap-raum .bs-d-aktion { position: static; margin: 12px 0 0; padding: 0; background: none; border: 0; }

@media (max-width: 900px) {
  :root.wb-menue-modus #bsBereich[data-bereich="aktionsplaene"] { padding: 8px; }
  .ap { overflow-y: auto; }
  .ap-mitte { padding: 8px 16px; }
  .ap-kzs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-karte { flex: none; max-height: 70vh; padding: 4px 8px 8px; }
  .ap-suche { width: 100%; }
  .ap-sel { max-width: 100%; flex: 1 1 140px; }
  /* Tabelle wird zu Karten: jede Aufgabe untereinander, nie nach rechts scrollen */
  .ap-tab, .ap-tab tbody, .ap-tab tr, .ap-tab td { display: block; }
  .ap-tab thead { display: none; }
  .ap-tab tr { padding: 10px 0; border-bottom: 1px solid var(--ap-linie); }
  .ap-tab td { padding: 2px 0; border: 0; }
  .ap-tab tbody tr:hover td { background: none; }
  .ap-letzter { min-width: 0; max-width: none; }
}