[Service] Fwd: Statistik überarbeiten test

[tickbot]

Title: Enhancement: UI/UX-Überarbeitung der Statistik-Charts auf Monthy Hall Web

Beschreibung
Die Statistik-Seite wirkt derzeit sehr basic. Ziel ist eine optisch ansprechendere Darstellung der Diagramme durch kleinere, stärker zentrierte Charts, neue Farben/Designs und bessere Layout-Ästhetik.

Umsetzbare Details

• Layout/Layout-Behaviour
  • Diagramme zentriert in einem Container darstellen.
  • Chart-Breite begrenzen (z. B. max-width 720px) und responsive skalieren.
  • Vertical/Horizontal-Abstände konsistent anpassen (Padding/Margin standardisieren).
• Design & Farben
  • Neue Farbpalette verwenden und konsistent across alle Diagramme anwenden.
  • Theme-Tokens verwenden (z. B. colors.primary, colors.secondary, colors.grid).
  • Kontrastverhältnis von Diagrammelementen (Text/Labels vs. Hintergrund) >= 4.5:1 sicherstellen.
• Accessibility & Usability
  • Achsenbeschriftungen, Tooltips und ARIA-Labels sicherstellen.
  • Keyboard-Navigation unterstützen (falls zutreffend).
• Implementierung
  • Prüfen, welche Chart-Komponente verwendet wird (z. B. Chart.js / D3) und Anpassungen dort vornehmen.
  • CSS-Klassen konsolidieren; ggf. neue Wrapper-Komponenten/Styling-Schnittstellen einführen.
• Qualitätssicherung
  • Visuelle Regressionstests (z. B. Playwright/Screenshot-Vergleich) hinzufügen.
  • Mobile-, Tablet- und Desktop-Breakpoints testen.
• Dokumentation
  • Design/Theme-Dokumentation aktualisieren (token-basiertes Styling).

Akzeptanzkriterien

• Diagramme sind zentriert und kleiner (Desktop: Diagramm nutzt ca. 60–70% der Breite, Mobile vollbreit, keine Randüberschreitungen).
• Alle Diagramme verwenden die neue, konsistente Farbpalette und erfüllen den Kontrast-Anforderung von mindestens 4.5:1.
• Layout bleibt stabil auf Desktop, Tablet und Mobile (keine Overflow- oder Layout-Regressionen).
• Accessibility-Anforderungen erfüllt (Achsenbeschriftungen, Tooltips, ARIA-labels).
• Visuelle Regressionen werden durch automatisierte Tests bestätigt (keine wesentlichen Abweichungen gegenüber dem neuen Design).
• Design- und QA-Feedback von Product/Design bestätigt.

Anhänge:

Bild: Screenshot 2025-10-10 at 15.52.40.png (image/png)