:root{--bg:#f6f7fb;--card:#fff;--text:#111;--muted:#666;--pri:#2563eb;--pri-600:#1e40af;--ok:#16a34a;--err:#dc2626}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
h1,h2,h3{margin:16px 0}
a{color:var(--pri);text-decoration:none}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 4px 18px rgba(0,0,0,.06);margin:16px 0}
label{display:block;margin:12px 0;color:var(--muted)}
input,select,textarea{width:100%;padding:12px;border:1px solid #dfe3ea;border-radius:10px;background:#fff}
textarea{min-height:120px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:#e5e7eb;color:#111}
.btn.primary{background:var(--pri);color:#fff}
.btn.danger{background:var(--err);color:#fff}
.alert{padding:12px;border-radius:10px;margin:12px 0}
.alert.success{background:#ecfdf5;color:#065f46}
.alert.error{background:#fef2f2;color:#991b1b}
.nav{display:flex;gap:10px;margin:10px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
header.app{background:#fff;border-bottom:1px solid #eee}
header.app .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{font-weight:700}
/* ---- Sidebar Layout ---- */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background:#f8fafc;
}

.sidebar {
  position: sticky; top: 0;
  align-self: start;
  height: 100dvh;
  border-right: 1px solid #e5e7eb;
  background:#ffffff;
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 12px;
}

.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 12px; background:#f1f5f9;
}
.side-logo { font-size: 20px; }
.side-title { font-weight: 700; }

.side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  color:#0f172a; transition: background .15s ease, color .15s ease;
}
.side-link:hover { background:#f1f5f9; }
.side-link.active { background:#e0e7ff; color:#111827; font-weight: 600; }

.side-footer { margin-top: auto; border-top:1px solid #e5e7eb; padding-top:12px; }

.nav-ic { width: 18px; text-align: center; }

.main {
  padding: 20px 24px;
}

/* Bestehende .container/.card etc. kannst du weiterverwenden */
@media (max-width: 920px) {
  .layout { grid-template-columns: 80px 1fr; }
  .side-title, .side-link span { display: none; }
  .side-link { justify-content: center; }
  .side-brand { justify-content: center; }
}
/* Topbar enger machen statt inline style="margin:..." */
.topbar--tight { margin: -8px -12px 12px -12px; }

/* Optional: disabled-Select optisch absetzen */
select:disabled { background: #f3f4f6; color: #9ca3af; }