/* workspace-bento-seite-liste.css — Seiten des Seiten-Baukastens (workspace-bento-seite.js) als schlichte Listen im neuen Menü. Kurzbeschreibung (für Laien): Ralph, 02.11.2026 — „nur Home bleibt Bento, überall sonst Listen, schön übersichtlich“. Solange html.wb-menue-modus gesetzt ist (Beta-Ring, workspace-bento-menue.js), sehen alle Bereiche (Kontakte, Ziele, Brett, Vorgaben, Team-Chat …) so aus wie Notizen/Wissen/Nachrichten (workspace-bento-schlicht.css): keine schwebenden Kacheln, keine große blaue Kopfkarte, Filter als kleine Pillen-Zeile, Kennzahlen als schmale Zahlen-Zeile, Einträge als Zeilen links und der gewählte Eintrag rechts daneben. Kunden ohne Beta behalten die Kacheln (diese Datei greift dort nicht). Farben nur aus marke.css bzw. den Bento-Variablen (hell/dunkel). */ :root.wb-menue-modus #bsBereich { --bsl-linie: var(--wb-linie, color-mix(in srgb, var(--bs-text) 10%, transparent)); } /* ── Kopf: keine blaue Kopfkarte (der Titel steht schon im Kopf der großen Karte), Kennzahlen und Umschalter in einer Zeile ── */ :root.wb-menue-modus #bsBereich .bs-kopfkarte { display: none; } :root.wb-menue-modus #bsBereich .bs-kopf, :root.wb-menue-modus #bsBereich[data-schalter] .bs-kopf, :root.wb-menue-modus #bsBereich .bs-kopf.mit-kopfkarte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } :root.wb-menue-modus #bsBereich .bs-zahl { flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: 6px; min-height: 0; padding: 6px 12px; border-radius: var(--marke-r-pill); background: var(--bs-weich); box-shadow: none; transform: none; animation: none; } :root.wb-menue-modus #bsBereich .bs-zahl[class*="ton-"] { background: var(--bs-weich); } :root.wb-menue-modus #bsBereich .bs-zahl b { order: -1; margin: 0; font-size: 14px; font-weight: 700; } :root.wb-menue-modus #bsBereich .bs-zahl span { font-size: 12px; font-weight: 500; color: var(--bs-leise); } :root.wb-menue-modus #bsBereich .bs-zahl small { display: none; } :root.wb-menue-modus #bsBereich button.bs-zahl:hover { box-shadow: none; transform: none; background: var(--marke-feld); } :root.wb-menue-modus #bsBereich .bs-zahl.an { box-shadow: none; background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 14%, transparent); } :root.wb-menue-modus #bsBereich .bs-schalter-kachel { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 8px; padding: 0; background: none; box-shadow: none; animation: none; } :root.wb-menue-modus #bsBereich .bs-schalter-kachel > .bs-sk-titel { font-size: 12px; } :root.wb-menue-modus #bsBereich .bs-schalter-kachel > .bs-sk-werte { margin: 0; gap: 4px; } :root.wb-menue-modus #bsBereich .bs-schalter-kachel > .bs-sk-werte button { padding: 6px 12px; font-size: 12px; } :root.wb-menue-modus #bsBereich .bs-sk-werte button.an, :root.wb-menue-modus #bsBereich .bs-umschalter button.an, :root.wb-menue-modus #bsBereich .bs-pillen button.an { background: linear-gradient(135deg, var(--wbm-f, var(--marke-nav-blau)) 30%, color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 66%, var(--wb-verlauf-ziel, #fff))); color: #fff; } /* ── Karten: keine schwebenden weißen Flächen mehr – Liste links, Trennlinie, Detail rechts ── */ :root.wb-menue-modus #bsBereich .bs-karte { background: transparent; box-shadow: none; border-radius: 0; animation: none; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-raster { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-liste-karte { padding: 0 16px 0 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-detail { border-left: 1px solid var(--bsl-linie); padding: 0 0 0 20px; } :root.wb-menue-modus #bsBereich .bs-plus { width: 34px; height: 34px; background: linear-gradient(135deg, var(--wbm-f, var(--bs-dunkel)) 30%, color-mix(in srgb, var(--wbm-f, var(--bs-dunkel)) 66%, var(--wb-verlauf-ziel, #fff))); } :root.wb-menue-modus #bsBereich .bs-umschalter { background: var(--bs-weich); } /* ── Einträge als Zeilen (data-zeilen: Bereiche, die sonst Kacheln hätten) ── */ :root.wb-menue-modus #bsBereich .bs-zeilen { display: flex; flex-direction: column; gap: 2px; } :root.wb-menue-modus #bsBereich .bs-zeile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--marke-r-m); color: var(--bs-text); cursor: pointer; outline: 0; } :root.wb-menue-modus #bsBereich .bs-zeile:hover { background: var(--bs-weich); } :root.wb-menue-modus #bsBereich .bs-zeile.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 10%, transparent); } /* kompakte Zeile (zeile()): Symbol im Kästchen, Titel + eine Zusatzzeile, rechts Etikett/Zahl – wie die Menü-Zeilen */ :root.wb-menue-modus #bsBereich .bs-zeile-kurz { flex-direction: row; align-items: center; gap: var(--marke-sp-3); padding: 8px var(--marke-sp-2); } :root.wb-menue-modus #bsBereich .bs-zeile-kurz .wss-sym b { font: 700 11px var(--marke-schrift); } :root.wb-menue-modus #bsBereich .bs-zeile-kurz > .bs-etikett, :root.wb-menue-modus #bsBereich .bs-zeile-kurz > .bsl-rechts { flex: none; margin-left: auto; } :root.wb-menue-modus #bsBereich .bsl-rechts { font: 600 12px var(--marke-schrift); color: var(--bs-leise); white-space: nowrap; font-variant-numeric: tabular-nums; } /* „+“ oben über der Liste mit Beschriftung (title) statt nur Kreis */ :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus { width: auto; padding: 0 14px 0 10px; gap: 6px; border-radius: var(--marke-r-pill); font: 600 13px var(--marke-schrift); } :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus::after { content: attr(title); } :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus svg { width: 16px; height: 16px; } :root.wb-menue-modus #bsBereich .bs-zeile .bs-k-text { -webkit-line-clamp: 1; } :root.wb-menue-modus #bsBereich .bs-zeile .bs-k-fuss { margin-top: 2px; padding-top: 0; } :root.wb-menue-modus #bsBereich .bs-zeile .bs-etikett { height: 20px; padding: 0 8px; font-size: 11px; } /* ── Tabellen-Bereiche: Zeilen wie oben, ohne schweren Tabellenkopf ── */ :root.wb-menue-modus #bsBereich .bs-tabelle tbody tr.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 10%, transparent); } /* ── Leer und Laden: schlichter Text statt weißer Kachel ── */ :root.wb-menue-modus #bsBereich .bs-leer { background: none !important; box-shadow: none !important; min-height: 0 !important; } :root.wb-menue-modus #bsBereich .bs-plus-kachel { min-height: 0 !important; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; border: 0; box-shadow: none; background: none; } :root.wb-menue-modus #bsBereich .bs-plus-kachel:hover { background: var(--bs-weich); transform: none; } /* ── Raster-Bereiche mit eigenem Inhalt (z. B. Pipeline): Kacheln flach, ohne Schatten und Anheben ── */ :root.wb-menue-modus #bsBereich .bs-kachel { box-shadow: none; border: 1px solid var(--bsl-linie); min-height: 0; transform: none; } :root.wb-menue-modus #bsBereich .bs-kachel:hover { background: var(--bs-weich); transform: none; box-shadow: none; } :root.wb-menue-modus #bsBereich .bs-kachel.an { border-color: var(--wbm-f, var(--bs-dunkel)); box-shadow: none; } :root.wb-menue-modus #bsBereich[data-ansicht="raster"].bs-detail-auf .bs-detail { box-shadow: none; background: var(--wb-karte, var(--bs-karte)); } /* ── In der großen Karte kein leerer Streifen unten (60 px Rand des Baukastens), Liste und Detail reichen bis unten ── */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich { padding-bottom: 0 !important; } /* ── Ohne Kopf-Zeile (z. B. Vorgaben): erste Zeile nicht hochziehen, sonst klebt sie am Kartenkopf ── */ :root.wb-menue-modus.bs-offen #bsBereich:has(> .bs-kopf:where([hidden])) .bs-liste { margin-top: 0; } /* ── Kontakt-Detail (Kontakte/Verkauf) schlicht: Name als Überschrift statt blauer Kopf-Karte, Aktionen als kleine Knöpfe, Daten/Status/Aktivitäten als Abschnitte mit Trennlinie statt Karten (Ralph 02.11.2026 „Listen statt Bento“) ── */ :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d { display: flex; flex-direction: column; gap: 18px; padding-top: 0; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-kopf { min-height: 0; padding: 0; gap: 10px; background: none; box-shadow: none; border-radius: 0; color: var(--bs-text); } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-kopf .bc-initialen.riesig, :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-logo.riesig { width: 48px; height: 48px; font-size: 16px; background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 12%, transparent); color: var(--wbm-f, var(--marke-akzent)); } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-name h2 { font-size: 20px; font-weight: 700; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-name p { color: var(--bs-leise); font-size: 13px; margin-top: 2px; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-kp-pille { background: var(--bs-weich); color: var(--bs-text); height: 22px; font-size: 11px; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-aktionen { display: flex; flex-wrap: wrap; gap: 6px; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak { padding: 5px 12px 5px 6px; gap: 8px; border-radius: var(--marke-r-pill); background: var(--bs-weich); box-shadow: none; transform: none; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak:hover { background: var(--marke-feld); box-shadow: none; transform: none; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak-sym { width: 24px; height: 24px; background: transparent; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak-sym svg { width: 15px; height: 15px; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak-text b { font-size: 13px; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-ak-text small { display: none; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-k { padding: 16px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--bsl-linie); } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-kopf:hover, :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bc-d-k:hover { box-shadow: none; } @media (max-width: 900px) { :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-raster { grid-template-columns: minmax(0, 1fr); } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--bsl-linie); padding-top: 12px; } } /* ── Freigaben (workspace-bento-freigaben.js): Vorschau rechts mit Freigeben/Verwerfen ── */ .bfg-d { display: flex; flex-direction: column; gap: 10px; } .bfg-d > .bs-etikett { align-self: flex-start; } .bfg-d h2 { margin: 0; font: 700 18px/1.3 var(--marke-schrift); color: var(--bs-text); } .bfg-meta, .bfg-hinweis { margin: 0; font-size: 12px; color: var(--bs-leise); } .bfg-vorschau { margin: 4px 0; padding: 12px 14px; border-radius: var(--marke-r-m); background: var(--bs-weich); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .bfg-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .bfg-frage { font-size: 13px; margin-right: 4px; } .bfg-d .bs-knopf.gefahr { background: var(--marke-gefahr); } .bfg-fehler { margin: 0; font-size: 12px; color: var(--marke-gefahr); } /* ── Automationen (workspace-bento-automationen.js): letzte Läufe im Detail ── */ .bau-titel { margin: 8px 0 0; font: 600 13px var(--marke-schrift); color: var(--bs-text); } .bau-lauf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--bsl-linie, var(--wb-linie)); font-size: 12px; color: var(--bs-leise); } .bau-auszug { flex-basis: 100%; color: var(--bs-text); } /* ── Einheitsform der großen Karte (Ralph 02.11.2026, „Mein Bereich“ – alles im gleichen Stil, ohne Schnickschnack) ── Links eine Spalte (340 px): Suche + „+ Neu …“ in einer Zeile, darunter höchstens eine Filterzeile, dann die Liste; durchgehende Trennlinie; rechts der gewählte Eintrag über die ganze Höhe. Gleich wie Notizen/Nachrichten/Aufgaben/Team-Chat. Gilt nur bei offenem Bereich (bs-offen): sonst schlug dieses display:grid !important die Regel „Startseite = Bereich zu“ und die Seite blieb nach Klick auf Home unter der Startseite stehen (Ralph 07.11.2026). */ :root.wb-menue-modus.bs-offen #bsBereich:not([data-ansicht="raster"]) { display: grid !important; grid-template-columns: calc(var(--wbm-liste) + var(--wbm-g)) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "werkzeug detail" "kopf detail" "pillen detail" "liste detail"; column-gap: 0; row-gap: 10px; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) > .bs-raster, :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-liste-karte { display: contents; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug { grid-area: werkzeug; padding: 0 var(--wbm-g) 0 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) > .bs-kopf { grid-area: kopf; padding-right: var(--wbm-g); gap: 6px; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-pillen { grid-area: pillen; padding: 0 var(--wbm-g) 0 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-liste { grid-area: liste; padding-right: var(--wbm-g); margin-top: 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-detail { grid-area: detail; grid-row: 1 / -1; border-left: 1px solid var(--bsl-linie); padding: 0 0 0 20px; overflow-y: auto; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug[hidden], :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-pillen[hidden] { display: none !important; } /* eigene Suche links (statt nur oben in der Kopfzeile) – wie Notizen; „+ Neu …“ dunkel wie überall */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-suche { display: flex !important; flex: 1 1 auto; height: 34px; padding: 0 12px; background: var(--bs-weich); } :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus { background: var(--wb-dunkel, var(--bs-dunkel)); color: #fff; } /* Filter: nur die Pillen, ohne Überschrift; die Kopfzeile ist ohnehin klein */ :root.wb-menue-modus #bsBereich .bs-schalter-kachel > .bs-sk-titel { display: none; } /* Kontakte: nur „Kontakte | Firmen | Pipeline“ – die übrigen Filtergruppen (Kategorie, Nachfassen) braucht diese Ansicht nicht */ :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bs-kopf > .bs-schalter-kachel ~ .bs-schalter-kachel { display: none; } @media (max-width: 900px) { :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "werkzeug" "kopf" "pillen" "liste" "detail"; grid-template-rows: auto auto auto auto auto; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-detail { grid-row: auto; border-left: 0; padding-left: 0; } } /* ── Mein Bereich ohne Kennzahlen und Zusatz-Umschalter (Ralph 02.11.2026: „Kennzahlen und sonstiges Zeug brauche ich hier nicht“) ── */ :root.wb-menue-modus .av-s-zahlen { display: none !important; } /* Aufgaben: Zahlenzeile über der Liste */ :root.wb-menue-modus #wbNachrTabs { display: none !important; } /* Nachrichten: „Team | Postfach“ – Team-Chat hat eine eigene Seite */ /* Gleiche Spaltenbreite in allen Seiten von „Mein Bereich“ (340 px links) */ :root.wb-menue-modus .bz-wss .bz-unten { grid-template-columns: var(--wbm-liste) minmax(0, 1fr); } /* Aufgaben bewusst breiter als die übrigen Listen (Ralph 07.11.2026): Titel nutzen den freien Platz */ :root.wb-menue-modus .av.av-s { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); } :root.wb-menue-modus .wss.wss-zwei { grid-template-columns: var(--wbm-liste) minmax(0, 1fr); } @media (max-width: 900px) { :root.wb-menue-modus .bz-wss .bz-unten, :root.wb-menue-modus .av.av-s, :root.wb-menue-modus .wss.wss-zwei { grid-template-columns: minmax(0, 1fr); } } /* Gleicher Abstand unter dem Kartenkopf (24 px) in allen Seiten von „Mein Bereich“ – gemessen, nicht geschätzt */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-bereich="postfach"] { padding-top: 52px !important; } :root.wb-menue-modus.wb-menue-flaeche .av.av-s { margin-top: -12px; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell { padding-top: 12px; } /* Trennlinie überall an derselben Stelle wie Notizen/Aufgaben (Liste + Luft rechts, --wbm-g) */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) { grid-template-columns: calc(var(--wbm-liste) + var(--wbm-g)) minmax(0, 1fr); } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell { grid-template-columns: calc(var(--wbm-liste) + var(--wbm-g) + 16px) minmax(0, 1fr); padding-left: var(--wbm-pad); } /* Chat: Verlauf-Spalte wie die übrigen Listen (+ 16 px Rand hinter der Trennlinie) */ :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat #convSidebar { padding-right: var(--wbm-g); } /* Zeiterfassung im gleichen Stil: Eingabe als Pille wie die Suchfelder, keine Linie quer über die Karte, keine Summen-Zahl */ :root.wb-menue-modus .bz-leiste { border-bottom: 0; padding-bottom: 0; } :root.wb-menue-modus #bsBereich[data-bereich="zeit"] .bz-stopp .bz-stoppuhr > .a4h-field { border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); padding: 0 14px; font-size: 13px; box-shadow: none; } :root.wb-menue-modus .bz-sum { display: none; } /* Nachrichten mit Postfach: gleicher Abstand oben (24 px) und Agenten-Chat ohne Kachel-Rahmen, nur durch eine Linie abgesetzt */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-bereich="postfach"]:has(.wss-liste) { padding-top: 56px !important; } :root.wb-menue-modus #bsBereich[data-bereich="postfach"] .pf-kachel.pf-chat { border: 0; border-top: 1px solid var(--bsl-linie, var(--wb-linie)); border-radius: 0; box-shadow: none; background: transparent; padding-left: 0; padding-right: 0; } :root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-bereich="postfach"].wbm-seite { max-height: calc(100vh - var(--wbm-oben, 76px) - 44px); } /* gleicher Boden wie die anderen Seiten trotz Abstand oben */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-bereich="postfach"]:has(.wss).wbm-seite { max-height: calc(100vh - var(--wbm-oben, 76px) - 44px); } /* Keine eigene Suche links – gesucht wird nur oben in der Kopfleiste, die filtert die offene Seite (Ralph 02.11.2026). „+ Neu …“ und die Filter bleiben; eine Werkzeugzeile, in der nur die Suche stand, fällt ganz weg. */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-suche, :root.wb-menue-modus .wbm-seite .wss-suche, :root.wb-menue-modus #bsBereich .wss-suche, :root.wb-menue-modus.ws-bento-chat .wbc-suche { display: none !important; } :root.wb-menue-modus .wss-kopf:not(:has(> :not(.wss-suche))) { display: none; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug:not(:has(> :not(.bs-suche))) { display: none; } /* Listen in der Mitte so schmal wie möglich (Ralph 02.11.2026) – eine Breite für alle Seiten, lange Zeilen enden mit „…“ */ :root.wb-menue-modus { --wbm-liste: 224px; --wbm-pad: 8px; --wbm-g: 24px; --wbm-liste-auf: 360px; --wbm-plus-r: calc(var(--wbm-pad) + var(--wbm-liste) - 36px); } /* Listenspalte mittig (Ralph 07.11.2026): Luft links vom Zeilenkästchen (--wbm-pad) + Zeilen-Innenabstand 8 px = Luft rechts bis zur Trennlinie (Zeilen-Innenabstand 8 px + --wbm-g, 24 px) */ :root.wb-menue-modus .wbm-seite .wss.wss-zwei, :root.wb-menue-modus #bsBereich .wss.wss-zwei { grid-template-columns: var(--wbm-liste) minmax(0, 1fr); } :root.wb-menue-modus .wbm-seite .wss.wss-zwei.av-s, :root.wb-menue-modus #bsBereich .wss.wss-zwei.av-s { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); } /* Aufgaben: breitere Liste (07.11.) – muss die Regel darüber schlagen */ @media (max-width: 900px) { :root.wb-menue-modus .wbm-seite .wss.wss-zwei.av-s, :root.wb-menue-modus #bsBereich .wss.wss-zwei.av-s { grid-template-columns: minmax(0, 1fr); } } /* Aufgaben am Handy: eine Spalte, sonst 260 px + gequetschter Rest */ /* „+ Neu …“ immer links oben (Kontakte stand rechts) */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug { justify-content: flex-start; } /* Gantt-Planer und Kalender (Listenansicht): gleiche schmale Liste, „+ Neu …“ vorn in der Leiste (Ralph 02.11.2026) */ :root.wb-menue-modus .bp-m-koerper:not([data-pane="nein"]):not(:has(.bp-m-woche)), :root.wb-menue-modus .bk-m-koerper:not([data-pane="nein"]) { grid-template-columns: var(--wbm-liste) minmax(0, 1fr); } :root.wb-menue-modus :is(.bp-m-kopf, .bk-m-kopf) > .wss-neu { order: -1; } @media (max-width: 900px) { :root.wb-menue-modus :is(.bp-m-koerper, .bk-m-koerper):not([data-pane="nein"]) { grid-template-columns: minmax(0, 1fr); } } /* Team-Chat: gleiche Höhe von „+ Neuer Raum“ wie auf den anderen Seiten (gemessen: 22 px zu tief) */ :root.wb-menue-modus.wb-menue-flaeche .wss.tcl { margin-top: -22px; } :root.wb-menue-modus.wb-menue-flaeche .wss.bp-m { margin-top: -12px; } /* Gantt-Planer: Leiste auf gleicher Höhe (gemessen 12 px zu tief) */ /* Neue Einträge: unten links nur ein „+“ wie im Menü, sonst nichts (Ralph 02.11.2026: „Gib mir unten links einfach immer nur ein + Symbol wie gehabt“). Die Knöpfe bleiben dieselben (Klick wie bisher), nur Platz und Aussehen ändern sich. */ :root.wb-menue-modus .wss-spalte, :root.wb-menue-modus.ws-bento-chat #convSidebar, :root.wb-menue-modus .wss.bp-m, :root.wb-menue-modus .bz-wss { position: relative; } :root.wb-menue-modus .wss-spalte, :root.wb-menue-modus.ws-bento-chat #convSidebar { padding-bottom: 40px; box-sizing: border-box; } :root.wb-menue-modus .wss-kopf:not(:has(> :not(.wss-suche, .wss-neu))) { display: contents; } :root.wb-menue-modus :is(.wss-neu, [data-bz-neu]), :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug > .bs-plus, :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { position: absolute; left: 0; bottom: 0; z-index: 2; width: 28px; height: 28px; min-width: 0; padding: 0; gap: 0; border: 0; border-radius: var(--marke-r-s); background: color-mix(in srgb, var(--wbm-f) 12%, transparent); color: var(--wbm-f); font-size: 0; line-height: 0; box-shadow: none; transform: none; display: flex; align-items: center; justify-content: center; } :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { left: 0; } :root.wb-menue-modus :is(.wss-neu, [data-bz-neu]) > *, :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus > *, :root.wb-menue-modus.ws-bento-chat #wbcNeu > * { display: none; } :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus::after, :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus::after { content: none; } :root.wb-menue-modus :is(.wss-neu, [data-bz-neu])::before, :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug > .bs-plus::before, :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; } :root.wb-menue-modus :is(.wss-neu, [data-bz-neu]):hover, :root.wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus:hover, :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus:hover { background: color-mix(in srgb, var(--wbm-f) 22%, transparent); } :root[data-theme="dark"].wb-menue-modus :is(.wss-neu, [data-bz-neu]), :root[data-theme="dark"].wb-menue-modus #bsBereich .bs-werkzeug > .bs-plus, :root[data-theme="dark"].wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { background: color-mix(in srgb, var(--wbm-f) 28%, transparent); color: var(--wb-text); } /* Kontakte & Co.: Werkzeugzeile mit nur dem „+“ braucht oben keinen Platz mehr */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug:not(:has(> :not(.bs-suche, .bs-plus))) { position: absolute; left: 0; bottom: 0; padding: 0; height: 28px; width: 28px; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-liste { padding-bottom: 40px; } /* gemessen angeglichen: überall 36 px vom linken und 16 px vom unteren Kartenrand */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug:not(:has(> :not(.bs-suche, .bs-plus))) { top: auto; right: auto; left: 20px; grid-area: auto; grid-column: auto; grid-row: auto; } /* sonst gilt das Rasterfeld oben als Bezug */ :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { left: 4px; } :root.wb-menue-modus.wb-menue-flaeche .wss.tcl .wss-neu { bottom: -22px; } :root.wb-menue-modus.wb-menue-flaeche .wss.bp-m > .wss-kopf .wss-neu, :root.wb-menue-modus.wb-menue-flaeche .wss.bp-m .wss-neu { bottom: -12px; } /* „+“ gleichmäßig in der Ecke: 16 px vom linken wie vom unteren Kartenrand (Ralph 02.11.2026). Bezug ist die Seite selbst (#bsBereich), nicht die Liste – sonst schneidet deren Rand das „+“ ab. Chat liegt außerhalb und wird dort eingerückt. */ :root.wb-menue-modus #bsBereich :is(.wss-spalte, .wss.bp-m, .bz-wss), :root.wb-menue-modus #bsBereich > .bs-raster { position: static; } :root.wb-menue-modus #bsBereich :is(.wss-neu, [data-bz-neu]) { left: auto; right: var(--wbm-plus-r); bottom: 0; } /* „+“ fluchtet mit den Zeilen-Symbolen der Listenspalte (rechts in der Karte) */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich .wss.tcl .wss-neu, :root.wb-menue-modus.wb-menue-flaeche #bsBereich .wss.bp-m .wss-neu { bottom: 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug:not(:has(> :not(.bs-suche, .bs-plus))) { left: auto; right: var(--wbm-plus-r); } :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { left: calc(var(--wbm-g) + 12px); } :root.wb-menue-modus.ws-bento-chat #convSidebar { overflow: visible; } /* Ausblend-Maske der Kachel-Liste (workspace-bento-seite.css) schneidet im neuen Menü das „+“ in der Ecke ab – hier nicht nötig */ :root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-ansicht="raster"] .bs-liste { -webkit-mask-image: none; mask-image: none; } /* Aufgaben (Ralph 03.11.2026, im Desktop-Widget nachgewiesen): Titel liefen unter das Datum. Zeilentext darf schrumpfen – ausdrücklich erzwungen (Breite 0 + wachsen), weil ältere Browser-Fassungen Knöpfe nicht unter ihre Textbreite schrumpfen. */ :root.wb-menue-modus .av-s .av-sz { flex: none; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; } :root.wb-menue-modus .av-s .av-sz .av-zeile-text { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; } :root.wb-menue-modus .av-s .av-sz :is(.wss-titel, .wss-meta) { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Titel dürfen auf zwei Zeilen umbrechen, erst danach „…“ (Ralph 07.11.2026); voller Titel im Tooltip */ :root.wb-menue-modus .av-s .av-sz .wss-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } :root.wb-menue-modus .av-s .av-sz .av-termin { flex: none; margin-left: 8px; } :root.wb-menue-modus .av-s :is(.av-links, .av-liste, .wss-liste, .wss-spalte) { min-width: 0; } /* kein blauer Rahmen um die ganze Liste nach einem Klick */ :root.wb-menue-modus .wbm-seite :is(.wss-spalte, .wss-liste, .av-links, .av-liste, .bs-liste):focus { outline: none; } /* Aufgaben: Abschnitts-Überschriften („Ohne Frist“, „Erledigt“) genau wie in Nachrichten (gemessen: 11 px/600, ohne Innenabstand) */ :root.wb-menue-modus .av-s .wss-gruppe.av-gruppe { padding: 0; margin: 12px 8px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 14px; min-height: 0; } :root.wb-menue-modus .av-s .wss-gruppe.av-gruppe ~ .wss-gruppe.av-gruppe { margin-top: 18px; } /* Transkription: keine Filter „Alle / Fertig / In Arbeit“ über der Liste (Ralph 03.11.2026) */ :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .btr-pillenreihe { display: none; } /* Bedienelemente nur links, keine Leiste quer über die Karte (Ralph 03.11.2026: „Einstellungen immer nur links, keine Kopfzeile“). Kalender und Gantt-Planer (Listenansicht): Leiste, Zusatz-Einstellungen und Liste übereinander in der linken Spalte, rechts der gewählte Eintrag über die ganze Höhe – wie Notizen/Aufgaben. Die Wochen-Ansicht des Planers bleibt breit. */ :root.wb-menue-modus .wss.bk-m, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) { display: grid; grid-template-columns: var(--wbm-liste) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: var(--marke-sp-4); row-gap: var(--marke-sp-3); } :root.wb-menue-modus .wss.bk-m > .bk-m-kopf, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) > .bp-m-kopf { grid-column: 1; grid-row: 1; flex-wrap: wrap; min-width: 0; } :root.wb-menue-modus .wss.bk-m > .bk-m-zusatz { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; min-width: 0; } :root.wb-menue-modus .wss.bk-m > .bk-m-koerper, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) > .bp-m-koerper { display: contents; } :root.wb-menue-modus .wss.bk-m .bk-m-haupt, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) .bp-m-haupt { grid-column: 1; grid-row: 3; min-width: 0; } :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) .bp-m-haupt { grid-row: 2 / -1; } :root.wb-menue-modus .wss.bk-m .wss-detail, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) .wss-detail { grid-column: 2; grid-row: 1 / -1; min-height: 0; overflow-y: auto; } @media (max-width: 900px) { :root.wb-menue-modus .wss.bk-m, :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } :root.wb-menue-modus .wss.bk-m > *, :root.wb-menue-modus .wss.bk-m .bk-m-haupt, :root.wb-menue-modus .wss.bk-m .wss-detail, :root.wb-menue-modus .wss.bp-m .bp-m-haupt, :root.wb-menue-modus .wss.bp-m .wss-detail, :root.wb-menue-modus .wss.bp-m > .bp-m-kopf { grid-column: 1; grid-row: auto; } } :root.wb-menue-modus .wss.bk-m > .bk-m-kopf { padding-right: 12px; } /* ── Listenspalte mittig und RECHTS in der Karte (Ralph 07.11.2026, gemessen). Der Inhalt steht links, die Liste rechts, die Trennlinie links der Liste. Luft von der Trennlinie bis zum Zeilen-Symbol = Luft vom Zeilen-Ende bis zur Kartenkante: Trennlinie + --wbm-g + Zeilen-Innenabstand 8 px = Zeilen-Innenabstand 8 px + --wbm-pad + Seitenrand 16 px. Überschriften („Direkt“, „Räume“, „Ohne Frist“) und „+“ stehen in der Flucht der Symbole. Aufgaben bleiben bewusst breiter (07.11.), nur die Abstände sind gleich. Handy (bis 900 px): wie bisher gestapelt. ── */ @media (min-width: 901px) { :root.wb-menue-modus #bsBereich.wbm-seite:is(:not([data-ansicht="raster"]), :has(:is(.wss.wss-zwei, .wss.bk-m, .wss.bp-m, .bz-wss))) { padding-right: var(--wbm-pad); } :root.wb-menue-modus #bsBereich.wbm-seite[data-ansicht="raster"]:has(:is(.wss.wss-zwei, .wss.bk-m, .wss.bp-m, .bz-wss)) .bs-liste { margin-right: calc(-1 * var(--wbm-pad)); padding-right: var(--wbm-pad); } /* Seiten mit Kachel-Rahmen (Notizen, Wissen …): der Liste ihren 20-px-Rand rechts abnehmen */ /* Dokumente › Für mich und Kontakte › Pipeline (ohne rechte Spalte): kein zusätzlicher 20-px-Listenrand, Inhalt endet 16 px vor der Kartenkante wie links (Ralph 08.11.2026) */ :root.wb-menue-modus #bsBereich.wbm-seite:is([data-bereich="dokumente"], [data-bereich="crm"])[data-ansicht="raster"]:not(:has(.bsp)) { padding-right: 0; } :root.wb-menue-modus #bsBereich.wbm-seite:is([data-bereich="dokumente"], [data-bereich="crm"])[data-ansicht="raster"]:not(:has(.bsp)) .bs-liste { margin-right: 0; padding-right: 0; } /* Zwei Spalten: Inhalt links, Liste rechts; die Linie sitzt am rechten Rand des Inhalts */ :root.wb-menue-modus #bsBereich[data-bereich] .wss.wss-zwei { grid-template-columns: minmax(0, 1fr) var(--wbm-liste); column-gap: var(--wbm-g); } :root.wb-menue-modus #bsBereich[data-bereich] .wss.wss-zwei.av-s { grid-template-columns: minmax(0, 1fr) var(--wbm-liste-auf); column-gap: var(--wbm-g); } /* Aufgaben: feste, etwas breitere Liste (360 px) statt Anteil, damit das „+“ genau fluchtet */ :root.wb-menue-modus #bsBereich[data-bereich]:has(.wss.wss-zwei.av-s) { --wbm-plus-r: calc(var(--wbm-pad) + var(--wbm-liste-auf) - 36px); } :root.wb-menue-modus .av-s .av-liste { padding-right: 0; } :root.wb-menue-modus #bsBereich[data-bereich] .wss.wss-zwei > .wss-spalte { order: 2; } :root.wb-menue-modus #bsBereich[data-bereich] .bz-wss .bz-unten { grid-template-columns: minmax(0, 1fr) var(--wbm-liste); column-gap: var(--wbm-g); } :root.wb-menue-modus #bsBereich[data-bereich] .bz-wss .bz-unten > .wss-spalte { order: 2; } :root.wb-menue-modus #bsBereich[data-bereich] :is(.wss.wss-zwei, .bz-wss .bz-unten) > .wss-detail { order: 1; border-left: 0; padding-left: 0; border-right: 1px solid var(--wb-linie); padding-right: var(--marke-sp-4); } /* Kontakte & Co. (Seiten-Raster mit Bereichen): Detail links, Werkzeug/Kopf/Filter/Liste rechts */ :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]), :root.wb-menue-modus.bs-offen #bsBereich:not([data-ansicht="raster"]) { grid-template-columns: minmax(0, 1fr) var(--wbm-liste); column-gap: var(--wbm-g); grid-template-areas: "detail werkzeug" "detail kopf" "detail pillen" "detail liste"; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug, :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-pillen, :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) > .bs-kopf, :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-liste { padding-right: 0; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-detail { border-left: 0; padding: 0 var(--marke-sp-4) 0 0; border-right: 1px solid var(--bsl-linie); } /* Kalender und Gantt-Planer (Listenansicht) */ :root.wb-menue-modus #bsBereich[data-bereich] :is(.wss.bk-m, .wss.bp-m:not(:has(.bp-m-woche))) { grid-template-columns: minmax(0, 1fr) var(--wbm-liste); column-gap: var(--wbm-g); } :root.wb-menue-modus #bsBereich[data-bereich] :is(.wss.bk-m > .bk-m-kopf, .wss.bk-m > .bk-m-zusatz, .wss.bk-m .bk-m-haupt, .wss.bp-m:not(:has(.bp-m-woche)) > .bp-m-kopf, .wss.bp-m:not(:has(.bp-m-woche)) .bp-m-haupt) { grid-column: 2; } :root.wb-menue-modus #bsBereich[data-bereich] :is(.wss.bk-m .wss-detail, .wss.bp-m:not(:has(.bp-m-woche)) .wss-detail) { grid-column: 1; border-left: 0; padding-left: 0; border-right: 1px solid var(--wb-linie); padding-right: var(--marke-sp-4); } :root.wb-menue-modus .wss.bk-m .bk-m-nav { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; row-gap: 4px; } /* „KW 45 …“ bricht um statt über die Spalte zu laufen */ :root.wb-menue-modus .wss.bk-m .bk-m-nav b { margin-left: 0; } :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) .bp-m-gruppe { max-width: 100%; } :root.wb-menue-modus .wss.bp-m:not(:has(.bp-m-woche)) .bp-m-gruppe button { padding: 6px 9px; } /* „Heute | Woche | Monat | Alle“ passt in die schmale Spalte */ /* Chat: Verlauf rechts, Gespräch links */ :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell { grid-template-columns: minmax(0, 1fr) calc(var(--wbm-liste) + var(--wbm-g) + 16px); padding-left: 16px; padding-right: var(--wbm-pad); } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell > #convSidebar { grid-column: 2; grid-row: 2; border-right: 0; border-left: 1px solid var(--wb-linie, color-mix(in srgb, var(--wb-text) 10%, transparent)); padding-right: 0; padding-left: var(--wbm-g); margin-right: 0; margin-left: 16px; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell > .app-main { grid-column: 1; grid-row: 2; } } /* Handy und schmale Fenster (bis 900 px): unverändert wie vor der Spiegelung – alte Spaltenbreite, „+“ links, Chat-Gitter wie bisher */ @media (max-width: 900px) { :root.wb-menue-modus { --wbm-liste: 260px; --wbm-pad: 0px; } :root.wb-menue-modus #bsBereich :is(.wss-neu, [data-bz-neu]) { left: 0; right: auto; } :root.wb-menue-modus #bsBereich:not([data-ansicht="raster"]) .bs-werkzeug:not(:has(> :not(.bs-suche, .bs-plus))) { left: 0; right: auto; } :root.wb-menue-modus.ws-bento-chat #wbcNeu.wbc-plus { left: -16px; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell { grid-template-columns: calc(var(--wbm-liste) + 36px) minmax(0, 1fr); padding-left: 16px; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat #convSidebar { padding-right: 16px; } } /* ── Baustein „rechte Menüspalte“ (bento-kern/bento-spalte.*) in den Seiten mit .wss-zwei (Notizen, Wissen …, Ralph 08.11.2026): die Spalte steht rechts, Linie und Luft bringt der Baustein mit – die alte Trennlinie am Detail und das „+“ in der Ecke entfallen. ── */ @media (min-width: 901px) { :root.wb-menue-modus #bsBereich[data-bereich] .wss.wss-zwei > .bsp { order: 2; min-height: 0; } :root.wb-menue-modus #bsBereich[data-bereich] .wss.wss-zwei:has(> .bsp) > .wss-detail { border-right: 0; padding-right: 0; } } @media (max-width: 900px) { :root.wb-menue-modus .wss.wss-zwei > .bsp { height: auto; max-height: 50vh; } } /* EIN Startwert für alle Seitenfenster (Ralph 08.11.2026): die erste Zeile der Mitte, die erste Zeile der rechten Spalte (BentoSpalte) und der Anfang der Trennlinie liegen auf gleicher Höhe wie der erste Eintrag der linken Menükarte = Kopf (52 px) + --wbm-start (8 px). Rechts reicht die Spalte bis zur Fensterkante; ihre Zeilen enden 8 px davor, wie links in der Menükarte. Seiten-eigene obere Innenabstände gleichen sich daran an (null). */ :root.wb-menue-modus { --wbm-start: 24px; } /* Ralph 08.11.2026: mehr Luft unter dem Fensterkopf; 24 px = Raster-Wert der Marke, größer als die 16 px seitlich */ @media (min-width: 901px) { :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(#bsBereich, #appShell).wbm-seite { margin-top: 52px !important; padding-top: var(--wbm-start); } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(#bsBereich, #appShell).wbm-seite:has(.bsp) { margin-right: 20px !important; padding-right: 0; } :root.wb-menue-modus #bsBereich:has(.bsp) .bs-liste { padding-top: 0; } } :root.wb-menue-modus #bsBereich .bs-werkzeug:empty { display: none; } /* leere Werkzeugleiste (10 px Resthöhe) schob den Seitenanfang nach unten */ /* ── Seitenraster, Teil 2 (Ralph 08.11.2026): gleicher linker Rand der Mitte, gleicher oberer Start für Mitte UND Spalte ── Vier waagerechte Abstände, alle 16 px (Ralph 08.11.2026): (a) Kartenrand links → Mitte, (b) Mitte → Trennlinie, (c) Trennlinie → Spalteninhalt, (d) Spalteninhalt → Kartenrand rechts. 16 px = der Rand, den die Menükarte links zwischen Kartenrand und Symbol hat, und der Innenrand der Spalte (c, d, vom Baustein fest). Die große Karte liefert die 16 px links schon mit (Seite beginnt bei Kartenrand + 16), darum sind --wbm-links und --wbm-rand 0; b = --wbm-luft (Spaltenabstand). Inhalte mit max-width (Formulare, Chat) stehen linksbündig ab (a). */ :root.wb-menue-modus { --wbm-rand: 0px; --wbm-links: 0px; --wbm-luft: 16px; } @media (min-width: 901px) { :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #bsBereich.wbm-seite { padding-top: var(--wbm-start) !important; padding-left: var(--wbm-links) !important; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #appShell.wbm-seite { padding-top: var(--wbm-start) !important; } /* Mitte: ein linker Innenrand */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.bsp-seite, .wss-zwei) > :is(.bsp-detail, .wss-detail), :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.av-ue, .av-raum, .pj-detail), :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.bk-m-kopf, .bp-m-kopf), :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite .bs-raster > .bs-detail { padding-left: var(--wbm-rand) !important; } /* Agenten-Chat: Nachrichten beginnen am selben Rand und auf derselben Höhe wie die Mitte der übrigen Seiten */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #appShell.wbm-seite main.chat { padding-left: var(--wbm-rand) !important; padding-top: 0 !important; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #appShell.wbm-seite .chat-messages { padding-top: 0 !important; } /* Mitte rechts: kein Innenrand, Abstand zur Trennlinie nur über --wbm-luft */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.bsp-seite, .wss-zwei) > :is(.bsp-detail, .wss-detail), :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.av-ue, .av-mitte, .pj-detail, .bk-m-kopf, .bk-m-zusatz, .bp-m-kopf) { padding-right: 0 !important; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite .bk-m-zusatz { padding-left: var(--wbm-rand) !important; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.bsp-seite, .wss-zwei, .av-z, .pj, .zl-wss, .f3, .ap-seite, .bk-m, .bp-m) { column-gap: var(--wbm-luft) !important; } /* Agenten-Fenster: Spalte rechts mit denselben vier Abständen (Gespräch füllt bis zur Trennlinie) */ } @media (min-width: 1000px) { :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat:not(.wb-menue-offen) #appShell.wbm-seite { padding-left: var(--wbm-links) !important; padding-right: 0 !important; column-gap: var(--wbm-luft) !important; grid-template-columns: minmax(0, 1fr) var(--bsp-b, 224px) !important; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat:not(.wb-menue-offen) #appShell > #convSidebar { margin: 0 !important; padding: 0 !important; } :root.wb-menue-modus.wb-menue-flaeche.ws-bento-chat:not(.wb-menue-offen) #appShell.wbm-seite main.chat { padding-right: 0 !important; max-width: none !important; } } @media (min-width: 901px) { /* Keine Rundung an Seiten-Hüllen mit overflow:hidden – sie schnitt die erste Zeile an der Ecke ab (Aufgaben: „S“ von „Sonntag“) */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.bs-raster, .bs-liste, .bs-karte, .av, .av-mitte, .av-ue, .f3, .ap, .pj, .bk-m, .bp-m, .bz-seite, .bsp-seite, .wss, .zl-wss) { border-radius: 0 !important; } /* oben: keine Seiten-eigenen Innenabstände, keine Ausgleichs-Ränder – Mitte und Spalte beginnen beide bei --wbm-start */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .wbm-seite :is(.f3, .ap, .bz-seite, .ab-mitte, .ab-spalte, .ap-mitte, .bsp-seite, .bsp-detail, .bp-m, .bk-m) { padding-top: 0 !important; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #bsBereich.wbm-seite .bs-liste { margin-top: 0 !important; } :root.wb-menue-modus.wb-menue-flaeche .wss.bp-m { margin-top: 0; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) #bsBereich[data-bereich="einstellungen"].wbm-seite { row-gap: 0; } /* leere Zeilen (Werkzeug/Kopf/Pillen) schoben die Spalte 30 px nach unten */ /* Kalender und Gantt-Planer: Werkzeugleiste gehört nur zur Mitte, die Spalte läuft rechts über die ganze Höhe */ :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m, .bp-m) { display: grid; grid-template-columns: minmax(0, 1fr) var(--bsp-b, 224px); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 24px; row-gap: 0; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m-kopf, .bp-m-kopf, .bk-m-zusatz) { margin-bottom: 12px; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m, .bp-m):has(> .bp-m-solo) { grid-template-columns: minmax(0, 1fr); } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m-seite, .bp-m-seite) { display: contents; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m-kopf, .bp-m-kopf) { grid-column: 1; grid-row: 1; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .bk-m-zusatz { grid-column: 1; grid-row: 2; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m-mitte, .bp-m-mitte) { grid-column: 1; grid-row: 3; padding-top: 0; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) :is(.bk-m-haupt, .bp-m-sp) { grid-column: 2; grid-row: 1 / -1; } :root.wb-menue-modus.wb-menue-flaeche:not(.wb-menue-offen) .bp-m:has(> .bp-m-solo) > .bp-m-mitte { grid-column: 1; } } /* Präsentationen (Seite im Rahmen, Ralph 08.11.2026): der Rahmen trug rechts eine stehende Trennlinie (border-right) – ohne Spalte gibt es keine */ :root.wb-menue-modus .sidebar-secondary:has(> .sidebar-secondary-body > #praesentationenFrame) { border-right: 0; }