/* ===== Modul: FAQ-Akkordeon ===== */

.modul_faq_akkordeon {
  background-color: #474c52; /* dunkler Hintergrund wie im Screenshot */
  color: #fff;
}
.faq__akkordeons .rechts a {
  color:#ffffff;
  text-decoration: underline;
}
.faq__akkordeons .links a {
  color:#ffffff;
  text-underline-offset: 3px;
}
.faq__akkordeons .js-lightbox {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq__akkordeons .js-lightbox:hover {
  cursor: pointer;
}
.faq__akkordeons .rechts a:hover {
  text-decoration: underline;
}

.modul_faq_akkordeon .inner {
  max-width:100% !important;
  padding-inline: 0 !important;
}

.modul_faq_akkordeon .akkordeon_spalten_wrapper
 {
  padding-inline:0;
 }

.faq {
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
  /* padding-left: 20px;
    padding-right: 20px; */
}

.faq__title {
  font-family: "NeueHaasUnicaPro-Bold";
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin: 0;
  padding-left: 20px;
    padding-right: 20px;
}

.faq__unterzeile {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "NeueHaasUnicaPro-Regular";
  font-size: 18px;
}

.faq__unterzeile span {
  color: #ffffff;
}

.faq__divider {
  width: 180px;
  height: 1px;
  background-color: rgba(255,255,255,0.5);
}

/* Akkordeon-Wrapper */
.faq__akkordeons {
  margin-top: 48px;
  /* max-width: 900px; */
  margin-inline: auto;
  text-align: left;
}

/* Akkordeons in diesem Modul optisch "flach" auf dem dunklen Hintergrund */
.modul_faq_akkordeon .mh2p-akkordeon {
  background: transparent;
  margin-top: 0;
  border-radius: 0;
  /* text-align: center; */
  display:flex;
  justify-content:center;
  flex-direction: column;
}

.modul_faq_akkordeon .mh2p-akkordeon + .mh2p-akkordeon {
    border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.faq-divider {
  width: 100%;
  max-width: 400px; /* anpassen nach Geschmack */
  height: 1px;
  background-color: rgba(255,255,255,0.35);
  margin: 20px auto; /* Abstand oben/unten + zentrieren */
}

/* Summary in FAQ: zentriert, weiße Schrift */
.modul_faq_akkordeon .mh2p-akkordeon__summary {
  justify-content: center;
  display:flex;
  align-items: flex-start;
  padding-block: 0px;
}

.modul_faq_akkordeon .mh2p-akkordeon__label {
  width: auto;
  color: #ffffff;
  font-size: 22px;
  height:auto;
}

@media(min-width:430px){
  .modul_faq_akkordeon .mh2p-akkordeon__label br {
    display: none;
  }
}

/* Content im FAQ: auf hellem Hintergrund wie beim ersten Modul */
.modul_faq_akkordeon .mh2p-akkordeon__content {
  margin-top: 16px;
  background-color: #4b699a;
  /* padding-inline: clamp(16px, 4vw, 36px); */
  /* padding-top: 24px; */
  /* padding-bottom: 36px; */
  color:#ffffff;
}

/* Spaltenlayout aus dem ersten Modul wiederverwenden */
.modul_faq_akkordeon .akkordeon_spalten_wrapper {
  display: flex;
  flex-direction: column;
  gap: 36px;
  text-align: left;
  padding-inline: var(--space);
}

.modul_faq_akkordeon .akkordeon_spalten_wrapper .links {
  max-width: 900px;
}

.modul_faq_akkordeon .mh2p-akkordeon__content .rechts {
  text-align: center;
}

@media(min-width:750px){
  .modul_faq_akkordeon .mh2p-akkordeon__content .rechts {
    text-align: left;
  }
}

.modul_faq_akkordeon .mh2p-akkordeon__content .rechts img {
  width: 260px;
  max-width: 100%;
  margin: 10px 10px 16px 10px;
  transition: transform 0.2s ease;
}

.modul_faq_akkordeon .mh2p-akkordeon__content .rechts a:hover img {
  transform: scale(1.02) rotate(-1deg);
}

/* FAQ: Summary mit Plus links */
.modul_faq_akkordeon .mh2p-akkordeon__summary {
  display: inline-flex;
  /* align-items: center; */
  justify-content: center;
  gap: 8px;
  padding-block: 0px;
}

/* Plus im FAQ */
.modul_faq_akkordeon .mh2p-akkordeon__plus {
  width: 18px;
  height: 18px;
  margin-top:0.38rem;
  flex-shrink:0;
}
.sticky-schliessen-xs .mh2p-akkordeon__plus {
  margin-top:0 !important;
}
.mh2p-akkordeon__summary--close .mh2p-akkordeon__plus {
  margin-top:0 !important;
}


/* Hover bleibt ruhig, keine Extra-Spielereien */
.modul_faq_akkordeon .mh2p-akkordeon__plus:hover {
  transform: none;
}


/* Typo-Anpassung wie im SSOT bei größeren Breakpoints */
@media (min-width: 750px) {
  .faq__title {
    font-size: 28px;
  }
  .faq-divider {
    margin: 24px auto; /* Abstand oben/unten + zentrieren */
    }
    .modul_faq_akkordeon .mh2p-akkordeon__label {
    font-size: 24px;
    }
    .modul_faq_akkordeon .mh2p-akkordeon__plus {
      margin-top:0.45rem;
    }
}

/* größere Screens: Spalten nebeneinander */
@media (min-width: 950px) {
  .modul_faq_akkordeon .akkordeon_spalten_wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  .modul_faq_akkordeon .mh2p-akkordeon__content .rechts {
    text-align: left;
    min-width: 260px;
  }
  .faq {
    padding-top: 60px;
    padding-bottom: 60px;
   }
}



@media (min-width: 1350px) {
  .faq {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .faq__title {
    font-size: 28px;
  }
}

@media(min-width:1750px){
    .faq {
    padding-top: 84px;
    padding-bottom: 84px;
   }
   .faq__title {
    font-size: 30px;
  }
}


/* Close-Trigger im FAQ */
.modul_faq_akkordeon .mh2p-akkordeon__summary--close {
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
}

.modul_faq_akkordeon .mh2p-akkordeon__summary--close .mh2p-akkordeon__label {
  color: #ffffff;
  width: auto;
  font-size:16px;
}

.close_akkordeon_xs {
  display:none !important;
}

.close_akkordeon_xl {
  display:flex;
  justify-content: center;
  margin-top:36px !important;
}

@media (min-width: 750px) {
    .close_akkordeon_xl {
        justify-content: flex-start;
    }
}

@media (min-width: 950px) {
    .close_akkordeon_xl {
        display: none !important;
    }
    .close_akkordeon_xs {
      display:flex !important;
    }
}