/* Aingel Variante 13 – Kontaktformular (Startseite, Abschnitt „Kontakt“, vor den Fragen; dieselben .formular-Klassen
   auch im Formular der Seite /kontakt/)
   Owner 13.10. abends: „Der CTA soll ein Kontaktformular sein und über dem FAQ sein.“ Überarbeitung 14.10. (Owner:
   „Mache zudem auch nur die Kontaktmöglichkeit per Formular“): WhatsApp/Telefon/E-Mail-Liste entfernt, das Formular
   läuft jetzt über das Anfragen-Modul von Aingel (data-aingel-anfrage, agents.aingelagency.com/api/inhalte.js) statt
   über Netlify Forms - die Gestaltung bleibt dieselbe.
   Ein Block wie das frühere Kontakt-Band (css/basis.css): links Dachzeile, Überschrift, Satz, rechts das Formular.
   Folgt dem Modus; Orange nur am Menschen (Dachzeile, Akzentwort, Punkt im Knopf, Hinweis bei Fehlern). Tokens aus
   css/basis.css. */

.kontakt-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--r-xl); background: var(--flaeche); border: 1px solid var(--linie);
}
.kontakt-form__text .lead { margin-top: 16px; }

/* ---------- Das Formular ---------- */
.formular { position: relative; }
.formular__felder { display: grid; gap: 16px; }
.formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feld { display: grid; gap: 8px; min-width: 0; }
.feld__name { font-size: 14.5px; line-height: 1.3; color: var(--text); }
.feld__name em { font-style: normal; margin-left: 6px; font-size: 13px; color: var(--text-leise); }
.feld input, .feld textarea {
  width: 100%; min-height: 50px; padding: 13px 16px; border-radius: var(--r-m);
  font: 400 16px/1.45 var(--schrift); color: var(--text);
  background: var(--grund); border: 1px solid var(--linie);
  transition: border-color .2s var(--kurve), background-color .2s var(--kurve), box-shadow .2s var(--kurve);
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld ::placeholder { color: var(--text-leise); opacity: .75; }
@media (hover: hover) { .feld input:hover, .feld textarea:hover { border-color: var(--geruest); } }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: none; border-color: var(--code); background: var(--flaeche);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--code) 20%, transparent);
}
/* Erst nach dem Ausfüllen (oder dem Absenden) als fehlerhaft markiert – nie schon beim ersten Blick */
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--mensch); }

/* Haken „Einwilligung“ (Anfragen-Modul) – Kästchen links, Text daneben, wie ein natives Formularfeld */
.feld--haken { display: flex; flex-direction: row; align-items: start; gap: 10px; }
.feld--haken input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--mensch); }
.feld--haken span { font-size: 13.5px; line-height: 1.5; color: var(--text-leise); }
.feld--haken a { color: var(--text); }

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.formular__status { font-size: 15px; line-height: 1.5; color: var(--text-leise); }
.formular__status:empty { display: none; }
.formular__status a { color: var(--text); }
.formular__status[data-zustand='fehler'] { color: var(--mensch); }
.formular[data-aingel-gesendet] .formular__felder { display: none; }
.formular.ist-sendend [type='submit'] { opacity: .6; cursor: progress; }

/* Gesendet: an Stelle der Felder der Dank – mit einem feinen Rand in Orange (ihr habt den ersten Schritt gemacht) */
.formular__dank {
  display: grid; gap: 8px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l);
  border: 1px solid color-mix(in srgb, var(--mensch) 45%, var(--linie)); background: var(--grund);
}
.formular__dank[hidden] { display: none; }
.formular__dank-titel { font-size: var(--h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.formular__dank p:not(.formular__dank-titel) { color: var(--text-leise); }
.formular__dank:focus { outline: none; }

@media (max-width: 960px) { .kontakt-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .kontakt-form { padding: 24px 20px; border-radius: var(--r-l); }
  .formular__reihe { grid-template-columns: minmax(0, 1fr); }
  .formular__fuss .knopf { width: 100%; }
}