/*
 * Tecknoid303 – mobile responsive fix
 * Künstlerprofil + Startseitenkarten
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 700px) {
    /* Gemeinsame Sicherheit gegen horizontales Überlaufen. */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        min-width: 0;
    }

    img,
    audio,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    /* Öffentliche Künstlerseite */
    body.artist-page .wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto 100px !important;
        padding: 0 14px !important;
    }

    body.artist-page .top {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    body.artist-page .top-links {
        gap: 10px !important;
    }

    body.artist-page .hero {
        width: 100% !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    body.artist-page .hero-content {
        min-height: 0 !important;
        padding: 24px 18px !important;
    }

    body.artist-page .hero-profile {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        align-items: start !important;
    }

    body.artist-page .profile-avatar {
        width: 88px !important;
        height: 88px !important;
        border-width: 3px !important;
        border-radius: 18px !important;
    }

    body.artist-page .hero h1 {
        margin-top: 2px !important;
        font-size: clamp(34px, 11vw, 48px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.5px !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .profile-claim {
        max-width: 100% !important;
        font-size: clamp(16px, 4.7vw, 20px) !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .profile-genres,
    body.artist-page .profile-facts {
        gap: 8px !important;
    }

    body.artist-page .profile-genre,
    body.artist-page .profile-fact {
        max-width: 100%;
        font-size: 11px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    body.artist-page .p2-action {
        width: auto !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 12px 18px !important;
        white-space: normal !important;
    }

    /*
     * Nicht mehrere lange Tabs in eine Zeile quetschen.
     * Auf dem Smartphone werden zwei klare Spalten verwendet.
     */
    body.artist-page .profile-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 9px !important;
        overflow: visible !important;
    }

    body.artist-page .profile-nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 9px 8px !important;
        border-radius: 9px !important;
        background: #f5f7fa;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .about-section,
    body.artist-page .profile-extra {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.artist-page .about-card,
    body.artist-page .profile-extra-card {
        width: 100% !important;
        padding: 20px 18px !important;
        border-radius: 15px !important;
    }

    body.artist-page .about-card h2,
    body.artist-page .profile-extra-card h2 {
        font-size: clamp(23px, 7vw, 32px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .about-text,
    body.artist-page .profile-extra-card p,
    body.artist-page .equipment-list {
        font-size: clamp(15px, 4.4vw, 18px) !important;
        line-height: 1.65 !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    body.artist-page .release-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin: 28px 0 16px !important;
    }

    body.artist-page .release-heading h2 {
        max-width: 100%;
        font-size: clamp(34px, 11vw, 48px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.4px !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .release-heading .muted {
        font-size: 14px !important;
    }

    body.artist-page .shop-layout,
    body.artist-page .grid,
    body.artist-page main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.artist-page .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    body.artist-page .cover {
        width: 100% !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    body.artist-page .title {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .desc {
        min-height: 0 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere;
    }

    body.artist-page .card > div[style*="margin:12px"] {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        margin: 12px 15px !important;
        overflow: hidden !important;
    }

    body.artist-page .card .p3-card-player,
    body.artist-page .card .player-wrapper,
    body.artist-page .card .preview-player,
    body.artist-page .card .custom-audio-player,
    body.artist-page .card .audio-player {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.artist-page .card .p3-preview-copy,
    body.artist-page .card .preview-info,
    body.artist-page .card .preview-meta,
    body.artist-page .card .player-label {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: ellipsis;
    }

    body.artist-page .meta {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body.artist-page .buy-form {
        flex: 1 1 210px !important;
    }

    body.artist-page .buy {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    body.artist-page .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 22px !important;
    }

    /* Startseite: Überschriften und Karten */
    body:not(.artist-page) .section-title {
        max-width: 100% !important;
        font-size: clamp(30px, 9.5vw, 43px) !important;
        line-height: 1.03 !important;
        letter-spacing: -1.2px !important;
        overflow-wrap: anywhere;
    }

    body:not(.artist-page) .track-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 20px !important;
    }

    body:not(.artist-page) .track-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        overflow: hidden !important;
    }

    body:not(.artist-page) .track-card .card-cover {
        aspect-ratio: 1 / 1 !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    body:not(.artist-page) .track-card .card-title {
        max-width: 100% !important;
        font-size: clamp(23px, 6.5vw, 31px) !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body:not(.artist-page) .track-card .player-wrapper {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: 12px 16px !important;
        overflow: hidden !important;
    }

    body:not(.artist-page) .track-card .p3-card-player,
    body:not(.artist-page) .track-card .preview-player,
    body:not(.artist-page) .track-card .custom-audio-player,
    body:not(.artist-page) .track-card .audio-player {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body:not(.artist-page) .track-card .p3-preview-copy,
    body:not(.artist-page) .track-card .preview-info,
    body:not(.artist-page) .track-card .preview-meta,
    body:not(.artist-page) .track-card .player-label {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body:not(.artist-page) .track-card .card-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    body:not(.artist-page) .track-card .btn-stream-buy {
        min-height: 48px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 390px) {
    body.artist-page .profile-nav {
        grid-template-columns: 1fr !important;
    }

    body.artist-page .hero h1,
    body.artist-page .release-heading h2 {
        font-size: 34px !important;
    }
}