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

.modul_faq_akkordeon {
  background-color: #474c52; /* dunkler Hintergrund wie im Screenshot */
  color: #fff;
}


.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;
}

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

.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: #83868b;
  /* 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;
}

.modul_faq_akkordeon .mh2p-akkordeon__content .rechts img {
  width: 260px;
  max-width: 100%;
  margin-bottom: 16px;
}

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

/* Plus im FAQ */
.modul_faq_akkordeon .mh2p-akkordeon__plus {
  width: 18px;
  height: 18px;
}

/* 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;
    }
}

/* 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;
  }
}