:root{
  --bg:#071A1E;
  --panel:#0C2A32;
  --panel-2:#0E3340;
  --text:#E6FAFF;
  --muted:#A8DDEB;
  --accent:#35D0E7; /* türkis */
  --accent-2:#6BB6FF; /* bläulich */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(53,208,231,.12), transparent),
              radial-gradient(1000px 500px at 100% 0%, rgba(107,182,255,.10), transparent),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}

.wrap{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(90deg, rgba(12,42,50,.85), rgba(14,51,64,.85));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; padding:14px 4px;
}

.logo{font-weight:800; letter-spacing:.5px; font-size:1.15rem}
.logo span{ 
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-left:.175rem;
}

.nav a{
  color:var(--text); text-decoration:none; margin-left:18px; font-weight:600; opacity:.9;
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  transition: all .25s ease;
}
.nav a:hover{ border-color: rgba(255,255,255,.12); transform: translateY(-1px) }

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(600px 300px at 10% 20%, rgba(53,208,231,.15), transparent),
    radial-gradient(500px 250px at 90% 10%, rgba(107,182,255,.12), transparent);
  padding:58px 0 42px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero h1{ font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem); margin:0 0 8px; }
.hero p{ color: var(--muted); margin:0 0 10px; }
.hero .meta{ color: #bfefff; opacity:.85; font-size:.95rem }

.bg-orb{
  position:absolute; border-radius:50%; filter: blur(45px);
  opacity:.55; pointer-events:none;
}
.orb-1{ width:260px; height:260px; right:10%; top:-80px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 55%); }
.orb-2{ width:200px; height:200px; left:8%; bottom:-60px; background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 60%); }
.orb-3{ width:320px; height:320px; right:-120px; bottom:-120px; background: radial-gradient(circle at 30% 30%, rgba(53,208,231,.55), transparent 60%); }

.content{
  display:grid; grid-template-columns: 280px 1fr; gap:22px; padding:28px 0 64px;
}

.toc h3{ margin:10px 0 8px }
.toc ol{ margin:0; padding-left:18px }
.toc a{ color:var(--text); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25) }
.toc a:hover{ color:var(--accent) }

.card{
  background: linear-gradient(180deg, rgba(12,42,50,.75), rgba(12,42,50,.62));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  border-radius:18px;
  padding:22px 22px;
}
.card h2{ margin-top:0 }
.card.tip{
  margin-top:18px;
  background:linear-gradient(180deg, rgba(14,51,64,.85), rgba(14,51,64,.7));
}

.doc .card + .card{ margin-top:22px }

h2, h3{ scroll-margin-top: 90px; }
h2{
  display:flex; align-items:center; gap:.5rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

ul{ margin:0 0 12px 0 }
ul li{ margin:6px 0 }

.contact-list{ list-style:none; padding-left:0 }
.contact-list li{ margin:6px 0 }

.note{
  margin-top:10px; font-size:.95rem; color:var(--muted);
  border-left:3px solid var(--accent);
  padding-left:10px;
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:26px 0; background:linear-gradient(90deg, rgba(12,42,50,.85), rgba(14,51,64,.85));
}
.site-footer small{ color:var(--muted) }

/* Responsive */
@media (max-width: 900px){
  .content{ grid-template-columns: 1fr; }
  .toc{ order:2 }
}

/* Smooth scroll & hover accents */
html{ scroll-behavior:smooth }
a{ transition: color .2s ease }
a:hover{ color: var(--accent) }