/* ==========================================================================
   MOBILE FIXES FINAL - ALLE VIER PROBLEME OPTIMAL GELÖST
   KEINE LAYOUT-STÖRUNGEN - DESKTOP UNVERÄNDERT
   ========================================================================== */

/* ===== NUR FÜR MOBILE GERÄTE (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
    
    /* ===== PROBLEM 1: COUNTDOWN FIXED UNTER HEADER ===== */
    
    /* Countdown Container - Fixed positioning */
    body .hero__countdown-bar {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 100 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        
        /* Header-ähnliches Styling */
        background: rgba(18, 18, 18, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(220, 20, 60, 0.2) !important;
    }
    
    body .countdown__display {
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 12px !important;
        margin: 0 !important;
        
        /* Grid für gleichmäßige Verteilung */
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 8px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        text-align: center !important;
        min-height: 50px !important;
        box-sizing: border-box !important;
    }
    
    /* Countdown Einzelfelder */
    body .countdown__display > * {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 4px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        margin: 0 !important;
        min-height: 40px !important;
        overflow: hidden !important;
    }
    
    /* Countdown Zahlen */
    body .countdown__display .countdown-item .number,
    body .countdown__display .countdown-item span:first-child,
    body .countdown__display > div > span:first-child,
    body .countdown__display > * > *:first-child {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
        font-weight: 900 !important;
        color: #DC143C !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Countdown Labels */
    body .countdown__display .countdown-item .label,
    body .countdown__display .countdown-item span:last-child,
    body .countdown__display > div > span:last-child,
    body .countdown__display > * > *:last-child {
        font-size: clamp(0.5rem, 2vw, 0.7rem) !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        margin-top: 2px !important;
        line-height: 1 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Content Push für Fixed Countdown */
    body .hero,
    body main {
        padding-top: 135px !important;
    }
    
    /* ===== PROBLEM 2: LOGO-BEREICH - NUR 1 LOGO-PAAR ===== */
    
    /* Überschüssige Logos komplett verstecken */
    body .header__eagle,
    body .header__logos-right,
    body .header__eagle-right {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Logo Links optimieren */
    body .header__logo {
        height: 40px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    body .header__logo-img {
        height: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        max-height: 40px !important;
    }
    
    /* Header Layout optimieren */
    body .header__container {
        height: 60px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    body .header__wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 16px !important;
    }
    
    /* ===== PROBLEM 3: TICKET-ANIMATIONEN DEAKTIVIEREN ===== */
    
    /* Alle Ticket-Effekte komplett entfernen */
    body .ticket-card {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    body .ticket-card:hover {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
    }
    
    /* Velocity Overlays entfernen */
    body .ticket-card .velocity-bg,
    body .ticket-card .velocity-stripe,
    body .ticket-card::before,
    body .ticket-card::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ticket Content statisch */
    body .ticket-card__content {
        transform: none !important;
        transition: none !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Tickets Grid Layout */
    body .tickets__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }
    
    /* ===== PROBLEM 4: HIGHLIGHTS SLIDER ZENTRIEREN & ROTE DOTS ===== */
    
    /* Slider Container zentriert */
    body .highlights__container {
        position: relative !important;
        overflow: visible !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    body .highlights__slider-wrapper {
        width: 100% !important;
        overflow: visible !important;
        margin: 0 auto !important;
    }
    
    /* Slider - Vollbreite mit Zentrierung */
    body .highlights__slider {
        display: flex !important;
        gap: 16px !important;
        padding: 0 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    
    body .highlights__slider::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Highlight Cards - Optimale Größe */
    body .highlight-card {
        flex: 0 0 auto !important;
        width: calc(100vw - 64px) !important;
        max-width: 300px !important;
        min-width: 280px !important;
        scroll-snap-align: center !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }
    
    /* Highlights Container - Relative Position für Pfeile */
    body .highlights__container,
    body .highlights__slider-wrapper {
        position: relative !important;
    }
    
    /* Slider Controls - Zentriert mit relativer Position für Pfeile */
    body .highlights__slider-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 20px !important;
        position: relative !important;
    }
    
    /* Dots Container - Mittig positioniert */
    body .highlights__dots {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
        z-index: 10 !important;
    }
    
    /* Dots - Klein und Rot */
    body .highlights__dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.4) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        padding: 12px !important;
        margin: -12px !important;
        position: relative !important;
    }
    
    /* Aktiver Dot - Definitive rote Farbe */
    body .highlights__dot.active {
        background: #DC143C !important;
        background-color: #DC143C !important;
        transform: scale(1.2) !important;
        box-shadow: 0 0 8px rgba(220, 20, 60, 0.4) !important;
    }
    
    body .highlights__dot:hover {
        background: rgba(220, 20, 60, 0.7) !important;
    }
    
    /* Arrow Controls - Dezente Symbol-Pfeile (AKTUELLE VERSION) */
    body .highlights__slider-btn {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        
        /* Styling - NUR Symbol, transparent */
        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 - Text-Schatten statt Backdrop */
        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;
        
        /* Dezent positioniert */
        opacity: 0.8 !important;
        
        /* Button Reset */
        padding: 0 !important;
        margin: 0 !important;
        outline: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* Prev Button - Links positioniert */
    body #highlights-prev {
        left: -17px !important;
        right: auto !important;
    }
    
    /* Next Button - Rechts positioniert */
    body #highlights-next {
        right: -17px !important;
        left: auto !important;
    }
    
    /* Hover Effekt - Nur Symbol */
    body .highlights__slider-btn: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;
    }
}

/* ===== EXTRA KLEINE GERÄTE ===== */
@media screen and (max-width: 480px) {
    
    /* Countdown für sehr kleine Screens */
    body .hero__countdown-bar {
        width: calc(100vw - 16px) !important;
    }
    
    /* Highlight Cards für kleine Screens */
    body .highlight-card {
        width: calc(100vw - 48px) !important;
        max-width: 280px !important;
    }
    
    body .highlights__slider {
        padding: 0 12px !important;
        gap: 12px !important;
    }
}