/* =========================
   MOBILE HEADER / BURGER
========================= */

.burger{
  display:none;
  background:none;
  border:none;
  width:42px;
  height:42px;
  position:relative;
  cursor:pointer;
}

.burger span{
  position:absolute;
  left:8px;
  right:8px;
  height:3px;
  background:#0f172a;
  border-radius:3px;
  transition:.3s;
}

.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}

/* =========================
   MOBILE NAV
========================= */
@media(max-width:900px){

  .burger{
    display:block;
    z-index:10001;
  }

  .nav{
    position:fixed;
    inset:0;
    background:#ffffff;
    flex-direction:column;
    padding:120px 28px;
    gap:22px;
    transform:translateX(100%);
    transition:.4s ease;
    z-index:10000;
  }

  body.menu-open .nav{
    transform:translateX(0);
  }

  .nav a,
  .nav-parent{
    font-size:1.1rem;
    font-weight:800;
  }

  .nav-dropdown{
    width:100%;
  }

  .nav-sub{
    position:static;
    transform:none;
    background:#f8fafc;
    box-shadow:none;
    display:none;
  }

  .nav-dropdown.open .nav-sub{
    display:flex;
  }

  .listen-btn{
    display:none;
  }

  /* Header Infos kompakter */
  .header-now{
    display:none;
  }
}

/* =========================
   BURGER ANIMATION
========================= */
body.menu-open .burger span:nth-child(1){
  transform:rotate(45deg);
  top:19px;
}

body.menu-open .burger span:nth-child(2){
  opacity:0;
}

body.menu-open .burger span:nth-child(3){
  transform:rotate(-45deg);
  top:19px;
}