.max_personen_anzahl input[type="range"] {
    -webkit-appearance: none; /* Entfernt das Standard-Design in WebKit-basierten Browsern */
    appearance: none; /* Entfernt das Standard-Design in allen Browsern */
    width: 100%; /* Slider-Breite auf 100% des Containers setzen */
    height: 5px; /* Höhe des Sliders */
    background: #f4f4f4; /* Hintergrundfarbe des Sliders */
    border-radius: 5px; /* Runde Ecken */
    outline: none; /* Entfernt die Standardumrandung */
    opacity: 1; /* Transparenz */
    transition: opacity .2s; /* Übergangseffekt */
}

/* Fokus Zustand */
.max_personen_anzahl input[type="range"]:focus {
    opacity: 1; /* Erhöht die Deckkraft bei Fokus */
}

/* WebKit (Chrome, Safari) */
.max_personen_anzahl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Entfernt das Standard-Design in WebKit-basierten Browsern */
    width: 18px; /* Breite des Slider-Knopfes */
    height: 18px; /* Höhe des Slider-Knopfes */
    background: #3f7da3; /* Farbe des Slider-Knopfes */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    border-radius: 50%; /* Runde Form */
    border: none; /* Entfernt den Rand */
    top:50%;
    position: relative;
    transform: translateY(-50%);
}

.max_personen_anzahl input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; /* Breite des Tracks */
    height: 5px; /* Höhe des Tracks */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    background: #f4f4f4; /* Hintergrundfarbe des Tracks */
    border-radius: 5px; /* Runde Ecken */
}

/* Mozilla (Firefox) */
.max_personen_anzahl input[type="range"]::-moz-range-thumb {
    width: 18px; /* Breite des Slider-Knopfes */
    height: 18px; /* Höhe des Slider-Knopfes */
    background: #3f7da3; /* Farbe des Slider-Knopfes */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    border-radius: 50%; /* Runde Form */
    border: none; /* Entfernt den Rand */
}

.max_personen_anzahl input[type="range"]::-moz-range-track {
    width: 100%; /* Breite des Tracks */
    height: 5px; /* Höhe des Tracks */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    background: #f4f4f4; /* Hintergrundfarbe des Tracks */
    border-radius: 5px; /* Runde Ecken */
}

/* Internet Explorer und Edge */
.max_personen_anzahl input[type="range"]::-ms-thumb {
    width: 18px; /* Breite des Slider-Knopfes */
    height: 18px; /* Höhe des Slider-Knopfes */
    background: #3f7da3; /* Farbe des Slider-Knopfes */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    border-radius: 50%; /* Runde Form */
    border: none; /* Entfernt den Rand */
}

.max_personen_anzahl input[type="range"]::-ms-track {
    width: 100%; /* Breite des Tracks */
    height: 5px; /* Höhe des Tracks */
    cursor: pointer; /* Cursor ändert sich in eine Hand beim Überfahren */
    background: transparent; /* Hintergrund des Tracks in IE */
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

.max_personen_anzahl input[type="range"]::-ms-fill-lower {
    background: #f4f4f4; /* Hintergrundfarbe des unteren Teils in IE */
    border-radius: 10px;
}

.max_personen_anzahl input[type="range"]::-ms-fill-upper {
    background: #f4f4f4; /* Hintergrundfarbe des oberen Teils in IE */
    border-radius: 10px;
}

.max_personen_anzahl input[type="range"]:focus::-webkit-slider-runnable-track,
.max_personen_anzahl input[type="range"]:focus::-ms-fill-lower,
.max_personen_anzahl input[type="range"]:focus::-ms-fill-upper {
    background: #ccc; /* Hintergrundfarbe bei Fokus */
}