/* ============ Basislayout ============ */
:root {
  --brand-brown: #5e4a2f;
  --brand-accent: #0ea5a6;
  --card-bg: #ffffff;
}

html, body {
  margin:0;
  padding:0;
  font-family:system-ui,Arial,sans-serif;
  background:#faf9f7;
  color:#4c3b28;
}

.layout {
  display:flex;
  min-height:100vh;
}

/* ============ Sidebar ============ */
.sidebar {
  background:#f6f3ef;
  border-right:1px solid #e0d8cc;
  width:240px;
  padding:20px 12px;
  box-sizing:border-box;
}

.sidebar .brand {
  text-align:center;
  margin-bottom:20px;
}

.sidebar .brand img {
  max-width:100%;
  height:auto;
}

.sidebar nav ul.nav {
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar nav ul.nav li {
  margin-bottom:8px;
}

.sidebar nav ul.nav li a {
  display:block;
  padding:10px 14px;
  color:#4c3b28;
  text-decoration:none;
  border-radius:6px;
  transition:background .2s ease,color .2s ease;
}

.sidebar nav ul.nav li a:hover {
  background:#ede8e2;
  color:#000;
}

/* ============ Hauptbereich ============ */
main {
  flex:1;
  padding:20px;
  box-sizing:border-box;
}

/* ============ Kartenstil ============ */
.card {
  background:var(--card-bg);
  border:1px solid #e7e0cf;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.card h2,
.card h3 {
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid #eadfc8;
  color:var(--brand-brown);
}

.card .body {
  padding:14px 16px;
}

/* ============ Buttons ============ */
.btn {
  background:var(--brand-accent);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  display:inline-block;
  text-decoration:none;
}

.btn:hover {
  filter:brightness(.95);
}

.btn.secondary {
  background:#fff;
  color:var(--brand-brown);
  border:1px solid #d9c7a6;
}

/* ============ Listen / Texte ============ */
ul {
  padding-left:18px;
}

ul li {
  margin:6px 0;
}

/* ============ Tabellenlinien ============ */
hr {
  border:none;
  border-top:1px solid #eadfc8;
  margin:10px 0;
}

/* ============ Responsive ============ */
@media (max-width:980px){
  .layout {
    flex-direction:column;
  }
  .sidebar {
    width:100%;
    border-right:none;
    border-bottom:1px solid #e0d8cc;
  }
}

/* ============ Aktiver Link Sidebar ============ */
/* Neu hinzugefügt – sorgt dafür, dass ALLE aktiven Menüpunkte hell hinterlegt werden */
.sidebar .nav li.active a,
.sidebar .nav li a[aria-current="page"] {
  background:#fff;
  color:var(--brand-brown);
  font-weight:600;
  border-radius:8px;
}