refactor: Standardisiere Formular-Layout (Label oben, volle Breite, linksbündig)
CSS (frontend/src/app.css):
- .form-row: flex-direction column, volle Breite, margin-bottom 16px
- .form-label: display block, font-weight 600, linksbündig
- .form-input: width 100%, text-align left (statt right 90px), padding 10px 12px
- textarea.form-input: resize vertical, min-height 80px
- select.form-input: cursor pointer
- .form-row--inline: Neue Variante für Ausnahmen (kurze Werte + Einheit)
Dokumentation (.claude/rules/CODING_RULES.md):
- Neue Regel Frontend §6: Formular-Standard (VERBINDLICH ab 2026-04-22)
- Code-Beispiele für Standard-Layout (input, textarea, select)
- Klare Regeln: Label = <label>, Pflichtfelder mit *, volle Breite, linksbündig
- Inline-Variante nur für Ausnahmen (Zahlen mit Einheit)
WICHTIG: Bestehende Formulare (Exercises, Clubs, Skills, TrainingPlanning)
nutzen bereits größtenteils diese Struktur und profitieren automatisch
von den CSS-Änderungen.
Vorteile:
- Konsistente UX über alle Formulare
- Mobile-friendly (volle Breite, kein horizontal scrolling)
- Bessere Lesbarkeit (Label als Überschrift)
- Einfacher wartbar (ein Standard für alle)
Nächster Schritt: Bestehende Formulare testen, ggf. kleine Anpassungen
Lars
cbb783222c