:root{
  --bg: #0f0f12;
  --fg: #e9eaee;
  --muted: #a6a8ad;
  --accent: #a30021;   /* Weinrot */
  --accent-2: #ff4757; /* heller Rot-Glow */
  --card: #17181c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:960px;margin:96px auto 64px;padding:0 20px}

/* Navbar */
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(15,15,18,.8);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid #222}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:14px 20px}
.brand{font-weight:800;letter-spacing:.3px}
.brand::first-letter{color:var(--accent)}
.nav-list{margin-left:auto;display:flex;gap:12px;list-style:none}
.nav-link{padding:10px 14px;border-radius:10px;color:var(--muted);transition:all .18s ease}
.nav-link:hover{color:var(--fg);background:var(--card)}
.nav-link.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(255,71,87,.24)}
.nav-toggle{display:none;margin-left:auto;font-size:20px;background:var(--card);color:var(--fg);border:0;border-radius:10px;padding:8px 10px}

/* Headings */
h1{font-size:2.2rem;margin:.2rem 0 1rem}
.accent{color:var(--accent);text-shadow:0 0 12px rgba(255,71,87,.25)}

/* Mobile */
@media (max-width:780px){
  .nav-toggle{display:block}
  .nav-list{position:absolute;top:58px;right:12px;left:12px;display:none;flex-direction:column;background:var(--card);border:1px solid #23252b;border-radius:14px;padding:8px}
  .nav-list.open{display:flex}
  .nav-link{padding:12px 14px}
  .container{margin-top:88px}
}