.hover-half-transparent video {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover-half-transparent video:hover {
    opacity: .5;
}

.hover-gray-scale div {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover-gray-scale div:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.hover-blur div {
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover-blur div:hover {
    -webkit-filter: grayscale(100%) blur(3px);
    filter: grayscale(100%) blur(3px);
}

.hover-dark-out div {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}

.hover-dark-out div:hover {
    filter: brightness(40%);
    -webkit-filter: brightness(40%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.video-muted video {
    -webkit-filter: grayscale(100%) brightness(40%);
    filter: grayscale(100%) brightness(40%);
    ;
}

.video-not-muted video {
    -webkit-filter: grayscale(0) brightness(100%);
    filter: grayscale(0) brightness(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}



.flash video {
    opacity: 1;
    -webkit-animation: flash 2s;
    animation: flash 2s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}


/* Video.js Lade-Spinner ausblenden (Präfix in deinem Build: cs- …) */
.cs-loading-spinner,
.vjs-loading-spinner { display: none !important; }

/* iOS/Safari: Video stabil auf eigener Compositing-Ebene halten */
.video_to_play {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: filter, opacity;
}