#header {
  --headerPy: 22rem;
  position: sticky;
  z-index: 5;
  inset-block-start: 0;
  padding-block: var(--headerPy);
  height: var(--headerHeight);
  width: 100%;
  backdrop-filter: blur(12rem);
  background: hsl(from var(--color-black) h s l / 15%);
}

@media (orientation: landscape) {
  #header {
    --headerPy: 28rem;
    position: relative;
    background: transparent;
    backdrop-filter: none;
  }
}

#header .inner {
  display: flex;
  align-items: center;
  gap: 12rem;
}

#header .logo {
  display: block;
  width: 96rem;
  flex-shrink: 0;
}

#header .logo .img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(0) brightness(5);
}

#header.header-dark .logo .img {
  filter: grayscale(1) contrast(0) brightness(0);
}

#headerNavigation {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: inherit;
  margin-inline-start: auto;
}

#headerNavigation .split {
  height: 38rem;
  background: hsl(from var(--color-font) h s l / 20%);
  width: 1px;
  flex-shrink: 0;
}

#headerNavigation .hde_trigger_button {
  color: var(--color-font);
  gap: 8rem;
}

#headerNavigation .hde_trigger_button .icon {
  width: 20rem;
  margin-block-start: -0.2em;
  margin-block-end: -0.2em;
}

#headerNavigation .hde_trigger_button + .split:has(~ .languageButton) {
  /* margin-inline-end: -8rem;
  margin-inline-start: 8rem; */
}

@media (orientation: portrait) {
  #headerNavigation .hde_trigger_button + .split,
  #headerNavigation .hde_trigger_button {
    display: none;
  }
}

@media (orientation: landscape) {
  #headerNavigation .btn .mobile {
    display: none;
  }

  #headerNavigation .btn:not(.languageButton):not(.hde_trigger_button) {
    font-size: 16rem;
    padding-inline: 24rem;
    padding-block: 12rem;
    height: 42rem;
    min-width: 206rem;
  }
}

@media (orientation: portrait) {
  #headerNavigation .btn .desktop {
    display: none;
  }
}

#header.header-dark {
  background: hsl(from var(--color-font) h s l / 15%);
}

#header.header-dark #headerNavigation .btn {
  color: var(--color-black);
}

#header.header-dark #headerNavigation .btn:not(.shine):not(.outline-hover) {
  border-color: currentColor;
}

#headerNavigation .btn.registration {
  display: none;
}

@media (orientation: landscape) {
  #headerNavigation .btn.registration {
    display: inline-flex;
  }
}