/* ==========================================================================
   Mehrseitiges Formular (formular.php, formular/src/Renderer.php)
   Baut auf Foundation 5 auf (Eingabefelder, .button, .alert-box, .error).
   Farben aus custom.css: Rot #dd0000 / #bb0000 (Navigation), Blau #003350
   (Footer).
   ========================================================================== */

.cmp-formular {
  max-width: 680px;
  margin: 0 auto 40px;
}

.cmp-formular h2 {
  margin-bottom: 20px;
}

.formular-step-intro {
  text-align: center;
  margin-bottom: 30px;
}

/* --- Fortschritt ---------------------------------------------------------- */

.formular-progress {
  margin-bottom: 30px;
}

.formular-progress-list {
  display: flex;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.formular-progress-item {
  flex: 1 1 0;
  text-align: center;
  font-size: 14px;
  color: #999;
  border-bottom: 4px solid #ddd;
  padding-bottom: 8px;
}

.formular-progress-item a {
  color: inherit;
  display: block;
}

.formular-progress-num {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #ddd;
  color: #fff;
  font-weight: bold;
  margin-right: 6px;
}

.formular-progress-item--done {
  color: #003350;
  border-bottom-color: #003350;
}

.formular-progress-item--done .formular-progress-num {
  background: #003350;
}

.formular-progress-item--current {
  color: #dd0000;
  border-bottom-color: #dd0000;
  font-weight: bold;
}

.formular-progress-item--current .formular-progress-num {
  background: #dd0000;
}

.formular-progress-text {
  font-size: 13px;
  color: #999;
  text-align: right;
}

/* Auf dem Handy nur die Nummern, der Text steht in der Schritt-Überschrift */
@media only screen and (max-width: 40em) {
  .formular-progress-label {
    display: none;
  }
}

/* --- Felder ---------------------------------------------------------------- */

.formular-fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.formular-field {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  margin-bottom: 10px;
}

.formular-field[hidden] {
  display: none;
}

@media only screen and (min-width: 40.063em) {
  .formular-width-1-2 { flex-basis: 50%;     max-width: 50%; }
  .formular-width-1-3 { flex-basis: 33.333%; max-width: 33.333%; }
  .formular-width-2-3 { flex-basis: 66.666%; max-width: 66.666%; }
  .formular-width-1-4 { flex-basis: 25%;     max-width: 25%; }
  .formular-width-3-4 { flex-basis: 75%;     max-width: 75%; }
}

.formular-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.formular-required {
  color: #dd0000;
}

.formular-help {
  font-size: 13px;
  color: #777;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Radio- und Checkbox-Listen: Eingabefeld im Label */
.formular-options > div {
  margin-bottom: 4px;
}

.formular-option {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  cursor: pointer;
}

.formular-option input[type="radio"],
.formular-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 5px 12px 0 0;
}

.formular-options--cols-2 {
  display: grid;
  grid-template-columns: 1fr;
}

@media only screen and (min-width: 40.063em) {
  .formular-options--cols-2 { grid-template-columns: 1fr 1fr; }
  .formular-options--cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
}

/* Fehler: Foundation färbt über .error Label und Feld, hier nur die
   Options-Listen und das Einwilligungs-Häkchen */
.formular-field--error .formular-option {
  color: #f04124;
}

.formular-field--error small.error {
  margin-top: 4px;
}

.formular-alert p {
  margin: 0;
  color: #fff;
}

/* Honigtopf: für Menschen unsichtbar. Bewusst per Klasse und nicht per
   style="display:none" im Markup - siehe Renderer::honeypot(). */
.formular-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Hinweiskasten in einer Schritt-Einleitung ----------------------------- */

.formular-step-intro .formular-hinweis {
  text-align: left;
  background: #f4f6f8;
  border-left: 4px solid #003350;
  padding: 14px 18px 4px;
  margin-top: 20px;
  font-size: 15px;
}

.formular-hinweis p {
  margin-bottom: 6px;
}

.formular-hinweis ul {
  margin-left: 20px;
}

/* --- Repeater (Gruppen) ----------------------------------------------------- */

.formular-repeater-row {
  border: 1px solid #ccc;
  border-top: 4px solid #003350;
  padding: 12px 16px 6px;
  margin: 0 0 20px;
  background: #fff;
}

.formular-repeater-legend {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #003350;
  padding: 0 6px;
  margin-left: -6px;
  background: transparent;
}

.formular-repeater-row .formular-fields {
  margin-top: 6px;
}

.formular-repeater-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-bottom: 4px;
}

.formular-repeater-actions .button {
  margin: 0;
}

.formular-repeater-actions .button[disabled] {
  opacity: .35;
}

.formular-repeater-add {
  font-family: 'Nunito', sans-serif;
  margin-bottom: 0;
}

/* Kurz hervorheben, wohin eine Zeile nach einer Zeilen-Aktion ohne JS
   gesprungen ist. */
.formular-repeater-row:target {
  border-top-color: #dd0000;
}

/* Unsichtbarer Standardknopf: Enter in einem Textfeld = "Weiter", siehe
   Renderer::step(). Nicht display:none - manche Browser übergehen solche
   Knöpfe bei der impliziten Übermittlung. */
.formular-default-action {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Navigation ------------------------------------------------------------ */

.formular-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.formular-nav .button {
  font-family: 'Nunito', sans-serif;
  margin-bottom: 0;
}

/* "Weiter" / "Absenden" immer rechts, auch ohne "Zurück" */
.formular-next,
.formular-submit {
  margin-left: auto;
  background-color: #dd0000;
  border-color: #bb0000;
}

.formular-next:hover,
.formular-next:focus,
.formular-submit:hover,
.formular-submit:focus {
  background-color: #bb0000;
}

/* --- Zusammenfassung ------------------------------------------------------- */

.formular-review {
  margin-bottom: 30px;
}

.formular-review-title {
  font-size: 20px;
  border-bottom: 2px solid #003350;
  padding-bottom: 6px;
  margin-bottom: 0;
}

.formular-review-edit {
  float: right;
  font-size: 14px;
  font-weight: normal;
  margin-top: 6px;
}

.formular-review-table {
  width: 100%;
  border: 0;
  margin-bottom: 20px;
}

.formular-review-table th {
  width: 40%;
  text-align: left;
  font-weight: normal;
  color: #777;
  vertical-align: top;
}

.formular-review-subhead th {
  color: #003350;
  font-weight: bold;
  padding-top: 14px;
  border-bottom: 1px solid #ddd;
}

.formular-review-empty {
  color: #999;
  font-style: italic;
}

/* --- Danke / Hinweise ------------------------------------------------------ */

.formular-done-text {
  text-align: center;
  font-size: 18px;
}

.formular-notice h3,
.formular-notice p,
.formular-notice a {
  color: #fff;
}