:root{ --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08); --transition:180ms ease; }
/* Light */
html[data-theme="light"]{
  --bg:#f6f7fb; --card:#fff; --text:#0f172a; --muted:#6b7280; --border:#e5e7eb;
  --accent:#2563eb; --accent-weak:#e8eefc; --tableHead:#0b1220;
}
/* Dark */
html[data-theme="dark"]{
  --bg:#0b1220; --card:#121a2b; --text:#f8fafc; --muted:#9aa3b2; --border:#1f2a44;
  --accent:#60a5fa; --accent-weak:#1b2b4f; --tableHead:#0b1220;
}

body{ background:var(--bg); color:var(--text); }
.container{ max-width:1100px; }
header{ padding:1rem 0; }
.brand{ font-weight:800; letter-spacing:.2px; }
nav ul{ align-items:center; }
.muted{ color:var(--muted); }

.grid{ display:grid; gap:1rem; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }
.kpi{ font-size:2rem; font-weight:800; }

.btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:#fff; border:none; border-radius:12px; padding:.7rem 1rem; cursor:pointer; transition:transform var(--transition),opacity var(--transition); }
.btn:active{ transform:scale(.99); }
.btn-outline{ background:transparent; color:var(--text); border:1px solid var(--border); }

select,input,textarea{ background:var(--card); color:var(--text); border-color:var(--border); border-radius:12px; }

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:.7rem .6rem; border-bottom:1px solid var(--border); text-align:left; }
.table thead th{ background:var(--tableHead); color:#fff; border-bottom:none; }

.pill{ padding:.2rem .6rem; border-radius:999px; background:var(--accent-weak); font-size:.85rem; }
.chart{ width:100%; height:120px; color:var(--accent); }

/* Form-Layout: Label oben, Feld darunter */
.form-grid{ display:grid; gap:.8rem; }
.form-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:960px){ .form-grid.cols-2{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.25rem; }
.field>span{ font-size:.9rem; color:var(--muted); }

/* Theme-Toggle */
.theme-toggle{ display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:1px solid var(--border); padding:.5rem .8rem; border-radius:12px; cursor:pointer; color:var(--text); }