/**
 * Top-Chrome auf Solo-Startseite (#st_header + #primary-menu).
 * Lädt via design_tokens (nicht nur st_content_layout).
 */

#st_header {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--st-header-height);
  position: relative;
  z-index: 2;
}

/* Solo .solo-inner { padding: var(--solo-gap) } würde Inhalt aus der Header-Höhe drücken */
#st_header.st-page-header > .header-inner.solo-inner {
  padding: 0 !important;
  margin: 0;
  box-sizing: border-box;
}

/* Scroll-Sticky: st-page-header-sticky.js (nur .has-st-page-bg) */
.page-wrapper.has-st-page-header-sticky {
  padding-top: var(--st-page-header-spacer-height, var(--st-page-header-height-start, 110px));
}

#st_header.st-page-header.is-sticky-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: visible;
  overflow-y: hidden;
  box-sizing: border-box;
  opacity: 1;
  height: var(
    --st-page-header-height-active,
    calc(
      var(--st-page-header-height-start, 110px)
        - (var(--st-page-header-height-start, 110px) - var(--st-page-header-height-end, 55px))
        * var(--st-header-scroll-progress, 0)
    )
  ) !important;
  min-height: 0 !important;
  max-height: var(--st-page-header-height-start, 110px);
  will-change: height;
  transition: none;
  isolation: isolate;
}

/* Scroll: Hintergrund-Opacity 0%→100% (::before), Logo/Trigger bleiben voll sichtbar */
#st_header.st-page-header.is-sticky-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--st-chrome-bg-site, #0f182b);
  opacity: var(
    --st-page-header-bg-opacity,
    calc(
      var(--st-page-header-opacity-start, 0)
        + (var(--st-page-header-opacity-end, 1) - var(--st-page-header-opacity-start, 0))
        * var(--st-header-scroll-progress, 0)
    )
  );
}

#st_header.st-page-header .header-inner,
#st_header.st-page-header.is-sticky-top .header-inner {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  background: transparent;
}

#st_header.st-page-header .article-header,
#st_header.st-page-header.is-sticky-top .article-header {
  position: static;
  z-index: 1;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0 !important;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  background: transparent;
}

#st_header.st-page-header.is-sticky-top .article-header__slot--center,
#st_header.st-page-header.is-sticky-top .st-header-logo-slot,
#st_header.st-page-header.is-sticky-top .article-header__slot--left,
#st_header.st-page-header.is-sticky-top .article-header__slot--right,
#st_header.st-page-header.is-sticky-top .st-offcanvas-trigger {
  opacity: 1;
}

/* Solo .header-inner { display:flex } würde .article-header auf Inhaltsbreite schrumpfen */
#st_header .header-inner {
  display: block;
  position: relative;
  width: 100%;
  max-width: min(100%, var(--st-layout-max-width, 2056px));
  margin-inline: auto;
  box-sizing: border-box;
}

#st_header.st-page-header .header-inner {
  min-height: 0;
  height: 100%;
}

/*
 * Grid-Overlay: Logo über volle Header-Breite zentriert, MENÜ/LOGIN in den Ecken (z-index oben).
 */
#st_header .article-header {
  position: static;
  display: grid;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--st-chrome-toggle-margin, 25px);
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  align-content: center;
}

#st_header.st-page-header .article-header {
  min-height: 0;
  height: 100%;
}

/* st-main-nav.css setzt #st_header .region { width:100% } – würde Slots/Logo überdecken */
#st_header .article-header__slot.region {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

#st_header .article-header__slot--left,
#st_header .article-header__slot--right {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-width: max-content;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#st_header .article-header__slot--left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  justify-content: flex-start;
}

#st_header .article-header__slot--right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  justify-content: flex-end;
}

/* Logo: echte Mitte von #st_header, ohne MENÜ/LOGIN zu verdrängen */
#st_header .article-header__slot--center,
#st_header .st-header-logo-slot {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 1;
  width: min(
    var(--st-logo-width-capped),
    calc((var(--st-header-height, 110px) - 14px) * var(--st-logo-ratio, 5.935))
  ) !important;
  max-width: var(--st-logo-width-max) !important;
  height: auto;
  max-height: calc(var(--st-header-height, 110px) - 14px);
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
}

#st_header .article-header__slot--center a,
#st_header .article-header__slot--center button,
#st_header .article-header__slot--center .site-logo,
#st_header .st-header-logo-slot a,
#st_header .st-header-logo-slot button {
  pointer-events: auto;
}

#st_header .article-header__slot--left .block,
#st_header .article-header__slot--right .block,
#st_header .article-header__slot--left .st-offcanvas-trigger,
#st_header .article-header__slot--right .st-offcanvas-trigger {
  flex-shrink: 0;
  min-width: max-content;
}

/* Menü/Headlines im Fluss; #st_header fixiert → st-page-header-sticky */
.page-wrapper > #primary-menu,
.page-wrapper > #st_headline_1,
.page-wrapper > #st_headline_2 {
  position: relative;
  z-index: 5;
}

.page-wrapper > #st_header.st-page-header:not(.is-sticky-top) {
  position: relative;
  z-index: 5;
}

/* Hauptmenü: gleiche zentrierte Breite wie #st_header */
.page-wrapper > #primary-menu {
  width: 100%;
  box-sizing: border-box;
}

.page-wrapper > #primary-menu .primary-menu-inner {
  width: 100%;
  max-width: min(100%, var(--st-layout-max-width, 2056px));
  margin-inline: auto;
  min-height: var(--st-menu-height, 46px);
  box-sizing: border-box;
}

.page-wrapper > #primary-menu .primary-menu-inner .navigation__primary,
.page-wrapper > #primary-menu .primary-menu-inner nav {
  margin-inline: auto;
}

/*
 * Startseite: Menü ohne Hintergrund-Tint; alle Ebenen transparent,
 * kein Solo-Unterstrich/Hover-BG.
 */
.page-wrapper.has-st-page-bg > #primary-menu {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--st-hell, #fff) !important;
}

.page-wrapper.has-st-page-bg > #primary-menu > .primary-menu-inner.solo-inner {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--st-hell, #fff) !important;
}

.page-wrapper.has-st-page-bg #primary-menu .region,
.page-wrapper.has-st-page-bg #primary-menu .block,
.page-wrapper.has-st-page-bg #primary-menu .solo-menu,
.page-wrapper.has-st-page-bg #primary-menu nav,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"],
.page-wrapper.has-st-page-bg #primary-menu .st-menubar-scroller {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent;
}

.page-wrapper.has-st-page-bg #primary-menu nav ul li > a,
.page-wrapper.has-st-page-bg #primary-menu nav ul li > button,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > a.nav__menu-link,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > button.nav__menu-button,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > a,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > button {
  color: var(--st-hell, #fff) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
  overflow: visible;
}

.page-wrapper.has-st-page-bg #primary-menu nav ul li > a::after,
.page-wrapper.has-st-page-bg #primary-menu nav ul li > button::after,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > a.nav__menu-link::after,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > button.nav__menu-button::after,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > a::after,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > button::after {
  display: none !important;
  content: none !important;
}

.page-wrapper.has-st-page-bg #primary-menu nav ul li > a:hover,
.page-wrapper.has-st-page-bg #primary-menu nav ul li > button:hover,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > a.nav__menu-link:hover,
.page-wrapper.has-st-page-bg #primary-menu ul.navigation__menubar > li > button.nav__menu-button:hover,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > a:hover,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li > button:hover,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li.nav__menu-item:hover > a,
.page-wrapper.has-st-page-bg #primary-menu [id^="main-menubar"] > li.nav__menu-item:hover > button {
  color: color-mix(in srgb, var(--st-hell, #fff) 65%, transparent) !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.page-wrapper.has-st-page-bg #primary-menu .st-menubar-scroller__btn,
.page-wrapper.has-st-page-bg #primary-menu .st-menubar-scroller__btn:hover,
.page-wrapper.has-st-page-bg #primary-menu .st-menubar-scroller__btn:focus-visible,
.page-wrapper.has-st-page-bg #primary-menu .st-menubar-scroller__btn:active {
  background: transparent !important;
  background-color: transparent !important;
}

.page-wrapper.has-st-page-bg #primary-menu a,
.page-wrapper.has-st-page-bg #primary-menu button {
  color: inherit;
}

/* Lesbarkeit auf Hero: helle Schrift + Schatten */
#st_header .st-offcanvas-trigger,
#st_header .st-offcanvas-trigger__label,
#st_header .st-offcanvas-trigger__icon {
  color: var(--st-hell, #fff) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

#st_header .article-header__slot--right .st-offcanvas-trigger--login,
#st_header .article-header__slot--left .st-offcanvas-trigger--menu {
  position: relative;
  z-index: 11;
}

@media (prefers-reduced-motion: reduce) {
  #st_header.st-page-header.is-sticky-top {
    will-change: auto;
  }
}