/* ============================================================
   Digital Discovery — Formulare (Kontaktseite)
   Eigenständiges Blatt, NUR auf de/kontakt.html + en/contact.html
   eingebunden. Nutzt ausschliesslich die Design-Tokens aus style.css
   (keine Redefinition von :root — style.css bleibt unangetastet).
   ============================================================ */

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

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-field label {
  font-size: 0.86rem;
  font-weight: 560;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-field label .optional {
  text-transform: none;
  font-weight: 440;
  letter-spacing: 0;
  color: var(--text-3);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text);
  font-size: 0.97rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: vertical;
}

.form-field input[type="text"]::placeholder,
.form-field input[type="email"]::placeholder,
.form-field textarea::placeholder { color: var(--text-3); }

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  background: var(--surface-hover);
}

/* Sichtbarer Fokus-Ring fuer Tastatur-Navigation (Audit-Fund WCAG) */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
#contact-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--accent-3);
}

.form-field textarea { min-height: 130px; }

.field-error {
  font-size: 0.85rem;
  color: var(--accent-3);
  min-height: 1.1em;
}

.field-error:empty { display: none; }

/* Honeypot — fuer Menschen unsichtbar (nicht display:none, damit Screenreader-
   und Bot-Heuristiken es weiterhin als "vorhandenes" Feld sehen), fuer
   Sehende nie im Layout sichtbar. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form button[type="submit"] {
  align-self: flex-start;
  margin-top: 4px;
}

.form-status {
  font-size: 0.92rem;
  min-height: 1.3em;
  margin-top: 4px;
}

.form-status--pending { color: var(--text-2); }
.form-status--success { color: var(--accent); }
.form-status--error { color: var(--accent-3); }

.form-secondary {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.92rem;
}
.form-secondary a { color: var(--accent); text-decoration: none; }
.form-secondary a:hover { text-decoration: underline; }

.form-noscript {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.92rem;
}
.form-noscript a { color: var(--accent); text-decoration: none; }
.form-noscript a:hover { text-decoration: underline; }