.header {
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
  row-gap: var(--space-s);
  background-color: var(--white);
}

@media (max-width: 991px) {
  .header {
    align-self: center;
  }
}

/* ─── Sticky behaviour ───────────────────────────────────────────── */
header.wp-block-template-part:has(#header.sticky) {
  display: contents;
}

#header.sticky {
  inset: 0 0 auto;
  position: fixed;
  width: 100%;
  z-index: 998;
  transition:
    background-color 0.2s,
    transform 0.4s;
}

/* JS adds `on-scroll` for the in-flow sticky variant (the default markup). */
#header.sticky.on-scroll {
  position: sticky;
}

/* Scrolling down past data-slide-up-after hides the header; the :not() keeps it
   visible while the mobile offcanvas is open. */
#header.sticky.slide-up:not(:has(.wse-offcanvas.open)) {
  overflow-x: hidden;
  transform: translateY(-101%);
}

/* Short-lived class set while the header changes direction, so the slide
   transition runs without clipping interfering. */
#header.sticky.sliding {
  overflow: hidden;
}

/* No slide animation while the offcanvas is open. */
#header.sticky:has(.wse-offcanvas.open) {
  transition: none;
}

/* ─── Top utility bar (language + Interaktive Karte) ───────────── */
.header-top__container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  row-gap: var(--space-s);
  column-gap: 0;
}

@media (max-width: 991px) {
  .header-top__container {
    display: none;
  }
}

.header-top__menu .nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-top__menu .nav-menu > li {
  margin-left: 0;
}

.header-top__menu .nav-menu > li > a {
  font-weight: 600;
}

/* Globe / translate icon on a menu item flagged with the "icon" class */
.header-top__menu .nav-menu li.icon > a::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 12c0 1.052.18 2.062.512 3m10.502-6h8.488M11 15H2.512m18.99-6a9 9 0 0 0-8.488-6c1.6 0 2.909 3.762 2.995 8.5M21.502 9c.278.789.45 1.628.498 2.5M2.512 15A9 9 0 0 0 11 21c-1.544 0-2.816-3.5-2.982-8M2 5.297C2 4.2 2 3.65 2.187 3.224c.2-.452.542-.815.968-1.025C3.557 2 4.075 2 5.11 2H6c1.886 0 2.828 0 3.414.62C10 3.243 10 4.24 10 6.24v2.259c0 .871 0 1.307-.264 1.457s-.606-.092-1.29-.576l-.105-.073c-.5-.354-.75-.53-1.034-.621c-.283-.091-.584-.091-1.185-.091h-1.01c-1.037 0-1.555 0-1.957-.199a2.06 2.06 0 0 1-.968-1.025C2 6.945 2 6.396 2 5.297m20 12c0-1.098 0-1.647-.187-2.073a2.06 2.06 0 0 0-.968-1.025C20.443 14 19.925 14 18.89 14H18c-1.886 0-2.828 0-3.414.62C14 15.243 14 16.24 14 18.24v2.259c0 .871 0 1.307.264 1.457s.606-.092 1.29-.576l.105-.073c.5-.354.75-.53 1.034-.621c.283-.091.584-.091 1.185-.091h1.01c1.037 0 1.555 0 1.957-.199c.426-.21.769-.573.968-1.025c.187-.426.187-.975.187-2.074' color='%23000'/%3E%3C/svg%3E");
  padding-right: 6px;
}

/* ─── Main bar ─────────────────────────────────────────────────── */
.header-bot__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--content-gap);
  min-height: 80px;
}

@media (max-width: 991px) {
  .header-bot__container {
    height: 80px;
  }
}

/* Logo overlaps the bar, vertically centered */
.header-bot__logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.header-bot__logo .site-logo {
  width: 200px;
  height: auto;
  transition:
    width 0.2s ease,
    height 0.2s ease;
}

@media (max-width: 478px) {
  .header-bot__logo .site-logo {
    width: 150px;
  }
}

/* Logo shrinks and anchors to the bottom of the bar once the page is scrolled.
   The theme's sticky-header JS toggles `.scrolling` on #header when scrollY > 0. */
#header.scrolling .header-bot__logo {
  top: auto;
  bottom: var(--space-xs);
  transform: none;
}

#header.scrolling .header-bot__logo .site-logo {
  width: auto;
  height: 60px;
}

@media (max-width: 478px) {
  #header.scrolling .header-bot__logo {
    bottom: 50%;
    transform: translateY(50%);
  }

  #header.scrolling .header-bot__logo .site-logo {
    height: 40px;
  }
}

/* ─── Desktop main menu ────────────────────────────────────────── */
.header-bot__menu {
  margin-left: auto;
}

@media (max-width: 991px) {
  .header-bot__menu {
    display: none;
  }
}

.header-bot__menu .nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-bot__menu .nav-menu > li {
  position: relative;
  margin-block: auto;
  margin-left: 0;
}

.header-bot__menu .nav-menu > li > a {
  font-size: var(--text-m);
  font-weight: 600;
}

.header-bot__menu .nav-menu > li:hover > a {
  color: color-mix(in srgb, var(--primary) 80%, transparent);
}

/* Submenu dropdown */
.header-bot__menu .nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid color-mix(in srgb, var(--neutral) 25%, var(--white));
  border-radius: var(--radius-xs);
  box-shadow: 4px 4px 12px 0 color-mix(in srgb, var(--neutral) 12%, transparent);
  transform: translateY(var(--space-xs));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.header-bot__menu .nav-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.header-bot__menu .nav-menu .sub-menu > li > a {
  display: block;
  color: var(--neutral);
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 120%;
  padding-block: var(--space-xs);
  padding-inline: var(--space-s);
}

.header-bot__menu .nav-menu .sub-menu .menu-item:hover {
  background-color: color-mix(in srgb, var(--neutral) 15%, var(--white));
}

/* Last item of the DESKTOP main menu renders as an accent button (the "Mitmachen" CTA).
   Scoped to .header-bot__menu so it never leaks into the top bar, offcanvas, or footer. */
.header-bot__menu .nav-menu > .menu-item:last-child > a {
  justify-content: center;
  background-color: var(--accent);
  color: var(--primary-ultra-dark);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-xs);
}

.header-bot__menu .nav-menu > .menu-item:last-child > a:hover {
  background-color: var(--accent-hover);
  color: var(--primary-ultra-dark);
  text-decoration: none;
}

/* ─── Hamburger toggle ─────────────────────────────────────────── */
.header-bot__toggle-menu {
  display: none;
  z-index: 910;
}

@media (max-width: 991px) {
  .header-bot__toggle-menu {
    display: flex;
  }
}

/* ─── Offcanvas (mobile) ───────────────────────────────────────── */
/* Offcanvas hide / slide-in — block-scoped so it beats the framework @layer
   (an unlayered rule was defeating the framework's visibility:hidden, so we
   move the panel fully off-screen via transform as well). */
#offcanvas.wse-offcanvas {
  visibility: hidden;
}

#offcanvas.wse-offcanvas.open {
  visibility: visible;
}

.offcanvas-header-bot .offcanvas-inner {
  position: fixed;
  inset: 0 auto 0 0;
  width: 400px;
  max-width: 100vw;
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: var(--space-xxl);
  flex-wrap: nowrap;
  overflow-y: auto;
  background-color: var(--white);
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.25, 0, 0.25, 1);
  z-index: 999;
}

.offcanvas-header-bot.open .offcanvas-inner {
  transform: translateX(0);
}

@media (max-width: 478px) {
  .offcanvas-header-bot .offcanvas-inner {
    width: 100vw;
  }
}

.offcanvas-header-bot__logo img {
  width: 200px;
  height: auto;
}

.offcanvas-header-bot__menu-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: var(--space-m);
}

.offcanvas-header-bot__menu .nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offcanvas-header-bot__menu .nav-menu > li {
  margin-left: 0;
}

.offcanvas-header-bot__menu .nav-menu > li > a {
  font-size: var(--text-l);
  font-weight: 500;
}

/* Last item of the mobile main menu ("Kontakt") renders as an accent button,
   matching the desktop CTA. inline-flex keeps it content-width inside the
   column-flex menu instead of stretching full width. */
.offcanvas-header-bot__menu .nav-menu > .menu-item:last-child > a {
  display: inline-flex;
  justify-content: center;
  background-color: var(--accent);
  color: var(--primary-ultra-dark);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-xs);
}

.offcanvas-header-bot__menu .nav-menu > .menu-item:last-child > a:hover {
  background-color: var(--accent-hover);
  color: var(--primary-ultra-dark);
  text-decoration: none;
}

.offcanvas-header-bot__menu .nav-menu .sub-menu {
  margin: 0;
  padding-top: var(--space-s);
  padding-inline: var(--space-xs);
  list-style: none;
}

.offcanvas-header-bot__menu .nav-menu .sub-menu > li > a {
  color: var(--neutral);
  font-size: var(--text-m);
  font-weight: 500;
}

.offcanvas-header-bot__backdrop {
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, #000 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 998;
}

.offcanvas-header-bot.open .offcanvas-header-bot__backdrop {
  opacity: 1;
  pointer-events: auto;
}