header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,11,18,.85), rgba(7,11,18,.55));
  border-bottom: 1px solid #f1d38a26;
  padding-left: 20px;
}

/* Desktop: Brand links, Nav rechts (eine Reihe) */
.header-inner{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap:18px;
  padding:14px 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-self:start;
}

.brand-logo-video{
  height:46px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
  border-radius: 6px;
}
.brand-wordmark{
  height:36px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}

/* Nav rechts */
.nav{
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* Burger (Desktop unsichtbar) */
.nav-toggle{
  display:none;
  justify-self:end;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  padding:10px;
}
.nav-toggle span{
  display:block;
  height:2px;
  margin:6px 0;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}

/* Mobile: Brand links, Burger rechts, Nav Dropdown */
@media (max-width: 860px){
  .header-inner{
    grid-template-columns: 1fr auto;
    gap:12px;
  }
  .brand{ justify-self:start; gap:10px; }
  .brand-logo-video{ height:44px; }
  .brand-wordmark{ height:30px; }

  .nav-toggle{ display:block; }

  .nav{
    display:none;
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(7,11,18,.75);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
  }
  .nav.is-open{
    display:flex;
    flex-direction: column;
    gap:10px;
  }
  .nav .pill{ width:100%; text-align:center; }
}