/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Otmar Süßbauer
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* 
 * CSS für Video Shortcode
 */

.divi-video-like{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
  aspect-ratio: 9 / 16;
}

/* Poster */
.divi-video-like::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none; /* 🔑 extrem wichtig */
}

/* Play Button – MUSS ÜBER dem Poster liegen */
.video-play-btn{
  position:absolute;
  inset:0;
  z-index: 2;              /* 🔑 über Poster */
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 1;              /* 🔑 explizit sichtbar */
  pointer-events: auto;
}

/* Play-Icon */
.video-play-btn::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:72px;
  height:72px;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.6);
  border-radius:50%;
}

.video-play-btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-40%,-50%);
  border-style:solid;
  border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent #fff;
}

/* Video */
.divi-video-like video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index: 3;              /* 🔑 Video liegt GANZ OBEN */
  opacity: 0;
  transition: opacity .6s ease .08s;;
  pointer-events: auto;    /* 🔑 zwingend */
}

/* Playing State */
.divi-video-like.is-playing video{
  opacity: 1;
}

.divi-video-like.is-playing::before{
  opacity: 0;
}

.divi-video-like.is-playing .video-play-btn{
  opacity: 0;
  pointer-events: none;
}

.divi-video-like:hover .video-play-btn::before{
  background: rgba(0,0,0,0.85);
  transform: translate(-50%,-50%) scale(1.15);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15);
  transition: all .18s ease;
}

.divi-video-like:hover .video-play-btn::after{
  transform: translate(-40%,-50%) scale(1.15);
}