/* =========================================================
   Kontaktformular (WPForms) im Quadrum-Look

   WPForms rendert hier mit dem Modern-Renderer
   (.wpforms-render-modern). Der liest sein komplettes Aussehen aus
   CSS-Variablen — deshalb werden die gesetzt statt WPForms-Regeln
   zu überschreiben. Das überlebt Plugin-Updates deutlich besser.

   Ohne diese Datei kommt WPForms in seinem hellen Standard:
   weiße Felder, dunkle Labels auf dunklem Grund, blauer Button.
   ========================================================= */

.kontakt-form {
  max-width: 36rem;
  margin: 0 auto;
  /* .svc-contact zentriert die Sektion — Formularfelder brauchen
     linksbündige Labels, sonst schwimmt alles. */
  text-align: left;
}

.kontakt-form .wpforms-container {
  --wpforms-field-border-radius: 10px;
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-style: solid;
  --wpforms-field-background-color: rgb(255 255 255 / 0.04);
  --wpforms-field-border-color: rgb(255 255 255 / 0.14);
  --wpforms-field-text-color: #f4f3ef;
  --wpforms-field-menu-color: #161616;

  --wpforms-label-color: #f4f3ef;
  --wpforms-label-sublabel-color: #9a978f;
  --wpforms-label-error-color: #e08a7d;

  --wpforms-button-border-radius: 999px;
  --wpforms-button-border-size: 0;
  --wpforms-button-background-color: #c8a878;
  --wpforms-button-border-color: #c8a878;
  --wpforms-button-text-color: #14110b;

  --wpforms-field-size-input-height: 48px;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-line-height: 1.5;
  --wpforms-field-size-padding-h: 1rem;
  --wpforms-field-size-checkbox-size: 18px;
  --wpforms-field-size-sublabel-spacing: 6px;

  --wpforms-label-size-font-size: 0.92rem;
  --wpforms-label-size-line-height: 1.5;
  --wpforms-label-size-sublabel-font-size: 0.8rem;

  --wpforms-button-size-font-size: 0.95rem;
  --wpforms-button-size-height: 48px;
  --wpforms-button-size-padding-h: 1.8rem;
  --wpforms-button-size-margin-top: 1.6rem;

  margin: 0;
}

/* Schrift des Themes durchreichen — WPForms erbt sonst vom body,
   das stimmt hier zwar, aber Felder setzen eigene font-family. */
.kontakt-form .wpforms-container,
.kontakt-form input,
.kontakt-form textarea,
.kontakt-form select,
.kontakt-form button {
  font-family: var(--font-sans);
}

.kontakt-form .wpforms-field { padding: 0 0 1.1rem; }

.kontakt-form .wpforms-field-label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Pflichtfeld-Stern: WPForms nimmt hartes Rot. Im Gold der Seite
   bleibt er sichtbar, ohne den Ton zu brechen. */
.kontakt-form .wpforms-required-label { color: var(--accent); }

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form input[type="url"],
.kontakt-form input[type="number"],
.kontakt-form textarea,
.kontakt-form select {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus,
.kontakt-form select:focus {
  border-color: var(--accent);
  background: rgb(255 255 255 / 0.07);
  outline: none;
}

.kontakt-form textarea { min-height: 9rem; resize: vertical; }

/* Platzhalter im Standard sind auf hellem Grund gedacht. */
.kontakt-form ::placeholder { color: rgb(154 151 143 / 0.7); opacity: 1; }

/* --- Radio / Checkbox ---------------------------------------------------
   Der Modern-Renderer zeichnet die Marker über accent-color; ohne Vorgabe
   bleibt der Browser-Blauton stehen. */

.kontakt-form .wpforms-field-radio ul,
.kontakt-form .wpforms-field-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.kontakt-form .wpforms-field-radio input,
.kontakt-form .wpforms-field-checkbox input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
}

/* Den Ring zeichnet der Modern-Renderer als ::before mit der Feld-Randfarbe (0.14 Weiß) —
   auf #0b0b0d praktisch unsichtbar, am Handy sah man nur „Unternehmen / Organisationen /
   Sonstiges“ ohne Knöpfe (Mobil-Check 04.10.2026). Variable nur für diese Felder kräftiger. */
.kontakt-form .wpforms-field-radio,
.kontakt-form .wpforms-field-checkbox {
  --wpforms-field-border-color: rgb(255 255 255 / 0.5);
  --wpforms-field-background-color: rgb(255 255 255 / 0.06);
}

.kontakt-form .wpforms-field-label-inline {
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}

/* --- Button = optisch identisch zu .btn--primary ------------------------ */

.kontakt-form .wpforms-submit-container { text-align: left; }

.kontakt-form button.wpforms-submit {
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.kontakt-form button.wpforms-submit:hover {
  background: #d8bc92;
  transform: translateY(-2px);
}
.kontakt-form button.wpforms-submit[disabled] {
  opacity: 0.55;
  transform: none;
}

/* --- Fehler & Bestätigung ---------------------------------------------- */

.kontakt-form label.wpforms-error {
  color: #e08a7d;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.kontakt-form .wpforms-field.wpforms-has-error input,
.kontakt-form .wpforms-field.wpforms-has-error textarea {
  border-color: #e08a7d;
}

.kontakt-form .wpforms-confirmation-container-full,
.kontakt-form div[class*="wpforms-confirmation"] {
  background: rgb(200 168 120 / 0.09);
  border: 1px solid rgb(200 168 120 / 0.35);
  border-radius: 12px;
  color: var(--text);
  padding: 1.1rem 1.3rem;
}
.kontakt-form .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* Der Mailto-Fallback (kein Formular hinterlegt) bleibt zentriert. */
.kontakt-form-hint {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

@media (max-width: 640px) {
  .kontakt-form { max-width: none; }
}