/*
  workspace-bento-ablaeufe.css — Gestaltung des Bereichs „Abläufe" (Logik: workspace-bento-ablaeufe.js).

  Kurzbeschreibung (für Laien): Ralph, 08.11.2026 — die Schritte eines Ablaufs als schlichte Liste in der Detail-Karte: Nummer, Name,
  darunter Zuständige und Termin, rechts der Stand als Etikett. Der Schritt, der gerade dran ist, ist zart blau hinterlegt (läuft nach
  rechts unten ins Weiße aus), blockierte und überfällige Schritte tragen ein rotes Etikett. Kein farbiger Seitenstreifen, keine
  Beispieltexte in Feldern, kein eigenes Suchfeld. Greift nur im geöffneten Bereich (#bsBereich[data-bereich="ablaeufe"]).
*/
/* marke-ausnahme: Bento-Ansicht wie im AIOS — Kachel-Radien (--bs-r) gelten hier bewusst (marke/REGELN.md, Abschnitt Bento-Ansicht) */

#bsBereich[data-bereich="ablaeufe"] .ab-schritte { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#bsBereich[data-bereich="ablaeufe"] .ab-schritt { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--bs-linie); border-radius: var(--marke-r-m, 9px); background: var(--bs-karte); }
#bsBereich[data-bereich="ablaeufe"] .ab-schritt.dran { background: linear-gradient(135deg, var(--wb-akzent-zart, var(--marke-nav-kachel)) 0%, var(--bs-karte) 100%); }
#bsBereich[data-bereich="ablaeufe"] .ab-schritt.st-erledigt .ab-s-titel b { color: var(--bs-leise); text-decoration: line-through; }
#bsBereich[data-bereich="ablaeufe"] .ab-s-kopf { display: flex; align-items: center; gap: 10px; }
#bsBereich[data-bereich="ablaeufe"] .ab-nr { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--bs-weich); font-size: 12px; font-weight: 700; }
#bsBereich[data-bereich="ablaeufe"] .ab-s-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#bsBereich[data-bereich="ablaeufe"] .ab-s-titel small { font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="ablaeufe"] .ab-pfeile { flex: none; display: flex; flex-direction: column; gap: 2px; }
#bsBereich[data-bereich="ablaeufe"] .ab-pf { border: 1px solid var(--bs-linie); background: var(--bs-karte); color: var(--bs-text); border-radius: 6px; width: 22px; height: 18px; line-height: 1; font-size: 12px; cursor: pointer; padding: 0; }
#bsBereich[data-bereich="ablaeufe"] .ab-pf:disabled { opacity: .35; cursor: default; }
#bsBereich[data-bereich="ablaeufe"] .ab-dran, #bsBereich[data-bereich="ablaeufe"] .ab-notiz { margin: 0; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="ablaeufe"] .ab-s-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#bsBereich[data-bereich="ablaeufe"] .ab-form { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; font-size: 12px; }
#bsBereich[data-bereich="ablaeufe"] .ab-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--bs-leise); }
#bsBereich[data-bereich="ablaeufe"] .ab-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bsBereich[data-bereich="ablaeufe"] .ab-neu { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--bs-linie); border-radius: var(--marke-r-m, 9px); }
#bsBereich[data-bereich="ablaeufe"] .ab-meldung { margin: 0; padding: 8px 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-ok) 12%, var(--bs-karte)); font-size: 12px; }
#bsBereich[data-bereich="ablaeufe"] .ab-meldung.fehler { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); }

/* ── Seite mit Spalte rechts (Baustein BentoSpalte): Mitte = Filter-Pillen + Ablauf, kein Kopf-/Werkzeug-Raster des Seitenbaukastens ── */
#bsBereich[data-bereich="ablaeufe"] > .bs-kopf, #bsBereich[data-bereich="ablaeufe"] .bs-werkzeug, #bsBereich[data-bereich="ablaeufe"] .bs-pillen,
#bsBereich[data-bereich="ablaeufe"] > .bs-raster > .bs-detail { display: none !important; }
#bsBereich[data-bereich="ablaeufe"]:has(> .bs-kopf) { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="ablaeufe"] .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="ablaeufe"] .bs-liste-karte { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
#bsBereich[data-bereich="ablaeufe"] .bs-liste { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; -webkit-mask-image: none; mask-image: none; }
.ab-seite { flex: 1; min-height: 0; column-gap: 0; background: var(--bs-karte); border-radius: var(--bs-r, 16px); overflow: hidden; color: var(--bs-text); }
.ab-mitte { padding: 20px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.ab-spalte { padding: 12px 0; box-sizing: border-box; }
:root.wb-menue-modus .ab-spalte { padding-bottom: 0; }   /* Raster: ＋ bei y = 838 wie auf Aufgaben (Ralph 08.11.2026) */
.ab-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-pille { height: 30px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill, 999px); background: var(--bs-weich); color: var(--bs-text); font: 500 12px var(--marke-schrift); cursor: pointer; }
.ab-pille:hover { background: color-mix(in srgb, var(--bs-text) 10%, transparent); }
.ab-pille.an { background: var(--bs-dunkel, var(--bs-text)); color: var(--marke-auf-akzent, #fff); font-weight: 600; }
:root.wb-menue-modus #bsBereich[data-bereich="ablaeufe"] { background: var(--az-grund, var(--bs-grund)); border-radius: var(--marke-r-l, 16px); padding: 16px; box-sizing: border-box; }
@media (max-width: 900px) { :root.wb-menue-modus #bsBereich[data-bereich="ablaeufe"] { padding: 8px; } .ab-seite { grid-template-columns: minmax(0, 1fr); } }