:root {
  --sb-accent: #567a3c;
  --sb-accent-dark: #435f2f;
  --sb-navy: #202944;
  --sb-border: #dee2e6;
  --sidebar-w: 230px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
}

body {
  background: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
}

a { color: var(--sb-accent-dark); }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: #fff;
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  min-height: var(--topbar-h);
}
.sidebar-brand img { height: 38px; width: auto; }
.sidebar-brand strong { font-size: .95rem; color: var(--sb-navy); display: block; }
.sidebar-brand small { font-size: .72rem; color: #888; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #222;
  text-decoration: none;
  font-size: .9rem;
  border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(86,122,60,.08); color: #111; text-decoration: none; }
.sidebar-link.active { background: rgba(86,122,60,.12); color: var(--sb-navy); font-weight: 600; border-left-color: var(--sb-accent); }
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--sb-accent-dark); }
.sidebar-divider { height: 1px; background: rgba(0,0,0,.08); margin: 8px 12px; }

/* Aufklappbare Seiten-Gruppen (Seebach Wartburgkreis / Klubhaus / Wohnungsverwaltung) */
.sidebar-item { position: relative; }
.sidebar-link[data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .2s; }
.sidebar-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(-180deg); }
.sidebar-submenu { background: rgba(0,0,0,.02); }
.sidebar-submenu .sidebar-link { padding-left: 30px; font-size: .85rem; }

.sidebar-footer { border-top: 1px solid rgba(0,0,0,.08); padding: 10px 14px; font-size: .85rem; }
.sidebar-footer .user-name { font-weight: 600; color: var(--sb-navy); display: block; }
.sidebar-footer a { font-size: .82rem; }

/* ── Topbar & Content ────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; right: 0; left: var(--sidebar-w);
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  z-index: 1030;
}

#main-content {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 24px) 24px 40px;
}

.page-title { color: var(--sb-navy); font-weight: 700; }

.btn-sb { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.btn-sb:hover { background: var(--sb-accent-dark); border-color: var(--sb-accent-dark); color: #fff; }

.card { border: 1px solid var(--sb-border); }
.badge-platzhalter { background: #fff4d6; color: #6b5a12; }
.badge-entwurf { background: #e2e3e5; color: #383d41; }
.badge-veroeffentlicht { background: #d4edda; color: #155724; }

.table > :not(caption) > * > * { vertical-align: middle; }

@media (max-width: 900px) {
  #sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  #sidebar.mobile-open { transform: translateX(0); }
  #topbar { left: 0; }
  #main-content { margin-left: 0; }
}