/* ===========================
   NEXTHIT - AGGRESSIVE MOBILE FIX
   MAXIMALE PRIORITÄT - Überschreibt ALLES
   =========================== */

/* === KRITISCHER OVERFLOW-FIX === */

/* HTML & BODY: Absolute Kontrolle */
html,
html body,
body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* ALLE ELEMENTE: Keine Ausnahmen */
*,
*::before,
*::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* HAUPTCONTAINER: Extra-sicher */
main,
section,
article,
div,
header,
footer,
nav {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* HERO SECTION: Oft der Übeltäter */
.hero,
.hero-content,
.hero-container {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* PARTICLE CANVAS: Fixed-Position Problem */
#particleCanvas,
canvas#particleCanvas {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
}

/* PODIUM & RANKING: Grid-Probleme */
.podium,
.ranking-list,
.ranking-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* SHARE BUTTONS: Container-Überlauf */
.share-buttons-container,
.social-share {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    align-items: center !important;
}

/* IMAGES & MEDIA: Niemals überlaufen */
img,
video,
canvas,
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* IFRAME: max-width only, NOT height auto (Spotify needs fixed height) */
iframe:not([src*="spotify"]) {
    max-width: 100% !important;
    height: auto !important;
}

/* SPOTIFY IFRAME: Keep original height */
iframe[src*="spotify"] {
    max-width: 100% !important;
    /* height from HTML attribute - NO override */
}

/* LOGO: Normale Größe auf Desktop, responsive auf Mobile */
.logo img,
header .logo img {
    max-width: none !important;
    height: 60px !important;
}

@media (max-width: 768px) {
    .logo img,
    header .logo img {
        max-width: 180px !important;
        height: auto !important;
    }
}

/* FOOTER: Oft zu breit */
footer,
.footer-grid,
.footer-content {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* === TOUCH-TARGETS FIX (WCAG AA) === */

/* ALLE BUTTONS: Minimum 48x48px (WCAG AA+) */
button,
.btn,
.button,
a.button,
input[type="button"],
input[type="submit"],
.action-button,
.create-button,
.play-button,
.download-button,
.license-button {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    touch-action: manipulation !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SHARE BUTTONS: Extra Groß */
.share-button,
.social-button,
[class*="share"] button {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 12px !important;
}

/* NAVIGATION LINKS */
nav a,
.nav-link,
.menu-item a,
a[href] {
    min-height: 48px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* CTA BUTTONS: Große Targets */
.neon-button-large,
.cta-button,
.primary-button,
.neon-button {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 14px 28px !important;
}

/* FORM INPUTS: Touch-freundlich */
input,
textarea,
select {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Verhindert iOS Zoom */
}

/* TRACK CARDS & LICENSE CARDS */
.track-card,
.license-card,
.ranking-card {
    min-height: 48px !important;
    padding: 16px !important;
}

/* PLAYER CONTROLS */
.player-controls button,
.audio-controls button {
    min-width: 48px !important;
    min-height: 48px !important;
}

/* === MOBILE BREAKPOINTS === */

@media (max-width: 768px) {
    /* Container: Extra Padding */
    .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Hero: Mobile Anpassung */
    .hero {
        padding: 80px 20px 40px !important;
    }

    /* Tagline: Kleinere Schrift */
    .tagline {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        padding: 0 15px !important;
    }

    /* Ranking Cards: Volle Breite */
    .ranking-card,
    .license-card,
    .podium-card {
        max-width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Footer Grid: Single Column */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Share Buttons: Flex Wrap */
    .share-buttons-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* Podium: Single Column */
    .podium {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    /* Extra Small: Noch kompakter */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Hero Titel: Kleinere Schrift */
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* Tagline: Minimale Schrift */
    .tagline {
        font-size: 0.9rem !important;
    }

    /* Share Button SVGs: Kleinere Icons */
    .share-button svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* License Cards: Kompakt */
    .license-card {
        padding: 15px !important;
    }

    .license-card .price {
        font-size: 1.5rem !important;
    }
}

/* === NOTFALL-FIX: Falls ALLES versagt === */

/* Body Scroll-Lock auf Mobile */
@media (max-width: 768px) {
    body {
        position: relative !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Pseudo-Elements: Auch begrenzen */
    body::before,
    body::after {
        max-width: 100vw !important;
    }
}

/* === SPEZIELLE ELEMENT-FIXES === */

/* TOP 3 RANKING PODIUM KARTEN - FIX FÜR ABSCHNEIDEN */
.podium,
.podium-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.podium-card,
.podium-item {
    min-height: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

.podium-card h3,
.podium-item h3,
.podium-card .song-title,
.podium-item .song-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
    max-height: none !important;
    line-height: 1.4 !important;
}

/* Soundwave Container */
.soundwave-container,
#soundwaveCanvas {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Modal Content */
.modal-content,
.modal-body {
    max-width: 95vw !important;
    margin: 5vh auto !important;
}

/* Ranking Positions */
.position-1,
.position-2,
.position-3 {
    max-width: 100% !important;
}

/* License Cards Container */
.license-options,
.payment-options {
    max-width: 100% !important;
    overflow: hidden !important;
}