/* BUECHLER MUSIKPRODUKTION - CLEAN SIDEBAR MENU */

:root{
    --bmp-menu-bg:#050505;
    --bmp-menu-panel:#101010;
    --bmp-menu-card:#171717;
    --bmp-menu-border:rgba(255,255,255,.09);
    --bmp-menu-text:#ffffff;
    --bmp-menu-muted:rgba(255,255,255,.58);
    --bmp-menu-green:#1ed760;
    --bmp-menu-green-dark:#0f8f3d;
}

@media(min-width:1101px){
    body{
        padding-left:286px !important;
    }
}

.bmp-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:286px;
    z-index:9999;
    background:
        radial-gradient(circle at top left, rgba(30,215,96,.16), transparent 280px),
        linear-gradient(180deg,#050505 0%,#080808 55%,#050505 100%);
    border-right:1px solid var(--bmp-menu-border);
    box-shadow:22px 0 70px rgba(0,0,0,.42);
    display:flex;
    flex-direction:column;
    color:var(--bmp-menu-text);
}

.bmp-sidebar-head{
    padding:22px 18px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.bmp-logo{
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.bmp-logo-dot{
    width:46px;
    height:46px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg,var(--bmp-menu-green),#16a34a);
    color:#06130a;
    font-size:24px;
    font-weight:1000;
    box-shadow:0 18px 44px rgba(30,215,96,.18);
}

.bmp-logo strong{
    display:block;
    font-size:17px;
    line-height:1.05;
    letter-spacing:.2px;
}

.bmp-logo small{
    display:block;
    margin-top:3px;
    color:var(--bmp-menu-muted);
    font-size:12px;
    font-weight:800;
}

.bmp-sidebar-close{
    display:none;
    border:0;
    background:rgba(255,255,255,.08);
    color:#fff;
    width:38px;
    height:38px;
    border-radius:14px;
    font-size:26px;
    cursor:pointer;
}

.bmp-sidebar-nav{
    padding:6px 12px 18px;
    overflow:auto;
    flex:1;
}

.bmp-side-section{
    margin:12px 0 18px;
}

.bmp-side-title{
    padding:0 12px 8px;
    font-size:11px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:rgba(255,255,255,.42);
    font-weight:1000;
}

.bmp-side-link{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:46px;
    padding:10px 12px;
    margin:4px 0;
    border-radius:16px;
    color:rgba(255,255,255,.78);
    text-decoration:none;
    font-size:14px;
    font-weight:850;
    border:1px solid transparent;
    transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}

.bmp-side-link:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.08);
}

.bmp-side-link.is-active{
    color:#06130a;
    background:linear-gradient(135deg,var(--bmp-menu-green),#28e06c);
    border-color:rgba(30,215,96,.9);
    box-shadow:0 14px 34px rgba(30,215,96,.18);
}

.bmp-side-icon{
    width:30px;
    height:30px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    font-size:15px;
    flex:0 0 auto;
}

.bmp-side-link.is-active .bmp-side-icon{
    background:rgba(0,0,0,.14);
}

.bmp-sidebar-bottom{
    padding:14px;
    border-top:1px solid var(--bmp-menu-border);
    background:rgba(0,0,0,.28);
}

.bmp-user-box{
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    margin-bottom:10px;
    min-width:0;
}

.bmp-user-avatar{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#262626,#171717);
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--bmp-menu-green);
    font-weight:1000;
    flex:0 0 auto;
}

.bmp-user-box strong{
    display:block;
    color:#fff;
    font-size:14px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:178px;
}

.bmp-user-box small{
    display:block;
    color:var(--bmp-menu-green);
    font-size:11px;
    font-weight:900;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:178px;
}

.bmp-logout-btn,
.bmp-login-btn,
.bmp-register-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    border-radius:999px;
    text-decoration:none;
    font-weight:950;
    margin-top:8px;
}

.bmp-logout-btn{
    background:rgba(255,70,70,.11);
    color:#ffb4b4;
    border:1px solid rgba(255,70,70,.18);
}

.bmp-login-btn{
    background:var(--bmp-menu-green);
    color:#06130a;
}

.bmp-register-btn{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
}

.bmp-mobile-menu-btn,
.bmp-mobile-brand,
.bmp-menu-backdrop{
    display:none;
}

@media(max-width:1100px){
    body{
        padding-left:0 !important;
        padding-top:72px !important;
    }

    .bmp-mobile-brand{
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:72px;
        z-index:9997;
        display:flex;
        align-items:center;
        gap:12px;
        padding:0 76px 0 16px;
        color:#fff;
        background:
            radial-gradient(circle at top left, rgba(30,215,96,.16), transparent 260px),
            rgba(5,5,5,.96);
        border-bottom:1px solid var(--bmp-menu-border);
        backdrop-filter:blur(16px);
    }

    .bmp-mobile-brand .bmp-logo-dot{
        width:42px;
        height:42px;
        border-radius:14px;
    }

    .bmp-mobile-brand strong{
        font-size:15px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .bmp-mobile-menu-btn{
        position:fixed;
        top:13px;
        right:14px;
        z-index:10001;
        width:46px;
        height:46px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.08);
        border-radius:16px;
        padding:10px;
        cursor:pointer;
        display:block;
    }

    .bmp-mobile-menu-btn span{
        display:block;
        height:3px;
        background:#fff;
        border-radius:999px;
        margin:5px 0;
        transition:transform .18s ease, opacity .18s ease;
    }

    body.bmp-menu-open .bmp-mobile-menu-btn span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    body.bmp-menu-open .bmp-mobile-menu-btn span:nth-child(2){
        opacity:0;
    }

    body.bmp-menu-open .bmp-mobile-menu-btn span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .bmp-sidebar{
        width:min(330px, calc(100vw - 46px));
        transform:translateX(-104%);
        transition:transform .22s ease;
        z-index:10000;
        box-shadow:28px 0 80px rgba(0,0,0,.60);
    }

    body.bmp-menu-open .bmp-sidebar{
        transform:translateX(0);
    }

    .bmp-sidebar-close{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .bmp-menu-backdrop{
        position:fixed;
        inset:0;
        z-index:9998;
        background:rgba(0,0,0,.58);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
        display:block;
    }

    body.bmp-menu-open .bmp-menu-backdrop{
        opacity:1;
        pointer-events:auto;
    }
}

@media(max-width:420px){
    .bmp-sidebar{
        width:min(318px, calc(100vw - 24px));
    }

    .bmp-mobile-brand strong{
        max-width:210px;
    }
}

/* FIX: altes Layout nicht doppelt verschieben */
.topbar{
    display:none !important;
}

@media(min-width:1101px){
    body{
        padding-left:0 !important;
    }

    .wrap{
        width:calc(100% - 286px) !important;
        max-width:none !important;
        margin-left:286px !important;
        padding:26px 28px 70px !important;
    }
}

@media(max-width:1100px){
    body{
        padding-left:0 !important;
        padding-top:72px !important;
    }

    .wrap{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        padding:18px 14px 60px !important;
    }
}