/* 
    Created on : 30.10.2023, 12:28:10
    Author     : cathexis
*/

.paragraph--type--video-block {
  padding: 34px 0;
}

.paragraph--type--video-block .text-box-links {
  position: relative;
  text-shadow: 1px 1px #fffa;
  z-index: 2;
}

.ytvideo,
.htmlvideo {
  margin:0 auto;
  max-width:100%;
}

@media (min-width: 1100px) {
  .paragraph--type--video-block .text-box-links {
    margin-right: -20px;
    width: 366px;
    padding-top: 68px;
  }
  .paragraph--type--video-block .video-box-rechts {
    margin-left: -64px;
    width: 764px;
  }
  /*
  .ytvideo,
  .htmlvideo {
    position: relative;
    margin-left: -124px;
    width: 810px;
    max-width: unset;
  }*/
}

.htmlvideo video::-webkit-media-controls-overlay-play-button {
  display: none;
}

.paragraph--type---video .ytvideo iframe {
  width: 100%;
  height: 455px;
}

.paragraph--type--video-block .video-box-rechts {
  position: relative;
}

.paragraph--type--video-block .video-box-rechts .paragraph--type---video  {
  line-height: 0;
}

.paragraph--type--video-block .video-box-rechts .paragraph--type---video::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(25,100,255,.2);
  /*transition: all .4s ease-in-out;*/
  visibility: visible;
}

.paragraph--type--video-block .video-box-rechts .paragraph--type---video:hover::after {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s, opacity 0.1s linear;
}
























.paragraph--type--no-wrapper .paragraph--type---video {
  max-width: calc(100% - 32px);
  width: 1046px;
  margin: 0 auto;
}

.video-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
  overflow: hidden; /* Sicherstellen, dass nichts überläuft */
}

video {
  width: 100%;
  height: auto; /* Wichtig für responsives Verhalten */
  display: block;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3); /* Leichte Abdunkelung */
  transition: all 0.3s ease-in-out;
}

.play-overlay:hover {
  background: rgba(0, 0, 0, 0.1); /* Leichte Abdunkelung */
}

.play-overlay.hidden {
  opacity: 0;
  pointer-events: none; /* Wichtig, damit das Video darunter klickbar wird */
}

.play-svg {
  width: 120px;
  height: 120px;
  overflow: visible;
}

/* Hauptkreis: Standard Weiß/Transparent */
.main-circle {
  fill: rgba(0, 122, 255, 0.5);
  stroke: #ffffff;
  stroke-width: 2;
  transition: all 0.4s ease;
}

/* Dreieck */
.play-triangle {
  fill: #ffffff;
  transition: all 0.4s ease;
}

/* Die Ripples */
.ripple {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
}

/* HOVER STATES */
.play-overlay:hover .main-circle {
  fill: #007AFF;   /* Dein gewünschtes Blau */
  stroke: #007AFF;
}

.play-overlay:hover .play-triangle {
  fill: #ffffff;   /* Dreieck bleibt weiß auf blauem Grund */
}

/* Animationen starten beim Hover */
.play-overlay:hover .ripple-1 {
  animation: ripple-out 2s infinite;
}

.play-overlay:hover .ripple-2 {
  /* Startet mit Verzögerung für den Wellen-Effekt */
  animation: ripple-out 2s infinite 0.5s; 
  stroke: #007AFF; /* Der zweite Ring kann auch blau schimmern */
}

@keyframes ripple-out {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}