/* Kurzbeschreibung (Laie): Das komplette Aussehen der Workspace-Oberflaeche.
   Stand frueher direkt in site/workspace.html. Ausgelagert aus demselben Grund
   wie workspace-haupt.js: was mitten in der HTML-Seite steht, muss der Browser
   bei JEDEM Oeffnen neu einlesen und verarbeiten — als eigene Datei landet das
   fertig verarbeitete Ergebnis in seinem Zwischenspeicher. Aenderungen sind
   trotzdem sofort bei allen live (no-cache + ETag: der Browser fragt jedes Mal
   nach, bekommt aber bei unveraendertem Stand nur ein "unveraendert" zurueck).

   ACHTUNG Reihenfolge: Diese Datei MUSS nach brand.css und anstoss-panel.css
   geladen werden — sie ueberschreibt deren Regeln. */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #07060c;
    --surface: rgba(19,19,31,0.65);
    --surface-solid: #13131f;
    --border: rgba(255,255,255,0.1);
    --border-strong: rgba(255,255,255,0.18);
    --accent: #6c63ff;
    --accent2: #4ecdc4;
    --text: #eeeef5;
    --text2: rgba(238,238,245,0.62);
    --text3: rgba(238,238,245,0.42);
  }
  /* ── Light-Theme ─────────────────────────────────────────────────────
     Vollständige Inversion aller Core-Variablen. Komponenten, die diese
     Variablen verwenden, passen sich automatisch an. Hardcodete rgba()-Werte
     in einzelnen Komponenten werden über gezielte Selektoren weiter unten
     überschrieben. Iframe-Sub-Pages bekommen den Theme-State über
     ?theme=… in der URL UND via postMessage bei Live-Toggle. */
  :root[data-theme="light"] {
    --bg: #f5f5fa;
    --surface: rgba(255,255,255,0.92);
    --surface-solid: #ffffff;
    --border: rgba(15,15,30,0.1);
    --border-strong: rgba(15,15,30,0.18);
    --accent: #5b54e8;
    --accent2: #2eb4ac;
    --text: #14141d;
    --text2: rgba(20,20,29,0.66);
    --text3: rgba(20,20,29,0.45);
  }
  :root[data-theme="light"] body { background: #f5f5fa; }
  :root[data-theme="light"] .topbar {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
    border-bottom: 1px solid rgba(15,15,30,0.08);
  }
  :root[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.35) 100%);
    border-right: 1px solid rgba(15,15,30,0.08);
  }
  :root[data-theme="light"] .topbar-logo img {
    filter: invert(1) hue-rotate(180deg) saturate(1.1);
  }
  :root[data-theme="light"] .tut-menu-dropdown,
  :root[data-theme="light"] .user-menu-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(15,15,30,0.1) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18) !important;
  }
  :root[data-theme="light"] .tut-menu-item,
  :root[data-theme="light"] .user-menu-item { color: var(--text) !important; }
  :root[data-theme="light"] .tut-menu-item:hover,
  :root[data-theme="light"] .user-menu-item:hover {
    background: rgba(108,99,255,0.1) !important;
    color: var(--text) !important;
  }
  :root[data-theme="light"] .user-menu-sep { background: rgba(15,15,30,0.08) !important; }
  /* Light-Sonderfarbe entfallen — --a4h-overlay gilt in beiden Themes (BRANDING.md). */
  :root[data-theme="light"] .drawer {
    background: #ffffff;
    /* Rahmenlos — der Schatten trägt die Abgrenzung allein (siehe .drawer). */
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  }
  :root[data-theme="light"] .aef-group input,
  :root[data-theme="light"] .aef-group textarea,
  :root[data-theme="light"] .composer-box {
    background: rgba(15,15,30,0.04) !important;
  }
  :root[data-theme="light"] .aef-group input:focus,
  :root[data-theme="light"] .aef-group textarea:focus {
    background: rgba(15,15,30,0.06) !important;
  }
  /* .modal-overlay / .usage-overlay: Light-Sonderfarbe entfallen — --a4h-overlay gilt in beiden Themes. */
  :root[data-theme="light"] .modal,
  :root[data-theme="light"] .usage-card,
  :root[data-theme="light"] #modalCard {
    background: #ffffff !important;
    color: var(--text) !important;
    border-color: rgba(15,15,30,0.1) !important;
  }
  /* askPassword-Modal (Inline-Prompt für Workflow-Lösch-Bestätigung etc.):
     vorher hartcodiert dunkel, jetzt theme-aware. */
  .ask-pw-card { background: #13131f; border: 1px solid rgba(255,255,255,0.1); }
  .ask-pw-title { color: #fff; }
  .ask-pw-desc { color: #8a90a3; }
  .ask-pw-input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
  .ask-pw-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #aaa; }
  :root[data-theme="light"] .ask-pw-card { background: #ffffff; border-color: rgba(15,15,30,0.1); }
  :root[data-theme="light"] .ask-pw-title { color: var(--text); }
  :root[data-theme="light"] .ask-pw-desc { color: var(--text2); }
  :root[data-theme="light"] .ask-pw-input { background: #f7f7fb; border-color: rgba(15,15,30,0.18); color: var(--text); }
  :root[data-theme="light"] .ask-pw-cancel { border-color: rgba(15,15,30,0.18); color: var(--text2); }

  /* Wizard-Inputs: im Dark-Theme reicht rgba(255,255,255,0.04) Background +
     0.1 Border, im Light-Theme verschwindet die Umrandung komplett (weiß auf
     weiß). Hier explizit eine sichtbare Border + grauer Input-Background. */
  :root[data-theme="light"] .wiz input[type=text],
  :root[data-theme="light"] .wiz textarea {
    background: #f7f7fb !important;
    border-color: rgba(15,15,30,0.18) !important;
    color: var(--text) !important;
  }
  :root[data-theme="light"] .wiz input[type=text]:focus,
  :root[data-theme="light"] .wiz textarea:focus {
    border-color: rgba(108,99,255,0.7) !important;
    background: #ffffff !important;
  }
  :root[data-theme="light"] .wiz input[type=text]::placeholder,
  :root[data-theme="light"] .wiz textarea::placeholder { color: rgba(15,15,30,0.4); }
  :root[data-theme="light"] .footer-bar { background: rgba(255,255,255,0.85); border-top-color: rgba(15,15,30,0.08); }
  :root[data-theme="light"] .bg-radial {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(108,99,255,0.08) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(78,205,196,0.05) 0%, transparent 50%);
  }
  :root[data-theme="light"] .toast { background: #ffffff !important; color: var(--text) !important; border: 1px solid rgba(15,15,30,0.1) !important; }
  :root[data-theme="light"] .sidebar-secondary {
    background: rgba(255,255,255,0.85) !important;
    border-right-color: rgba(15,15,30,0.08) !important;
  }
  :root[data-theme="light"] .sidebar-secondary-head { border-bottom-color: rgba(15,15,30,0.08) !important; }
  /* :not([class*="auto-item"]) — die Automations-Karte bringt ihr eigenes
     Light-Aussehen mit (weisse Karte, transparente Innenteile). Ohne diesen
     Ausschluss gewinnt die Pauschalregel per Spezifitaet und legt graue Balken
     ueber Titel, Chips und Lauf-Historie (Befund 08.08.2026). */
  /* Anlege-Knoepfe sind BEWUSST nicht mehr dabei: sie sind Handlungen, keine
     Listenelemente. Die Pauschalregel gab ihnen weisse Schrift auf 4%-Grau —
     „+ Neue Automation" war im hellen Theme praktisch unsichtbar. Sie behalten
     ihre Akzentfarbe aus der Basisregel (gemessen und behoben 11.08.2026). */
  :root[data-theme="light"] .sidebar-secondary [class*="-item"]:not([class*="menu-item"]):not([class*="auto-item"]),
  :root[data-theme="light"] .sidebar-secondary [class*="-card"] {
    background: rgba(15,15,30,0.04) !important;
    border-color: rgba(15,15,30,0.08) !important;
    color: var(--text) !important;
  }
  :root[data-theme="light"] .sidebar-secondary [class*="-item"]:not([class*="menu-item"]):not([class*="auto-item"]):hover {
    background: rgba(15,15,30,0.06) !important;
  }

  /* Sidebar-Toggle (Handle zwischen Sidebar und Content) — hat hardcodete
     dunkle BG, in Light auf hell zwingen. */
  :root[data-theme="light"] .sidebar-toggle {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(15,15,30,0.12);
    border-left: none;
    color: rgba(20,20,29,0.55);
  }
  :root[data-theme="light"] .sidebar-toggle:hover {
    background: rgba(108,99,255,0.12);
    border-color: rgba(108,99,255,0.32);
    color: #14141d;
  }

  /* Plan-Badge ("Free Trial · 13 Tage") — Default-Stil ist halbtransparent
     mit lila Akzent, im Light-Mode wirken die hellen Tinten zu kontrastarm.
     Volle Sättigung + lesbare Textfarbe. */
  :root[data-theme="light"] .plan-badge.tone-info {
    background: rgba(108,99,255,0.18) !important;
    border: 1px solid rgba(108,99,255,0.55) !important;
    color: #4a3fce !important;
  }
  :root[data-theme="light"] .plan-badge.tone-warn {
    background: rgba(217,119,6,0.18) !important;
    border: 1px solid rgba(217,119,6,0.55) !important;
    color: #92400e !important;
  }
  :root[data-theme="light"] .dsgvo-chip-tip {
    background: #ffffff !important;
    color: #14141d !important;
    border: 1px solid rgba(15,15,30,0.14) !important;
    box-shadow: 0 10px 28px rgba(20,20,29,0.16) !important;
  }
  :root[data-theme="light"] .plan-badge.tone-neutral {
    background: rgba(15,15,30,0.05) !important;
    border: 1px solid rgba(15,15,30,0.16) !important;
    color: rgba(20,20,29,0.66) !important;
  }
  :root[data-theme="light"] .plan-badge.tone-error {
    background: rgba(220,38,38,0.16) !important;
    border: 1px solid rgba(220,38,38,0.55) !important;
    color: #991b1b !important;
  }

  /* Tour-Card (Tutorial-Coach-Marks) — dunkle Gradient-BG ohne Variable */
  :root[data-theme="light"] .tour-card {
    background: linear-gradient(180deg, #ffffff, #f8f8fc) !important;
    border: 1px solid rgba(108,99,255,0.28) !important;
    box-shadow: 0 18px 48px rgba(20,20,29,0.16) !important;
    color: var(--text) !important;
  }
  /* .tour-overlay: Light-Sonderfarbe entfallen — --a4h-overlay gilt in beiden Themes. */
  /* Light-Theme: das große rgba(8,8,15,0.55)-Box-Shadow auf .tour-highlight
     verdunkelt die gesamte Seite und lässt auch das markierte Element trüb
     wirken. Wir benutzen im Light-Mode einen viel helleren Schleier plus
     einen kräftigeren Purple-Glow am Ring — Fokus bleibt klar, Umgebung
     bleibt hell. Eigene Keyframes (`tour-pulse-light`) sind nötig, weil
     CSS keine Theme-Overrides für @keyframes erlaubt. */
  :root[data-theme="light"] .tour-highlight {
    animation: tour-pulse-light 1.8s ease-in-out infinite !important;
  }
  :root[data-theme="light"] .tour-overlay.has-highlight .tour-mask { opacity: 0; }

  /* RAG-Preview-Tooltip */
  .doc-rag-tooltip {
    background: var(--surface2, #1a1a2e);
    border: 1px solid rgba(108,99,255,0.35);
    color: var(--text, #ddd);
  }
  :root[data-theme="light"] .doc-rag-tooltip {
    background: #fff;
    border-color: rgba(108,99,255,0.25);
    color: #1a1a2e;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  }


  /* Theme-Toggle-Button — gleiche Optik wie andere Topbar-Icon-Buttons. */
  #themeToggleBtn .icon-sun  { display: none; }
  #themeToggleBtn .icon-moon { display: block; }
  :root[data-theme="light"] #themeToggleBtn .icon-sun  { display: block; }
  :root[data-theme="light"] #themeToggleBtn .icon-moon { display: none; }
  html, body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
  }
  body { display: flex; flex-direction: column; }

  /* Layout-Wrapper mit optionaler Sidebar */
  .app-shell { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
  .app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

  /* ── Unterhaltungen („Sessions") ──────────────────────────────────
     Zweite schmale Spalte zwischen Werkzeug-Sidebar und Chat. Standardmäßig
     ausgeblendet; die Chat-Logik blendet sie ein, sobald der Verlauf geladen
     ist — so entsteht kein leerer Kasten, falls das Skript nicht durchläuft. */
  .conv-sidebar {
    /* Feste Breite: die Leiste darf durch lange Namen NIE breiter werden —
       zu lange Begriffe werden im Eintrag mit „…" abgeschnitten. */
    flex: 0 0 210px;
    width: 210px; max-width: 210px; overflow-x: hidden;
    display: none;
    flex-direction: column;
    min-height: 0;
    padding: 0.9rem 0.55rem;
    /* Identischer Hintergrund wie die linke Werkzeugleiste, nur gespiegelt. */
    background: linear-gradient(180deg, rgba(7,6,12,0.6) 0%, rgba(7,6,12,0.35) 100%);
    border-left: 1px solid var(--border);
  }
  .conv-sidebar.visible { display: flex; }
  .conv-sidebar.collapsed { display: none; }
  :root[data-theme="light"] .conv-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.35) 100%);
    border-left: 1px solid rgba(15,15,30,0.08);
  }
  .conv-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem; margin-bottom: 0.6rem; padding: 0 0.25rem;
  }
  .conv-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text2);
  }
  .conv-new {
    background: rgba(108,99,255,0.16); border: 1px solid rgba(108,99,255,0.4);
    color: var(--text); border-radius: 6px; cursor: pointer;
    font-size: 11px; font-weight: 700; padding: 0.22rem 0.5rem;
    font-family: inherit; white-space: nowrap;
  }
  .conv-new:hover { background: rgba(108,99,255,0.28); }
  .conv-list {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 0.15rem;
    /* Scrollen ja, klobiger Balken nein: schmale Leiste ohne Spur, der Griff
       erscheint erst beim Überfahren. Gleiches Muster wie im Chat-Verlauf. */
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .conv-list:hover { scrollbar-color: var(--border-strong) transparent; }
  .conv-list::-webkit-scrollbar { width: 6px; }
  .conv-list::-webkit-scrollbar-track { background: transparent; }
  .conv-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
  .conv-list:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
  .conv-list::-webkit-scrollbar-thumb:hover { background: var(--text2); }
  .conv-empty { color: var(--text3); font-size: 12px; padding: 0.5rem 0.4rem; }
  .conv-item {
    display: flex; align-items: center; gap: 0.3rem;
    min-width: 0; max-width: 100%; overflow: hidden;
    padding: 0.42rem 0.45rem; border-radius: 9px;
    border: 1px solid transparent; cursor: pointer;
    color: var(--text2); font-size: 12px; font-weight: 600;
    transition: all 0.13s;
  }
  .conv-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
  :root[data-theme="light"] .conv-item:hover { background: rgba(15,23,42,0.05); }
  /* Aktiver Eintrag bewusst neutral: nur ein dezent abgesetzter Hintergrund,
     kein farbiger Rahmen — die Leiste soll ruhig wirken. */
  .conv-item.active {
    background: rgba(255,255,255,0.07); border-color: transparent; color: var(--text);
  }
  :root[data-theme="light"] .conv-item.active { background: rgba(15,23,42,0.06); }
  .conv-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Umbenennen direkt im Eintrag — das Feld sitzt exakt an der Stelle des Namens. */
  .conv-item-edit {
    flex: 1 1 auto; min-width: 0; width: 100%;
    background: rgba(0,0,0,0.25); border: 1px solid var(--border-strong);
    border-radius: 6px; padding: 0.12rem 0.3rem; margin: -0.13rem 0;
    color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600;
  }
  :root[data-theme="light"] .conv-item-edit { background: #fff; }
  .conv-item-edit:focus { outline: none; border-color: var(--text3); }
  .conv-item-menu {
    flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
    color: var(--text3); font-size: 15px; line-height: 1; padding: 0 0.15rem;
    opacity: 0; transition: opacity 0.13s;
  }
  .conv-item:hover .conv-item-menu, .conv-item.active .conv-item-menu { opacity: 1; }
  .conv-item-menu:hover { color: var(--text); }
  /* Kontextmenü am ⋯-Knopf (Umbenennen / Löschen). Liegt am body, damit es
     nicht vom Überlauf der Liste abgeschnitten wird. */
  .conv-menu {
    position: fixed; z-index: 9000; width: 150px;
    background: var(--bg2, #16141f); border: 1px solid var(--border);
    border-radius: 9px; padding: 0.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    display: flex; flex-direction: column;
  }
  :root[data-theme="light"] .conv-menu { background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,0.14); }
  .conv-menu-item {
    background: transparent; border: none; cursor: pointer;
    text-align: left; padding: 0.45rem 0.55rem; border-radius: 6px;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  }
  .conv-menu-item:hover { background: rgba(108,99,255,0.16); }
  .conv-menu-item.danger { color: #ef4444; }
  .conv-menu-item.danger:hover { background: rgba(239,68,68,0.14); }
  /* Einklapp-Knopf: identische Optik zum Umschalter der linken Sidebar,
     nur an der rechten Kante gespiegelt (Rundung und offene Kante andersherum). */
  /* a4h-ausnahme: Einklapp-Griff an der Fensterkante, kein Ansichts-Umschalter */
  .conv-toggle {
    position: absolute;
    top: 50%; right: 210px;
    transform: translateY(-50%);
    width: 18px; height: 36px;
    border-radius: 6px 0 0 6px;
    background: rgba(19,19,31,0.9);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text3);
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    z-index: 6;
    transition: right 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
  }
  .conv-toggle.visible { display: inline-flex; }
  .conv-toggle.collapsed { right: 0; }
  .conv-toggle:hover { color: var(--text); background: rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.3); }
  :root[data-theme="light"] .conv-toggle {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(15,15,30,0.12);
    border-right: none;
    color: rgba(20,20,29,0.55);
  }
  :root[data-theme="light"] .conv-toggle:hover {
    background: rgba(108,99,255,0.12);
    border-color: rgba(108,99,255,0.32);
    color: #14141d;
  }
  /* Die Leiste liegt rechts: der Pfeil zeigt zum Zuklappen nach rechts,
     im zugeklappten Zustand nach links (zum Wiederaufklappen). */
  .conv-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; transform: rotate(180deg); }
  .conv-toggle.collapsed svg { transform: none; }
  @media (max-width: 900px) {
    .conv-sidebar.visible { display: none; }
    .conv-toggle.visible { display: none; }
  }

  .sidebar {
    flex: 0 0 180px;
    display: none;
    flex-direction: column;
    padding: 1rem 0.6rem;
    background: linear-gradient(180deg, rgba(7,6,12,0.6) 0%, rgba(7,6,12,0.35) 100%);
    border-right: 1px solid var(--border);
    gap: 0.25rem;
    position: relative;
    z-index: 5;
    /* Bei vielen Einträgen (oder kleinem Fenster) scrollbar statt abgeschnitten —
       dezent, der Griff erscheint erst beim Überfahren. */
    min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .sidebar:hover { scrollbar-color: var(--border-strong) transparent; }
  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
  .sidebar:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
  .sidebar::-webkit-scrollbar-thumb:hover { background: var(--text2); }
  .sidebar.visible { display: flex; }
  .sidebar.collapsed { flex: 0 0 0; padding: 0; border-right: none; overflow: hidden; }
  .sidebar.collapsed > * { display: none; }

  /* Collapse-Tab sitzt mittig an der Sidebar-Kante — nicht auf Höhe des
     Agent-Switchers oben (sonst überlappt der Pfeil den Agentennamen). */
  /* a4h-ausnahme: Einklapp-Griff an der Fensterkante, kein Ansichts-Umschalter */
  .sidebar-toggle {
    position: absolute;
    top: 50%; left: 180px;
    transform: translateY(-50%);
    width: 18px; height: 36px;
    border-radius: 0 6px 6px 0;
    background: rgba(19,19,31,0.9);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--text3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 6;
    transition: left 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
  }
  .app-shell:not(:has(.sidebar.visible)) .sidebar-toggle { display: none; }
  .app-shell:has(.sidebar.collapsed) .sidebar-toggle { left: 0; }
  .sidebar-toggle:hover { color: var(--text); background: rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.3); }
  .sidebar-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; }
  .app-shell:has(.sidebar.collapsed) .sidebar-toggle svg { transform: rotate(180deg); }
  .sidebar-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text3);
    padding: 0.5rem 0.75rem 0.35rem;
  }
  /* Form kommt aus .a4h-nav-item (§2c, brand.css) — hier stand sie als Kopie,
     und weil sie nur hier stand, war sie in keiner Vorgabe. */
  /* „Hinzufügen" ist kein Werkzeug, sondern der Weg zu einem neuen — deshalb
     optisch abgesetzt: gestrichelter Rahmen, etwas Abstand nach oben. */
  /* Grüner Grundton statt Grau: „Hinzufügen" ist die einladende Aktion in der
     Leiste — dezent genug, um die Werkzeugliste darüber nicht zu überstrahlen. */
  /* Form aus .a4h-nav-item.is-add (§2c). */
  .sidebar-btn-add:hover {
    color: var(--text);
    border-color: rgba(78,205,196,0.62);
    background: rgba(78,205,196,0.13);
  }
  /* Zwei-Klassen-Selektoren: `.sidebar-btn svg` und `.sidebar-btn.active` stehen
     weiter unten in der Datei und würden sonst gewinnen. */
  .sidebar-btn.sidebar-btn-add svg { color: var(--accent2); }
  .sidebar-btn.sidebar-btn-add.active {
    background: rgba(78,205,196,0.17);
    border: 1px solid rgba(78,205,196,0.52);
    color: var(--text);
  }
  /* Aktiv-Zustand aus .a4h-nav-item.active (§2c). */
  /* Exklusive Tools (admin-only bzw. account-spezifisch wie ALMiG) werden vom
     Plattform-Standard durch eine eigene Überschrift „Customized" abgesetzt —
     nicht durch eine anonyme Trennlinie: die Überschrift sagt auch WARUM der
     Bruch da ist (das darunter wurde für diesen Betrieb gebaut). Gleiche Optik
     wie „Workspace" oben (.sidebar-title), nur mit Abstand nach oben. Sichtbar
     nur, wenn dieser Account überhaupt einen Sondereintrag hat — entschieden
     zur Laufzeit in JS (markExclusiveSectionStart), weil die Buttons einzeln
     ein-/ausgeblendet werden. */
  .sidebar-title-custom { margin-top: 0.7rem; }
  /* Die für DIESEN Betrieb gebauten Werkzeuge stehen als eigene Sparte unter
     „Customized", abgesetzt durch einen Trennstrich (Ralph, 05.08.2026). Sie
     unterscheiden sich von den Nachbareinträgen: die sind fest verdrahtet,
     diese entstehen zur Laufzeit aus /api/tools/mine. Erscheint nur, wenn
     wirklich ein Werkzeug freigeschaltet ist — sonst keine leere Linie. */
  .sidebar-tools-sep {
    height: 1px; margin: 0.55rem 0.1rem 0.5rem;
    background: var(--border);
  }
  /* Werkzeuge im Testbetrieb sieht ausschließlich das Betreiber-Konto (der
     Server liefert sie anderen gar nicht erst aus). Der Punkt macht sichtbar,
     dass der Kunde diesen Eintrag noch NICHT hat. */
  .sidebar-btn .tool-test-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; flex: 0 0 auto; margin-left: auto;
  }

  /* Agent-Switcher */
  .sidebar-agent-switch { position: relative; margin-bottom: 0.6rem; }
  .agent-switch-btn {
    width: 100%; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text); font-family: inherit;
    cursor: pointer; transition: all 0.15s;
  }
  .agent-switch-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--border-strong); }
  /* a4h-ausnahme: Avatar, kein Knopf — Verlauf ist hier Schmuck */
  .agent-switch-btn .asb-avatar {
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff; font-weight: 700; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .agent-switch-btn .asb-name {
    flex: 1; min-width: 0; text-align: left;
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .agent-switch-btn svg { color: var(--text3); flex: 0 0 auto; transition: transform 0.15s; }
  .sidebar-agent-switch.open .agent-switch-btn svg { transform: rotate(180deg); }
  /* a4h-ausnahme: Aufklapp-Menue, kein Reiter */
  .agent-switch-menu {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 9px; padding: 0.25rem;
    max-height: 260px; overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 15;
  }
  .sidebar-agent-switch.open .agent-switch-menu { display: block; }
  .agent-switch-item {
    padding: 0.45rem 0.55rem;
    display: flex; align-items: center; gap: 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
  }
  .agent-switch-item:hover { background: rgba(255,255,255,0.05); }
  .agent-switch-item.active { background: rgba(78,205,196,0.12); }
  .agent-switch-item .aswi-avatar {
    width: 22px; height: 22px; flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff; font-weight: 700; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .agent-switch-item .aswi-name {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .agent-switch-item .aswi-role { font-size: 11px; color: var(--text3); }
  .agent-switch-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
  .agent-switch-add {
    padding: 0.45rem 0.55rem;
    display: flex; align-items: center; gap: 0.45rem;
    border-radius: 6px; cursor: pointer;
    color: var(--accent2); font-size: 12px; font-weight: 700;
  }
  .agent-switch-add:hover { background: rgba(78,205,196,0.08); }
  /* „Nächste Automation" in der Topbar (Ralph, 08.08.2026): waagerechte Pille
     links neben dem DSGVO-Chip statt Kachel am Fuss der Seitenleiste. Das
     Datum steht im Tooltip — in der Leiste zaehlt der Countdown. */
  .topbar-next-auto {
    display: none;
    align-items: center;
    gap: 0.35rem;
    max-width: 260px;
    padding: 0.25rem 0.6rem;
    background: rgba(78,205,196,0.07);
    border: 1px solid rgba(78,205,196,0.22);
    border-radius: 999px;
    color: var(--accent2);
    line-height: 1.2;
  }
  .topbar-next-auto.visible { display: inline-flex; }
  .topbar-next-auto svg { flex: 0 0 auto; }
  .topbar-next-auto .countdown { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .topbar-next-auto .name { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar-next-auto .name:not(:empty)::before { content: '·'; margin-right: 0.35rem; color: var(--text3); }
  /* Datum nur als Tooltip — der Text bleibt im DOM, damit die bestehende
     Aktualisierung unveraendert weiterlaeuft. */
  .topbar-next-auto .when { display: none; }
  @media (max-width: 900px) { .topbar-next-auto { display: none !important; } }
  .sidebar-clock {
    padding: 0.9rem 0.75rem 0.3rem;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  /* Die Automations-Kachel ist aus der Seitenleiste in die Topbar gewandert —
     die Uhr sitzt damit wieder unverrueckt am Fuss. */
  .sidebar-clock { margin-top: auto; }
  .sidebar-clock-time { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
  .sidebar-clock-date { font-size: 12px; color: var(--text3); margin-top: 0.15rem; letter-spacing: 0.02em; }
  .sidebar-btn svg { flex: 0 0 auto; color: var(--text3); transition: color 0.15s; }
  .sidebar-btn:hover svg, .sidebar-btn.active svg { color: var(--accent2); }

  /* Sekundär-Sidebar (Detail-Inhalt neben der primären) */
  .sidebar-secondary {
    flex: 0 0 340px;
    display: none;
    flex-direction: column;
    min-height: 0;
    background: rgba(13,12,22,0.7);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 4;
    overflow: hidden;
  }
  .sidebar-secondary.visible { display: flex; }
  /* Wissen-Modus: Sekundär-Sidebar 3x so breit (für die eingebettete Operator-Mindmap),
     Chat rückt dadurch ganz nach rechts */
  .sidebar-secondary.knowledge-mode { flex: 0 0 1020px; max-width: 70vw; }
  .sidebar-secondary.knowledge-mode .sidebar-secondary-body { padding: 0; overflow: hidden; }
  /* Ein Panel, das ein Werkzeug im Rahmen zeigt, bekommt KEIN eigenes Polster:
     das Werkzeug bringt seine Kopfzeile mit (BRANDING.md §2a). Sonst liegt die
     Reiterzeile je Werkzeug auf einer anderen Hoehe. */
  .sidebar-secondary-body:has(> iframe) { padding: 0; }

  /* ── Maske der Kundenwerkzeuge (UserTools) ────────────────────────────────
     Diese Flaeche entsteht zur Laufzeit aus /api/tools/mine. Sie war damit die
     einzige, die der Design-Kanon nie erreichte — jedes neue Kundenwerkzeug
     erbte die Inline-Optik. Jetzt traegt sie die Bausteine aus brand.css und
     braucht hier nur noch ihre eigenen Abstaende. */
  .a4h-feldzeile { margin-bottom: 0.85rem; }
  .a4h-pflicht { color: var(--danger, #e5484d); }
  .a4h-optional { color: var(--text3); font-weight: 400; }
  .wt-start { width: 100%; }
  .wt-testleiste {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    justify-content: space-between; margin-bottom: 1rem; padding: 0.5rem 0.7rem;
    border-radius: var(--a4h-r-m, 9px); background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
  }
  /* Organizer: die Bühne wechselt zwischen zwei Rahmen (Notizen/Zeichenfläche)
     und steht deshalb als <div> im Panel — dieselbe Regel gilt trotzdem, sonst
     sitzt die Kopfzeile der eingebetteten Seite um das Panel-Polster tiefer. */
  .sidebar-secondary-body:has(> #organizerBuehne) { padding: 0; overflow: hidden; }
  .vw-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0.6rem; }
  .vw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex: 0 0 auto; }
  .vw-status { font-size: 12px; color: var(--text3); flex: 1 1 auto; }
  .vw-save-btn {
    flex: 0 0 auto; font-size: 12px; padding: 0.35rem 0.8rem; border-radius: 6px;
    border: 1px solid var(--accent2); background: rgba(108,99,255,0.12); color: var(--text);
    cursor: pointer;
  }
  .vw-save-btn:hover { background: rgba(108,99,255,0.22); }
  .vw-canvas {
    flex: 1 1 auto; min-height: 260px; overflow: auto; border: 1px solid var(--border);
    border-radius: 9px; background: rgba(255,255,255,0.02); display: flex;
    align-items: center; justify-content: center; padding: 0.8rem;
  }
  .vw-canvas svg { max-width: 100%; height: auto; }
  /* Dokument-/Layout-Artefakte (Folien/Tabelle/HTML) linksbündig oben statt zentriert */
  .vw-canvas.doc { align-items: stretch; justify-content: flex-start; }
  .vw-canvas.doc > * { width: 100%; }
  /* Zwei-Spalten-Layout: Artefakt links (groß), Chat rechts (Faden + Quellen +
     Eingabe als eigene Spalte). Nutzt die volle Panel-Breite aus vw-focus. */
  .vw-body { display: flex; flex: 1 1 auto; min-height: 0; gap: 0.7rem; }
  .vw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
  .vw-main .vw-canvas { flex: 1 1 auto; }
  .vw-side {
    flex: 0 0 340px; display: flex; flex-direction: column; min-height: 0; gap: 0.5rem;
    border-left: 1px solid var(--border); padding-left: 0.7rem;
  }
  /* In der Chat-Spalte füllt der Faden den Platz (nicht mehr auf 26% gedeckelt) */
  .vw-side .vw-thread { flex: 1 1 auto; max-height: none; min-height: 60px; }
  .vw-side .vw-saved { flex: 0 0 auto; max-height: 24%; overflow-y: auto; }
  .vw-side .vw-composer { flex: 0 0 auto; }
  /* In der schmalen Chat-Spalte umbricht der Placeholder — etwas mehr Starthöhe */
  .vw-side .vw-composer-input { min-height: 52px; }
  .vw-side .vw-source-row { flex: 0 0 auto; }
  /* Schmales Panel / Mobile: zurück auf gestapelt (Chat wieder unten) */
  @media (max-width: 900px) {
    .vw-body { flex-direction: column; }
    .vw-side { flex-basis: auto; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 0.5rem; }
    .vw-side .vw-thread { max-height: 26%; }
    .vw-main .vw-canvas { min-height: 240px; }
  }
  /* Generiertes Bild: klickbar (Vollansicht) + Verwerfen-✕ beim Hovern */
  .vw-image-wrap { position: relative; display: inline-flex; max-width: 100%; max-height: 100%; }
  .vw-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 9px; cursor: zoom-in; }
  .vw-image-discard {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px;
    border: 1px solid var(--border-strong, rgba(255,255,255,0.2)); background: rgba(13,12,22,0.78); color: var(--text);
    cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
  }
  .vw-image-wrap:hover .vw-image-discard { opacity: 1; }
  .vw-image-discard:hover { color: #fca5a5; border-color: #fca5a5; }
  /* Vollbild-Lightbox für Bilder */
  .vw-img-overlay {
    position: fixed; inset: 0; z-index: 9999; background: transparent;
    display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; cursor: zoom-out;
  }
  .vw-img-full { max-width: 95vw; max-height: 94vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,0.6); }
  .vw-img-overlay-hint { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.6); font-size: 13px; pointer-events: none; }
  /* Pan & Zoom für Diagramme */
  .vw-zoom-wrap { position: relative; width: 100%; height: 100%; min-height: 240px; overflow: hidden; touch-action: none; cursor: grab; }
  .vw-zoom-wrap.dragging { cursor: grabbing; }
  .vw-zoom-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .vw-zoom-wrap svg { max-width: none !important; display: block; }
  .vw-zoom-ctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 3; }
  .vw-zoom-ctl button {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
    background: rgba(13,12,22,0.75); color: var(--text); cursor: pointer; font-size: 14px; line-height: 1;
  }
  .vw-zoom-ctl button:hover { border-color: var(--accent2); }
  /* Format-Badge in der Toolbar */
  .vw-kind-badge {
    flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border);
    color: var(--text3); background: rgba(255,255,255,0.03);
  }
  /* Konversations-Faden (Rückfragen/Notizen) */
  .vw-thread { flex: 0 0 auto; max-height: 26%; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }
  .vw-thread:empty { display: none; }
  .vw-msg { max-width: 88%; font-size: 13px; line-height: 1.45; padding: 0.45rem 0.65rem; border-radius: 9px; white-space: pre-wrap; }
  .vw-msg.user { align-self: flex-end; background: rgba(108,99,255,0.16); border: 1px solid var(--accent2); }
  .vw-msg.assistant { align-self: flex-start; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
  .vw-msg.assistant.note { color: var(--text3); font-size: 12px; font-style: italic; border-style: dashed; }
  /* Folien-Viewer — 16:9-Bühne mit Akzent, Titelfolie und Fußzeile.
     Farben kommen aus Theme-Variablen (--sl-*), die der Client je Deck setzt. */
  .vw-slide-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
  .vw-slide {
    --sl-accent: #6c63ff; --sl-bg: #fff; --sl-grad: #f4f3ff; --sl-heading: #14151a; --sl-text: #1c1c28; --sl-foot: #9a9aad; --sl-rule: #ececf3;
    position: relative; background: var(--sl-bg); color: var(--sl-text); border-radius: 12px;
    padding: 2.4rem 2.8rem 2.6rem; aspect-ratio: 16 / 9; min-height: 320px;
    box-shadow: 0 6px 26px rgba(0,0,0,0.28); overflow: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
    border-top: 5px solid var(--sl-accent);
  }
  .vw-slide h1 { font-size: 32px; margin: 0 0 0.7rem; line-height: 1.15; color: var(--sl-heading); font-weight: 700; letter-spacing: -0.01em; }
  .vw-slide h2 {
    font-size: 24px; margin: 0 0 1rem; line-height: 1.2; color: var(--sl-heading); font-weight: 700;
    padding-bottom: 0.5rem; border-bottom: 2px solid var(--sl-accent);
  }
  .vw-slide h3 { font-size: 20px; margin: 0.6rem 0 0.4rem; color: var(--sl-heading); opacity: 0.85; }
  .vw-slide ul, .vw-slide ol { margin: 0.5rem 0 0.5rem 0.2rem; padding: 0; list-style: none; }
  .vw-slide li { margin: 0.55rem 0; padding-left: 1.5rem; position: relative; font-size: 15px; line-height: 1.45; }
  .vw-slide li::before {
    content: ''; position: absolute; left: 0.1rem; top: 0.6rem; width: 0.55rem; height: 0.55rem;
    border-radius: 2px; background: var(--sl-accent); transform: rotate(45deg);
  }
  .vw-slide ol { counter-reset: vwli; }
  .vw-slide ol li::before { content: counter(vwli); counter-increment: vwli; background: none; color: var(--sl-accent); font-weight: 700; top: 0; left: 0; width: auto; height: auto; transform: none; font-size: 15px; }
  .vw-slide p { margin: 0.4rem 0; font-size: 15px; line-height: 1.5; }
  .vw-slide strong { color: var(--sl-heading); }
  /* Titelfolie: großzügig, zentriert, ohne Bullet-Optik */
  .vw-slide.vw-slide-title { justify-content: center; align-items: flex-start; background: linear-gradient(135deg, var(--sl-bg) 0%, var(--sl-grad) 100%); }
  .vw-slide.vw-slide-title h1 { font-size: 40px; margin-bottom: 1rem; }
  .vw-slide.vw-slide-title p { font-size: 20px; color: var(--sl-foot); max-width: 42ch; opacity: 0.95; }
  /* Fußzeile mit Firmenname + Foliennummer */
  .vw-slide-foot {
    position: absolute; left: 2.8rem; right: 2.8rem; bottom: 1rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--sl-foot); border-top: 1px solid var(--sl-rule); padding-top: 0.5rem;
  }
  .vw-slide.vw-slide-title .vw-slide-foot { border-top: none; }
  .vw-foot-brand { display: inline-flex; align-items: center; gap: 0.4rem; }
  .vw-foot-logo { height: 16px; width: auto; max-width: 90px; }
  /* Bullet-Icons */
  .vw-ico { display: inline-flex; vertical-align: -0.18em; width: 1.15em; height: 1.15em; color: var(--sl-accent); margin-right: 0.15em; }
  .vw-ico svg { width: 100%; height: 100%; }
  .vw-slide li .vw-ico { position: static; margin-left: -0.1em; }
  /* Kennzahl-Folie */
  .vw-slide.vw-slide-stat, .vw-present-slide.vw-slide-stat { justify-content: center; align-items: center; text-align: center; }
  .vw-stat { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
  .vw-stat-num { font-size: 74px; font-weight: 700; line-height: 1; color: var(--sl-accent); letter-spacing: -0.02em; }
  .vw-stat-cap { font-size: 20px; color: var(--sl-text); opacity: 0.85; max-width: 30ch; }
  .vw-present-slide .vw-stat-num { font-size: 112px; }
  .vw-present-slide .vw-stat-cap { font-size: 32px; }
  /* Eingebettetes Diagramm in der Folie */
  .vw-embed-chart { margin: 0.6rem auto; max-width: 92%; display: flex; justify-content: center; }
  .vw-embed-chart svg { max-width: 100%; height: auto; max-height: 46vh; }
  /* Folien-Miniaturstreifen */
  .vw-filmstrip { display: flex; align-items: stretch; gap: 0.4rem; overflow-x: auto; padding: 0.2rem 0.1rem; }
  .vw-film {
    position: relative; flex: 0 0 auto; min-width: 108px; max-width: 150px; display: flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,0.03);
    cursor: pointer; font-size: 12px; color: var(--text2);
  }
  .vw-film:hover { border-color: var(--accent2); }
  .vw-film.active { border-color: var(--accent2); background: rgba(108,99,255,0.14); color: var(--text); }
  .vw-film.dragging { opacity: 0.4; }
  .vw-film-n { flex: 0 0 auto; font-weight: 700; color: var(--accent2); }
  .vw-film-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vw-film-del { flex: 0 0 auto; border: none; background: none; color: var(--text3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0.1rem; opacity: 0; }
  .vw-film:hover .vw-film-del { opacity: 0.7; }
  .vw-film-del:hover { color: #fca5a5; opacity: 1; }
  .vw-film-add {
    flex: 0 0 auto; min-width: 34px; border: 1px dashed var(--border); border-radius: 9px; background: none; color: var(--text3);
    cursor: pointer; font-size: 15px;
  }
  .vw-film-add:hover { border-color: var(--accent2); color: var(--text); }
  /* Theme-Leiste: Farbvorlagen zum manuellen Einfärben */
  .vw-theme-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 12px; color: var(--text3); }
  .vw-theme-bar .vw-theme-label { margin-right: 0.1rem; }
  .vw-theme-sw {
    width: 20px; height: 20px; border-radius: 999px; cursor: pointer; border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--border); padding: 0;
  }
  .vw-theme-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent2); }
  .vw-theme-custom { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
  .vw-slide-nav { display: flex; align-items: center; justify-content: center; gap: 0.8rem; font-size: 13px; color: var(--text3); }
  .vw-slide-nav button {
    border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text);
    border-radius: 6px; padding: 0.25rem 0.7rem; cursor: pointer; font-size: 14px;
  }
  .vw-slide-nav button:disabled { opacity: 0.4; cursor: default; }
  /* Präsentationsmodus (Vollbild-Overlay) */
  .vw-present {
    position: fixed; inset: 0; z-index: 9999; background: #0b0a12;
    display: flex; align-items: center; justify-content: center; padding: 4vh 5vw;
  }
  .vw-present-slide {
    --sl-accent: #6c63ff; --sl-bg: #fff; --sl-grad: #f4f3ff; --sl-heading: #14151a; --sl-text: #1c1c28; --sl-foot: #9a9aad;
    position: relative; background: var(--sl-bg); color: var(--sl-text); border-radius: 12px; width: 100%; max-width: 1180px;
    aspect-ratio: 16 / 9; max-height: 88vh; padding: 4rem 4.5rem; overflow: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5); font-size: 20px; line-height: 1.55;
    display: flex; flex-direction: column; justify-content: flex-start;
    border-top: 6px solid var(--sl-accent);
  }
  .vw-present-slide h1 { font-size: 51px; margin: 0 0 1rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; color: var(--sl-heading); }
  .vw-present-slide h2 { font-size: 40px; margin: 0 0 1.4rem; line-height: 1.2; font-weight: 700; padding-bottom: 0.6rem; border-bottom: 3px solid var(--sl-accent); color: var(--sl-heading); }
  .vw-present-slide h3 { font-size: 24px; margin: 0.6rem 0 0.7rem; color: var(--sl-heading); opacity: 0.85; }
  .vw-present-slide ul, .vw-present-slide ol { list-style: none; margin: 0.6rem 0 0 0; padding: 0; }
  .vw-present-slide li { margin: 0.85rem 0; padding-left: 2rem; position: relative; }
  .vw-present-slide li::before { content: ''; position: absolute; left: 0.2rem; top: 0.65rem; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--sl-accent); transform: rotate(45deg); }
  .vw-present-slide strong { color: var(--sl-heading); }
  .vw-present-slide.vw-slide-title { justify-content: center; background: linear-gradient(135deg, var(--sl-bg) 0%, var(--sl-grad) 100%); }
  .vw-present-slide.vw-slide-title h1 { font-size: 64px; }
  .vw-present-slide.vw-slide-title p { font-size: 32px; color: var(--sl-foot); opacity: 0.95; }
  .vw-present-bar {
    position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 1rem;
    align-items: center; justify-content: center; color: rgba(255,255,255,0.55); font-size: 14px;
  }
  .vw-present-bar button {
    background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff;
    border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 14px;
  }
  /* Tabelle */
  .vw-doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .vw-doc-table th, .vw-doc-table td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
  .vw-doc-table th { background: rgba(108,99,255,0.12); font-weight: 600; }
  .vw-doc-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
  .vw-doc-md h1, .vw-doc-md h2, .vw-doc-md h3 { margin: 0.4rem 0; }
  .vw-doc-md ul, .vw-doc-md ol { margin: 0.3rem 0 0.3rem 1.2rem; }
  /* HTML-Einseiter im sandboxed iframe */
  .vw-html-frame { width: 100%; min-height: 320px; border: none; background: #fff; border-radius: 9px; }
  /* Direkt-Editor (Quelltext) */
  .vw-editor { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; height: 100%; }
  .vw-editor textarea {
    flex: 1 1 auto; min-height: 240px; width: 100%; resize: vertical; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.5; border: 1px solid var(--border); border-radius: 9px;
    background: rgba(0,0,0,0.18); color: var(--text); padding: 0.7rem;
  }
  .vw-editor textarea:focus { outline: none; border-color: var(--accent2); }
  .vw-editor-bar { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
  .vw-editor-hint { flex: 1 1 auto; font-size: 12px; color: var(--text3); }
  /* Quell-Import-Leiste */
  .vw-source-row { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .vw-source-label { font-size: 12px; color: var(--text3); }
  .vw-source-btn {
    font-size: 12px; padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text);
  }
  .vw-source-btn:hover { border-color: var(--accent2); background: rgba(108,99,255,0.12); }
  /* Quell-Picker (im Canvas) */
  .vw-picker { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
  .vw-picker-title { font-size: 13px; color: var(--text3); margin-bottom: 0.3rem; }
  .vw-picker-item {
    display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; text-align: left;
    padding: 0.5rem 0.7rem; border-radius: 9px; border: 1px solid var(--border);
    background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; font-size: 13px;
  }
  .vw-picker-item:hover { border-color: var(--accent2); background: rgba(108,99,255,0.12); }
  .vw-picker-date { font-size: 12px; color: var(--text3); flex: 0 0 auto; }
  /* Leerer Zustand: dezenter Hinweis (statt Format-Chip-Zeile) */
  .vw-empty-hint {
    max-width: 40ch; text-align: center; color: var(--text3); font-size: 14px; line-height: 1.55;
  }
  .vw-empty-sub { display: inline-block; margin-top: 0.6rem; font-size: 13px; opacity: 0.8; }
  /* Format-Filter über der Gespeichert-Liste */
  .vw-saved-filter { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
  .vw-filter-chip {
    font-size: 11px; padding: 0.15rem 0.55rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: none; color: var(--text3);
  }
  .vw-filter-chip.active { border-color: var(--accent2); color: var(--text); background: rgba(108,99,255,0.12); }
  .vw-saved { flex: 0 0 auto; max-height: 34%; overflow-y: auto; border-top: 1px solid var(--border); padding-top: 0.5rem; }
  .vw-saved-title { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
  .vw-saved-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 6px;
    cursor: pointer; font-size: 13px;
  }
  .vw-saved-item:hover { background: rgba(255,255,255,0.05); }
  .vw-saved-item .vw-saved-item-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vw-saved-item .vw-saved-item-actions { flex: 0 0 auto; display: flex; gap: 0.3rem; opacity: 0.6; }
  .vw-saved-item .vw-saved-item-actions button {
    background: none; border: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 0.1rem 0.3rem;
  }
  .vw-saved-item .vw-saved-item-actions button:hover { color: var(--text); }
  .vw-composer {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 0.5rem;
    border-top: 1px solid var(--border); padding-top: 0.6rem;
    /* Extra Rechts-Puffer: im Fokus-Modus reicht das Panel bis an den Viewport-
       Rand — dort sitzt fix positioniert der globale Bug-Report-Dot
       (site/assets/js/bug-button.js, 32px, bottom:20px/right:20px, z-index
       max). Ohne Puffer landet der Senden-Button exakt darunter und ist
       nicht klickbar. */
    padding-right: 3rem;
  }
  .vw-composer-input {
    flex: 1 1 auto; resize: none; min-height: 38px; max-height: 140px; overflow-y: auto;
    border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,0.03);
    color: var(--text); padding: 0.55rem 0.7rem; font: inherit; font-size: 14px; line-height: 1.4;
  }
  .vw-composer-input:focus { outline: none; border-color: var(--accent2); }
  .vw-composer-send {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; border: none;
    background: var(--accent2); color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .vw-composer-send:hover { opacity: 0.88; }
  .vw-composer-send:disabled { opacity: 0.5; cursor: default; }
  /* Fokus-Modus: solange das Visual-Panel offen ist, verschwindet der Haupt-Chat
     komplett und das Panel bekommt die volle Breite (statt fixer knowledge-mode-Breite). */
  .app-main.vw-hidden { display: none; }
  .sidebar-secondary.vw-focus { flex: 1 1 auto; max-width: none; }
  /* Mobile: das generische <760px-Verstecken der Secondary-Sidebar würde das
     Visualisieren-Panel komplett unbenutzbar machen — im vw-Fokus-Modus bleibt
     es sichtbar und nimmt die volle Breite (3-Klassen-Selektor schlägt die
     2-Klassen-Hide-Regel unabhängig von der Reihenfolge). */
  @media (max-width: 760px) {
    .sidebar-secondary.vw-focus.visible { display: flex; flex: 1 1 auto; max-width: none; width: 100%; }
    .vw-toolbar { flex-wrap: wrap; }
    .vw-source-row { overflow-x: auto; flex-wrap: nowrap; }
  }
  /* E-Mail-Versand-Dialog */
  .vw-mail-overlay {
    position: fixed; inset: 0; z-index: 9998; background: transparent;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
  }
  .vw-mail-box {
    width: 100%; max-width: 420px; background: #14131f; border: 1px solid var(--border-strong, rgba(255,255,255,0.18));
    border-radius: 12px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .vw-mail-box .vw-mail-title { font-size: 15px; font-weight: 600; margin-bottom: 0.2rem; }
  .vw-mail-box label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; color: var(--text3); }
  .vw-mail-box input, .vw-mail-box textarea, .vw-mail-box select {
    font: inherit; font-size: 14px; color: var(--text); background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); border-radius: 9px; padding: 0.45rem 0.6rem;
  }
  .vw-mail-box input:focus, .vw-mail-box textarea:focus, .vw-mail-box select:focus { outline: none; border-color: var(--accent2); }
  .vw-mail-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; }
  .vw-mail-status { font-size: 12px; color: var(--text3); min-height: 1em; }
  /* Panel-Kopfzeile (Titel + Schließen-X) global ausgeblendet (Wunsch Ralph):
     das linke Menü zeigt ohnehin, in welchem Panel man ist, und schließen/wechseln
     geht über die Sidebar (Chat-Button ruft closePanel, anderes Panel wechselt).
     Element bleibt im DOM (nicht entfernt), damit JS, das #sidebarSecondaryTitle
     befüllt, nicht auf null läuft. Body gewinnt die frei gewordene Höhe. */
  .sidebar-secondary-head {
    display: none;
    align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  /* Wenn Sidebar-Toggle sichtbar (Workspace-Modus), Titel rechts von ihm beginnen */
  .app-shell:has(.sidebar.visible) .sidebar-secondary-head { padding-left: 2rem; }
  .sidebar-secondary-title {
    font-size: 15px; font-weight: 700;
    color: var(--text);
  }
  .sidebar-secondary-close {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    transition: all 0.15s;
  }
  .sidebar-secondary-close:hover { color: var(--text); border-color: var(--border-strong); }
  .sidebar-secondary-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .sidebar-secondary-body::-webkit-scrollbar { width: 6px; }
  .sidebar-secondary-body::-webkit-scrollbar-track { background: transparent; }
  .sidebar-secondary-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
  .sidebar-secondary-body::-webkit-scrollbar-thumb:hover { background: var(--text2); }

  /* Resize-Handle an der rechten Kante der Sekundär-Sidebar.
     Primär-Sidebar bleibt bewusst fixbreit — nur Level 2 ist zieh­bar. */
  .sidebar-secondary-resizer {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 6;
    background: transparent;
    transition: background 0.15s;
  }
  .sidebar-secondary-resizer:hover,
  .sidebar-secondary.resizing .sidebar-secondary-resizer {
    background: linear-gradient(90deg, transparent 0%, rgba(108,99,255,0.35) 100%);
  }
  .sidebar-secondary.resizing { user-select: none; }
  body.resizing-secondary { cursor: col-resize; user-select: none; }
  body.resizing-secondary * { user-select: none !important; }
  /* Während Resize: pointer-events auf iframes blocken, sonst frisst der
     iframe die mousemove-Events und das Drag "hängt", sobald die Maus
     über den iframe wandert. */
  body.resizing-secondary iframe { pointer-events: none !important; }

  @media (max-width: 900px) {
    .sidebar-secondary.visible { flex: 0 0 280px; }
  }
  /* ── Mobile Navigation (Handy / PWA) ──────────────────────────
     Statt die Sidebar zu verstecken (Module wären unerreichbar), wird sie
     zum Off-Canvas-Drawer: Burger in der Topbar öffnet sie, Backdrop/Auswahl
     schließt sie. Das Modul-Panel (Wissen/Notizen/…) läuft als Vollbild-
     Overlay mit seinem vorhandenen ×-Button. */
  @media (max-width: 760px) {
    .sidebar.visible {
      display: flex;
      position: fixed; top: 0; left: 0; bottom: 0;
      width: min(78vw, 300px);
      flex: none;
      /* !important: die Theme-Regeln (:root[data-theme=…] .sidebar) haben höhere
         Spezifität und setzen sonst einen halbtransparenten Verlauf — im
         Overlay-Drawer muss der Hintergrund deckend sein. */
      background: var(--surface-solid) !important;
      border-right: 1px solid var(--border-strong);
      box-shadow: 12px 0 50px rgba(0,0,0,0.45);
      z-index: 1300;
      transform: translateX(-105%);
      transition: transform 0.22s ease;
      padding-top: calc(1rem + env(safe-area-inset-top, 0px));
      overflow-y: auto;
    }
    .sidebar.visible.mob-open { transform: translateX(0); }
    /* Desktop-Zustand „collapsed" darf den Drawer nicht leeren */
    .sidebar.visible.collapsed { flex: none; padding: 1rem 0.6rem; overflow-y: auto; border-right: 1px solid var(--border-strong); }
    .sidebar.visible.collapsed > * { display: revert; }
    .sidebar.visible.collapsed .sidebar-btn { display: flex; }
    .sidebar-toggle { display: none !important; }
    .mob-nav-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: var(--a4h-overlay, rgba(0,0,0,0.35));
      z-index: 1290;
    }
    .mob-nav-backdrop.show { display: block; }
    .sidebar-secondary.visible {
      position: fixed; inset: 0;
      flex: none; width: auto; max-width: none;
      z-index: 1280;
      background: var(--bg);
      border-right: none;
      padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar-secondary.knowledge-mode { flex: none; max-width: none; }
  }

  .bg-radial {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(108,99,255,0.14) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(78,205,196,0.08) 0%, transparent 50%);
  }

  /* Panel-Fenster-Modus (`?chrome=auto`, Operator-Arc-Icons): die Top-Navigation
     kostet in einem kleinen Fenster zu viel Höhe und wird deshalb ausgeblendet.
     Sie kommt zurück, sobald das Fenster groß genug ist (maximiert / ≥ 80 %
     Bildschirmhöhe) — die Klasse `chrome-visible` setzt initChromeAuto() in JS. */
  body.chrome-auto .topbar { display: none; }
  body.chrome-auto.chrome-visible .topbar { display: flex; }

  /* ── Top Bar ── */
  .topbar {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.4rem;
    background: linear-gradient(180deg, rgba(7,6,12,0.92) 0%, rgba(7,6,12,0.75) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .topbar-logo img { height: 40px; display: block; }
  /* Logo + Section-Label gruppieren, damit das Label direkt am Logo klebt
     (statt durch justify-content: space-between auseinandergerissen zu
     werden). */
  .topbar-left {
    display: flex; align-items: center; gap: 0.9rem;
    flex: 0 0 auto;
    padding-left: 0.5rem;
  }
  /* Section-Label als reiner Text, kein Pillen-Hintergrund. Größer und
     enger am Logo, damit es als zugehöriger Sub-Header liest. */
  .topbar-section-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
  }
  @media (max-width: 640px) {
    .topbar-section-label { display: none; }
  }
  .topbar-agent {
    display: flex; align-items: center; gap: 0.75rem;
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .agent-hex {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 8px rgba(108,99,255,0.45));
  }
  .agent-hex img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .agent-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: center; align-items: center; }
  .agent-name { font-size: 15px; font-weight: 700; color: var(--text); }
  .agent-role { font-size: 12px; color: var(--text2); }
  .agent-project-badge {
    display: none;
    margin-top: 0.25rem;
    font-size: 11px; font-weight: 700;
    padding: 0.15rem 0.6rem;
    background: rgba(78,205,196,0.14);
    border: 1px solid rgba(78,205,196,0.4);
    border-radius: 999px;
    color: var(--accent2);
  }
  .agent-project-badge.visible { display: inline-block; }
  .agent-project-badge button { background: transparent; border: none; color: var(--accent2); cursor: pointer; padding: 0 0 0 0.3rem; font-size: 13px; }
  .agent-project-badge button:hover { color: var(--text); }

  /* Automationen-Panel */
  .auto-create-btn {
    flex: 1; padding: 0.6rem 1rem;
    background: var(--accent);
    border: 0; border-radius: 999px; color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 10px 24px -14px rgba(108,99,255,0.9);
    transition: opacity 0.15s, transform 0.15s;
  }
  .auto-create-btn:hover { opacity: 0.92; }
  @media (prefers-reduced-motion: reduce) { .auto-create-btn:hover { transform: none; } }
  /* Anlegen-Knopf sitzt UNTER den bestehenden Automationen und bleibt klein —
     die Liste ist der Inhalt, das Anlegen die seltene Nebenhandlung. */
  .auto-create-row { display: flex; margin: 0.8rem 0 0; }
  .auto-create-row .auto-create-btn {
    flex: 0 0 auto; padding: 0.3rem 0.75rem;
    font-size: 12px; font-weight: 600;
    box-shadow: none;
  }
  /* Die pauschale Light-Regel weiter oben faerbt jeden Knopf grau. Der
     Anlegen-Knopf muss sie ueberall ueberschreiben, nicht nur in der
     Seitenleiste: im Automationen-Panel stand sonst weisse Schrift auf
     4%-Grau — der Knopf war praktisch unsichtbar (gemessen 11.08.2026). */
  :root[data-theme="light"] .auto-create-btn,
  :root[data-theme="light"] .sidebar-secondary .auto-create-btn {
    background: var(--accent);
    border-color: transparent !important;
    color: #fff !important;
  }
  :root[data-theme="light"] .auto-create-btn:hover,
  :root[data-theme="light"] .sidebar-secondary .auto-create-btn:hover {
    background: color-mix(in srgb, var(--accent) 86%, #fff);
  }

  /* Umschalter Automationen ↔ Workflows im Panel-Kopf (ein Sidebar-Eintrag für beide) */
  /* Automationen ↔ Workflows WECHSELT die Ansicht — laut Kanon §1 ist das
     eine Reiterleiste, kein Segmented Control. */
  .panel-seg { display: inline-flex; align-items: center; gap: 0.25rem; }
  .panel-seg-btn {
    border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
    padding: 9px 16px;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    transition: color .12s, border-color .12s;
  }
  .panel-seg-btn.active { color: var(--text); border-bottom-color: var(--accent); cursor: default; }
  .panel-seg-btn:not(.active):hover { color: var(--text); }

  /* ── „Hinzufügen"-Panel (Werkzeug anfragen) ─────────────────────────
     Kein Formular, sondern ein geführter Fragebogen — bewusst in derselben
     Design-Sprache wie das Pilot-Onboarding (site/onboarding.html): eine
     zentrierte Glas-Karte, eine Frage pro Schritt, Punkte-Leiste als
     Fortschritt, große antippbare Antwort-Karten statt nackter Radios.
     Wer noch nie automatisiert hat, soll sich durchklicken können, ohne zu
     wissen, welche Angaben ein Lastenheft braucht. */
  /* Vertikal mittig im Panel (Ralph, 05.08.): margin:auto im Flex-Container
     zentriert bei freiem Platz und fällt bei hohem Inhalt auf normales
     Scrollen zurück — kein Abschneiden oben. */
  #toolRequestPanel { min-height: 100%; display: flex; flex-direction: column; }
  .tr-wrap { max-width: 680px; width: 100%; margin: auto; padding: 0.4rem 0 1.6rem; }
  /* Lesbarkeit vor Zurückhaltung (Ralph, 03.08.2026): die Standard-Grautöne des
     Workspace sind für die Fließtexte im Fragebogen zu blass — hier gilt fast
     Schwarz für Text und ein kräftigeres Grau für Beschriftungen. */
  :root[data-theme="light"] .tr-wrap { --text2: rgba(20,20,29,0.78); --text3: rgba(20,20,29,0.6); }
  .tr-card {
    position: relative;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.7rem 1.6rem;
    box-shadow: 0 26px 60px -28px rgba(0,0,0,0.55);
  }
  /* Hauchdünne Verlaufs-Kante — gibt der Karte Tiefe ohne harten Rahmen. */
  .tr-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; pointer-events: none; opacity: 0.75;
    background: linear-gradient(135deg, rgba(108,99,255,0.5), transparent 42%, transparent 62%, rgba(78,205,196,0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  :root[data-theme="light"] .tr-card { box-shadow: 0 22px 50px -26px rgba(30,20,60,0.28); }
  @media (max-width: 560px) { .tr-card { padding: 1.3rem 1.05rem; } }

  /* Einblenden beim Schrittwechsel — dezent, schnell, nie störend. */
  .tr-anim { animation: trRise 0.26s cubic-bezier(.16,1,.3,1) both; }
  @keyframes trRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  .tr-stagger > * { opacity: 0; animation: trRise 0.3s cubic-bezier(.16,1,.3,1) forwards; }
  .tr-stagger > *:nth-child(1) { animation-delay: 0.02s; }
  .tr-stagger > *:nth-child(2) { animation-delay: 0.07s; }
  .tr-stagger > *:nth-child(3) { animation-delay: 0.12s; }
  .tr-stagger > *:nth-child(4) { animation-delay: 0.17s; }
  .tr-stagger > *:nth-child(5) { animation-delay: 0.22s; }
  .tr-stagger > *:nth-child(6) { animation-delay: 0.27s; }
  @media (prefers-reduced-motion: reduce) {
    .tr-anim, .tr-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  }

  /* Absender-Zeile: die Fragen kommen sichtbar vom Agenten, nicht aus dem Nichts. */
  .tr-agent { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.1rem; }
  .tr-agent-av {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 20px;
    background: linear-gradient(135deg, rgba(108,99,255,0.26), rgba(78,205,196,0.2));
    border: 1px solid rgba(108,99,255,0.34);
  }
  .tr-agent-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
  .tr-agent-sub { font-size: 12px; color: var(--text3); line-height: 1.3; }

  /* Fortschritt als Punkte statt Balken: zeigt Schritte, nicht Prozente. */
  .tr-dots { display: flex; flex-wrap: wrap; gap: 0.34rem; align-items: center; justify-content: center; margin: 0 0 1.15rem; }
  .tr-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); transition: all 0.2s; }
  .tr-dot.done { background: var(--accent); opacity: 0.55; }
  .tr-dot.active { width: 26px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .tr-dot { transition: none; } }

  .tr-q { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; line-height: 1.35; }
  .tr-qhelp { color: var(--text); font-size: 14px; line-height: 1.55; margin-top: 0.45rem; }
  .tr-qbody { margin-top: 1.15rem; }

  /* Beispieldatei anhängen (Ralph, 11.08.2026): Der Fragebogen fragt nach dem
     Zugangsweg, und „ich lade sie hoch" muss hier auch möglich sein. Bewusst
     leise gestaltet — es ist ein Angebot, keine Pflicht. */
  .tr-attach { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
  .tr-attach-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--border-strong); background: transparent;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .tr-attach-btn:hover { border-color: var(--accent); color: var(--accent); }
  .tr-attach-hint { font-size: 12px; color: var(--text3); line-height: 1.5; margin-top: 0.5rem; }
  .tr-attach-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
  .tr-attach-item {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 13px; color: var(--text);
    background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; padding: 0.4rem 0.6rem;
  }
  .tr-attach-item .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-attach-item .size { color: var(--text3); font-size: 12px; }
  .tr-attach-del {
    border: 0; background: transparent; color: var(--text3); cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 1; padding: 0.15rem 0.3rem;
  }
  .tr-attach-del:hover { color: #e5484d; }

  .tr-hero { text-align: center; margin-bottom: 1.3rem; }
  .tr-hero-icon {
    width: 54px; height: 54px; margin: 0 auto 0.9rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 24px;
    background: linear-gradient(135deg, rgba(108,99,255,0.24), rgba(78,205,196,0.18));
    border: 1px solid rgba(108,99,255,0.35);
    box-shadow: 0 12px 30px -12px rgba(108,99,255,0.55);
  }
  .tr-hero h2 { margin: 0 0 0.5rem; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.3; }
  .tr-hero p { margin: 0 auto; max-width: 470px; color: var(--text); font-size: 14px; line-height: 1.6; }

  .tr-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); font-weight: 700; margin-bottom: 0.45rem; }


  /* Antwort-Karten (Einfach-/Mehrfachwahl) — ganze Fläche klickbar. */
  .tr-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .tr-opt {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
    background: rgba(255,255,255,0.035); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 0.8rem 0.95rem; cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--text);
    transition: border-color 0.16s, background 0.16s, transform 0.16s, box-shadow 0.16s;
  }
  :root[data-theme="light"] .tr-opt { background: rgba(15,23,42,0.03); }
  .tr-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
  .tr-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tr-opt[aria-checked="true"] {
    border-color: var(--accent); background: rgba(108,99,255,0.13);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.16);
  }
  .tr-opt .tr-mark {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border-strong); display: grid; place-items: center; transition: all 0.16s;
  }
  .tr-opt.multi .tr-mark { border-radius: 6px; }
  .tr-opt[aria-checked="true"] .tr-mark { border-color: var(--accent); background: var(--accent); }
  .tr-opt[aria-checked="true"] .tr-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
  .tr-opt.multi[aria-checked="true"] .tr-mark::after { content: '✓'; width: auto; height: auto; border-radius: 0; background: none; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }

  .tr-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 0.85rem 1rem;
    color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.6;
    resize: vertical; min-height: 118px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .tr-input.compact { min-height: 92px; }
  .tr-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.14);
  }
  .tr-input::placeholder { color: var(--text3); }
  :root[data-theme="light"] .tr-input { background: #fff; }
  .tr-count { text-align: right; font-size: 12px; color: var(--text2); margin-top: 0.35rem; }

  /* Diktier-Knopf am Fragebogen-Eingabefeld — gleiche Formensprache wie das
     Mikrofon im Chat-Composer, nur mit Beschriftung (steht frei, nicht im Feld). */
  /* Diktier-Knopf sitzt unten rechts IM Feld (wie beim Onboarding, Ralph
     05.08.) — die textarea reserviert dafür unten Platz. */
  .tr-field-mic { position: relative; }
  .tr-field-mic .tr-input { padding-bottom: 3.4rem; display: block; }
  /* Die Marker-Optik des Report-Dialogs bringt site/assets/js/report.js selbst mit
     (gekapselte a4hrp-Klassen) — hier stand sie frueher als .rm-shotwrap/.rm-marker. */
  .tr-mic-row { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: row-reverse; align-items: center; gap: 0.5rem; margin: 0; }
  .tr-mic {
    display: inline-flex; align-items: center; gap: 0.42rem;
    height: 34px; padding: 0 0.8rem;
    border-radius: 999px; background: var(--panel, rgba(255,255,255,0.9)); border: 1.5px solid var(--accent);
    color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
  }
  .tr-mic:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
  .tr-mic svg { width: 15px; height: 15px; }
  /* Transkription läuft: Mikrofon-Symbol weicht dem drehenden Kreis. */
  /* Einheitliches Ladesymbol — siehe window.a4hSpinner(). */
  /* .a4h-spin (Dreh-Bewegung) kommt aus /assets/css/brand.css — Kanon. */
  .tr-mic-spin { display: none; animation: spin 0.8s linear infinite; }
  .tr-mic.busy .tr-mic-icon { display: none; }
  .tr-mic.busy .tr-mic-spin { display: inline-block; }
  .tr-mic.busy { opacity: 1; cursor: progress; }
  .tr-mic.recording { color: #fff; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-color: #dc2626; animation: micPulse 1.2s ease-in-out infinite; }
  .tr-mic.recording .tr-mic-label::after { content: ' läuft …'; }

  .tr-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; margin-top: 0.9rem;
    padding: 0.85rem 1.1rem; border: 0; border-radius: 999px;
    background: var(--accent);
    color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 10px 26px -8px rgba(108,99,255,0.65);
  }
  .tr-submit:hover { opacity: 0.94; box-shadow: 0 14px 32px -8px rgba(108,99,255,0.7); }
  .tr-submit:active { transform: translateY(1px); }
  .tr-submit[disabled] { opacity: 0.6; cursor: default; box-shadow: none; }
  .tr-submit .tr-arrow { font-size: 15px; line-height: 1; }
  .tr-qbody + .tr-ghost { margin-top: 0.95rem; }
  .tr-ghost {
    display: block; width: 100%; margin-top: 0.55rem;
    padding: 0.62rem 1rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text3); font-family: inherit; font-size: 13px; cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .tr-ghost:hover { color: var(--text); border-color: var(--border-strong); }
  /* Kopfzeile der Frage-Karte: „Speichern" und „Verwerfen" klein oben rechts.
     Bewusst zurückhaltend (Geist-Knopf, kein Akzent) — der Weiter-Knopf soll
     der einzige auffällige Knopf der Karte bleiben. */
  .tr-kopf { display: flex; justify-content: flex-end; gap: 0.4rem; margin: -0.25rem 0 0.7rem; }
  /* Erklärung des Agenten, wenn der Betrieb zurückgefragt hat. */
  .tr-erklaer {
    margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px;
    background: rgba(108,99,255,0.09); border: 1px solid rgba(108,99,255,0.26);
    color: var(--text); font-size: 14px; line-height: 1.55;
  }
  /* Maße bewusst identisch zur Status-Pille (.tr-pill): in der Anfragenliste
     stehen „Entwurf" und „Verwerfen" direkt untereinander, unterschiedliche
     Höhen fallen dort sofort auf (Ralph, 22.08.2026). */
  .tr-ghost.tr-mini {
    display: inline-flex; align-items: center; width: auto; margin: 0;
    padding: 0.2rem 0.6rem; font-size: 11px; line-height: 1.45;
  }
  .tr-ghost.tr-weg:hover { color: #ef4444; border-color: rgba(239,68,68,0.5); }
  .tr-err { display: none; color: #ef4444; font-size: 13px; margin-top: 0.6rem; text-align: center; }

  /* Rückschau: was der Nutzer bisher gesagt hat — zugeklappt, damit die
     aktuelle Frage die Bühne behält, aber jederzeit nachlesbar. */
  .tr-recap { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.7rem; }
  .tr-recap summary { cursor: pointer; font-size: 12px; color: var(--text2); list-style: none; }
  .tr-recap summary::-webkit-details-marker { display: none; }
  .tr-recap summary::before { content: '▸ '; }
  .tr-recap[open] summary::before { content: '▾ '; }
  .tr-recap summary:hover { color: var(--text2); }
  .tr-recap-item { margin-top: 0.6rem; }
  .tr-recap-q { font-size: 12px; color: var(--text2); line-height: 1.4; }
  .tr-recap-a { font-size: 13px; color: var(--text); line-height: 1.5; margin-top: 0.1rem; }

  /* Denk-Zustand während der LLM-Rückfrage. */
  .tr-thinking { text-align: center; padding: 2.4rem 1rem; }
  .tr-think-av {
    width: 54px; height: 54px; border-radius: 12px; margin: 0 auto 1.1rem;
    display: grid; place-items: center; font-size: 24px;
    background: linear-gradient(135deg, rgba(108,99,255,0.24), rgba(78,205,196,0.18));
    border: 1px solid rgba(108,99,255,0.35);
    animation: trPulse 1.8s ease-in-out infinite;
  }
  @keyframes trPulse { 0%,100% { transform: scale(1); box-shadow: 0 12px 30px -12px rgba(108,99,255,0.5); } 50% { transform: scale(1.06); box-shadow: 0 18px 40px -10px rgba(108,99,255,0.7); } }
  .tr-think-row { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 15px; font-weight: 600; }
  /* (früher .tr-spinner + @keyframes trSpin — auf window.a4hSpinner() zusammengeführt) */
  @media (prefers-reduced-motion: reduce) { .tr-think-av { animation: none; } }

  /* Lastenheft-Abschnitte (Zusammenfassung + Freigabe-Karte). */
  .tr-sec { margin-top: 1.05rem; }
  .tr-sec-h { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--accent2); font-weight: 700; margin-bottom: 0.35rem; }
  .tr-sec p { color: var(--text); font-size: 14px; line-height: 1.6; margin: 0; }
  .tr-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
  .tr-sec li { display: flex; gap: 0.5rem; color: var(--text); font-size: 14px; line-height: 1.55; }
  .tr-sec li::before { content: '▸'; color: var(--accent2); flex: 0 0 auto; }
  .tr-sec-hero {
    padding: 0.95rem 1.05rem; border-radius: 12px; margin-top: 0.2rem;
    background: rgba(108,99,255,0.09); border: 1px solid rgba(108,99,255,0.26);
  }
  .tr-sec-hero .tr-sec-h { color: var(--accent); }
  .tr-sec-hero p { color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.5; }

  /* Anfragen-Liste („Ihre Anfragen") */
  .tr-req {
    padding: 0.75rem 0.9rem; border-radius: 12px; margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    transition: border-color 0.15s, background 0.15s;
  }
  :root[data-theme="light"] .tr-req { background: rgba(15,23,42,0.03); }
  .tr-req.clickable { cursor: pointer; }
  .tr-req.clickable:hover { border-color: rgba(108,99,255,0.45); background: rgba(108,99,255,0.06); }
  .tr-req-head { display: flex; align-items: center; gap: 0.5rem; }
  .tr-req-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
    border: 1px solid currentColor; opacity: 0.95;
  }
  .tr-pill .tr-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .tr-approve {
    flex: 1; min-width: 150px; padding: 0.62rem 1rem; border-radius: 999px; border: 0;
    background: linear-gradient(135deg, #4ecdc4, #3fb3ab); color: #08131a;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(78,205,196,0.7);
  }
  .tr-approve:hover { opacity: 0.93; }
  .tr-reject {
    padding: 0.62rem 1rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--border); color: var(--text3);
    font-family: inherit; font-size: 14px; cursor: pointer;
  }
  .tr-reject:hover { color: var(--text); border-color: var(--border-strong); }
  /* ── Automations-Karte ───────────────────────────────────────────────
     Bewusst dieselbe Design-Sprache wie die Fragebogen-Karte (.tr-card):
     weiche Karte mit Verlaufs-Kante statt hartem Rahmen, Status als Pille,
     Zeitplan/Ausgabe als Chips. Die alte Fassung war eine flache graue Box
     mit 8px-Punkt — auf einem breiten Bildschirm eine Tabellenzeile ohne
     Hierarchie (Ralph, 08.08.2026). */
  .auto-item {
    position: relative;
    padding: 0.95rem 1.05rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    transition: transform 0.18s cubic-bezier(.16,1,.3,1), box-shadow 0.18s, border-color 0.18s;
  }
  .auto-item::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; pointer-events: none; opacity: 0;
    background: linear-gradient(135deg, rgba(108,99,255,0.55), transparent 45%, transparent 60%, rgba(78,205,196,0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity 0.2s;
  }
  .auto-item.is-on::before { opacity: 0.7; }
  .auto-item:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -22px rgba(20,20,60,0.55); border-color: var(--border-strong); }
  .auto-item:hover::before { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .auto-item { transition: none; } .auto-item:hover { transform: none; } }

  .auto-item-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
  .auto-item-name { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
  /* Status als Pille — „Aktiv" liest sich schneller als ein farbiger Punkt. */
  .auto-state {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.55rem 0.2rem 0.45rem; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid transparent;
  }
  .auto-state::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
  .auto-state.on { color: #17a398; background: rgba(78,205,196,0.14); border-color: rgba(78,205,196,0.32); }
  .auto-state.off { color: var(--text3); background: rgba(128,128,160,0.12); border-color: var(--border); }

  .auto-item-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
  .auto-chip {
    display: inline-flex; align-items: center; gap: 0.32rem;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    background: rgba(128,128,160,0.1); border: 1px solid var(--border);
    font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums;
  }
  .auto-chip svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.8; }
  .auto-chip.out { background: rgba(108,99,255,0.1); border-color: rgba(108,99,255,0.26); color: var(--text2); }

  .auto-item-prompt {
    font-size: 13px; color: var(--text2); line-height: 1.5;
    margin-bottom: 0.55rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .auto-item-btns { display: flex; gap: 0.25rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
  .auto-btn {
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 1px solid transparent;
    border-radius: 9px; color: var(--text3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .auto-btn svg { width: 14px; height: 14px; display: block; }
  .auto-btn:hover { color: var(--text); background: rgba(128,128,160,0.14); border-color: var(--border); }
  .auto-btn.play:hover { color: #17a398; background: rgba(78,205,196,0.14); border-color: rgba(78,205,196,0.3); }
  .auto-btn.edit:hover { color: var(--accent); background: rgba(108,99,255,0.14); border-color: rgba(108,99,255,0.3); }
  .auto-btn.danger { color: var(--text3); }
  .auto-btn.danger:hover { color: #e5484d; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.28); }
  .auto-btn[disabled] { opacity: 0.5; cursor: wait; }

  /* Light-Theme: die pauschale Sidebar-Regel fuer [class*="-item"] macht jede
     Karte flach grau — die Automations-Karte holt sich ihr Weiss zurueck. */
  :root[data-theme="light"] .sidebar-secondary .auto-item,
  :root[data-theme="light"] .auto-item {
    background: #ffffff !important;
    border-color: rgba(15,15,30,0.09) !important;
  }
  :root[data-theme="light"] .sidebar-secondary .auto-item:hover,
  :root[data-theme="light"] .auto-item:hover {
    background: #ffffff !important;
    box-shadow: 0 16px 34px -24px rgba(30,20,60,0.35);
  }
  /* Dieselbe Regel greift auch auf die Kind-Elemente (alle enthalten „-item")
     und legte graue Balken ueber Zeitplan, Auftragstext und Lauf-Historie. */
  :root[data-theme="light"] .sidebar-secondary .auto-item-head,
  :root[data-theme="light"] .sidebar-secondary .auto-item-meta,
  :root[data-theme="light"] .sidebar-secondary .auto-item-prompt,
  :root[data-theme="light"] .sidebar-secondary .auto-item-runs {
    background: transparent !important;
    border-color: transparent !important;
  }
  :root[data-theme="light"] .sidebar-secondary .auto-item-btns {
    background: transparent !important;
    border-color: transparent !important;
    border-top: 1px solid rgba(15,15,30,0.09) !important;
  }
  :root[data-theme="light"] .auto-chip { background: rgba(15,15,30,0.05); border-color: rgba(15,15,30,0.09); }
  :root[data-theme="light"] .auto-chip.out { background: rgba(108,99,255,0.09); border-color: rgba(108,99,255,0.24); }

  /* Automation-Formular */
  .auto-form { display: flex; flex-direction: column; gap: 0.7rem; }
  .auto-form-field { display: flex; flex-direction: column; gap: 0.3rem; }
  .auto-form-field label {
    font-size: 12px; font-weight: 600; color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .auto-form-field input, .auto-form-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit; font-size: 14px;
    padding: 0.5rem 0.7rem;
    outline: none;
  }
  .auto-form-field input:focus, .auto-form-field textarea:focus { border-color: var(--accent); background: rgba(255,255,255,0.05); }
  .auto-form-field textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
  /* Number-Input-Pfeile weg */
  .auto-form-field input[type=number]::-webkit-inner-spin-button,
  .auto-form-field input[type=number]::-webkit-outer-spin-button,
  .auto-form-field input[type=time]::-webkit-inner-spin-button,
  .auto-form-field input[type=time]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .auto-form-field input[type=number], .auto-form-field input[type=time] { -moz-appearance: textfield; appearance: textfield; }
  /* Time-Input dunkel */
  .auto-form-field input[type=time] { color-scheme: dark; font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: 0.05em; text-align: center; }
  .auto-form-field input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); cursor: pointer; }
  .auto-time-row { display: grid; grid-template-columns: 140px 1fr; gap: 0.45rem; }
  .auto-submit-row { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
  .auto-submit-row .btn-save {
    flex: 1; padding: 0.55rem 0.9rem;
    background: var(--accent);
    border: none; border-radius: 9px;
    color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer;
  }
  .auto-submit-row .btn-cancel {
    padding: 0.55rem 0.9rem;
    background: transparent; border: 1px solid var(--border);
    border-radius: 9px; color: var(--text2);
    font-family: inherit; font-size: 14px;
    cursor: pointer;
  }

  /* Projects-Panel */
  .projects-actions { display: flex; gap: 0.35rem; margin-bottom: 0.9rem; }
  .projects-create-btn {
    flex: 1; padding: 0.5rem 0.8rem;
    background: rgba(108,99,255,0.15); border: 1px solid rgba(108,99,255,0.4);
    border-radius: 9px; color: var(--text); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
  }
  .projects-create-btn:hover { background: rgba(108,99,255,0.25); }
  .project-item {
    padding: 0.7rem 0.85rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
  }
  .project-item:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.05); }
  .project-item.active { border-color: rgba(78,205,196,0.5); background: rgba(78,205,196,0.08); }
  .project-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
  .project-item-name { font-size: 14px; font-weight: 700; color: var(--text); }
  .project-item-meta { font-size: 12px; color: var(--text3); }
  .project-detail { padding: 0.3rem 0; }
  .project-detail h4 { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.8rem 0 0.35rem; }
  .project-detail-docs { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
  .project-doc-row {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
  }
  .project-doc-row span.name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  .project-doc-row button { background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 0 0.2rem; }
  .project-doc-row button:hover { color: #fca5a5; }
  .project-adddoc-picker {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-top: 0.35rem; padding: 0.5rem;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 9px;
    max-height: 180px; overflow-y: auto;
  }
  .project-adddoc-row {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.5rem; border-radius: 6px;
    font-size: 12px; color: var(--text2);
    cursor: pointer;
  }
  .project-adddoc-row:hover { background: rgba(255,255,255,0.05); color: var(--text); }
  .project-start-btn {
    margin-top: 0.8rem; padding: 0.55rem 0.9rem; width: 100%;
    background: var(--accent);
    border: none; border-radius: 9px;
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer;
  }
  .project-start-btn:hover { }
  .project-back { font-size: 12px; color: var(--accent2); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; margin-bottom: 0.5rem; }
  .project-back:hover { text-decoration: underline; }
  .topbar-right {
    display: flex; align-items: center; gap: 0.7rem;
  }
  .trial-badge {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.7rem;
    background: rgba(78,205,196,0.1);
    border: 1px solid rgba(78,205,196,0.3);
    border-radius: 999px;
    color: var(--accent2);
  }
  /* Plan-Badge: klickbar, öffnet Usage-Panel */
  .plan-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, transform 0.15s;
    white-space: nowrap;
  }
  .plan-badge:hover { filter: brightness(1.15); transform: translateY(-1px); }
  .plan-badge.tone-info  { background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.4); color: #cdb3ff; }
  .plan-badge.tone-warn  { background: rgba(255,177,90,0.14); border: 1px solid rgba(255,177,90,0.45); color: #ffd89b; }
  .plan-badge.tone-error { background: rgba(255,107,107,0.14); border: 1px solid rgba(255,107,107,0.5); color: #ffb3b3; }
  /* Neutraler Grau-Ton — für den DSGVO-Chip (kein Status, kein Alarm). */
  .plan-badge.tone-neutral { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); color: #b9bdcc; padding: 0.35rem 0.55rem; }
  /* Eigener Tooltip statt title= — erscheint sofort und im UI-Stil statt im
     Systemstil (title braucht ~1s und ist nicht gestaltbar). */
  #dsgvoChip { position: relative; }
  .dsgvo-chip-tip {
    position: absolute; top: calc(100% + 8px); right: 0;
    /* Farben explizit: --panel2 gibt es in dieser Datei nicht, der Fallback
       war dunkel und der Tooltip damit im Light-Theme unlesbar. */
    background: #1e2130; color: #e6e7ec;
    border: 1px solid #2a2e40; border-radius: 999px;
    padding: 0.4rem 0.6rem; font-size: 12px; font-weight: 600;
    letter-spacing: 0; white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity .14s, transform .14s, visibility .14s;
    pointer-events: none; z-index: 10003;
  }
  #dsgvoChip:hover .dsgvo-chip-tip,
  #dsgvoChip:focus-visible .dsgvo-chip-tip { opacity: 1; visibility: visible; transform: translateY(0); }
  .plan-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }

  /* Usage-Modal */
  .usage-overlay {
    display: none; position: fixed; inset: 0;
    /* Kanon §12 — vorher transparent, die Abdunklung kam nur aus einer
       Light-Theme-Sonderregel. Jetzt ein Wert fuer beide Themes. */
    background: var(--a4h-overlay, rgba(0,0,0,0.35));
    z-index: 10002;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .usage-overlay.show { display: flex; }
  .usage-card {
    background: var(--surface-solid);
    border-radius: 12px;
    width: 100%; max-width: 520px;
    max-height: 92vh;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  }
  .usage-head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .usage-head-info .u-plan {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 4px;
  }
  .usage-head-info .u-title { font-size: 20px; font-weight: 700; color: #fff; }
  .usage-head-info .u-sub   { font-size: 12px; color: var(--text2); margin-top: 3px; }
  .usage-head .u-close {
    background: none; border: none; color: var(--text2); cursor: pointer; font-size: 20px; padding: 4px 8px;
  }
  .usage-body {
    padding: 16px 22px 20px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
  }
  .u-meter {
    display: flex; flex-direction: column; gap: 5px;
  }
  .u-meter-top {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px;
  }
  .u-meter-label { font-weight: 600; color: var(--text); }
  .u-meter-value { color: var(--text3); font-size: 12px; font-variant-numeric: tabular-nums; }
  .u-meter-bar {
    height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    position: relative;
  }
  .u-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ecdc4, #6c63ff);
    border-radius: 3px;
    transition: width 0.45s ease;
  }
  .u-meter-fill.warn { background: linear-gradient(90deg, #ffb15a, #ff8a5a); }
  .u-meter-fill.crit { background: linear-gradient(90deg, #ff6b6b, #c44569); }
  .u-meter-fill.unlim {
    background: repeating-linear-gradient(90deg, rgba(78,205,196,0.4) 0 8px, rgba(78,205,196,0.15) 8px 16px);
    width: 100% !important;
  }
  .u-foot {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .u-foot-hint { font-size: 12px; color: var(--text3); flex: 1; min-width: 0; }
  .u-upgrade {
    font-size: 13px; font-weight: 700;
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, #7c5cff, #4ecdc4);
    color: #fff; border: 0; border-radius: 9px;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
    white-space: nowrap; flex-shrink: 0;
  }
  .u-upgrade:hover { filter: brightness(1.1); }

  /* User-Menü (für eingeloggte Nutzer) */
  .user-menu-wrap { position: relative; }
  .user-menu-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: all 0.15s;
  }
  .user-menu-btn:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.05); }
  .user-menu-btn svg { color: var(--text3); transition: transform 0.15s; }
  .user-menu-wrap.open .user-menu-btn svg { transform: rotate(180deg); }
  .user-menu-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    font-weight: 700; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.02em;
  }
  .user-menu-dropdown {
    display: none;
    position: absolute; top: calc(100% + 0.5rem); right: 0;
    min-width: 200px;
    width: max-content;
    max-width: min(340px, calc(100vw - 1.5rem));
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 20;
  }
  .user-menu-wrap.open .user-menu-dropdown { display: block; }
  .user-menu-header {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.35rem;
  }
  .user-menu-header .um-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-menu-header .um-email { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-menu-item {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s;
  }
  .user-menu-item:hover { background: rgba(255,255,255,0.05); }
  .user-menu-item.danger { color: #fca5a5; }
  .user-menu-item.danger:hover { background: rgba(239,68,68,0.08); }
  .user-menu-item svg { flex: 0 0 auto; color: var(--text3); }
  .user-menu-item.danger svg { color: #fca5a5; }
  .user-menu-sep { height: 1px; background: var(--border); margin: 0.35rem 0; }
  .menu-btn {
    width: 36px; height: 36px; border-radius: 9px;
  }
  .menu-btn:hover { background: rgba(255,255,255,0.04); border-color: var(--accent); }
  .menu-btn.active {
    color: var(--accent2);
    background: rgba(78,205,196,0.1);
    border-color: rgba(78,205,196,0.4);
  }
  .menu-btn.loading svg { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .msg-audio-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.65rem;
    background: rgba(108,99,255,0.08);
    border: 1px solid rgba(108,99,255,0.25);
    border-radius: 9px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .msg-audio-btn:hover { color: var(--text); background: rgba(108,99,255,0.15); }
  .msg-audio-btn.playing {
    color: var(--accent2);
    background: rgba(78,205,196,0.12);
    border-color: rgba(78,205,196,0.4);
  }
  .msg-audio-btn svg { width: 12px; height: 12px; }

  /* ── Test-Hinweis-Banner ── */
  .test-notice {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, rgba(108,99,255,0.1) 0%, rgba(78,205,196,0.08) 100%);
    border-bottom: 1px solid rgba(108,99,255,0.18);
    font-size: 13px;
    color: var(--text2);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .test-notice strong { color: var(--accent2); font-weight: 700; }
  .test-notice svg { flex: 0 0 auto; color: var(--accent); }
  @media (max-width: 600px) {
    .test-notice { font-size: 12px; padding: 0.5rem 0.75rem; }
  }

  /* ── Chat Area ── */
  .chat {
    position: relative; z-index: 1;
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.4rem 0;
    overflow: hidden;
  }
  .chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.4rem;
    display: flex; flex-direction: column;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .chat-messages::-webkit-scrollbar { width: 6px; }
  .chat-messages::-webkit-scrollbar-track { background: transparent; }
  .chat-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

  /* Globale dunkle Scrollbar-Styles — gilt für alle scrollbaren Container
     (Sidebar, Modals, Listen), damit die native helle Browser-Scrollbar
     nicht ins Dark-Theme reinbricht. Firefox: scrollbar-color. WebKit: pseudo. */
  *, html, body { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
  *::-webkit-scrollbar-thumb:hover { background: var(--text2); }
  *::-webkit-scrollbar-corner { background: transparent; }

  .msg {
    display: flex; gap: 0.75rem;
    max-width: 100%;
    animation: msgIn 0.3s ease-out;
  }
  @keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Wiederhergestellte Nachrichten blenden sich NICHT ein. Die Einblendung
     gehoert zur ankommenden Nachricht; beim Oeffnen des Workspace liefen
     dagegen Dutzende davon gleichzeitig — und weil jede Agent-Blase eine
     eigene Weichzeichner-Ebene hat (backdrop-filter unten), musste der
     Browser diesen Weichzeichner fuer jede Blase in JEDEM Einzelbild neu
     berechnen. Genau das liess die Seite und den Mauszeiger haengen. */
  .msg--wiederhergestellt { animation: none; }
  .msg.user { justify-content: flex-end; }
  /* Form aus .a4h-blase (§18b, brand.css). Der Verlauf in der Nutzer-Blase
     ist entfallen — einfarbig, wie ueberall sonst. Welche Seite spricht,
     steht am Eltern-Element; hier wird es auf den Baustein uebersetzt. */
  .msg.agent .a4h-blase { backdrop-filter: blur(8px); }
  .msg.agent .a4h-blase,
  .msg.from-operator .a4h-blase { background: var(--a4h-flaeche);
    border: 1px solid var(--border-subtle, var(--border));
    color: var(--text); border-bottom-left-radius: var(--a4h-r-s); }
  .msg.user .a4h-blase { background: var(--accent); color: #fff;
    border-bottom-right-radius: var(--a4h-r-s); }
  .msg.agent .msg-avatar {
    width: 32px; height: 32px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 6px rgba(108,99,255,0.35));
    margin-top: 0.15rem;
  }
  .msg.agent .msg-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* Operator-Voice-Messages: kleines Badge im Bubble + dezenter linker Border */
  .msg.from-operator .msg-bubble { border-left: 2px solid #4ecdc4; }
  .msg-source-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.08);
    border-radius: 999px;
    padding: 1px 6px;
    margin-bottom: 4px;
    font-weight: 600;
    vertical-align: middle;
  }

  /* EINE Inline-Zeile: [rotierender Spinner][Status-Text]. Ohne Server-Status
     ist der Text leer (:empty → display:none), dann dreht nur der Spinner
     allein — nie zwei Indikatoren gleichzeitig. */
  .typing-indicator {
    display: inline-flex; gap: 6px; align-items: center;
    color: var(--text2); font-size: 14px;
  }
  /* Dezenter Status-Text rechts vom Spinner (Live-Status vom Server, überschreibt sich selbst) */
  .typing-status { opacity: 0.75; }
  .typing-status:empty { display: none; }
  /* (früher .typing-spinner + @keyframes typingSpin — auf window.a4hSpinner() zusammengeführt) */

  /* ── Composer (input area) ── */
  .composer {
    flex: 0 0 auto;
    padding: 1rem 0 1.2rem;
    position: relative;
  }
  .composer-box {
    display: flex; align-items: flex-end; gap: 0.6rem;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 0.7rem 0.7rem 0.7rem 1.1rem;
    transition: border-color 0.15s, box-shadow 0.2s;
    position: relative;
  }
  .composer-box:focus-within { border-color: var(--accent); }
  .composer-box.recording {
    border-color: rgba(239,68,68,0.55);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
  }
  /* Pegel-Overlay: liegt über dem Textarea und wird während der Aufnahme
     eingeblendet. Pointer-events: none, damit Mic-Button und Send-Button
     weiter klickbar bleiben. */
  .composer-pegel {
    display: none;
    position: absolute;
    inset: 0.7rem 4.4rem 0.7rem 1.1rem;
    align-items: center;
    gap: 0.7rem;
    pointer-events: none;
  }
  .composer-box.recording .composer-pegel { display: flex; }
  .composer-box.recording .composer-input { visibility: hidden; }
  .pegel-label {
    flex: 0 0 auto;
    font-size: 13px; font-weight: 600;
    color: var(--text2);
    white-space: nowrap;
  }
  .pegel-bars {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: flex-start;
    gap: 3px;
    height: 28px;
    overflow: hidden;
  }
  .pegel-bar {
    flex: 0 0 4px;
    background: linear-gradient(180deg, #ef4444 0%, #f59e0b 50%, #6c63ff 100%);
    border-radius: 2px;
    height: 4px;
    transition: height 0.08s ease-out;
    min-height: 3px;
  }
  /* Ladekreis im Eingabefeld während der Transkription (links vom Text). */
  .composer-spin {
    display: none;
    flex: 0 0 auto;
    width: 15px; height: 15px;
    color: var(--accent);
    margin-bottom: 0.45rem;
  }
  .composer-box.transcribing .composer-spin { display: inline-block; }
  .composer-input {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    max-height: 180px;
    min-height: 24px;
    padding: 0.25rem 0;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .composer-input::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .composer-input::placeholder { color: var(--text3); }
  /* Form aus .a4h-icon-btn.is-primary (§3) — hier nur die Groesse der
     Chat-Leiste, die etwas grosszuegiger ist als die Werkzeugleisten. */
  .send-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; }

  /* ── Context-Window-Meter ── */
  .ctx-meter {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.2rem 0 0.2rem;
    font-size: 12px;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
    user-select: none;
  }
  .ctx-meter-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    overflow: hidden;
  }
  .ctx-meter-fill {
    height: 100%;
    width: 0%;
    background: #4ade80;
    transition: width 0.18s ease-out, background-color 0.25s;
  }
  .ctx-meter-fill.warn { background: #f59e0b; }
  .ctx-meter-fill.crit { background: #ef4444; }
  .ctx-meter-label { flex: 0 0 auto; white-space: nowrap; }
  .ctx-speed { margin-left: 0.55rem; color: var(--text3); opacity: 0.85; font-variant-numeric: tabular-nums; }
  .ctx-speed:not(:empty)::before { content: '· '; opacity: 0.6; }

  /* ── Footer actions ── */
  .footer-bar {
    position: relative; z-index: 1;
    flex: 0 0 auto;
    display: flex; justify-content: center; gap: 0.6rem;
    padding: 0.5rem 1rem 1rem;
    flex-wrap: wrap;
  }
  .footer-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
  }
  .footer-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.06); }
  .footer-btn.keep {
    color: var(--accent2);
    border-color: rgba(78,205,196,0.3);
    background: rgba(78,205,196,0.06);
  }
  .footer-btn.keep:hover {
    color: #fff;
    background: var(--accent);
    border-color: transparent;
  }

  /* ── Drawer (modal for Files / Automationen / Behalten) ── */
  .drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: var(--a4h-overlay, rgba(0,0,0,0.35));
    backdrop-filter: blur(4px);
    z-index: 50;
    animation: fadeIn 0.2s ease;
  }
  .drawer-overlay.open { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .drawer {
    background: var(--surface-solid);
    /* Kein Rahmen (Ralph, 08.08.2026): zusammen mit dem Rahmen des
       eingebetteten Fensters ergab das eine Doppellinie. Das Fenster grenzt
       sich über die Fläche und das abgedunkelte Umfeld ab, nicht über Striche. */
    border: none;
    border-radius: 12px;
    padding: 1.6rem 1.6rem 1.4rem;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: drawerUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes drawerUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  /* FESTE Hoehe: der Untertitel ist je Werkzeug verschieden lang, dadurch
     stand der Inhalt darunter mal 10, mal 45px tiefer — beim Umschalten
     sprang die Reiterzeile (gemessen 88px im Wissen, 101px im CRM, 181px im
     Organizer). Die Hoehe darf deshalb nicht vom Text abhaengen. */
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; box-sizing: border-box; flex: 0 0 auto;
    margin-bottom: 12px;
  }
  .drawer-title { font-size: 20px; font-weight: 700; min-width: 0; }
  /* Untertitel bleibt einzeilig — sonst waechst die Kopfzeile doch wieder. */
  .drawer-title > div {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .drawer-close {
    background: transparent;
    border: 1px solid var(--border);
    width: 32px; height: 32px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--text2);
    font-size: 15px;
  }
  .drawer-close:hover { color: var(--text); border-color: var(--border-strong); }

  /* File drop zone */
  .drop-zone {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text2);
    transition: all 0.15s;
  }
  .drop-zone.dragging { border-color: var(--accent); background: rgba(108,99,255,0.06); color: var(--text); }
  .drop-zone-icon { font-size: 32px; margin-bottom: 0.6rem; }
  .drop-zone p { font-size: 14px; }
  .drop-zone small { font-size: 12px; color: var(--text3); }
  .file-list { margin-top: 1rem; }
  .file-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 14px;
    margin-bottom: 0.4rem;
  }
  .file-item span { color: var(--text); }
  .file-item small { color: var(--text3); }

  /* Chat-Nachricht: Markdown-Styling */
  .msg-bubble p { margin: 0 0 0.5em; }
  .msg-bubble p:last-child { margin-bottom: 0; }
  .msg-bubble ul, .msg-bubble ol { margin: 0.3em 0 0.5em 1.3em; }
  /* Unterlisten: engerer Abstand, eigener Aufzählungspunkt — sonst sieht eine
     verschachtelte Preisliste wie eine flache Aufzählung aus. */
  .msg-bubble li > ul, .msg-bubble li > ol { margin: 0.15em 0 0.25em 1.1em; }
  .msg-bubble li > ul { list-style-type: circle; }
  .msg-bubble li { margin-bottom: 0.2em; line-height: 1.5; }
  .msg-bubble strong { color: var(--text); font-weight: 700; }
  .msg-bubble em { font-style: italic; color: var(--text); }
  .msg-bubble code {
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9em; padding: 0.1em 0.35em;
    background: rgba(255,255,255,0.07);
    border-radius: 6px; color: var(--accent2);
  }
  .msg-bubble pre {
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em; padding: 0.7em 0.9em;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow-x: auto; margin: 0.5em 0;
    line-height: 1.45;
  }
  .msg-bubble pre code { background: none; padding: 0; color: var(--text); }
  .msg-bubble a { color: var(--accent2); text-decoration: underline; text-decoration-thickness: 1px; }
  .msg-bubble a:hover { color: var(--text); }
  .msg-bubble h1, .msg-bubble h2, .msg-bubble h3, .msg-bubble h4 {
    font-weight: 700; color: var(--text);
    margin: 0.4em 0 0.3em; line-height: 1.3;
  }
  .msg-bubble h1 { font-size: 1.1em; }
  .msg-bubble h2 { font-size: 1.05em; }
  .msg-bubble h3 { font-size: 1em; }
  .msg-bubble hr { border: none; border-top: 1px solid var(--border); margin: 0.7em 0; }
  .msg-bubble blockquote {
    border-left: 3px solid var(--accent2);
    padding-left: 0.8em; margin: 0.4em 0;
    color: var(--text2); font-style: italic;
  }

  /* Copy-Button pro Nachricht */
  .msg.agent { position: relative; }
  .msg-actions {
    position: absolute; top: 4px; right: 4px;
    display: flex; gap: 0.25rem;
    opacity: 0; transition: opacity 0.15s;
  }
  .msg.agent:hover .msg-actions { opacity: 1; }
  .msg-copy-btn {
    background: rgba(19,19,31,0.75);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text2);
    width: 26px; height: 26px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    padding: 0;
  }
  .msg-copy-btn:hover { color: var(--accent2); border-color: rgba(78,205,196,0.4); background: rgba(19,19,31,0.95); }
  .msg-copy-btn svg { width: 13px; height: 13px; }
  .msg-copy-btn.copied { color: var(--accent2); border-color: rgba(78,205,196,0.5); }
  /* Light-Theme: dunkles Glas-Background wirkt wie ein „Helm" auf hellem
     Workspace. Heller, dezenter Background + dunkles Icon. */
  :root[data-theme="light"] .msg-copy-btn {
    background: rgba(255,255,255,0.85);
    border-color: rgba(15,15,30,0.12);
    color: var(--text2);
  }
  :root[data-theme="light"] .msg-copy-btn:hover {
    background: #ffffff;
    border-color: rgba(108,99,255,0.45);
    color: var(--accent);
  }
  :root[data-theme="light"] .msg-copy-btn.copied {
    border-color: rgba(78,205,196,0.55);
    color: rgba(20,140,130,0.95);
  }

  /* Scroll-to-bottom FAB — muss über dem Composer sitzen, sonst blockiert er Clicks
     auf Send/Mic, sobald er via .visible eingeblendet wird (Composer ist ~7rem hoch). */
  .scroll-to-bottom {
    position: absolute; bottom: 9rem; right: 1.1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(19,19,31,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-strong);
    color: var(--text2);
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: all 0.15s;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .scroll-to-bottom.visible { display: inline-flex; }
  .scroll-to-bottom:hover { color: var(--text); background: rgba(78,205,196,0.12); border-color: rgba(78,205,196,0.4); transform: translateY(-2px); }
  .scroll-to-bottom svg { width: 16px; height: 16px; }
  /* Light-Theme: dunkler FAB war auf weißem Hintergrund zu schwer — dezenter machen. */
  :root[data-theme="light"] .scroll-to-bottom {
    background: rgba(255,255,255,0.9);
    border-color: rgba(15,15,30,0.12);
    color: var(--text2);
    box-shadow: 0 4px 12px rgba(15,15,30,0.08);
  }
  :root[data-theme="light"] .scroll-to-bottom:hover {
    background: rgba(78,205,196,0.12);
    border-color: rgba(78,205,196,0.45);
    color: var(--text);
  }

  /* Builder-Annahme-Hinterfrager: Multi-Choice-Karten landen aktuell als drittes
     Flex-Kind im .msg-Container — Avatar + Bubble links, Karten rechts. Per
     :has() schalten wir die Message in eine Spalte, sobald solche Karten
     erscheinen — Bubble und Fragen liegen dann untereinander. */
  .msg.agent:has(.assumption-cards) { flex-direction: column; align-items: stretch; }
  .msg.agent:has(.assumption-cards) .msg-bubble { max-width: 100%; }
  .assumption-cards { width: 100%; }
  .assumption-card { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2); border-radius: 12px; padding: 0.85rem 1rem; }
  .assumption-card .ac-question { font-weight: 600; margin-bottom: 0.55rem; color: var(--text); font-size: 15px; }
  .assumption-card .ac-opt-btn { text-align: left; background: transparent; border: 1px solid var(--border-strong); color: var(--text); padding: 0.45rem 0.7rem; border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1.35; transition: background 0.15s, border-color 0.15s; }
  .assumption-card .ac-opt-btn:hover { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.45); }
  .assumption-card .ac-opt-btn.is-selected { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.6); }
  .assumption-card .ac-opt-desc { font-size: 12px; color: var(--text2); margin-top: 0.15rem; }
  .assumption-card .ac-free-input { display: none; margin-top: 0.4rem; background: rgba(15,23,42,0.5); border: 1px solid var(--border-strong); color: var(--text); padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box; }
  :root[data-theme="light"] .assumption-card .ac-free-input { background: rgba(15,15,30,0.04); }

  /* Markdown-Tabellen in Chat-Nachrichten */
  .md-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 14px; }
  .md-table th { text-align: left; padding: 0.35rem 0.6rem; font-weight: 600; color: var(--text2); border-bottom: 2px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
  .md-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
  .md-table tr:last-child td { border-bottom: none; }
  .md-table tr:hover td { background: rgba(124,92,255,0.05); }
  :root[data-theme="light"] .md-table tr:hover td { background: rgba(124,92,255,0.04); }

  /* Empfänger-Katalog Tabellen-Editor (Modal) */
  .rc-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0; font-size: 14px; }
  .rc-table th { text-align: left; padding: 0.4rem 0.5rem; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
  .rc-table td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border); }
  .rc-table .rc-edit { width: 100%; padding: 0.4rem 0.5rem; background: rgba(255,255,255,0.03); border: 1px solid transparent; border-radius: 6px; color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box; }
  .rc-table .rc-edit:hover { background: rgba(255,255,255,0.06); }
  .rc-table .rc-edit:focus { outline: none; background: rgba(124,92,255,0.08); border-color: rgba(124,92,255,0.5); }
  :root[data-theme="light"] .rc-table .rc-edit { background: rgba(15,15,30,0.03); }
  :root[data-theme="light"] .rc-table .rc-edit:hover { background: rgba(15,15,30,0.06); }
  :root[data-theme="light"] .rc-table .rc-edit:focus { background: rgba(124,92,255,0.06); }
  .rc-table .rc-del { background: transparent; border: 1px solid var(--border); color: var(--text3); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
  .rc-table .rc-del:hover { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
  .rc-add-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr 1fr auto;
    gap: 0.4rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(124,92,255,0.06);
    border: 1px dashed rgba(124,92,255,0.35);
    border-radius: 6px;
  }
  .rc-add-row input { padding: 0.45rem 0.55rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box; min-width: 0; }
  :root[data-theme="light"] .rc-add-row input { background: #fff; }
  .rc-add-row input:focus { outline: none; border-color: rgba(124,92,255,0.5); }

  /* Tool-Call Status Badges (live im Chat-Bubble) */
  .tool-status-list {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-bottom: 0.6rem;
  }
  .tool-status {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.65rem;
    background: rgba(78,205,196,0.08);
    border: 1px solid rgba(78,205,196,0.25);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: var(--text2);
    width: fit-content; max-width: 100%;
  }
  .tool-status.done {
    background: rgba(78,205,196,0.04);
    border-color: rgba(78,205,196,0.2);
    color: var(--text3);
  }
  /* Kanon §11: die Form kommt aus brand-spinner.js (Alias unten am Ende der
     Seite), hier bleiben nur Groesse und Farbe. Frueher ein Rand-Kreis. */
  .tool-status .ts-spin {
    width: 11px; height: 11px;
    color: #4ecdc4;
    animation: tsSpin 0.7s linear infinite;
    flex: 0 0 auto;
  }
  .tool-status.done .ts-spin {
    border-color: var(--accent2);
    border-top-color: var(--accent2);
    animation: none;
    background: var(--accent2);
    width: 11px; height: 11px;
    position: relative;
  }
  .tool-status.done .ts-spin::after {
    content: '✓';
    position: absolute; inset: 0;
    color: var(--surface-solid);
    font-size: 8px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  @keyframes tsSpin { to { transform: rotate(360deg); } }

  /* Toast-System (Memory + Erfolg/Fehler/Info) */
  .toast-wrap {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 1200;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
  }
  .toast {
    backdrop-filter: blur(12px);
    border-radius: 9px;
    padding: 0.7rem 0.95rem;
    color: var(--text);
    font-size: 13px; font-weight: 600;
    line-height: 1.4; max-width: 380px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex; align-items: flex-start; gap: 0.5rem;
    animation: toastIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
    border: 1px solid;
  }
  .toast.out { animation: toastOut 0.25s ease-in forwards; }
  .toast.success { background: rgba(78,205,196,0.14); border-color: rgba(78,205,196,0.45); border-color: rgba(78,205,196,0.4); }
  .toast.success strong { color: var(--accent2); }
  .toast.error { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); border-color: rgba(239,68,68,0.45); }
  .toast.error strong { color: #fca5a5; }
  .toast.info { background: rgba(108,99,255,0.14); border-color: rgba(108,99,255,0.45); border-color: rgba(108,99,255,0.4); }
  .toast.info strong { color: var(--accent); }
  .toast.warning { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.45); border-color: rgba(251,191,36,0.45); }
  .toast.warning strong { color: #fbbf24; }
  .toast .icon { font-size: 15px; flex: 0 0 auto; line-height: 1; }
  .toast .content strong { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
  .toast-close { background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 0 0.15rem; margin-left: auto; align-self: flex-start; }
  .toast-close:hover { color: var(--text); }
  @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

  /* Backward-Compat für alte mem-toast-wrap Referenzen */
  .mem-toast-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1200; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }

  /* Chat-Drop-Overlay (File-Drop ins Chat-Fenster) */
  .chat-drop-overlay {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(78,205,196,0.08);
    border: 2px dashed var(--accent2);
    border-radius: 12px;
    margin: 0.6rem;
    pointer-events: none;
    z-index: 4;
    backdrop-filter: blur(2px);
  }
  .chat.drag-over .chat-drop-overlay { display: flex; }
  .chat-drop-overlay-inner {
    text-align: center; color: var(--text);
    font-size: 15px; font-weight: 700;
    background: rgba(19,19,31,0.85);
    padding: 1.2rem 2rem;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
  }
  .chat-drop-overlay-inner .drop-icon { font-size: 40px; display: block; margin-bottom: 0.4rem; }

  /* Mikrofon-Button im Composer */
  .mic-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; }
  .mic-btn.recording { color: #fff; background: #dc2626; border-color: #dc2626; animation: micPulse 1.2s ease-in-out infinite; }
  @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
  .mic-btn svg { width: 16px; height: 16px; }

  /* Vorlesen-Knopf: teilt die Optik des Mikrofons. Aus = Schrägstrich über
     dem Lautsprecher, an = Akzentfarbe und Schallwellen. */
  .tts-btn.is-on { color: var(--accent); border-color: var(--accent); }
  .tts-btn .tts-wave { opacity: 0; transition: opacity 0.15s; }
  .tts-btn.is-on .tts-wave { opacity: 1; }
  .tts-btn.is-on .tts-slash { display: none; }

  /* Büroklammer — gleiche Optik wie das Mikrofon, damit die beiden Knöpfe im
     Eingabefeld als Paar wirken. */
  .attach-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  }
  .attach-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
  .attach-btn:disabled { opacity: 0.5; cursor: default; }
  .attach-btn svg { width: 16px; height: 16px; }
  /* Chip, solange die Datei noch gelesen wird */
  .composer-chip.chip-loading { opacity: 0.65; }
  .composer-chip .chip-kind { color: var(--text2); font-weight: 600; font-size: 12px; }

  /* Drag-Drop in Composer */
  .composer-box.drag-over {
    border-color: var(--accent);
    background: rgba(108,99,255,0.08);
    box-shadow: 0 0 0 2px rgba(108,99,255,0.2);
  }
  .composer-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0 0.4rem 0.5rem;
  }
  .composer-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: rgba(108,99,255,0.14);
    border: 1px solid rgba(108,99,255,0.4);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px; font-weight: 600;
    max-width: 100%;
  }
  .composer-chip .chip-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  }
  .composer-chip .chip-remove {
    background: transparent; border: none; color: var(--text2);
    cursor: pointer; padding: 0 0 0 0.15rem;
    font-size: 15px; line-height: 1;
  }
  .composer-chip .chip-remove:hover { color: var(--text); }
  .doc-row-draggable { cursor: grab; }
  .doc-row-draggable:active { cursor: grabbing; }

  /* Generisches Modal (für Workflow-Anfrage etc.) */
  .modal-overlay-v2 {
    display: none;
    position: fixed; inset: 0;
    z-index: 1000;
    /* Kanon §12: ein Dialog dunkelt den Hintergrund ab. Stand vorher auf
       `transparent` — das Installations-Modal schwebte ohne Abgrenzung. */
    background: var(--a4h-overlay, rgba(0,0,0,0.35));
    padding: 2rem;
    align-items: center; justify-content: center;
  }
  .modal-overlay-v2.open { display: flex; }
  .modal-card {
    width: 100%; max-width: 520px;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 1.4rem 1.5rem 1.2rem;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .modal-card.wide { max-width: 860px; }
  .modal-card h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
  .modal-card .modal-sub { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 1rem; }

  /* Dokumenten-Viewer (Overlay) */
  .docviewer-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 1000;
    background: transparent;
    padding: 2rem;
    align-items: center; justify-content: center;
  }
  .docviewer-overlay.open { display: flex; }
  .docviewer {
    width: 100%; max-width: 920px; max-height: 90vh;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .docviewer-head {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex: 0 0 auto;
  }
  .docviewer-title {
    font-size: 15px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
  }
  .docviewer-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
  .docviewer-action {
    padding: 0.4rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text2);
    font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
  }
  .docviewer-action:hover { color: var(--text); border-color: var(--border-strong); }
  .docviewer-body { flex: 1 1 auto; overflow: auto; background: rgba(0,0,0,0.3); position: relative; }
  .docviewer-body iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
  .docviewer-body img { max-width: 100%; max-height: 100%; display: block; margin: auto; }
  .docviewer-body pre {
    padding: 1rem 1.2rem; margin: 0;
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: 14px; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
    line-height: 1.55;
  }
  .docviewer-eml-headers {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(108,99,255,0.06);
    font-size: 13px;
    color: var(--text2);
  }
  .docviewer-eml-headers strong { color: var(--text); font-weight: 600; }
  .docviewer-eml-headers .h-row { margin-bottom: 0.25rem; }
  .docviewer-fallback { padding: 2rem; text-align: center; color: var(--text3); }

  /* Storage-Meter */
  .storage-meter { margin-bottom: 0.9rem; }
  .storage-meter-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; margin-bottom: 0.3rem; }
  .storage-meter-head strong { color: var(--text); font-weight: 700; }
  .storage-meter-head span { color: var(--text3); }
  .storage-meter-bar { height: 6px; width: 100%; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
  .storage-meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%); transition: width 0.3s ease; }
  .storage-meter-fill.warn { background: linear-gradient(90deg, #fbbf24 0%, #f97316 100%); }
  .storage-meter-fill.full { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }

  /* Agent-Dokumente Drawer */
  .docs-cat-row { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
  .docs-cat-picker { flex: 1; display: flex; gap: 0.3rem; flex-wrap: wrap; }
  .docs-cat-pick {
    padding: 0.32rem 0.7rem; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: 999px;
    color: var(--text2); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all 0.15s;
  }
  .docs-cat-pick:hover { color: var(--text); border-color: var(--border-strong); }
  .docs-cat-pick.active { background: rgba(108,99,255,0.18); border-color: rgba(108,99,255,0.5); color: var(--text); }
  .docs-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.9rem 0 0.5rem; }
  .docs-filter-btn { padding: 0.25rem 0.6rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
  .docs-filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
  .docs-filter-btn.active { background: rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.5); color: var(--text); }
  .upload-dropzone {
    margin-bottom: 0.55rem;
    padding: 0.85rem 1rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: 9px;
    background: rgba(255,255,255,0.02);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    color: var(--text2); font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .upload-dropzone:hover { border-color: var(--accent); color: var(--text); background: rgba(108,99,255,0.04); }
  .upload-dropzone.dragging {
    border-color: var(--accent); border-style: solid;
    background: rgba(108,99,255,0.1); color: var(--text);
    box-shadow: 0 0 0 2px rgba(108,99,255,0.2);
  }
  .upload-dropzone svg { color: var(--accent2); flex: 0 0 auto; }
  .upload-dropzone.staged {
    color: var(--text); border-style: solid; border-color: var(--border-strong);
    background: rgba(108,99,255,0.04); justify-content: flex-start;
  }
  .upload-clear-btn {
    background: transparent; border: none; color: var(--text3);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0.25rem;
    flex: 0 0 auto;
  }
  .upload-clear-btn:hover { color: var(--text); }
  .upload-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.9rem;
  }
  .upload-row-label {
    font-size: 12px; font-weight: 600; color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  }
  .cat-dropdown { position: relative; flex: 1; min-width: 0; }
  .cat-dropdown-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .cat-dropdown-btn:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.05); }
  .cat-dropdown-btn svg { color: var(--text3); transition: transform 0.15s; }
  .cat-dropdown.open .cat-dropdown-btn svg { transform: rotate(180deg); }
  .cat-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: 0.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 20;
  }
  .cat-dropdown.open .cat-dropdown-menu { display: block; }
  .cat-dropdown-item {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    color: var(--text); font-size: 14px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .cat-dropdown-item:hover { background: rgba(255,255,255,0.05); }
  .cat-dropdown-item.selected { background: rgba(108,99,255,0.15); color: var(--text); font-weight: 700; }
  .cat-dropdown-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .cat-dropdown-item .dot.vorlage { background: var(--accent); }
  .cat-dropdown-item .dot.wissen { background: var(--accent2); }
  .cat-dropdown-item .dot.referenz { background: #fbbf24; }
  .cat-dropdown-item .dot.sonstiges { background: rgba(255,255,255,0.3); }
  .upload-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--accent);
    border: none; border-radius: 9px;
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    flex: 0 0 auto;
  }
  .upload-btn:hover { box-shadow: 0 4px 12px rgba(108,99,255,0.4); }
  .upload-divider { height: 1px; background: var(--border); margin: 0.6rem 0 0.7rem; }

  /* Wissen-View-Toggle (Liste / Mindmap) */
  /* Liste ↔ Mindmap WECHSELT die Ansicht — laut Kanon §1 eine Reiterleiste,
     kein Kasten mit Segmenten. */
  .docs-view-toggle {
    display: inline-flex; align-items: center; gap: 0.25rem;
  }
  .dvt-btn {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    padding: 9px 16px; cursor: pointer;
    transition: color .12s, border-color .12s;
  }
  .dvt-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
  .dvt-btn.active {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
  .dvt-btn svg { opacity: 0.9; }

  /* Mindmap-Container */
  .docs-view-mindmap { display: flex; flex-direction: column; gap: 0.5rem; }
  .mm-tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
  }
  .mm-tab, .mm-tab-add {
    background: transparent; border: 1px solid transparent;
    color: var(--text3); font-family: inherit; font-size: 12px; font-weight: 600;
    padding: 0.5rem 0.8rem; cursor: pointer; border-radius: 6px 7px 0 0;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap; max-width: 180px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .mm-tab:hover, .mm-tab-add:hover { color: var(--text); background: rgba(108,99,255,0.06); }
  .mm-tab.active { color: var(--text); border-bottom-color: var(--accent); background: rgba(108,99,255,0.08); }
  .mm-tab.pinned::before { content: '📌 '; font-size: 12px; }
  .mm-tab-add { color: var(--accent); font-size: 20px; font-weight: 700; padding: 0.3rem 0.7rem; }
  .mm-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.1rem;
    font-size: 12px; color: var(--text3);
  }
  .mm-hint { font-size: 11px; line-height: 1.3; flex: 1; min-width: 0; }
  .mm-actions { display: flex; gap: 4px; }
  .mm-btn.mm-btn-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #fca5a5; }
  .mm-btn.mm-btn-danger:hover { background: rgba(239,68,68,0.15); }
  .mm-btn.active { background: rgba(78,205,196,0.18); border-color: rgba(78,205,196,0.5); color: #4ecdc4; }
  .mm-btn {
    padding: 0.3rem 0.7rem;
    background: rgba(108,99,255,0.12);
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: 6px;
    color: var(--text); font-family: inherit; font-size: 12px;
    font-weight: 600; cursor: pointer;
    transition: all 0.15s;
  }
  .mm-btn:hover { background: rgba(108,99,255,0.22); border-color: rgba(108,99,255,0.5); }
  .mm-canvas {
    width: 100%; height: 62vh; min-height: 420px;
    background: radial-gradient(ellipse at center, rgba(108,99,255,0.04) 0%, rgba(11,12,16,0) 70%), #0c0c12;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
  }
  .mm-empty {
    padding: 1.5rem 1rem; text-align: center;
    color: var(--text3); font-size: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border);
    border-radius: 9px;
  }
  /* markmap SVG styling — dunkles Theme, warmere Töne als Default */
  #mmSvg .markmap-node > circle { fill: #6c63ff; stroke: rgba(108,99,255,0.4); stroke-width: 1.5px; }
  #mmSvg .markmap-node > line { stroke: rgba(108,99,255,0.4); stroke-width: 2px; }
  #mmSvg .markmap-link { stroke: rgba(108,99,255,0.35); }
  #mmSvg .markmap-foreign { color: var(--text); font-family: inherit; font-size: 13px; }
  #mmSvg .markmap-foreign a { color: var(--accent); }
  /* Cluster-Farben per Tiefe */
  #mmSvg g[data-depth="1"] > line { stroke: rgba(78,205,196,0.55); }
  #mmSvg g[data-depth="1"] > circle { fill: #4ecdc4; stroke: rgba(78,205,196,0.4); }
  #mmSvg g[data-depth="2"] > line { stroke: rgba(245,158,11,0.5); }
  #mmSvg g[data-depth="2"] > circle { fill: #f59e0b; stroke: rgba(245,158,11,0.4); }
  #mmSvg g[data-depth="3"] > line { stroke: rgba(232,121,160,0.45); }
  #mmSvg g[data-depth="3"] > circle { fill: #e879a0; stroke: rgba(232,121,160,0.4); }

  .docs-search {
    position: relative;
    margin-bottom: 0.6rem;
  }
  .docs-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit; font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .docs-search input:focus { border-color: var(--accent); background: rgba(255,255,255,0.05); }
  .docs-search input::placeholder { color: var(--text3); }
  .docs-search svg { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
  .docs-search-clear {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--text3);
    width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; font-size: 15px; line-height: 1;
    display: none;
  }
  .docs-search-clear:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .docs-search.has-value .docs-search-clear { display: inline-flex; align-items: center; justify-content: center; }
  .filter-label-row {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 12px; font-weight: 600; color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
  }

  /* Basiswissen-Sektion (aus agent_knowledge_nodes) — vordefiniertes Wissen aus dem Konfigurator */
  .kb-basiswissen-section {
    margin-bottom: 0.8rem;
    padding: 0.5rem 0.35rem 0.6rem;
    border: 1px solid rgba(108,99,255,0.18);
    border-radius: 9px;
    background: rgba(108,99,255,0.04);
  }
  .kb-basiswissen-header {
    font-size: 11px;
    color: var(--accent2);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem 0.4rem;
  }
  .kb-chapter {
    padding: 0.45rem 0.55rem 0.55rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
  }
  .kb-chapter:last-child { margin-bottom: 0; }
  .kb-chapter-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.18rem;
  }
  .kb-chapter-body {
    font-size: 12px;
    color: var(--text3);
    line-height: 1.4;
    margin-bottom: 0.35rem;
  }
  .kb-chapter-sources {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding-left: 0.2rem;
  }
  .kb-source-row {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    min-width: 0;
  }
  .kb-source-row:hover { background: rgba(108,99,255,0.1); color: var(--accent2); }
  .kb-source-icon { font-size: 12px; opacity: 0.6; flex-shrink: 0; }
  .kb-source-title {
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kb-source-host {
    font-size: 11px;
    color: var(--text3);
    background: rgba(255,255,255,0.04);
    padding: 0.1rem 0.4rem;
    border-radius: 9px;
    flex-shrink: 0;
  }

  /* Neue Doc-Row: Titel oben volle Breite, Fußzeile unten mit allen Details */
  .doc-folder-row {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.38rem 0.45rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    transition: background 0.12s;
    user-select: none;
  }
  .doc-folder-row:hover { background: rgba(255,255,255,0.04); }
  .doc-folder-toggle { color: var(--text3); font-size: 11px; width: 0.8em; }
  .doc-folder-icon { font-size: 15px; }
  .doc-folder-name { flex: 1; font-weight: 600; }
  .doc-folder-count {
    font-size: 11px;
    color: var(--text3);
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.45rem;
    border-radius: 9px;
  }
  .file-item.doc-row-v2 {
    flex-direction: column;
    align-items: stretch;
    padding: 0.55rem 0.75rem 0.45rem;
    gap: 0.35rem;
  }
  .doc-row-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px; font-weight: 600; color: var(--text);
    line-height: 1.3;
    cursor: pointer;
    padding: 0;
  }
  .doc-row-title:hover { color: var(--accent2); }
  .doc-row-footer {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 11px; color: var(--text3);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
  }
  .doc-row-footer .doc-row-meta-inline {
    flex: 1; min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .doc-row-footer .doc-cat-badge {
    transform: scale(0.9); transform-origin: left center;
    margin-right: 0.1rem;
    background: rgba(255,255,255,0.05);
    color: var(--text3);
    font-weight: 600;
  }
  .doc-row-footer .doc-cat-badge.vorlage,
  .doc-row-footer .doc-cat-badge.wissen,
  .doc-row-footer .doc-cat-badge.referenz,
  .doc-row-footer .doc-cat-badge.sonstiges {
    background: rgba(255,255,255,0.05);
    color: var(--text3);
  }
  .doc-row-meta-inline { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text3); flex: 1; min-width: 0; flex-wrap: wrap; }
  .doc-row-dot { opacity: 0.5; margin: 0 0.25rem; }
  .doc-status {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 11px; font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin-right: 0.25rem;
  }
  .doc-status.ready { background: rgba(78,205,196,0.12); color: var(--accent2); }
  .doc-status.extracting { background: rgba(251,191,36,0.12); color: #fbbf24; }
  .doc-status.error { background: rgba(239,68,68,0.12); color: #fca5a5; }
  .doc-status.unsupported { background: rgba(255,255,255,0.04); color: var(--text3); }
  .doc-status .spin { display: inline-block; animation: docspin 1s linear infinite; }
  @keyframes docspin { to { transform: rotate(360deg); } }
  .doc-row-actions { display: flex; gap: 0.15rem; flex: 0 0 auto; margin-left: auto; }
  .doc-row-actions button {
    background: transparent;
    border: none;
    color: var(--text3);
    width: 22px; height: 22px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    padding: 0;
  }
  .doc-row-actions button svg { width: 12px; height: 12px; }
  .doc-row-actions .doc-view:hover { color: var(--accent2); background: rgba(78,205,196,0.12); }
  .doc-row-actions .doc-del:hover { color: #fca5a5; background: rgba(239,68,68,0.12); }

  .doc-cat-badge {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    margin-right: 0.4rem;
  }
  .doc-cat-badge.vorlage { background: rgba(108,99,255,0.18); color: var(--accent); }
  .doc-cat-badge.wissen { background: rgba(78,205,196,0.15); color: var(--accent2); }
  .doc-cat-badge.referenz { background: rgba(251,191,36,0.15); color: #fbbf24; }
  .doc-cat-badge.sonstiges { background: rgba(255,255,255,0.06); color: var(--text2); }

  /* Agent-Editor-Formular */
  .agent-edit-form { display: flex; flex-direction: column; gap: 0.9rem; }
  .aef-group { display: flex; flex-direction: column; gap: 0.35rem; }
  .aef-group label { font-size: 12px; font-weight: 600; color: var(--text2); letter-spacing: 0.02em; }
  .aef-info {
    display: inline-block;
    margin-left: 0.3rem;
    font-weight: 600;
    font-size: 12px;
    color: var(--text3);
    cursor: help;
    padding: 0 0.35rem;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 999px;
    transition: all 0.15s;
  }
  .aef-info:hover { color: var(--accent2); border-color: rgba(78,205,196,0.4); background: rgba(78,205,196,0.04); }
  .aef-hinweis { font-size: 12px; line-height: 1.55; color: var(--text3); margin-top: 0.1rem; }
  .aef-hinweis b { color: var(--text2); font-weight: 700; }
  .aef-group input, .aef-group textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit; font-size: 14px;
    padding: 0.6rem 0.8rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .aef-group textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
  .aef-group input:focus, .aef-group textarea:focus { border-color: var(--accent); background: rgba(255,255,255,0.05); }
  .aef-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.3rem; }
  /* Kanon §6: einfarbig statt Farbverlauf, ein Radius (9px), kein Anheben
     beim Ueberfahren — in dichten Leisten zappelt sonst die ganze Zeile. */
  .aef-actions .btn-primary {
    display: inline-flex; align-items: center;
    background: var(--accent);
    color: #fff; font-weight: 700; font-size: 14px;
    padding: 0.6rem 1.2rem; border-radius: 9px; border: none; cursor: pointer;
  }
  .aef-actions .btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
  .aef-status { font-size: 13px; color: var(--text3); }
  .aef-status.ok { color: var(--accent2); }
  .aef-status.err { color: #fca5a5; }
  .aef-status.loading { color: var(--text2); }

  /* Outputs — gruppierte Listenansicht (ersetzt die alte Kachelwand) */
  /* Kanon §2: das Suchfeld sitzt rechtsbuendig auf Hoehe der Filter und
     bleibt schmal — vorher lief es ueber die volle Breite und zaehlte im
     Platzhalter auf, was durchsucht wird (genau das Gegenbeispiel im Kanon). */
  .outputs-search-wrap {
    position: relative;
    display: flex; justify-content: flex-end;
    margin-bottom: 0.55rem;
  }
  .outputs-search {
    flex: 0 1 220px; min-width: 100px; box-sizing: border-box;
    padding: 0.45rem 2rem 0.45rem 1.9rem;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px;
    color: var(--text); font-size: 13px; font-family: inherit; outline: none;
  }
  /* Die Lupe als Zeichen davor — im Kanon ist sie Pflicht. */
  .outputs-search-wrap::before {
    content: '🔍';
    position: absolute; left: auto; right: calc(220px - 1.55rem);
    top: 50%; transform: translateY(-50%);
    font-size: 12px; line-height: 1; opacity: .75; pointer-events: none;
  }
  .outputs-search::placeholder { color: var(--text3); }
  .outputs-search:focus { border-color: var(--accent); }
  .outputs-search-clear {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--text3); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0.25rem 0.35rem; border-radius: 6px;
  }
  .outputs-search-clear:hover { color: var(--text); }
  /* Kanon §16: Form und Zustand des Filter-Chips kommen aus brand.css
     (.a4h-chips / .a4h-chip / .is-on). Hier stehen nur noch die beiden
     Zutaten, die es dort nicht gibt: der Zaehler und „keine Treffer".
     Vorher hatte diese Fläche eigene Radien/Farben — dieselbe Sache sah in
     Outputs anders aus als in Requests (Befund Ralph, 11.08.2026). */
  .outputs-filter { margin-bottom: 0.6rem; }
  .outputs-filter-btn .of-count { opacity: 0.6; font-weight: 600; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
  .outputs-filter-btn.is-empty { opacity: 0.32; }
  .outputs-bulkbar {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-bottom: 0.6rem; padding: 0.4rem 0.6rem;
    border: 1px solid rgba(108,99,255,0.35); background: rgba(108,99,255,0.08);
    border-radius: 9px; font-size: 12px; color: var(--text2);
  }
  .outputs-bulkbar button {
    font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    padding: 0.3rem 0.7rem; border-radius: 6px; color: var(--text);
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35);
  }
  .outputs-bulkbar button:hover { background: rgba(239,68,68,0.22); }
  .outputs-bulkbar button.of-ghost { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--text2); }
  .outputs-bulkbar button.of-ghost:hover { color: var(--text); border-color: var(--border-strong); }

  /* ── Karten-Raster wie in der Wissens-Liste ────────────────────────────
     Bewusst dieselbe Form wie die Karten in der Wissensdatenbank
     (desktop/renderer/mindmap-window.html, Block ".kn-list.kv2"): Vorschau-
     Blatt links, Typ-Zeile oben, Name, Metazeile — nur mit den Farbtokens
     dieser Seite. Ändert sich die Form dort, muss sie hier mitgezogen
     werden; die zwei Listen sollen gleich aussehen. */
  .outputs-list { display: block; }
  .outputs-group { margin-bottom: 18px; }
  .outputs-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    padding-top: 10px;
  }
  .output-card {
    position: relative;
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 12px 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    /* Kanon §13: Karten sind 12px. 14px war die 15. Radius-Variante im Haus. */
    border-radius: var(--a4h-r-l, 12px);
    overflow: hidden;
    transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s, background .12s;
  }
  .output-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--ov-accent, var(--accent)); opacity: .85;
  }
  .output-card:hover, .output-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    border-color: var(--border-strong);
  }
  .output-card.is-selected { border-color: var(--accent); background: rgba(108,99,255,0.1); }
  /* Vorschau-Blatt im A4-Hochformat, feste Maße — damit das Raster nicht
     springt, während die Bilder noch nachladen. */
  .ov-thumb {
    position: relative; flex: 0 0 auto;
    width: 74px; aspect-ratio: 1 / 1.414;
    border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden;
    background: rgba(128,128,160,0.12);
    display: flex; align-items: center; justify-content: center;
  }
  .ov-thumb img {
    position: absolute; inset: 0;          /* liegt über dem Platzhalter-Symbol */
    width: 100%; height: 100%; display: block;
    object-fit: contain; object-position: center;
    opacity: 0; transition: opacity .25s; background: #fff;
  }
  .ov-thumb img.is-ready { opacity: 1; }
  /* Bis das Bild da ist steht das Typ-Symbol in der Fläche — kein leerer
     grauer Kasten. Ist gar kein Bild möglich, bleibt es dauerhaft stehen. */
  .ov-thumb-ph { display: block; font-size: 24px; opacity: .35; }
  .ov-thumb.is-ok .ov-thumb-ph { display: none; }
  .ov-thumb.is-none img { display: none; }

  /* Unten Platz für Download/Löschen, die beim Überfahren erscheinen —
     sonst liegen die Knöpfe auf der Datumszeile. */
  .output-card-body { flex: 1 1 auto; min-width: 0; padding-bottom: 22px; }
  .output-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
  .output-card-icon { font-size: 15px; line-height: 1; }
  .output-card-kind {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text3); font-weight: 700;
  }
  .output-card-name {
    font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 4px;
  }
  .output-card-sub {
    font-size: 11px; color: var(--text2); line-height: 1.4; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .output-card-meta { font-size: 11px; color: var(--text3); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .output-card-check {
    position: absolute; top: 9px; right: 9px; z-index: 2;
    width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0;
    opacity: 0.35; transition: opacity .12s;
  }
  .output-card:hover .output-card-check,
  .output-card:focus-within .output-card-check,
  .output-card.is-selected .output-card-check { opacity: 1; }
  .output-card-actions {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: flex; gap: 0.3rem; opacity: 0; transition: opacity .12s;
  }
  .output-card:hover .output-card-actions,
  .output-card:focus-within .output-card-actions { opacity: 1; }
  @media (hover: none) { .output-card-actions, .output-card-check { opacity: 1; } }

  .outputs-group-head {
    position: sticky; top: -1px; z-index: 3;
    /* Der Scroll-Container hat oben 16px Innenabstand; sticky misst ab dessen
       Content-Kante, die Kopfzeile bleibt also 16px UNTER dem sichtbaren Rand
       kleben. In dem Streifen liefen vorher die Karten der Gruppe darueber
       halb sichtbar durch (Befund Ralph, 20.09.2026). Der Deckel unten faengt
       genau diesen Streifen ab — 18px = Abstand zwischen zwei Gruppen, ragt
       also nie in die Karten der vorigen Gruppe hinein. */
    display: flex; align-items: baseline; gap: 0.45rem;
    padding: 0.5rem 0.1rem 0.3rem;
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text2);
  }
  .outputs-group-head::before {
    content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
    background: var(--surface-solid); pointer-events: none;
  }
  .outputs-group-head .og-count { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

  .output-card-badge { font-size: 10px; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(108,99,255,0.18); color: var(--accent2); letter-spacing: 0.04em; margin-left: 0.3rem; vertical-align: middle; }
  .output-card-actions a, .output-card-actions button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; text-decoration: none;
    font-size: 13px; font-family: inherit; cursor: pointer;
    background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.3); color: var(--text);
    backdrop-filter: blur(6px);
  }
  .output-card-actions a:hover { background: rgba(108,99,255,0.24); }
  .output-card-actions button { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); }
  .output-card-actions button:hover { background: rgba(239,68,68,0.2); }
  .output-card-actions a:focus-visible, .output-card-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .outputs-empty { text-align: center; padding: 2rem 1rem; color: var(--text3); font-size: 14px; }
  .outputs-empty button {
    display: inline-block; margin-top: 0.7rem; font-family: inherit; font-size: 12px; font-weight: 700;
    padding: 0.35rem 0.8rem; border-radius: 9px; cursor: pointer;
    background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.35); color: var(--text);
  }
  .outputs-empty button:hover { background: rgba(108,99,255,0.22); }

  @media (max-width: 640px) {
    /* Auf dem Handy eine Spalte — zwei 210px-Karten passen nicht nebeneinander. */
    .outputs-group-body { grid-template-columns: 1fr; }
  }

  /* Keep-Agent card */
  .keep-card { text-align: center; padding: 0.6rem 0; }
  .keep-card h3 {
    font-size: 20px; font-weight: 700; margin-bottom: 0.5rem;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.72) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .keep-card p { color: var(--text2); font-size: 14px; margin-bottom: 1.2rem; }
  .keep-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
  /* Kanon §6 (BRANDING.md): einfarbig, Radius 9px, kein Anheben. Der
     Farbverlauf lebte nur hier — CRM, Planer und der Pilot-CTA waren schon
     einfarbig; er war der Ausreisser, nicht die Regel. */
  .btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 14px; font-weight: 700;
    padding: 0.75rem 1.3rem; border-radius: 9px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .btn-primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  .btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 86%, #fff);
    border-color: color-mix(in srgb, var(--accent) 86%, #fff);
  }
  .btn-secondary {
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border-color: var(--border-strong);
  }
  .btn-secondary:hover { background: rgba(255,255,255,0.08); }

  .automations-list { display: flex; flex-direction: column; gap: 0.6rem; }
  .automation-item {
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 9px;
  }
  .automation-item strong { display: block; margin-bottom: 0.25rem; font-size: 14px; }
  .automation-item small { color: var(--text2); font-size: 13px; }
  .automation-empty { text-align: center; color: var(--text3); padding: 1.6rem; font-size: 14px; line-height: 1.5; }

  /* ── Lauf-Historie ───────────────────────────────────────────────────
     Als Zeitleiste statt als Liste grauer Textzeilen: farbiges Statuszeichen
     in einem Kreis, Zeit monospaced, das Ergebnis rechts als Chip-Knopf. */
  .auto-item-runs { margin: 0.15rem 0 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .auto-runs-empty { color: var(--text3); font-size: 12px; padding: 0.25rem 0; }
  .auto-run {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 12px; color: var(--text2);
    padding: 0.3rem 0.4rem; border-radius: 9px;
    transition: background 0.15s;
  }
  .auto-run:hover { background: rgba(128,128,160,0.09); }
  .auto-run-icon {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1;
    background: rgba(128,128,160,0.14); color: var(--text3);
  }
  .auto-run-when { flex: 0 0 auto; color: var(--text3); font-variant-numeric: tabular-nums; font-size: 12px; }
  .auto-run-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auto-run.ok .auto-run-icon { color: #17a398; background: rgba(78,205,196,0.18); }
  .auto-run.warn .auto-run-icon { color: #b57d00; background: rgba(240,180,41,0.2); }
  .auto-run.error .auto-run-icon { color: #e5484d; background: rgba(239,68,68,0.16); }
  .auto-run a {
    flex: 0 0 auto; text-decoration: none;
    padding: 0.16rem 0.6rem; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: var(--accent); background: rgba(108,99,255,0.12);
    border: 1px solid rgba(108,99,255,0.26);
    transition: all 0.15s;
  }
  .auto-run a:hover { background: rgba(108,99,255,0.22); border-color: rgba(108,99,255,0.45); }
  .auto-run-output { margin: 0.3rem 0 0; padding: 0.6rem 0.7rem; background: rgba(128,128,160,0.1); border: 1px solid var(--border); border-radius: 9px;
    font-size: 12px; line-height: 1.5; max-height: 260px; overflow: auto; white-space: pre-wrap; }
  /* Aufklapp-Zeile unter der Lauf-Liste: standardmaessig ist nur der neueste
     Lauf sichtbar, damit die Karte nicht von alten Reports zugestellt wird. */
  .auto-runs-more { display: flex; gap: 0.6rem; padding: 0.1rem 0.4rem 0; }
  .auto-runs-more button {
    background: none; border: none; padding: 0.1rem 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text3);
  }
  .auto-runs-more button:hover { color: var(--accent); }

  /* Responsive */
  @media (max-width: 680px) {
    .topbar { padding: 0.7rem 0.9rem; }
    .topbar-logo img { height: 28px; }
    .topbar-agent { position: static; transform: none; gap: 0.5rem; }
    .topbar-agent .agent-hex { width: 30px; height: 30px; }
    .agent-name { font-size: 14px; }
    .agent-role { font-size: 11px; }
    .trial-badge { display: none; }
    .chat { padding: 1rem 0.9rem 0; }
    .msg-bubble { max-width: 82%; font-size: 14px; }
    .footer-btn { padding: 0.5rem 0.85rem; font-size: 12px; }
  }

  /* ── Mobile-Topbar (Handy / PWA) ─────────────────────────────
     Unter 720px wandern Plan-Badge, Tutorial, Kopieren/Löschen und
     Theme-Toggle in das „⋯ Mehr"-Menü; das User-Menü wird zum reinen
     Avatar. So bleibt jede Aktion erreichbar statt rechts abgeschnitten. */
  .mob-nav-btn { display: none; }
  @media (max-width: 760px) {
    .mob-nav-btn { display: inline-flex; }
    .topbar-left { gap: 0.6rem; padding-left: 0; }
  }
  .mob-more-wrap { position: relative; display: none; }
  .mob-more-dropdown {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 230px;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 0.4rem;
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
    z-index: 1000;
  }
  .mob-more-wrap.open .mob-more-dropdown { display: block; }
  .mob-more-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%;
    background: transparent; border: 0;
    padding: 0.7rem 0.75rem;             /* ≥44px Touch-Target */
    font-size: 14px; font-weight: 600;
    color: var(--text);
    cursor: pointer; border-radius: 9px;
    font-family: inherit; text-align: left;
  }
  .mob-more-item:active, .mob-more-item:hover { background: rgba(128,128,160,0.12); }
  .mob-more-item svg { flex: 0 0 auto; color: var(--text2); }
  @media (max-width: 720px) {
    .topbar-right { gap: 0.45rem; }
    .topbar-right .tb-hide-mobile,
    .topbar-right .plan-badge,
    .topbar-right .tut-menu-wrap { display: none !important; }
    .mob-more-wrap { display: inline-flex; }
    /* User-Menü: nur Avatar, Name + Chevron ausblenden */
    .user-menu-btn #userMenuName, .user-menu-btn > svg { display: none; }
    .user-menu-btn { padding: 0.25rem; }
  }
  /* Installierte App (PWA, viewport-fit=cover): Notch/Home-Indikator freihalten */
  @media (display-mode: standalone) {
    .topbar { padding-top: calc(0.7rem + env(safe-area-inset-top, 0px)); }
    .composer { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  }

  /* ── Workflow-Builder Mode ──────────────────────────────── */
  .chat.builder-mode {
    background:
      radial-gradient(1000px 500px at 10% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
      radial-gradient(900px 500px at 100% 110%, rgba(78, 205, 196, 0.14), transparent 55%),
      linear-gradient(180deg, rgba(124, 92, 255, 0.04), rgba(0, 0, 0, 0));
    transition: background 220ms ease;
  }
  /* Secondary-Sidebar behält im Builder-Mode ihre Standard-Optik und -Breite */
  /* Builder-Avatar: gleiches Logo wie im Hauptchat, nur Icon rot eingefärbt — kein Hintergrund, kein Rahmen */
  .chat.builder-mode .msg.agent .msg-avatar {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .chat.builder-mode .msg.agent .msg-avatar img {
    /* Weicher Rot-Tint statt brutalem saturate(6493%) — sonst wirkt das
       Logo bei Skalierung wie pixelig/aliasiert. */
    filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(2200%) hue-rotate(340deg) brightness(102%) contrast(95%);
    image-rendering: auto;
  }
  /* Light-Theme: heller Hintergrund schluckte den Drop-Shadow und die roten
     Highlights des Logos — auf dunklerer Variante schalten. */
  :root[data-theme="light"] .chat.builder-mode .msg.agent .msg-avatar {
    filter: drop-shadow(0 0 4px rgba(124,92,255,0.25));
  }
  :root[data-theme="light"] .chat.builder-mode .msg.agent .msg-avatar img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(3500%) hue-rotate(345deg) brightness(95%) contrast(110%);
  }
  .chat.builder-mode .typing-indicator { color: #ff6b6b; }
  .chat.builder-mode .composer-box {
    border: 1px solid rgba(124, 92, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12), 0 6px 22px rgba(124, 92, 255, 0.18);
  }
  .chat.builder-mode .composer-input { color: #e6e1ff; }
  :root[data-theme="light"] .chat.builder-mode .composer-input { color: var(--text); }
  :root[data-theme="light"] .chat.builder-mode .composer-input::placeholder { color: var(--text3); }
  .chat.builder-mode .send-btn {
    background: var(--accent);
  }
  .builder-header {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    margin: 0 0.9rem 0.7rem 0.9rem;
    background: linear-gradient(90deg, rgba(124, 92, 255, 0.22), rgba(78, 205, 196, 0.12));
    border: 1px solid rgba(124, 92, 255, 0.4);
    border-radius: 12px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .builder-header .bh-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: rgba(124, 92, 255, 0.28);
    border: 1px solid rgba(124, 92, 255, 0.5);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #d9d0ff;
  }
  .builder-header .bh-title {
    flex: 1 1 140px; min-width: 0;
    font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .builder-header .bh-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }
  .builder-header .bh-btn:hover { background: rgba(255,255,255,0.08); }
  .builder-header .bh-btn.primary {
    background: var(--accent);
    color: #0a0a0f;
    border: none;
    font-weight: 600;
  }
  .builder-header .bh-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Steps-Inhalte in der Sekundär-Sidebar */
  .bsp-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #b0a8d6; margin-bottom: 0.7rem;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .bsp-head::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #7c5cff; box-shadow: 0 0 8px #7c5cff;
  }
  .bsp-section { margin-bottom: 0.9rem; }
  .bsp-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b0a8d6;
    margin-bottom: 0.35rem;
    font-weight: 600;
  }
  .bsp-input, .bsp-textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms ease, background 120ms ease;
    box-sizing: border-box;
  }
  .bsp-input:focus, .bsp-textarea:focus {
    border-color: rgba(124, 92, 255, 0.7);
    background: rgba(124, 92, 255, 0.08);
  }
  .bsp-textarea { resize: vertical; line-height: 1.45; }
  .bsp-actions {
    display: flex; gap: 0.5rem;
    margin-bottom: 0.4rem;
  }
  .bsp-action {
    flex: 1;
    padding: 0.55rem 0.8rem;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
  }
  .bsp-action:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
  .bsp-action.primary {
    background: linear-gradient(135deg, #7c5cff 0%, #4ecdc4 100%);
    color: #0a0a0f;
    border: none;
  }
  .bsp-action:disabled { opacity: 0.45; cursor: not-allowed; }
  .bsp-file {
    padding: 0.4rem 0.6rem;
    background: rgba(78, 205, 196, 0.08);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 0.35rem;
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  }
  .bsp-file .bsp-file-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #8fe3dd;
    background: rgba(78, 205, 196, 0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
  }
  .bsp-file-remove {
    margin-left: auto;
    background: transparent; border: none; color: #ff6b6b;
    font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1;
    border-radius: 6px;
  }
  .bsp-file-remove:hover { background: rgba(255,107,107,0.15); }
  .bsp-kn-pick-btn {
    background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.35);
    color: #b6afff; font-size: 12px; padding: 0.25rem 0.55rem; border-radius: 6px;
    cursor: pointer; font-weight: 600;
  }
  .bsp-kn-pick-btn:hover { background: rgba(108,99,255,0.22); }
  .kn-picker-list {
    max-height: 55vh; overflow-y: auto; margin: 0.5rem 0 1rem;
    border: 1px solid var(--border); border-radius: 9px; padding: 0.4rem;
  }
  .kn-picker-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px;
  }
  .kn-picker-item:last-child { border-bottom: none; }
  .kn-picker-item:hover { background: rgba(108,99,255,0.06); }
  .kn-picker-item.disabled { opacity: 0.5; cursor: not-allowed; }
  .kn-picker-item input[type="checkbox"] { cursor: pointer; }
  .kn-picker-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .kn-picker-meta { font-size: 11px; color: var(--text2); }
  .kn-picker-empty { padding: 1.5rem; text-align: center; color: var(--text2); font-size: 14px; }
  .bsp-step {
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.25);
    border-radius: 9px;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.4rem;
    font-size: 12px;
    line-height: 1.4;
  }
  .bsp-step .bsp-step-head {
    display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem;
  }
  .bsp-step .bsp-step-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #7c5cff; font-weight: 700;
    padding: 0.1rem 0.35rem;
    background: rgba(124, 92, 255, 0.15);
    border-radius: 6px;
  }
  .bsp-step .bsp-step-label { color: var(--text); font-weight: 600; }
  .bsp-step .bsp-step-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: var(--text3);
  }
  .bsp-step .bsp-step-foreach {
    font-size: 11px; color: #4ecdc4;
    margin-top: 0.25rem;
    padding: 0.15rem 0.35rem;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 6px;
    display: inline-block;
  }
  .bsp-step .bsp-step-inputs {
    margin-top: 0.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: var(--text);
    white-space: pre-wrap; word-break: break-all;
    max-height: 180px; overflow: auto;
    background: rgba(0,0,0,0.25); padding: 0.35rem 0.45rem; border-radius: 6px;
    width: 100%; box-sizing: border-box;
    border: 1px solid transparent;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .bsp-step .bsp-step-inputs:focus {
    border-color: rgba(124, 92, 255, 0.55);
    background: rgba(0,0,0,0.4);
  }
  .bsp-step .bsp-step-inputs.bsp-edit-error {
    border-color: rgba(255, 107, 107, 0.7);
    background: rgba(255, 107, 107, 0.06);
  }
  .bsp-step .bsp-step-inputs.bsp-edit-saved {
    border-color: rgba(78, 205, 196, 0.7);
    background: rgba(78, 205, 196, 0.07);
  }
  .bsp-step.status-ok {
    border-left: 3px solid #4ecdc4;
    background: linear-gradient(90deg, rgba(78,205,196,0.08), rgba(124,92,255,0.04));
  }
  .bsp-step.status-error {
    border-left: 3px solid #ff6b6b;
    background: linear-gradient(90deg, rgba(255,107,107,0.1), rgba(124,92,255,0.04));
  }
  .bsp-step-status {
    font-size: 12px; font-weight: 700; margin-left: auto;
  }
  .bsp-step-status.ok { color: #4ecdc4; }
  .bsp-step-status.err { color: #ff6b6b; }

  /* Light-Theme Overrides für Workflow-Builder Step-Cards */
  :root[data-theme="light"] .bsp-step .bsp-step-inputs {
    background: rgba(15,15,30,0.05);
    color: #14141d;
  }
  :root[data-theme="light"] .bsp-step .bsp-step-inputs:focus {
    background: rgba(15,15,30,0.08);
  }
  :root[data-theme="light"] .bsp-step .bsp-step-id {
    background: rgba(108,99,255,0.15);
    color: #4a3fce;
  }
  :root[data-theme="light"] .bsp-step .bsp-step-key {
    color: rgba(20,20,29,0.55);
  }
  /* JSON-Syntax-Highlighting: dunkle Versionen für Light-Mode */
  :root[data-theme="light"] .bsp-json-key   { color: #6c63ff; }
  :root[data-theme="light"] .bsp-json-val   { color: #0d6e6a; }
  :root[data-theme="light"] .bsp-json-val.is-ref { color: #b25500; }
  :root[data-theme="light"] .bsp-json-indent,
  :root[data-theme="light"] .bsp-json-colon,
  :root[data-theme="light"] .bsp-json-comma { color: rgba(20,20,29,0.55); }

  /* JSON-Display mit Tooltip pro Key */
  .bsp-json-display {
    margin-top: 0.3rem;
    padding: 0.4rem 0.5rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--text);
    cursor: text;
    transition: border-color 0.15s, background 0.15s;
  }
  .bsp-json-display:hover { border-color: rgba(124, 92, 255, 0.3); background: rgba(0,0,0,0.35); }
  .bsp-json-brace { color: var(--text3); }
  .bsp-json-line {
    display: block;
    padding: 0.05rem 0.1rem;
    border-radius: 3px;
    cursor: help;
    word-break: break-word;
    white-space: pre-wrap;
  }
  .bsp-json-line:hover { background: rgba(124, 92, 255, 0.15); }
  .bsp-json-indent { color: var(--text3); }
  .bsp-json-key { color: #a78bff; }
  .bsp-json-colon { color: var(--text3); }
  .bsp-json-val { color: #bdf0ec; }
  .bsp-json-val.is-ref { color: #ffd98a; font-style: italic; }
  .bsp-json-comma { color: var(--text3); }
  .bsp-hidden-edit { display: none !important; }

  /* Production-Run-Button — visuell deutlich abgegrenzt vom harmlosen Test-Run */
  .bsp-icon-btn.bsp-prod { color: #ff9f66; }
  .bsp-icon-btn.bsp-prod:hover:not(:disabled) {
    background: rgba(255, 107, 53, 0.15);
    color: #ffb380;
  }
  .bsp-icon-btn.bsp-save:hover:not(:disabled) {
    background: rgba(124, 92, 255, 0.15);
    color: #d9d0ff;
  }

  /* Workflow-Icon-Picker (Trigger-Button neben Name) */
  .bsp-icon-trigger {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    padding: 0;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.35);
    border-radius: 9px;
    color: #d9d0ff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
    margin-right: 0.45rem;
  }
  .bsp-icon-trigger:hover {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.6);
  }
  .bsp-icon-trigger svg { width: 20px; height: 20px; }
  .bsp-icon-trigger.is-empty svg { opacity: 0.55; }

  /* Header-Zeile des Workflow-Builders: Titel-Eingabe + Icon + Aktionen nebeneinander. */
  .bsp-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
  }
  .bsp-name-row .bsp-input { flex: 1 1 auto; min-width: 0; margin: 0; }
  .bsp-name-row .doc-row-actions { margin-left: 0; flex: 0 0 auto; }
  /* Icon-Trigger wandert rechts neben den Titel (war links, soll laut Ralph rechts). */
  .bsp-name-row .bsp-icon-trigger { order: 3; margin-right: 0; margin-left: 0.1rem; }
  .bsp-name-row .doc-row-actions { order: 2; }

  /* Undo + Run: Basis-Style hat gefehlt — ohne wurden sie als System-Buttons gerendert. */
  .bsp-icon-btn {
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 6px;
    color: var(--text2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .bsp-icon-btn:hover:not(:disabled) {
    background: rgba(124, 92, 255, 0.14);
    border-color: rgba(124, 92, 255, 0.55);
    color: var(--text);
  }
  .bsp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .bsp-icon-btn svg { width: 16px; height: 16px; }

  /* Light-Theme: Workflow-Icon-Trigger und Topbar-Hover lesbar halten. */
  :root[data-theme="light"] .bsp-icon-trigger {
    color: var(--text);
    background: rgba(124, 92, 255, 0.10);
    border-color: rgba(124, 92, 255, 0.4);
  }
  :root[data-theme="light"] .bsp-icon-trigger:hover {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.55);
  }
  :root[data-theme="light"] .bsp-icon-btn { color: var(--text2); }
  :root[data-theme="light"] .bsp-icon-btn:hover:not(:disabled) { color: var(--text); background: rgba(124, 92, 255, 0.10); }
  :root[data-theme="light"] .menu-btn:hover { background: rgba(15,15,30,0.06); }

  /* Icon-Picker-Modal */
  .icon-picker-search {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 9px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 0.7rem;
  }
  .icon-picker-search:focus {
    border-color: rgba(124, 92, 255, 0.7);
    background: rgba(124, 92, 255, 0.08);
  }
  .icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.4rem;
    max-height: 460px;
    overflow-y: auto;
    padding: 0.2rem;
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: 9px;
    background: rgba(0,0,0,0.18);
  }
  @media (max-width: 720px) {
    .icon-picker-grid { grid-template-columns: repeat(5, 1fr); }
  }
  .icon-picker-cell {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.15rem;
    padding: 0.45rem 0.2rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
    min-height: 60px;
  }
  .icon-picker-cell:hover {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.5);
  }
  .icon-picker-cell.is-selected {
    background: rgba(124, 92, 255, 0.25);
    border-color: rgba(124, 92, 255, 0.7);
  }
  .icon-picker-cell svg { width: 22px; height: 22px; color: var(--text); }
  .icon-picker-cell-label {
    font-size: 11px;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .icon-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text3);
    font-size: 14px;
    padding: 1.2rem;
  }
  .icon-picker-footer {
    display: flex; gap: 0.5rem; justify-content: space-between; align-items: center;
    margin-top: 0.9rem;
  }
  .icon-picker-footer .btn-secondary,
  .icon-picker-footer .btn-cancel {
    padding: 0.5rem 0.95rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--text2);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
  }
  .icon-picker-footer .btn-secondary:hover,
  .icon-picker-footer .btn-cancel:hover {
    background: rgba(255,255,255,0.09);
    color: var(--text);
  }

  /* Icon neben Workflow-Name in der Liste */
  .wf-list-icon {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #b0a8d6;
  }
  .wf-list-icon svg { width: 18px; height: 18px; }

  /* Engine-Badge (Code vs. DAG) in der Workflow-Liste */
  .wf-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 0.5px;
  }
  .wf-badge-code {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
  }
  .wf-badge-dag {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.35);
  }

  /* ── Code-Mode-Editor (engine='code') ── */
  .code-editor-prompt-box {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .code-editor-prompt-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text);
  }
  .code-editor-prompt-box textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-solid);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
  }
  .code-editor-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
  }
  .code-editor-actions button {
    cursor: pointer;
  }
  .code-editor-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .code-editor-stream {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 6px;
    padding: 12px;
    min-height: 60px;
    margin-bottom: 16px;
    white-space: pre-wrap;
    max-height: 500px;
    overflow-y: auto;
  }
  .code-editor-stream:empty::before {
    content: 'Noch nichts generiert. Trag oben einen Prompt ein und klick „Generieren".';
    color: var(--text3);
    font-style: italic;
  }
  .code-editor-stream pre.ev-code {
    margin: 8px 0;
    padding: 10px;
    background: rgba(108, 99, 255, 0.06);
    border-left: 3px solid rgba(108, 99, 255, 0.5);
    color: var(--text);
    white-space: pre-wrap;
  }
  :root[data-theme="light"] .code-editor-stream pre.ev-code {
    background: rgba(108, 99, 255, 0.05);
    border-left-color: #6c63ff;
    color: #4a3fcc;
  }
  .code-editor-stream .ev-iteration { color: var(--text2); margin-top: 8px; font-weight: 600; }
  .code-editor-stream .ev-exec-ok { color: #16a34a; }
  .code-editor-stream .ev-exec-fail { color: #dc2626; }
  .code-editor-stream .ev-final-ok {
    color: #16a34a; font-weight: 700;
    padding: 6px 8px; margin-top: 8px;
    background: rgba(22, 163, 74, 0.08);
    border-left: 3px solid #16a34a;
  }
  .code-editor-stream .ev-final-fail {
    color: #dc2626; font-weight: 700;
    padding: 6px 8px; margin-top: 8px;
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
  }
  .code-editor-saved {
    margin-top: 24px;
  }
  .code-editor-saved h3 {
    font-size: 14px;
    color: var(--text2);
    margin: 16px 0 8px;
  }
  .code-editor-saved pre {
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    color: var(--text);
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
  }
  :root[data-theme="light"] .code-editor-saved pre { color: #4a3fcc; }
  .code-editor-saved .audit-row {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
  }
  .code-editor-saved .audit-row.ok { color: #16a34a; }
  .code-editor-saved .audit-row.fail { color: #dc2626; }

  /* Step-Picker (+ Step hinzufügen) */
  .bsp-add-step-btn {
    padding: 0.25rem 0.6rem;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.35);
    border-radius: 6px;
    color: #d9d0ff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .bsp-add-step-btn:hover { background: rgba(124, 92, 255, 0.25); }
  .bsp-step-picker {
    margin: 0.3rem 0 0.6rem;
    padding: 0.55rem;
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 6px;
  }
  .bsp-picker-search {
    width: 100%;
    padding: 0.4rem 0.55rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 0.45rem;
  }
  .bsp-picker-search:focus { border-color: rgba(124, 92, 255, 0.55); }
  .bsp-picker-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
  .bsp-picker-item {
    display: block;
    text-align: left;
    padding: 0.45rem 0.55rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
  }
  .bsp-picker-item:hover {
    background: rgba(124, 92, 255, 0.12);
    border-color: rgba(124, 92, 255, 0.4);
    transform: translateY(-1px);
  }
  .bsp-picker-label { font-size: 13px; font-weight: 700; color: var(--text); }
  .bsp-picker-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: #a78bff; margin-top: 0.1rem;
  }
  .bsp-picker-desc {
    font-size: 11px; color: var(--text2);
    margin-top: 0.25rem; line-height: 1.4;
  }
  .bsp-picker-empty { font-size: 12px; color: var(--text3); padding: 0.6rem; text-align: center; }
  .bsp-picker-section-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    padding: 0.3rem 0.1rem 0.2rem;
    font-weight: 600;
  }
  .bsp-picker-section-head:first-child { padding-top: 0; }
  /* a4h-ausnahme: Mehr-anzeigen-Knopf, kein Ansichtswechsel */
  .bsp-picker-more-toggle {
    width: 100%;
    padding: 0.35rem 0.55rem;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--text2);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .bsp-picker-more-toggle:hover { border-color: rgba(124,92,255,0.4); color: var(--text); }

  /* Trigger-Block */
  .bsp-trigger-block {
    padding: 0.55rem 0.65rem;
    background: rgba(108, 99, 255, 0.04);
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-radius: 6px;
    margin-bottom: 0.6rem;
  }
  .bsp-trig-row { margin-bottom: 0.45rem; }

  /* Trigger-Inputs-Block: zeigt die ${trigger.X}-Felder, die beim Start abgefragt werden */
  .bsp-trig-inputs-block {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding: 0.55rem 0.6rem;
    background: rgba(124, 235, 225, 0.06);
    border: 1px dashed rgba(124, 235, 225, 0.25);
    border-radius: 6px;
  }
  .bsp-trig-input-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 12px;
  }
  .bsp-trig-input-icon { flex: 0 0 18px; text-align: center; }
  .bsp-trig-input-label { flex: 1; color: var(--text); font-weight: 600; }
  .bsp-trig-input-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #7ae0d4;
    background: rgba(124, 235, 225, 0.10);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
  }
  .bsp-trig-row:last-child { margin-bottom: 0; }
  .bsp-trig-row label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin-bottom: 0.18rem;
    font-weight: 600;
  }
  .bsp-trig-row input, .bsp-trig-row select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
  }
  .bsp-trig-row input:focus, .bsp-trig-row select:focus {
    border-color: rgba(124, 92, 255, 0.55);
  }
  .bsp-trig-row select { cursor: pointer; }

  /* Custom-Dropdown (ersetzt nativen select — respektiert unser Dark-Theme zuverlässig) */
  .bsp-select {
    position: relative;
    width: 100%;
    user-select: none;
  }
  .bsp-select-btn {
    width: 100%;
    padding: 0.35rem 1.7rem 0.35rem 0.5rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    position: relative;
  }
  .bsp-select-btn::after {
    content: '';
    position: absolute;
    right: 0.55rem; top: 50%;
    width: 9px; height: 9px;
    transform: translateY(-65%) rotate(45deg);
    border-right: 2px solid rgba(255,255,255,0.55);
    border-bottom: 2px solid rgba(255,255,255,0.55);
    transition: transform 0.15s ease;
  }
  .bsp-select.open .bsp-select-btn::after {
    transform: translateY(-20%) rotate(-135deg);
  }
  .bsp-select-btn:focus,
  .bsp-select.open .bsp-select-btn {
    border-color: rgba(124, 92, 255, 0.55);
  }
  .bsp-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #1a1d2e;
    border: 1px solid rgba(124, 92, 255, 0.35);
    border-radius: 6px;
    padding: 4px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
  }
  .bsp-select.open .bsp-select-menu { display: block; }
  .bsp-select-item {
    padding: 0.45rem 0.55rem;
    font-size: 12px;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
  }
  .bsp-select-item:hover { background: rgba(124, 92, 255, 0.22); }
  .bsp-select-item.selected { background: rgba(124, 92, 255, 0.35); color: #fff; }

  /* Light-Theme Overrides für den Custom-Dropdown */
  :root[data-theme="light"] .bsp-select-btn {
    background: rgba(15,15,30,0.04);
    border-color: rgba(15,15,30,0.1);
    color: var(--text);
  }
  :root[data-theme="light"] .bsp-select-btn::after {
    border-right-color: rgba(20,20,29,0.55);
    border-bottom-color: rgba(20,20,29,0.55);
  }
  :root[data-theme="light"] .bsp-select-btn:focus,
  :root[data-theme="light"] .bsp-select.open .bsp-select-btn {
    border-color: rgba(108,99,255,0.55);
  }
  :root[data-theme="light"] .bsp-select-menu {
    background: #ffffff;
    border-color: rgba(15,15,30,0.12);
    box-shadow: 0 8px 24px rgba(20,20,29,0.18);
  }
  :root[data-theme="light"] .bsp-select-item { color: var(--text); }
  :root[data-theme="light"] .bsp-select-item:hover { background: rgba(108,99,255,0.12); }
  :root[data-theme="light"] .bsp-select-item.selected { background: rgba(108,99,255,0.18); color: var(--text); }

  /* Erzeugte Dateien: Eintrag + Action-Buttons (eye + download) */
  .bsp-output {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.25);
    border-radius: 9px;
    margin-bottom: 0.4rem;
    font-size: 13px;
  }
  .bsp-output-icon { flex: 0 0 auto; font-size: 15px; }
  .bsp-output-name {
    flex: 1; min-width: 0;
    color: var(--text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bsp-output .doc-row-actions .bsp-output-action {
    background: transparent;
    border: none;
    color: var(--text3);
    width: 26px; height: 26px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
  }
  .bsp-output .doc-row-actions .bsp-output-action svg { width: 13px; height: 13px; }
  .bsp-output .bsp-output-action[data-mode="view"]:hover { color: var(--accent2); background: rgba(78,205,196,0.12); }
  .bsp-output .bsp-output-action[data-mode="download"]:hover { color: #a78bff; background: rgba(124,92,255,0.12); }
  .bsp-output .bsp-output-action:disabled { opacity: 0.5; cursor: not-allowed; }
  .bsp-mail-summary { display: flex; flex-direction: column; gap: 0.4rem; }
  .bsp-mail-row {
    padding: 0.55rem 0.7rem;
    background: rgba(78, 205, 196, 0.06);
    border: 1px solid rgba(78, 205, 196, 0.25);
    border-radius: 9px;
    font-size: 12px;
  }
  .bsp-mail-label { font-weight: 600; color: var(--text); margin-bottom: 0.2rem; }
  .bsp-mail-meta { font-size: 12px; color: var(--text2); line-height: 1.4; }

  /* Form-Ansicht der Step-Inputs */
  .bsp-f-form { margin-top: 0.3rem; padding: 0.55rem 0.6rem; background: rgba(0,0,0,0.2); border-radius: 6px; }
  .bsp-f-field { margin-bottom: 0.6rem; }
  .bsp-f-field:last-child { margin-bottom: 0; }
  .bsp-f-label {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--text);
    margin-bottom: 0.18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .bsp-f-desc {
    font-size: 11px;
    color: var(--text3);
    margin-bottom: 0.25rem;
    line-height: 1.35;
  }
  .bsp-f-input, .bsp-f-json {
    width: 100%;
    padding: 0.35rem 0.45rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
  }
  .bsp-f-input:focus, .bsp-f-json:focus {
    border-color: rgba(124, 92, 255, 0.55);
    background: rgba(0,0,0,0.5);
  }
  .bsp-f-input.bsp-edit-error, .bsp-f-json.bsp-edit-error {
    border-color: rgba(255, 107, 107, 0.7);
  }
  textarea.bsp-f-input, textarea.bsp-f-json {
    resize: vertical;
  }
  .bsp-f-json { min-height: 4em; }
  .bsp-f-hint { font-size: 11px; color: var(--text3); margin-top: 0.15rem; }
  .bsp-f-check { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 12px; color: var(--text); }
  .bsp-f-empty { font-size: 11px; color: var(--text3); padding: 0.4rem 0.5rem; }

  /* Ref-Chip: verknüpfte Werte aus anderen Steps / Trigger */
  .bsp-f-ref-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    background: linear-gradient(90deg, rgba(78, 205, 196, 0.1), rgba(124, 92, 255, 0.06));
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
    cursor: default;
  }
  .bsp-f-ref-icon { display: inline-block; margin-right: 0.25rem; }
  .bsp-f-ref-label { font-weight: 600; }
  .bsp-f-ref-detail { font-weight: 400; color: var(--text2); font-size: 11px; }
  .bsp-f-ref-hint { font-size: 11px; color: var(--text3); font-family: 'Inter', system-ui, sans-serif; }
  .bsp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 18px;
    color: var(--text3);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    border: 1px dashed rgba(124, 92, 255, 0.3);
    border-radius: 9px;
    min-height: 180px;
  }
  .bsp-empty-pulse {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .bsp-empty-pulse span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    animation: bsp-pulse 1.4s ease-in-out infinite;
    opacity: 0.4;
  }
  .bsp-empty-pulse span:nth-child(2) { animation-delay: 0.18s; }
  .bsp-empty-pulse span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes bsp-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.35; }
    40% { transform: scale(1.15); opacity: 1; }
  }
  .bsp-empty-skel {
    width: 86%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bsp-empty-skel-row {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg,
      rgba(124,92,255,0.05) 0%,
      rgba(124,92,255,0.16) 50%,
      rgba(124,92,255,0.05) 100%);
    background-size: 200% 100%;
    animation: bsp-shimmer 2.2s linear infinite;
  }
  .bsp-empty-skel-row:nth-child(1) { width: 70%; }
  .bsp-empty-skel-row:nth-child(2) { width: 92%; animation-delay: 0.25s; }
  .bsp-empty-skel-row:nth-child(3) { width: 56%; animation-delay: 0.5s; }
  @keyframes bsp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .bsp-empty-label {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent2);
    font-weight: 600;
  }
  .bsp-empty-text {
    font-size: 12px;
    color: var(--text3);
    line-height: 1.5;
    max-width: 220px;
  }
  .bsp-run-log {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .bsp-run-log .bsp-log-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text3); margin-bottom: 0.5rem;
  }
  .bsp-log-entry {
    font-size: 12px;
    padding: 0;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
  }
  .bsp-log-head-row {
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    display: block;
    transition: background 0.12s;
    word-break: break-word;
    white-space: normal;
  }
  .bsp-log-head-row:hover { background: rgba(255,255,255,0.06); }
  .bsp-log-toggle {
    display: inline-block;
    width: 0.8em;
    color: var(--text3);
    transition: transform 0.15s;
  }
  .bsp-log-entry.ok { border-left: 3px solid #4ecdc4; }
  .bsp-log-entry.error { border-left: 3px solid #ff6b6b; color: #ffb3b3; }
  .bsp-log-body {
    display: none;
    padding: 0.4rem 0.55rem 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
  }
  .bsp-log-entry.open .bsp-log-body { display: block; }
  .bsp-log-section { margin-bottom: 0.5rem; }
  .bsp-log-section:last-child { margin-bottom: 0; }
  .bsp-log-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin-bottom: 0.2rem;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .bsp-log-section pre {
    font-size: 11px;
    color: var(--text2);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
    margin: 0;
    padding: 0.3rem 0.4rem;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
  }

  .builder-attachments {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.4rem 0.8rem 0; font-size: 12px;
  }
  .builder-attachment {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.35);
    border-radius: 999px;
    color: #bdf0ec;
  }

  @media (max-width: 900px) {
    .builder-steps-panel { display: none; }
  }

  /* ── Agent-Wizard ─────────────────────────────────────────────── */
  .wiz { display: flex; flex-direction: column; gap: 1rem; min-height: 360px; }
  .wiz-progress { display: flex; gap: 4px; margin-bottom: 0.4rem; }
  .wiz-progress-step {
    flex: 1; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s;
  }
  .wiz-progress-step.done { background: linear-gradient(90deg, #6c63ff, #4dd0e1); }
  .wiz-progress-step.active { background: rgba(108,99,255,0.5); }
  .wiz-step-label { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; }
  .wiz-title { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.25; }
  .wiz-sub { font-size: 14px; color: var(--text2); line-height: 1.55; }
  .wiz-body { display: flex; flex-direction: column; gap: 0.85rem; }
  .wiz input[type=text], .wiz textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    padding: 0.7rem 0.85rem;
    color: var(--text); font: inherit; font-size: 15px;
    transition: border-color 0.15s;
    resize: vertical;
  }
  .wiz input[type=text]:focus, .wiz textarea:focus { outline: none; border-color: rgba(108,99,255,0.5); }
  /* Validation-Fehler: roter Border am Input + roter Hinweistext darunter.
     Wir benutzen .has-error statt :invalid, weil unsere Felder kein required-
     Attribut tragen — die Validierung ist app-seitig in wizNext(). */
  .wiz input[type=text].has-error, .wiz textarea.has-error {
    border-color: rgba(244,90,90,0.7) !important;
    background: rgba(244,90,90,0.06) !important;
  }
  :root[data-theme="light"] .wiz input[type=text].has-error,
  :root[data-theme="light"] .wiz textarea.has-error {
    background: rgba(244,90,90,0.08) !important;
  }
  .wiz-error {
    font-size: 12px;
    color: #f45a5a;
    margin-top: -0.5rem;
    line-height: 1.4;
  }
  .wiz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; }
  .wiz-card {
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.9rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    text-align: left;
    color: var(--text);
    font-family: inherit;
  }
  .wiz-card:hover { border-color: rgba(108,99,255,0.35); background: rgba(108,99,255,0.04); }
  .wiz-card.selected { border-color: rgba(108,99,255,0.7); background: rgba(108,99,255,0.1); }
  .wiz-card .icon { font-size: 24px; line-height: 1; margin-bottom: 0.4rem; }
  .wiz-card .title { font-size: 14px; font-weight: 600; margin-bottom: 0.2rem; }
  .wiz-card .sub { font-size: 12px; color: var(--text3); line-height: 1.4; }
  .wiz-checks { display: flex; flex-direction: column; gap: 0.5rem; }
  .wiz-check {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .wiz-check:hover { border-color: rgba(108,99,255,0.3); background: rgba(108,99,255,0.04); }
  .wiz-check.checked { border-color: rgba(108,99,255,0.55); background: rgba(108,99,255,0.08); }
  .wiz-check input { margin-top: 2px; accent-color: #6c63ff; cursor: pointer; }
  .wiz-check-label { font-size: 14px; color: var(--text); line-height: 1.4; }
  .wiz-check-label .desc { display: block; font-size: 12px; color: var(--text3); margin-top: 0.15rem; }
  .wiz-avatars { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .wiz-avatar {
    width: 56px; height: 56px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    transition: border-color 0.15s, transform 0.1s;
    overflow: hidden;
  }
  .wiz-avatar:hover { transform: scale(1.05); }
  .wiz-avatar.selected { border-color: rgba(108,99,255,0.8); box-shadow: 0 0 0 4px rgba(108,99,255,0.12); }
  .wiz-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .wiz-avatar-upload {
    width: 56px; height: 56px; border-radius: 12px;
    border: 2px dashed rgba(255,255,255,0.18);
    color: var(--text3); font-size: 11px; line-height: 1.2;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-align: center; padding: 4px;
  }
  .wiz-avatar-upload:hover { border-color: rgba(108,99,255,0.5); color: var(--text2); }
  .wiz-segments { display: flex; gap: 0.4rem; flex-wrap: wrap; }
  /* a4h-ausnahme: Auswahl im Formular (eine Option waehlen), kein Ansichtswechsel */
  .wiz-seg {
    padding: 0.55rem 0.95rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: var(--text2); font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .wiz-seg:hover { color: var(--text); border-color: rgba(108,99,255,0.4); }
  .wiz-seg.selected { color: #fff; background: rgba(108,99,255,0.18); border-color: rgba(108,99,255,0.6); }
  /* Light-Theme: weiße Schrift auf hellem Purple-Background ist quasi unlesbar.
     Selected-Pill bekommt dunkle Schrift + leicht stärkere Background-Sättigung. */
  :root[data-theme="light"] .wiz-seg.selected {
    color: var(--text) !important;
    background: rgba(108,99,255,0.18) !important;
    border-color: rgba(108,99,255,0.55) !important;
    font-weight: 600;
  }
  .wiz-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    font-size: 14px; line-height: 1.55; color: var(--text2);
  }
  .wiz-summary strong { color: var(--text); }
  .wiz-summary-row { padding: 0.4rem 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
  .wiz-summary-row:last-child { border-bottom: 0; }
  .wiz-actions {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 1.2rem; padding-top: 0.5rem;
  }
  .wiz-actions .spacer { flex: 1; }
  .wiz-skip {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text2);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    padding: 0.6rem 1rem;
    border-radius: 9px;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .wiz-skip:hover {
    color: var(--text);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
  }
  .wiz-actions .btn-save {
    padding: 0.65rem 1.3rem;
    background: var(--accent);
    border: none; border-radius: 9px;
    color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 14px rgba(108,99,255,0.32);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .wiz-actions .btn-save:hover { 
    box-shadow: 0 6px 20px rgba(108,99,255,0.45);
  }
  .wiz-actions .btn-save:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
  }
  .wiz-actions .btn-cancel {
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    color: var(--text2); font-family: inherit; font-size: 14px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .wiz-actions .btn-cancel:hover {
    color: var(--text);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
  }

  /* ── Onboarding-Tour (Coach-Marks) ───────────────────────────── */
  .tour-overlay {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none;
  }
  .tour-overlay.active { pointer-events: auto; }
  .tour-mask {
    position: absolute; inset: 0;
    background: rgba(8,8,15,0.45);
    transition: opacity 0.3s ease;
  }
  /* Beim aktiven Highlight wird die volle Maske ausgeblendet — die
     Abdunkelung übernimmt der box-shadow am Highlight-Element selbst,
     damit das markierte Element seine Originalfarben behält. */
  .tour-overlay.has-highlight .tour-mask { opacity: 0; }
  .tour-highlight {
    position: absolute;
    border-radius: 12px;
    box-shadow:
      0 0 0 9999px rgba(8,8,15,0.55),
      0 0 0 3px rgba(108,99,255,0.95),
      0 0 24px rgba(108,99,255,0.65),
      0 0 60px rgba(108,99,255,0.35);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    animation: tour-pulse 1.8s ease-in-out infinite;
  }
  @keyframes tour-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 9999px rgba(8,8,15,0.55),
        0 0 0 3px rgba(108,99,255,0.95),
        0 0 24px rgba(108,99,255,0.65),
        0 0 60px rgba(108,99,255,0.35);
    }
    50% {
      box-shadow:
        0 0 0 9999px rgba(8,8,15,0.55),
        0 0 0 5px rgba(108,99,255,1),
        0 0 36px rgba(108,99,255,0.85),
        0 0 90px rgba(108,99,255,0.55);
    }
  }
  /* Light-Theme-Variante: gar kein dunkler Schleier mehr (transparent
     0.00 statt 0.55) — die Umgebung bleibt vollständig hell, der Fokus
     entsteht allein über den kräftigen Purple-Ring + Glow. */
  @keyframes tour-pulse-light {
    0%, 100% {
      box-shadow:
        0 0 0 3px rgba(108,99,255,1),
        0 0 24px rgba(108,99,255,0.6),
        0 0 60px rgba(108,99,255,0.3);
    }
    50% {
      box-shadow:
        0 0 0 5px rgba(108,99,255,1),
        0 0 36px rgba(108,99,255,0.85),
        0 0 90px rgba(108,99,255,0.5);
    }
  }
  .tour-card {
    position: absolute;
    /* Card breit genug, damit alle Titel einzeilig bleiben (längster Step
       ≈ 34 Zeichen). Auf engen Viewports clamped 100vw − 32px. */
    width: min(420px, calc(100vw - 32px));
    background: linear-gradient(180deg, rgba(28,28,44,0.97), rgba(20,20,32,0.97));
    border: 1px solid rgba(108,99,255,0.32);
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.7rem;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5);
    color: var(--text);
    font-size: 13px; line-height: 1.5;
    transition: top 0.3s ease, left 0.3s ease;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .tour-card .step { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.7px; }
  .tour-card h4 {
    font-size: 15px; font-weight: 700; margin: 0.18rem 0 0.4rem; color: var(--text);
    /* Headline einzeilig halten — Tour-Titel sind kurz, mehrzeilige Titel
       wirken zerhackt. Falls ein zukünftiger Titel doch länger wird, kürzt
       Ellipsis statt zu wrappen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tour-card p { margin: 0 0 0.55rem; color: var(--text2); font-size: 13px; }
  .tour-card .tour-meta {
    margin: 0.5rem 0; padding: 0.5rem 0.7rem;
    background: rgba(108,99,255,0.08);
    border: 1px solid rgba(108,99,255,0.22);
    border-radius: 9px;
    font-size: 12px; color: var(--text2); line-height: 1.45;
  }
  .tour-card .tour-meta strong { color: var(--text); }
  .tour-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
  .tour-actions .spacer { flex: 1; }
  .tour-btn {
    background: var(--accent);
    color: #fff; border: 0; border-radius: 9px;
    padding: 0.55rem 1rem; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  .tour-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.14); color: var(--text2); }
  .tour-btn.ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
  .tour-skip { background: transparent; border: 0; color: var(--text3); font-size: 12px; cursor: pointer; }
  .tour-skip:hover { color: var(--text2); }

  /* Wide-Variante mit Visual rechts (z.B. Operator-Step) */
  .tour-card.wide { width: min(620px, calc(100vw - 32px)); padding: 1rem 1.1rem; }
  .tour-card.wide .tour-split {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1rem;
    align-items: stretch;
  }
  .tour-card.wide .tour-text { display: flex; flex-direction: column; }
  .tour-card.wide .tour-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
  .tour-card.wide .tour-visual-frame {
    width: 180px; height: 180px;
    background: radial-gradient(circle at 50% 35%, rgba(108,99,255,0.18), rgba(108,99,255,0.04) 60%, transparent);
    border: 1px solid rgba(108,99,255,0.25);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .tour-card.wide .tour-visual-frame img {
    width: 78%; height: 78%; object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(108,99,255,0.45));
    animation: tour-visual-float 3s ease-in-out infinite;
  }
  @keyframes tour-visual-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .tour-card.wide .tour-visual-cap {
    font-size: 11px; color: var(--text3); text-align: center; line-height: 1.4;
  }
  @media (max-width: 720px) {
    .tour-card.wide .tour-split { grid-template-columns: 1fr; }
    .tour-card.wide .tour-visual-frame { width: 140px; height: 140px; }
  }

  /* Tutorial-Dropdown Hover-State */
  .tut-menu-item:hover {
    background: rgba(108,99,255,0.12) !important;
    color: var(--text) !important;
  }