/* ============================================================================ qs-theme-v2.css — Token-Map für das umschaltbare V2-Design (Redesign 2026) ---------------------------------------------------------------------------- Einbindung NACH qs-theme.css in admin.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; --qs-elev-1: 0 10px 30px -8px rgba(0, 0, 0, 0.55); /* Menü */ --qs-elev-2: 0 20px 44px -14px rgba(0, 0, 0, 0.6); /* Fenster */ --qs-elev-3: 0 24px 64px -12px rgba(0, 0, 0, 0.7); /* Modal */ --qs2-win-shadow: var(--qs-elev-2); --qs2-win-icon: var(--qs-accent); /* Icon im Kopf immer akzentfarben */ --qs2-win-context: var(--qs-text-mute); /* "· Gateway ..." Kontext-Text */ /* ---- Menü-Anatomie (Kopf-Menüs 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(--qs2-grp-inspect); /* Simulation-Analyse = Teil der Simulation (UI/UX-Analyse 2026-10-09: Amber und Orange waren im Werkzeuge-Menü nicht unterscheidbar — hell 4,1 statt ≥ 15, bei Rot-Grün-Schwäche 0,1). */ --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; /* EIN Badge-Stil: Stufe („ab Analytiker“) UND Rolle („Admin“) */ --qs2-badge-bg: transparent; --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; --qs-elev-1: 0 10px 28px -10px rgba(30, 37, 48, 0.28); --qs-elev-2: 0 20px 44px -18px rgba(30, 37, 48, 0.35); --qs-elev-3: 0 24px 60px -16px rgba(30, 37, 48, 0.42); --qs2-win-shadow: var(--qs-elev-2); --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(--qs2-grp-inspect); --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-bg: transparent; --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 Menü-Anatomie über die bestehenden Klassen der Seite (.tm-dropmenu, .tm-sec, aria-pressed). Einträge und Status-Spalte der Kopf-Menüs: /css/qs-menu.css. ============================================================================ */ /* Gilt für die Kopf-Menüs und das Profil-Menü (Nutzer-Befund 2026-08-01: das Profil-Menü wich mit Radius 8/eigenem Schatten/Padding 12 ab). #tm-name-pop braucht den ID-Selektor, damit die Theme-Regel seine eigene ID-Regel schlägt. */ :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; } /* 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(.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; } /* ================================================================ 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 { /* 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 .tm-dropmenu .tm-mi[class*="tm-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"] { 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*="tm-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 .tm-sep-above { border-top: 1px solid var(--qs-border-soft, #2a2e36); margin-top: 4px; padding-top: 8px !important; } 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 { 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 ist spezifischer. */ body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"] { border-radius: 0 !important; } /* Boden-Rundung. Die Selektoren tragen denselben Element-Anker (.tm-mi) wie die 0-Regel darüber — sonst gewinnt jene (höhere Spezifität) und der letzte Eintrag blieb eckig (gemessen r=0). */ body.ui-v2 .tm-dropmenu [class*="tm-zone-"][class*="-end"], body.ui-v2 .tm-dropmenu [class*="tm-zone-"].qs-zone-last, body.ui-v2 .tm-dropmenu .tm-mi[class*="tm-zone-"][class*="-end"], 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-flyout [class*="tm-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-flyout [class*="tm-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*="tm-zone-"].qs-zone-last, body.ui-v2 .qs-sec-flyout [class*="tm-zone-"][class*="-end"], body.ui-v2 .qs-sec-flyout [class*="tm-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"]) { 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*="tm-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 #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 .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; } /* 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 .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) .tm-p-count { display: none; } /* Chip-Labels ohne redundantes „-Referenz" (steht schon im Gruppen-Header) — Klassisch behält die vollen Namen (Suffix nur im V2 versteckt). */ /* 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) Die Banner-Familien (.qs-vars-ro-note FEEL-Editor, .qs-kpi-ro-note KPI-Analyse) 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 { 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; } /* Primär-/Ghost-Knöpfe (Modals + qs-dialog) */ 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); } /* ================================================================ 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. Die frühere Typ-Spalte („Fenster ↗ / an/aus“) ist entfallen (UI/UX-Analyse 2026-10-09): Schalter tragen ✓ in der Status-Spalte, Erklärungen das ⓘ. ================================================================ */ body.ui-v2 .tm-dropmenu .tm-mi { display: flex; align-items: center; gap: 8px; } /* 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"). */ /* (Zuordnung data-grp → --qs2-zone-c: /css/qs-menu.css) */ 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). ================================================================ */ /* Die Gestaltung von Tabellentest, DRD-Übersicht und Ergebniszeilen lebt jetzt im Baustein /js/qs-dmn-workbench.js (eine Fassung für beide Seiten). */ /* Modal-Anatomie der großen Dialoge: /js/qs-modal.js (EINE Hülle für beide Seiten). */ /* ================================================================ 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. */ /* UI/UX-Analyse S2 (2026-10-09): drei ORTS-Farben (Rechner blau, Gruppenordner grün, Bibliothek/Camunda amber); alles Ortsunabhängige (Neu, Simulationsdaten, Export, geöffnete DMNs) neutral grau — vorher sechs Farben. */ /* (Farben je Ort: /css/qs-menu.css — gemeinsam für beide Seiten) */ /* Datei-Menü-Bereiche (…-zone-area): Struktur kommt aus dem generischen Zonen-System oben — hier nur die Farb-Zuordnung je data-area. Der Kopf trägt die Farbe, die Einträge erben sie (--qs2-zone-c an Kopf UND Einträgen). */ body.ui-v2 #tm-file-menu [data-area="local"] { --qs2-zone-c: var(--qs-accent); } body.ui-v2 #tm-file-menu [data-area="room"] { --qs2-zone-c: var(--qs-green); } body.ui-v2 #tm-file-menu [data-area="library"] { --qs2-zone-c: var(--qs-amber); } body.ui-v2 #tm-file-menu :is([data-area="new"], [data-area="data"], [data-area="export"], [data-area="session"]) { --qs2-zone-c: var(--qs2-grp-neutral); } /* ================================================================ 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-Kennzeichen „ab …“ an den Bereichsköpfen: /css/qs-menu.css) */ /* Team-Dokumentations-Segment: siehe /css/qs-menu.css (gemeinsam mit Synixx BPMN). */ /* ================================================================ 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 = 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 { 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); } /* KI7: Modell nur EINMAL, unten in der Meta-Zeile — der Kopf über der Antwort entfällt; er bleibt nur, wenn er einen Fallback meldet (anderes Modell hat geantwortet). */ body.ui-v2 .tm-ai-msg.ai .tm-ai-badge { display: none; } body.ui-v2 .tm-ai-msg.ai .tm-ai-badge:has(.fb) { display: flex; } /* 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: 10px; color: var(--qs2-ai-meta); } /* ⚙-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. 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 .tm-admin-pill { /* EIN Badge-Stil für Rolle UND Stufe (UI/UX-Analyse S2): vorher amber „Admin“, orange „Moderator“ und grau „ab Analytiker“ in drei Formen. */ display: inline-block; margin-left: 8px; padding: 0 7px; border: 1px solid var(--qs2-badge-border); border-radius: var(--qs2-radius-pill, 999px); background: var(--qs2-badge-bg, transparent); color: var(--qs2-badge-text); font-size: var(--qs-fs-xs, 11px); font-weight: 600; line-height: 15px; text-transform: none; letter-spacing: 0; 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) .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