/* sidebar.css — linke Navigation (früher: horizontale Topnav) + mobiles
   Off-Canvas-Menü (static/app_nav.js).

   .topnav bleibt exakt der Container, in den app_users.js/app_activity.js/
   app_board.js/app_kb.js/app_auth.js/app_enhance.js ihre Buttons injizieren
   (querySelector(".topnav")) — hier nur zur vertikalen Sidebar umgestylt,
   keine der JS-Injection-Stellen musste dafür angefasst werden. Die "order"-
   Werte unten sichern eine deterministische Reihenfolge unabhängig davon,
   welches Modul zuerst lädt: Kalender/Promoter/Board/Wissensdatenbank
   (statisch, order:1) < Aktivitäten/Nutzer (admin-only, optisch abgesetzt,
   order:3) < Suche ganz unten, direkt über Abmelden (order:8, User-Wunsch
   2026-08-18: nicht mehr mittig) < Abmelden ganz unten (order:9 +
   margin-top:auto). Neues selbst-injizierendes Nav-Modul? Gib seinem Tab
   hier einen expliziten order-Wert, sonst landet er im order:1-Block in
   DOM-Einfügereihenfolge. */

.top{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:100;
     display:flex;flex-direction:column;gap:0;padding:0;margin:0;max-width:none;
     background:var(--panel);border-right:1px solid var(--line);
     transition:transform .22s ease;overflow-y:auto;}
.top .brand{padding:22px 18px 14px;display:flex;align-items:baseline;gap:2px;}
h1{font-family:var(--display);font-weight:400;font-size:2.15rem;letter-spacing:.03em;
   line-height:.9;margin:0;color:var(--text);}
h1 .o2{color:var(--accent2);}
.top .meta{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.03em;
           padding:12px 18px;border-top:1px solid var(--line2);order:5;}
.topnav{display:flex;flex-direction:column;gap:3px;padding:6px 12px;flex:1;min-height:0;
        overflow-y:auto;}
.tab{text-align:left;padding:10px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
     background:transparent;border:1px solid transparent;box-shadow:none;order:1;}
.tab:hover{border-color:var(--line);background:var(--bg);}
.tab.active{background:var(--accent);border-color:var(--accent);color:#0a0912;}
.kbd-hint{order:8;margin:14px 12px 4px;justify-content:flex-start;border:1px solid var(--line);
          border-radius:10px;position:relative;}
.kbd-hint::before{content:"";position:absolute;top:-8px;left:2px;right:2px;height:1px;
                  background:var(--line2);}
#tabActivity,#tabUsers{order:3;}
#tabActivity{margin-top:12px;padding-top:10px;position:relative;}
#tabActivity::before{content:"";position:absolute;top:-6px;left:14px;right:14px;height:1px;
                     background:var(--line2);}
#tabLogout{order:9;margin-top:auto;color:var(--crit);}
#tabLogout:hover{border-color:var(--crit);background:var(--crit-bg);}
.top .sidebar-foot{order:6;padding:10px 18px 16px;font-family:var(--mono);font-size:10px;
                   color:var(--faint);border-top:1px solid var(--line2);letter-spacing:.02em;}
.top .sidebar-foot b{color:var(--muted);font-weight:600;}

.nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:110;padding:8px 11px;
           font-size:17px;line-height:1;border-radius:10px;}
.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(6,5,10,.6);z-index:99;}
.sidebar-scrim.show{display:block;}

@media (max-width:900px){
  .top{transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.6);}
  .top.open{transform:none;}
  .nav-toggle{display:inline-flex;}
  body{padding-left:clamp(12px,3vw,28px);padding-top:56px;}
}