:root{
  --bg:#0F1317;
  --sidebar:#141A1F;
  --card:#202934;
  --text:#fff;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --border:rgba(255,255,255,.08);
  --accent:#6EE7FF;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:280px;background:var(--sidebar);border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.sidebar-top{display:flex;flex-direction:column;gap:18px}
.logo{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.02)}
.logo-icon{font-size:24px}
.logo-title{font-weight:800}
.logo-sub{color:var(--muted2);font-size:12px;margin-top:2px}
.hello{padding:10px;border:1px solid var(--border);border-radius:var(--radius)}
.hello-small{color:var(--muted2);font-size:12px}
.hello-name{font-size:16px;font-weight:800;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:8px}
.nav-item{padding:10px 12px;border-radius:12px;border:1px solid transparent;color:var(--muted);transition:.15s}
.nav-item:hover{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text)}
.nav-item.active{background:rgba(110,231,255,.10);border-color:rgba(110,231,255,.25);color:var(--text)}
.sidebar-bottom .logout{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text)}
.main{flex:1;padding:22px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
h1{margin:0;font-size:22px}
.sub{color:var(--muted2);font-size:13px;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card-wide{grid-column:span 3}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-title{font-weight:900;font-size:14px}
.card-sub{color:var(--muted2);font-size:12px;margin-top:4px}
.pill{padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:12px;white-space:nowrap}
.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.bar{height:100%;background:linear-gradient(90deg,rgba(110,231,255,.9),rgba(110,231,255,.35));border-radius:999px;width:0%}
.meta{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:12px}
.mt{margin-top:14px}
.list{margin:10px 0 0 16px;color:var(--muted)}
.list li{margin:6px 0}
.input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);outline:none}
.input:focus{border-color:rgba(110,231,255,.35);box-shadow:0 0 0 4px rgba(110,231,255,.10)}
.input-sm{padding:10px;width:120px}
.btn{padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:.15s}
.btn:hover{background:rgba(255,255,255,.08)}
.btn-primary{border-color:rgba(110,231,255,.25);background:rgba(110,231,255,.12)}
.btn-ghost{background:transparent}
.btn-sm{padding:10px}
.year-switch{display:flex;gap:10px;align-items:center}
.auth-bg{background:radial-gradient(800px 400px at 30% 10%, rgba(110,231,255,.12), transparent 60%),radial-gradient(800px 400px at 70% 60%, rgba(255,255,255,.06), transparent 60%),var(--bg)}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:420px;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.brand-mark{font-size:26px}
.brand-title{font-weight:900}
.brand-sub{color:var(--muted2);font-size:12px;margin-top:2px}
.form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.label{font-size:12px;color:var(--muted)}
.alert{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.25);color:#ffd2d2;padding:10px 12px;border-radius:12px;font-size:13px}
.muted{color:var(--muted2);font-size:12px;margin-top:10px}
@media (max-width:980px){.sidebar{width:240px}.grid{grid-template-columns:1fr}.card-wide{grid-column:auto}}

/* Fix: Select-Optionen sichtbar machen (native dropdown) */
select.input { color-scheme: dark; }
select.input option {
  background: #ffffff;
  color: #111111;
}

/* Sidebar fixieren, nur Main scrollt */
body.app{
  height: 100vh;
  overflow: hidden;
}

.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  width: 280px; /* falls bei dir anders: anpassen */
}

.main{
  margin-left: 280px; /* muss zur Sidebar-Breite passen */
  height: 100vh;
  overflow-y: auto;
}


/* --- Neue Aufgabe einklappbar (ToDos) --- */
.btn-success{
  background: rgba(31,170,89,.18);
  border-color: rgba(31,170,89,.35);
}
.btn-success:hover{
  background: rgba(31,170,89,.26);
}

.newtask-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  pointer-events: none;
}
.newtask-panel.is-open{
  max-height: 1400px;
  opacity: 1;
  margin-top: 14px;
  pointer-events: auto;
}