/* ===== SWIPER NAVIGATION BUTTONS ===== */

/* CSS Variable für Pfeilfarbe überschreiben */
:root {
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 28px;
}

.swiper-button-next,
.swiper-button-prev,
.cb-button-next,
.cb-button-prev {
  color: #ffffff !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.cb-button-next:hover,
.cb-button-prev:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Pfeil-Icon (::after Pseudo-Element) */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: 700;
  color: #ffffff !important;
}


/* ===== SWIPER PAGINATION ===== */

.swiper-pagination-bullet,
.cb-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  transition: background 0.2s ease, transform 0.2s ease;
}

.swiper-pagination-bullet-active,
.cb-pagination-bullet.swiper-pagination-bullet-active {
  background: #ffffff !important;
  transform: scale(1.3);
}












/* Rounded corners for all YouTube embeds */
.wp-block-embed__wrapper iframe[src*="youtube"],
.wp-block-embed__wrapper iframe[src*="youtu.be"],
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    border-radius: 15px;
    overflow: hidden;
}






a.wp-block-button__link:not([href]),
a.wp-element-button:not([href]) {
  cursor: default;
}






/* ============================================================
   Screenshots Slider – Dots & Arrows sichtbar machen
   (analog zum Video-Slider weiter unten)
   ============================================================ */

/* --- DOTS (Pagination Bullets) --- */


.kb-splide .splide__pagination__page {
    background: #9a9a9a;}

.kb-splide .splide__pagination__page.is-active {
    background: #ffffff;}









/* ===== Screenshot Slider – Mobile Fix ===== */
@media (max-width: 767px) {

  /* 1. Gallery-Block aus dem Content-Padding ausbrechen */
  .wp-block-kadence-advancedgallery.kb-gallery-wrap-id-2853_fcea3d-c1 {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
  }

  /* 2. Bilderhöhe auf Mobile reduzieren und Bilder vollständig anzeigen */
  .kb-gallery-id-2853_fcea3d-c1.kb-gallery-ul.kb-gallery-type-fluidcarousel .kt-blocks-carousel figure .kb-gal-image-radius,
  .kb-gallery-id-2853_fcea3d-c1.kb-gallery-ul.kb-gallery-type-fluidcarousel .kt-blocks-carousel figure .kb-gal-image-radius img {
    height: auto !important;
  }

  /* 3. Bilder vollständig (nicht gecroppt) anzeigen */
  .kb-gallery-id-2853_fcea3d-c1 .kb-gallery-image-contain img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 4. Slide-Breite auf Mobile anpassen */
  #splide01 .splide__slide {
    max-width: 100vw !important;
  }

  /* 5. Overflow verstecken damit nichts seitlich überläuft */
  .kb-gallery-wrap-id-2853_fcea3d-c1.wp-block-kadence-advancedgallery,
  .kb-gallery-wrap-id-2853_fcea3d-c1.wp-block-kadence-advancedgallery .kt-blocks-carousel {
    overflow: hidden !important;
  }
}



/* ===== Hotfixes Oli ===== */
.no-underline a {

    text-decoration: none !important;

}