/*
 * Mehrschritt-Wizard + Karten-Stil für die "Mitgliedsoptionen"-Auswahl im
 * Mitgliedsantrag-Formular. Rein präsentational: ändert nichts an Feldnamen,
 * übermittelten Werten oder der CF7-Formularlogik.
 *
 * Schutz vor JS-Ausfall: Schritte werden nur ausgeblendet, wenn
 * fcap-wizard.js tatsächlich gelaufen ist und dem Formular die Klasse
 * .fcap-wizard-js gegeben hat — ohne JS bleibt das Formular eine einzige,
 * durchscrollbare Seite (heutiges Verhalten).
 */

.fcap-wizard-js .fcap-step { display: none; }
.fcap-wizard-js .fcap-step.fcap-step-active { display: block; }

.fcap-wizard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
}
.fcap-wizard-step-dot {
  flex: 1 1 0;
  min-width: 70px;
  text-align: center;
  font-size: 0.78rem;
  color: #8a8a8a;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #e2e2e2;
  transition: color 0.15s, border-color 0.15s;
}
.fcap-wizard-step-dot.is-active { color: #1d3a5f; font-weight: 600; border-color: #1d3a5f; }
.fcap-wizard-step-dot.is-done   { color: #2f9e64; border-color: #2f9e64; }
.fcap-wizard-step-dot.is-reachable { cursor: pointer; }
.fcap-wizard-step-dot.is-reachable:hover { color: #1d3a5f; border-color: #1d3a5f; }
/* Fehler gewinnt immer optisch gegen "nur gerade aktiv" — sonst sieht der
   aktuelle (meist letzte) Schritt beim Absenden immer rot/alarmierend aus,
   auch wenn nur ein ANDERER Schritt das eigentliche Problem hat. */
.fcap-wizard-step-dot.is-error { color: #dd183b; border-color: #dd183b; font-weight: 600; }

.fcap-wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e2e2e2;
}
.fcap-wizard-btn {
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}
.fcap-wizard-btn-back { background: transparent; color: #6b6863; border: 1px solid #d8d8d8; }
.fcap-wizard-btn-next { background: #1d3a5f; color: #fff; margin-left: auto; }

.fcap-step h2.fcap-step-heading {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: inherit;
  text-wrap: balance;
}
.fcap-step p.fcap-step-sub {
  font-family: inherit;
  font-size: 0.92rem;
  margin: 0 0 1.3rem;
  color: inherit;
  opacity: 0.72;
}

.fcap-step-error {
  background: #fbe6ea;
  color: #a8102f;
  border: 1px solid #f0aebb;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 1.2rem;
}
.fcap-field-invalid,
input.fcap-field-invalid,
select.fcap-field-invalid,
textarea.fcap-field-invalid {
  border-color: #dd183b !important;
  box-shadow: 0 0 0 2px rgba(221, 24, 59, 0.15);
}
label.fcap-field-invalid { color: #a8102f; }
.wpcf7-radio.fcap-field-invalid,
.wpcf7-form-control-wrap.fcap-field-invalid {
  outline: 2px dashed #dd183b;
  outline-offset: 6px;
  border-radius: 10px;
}

/* ── Karten-Stil für die Mitgliedsoptionen-Radios ─────────────────────── */

.fcap-step .wpcf7-radio,
.fcap-fussball-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.fcap-step .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}
.fcap-step .wpcf7-radio .wpcf7-list-item label,
.fcap-card-synthetic label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 132px;
  height: 150px;
  box-sizing: border-box;
  border: 1.5px solid #ddd;
  border-radius: 12px;
  padding: 1rem 0.6rem 0.85rem;
  cursor: pointer;
  text-align: center;
  font-size: 0.85rem;
  color: #222;
  background: #fafafa;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.fcap-step .wpcf7-radio .wpcf7-list-item label:hover,
.fcap-card-synthetic label:hover {
  border-color: #1d3a5f;
  transform: translateY(-1px);
}
.fcap-step .wpcf7-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fcap-card-icon svg { width: 60px; height: 60px; display: block; color: #8a8a8a; }

/* Feste Höhe für den Label-Text (egal ob CF7 ihn selbst in
   .wpcf7-list-item-label steckt oder fcap-wizard.js ihn nachträglich in
   .fcap-card-label-text verpackt hat) — reserviert immer Platz für 2
   Zeilen, damit z.B. "Volleyball" und "passives Fördermitglied" gleich
   große Karten ergeben statt unterschiedlich hoher. */
.fcap-card-label-text,
.fcap-step .wpcf7-radio .wpcf7-list-item label .wpcf7-list-item-label,
.fcap-card-synthetic .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
  line-height: 1.15em;
  overflow-wrap: break-word;
}

/* Piktogramm-Strichstärken-System, übernommen aus dem Design-Canvas
   https://claude.ai/artifact/WXUe5S6ZCqSuzLmoa6Kke9 (Rollen: t/tb=Torso,
   l/lc=Arme+Beine, tc=schmaler Torso, b=dicker Umriss, s=mittel, m=dünn,
   f=Fläche gefüllt) */
.fcap-pk .t  { fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.fcap-pk .tb { fill: none; stroke: currentColor; stroke-width: 25; stroke-linecap: round; }
.fcap-pk .l  { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.fcap-pk .tc { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; }
.fcap-pk .lc { fill: none; stroke: currentColor; stroke-width: 9;  stroke-linecap: round; stroke-linejoin: round; }
.fcap-pk .b  { fill: none; stroke: currentColor; stroke-width: 9;  stroke-linecap: round; }
.fcap-pk .s  { fill: none; stroke: currentColor; stroke-width: 6;  stroke-linecap: round; }
.fcap-pk .m  { fill: none; stroke: currentColor; stroke-width: 4;  stroke-linecap: round; }
.fcap-pk .f  { fill: currentColor; stroke: none; }
.fcap-card-selected .fcap-card-icon svg,
.fcap-card-synthetic.fcap-card-selected .fcap-card-icon svg { color: #dd183b; }

.fcap-step .wpcf7-radio .wpcf7-list-item label.fcap-card-selected,
.fcap-card-synthetic.fcap-card-selected label {
  border-color: #dd183b;
  background: #fbe6ea;
}

/* CSS-natives Backup zur JS-Klasse oben: :has() bindet den "ausgewählt"-Look
   direkt an den tatsächlichen :checked-Zustand, statt sich allein auf einen
   change-Event-Listener zu verlassen. Verhindert, dass die Optik jemals vom
   wirklich übermittelten Wert abweicht (beobachtet: Formular-Restore durch
   den Browser kann den :checked-Zustand ändern, ohne ein change-Event auf
   dem Radio selbst auszulösen). */
.fcap-step .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
  border-color: #dd183b;
  background: #fbe6ea;
}
.fcap-step .wpcf7-radio .wpcf7-list-item label:has(input:checked) .fcap-card-icon svg {
  color: #dd183b;
}
.fcap-step .wpcf7-radio:has(.fcap-fussball-sub input:checked) .fcap-card-synthetic label {
  border-color: #dd183b;
  background: #fbe6ea;
}
.fcap-step .wpcf7-radio:has(.fcap-fussball-sub input:checked) .fcap-card-synthetic .fcap-card-icon svg {
  color: #dd183b;
}

/* Fußball-Unterauswahl: standardmäßig eingeklappt, öffnet sich nur nach
   Klick auf die "Fußball"-Sammelkarte (siehe fcap-wizard.js) */
.fcap-fussball-sub {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.2s ease, opacity 0.15s ease;
}
.fcap-fussball-sub.fcap-sub-open {
  max-height: 400px;
  opacity: 1;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px dashed #ddd;
}
.fcap-step .wpcf7-radio .fcap-fussball-sub .wpcf7-list-item label { width: 112px; height: 122px; }
.fcap-fussball-sub .fcap-card-icon svg { width: 48px; height: 48px; }

.fcap-card-synthetic.fcap-card-expanded label { border-style: dashed; }

@media (max-width: 480px) {
  /* Auf schmalen Screens passen keine 5 vollen Labels nebeneinander — Text
     ausblenden, aber über ::before zumindest die Schrittnummer zeigen statt
     nur eine leere, bedeutungslose Farbleiste. */
  .fcap-wizard-step-dot { font-size: 0; padding-bottom: 0.4rem; min-width: 40px; }
  .fcap-wizard-step-dot::before { content: attr(data-step-number); font-size: 0.85rem; }
  .fcap-step .wpcf7-radio .wpcf7-list-item label,
  .fcap-card-synthetic label { width: 104px; height: 138px; }
  .fcap-step .wpcf7-radio .fcap-fussball-sub .wpcf7-list-item label { width: 96px; height: 112px; }
}