/* ===========================
   NEXTHIT MOBILE HEADER FIX
   Logo und Share-Buttons Überlappung behoben
   =========================== */

/* Mobile Header Layout Fix (max-width: 768px) */
@media (max-width: 768px) {
    /* Header: Mehr Padding für Mobile */
    .nexthit-header {
        padding: 10px 0;
    }

    /* Container: Flexbox mit korrektem Spacing */
    .nexthit-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        padding: 0 15px;
    }

    /* Logo: Kleineres Logo auf Mobile */
    .logo {
        flex-shrink: 0;
        z-index: 1001;
    }

    .logo img {
        height: 45px !important; /* Kleiner auf Mobile */
        max-width: 150px;
    }

    /* Navigation: Versteckt auf Mobile (bereits im Style) */
    nav {
        display: none;
    }

    /* Share-Buttons Container (falls vorhanden) */
    .share-buttons {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
        z-index: 1001;
    }

    /* Share-Buttons: Kleinere Icons */
    .share-button {
        width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
        font-size: 14px !important;
    }

    /* Share-Button SVG Icons */
    .share-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Wenn Share-Buttons Text haben */
    .share-button span {
        display: none !important; /* Text auf Mobile verstecken */
    }
}

/* Extra kleine Screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Noch kleineres Logo */
    .logo img {
        height: 40px !important;
        max-width: 120px;
    }

    /* Share-Buttons noch kleiner */
    .share-button {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
        font-size: 12px !important;
    }

    .share-button svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Container: Weniger Padding */
    .nexthit-header .container {
        padding: 0 10px;
        gap: 10px;
    }
}

/* Extra kleine Screens (max-width: 360px) */
@media (max-width: 360px) {
    /* Minimal Logo */
    .logo img {
        height: 35px !important;
        max-width: 100px;
    }

    /* Minimal Share-Buttons */
    .share-button {
        width: 28px !important;
        height: 28px !important;
        padding: 5px !important;
    }

    .share-button svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Minimales Padding */
    .nexthit-header .container {
        padding: 0 8px;
        gap: 8px;
    }
}

/* Sicherstellen dass Header-Elemente nicht überlappen */
@media (max-width: 768px) {
    .nexthit-header .container > * {
        flex-shrink: 1;
        min-width: 0; /* Erlaubt Flexbox-Shrinking */
    }

    .logo {
        flex-shrink: 0; /* Logo soll nicht schrumpfen */
    }

    .share-buttons {
        flex-shrink: 0; /* Share-Buttons sollen nicht schrumpfen */
    }
}