/* ==========================================================================
   responsive.css – Korrekturen für kleinere Bildschirmbreiten
   Wird auf allen Seiten nach custom.css geladen.
   ========================================================================== */

/* --- 1. Fließtext: Silbentrennung und Umbruch langer Wörter ------------- */
.sp-page-builder .sppb-addon-content,
.sp-page-builder .sppb-panel-body,
.sp-page-builder .sppb-panel-title,
.sp-page-builder .sppb-addon-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- 2. Startseiten-Überschrift: Schrift skaliert mit der Breite -------- */
/* Original: fest 36pt (48px) per Inline-Style */
.sp-page-builder .sppb-addon-text-block .sppb-addon-content h1 > span[style*="font-size"] {
  font-size: clamp(22px, 4.2vw, 48px) !important;
  line-height: 1.2;
}
.sp-page-builder .sppb-addon-text-block .sppb-addon-content h1 {
  -webkit-hyphens: manual;
  hyphens: manual;
  line-height: 1.2;
}

/* --- 3. Hauptmenü: bleibt bei 992–1199px in einer Zeile ------------------ */
@media (min-width: 992px) and (max-width: 1199px) {
  #sp-menu .sp-megamenu-parent {
    white-space: nowrap;
  }
  #sp-menu .sp-megamenu-parent > li > a,
  #sp-menu .sp-megamenu-parent > li > span {
    padding: 0 8px;
    letter-spacing: 0;
    font-size: 13px !important;
  }
}

/* --- 4. Footer: Überschriften über statt neben dem Text (992–1199px) ----- */
@media (min-width: 992px) and (max-width: 1199px) {
  /* schmale Beschriftungsspalten ausblenden … */
  #sp-bottom .sppb-row > .sppb-col-md-1 {
    display: none !important;
  }
  /* … Inhaltsspalten auf je ein Drittel verbreitern … */
  #sp-bottom .sppb-row > .sppb-col-md-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }
  /* … und die eingebaute Überschrift oberhalb des Textes zeigen */
  #sp-bottom .sppb-hidden-md.sppb-hidden-lg {
    display: block !important;
  }
  #sp-bottom .sppb-hidden-md.sppb-hidden-lg h2.sppb-addon-title {
    padding-bottom: 10px !important;
  }
}