/* Anmeldeformular auf Kursseiten (Plugin „Kursverwaltung“): einheitliches Raster und Abstände */
.entry-content .course-registration {
  padding: 1.5rem;
  border: 2px solid #CFD8DC;
  border-radius: 15px;
}

.entry-content .course-registration form.courseform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: stretch;
}

/* Feldgruppen lösen sich im Raster auf, damit alle Felder gleich breit sind */
.entry-content .course-registration form.courseform > .form-flex {
  display: contents;
}

/* Alles außer einzelnen Feldern läuft über die volle Breite */
.entry-content .course-registration form.courseform > * {
  grid-column: 1 / -1;
  margin: 0;
}

.entry-content .course-registration form.courseform > label,
.entry-content .course-registration form.courseform > .form-flex > label {
  grid-column: auto;
  flex: none;
  width: auto;
  margin: 0;
  padding: .75rem;
  /* Felder einer Zeile gleich hoch, das Eingabefeld sitzt unten – auch bei zweizeiliger Beschriftung */
  display: flex;
  flex-direction: column;
}

.entry-content .course-registration form.courseform > label > input:not([type=checkbox]):not([type=radio]),
.entry-content .course-registration form.courseform > .form-flex > label > input:not([type=checkbox]):not([type=radio]) {
  margin-top: auto;
}

.entry-content .course-registration form.courseform label:has(> input[type=checkbox]),
.entry-content .course-registration form.courseform label:has(> input[type=radio]) {
  flex-direction: row;
}

.entry-content .course-registration form.courseform h3 {
  margin: 1.25rem 0 0;
}

.entry-content .course-registration form.courseform > h3:first-of-type {
  margin-top: 0;
}

/* Eingabefelder: gleiche Höhe, volle Breite */
.entry-content .course-registration form.courseform label input:not([type=checkbox]):not([type=radio]),
.entry-content .course-registration form.courseform label select,
.entry-content .course-registration form.courseform label textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.6rem;
  margin: .35rem 0 0;
  padding: .4rem .6rem;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  line-height: 1.3;
}

.entry-content .course-registration form.courseform label input:not([type=checkbox]):not([type=radio]):focus,
.entry-content .course-registration form.courseform label select:focus,
.entry-content .course-registration form.courseform label textarea:focus {
  outline: 0;
  border-color: #d62032;
}

.entry-content .course-registration form.courseform label textarea {
  min-height: 6rem;
}

/* Breite Felder und Checkboxen über die ganze Zeile */
.entry-content .course-registration form.courseform label.label-wide,
.entry-content .course-registration form.courseform label:has(textarea),
.entry-content .course-registration form.courseform label:has(input[type=checkbox]),
.entry-content .course-registration form.courseform label:has(input[type=radio]) {
  grid-column: 1 / -1;
}

.entry-content .course-registration form.courseform label:has(> input[type=checkbox]),
.entry-content .course-registration form.courseform label:has(> input[type=radio]) {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  line-height: 1.4;
}

.entry-content .course-registration form.courseform input[type=checkbox],
.entry-content .course-registration form.courseform input[type=radio] {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  margin: .1rem 0 0;
  accent-color: #d62032;
}

.entry-content .course-registration form.courseform input[type=submit] {
  margin: .5rem 0 0;
}

@media (max-width: 700px) {
  .entry-content .course-registration {
    padding: 1rem;
  }

  .entry-content .course-registration form.courseform {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fehlerhafte Felder bleiben rot markiert */
.entry-content .course-registration form.courseform .fail input:not([type=checkbox]):not([type=radio]),
.entry-content .course-registration form.courseform .fail select,
.entry-content .course-registration form.courseform .fail textarea {
  border-color: red;
}
