/* ==========================================================================
   MOBILE TESTIMONIAL VIDEOS - ENABLE PLAYBACK
   Ermöglicht das Abspielen und Stoppen von testimonial videos auf mobilen Geräten
   ========================================================================== */

@media (max-width: 768px) {
    
    /* ===== TESTIMONIAL VIDEOS - INTERAKTION AKTIVIEREN ===== */
    .testimonial-video {
        /* Aktiviere Pointer-Events für testimonial videos */
        pointer-events: auto !important;
        touch-action: manipulation !important;
        
        /* Native Controls wieder aktivieren */
        -webkit-media-controls: auto !important;
        -webkit-media-controls-panel: auto !important;
        -webkit-media-controls-play-button: none !important;
        -webkit-media-controls-start-playback-button: none !important;
        
        /* Entferne Fullscreen Button für mobile */
        -webkit-media-controls-fullscreen-button: none !important;
        
        /* User-Selection für Controls erlauben */
        -webkit-user-select: auto !important;
        user-select: auto !important;
        
        /* Mobile-optimierte Darstellung */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        
        /* Controls sichtbar machen */
        controls: true !important;
        
        /* Playsinline für iOS */
        -webkit-playsinline: true !important;
        playsinline: true !important;
        
        /* Tap-Highlight für bessere UX */
        -webkit-tap-highlight-color: rgba(220, 20, 60, 0.2) !important;
        
        /* Border für bessere Erkennung */
        border: 2px solid rgba(220, 20, 60, 0.3) !important;
        border-radius: 8px !important;
        
        /* Preload für bessere Performance */
        preload: metadata !important;
    }
    
    /* ===== TESTIMONIAL VIDEO CONTROLS SICHTBAR ===== */
    .testimonial-video::-webkit-media-controls {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
    }
    
    .testimonial-video::-webkit-media-controls-panel {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .testimonial-video::-webkit-media-controls-play-button {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .testimonial-video::-webkit-media-controls-start-playback-button {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .testimonial-video::-webkit-media-controls-timeline {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .testimonial-video::-webkit-media-controls-current-time-display {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .testimonial-video::-webkit-media-controls-time-remaining-display {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .testimonial-video::-webkit-media-controls-volume-slider {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .testimonial-video::-webkit-media-controls-mute-button {
        display: flex !important;
        -webkit-appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* ===== CONTAINER ANPASSUNGEN ===== */
    .events-testimonials__videos {
        /* Sichere Touch-Interaktion */
        touch-action: auto !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    
    .events-testimonials__events {
        /* Sichere Touch-Interaktion */
        touch-action: auto !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    
    /* ===== MOBILE-FREUNDLICHE VIDEO WRAPPER ===== */
    .testimonial-video-wrapper {
        position: relative !important;
        width: 100% !important;
        margin-bottom: var(--spacing-md) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid rgba(220, 20, 60, 0.3) !important;
    }
    
    /* ===== TOUCH-OPTIMIERT FÜR BESSERE BEDIENUNG ===== */
    .testimonial-video {
        min-height: 200px !important;
        touch-action: manipulation !important;
    }
    
    /* ===== LOADING STATE ===== */
    .testimonial-video[data-loading="true"] {
        background: linear-gradient(45deg, 
            rgba(220, 20, 60, 0.1) 0%, 
            rgba(220, 20, 60, 0.2) 50%, 
            rgba(220, 20, 60, 0.1) 100%) !important;
        animation: pulse 2s infinite !important;
    }
    
    @keyframes pulse {
        0% { opacity: 0.8; }
        50% { opacity: 1; }
        100% { opacity: 0.8; }
    }
    
    /* ===== ERROR STATE ===== */
    .testimonial-video[data-error="true"] {
        border-color: rgba(255, 0, 0, 0.5) !important;
        background: rgba(255, 0, 0, 0.1) !important;
    }
    
    .testimonial-video[data-error="true"]::after {
        content: "⚠️ Video konnte nicht geladen werden" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: white !important;
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== LANDSCAPE ORIENTATION ANPASSUNGEN ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .testimonial-video {
        max-height: 60vh !important;
        object-fit: cover !important;
    }
}