/* Splide wird im Gallerie Block verwendet*/
.wp-block-gallery.is-splide {
  display: block;
  position: relative;
  margin: 0 auto;
}

/* damit Bild kompletten Container einnimmt*/
.wp-block-gallery.is-splide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Um Wordpress Default Einstellungen zu neutralisieren*/
.wp-block-gallery.is-splide .wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}

/* Größe und Seitenherhältnis
   Desktop: 700 x 525 (4:3)
   Mobile:  300 x 225 (4:3)
*/

.wp-block-gallery.is-splide {
  max-width: 700px;
}

.wp-block-gallery.is-splide .splide__slide {
  width: 700px;
  height: 525px;
  overflow: hidden;
}

/* Mobil */
@media (max-width: 768px) {
  .wp-block-gallery.is-splide {
    max-width: 300px;
  }

  .wp-block-gallery.is-splide .splide__slide {
    width: 300px;
    height: 225px;
  }
}

  /* Chevrons
   - außerhalb des Bildes
   - 16px Abstand
  */

.splide__arrow {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 999px;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}

.splide__arrow--prev {
  left: -56px; /* 40px Button + 16px Abstand */
}

.splide__arrow--next {
  right: -56px;
}

/* Chevron Icon */
.splide__arrow svg {
  width: 20px;
  height: 20px;
}

/* Mobil: Pfeile näher ran */
@media (max-width: 768px) {
  .splide__arrow--prev {
    left: -48px;
  }

  .splide__arrow--next {
    right: -48px;
  }
}

/* auf Mobil sollen Pfeile verschwinden und nur noch Wischgeste ist möglich*/
@media (max-width: 599px) {
  .splide__arrow {
    display: none;
  }
}

/* Abstand Pagination zum Bild */
.splide__pagination {
  bottom: -24px;
}

.splide__pagination__page {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  margin: 0 4px;
  opacity: 1;
  border: 1px solid currentColor;
}

/* damit sich Punkt ausüllt bei aktiven Menüpunkt*/
.splide__pagination__page.is-active {
  background: currentColor;
}

/* Farbvarianten*/

/* für helle BG */
.splide--light {
  color: #202020
}

.splide--light .splide__arrow svg {
  fill: #202020
}

.splide--light .splide__pagination__page.is-active {
  background: #202020
}

/* für dunkle BG */

.splide--dark {
  color: #FBFBFB;
}

.splide--dark .splide__arrow svg {
  fill: #FBFBFB;
}

.splide--dark .splide__pagination__page.is-active {
  background: #FBFBFB;
}