/**
 * 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;
}

/*
 * Header-Hintergrund: oben deckend, unten transparent; mit Scroll (--st-header-scroll-progress 0→1)
 * wird die Fläche über die volle Header-Höhe deckend (opacity 1).
 */
#st_header.st-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --st-header-bg-solid-stop: calc(var(--st-header-scroll-progress, 0) * 100%);
  background: linear-gradient(
    180deg,
    var(--st-chrome-bg-site, #0f182b) 0%,
    var(--st-chrome-bg-site, #0f182b) var(--st-header-bg-solid-stop, 0%),
    rgb(15 24 43 / 0) 100%
  );
}

#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: 100%;
  margin-inline: 0;
  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%;
  margin-inline: 0;
  padding-inline: 0;
  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;
  color: #fff;
  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);
  padding-inline: 20px;
  box-sizing: border-box;
}

/*
 * Hauptmenü-Scroller: Parent-Kette wie #st_headline_1 .wdsb-weather-forecast-scroller
 * (min-width:0 – sonst wächst die Liste mit und scrollWidth === clientWidth)
 */
#primary-menu,
#primary-menu .primary-menu-inner,
#primary-menu .region,
#primary-menu .block,
#primary-menu nav,
#primary-menu .solo-menu,
#primary-menu .st-menubar-scroller,
#primary-menu .st-menubar-scroller__clip,
#primary-menu .st-menubar-scroller__track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#primary-menu .st-menubar-scroller {
  min-width: 0;
}

#primary-menu .block-menu:has(.st-menubar-scroller),
#primary-menu .block-menu nav:has(.st-menubar-scroller),
#primary-menu .solo-menu:has(.st-menubar-scroller) {
  overflow: visible;
}

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

/*
 * Startseite: deckender Chrome-Hintergrund (kein Hero-Durchscheinen).
 * Menü-Links/Inneres ohne Tint; kein Solo-Unterstrich/Hover-BG.
 */
.page-wrapper.has-st-page-bg > #st_header,
.page-wrapper.has-st-page-bg > #primary-menu,
.page-wrapper.has-st-page-bg > #st_headline_1 {
  background-color: transparent !important;
}

.page-wrapper.has-st-page-bg > #primary-menu {
  position: relative;
  isolation: isolate;
  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: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Lesbarkeit auf Hero/Page-BG: helle Schrift (schlägt Light-Mode #000 auf .page-wrapper) */
html[data-color-scheme='light'] #st_header .article-header__slot--left,
html[data-color-scheme='light'] #st_header .article-header__slot--right,
html[data-color-scheme='light'] #st_header .article-header__slot--left :where(*),
html[data-color-scheme='light'] #st_header .article-header__slot--right :where(*) {
  color: #fff !important;
}

#st_header .st-offcanvas-trigger,
#st_header .st-offcanvas-trigger__label,
#st_header .st-offcanvas-trigger__icon {
  color: #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;
}

/*
 * Kein Opacity: Solo .solo__fade-in, Scroll-JS, Hover-States.
 * gilt für #st_header, #primary-menu, #st_headline_1 (+ ST-Chrome-Äquivalente).
 */
#page-wrapper.solo__fade-in,
.page-wrapper.solo__fade-in {
  animation: none !important;
  opacity: 1 !important;
}

:is(
  #st_header,
  #st_chrome,
  #st_chrome #st_header,
  #st_chrome #st_menu,
  #st_chrome_widgets,
  #primary-menu,
  #st_headline_1
),
:is(
  #st_header,
  #st_chrome,
  #st_chrome #st_header,
  #st_chrome #st_menu,
  #st_chrome_widgets,
  #primary-menu,
  #st_headline_1
)::before,
:is(
  #st_header,
  #st_chrome,
  #st_chrome #st_header,
  #st_chrome #st_menu,
  #st_chrome_widgets,
  #primary-menu,
  #st_headline_1
)::after,
#st_header .header-inner,
#st_header .article-header,
#st_header .article-header__slot,
#st_header .article-header__toggle,
#st_header .st-offcanvas-trigger,
#st_header .st-offcanvas-trigger__icon,
#st_header .st-offcanvas-trigger__label,
.page-wrapper > #primary-menu,
.page-wrapper > #primary-menu .primary-menu-inner,
.page-wrapper > #st_headline_1,
.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,
.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 {
  opacity: 1 !important;
}

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