.custom-video-wrapper { 
  max-width: 1200px; 
  margin: 1.5rem auto; 
  position: relative; 
}

.custom-video-wrapper .video-overlay { 
  position: relative; 
  cursor: pointer; 
}

.custom-video-wrapper .video-thumb { 
  width: 100%; 
  display: block; 
  border-radius: 8px; 
}

/* --- Neuer Play-Button --- */
.custom-video-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  background: transparent;  /* bleibt transparent, Kreis kommt per ::before */
  color: #ed7e01;
  border: none;
  padding: 18px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

/* Hover-Farbe für Dreieck */
.custom-video-wrapper .play-button:hover {
  color: #894900;
}

/* Kreis hinter Dreieck */
.custom-video-wrapper .play-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;              /* Durchmesser des Kreises */
  height: 40px;
  background: rgba(237, 126, 1, 0.3);
  border-radius: 50%;
  z-index: -1;              /* hinter dem Dreieck */
  transition: transform 0.3s ease, background 0.3s ease;
  animation: pulse 2s infinite; /* pulsierender Kreis */
}

/* Dreieck (Play-Symbol) */
.custom-video-wrapper .play-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 20px solid #ed7e01;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Hover-Effekt: Kreis leicht vergrößern */
.custom-video-wrapper .play-button:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
  background: rgba(255, 255, 255, 0.5);
}

/* Pulsierende Animation */
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}

.custom-video-wrapper .video-container {
  display: none; 
  position: fixed; 
  inset: 0; 
  background: #000; 
  z-index: 9999;
  align-items: center; 
  justify-content: center;
}

.custom-video-wrapper .video-container.active { 
  display: flex; 
}

.custom-video-wrapper.fullscreen video {
  width: 100vw;
  height: 100vh;
  object-fit: contain; /* oder cover, je nach gewünschtem Effekt */
}

.custom-video-wrapper .close-button {
  position: absolute; 
  top: 18px; 
  right: 18px;
  font-size: 26px; 
  background: rgba(0,0,0,0.6); 
  color:#fff;
  border:none; 
  padding:8px 12px; 
  border-radius:6px; 
  cursor:pointer;
  z-index: 10000;
}

.custom-video-wrapper .close-button:hover { 
  background: rgba(0,0,0,0.8); 
}

.video-container video {
  pointer-events: none; /* Chrome klickt nicht auf die Video-native Buttons */
}


/*eigene controls - brauch ich nicht mehr
.custom-video-wrapper.fullscreen .custom-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 1 !important;
}

.custom-controls {
  transition: opacity 0.3s;
  opacity: 0;
}

.custom-controls.show {
  opacity: 1;
} */