/* Dark Mode */
body.dark .ms-theme-toggle {
  background-color: var(--ms-bg-dark-2);
}

body.dark .ms-theme-toggle::after {
  background-color: var(--ms-white);

  mask: url('/files/ms-theme/icons/sun.svg') center/22px no-repeat;
  -webkit-mask: url('/files/ms-theme/icons/sun.svg') center/22px no-repeat;
}

/* =============================================== */
/* Desktop Navigation – Dark Mode                  */
/* =============================================== */

body.dark .ms-main-nav ul.level_1 > li > a,
body.dark .ms-main-nav ul.level_1 > li > strong.active {
  color: var(--ms-text);
}

body.dark .ms-main-nav ul.level_1 > li > a:hover {
  background: var(--ms-bg-light-3);
  color: var(--ms-primary);
}

body.dark .ms-main-nav ul.level_1 > li > strong.active {
  background: var(--ms-bg-light-3);
  color: var(--ms-primary);
}

/* =============================================== */
/* Mobile Navigation – Dark Mode                   */
/* =============================================== */

@media (max-width: 1024px) {
  body.dark .ms-main-nav {
    background: var(--ms-bg-light-1);
  }

  body.dark .ms-main-nav ul li a,
  body.dark .ms-main-nav ul li strong.active {
    color: var(--ms-text);
  }

  body.dark .ms-main-nav ul li a:hover {
    background: var(--ms-bg-light-2);
    color: var(--ms-primary);
  }

  body.dark .ms-main-nav ul li strong.active {
    background: var(--ms-bg-light-2);
    color: var(--ms-primary);
  }

  body.dark .ms-nav-overlay {
  background: var(--ms-overlay-dark);
}

}


/* ========================================================================== */
/* 13) DARK MODE OVERRIDES                                                    */
/* ========================================================================== */

/* Back to top – Dark Mode */
body.dark {
  .ms-back-to-top {
    background: var(--ms-primary-light);
    color: var(--ms-dark);
    box-shadow: 0 10px 20px var(--ms-shadow-dark-medium);

    &:hover {
      background: var(--ms-primary);
      color: var(--ms-white);
      box-shadow: 0 15px 30px var(--ms-shadow-dark-strong);
    }
  }

  /* Accordion – Dark Mode */
  .handorgel__header__button {
    background: var(--ms-bg-light-1);
    color: var(--ms-text);

    &:hover {
      background: var(--ms-bg-light-2);
    }

    &::after {
      color: var(--ms-primary);
    }
  }

  .handorgel__header--opened .handorgel__header__button {
    background: var(--ms-bg-light-2);
    color: var(--ms-primary);
  }

  .handorgel__content {
    background: var(--ms-bg-light-2);
    color: var(--ms-text);
    border-top: 1px solid var(--ms-border-color);
  }

  /* Button – Dark Mode */
  a.ms-button {
    background-color: var(--ms-primary-light);
    color: var(--ms-dark);

    &:hover {
      background-color: var(--ms-primary);
      color: var(--ms-white);
    }
  }
}

/* content-image */
body.dark .content-image {
  > h2,
  > h3,
  > h4 {
    color: var(--ms-white);
  }

  figure {
    a:hover {
      box-shadow: 0 10px 20px var(--ms-shadow-dark-medium);
    }

    figcaption {
      color: var(--ms-text);
      opacity: 0.9;
    }
  }
}

/* =============================================== */
/* Download (Single) – Dark Mode                   */
/* =============================================== */

body.dark .content-download a {
  color: var(--ms-text);
}

body.dark .content-download a::before {
  background-color: var(--ms-bg-light-2);
  border-color: var(--ms-border-color);
}

body.dark .content-download a:hover {
  color: var(--ms-primary);
}

body.dark .content-download a:hover::before {
  background-color: var(--ms-primary);
  border-color: var(--ms-primary);
}



/* --- Hyperlink-Element --- */

.content-hyperlink {
  margin: var(--ms-space-7) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-hyperlink :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: var(--ms-space-3);
}