:root{
  --bg:#0e0f11; --panel:#1a1e24; --muted:#0d1117; --accent:#60a5fa;
  --text:#e5e7eb; --text-dim:#9ca3af; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --bezel:#0b0c0f; --bezel-outer:#0a0b0d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:linear-gradient(180deg, var(--bezel-outer), var(--bg)); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;}
.center{display:grid; place-items:center; min-height:100dvh; padding:24px}
.tablet {
    width: 98vw;          /* Nutzt fast die gesamte Breite des Bildschirms */
    height: 96vh;         /* Nutzt fast die gesamte Höhe */
    aspect-ratio: auto;   /* Schaltet das feste 3/2 Verhältnis ab, damit height greift */
    border-radius: 28px; 
    padding: 18px; 
    background: radial-gradient(120% 120% at 10% 10%, #111318, #08090c); 
    box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 2px #0f1217, inset 0 0 0 6px #040507; 
    position: relative;
}
.camera-notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:var(--bezel); border-radius:12px; box-shadow: inset 0 0 0 2px #0f1217;}
.screen{position:absolute; inset:18px; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, #0d1015, #0a0c10); box-shadow: inset 0 0 0 1px #151922; display:flex; flex-direction:column;}
.topbar{height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #1f2430; background:rgba(12,14,18,.7); backdrop-filter:saturate(180%) blur(8px);}
.brand{font-weight:600; letter-spacing:.3px}
.status{font-size:12px; color:var(--text-dim)}
.main{flex:1; display:flex; min-height:0}
.sidebar {
    width: 220px; 
    border-right: 1px solid #1f2430; 
    background: linear-gradient(180deg, #0f1319, #0d1117); 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    padding: 12px 10px;
    
    /* NEU: Scroll-Logik */
    overflow-y: auto;       /* Zeigt Scrollbalken nur wenn nötig */
    overflow-x: hidden;     /* Verhindert horizontales Wackeln */
    flex-shrink: 0;         /* Verhindert, dass die Sidebar schrumpft */
}

/* Optional: Damit der Scrollbalken dezent aussieht (Webkit/Chrome/Edge) */
.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
@media(max-width:840px){.sidebar{width:72px}}
.navbtn{width:100%; min-height:44px; border-radius:14px; display:flex; align-items:center; gap:10px; cursor:pointer; background:#0c1016; border:1px solid #151a22; transition:.15s ease; padding:10px 12px; font-weight:600; color:var(--text); text-decoration:none;}
.navbtn .ico{font-size:20px; width:24px; text-align:center}
.navbtn .navtxt{opacity:.9}
@media(max-width:840px){.navbtn .navtxt{display:none}}
.navbtn[aria-current="page"], .navbtn:hover{border-color:#2a3342; box-shadow:0 0 0 2px #202634 inset}
.navbtn.active,.navbtn[aria-current="page"]{outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(96,165,250,.25), inset 0 0 0 1px rgba(96,165,250,.25)}
.content{flex:1; padding:16px; overflow:auto; display:grid; gap:16px}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, #121722, #0f141d); border:1px solid #1e2735; border-radius:16px; padding:16px;}
.card h3{margin:.2rem 0 .6rem; font-size:16px}
.card p{margin:.2rem 0; color:var(--text-dim)}
.btn{background:linear-gradient(180deg, #1a2332, #151c28); border:1px solid #2a3342; color:var(--text); border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; transition:.15s}
.btn:hover{filter:brightness(1.1)}
.input{width:100%; background:#0b1016; border:1px solid #1d2532; color:var(--text); padding:12px 12px; border-radius:12px}
.input:focus{outline:2px solid var(--accent)}
.form-row{display:grid; gap:8px}
.row{display:flex; gap:8px; align-items:center}
.kpi{font-size:28px; font-weight:700}
.badge{padding:4px 8px; background:#101827; border:1px solid #1f2937; border-radius:999px; font-size:12px; color:var(--text-dim)}
.footer{padding:8px 12px; font-size:12px; color:var(--text-dim); border-top:1px solid #1f2430; display:flex; justify-content:space-between}
.small{font-size:12px; color:var(--text-dim)}
.logo{font-weight:800; font-size:20px}
.login-wrap{max-width:420px; width:100%; padding:16px}