Fix: "+"-Button der Mengensteuerung war unsichtbar, wenn die maximale Lagermenge bereits im Warenkorb war

Ursache gefunden: wenn der Lagerbestand komplett im Warenkorb war, bekam
der "In den Warenkorb"-Button den kompletten langen Hinweissatz als
Text ("Maximale verfügbare Menge ist bereits im Warenkorb"). Der Button
wurde dadurch riesig (3 Zeilen) und hat die danebenliegende
Mengen-Steuerung samt "+"-Button optisch verschluckt — auf schmalen
Bildschirmen war der "+" komplett unsichtbar.

Fix: Der Button bekommt jetzt eine kurze Beschriftung ("Bereits im
Warenkorb"), der ausführliche Satz steht weiterhin im separaten
Hinweistext darunter. Zusätzlich .qty-row jetzt mit flex-wrap
abgesichert, damit ein zu langer Button-Text künftig einfach umbricht
statt die Mengen-Steuerung zu überlagern.

Verifiziert per Puppeteer auf schmalem Viewport (420px): "+" jetzt
sichtbar und klickbar, Button zeigt Kurztext, Hinweis zeigt weiterhin
den vollen Satz.

src/i18n/ui.ts

@@ -20,7 +20,7 @@ export const ui = {
     badge: { neu: "Neu", bestseller: "Bestseller", sale: "Sale", handgemacht: "Handgemacht", ausverkauft: "Ausverkauft" },
     common: {
       addToCart: "In den Warenkorb", soldOut: "Ausverkauft", addedToCart: "Zum Warenkorb hinzugefügt ✓",
-      onlyXLeft: (n: string) => `Nur noch ${n} auf Lager`, maxInCart: "Maximale verfügbare Menge ist bereits im Warenkorb",
+      onlyXLeft: (n: string) => `Nur noch ${n} auf Lager`, maxInCart: "Maximale verfügbare Menge ist bereits im Warenkorb", maxInCartShort: "Bereits im Warenkorb",
       browseShop: "Jetzt stöbern", viewAll: "Alle ansehen →", viewAllSale: "Alle Angebote →",
       toShop: "Zum Shop →", moreAboutMe: "Mehr über mich →", discoverNow: "Jetzt entdecken",
       vatNote: "Gemäß §19 UStG wird keine Umsatzsteuer berechnet und ausgewiesen.",
@@ -203,7 +203,7 @@ export const ui = {
     badge: { neu: "New", bestseller: "Bestseller", sale: "Sale", handgemacht: "Handmade", ausverkauft: "Sold out" },
     common: {
       addToCart: "Add to cart", soldOut: "Sold out", addedToCart: "Added to cart ✓",
-      onlyXLeft: (n: string) => `Only ${n} left in stock`, maxInCart: "The maximum available quantity is already in your cart",
+      onlyXLeft: (n: string) => `Only ${n} left in stock`, maxInCart: "The maximum available quantity is already in your cart", maxInCartShort: "Already in cart",
       browseShop: "Browse now", viewAll: "View all →", viewAllSale: "View all offers →",
       toShop: "To the shop →", moreAboutMe: "More about me →", discoverNow: "Discover now",
       vatNote: "Under §19 UStG (German small-business rule) no VAT is charged or shown.",
@@ -386,7 +386,7 @@ export const ui = {
     badge: { neu: "Neu", bestseller: "Bestseller", sale: "Aktion", handgemacht: "Handgmacht", ausverkauft: "Usverkauft" },
     common: {
       addToCart: "In Warenchorb", soldOut: "Usverkauft", addedToCart: "Zum Warenchorb dezuegfüegt ✓",
-      onlyXLeft: (n: string) => `Nume no ${n} a Lager`, maxInCart: "D'maximal verfügbari Mengi isch scho im Warenchorb",
+      onlyXLeft: (n: string) => `Nume no ${n} a Lager`, maxInCart: "D'maximal verfügbari Mengi isch scho im Warenchorb", maxInCartShort: "Scho im Warenchorb",
       browseShop: "Jetzt use luege", viewAll: "Alles aluege →", viewAllSale: "Alli Aktione →",
       toShop: "Zum Shop →", moreAboutMe: "Meh über mich →", discoverNow: "Jetzt aluege",
       vatNote: "Gemäss §19 UStG (dütsches Rächt) wird kei Umsatzsteuer berechnet und usgwiese.",
@@ -569,7 +569,7 @@ export const ui = {
     badge: { neu: "Nouveau", bestseller: "Best-seller", sale: "Soldes", handgemacht: "Fait main", ausverkauft: "Épuisé" },
     common: {
       addToCart: "Ajouter au panier", soldOut: "Épuisé", addedToCart: "Ajouté au panier ✓",
-      onlyXLeft: (n: string) => `Plus que ${n} en stock`, maxInCart: "La quantité maximale disponible est déjà dans votre panier",
+      onlyXLeft: (n: string) => `Plus que ${n} en stock`, maxInCart: "La quantité maximale disponible est déjà dans votre panier", maxInCartShort: "Déjà dans le panier",
       browseShop: "Découvrir la boutique", viewAll: "Tout voir →", viewAllSale: "Toutes les offres →",
       toShop: "Vers la boutique →", moreAboutMe: "En savoir plus sur moi →", discoverNow: "Découvrir maintenant",
       vatNote: "Conformément à l'§19 UStG (droit allemand), aucune TVA n'est calculée ni indiquée.",

src/pages/ch/produkt/[slug].astro

@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
   )}
 </Layout>
 
-<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
+<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
-  window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
+  window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
 </script>
 <script>
   import { addToCart, getCart } from "../../../scripts/cart";
-  const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
+  const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
   const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
   const qtyInput = document.getElementById("qty") as HTMLInputElement;
   const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
         btn.textContent = soldOutText;
       } else if (max === 0) {
         btn.disabled = true;
-        btn.textContent = maxInCartText;
+        btn.textContent = maxInCartShortText;
         stockHint.style.display = "block";
         stockHint.textContent = maxInCartText;
       } else {

src/pages/en/produkt/[slug].astro

@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
   )}
 </Layout>
 
-<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
+<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
-  window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
+  window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
 </script>
 <script>
   import { addToCart, getCart } from "../../../scripts/cart";
-  const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
+  const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
   const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
   const qtyInput = document.getElementById("qty") as HTMLInputElement;
   const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
         btn.textContent = soldOutText;
       } else if (max === 0) {
         btn.disabled = true;
-        btn.textContent = maxInCartText;
+        btn.textContent = maxInCartShortText;
         stockHint.style.display = "block";
         stockHint.textContent = maxInCartText;
       } else {

src/pages/fr/produkt/[slug].astro

@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
   )}
 </Layout>
 
-<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
+<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
-  window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
+  window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
 </script>
 <script>
   import { addToCart, getCart } from "../../../scripts/cart";
-  const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
+  const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
   const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
   const qtyInput = document.getElementById("qty") as HTMLInputElement;
   const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
         btn.textContent = soldOutText;
       } else if (max === 0) {
         btn.disabled = true;
-        btn.textContent = maxInCartText;
+        btn.textContent = maxInCartShortText;
         stockHint.style.display = "block";
         stockHint.textContent = maxInCartText;
       } else {

src/pages/produkt/[slug].astro

@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
   )}
 </Layout>
 
-<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
+<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
-  window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
+  window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
 </script>
 <script>
   import { addToCart, getCart } from "../../scripts/cart";
-  const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
+  const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
   const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
   const qtyInput = document.getElementById("qty") as HTMLInputElement;
   const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
         btn.textContent = soldOutText;
       } else if (max === 0) {
         btn.disabled = true;
-        btn.textContent = maxInCartText;
+        btn.textContent = maxInCartShortText;
         stockHint.style.display = "block";
         stockHint.textContent = maxInCartText;
       } else {

src/styles/global.css

@@ -813,7 +813,11 @@ a:focus-visible, button:focus-visible {
   padding: 0.25em 0.6em;
   font-weight: 600;
 }
-.qty-row { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 0.5rem; }
+/* flex-wrap: falls der "In den Warenkorb"-Button mal langen Text bekommt (z.B. Lagerbestand-
+   Hinweise), soll er in eine neue Zeile umbrechen statt die Mengen-Steuerung daneben zu
+   verdecken. */
+.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.4rem 0 0.5rem; }
+.qty-row .qty-stepper { flex-shrink: 0; }
 
 /* Große, leicht zu treffende Mengen-Steuerung auf der Produktseite (ersetzt die winzigen
    Browser-Standard-Pfeile eines <input type="number">). */