/* Grundlayout: Label links, Feld rechts */
.form-row {
  display: flex;
  align-items: flex-start;  /* wichtig: Spaltenstart, damit Help unter dem Input beginnt */
  gap: 1rem;
  margin: 0 0 1rem;
}

/* Label-Spalte: feste Breite auf Desktop */
.form-row > label {
  flex: 0 0 200px;          /* passe an: 160–240px je nach Sprache/Textlänge */
  margin: 0.4rem 0 0;        /* optisch vertikal etwas mittig */
  white-space: normal;  /* rownumbruch erlauben */
}

/* Feld-Spalte: nimmt restliche Breite */
.form-row .field-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;    /* hierdurch steht Help IMMER unter dem Input */
}

/* Eingabeelemente füllen die Breite */
.form-row .field-col > input,
.form-row .field-col > select,
.form-row .field-col > textarea,
.form-row .field-col > input[type="datetime-local"] {
  width: 80%;
  background-color: var(--input);
  color: var(--text);
  padding: 4px 4px;
  font-size: var(--input-font-size);
  font-family: inherit;
  border: 1px solid var(--border);
  transition: 0.3s ease-in-out;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
}

.form-row .field-col > input[type="submit"] {
  width: fit-content;
  margin-left: 10px;
  margin-left: 10px;
}

.form-row .field-col > input[type="submit"]:hover {
  background-color: var(--submit-hover);
  color: white;
}

.filter_info .form-row {
  margin: 0;
  align-items: center;
}

.filter_info .form-row .field-col {
  display: flex;
  align-items: center;
}

.filter_info .form-row .field-col > input[type="submit"] {
  margin-left: 0;
  padding: 5px;
  font-size: small;
  line-height: 1.2;
}

.form-row .field-col > input:focus,
.form-row .field-col > select:focus,
.form-row .field-col > textarea:focus,
.form-row .field-col > input[type="datetime-local"]:focus {
  border: 1px solid var(--text);
}

/* Help-Text direkt unter dem Feld */
.form-row .help {
  display: block;
  color: var(--link);
  margin-top: .375rem;
  line-height: 1.3;
}

/* Fehler-Styles */
.form-row.has-error .field-col > input,
.form-row.has-error .field-col > select,
.form-row.has-error .field-col > textarea,
.form-row.has-error .field-col > input[type="datetime-local"] {
  border-color: #b00020;
}

.form-row .error {
  color: #b00020;
  margin-top: .25rem;
}

.non-field-errors {
  color: #b00020;
  margin-bottom: 1rem;
  font-weight: bold;
}


/* Responsive: auf kleineren Screens Label über Feld */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: .5rem;
  }
  .form-row > label {
    flex: none;
    margin: 0;
  }
  .form-row .field-col {
    width: 100%;
    min-width: none;
    font-size: var(--input-font-size);
  }
}

/* Checkboxen/Radio: eigene row, Help/Error darunter */
.form-row--check {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin: 0 0 1rem;
}
/* Wrapper: Label links, Checkbox-Block rechts */
.form-row--check .check-wrapper {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Für CheckboxSelectMultiple: einzelne Choice-Labels so anordnen, dass das Input rechts vom Text steht */
.form-row--check .check-wrapper ul li label,
.form-row--check .check-wrapper .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Help-Text bleibt wie gehabt */
.form-row--check .help {
  color: var(--link);
}