/* ── Sidebar ── */
:root {
    --artikel-sidebar-breite: 20rem;
}


/* ── Mobile Panel (Sidebar als Overlay auf kleinen Screens) ── */

.mobile-panel-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .mobile-panel-backdrop.mobile-panel--sichtbar {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 299;
    }

    .mobile-panel--sichtbar {
        display: flex !important;
        position: fixed;
        top: var(--oo-wdb-header-height);
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        z-index: 300;
        background: white;
        overflow-y: auto;
        width: auto !important;
        flex: none !important;
        flex-direction: column;
        padding: var(--oo-space-3);
    }

    /* Body-Scroll sperren solange ein Panel offen ist */
    body:has(.mobile-panel--sichtbar) {
        overflow: hidden;
    }
}

/* ── Status-Farben ── */
/* Farbbalken links am Panel/Button je nach Artikel-Status */
.status-1-panel,
.status-1-button {
    border-left: 0.15rem solid var(--oo-success) !important;
}

.status-3-panel,
.status-3-button {
    border-left: 0.15rem solid var(--oo-warning) !important;
}

.status-2-panel,
.status-2-button {
    border-left: 0.15rem solid var(--oo-danger) !important;
}