.elementor-1368 .elementor-element.elementor-element-16fc1f27{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1368 .elementor-element.elementor-element-16fc1f27{--width:25%;}}/* Start custom CSS for container, class: .elementor-element-16fc1f27 *//* Haupt-Container des Filters */
.wpfMainWrapper {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Dezenter Schatten */
}

/* Titel/Blöcke Abstand */
.wpfFilterWrapper {
    margin-bottom: 25px !important;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

/* Preis-Slider Styling */
.wpfPriceFilterRange.ui-slider {
    height: 5px;
    background: #eee;
    border: none;
    margin: 20px 10px;
}

.wpfPriceFilterRange .ui-slider-range {
    background: #c36; /* Geändert auf deine Markenfarbe */
}

.wpfPriceFilterRange .ui-slider-handle {
    border: 2px solid #c36 !important;
    background: #fff !important;
    border-radius: 50%;
    width: 16px !important;
    height: 16px !important;
    top: -6px !important;
    cursor: pointer;
    transition: transform 0.2s;
}

.wpfPriceFilterRange .ui-slider-handle:hover {
    transform: scale(1.2);
    background: #c36 !important;
}

/* Dropdown / Select Felder */
#wpfSortProducts {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
    background-color: #f9f9f9;
}

/* Kategorien Liste & Checkboxen */
.wpfFilterVerScroll {
    max-height: 250px !important;
    padding-left: 5px;
}

.wpfLiLabel {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover-Effekt für Kategorien-Text */
.wpfLiLabel:hover {
    color: #c36;
    padding-left: 5px; /* Kleiner Slide-Effekt */
}

/* Checkbox Hover Styling */
.wpfCheckbox input[type="checkbox"]:hover + label {
    border-color: #c36 !important;
}

/* Der Filter Button unten */
.wpfFilterButton {
    width: 100%;
    background-color: #c36 !important; /* Deine Farbe #cc3366 */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastischer Effekt */
}

/* PROFESSIONELLER HOVER FÜR DEN BUTTON */
.wpfFilterButton:hover {
    background-color: #a32952 !important; /* Ein dunkleres Pink/Rot beim Hover */
    box-shadow: 0 6px 15px rgba(204, 51, 102, 0.3); /* Farblich passender Schatten */
    transform: translateY(-2px); /* Button hebt sich leicht ab */
}

.wpfFilterButton:active {
    transform: translateY(0); /* Klick-Effekt */
}/* End custom CSS */