/*
  workspace-bento-seite.css — Bereichs-Seitenvorlage der Bento-Ansicht (Logik: workspace-bento-seite.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — „alle Sonderfunktionen in Bento, genau diesen Bento-Style".
  Ein geöffneter Bereich (zuerst das Postfach) besteht aus schwebenden weißen Karten auf hellgrauem Grund, je 12 px Luft:
  oben eine Reihe Kennzahlen-Kacheln, darunter links EINE Karte mit Suche, Filter-Pillen und der Liste (Tabelle mit Kopf),
  rechts eine Karte mit dem Detail. Schwarze aktive Pillen, schwarze runde Knöpfe, kein Lila, keine Symbole neben Titeln.
  Die Seite selbst scrollt nie — gescrollt wird nur in den Karten. Der Seitenname steht als Pille in der Kopfleiste.
  Drei Teile:
    A · .bs-*                 — die Vorlage; greift nur, wenn workspace-bento-seite.js „bs-offen" am <html> setzt
                                (und das tut es nur in der Bento-Ansicht). Neutral benannt für den gemeinsamen Bento-Baukasten.
    B · .ws-bento-flach       — Vorstufe (bestehende Bereiche an Ort und Stelle), nicht eingeschaltet
    C · .ws-bento-seite       — Seiten in Rahmen (iframes), nicht eingeschaltet
  Ohne diese Klassen greift hier keine einzige Regel — die Seitenleisten-Ansicht bleibt unverändert.
  Vorbild: Chat im Bento (workspace-bento-chat.css) und AIOS public/assets/css/bento-seite.css.
*/

/* marke-ausnahme: Bento-Ansicht wie im AIOS (Ralph 23.10.2026) — große Rundungen, hellgrauer Grund und große Kennzahlen sind dort festgelegt (gleiche Werte wie workspace-bento.css) */
:root.ws-bento, :root.ws-bento-seite, :root.bs-offen {
  --wbs-grund: #eceef2; --wbs-r: 22px; --wbs-r-k: 14px; --wbs-luft: 12px;
  --wbs-karte: var(--marke-flaeche, #fff); --wbs-text: var(--marke-text, #14141d); --wbs-leise: var(--marke-text-2, #5b5b6b);
  --wbs-schatten: 0 1px 2px rgba(15, 23, 42, .04);
  /* Vorlage: übernimmt die Werte der Bento-Startseite, wo es sie gibt */
  --bs-grund: var(--wb-grund, var(--wbs-grund)); --bs-karte: var(--wb-karte, var(--wbs-karte)); --bs-text: var(--wb-text, var(--wbs-text));
  --bs-leise: var(--wb-leise, var(--wbs-leise)); --bs-weich: var(--wb-weich, var(--marke-flaeche-2, #f0f0f7)); --bs-linie: var(--wb-linie, var(--marke-linie, rgba(20, 20, 45, .08)));
  --bs-dunkel: var(--wb-dunkel, var(--marke-grafit, #14141d)); --bs-r: var(--wb-r, 22px); --bs-r-k: var(--wb-r-k, 14px); --bs-luft: 12px;
  --bs-verlauf-ziel: var(--wb-verlauf-ziel, #fff);
}
:root.ws-bento[data-theme="dark"], :root.ws-bento-seite[data-theme="dark"] { --wbs-grund: var(--marke-grund, #0d0d18); }

/* ════════════════════ A · Vorlage ════════════════════ */

#bsBereich { display: none; }
/* Wirt Workspace: solange ein Bereich offen ist, weicht die bisherige Fläche */
:root.ws-bento.bs-offen .app-shell, :root.ws-bento.bs-offen #wbPfad { display: none !important; }
:root.ws-bento-start #bsBereich { display: none !important; }

:root.bs-offen #bsBereich { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--bs-luft); flex: 1 1 auto; min-height: 0; min-width: 0;
  padding: 0 20px 20px; box-sizing: border-box; overflow: hidden; color: var(--bs-text); font-family: var(--marke-schrift); }
/* Ohne Kopf (keine Kennzahlen, keine Umschalter-Kacheln) bekommt der Inhalt die ganze Höhe. Sonst wäre die einzige Zeile „auto"
   und große Inhalte (Formular „Neue Aufgabe", Wochen) würden unten abgeschnitten (Fotoprüfung 24.10.2026: Zeit, Planer,
   Ergebnisse, Wissen). :where() hält die Gewichtung niedrig, damit Regeln einzelner Bereiche weiter vorgehen. */
:root.bs-offen #bsBereich:has(> .bs-kopf:where([hidden])) { grid-template-rows: minmax(0, 1fr); }
/* Ohne Kopf: Liste 12 px hochziehen — ihr Innenabstand ist Hover-Luft, die erste Reihe steht dann wie auf Home (Ralph 24.10.) */
:root.bs-offen #bsBereich:has(> .bs-kopf:where([hidden])) .bs-liste { margin-top: -12px; }
/* Platz über der ersten Reihe fürs Anheben (Regel 9) — wie #wbStart auf der Startseite: 12 px Luft oben, um 12 px nach oben
   gezogen, Abstand zur Kopfleiste bleibt gleich. Die Kopfleiste malt hier keinen eigenen Grund, sonst läge sie über dem Hub. */
:root.bs-offen #bsBereich { padding-top: 12px; margin-top: -12px; }
:root.ws-bento.bs-offen .wb-top { background: transparent; }
/* Hover-Platz zentral für JEDEN Bereich (Abnahme 24.10.2026: erste Reihe war oben abgeschnitten, Ecken wirkten eckig).
   Abgeschnitten wurde an der Listen-Karte (overflow: hidden, Oberkante = Home-Höhe), während die Liste 12 px darüber begann.
   Jetzt schneidet im Raster nur noch die Liste selbst: sie reicht 12 px über die Home-Höhe und bis an die Ränder des Bereichs,
   ihr Innenabstand ist die Luft für Hub und Schatten — genau wie #wbStart auf der Startseite. Ihr erstes Raster bringt
   keinen eigenen Abstand oben mit, sonst rutscht die erste Reihe unter die Home-Höhe. :where() hält die Liste schwach,
   damit Bereiche mit eigener Regel (Zeit, Planer, Wissen, Notizen, Ergebnisse, Kalender) unverändert weiterlaufen. */
#bsBereich[data-ansicht="raster"] .bs-liste-karte { overflow: visible; }
:where(#bsBereich[data-ansicht="raster"]) .bs-liste { margin: -12px -20px -20px; padding: 12px 20px 20px; }
/* Oberkante gilt für alle Breiten und auch vor Bereichsregeln (Notizen hatte am Handy 8 statt 12 px → erste Reihe 4 px zu hoch) */
:root.bs-offen #bsBereich[data-ansicht="raster"] .bs-liste { margin-top: -12px; padding-top: 12px; }
:root.bs-offen #bsBereich[data-ansicht="raster"] .bs-liste > :is(.bs-kacheln, .ba-raster, .bsu-raster, .btr-kacheln, .pf-raster):first-child { margin-top: 0; padding-top: 0; }
/* Abstand Kopf ↔ Kacheln wie die Reihen auf Home (16 px, schmal 12 px) */
:root.bs-offen #bsBereich { row-gap: 16px; }
/* Seiten-Pille in der Kopfleiste so hoch wie die anderen Pillen (34 px statt 40): sonst wird die umbrochene Kopfleiste
   (1024/390 px) im Bereich 6 px höher als auf Home und die erste Reihe rutscht tiefer (Abnahme 24.10.2026) */
:root.ws-bento .wb-ab.wb-seite { padding-top: 6px; padding-bottom: 6px; }

/* ── Kennzahlen-Kopf ── */
.bs-kopf { display: grid; grid-template-columns: repeat(var(--bs-zahlen, 4), minmax(0, 1fr)); gap: var(--bs-luft); min-width: 0; }
.bs-zahl { position: relative; border: 0; border-radius: var(--bs-r); padding: 18px 22px; box-sizing: border-box; min-width: 0; min-height: 104px;
  display: flex; flex-direction: column; text-align: left; background: var(--bs-karte); color: var(--bs-text); font-family: var(--marke-schrift);
  box-shadow: var(--wbs-schatten); transition: box-shadow .25s, transform .25s; }
button.bs-zahl { cursor: pointer; }
button.bs-zahl:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .10); transform: translateY(-3px); }
.bs-zahl.an { box-shadow: 0 0 0 2px var(--bs-dunkel); }
.bs-zahl span { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-zahl b { margin-top: auto; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-zahl b.bs-fehlt { font-size: 15px; font-weight: 600; color: var(--bs-leise); letter-spacing: 0; }
.bs-zahl small { font-size: 12px; color: var(--bs-leise); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-zahl .bs-lade { margin-top: auto; }
/* Kachelfarben laufen ins Weiße aus (Ralph 24.10.2026, wie workspace-bento.css .wb-k.zart) */
.bs-zahl[class*="ton-"] { background: linear-gradient(135deg, var(--bs-ton) 30%, color-mix(in srgb, var(--bs-ton) 66%, var(--bs-verlauf-ziel))); }
.bs-zahl.ton-blau { --bs-ton: var(--wb-akzent-zart, var(--marke-nav-kachel)); }
.bs-zahl.ton-rot { --bs-ton: color-mix(in srgb, var(--marke-gefahr) 14%, var(--bs-karte)); }
.bs-zahl.ton-gruen { --bs-ton: color-mix(in srgb, var(--marke-ok) 14%, var(--bs-karte)); }
.bs-zahl.ton-gelb { --bs-ton: color-mix(in srgb, var(--marke-warn) 16%, var(--bs-karte)); }
.bs-zahl.ton-rot b:not(.bs-fehlt) { color: var(--marke-gefahr); }

/* ── Raster: Liste links, Detail rechts ── */
.bs-raster { display: grid; grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr); gap: var(--bs-luft); min-height: 0; min-width: 0; }
.bs-karte { background: var(--bs-karte); border-radius: var(--bs-r); box-shadow: var(--wbs-schatten); min-height: 0; min-width: 0; box-sizing: border-box; }

/* Linke Karte: Suche + Filter + Liste in EINER Karte, gescrollt wird nur die Liste */
.bs-liste-karte { display: flex; flex-direction: column; padding: 16px 12px 12px; overflow: hidden; }
.bs-werkzeug { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 4px 10px; }
.bs-suche { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--marke-r-pill); background: var(--bs-grund); color: var(--bs-leise); }
.bs-suche svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bs-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 13px var(--marke-schrift); color: var(--bs-text); }
.bs-plus { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bs-dunkel); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s; }
.bs-plus:hover { transform: scale(1.06); }
.bs-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bs-pillen { display: flex; flex-wrap: wrap; gap: 4px; flex: none; padding: 0 4px 10px; }
.bs-pillen[hidden] { display: none; }
.bs-pillen button { border: 0; background: transparent; border-radius: var(--marke-r-pill); padding: 7px 12px; font: 600 12px var(--marke-schrift);
  color: var(--bs-leise); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.bs-pillen button:hover { background: var(--marke-feld); color: var(--bs-text); }
.bs-pillen button.an { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; }   /* Ausgewählt: eine Farbe hell/dunkel (b2) */
.bs-pillen button i { font-style: normal; font-weight: 500; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.bs-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: 0; }
#bsBereich[data-ansicht="raster"] .bs-liste { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wb-rand-oben)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wb-rand-oben));
  animation: wbRandOben linear both; animation-timeline: scroll(self); animation-range: 0 24px; }   /* weicher Rand oben beim Scrollen */

/* Liste als Tabelle mit Kopf (Ralph 23.10.2026: Mehrfeld-Listen nie als „a · b · c"-Zeilen) */
.bs-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.bs-tabelle th { position: sticky; top: 0; z-index: 1; background: var(--bs-karte); text-align: left; font-size: 12px; font-weight: 600; color: var(--bs-leise);
  padding: 6px 10px 8px; border-bottom: 1px solid var(--bs-linie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-tabelle td { padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.bs-tabelle th.rechts, .bs-tabelle td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.bs-tabelle td.leise { color: var(--bs-leise); }
.bs-tabelle tbody tr { cursor: pointer; outline: 0; }
.bs-tabelle tbody td:first-child { border-radius: var(--marke-r-l) 0 0 var(--marke-r-l); }
.bs-tabelle tbody td:last-child { border-radius: 0 var(--marke-r-l) var(--marke-r-l) 0; }
.bs-tabelle tbody tr:hover td, .bs-tabelle tbody tr:focus-visible td { background: var(--bs-weich); }
.bs-tabelle tbody tr.an td { background: var(--bs-weich); }   /* Auswahl grau wie in den Bento-Menüs, nicht blau */

.bs-tabelle tbody tr.fett td { font-weight: 600; }
/* Zwischenüberschrift (optional gruppe(), zuerst Planer: nach Tagen) — keine Zeile zum Anklicken */
.bs-tabelle tbody tr.bs-gruppe { cursor: default; }
.bs-tabelle tbody tr.bs-gruppe th { position: static; padding: 16px 10px 6px; border-bottom: 0; font-size: 12px; font-weight: 600; color: var(--bs-text); background: none; }
.bs-tabelle tbody tr.bs-gruppe:first-child th { padding-top: 8px; }
.bs-zeile2 { display: block; font-size: 12px; font-weight: 400; color: var(--bs-leise); overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bs-marke { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-leise); }
.bs-fuss { margin: 10px 10px 0; font-size: 12px; color: var(--bs-leise); }

/* Leer, Laden, Fehler */
.bs-leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; height: 100%; padding: 24px;
  box-sizing: border-box; text-align: center; font-size: 13px; color: var(--bs-leise); }
.bs-fehler b { font-size: 14px; color: var(--bs-text); }
.bs-lade { display: inline-flex; align-items: center; min-height: 28px; }
.bs-lade .a4h-spin { width: 18px !important; height: 18px !important; color: var(--marke-ladekreis); }
/* Ralph 24.10.2026: Ladekreise waren zu klein (a4hSpinner setzt 14 px inline) — allein in Kachel/Fläche groß, neben Text 18 px */
.bs-leer .a4h-spin, .bs-zahl .bs-lade .a4h-spin { width: 30px !important; height: 30px !important; }
.bs-punkt { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bs-linie); border-top-color: var(--bs-dunkel); animation: bsDreh .8s linear infinite; }
@keyframes bsDreh { to { transform: rotate(360deg); } }

/* Rechte Karte: Detail */
.bs-detail { overflow-y: auto; overflow-x: hidden; padding: 22px 24px; display: flex; flex-direction: column; }
.bs-detail > .bs-leer { flex: 1; }
.bs-d-titel { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.bs-d-meta { border-collapse: collapse; margin: 0 0 16px; font-size: 13px; width: 100%; table-layout: fixed; }
.bs-d-meta th { width: 120px; overflow-wrap: anywhere; hyphens: auto; text-align: left; font-size: 12px; font-weight: 500; color: var(--bs-leise); padding: 3px 12px 3px 0; vertical-align: top; }
.bs-d-meta td { padding: 3px 0; overflow-wrap: anywhere; }
.bs-d-text { flex: 1 0 auto; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px 0; border-top: 1px solid var(--bs-linie); }
.bs-d-aktion { position: sticky; bottom: -22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 -24px -22px; padding: 14px 24px 18px;
  background: var(--bs-karte); border-top: 1px solid var(--bs-linie); }
.bs-hinweis { font-size: 12px; color: var(--bs-leise); }
.bs-box { background: var(--bs-weich); border-radius: var(--bs-r-k); padding: 14px 16px; font-size: 13px; line-height: 1.5; margin-top: 12px; }
.bs-box pre, .bs-box .bs-d-text { white-space: pre-wrap; font: inherit; margin: 8px 0 0; padding: 0; border: 0; }
.bs-rot { color: var(--marke-gefahr); }
.bs-knopf { height: 36px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-dunkel); color: #fff; cursor: pointer;
  font: 600 13px var(--marke-schrift); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: background .2s; }
.bs-knopf:hover { background: color-mix(in srgb, var(--bs-dunkel) 84%, #fff); }
.bs-knopf.zweit { background: var(--bs-weich); color: var(--bs-text); }
.bs-knopf.zweit:hover { background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); }
.bs-knopf:disabled { opacity: .55; cursor: default; }

/* Einschweben beim Öffnen */
#bsBereich.bs-rein .bs-zahl, #bsBereich.bs-rein .bs-karte { animation: wbsRein .45s cubic-bezier(.2, .8, .2, 1) both; }
#bsBereich.bs-rein .bs-zahl:nth-child(2) { animation-delay: .04s; } #bsBereich.bs-rein .bs-zahl:nth-child(3) { animation-delay: .08s; }
#bsBereich.bs-rein .bs-zahl:nth-child(4) { animation-delay: .12s; } #bsBereich.bs-rein .bs-detail { animation-delay: .06s; }

@media (max-width: 1200px) {
  .bs-kopf { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .bs-zahl { padding: 16px 18px; min-height: 92px; }
  .bs-zahl b { font-size: 24px; }
  .bs-raster { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }
}
/* Schmale Fenster und Handy: alles untereinander, Liste oben mit fester Höhe */
@media (max-width: 900px) {
  :root.bs-offen #bsBereich { padding: 12px 12px 12px; }
  .bs-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bs-zahl { min-height: 0; padding: 12px 14px; border-radius: var(--bs-r-k); }
  .bs-zahl b { font-size: 20px; margin-top: 2px; }
  .bs-zahl small { display: none; }
  .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 58%) minmax(0, 1fr); }
  .bs-detail { padding: 16px; }
  .bs-d-aktion { bottom: -16px; margin: 0 -16px -16px; padding: 12px 16px 14px; }
}

/* ── Raster-Ansicht (optional, ansicht:'raster' — zuerst „Nachrichten", 24.10.2026) ──
   Die Liste füllt die ganze Breite als Kachel-Raster; das Detail liegt nach dem Klick groß darüber (mit „Zurück"). */
#bsBereich[data-ansicht="raster"] .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; }
#bsBereich[data-ansicht="raster"] .bs-detail { display: none; }
#bsBereich[data-ansicht="raster"].bs-detail-auf .bs-detail { display: flex; position: absolute; inset: 0; z-index: 3; box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); outline: 0; }
#bsBereich[data-ansicht="raster"].bs-detail-auf .bs-liste-karte { visibility: hidden; }
#bsBereich[data-ansicht="raster"] .bs-liste-karte { background: transparent; box-shadow: none; padding: 0; }
#bsBereich[data-ansicht="raster"] .bs-werkzeug, #bsBereich[data-ansicht="raster"] .bs-pillen { padding-left: 0; padding-right: 0; }
#bsBereich[data-ansicht="raster"] .bs-suche { background: var(--bs-karte); }
#bsBereich[data-ansicht="raster"] .bs-leer { background: var(--bs-karte); border-radius: var(--bs-r); }
/* Leerer Filter / keine Einträge: kompakte Kachel wie jede andere, „+"-Kachel im selben Raster daneben, nichts klebt
   (Testlauf 24.10.2026: „In diesem Filter ist nichts." stand als bildschirmhohe weiße Karte da) */
#bsBereich[data-ansicht="raster"] .bs-liste:has(> .bs-leer) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bs-luft); align-content: start; }
#bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer + .bs-kacheln { display: contents; }
#bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer { height: auto; min-height: 168px; border-radius: var(--bs-r); padding: 16px 24px; box-shadow: var(--wbs-schatten); }
#bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer + .bs-kacheln > .bs-plus-kachel { min-height: 168px; }
/* Lädt die ganze Liste (nur der Ladekreis, Ralph 24.10.2026): keine kleine Kachel oben links, sondern der Kreis allein mittig in
   der freien Fläche des Bereichs – waagrecht über alle Spalten, senkrecht über die ganze Höhe, ohne weiße Karte. */
#bsBereich[data-ansicht="raster"] .bs-liste:has(> .bs-leer > .bs-lade:only-child) { align-content: stretch; grid-template-columns: minmax(0, 1fr); }
#bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer:has(> .bs-lade:only-child) { grid-column: 1 / -1; height: 100%; background: none; box-shadow: none; }
@media (max-width: 899px) {
  #bsBereich[data-ansicht="raster"] .bs-liste:has(> .bs-leer) { grid-template-columns: minmax(0, 1fr); }
  #bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer, #bsBereich[data-ansicht="raster"] .bs-liste > .bs-leer + .bs-kacheln > .bs-plus-kachel { min-height: 96px; }
}
.bs-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bs-luft); align-content: start; padding: 0; }
.bs-kachel { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 168px; box-sizing: border-box; padding: 18px 20px;
  background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wbs-schatten); cursor: pointer; outline: 0;
  transition: box-shadow .25s, transform .25s; }
.bs-kachel:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); }
.bs-kachel:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); }
.bs-kachel.an { box-shadow: 0 0 0 2px var(--bs-dunkel); }
/* Ralph 24.10.2026: der Pfeil oben links führt eine Ebene höher – die Zurück-Pille im Bereich ist damit doppelt und entfällt (Esc bleibt). */
.ws-bento .bs-zurueck { display: none; }
.bs-zurueck { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; margin: -6px 0 12px -8px; flex: none;
  border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); font: 600 12px var(--marke-schrift); cursor: pointer; }
.bs-zurueck:hover { background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); }
.bs-zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Umschalter links neben der Suche („Mails | Chat") — wie die Filter-Pillen, schwarz = aktiv */
.bs-umschalter { display: flex; gap: 2px; padding: 3px; border-radius: var(--marke-r-pill); background: var(--bs-karte); flex: none; }
.bs-umschalter button { border: 0; background: transparent; border-radius: var(--marke-r-pill); padding: 8px 14px; font: 600 12px var(--marke-schrift); color: var(--bs-leise); cursor: pointer; white-space: nowrap; }
.bs-umschalter button:hover { background: var(--marke-feld); color: var(--bs-text); }
.bs-umschalter button.an { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; cursor: default; }
/* Kachel-Inhalt (Bausteine für karte()): Kopf mit Name + Zeit, Titel, zwei Zeilen Text, Etikett, Aufgaben-Kasten */
.bs-k-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bs-k-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-kachel.fett .bs-k-name::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--marke-akzent); margin-right: 6px; vertical-align: 1px; }
.bs-k-zeit { flex: none; font-size: 12px; color: var(--bs-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-k-titel { font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bs-k-text { font-size: 13px; line-height: 1.45; color: var(--bs-leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bs-k-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.bs-etikett { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--marke-r-pill); font-size: 12px; font-weight: 600;
  white-space: nowrap; background: var(--bs-weich); color: var(--bs-leise); }
.bs-etikett .a4h-spin, .bs-etikett .bs-punkt { width: 12px; height: 12px; }
.bs-etikett.ton-rot { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); }
.bs-etikett.ton-gruen { background: color-mix(in srgb, var(--marke-ok) 14%, var(--bs-karte)); color: color-mix(in srgb, var(--marke-ok) 80%, var(--bs-text)); }
.bs-etikett.ton-blau { background: var(--wb-akzent-zart, var(--marke-nav-kachel)); color: var(--bs-text); }
.bs-k-aufgabe { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 12px; border-radius: var(--bs-r-k); background: var(--bs-weich); font-size: 12px; }
.bs-k-aufgabe > span { flex: 1; min-width: 0; }
.bs-k-aufgabe b { font-weight: 600; color: var(--bs-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bs-k-aufgabe small { display: block; margin-top: 2px; font-size: 11px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-k-weg { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-karte); color: var(--bs-leise);
  font: 600 11px var(--marke-schrift); cursor: pointer; white-space: nowrap; }
.bs-k-weg:hover { color: var(--marke-gefahr); }
.bs-k-weg:disabled { opacity: .55; cursor: default; }
.bs-k-aufgabe.gross { font-size: 13px; padding: 12px 12px 12px 16px; }
.bs-d-status { margin: -4px 0 12px; padding: 0; }
.bs-d-status:empty { display: none; }
.bs-d-aufgabe:not(:empty) { margin: 0 0 14px; }
@media (max-width: 900px) {
  #bsBereich[data-ansicht="raster"] .bs-raster { grid-template-rows: minmax(0, 1fr); }
  .bs-kacheln { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :root.bs-offen #bsBereich { row-gap: 12px; }
  :where(#bsBereich[data-ansicht="raster"]) .bs-liste { margin: -12px; padding: 12px; }
  .bs-kachel { min-height: 0; padding: 14px 16px; border-radius: var(--bs-r-k); }
  .bs-umschalter button { padding: 7px 10px; }
}

/* ── Seit 24.10.2026 abends: keine eigene Suche im Bereich (Ralph) — gesucht wird nur im Feld der Kopfleiste
   (BentoSeite.suchen). Gilt für ALLE Bereiche; die Zeile darüber bleibt nur für Umschalter/Plus. ── */
#bsBereich .bs-suche { display: none !important; }
#bsBereich .bs-werkzeug[hidden], #bsBereich .bs-kopf[hidden] { display: none !important; }
#bsBereich .bs-werkzeug > .bs-plus { margin-left: auto; }   /* früher schob die Suche den Plus-Knopf nach rechts */

/* ── Umschalter-Kacheln (optional, schalter: [...]) — eigene kleine Bento-Kachel je Umschalter/Filter, im selben Raster
   wie die Kennzahlen (gleicher Radius, Schatten, Abstand); breite = Anzahl Spalten. ── */
#bsBereich[data-schalter] .bs-kopf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bs-schalter-kachel { grid-column: span var(--bs-breite, 2); display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 14px 14px 12px;
  border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wbs-schatten); }
.bs-sk-titel { font-size: 12px; font-weight: 500; color: var(--bs-leise); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-sk-werte { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }   /* Pillen direkt unter dem Titel, kein Loch darüber */
.bs-sk-werte button { 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; transition: background .2s, color .2s; }
.bs-sk-werte button:hover { background: var(--marke-feld); color: var(--bs-text); }
.bs-sk-werte button.an { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; cursor: default; }
.bs-sk-werte button i { font-style: normal; font-weight: 500; opacity: .7; margin-left: 5px; font-variant-numeric: tabular-nums; }
/* Ralph 24.10.2026 („Filter sehen komisch aus"): die Kachel wird auf die Höhe der Zeile gezogen (z. B. neben der blauen
   Kopfkarte) — dann stehen die Pillen mittig im Rest der Kachel statt oben mit einem Loch darunter; Innenabstand und
   Pillengröße wie die übrigen Bento-Kacheln. Gilt für alle Bereiche mit Umschalter-Kacheln (Kontakte, Ziele, Team-Chat …). */
.bs-schalter-kachel { padding: 20px 22px; gap: 12px; }
.bs-schalter-kachel > .bs-sk-titel { padding-left: 0; }
.bs-schalter-kachel > .bs-sk-werte { margin: auto 0; gap: 6px; }
.bs-schalter-kachel > .bs-sk-werte button { padding: 8px 14px; font-size: 13px; }
/* Große blaue Kopf-Karte links, Umschalter rechts daneben (Ralph 24.10.2026) — Farbe wie die blaue Begrüßungs-Kachel auf Home */
#bsBereich .bs-kopf.mit-kopfkarte { display: flex; flex-wrap: wrap; align-items: stretch; }
#bsBereich .bs-kopf.mit-kopfkarte .bs-schalter-kachel { flex: 1 1 240px; align-self: stretch; }
.bs-kopfkarte { flex: 0 1 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 168px; padding: 20px 22px; box-sizing: border-box;
  border-radius: var(--bs-r); color: var(--wb-auf-farbe, #fff); box-shadow: var(--wbs-schatten);
  background: linear-gradient(135deg, var(--wb-akzent) 30%, color-mix(in srgb, var(--wb-akzent) 66%, var(--wb-verlauf-ziel))); }
.bs-kopfkarte h2 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bs-kopfkarte p { margin: 0; font-size: 14px; color: var(--wb-auf-farbe-leise, rgba(255, 255, 255, .78)); }
/* „backwards" statt „both": nach dem Einschweben darf die Animation das Anheben beim Überfahren nicht festhalten */
#bsBereich.bs-rein .bs-schalter-kachel { animation: wbsRein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
/* Regel 10 (Ralph 24.10.2026): Umschalter-, Filter- und Kopfkacheln heben sich beim Überfahren wie die Kacheln der Startseite
   (.wb-k:hover in workspace-bento.css: 3 px hoch, Schatten --wb-schatten-hover). Die Filter-Kachel der Transkription steht mit
   hier, weil deren eigene Datei gerade an anderer Stelle umgebaut wird. */
.bs-schalter-kachel, .bs-kopfkarte, #bsBereich[data-bereich="transkription"] .btr-s { transition: box-shadow .25s, transform .25s; }
.bs-schalter-kachel:hover, .bs-kopfkarte:hover, #bsBereich[data-bereich="transkription"] .btr-s:hover {
  box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); }
@media (max-width: 1200px) {
  .bs-schalter-kachel[data-breite="4"] { grid-column: span 3; }
}
@media (max-width: 900px) {
  #bsBereich[data-schalter] .bs-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-schalter-kachel { grid-column: 1 / -1; padding: 10px 10px 10px; border-radius: var(--bs-r-k); gap: 6px; }
  #bsBereich .bs-kopf.mit-kopfkarte .bs-schalter-kachel { flex-basis: 100%; }
  .bs-kopfkarte { flex-basis: 100%; min-height: 120px; padding: 16px; border-radius: var(--bs-r-k); }
  .bs-schalter-kachel[data-breite="1"] { grid-column: span 1; }
  .bs-sk-werte button, .bs-schalter-kachel > .bs-sk-werte button { padding: 7px 12px; font-size: 12px; }
  .bs-schalter-kachel { padding: 14px 16px; gap: 10px; }
  /* viele Schalter-Kacheln: der Bereich läuft als Ganzes, damit für die Einträge Platz bleibt (seitlich nie) */
  :root.bs-offen #bsBereich[data-schalter] { overflow-y: auto; grid-template-rows: auto auto; align-content: start; }
  #bsBereich[data-schalter] .bs-raster, #bsBereich[data-schalter] .bs-liste-karte, #bsBereich[data-schalter] .bs-liste { overflow: visible; min-height: 0; }
  #bsBereich[data-schalter][data-ansicht="raster"].bs-detail-auf .bs-kopf { display: none; }
  #bsBereich[data-schalter][data-ansicht="raster"].bs-detail-auf .bs-liste-karte { display: none; }
  #bsBereich[data-schalter][data-ansicht="raster"].bs-detail-auf .bs-detail { position: static; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  #bsBereich.bs-rein .bs-schalter-kachel { animation: none; }
  .bs-schalter-kachel:hover, .bs-kopfkarte:hover, #bsBereich[data-bereich="transkription"] .btr-s:hover { transform: none; }
}
/* „+"-Kachel am Ende des Rasters (plusKachel: true) — wie die Plus-Kachel der Startseite (workspace-bento.css .wb-k.plus) */
.bs-kachel.bs-plus-kachel { align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--marke-linie-stark); box-shadow: none;
  color: var(--bs-leise); font: 600 13px var(--marke-schrift); text-align: center; }
.bs-kachel.bs-plus-kachel:hover { background: var(--bs-karte); transform: none; box-shadow: none; color: var(--bs-text); }
.bs-plus-kachel svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ════════════════════ B · Vorstufe: bestehende Bereiche an Ort und Stelle (nur mit Klasse ws-bento-flach) ════════════════════ */
/* Entwurf vom 24.10.2026, nie eingeschaltet: nichts setzt ws-bento-flach. Bleibt als Vorstufe stehen, bis jeder Bereich
   auf die Vorlage (Teil A) umgezogen ist; danach kann der Block weg. */

/* Die große weiße Karte löst sich auf: der Bereich liegt direkt auf dem grauen Grund */
:root.ws-bento.ws-bento-flach .app-shell { background: transparent; overflow: visible; border-radius: 0; }
:root.ws-bento.ws-bento-flach .app-main, :root.ws-bento.ws-bento-flach .sidebar-secondary.visible, :root.ws-bento.ws-bento-flach .sidebar-secondary-body { background: transparent !important; }
:root.ws-bento.ws-bento-flach .sidebar-secondary.visible { border: 0 !important; box-shadow: none !important; }
:root.ws-bento.ws-bento-flach #toolFrameWrap { background: transparent !important; }
/* Seiten im Rahmen bringen ihren grauen Grund selbst mit (Teil 2) — der Rahmen ist durchsichtig */
:root.ws-bento.ws-bento-flach .sidebar-secondary-body > iframe, :root.ws-bento.ws-bento-flach #organizerBuehne > iframe, :root.ws-bento.ws-bento-flach #toolFrame {
  background: transparent !important; border-radius: 0 !important; }
/* Whiteboard: Zeichenfläche bleibt eine weiße Fläche, aber als schwebende Kachel */
:root.ws-bento.ws-bento-flach .sidebar-secondary-body > iframe#drawFrame { background: var(--wbs-karte) !important; border-radius: var(--wbs-r) !important; }

/* Chat: Gespräch und Unterhaltungsliste als zwei eigene Kacheln */
:root.ws-bento.ws-bento-flach #chatMain { background: var(--wbs-karte); border-radius: var(--wbs-r); box-shadow: var(--wbs-schatten); }
:root.ws-bento.ws-bento-flach .conv-sidebar.visible { background: var(--wbs-karte) !important; border: 0 !important; border-radius: var(--wbs-r); margin-left: var(--wbs-luft); box-shadow: var(--wbs-schatten); }
:root.ws-bento.ws-bento-flach .conv-toggle { z-index: 5; }

/* Outputs (direkt im Workspace): Filterleiste als Kachel, Dateien als einzelne Kacheln */
:root.ws-bento.ws-bento-flach #outputsHead { background: var(--wbs-karte) !important; border: 0 !important; border-radius: var(--wbs-r); padding-left: 16px; padding-right: 16px; margin-bottom: var(--wbs-luft); box-shadow: var(--wbs-schatten); }
:root.ws-bento.ws-bento-flach .sidebar-secondary-body:has(#outputsHead) { padding: 0; }
:root.ws-bento.ws-bento-flach .outputs-group-head { background: transparent !important; border: 0 !important; }
:root.ws-bento.ws-bento-flach .output-card { border-color: transparent !important; border-radius: var(--wbs-r-k) !important; box-shadow: var(--wbs-schatten); }
/* Einstellungen: Reiter und jede Seite als eigene Kachel */
:root.ws-bento.ws-bento-flach .sidebar-secondary-body:has(> #agentEditBody) { padding: 0; }
:root.ws-bento.ws-bento-flach #agentEditBody #aefReiter { background: var(--wbs-karte); border-radius: var(--wbs-r); padding: 8px 12px; margin-bottom: var(--wbs-luft); border: 0 !important; box-shadow: var(--wbs-schatten); }
:root.ws-bento.ws-bento-flach #agentEditBody .aef-seite { background: var(--wbs-karte); border-radius: var(--wbs-r); padding: 16px; box-shadow: var(--wbs-schatten); }
/* Werkzeug-Anfrage */
:root.ws-bento.ws-bento-flach .tr-card { border-color: transparent !important; border-radius: var(--wbs-r) !important; box-shadow: var(--wbs-schatten); }

@media (max-width: 900px) {
  :root.ws-bento.ws-bento-flach .conv-sidebar.visible { margin-left: 0; }
}

/* ════════════════════ C · Seiten im Rahmen (iframes, Klasse ws-bento-seite) ════════════════════ */

:root.ws-bento-seite, :root.ws-bento-seite body { background: var(--wbs-grund) !important; }

/* Kopfzeile der Seite: eigene Kachel, mit Luft zum Inhalt */
:root.ws-bento-seite body > header,
:root.ws-bento-seite body > .kopf,
:root.ws-bento-seite body > .kopfzeile,
:root.ws-bento-seite body > .a4h-topbar,
:root.ws-bento-seite body > .a4h-appbar,
:root.ws-bento-seite body > .topbar {
  background: var(--wbs-karte) !important; border: 0 !important; border-radius: var(--wbs-r) !important;
  margin: 0 0 var(--wbs-luft) !important; box-shadow: var(--wbs-schatten) !important; box-sizing: border-box; }
:root.ws-bento-seite #planerKopf { background: transparent !important; border: 0 !important; border-radius: var(--wbs-r); }

/* Flächen, die bisher den ganzen Rahmen weiß füllten: durchsichtig — der Inhalt schwebt auf dem Grund */
:root.ws-bento-seite .board-pane, :root.ws-bento-seite #canvasWrap { background: transparent !important; }

/* Karten aller Seiten: weiß, große Rundung, kein Rand, weicher Schatten, gleiten herein */
:root.ws-bento-seite .a4h-card,
:root.ws-bento-seite .karte,
:root.ws-bento-seite .block,
:root.ws-bento-seite .card,
:root.ws-bento-seite .box,
:root.ws-bento-seite .panel,
:root.ws-bento-seite .os-card {
  border-color: transparent !important; border-radius: var(--wbs-r) !important; box-shadow: var(--wbs-schatten) !important; }
:root.ws-bento-seite .a4h-card, :root.ws-bento-seite .karte, :root.ws-bento-seite .block, :root.ws-bento-seite .card,
:root.ws-bento-seite .box, :root.ws-bento-seite .panel, :root.ws-bento-seite .os-card { animation: wbsRein .45s cubic-bezier(.2, .8, .2, 1) both; }
/* Leer-Hinweise: als ruhige weiße Kachel statt gestricheltem Kasten */
:root.ws-bento-seite .a4h-empty { background: var(--wbs-karte) !important; border-color: transparent !important; border-radius: var(--wbs-r) !important; }

/* CRM: Spalten der Pipeline sind Bahnen auf dem Grund, die Verkaufschancen schweben darin als Kacheln */
:root.ws-bento-seite .board-pane .col { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:root.ws-bento-seite .board-pane .col .card, :root.ws-bento-seite .board-pane .col .deal { border-radius: var(--wbs-r-k) !important; animation: none; }
/* Wissen: Themen und Dokumente als Kacheln, Frage-Feld als runde Leiste */
:root.ws-bento-seite .ws-thema, :root.ws-bento-seite .ws-karte { border-color: transparent !important; border-radius: var(--wbs-r) !important; box-shadow: var(--wbs-schatten); overflow: hidden; }
:root.ws-bento-seite .ws-karte { background: var(--wbs-karte) !important; }
:root.ws-bento-seite .ws-frage { border-color: transparent !important; border-radius: 999px !important; box-shadow: var(--wbs-schatten); }
/* Planer: das Gantt-Brett ist eine große Kachel */
:root.ws-bento-seite #board { background: var(--wbs-karte) !important; border-radius: var(--wbs-r); overflow: hidden; box-shadow: var(--wbs-schatten); }
/* Zeiterfassung (Liste): Filter und Tabelle als Kacheln */
:root.ws-bento-seite #vListe .filter, :root.ws-bento-seite #vListe .liste:not(:empty) { background: var(--wbs-karte); border-radius: var(--wbs-r); padding: 12px 16px; box-shadow: var(--wbs-schatten); }
:root.ws-bento-seite #vListe .liste:has(> .a4h-empty) { background: transparent; padding: 0; box-shadow: none; }
/* Transkription: Einwilligungs-Hinweis bleibt deutlich (eigener Rand), nur runder */
:root.ws-bento-seite .zustimmung { border-radius: var(--wbs-r-k) !important; }

/* Knöpfe und Pillen rund wie auf der Startseite */
:root.ws-bento-seite .a4h-search, :root.ws-bento-seite .a4h-chip, :root.ws-bento-seite .a4h-pill { border-radius: 999px !important; }

@keyframes wbsRein { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root.ws-bento-seite .a4h-card, :root.ws-bento-seite .karte, :root.ws-bento-seite .block, :root.ws-bento-seite .card,
  :root.ws-bento-seite .box, :root.ws-bento-seite .panel, :root.ws-bento-seite .os-card { animation: none !important; }
}

/* ── Kachel-Überschriften der Bereiche wie auf Home (Ralph 24.10.2026: „mal fett, mal normal“): fett, 15 px, Schriftfarbe der
   Kachel. html-Präfix = knapp stärker als die Einzelregeln, aber schwächer als Sonderfälle wie „erledigt“ (durchgestrichen). ── */
html :is(.bs-sk-titel, .pf-k-titel, .btr-s-titel, .bs-k-name, .ba-titel, .be-titel) { font-size: 15px; font-weight: 700; color: var(--bs-text); }