/* Backoffice Dropdown Optimierung v3 */

header,
header *,
nav,
nav *,
.navbar,
.navbar *,
.main-nav,
.main-nav *{
    box-sizing:border-box;
}

header,
nav,
.navbar,
.main-nav{
    overflow:visible !important;
}

.ow-backoffice-dropdown-host{
    position:relative !important;
    overflow:visible !important;
}

.ow-backoffice-dropdown-host > a,
.ow-backoffice-dropdown-host > button,
.ow-backoffice-dropdown-host > summary,
.ow-backoffice-dropdown-host > .nav-link,
.ow-backoffice-dropdown-host > .dropdown-toggle{
    position:relative;
    z-index:10001;
}

.ow-backoffice-dropdown-menu{
    position:absolute !important;
    top:calc(100% + 12px) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) translateY(0) !important;
    width:clamp(360px, 58vw, 760px) !important;
    max-width:calc(100vw - 20px) !important;
    min-width:320px !important;
    z-index:10000 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    overflow:auto !important;
    max-height:min(72vh, 760px) !important;
    border-radius:18px !important;
    background:
        radial-gradient(circle at top right, rgba(214,161,74,.10), transparent 32%),
        linear-gradient(180deg, rgba(18,10,5,.985) 0%, rgba(8,4,2,.995) 100%) !important;
    border:1px solid rgba(214,161,74,.24) !important;
    box-shadow:
        0 20px 46px rgba(0,0,0,.40),
        0 0 0 1px rgba(214,161,74,.04) inset !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    scrollbar-width:thin;
    scrollbar-color:rgba(214,161,74,.35) rgba(255,255,255,.04);
}

.ow-backoffice-dropdown-menu::-webkit-scrollbar{
    width:10px;
}

.ow-backoffice-dropdown-menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
    border-radius:999px;
}

.ow-backoffice-dropdown-menu::-webkit-scrollbar-thumb{
    background:rgba(214,161,74,.30);
    border-radius:999px;
}

.ow-backoffice-dropdown-menu::before{
    content:"";
    position:absolute;
    top:-8px;
    left:50%;
    width:16px;
    height:16px;
    transform:translateX(-50%) rotate(45deg);
    background:rgba(18,10,5,.985);
    border-left:1px solid rgba(214,161,74,.24);
    border-top:1px solid rgba(214,161,74,.24);
    z-index:0;
}

.ow-backoffice-dropdown-menu::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.ow-backoffice-dropdown-menu.ow-align-left{
    left:0 !important;
    right:auto !important;
    transform:none !important;
}

.ow-backoffice-dropdown-menu.ow-align-left::before{
    left:34px !important;
    transform:rotate(45deg) !important;
}

.ow-backoffice-dropdown-menu.ow-align-right{
    left:auto !important;
    right:0 !important;
    transform:none !important;
}

.ow-backoffice-dropdown-menu.ow-align-right::before{
    left:auto !important;
    right:34px !important;
    transform:rotate(45deg) !important;
}

.ow-backoffice-dropdown-menu > *{
    position:relative;
    z-index:1;
    max-width:100% !important;
}

.ow-backoffice-dropdown-menu .backoffice-grid,
.ow-backoffice-dropdown-menu .dropdown-grid,
.ow-backoffice-dropdown-menu .menu-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
}

.ow-backoffice-dropdown-menu.ow-single-column .backoffice-grid,
.ow-backoffice-dropdown-menu.ow-single-column .dropdown-grid,
.ow-backoffice-dropdown-menu.ow-single-column .menu-grid{
    grid-template-columns:1fr !important;
}

.ow-backoffice-dropdown-menu .backoffice-grid > *,
.ow-backoffice-dropdown-menu .dropdown-grid > *,
.ow-backoffice-dropdown-menu .menu-grid > *{
    min-width:0 !important;
}

.ow-backoffice-dropdown-menu a,
.ow-backoffice-dropdown-menu .dropdown-item,
.ow-backoffice-dropdown-menu .menu-item,
.ow-backoffice-dropdown-menu .ow-bo-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:5px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:104px !important;
    padding:13px 15px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
    background:linear-gradient(180deg, rgba(214,161,74,.050) 0%, rgba(214,161,74,.020) 100%) !important;
    border:1px solid rgba(214,161,74,.16) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
    transition:
        transform .12s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

.ow-backoffice-dropdown-menu a:hover,
.ow-backoffice-dropdown-menu .dropdown-item:hover,
.ow-backoffice-dropdown-menu .menu-item:hover,
.ow-backoffice-dropdown-menu .ow-bo-card:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(214,161,74,.30) !important;
    background:linear-gradient(180deg, rgba(214,161,74,.082) 0%, rgba(214,161,74,.030) 100%) !important;
    box-shadow:0 12px 24px rgba(0,0,0,.18) !important;
}

.ow-backoffice-dropdown-menu .ow-bo-eyebrow,
.ow-backoffice-dropdown-menu small,
.ow-backoffice-dropdown-menu .eyebrow{
    display:block !important;
    margin:0 !important;
    color:#d8a755 !important;
    font-size:.76rem !important;
    font-weight:800 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    line-height:1.2 !important;
    opacity:.98 !important;
}

.ow-backoffice-dropdown-menu .ow-bo-title,
.ow-backoffice-dropdown-menu strong,
.ow-backoffice-dropdown-menu h3,
.ow-backoffice-dropdown-menu h4{
    display:block !important;
    margin:0 !important;
    color:#f4ead8 !important;
    font-size:1.04rem !important;
    line-height:1.22 !important;
    font-weight:800 !important;
}

.ow-backoffice-dropdown-menu .ow-bo-desc,
.ow-backoffice-dropdown-menu p{
    margin:0 !important;
    color:#d4b48a !important;
    font-size:.94rem !important;
    line-height:1.34 !important;
    font-weight:500 !important;
}

.ow-backoffice-dropdown-menu .ow-bo-title + .ow-bo-desc,
.ow-backoffice-dropdown-menu strong + p,
.ow-backoffice-dropdown-menu h3 + p,
.ow-backoffice-dropdown-menu h4 + p{
    margin-top:2px !important;
}

.ow-backoffice-dropdown-menu span{
    color:inherit;
}

.ow-backoffice-dropdown-menu,
.ow-backoffice-dropdown-menu *{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}

.ow-backoffice-dropdown-host .dropdown-menu,
.ow-backoffice-dropdown-host .submenu,
.ow-backoffice-dropdown-host .sub-menu,
.ow-backoffice-dropdown-host .menu-dropdown,
.ow-backoffice-dropdown-host .mega-menu,
.ow-backoffice-dropdown-host .mega-dropdown,
.ow-backoffice-dropdown-host .nav-dropdown{
    inset-inline:auto !important;
}

@media (max-width: 980px){
    .ow-backoffice-dropdown-menu{
        width:clamp(360px, 74vw, 680px) !important;
    }
}

@media (max-width: 760px){
    .ow-backoffice-dropdown-menu{
        left:0 !important;
        right:auto !important;
        transform:none !important;
        width:min(520px, calc(100vw - 14px)) !important;
        max-width:calc(100vw - 14px) !important;
        min-width:0 !important;
        padding:10px !important;
        border-radius:16px !important;
    }

    .ow-backoffice-dropdown-menu::before{
        left:30px !important;
        transform:rotate(45deg) !important;
    }

    .ow-backoffice-dropdown-menu .backoffice-grid,
    .ow-backoffice-dropdown-menu .dropdown-grid,
    .ow-backoffice-dropdown-menu .menu-grid{
        grid-template-columns:1fr !important;
    }

    .ow-backoffice-dropdown-menu a,
    .ow-backoffice-dropdown-menu .dropdown-item,
    .ow-backoffice-dropdown-menu .menu-item,
    .ow-backoffice-dropdown-menu .ow-bo-card{
        min-height:unset !important;
        padding:12px 14px !important;
    }
}

@media (max-width: 480px){
    .ow-backoffice-dropdown-menu{
        left:6px !important;
        right:auto !important;
        width:calc(100vw - 12px) !important;
        max-width:calc(100vw - 12px) !important;
    }

    .ow-backoffice-dropdown-menu::before{
        left:24px !important;
    }
}