/* ==========================================================================
   MOBILE HIGHLIGHTS FINAL WORKING - ÜBERSCHREIBT GARANTIERT ALLES
   HÖCHSTE CSS SPEZIFITÄT + CACHE-BUSTING
   ANTI-OVERFLOW-HIDDEN ULTIMATIV
   ========================================================================== */

/* ULTIMATIVE OVERFLOW-ÜBERSCHREIBUNG - ALLE MÖGLICHEN KOMBINATIONEN */
@media screen and (max-width: 768px) {
    html body .hero,
    html body div.container section#highlights.section,
    html body div.container section#highlights,
    html body section#highlights.section,
    html body section#highlights,
    html body #highlights,
    html body .highlights__container,
    html body div.container .highlights__container,
    html body section#highlights .highlights__container,
    html body .highlights__slider-wrapper,
    html body div.container .highlights__slider-wrapper,
    html body section#highlights .highlights__slider-wrapper {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        touch-action: auto !important;
        pointer-events: auto !important;
    }
    
    /* SLIDER SPEZIFISCH - NUR HORIZONTAL SCROLL */
    html body .highlights__slider,
    html body div.container .highlights__slider,
    html body section#highlights .highlights__slider,
    html body #highlights-slider {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: none !important;
        height: auto !important;
        touch-action: pan-x !important;
        pointer-events: auto !important;
    }
}

/* NUR FÜR MOBILE GERÄTE - ÜBERSCHREIBT NUR MOBILE, LÄSST DESKTOP INTAKT */
@media screen and (max-width: 768px) {
    
    /* CONTAINER STRUCTURE - ULTIMATIVE SPEZIFITÄT */
    html body div.container section#highlights.section {
        width: 100% !important;
        margin: 0 !important;
        padding: 2rem 0 4rem 0 !important;
        position: relative !important;
        overflow: visible !important;
        min-height: 1000px !important;
        height: auto !important;
    }
    
    html body div.container section#highlights.section .highlights__container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 4rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        overflow: visible !important;
        min-height: 1000px !important;
        height: auto !important;
    }
    
    html body div.container section#highlights.section .highlights__slider-wrapper {
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
        min-height: 900px !important;
        height: auto !important;
    }
    
    /* SLIDER - ZENTRALES FLEXBOX LAYOUT MIT VOLLSTÄNDIGEN KARTEN */
    html body div.container section#highlights.section .highlights__slider,
    html body div.container section#highlights.section #highlights-slider {
        /* LAYOUT - ZENTRALER CONTAINER */
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* CONTAINER - VOLLBREITE ABER ZENTRIERT */
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 16px !important;
        gap: 16px !important;
        min-height: 900px !important;
        height: auto !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        
        /* SCROLL - NUR HORIZONTAL, KEIN VERTIKALES SCROLLEN */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        
        /* TOUCH-AKTIONEN - NUR HORIZONTAL */
        touch-action: pan-x !important;
        pointer-events: auto !important;
        
        /* RESET */
        transform: none !important;
        position: relative !important;
        z-index: 1 !important;
        
        /* FORCE CLEAN LAYOUT */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    /* SCROLLBAR VERSTECKEN */
    html body div.container section#highlights.section .highlights__slider::-webkit-scrollbar,
    html body div.container section#highlights.section #highlights-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* HIGHLIGHT CARDS - VOLLSTÄNDIG SICHTBARE KARTEN - ÜBERSCHREIBT HIGHLIGHTS-STATIC.CSS */
    html body div.container section#highlights.section .highlight-card,
    html body section#highlights.section .highlight-card,
    html body section#highlights .highlight-card,
    html body #highlights .highlight-card,
    html body .highlight-card {
        /* DIMENSIONEN - VERGRÖSSERT FÜR VOLLSTÄNDIGE SICHTBARKEIT */
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
        
        /* CSS GRID WIE DESKTOP - KOMPAKTE HÖHEN */
        display: grid !important;
        grid-template-rows: 180px 60px 50px 160px !important;
        gap: 0 !important;
        
        /* FLEX PROPERTIES FÜR SLIDER */
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        
        /* SPACING */
        margin: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        
        /* DESIGN - DESKTOP-ÄQUIVALENT */
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.3s ease !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        position: relative !important;
        z-index: 2 !important;
        
        /* SCROLL-VERHALTEN - KEINE INTERNEN SCROLLS */
        overflow: visible !important;
        touch-action: pan-x !important;
    }
    
    /* HOVER EFFEKT - DESKTOP-ÄQUIVALENT */
    html body div.container section#highlights.section .highlight-card:hover {
        transform: translateY(-5px) !important;
    }
    
    /* FEATURED ERSTE KARTE */
    html body div.container section#highlights.section .highlight-card:first-child {
        border: 2px solid rgba(220, 20, 60, 0.5) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        box-shadow: 0 8px 32px rgba(220, 20, 60, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* VIDEO CONTAINER - VERDOPPELTE HÖHE */
    html body div.container section#highlights.section .highlight-card .highlight-card__video-container {
        /* GRID POSITION */
        grid-row: 1 !important;
        
        /* DIMENSIONEN - ANGEPASST FÜR GRID */
        width: 100% !important;
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        
        /* DESIGN */
        border-radius: 10px !important;
        overflow: hidden !important;
        margin-bottom: 15px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        position: relative !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* VIDEO ELEMENT - MOBILE OPTIMIERT */
    html body div.container section#highlights.section .highlight-card video,
    html body div.container section#highlights.section .highlight-card .highlight-card__video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        transition: opacity 0.3s ease !important;
        
        /* MOBILE VIDEO FIXES */
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-playsinline: true !important;
        playsinline: true !important;
        webkit-playsinline: true !important;
    }
    
    /* CONTENT CONTAINER - ÜBERSCHREIBT HIGHLIGHTS-STATIC.CSS */
    html body div.container section#highlights.section .highlight-card .highlight-card__content,
    html body section#highlights.section .highlight-card .highlight-card__content,
    html body section#highlights .highlight-card .highlight-card__content,
    html body #highlights .highlight-card .highlight-card__content,
    html body .highlight-card .highlight-card__content {
        /* GRID BEREICH */
        grid-row: 2 / 5 !important;
        
        /* GRID FÜR CONTENT - KOMPAKTE HÖHEN */
        display: grid !important;
        grid-template-rows: 60px 50px 160px !important;
        gap: 0 !important;
        
        /* SPACING */
        margin: 0 !important;
        padding: 0 !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* CARD TITEL - DESKTOP-ÄQUIVALENT */
    html body div.container section#highlights.section .highlight-card .highlight-card__title,
    html body div.container section#highlights.section .highlight-card h3 {
        /* GRID POSITION */
        grid-row: 1 !important;
        
        /* FIXE HÖHE WIE DESKTOP */
        height: 60px !important;
        
        /* TYPOGRAFIE */
        font-family: var(--font-heading, Inter, system-ui, sans-serif) !important;
        color: #ffffff !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-transform: uppercase !important;
        letter-spacing: -0.01em !important;
        
        /* LAYOUT - ZENTRIERT WIE DESKTOP */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        
        /* SPACING */
        margin: 0 !important;
        padding: 10px !important;
        
        /* VISUAL EFFECT */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 8px !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
        
        /* OVERFLOW */
        overflow: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* CATEGORY BUTTON - PERFEKT ZENTRIERT */
    html body div.container section#highlights.section .highlight-card .highlight-card__category,
    html body div.container section#highlights.section .highlight-card button {
        /* GRID POSITION */
        grid-row: 2 !important;
        
        /* FIXE HÖHE WIE DESKTOP */
        height: 50px !important;
        
        /* DESIGN */
        font-family: var(--font-heading, Inter, system-ui, sans-serif) !important;
        background: #DC143C !important;
        color: white !important;
        border: none !important;
        border-radius: 25px !important;
        
        /* TYPOGRAFIE */
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: -0.01em !important;
        text-align: center !important;
        
        /* SPACING */
        padding: 8px 16px !important;
        margin: 10px auto !important;
        
        /* LAYOUT - PERFEKT ZENTRIERT */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 180px !important;
        width: auto !important;
        align-self: center !important;
        justify-self: center !important;
        
        /* POSITION */
        position: relative !important;
        
        /* INTERACTION DEAKTIVIERT */
        cursor: default !important;
        pointer-events: none !important;
        transition: none !important;
        
        /* SHADOWS */
        box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3) !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* BUTTON HOVER DEAKTIVIERT */
    html body div.container section#highlights.section .highlight-card .highlight-card__category:hover,
    html body div.container section#highlights.section .highlight-card button:hover {
        background: #DC143C !important;
        box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3) !important;
        transform: none !important;
    }
    
    /* CARD BESCHREIBUNG - FLEXIBEL */
    html body div.container section#highlights.section .highlight-card .highlight-card__description,
    html body div.container section#highlights.section .highlight-card p {
        /* GRID POSITION */
        grid-row: 3 !important;
        
        /* TYPOGRAFIE */
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        
        /* LAYOUT - ZENTRIERT */
        text-align: center !important;
        overflow: visible !important;
        display: block !important;
        
        /* SPACING */
        padding: 15px !important;
        margin: 0 !important;
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        
        /* VISUAL EFFECT */
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 8px !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        
        /* SICHTBARKEIT */
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
        
        /* TEXT OVERFLOW */
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* DOTS VERSTECKEN - Nur Pfeile anzeigen */
    html body div.container section#highlights.section .highlights__dots,
    html body section#highlights.section .highlights__dots, 
    html body section#highlights .highlights__dots,
    html body #highlights .highlights__dots,
    html body div.container section#highlights.section .highlights__dot,
    html body section#highlights.section .highlights__dot,
    html body section#highlights .highlights__dot,
    html body #highlights .highlights__dot,
    html body #highlights-dots {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* SLIDER WRAPPER - Relative Position für Pfeile */
    html body div.container section#highlights.section .highlights__slider-wrapper,
    html body section#highlights.section .highlights__slider-wrapper,
    html body section#highlights .highlights__slider-wrapper,
    html body #highlights .highlights__slider-wrapper {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }
    
    /* SLIDER CONTROLS CONTAINER - Transparent für Pfeile */
    html body div.container section#highlights.section .highlights__slider-controls,
    html body section#highlights.section .highlights__slider-controls,
    html body section#highlights .highlights__slider-controls,
    html body #highlights .highlights__slider-controls {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
        pointer-events: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* SWIPE PFEILE - Kleine dezente Navigation */
    html body div.container section#highlights.section .highlights__slider-btn,
    html body section#highlights.section .highlights__slider-btn,
    html body section#highlights .highlights__slider-btn,
    html body #highlights .highlights__slider-btn,
    html body #highlights-prev,
    html body #highlights-next {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        
        /* Styling - Nur Symbol, kein Hintergrund */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        
        /* Typography */
        font-size: 24px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        text-align: center !important;
        
        /* Effects - Dezenter Schatten */
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.8) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 50 !important;
        opacity: 0.8 !important;
        
        /* Remove ALL button defaults */
        padding: 0 !important;
        margin: 0 !important;
        outline: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
        
        /* Remove button appearance */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        
        /* Remove button box model */
        box-sizing: content-box !important;
        min-width: 0 !important;
        min-height: 0 !important;
        
        /* Force positioning */
        position: absolute !important;
    }
    
    /* Prev Button - Links positioniert */
    html body #highlights-prev {
        left: -17px !important;
        right: auto !important;
    }
    
    /* Next Button - Rechts positioniert */
    html body #highlights-next {
        right: -17px !important;
        left: auto !important;
    }
    
    /* Hover Effekt für Pfeile - Nur Symbol */
    html body div.container section#highlights.section .highlights__slider-btn:hover,
    html body section#highlights.section .highlights__slider-btn:hover,
    html body section#highlights .highlights__slider-btn:hover,
    html body #highlights .highlights__slider-btn:hover,
    html body #highlights-prev:hover,
    html body #highlights-next:hover {
        opacity: 1 !important;
        color: #DC143C !important;
        transform: translateY(-50%) scale(1.2) !important;
        text-shadow: 0 0 12px rgba(220, 20, 60, 0.8) !important;
    }
    
    /* HIGHLIGHT CARDS ABSTAND - Verhindere Überlappung */
    html body div.container section#highlights.section .highlight-card,
    html body section#highlights.section .highlight-card,
    html body section#highlights .highlight-card,
    html body #highlights .highlight-card {
        margin-right: 20px !important;
        margin-left: 0 !important;
    }
    
    /* Letztes Element - kein rechter Abstand */
    html body div.container section#highlights.section .highlight-card:last-child,
    html body section#highlights.section .highlight-card:last-child,
    html body section#highlights .highlight-card:last-child,
    html body #highlights .highlight-card:last-child {
        margin-right: 0 !important;
    }
}

/* RESPONSIVE ANPASSUNGEN */
@media screen and (max-width: 480px) {
    html body div.container section#highlights.section .highlight-card {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        height: 460px !important;
        grid-template-rows: 180px 45px 35px 1fr !important;
        padding: 0.9rem !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__video-container {
        height: 160px !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__title,
    html body div.container section#highlights.section .highlight-card h3 {
        height: 45px !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__category,
    html body div.container section#highlights.section .highlight-card button {
        height: 35px !important;
    }
    
    html body div.container section#highlights.section .highlights__slider,
    html body div.container section#highlights.section #highlights-slider {
        min-height: 440px !important;
        gap: 0.8rem !important;
        padding: 0 0.8rem !important;
    }
}

@media screen and (max-width: 360px) {
    html body div.container section#highlights.section .highlight-card {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        height: 440px !important;
        grid-template-rows: 160px 40px 32px 1fr !important;
        padding: 0.8rem !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__video-container {
        height: 140px !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__title,
    html body div.container section#highlights.section .highlight-card h3 {
        height: 40px !important;
    }
    
    html body div.container section#highlights.section .highlight-card .highlight-card__category,
    html body div.container section#highlights.section .highlight-card button {
        height: 32px !important;
    }
    
    html body div.container section#highlights.section .highlights__slider,
    html body div.container section#highlights.section #highlights-slider {
        min-height: 420px !important;
        gap: 0.6rem !important;
        padding: 0 0.6rem !important;
    }
}