Use proper watchlist keys

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html

@@ -20,7 +20,7 @@
                 <button type="button"
                         class="px-2"
                         data-controller="watchlist-toggle"
-                        data-watchlist-toggle-key-value="{teaser.product.uid}:{teaser.hotel.uid}"
+                        data-watchlist-toggle-key-value="{teaser.hotel.uid}:{teaser.product.uid}"
                         data-watchlist-toggle-target="ariaLabel"
                         data-action="watchlist-toggle#toggle"
                         data-cooltipz-dir="top"

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html

@@ -92,11 +92,17 @@
                     </a>
                 </div>
             </div>
-            <a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger">
+            <button type="button"
-              <span data-cooltipz-dir="top" x-bind:aria-label="label" role="tooltip">
+                    class="px-2"
-                <i class="fa fa-plus-circle" x-bind:class="icon"></i>
+                    data-controller="watchlist-toggle"
-              </span>
+                    data-watchlist-toggle-key-value="{teaser.hotel.uid}:{teaser.product.uid}"
-            </a>
+                    data-watchlist-toggle-target="ariaLabel"
+                    data-action="watchlist-toggle#toggle"
+                    data-cooltipz-dir="top"
+                    aria-label="auf die Merkliste setzen"
+                    role="tooltip">
+                <svg class="w-6 h-6 text-white" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+            </button>
         </div>
     </f:section>