Fix out-of-stock CTA regressions: grid alignment, preview accuracy, label length

- Replace the invisible reserved-space trick with items-start on every
  product grid (ProductGrid/MerklisteGrid/RelatedProducts) — the
  reservation looked worse in practice (visible dead space under
  in-stock cards' buttons) than letting an out-of-stock card simply be
  taller than its siblings.
- New renderBackInStockHtml() in lib/emailTemplates.ts, used by the
  Live Preview instead of the generic order-status renderer — that one
  showed a fake order number and "Bestellung ansehen", neither of
  which apply to a back-in-stock mail (no order exists). CTA is now
  "Zum Produkt", matching the real backend send.
- Shortened NotifyMeForm's button label ("Benachrichtigen") — the
  longer version wrapped to two lines on narrow single-column cards.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/AddToCartButton.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { addToCart, useCart } from "../lib/cart";
 import { useCartFly } from "./CartFly";
-import { NotifyMeForm, NotifyMeFormReservedSpace } from "./NotifyMeForm";
+import { NotifyMeForm } from "./NotifyMeForm";
 
 const FEEDBACK_MS = 2000;
 
@@ -119,23 +119,20 @@ export function AddToCartButton({
           ))}
         </select>
       )}
-      {/* Same reserved-space stack as AddToCartInlineButton.tsx's identical
-          block — see that file's own comment. */}
-      <div className="relative grid w-full">
-        <div className="invisible pointer-events-none [grid-area:1/1]">
-          <NotifyMeFormReservedSpace />
-        </div>
-        <div className="[grid-area:1/1] self-start">
-          {currentlyOutOfStock ? (
-            <NotifyMeForm productId={numericId} variantName={variants.length > 0 ? (selectedVariant ?? "") : ""} />
-          ) : (
-            <button
-              ref={buttonRef}
-              type="button"
-              onClick={handleClick}
-              disabled={disabled}
-              className={`${base} ${stateClasses}`}
-            >
+      {currentlyOutOfStock ? (
+        // Replaces the button slot entirely rather than stacking below a
+        // disabled "Ausverkauft" button — same reasoning as
+        // AddToCartInlineButton's identical swap (see that file's own
+        // comment on the `items-start` grid fix this relies on).
+        <NotifyMeForm productId={numericId} variantName={variants.length > 0 ? (selectedVariant ?? "") : ""} />
+      ) : (
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={handleClick}
+          disabled={disabled}
+          className={`${base} ${stateClasses}`}
+        >
           {/* CSS-grid text-stack, not just swapping the button's text node
               directly — this button is inline-flex/content-sized (no w-full),
               so "Hinzugefügt ✓" being shorter than most labels made the whole
@@ -163,10 +160,8 @@ export function AddToCartButton({
             </span>
             <span className="[grid-area:1/1]">{added ? "Hinzugefügt ✓" : displayLabel}</span>
           </span>
-            </button>
-          )}
-        </div>
-      </div>
+        </button>
+      )}
     </div>
   );
 }