.vbm-range-wrap {
  grid-column: span 2;
  padding: 10px 14px;
  border-radius: 12px;
  background: #eef2ff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.06);
}
.vbm-range-label {
  font-weight:600;
  font-size:.85rem;
  margin-bottom:4px;
}
.vbm-range {
  position:relative;
  height:40px;
}

/* Basislinie (grau, kompletter Bereich) */
.vbm-range::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#e5e7eb,#d1d5db);
  border-radius:999px;
  transform:translateY(-50%);
  z-index:0; /* ganz hinten */
}
.vbm-range input[type=range] {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  pointer-events:none; /* beide überlagern sich */
  appearance:none; /* Standard property for compatibility */
  -webkit-appearance:none;
  background:transparent;
  margin:0;
  z-index:2; /* Thumbs liegen über der Linie */
}

/* Track (Grundlinie) */
.vbm-range input[type=range]::-webkit-slider-runnable-track {
  height:4px;
  background:transparent; /* Track unsichtbar, nur Progress sichtbar */
  border-radius:999px;
}
.vbm-range input[type=range]::-moz-range-track {
  height:4px;
  background:transparent; /* Track unsichtbar, nur Progress sichtbar */
  border-radius:999px;
}

/* Thumb (Knopf) */
.vbm-range input[type=range]::-webkit-slider-thumb {
  pointer-events:auto;
  -webkit-appearance:none;
  height:18px;
  width:18px;
  border-radius:50%;
  background:#ffffff;
  cursor:pointer;
  border:2px solid #2563eb;
  box-shadow:0 0 0 0 rgba(37,99,235,0.35);
  margin-top:11px; /* feinjustiert, damit genau auf der Linie */
  transition:
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out,
    border-color 0.15s ease-out,
    background-color 0.15s ease-out;
}
.vbm-range input[type=range]::-moz-range-thumb {
  height:18px;
  width:18px;
  border-radius:50%;
  background:#ffffff;
  cursor:pointer;
  border:2px solid #2563eb;
  box-shadow:0 0 0 0 rgba(37,99,235,0.35);
  margin-top:0; /* Firefox kümmert sich intern, hier meist nicht nötig */
  transition:
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out,
    border-color 0.15s ease-out,
    background-color 0.15s ease-out;
}

.vbm-range input[type=range]:hover::-webkit-slider-thumb,
.vbm-range input[type=range]:active::-webkit-slider-thumb {
  box-shadow:0 0 0 6px rgba(37,99,235,0.15);
  transform:scale(1.04);
  background:#eff6ff;
}
.vbm-range input[type=range]:hover::-moz-range-thumb,
.vbm-range input[type=range]:active::-moz-range-thumb {
  box-shadow:0 0 0 6px rgba(37,99,235,0.15);
  transform:scale(1.04);
  background:#eff6ff;
}

.vbm-range:focus-within::before {
  box-shadow:0 0 0 1px rgba(37,99,235,0.35);
}

/* Progress-Balken (blau, aktiver Bereich) */
.vbm-range-progress {
  position:absolute;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#4f46e5);
  top:50%;
  transform:translateY(-50%);
  border-radius:999px;
  z-index:1; /* über Grau, unter Thumbs */
}

/* Textausgabe */
.vbm-range-output {
  font-size:.85rem;
  color:#1d4ed8;
  margin-top:6px;
  font-weight:500;
}
#vbm-filter-form {
  display:grid;
  grid-template-columns: 1fr 1fr; /* genau 2 Spalten */
  gap:16px 20px;
  background:#f9fafb;
  padding:20px;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  margin-bottom:24px;
}
.vbm-field label {
  font-weight:600;
  font-size:.9rem;
  display:block;
  margin-bottom:6px;
}
.vbm-input, 
#vbm-filter-form select, 
#vbm-filter-form input[type=number] {
  border:1px solid #ddd;
  border-radius:999px; /* pillenform */
  padding:8px 14px;
  font-size:.95rem;
  width:100%;
}
.vbm-checkbox-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap:6px 12px;
}
.vbm-check {
  font-size:.9rem;
  color:#333;
}
.vbm-field-full {
  grid-column:1/-1;
}

/* Fläche- & Miet-Slider über volle Breite */
#area-slider,
#rent-slider {
  grid-column:1/-1;
}
.vbm-section-special {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #eee;
}
.vbm-results-headline {
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 12px;
}