/* ==========================================================================
   MOBILE COUNTDOWN FIX - ULTIMATIVE LÖSUNG
   BEFREIT DEN COUNTDOWN AUS ALLEN CONTAINER-BESCHRÄNKUNGEN
   ========================================================================== */

/* NUR FÜR MOBILE GERÄTE */
@media screen and (max-width: 768px) {
    
    /* COUNTDOWN AUS HERO-CONTAINER BEFREIEN */
    html body .hero__countdown-bar {
        /* Komplette Isolation von Parent-Containern */
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        
        /* Absolute Vollbreite - ignoriert alle Parents */
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        
        /* Container-Beschränkungen überschreiben */
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        
        /* Höchste Priorität aber unter Navigation */
        z-index: 999 !important;
        
        /* Komplett transparenter Hintergrund */
        background: none !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
        
        /* Box-Model-Reset */
        box-sizing: border-box !important;
        overflow: visible !important;
        
        /* Aus jedem Container-Layout ausbrechen */
        contain: none !important;
        display: block !important;
    }
    
    /* COUNTDOWN DISPLAY - VOLLE VIEWPORT-KONTROLLE */
    html body .countdown__display {
        /* Komplette Breiten-Kontrolle */
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        
        /* Grid über gesamte Viewport-Breite */
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 8px !important;
        
        /* Padding für sichtbare Ränder */
        padding: 12px !important;
        margin: 0 !important;
        
        /* Box-Model korrekt */
        box-sizing: border-box !important;
        
        /* Reset aller störenden Styles */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        
        /* Layout-Kontrolle */
        text-align: center !important;
        align-items: center !important;
        min-height: 60px !important;
    }
    
    /* COUNTDOWN EINZELFELDER - OPTIMIERT */
    html body .countdown__display > * {
        /* Flexbox für vertikale Zentrierung */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Optimale Feldgröße */
        min-height: 45px !important;
        padding: 6px 4px !important;
        margin: 0 !important;
        
        /* Visueller Stil */
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        
        /* Overflow-Kontrolle */
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* COUNTDOWN ZAHLEN - PERFEKT SKALIERT */
    html body .countdown__display .countdown-item .number,
    html body .countdown__display .countdown-item span:first-child,
    html body .countdown__display > div > span:first-child,
    html body .countdown__display > * > *:first-child {
        /* Responsive aber begrenzte Größe */
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
        font-weight: 900 !important;
        color: #DC143C !important;
        
        /* Minimaler Text-Schatten für dezente Lesbarkeit */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
        
        /* Layout */
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        
        /* Text-Overflow-Schutz */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* COUNTDOWN LABELS - KOMPAKT */
    html body .countdown__display .countdown-item .label,
    html body .countdown__display .countdown-item span:last-child,
    html body .countdown__display > div > span:last-child,
    html body .countdown__display > * > *:last-child {
        /* Kleinere Labels */
        font-size: clamp(0.55rem, 2.2vw, 0.75rem) !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        
        /* Dezenter Text-Schatten für Labels */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25) !important;
        
        /* Styling */
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        
        /* Layout */
        margin-top: 3px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: block !important;
        
        /* Text-Overflow-Schutz */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* CONTENT-PUSH FÜR FIXED COUNTDOWN */
    html body .hero,
    html body main {
        padding-top: 130px !important;
    }
    
    /* ===== TICKET ANIMATIONEN ULTIMATIVE DEAKTIVIERUNG ===== */
    
    /* Höchste Spezifität - Überschreibt epic-tickets.css !important Regeln */
    html body .tickets__grid .ticket-card,
    html body .tickets__grid .ticket-card:hover,
    html body .tickets__grid .ticket-card:active,
    html body .tickets__grid .ticket-card:focus,
    html body .tickets__grid .ticket-card:nth-child(1):hover,
    html body .tickets__grid .ticket-card:nth-child(2):hover,
    html body .tickets__grid .ticket-card:nth-child(3):hover,
    html body .tickets__grid .ticket-card:nth-child(4):hover,
    html body .tickets__grid .ticket-card:nth-child(5):hover {
        /* Alle Transformationen deaktivieren */
        transform: none !important;
        transition: none !important;
        animation: none !important;
        
        /* Box-Shadow und andere Hover-Effekte */
        box-shadow: none !important;
        filter: none !important;
        
        /* Pointer Events für Touch-Geräte anpassen */
        cursor: default !important;
    }
    
    /* Velocity Overlays und Pseudo-Elemente komplett entfernen */
    html body .tickets__grid .ticket-card .velocity-bg,
    html body .tickets__grid .ticket-card .velocity-stripe,
    html body .tickets__grid .ticket-card::before,
    html body .tickets__grid .ticket-card::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Ticket Content statisch positionieren und zentrieren */
    html body .tickets__grid .ticket-card .ticket-card__content {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        position: relative !important;
        z-index: 1 !important;
        
        /* Content zentrieren */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 20px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    
    html body .tickets__grid .ticket-card .velocity-header,
    html body .tickets__grid .ticket-card .velocity-title,
    html body .tickets__grid .ticket-card .velocity-price {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Buttons zentrieren */
    html body .tickets__grid .ticket-card .velocity-button,
    html body .tickets__grid .ticket-card .ticket-button,
    html body .tickets__grid .ticket-card button,
    html body .tickets__grid .ticket-card .btn {
        margin: 10px auto !important;
        display: block !important;
        text-align: center !important;
        width: auto !important;
        min-width: 120px !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
    }
    
    /* ===== PREISSTUFE-TEXT IN EINER ZEILE ===== */
    
    /* Epic Disclaimer - Preisstufe Text optimiert für Mobile */
    html body .epic-disclaimer {
        text-align: center !important;
        padding: 12px 16px !important;
        margin: 16px auto !important;
        max-width: none !important;
    }
    
    html body .epic-disclaimer p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
        
        /* Flexbox für inline Anordnung */
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        
        /* Responsive Schriftgröße */
        font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
    }
    
    html body .epic-disclaimer .epic-text {
        /* Icons und Text in einer Zeile */
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        
        /* Responsives Font-Size für Icons */
        font-size: clamp(0.75rem, 3.2vw, 0.95rem) !important;
        font-weight: bold !important;
    }
    
    /* Rest des Textes auch inline */
    html body .epic-disclaimer p > span:not(.epic-text) {
        display: inline !important;
        white-space: nowrap !important;
    }
    
    /* Für sehr kleine Screens - Kompakt halten */
    @media screen and (max-width: 380px) {
        html body .epic-disclaimer p {
            font-size: 0.75rem !important;
            gap: 2px !important;
        }
        
        html body .epic-disclaimer .epic-text {
            font-size: 0.7rem !important;
            gap: 1px !important;
        }
    }
    
    /* Tickets Grid Layout für Mobile */
    html body .tickets__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }
    
    html body .tickets__grid .ticket-card {
        width: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }
    
    /* ===== EVENT HIGHLIGHTS SEKTION ENTFERNT ===== */
    /* Highlights werden jetzt durch mobile-highlights-desktop-like.css gesteuert */
    
    /* RESPONSIVE ANPASSUNGEN */
    @media screen and (max-width: 480px) {
        html body .countdown__display {
            padding: 10px !important;
            gap: 6px !important;
        }
        
        html body .countdown__display > * {
            min-height: 40px !important;
            padding: 5px 3px !important;
        }
    }
    
    @media screen and (max-width: 320px) {
        html body .countdown__display {
            padding: 8px !important;
            gap: 4px !important;
        }
        
        html body .countdown__display > * {
            min-height: 35px !important;
            padding: 4px 2px !important;
        }
    }
}