/*
 * WohnWeitblick – kompakte Abstände im Objektformular V169
 *
 * Der Hinweisbereich bleibt reserviert, damit die Felder
 * horizontal bündig bleiben. Unnötiger Leerraum wird reduziert.
 */

.step[data-step="3"] > .grid {
  align-items: start !important;
  row-gap: 10px !important;
  column-gap: 16px !important;
}

.step[data-step="3"] > .grid > label.f {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Aktuell verwendeter Hinweiscontainer.
 */

.step[data-step="3"] .field-hints-v164 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;

  width: 100% !important;
  min-height: 24px !important;
  height: auto !important;

  box-sizing: border-box !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
}

/*
 * Absicherung für noch vorhandene ältere Container.
 */

.step[data-step="3"] .field-hints-v154,
.step[data-step="3"] .field-hints-v148 {
  min-height: 24px !important;
  height: auto !important;
  margin: 5px 0 0 !important;
  gap: 2px !important;
}

/*
 * Pflicht-Badges und Meldungen bleiben kompakt.
 */

.step[data-step="3"] .required-v164,
.step[data-step="3"] .required-v138 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.step[data-step="3"] .field-message-v164,
.step[data-step="3"] .field-message-v163,
.step[data-step="3"] .field-message-v144 {
  margin: 0 !important;
  line-height: 1.35 !important;
}

/*
 * Ausgeblendete Elemente dürfen keinen Platz reservieren.
 */

.step[data-step="3"] .required-v164[hidden],
.step[data-step="3"] .required-v138[hidden],
.step[data-step="3"] .field-message-v164[hidden],
.step[data-step="3"] .field-message-v163[hidden],
.step[data-step="3"] .field-message-v144[hidden] {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Eingabefelder einer Zeile bleiben oben bündig.
 */

.step[data-step="3"] > .grid > label.f > input,
.step[data-step="3"] > .grid > label.f > select {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}

@media (max-width: 680px) {
  .step[data-step="3"] > .grid {
    row-gap: 8px !important;
    column-gap: 12px !important;
  }

  .step[data-step="3"] .field-hints-v164,
  .step[data-step="3"] .field-hints-v154,
  .step[data-step="3"] .field-hints-v148 {
    min-height: 22px !important;
    margin-top: 4px !important;
  }
}