.main-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}

/* PHONE WRAPPER */
.desktop {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .desktop {
    width: 82vw;
    max-width: none;
  }
}

/* VIDEO IM SCREEN (pixelgenau berechnet) */
.desktop-video {
position: absolute;
top: 8.34%;
left: 12.5%;
width: 75%;
height: 73.40%;
object-fit: contain;
object-position: center;
background: black;
}

/* IPHONE FRAME */
.desktop-frame {
position: relative;
width: 100%;
display: block;
pointer-events: none;
}

/* THUMBS bleiben unverändert */
.thumbs-swiper .swiper-slide {
opacity: 0.5;
cursor: pointer;
}

.thumbs-swiper .swiper-slide-thumb-active {
opacity: 1;
}

.main-swiper,
.thumbs-swiper {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.thumbs-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* THUMBNAIL-PFEILE */
.thumbs-swiper .swiper-slide {
    position: relative;
}

.thumbs-swiper .swiper-slide:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 10px;
    height: 20px;
    background-color: #007bff;

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M1 1 L10 10 L1 19' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M1 1 L10 10 L1 19' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.main-swiper {
margin-bottom: 20px;
}

.desktop-video {
  transform: scale(1.03);
}

/* PLAY OVERLAY exakt im Screen-Bereich */
.play-overlay {
  position: absolute;
  top: 8.34%;
  left: 12.5%;
  width: 75%;
  height: 73.40%;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 2;
  
  pointer-events: none;

  transition: opacity 0.2s ease;
}

/* ▶ Button-Kreis */
.play-button {
  width: 70px;
  height: 70px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  position: relative;
}

/* ▶ Dreieck */
.play-button::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 20px;

  border-style: solid;
  border-width: 15px 0 15px 22px;
  border-color: transparent transparent transparent white;
}

/* Hover-Effekt */
.play-overlay:hover .play-button {
  background: rgba(0,0,0,0.8);
}

/* Ausblenden */
.play-overlay.hidden {
  opacity: 0;
}

/*
@media (max-width: 768px) {

  .container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

}
*/

/* Header-Slider reaktivieren, da ältere JS-Version auf dieser Seite ausgeblendet.*/
.simple-slider .swiper-navigation-icon {
    display: none !important;
}