:root{
  --bg:#0b0f14; --panel:#0e141b; --text:#e8f1ff; --muted:#9bb2c8;
  --a1:#00d1ff; --a2:#7b61ff; --a3:#00ff85; --a4:#ff3fd8;
  --radius:16px; --shadow:0 12px 48px rgba(0,0,0,.5),0 0 30px rgba(0,209,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font:16px/1.65 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 12% -10%,rgba(0,209,255,.10),transparent),
    radial-gradient(900px 600px at 85% 110%,rgba(0,255,133,.10),transparent),
    radial-gradient(800px 500px at 80% 10%,rgba(255,63,216,.06),transparent),
    var(--bg);
}

/* Layout */
.container{width:min(1100px,92%);margin:0 auto}
h1,h2,h3{letter-spacing:.2px}
p{margin:.6em 0}
.lead{font-size:1.1rem;color:#d8e6ff}

/* NAVBAR */
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px);
  background:linear-gradient(180deg,rgba(11,15,20,.75),rgba(11,15,20,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;gap:14px;padding:10px 0}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;object-fit:contain;border-radius:10px;box-shadow:0 0 18px rgba(0,209,255,.25)}
.brand{font-weight:900;letter-spacing:.6px}
.spacer{flex:1}

/* NAV Buttons */
.nav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  color:var(--text); text-decoration:none; font-weight:700; opacity:.92;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:var(--shadow); transition:transform .08s ease, opacity .15s ease, box-shadow .2s ease;
}
.nav-btn:hover{opacity:1; transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 20px rgba(0,209,255,.15)}
.nav-btn.primary{
  border:none; color:#00121a;
  background:linear-gradient(90deg,var(--a1),var(--a2),var(--a4),var(--a3)); background-size:300% 100%;
}
.nav-btn.primary:hover{animation:flow 3s linear infinite}

/* Language Switch */
.switch{
  --w:58px; --h:30px;
  position:relative; width:var(--w); height:var(--h); border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); cursor:pointer;
}
.switch .knob{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px;
  background:linear-gradient(180deg,#fff,#d7f7ff); color:#00121a; font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; transition:left .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 16px rgba(0,209,255,.35);
}
.switch.active .knob{ left: calc(var(--w) - 27px);}

/* HERO Banner (Parallax) */
/* WICHTIG: Pfad korrekt relativ zur CSS-Datei! */
.hero{
  position:relative; height:52vh; min-height:420px; display:flex; align-items:flex-end;
  border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background: center/cover no-repeat url('banner.jpg'); /* <-- FIX: nicht 'assets/banner.jpg' */
  transform:scale(1.08); transition:transform .2s ease, filter .2s ease, opacity .2s ease;
}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%, rgba(11,15,20,.9) 80%);}
.hero-content{
  position:relative; z-index:2; padding:38px 0 28px; width:100%;
  text-align:center; display:flex; flex-direction:column; align-items:center; /* <-- zentriert */
}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.4rem); margin:0 0 12px}
.hero .lead{max-width:900px}

/* Sections / Cards */
section{padding:56px 0}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.small{color:var(--muted)}
footer{padding:38px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);margin-top:30px}

/* Responsive */
@media (max-width:950px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .hero{height:44vh}}
@keyframes flow{0%{background-position:0% 50%}100%{background-position:100% 50%}}