/* Mobile Fixes - nur für Mobilgeräte */

/* ========== TICKETS MOBILE ========== */
@media (max-width: 768px) {
    /* Alle Tickets sichtbar und scrollbar */
    .tickets__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
        padding: 0 var(--spacing-md) !important;
    }
    
    .ticket-card {
        width: 100% !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    /* Premium Ticket hervorheben aber alle sichtbar */
    .ticket-card:nth-child(2) {
        border-color: #DC143C !important; /* Rot statt grün */
        order: -1; /* Erscheint oben */
    }

    /* VIP Ticket in ticket-wrapper auch rot */
    .ticket-wrapper .ticket-card {
        border-color: #DC143C !important; /* Rot statt grün für VIP */
    }
    
    .ticket-card__badge {
        position: absolute !important;
        top: -10px !important;
        right: 15px !important;
        z-index: 10 !important;
    }
}

/* ========== EVENT HIGHLIGHTS MOBILE ========== */
@media (max-width: 768px) {
    .highlights__container {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .highlights__slider {
        display: flex !important;
        transition: transform 0.3s ease !important;
        touch-action: pan-x !important;
    }
    
    .highlight-card {
        min-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    /* Touch Controls */
    .highlights__slider-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--spacing-sm) !important;
        margin-top: var(--spacing-md) !important;
    }
    
    .highlights__slider-btn {
        background: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        cursor: pointer !important;
        transition: background 0.3s ease !important;
    }
    
    .highlights__slider-btn:hover {
        background: var(--color-accent) !important;
    }
    
    .highlights__dots {
        display: flex !important;
        gap: 8px !important;
    }
    
    .highlights__dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.4) !important;
        border: none !important;
        cursor: pointer !important;
        transition: background 0.3s ease !important;
    }
    
    .highlights__dot.active {
        background: var(--color-accent) !important;
    }
}

/* ========== TAGESPROGRAMM MOBILE ========== */
@media (max-width: 768px) {
    .programm__tab-nav {
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        gap: 8px !important;
        padding: var(--spacing-sm) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .programm__tab {
        min-width: 120px !important;
        flex-shrink: 0 !important;
        padding: var(--spacing-sm) var(--spacing-xs) !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .programm__tab-time {
        font-weight: 700 !important;
        display: block !important;
        margin-bottom: 2px !important;
    }
    
    .programm__tab-title {
        font-size: 0.7rem !important;
        opacity: 0.9 !important;
        line-height: 1.2 !important;
    }
    
    /* Content Bereich */
    .programm__content {
        min-height: 400px !important;
        padding: var(--spacing-md) !important;
    }
}

/* ========== VIDEO HANDLING MOBILE ========== */
@media (max-width: 768px) {
    /* Videos in Event Highlights kleiner */
    .highlight-card__video {
        max-height: 200px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    /* Komplett verhindere Fullscreen und Touch-Interaktion */
    .highlight-card__video {
        /* Entferne alle Kontrollelemente */
        controls: false !important;
        webkit-playsinline: true !important;
        playsinline: true !important;
        
        /* Verhindere Touch-Events */
        pointer-events: none !important;
        touch-action: none !important;
        
        /* Verstecke Fullscreen-Button vollständig */
        -webkit-media-controls: none !important;
        -webkit-media-controls-panel: none !important;
        -webkit-media-controls-play-button: none !important;
        -webkit-media-controls-fullscreen-button: none !important;
        -webkit-media-controls-start-playback-button: none !important;
        
        /* Verhindere native Video-Interaktionen */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        
        /* Autoplay ohne Sound */
        muted: true !important;
    }
    
    /* Verstecke alle Media-Kontrollen */
    .highlight-card__video::-webkit-media-controls {
        display: none !important;
        -webkit-appearance: none !important;
    }
    
    .highlight-card__video::-webkit-media-controls-panel {
        display: none !important;
    }
    
    .highlight-card__video::-webkit-media-controls-play-button {
        display: none !important;
    }
    
    .highlight-card__video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }
    
    .highlight-card__video::-webkit-media-controls-start-playback-button {
        display: none !important;
    }
    
    /* Container für Video-Interaktion verhindern */
    .highlight-card {
        position: relative !important;
    }
    
    /* Entfernt - verdeckt den Inhalt */
    
    /* Video-Container Wrapper */
    .highlight-card__video-wrapper {
        position: relative !important;
        overflow: hidden !important;
        border-radius: var(--border-radius-md) !important;
    }
}