/* App-Navigation: Kopf mit Burger-Menü, Tabs am unteren Rand, Seitenmenü (Betrachter, Schlaf, Konto) */
body.hasnav main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
#appbar{max-width:640px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) 16px 4px;display:flex;align-items:center;gap:12px}
#appbar .ib{flex:none;width:46px;height:46px;border-radius:14px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.08)}
#appbar .ib svg{width:24px;height:24px}
#appbar .brand{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:800;font-size:1.25rem}
#appbar .brand img{width:38px;height:38px;border-radius:12px}
#appStatus{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:7px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
#appStatus i{width:9px;height:9px;border-radius:50%;background:var(--bad)}#appStatus.on i{background:var(--acc)}#appStatus.on{color:var(--fg)}
.tabview.hidden{display:none}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:0 0 env(safe-area-inset-bottom);pointer-events:none}
#tabbar .in{pointer-events:auto;width:min(100%,640px);display:flex;gap:2px;background:var(--card);border:1px solid var(--line);border-bottom:none;border-radius:24px 24px 0 0;padding:8px 8px 10px;box-shadow:0 -6px 22px rgba(0,0,0,.12)}
#tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:16px;color:var(--mut);text-decoration:none;font-size:.7rem;font-weight:600;position:relative;-webkit-tap-highlight-color:transparent}
#tabbar a svg{width:24px;height:24px}
#tabbar a[aria-current=page]{color:var(--acc2);background:color-mix(in srgb,var(--acc) 16%,transparent)}
#tabbar a .dot{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:99px;background:var(--bad);color:#fff;font-size:.65rem;line-height:17px;text-align:center;padding:0 4px}
#drawerBg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
#drawer{position:fixed;top:0;bottom:0;left:0;z-index:61;width:min(86vw,330px);background:var(--card);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .22s;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;box-shadow:6px 0 24px rgba(0,0,0,.2)}
body.drawer-open #drawerBg{opacity:1;pointer-events:auto}body.drawer-open #drawer{transform:none}
#drawer .dh{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#drawer .dh img{width:46px;height:46px;border-radius:14px}#drawer .dh .t{flex:1;min-width:0}#drawer .dh b{display:block;font-size:1.25rem;line-height:1.1}
#drawer .dh .s{color:var(--mut);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
#drawer .dh button{flex:none;width:40px;height:40px;padding:0;border-radius:50%}
#drawer .grp{margin:10px 0 2px;padding:0 10px;color:var(--mut);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
#drawer a.it,#drawer button.it{display:flex;align-items:center;gap:14px;width:100%;padding:12px 12px;border-radius:14px;color:var(--fg);text-decoration:none;font-weight:600;font-size:1rem;background:none;border:none;text-align:left}
#drawer a.it svg,#drawer button.it svg{width:22px;height:22px;flex:none}
#drawer a.it[aria-current=page]{background:var(--acc);color:#0b1a07}
#drawer a.it.sec,#drawer button.it.sec{font-weight:500;color:var(--mut);padding:10px 12px}
#drawer .sep{height:1px;background:var(--line);margin:8px 0}
#drawer .bot{margin-top:auto;padding-top:10px}
@media (prefers-reduced-motion:reduce){#drawer,#drawerBg{transition:none}}
.vt{margin:12px 0 8px;font-size:1.15rem}

#drawer .bt{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:color-mix(in srgb,var(--warn) 25%,transparent);color:var(--warn);margin-left:4px;vertical-align:middle}
#drawer a.it[aria-current=page] .bt{color:#0b1a07;background:rgba(0,0,0,.12)}

#drawer .lrow{display:flex;align-items:center;gap:14px;padding:10px 12px;font-weight:600}
#drawer .lrow .lt{flex:1}