/* ==========================================================================
   Superior Gym – form.css
   03 Kontakt: contact-grid, form module (prefill box, chips/fieldset — base
   primitives live in css/base.css), row-2, conditional fields, consent
   checkbox, success state, direct-contact aside (kv/steps).

   Ported verbatim (class names, values) from the binding design reference:
   superior-gym-handoff/reference/onepager-v1.html, "Kontakt" block.
   .chips/.chip/.chip-radio, fieldset/.field/.req/.hint/.input/
   .field--error/.field__error, .module and .kv are shared primitives and
   live in css/base.css (used by Trainingsplan/Footer too) — not repeated
   here.

   Two additions with no reference equivalent, kept minimal and consistent
   with the reference's own field-error look:
   - .form__alert: general (non-field) submit error, e.g. a 400/500 from
     api/contact.php that isn't tied to one input.
   - #formSubmit:disabled / .is-loading: the double-submit-guard loading
     state on the submit button.
   ========================================================================== */

/* ---------- Layout: form module + direct-contact aside ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.module.form-module { padding: 20px 16px; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form[hidden] { display: none; } /* form.js sets form.hidden when showing .success */

/* ---------- Prefill box ---------- */
.prefill { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--red-tint); border: 1px solid var(--border-accent); border-radius: var(--radius); }
.prefill.is-visible { display: flex; }
.prefill__text { display: flex; flex-direction: column; gap: 2px; }
.prefill__text strong { font-size: 16px; }
.prefill button { background: none; border: 0; padding: 8px 0; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; }

/* ---------- Two-column rows (Name/E-Mail, Firma/Mitarbeitende) ---------- */
.row-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ---------- Conditional fields (Anliegen-driven show/hide) ---------- */
.conditional { display: none; }
.conditional.is-visible { display: flex; }

/* ---------- Consent checkbox (Datenschutz) ---------- */
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.consent input { appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); display: grid; place-content: center; cursor: pointer; }
.consent input:checked { background: var(--red); border-color: var(--red); }
.consent input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.consent a { color: var(--text); }

.form__note { margin: -4px 0 0; font-size: 14px; color: var(--text-3); text-align: center; }

/* ---------- Success state ---------- */
.success { display: none; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0; }
.success.is-visible { display: flex; }
.success__icon { width: 56px; height: 56px; border-radius: var(--radius); background: var(--red-tint); border: 1px solid var(--border-accent); display: grid; place-content: center; color: var(--red-text); }
.success p { margin: 0; color: var(--text-2); max-width: 480px; }

/* ---------- Direct-contact aside ---------- */
.aside { display: flex; flex-direction: column; gap: 12px; }
.aside__title { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.steps li:last-child { border-bottom: 0; }
.steps b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--red-text); padding-top: 2px; }
.steps span { color: var(--text-2); }
.steps strong { display: block; color: var(--text); font-weight: 600; }

@media (min-width: 768px) { .row-2 { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; align-items: start; }
  .module.form-module { grid-column: span 7; padding: 32px; }
  .aside { grid-column: span 5; gap: 16px; }
}

/* ---------- Additions with no reference equivalent (see file header) ---------- */
.form__alert { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--red-tint); border: 1px solid var(--border-accent); border-radius: var(--radius); color: var(--red-text); font-size: 14px; line-height: 1.5; }
.form__alert[hidden] { display: none; }
#formSubmit:disabled { opacity: .65; cursor: not-allowed; }