/* =========================================================
   Kontaktformular (Contact Form 7)
   Das Formular-Markup stammt aus dem CF7-Formular (setup.sh):
   .form__row > p.field > label + .wpcf7-form-control-wrap > input.
   Die Stile von CF7 selbst sind abgeschaltet (inc/formular.php);
   was davon nötig ist, steht hier.
   ========================================================= */

/* Das Formular ist eine helle Karte auf der orangen Fläche; die Adresse
   daneben beginnt auf derselben Höhe wie der erste Feldtitel. */
.contact__body > .wpcf7 {
  flex: 0 0 auto; width: 50vw;
  padding: clamp(24px, 3.4vw, 48px);
  background: #FFAA80;
}
.wpcf7-form { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 32px); }

/* Versteckte Felder und die Meldung für Screenreader von CF7 */
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 32px); }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.field label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: rgba(16, 21, 27, .95);
}
.wpcf7-form-control-wrap { display: block; }

.field input,
.field textarea {
  width: 100%; margin: 0; border-radius: 0;
  background: transparent; border: none; border-bottom: 1px solid rgba(16, 21, 27, .38);
  color: var(--text-dark); font-family: inherit; font-size: 16px; padding: 10px 0 12px;
  transition: border-color .2s ease;
}
.field textarea { display: block; resize: vertical; line-height: 1.6; }
/* Platzhalter bewusst bleicher als der eingegebene Text; tiefer als .68
   fällt der Kontrast auf dem hellen Orange unter 4.5:1. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(16, 21, 27, .68); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink-900); }
.field .wpcf7-not-valid { border-bottom-color: var(--error-ink); }

/* Fehlermeldung unter einem Feld */
.wpcf7-not-valid-tip {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--error-ink);
}

.form__foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.form__hint { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: rgba(16, 21, 27, .88); }

/* Absendeknopf: auf Orange wird aus dem orangen Knopf ein dunkler */
.contact .btn.btn--action { background: var(--ink-900); color: #FFF; }
.wpcf7-form.submitting .btn--action { cursor: progress; opacity: .8; }

/* Spinner von CF7: unter dem Knopf, nur während des Sendens sichtbar */
.wpcf7-spinner {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(16, 21, 27, .25); border-top-color: var(--ink-900);
  visibility: hidden;
  animation: milchbuck-drehen .8s linear infinite;
}
.wpcf7-form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes milchbuck-drehen { to { transform: rotate(360deg); } }

/* Antwortbox nach dem Absenden. Vorher hält sie als leere Zeile den Platz
   unter dem Knopf frei, wie die Statuszeile der statischen Vorlage. */
.wpcf7-response-output {
  margin: 0; padding: 14px 16px; min-height: 1.4em;
  border-left: 3px solid var(--ink-900); background: rgba(255, 255, 255, .28);
  font-size: 14.5px; line-height: 1.5; color: rgba(16, 21, 27, .92);
}
.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output {
  visibility: hidden; padding: 0; border: 0; line-height: 1.4;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-left-color: var(--error-ink); }

@media (max-width: 1024px) {
  .contact__body > .wpcf7 { width: 100%; }
}

@media (max-width: 760px) {
  .form__row { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column-reverse; align-items: stretch; }
  .form__foot .btn { width: 100%; }
  .wpcf7-spinner { top: auto; bottom: -30px; }
}