/* Container für Slider + Skala */
.slider-wrap{
  max-width: 900px;
  width: 80%;
}

/* Labels unten 0..3 */
.slider-labels{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
  color: #6c757d;
}

/* Track etwas höher */
.teamx-range{
  height: 10px;
}

/* ====== WebKit (Chrome, Safari, Edge) ====== */
.teamx-range::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
}

.teamx-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d6efd;      /* Bootstrap primary */
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  margin-top: -9px;         /* Thumb mittig auf Track */
  cursor: pointer;
}

/* ====== Firefox ====== */
.teamx-range::-moz-range-track{
  height: 10px;
  border-radius: 999px;
}

.teamx-range::-moz-range-thumb{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d6efd;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
}

/* Tickmarks (datalist) sichtbar machen: Browser unterstützen das unterschiedlich.
   Falls sie nicht sichtbar sind, nehmen wir unten optional eigene Striche (siehe Bonus). */