/* === WP FILTERS === */

.cta-1 label+input,
input.wpc-label-input+label,
.cta-1 input.wpc-label-input+label:hover span.wpc-filter-label-wrapper {
    border-radius: var(--radius-small) !important;
    border: 1px solid var(--brand-color-main) !important;
    background-color: #ffffff00 !important;
}

.cta-1 input.wpc-label-input:checked+label span.wpc-filter-label-wrapper {
    background-color: var(--brand-color-main) !important;
}

.wpc-filter-chips-list a {
    border: none !important;
    padding: 6px 15px 6px 15px !important;
    background-color: var(--brand-color-main) !important;
    border-radius: var(--radius-small) !important;
}

/* === INPUTS === */

::placeholder {
    font-size: var(--font-size__small) !important;
}

/* == SELECT == */
.button-general.cta-1, .cta-1 input[type=text], .cta-1 input[type=number], .cta-1 select {
    -webkit-appearance: none !important;
    border-radius: var(--radius-small) !important;
    border: 1px solid var(--brand-color-main) !important;
    background-color: #ffffff00 !important;
    padding: 6px 15px 6px 15px;
    color: var(--main-light) !important;
    font-weight: 400 !important;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: none !important;
}

select {
    border: 1px solid var(--brand-color-main) !important;
}

/* == RANGE == */

input[type=range], .ui-slider-range {
    -webkit-appearance: none !important;
    margin: 0;
    width: 100%;
    padding: 0;
    background-color: var(--main-light) !important;
    /*border: 1px solid #525251;*/
    /*height: 2px;*/
}
    
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
  	height: 2px;
  	cursor: pointer;
  	background: var(--main-light);
  	border-radius: 10px;
  	border: 1px solid var(--main-light);
}
    
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px; /* Hier die Höhe setzen */
    background: var(--main-light);
    border-radius: 5px;
    cursor: pointer;
    }
    
input[type="range"]::-ms-track {
    width: 100%;
    height: 2px; /* Funktioniert nicht direkt, muss mit Pseudo-Elementen kombiniert werden */
    background: transparent;
    border-color: transparent;
    color: transparent;
    }

input[type="range"]::-webkit-slider-thumb, .ui-slider-handle {
    /* Stile für Chrome, Safari und Brave */
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 150px !important;
    border: 1px solid var(--main-light) !important;
    background: var(--brand-color-main) !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    margin-top: -10px;
}

.ui-slider-handle {
    margin-top: 0px !important;
}

input[type=range]:focus {
    outline: none;
}

/*== TEXT ==*/

input[type="text"],
input[type="textarea"],
textarea,
input[type="email"],
input[type="password"] {
    background-color: #ffffff33 !important;
    border-radius: var(--radius-small) !important;
    border-color: var(--brand-color-main) !important;
}

/*== BUTTONS ==*/

.button-general {
    display: flex;
    flex-direction: row;
    gap: var(--grid__x-small);
}

.cta2 {
    background-color: var(--brand-color-main) !important;
    color: var(--main-light) !important;
    font-weight: var(--font-weight__bold) !important;
    border-radius: var(--radius-small) !important;
    padding: calc(var(--grid__x-small) / 2) var(--grid__x-small) calc(var(--grid__x-small) / 2) var(--grid__x-small) !important;
}

.cta2 * {
    color: var(--main-light) !important;
    font-weight: var(--font-weight__bold) !important;
}

.breakdance-form button {
    background: var(--brand-color-main) !important;
}