---
type: Frontend Wireframe
status: DRAFT
owner: 🖌️ UI/UX Designer
last_update: 2026-04-03
related:
  - docs/06_Frontend/Navigation_V3_Screen-Baum_und_Back-Stack.md
  - docs/03_Domain/01_Glossary/Ubiquitous_Language.md
  - docs/04_Agents/Roadmaps/UIUX_Roadmap.md
---

# Wireframes — Bewerb anlegen (mit Abteilungs‑Logik)

Ziel: Klarer 3‑Step‑Flow für das Anlegen eines Bewerbs inkl. automatischer Abteilungs‑Vorschläge gemäß CSN‑C‑NEU Pflicht‑Teilung. Desktop‑optimiert (Compose), Offline‑Friendly.

Flow: Grunddaten → Abteilungs‑Vorschlag → Bestätigung.

---

## Step 1 — Grunddaten

ASCII‑Wireframe (Modal Sheet empfohlen; Fullscreen falls weitere Metadaten benötigt):

```
┌────────── Bewerb anlegen — Grunddaten ──────────┐
│ Bezeichnung         [ Springen 1,10 m         ] │
│ Disziplin          [ Springen  v ]  Niveau [A] │
│ Alters-/Lizenz      [ Lizenz B v ]             │
│ Startgeld           [ 25,00 ]  Währung [EUR v] │
│ Optional: Max Nennungen [ 60 ]                 │
│                                                  
│ ← Zurück                        Weiter →        │
└─────────────────────────────────────────────────┘
```

Hinweise:
- Felder minimal halten; Tooltips für Regelwerk.
- Validierung live; „Weiter“ erst bei gültigen Pflichtfeldern.

---

## Step 2 — Abteilungs‑Vorschlag (CSN‑C‑NEU)

Visualisierung der automatischen Vorschläge, klare Unterscheidung der Abteilungs‑Typen:

```
┌──── Bewerb anlegen — Abteilungs‑Vorschlag ─────┐
│ Vorschläge (automatisch):                      │
│  ▣ SEPARATE_SIEGEREHRUNG (Pflicht‑Teilung)     │
│     • A   (Lizenz A)   ▢ zusammenlegen         │
│     • B   (Lizenz B)   ▢ zusammenlegen         │
│     • R1  (R1)         ▢ zusammenlegen         │
│                                                 │
│  ○ ORGANISATORISCH (nur Startlisten trennen)    │
│     • A+B zusammen (gemeinsame Wertung)        │
│                                                 │
│ Darstellung:                                    │
│  [A] [B] [R1]   → 3 Siegerehrungen getrennt     │
│  [A+B]          → 1 Siegerehrung gemeinsam      │
│                                                 │
│ Optionen:                                       │
│  [ Editieren… ]  (Abteilungen manuell anpassen) │
│  [ Info zur Pflicht‑Teilung ]                   │
│                                                 │
│ ← Zurück                         Weiter →       │
└─────────────────────────────────────────────────┘
```

UI‑Muster:
- Toggle zwischen `SEPARATE_SIEGEREHRUNG` und `ORGANISATORISCH` als RadioGroup mit erklärendem Subtext.
- „Zusammenlegen“ Checkbox erlaubt in Grenzfällen organisatorisches Zusammenführen; deaktiviert bei harter Pflicht‑Teilung.
- Badge/Hint „CSN‑C‑NEU: Pflicht‑Teilung aktiv“ mit Link zum Regeltext.

---

## Step 3 — Bestätigung (Review)

```
┌──── Bewerb anlegen — Review & Bestätigung ─────┐
│ Bewerb: Springen 1,10 m  | Disziplin: Springen │
│ Lizenz: B  | Startgeld: 25,00 EUR              │
│                                                │
│ Abteilungen (Typ: SEPARATE_SIEGEREHRUNG):      │
│  • A (eigene Wertung/Siegerehrung)             │
│  • B (eigene Wertung/Siegerehrung)             │
│  • R1 (eigene Wertung/Siegerehrung)            │
│                                                │
│ [Zurück]                     [Bewerb anlegen]  │
└────────────────────────────────────────────────┘
```

Validierung & States:
- Blocking Errors verhindern „Bewerb anlegen“.
- Backend‑Konflikte (Dubletten) als Inline‑Fehler mit CTA „Zum bestehenden Bewerb“.

---

## Komponenten & Implementierungshinweise

- Reusable: `FormRow`, `RadioCard` (Typ‑Auswahl mit Subtext), `DivisionPreviewChips` (Abteilungs‑Chips), `InfoBadge`.
- Accessibility: Fokus‑Reihenfolge, ARIA‑Rollen analog (Compose Semantics).
- Offline: Vorschläge aus lokalem Regelwerk + Cache berechnen; Sync klärt spätere Abweichungen.

---

## Edge‑Cases

- Pflicht‑Teilung aktiv, aber zu wenige Nennungen: Hinweis, spätere Zusammenlegung möglich (nur organisatorisch) — dokumentieren.
- Manuelle Anpassung erzeugt Konflikt mit Regel: Deutlicher Fehlerhinweis, Button disabled, Link „Warum?“.