/* ===================================================================
   HubSpot form — themed to match the picxum "alt" lead card and forced
   into the original compact 2-column layout.

   Desktop grid:
     Row 1: Vorname | Nachname
     Row 2: E-Mail  | Website
     Row 3: Textarea (full width)
     Row 4: Consent  (full width)
     Row 5: Submit   (full width, dark button)
   Mobile/Tablet: single column, full width.

   Covers BOTH HubSpot markups: legacy (.hs-form / fieldset.form-columns-2)
   and the new embed (.hsfc-Form / .hsfc-FieldGroup). The same rules are
   also injected into shadow DOM by FinalCTA.jsx when the embed renders
   inside a shadow root (external CSS can't pierce it otherwise).
   =================================================================== */
.px-form--hs .px-hsform { margin-top: var(--space-5); }
.px-hsform, .px-hsform * { box-sizing: border-box; }

/* hide HubSpot's own title / description — we keep only our card headline */
.px-hsform .hsfc-Form__title,
.px-hsform .hsfc-FormTitle,
.px-hsform .hsfc-Form__description,
.px-hsform .hs-form-title { display: none !important; }

/* ---------- 2-column grid: NEW embed (.hsfc-Form) ---------- */
.px-hsform .hsfc-Form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start;
}
.px-hsform .hsfc-Form .hsfc-FieldGroup { margin: 0 !important; width: auto !important; }
.px-hsform .hsfc-Form .hsfc-FieldGroup:has(textarea),
.px-hsform .hsfc-Form .hsfc-FieldGroup:has(input[type="checkbox"]),
.px-hsform .hsfc-Form .hsfc-FieldGroup:has(input[type="radio"]),
.px-hsform .hsfc-Form__SubmitButtonWrapper,
.px-hsform .hsfc-Form__ButtonRow { grid-column: 1 / -1; }

/* ---------- 2-column grid: LEGACY embed (.hs-form) ---------- */
.px-hsform .hs-form .form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.px-hsform .hs-form .form-columns-2 .hs-form-field { width: auto !important; float: none !important; padding: 0 !important; }
.px-hsform .hs-form .form-columns-1 .hs-form-field { width: 100% !important; float: none !important; }
.px-hsform .hs-form .form-columns-1 .input { margin-right: 0 !important; }
.px-hsform .hs-form .hs-fieldtype-textarea,
.px-hsform .hs-form .legal-consent-container,
.px-hsform .hs-form .hs_submit { grid-column: 1 / -1; }
.px-hsform .hs-form fieldset { max-width: none !important; margin-bottom: var(--space-4); }
.px-hsform .hs-form fieldset:last-of-type { margin-bottom: 0; }

/* mobile / tablet → single column */
@media (max-width: 600px) {
  .px-hsform .hsfc-Form { grid-template-columns: 1fr; }
  .px-hsform .hs-form .form-columns-2 { grid-template-columns: 1fr; }
}

/* ---------- field theming (both markups) ---------- */
.px-hsform label,
.px-hsform .hsfc-Field > label,
.px-hsform .hsfc-FieldLabel {
  display: block; font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 600; color: var(--text-strong); margin-bottom: 7px; line-height: 1.3;
}
.px-hsform .hs-form-required, .px-hsform .hsfc-FieldLabel__required { color: var(--brand); }

.px-hsform input[type="text"],
.px-hsform input[type="email"],
.px-hsform input[type="tel"],
.px-hsform input[type="url"],
.px-hsform input[type="number"],
.px-hsform input[type="password"],
.px-hsform textarea,
.px-hsform select,
.px-hsform .hs-input,
.px-hsform .hsfc-TextInput,
.px-hsform .hsfc-TextArea,
.px-hsform .hsfc-DropdownInput {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-strong); background: #FFFFFF;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 14px; line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.px-hsform input:focus,
.px-hsform textarea:focus,
.px-hsform select:focus,
.px-hsform .hs-input:focus,
.px-hsform .hsfc-TextInput:focus,
.px-hsform .hsfc-TextArea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--orange-100);
}
.px-hsform ::placeholder { color: var(--text-subtle); }
.px-hsform textarea, .px-hsform .hsfc-TextArea { min-height: 92px; resize: vertical; }

/* errors */
.px-hsform .hs-error-msg,
.px-hsform .hs-error-msgs label,
.px-hsform .hsfc-ErrorAlert,
.px-hsform .hsfc-FieldError {
  color: var(--danger-text); font-size: var(--text-xs); font-weight: 500; margin-top: 6px;
}

/* checkbox / consent (DSGVO) */
.px-hsform .hs-form-booleancheckbox-display,
.px-hsform .legal-consent-container,
.px-hsform .hsfc-BooleanCheckboxField,
.px-hsform .hsfc-Consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); font-weight: 500;
}
.px-hsform .legal-consent-container .hs-richtext,
.px-hsform .hsfc-Consent p { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.px-hsform input[type="checkbox"], .px-hsform input[type="radio"] {
  accent-color: var(--brand); width: 18px; height: 18px; margin-top: 1px; flex: none;
}

/* submit — full width, DARK (secondary) button to match the original */
.px-hsform .hs-button,
.px-hsform input[type="submit"],
.px-hsform .hs-submit input.hs-button,
.px-hsform .hsfc-Form button[type="submit"],
.px-hsform .hsfc-Button {
  width: 100%; display: block; margin-top: var(--space-2);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  color: #FFFFFF; background: var(--surface-inverse); border: 0;
  border-radius: var(--radius-full); padding: 15px 24px; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.px-hsform .hs-button:hover,
.px-hsform input[type="submit"]:hover,
.px-hsform .hsfc-Form button[type="submit"]:hover,
.px-hsform .hsfc-Button:hover { background: #1B2C46; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.px-hsform .hs-button:active,
.px-hsform input[type="submit"]:active,
.px-hsform .hsfc-Button:active { transform: translateY(1px) scale(0.99); }

/* loading skeleton while the embed boots */
.px-hsform:empty::before,
.px-hsform .hs-form-frame:empty::before {
  content: ""; display: block; height: 264px; border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--surface-subtle) 30%, var(--surface-muted) 50%, var(--surface-subtle) 70%);
  background-size: 200% 100%; animation: hsShimmer 1.3s ease-in-out infinite;
}
@keyframes hsShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .px-hsform:empty::before, .px-hsform .hs-form-frame:empty::before { animation: none; } }

/* ===== custom success view (in-card) ===== */
.px-form__success-list {
  list-style: none; padding: 0; margin: var(--space-6) auto var(--space-7);
  display: inline-flex; flex-direction: column; gap: var(--space-3); text-align: left;
}
.px-form__success-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-strong); font-size: var(--text-base); }
.px-form__success-check {
  width: 22px; height: 22px; border-radius: var(--radius-full); flex: none;
  background: var(--success-subtle); color: var(--success-text);
  display: inline-flex; align-items: center; justify-content: center;
}