/**
 * Sidebar-Overlays – links/rechts, Abdunkelung, über Chrome/Menü (z-index).
 */

.body-overflow {
  overflow: hidden;
}

#overlay-page.st-offcanvas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12000;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: none;
}

#overlay-page.st-offcanvas-overlay.body-overflow {
  display: block;
  pointer-events: auto;
}

#offCanvasLeft,
#offCanvasRight {
  position: fixed;
  z-index: 12010;
  top: 0;
  width: 344px;
  max-width: min(344px, 92vw);
  height: 100dvh;
  display: none;
  background: var(--card-bg, var(--st-bg-site, #0f182b));
  color: var(--text, var(--st-chrome-text, #fff));
  transition: left 0.35s ease, right 0.35s ease;
  box-sizing: border-box;
  overflow: hidden;
}

#offCanvasLeft {
  left: -344px;
  border-right: 1px solid var(--border);
}

#offCanvasRight {
  right: -344px;
  border-left: 1px solid var(--border);
}

#offCanvasLeft.active {
  left: 0;
  display: block;
}

#offCanvasRight.active {
  right: 0;
  display: block;
}

.offCanvasInner {
  height: 100%;
}

.offcanvas-header {
  padding: 10px 80px;
  position: relative;
}

.offCanvas-logo {
  padding: 30px 19px 0;
  position: relative;
}

.offCanvas-logo .logo {
  max-width: 220px;
  height: auto;
  filter: brightness(0);
}

@media (prefers-color-scheme: dark) {
  .offCanvas-logo .logo {
    filter: brightness(0) invert(1);
  }
}

.offCanvasSidebarInner {
  padding: 0 30px;
  overflow-y: auto;
  height: calc(100% - 120px);
}

#offCanvasLeft .offcanvas-close {
  position: absolute;
  top: 5px;
  right: 5px;
}

#offCanvasRight .offcanvas-close {
  position: absolute;
  top: 5px;
  left: 5px;
}

.st-offcanvas-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--st-dunkel);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  font: inherit;
}

.cursor-pointer {
  cursor: pointer;
}

/* ── Linkes Menü ─────────────────────────────────────────────── */
.sidebarLeftMenu-items .link-text,
.sidebarLeftMenu-item .link-text {
  line-height: 40px;
}

.sidebarLeftMenu-sub {
  float: right;
  cursor: pointer;
}

.sidebarLeftMenu-item a svg {
  margin-bottom: 3px;
}

.sidebarLeftMenu-items {
  margin-left: 25px;
}

.home-site .link-text {
  margin-left: 5px;
}

.sidebarLeftMenu-middle .link-text {
  margin-left: 5px;
}

.home-site {
  width: 100%;
  margin-left: -26px;
}

.sidebarLeftMenu-bottom .link-text,
.sidebarLeftMenu-middle .link-text {
  margin-left: 25px;
  line-height: 40px;
}

.sidebarLeftMenu-bottom {
  margin-bottom: 120px;
}

.sidebarLeftMenu-top,
.sidebarLeftMenu-middle,
.sidebarLeftMenu-bottom {
  padding: 30px 0;
}

#block-gavias-batiz-sidebarmenumiddle,
.sidebarLeftMenu-middle {
  border-top: 1px solid color-mix(in srgb, var(--st-dunkel) 25%, var(--st-hell));
}

.sidebarLeftMenu-btn {
  float: right;
  margin-top: 9px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
}

button.sidebarLeftMenu-btn:focus-visible,
.st-offcanvas-close:focus-visible,
#sidebarLeftMenu a:focus-visible,
.article-header__logo-link:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 2px;
}

#sidebarLeftMenu a[aria-current="page"] .link-text {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.sidebarLeftMenu-btn:hover {
  opacity: 0.65;
}

.clickable.sidebarLeftMenu-item {
  margin-left: 20px;
}

.sidebarLeftMenu-item a,
.sidebarLeftMenu-item svg,
.sidebarLeftMenu-items .link-text,
.sidebarLeftMenu-sub {
  color: var(--st-dunkel);
  fill: var(--st-dunkel);
}

.sidebarLeftMenu-item a:hover,
.sidebarLeftMenu-item:hover svg,
.sidebarLeftMenu-items .link-text:hover,
.sidebarLeftMenu-sub:hover {
  color: color-mix(in srgb, var(--st-dunkel) 55%, var(--st-hell));
  fill: color-mix(in srgb, var(--st-dunkel) 55%, var(--st-hell));
}

#sidebarLeftMenu {
  margin-bottom: 30px;
}

#sidebarLeftMenu a {
  text-decoration: none;
}

/* ── Rechtes Login-Panel ─────────────────────────────────────── */
#offCanvasRight .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#offCanvasRight .menu-item {
  width: 100%;
  line-height: 40px;
}

#offCanvasRight .menu-item a {
  color: var(--st-dunkel);
  text-decoration: none;
  display: block;
}

#offCanvasRight .menu-item a:hover {
  color: color-mix(in srgb, var(--st-dunkel) 55%, var(--st-hell));
}

.nologin-block {
  text-align: center;
  color: var(--st-dunkel);
  border: 1px solid var(--st-dunkel);
  padding: 15px;
  margin: 15px 0;
}

.nologin-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.sidebar-right-item {
  position: relative;
  display: block;
  min-height: 46px;
  margin-bottom: 10px;
  padding: 5px;
}

.sidebar-right-item:hover {
  background-color: color-mix(in srgb, var(--st-dunkel) 8%, var(--st-hell));
  border: 1px solid color-mix(in srgb, var(--st-dunkel) 20%, var(--st-hell));
}

.sidebar-right-title {
  position: relative;
  color: var(--st-dunkel);
  font-weight: 600;
  margin: 20px 0 10px;
}

.sidebar-right-alles {
  margin-bottom: 120px;
}

.sidebar-right-alles a {
  color: var(--st-dunkel);
}

/* ── Artikel-Header (fluid 380px–2056px; mit .st-chrome-header → chrome-sticky.css) ── */
#st_header:not(.st-chrome-header) .article-header,
#st_header:not(.st-chrome-header) .article-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: var(--st-header-height);
  align-items: center;
  width: 100%;
  max-width: 1680px;
  height: var(--st-header-height);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Logo-Größe: st-content-layout.css (--st-logo-height), nicht Breiten-clamp */

/* Chrome/Footer dunkel → helles Logo */
.st-layout-page #st_header .article-header__logo,
#st_footer .article-header__logo {
  filter: brightness(0) invert(1);
}

#st_header:not(.st-chrome-header) .article-header__toggle,
#st_header:not(.st-chrome-header) .article-header__toggle {
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--st-hell);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: static;
  top: auto;
  transform: none;
}

#st_header:not(.st-chrome-header) .article-header__toggle--menu,
#st_header:not(.st-chrome-header) .article-header__toggle--menu {
  grid-column: 1;
  justify-self: start;
  margin-left: clamp(20px, calc(20px + (100vw - 380px) * 30 / 1645), 50px);
}

#st_header:not(.st-chrome-header) .article-header__toggle--login,
#st_header:not(.st-chrome-header) .article-header__toggle--login {
  grid-column: 3;
  justify-self: end;
  margin-right: clamp(20px, calc(20px + (100vw - 380px) * 30 / 1645), 50px);
}

#st_header:not(.st-chrome-header) .article-header__toggle--menu .article-header__icon,
#st_header:not(.st-chrome-header) .article-header__toggle--menu .article-header__icon {
  margin-right: clamp(5px, calc(5px + (100vw - 380px) * 10 / 1645), 15px);
}

#st_header:not(.st-chrome-header) .article-header__toggle--login .article-header__icon,
#st_header:not(.st-chrome-header) .article-header__toggle--login .article-header__icon {
  margin-left: clamp(5px, calc(5px + (100vw - 380px) * 10 / 1645), 15px);
}

/* Icon-Größe: st-content-layout.css / saarland-tokens (--st-chrome-icon-size) */
#st_header:not(.st-chrome-header) .article-header__icon {
  font-size: 22px;
  line-height: 1;
}

.article-header__toggle:hover,
.article-header__toggle:focus-visible {
  opacity: 0.85;
}