:root{
  --bg:#070810; --panel:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
  --txt:#eef1ff; --muted:#9297b6; --acc:#7c5cff; --acc2:#00e5ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);min-height:100vh}
a{text-decoration:none;color:inherit}

.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;
  padding:16px clamp(16px,4vw,42px);background:rgba(7,8,16,.8);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.16em;font-size:15px}
.logo{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#070810;
  background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 22px rgba(124,92,255,.5)}

.menu{display:flex;gap:6px;margin-left:20px}
.item{position:relative}
.trigger{display:flex;align-items:center;gap:8px;padding:12px 18px;border:none;background:none;
  color:var(--muted);font-family:inherit;font-size:15px;font-weight:500;border-radius:12px;
  cursor:pointer;transition:.3s}
.trigger:hover,.item.open .trigger{color:var(--txt);background:rgba(255,255,255,.07)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:.35s cubic-bezier(.34,1.56,.64,1)}
.item.open .caret{transform:rotate(-135deg) translateY(-2px)}

/* Mega-Panel */
.mega{position:absolute;top:calc(100% + 14px);left:-40px;display:grid;
  grid-template-columns:repeat(3, minmax(150px,190px)) minmax(220px,280px);gap:20px;
  width:max-content;max-width:calc(100vw - 40px);padding:24px;border-radius:22px;
  background:rgba(11,12,26,.97);border:1px solid var(--line);backdrop-filter:blur(24px);
  box-shadow:0 40px 90px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-14px) scale(.97);transform-origin:top left;
  transition:.4s cubic-bezier(.2,.8,.2,1)}
.mega.small{grid-template-columns:repeat(3, minmax(160px,240px))}
.item.open .mega{opacity:1;visibility:visible;transform:none}
/* Verbindungslücke schließen */
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}

.col h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.col a{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;font-size:14.5px;
  color:var(--muted);transition:.3s;opacity:0;transform:translateX(-10px)}
.item.open .col a{animation:colIn .4s cubic-bezier(.2,.8,.2,1) forwards}
.col a:nth-child(2){animation-delay:.05s}.col a:nth-child(3){animation-delay:.1s}
.col a:nth-child(4){animation-delay:.15s}.col a:nth-child(5){animation-delay:.2s}
@keyframes colIn{to{opacity:1;transform:none}}
.col a span{color:var(--acc);transition:.3s}
.col a:hover{background:rgba(124,92,255,.16);color:var(--txt);transform:translateX(5px)}
.col a:hover span{transform:translateX(3px)}
.tip{font-size:14px;color:var(--muted);line-height:1.7}
kbd{font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:7px;
  background:#070810;border:1px solid var(--line);border-bottom-width:2px;color:var(--acc2)}

.featured{position:relative;border-radius:18px;overflow:hidden;display:block;align-self:start;
  transition:.4s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--line)}
.featured img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:.7s}
.featured:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(124,92,255,.4);border-color:var(--acc)}
.featured:hover img{transform:scale(1.08)}
.featured div{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 15px;
  background:linear-gradient(to top,rgba(6,6,16,.96),transparent)}
.badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em;padding:4px 10px;
  border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#070810;margin-bottom:8px}
.featured b{display:block;font-size:16px}
.featured small{color:#c3c8e6;font-size:12.5px}

.actions{display:flex;gap:10px;margin-left:auto;align-items:center}
.cta,.ghost{padding:12px 22px;border-radius:13px;font-family:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;transition:.3s}
.cta{border:none;color:#070810;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(124,92,255,.5)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.ghost:hover{border-color:var(--acc2)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer}
.burger i{width:18px;height:2px;background:var(--txt);transition:.35s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Content */
.hero{min-height:64vh;display:grid;place-content:center;text-align:center;padding:60px 18px;
  background:radial-gradient(700px 420px at 50% 10%, rgba(0,229,255,.2), transparent 70%)}
.tag{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:8px 16px;border-radius:99px;background:var(--panel);justify-self:center}
.hero h1{font-size:clamp(38px,8vw,80px);letter-spacing:-.03em;margin:22px 0 14px}
.hero h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:clamp(15px,2.4vw,17.5px);max-width:62ch;margin:0 auto}
.try{margin-top:28px;padding:15px 30px;border-radius:15px;border:none;font-family:inherit;font-weight:700;
  font-size:15px;color:#070810;background:linear-gradient(90deg,var(--acc),var(--acc2));cursor:pointer;transition:.3s}
.try:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(124,92,255,.55)}
.filler{padding:90px clamp(18px,6vw,70px);text-align:center}
.filler.alt{background:linear-gradient(180deg,transparent,rgba(0,229,255,.08),transparent)}
.filler h2{font-size:clamp(26px,5vw,40px);margin-bottom:12px}
.filler p{color:var(--muted)}

@media (max-width:860px){
  .burger{display:flex}
  .ghost{display:none}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;margin:0;padding:12px;
    background:rgba(9,10,22,.98);border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .trigger{width:100%;justify-content:space-between;padding:16px}
  .mega{position:static;grid-template-columns:1fr;gap:6px;width:auto;max-width:none;margin-top:6px;
    padding:8px 8px 14px;box-shadow:none;background:rgba(255,255,255,.04);
    opacity:1;visibility:visible;transform:none;display:none}
  .item.open .mega{display:grid;animation:accIn .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .featured{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}