/**
 * ST-Content-Layout – Shell (Chrome, Hero, 3-Spalten-Stage).
 * Rubrik-Karten/Listen: st-category-layout.css (.category-card, .st-category-row, …).
 */

/* ── Layout-Page ─────────────────────────────────────────────── */
.st-layout-page {
  --st-inner-submenu-gap: 100px;
  --st-body-header-gap: 100px;
  --st-hero-lift: 150px;
  /* Abstand #st_hero_meta zur Oberkante #main-container (überall gleich) */
  --st-hero-meta-main-gap: 150px;
  /*
   * Restlicher Viewport unter #st_chrome → Zeile 1 in .st-page.
   * Oberkante #st_layout = untere Browserkante (Lift nur optisch per negativem margin, nicht +Höhe).
   * Wird per chrome-sticky-scroll.js aus innerHeight nachgemessen (--st-viewport-below-chrome).
   */
  --st-viewport-below-chrome: calc(
    100dvh - var(--st-chrome-flow-height, var(--st-chrome-height-effective, var(--st-chrome-height, 187px)))
  );
  --st-hero-stage-height: var(--st-viewport-below-chrome);
  --st-hero-meta-below-header: 100px;
  /* Header/Logo: siehe :root in saarland-tokens.css (--st-header-height, --st-logo-height) */
  --st-body-bg-light: color-mix(in srgb, var(--st-dunkel-light) 11%, var(--st-hell-light));
  --st-body-bg-dark: #2e4161;
  /* Abstand Werbung unten → Footer-Logo (nur padding-top am Footer, nicht + #st_body unten) */
  --st-body-footer-gap: 105px;
  /* #st_body / #st_headline_1: 10px @ 380px vw → 110px @ 2056px vw (linear 100vw) */
  --st-body-padding-fluid: clamp(10px, calc(10px + (100vw - 380px) * 100 / 1676), 110px);
  --st-headline-1-padding-fluid: clamp(
    10px,
    calc(10px + (100vw - var(--st-logo-vw-min, 380px)) * 100 / 1676),
    110px
  );
  /* Werbe-Slots oben/unten: 10px @ 389px vw → 110px @ 2056px vw */
  --st-ad-slot-margin-inline: clamp(10px, calc(10px + (100vw - 389px) * 100 / 1667), 110px);
  --st-hero-bg: #0f182b;
  /* Hero-Bild: Deckkraft-Verlauf (kein Layer über Text) – oben 75 % sichtbar, unten 25 % */
  --st-hero-image-backdrop: #1b273b;
  --st-hero-image-mask: linear-gradient(
    180deg,
    rgb(0 0 0 / 75%) 0%,
    rgb(0 0 0 / 25%) 100%
  );
  /* Hero-Page-BG: Bildformat 2056×1290 – Anzeige per object-fit:cover, Höhe = Viewport */
  --st-hero-image-w: 2056;
  --st-hero-image-h: 1290;
  --st-hero-bg-cover-height: 100dvh;
  --st-menu-height: 46px;
  --st-chrome-height: calc(var(--st-header-height) + var(--st-menu-height));
  --st-hero-meta-color: var(--st-chrome-text);
  --st-hero-meta-muted: color-mix(in srgb, var(--st-chrome-text) 75%, transparent);
  --st-hero-meta-soft: color-mix(in srgb, var(--st-chrome-text) 88%, transparent);
  --st-hell: var(--st-chrome-text);
  --st-dunkel: var(--st-chrome-bg);
  --st-bg-site: var(--st-chrome-bg-site);
  max-width: 100%;
  overflow: visible;
  background: var(--st-chrome-bg-site);
  color: var(--st-chrome-text);
}

@media (min-width: 1440px) {
  .st-layout-page {
    --st-hero-layer-2-start: 10.125rem;
    --st-hero-layer-2-height: 15.625rem;
  }
}

/* ── Chrome ──────────────────────────────────────────────────── */
/*
 * Topbar (#st_header) position:fixed am Viewport – padding-top = Platzhalter.
 * --st-topbar-fixed-height: chrome-sticky-scroll.js
 */
.st-layout-page > #st_chrome {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  background: transparent;
  padding-top: var(--st-topbar-fixed-height, var(--st-header-height, 120px));
  box-sizing: border-box;
}

.st-layout-page > #st_chrome > #st_header {
  position: fixed;
  top: var(--st-chrome-menu-height, var(--st-menu-height, 46px));
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  pointer-events: auto;
}

#st_header .article-header__toggle,
#st_header .article-header__logo-link {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Verlauf nur am Menü (#st_chrome::before), nicht am Logo-Header */
#st_chrome > #st_header::before {
  content: none;
  display: none;
}

#st_chrome #st_menu,
#st_chrome #st_header .region,
#st_chrome #st_header .article-header {
  position: relative;
  z-index: 1;
}

.st-layout-page > #st_chrome > #st_menu,
.st-layout-page > #st_chrome > #st_menu.st-chrome-menu,
.st-layout-page > #st_chrome > #st_menu.st-main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#st_chrome #st_menu,
#st_chrome #st_menu.st-chrome-menu,
#st_chrome #st_menu.st-main-nav {
  background: var(--st-dunkel) !important;
  background-color: var(--st-dunkel) !important;
}

/* Wetter + Trading: nicht sticky (normale Dokumentenposition) */
#st_chrome_widgets.st-chrome-widgets,
#st_chrome_weather,
#st_chrome_trading {
  position: static;
  top: auto;
}

#st_chrome_widgets.st-chrome-widgets {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--st-space-10, 10px);
  width: 100%;
  max-width: min(100%, var(--st-layout-max-width, 2056px));
  margin-inline: auto;
  padding-inline: var(--st-headline-1-padding-fluid);
  padding-block: var(--st-space-10, 10px) var(--st-space-20, 20px);
  box-sizing: border-box;
}

#st_chrome_weather,
#st_chrome_trading,
#st_chrome_widgets > .block {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#st_chrome_weather .wdsb-weather-panel--geolocate,
#st_chrome_widgets .wdsb-weather-panel--geolocate {
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
}

#st_chrome_weather .wdsb-weather-panel__geolocate-target,
#st_chrome_weather .wdsb-weather-panel--embedded {
  margin: 0;
  padding: 0;
}

#st_chrome_trading .wdsb-tradingview-tickers,
#st_chrome_trading .tradingview-widget-container,
#st_chrome_widgets .wdsb-tradingview-tickers,
#st_chrome_widgets .tradingview-widget-container {
  width: 100%;
  max-width: 100%;
}

/* Header Schicht 1: Logo-Breite per vw; Scroll-Kollaps → chrome-sticky.css */
#st_header {
  box-sizing: border-box;
  width: 100%;
  height: var(--st-header-height);
  max-height: var(--st-header-height);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

#st_header .article-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--st-layout-max-width));
  height: var(--st-header-height);
  margin-inline: auto;
  box-sizing: border-box;
}

#st_header .article-header__logo-link {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: var(--st-logo-width-capped);
  max-width: var(--st-logo-width-max);
  max-height: min(var(--st-logo-height), calc(var(--st-header-height) - var(--st-space-10)));
  line-height: 1.15;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

#st_header .article-header__tagline {
  display: block;
  max-width: 100%;
  font-size: clamp(0.625rem, 0.45rem + 0.35vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--st-chrome-text, var(--st-hell));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * SVG hat width="2760px" im Markup – ohne Box würde die Intrinsic-Breite greifen.
 * Container (.logo-link) setzt Maße; img füllt die Box (aspect-ratio 2760:465).
 */
#st_header .article-header__logo,
.st-layout-page #st_header .article-header__logo {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100% - 1.1em) !important;
  object-fit: contain;
  object-position: center center;
  flex-shrink: 1;
}

/* Toolbar vw: st-chrome-toolbar.css (nach sidebar-overlays) */

#st_header .article-header__toggle--menu,
#st_header .article-header__slot--left {
  grid-column: 1;
  justify-self: start;
}

#st_header .article-header__toggle--login,
#st_header .article-header__slot--right {
  grid-column: 3;
  justify-self: end;
}

#st_header .article-header__slot--center {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
}

/* Branding-Logo: assets/css/st-branding-logo.css (Library design_tokens) */

/*
 * Hero-Hintergrund: fixes Page-BG 2056×1290 (--st-hero-bg-image auf .st-layout-page).
 * Unter #st_chrome + #st_hero sichtbar; kein <img> in #st_hero (.st-hero--page-bg).
 */
.st-layout-page.has-hero-page-bg {
  position: relative;
  z-index: 0;
}

/* Feste Fläche #1B273B hinter dem Hero-Bild (Startseite/Kategorie) */
.st-layout-page.has-hero-page-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: var(--st-hero-bg-cover-height);
  min-height: var(--st-hero-bg-cover-height);
  background-color: var(--st-hero-image-backdrop);
  pointer-events: none;
}

/*
 * Page-BG: fixed, volle Viewport-Höhe (nicht an Breite gekoppelt).
 * Schmales VP: object-fit:cover beschneidet seitlich, Höhe bleibt stabil.
 */
.st-hero--page-bg > .st-hero__media {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: var(--st-hero-bg-cover-height);
  min-height: var(--st-hero-bg-cover-height);
  overflow: hidden;
  pointer-events: none;
}

.st-hero--page-bg .st-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
}

.st-layout-page.has-hero-page-bg > #st_chrome {
  position: relative;
  z-index: auto;
  background: transparent;
}

.st-layout-page.has-hero-page-bg,
.st-layout-page.has-article-hero {
  --st-hero-lift: 0px;
}

.st-layout-page.has-hero-page-bg > .st-page {
  position: relative;
  z-index: 0;
  background-color: transparent;
}

.st-layout-page.has-hero-page-bg .st-page > #st_layout {
  background: var(--st-chrome-bg-site);
}

.st-layout-page.has-hero-page-bg .st-page > #st_hero {
  margin-top: 0;
  --st-hero-lift: 0px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent;
  background-color: transparent;
  /* Hero scrollt unter fixer Topbar – keine Klicks abfangen */
  pointer-events: none;
}

.st-layout-page.has-hero-page-bg .st-page > #st_hero #st_hero_meta,
.st-layout-page.has-hero-page-bg .st-page > #st_hero .st-hero__copyright {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .st-layout-page.has-hero-page-bg::before,
  .st-hero--page-bg > .st-hero__media {
    position: absolute;
  }
}

/* ── Page-Stage (nur ST-Layout-Hülle, nicht html.st-page der Solo-Shell) ── */
.st-layout-page > .st-page {
  --st-hero-layout-gap: 0px;
  display: grid;
  /* Zeile 1: Hero-Stage (Viewport bis #st_layout), Zeile 2: Content */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--st-hero-stage-height) auto;
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  position: relative;
  background: var(--st-chrome-bg-site);
}

/* ── Hero (ST-Layout; Solo-Shell: #st_hero.st-hero--solo-shell in st-page-background.css) ── */
.st-layout-page > .st-page > #st_hero {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  margin-top: calc(-1 * var(--st-hero-lift));
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: transparent;
}

/* Wetter/Ticker zwischen Hero und Layout: in Zeile 1 unten, ohne #st_layout zu verschieben */
.st-layout-page > .st-page > #st_headline_1 {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  pointer-events: auto;
}

#st_hero .st-hero__media {
  z-index: 0;
}

#st_hero:not(.st-hero--empty):not(.st-hero--solo-shell) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--st-space-20), 4vw);
  box-sizing: border-box;
}

.st-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
  background-color: var(--st-hero-image-backdrop);
}

.st-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: var(--st-hero-image-mask);
  mask-image: var(--st-hero-image-mask);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Artikel: Fokus liegt im heroimage-Derivat (2056×1290) – zentriert ausrichten */
.st-layout-page.has-article-hero .st-hero__image {
  object-position: center center;
}

.st-hero__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.st-hero__layer {
  position: absolute;
  width: 100%;
  pointer-events: none;
}

.st-hero__layer--1 {
  inset: 0;
  background: rgb(0 0 0 / 20%);
}

.st-hero__layer--3 {
  inset: 0;
  background: linear-gradient(0deg, var(--st-hero-bg) 0%, transparent 55.8%);
}

.st-hero__layer--4 {
  inset: 0;
  background: radial-gradient(
    ellipse at top right,
    transparent 46%,
    color-mix(in srgb, var(--st-hero-bg) 50%, transparent) 94%
  );
}

.st-hero__layer--5 {
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 56%) 53.36%);
  opacity: 0.35;
}

#st_hero_meta {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  max-width: min(1180px, 100%);
  max-height: 100%;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-20);
  text-align: center;
  pointer-events: auto;
  color: var(--st-hero-meta-color);
  font-size: var(--st-hero-meta-description-font);
}

/* Abstand zwischen Breadcrumb · Titel · Editorial · Beschreibung (flex gap 20px) */
#st_hero_meta > .st-hero__breadcrumb,
#st_hero_meta > h1.st-hero__title,
#st_hero_meta > .st-hero__editorial,
#st_hero_meta > .st-hero__description,
#st_hero_meta > .st-hero__title-row {
  margin: 0;
}

/*
 * Solo-Shell: Hero-Stage bis #main-container, Meta zentriert, 150px über #main-container.
 * --st-hero-stage-height: st-homepage-main-offset.js (negatives margin-bottom = kein Layout-Verschieben).
 */
.page-wrapper:has(#st_hero_meta) {
  position: relative;
}

.page-wrapper:has(#st_hero_meta) > #st_hero:not(.st-hero--empty) {
  position: relative;
  z-index: 1;
  display: block;
  height: var(--st-hero-stage-height, 100dvh);
  min-height: var(--st-hero-stage-height, 100dvh);
  margin: 0;
  margin-bottom: calc(-1 * var(--st-hero-stage-height, 100dvh));
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

.page-wrapper:has(#st_hero_meta) > #st_hero .st-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.page-wrapper:has(#st_hero_meta) > #st_hero .st-hero__overlay > .st-hero__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-wrapper:has(#st_hero_meta) > #st_hero #st_hero_meta,
.page-wrapper:has(#st_hero_meta) #st_hero_meta {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--st-hero-meta-main-gap, 150px);
  transform: translateX(-50%);
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  max-width: min(1180px, 100%);
  max-height: calc(100% - var(--st-hero-meta-main-gap, 150px));
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-20);
  text-align: center;
  overflow-y: auto;
  pointer-events: auto;
}

.page-wrapper:has(#st_hero_meta) > #st_hero .st-hero__copyright {
  z-index: 3;
  pointer-events: auto;
}

.page-wrapper:has(#st_hero_meta) #st_hero_meta.st-hero__meta--top,
.page-wrapper:has(#st_hero_meta) #st_hero_meta.st-hero__meta--bottom,
.page-wrapper:has(#st_hero_meta) #st_hero_meta.category-hero__meta {
  top: auto !important;
  bottom: var(--st-hero-meta-main-gap, 150px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.st-hero__breadcrumb {
  width: 100%;
  margin: 0;
}

.st-hero__breadcrumb .breadcrumb-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-5);
  font-size: var(--st-hero-meta-breadcrumb-font);
  line-height: 1.35;
}

.st-hero__breadcrumb .breadcrumb-menu li,
.st-hero__breadcrumb .breadcrumb-menu li > a,
.st-hero__breadcrumb .breadcrumb-menu li > span,
.st-hero__breadcrumb .breadcrumb-title,
.st-hero__breadcrumb .breadcrumb-sep {
  font-size: inherit;
}

.st-hero__breadcrumb .st-breadcrumb__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

.st-hero__breadcrumb .st-breadcrumb__home .fa-house {
  font-size: 1.1em;
}

#st_hero_meta h1.st-hero__title,
#st_hero_meta h1.category-hero__title,
.page-wrapper:has(#st_hero_meta) #st_hero_meta :is(h1.st-hero__title, h1.category-hero__title),
.st-page--regional #st_hero_meta .st-hero__title-row h1.st-hero__title {
  margin: 0;
  max-width: min(960px, 100%);
  font-size: var(--st-hero-meta-title-font);
  line-height: 1.15;
  font-weight: 700;
  color: var(--st-hero-meta-color);
  text-wrap: balance;
}

#st_hero_meta .st-hero__description,
#st_hero_meta .st-hero__description p,
#st_hero_meta .st-hero__editorial {
  margin: 0;
  max-width: min(720px, 100%);
  font-size: var(--st-hero-meta-description-font);
  line-height: 1.55;
  color: var(--st-hero-meta-soft);
  white-space: pre-line;
}

.st-layout-page #st_hero_meta .st-hero__description p:last-child {
  margin-bottom: 0;
}

.st-layout-page #st_hero_meta .st-hero__editorial {
  font-size: var(--st-hero-meta-editorial-font);
  color: var(--st-hero-meta-muted);
  white-space: normal;
}

.st-layout-page #st_hero_meta .st-hero__editorial .st-hero__author-link {
  color: var(--st-hero-meta-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}

.st-layout-page #st_hero_meta .st-hero__editorial .st-hero__author-link:hover,
.st-layout-page #st_hero_meta .st-hero__editorial .st-hero__author-link:focus-visible {
  color: var(--st-link-hover);
}

.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-menu li,
.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-menu li > a,
.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-menu li > span,
.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-title,
.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-sep {
  color: var(--st-hero-meta-muted);
}

.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-menu li > a {
  color: var(--st-hero-meta-color);
}

.st-layout-page #st_hero_meta .st-hero__breadcrumb .breadcrumb-menu li > a:hover {
  color: var(--st-link-hover);
}

#st_hero_meta .st-hero__submenu {
  margin: 0 var(--st-space-20);
  width: calc(100% - 40px);
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
  font-size: var(--st-menu-font-size);
}

#st_hero_meta .st-hero__submenu .navigation__menubar {
  justify-content: center;
}

.st-hero__copyright {
  position: absolute;
  right: var(--st-space-20);
  bottom: var(--st-space-20);
  z-index: 3;
  pointer-events: auto;
  padding: var(--st-space-5) var(--st-space-10);
  max-width: min(420px, calc(100% - 40px));
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--st-hero-meta-soft);
  background: color-mix(in srgb, var(--st-hero-bg) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-hero-meta-color) 16%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.st-hero__copyright-text::before {
  content: '© ';
}

/* Regional Lead */
.st-page--regional .st-hero__lead {
  width: 100%;
}

.st-page--regional .st-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--st-hero-meta-gap) * 0.75) calc(var(--st-hero-meta-gap) * 1.25);
}

.st-page--regional .st-hero__coat {
  flex: 0 0 auto;
  width: var(--st-hero-meta-coat-size);
  height: var(--st-hero-meta-coat-size);
}

.st-page--regional .st-hero__type {
  display: block;
  width: 100%;
  font-size: var(--st-hero-meta-type-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-hero-meta-muted);
}

/* ── Content-Stage (#st_layout: 3 Spalten + Footer/Copyright volle Breite) ── */
#st_layout {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 250px minmax(0, 1180px) 250px;
  justify-content: center;
  align-content: start;
  column-gap: var(--st-space-20);
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: var(--st-hero-layout-gap, 0) 0 0;
  box-sizing: border-box;
  background-color: var(--bg);
}

#st_layout > #st_headline_2,
#st_layout > #st_copyright,
#st_layout > #st_footer {
  grid-column: 1 / -1;
}

#st_ad_left,
#article_advertising_left {
  grid-column: 1;
  grid-row: 1;
}

#st_body {
  grid-column: 2;
  grid-row: 1;
}

#st_ad_right,
#article_advertising_right {
  grid-column: 3;
  grid-row: 1;
}

/* Headline 1: im Content (#st_body_inner), nicht im Hero */
#st_body_inner > #st_headline_1,
#st_body_inner > .st-headline--1 {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--st-space-20, 20px);
  padding-inline: var(--st-headline-1-padding-fluid);
  box-sizing: border-box;
  pointer-events: auto;
}

#st_headline_1 .region,
#st_headline_1 .block {
  position: static;
  top: auto;
}

/*
 * Kopfzeile: Breite an Viewport koppeln (Wetter max-content / TradingView sonst >100vw).
 */
#st_headline_1,
#st_headline_1.region {
  overflow-x: clip;
}

#st_headline_1 .region,
#st_headline_1 .block,
#st_headline_1 .wdsb-weather-panel,
#st_headline_1 .wdsb-weather-panel--geolocate,
#st_headline_1 .wdsb-weather-panel__card,
#st_headline_1 .wdsb-weather-panel__primary,
#st_headline_1 .wdsb-weather-forecast-scroller,
#st_headline_1 .wdsb-weather-forecast-scroller__clip,
#st_headline_1 .wdsb-weather-forecast-scroller__track,
#st_headline_1 .tradingview-widget-container,
#st_headline_1 .tradingview-widget-container__widget,
#st_headline_1 .field__item,
#st_headline_1 iframe {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#st_headline_1 .wdsb-weather-forecast-scroller {
  min-width: 0;
}

/*
 * Forecast-Band: Breite/Zentrierung/Scroll kommt aus wdsb-weather.css
 * (--scrollable). Kein width:100% / overflow-x:clip auf .wdsb-weather-panel__forecast –
 * sonst kein scrollWidth > clientWidth und Pfeile bleiben aus.
 */
#st_headline_1 .wdsb-weather-forecast-scroller:not(.wdsb-weather-forecast-scroller--scrollable) .wdsb-weather-panel__forecast {
  width: max-content;
  max-width: 100%;
}

#st_headline_1 .wdsb-weather-forecast-scroller.wdsb-weather-forecast-scroller--scrollable .wdsb-weather-panel__forecast {
  width: 100%;
  min-width: 0;
  overflow-x: auto !important;
}

#st_headline_1 .wdsb-weather-panel__forecast-day {
  flex-shrink: 0;
}

#st_layout > .st-headline,
#st_layout > #st_headline_2 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#st_hero .st-headline .region,
#st_hero .st-headline .block,
.st-headline .region,
.st-headline .block {
  max-width: min(1180px, 100%);
  margin-inline: auto;
}

#st_hero > .st-headline--1 .region,
#st_hero > .st-headline--1 .block,
#st_hero > #st_headline_1 .region,
#st_hero > #st_headline_1 .block {
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}

#st_layout > #st_copyright {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

#st_layout > #st_footer {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

/* Werbung bottom → Logo: 105px (nicht #st_body padding-bottom + Footer padding-top) */
#st_layout > #st_footer .st-footer__inner {
  padding-top: var(--st-body-footer-gap, 105px);
}

/* Seiten-Werbung: links und rechts gleiche Spaltenbreite (Artikel + Legal) */
#st_ad_left,
#st_ad_right,
#article_advertising_left,
#article_advertising_right {
  width: 250px;
  min-width: 0;
  max-width: 250px;
  min-height: 400px;
  box-sizing: border-box;
  color: color-mix(in srgb, var(--st-chrome-text) 75%, transparent);
}

#st_ad_left,
#st_ad_right,
#article_advertising_left,
#article_advertising_right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#st_ad_left .ad-indicator,
#st_ad_left .article-ad-indicator,
#st_ad_right .ad-indicator,
#st_ad_right .article-ad-indicator,
#article_advertising_left .ad-indicator,
#article_advertising_left .article-ad-indicator,
#article_advertising_right .ad-indicator,
#article_advertising_right .article-ad-indicator {
  display: block;
  width: 100%;
  margin: 0 0 var(--st-space-5);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  color: color-mix(in srgb, var(--st-chrome-text) 75%, transparent);
}

#article_advertising_left ad-content,
#article_advertising_right ad-content,
#article_advertising_left .block,
#article_advertising_right .block {
  margin-inline: auto;
}

/* max-width je Placement: st-ad-placements.css */

.st-page #st_body {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin: 0;
  padding: var(--st-body-padding-fluid) var(--st-body-padding-fluid) 0;
  background: var(--st-body-bg-light);
  color: var(--st-text);
  --r-tx: var(--st-text);
  --r-h1: var(--st-text);
  --r-lk: var(--st-link);
  --r-lk-h: var(--st-link-hover, var(--st-accent));
}

#st_body_inner {
  padding: 0;
  box-sizing: border-box;
}

#st_content_2 {
  width: 100%;
  box-sizing: border-box;
}

/* Werbe-Slots oben/unten im #st_body (Artikel + Legal): zentriert */
#article_advertising_top a,
#article_advertising_bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  text-align: center;
}

#article_advertising_top {
  margin-top: 0;
  margin-bottom: 35px
}

#article_advertising_bottom {
  margin-bottom: 0;
}

/* Rubrik-/Regional-Übersicht: Werbung oben/unten volle Breite (ohne fluid margin-inline) */
.st-page--category #article_advertising_top,
.st-page--category #article_advertising_bottom,
.st-page--regional #article_advertising_top,
.st-page--regional #article_advertising_bottom {
  margin-inline: 0;
  width: 100%;
}

#article_advertising_top .region,
#article_advertising_bottom .region,
#article_advertising_top .block,
#article_advertising_bottom .block,
#article_advertising_top ad-content,
#article_advertising_bottom ad-content {
  margin-inline: auto;
}

/* max-width je Placement: st-ad-placements.css */

#article_advertising_top .ad-indicator,
#article_advertising_top .article-ad-indicator,
#article_advertising_bottom .ad-indicator,
#article_advertising_bottom .article-ad-indicator {
  width: 100%;
  text-align: center;
}

.page-wrapper .st-layout-page #st_body :is(h1, h2, h3, h4, h5),
.page-wrapper .st-layout-page #st_body .category-title,
.page-wrapper .st-layout-page #st_body .category-regional-infos__name {
  color: var(--st-text);
}

.st-layout-page .page-title,
.st-layout-page #page-title,
.st-layout-page .breadcrumb-wrapper {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  .st-page #st_body {
    --st-text: #f5f7fb;
    --st-text-muted: #a8b0c0;
    --st-bg-card: #1b273b;
    --st-border: #2d3a50;
    --st-link: #ffffff;
    --st-link-hover: #ff4f93;
    --st-accent: #c00055;
    --r-tx: #f5f7fb;
    --r-h1: #f5f7fb;
    color: #f5f7fb;
    background: var(--st-body-bg-dark);
  }

  .page-wrapper .st-layout-page #st_body :is(h1, h2, h3, h4, h5),
  .page-wrapper .st-layout-page #st_body .category-title,
  .page-wrapper .st-layout-page #st_body .category-regional-infos__name,
  .page-wrapper .st-layout-page #st_body .st-regional-panel-cap__title {
    color: #f5f7fb;
  }
}

body.darkmode--activated .st-page #st_body {
  --st-text: #f5f7fb;
  color: #f5f7fb;
  background: var(--st-body-bg-dark);
}

body.darkmode--activated .page-wrapper .st-layout-page #st_body :is(h1, h2, h3, h4, h5),
body.darkmode--activated .page-wrapper .st-layout-page #st_body .category-title,
body.darkmode--activated .page-wrapper .st-layout-page #st_body .category-regional-infos__name,
body.darkmode--activated .page-wrapper .st-layout-page #st_body .st-regional-panel-cap__title {
  color: #f5f7fb;
}

/* Footer-Panel: gleiche Flächenfarbe/Tokens wie #st_body, Rand über #st_layout (--bg) */
#st_footer {
  --st-body-bg-light: color-mix(in srgb, var(--st-dunkel-light) 11%, var(--st-hell-light));
  --st-body-bg-dark: #2e4161;
}

.st-page #st_footer .st-footer__inner,
#st_footer .st-footer__inner {
  background: var(--st-body-bg-light);
  color: var(--st-text);
  --r-tx: var(--st-text);
  --r-lk: var(--st-link);
  --r-lk-h: var(--st-link-hover, var(--st-accent));
}

@media (prefers-color-scheme: dark) {
  .st-page #st_footer .st-footer__inner,
  #st_footer .st-footer__inner {
    --st-text: #f5f7fb;
    --st-text-muted: #a8b0c0;
    --st-border: #2d3a50;
    --st-link: #ffffff;
    --st-link-hover: #ff4f93;
    --st-accent: #c00055;
    --r-tx: #f5f7fb;
    color: #f5f7fb;
    background: var(--st-body-bg-dark);
  }

}

body.darkmode--activated .st-page #st_footer .st-footer__inner,
body.darkmode--activated #st_footer .st-footer__inner {
  --st-text: #f5f7fb;
  color: #f5f7fb;
  background: var(--st-body-bg-dark);
}

@media (max-width: 1680px) {
  #st_layout:not(.st-layout--homepage) {
    grid-template-columns: minmax(0, 1fr);
  }

  #st_layout:not(.st-layout--homepage) #st_ad_left,
  #st_layout:not(.st-layout--homepage) #st_ad_right,
  #st_layout:not(.st-layout--homepage) #article_advertising_left,
  #st_layout:not(.st-layout--homepage) #article_advertising_right {
    display: none;
  }

  #st_layout:not(.st-layout--homepage) #st_body {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1199px) {
  #st_layout.st-layout--homepage {
    grid-template-columns: minmax(0, 1fr);
  }

  #st_layout.st-layout--homepage #st_ad_left,
  #st_layout.st-layout--homepage #st_ad_right {
    display: none;
  }

  #st_layout.st-layout--homepage #st_body {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  .st-page #st_body {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #st_layout {
    padding-top: 1.5rem;
  }
}