<turbo-stream action="append" target="modals-container"><template>
  <div id="tariff-modal" data-controller="modal analytics" data-action="keydown.esc->modal#close click->modal#closeOnBackdrop" data-modal-target="overlay" class="fixed inset-0 z-[70] flex items-end md:items-center justify-center md:py-0 bg-neutral-950/65 backdrop-blur-[3px] opacity-0" role="dialog" aria-modal="true" aria-labelledby="tariff-modal-title" aria-describedby="tariff-modal-subtitle"
     data-analytics-trigger="load"
     data-analytics-event="tariff_modal_viewed"
     data-analytics-params="{&quot;studio_id&quot;:1235,&quot;studio_name&quot;:&quot;fitZone&quot;}">
  <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-primary-300" aria-hidden="true"></span>
    </div>
    <div class="flex flex-col min-h-0 flex-1" data-modal-sheet-content>
    <!-- Modal Header - Fixed -->
    <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="tariff-modal-title" class="text-2xl font-bold leading-tight break-words text-text-primary">fitZone</h2>
          <p id="tariff-modal-subtitle" class="text-sm text-text-secondary mt-1">Tarife</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 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>

    <!-- Modal Body - Scrollable -->
    <div class="relative flex-1 min-h-0" data-controller="scroll-fade">
      <div class="h-full overflow-y-auto" data-scroll-fade-target="viewport" data-action="scroll->scroll-fade#update">
      <div class="p-4 md:p-6">
       <div class="space-y-7">

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div class="rounded-xl border border-primary-200 bg-primary-50 p-4">
            <p class="text-xs text-text-secondary mb-1">Günstigster Beitrag</p>
            <p class="text-base font-semibold text-text-primary">
              30,00 € / Monat
            </p>
          </div>
          <div class="rounded-xl border border-primary-200 bg-primary-50 p-4">
            <p class="text-xs text-text-secondary mb-1">Mitgliedschaften</p>
            <p class="text-base font-semibold text-text-primary">5 verfügbar</p>
          </div>
          <div class="rounded-xl border border-primary-200 bg-primary-50 p-4">
            <p class="text-xs text-text-secondary mb-1">Pass-Angebote</p>
            <p class="text-base font-semibold text-text-primary">
              1 verfügbar
            </p>
          </div>
        </div>

         <!-- Subscription Tariffs -->
          <div>
            <h3 class="text-2xl font-bold text-text-primary mb-4">Mitgliedschaften</h3>
            <div class="grid gap-6">
                <div class="bg-white rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200 border-2 border-accent-500">
                    <!-- Badge for most popular option -->
                    <div class="inline-block bg-primary-900 text-white px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide mb-4">
                      Beliebteste Option
                    </div>
                  
                  <!-- Tariff Header -->
                  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 sm:mb-6">
                    <div class="mb-2 sm:mb-0 sm:flex-1">
                      <h5 class="text-lg sm:text-xl font-bold text-text-primary">Schüler-/Studententarif (12 Monate Laufzeit)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           30,00 €
                           <span class="text-sm font-normal text-text-secondary sm:hidden">/ Monat</span>
                         </div>
                        <div class="text-sm text-text-secondary hidden sm:block">pro Monat</div>
                    </div>
                  </div>

                  <!-- Pricing Details -->
                  <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4 sm:mb-6 p-3 sm:p-5 bg-primary-50 rounded-xl border border-primary-200">
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Monatsbeitrag</div>
                      <div class="font-semibold text-text-primary">
                        30,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Anmeldegebühr</div>
                      <div class="font-semibold text-text-primary">
                        0,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">12 Monate</div>
                    </div>
                  </div>

                  <!-- Tariff Description -->
                    <div class="mb-4"
                         data-controller="collapsible"
                         data-collapsible-open-text-value="weniger anzeigen"
                         data-collapsible-closed-text-value="mehr anzeigen">
                      <p class="text-sm text-text-secondary">
                        <span data-collapsible-target="closedContent">Gilt nur bis zum 25. Lebensjahr, jährlicher Nachweis erforderlich. Keine Aufn...</span>
                        <span data-collapsible-target="content" class="hidden">Gilt nur bis zum 25. Lebensjahr, jährlicher Nachweis erforderlich. Keine Aufnahmegebühr. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                          <button type="button"
                                  class="text-text-secondary hover:text-text-primary underline ml-1 font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm"
                                  data-action="click->collapsible#toggle"
                                  data-collapsible-target="label"
                                  aria-expanded="false">
                            mehr anzeigen
                          </button>
                      </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200 border border-primary-200">
                  
                  <!-- Tariff Header -->
                  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 sm:mb-6">
                    <div class="mb-2 sm:mb-0 sm:flex-1">
                      <h5 class="text-lg sm:text-xl font-bold text-text-primary">Monatstarif (24 Monate Laufzeit)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           45,00 €
                           <span class="text-sm font-normal text-text-secondary sm:hidden">/ Monat</span>
                         </div>
                        <div class="text-sm text-text-secondary hidden sm:block">pro Monat</div>
                    </div>
                  </div>

                  <!-- Pricing Details -->
                  <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4 sm:mb-6 p-3 sm:p-5 bg-primary-50 rounded-xl border border-primary-200">
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Monatsbeitrag</div>
                      <div class="font-semibold text-text-primary">
                        45,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Anmeldegebühr</div>
                      <div class="font-semibold text-text-primary">
                        0,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">24 Monate</div>
                    </div>
                  </div>

                  <!-- Tariff Description -->
                    <div class="mb-4"
                         data-controller="collapsible"
                         data-collapsible-open-text-value="weniger anzeigen"
                         data-collapsible-closed-text-value="mehr anzeigen">
                      <p class="text-sm text-text-secondary">
                        <span data-collapsible-target="closedContent">Keine Aufnahmegebühr. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                        <span data-collapsible-target="content" class="hidden">Keine Aufnahmegebühr. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                      </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200 border border-primary-200">
                  
                  <!-- Tariff Header -->
                  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 sm:mb-6">
                    <div class="mb-2 sm:mb-0 sm:flex-1">
                      <h5 class="text-lg sm:text-xl font-bold text-text-primary">Monatstarif (12 Monate Laufzeit)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           49,00 €
                           <span class="text-sm font-normal text-text-secondary sm:hidden">/ Monat</span>
                         </div>
                        <div class="text-sm text-text-secondary hidden sm:block">pro Monat</div>
                    </div>
                  </div>

                  <!-- Pricing Details -->
                  <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4 sm:mb-6 p-3 sm:p-5 bg-primary-50 rounded-xl border border-primary-200">
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Monatsbeitrag</div>
                      <div class="font-semibold text-text-primary">
                        49,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Anmeldegebühr</div>
                      <div class="font-semibold text-text-primary">
                        0,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">12 Monate</div>
                    </div>
                  </div>

                  <!-- Tariff Description -->
                    <div class="mb-4"
                         data-controller="collapsible"
                         data-collapsible-open-text-value="weniger anzeigen"
                         data-collapsible-closed-text-value="mehr anzeigen">
                      <p class="text-sm text-text-secondary">
                        <span data-collapsible-target="closedContent">Keine Aufnahmegebühr. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                        <span data-collapsible-target="content" class="hidden">Keine Aufnahmegebühr. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                      </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200 border border-primary-200">
                  
                  <!-- Tariff Header -->
                  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 sm:mb-6">
                    <div class="mb-2 sm:mb-0 sm:flex-1">
                      <h5 class="text-lg sm:text-xl font-bold text-text-primary">Premium-Mitgliedschaft (Jahrestarif)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           59,90 €
                           <span class="text-sm font-normal text-text-secondary sm:hidden">/ Monat</span>
                         </div>
                        <div class="text-sm text-text-secondary hidden sm:block">pro Monat</div>
                    </div>
                  </div>

                  <!-- Pricing Details -->
                  <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4 sm:mb-6 p-3 sm:p-5 bg-primary-50 rounded-xl border border-primary-200">
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Monatsbeitrag</div>
                      <div class="font-semibold text-text-primary">
                        59,90 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Anmeldegebühr</div>
                      <div class="font-semibold text-text-primary">
                        129,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">12 Monate</div>
                    </div>
                  </div>

                  <!-- Tariff Description -->
                    <div class="mb-4"
                         data-controller="collapsible"
                         data-collapsible-open-text-value="weniger anzeigen"
                         data-collapsible-closed-text-value="mehr anzeigen">
                      <p class="text-sm text-text-secondary">
                        <span data-collapsible-target="closedContent">Automatische Verlängerung auf unbestimmte Zeit bei Nichtkündigung. Kündigungs...</span>
                        <span data-collapsible-target="content" class="hidden">Automatische Verlängerung auf unbestimmte Zeit bei Nichtkündigung. Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                          <button type="button"
                                  class="text-text-secondary hover:text-text-primary underline ml-1 font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 rounded-sm"
                                  data-action="click->collapsible#toggle"
                                  data-collapsible-target="label"
                                  aria-expanded="false">
                            mehr anzeigen
                          </button>
                      </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200 border border-primary-200">
                  
                  <!-- Tariff Header -->
                  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 sm:mb-6">
                    <div class="mb-2 sm:mb-0 sm:flex-1">
                      <h5 class="text-lg sm:text-xl font-bold text-text-primary">Premium-Mitgliedschaft (Monatstarif)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           69,90 €
                           <span class="text-sm font-normal text-text-secondary sm:hidden">/ Monat</span>
                         </div>
                        <div class="text-sm text-text-secondary hidden sm:block">pro Monat</div>
                    </div>
                  </div>

                  <!-- Pricing Details -->
                  <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4 sm:mb-6 p-3 sm:p-5 bg-primary-50 rounded-xl border border-primary-200">
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Monatsbeitrag</div>
                      <div class="font-semibold text-text-primary">
                        69,90 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Anmeldegebühr</div>
                      <div class="font-semibold text-text-primary">
                        129,00 €
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">1 Monat</div>
                    </div>
                  </div>

                  <!-- Tariff Description -->
                    <div class="mb-4"
                         data-controller="collapsible"
                         data-collapsible-open-text-value="weniger anzeigen"
                         data-collapsible-closed-text-value="mehr anzeigen">
                      <p class="text-sm text-text-secondary">
                        <span data-collapsible-target="closedContent">Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                        <span data-collapsible-target="content" class="hidden">Kündigungsfrist: 1 Monat vor Vertragsende (Textform).</span>
                      </p>
                    </div>
                </div>
            </div>
          </div>

        <!-- prepaid Passes -->
          <div>
            <h3 class="text-2xl font-bold text-text-primary mb-4">Pass</h3>
            <div class="grid grid-cols-1 gap-6">
                 <div class="bg-white border border-primary-200 rounded-xl p-4 sm:p-7 hover:shadow-md transition-all duration-200">
                   <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4">
                     <div class="mb-2 sm:mb-0 sm:flex-1">
                       <h5 class="text-lg sm:text-xl font-bold text-text-primary">10er-Karte</h5>
                     </div>
                     <div class="sm:text-right sm:ml-6">
                          <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                            100,00 €
                            <span class="text-sm font-normal text-text-secondary sm:hidden">einmalig</span>
                          </div>
                         <div class="text-sm text-text-secondary hidden sm:block">einmalig</div>
                     </div>
                   </div>

                   <!-- Tariff Description -->
                     <div class="mb-4"
                          data-controller="collapsible"
                          data-collapsible-open-text-value="weniger"
                          data-collapsible-closed-text-value="... mehr">
                       <p class="text-sm text-text-secondary leading-relaxed">
                         <span data-collapsible-target="closedContent">Einmalige Zahlung.</span>
                         <span data-collapsible-target="content" class="hidden">Einmalige Zahlung.</span>
                       </p>
                     </div>
                   

                </div>
            </div>
          </div>


        <!-- Price Notes -->
          <div class="mt-8 pt-6 border-t border-primary-200">
            <div class="text-xs text-left leading-snug text-text-secondary">
              <p class="mb-0">Einmalige Start-Up Gebühr von 129,00 € zu Beginn der Mitgliedschaft. Service- und Betreuungsgebühr halbjährlich fällig. Sauna, Kurse und Getränkeflat sind nicht im Basispreis enthalten. Rabatte für Schüler, Studenten, Auszubildende, Familien und Senioren. Training auf Rezept (Rehasport) mit Kostenübernahme durch Krankenkassen. Gesundheitskurse mit bis zu 80% Förderung durch gesetzliche Krankenkassen.</p>
            </div>
          </div>
      </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>
    
    <!-- Modal Footer - Fixed -->
    <div class="border-t border-primary-200 p-4 md:p-6 bg-white flex-shrink-0">
      <div class="w-full max-w-4xl mx-auto">
        <div class="flex flex-col md:flex-row items-stretch gap-3 w-full">
          <button type="button" data-action="click->modal#close" class="btn-secondary-lg w-full md:flex-1">Schließen</button>
            <a class="btn-accent w-full md:flex-1" data-turbo-stream="true" data-controller="analytics" data-action="click-&gt;analytics#track" data-analytics-event="book_trial_clicked" data-analytics-params="{&quot;studio_id&quot;:1235}" href="/gym/fitzone-prum/trial_bookings/new?from_modal=tariff">Probetraining</a>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

</template></turbo-stream>