.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--nam-border);backdrop-filter:blur(10px)}
.site-header__inner{min-height:96px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.site-logo{display:inline-flex;align-items:center;gap:14px}
.site-logo img{width:46px;height:46px;object-fit:contain}
.site-logo span{color:var(--nam-text);font-size:32px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.primary-navigation{justify-self:center}
.primary-navigation ul{display:flex;align-items:center;gap:40px;margin:0;padding:0;list-style:none}
.primary-navigation a{position:relative;color:var(--nam-text)!important;font-size:17px;font-weight:500}
.primary-navigation a::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--nam-gold);border-radius:999px;transform:scaleX(0);transition:transform .18s ease}
.primary-navigation a:hover::after,.primary-navigation a:focus-visible::after,.primary-navigation .current-menu-item>a::after{transform:scaleX(1)}
.header-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.header-icon,.header-icon:visited,.header-icon:hover,.header-icon:focus,.header-icon:active{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;color:#1A1A1A!important;border-radius:999px}
.header-icon:hover{background:var(--nam-surface)}
.header-icon svg{width:22px;height:22px;stroke:currentColor}
.menu-toggle{display:none;border:0;background:transparent;color:var(--nam-text);padding:8px}
@media(max-width:960px){
  .site-header__inner{grid-template-columns:1fr auto;min-height:82px}
  .menu-toggle{display:inline-flex}
  .primary-navigation{display:none;grid-column:1/-1;justify-self:stretch;padding-bottom:22px}
  .primary-navigation.is-open{display:block}
  .primary-navigation ul{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(max-width:640px){
  .site-logo img{width:36px;height:36px}
  .site-logo span{font-size:25px}
}


/* v3.10.1 – compact mobile header */
@media(max-width:700px){
  .site-header__inner{
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-areas:
      "logo actions toggle"
      "nav nav nav"!important;
    gap:8px 6px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }

  .site-logo{
    grid-area:logo!important;
    min-width:0!important;
    gap:8px!important;
  }

  .site-logo img{
    width:30px!important;
    height:30px!important;
    flex:0 0 auto!important;
  }

  .site-logo span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:20px!important;
    font-weight:650!important;
  }

  .header-actions{
    grid-area:actions!important;
    justify-self:end!important;
    gap:2px!important;
  }

  .header-icon{
    width:36px!important;
    height:36px!important;
  }

  .header-icon svg{
    width:19px!important;
    height:19px!important;
  }

  .menu-toggle{
    grid-area:toggle!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    padding:7px!important;
    border-radius:10px!important;
  }

  .menu-toggle:hover,
  .menu-toggle[aria-expanded="true"]{
    background:var(--nam-surface)!important;
  }

  .menu-toggle svg{
    width:22px!important;
    height:22px!important;
  }

  .primary-navigation{
    grid-area:nav!important;
    grid-column:auto!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  .primary-navigation.is-open{
    display:block!important;
    padding:12px 0 8px!important;
    border-top:1px solid var(--nam-border)!important;
  }

  .primary-navigation ul{
    width:100%!important;
    gap:0!important;
  }

  .primary-navigation li{
    width:100%!important;
  }

  .primary-navigation a{
    display:block!important;
    width:100%!important;
    padding:11px 4px!important;
    font-size:16px!important;
  }

  .primary-navigation a::after{
    bottom:5px!important;
    right:auto!important;
    width:26px!important;
  }
}


/* v3.10.2 – mobile account icon + animated burger/X */
@media(max-width:700px){
  .header-actions .header-icon[aria-label="Mein Konto"]{
    display:inline-flex!important;
  }

  .site-header__inner{
    grid-template-columns:minmax(0,1fr) auto auto!important;
  }

  .header-actions{
    gap:0!important;
  }

  .header-icon{
    width:34px!important;
    height:34px!important;
  }

  .menu-toggle{
    position:relative!important;
    width:38px!important;
    height:38px!important;
  }

  /* Hide original SVG drawing; draw three clean bars so they can morph. */
  .menu-toggle svg{
    opacity:0!important;
  }

  .menu-toggle::before,
  .menu-toggle::after{
    content:""!important;
    position:absolute!important;
    left:9px!important;
    width:20px!important;
    height:2px!important;
    background:currentColor!important;
    border-radius:999px!important;
    transition:transform .22s ease, top .22s ease!important;
    transform-origin:center!important;
  }

  .menu-toggle::before{
    top:12px!important;
    box-shadow:0 6px 0 currentColor!important;
  }

  .menu-toggle::after{
    top:24px!important;
  }

  .menu-toggle[aria-expanded="true"]::before{
    top:18px!important;
    box-shadow:none!important;
    transform:rotate(45deg)!important;
  }

  .menu-toggle[aria-expanded="true"]::after{
    top:18px!important;
    transform:rotate(-45deg)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle::before,
  .menu-toggle::after{
    transition:none!important;
  }
}