/* Basis */
.pvop-video-wrapper{
  position:relative;
  width:100%;
  --pvop-gap:80px;                 /* freier Bereich unten für native Controls */
  --pvop-overlay-opacity:.9;       /* Overlay bei Hover */
}
.pvop-video-inner{position:relative;}
.pvop-bgvid{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1; /* unter Icon, über Seite */
}

/* Hover-Overlay nur über dem Bildbereich (unten bleibt frei) */
.pvop-video-cover{
  position:absolute; left:0; top:0; right:0;
  height:calc(100% - var(--pvop-gap));
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;     /* blockiert keine Klicks auf die nativen Controls */
  opacity:0;               /* standard: unsichtbar */
  transition:opacity .25s ease;
  z-index:1;               /* unter Icon */
}
/* Hinweis: attr() für URLs wird kaum unterstützt → Poster am <video> nutzen */
.pvop-video-cover[data-src]{background-image:none;}

.pvop-video-cover::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0));
}

/* Hover-Effekt über den Wrapper (nicht über das Overlay selbst) */
.pvop-video-wrapper:hover .pvop-video-cover{opacity:var(--pvop-overlay-opacity);}




/* zentrales Icon standardmäßig AUS */
.pvop-video-wrapper::before,
.pvop-video-wrapper::after {
  display: none;
}

/* wenn pausiert (bzw. nicht playing) → Icon EIN */
.pvop-video-wrapper:not(.is-playing)::after,
.pvop-video-wrapper:not(.is-playing)::before {
  display: block;
}

/* Kreis (Hintergrund) */
.pvop-video-wrapper::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:80px; height:80px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  pointer-events:none;
  z-index:9999;
}

/* Symbol – Default = PLAY (►) */
.pvop-video-wrapper::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-40%, -50%); /* optische Zentrierung */
  pointer-events:none;
  z-index:10000;

  border-left:26px solid #fff;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  width:0; height:0;
}

/* wenn playing → PAUSE (❚❚) */
.pvop-video-wrapper.is-playing::before{
  transform:translate(-50%, -50%);
  border:none;
  width:12px; height:32px;
  background:#fff;
  box-shadow:18px 0 0 #fff;
}

/* Elementor-Schalter: zentrales Icon komplett aus */
.pvop-no-center-icon::before,
.pvop-no-center-icon::after{
  display: none !important;
}


/* Optional: Icon beim Abspielen ausblenden
.elementor-widget-perchtold_video_overlay_player .pvop-video-wrapper.is-playing::before,
.elementor-widget-perchtold_video_overlay_player .pvop-video-wrapper.is-playing::after{
  opacity:0; transition:opacity .2s ease;
}
*/

/* Responsiv: bei sehr kleinen Höhen lassen wir mehr Platz für Controls */
@media (max-width:480px){
  .pvop-video-wrapper{--pvop-gap:64px;}
}

/* Mobile: natives UI nutzen – unser Overlay/Icons aus */
@media (max-width: 768px) {
  /* zentrales Icon aus */
  .pvop-video-wrapper::before,
  .pvop-video-wrapper::after {
    display: none !important;
  }

  /* Hover-Overlay (Cover) aus */
  .pvop-video-cover {
    display: none !important;
  }
}


/* DEBUG (optional): grüne Outline, wenn playing
.pvop-video-wrapper.is-playing{outline:3px solid lime !important;}
*/