/* Basis-Styling für den Slider */
.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  background: linear-gradient(to right,
      #235753 0%,
      #235753 var(--slider-percentage, 0%),
      #ddd var(--slider-percentage, 0%),
      #ddd 100%);
  outline: none;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Styling des Daumens (Chrome, Safari, Edge) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, white 30%, #235753 31%);
  box-shadow: none;
  /* border: 1px solid #fff; */
  /* margin-top: -0.5px; */
}

/* Firefox Daumen */
.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, white 30%, #235753 35%);
  border: 2px solid #fff;
}

/* Firefox Track */
.slider::-moz-range-track {
  width: 100%;
  height: 40px;
  background: linear-gradient(to right,
      #235753 0%,
      #235753 var(--slider-percentage, 0%),
      #ddd var(--slider-percentage, 0%),
      #ddd 100%);
  border-radius: 20px;
}

/* IE/Edge Track-Anpassungen */
.slider::-ms-track {
  width: 100%;
  height: 40px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.slider::-ms-fill-lower {
  background: #235753;
  border-radius: 20px;
}

.slider::-ms-fill-upper {
  background: #ddd;
  border-radius: 20px;
}