From 5c1ebfac60f8c47954d13cbc004571c44c0dc125 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 19:58:58 +0200
Subject: [PATCH] Treuebonus-Funkeln im gleichen besonderen Stil wie Abo, aber
 eigene Farbe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Treuebonus-Kiste im Konto-Dashboard bekam bisher das normale kleine ✨ wie
Bestellungen/Sendungen/Wunschliste. Jetzt nutzt sie denselben großen, kräftig
pulsierenden 🌟-Stern wie die Abo-Kiste (4 Sprachen). Die CSS-Regel dafür gilt
jetzt für beide Kisten gemeinsam und färbt den Glanz automatisch in der jeweils
eigenen --nav-color ein (Abo = Gold, Treuebonus = Grün) statt eines fest codierten
Goldtons — Stil bleibt identisch, nur die Farbe unterscheidet die beiden klar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/pages/ch/konto/angemeldet.astro |  2 +-
 src/pages/en/konto/angemeldet.astro |  2 +-
 src/pages/fr/konto/angemeldet.astro |  2 +-
 src/pages/konto/angemeldet.astro    |  2 +-
 src/styles/global.css               | 15 +++++++++------
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro
index ab311ea..abd4c37 100644
--- a/src/pages/ch/konto/angemeldet.astro
+++ b/src/pages/ch/konto/angemeldet.astro
@@ -125,7 +125,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
+          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
           <span class="account-nav-icon" aria-hidden="true">🎁</span>
           <span class="account-nav-value" id="loyalty-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro
index cd0b06f..33e4d93 100644
--- a/src/pages/en/konto/angemeldet.astro
+++ b/src/pages/en/konto/angemeldet.astro
@@ -125,7 +125,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
+          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
           <span class="account-nav-icon" aria-hidden="true">🎁</span>
           <span class="account-nav-value" id="loyalty-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro
index c99e269..472b090 100644
--- a/src/pages/fr/konto/angemeldet.astro
+++ b/src/pages/fr/konto/angemeldet.astro
@@ -125,7 +125,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
+          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
           <span class="account-nav-icon" aria-hidden="true">🎁</span>
           <span class="account-nav-value" id="loyalty-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro
index ed5d2d5..d6b0928 100644
--- a/src/pages/konto/angemeldet.astro
+++ b/src/pages/konto/angemeldet.astro
@@ -126,7 +126,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
+          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
           <span class="account-nav-icon" aria-hidden="true">🎁</span>
           <span class="account-nav-value" id="loyalty-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
diff --git a/src/styles/global.css b/src/styles/global.css
index a0e8f23..18b9898 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1568,14 +1568,17 @@ a:focus-visible, button:focus-visible {
      "seine eigene" Farbe trägt, statt überall gleich neutral-gelb zu wirken. */
   filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nav-color, var(--c-accent)) 75%, transparent));
 }
-/* Das Abo-Funkeln soll sich zusätzlich klar von den anderen abheben — eigener Gold-Stern statt
-   des normalen Sternchens, größer und kräftiger/schneller leuchtend, passend zum "Premium"-
-   Charakter des Abos (soll auf den ersten Blick als "hier ist was Besonderes" auffallen). */
-.account-nav-abo .account-nav-sparkle {
-  font-size: 1.1rem;
+/* Abo UND Treuebonus sollen sich klar von den restlichen Kisten abheben — derselbe große,
+   kräftig leuchtende Stern (🌟 statt ✨) mit derselben "Premium"-Bewegung, ABER jede Kiste
+   färbt ihren eigenen Stern automatisch in ihrer eigenen --nav-color ein (Abo = Gold, Treue-
+   bonus = Grün) statt eines hartkodierten Farbtons — so bleibt der STIL identisch/"besonders",
+   nur die Farbe unterscheidet die beiden klar voneinander, ganz ohne Duplizierung der Regel. */
+.account-nav-abo .account-nav-sparkle,
+.account-nav-loyalty .account-nav-sparkle {
+  font-size: 1.15rem;
   animation-name: abo-nav-sparkle-twinkle;
   animation-duration: 1.8s;
-  filter: drop-shadow(0 0 7px color-mix(in srgb, #e3b23c 85%, transparent)) drop-shadow(0 0 2px #fff);
+  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nav-color, #e3b23c) 85%, transparent)) drop-shadow(0 0 2px #fff);
 }
 @keyframes abo-nav-sparkle-twinkle {
   0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(-10deg); }