/* ─────────────────────────────────────────────────────────────────────────────
 * 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;
}

/* ── Topbar ─────────────────────────── */
  #app-topbar{position:fixed;top:0;left:0;right:0;height:var(--shell-topbar-h);min-width:0;background:#0D0D0B;border-bottom:1px solid rgba(255,255,255,.08);z-index:9001;display:flex;align-items:center;padding:0 16px;gap:10px;font-family:var(--font,'DM Sans',sans-serif)}
  #topbar-search{flex-shrink:1;min-width:0;max-width:320px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:0 12px;height:32px;transition:all 150ms}
  #topbar-search:focus-within{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}
  #topbar-search input{background:none;border:none;outline:none;color:rgba(255,255,255,.8);font-size:12.5px;font-family:inherit;width:100%}
  #topbar-search input::placeholder{color:rgba(255,255,255,.25)}
  #topbar-ctx{flex-shrink:0;margin-left:auto;display:flex;align-items:center;gap:4px}
  .topbar-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:none;background:none;cursor:pointer;color:rgba(255,255,255,.35);transition:all 150ms}
  .topbar-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
  /* Split-Active Topbar */
  #app-topbar.split-active-topbar{height:28px;padding:0 12px;justify-content:center}
  #app-topbar.split-active-topbar > *:not(#split-status-text){display:none!important}
  #split-status-text{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap}
  /* ── Light Mode ─────────────────────── */
  body.theme-light{background:#F2EEE4;color:#1a1a17}
  body.theme-light #app-topbar{background:#E8E3D9;border-bottom:1px solid rgba(0,0,0,.1)}
  body.theme-light #topbar-search{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
  body.theme-light #topbar-search:focus-within{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.07)}
  body.theme-light #topbar-search input{color:rgba(0,0,0,.8)}
  body.theme-light #topbar-search input::placeholder{color:rgba(0,0,0,.3)}
  body.theme-light .topbar-btn{color:rgba(0,0,0,.45)}
  body.theme-light .topbar-btn:hover{background:rgba(0,0,0,.08);color:rgba(0,0,0,.8)}
  body.theme-light #sb-brand{color:rgba(0,0,0,.8)!important}
  body.theme-light #app-sidebar{background:#DDD8CE;border-right:1px solid rgba(0,0,0,.1)}
  body.theme-light .sb-item{color:rgba(0,0,0,.55)}
  body.theme-light .sb-item:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.85)}
  body.theme-light .sb-bottom-item{color:rgba(0,0,0,.45)}
  body.theme-light .sb-bottom-item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.7)}
  body.theme-light .sb-bottom{border-top:1px solid rgba(0,0,0,.1)}
  body.theme-light .sb-toggle{color:rgba(0,0,0,.4)}
  body.theme-light .sb-toggle:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.75)}
  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)}
  body.theme-light .sc-sidebar{background:#E8E3D9;border-right:1px solid rgba(0,0,0,.1)}
  body.theme-light .sc-sidebar .sc-btn{color:rgba(0,0,0,.55)}
  body.theme-light .sc-sidebar .sc-btn:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.85)}
  body.theme-light .sc-sidebar .sc-bottom{border-top:1px solid rgba(0,0,0,.1)}
  body.theme-light #sc-topbar{background:#F2EEE4;border-bottom:1px solid rgba(0,0,0,.1)}
  body.theme-light #sc-topbar .sc-tb-toggle{color:rgba(0,0,0,.45)}
  body.theme-light #sc-topbar .sc-tb-toggle:hover{background:rgba(0,0,0,.08);color:rgba(0,0,0,.8)}
  body.theme-light #sc-topbar .sc-tb-search{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
  body.theme-light #sc-topbar .sc-tb-search input{color:rgba(0,0,0,.8)}
  body.theme-light #sc-topbar .sc-tb-btn{color:rgba(0,0,0,.4)}
  body.theme-light #sc-topbar .sc-tb-btn:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.75)}
  /* ── Sidebar ────────────────────────── */
  #app-sidebar{position:fixed;top:var(--shell-topbar-h);left:0;bottom:0;width:var(--shell-sidebar-w-full);background:#111110;border-right:1px solid rgba(255,255,255,.06);z-index:9000;display:flex;flex-direction:column;font-family:var(--font,'DM Sans',sans-serif);transition:width 200ms ease;-webkit-font-smoothing:antialiased}
  #app-sidebar.sb-compact{width:var(--shell-sidebar-w-compact);overflow:visible}
  #app-sidebar.sb-hidden{width:0;border:none;overflow:hidden}
  #app-sidebar .sb-lbl{white-space:nowrap;overflow:hidden;transition:opacity 150ms}
  #app-sidebar.sb-compact .sb-lbl,#app-sidebar.sb-hidden .sb-lbl{opacity:0;width:0;margin:0;padding:0}
  body.has-sidebar{transition:padding-left 200ms ease;padding-top:var(--shell-topbar-h);background:#0a0a08}
  body.has-sidebar.theme-light{background:#B8B3A8}
  body.sb-full{padding-left:var(--shell-sidebar-w-full)}
  body.sb-compact{padding-left:var(--shell-sidebar-w-compact)}
  body.sb-hidden{padding-left:0}
  /* Nav Items */
  .sb-item{display:flex;align-items:center;gap:11px;padding:8px 14px;margin:1px 6px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.5);font-size:13px;font-weight:500;transition:all 120ms;position:relative;text-decoration:none}
  .sb-item:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8)}
  .sb-item.active{background:var(--sb-acc-bg,rgba(232,210,0,.1));color:var(--sb-acc,#E8D200);font-weight:600}
  .sb-item .sb-ic{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
  /* Hamburger entfernt — Toggle ist immer in der Topbar */
  /* Tooltip bei compact mode */
  #app-sidebar.sb-compact .sb-item[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#1a1a17;border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:6px;font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap;z-index:9999;pointer-events:none}
  #app-sidebar.sb-compact .sb-bottom-item[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#1a1a17;border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:6px;font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap;z-index:9999;pointer-events:none}
  #app-sidebar:not(.sb-compact) .sb-item::after,#app-sidebar:not(.sb-compact) .sb-bottom-item::after{display:none!important}
  /* Compact: alles zentrieren */
  #app-sidebar.sb-compact .sb-item{justify-content:center;padding:10px 0;margin:1px 0;gap:0}
  #app-sidebar.sb-compact .sb-item .sb-ic{margin:0}
  #app-sidebar.sb-compact .sb-bottom-item{justify-content:center;padding:8px 0;margin:1px 0;gap:0}
  #app-sidebar.sb-compact .sb-bottom-item .sb-ic{margin:0}
  #app-sidebar.sb-compact .sb-account{justify-content:center;padding:10px 0;gap:0}
  #app-sidebar.sb-compact .sb-account .sb-avatar{margin:0}
  #app-sidebar.sb-compact .sb-bottom{padding:6px 0;display:flex;flex-direction:column;align-items:center}
  #app-sidebar.sb-compact .sb-toggle{margin:0 auto}
  /* Scrollbars im Sidebar-Nav permanent verstecken (Scroll funktioniert weiter) */
  #app-sidebar > div{scrollbar-width:none;-ms-overflow-style:none}
  #app-sidebar > div::-webkit-scrollbar{display:none;width:0;height:0}
  /* 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 */
  .sb-toggle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.3);transition:all 120ms}
  .sb-toggle:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.65)}
  /* Bottom Section */
  .sb-bottom{margin-top:auto;padding:6px;border-top:1px solid rgba(255,255,255,.05)}
  .sb-bottom-item{display:flex;align-items:center;gap:10px;padding:7px 12px;margin:1px 0;border-radius:8px;cursor:pointer;transition:all 120ms;color:rgba(255,255,255,.3);font-size:11.5px;font-weight:500;position:relative}
  .sb-bottom-item:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.55)}
  .sb-bottom-item .sb-ic{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
  .sb-account{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:2px 0;border-radius:10px;cursor:pointer;transition:all 120ms}
  .sb-account:hover{background:rgba(255,255,255,.05)}
  .sb-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em;flex-shrink:0}
  /* Mobile */
  @media(max-width:768px){
    #app-sidebar{width:0;border:none;overflow:hidden;transition:width 250ms ease,box-shadow 250ms ease}
    #app-sidebar.sb-mobile-open{width:var(--shell-sidebar-w-full);box-shadow:0 0 60px rgba(0,0,0,.7);overflow:visible}
    body.has-sidebar{padding-left:0!important}
    .sb-mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8998;display:none}
    .sb-mobile-overlay.active{display:block}
    #topbar-search{flex:1;min-width:0}
    /* Sidebar immer fullwidth auf Mobile */
    #app-sidebar.sb-compact,#app-sidebar.sb-hidden{width:0!important;overflow:hidden}
    /* Split-Screen Button auf Mobile verstecken */
    #tb-split{display:none!important}
    /* Back/Fwd auf Mobile kompakter */
    #tb-back,#tb-fwd{width:28px;height:28px}
    /* 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 */
    #sb-mobile-ham{display:flex!important}
    /* Panel-Toggle auf Desktop verstecken */
    #sb-toggle{display:none}
  }
  @media(min-width:769px){
    #sb-mobile-ham{display:none!important}
    .sb-mobile-overlay{display:none!important}
  }
  /* ── 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}
  body.sb-compact .float-sidebar{left:calc(var(--shell-sidebar-w-compact) + 10px)}
  body.sb-hidden .float-sidebar{left:10px}
  /* ── 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)}
  body.sb-compact #float-topbar{left:calc(var(--shell-sidebar-w-compact) + 8px)}
  body.sb-hidden #float-topbar{left:8px}
  #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)}
  body.sb-compact .float-sidebar{left:calc(var(--shell-sidebar-w-compact) + 8px)}
  body.sb-hidden .float-sidebar{left: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 */
  body.has-sidebar.sb-compact .view.active{left:calc(var(--shell-sidebar-w-compact) + 8px)}
  body.has-sidebar.sb-hidden .view.active{left:8px}
  /* 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)}
  body.has-sidebar.has-float-ui.sb-compact .view.active{left:calc(var(--shell-sidebar-w-compact) + 60px)}
  body.has-sidebar.has-float-ui.sb-hidden .view.active{left: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)}
  body.has-sidebar.has-float-ui.sb-compact.fs-expanded-state .view.active{left:calc(var(--shell-sidebar-w-compact) + 246px)}
  body.has-sidebar.has-float-ui.sb-hidden.fs-expanded-state .view.active{left:246px}
  /* Views ohne Float-Sidebar aber mit Float-Topbar (Dashboard, Aufgaben etc.) */
  body.has-sidebar.has-float-ui.no-float-sidebar .view.active{left:calc(var(--shell-sidebar-w-full) + 8px)}
  body.has-sidebar.has-float-ui.no-float-sidebar.sb-compact .view.active{left:calc(var(--shell-sidebar-w-compact) + 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,.4)}
  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}
  body.sb-compact .adm-side{left:calc(var(--shell-sidebar-w-compact) + 8px)}
  body.sb-hidden .adm-side{left:8px}
  /* 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}
  /* Admin View-Kachel: Float-Sidebar übernimmt – gleiche Regeln wie alle anderen Views */
  body.has-sidebar #view-admin.active{top:calc(var(--shell-topbar-h) + 64px)!important}
  body.ft-collapsed-state #view-admin.active{top:calc(var(--shell-topbar-h) + 8px)!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}
  body.has-sidebar #view-diagnostik > div:nth-child(2){padding-top:20px!important}
  body.has-sidebar #view-klicktool #kt-user-wrap{padding-top:20px!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*="showView('hub')"]:not(.sb-item){display:none!important}
  body.has-sidebar [onclick*="goJobs"]{display:none!important}
  body.has-sidebar [onclick*="goBackToCompany"]{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}
  /* Split-Screen */
  .split-wrap{position:fixed;top:var(--shell-topbar-h);left:0;right:0;bottom:0;display:flex;z-index:8985}
  .split-pane{position:relative;overflow:hidden;min-width:280px}
  .split-pane:first-child{flex:1 1 50%}
  .split-pane:last-child{flex:1 1 50%}
  .split-pane iframe{width:100%;height:100%;border:none;background:#0D0D0B}
  .split-close{position:absolute;top:10px;right:10px;z-index:10;width:20px;height:20px;border-radius:5px;background:rgba(176,48,48,.65);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;transition:all 120ms;opacity:.5;line-height:1}
  .split-close:hover{opacity:1;background:rgba(220,50,50,.9)}
  /* Divider */
  .split-divider{width:3px;background:#1a1a17;position:relative;cursor:col-resize;flex-shrink:0;z-index:10;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
  .split-divider::before{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px;z-index:1}
  .split-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:48px;background:#2a2a27;border:1px solid rgba(255,255,255,.15);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:col-resize;z-index:2}
  .split-handle::before{content:'‹';position:absolute;left:-2px;font-size:9px;color:rgba(255,255,255,.35);line-height:1}
  .split-handle::after{content:'›';position:absolute;right:-2px;font-size:9px;color:rgba(255,255,255,.35);line-height:1}
  .split-handle-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
  body.split-dragging iframe{pointer-events:none}
  body.split-dragging .split-divider{background:rgba(232,210,0,.3)}
  body.split-mode #app-sidebar{display:none!important}
  body.split-mode{padding-left:0!important}
  body.split-mode .view{display:none!important}
  /* ── Split-Child: echte Sidebar + Topbar (wie Parent) ── */
  body.split-child{padding:0!important;margin:0;background:#0D0D0B!important;overflow-x:hidden}
  body.split-child #app-topbar{display:none!important}
  body.split-child #app-sidebar{display:none!important}
  body.split-child #global-logout-btn{display:none!important}
  body.split-child #modal-notif,body.split-child #modal-pwd{display:none!important}
  body.split-child .hub-back-btn,body.split-child .adm-back,body.split-child [onclick*="goBack"]{display:none!important}
  body.split-child [onclick*="showView('hub')"]:not(.sc-btn){display:none!important}
  body.split-child [onclick*="goJobs"]{display:none!important}
  /* Split-Child Topbar */
  #sc-topbar{position:fixed;top:0;left:0;right:0;height:40px;background:#0D0D0B;border-bottom:1px solid rgba(255,255,255,.06);z-index:9001;display:flex;align-items:center;padding:0 10px;gap:8px;font-family:var(--font,'DM Sans',sans-serif)}
  #sc-topbar .sc-tb-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.45);transition:all 120ms;flex-shrink:0}
  #sc-topbar .sc-tb-toggle:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
  #sc-topbar .sc-tb-search{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:0 10px;height:26px}
  #sc-topbar .sc-tb-search:focus-within{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}
  #sc-topbar .sc-tb-search input{background:none;border:none;outline:none;color:rgba(255,255,255,.8);font-size:11.5px;font-family:inherit;width:100%}
  #sc-topbar .sc-tb-search input::placeholder{color:rgba(255,255,255,.25)}
  #sc-topbar .sc-tb-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:none;background:none;cursor:pointer;color:rgba(255,255,255,.3);transition:all 120ms;flex-shrink:0}
  #sc-topbar .sc-tb-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.65)}
  /* Split-Child Sidebar: echte feste Sidebar wie Parent */
  .sc-sidebar{position:fixed;top:40px;left:0;bottom:0;width:var(--shell-sidebar-w-full);background:#111110;border-right:1px solid rgba(255,255,255,.06);z-index:9000;display:flex;flex-direction:column;font-family:var(--font,'DM Sans',sans-serif);transition:width 200ms ease;-webkit-font-smoothing:antialiased}
  .sc-sidebar.sc-collapsed{width:var(--shell-sidebar-w-compact);overflow:visible}
  .sc-sidebar .sc-lbl{white-space:nowrap;overflow:hidden;transition:opacity 150ms}
  .sc-sidebar.sc-collapsed .sc-lbl{opacity:0;width:0;margin:0;padding:0}
  .sc-sidebar .sc-nav{flex:1;overflow-y:auto;padding:8px 0 4px}
  .sc-sidebar .sc-bottom{margin-top:auto;padding:6px;border-top:1px solid rgba(255,255,255,.05)}
  .sc-sidebar .sc-btn{display:flex;align-items:center;gap:11px;padding:8px 14px;margin:1px 6px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.5);font-size:13px;font-weight:500;transition:all 120ms;position:relative;text-decoration:none;border:none;background:none;width:calc(100% - 12px);text-align:left}
  .sc-sidebar .sc-btn:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8)}
  .sc-sidebar .sc-btn.active{background:var(--sb-acc-bg,rgba(232,210,0,.1));color:var(--sb-acc,#E8D200);font-weight:600}
  .sc-sidebar .sc-btn .sc-ic{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
  .sc-sidebar.sc-collapsed .sc-btn{justify-content:center;padding:10px 0;margin:1px 0;gap:0}
  .sc-sidebar.sc-collapsed .sc-btn .sc-ic{margin:0}
  .sc-sidebar.sc-collapsed .sc-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#1a1a17;border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:6px;font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap;z-index:9999;pointer-events:none}
  .sc-divider{width:calc(100% - 24px);height:1px;background:rgba(255,255,255,.06);margin:4px auto}
  /* Views: Abstand für Topbar + Sidebar */
  body.split-child .view.active{margin-left:var(--shell-sidebar-w-full);padding-top:40px;min-height:100vh;transition:margin-left 200ms;box-sizing:border-box}
  body.split-child.sc-sb-collapsed .view.active{margin-left:var(--shell-sidebar-w-compact)}
  /* Chatbot */
  body.split-child #view-chatbot .view-chatbot-inner,body.split-child #view-chatbot > div[style*="inset"]{position:absolute!important;left:var(--shell-sidebar-w-full)!important;top:40px!important;right:0!important;bottom:0!important;width:auto!important}
  body.split-child.sc-sb-collapsed #view-chatbot > div[style*="inset"]{left:var(--shell-sidebar-w-compact)!important}
  /* WDB */
  body.split-child #view-wissensdatenbank > div:nth-child(2){margin-top:0!important}
  /* Diagnostik */
  body.split-child #view-diagnostik > div:nth-child(2){padding-top:8px!important}
  /* Dashboard */
  body.split-child #view-dashboard{background:#0D0D0B!important}
  /* Admin */
  body.split-child .adm-side{position:fixed;top:40px;left:var(--shell-sidebar-w-full);width:220px;max-height:calc(100vh - 40px);background:#161614;border:1px solid rgba(255,255,255,.08);border-radius:0 0 14px 0;box-shadow:0 8px 40px rgba(0,0,0,.4);z-index:8990;overflow-y:auto;padding:8px 0;transition:left 200ms}
  body.split-child.sc-sb-collapsed .adm-side{left:var(--shell-sidebar-w-compact)}
  body.split-child .adm-body{display:block!important;padding-left:0!important}
  body.split-child #adm-content{margin-left:calc(var(--shell-sidebar-w-full) + 220px)!important;width:auto!important;padding-top:40px;transition:margin-left 200ms}
  body.split-child.sc-sb-collapsed #adm-content{margin-left:calc(var(--shell-sidebar-w-compact) + 220px)!important}
  body.split-child .adm-hdr{display:none}


/* ─────────────────────────────────────────────────────────────────────────────
 * 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.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Drawer als schwebende Kachel am rechten Rand ── */
    #help-drawer{position:fixed;top:calc(var(--shell-topbar-h) + 8px);right:12px;bottom:12px;width:340px;max-width:calc(100vw - 24px);background:#1a1a18;border:1px solid rgba(255,255,255,.1);border-radius:12px;z-index:9100;transform:translateX(calc(100% + 24px));opacity:0;transition:transform .25s ease,opacity .2s ease;display:flex;flex-direction:column;box-shadow:0 14px 38px rgba(0,0,0,.45);font-family:var(--font,'DM Sans',sans-serif);overflow:hidden}
    #help-drawer.open{transform:translateX(0);opacity:1}
    body.theme-light #help-drawer{background:#FAF6EC;border-color:rgba(0,0,0,.1);box-shadow:0 14px 38px rgba(0,0,0,.15)}
    #help-drawer .hd-header{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    body.theme-light #help-drawer .hd-header{border-bottom-color:rgba(0,0,0,.08)}
    #help-drawer .hd-title{font-size:13px;font-weight:800;color:rgba(255,255,255,.95);letter-spacing:-.01em}
    body.theme-light #help-drawer .hd-title{color:rgba(0,0,0,.88)}
    #help-drawer .hd-close{background:transparent;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:4px;border-radius:5px;display:inline-flex}
    #help-drawer .hd-close:hover{color:rgba(255,255,255,.95);background:rgba(255,255,255,.06)}
    body.theme-light #help-drawer .hd-close{color:rgba(0,0,0,.5)}
    body.theme-light #help-drawer .hd-close:hover{color:rgba(0,0,0,.9);background:rgba(0,0,0,.05)}
    #help-drawer .hd-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07);padding:0 10px;flex-shrink:0}
    body.theme-light #help-drawer .hd-tabs{border-bottom-color:rgba(0,0,0,.08)}
    #help-drawer .hd-tab{flex:1;padding:11px 6px;background:transparent;border:none;color:rgba(255,255,255,.5);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;letter-spacing:.02em}
    #help-drawer .hd-tab.active{color:rgba(255,255,255,.98);border-bottom-color:#E8D200}
    #help-drawer .hd-tab:hover:not(.active){color:rgba(255,255,255,.82)}
    body.theme-light #help-drawer .hd-tab{color:rgba(0,0,0,.5)}
    body.theme-light #help-drawer .hd-tab.active{color:rgba(0,0,0,.92)}
    body.theme-light #help-drawer .hd-tab:hover:not(.active){color:rgba(0,0,0,.75)}
    #help-drawer .hd-body{flex:1;overflow-y:auto;padding:18px 20px}
    #help-drawer .hd-body h2{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.6);margin:0 0 10px}
    #help-drawer .hd-body h3{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);margin:16px 0 7px}
    #help-drawer .hd-body p{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.78);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:rgba(255,255,255,.78);margin-bottom:5px}
    #help-drawer .hd-body strong{color:rgba(255,255,255,.95);font-weight:700}
    #help-drawer .hd-body .empty{color:rgba(255,255,255,.42);font-size:12.5px;text-align:center;padding:40px 16px;line-height:1.55}
    body.theme-light #help-drawer .hd-body h2{color:rgba(0,0,0,.55)}
    body.theme-light #help-drawer .hd-body h3{color:rgba(0,0,0,.88)}
    body.theme-light #help-drawer .hd-body p,
    body.theme-light #help-drawer .hd-body li{color:rgba(0,0,0,.72)}
    body.theme-light #help-drawer .hd-body strong{color:rgba(0,0,0,.92)}
    body.theme-light #help-drawer .hd-body .empty{color:rgba(0,0,0,.42)}
    #help-drawer .hd-body #help-tour-start{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;background:#E8D200;color:#111;border:none;border-radius:7px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin-top:6px}
    #help-drawer .hd-body #help-tour-start:hover{background:#F2DC1A}

    /* ── Spotlight-Tour ── */
    #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:rgba(0,0,0,.62);transition:all .25s ease}
    #tour-spotlight{position:fixed;border:2px solid #E8D200;border-radius:10px;box-shadow:0 0 0 4px rgba(232,210,0,.22),0 0 32px rgba(232,210,0,.45);z-index:9201;pointer-events:none;transition:all .25s ease}
    #tour-tooltip{position:fixed;z-index:9202;width:300px;background:#1a1a18;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:16px 18px;box-shadow:0 14px 38px rgba(0,0,0,.45);transition:top .25s ease,left .25s ease;font-family:var(--font,'DM Sans',sans-serif)}
    body.theme-light #tour-tooltip{background:#FAF6EC;border-color:rgba(0,0,0,.12)}
    #tour-tooltip .tt-step{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#E8D200;margin-bottom:8px}
    #tour-tooltip .tt-text{font-size:13px;line-height:1.55;color:rgba(255,255,255,.88);margin-bottom:14px}
    body.theme-light #tour-tooltip .tt-text{color:rgba(0,0,0,.82)}
    #tour-tooltip .tt-actions{display:flex;justify-content:space-between;align-items:center;gap:6px}
    #tour-tooltip .tt-actions button{padding:7px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);border-radius:7px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
    #tour-tooltip .tt-actions button:hover{background:rgba(255,255,255,.1)}
    #tour-tooltip .tt-actions button.primary{background:#E8D200;color:#111;border-color:#E8D200}
    #tour-tooltip .tt-actions button.primary:hover{background:#F2DC1A}
    #tour-tooltip .tt-actions #tt-end{padding:7px 9px;color:rgba(255,255,255,.5)}
    body.theme-light #tour-tooltip .tt-actions button{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.78)}
    body.theme-light #tour-tooltip .tt-actions button:hover{background:rgba(0,0,0,.08)}
    body.theme-light #tour-tooltip .tt-actions #tt-end{color:rgba(0,0,0,.5)}
