:root{
  --bg:#0f172a;
  --text:#f1f5f9;
  --muted:#cbd5e1;
  --header:#1e293b;
  --card:#1e293b;
  --border:rgba(255,255,255,0.10);
  --accent:#3b82f6;
  --whats:#25D366;

  --nav-text:#cbd5e1;
  --nav-hover-bg:rgba(59,130,246,0.16);
  --nav-hover-text:#ffffff;
  --nav-active-bg:linear-gradient(135deg,#3b82f6,#22c55e);
  --nav-active-text:#ffffff;
}

body.theme-light{
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#334155;
  --header:#ffffff;
  --card:#ffffff;
  --border:rgba(15,23,42,0.12);
  --accent:#2563eb;

  --nav-text:#334155;
  --nav-hover-bg:rgba(37,99,235,0.12);
  --nav-hover-text:#0f172a;
  --nav-active-bg:linear-gradient(135deg,#2563eb,#16a34a);
  --nav-active-text:#ffffff;
}

body{
  background:var(--bg);
  color:var(--text);
  transition: background 0.2s ease, color 0.2s ease;
}

header{
  background:var(--header);
  transition: background 0.2s ease;
}

p, li{
  color:var(--muted);
}

/* Logo */
.brand-logo{
  width:56px;
  height:56px;
  margin-right:12px;
  display:block;
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-origin:center;
}

.brand:hover .brand-logo{
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

/* Navigation hübscher, ohne dein Layout zu zerstören */
nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

nav a{
  color:var(--nav-text);
  text-decoration:none;
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

nav a:hover{
  background:var(--nav-hover-bg);
  color:var(--nav-hover-text);
  box-shadow:0 4px 14px rgba(0,0,0,0.15);
  transform:translateY(-1px);
}

nav a.active{
  background:var(--nav-active-bg);
  color:var(--nav-active-text);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* Theme Toggle */
.theme-toggle{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover{
  transform: scale(1.05);
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
}

/* Footer */
footer{
  background:var(--header);
  transition: background 0.2s ease;
}

/* WhatsApp Button */
.whatsapp-float{
  background:var(--whats);
}