<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#closeOnEscape pointerdown->modal#trackBackdropPointerDown click->modal#closeOnBackdrop" data-trial-price="0" data-restricted="false" data-modal-target="overlay" data-modal-handoff="false" class="fixed inset-0 z-[70] flex items-end justify-center bg-primary-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-float md:rounded-3xl 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 shrink-0 items-center justify-center bg-cream pt-2 pb-1" data-modal-drag-handle>
      <span class="h-1 w-12 rounded-full bg-primary-300" aria-hidden="true"></span>
    </div>
    <div class="flex flex-col min-h-0 flex-1" data-modal-sheet-content>
    <!-- Header -->
    <div class="shrink-0 border-b border-cream-line bg-cream px-4 pt-3 pb-4 md:p-6">
      <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="type-card-title leading-tight break-words">Aquacycling Krefeld</h2>
          <p id="trial-booking-subtitle" class="type-meta mt-1">Probetraining anfragen</p>
        </div>
        <button data-action="click->modal#close" class="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-white text-text-primary shadow-[0_1px_2px_rgb(42_38_34/0.08)] ring-1 ring-cream-line transition-colors hover:bg-primary-100 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-800" aria-label="Schließen">
          <svg class="size-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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/aquacycling-krefeld/trial_bookings" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="RCURUCgJpCREBFHNiqdFaQgURBwEcEW9zVFdIdtt_hgAo2KH4luUDBfWFSubGPxmkCNCTWbJQbP7wG8TASsegg" 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-xl px-2 py-1.5 text-left transition-colors"
                      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-xl px-2 py-1.5 text-left transition-colors"
                      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-xl px-2 py-1.5 text-left transition-colors"
                      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-xl px-2 py-1.5 text-left transition-colors"
                      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-xl px-2 py-1.5 text-left transition-colors"
                      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="type-section text-center px-4">Wie möchtest du trainieren?</h2>
  <p class="type-body 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-800 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:border-primary-300 peer-checked:border-accent-800 peer-checked:bg-accent-50/40 transition-colors duration-150 relative min-h-42.5" data-wizard-option-card>
        <span class="shrink-0 inline-flex w-6 h-6 text-transparent peer-checked:text-accent-800 items-center justify-center absolute top-4 right-4" data-wizard-option-check>
          <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
        </span>
        <div class="w-12 h-12 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
          <svg width="16" height="16" aria-hidden="true" class="w-5 h-5 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20 21.0001C19.713 17.269 16.7289 14.3151 12.995 14.0662L12 13.9999C11.6446 14.0096 11.3134 14.0225 11.0008 14.0378C7.3 14.2192 4.28417 17.3057 4 21.0001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><circle cx="12" cy="6.99988" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
        </div>
        <div class="text-center flex-1">
          <div class="type-card-title 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-800 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:border-primary-300 peer-checked:border-accent-800 peer-checked:bg-accent-50/40 transition-colors duration-150 relative min-h-42.5" data-wizard-option-card>
        <span class="shrink-0 inline-flex w-6 h-6 text-transparent peer-checked:text-accent-800 items-center justify-center absolute top-4 right-4" data-wizard-option-check>
          <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
        </span>
        <div class="w-12 h-12 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
          <svg width="16" height="16" aria-hidden="true" class="w-5 h-5 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M18.4995 20.5C18.2663 17.5685 15.8417 15.2477 12.808 15.0521L11.9995 15C11.7107 15.0076 11.4416 15.0178 11.1877 15.0298C8.18075 15.1723 5.7304 17.5974 5.49951 20.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M15.2495 9.25C15.2495 11.0449 13.7944 12.5 11.9995 12.5C10.2046 12.5 8.74952 11.0449 8.74952 9.25C8.74952 7.45507 10.2046 6 11.9995 6C13.7944 6 15.2495 7.45507 15.2495 9.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M5.50249 8.5C5.17908 7.99485 4.99158 7.39432 4.99158 6.75C4.99158 4.95507 6.44665 3.5 8.24157 3.5C8.68752 3.5 9.1125 3.58982 9.49939 3.75235" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M18.4963 8.5C18.8197 7.99485 19.0072 7.39432 19.0072 6.75C19.0072 4.95507 17.5521 3.5 15.7572 3.5C15.3113 3.5 14.8863 3.58982 14.4994 3.75235" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M22.0007 17.9996C21.8208 15.7374 19.9995 13.5 17.9995 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M1.99927 17.9996C2.17923 15.7374 4.00049 13.5 6.00049 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
        </div>
        <div class="text-center flex-1">
          <div class="type-card-title 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="type-section text-center px-4">Was ist dein Trainingsziel?</h2>
  <p class="type-body 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg class="w-4 h-4 text-text-secondary" 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="type-card-title 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg width="16" height="16" aria-hidden="true" class="w-4 h-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5.22576 11.3294L12.224 2.34651C12.7713 1.64397 13.7972 2.08124 13.7972 3.01707V9.96994C13.7972 10.5305 14.1995 10.985 14.6958 10.985H18.0996C18.8729 10.985 19.2851 12.0149 18.7742 12.6706L11.776 21.6535C11.2287 22.356 10.2028 21.9188 10.2028 20.9829V14.0301C10.2028 13.4695 9.80048 13.015 9.3042 13.015H5.90035C5.12711 13.015 4.71494 11.9851 5.22576 11.3294Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </div>
          <div class="text-center flex-1">
            <div class="type-card-title 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg width="16" height="16" aria-hidden="true" class="w-4 h-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M10.4107 19.9677C7.58942 17.858 2 13.0348 2 8.69444C2 5.82563 4.10526 3.5 7 3.5C8.5 3.5 10 4 12 6C14 4 15.5 3.5 17 3.5C19.8947 3.5 22 5.82563 22 8.69444C22 13.0348 16.4106 17.858 13.5893 19.9677C12.6399 20.6776 11.3601 20.6776 10.4107 19.9677Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </div>
          <div class="text-center flex-1">
            <div class="type-card-title 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg width="16" height="16" aria-hidden="true" class="w-4 h-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M13.8561 22C26.0783 19 19.2338 7 10.9227 2C9.9453 5.5 8.47838 6.5 5.54497 10C1.66121 14.6339 3.5895 20 8.96719 22C8.1524 21 6.04958 18.9008 7.5 16C8 15 9 14 8.5 12C9.47778 12.5 11.5 13 12 15.5C12.8148 14.5 13.6604 12.4 12.8783 10C19 14.5 16.5 19 13.8561 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </div>
          <div class="text-center flex-1">
            <div class="type-card-title 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg width="16" height="16" aria-hidden="true" class="w-4 h-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M15 2L15.5387 4.39157C15.9957 6.42015 17.5798 8.00431 19.6084 8.46127L22 9L19.6084 9.53873C17.5798 9.99569 15.9957 11.5798 15.5387 13.6084L15 16L14.4613 13.6084C14.0043 11.5798 12.4202 9.99569 10.3916 9.53873L8 9L10.3916 8.46127C12.4201 8.00431 14.0043 6.42015 14.4613 4.39158L15 2Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"/><path d="M7 12L7.38481 13.7083C7.71121 15.1572 8.84275 16.2888 10.2917 16.6152L12 17L10.2917 17.3848C8.84275 17.7112 7.71121 18.8427 7.38481 20.2917L7 22L6.61519 20.2917C6.28879 18.8427 5.15725 17.7112 3.70827 17.3848L2 17L3.70827 16.6152C5.15725 16.2888 6.28879 15.1573 6.61519 13.7083L7 12Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </div>
          <div class="text-center flex-1">
            <div class="type-card-title 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-800 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:border-primary-300 transition-colors duration-150 relative goal-card min-h-40">
          <span class="shrink-0 inline-flex w-6 h-6 items-center justify-center absolute top-4 right-4 text-accent-800 opacity-0 goal-checkmark">
            <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </span>
          <div class="w-10 h-10 rounded-full bg-cream ring-1 ring-cream-line flex items-center justify-center mt-2">
            <svg width="16" height="16" aria-hidden="true" class="w-4 h-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M18.7088 3.49534C16.8165 2.55382 14.5009 2 12 2C9.4991 2 7.1835 2.55382 5.29116 3.49534C4.36318 3.95706 3.89919 4.18792 3.4496 4.91378C3 5.63965 3 6.34248 3 7.74814V11.2371C3 16.9205 7.54236 20.0804 10.173 21.4338C10.9067 21.8113 11.2735 22 12 22C12.7265 22 13.0933 21.8113 13.8269 21.4338C16.4576 20.0804 21 16.9205 21 11.2371L21 7.74814C21 6.34249 21 5.63966 20.5504 4.91378C20.1008 4.18791 19.6368 3.95706 18.7088 3.49534Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
          </div>
          <div class="text-center flex-1">
            <div class="type-card-title 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;:[]}" data-trial-booking-notice-hours="72">
  <h2 class="type-section text-center">Wann hast du Zeit?</h2>
  <p class="type-body 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="type-card-title 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-800 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-09-27" value="2026-09-27" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-09-27" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:border-primary-300 transition-colors duration-150 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-800 opacity-0 day-checkmark">
                   <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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">27.09</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-800 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-09-28" value="2026-09-28" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-09-28" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:border-primary-300 transition-colors duration-150 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-800 opacity-0 day-checkmark">
                   <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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">28.09</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-800 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-09-29" value="2026-09-29" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-09-29" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:border-primary-300 transition-colors duration-150 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-800 opacity-0 day-checkmark">
                   <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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">29.09</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-800 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-09-30" value="2026-09-30" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-09-30" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:border-primary-300 transition-colors duration-150 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-800 opacity-0 day-checkmark">
                   <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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">30.09</div>
                     </div>
                   </div>
               </div>
             </label>
             <label class="cursor-pointer block rounded-xl focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-800 focus-within:ring-offset-2" data-schedule-selector-target="dayOption">
               <input type="radio" name="_day_tmp" id="_day_tmp_2026-10-01" value="2026-10-01" class="sr-only" data-action="change-&gt;schedule-selector#selectDay" data-date="2026-10-01" />
               <div class="relative p-4 rounded-xl border border-primary-200 bg-white hover:border-primary-300 transition-colors duration-150 day-card">
                 <span class="absolute top-3 right-3 inline-flex w-5 h-5 items-center justify-center text-accent-800 opacity-0 day-checkmark">
                   <svg width="16" height="16" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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">01.10</div>
                     </div>
                   </div>
               </div>
             </label>
       </div>
    </div>

    <!-- Time Selection -->
    <div data-schedule-selector-target="timeSection" class="pointer-events-none">
      <h3 class="type-card-title 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 ring-1 ring-cream-line text-center text-text-secondary bg-cream">
          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="type-section text-center">Persönliche Daten</h2>
  <p class="type-body 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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800" 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 width="16" height="16" aria-hidden="true" class="w-4 h-4 text-accent-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 14L8.5 17.5L19 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></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-800 focus:ring-2 focus:ring-accent-800 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-800 focus:ring-2 focus:ring-accent-800 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="type-section">Bestätigung</h2>
    <p class="type-body mt-3">Bitte überprüfe deine Angaben und bestätige deine Buchung.</p>
  </div>

  <div>
    <h3 class="type-card-title 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-2xl ring-1 ring-cream-line p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="type-meta font-semibold">Training</p>
          <button type="button" class="type-link -my-3 inline-flex min-h-11 items-center text-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-2xl ring-1 ring-cream-line p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="type-meta font-semibold">Ziel</p>
          <button type="button" class="type-link -my-3 inline-flex min-h-11 items-center text-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-2xl ring-1 ring-cream-line p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="type-meta font-semibold">Termin</p>
          <button type="button" class="type-link -my-3 inline-flex min-h-11 items-center text-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-2xl ring-1 ring-cream-line p-3">
        <div class="flex items-center justify-between gap-3 mb-2">
          <p class="type-meta font-semibold">Persönliche Daten</p>
          <button type="button" class="type-link -my-3 inline-flex min-h-11 items-center text-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-cream rounded-2xl ring-1 ring-cream-line">
        <span class="text-sm font-medium text-text-secondary">Preis:</span>
        <span class="text-sm text-text-primary 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-800" 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 <a target="_blank" rel="noopener noreferrer" class="link-accent" data-action="click-&gt;wizard#stopEvent" href="/agb">AGB</a> 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="inline-flex min-h-12 items-center justify-center gap-2 rounded-xl bg-cream px-5 py-3 text-base font-semibold text-text-primary ring-1 ring-cream-line transition-colors hover:bg-primary-100 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-800 focus-visible:ring-offset-2 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>