#container > #header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  box-shadow: none;
}

#container > #header.cbnl-header-compact {
  background: transparent;
  pointer-events: none;
}

#container > #header.cbnl-header-compact #header_content,
#container > #header.cbnl-header-compact.funnel-header .funnel-header-top {
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #c4c4c4;
  pointer-events: auto;
}

#container.cbnl-fixed-funnel {
  padding-top: var(--cbnl-funnel-header-height, 0px);
}

#container.cbnl-fixed-funnel > #header.funnel-header {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(100%, 1200px);
  min-height: 0;
  transform: translateX(-50%);
}

@media (max-width: 1200px) {
  body #container {
    overflow: clip;
  }
}

#container > #header.cbnl-sticky-header #navigation,
#container > #header.cbnl-sticky-header .funnel-progress {
  max-height: 120px;
  opacity: 1;
  visibility: visible;
  transition: max-height 280ms ease, opacity 200ms ease 80ms, visibility 0s;
}

#container > #header.cbnl-header-compact #navigation,
#container > #header.cbnl-header-compact .funnel-progress {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, max-height 260ms ease 160ms, visibility 0s linear 420ms;
}

@media (min-width: 769px) {
  #container > #header.cbnl-sticky-header #account_navigation {
    max-height: 40px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: max-height 260ms ease, min-height 260ms ease, opacity 200ms ease 80ms, visibility 0s;
  }

  #container > #header.cbnl-header-compact #account_navigation {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, max-height 260ms ease 160ms, min-height 260ms ease 160ms, visibility 0s linear 420ms;
  }

  #container > #header.cbnl-sticky-header #header_content,
  #container > #header.cbnl-sticky-header #header_content .logo,
  #container > #header.cbnl-sticky-header #header_content #logo,
  #container > #header.cbnl-sticky-header #header_content .cbnl-brand-logo {
    transition: height 280ms ease;
  }

  #container > #header.cbnl-header-compact #header_content {
    height: 72px;
  }

  #container > #header.cbnl-header-compact #header_content .logo,
  #container > #header.cbnl-header-compact #header_content #logo {
    height: 72px;
    flex-basis: 300px;
    transform: none;
  }

  #container > #header.cbnl-header-compact #header_content .cbnl-brand-logo {
    width: 300px;
    height: 72px;
  }

  #container > #header.cbnl-header-compact #header_content .USP_small,
  #container > #header.cbnl-header-compact #header_content #USP_small {
    display: none;
  }
}

@media (max-width: 768px) {
  #container > #header:not(.funnel-header) {
    box-sizing: border-box;
    display: grid;
    grid-template: 61px / minmax(0, 1fr);
    height: 64px;
    min-height: 64px;
    border-top: 3px solid #c41a02;
    background: #130d10;
  }

  #container > #header.cbnl-header-compact:not(.funnel-header) {
    border-bottom: 1px solid #a9a9a9;
  }

  #container > #header:not(.funnel-header) > #fb-root,
  #container > #header:not(.funnel-header) > #account_navigation {
    display: none;
  }

  #container > #header:not(.funnel-header) > #account_navigation_mobile,
  #container > #header:not(.funnel-header) > #header_content,
  #container > #header:not(.funnel-header) > #navigation {
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100%;
    height: 61px;
    min-height: 0;
    margin: 0;
  }

  #container > #header:not(.funnel-header) > #account_navigation_mobile {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 0 64px 0 0;
    background: #130d10;
    pointer-events: auto;
  }

  #container > #header:not(.funnel-header) > #account_navigation_mobile > .left,
  #container > #header:not(.funnel-header) > #account_navigation_mobile > .grow,
  #container > #header:not(.funnel-header) > #account_navigation_mobile > .right,
  #container > #header:not(.funnel-header) > #account_navigation_mobile > div:not(.clear) {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    float: none;
    gap: 0;
  }

  #container > #header:not(.funnel-header) > #account_navigation_mobile > .clear,
  #container > #header:not(.funnel-header) #account_navigation_mobile a[href^="tel:"],
  #container > #header:not(.funnel-header) #account_navigation_mobile [data-home-phone] {
    display: none !important;
  }

  #container > #header:not(.funnel-header) #account_menu_2,
  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart > summary,
  #container > #header:not(.funnel-header) #account_navigation_mobile > div > a[href="/winkelwagen"] {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 0 !important;
    line-height: 0;
    list-style: none;
    cursor: pointer;
  }

  #container > #header:not(.funnel-header) #account_menu_2::before {
    display: block;
    width: 27px;
    height: 27px;
    background: url('/images/brand-2026/header-account.svg') center / contain no-repeat;
    content: '';
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .sprite-svg-shoppingcart {
    display: block;
    width: 27px;
    height: 27px;
    margin: 0;
    background: url('/images/brand-2026/header-cart.svg') center / contain no-repeat;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart > summary strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-cart-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    min-height: 18px;
    padding: 2px;
    font-size: 10px;
    line-height: 1;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-account-menu {
    position: static;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart {
    position: static;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-account-menu > ul,
  #container > #header:not(.funnel-header) #account_navigation_mobile > .left > ul,
  #container > #header:not(.funnel-header) #account_navigation_mobile > .grow > ul {
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }

  #container > #header:not(.funnel-header) > #header_content,
  #container > #header.cbnl-header-compact:not(.funnel-header) > #header_content {
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  #container > #header:not(.funnel-header) > #header_content::before {
    display: none;
  }

  #container > #header:not(.funnel-header) #header_content .logo,
  #container > #header:not(.funnel-header) #header_content #logo {
    display: flex;
    align-items: center;
    flex: 0 0 clamp(138px, 43vw, 210px);
    width: clamp(138px, 43vw, 210px);
    height: 61px;
    margin: 0;
    overflow: visible;
    transform: none;
    pointer-events: auto;
  }

  #container > #header:not(.funnel-header) #header_content .logo a,
  #container > #header:not(.funnel-header) #header_content #logo a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 61px;
  }

  #container > #header:not(.funnel-header) #header_content .logo picture,
  #container > #header:not(.funnel-header) #header_content #logo picture {
    display: block;
    width: 100%;
  }

  #container > #header:not(.funnel-header) #header_content .logo a::after,
  #container > #header:not(.funnel-header) #header_content #logo a::after {
    position: absolute;
    top: calc(50% - 2px);
    left: 2%;
    width: 15%;
    aspect-ratio: 1;
    background: url('/images/brand-2026/logo-mark.webp') center / contain no-repeat;
    content: '';
    pointer-events: none;
    transform: translateY(-50%);
  }

  #container > #header:not(.funnel-header) #header_content .cbnl-brand-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    clip-path: inset(0 0 0 17%);
    filter: brightness(0) invert(1);
  }

  #container > #header:not(.funnel-header) #header_content .USP_small,
  #container > #header:not(.funnel-header) #header_content #USP_small,
  #container > #header:not(.funnel-header) #header_content .shoppingcart,
  #container > #header:not(.funnel-header) #header_content > .clear {
    display: none;
  }

  #container > #header.cbnl-sticky-header:not(.funnel-header) > #navigation,
  #container > #header.cbnl-header-compact:not(.funnel-header) > #navigation {
    position: relative;
    z-index: 4;
    height: 61px;
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  #container > #header:not(.funnel-header) > #navigation::before,
  #container > #header:not(.funnel-header) > #navigation .normal_menu {
    display: none;
  }

  #container > #header:not(.funnel-header) > #navigation .mobile_menu,
  #container > #header:not(.funnel-header) > #navigation #mobile_menu {
    position: static;
    display: block;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }

  #container > #header:not(.funnel-header) #navigation .mobile_menu > li,
  #container > #header:not(.funnel-header) #navigation #mobile_menu > li {
    width: 48px;
    position: static;
    border: 0;
    background: transparent;
  }

  #container > #header:not(.funnel-header) #navigation .homepage-mobile-menu-toggle,
  #container > #header:not(.funnel-header) #navigation .mobile_menu_icon,
  #container > #header:not(.funnel-header) #navigation #menu_icon {
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: url('/images/brand-2026/header-menu.svg') center / 27px no-repeat;
    color: transparent;
    font-size: 0 !important;
    line-height: 0;
    list-style: none;
    cursor: pointer;
    pointer-events: auto;
  }

  #container > #header:not(.funnel-header) #navigation .sprite-svg-mobile-menu {
    display: none;
  }

  #container > #header:not(.funnel-header) #navigation .mobile_menu ul,
  #container > #header:not(.funnel-header) #navigation #mobile_menu > li > ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
  }

  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel {
    box-sizing: border-box;
    z-index: 10;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #494949;
    border-top: 0;
    background: #292729;
    color: #fff;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  #container > #header:not(.funnel-header) .cbnl-menu-visible .cbnl-mobile-menu-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .cbnl-menu-open > ul,
  #container > #header:not(.funnel-header) #navigation .cbnl-menu-open > li > ul {
    display: block !important;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .cbnl-mobile-menu-panel > li,
  #container > #header:not(.funnel-header) #navigation .cbnl-mobile-menu-panel > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #494949;
    background: transparent;
  }

  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel > li:last-child {
    border-bottom: 0;
  }

  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel > li > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 13px 18px;
    border: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
  }

  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel > li > a:hover,
  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel > li > a:focus-visible {
    background: #383438;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart-panel {
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    padding: 18px;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart-panel li {
    border-bottom-color: #494949;
    background: transparent;
    color: #fff;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart-panel ul {
    background: transparent;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart-total {
    border-top-color: #494949;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile .homepage-mini-cart-panel > a {
    min-height: 48px;
  }

  #container > #header:not(.funnel-header) #account_navigation_mobile :is(a, summary):focus-visible,
  #container > #header:not(.funnel-header) #navigation :is(a, button, summary):focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
  }
}

#container > #header.cbnl-header-compact.funnel-header .funnel-header-top {
  padding-top: 8px;
  padding-bottom: 8px;
}

#container > #header.cbnl-sticky-header.funnel-header .funnel-header-top {
  transition: padding 280ms ease;
}

#container > #header.cbnl-sticky-header.funnel-header .funnel-logo img {
  transition: height 280ms ease;
}

#container > #header.cbnl-header-compact.funnel-header .funnel-logo img {
  height: 56px;
}

#container > #header.cbnl-header-compact.funnel-header .funnel-help > strong,
#container > #header.cbnl-header-compact.funnel-header .funnel-help > small {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

#container > #header.cbnl-sticky-header.funnel-header .funnel-help > strong,
#container > #header.cbnl-sticky-header.funnel-header .funnel-help > small {
  overflow: hidden;
  transition: max-height 280ms ease, opacity 180ms ease, visibility 0s linear 280ms;
}

#container > #header.cbnl-sticky-header.funnel-header:not(.cbnl-header-compact) .funnel-help > strong,
#container > #header.cbnl-sticky-header.funnel-header:not(.cbnl-header-compact) .funnel-help > small {
  max-height: 30px;
  opacity: 1;
  visibility: visible;
  transition: max-height 280ms ease, opacity 180ms ease 80ms, visibility 0s;
}

#container > #header.cbnl-header-measuring *,
#container > #header.cbnl-header-measuring *::before,
#container > #header.cbnl-header-measuring *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #container > #header:not(.funnel-header) .cbnl-mobile-menu-panel {
    transition: none;
  }
  #container > #header.cbnl-sticky-header #navigation,
  #container > #header.cbnl-sticky-header .funnel-progress,
  #container > #header.cbnl-sticky-header #account_navigation,
  #container > #header.cbnl-sticky-header #header_content,
  #container > #header.cbnl-sticky-header #header_content .logo,
  #container > #header.cbnl-sticky-header #header_content #logo,
  #container > #header.cbnl-sticky-header #header_content .cbnl-brand-logo,
  #container > #header.cbnl-sticky-header.funnel-header .funnel-header-top,
  #container > #header.cbnl-sticky-header.funnel-header .funnel-logo img,
  #container > #header.cbnl-sticky-header.funnel-header .funnel-help > strong,
  #container > #header.cbnl-sticky-header.funnel-header .funnel-help > small {
    transition: none;
  }
}