:root {
    --maddma-filter-a-bottom-offset: 0px;
}

body.page-category.maddma-filter-a-enabled
.filter-collapse[id^="filter-collapse_"] {
    display: none !important;
}

html.maddma-filter-a-resume
body.page-category
.filter-collapse[id^="filter-collapse_"] {
    display: none !important;
}

@media (min-width: 768px) {
    html.maddma-filter-a-resume:not(.maddma-filter-a-ready)::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        bottom: var(--maddma-filter-a-bottom-offset, 0px);
        width: 420px;
        max-width: 92vw;
        z-index: 11015;
        background: #fff;
        box-shadow: 4px 0 18px rgba(0,0,0,.12);
        pointer-events: none;
    }
}

.maddma-filter-a-backdrop,
.maddma-filter-a-drawer {
    display: none;
}

@media (min-width: 768px) {
    body.maddma-filter-a-open {
        overflow: hidden;
    }

    .maddma-filter-a-backdrop {
        position: fixed;
        inset: 0;
        z-index: 11000;
        display: block;
        background: rgba(0,0,0,.32);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 160ms ease, visibility 160ms ease;
    }

    .maddma-filter-a-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .maddma-filter-a-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: var(--maddma-filter-a-bottom-offset, 0px);
        z-index: 11020;
        display: none;
        flex-direction: column;
        width: 420px;
        max-width: 92vw;
        background: #fff;
        box-shadow: 4px 0 18px rgba(0,0,0,.12);
    }

    .maddma-filter-a-drawer.is-open {
        display: flex;
    }

    .maddma-filter-a-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 66px;
        padding: 0 22px;
        border-bottom: 1px solid #e5e5e5;
        background: #fff;
    }

    .maddma-filter-a-title {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .maddma-filter-a-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }

    .maddma-filter-a-content {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 22px 24px;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
    }

    .maddma-filter-a-footer {
        flex: 0 0 auto;
        padding: 14px 22px 16px;
        border-top: 1px solid #e5e5e5;
        background: #fff;
    }

    .maddma-filter-a-finish {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        border: 0;
        border-radius: 2px;
        background: #d10816;
        color: #fff;
        font: inherit;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
    }

    .maddma-filter-a-group {
        border-bottom: 1px solid #ececec;
    }

    .maddma-filter-a-group-toggle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 16px 32px 16px 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .maddma-filter-a-group-toggle::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        font-size: 1.35rem;
        font-weight: 400;
        line-height: 1;
    }

    .maddma-filter-a-group.is-open .maddma-filter-a-group-toggle::after {
        content: "−";
    }

    .maddma-filter-a-values {
        display: none;
        padding: 0 0 12px;
    }

    .maddma-filter-a-group.is-open .maddma-filter-a-values {
        display: block;
    }

    .maddma-filter-a-row {
        display: grid;
        grid-template-columns: 22px minmax(0,1fr) auto;
        align-items: start;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 7px 0;
        cursor: pointer;
    }

    .maddma-filter-a-checkbox {
        width: 17px;
        height: 17px;
        margin: 2px 0 0;
        cursor: pointer;
    }

    .maddma-filter-a-label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .maddma-filter-a-count {
        min-width: 2.6em;
        padding: 2px 7px;
        background: #eef0f2;
        text-align: center;
        white-space: nowrap;
        font-size: .9em;
    }

    .maddma-filter-a-more {
        display: block;
        width: 100%;
        margin: 6px 0 2px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .maddma-filter-a-drawer.is-loading .maddma-filter-a-content {
        position: relative;
    }

    .maddma-filter-a-drawer.is-loading .maddma-filter-a-content::after {
        content: "Filter wird aktualisiert …";
        position: absolute;
        inset: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: rgba(255,255,255,.96);
        font-weight: 600;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
    .maddma-filter-a-backdrop {
        transition: none;
    }
}