/* Shared narrow-screen header layout. Wide-screen layouts stay unchanged. */
@media (min-width: 761px) and (max-width: 1179.98px) {
  header.site-header:is(.is-scrolled, .is-static-header) { --anker-nav-h: 68px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  header.site-header:is(.is-scrolled, .is-static-header) { --anker-nav-h: 64px; }
}
/* Keep the initial narrow-screen arrangement while the header folds.
   Use the same arrangement on every page; static headers keep their height. */
@media (min-width: 761px) and (max-width: 1179.98px) {
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .container.nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 32px) !important;
    height: var(--anker-nav-h) !important;
    min-height: var(--anker-nav-h) !important;
    max-height: var(--anker-nav-h) !important;
    gap: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    height: var(--anker-nav-h) !important;
    min-height: var(--anker-nav-h) !important;
    max-height: var(--anker-nav-h) !important;
    gap: 9px !important;
    margin: 0 auto 0 0 !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-round img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: contain !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-wordmark {
    min-width: 0 !important;
    align-items: center !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-subline,
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-caravan {
    max-height: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-subline {
    margin-top: 5px !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) :is(.header-tools, .anker-header-tools) {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .nav-actions {
    display: flex !important;
    height: var(--anker-nav-h) !important;
    min-height: var(--anker-nav-h) !important;
  }

  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    background: #fff !important;
  }

  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span {
    top: 50% !important;
    left: 50% !important;
    background: #081a39 !important;
  }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 7px)) !important; }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(2) { transform: translate(-50%, -50%) !important; }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 7px)) !important; }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) !important; }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(2) { opacity: 0 !important; }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) !important; }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) #menu:not(.open) {
    display: none !important;
  }
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) #menu.open {
    top: var(--anker-nav-h) !important;
    left: 16px !important;
    right: 16px !important;
    max-height: calc(100dvh - var(--anker-nav-h) - 14px) !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .nav-actions {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-wordmark {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 0 !important;
    max-width: calc(100% - 184px) !important;
    align-items: center !important;
    text-align: center !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-title,
  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-caravan {
    text-align: center !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-subline {
    justify-content: center !important;
    width: 100% !important;
    gap: 6px !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header:is(.is-scrolled, .is-static-header) .logo-subline > span {
    display: block !important;
    width: 9px !important;
    min-width: 9px !important;
    flex: 0 0 9px !important;
  }

  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
  }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span { width: 18px !important; }
}

@media (max-width: 420px) {
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
  }
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle span { width: 16px !important; }
}

/* Complete the same compact navigation on pages with older header rules. */
@media (min-width: 761px) and (max-width: 1179.98px) {
  body header.site-header:is(.is-scrolled, .is-static-header) #mobileToggle {
    display: block !important;
  }
  body header.site-header:is(.is-scrolled, .is-static-header) #menu.open {
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    transform: none !important;
  }
}

/* Contact keeps its existing fixed height before and after scrolling. */
@media (min-width: 761px) and (max-width: 1179.98px) {
  body.kontakt-body header.site-header.is-static-header {
    --anker-nav-h: 116px;
  }
}
@media (min-width: 761px) and (max-width: 1080px) {
  body.kontakt-body header.site-header.is-static-header {
    --anker-nav-h: 92px;
  }
}

/* Inner-page phone headers use the same centered name and separate controls. */
@media (max-width: 760px) {
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) {
    --anker-inner-nav-h: 70px;
    --anker-inner-logo: 74px;
    --anker-inner-toggle: 42px;
    height: var(--anker-inner-nav-h) !important;
    min-height: var(--anker-inner-nav-h) !important;
    max-height: var(--anker-inner-nav-h) !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .container.nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 20px) !important;
    height: var(--anker-inner-nav-h) !important;
    min-height: var(--anker-inner-nav-h) !important;
    max-height: var(--anker-inner-nav-h) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo {
    height: var(--anker-inner-nav-h) !important;
    min-height: var(--anker-inner-nav-h) !important;
    max-height: var(--anker-inner-nav-h) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-round {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: var(--anker-inner-logo) !important;
    min-width: var(--anker-inner-logo) !important;
    height: var(--anker-inner-logo) !important;
    min-height: var(--anker-inner-logo) !important;
    flex: 0 0 var(--anker-inner-logo) !important;
    transform: translateY(-50%) !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-round img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-wordmark {
    position: absolute !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-title {
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: .92 !important;
    letter-spacing: .075em !important;
    padding-left: .075em !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-subline {
    margin-top: 3px !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-caravan {
    font-size: clamp(8px, 2.25vw, 9.2px) !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    padding-left: .18em !important;
  }

  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .anker-header-tools {
    position: absolute !important;
    right: calc(var(--anker-inner-toggle) + 8px) !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .nav-actions { display: none !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .anker-language-button {
    width: var(--anker-inner-toggle) !important;
    min-width: var(--anker-inner-toggle) !important;
    height: var(--anker-inner-toggle) !important;
    padding: 0 !important;
  }

  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    background: #fff !important;
  }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    height: 2px !important;
    margin: 0 !important;
    background: #081a39 !important;
  }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 7px)) !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(2) { transform: translate(-50%, -50%) !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 7px)) !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(2) { opacity: 0 !important; }
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #mobileToggle.is-active span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) !important; }

  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) #menu.open {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--anker-inner-nav-h) - 14px) !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  body.kontakt-body header.site-header.inner-site-header.is-static-header {
    --anker-inner-nav-h: 92px;
    --anker-inner-logo: 66px;
  }
}

@media (max-width: 420px) {
  body header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) {
    --anker-inner-nav-h: 64px;
    --anker-inner-logo: 66px;
    --anker-inner-toggle: 38px;
  }
  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-title {
    font-size: clamp(18px, 5.4vw, 21px) !important;
    letter-spacing: .062em !important;
    padding-left: .062em !important;
  }
  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header:is(.is-scrolled, .is-static-header) .logo-caravan {
    font-size: clamp(7.2px, 2vw, 8px) !important;
    letter-spacing: .14em !important;
    padding-left: .14em !important;
  }
  body.kontakt-body header.site-header.inner-site-header.is-static-header {
    --anker-inner-nav-h: 84px;
    --anker-inner-logo: 58px;
  }
}

/* Slightly larger ANKER name beside the logo when the header folds. */
@media (min-width: 1180px) {
  body header.site-header.is-scrolled .logo-title { font-size: 27px !important; }
}
@media (min-width: 901px) and (max-width: 1179.98px) {
  body header.site-header.is-scrolled .logo-title { font-size: 26px !important; }
}
@media (min-width: 761px) and (max-width: 900px) {
  body header.site-header.is-scrolled .logo-title { font-size: 24px !important; }
}
@media (min-width: 421px) and (max-width: 760px) {
  body header.site-header.is-scrolled .logo-title,
  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header.is-scrolled .logo-title {
    font-size: clamp(22px, 6.5vw, 26px) !important;
  }
}
@media (max-width: 420px) {
  body header.site-header.is-scrolled .logo-title,
  body:is(.menu-open, :not(.menu-open)) header.site-header.inner-site-header.is-scrolled .logo-title {
    font-size: clamp(20px, 5.9vw, 23px) !important;
  }
}
