Treuebonus-Karte deutlich detaillierter: Meilensteine, Kennzahlen, Regeln

Die Treuebonus-Karte im Konto zeigte bisher nur einen nackten Fortschrittsbalken
mit einem Satz Text. Jetzt: (1) zehn Meilenstein-Striche direkt im Balken plus
Geschenk-Symbol am Ziel, (2) vier Kennzahl-Kacheln im gleichen Stil wie beim Abo-
Status (Gesammelt, Noch nötig, Bonus bei Ziel, Bisher eingelöst), (3) ein neues
Datenfeld "wie oft insgesamt schon eingelöst + wann zuletzt" (account.ts), das in
einer eigenen, gold→grün abgewandelten "Bonus bereit"-Karte mit Glow-Effekt landet
statt eines einfachen Links, (4) eine kurze Icon-Liste mit den Sammelregeln statt
einem einzelnen Erklärsatz. Alles in 4 Sprachen, mit echten Vorschau-Zuständen
(Fortschritt/bereit/gesperrt) per Screenshot verifiziert.

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

src/styles/global.css

@@ -1505,6 +1505,7 @@ a:focus-visible, button:focus-visible {
    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 {
+  position: relative;
   width: 100%;
   height: 12px;
   border-radius: 999px;
@@ -1519,8 +1520,58 @@ a:focus-visible, button:focus-visible {
   background: linear-gradient(90deg, #6ecb8f, #5fd3ec);
   transition: width 0.5s var(--ease);
 }
+/* Balken + Ziel-Symbol als Reihe — das 🎁 sitzt bewusst AUSSERHALB des Balkens (statt per
+   ::after am Rand), damit "overflow:hidden" (für die inneren Meilenstein-Punkte nötig) es nicht
+   anschneidet. */
+.loyalty-progress-track { display: flex; align-items: center; gap: 0.5rem; }
+.loyalty-progress-track .loyalty-progress-bar { flex: 1; }
+.loyalty-progress-goal-icon { flex-shrink: 0; font-size: 1.05rem; }
+/* Zehn Meilenstein-Striche im Balken selbst — machen "6 von 10" auf einen Blick als echte
+   Sammelkarte greifbar, statt nur eine abstrakte Prozent-Füllung zu zeigen. */
+.loyalty-progress-dots { position: absolute; inset: 0; pointer-events: none; }
+.loyalty-progress-dot {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: rgba(10, 9, 16, 0.3);
+  transform: translateX(-50%);
+}
 .loyalty-progress-text { font-weight: 700; font-size: 1.05rem; margin: 0; }
 .loyalty-explainer { color: var(--c-text-muted); margin: 0.4rem 0 0; }
+.loyalty-last-redeemed { color: var(--c-text-muted); margin: -0.5rem 0 0; }
+
+/* Stat-Kacheln (siehe .abo-stat-grid/.abo-stat-tile für die geteilte Basis) — die Treuebonus-
+   eigene Hervorhebungsfarbe ist Grün statt Gold, passend zum restlichen Treuebonus-Auftritt
+   (Fortschrittsbalken, Nav-Kachel, Stern). */
+.loyalty-stat-tile-highlight { background: color-mix(in srgb, #6ecb8f 12%, transparent); border-color: color-mix(in srgb, #6ecb8f 38%, transparent); }
+.loyalty-stat-tile-highlight .abo-stat-value { color: #6ecb8f; }
+
+/* "Bonus bereit"-Karte — gleiches Prinzip wie .abo-reward-ready (leicht pulsierender Rahmen,
+   soll als "hier wartet was Kostenloses" auffallen), nur in Grün statt Gold. */
+.loyalty-ready-block {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  padding: 0.8rem 1.1rem;
+  border-radius: var(--radius-l);
+  background: linear-gradient(155deg, color-mix(in srgb, #6ecb8f 16%, var(--c-anthracite-light)), var(--c-anthracite));
+  border: 1.5px solid color-mix(in srgb, #6ecb8f 45%, transparent);
+  animation: loyalty-ready-glow 2.6s ease-in-out infinite;
+}
+@keyframes loyalty-ready-glow {
+  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #6ecb8f 35%, transparent), 0 0 14px -6px color-mix(in srgb, #6ecb8f 55%, transparent); }
+  50% { box-shadow: 0 0 0 1px color-mix(in srgb, #6ecb8f 55%, transparent), 0 0 22px -4px color-mix(in srgb, #6ecb8f 75%, transparent); }
+}
+.loyalty-ready-icon { font-size: 1.9rem; flex-shrink: 0; }
+.loyalty-ready-body { display: flex; flex-direction: column; gap: 0.35rem; }
+.loyalty-ready-body strong { font-size: 0.95rem; }
+.loyalty-ready-body p { margin: 0; }
+@media (prefers-reduced-motion: reduce) { .loyalty-ready-block { animation: none; } }
+
+/* Kurze Sammel-Regeln als Icon-Liste statt Fließtext — schneller erfassbar. */
+.loyalty-rules { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; color: var(--c-text-muted); }
+.loyalty-rules li { display: flex; align-items: flex-start; gap: 0.5em; }
 .loyalty-card-sparkle { position: absolute; font-size: 0.85rem; pointer-events: none; z-index: 1; }
 .loyalty-card-sparkle-1 { top: 1.1rem; right: 1.3rem; animation: account-nav-sparkle-twinkle 2.7s ease-in-out infinite; }
 .loyalty-card-sparkle-2 { bottom: 1.2rem; left: 1.3rem; font-size: 0.7rem; animation: account-nav-sparkle-twinkle 3.5s ease-in-out infinite 0.5s; }