/**
 * Seiten-Hintergrundbild (--st-page-bg-image auf :root/html/body via preprocess).
 * Startseite: Hero-BG per body::before; Chrome/Wetter im normalen Fluss.
 * #main-container-Start bei 100vh: assets/js/st-homepage-main-offset.js
 */
.page-wrapper.has-hero-page-bg {
  --st-hero-bg-cover-height: 100vh;
  --st-hero-bg-cover-height: 100dvh;
}

.page-wrapper.has-st-page-bg {
  /* Hintergrundbild-Deckkraft (0.3 = 30 % sichtbar, wie Header-Tint) */
  --st-page-bg-image-opacity: 0.3;
}

/*
 * st-content-layout.css setzt auf .st-layout-page.has-hero-page-bg::before nur
 * Hero-Backdrop (#1b273b) – ohne Bild. Mit has-st-page-bg übernimmt body::before
 * das Page-BG (--st-page-bg-image), sonst verdeckt die feste Fläche das Bild.
 */
.page-wrapper.has-st-page-bg.has-hero-page-bg::before {
  display: none !important;
  content: none !important;
}

body.st-page:has(.page-wrapper.has-st-page-bg)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--st-bg-site, #0f182b);
  background-image:
    linear-gradient(
      rgb(15 24 43 / calc(1 - var(--st-page-bg-image-opacity, 0.3))),
      rgb(15 24 43 / calc(1 - var(--st-page-bg-image-opacity, 0.3)))
    ),
    var(--st-page-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

body.st-page:has(.page-wrapper.has-st-page-bg) {
  background-color: transparent;
}

/*
 * Kopfleiste (#st_header) bleibt am Viewport-Oberrand (top: 0, siehe st-chrome-top.css).
 * Kein padding-top auf .page-wrapper – sonst rutscht alles nach unten.
 * Abstand im Fluss nur vor #primary-menu (unter der fixierten Kopfleiste).
 */
.page-wrapper.has-st-page-header-sticky.has-hero-page-bg,
.page-wrapper.has-st-page-header-sticky.has-st-page-bg {
  padding-top: 0;
}

.page-wrapper.has-st-page-header-sticky.has-hero-page-bg > #st_header.st-page-header.is-sticky-top {
  top: 0;
}

.page-wrapper.has-st-page-header-sticky > #primary-menu {
  margin-top: var(
    --st-page-header-spacer-height,
    var(--st-page-header-height-start, 110px)
  );
}

.page-wrapper.has-st-page-bg #st_hero.st-hero--solo-shell {
  display: block;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.page-wrapper.has-st-page-bg.has-hero-page-bg > #main-container {
  position: relative;
  z-index: 3;
}

/* Headlines (Wetter/Ticker): Breite */
#page-wrapper > #st_headline_1,
#page-wrapper > #st_headline_2 {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: min(100%, var(--st-layout-max-width, 2056px));
  margin-inline: auto;
  box-sizing: border-box;
}

.page-wrapper #st_headline_1,
.page-wrapper #st_headline_2 {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-10, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.page-wrapper #st_headline_1 .tradingview-tickers:not(.wdsb-tradingview-tickers--consent-denied):not(:has(script[type="text/plain"][data-name="tradingview"])) {
  flex-shrink: 0;
}

.page-wrapper.has-st-page-bg {
  background-color: transparent;
}

.page-wrapper.has-st-page-bg > #header,
.page-wrapper.has-st-page-bg > #st_header,
.page-wrapper.has-st-page-bg > .region-highlighted,
.page-wrapper.has-st-page-bg > #highlighted {
  position: relative;
  z-index: 5;
  background-color: transparent;
}

.page-wrapper.has-st-page-bg > #primary-menu {
  position: relative;
  z-index: 5;
  background-color: transparent !important;
}

.page-wrapper.has-st-page-bg > #primary-menu .primary-menu-inner {
  background: transparent !important;
  background-color: transparent !important;
}

#st_header,
#st_header.solo-outer,
#st_header .header-inner,
#st_header .solo-inner {
  background: transparent !important;
  background-color: transparent !important;
}

#st_header:not(.is-sticky-top)::before,
#st_chrome > #st_header:not(.is-sticky-top)::before {
  display: none !important;
  content: none !important;
}

.page-wrapper.has-st-page-bg #main-container,
.page-wrapper.has-st-page-bg #main-container-inner,
.page-wrapper.has-st-page-bg #sidebar-box-main {
  position: relative;
  z-index: 3;
  background-color: var(--st-bg-site, var(--bg, #0f182b));
}

@media (prefers-reduced-motion: reduce) {
  body.st-page:has(.page-wrapper.has-st-page-bg)::before {
    position: absolute;
  }
}
#st_headline_1.st-headline--1 {
	padding: clamp(5px, calc(1.599px + 0.895vw), 20px) clamp(10px, calc(-12.673px + 5.967vw), 110px) 0;
}