From 64110484decb88f3b28775f91fa1a9cca76c3aee Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 17:11:20 +0200
Subject: [PATCH] Konto-Kopfkarte: "Meine Daten"-Button statt Abo-Button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der "Mein Abo verwalten"-Button in der Kopfkarte fällt wieder weg — der
Zugriff aufs Abo läuft ab jetzt nur noch über die eigene "Mein Abo"-Nav-
Kachel. Stattdessen wandert "Meine Daten" aus der Schnellnavigation direkt
in die Kopfkarte: ein neuer, gleich premium gestylter Button (Teal/Lila statt
Gold, gleiches wanderndes Glanzlicht) unten rechts in der Karte, der zum
Profil-Bereich springt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/i18n/ui.ts                      |  4 +++
 src/pages/ch/konto/angemeldet.astro | 24 ++++++-------
 src/pages/en/konto/angemeldet.astro | 24 ++++++-------
 src/pages/fr/konto/angemeldet.astro | 24 ++++++-------
 src/pages/konto/angemeldet.astro    | 24 ++++++-------
 src/styles/global.css               | 54 ++++++++++++++++++++++++++++-
 6 files changed, 101 insertions(+), 53 deletions(-)

diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 7ec5dea..f6772da 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -232,6 +232,7 @@ export const ui = {
       logout: "Abmelden",
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen", statData: "Meine Daten", statLoyalty: "Treuebonus",
+      datenHeaderBtn: "👤 Meine Daten",
       loyaltyTitle: "🎁 Mein Treuebonus",
       loyaltyProgressTemplate: "Dein Bestellfortschritt: {cur} von {ziel} Bestellungen",
       loyaltyRemainingOne: "Dir fehlt noch 1 Bestellung, bis du 20 % Rabatt auf einen Artikel deiner Wahl erhältst.",
@@ -529,6 +530,7 @@ export const ui = {
       logout: "Sign out",
       navLabel: "Account section navigation",
       statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments", statData: "My details", statLoyalty: "Loyalty reward",
+      datenHeaderBtn: "👤 My details",
       loyaltyTitle: "🎁 My loyalty reward",
       loyaltyProgressTemplate: "Your order progress: {cur} of {ziel} orders",
       loyaltyRemainingOne: "You need 1 more order to get 20% off an item of your choice.",
@@ -826,6 +828,7 @@ export const ui = {
       logout: "Abmälde",
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige", statData: "Mini Date", statLoyalty: "Treuebonus",
+      datenHeaderBtn: "👤 Mini Date",
       loyaltyTitle: "🎁 Mis Treuebonus",
       loyaltyProgressTemplate: "Din Bstellfortschritt: {cur} vo {ziel} Bstellige",
       loyaltyRemainingOne: "Dir fehlt no 1 Bstellig, bis du 20 % Rabatt uf en Artikel dinere Wahl übercho.",
@@ -1123,6 +1126,7 @@ export const ui = {
       logout: "Se déconnecter",
       navLabel: "Navigation de l'espace client",
       statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours", statData: "Mes données", statLoyalty: "Récompense",
+      datenHeaderBtn: "👤 Mes données",
       loyaltyTitle: "🎁 Ma récompense fidélité",
       loyaltyProgressTemplate: "Votre progression : {cur} sur {ziel} commandes",
       loyaltyRemainingOne: "Il vous manque encore 1 commande pour obtenir 20 % de réduction sur l'article de votre choix.",
diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro
index 1c7fa94..5e307b0 100644
--- a/src/pages/ch/konto/angemeldet.astro
+++ b/src/pages/ch/konto/angemeldet.astro
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         </div>
         <div class="account-head-actions">
-          <button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
-            <span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
-            {t.accountDash.aboHeaderBtn}
-          </button>
           <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
         </div>
+        <div class="account-head-daten-row">
+          <button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
+            <span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
+            {t.accountDash.datenHeaderBtn}
+          </button>
+        </div>
       </div>
 
       {/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
-        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
-          <span class="account-nav-icon" aria-hidden="true">👤</span>
-          <span class="account-nav-label">{t.accountDash.statData}</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-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  // Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
-  document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
-    setActiveTab("abo");
-    aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
+  // Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
+  // aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
+  document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
+    setActiveTab("daten");
+    datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
   });
 
   setActiveTab(null);
diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro
index d7d138c..91d6cc2 100644
--- a/src/pages/en/konto/angemeldet.astro
+++ b/src/pages/en/konto/angemeldet.astro
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         </div>
         <div class="account-head-actions">
-          <button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
-            <span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
-            {t.accountDash.aboHeaderBtn}
-          </button>
           <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
         </div>
+        <div class="account-head-daten-row">
+          <button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
+            <span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
+            {t.accountDash.datenHeaderBtn}
+          </button>
+        </div>
       </div>
 
       {/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
-        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
-          <span class="account-nav-icon" aria-hidden="true">👤</span>
-          <span class="account-nav-label">{t.accountDash.statData}</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-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  // Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
-  document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
-    setActiveTab("abo");
-    aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
+  // Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
+  // aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
+  document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
+    setActiveTab("daten");
+    datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
   });
 
   setActiveTab(null);
diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro
index b30842e..6ebe9ca 100644
--- a/src/pages/fr/konto/angemeldet.astro
+++ b/src/pages/fr/konto/angemeldet.astro
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         </div>
         <div class="account-head-actions">
-          <button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
-            <span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
-            {t.accountDash.aboHeaderBtn}
-          </button>
           <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
         </div>
+        <div class="account-head-daten-row">
+          <button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
+            <span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
+            {t.accountDash.datenHeaderBtn}
+          </button>
+        </div>
       </div>
 
       {/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
-        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
-          <span class="account-nav-icon" aria-hidden="true">👤</span>
-          <span class="account-nav-label">{t.accountDash.statData}</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-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  // Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
-  document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
-    setActiveTab("abo");
-    aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
+  // Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
+  // aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
+  document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
+    setActiveTab("daten");
+    datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
   });
 
   setActiveTab(null);
diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro
index 2f3a8ff..1455c4d 100644
--- a/src/pages/konto/angemeldet.astro
+++ b/src/pages/konto/angemeldet.astro
@@ -90,12 +90,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         </div>
         <div class="account-head-actions">
-          <button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
-            <span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
-            {t.accountDash.aboHeaderBtn}
-          </button>
           <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
         </div>
+        <div class="account-head-daten-row">
+          <button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
+            <span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
+            {t.accountDash.datenHeaderBtn}
+          </button>
+        </div>
       </div>
 
       {/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -120,11 +122,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
         </button>
-        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
-          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
-          <span class="account-nav-icon" aria-hidden="true">👤</span>
-          <span class="account-nav-label">{t.accountDash.statData}</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-icon" aria-hidden="true">🎁</span>
@@ -489,10 +486,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  // Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
-  document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
-    setActiveTab("abo");
-    aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
+  // Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
+  // aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
+  document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
+    setActiveTab("daten");
+    datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
   });
 
   setActiveTab(null);
diff --git a/src/styles/global.css b/src/styles/global.css
index eae845a..a93f00f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1345,6 +1345,10 @@ a:focus-visible, button:focus-visible {
 .account-head > * { position: relative; z-index: 1; }
 .account-head-identity { display: flex; align-items: center; gap: 1rem; }
 .account-head-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
+/* Eigene volle Zeile unten in der Kopfkarte für den "Meine Daten"-Button — dank flex-wrap auf
+   .account-head bricht dieser 100%-breite Block automatisch in eine neue Zeile um, der Button
+   selbst bleibt rechtsbündig. Passt sich damit jeder Kartenhöhe an, ganz ohne absolute Positionierung. */
+.account-head-daten-row { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.9rem; }
 .account-head h1 { margin: 0.2rem 0 0.5rem; }
 .account-head .lead { margin: 0; max-width: 52ch; }
 .account-head-sparkle {
@@ -1475,7 +1479,6 @@ a:focus-visible, button:focus-visible {
 .account-nav-orders { --nav-color: #9b7fd6; --nav-delay: 0s; }
 .account-nav-open { --nav-color: var(--c-accent); --nav-delay: 0.4s; }
 .account-nav-wishlist { --nav-color: var(--c-sale); --nav-delay: 0.8s; }
-.account-nav-data { --nav-color: #e3b23c; --nav-delay: 1.2s; }
 .account-nav-loyalty { --nav-color: #6ecb8f; --nav-delay: 1.6s; }
 /* Sobald der Treuebonus wirklich freigeschaltet ist (10/10), bekommt sein Knopf zusätzlich zur
    normalen "Premium"-Optik noch einen kräftigeren, schneller pulsierenden Rahmen — soll auf
@@ -2400,6 +2403,55 @@ a:focus-visible, button:focus-visible {
 }
 @media (prefers-reduced-motion: reduce) { .btn-abo-hero, .btn-abo-hero::after, .btn-abo-hero-sparkle { animation: none; } }
 
+/* "Meine Daten"-Button unten rechts in der Kopfkarte — dasselbe Premium-Prinzip wie der Abo-Held
+   oben (wanderndes Mehrfarb-Verlaufslicht am Rand + Glanzlicht + funkelndes Sternchen), aber in
+   Teal/Lila statt Gold, damit er sich klar von Abo-bezogenen Elementen abhebt und stattdessen zur
+   Akzentfarbe der Kopfkarte selbst passt (siehe "MEIN KONTO"-Eyebrow). */
+.btn-daten-hero {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.3rem;
+  border-radius: var(--radius-l);
+  border: 1.5px solid transparent;
+  background:
+    linear-gradient(155deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
+    linear-gradient(120deg, var(--c-accent), #9b7fd6, var(--c-accent)) border-box;
+  background-size: 100% 100%, 300% 100%;
+  color: #d6f7ff;
+  font-weight: 800;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  animation: daten-hero-border-shift 5s ease-in-out infinite, daten-hero-glow 2.4s ease-in-out infinite;
+  transition: transform 0.2s var(--ease);
+}
+.btn-daten-hero:hover { transform: translateY(-2px) scale(1.03); }
+.btn-daten-hero::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -60%;
+  width: 35%;
+  height: 100%;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+  transform: skewX(-18deg);
+  animation: account-head-shine 3.4s ease-in-out infinite;
+  pointer-events: none;
+}
+.btn-daten-hero-sparkle { display: inline-block; animation: account-nav-sparkle-twinkle 2.2s ease-in-out infinite; }
+@keyframes daten-hero-border-shift {
+  0%, 100% { background-position: 0 0, 0% 50%; }
+  50% { background-position: 0 0, 100% 50%; }
+}
+@keyframes daten-hero-glow {
+  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 16px -4px color-mix(in srgb, var(--c-accent) 60%, transparent); }
+  50% { box-shadow: 0 0 0 2px color-mix(in srgb, #9b7fd6 40%, transparent), 0 0 24px -2px color-mix(in srgb, #9b7fd6 70%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) { .btn-daten-hero, .btn-daten-hero::after, .btn-daten-hero-sparkle { animation: none; } }
+
 /* Abosystem: drei Planvergleichs-Karten + Statuskarte + Benachrichtigungsliste. */
 .abo-plans { margin: 1.4rem 0 1.6rem; }
 .abo-plan-card {