/* ==========================================================================
   TEUFELBERGER HERO MASK - VOLLSTÄNDIGES CSS
   ========================================================================== */

/* --- HAUPTCONTAINER (BASIS) --- */
.elementor-element.tb-hero-mask-yes {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--tb-bg-color, transparent) !important;
    background-image: var(--tb-mask-bl, url("../images/maske-links-unten.svg")), var(--tb-mask-lt, url("../images/maske-links-oben.svg")) !important; 
    background-size: var(--tb-mask-bl-w, 70%) auto, var(--tb-mask-lt-w, 100%) auto !important; 
    background-position: var(--tb-mask-bl-pos, 0% 100%), var(--tb-mask-lt-pos, 0% 0%) !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* --- BILD LAYER --- */
.elementor-element.tb-hero-mask-yes:not(.tb-hero-bg-type-video)::before {
    content: "" !important;
    position: absolute !important;
    top: var(--tb-img-layer-top, 0) !important;
    bottom: var(--tb-img-layer-bottom, auto) !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--tb-img-layer-h, 100%) !important;
    z-index: 1 !important; 
    pointer-events: none !important;
    background-image: linear-gradient(var(--tb-img-overlay, transparent), var(--tb-img-overlay, transparent)), var(--tb-img, none) !important;
    background-size: cover, cover !important;
    background-position: var(--tb-img-pos-preset, var(--tb-img-pos-preset-fallback, 50% 50%)) !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: var(--tb-mask-photo, url("../images/teufelberger-maske-01.svg")) !important;
    -webkit-mask-size: var(--tb-mask-photo-w, 100%) var(--tb-mask-photo-h, 100%) !important;
    -webkit-mask-position: var(--tb-mask-photo-pos, var(--tb-mask-photo-pos-fallback, 50% 50%)) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-image: var(--tb-mask-photo, url("../images/teufelberger-maske-01.svg")) !important;
    mask-size: var(--tb-mask-photo-w, 100%) var(--tb-mask-photo-h, 100%) !important;
    mask-position: var(--tb-mask-photo-pos, var(--tb-mask-photo-pos-fallback, 50% 50%)) !important;
    mask-repeat: no-repeat !important;
}

/* --- VIDEO LAYER (UMMANTELUNG) --- */
.tb-hero-video-layer {
    position: absolute !important;
    top: var(--tb-img-layer-top, 0) !important;
    bottom: var(--tb-img-layer-bottom, auto) !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--tb-img-layer-h, 100%) !important;
    z-index: 1 !important; 
    pointer-events: none !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    -webkit-mask-image: var(--tb-mask-photo, url("../images/teufelberger-maske-01.svg")) !important;
    -webkit-mask-size: var(--tb-mask-photo-w, 100%) var(--tb-mask-photo-h, 100%) !important;
    -webkit-mask-position: var(--tb-mask-photo-pos, var(--tb-mask-photo-pos-fallback, 50% 50%)) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-image: var(--tb-mask-photo, url("../images/teufelberger-maske-01.svg")) !important;
    mask-size: var(--tb-mask-photo-w, 100%) var(--tb-mask-photo-h, 100%) !important;
    mask-position: var(--tb-mask-photo-pos, var(--tb-mask-photo-pos-fallback, 50% 50%)) !important;
    mask-repeat: no-repeat !important;
}

/* --- OVERLAY FÜR VIDEO --- */
.tb-hero-video-layer::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: var(--tb-img-overlay, transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* --- NATIVE MP4 VIDEO TAG --- */
.tb-hero-video-layer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--tb-img-pos-preset, var(--tb-img-pos-preset-fallback, 50% 50%)) !important;
    position: absolute !important;
    top: 0;
    left: 0;
    pointer-events: none !important;
}

/* NATIVE BROWSER-CONTROLS VERSTECKEN */
.tb-hero-video-layer video::-webkit-media-controls,
.tb-hero-video-layer video::-webkit-media-controls-enclosure,
.tb-hero-video-layer video::-webkit-media-controls-panel,
.tb-hero-video-layer video::-webkit-media-controls-start-playback-button,
.tb-hero-video-layer video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* --- IFRAME (YOUTUBE / VIMEO) DESKTOP --- */
.tb-hero-video-layer iframe {
    position: absolute !important;
    top: 50% !important; 
    left: 50% !important;
    width: max(100vw, 177.77vh) !important;
    height: max(56.25vw, 100vh) !important;
    max-width: none !important; 
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: translate(-50%, -50%) scale(1.05) !important; 
    transform-origin: center center !important;
    pointer-events: none !important;
}

/* --- INHALTE (TEXTE/BUTTONS) --- */
.elementor-element.tb-hero-mask-yes > *:not(.tb-hero-video-layer) { 
    position: relative !important; 
    z-index: 2 !important; 
}

/* ==========================================================================
   MOBILE OPTIMIERUNG (80vh + Exakter Fix)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. Container: 80vh und Clipping */
    .elementor-element.tb-hero-mask-yes {
        height: 80vh !important; 
        min-height: 80vh !important; 
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 0 40vw 40vw !important; 
        overflow: hidden !important;
        -webkit-mask: none !important;
        mask: none !important;
        -webkit-transform: translateZ(0); 
        transform: translateZ(0);
    }

    /* 2. Video-Ebene: MUSS exakt die Rundung übernehmen */
    .elementor-element.tb-hero-mask-yes .tb-hero-video-layer {
        -webkit-mask: none !important;
        mask: none !important;
        border-radius: 0 0 40vw 40vw !important; 
        height: 130% !important;
        width: 100% !important;
        margin-top: -25% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        overflow: hidden !important;
    }

    /* 3. Fallback-Bild */
    .elementor-element.tb-hero-mask-yes:not(.tb-hero-bg-type-video)::before {
        -webkit-mask: none !important;
        mask: none !important;
        border-radius: 0 0 40vw 40vw !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* 4. IFRAME: Zentral und Zoom-fix */
    .elementor-element.tb-hero-mask-yes .tb-hero-video-layer iframe {
        width: 100vw !important;
        height: 100vh !important;
        min-width: 177.77vh !important;
        min-height: 56.25vw !important;
        top: 50% !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1.15) !important; 
        max-width: none !important;
        max-height: none !important;
    }
	

	
}