<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;:1766,&quot;studio_name&quot;:&quot;Lemovi sports&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">Lemovi sports</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">
              10,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">8 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">
              Keine
            </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">Aggregatoren Mitgliedschaft (Hansefit usw.)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           10,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">
                        10,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">
                        -
                      </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">Nur für Nutzung von Reformer Pilates, monatlich kündbar</span>
                        <span data-collapsible-target="content" class="hidden">Nur für Nutzung von Reformer Pilates, monatlich kündbar</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">LemoviREHA (12 Monate)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           19,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">
                        19,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">
                        -
                      </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">Maximal 15 Teilnehmer, Nutzung der gesamten Landkurse (max. 4 Kurse pro Woche...</span>
                        <span data-collapsible-target="content" class="hidden">Maximal 15 Teilnehmer, Nutzung der gesamten Landkurse (max. 4 Kurse pro Woche), Nutzung des Fitnessstudios im 1.OG, Erweiterte Gerätenutzung, Individuelle Betreuung, Feedbackgespräche mit einem unserer Gesundheitsexperten</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">Lemovi Basic (24 Monate)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           29,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">
                        29,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">
                        -
                      </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">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke...</span>
                        <span data-collapsible-target="content" class="hidden">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke kostenlos (Wasser &amp; Tee), Vertrag nicht übertragbar</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">Lemovi Basic (12 Monate)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           34,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">
                        34,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">
                        -
                      </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">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke...</span>
                        <span data-collapsible-target="content" class="hidden">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke kostenlos (Wasser &amp; Tee), Vertrag nicht übertragbar</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">Lemovi Basic (3 Monate)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           44,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">
                        44,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">
                        -
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">3 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">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke...</span>
                        <span data-collapsible-target="content" class="hidden">Max. 4x Kurse pro Woche Land (exkl. Reformer), Gerätetraining inkl., Getränke kostenlos (Wasser &amp; Tee), Vertrag nicht übertragbar</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">Reformer Pilates Basic (1x/Woche, 6 Monate)</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">
                        -
                      </div>
                    </div>
                    <div class="text-center">
                      <div class="text-xs text-text-secondary mb-1">Laufzeit</div>
                      <div class="font-semibold text-text-primary">6 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">1x Reformer Kurs/Woche, Lemovi Flex inklusive (Fitnessstudio und Kursangebote...</span>
                        <span data-collapsible-target="content" class="hidden">1x Reformer Kurs/Woche, Lemovi Flex inklusive (Fitnessstudio und Kursangebote an Land), Getränke kostenlos (Wasser &amp; Tee), Vertrag nicht übertragbar</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">AktivPLUS (12 Monate)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           129,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">
                        129,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">
                        -
                      </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">Beinhaltet ein Beratungsgespräch (Buchung auf Anfrage), Kurse nur über unsere...</span>
                        <span data-collapsible-target="content" class="hidden">Beinhaltet ein Beratungsgespräch (Buchung auf Anfrage), Kurse nur über unsere App buchbar (Plätze nach Verfügbarkeit), Max. 4x Kurse pro Woche Wasser oder 4x Reformer Pilates, Max. 4x Kurse pro Woche Land, Lemovi Geräte inkl., Freunde-Option: einmal im Monat einen Freund oder Bekannten mitbringen (nur für Nicht-Kunden), Inkl. Reformer Pilates, Vertrag nicht übertragbar</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">AktivPLUS (1 Monat)</h5>
                    </div>
                    <div class="sm:text-right sm:ml-6">
                         <div class="text-2xl sm:text-4xl font-bold text-text-primary">
                           149,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">
                        149,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">
                        -
                      </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">Beinhaltet ein Beratungsgespräch (Buchung auf Anfrage), Kurse nur über unsere...</span>
                        <span data-collapsible-target="content" class="hidden">Beinhaltet ein Beratungsgespräch (Buchung auf Anfrage), Kurse nur über unsere App buchbar (Plätze nach Verfügbarkeit), Max. 4x Kurse pro Woche Wasser oder 4x Reformer Pilates, Max. 4x Kurse pro Woche Land, Lemovi Geräte inkl., Freunde-Option: einmal im Monat einen Freund oder Bekannten mitbringen (nur für Nicht-Kunden), Inkl. Reformer Pilates, Vertrag nicht übertragbar</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>
          </div>

        <!-- prepaid Passes -->


        <!-- 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">Monatsbeitrag ab Platinum-Paket: 104,99€ (nicht als Tarif aufgeführt, möglicherweise zusätzliche Option)</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;:1766}" href="/gym/lemovi-sports-greven/trial_bookings/new?from_modal=tariff">Probetraining</a>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

</template></turbo-stream>