/* ============================================================
   Kontaktformular (Abschnitt #contact) — Videopilot
   Nutzt ausschließlich vorhandene CSS-Variablen/Klassen aus styles.css
   (--accent, --line, --muted, --bg, .btn, .btn-primary, .cta-band).
   ============================================================ */

.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 4vw, 44px);
  margin-top: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  gap: 20px;
}
.form-row--2 { grid-template-columns: 1fr 1fr; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-field label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.form-field .opt { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.form-field .req { color: var(--accent-600); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-field textarea { resize: vertical; min-height: 120px; }

.form-field--checkbox { margin-top: 2px; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--accent);
}
.checkbox-label a { color: var(--accent-600); }

/* Honeypot: fuer Menschen unsichtbar, aus dem Tab-Fluss entfernt (kein display:none,
   damit simple Bot-Checks es trotzdem ausfuellen). Der Feldname vermeidet Autofill-
   Trigger wie "website"/"url". */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-hint { color: var(--muted); font-size: 0.85rem; margin: 0; }

.form-status {
  min-height: 1.2em;
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
}
.form-status--pending { color: var(--muted); }
.form-status--success { color: var(--ok); }
.form-status--error { color: #c0392b; }

.btn.is-loading { opacity: 0.7; cursor: progress; }

@media (max-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr; }
}

/* Erfolgsmeldung nach dem Absenden (ersetzt das Formular) */
.contact-success { text-align: center; padding: 48px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.contact-success__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--ok, #23a15a); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.contact-success__icon svg { width: 40px; height: 40px; }
.contact-success h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 0; color: var(--ink); outline: none; }
.contact-success p { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 44ch; }
#contact-form[hidden], .contact-success[hidden] { display: none !important; }