:root{
  --bg:#0b0f17; --bg-elev:#0f1521; --brand:#7c3fca; --brand2:#36b8b8;
  --text:#dbe1ef; --muted:#a9b1c6; --line:#20283a; --white:#fff;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --header-h:68px; /* JS setzt exakte Höhe */
}

/* Basics */
*{box-sizing:border-box} html,body{height:100%}
body.site{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(124,63,202,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(54,184,184,.12), transparent 50%),
    var(--bg);
}
.no-scroll{overflow:hidden}
.container{width:min(1200px,92%); margin:0 auto}

/* Header + Nav */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,23,.7); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__bar{display:flex; align-items:center; justify-content:space-between; min-height:68px}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--white); font-weight:700}
.brand__mark{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--shadow-soft); font-size:16px}
.brand__text{font-size:1.05rem}

/* Desktop-Links */
.nav{position:relative}
.nav__list{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.nav__list--desktop{display:none}
.nav__link{display:inline-block; padding:.52rem .78rem; border-radius:10px; text-decoration:none; color:var(--text); transition:.2s}
.nav__link:hover{background:rgba(124,63,202,.12); color:var(--white)}
.nav__link--active{color:var(--white); background:linear-gradient(135deg, rgba(124,63,202,.16), rgba(54,184,184,.14)); border:1px solid rgba(124,63,202,.25)}

/* Burger (36x36) + fehlerfreie X-Animation via body.nav-open */
.burger{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.burger:hover{background:rgba(124,63,202,.08); border-color:rgba(124,63,202,.4)}
.burger__line{display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .2s, translate .25s}
.burger .l1{transform-origin:10% 50%; translate:0 -6px}
.burger .l2{transform-origin:50% 50%}
.burger .l3{transform-origin:10% 50%; translate:0 6px}

/* Zustand offen */
body.nav-open .burger .l1{transform:rotate(45deg); translate:0 0}
body.nav-open .burger .l2{opacity:0}
body.nav-open .burger .l3{transform:rotate(-45deg); translate:0 0}

/* Mobiles Panel: ab Unterkante Header bis unten, slidet von oben nach unten */
.mobile-panel{
  position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
  background:rgba(11,15,23,.97); border-bottom:1px solid var(--line);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); transition:transform .28s ease; z-index:90;
}
.mobile-panel.is-open{transform:translateY(0)}
.nav__list--mobile{flex-direction:column; gap:.4rem; padding:14px 6% 28px}

/* Overlay unterhalb Header */
.scrim{
  position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
  background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:80;
}
.scrim.is-visible{opacity:1; pointer-events:auto}

/* Desktop */
@media (min-width:980px){
  .nav__list--desktop{display:flex}
  .burger, .mobile-panel, .scrim{display:none}
}

/* Hero & UI */
.hero{position:relative; padding:clamp(56px,8vw,96px) 0}
.hero__inner{text-align:center}
.hero__title{font-size:clamp(1.8rem,3.8vw,3rem); line-height:1.15; margin:0 0 .8rem}
.hero__subtitle{margin:0 auto 1.6rem; max-width:860px; color:var(--muted)}
.hero__gradient{position:absolute; inset:-20px 0 auto; height:220px;
  background:radial-gradient(600px 200px at 50% 0%, rgba(124,63,202,.22), transparent 60%),
             radial-gradient(500px 180px at 70% 0%, rgba(54,184,184,.18), transparent 60%)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.1rem; border-radius:12px; text-decoration:none; border:1px solid transparent; font-weight:600; box-shadow:var(--shadow-soft); transition:.2s}
.btn--primary{color:#fff; background:linear-gradient(135deg, rgba(124,63,202,.9), rgba(54,184,184,.9)); border-color:rgba(124,63,202,.6)}
.btn--primary:hover{background:linear-gradient(135deg, rgba(124,63,202,1), rgba(54,184,184,1))}
.section{padding:48px 0 72px}
.grid-3{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; box-shadow:var(--shadow)}
.card__title{margin:0 0 .4rem; font-size:1.2rem}
.card__text{margin:0 0 .8rem; color:var(--muted)}
.card__link{color:#fff; text-decoration:none; font-weight:600}
.card__link:hover{text-decoration:underline}

/* Footer */
.site-footer{margin-top:auto; border-top:1px solid var(--line); background:linear-gradient(0deg, rgba(12,18,32,1) 0%, rgba(12,18,32,.85) 100%)}
.footer-primary{padding:42px 0}
.footer__grid{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:760px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__title{margin:0 0 .6rem; font-size:1rem}
.footer__text{margin:0; color:var(--muted)}
.footer__links{list-style:none; margin:0; padding:0}
.footer__links a{display:inline-block; padding:.25rem 0; color:var(--text); text-decoration:none}
.footer__links a:hover{color:#fff; text-decoration:underline}
.newsletter{display:grid; grid-template-columns:1fr auto; gap:.5rem}
.input{width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:#0c1220; color:var(--text)}
.input:focus{border-color:rgba(124,63,202,.6); box-shadow:0 0 0 3px rgba(124,63,202,.2)}
.footer-secondary{border-top:1px solid var(--line); background:#0b0f17}
.footer-secondary__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0; color:var(--muted)}
.footer-secondary__link{color:var(--text); text-decoration:none}
.footer-secondary__link:hover{color:#fff; text-decoration:underline}

/* A11y helper (nur visuell, kein aria) */
.sr-only{position:absolute; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}