/**
 * Solo-Shell + globale Elemente an semantische Tokens (--bg, --text, --link, …).
 */

html[data-color-scheme='light'] {
  color-scheme: light;
}

html[data-color-scheme='dark'] {
  color-scheme: dark;
}

#page-wrapper:not(.has-st-page-bg),
.page-wrapper:not(.has-st-page-bg) {
  background-color: var(--bg);
  color: var(--text);
}

.page-wrapper.has-st-page-bg {
  color: var(--text);
}

#page-wrapper a,
.page-wrapper a {
  color: var(--link);
}

#page-wrapper a:hover,
#page-wrapper a:focus-visible,
.page-wrapper a:hover,
.page-wrapper a:focus-visible {
  color: var(--st-link-hover, var(--link));
}

#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper h5,
#page-wrapper h6,
.page-wrapper :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text);
}

#header,
#header-inner,
#st_header,
#st_header .header-inner,
#primary-menu,
#primary-menu-inner,
.region-highlighted,
#highlighted {
  background-color: var(--st-chrome-bg, var(--bg));
  color: var(--st-chrome-text, var(--text));
}

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

#header a,
#primary-menu a {
  color: var(--st-chrome-text, var(--link));
}

#main-container,
#main-container-inner,
.region-inner.main-box-inner,
.sidebar-box-main-inner {
  background-color: var(--st-bg-page, var(--bg));
  color: var(--st-text, var(--text));
}

.region-outer.main-box {
  background-color: var(--st-bg-card, var(--card-bg));
  color: var(--st-text, var(--text));
}

.region-outer.main-box-sides {
  background-color: var(--st-bg-card, var(--card-bg));
}

/*
 * Modus Light/Dark: gesamter lesbarer Text #000 bzw. #fff (100 %, unabhängig von Einzel-Overrides).
 */
html[data-color-scheme='light'] :is(#page-wrapper, .page-wrapper),
html[data-color-scheme='light'] :is(#st_body, #st_body_inner, #st_footer, #main-container, #sidebar-box-main) {
  color: #000;
  --text: #000;
  --st-text: #000;
  --st-text-muted: #000;
  --muted-text: #000;
  --link: #000;
  --st-link: #000;
  --r-tx: #000;
  --r-h1: #000;
  --r-h2: #000;
  --r-h3: #000;
  --r-lk: #000;
}

html[data-color-scheme='dark'] :is(#page-wrapper, .page-wrapper),
html[data-color-scheme='dark'] :is(#st_body, #st_body_inner, #st_footer, #main-container, #sidebar-box-main),
body.darkmode--activated :is(#page-wrapper, .page-wrapper),
body.darkmode--activated :is(#st_body, #st_body_inner, #st_footer, #main-container, #sidebar-box-main) {
  color: #fff;
  --text: #fff;
  --st-text: #fff;
  --st-text-muted: #fff;
  --muted-text: #fff;
  --link: #fff;
  --st-link: #fff;
  --r-tx: #fff;
  --r-h1: #fff;
  --r-h2: #fff;
  --r-h3: #fff;
  --r-lk: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) :is(#page-wrapper, .page-wrapper),
  :root:not([data-color-scheme='light']) :is(#st_body, #st_body_inner, #st_footer, #main-container, #sidebar-box-main) {
    color: #fff;
    --text: #fff;
    --st-text: #fff;
    --st-text-muted: #fff;
    --muted-text: #fff;
    --link: #fff;
    --st-link: #fff;
    --r-tx: #fff;
    --r-h1: #fff;
    --r-h2: #fff;
    --r-h3: #fff;
    --r-lk: #fff;
  }
}

html[data-color-scheme='light'] :is(#page-wrapper, .page-wrapper) :where(
    p,
    span,
    li,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    legend,
    th,
    td,
    caption,
    blockquote,
    figcaption,
    cite,
    time,
    address,
    a,
    strong,
    em,
    small,
    .field,
    .field__item,
    .field__label,
    .field__content,
    .article-text-block,
    .article-subtitle,
    .category-card__title,
    .category-card__meta,
    .grid-category,
    .st-hero__title,
    .st-hero__description,
    .st-hero__editorial,
    .st-hero__copyright-text,
    .breadcrumb-menu,
    .breadcrumb-title,
    .node__title,
    .views-field,
    .comment-form,
    .form-item__label
  ),
html[data-color-scheme='light'] :is(#st_hero_meta, #st_footer) :where(*) {
  color: #000 !important;
}

html[data-color-scheme='dark'] :is(#page-wrapper, .page-wrapper) :where(
    p,
    span,
    li,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    legend,
    th,
    td,
    caption,
    blockquote,
    figcaption,
    cite,
    time,
    address,
    a,
    strong,
    em,
    small,
    .field,
    .field__item,
    .field__label,
    .field__content,
    .article-text-block,
    .article-subtitle,
    .category-card__title,
    .category-card__meta,
    .grid-category,
    .st-hero__title,
    .st-hero__description,
    .st-hero__editorial,
    .st-hero__copyright-text,
    .breadcrumb-menu,
    .breadcrumb-title,
    .node__title,
    .views-field,
    .comment-form,
    .form-item__label
  ),
html[data-color-scheme='dark'] :is(#st_hero_meta, #st_footer) :where(*),
body.darkmode--activated :is(#page-wrapper, .page-wrapper) :where(
    p,
    span,
    li,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    legend,
    th,
    td,
    caption,
    blockquote,
    figcaption,
    cite,
    time,
    address,
    a,
    strong,
    em,
    small,
    .field,
    .field__item,
    .field__label,
    .field__content,
    .article-text-block,
    .article-subtitle,
    .category-card__title,
    .category-card__meta,
    .grid-category,
    .st-hero__title,
    .st-hero__description,
    .st-hero__editorial,
    .st-hero__copyright-text,
    .breadcrumb-menu,
    .breadcrumb-title,
    .node__title,
    .views-field,
    .comment-form,
    .form-item__label
  ),
body.darkmode--activated :is(#st_hero_meta, #st_footer) :where(*) {
  color: #fff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) :is(#page-wrapper, .page-wrapper) :where(
      p,
      span,
      li,
      dt,
      dd,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      label,
      legend,
      th,
      td,
      caption,
      blockquote,
      figcaption,
      cite,
      time,
      address,
      a,
      strong,
      em,
      small,
      .field,
      .field__item,
      .field__label,
      .field__content,
      .article-text-block,
      .article-subtitle,
      .category-card__title,
      .category-card__meta,
      .grid-category,
      .st-hero__title,
      .st-hero__description,
      .st-hero__editorial,
      .st-hero__copyright-text,
      .breadcrumb-menu,
      .breadcrumb-title,
      .node__title,
      .views-field,
      .comment-form,
      .form-item__label
    ),
  :root:not([data-color-scheme='light']) :is(#st_hero_meta, #st_footer) :where(*) {
    color: #fff !important;
  }
}