/*
 * Formulare (EXT:form, TYPO3 14) mit den Bootstrap-4-Themes von T3Mall. Für alle Sites geladen.
 * EXT:form gibt Markup für Bootstrap 5 aus; die Themes basieren auf Bootstrap 4.
 */

/* Checkbox: Bootstrap 4 setzt .form-check-input absolut mit negativem Rand und erwartet einen .form-check-
   Container. EXT:form liefert .form-check-wrapping-label, die Checkbox rutschte dadurch an den Rand. */
.form-check-wrapping-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  max-width: 100%;
}
.form-check-wrapping-label .form-check-input {
  position: static;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0 0;
}
.form-check-wrapping-label .form-check-label {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}

/* Datumsfeld: iOS Safari gibt <input type="date"> eine eigene Mindestbreite, die width: 100% ignoriert
   (Feld lief rechts aus dem Bild). */
input[type="date"].form-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@supports (-webkit-touch-callout: none) {
  /* nur iOS: native Darstellung abschalten, sonst greift die Breite nicht */
  input[type="date"].form-control {
    -webkit-appearance: none;
    appearance: none;
    min-height: calc(1.25em + 1rem + 2px);
  }
  input[type="date"].form-control::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* Allgemein: Formularfelder nie breiter als ihre Spalte */
.form-element .form-control,
.form-element select {
  max-width: 100%;
}