/* Kontaktformular – ergänzt style.css */

.split-form { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 860px) { .split-form { grid-template-columns: 1fr; } }

.contact-form {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.contact-form h2 { font-size: 1.35rem; margin-bottom: .8em; }

.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 520px) { .contact-form .field-row { grid-template-columns: 1fr; } }
.contact-form .field { margin-bottom: 14px; }
.contact-form .field-row .field { margin-bottom: 0; }

.contact-form label { display: block; font-size: .92rem; font-weight: 700; margin-bottom: 6px; }
.contact-form .optional { color: var(--ink-soft); font-weight: 400; }
.contact-form .req { color: var(--accent-dark); }

.contact-form input, .contact-form textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: 12px 14px; border: 1.5px solid #9db3b3; border-radius: var(--radius-sm);
}
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 3px solid var(--accent-dark); outline-offset: 1px; border-color: var(--primary);
}
.contact-form [aria-invalid="true"] { border-color: #b3382a; }
.field-error { color: #8c2b1f; font-size: .88rem; margin: 6px 0 0; }

.contact-form .hint { font-size: .88rem; color: var(--ink-soft); margin: 4px 0 18px; line-height: 1.5; }

/* Spam-Schutz: Feld für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.btn[disabled] { opacity: .65; cursor: progress; }

.form-status { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .98rem; }
.form-status:focus { outline: none; }
.form-status.is-ok { background: #e8f3ec; border: 1px solid #b7d6c2; color: #1f4d33; }
.form-status.is-error { background: #fdf0ee; border: 1px solid #f0cfc9; color: #6e2118; }
.form-status a { color: inherit; font-weight: 700; }

/* Nach erfolgreichem Senden: Felder ausblenden */
.contact-form.ist-gesendet .field-row, .contact-form.ist-gesendet .field, .contact-form.ist-gesendet .hint,
.contact-form.ist-gesendet #senden { display: none; }