/* =========================================
   KOSMEDI 5 – Slider (Contao Swipe) CLEAN
   Voraussetzung:
   - Inhaltselement: Umschlag Anfang/Ende (ce_sliderStart/ce_sliderStop)
   - Seitenlayout: js_slider eingebunden
   Ziel:
   - keine Layout-Zerstörung
   - Slides nicht untereinander
   - Controls funktionieren
   ========================================= */

/* Der Slider-Viewport */
.ce_sliderStart .content-slider{
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Track/Wrapper, der von Swipe bewegt wird */
.ce_sliderStart .slider-wrapper{
  width: 100%;
  overflow: hidden;
}

/* Swipe arbeitet klassisch mit floats */
.ce_sliderStart .slider-wrapper > *{
  float: left;
  width: 100%;
}

/* Falls Inhalte hohe Bilder haben: sauber */
.ce_sliderStart img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Controls */
.ce_sliderStart .slider-control{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

/* Prev/Next Links */
.ce_sliderStart .slider-prev,
.ce_sliderStart .slider-next{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(19,78,74,.25);
  color: var(--color-primary, #134E4A);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
}

.ce_sliderStart .slider-prev:hover,
.ce_sliderStart .slider-next:hover{
  background: rgba(19,78,74,.06);
}

/* Punkte-Menü (falls Contao es füllt) */
.ce_sliderStart .slider-menu{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Clearfix (damit Wrapper Höhe bekommt) */
.ce_sliderStart .slider-wrapper::after{
  content: "";
  display: block;
  clear: both;
}

/* =========================================
   KOSMEDI 5 – Slider: Center + Mobile
   ========================================= */

/* Optional: Slider-Inhalt optisch zentrieren (falls deine Slides "breit" wirken)
   -> Wir zentrieren den Inhalt innerhalb jeder Slide auf Containerbreite. */
.ce_sliderStart .slider-wrapper > *{
  /* Slide bleibt 100% breit (Swipe braucht das),
     aber Inhalt in der Slide wird zentriert. */
  display: block;
}

.ce_sliderStart .slider-wrapper > * > *{
  /* erster innerer Wrapper (z.B. .content-text / .ce_text / .ce_image) */
  max-width: var(--container, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-2, 16px);
  padding-right: var(--space-2, 16px);
}

/* Controls mittig und auf Mobile ordentlich umbrechen */
.ce_sliderStart .slider-control{
  flex-wrap: wrap;
}

/* Mobile: etwas kompakter */
@media (max-width: 768px){
  .ce_sliderStart .slider-prev,
  .ce_sliderStart .slider-next{
    padding: 10px 12px;
    width: 48%;
    justify-content: center;
  }

  .ce_sliderStart .slider-menu{
    width: 100%;
    justify-content: center;
    order: 3;
  }
}

/* Wenn deine Slide-Inhalte z.B. Text + Bild nebeneinander haben,
   erzwinge auf Mobile untereinander. (Nur innerhalb des Sliders!) */
@media (max-width: 992px){
  .ce_sliderStart .slider-wrapper .media{
    display: block !important;
  }
  .ce_sliderStart .slider-wrapper .media figure{
    margin: 0 0 12px 0;
  }
}