/* ==========================================================
   DESIGNKONFIGURATION FÜR BAPTISTEN-LEER.DE
   Joomla 5.4 | Template: Helix Ultimate
   ========================================================== */

/* ==========================================================
   1) GLOBALER HINTERGRUND
   ========================================================== */
body {
  background: linear-gradient(215deg, rgba(255,210,100,.3) 0%, rgba(255,40,10,.6) 110%) !important;
  background-attachment: fixed;
  background-size: cover;
}

/* ==========================================================
   2) SLIDESHOW ÜBER VOLLE BROWSERBREITE
   ========================================================== */
#sp-slider,
#sp-slider .sp-module,
#sp-slider .sp-module-content,
#sp-slider .container,
#sp-slider .row,
#sp-slider .col-lg-12,
#sp-slider .camera_wrap,
#sp-slider .camera_fakehover,
#sp-slider .camera_target,
#sp-slider .cameraSlide {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

#sp-slider img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* ==========================================================
   3) MODULE & ARTIKEL – WEISSE KARTENOPTIK
   ========================================================== */
.sp-module {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,.6) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  border: none !important;
  overflow: hidden;
}

.sp-module .sp-module-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.article,
.blog .article {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,.6) !important;
  padding: 25px !important;
  margin-bottom: 20px !important;
  border: none !important;
}

/* ==========================================================
   4) INHALTSBEREICHE & DOPPELBOX-FIX
   ========================================================== */

/* 🏠 STARTSEITE – keine weiße Box um #sp-component */
body.itemid-101 #sp-component {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* STARTSEITE – keine inneren Boxen in Modulen */
body.itemid-101 .sp-module .article,
body.itemid-101 .sp-module .article * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 📄 INHALTSSEITEN – kein doppelter Hintergrund, aber Layout bleibt */
body.com-content #sp-main-body,
body.com-content #sp-main-body > .container,
body.com-content #sp-main-body > .container > .row,
body.com-content #sp-main-body > .container > .row > [class*="col-"],
body.com-content #sp-component {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Überschriften: klar, ohne Hintergrund */
body.com-content h1.page-title,
body.com-content h2.page-title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 25px 0 !important;
  text-align: inherit !important;
}

/* Einheitliche Inhaltsbreite */
#sp-main-body .container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* ==========================================================
   5) MENÜ / HEADER (GLASEFFEKT)
   ========================================================== */
#sp-header {
  background: rgba(255,255,255,.3) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

body.sticky-header #sp-header.header-sticky {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,.5);
}

/* ==========================================================
   6) SOCIAL ICONS – FARBEN & HOVER
   ========================================================== */
#sp-header .social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(0,90,122,1) !important;
  transition: color .3s, transform .3s;
}

#sp-header .social-icon-youtube a:hover {
  color: red !important;
  transform: scale(1.25);
}

#sp-header .social-icon-instagram a:hover {
    color: red !important;
  transform: scale(1.25);
}

/* ==========================================================
   7) VIDEO-EINBETTUNG (RESPONSIV)
   ========================================================== */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================
   8) SERMONSPEAKER – ANSICHT
   ========================================================== */
.com_sermonspeaker #sp-component {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,.6) !important;
  padding: 25px !important;
}

/* ==========================================================
   9) VISFORMS – KONTAKTFORMULAR
   ========================================================== */
.com_visforms #sp-component {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,.6) !important;
  padding: 30px !important;
}

/* ==========================================================
   10) OFFCANVAS-MENÜ (MOBIL)
   ========================================================== */
.offcanvas-menu .menu-child {
  display: none;
  padding-left: 1rem;
}

.offcanvas-menu .menu-parent.open > .menu-child {
  display: block;
}

.offcanvas-menu .menu-parent > a,
.offcanvas-menu .menu-parent > span.menu-separator {
  cursor: pointer;
}

/* ==========================================================
   11) SONNTAGSVORSCHAU – MODULSTIL
   ========================================================== */
.sonntagsvorschau-module.sp-module {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,.6) !important;
  padding: 20px !important;
  overflow: hidden;
  text-align: center;
}

/* Bilddarstellung */
.sonntagsvorschau-entry img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  margin: 0 auto 1rem;
}

/* Überschrift im Beitrag */
.sonntagsvorschau-entry p strong {
  font-size: 1.15rem;
  color: #005a7a;
  display: block;
  margin-bottom: .5rem;
}

/* Keine inneren Doppelboxen */
.sonntagsvorschau-module .article,
.sonntagsvorschau-module .article * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   12) DJ-IMAGESLIDER – ERNTEDANK / SONDERBEITRÄGE
   ========================================================== */

/* Entfernt feste Breiten/Höhen → Steuerung über Modul-Einstellungen */
.djslider-container,
.djslider-container img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
}

/* Responsives Verhalten innerhalb von Artikeln */
.article .djslider-container {
  display: block;
  margin: 0 auto 1.5rem auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ----------------------------------
   FOOTER: KEINE "KARTEN"-STILE IM FOOTER
   ---------------------------------- */
#sp-footer .sp-module,
#sp-footer .sp-module .sp-module-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;     /* nimmt die hohe Karten-Polsterung raus */
    margin: 0 !important;
}

/* Footer etwas kompakter, ohne Template-Farben zu überschreiben */
#sp-footer {
    padding-top: 12px;
    padding-bottom: 12px;
}