/*
  workspace-bento-menue.css — Gestaltung der Menü-Übersicht (workspace-bento-menue.js, Beta-Ring).
  Kurzbeschreibung (für Laien): Oben nur „Home“ und „Menü“; das Menü zeigt je Bereich eine Karte mit farbigem Kopf,
  Symbol je Eintrag. Farben nur aus marke.css; hell und dunkel über die Bento-Variablen.
  Seit 08.11.2026: Form von Kopfleisten-Kapseln und Kartenköpfen/-zeilen steht im gemeinsamen Baukasten (bento-kern/bento-kopfmenue.css);
  hier bleiben nur Lage, Zustände und Seitenspezifisches (Übergänge, große Karte, Ziehen).
*/

/* Menü-Modus: die Bereichs-Reiter, „+ Bereich“ und der Workflows-Reiter weichen „Home“ + „Menü“ (offene Seite bleibt als Pille sichtbar) */
:root.wb-menue-modus .wb-abschnitte > .wb-ab[data-abt]:not([data-abt="Home"]),
:root.wb-menue-modus .wb-abschnitte > #wbWorkflowsReiter,
:root.wb-menue-modus .wb-top > #wbNeuBereich { display: none; }
.wbm-pille { display: inline-flex; align-items: center; gap: 6px; }
/* Menü offen oder in einem Bereich: „Home“ wirkt nicht gewählt (die Klasse „an“ gehört dem Kern und bleibt stehen) */
:root.wb-menue-offen .wb-abschnitte > .wb-ab[data-abt="Home"].an:not(:hover),
:root.wb-menue-bereich .wb-abschnitte > .wb-ab[data-abt="Home"].an:not(:hover) { background: transparent; color: var(--wb-leise); }
/* Auf einer Seite mit eigener Titel-Pille (Chat, Notizen …) dimmt workspace-bento.css den aktiven Reiter – „Menü“ bleibt dort aktiv */
:root.wb-menue-modus.wb-menue-bereich .wb-abschnitte:has(> .wb-seite) > .wb-ab.wbm-pille.an:not(.wb-seite):not(.ziel):not(.wb-kopfpille) { background: var(--wb-dunkel); color: #fff; }

/* Fläche unter der Kopfzeile; Startseite und offene Seite ruhen darunter */
.wbm { display: none; }
:root.wb-menue-offen .wbm { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; overflow-y: auto;
  background: var(--wb-grund); padding: 0 20px 20px; box-sizing: border-box; }   /* oben 0: Abstand Pillen→Karten = Abstand Rand→Pillen (Ralph 02.11.2026) */
:root.wb-menue-offen #wbStart, :root.wb-menue-offen #appShell, :root.wb-menue-offen #bsBereich { visibility: hidden; }   /* offene Seite nie hinter dem Menü durchscheinen lassen (Ralph 02.11.2026: „schwarze Kachel“) */

.wbm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--marke-sp-4); align-items: stretch; margin: 0; }   /* volle Breite wie Dashboard und Kopfleiste (Ralph 07.11.2026: alles bündig) */

/* Kopf: Bereichsfarbe, weiße Schrift; Klick öffnet den Bereich mit seinen Bentos */
.wbm-kopf > svg:last-child { opacity: .7; }
.wbm-kopf:hover > svg:last-child { opacity: 1; }

.wbm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gruppen in der Karte „Workflows“ (Ralph 08.11.2026, wie im Kunden-AIOS): kleine Überschrift in Großbuchstaben, Zeile mit „zuletzt“ und Statuspunkt rechts */
.wbm-abschnitt { padding: 10px var(--marke-sp-2) 4px; font: 700 11px var(--marke-schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--wb-leise); }
.wbm-name.wbm-zwei { white-space: normal; line-height: 1.25; }
.wbm-name.wbm-zwei small { display: block; font: 400 11px var(--marke-schrift); color: var(--wb-leise); }
.wbm-punkt { flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--marke-ok); }
.wbm-punkt.rot { background: var(--marke-gefahr); }
.wbm-punkt.gelb { background: var(--marke-warn); }
.wbm-punkt.fertig, .wbm-punkt.grau { background: var(--marke-text-2); opacity: .55; }

.wbm-eintrag:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
@media (max-width: 640px) { :root.wb-menue-offen .wbm { padding: 12px; } }

/* Drill-Down (Ralph 02.11.2026): Trennstrich vor den Unterstufen, „›“ am Eintrag, Kopf als Pfad „Bereich › Unterstufe“ */
.wbm-drill > svg:last-child { margin-left: auto; color: var(--wb-leise); flex: none; }
.wbm-pfad { cursor: default; gap: var(--marke-sp-2); }
.wbm-zurueck { display: inline-flex; align-items: center; gap: var(--marke-sp-3); border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; border-radius: var(--marke-r-s); }
.wbm-zurueck span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.wbm-zurueck:hover span { text-decoration-color: currentColor; }
.wbm-zurueck:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wbm-pfad-pfeil { display: inline-flex; opacity: .75; }
.wbm-pfad-ziel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbm-leise { margin: 0; padding: var(--marke-sp-2) var(--marke-sp-3); font: 400 13px var(--marke-schrift); color: var(--wb-leise); }
.wbm-eintrag.gefahr { color: var(--marke-gefahr); }
.wbm-pfad .wbm-pfad-pfeil, .wbm-pfad .wbm-zurueck span { flex: none; }

/* Kopfzeile oben rechts gekürzt (Ralph 02.11.2026): nur Suche, Mikrofon, Aufgaben und Nachrichten bleiben (Zahlen auf einen Blick) – der Rest steht im Menü
   (Einstellungen, Hell/Dunkel, Hilfe unter Persönlich; Kontakte/Kalender als Einträge) bzw. der Pinsel im Rechtsklick der Startseite */
:root.wb-menue-modus #wbKonto, :root.wb-menue-modus #wbEinst, :root.wb-menue-modus #wbHilfe, :root.wb-menue-modus #wbPinsel,
:root.wb-menue-modus #wbKontakte, :root.wb-menue-modus #wbKalender, :root.wb-menue-modus .wb-top .bt-kopf-trenn { display: none !important; }

/* „+“ unten in der Karte: sieht aus wie jeder andere Eintrag, nur mit Plus-Symbol (Ralph 02.11.2026) */

/* Feste Kartenhöhe (Ralph 02.11.2026: „symmetrisch, unterstes Feld auf gleicher Höhe“): die Liste scrollt in der Karte,
   Unterstufen und „+“ sitzen im Fuß ganz unten – so liegen die letzten Zeilen aller Karten auf einer Linie */
/* Höhe = längste Karte der Reihe (alle ziehen mit), Scrollen nur, wenn sie nicht mehr auf den Bildschirm passt (Ralph 02.11.2026: „nicht immer scrollen“) */
.wbm-karte { max-height: calc(100vh - 100px); }
@media (max-width: 640px) { .wbm-karte { max-height: none; } .wbm-karte > .wbm-liste { overflow: visible; } }
.wbm-kopf-fest { cursor: default; }

/* Zahl am Eintrag (wie oben rechts) und „hier bist du“ (Ralph 02.11.2026) */
.wbm-zahl { margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--marke-r-pill);
  background: var(--marke-gefahr); color: #fff; font: 700 11px/20px var(--marke-schrift); text-align: center; }
.wbm-zeile.hier { background: color-mix(in srgb, var(--wbm-f) 10%, transparent); }
.wbm-zeile.hier .wbm-name { font-weight: 600; }
.wbm-zurueck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zurück-Knopf im Kopf der Unterstufe: kleines Feld links vom Namen */
.wbm-pfad .wbm-zurueck { flex: none; justify-content: center; width: 32px; height: 32px; background: color-mix(in srgb, #fff 16%, transparent); }
.wbm-pfad .wbm-zurueck:hover { background: color-mix(in srgb, #fff 28%, transparent); }
.wbm-pfad { padding-top: 10px; padding-bottom: 10px; }   /* gleiche Kopfhöhe wie die Grundansicht trotz 32-px-Knopf */

/* Arbeitsfläche (Ralph 02.11.2026): die Karte, aus der man kam, bleibt links stehen; die geöffnete Seite rückt daneben.
   Nur ab 1000 px Breite (sonst wie bisher ganze Seite); Startseite/Home beendet den Zustand (workspace-bento-menue.js) */
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm { display: block; position: fixed; left: 0; right: auto; bottom: 0; width: calc(var(--wbm-breite, 280px) + 20px); z-index: 40;
  overflow: hidden; background: transparent; padding: 0 0 20px 20px; box-sizing: border-box; }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-raster { display: block; height: 100%; max-width: none; }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-karte:not(.quelle) { display: none; }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-karte.quelle { height: 100% !important; max-height: none; min-height: 0 !important; }
/* rechte Karte: weißer Rahmen mit Kopf hinter der Seite; die Seite (.wbm-seite, workspace-bento-menue.js) liegt darin */
.wbm-rahmen { display: none; }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-rahmen { display: flex; flex-direction: column; position: fixed; z-index: 0; top: var(--wbm-oben, 76px); bottom: 20px;
  left: calc(var(--wbm-breite, 280px) + 36px); right: 20px; background: var(--wb-karte); border-radius: var(--marke-r-l); overflow: hidden;
  box-shadow: var(--wb-rand), var(--marke-schatten-leise); pointer-events: none; }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite { position: relative; z-index: 1;
  margin-left: calc(var(--wbm-breite, 280px) + 52px) !important; margin-right: 36px !important; margin-top: 64px !important;
  max-height: calc(100vh - var(--wbm-oben, 76px) - 100px); }
/* Karten bis zum Boden (Ralph 02.11.2026: „je nach Bildschirmgröße, Monitor oder Laptop“) – sobald alle fünf in eine Reihe passen */
@media (min-width: 1060px) {
  :root.wb-menue-offen .wbm { display: flex; flex-direction: column; overflow: hidden; }
  :root.wb-menue-offen .wbm-raster { flex: 1 1 auto; min-height: 0; width: 100%; }
  :root.wb-menue-offen .wbm-karte { height: auto !important; max-height: none; }
}

/* Kopfzeile (Ralph 02.11.2026): Suchfeld und runde Knöpfe rechts so hoch wie die Pillen „Home“/„Menü“ (34 px) */
@media (min-width: 700px) {
  :root.wb-menue-modus .wb-top .bt-kopf-rund { width: 34px; height: 34px; }
  :root.wb-menue-modus .wb-top .bt-kopf-rund svg { width: 16px; height: 16px; }
  :root.wb-menue-modus .wb-top .bt-kopf-zaehler { top: -4px; right: -4px; }
  :root.wb-menue-modus .wb-top .bt-kopf-suche { height: 34px; }
  :root.wb-menue-modus .wb-top .bt-kopf-gruppe { gap: 6px; }
}
#wbMenuePille:focus-visible, :root.wb-menue-modus #wbZurueck:focus, :root.wb-menue-modus #wbZurueck:focus-visible { outline: 0; }   /* kein Fokusrahmen um „Menü“ (Ralph 02.11.2026: „Grafikfehler“) */
/* Kein lila Fokus-Kasten in Eingabefeldern (Ralph 02.11.2026: „überall wegmachen“) – Suchfeld oben, Felder in Seiten und Dialogen */
:root.wb-menue-modus input:focus, :root.wb-menue-modus input:focus-visible,
:root.wb-menue-modus textarea:focus, :root.wb-menue-modus textarea:focus-visible,
:root.wb-menue-modus select:focus-visible, :root.wb-menue-modus [contenteditable]:focus-visible { outline: 0 !important; }
.wbm-wert.wbm-wert-leise { font-weight: 500; opacity: .55; letter-spacing: .02em; }   /* aktueller Wert rechts, leise (Farbmodus: Hell/Dunkel, Sprache: DE/EN) */
.wbm-wert { margin-left: auto; flex: none; font: 600 13px var(--marke-schrift); color: var(--wb-text); }   /* Kennzahl rechts in der Zeile (Cockpit › Kennzahlen) */
/* Shortcuts unten im Workspace: Logo der Seite klein im Kästchen, „ד zum Entfernen beim Drüberfahren */
.wbm-sym-fav { background: var(--wb-weich); }
.wbm-sym-fav .wfv-symbol.wbm-fav { width: 28px; height: 28px; border-radius: var(--marke-r-s); background: transparent; }
.wbm-sym-fav .wfv-symbol.wbm-fav img { width: 16px; height: 16px; }
.wbm-sym-fav .wfv-symbol.wbm-fav b { font: 700 12px/1 var(--marke-schrift); color: var(--wb-text); }
/* sanftes Einblenden der rechten Karte und der Seite beim Wechsel aus dem Menü */
@keyframes wbm-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:root.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite { animation: wbm-rein .28s ease-out .12s backwards; }   /* Inhalt kommt nach dem Morph der Karte */
@media (prefers-reduced-motion: reduce) { :root.wb-menue-flaeche .wbm-rahmen, :root.wb-menue-flaeche .wbm-seite { animation: none; } }
.wbm-geister { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.wbm-geister .wbm-karte { box-sizing: border-box; display: flex !important; max-height: none; }   /* Geister des Übergangs: auch die sonst verborgenen Karten zeigen */
/* Kopf bündig mit den Zeilen (Ralph 02.11.2026): Symbol sitzt mittig über den 28-px-Kästchen, Text startet über dem Zeilentext */
/* Zurück-Knopf so groß wie die Kästchen der Zeilen (28 px) und genau darüber; Kopfhöhe bleibt 52 px (Ralph 02.11.2026) */
.wbm-pfad { padding-top: 12px; padding-bottom: 12px; }
.wbm-pfad .wbm-zurueck { width: 28px; height: 28px; }
.wbm-gesperrt, .wbm-gesperrt:hover { cursor: not-allowed; background: transparent; }   /* „+“ wie alle anderen (Ralph 02.11.2026: „alle angleichen“), nur Text und Schloss leise */
.wbm-gesperrt .wbm-name { color: var(--wb-leise); }   /* „Agent hinzufügen“: sichtbar, noch gesperrt (Ralph 02.11.2026) */
.wbm-gesperrt > svg:last-child { margin-left: auto; flex: none; color: var(--wb-leise); }
/* Kopfzeile ohne Seiten-Pille und „← Zurück“ (Ralph 02.11.2026): zurück geht es über „Menü“ oder „Home“; der Name steht im Kopf der großen Karte */
:root.wb-menue-modus .wb-abschnitte .wb-seite, :root.wb-menue-modus #wbZurueck { display: none !important; }
/* „← Zurück“ rechts im Kopf der großen Karte (Ralph 02.11.2026): führt ins Menü und schließt die Seite */
.wbm-rahmen-zurueck { margin: -8px 0 -8px auto; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px 0 10px; border: 0;
  border-radius: var(--marke-r-pill); background: color-mix(in srgb, #fff 18%, transparent); color: #fff; font: 600 13px var(--marke-schrift); cursor: pointer; }
.wbm-rahmen-zurueck:hover { background: color-mix(in srgb, #fff 28%, transparent); }
.wbm-rahmen-zurueck:focus-visible { outline: 0; }
/* Shortcuts nur als Symbole (Ralph 02.11.2026), Name beim Drüberfahren; Rechtsklick: bearbeiten/entfernen (workspace-bento-menue.js) */
.wbm-kurz { display: grid; grid-template-columns: repeat(5, 28px); justify-content: start; align-content: start; gap: 14px 14px; padding: 7px var(--marke-sp-2) 0; max-height: 82px; overflow: hidden; }   /* fünf je Reihe, höchstens zwei Reihen (Ralph 02.11.2026) */
.wbm-kurz > [hidden] { display: none; }
.wbm-kurz .wbm-kurz-sym.wbm-kurz-plus, .wbm-kurz .wbm-kurz-sym.wbm-kurz-plus:hover { background: color-mix(in srgb, var(--wbm-f) 12%, transparent); color: var(--wbm-f); }   /* wie das „+“ der Menüzeilen (Ralph 02.11.2026) */
:root[data-theme="dark"] .wbm-kurz .wbm-kurz-sym.wbm-kurz-plus { background: color-mix(in srgb, var(--wbm-f) 28%, transparent); color: var(--wb-text); }
.wbm-kurz-sym { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--marke-r-s);
  background: var(--wb-weich); color: var(--wb-text); cursor: pointer; }
.wbm-kurz-sym:hover { background: var(--marke-feld); }
.wbm-kurz-sym:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--wbm-f, var(--marke-akzent)); }
.wbm-kurz-sym img, .wbm-kurz-sym .wfv-symbol img { width: 20px; height: 20px; object-fit: contain; }   /* so groß wie die Symbole der Menüzeilen (Ralph 02.11.2026) */
.wbm-kurz-sym .wfv-symbol { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; font-size: 12px; }
.wbm-kurz-sym > svg { width: 16px; height: 16px; }
/* kleines Auswahlmenü an der Maus (Anlegen bzw. Rechtsklick) */
.wbm-kontext { position: fixed; z-index: 2000; min-width: 220px; padding: 6px; border-radius: var(--marke-r-m); background: var(--wb-karte); box-shadow: var(--marke-schatten-leise), var(--wb-rand); }
.wbm-kontext button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--marke-r-s);
  background: transparent; color: var(--wb-text); font: 500 13px var(--marke-schrift); text-align: left; cursor: pointer; }
.wbm-kontext button:hover:not(:disabled) { background: var(--wb-weich); }
.wbm-kontext button:focus-visible { outline: 0; background: var(--wb-weich); }
.wbm-kontext button:disabled { opacity: .55; cursor: not-allowed; }
.wbm-kontext small { font-size: 11px; color: var(--wb-leise); }
.wbm-kurz-sym.wbm-kurz-plus > svg { width: 16px; height: 16px; }   /* gleiche Strichstärke/Größe wie das „+“ der Menüzeilen */
/* Kopfzeile bleibt auf kleinen Bildschirmen einzeilig (Ralph 02.11.2026): Logo, Home, Menü, Suche (schrumpft bis aufs Lupen-Symbol), Knöpfe */
@media (max-width: 900px) {
  :root.wb-menue-modus.ws-bento .wb-top { flex-wrap: nowrap; height: auto; min-height: 60px; padding: 10px 12px; column-gap: 6px; }
  :root.wb-menue-modus .wb-top .wb-abschnitte { order: 0; flex: none; flex-wrap: nowrap; }
  :root.wb-menue-modus .wb-top .wb-logo-name, :root.wb-menue-modus .wb-top .wb-logo-strich { display: none; }
  :root.wb-menue-modus .wb-top .bt-kopf-suche { order: 0; flex: 1 1 auto; min-width: 34px; width: auto; max-width: none; height: 34px; }
  :root.wb-menue-modus .wb-top .bt-kopf-suche input { min-width: 0; width: 100%; }
  :root.wb-menue-modus .wb-top .bt-kopf-gruppe { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}
@media (max-width: 520px) {
  :root.wb-menue-modus .wb-top .bt-kopf-suche input::placeholder { color: transparent; }
  :root.wb-menue-modus .wb-top .wbm-pille span, :root.wb-menue-modus .wb-top .wb-ab { padding-left: 10px; padding-right: 10px; }
}
/* Workflow-Baukasten in der großen Karte (Ralph 03.11.2026): die Startseite darunter bleibt technisch offen – nicht zeigen */
:root.wb-menue-flaeche.wb-wf-offen #wbStart, :root.wb-menue-flaeche.wb-wf-offen .wb-raster, :root.wb-menue-flaeche.wb-wf-offen #bsBereich { visibility: hidden !important; }

/* Einträge per Ziehen umsortieren (gleich wie im AIOS): gezogene Zeile blass, kleine Kopie am Zeiger, die anderen gleiten auseinander */
.wbm-liste { position: relative; }
.wbm-zeile.wbm-gleit { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.wbm-zeile.ziehend { opacity: 0; }
.wbm-geist { position: fixed; z-index: 2200; left: 0; top: 0; pointer-events: none; box-sizing: border-box; display: flex; align-items: center; border-radius: var(--marke-r-m);
  background: var(--wb-karte); color: var(--wb-text); scale: 1.03; box-shadow: var(--marke-schatten-leise), 0 14px 32px rgba(21, 32, 43, .32); font-family: var(--marke-schrift); will-change: transform; }
html.wbm-zieht, html.wbm-zieht * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.wbm-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wbm-zeile.wbm-gleit { transition: none; } }

/* Fensterkopf wie im AIOS (Ralph 07.11.2026): rechts oben „Ganzes Fenster / Wieder kleiner“ (rund, 30 px, Symbol 16 px), Ansichten der Seite als Reiter im Kopf */
.wbm-rahmen-rechts { margin: -8px 0 -8px auto; flex: none !important; display: flex; align-items: center; gap: var(--marke-sp-2); }
.wbm-rahmen-rechts > .wbm-rahmen-zurueck { margin: 0; }
.wbm-gross-knopf { pointer-events: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 50%; background: color-mix(in srgb, #fff 18%, transparent); color: #fff; cursor: pointer; }
.wbm-gross-knopf:hover { background: color-mix(in srgb, #fff 28%, transparent); }
.wbm-gross-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wbm-kopf.wbm-mit-ansichten > span { flex: 0 1 auto; }
.wbm-ansichten { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; margin: -8px 0 -8px 6px; overflow: hidden; }
.wbm-ansicht { pointer-events: auto; flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: var(--marke-r-pill); background: transparent;
  color: color-mix(in srgb, #fff 78%, transparent); font: 600 13px var(--marke-schrift); white-space: nowrap; cursor: pointer; }
.wbm-ansicht:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.wbm-ansicht[aria-selected="true"] { background: color-mix(in srgb, #fff 18%, transparent); color: #fff; cursor: default; }
.wbm-ansicht:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wbm-kopf.wbm-mit-ansichten .wbm-rahmen-rechts { margin-left: var(--marke-sp-2); }
/* die Umschalter-Kachel der Seite weicht dem Kopf; ist sie das Einzige im Kopfbereich, geht auch dieser weg */
#bsBereich[data-ansichten-kopf] .bs-sk-ansicht { display: none !important; }
#bsBereich[data-ansichten-kopf] > .bs-kopf:not(:has(> :not(.bs-sk-ansicht))) { display: none !important; }
@media (max-width: 999px) { .wbm-gross-knopf { display: none; } }
/* „Ganzes Fenster“: Menü-Karte und Kopfzeile weg, große Karte und Seite über die volle Fläche */
@media (min-width: 1000px) {
  :root.wbm-gross.wb-menue-flaeche:not(.wb-menue-offen) .wbm { display: none; }
  :root.wbm-gross.wb-menue-flaeche:not(.wb-menue-offen) .wbm-rahmen { left: 20px; top: 20px; z-index: 70; }
  :root.wbm-gross.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite { margin-left: 36px !important; margin-top: calc(64px - var(--wbm-oben, 76px) + 20px) !important; z-index: 71;
    max-height: calc(100vh - 92px); }
  :root.wbm-gross.wb-menue-flaeche:not(.wb-menue-offen) .wb-top { visibility: hidden; }
}

/* Kompakte Karte (Ralph 07.11.2026: kein Scrollen in der Karte): zu viele Einträge für die Bildschirmhöhe → engere Zeilen, zuerst Stufe 1, dann 2 (workspace-bento-menue.js#kompaktEinpassen) */
.wbm-kompakt .wbm-liste { gap: 0; }
.wbm-kompakt .wbm-eintrag { padding: 3px var(--marke-sp-2); }
.wbm-kompakt .wbm-sym { width: 24px; height: 24px; }
.wbm-kompakt2 .wbm-eintrag { padding: 1px var(--marke-sp-2); font-size: 12.5px; }
.wbm-kompakt2 .wbm-sym { width: 22px; height: 22px; }
/* Rechtsklick: der angeklickte Eintrag bleibt sichtbar markiert, solange sein Menü offen ist (Ralph 07.11.2026) */
.wbm-eintrag.wbm-kontext-ziel, .wbm-zeile.wbm-kontext-ziel > .wbm-eintrag { background: var(--wb-weich); box-shadow: inset 0 0 0 1.5px var(--marke-nav-blau); border-radius: var(--marke-r-s); }
.wbm-wachs { position: fixed; background: var(--wb-karte); box-shadow: var(--wb-rand), var(--marke-schatten-leise); }   /* Zeile, die zur Seitenkarte wächst (Übergang) */
/* Während die Zeile zur Seitenkarte wächst: Inhalt der Seite noch verborgen, danach weich einblenden (Ralph 07.11.2026) */
:root.wbm-ueb .wbm-seite, :root.wbm-ueb .wbm-rahmen { opacity: 0 !important; animation: none !important; }
:root.wb-menue-flaeche .wbm-seite, :root.wb-menue-flaeche .wbm-rahmen { transition: opacity .18s ease-out; }
.wbm-wachs { will-change: transform; }

/* Shortcuts oben links neben der Suche (Ralph 07.11.2026): „+“ ganz rechts an der Suche, Symbole wachsen nach links */
.wbm-kopfkurz { --wbm-f: var(--marke-nav-blau); margin: 0 12px 0 auto; }   /* Form: bento-kopfmenue.css */
@media (max-width: 720px) { .wbm-kopfkurz { display: none; } }
/* „+“ rechts im Kartenkopf (Werkzeug beantragen, Neuer Workflow – Ralph 07.11.2026) */
/* Weicher Übergang ins Weiße, wenn die Liste weiter scrollt (Ralph 07.11.2026) */
/* Kopfleiste „ruhig mit leisen Gruppen“ (Ralph 07.11.2026, Vorschlag 3d; vorher 3a): Dashboard/Menü als Umschalter (wie 3a),
   Shortcuts, Suche und Symbole je in einer halb durchsichtigen Kapsel, ohne Linie unter der Leiste (Ralph: „Linie weg“) – keine weißen Einzelkästen */
:root.wb-menue-modus .wb-top .wbm-pille svg { display: none; }
/* Kapseln: halb durchsichtiges Weiß (dunkel: leichtes Grau) */
:root.wb-menue-modus { --wbm-kapsel: rgba(255, 255, 255, .55); }
:root[data-theme="dark"].wb-menue-modus { --wbm-kapsel: color-mix(in srgb, var(--wb-text) 8%, transparent); }
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund { background: var(--wbm-kapsel); box-shadow: none; color: var(--wb-leise); border-radius: 0; margin: 0; width: 38px; height: 40px; }
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund:first-of-type { border-radius: 999px 0 0 999px; margin-left: 12px; padding-left: 4px; }
:root.wb-menue-modus .wb-top .bt-kopf-gruppe #wbNachrichten { border-radius: 0 999px 999px 0; padding-right: 4px; }
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund:hover { color: var(--wb-text); }
:root.wb-menue-modus .wb-top .wb-rund { background: transparent; box-shadow: none; }
/* Dashboard und Menü als Symbole statt Text (Ralph 07.11.2026): Symbole aus dem Menü-Satz: „raster“ = Dashboard, „liste“ = Menü (Ralph: „ähnliche Symbole wie bei den anderen Menüs“); Name bleibt für Vorleser und Hinweis */
:root.wb-menue-modus .wb-top .wbm-pille span { font-size: 0; }
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund:not(:first-of-type) { margin-left: calc(-1 * var(--wbm-kopf-gap, 6px)); }   /* Symbol-Kapsel ohne Fugen (Gruppe ist display:contents, Abstand kommt von .wb-top) */
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund .bt-kopf-zaehler { z-index: 2; }   /* Zähler nicht vom Nachbarn in der Kapsel abgeschnitten */
/* Oben rechts nur noch die Suche, bündig über der 5. Karte (Ralph 07.11.2026): Ansicht, Mikrofon, Aufgaben, Nachrichten entfallen */
:root.wb-menue-modus .wb-top .bt-kopf-gruppe .bt-kopf-rund, :root.wb-menue-modus .wb-top > .wb-rund, :root.wb-menue-modus .wb-top .bt-kopf-trenn { display: none; }
@media (max-width: 1099px) { :root.wb-menue-modus .wb-top .bt-kopf-suche { flex: 0 0 var(--wbm-suche-breite, 280px); width: var(--wbm-suche-breite, 280px); max-width: none; } }   /* ab 1100 px steht die Lage im Baukasten (bento-kopfmenue.css) */
/* „Benachrichtigungen“ über der 2. Karte (workspace-bento-kopf-mitteilungen.js, Ralph 07.11.2026) – Kapsel wie Shortcuts/Suche */
.wkm-zahl { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--marke-reiter-rot, #e5484d); color: #fff; font: 700 12px/22px var(--marke-schrift); text-align: center; }
.wkm-feld { position: fixed; z-index: 120; box-sizing: border-box; background: var(--wb-karte, #fff); color: var(--wb-text); border-radius: var(--marke-r-l, 12px); box-shadow: var(--marke-schatten); padding: 8px; font: 14px var(--marke-schrift); }
.wkm-kopf { font-weight: 600; padding: 6px 8px 8px; }
.wkm-zeile { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.wkm-zeile span { flex: 1 1 auto; }
.wkm-zeile small { color: var(--wb-leise); }
.wkm-zeile:hover { background: var(--marke-feld); }
.wkm-trenn { margin: 8px 8px 4px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--wb-text) 10%, transparent); font-size: 12px; color: var(--wb-leise); }
.wkm-hinweis { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; font-size: 13px; }
.wkm-hinweis b { font-weight: 600; }
.wkm-hinweis span { color: var(--wb-leise); }
.wkm-alle { margin: 6px 8px 2px; border: 0; background: transparent; color: var(--marke-nav-blau); font: 600 13px var(--marke-schrift); cursor: pointer; padding: 4px 0; }
/* Umschalter wie die übrigen Kapseln (Ralph 07.11.2026, „passt noch gar nicht“ → Variante B): runde Kapsel im selben Weiß, Höhe 38 px,
   gewählter Teil dunkel mit weißem Symbol */
/* Umschalter-Symbole als Inline-SVG, exakt mittig; Text und altes Masken-Symbol ausgeblendet (Ralph 07.11.2026) */
:root.wb-menue-modus .wb-top .wb-abschnitte > .wb-ab:has(> .wbm-umsym) > :not(.wbm-umsym), :root.wb-menue-modus .wb-top .wbm-pille:has(> .wbm-umsym) > :not(.wbm-umsym) { display: none; }   /* nur ausblenden, wenn das Symbol wirklich da ist – sonst bleibt der Text sichtbar */
:root.wb-menue-modus .wb-top .wbm-umsym { display: block; flex: none; }
.wbm-umsym { display: none; }
:root.wb-menue-modus .wb-top .wbm-pille svg.wbm-umsym { display: block; }

/* Shortcut-Auswahl „Menüpunkt …“: lange Liste scrollt in sich (Ralph 07.11.2026) */
.wbm-kontext.wbm-kontext-lang { max-height: min(420px, calc(100vh - 120px)); overflow-y: auto; }
/* Menüpunkt-Shortcut: Linien-Symbol im Kreis wie die übrigen */
.wbm-kurz-msym { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--wb-dunkel, #14141d); }
.wbm-kurz-msym svg { width: 18px; height: 18px; }
/* Benachrichtigungen: Glocke + Wort mittig in der Kapsel, Zahl rechts am Rand (Ralph 07.11.2026: „Text zentrieren“) */
/* „+“ der Shortcut-Kapsel wie das „+“ der Kartenköpfe: 28 px, leicht gerundetes Quadrat, 16 px vom rechten Rand – senkrecht über dem Karten-„+“ (Ralph 07.11.2026) */
/* Benachrichtigungen: Seitenrand nur so groß wie nötig, damit das Wort nicht abgeschnitten wird (Ralph 07.11.2026: „warum …?“) */
/* Shortcuts oben ziehen (Ralph 07.11.2026): gleiche Bewegung wie die Menüzeilen, waagerecht; Kopie rund wie die Symbole */
.wbm-kopfkurz .wbm-kurz-sym.wbm-gleit { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.wbm-kopfkurz .wbm-kurz-sym.ziehend { opacity: 0; }
.wbm-geist.wbm-kurz-geist { justify-content: center; border-radius: 999px; padding: 0; border: 0; }
@media (prefers-reduced-motion: reduce) { .wbm-kopfkurz .wbm-kurz-sym.wbm-gleit { transition: none; } }
/* Umschalter etwas schmaler (Ralph 07.11.2026) */
/* Mikrofon in der Suchkapsel rechts (Ralph 07.11.2026) – sichtbar, sobald das Diktat verfügbar ist */
/* Mikrofon in der Suche: an/aus per Klick, während der Aufnahme Pegel statt Symbol (Ralph 07.11.2026) */
.wbm-such-mikro .wbm-pegel { display: none; align-items: center; gap: 2px; height: 16px; }
.wbm-such-mikro .wbm-pegel i { display: block; width: 3px; height: 3px; border-radius: 2px; background: currentColor; transition: height .06s linear; }
.wbm-such-mikro.recording.mit-pegel > svg { display: none; }
.wbm-such-mikro.recording.mit-pegel .wbm-pegel { display: inline-flex; }
.wbm-such-mikro.wbm-denkt { opacity: .55; animation: wbm-denkt 1s ease-in-out infinite alternate; }
@keyframes wbm-denkt { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wbm-such-mikro.wbm-denkt { animation: none; } }
/* Benachrichtigungen: Glocke fest links wie die Lupe in der Suche, Wort mittig, Zahl rechts (Ralph 07.11.2026) */
/* Benachrichtigungen: Zahl im Wort, keine Plakette; bei mindestens einer läuft ein gelbes Licht um die Kapsel (Ralph 07.11.2026) */
/* Benachrichtigungen: etwas mehr Platz für das Wort (Ralph 07.11.2026: „Keine Benachrichtigungen passt nicht rein?“) */
/* Benachrichtigungen: Glocke linksbündig, Text rechtsbündig (Ralph 07.11.2026) */