.video-js .vjs-control-bar {
    height: 100px;
    z-index: 12;
    background: linear-gradient(0deg, rgba(0,7,29,1) 12%, rgba(255,255,255,0) 90%);
    padding: 0 20px;
}
@media (min-width: 768px) {
    .video-js .vjs-control-bar {
        padding: 0 80px;
    }
}

.video-js .vjs-control{
    height: 47px;
}

.video-js .vjs-tech {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-js .vjs-poster img{
    object-fit: cover;
}

.video-js .vjs-poster {
    pointer-events: none;
}



/* Die Control-Bar wird als flex-container mit Wrap angezeigt */
.video-js .vjs-control-bar {
    display: flex;
    flex-wrap: wrap;
}

/* Progress Control nimmt die volle Breite ein und kommt in die eigene Zeile */
.video-js .vjs-progress-control {
    order: -1;                /* Damit es ganz oben steht */
    flex: 1 1 100%;           /* Volle Breite im flex-wrap */
    margin-bottom: 4px;       /* Kleiner Abstand zu den unteren Controls */
}

/* Optional: Styling für die Progressbar */
.video-js .vjs-progress-holder {
    height: 4px;
    background-color: #373D49;
    border-radius: 4px;
}

.video-js .vjs-load-progress {
    background-color: #727373;
}
.video-js .vjs-play-progress {
    background-color: #BDBEBF;
}

.vjs-volume-panel {
    margin-right: 20px !important;
}

.vjs-button {
    margin-right: 20px !important;
}
.vjs-button>.vjs-icon-placeholder:before{
    font-size: 2.4rem;
    line-height: 2rem;
    margin-left: 10px;
}
.vjs-rewind-button:before, .vjs-forward-button:before,
.vjs-previous-button:before, .vjs-next-button:before,
.vjs-chapters-button:before
{
    font-size: 2.4rem;
    line-height: 2rem;
    margin-left: 10px;
    position: relative;
}

.vjs-rewind-button:before, .vjs-forward-button:before {
    top: -11px;
}

.vjs-previous-button:before, .vjs-next-button:before, .vjs-chapters-button:before {
    top: -6px;
}

.video-js .vjs-volume-panel .vjs-volume-control {
    margin-left: 10px;
}


/* Fullscreen-Button an den rechten Rand schieben */
/*.video-js .vjs-fullscreen-control {
    margin-left: auto;
}
.video-js .vjs-chapters-button {
    margin-left: auto;
}
.video-js .vjs-previous-button {
    margin-left: auto;
}
.video-js .vjs-next-button {
    margin-left: auto;
}*/