From 8bb1bb89497c3727d30380610e47c00861757e3c Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 18:59:16 +0200
Subject: [PATCH] Nav-Kacheln: Funkeln leuchtet jetzt farblich passend zur
 jeweiligen Kiste
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die kleinen ✨-Sternchen oben rechts in den Kontobereich-Kacheln waren
bisher überall neutral-gelb, unabhängig von der Kistenfarbe. Jetzt bekommt
jedes Funkeln einen farbigen Schein passend zur eigenen Akzentfarbe der
Kiste (Lila/Teal/Pink/Grün/Gold).

Das Abo-Funkeln sticht zusätzlich klar heraus: eigener goldener Stern (🌟
statt ✨), größer, kräftiger und schneller leuchtend — soll dem Premium-
Charakter des Abos gerecht werden und auf den ersten Blick auffallen.

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               | 17 +++++++++++++++++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro
index 4324c76..ab311ea 100644
--- a/src/pages/ch/konto/angemeldet.astro
+++ b/src/pages/ch/konto/angemeldet.astro
@@ -131,7 +131,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
-          <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="abo-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statAbo}</span>
diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro
index f9f7e1c..cd0b06f 100644
--- a/src/pages/en/konto/angemeldet.astro
+++ b/src/pages/en/konto/angemeldet.astro
@@ -131,7 +131,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
-          <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="abo-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statAbo}</span>
diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro
index 5dd6382..c99e269 100644
--- a/src/pages/fr/konto/angemeldet.astro
+++ b/src/pages/fr/konto/angemeldet.astro
@@ -131,7 +131,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
-          <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="abo-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statAbo}</span>
diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro
index 148cce8..ed5d2d5 100644
--- a/src/pages/konto/angemeldet.astro
+++ b/src/pages/konto/angemeldet.astro
@@ -132,7 +132,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
         </button>
         <button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
-          <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="abo-nav-value">–</span>
           <span class="account-nav-label">{t.accountDash.statAbo}</span>
diff --git a/src/styles/global.css b/src/styles/global.css
index beeee04..8dda709 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1563,6 +1563,23 @@ a:focus-visible, button:focus-visible {
   animation: account-nav-sparkle-twinkle 2.4s ease-in-out infinite;
   animation-delay: var(--nav-delay, 0s);
   pointer-events: none;
+  /* Emoji-Glyphen lassen sich nicht per color: einfärben — ein farbiger Schein passend zur
+     jeweiligen Kistenfarbe (--nav-color) sorgt trotzdem dafür, dass jedes Funkeln sichtbar
+     "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;
+  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);
+}
+@keyframes abo-nav-sparkle-twinkle {
+  0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(-10deg); }
+  50% { opacity: 1; transform: scale(1.35) rotate(10deg); }
 }
 @keyframes account-nav-item-shift {
   0%, 100% { background-position: 0% 50%; }