.block-kategorienblock {
    padding: 2rem 0;
}

.block-kategorienblock h2 {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.05rem;
}


.block-kategorienblock .item {
    overflow: hidden;
}

.block-kategorienblock .price del {
    opacity: 0.6;
    margin-right: 0.5rem;
}

.block-kategorienblock .price ins {
    text-decoration: none;
    font-weight: 700;
}


/*
 * ----------------------------------------------------------
 * Unterkategorien
 * ----------------------------------------------------------
 */

.block-kategorienblock .subcategories .card-img-top {
    width: 100%;
    height: auto;

    object-fit: cover;

    display: block;

    transition:
        transform 0.3s ease-in-out;
}

.block-kategorienblock .subcategories:hover img {
    transform: scale(1.10);
}

.block-kategorienblock .overlay {
    background: 
        linear-gradient(
        to top right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.7) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0) 90%
    );

    z-index: 10;
}


/*
 * ----------------------------------------------------------
 * Tabs
 * ----------------------------------------------------------
 */

.block-kategorienblock .gs-link {
    color: #000000;

    border: 2px solid #b0dc7e;

    background-color: #ffffff;
}

.block-kategorienblock .gs-link.active {
    color: #000000;

    border: 2px solid #b0dc7e;

    background-color: #b0dc7e;
}

.block-kategorienblock .gs-link:not(.active):hover {
    background-color: #efefef;
}


/*
 * ----------------------------------------------------------
 * Produktfilter
 * ----------------------------------------------------------
 */

.block-kategorienblock .gs-product-filter-form {
    background-color: #ffffff;
}

.block-kategorienblock .gs-product-filter-sidebar {
    top: 1rem;
}


/*
 * ----------------------------------------------------------
 * Modulanzahl
 * ----------------------------------------------------------
 */

.block-kategorienblock .gs-module-count {
    gap: 0.75rem;
}


/*
 * Einzelner Modulanzahl-Button.
 */
.block-kategorienblock .gs-module-count-btn {
    width: 45px;
    height: 45px;
    padding: 0;
    border: 2px solid #aaaaaa;
    border-radius: 0;
    background-color: #ffffff;
    color: #000000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    transition:
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        opacity 0.15s ease-in-out;
}


/*
 * Hover.
 */
.block-kategorienblock .gs-module-count-btn:hover {
    border-color: #888888;

    background-color: #efefef;

    color: #000000;
}


/*
 * Ausgewählt.
 */
.block-kategorienblock
.gs-module-count
.btn-check:checked
+
.gs-module-count-btn {
    border-color: #b0dc7e;

    background-color: #b0dc7e;

    color: #000000;
}


/*
 * Ausgewählt + Hover.
 */
.block-kategorienblock
.gs-module-count
.btn-check:checked
+
.gs-module-count-btn:hover {
    border-color: #b0dc7e;

    background-color: #b0dc7e;

    color: #000000;
}


/*
 * Tastatur-Fokus.
 */
.block-kategorienblock
.gs-module-count
.btn-check:focus-visible
+
.gs-module-count-btn {
    outline: 3px solid rgba(176, 220, 126, 0.45);
    outline-offset: 2px;

    box-shadow: none;
}


/*
 * Nicht verfügbare Werte.
 */
.block-kategorienblock
.gs-module-count
.btn-check:disabled
+
.gs-module-count-btn {
    opacity: 0.35;

    cursor: not-allowed;

    pointer-events: none;
}


/*
 * ----------------------------------------------------------
 * Range-Filter
 *
 * Wird verwendet für:
 *
 * - Preis
 * - Wattanzahl
 * ----------------------------------------------------------
 */

.block-kategorienblock .gs-range-filter {
    --range-start: 0%;
    --range-end: 100%;

    width: 100%;
}


/*
 * Min-/Max-Werte oben.
 */
.block-kategorienblock .gs-range-output {
    flex: 1 1 0;
    min-width: 0;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border: 2px solid #b5b5b5;
    border-radius: 0;
    background-color: #ffffff;
    color: #777777;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}


/*
 * Slider-Bereich.
 */
.block-kategorienblock .gs-range-slider {
    position: relative;
    width: 100%;
    height: 38px;
    margin-top: 0.25rem;
}


/*
 * Graue Grundlinie.
 */
.block-kategorienblock .gs-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    transform: translateY(-50%);
    background-color: #dedede;
    pointer-events: none;
    z-index: 1;
}


/*
 * Grüner ausgewählter Bereich.
 */
.block-kategorienblock .gs-range-progress {
    position: absolute;

    top: 50%;

    left:
        var(--range-start);

    right:
        calc(
            100%
            -
            var(--range-end)
        );

    height: 3px;

    transform:
        translateY(-50%);

    background-color: #b0dc7e;

    pointer-events: none;

    z-index: 2;
}


/*
 * Beide Range-Inputs liegen übereinander.
 */
.block-kategorienblock .gs-range-input {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 38px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: none;

    outline: none;
}


/*
 * Minimum.
 */
.block-kategorienblock .gs-range-input-min {
    z-index: 3;
}


/*
 * Maximum.
 */
.block-kategorienblock .gs-range-input-max {
    z-index: 4;
}


/*
 * ----------------------------------------------------------
 * Chrome / Safari
 * ----------------------------------------------------------
 */

.block-kategorienblock
.gs-range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;

    border: 0;

    background: transparent;
}


/*
 * Griff.
 */
.block-kategorienblock
.gs-range-input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;

    margin-top: -9px;

    border: 0;
    border-radius: 0;

    background-color: #b0dc7e;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: auto;

    cursor: grab;
}


/*
 * Ziehen.
 */
.block-kategorienblock
.gs-range-input::-webkit-slider-thumb:active {
    cursor: grabbing;
}


/*
 * ----------------------------------------------------------
 * Firefox
 * ----------------------------------------------------------
 */

.block-kategorienblock
.gs-range-input::-moz-range-track {
    width: 100%;
    height: 3px;

    border: 0;

    background: transparent;
}


/*
 * Firefox Griff.
 */
.block-kategorienblock
.gs-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;

    border: 0;
    border-radius: 0;

    background-color: #b0dc7e;

    pointer-events: auto;

    cursor: grab;
}


/*
 * Firefox-eigenen Fortschrittsbalken
 * deaktivieren.
 */
.block-kategorienblock
.gs-range-input::-moz-range-progress {
    background: transparent;
}


/*
 * ----------------------------------------------------------
 * Fokus
 * ----------------------------------------------------------
 */

.block-kategorienblock
.gs-range-input:focus-visible::-webkit-slider-thumb {
    outline:
        3px solid
        rgba(
            176,
            220,
            126,
            0.45
        );

    outline-offset: 2px;
}

.block-kategorienblock
.gs-range-input:focus-visible::-moz-range-thumb {
    outline:
        3px solid
        rgba(
            176,
            220,
            126,
            0.45
        );

    outline-offset: 2px;
}


/*
 * ----------------------------------------------------------
 * Normale Checkboxen
 * ----------------------------------------------------------
 */


/*
 * Einheitliches Layout der Checkbox-Zeilen.
 */
.block-kategorienblock
.gs-product-filter-form
.form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    min-height: 1.5rem;
    padding-left: 0;
}


/*
 * Checkbox.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;

    flex: 0 0 1.5rem;
    float: none;

    margin: 0;

    border: 2px solid #aaaaaa;
    border-radius: 0;

    background-color: #ffffff;

    cursor: pointer;

    box-shadow: none;

    transition:
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        opacity 0.15s ease-in-out;
}


/*
 * Checkbox Hover.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"]:not(:checked):not(:disabled):hover {
    border-color: #888888;

    background-color: #efefef;
}


/*
 * Ausgewählte Checkbox.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"]:checked {
    border-color: #b0dc7e;

    background-color: #b0dc7e;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8l3 3 7-7'/%3E%3C/svg%3E"
        );

    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}


/*
 * Ausgewählte Checkbox + Hover.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"]:checked:hover {
    border-color: #b0dc7e;

    background-color: #b0dc7e;
}


/*
 * Tastatur-Fokus.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"]:focus-visible {
    border-color: #b0dc7e;

    outline: 3px solid rgba(176, 220, 126, 0.45);
    outline-offset: 2px;

    box-shadow: none;
}


/*
 * Nicht verfügbare Checkbox.
 */
.block-kategorienblock
.gs-product-filter-form
input.form-check-input[type="checkbox"]:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


/*
 * Checkbox-Beschriftung.
 */
.block-kategorienblock
.gs-product-filter-form
.form-check-label {
    margin: 0;

    cursor: pointer;
}


/*
 * Beschriftung einer nicht verfügbaren Checkbox.
 */
.block-kategorienblock
.gs-product-filter-form
.form-check-input:disabled
+
.form-check-label {
    opacity: 0.5;

    cursor: not-allowed;
}


/*
 * ----------------------------------------------------------
 * Skeleton
 * ----------------------------------------------------------
 */

.block-kategorienblock
.gs-product-filter-skeleton
.placeholder {
    display: block;
}


/*
 * ----------------------------------------------------------
 * AJAX-Produktkarten
 * ----------------------------------------------------------
 */

.block-kategorienblock
.gs-product-filter-results
.item.all-products {
    background-color: #ffffff;
}

.block-kategorienblock
.gs-product-filter-results
.item-body {
    background-color: #ffffff;
}


/*
 * ----------------------------------------------------------
 * Produktkarten-Hover
 * ----------------------------------------------------------
 */

.block-kategorienblock
.product-hover
.card-img-top {
    transform: scale(1);
    transform-origin: center center;

    transition:
        transform 0.3s ease-in-out;
}

.block-kategorienblock
.product-hover:hover
.card-img-top,
.block-kategorienblock
.product-hover:focus-visible
.card-img-top {
    transform: scale(1.05);
}

.block-kategorienblock
.product-hover
.gs-product-link-icon {
    transform: translateX(0);

    transition:
        transform 0.25s ease-in-out;
}

.block-kategorienblock
.product-hover:hover
.gs-product-link-icon,
.block-kategorienblock
.product-hover:focus-visible
.gs-product-link-icon {
    transform: translateX(0.375rem);
}


@media (prefers-reduced-motion: reduce) {

    .block-kategorienblock
    .product-hover
    .card-img-top,
    .block-kategorienblock
    .product-hover
    .gs-product-link-icon {
        transition: none;
    }

}


/*
 * ----------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------
 */


/*
 * Medium devices
 */
@media (min-width: 768px) {

}


/*
 * Large devices
 */
@media (min-width: 992px) {

    .block-kategorienblock {
        padding: 2.5rem 0;
    }

}


/*
 * X-Large devices
 */
@media (min-width: 1200px) {

    .block-kategorienblock {
        padding:
            0
            3.75rem
            2.5rem
            3.75rem;
    }

}


/*
 * XXL devices
 */
@media (min-width: 1600px) {

    .block-kategorienblock {
        padding:
            0
            6.25rem
            3.125rem
            6.25rem;
    }

}