Treuebonus nur noch mit aktivem Abo nutzbar

Der Treuebonus (10 Bestellungen → 20% Rabatt) sammelt jetzt nur noch, solange
ein aktives, bezahltes Abo besteht — ohne Abo bleibt der Fortschritt einfach
stehen, statt weiterzuzählen (account.ts: registriereAbgeschlosseneBestellung()).
Ebenso greift ein bereits freigeschalteter Rabatt im Warenkorb/Checkout nur,
solange das Abo aktiv ist (cart.ts: treuebonusDiscount()).

Im Kundenkonto wird die Treuebonus-Karte ohne aktives Abo nicht einfach
ausgeblendet, sondern zeigt bewusst einen einladenden gesperrten Zustand
("🔒 Nur mit aktivem Abo verfügbar" + Button "Zum Abo →") statt der üblichen
Fortschrittsanzeige — soll als klarer Anreiz fürs Abo wirken, nicht als totes
Feature. Dieselbe Sperre greift auch im Warenkorb: das Auswahl-Radio/Badge für
den Treuebonus-Artikel erscheint nur noch bei tatsächlich aktivem Abo, damit
nie ein Rabatt suggeriert wird, der beim Checkout dann doch nicht greift.

Alles in 4 Sprachen (DE/EN/CH/FR).

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/i18n/ui.ts

@@ -241,6 +241,9 @@ export const ui = {
       loyaltyUnlockedText: "Du hast zehn Bestellungen abgeschlossen und erhältst bei deiner nächsten Bestellung 20 % Rabatt auf einen Artikel deiner Wahl.",
       loyaltyGoToCart: "Artikel im Warenkorb auswählen →",
       loyaltyExplainer: "Es zählen nur vollständig abgeschlossene und bezahlte Bestellungen. Nach der Einlösung beginnt dein Fortschritt wieder bei null.",
+      loyaltyLockedTitle: "🔒 Nur mit aktivem Abo verfügbar",
+      loyaltyLockedText: "Der Treuebonus ist ein Extra für unsere Abo-Mitglieder. Schließe ein Abo ab, um Bestellungen für deine 20 %-Belohnung zu sammeln.",
+      loyaltyLockedBtn: "Zum Abo →",
       statAbo: "Mein Abo",
       aboHeaderBtn: "🎫 Mein Abo verwalten",
       aboTitle: "🎫 Mein Abo",
@@ -539,6 +542,9 @@ export const ui = {
       loyaltyUnlockedText: "You've completed ten orders and get 20% off an item of your choice on your next order.",
       loyaltyGoToCart: "Choose item in cart →",
       loyaltyExplainer: "Only fully completed and paid orders count. After redemption your progress starts again from zero.",
+      loyaltyLockedTitle: "🔒 Only available with an active subscription",
+      loyaltyLockedText: "The loyalty reward is an extra for our subscription members. Subscribe to start collecting orders towards your 20% reward.",
+      loyaltyLockedBtn: "Go to subscription →",
       statAbo: "My Subscription",
       aboHeaderBtn: "🎫 Manage my subscription",
       aboTitle: "🎫 My Subscription",
@@ -837,6 +843,9 @@ export const ui = {
       loyaltyUnlockedText: "Du hesch zäh Bstellige abgschlosse und übercho bi dinere nächschte Bstellig 20 % Rabatt uf en Artikel dinere Wahl.",
       loyaltyGoToCart: "Artikel im Warenchorb uswähle →",
       loyaltyExplainer: "Es zelle nume vollständig abgschlosseni und bezahlti Bstellige. Nach dr Ilösig fangt din Fortschritt wieder bi null a.",
+      loyaltyLockedTitle: "🔒 Nume mit aktivem Abo verfüegbar",
+      loyaltyLockedText: "Dr Treuebonus isch es Extra für üsi Abo-Mitglieder. Schliess es Abo ab, um Bstellige für dini 20 %-Belohnig z sammle.",
+      loyaltyLockedBtn: "Zum Abo →",
       statAbo: "Mis Abo",
       aboHeaderBtn: "🎫 Mis Abo verwalte",
       aboTitle: "🎫 Mis Abo",
@@ -1135,6 +1144,9 @@ export const ui = {
       loyaltyUnlockedText: "Vous avez validé dix commandes et bénéficiez de 20 % de réduction sur l'article de votre choix lors de votre prochaine commande.",
       loyaltyGoToCart: "Choisir l'article dans le panier →",
       loyaltyExplainer: "Seules les commandes entièrement finalisées et payées comptent. Après utilisation, votre progression repart de zéro.",
+      loyaltyLockedTitle: "🔒 Disponible uniquement avec un abonnement actif",
+      loyaltyLockedText: "La récompense fidélité est un bonus réservé à nos abonné(e)s. Abonnez-vous pour commencer à cumuler des commandes vers votre récompense de 20 %.",
+      loyaltyLockedBtn: "Voir l'abonnement →",
       statAbo: "Mon abonnement",
       aboHeaderBtn: "🎫 Gérer mon abonnement",
       aboTitle: "🎫 Mon abonnement",

src/pages/ch/konto/angemeldet.astro

@@ -324,11 +324,18 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
       <div class="card loyalty-card">
         <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
         <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
-        <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+        <div class="loyalty-inner" id="loyalty-locked-content" style="display:none;">
-        <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p class="loyalty-locked-title">{t.accountDash.loyaltyLockedTitle}</p>
-        <p id="loyalty-status-text"></p>
+          <p class="small">{t.accountDash.loyaltyLockedText}</p>
-        <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <button type="button" class="btn btn-primary btn-sm" id="loyalty-locked-abo-btn" style="align-self:flex-start;">{t.accountDash.loyaltyLockedBtn}</button>
-        <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
+        <div class="loyalty-inner" id="loyalty-unlocked-content">
+          <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+          <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p id="loyalty-status-text"></p>
+          <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
       </div>
     </div>
   </section>
@@ -545,8 +552,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     function renderLoyalty() {
       const f = treueFortschritt(getAccount());
       const navValue = document.getElementById("loyalty-nav-value");
-      if (navValue) navValue.textContent = `${f.aktuelle}/${f.ziel}`;
+      if (navValue) navValue.textContent = f.gesperrt ? "🔒" : `${f.aktuelle}/${f.ziel}`;
-      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv);
+      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv && !f.gesperrt);
+
+      const lockedContent = document.getElementById("loyalty-locked-content");
+      const unlockedContent = document.getElementById("loyalty-unlocked-content");
+      if (lockedContent) lockedContent.style.display = f.gesperrt ? "flex" : "none";
+      if (unlockedContent) unlockedContent.style.display = f.gesperrt ? "none" : "flex";
+      if (f.gesperrt) return;
 
       const fill = document.getElementById("loyalty-bar-fill") as HTMLElement | null;
       if (fill) fill.style.width = `${Math.min(100, (f.aktuelle / f.ziel) * 100)}%`;
@@ -573,6 +586,12 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     renderLoyalty();
     window.addEventListener("account:changed", renderLoyalty);
 
+    // Im gesperrten Treuebonus-Zustand direkt zum Abo-Bereich springen.
+    document.getElementById("loyalty-locked-abo-btn")?.addEventListener("click", () => {
+      setActiveTab("abo");
+      document.getElementById("abo")?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
     // Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
     // rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
     const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };

src/pages/ch/warenkorb/index.astro

@@ -117,7 +117,8 @@ import { getAccount, treueFortschritt, setTreuebonusArtikel } from "../../../scr
     // Treuebonus: nur relevant, wenn im Konto gerade eine Belohnung auf Einlösung wartet — dann
     // darf hier EIN Artikel frei ausgewählt werden, auf den die -20% angewendet werden.
     const konto = getAccount();
-    const treueAktiv = treueFortschritt(konto).aktiv;
+    const treueFortschrittKonto = treueFortschritt(konto);
+    const treueAktiv = treueFortschrittKonto.aktiv && !treueFortschrittKonto.gesperrt;
     const gewaehlterSlug = konto.treuebonusArtikelSlug;
     const loyaltyBanner = document.getElementById("loyalty-banner");
     if (loyaltyBanner) loyaltyBanner.style.display = treueAktiv ? "flex" : "none";

src/pages/en/konto/angemeldet.astro

@@ -324,11 +324,18 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
       <div class="card loyalty-card">
         <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
         <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
-        <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+        <div class="loyalty-inner" id="loyalty-locked-content" style="display:none;">
-        <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p class="loyalty-locked-title">{t.accountDash.loyaltyLockedTitle}</p>
-        <p id="loyalty-status-text"></p>
+          <p class="small">{t.accountDash.loyaltyLockedText}</p>
-        <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <button type="button" class="btn btn-primary btn-sm" id="loyalty-locked-abo-btn" style="align-self:flex-start;">{t.accountDash.loyaltyLockedBtn}</button>
-        <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
+        <div class="loyalty-inner" id="loyalty-unlocked-content">
+          <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+          <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p id="loyalty-status-text"></p>
+          <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
       </div>
     </div>
   </section>
@@ -545,8 +552,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     function renderLoyalty() {
       const f = treueFortschritt(getAccount());
       const navValue = document.getElementById("loyalty-nav-value");
-      if (navValue) navValue.textContent = `${f.aktuelle}/${f.ziel}`;
+      if (navValue) navValue.textContent = f.gesperrt ? "🔒" : `${f.aktuelle}/${f.ziel}`;
-      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv);
+      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv && !f.gesperrt);
+
+      const lockedContent = document.getElementById("loyalty-locked-content");
+      const unlockedContent = document.getElementById("loyalty-unlocked-content");
+      if (lockedContent) lockedContent.style.display = f.gesperrt ? "flex" : "none";
+      if (unlockedContent) unlockedContent.style.display = f.gesperrt ? "none" : "flex";
+      if (f.gesperrt) return;
 
       const fill = document.getElementById("loyalty-bar-fill") as HTMLElement | null;
       if (fill) fill.style.width = `${Math.min(100, (f.aktuelle / f.ziel) * 100)}%`;
@@ -573,6 +586,12 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     renderLoyalty();
     window.addEventListener("account:changed", renderLoyalty);
 
+    // Im gesperrten Treuebonus-Zustand direkt zum Abo-Bereich springen.
+    document.getElementById("loyalty-locked-abo-btn")?.addEventListener("click", () => {
+      setActiveTab("abo");
+      document.getElementById("abo")?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
     // Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
     // rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
     const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };

src/pages/en/warenkorb/index.astro

@@ -117,7 +117,8 @@ import { getAccount, treueFortschritt, setTreuebonusArtikel } from "../../../scr
     // Treuebonus: nur relevant, wenn im Konto gerade eine Belohnung auf Einlösung wartet — dann
     // darf hier EIN Artikel frei ausgewählt werden, auf den die -20% angewendet werden.
     const konto = getAccount();
-    const treueAktiv = treueFortschritt(konto).aktiv;
+    const treueFortschrittKonto = treueFortschritt(konto);
+    const treueAktiv = treueFortschrittKonto.aktiv && !treueFortschrittKonto.gesperrt;
     const gewaehlterSlug = konto.treuebonusArtikelSlug;
     const loyaltyBanner = document.getElementById("loyalty-banner");
     if (loyaltyBanner) loyaltyBanner.style.display = treueAktiv ? "flex" : "none";

src/pages/fr/konto/angemeldet.astro

@@ -324,11 +324,18 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
       <div class="card loyalty-card">
         <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
         <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
-        <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+        <div class="loyalty-inner" id="loyalty-locked-content" style="display:none;">
-        <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p class="loyalty-locked-title">{t.accountDash.loyaltyLockedTitle}</p>
-        <p id="loyalty-status-text"></p>
+          <p class="small">{t.accountDash.loyaltyLockedText}</p>
-        <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <button type="button" class="btn btn-primary btn-sm" id="loyalty-locked-abo-btn" style="align-self:flex-start;">{t.accountDash.loyaltyLockedBtn}</button>
-        <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
+        <div class="loyalty-inner" id="loyalty-unlocked-content">
+          <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+          <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p id="loyalty-status-text"></p>
+          <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
       </div>
     </div>
   </section>
@@ -545,8 +552,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     function renderLoyalty() {
       const f = treueFortschritt(getAccount());
       const navValue = document.getElementById("loyalty-nav-value");
-      if (navValue) navValue.textContent = `${f.aktuelle}/${f.ziel}`;
+      if (navValue) navValue.textContent = f.gesperrt ? "🔒" : `${f.aktuelle}/${f.ziel}`;
-      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv);
+      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv && !f.gesperrt);
+
+      const lockedContent = document.getElementById("loyalty-locked-content");
+      const unlockedContent = document.getElementById("loyalty-unlocked-content");
+      if (lockedContent) lockedContent.style.display = f.gesperrt ? "flex" : "none";
+      if (unlockedContent) unlockedContent.style.display = f.gesperrt ? "none" : "flex";
+      if (f.gesperrt) return;
 
       const fill = document.getElementById("loyalty-bar-fill") as HTMLElement | null;
       if (fill) fill.style.width = `${Math.min(100, (f.aktuelle / f.ziel) * 100)}%`;
@@ -573,6 +586,12 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     renderLoyalty();
     window.addEventListener("account:changed", renderLoyalty);
 
+    // Im gesperrten Treuebonus-Zustand direkt zum Abo-Bereich springen.
+    document.getElementById("loyalty-locked-abo-btn")?.addEventListener("click", () => {
+      setActiveTab("abo");
+      document.getElementById("abo")?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
     // Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
     // rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
     const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };

src/pages/fr/warenkorb/index.astro

@@ -117,7 +117,8 @@ import { getAccount, treueFortschritt, setTreuebonusArtikel } from "../../../scr
     // Treuebonus: nur relevant, wenn im Konto gerade eine Belohnung auf Einlösung wartet — dann
     // darf hier EIN Artikel frei ausgewählt werden, auf den die -20% angewendet werden.
     const konto = getAccount();
-    const treueAktiv = treueFortschritt(konto).aktiv;
+    const treueFortschrittKonto = treueFortschritt(konto);
+    const treueAktiv = treueFortschrittKonto.aktiv && !treueFortschrittKonto.gesperrt;
     const gewaehlterSlug = konto.treuebonusArtikelSlug;
     const loyaltyBanner = document.getElementById("loyalty-banner");
     if (loyaltyBanner) loyaltyBanner.style.display = treueAktiv ? "flex" : "none";

src/pages/konto/angemeldet.astro

@@ -325,11 +325,21 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
       <div class="card loyalty-card">
         <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
         <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
-        <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+        {/* Treuebonus ist an ein aktives Abo gekoppelt (soll als Zusatzanreiz fürs Abo wirken) —
-        <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+            ohne aktives Abo wird dieser gesperrte Hinweis statt des Fortschritts gezeigt (siehe
-        <p id="loyalty-status-text"></p>
+            renderLoyalty() im Skript unten, treueFortschritt().gesperrt). */}
-        <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+        <div class="loyalty-inner" id="loyalty-locked-content" style="display:none;">
-        <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+          <p class="loyalty-locked-title">{t.accountDash.loyaltyLockedTitle}</p>
+          <p class="small">{t.accountDash.loyaltyLockedText}</p>
+          <button type="button" class="btn btn-primary btn-sm" id="loyalty-locked-abo-btn" style="align-self:flex-start;">{t.accountDash.loyaltyLockedBtn}</button>
+        </div>
+        <div class="loyalty-inner" id="loyalty-unlocked-content">
+          <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
+          <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
+          <p id="loyalty-status-text"></p>
+          <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
+          <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
+        </div>
       </div>
     </div>
   </section>
@@ -543,11 +553,19 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     window.addEventListener("account:changed", renderProfil);
 
     // Treuebonus: Fortschritt/Status live aus dem Konto rendern (Nav-Kachel + Inhaltsbereich).
+    // Ist an ein aktives Abo gekoppelt (siehe treueFortschritt().gesperrt in account.ts) — ohne
+    // aktives Abo zeigt die Karte nur den gesperrten Hinweis samt Sprung zum Abo-Bereich.
     function renderLoyalty() {
       const f = treueFortschritt(getAccount());
       const navValue = document.getElementById("loyalty-nav-value");
-      if (navValue) navValue.textContent = `${f.aktuelle}/${f.ziel}`;
+      if (navValue) navValue.textContent = f.gesperrt ? "🔒" : `${f.aktuelle}/${f.ziel}`;
-      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv);
+      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv && !f.gesperrt);
+
+      const lockedContent = document.getElementById("loyalty-locked-content");
+      const unlockedContent = document.getElementById("loyalty-unlocked-content");
+      if (lockedContent) lockedContent.style.display = f.gesperrt ? "flex" : "none";
+      if (unlockedContent) unlockedContent.style.display = f.gesperrt ? "none" : "flex";
+      if (f.gesperrt) return;
 
       const fill = document.getElementById("loyalty-bar-fill") as HTMLElement | null;
       if (fill) fill.style.width = `${Math.min(100, (f.aktuelle / f.ziel) * 100)}%`;
@@ -574,6 +592,12 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     renderLoyalty();
     window.addEventListener("account:changed", renderLoyalty);
 
+    // Im gesperrten Treuebonus-Zustand direkt zum Abo-Bereich springen.
+    document.getElementById("loyalty-locked-abo-btn")?.addEventListener("click", () => {
+      setActiveTab("abo");
+      document.getElementById("abo")?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
     // Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
     // rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
     const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };

src/pages/warenkorb/index.astro

@@ -117,7 +117,10 @@ import { getAccount, treueFortschritt, setTreuebonusArtikel } from "../../script
     // Treuebonus: nur relevant, wenn im Konto gerade eine Belohnung auf Einlösung wartet — dann
     // darf hier EIN Artikel frei ausgewählt werden, auf den die -20% angewendet werden.
     const konto = getAccount();
-    const treueAktiv = treueFortschritt(konto).aktiv;
+    // Treuebonus ist an ein aktives Abo gekoppelt (siehe account.ts) — ohne aktives Abo bleibt
+    // die Auswahl/Anzeige hier ausgeblendet, auch wenn intern noch eine Belohnung "wartet".
+    const treueFortschrittKonto = treueFortschritt(konto);
+    const treueAktiv = treueFortschrittKonto.aktiv && !treueFortschrittKonto.gesperrt;
     const gewaehlterSlug = konto.treuebonusArtikelSlug;
     const loyaltyBanner = document.getElementById("loyalty-banner");
     if (loyaltyBanner) loyaltyBanner.style.display = treueAktiv ? "flex" : "none";

src/scripts/account.ts

@@ -226,10 +226,16 @@ export function markiereBestellungBewertet(bestellnummer: string, produktSlug: s
 /** Zählt eine gültige, abgeschlossene Bestellung für den Treuebonus. Zählt NICHT weiter, wenn
  *  gerade schon eine Belohnung auf Einlösung wartet (erst einlösen, dann läuft der nächste
  *  Zähler wieder bei 0 los). Schaltet die Belohnung automatisch frei, sobald TREUE_ZIEL erreicht
- *  ist. */
+ *  ist.
+ *
+ *  Der Treuebonus ist bewusst an ein AKTIVES Abo gekoppelt (siehe Kundenwunsch: soll als
+ *  zusätzlicher Anreiz fürs Abo wirken, nicht unabhängig davon nutzbar sein) — ohne aktives,
+ *  bezahltes Abo bleibt der Fortschritt einfach stehen, statt weiterzuzählen. Sobald wieder ein
+ *  Abo aktiv ist, geht es von genau diesem Stand aus weiter (kein Reset auf 0). */
 export function registriereAbgeschlosseneBestellung(): Account {
   const a = getAccount();
   if (a.treuebonusAktiv) return a;
+  if (!aboStatus(a).aktiv) return a;
   const naechsterStand = Math.min(TREUE_ZIEL, a.treueBestellungen + 1);
   const updated: Account = {
     ...a,
@@ -265,6 +271,9 @@ export interface TreueFortschritt {
   ziel: number;
   fehlende: number;
   aktiv: boolean;
+  /** true, solange KEIN aktives Abo besteht — der Treuebonus ist dann als Anreiz sichtbar, aber
+   *  gesperrt (sammelt nicht weiter, kann nicht eingelöst werden), bis ein Abo abgeschlossen wird. */
+  gesperrt: boolean;
 }
 
 /** Aufbereiteter Fortschritt fürs Anzeigen im Kundenkonto ("7 von 10", "Dir fehlen noch 3 …"). */
@@ -274,6 +283,7 @@ export function treueFortschritt(a: Account): TreueFortschritt {
     ziel: TREUE_ZIEL,
     fehlende: Math.max(0, TREUE_ZIEL - a.treueBestellungen),
     aktiv: a.treuebonusAktiv,
+    gesperrt: !aboStatus(a).aktiv,
   };
 }
 

src/scripts/cart.ts

@@ -223,10 +223,15 @@ export function partnerCodeDiscount(_subtotal?: number): number {
 /** Rabatt in Euro, den der aktive Treuebonus auf den gewählten Artikel gibt — 0, wenn kein
  *  Bonus aktiv ist, kein Artikel gewählt wurde, oder der gewählte Artikel gerade nicht (mehr)
  *  zum Kauf ausgewählt im Warenkorb liegt. Gilt bewusst nur für EIN Stück der Position, nicht
- *  mehrfach bei größerer Menge — "ein frei wählbarer Artikel", kein Mengenrabatt-Ersatz. */
+ *  mehrfach bei größerer Menge — "ein frei wählbarer Artikel", kein Mengenrabatt-Ersatz.
+ *
+ *  Der Treuebonus ist an ein AKTIVES Abo gekoppelt (siehe account.ts) — falls das Abo zwischen
+ *  Freischaltung und Einlösung ausläuft, bleibt die Belohnung zwar erhalten, greift aber erst
+ *  wieder, sobald erneut ein Abo aktiv ist. */
 export function treuebonusDiscount(): number {
   const a = getAccount();
   if (!a.treuebonusAktiv || !a.treuebonusArtikelSlug) return 0;
+  if (!aboStatus(a).aktiv) return 0;
   const item = getCart().find((i) => i.slug === a.treuebonusArtikelSlug);
   if (!item || !istAusgewaehlt(item)) return 0;
   const produkt = getProduct(item.slug);

src/styles/global.css

@@ -1492,6 +1492,12 @@ a:focus-visible, button:focus-visible {
 /* Treuebonus-Fortschrittskarte im Inhaltsbereich — eigener grüner Farbton, sonst dieselbe
    "besondere" Formsprache wie die anderen Konto-Karten (siehe .profile-card). */
 .loyalty-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.9rem; }
+.loyalty-inner { display: flex; flex-direction: column; gap: 0.9rem; }
+/* Gesperrter Zustand ohne aktives Abo: soll bewusst NICHT ausgegraut/unattraktiv wirken (der
+   Treuebonus soll als Anreiz fürs Abo dienen), sondern klar als "gibt's schon, nur noch
+   freischalten" — daher derselbe Kartenrahmen wie im freigeschalteten Zustand, nur mit
+   Schloss-Titel in Gold (passend zur Abo-Farbwelt) und direktem Call-to-Action zum Abo. */
+.loyalty-locked-title { margin: 0; font-weight: 800; font-size: 1.1rem; color: #e3b23c; }
 .loyalty-progress-bar {
   width: 100%;
   height: 12px;