.yearbuilt-range {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 Spalten gleich breit */
  gap: 0.25rem 1rem; 
   text-align: center;              /* vertikaler und horizontaler Abstand */
}

.yearbuilt-range label {
  grid-row: 1;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 2px;
  text-align: center;
}

.yearbuilt-range input {
  grid-row: 2;                    /* Inputs in zweite Zeile */
  width: 100%;
}


/* Baujahr-Inputs */
.yearbuilt-min,
.yearbuilt-max {
    text-align: center;
  background-color: var(--bg-light);
  color: var(--text-light);
   height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
}


body.dark-mode .yearbuilt-min,
body.dark-mode .yearbuilt-max {
    text-align: center;
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

/* Fokus-Lila-Box-Shadow nur, wenn KEIN Fehler bei Baujahr */
.yearbuilt-min:focus:not(.invalid-input),
.yearbuilt-max:focus:not(.invalid-input) {
  border: 1px solid #6200ea; /* Lila Ton */
  box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
  outline: none;
}

body.dark-mode .yearbuilt-min:focus:not(.invalid-input),
body.dark-mode .yearbuilt-max:focus:not(.invalid-input) {
  border: 1px solid #6200ea; /* Lila Ton */
  box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
  outline: none;
}

/* Fehler-Rot überschreibt Fokus bei Baujahr */
.yearbuilt-min.invalid-input,
.yearbuilt-max.invalid-input {
  border: 1px solid red;
  background-color: #ffeaea;
  outline: none;
  box-shadow: 0 0 5px #e74c3c !important; /* wichtig, um Fokus zu überschreiben */
  color: inherit;
}

body.dark-mode .yearbuilt-min.invalid-input,
body.dark-mode .yearbuilt-max.invalid-input {
  border: 1px solid #ff6b6b;
  background-color: #3b0a0a;
  color: var(--text-dark);
  box-shadow: 0 0 5px #ff6b6b !important;
}

.yearbuilt-range input[type=number]::-webkit-outer-spin-button,
.yearbuilt-range input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;  /* Chrome, Safari, Edge */
  margin: 0;
}

.yearbuilt-range input[type=number] {
    appearance: textfield;
  -moz-appearance: textfield; /* Firefox */
}

/* Placeholder-Farbe für Baujahr (min & max) im Dark Mode */
body.dark-mode .yearbuilt-min::placeholder,
body.dark-mode .yearbuilt-max::placeholder {
    color: #9CA3AF;
}