/**
 * VideoFullscreen.css - Video mit ID "intro60" auf 100% Bildschirmgröße
 * Reines CSS für sofortige Anwendung ohne JavaScript-Verzögerung
 */

/* Video direkt mit ID ansprechen */
#intro60,
video#intro60 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important; /* Behält Aspect Ratio, füllt gesamten Screen */
    z-index: -1 !important; /* Hinter anderen Inhalten */
    pointer-events: none !important; /* Keine Interaktion blockieren */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background-color: #000 !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
}

/* Parent-Container des Videos auch anpassen falls nötig */
[id*="intro60"]:not(video) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: -1 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #000 !important;
}

/* Alle video-Tags in einem Container mit intro60 ID */
[id*="intro60"] video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Spezifisch für Hype-generierte IDs */
[id^="hype-obj"][id*="intro60"],
div[id*="intro60"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
}

/* Für Hype Container mit Video */
.HYPE_element video#intro60,
.HYPE_element [id*="intro60"] video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -1 !important;
}

/* Sicherstellen dass bei verschiedenen Viewport-Größen funktioniert */
@media screen and (max-width: 768px) {
    #intro60, video#intro60 {
        object-fit: cover !important;
    }
}

@media screen and (orientation: landscape) {
    #intro60, video#intro60 {
        object-fit: cover !important;
    }
}

@media screen and (orientation: portrait) {
    #intro60, video#intro60 {
        object-fit: cover !important;
    }
}

/* Chrome/Webkit spezifische Fixes */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #intro60, 
    video#intro60,
    [id*="intro60"] video {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        transform: translateZ(0) !important; /* Hardware-Beschleunigung */
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
}

/* Chrome-spezifisch mit :has() Selektor */
@supports selector(:has(*)) {
    div:has(> video#intro60),
    div:has(> [id*="intro60"]) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -1 !important;
    }
}

/* Blink-Engine (Chrome/Edge) spezifisch */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    #intro60, video#intro60 {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
}

/* Fallback für ältere Browser */
@supports not (object-fit: cover) {
    #intro60, video#intro60 {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}