.kp-feedback-videos,
.testimonial-videos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  width:100%;
}

.testimonial-video-card{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  cursor:pointer;
  background:transparent;
  border-radius:22px;
  box-shadow:none;
  transform:translateZ(0);
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}

.testimonial-video-card video,
.testimonial-video-card .poster-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.testimonial-video-card .poster-img{
  z-index:1;
  transition:opacity .25s ease;
  pointer-events:none;
}

.testimonial-video-card.is-playing .poster-img{
  opacity:0;
}

.testimonial-video-card .video-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.04) 42%,rgba(0,0,0,.34));
  pointer-events:none;
}

.testimonial-video-card .video-content{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:3;
  color:#fff;
  font-family:inherit;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.testimonial-video-card .video-title{
  color:inherit;
  font-family:inherit;
  font-size:clamp(15px,1.15vw,18px);
  font-weight:600;
  line-height:1.22;
  letter-spacing:inherit;
}

.testimonial-video-card .video-meta{
  margin-top:6px;
  color:inherit;
  font-family:inherit;
  font-size:clamp(12px,.9vw,14px);
  line-height:1.25;
  opacity:.92;
}

.testimonial-video-card .video-stars{
  margin-top:8px;
  color:inherit;
  font-family:inherit;
  font-size:14px;
  letter-spacing:1px;
}

.testimonial-video-card .play-icon{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
  pointer-events:none;
}

.testimonial-video-card .play-icon img{
  width:34px;
  max-width:68%;
  height:auto;
  display:block;
}

.testimonial-video-card .play-arrow-default{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid currentColor;
  color:rgba(80,80,80,.66);
  margin-left:3px;
}

.testimonial-video-card .pause-icon-default{
  display:none;
  width:18px;
  height:20px;
  position:relative;
}

.testimonial-video-card .pause-icon-default:before,
.testimonial-video-card .pause-icon-default:after{
  content:"";
  position:absolute;
  top:0;
  width:6px;
  height:20px;
  border-radius:2px;
  background:rgba(80,80,80,.66);
}

.testimonial-video-card .pause-icon-default:before{left:2px;}
.testimonial-video-card .pause-icon-default:after{right:2px;}

.testimonial-video-card.is-playing .play-icon{
  opacity:0;
}

/* Hover-Effekte nur auf Geräten mit echtem Maus-/Zeiger-Hover anwenden. */
@media (hover:hover) and (pointer:fine){
  .testimonial-video-card:hover .play-icon{
    transform:translate(-50%,-50%) scale(1.07);
    background:rgba(255,255,255,.9);
  }

  .testimonial-video-card.is-playing:hover .play-icon{
    opacity:1;
  }
}

.testimonial-video-card.is-playing .play-icon img,
.testimonial-video-card.is-playing .play-arrow-default{
  display:none;
}

.testimonial-video-card.is-playing .pause-icon-default{
  display:block;
}


.testimonial-video-card .volume-control{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:6;
  width:92px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-radius:999px;
  background:rgba(20,20,20,.18);
  box-shadow:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(3px);
  transition:opacity .16s ease, transform .16s ease, background .16s ease;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.testimonial-video-card.is-playing.kp-volume-visible .volume-control{
  opacity:.72;
  pointer-events:auto;
  transform:translateY(0);
}

.testimonial-video-card.is-playing.kp-volume-visible .volume-control:hover,
.testimonial-video-card.is-playing.kp-volume-visible .volume-control:focus-within{
  opacity:.9;
  background:rgba(20,20,20,.24);
}

.testimonial-video-card .volume-slider{
  --kp-volume:100%;
  width:76px;
  height:12px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  outline:none;
  margin:0;
  padding:0;
}

.testimonial-video-card .volume-slider::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
  background:linear-gradient(to right,rgba(255,255,255,.92) 0%,rgba(255,255,255,.92) var(--kp-volume),rgba(255,255,255,.32) var(--kp-volume),rgba(255,255,255,.32) 100%);
}

.testimonial-video-card .volume-slider::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  margin-top:-3.5px;
}

.testimonial-video-card .volume-slider::-moz-range-track{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.32);
}

.testimonial-video-card .volume-slider::-moz-range-progress{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
}

.testimonial-video-card .volume-slider::-moz-range-thumb{
  width:10px;
  height:10px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}


@media (min-width:769px){
  .kp-feedback-videos,
  .testimonial-videos{
    /* Pro Gruppe über CSS-Variablen steuerbar; Fallback entspricht dem bisherigen Stand. */
    width:var(--kp-desktop-width,85%);
    max-width:var(--kp-desktop-width,85%);
    gap:var(--kp-desktop-gap,20.4px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:1024px){
  .kp-feedback-videos,
  .testimonial-videos{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px){
  .kp-feedback-videos,
  .testimonial-videos{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 18px 14px 18px;
    margin-left:-18px;
    margin-right:-18px;
    /* Horizontalen Slider und vertikales Seitenscrollen gleichzeitig erlauben. */
    touch-action:auto;
    scrollbar-width:none;
  }

  .testimonial-video-card{
    /* Pro Gruppe skalierbar; 54,6 % entsprechen 70 % der ursprünglichen 78-%-Karte. */
    flex:0 0 var(--kp-mobile-card-width,54.6%)!important;
    min-width:var(--kp-mobile-card-width,54.6%)!important;
    max-width:var(--kp-mobile-card-width,54.6%)!important;
    aspect-ratio:9 / 16;
    scroll-snap-align:center;
    background:transparent;
    box-shadow:none;
    touch-action:auto;
  }

  .testimonial-video-card video,
  .testimonial-video-card .poster-img{
    object-fit:contain;
  }

  .testimonial-video-card .play-icon{
    width:56px;
    height:56px;
  }

  .testimonial-video-card .volume-control{
    display:none;
  }

  .testimonial-videos::-webkit-scrollbar,
  .kp-feedback-videos::-webkit-scrollbar{
    display:none;
  }
}