/*
 BUECHLER MUSIKPRODUKTION - ULTRA MODERN TRACK DESIGN
 WICHTIG:
 Dieses CSS verändert NICHT das Menü.
 Keine .bmp-sidebar
 Keine .bmp-side-link
 Keine .bmp-mobile-menu-btn
 Keine Navigation-Änderung
*/

/* Track-Bereich als moderner Bento-Stream */
.tracks-grid,
.track-list-grid,
.bmp-compact-track-grid{
    width:100% !important;
    max-width:1780px !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap:24px !important;
    align-items:stretch !important;
    counter-reset:bmpTrackNo !important;
}

/* Ultra moderne Track-Karte */
.track-card,
.track-item-card,
.bmp-track-card{
    counter-increment:bmpTrackNo !important;
    width:100% !important;
    max-width:none !important;
    min-height:520px !important;
    display:grid !important;
    grid-template-rows:265px auto 1fr auto auto !important;
    gap:12px !important;
    padding:14px !important;
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    border-radius:34px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:
        linear-gradient(180deg, rgba(26,26,26,.82), rgba(7,7,7,.98) 48%, rgba(3,20,10,.98)),
        radial-gradient(circle at 84% 14%, rgba(30,215,96,.20), transparent 18rem),
        radial-gradient(circle at 18% 88%, rgba(255,255,255,.06), transparent 18rem) !important;
    box-shadow:
        0 32px 110px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(30,215,96,.07) !important;
    backdrop-filter:blur(22px) saturate(1.25) !important;
    transform:translateZ(0) !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

/* Neon-Glow */
.track-card::before,
.track-item-card::before,
.bmp-track-card::before{
    content:"" !important;
    position:absolute !important;
    inset:-2px !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 86% 16%, rgba(30,215,96,.42), transparent 12rem),
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.13), transparent 11rem),
        linear-gradient(135deg, rgba(30,215,96,.18), transparent 32%, rgba(255,255,255,.04)) !important;
    opacity:.72 !important;
    filter:saturate(1.15) !important;
}

/* Tracknummer als modernes UI-Element */
.track-card::after,
.track-item-card::after,
.bmp-track-card::after{
    content:counter(bmpTrackNo, decimal-leading-zero) !important;
    position:absolute !important;
    top:22px !important;
    right:22px !important;
    z-index:6 !important;
    height:34px !important;
    min-width:48px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    color:rgba(255,255,255,.82) !important;
    font-size:12px !important;
    font-weight:1000 !important;
    letter-spacing:.8px !important;
    background:rgba(0,0,0,.38) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:blur(16px) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.35) !important;
}

.track-card:hover,
.track-item-card:hover,
.bmp-track-card:hover{
    transform:translateY(-8px) scale(1.012) !important;
    border-color:rgba(30,215,96,.58) !important;
    box-shadow:
        0 42px 140px rgba(0,0,0,.68),
        0 0 0 1px rgba(30,215,96,.18),
        0 0 72px rgba(30,215,96,.16),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(30,215,96,.12) !important;
}

.track-card > *,
.track-item-card > *,
.bmp-track-card > *{
    position:relative !important;
    z-index:2 !important;
}

/* Cover als großer Hero-Bereich */
.track-card .cover,
.track-card .cover-wrap,
.track-card .bmp-track-cover,
.track-item-card .cover,
.track-item-card .cover-wrap,
.track-item-card .bmp-track-cover,
.bmp-track-card .cover,
.bmp-track-card .cover-wrap,
.bmp-track-card .bmp-track-cover{
    width:100% !important;
    height:265px !important;
    min-height:265px !important;
    max-height:265px !important;
    aspect-ratio:auto !important;
    border-radius:28px !important;
    overflow:hidden !important;
    position:relative !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,.24), transparent 18%),
        radial-gradient(circle at 82% 78%, rgba(30,215,96,.78), transparent 30%),
        linear-gradient(135deg, #272727 0%, #070707 50%, #075425 100%) !important;
    box-shadow:
        0 22px 70px rgba(0,0,0,.48),
        0 0 0 1px rgba(30,215,96,.14) inset,
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Cover-Layer für moderne Tiefe */
.track-card .cover::before,
.track-card .cover-wrap::before,
.track-card .bmp-track-cover::before,
.track-item-card .cover::before,
.track-item-card .cover-wrap::before,
.track-item-card .bmp-track-cover::before,
.bmp-track-card .cover::before,
.bmp-track-card .cover-wrap::before,
.bmp-track-card .bmp-track-cover::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22) 58%, rgba(0,0,0,.52)),
        linear-gradient(135deg, rgba(255,255,255,.12), transparent 35%, rgba(30,215,96,.18)),
        radial-gradient(circle at 85% 78%, rgba(30,215,96,.34), transparent 25%) !important;
}

.track-card .cover::after,
.track-card .cover-wrap::after,
.track-card .bmp-track-cover::after,
.track-item-card .cover::after,
.track-item-card .cover-wrap::after,
.track-item-card .bmp-track-cover::after,
.bmp-track-card .cover::after,
.bmp-track-card .cover-wrap::after,
.bmp-track-card .bmp-track-cover::after{
    content:"STREAM" !important;
    position:absolute !important;
    left:16px !important;
    bottom:14px !important;
    z-index:3 !important;
    height:28px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    border-radius:999px !important;
    font-size:10px !important;
    font-weight:1000 !important;
    letter-spacing:.9px !important;
    color:#041108 !important;
    background:#1ed760 !important;
    box-shadow:0 14px 38px rgba(30,215,96,.26) !important;
}

.track-card .cover img,
.track-card .cover-wrap img,
.track-card .bmp-track-cover img,
.track-item-card .cover img,
.track-item-card .cover-wrap img,
.track-item-card .bmp-track-cover img,
.bmp-track-card .cover img,
.bmp-track-card .cover-wrap img,
.bmp-track-card .bmp-track-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    transform:scale(1.03) !important;
    filter:saturate(1.18) contrast(1.10) brightness(.92) !important;
    transition:transform .32s ease, filter .32s ease !important;
}

.track-card:hover .cover img,
.track-card:hover .cover-wrap img,
.track-card:hover .bmp-track-cover img,
.track-item-card:hover .cover img,
.track-item-card:hover .cover-wrap img,
.track-item-card:hover .bmp-track-cover img,
.bmp-track-card:hover .cover img,
.bmp-track-card:hover .cover-wrap img,
.bmp-track-card:hover .bmp-track-cover img{
    transform:scale(1.075) !important;
    filter:saturate(1.26) contrast(1.12) brightness(.96) !important;
}

/* Titelbereich */
.bmp-track-info,
.track-card > :not(.cover):not(.cover-wrap):not(.bmp-track-cover):not(audio):not(.actions):not(.track-card-actions):not([class*="player"]),
.track-item-card > :not(.cover):not(.cover-wrap):not(.bmp-track-cover):not(audio):not(.actions):not(.track-card-actions):not([class*="player"]),
.bmp-track-card > :not(.cover):not(.cover-wrap):not(.bmp-track-cover):not(audio):not(.actions):not(.track-card-actions):not([class*="player"]){
    min-width:0 !important;
}

.track-title,
.track-card h2,
.track-item-card h2,
.bmp-track-card h2{
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(25px, 2.8vw, 38px) !important;
    line-height:.98 !important;
    letter-spacing:-1.15px !important;
    text-wrap:balance !important;
    text-shadow:0 12px 44px rgba(0,0,0,.52) !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}

.track-artist,
.bmp-track-card .track-artist,
.track-card .muted,
.track-item-card .muted,
.bmp-track-card .muted{
    color:rgba(255,255,255,.66) !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    margin:0 !important;
}

/* Tags als Pillen */
.track-meta-row{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    margin-top:2px !important;
}

.track-card .badge,
.track-item-card .badge,
.bmp-track-card .badge{
    width:max-content !important;
    min-height:25px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:5px 10px !important;
    border-radius:999px !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:.25px !important;
    color:rgba(255,255,255,.90) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.075) !important;
    backdrop-filter:blur(14px) !important;
}

.track-card .badge.ok,
.track-item-card .badge.ok,
.bmp-track-card .badge.ok{
    color:#041108 !important;
    background:#1ed760 !important;
    border-color:#1ed760 !important;
    box-shadow:0 12px 30px rgba(30,215,96,.22) !important;
}

/* Player als moderne Glass-Control */
.track-card audio,
.track-item-card audio,
.bmp-track-card audio,
.track-card [class*="player"],
.track-item-card [class*="player"],
.bmp-track-card [class*="player"]{
    width:100% !important;
    min-width:0 !important;
    border-radius:22px !important;
}

.track-card audio,
.track-item-card audio,
.bmp-track-card audio{
    min-height:48px !important;
    height:48px !important;
    padding:5px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.040)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 34px rgba(0,0,0,.24) !important;
}

.track-card audio::-webkit-media-controls-panel,
.track-item-card audio::-webkit-media-controls-panel,
.bmp-track-card audio::-webkit-media-controls-panel{
    background-color:#151515 !important;
}

/* Verbotstext kleiner und edler */
.track-card > p,
.track-item-card > p,
.bmp-track-card > p{
    min-height:34px !important;
    margin:0 !important;
    color:rgba(255,255,255,.48) !important;
    font-size:12px !important;
    line-height:1.38 !important;
}

/* Buttons unten als Premium-Actions */
.track-card .actions,
.track-card .track-card-actions,
.track-item-card .actions,
.track-item-card .track-card-actions,
.bmp-track-card .actions,
.bmp-track-card .track-card-actions{
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
}

.track-card .actions form,
.track-card .track-card-actions form,
.track-item-card .actions form,
.track-item-card .track-card-actions form,
.bmp-track-card .actions form,
.bmp-track-card .track-card-actions form{
    margin:0 !important;
    display:flex !important;
}

.track-card .actions .btn,
.track-card .track-card-actions .btn,
.track-card .actions button,
.track-card .track-card-actions button,
.track-item-card .actions .btn,
.track-item-card .track-card-actions .btn,
.track-item-card .actions button,
.track-item-card .track-card-actions button,
.bmp-track-card .actions .btn,
.bmp-track-card .track-card-actions .btn,
.bmp-track-card .actions button,
.bmp-track-card .track-card-actions button{
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    width:auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.050)) !important;
    box-shadow:
        0 12px 34px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.track-card .actions .btn:first-child,
.track-card .track-card-actions .btn:first-child,
.track-card .actions .track-open,
.track-card .track-card-actions .track-open,
.track-item-card .actions .btn:first-child,
.track-item-card .track-card-actions .btn:first-child,
.track-item-card .actions .track-open,
.track-item-card .track-card-actions .track-open,
.bmp-track-card .actions .btn:first-child,
.bmp-track-card .track-card-actions .btn:first-child,
.bmp-track-card .actions .track-open,
.bmp-track-card .track-card-actions .track-open{
    justify-content:center !important;
    background:#1ed760 !important;
    color:#041108 !important;
    border-color:#1ed760 !important;
    box-shadow:
        0 16px 42px rgba(30,215,96,.25),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.track-card .actions .btn:hover,
.track-card .track-card-actions .btn:hover,
.track-card .actions button:hover,
.track-card .track-card-actions button:hover,
.track-item-card .actions .btn:hover,
.track-item-card .track-card-actions .btn:hover,
.track-item-card .actions button:hover,
.track-item-card .track-card-actions button:hover,
.bmp-track-card .actions .btn:hover,
.bmp-track-card .track-card-actions .btn:hover,
.bmp-track-card .actions button:hover,
.bmp-track-card .track-card-actions button:hover{
    transform:translateY(-1px) !important;
    color:#041108 !important;
    background:#1ed760 !important;
    border-color:#1ed760 !important;
    box-shadow:
        0 16px 42px rgba(30,215,96,.24),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Aktiver Track */
.bmp-now-playing{
    border-color:rgba(30,215,96,.76) !important;
    background:
        linear-gradient(180deg, rgba(26,40,30,.88), rgba(7,7,7,.99) 48%, rgba(3,35,15,.99)),
        radial-gradient(circle at 84% 14%, rgba(30,215,96,.36), transparent 18rem) !important;
    box-shadow:
        0 44px 150px rgba(0,0,0,.72),
        0 0 0 1px rgba(30,215,96,.25),
        0 0 86px rgba(30,215,96,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.bmp-now-playing::after{
    content:"LIVE" !important;
    color:#041108 !important;
    background:#1ed760 !important;
    border-color:#1ed760 !important;
    box-shadow:0 14px 38px rgba(30,215,96,.28) !important;
}

.bmp-now-playing .track-title,
.bmp-now-playing h2{
    color:#1ed760 !important;
}

/* Große Monitore: hochwertiger 4er Flow */
@media(min-width:1800px){
    .tracks-grid,
    .track-list-grid,
    .bmp-compact-track-grid{
        grid-template-columns:repeat(auto-fill, minmax(390px, 1fr)) !important;
    }
}

/* Notebook */
@media(max-width:1280px){
    .tracks-grid,
    .track-list-grid,
    .bmp-compact-track-grid{
        grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)) !important;
        gap:18px !important;
    }

    .track-card,
    .track-item-card,
    .bmp-track-card{
        min-height:500px !important;
    }

    .track-card .cover,
    .track-card .cover-wrap,
    .track-card .bmp-track-cover,
    .track-item-card .cover,
    .track-item-card .cover-wrap,
    .track-item-card .bmp-track-cover,
    .bmp-track-card .cover,
    .bmp-track-card .cover-wrap,
    .bmp-track-card .bmp-track-cover{
        height:235px !important;
        min-height:235px !important;
        max-height:235px !important;
    }
}

/* Tablet */
@media(max-width:760px){
    .tracks-grid,
    .track-list-grid,
    .bmp-compact-track-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .track-card,
    .track-item-card,
    .bmp-track-card{
        min-height:auto !important;
        border-radius:28px !important;
    }

    .track-card .cover,
    .track-card .cover-wrap,
    .track-card .bmp-track-cover,
    .track-item-card .cover,
    .track-item-card .cover-wrap,
    .track-item-card .bmp-track-cover,
    .bmp-track-card .cover,
    .bmp-track-card .cover-wrap,
    .bmp-track-card .bmp-track-cover{
        height:230px !important;
        min-height:230px !important;
        max-height:230px !important;
    }
}

/* Handy */
@media(max-width:520px){
    .track-card,
    .track-item-card,
    .bmp-track-card{
        padding:12px !important;
        border-radius:24px !important;
        gap:10px !important;
    }

    .track-card .cover,
    .track-card .cover-wrap,
    .track-card .bmp-track-cover,
    .track-item-card .cover,
    .track-item-card .cover-wrap,
    .track-item-card .bmp-track-cover,
    .bmp-track-card .cover,
    .bmp-track-card .cover-wrap,
    .bmp-track-card .bmp-track-cover{
        height:190px !important;
        min-height:190px !important;
        max-height:190px !important;
        border-radius:20px !important;
    }

    .track-title,
    .track-card h2,
    .track-item-card h2,
    .bmp-track-card h2{
        font-size:23px !important;
        letter-spacing:-.75px !important;
    }

    .track-card .actions,
    .track-card .track-card-actions,
    .track-item-card .actions,
    .track-item-card .track-card-actions,
    .bmp-track-card .actions,
    .bmp-track-card .track-card-actions{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    .track-card .actions .btn:first-child,
    .track-card .track-card-actions .btn:first-child,
    .track-card .actions .track-open,
    .track-card .track-card-actions .track-open,
    .track-item-card .actions .btn:first-child,
    .track-item-card .track-card-actions .btn:first-child,
    .track-item-card .actions .track-open,
    .track-item-card .track-card-actions .track-open,
    .bmp-track-card .actions .btn:first-child,
    .bmp-track-card .track-card-actions .btn:first-child,
    .bmp-track-card .actions .track-open,
    .bmp-track-card .track-card-actions .track-open{
        grid-column:1 / -1 !important;
    }

    .track-card .actions .btn,
    .track-card .track-card-actions .btn,
    .track-card .actions button,
    .track-card .track-card-actions button,
    .track-item-card .actions .btn,
    .track-item-card .track-card-actions .btn,
    .track-item-card .actions button,
    .track-item-card .track-card-actions button,
    .bmp-track-card .actions .btn,
    .bmp-track-card .track-card-actions .btn,
    .bmp-track-card .actions button,
    .bmp-track-card .track-card-actions button{
        width:100% !important;
        justify-content:center !important;
    }
}