/* ==========================================================================
   SALVIS Solutions — Formulare im Markenlook
   Greift für die eigenen Formulare (.form-field) UND eingebettete
   HubSpot-Formulare (.hs-form) – einheitliches Design, CRM-Anbindung über HubSpot.
   ========================================================================== */

/* Gemeinsame Feld-Optik: eigene Formulare + HubSpot */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea,
.form-field select,
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-grey-300);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.hs-form .hs-input:focus {
  border-color: var(--c-blue-500);
  box-shadow: var(--ring);
  outline: none;
}
.form-field textarea,
.hs-form textarea.hs-input { min-height: 140px; resize: vertical; }

/* Labels */
.form-label,
.hs-form label:not(.hs-error-msg) {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-navy-900);
  margin-bottom: 0.4em;
  display: inline-block;
}
.hs-form-required { color: var(--c-signal-ink); margin-left: 2px; }

/* Submit-Button = Marken-CTA */
.form-submit[type="submit"],
.hs-form input[type="submit"],
.hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95em 1.8em;
  font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-base);
  color: #fff; background: var(--c-cta);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-submit[type="submit"]:hover,
.hs-form input[type="submit"]:hover,
.hs-button:hover { background: var(--c-cta-hover); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Consent / Checkbox (DSGVO) */
.hs-form .hs-form-booleancheckbox-display,
.form-subgroup .form-option {
  display: flex; gap: 0.6em; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45;
}
.hs-form .hs-form-booleancheckbox-display input { margin-top: 0.25em; }

/* Validierungs-/Fehlermeldungen */
.hs-error-msg, .hs-error-msgs label {
  color: var(--c-signal-ink); font-size: var(--fs-sm);
}
.hs-form .hs-input.invalid { border-color: var(--c-magenta-500); }

/* Erfolgsmeldung */
.submitted-message {
  padding: var(--sp-5); border-radius: var(--radius);
  background: rgba(79,184,69,0.12); color: var(--c-green-600);
  font-weight: var(--fw-semibold);
}

/* Layout: Felder in Card-Optik einbetten */
.form-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}
.hs-form fieldset { max-width: none !important; }
.hs-form .field { margin-bottom: var(--sp-4); }

/* Status-Meldung (HubSpot Forms-API) */
.form-status { padding: var(--sp-4); border-radius: var(--radius); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.form-status--success { background: rgba(79,184,69,0.14); color: var(--c-green-600); }
.form-status--error { background: rgba(204,0,74,0.10); color: var(--c-signal-ink); }

/* Honeypot – für Menschen unsichtbar, fängt Bots ab (Spam-Schutz) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }