@import "/assets/netinsiders/css/set/root.incl.css?v2.0.1";
@import "https://font.nicdn.de/instrument-sans.css";

.fa-classic, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fal, .far, .fas, .fat,
.navbar-expand-xl .dropdown-toggle:after {
    font-family: "Font Awesome 6 Pro";
}

/* ---------------------------------- */
.fill-primary {
    fill: var(--text-success-color) !important;
}
.bg-primary {
    background-color: var(--text-success-color) !important;
}
.btn-primary {
    --bs-btn-bg: var(--text-success-color);
    color: #000000;
}
.text-primary {
    color: var(--text-success-color) !important;
}
a:hover {
    color: var(--text-success-color) !important;
}
.dropdown-item.active {
    color: var(--text-success-color) !important;
}
.dropdown-item:hover {
    color: var(--text-success-color) !important;
}


/* ------------ Video Background */

.interactive {
    position: relative; /* Erforderlich für absolut positionierte Kinder */
    overflow: hidden; /* Um sicherzustellen, dass das Video nicht über den Container hinausgeht */
}

.interactive .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.interactive .video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover; /* Skaliert das Video, um den gesamten Bereich zu füllen */
    z-index: 1;
    pointer-events: none; /* Falls notwendig, um Interaktionen zu verhindern */
}

@media (max-width: 992px) {
    .interactive.order-lg-2 {
        position: relative;
        overflow: hidden;
        height: 50vh; /* Definiere eine fixe Höhe für kleinere Bildschirme */
    }

    .interactive.order-lg-2 .video-bg {
        width: 100%;
        height: 100%;
    }

    .interactive.order-1.order-lg-2 .video-bg video {
        object-fit: cover;
        width: 100vw; /* Video füllt den Viewport aus */
        height: auto; /* Höhe proportional */
        top: 0;
        left: 0;
        transform: none; /* Kein Zentrieren erforderlich */
    }
}