.vehica-range-slider {
  /* .vehica-results__fields ist ein Flex-Container; ohne explizite Breite
     wuerde dieser Slider (als zusaetzliches Flex-Item neben den Von/Bis-
     Feldern) nur so breit wie sein Inhalt werden. flex-basis: 100% zwingt
     ihn in eine eigene volle Zeile; max-width (per JS gesetzt, siehe
     filter-range-slider.js) begrenzt ihn danach auf die Breite eines
     einzelnen Feldes, statt die komplette Zeile zu fuellen.
     align-self: flex-start verhindert, dass ein evtl. "stretch"-Alignment
     des umgebenden Flex-Containers dieses Element unnoetig in der Hoehe
     zieht und dadurch das danach folgende Feld verschiebt. */
  flex: 0 0 100%;
  align-self: flex-start;
  box-sizing: border-box;
  padding: 18px 6px 4px;
}
.vehica-range-slider__title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: inherit;
}
.vehica-range-slider__label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: inherit;
}
.vehica-range-slider__track {
  position: relative;
  height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  margin: 0 8px;
}
.vehica-range-slider__range {
  position: absolute;
  top: 0;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
}
.vehica-range-slider__handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  transform: translateY(-50%);
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.vehica-range-slider__handle:hover,
.vehica-range-slider__handle.is-active {
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.08);
}
.vehica-range-slider__handle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Wird nur gesetzt, wenn 'hideInputs' => true konfiguriert ist - auf das
   originale Feld (Text-Modus: .vehica-number-range; Select-Modus: den
   AEUSSEREN, von PHP statisch gerenderten Feld-Wrapper .vehica-results__field,
   siehe filter-range-slider.js). display:none entfernt es komplett aus
   Layout und Sichtbarkeit - inklusive Restbestandteilen wie vue-selects
   eigenem "X"-Icon zum Loeschen der Auswahl, das bei einer reinen
   Sichtbarkeits-Klasse (z.B. per clip versteckt) sonst sichtbar bleiben
   wuerde, sobald ein Wert gesetzt ist.
   Das ist unproblematisch, weil Werte nicht mehr per simuliertem Klick auf
   ein (dann unsichtbares) Dropdown gesetzt werden, sondern per direktem
   Aufruf der zugehoerigen Vue-Methode (siehe buildSelectSlider) bzw. per
   echtem "input"-Event auf dem nativen Feld (siehe buildTextSlider) - beides
   funktioniert unabhaengig von display:none. */
.vehica-range-slider-hidden-inputs {
  display: none !important;
}