/**
 * Footer (#st_footer): 1180px wie #st_body, gleiche Farben/Padding, kein Hero-Hintergrund.
 */

#st_footer {
  --st-body-bg-light: color-mix(in srgb, var(--st-dunkel-light) 11%, var(--st-hell-light));
  --st-body-bg-dark: var(--color-2e4161);
}

#st_footer.st-footer,
footer.st-footer,
.region-footer.st-footer {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  /*
   * Über fixiertem Hero-Bild (z-index 0) und #st_layout (z-index 3) – sonst scheint
   * die Saarschleife durch, Text wirkt „unsichtbar“ (falsche Farbe auf dem Bild).
   */
  position: relative;
  z-index: 10;
  isolation: isolate;
  background-color: var(--st-chrome-bg-site, var(--color-0f182b));
  border-top: none;
}

.st-page > #st_footer {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

.st-footer__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 1180px;
  width: 1180px;
  max-width: 100%;
  margin: 0;
  /* Inhalt (Logo + Menüs + Copyright) + 110px vertikal gesamt */
  padding-block: 55px;
  padding-inline: 110px;
  background-color: var(--st-body-bg-light);
  /* Footer-Text immer #fff (unabhängig Light/Dark) */
  --st-footer-text: var(--color-fff);
  --st-footer-text-muted: var(--color-fff);
  --st-footer-link: var(--color-fff);
  --st-footer-link-hover: var(--color-ff4f93);
  --st-text: var(--st-footer-text);
  --st-text-muted: var(--st-footer-text-muted);
  --st-link: var(--st-footer-link);
  --st-link-hover: var(--st-footer-link-hover);
  --st-border: color-mix(in srgb, var(--st-dunkel-light, var(--color-172033)) 12%, var(--st-hell-light, var(--color-f8f4e3)));
  --r-tx: var(--st-footer-text);
  --r-tx-lk: var(--st-footer-link);
  --r-tx-lk-h: var(--st-footer-link-hover);
  --r-lk: var(--st-footer-link);
  --r-lk-h: var(--st-footer-link-hover);
  color: var(--st-footer-text);
}

.st-footer__brand {
  margin: 0 0 var(--st-space-10);
  padding: 0;
  text-align: center;
  min-height: 2.5rem;
}

#st_footer .st-footer__brand,
#footer-menu .st-footer__brand {
  display: block;
  width: 100%;
  min-height: var(--st-logo-height-capped, 2.5rem);
}

#st_footer .st-footer__brand-inner,
#footer-menu .st-footer__brand-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}

#st_footer .article-header__logo-link,
#st_footer .st-footer__brand-link {
  display: block;
  margin-inline: auto;
  overflow: visible;
  width: var(--st-chrome-header-logo-width-expanded, var(--st-logo-width-capped, 280px));
  max-width: var(--st-logo-width-max, 480px);
  height: var(--st-chrome-header-logo-height-expanded, var(--st-logo-height-capped, auto));
  max-height: var(--st-logo-height-max, none);
  line-height: 0;
  text-decoration: none;
}

/*
 * #footer-menu: wie #st_header — vw-linear über --st-logo-width-capped (nicht JS-Pixel
 * von --st-chrome-header-logo-width-expanded auf :root, sonst keine Größenänderung).
 */
#footer-menu .article-header__logo-link,
#footer-menu .st-footer__brand-link {
  display: block;
  margin-inline: auto;
  overflow: visible;
  width: var(--st-footer-menu-logo-width, var(--st-logo-width-capped));
  max-width: var(--st-logo-width-max);
  height: var(--st-footer-menu-logo-height, var(--st-logo-height-capped));
  max-height: var(--st-logo-height-max);
  line-height: 0;
  text-decoration: none;
}

#st_footer .article-header__logo-link:focus-visible,
#footer-menu .article-header__logo-link:focus-visible {
  outline: 2px solid var(--st-accent, var(--color-c00055));
  outline-offset: 2px;
}

#st_footer .article-header__logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center center;
  filter: brightness(0) invert(1) !important;
}

#footer-menu .article-header__logo {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--st-footer-menu-logo-height, var(--st-logo-height-capped)) !important;
  object-fit: contain;
  object-position: center center;
  filter: brightness(0) invert(1) !important;
}

.st-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--st-space-20);
  width: 100%;
}

/* Footer links / Mitte / rechts: Solo .region-inner-Padding oben/unten aus */
#footer-container .footer-box-first-inner,
#footer-container .footer-box-second-inner,
#footer-container .footer-box-third-inner,
#footer-box-first .footer-box-inner,
#footer-box-second .footer-box-inner,
#footer-box-third .footer-box-inner,
#st_footer .st-footer__nav--footer-left,
#st_footer .st-footer__nav--footer-center,
#st_footer .st-footer__nav--footer-right,
#st_footer .st-footer__block--footer-left,
#st_footer .st-footer__block--footer-center,
#st_footer .st-footer__block--footer-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#block-saarland-today-footerlinks,
#footer-container .menu--footer-left {
  text-align: right;
}

#block-saarland-today-footerlinks .menu,
#footer-container .menu--footer-left .menu {
  align-items: flex-end;
  text-align: right;
}

#block-saarland-today-footermitte,
#footer-container .menu--footer-center {
  text-align: center;
}

#block-saarland-today-footermitte .menu,
#footer-container .menu--footer-center .menu {
  align-items: center;
  text-align: center;
}

#block-saarland-today-footerrechts,
#footer-container .menu--footer-right {
  text-align: left;
}

#block-saarland-today-footerrechts .menu,
#footer-container .menu--footer-right .menu {
  align-items: flex-start;
  text-align: left;
}

#footer-container .block-menu.navigation .menu,
#footer-container .menu--footer-left .menu,
#footer-container .menu--footer-center .menu,
#footer-container .menu--footer-right .menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--st-space-10);
}

/*
 * Footer-Menüs: Schrift nur auf Links (wie #st_submenu .nav__menu-link).
 * Größe: st-footer-logo.js setzt die Logo-Skalierung direkt; CSS-Fallback über Menü-Tokens.
 */
.page-wrapper #footer-container a.nav__menu-link,
.page-wrapper #footer-container a.nav__menu-link .menu__url-title {
  line-height: 1.4;
  color: var(--color-fff) !important;
  -webkit-text-fill-color: var(--color-fff) !important;
}

.st-footer__nav {
  margin: 0;
  padding: 0;
}

.st-footer__nav .menu,
.st-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--st-space-10);
}

#st_footer .st-footer__nav .menu-item a,
#st_footer .st-footer__nav a.nav__menu-link {
  line-height: 1.4;
  color: var(--color-fff) !important;
  -webkit-text-fill-color: var(--color-current);
  background: var(--color-transparent) !important;
  text-decoration: none;
}

/* Solo: .page-wrapper li.nav__menu-item – Footer nutzt .menu-item, aber Chrome-Farben ausschließen */
.st-layout-page #st_footer .st-footer__nav a.nav__menu-link,
.page-wrapper #st_footer .st-footer__nav a.nav__menu-link {
  color: var(--color-fff) !important;
}

#st_footer .st-footer__nav .menu-item a:hover,
#st_footer .st-footer__nav a.nav__menu-link:hover {
  color: var(--st-footer-link-hover, var(--st-accent, var(--color-b0004b))) !important;
}

#st_footer .st-footer__nav .menu-item a:focus-visible,
#st_footer a:focus-visible {
  outline: 2px solid var(--st-accent, var(--color-c00055));
  outline-offset: 2px;
}

#st_footer .st-footer__nav .menu-item a[aria-current="page"],
#st_footer .st-footer__nav a.is-active {
  color: var(--color-fff) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.st-footer__copyright {
  margin-top: var(--st-space-10);
  padding-top: var(--st-space-10);
  border-top: 1px solid var(--st-border);
  color: var(--color-fff);
  text-align: center;
}

#st_footer .st-footer__copyright a {
  color: var(--color-fff) !important;
}

#st_footer .st-footer__copyright a:hover {
  color: var(--st-footer-link-hover, var(--st-accent, var(--color-b0004b))) !important;
}

@media (min-width: 768px) {
  .st-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--st-space-20) clamp(16px, 2.5vw, 40px);
  }

  .st-footer__nav--footer-left .menu {
    align-items: flex-end;
    text-align: right;
  }

  .st-footer__nav--footer-center .menu {
    align-items: center;
    text-align: center;
  }

  .st-footer__nav--footer-right .menu {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-color-scheme: dark) {
  #st_footer .st-footer__inner {
    --st-border: var(--color-a8a8a8);
    --st-accent: var(--color-c00055);
    background: var(--st-body-bg-dark);
  }
}

body.darkmode--activated #st_footer .st-footer__inner {
  --st-border: var(--color-a8a8a8);
  background: var(--st-body-bg-dark);
}
/*
 * Footer-Hauptmenüs + Logo: immer #fff (schlägt Light-Mode #000 auf .page-wrapper).
 */
html[data-color-scheme='light'] .page-wrapper :is(#st_footer, #footer-menu, #footer-container) :is(
  .st-footer__nav a,
  .st-footer__nav .nav__menu-link,
  .st-footer__nav .menu__url-title,
  .nav__menu-link,
  .nav__menu-link .menu__url-title,
  .menu-item a
),
html[data-color-scheme='dark'] .page-wrapper :is(#st_footer, #footer-menu, #footer-container) :is(
  .st-footer__nav a,
  .st-footer__nav .nav__menu-link,
  .st-footer__nav .menu__url-title,
  .nav__menu-link,
  .nav__menu-link .menu__url-title,
  .menu-item a
),
body.darkmode--activated .page-wrapper :is(#st_footer, #footer-menu, #footer-container) :is(
  .st-footer__nav a,
  .st-footer__nav .nav__menu-link,
  .st-footer__nav .menu__url-title,
  .nav__menu-link,
  .nav__menu-link .menu__url-title,
  .menu-item a
),
.page-wrapper :is(#st_footer, #footer-menu, #footer-container) :is(
  .st-footer__nav a,
  .st-footer__nav .nav__menu-link,
  .st-footer__nav .menu__url-title,
  .nav__menu-link,
  .nav__menu-link .menu__url-title,
  .menu-item a
) {
  color: var(--color-fff) !important;
  -webkit-text-fill-color: var(--color-fff) !important;
}

@media (max-width: 1680px) {
  #st_footer .st-footer__inner {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  #st_footer .st-footer__inner {
    padding-inline: clamp(20px, 5vw, 110px);
  }

  #copyright #copyright-inner.copyright-inner {
    padding-inline: clamp(20px, 5vw, 110px);
  }
}

/*
 * Solo sb-992: .solo-col-1-1-1 erst ab 62rem – darunter stapeln die Spalten.
 * Alle Footer-Menüpunkte zentrieren (links/Mitte/rechts).
 */
@media (max-width: 61.99875rem) {
  #footer-container .footer-box-first-inner,
  #footer-container .footer-box-second-inner,
  #footer-container .footer-box-third-inner,
  #footer-box-first .footer-box-inner,
  #footer-box-second .footer-box-inner,
  #footer-box-third .footer-box-inner {
    text-align: center;
  }

  #footer-container .block-menu.navigation,
  #block-saarland-today-footerlinks,
  #block-saarland-today-footermitte,
  #block-saarland-today-footerrechts,
  #footer-container .menu--footer-left,
  #footer-container .menu--footer-center,
  #footer-container .menu--footer-right {
    text-align: center;
  }

  #footer-container .block-menu.navigation .menu,
  #block-saarland-today-footerlinks .menu,
  #block-saarland-today-footermitte .menu,
  #block-saarland-today-footerrechts .menu,
  #footer-container .menu--footer-left .menu,
  #footer-container .menu--footer-center .menu,
  #footer-container .menu--footer-right .menu {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #st_footer .st-footer__inner {
    padding-block: 55px;
    padding-inline: var(--st-space-20);
  }

  .st-footer__grid {
    grid-template-columns: 1fr;
  }

  .st-footer__nav--footer-left .menu,
  .st-footer__nav--footer-center .menu,
  .st-footer__nav--footer-right .menu {
    align-items: center;
    text-align: center;
  }
}

/*
 * #footer-menu + #footer-container: transparent über Page-BG (wie zuvor).
 * z-index: 10 damit weißer Footer-Text über dem fixierten Hintergrund liegt.
 */
#footer-menu.footer-menu,
#footer-container.footer-container,
#footer-menu .footer-menu-inner,
#footer-container .footer-container-inner,
#footer-container .footer-box-inner,
#footer-container .region-inner {
  position: relative;
  z-index: 10;
  background: var(--color-transparent) !important;
  background-color: var(--color-transparent) !important;
  --r-bg: var(--color-transparent);
}

/* Solo fade-inner: Footer-Spalten sofort sichtbar (wie #footer-menu) */
#footer-container .fade-inner {
  opacity: 1 !important;
  transition: none !important;
}

/*
 * Solo-Copyright: Verlauf wie Header, nur nach unten deckend.
 * Die Breitenbegrenzung liegt nur auf dem Inhalt, nicht als sichtbarer Kasten.
 */
#copyright.copyright {
  --st-body-bg-light: color-mix(in srgb, var(--st-dunkel-light) 11%, var(--st-hell-light));
  --st-body-bg-dark: var(--color-2e4161);
  --st-copyright-gradient-rgb-light: 248 244 227;
  --st-copyright-gradient-rgb-dark: 46 65 97;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 10;
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgb(var(--st-copyright-gradient-rgb-light) / 25%) 0%,
    rgb(var(--st-copyright-gradient-rgb-light) / 100%) 100%
  ) !important;
  background-color: var(--color-transparent) !important;
  --r-bg: rgb(var(--st-copyright-gradient-rgb-light) / 100%);
  color: var(--color-fff);
  --r-tx: var(--color-fff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#copyright #copyright-inner.copyright-inner {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 1180px;
  flex-direction: column;
  align-items: center;
  gap: var(--st-space-10, 10px);
  width: 1180px;
  max-width: 100%;
  padding-block: var(--st-space-20, 20px) !important;
  padding-inline: 110px;
  text-align: center;
  background: var(--color-transparent) !important;
  background-color: var(--color-transparent) !important;
  --r-bg: var(--color-transparent);
}

@media (prefers-color-scheme: dark) {
  #copyright.copyright {
    background: linear-gradient(
      180deg,
      rgb(var(--st-copyright-gradient-rgb-dark) / 25%) 0%,
      rgb(var(--st-copyright-gradient-rgb-dark) / 100%) 100%
    ) !important;
    background-color: var(--color-transparent) !important;
    --r-bg: rgb(var(--st-copyright-gradient-rgb-dark) / 100%);
  }

  #copyright #copyright-inner.copyright-inner {
    background: var(--color-transparent) !important;
    background-color: var(--color-transparent) !important;
    --r-bg: var(--color-transparent);
  }
}

body.darkmode--activated #copyright.copyright {
  background: linear-gradient(
    180deg,
    rgb(var(--st-copyright-gradient-rgb-dark) / 25%) 0%,
    rgb(var(--st-copyright-gradient-rgb-dark) / 100%) 100%
  ) !important;
  background-color: var(--color-transparent) !important;
  --r-bg: rgb(var(--st-copyright-gradient-rgb-dark) / 100%);
}

body.darkmode--activated #copyright #copyright-inner.copyright-inner {
  background: var(--color-transparent) !important;
  background-color: var(--color-transparent) !important;
  --r-bg: var(--color-transparent);
}

#copyright .field__item p {
  margin: 0;
}

/*
 * Gesamter Footer-Bereich: Text/Links immer #fff (schlägt st-color-scheme Light/Dark).
 * #footer-menu · #footer-container · #copyright · #st_footer · #st_copyright
 */
html[data-color-scheme='light'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright),
html[data-color-scheme='dark'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright),
body.darkmode--activated .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright),
.page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) {
  --st-footer-text: var(--color-fff);
  --st-footer-text-muted: var(--color-fff);
  --st-footer-link: var(--color-fff);
  --st-text: var(--color-fff);
  --st-text-muted: var(--color-fff);
  --st-link: var(--color-fff);
  --r-tx: var(--color-fff);
  --r-tx-lk: var(--color-fff);
  --r-lk: var(--color-fff);
  color: var(--color-fff) !important;
}

html[data-color-scheme='light'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) :where(
  a,
  p,
  span,
  li,
  dt,
  dd,
  label,
  .nav__menu-link,
  .copyright-first,
  .copyright-second,
  .copyright-formatted,
  .st-footer__copyright,
  .field,
  .field__item,
  .field__label
),
html[data-color-scheme='dark'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) :where(
  a,
  p,
  span,
  li,
  dt,
  dd,
  label,
  .nav__menu-link,
  .copyright-first,
  .copyright-second,
  .copyright-formatted,
  .st-footer__copyright,
  .field,
  .field__item,
  .field__label
),
body.darkmode--activated .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) :where(
  a,
  p,
  span,
  li,
  dt,
  dd,
  label,
  .nav__menu-link,
  .copyright-first,
  .copyright-second,
  .copyright-formatted,
  .st-footer__copyright,
  .field,
  .field__item,
  .field__label
),
.page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) :where(
  a,
  p,
  span,
  li,
  dt,
  dd,
  label,
  .nav__menu-link,
  .copyright-first,
  .copyright-second,
  .copyright-formatted,
  .st-footer__copyright,
  .field,
  .field__item,
  .field__label
) {
  color: var(--color-fff) !important;
  -webkit-text-fill-color: var(--color-current);
}

html[data-color-scheme='light'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:hover,
html[data-color-scheme='light'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:focus-visible,
html[data-color-scheme='dark'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:hover,
html[data-color-scheme='dark'] .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:focus-visible,
body.darkmode--activated .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:hover,
body.darkmode--activated .page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:focus-visible,
.page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:hover,
.page-wrapper :is(#footer-menu, #footer-container, #copyright, #st_footer, #st_copyright) a:focus-visible {
  color: var(--st-footer-link-hover, var(--color-ff4f93)) !important;
}
.social-items .wdsb-article-share__label:nth-child(7) {
 padding-bottom: 10px;}
