.bs-header{
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
  background:rgba(248,246,242,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .35s ease, box-shadow .35s ease;
}

.bs-header.scrolled{
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}

.bs-header-inner{
  max-width:1600px;
  margin:0 auto;
  padding:20px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  transition:padding .35s ease;
}

.bs-header.scrolled .bs-header-inner{
  padding:11px 42px;
}

.bs-logo{
  position:relative;
  z-index:10002;
  display:inline-flex;
  align-items:center;
}

.bs-logo img{
  height:72px;
  width:auto;
  display:block;
  transition:height .35s ease;
}

.bs-header.scrolled .bs-logo img{
  height:58px;
}

.bs-nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.bs-nav a{
  position:relative;
  text-decoration:none;
  color:#2B2B2B;
  font-family:Jost,Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:8px;
  transition:color .3s ease;
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
}

.bs-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,#B79B6C,transparent);
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}

.bs-nav a:hover,
.bs-nav a.is-active{
  color:#B79B6C;
}

.bs-nav a:hover::after,
.bs-nav a.is-active::after{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
}

.bs-nav .bs-cta{
  margin-left:8px;
  padding:13px 26px;
  background:#241A13;
  color:#fff !important;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
  transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.bs-nav .bs-cta::after{
  display:none;
}

.bs-nav .bs-cta:hover{
  background:#3A2A20;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.18) !important;
}

.bs-menu-toggle{
  display:none;
}

@media(max-width:1200px){
  .bs-header-inner{
    padding:18px 24px;
  }

  .bs-header.scrolled .bs-header-inner{
    padding:10px 24px;
  }

  .bs-nav{
    gap:18px;
  }

  .bs-nav a{
    font-size:11px;
  }

  .bs-logo img{
    height:58px;
  }

  .bs-header.scrolled .bs-logo img{
    height:48px;
  }
}

@media(max-width:980px){
  body.bs-menu-open{
    overflow:hidden;
  }

  .bs-header-inner,
  .bs-header.scrolled .bs-header-inner{
    padding:14px 20px;
    flex-direction:row;
    align-items:center;
  }

  .bs-logo img,
  .bs-header.scrolled .bs-logo img{
    height:54px;
  }

  .bs-menu-toggle{
    display:inline-flex;
    position:relative;
    z-index:10002;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(183,155,108,.36);
    border-radius:999px;
    background:rgba(255,255,255,.58);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    cursor:pointer;
    box-shadow:0 12px 28px rgba(36,26,19,.08);
  }

  .bs-menu-toggle span{
    position:absolute;
    width:20px;
    height:1.5px;
    background:#2B2B2B;
    border-radius:99px;
    transition:transform .35s ease, opacity .25s ease, top .35s ease;
  }

  .bs-menu-toggle span:nth-child(1){
    top:17px;
  }

  .bs-menu-toggle span:nth-child(2){
    top:23px;
  }

  .bs-menu-toggle span:nth-child(3){
    top:29px;
  }

  .bs-header.menu-open .bs-menu-toggle span:nth-child(1){
    top:23px;
    transform:rotate(45deg);
  }

  .bs-header.menu-open .bs-menu-toggle span:nth-child(2){
    opacity:0;
  }

  .bs-header.menu-open .bs-menu-toggle span:nth-child(3){
    top:23px;
    transform:rotate(-45deg);
  }

  .bs-nav{
    position:fixed;
    inset:0;
    z-index:10001;
    width:100%;
    min-height:100vh;
    padding:112px 26px 34px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    background:
      radial-gradient(circle at top left, rgba(183,155,108,.18), transparent 34%),
      linear-gradient(135deg, rgba(250,247,242,.98), rgba(240,234,224,.98));
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transform:translateX(100%);
    opacity:0;
    pointer-events:none;
    transition:transform .45s cubic-bezier(.22,.8,.22,1), opacity .35s ease;
    overflow-y:auto;
  }

  .bs-header.menu-open .bs-nav{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  .bs-nav a{
    width:100%;
    padding:18px 4px;
    border-bottom:1px solid rgba(58,46,34,.1) !important;
    font-family:Cormorant Garamond,Georgia,serif;
    font-size:30px;
    font-weight:300;
    letter-spacing:.02em;
    text-transform:none;
    color:#3A2E22;
    opacity:0;
    transform:translateY(14px);
  }

  .bs-header.menu-open .bs-nav a{
    opacity:1;
    transform:translateY(0);
    transition:opacity .45s ease, transform .45s ease, color .3s ease;
  }

  .bs-header.menu-open .bs-nav a:nth-child(1){transition-delay:.04s}
  .bs-header.menu-open .bs-nav a:nth-child(2){transition-delay:.08s}
  .bs-header.menu-open .bs-nav a:nth-child(3){transition-delay:.12s}
  .bs-header.menu-open .bs-nav a:nth-child(4){transition-delay:.16s}
  .bs-header.menu-open .bs-nav a:nth-child(5){transition-delay:.2s}
  .bs-header.menu-open .bs-nav a:nth-child(6){transition-delay:.24s}
  .bs-header.menu-open .bs-nav a:nth-child(7){transition-delay:.28s}
  .bs-header.menu-open .bs-nav a:nth-child(8){transition-delay:.32s}
  .bs-header.menu-open .bs-nav a:nth-child(9){transition-delay:.36s}
  .bs-header.menu-open .bs-nav a:nth-child(10){transition-delay:.4s}

  .bs-nav a::after{
    display:none;
  }

  .bs-nav a.is-active{
    color:#B79B6C;
  }

  .bs-nav .bs-cta{
    margin:26px 0 0;
    padding:17px 24px;
    text-align:center;
    font-family:Jost,Arial,sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    border-radius:999px;
    border-bottom:none !important;
    background:#241A13;
  }
}

<header class="bs-header">
  <div class="bs-header-inner">

    <a class="bs-logo" href="/">
      <img src="https://beautysecret-berlin.de/wp-content/uploads/2025/01/beautysecret-berlin-shadow2.png" alt="Beauty Secret Berlin">
    </a>

    <button class="bs-menu-toggle" type="button" aria-label="Menü öffnen" aria-expanded="false">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <nav class="bs-nav">
      <a href="/">Startseite</a>
      <a href="/aktuelle-rituale">Aktuelle Rituale</a>
      <a href="/ueber-mich">Über mich</a>
      <a href="/akademie">Akademie</a>
      <a href="/#leistungen">Leistungen</a>
      <a href="/journal">Journal</a>
      <a href="/kontakt">Kontakt</a>
      <a class="bs-cta" href="/buchung">Termin buchen</a>
    </nav>

  </div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const header = document.querySelector('.bs-header');
  const toggle = document.querySelector('.bs-menu-toggle');
  const nav = document.querySelector('.bs-nav');
  const links = document.querySelectorAll('.bs-nav a:not(.bs-cta)');
  const allNavLinks = document.querySelectorAll('.bs-nav a');
  const currentPath = window.location.pathname.replace(/\/$/, '') || '/';

  function bsHeaderScroll(){
    if(window.scrollY > 40){
      header.classList.add('scrolled');
    }else{
      header.classList.remove('scrolled');
    }
  }

  function closeMenu(){
    header.classList.remove('menu-open');
    document.body.classList.remove('bs-menu-open');
    toggle.setAttribute('aria-expanded', 'false');
  }

  function toggleMenu(){
    const isOpen = header.classList.toggle('menu-open');
    document.body.classList.toggle('bs-menu-open', isOpen);
    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  }

  toggle.addEventListener('click', toggleMenu);

  allNavLinks.forEach(function(link){
    link.addEventListener('click', closeMenu);
  });

  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){
      closeMenu();
    }
  });

  links.forEach(function(link){
    const href = link.getAttribute('href');
    if(!href) return;

    const linkUrl = new URL(href, window.location.origin);
    const linkPath = linkUrl.pathname.replace(/\/$/, '') || '/';

    if(href === '/#leistungen'){
      if(currentPath === '/' && window.location.hash === '#leistungen'){
        link.classList.add('is-active');
      }
      return;
    }

    if(linkPath === currentPath && !href.includes('#')){
      link.classList.add('is-active');
    }
  });

  bsHeaderScroll();
  window.addEventListener('scroll', bsHeaderScroll);
});
</script>