  <turbo-stream action="replace" target="product-configurator">
    <template>
        <div data-controller="configurators" data-url="/produkte/tshirt" id="product-configurator">
    <div class="form-container">
  <form data-configurators-target="form" action="/produkte/tshirt" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="6xPsJ75xdjn96qV3exnJsFVJMpFWird3UgMcXFapFsUchxfPHnoZ19yIBq7qwS7FFtfDJeVeWTfjiG0lf_d4wA" autocomplete="off" />
    
          <div class="form-group  ">
  <input class="" as="hidden" data-key="package" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[package]" id="config_package" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="quality" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[quality]" id="config_quality" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="color" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[color]" id="config_color" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_s" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_s]" id="config_size_s" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_m" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_m]" id="config_size_m" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_l" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_l]" id="config_size_l" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_xl" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_xl]" id="config_size_xl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_xxl" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_xxl]" id="config_size_xxl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" value="0" data-key="size_3xl" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[size_3xl]" id="config_size_3xl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="print_file_front" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[print_file_front]" id="config_print_file_front" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="print_file_back" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[print_file_back]" id="config_print_file_back" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="mockup" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[mockup]" id="config_mockup" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="check" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[check]" id="config_check" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="creation" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[creation]" id="config_creation" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="express" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[express]" id="config_express" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" data-key="comment" data-configurators-target="forminput" autocomplete="off" type="hidden" name="config[comment]" id="config_comment" />

</div>


</form></div>
    <div class="configurator" id="configurator">
        <div class="space-y-4 sm:space-y-6 divide-y">
            <div class="step" id="step-package">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Wähle deine Paketgröße</span>
  </h4>

  <div class="parameters">
      <div id="parameter-package" class="parameter option  col-md-4"
     data-configurators-target="parameter"
     data-key="package"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Paketgröße</span>
    </h4>
  </div>
      <div class="option-parameter ">
    <div
  data-action="click->configurators#selectOption"
  data-key="package"
  data-value="10"
  class="option group not-selected"
  id="option-package-10">
  <div class="option-content">
    <span class="option-title">10 Stück</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="package"
  data-value="25"
  class="option group not-selected"
  id="option-package-25">
  <div class="option-content">
    <span class="option-title">25 Stück</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="package"
  data-value="50"
  class="option group not-selected"
  id="option-package-50">
  <div class="option-content">
    <span class="option-title">50 Stück</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="package"
  data-value="100"
  class="option group not-selected"
  id="option-package-100">
  <div class="option-content">
    <span class="option-title">100 Stück</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="package"
  data-value="200"
  class="option group not-selected"
  id="option-package-200">
  <div class="option-content">
    <span class="option-title">200 Stück</span>
    


  </div>
</div>

</div>

</div>

  </div>
</div>

            <div class="step" id="step-quality">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Wähle deine Stoffqualität</span>
  </h4>

  <div class="parameters">
      <div id="parameter-quality" class="parameter option  col-md-2"
     data-configurators-target="parameter"
     data-key="quality"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Stoffqualität</span>
    </h4>
  </div>
      <div class="option-parameter ">
    <div
  data-action="click->configurators#selectOption"
  data-key="quality"
  data-value="budget-30"
  class="option group not-selected"
  id="option-quality-budget-30">
  <div class="option-content">
    <span class="option-title">Budget 30°C</span>
    <span class="option-subtitle">günstiges Einstiegsprodukt</span>

      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639100&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639100"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Budget 30°C
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_48">
      <p class="">
  Unser günstiges Einstiegsprodukt bei dem es vor allem auf den Preis ankommt. Zum Einsatz kommen hier - je nach Verfügbarkeit - Textilien der Marken Fruit of the Loom, SOLs oder Gildan. Diese Shirts haben eine Waschbarkeit von 30°C und sind in der Regel Schlauchwarenausführung. 100% Baumwolle, Rundhals.
</p>

</div>





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

    <span class="mt-1 text-sm font-medium text-gray-900 price">
          <small>+ 130,00 €</small>

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

    <div
  data-action="click->configurators#selectOption"
  data-key="quality"
  data-value="bestseller-30"
  class="option group not-selected"
  id="option-quality-bestseller-30">
  <div class="option-content">
    <span class="option-title">Bestseller 30°C</span>
    <span class="option-subtitle">bestes Preis-/ Leistungsverhältnis</span>

      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639140&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639140"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Bestseller 30°C
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_50">
      <p class="">
  Unser Bestseller Produkt besticht durch sein hervorragendes Preis/Leistungsverhältnis und eignet sich für eine Vielzahl von Anwendungsfällen. Egal ob Promoware oder günstige Arbeitsbekleidung mit leichter Nutzung. Hier machst du garantiert nichts falsch! 100% Baumwolle, Rundhals.&nbsp;
</p>

</div>





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

    <span class="mt-1 text-sm font-medium text-gray-900 price">
          <small>+ 145,00 €</small>

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

    <div
  data-action="click->configurators#selectOption"
  data-key="quality"
  data-value="premium-60"
  class="option group not-selected"
  id="option-quality-premium-60">
  <div class="option-content">
    <span class="option-title">Premium 60°C</span>
    <span class="option-subtitle">hohe Waschbarkeit,<br />schöner Griff</span>

      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639160&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639160"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Premium 60°C
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_52">
      <p class="">
  Unser Premiumprodukt mit 60°C Waschbarkeit - Ideal für Arbeitsbekleidung oder stark und häufig beanspruchte Einsatzzwecke. Wir setzen hier in der Regel auf Produkte von Promodoro, diese sind Einlaufvorbehandelt und haben einen modernen Schnitt und einen überaus tollen Griff. Material 100 % Baumwolle, 180 g/m², Öko-Tex 100 Zertifizierung, Rundhals.&nbsp;
</p>

</div>





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

    <span class="mt-1 text-sm font-medium text-gray-900 price">
          <small>+ 170,00 €</small>

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

    <div
  data-action="click->configurators#selectOption"
  data-key="quality"
  data-value="bio-30"
  class="option group not-selected"
  id="option-quality-bio-30">
  <div class="option-content">
    <span class="option-title">Bio &amp; Fairtrade 30°C</span>
    <span class="option-subtitle">nachhaltiges Produkt in Bio-Qualität</span>

      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639180&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639180"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Bio &amp; Fairtrade 30°C
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_11">
      <p class="">
  Unser nachhaltiges Produkt: Fairtrade-zertifizierte Bio-Baumwolle, T-Shirt stammt aus fairen Arbeitsbedingungen. Öko-Tex und EU Ecolabel Zertifikat. Rundhals, 100% Biobaumwolle.&nbsp;
</p>

</div>





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

    <span class="mt-1 text-sm font-medium text-gray-900 price">
          <small>+ 195,00 €</small>

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

</div>

</div>

  </div>
</div>

            <div class="step" id="step-color">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Wähle deine Textilfarbe</span>
  </h4>

  <div class="parameters">
      <div id="parameter-color" class="parameter option  col-md-6"
     data-configurators-target="parameter"
     data-key="color"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Textilfarbe</span>
    </h4>
  </div>
      <div class="option-parameter ">
    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="weiss"
  class="option group not-selected has-color"
  id="option-color-weiss">
    <div class="color-swatch" style="background-color:#FFFFFF"></div>
  <div class="option-content">
    <span class="option-title">weiß</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="schwarz"
  class="option group not-selected has-color"
  id="option-color-schwarz">
    <div class="color-swatch" style="background-color:#000000"></div>
  <div class="option-content">
    <span class="option-title">schwarz</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="rot"
  class="option group not-selected has-color"
  id="option-color-rot">
    <div class="color-swatch" style="background-color:#E61B1B"></div>
  <div class="option-content">
    <span class="option-title">rot</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="blau"
  class="option group not-selected has-color"
  id="option-color-blau">
    <div class="color-swatch" style="background-color:#5CA3F0"></div>
  <div class="option-content">
    <span class="option-title">blau</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="navy"
  class="option group not-selected has-color"
  id="option-color-navy">
    <div class="color-swatch" style="background-color:#18359E"></div>
  <div class="option-content">
    <span class="option-title">navy</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="gruen"
  class="option group not-selected has-color"
  id="option-color-gruen">
    <div class="color-swatch" style="background-color:#5FDE5C"></div>
  <div class="option-content">
    <span class="option-title">grün</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="orange"
  class="option group not-selected has-color"
  id="option-color-orange">
    <div class="color-swatch" style="background-color:#F6A500"></div>
  <div class="option-content">
    <span class="option-title">orange</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="gelb"
  class="option group not-selected has-color"
  id="option-color-gelb">
    <div class="color-swatch" style="background-color:#EDFF2D"></div>
  <div class="option-content">
    <span class="option-title">gelb</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="olive"
  class="option group not-selected has-color"
  id="option-color-olive">
    <div class="color-swatch" style="background-color:#64A04F"></div>
  <div class="option-content">
    <span class="option-title">olive</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="grau"
  class="option group not-selected has-color"
  id="option-color-grau">
    <div class="color-swatch" style="background-color:#828282"></div>
  <div class="option-content">
    <span class="option-title">grau</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="braun"
  class="option group not-selected has-color"
  id="option-color-braun">
    <div class="color-swatch" style="background-color:#8E6720"></div>
  <div class="option-content">
    <span class="option-title">braun</span>
    


  </div>
</div>

    <div
  data-action="click->configurators#selectOption"
  data-key="color"
  data-value="magenta"
  class="option group not-selected has-color"
  id="option-color-magenta">
    <div class="color-swatch" style="background-color:#FF00E8"></div>
  <div class="option-content">
    <span class="option-title">magenta</span>
    


  </div>
</div>

</div>

</div>

  </div>
</div>

            <div class="step" id="step-size">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Wähle deine gewünschten Größen</span>
  </h4>

  <div class="parameters">
      <div id="parameter-size_s" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_s"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">S</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_s]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_s"
         class="form-control" aria-describedby="size_s-addon" />
</div>

</div>

      <div id="parameter-size_m" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_m"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">M</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_m]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_m"
         class="form-control" aria-describedby="size_m-addon" />
</div>

</div>

      <div id="parameter-size_l" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_l"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">L</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_l]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_l"
         class="form-control" aria-describedby="size_l-addon" />
</div>

</div>

      <div id="parameter-size_xl" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_xl"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">XL</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_xl]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_xl"
         class="form-control" aria-describedby="size_xl-addon" />
</div>

</div>

      <div id="parameter-size_xxl" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_xxl"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">XXL</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_xxl]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_xxl"
         class="form-control" aria-describedby="size_xxl-addon" />
</div>

</div>

      <div id="parameter-size_3xl" class="parameter integer  col-md-12"
     data-configurators-target="parameter"
     data-key="size_3xl"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">3XL</span>
    </h4>
  </div>
      <div class="form-group ">
  <input type="number" name="configurator[size_3xl]" value="0"
         data-action="keyup->configurators#updateInput"
         placeholder="0 – 0"
         min=0
         max=0
         
         data-key="size_3xl"
         class="form-control" aria-describedby="size_3xl-addon" />
</div>

</div>

  </div>
</div>

            <div class="step" id="step-motive">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Lade dein Motiv hoch</span>
  </h4>

      <p class="font-bold text-red-700">Bitte lade deine gewünschten Motive hoch</p>
  <div class="parameters">
      <div id="parameter-print_file_front" class="parameter file  col-md-12"
     data-configurators-target="parameter"
     data-key="print_file_front"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Vorderseite</span>
    </h4>
  </div>
      <form action="https://www.dtf-fuchs.de/products/tshirt/upload-file"
      data-configurators-target="dropzone"
      data-key="print_file_front"
      data-msg="<p><strong>Datei hochladen</strong></p><p class='text-sm'>Klicken oder Datei hieher ziehen</p>"
      data-filetypes=".pdf,.png,.svg,.tiff,.ai"
      data-value=""
      class="dropzone bg-gray-50 relative overflow-hidden">
  <input type="hidden" name="parameter_id" value="10" />
  <div class="spinner-container hidden absolute inset-0 bg-black flex items-center justify-center opacity-50 z-50">
    <i class="fa-spinner fa-fw fa-fw fa fa-3x animate-spin text-white"></i>
  </div>
</form>

</div>

      <div id="parameter-print_file_back" class="parameter file  col-md-12"
     data-configurators-target="parameter"
     data-key="print_file_back"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Rückseite</span>
    </h4>
  </div>
      <div class="pricelist-wrapper">
            <small>+ 80,00 €</small>

      </div>
      <form action="https://www.dtf-fuchs.de/products/tshirt/upload-file"
      data-configurators-target="dropzone"
      data-key="print_file_back"
      data-msg="<p><strong>Datei hochladen</strong></p><p class='text-sm'>Klicken oder Datei hieher ziehen</p>"
      data-filetypes=".pdf,.png,.svg,.tiff,.ai"
      data-value=""
      class="dropzone bg-gray-50 relative overflow-hidden">
  <input type="hidden" name="parameter_id" value="11" />
  <div class="spinner-container hidden absolute inset-0 bg-black flex items-center justify-center opacity-50 z-50">
    <i class="fa-spinner fa-fw fa-fw fa fa-3x animate-spin text-white"></i>
  </div>
</form>

</div>

  </div>
</div>

            <div class="step" id="step-service">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Unsere Services</span>
  </h4>

  <div class="parameters">
      <div id="parameter-mockup" class="parameter boolean  col-md-12"
     data-configurators-target="parameter"
     data-key="mockup"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Mockup / Visualisierung des Auftrags vorab</span>
    </h4>
      <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639240&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-solid text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639240"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Mockup / Visualisierung des Auftrags vorab
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                <div class="netrockers_cms_text " id="netrockers_cms_element_60">
      <p class="">
  Du kannst dir deinen Auftrag nicht vorstellen oder benötigst vorab eine Visualisierung? Kein Problem, einfach Haken setzen und du bekommst vorab ein Mockup zur Druckfreigabe.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
  </div>
      <div class="form-group ">
  <label class="flex items-center space-x-3">
    <input type="checkbox" name="configurator[mockup]"
           data-action="change->configurators#updateInput"
           
           
           data-key="mockup"
           class="w-5 h-5 focus:ring-indigo-500 text-indigo-600 border-gray-300 rounded" aria-describedby="mockup-addon" />
    <div class="flex items-center justify-between space-x-5">
      <span class="label" id="mockup-title">Mockup / Visualisierung des Auftrags vorab</span>
      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639280&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639280"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Mockup / Visualisierung des Auftrags vorab
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_60">
      <p class="">
  Du kannst dir deinen Auftrag nicht vorstellen oder benötigst vorab eine Visualisierung? Kein Problem, einfach Haken setzen und du bekommst vorab ein Mockup zur Druckfreigabe.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
      </div>
        <div class="pricelist-wrapper">
              <small>+ 20,00 €</small>

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

</div>

      <div id="parameter-check" class="parameter boolean  col-md-12"
     data-configurators-target="parameter"
     data-key="check"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Profi-Datencheck</span>
    </h4>
  </div>
      <div class="form-group ">
  <label class="flex items-center space-x-3">
    <input type="checkbox" name="configurator[check]"
           data-action="change->configurators#updateInput"
           
           
           data-key="check"
           class="w-5 h-5 focus:ring-indigo-500 text-indigo-600 border-gray-300 rounded" aria-describedby="check-addon" />
    <div class="flex items-center justify-between space-x-5">
      <span class="label" id="check-title">Profi-Datencheck</span>
        <div class="pricelist-wrapper">
              <small>+ 20,00 €</small>

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

</div>

      <div id="parameter-creation" class="parameter boolean  col-md-12"
     data-configurators-target="parameter"
     data-key="creation"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Profi-Datenerstellung gemäß Vorgabe</span>
    </h4>
      <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639300&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-solid text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639300"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Profi-Datenerstellung gemäß Vorgabe
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                <div class="netrockers_cms_text " id="netrockers_cms_element_61">
      <p class="">
  Du hast keine Daten oder von Textildruck keine Ahnung aber eine genaue Vorstellung wie dein Produkt aussehen soll? Kein Thema, wir übernehmen die Druckdatenerstellung zum Pauschaltarif. Neben der Erstellung deines Motivs ist hier auch eine Visualisierung des Endergebnisses enthalten.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
  </div>
      <div class="form-group ">
  <label class="flex items-center space-x-3">
    <input type="checkbox" name="configurator[creation]"
           data-action="change->configurators#updateInput"
           
           
           data-key="creation"
           class="w-5 h-5 focus:ring-indigo-500 text-indigo-600 border-gray-300 rounded" aria-describedby="creation-addon" />
    <div class="flex items-center justify-between space-x-5">
      <span class="label" id="creation-title">Profi-Datenerstellung gemäß Vorgabe</span>
      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639320&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639320"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Profi-Datenerstellung gemäß Vorgabe
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_61">
      <p class="">
  Du hast keine Daten oder von Textildruck keine Ahnung aber eine genaue Vorstellung wie dein Produkt aussehen soll? Kein Thema, wir übernehmen die Druckdatenerstellung zum Pauschaltarif. Neben der Erstellung deines Motivs ist hier auch eine Visualisierung des Endergebnisses enthalten.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
      </div>
        <div class="pricelist-wrapper">
              <small>+ 120,00 €</small>

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

</div>

      <div id="parameter-express" class="parameter boolean  col-md-12"
     data-configurators-target="parameter"
     data-key="express"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Express Service: 3 Werktage Produktion</span>
    </h4>
      <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639340&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-solid text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639340"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Express Service: 3 Werktage Produktion
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                <div class="netrockers_cms_text " id="netrockers_cms_element_63">
      <p class="">
  Wenn es mal ganz dringend ist: Bei Bestelleingang bis 12 Uhr, verlässt deine Expressbestellung unsere Firma spätestens am dritten Werktag.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
  </div>
      <div class="form-group ">
  <label class="flex items-center space-x-3">
    <input type="checkbox" name="configurator[express]"
           data-action="change->configurators#updateInput"
           
           
           data-key="express"
           class="w-5 h-5 focus:ring-indigo-500 text-indigo-600 border-gray-300 rounded" aria-describedby="express-addon" />
    <div class="flex items-center justify-between space-x-5">
      <span class="label" id="express-title">Express Service: 3 Werktage Produktion</span>
      <div class="hint-button">
        <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639360&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" x-on:click="open = true; $event.stopImmediatePropagation()" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-regular text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639360"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Express Service: 3 Werktage Produktion
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                  <div class="netrockers_cms_text " id="netrockers_cms_element_63">
      <p class="">
  Wenn es mal ganz dringend ist: Bei Bestelleingang bis 12 Uhr, verlässt deine Expressbestellung unsere Firma spätestens am dritten Werktag.&nbsp;
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
      </div>
        <div class="pricelist-wrapper">
              <small>+ 20 %</small>

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

</div>

  </div>
</div>

            <div class="step" id="step-comment">
  <h4 class="mt-4 sm:mt-6 flex items-center">
    <span class="step-title">Kommentar</span>
  </h4>

  <div class="parameters">
      <div id="parameter-comment" class="parameter text  col-md-12"
     data-configurators-target="parameter"
     data-key="comment"
     data-value="">
  <div class="title my-2 flex items-center">
    <h4 class="font-semibold flex-1 leading-tight">
      <span class="font-semibold">Kommentar / Hinweis</span>
    </h4>
      <div x-data="{ open: false }">
  <button class="shadow-0" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639380&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" type="button">
  
  <i class="fa-circle-question fa-fw fa fa-solid text-accent-600"></i>
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639380"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Kommentar / Hinweis
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
                <div class="netrockers_cms_text " id="netrockers_cms_element_64">
      <p class="">
  Hier kannst du uns weitere Infos zu deinem Auftrag mitteilen (Positionierung deines Druckes, besondere Wünsche, sonstige Anregungen)
</p>

</div>





          </div>
        </div>
      </div>
    </div>
  </template>
</div>
  </div>
      <div class="relative flex group overflow-hidden border-gray-300 focus-within:ring-indigo-600 focus-within:border-indigo-600 relative border rounded-md shadow-sm focus-within:z-10 focus-within:ring-1 input-group">
  <textarea name="configurator[comment]" value=""
         data-action="change->configurators#updateInput"
         placeholder=""
         min=0
    max=0
         
         data-key="comment"
         class="border-0 flex-1 bg-transparent form-control"></textarea>
</div>

</div>

  </div>
</div>

        </div>
    </div>

  </div>


    </template>
  </turbo-stream>
<turbo-stream action="replace" target="product-price">
  <template>
      <div class="text-3xl text-accent font-bold" id="product-price">
    <p class="current tracking-tight">
      ab 130<sup class="text-lg">,00 €</sup>
    </p>
    <p class="tax-info text-xs text-gray-800">
      inkl. 19 % MwSt.
    </p>
    <p class="shipping-cost-info text-xs">
    <span class="info">
      zzgl. 9,50 € Versandkosten
    </span>
    </p>
  </div>

  </template>
</turbo-stream>

<turbo-stream action="replace" target="product-add-to-cart">
  <template>
      <div class="add-to-cart-form flex items-center gap-4 mt-8" id="product-add-to-cart">
    <div class="form-container">
  <form action="/cart/add" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="lLxUmeQNcfhqWaV4Nrt-yCy66RaESlgDvqL1MKM1IyhW1p_eV3HV8OzDyzjkL592Vl9eHRoI2iZ_FIAzXUs1Yw" autocomplete="off" />
    
      <div class="form-group  ">
  <input class="" as="hidden" value="4" autocomplete="off" type="hidden" name="cart[product_id]" id="cart_product_id" />

</div>

      <div class="form-group  ">
  <input class="" as="hidden" value="" autocomplete="off" type="hidden" name="cart[extension_items]" id="cart_extension_items" />

</div>


          <div class="form-group  ">
  <input class="" as="hidden" name="config[package]" autocomplete="off" type="hidden" id="cart_package" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[quality]" autocomplete="off" type="hidden" id="cart_quality" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[color]" autocomplete="off" type="hidden" id="cart_color" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_s]" autocomplete="off" type="hidden" id="cart_size_s" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_m]" autocomplete="off" type="hidden" id="cart_size_m" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_l]" autocomplete="off" type="hidden" id="cart_size_l" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_xl]" autocomplete="off" type="hidden" id="cart_size_xl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_xxl]" autocomplete="off" type="hidden" id="cart_size_xxl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[size_3xl]" autocomplete="off" type="hidden" id="cart_size_3xl" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[print_file_front]" autocomplete="off" type="hidden" id="cart_print_file_front" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[print_file_back]" autocomplete="off" type="hidden" id="cart_print_file_back" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[mockup]" autocomplete="off" type="hidden" id="cart_mockup" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[check]" autocomplete="off" type="hidden" id="cart_check" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[creation]" autocomplete="off" type="hidden" id="cart_creation" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[express]" autocomplete="off" type="hidden" id="cart_express" />

</div>

          <div class="form-group  ">
  <input class="" as="hidden" name="config[comment]" autocomplete="off" type="hidden" id="cart_comment" />

</div>


      <div class="flex items-center">
        <div class="group form-group max-w-full w-24 mr-4 flex overflow-hidden  hidden border-gray-300 focus-within:ring-indigo-600 focus-within:border-indigo-600">
  
  <div class="input group relative flex-1">
    <label for="qty_4">
      <span class="absolute top-0 inset-x-0 z-10 px-3 py-2 block text-xs font-medium text-gray-900">Quantity</span>
      <div class="z-0 inset-0 group"><input class="block form-input font-medium bg-transparent w-full border-0 px-3 pb-2 pt-6 text-gray-900 placeholder-gray-500 focus:ring-0 " value="1" min="1" id="qty_4" style="background-color: transparent !important" type="text" name="cart[quantity]" />
</div>
</label>  </div>
            <div class="flex flex-col divide-y h-full absolute right-0 top-0 border-l border-gray-200">
            <button type="button"
                    data-action="product#decreaseQty" data-input="#qty_4"
                    class="flex-1 text-gray-600 hover:text-gray-800 bg-gray-50 hover:bg-gray-100 px-1">
              <i class="fa-minus fa-fw fas"></i></button>
            <button type="button"
                    data-action="product#increaseQty" data-input="#qty_4"
                    class="flex-1 text-gray-600 hover:text-gray-800 bg-gray-50 hover:bg-gray-100 px-1">
              <i class="fa-plus fa-fw fas"></i></button>
          </div>

</div>

        <div x-data="{ open: false }">
  <button class="btn-gradient rounded-lg uppercase text-white font-bold px-6 py-3 text-lg inline-flex items-center border border-transparent font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" x-on:click="open = true" x-on:open-modal.window="if($event.detail.id==&#39;netrockers-frontend-components-modal-639580&#39;) { if($event.detail.href) {$el.setAttribute(&#39;data-href&#39;, $event.detail.href)}; if($event.detail.title) { title=$event.detail.title;$el.setAttribute(&#39;title&#39;, $event.detail.title) }; $el.click() }" disabled="disabled" type="submit">
  
  Bitte konfiguriere dein Produkt!
</button>
  <template x-teleport="body">
    <div x-cloak x-on:keydown.window.escape="open = false" x-show="open" class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             x-on:click="open = false" aria-hidden="true">
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>

        <div id="netrockers-frontend-components-modal-639580"
             x-show="open"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="header flex bg-white p-4 sm:px-6 border-b items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 flex-1" id="modal-title">
              Warenkorb
            </h3>
            <button type="button" x-on:click="open = false" class="text-2xl transition-color">
              <i class="fa-times fa-fw fal text-gray-400 hover:text-gray-600"></i>
            </button>
          </div>
          <div class="bg-white p-4 sm:p-6 content h-full">
            
          <div id="cart-add-message">
            <div class="w-full text-center p-5">
              <i class="fa-spinner-third fa-fw fad fa-spin fa-3x text-gray-300"></i>
            </div>
          </div>

          </div>
            <div class="bg-gray-100 p-4 sm:px-6 flex flex-col gap-y-3 sm:flex-row-reverse sm:gap-y-0 justify-between">
                        <a class="bg-gray-700 text-white ring-2 ring-offset-2 ring-gray-800 btn sm" href="/produkte/tshirt" x-on:click="open = false">
  
  weiter einkaufen
</a>
          <a class="bg-gray-700 text-white btn sm bg-accent hover:bg-accent-light text-white font-bold" href="/cart" x-on:click="open = false">
  
  zum Warenkorb
</a>

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

</form></div>

  </div>


  </template>
</turbo-stream>
