<turbo-stream action="remove" target="price-inquiry-success-modal"></turbo-stream>
<turbo-stream action="remove" target="trial-booking-modal"></turbo-stream>
  <turbo-stream action="remove" target="tariff-modal"></turbo-stream>
  <turbo-stream action="append" target="modals-container"><template>
    <div id="trial-booking-modal" data-controller="modal wizard" data-action="keydown.esc->modal#close click->modal#closeOnBackdrop" data-trial-price="0.0" data-restricted="false" data-modal-target="overlay" data-modal-handoff="false" class="fixed inset-0 z-[70] flex items-end justify-center bg-neutral-950/65 backdrop-blur-[3px] opacity-0 md:items-center md:py-0" role="dialog" aria-modal="true" aria-labelledby="trial-booking-title" aria-describedby="trial-booking-subtitle">
  <div class="bg-white w-full h-[84dvh] max-h-[84dvh] rounded-t-3xl shadow-2xl md:rounded-xl md:shadow-xl md:max-w-4xl md:m-4 md:h-full md:max-h-[90vh] overflow-hidden flex flex-col min-h-0 opacity-0" data-modal-target="container">
    <div class="md:hidden flex items-center justify-center pt-2 pb-1 bg-white" data-modal-drag-handle>
      <span class="h-1 w-12 rounded-full bg-gray-300" aria-hidden="true"></span>
    </div>
    <div class="flex flex-col min-h-0 flex-1" data-modal-sheet-content>
    <!-- Header -->
    <div class="p-4 md:p-6 border-b border-primary-200 bg-white">
      <div class="flex items-start gap-2">
        <div class="w-10 shrink-0" aria-hidden="true"></div>
        <div class="min-w-0 flex-1 text-center">
          <h2 id="trial-booking-title" class="text-2xl font-bold leading-tight break-words text-text-primary">High5 Gym Kleve</h2>
          <p id="trial-booking-subtitle" class="text-sm text-text-secondary mt-1">Probetraining anfragen</p>
        </div>
        <button data-action="click->modal#close" class="inline-flex h-11 w-11 items-center justify-center text-text-secondary hover:text-text-primary rounded-full hover:bg-primary-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 cursor-pointer shrink-0" aria-label="Schließen">
          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"></path></svg>
        </button>
      </div>
    </div>

    <form data-turbo="true" class="flex flex-1 flex-col min-h-0" autocomplete="off" data-form-type="other" action="/gym/high5-gym-kleve/trial_bookings" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="lmiOytxJGrk3PvVYTv3Kot_nyNEKC0XiASzCTPskcO7LD6fUniQkhqUAnvdDnKiecH_ODvQ7VIve7LNvZXHFOA" autocomplete="off" />
      <!-- Stepper -->
      <div class="border-b border-primary-200 bg-white">
        <ol class="mx-auto max-w-3xl px-4 md:px-6 py-4 flex items-center justify-between text-sm text-text-secondary" data-wizard-target="stepper">
            <li class="flex min-w-0 flex-1 items-center">
              <button type="button"
                      class="group inline-flex min-h-11 min-w-11 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2"
                      data-wizard-target="stepperItem"
                      data-action="click->wizard#jumpToStep"
                      data-index="0"
                      aria-label="Schritt 1: Ablauf">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full border-2 font-medium text-sm">1</span>
                <span class="hidden md:inline text-sm truncate">Ablauf</span>
              </button>
                <span class="mx-1 md:mx-2 h-px flex-1 bg-primary-200" aria-hidden="true"></span>
            </li>
            <li class="flex min-w-0 flex-1 items-center">
              <button type="button"
                      class="group inline-flex min-h-11 min-w-11 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2"
                      data-wizard-target="stepperItem"
                      data-action="click->wizard#jumpToStep"
                      data-index="1"
                      aria-label="Schritt 2: Ziel">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full border-2 font-medium text-sm">2</span>
                <span class="hidden md:inline text-sm truncate">Ziel</span>
              </button>
                <span class="mx-1 md:mx-2 h-px flex-1 bg-primary-200" aria-hidden="true"></span>
            </li>
            <li class="flex min-w-0 flex-1 items-center">
              <button type="button"
                      class="group inline-flex min-h-11 min-w-11 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2"
                      data-wizard-target="stepperItem"
                      data-action="click->wizard#jumpToStep"
                      data-index="2"
                      aria-label="Schritt 3: Termin">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full border-2 font-medium text-sm">3</span>
                <span class="hidden md:inline text-sm truncate">Termin</span>
              </button>
                <span class="mx-1 md:mx-2 h-px flex-1 bg-primary-200" aria-hidden="true"></span>
            </li>
            <li class="flex min-w-0 flex-1 items-center">
              <button type="button"
                      class="group inline-flex min-h-11 min-w-11 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2"
                      data-wizard-target="stepperItem"
                      data-action="click->wizard#jumpToStep"
                      data-index="3"
                      aria-label="Schritt 4: Persönlich">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full border-2 font-medium text-sm">4</span>
                <span class="hidden md:inline text-sm truncate">Persönlich</span>
              </button>
                <span class="mx-1 md:mx-2 h-px flex-1 bg-primary-200" aria-hidden="true"></span>
            </li>
            <li class="flex min-w-0 flex-1 items-center">
              <button type="button"
                      class="group inline-flex min-h-11 min-w-11 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2"
                      data-wizard-target="stepperItem"
                      data-action="click->wizard#jumpToStep"
                      data-index="4"
                      aria-label="Schritt 5: Bestätigen">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full border-2 font-medium text-sm">5</span>
                <span class="hidden md:inline text-sm truncate">Bestätigen</span>
              </button>
            </li>
        </ol>
      </div>
      <!-- Body -->
      <div class="relative flex-1 min-h-0" data-controller="scroll-fade">
        <div class="flex-1 min-h-0 h-full overflow-y-auto" data-wizard-target="body" data-scroll-fade-target="viewport" data-action="scroll->scroll-fade#update">
        <div class="w-full py-8 md:py-10 px-4 sm:px-6 md:px-10 text-base leading-relaxed text-text-secondary space-y-8 mx-auto max-w-4xl">

          <!-- Step 1: Option -->
          <section data-wizard-target="step">
            <div class="space-y-6">
  <h2 class="text-3xl font-bold text-text-primary text-center px-4">Wie möchtest du trainieren?</h2>
  <p class="text-base text-text-secondary text-center -mt-3">Wähle die Art deines Probetrainings.</p>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
    <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-wizard-option>
      <input class="peer sr-only" data-wizard-option-input="true" type="radio" value="self_guided" name="trial_booking[training_type]" id="trial_booking_training_type_self_guided" />
      <div class="flex flex-col items-center gap-4 p-6 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 peer-checked:border-accent-500 peer-checked:bg-accent-50/40 transition-all duration-200 relative min-h-[170px]" data-wizard-option-card>
        <span class="shrink-0 inline-flex w-6 h-6 text-transparent peer-checked:text-accent-500 items-center justify-center absolute top-4 right-4" data-wizard-option-check>
          <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
        </span>
        <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
          <svg class="w-5 h-5 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"></path></svg>
        </div>
        <div class="text-center flex-1">
          <div class="text-lg font-semibold text-text-primary mb-1">Studio selbst entdecken</div>
          <div class="text-sm text-text-secondary">Keine Einweisung, alles auf eigene Faust</div>
        </div>
      </div>
    </label>

    <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-wizard-option>
      <input class="peer sr-only" data-wizard-option-input="true" type="radio" value="guided_tour" name="trial_booking[training_type]" id="trial_booking_training_type_guided_tour" />
      <div class="flex flex-col items-center gap-4 p-6 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 peer-checked:border-accent-500 peer-checked:bg-accent-50/40 transition-all duration-200 relative min-h-[170px]" data-wizard-option-card>
        <span class="shrink-0 inline-flex w-6 h-6 text-transparent peer-checked:text-accent-500 items-center justify-center absolute top-4 right-4" data-wizard-option-check>
          <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
        </span>
        <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
          <svg class="w-5 h-5 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M8 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM3.156 11.763c.16-.629.44-1.21.813-1.72a2.5 2.5 0 0 0-2.725 1.377c-.136.287.102.58.418.58h1.449c.01-.077.025-.156.045-.237ZM12.847 11.763c.02.08.036.16.046.237h1.446c.316 0 .554-.293.417-.579a2.5 2.5 0 0 0-2.722-1.378c.374.51.653 1.09.813 1.72ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 13c-.552 0-1.013-.455-.876-.99a4.002 4.002 0 0 1 7.753 0c.136.535-.324.99-.877.99H5Z"></path></svg>
        </div>
        <div class="text-center flex-1">
          <div class="text-lg font-semibold text-text-primary mb-1">Geführte Tour</div>
          <div class="text-sm text-text-secondary">Einweisung durch einen Coach</div>
        </div>
      </div>
    </label>
  </div>
</div>

          </section>

          <!-- Step  2: Ziel -->
          <section data-wizard-target="step">
            <div class="space-y-6">
  <h2 class="text-3xl font-bold text-text-primary text-center px-4">Was ist dein Trainingsziel?</h2>
  <p class="text-base text-text-secondary text-center -mt-3">Wähle das Ziel, das am besten zu dir passt.</p>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6" data-controller="goal-selector">
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="lose_weight">
        <input type="radio" name="trial_booking[goal]" value="lose_weight" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M8.75 2.5a.75.75 0 0 0-1.5 0v.508a32.661 32.661 0 0 0-4.624.434.75.75 0 0 0 .246 1.48l.13-.021-1.188 4.75a.75.75 0 0 0 .33.817A3.487 3.487 0 0 0 4 11c.68 0 1.318-.195 1.856-.532a.75.75 0 0 0 .33-.818l-1.25-5a31.31 31.31 0 0 1 2.314-.141V12.012c-.882.027-1.752.104-2.607.226a.75.75 0 0 0 .213 1.485 22.188 22.188 0 0 1 6.288 0 .75.75 0 1 0 .213-1.485 23.657 23.657 0 0 0-2.607-.226V4.509c.779.018 1.55.066 2.314.14L9.814 9.65a.75.75 0 0 0 .329.818 3.487 3.487 0 0 0 1.856.532c.68 0 1.318-.195 1.856-.532a.75.75 0 0 0 .33-.818L12.997 4.9l.13.022a.75.75 0 1 0 .247-1.48 32.66 32.66 0 0 0-4.624-.434V2.5ZM3.42 9.415a2 2 0 0 0 1.16 0L4 7.092l-.58 2.323ZM12 9.5a2 2 0 0 1-.582-.085L12 7.092l.58 2.323A2 2 0 0 1 12 9.5Z" clip-rule="evenodd"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Abnehmen</div>
            <div class="text-sm text-text-secondary leading-snug">Gewicht reduzieren und Körperfett verlieren</div>
          </div>
        </div>
      </label>
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="build_muscle">
        <input type="radio" name="trial_booking[goal]" value="build_muscle" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M9.58 1.077a.75.75 0 0 1 .405.82L9.165 6h4.085a.75.75 0 0 1 .567 1.241l-6.5 7.5a.75.75 0 0 1-1.302-.638L6.835 10H2.75a.75.75 0 0 1-.567-1.241l6.5-7.5a.75.75 0 0 1 .897-.182Z" clip-rule="evenodd"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Muskelaufbau</div>
            <div class="text-sm text-text-secondary leading-snug">Muskelmasse aufbauen und Kraft steigern</div>
          </div>
        </div>
      </label>
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="health">
        <input type="radio" name="trial_booking[goal]" value="health" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Gesundheit</div>
            <div class="text-sm text-text-secondary leading-snug">Allgemeine Gesundheit und Wohlbefinden fördern</div>
          </div>
        </div>
      </label>
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="fitness">
        <input type="radio" name="trial_booking[goal]" value="fitness" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M8.074.945A4.993 4.993 0 0 0 6 5v.032c.004.6.114 1.176.311 1.709.16.428-.204.91-.61.7a5.023 5.023 0 0 1-1.868-1.677c-.202-.304-.648-.363-.848-.058a6 6 0 1 0 8.017-1.901l-.004-.007a4.98 4.98 0 0 1-2.18-2.574c-.116-.31-.477-.472-.744-.28Zm.78 6.178a3.001 3.001 0 1 1-3.473 4.341c-.205-.365.215-.694.62-.59a4.008 4.008 0 0 0 1.873.03c.288-.065.413-.386.321-.666A3.997 3.997 0 0 1 8 8.999c0-.585.126-1.14.351-1.641a.42.42 0 0 1 .503-.235Z" clip-rule="evenodd"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Fitness</div>
            <div class="text-sm text-text-secondary leading-snug">Ausdauer und körperliche Leistung verbessern</div>
          </div>
        </div>
      </label>
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="wellbeing">
        <input type="radio" name="trial_booking[goal]" value="wellbeing" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Wohlbefinden</div>
            <div class="text-sm text-text-secondary leading-snug">Stress abbauen und sich besser fühlen</div>
          </div>
        </div>
      </label>
      <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-goal-selector-target="option" data-value="rehab">
        <input type="radio" name="trial_booking[goal]" value="rehab" class="sr-only" data-action="change->goal-selector#select">
        <div class="flex flex-col items-center justify-between gap-3 p-5 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 relative goal-card min-h-[160px]">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-500 opacity-0 goal-checkmark">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mt-2 transition-colors">
            <svg class="w-4 h-4 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M8.5 1.709a.75.75 0 0 0-1 0 8.963 8.963 0 0 1-4.84 2.217.75.75 0 0 0-.654.72 10.499 10.499 0 0 0 5.647 9.672.75.75 0 0 0 .694-.001 10.499 10.499 0 0 0 5.647-9.672.75.75 0 0 0-.654-.719A8.963 8.963 0 0 1 8.5 1.71Zm2.34 5.504a.75.75 0 0 0-1.18-.926L7.394 9.17l-1.156-.99a.75.75 0 1 0-.976 1.138l1.75 1.5a.75.75 0 0 0 1.078-.106l2.75-3.5Z" clip-rule="evenodd"></path></svg>
          </div>
          <div class="text-center flex-1">
            <div class="text-lg font-semibold text-text-primary mb-1">Reha/Physio</div>
            <div class="text-sm text-text-secondary leading-snug">Rehabilitation und Physiotherapie unterstützen</div>
          </div>
        </div>
      </label>
  </div>
</div>

          </section>

          <!-- Step 3: Termin auswählen -->
          <section data-wizard-target="step">
            <div class="space-y-5" data-controller="schedule-selector" data-trial-hours="{&quot;friday&quot;:[],&quot;monday&quot;:[],&quot;sunday&quot;:[],&quot;tuesday&quot;:[],&quot;saturday&quot;:[],&quot;thursday&quot;:[],&quot;wednesday&quot;:[]}">
  <h2 class="text-3xl font-bold text-text-primary text-center">Wann hast du Zeit?</h2>
  <p class="text-base text-text-secondary text-center -mt-3">Wähle zuerst einen Tag und dann eine Uhrzeit.</p>
  
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8">
    <!-- Day Selection -->
    <div>
      <h3 class="text-2xl font-bold text-text-primary mb-3">Tag wählen</h3>
       <div class="space-y-3">
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-06" value="2026-04-06" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-06" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Montag</div>
                       <div class="text-sm text-text-secondary">06.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-07" value="2026-04-07" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-07" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Dienstag</div>
                       <div class="text-sm text-text-secondary">07.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-08" value="2026-04-08" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-08" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Mittwoch</div>
                       <div class="text-sm text-text-secondary">08.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-09" value="2026-04-09" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-09" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Donnerstag</div>
                       <div class="text-sm text-text-secondary">09.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-10" value="2026-04-10" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-10" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Freitag</div>
                       <div class="text-sm text-text-secondary">10.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-11" value="2026-04-11" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-11" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Samstag</div>
                       <div class="text-sm text-text-secondary">11.04</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-500 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-04-12" value="2026-04-12" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-04-12" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:-translate-y-0.5 hover:shadow-md hover:border-primary-300 transition-all duration-200 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-500 opacity-0 day-checkmark">
                   <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
                 </span>
                   <div class="flex items-center gap-3">
                     <div class="font-semibold text-text-primary">
                       <div>Sonntag</div>
                       <div class="text-sm text-text-secondary">12.04</div>
                     </div>
                   </div>
               </div>
             </label>
       </div>
    </div>

    <!-- Time Selection -->
    <div data-schedule-selector-target="timeSection" class="pointer-events-none">
      <h3 class="text-2xl font-bold text-text-primary mb-3">Uhrzeit wählen</h3>
      <div class="space-y-3" data-schedule-selector-target="timeContainer" aria-live="polite">
        <div class="p-4 rounded-xl border border-primary-200 text-center text-text-secondary bg-primary-50">
          Wähle zuerst einen Tag
        </div>
      </div>
    </div>
  </div>
</div>

          </section>

          <!-- Step 4: Persönliche Daten -->
          <section data-wizard-target="step">
            <div class="space-y-5">
  <h2 class="text-3xl font-bold text-text-primary text-center">Persönliche Daten</h2>
  <p class="text-base text-text-secondary text-center -mt-3">Diese Daten benötigt das Studio für die Terminbestätigung.</p>

    <div class="grid md:grid-cols-2 gap-4">
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_first_name">Vorname *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none" placeholder="Dein Vorname" autocomplete="given-name" data-action="blur-&gt;wizard#validateField input-&gt;wizard#validateField" type="text" name="trial_booking[lead_attributes][first_name]" id="trial_booking_lead_attributes_first_name" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_last_name">Nachname *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none" placeholder="Dein Nachname" autocomplete="family-name" data-action="blur-&gt;wizard#validateField input-&gt;wizard#validateField" type="text" name="trial_booking[lead_attributes][last_name]" id="trial_booking_lead_attributes_last_name" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-4">
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_email">E-Mail *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none" placeholder="deine@email.de" autocomplete="email" data-form-type="other" data-action="blur-&gt;wizard#validateField input-&gt;wizard#validateField" type="email" name="trial_booking[lead_attributes][email]" id="trial_booking_lead_attributes_email" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_phone">Telefonnummer *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none" placeholder="+49 123 456789" autocomplete="tel" inputmode="tel" data-form-type="other" data-action="blur-&gt;wizard#validateField input-&gt;wizard#validateField" type="tel" name="trial_booking[lead_attributes][phone]" id="trial_booking_lead_attributes_phone" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-4">
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_birthdate">Geburtsdatum *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none [&amp;::-webkit-calendar-picker-indicator]:cursor-pointer [&amp;::-webkit-calendar-picker-indicator]:opacity-60" autocomplete="bday" data-action="blur-&gt;wizard#validateField change-&gt;wizard#validateField" type="date" name="trial_booking[lead_attributes][birthdate]" id="trial_booking_lead_attributes_birthdate" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
      <div data-field-wrapper>
        <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
          <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_lead_attributes_postal_code">Postleitzahl *</label>
          <input required="required" class="w-full border-0 bg-transparent p-0 text-base text-text-primary placeholder:text-primary-400 focus:outline-none" placeholder="12345" pattern="[0-9]{5}" maxlength="5" autocomplete="postal-code" inputmode="numeric" data-form-type="other" data-action="blur-&gt;wizard#validateField input-&gt;wizard#validateField" size="5" type="text" name="trial_booking[lead_attributes][postal_code]" id="trial_booking_lead_attributes_postal_code" />
          <div class="absolute top-4 right-4 hidden" data-field-checkmark>
            <svg class="w-4 h-4 text-accent-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
        <div class="text-red-600 text-xs mt-1 h-4" data-field-error></div>
      </div>
    </div>

    <div class="space-y-3 pt-1">
      <div class="flex items-start gap-3 p-4 rounded-xl border border-primary-200 bg-white" data-checkbox-container>
        <input name="trial_booking[lead_attributes][marketing_opt_in]" type="hidden" value="0" autocomplete="off" /><input class="mt-0.5 h-5 w-5 rounded border-primary-300 text-accent-500 focus:ring-2 focus:ring-accent-500 focus:ring-offset-2" data-action="change-&gt;wizard#validateCheckbox" type="checkbox" value="1" name="trial_booking[lead_attributes][marketing_opt_in]" id="trial_booking_lead_attributes_marketing_opt_in" />
        <label for="trial_booking_lead_attributes_marketing_opt_in" class="text-sm leading-relaxed text-text-secondary cursor-pointer">
          Ich möchte Neuigkeiten und Angebote per E-Mail erhalten (optional).
        </label>
      </div>

      <div class="flex items-start gap-3 p-4 rounded-xl border border-primary-200 bg-white" data-checkbox-container>
        <input name="trial_booking[lead_attributes][privacy_accepted]" type="hidden" value="0" autocomplete="off" /><input required="required" class="mt-0.5 h-5 w-5 rounded border-primary-300 text-accent-500 focus:ring-2 focus:ring-accent-500 focus:ring-offset-2" data-action="change-&gt;wizard#validateCheckbox" type="checkbox" value="1" name="trial_booking[lead_attributes][privacy_accepted]" id="trial_booking_lead_attributes_privacy_accepted" />
        <label for="trial_booking_lead_attributes_privacy_accepted" class="text-sm leading-relaxed text-text-secondary cursor-pointer">
          Ich habe die <a target="_blank" rel="noopener noreferrer" class="link-accent" data-action="click-&gt;wizard#stopEvent" href="/datenschutzrichtlinie">Datenschutzerklärung</a> gelesen und akzeptiere sie.
        </label>
      </div>
    </div>
</div>

          </section>

          <!-- Step 5: Bestätigen -->
          <section data-wizard-target="step">
            <div class="space-y-5">
  <div class="text-center">
    <h2 class="text-3xl font-bold text-text-primary">Bestätigung</h2>
    <p class="text-base text-text-secondary mt-2">Bitte überprüfe deine Angaben und bestätige deine Buchung.</p>
  </div>

  <div class="bg-primary-50 p-5 md:p-6 rounded-xl border border-primary-200">
    <h3 class="text-2xl font-bold text-text-primary mb-4 text-center">Zusammenfassung</h3>
    <div class="grid gap-3">
      <div class="grid gap-3 md:grid-cols-2">
      <div class="bg-white rounded-xl border border-primary-200 p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="text-xs font-semibold uppercase tracking-wide text-text-secondary">Training</p>
          <button type="button" class="text-xs font-semibold text-accent-500 hover:text-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm" data-action="click->wizard#jumpToStep" data-index="0">Bearbeiten</button>
        </div>
        <p class="text-sm text-text-primary font-semibold" data-summary-training-type></p>
      </div>

      <div class="bg-white rounded-xl border border-primary-200 p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="text-xs font-semibold uppercase tracking-wide text-text-secondary">Ziel</p>
          <button type="button" class="text-xs font-semibold text-accent-500 hover:text-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm" data-action="click->wizard#jumpToStep" data-index="1">Bearbeiten</button>
        </div>
        <p class="text-sm text-text-primary font-semibold" data-summary-goal></p>
      </div>

      <div class="bg-white rounded-xl border border-primary-200 p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="text-xs font-semibold uppercase tracking-wide text-text-secondary">Termin</p>
          <button type="button" class="text-xs font-semibold text-accent-500 hover:text-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm" data-action="click->wizard#jumpToStep" data-index="2">Bearbeiten</button>
        </div>
        <p class="text-sm text-text-primary font-semibold" data-summary-schedule></p>
      </div>

      <div class="bg-white rounded-xl border border-primary-200 p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="text-xs font-semibold uppercase tracking-wide text-text-secondary">Persönliche Daten</p>
          <button type="button" class="text-xs font-semibold text-accent-500 hover:text-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm" data-action="click->wizard#jumpToStep" data-index="3">Bearbeiten</button>
        </div>
        <div class="space-y-1">
          <p class="text-sm text-text-primary font-semibold" data-summary-name></p>
          <p class="text-sm text-text-secondary" data-summary-email></p>
          <p class="text-sm text-text-secondary" data-summary-phone></p>
        </div>
      </div>
      </div>

      <div class="flex items-center justify-between p-3 bg-accent-50 rounded-xl border border-accent-200">
        <span class="text-sm font-medium text-text-secondary">Preis:</span>
        <span class="text-sm text-accent-500 font-semibold" data-summary-price></span>
      </div>
    </div>
  </div>

  <div class="relative rounded-xl border border-primary-200 bg-white p-4 transition-colors focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent-500" data-field-container>
    <label class="block text-sm font-medium text-text-secondary mb-2" for="trial_booking_notes">Anmerkungen (optional)</label>
    <textarea class="w-full p-0 border-0 bg-transparent focus:outline-none text-text-primary placeholder:text-primary-400" placeholder="Hast du Wünsche oder Fragen?" rows="3" name="trial_booking[notes]" id="trial_booking_notes">
</textarea>
  </div>


  <div class="text-center text-xs text-text-secondary">
    Mit der Bestätigung stimmst du unseren Geschäftsbedingungen zu.
  </div>
</div>

          </section>
        </div>
      </div>
        <div data-scroll-fade-target="bottomFade" class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16 bg-gradient-to-t from-white via-white/95 to-transparent opacity-0 transition-opacity duration-200" aria-hidden="true"></div>
      </div>

      <!-- Footer -->
      <div class="border-t border-primary-200 p-4 md:p-6 bg-white flex-shrink-0" data-wizard-footer>
        <div class="w-full max-w-4xl mx-auto space-y-2">
          <div class="flex gap-3 w-full">
            <button type="button" class="btn-secondary-lg hidden w-full flex-1" data-wizard-back data-action="click->wizard#back">
              <span>Zurück</span>
            </button>
            <button type="button" class="btn-accent opacity-50 cursor-not-allowed w-full flex-1" data-wizard-next data-action="click->wizard#next" disabled>
              <span>Weiter</span>
            </button>
            <input type="submit" name="commit" value="Anfrage senden" class="btn-accent hidden w-full flex-1" data-wizard-submit="true" data-disable-with="Anfrage senden" />
          </div>
            <p class="text-xs text-text-secondary text-center hidden" data-wizard-next-hint>Bitte vervollständige diesen Schritt, um fortzufahren.</p>
        </div>
      </div>
</form>    </div>
  </div>
</div>

</template></turbo-stream>