/* ============================================================================
qs-theme-v2.css — Token-Map für das umschaltbare V2-Design (Redesign 2026)
----------------------------------------------------------------------------
Einbindung NACH qs-theme.css in admin.html / bpmn-live.html / team-modeling.html:
Umschalten wie gehabt über data-theme auf :
'v2' → dunkles V2 (Basis: bestehendes Dark)
'v2-light' → helles V2 (Basis: bestehendes Light)
Bestehende Werte 'dark' / 'light' bleiben unverändert → jederzeit rückschaltbar.
In shared.js nur die Theme-Liste erweitern; der frühe Inline-Setter in den
HTML-Köpfen ('quiz-theme' → data-theme) funktioniert unverändert.
PRINZIP DER MAP
1) Die --qs-* Basis-Tokens (Flächen/Text/Rahmen) werden ÜBERNOMMEN — das
Redesign nutzt bewusst dieselbe Palette (Panelstufen, Sky-Akzent,
Semantikfarben). Wo V2 abweicht, steht "GEÄNDERT" mit alt → neu.
2) V2 ERGÄNZT Komponenten-Tokens (--qs2-*), die es bisher nicht gab:
Radien, Fenster-Chrome, Menü-Anatomie, Gruppen-Farben, Badges,
Segmented Controls, Banner. Module greifen sie schrittweise ab —
mit Fallback auf die alten Tokens, solange ein Modul nicht migriert ist.
============================================================================ */
/* ---------------------------------------------------------------- V2 DARK -- */
:root[data-theme="v2"] {
/* ---- Basis: identisch zum bestehenden Dark (übernommen) ---- */
--qs-bg: #0b0e12;
--qs-panel: #1a1d22;
--qs-panel-2: #15181d;
--qs-panel-3: #0f1115;
--qs-header: #1a1d22;
--qs-border: #333a44;
--qs-border-soft: #2a2e36;
--qs-text: #e8eaed;
--qs-text-dim: #b8bdc6;
--qs-text-mute: #8a909a;
--qs-accent: #7dd3fc;
--qs-on-accent: #0b0e12;
--qs-accent-strong: #38bdf8;
--qs-input-bg: #0f1115;
--qs-input-border: #3a4150;
--qs-row-flash: #2b5d34;
--qs-overlay-scrim: rgba(0, 0, 0, 0.6);
--qs-amber: #fbbf24; --qs-amber-soft: #fde68a; --qs-amber-bg: #1a1810;
--qs-blue: #3b82f6; --qs-blue-soft: #60a5fa;
--qs-green: #86efac; --qs-green-bg: #0a2e1e;
--qs-orange: #fb923c; --qs-purple: #c084fc;
--qs-red: #f8b4b4; --qs-red-soft: #fca5a5;
--qs-xml-sel: rgba(30,58,138,0.30); --qs-xml-sel-2: rgba(30,58,138,0.22);
/* ---- GEÄNDERT gegenüber Dark ---- */
--qs-shadow: rgba(0, 0, 0, 0.55); /* alt 0.45 → Fenster heben sich stärker vom Canvas ab */
/* ---- NEU: Geometrie ---- */
--qs2-radius-win: 10px; /* Werkzeug-Fenster, Menüs */
--qs2-radius-modal: 12px; /* Modals, kleine Dialoge */
--qs2-radius-item: 6px; /* Menüzeilen, Buttons, Inputs */
--qs2-radius-pill: 999px; /* Badges, Chips */
/* ---- NEU: Fenster-Chrome (ein Chrome für alle attach*-Fenster) ---- */
--qs2-win-head-bg: #0f1115; /* Kopf = Griff (dunkler als Body) */
--qs2-win-head-border: #2a2e36;
--qs2-win-body-bg: #1a1d22;
--qs2-win-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.6);
--qs2-win-icon: var(--qs-accent); /* Icon im Kopf immer akzentfarben */
--qs2-win-context: var(--qs-text-mute); /* "· Gateway ..." Kontext-Text */
/* ---- NEU: Menü-Anatomie (bl-dropmenu V2) ---- */
--qs2-menu-bg: #1a1d22;
--qs2-menu-item-hover: #23272e;
--qs2-menu-item-active: #23272e; /* aktive/gedrückte Zeile */
--qs2-menu-status-col: 14px; /* feste Status-Spalte: ✓ / ● */
--qs2-menu-type: #5a626e; /* Typ-Spalte "Fenster ↗ / an-aus" */
--qs2-menu-check: var(--qs-accent); /* ✓ an/aus-Toggles */
--qs2-menu-open-dot: var(--qs-accent); /* ● Fenster-offen-Marker */
/* ---- NEU: Gruppen-Header-Farben (Werkzeuge-/Datei-Menü) ---- */
--qs2-grp-inspect: var(--qs-accent); /* Inspektoren + Simulation */
--qs2-grp-analysis: var(--qs-amber); /* Simulation-Analyse / Server-Zone */
--qs2-grp-structure: var(--qs-purple); /* BPMN-Struktur */
--qs2-grp-process: var(--qs-orange); /* Prozessanalyse */
--qs2-grp-export: var(--qs-purple); /* Export/Reporte (lila — gruen ist der Gruppenordner) */
--qs2-grp-neutral: var(--qs-text-mute); /* Referenzen u. ä. */
/* ---- NEU: Badges & Pills ---- */
--qs2-badge-border: #3a4150; /* Stufen-Badge "ab Analytiker" */
--qs2-badge-text: var(--qs-text-mute);
--qs2-badge-admin-bg: rgba(251, 191, 36, 0.15);
--qs2-badge-admin-text: var(--qs-amber);
--qs2-badge-draft-bg: rgba(251, 191, 36, 0.15); /* "geändert" im Picker */
--qs2-badge-draft-text: var(--qs-amber);
/* ---- NEU: Admin-Zone (Datei-Menü rechte Spalte) ---- */
--qs2-adminzone-bg: rgba(251, 191, 36, 0.04);
--qs2-adminzone-border: rgba(251, 191, 36, 0.18);
/* ---- NEU: Segmented Control (Kommentare, Alle⇄Element, Vorschlag⇄Autonom) ---- */
--qs2-seg-bg: #0f1115;
--qs2-seg-border: #3a4150;
--qs2-seg-active-bg: var(--qs-accent);
--qs2-seg-active-text: #0b0e12; /* dunkle Schrift auf Sky */
--qs2-seg-idle-text: var(--qs-text-mute);
/* ---- NEU: Primär-/Destruktiv-Buttons ---- */
--qs2-btn-primary-bg: var(--qs-accent);
--qs2-btn-primary-text: #0b0e12;
--qs2-btn-danger-bg: #ef4444;
--qs2-btn-danger-text: #ffffff;
/* ---- NEU: Sperr-/Hinweis-Banner (einheitlich in allen Fenstern) ---- */
--qs2-banner-lock-bg: rgba(251, 191, 36, 0.12);
--qs2-banner-lock-border: rgba(251, 191, 36, 0.5);
--qs2-banner-lock-text: var(--qs-amber);
/* ---- NEU: Wert-Änderungs-Puls (FEEL-Viewer, statt --qs-row-flash-Zeile) ---- */
--qs2-val-changed: var(--qs-orange);
--qs2-val-changed-bg: rgba(251, 146, 60, 0.12);
/* ---- NEU: Chat (KI-Assistent) ---- */
--qs2-chat-user-bg: color-mix(in srgb, var(--qs-accent) 16%, #1e232b);
--qs2-chat-ai-bg: color-mix(in srgb, var(--qs-purple) 7%, #1a1d22);
--qs2-chat-ai-border: #2a2e36;
--qs2-chat-meta: #5a626e; /* "Claude Sonnet · 2,1 s · ..." */
}
/* --------------------------------------------------------------- V2 LIGHT -- */
:root[data-theme="v2-light"] {
/* ---- Basis: identisch zum bestehenden Light (übernommen) ---- */
--qs-bg: #f4f4f1;
--qs-panel: #ffffff;
--qs-panel-2: #f8f8f5;
--qs-panel-3: #f0efeb;
--qs-header: #ffffff;
--qs-border: #d7d5ce;
--qs-border-soft: #ebe9e4;
--qs-text: #1e2530;
--qs-text-dim: #46505e;
--qs-text-mute: #6b7480;
--qs-accent: #0c7bbd;
--qs-on-accent: #ffffff;
--qs-accent-strong: #075985;
--qs-input-bg: #ffffff;
--qs-input-border: #d9d4ca;
--qs-row-flash: #bbf7d0;
--qs-overlay-scrim: rgba(40, 33, 22, 0.32);
--qs-amber: #b45309; --qs-amber-soft: #92400e; --qs-amber-bg: #fef3c7;
--qs-blue: #1d4ed8; --qs-blue-soft: #2563eb;
--qs-green: #15803d; --qs-green-bg: #dcfce7;
--qs-orange: #c2410c; --qs-purple: #7c3aed;
--qs-red: #b91c1c; --qs-red-soft: #dc2626;
--qs-xml-sel: rgba(59,130,246,0.12); --qs-xml-sel-2: rgba(59,130,246,0.18);
/* ---- GEÄNDERT gegenüber Light ---- */
--qs-shadow: rgba(30, 37, 48, 0.22); /* alt rgba(40,33,22,.16) → kühler, etwas präsenter */
/* ---- NEU: Geometrie (identisch zu V2 Dark) ---- */
--qs2-radius-win: 10px;
--qs2-radius-modal: 12px;
--qs2-radius-item: 6px;
--qs2-radius-pill: 999px;
/* ---- NEU: Fenster-Chrome ---- */
--qs2-win-head-bg: #f4f4f1;
--qs2-win-head-border: #e3e1da;
--qs2-win-body-bg: #ffffff;
--qs2-win-shadow: 0 20px 44px -18px rgba(30, 37, 48, 0.35);
--qs2-win-icon: var(--qs-accent);
--qs2-win-context: var(--qs-text-mute);
/* ---- NEU: Menü-Anatomie ---- */
--qs2-menu-bg: #ffffff;
--qs2-menu-item-hover: #f4f4f1;
--qs2-menu-item-active: #eef4f8; /* hell-blau getönte aktive Zeile */
--qs2-menu-status-col: 14px;
--qs2-menu-type: #9aa0a8;
--qs2-menu-check: var(--qs-accent);
--qs2-menu-open-dot: var(--qs-accent);
/* ---- NEU: Gruppen-Header-Farben (nutzen die dunkleren Light-Semantiktöne) ---- */
--qs2-grp-inspect: var(--qs-accent);
--qs2-grp-analysis: var(--qs-amber); /* #b45309 */
--qs2-grp-structure: var(--qs-purple); /* #7c3aed */
--qs2-grp-process: var(--qs-orange); /* #c2410c */
--qs2-grp-export: var(--qs-purple); /* Export/Reporte (lila, s. Dark-Block) */
--qs2-grp-neutral: var(--qs-text-mute);
/* ---- NEU: Badges & Pills ---- */
--qs2-badge-border: #d7d5ce;
--qs2-badge-text: var(--qs-text-mute);
--qs2-badge-admin-bg: rgba(180, 83, 9, 0.12);
--qs2-badge-admin-text: var(--qs-amber);
--qs2-badge-draft-bg: rgba(180, 83, 9, 0.12);
--qs2-badge-draft-text: var(--qs-amber);
/* ---- NEU: Admin-Zone ---- */
--qs2-adminzone-bg: rgba(180, 83, 9, 0.04);
--qs2-adminzone-border: rgba(180, 83, 9, 0.22);
/* ---- NEU: Segmented Control ---- */
--qs2-seg-bg: #f4f4f1;
--qs2-seg-border: #c9c6bd;
--qs2-seg-active-bg: var(--qs-accent);
--qs2-seg-active-text: #ffffff; /* weiße Schrift auf kräftigem Blau */
--qs2-seg-idle-text: var(--qs-text-mute);
/* ---- NEU: Buttons ---- */
--qs2-btn-primary-bg: var(--qs-accent);
--qs2-btn-primary-text: #ffffff;
--qs2-btn-danger-bg: #dc2626;
--qs2-btn-danger-text: #ffffff;
/* ---- NEU: Banner ---- */
--qs2-banner-lock-bg: rgba(180, 83, 9, 0.10);
--qs2-banner-lock-border: rgba(180, 83, 9, 0.45);
--qs2-banner-lock-text: var(--qs-amber);
/* ---- NEU: Wert-Änderungs-Puls ---- */
--qs2-val-changed: var(--qs-orange);
--qs2-val-changed-bg: rgba(194, 65, 12, 0.10);
/* ---- NEU: Chat ---- */
--qs2-chat-user-bg: color-mix(in srgb, var(--qs-accent) 13%, #ffffff);
--qs2-chat-ai-bg: color-mix(in srgb, var(--qs-purple) 6%, #ffffff);
--qs2-chat-ai-border: #e3e1da;
--qs2-chat-meta: #9aa0a8;
}
/* ============================================================================
STRUKTUR-LAYER (Ebene 2) — Opt-in über body.ui-v2, nur unter V2-Themes aktiv.
Legt die neue Menü-Anatomie über die BESTEHENDEN Klassen aus bpmn-live.html
(.bl-dropmenu, .lbl, .bl-chk, aria-pressed) — keine JS-Änderung nötig.
Struktur-Umbauten (2 Spalten, Typ-Spalte, Tabs) folgen modulweise per Markup.
============================================================================ */
/* Gilt für Studio- UND Team-Menüs sowie das Pill-Popover (User-Menü) —
Nutzer-Befund 2026-08-01: die Regel deckte nur .bl-dropmenu, die Team-
Dropmenüs hatten im V2 KEINEN Schatten und das Pill-Popover wich mit
Radius 8/eigenem Schatten/Padding 12 ab (gemessen). #tm-name-pop braucht
den ID-Selektor, damit die Theme-Regel seine eigene ID-Regel schlägt. */
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu,
:root[data-theme="v2"] body.ui-v2 .tm-dropmenu,
:root[data-theme="v2-light"] body.ui-v2 .tm-dropmenu,
:root[data-theme="v2"] body.ui-v2 #tm-name-pop,
:root[data-theme="v2-light"] body.ui-v2 #tm-name-pop {
background: var(--qs2-menu-bg);
border-radius: var(--qs2-radius-win);
box-shadow: var(--qs2-win-shadow);
padding: 8px;
}
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu button.bl,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu button.bl {
border-radius: var(--qs2-radius-item);
padding: 6px 8px;
}
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu button.bl:hover,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu button.bl:hover {
background: var(--qs2-menu-item-hover);
}
/* Status-Spalte: feste Breite → nichts springt beim Zustandswechsel */
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu button.bl.bl-chk::before,
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu button.bl[aria-pressed="true"]:not(.bl-chk)::before,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu button.bl.bl-chk::before,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu button.bl[aria-pressed="true"]:not(.bl-chk)::before {
width: var(--qs2-menu-status-col);
color: var(--qs2-menu-check);
}
/* Gruppen-Header: Farbe je Gruppe über data-grp am .lbl (im Markup ergänzen:
…) — ohne Attribut: Akzent wie bisher. */
:root[data-theme="v2"] body.ui-v2 .bl-dropmenu .lbl,
:root[data-theme="v2-light"] body.ui-v2 .bl-dropmenu .lbl { color: var(--qs2-grp-inspect); font-weight: 600; }
body.ui-v2 .bl-dropmenu .lbl[data-grp="analysis"] { color: var(--qs2-grp-analysis) !important; }
body.ui-v2 .bl-dropmenu .lbl[data-grp="structure"] { color: var(--qs2-grp-structure) !important; }
body.ui-v2 .bl-dropmenu .lbl[data-grp="process"] { color: var(--qs2-grp-process) !important; }
body.ui-v2 .bl-dropmenu .lbl[data-grp="export"] { color: var(--qs2-grp-export) !important; }
body.ui-v2 .bl-dropmenu .lbl[data-grp="neutral"] { color: var(--qs2-grp-neutral) !important; }
/* ============================================================================
STRUKTUR-LAYER Phase 2 — Menü-Anatomie (Werkzeuge-/Datei-Menü bpmn-live).
DOM bleibt FLACH (qsMakeCollapsibleMenu: Collapse + Hover-Peek arbeiten auf
Header+Folge-Items) — Spalten/Chips entstehen rein per CSS + Klassen-Tags.
============================================================================ */
/* Typ-Spalte rechts: „Fenster ↗" / „an/aus" — nur im V2 sichtbar. */
.bl-dropmenu .bl-type { display: none; }
body.ui-v2 .bl-dropmenu button.bl { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; }
body.ui-v2 .bl-dropmenu .bl-type {
display: inline-block; margin-left: auto; flex: 0 0 auto;
font-size: .68rem; color: var(--qs2-menu-type, var(--qs-text-mute));
}
/* Werkzeuge-Menü 2-spaltig: Spalte 1 = Inspektoren+Simulation, Spalte 2 = Rest
(.bl-col2-Tags). dense packt Spalte 2 ab Zeile 1; Reihenfolge je Spalte = DOM. */
/* NUR im offenen Zustand als Grid — display:grid ohne .open überstimmte das
Basis-display:none und das Menü blieb dauerhaft sichtbar. */
body.ui-v2 #bl-tools-menu.open {
display: grid; grid-auto-flow: row dense;
/* 3 Spalten (Nutzer-Abstimmung): [Inspektoren+Simulation | Analyse+
Struktur | Prozessanalyse+Referenzen]. minmax(0,…) laesst leere
Spalten (z.B. gesperrte Personas) kollabieren. Breite aus dem Inhalt. */
grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content);
column-gap: 12px; width: max-content; max-width: 92vw;
}
body.ui-v2 #bl-tools-menu > *:not(.bl-col2):not(.bl-col3) { grid-column: 1; }
body.ui-v2 #bl-tools-menu > .bl-col2 { grid-column: 2; }
body.ui-v2 #bl-tools-menu > .bl-col3 { grid-column: 3; }
/* Referenzen als Chip-Reihe: die 3 Buttons bleiben eigenständige Menü-Items
(Collapse/Flyout unberührt), sitzen im V2 aber nebeneinander als Chips. */
body.ui-v2 #bl-tl-bpmnref, body.ui-v2 #bl-tl-dmnref, body.ui-v2 #bl-tl-feelref {
display: inline-flex; width: auto; border: 1px solid var(--qs-border-soft);
border-radius: var(--qs2-radius-pill); padding: 3px 10px; margin: 2px 4px 2px 0;
}
body.ui-v2 #bl-tl-bpmnref .bl-type, body.ui-v2 #bl-tl-dmnref .bl-type,
body.ui-v2 #bl-tl-feelref .bl-type { display: none; }
/* Stufen-Badge am Gruppen-Header statt Kommentarlos-Verstecken (Sichtbarkeit
der Badges greift, sobald die Gruppe sichtbar ist; das Dimmen statt
display:none folgt in einem eigenen Schritt — Leitplanke: fixierte
Nur-Lese-Stufen verstecken weiterhin). */
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-analyst::after,
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-digitizer::after,
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-champion::after {
font-size: .62rem; font-weight: 600; margin-left: 8px; padding: 1px 7px;
border: 1px solid var(--qs2-badge-border); border-radius: var(--qs2-radius-pill);
color: var(--qs2-badge-text); vertical-align: 1px;
}
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-analyst::after { content: 'ab Analytiker'; }
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-digitizer::after { content: 'ab Digitalisierer'; }
body.ui-v2 .bl-dropmenu .lbl.bl-lvl-champion::after { content: 'ab Champion'; }
/* (Das frühere ::after-Admin-Badge an .lbl[data-grp="admin"] ist durch die
PHYSISCHE .bl-admin-pill/.tm-admin-pill ersetzt — eine Quelle, Studio+Team
identisch; die Kopf-Farbe kommt aus data-area="library" = amber.) */
/* Dimmen statt Verstecken (V2): unterhalb der SELBSTGEWÄHLTEN Stufe bleiben
Menü-Gruppen sichtbar, aber gedimmt + inaktiv — man SIEHT, was es noch gibt
(Badges „ab …" erklären die Stufe). Fixierte Nur-Lese-Stufen
(body.persona-locked) verstecken weiterhin: Kursleiter reduzieren bewusst.
NUTZERSCHALTER (⚙ Einstellungen → „Gesperrte Funktionen", 2026-07-31):
body.qs-locked-hide schaltet das Dimmen ab — alle Dimm-Selektoren tragen
:not(.qs-locked-hide), dann greift wieder das Basis-display:none der Seiten.
Gesetzt von qs-settings-menu.js (localStorage qs-locked-display, Default dim). */
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu button.bl-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu button.bl-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .bl-dropmenu button.bl-lvl-digitizer,
/* CHAMPION fehlte in ALLEN Dimm-Regeln (Nutzer-Befund 2026-07-31 „Monte-Carlo
& Co. werden komplett ausgeblendet, anderes ausgegraut"): der Champion-Ausbau
kam NACH der Dimm-Leitlinie, die Selektoren endeten bei Digitizer → die
champion-gegateten Einträge fielen aufs Basis-display:none zurück. */
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu button.bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .bl-dropmenu button.bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .bl-dropmenu button.bl-lvl-champion {
display: flex !important; opacity: .45; pointer-events: none;
}
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu .lbl.bl-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu .lbl.bl-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .bl-dropmenu .lbl.bl-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .bl-dropmenu .lbl.bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .bl-dropmenu .lbl.bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .bl-dropmenu .lbl.bl-lvl-champion {
display: block !important; opacity: .6;
}
/* Team: Stufe DIMMT ebenfalls (Konsistenz zum Studio; vorher versteckte die
Team-Seite persona-gegatete Eintraege komplett). Gesperrte Nur-Lese-
Personas (persona-locked) verstecken weiterhin — Kursleiter reduzieren
bewusst. */
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-mi.tm-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-mi.tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .tm-dropmenu .tm-mi.tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-mi.tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .tm-dropmenu .tm-mi.tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .tm-dropmenu .tm-mi.tm-lvl-champion {
display: flex !important; opacity: .45; pointer-events: none;
}
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-sec.tm-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-sec.tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .tm-dropmenu .tm-sec.tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .tm-dropmenu .tm-sec.tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .tm-dropmenu .tm-sec.tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .tm-dropmenu .tm-sec.tm-lvl-champion {
/* KEIN pointer-events:none am KOPF: gedimmte Sektionen bleiben ein-/
ausklappbar und hover-peekbar (Nutzer-Befund: Menü mit komplett
gedimmten Einträgen liess sich nicht zuklappen). Die EINTRÄGE
bleiben inaktiv (Regel oben). */
display: block !important; opacity: .6;
}
/* (4b) Hover-Peek-Flyout: gedimmte Stufen-Einträge erscheinen dort EBENFALLS
gedimmt und sind NICHT auslösbar (die Klone hängen ausserhalb des Menüs —
ohne diese Regeln hätte die globale Persona-Versteckregel sie entfernt
bzw. wären sie voll klickbar gewesen). */
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .bl-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .bl-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .qs-sec-flyout .bl-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .tm-lvl-analyst,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .qs-sec-flyout .tm-lvl-digitizer,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .qs-sec-flyout .bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .qs-sec-flyout .bl-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-sec-flyout .tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .qs-sec-flyout .tm-lvl-champion,
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .qs-sec-flyout .tm-lvl-champion {
display: flex !important; opacity: .45; pointer-events: none;
}
/* ROLLE schlaegt STUFE (Nutzer-Abstimmung): admin-/moderator-/schreib-/
raum-gebundene Eintraege werden vom Stufen-Dimmen NIE sichtbar gemacht —
das Dimmen zeigt, was die eigene STUFE spaeter freischaltet, nicht was
eine andere ROLLE hat. ID-Scope gewinnt gegen jede Dim-Spezifitaet. */
body.ui-v2:not(.is-admin) #bl-tools-menu .admin-only,
body.ui-v2:not(.is-admin) #bl-file-menu .admin-only,
body.ui-v2:not(.is-admin) #bl-dmn-file-menu .admin-only,
body.ui-v2:not(.is-admin) #bl-account-menu .admin-only { display: none !important; }
body.ui-v2:not(.tm-is-admin) #tm-tools-menu .tm-admin-only,
body.ui-v2:not(.tm-is-admin) #tm-file-menu .tm-admin-only { display: none !important; }
body.ui-v2:not(.tm-is-admin):not(.tm-is-mod) #tm-tools-menu .tm-mod-only,
body.ui-v2:not(.tm-is-admin):not(.tm-is-mod) #tm-file-menu .tm-mod-only { display: none !important; }
body.ui-v2.tm-is-viewer #tm-tools-menu .tm-write,
body.ui-v2.tm-is-viewer #tm-file-menu .tm-write { display: none !important; }
body.ui-v2:not(.tm-in-room) #tm-tools-menu .tm-in-room,
body.ui-v2:not(.tm-in-room) #tm-file-menu .tm-in-room { display: none !important; }
/* Kommentare als Segmented Control (V2): ersetzt den 3-Stufen-Zyklus-Knopf —
ruft intern weiter commentsCycleTo('off'|'view'|'edit'). Klassisch: unsichtbar. */
body:not(.ui-v2) .bl-dropmenu .bl-seg { display: none !important; }
body.ui-v2 .bl-dropmenu .bl-seg {
display: flex; align-items: center; gap: 4px; padding: 4px 8px;
}
body.ui-v2 .bl-dropmenu .bl-seg .bl-seg-lbl { font-size: .8rem; margin-right: 4px; color: var(--qs-text); }
body.ui-v2 .bl-dropmenu .bl-seg .bl-seg-opt {
font: inherit; font-size: .72rem; cursor: pointer; padding: 3px 9px;
border: 1px solid var(--qs2-seg-border, var(--qs-border-soft));
background: var(--qs2-seg-bg, transparent); color: var(--qs-text-dim);
border-radius: var(--qs2-radius-item);
}
body.ui-v2 .bl-dropmenu .bl-seg .bl-seg-opt[aria-pressed="true"] {
background: var(--qs2-seg-active-bg, var(--qs-accent)); color: var(--qs2-seg-active-text, #0b0e12);
border-color: var(--qs2-seg-active-bg, var(--qs-accent));
}
body.ui-v2 .bl-dropmenu #bl-tl-comments { display: none !important; }
/* Referenzen als echte Chip-REIHE: kontrollierter Wrapper .bl-refrow — im
Klassisch per display:contents layout-transparent (sieht aus wie 3 Zeilen),
im V2 eine Flex-Reihe. Der Collapse-Enhancer kennt den Wrapper (itemSelector). */
body:not(.ui-v2) .bl-dropmenu .bl-refrow { display: contents; }
body.ui-v2 .bl-dropmenu .bl-refrow { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px; }
body.ui-v2 .bl-dropmenu .bl-refrow button.bl {
display: inline-flex !important; width: auto !important; min-width: 0 !important;
flex: 0 0 auto; border: 1px solid var(--qs-border-soft);
border-radius: var(--qs2-radius-pill); padding: 3px 10px; margin: 0;
}
body.ui-v2 .bl-dropmenu .bl-refrow .bl-type { display: none; }
/* Datei-Menü (V2): 2 Spalten NUR im offenen Zustand (Zustands-Kopplung!) —
Spalte 1 „Dieser Rechner" + Reporte, Spalte 2 Admin-Bibliothek (getönt). */
body.ui-v2 #bl-file-menu.open {
display: grid; grid-auto-flow: row dense;
grid-template-columns: minmax(180px, max-content) minmax(180px, max-content);
column-gap: 12px; width: max-content; max-width: 92vw;
}
body.ui-v2 #bl-file-menu.open > *:not(.bl-col2) { grid-column: 1; }
body.ui-v2 #bl-file-menu.open > .bl-col2 { grid-column: 2; }
/* Admin-Zone getönt (Funktion/Sichtbarkeit admin-only unverändert) */
body.ui-v2 #bl-file-menu button.bl.admin-only,
body.ui-v2 #bl-dmn-file-menu button.bl.admin-only {
background: var(--qs2-adminzone-bg, rgba(251,191,36,0.06));
}
body.ui-v2 #bl-file-menu button.bl.admin-only:hover,
body.ui-v2 #bl-dmn-file-menu button.bl.admin-only:hover {
background: var(--qs2-adminzone-hover, rgba(251,191,36,0.12));
}
/* ================================================================
LOGIN-CARD (Handoff Abschnitt 6) — der Erstkontakt eines Besuchers.
Anatomie der Vorlage: Brand-Zeile (Akzent-Quadrat + Produktname) ·
ein Satz Kontext · Eingabe (mono) + Primär-OK · Fehlerzeile ·
„Ohne Code fortfahren →" mit gedimmtem Hinweis. Klassisch: Brand-
Zeile + Hinweis bleiben versteckt, Rest unverändert.
================================================================ */
body:not(.ui-v2) .bl-login-brand,
body:not(.ui-v2) .bl-login-skiphint { display: none; }
body.ui-v2 #bl-login .card {
width: 380px; min-width: 0; box-sizing: border-box;
background: var(--qs-panel);
border: 1px solid var(--qs-border-soft);
border-radius: var(--qs2-radius-modal, 12px);
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6);
padding: 22px;
}
body.ui-v2 .bl-login-brand {
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 15px; color: var(--qs-text);
margin-bottom: 4px;
}
body.ui-v2 .bl-login-mark {
width: 24px; height: 24px; border-radius: 6px;
background: var(--qs-accent);
flex: 0 0 auto;
}
body.ui-v2 #bl-login h2 {
font-size: .92rem; font-weight: 600; margin: 6px 0 2px;
}
body.ui-v2 #bl-login p {
color: var(--qs-text-mute); font-size: 11.5px; line-height: 1.5;
margin: 0 0 14px;
}
body.ui-v2 #bl-login input {
font-family: ui-monospace, Menlo, monospace;
background: var(--qs-panel-3);
border: 1px solid var(--qs-input-border);
border-radius: 7px;
padding: 8px 11px;
color: var(--qs-text);
}
body.ui-v2 #bl-login input:focus { outline: none; border-color: var(--qs-accent); }
body.ui-v2 #bl-login #bl-login-go {
background: var(--qs-accent);
color: var(--qs2-btn-primary-text);
border: none; border-radius: 7px;
font-weight: 600; padding: 8px 18px;
}
body.ui-v2 #bl-login .err { color: var(--qs-red, #f8b4b4); font-size: 10.5px; }
body.ui-v2 #bl-login .skip { font-size: 11.5px; }
body.ui-v2 #bl-login .skip a { color: var(--qs-accent); cursor: pointer; }
body.ui-v2 .bl-login-skiphint { color: var(--qs-text-mute); }
/* ================================================================
MENÜ-SPALTEN SIND UNABHÄNGIG (Nutzer-Befund 2026-07-30)
Die Mehrspalten-Menüs (Werkzeuge/Datei in Team + Studio) sind CSS-Grids.
Ein Grid legt seine Einträge aber in GEMEINSAME ZEILEN über alle Spalten:
jede Zeile ist so hoch wie ihr höchstes Element, und `align-items: stretch`
(der Default) dehnt die übrigen Zellen darauf auf. Klappte man eine
Kategorie in Spalte 1 zu, rutschten deshalb ALLE Einträge der Spalten 2+3
nach — gemessen 17 Elemente um 8 px, und die Bereichsköpfe dort wuchsen um
8 px („Spacing unter der Bereichsüberschrift").
Zwei Zeilen lösen das:
· align-items/align-content: start → Zellen behalten ihre eigene Höhe
· grid-auto-rows: min-content → Zeilen wachsen nicht über den Inhalt
Die Spalten-Zuordnung (grid-column) bleibt unverändert.
================================================================ */
body.ui-v2 #tm-tools-menu.open,
body.ui-v2 #tm-file-menu.open,
body.ui-v2 #bl-tools-menu.open,
body.ui-v2 #bl-file-menu.open,
body.ui-v2 #bl-dmn-file-menu.open {
/* FLEX statt Grid: die Spalten sind seit 2026-07-30 echte Container
(.qs-menucol, gesetzt von _wrapMenuColumns in shared.js) und haben damit
KEINE gemeinsamen Zeilen mehr — eine zugeklappte Kategorie kann die
Nachbarspalten weder verschieben noch dehnen. */
display: flex !important;
align-items: flex-start;
}
body.ui-v2 .qs-menucol {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ================================================================
MENÜ-ZONEN — EIN generischer Mechanismus (2026-07-30, Nutzer-Wunsch):
Fläche + Rahmen aller Bereichs-Boxen kommen aus --qs2-zone-c; die
historischen Klassen sind nur noch FARB-ALIASE auf demselben System
(Markup unverändert):
…-zone-lib = Amber (Bibliothek/Camunda)
…-zone-exp = Export-Lila
…-zone-box = neutral (Werkzeuge-Menüs — ruhige Flächen, Farbe im Kopf)
…-zone-area = Farbe aus data-area (Datei-Menü-Bereiche, s.u.)
Struktur: Kopf trägt …-top (Rahmen oben + Rundung), letzter Eintrag
…-end (Rahmen unten + Rundung), alle dazwischen nur Seitenränder.
================================================================ */
body.ui-v2 [class*="-zone-lib"] { --qs2-zone-c: var(--qs-amber, #fbbf24); }
body.ui-v2 [class*="-zone-exp"] { --qs2-zone-c: var(--qs2-grp-export, #a78bfa); }
body.ui-v2 [class*="-zone-box"] { --qs2-zone-c: #8a909a; } /* neutral */
body.ui-v2 [class*="tm-zone-"],
body.ui-v2 [class*="bl-zone-"],
body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"],
body.ui-v2 .bl-dropmenu button.bl[class*="bl-zone-"] {
background: color-mix(in srgb, var(--qs2-zone-c, #8a909a) 5%, var(--qs-panel-2, #15181d));
border-left: 1px solid color-mix(in srgb, var(--qs2-zone-c, #8a909a) 22%, transparent);
border-right: 1px solid color-mix(in srgb, var(--qs2-zone-c, #8a909a) 22%, transparent);
}
body.ui-v2 [class*="tm-zone-"][class*="-top"],
body.ui-v2 [class*="bl-zone-"][class*="-top"] {
border-top: 1px solid color-mix(in srgb, var(--qs2-zone-c, #8a909a) 22%, transparent);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 4px;
padding-top: 7px !important;
}
/* Boden der Box. Zwei Anker, weil der statische letzte Eintrag (…-end im
Markup) rollen-/raum-/stufenbedingt VERSTECKT sein kann — dann riss die Box
unten auf (Nutzer-Befund 2026-07-30: „Gruppenordner" als Gast, dessen letzte
zwei Einträge tm-in-room tragen). `.qs-zone-last` setzt der geteilte
Menü-Enhancer (shared.js) beim Öffnen auf den letzten TATSÄCHLICH sichtbaren
Eintrag — unabhängig vom Versteck-Grund. */
body.ui-v2 [class*="tm-zone-"][class*="-end"],
body.ui-v2 [class*="bl-zone-"][class*="-end"],
body.ui-v2 [class*="tm-zone-"].qs-zone-last,
body.ui-v2 [class*="bl-zone-"].qs-zone-last {
border-bottom: 1px solid color-mix(in srgb, var(--qs2-zone-c, #8a909a) 22%, transparent);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
margin-bottom: 4px;
padding-bottom: 8px !important;
}
/* Trennlinie INNERHALB einer Sektion/Zone (Vorlage: vor den Sim-Spuren
bzw. zwischen Modell- und Spuren-Aktionen der Server-Zone) */
body.ui-v2 .bl-sep-above, body.ui-v2 .tm-sep-above {
border-top: 1px solid var(--qs-border-soft, #2a2e36);
margin-top: 4px; padding-top: 8px !important;
}
body.ui-v2 .bl-sep-above-amber, body.ui-v2 .tm-sep-above-amber {
/* KEIN margin: der Trenner sitzt IN einer Zonen-Box — ein Margin
unterbräche deren Seitenränder (Lücke in der Box). */
border-top: 1px solid rgba(251, 191, 36, .15);
padding-top: 8px !important;
}
/* …gleiche Regel generisch: JEDER Trenner in einer Zone ohne margin,
Farbe aus der Zone. */
body.ui-v2 [class*="tm-zone-"].tm-sep-above,
body.ui-v2 [class*="bl-zone-"].bl-sep-above {
margin-top: 0;
border-top-color: color-mix(in srgb, var(--qs2-zone-c, #8a909a) 15%, transparent);
}
/* Zonen-Einträge = EIN zusammenhängender Block: keine Einzel-Rundungen
(Rundung hat nur der BLOCK via -top/-end). !important: die theme-
gescopte Radius-Regel an button.bl ist spezifischer. */
body.ui-v2 .bl-dropmenu button.bl[class*="bl-zone-"],
body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"] {
border-radius: 0 !important;
}
/* Boden-Rundung. Die Selektoren tragen denselben Element-Anker (button.bl /
.tm-mi) wie die 0-Regel darüber — sonst gewinnt jene (höhere Spezifität)
und der letzte Eintrag blieb im Studio eckig (gemessen: bl-file-menu,
bl-tools-menu, bl-dmn-file-menu, r=0). */
body.ui-v2 .bl-dropmenu [class*="bl-zone-"][class*="-end"],
body.ui-v2 .tm-dropmenu [class*="tm-zone-"][class*="-end"],
body.ui-v2 .bl-dropmenu [class*="bl-zone-"].qs-zone-last,
body.ui-v2 .tm-dropmenu [class*="tm-zone-"].qs-zone-last,
body.ui-v2 .bl-dropmenu button.bl[class*="bl-zone-"][class*="-end"],
body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"][class*="-end"],
body.ui-v2 .bl-dropmenu button.bl[class*="bl-zone-"].qs-zone-last,
body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"].qs-zone-last {
border-radius: 0 0 8px 8px !important;
}
/* Tear-off-Fenster + Hover-Peek-Flyout (geteilter Menü-Enhancer, shared.js):
die KLONE tragen die Zonen-Klassen weiter (_syncClone kopiert className für
den Live-Spiegel) — die generischen [class*="tm-zone-"]-Regeln oben trafen
deshalb auch JEDE Fenster-Zeile: 1px-Seitenrahmen, getönter Grund, Boden-
Radius/-Margin am -end (Nutzer-Befund 2026-08-01 „Rahmen und Farben um jeden
Menüeintrag"). Im Fenster ist die SEKTION selbst der Rahmen — Einträge
liegen neutral auf der Fensterfläche. Trennlinien (tm-sep-above) bleiben. */
body.ui-v2 .qs-sec-win [class*="tm-zone-"],
body.ui-v2 .qs-sec-win [class*="bl-zone-"],
body.ui-v2 .qs-sec-flyout [class*="tm-zone-"],
body.ui-v2 .qs-sec-flyout [class*="bl-zone-"] {
background: transparent;
border-left: 0;
border-right: 0;
}
body.ui-v2 .qs-sec-win [class*="tm-zone-"][class*="-top"],
body.ui-v2 .qs-sec-win [class*="bl-zone-"][class*="-top"],
body.ui-v2 .qs-sec-flyout [class*="tm-zone-"][class*="-top"],
body.ui-v2 .qs-sec-flyout [class*="bl-zone-"][class*="-top"] {
border-top: 0;
margin-top: 0;
padding-top: 6px !important; /* !important: die Zonen-Regel nutzt es auch */
border-radius: 6px;
}
body.ui-v2 .qs-sec-win [class*="tm-zone-"][class*="-end"],
body.ui-v2 .qs-sec-win [class*="bl-zone-"][class*="-end"],
body.ui-v2 .qs-sec-win [class*="tm-zone-"].qs-zone-last,
body.ui-v2 .qs-sec-win [class*="bl-zone-"].qs-zone-last,
body.ui-v2 .qs-sec-flyout [class*="tm-zone-"][class*="-end"],
body.ui-v2 .qs-sec-flyout [class*="bl-zone-"][class*="-end"],
body.ui-v2 .qs-sec-flyout [class*="tm-zone-"].qs-zone-last,
body.ui-v2 .qs-sec-flyout [class*="bl-zone-"].qs-zone-last {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 6px !important;
border-radius: 6px !important; /* !important: die 0-0-8-8-Boden-Rundung der Zone */
}
/* Untersektions-Köpfe INNERHALB einer Zone (z.B. Camunda 8 → Export/Start):
kein margin-top — der 2px-Abstand der .tm-sec-Basisregel zerteilte die
Box in sichtbare Segmente (Nutzer-Meldung 2026-07-30). Der ZONEN-Deckel
(-top) behält seinen Abstand nach außen. */
body.ui-v2 .tm-dropmenu .tm-sec[class*="tm-zone-"]:not([class*="-top"]),
body.ui-v2 .bl-dropmenu .lbl[class*="bl-zone-"]:not([class*="-top"]) {
margin-top: 0;
}
/* EINGEKLAPPTE Sektion (oder eine, deren Einträge alle rollenbedingt fehlen):
der Kopf ist das einzig Sichtbare der Box → er schliesst sie selbst ab
(Boden-Rahmen + volle Rundung). `.qs-zone-last` am KOPF setzt der Enhancer,
wenn kein Eintrag der Zone sichtbar ist. */
body.ui-v2 [class*="tm-zone-"][class*="-top"].qs-sec-collapsed,
body.ui-v2 [class*="bl-zone-"][class*="-top"].qs-sec-collapsed,
body.ui-v2 [class*="tm-zone-"][class*="-top"].qs-zone-last,
body.ui-v2 [class*="bl-zone-"][class*="-top"].qs-zone-last {
border-bottom: 1px solid color-mix(in srgb, var(--qs2-zone-c, #8a909a) 22%, transparent);
border-radius: 8px;
margin-bottom: 4px;
padding-bottom: 6px !important;
}
/* (1b) EINKLAPPEN schlaegt DIMMEN: die Stufen-Dim-Regeln (display:flex
!important) ueberstimmten die Collapse-Klasse — gedimmte Eintraege
blieben beim Zuklappen stehen. ID-Scope gewinnt gegen jede Dim-Regel. */
body.ui-v2 #bl-tools-menu .qs-sec-item-collapsed,
body.ui-v2 #bl-file-menu .qs-sec-item-collapsed,
body.ui-v2 #bl-dmn-file-menu .qs-sec-item-collapsed,
body.ui-v2 #tm-tools-menu .qs-sec-item-collapsed,
body.ui-v2 #tm-file-menu .qs-sec-item-collapsed { display: none !important; }
/* Zonen-Fußnote (Vorlage: „Für Besucher unsichtbar — …") — nur V2 */
body.ui-v2 .qs-zone-note {
font-size: 10px; color: var(--qs-text-mute);
line-height: 1.4; padding: 4px 10px 6px;
}
body:not(.ui-v2) .qs-zone-note { display: none; }
/* Eintrags-Untertitel (Vorlage DMN: „Verknüpfen als…"-Hinweis) — nur V2.
Die Menü-Buttons sind flex-Reihen → der Untertitel bricht per
flex-basis:100% in eine EIGENE Zeile (eingerückt unter das Label). */
body.ui-v2 .bl-dropmenu button.bl:has(.qs-mi-sub),
body.ui-v2 .tm-dropmenu .tm-mi:has(.qs-mi-sub) { flex-wrap: wrap; }
body.ui-v2 .qs-mi-sub {
/* KEIN max-width: das würde die hypothetische Flex-Größe kappen →
der Span passt neben das Label und bricht NICHT um. basis 100%
erzwingt die eigene Zeile; langer Text bricht via white-space. */
display: block; flex-basis: 100%;
font-size: 9.5px; color: var(--qs-text-mute);
line-height: 1.35; margin: 1px 0 0 24px;
white-space: normal; text-align: left;
}
body:not(.ui-v2) .qs-mi-sub { display: none; }
/* Konto-Menü: Erfahrungsstufen als Radio-Karten (V2). Klassisch: unverändert
(Beschreibungen versteckt). aria-pressed = aktive Karte (Akzent-Rahmen). */
body:not(.ui-v2) .bl-dropmenu .bl-p-desc,
body:not(.ui-v2) .bl-dropmenu .bl-p-locknote { display: none !important; }
body.ui-v2 #bl-account-menu.open { width: 340px; box-sizing: border-box; }
body.ui-v2 #bl-account-menu .bl-persona-mi {
/* EINZEILIG (Nutzer-Wunsch): Name + kurze Beschreibung in EINER Reihe,
Beschreibung gedimmt rechts, bei Platznot mit Ellipsis. */
display: flex; align-items: baseline; gap: 8px;
white-space: nowrap; margin: 3px 0; padding: 6px 9px;
border: 1px solid var(--qs-border-soft); border-radius: var(--qs2-radius-item);
}
body.ui-v2 #bl-account-menu .bl-persona-mi[aria-pressed="true"] {
border-color: var(--qs-accent); background: var(--qs2-menu-item-active);
}
body.ui-v2 #bl-account-menu .bl-p-desc {
/* flex:1 + min-width:0 statt max-width:%: Prozent-max-width loest bei
width:max-content-Menues nicht auf → das Menue wuchs auf volle
Textbreite (Scroll-Befund). Ellipsis kuerzt jetzt die Beschreibung,
der Zaehler (.bl-p-count) bleibt immer sichtbar. */
display: block; flex: 1 1 auto; min-width: 0;
font-size: .68rem; color: var(--qs-text-mute);
margin: 0 0 0 8px; overflow: hidden; text-overflow: ellipsis;
text-align: right;
}
/* Team-Pill-Popover: 260px sind mit Zaehler zu eng → 340px im V2,
GLEICHE Breite wie das Studio-Konto-Menue (Nutzer-Befund: war schmaler) */
body.ui-v2 #tm-name-pop { width: 340px; }
body.ui-v2 #bl-account-menu .bl-p-count,
body.ui-v2 .tm-persona-mi .tm-p-count {
flex: 0 0 auto;
font-size: .65rem; color: var(--qs-text-mute);
white-space: nowrap;
}
body:not(.ui-v2) .bl-p-count,
body:not(.ui-v2) .tm-p-count { display: none; }
body.ui-v2 .bl-dropmenu .bl-p-locknote { display: none; }
body.ui-v2.persona-locked .bl-dropmenu .bl-p-locknote {
display: block; font-size: .72rem; padding: 6px 8px; margin: 2px 0 4px;
background: var(--qs2-banner-lock-bg); border: 1px solid var(--qs2-banner-lock-border);
border-radius: var(--qs2-radius-item); color: var(--qs2-banner-lock-text);
}
/* Chip-Labels ohne redundantes „-Referenz" (steht schon im Gruppen-Header) —
Klassisch behält die vollen Namen (Suffix nur im V2 versteckt). */
body.ui-v2 .bl-dropmenu .bl-refrow .bl-ref-suffix { display: none; }
/* Modell-Picker (geteiltes qs-file-picker): Such-Feld + „geändert"-Badge —
erscheinen nur bei Aufrufern, die search/isDraft setzen (Studio). Styles
theme-neutral über --qs-Tokens, funktionieren in Klassisch UND V2. */
body.ui-v2 .qs-fp-file.active::before { content:'●'; font-size:8px; line-height:1; flex:0 0 auto; }
body.ui-v2 .qs-fp-search { border-radius: 8px; }
/* ================================================================
Phase 3a — Einheitliches Fenster-Chrome (CSS-only)
Alle schwebenden Werkzeug-Fenster bekommen im V2 EIN Chrome:
Kopf = Griff (dunkler, --qs2-win-head-bg) · Titel 600 in Textfarbe ·
Icon akzentfarben · 10px-Radius · weicher Schatten. Kein JS-Umbau:
die Regeln überstimmen die self-injected Styles der Module; bei
.qs-pl-window (Inline-cssText) braucht es !important. Das CM-Plugin
lädt diese Datei nie → Bundle-Welt unberührt.
Familien: .qs-pl-window (Sim-Läufe/Ebenen/Trace/Follow) ·
.qs-watch-popup (FEEL-Viewer) · .qs-vars-popup (FEEL-Editor/Definitionen)
· .qs-simdisp (SIM-Einstellungen) · .qs-cm-popup (XML/Graphviz/Referenzen/
Kommentar-Popups) · .qs-dmn-popup (DMN-Viewer).
================================================================ */
body.ui-v2 .qs-pl-window,
body.ui-v2 .qs-watch-popup,
body.ui-v2 .qs-vars-popup,
body.ui-v2 .qs-simdisp,
body.ui-v2 .qs-cm-popup,
body.ui-v2 .qs-dmn-popup {
background: var(--qs2-win-body-bg) !important;
border: 1px solid var(--qs2-win-head-border) !important;
border-radius: var(--qs2-radius-win) !important;
box-shadow: var(--qs2-win-shadow) !important;
}
/* Kopf = Griff (cm-popup behält sein Padding/Negativ-Margin-Layout) */
body.ui-v2 .qs-pl-window > div:first-child,
body.ui-v2 .qs-watch-header,
body.ui-v2 .qs-vars-popup-header,
body.ui-v2 .qs-simdisp-head,
body.ui-v2 .qs-dmn-header {
background: var(--qs2-win-head-bg) !important;
border-bottom: 1px solid var(--qs2-win-head-border) !important;
padding: 8px 12px !important;
}
body.ui-v2 .qs-cm-popup-header {
background: var(--qs2-win-head-bg) !important;
border-bottom: 1px solid var(--qs2-win-head-border) !important;
border-radius: var(--qs2-radius-win) var(--qs2-radius-win) 0 0 !important;
color: var(--qs-text) !important;
font-weight: 600;
}
/* Titel: 600 in Textfarbe (statt Akzent/Amber/Lila), Icon trägt den Akzent */
body.ui-v2 .qs-pl-window > div:first-child > span:first-child,
body.ui-v2 .qs-watch-title,
body.ui-v2 .qs-vars-popup-title,
body.ui-v2 .qs-simdisp-title,
body.ui-v2 .qs-dmn-title {
color: var(--qs-text) !important;
font-weight: 600 !important;
font-size: 12px !important;
}
body.ui-v2 .qs-pl-window > div:first-child svg.ico,
body.ui-v2 .qs-watch-header svg.ico,
body.ui-v2 .qs-vars-popup-header svg.ico,
body.ui-v2 .qs-simdisp-head svg.ico,
body.ui-v2 .qs-cm-popup-header svg.ico,
body.ui-v2 .qs-dmn-header svg.ico {
color: var(--qs2-win-icon);
}
/* Schließen-Knöpfe: einheitliche Hover-Fläche */
body.ui-v2 .qs-watch-close,
body.ui-v2 .qs-vars-popup-close,
body.ui-v2 .qs-dmn-close,
body.ui-v2 .qs-simdisp-x {
border-radius: var(--qs2-radius-item);
}
body.ui-v2 .qs-watch-close:hover,
body.ui-v2 .qs-vars-popup-close:hover,
body.ui-v2 .qs-dmn-close:hover {
background: var(--qs-panel-2);
}
/* ================================================================
Phase 3b — Sperr-Banner einheitlich (Fenster-Read-only-Hinweise)
Alle drei Banner-Familien (.qs-vars-ro-note FEEL-Editor,
.qs-kpi-ro-note KPI-Analyse, #bl-comments-ro Kommentar-Fenster)
bekommen im V2 die --qs2-banner-lock-Tokens; !important, weil die
Module inline stylen. Dazu die „Simulation beenden"-Aktion als Link
(.qs-ro-action — wird nur unter body.ui-v2 überhaupt gerendert).
================================================================ */
body.ui-v2 .qs-vars-ro-note,
body.ui-v2 .qs-kpi-ro-note,
body.ui-v2 #bl-comments-ro {
background: var(--qs2-banner-lock-bg) !important;
border: 1px solid var(--qs2-banner-lock-border) !important;
color: var(--qs2-banner-lock-text) !important;
border-radius: var(--qs2-radius-item) !important;
font-size: 11px !important;
line-height: 1.45;
}
body.ui-v2 .qs-ro-action {
color: var(--qs2-banner-lock-text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
white-space: nowrap;
}
body.ui-v2 .qs-ro-action:hover { opacity: .8; }
/* ================================================================
Phase 3c — FEEL-Viewer-Details (qs-bpmn-watch-ui.js)
Pool-Zeilen: 7px-Farb-Chip statt 🏊-Emoji · Wert-Änderung als oranger
Puls am WERT statt blauem Zeilen-Flash · fremde Instanz-Werte mit
Hinweis „· andere Instanz" · Monospace-Zeitstempel in der History.
Markup rendert beide Varianten; hier wird nur umgeschaltet.
================================================================ */
body.ui-v2 .qs-watch-pool-emo { display: none; }
body.ui-v2 .qs-watch-pool-chip {
display: inline-block; width: 7px; height: 14px;
border-radius: 2px; margin-right: 7px; vertical-align: -2px;
}
body.ui-v2 .qs-watch-otherinst {
display: inline; color: var(--qs-text-mute); font-size: 9px; font-style: italic;
}
body.ui-v2 .qs-watch-row-flash { background: transparent !important; }
body.ui-v2 .qs-watch-row-flash .qs-watch-val {
animation: qs2-val-pulse 1.2s ease;
color: var(--qs2-val-changed);
border-radius: var(--qs2-radius-item);
}
@keyframes qs2-val-pulse {
0% { background: var(--qs2-val-changed-bg); }
100% { background: transparent; }
}
body.ui-v2 .qs-watch-hist-meta { font-family: ui-monospace, Menlo, monospace; }
/* ================================================================
Phase 3d — SIM-Einstellungen (qs-sim-display-panel.js)
Verhaltens-Schalter bekommen einen Wirkungs-Untertitel; die
Inspektoren-Zeilen sind Fenster-Öffner, keine Schalter → im V2
„Fenster ↗" + Status-Punkt statt Schiebeschalter. Das Modul
rendert beides, Klassisch/CM blendet die V2-Teile aus.
================================================================ */
body.ui-v2 .qs-simdisp-sub {
display: block; font-size: 10px; line-height: 1.35;
color: var(--qs-text-mute); margin-top: 1px;
}
body.ui-v2 .qs-simdisp-row { align-items: flex-start; }
body.ui-v2 .qs-simdisp-row .qs-simdisp-icon,
body.ui-v2 .qs-simdisp-row .qs-simdisp-sw { margin-top: 1px; }
/* Inspektoren: Fenster-Öffner statt Schalter */
body.ui-v2 .qs-simdisp-win .qs-simdisp-sw { display: none; }
body.ui-v2 .qs-simdisp-win .qs-simdisp-type {
display: inline; flex: 0 0 auto; font-size: 10px; color: var(--qs2-menu-type);
white-space: nowrap; margin-top: 1px;
}
/* offenes Fenster → Status-Punkt vor dem Label (Menü-Anatomie gespiegelt) */
body.ui-v2 .qs-simdisp-win.on .qs-simdisp-lbl::before {
content: '●'; font-size: 8px; color: var(--qs2-menu-check);
margin-right: 6px; vertical-align: 2px;
}
/* ================================================================
Phase 3e — KPI-Analyse als 3 Tabs (Setup · Läufe · Ergebnis)
Das Modul taggt jeden Abschnitt mit data-kpi-tab und hängt zuletzt
eine Tab-Leiste an. Klassisch bleibt EIN Scroll-Band (Leiste aus,
alle Gruppen sichtbar); im V2 zeigt CSS genau eine Gruppe.
================================================================ */
.qs-kpi-tabs { display: none; }
body.ui-v2 .qs-kpi-tabs {
display: flex; gap: 4px; order: -1; /* Leiste nach oben */
position: sticky; top: 0; z-index: 4;
padding: 7px 8px; margin-bottom: 2px;
background: var(--qs2-win-head-bg);
border-bottom: 1px solid var(--qs2-win-head-border);
}
body.ui-v2 .qs-kpi-tab {
flex: 1 1 0; padding: 5px 8px; font-size: 11px; font-weight: 600;
border-radius: var(--qs2-radius-item); cursor: pointer;
border: 1px solid transparent; background: transparent;
color: var(--qs-text-dim);
}
body.ui-v2 .qs-kpi-tab:hover:not(:disabled) { background: var(--qs2-menu-item-hover); }
body.ui-v2 .qs-kpi-tab[aria-pressed="true"] {
background: var(--qs2-menu-item-active);
border-color: var(--qs2-win-head-border);
color: var(--qs-text);
}
body.ui-v2 .qs-kpi-tab:disabled { opacity: .4; cursor: default; }
/* Genau eine Gruppe sichtbar. Der Body wird Flex, damit order:-1 greift.
OHNE Kind-Kombinator (>): das Tagging trifft auch verschachtelte Knoten
(z.B. Kacheln in einem Wrapper), die sonst durch das Raster fielen. */
body.ui-v2 .qs-kpi-body-tabs { display: flex; flex-direction: column; }
body.ui-v2 [data-kpi-active] [data-kpi-tab] { display: none !important; }
body.ui-v2 [data-kpi-active="setup"] [data-kpi-tab="setup"],
body.ui-v2 [data-kpi-active="runs"] [data-kpi-tab="runs"],
body.ui-v2 [data-kpi-active="result"] [data-kpi-tab="result"],
body.ui-v2 [data-kpi-active="mc"] [data-kpi-tab="mc"],
body.ui-v2 [data-kpi-active="ab"] [data-kpi-tab="ab"] { display: block !important; }
/* ================================================================
Phase 3f — FEEL-Editor (qs-bpmn-vars-ui.js)
Der Fokus („nur Definitionen des geklickten Elements") war bisher
nur an der Zeilen-Markierung erkennbar und ließ sich nicht bewusst
verlassen. Im V2 wird er sichtbar: Segmented „Alle ⇄ Element" +
Element-Banner mit Sprung ins Diagramm. Nur V2 (Modul rendert es
ausschließlich unter body.ui-v2) — Klassisch/CM unverändert.
================================================================ */
body.ui-v2 .qs-vars-focusbar { margin: 0 0 7px; }
body.ui-v2 .qs-vars-seg {
display: flex; gap: 2px; padding: 2px;
background: var(--qs2-seg-bg, var(--qs-panel-3));
border: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-item);
}
body.ui-v2 .qs-vars-seg-opt {
flex: 1 1 0; padding: 4px 8px; font-size: 11px; font-weight: 600;
border: none; background: transparent; color: var(--qs-text-dim);
border-radius: calc(var(--qs2-radius-item) - 2px); cursor: pointer;
}
body.ui-v2 .qs-vars-seg-opt:hover:not(:disabled):not([aria-pressed="true"]) {
background: var(--qs2-menu-item-hover); color: var(--qs-text);
}
body.ui-v2 .qs-vars-seg-opt[aria-pressed="true"] {
background: var(--qs2-menu-item-active); color: var(--qs-text);
box-shadow: 0 1px 2px var(--qs-shadow);
}
body.ui-v2 .qs-vars-seg-opt:disabled { opacity: .45; cursor: default; }
body.ui-v2 .qs-vars-elbanner {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 8px; padding: 5px 9px;
background: var(--qs2-menu-item-active);
border: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-item);
font-size: 11px;
}
body.ui-v2 .qs-vars-elbanner-name {
flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--qs-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.ui-v2 .qs-vars-elbanner-jump {
flex: 0 0 auto; color: var(--qs-accent); text-decoration: none; font-weight: 600;
}
body.ui-v2 .qs-vars-elbanner-jump:hover { text-decoration: underline; }
/* ================================================================
Phase 4 — Modals & kleine Dialoge
Feste Anatomie: Kopf (Icon akzent + Titel 600 + ✕) · Kontextsatz ·
getönte Fußleiste mit Status links, Ghost + Primär rechts.
BEWUSSTE ABWEICHUNG vom Handoff: die Zugänge-Codes bleiben KARTEN
(nicht die vorgeschlagene 5-Spalten-Tabelle) — eine Tabelle mit
Code·Ordner·Stufe·Gültig bis·✕ würde Moderator-Code, Raum-Modus,
Nur-Lese, Diskussion, „gültig ab" und den Ordner-Picker verlieren.
Funktions-/Info-Erhalt geht vor Design-Treue.
================================================================ */
body.ui-v2 #bl-access-modal > div,
body.ui-v2 #bl-conv-modal > div {
border-radius: var(--qs2-radius-modal);
border-color: var(--qs2-win-head-border);
box-shadow: var(--qs2-win-shadow);
padding: 0; /* Kopf/Body/Fuß tragen ihr eigenes Padding */
}
body.ui-v2 #bl-access-modal > div > div:first-child,
body.ui-v2 #bl-conv-modal > div > div:first-child {
padding: 14px 18px 12px;
background: var(--qs2-win-head-bg);
border-bottom: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-modal) var(--qs2-radius-modal) 0 0;
margin-bottom: 0;
}
body.ui-v2 #bl-access-modal h2 .ico,
body.ui-v2 #bl-conv-modal h2 .ico { color: var(--qs2-win-icon); }
/* Alles zwischen Kopf und Fuß bekommt den Innenabstand zurück */
body.ui-v2 #bl-access-modal > div > *:not(:first-child):not(:last-child),
body.ui-v2 #bl-conv-modal > div > *:not(:first-child):not(:last-child) {
margin-left: 18px; margin-right: 18px;
}
/* Getönte Fußleiste */
body.ui-v2 #bl-access-modal > div > div:last-child,
body.ui-v2 #bl-conv-modal > div > div:last-child {
margin-top: 16px !important; padding: 12px 18px;
background: var(--qs-panel-2);
border-top: 1px solid var(--qs2-win-head-border);
border-radius: 0 0 var(--qs2-radius-modal) var(--qs2-radius-modal);
}
/* Primär-/Ghost-Knöpfe (Modals + qs-dialog) */
body.ui-v2 #bl-acc-save,
body.ui-v2 .qs-dlg-btn.primary:not(.danger) {
background: var(--qs2-btn-primary-bg) !important;
border-color: var(--qs2-btn-primary-bg) !important;
color: var(--qs2-btn-primary-text) !important;
font-weight: 600;
}
body.ui-v2 .qs-dlg-btn.danger {
background: var(--qs2-btn-danger-bg) !important;
border-color: var(--qs2-btn-danger-bg) !important;
color: var(--qs2-btn-danger-text) !important;
font-weight: 600;
}
/* KORREKTUR: die Klasse heisst .qs-dlg-card (qs-dialog.js Z.49), nicht
.qs-dlg-box — die Regel aus Phase 4 griff deshalb nie. */
body.ui-v2 .qs-dlg-card {
border-radius: var(--qs2-radius-modal);
border-color: var(--qs2-win-head-border);
box-shadow: var(--qs2-win-shadow);
}
body.ui-v2 .qs-dlg-head {
background: var(--qs2-win-head-bg);
border-bottom: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-modal) var(--qs2-radius-modal) 0 0;
}
body.ui-v2 .qs-dlg-foot {
background: var(--qs-panel-2);
border-top: 1px solid var(--qs2-win-head-border);
border-radius: 0 0 var(--qs2-radius-modal) var(--qs2-radius-modal);
}
/* Zugänge-Karten: klarer abgesetzt (sie tragen viele Felder) */
body.ui-v2 #bl-acc-codes > * {
border-radius: var(--qs2-radius-item);
border: 1px solid var(--qs2-win-head-border);
background: var(--qs-panel-2);
padding: 10px 12px;
}
/* ================================================================
Phase 5 — KI-Seitenspalte (ai-assistant.js, team-modeling)
Chat-Bubbles klar zugeordnet (Nutzer rechts getönt, KI links mit
Rand), Meta-Zeile ruhiger, Chips nur im Leerzustand (die Klasse
setzt _renderMsg/_clear — CSS blendet aus). Verdrahtung, Socket-
Flows und ⚙-Popover-Funktionen bleiben unverändert.
================================================================ */
body.ui-v2 .tm-ai-msg { border-radius: 10px; }
body.ui-v2 .tm-ai-msg.user {
background: var(--qs2-chat-user-bg);
border-radius: 10px 10px 3px 10px;
}
body.ui-v2 .tm-ai-msg.ai {
background: var(--qs2-chat-ai-bg);
border: 1px solid var(--qs2-chat-ai-border);
border-radius: 10px 10px 10px 3px;
}
body.ui-v2 .tm-ai-badge {
color: var(--qs2-chat-meta);
font-size: 10px;
}
/* Chips nur, solange der Chat leer ist (Vorschläge zum Einstieg) */
body.ui-v2 #tm-ai-wrap.tm-ai-has-msgs #tm-ai-chips { display: none; }
/* ================================================================
TEAM-SEITE — Menü-Anatomie (Abschnitt 1 der Menü-/Dialog-Vorlage)
Bisher bekam team-modeling.html nur das Fenster-Chrome (Phase 3),
NICHT die Menü-Anatomie aus Phase 2 — die war nur im Studio gebaut.
Beide Seiten teilen dieselbe Struktur (.tm-sec/.tm-mi/.tm-mi-chk +
aria-pressed), daher lassen sich die Studio-Regeln spiegeln.
Begründung aus der Vorlage: die Typ-Spalte beantwortet VOR dem Klick,
ob ein Eintrag ein Fenster öffnet oder etwas an-/ausschaltet.
================================================================ */
body.ui-v2 .tm-dropmenu .tm-mi {
display: flex; align-items: center; gap: 8px;
}
/* Typ-Spalte rechts */
body.ui-v2 .tm-type {
display: inline; margin-left: auto; flex: 0 0 auto;
font-size: 10px; color: var(--qs2-menu-type);
white-space: nowrap; padding-left: 10px;
}
/* Gruppen-Farben an den Sektions-Köpfen (wie im Studio) */
body.ui-v2 .tm-sec[data-grp="inspect"] { color: var(--qs-accent); }
body.ui-v2 .tm-sec[data-grp="analysis"] { color: var(--qs-amber); }
body.ui-v2 .tm-sec[data-grp="structure"] { color: var(--qs-purple); }
body.ui-v2 .tm-sec[data-grp="process"] { color: var(--qs-orange); }
body.ui-v2 .tm-sec[data-grp="neutral"] { color: var(--qs-text-mute); }
/* WERKZEUGE-MENÜ: Farbsprache des Datei-Menüs übernehmen (Nutzer-Wunsch
2026-07-30). Dort färbt `data-area` die ganze BEREICHS-BOX (Fläche + Rahmen)
über `--qs2-zone-c`; im Werkzeuge-Menü war nur die Kopf-SCHRIFT farbig, die
Box blieb neutral grau (`…-zone-box` setzt #8a909a).
Umsetzung wie im Datei-Menü: das ATTRIBUT steht an Kopf UND Einträgen der
Zone (`data-grp` im Markup), die Farbe hängt am Element selbst.
NICHT über den Geschwister-Selektor `~` lösen: der trifft ALLE folgenden
Elemente, auch die der nächsten Gruppe — gemessen färbte er die Einträge
bereits amber, während ihr eigener Kopf noch blau war (Farbe „hängt nach"). */
body.ui-v2 .tm-dropmenu [data-grp="inspect"] { --qs2-zone-c: var(--qs2-grp-inspect); }
body.ui-v2 .tm-dropmenu [data-grp="analysis"] { --qs2-zone-c: var(--qs2-grp-analysis); }
body.ui-v2 .tm-dropmenu [data-grp="structure"] { --qs2-zone-c: var(--qs2-grp-structure); }
body.ui-v2 .tm-dropmenu [data-grp="process"] { --qs2-zone-c: var(--qs2-grp-process); }
body.ui-v2 .tm-dropmenu [data-grp="neutral"] { --qs2-zone-c: var(--qs2-grp-neutral); }
/* Studio (bl-*): gleiche Zuordnung an den .lbl-Köpfen + Einträgen. */
body.ui-v2 .bl-dropmenu [data-grp="inspect"] { --qs2-zone-c: var(--qs2-grp-inspect); }
body.ui-v2 .bl-dropmenu [data-grp="analysis"] { --qs2-zone-c: var(--qs2-grp-analysis); }
body.ui-v2 .bl-dropmenu [data-grp="structure"] { --qs2-zone-c: var(--qs2-grp-structure); }
body.ui-v2 .bl-dropmenu [data-grp="process"] { --qs2-zone-c: var(--qs2-grp-process); }
body.ui-v2 .bl-dropmenu [data-grp="neutral"] { --qs2-zone-c: var(--qs2-grp-neutral); }
body.ui-v2 .tm-dropmenu .tm-sec {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
}
/* Status-Spalte fest 14px: ✓ für Schalter, ● für offene Fenster —
„nichts springt mehr, wenn Zustände wechseln" (Vorlage). */
body.ui-v2 .tm-dropmenu .tm-mi::before {
flex: 0 0 14px; width: 14px;
display: inline-block; text-align: center;
font-size: 10px;
}
body.ui-v2 .tm-dropmenu .tm-mi-chk[aria-pressed="true"]::before {
content: '✓'; color: var(--qs2-menu-check);
}
body.ui-v2 .tm-dropmenu .tm-mi-chk[aria-pressed="false"]::before { content: ''; }
body.ui-v2 .tm-dropmenu .tm-mi[aria-pressed="true"]:not(.tm-mi-chk)::before {
content: '●'; font-size: 8px; color: var(--qs2-menu-check);
}
body.ui-v2 .tm-dropmenu .tm-mi:not([aria-pressed])::before { content: ''; }
/* ================================================================
TEAM-SEITE — Konto-Menü / Erfahrungsstufe (Abschnitt 3 der Vorlage)
Wie im Studio (Phase 2f): die Stufen sind eine WAHL, keine Liste von
Aktionen — deshalb Karten mit Erklärtext statt nackter Menüzeilen.
Bei Nur-Lese-Zugang ist die Stufe festgelegt; der amber Hinweis sagt
das, statt die Einträge kommentarlos zu sperren.
================================================================ */
body.ui-v2 .tm-persona-mi {
/* EINZEILIG: Name links, kurze Beschreibung gedimmt rechts.
width:100%: #tm-name-pop ist KEIN .tm-dropmenu — ohne Breiten-
Begrenzung wuchs der Button auf Inhaltsbreite (436px in 340px-Pop)
und die Ellipsis der Beschreibung griff nie. */
display: flex; align-items: baseline; gap: 8px;
white-space: nowrap;
width: 100%; box-sizing: border-box;
border: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-item);
margin: 3px 0;
padding: 6px 10px;
}
body.ui-v2 .tm-persona-mi[aria-pressed="true"] {
background: var(--qs2-menu-item-active);
border-color: var(--qs-accent);
}
body.ui-v2 .tm-p-desc {
display: block; flex: 1 1 auto; min-width: 0;
font-size: 10px; line-height: 1.4;
color: var(--qs-text-mute);
margin-left: 8px; overflow: hidden; text-overflow: ellipsis;
text-align: right;
}
/* Locked-Hinweis nur zeigen, wenn die Stufe wirklich fest ist */
body.ui-v2.persona-locked .tm-p-locknote {
display: block;
margin: 4px 6px 2px;
padding: 6px 9px;
font-size: 10.5px; line-height: 1.4;
background: var(--qs2-banner-lock-bg);
border: 1px solid var(--qs2-banner-lock-border);
color: var(--qs2-banner-lock-text);
border-radius: var(--qs2-radius-item);
}
/* ================================================================
DOCKS — DMN-Tabellentest & DRD-Übersicht (Abschnitt 7 der Vorlage)
Die Vorlage sagt ausdrücklich „Vorschlag beibehalten": Tabellentest
als einklappbare Bodenleiste, DRD-Strip links mit Splitter — beides
bleibt unangetastet. Geändert wird nur (a) die Kopf-Anatomie wie bei
den Fenstern und (b) das Ergebnis: Zeilen mit ★-Root-Markierung statt
Monospace-Block. Gilt für Studio UND Team (gleiche Struktur).
================================================================ */
body.ui-v2 #bl-dmn-test-head,
body.ui-v2 #tm-dmn-test-head,
body.ui-v2 #bl-dmn-drd-head,
body.ui-v2 #tm-dmn-drd-head {
background: var(--qs2-win-head-bg);
border-bottom: 1px solid var(--qs2-win-head-border);
padding: 8px 14px;
font-weight: 600;
}
/* Ergebnis-Zeilen */
body.ui-v2 #bl-dmn-test-result.qs-dmn-res-rows,
body.ui-v2 #tm-dmn-test-result.qs-dmn-res-rows {
display: flex; flex-direction: column; gap: 6px;
background: transparent;
border: none;
padding: 0;
white-space: normal;
font-family: inherit;
}
body.ui-v2 .qs-dmn-res-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 9px;
border: 1px solid var(--qs2-win-head-border);
border-radius: 6px;
}
/* Wurzel-Ergebnis hervorgehoben — das ist die Antwort, der Rest ist Weg dorthin */
body.ui-v2 .qs-dmn-res-row.is-root {
background: rgba(125, 211, 252, .07);
border-color: rgba(125, 211, 252, .3);
}
body.ui-v2 .qs-dmn-res-star { flex: 0 0 auto; color: var(--qs-text-mute); }
body.ui-v2 .qs-dmn-res-row.is-root .qs-dmn-res-star { color: var(--qs-amber); }
body.ui-v2 .qs-dmn-res-name { flex: 1; min-width: 0; color: var(--qs-text-dim); }
body.ui-v2 .qs-dmn-res-row.is-root .qs-dmn-res-name { font-weight: 600; color: var(--qs-text); }
body.ui-v2 .qs-dmn-res-val {
flex: 0 0 auto;
font-family: ui-monospace, Menlo, monospace;
color: var(--qs-green);
}
body.ui-v2 .qs-dmn-res-rule {
flex: 0 0 auto; font-size: 9.5px; color: var(--qs-text-mute);
}
/* ================================================================
TEAM-SEITE — Modal-Anatomie (Abschnitt 5 der Vorlage)
Dieselbe feste Anatomie wie im Studio (Phase 4): Kopf getönt mit
akzentfarbenem Icon, getönte Fußleiste, Primär-Tokens. Die Team-Seite
hat dafür saubere gemeinsame Klassen (.tm-modal/-body/-foot), also
greift EIN Regelsatz für alle fünf Modals (Zugänge, Konventionen,
Bibliothek-Kopie, Räume, Versionen).
================================================================ */
body.ui-v2 .tm-modal {
border-radius: var(--qs2-radius-modal);
border: 1px solid var(--qs2-win-head-border);
box-shadow: var(--qs2-win-shadow);
overflow: hidden;
padding: 0;
}
body.ui-v2 .tm-modal > h3 {
margin: 0;
padding: 14px 18px 12px;
background: var(--qs2-win-head-bg);
border-bottom: 1px solid var(--qs2-win-head-border);
font-size: 1rem; font-weight: 600;
}
body.ui-v2 .tm-modal > h3 .ico { color: var(--qs2-win-icon); }
body.ui-v2 .tm-modal-body { padding: 14px 18px; }
body.ui-v2 .tm-modal-foot {
margin: 0;
padding: 12px 18px;
background: var(--qs-panel-2);
border-top: 1px solid var(--qs2-win-head-border);
}
/* Primär-Knopf in den Modals (Speichern/Bestätigen) */
body.ui-v2 .tm-modal-foot .btn-primary,
body.ui-v2 .tm-modal-foot .tm-btn-primary {
background: var(--qs2-btn-primary-bg);
border-color: var(--qs2-btn-primary-bg);
color: var(--qs2-btn-primary-text);
font-weight: 600;
}
/* ================================================================
TEAM-SEITE — mehrspaltige Menüs (Abschnitte 1+2 der Vorlage)
Das Studio hat das 2-Spalten-Grid seit Phase 2a/2e; die Team-Seite
hatte es NICHT. Aufteilung wie dort und wie in der Vorlage begründet:
links die Nutzungs-Reihenfolge (Beobachten → Simulieren), rechts
Analyse/Struktur/Referenzen — „18 Einträge ohne Scrollen".
Datei-Menü: links Öffnen, rechts Speichern (der .tm-grp-Trenner IST
die natürliche Spaltengrenze).
Strikt an .open gekoppelt, sonst überstimmt display:grid das
display:none des geschlossenen Menüs (Lehre aus Phase 2e).
================================================================ */
body.ui-v2 #tm-tools-menu.open,
body.ui-v2 #tm-file-menu.open {
display: grid;
grid-auto-flow: row dense;
/* 3 Spalten (Nutzer-Abstimmung). Werkzeuge: [Inspektoren+Simulation |
Analyse+Struktur | Prozessanalyse+Referenzen]. Datei: Spalte 3 traegt
NUR Camunda 8 (admin-only) — fuer Nicht-Admins kollabiert sie
(minmax(0,…)), das Menue bleibt faktisch 2-spaltig. */
grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content);
column-gap: 14px;
width: max-content;
max-width: 94vw;
}
body.ui-v2 #tm-tools-menu.open > *:not(.tm-col2):not(.tm-col3),
body.ui-v2 #tm-file-menu.open > *:not(.tm-col2):not(.tm-col3) { grid-column: 1; }
body.ui-v2 #tm-tools-menu.open > .tm-col2,
body.ui-v2 #tm-file-menu.open > .tm-col2 { grid-column: 2; }
body.ui-v2 #tm-tools-menu.open > .tm-col3,
body.ui-v2 #tm-file-menu.open > .tm-col3 { grid-column: 3; }
/* Trenner spannen über ihre Spalte, nicht über beide */
body.ui-v2 #tm-file-menu.open .tm-grp { margin-top: 4px; }
/* Datei-Menü: Sektions-Farben nach ORT (Vorlage Abschnitt 2 färbt
„Dieser Rechner" blau und „Bibliothek (Server)" amber). Die Farbe
beantwortet die eigentliche Frage des Datei-Menüs: WO landet die
Datei bzw. wo kommt sie her — geteilt mit der Gruppe, nur auf diesem
Rechner, in der Bibliothek, oder als Export raus. */
body.ui-v2 #tm-file-menu .tm-sec[data-area="room"],
body.ui-v2 #bl-file-menu .lbl[data-area="room"] { color: var(--qs-green); }
body.ui-v2 #tm-file-menu .tm-sec[data-area="local"],
body.ui-v2 #bl-file-menu .lbl[data-area="local"] { color: var(--qs-accent); }
body.ui-v2 #tm-file-menu .tm-sec[data-area="library"],
body.ui-v2 #bl-file-menu .lbl[data-area="library"] { color: var(--qs-amber); }
body.ui-v2 #tm-file-menu .tm-sec[data-area="export"],
body.ui-v2 #bl-file-menu .lbl[data-area="export"] { color: var(--qs2-grp-export); }
/* Datei-Menü-Bereiche (…-zone-area): Struktur kommt aus dem generischen
Zonen-System oben — hier nur die Farb-Zuordnung je data-area. */
/* Bereichs-Farbe je data-area — der Kopf trägt sie, die Einträge erben sie
über die Zonen-Klasse (--qs2-zone-c wird am Kopf UND an den Einträgen
gesetzt, damit color-mix in beiden greift). */
body.ui-v2 #tm-file-menu [data-area="local"],
body.ui-v2 #bl-file-menu [data-area="local"] { --qs2-zone-c: var(--qs-accent); }
body.ui-v2 #tm-file-menu [data-area="room"],
body.ui-v2 #bl-file-menu [data-area="room"] { --qs2-zone-c: var(--qs-green); }
body.ui-v2 #tm-file-menu [data-area="library"],
body.ui-v2 #bl-file-menu [data-area="library"] { --qs2-zone-c: var(--qs-amber); }
body.ui-v2 #tm-file-menu [data-area="export"],
body.ui-v2 #bl-file-menu [data-area="export"] { --qs2-zone-c: var(--qs2-grp-export); }
body.ui-v2 #tm-file-menu [data-area="dossier"],
body.ui-v2 #bl-file-menu [data-area="dossier"] { --qs2-zone-c: var(--qs-purple); }
/* „Geöffnete DMNs" (Sitzungs-Zustand): amber wie „Geladen (Sitzung)" im Picker,
aber semantisch EIGENER Bereich (nicht die Bibliothek). */
body.ui-v2 #tm-file-menu [data-area="session"] { --qs2-zone-c: var(--qs-amber); }
body.ui-v2 #tm-file-menu .tm-sec[data-area="dossier"],
body.ui-v2 #bl-file-menu .lbl[data-area="dossier"] { color: var(--qs-purple); }
/* ================================================================
TEAM-SEITE — Nachtrag aus dem Vorlage-Screenshot (unten rechts):
Stufen-Badges an den Gruppen und Referenzen als Chip-Reihe. Beides
gab es bisher NUR im Studio (Phase 2c/2d). Die Segmented-Kommentare
existieren in der Team-Seite bereits.
================================================================ */
/* Stufen-Badge: „ab Analytiker" / „ab Digitalisierer" an den
persona-gegateten Gruppen — Newbies sehen, was es noch gibt,
statt dass Gruppen kommentarlos verschwinden (Vorlage). */
body.ui-v2 .tm-dropmenu .tm-sec.tm-lvl-analyst::after,
body.ui-v2 .tm-dropmenu .tm-sec.tm-lvl-digitizer::after {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
border-radius: var(--qs2-radius-pill);
font-size: 9.5px; font-weight: 600;
text-transform: none; letter-spacing: 0;
background: var(--qs2-badge-level-bg, rgba(255,255,255,.07));
color: var(--qs2-badge-level-text, var(--qs-text-mute));
vertical-align: 1px;
}
body.ui-v2 .tm-dropmenu .tm-sec.tm-lvl-analyst::after { content: 'ab Analytiker'; }
body.ui-v2 .tm-dropmenu .tm-sec.tm-lvl-digitizer::after { content: 'ab Digitalisierer'; }
/* Referenzen als Chip-Reihe statt drei Menüzeilen — „3 gleichrangige
Nachschlagewerke brauchen keine 3 Menüzeilen" (Vorlage). */
body:not(.ui-v2) .tm-dropmenu .tm-refrow { display: contents; }
body.ui-v2 .tm-dropmenu .tm-refrow {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 4px 10px 8px;
}
body.ui-v2 .tm-dropmenu .tm-refrow .tm-mi {
display: inline-flex !important;
width: auto !important; min-width: 0 !important;
flex: 0 0 auto;
border: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-pill);
padding: 4px 12px;
margin: 0;
}
/* Im Chip ist die Status-/Typ-Spalte sinnlos — sie sind reine Öffner */
body.ui-v2 .tm-dropmenu .tm-refrow .tm-mi::before { content: none; }
body.ui-v2 .tm-dropmenu .tm-refrow .tm-type { display: none; }
/* Platz für das ⓘ: `.tm-mi-help` ist absolut (right:6px) und legte sich in den
schmalen Chips ÜBER die Beschriftung — gemessen 10px Überlappung bei allen
drei Pills (Text endet 560, ⓘ ab 550). In den breiten Menüzeilen ist die
Überlagerung unkritisch (dort ist rechts frei), hier braucht der Chip eine
eigene rechte Reserve. Platz ist vorhanden: die Reihe endete bei 795, das
Menü erst bei 802 — die Chips dürfen also wachsen (Nutzer-Hinweis). */
body.ui-v2 .tm-dropmenu .tm-refrow .tm-mi:has(.tm-mi-help) { padding-right: 26px; }
/* Kommentare/Dokumentation als Segmented Control (Vorschlag 1) — im Team
nachgezogen; im Studio seit Phase 2c. Der 3-Stufen-Zyklus wird zur
sichtbaren Wahl: man sieht die Stufen, ohne durchklicken zu müssen.
Der Zyklus-Knopf bleibt im Klassisch-Design die Bedienung. */
body.ui-v2 .tm-dropmenu #tm-tl-comments { display: none !important; }
body.ui-v2 #tm-comments-seg {
display: flex; align-items: center; gap: 4px;
padding: 4px 10px 8px;
flex-wrap: wrap;
}
body.ui-v2 #tm-comments-seg .tm-seg-lbl {
flex: 0 0 auto; margin-right: 4px;
font-size: 11px; color: var(--qs-text-dim);
}
body.ui-v2 #tm-comments-seg .tm-seg-opt {
flex: 0 0 auto;
padding: 3px 10px;
font-size: 10.5px; font-weight: 600;
border: 1px solid var(--qs2-win-head-border);
border-radius: var(--qs2-radius-item);
background: transparent;
color: var(--qs-text-dim);
cursor: pointer;
}
body.ui-v2 #tm-comments-seg .tm-seg-opt:hover:not([aria-pressed="true"]) {
background: var(--qs2-menu-item-hover); color: var(--qs-text);
}
body.ui-v2 #tm-comments-seg .tm-seg-opt[aria-pressed="true"] {
background: var(--qs-accent);
border-color: var(--qs-accent);
color: var(--qs2-btn-primary-text);
}
/* ================================================================
FEEL-EDITOR — Inline-Bearbeitung von Typ und Startwert (Vorschlag 9)
BEWUSST NUR diese zwei Felder: sie werden beim Simulieren häufig
angefasst und passen in eine Zeile. Name und Pool bleiben im Modal —
ein Pool-Wechsel VERSCHIEBT die Variable in einen anderen Prozess.
Die Zeile „Modell:" ist optisch abgesetzt, damit sie nicht mit dem
darüberliegenden LAUFZEIT-Wertfeld verwechselt wird (das eine ist
flüchtig, das andere wandert mit der Datei).
================================================================ */
body.ui-v2 .qs-vars-model-row {
display: flex; align-items: center; gap: 5px;
margin-top: 4px; padding: 4px 0 2px;
border-top: 1px dashed var(--qs2-win-head-border);
}
body.ui-v2 .qs-vars-model-lbl {
flex: 0 0 auto;
font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--qs-text-mute);
}
body.ui-v2 .qs-vars-inline {
font: inherit; font-size: 11px;
background: var(--qs-input-bg);
color: var(--qs-text);
border: 1px solid var(--qs-input-border);
border-radius: 5px;
padding: 2px 6px;
min-width: 0;
}
body.ui-v2 .qs-vars-inline-type { flex: 0 0 auto; }
body.ui-v2 .qs-vars-inline-default { flex: 1 1 auto; }
body.ui-v2 .qs-vars-inline:focus {
outline: none; border-color: var(--qs-accent);
}
body.ui-v2 .qs-vars-inline-ok {
flex: 0 0 auto;
background: transparent; border: 1px solid var(--qs2-win-head-border);
color: var(--qs-green); border-radius: 5px;
padding: 2px 7px; font-size: 11px; cursor: pointer; line-height: 1.2;
}
body.ui-v2 .qs-vars-inline-ok:hover {
background: var(--qs-green); color: var(--qs2-btn-primary-text);
}
/* „▶ Testen" — Gateway-Bedingung gegen aktuelle Werte auswerten (Vorschlag 9) */
body.ui-v2 .qs-vars-cond-test {
display: flex; align-items: center; gap: 8px;
margin-top: 4px; flex-wrap: wrap;
}
body.ui-v2 .qs-vars-cond-testbtn {
flex: 0 0 auto;
background: transparent; border: 1px solid var(--qs2-win-head-border);
color: var(--qs-accent); border-radius: 5px;
padding: 2px 9px; font-size: 10.5px; cursor: pointer; line-height: 1.3;
}
body.ui-v2 .qs-vars-cond-testbtn:hover {
background: var(--qs-accent); color: var(--qs2-btn-primary-text);
border-color: var(--qs-accent);
}
body.ui-v2 .qs-vars-cond-testout {
font-size: 10px; font-weight: 600;
color: var(--qs-text-mute);
}
body.ui-v2 .qs-vars-cond-testout.ok { color: var(--qs-green); }
body.ui-v2 .qs-vars-cond-testout.no { color: var(--qs-orange); }
body.ui-v2 .qs-vars-cond-testout.err { color: var(--qs-red, #f8b4b4); }
/* --- FEEL-Editor Feinschliff (Handoff Abschnitt 9, Pakete A–H) --- */
/* C: Banner-Typ (Glyph + Label vor dem Namen) */
body.ui-v2 .qs-vars-elbanner-type {
flex: 0 0 auto;
font-size: 10.5px; font-weight: 600;
color: var(--qs-amber, #b45309);
white-space: nowrap;
}
body.ui-v2 .qs-vars-elbanner-id {
font-family: ui-monospace, Menlo, monospace;
font-size: 10px; color: var(--qs-text-mute);
}
/* D: fachliche Pfad-Labels */
body.ui-v2 .qs-vars-path-pre { font-size: 10.5px; color: var(--qs-text-mute); }
body.ui-v2 .qs-vars-path-label { font-weight: 600; color: var(--qs-accent); }
body.ui-v2 .qs-vars-path-def { color: var(--qs-accent); }
/* F: „Alle Pfade testen" + genommener Pfad */
body.ui-v2 .qs-vars-testall-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 4px 0 6px;
}
body.ui-v2 .qs-vars-testall-sum {
font-size: 10.5px; font-weight: 600; color: var(--qs-text-dim);
}
body.ui-v2 .qs-vars-row.qs-vars-path-taken {
outline: 1px solid var(--qs-green);
outline-offset: 1px;
border-radius: 6px;
background: var(--qs-green-bg, rgba(134, 239, 172, 0.08));
}
/* G: Inline-Bedingungs-Editor */
body.ui-v2 .qs-vars-cond-editwrap {
display: flex; align-items: flex-start; gap: 5px; margin-top: 2px;
}
body.ui-v2 .qs-vars-cond-editbox {
flex: 1 1 auto; min-width: 0;
font-family: ui-monospace, Menlo, monospace; font-size: 11px;
line-height: 1.45;
background: var(--qs-input-bg);
color: var(--qs-text);
border: 1px solid var(--qs-accent);
border-radius: 6px;
padding: 5px 8px;
resize: vertical;
}
body.ui-v2 .qs-vars-cond-editbox:focus { outline: none; }
/* E: „Verwendete Variablen"-Pills */
body.ui-v2 .qs-vars-usedvars {
border-top: 1px solid var(--qs2-win-head-border);
margin-top: 8px; padding-top: 7px;
}
body.ui-v2 .qs-vars-usedvars-head {
font-size: 10px; color: var(--qs-text-mute); margin-bottom: 5px;
}
body.ui-v2 .qs-vars-usedvars-row { display: flex; gap: 6px; flex-wrap: wrap; }
body.ui-v2 .qs-vars-usedvar-pill {
padding: 3px 9px; border-radius: 999px;
font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
background: color-mix(in srgb, var(--qs-accent) 12%, transparent);
color: var(--qs-accent);
}
body.ui-v2 .qs-vars-usedvar-pill.unset {
background: transparent;
border: 1px dashed var(--qs2-win-head-border);
color: var(--qs-text-mute);
}
/* Dokumentations-/Kommentar-Segment IN der Zonen-Box (Werkzeugmenü):
die Basis-Pill (.tm-seg/.bl-seg = eigener Rundum-Rahmen + volle Rundung +
overflow:hidden) sass direkt AUF der Box-Kante des Vorgängers. In der Box:
kein eigener oberer Rahmen, nur Boden-Rundung, etwas Luft nach oben. */
body.ui-v2 #tm-comments-seg.tm-zone-box,
body.ui-v2 .bl-dropmenu #bl-comments-seg.bl-zone-box {
border-top: none;
border-radius: 0 0 8px 8px;
overflow: visible;
margin: 0;
padding-top: 8px;
}
/* Element-Fokus: Sektionskopf entfaellt (das Banner traegt Typ+Name schon) */
body.ui-v2 .qs-vars-elsec-nohead > .qs-vars-section-head:first-child { display: none; }
/* H: Fussnote + Reset in der Fusszeile */
body.ui-v2 .qs-vars-footer-v2 { flex-wrap: wrap; }
body.ui-v2 .qs-vars-foot-note {
flex: 1 1 100%;
font-size: 9.5px; color: var(--qs-text-mute);
text-align: center; padding: 1px 0 3px;
}
/* ================================================================
SEITENSPALTE + KI-ASSISTENT (Vorschlag 11) — Werte 1:1 aus der Vorlage
Kern der Vorlage: OFFENE Sektionen bekommen eine eigene, HELLERE
Fläche (--qs2-side-open) und volle Textfarbe; GESCHLOSSENE bleiben
auf der Spaltenfläche und sind gedämpft (--qs2-side-head-dim). Jede
Sektion ist durch eine feine Linie getrennt (--qs2-side-line) — so
sieht man auf einen Blick, was offen ist, ohne den Inhalt zu lesen.
================================================================ */
:root[data-theme="v2"] {
--qs2-side-bg: #15181d; /* Spaltenfläche (dunkler als offene Sektion) */
--qs2-side-open: #1a1d22; /* offene Sektion — hebt sich ab */
--qs2-side-line: #2a2e36; /* feine Trennlinie zwischen Sektionen */
--qs2-side-head-dim: #8a909a; /* geschlossener Kopf: gedämpft */
--qs2-side-field: #0f1115; /* Eingabe-/Auswahlflächen */
--qs2-side-field-border: #3a4150;
--qs2-ai-user-bubble: color-mix(in srgb, var(--qs-accent) 16%, #1e232b);
--qs2-ai-meta: #5a626e;
}
:root[data-theme="v2-light"] {
--qs2-side-bg: #f4f4f1;
--qs2-side-open: #ffffff;
--qs2-side-line: #e3e1da;
--qs2-side-head-dim: #6b7480;
--qs2-side-field: #ffffff;
--qs2-side-field-border: #d9d4ca;
--qs2-ai-user-bubble: color-mix(in srgb, var(--qs-accent) 13%, #ffffff);
--qs2-ai-meta: #9aa0a8;
}
body.ui-v2 #tm-side {
background: var(--qs2-side-bg);
/* Karten näher an den Spaltenrand: Basis-12px → 4px; den Rest gibt
die Karten-margin (6px) → Karte sitzt ~10px vom Bereichsrand. */
padding: 4px;
/* EIN Trennstrich statt zwei: die Linie zeichnet der Splitter —
der Panel-eigene border-left entfällt (Doppel-Strich-Befund). */
border-left: none;
}
/* Trenner Seitenleiste ↔ Dock/Canvas: EINE klare, mittige 1px-Linie in
einer 8px-Greiffläche; Hover verbreitert auf 2px in Akzentfarbe
(Zieh-Feedback). */
body.ui-v2 #tm-side-splitter { flex: 0 0 8px; }
body.ui-v2 #tm-side-splitter::before {
inset: 0;
left: 50%; width: 1px; right: auto;
transform: translateX(-50%);
background: var(--qs2-side-line);
opacity: 1;
}
body.ui-v2 #tm-side-splitter:hover::before {
width: 2px;
background: var(--qs-accent);
}
/* Einklapp-/Ausklapp-Pfeil: schlichtes Chevron in einem runden Knopf,
IMMER ganz oben am Trenner (über den Dock-Fenstern, s. z-index in
team-modeling.html). */
body.ui-v2 #tm-side-collapse,
body.ui-v2 #tm-side-reopen {
top: 4px;
width: 20px; height: 20px; line-height: 18px;
border: 1px solid var(--qs2-side-line);
border-radius: 50%;
background: var(--qs2-side-open);
color: var(--qs-text-dim);
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
body.ui-v2 #tm-side-reopen { border-radius: 50%; border-right: 1px solid var(--qs2-side-line); right: 4px; }
body.ui-v2 #tm-side-collapse:hover,
body.ui-v2 #tm-side-reopen:hover {
color: var(--qs2-btn-primary-text);
background: var(--qs-accent);
border-color: var(--qs-accent);
}
/* Jede Sektion: eigene Zeile mit feiner Trennlinie darunter */
body.ui-v2 #tm-side .tm-sec-block {
border-bottom: 1px solid var(--qs2-side-line);
margin: 0;
}
/* OFFEN = abgesetzte KARTE (Punkt 2): heller Grund, ringsum Abstand
(dadurch bleibt aussen — oben/unten/links/rechts — der dunklere
Spaltengrund als Rand sichtbar), abgerundete Ecken, feiner Rahmen.
Die Trennlinie unter dem Block entfaellt bei der Karte, sonst
doppelte Kante. */
body.ui-v2 #tm-side .tm-sec-block:not(.collapsed) {
background: var(--qs2-side-open);
border: 1px solid var(--qs2-side-line);
border-radius: 8px;
margin: 6px;
overflow: hidden;
border-bottom: 1px solid var(--qs2-side-line);
}
/* Karten-INNENRAND: Inhalte starten nicht am Kartenrand, sondern bündig
mit dem Kopftext (12px). Jede Sektion hat genau EINEN Body nach dem h3
(#tm-grp-body / #tm-cmt-body / #tm-doss-body / #tm-ai-body). */
body.ui-v2 #tm-side #tm-grp-body { padding: 4px 12px 8px; }
body.ui-v2 #tm-side #tm-cmt-body { padding: 6px 12px 10px; }
body.ui-v2 #tm-side #tm-doss-body { padding: 6px 12px 10px; }
body.ui-v2 #tm-side #tm-ai-body { padding: 0 12px 10px; }
body.ui-v2 #tm-side .tm-sec-h3 {
padding: 9px 12px;
margin: 0;
font-size: 12px;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
}
/* GESCHLOSSEN: gedämpft, keine eigene Fläche */
body.ui-v2 #tm-side .tm-sec-block.collapsed > .tm-sec-h3 {
color: var(--qs2-side-head-dim);
background: transparent;
}
/* OFFEN: Kopf traegt nur Text/Trennlinie — die Fläche kommt vom Block. */
body.ui-v2 #tm-side .tm-sec-block:not(.collapsed) > .tm-sec-h3 {
background: transparent;
color: var(--qs-text);
border-bottom: 1px solid var(--qs2-side-line);
}
body.ui-v2 #tm-side .tm-sec-block:not(.collapsed) > .tm-sec-h3 .ico {
color: var(--qs-accent);
}
/* Zähler in Klammern zurückgenommen („Diskussion (3)") */
body.ui-v2 #tm-side .tm-sec-count { color: var(--qs2-ai-meta); font-weight: 400; }
/* ---- KI-Konfigurationszeile: eine ruhige Reihe (Vorlage) ---- */
body.ui-v2 #tm-ai-wrap .tm-ai-head-row {
/* Negativ-Margin gleicht das #tm-ai-body-Padding aus → die feine
Trennlinie unter der Reihe bleibt KARTENBREIT (Vorlage); das eigene
12px-Padding bringt den Inhalt wieder auf die Fluchtlinie. */
margin: 0 -12px;
padding: 8px 12px;
border-bottom: 1px solid var(--qs2-side-line);
gap: 6px;
}
body.ui-v2 #tm-ai-wrap select.tm-ai-sel,
body.ui-v2 #tm-ai-wrap #tm-ai-mode {
background: var(--qs2-side-field);
border: 1px solid var(--qs2-side-field-border);
border-radius: 6px;
padding: 4px 8px;
font-size: 10.5px;
color: var(--qs-text-dim);
}
/* Status-Punkt wandert in den Sektions-Kopf (Vorlage) */
body.ui-v2 #tm-ai-wrap #tm-ai-dot { width: 7px; height: 7px; }
/* ---- Chat: Rollen-Bubbles exakt wie in der Vorlage ---- */
body.ui-v2 .tm-ai-msg.user {
background: var(--qs2-ai-user-bubble);
border-radius: 10px 10px 3px 10px;
max-width: 85%;
padding: 8px 11px;
line-height: 1.5;
}
body.ui-v2 .tm-ai-msg.ai {
background: var(--qs2-chat-ai-bg, var(--qs2-side-open));
border: 1px solid var(--qs2-side-line);
border-radius: 10px 10px 10px 3px;
max-width: 92%;
padding: 9px 11px;
line-height: 1.55;
}
body.ui-v2 .tm-ai-badge {
font-size: 9.5px;
color: var(--qs2-ai-meta);
}
/* Meta-Zeile unter KI-Antworten (Handoff 11): Modell · Latenz · Token —
aus der Studien-Telemetrie; Klassisch zeigt sie nicht. */
body:not(.ui-v2) .tm-ai-meta { display: none; }
body.ui-v2 .tm-ai-meta {
margin-top: 5px; padding-top: 4px;
border-top: 1px solid var(--qs2-side-line);
font-size: 9.5px; color: var(--qs2-ai-meta);
font-family: ui-monospace, Menlo, monospace;
}
/* ⚙-Popover in 2 Gruppen (Handoff 11): Köpfe nur im V2 */
body:not(.ui-v2) .tm-ai-gearsec { display: none; }
body.ui-v2 .tm-ai-gearsec {
font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--qs-text-mute);
padding: 7px 2px 3px;
border-bottom: 1px solid var(--qs2-side-line);
margin-bottom: 4px;
}
body.ui-v2 .tm-ai-gearsec:first-child { padding-top: 2px; }
/* Composer */
body.ui-v2 #tm-ai-wrap .tm-ai-composer,
body.ui-v2 #tm-ai-wrap #tm-ai-input {
background: var(--qs2-side-field);
border-color: var(--qs2-side-field-border);
border-radius: 8px;
}
/* ================================================================
DATEI-MENÜ — Bibliothek-(Server)-Block amber getönt (Vorschlag 2)
Die Vorlage umschliesst den Admin-/Server-Bereich mit einer amber
Box (Fläche rgba(251,191,36,.04), Rahmen .18), nicht nur der
Überschrift. Das Menü ist eine flache Liste, deshalb wird die Box
über die Zonen-Klassen zusammengesetzt: der Kopf traegt Rahmen oben
+ Rundung, das Ende Rahmen unten + Rundung, dazwischen Seitenränder.
Studio (bl-*) und Team (tm-*) identisch. Werte 1:1 aus der Vorlage.
================================================================ */
/* (Amber-Zonen-Regeln der Bibliothek: jetzt Alias im generischen
Zonen-System — s. „MENÜ-ZONEN" weiter oben.) */
/* Admin-/Rollen-Pille am Zonen-Kopf ODER am einzelnen Eintrag (Team:
Bibliothek ist für alle lesbar, nur Schreiben ist gated → Pille sitzt
an den privilegierten EINTRÄGEN). Vorlage: amber, abgerundet. */
body.ui-v2 .bl-admin-pill,
body.ui-v2 .tm-admin-pill {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border-radius: 999px;
font-size: 9px; font-weight: 600;
text-transform: none; letter-spacing: 0;
background: rgba(251, 191, 36, .15);
color: var(--qs-amber);
vertical-align: 1px;
}
/* Klassisch: die Zonen-Klassen sind wirkungslos (keine Regel) → unveraendert.
Die Pille wird versteckt — sie stand dort als ungestylter Rohtext („…Admin"). */
body:not(.ui-v2) .bl-admin-pill,
body:not(.ui-v2) .tm-admin-pill { display: none; }
/* ================================================================
KI-ASSISTENT — Feinschliff nach Vorschlag 11 (Nutzer-Rückmeldung)
================================================================ */
/* Punkt 1: der GESAMTE aufgeklappte KI-Bereich bekommt die hellere
Fläche (--qs2-side-open), nicht nur der Kopf. Das ist die wichtigste
visuelle Abgrenzung: offen = zusammenhängende hellere Zone. */
body.ui-v2 #tm-ai-wrap { background: transparent; }
/* Der KI-Block als Ganzes (falls eigener sec-block) flächig hell */
/* Body-Fläche kommt vom Block-Container (Karte) — keine eigene Regel nötig. */
/* Punkt 2: Modus als Segmented Control (das