:root{
  --bg:#0d1117; --grid:#1b2331; --card:#0f1623;
  --text:#e8f1ff; --muted:#a6b3c6; --brand:#0CE277;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(5,8,12,.55); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid #1e2a3a;
}
.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:#cfe5ff;text-decoration:none;font-size:14px}
.nav .cta{background:var(--brand);color:#042113;padding:8px 12px;border-radius:10px;font-weight:700}
.nav-more{position:relative}
.nav-btn{background:transparent;color:#cfe5ff;border:0;font:inherit;cursor:pointer;padding:6px 4px}
.nav-menu{position:absolute;top:28px;left:0;min-width:180px;display:none;background:#0c1420;border:1px solid #1e2a3a;border-radius:10px;padding:6px}
.nav-menu.open{display:block}
.nav-menu a{display:block;padding:8px 10px;border-radius:8px}
.nav-menu a:hover{background:#111b29}

.hero{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:28px;
  padding:48px 20px; align-items:center;
  background:
    radial-gradient(900px 280px at 70% 0%, rgba(12,226,119,.14), transparent 55%),
    radial-gradient(600px 240px at 20% 0%, rgba(12,226,119,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 160px);
}
.hero-copy .eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#ffd394;font-weight:700;font-size:12px}
.hero-copy h1{font-size:clamp(28px,4.8vw,52px);line-height:1.05;margin:10px 0 10px}
.hero-copy .sub{color:var(--muted);max-width:52ch}
.actions{display:flex;gap:10px;margin:16px 0}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;border:1px solid #223049}
.btn.primary{background:var(--brand);color:#082313;border-color:transparent}
.btn.ghost{color:#cfe5ff;background:#0f1725}
.hint{color:#8aa0bb;font-size:12px}

/* 3D-Container: NIE 0px Höhe */
.hero-3d{
  width:min(560px,44vw);
  aspect-ratio: 4 / 5;
  height: 560px; /* Feste Fallback-Höhe */
  border-radius:16px; overflow:hidden;
  border:1px solid #1e2b3c;
  background:
    radial-gradient(600px 200px at 70% 10%, rgba(12,226,119,.10), transparent 60%),
    radial-gradient(1px 1px at 25px 25px, var(--grid) 1px, transparent 1px);
  background-size:100% 100%, 50px 50px;
  position:relative;
}

/* Overlay für Debug/Fehler */
.hero-3d .overlay{
  position:absolute; right:12px; bottom:12px;
  background:#121a28; color:#e8f1ff;
  border:1px solid #223049; padding:8px 10px; border-radius:8px;
  font:12px system-ui; max-width:78%; opacity:.95
}
.hero-3d .overlay.error{color:#ffb3b3;border-color:#3b2121}

.section{padding:48px 20px;border-top:1px solid #142030}
.section h2{margin:0 0 10px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;margin:12px 0 0;list-style:none}
.feature-grid li{background:#0f1623;border:1px solid #1e2a3a;border-radius:12px;padding:12px}

.footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 20px;border-top:1px solid #142030;color:#9cb2cc
}
.footer a{color:#9cb2cc;text-decoration:none}
.footer .links{display:flex;gap:12px}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:22px}
  .hero-3d{width:100%;height:520px;aspect-ratio:auto}
}