[Service] Fwd: Statistiken überarbeiten

[tickbot]

Titel: Statistik-Diagramme überarbeiten (Monthy Hall Web)

Beschreibung

• Die Statistik-Seite von Monthy Hall Web wirkt aktuell Basic und optisch unausgereift. Ziel ist eine optische Aufwertung durch kleinere Graphen, zentrale Ausrichtung und eine konsistente, moderne Farbgestaltung.

Aufgaben

• Layout/Responsiveness
  • Diagramme zentrieren und in Cards platzieren.
  • Diagramm-Breite ca. 90% der Card, maximale Höhe 320px (Desktop); mobile 100% Breite.
  • Sicherstellen, dass das Layout auf Desktop/Tablett/Mobile stabil bleibt (keine Layout-Shift-Regression).
• Design/Palette
  • Neue, konsistente Farbpalette über Theme-Variablen implementieren.
  • Dokumentation der Palette und der verwendeten Farben hinzufügen.
• Diagramm-Details
  • Achsen, Legenden und Gridlines moderat gestalten; Sichtbarkeit priorisieren.
  • Farben der Diagramme konsistent mit der neuen Palette.
  • Schriftgrößen/Fonts anpassen für bessere Lesbarkeit.
• Accessibility
  • Kontrastverhältnis von mindestens 4.5:1 sicherstellen.
  • ARIA-/Screen-Reader-Beschriftungen für Diagramme ergänzen.
• Testing/QA
  • Visuelle Regressionstest oder manueller Review durchführen; sicherstellen, dass Daten unverändert bleiben.

Akzeptanzkriterien

• Neue Farbpalette implementiert und in der Design-Dokumentation beschrieben.
• Alle Diagramme sind zentriert, in Cards eingebettet und erfüllen die Größen-/Layout-Vorgaben (Desktop 90% Breite, max. Höhe 320px; Mobile 100% Breite).
• Farbkontrast erfüllt die Barrierefreiheitsanforderungen; Legenden/Achsen lesbar.
• Keine Funktions- oder Layout-Regressionen; Daten bleiben unverändert.
• Visueller Review durch Design/UI bestätigt Zustimmung zum neuen Look.

Hinweise

• Bevorzugte Chart-Bibliothek beibehalten (z. B. Chart.js/Plotly); Fokus liegt auf Styling, Layout und Accessibility.
• Bitte trage Labels entsprechend ein (UI/Design, Enhancement, High Priority).