/* ========================================================================== */
/* 12) ICON SYSTEM (.ms-icon)                                                 */
/* ========================================================================== */

.ms-icon {
  display: inline-block;
  flex-shrink: 0;

  /* Farbe kommt vom Text → Dark Mode automatisch */
  background-color: currentColor;

  /* Masking */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Größen */
.ms-icon--sm {
  width: 16px;
  height: 16px;
}

.ms-icon--md {
  width: 20px;
  height: 20px;
}

.ms-icon--lg {
  width: 28px;
  height: 28px;
}

/* Einzelne Icons */
.ms-icon--download {
  mask-image: url('/files/ms-theme/icons/download.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/download.svg');
}

.ms-icon--file {
  mask-image: url('/files/ms-theme/icons/file.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/file.svg');
}

.ms-icon--pdf {
  mask-image: url('/files/ms-theme/icons/pdf.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/pdf.svg');
}

.ms-icon--zip {
  mask-image: url('/files/ms-theme/icons/zip.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/zip.svg');
}

.ms-icon--arrow-right {
  mask-image: url('/files/ms-theme/icons/arrow-right.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/arrow-right.svg');
}

.ms-icon--arrow-down {
  mask-image: url('/files/ms-theme/icons/arrow-down.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/arrow-down.svg');
}

.ms-icon--menu {
  mask-image: url('/files/ms-theme/icons/menu.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/menu.svg');
}

.ms-icon--close {
  mask-image: url('/files/ms-theme/icons/close.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/close.svg');
}

.ms-icon--check {
  mask-image: url('/files/ms-theme/icons/check.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/check.svg');
}

.ms-icon--mail {
  mask-image: url('/files/ms-theme/icons/mail.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/mail.svg');
}

.ms-icon--phone {
  mask-image: url('/files/ms-theme/icons/phone.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/phone.svg');
}

.ms-icon--external-link {
  mask-image: url('/files/ms-theme/icons/external-link.svg');
  -webkit-mask-image: url('/files/ms-theme/icons/external-link.svg');
}

/***********************************************
 * GLIGHTBOX – BARREIREFREUNDLICH, OHNE ICON
 * - Fokus-Ringe
 * - Dark-Mode
 * - Motion-Reduction
 ***********************************************/

.glightbox-clean {

  /* Bild-Container */
  .gslide-image {
    position: relative;

    /* Keine Hover- oder Fokus-Overlays mehr */
    &::before,
    &::after {
      content: none !important;
    }
  }

  /***********************************************
   * MOTION-REDUCTION
   ***********************************************/
  @media (prefers-reduced-motion: reduce) {
    .gslide-image {
      &::before,
      &::after {
        transition: none !important;
      }
    }
  }
}

/* ========================================================================== */
/* ACCORDION (handorgel) – Grundstruktur                                      */
/* ========================================================================== */

.content-accordion {
  margin: 0;
  padding: 0;
}

.content-accordion .handorgel__header {
  margin: 0;
  padding: 0;
  border: 0;

  /* feste Typografie für Accordion-Header */
  font-size: var(--ms-font-size-base);
  font-weight: var(--ms-fw-medium);
  line-height: var(--ms-line-tight);
  color: var(--ms-dark);
}

.handorgel__header__button {
  appearance: none;
  border: none;
  background: var(--ms-bg-light-1);
  width: 100%;
  padding: var(--ms-space-4) var(--ms-space-6);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);

  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-base);
  font-weight: var(--ms-fw-medium);
  line-height: var(--ms-line-tight);
  color: var(--ms-dark);
  text-align: left;

  transition: background 0.25s ease, color 0.25s ease;
}

/* Hover */
.handorgel__header__button:hover {
  background: var(--ms-bg-light-2);
}

.handorgel__header__button::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: var(--ms-fw-light);
  color: var(--ms-primary);
  line-height: 1;
  transition: transform 0.25s ease, color 0.25s ease;
}

.handorgel__header__button[aria-expanded="true"] {
  background: var(--ms-bg-light-2);
  color: var(--ms-primary);
  font-weight: var(--ms-fw-bold);
}

.handorgel__header__button[aria-expanded="true"]::after {
  content: "–";
}

.handorgel__content {
  height: 0;
  overflow: hidden;
  background: var(--ms-bg-light-1);
  transition: height 0.25s ease;
}

.handorgel__header__button[aria-expanded="true"] + .handorgel__content {
  height: auto;
}

.handorgel__content__inner {
  padding: 0 var(--ms-space-6) var(--ms-space-5);
  color: var(--ms-dark);
}

body.dark {

  .handorgel__header__button {
    background: var(--ms-bg-dark-1);
    color: var(--ms-light);
  }

  .handorgel__header__button:hover {
    background: var(--ms-bg-dark-2);
  }

  .handorgel__header__button::after {
    color: var(--ms-primary-light);
  }

  .handorgel__header__button[aria-expanded="true"] {
    background: var(--ms-bg-dark-2);
    color: var(--ms-primary-light);
  }

  .handorgel__content {
    background: var(--ms-bg-dark-1);
  }

  .handorgel__content__inner {
    color: var(--ms-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .handorgel__content {
    transition: none;
  }
  .handorgel__header__button {
    transition: none;
  }
}

/* ========================================================================== */
/* ACCORDION VARIANTE: BORDER-LINE LINKS                                      */
/* ========================================================================== */

.ms-accordion--border {

  /* Entfernt: border-left am Container */

  /* Nur Header-Button bekommt den Balken */
  .handorgel__header__button {
    border-left: 4px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .handorgel__header__button:hover {
    background: var(--ms-bg-light-2);
    border-left-color: var(--ms-primary);
  }

  .handorgel__header__button[aria-expanded="true"] {
    background: var(--ms-bg-light-2);
    color: var(--ms-primary);
    border-left-color: var(--ms-primary);
    font-weight: var(--ms-fw-bold);
  }

  /* Icon */
  .handorgel__header__button::after {
    color: var(--ms-primary);
  }

  /* Content */
  .handorgel__content {
    border-left: 4px solid transparent;
    transition: height 0.25s ease, border-color 0.25s ease;
  }

  .handorgel__header__button[aria-expanded="true"] + .handorgel__content {
    border-left-color: var(--ms-primary);
  }
}