/* ─────────────────────────────────────────────────────────────────────────────
 * App-Shell (Topbar, Sidebar, Split-Screen) — ausgelagert aus app-shell.js
 * Finding M6/L10, 2026-08-01.
 *
 * Vorher wurden diese ~607 Zeilen bei JEDEM Seitenaufruf per JavaScript in einen
 * <style>-Block geschrieben. Als Datei wird das CSS vom Browser gecacht und der
 * Stil steht sofort bereit (kein Aufbau-Flackern durch spaeteres Einfuegen).
 *
 * MASSE: Die frueheren JS-Konstanten TOPBAR_H / SIDEBAR_W_FULL /
 * SIDEBAR_W_COMPACT sind jetzt CSS-Variablen. Gesetzt werden sie weiterhin aus
 * app-shell.js (_setShellMasse) — damit bleibt EINE Quelle der Wahrheit und die
 * Werte koennen nicht auseinanderlaufen.
 *
 * REIHENFOLGE: Dieses Stylesheet MUSS nach styles.css und theme.css eingebunden
 * werden. Der frueher injizierte <style>-Block landete am Ende des <head> und
 * gewann dadurch bei gleicher Spezifitaet — diese Kaskade bleibt so erhalten.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Standardmaße. Bewusst mit eigenem `shell-`-Präfix: theme.css definiert bereits
   ein --topbar-h (56px) für andere Zwecke. Ohne Präfix hätte app-shell.js diese
   fremde Variable global überschrieben und jede theme.css-Regel verfälscht,
   die sie verwendet. */
:root{
  --shell-topbar-h:          48px;
  --shell-sidebar-w-full:    220px;
  --shell-sidebar-w-compact: 56px;
}

/* ── Altbau-Shell entfernt ───────────────
   #app-topbar/#app-sidebar waren seit der Umstellung auf shell-v3 dauerhaft
   per CSS ausgeblendet. Die sichtbare Shell ist .gl-sidebar (theme.css).
   --shell-sidebar-w-* speist weiterhin die Split-Child-Shell (.sc-*). */
  /* Split-Active Topbar */
  /* ── Light Mode ─────────────────────── */
  body.theme-light{background:#F2EEE4;color:#1a1a17}
  body.theme-light .float-sidebar{background:#EDE8DE;border-color:rgba(0,0,0,.1)}
  body.theme-light .float-sidebar .fs-item{color:rgba(0,0,0,.55)}
  body.theme-light .float-sidebar .fs-item:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.85)}
  /* Hier standen 11 Hellmodus-Regeln fuer die zweite Shell der geteilten
     Ansicht (`.sc-sidebar`, `#sc-topbar`). Sie ist entfallen — eine Haelfte
     traegt die echte Shell und damit deren Hellmodus. */
  /* ── Sidebar ────────────────────────── */
  body.has-sidebar{transition:padding-left 200ms ease;padding-top:var(--shell-topbar-h);background:var(--bg-tief)}
  /* Nav Items */
  /* Hamburger entfernt — Toggle ist immer in der Topbar */
  /* Tooltip bei compact mode */
  /* Compact: alles zentrieren */
  /* Scrollbars im Sidebar-Nav permanent verstecken (Scroll funktioniert weiter) */
  /* Vergütungsmodell-PDF-Button in der View-Kachel im Coop-Modus verstecken — Druck läuft über die Float-Topbar */
  body.has-sidebar .print-btn{display:none!important}
  /* Toggle */
  /* Bottom Section */
  /* Mobile */
  @media(max-width:768px){
    body.has-sidebar{padding-left:0!important}
    /* Sidebar immer fullwidth auf Mobile */
    /* Split-Screen Button auf Mobile verstecken */
    /* Back/Fwd auf Mobile kompakter */
    /* Admin-Sidebar auf Mobile als Overlay */
    body.has-sidebar .adm-side{position:fixed;top:var(--shell-topbar-h);left:0!important;right:0!important;width:100%!important;max-width:100%;border-radius:0!important;z-index:9100;transform:translateX(-100%);transition:transform 300ms ease;box-shadow:none}
    body.has-sidebar .adm-side.adm-mobile-open{transform:translateX(0);box-shadow:4px 0 40px rgba(0,0,0,.5)}
    body.has-sidebar .adm-body{padding-left:0!important}
    body.has-sidebar .adm-body.adm-sb-collapsed{padding-left:0!important}
    body.has-sidebar #adm-content{margin-left:0!important;width:100%!important;padding-top:4px}
    /* Float-Sidebar auf Mobile: Fullwidth unten */
    .float-sidebar{position:fixed;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;border-radius:16px 16px 0 0;max-height:60vh;border-bottom:none}
    /* Hamburger sichtbar machen */
    /* Panel-Toggle auf Desktop verstecken */
  }
  @media(min-width:769px){
  }
  /* ── Float-Sidebar ──────────────────────────────── */
  .float-sidebar{position:fixed;top:calc(var(--shell-topbar-h) + 10px);left:calc(var(--shell-sidebar-w-full) + 10px);bottom:10px;width:44px;background:rgba(17,17,16,.97);border:0.5px solid rgba(255,255,255,.09);border-radius:12px;z-index:8990;display:none;flex-direction:column;padding:6px 0;gap:1px;transition:width 200ms ease,left 200ms ease;overflow:hidden}
  .float-sidebar.open{display:flex}
  .float-sidebar.fs-expanded{width:196px;padding:6px}
  /* ── Sektionsüberschriften ── */
  .float-sidebar .fs-section{
    font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,.3);
    padding:10px 14px 4px;
    white-space:nowrap;overflow:hidden;
    opacity:0;height:0;transition:opacity 150ms,height 150ms;
  }
  .float-sidebar.fs-expanded .fs-section{opacity:1;height:auto}
  /* ── Item-Zeilen ── */
  /* Kompakt: Icon exakt mittig in 44px Breite (kein margin, kein padding, justify:center) */
  .float-sidebar .fs-item-row{
    display:flex;align-items:center;
    gap:10px;
    margin:1px 6px;
    padding:0 4px;
    border-radius:7px;
    cursor:pointer;
    transition:background 120ms;
    height:36px;flex-shrink:0;overflow:hidden;
    justify-content:center;
  }
  /* Kompakt: kein margin, kein padding → Icon sitzt pixel-perfekt mittig */
  .float-sidebar:not(.fs-expanded) .fs-item-row{
    margin:1px 0;padding:0;border-radius:0;width:44px;
  }
  .float-sidebar.fs-expanded .fs-item-row{justify-content:flex-start;padding:0 10px}
  .float-sidebar .fs-item-row:hover{background:rgba(255,255,255,.07)}
  .float-sidebar:not(.fs-expanded) .fs-item-row:hover{background:rgba(255,255,255,.07)}
  .float-sidebar .fs-item-row.active{background:var(--sb-acc-bg,rgba(232,210,0,.1))}
  /* Icon: in kompakter Ansicht absolut zentriert, fixed 44px Box */
  .float-sidebar .fs-ic{
    flex-shrink:0;
    width:44px;height:36px;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.45);transition:color 120ms;
  }
  .float-sidebar.fs-expanded .fs-ic{width:20px;height:20px}
  .float-sidebar .fs-item-row.active .fs-ic{color:var(--sb-acc,#E8D200)}
  .float-sidebar .fs-item-row:hover:not(.active) .fs-ic{color:rgba(255,255,255,.9)}
  /* Label */
  .float-sidebar .fs-lbl{
    font-size:12.5px;font-weight:500;
    color:rgba(255,255,255,.7);
    white-space:nowrap;opacity:0;width:0;overflow:hidden;
    transition:opacity 160ms,width 160ms;
  }
  .float-sidebar.fs-expanded .fs-lbl{opacity:1;width:auto}
  .float-sidebar .fs-item-row.active .fs-lbl{color:var(--sb-acc,#E8D200);font-weight:600}
  .float-sidebar .fs-spacer{flex:1;min-height:8px}
  .float-sidebar .fs-toggle{display:none}
  /* ── Float-Topbar (Kachel, 8px Abstand zu allen Rändern) ── */
  #float-topbar{position:fixed;top:calc(var(--shell-topbar-h) + 8px);left:calc(var(--shell-sidebar-w-full) + 8px);right:8px;height:40px;background:#1a1a18;border:0.5px solid rgba(255,255,255,.11);border-radius:10px;z-index:8989;display:none;align-items:center;padding:0 10px;gap:0;transition:left 200ms ease}
  #float-topbar.ft-open{display:flex}
  /* Eingeklappt: Kachel verschwindet komplett */
  #float-topbar.ft-collapsed{height:0;overflow:hidden;border:none;padding:0;top:var(--shell-topbar-h)}
  /* Zentrierung: Inhalt (Titel+Buttons) zentriert, Toggle bleibt rechts */
  #float-topbar-inner{display:flex;align-items:center;gap:8px;position:absolute;left:50%;transform:translateX(-50%)}
  /* Tab-Pfeil: zentriert in der festen Topbar-Höhe, kleiner Strich nach oben */
  #ft-restore-tab{position:fixed;top:var(--shell-topbar-h);left:50%;transform:translateX(-50%);height:14px;padding:0 20px;background:#1e1e1c;border:0.5px solid rgba(255,255,255,.13);border-top:none;border-radius:0 0 8px 8px;z-index:9002;display:none;align-items:center;justify-content:center;cursor:pointer;transition:background 120ms}
  #ft-restore-tab.visible{display:flex}
  #ft-restore-tab:hover{background:#222220}
  #ft-restore-tab svg{color:rgba(255,255,255,.5)}
  body.theme-light #ft-restore-tab{background:#E0DBD1;border-color:rgba(0,0,0,.12)}
  body.theme-light #ft-restore-tab svg{color:rgba(0,0,0,.4)}
  #float-topbar .ft-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.65);flex-shrink:0;white-space:nowrap}
  #float-topbar .ft-divider{width:0.5px;height:16px;background:rgba(255,255,255,.12);flex-shrink:0}
  #float-topbar .ft-btn{height:26px;padding:0 10px;border-radius:6px;border:0.5px solid rgba(255,255,255,.12);background:none;font-size:11px;color:rgba(255,255,255,.45);cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;font-family:var(--font,'DM Sans',sans-serif);transition:all 120ms;flex-shrink:0}
  #float-topbar .ft-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22)}
  #float-topbar .ft-btn.primary{background:rgba(232,210,0,.12);border-color:rgba(232,210,0,.25);color:#E8D200}
  #float-topbar .ft-btn.primary:hover{background:rgba(232,210,0,.2)}
  /* Toggle rechts außen */
  #float-topbar .ft-toggle{margin-left:auto;width:26px;height:26px;border-radius:6px;border:0.5px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);cursor:pointer;flex-shrink:0;transition:all 120ms}
  #float-topbar .ft-toggle:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}
  /* ══ FLOAT-TOPBAR: Position wird per JS gesetzt (zentriert über View-Kachel) ═ */
  #float-topbar{
    position:fixed;
    top:calc(var(--shell-topbar-h) + 8px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:fit-content;
    max-width:calc(100vw - 16px);
    min-width:auto;
    height:48px;
    background:#1a1a18;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    z-index:8989;
    display:none;
    align-items:center;
    padding:0 8px 0 4px;
    gap:6px;
    transition:left 200ms ease,top 200ms ease;
    white-space:nowrap;
    box-sizing:border-box;
    overflow:visible;
  }
  #float-topbar.ft-open{display:flex}
  #float-topbar.ft-collapsed{height:0;overflow:hidden;border:none;padding:0;top:var(--shell-topbar-h)}
  /* Einklapp-Button ganz links in der Bar */
  #float-topbar .ft-toggle{
    flex-shrink:0;
    width:28px;height:28px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 120ms;
    color:rgba(255,255,255,.4);
    order:-1;
  }
  #float-topbar .ft-toggle:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
  /* Kein restore-tab mehr – stattdessen „Werkzeugleiste" Text in fixer Topbar */
  #ft-restore-tab{display:none!important}
  /* Werkzeugleiste-Button in fixer Topbar (nur wenn eingeklappt) */
  #ft-topbar-restore-btn{
    display:none;
    align-items:center;gap:6px;
    font-size:11px;font-weight:600;
    color:rgba(255,255,255,.45);
    cursor:pointer;
    padding:4px 10px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.1);
    background:none;
    font-family:var(--font,'DM Sans',sans-serif);
    transition:all 120ms;
    white-space:nowrap;
  }
  #ft-topbar-restore-btn.visible{display:flex}
  #ft-topbar-restore-btn:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.25)}
  body.theme-light #ft-topbar-restore-btn{color:rgba(0,0,0,.45);border-color:rgba(0,0,0,.12)}
  body.theme-light #ft-topbar-restore-btn:hover{color:rgba(0,0,0,.85)}
  /* Trennstrich nach Toggle-Button */
  #float-topbar .ft-toggle-divider{width:1px;height:20px;background:rgba(255,255,255,.1);flex-shrink:0}
  /* Buttons-Container: inline, kein absolute mehr (überschreibt veraltete Regel oben) */
  #float-topbar-inner{display:flex;align-items:center;gap:8px;pointer-events:auto;position:static;left:auto;right:auto;transform:none;flex-shrink:0}
  #float-topbar .ft-btn{height:30px;padding:0 12px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:11.5px;color:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;font-family:var(--font,'DM Sans',sans-serif);transition:all 120ms;flex-shrink:0}
  #float-topbar .ft-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.95);border-color:rgba(255,255,255,.28)}
  #float-topbar .ft-btn.primary{background:rgba(232,210,0,.14);border-color:rgba(232,210,0,.35);color:#E8D200;font-weight:600}
  #float-topbar .ft-btn.primary:hover{background:rgba(232,210,0,.24)}
  /* Titel rechts: inline am Ende der Bar, dezenter Trennstrich */
  #float-topbar-title{display:flex;align-items:center;gap:8px;height:100%;pointer-events:none;padding:0 4px}
  #float-topbar-title .ft-title-divider{width:1px;height:18px;background:rgba(255,255,255,.2);flex-shrink:0}
  #float-topbar-title .ft-title{font-size:13px;font-weight:800;color:rgba(255,255,255,.92);white-space:nowrap;letter-spacing:.02em;flex-shrink:0}
  #float-topbar-title .ft-help-btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.65);transition:color .15s,background .15s;padding:0;flex-shrink:0}
  #float-topbar-title .ft-help-btn:hover{color:rgba(255,255,255,1);background:rgba(255,255,255,.08)}
  #float-topbar-title .ft-help-btn svg{display:block}
  /* Light-Mode Float-Topbar */
  body.theme-light #float-topbar{background:#EDE8DE;border-color:rgba(0,0,0,.12)}
  body.theme-light #float-topbar-title .ft-title{color:rgba(0,0,0,.88)}
  body.theme-light #float-topbar-title .ft-title-divider{background:rgba(0,0,0,.18)}
  body.theme-light #float-topbar-title .ft-help-btn{color:rgba(0,0,0,.5)}
  body.theme-light #float-topbar-title .ft-help-btn:hover{color:rgba(0,0,0,.9);background:rgba(0,0,0,.06)}
  body.theme-light #float-topbar .ft-btn{border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.6);background:rgba(0,0,0,.04)}
  body.theme-light #float-topbar .ft-btn:hover{background:rgba(0,0,0,.09);color:rgba(0,0,0,.95)}
  /* ft-toggle hat kein background mehr (freier Pfeil) – Light-Mode: opacity via SVG stroke */
  /* ── Vergütungsmodell Topbar: Dropdown + Combo ── */
  .ft-divider-sm{width:1px;height:16px;background:rgba(255,255,255,.1);flex-shrink:0;margin:0 2px}
  .ft-dropdown-wrap{position:relative}
  .ft-dropdown{
    position:fixed;
    min-width:160px;
    background:#1e1e1c;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:9100;
    overflow:hidden;
    padding:4px;
  }
  .ft-combo-popup{min-width:180px}
  .ft-dd-item{
    padding:8px 12px;
    font-size:12px;
    font-weight:500;
    color:rgba(255,255,255,.65);
    border-radius:6px;
    cursor:pointer;
    transition:background 100ms;
    display:flex;align-items:center;gap:6px;
    font-family:var(--font,'DM Sans',sans-serif);
  }
  .ft-dd-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.95)}
  .ft-dd-item.active{color:var(--sb-acc,#E8D200);font-weight:700}
  .ft-dd-item.active:hover{background:rgba(232,210,0,.1)}
  /* Disabled-Zustand: sichtbar aber inaktiv */
  #float-topbar .ft-btn-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
  /* Light-Mode Dropdown */
  body.theme-light .ft-dropdown{background:#F0EBE0;border-color:rgba(0,0,0,.12);box-shadow:0 8px 24px rgba(0,0,0,.12)}
  body.theme-light .ft-divider-sm{background:rgba(0,0,0,.1)}
  body.theme-light .ft-dd-item{color:rgba(0,0,0,.65)}
  body.theme-light .ft-dd-item:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.9)}
  body.theme-light .ft-dd-item.active{color:var(--sb-acc,#C4A000)}
  /* ══ FLOAT-SIDEBAR ═════════════════════════════════════════════════════════ */
  /* Einheitliche Kachel-Sprache: gleiche Border/Radius/Farbe wie Topbar+View  */
  .float-sidebar{position:fixed;top:calc(var(--shell-topbar-h) + 64px);left:calc(var(--shell-sidebar-w-full) + 8px);bottom:8px;width:44px;background:#1e1e1c;border:1px solid rgba(255,255,255,.1);border-radius:10px;z-index:8988;display:none;flex-direction:column;padding:0;gap:0;transition:width 200ms ease,left 200ms ease,top 200ms ease;overflow:hidden}
  .float-sidebar.open{display:flex}
  .float-sidebar.fs-expanded{width:230px}
  /* Float-Topbar collapsed → Sidebar rückt nach oben */
  body.ft-collapsed-state .float-sidebar{top:calc(var(--shell-topbar-h) + 8px)}
  /* ── Kopfzeile: Seitenname + Toggle-Button ── */
  .float-sidebar .fs-header{display:flex;align-items:center;justify-content:center;height:48px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08);padding:0 8px;gap:0;overflow:hidden}
  .float-sidebar.fs-expanded .fs-header{justify-content:space-between;padding:0 14px 0 12px}
  /* Seitenname: immer uppercase, deutlich lesbar */
  .float-sidebar .fs-title{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;width:0;overflow:hidden;transition:opacity 180ms,width 180ms;flex:1;min-width:0}
  .float-sidebar.fs-expanded .fs-title{opacity:1;width:auto}
  /* Toggle-Button: « » Zeichen, kein Border, dezent */
  .float-sidebar .fs-header-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:rgba(255,255,255,.35);cursor:pointer;flex-shrink:0;transition:all 120ms;font-size:14px;font-weight:400;line-height:1;font-family:inherit}
  .float-sidebar .fs-header-toggle:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
  /* Kompakt: Toggle sitzt mittig allein im Header */
  .float-sidebar:not(.fs-expanded) .fs-header{justify-content:center}
  /* ══ VIEW-KACHEL ════════════════════════════════════════════════════════════ */
  /* Einheitlich: 8px Rand, 1px Border, 10px Radius – wie Topbar + Sidebar     */
  body.has-sidebar .view.active{
    position:fixed;
    top:calc(var(--shell-topbar-h) + 8px);
    left:calc(var(--shell-sidebar-w-full) + 8px);
    right:8px;bottom:8px;
    background:#1e1e1c;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    overflow-y:auto;overflow-x:hidden;
    box-sizing:border-box;z-index:100;
    transition:top 200ms ease,left 200ms ease;
    scrollbar-width:none;
  }
  body.has-sidebar .view.active::-webkit-scrollbar{display:none}
  /* System-Sidebar compact/hidden */
  /* Float-Topbar offen (48px Kachel + 8px gap = 64px) */
  body.has-sidebar.has-float-ui .view.active{top:calc(var(--shell-topbar-h) + 64px)}
  body.has-sidebar.has-float-ui.ft-collapsed-state .view.active{top:calc(var(--shell-topbar-h) + 8px)}
  /* Float-Sidebar compact (44px + 8px Rand = 52px extra) */
  body.has-sidebar.has-float-ui .view.active{left:calc(var(--shell-sidebar-w-full) + 60px)}
  /* Float-Sidebar expanded (230px + 8px Rand = 238px extra) */
  body.has-sidebar.has-float-ui.fs-expanded-state .view.active{left:calc(var(--shell-sidebar-w-full) + 246px)}
  /* Views ohne Float-Sidebar aber mit Float-Topbar (Dashboard etc.) */
  body.has-sidebar.has-float-ui.no-float-sidebar .view.active{left:calc(var(--shell-sidebar-w-full) + 8px)}
  /* Light-Mode View-Kachel */
  body.theme-light.has-sidebar .view.active{background:#EDE8DE;border-color:rgba(0,0,0,.1)}
  /* kein has-sidebar (Login etc): normales Layout */
  body:not(.has-sidebar) .view.active{min-height:100vh;padding:20px}
  /* ══ EBENE 2: Hintergrund hinter schwebenden Kacheln ════════════════════════ */
  /* Dunkel: #161614 (zwischen Sidebar #111110 und View #1e1e1c)                */
  /* Hell:   #F5F1E8 (zwischen Sidebar #DDD8CE und View #EDE8DE)                */
  body.has-sidebar{ background:#161614; }
  body.has-sidebar.theme-light{ background:#F5F1E8; }
  /* ══ LIGHT-MODE Float-Sidebar ═══════════════════════════════════════════════ */
  body.theme-light .float-sidebar{background:#EDE8DE;border-color:rgba(0,0,0,.1)}
  body.theme-light .float-sidebar .fs-header{border-bottom-color:rgba(0,0,0,.08)}
  body.theme-light .float-sidebar .fs-title{color:rgba(0,0,0,.45)}
  body.theme-light .float-sidebar .fs-header-toggle{border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.55)}
  body.theme-light .float-sidebar .fs-header-toggle:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.8)}
  body.theme-light .float-sidebar .fs-section{color:rgba(0,0,0,.35)}
  body.theme-light .float-sidebar .fs-item-row:hover{background:rgba(0,0,0,.06)}
  body.theme-light .float-sidebar .fs-ic{color:rgba(0,0,0,.45)}
  body.theme-light .float-sidebar .fs-item-row:hover:not(.active) .fs-ic{color:rgba(0,0,0,.85)}
  body.theme-light .float-sidebar .fs-lbl{color:rgba(0,0,0,.65)}
  body.theme-light .float-sidebar .fs-item-row.active .fs-lbl{font-weight:600}
  /* ══ GRUPPEN (ausklappbare Untermenüs) ════════════════════════════════════ */
  /* Gruppen-Container */
  .float-sidebar .fs-group{display:flex;flex-direction:column;flex-shrink:0}
  /* Gruppen-Kopf (klickbar, sieht aus wie ein Item) */
  .float-sidebar .fs-group-head{
    display:flex;align-items:center;
    gap:10px;
    margin:1px 6px;
    padding:0 4px;
    border-radius:7px;
    cursor:pointer;
    transition:background 120ms;
    height:36px;flex-shrink:0;overflow:hidden;
    justify-content:center;
    color:rgba(255,255,255,.7);
  }
  .float-sidebar:not(.fs-expanded) .fs-group-head{margin:1px 0;padding:0;border-radius:0;width:44px}
  .float-sidebar.fs-expanded .fs-group-head{justify-content:flex-start;padding:0 10px}
  .float-sidebar .fs-group-head:hover{background:rgba(255,255,255,.07)}
  .float-sidebar .fs-group-head .fs-ic{
    flex-shrink:0;width:44px;height:36px;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.45);transition:color 120ms;
  }
  .float-sidebar.fs-expanded .fs-group-head .fs-ic{width:20px;height:20px}
  .float-sidebar .fs-group-head:hover .fs-ic{color:rgba(255,255,255,.9)}
  .float-sidebar .fs-group-head .fs-lbl{
    font-size:12.5px;font-weight:500;
    color:rgba(255,255,255,.75);
    white-space:nowrap;opacity:0;width:0;overflow:hidden;flex:1;
    transition:opacity 160ms,width 160ms;
  }
  .float-sidebar.fs-expanded .fs-group-head .fs-lbl{opacity:1;width:auto}
  /* Chevron-Pfeil: rotiert beim Öffnen */
  .float-sidebar .fs-group-head .fs-chev{
    display:flex;align-items:center;justify-content:center;
    width:16px;height:16px;flex-shrink:0;
    color:rgba(255,255,255,.35);
    opacity:0;transition:opacity 160ms,transform 200ms ease;
    transform:rotate(0deg);
  }
  .float-sidebar.fs-expanded .fs-group-head .fs-chev{opacity:1}
  /* Kompakt: Chevron + Label komplett aus Layout entfernen damit Icon mittig sitzt */
  .float-sidebar:not(.fs-expanded) .fs-group-head .fs-chev{display:none}
  .float-sidebar:not(.fs-expanded) .fs-group-head .fs-lbl{display:none}
  .float-sidebar .fs-group.open .fs-group-head .fs-chev{transform:rotate(90deg);color:var(--sb-acc,#E8D200)}
  .float-sidebar .fs-group.open .fs-group-head{color:rgba(255,255,255,.9)}
  .float-sidebar .fs-group.open .fs-group-head .fs-ic{color:rgba(255,255,255,.85)}
  /* Untergruppen-Container: standardmäßig zu */
  .float-sidebar .fs-group-sub{
    max-height:0;overflow:hidden;
    transition:max-height 240ms cubic-bezier(.4,0,.2,1);
    margin-left:0;
  }
  .float-sidebar .fs-group.open .fs-group-sub{max-height:500px}
  /* Untermenüs nur im Expanded-Modus sichtbar (Platzgründe) */
  .float-sidebar:not(.fs-expanded) .fs-group-sub{display:none}
  /* Untermenü-Einträge: eingerückt, kleinere Schrift, dezenter */
  .float-sidebar .fs-sub-item{
    margin:1px 10px 1px 22px!important;
    padding:0 8px!important;
    height:32px!important;
    position:relative;
  }
  .float-sidebar .fs-sub-item::before{
    content:'';position:absolute;left:-10px;top:50%;
    width:6px;height:1px;background:rgba(255,255,255,.15);
  }
  .float-sidebar .fs-sub-item .fs-ic{width:18px!important;height:18px!important;color:rgba(255,255,255,.4)}
  .float-sidebar .fs-sub-item .fs-lbl{font-size:12px;color:rgba(255,255,255,.65)}
  .float-sidebar .fs-sub-item:hover .fs-ic{color:rgba(255,255,255,.85)}
  .float-sidebar .fs-sub-item:hover .fs-lbl{color:rgba(255,255,255,.9)}
  .float-sidebar .fs-sub-item.active{background:var(--sb-acc-bg,rgba(232,210,0,.1))}
  .float-sidebar .fs-sub-item.active .fs-ic,
  .float-sidebar .fs-sub-item.active .fs-lbl{color:var(--sb-acc,#E8D200)}
  .float-sidebar .fs-sub-item.active .fs-lbl{font-weight:600}
  /* ── Light-Mode: Gruppen ── */
  body.theme-light .float-sidebar .fs-group-head{color:rgba(0,0,0,.7)}
  body.theme-light .float-sidebar .fs-group-head:hover{background:rgba(0,0,0,.06)}
  body.theme-light .float-sidebar .fs-group-head .fs-ic{color:rgba(0,0,0,.5)}
  body.theme-light .float-sidebar .fs-group-head:hover .fs-ic{color:rgba(0,0,0,.9)}
  body.theme-light .float-sidebar .fs-group-head .fs-lbl{color:rgba(0,0,0,.75)}
  body.theme-light .float-sidebar .fs-group-head .fs-chev{color:rgba(0,0,0,.35)}
  body.theme-light .float-sidebar .fs-group.open .fs-group-head{color:rgba(0,0,0,.95)}
  body.theme-light .float-sidebar .fs-group.open .fs-group-head .fs-ic{color:rgba(0,0,0,.9)}
  body.theme-light .float-sidebar .fs-sub-item::before{background:rgba(0,0,0,.18)}
  body.theme-light .float-sidebar .fs-sub-item .fs-ic{color:rgba(0,0,0,.45)}
  body.theme-light .float-sidebar .fs-sub-item .fs-lbl{color:rgba(0,0,0,.65)}
  body.theme-light .float-sidebar .fs-sub-item:hover .fs-ic{color:rgba(0,0,0,.9)}
  body.theme-light .float-sidebar .fs-sub-item:hover .fs-lbl{color:rgba(0,0,0,.95)}
  /* Admin-Sidebar schwebend – als Kachel wie Float-Sidebar */
  body.has-sidebar .adm-side{position:fixed;top:calc(var(--shell-topbar-h) + 64px);left:calc(var(--shell-sidebar-w-full) + 8px);bottom:8px;width:220px;background:#1e1e1c;border:0.5px solid rgba(255,255,255,.09);border-radius:10px;z-index:8990;overflow-y:auto;overflow-x:hidden;padding:8px 0;transition:width 200ms ease,left 200ms ease,top 200ms ease}
  /* Float-Topbar eingeklappt → adm-side rückt nach oben */
  body.ft-collapsed-state .adm-side{top:calc(var(--shell-topbar-h) + 8px)}
  body.has-sidebar .adm-side.adm-collapsed{width:56px}
  body.has-sidebar .adm-side.adm-collapsed .nav-btn{font-size:0;justify-content:center;padding:8px 0;overflow:hidden;text-align:center}
  body.has-sidebar .adm-side.adm-collapsed .nav-btn .nb-icon{font-size:14px;margin:0 auto;display:flex;align-items:center;justify-content:center}
  body.has-sidebar .adm-side.adm-collapsed .nav-grp-lbl{display:none}
  body.has-sidebar .adm-side.adm-collapsed .adm-sb-title-text{display:none}
  body.has-sidebar .adm-side.adm-collapsed #adm-sb-toggle{margin:0 auto}
  body.has-sidebar .adm-body{display:block;padding-left:0;transition:none}
  body.has-sidebar #adm-content{margin-left:0;width:100%}
  body.has-sidebar .adm-hdr{display:none}
  /* Grid- und Flex-Elemente schrumpfen von sich aus NICHT unter ihre
     Mindestbreite (`min-width:auto`). In einer schmalen Spalte — eine Hälfte
     des geteilten Bildschirms oder einfach ein kleines Fenster — blieb die
     Systemeinstellungs-Fläche deshalb so breit wie ihr breitester Inhalt, statt
     sich einzupassen. Der Überhang wurde abgeschnitten: sichtbar an halben
     Filterschaltern und Knöpfen am rechten Rand.
     Nachgemessen am 2026-08-11 in einer 956px-Hälfte mit offener
     Systemnavigation: 948px Inhalt in einem 650px-Kasten. Mit dieser Regel
     650 in 650. Bei breiten Fenstern ändert sie nichts — sie erlaubt nur das
     Schrumpfen, sie erzwingt es nicht. */
  .adm-body,
  .adm-body > *,
  #adm-content { min-width: 0; }
  /* Admin View-Kachel: gleiche Regeln wie alle anderen Views.
     Die beiden frueheren Sonderregeln (top aus --shell-topbar-h + 64 bzw. + 8)
     trugen ID UND !important und schlugen damit die gemeinsame Geometrie in
     theme.css — die Systemeinstellungen begannen als einzige Ansicht bei
     112px statt bei --view-top. Der Wert kommt jetzt von dort. */
  body.has-sidebar #view-admin.active{top:var(--view-top)!important}
  /* Float-Topbar für Admin: wie alle anderen Views über fs-expanded-state gesteuert */
  /* adm-side wird per JS ausgeblendet wenn Float-Sidebar aktiv */
  /* ── FIX: Chatbot view-container inset:0 override ── */
  /* Der Chatbot setzt intern position:fixed;inset:0 – das wird hier neutralisiert */
  body.has-sidebar #view-chatbot > div[style*="inset"]{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
  }
  /* Jobs/Vergütung: Layout vollständig zentral in styles.css */
  /* View-eigene Topbars werden per JS ausgeblendet (siehe _hideViewTopbars) */
  body.has-sidebar #view-wissensdatenbank > div:nth-child(2){margin-top:0!important}
  /* Die 20px Abstand unter der Leiste kommen jetzt zentral aus dem
     ::before-Spacer der View-Kachel (theme.css, --ft-band-max). Hier addierten
     sie sich obendrauf: der Sticky-Header lag dadurch 20px unter seiner
     Klebeposition und sprang beim ersten Scrollen um genau diese 20px hoch. */
  body.has-sidebar #view-diagnostik > div:nth-child(2){padding-top:0!important}
  /* ALLE Zurück-Buttons in Views ausblenden (Topbar-Pfeile ersetzen sie) */
  body.has-sidebar .hub-back-btn{display:none!important}
  body.has-sidebar .adm-back{display:none!important}
  body.has-sidebar [onclick*="goBack"]{display:none!important}
  body.has-sidebar [onclick*="goJobs"]{display:none!important}
  /* Verhindere Überscroll (weißer Rand) */
  body.has-sidebar{overscroll-behavior:none;overflow-x:hidden}
  body.has-sidebar .adm-side .nav-grp-lbl{padding:8px 14px 4px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);font-weight:700}
  body.has-sidebar .adm-side .nav-btn{display:flex;align-items:center;gap:10px;padding:7px 14px;margin:1px 6px;border-radius:8px;font-size:12.5px;color:rgba(255,255,255,.55);cursor:pointer;transition:all 120ms;background:none;border:none;width:calc(100% - 12px)}
  body.has-sidebar .adm-side .nav-btn:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8)}
  body.has-sidebar .adm-side .nav-btn.on{background:var(--sb-acc-bg,rgba(232,210,0,.1));color:var(--sb-acc,#E8D200);font-weight:600}
  /* ── GETEILTER BILDSCHIRM ────────────────────────────────────────────────
     Nur der Rahmen wird hier gestaltet: zwei Haelften und der Trenner. Was IN
     einer Haelfte steht, ist die App selbst und bringt ihr Aussehen mit —
     deshalb steht hier kein einziger fester Farbwert und keine Regel, die in
     eine Ansicht hineinregiert. Der Vorgaenger hatte davon rund 40 Zeilen
     (`body.split-child #view-chatbot`, `.adm-side`, `#adm-content` …); jede
     davon war eine Stelle, an der die Haelfte anders aussah als die App.

     Farben kommen aus den Tokens, damit Hellmodus und Marke automatisch
     mitziehen. */
  .split-wrap{
    position:fixed; top:0; left:0; right:0; bottom:0;
    display:flex; z-index:8985;
    background:var(--bg-base);
    --split-links:50%;
  }
  .split-haelfte{
    position:relative; overflow:hidden;
    background:var(--bg-base);
  }
  #split-links { flex:0 0 var(--split-links); }
  #split-rechts{ flex:1 1 auto; min-width:0; }
  .split-rahmen{ width:100%; height:100%; border:none; display:block; background:var(--bg-base); }

  /* Laedt eine Haelfte nicht (z.B. weil `frame-ancestors` das Rahmen verbietet),
     stuende hier sonst eine schwarze Flaeche ohne jede Erklaerung. */
  .split-hinweis{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:24px; text-align:center;
    font-family:var(--font); font-size:13px; color:var(--tx-4);
  }
  .split-haelfte--bereit .split-hinweis{ display:none; }

  /* Hier sass ein Kreuz zum Schliessen, oben rechts in jeder Haelfte. Es lag
     ueber dem Inhalt und verdeckte dort genau die Knoepfe, die die Ansicht
     selbst an dieser Stelle hat. Entfernt: beendet wird ueber das
     Einstellungen-Menue der Haelfte — an derselben Stelle, an der geteilt
     wurde. */

  /* Trenner: 4px sichtbar, aber mit unsichtbarem Griffbereich links und rechts —
     treffen muss man ihn mit der Maus, nicht mit der Lupe. */
  .split-trenner{
    flex:0 0 4px; position:relative; z-index:11;
    background:var(--bdr-2); cursor:col-resize;
    touch-action:none;                 /* sonst scrollt die Geste, statt zu ziehen */
    transition:background var(--dur-fast) var(--ease-out);
  }
  .split-trenner::before{
    content:''; position:absolute; top:0; bottom:0; left:-5px; right:-5px;
  }
  .split-trenner:hover,
  .split-trenner:focus-visible,
  body.split-zieht .split-trenner{ background:var(--acc-1); }
  .split-trenner:focus-visible{ outline:2px solid var(--acc-1); outline-offset:1px; }
  .split-griff{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:4px; height:44px; border-radius:2px;
    background:var(--tx-4); opacity:.5; pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease-out);
  }
  .split-trenner:hover .split-griff,
  body.split-zieht .split-griff{ opacity:0; }

  /* Waehrend des Ziehens duerfen die Rahmen den Zeiger nicht annehmen —
     sonst verliert der Trenner die Bewegung an die Seite darin. */
  body.split-zieht .split-rahmen{ pointer-events:none; }
  body.split-zieht{ cursor:col-resize; user-select:none; }

  /* Das Elternfenster ist im geteilten Zustand nur noch Rahmen. */
  body.split-mode{ padding-left:0!important; overflow:hidden; }
  body.split-mode .view,
  body.split-mode #gl-sidebar,
  body.split-mode #gl-admin-sidebar,
  body.split-mode #float-topbar,
  body.split-mode #gl-corner-toggle,
  body.split-mode .ft-settings-btn{ display:none!important; }


/* ─────────────────────────────────────────────────────────────────────────────
 * Hilfe-Drawer — zweiter, separater CSS-Block aus app-shell.js (M6/L10b, 2026-08-01).
 *
 * Der Schlankheits-Bericht kannte nur einen Block in dieser Datei; dies ist der
 * zweite. Einzige Anpassung: der interpolierte Wert ${TOPBAR_H+8}px (= 56px) ist
 * jetzt calc(var(--shell-topbar-h) + 8px) — rechnerisch identisch und weiterhin
 * an die JS-Konstante TOPBAR_H gekoppelt, die --shell-topbar-h zur Laufzeit setzt.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Hilfe-Panel im Glas-Material der App ──────────────────────────────────
   Vorbild sind .gl-sidebar und #float-topbar: dasselbe Material (glass-elevated
   + blur 40px/saturate 180%), derselbe Radius (--r-xl), derselbe Glanzverlauf
   (--specular) und dieselben Rand- und Textmarken. Alle Farben kommen aus
   Tokens — dadurch stimmt das helle Thema automatisch und die Marke einer
   Kundin zieht ueberall mit. Vorher stand hier ein undurchsichtiges #1a1a18
   mit eigenen rgba-Werten; das Panel wirkte dadurch aufgesetzt.

   OBERKANTE: --ft-band ist die Unterkante des schwebenden Kopfbands samt Luft
   und waere fuer sich genommen der natuerliche Anschlag. Gemessen am
   2026-08-06 folgt der runde Einstellungs-Knopf (.ft-settings-btn, fixed oben
   rechts) dem eingefahrenen Zustand aber NICHT mit: --topbar-top rechnet auf
   6px herunter, der Knopf steht weiterhin bei 10px und behaelt 56px Hoehe.
   Mit nur --ft-band lag das Panel eingefahren 10px UEBER ihm und verdeckte
   ihn. Deshalb zusaetzlich ein Boden aus der groesstmoeglichen Ausdehnung des
   Knopfes. Bewusst aus Tokens statt als 78px-Konstante: aendert jemand die
   Geometrie des Kopfbands, zieht der Boden mit. */
    #help-drawer{
      position:fixed;
      top:max(var(--ft-band), calc(var(--ft-top) + var(--ft-h) + 12px));
      right:14px;bottom:14px;
      width:352px;max-width:calc(100vw - 28px);
      border-radius:var(--r-xl);
      background:var(--glass-elevated);
      -webkit-backdrop-filter:blur(40px) saturate(180%);
      backdrop-filter:blur(40px) saturate(180%);
      border:1px solid var(--bdr-1);
      box-shadow:0 12px 48px -16px rgb(0 0 0 / 0.5);
      z-index:9100;
      display:flex;flex-direction:column;overflow:hidden;
      font-family:var(--font);
      transform:translateX(calc(100% + 28px)) scale(.98);opacity:0;
      transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
    }
    #help-drawer.open{transform:translateX(0) scale(1);opacity:1}
    /* Glanzkante wie bei Sidebar, Topbar und Einstellungs-Knopf. */
    #help-drawer::before{content:'';position:absolute;inset:0;background:var(--specular);pointer-events:none;border-radius:inherit;opacity:.7}
    #help-drawer > *{position:relative}
    :root[data-theme="light"] #help-drawer,
    body.theme-light #help-drawer{box-shadow:0 12px 48px -16px rgb(13 13 11 / 0.18)}

    #help-drawer .hd-header{padding:15px 18px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    #help-drawer .hd-title{font-size:13px;font-weight:800;color:var(--tx-1);letter-spacing:-.01em}
    #help-drawer .hd-close{background:transparent;border:none;color:var(--tx-4);cursor:pointer;width:28px;height:28px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
    #help-drawer .hd-close:hover{color:var(--tx-1);background:var(--glass-standard)}

    /* Reiter als Segmentleiste aus Pillen — dieselbe Formensprache wie die
       .gl-pill-Filter in den Ansichten. Der fruehere Unterstrich stammte aus
       keinem Muster der App. */
    #help-drawer .hd-tabs{display:flex;gap:6px;padding:0 16px 12px;flex-shrink:0}
    #help-drawer .hd-tab{
      flex:1;height:30px;padding:0 10px;border-radius:var(--r-full);
      background:var(--glass-subtle);
      -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
      border:1px solid var(--bdr-2);color:var(--tx-3);
      font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.01em;
      cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
    }
    #help-drawer .hd-tab:hover:not(.active){background:var(--glass-standard);color:var(--tx-2)}
    #help-drawer .hd-tab.active{background:var(--acc-1-soft);border-color:var(--acc-1-border);color:var(--acc-1-ink)}
    :root[data-theme="light"] #help-drawer .hd-tab.active,
    body.theme-light #help-drawer .hd-tab.active{color:var(--acc-1-ink)}

    #help-drawer .hd-body{flex:1;overflow-y:auto;padding:4px 20px 20px;scrollbar-width:thin}
    #help-drawer .hd-body::-webkit-scrollbar{width:6px}
    #help-drawer .hd-body::-webkit-scrollbar-thumb{background:var(--bdr-1);border-radius:3px}
    #help-drawer .hd-body h2{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--tx-4);margin:0 0 10px}
    /* Kopfzeile: Ueberschrift der Ansicht links, Klicktour-Knopf rechts.
       Der Knopf sitzt bewusst hier und nicht in der Werkzeugleiste — er gehoert
       zur Hilfe der Ansicht, nicht zu deren Werkzeugen. */
    #help-drawer .hd-body .hd-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
    #help-drawer .hd-body .hd-kopfzeile h2{margin:0;flex:1;min-width:0}
    #help-drawer .hd-body .hd-tour-btn{
      display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
      height:26px;padding:0 11px;border-radius:var(--r-full);
      /* Voller Akzent mit --acc-1-text: die Beschriftung traegt die Aussage
         allein. Weich getoent kam sie im hellen Thema auf 1,44:1. Dieselbe
         Behandlung wie .gl-btn--primary, also nichts Neuerfundenes. */
      background:var(--acc-1);border:none;color:var(--acc-1-text);
      font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.01em;
      white-space:nowrap;cursor:pointer;transition:background var(--dur-fast);
    }
    #help-drawer .hd-body .hd-tour-btn:hover{background:var(--acc-1-hover)}
    #help-drawer .hd-body .hd-tour-btn svg{width:13px;height:13px;flex-shrink:0}
    #help-drawer .hd-body h3{font-size:13px;font-weight:700;color:var(--tx-1);margin:16px 0 7px}
    #help-drawer .hd-body p{font-size:12.5px;line-height:1.6;color:var(--tx-3);margin:0 0 11px}
    #help-drawer .hd-body ul{padding-left:18px;margin:0 0 12px}
    #help-drawer .hd-body li{font-size:12.5px;line-height:1.55;color:var(--tx-3);margin-bottom:5px}
    #help-drawer .hd-body strong{color:var(--tx-1);font-weight:700}
    #help-drawer .hd-body .empty{color:var(--tx-5);font-size:12.5px;text-align:center;padding:40px 16px;line-height:1.55}

    /* Handlungsliste "Was du hier tun kannst": je Zeile ein Line-Icon und ein
       Satz. Groessen bewusst identisch zu .hd-body li. */
    #help-drawer .hd-body .hd-acts{list-style:none;padding:0;margin:0 0 12px}
    #help-drawer .hd-body .hd-acts li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--tx-3);margin-bottom:9px}
    #help-drawer .hd-body .hd-acts svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--acc-1-ink)}
    /* Randnotiz: Abhaengigkeit oder Besonderheit, leiser als der Fliesstext. */
    #help-drawer .hd-body .hd-note{font-size:11.5px;line-height:1.5;color:var(--tx-4);border-left:2px solid var(--acc-1);padding:1px 0 1px 10px;margin:0 0 11px}
    /* Helles Thema: das reine Akzent-Gelb verschwindet auf hellem Grund nahezu
       (gemessen 1,02:1). --acc-1-deep ist die dafuer vorgesehene dunklere
       Variante derselben Akzentfamilie (in theme.css als --yellow-dk gefuehrt)
       und zieht bei einer anderen Mandantenfarbe korrekt mit.
       EHRLICH GEMESSEN: damit 1,44:1 — besser, aber kein starker Kontrast.
       Vertretbar, weil neben jedem Icon sein Satz steht: die Aussage haengt
       nie am Icon allein, der Text traegt sie. */
    :root[data-theme="light"] #help-drawer .hd-body .hd-acts svg,
    body.theme-light #help-drawer .hd-body .hd-acts svg{color:var(--acc-1-ink)}
    :root[data-theme="light"] #help-drawer .hd-body .hd-note,
    body.theme-light #help-drawer .hd-body .hd-note{border-left-color:var(--acc-1-deep)}

    /* Handlungsknopf im Panel (z. B. "Assistent oeffnen") — wie .gl-btn--primary. */
    #help-drawer .hd-body .hd-cta{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;background:var(--acc-1);color:var(--acc-1-text);border:none;border-radius:var(--r-full);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin:2px 0 12px;transition:background var(--dur-fast)}
    #help-drawer .hd-body .hd-cta:hover{background:var(--acc-1-hover)}
    #help-drawer .hd-body .hd-cta svg{width:15px;height:15px}

    /* ── Spotlight-Tour ──────────────────────────────────────────────────────
       Leiser und weicher als vorher: die Abdunkelung liegt bei .45 statt .62
       und ist zusaetzlich leicht unscharf — die Seite bleibt als Zusammenhang
       erkennbar, statt hinter einer schwarzen Wand zu verschwinden. Bewegungen
       laufen ueber die Kurven der App (--ease-out) statt linear. */
    #tour-overlay{position:fixed;inset:0;z-index:9200;pointer-events:none}
    #tour-overlay.active{pointer-events:auto}
    #tour-overlay .to-mask{
      position:absolute;background:rgb(0 0 0 / 0.45);
      -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
      transition:all var(--dur-base) var(--ease-out);
    }
    :root[data-theme="light"] #tour-overlay .to-mask,
    body.theme-light #tour-overlay .to-mask{background:rgb(13 13 11 / 0.28)}
    /* Kein harter 2px-Rahmen mehr, sondern ein weicher Lichtsaum in der
       Akzentfarbe — dasselbe Mittel, mit dem die App den Einstellungs-Knopf
       beim Ueberfahren hervorhebt (box-shadow mit --acc-1-glow). */
    #tour-spotlight{
      position:fixed;border-radius:var(--r-m);
      border:1px solid var(--acc-1-border);
      box-shadow:0 0 0 3px rgb(var(--acc-1-rgb) / .16),
                 0 0 28px 2px var(--acc-1-glow),
                 inset 0 0 0 1px rgb(255 255 255 / .06);
      z-index:9201;pointer-events:none;
      transition:all var(--dur-base) var(--ease-out);
    }
    /* Tooltip im selben Glas wie das Panel. */
    #tour-tooltip{
      position:fixed;z-index:9202;width:300px;
      border-radius:var(--r-l);padding:15px 17px;
      background:var(--glass-elevated);
      -webkit-backdrop-filter:blur(40px) saturate(180%);
      backdrop-filter:blur(40px) saturate(180%);
      border:1px solid var(--bdr-1);
      box-shadow:0 12px 48px -16px rgb(0 0 0 / 0.5);
      transition:top var(--dur-base) var(--ease-out),left var(--dur-base) var(--ease-out);
      font-family:var(--font);
    }
    #tour-tooltip::before{content:'';position:absolute;inset:0;background:var(--specular);pointer-events:none;border-radius:inherit;opacity:.7}
    #tour-tooltip > *{position:relative}
    :root[data-theme="light"] #tour-tooltip,
    body.theme-light #tour-tooltip{box-shadow:0 12px 48px -16px rgb(13 13 11 / 0.18)}
    #tour-tooltip .tt-step{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--acc-1-ink);margin-bottom:7px}
    :root[data-theme="light"] #tour-tooltip .tt-step,
    body.theme-light #tour-tooltip .tt-step{color:var(--acc-1-ink)}
    #tour-tooltip .tt-text{font-size:13px;line-height:1.55;color:var(--tx-2);margin-bottom:13px}
    #tour-tooltip .tt-actions{display:flex;justify-content:space-between;align-items:center;gap:6px}
    #tour-tooltip .tt-actions button{
      height:30px;padding:0 13px;border-radius:var(--r-full);
      background:var(--glass-subtle);
      -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
      border:1px solid var(--bdr-2);color:var(--tx-2);
      font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
      transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
    }
    #tour-tooltip .tt-actions button:hover{background:var(--glass-standard);color:var(--tx-1)}
    #tour-tooltip .tt-actions button.primary{background:var(--acc-1);color:var(--acc-1-text);border-color:transparent}
    #tour-tooltip .tt-actions button.primary:hover{background:var(--acc-1-hover);color:var(--acc-1-text)}
    #tour-tooltip .tt-actions #tt-end{padding:0 10px;color:var(--tx-4);background:transparent;border-color:transparent}
    #tour-tooltip .tt-actions #tt-end:hover{background:var(--glass-standard);color:var(--tx-2)}
