diff --git a/.claude/docs/functional/DOMAIN_MODEL.md b/.claude/docs/functional/DOMAIN_MODEL.md
index f951050..5bc9006 100644
--- a/.claude/docs/functional/DOMAIN_MODEL.md
+++ b/.claude/docs/functional/DOMAIN_MODEL.md
@@ -482,6 +482,8 @@ skill_level_definitions (
 
 **Dokumentation:** `functional/PARALLEL_TRAINING_STREAMS_CONCEPT.md`, Umsetzung `technical/PARALLEL_TRAINING_STREAMS_SPEC.md`.
 
+**Schema-Hinweis (2026-05):** Tabelle `training_unit_sections` hat **`UNIQUE (training_unit_id, order_index)`** (Migration 031). Damit sind **zwei gleichzeitige „Spuren“ mit jeweils eigener Sektion auf derselben `order_index`** nicht abbildbar — Voraussetzung für Parallele Streams ist eine **geplante Migrations-/Constraint-Anpassung** (partielle Uniques pro Phase/Stream); siehe Arbeitsdokument `.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md`. **Keine invasive Migration ohne explizite Freigabe.**
+
 ---
 
 ## Medien-Archiv & Übungs-Anhänge (Stand 2026-05-07)
diff --git a/.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md b/.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md
new file mode 100644
index 0000000..6801b07
--- /dev/null
+++ b/.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md
@@ -0,0 +1,125 @@
+# Parallele Trainingsstreams — Ist-Analyse und risikoarmer Umsetzungsplan
+
+**Status:** Stufe A (Analyse/Plan, ohne produktive Umsetzung in jener Session)  
+**Stand:** 2026-05-14  
+**Verbindliche fachliche Basis:** `.claude/docs/functional/PARALLEL_TRAINING_STREAMS_CONCEPT.md`, `.claude/docs/technical/PARALLEL_TRAINING_STREAMS_SPEC.md`
+
+Dieses Dokument **persistiert** die strukturierte Prüfung der realen Codebasis (`training_planning.py`, `training_framework_programs.py`, `training_unit_sections`/`items`, Frontend Planung/Run/Coach) und den empfohlenen Implementierungspfad.
+
+---
+
+## 1. Zusammenfassung
+
+- Plan-Inhalt pro Einheit ist heute **eine flache Liste** `training_unit_sections` mit **`UNIQUE (training_unit_id, order_index)`** (Migration 031) und `training_unit_section_items`; zentral: **`_fetch_sections`**, **`_replace_unit_sections`**, **`_hydrate_training_unit_payload`** in `backend/routers/training_planning.py`.
+- Parallele Phasen/Streams **passen** zu den Produktregeln (ein Kalendertermin, N Streams, je Miniplan), sind im Schema aber **nicht** abbildbar ohne Erweiterung und **ohne Auflösung** des globalen `order_index`-Modells.
+- **Empfehlung:** **Normalisierte** Tabellen `training_unit_phases`, `training_unit_parallel_streams`, erweiterte `training_unit_sections` mit FK auf Phase bzw. Stream, **partielle Unique-Indizes** statt `UNIQUE (training_unit_id, order_index)` für alle Sektionen.
+- **Blocker im Code:** u. a. `POST /api/training-units/{id}/apply-training-module` mit **`section_order_index` global pro Einheit** (`_resolve_training_unit_section_id`).
+- **Nicht persistiert an anderer Stelle:** Erste Fassung existierte nur als Chat-Antwort; dieses File ist die **kanonische** Arbeitskopie im Repo.
+
+---
+
+## 2. Ist-Analyse (kurz)
+
+### Datenbank
+
+- `training_unit_sections`: u. a. `training_unit_id`, `order_index`, `UNIQUE (training_unit_id, order_index)`.
+- `training_unit_section_items`: Übung/Notiz, `planning_method_profile` (Kombi), `source_training_module_id`.
+
+### Backend (`training_planning.py`)
+
+- `_replace_unit_sections`: DELETE aller Sektionen der Einheit + INSERT (vollständiger Ersetzungsbaum).
+- `_sections_clone_payload` + `_copy_blueprint_into_scheduled_unit`: tiefe Kopie für `from-framework-slot`.
+- `_flatten_exercises_from_sections`: flaches `exercises` am Unit-Payload.
+- `apply_training_module_to_training_unit`: Sektion per **`section_order_index`** global.
+
+### Rahmen (`training_framework_programs.py`)
+
+- Blueprint-`training_units` pro Slot; gleiche `_replace_unit_sections`-Semantik.
+
+### Frontend
+
+- Planung: `TrainingPlanningPageRoot.jsx`, `TrainingUnitSectionsEditor`, `buildSectionsPayload` / `normalizeUnitToForm`.
+- Run: `TrainingUnitRunPage.jsx` — Fortschritt `sessionStorage` Key `sj_training_run_checked_${unitId}`.
+- Coach: `TrainingCoachPage.jsx` — `flattenPlanTimeline` (linearer Ablauf).
+
+### Tests
+
+- Kaum Abdeckung für Plan-Inhalt; vorhanden u. a. `test_training_unit_assignments.py` (Merge Co-Trainer, ohne DB), `test_training_units_list_keyset.py` (Keyset-Validierung).
+
+---
+
+## 3. Technische Optionen und Empfehlung
+
+| Option | Kurz |
+|--------|------|
+| A JSONB nur auf `training_units` | Niedriges DDL-Risiko, hohes Drift-/Wartungsrisiko — **nicht empfohlen** |
+| B Normalisiert Phasen/Streams | **Empfohlen** — eine Wahrheit, saubere Kopie, Rahmen kompatibel |
+| C Nur UI-Konvention ohne DB | Widerspricht Produkt — **abgelehnt** |
+
+---
+
+## 4. Migrations- und Kompatibilitätsstrategie
+
+- Default **`whole_group`‑Phase** für alle bestehenden Einheiten; alle bisherigen Sektionen erhalten `phase_id`.
+- Unique-Regel: **pro Phase** bzw. **pro Stream** `order_index` eindeutig (partielle Unique-Indizes).
+- API optional: zusätzlich abgeleitetes flaches `sections` für Übergang — Entscheidung je nach Consumer (praktisch nur dieses Frontend).
+
+---
+
+## 5. API- / Frontend-Hotspots
+
+- `GET`/`PUT` `/api/training-units/{id}`: verschachtelte `phases` / `streams` / `sections` / `items`.
+- `POST .../apply-training-module`: Kontext **Phase/Stream + Sektionsindex im Träger**.
+- Run/Coach: stream-spezifischer Fortschritt; `flattenPlanTimeline` phase-aware oder pro Stream.
+
+---
+
+## 6. Implementierungspakete (Überblick)
+
+0. Spike DDL + Contract-Doku  
+1. **Erledigt (2026-05-14):** Migration **063** + `training_planning`: Phasen/Streams-Schema, Backfill whole_group, `GET` mit `phases`, Legacy-`sections`-PUT unverändert (eine whole_group-Phase).  
+2. PUT mit echten Parallelphasen / Streams, `apply-training-module` mit Stream-Kontext, `from-framework-slot`-Kopie  
+3. Planung UI  
+4. Run + Coach  
+5. Co-Trainer pro Stream  
+6. MVP+ (Duplizieren, Verschieben, „nur meine Spur“)
+
+---
+
+## 7. Risiken
+
+- Migration Unique-Constraint / bestehende Daten.  
+- Regression Run/Coach / Dashboard-Joins (meist unkritisch, solange `training_unit_id` auf Sektionen bleibt).  
+- Rahmen-Blueprints: gleiche Struktur wie Kalender-Einheiten anstreben (oder bewusst zweite Phase nur Kalender).
+
+---
+
+## 8. Offene Produkt-/Technikfragen
+
+- Rahmen-Blueprint parallel im MVP oder erst nach Kalender-Einheit?  
+- Semantik `exercises`-Flatlist bei Parallelität.  
+- Merge-Regel `assistant_trainer_profile_ids` Kopf vs. Stream-Zuweisungen.
+
+---
+
+## 9. Verweise
+
+- Fachkonzept: `.claude/docs/functional/PARALLEL_TRAINING_STREAMS_CONCEPT.md`  
+- Technische Spec (Entwurf): `.claude/docs/technical/PARALLEL_TRAINING_STREAMS_SPEC.md`  
+- Domänenüberblick: `.claude/docs/functional/DOMAIN_MODEL.md` (Abschnitt Parallele Streams)  
+- `./PARALLEL_TRAINING_STREAMS_PREREQ_PROMPT.md` — **Prompt** für Folgesession (Performance/Wartung/Vorbereitung)
+
+---
+
+## 10. Vorbereitende Arbeiten (Session 2026-05-13)
+
+Ohne produktives Parallel-Feature, nur Risikoabbau und Transparenz:
+
+- **`training_planning.py`:** Lesepfad `_fetch_sections` in SQL-Konstanten + `_fetch_section_items_for_section` / `_hydrate_section_item_combination_slots` strukturiert; `_replace_unit_sections` delegiert an `_insert_one_replacement_section`; `_hydrate_training_unit_payload` dokumentiert.
+- **Tests:** `tests/test_training_planning_sections_pure.py` (flatten, ohne DB); `tests/test_training_planning_sections_integration.py` (Roundtrip replace↔fetch bei `TRAINING_PLANNING_INTEGRATION=1`).
+- **Frontend:** Kurzkommentare an Planung (`TrainingPlanningPageRoot`, `buildSectionsPayload`), Run, Coach, `flattenPlanTimeline` — Anbindungspunkte für spätere Phase/Stream-Logik.
+- **DOMAIN_MODEL:** UNIQUE-Hinweis und „keine Migration ohne Freigabe“.
+
+**Empfohlene nächste Schritte:** Pakete **0** (DDL/Contract festzurren) und **1** (Schema + Migration + hydrate/replace laut Plan Abschnitt 4–6) in einer dedizierten Feature-Session; danach Paket **2** (PUT/Module/Clone).
+
+---
diff --git a/.claude/docs/working/PARALLEL_TRAINING_STREAMS_PREREQ_PROMPT.md b/.claude/docs/working/PARALLEL_TRAINING_STREAMS_PREREQ_PROMPT.md
new file mode 100644
index 0000000..4079d15
--- /dev/null
+++ b/.claude/docs/working/PARALLEL_TRAINING_STREAMS_PREREQ_PROMPT.md
@@ -0,0 +1,41 @@
+# Prompt: Vorbereitungs- / Vorarbeit-Session (Performance & Wartung) für „Parallele Trainingsstreams“
+
+**Kontext:** Du arbeitest in **Shinkan Jinkendo** (`c:\Dev\shinkan-jinkendo`). Das Feature **Parallele Trainingsstreams / Breakout** ist **inhaltlich** spezifiziert; eine **Ist-Analyse und ein risikoarmer Umsetzungsplan** liegen **persistiert** in:
+
+- `.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md`
+- Fachlich: `.claude/docs/functional/PARALLEL_TRAINING_STREAMS_CONCEPT.md`
+- Technik-Entwurf: `.claude/docs/technical/PARALLEL_TRAINING_STREAMS_SPEC.md`
+
+**Deine Rolle:** Du hast bereits **Refaktorierungs- und Wartungsaufgaben** mit Fokus **Performance, Lesbarkeit und Testbarkeit** durchgeführt. In **dieser** Session geht es **nicht** darum, das komplette Parallel-Feature zu bauen, sondern um **Vorarbeiten („Prerequisites“)**, die die geplante Komplexitätsauflösung **sicherer und billiger** machen.
+
+## Ziele
+
+1. **Lesepfad Planung vereinheitlichen:** `backend/routers/training_planning.py` ist zentral für `_fetch_sections`, `_replace_unit_sections`, `_hydrate_training_unit_payload`, Klonen, Blueprint-Kopie, `apply-training-module`. Prüfe, ob klar abgegrenzte Hilfsfunktionen (ohne Verhaltensänderung) die **nächste** große Änderung erleichtern — **keine** Feature-Logik für Phasen/Streams hinzufügen, nur Struktur/Tests/Docs wenn nötig.
+
+2. **Test-Lücken schließen (minimal, hoher Nutzen):** Heute fehlen **DB/API-Tests** für kritische Pfade (`_replace_unit_sections` Roundtrip, `from-framework-slot` Struktur-Kopie, optional `apply-training-module`). Ergänze **kleine, deterministische** Tests (pytest mit DB, falls im Projekt üblich), ohne riesige Fixtures.
+
+3. **Frontend-Schneidstellen markieren:** kurze Kommentare oder ein **Working-Doc-Update**, wo `TrainingPlanningPageRoot`, `buildSectionsPayload`, `TrainingUnitRunPage`, `TrainingCoachPage` + `trainingPlanUtils.flattenPlanTimeline` später angebunden werden — **kein** großes UI-Rewrite.
+
+4. **Migrations-Sicherheit:** Dokumentiere in **einem Absatz** im `ANALYSIS`-Dokument oder hier, welche **Unique-Constraints** (`training_unit_sections`: `UNIQUE (training_unit_id, order_index)`) die Parallelität blockieren — **ohne** sie schon zu ändern, außer es ist Teil einer **explizit** freigegebenen ersten Migration.
+
+5. **Performance nur berührensensible Stellen:** Einzelabruf `GET /api/training-units/{id}` wird mit mehr JOINs kommen. Falls du **jetzt** N+1 oder redundante Arbeit in `_fetch_sections` siehst und das **risikoarm** verbesserbar ist, nur mit **Messpunkt/Messvorstellung** (kein unnötiger Micro-Optimismus).
+
+## Leitplanken
+
+- **Stabilität vor Geschwindigkeit:** Keine Änderung, die bestehende Einheiten, Rahmen-Blueprints oder Run-Modus bricht.
+- **Keine pauschalen Refactors:** Nur Änderungen mit **klarem** Träger für das Parallel-Feature oder mit **Test-Regression-Schutz**.
+- **Regeln:** `.claude/rules/ARCHITECTURE.md`, `CODING_RULES.md`, Zugriffsschicht wo relevant.
+
+## Erwartete Ausgabe
+
+1. Kurze **Liste erledigter Vorarbeiten** (Dateien, was warum).
+2. **Empfohlene Reihenfolge** für die **nächste** Session, die Phasen/Streams **implementiert** (verweis auf `PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md` Pakete 0–2).
+3. Falls nichts Sinnvolles ohne Feature-Branch riskiert werden kann: **explizit** „keine Code-Änderung“, nur Risiko-Notiz.
+
+## Optionaler Startbefehl
+
+```
+Lies zuerst:
+.claude/docs/working/PARALLEL_TRAINING_STREAMS_ANALYSIS_AND_IMPLEMENTATION_PLAN.md
+dann backend/routers/training_planning.py (Abschnitte um _fetch_sections, _replace_unit_sections).
+```
diff --git a/.gitea/workflows/test.yml b/.gitea/workflows/test.yml
index dd1bd90..b340ef3 100644
--- a/.gitea/workflows/test.yml
+++ b/.gitea/workflows/test.yml
@@ -10,7 +10,7 @@ on:
     types: [completed]
 
 jobs:
-  # Wie Mitai-Jinkendo: pytest im laufenden backend-Container (Python aus Image, gleiche DB wie Deploy).
+  # Pytest im laufenden backend-Container; ACCESS_LAYER + TRAINING_PLANNING Integration gegen dieselbe PostgreSQL wie Deploy (Schema via Container-Start migriert).
   pytest-backend:
     if: ${{ github.event_name != 'workflow_run' || github.event.workflow_run.conclusion == 'success' }}
     runs-on: ubuntu-latest
@@ -39,7 +39,7 @@ jobs:
             cd /app &&
             ACCESS_LAYER_STRICT=1 python scripts/check_access_layer_hints.py &&
             python scripts/security_release_checks.py &&
-            ACCESS_LAYER_INTEGRATION=1 SKIP_DB_MIGRATE=1 python -m pytest tests -m 'not slow' -ra -vv --tb=short
+            ACCESS_LAYER_INTEGRATION=1 TRAINING_PLANNING_INTEGRATION=1 SKIP_DB_MIGRATE=1 python -m pytest tests -m 'not slow' -ra -vv --tb=short
           "
 
   lint-backend:
diff --git a/backend/migrations/063_training_unit_phases_parallel_streams.sql b/backend/migrations/063_training_unit_phases_parallel_streams.sql
new file mode 100644
index 0000000..0006b6e
--- /dev/null
+++ b/backend/migrations/063_training_unit_phases_parallel_streams.sql
@@ -0,0 +1,85 @@
+-- Migration 063: Phasen und parallele Streams pro Trainingseinheit (Grundlage Breakout).
+-- Bestehende Sektionen werden einer Default-whole_group-Phase zugeordnet.
+-- UNIQUE (training_unit_id, order_index) auf Sektionen entfällt zugunsten
+-- eindeutiger order_index je Phase bzw. je parallel_stream.
+
+-- ── Phasen ───────────────────────────────────────────────────────────────
+CREATE TABLE IF NOT EXISTS training_unit_phases (
+    id SERIAL PRIMARY KEY,
+    training_unit_id INT NOT NULL REFERENCES training_units(id) ON DELETE CASCADE,
+    order_index INT NOT NULL,
+    phase_kind VARCHAR(20) NOT NULL CHECK (phase_kind IN ('whole_group', 'parallel')),
+    title VARCHAR(200),
+    guidance_notes TEXT,
+    UNIQUE (training_unit_id, order_index)
+);
+
+CREATE INDEX IF NOT EXISTS idx_training_unit_phases_unit ON training_unit_phases(training_unit_id);
+
+-- ── Streams innerhalb einer Parallelphase ──────────────────────────────────
+CREATE TABLE IF NOT EXISTS training_unit_parallel_streams (
+    id SERIAL PRIMARY KEY,
+    phase_id INT NOT NULL REFERENCES training_unit_phases(id) ON DELETE CASCADE,
+    order_index INT NOT NULL,
+    title VARCHAR(200),
+    notes TEXT,
+    assigned_trainer_profile_ids JSONB,
+    UNIQUE (phase_id, order_index)
+);
+
+CREATE INDEX IF NOT EXISTS idx_training_unit_parallel_streams_phase
+    ON training_unit_parallel_streams(phase_id);
+
+COMMENT ON COLUMN training_unit_parallel_streams.assigned_trainer_profile_ids IS
+    'Optionale Co-Trainer-IDs (JSON-Array von Profil-IDs) für diese Teilstrecke; MVP+';
+
+-- ── Sektionen: Zuordnung zu Phase (gemeinsam) oder Stream (parallel) ─────
+ALTER TABLE training_unit_sections
+    ADD COLUMN IF NOT EXISTS phase_id INT REFERENCES training_unit_phases(id) ON DELETE CASCADE,
+    ADD COLUMN IF NOT EXISTS parallel_stream_id INT REFERENCES training_unit_parallel_streams(id) ON DELETE CASCADE;
+
+-- Backfill: je Einheit mit Sektionen eine whole_group-Phase, alle Sektionen dorthin
+INSERT INTO training_unit_phases (training_unit_id, order_index, phase_kind, title)
+SELECT tu.id, 0, 'whole_group', NULL
+FROM training_units tu
+WHERE EXISTS (SELECT 1 FROM training_unit_sections s WHERE s.training_unit_id = tu.id)
+  AND NOT EXISTS (
+    SELECT 1 FROM training_unit_phases p
+    WHERE p.training_unit_id = tu.id AND p.order_index = 0 AND p.phase_kind = 'whole_group'
+);
+
+UPDATE training_unit_sections tus
+SET phase_id = p.id
+FROM training_unit_phases p
+WHERE tus.phase_id IS NULL
+  AND p.training_unit_id = tus.training_unit_id
+  AND p.order_index = 0
+  AND p.phase_kind = 'whole_group';
+
+-- Alte globale Reihenfolge-Eindeutigkeit pro Einheit entfernen
+ALTER TABLE training_unit_sections
+    DROP CONSTRAINT IF EXISTS training_unit_sections_training_unit_id_order_index_key;
+
+-- Genau eine Zielspalte gesetzt: gemeinsame Phase ODER paralleler Stream
+ALTER TABLE training_unit_sections
+    DROP CONSTRAINT IF EXISTS training_unit_sections_phase_or_stream_chk;
+
+ALTER TABLE training_unit_sections
+    ADD CONSTRAINT training_unit_sections_phase_or_stream_chk CHECK (
+        (phase_id IS NOT NULL AND parallel_stream_id IS NULL)
+        OR (phase_id IS NULL AND parallel_stream_id IS NOT NULL)
+    );
+
+CREATE UNIQUE INDEX IF NOT EXISTS uq_training_unit_sections_phase_order
+    ON training_unit_sections (phase_id, order_index)
+    WHERE phase_id IS NOT NULL;
+
+CREATE UNIQUE INDEX IF NOT EXISTS uq_training_unit_sections_stream_order
+    ON training_unit_sections (parallel_stream_id, order_index)
+    WHERE parallel_stream_id IS NOT NULL;
+
+CREATE INDEX IF NOT EXISTS idx_training_unit_sections_phase
+    ON training_unit_sections(phase_id) WHERE phase_id IS NOT NULL;
+
+CREATE INDEX IF NOT EXISTS idx_training_unit_sections_parallel_stream
+    ON training_unit_sections(parallel_stream_id) WHERE parallel_stream_id IS NOT NULL;
diff --git a/backend/pytest.ini b/backend/pytest.ini
index 3525b2d..54c05d6 100644
--- a/backend/pytest.ini
+++ b/backend/pytest.ini
@@ -6,5 +6,5 @@ python_functions = test_*
 addopts = -q --tb=short
 markers =
     smoke: Schnelle Kern-Regression.
-    integration: PostgreSQL-Mandanten-Integration (ACCESS_LAYER_INTEGRATION=1).
+    integration: PostgreSQL-Integration (z. B. ACCESS_LAYER_INTEGRATION=1, TRAINING_PLANNING_INTEGRATION=1).
     slow: Lange/schwere Tests; in CI wie Mitai-Jinkendo ausgeschlossen (Auswahl: not slow).
diff --git a/backend/routers/training_planning.py b/backend/routers/training_planning.py
index 461999e..acd9449 100644
--- a/backend/routers/training_planning.py
+++ b/backend/routers/training_planning.py
@@ -484,6 +484,94 @@ def _normalize_assistant_trainer_profile_ids(
             )
     return uniq
 
+
+def _normalize_stream_assigned_trainer_profile_ids(
+    cur,
+    raw_val: Any,
+    *,
+    group_id: Optional[int],
+    profile_id: int,
+    role: str,
+    unit_created_by: Optional[int],
+    eff_lead_nid: Optional[int],
+) -> Any:
+    """
+    JSONB-Liste für training_unit_parallel_streams.assigned_trainer_profile_ids.
+    Ohne group_id (Rahmen-Blueprint): nur Profil-Existenz + keine Überschneidung mit Leitung.
+    Mit group_id: gleiche Vereins-/Zuweisungsregeln wie assistant_trainer_profile_ids.
+    """
+    if raw_val is None:
+        return None
+    if not isinstance(raw_val, list):
+        raise HTTPException(
+            status_code=400,
+            detail="assigned_trainer_profile_ids (Stream) muss Liste oder null sein",
+        )
+    ids_in: List[int] = []
+    for x in raw_val:
+        try:
+            i = int(x)
+        except (TypeError, ValueError):
+            raise HTTPException(
+                status_code=400,
+                detail="assigned_trainer_profile_ids (Stream) ungültig",
+            )
+        if i < 1:
+            raise HTTPException(
+                status_code=400,
+                detail="assigned_trainer_profile_ids (Stream) ungültig",
+            )
+        ids_in.append(i)
+    uniq = sorted(set(ids_in))
+    for nid in uniq:
+        cur.execute("SELECT 1 FROM profiles WHERE id = %s", (nid,))
+        if not cur.fetchone():
+            raise HTTPException(
+                status_code=400,
+                detail="Profil für Stream-Co-Trainer nicht gefunden",
+            )
+        if eff_lead_nid is not None and nid == eff_lead_nid:
+            raise HTTPException(
+                status_code=400,
+                detail="Leitung und Stream-Co-Trainer dürfen sich nicht überschneiden",
+            )
+    if group_id is None:
+        return uniq
+    cur.execute(
+        "SELECT trainer_id, co_trainer_ids, club_id FROM training_groups WHERE id = %s",
+        (group_id,),
+    )
+    gr = cur.fetchone()
+    if not gr:
+        raise HTTPException(status_code=400, detail="Trainingsgruppe nicht gefunden")
+    grd = dict(gr)
+    cid = grd.get("club_id")
+    if cid is None:
+        raise HTTPException(status_code=400, detail="Trainingsgruppe nicht gefunden")
+    club_i = int(cid)
+    if not is_platform_admin(role) and not _caller_may_assign_session_trainers(
+        cur, grd, profile_id, role, unit_created_by
+    ):
+        raise HTTPException(status_code=403, detail="Keine Berechtigung, Co-Trainer (Stream) zuzuweisen")
+    eligible = {grd["trainer_id"]} if grd.get("trainer_id") else set()
+    for x in grd.get("co_trainer_ids") or []:
+        try:
+            eligible.add(int(x))
+        except (TypeError, ValueError):
+            continue
+    for nid in uniq:
+        if is_platform_admin(role):
+            continue
+        if nid in eligible:
+            continue
+        if not _profile_active_in_club(cur, club_i, nid):
+            raise HTTPException(
+                status_code=400,
+                detail="Stream-Co-Trainer nur mit aktiver Mitgliedschaft im Verein dieser Gruppe",
+            )
+    return uniq
+
+
 def _normalize_planning_method_profile_payload(raw) -> Optional[Dict[str, Any]]:
     """None = Katalog wirksam; Dict = Snapshot fuer diese Platzierung."""
     if raw is None:
@@ -522,21 +610,52 @@ def _optional_source_training_module_id_payload(raw_val) -> Optional[int]:
     return i
 
 
-def _fetch_sections(cur, unit_id: int) -> List[Dict[str, Any]]:
+# ── Sektionen laden / ersetzen (Kernpfad Planungsinhalt) ──────────────────
+# Hinweis: Pro Sektion ein Items-Query (N+1) — bewusst einfach; Batching später möglich.
+
+
+def _clear_unit_plan_content(cur, unit_id: int) -> None:
+    """Löscht alle Planungs-Phasen der Einheit (CASCADE: Streams, Sektionen, Items)."""
+    cur.execute("DELETE FROM training_unit_phases WHERE training_unit_id = %s", (unit_id,))
+
+
+def _ensure_default_whole_group_phase(cur, unit_id: int, *, order_index: int = 0) -> int:
+    """Legt bei Bedarf eine whole_group-Phase an; gibt phase.id zurück."""
     cur.execute(
         """
-        SELECT id, training_unit_id, order_index, title, guidance_notes, source_template_section_id
-        FROM training_unit_sections
-        WHERE training_unit_id = %s
-        ORDER BY order_index
+        SELECT id FROM training_unit_phases
+        WHERE training_unit_id = %s AND phase_kind = 'whole_group' AND order_index = %s
+        LIMIT 1
         """,
-        (unit_id,),
+        (unit_id, order_index),
     )
-    secs = []
-    for sec_row in cur.fetchall():
-        sec = r2d(sec_row)
-        cur.execute(
-            """
+    row = cur.fetchone()
+    if row:
+        return int(row["id"])
+    cur.execute(
+        """
+        INSERT INTO training_unit_phases (training_unit_id, order_index, phase_kind, title, guidance_notes)
+        VALUES (%s, %s, 'whole_group', NULL, NULL)
+        RETURNING id
+        """,
+        (unit_id, order_index),
+    )
+    return int(cur.fetchone()["id"])
+
+
+_SECTION_ROWS_SQL = """
+        SELECT tus.id, tus.training_unit_id, tus.order_index, tus.title, tus.guidance_notes,
+               tus.source_template_section_id, tus.phase_id, tus.parallel_stream_id
+        FROM training_unit_sections tus
+        LEFT JOIN training_unit_phases ph ON ph.id = tus.phase_id
+        LEFT JOIN training_unit_parallel_streams ps ON ps.id = tus.parallel_stream_id
+        LEFT JOIN training_unit_phases ph_s ON ph_s.id = ps.phase_id
+        WHERE tus.training_unit_id = %s
+        ORDER BY COALESCE(ph.order_index, ph_s.order_index) ASC,
+                 ps.order_index ASC NULLS FIRST,
+                 tus.order_index ASC
+"""
+_SECTION_ITEMS_ROWS_SQL = """
             SELECT tusi.*,
                 e.title AS exercise_title,
                 e.exercise_kind AS exercise_kind,
@@ -558,75 +677,201 @@ def _fetch_sections(cur, unit_id: int) -> List[Dict[str, Any]]:
             LEFT JOIN training_modules tm ON tm.id = tusi.source_training_module_id
             WHERE tusi.section_id = %s
             ORDER BY tusi.order_index
-            """,
-            (sec["id"],),
-        )
-        sec["items"] = [r2d(r) for r in cur.fetchall()]
-        for it in sec["items"]:
-            if it.get("item_type") != "exercise":
-                continue
-            cmp_raw = it.get("catalog_method_profile")
-            if not isinstance(cmp_raw, dict):
-                it["catalog_method_profile"] = {}
-            else:
-                it["catalog_method_profile"] = dict(cmp_raw)
-            ek = str(it.get("exercise_kind") or "simple").strip().lower()
-            if ek == "combination" and it.get("exercise_id"):
-                try:
-                    it["combination_slots"] = load_combination_slots_for_exercise(cur, int(it["exercise_id"]))
-                except (TypeError, ValueError):
-                    it["combination_slots"] = []
-            else:
-                it["combination_slots"] = []
+"""
+
+
+def _hydrate_section_item_combination_slots(cur, it: Dict[str, Any]) -> None:
+    """Setzt `combination_slots` für Kombi‑Übungen; sonst leere Liste."""
+    if it.get("item_type") != "exercise":
+        return
+    cmp_raw = it.get("catalog_method_profile")
+    if not isinstance(cmp_raw, dict):
+        it["catalog_method_profile"] = {}
+    else:
+        it["catalog_method_profile"] = dict(cmp_raw)
+    ek = str(it.get("exercise_kind") or "simple").strip().lower()
+    if ek == "combination" and it.get("exercise_id"):
+        try:
+            it["combination_slots"] = load_combination_slots_for_exercise(cur, int(it["exercise_id"]))
+        except (TypeError, ValueError):
+            it["combination_slots"] = []
+    else:
+        it["combination_slots"] = []
+
+
+def _fetch_section_items_for_section(cur, section_id: int) -> List[Dict[str, Any]]:
+    cur.execute(_SECTION_ITEMS_ROWS_SQL, (section_id,))
+    items = [r2d(r) for r in cur.fetchall()]
+    for it in items:
+        _hydrate_section_item_combination_slots(cur, it)
+    return items
+
+
+def _fetch_sections(cur, unit_id: int) -> List[Dict[str, Any]]:
+    """Lädt alle Sektionen inkl. Items und Katalog-Anreicherung für die Einheit."""
+    cur.execute(_SECTION_ROWS_SQL, (unit_id,))
+    secs = []
+    for sec_row in cur.fetchall():
+        sec = r2d(sec_row)
+        sec["items"] = _fetch_section_items_for_section(cur, sec["id"])
         secs.append(sec)
     return secs
 
 
-def _sections_clone_payload(cur, unit_id: int) -> List[Dict[str, Any]]:
-    """Sektionen/Items für eine tiefe Kopie (ohne DB-IDs / Join-Felder)."""
-    secs = _fetch_sections(cur, unit_id)
+def _fetch_phases_nested(cur, unit_id: int) -> List[Dict[str, Any]]:
+    """Verschachtelte Phasen/Streams/Sektionen für GET (UI kann parallele Sp später nutzen)."""
+    cur.execute(
+        """
+        SELECT id, training_unit_id, order_index, phase_kind, title, guidance_notes
+        FROM training_unit_phases
+        WHERE training_unit_id = %s
+        ORDER BY order_index
+        """,
+        (unit_id,),
+    )
     out: List[Dict[str, Any]] = []
-    for sec in secs:
-        items_clean: List[Dict[str, Any]] = []
-        for it in sorted(sec.get("items", []), key=lambda x: x.get("order_index", 0)):
-            itype = it.get("item_type") or ("exercise" if it.get("exercise_id") else "note")
-            oix = it.get("order_index")
-            if itype == "note":
-                note_item = {
-                    "item_type": "note",
-                    "order_index": oix,
-                    "note_body": it.get("note_body") or "",
-                }
-                sm = _optional_source_training_module_id_payload(it.get("source_training_module_id"))
-                if sm is not None:
-                    note_item["source_training_module_id"] = sm
-                items_clean.append(note_item)
-                continue
-            if itype != "exercise" or not it.get("exercise_id"):
-                continue
-            ex_item = {
-                "item_type": "exercise",
+    for prow in cur.fetchall():
+        p = r2d(prow)
+        pk = str(p.get("phase_kind") or "").strip().lower()
+        if pk == "whole_group":
+            cur.execute(
+                """
+                SELECT id, training_unit_id, order_index, title, guidance_notes,
+                       source_template_section_id, phase_id, parallel_stream_id
+                FROM training_unit_sections
+                WHERE phase_id = %s
+                ORDER BY order_index
+                """,
+                (p["id"],),
+            )
+            secs: List[Dict[str, Any]] = []
+            for srow in cur.fetchall():
+                sec = r2d(srow)
+                sec["items"] = _fetch_section_items_for_section(cur, sec["id"])
+                secs.append(sec)
+            p["sections"] = secs
+            p["streams"] = []
+        elif pk == "parallel":
+            p["sections"] = []
+            cur.execute(
+                """
+                SELECT id, phase_id, order_index, title, notes, assigned_trainer_profile_ids
+                FROM training_unit_parallel_streams
+                WHERE phase_id = %s
+                ORDER BY order_index
+                """,
+                (p["id"],),
+            )
+            streams: List[Dict[str, Any]] = []
+            for st_row in cur.fetchall():
+                st = r2d(st_row)
+                cur.execute(
+                    """
+                    SELECT id, training_unit_id, order_index, title, guidance_notes,
+                           source_template_section_id, phase_id, parallel_stream_id
+                    FROM training_unit_sections
+                    WHERE parallel_stream_id = %s
+                    ORDER BY order_index
+                    """,
+                    (st["id"],),
+                )
+                secs = []
+                for sec_row in cur.fetchall():
+                    sec = r2d(sec_row)
+                    sec["items"] = _fetch_section_items_for_section(cur, sec["id"])
+                    secs.append(sec)
+                st["sections"] = secs
+                streams.append(st)
+            p["streams"] = streams
+        else:
+            p["sections"] = []
+            p["streams"] = []
+        out.append(p)
+    return out
+
+
+def _clone_section_payload_dict(sec: Dict[str, Any]) -> Dict[str, Any]:
+    """Sektion inkl. Items ohne DB-IDs (für phases-Payload / Kopie)."""
+    items_clean: List[Dict[str, Any]] = []
+    for it in sorted(sec.get("items", []), key=lambda x: x.get("order_index", 0)):
+        itype = it.get("item_type") or ("exercise" if it.get("exercise_id") else "note")
+        oix = it.get("order_index")
+        if itype == "note":
+            note_item = {
+                "item_type": "note",
                 "order_index": oix,
-                "exercise_id": it["exercise_id"],
-                "exercise_variant_id": it.get("exercise_variant_id"),
-                "planned_duration_min": it.get("planned_duration_min"),
-                "actual_duration_min": it.get("actual_duration_min"),
-                "notes": it.get("notes"),
-                "modifications": it.get("modifications"),
-                "planning_method_profile": it.get("planning_method_profile"),
+                "note_body": it.get("note_body") or "",
             }
             sm = _optional_source_training_module_id_payload(it.get("source_training_module_id"))
             if sm is not None:
-                ex_item["source_training_module_id"] = sm
-            items_clean.append(ex_item)
-        out.append(
-            {
-                "title": sec.get("title"),
-                "order_index": sec.get("order_index"),
-                "guidance_notes": sec.get("guidance_notes"),
-                "items": items_clean,
-            }
-        )
+                note_item["source_training_module_id"] = sm
+            items_clean.append(note_item)
+            continue
+        if itype != "exercise" or not it.get("exercise_id"):
+            continue
+        ex_item = {
+            "item_type": "exercise",
+            "order_index": oix,
+            "exercise_id": it["exercise_id"],
+            "exercise_variant_id": it.get("exercise_variant_id"),
+            "planned_duration_min": it.get("planned_duration_min"),
+            "actual_duration_min": it.get("actual_duration_min"),
+            "notes": it.get("notes"),
+            "modifications": it.get("modifications"),
+            "planning_method_profile": it.get("planning_method_profile"),
+        }
+        sm = _optional_source_training_module_id_payload(it.get("source_training_module_id"))
+        if sm is not None:
+            ex_item["source_training_module_id"] = sm
+        items_clean.append(ex_item)
+    row: Dict[str, Any] = {
+        "title": sec.get("title"),
+        "order_index": sec.get("order_index"),
+        "guidance_notes": sec.get("guidance_notes"),
+        "items": items_clean,
+    }
+    stid = sec.get("source_template_section_id")
+    if stid is not None and stid != "":
+        try:
+            stid_i = int(stid)
+            if stid_i >= 1:
+                row["source_template_section_id"] = stid_i
+        except (TypeError, ValueError):
+            pass
+    return row
+
+
+def _phases_clone_payload(cur, unit_id: int) -> List[Dict[str, Any]]:
+    """Vollständige Phasen/Streams/Sektionen für tiefe Kopie (ohne DB-IDs)."""
+    nested = _fetch_phases_nested(cur, unit_id)
+    out: List[Dict[str, Any]] = []
+    for ph in nested:
+        kind = str(ph.get("phase_kind") or "").strip().lower()
+        if kind not in ("whole_group", "parallel"):
+            kind = "whole_group"
+        pd: Dict[str, Any] = {
+            "order_index": ph.get("order_index"),
+            "phase_kind": kind,
+            "title": ph.get("title"),
+            "guidance_notes": ph.get("guidance_notes"),
+        }
+        if kind == "whole_group":
+            pd["sections"] = [_clone_section_payload_dict(s) for s in ph.get("sections") or []]
+            pd["streams"] = []
+        else:
+            pd["sections"] = []
+            streams_clean: List[Dict[str, Any]] = []
+            for st in ph.get("streams") or []:
+                sd: Dict[str, Any] = {
+                    "order_index": st.get("order_index"),
+                    "title": st.get("title"),
+                    "notes": st.get("notes"),
+                    "assigned_trainer_profile_ids": st.get("assigned_trainer_profile_ids"),
+                    "sections": [_clone_section_payload_dict(s) for s in st.get("sections") or []],
+                }
+                streams_clean.append(sd)
+            pd["streams"] = streams_clean
+        out.append(pd)
     return out
 
 
@@ -637,6 +882,7 @@ def _copy_blueprint_into_scheduled_unit(
     planned_date: str,
     profile_id: int,
     origin_framework_slot_id: Optional[int],
+    role: str,
 ) -> int:
     cur.execute(
         """
@@ -692,8 +938,8 @@ def _copy_blueprint_into_scheduled_unit(
     if not row:
         raise HTTPException(status_code=404, detail="Blueprint-Einheit nicht gefunden")
     nu = row["id"]
-    cloned = _sections_clone_payload(cur, blueprint_unit_id)
-    _replace_unit_sections(cur, nu, cloned)
+    cloned = _phases_clone_payload(cur, blueprint_unit_id)
+    _replace_unit_phases(cur, nu, cloned, profile_id, role, profile_id)
     return nu
 
 
@@ -707,17 +953,27 @@ def _flatten_exercises_from_sections(unit: Dict[str, Any]) -> None:
 
 
 def _hydrate_training_unit_payload(cur, unit: Dict[str, Any]) -> Dict[str, Any]:
+    """GET-Payload: `phases` (verschachtelt), flache `sections` + abgeleitete `exercises` (Legacy)."""
     uid = unit["id"]
+    unit["phases"] = _fetch_phases_nested(cur, uid)
     unit["sections"] = _fetch_sections(cur, uid)
     _flatten_exercises_from_sections(unit)
     return unit
 
 
 def _resolve_training_unit_section_id(cur, unit_id: int, section_order_index: int) -> int:
+    """Erste Sektion mit order_index in einer whole_group-Phase (Parallelstreams ausgeschlossen)."""
     cur.execute(
         """
-        SELECT id FROM training_unit_sections
-        WHERE training_unit_id = %s AND order_index = %s
+        SELECT tus.id
+        FROM training_unit_sections tus
+        INNER JOIN training_unit_phases p ON p.id = tus.phase_id
+        WHERE tus.training_unit_id = %s
+          AND tus.order_index = %s
+          AND tus.parallel_stream_id IS NULL
+          AND LOWER(TRIM(p.phase_kind)) = 'whole_group'
+        ORDER BY p.order_index ASC, tus.id ASC
+        LIMIT 1
         """,
         (unit_id, section_order_index),
     )
@@ -729,6 +985,52 @@ def _resolve_training_unit_section_id(cur, unit_id: int, section_order_index: in
     return int(r["id"])
 
 
+def _resolve_training_unit_section_id_for_apply(
+    cur,
+    unit_id: int,
+    section_order_index: int,
+    *,
+    phase_order_index: Optional[int],
+    parallel_stream_order_index: Optional[int],
+) -> int:
+    """Ziel-Abschnitt: ganzes Gruppen physisch (nur section_order_index) oder innerhalb eines Parallelstreams."""
+    if parallel_stream_order_index is None:
+        return _resolve_training_unit_section_id(cur, unit_id, section_order_index)
+    if phase_order_index is None:
+        raise HTTPException(
+            status_code=400,
+            detail="phase_order_index ist bei parallel_stream_order_index Pflicht",
+        )
+    cur.execute(
+        """
+        SELECT tus.id
+        FROM training_unit_sections tus
+        INNER JOIN training_unit_parallel_streams st ON st.id = tus.parallel_stream_id
+        INNER JOIN training_unit_phases p ON p.id = st.phase_id
+        WHERE tus.training_unit_id = %s
+          AND tus.order_index = %s
+          AND st.order_index = %s
+          AND p.order_index = %s
+          AND LOWER(TRIM(p.phase_kind)) = 'parallel'
+        ORDER BY tus.id ASC
+        LIMIT 1
+        """,
+        (
+            unit_id,
+            section_order_index,
+            parallel_stream_order_index,
+            phase_order_index,
+        ),
+    )
+    r = cur.fetchone()
+    if not r:
+        raise HTTPException(
+            status_code=400,
+            detail="Abschnitt im Parallelstream für diese Indizes nicht gefunden",
+        )
+    return int(r["id"])
+
+
 def _append_copied_module_items_to_section(
     cur,
     section_id: int,
@@ -874,31 +1176,188 @@ def _insert_section_items(cur, section_id: int, items_in: Optional[List[Any]], s
         )
 
 
+def _insert_one_replacement_section(
+    cur,
+    unit_id: int,
+    sec: Any,
+    enumeration_index: int,
+    *,
+    phase_id: Optional[int] = None,
+    parallel_stream_id: Optional[int] = None,
+) -> None:
+    """Eine Sektion inkl. Items (genau eines von phase_id / parallel_stream_id gesetzt)."""
+    if (phase_id is None) == (parallel_stream_id is None):
+        raise HTTPException(
+            status_code=500, detail="Intern: Sektion braucht phase_id oder parallel_stream_id"
+        )
+    title = (sec.get("title") or "").strip() or "Abschnitt"
+    order_ix = sec.get("order_index")
+    if order_ix is None:
+        order_ix = enumeration_index
+    src_tsec = _optional_positive_int(sec.get("source_template_section_id"), "source_template_section_id")
+    cur.execute(
+        """
+        INSERT INTO training_unit_sections (
+            training_unit_id, phase_id, parallel_stream_id, order_index, title, guidance_notes, source_template_section_id
+        ) VALUES (%s, %s, %s, %s, %s, %s, %s)
+        RETURNING id
+        """,
+        (
+            unit_id,
+            phase_id,
+            parallel_stream_id,
+            order_ix,
+            title,
+            sec.get("guidance_notes"),
+            src_tsec,
+        ),
+    )
+    sid = cur.fetchone()["id"]
+    _insert_section_items(cur, sid, sec.get("items"))
+
+
 def _replace_unit_sections(cur, unit_id: int, sections_in: List[Any]):
-    cur.execute("DELETE FROM training_unit_sections WHERE training_unit_id = %s", (unit_id,))
+    """Ersetzt den gesamten Plan (Legacy): eine whole_group-Phase + Sektionen."""
+    _clear_unit_plan_content(cur, unit_id)
+    phase_id = _ensure_default_whole_group_phase(cur, unit_id, order_index=0)
     for si, sec in enumerate(sections_in):
-        title = (sec.get("title") or "").strip() or "Abschnitt"
-        order_ix = sec.get("order_index")
-        if order_ix is None:
-            order_ix = si
-        src_tsec = _optional_positive_int(sec.get("source_template_section_id"), "source_template_section_id")
+        _insert_one_replacement_section(
+            cur, unit_id, sec, si, phase_id=phase_id, parallel_stream_id=None
+        )
+
+
+def _replace_unit_phases(
+    cur,
+    unit_id: int,
+    phases_in: List[Any],
+    profile_id: int,
+    role: str,
+    unit_created_by: Optional[int],
+) -> None:
+    """Ersetzt Phasen inkl. paralleler Streams und Sektionen (voller Plan)."""
+    if not isinstance(phases_in, list):
+        raise HTTPException(status_code=400, detail="phases muss eine Liste sein")
+
+    cur.execute(
+        """
+        SELECT tu.group_id,
+               COALESCE(tu.lead_trainer_profile_id, tg.trainer_id) AS eff_lead
+        FROM training_units tu
+        LEFT JOIN training_groups tg ON tg.id = tu.group_id
+        WHERE tu.id = %s
+        """,
+        (unit_id,),
+    )
+    ur = cur.fetchone()
+    group_id_opt = int(ur["group_id"]) if ur and ur.get("group_id") is not None else None
+    eff_lead_raw = ur.get("eff_lead") if ur else None
+    eff_lead_nid = int(eff_lead_raw) if eff_lead_raw is not None else None
+
+    _clear_unit_plan_content(cur, unit_id)
+    for pi, ph in enumerate(phases_in):
+        kind = str(ph.get("phase_kind") or "").strip().lower()
+        if kind not in ("whole_group", "parallel"):
+            raise HTTPException(
+                status_code=400,
+                detail="phase_kind muss whole_group oder parallel sein",
+            )
+        # Reihenfolge strikt aus der Liste (pi): vermeidet UNIQUE(tu, order_index)-Kollisionen,
+        # wenn der Client dieselbe phase_order_index mehrfach trägt (z. B. nach Zuordnungswechseln).
+        p_oix = int(pi)
         cur.execute(
             """
-            INSERT INTO training_unit_sections (
-                training_unit_id, order_index, title, guidance_notes, source_template_section_id
-            ) VALUES (%s, %s, %s, %s, %s)
+            INSERT INTO training_unit_phases (training_unit_id, order_index, phase_kind, title, guidance_notes)
+            VALUES (%s, %s, %s, %s, %s)
             RETURNING id
             """,
             (
                 unit_id,
-                order_ix,
-                title,
-                sec.get("guidance_notes"),
-                src_tsec,
+                p_oix,
+                kind,
+                ph.get("title"),
+                ph.get("guidance_notes"),
             ),
         )
-        sid = cur.fetchone()["id"]
-        _insert_section_items(cur, sid, sec.get("items"))
+        phase_id = int(cur.fetchone()["id"])
+        if kind == "whole_group":
+            secs = ph.get("sections")
+            if secs is None:
+                secs = []
+            if not isinstance(secs, list):
+                raise HTTPException(status_code=400, detail="sections muss Liste sein")
+            for si, sec in enumerate(secs):
+                _insert_one_replacement_section(
+                    cur, unit_id, sec, si, phase_id=phase_id, parallel_stream_id=None
+                )
+        else:
+            streams = ph.get("streams")
+            if streams is None:
+                streams = []
+            if not isinstance(streams, list):
+                raise HTTPException(status_code=400, detail="streams muss Liste sein")
+            for si, st in enumerate(streams):
+                raw_asst = st.get("assigned_trainer_profile_ids")
+                asst_norm = _normalize_stream_assigned_trainer_profile_ids(
+                    cur,
+                    raw_asst,
+                    group_id=group_id_opt,
+                    profile_id=profile_id,
+                    role=role,
+                    unit_created_by=unit_created_by,
+                    eff_lead_nid=eff_lead_nid,
+                )
+                asst_db = None if asst_norm is None else PsycopgJson(asst_norm)
+                st_oix = st.get("order_index")
+                if st_oix is None:
+                    st_oix = si
+                cur.execute(
+                    """
+                    INSERT INTO training_unit_parallel_streams (
+                        phase_id, order_index, title, notes, assigned_trainer_profile_ids
+                    ) VALUES (%s, %s, %s, %s, %s)
+                    RETURNING id
+                    """,
+                    (
+                        phase_id,
+                        int(st_oix),
+                        st.get("title"),
+                        st.get("notes"),
+                        asst_db,
+                    ),
+                )
+                sid = int(cur.fetchone()["id"])
+                secs = st.get("sections")
+                if secs is None:
+                    secs = []
+                if not isinstance(secs, list):
+                    raise HTTPException(
+                        status_code=400,
+                        detail="sections (Stream) muss Liste sein",
+                    )
+                for ti, sec in enumerate(secs):
+                    _insert_one_replacement_section(
+                        cur, unit_id, sec, ti, phase_id=None, parallel_stream_id=sid
+                    )
+
+
+def _assert_single_plan_content_key_create(data: dict) -> None:
+    """Höchstens ein Plan-Inhalt: phases | sections | exercises (Non-None)."""
+    n = sum(1 for k in ("phases", "sections", "exercises") if data.get(k) is not None)
+    if n > 1:
+        raise HTTPException(
+            status_code=400,
+            detail="Nur eines von phases, sections oder exercises angeben",
+        )
+
+
+def _assert_single_plan_content_key_update(data: dict) -> None:
+    """PUT: höchstens einer der Keys phases | sections | exercises."""
+    keys = [k for k in ("phases", "sections", "exercises") if k in data]
+    if len(keys) > 1:
+        raise HTTPException(
+            status_code=400,
+            detail="Nur eines von phases, sections oder exercises im Body gleichzeitig",
+        )
 
 
 def _distinct_exercise_ids_in_unit(cur, unit_id: int) -> List[int]:
@@ -1027,13 +1486,16 @@ def _promote_private_exercises_used_in_unit(cur, unit_id: int, profile_id: int,
 def _insert_sections_from_legacy_exercises(cur, unit_id: int, exercises_in: List[Any]):
     if not exercises_in:
         return
+    pid = _ensure_default_whole_group_phase(cur, unit_id, order_index=0)
     cur.execute(
         """
-        INSERT INTO training_unit_sections (training_unit_id, order_index, title, guidance_notes)
-        VALUES (%s, 0, %s, NULL)
+        INSERT INTO training_unit_sections (
+            training_unit_id, phase_id, parallel_stream_id, order_index, title, guidance_notes
+        )
+        VALUES (%s, %s, NULL, 0, %s, NULL)
         RETURNING id
         """,
-        (unit_id, "Übungen"),
+        (unit_id, pid, "Übungen"),
     )
     sid = cur.fetchone()["id"]
     slot = 0
@@ -1062,6 +1524,8 @@ def _insert_sections_from_legacy_exercises(cur, unit_id: int, exercises_in: List
 
 
 def _instantiate_from_template(cur, unit_id: int, template_id: int):
+    _clear_unit_plan_content(cur, unit_id)
+    pid = _ensure_default_whole_group_phase(cur, unit_id, order_index=0)
     cur.execute(
         """
         SELECT id, title, guidance_text
@@ -1072,29 +1536,26 @@ def _instantiate_from_template(cur, unit_id: int, template_id: int):
         (template_id,),
     )
     rows = cur.fetchall()
-    for row in rows:
+    for gi, row in enumerate(rows):
         r = r2d(row)
         cur.execute(
             """
             INSERT INTO training_unit_sections (
-                training_unit_id, order_index, title, guidance_notes, source_template_section_id
-            ) VALUES (%s, (
-                SELECT COALESCE(MAX(order_index), -1) + 1 FROM training_unit_sections u2
-                WHERE u2.training_unit_id = %s
-            ), %s, %s, %s)
+                training_unit_id, phase_id, parallel_stream_id, order_index, title, guidance_notes, source_template_section_id
+            ) VALUES (%s, %s, NULL, %s, %s, %s, %s)
             """,
-            (unit_id, unit_id, r["title"], r["guidance_text"], r["id"]),
+            (unit_id, pid, gi, r["title"], r["guidance_text"], r["id"]),
         )
 
     # Fallback: keine Sektionen in Vorlage → ein leerer Block
     if not rows:
         cur.execute(
             """
-            INSERT INTO training_unit_sections (training_unit_id, order_index, title, guidance_notes)
-            SELECT %s, 0, %s, NULL
-            WHERE NOT EXISTS (SELECT 1 FROM training_unit_sections WHERE training_unit_id = %s)
+            INSERT INTO training_unit_sections (
+                training_unit_id, phase_id, parallel_stream_id, order_index, title, guidance_notes
+            ) VALUES (%s, %s, NULL, 0, 'Hauptteil', NULL)
             """,
-            (unit_id, "Hauptteil", unit_id),
+            (unit_id, pid),
         )
 
 
@@ -1758,7 +2219,11 @@ def get_training_unit(unit_id: int, tenant: TenantContext = Depends(get_tenant_c
 def apply_training_module_to_training_unit(
     unit_id: int, data: dict, tenant: TenantContext = Depends(get_tenant_context)
 ):
-    """Kopiert die Positionen eines Trainingsmoduls ans Ende eines Abschnitts (lokal bearbeitbar)."""
+    """Kopiert Modul-Positionen ans Ende eines Abschnitts.
+
+    Ziel: `section_order_index` in einer whole_group-Phase (Standard) oder
+    zusätzlich `phase_order_index` + `parallel_stream_order_index` für einen Stream.
+    """
     profile_id = tenant.profile_id
     role = tenant.global_role
     if not _has_planning_role(role):
@@ -1780,12 +2245,44 @@ def apply_training_module_to_training_unit(
     if section_order_index < 0:
         raise HTTPException(status_code=400, detail="section_order_index ungültig")
 
+    ps_raw = data.get("parallel_stream_order_index")
+    parallel_stream_oi: Optional[int] = None
+    if ps_raw is not None and ps_raw != "":
+        try:
+            parallel_stream_oi = int(ps_raw)
+        except (TypeError, ValueError):
+            raise HTTPException(status_code=400, detail="parallel_stream_order_index ungültig")
+        if parallel_stream_oi < 0:
+            raise HTTPException(status_code=400, detail="parallel_stream_order_index ungültig")
+
+    phase_oi: Optional[int] = None
+    ph_raw = data.get("phase_order_index")
+    if ph_raw is not None and ph_raw != "":
+        try:
+            phase_oi = int(ph_raw)
+        except (TypeError, ValueError):
+            raise HTTPException(status_code=400, detail="phase_order_index ungültig")
+        if phase_oi < 0:
+            raise HTTPException(status_code=400, detail="phase_order_index ungültig")
+
+    if phase_oi is not None and parallel_stream_oi is None:
+        raise HTTPException(
+            status_code=400,
+            detail="phase_order_index nur zusammen mit parallel_stream_order_index",
+        )
+
     with get_db() as conn:
         cur = get_cursor(conn)
         unit_row = _training_unit_guard_row(cur, unit_id)
         _assert_training_unit_permission(cur, unit_row, profile_id, role)
 
-        section_id = _resolve_training_unit_section_id(cur, unit_id, section_order_index)
+        section_id = _resolve_training_unit_section_id_for_apply(
+            cur,
+            unit_id,
+            section_order_index,
+            phase_order_index=phase_oi,
+            parallel_stream_order_index=parallel_stream_oi,
+        )
         mod_items, src_mid = load_training_module_for_apply(cur, module_id, profile_id, role)
         _append_copied_module_items_to_section(cur, section_id, mod_items, src_mid)
         _promote_private_exercises_used_in_unit(cur, unit_id, profile_id, role)
@@ -1863,6 +2360,7 @@ def create_training_unit(data: dict, tenant: TenantContext = Depends(get_tenant_
             lead_ins,
         )
         if assistant_set:
+            av_db = None if assistant_val is None else PsycopgJson(assistant_val)
             cur.execute(
                 """
                 INSERT INTO training_units (
@@ -1874,7 +2372,7 @@ def create_training_unit(data: dict, tenant: TenantContext = Depends(get_tenant_
                 ) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
                 RETURNING id
                 """,
-                base_params + (assistant_val,),
+                base_params + (av_db,),
             )
         else:
             cur.execute(
@@ -1892,10 +2390,14 @@ def create_training_unit(data: dict, tenant: TenantContext = Depends(get_tenant_
 
         unit_id = cur.fetchone()["id"]
 
+        _assert_single_plan_content_key_create(data)
+        phases_in = data.get("phases")
         sections_in = data.get("sections")
         exercises_in = data.get("exercises")
 
-        if sections_in is not None:
+        if phases_in is not None:
+            _replace_unit_phases(cur, unit_id, phases_in, profile_id, role, profile_id)
+        elif sections_in is not None:
             _replace_unit_sections(cur, unit_id, sections_in)
         elif tpl_id_safe:
             _instantiate_from_template(cur, unit_id, tpl_id_safe)
@@ -2013,7 +2515,7 @@ def update_training_unit(unit_id: int, data: dict, tenant: TenantContext = Depen
                     eff_lead_for_co,
                 )
                 assist_sql = ", assistant_trainer_profile_ids = %s"
-                assist_params.append(na)
+                assist_params.append(None if na is None else PsycopgJson(na))
 
             debrief_frag = ""
             if "debrief_completed" in data and not is_blueprint:
@@ -2071,20 +2573,29 @@ def update_training_unit(unit_id: int, data: dict, tenant: TenantContext = Depen
                     detail="reset_from_template erfordert plan_template_id auf der Einheit oder im Request",
                 )
             _template_access(cur, tid, profile_id, role)
-            cur.execute("DELETE FROM training_unit_sections WHERE training_unit_id = %s", (unit_id,))
             cur.execute(
                 "UPDATE training_units SET plan_template_id = %s WHERE id = %s", (tid, unit_id)
             )
             _instantiate_from_template(cur, unit_id, tid)
             content_handled = True
 
-        if not content_handled and "sections" in data:
+        _assert_single_plan_content_key_update(data)
+        if not content_handled and "phases" in data:
+            _replace_unit_phases(
+                cur,
+                unit_id,
+                data.get("phases") or [],
+                profile_id,
+                role,
+                unit_row.get("created_by"),
+            )
+        elif not content_handled and "sections" in data:
             _replace_unit_sections(cur, unit_id, data["sections"] or [])
         elif not content_handled and "exercises" in data:
-            cur.execute("DELETE FROM training_unit_sections WHERE training_unit_id = %s", (unit_id,))
+            _clear_unit_plan_content(cur, unit_id)
             _insert_sections_from_legacy_exercises(cur, unit_id, data["exercises"] or [])
 
-        if content_handled or "sections" in data or "exercises" in data:
+        if content_handled or any(k in data for k in ("phases", "sections", "exercises")):
             _promote_private_exercises_used_in_unit(cur, unit_id, profile_id, role)
 
         conn.commit()
@@ -2196,6 +2707,7 @@ def create_training_unit_from_framework_slot(data: dict, tenant: TenantContext =
             str(planned_date),
             profile_id,
             slot_id,
+            role,
         )
 
         _promote_private_exercises_used_in_unit(cur, new_id, profile_id, role)
diff --git a/backend/tests/test_dashboard_kpis.py b/backend/tests/test_dashboard_kpis.py
index c9ea3dc..313b45b 100644
--- a/backend/tests/test_dashboard_kpis.py
+++ b/backend/tests/test_dashboard_kpis.py
@@ -2,6 +2,7 @@
 from __future__ import annotations
 
 import os
+from unittest.mock import patch
 
 import pytest
 from fastapi import Query
@@ -11,6 +12,7 @@ os.environ.setdefault("SKIP_DB_MIGRATE", "1")
 
 from fastapi_param_unwrap import unwrap_query_default
 from main import app
+from tenant_context import TenantContext, get_tenant_context
 
 
 @pytest.fixture
@@ -27,3 +29,41 @@ def test_unwrap_query_default_for_direct_route_calls() -> None:
 def test_dashboard_kpis_unauthenticated_401(client: TestClient) -> None:
     r = client.get("/api/dashboard/kpis")
     assert r.status_code == 401
+
+
+def _fake_tenant_for_kpis() -> TenantContext:
+    return TenantContext(
+        profile_id=42,
+        global_role="trainer",
+        effective_club_id=7,
+        club_ids=frozenset({7}),
+        memberships=[],
+    )
+
+
+@patch("routers.dashboard.list_training_units")
+@patch("routers.dashboard.list_exercises_like_get")
+def test_dashboard_kpis_200_when_inner_lists_mocked(
+    mock_list_ex: object,
+    mock_list_tu: object,
+    client: TestClient,
+) -> None:
+    mock_list_ex.return_value = []
+    mock_list_tu.return_value = []
+    app.dependency_overrides[get_tenant_context] = _fake_tenant_for_kpis
+    try:
+        r = client.get("/api/dashboard/kpis")
+        assert r.status_code == 200, r.text
+        data = r.json()
+        assert "year" in data
+        assert data["draft_count"] == 0
+        assert data["mine_count"] == 0
+        assert data["ytd_completed_count"] == 0
+        th = data["training_home"]
+        assert th["upcoming"] == []
+        assert th["planned_with_notes"] == []
+        assert th["review_pending"] == []
+        assert mock_list_ex.call_count == 2
+        assert mock_list_tu.call_count == 3
+    finally:
+        app.dependency_overrides.clear()
diff --git a/backend/tests/test_training_planning_sections_integration.py b/backend/tests/test_training_planning_sections_integration.py
new file mode 100644
index 0000000..5f71a11
--- /dev/null
+++ b/backend/tests/test_training_planning_sections_integration.py
@@ -0,0 +1,290 @@
+"""
+PostgreSQL-Integration: Roundtrip _replace_unit_sections / _replace_unit_phases ↔ Fetch-Helfer.
+
+Aktivierung:
+  - Lokal: TRAINING_PLANNING_INTEGRATION=1
+  - CI: .gitea/workflows/test.yml setzt die Variable beim pytest-Lauf (deployter Backend-Container + PostgreSQL).
+
+Voraussetzung: migrierte DB, DB_* wie Docker-Compose.
+"""
+from __future__ import annotations
+
+import os
+import uuid
+
+import pytest
+
+from db import get_db, get_cursor
+from routers.training_planning import (
+    _fetch_phases_nested,
+    _fetch_sections,
+    _replace_unit_phases,
+    _replace_unit_sections,
+)
+
+
+def _integration_enabled() -> bool:
+    return os.getenv("TRAINING_PLANNING_INTEGRATION", "").strip().lower() in ("1", "true", "yes")
+
+
+pytestmark = [
+    pytest.mark.integration,
+    pytest.mark.skipif(
+        not _integration_enabled(),
+        reason="TRAINING_PLANNING_INTEGRATION=1 und PostgreSQL (DB_*) erforderlich",
+    ),
+]
+
+
+def _db_ping() -> bool:
+    try:
+        with get_db() as conn:
+            cur = get_cursor(conn)
+            cur.execute("SELECT 1 AS ok")
+            row = cur.fetchone()
+            return row is not None and row.get("ok") == 1
+    except Exception:
+        return False
+
+
+@pytest.fixture(scope="module")
+def db_ready():
+    if not _db_ping():
+        pytest.skip("PostgreSQL nicht erreichbar (DB_HOST/DB_PORT/…)")
+
+
+def test_replace_sections_roundtrip(db_ready):
+    """INSERT-Hilfsdaten, replace, fetch — gleiche Semantik wie produktiver PUT-Pfad."""
+    suffix = uuid.uuid4().hex[:12]
+    club_name = f"tpl_it_club_{suffix}"
+    email = f"tpl_it_{suffix}@test.local"
+
+    from auth import hash_pin
+
+    with get_db() as conn:
+        cur = get_cursor(conn)
+        cur.execute(
+            "INSERT INTO clubs (name, abbreviation, status) VALUES (%s, %s, %s) RETURNING id",
+            (club_name, "T", "active"),
+        )
+        club_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO profiles (email, pin_hash, name, role, active_club_id)
+            VALUES (%s, %s, %s, %s, %s)
+            RETURNING id
+            """,
+            (email, hash_pin("x"), f"TP {suffix}", "trainer", club_id),
+        )
+        profile_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO training_groups (club_id, name, trainer_id, status)
+            VALUES (%s, %s, %s, %s)
+            RETURNING id
+            """,
+            (club_id, f"Gruppe {suffix}", profile_id, "active"),
+        )
+        group_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO exercises (title, goal, execution, visibility, status, created_by)
+            VALUES (%s, %s, %s, %s, %s, %s)
+            RETURNING id
+            """,
+            (f"Übung {suffix}", "Ziel", "Ablauf", "private", "draft", profile_id),
+        )
+        ex_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO training_units (
+                group_id, planned_date, status, created_by
+            ) VALUES (%s, %s, %s, %s)
+            RETURNING id
+            """,
+            (group_id, "2026-06-01", "planned", profile_id),
+        )
+        unit_id = int(cur.fetchone()["id"])
+
+        sections_in = [
+            {
+                "title": "A1",
+                "order_index": 0,
+                "guidance_notes": "gn",
+                "items": [
+                    {
+                        "item_type": "note",
+                        "order_index": 0,
+                        "note_body": "Hinweis",
+                    },
+                    {
+                        "item_type": "exercise",
+                        "order_index": 1,
+                        "exercise_id": ex_id,
+                        "planned_duration_min": 5,
+                        "notes": "n1",
+                    },
+                ],
+            },
+            {
+                "title": "B2",
+                "order_index": 1,
+                "items": [],
+            },
+        ]
+        _replace_unit_sections(cur, unit_id, sections_in)
+        loaded = _fetch_sections(cur, unit_id)
+        conn.commit()
+
+    try:
+        assert len(loaded) == 2
+        assert loaded[0]["title"] == "A1"
+        assert loaded[0]["guidance_notes"] == "gn"
+        assert loaded[0]["order_index"] == 0
+        assert len(loaded[0]["items"]) == 2
+        assert loaded[0]["items"][0]["item_type"] == "note"
+        assert loaded[0]["items"][0]["note_body"] == "Hinweis"
+        assert loaded[0]["items"][1]["item_type"] == "exercise"
+        assert int(loaded[0]["items"][1]["exercise_id"]) == ex_id
+        assert loaded[0]["items"][1]["planned_duration_min"] == 5
+        assert loaded[1]["title"] == "B2"
+        assert loaded[1]["items"] == []
+    finally:
+        with get_db() as conn:
+            cur = get_cursor(conn)
+            cur.execute("DELETE FROM training_units WHERE id = %s", (unit_id,))
+            cur.execute("DELETE FROM exercises WHERE id = %s", (ex_id,))
+            cur.execute("DELETE FROM training_groups WHERE id = %s", (group_id,))
+            cur.execute("DELETE FROM profiles WHERE id = %s", (profile_id,))
+            cur.execute("DELETE FROM clubs WHERE id = %s", (club_id,))
+            conn.commit()
+
+
+def test_replace_phases_roundtrip_parallel_stream(db_ready):
+    """Phasen inkl. parallel-Stream-Sektionen ersetzen und wieder laden."""
+    suffix = uuid.uuid4().hex[:12]
+    club_name = f"ph_it_club_{suffix}"
+    email = f"ph_it_{suffix}@test.local"
+
+    from auth import hash_pin
+
+    with get_db() as conn:
+        cur = get_cursor(conn)
+        cur.execute(
+            "INSERT INTO clubs (name, abbreviation, status) VALUES (%s, %s, %s) RETURNING id",
+            (club_name, "P", "active"),
+        )
+        club_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO profiles (email, pin_hash, name, role, active_club_id)
+            VALUES (%s, %s, %s, %s, %s)
+            RETURNING id
+            """,
+            (email, hash_pin("x"), f"PH {suffix}", "trainer", club_id),
+        )
+        profile_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO training_groups (club_id, name, trainer_id, status)
+            VALUES (%s, %s, %s, %s)
+            RETURNING id
+            """,
+            (club_id, f"Gruppe PH {suffix}", profile_id, "active"),
+        )
+        group_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO exercises (title, goal, execution, visibility, status, created_by)
+            VALUES (%s, %s, %s, %s, %s, %s)
+            RETURNING id
+            """,
+            (f"Übung PH {suffix}", "Ziel", "Ablauf", "private", "draft", profile_id),
+        )
+        ex_id = int(cur.fetchone()["id"])
+
+        cur.execute(
+            """
+            INSERT INTO training_units (
+                group_id, planned_date, status, created_by
+            ) VALUES (%s, %s, %s, %s)
+            RETURNING id
+            """,
+            (group_id, "2026-06-02", "planned", profile_id),
+        )
+        unit_id = int(cur.fetchone()["id"])
+
+        phases_in = [
+            {
+                "phase_kind": "whole_group",
+                "order_index": 0,
+                "title": "Aufwärmen",
+                "sections": [
+                    {
+                        "title": "Gemeinsam",
+                        "order_index": 0,
+                        "items": [
+                            {"item_type": "note", "order_index": 0, "note_body": "Los"},
+                        ],
+                    },
+                ],
+            },
+            {
+                "phase_kind": "parallel",
+                "order_index": 1,
+                "title": "Breakout",
+                "streams": [
+                    {
+                        "order_index": 0,
+                        "title": "Matte A",
+                        "sections": [
+                            {
+                                "title": "Technik A",
+                                "order_index": 0,
+                                "items": [
+                                    {
+                                        "item_type": "exercise",
+                                        "order_index": 0,
+                                        "exercise_id": ex_id,
+                                        "planned_duration_min": 10,
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ]
+        _replace_unit_phases(cur, unit_id, phases_in, profile_id, "trainer", profile_id)
+        nested = _fetch_phases_nested(cur, unit_id)
+        flat_sec = _fetch_sections(cur, unit_id)
+        conn.commit()
+
+    try:
+        assert len(nested) == 2
+        assert nested[0]["phase_kind"] == "whole_group"
+        assert len(nested[0].get("sections") or []) == 1
+        assert nested[1]["phase_kind"] == "parallel"
+        streams = nested[1].get("streams") or []
+        assert len(streams) == 1
+        assert len(streams[0].get("sections") or []) == 1
+        assert streams[0]["sections"][0]["title"] == "Technik A"
+        assert len(streams[0]["sections"][0].get("items") or []) == 1
+        assert int(streams[0]["sections"][0]["items"][0]["exercise_id"]) == ex_id
+        assert len(flat_sec) == 2
+    finally:
+        with get_db() as conn:
+            cur = get_cursor(conn)
+            cur.execute("DELETE FROM training_units WHERE id = %s", (unit_id,))
+            cur.execute("DELETE FROM exercises WHERE id = %s", (ex_id,))
+            cur.execute("DELETE FROM training_groups WHERE id = %s", (group_id,))
+            cur.execute("DELETE FROM profiles WHERE id = %s", (profile_id,))
+            cur.execute("DELETE FROM clubs WHERE id = %s", (club_id,))
+            conn.commit()
diff --git a/backend/tests/test_training_planning_sections_pure.py b/backend/tests/test_training_planning_sections_pure.py
new file mode 100644
index 0000000..fd71e59
--- /dev/null
+++ b/backend/tests/test_training_planning_sections_pure.py
@@ -0,0 +1,32 @@
+"""Unit-Tests ohne DB: abgeleitete Trainingseinheit-Payload-Helfer."""
+import pytest
+
+from routers.training_planning import _flatten_exercises_from_sections
+
+
+def test_flatten_exercises_from_sections_order():
+    unit = {
+        "sections": [
+            {
+                "order_index": 1,
+                "items": [
+                    {"order_index": 1, "item_type": "exercise", "exercise_id": 10},
+                    {"order_index": 0, "item_type": "note"},
+                    {"order_index": 2, "item_type": "exercise", "exercise_id": 20},
+                ],
+            },
+            {
+                "order_index": 0,
+                "items": [{"order_index": 0, "item_type": "exercise", "exercise_id": 5}],
+            },
+        ]
+    }
+    _flatten_exercises_from_sections(unit)
+    # Sektionen nach order_index; innerhalb nur exercise-Items nach order_index
+    assert [x["exercise_id"] for x in unit["exercises"]] == [5, 10, 20]
+
+
+def test_flatten_exercises_from_sections_empty():
+    unit = {"sections": []}
+    _flatten_exercises_from_sections(unit)
+    assert unit["exercises"] == []
diff --git a/backend/version.py b/backend/version.py
index 7364ece..aaf4f4d 100644
--- a/backend/version.py
+++ b/backend/version.py
@@ -1,8 +1,8 @@
 # Shinkan Jinkendo Version Information
 
-APP_VERSION = "0.8.123"
+APP_VERSION = "0.8.140"
 BUILD_DATE = "2026-05-12"
-DB_SCHEMA_VERSION = "20260514062"
+DB_SCHEMA_VERSION = "20260515063"
 
 MODULE_VERSIONS = {
     "legal_documents": "1.4.0",  # Admin: Live-Vorschau pro Abschnitt + modale Vollvorschau (Editor + Dokumentenliste)
@@ -24,7 +24,7 @@ MODULE_VERSIONS = {
     "exercises": "2.28.0",  # GET /api/exercises Keyset cursor_updated_at + cursor_id; Sortierung id als Tie-break
     "training_units": "0.3.0",  # GET /api/training-units Keyset cursor_planned_date + cursor_id (+ optional cursor_planned_time); Sort mit id-Tiebreak
     "training_programs": "0.1.0",
-    "planning": "0.9.4",  # list_training_units: Keyset-Pagination + stabile Sortierung (NULLS LAST + id)
+    "planning": "0.11.0",  # PUT/POST training_units: phases (parallel streams); Rahmen→Termin-Kopie _replace_unit_phases; apply-training-module phase_order_index + parallel_stream_order_index
     "dashboard": "1.1.0",  # GET /api/dashboard/kpis inkl. training_home (ein Client-Roundtrip für KPIs + nächste Termine)
     "training_modules": "1.0.0",
     "import_wiki": "1.0.0",
@@ -36,6 +36,122 @@ MODULE_VERSIONS = {
 }
 
 CHANGELOG = [
+    {
+        "version": "0.8.140",
+        "date": "2026-05-14",
+        "changes": [
+            "Frontend Trainingsplanung: Breakout-Panel (neue Ganzgruppen-/parallele Phase, Stream in letzter parallelen Phase); pro Abschnitt Zuordnung zu Phase/Stream oder klassischer Ein-Ganzgruppen-Ablauf.",
+        ],
+    },
+    {
+        "version": "0.8.139",
+        "date": "2026-05-14",
+        "changes": [
+            "Frontend Trainingsplanung: GET phases → Editor mit planLoc pro Abschnitt; Speichern sendet PUT phases bei Breakout-Einheiten (sonst weiter sections); Modul-Dialog zeigt Phase/Stream in der Abschnittsauswahl.",
+        ],
+    },
+    {
+        "version": "0.8.138",
+        "date": "2026-05-14",
+        "changes": [
+            "Planung Paket 2: POST/PUT training_units mit phases (voller Phasen-/Stream-Plan); höchstens eines von phases, sections, exercises pro Request; Rahmen-Blueprint→Termin kopiert verschachtelten Plan; apply-training-module optional phase_order_index + parallel_stream_order_index.",
+            "Fix: POST from-framework-slot übergibt role an _copy_blueprint_into_scheduled_unit (Stream-Trainer-Validierung).",
+            "Integrationstest test_replace_phases_roundtrip_parallel_stream.",
+        ],
+    },
+    {
+        "version": "0.8.137",
+        "date": "2026-05-14",
+        "changes": [
+            "DB 063: training_unit_phases, training_unit_parallel_streams; Sektionen mit phase_id oder parallel_stream_id; Default whole_group für Bestand.",
+            "Planung: GET training_unit liefert phases (verschachtelt) + sections (flach sortiert); Legacy-PUT sections weiterhin eine whole_group-Phase.",
+        ],
+    },
+    {
+        "version": "0.8.136",
+        "date": "2026-05-13",
+        "changes": [
+            "Fix: api/exercises.js — Mandanten-Header für Raw-fetch (PUT Übung, Medien-Upload, Bulk-Archiv) über lokale withActiveClubHeaders statt mergeActiveClubHeader-Import (ReferenceError beim Speichern).",
+        ],
+    },
+    {
+        "version": "0.8.135",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 4 Welle 3: frontend/src/api/exercises.js (Übungen, Medien/Archiv, Progressionsgraphen, KI); client.js exportiert API_URL und mergeActiveClubHeader; utils/api.js re-exportiert Modul, api-Objekt spread exercises.",
+        ],
+    },
+    {
+        "version": "0.8.134",
+        "date": "2026-05-14",
+        "changes": [
+            "Frontend Phase 4 Welle 2: frontend/src/api/planning.js (Trainingsplanung); utils/api.js re-exportiert Modul, api-Objekt spread planning.",
+        ],
+    },
+    {
+        "version": "0.8.133",
+        "date": "2026-05-14",
+        "changes": [
+            "Frontend Phase 4 Welle 1: frontend/src/api/client.js (request, ACTIVE_CLUB_STORAGE_KEY); utils/api.js importiert Client, bleibt Facade. Roadmap Phase 4 gestartet.",
+        ],
+    },
+    {
+        "version": "0.8.132",
+        "date": "2026-05-14",
+        "changes": [
+            "Frontend Phase 3 abgeschlossen: TrainingPlanningPageRoot, ExerciseFormPageRoot, ExercisesListPageRoot unter components/; pages/ nur Re-Export (Soft-Limit). Roadmap UMSETZUNGSPLAN Phase 3 / M3 aktualisiert.",
+        ],
+    },
+    {
+        "version": "0.8.131",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 3: TrainingPlanningUnitFormModal (Neu/Bearbeiten-Einheit); frameworkLineageText in trainingPlanningPageHelpers; BASELINE_SNAPSHOT §3.4 k6-Log-Mapping.",
+        ],
+    },
+    {
+        "version": "0.8.130",
+        "date": "2026-05-13",
+        "changes": [
+            "Fix: PUT/POST training_units — assistant_trainer_profile_ids als JSONB mit psycopg2.extras.Json schreiben (rohe Python-Liste → ProgrammingError/500 bei Co-Zuweisung).",
+        ],
+    },
+    {
+        "version": "0.8.129",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 3: TrainingPlanningTrainerAssignModal (Trainer zuweisen) aus Trainingsplanungsseite; Handler per useCallback.",
+        ],
+    },
+    {
+        "version": "0.8.128",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 3: TrainingPlanningModuleApplyModal (Trainingsmodul einfügen) aus Trainingsplanungsseite; gemeinsamer Callback onModuleApplySectionIndexChange.",
+        ],
+    },
+    {
+        "version": "0.8.126",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 3: TrainingPlanningFrameworkImportModal aus Trainingsplanungsseite; Playwright-Test 13 (Rahmen-Dialog, skip ohne Gruppe).",
+        ],
+    },
+    {
+        "version": "0.8.125",
+        "date": "2026-05-13",
+        "changes": [
+            "Tests: Playwright 11 (Übungsliste Bulk-Toolbar), 12 (Trainingsplanung); Dashboard-Test 8 prüft HTTP 200 auf /api/dashboard/kpis; pytest test_dashboard_kpis_200_when_inner_lists_mocked.",
+            "Frontend Phase 3: trainingPlanningPageHelpers.js aus TrainingPlanningPage; ExerciseListBulkToolbar data-testid.",
+        ],
+    },
+    {
+        "version": "0.8.124",
+        "date": "2026-05-13",
+        "changes": [
+            "Frontend Phase 3 (Teil): ExerciseListBulkToolbar-Komponente; Übungsliste nur Verdrahtung.",
+        ],
+    },
     {
         "version": "0.8.123",
         "date": "2026-05-13",
diff --git a/docs/architecture/BASELINE_SNAPSHOT.md b/docs/architecture/BASELINE_SNAPSHOT.md
index 0018eca..0b77b98 100644
--- a/docs/architecture/BASELINE_SNAPSHOT.md
+++ b/docs/architecture/BASELINE_SNAPSHOT.md
@@ -90,6 +90,22 @@ Messung: Repo-Root → `cd frontend && npm run build` (Vite Production).
 |----------|-------------------|------------------|
 | 10 VUs, 30 s `/health` | *—* | *nach Messung* |
 
+### 3.4 Aus dem Deployment-/CI-Log übernehmen (k6 `k6-health-baseline`)
+
+Das Skript `scripts/load/k6-health-baseline.js` nutzt **10 VUs**, **30 s**, Ziel **`GET {BASE_URL}/health`** (siehe Workflow-Env für `BASE_URL`).
+
+**In die Tabelle oben (Abschnitt 3.3) eintragen — aus der k6-Zusammenfassung am Ende des Jobs:**
+
+| Feld in BASELINE_SNAPSHOT | Wo im k6-Log (typisch) |
+|---------------------------|-------------------------|
+| **p95** (Latenz ms) | Zeile **`http_req_duration`** → Wert **`p(95)=…`** (ganze Zahl oder ms mit Einheit wie `12.34ms`) |
+| **Fehlerquote** | Zeile **`http_req_failed`** → z. B. `0.00%` bzw. `✓ 0%` — oder kurz „0 %“ notieren |
+| **Checks** (optional) | Zeile **`checks`** → Anteil **`✓`** (soll **100 %** sein, sonst Hinweis) |
+| **Datum / BASE_URL** | Deploy-Datum + die **öffentliche** Basis-URL des Laufs (wie im Workflow gesetzt, z. B. `https://dev.shinkan.jinkendo.de`) |
+| **App-Version** (optional) | dieselbe wie im Deploy (`backend/version.py` / Release), damit M2-Vergleich ressortfähig bleibt |
+
+**Zusätzlich (Abschnitt 2.2):** nur die Zeile **`/health` GET`** mit dem **gleichen** p95 befüllen, wenn ihr dort noch Platzhalter habt — echte API-Routen (`/api/...`) kommen weiter aus Monitoring/k6 mit Auth, nicht aus diesem Job.
+
 ---
 
 ## 4. Nächster Schritt (Roadmap)
diff --git a/docs/architecture/README.md b/docs/architecture/README.md
index ac5fe6c..91bed80 100644
--- a/docs/architecture/README.md
+++ b/docs/architecture/README.md
@@ -9,6 +9,9 @@ Dieses Bündel ist die **Leitlinie für die große Refaktorierung** nach dem MVP
 | [ZIELBILD_ARCHITEKTUR.md](./ZIELBILD_ARCHITEKTUR.md) | Zielarchitektur (Frontend, API, Daten), Qualitätsziele, Einbindung neuer Features |
 | [SCHULDEN_UND_REMEDIATION.md](./SCHULDEN_UND_REMEDIATION.md) | Erfasste Architekturschuld, Reihenfolge und Massnahmen zur Behebung |
 | [UMSETZUNGSPLAN_ROADMAP.md](./UMSETZUNGSPLAN_ROADMAP.md) | Phasen, Meilensteine, Abnahmekriterien, Aufwandsschwerpunkte |
+| [`frontend/src/api/client.js`](../../frontend/src/api/client.js) | Phase 4: zentraler HTTP-Client (`request`, `ACTIVE_CLUB_STORAGE_KEY`, `API_URL`, `mergeActiveClubHeader`) |
+| [`frontend/src/api/exercises.js`](../../frontend/src/api/exercises.js) | Phase 4: Übungen, Medien/Archiv, Progressionsgraphen, KI-Hilfen |
+| [`frontend/src/api/planning.js`](../../frontend/src/api/planning.js) | Phase 4: Trainingsplanung (Einheiten, Vorlagen, Module, Rahmen, KPIs) |
 | [BASELINE_SNAPSHOT.md](./BASELINE_SNAPSHOT.md) | Phase 0: Bundle-, API- und Last-Baseline (Messvorlagen, Vergleich nach Phase 2) |
 | [VERBINDLICHE_REGELN_SHINKAN.md](./VERBINDLICHE_REGELN_SHINKAN.md) | **Verbindliche** Shinkan-spezifische Regeln (Ergänzung zu den globalen Rules) |
 
diff --git a/docs/architecture/UMSETZUNGSPLAN_ROADMAP.md b/docs/architecture/UMSETZUNGSPLAN_ROADMAP.md
index ba2f011..558d42c 100644
--- a/docs/architecture/UMSETZUNGSPLAN_ROADMAP.md
+++ b/docs/architecture/UMSETZUNGSPLAN_ROADMAP.md
@@ -7,7 +7,8 @@
 - **Phase 1 (Teil):** Org-Inbox: **ein** gemeinsamer Ladepfad `fetchOrgInboxSnapshot` für Mount-`useEffect` und `refreshOrgInbox` (gleiche Requests, weniger Drift-Risiko; Verhalten unverändert).
 - **Phase 2:** **abgeschlossen** (2026-05-14) — Indizes 058–062, Keyset `/api/exercises` + `/api/training-units`, **`/api/dashboard/kpis`** inkl. `training_home`, EXPLAIN-Vorlagen **`scripts/load/explain-readpaths.sql`**.
 - **Offen Phase 1:** Inbox optional **TTL** / nur bei sichtbarem Widget.
-- **Phase 3 (gestartet 2026-05-13):** Übungsliste modularisiert (Karte, Filter-/Bulk-Modals, virtualisierter Picker, lazy Progression); Playwright **Tests 9–10**. Weiter: God-Pages (Planung/Formular).
+- **Phase 3 (abgeschlossen 2026-05-14):** Übungsliste modularisiert; Trainingsplanung/Übungsformular: **Page-Dateien unter Soft-Limit** — Implementierung in `TrainingPlanningPageRoot.jsx`, `ExerciseFormPageRoot.jsx`, `ExercisesListPageRoot.jsx`; `pages/*.jsx` nur Re-Export. Playwright **Tests 9–10**.
+- **Phase 4 (fortlaufend 2026-05-14):** API **Welle 1** `client.js`; **Welle 2** `planning.js`; **Welle 3** `exercises.js`; `utils/api.js` bleibt Facade (`export *`, `api`-Objekt `...exercises`, `...planning`).
 
 **Ziel:** Nach MVP eine **nachhaltige** Architektur für Wachstum, **Performance** (Server + schwache Clients) und **sichere Feature-Erweiterung**.  
 **Leitdokumente:** [ZIELBILD_ARCHITEKTUR.md](./ZIELBILD_ARCHITEKTUR.md), [SCHULDEN_UND_REMEDIATION.md](./SCHULDEN_UND_REMEDIATION.md), [VERBINDLICHE_REGELN_SHINKAN.md](./VERBINDLICHE_REGELN_SHINKAN.md).
@@ -82,7 +83,9 @@
 | Virtualisierung für die längste produktive Liste | A1, S2 |
 | Schwere Imports auf `import()` umziehen (gezielt) | A4 |
 
-**Teil umgesetzt (2026-05-13):** `ExercisesListPage` — Karten `ExerciseListCard.jsx`; Filter/Massenänderung `ExerciseListFilterModal.jsx` / `ExerciseListBulkModal.jsx`; Tab „Progressionsgraphen“ **lazy**; **Picker** virtualisiert; Gitter `data-testid` + `content-visibility`; Playwright **Tests 9–10**. Offen: Seite unter Soft-Limit (~500 Zeilen, derzeit ~918 LOC), Zerteilung Planung/Übungsformular.
+**Teil umgesetzt (2026-05-13):** `ExercisesListPage` — Karten `ExerciseListCard.jsx`; Filter/Massenänderung `ExerciseListFilterModal.jsx` / `ExerciseListBulkModal.jsx`; Tab „Progressionsgraphen“ **lazy**; **Picker** virtualisiert; Gitter `data-testid` + `content-visibility`; Playwright **Tests 9–10**.
+
+**Abgeschlossen (2026-05-14):** Routen bleiben unter `frontend/src/pages/`; schwere Implementierung in **`components/planning/TrainingPlanningPageRoot.jsx`**, **`components/exercises/ExerciseFormPageRoot.jsx`**, **`components/exercises/ExercisesListPageRoot.jsx`** — **`pages/*` nur Re-Export** (Soft-Limit ~500 Zeilen laut `VERBINDLICHE_REGELN_SHINKAN.md`).
 
 **Abnahme:** Referenz-Page unter Soft-Limit; Regel S1 für neue Änderungen durchsetzbar.
 
@@ -90,13 +93,17 @@
 
 ## Phase 4 – API-Client Modularisierung
 
+**Status:** **fortlaufend** (2026-05-14) — Welle 1: **`client.js`**; Welle 2: **`planning.js`**; Welle 3: **`exercises.js`**; **`utils/api.js`** bleibt vollständige Facade.
+
 **Fokus:** Wartbarkeit für viele neue Features.
 
-| Task | Bezug |
-|------|--------|
-| `frontend/src/api/` anlegen, `request`/`client` zentral | A2 |
-| Facade: bestehende Importe von `utils/api` nicht sofort alle brechen; Migration in Wellen | A2 |
-| Neue Endpoints nur noch in Domänen-Dateien | S3 |
+| Task | Bezug | Status |
+|------|-------|--------|
+| `frontend/src/api/client.js` — zentraler HTTP-Client | A2 | erledigt (Welle 1) |
+| `frontend/src/api/planning.js` — Trainingsplanung (Einheiten, Vorlagen, Module, Rahmen, Dashboard-KPIs) | A2 | erledigt (Welle 2) |
+| `frontend/src/api/exercises.js` — Übungen, Medien/Archiv, Varianten, Progressionsgraphen, KI | A2 | erledigt (Welle 3) |
+| Weitere Domänen-Module unter `frontend/src/api/` + Entlastung von `utils/api.js` | A2 | offen |
+| Neue Endpoints primär in Domänen-Dateien | S3 | offen |
 
 **Abnahme:** Anteil neuer Module > X% der neuen Zeilen (Team-Ziel); Monolith wächst nicht weiter.
 
@@ -121,7 +128,7 @@
 |-------------|--------|
 | **M1** | Phase 0 + 1 abgeschlossen, HANDOVER aktualisiert |
 | **M2** | Phase 2 abgeschlossen, Lasttest / p95 nachziehen |
-| **M3** | Phase 3 Referenz-Page + Virtualisierung live |
+| **M3** | Phase 3 abgeschlossen: Page-Dateien Soft-Limit (Re-Export); Virtualisierung Übungsliste |
 | **M4** | Phase 4 migrationsbereit für alle neuen Features |
 | **M5** | Phase 5 für Top-Listen abgeschlossen |
 
diff --git a/frontend/src/api/client.js b/frontend/src/api/client.js
new file mode 100644
index 0000000..e4a0806
--- /dev/null
+++ b/frontend/src/api/client.js
@@ -0,0 +1,79 @@
+/**
+ * HTTP-Client: Token, Mandanten-Header, Fehler-Mapping.
+ * Alle API-Aufrufe laufen über request() — siehe utils/api.js (Facade) und Domänenmodule (planning.js, exercises.js).
+ */
+
+export const API_URL = import.meta.env.VITE_API_URL || ''
+
+/** LocalStorage + Request-Header für Mandanten-Kontext */
+export const ACTIVE_CLUB_STORAGE_KEY = 'shinkan_active_club_id'
+
+export function mergeActiveClubHeader(headers = {}) {
+  const cid = localStorage.getItem(ACTIVE_CLUB_STORAGE_KEY)
+  if (cid && /^\d+$/.test(String(cid).trim())) {
+    return { ...headers, 'X-Active-Club-Id': String(cid).trim() }
+  }
+  return { ...headers }
+}
+
+/**
+ * Generischer API-Aufruf inkl. X-Auth-Token und X-Active-Club-Id.
+ */
+export async function request(endpoint, options = {}) {
+  const token = localStorage.getItem('authToken')
+  const method = (options.method || 'GET').toUpperCase()
+
+  const headers = mergeActiveClubHeader({
+    ...options.headers,
+  })
+  if (method !== 'GET' && method !== 'HEAD') {
+    if (!headers['Content-Type'] && !headers['content-type']) {
+      headers['Content-Type'] = 'application/json'
+    }
+  }
+
+  if (token) {
+    headers['X-Auth-Token'] = token
+  }
+
+  const url = `${API_URL}${endpoint}`
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers,
+    })
+
+    if (!response.ok) {
+      const text = await response.text()
+      let parsed = null
+      try {
+        parsed = JSON.parse(text)
+      } catch {
+        parsed = null
+      }
+      if (parsed?.detail != null) {
+        const d = parsed.detail
+        throw new Error(typeof d === 'string' ? d : JSON.stringify(d))
+      }
+      if (response.status === 502) {
+        throw new Error(
+          'HTTP 502 (Bad Gateway): Der Reverse-Proxy hat die API nicht korrekt erreicht. Ist `shinkan-api` aktiv (`docker compose ps`, `docker logs shinkan-api`)? Bei Host-Routing nur einen Weg verwenden — alles auf Port 3003 (Nginx nach `backend:8000`) oder sauber `/api` → Backend-Port.'
+        )
+      }
+      const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
+      throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
+    }
+
+    return response.json()
+  } catch (e) {
+    if (e instanceof TypeError && (e.message === 'Failed to fetch' || e.message.includes('fetch'))) {
+      const hint =
+        API_URL && API_URL.length > 0
+          ? `Verbindung zum API unter ${API_URL} fehlgeschlagen. Läuft das Backend (z. B. Port 8098) und ist CORS erlaubt?`
+          : 'Kein VITE_API_URL gesetzt: Anfragen gehen an die Frontend-URL und schlagen oft fehl. Setze in .env z. B. VITE_API_URL=http://localhost:8098 und starte Vite neu.'
+      throw new Error(`${hint} [Technisch: ${e.message}; URL war ${endpoint}]`)
+    }
+    throw e
+  }
+}
diff --git a/frontend/src/api/exercises.js b/frontend/src/api/exercises.js
new file mode 100644
index 0000000..3c3f387
--- /dev/null
+++ b/frontend/src/api/exercises.js
@@ -0,0 +1,593 @@
+/**
+ * Übungen: Liste/CRUD, Medien & Archiv-Anbindung, Progressionsgraphen, KI-Hilfen.
+ */
+
+import { stripHtmlToText } from '../utils/htmlUtils'
+import { normalizeAdvanceMode, parseComboRepSeriesCountUi } from '../utils/combinationMethodProfileUi'
+import { request, API_URL, ACTIVE_CLUB_STORAGE_KEY } from './client.js'
+
+/** Wie `mergeActiveClubHeader` in client.js — lokal, damit Raw-`fetch`-Pfade nicht von einem Namensimport abhängen. */
+function withActiveClubHeaders(headers = {}) {
+  const cid = localStorage.getItem(ACTIVE_CLUB_STORAGE_KEY)
+  if (cid && /^\d+$/.test(String(cid).trim())) {
+    return { ...headers, 'X-Active-Club-Id': String(cid).trim() }
+  }
+  return { ...headers }
+}
+
+// ============================================================================
+// Exercises
+// ============================================================================
+
+export async function listExercises(filters = {}) {
+  const q = new URLSearchParams()
+  Object.entries(filters).forEach(([k, v]) => {
+    if (v === undefined || v === null) return
+    if (typeof v === 'boolean') {
+      q.set(k, v ? 'true' : 'false')
+      return
+    }
+    if (Array.isArray(v)) {
+      if (v.length === 0) return
+      v.forEach((item) => {
+        if (item !== '' && item !== undefined && item !== null && String(item).trim() !== '') {
+          q.append(k, String(item))
+        }
+      })
+      return
+    }
+    if (String(v).trim() !== '') q.set(k, String(v))
+  })
+  const query = q.toString()
+  return request(`/api/exercises${query ? '?' + query : ''}`)
+}
+
+/** Formular → API-Body (M:N gemäß EXERCISES_API_SPEC + training_types) */
+export function buildExerciseApiPayload(formData, extras = {}) {
+  const num = (v) => (v === '' || v == null ? null : Number(v))
+
+  const goalHtml = formData.goal || ''
+  const execHtml = formData.execution || ''
+  const goalText = stripHtmlToText(goalHtml)
+  const execText = stripHtmlToText(execHtml)
+
+  if (!goalText && !execText) {
+    throw new Error('Ziel oder Durchführung ausfüllen (mindestens eines, auch mit Formatierung).')
+  }
+
+  const mapFocus = (formData.focus_areas_multi || [])
+    .filter((x) => x && x.focus_area_id)
+    .map((x) => ({ focus_area_id: Number(x.focus_area_id), is_primary: !!x.is_primary }))
+  const mapStyles = (formData.training_styles_multi || [])
+    .filter((x) => x && x.training_style_id)
+    .map((x) => ({ training_style_id: Number(x.training_style_id), is_primary: !!x.is_primary }))
+  const mapTTypes = (formData.training_types_multi || [])
+    .filter((x) => x && x.training_type_id)
+    .map((x) => ({ training_type_id: Number(x.training_type_id), is_primary: !!x.is_primary }))
+  const mapTg = (formData.target_groups_multi || [])
+    .filter((x) => x && x.target_group_id)
+    .map((x) => ({ target_group_id: Number(x.target_group_id), is_primary: !!x.is_primary }))
+
+  const visibilityNorm = String(formData.visibility || 'private').trim().toLowerCase()
+
+  const payload = {
+    title: (formData.title || '').trim(),
+    summary: formData.summary || null,
+    goal: goalHtml.trim() ? goalHtml : null,
+    execution: execHtml.trim() ? execHtml : null,
+    preparation: formData.preparation || null,
+    trainer_notes: formData.trainer_notes || null,
+    duration_min: num(formData.duration_min),
+    duration_max: num(formData.duration_max),
+    group_size_min: num(formData.group_size_min),
+    group_size_max: num(formData.group_size_max),
+    equipment: Array.isArray(formData.equipment) ? formData.equipment : [],
+    focus_areas_multi: mapFocus,
+    training_styles_multi: mapStyles,
+    training_types_multi: mapTTypes,
+    target_groups_multi: mapTg,
+    age_groups: [],
+    skills: (formData.skills || []).map((s) => ({
+      skill_id: s.skill_id,
+      is_primary: !!s.is_primary,
+      intensity: s.intensity || null,
+      required_level: s.required_level || null,
+      target_level: s.target_level || null,
+    })),
+    visibility: visibilityNorm,
+    status: formData.status || 'draft',
+    club_id: visibilityNorm === 'club' ? num(formData.club_id) : null,
+    exercise_kind:
+      String(formData.exercise_kind || 'simple').toLowerCase() === 'combination'
+        ? 'combination'
+        : 'simple',
+    ...extras,
+  }
+
+  const isCombo = payload.exercise_kind === 'combination'
+
+  if (isCombo) {
+    let mpObj = {}
+    const mpRaw = typeof formData.method_profile_json === 'string' ? formData.method_profile_json.trim() : ''
+    if (mpRaw) {
+      try {
+        const parsed = JSON.parse(mpRaw)
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+          throw new Error('Ablaufprofil muss ein JSON-Objekt sein.')
+        }
+        mpObj = parsed
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          throw new Error('Ablaufprofil (JSON): Syntax ungültig.')
+        }
+        throw e
+      }
+    }
+
+    const slotRows = Array.isArray(formData.combination_slots) ? formData.combination_slots : []
+    const combination_slots = []
+
+    function parseTimingField(raw) {
+      if (raw === '' || raw == null || raw === undefined) return undefined
+      const n = parseInt(String(raw), 10)
+      return Number.isFinite(n) ? n : undefined
+    }
+
+    for (let i = 0; i < slotRows.length; i += 1) {
+      const row = slotRows[i] || {}
+      let ids = Array.isArray(row.candidate_exercise_ids)
+        ? row.candidate_exercise_ids.map((x) => Number(x)).filter((n) => Number.isFinite(n))
+        : []
+
+      /** Legacy: noch idsText Unterstützung für Import von älteren FormStand */
+      if ((!ids || ids.length === 0) && typeof row.idsText === 'string' && row.idsText.trim()) {
+        ids = row.idsText
+          .split(/[\s,;]+/)
+          .map((s) => s.trim())
+          .filter(Boolean)
+          .map((s) => parseInt(s, 10))
+          .filter((n) => Number.isFinite(n))
+      }
+
+      combination_slots.push({
+        slot_index: i,
+        title: (typeof row.title === 'string' && row.title.trim()) || null,
+        candidate_exercise_ids: ids,
+      })
+    }
+
+    const slot_profiles_v1_next = []
+    for (let i = 0; i < slotRows.length; i += 1) {
+      const row = slotRows[i] || {}
+      const o = { slot_index: i }
+      const advanceMode = normalizeAdvanceMode(row.advance_mode)
+      if (advanceMode !== 'timed') o.advance_mode = advanceMode
+      const load = parseTimingField(row.load_sec)
+      const crs = parseTimingField(row.consecutive_reps)
+      const rsc = parseTimingField(row.rep_series_count)
+      const intra = parseTimingField(row.intra_rep_rest_sec)
+      const tran = parseTimingField(row.transition_after_sec)
+      const serienUi = parseComboRepSeriesCountUi(row.rep_series_count)
+      const allowInterSeriesPause =
+        advanceMode === 'timed' ||
+        ((advanceMode === 'rep' || advanceMode === 'manual') && serienUi >= 2)
+
+      if (advanceMode === 'timed' && load !== undefined && load >= 0) o.load_sec = Math.round(load)
+      if (crs !== undefined && crs >= 1) o.consecutive_reps = Math.round(crs)
+      if (
+        rsc !== undefined &&
+        rsc >= 1 &&
+        (advanceMode === 'rep' || advanceMode === 'manual')
+      ) {
+        o.rep_series_count = Math.round(rsc)
+      }
+      if (intra !== undefined && intra >= 0 && allowInterSeriesPause) o.intra_rep_rest_sec = Math.round(intra)
+      if (tran !== undefined && tran >= 0) o.transition_after_sec = Math.round(tran)
+      if (Object.keys(o).length > 1) slot_profiles_v1_next.push(o)
+    }
+
+    payload.method_archetype = (formData.method_archetype || '').trim() || null
+    if (slot_profiles_v1_next.length > 0) mpObj.slot_profiles_v1 = slot_profiles_v1_next
+    else delete mpObj.slot_profiles_v1
+    payload.method_profile = mpObj
+    payload.combination_slots = combination_slots
+  } else {
+    payload.method_archetype = null
+    payload.method_profile = {}
+  }
+
+  return payload
+}
+
+export async function uploadExerciseMedia(exerciseId, formData) {
+  const token = localStorage.getItem('authToken')
+  const headers = withActiveClubHeaders({})
+  if (token) headers['X-Auth-Token'] = token
+  const response = await fetch(`${API_URL}/api/exercises/${exerciseId}/media`, {
+    method: 'POST',
+    headers,
+    body: formData,
+  })
+  if (!response.ok) {
+    const text = await response.text()
+    let parsed = null
+    try {
+      parsed = text ? JSON.parse(text) : null
+    } catch {
+      parsed = null
+    }
+    const d = parsed?.detail
+    if (
+      response.status === 409 &&
+      d &&
+      typeof d === 'object' &&
+      !Array.isArray(d) &&
+      typeof d.code === 'string'
+    ) {
+      const e = new Error(
+        typeof d.message === 'string' ? d.message : 'Upload konnte nicht verarbeitet werden',
+      )
+      e.code = d.code
+      e.status = 409
+      e.payload = d
+      throw e
+    }
+    if (response.status === 413) {
+      const nginx = (text || '').toLowerCase().includes('nginx')
+      throw new Error(
+        nginx
+          ? 'Die Anfrage ist zu groß (413). Häufig: nginx „client_max_body_size“ — z. B. große/r mehrere Videos oder Bulk-Upload. Dateien kleiner aufteilen oder Server-Limit erhöhen (Frontend-Image Neu bauen).'
+          : 'Die Anfrage ist zu groß (413). Dateigröße oder Server-Limit prüfen.',
+      )
+    }
+    const msg =
+      typeof d === 'string'
+        ? d
+        : d != null && typeof d === 'object' && typeof d.message === 'string'
+          ? d.message
+          : d != null
+            ? JSON.stringify(d)
+            : text && text.length < 400 && !/^\s*</.test(text)
+              ? `HTTP ${response.status}: ${text.trim()}`
+              : `HTTP ${response.status}`
+    throw new Error(msg)
+  }
+  return response.json()
+}
+
+export async function updateExerciseMedia(exerciseId, mediaId, data) {
+  return request(`/api/exercises/${exerciseId}/media/${mediaId}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExerciseMedia(exerciseId, mediaId) {
+  return request(`/api/exercises/${exerciseId}/media/${mediaId}`, { method: 'DELETE' })
+}
+
+export async function reorderExerciseMedia(exerciseId, mediaIds) {
+  return request(`/api/exercises/${exerciseId}/media/reorder`, {
+    method: 'PUT',
+    body: JSON.stringify({ media_ids: mediaIds }),
+  })
+}
+
+/** Papierkorb / Recovery — `action`: trash_soft | trash_hidden | recover | purge | reactivate */
+export async function postMediaAssetLifecycle(assetId, action, extra = {}) {
+  return request(`/api/media-assets/${assetId}/lifecycle`, {
+    method: 'POST',
+    body: JSON.stringify({ action, ...extra }),
+  })
+}
+
+/** Archiv: aktive media_assets sichtbar für den Nutzer (Bibliotheksrechte). */
+export async function listMediaAssets(params = {}) {
+  const sp = new URLSearchParams()
+  if (params.q) sp.set('q', params.q)
+  if (params.limit != null) sp.set('limit', String(params.limit))
+  if (params.offset != null) sp.set('offset', String(params.offset))
+  if (params.lifecycle) sp.set('lifecycle', String(params.lifecycle))
+  if (params.media_kind) sp.set('media_kind', String(params.media_kind))
+  if (params.club_id != null && params.club_id !== '') sp.set('club_id', String(params.club_id))
+  if (params.uploaded_by != null && params.uploaded_by !== '') sp.set('uploaded_by', String(params.uploaded_by))
+  if (params.include_filter_meta) sp.set('include_filter_meta', 'true')
+  const qs = sp.toString()
+  return request(`/api/media-assets${qs ? `?${qs}` : ''}`)
+}
+
+export async function patchMediaAsset(assetId, data) {
+  return request(`/api/media-assets/${assetId}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function bulkMediaLifecycle(data) {
+  return request('/api/media-assets/bulk-lifecycle', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function bulkPatchMediaAssets(data) {
+  return request('/api/media-assets/bulk-patch', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+/**
+ * Mehrere Dateien ins Medienarchiv (`POST /api/media-assets/bulk-upload`).
+ * @param {File[]} files
+ * @param {{ visibility?: string, club_id?: number }} [options]
+ */
+export async function bulkUploadMediaAssets(files, options = {}) {
+  const visibility = options.visibility || 'private'
+  const token = localStorage.getItem('authToken')
+  const headers = withActiveClubHeaders({})
+  if (token) headers['X-Auth-Token'] = token
+  const formData = new FormData()
+  formData.append('visibility', String(visibility))
+  if (options.club_id != null && options.club_id !== '') {
+    formData.append('club_id', String(options.club_id))
+  }
+  // Copyright + P-06: Rechte-Erklaerung + Kontextfelder
+  if (options.copyright_notice != null && String(options.copyright_notice).trim())
+    formData.append('copyright_notice', String(options.copyright_notice).trim())
+  const p06Fields = [
+    'rights_holder_confirmed',
+    'contains_identifiable_persons',
+    'person_consent_confirmed',
+    'person_consent_context',
+    'contains_minors',
+    'parental_consent_confirmed',
+    'parental_consent_context',
+    'contains_music',
+    'music_rights_confirmed',
+    'music_rights_context',
+    'contains_third_party_content',
+    'third_party_rights_confirmed',
+    'third_party_rights_context',
+  ]
+  for (const f of p06Fields) {
+    if (options[f] != null && options[f] !== '') formData.append(f, String(options[f]))
+  }
+  const arr = Array.isArray(files) ? files : [files]
+  for (const f of arr) {
+    if (f) formData.append('files', f)
+  }
+  const url = `${API_URL}/api/media-assets/bulk-upload`
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: formData,
+  })
+  if (!response.ok) {
+    const text = await response.text()
+    let parsed = null
+    try {
+      parsed = JSON.parse(text)
+    } catch {
+      parsed = null
+    }
+    if (parsed?.detail != null) {
+      const d = parsed.detail
+      throw new Error(typeof d === 'string' ? d : JSON.stringify(d))
+    }
+    const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
+    throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+/** Übung: bestehendes Archiv-Medium verknüpfen (`POST /api/exercises/{id}/media/from-asset`). */
+export async function getMediaAssetJournal(assetId) {
+  return request(`/api/admin/media-rights/assets/${assetId}/journal`)
+}
+
+export async function addMediaAssetDeclarationCorrection(assetId, body) {
+  return request(`/api/admin/media-rights/assets/${assetId}/correction`, {
+    method: 'POST',
+    body: JSON.stringify(body),
+  })
+}
+
+export async function attachExerciseMediaFromAsset(exerciseId, body) {
+  return request(`/api/exercises/${exerciseId}/media/from-asset`, {
+    method: 'POST',
+    body: JSON.stringify(body),
+  })
+}
+
+// P-11: Legal-Hold-Endpunkte
+export async function setMediaAssetLegalHold(assetId, reasonCode, reasonNote) {
+  return request(`/api/admin/media-assets/${assetId}/legal-hold`, {
+    method: 'POST',
+    body: JSON.stringify({ reason_code: reasonCode, reason_note: reasonNote }),
+  })
+}
+
+export async function releaseMediaAssetLegalHold(assetId, releaseNote) {
+  return request(`/api/admin/media-assets/${assetId}/legal-hold/release`, {
+    method: 'POST',
+    body: JSON.stringify({ release_note: releaseNote }),
+  })
+}
+
+export async function listMediaAssetsWithLegalHold(limit = 100, offset = 0) {
+  return request(`/api/admin/media-assets/legal-hold?limit=${limit}&offset=${offset}`)
+}
+
+export async function getExercise(id) {
+  return request(`/api/exercises/${id}`)
+}
+
+export async function createExercise(data) {
+  return request('/api/exercises', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateExercise(id, data) {
+  const token = localStorage.getItem('authToken')
+  const headers = withActiveClubHeaders({ 'Content-Type': 'application/json' })
+  if (token) headers['X-Auth-Token'] = token
+  const url = `${API_URL}/api/exercises/${id}`
+  const response = await fetch(url, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify(data),
+  })
+  if (!response.ok) {
+    const text = await response.text()
+    let parsed = null
+    try {
+      parsed = JSON.parse(text)
+    } catch {
+      parsed = null
+    }
+    const d = parsed?.detail
+    if (
+      response.status === 422 &&
+      d &&
+      typeof d === 'object' &&
+      !Array.isArray(d) &&
+      typeof d.code === 'string'
+    ) {
+      const e = new Error(typeof d.message === 'string' ? d.message : 'Validierung fehlgeschlagen')
+      e.status = 422
+      e.code = d.code
+      e.payload = d
+      throw e
+    }
+    if (parsed?.detail != null) {
+      const msg = typeof parsed.detail === 'string' ? parsed.detail : JSON.stringify(parsed.detail)
+      throw new Error(msg)
+    }
+    const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
+    throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+/** Massenänderung Übungen: Sichtbarkeit, Status, Katalog-Zuordnungen (`PATCH /api/exercises/bulk-metadata`). */
+export async function bulkPatchExercisesMetadata(data) {
+  return request('/api/exercises/bulk-metadata', {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExercise(id) {
+  return request(`/api/exercises/${id}`, { method: 'DELETE' })
+}
+
+export async function createExerciseVariant(exerciseId, data) {
+  return request(`/api/exercises/${exerciseId}/variants`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateExerciseVariant(exerciseId, variantId, data) {
+  return request(`/api/exercises/${exerciseId}/variants/${variantId}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExerciseVariant(exerciseId, variantId) {
+  return request(`/api/exercises/${exerciseId}/variants/${variantId}`, { method: 'DELETE' })
+}
+
+export async function reorderExerciseVariants(exerciseId, variantIds) {
+  return request(`/api/exercises/${exerciseId}/variants/reorder`, {
+    method: 'PUT',
+    body: JSON.stringify({ variant_ids: variantIds }),
+  })
+}
+
+// Progressionsgraphen (Übung → Übung), Migration 032/033
+export async function listExerciseProgressionGraphs() {
+  return request('/api/exercise-progression-graphs')
+}
+
+export async function getExerciseProgressionGraph(id, { includeEdges = false } = {}) {
+  const q = includeEdges ? '?include_edges=true' : ''
+  return request(`/api/exercise-progression-graphs/${id}${q}`)
+}
+
+export async function createExerciseProgressionGraph(data) {
+  return request('/api/exercise-progression-graphs', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateExerciseProgressionGraph(id, data) {
+  return request(`/api/exercise-progression-graphs/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExerciseProgressionGraph(id) {
+  return request(`/api/exercise-progression-graphs/${id}`, { method: 'DELETE' })
+}
+
+export async function listExerciseProgressionEdges(graphId, query = {}) {
+  const q = new URLSearchParams()
+  if (query.from_exercise_id != null) q.set('from_exercise_id', String(query.from_exercise_id))
+  if (query.to_exercise_id != null) q.set('to_exercise_id', String(query.to_exercise_id))
+  const qs = q.toString()
+  return request(`/api/exercise-progression-graphs/${graphId}/edges${qs ? `?${qs}` : ''}`)
+}
+
+export async function createExerciseProgressionEdge(graphId, data) {
+  return request(`/api/exercise-progression-graphs/${graphId}/edges`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateExerciseProgressionEdge(graphId, edgeId, data) {
+  return request(`/api/exercise-progression-graphs/${graphId}/edges/${edgeId}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExerciseProgressionEdge(graphId, edgeId) {
+  return request(`/api/exercise-progression-graphs/${graphId}/edges/${edgeId}`, { method: 'DELETE' })
+}
+
+export async function createExerciseProgressionSequence(graphId, data) {
+  return request(`/api/exercise-progression-graphs/${graphId}/edges/sequence`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteExerciseProgressionEdgesBatch(graphId, edgeIds) {
+  return request(`/api/exercise-progression-graphs/${graphId}/edges/delete-batch`, {
+    method: 'POST',
+    body: JSON.stringify({ edge_ids: edgeIds }),
+  })
+}
+
+/** KI-Ausbaustufe (EXERCISES_API_SPEC): benötigt Backend + z. B. OPENROUTER_API_KEY. */
+export async function suggestExerciseAi(payload) {
+  return request('/api/exercises/ai/suggest', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function regenerateExerciseAi(exerciseId, payload) {
+  return request(`/api/exercises/${exerciseId}/ai/regenerate`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+}
diff --git a/frontend/src/api/planning.js b/frontend/src/api/planning.js
new file mode 100644
index 0000000..eb02a91
--- /dev/null
+++ b/frontend/src/api/planning.js
@@ -0,0 +1,171 @@
+/**
+ * Trainingsplanung: Einheiten, Vorlagen, Module, Rahmenprogramme, Dashboard-KPIs.
+ * Facade: weiterhin `utils/api.js` (default + Named Exports).
+ */
+import { request } from './client.js'
+
+/** Query-Parameter wie GET /api/training-units. */
+export async function listTrainingUnits(filters = {}) {
+  const q = new URLSearchParams()
+  if (filters.group_id != null && filters.group_id !== '') {
+    q.set('group_id', String(filters.group_id))
+  }
+  if (filters.club_id != null && filters.club_id !== '') {
+    q.set('club_id', String(filters.club_id))
+  }
+  if (filters.start_date) q.set('start_date', filters.start_date)
+  if (filters.end_date) q.set('end_date', filters.end_date)
+  if (filters.status) q.set('status', filters.status)
+  if (filters.debrief_pending === true) q.set('debrief_pending', 'true')
+  if (filters.assigned_to_me === true) q.set('assigned_to_me', 'true')
+  if (filters.sort) q.set('sort', String(filters.sort))
+  if (filters.limit != null && filters.limit !== '') q.set('limit', String(filters.limit))
+  if (filters.cursor_planned_date) q.set('cursor_planned_date', String(filters.cursor_planned_date))
+  if (filters.cursor_planned_time != null && filters.cursor_planned_time !== '') {
+    q.set('cursor_planned_time', String(filters.cursor_planned_time))
+  }
+  if (filters.cursor_id != null && filters.cursor_id !== '') q.set('cursor_id', String(filters.cursor_id))
+  const qs = q.toString()
+  return request(`/api/training-units${qs ? `?${qs}` : ''}`)
+}
+
+/** Dashboard Kurzüberblick: Entwürfe / meine Übungen / YTD abgeschlossene Einheiten (ein Roundtrip). */
+export async function getDashboardKpis() {
+  return request('/api/dashboard/kpis')
+}
+
+/** Dashboard: Übungen in geplanten Einheiten, die für den Verein noch auf Sichtbarkeit „Verein“ gehören. */
+export async function getTrainingExerciseClubVisibilityQueue(filters = {}) {
+  const q = new URLSearchParams()
+  if (filters.start_date) q.set('start_date', String(filters.start_date))
+  if (filters.end_date) q.set('end_date', String(filters.end_date))
+  if (filters.assigned_to_me === false) q.set('assigned_to_me', 'false')
+  if (filters.limit_units != null && filters.limit_units !== '') {
+    q.set('limit_units', String(filters.limit_units))
+  }
+  const qs = q.toString()
+  return request(`/api/training-units/exercises-club-visibility-queue${qs ? `?${qs}` : ''}`)
+}
+
+export async function getTrainingUnit(id) {
+  return request(`/api/training-units/${id}`)
+}
+
+export async function createTrainingUnit(data) {
+  return request('/api/training-units', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateTrainingUnit(id, data) {
+  return request(`/api/training-units/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteTrainingUnit(id) {
+  return request(`/api/training-units/${id}`, { method: 'DELETE' })
+}
+
+export async function quickCreateTrainingUnit(data) {
+  return request('/api/training-units/quick-create', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+/** Rahmen-Slot → geplante Einheit (tiefe Kopie, origin_framework_slot_id). */
+export async function createTrainingUnitFromFrameworkSlot(data) {
+  return request('/api/training-units/from-framework-slot', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function listTrainingPlanTemplates() {
+  return request('/api/training-plan-templates')
+}
+
+export async function getTrainingPlanTemplate(id) {
+  return request(`/api/training-plan-templates/${id}`)
+}
+
+export async function createTrainingPlanTemplate(data) {
+  return request('/api/training-plan-templates', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateTrainingPlanTemplate(id, data) {
+  return request(`/api/training-plan-templates/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteTrainingPlanTemplate(id) {
+  return request(`/api/training-plan-templates/${id}`, { method: 'DELETE' })
+}
+
+export async function listTrainingModules() {
+  return request('/api/training-modules')
+}
+
+export async function getTrainingModule(id) {
+  return request(`/api/training-modules/${id}`)
+}
+
+export async function createTrainingModule(data) {
+  return request('/api/training-modules', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateTrainingModule(id, data) {
+  return request(`/api/training-modules/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteTrainingModule(id) {
+  return request(`/api/training-modules/${id}`, { method: 'DELETE' })
+}
+
+/** Kopiert Modul-Inhalte ans Ende eines Abschnitts (section_order_index 0-basiert). */
+export async function applyTrainingModuleToTrainingUnit(unitId, data) {
+  return request(`/api/training-units/${unitId}/apply-training-module`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function listTrainingFrameworkPrograms() {
+  return request('/api/training-framework-programs')
+}
+
+export async function getTrainingFrameworkProgram(id) {
+  return request(`/api/training-framework-programs/${id}`)
+}
+
+export async function createTrainingFrameworkProgram(data) {
+  return request('/api/training-framework-programs', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateTrainingFrameworkProgram(id, data) {
+  return request(`/api/training-framework-programs/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteTrainingFrameworkProgram(id) {
+  return request(`/api/training-framework-programs/${id}`, { method: 'DELETE' })
+}
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 64c3d7a..a53ce54 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -5935,6 +5935,78 @@ a.analysis-split__nav-item {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent);
 }
 
+/* Planungseditor: Einfügebänder — Split vs. Ganzgruppe (inaktiv sichtbar, aktiv weiterhin Akzent-Ring) */
+.tu-section-dropband--region-split {
+  height: 12px;
+  background: hsl(200 38% 92%);
+  border: 1px dashed hsl(200 42% 58%);
+}
+
+.tu-section-dropband--region-whole {
+  height: 12px;
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
+  border: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent);
+}
+
+.tu-section-dropband--region-split-to-whole {
+  height: 12px;
+  background: linear-gradient(
+    90deg,
+    hsl(200 38% 92%) 0%,
+    color-mix(in srgb, var(--accent) 12%, var(--surface2)) 100%
+  );
+  border: 1px dashed hsl(200 36% 50%);
+}
+
+.tu-section-dropband--region-whole-to-split {
+  height: 12px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--accent) 12%, var(--surface2)) 0%,
+    hsl(200 38% 92%) 100%
+  );
+  border: 1px dashed hsl(200 36% 50%);
+}
+
+.tu-section-dropband--region-neutral {
+  height: 11px;
+  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
+  background: color-mix(in srgb, var(--surface2) 55%, transparent);
+}
+
+/* Stream-Tag / Planende: klar getrennte Drop-Ziele bei parallelen Phasen */
+.tu-stream-chip-pill--drop-active {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
+}
+
+.tu-section-dropband--whole-plan-end {
+  background: color-mix(in srgb, var(--accent) 14%, var(--surface2));
+  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
+  height: 14px;
+}
+
+.tu-section-stream-append__drop {
+  margin: 0;
+  width: 100%;
+}
+
+/* Parallele Phase: feste Einfügebänder oberhalb/unterhalb des Split-Headers */
+.tu-phase-drop--above-split,
+.tu-phase-drop--below-split {
+  margin: 6px 2px 8px;
+  min-height: 14px;
+}
+
+.tu-section-dropband--phase-parallel-slot {
+  height: 14px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--accent) 12%, var(--surface2)) 0%,
+    hsl(200 30% 94%) 100%
+  );
+  border: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent);
+}
+
 .tu-sec-drag-grip {
   flex-shrink: 0;
   display: inline-flex;
@@ -6586,6 +6658,21 @@ button.combo-coach-cand-link:hover {
     max-width: none !important;
     padding: 0 !important;
   }
+  /* Split: jede weitere Breakout-Spalte auf neuer Seite (Gesamtplan-Druck) */
+  .training-run-breakout-stream--page-break {
+    break-before: page;
+    page-break-before: always;
+  }
+  .training-run-parallel-columns {
+    display: block !important;
+  }
+  .training-run-breakout-stream {
+    margin-bottom: 14px;
+  }
+  .training-run-phase-schedule {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
   .training-run-section,
   .training-run-header {
     break-inside: avoid;
diff --git a/frontend/src/components/TrainingUnitSectionsEditor.jsx b/frontend/src/components/TrainingUnitSectionsEditor.jsx
index 7ac7580..c0cf4c3 100644
--- a/frontend/src/components/TrainingUnitSectionsEditor.jsx
+++ b/frontend/src/components/TrainingUnitSectionsEditor.jsx
@@ -1,5 +1,5 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
-import { GripVertical, Pencil } from 'lucide-react'
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { GripVertical, Pencil, X } from 'lucide-react'
 import CombinationMethodProfileEditor from './CombinationMethodProfileEditor'
 import CombinationPlanBracket from './CombinationPlanBracket'
 import { comboPlanningProfileJsonForEditor, effectiveComboMethodProfile } from '../utils/comboPlanningMethodProfile'
@@ -8,6 +8,31 @@ import {
   cloneJsonSerializablePlanningProfile,
   comboSlotsOutlineForProfileEditor,
   defaultSection,
+  defaultPlanLocWholeGroup,
+  defaultPlanLocParallel,
+  maxPhaseOrderIndexFromSections,
+  buildPlanTargetOptions,
+  planLocKey,
+  MAX_PARALLEL_STREAMS_PER_PHASE,
+  parallelStreamVisual,
+  streamsForParallelPhaseOrders,
+  sectionIndicesForParallelStream,
+  reorderWithinBucketIndices,
+  reorderWithoutIndices,
+  parallelStreamBucketHasContent,
+  dissolveParallelPhaseToWholeGroup,
+  phaseRunsFromSections,
+  swapAdjacentPhaseRuns,
+  reorderBlocksImmutableWithPlanLoc,
+  reorderSectionBeforeParallelRunAsWholeGroup,
+  reorderSectionAsFirstInParallelStream,
+  reorderBlockIntoParallelStreamEnd,
+  globalInsertBeforeIndexForParallelStreamEnd,
+  movePhaseRunUpByPhaseOrder,
+  movePhaseRunDownByPhaseOrder,
+  moveParallelPhaseRunToInsertBefore,
+  afterSectionReorderParallelGuard,
+  indicesOfParallelPhase,
   exerciseRow,
   noteRow,
   sectionPlannedMinutes,
@@ -16,6 +41,28 @@ import api from '../utils/api'
 import { isCompactTagLegendMode } from '../config/planningModuleUx'
 import { useAuth } from '../context/AuthContext'
 
+function stripPlanLocFromSection(s) {
+  if (!s || typeof s !== 'object') return s
+  const { planLoc: _ignored, ...rest } = s
+  return rest
+}
+
+function planSelectOptionsForSection(sections, sIdx, baseOpts) {
+  const sec = sections[sIdx]
+  const k = planLocKey(sec?.planLoc)
+  if (k && !baseOpts.some((o) => o.key === k)) {
+    const pl = sec.planLoc
+    const label =
+      pl.phaseKind === 'parallel'
+        ? `Parallel · Phase ${pl.phaseOrderIndex ?? 0} · Stream ${pl.parallelStreamOrderIndex ?? 0}`
+        : `Ganzgruppe · Phase ${pl.phaseOrderIndex ?? 0}`
+    return [...baseOpts, { key: k, label, template: { ...pl } }].sort((a, b) =>
+      a.key.localeCompare(b.key, undefined, { numeric: true })
+    )
+  }
+  return baseOpts
+}
+
 const DND_TU_ITEM = 'application/x-shinkan-training-unit-item'
 const DND_TU_SECTION = 'application/x-shinkan-training-section-v1'
 
@@ -35,6 +82,31 @@ function dtHasType(e, mime) {
   return Array.from(t).includes(mime)
 }
 
+/** Visuelle Zuordnung der Einfügezeile zu Split- vs. Ganzgruppen-Bereich (nur Darstellung). */
+function sectionDropBandRegionClass(sections, beforeIdx, enableParallel) {
+  if (!enableParallel) return ''
+  const n = sections?.length ?? 0
+  const below = beforeIdx < n ? sections[beforeIdx] : null
+  const above = beforeIdx > 0 ? sections[beforeIdx - 1] : null
+  const po = (s) => s?.planLoc?.phaseOrderIndex ?? 0
+  const aboveP = above?.planLoc?.phaseKind === 'parallel'
+  const belowP = below?.planLoc?.phaseKind === 'parallel'
+  const aboveW = above?.planLoc?.phaseKind === 'whole_group'
+  const belowW = below?.planLoc?.phaseKind === 'whole_group'
+
+  if (aboveP && belowP && po(above) === po(below)) {
+    return ' tu-section-dropband--region-split'
+  }
+  if (aboveW && belowW) return ' tu-section-dropband--region-whole'
+  if (aboveP && belowW) return ' tu-section-dropband--region-split-to-whole'
+  if (aboveW && belowP) return ' tu-section-dropband--region-whole-to-split'
+  if (!above && belowP) return ' tu-section-dropband--region-split'
+  if (!below && aboveP) return ' tu-section-dropband--region-split-to-whole'
+  if (!above && belowW) return ' tu-section-dropband--region-whole'
+  if (!below && aboveW) return ' tu-section-dropband--region-whole'
+  return ' tu-section-dropband--region-neutral'
+}
+
 function truncatePreview(text, max = 160) {
   const t = (text || '').replace(/\s+/g, ' ').trim()
   if (t.length <= max) return t
@@ -173,7 +245,7 @@ function reorderBlocksImmutable(blocks, fromI, toBeforeIdx) {
 
 /**
  * @param {(updater: (prev: Array) => Array) => void} props.onSectionsChange — wie React setState
- * @param {(p: { fromSlot: number, fromSectionIdx: number, toSlot: number, toSectionIdx: number }) => void} [props.onMoveSectionsAcrossSlots] — Rahmenprogramm: Abschnitt zwischen Slots verschieben
+ * @param {(p: { fromSlot: number, fromSectionIdx: number, toSlot: number, toSectionIdx: number, toParallelStream?: { po: number, so: number } }) => void} [props.onMoveSectionsAcrossSlots] — Rahmenprogramm: Abschnitt zwischen Slots verschieben
  */
 export default function TrainingUnitSectionsEditor({
   sections,
@@ -192,6 +264,8 @@ export default function TrainingUnitSectionsEditor({
   onMoveSectionsAcrossSlots = null,
   /** Dünnes „+“ zwischen Einträge: Popup für Typ (Übung, Modul, …) */
   betweenInsertMenus = true,
+  /** Trainingsplanung: Phasen/Streams anlegen und Abschnitte zuordnen */
+  enableParallelPhaseControls = false,
 }) {
   const { user } = useAuth()
   const planningCompactLegend = isCompactTagLegendMode(
@@ -211,6 +285,12 @@ export default function TrainingUnitSectionsEditor({
   const sectionToSlot =
     slotIndex !== null && slotIndex !== undefined ? Number(slotIndex) : -1
 
+  const list = ensure(sections)
+  const useStreamTagDropUx =
+    enableSectionDragReorder &&
+    enableParallelPhaseControls &&
+    list.some((s) => s?.planLoc?.phaseKind === 'parallel')
+
   const updateSectionField = (sIdx, field, val) => {
     patch((prev) =>
       prev.map((s, i) => (i === sIdx ? { ...s, [field]: val } : s))
@@ -218,23 +298,221 @@ export default function TrainingUnitSectionsEditor({
   }
 
   const addSection = () => {
-    patch((prev) => [...prev, defaultSection(`Abschnitt ${prev.length + 1}`)])
+    patch((prev) => {
+      const base = defaultSection(`Abschnitt ${prev.length + 1}`)
+      const last = prev[prev.length - 1]
+      const next = last?.planLoc ? { ...base, planLoc: { ...last.planLoc } } : base
+      return [...prev, next]
+    })
+  }
+
+  const addParallelPhaseTwoStreams = () => {
+    patch((prev) => {
+      const nextPo = maxPhaseOrderIndexFromSections(prev) + 1
+      const pl0 = defaultPlanLocParallel(nextPo, 0)
+      const pl1 = defaultPlanLocParallel(nextPo, 1)
+      const base0 = defaultSection(`Abschnitt ${prev.length + 1}`)
+      const base1 = defaultSection(`Abschnitt ${prev.length + 2}`)
+      return [...prev, { ...base0, planLoc: pl0 }, { ...base1, planLoc: pl1 }]
+    })
+  }
+
+  const addStreamToParallelPhase = (phaseOrder) => {
+    patch((prev) => {
+      const po = Number(phaseOrder) || 0
+      const par = (prev || []).filter(
+        (s) => s?.planLoc?.phaseKind === 'parallel' && (s.planLoc.phaseOrderIndex ?? 0) === po
+      )
+      if (!par.length) return prev
+      const distinct = new Set(par.map((s) => s.planLoc.parallelStreamOrderIndex ?? 0))
+      if (distinct.size >= MAX_PARALLEL_STREAMS_PER_PHASE) return prev
+      const maxS = Math.max(...par.map((s) => s.planLoc.parallelStreamOrderIndex ?? 0))
+      const newSo = maxS + 1
+      const tmpl = {
+        ...par[0].planLoc,
+        parallelStreamOrderIndex: newSo,
+        streamTitle: null,
+        streamNotes: null,
+        streamAssignedTrainerProfileIds: null,
+      }
+      const base = defaultSection(`Abschnitt ${prev.length + 1}`)
+      const inPhaseIdx = indicesOfParallelPhase(prev, po)
+      const insertAfter = inPhaseIdx.length ? Math.max(...inPhaseIdx) : prev.length - 1
+      return [
+        ...prev.slice(0, insertAfter + 1),
+        { ...base, planLoc: tmpl },
+        ...prev.slice(insertAfter + 1),
+      ]
+    })
+  }
+
+  const addWholeGroupSection = () => {
+    patch((prev) => {
+      const L = ensure(prev)
+      const wgs = L.filter((s) => s?.planLoc?.phaseKind === 'whole_group')
+      let pl
+      if (wgs.length) {
+        const maxPo = Math.max(...wgs.map((s) => s.planLoc.phaseOrderIndex ?? 0))
+        const sample = wgs.find((s) => (s.planLoc.phaseOrderIndex ?? 0) === maxPo)
+        pl = { ...sample.planLoc }
+      } else {
+        const nextPo = maxPhaseOrderIndexFromSections(L) + 1
+        pl = defaultPlanLocWholeGroup(nextPo)
+      }
+      const base = defaultSection(`Abschnitt ${L.length + 1}`)
+      return [...L, { ...base, planLoc: pl }]
+    })
+  }
+
+  const addSectionToParallelStream = (phaseOrder, streamOrder) => {
+    patch((prev) => {
+      const L = ensure(prev)
+      const po = Number(phaseOrder) || 0
+      const so = Number(streamOrder) || 0
+      const idxs = sectionIndicesForParallelStream(L, po, so)
+      const tmpl = idxs.length ? L[idxs[0]].planLoc : defaultPlanLocParallel(po, so)
+      const pl = {
+        ...tmpl,
+        phaseKind: 'parallel',
+        phaseOrderIndex: po,
+        parallelStreamOrderIndex: so,
+      }
+      const base = defaultSection(`Abschnitt ${L.length + 1}`)
+      if (!idxs.length) {
+        return [...L, { ...base, planLoc: pl }]
+      }
+      const insertAfter = Math.max(...idxs)
+      return [...L.slice(0, insertAfter + 1), { ...base, planLoc: pl }, ...L.slice(insertAfter + 1)]
+    })
+  }
+
+  const updateParallelPhaseTitleAll = (phaseOrder, title) => {
+    const po = Number(phaseOrder) || 0
+    const v = title.trim() ? title.trim() : null
+    patch((prev) =>
+      prev.map((s) => {
+        const L = s?.planLoc
+        if (L?.phaseKind !== 'parallel' || (L.phaseOrderIndex ?? 0) !== po) return s
+        return { ...s, planLoc: { ...L, phaseTitle: v } }
+      })
+    )
+  }
+
+  const updateParallelStreamTitleAll = (phaseOrder, streamOrder, title) => {
+    const po = Number(phaseOrder) || 0
+    const so = Number(streamOrder) || 0
+    const v = title.trim() ? title.trim() : null
+    patch((prev) =>
+      prev.map((s) => {
+        const L = s?.planLoc
+        if (
+          L?.phaseKind !== 'parallel' ||
+          (L.phaseOrderIndex ?? 0) !== po ||
+          (L.parallelStreamOrderIndex ?? 0) !== so
+        ) {
+          return s
+        }
+        return { ...s, planLoc: { ...L, streamTitle: v } }
+      })
+    )
+  }
+
+  const removeParallelStream = (phaseOrder, streamOrder) => {
+    const po = Number(phaseOrder) || 0
+    const so = Number(streamOrder) || 0
+    const idxs = sectionIndicesForParallelStream(list, po, so)
+    if (!idxs.length) return
+    if (
+      parallelStreamBucketHasContent(list, idxs, SECTION_INSERT_SEPARATOR_BODY) &&
+      !window.confirm(
+        'In diesem Stream sind Übungen oder Anmerkungen geplant. Stream wirklich löschen?'
+      )
+    ) {
+      return
+    }
+    patch((prev) => {
+      const L = ensure(prev)
+      const beforeOrders = streamsForParallelPhaseOrders(L, po)
+      const rm = sectionIndicesForParallelStream(L, po, so)
+      if (!rm.length) return prev
+      let next = reorderWithoutIndices(L, rm)
+      const afterOrders = streamsForParallelPhaseOrders(next, po)
+      if (beforeOrders.length >= 2 && afterOrders.length <= 1) {
+        if (
+          window.confirm(
+            'Nur noch eine Gruppe in dieser Phase übrig. Parallelen Aufbau auflösen und alle Abschnitte als gemeinsame Ganzgruppen-Phase weiterführen?'
+          )
+        ) {
+          next = dissolveParallelPhaseToWholeGroup(next, po)
+        }
+      }
+      return next
+    })
+  }
+
+  const applySectionPlanTarget = (sIdx, rawKey) => {
+    patch((prev) => {
+      if (!rawKey) {
+        return prev.map((s, i) => (i === sIdx ? stripPlanLocFromSection(s) : s))
+      }
+      const opts = planSelectOptionsForSection(prev, sIdx, buildPlanTargetOptions(prev))
+      const hit = opts.find((o) => o.key === rawKey)
+      if (!hit) return prev
+      const tpl = { ...hit.template }
+      return prev.map((s, i) => (i === sIdx ? { ...s, planLoc: tpl } : s))
+    })
   }
 
   const removeSection = (sIdx) => {
     patch((prev) => {
-      const next = prev.filter((_, i) => i !== sIdx)
-      return next.length ? next : [defaultSection()]
+      let next = prev.filter((_, i) => i !== sIdx)
+      next = next.length ? next : [defaultSection()]
+      if (enableParallelPhaseControls) {
+        next = afterSectionReorderParallelGuard(prev, next)
+      }
+      return next
     })
   }
 
+  /** Ganzgruppe: global tauschen; parallele Phase: innerhalb Stream oder ganze Parallel-Phase am Stück */
   const moveSection = (sIdx, dir) => {
     patch((prev) => {
-      const p = [...prev]
+      const p = ensure(prev)
+      const sec = p[sIdx]
+      const L = sec?.planLoc
+      if (L?.phaseKind === 'parallel') {
+        const po = L.phaseOrderIndex ?? 0
+        const so = L.parallelStreamOrderIndex ?? 0
+        const bucket = sectionIndicesForParallelStream(p, po, so)
+        const pos = bucket.indexOf(sIdx)
+        if (pos < 0) return p
+        if (dir < 0 && pos > 0) {
+          const newPos = pos + dir
+          return reorderWithinBucketIndices(p, bucket, pos, newPos)
+        }
+        if (dir > 0 && pos < bucket.length - 1) {
+          const newPos = pos + dir
+          return reorderWithinBucketIndices(p, bucket, pos, newPos)
+        }
+        if (dir < 0 && pos === 0) {
+          const runs = phaseRunsFromSections(p)
+          const rIdx = runs.findIndex((r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po)
+          if (rIdx <= 0) return p
+          return swapAdjacentPhaseRuns(p, rIdx - 1)
+        }
+        if (dir > 0 && pos === bucket.length - 1) {
+          const runs = phaseRunsFromSections(p)
+          const rIdx = runs.findIndex((r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po)
+          if (rIdx < 0 || rIdx >= runs.length - 1) return p
+          return swapAdjacentPhaseRuns(p, rIdx)
+        }
+        return p
+      }
+      const arr = [...p]
       const ta = sIdx + dir
-      if (ta < 0 || ta >= p.length) return p
-      ;[p[sIdx], p[ta]] = [p[ta], p[sIdx]]
-      return p
+      if (ta < 0 || ta >= arr.length) return arr
+      ;[arr[sIdx], arr[ta]] = [arr[ta], arr[sIdx]]
+      return arr
     })
   }
 
@@ -314,6 +592,15 @@ export default function TrainingUnitSectionsEditor({
   const [dropTargetPos, setDropTargetPos] = useState(null)
 
   const [dropSectionBand, setDropSectionBand] = useState(null)
+  /** Aktiver Reiter pro paralleler Phase (phaseOrder → streamOrder). */
+  const [parallelStreamTabByPhase, setParallelStreamTabByPhase] = useState({})
+  /** `${phaseOrder}:${streamOrder}` während Stream-Name bearbeitet wird */
+  const [streamNameEditKey, setStreamNameEditKey] = useState(null)
+  const [streamNameDraft, setStreamNameDraft] = useState('')
+  const [phaseTitleEditPo, setPhaseTitleEditPo] = useState(null)
+  const [phaseTitleDraft, setPhaseTitleDraft] = useState('')
+  const skipStreamNameBlurSave = useRef(false)
+  const skipPhaseTitleBlurSave = useRef(false)
   /** { slot: number, beforeIdx: number } */
 
   useEffect(() => {
@@ -394,6 +681,25 @@ export default function TrainingUnitSectionsEditor({
 
   const clearSectionDnD = () => setDropSectionBand(null)
 
+  const onParallelPhaseDragStart = (e, phaseOrderIndex) => {
+    if (!enableSectionDragReorder || !enableParallelPhaseControls) return
+    e.stopPropagation()
+    try {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.setData(
+        DND_TU_SECTION,
+        JSON.stringify({
+          fromSlot: sectionToSlot,
+          fromSectionIdx: null,
+          phaseRunMove: { phaseOrderIndex },
+        })
+      )
+    } catch {
+      /* ignore */
+    }
+    setDropSectionBand(null)
+  }
+
   const onSectionDragStart = (e, sIdx) => {
     if (!enableSectionDragReorder) return
     e.stopPropagation()
@@ -425,6 +731,149 @@ export default function TrainingUnitSectionsEditor({
     setDropSectionBand({ slot: sectionToSlot, beforeIdx })
   }
 
+  const onPhaseAboveSplitDragOver = (e, po) => {
+    if (!enableSectionDragReorder || !enableParallelPhaseControls) return
+    if (!dtHasType(e, DND_TU_SECTION)) return
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      e.dataTransfer.dropEffect = 'move'
+    } catch {
+      /* ignore */
+    }
+    setDropSectionBand({ slot: sectionToSlot, phaseAboveSplitPo: Number(po) || 0 })
+  }
+
+  const onPhaseBelowSplitDragOver = (e, po, so) => {
+    if (!enableSectionDragReorder || !enableParallelPhaseControls) return
+    if (!dtHasType(e, DND_TU_SECTION)) return
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      e.dataTransfer.dropEffect = 'move'
+    } catch {
+      /* ignore */
+    }
+    setDropSectionBand({
+      slot: sectionToSlot,
+      phaseBelowSplit: { po: Number(po) || 0, so: Number(so) || 0 },
+    })
+  }
+
+  const applyParsedSectionDrop = (data) => {
+    const phaseRunMove = data.phaseRunMove
+    const fromSi = data.fromSectionIdx
+    const fromSlot = typeof data.fromSlot === 'number' ? data.fromSlot : -1
+
+    if (phaseRunMove != null && phaseRunMove.phaseOrderIndex != null) {
+      return { kind: 'phaseRun', phaseRunMove, fromSlot }
+    }
+    if (typeof fromSi !== 'number') return null
+
+    if (
+      typeof onMoveSectionsAcrossSlots === 'function' &&
+      sectionToSlot >= 0 &&
+      fromSlot >= 0
+    ) {
+      return { kind: 'crossSlot', fromSi, fromSlot }
+    }
+
+    return { kind: 'local', fromSi }
+  }
+
+  const onPhaseAboveSplitDrop = (e, po) => {
+    if (!enableSectionDragReorder || !enableParallelPhaseControls) return
+    e.preventDefault()
+    e.stopPropagation()
+    clearSectionDnD()
+    let raw = ''
+    try {
+      raw = e.dataTransfer.getData(DND_TU_SECTION)
+    } catch {
+      return
+    }
+    if (!raw) return
+    let data
+    try {
+      data = JSON.parse(raw)
+    } catch {
+      return
+    }
+    const targetPo = Number(po) || 0
+    const parsed = applyParsedSectionDrop(data)
+    if (!parsed) return
+
+    if (parsed.kind === 'phaseRun') {
+      const dragPo = Number(parsed.phaseRunMove.phaseOrderIndex) || 0
+      if (dragPo === targetPo) return
+      patch((prev) => {
+        const idxs = indicesOfParallelPhase(prev, targetPo)
+        const fg = idxs.length ? idxs[0] : -1
+        if (fg < 0) return prev
+        let next = moveParallelPhaseRunToInsertBefore(prev, dragPo, fg)
+        if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+        return next
+      })
+      return
+    }
+
+    if (parsed.kind === 'crossSlot') return
+
+    const { fromSi } = parsed
+    patch((prev) => {
+      let next = reorderSectionBeforeParallelRunAsWholeGroup(prev, fromSi, targetPo)
+      if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+      return next
+    })
+  }
+
+  const onPhaseBelowSplitDrop = (e, po, so) => {
+    if (!enableSectionDragReorder || !enableParallelPhaseControls) return
+    e.preventDefault()
+    e.stopPropagation()
+    clearSectionDnD()
+    let raw = ''
+    try {
+      raw = e.dataTransfer.getData(DND_TU_SECTION)
+    } catch {
+      return
+    }
+    if (!raw) return
+    let data
+    try {
+      data = JSON.parse(raw)
+    } catch {
+      return
+    }
+    const targetPo = Number(po) || 0
+    const targetSo = Number(so) || 0
+    const parsed = applyParsedSectionDrop(data)
+    if (!parsed) return
+
+    if (parsed.kind === 'phaseRun') {
+      const dragPo = Number(parsed.phaseRunMove.phaseOrderIndex) || 0
+      if (dragPo === targetPo) return
+      patch((prev) => {
+        const idxs = indicesOfParallelPhase(prev, targetPo)
+        const fg = idxs.length ? idxs[0] : -1
+        if (fg < 0) return prev
+        let next = moveParallelPhaseRunToInsertBefore(prev, dragPo, fg)
+        if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+        return next
+      })
+      return
+    }
+
+    if (parsed.kind === 'crossSlot') return
+
+    const { fromSi } = parsed
+    patch((prev) => {
+      let next = reorderSectionAsFirstInParallelStream(prev, fromSi, targetPo, targetSo)
+      if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+      return next
+    })
+  }
+
   const onSectionBandDrop = (e, insertBeforeIdx) => {
     if (!enableSectionDragReorder) return
     e.preventDefault()
@@ -444,9 +893,47 @@ export default function TrainingUnitSectionsEditor({
       return
     }
     const fromSi = data.fromSectionIdx
+    const phaseRunMove = data.phaseRunMove
     const fromSlot = typeof data.fromSlot === 'number' ? data.fromSlot : -1
+
+    if (phaseRunMove != null && phaseRunMove.phaseOrderIndex != null) {
+      patch((prev) => {
+        const po = Number(phaseRunMove.phaseOrderIndex) || 0
+        let next = moveParallelPhaseRunToInsertBefore(prev, po, insertBeforeIdx)
+        if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+        return next
+      })
+      return
+    }
+
     if (typeof fromSi !== 'number') return
 
+    if (enableParallelPhaseControls) {
+      const fromPl = list[fromSi]?.planLoc
+      if (fromPl?.phaseKind === 'parallel' && insertBeforeIdx >= 0 && insertBeforeIdx < list.length) {
+        const po = fromPl.phaseOrderIndex ?? 0
+        const fromSo = fromPl.parallelStreamOrderIndex ?? 0
+        const tabSo =
+          parallelStreamTabByPhase[po] ?? streamsForParallelPhaseOrders(list, po)[0] ?? 0
+        const targetPl = list[insertBeforeIdx]?.planLoc
+        if (
+          targetPl?.phaseKind === 'parallel' &&
+          (targetPl.phaseOrderIndex ?? 0) === po &&
+          (targetPl.parallelStreamOrderIndex ?? 0) !== fromSo &&
+          tabSo === fromSo
+        ) {
+          return
+        }
+      }
+    }
+
+    if (
+      enableParallelPhaseControls &&
+      (insertBeforeIdx === fromSi || insertBeforeIdx === fromSi + 1)
+    ) {
+      return
+    }
+
     if (
       typeof onMoveSectionsAcrossSlots === 'function' &&
       sectionToSlot >= 0 &&
@@ -461,7 +948,86 @@ export default function TrainingUnitSectionsEditor({
       return
     }
 
-    patch((prev) => reorderBlocksImmutable(prev, fromSi, insertBeforeIdx))
+    patch((prev) => {
+      let next = enableParallelPhaseControls
+        ? reorderBlocksImmutableWithPlanLoc(prev, fromSi, insertBeforeIdx)
+        : reorderBlocksImmutable(prev, fromSi, insertBeforeIdx)
+      if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+      return next
+    })
+  }
+
+  const onStreamDropTargetDragOver = (e, phaseOrder, streamOrder) => {
+    if (!enableSectionDragReorder || !useStreamTagDropUx) return
+    if (!dtHasType(e, DND_TU_SECTION)) return
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      e.dataTransfer.dropEffect = 'move'
+    } catch {
+      /* ignore */
+    }
+    setDropSectionBand({
+      slot: sectionToSlot,
+      streamDrop: { po: Number(phaseOrder) || 0, so: Number(streamOrder) || 0 },
+    })
+  }
+
+  const onStreamDropTargetDragLeave = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return
+    clearSectionDnD()
+  }
+
+  const onStreamDropTargetDrop = (e, phaseOrder, streamOrder) => {
+    if (!enableSectionDragReorder || !useStreamTagDropUx) return
+    e.preventDefault()
+    e.stopPropagation()
+    clearSectionDnD()
+    let raw = ''
+    try {
+      raw = e.dataTransfer.getData(DND_TU_SECTION)
+    } catch {
+      return
+    }
+    if (!raw) return
+    let data
+    try {
+      data = JSON.parse(raw)
+    } catch {
+      return
+    }
+    if (data.phaseRunMove != null && data.phaseRunMove.phaseOrderIndex != null) {
+      return
+    }
+    const fromSi = data.fromSectionIdx
+    
+    if (typeof fromSi !== 'number') return
+
+    const po = Number(phaseOrder) || 0
+    const so = Number(streamOrder) || 0
+    const toIdx = globalInsertBeforeIndexForParallelStreamEnd(list, po, so)
+
+    const fromSlot = typeof data.fromSlot === 'number' ? data.fromSlot : -1
+    if (
+      typeof onMoveSectionsAcrossSlots === 'function' &&
+      sectionToSlot >= 0 &&
+      fromSlot >= 0
+    ) {
+      onMoveSectionsAcrossSlots({
+        fromSlot,
+        fromSectionIdx: fromSi,
+        toSlot: sectionToSlot,
+        toSectionIdx: toIdx,
+        toParallelStream: { po, so },
+      })
+      return
+    }
+
+    patch((prev) => {
+      let next = reorderBlockIntoParallelStreamEnd(prev, fromSi, po, so)
+      if (enableParallelPhaseControls) next = afterSectionReorderParallelGuard(prev, next)
+      return next
+    })
   }
 
   const onItemDragStart = (e, sIdx, iIdx) => {
@@ -602,7 +1168,87 @@ export default function TrainingUnitSectionsEditor({
     )
   }
 
-  const list = ensure(sections)
+  const planningPhaseRuns = useMemo(() => phaseRunsFromSections(list), [list])
+
+  const firstSectionIndexByParallelPhase = useMemo(() => {
+    const m = new Map()
+    list.forEach((s, i) => {
+      const L = s?.planLoc
+      if (L?.phaseKind !== 'parallel') return
+      const po = L.phaseOrderIndex ?? 0
+      if (!m.has(po)) m.set(po, i)
+    })
+    return m
+  }, [list])
+
+  const parallelPhaseOrdersPresent = useMemo(() => {
+    const set = new Set()
+    for (const s of list) {
+      if (s?.planLoc?.phaseKind === 'parallel') set.add(s.planLoc.phaseOrderIndex ?? 0)
+    }
+    return [...set].sort((a, b) => a - b)
+  }, [list])
+
+  useEffect(() => {
+    if (!enableParallelPhaseControls || !parallelPhaseOrdersPresent.length) return
+    setParallelStreamTabByPhase((prev) => {
+      const next = { ...prev }
+      let changed = false
+      for (const po of parallelPhaseOrdersPresent) {
+        const orders = streamsForParallelPhaseOrders(list, po)
+        if (!orders.length) continue
+        if (next[po] === undefined) {
+          next[po] = orders[0]
+          changed = true
+        } else if (!orders.includes(next[po])) {
+          next[po] = orders[0]
+          changed = true
+        }
+      }
+      for (const k of Object.keys(next)) {
+        const poi = Number(k)
+        if (!Number.isFinite(poi) || !parallelPhaseOrdersPresent.includes(poi)) {
+          delete next[k]
+          changed = true
+        }
+      }
+      return changed ? next : prev
+    })
+  }, [list, parallelPhaseOrdersPresent, enableParallelPhaseControls])
+
+  const sectionMoveDisabledUp = (sIdx) => {
+    const sec = list[sIdx]
+    const L = sec?.planLoc
+    if (L?.phaseKind === 'parallel') {
+      const po = L.phaseOrderIndex ?? 0
+      const so = L.parallelStreamOrderIndex ?? 0
+      const bucket = sectionIndicesForParallelStream(list, po, so)
+      const pos = bucket.indexOf(sIdx)
+      if (pos > 0) return false
+      const rIdx = planningPhaseRuns.findIndex(
+        (r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po
+      )
+      return rIdx <= 0
+    }
+    return sIdx === 0
+  }
+
+  const sectionMoveDisabledDown = (sIdx) => {
+    const sec = list[sIdx]
+    const L = sec?.planLoc
+    if (L?.phaseKind === 'parallel') {
+      const po = L.phaseOrderIndex ?? 0
+      const so = L.parallelStreamOrderIndex ?? 0
+      const bucket = sectionIndicesForParallelStream(list, po, so)
+      const pos = bucket.indexOf(sIdx)
+      if (pos >= 0 && pos < bucket.length - 1) return false
+      const rIdx = planningPhaseRuns.findIndex(
+        (r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po
+      )
+      return rIdx < 0 || rIdx >= planningPhaseRuns.length - 1
+    }
+    return sIdx === list.length - 1
+  }
 
   const comboPlanningModalDerived = useMemo(() => {
     if (!comboPlanningModal) {
@@ -690,17 +1336,90 @@ export default function TrainingUnitSectionsEditor({
         const planMin = sectionPlannedMinutes(sec)
         const itemCount = sec.items?.length ?? 0
         const moduleLegend = planningCompactLegend ? sectionModuleLegendModel(sec.items) : []
+        const pl = sec?.planLoc
+        const parallelPhaseOrder =
+          enableParallelPhaseControls && pl?.phaseKind === 'parallel' ? pl.phaseOrderIndex ?? 0 : null
+        const streamOrdersForParallelPhase =
+          parallelPhaseOrder != null ? streamsForParallelPhaseOrders(list, parallelPhaseOrder) : []
+        const activeParallelStream =
+          parallelPhaseOrder != null
+            ? parallelStreamTabByPhase[parallelPhaseOrder] ?? streamOrdersForParallelPhase[0] ?? 0
+            : null
+        const hideParallelSection =
+          enableParallelPhaseControls &&
+          pl?.phaseKind === 'parallel' &&
+          (pl.parallelStreamOrderIndex ?? 0) !== activeParallelStream
+        const firstGlobalIdxThisPhase =
+          parallelPhaseOrder != null
+            ? firstSectionIndexByParallelPhase.get(parallelPhaseOrder)
+            : null
+        const firstVisibleIdxActiveStream =
+          parallelPhaseOrder != null && streamOrdersForParallelPhase.length
+            ? sectionIndicesForParallelStream(
+                list,
+                parallelPhaseOrder,
+                activeParallelStream
+              )[0]
+            : null
+        const hideDropBandBeforeOrphanFirstVisible =
+          parallelPhaseOrder != null &&
+          firstVisibleIdxActiveStream != null &&
+          sIdx === firstVisibleIdxActiveStream &&
+          firstGlobalIdxThisPhase != null &&
+          sIdx !== firstGlobalIdxThisPhase
+
+        const isFirstSectionOfParallelPhase =
+          parallelPhaseOrder != null &&
+          firstSectionIndexByParallelPhase.get(parallelPhaseOrder) === sIdx
+        const hideDropBeforeFirstParallelBecauseDedicatedSlot =
+          enableParallelPhaseControls &&
+          isFirstSectionOfParallelPhase &&
+          pl?.phaseKind === 'parallel'
+        const showSectionDropBandBefore =
+          (pl?.phaseKind !== 'parallel' || !hideParallelSection) &&
+          !hideDropBandBeforeOrphanFirstVisible &&
+          !hideDropBeforeFirstParallelBecauseDedicatedSlot
+
         const bandActiveBefore = (bx) =>
           enableSectionDragReorder &&
           dropSectionBand &&
           dropSectionBand.slot === sectionToSlot &&
-          dropSectionBand.beforeIdx === bx
+          dropSectionBand.beforeIdx === bx &&
+          !dropSectionBand.streamDrop &&
+          dropSectionBand.phaseAboveSplitPo == null &&
+          !dropSectionBand.phaseBelowSplit
+
+        const streamChipDropActive = (po, so) =>
+          useStreamTagDropUx &&
+          dropSectionBand?.slot === sectionToSlot &&
+          dropSectionBand?.streamDrop?.po === po &&
+          dropSectionBand?.streamDrop?.so === so
+
+        const phaseAboveSplitDnd =
+          parallelPhaseOrder != null &&
+          dropSectionBand?.slot === sectionToSlot &&
+          dropSectionBand?.phaseAboveSplitPo === parallelPhaseOrder
+        const phaseBelowSplitDnd =
+          parallelPhaseOrder != null &&
+          dropSectionBand?.slot === sectionToSlot &&
+          dropSectionBand?.phaseBelowSplit?.po === parallelPhaseOrder &&
+          dropSectionBand?.phaseBelowSplit?.so === activeParallelStream
+
+        const streamVisual =
+          enableParallelPhaseControls && pl?.phaseKind === 'parallel'
+            ? parallelStreamVisual(pl.parallelStreamOrderIndex ?? 0)
+            : null
+        const allowSectionDragGrip = enableSectionDragReorder
 
         return (
           <Fragment key={`secFrag-${sIdx}`}>
-            {enableSectionDragReorder ? (
+            {enableSectionDragReorder && showSectionDropBandBefore ? (
               <div
-                className={'tu-section-dropband' + (bandActiveBefore(sIdx) ? ' tu-section-dropband--active' : '')}
+                className={
+                  'tu-section-dropband' +
+                  sectionDropBandRegionClass(list, sIdx, enableParallelPhaseControls) +
+                  (bandActiveBefore(sIdx) ? ' tu-section-dropband--active' : '')
+                }
                 title="Abschnitt hier einfügen"
                 onDragOver={(e) => {
                   if (!enableSectionDragReorder) return
@@ -714,14 +1433,407 @@ export default function TrainingUnitSectionsEditor({
                 onDrop={(e) => onSectionBandDrop(e, sIdx)}
               />
             ) : null}
+            {isFirstSectionOfParallelPhase &&
+            enableParallelPhaseControls &&
+            streamOrdersForParallelPhase.length ? (
+              <Fragment key={`phase-edge-${parallelPhaseOrder}`}>
+                {enableSectionDragReorder ? (
+                  <div
+                    className={
+                      'tu-section-dropband tu-phase-drop--above-split tu-section-dropband--phase-parallel-slot' +
+                      sectionDropBandRegionClass(
+                        list,
+                        firstGlobalIdxThisPhase ?? sIdx,
+                        enableParallelPhaseControls
+                      ) +
+                      (phaseAboveSplitDnd ? ' tu-section-dropband--active' : '')
+                    }
+                    title="Oberhalb der Split-Phase: Abschnitt in die Ganzgruppe ziehen"
+                    aria-label="Dropzone Ganzgruppe oberhalb der Split-Phase"
+                    onDragOver={(e) => onPhaseAboveSplitDragOver(e, parallelPhaseOrder)}
+                    onDragLeave={(e) => {
+                      if (e.currentTarget.contains(e.relatedTarget)) return
+                      clearSectionDnD()
+                    }}
+                    onDrop={(e) => onPhaseAboveSplitDrop(e, parallelPhaseOrder)}
+                  />
+                ) : null}
+              <div
+                style={{
+                  marginBottom: '12px',
+                  padding: '10px 12px',
+                  background: 'var(--surface2)',
+                  borderRadius: '10px',
+                  border: '1px solid var(--border, rgba(0,0,0,0.08))',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '8px',
+                    alignItems: 'center',
+                    marginBottom: '10px',
+                  }}
+                >
+                  {enableSectionDragReorder ? (
+                    <span
+                      className="tu-sec-drag-grip"
+                      draggable
+                      onDragStart={(e) => onParallelPhaseDragStart(e, parallelPhaseOrder)}
+                      role="button"
+                      tabIndex={0}
+                      aria-label="Parallele Phase ziehen"
+                      title="Gesamte parallele Phase an neue Planposition ziehen"
+                    >
+                      <GripVertical size={16} strokeWidth={2} aria-hidden />
+                    </span>
+                  ) : null}
+                  <label
+                    className="form-label"
+                    style={{ fontSize: '0.78rem', marginBottom: 0, flex: '0 0 auto' }}
+                  >
+                    Phase
+                  </label>
+                  {(() => {
+                    const hi = firstSectionIndexByParallelPhase.get(parallelPhaseOrder)
+                    const phaseTitleStr =
+                      hi != null && list[hi]?.planLoc?.phaseTitle != null
+                        ? String(list[hi].planLoc.phaseTitle)
+                        : ''
+                    const editingPhase = phaseTitleEditPo === parallelPhaseOrder
+                    return editingPhase ? (
+                      <input
+                        className="form-input"
+                        style={{ flex: '2 1 200px', maxWidth: '320px', marginBottom: 0 }}
+                        autoFocus
+                        value={phaseTitleDraft}
+                        onChange={(e) => setPhaseTitleDraft(e.target.value)}
+                        onBlur={() => {
+                          if (!skipPhaseTitleBlurSave.current) {
+                            updateParallelPhaseTitleAll(parallelPhaseOrder, phaseTitleDraft)
+                          }
+                          skipPhaseTitleBlurSave.current = false
+                          setPhaseTitleEditPo(null)
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') e.currentTarget.blur()
+                          if (e.key === 'Escape') {
+                            skipPhaseTitleBlurSave.current = true
+                            setPhaseTitleEditPo(null)
+                            e.currentTarget.blur()
+                          }
+                        }}
+                        placeholder="Bezeichnung der Phase (z. B. Drill-Runde)"
+                      />
+                    ) : (
+                      <>
+                        <span
+                          style={{
+                            flex: '2 1 200px',
+                            maxWidth: '320px',
+                            fontSize: '0.86rem',
+                            fontWeight: 600,
+                            color: 'var(--text1)',
+                            lineHeight: 1.35,
+                            padding: '6px 4px',
+                          }}
+                        >
+                          {(phaseTitleStr || '').trim() ||
+                            `Phase ${parallelPhaseOrder} · Namen per Stift bearbeiten`}
+                        </span>
+                        <button
+                          type="button"
+                          className="tu-icon-btn"
+                          style={{ padding: '6px', color: 'var(--text2)' }}
+                          aria-label="Phasen-Bezeichnung bearbeiten"
+                          title="Namen bearbeiten"
+                          onClick={() => {
+                            setPhaseTitleEditPo(parallelPhaseOrder)
+                            setPhaseTitleDraft(phaseTitleStr)
+                          }}
+                        >
+                          <Pencil size={16} strokeWidth={2} aria-hidden />
+                        </button>
+                      </>
+                    )
+                  })()}
+                  {(() => {
+                    const prRunIdx = planningPhaseRuns.findIndex(
+                      (r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === parallelPhaseOrder
+                    )
+                    const chipPhaseUpDis = prRunIdx <= 0
+                    const chipPhaseDownDis =
+                      prRunIdx < 0 || prRunIdx >= planningPhaseRuns.length - 1
+                    return (
+                      <div
+                        style={{
+                          display: 'inline-flex',
+                          gap: '4px',
+                          alignItems: 'center',
+                          marginRight: '2px',
+                        }}
+                      >
+                        <button
+                          type="button"
+                          className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                          disabled={chipPhaseUpDis}
+                          aria-label="Parallelen Block nach oben"
+                          title="Gesamten parallelen Block im Plan nach oben schieben"
+                          onClick={() =>
+                            patch((p) => movePhaseRunUpByPhaseOrder(p, parallelPhaseOrder))
+                          }
+                          style={{ padding: '4px 10px' }}
+                        >
+                          ▲
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                          disabled={chipPhaseDownDis}
+                          aria-label="Parallelen Block nach unten"
+                          title="Gesamten parallelen Block im Plan nach unten schieben"
+                          onClick={() =>
+                            patch((p) => movePhaseRunDownByPhaseOrder(p, parallelPhaseOrder))
+                          }
+                          style={{ padding: '4px 10px' }}
+                        >
+                          ▼
+                        </button>
+                      </div>
+                    )
+                  })()}
+                  <button
+                    type="button"
+                    className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                    onClick={() => addStreamToParallelPhase(parallelPhaseOrder)}
+                    disabled={streamOrdersForParallelPhase.length >= MAX_PARALLEL_STREAMS_PER_PHASE}
+                    title={
+                      streamOrdersForParallelPhase.length >= MAX_PARALLEL_STREAMS_PER_PHASE
+                        ? `Höchstens ${MAX_PARALLEL_STREAMS_PER_PHASE} Streams`
+                        : 'Weitere parallele Gruppe'
+                    }
+                  >
+                    + Stream
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                    onClick={() =>
+                      addSectionToParallelStream(parallelPhaseOrder, activeParallelStream ?? 0)
+                    }
+                    title="Neuer Abschnitt im gerade gewählten Stream"
+                  >
+                    + Abschnitt in diesem Stream
+                  </button>
+                </div>
+                <div
+                  role="tablist"
+                  aria-label={`Streams · Phase ${parallelPhaseOrder}`}
+                  style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'stretch' }}
+                >
+                  {streamOrdersForParallelPhase.map((so) => {
+                    const sel =
+                      (parallelStreamTabByPhase[parallelPhaseOrder] ??
+                        streamOrdersForParallelPhase[0] ??
+                        0) === so
+                    const pv = parallelStreamVisual(so)
+                    const si = sectionIndicesForParallelStream(list, parallelPhaseOrder, so)
+                    const titleSource = si.length ? list[si[0]]?.planLoc?.streamTitle : null
+                    const streamName = titleSource != null ? String(titleSource) : ''
+                    const editKey = `${parallelPhaseOrder}:${so}`
+                    const editingStream = streamNameEditKey === editKey
+                    return (
+                      <div
+                        key={`p${parallelPhaseOrder}-chip-s${so}`}
+                        className={
+                          'tu-stream-chip-pill' +
+                          (streamChipDropActive(parallelPhaseOrder, so)
+                            ? ' tu-stream-chip-pill--drop-active'
+                            : '')
+                        }
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: '4px',
+                          padding: '4px 6px 4px 8px',
+                          borderRadius: '999px',
+                          border: sel ? `2px solid ${pv.border}` : `1px solid ${pv.border}`,
+                          background: sel ? pv.tabBgActive : pv.tabBg,
+                          maxWidth: '100%',
+                        }}
+                        title={
+                          useStreamTagDropUx
+                            ? 'Gruppe wählen oder Abschnitt hierher ziehen'
+                            : undefined
+                        }
+                        onDragOver={
+                          useStreamTagDropUx
+                            ? (e) => onStreamDropTargetDragOver(e, parallelPhaseOrder, so)
+                            : undefined
+                        }
+                        onDragLeave={
+                          useStreamTagDropUx ? onStreamDropTargetDragLeave : undefined
+                        }
+                        onDrop={
+                          useStreamTagDropUx
+                            ? (e) => onStreamDropTargetDrop(e, parallelPhaseOrder, so)
+                            : undefined
+                        }
+                      >
+                        {editingStream ? (
+                          <input
+                            className="form-input"
+                            autoFocus
+                            style={{
+                              minWidth: '7rem',
+                              maxWidth: '12rem',
+                              margin: 0,
+                              padding: '4px 8px',
+                              fontSize: '0.8rem',
+                              borderRadius: '8px',
+                            }}
+                            value={streamNameDraft}
+                            onChange={(e) => setStreamNameDraft(e.target.value)}
+                            onBlur={() => {
+                              if (!skipStreamNameBlurSave.current) {
+                                updateParallelStreamTitleAll(parallelPhaseOrder, so, streamNameDraft)
+                              }
+                              skipStreamNameBlurSave.current = false
+                              setStreamNameEditKey(null)
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') e.currentTarget.blur()
+                              if (e.key === 'Escape') {
+                                skipStreamNameBlurSave.current = true
+                                setStreamNameEditKey(null)
+                                e.currentTarget.blur()
+                              }
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                            placeholder={`Gruppe ${so + 1}`}
+                            aria-label={`Name Gruppe ${so + 1}`}
+                          />
+                        ) : (
+                          <button
+                            type="button"
+                            role="tab"
+                            aria-selected={sel}
+                            style={{
+                              flex: '1 1 auto',
+                              minWidth: '5.5rem',
+                              maxWidth: '12rem',
+                              margin: 0,
+                              padding: '6px 10px',
+                              fontSize: '0.85rem',
+                              fontWeight: sel ? 600 : 500,
+                              border: 'none',
+                              background: 'transparent',
+                              color: 'var(--text1)',
+                              textAlign: 'left',
+                              cursor: 'pointer',
+                              borderRadius: '8px',
+                            }}
+                            onClick={() =>
+                              setParallelStreamTabByPhase((prev) => ({
+                                ...prev,
+                                [parallelPhaseOrder]: so,
+                              }))
+                            }
+                          >
+                            {(streamName || '').trim() || `Gruppe ${so + 1}`}
+                          </button>
+                        )}
+                        <button
+                          type="button"
+                          className="tu-icon-btn"
+                          style={{
+                            flex: '0 0 auto',
+                            padding: '4px',
+                            color: 'var(--text2)',
+                            borderRadius: '8px',
+                          }}
+                          title="Gruppennamen bearbeiten"
+                          aria-label="Gruppennamen bearbeiten"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setStreamNameEditKey(editKey)
+                            setStreamNameDraft(streamName)
+                          }}
+                        >
+                          <Pencil size={15} strokeWidth={2} aria-hidden />
+                        </button>
+                        <button
+                          type="button"
+                          className="tu-icon-btn"
+                          style={{
+                            flex: '0 0 auto',
+                            padding: '4px',
+                            color: 'var(--text2)',
+                            borderRadius: '8px',
+                          }}
+                          title="Stream entfernen"
+                          aria-label={`Stream ${so + 1} entfernen`}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            removeParallelStream(parallelPhaseOrder, so)
+                          }}
+                        >
+                          <X size={16} strokeWidth={2} aria-hidden />
+                        </button>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+                {enableSectionDragReorder ? (
+                  <div
+                    className={
+                      'tu-section-dropband tu-phase-drop--below-split tu-section-dropband--phase-parallel-slot' +
+                      sectionDropBandRegionClass(
+                        list,
+                        firstVisibleIdxActiveStream ?? firstGlobalIdxThisPhase ?? sIdx,
+                        enableParallelPhaseControls
+                      ) +
+                      (phaseBelowSplitDnd ? ' tu-section-dropband--active' : '')
+                    }
+                    title="Erster Abschnitt in dieser Gruppe (hier vorne einfügen)"
+                    aria-label="Dropzone: erster Slot der gewählten Splitgruppe unter dem Split-Kopf"
+                    onDragOver={(e) =>
+                      onPhaseBelowSplitDragOver(
+                        e,
+                        parallelPhaseOrder,
+                        activeParallelStream ?? 0
+                      )
+                    }
+                    onDragLeave={(e) => {
+                      if (e.currentTarget.contains(e.relatedTarget)) return
+                      clearSectionDnD()
+                    }}
+                    onDrop={(e) =>
+                      onPhaseBelowSplitDrop(
+                        e,
+                        parallelPhaseOrder,
+                        activeParallelStream ?? 0
+                      )
+                    }
+                  />
+                ) : null}
+              </Fragment>
+            ) : null}
+            {!hideParallelSection ? (
+            <>
             <div
               className="tu-section-shell"
               style={{
                 marginBottom: '1rem',
                 padding: '0.75rem',
-                background: 'var(--surface2)',
+                background: streamVisual ? streamVisual.soft : 'var(--surface2)',
                 borderRadius: '10px',
-                border: '1px solid var(--border, rgba(0,0,0,0.08))',
+                border: streamVisual
+                  ? `1px solid ${streamVisual.border}`
+                  : '1px solid var(--border, rgba(0,0,0,0.08))',
+                borderLeft: streamVisual ? `5px solid ${streamVisual.border}` : undefined,
               }}
             >
               <div
@@ -733,7 +1845,7 @@ export default function TrainingUnitSectionsEditor({
                   alignItems: 'flex-start',
                 }}
               >
-                {enableSectionDragReorder ? (
+                {allowSectionDragGrip ? (
                   <span
                     className="tu-sec-drag-grip"
                     draggable
@@ -758,8 +1870,11 @@ export default function TrainingUnitSectionsEditor({
                     type="button"
                     aria-label="Abschnitt hoch"
                     onClick={() => moveSection(sIdx, -1)}
-                    disabled={sIdx === 0}
-                    style={{ padding: '4px 10px', opacity: sIdx === 0 ? 0.35 : 1 }}
+                    disabled={sectionMoveDisabledUp(sIdx)}
+                    style={{
+                      padding: '4px 10px',
+                      opacity: sectionMoveDisabledUp(sIdx) ? 0.35 : 1,
+                    }}
                   >
                     ▲
                   </button>
@@ -767,10 +1882,10 @@ export default function TrainingUnitSectionsEditor({
                     type="button"
                     aria-label="Abschnitt runter"
                     onClick={() => moveSection(sIdx, 1)}
-                    disabled={sIdx === list.length - 1}
+                    disabled={sectionMoveDisabledDown(sIdx)}
                     style={{
                       padding: '4px 10px',
-                      opacity: sIdx === list.length - 1 ? 0.35 : 1,
+                      opacity: sectionMoveDisabledDown(sIdx) ? 0.35 : 1,
                     }}
                   >
                     ▼
@@ -784,6 +1899,36 @@ export default function TrainingUnitSectionsEditor({
                   Abschnitt entfernen
                 </button>
               </div>
+              {enableParallelPhaseControls && sec.planLoc ? (
+                <p
+                  style={{
+                    fontSize: '0.75rem',
+                    color: 'var(--text2)',
+                    margin: '0 0 8px',
+                    fontWeight: 500,
+                  }}
+                >
+                  {sec.planLoc.phaseKind === 'whole_group'
+                    ? (() => {
+                        const pt = sec.planLoc.phaseTitle
+                        const po = sec.planLoc.phaseOrderIndex ?? 0
+                        return pt != null && String(pt).trim()
+                          ? `Ganzgruppe: ${String(pt).trim()} (Phase ${po})`
+                          : `Ganzgruppen-Phase ${po}`
+                      })()
+                    : (() => {
+                        const pt = sec.planLoc.phaseTitle
+                        const st = sec.planLoc.streamTitle
+                        const po = sec.planLoc.phaseOrderIndex ?? 0
+                        const so = sec.planLoc.parallelStreamOrderIndex ?? 0
+                        const phaseLbl =
+                          pt != null && String(pt).trim() ? String(pt).trim() : `Phase ${po}`
+                        const streamLbl =
+                          st != null && String(st).trim() ? String(st).trim() : `Gruppe ${so + 1}`
+                        return `Parallel · ${phaseLbl} · ${streamLbl}`
+                      })()}
+                </p>
+              ) : null}
               <textarea
                 className="form-input"
                 rows={2}
@@ -793,6 +1938,25 @@ export default function TrainingUnitSectionsEditor({
                 }
                 placeholder="Hinweise zum Abschnitt (Material, Zeit, Zielrichtung …)"
               />
+              {enableParallelPhaseControls ? (
+                <div className="form-row" style={{ marginTop: '10px', marginBottom: '2px' }}>
+                  <label className="form-label" style={{ fontSize: '0.78rem' }}>
+                    Zuordnung
+                  </label>
+                  <select
+                    className="form-input"
+                    value={planLocKey(sec.planLoc)}
+                    onChange={(e) => applySectionPlanTarget(sIdx, e.target.value)}
+                  >
+                    <option value="">Standard — eine Ganzgruppe (klassischer Ablauf)</option>
+                    {planSelectOptionsForSection(list, sIdx, buildPlanTargetOptions(list)).map((o) => (
+                      <option key={o.key} value={o.key}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              ) : null}
               {planMin > 0 && (
                 <p style={{ fontSize: '0.78rem', color: 'var(--text2)', marginTop: '0.35rem' }}>
                   Geplant in diesem Abschnitt: ca. {planMin} Min. (Übungen)
@@ -1314,6 +2478,56 @@ export default function TrainingUnitSectionsEditor({
                 </div>
               ) : null}
             </div>
+            {useStreamTagDropUx && pl?.phaseKind === 'parallel' && parallelPhaseOrder != null
+              ? (() => {
+                  const bucket = sectionIndicesForParallelStream(
+                    list,
+                    parallelPhaseOrder,
+                    pl.parallelStreamOrderIndex ?? 0
+                  )
+                  if (!bucket.length || bucket[bucket.length - 1] !== sIdx) return null
+                  const pvA = parallelStreamVisual(pl.parallelStreamOrderIndex ?? 0)
+                  const soA = pl.parallelStreamOrderIndex ?? 0
+                  const sd = dropSectionBand?.streamDrop
+                  const appendBandActive =
+                    !!sd &&
+                    dropSectionBand?.slot === sectionToSlot &&
+                    sd.po === parallelPhaseOrder &&
+                    sd.so === soA
+                  return (
+                    <div
+                      className="tu-section-stream-append"
+                      style={{
+                        marginBottom: '1rem',
+                        padding: '0.45rem 0.65rem',
+                        borderRadius: '10px',
+                        border: `1px dashed ${pvA.border}`,
+                        background: pvA.soft,
+                        borderLeft: `5px solid ${pvA.border}`,
+                        boxSizing: 'border-box',
+                      }}
+                    >
+                      <div
+                        className={
+                          'tu-section-stream-append__drop tu-section-dropband tu-section-dropband--region-split' +
+                          (appendBandActive ? ' tu-section-dropband--active' : '')
+                        }
+                        title="Abschnitt am Ende dieser Gruppe einfügen (per Ziehen)"
+                        aria-label="Dropzone: Abschnitt ans Ende dieser parallelen Gruppe"
+                        onDragOver={(e) =>
+                          onStreamDropTargetDragOver(e, parallelPhaseOrder, soA)
+                        }
+                        onDragLeave={onStreamDropTargetDragLeave}
+                        onDrop={(e) =>
+                          onStreamDropTargetDrop(e, parallelPhaseOrder, soA)
+                        }
+                      />
+                    </div>
+                  )
+                })()
+              : null}
+            </>
+            ) : null}
           </Fragment>
         )
       })}
@@ -1322,13 +2536,22 @@ export default function TrainingUnitSectionsEditor({
         <div
           className={
             'tu-section-dropband tu-section-dropband--end' +
+            (useStreamTagDropUx ? ' tu-section-dropband--whole-plan-end' : '') +
+            (!useStreamTagDropUx
+              ? sectionDropBandRegionClass(list, list.length, enableParallelPhaseControls)
+              : '') +
             (dropSectionBand &&
             dropSectionBand.slot === sectionToSlot &&
-            dropSectionBand.beforeIdx === list.length
+            dropSectionBand.beforeIdx === list.length &&
+            !dropSectionBand.streamDrop
               ? ' tu-section-dropband--active'
               : '')
           }
-          title="Abschnitt am Ende einfügen"
+          title={
+            useStreamTagDropUx
+              ? 'Hier ablegen: neuer Abschnitt für die Ganzgruppe (am Planende)'
+              : 'Abschnitt am Ende einfügen'
+          }
           onDragOver={(e) => {
             if (!dtHasType(e, DND_TU_SECTION)) return
             onSectionBandDragOver(e, list.length)
@@ -1341,13 +2564,53 @@ export default function TrainingUnitSectionsEditor({
         />
       ) : null}
 
-      <button
-        type="button"
-        className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-        onClick={addSection}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '8px',
+          alignItems: 'center',
+          marginTop: '0.75rem',
+        }}
       >
-        + Abschnitt hinzufügen
-      </button>
+        {enableParallelPhaseControls ? (
+          <>
+            <button
+              type="button"
+              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+              onClick={addParallelPhaseTwoStreams}
+              disabled={
+                list.length > 0 &&
+                list[list.length - 1]?.planLoc?.phaseKind === 'parallel'
+              }
+              title={
+                list.length > 0 && list[list.length - 1]?.planLoc?.phaseKind === 'parallel'
+                  ? 'Splitten direkt nach einem parallelen Block ist un\u00fcblich. Zuerst eine Ganzgruppen-Phase oder einen Ganzgruppen-Abschnitt anf\u00fcgen, dann erneut splitten.'
+                  : 'Zwei parallele Gruppen mit je einem Abschnitt anlegen'
+              }
+            >
+              Gruppen splitten
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+              onClick={addWholeGroupSection}
+              title="Neuer Abschnitt für die gemeinsame Gruppe (legt bei Bedarf eine neue Ganzgruppen-Phase an)"
+            >
+              + Abschnitt (Ganzgruppe)
+            </button>
+          </>
+        ) : (
+          <button
+            type="button"
+            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+            onClick={addSection}
+            title="Abschnitt am Ende anfügen"
+          >
+            + Abschnitt hinzufügen
+          </button>
+        )}
+      </div>
 
       {insertChooser ? (
         <div
diff --git a/frontend/src/components/exercises/ExerciseFormPageRoot.jsx b/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
new file mode 100644
index 0000000..5d4a94a
--- /dev/null
+++ b/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
@@ -0,0 +1,2447 @@
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react'
+import { useNavigate, useParams, Link } from 'react-router-dom'
+import api, { buildExerciseApiPayload } from '../../utils/api'
+import { resolveExerciseMediaFileUrl, resolveMediaAssetFileUrl } from '../../utils/exerciseMediaUrl'
+import RichTextEditor from '../RichTextEditor'
+import ExerciseProgressionGraphPanel from '../ExerciseProgressionGraphPanel'
+import ExerciseMediaThumbTile from '../ExerciseMediaThumbTile'
+import MediaPreviewModal from '../MediaPreviewModal'
+import ReportContentModal from '../ReportContentModal'
+import CombinationMethodProfileEditor from '../CombinationMethodProfileEditor'
+import ExercisePickerModal from '../ExercisePickerModal'
+import {
+  SHINKAN_EXERCISE_MEDIA_DRAG_MIME,
+  buildExerciseMediaDragPayload,
+} from '../../utils/exerciseInlineMediaRefs'
+import { autoScrollForDragNearEdges } from '../../utils/dragAutoScroll'
+import { SKILL_LEVEL_OPTIONS, normalizeSkillLevelSlug } from '../../constants/skillLevels'
+import { useAuth } from '../../context/AuthContext'
+import { useToast } from '../../context/ToastContext'
+import {
+  activeClubMemberships,
+  getDefaultClubIdForGovernanceForms,
+  getTenantClubDependencyKey,
+} from '../../utils/activeClub'
+import { COMBINATION_ARCHETYPE_OPTIONS, ARCHETYPE_DEFAULT_REP_SERIES_COUNT, defaultRepSeriesCountForArchetype } from '../../constants/combinationArchetypes'
+import { readSlotProfilesV1, normalizeAdvanceMode, parseComboRepSeriesCountUi } from '../../utils/combinationMethodProfileUi'
+import { GripVertical } from 'lucide-react'
+import UnsavedChangesPrompt from '../UnsavedChangesPrompt'
+import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../../hooks/useUnsavedChangesBlocker'
+
+const INTENSITY_OPTIONS = [
+  { value: '', label: '—' },
+  { value: 'niedrig', label: 'niedrig' },
+  { value: 'mittel', label: 'mittel' },
+  { value: 'hoch', label: 'hoch' },
+]
+
+const VARIANT_DIFFICULTY = [
+  { value: '', label: '—' },
+  { value: 'easier', label: 'Einfacher' },
+  { value: 'same', label: 'Gleich' },
+  { value: 'harder', label: 'Schwerer' },
+  { value: 'adapted', label: 'Angepasst' },
+]
+
+/** HTML5-DnD für Kombi-Stationen (Reihenfolge = Ablauf). */
+const DND_EXERCISE_COMBO_STATION = 'application/x-shinkan-exercise-combo-station-v1'
+
+/** Pro Station meist 1 Übung; bis zu 3 wenn kurzer Auswahl-Pool sinnvoll ist. */
+const MAX_COMBO_CANDIDATES_PER_STATION = 3
+
+const comboTinyNumberInputSx = {
+  width: '3.5rem',
+  maxWidth: '100%',
+  padding: '4px 6px',
+  fontSize: '0.8125rem',
+  textAlign: 'center',
+}
+
+function emptyComboSlotRow() {
+  return {
+    title: '',
+    candidate_exercise_ids: [],
+    exercise_title_by_id: {},
+    advance_mode: 'timed',
+    load_sec: '',
+    consecutive_reps: '',
+    rep_series_count: '1',
+    intra_rep_rest_sec: '',
+    transition_after_sec: '',
+  }
+}
+
+function comboSlotsFromDetail(exercise) {
+  const raw = exercise?.combination_slots
+  const arch = exercise?.method_archetype != null ? String(exercise.method_archetype).trim() : ''
+  const serienFallback = defaultRepSeriesCountForArchetype(arch)
+  const mp =
+    exercise?.method_profile &&
+    typeof exercise.method_profile === 'object' &&
+    !Array.isArray(exercise.method_profile)
+      ? exercise.method_profile
+      : {}
+  const spvList = readSlotProfilesV1(mp)
+  const byIx = new Map(spvList.map((r) => [Number(r.slot_index), r]))
+
+  if (!Array.isArray(raw) || raw.length === 0) {
+    return [emptyComboSlotRow()]
+  }
+  const sorted = [...raw].sort((a, b) => (Number(a.slot_index) || 0) - (Number(b.slot_index) || 0))
+  return sorted.map((s) => {
+    const si = Number(s.slot_index)
+    const st = byIx.get(si) || {}
+    const cands = Array.isArray(s.candidate_exercise_ids)
+      ? s.candidate_exercise_ids.map((x) => Number(x)).filter((n) => Number.isFinite(n))
+      : []
+    const mode = normalizeAdvanceMode(st.advance_mode)
+    let repSer = ''
+    if (st.rep_series_count != null) repSer = String(st.rep_series_count)
+    else if (mode === 'rep' || mode === 'manual') repSer = String(serienFallback)
+    else repSer = '1'
+    return {
+      title: s.title != null ? String(s.title) : '',
+      candidate_exercise_ids: cands,
+      exercise_title_by_id: {},
+      advance_mode: mode,
+      load_sec: st.load_sec != null ? String(st.load_sec) : '',
+      consecutive_reps: st.consecutive_reps != null ? String(st.consecutive_reps) : '',
+      rep_series_count: repSer,
+      intra_rep_rest_sec: st.intra_rep_rest_sec != null ? String(st.intra_rep_rest_sec) : '',
+      transition_after_sec: st.transition_after_sec != null ? String(st.transition_after_sec) : '',
+    }
+  })
+}
+
+function emptyVariantDraft() {
+  return {
+    variant_name: '',
+    description: '',
+    execution_changes: '',
+    duration_min: '',
+    duration_max: '',
+    equipment_lines: '',
+    difficulty_adjustment: '',
+    progression_level: 1,
+    prerequisite_variant_id: '',
+  }
+}
+
+function apiVariantToRow(v) {
+  let lines = ''
+  const eq = v.equipment_changes
+  if (Array.isArray(eq)) {
+    lines = eq.join('\n')
+  } else if (typeof eq === 'string' && eq.trim()) {
+    try {
+      const p = JSON.parse(eq)
+      lines = Array.isArray(p) ? p.join('\n') : eq
+    } catch {
+      lines = eq
+    }
+  }
+  return {
+    ...v,
+    duration_min: v.duration_min ?? '',
+    duration_max: v.duration_max ?? '',
+    equipment_lines: lines,
+    progression_level: v.progression_level ?? 1,
+    prerequisite_variant_id: v.prerequisite_variant_id ?? '',
+    difficulty_adjustment: v.difficulty_adjustment ?? '',
+  }
+}
+
+function buildVariantPayloadFromRow(row) {
+  const lines = (row.equipment_lines || '')
+    .split(/[\n,]+/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+  const pl =
+    row.progression_level === '' || row.progression_level == null
+      ? 1
+      : parseInt(row.progression_level, 10)
+  const so =
+    row.sequence_order === '' || row.sequence_order == null
+      ? null
+      : parseInt(row.sequence_order, 10)
+  return {
+    variant_name: (row.variant_name || '').trim(),
+    description: (row.description || '').trim() || null,
+    execution_changes: (row.execution_changes || '').trim() || null,
+    duration_min: row.duration_min === '' || row.duration_min == null ? null : parseInt(row.duration_min, 10),
+    duration_max: row.duration_max === '' || row.duration_max == null ? null : parseInt(row.duration_max, 10),
+    equipment_changes: lines,
+    difficulty_adjustment: row.difficulty_adjustment || null,
+    progression_level: Number.isNaN(pl) ? 1 : pl,
+    sequence_order: so !== null && Number.isNaN(so) ? null : so,
+    prerequisite_variant_id:
+      row.prerequisite_variant_id === '' || row.prerequisite_variant_id == null
+        ? null
+        : parseInt(row.prerequisite_variant_id, 10),
+  }
+}
+
+/** Gemeinsame Felder für „Variante bearbeiten“ und „Neue Variante“. */
+function ExerciseVariantFields({
+  row,
+  onPatch,
+  prerequisiteOthers,
+  rteMinHeight = '110px',
+  inlineExerciseId,
+  linkedExerciseMedia = [],
+  onExerciseMediaListChanged,
+}) {
+  return (
+    <>
+      <div className="form-row">
+        <label className="form-label">Variantenname *</label>
+        <input
+          type="text"
+          className="form-input"
+          value={row.variant_name || ''}
+          onChange={(e) => onPatch({ variant_name: e.target.value })}
+          minLength={3}
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Kurzbeschreibung</label>
+        <textarea
+          className="form-input"
+          rows={2}
+          value={row.description || ''}
+          onChange={(e) => onPatch({ description: e.target.value })}
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Abweichungen zur Durchführung</label>
+        <RichTextEditor
+          value={row.execution_changes || ''}
+          onChange={(html) => onPatch({ execution_changes: html })}
+          placeholder="Was unterscheidet diese Variante? (Listen über Symbolleiste)"
+          minHeight={rteMinHeight}
+          inlineExerciseId={inlineExerciseId}
+          linkedExerciseMedia={linkedExerciseMedia}
+          onExerciseMediaListChanged={onExerciseMediaListChanged}
+        />
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+        <div className="form-row">
+          <label className="form-label">Dauer Min</label>
+          <input
+            type="number"
+            className="form-input"
+            value={row.duration_min}
+            onChange={(e) => onPatch({ duration_min: e.target.value })}
+          />
+        </div>
+        <div className="form-row">
+          <label className="form-label">Dauer Max</label>
+          <input
+            type="number"
+            className="form-input"
+            value={row.duration_max}
+            onChange={(e) => onPatch({ duration_max: e.target.value })}
+          />
+        </div>
+      </div>
+      <div className="form-row">
+        <label className="form-label">Materialänderungen (eine Zeile pro Eintrag)</label>
+        <textarea
+          className="form-input"
+          rows={2}
+          value={row.equipment_lines || ''}
+          onChange={(e) => onPatch({ equipment_lines: e.target.value })}
+          placeholder="+ Pratzen"
+        />
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '10px' }}>
+        <div className="form-row">
+          <label className="form-label">Schwere relativ</label>
+          <select
+            className="form-input"
+            value={row.difficulty_adjustment || ''}
+            onChange={(e) => onPatch({ difficulty_adjustment: e.target.value })}
+          >
+            {VARIANT_DIFFICULTY.map((o) => (
+              <option key={o.label} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="form-row">
+          <label className="form-label">Progressions-Stufe (1–10)</label>
+          <input
+            type="number"
+            min={1}
+            max={10}
+            className="form-input"
+            value={row.progression_level}
+            onChange={(e) =>
+              onPatch({
+                progression_level: e.target.value === '' ? '' : parseInt(e.target.value, 10),
+              })
+            }
+          />
+        </div>
+        <div className="form-row">
+          <label className="form-label">Voraussetzungs-Variante</label>
+          <select
+            className="form-input"
+            value={
+              row.prerequisite_variant_id === '' || row.prerequisite_variant_id == null
+                ? ''
+                : String(row.prerequisite_variant_id)
+            }
+            onChange={(e) =>
+              onPatch({
+                prerequisite_variant_id: e.target.value === '' ? '' : parseInt(e.target.value, 10),
+              })
+            }
+          >
+            <option value="">— keine —</option>
+            {prerequisiteOthers.map((o) => (
+              <option key={o.id} value={o.id}>
+                {o.variant_name || `Variante #${o.id}`}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function emptyForm() {
+  return {
+    title: '',
+    summary: '',
+    goal: '',
+    execution: '',
+    preparation: '',
+    trainer_notes: '',
+    equipmentLines: '',
+    duration_min: '',
+    duration_max: '',
+    group_size_min: '',
+    group_size_max: '',
+    focus_areas_multi: [],
+    training_styles_multi: [],
+    training_types_multi: [],
+    target_groups_multi: [],
+    visibility: 'private',
+    club_id: null,
+    status: 'draft',
+    skills: [],
+    exercise_kind: 'simple',
+    method_archetype: '',
+    method_profile_json: '{}',
+    combination_slots: [emptyComboSlotRow()],
+  }
+}
+
+function detailToForm(exercise) {
+  return {
+    title: exercise.title || '',
+    summary: exercise.summary || '',
+    goal: exercise.goal || '',
+    execution: exercise.execution || '',
+    preparation: exercise.preparation || '',
+    trainer_notes: exercise.trainer_notes || '',
+    equipmentLines: (exercise.equipment || []).join('\n'),
+    duration_min: exercise.duration_min ?? '',
+    duration_max: exercise.duration_max ?? '',
+    group_size_min: exercise.group_size_min ?? '',
+    group_size_max: exercise.group_size_max ?? '',
+    focus_areas_multi: (exercise.focus_areas || []).map((f) => ({
+      focus_area_id: f.focus_area_id,
+      is_primary: !!f.is_primary,
+    })),
+    training_styles_multi: (exercise.training_styles || []).map((t) => ({
+      training_style_id: t.training_style_id,
+      is_primary: !!t.is_primary,
+    })),
+    training_types_multi: (exercise.training_types || []).map((t) => ({
+      training_type_id: t.training_type_id,
+      is_primary: !!t.is_primary,
+    })),
+    target_groups_multi: (exercise.target_groups || []).map((g) => ({
+      target_group_id: g.target_group_id,
+      is_primary: !!g.is_primary,
+    })),
+    visibility: exercise.visibility || 'private',
+    club_id:
+      String(exercise.visibility || '').trim().toLowerCase() === 'club' &&
+      exercise.club_id != null &&
+      exercise.club_id !== ''
+        ? Number(exercise.club_id)
+        : null,
+    status: exercise.status || 'draft',
+    skills:
+      exercise.skills?.map((s) => ({
+        skill_id: s.skill_id,
+        is_primary: s.is_primary || false,
+        intensity: s.intensity || '',
+        required_level: normalizeSkillLevelSlug(s.required_level),
+        target_level: normalizeSkillLevelSlug(s.target_level),
+      })) || [],
+    exercise_kind:
+      String(exercise.exercise_kind || 'simple').toLowerCase() === 'combination'
+        ? 'combination'
+        : 'simple',
+    method_archetype: exercise.method_archetype != null ? String(exercise.method_archetype) : '',
+    method_profile_json:
+      typeof exercise.method_profile === 'object' &&
+      exercise.method_profile != null &&
+      !Array.isArray(exercise.method_profile)
+        ? JSON.stringify(exercise.method_profile, null, 2)
+        : '{}',
+    combination_slots: comboSlotsFromDetail(exercise),
+  }
+}
+
+function MultiAssocBlock({ title, rows, setRows, options, idKey, emptyLabel }) {
+  const setPrimary = (idx) => {
+    setRows(rows.map((r, i) => ({ ...r, is_primary: i === idx })))
+  }
+  const updateRow = (idx, patch) => {
+    const next = rows.map((r, i) => (i === idx ? { ...r, ...patch } : r))
+    if (patch.is_primary === true) {
+      next.forEach((r, i) => {
+        if (i !== idx) r.is_primary = false
+      })
+    }
+    setRows(next)
+  }
+  const addRow = () => setRows([...rows, { [idKey]: '', is_primary: rows.length === 0 }])
+  const removeRow = (idx) => {
+    const next = rows.filter((_, i) => i !== idx)
+    if (next.length && !next.some((r) => r.is_primary)) next[0].is_primary = true
+    setRows(next)
+  }
+
+  return (
+    <div className="multi-assoc-block">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
+        <h3>{title}</h3>
+        <button type="button" className="btn btn-secondary" style={{ fontSize: '12px', padding: '4px 10px' }} onClick={addRow}>
+          + Eintrag
+        </button>
+      </div>
+      {rows.length === 0 && (
+        <p style={{ fontSize: '13px', color: 'var(--text2)', margin: 0 }}>{emptyLabel}</p>
+      )}
+      {rows.map((row, idx) => (
+        <div key={idx} className="multi-assoc-row">
+          <select
+            className="form-input"
+            value={row[idKey] || ''}
+            onChange={(e) => updateRow(idx, { [idKey]: e.target.value ? parseInt(e.target.value, 10) : '' })}
+          >
+            <option value="">— wählen —</option>
+            {options.map((o) => (
+              <option key={o.id} value={o.id}>
+                {o.icon ? `${o.icon} ` : ''}
+                {o.name}
+                {o.abbreviation ? ` (${o.abbreviation})` : ''}
+              </option>
+            ))}
+          </select>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '13px', whiteSpace: 'nowrap' }}>
+            <input
+              type="radio"
+              name={`primary-${idKey}`}
+              checked={!!row.is_primary}
+              onChange={() => setPrimary(idx)}
+            />
+            primär
+          </label>
+          <button type="button" className="btn" style={{ fontSize: '12px', padding: '4px 8px' }} onClick={() => removeRow(idx)}>
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ExerciseFormPageRoot() {
+  const { id: routeId } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const isSuperadmin = user?.role === 'superadmin'
+  const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
+  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
+
+  const [clubsForGovernanceForms, setClubsForGovernanceForms] = useState([])
+  useEffect(() => {
+    if (!isPlatformAdmin) {
+      setClubsForGovernanceForms([])
+      return undefined
+    }
+    let cancelled = false
+    ;(async () => {
+      try {
+        const list = await api.listClubs()
+        if (!cancelled) setClubsForGovernanceForms(Array.isArray(list) ? list : [])
+      } catch {
+        if (!cancelled) setClubsForGovernanceForms([])
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [isPlatformAdmin, tenantClubDepKey])
+
+  const membershipClubRows = useMemo(() => activeClubMemberships(user?.clubs), [user?.clubs])
+
+  /** Plattform-Admin: alle Vereine; sonst nur Mitgliedschafts-Vereine. */
+  const visibilityClubChoices = useMemo(() => {
+    if (isPlatformAdmin && clubsForGovernanceForms.length > 0) {
+      return [...clubsForGovernanceForms].sort((a, b) =>
+        String(a.name || '').localeCompare(String(b.name || ''), 'de'),
+      )
+    }
+    return [...membershipClubRows].sort((a, b) =>
+      String(a.name || '').localeCompare(String(b.name || ''), 'de'),
+    )
+  }, [isPlatformAdmin, clubsForGovernanceForms, membershipClubRows])
+
+  const governanceDefaultClubId = useMemo(() => getDefaultClubIdForGovernanceForms(user), [user])
+
+  const exerciseId = routeId && !Number.isNaN(parseInt(routeId, 10)) ? parseInt(routeId, 10) : null
+  const isEdit = exerciseId != null
+
+  const [formData, setFormData] = useState(emptyForm)
+  const [skillsCatalog, setSkillsCatalog] = useState([])
+  const [focusAreas, setFocusAreas] = useState([])
+  const [styleDirections, setStyleDirections] = useState([])
+  const [trainingTypes, setTrainingTypes] = useState([])
+  const [targetGroups, setTargetGroups] = useState([])
+  const [mediaList, setMediaList] = useState([])
+  const [loading, setLoading] = useState(!!isEdit)
+  const [saving, setSaving] = useState(false)
+  const [formDirty, setFormDirty] = useState(false)
+  const [skillPick, setSkillPick] = useState('')
+
+  const toast = useToast()
+  const allowUnloadBlock = Boolean(formDirty && !loading && !saving)
+  useBeforeUnloadWhen(allowUnloadBlock)
+  const blocker = useUnsavedChangesBlocker(allowUnloadBlock)
+  const [variants, setVariants] = useState([])
+  const [variantDraft, setVariantDraft] = useState(() => emptyVariantDraft())
+  const [variantSavingId, setVariantSavingId] = useState(null)
+  const [variantBusy, setVariantBusy] = useState(false)
+  const [variantEditSelection, setVariantEditSelection] = useState(null)
+  const variantsDetailsRef = useRef(null)
+
+  const [mediaFields, setMediaFields] = useState({})
+  const [mediaSavingId, setMediaSavingId] = useState(null)
+  const [archiveOpen, setArchiveOpen] = useState(false)
+  const [archiveQ, setArchiveQ] = useState('')
+  const [archiveLoading, setArchiveLoading] = useState(false)
+  const [archiveItems, setArchiveItems] = useState([])
+  const [archiveError, setArchiveError] = useState(null)
+  const [mediaPreview, setMediaPreview] = useState(null)
+  const [reportTarget, setReportTarget] = useState(null)
+
+  useEffect(() => {
+    const next = {}
+    for (const m of mediaList) {
+      next[m.id] = {
+        title: m.title || '',
+      }
+    }
+    setMediaFields(next)
+  }, [mediaList])
+
+  useEffect(() => {
+    const onDragOverDoc = (e) => {
+      const types = e.dataTransfer?.types ? Array.from(e.dataTransfer.types) : []
+      if (!types.includes(SHINKAN_EXERCISE_MEDIA_DRAG_MIME)) return
+      e.preventDefault()
+      autoScrollForDragNearEdges(e)
+    }
+    document.addEventListener('dragover', onDragOverDoc)
+    return () => document.removeEventListener('dragover', onDragOverDoc)
+  }, [])
+
+
+
+  useEffect(() => {
+    if (!archiveOpen) return undefined
+    let cancelled = false
+    const t = setTimeout(async () => {
+      setArchiveLoading(true)
+      setArchiveError(null)
+      try {
+        const res = await api.listMediaAssets({
+          q: archiveQ.trim() || undefined,
+          limit: 40,
+        })
+        if (!cancelled) setArchiveItems((res.items || []).filter(a => !a.legal_hold_active))
+      } catch (e) {
+        if (!cancelled) setArchiveError(e.message || String(e))
+      } finally {
+        if (!cancelled) setArchiveLoading(false)
+      }
+    }, 280)
+    return () => {
+      cancelled = true
+      clearTimeout(t)
+    }
+  }, [archiveOpen, archiveQ])
+
+  useEffect(() => {
+    let cancelled = false
+    const boot = async () => {
+      try {
+        const [skillsData, faData, sdData, ttData, tgData] = await Promise.all([
+          api.listSkills(),
+          api.listFocusAreas(),
+          api.listTrainingStyles(),
+          api.listTrainingTypes(),
+          api.listTargetGroups(),
+        ])
+        if (cancelled) return
+        setSkillsCatalog(skillsData)
+        setFocusAreas(faData)
+        setStyleDirections(sdData)
+        setTrainingTypes(ttData)
+        setTargetGroups(tgData)
+      } catch (e) {
+        if (!cancelled) {
+          console.error(e)
+          toast.error(
+            'Kataloge (Fokus, Stile, Zielgruppen, Fähigkeiten) konnten nicht geladen werden: ' +
+              (e.message || e),
+          )
+        }
+      }
+    }
+    boot()
+    return () => {
+      cancelled = true
+    }
+  }, [toast])
+
+  useEffect(() => {
+    if (!isEdit) {
+      setFormData(emptyForm())
+      setMediaList([])
+      setVariants([])
+      setVariantDraft(emptyVariantDraft())
+      setVariantEditSelection(null)
+      setFormDirty(false)
+      setLoading(false)
+      return
+    }
+    let cancelled = false
+    const load = async () => {
+      setLoading(true)
+      try {
+        const exercise = await api.getExercise(exerciseId)
+        if (cancelled) return
+        setFormData(detailToForm(exercise))
+        setMediaList(exercise.media || [])
+        setVariants((exercise.variants || []).map(apiVariantToRow))
+        setVariantDraft(emptyVariantDraft())
+        setVariantEditSelection(null)
+        setFormDirty(false)
+      } catch (err) {
+        if (!cancelled) {
+          toast.error(err.message || 'Übung nicht ladbar')
+          navigate('/exercises')
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [isEdit, exerciseId, navigate, toast])
+
+  useEffect(() => {
+    if (variantEditSelection == null || variantEditSelection === 'new') return
+    if (!variants.some((v) => v.id === variantEditSelection)) {
+      setVariantEditSelection(null)
+    }
+  }, [variants, variantEditSelection])
+
+  useEffect(() => {
+    if (variantEditSelection != null && variantsDetailsRef.current) {
+      variantsDetailsRef.current.open = true
+    }
+  }, [variantEditSelection])
+
+  const updateFormField = (field, value) => {
+    setFormDirty(true)
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  useEffect(() => {
+    if (formData.visibility !== 'club') return
+    const choices = visibilityClubChoices
+    if (!choices.length) return
+
+    const id =
+      formData.club_id != null && formData.club_id !== '' ? Number(formData.club_id) : NaN
+    const hasValid =
+      Number.isFinite(id) && id > 0 && choices.some((c) => Number(c.id) === id)
+
+    if (hasValid) return
+
+    const fallback = governanceDefaultClubId
+    const next =
+      fallback != null &&
+      Number.isFinite(Number(fallback)) &&
+      choices.some((c) => Number(c.id) === Number(fallback))
+        ? Number(fallback)
+        : Number(choices[0].id)
+
+    setFormData((prev) => {
+      if (prev.visibility !== 'club') return prev
+      if (prev.club_id != null && Number(prev.club_id) === next) return prev
+      return { ...prev, club_id: next }
+    })
+  }, [
+    formData.visibility,
+    formData.club_id,
+    visibilityClubChoices,
+    governanceDefaultClubId,
+  ])
+
+  const [comboStationPickerIx, setComboStationPickerIx] = useState(null)
+  const [comboDropTargetIx, setComboDropTargetIx] = useState(null)
+
+  const reorderCombinationSlots = (fromI, toBeforeIx) => {
+    setFormDirty(true)
+    setFormData((prev) => {
+      const rows = [...(prev.combination_slots || [])]
+      if (fromI < 0 || fromI >= rows.length) return prev
+      const [moved] = rows.splice(fromI, 1)
+      let insertAt = toBeforeIx
+      if (fromI < toBeforeIx) insertAt = toBeforeIx - 1
+      insertAt = Math.max(0, Math.min(insertAt, rows.length))
+      rows.splice(insertAt, 0, moved)
+      return { ...prev, combination_slots: rows }
+    })
+  }
+
+  const patchComboSlotRow = (idx, patch) => {
+    setFormDirty(true)
+    setFormData((prev) => {
+      const rows = [...(prev.combination_slots || [])]
+      if (!rows[idx]) return prev
+      rows[idx] = { ...rows[idx], ...patch }
+      return { ...prev, combination_slots: rows }
+    })
+  }
+
+  const removeCandidateFromSlot = (slotIdx, exerciseId) => {
+    setFormDirty(true)
+    setFormData((prev) => {
+      const rows = [...(prev.combination_slots || [])]
+      const row = rows[slotIdx]
+      if (!row) return prev
+      const nextIds = (row.candidate_exercise_ids || []).filter((id) => Number(id) !== Number(exerciseId))
+      const labels = row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object' ? { ...row.exercise_title_by_id } : {}
+      delete labels[Number(exerciseId)]
+      rows[slotIdx] = { ...row, candidate_exercise_ids: nextIds, exercise_title_by_id: labels }
+      return { ...prev, combination_slots: rows }
+    })
+  }
+
+  const mergePickedExercisesIntoSlot = (slotIdx, pickedList) => {
+    if (!Array.isArray(pickedList) || !pickedList.length) return
+    const rowNow = (formData.combination_slots || [])[slotIdx] || emptyComboSlotRow()
+    const existingIds = Array.isArray(rowNow.candidate_exercise_ids)
+      ? rowNow.candidate_exercise_ids.map((n) => Number(n)).filter((n) => Number.isFinite(n))
+      : []
+    const ordered = [...existingIds]
+    pickedList.forEach((ex) => {
+      if (ex?.id == null) return
+      const id = Number(ex.id)
+      if (!Number.isFinite(id)) return
+      if (!ordered.includes(id)) ordered.push(id)
+    })
+    let nextIds = ordered
+    if (nextIds.length > MAX_COMBO_CANDIDATES_PER_STATION) {
+      toast.info(
+        `Pro Station höchstens ${MAX_COMBO_CANDIDATES_PER_STATION} Übungen — üblich eine feste Übung; zwei bis drei nur als kleiner Wechsel‑Pool. Überschüssige Auswahl wurde abgeschnitten.`,
+      )
+      nextIds = nextIds.slice(0, MAX_COMBO_CANDIDATES_PER_STATION)
+    }
+    setFormDirty(true)
+    setFormData((prev) => {
+      const rows = [...(prev.combination_slots || [])]
+      const row = rows[slotIdx] || emptyComboSlotRow()
+      const labels =
+        row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object' ? { ...row.exercise_title_by_id } : {}
+      pickedList.forEach((ex) => {
+        if (ex && ex.id != null) {
+          const id = Number(ex.id)
+          const t = (ex.title || '').trim()
+          if (t) labels[id] = t
+        }
+      })
+      rows[slotIdx] = { ...row, candidate_exercise_ids: nextIds, exercise_title_by_id: labels }
+      return { ...prev, combination_slots: rows }
+    })
+  }
+
+  const addSkillRow = () => {
+    const id = skillPick ? parseInt(skillPick, 10) : null
+    if (!id) {
+      toast.error('Fähigkeit wählen')
+      return
+    }
+    if (formData.skills.some((s) => s.skill_id === id)) {
+      toast.info('Bereits zugeordnet')
+      return
+    }
+    updateFormField('skills', [
+      ...formData.skills,
+      {
+        skill_id: id,
+        is_primary: formData.skills.length === 0,
+        intensity: '',
+        required_level: '',
+        target_level: '',
+      },
+    ])
+    setSkillPick('')
+  }
+
+  const setSkillPrimary = (idx) => {
+    updateFormField(
+      'skills',
+      formData.skills.map((s, i) => ({ ...s, is_primary: i === idx })),
+    )
+  }
+
+  const updateSkillField = (idx, field, value) => {
+    updateFormField(
+      'skills',
+      formData.skills.map((s, i) => (i === idx ? { ...s, [field]: value } : s)),
+    )
+  }
+
+  const removeSkillRow = (idx) => {
+    const next = formData.skills.filter((_, i) => i !== idx)
+    if (next.length && !next.some((s) => s.is_primary)) next[0].is_primary = true
+    updateFormField('skills', next)
+  }
+
+  const performSaveAttempt = useCallback(
+    async ({ fromUnsavedDialog = false } = {}) => {
+      if (!formData.title || formData.title.trim().length < 3) {
+        toast.error('Titel mindestens 3 Zeichen')
+        return false
+      }
+      const payloadBase = {
+        ...formData,
+        equipment:
+          typeof formData.equipmentLines === 'string'
+            ? formData.equipmentLines
+                .split(/[\n,]+/)
+                .map((s) => s.trim())
+                .filter(Boolean)
+            : [],
+      }
+      let payload
+      try {
+        payload = buildExerciseApiPayload(payloadBase)
+      } catch (err) {
+        toast.error(err.message)
+        return false
+      }
+      setSaving(true)
+      try {
+        if (isEdit) {
+          const saveOnce = (extras = {}) =>
+            api.updateExercise(exerciseId, buildExerciseApiPayload(payloadBase, extras))
+          try {
+            await saveOnce()
+          } catch (firstErr) {
+            if (
+              firstErr.status === 422 &&
+              firstErr.code === 'OFFICIAL_MEDIA_LIFECYCLE' &&
+              firstErr.payload?.media_assets
+            ) {
+              toast.error(
+                'Speichern nicht möglich: mindestens ein verknüpftes Medium ist nicht aktiv (Papierkorb). ' +
+                  'Bitte Medium wiederherstellen oder aus der Übung entfernen.',
+              )
+              throw firstErr
+            }
+            if (firstErr.status === 422 && firstErr.code === 'OFFICIAL_MEDIA_CONFIRM_REQUIRED') {
+              const promo = (firstErr.payload.assets_need_visibility_promotion || []).length
+              const miss = (firstErr.payload.assets_missing_copyright || []).length
+              let msg = 'Die Übung ist oder wird offiziell. '
+              if (promo > 0) {
+                msg += `${promo} verknüpfte Datei(en) werden dabei plattformweit („offiziell“) freigegeben. `
+              }
+              if (miss > 0) {
+                msg += `${miss} Datei(en) haben noch keinen ausreichenden Copyright-Vermerk (mind. 3 Zeichen). `
+              }
+              msg += 'Fortfahren?'
+              if (!window.confirm(msg)) throw firstErr
+              let defaultCopyright = ''
+              if (miss > 0) {
+                defaultCopyright = window.prompt(
+                  'Copyright-Vermerk für betroffene Dateien ohne Eintrag (mind. 3 Zeichen):',
+                  '© ',
+                )
+                if (!defaultCopyright || String(defaultCopyright).trim().length < 3) {
+                  toast.error('Mindestens 3 Zeichen für den Copyright-Vermerk.')
+                  throw firstErr
+                }
+              }
+              await saveOnce({
+                promote_attached_media_for_official: true,
+                ...(miss > 0 ? { default_official_media_copyright: String(defaultCopyright).trim() } : {}),
+              })
+            } else if (
+              firstErr.status === 422 &&
+              firstErr.code === 'CLUB_MEDIA_COPYRIGHT_REQUIRED' &&
+              firstErr.payload?.media_assets
+            ) {
+              const miss = firstErr.payload.media_assets.length
+              const msg =
+                `Vereinsöffentliche Übungen brauchen bei jeder verknüpften Datei einen Copyright-Vermerk (mind. 3 Zeichen). ` +
+                `${miss} Datei(en) sind noch ohne ausreichenden Vermerk. ` +
+                `Beim Speichern einen gemeinsamen Vermerk für diese Dateien setzen?`
+              if (!window.confirm(msg)) throw firstErr
+              const defaultCopyright = window.prompt(
+                'Copyright-Vermerk für die betroffenen Dateien (mind. 3 Zeichen):',
+                '© ',
+              )
+              if (!defaultCopyright || String(defaultCopyright).trim().length < 3) {
+                toast.error('Mindestens 3 Zeichen für den Copyright-Vermerk.')
+                throw firstErr
+              }
+              await saveOnce({
+                default_club_media_copyright: String(defaultCopyright).trim(),
+              })
+            } else if (firstErr.status === 422 && firstErr.code === 'CLUB_MEDIA_LIFECYCLE') {
+              toast.error(
+                'Speichern nicht möglich: mindestens ein verknüpftes Medium ist nicht aktiv (Papierkorb). Bitte reaktivieren oder entfernen.',
+              )
+              throw firstErr
+            } else {
+              throw firstErr
+            }
+          }
+          const ex = await api.getExercise(exerciseId)
+          setMediaList(ex.media || [])
+          setVariants((ex.variants || []).map(apiVariantToRow))
+          setFormDirty(false)
+          toast.success('Gespeichert.')
+          return true
+        }
+        const created = await api.createExercise(payload)
+        setFormDirty(false)
+        toast.success('Übung angelegt.')
+        if (!fromUnsavedDialog) {
+          navigate(`/exercises/${created.id}/edit`, { replace: true })
+        }
+        return true
+      } catch (err) {
+        toast.error('Fehler beim Speichern: ' + err.message)
+        return false
+      } finally {
+        setSaving(false)
+      }
+    },
+    [exerciseId, formData, isEdit, navigate, toast],
+  )
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    await performSaveAttempt({ fromUnsavedDialog: false })
+  }
+
+  const handleUnsavedDialogSave = async () => {
+    const ok = await performSaveAttempt({ fromUnsavedDialog: true })
+    if (ok) blocker.proceed()
+  }
+
+  const refreshMedia = async () => {
+    if (!exerciseId) return
+    const ex = await api.getExercise(exerciseId)
+    setMediaList(ex.media || [])
+  }
+
+  const attachFromArchive = async (assetId) => {
+    if (!exerciseId) return
+    try {
+      await api.attachExerciseMediaFromAsset(exerciseId, {
+        media_asset_id: assetId,
+        context: 'ablauf',
+        title: '',
+        description: '',
+        is_primary: false,
+      })
+      setArchiveOpen(false)
+      await refreshMedia()
+    } catch (e) {
+      toast.error(e.message || String(e))
+    }
+  }
+
+  const linkedArchiveAssetIds = useMemo(
+    () => new Set((mediaList || []).map((m) => m.media_asset_id).filter(Boolean)),
+    [mediaList],
+  )
+
+  const handleDeleteMedia = async (mid) => {
+    if (
+      !confirm(
+        'Dieses Medium aus der Übung entfernen? Nur die Verknüpfung wird gelöscht. Die Datei bleibt im Archiv, solange sie noch woanders genutzt wird.\n\n' +
+          'Hinweis: Wenn dieser Eintrag noch als Platzhalter im Fließtext steht, zeigt die Vorschau [Medium nicht verfügbar] oder das Speichern der Übung schlägt fehl, bis der Platzhalter entfernt ist.',
+      )
+    ) {
+      return
+    }
+    try {
+      const res = await api.deleteExerciseMedia(exerciseId, mid)
+      await refreshMedia()
+      const oid = res?.orphan_media_asset_id
+      if (oid != null) {
+        if (
+          confirm(
+            'Dieses Archiv-Medium wird danach nirgendwo mehr verwendet. In den Papierkorb (Stufe 1) legen? (Später in der Medienverwaltung wiederherstellbar.)',
+          )
+        ) {
+          await api.postMediaAssetLifecycle(oid, 'trash_soft')
+          await refreshMedia()
+        }
+      }
+    } catch (err) {
+      toast.error(err.message)
+    }
+  }
+
+  const moveMediaRow = async (idx, dir) => {
+    if (!exerciseId) return
+    const j = idx + dir
+    if (j < 0 || j >= mediaList.length) return
+    const next = [...mediaList]
+    const tmp = next[idx]
+    next[idx] = next[j]
+    next[j] = tmp
+    try {
+      await api.reorderExerciseMedia(
+        exerciseId,
+        next.map((x) => x.id),
+      )
+      setMediaList(next)
+    } catch (e) {
+      toast.error(e.message || String(e))
+    }
+  }
+
+  const saveMediaMeta = async (mid) => {
+    if (!exerciseId) return
+    const fld = mediaFields[mid]
+    if (!fld) return
+    setMediaSavingId(mid)
+    try {
+      await api.updateExerciseMedia(exerciseId, mid, {
+        title: fld.title.trim() || null,
+      })
+      await refreshMedia()
+    } catch (e) {
+      toast.error(e.message || String(e))
+    } finally {
+      setMediaSavingId(null)
+    }
+  }
+
+  const refreshVariants = async () => {
+    if (!exerciseId) return
+    const ex = await api.getExercise(exerciseId)
+    setVariants((ex.variants || []).map(apiVariantToRow))
+  }
+
+  const updateVariantField = (id, patch) => {
+    setFormDirty(true)
+    setVariants((prev) => prev.map((v) => (v.id === id ? { ...v, ...patch } : v)))
+  }
+
+  const saveVariantRow = async (row) => {
+    const payload = buildVariantPayloadFromRow(row)
+    if (payload.variant_name.length < 3) {
+      toast.error('Variantenname mindestens 3 Zeichen')
+      return
+    }
+    setVariantSavingId(row.id)
+    try {
+      await api.updateExerciseVariant(exerciseId, row.id, payload)
+      await refreshVariants()
+    } catch (e) {
+      toast.error(e.message || String(e))
+    } finally {
+      setVariantSavingId(null)
+    }
+  }
+
+  const deleteVariantRow = async (id) => {
+    if (!confirm('Variante wirklich löschen?')) return
+    setVariantBusy(true)
+    try {
+      await api.deleteExerciseVariant(exerciseId, id)
+      if (variantEditSelection === id) setVariantEditSelection(null)
+      await refreshVariants()
+    } catch (e) {
+      toast.error(e.message || String(e))
+    } finally {
+      setVariantBusy(false)
+    }
+  }
+
+  const moveVariantRow = async (idx, dir) => {
+    const j = idx + dir
+    if (j < 0 || j >= variants.length) return
+    const next = [...variants]
+    const tmp = next[idx]
+    next[idx] = next[j]
+    next[j] = tmp
+    const ids = next.map((x) => x.id)
+    setVariantBusy(true)
+    try {
+      await api.reorderExerciseVariants(exerciseId, ids)
+      await refreshVariants()
+    } catch (e) {
+      toast.error(e.message || String(e))
+    } finally {
+      setVariantBusy(false)
+    }
+  }
+
+  const createVariantSubmit = async (e) => {
+    e.preventDefault()
+    if (!exerciseId) return
+    const payload = buildVariantPayloadFromRow(variantDraft)
+    if (payload.variant_name.length < 3) {
+      toast.error('Variantenname mindestens 3 Zeichen')
+      return
+    }
+    setVariantBusy(true)
+    try {
+      const created = await api.createExerciseVariant(exerciseId, payload)
+      setVariantDraft(emptyVariantDraft())
+      await refreshVariants()
+      if (created?.id != null) setVariantEditSelection(created.id)
+      else setVariantEditSelection(null)
+    } catch (err) {
+      toast.error(err.message || String(err))
+    } finally {
+      setVariantBusy(false)
+    }
+  }
+
+  const availableSkills = skillsCatalog.filter((s) => !formData.skills.some((x) => x.skill_id === s.id))
+
+  const selectedVariantForEdit =
+    typeof variantEditSelection === 'number' ? variants.find((v) => v.id === variantEditSelection) : null
+  const selectedVariantIdx = selectedVariantForEdit
+    ? variants.findIndex((v) => v.id === selectedVariantForEdit.id)
+    : -1
+
+  if (loading) {
+    return (
+      <div style={{ padding: '2rem', textAlign: 'center' }}>
+        <div className="spinner"></div>
+        <p>Laden...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '12px' }} className="app-page">
+      <div style={{ marginBottom: '12px' }}>
+        <button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
+          ← Übersicht
+        </button>
+        {isEdit && (
+          <button
+            type="button"
+            className="btn btn-secondary"
+            style={{ marginLeft: '8px' }}
+            onClick={() => navigate(`/exercises/${exerciseId}`, { state: { fromExerciseEdit: true } })}
+          >
+            Ansehen
+          </button>
+        )}
+      </div>
+
+      <div className="card">
+        <h1 style={{ marginTop: 0, fontSize: '1.25rem' }}>{isEdit ? 'Übung bearbeiten' : 'Neue Übung'}</h1>
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-row">
+            <label className="form-label">Titel *</label>
+            <input
+              type="text"
+              className="form-input"
+              value={formData.title}
+              onChange={(e) => updateFormField('title', e.target.value)}
+              required
+              minLength={3}
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Kurzbeschreibung</label>
+            <RichTextEditor
+              value={formData.summary}
+              onChange={(html) => updateFormField('summary', html)}
+              placeholder="Kurzbeschreibung (optional)"
+              minHeight="80px"
+              inlineExerciseId={isEdit ? exerciseId : null}
+              linkedExerciseMedia={isEdit ? mediaList : []}
+              onExerciseMediaListChanged={refreshMedia}
+            />
+          </div>
+
+          <div
+            style={{
+              padding: '12px',
+              borderRadius: '8px',
+              border: '1px solid var(--border)',
+              background: 'var(--surface2)',
+              marginBottom: '12px',
+            }}
+          >
+            <h3 style={{ marginTop: 0, marginBottom: '10px', fontSize: '1rem' }}>Übungstyp</h3>
+            <div className="form-row">
+              <label className="form-label">Art</label>
+              <select
+                className="form-input"
+                value={formData.exercise_kind === 'combination' ? 'combination' : 'simple'}
+                onChange={(e) => {
+                  const nk = e.target.value
+                  setFormDirty(true)
+                  setFormData((prev) => ({
+                    ...prev,
+                    exercise_kind: nk,
+                    ...(nk === 'simple'
+                      ? {
+                          method_archetype: '',
+                          method_profile_json: '{}',
+                          combination_slots: [emptyComboSlotRow()],
+                        }
+                      : {}),
+                  }))
+                }}
+              >
+                <option value="simple">Einzelübung</option>
+                <option value="combination">Kombinationsübung (Stationen / Pool)</option>
+              </select>
+            </div>
+            {formData.exercise_kind === 'combination' ? (
+              <>
+                <div className="form-row">
+                  <label className="form-label">Methoden-Archetyp (für Coach &amp; Planung empfohlen)</label>
+                  <select
+                    className="form-input"
+                    value={formData.method_archetype || ''}
+                    onChange={(e) => {
+                      const arch = (e.target.value || '').trim()
+                      const forced = ARCHETYPE_DEFAULT_REP_SERIES_COUNT[arch]
+                      setFormDirty(true)
+                      setFormData((prev) => {
+                        const slots = prev.combination_slots || []
+                        const nextSlots =
+                          forced !== undefined && forced !== null
+                            ? slots.map((row) =>
+                                normalizeAdvanceMode(row.advance_mode) !== 'timed'
+                                  ? {
+                                      ...row,
+                                      rep_series_count: String(Math.max(1, Math.round(Number(forced)))),
+                                    }
+                                  : row,
+                              )
+                            : slots
+                        return { ...prev, method_archetype: arch, combination_slots: nextSlots }
+                      })
+                    }}
+                  >
+                    <option value="">— noch nicht festgelegt —</option>
+                    {COMBINATION_ARCHETYPE_OPTIONS.map((o) => (
+                      <option key={o.id} value={o.id}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                {String(formData.method_archetype || '').trim() === 'station_parcour' ? (
+                  <p
+                    style={{
+                      fontSize: '12px',
+                      color: 'var(--text2)',
+                      margin: '4px 0 10px',
+                      lineHeight: 1.48,
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      background: 'var(--surface)',
+                      border: '1px solid var(--border)',
+                    }}
+                  >
+                    <strong>Parcours / Bahnsystem:</strong> typischerweise starten alle an Station 1 und durchlaufen der
+                    Reihe nach alle Punkte (Geschwindigkeit variabel). Die Stationsreihenfolge unten ist der Ablaufweg;
+                    Zeitangaben pro Station und <strong>Gesamtdurchläufe</strong> im Ablaufprofil strukturieren das
+                    spätere Coaching.
+                  </p>
+                ) : null}
+                <div style={{ paddingTop: '4px', borderTop: '1px dashed var(--border)', marginBottom: '12px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '8px', flexWrap: 'wrap' }}>
+                    <strong style={{ fontSize: '14px' }}>Stationen</strong>
+                    <span style={{ fontSize: '11px', color: 'var(--text3)' }}>
+                      Ablauf = Reihenfolge · ziehen / Pfeile · Einzelübungen · max. {MAX_COMBO_CANDIDATES_PER_STATION}/Station
+                    </span>
+                  </div>
+                  <p style={{ fontSize: '12px', color: 'var(--text2)', margin: '6px 0 12px', lineHeight: 1.48 }}>
+                    Pro Station oft <strong>eine</strong> feste Übung; höchstens <strong>drei</strong> als kleiner Auswahl‑Pool.
+                    Unter <strong>Steuerung</strong> wählen: zeitlich, nach Wiederholungszahl oder ohne Arbeitsuhr (Coach führt).
+                  </p>
+                  {(formData.combination_slots || []).map((row, idx) => {
+                    const candIds = Array.isArray(row.candidate_exercise_ids) ? row.candidate_exercise_ids : []
+                    const comboPoolFull = candIds.length >= MAX_COMBO_CANDIDATES_PER_STATION
+                    const slotAdv = normalizeAdvanceMode(row.advance_mode)
+                    const serieLabel =
+                      slotAdv === 'timed' ? 'Serie' : slotAdv === 'rep' ? 'Wdh. / Serie' : 'Richtwert'
+                    const seriePlaceholder = slotAdv === 'rep' ? '10' : slotAdv === 'manual' ? '–' : '1'
+                    const showMultiSeries = slotAdv === 'rep' || slotAdv === 'manual'
+                    const serienCountUi = parseComboRepSeriesCountUi(row.rep_series_count)
+                    const showInterSeriesPause = showMultiSeries && serienCountUi >= 2
+                    const intraLabel = slotAdv === 'timed' ? 'Pause (s)' : 'Pause zw. Serien'
+                    const lbl =
+                      row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object'
+                        ? row.exercise_title_by_id
+                        : {}
+                    const isDropHere = comboDropTargetIx === idx
+                    return (
+                      <div
+                        key={`combo-slot-${idx}`}
+                        onDragOver={(e) => {
+                          if (!e.dataTransfer?.types?.includes?.(DND_EXERCISE_COMBO_STATION)) return
+                          e.preventDefault()
+                          e.dataTransfer.dropEffect = 'move'
+                          setComboDropTargetIx(idx)
+                        }}
+                        onDragLeave={() => setComboDropTargetIx((cur) => (cur === idx ? null : cur))}
+                        onDrop={(e) => {
+                          const rawFrom = e.dataTransfer.getData(DND_EXERCISE_COMBO_STATION)
+                          const fromI = parseInt(rawFrom, 10)
+                          e.preventDefault()
+                          setComboDropTargetIx(null)
+                          if (!Number.isFinite(fromI)) return
+                          reorderCombinationSlots(fromI, idx)
+                        }}
+                        style={{
+                          marginBottom: '12px',
+                          padding: '12px 14px',
+                          borderRadius: '12px',
+                          border: `1px solid ${isDropHere ? 'var(--accent)' : 'var(--border)'}`,
+                          background: 'var(--surface)',
+                          boxShadow: isDropHere ? '0 0 0 2px var(--accent-soft)' : 'none',
+                        }}
+                      >
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'flex-start', marginBottom: '12px' }}>
+                          <button
+                            type="button"
+                            draggable
+                            onDragStart={(e) => {
+                              e.dataTransfer.effectAllowed = 'move'
+                              e.dataTransfer.setData(DND_EXERCISE_COMBO_STATION, String(idx))
+                            }}
+                            onDragEnd={() => setComboDropTargetIx(null)}
+                            aria-label={`Station ${idx + 1} ziehen`}
+                            title="Ziehen zum Sortieren"
+                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                            style={{ cursor: 'grab', padding: '6px 8px', touchAction: 'none' }}
+                          >
+                            <GripVertical size={18} strokeWidth={2} aria-hidden />
+                          </button>
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                            <button
+                              type="button"
+                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                              aria-label="Station nach oben"
+                              disabled={idx === 0}
+                              onClick={() => reorderCombinationSlots(idx, idx - 1)}
+                            >
+                              ▲
+                            </button>
+                            <button
+                              type="button"
+                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                              aria-label="Station nach unten"
+                              disabled={idx === (formData.combination_slots || []).length - 1}
+                              onClick={() => reorderCombinationSlots(idx, idx + 2)}
+                            >
+                              ▼
+                            </button>
+                          </div>
+                          <div className="form-row" style={{ flex: '1 1 200px', marginBottom: 0 }}>
+                            <label className="form-label" style={{ fontSize: '12px' }}>
+                              Name (St.&nbsp;{idx + 1})
+                            </label>
+                            <input
+                              type="text"
+                              className="form-input"
+                              value={row.title || ''}
+                              placeholder="z.&nbsp;B. Liegestütz"
+                              onChange={(e) => patchComboSlotRow(idx, { title: e.target.value })}
+                            />
+                          </div>
+                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'flex-end' }}>
+                            <button
+                              type="button"
+                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                              disabled={comboPoolFull}
+                              title={
+                                comboPoolFull
+                                  ? `Max. ${MAX_COMBO_CANDIDATES_PER_STATION} Übungen — eine entfernen, um weitere zu wählen.`
+                                  : 'Einzelübung zur Station hinzufügen'
+                              }
+                              onClick={() => setComboStationPickerIx(idx)}
+                            >
+                              + Übung
+                            </button>
+                            <button
+                              type="button"
+                              className="btn framework-ctrl framework-ctrl--xs"
+                              style={{ fontSize: '12px' }}
+                              title="Diese Station entfernen"
+                              onClick={() => {
+                                const prev = formData.combination_slots || []
+                                const next = prev.filter((_, j) => j !== idx)
+                                updateFormField('combination_slots', next.length ? next : [emptyComboSlotRow()])
+                              }}
+                            >
+                              Entfernen
+                            </button>
+                          </div>
+                        </div>
+                        <div style={{ marginBottom: '12px' }}>
+                          <span className="form-label" style={{ fontSize: '11px', display: 'block', marginBottom: '6px' }}>
+                            Übungen ({candIds.length}/{MAX_COMBO_CANDIDATES_PER_STATION})
+                          </span>
+                          {candIds.length === 0 ? (
+                            <p style={{ fontSize: '12px', color: 'var(--text3)', margin: 0 }}>
+                              Mindestens eine Übung — mit „+ Übung“ wählen.
+                            </p>
+                          ) : (
+                            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+                              {candIds.map((id) => (
+                                <li
+                                  key={`${idx}-c-${id}`}
+                                  style={{
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    padding: '4px 10px',
+                                    borderRadius: '999px',
+                                    border: '1px solid var(--border)',
+                                    background: 'var(--surface2)',
+                                    fontSize: '12px',
+                                  }}
+                                >
+                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '14rem' }} title={`#${id}`}>
+                                    {(lbl[id] || lbl[String(id)] || '').trim() || `Übung #${id}`}
+                                  </span>
+                                  <button
+                                    type="button"
+                                    className="tu-icon-btn"
+                                    aria-label={`Übung ${id} entfernen`}
+                                    title="Entfernen"
+                                    onClick={() => removeCandidateFromSlot(idx, id)}
+                                  >
+                                    ✗
+                                  </button>
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </div>
+                        <div className="form-row" style={{ marginBottom: '8px', maxWidth: '22rem' }}>
+                          <label className="form-label" style={{ fontSize: '11px' }}>
+                            Steuerung
+                          </label>
+                          <select
+                            className="form-input"
+                            style={{ fontSize: '0.8125rem' }}
+                            value={slotAdv}
+                            onChange={(e) => {
+                              const m = normalizeAdvanceMode(e.target.value)
+                              const patch = { advance_mode: m }
+                              if (m !== 'timed') patch.load_sec = ''
+                              if (m === 'rep' || m === 'manual') {
+                                const curSer = String(row.rep_series_count ?? '').trim()
+                                if (!curSer) {
+                                  patch.rep_series_count = String(
+                                    defaultRepSeriesCountForArchetype(formData.method_archetype || ''),
+                                  )
+                                }
+                              }
+                              patchComboSlotRow(idx, patch)
+                            }}
+                          >
+                            <option value="timed">Zeit (Arbeit in Sekunden)</option>
+                            <option value="rep">Wiederholungen (Ziel)</option>
+                            <option value="manual">Coach (Weiter nach Freigabe)</option>
+                          </select>
+                        </div>
+                        <p style={{ fontSize: '11px', color: 'var(--text3)', margin: '0 0 10px', lineHeight: 1.42 }}>
+                          {slotAdv === 'timed'
+                            ? 'Arbeit (s): geplantes Ende nach Countdown möglich. Serie: Wiederholungen ohne Stationswechsel innerhalb einer Phase.'
+                            : slotAdv === 'rep'
+                              ? 'Ohne Pflicht-Arbeits-Timer: Ziel über Wiederholungen. Ab zwei Serien: Pause zwischen diesen Serien; sonst nur Wechsel zur nächsten Station.'
+                              : 'Coach: keine feste Arbeitsuhr — Fortschritt später per Tipp. Ab 2 Serien: Pause zwischen Serien; sonst nur Wechsel zur nächsten Station zeitlich planen.'}
+                        </p>
+                        <div
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(5.25rem, 1fr))',
+                            gap: '8px 10px',
+                            alignItems: 'end',
+                          }}
+                        >
+                          {slotAdv === 'timed' ? (
+                            <div className="form-row" style={{ marginBottom: 0 }}>
+                              <label className="form-label" style={{ fontSize: '10px' }}>
+                                Arbeit (s)
+                              </label>
+                              <input
+                                type="number"
+                                min={0}
+                                className="form-input"
+                                style={comboTinyNumberInputSx}
+                                placeholder="–"
+                                value={row.load_sec || ''}
+                                onChange={(e) => patchComboSlotRow(idx, { load_sec: e.target.value })}
+                              />
+                            </div>
+                          ) : null}
+                          <div className="form-row" style={{ marginBottom: 0 }}>
+                            <label className="form-label" style={{ fontSize: '10px' }}>
+                              {serieLabel}
+                            </label>
+                            <input
+                              type="number"
+                              min={slotAdv === 'rep' ? 1 : undefined}
+                              className="form-input"
+                              style={comboTinyNumberInputSx}
+                              placeholder={seriePlaceholder}
+                              value={row.consecutive_reps || ''}
+                              onChange={(e) => patchComboSlotRow(idx, { consecutive_reps: e.target.value })}
+                            />
+                          </div>
+                          {showMultiSeries ? (
+                            <div className="form-row" style={{ marginBottom: 0 }}>
+                              <label className="form-label" style={{ fontSize: '10px' }} title="Wie oft die angegebene Wdh.-Zahl hintereinander (mit Pause zw. Serien)?">
+                                Serien
+                              </label>
+                              <input
+                                type="number"
+                                min={slotAdv === 'rep' ? 1 : undefined}
+                                className="form-input"
+                                style={comboTinyNumberInputSx}
+                                placeholder="1"
+                                value={row.rep_series_count || ''}
+                                onChange={(e) => {
+                                  let rawSer = e.target.value.trim()
+                                  if (rawSer === '') rawSer = '1'
+                                  const pn = parseInt(String(rawSer).trim(), 10)
+                                  const patch = { rep_series_count: rawSer }
+                                  if (!Number.isFinite(pn) || pn < 2) patch.intra_rep_rest_sec = ''
+                                  patchComboSlotRow(idx, patch)
+                                }}
+                              />
+                            </div>
+                          ) : null}
+                          {slotAdv === 'timed' || showInterSeriesPause ? (
+                            <div className="form-row" style={{ marginBottom: 0 }}>
+                              <label className="form-label" style={{ fontSize: '10px' }}>
+                                {intraLabel}
+                              </label>
+                              <input
+                                type="number"
+                                min={0}
+                                className="form-input"
+                                style={comboTinyNumberInputSx}
+                                placeholder="–"
+                                value={row.intra_rep_rest_sec || ''}
+                                onChange={(e) => patchComboSlotRow(idx, { intra_rep_rest_sec: e.target.value })}
+                              />
+                            </div>
+                          ) : null}
+                          <div className="form-row" style={{ marginBottom: 0 }}>
+                            <label className="form-label" style={{ fontSize: '10px' }}>
+                              Wechsel (s)
+                            </label>
+                            <input
+                              type="number"
+                              min={0}
+                              className="form-input"
+                              style={comboTinyNumberInputSx}
+                              placeholder="–"
+                              value={row.transition_after_sec || ''}
+                              onChange={(e) => patchComboSlotRow(idx, { transition_after_sec: e.target.value })}
+                            />
+                          </div>
+                        </div>
+                        {showMultiSeries && serienCountUi < 2 ? (
+                          <p style={{ fontSize: '10px', color: 'var(--text3)', margin: '6px 0 0', lineHeight: 1.38 }}>
+                            <strong>Wechsel (s)</strong> = Pause bis zur <strong>nächsten Station</strong>. Feld „Pause zw.
+                            Serien“ erscheint erst ab&nbsp;2 Serien (sonst keine Pause zwischen zwei Blöcken nötig).
+                          </p>
+                        ) : null}
+                      </div>
+                    )
+                  })}
+                  <div
+                    onDragOver={(e) => {
+                      if (!e.dataTransfer?.types?.includes?.(DND_EXERCISE_COMBO_STATION)) return
+                      e.preventDefault()
+                      e.dataTransfer.dropEffect = 'move'
+                    }}
+                    onDrop={(e) => {
+                      const rawFrom = e.dataTransfer.getData(DND_EXERCISE_COMBO_STATION)
+                      const fromI = parseInt(rawFrom, 10)
+                      e.preventDefault()
+                      setComboDropTargetIx(null)
+                      if (!Number.isFinite(fromI)) return
+                      const len = (formData.combination_slots || []).length
+                      reorderCombinationSlots(fromI, len)
+                    }}
+                    style={{
+                      padding: '10px',
+                      textAlign: 'center',
+                      fontSize: '11px',
+                      color: 'var(--text3)',
+                      border: '1px dashed var(--border)',
+                      borderRadius: '10px',
+                      marginBottom: '8px',
+                    }}
+                  >
+                    Hier ablegen zum Anhängen am Ende der Reihenfolge
+                  </div>
+                  <button
+                    type="button"
+                    className="btn btn-secondary"
+                    style={{ fontSize: '12px', marginTop: '4px' }}
+                    onClick={() => updateFormField('combination_slots', [...(formData.combination_slots || []), emptyComboSlotRow()])}
+                  >
+                    + Station
+                  </button>
+                </div>
+                <div className="form-row">
+                  <label className="form-label">Ablaufprofil (Runden &amp; global)</label>
+                  <CombinationMethodProfileEditor
+                    methodArchetype={formData.method_archetype || ''}
+                    methodProfileJson={formData.method_profile_json || '{}'}
+                    onChangeMethodProfileJson={(s) => updateFormField('method_profile_json', s)}
+                    comboSlotsOutline={(formData.combination_slots || []).map((r, i) => ({
+                      slot_index: i,
+                      title: r.title || '',
+                    }))}
+                    omitPerSlotTiming
+                  />
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Ziel *</label>
+            <RichTextEditor
+              value={formData.goal}
+              onChange={(html) => updateFormField('goal', html)}
+              placeholder="Trainingsziel"
+              minHeight="120px"
+              inlineExerciseId={isEdit ? exerciseId : null}
+              linkedExerciseMedia={isEdit ? mediaList : []}
+              onExerciseMediaListChanged={refreshMedia}
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Durchführung *</label>
+            <RichTextEditor
+              value={formData.execution}
+              onChange={(html) => updateFormField('execution', html)}
+              placeholder="Ablauf Schritt für Schritt"
+              minHeight="180px"
+              inlineExerciseId={isEdit ? exerciseId : null}
+              linkedExerciseMedia={isEdit ? mediaList : []}
+              onExerciseMediaListChanged={refreshMedia}
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Vorbereitung / Aufbau</label>
+            <RichTextEditor
+              value={formData.preparation}
+              onChange={(html) => updateFormField('preparation', html)}
+              placeholder="Matten, Raum, …"
+              minHeight="100px"
+              inlineExerciseId={isEdit ? exerciseId : null}
+              linkedExerciseMedia={isEdit ? mediaList : []}
+              onExerciseMediaListChanged={refreshMedia}
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Hinweise für Trainer</label>
+            <RichTextEditor
+              value={formData.trainer_notes}
+              onChange={(html) => updateFormField('trainer_notes', html)}
+              placeholder="Sicherheit, Varianten-Hinweise, …"
+              minHeight="100px"
+              inlineExerciseId={isEdit ? exerciseId : null}
+              linkedExerciseMedia={isEdit ? mediaList : []}
+              onExerciseMediaListChanged={refreshMedia}
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Material (eine Zeile oder kommagetrennt)</label>
+            <textarea
+              className="form-input"
+              rows={3}
+              value={formData.equipmentLines}
+              onChange={(e) => updateFormField('equipmentLines', e.target.value)}
+              placeholder="Matten&#10;Pratzen"
+            />
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+            <div className="form-row">
+              <label className="form-label">Dauer Min</label>
+              <input
+                type="number"
+                className="form-input"
+                value={formData.duration_min}
+                onChange={(e) =>
+                  updateFormField('duration_min', e.target.value ? parseInt(e.target.value, 10) : '')
+                }
+              />
+            </div>
+            <div className="form-row">
+              <label className="form-label">Dauer Max</label>
+              <input
+                type="number"
+                className="form-input"
+                value={formData.duration_max}
+                onChange={(e) =>
+                  updateFormField('duration_max', e.target.value ? parseInt(e.target.value, 10) : '')
+                }
+              />
+            </div>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+            <div className="form-row">
+              <label className="form-label">Gruppe Min</label>
+              <input
+                type="number"
+                className="form-input"
+                value={formData.group_size_min}
+                onChange={(e) =>
+                  updateFormField('group_size_min', e.target.value ? parseInt(e.target.value, 10) : '')
+                }
+              />
+            </div>
+            <div className="form-row">
+              <label className="form-label">Gruppe Max</label>
+              <input
+                type="number"
+                className="form-input"
+                value={formData.group_size_max}
+                onChange={(e) =>
+                  updateFormField('group_size_max', e.target.value ? parseInt(e.target.value, 10) : '')
+                }
+              />
+            </div>
+          </div>
+
+          <MultiAssocBlock
+            title="Fokusbereiche (0…n, ein „primär“)"
+            rows={formData.focus_areas_multi}
+            setRows={(r) => updateFormField('focus_areas_multi', r)}
+            options={focusAreas}
+            idKey="focus_area_id"
+            emptyLabel="Keine Zuordnung — optional „+ Eintrag“."
+          />
+
+          <MultiAssocBlock
+            title="Stilrichtungen (0…n, z. B. Shotokan)"
+            rows={formData.training_styles_multi}
+            setRows={(r) => updateFormField('training_styles_multi', r)}
+            options={styleDirections.map((sd) => ({
+              ...sd,
+              name: sd.parent_style_name ? `${sd.name} (${sd.parent_style_name})` : sd.name,
+            }))}
+            idKey="training_style_id"
+            emptyLabel="Keine Stilrichtung gewählt."
+          />
+
+          <MultiAssocBlock
+            title="Trainingsstil (0…n, z. B. Breitensport / Leistungssport)"
+            rows={formData.training_types_multi}
+            setRows={(r) => updateFormField('training_types_multi', r)}
+            options={trainingTypes}
+            idKey="training_type_id"
+            emptyLabel="Kein Trainingsstil gewählt."
+          />
+
+          <MultiAssocBlock
+            title="Zielgruppen (0…n)"
+            rows={formData.target_groups_multi}
+            setRows={(r) => updateFormField('target_groups_multi', r)}
+            options={targetGroups}
+            idKey="target_group_id"
+            emptyLabel="Keine Zielgruppe gewählt."
+          />
+
+          <div className="form-row">
+            <label className="form-label">Fähigkeiten (je Übung mehrere, mit Niveau)</label>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '10px' }}>
+              <select
+                className="form-input"
+                style={{ flex: '1 1 200px' }}
+                value={skillPick}
+                onChange={(e) => setSkillPick(e.target.value)}
+              >
+                <option value="">Fähigkeit wählen…</option>
+                {availableSkills.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name} ({s.category})
+                  </option>
+                ))}
+              </select>
+              <button type="button" className="btn btn-secondary" onClick={addSkillRow}>
+                Hinzufügen
+              </button>
+            </div>
+            {formData.skills.map((row, idx) => {
+              const sk = skillsCatalog.find((s) => s.id === row.skill_id)
+              return (
+                <div key={`${row.skill_id}-${idx}`} className="skills-editor-row">
+                  <div>
+                    <strong style={{ fontSize: '14px' }}>{sk?.name || `Skill #${row.skill_id}`}</strong>
+                    {sk?.category && (
+                      <span style={{ color: 'var(--text2)', fontSize: '12px', marginLeft: '6px' }}>
+                        {sk.category}
+                      </span>
+                    )}
+                  </div>
+                  <label style={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                    <input
+                      type="radio"
+                      name="skill-primary"
+                      checked={row.is_primary}
+                      onChange={() => setSkillPrimary(idx)}
+                    />
+                    primär
+                  </label>
+                  <select
+                    className="form-input"
+                    value={row.intensity || ''}
+                    onChange={(e) => updateSkillField(idx, 'intensity', e.target.value)}
+                  >
+                    {INTENSITY_OPTIONS.map((o) => (
+                      <option key={o.value || 'i'} value={o.value}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                  <select
+                    className="form-input"
+                    value={row.required_level || ''}
+                    onChange={(e) => updateSkillField(idx, 'required_level', e.target.value)}
+                  >
+                    {SKILL_LEVEL_OPTIONS.map((o) => (
+                      <option key={`r-${o.value}`} value={o.value}>
+                        von {o.label}
+                      </option>
+                    ))}
+                  </select>
+                  <select
+                    className="form-input"
+                    value={row.target_level || ''}
+                    onChange={(e) => updateSkillField(idx, 'target_level', e.target.value)}
+                  >
+                    {SKILL_LEVEL_OPTIONS.map((o) => (
+                      <option key={`t-${o.value}`} value={o.value}>
+                        bis {o.label}
+                      </option>
+                    ))}
+                  </select>
+                  <button type="button" className="btn" style={{ fontSize: '12px', padding: '4px 8px' }} onClick={() => removeSkillRow(idx)}>
+                    Entf.
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+            <div className="form-row">
+              <label className="form-label">Sichtbarkeit</label>
+              <select
+                className="form-input"
+                value={formData.visibility}
+                onChange={(e) => updateFormField('visibility', e.target.value)}
+              >
+                <option value="private">Privat</option>
+                <option value="club">Verein</option>
+                {isSuperadmin ? <option value="official">Offiziell</option> : null}
+              </select>
+            </div>
+            <div className="form-row">
+              <label className="form-label">Status</label>
+              <select
+                className="form-input"
+                value={formData.status}
+                onChange={(e) => updateFormField('status', e.target.value)}
+              >
+                <option value="draft">Entwurf</option>
+                <option value="in_review">In Prüfung</option>
+                <option value="approved">Freigegeben</option>
+                <option value="archived">Archiviert</option>
+              </select>
+            </div>
+          </div>
+
+          {formData.visibility === 'club' && visibilityClubChoices.length > 0 ? (
+            <div className="form-row" style={{ marginTop: '10px' }}>
+              <label className="form-label">Verein (Sichtbarkeit)</label>
+              <select
+                className="form-input"
+                value={formData.club_id != null && formData.club_id !== '' ? String(formData.club_id) : ''}
+                onChange={(e) => {
+                  const v = e.target.value
+                  updateFormField('club_id', v === '' ? null : Number(v))
+                }}
+              >
+                {visibilityClubChoices.map((c) => (
+                  <option key={c.id} value={String(c.id)}>
+                    {(c.name || '').trim() || `Verein #${c.id}`}
+                  </option>
+                ))}
+              </select>
+              <p style={{ margin: '6px 0 0', fontSize: '12px', color: 'var(--text3)', lineHeight: 1.4 }}>
+                Standard ist der aktive Verein aus der Navigation. Bei Plattform-Admins sind alle Vereine wählbar.
+              </p>
+            </div>
+          ) : null}
+
+          <div style={{ marginTop: '16px' }}>
+            <button type="submit" className="btn btn-primary" disabled={saving}>
+              {saving ? 'Speichern…' : isEdit ? 'Speichern' : 'Anlegen & weiter'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {isEdit && formData.exercise_kind !== 'combination' && (
+        <details ref={variantsDetailsRef} className="card exercise-variants-details" style={{ marginTop: '16px' }}>
+          <summary className="exercise-variants-summary">
+            <span className="exercise-variants-summary__title">Übungsvarianten</span>
+            <span className="exercise-variants-summary__badge">
+              {variants.length === 0
+                ? 'keine'
+                : `${variants.length} ${variants.length === 1 ? 'Variante' : 'Varianten'}`}
+            </span>
+          </summary>
+          <div className="exercise-variants-details__body">
+            <p className="exercise-variants-hint">
+              Pro Durchgang nur eine Variante bearbeiten – weniger Scrollen. Reihenfolge entspricht Planung und Auswahl im
+              Training; „Voraussetzung“ nutzt ihr später für Progressions-Serien.
+            </p>
+
+            {variants.length > 0 && (
+              <div className="form-row">
+                <label className="form-label" htmlFor="variant-edit-select">
+                  Variante auswählen
+                </label>
+                <select
+                  id="variant-edit-select"
+                  className="form-input"
+                  value={
+                    variantEditSelection === 'new'
+                      ? 'new'
+                      : variantEditSelection == null
+                        ? ''
+                        : String(variantEditSelection)
+                  }
+                  onChange={(e) => {
+                    const val = e.target.value
+                    if (val === '') setVariantEditSelection(null)
+                    else if (val === 'new') setVariantEditSelection('new')
+                    else setVariantEditSelection(parseInt(val, 10))
+                  }}
+                >
+                  <option value="">— nicht bearbeiten —</option>
+                  {variants.map((v) => (
+                    <option key={v.id} value={v.id}>
+                      {(v.variant_name && String(v.variant_name).trim()) || `Variante #${v.id}`}
+                    </option>
+                  ))}
+                  <option value="new">+ Neue Variante anlegen…</option>
+                </select>
+              </div>
+            )}
+
+            {variants.length === 0 && (
+              <p style={{ fontSize: '13px', color: 'var(--text3)', marginBottom: '10px' }}>
+                Noch keine Varianten – optional für andere Ausführung, Dauer oder Material in Planung und Training.
+              </p>
+            )}
+
+            {variants.length === 0 && variantEditSelection !== 'new' && (
+              <button type="button" className="btn btn-secondary" onClick={() => setVariantEditSelection('new')}>
+                Erste Variante anlegen
+              </button>
+            )}
+
+            {variantEditSelection === 'new' && (
+              <form
+                className="exercise-variant-single-form"
+                onSubmit={createVariantSubmit}
+                style={{ marginTop: '14px', paddingTop: '14px', borderTop: '1px solid var(--border)' }}
+              >
+                <h3 style={{ marginTop: 0, fontSize: '1rem' }}>Neue Variante</h3>
+                <ExerciseVariantFields
+                  row={variantDraft}
+                  onPatch={(patch) => {
+                    setFormDirty(true)
+                    setVariantDraft((d) => ({ ...d, ...patch }))
+                  }}
+                  prerequisiteOthers={variants}
+                  rteMinHeight="110px"
+                  inlineExerciseId={isEdit ? exerciseId : null}
+                  linkedExerciseMedia={isEdit ? mediaList : []}
+                  onExerciseMediaListChanged={refreshMedia}
+                />
+                <button type="submit" className="btn btn-primary" style={{ marginTop: '10px' }} disabled={variantBusy}>
+                  {variantBusy ? 'Anlegen…' : 'Variante anlegen'}
+                </button>
+              </form>
+            )}
+
+            {selectedVariantForEdit && (
+              <div
+                className="exercise-variant-single-form"
+                style={{ marginTop: '14px', paddingTop: '14px', borderTop: '1px solid var(--border)' }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '8px',
+                    alignItems: 'center',
+                    marginBottom: '12px',
+                  }}
+                >
+                  <span style={{ fontSize: '12px', color: 'var(--text3)' }}>
+                    Pos. {selectedVariantIdx + 1} von {variants.length}
+                  </span>
+                  <button
+                    type="button"
+                    className="btn btn-secondary"
+                    style={{ fontSize: '11px', padding: '4px 8px' }}
+                    disabled={variantBusy || selectedVariantIdx <= 0}
+                    onClick={() => moveVariantRow(selectedVariantIdx, -1)}
+                  >
+                    Nach oben
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-secondary"
+                    style={{ fontSize: '11px', padding: '4px 8px' }}
+                    disabled={variantBusy || selectedVariantIdx >= variants.length - 1}
+                    onClick={() => moveVariantRow(selectedVariantIdx, 1)}
+                  >
+                    Nach unten
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-primary"
+                    style={{ marginLeft: 'auto', fontSize: '12px' }}
+                    disabled={variantSavingId === selectedVariantForEdit.id || variantBusy}
+                    onClick={() => saveVariantRow(selectedVariantForEdit)}
+                  >
+                    {variantSavingId === selectedVariantForEdit.id ? 'Speichern…' : 'Speichern'}
+                  </button>
+                  <button
+                    type="button"
+                    className="btn"
+                    style={{ fontSize: '12px', background: 'var(--danger)', color: '#fff', border: 'none' }}
+                    disabled={variantBusy}
+                    onClick={() => deleteVariantRow(selectedVariantForEdit.id)}
+                  >
+                    Löschen
+                  </button>
+                </div>
+                <ExerciseVariantFields
+                  row={selectedVariantForEdit}
+                  onPatch={(patch) => updateVariantField(selectedVariantForEdit.id, patch)}
+                  prerequisiteOthers={variants.filter((o) => o.id !== selectedVariantForEdit.id)}
+                  rteMinHeight="110px"
+                  inlineExerciseId={isEdit ? exerciseId : null}
+                  linkedExerciseMedia={isEdit ? mediaList : []}
+                  onExerciseMediaListChanged={refreshMedia}
+                />
+              </div>
+            )}
+
+            {variants.length > 0 && variantEditSelection == null && (
+              <p style={{ fontSize: '13px', color: 'var(--text3)', marginTop: '12px', marginBottom: 0 }}>
+                Wähle eine Variante zum Bearbeiten oder „Neue Variante anlegen…“.
+              </p>
+            )}
+          </div>
+        </details>
+      )}
+
+      {isEdit && formData.exercise_kind !== 'combination' && (
+        <details className="card exercise-variants-details" style={{ marginTop: '16px' }}>
+          <summary className="exercise-variants-summary">
+            <span className="exercise-variants-summary__title">Progressionsgraph</span>
+            <span className="exercise-variants-summary__badge">Übung → Übung</span>
+          </summary>
+          <div className="exercise-variants-details__body">
+            <ExerciseProgressionGraphPanel anchorExerciseId={exerciseId} anchorTitle={formData.title} />
+          </div>
+        </details>
+      )}
+
+      {isEdit && (
+        <div className="card" style={{ marginTop: '16px' }}>
+          <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Medien</h2>
+          <p style={{ color: 'var(--text2)', fontSize: '13px', marginBottom: '6px' }}>
+            Neue Uploads oder Embeds über die Textfeld-Symbolleiste („Medien im Text“ / „Embed im Text“). Hier
+            verwaltest du Verknüpfungen — Kachel in ein Textfeld ziehen, um sie an der Cursorposition einzufügen
+            (mittlere Darstellung).
+          </p>
+          <p style={{ color: 'var(--text3)', fontSize: '12px', marginTop: 0 }}>
+            Max. 10 Medien pro Übung.
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '8px',
+              alignItems: 'center',
+              marginTop: '10px',
+            }}
+          >
+            <button type="button" className="btn btn-secondary" onClick={() => setArchiveOpen(true)}>
+              Aus Archiv verknüpfen…
+            </button>
+            <Link to="/media" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
+              Medienbibliothek
+            </Link>
+          </div>
+          {mediaList.length > 0 && (
+            <ul className="exercise-edit-media-strip">
+              {mediaList.map((m, idx) => {
+                const cap =
+                  (m.title || '').trim() ||
+                  (m.original_filename || '').trim() ||
+                  (m.embed_url ? String(m.embed_url).replace(/^https?:\/\//i, '').slice(0, 80) : '')
+                const sub = [m.media_type, m.embed_platform].filter(Boolean).join(' · ') || 'Medium'
+                const payloadCaption = (
+                  [m.title, m.original_filename].find((x) => typeof x === 'string' && x.trim()) || ''
+                ).trim()
+                return (
+                  <li key={m.id} className="exercise-edit-media-strip__item">
+                    <div className="exercise-edit-media-strip__lead">
+                      {!m.embed_url ? (
+                        <ExerciseMediaThumbTile exerciseId={exerciseId} media={m} onOpenPreview={setMediaPreview} size={76} />
+                      ) : (
+                        <div
+                          className="exercise-edit-media-strip__embed-badge exercise-edit-media-strip__embed-badge--solo"
+                          aria-hidden
+                        >
+                          {m.embed_platform || 'Embed'}
+                        </div>
+                      )}
+                      <div
+                        className="exercise-edit-media-strip__handle"
+                        title="Mit Drag und Drop in ein Textfeld ziehen"
+                        draggable
+                        onDragStart={(e) => {
+                          try {
+                            e.dataTransfer.setData(
+                              SHINKAN_EXERCISE_MEDIA_DRAG_MIME,
+                              buildExerciseMediaDragPayload(m.id, payloadCaption),
+                            )
+                            e.dataTransfer.effectAllowed = 'copy'
+                          } catch (_) {
+                            /* ignore */
+                          }
+                        }}
+                      >
+                        ⣿<span className="exercise-edit-media-strip__handle-text"> Ziehen</span>
+                      </div>
+                    </div>
+                    <div className="exercise-edit-media-strip__body">
+                      <div className="exercise-edit-media-strip__headline">
+                        <span style={{ fontSize: '12px', color: 'var(--text3)' }}>
+                          #{m.id} · {sub}
+                        </span>
+                      </div>
+                      <div style={{ fontSize: '13px', color: 'var(--text2)', lineHeight: 1.35 }}>{cap || '—'}</div>
+                      <div className="exercise-edit-media-strip__toolbar">
+                        <input
+                          type="text"
+                          className="form-input exercise-edit-media-strip__title"
+                          placeholder="Titel (wird in der Vorschau und im Platzhalter genutzt)"
+                          value={(mediaFields[m.id] || {}).title ?? ''}
+                          onChange={(e) =>
+                            setMediaFields((prev) => ({
+                              ...prev,
+                              [m.id]: {
+                                title: e.target.value,
+                              },
+                            }))
+                          }
+                        />
+                      </div>
+                      <div className="exercise-edit-media-strip__actions">
+                        {mediaList.length > 1 && (
+                          <>
+                            <button
+                              type="button"
+                              className="btn btn-secondary"
+                              style={{ fontSize: '11px', padding: '4px 8px' }}
+                              disabled={idx === 0}
+                              onClick={() => moveMediaRow(idx, -1)}
+                              title="Nach oben"
+                            >
+                              ↑
+                            </button>
+                            <button
+                              type="button"
+                              className="btn btn-secondary"
+                              style={{ fontSize: '11px', padding: '4px 8px' }}
+                              disabled={idx >= mediaList.length - 1}
+                              onClick={() => moveMediaRow(idx, 1)}
+                              title="Nach unten"
+                            >
+                              ↓
+                            </button>
+                          </>
+                        )}
+                        <button
+                          type="button"
+                          className="btn btn-primary"
+                          style={{ fontSize: '12px', padding: '4px 10px' }}
+                          disabled={mediaSavingId === m.id}
+                          onClick={() => saveMediaMeta(m.id)}
+                        >
+                          {mediaSavingId === m.id ? '…' : 'Speichern'}
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          style={{ fontSize: '12px', padding: '4px 10px' }}
+                          onClick={() => handleDeleteMedia(m.id)}
+                        >
+                          Entfernen
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+          <p style={{ color: 'var(--text3)', fontSize: '12px', marginTop: mediaList.length ? '12px' : 0 }}>
+            Verknüpfungen bleiben nötig (u. a. Zugriff, Orphan-Hinweise): Im Fließtext verweist du gezielt über
+            Platzhalter. Ohne Verknüpfung gäbe es keine exercise_media-ID zum Einbetten.
+          </p>
+          {archiveOpen && (
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-label="Medienarchiv"
+              style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(0,0,0,0.5)',
+                zIndex: 1000,
+                overflow: 'auto',
+                padding: '16px',
+              }}
+              onClick={() => setArchiveOpen(false)}
+              onKeyDown={(e) => e.key === 'Escape' && setArchiveOpen(false)}
+            >
+              <div
+                className="card"
+                style={{
+                  maxWidth: 560,
+                  margin: '4vh auto',
+                  maxHeight: '88vh',
+                  overflow: 'auto',
+                  position: 'relative',
+                }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <h3 style={{ marginTop: 0, fontSize: '1.05rem' }}>Medienarchiv</h3>
+                <input
+                  type="search"
+                  className="form-input"
+                  placeholder="Suche Dateiname…"
+                  value={archiveQ}
+                  onChange={(e) => setArchiveQ(e.target.value)}
+                  style={{ marginBottom: '8px' }}
+                />
+                {archiveLoading && <p style={{ fontSize: '13px', color: 'var(--text3)' }}>Laden…</p>}
+                {archiveError && <p style={{ fontSize: '13px', color: 'var(--danger)' }}>{archiveError}</p>}
+                {!archiveLoading && !archiveError && archiveItems.length === 0 && (
+                  <p style={{ fontSize: '13px', color: 'var(--text3)' }}>Keine Treffer.</p>
+                )}
+                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+                  {archiveItems.map((a) => {
+                    const already = linkedArchiveAssetIds.has(a.id)
+                    return (
+                    <li
+                      key={a.id}
+                      style={{
+                        display: 'flex',
+                        gap: '10px',
+                        alignItems: 'center',
+                        padding: '8px 0',
+                        borderBottom: '1px solid var(--border)',
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: 56,
+                          height: 56,
+                          flexShrink: 0,
+                          borderRadius: '6px',
+                          overflow: 'hidden',
+                          background: 'var(--surface2, rgba(127,127,127,0.12))',
+                          border: '1px solid var(--border)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {a.mime_type?.startsWith('image/') ? (
+                          <img
+                            alt=""
+                            src={resolveMediaAssetFileUrl(a.id)}
+                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                          />
+                        ) : a.mime_type?.startsWith('video/') ? (
+                          <span style={{ fontSize: '18px', opacity: 0.75 }} aria-hidden>
+                            ▶
+                          </span>
+                        ) : (
+                          <span style={{ fontSize: '10px', color: 'var(--text2)', padding: '2px', textAlign: 'center' }}>
+                            PDF
+                          </span>
+                        )}
+                      </div>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: '13px', fontWeight: 600, wordBreak: 'break-word' }}>
+                          {a.original_filename || `Asset #${a.id}`}
+                        </div>
+                        <div style={{ fontSize: '11px', color: 'var(--text3)', marginTop: '2px' }}>
+                          {a.visibility} · {a.mime_type || '—'}{' '}
+                          {a.byte_size != null ? `· ${(a.byte_size / 1024).toFixed(0)} KB` : ''}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="btn btn-primary"
+                        style={{ fontSize: '12px' }}
+                        disabled={already}
+                        title={already ? 'Schon mit dieser Übung verknüpft' : ''}
+                        onClick={() => !already && attachFromArchive(a.id)}
+                      >
+                        {already ? 'Bereits verknüpft' : 'Verknüpfen'}
+                      </button>
+                    </li>
+                    )
+                  })}
+                </ul>
+                <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+                  <button type="button" className="btn btn-secondary" onClick={() => setArchiveOpen(false)}>
+                    Schließen
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+          {mediaPreview && (
+            <MediaPreviewModal
+              title={(mediaPreview.title || '').trim() || mediaPreview.original_filename || `Medium #${mediaPreview.id}`}
+              media={mediaPreview}
+              fileUrl={mediaPreview.embed_url ? null : resolveExerciseMediaFileUrl(exerciseId, mediaPreview)}
+              onClose={() => setMediaPreview(null)}
+              onReport={
+                !mediaPreview.asset_legal_hold_active
+                  ? () => {
+                      setReportTarget(mediaPreview)
+                      setMediaPreview(null)
+                    }
+                  : null
+              }
+            />
+          )}
+          {reportTarget && (
+            <ReportContentModal
+              targetType="media_asset"
+              targetId={reportTarget.media_asset_id || reportTarget.id}
+              targetLabel={reportTarget.title || reportTarget.original_filename || `Medium #${reportTarget.id}`}
+              onClose={() => setReportTarget(null)}
+            />
+          )}
+        </div>
+      )}
+
+      <ExercisePickerModal
+        open={comboStationPickerIx !== null}
+        onClose={() => setComboStationPickerIx(null)}
+        exerciseKindAny={['simple']}
+        multiSelect
+        enableQuickCreateDraft
+        onSelectExercises={(picked) => {
+          if (comboStationPickerIx === null) return
+          mergePickedExercisesIntoSlot(comboStationPickerIx, picked)
+          setComboStationPickerIx(null)
+        }}
+      />
+
+      <p style={{ fontSize: '12px', color: 'var(--text3)', marginTop: '16px' }}>
+        <strong>KI-Ausbaustufe:</strong> Backend laut Spec{' '}
+        <code style={{ fontSize: '11px' }}>POST /api/exercises/ai/suggest</code> und{' '}
+        <code style={{ fontSize: '11px' }}>POST /api/exercises/{'{id}'}/ai/regenerate</code> — z. B.{' '}
+        <code>OPENROUTER_API_KEY</code>, Vorschläge nur nach Trainer-Bestätigung übernehmen (siehe{' '}
+        <code>api.suggestExerciseAi</code>).
+      </p>
+      <UnsavedChangesPrompt
+        blocker={blocker}
+        isBusy={saving}
+        onSave={handleUnsavedDialogSave}
+        onDiscardWithoutSave={() => setFormDirty(false)}
+      />
+    </div>
+  )
+}
+
+export default ExerciseFormPageRoot
diff --git a/frontend/src/components/exercises/ExerciseListBulkToolbar.jsx b/frontend/src/components/exercises/ExerciseListBulkToolbar.jsx
new file mode 100644
index 0000000..084dcd3
--- /dev/null
+++ b/frontend/src/components/exercises/ExerciseListBulkToolbar.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export default function ExerciseListBulkToolbar({
+  selectedCount,
+  bulkMaxIds,
+  onClearSelection,
+  onOpenBulkModal,
+}) {
+  if (selectedCount < 1) return null
+
+  return (
+    <div className="card exercise-bulk-toolbar" data-testid="exercise-list-bulk-toolbar">
+      <strong>{selectedCount} ausgewählt</strong>
+      <button type="button" className="btn btn-secondary btn-small" onClick={onClearSelection}>
+        Auswahl aufheben
+      </button>
+      <button type="button" className="btn btn-primary btn-small" onClick={onOpenBulkModal}>
+        Massenänderung…
+      </button>
+      <span className="exercise-bulk-toolbar__meta">
+        Bis zu {bulkMaxIds} pro Anfrage. Für „Verein“ ohne Auswahl: aktiver Vereinskontext (
+        <code>X-Active-Club-Id</code>
+        ).
+      </span>
+    </div>
+  )
+}
diff --git a/frontend/src/components/exercises/ExercisesListPageRoot.jsx b/frontend/src/components/exercises/ExercisesListPageRoot.jsx
new file mode 100644
index 0000000..aee8e91
--- /dev/null
+++ b/frontend/src/components/exercises/ExercisesListPageRoot.jsx
@@ -0,0 +1,590 @@
+import React, { useState, useEffect, useMemo, useCallback, useRef, lazy, Suspense } from 'react'
+import { Link } from 'react-router-dom'
+import api from '../../utils/api'
+import { useAuth } from '../../context/AuthContext'
+import { activeClubMemberships, getTenantClubDependencyKey } from '../../utils/activeClub'
+import PageSectionNav from '../PageSectionNav'
+import ExerciseListCard from './ExerciseListCard'
+import ExerciseListFilterModal from './ExerciseListFilterModal'
+import ExerciseListBulkModal from './ExerciseListBulkModal'
+import ExerciseListSearchBar from './ExerciseListSearchBar'
+import ExerciseListBulkToolbar from './ExerciseListBulkToolbar'
+import { buildExerciseListFilterChips } from '../../utils/exerciseListFilterChips'
+import { applyDashboardExerciseListUrl, buildExerciseListQueryBase } from '../../utils/exerciseListQuery'
+import { useExerciseListCatalogsAndQuery } from '../../hooks/useExerciseListCatalogsAndQuery'
+import {
+  INITIAL_EXERCISE_LIST_FILTERS,
+  mergeExerciseListPrefsFromApi,
+  compactExerciseListPrefsPayload,
+} from '../../constants/exerciseListFilters'
+
+const ExerciseProgressionGraphPanel = lazy(() => import('../ExerciseProgressionGraphPanel'))
+
+const BULK_MAX_IDS = 500
+const EXERCISES_PAGE_TABS = [
+  { id: 'list', label: 'Liste' },
+  { id: 'progression', label: 'Progressionsgraphen' },
+]
+
+function ExercisesListPageRoot() {
+  const { user, checkAuth } = useAuth()
+  const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
+  const isSuperadmin = user?.role === 'superadmin'
+  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
+
+  const [mineOnly, setMineOnly] = useState(() => {
+    try {
+      const sp = new URLSearchParams(window.location.search)
+      return sp.get('mine') === '1' || sp.get('created_by_me') === '1'
+    } catch {
+      return false
+    }
+  })
+
+  const [searchInput, setSearchInput] = useState('')
+  const [aiSearchInput, setAiSearchInput] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [debouncedAiSearch, setDebouncedAiSearch] = useState('')
+  const [filters, setFilters] = useState(() => ({ ...INITIAL_EXERCISE_LIST_FILTERS }))
+  const [filterModalOpen, setFilterModalOpen] = useState(false)
+  const [savingExercisePrefs, setSavingExercisePrefs] = useState(false)
+  const [pageTab, setPageTab] = useState('list')
+  const prefsAppliedRef = useRef(false)
+
+  const [selectedIds, setSelectedIds] = useState(() => new Set())
+  const [bulkModalOpen, setBulkModalOpen] = useState(false)
+  const [bulkVisibility, setBulkVisibility] = useState('')
+  const [bulkStatus, setBulkStatus] = useState('')
+  const [bulkClubSelect, setBulkClubSelect] = useState('')
+  const [bulkClubManual, setBulkClubManual] = useState('')
+  const [bulkSubmitting, setBulkSubmitting] = useState(false)
+  const [bulkPatchFocusAreas, setBulkPatchFocusAreas] = useState(false)
+  const [bulkFocusAreaIds, setBulkFocusAreaIds] = useState([])
+  const [bulkPatchStyleDirections, setBulkPatchStyleDirections] = useState(false)
+  const [bulkStyleDirectionIds, setBulkStyleDirectionIds] = useState([])
+  const [bulkPatchTrainingTypes, setBulkPatchTrainingTypes] = useState(false)
+  const [bulkTrainingTypeIds, setBulkTrainingTypeIds] = useState([])
+  const [bulkPatchTargetGroups, setBulkPatchTargetGroups] = useState(false)
+  const [bulkTargetGroupIds, setBulkTargetGroupIds] = useState([])
+
+  useEffect(() => {
+    if (!user?.id) return
+    if (prefsAppliedRef.current) return
+    const merged = mergeExerciseListPrefsFromApi(user.exercise_list_prefs)
+    setFilters(applyDashboardExerciseListUrl(merged))
+    try {
+      const sp = new URLSearchParams(window.location.search)
+      if (sp.get('mine') === '1' || sp.get('created_by_me') === '1') setMineOnly(true)
+    } catch {
+      /* ignore */
+    }
+    prefsAppliedRef.current = true
+  }, [user?.id, user?.exercise_list_prefs])
+
+  useEffect(() => {
+    if (!user?.id) prefsAppliedRef.current = false
+  }, [user?.id])
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(searchInput.trim()), 400)
+    return () => clearTimeout(t)
+  }, [searchInput])
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedAiSearch(aiSearchInput.trim()), 400)
+    return () => clearTimeout(t)
+  }, [aiSearchInput])
+
+  useEffect(() => {
+    if (!filterModalOpen) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') setFilterModalOpen(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [filterModalOpen])
+
+  const queryBase = useMemo(
+    () => buildExerciseListQueryBase(filters, debouncedSearch, debouncedAiSearch, mineOnly),
+    [filters, debouncedSearch, debouncedAiSearch, mineOnly]
+  )
+
+  const {
+    catalogs,
+    catalogsReady,
+    exercises,
+    setExercises,
+    listFetching,
+    loadingMore,
+    hasMore,
+    loadMore,
+  } = useExerciseListCatalogsAndQuery({ queryBase, pageTab, tenantClubDepKey })
+
+  useEffect(() => {
+    setSelectedIds(new Set())
+  }, [queryBase])
+
+  const focusOptions = useMemo(
+    () =>
+      catalogs.focusAreas.map((fa) => ({
+        id: fa.id,
+        label: `${fa.icon || ''} ${fa.name || ''}`.trim(),
+      })),
+    [catalogs.focusAreas]
+  )
+  const styleOptions = useMemo(
+    () => catalogs.styleDirections.map((s) => ({ id: s.id, label: s.name || String(s.id) })),
+    [catalogs.styleDirections]
+  )
+  const trainingTypeOptions = useMemo(
+    () => catalogs.trainingTypes.map((t) => ({ id: t.id, label: t.name || String(t.id) })),
+    [catalogs.trainingTypes]
+  )
+  const targetGroupOptions = useMemo(
+    () => catalogs.targetGroups.map((g) => ({ id: g.id, label: g.name || String(g.id) })),
+    [catalogs.targetGroups]
+  )
+  const skillOptions = useMemo(
+    () => catalogs.skills.map((s) => ({ id: s.id, label: s.name || String(s.id) })),
+    [catalogs.skills]
+  )
+  const visibilityOptions = useMemo(
+    () => [
+      { id: 'private', label: 'Privat' },
+      { id: 'club', label: 'Verein' },
+      { id: 'official', label: 'Offiziell' },
+    ],
+    []
+  )
+  const statusOptions = useMemo(
+    () => [
+      { id: 'draft', label: 'Entwurf' },
+      { id: 'in_review', label: 'In Prüfung' },
+      { id: 'approved', label: 'Freigegeben' },
+      { id: 'archived', label: 'Archiviert' },
+    ],
+    []
+  )
+
+  const filterChips = useMemo(
+    () =>
+      buildExerciseListFilterChips({
+        mineOnly,
+        setMineOnly,
+        filters,
+        setFilters,
+        focusOptions,
+        styleOptions,
+        trainingTypeOptions,
+        targetGroupOptions,
+        skillOptions,
+        visibilityOptions,
+        statusOptions,
+      }),
+    [
+      mineOnly,
+      filters,
+      focusOptions,
+      styleOptions,
+      trainingTypeOptions,
+      targetGroupOptions,
+      skillOptions,
+      visibilityOptions,
+      statusOptions,
+    ]
+  )
+
+  /** Für Browser-/datalist-Vorschläge (aktuelle Treffer-Titel, begrenzt) */
+  const searchTitleSuggestions = useMemo(() => {
+    const titles = exercises.map((e) => (e.title || '').trim()).filter(Boolean)
+    return [...new Set(titles)].slice(0, 80)
+  }, [exercises])
+
+  const clubNameById = useMemo(() => {
+    const m = {}
+    for (const c of activeClubMemberships(user?.clubs)) {
+      if (c?.id != null) m[Number(c.id)] = c.name || `#${c.id}`
+    }
+    return m
+  }, [user?.clubs])
+
+  const effectiveClubId =
+    user?.effective_club_id != null && user.effective_club_id !== ''
+      ? Number(user.effective_club_id)
+      : user?.active_club_id != null && user.active_club_id !== ''
+        ? Number(user.active_club_id)
+        : null
+
+  const toggleSelect = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const n = new Set(prev)
+      const nid = Number(id)
+      if (Number.isNaN(nid)) return prev
+      if (n.has(nid)) n.delete(nid)
+      else n.add(nid)
+      return n
+    })
+  }, [])
+
+  const clearSelection = useCallback(() => setSelectedIds(new Set()), [])
+
+  const toggleSelectAllPage = useCallback(() => {
+    setSelectedIds((prev) => {
+      const n = new Set(prev)
+      const allSel =
+        exercises.length > 0 && exercises.every((e) => n.has(Number(e.id)))
+      if (allSel) {
+        exercises.forEach((e) => n.delete(Number(e.id)))
+      } else {
+        exercises.forEach((e) => n.add(Number(e.id)))
+      }
+      return n
+    })
+  }, [exercises])
+
+  const allOnPageSelected = useMemo(
+    () => exercises.length > 0 && exercises.every((e) => selectedIds.has(Number(e.id))),
+    [exercises, selectedIds]
+  )
+
+  const bulkVisibilityOptions = useMemo(() => {
+    const base = [
+      { id: '', label: '— nicht ändern —' },
+      { id: 'private', label: 'Privat' },
+      { id: 'club', label: 'Verein' },
+    ]
+    if (isSuperadmin) base.push({ id: 'official', label: 'Offiziell (global)' })
+    return base
+  }, [isSuperadmin])
+
+  const handleDelete = async (exercise) => {
+    if (!confirm(`Übung "${exercise.title}" wirklich löschen?`)) return
+    try {
+      await api.deleteExercise(exercise.id)
+      setExercises((prev) => prev.filter((e) => e.id !== exercise.id))
+    } catch (err) {
+      alert('Fehler beim Löschen: ' + err.message)
+    }
+  }
+
+  const resetAllFilters = useCallback(() => {
+    setMineOnly(false)
+    setFilters({ ...INITIAL_EXERCISE_LIST_FILTERS })
+  }, [])
+
+  const handleSaveExerciseFilterPrefs = useCallback(async () => {
+    const uid = user?.id
+    if (!uid) {
+      alert('Nicht angemeldet.')
+      return
+    }
+    setSavingExercisePrefs(true)
+    try {
+      const payload = compactExerciseListPrefsPayload(filters)
+      await api.updateProfile(uid, { exercise_list_prefs: payload })
+      await checkAuth()
+      alert('Standardfilter für die Übungsliste gespeichert.')
+    } catch (e) {
+      alert('Speichern fehlgeschlagen: ' + (e.message || String(e)))
+    } finally {
+      setSavingExercisePrefs(false)
+    }
+  }, [user?.id, filters, checkAuth])
+
+  const openBulkModal = () => {
+    setBulkVisibility('')
+    setBulkStatus('')
+    setBulkClubSelect('')
+    setBulkClubManual('')
+    setBulkPatchFocusAreas(false)
+    setBulkFocusAreaIds([])
+    setBulkPatchStyleDirections(false)
+    setBulkStyleDirectionIds([])
+    setBulkPatchTrainingTypes(false)
+    setBulkTrainingTypeIds([])
+    setBulkPatchTargetGroups(false)
+    setBulkTargetGroupIds([])
+    setBulkModalOpen(true)
+  }
+
+  const handleBulkSubmit = async () => {
+    const anyRelationPatch =
+      bulkPatchFocusAreas ||
+      bulkPatchStyleDirections ||
+      bulkPatchTrainingTypes ||
+      bulkPatchTargetGroups
+    if (!bulkVisibility && !bulkStatus && !anyRelationPatch) {
+      alert(
+        'Bitte mindestens eine Änderung wählen (Sichtbarkeit, Status oder eine der Zuordnungen mit gesetztem Häkchen „ersetzen“).'
+      )
+      return
+    }
+    const ids = Array.from(selectedIds).filter((x) => Number.isFinite(x) && x > 0)
+    if (ids.length === 0) {
+      alert('Keine Übungen ausgewählt.')
+      return
+    }
+    if (ids.length > BULK_MAX_IDS) {
+      alert(`Maximal ${BULK_MAX_IDS} Übungen pro Vorgang. Bitte Auswahl oder mehrere Durchläufe verwenden.`)
+      return
+    }
+    const payload = { exercise_ids: ids }
+    if (bulkVisibility) payload.visibility = bulkVisibility
+    if (bulkStatus) payload.status = bulkStatus
+    if (bulkPatchFocusAreas) {
+      payload.focus_area_ids = bulkFocusAreaIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
+    }
+    if (bulkPatchStyleDirections) {
+      payload.style_direction_ids = bulkStyleDirectionIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
+    }
+    if (bulkPatchTrainingTypes) {
+      payload.training_type_ids = bulkTrainingTypeIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
+    }
+    if (bulkPatchTargetGroups) {
+      payload.target_group_ids = bulkTargetGroupIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
+    }
+    if (bulkVisibility === 'club') {
+      const manual = String(bulkClubManual || '').trim()
+      if (manual && /^\d+$/.test(manual)) payload.club_id = Number(manual)
+      else if (bulkClubSelect && /^\d+$/.test(String(bulkClubSelect))) {
+        payload.club_id = Number(bulkClubSelect)
+      }
+    }
+    setBulkSubmitting(true)
+    try {
+      const res = await api.bulkPatchExercisesMetadata(payload)
+      const updatedSet = new Set((res.updated || []).map((x) => Number(x)))
+      let resolvedClubId = null
+      if (bulkVisibility === 'club') {
+        if (payload.club_id != null) resolvedClubId = payload.club_id
+        else if (effectiveClubId != null && !Number.isNaN(effectiveClubId)) resolvedClubId = effectiveClubId
+      }
+      const clubLabel =
+        resolvedClubId != null ? clubNameById[resolvedClubId] || `Verein #${resolvedClubId}` : null
+
+      let nextPrimaryFocusName = null
+      if (bulkPatchFocusAreas) {
+        const faNums = bulkFocusAreaIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
+        if (faNums.length > 0) {
+          const opt = focusOptions.find((o) => Number(o.id) === Number(faNums[0]))
+          nextPrimaryFocusName = String(opt?.label ?? '').trim() || String(faNums[0])
+        }
+      }
+
+      setExercises((prev) =>
+        prev.map((e) => {
+          if (!updatedSet.has(Number(e.id))) return e
+          const next = { ...e }
+          if (bulkVisibility) {
+            next.visibility = bulkVisibility
+            next.club_id = bulkVisibility === 'club' ? resolvedClubId : null
+            next.club_name = bulkVisibility === 'club' ? clubLabel : null
+          }
+          if (bulkStatus) next.status = bulkStatus
+          if (bulkPatchFocusAreas) {
+            if (nextPrimaryFocusName == null) delete next.focus_area
+            else next.focus_area = nextPrimaryFocusName
+          }
+          return next
+        })
+      )
+
+      let msg = `${res.updated_count ?? updatedSet.size} Übung(en) aktualisiert.`
+      if (res.failed_count) msg += `\n${res.failed_count} nicht geändert (siehe Details).`
+      if (Array.isArray(res.failed) && res.failed.length) {
+        msg +=
+          '\n\n' +
+          res.failed
+            .slice(0, 12)
+            .map((f) => `#${f.id}: ${f.detail}`)
+            .join('\n')
+        if (res.failed.length > 12) msg += '\n…'
+      }
+      alert(msg)
+      setBulkModalOpen(false)
+      clearSelection()
+    } catch (err) {
+      alert('Massenänderung fehlgeschlagen: ' + (err.message || String(err)))
+    } finally {
+      setBulkSubmitting(false)
+    }
+  }
+
+  if (!catalogsReady && pageTab === 'list') {
+    return (
+      <div className="app-page">
+        <div className="empty-state" style={{ padding: '2.5rem 1rem' }}>
+          <div className="spinner" />
+          <p className="muted" style={{ marginTop: '12px' }}>
+            Lade Kataloge…
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="app-page">
+      <div className="exercises-page__header">
+        <h1 className="page-title exercises-page__title">Übungen</h1>
+        {pageTab === 'list' ? (
+          <Link to="/exercises/new" className="btn btn-primary">
+            + Neu
+          </Link>
+        ) : (
+          <span aria-hidden="true" />
+        )}
+      </div>
+
+      <PageSectionNav
+        ariaLabel="Übungen Bereiche"
+        value={pageTab}
+        onChange={setPageTab}
+        items={EXERCISES_PAGE_TABS}
+        className="exercises-page-toolbar-tabs"
+      />
+
+      {pageTab === 'progression' ? (
+        <Suspense
+          fallback={
+            <div className="card empty-state" style={{ padding: '2rem 1rem' }}>
+              <div className="spinner" />
+              <p className="muted" style={{ marginTop: '12px' }}>
+                Lade Progressionsgraphen…
+              </p>
+            </div>
+          }
+        >
+          <ExerciseProgressionGraphPanel />
+        </Suspense>
+      ) : (
+        <>
+      <ExerciseListSearchBar
+        searchTitleSuggestions={searchTitleSuggestions}
+        searchInput={searchInput}
+        onSearchInputChange={setSearchInput}
+        aiSearchInput={aiSearchInput}
+        onAiSearchInputChange={setAiSearchInput}
+        mineOnly={mineOnly}
+        onToggleMineOnly={() => setMineOnly((v) => !v)}
+        onOpenFilter={() => setFilterModalOpen(true)}
+        filterChips={filterChips}
+        onResetAllFilters={resetAllFilters}
+        exerciseCount={exercises.length}
+        allOnPageSelected={allOnPageSelected}
+        onToggleSelectAllPage={toggleSelectAllPage}
+      />
+
+      <ExerciseListBulkToolbar
+        selectedCount={selectedIds.size}
+        bulkMaxIds={BULK_MAX_IDS}
+        onClearSelection={clearSelection}
+        onOpenBulkModal={openBulkModal}
+      />
+
+      <ExerciseListFilterModal
+        open={filterModalOpen}
+        onClose={() => setFilterModalOpen(false)}
+        filters={filters}
+        setFilters={setFilters}
+        focusOptions={focusOptions}
+        styleOptions={styleOptions}
+        trainingTypeOptions={trainingTypeOptions}
+        targetGroupOptions={targetGroupOptions}
+        skillOptions={skillOptions}
+        visibilityOptions={visibilityOptions}
+        statusOptions={statusOptions}
+        savingExercisePrefs={savingExercisePrefs}
+        onSaveStandard={handleSaveExerciseFilterPrefs}
+        onResetAll={resetAllFilters}
+      />
+
+      <ExerciseListBulkModal
+        open={bulkModalOpen}
+        onClose={() => setBulkModalOpen(false)}
+        onSubmit={handleBulkSubmit}
+        bulkSubmitting={bulkSubmitting}
+        selectedCount={selectedIds.size}
+        bulkMaxIds={BULK_MAX_IDS}
+        user={user}
+        isPlatformAdmin={isPlatformAdmin}
+        statusOptions={statusOptions}
+        bulkVisibilityOptions={bulkVisibilityOptions}
+        focusOptions={focusOptions}
+        styleOptions={styleOptions}
+        trainingTypeOptions={trainingTypeOptions}
+        targetGroupOptions={targetGroupOptions}
+        bulkVisibility={bulkVisibility}
+        setBulkVisibility={setBulkVisibility}
+        bulkStatus={bulkStatus}
+        setBulkStatus={setBulkStatus}
+        bulkClubSelect={bulkClubSelect}
+        setBulkClubSelect={setBulkClubSelect}
+        bulkClubManual={bulkClubManual}
+        setBulkClubManual={setBulkClubManual}
+        bulkPatchFocusAreas={bulkPatchFocusAreas}
+        setBulkPatchFocusAreas={setBulkPatchFocusAreas}
+        bulkFocusAreaIds={bulkFocusAreaIds}
+        setBulkFocusAreaIds={setBulkFocusAreaIds}
+        bulkPatchStyleDirections={bulkPatchStyleDirections}
+        setBulkPatchStyleDirections={setBulkPatchStyleDirections}
+        bulkStyleDirectionIds={bulkStyleDirectionIds}
+        setBulkStyleDirectionIds={setBulkStyleDirectionIds}
+        bulkPatchTrainingTypes={bulkPatchTrainingTypes}
+        setBulkPatchTrainingTypes={setBulkPatchTrainingTypes}
+        bulkTrainingTypeIds={bulkTrainingTypeIds}
+        setBulkTrainingTypeIds={setBulkTrainingTypeIds}
+        bulkPatchTargetGroups={bulkPatchTargetGroups}
+        setBulkPatchTargetGroups={setBulkPatchTargetGroups}
+        bulkTargetGroupIds={bulkTargetGroupIds}
+        setBulkTargetGroupIds={setBulkTargetGroupIds}
+      />
+
+      {listFetching && exercises.length === 0 ? (
+        <div className="card empty-state" style={{ padding: '2rem 1rem' }}>
+          <div className="spinner" />
+          <p className="muted" style={{ marginTop: '12px' }}>
+            Lade Übungen…
+          </p>
+        </div>
+      ) : exercises.length === 0 ? (
+        <div className="card">
+          <p className="exercises-empty-text">Keine Übungen gefunden.</p>
+        </div>
+      ) : (
+        <>
+          {listFetching ? (
+            <p className="exercises-meta-line exercises-meta-line--muted">Aktualisiere Treffer…</p>
+          ) : null}
+          <p className="exercises-meta-line">
+            {exercises.length} angezeigt
+            {hasMore ? ' · es gibt weitere Einträge' : ''}
+          </p>
+          <div className="exercises-list-grid" data-testid="exercises-list-grid">
+            {exercises.map((exercise) => (
+              <ExerciseListCard
+                key={exercise.id}
+                exercise={exercise}
+                user={user}
+                selectedIds={selectedIds}
+                toggleSelect={toggleSelect}
+                onDelete={handleDelete}
+              />
+            ))}
+          </div>
+          {hasMore && (
+            <div className="exercises-load-more">
+              <button type="button" className="btn btn-secondary" disabled={loadingMore} onClick={loadMore}>
+                {loadingMore ? 'Laden…' : 'Mehr laden'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </>
+      )}
+    </div>
+  )
+}
+
+export default ExercisesListPageRoot
diff --git a/frontend/src/components/planning/TrainingPlanningFrameworkImportModal.jsx b/frontend/src/components/planning/TrainingPlanningFrameworkImportModal.jsx
new file mode 100644
index 0000000..3a499e9
--- /dev/null
+++ b/frontend/src/components/planning/TrainingPlanningFrameworkImportModal.jsx
@@ -0,0 +1,210 @@
+import React from 'react'
+
+/**
+ * Modal: geplante Einheiten aus einem Trainingsrahmenprogramm (Blueprint-Slots) erzeugen.
+ */
+export default function TrainingPlanningFrameworkImportModal({
+  open,
+  frameworkProgramsList,
+  fwImportProgramId,
+  onProgramChange,
+  fwImportLoading,
+  fwImportDetail,
+  fwImportSelectedSlots,
+  onToggleSlot,
+  fwImportSlotDates,
+  onSlotDateChange,
+  fwImportStartDate,
+  onFwImportStartDateChange,
+  fwImportIntervalDays,
+  onFwImportIntervalDaysChange,
+  fwImportSubmitting,
+  onApplyDateSuggestions,
+  onSubmit,
+  onClose,
+}) {
+  if (!open) return null
+
+  return (
+    <div
+      data-testid="planning-framework-import-modal"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1010,
+        padding: '1rem',
+        overflowY: 'auto',
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--surface)',
+          borderRadius: '12px',
+          padding: 'clamp(14px, 3vw, 1.75rem)',
+          maxWidth: 'min(620px, 100%)',
+          width: '100%',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+          boxSizing: 'border-box',
+          minWidth: 0,
+        }}
+      >
+        <h2 style={{ marginBottom: '0.65rem' }}>Sessions aus Rahmen übernehmen</h2>
+        <p style={{ color: 'var(--text2)', fontSize: '0.9rem', marginBottom: '1rem', lineHeight: 1.5 }}>
+          Wähle ein Trainingsrahmenprogramm und eine oder mehrere Sessions. Pro Session entsteht eine{' '}
+          <strong>eigene geplante Einheit</strong> in der aktuellen Gruppe (Kopie des Ablaufs). Die{' '}
+          <strong>Verknüpfung zum Rahmen-Slot</strong> wird gespeichert, damit die Herkunft sichtbar bleibt.
+        </p>
+
+        <div className="form-row">
+          <label className="form-label">Rahmenprogramm</label>
+          <select
+            className="form-input"
+            value={fwImportProgramId}
+            onChange={(e) => onProgramChange(e.target.value)}
+            disabled={fwImportLoading || fwImportSubmitting}
+          >
+            <option value="">Bitte wählen…</option>
+            {frameworkProgramsList.map((fp) => (
+              <option key={fp.id} value={String(fp.id)}>
+                {(fp.title || '').trim() || `Rahmen #${fp.id}`}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {fwImportLoading ? (
+          <p style={{ color: 'var(--text2)', marginTop: '1rem' }}>Laden der Sessions…</p>
+        ) : fwImportDetail?.slots?.length ? (
+          <>
+            <fieldset style={{ border: 'none', margin: '1rem 0', padding: 0 }}>
+              <legend className="form-label" style={{ padding: 0, marginBottom: '0.5rem' }}>
+                Sessions (mit Ablauf)
+              </legend>
+              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+                {[...fwImportDetail.slots]
+                  .sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
+                  .map((slot) => {
+                    const hasBp = !!slot.blueprint_training_unit_id
+                    const checked = fwImportSelectedSlots.has(slot.id)
+                    const label =
+                      (slot.title || '').trim() || `Session ${(slot.sort_order ?? 0) + 1}`
+                    return (
+                      <li key={slot.id} style={{ marginBottom: '10px' }}>
+                        <label
+                          style={{
+                            display: 'flex',
+                            gap: '10px',
+                            alignItems: 'flex-start',
+                            cursor: hasBp ? 'pointer' : 'not-allowed',
+                            opacity: hasBp ? 1 : 0.55,
+                          }}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            disabled={!hasBp || fwImportSubmitting}
+                            onChange={() => onToggleSlot(slot)}
+                            style={{ marginTop: '0.2rem', flexShrink: 0 }}
+                          />
+                          <span style={{ flex: 1, minWidth: 0 }}>
+                            <strong>{label}</strong>
+                            {!hasBp ? (
+                              <span style={{ display: 'block', fontSize: '0.82rem', color: 'var(--danger)' }}>
+                                Ohne Session-Ablauf — Übernahme nicht möglich.
+                              </span>
+                            ) : null}
+                            {hasBp && checked ? (
+                              <span style={{ display: 'block', marginTop: '6px' }}>
+                                <span className="form-label" style={{ fontSize: '0.78rem' }}>
+                                  Termin (Datum)
+                                </span>
+                                <input
+                                  type="date"
+                                  className="form-input"
+                                  style={{ maxWidth: '200px', marginTop: '4px' }}
+                                  value={fwImportSlotDates[String(slot.id)] || ''}
+                                  onChange={(e) => onSlotDateChange(String(slot.id), e.target.value)}
+                                  disabled={fwImportSubmitting}
+                                />
+                              </span>
+                            ) : null}
+                          </span>
+                        </label>
+                      </li>
+                    )
+                  })}
+              </ul>
+            </fieldset>
+
+            <div
+              className="responsive-grid-3"
+              style={{
+                marginBottom: '0.75rem',
+                padding: '12px',
+                background: 'var(--surface2)',
+                borderRadius: '8px',
+              }}
+            >
+              <div className="form-row">
+                <label className="form-label">Startdatum (Vorschlag)</label>
+                <input
+                  type="date"
+                  className="form-input"
+                  value={fwImportStartDate}
+                  onChange={(e) => onFwImportStartDateChange(e.target.value)}
+                  disabled={fwImportSubmitting}
+                />
+              </div>
+              <div className="form-row">
+                <label className="form-label">Abstand (Tage)</label>
+                <input
+                  type="number"
+                  min={0}
+                  className="form-input"
+                  value={fwImportIntervalDays}
+                  onChange={(e) => onFwImportIntervalDaysChange(parseInt(e.target.value, 10) || 0)}
+                  disabled={fwImportSubmitting}
+                />
+              </div>
+              <div className="form-row" style={{ alignSelf: 'end' }}>
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  style={{ width: '100%' }}
+                  disabled={fwImportSubmitting}
+                  onClick={onApplyDateSuggestions}
+                >
+                  Datumsvorschläge setzen
+                </button>
+              </div>
+            </div>
+          </>
+        ) : fwImportProgramId ? (
+          <p style={{ color: 'var(--text2)', marginTop: '0.75rem' }}>Keine Sessions in diesem Programm.</p>
+        ) : null}
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1.25rem' }}>
+          <button
+            type="button"
+            className="btn btn-primary"
+            disabled={fwImportSubmitting || !fwImportDetail}
+            onClick={onSubmit}
+          >
+            {fwImportSubmitting ? 'Übernehmen…' : 'In Planung übernehmen'}
+          </button>
+          <button type="button" className="btn btn-secondary" disabled={fwImportSubmitting} onClick={onClose}>
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/planning/TrainingPlanningModuleApplyModal.jsx b/frontend/src/components/planning/TrainingPlanningModuleApplyModal.jsx
new file mode 100644
index 0000000..61838b7
--- /dev/null
+++ b/frontend/src/components/planning/TrainingPlanningModuleApplyModal.jsx
@@ -0,0 +1,331 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { trainingVisibilityShortDE } from '../../utils/trainingPlanningPageHelpers'
+
+/**
+ * Dialog: Trainingsmodul in die Abschnitte einer Einheit einfügen (Bibliothekskopie).
+ */
+
+function formatModuleApplySectionOptionLabel(section, flatIndex) {
+  const title = (section?.title || '').trim() || `Abschnitt ${flatIndex + 1}`
+  const pl = section?.planLoc
+  if (pl?.phaseKind === 'parallel') {
+    const st = (pl.streamTitle || '').trim()
+    const streamHint = st ? ` — ${st}` : ''
+    return `${title}${streamHint} (Phase ${pl.phaseOrderIndex ?? 0}, Stream ${pl.parallelStreamOrderIndex ?? 0})`
+  }
+  return title
+}
+
+export default function TrainingPlanningModuleApplyModal({
+  open,
+  busy,
+  err,
+  placementLocked,
+  placementSummary,
+  sections,
+  sectionIx,
+  onSectionIndexChange,
+  insertSlot,
+  onInsertSlotChange,
+  targetItems,
+  searchQuery,
+  onSearchQueryChange,
+  filteredList,
+  fullList,
+  selectedModuleId,
+  onSelectModuleId,
+  modulePickPreview,
+  onConfirm,
+  onCancel,
+}) {
+  if (!open) return null
+
+  const handleBackdropMouseDown = (ev) => {
+    if (ev.target !== ev.currentTarget || busy) return
+    onCancel()
+  }
+
+  return (
+    <div
+      data-testid="planning-module-apply-modal"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1010,
+        padding: '1rem',
+        overflowY: 'auto',
+      }}
+      role="presentation"
+      onMouseDown={handleBackdropMouseDown}
+    >
+      <div
+        className="card"
+        style={{
+          padding: 'clamp(14px, 3vw, 1.75rem)',
+          maxWidth: 'min(560px, 100%)',
+          width: '100%',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+          boxSizing: 'border-box',
+        }}
+        role="dialog"
+        aria-labelledby="module-apply-title"
+      >
+        <h2 id="module-apply-title" style={{ marginBottom: '0.5rem', fontSize: '1.15rem' }}>
+          Trainingsmodul einfügen
+        </h2>
+        <p style={{ color: 'var(--text2)', fontSize: '0.87rem', marginBottom: '0.85rem', lineHeight: 1.5 }}>
+          Alle Positionen des gewählten Moduls werden <strong>als neue Zeilen</strong> eingefügt (Kopie, mit klarer
+          Herkunft im Ablauf). Die Einheit brauchst du dafür nicht vorher gespeichert zu haben — Speichern am Ende
+          wie gewohnt. <strong>Vollständige Textsuche oder Modulkategorien</strong> planen wir serverseitig für
+          eine spätere Iteration; vorerst steht hier eine{' '}
+          <strong>Schnellsuche über Titel und Freitext-Felder</strong> zur Verfügung.
+        </p>
+
+        {err ? (
+          <p style={{ color: 'var(--danger)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>{err}</p>
+        ) : null}
+
+        {placementLocked ? (
+          <>
+            <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', lineHeight: 1.5, color: 'var(--text2)' }}>
+              Aktuelle Einfügeposition: Abschnitt <strong>{placementSummary.secTitle}</strong>{' '}
+              <span aria-hidden>/</span> {placementSummary.positionDescription}
+            </p>
+            <details className="tu-module-apply-placement-details">
+              <summary style={{ outline: 'none' }}>Abschnitt oder Position ändern</summary>
+              <div style={{ marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
+                <div className="form-row" style={{ marginBottom: 0 }}>
+                  <label className="form-label">Abschnitt (Reihenfolge wie im Editor)</label>
+                  <select
+                    className="form-input"
+                    value={String(sectionIx)}
+                    onChange={(e) => onSectionIndexChange(parseInt(e.target.value, 10))}
+                    disabled={busy || !sections?.length}
+                  >
+                    {(sections || []).map((s, i) => (
+                      <option key={`sec-opt-u-${i}`} value={String(i)}>
+                        {formatModuleApplySectionOptionLabel(s, i)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="form-row" style={{ marginBottom: 0 }}>
+                  <label className="form-label">Position in diesem Abschnitt</label>
+                  <select
+                    className="form-input"
+                    value={insertSlot}
+                    onChange={(e) => onInsertSlotChange(e.target.value)}
+                    disabled={busy || !(sections?.length > 0)}
+                  >
+                    <option value={`before:${targetItems.length}`}>
+                      Am Ende einfügen (nach allen Einträgen)
+                    </option>
+                    <option value="before:0">An den Anfang (vor dem ersten Eintrag)</option>
+                    {targetItems.map((row, xi) => {
+                      const labelPart =
+                        row.item_type === 'note'
+                          ? 'Zwischen-Anmerkung'
+                          : (row.exercise_title || '').trim() || `Übung #${row.exercise_id || '—'}`
+                      const clipped =
+                        labelPart.length > 44 ? `${labelPart.slice(0, 43).trim()}…` : labelPart
+                      return (
+                        <option key={`before-u-${xi}`} value={`before:${xi}`}>
+                          Vor Eintrag {xi + 1}: {clipped}
+                        </option>
+                      )
+                    })}
+                  </select>
+                </div>
+              </div>
+            </details>
+          </>
+        ) : (
+          <>
+            <div className="form-row">
+              <label className="form-label">Abschnitt (Reihenfolge wie im Editor)</label>
+              <select
+                className="form-input"
+                value={String(sectionIx)}
+                onChange={(e) => onSectionIndexChange(parseInt(e.target.value, 10))}
+                disabled={busy || !sections?.length}
+              >
+                {(sections || []).map((s, i) => (
+                  <option key={`sec-opt-${i}`} value={String(i)}>
+                    {formatModuleApplySectionOptionLabel(s, i)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="form-row">
+              <label className="form-label">Position in diesem Abschnitt</label>
+              <select
+                className="form-input"
+                value={insertSlot}
+                onChange={(e) => onInsertSlotChange(e.target.value)}
+                disabled={busy || !(sections?.length > 0)}
+              >
+                <option value={`before:${targetItems.length}`}>
+                  Am Ende einfügen (nach allen Einträgen)
+                </option>
+                <option value="before:0">An den Anfang (vor dem ersten Eintrag)</option>
+                {targetItems.map((row, xi) => {
+                  const labelPart =
+                    row.item_type === 'note'
+                      ? 'Zwischen-Anmerkung'
+                      : (row.exercise_title || '').trim() || `Übung #${row.exercise_id || '—'}`
+                  const clipped =
+                    labelPart.length > 44 ? `${labelPart.slice(0, 43).trim()}…` : labelPart
+                  return (
+                    <option key={`before-${xi}`} value={`before:${xi}`}>
+                      Vor Eintrag {xi + 1}: {clipped}
+                    </option>
+                  )
+                })}
+              </select>
+            </div>
+          </>
+        )}
+
+        <div className="form-row" style={{ marginTop: placementLocked ? '1rem' : undefined }}>
+          <label className="form-label">Suche Module</label>
+          <input
+            type="search"
+            enterKeyHint="search"
+            className="form-input tu-modulepick-search"
+            placeholder="Freitext: Titel, Kurzbeschreibung, Ziel, Zielgruppe …"
+            value={searchQuery}
+            onChange={(e) => onSearchQueryChange(e.target.value)}
+            disabled={busy}
+            aria-label="Module durch Freitext filtern"
+          />
+        </div>
+
+        <div className="form-row" style={{ marginBottom: '0.65rem' }}>
+          <label className="form-label" id="module-pick-label">
+            Modulliste
+          </label>
+        </div>
+        <div
+          className="tu-modulepick-list"
+          role="listbox"
+          aria-labelledby="module-pick-label"
+          aria-activedescendant={selectedModuleId ? `module-pick-opt-${selectedModuleId}` : undefined}
+        >
+          {!filteredList.length ? (
+            <p style={{ margin: '0.45rem', fontSize: '0.86rem', color: 'var(--text3)', lineHeight: 1.45 }}>
+              {!fullList.length ? 'Keine Module verfügbar oder keine Berechtigung.' : 'Kein Modul entspricht der Suche.'}
+            </p>
+          ) : (
+            filteredList.map((m) => {
+              const title = ((m.title || '').trim() || `Modul #${m.id}`).trim()
+              const visLbl = trainingVisibilityShortDE(m.visibility)
+              const nPos = typeof m.items_count === 'number' ? m.items_count : '—'
+              const selected = String(m.id) === String(selectedModuleId)
+              return (
+                <button
+                  key={m.id}
+                  id={`module-pick-opt-${m.id}`}
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  className={`tu-modulepick-item${selected ? ' tu-modulepick-item--active' : ''}`}
+                  disabled={busy}
+                  onClick={() => onSelectModuleId(String(m.id))}
+                >
+                  <span className="tu-modulepick-item__title">{title}</span>
+                  <span className="tu-modulepick-item__meta">
+                    {nPos} {typeof nPos === 'number' ? (nPos === 1 ? 'Position' : 'Positionen') : 'Position(en)'}
+                    {visLbl ? <> · {visLbl}</> : null}
+                    {m.summary ? <> · {(m.summary || '').trim().slice(0, 72)}{(m.summary || '').trim().length > 72 ? '…' : ''}</> : null}
+                  </span>
+                </button>
+              )
+            })
+          )}
+        </div>
+
+        {selectedModuleId ? (
+          <div className="tu-modulepick-preview" aria-live="polite">
+            <div className="tu-modulepick-preview__title">Ablauf-Vorschau (Bibliotheksmodul)</div>
+            {modulePickPreview.loading ? (
+              <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--text3)' }}>
+                Übungen und Hinweise laden …
+              </p>
+            ) : modulePickPreview.err ? (
+              <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--danger)' }}>
+                {modulePickPreview.err}
+              </p>
+            ) : !modulePickPreview.exercises.length && !modulePickPreview.notes ? (
+              <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--text3)' }}>
+                Keine Übungspositionen in diesem Eintrag gefunden (prüfen, ob Übungen im Modul gültige IDs haben).
+              </p>
+            ) : (
+              <>
+                <ol className="tu-modulepick-preview__list">
+                  {(modulePickPreview.exercises.slice(0, 12)).map((t, qi) => (
+                    <li key={`pv-ex-${qi}`}>{t}</li>
+                  ))}
+                </ol>
+                {modulePickPreview.exercises.length > 12 ? (
+                  <p className="tu-modulepick-preview__more">
+                    … und noch {modulePickPreview.exercises.length - 12} weitere Übungen in genau dieser Modulreihenfolge.
+                  </p>
+                ) : null}
+                {modulePickPreview.notes > 0 ? (
+                  <p className="tu-modulepick-preview__more">
+                    zusätzlich {modulePickPreview.notes}{' '}
+                    {modulePickPreview.notes === 1 ? 'Position mit Hinweis' : 'Positionen mit Hinweisen'}{' '}
+                    (ohne Aufzählung)
+                  </p>
+                ) : null}
+              </>
+            )}
+          </div>
+        ) : null}
+
+        <div
+          style={{
+            display: 'flex',
+            gap: '0.65rem',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end',
+            marginTop: '1.25rem',
+          }}
+        >
+          <button
+            type="button"
+            className="btn btn-secondary"
+            disabled={busy}
+            onClick={() => {
+              if (busy) return
+              onCancel()
+            }}
+          >
+            Abbrechen
+          </button>
+          <button type="button" className="btn btn-primary" disabled={busy} onClick={onConfirm}>
+            {busy ? 'Einfügen …' : 'Einfügen'}
+          </button>
+        </div>
+
+        <p style={{ margin: '1rem 0 0', fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.45 }}>
+          Neue Module kannst du unter{' '}
+          <Link to="/planning/training-modules" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
+            Trainingsmodule
+          </Link>{' '}
+          anlegen.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/planning/TrainingPlanningPageRoot.jsx b/frontend/src/components/planning/TrainingPlanningPageRoot.jsx
new file mode 100644
index 0000000..1ce61ec
--- /dev/null
+++ b/frontend/src/components/planning/TrainingPlanningPageRoot.jsx
@@ -0,0 +1,2023 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import api from '../../utils/api'
+import { useAuth } from '../../context/AuthContext'
+import { useToast } from '../../context/ToastContext'
+import { activeClubMemberships, getTenantClubDependencyKey } from '../../utils/activeClub'
+import ExercisePickerModal from '../ExercisePickerModal'
+import ExercisePeekModal from '../ExercisePeekModal'
+import PageSectionNav from '../PageSectionNav'
+import TrainingPlanningFrameworkImportModal from './TrainingPlanningFrameworkImportModal'
+import TrainingPlanningModuleApplyModal from './TrainingPlanningModuleApplyModal'
+import TrainingPlanningTrainerAssignModal from './TrainingPlanningTrainerAssignModal'
+import TrainingPlanningUnitFormModal from './TrainingPlanningUnitFormModal'
+/* Parallele Streams: Editor bleibt flache Abschnittsliste; `planLoc` pro Abschnitt steuert PUT `phases` vs. Legacy `sections`. */
+import {
+  defaultSection,
+  normalizeUnitToForm,
+  enrichSectionsWithVariants,
+  buildPlanPayloadForSave,
+  hydrateExercisePlanningRow,
+  insertTrainingModuleIntoPlanningSections,
+} from '../../utils/trainingUnitSectionsForm'
+import {
+  addDaysIsoDate,
+  pad2,
+  toIsoLocal,
+  mondayIndex,
+  getCalendarGridRange,
+  shiftCalendarMonth,
+  enumerateIsoDays,
+  WEEKDAYS_DE,
+  toNumList,
+  sessionAssignDefaults,
+  normalizeGroupCoTrainerIds,
+  filterDirectoryExcludingLead,
+  frameworkLineageText,
+} from '../../utils/trainingPlanningPageHelpers'
+
+function TrainingPlanningPageRoot() {
+  const { user } = useAuth()
+  const toast = useToast()
+  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
+  const [searchParams, setSearchParams] = useSearchParams()
+  const unitDeepLinkHandledRef = useRef(null)
+  const [groups, setGroups] = useState([])
+  const [selectedGroupId, setSelectedGroupId] = useState('')
+  const [units, setUnits] = useState([])
+  const [planTemplates, setPlanTemplates] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showModal, setShowModal] = useState(false)
+  const [editingUnit, setEditingUnit] = useState(null)
+  /** Abschnitts-Editor bei Bearbeitung: Planung vs. Nachbereitung (Ist & Abweichungen) */
+  const [sectionsEditMode, setSectionsEditMode] = useState('planning')
+  const [draftPlanTemplateId, setDraftPlanTemplateId] = useState('')
+  const [exercisePickerOpen, setExercisePickerOpen] = useState(false)
+  const [exercisePickerTarget, setExercisePickerTarget] = useState(null)
+  const [planningPeekCtx, setPlanningPeekCtx] = useState(null)
+
+  const today = new Date().toISOString().split('T')[0]
+  const thirtyDaysLater = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+  const [frameworkImportOpen, setFrameworkImportOpen] = useState(false)
+  const [frameworkProgramsList, setFrameworkProgramsList] = useState([])
+  const [fwImportProgramId, setFwImportProgramId] = useState('')
+  const [fwImportDetail, setFwImportDetail] = useState(null)
+  const [fwImportLoading, setFwImportLoading] = useState(false)
+  const [fwImportSelectedSlots, setFwImportSelectedSlots] = useState(() => new Set())
+  const [fwImportSlotDates, setFwImportSlotDates] = useState({})
+  const [fwImportStartDate, setFwImportStartDate] = useState(today)
+  const [fwImportIntervalDays, setFwImportIntervalDays] = useState(7)
+  const [fwImportSubmitting, setFwImportSubmitting] = useState(false)
+
+  const [moduleApplyOpen, setModuleApplyOpen] = useState(false)
+  const [moduleApplyBusy, setModuleApplyBusy] = useState(false)
+  const [moduleApplyList, setModuleApplyList] = useState([])
+  const [moduleApplyModuleId, setModuleApplyModuleId] = useState('')
+  const [moduleApplySectionIx, setModuleApplySectionIx] = useState(0)
+  const [moduleApplyInsertSlot, setModuleApplyInsertSlot] = useState('before:0')
+  const [moduleApplyErr, setModuleApplyErr] = useState('')
+  const [moduleApplyPlacementLocked, setModuleApplyPlacementLocked] = useState(false)
+  const [moduleApplySearchQuery, setModuleApplySearchQuery] = useState('')
+  const [modulePickPreview, setModulePickPreview] = useState({
+    loading: false,
+    moduleId: '',
+    exercises: [],
+    notes: 0,
+    err: '',
+  })
+
+  const [startDate, setStartDate] = useState(today)
+  const [endDate, setEndDate] = useState(thirtyDaysLater)
+  const [planView, setPlanView] = useState('list')
+  const [calendarMonthStr, setCalendarMonthStr] = useState(() => today.slice(0, 7))
+  const [planScope, setPlanScope] = useState('group')
+  const [assignedToMeOnly, setAssignedToMeOnly] = useState(false)
+  const [clubDirectory, setClubDirectory] = useState([])
+  const [assignModalOpen, setAssignModalOpen] = useState(false)
+  const [assignDraft, setAssignDraft] = useState({
+    unit: null,
+    lead_trainer_profile_id: '',
+    session_assistants_inherit: true,
+    session_assistant_profile_ids: [],
+  })
+  const [assignSaving, setAssignSaving] = useState(false)
+
+  const [formData, setFormData] = useState({
+    group_id: '',
+    planned_date: '',
+    planned_time_start: '',
+    planned_time_end: '',
+    planned_focus: '',
+    actual_date: '',
+    actual_time_start: '',
+    actual_time_end: '',
+    attendance_count: '',
+    status: 'planned',
+    notes: '',
+    trainer_notes: '',
+    debrief_completed: false,
+    sections: [defaultSection()],
+    ...sessionAssignDefaults()
+  })
+  const planningFormRef = useRef(formData)
+  planningFormRef.current = formData
+
+  const moduleApplyFilteredList = useMemo(() => {
+    const q = moduleApplySearchQuery.trim().toLowerCase().replace(/\s+/g, ' ')
+    const words = q ? q.split(' ').filter(Boolean) : []
+    const list = Array.isArray(moduleApplyList) ? moduleApplyList : []
+    if (!words.length) return list
+    return list.filter((m) => {
+      const blob = [
+        m.title,
+        m.summary,
+        m.goal,
+        m.target_group_notes,
+        m.deployment_context_notes,
+      ]
+        .map((x) => String(x ?? '').toLowerCase())
+        .join('\n')
+      return words.every((w) => blob.includes(w))
+    })
+  }, [moduleApplySearchQuery, moduleApplyList])
+
+  const modulePlacementSummary = useMemo(() => {
+    const secs = Array.isArray(formData.sections) ? formData.sections : []
+    let si =
+      typeof moduleApplySectionIx === 'number'
+        ? moduleApplySectionIx
+        : parseInt(String(moduleApplySectionIx), 10)
+    if (!Number.isFinite(si)) si = 0
+    si = Math.max(0, Math.min(si, secs.length ? secs.length - 1 : 0))
+    const cap = secs[si]?.items?.length ?? 0
+    let beforeIx = cap
+    if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
+      const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
+      if (Number.isFinite(zi)) beforeIx = Math.min(Math.max(0, zi), cap)
+    }
+    const rawTitle = (secs[si]?.title || '').trim()
+    const secTitle = rawTitle || `Abschnitt ${si + 1}`
+    let positionDescription
+    if (cap <= 0) positionDescription = 'als erste Einträge dieses Abschnitts'
+    else if (beforeIx <= 0) positionDescription = 'vor dem ersten Eintrag dieses Abschnitts'
+    else if (beforeIx >= cap) positionDescription = 'nach dem letzten Eintrag dieses Abschnitts'
+    else positionDescription = `unmittelbar vor Eintrag ${beforeIx + 1} (${cap} Einträge im Abschnitt)`
+    return { secTitle, positionDescription }
+  }, [formData.sections, moduleApplySectionIx, moduleApplyInsertSlot])
+
+  useEffect(() => {
+    if (!moduleApplyOpen || !moduleApplyFilteredList.length) return
+    if (moduleApplyFilteredList.some((m) => String(m.id) === String(moduleApplyModuleId))) return
+    setModuleApplyModuleId(String(moduleApplyFilteredList[0].id))
+  }, [moduleApplyOpen, moduleApplyFilteredList, moduleApplyModuleId])
+
+  const planningModalClubId = useMemo(() => {
+    const gid = Number(formData.group_id)
+    if (!Number.isFinite(gid) || gid < 1) return null
+    const g = groups.find((x) => Number(x.id) === gid)
+    if (!g || g.club_id == null || g.club_id === '') return null
+    const c = Number(g.club_id)
+    return Number.isFinite(c) ? c : null
+  }, [groups, formData.group_id])
+
+  const moduleApplyTargetItems = useMemo(() => {
+    const secs = formData.sections || []
+    if (!secs.length) return []
+    let ix =
+      typeof moduleApplySectionIx === 'number'
+        ? moduleApplySectionIx
+        : parseInt(String(moduleApplySectionIx), 10)
+    if (!Number.isFinite(ix)) ix = 0
+    if (ix < 0 || ix >= secs.length) return []
+    const sec = secs[ix]
+    return Array.isArray(sec?.items) ? sec.items : []
+  }, [formData.sections, moduleApplySectionIx])
+
+  const refreshPlanningSectionMeta = useCallback(async () => {
+    const next = await enrichSectionsWithVariants(planningFormRef.current.sections)
+    setFormData((prev) => ({ ...prev, sections: next }))
+  }, [])
+
+  const loadPlanTemplates = useCallback(async () => {
+    try {
+      const tpl = await api.listTrainingPlanTemplates()
+      setPlanTemplates(tpl)
+    } catch (e) {
+      console.error('Vorlagen laden:', e)
+    }
+  }, [])
+
+  const loadData = useCallback(async () => {
+    try {
+      const groupsData = await api.listTrainingGroups({ status: 'active' })
+      setGroups(groupsData)
+      await loadPlanTemplates()
+
+      if (groupsData.length > 0) {
+        setSelectedGroupId((prev) => {
+          const prevStr = prev != null && prev !== '' ? String(prev) : ''
+          const stillThere = prevStr && groupsData.some((g) => String(g.id) === prevStr)
+          if (stillThere) return prevStr
+          const ownGroup = groupsData.find((g) => g.trainer_id === user?.id)
+          if (ownGroup) return String(ownGroup.id)
+          if (groupsData.length === 1) return String(groupsData[0].id)
+          return ''
+        })
+      } else {
+        setSelectedGroupId('')
+      }
+    } catch (err) {
+      console.error('Failed to load data:', err)
+      toast.error('Fehler beim Laden: ' + err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [user?.id, loadPlanTemplates])
+
+  const loadUnits = useCallback(async () => {
+    if (!selectedGroupId) return
+    let start = startDate
+    let end = endDate
+    if (planView === 'calendar') {
+      const r = getCalendarGridRange(calendarMonthStr)
+      start = r.gridStart
+      end = r.gridEnd
+    }
+    const gid = parseInt(selectedGroupId, 10)
+    const groupRow = groups.find((g) => g.id === gid)
+    const clubId = groupRow?.club_id
+    try {
+      const filters = {
+        start_date: start,
+        end_date: end
+      }
+      if (assignedToMeOnly) {
+        filters.assigned_to_me = true
+      }
+      if (planScope === 'club' && clubId) {
+        filters.club_id = clubId
+      } else {
+        filters.group_id = gid
+      }
+      const unitsData = await api.listTrainingUnits(filters)
+      setUnits(unitsData)
+    } catch (err) {
+      console.error('Failed to load units:', err)
+    }
+  }, [
+    selectedGroupId,
+    groups,
+    startDate,
+    endDate,
+    planView,
+    calendarMonthStr,
+    planScope,
+    assignedToMeOnly
+  ])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData, tenantClubDepKey])
+
+  useEffect(() => {
+    if (selectedGroupId) {
+      loadUnits()
+    }
+  }, [selectedGroupId, loadUnits])
+
+  const selectedGroupClubIdMemo = useMemo(() => {
+    const g = groups.find((gr) => gr.id === parseInt(selectedGroupId, 10))
+    return g?.club_id != null ? Number(g.club_id) : null
+  }, [groups, selectedGroupId])
+
+  const canClubOrgTraining = useMemo(() => {
+    const r = (user?.role || '').toLowerCase()
+    if (r === 'admin' || r === 'superadmin') return true
+    if (selectedGroupClubIdMemo == null || !Number.isFinite(selectedGroupClubIdMemo)) return false
+    const row = activeClubMemberships(user?.clubs).find((c) => Number(c.id) === selectedGroupClubIdMemo)
+    return Array.isArray(row?.roles) && row.roles.includes('club_admin')
+  }, [user?.role, user?.clubs, selectedGroupClubIdMemo])
+
+  const clubAdminClubIdSet = useMemo(() => {
+    const ids = []
+    for (const c of activeClubMemberships(user?.clubs)) {
+      if (Array.isArray(c.roles) && c.roles.includes('club_admin')) {
+        const id = Number(c.id)
+        if (Number.isFinite(id)) ids.push(id)
+      }
+    }
+    return new Set(ids)
+  }, [user?.clubs])
+
+  useEffect(() => {
+    const gid = parseInt(formData.group_id || selectedGroupId || '0', 10)
+    const gModal = Number.isFinite(gid) && gid >= 1 ? groups.find((x) => x.id === gid) : null
+    const clubForModal = gModal?.club_id != null ? Number(gModal.club_id) : null
+
+    let assignModalClubId = null
+    if (assignModalOpen && assignDraft.unit?.group_id != null) {
+      const ug = Number(assignDraft.unit.group_id)
+      const gAssign = Number.isFinite(ug) ? groups.find((x) => x.id === ug) : null
+      if (gAssign?.club_id != null) assignModalClubId = Number(gAssign.club_id)
+    }
+
+    const loadClubId =
+      showModal && clubForModal != null && Number.isFinite(clubForModal)
+        ? clubForModal
+        : assignModalOpen && assignModalClubId != null && Number.isFinite(assignModalClubId)
+          ? assignModalClubId
+          : canClubOrgTraining && selectedGroupClubIdMemo != null && Number.isFinite(selectedGroupClubIdMemo)
+            ? selectedGroupClubIdMemo
+            : null
+
+    if (loadClubId == null || !Number.isFinite(loadClubId)) {
+      setClubDirectory([])
+      return undefined
+    }
+    let cancelled = false
+    ;(async () => {
+      try {
+        const d = await api.clubMembersDirectory(loadClubId)
+        if (!cancelled) setClubDirectory(Array.isArray(d) ? d : [])
+      } catch (err) {
+        if (!cancelled) {
+          console.error('Mitgliederverzeichnis:', err)
+          setClubDirectory([])
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [
+    showModal,
+    assignModalOpen,
+    assignDraft.unit,
+    formData.group_id,
+    selectedGroupId,
+    groups,
+    canClubOrgTraining,
+    selectedGroupClubIdMemo,
+  ])
+
+  useEffect(() => {
+    if (!frameworkImportOpen) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const list = await api.listTrainingFrameworkPrograms()
+        if (!cancelled) setFrameworkProgramsList(Array.isArray(list) ? list : [])
+      } catch (e) {
+        if (!cancelled) {
+          console.error('Rahmenprogramme laden:', e)
+          setFrameworkProgramsList([])
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [frameworkImportOpen])
+
+  const openFrameworkImportModal = useCallback(() => {
+    setFwImportProgramId('')
+    setFwImportDetail(null)
+    setFwImportSelectedSlots(new Set())
+    setFwImportSlotDates({})
+    setFwImportStartDate(new Date().toISOString().split('T')[0])
+    setFwImportIntervalDays(7)
+    setFrameworkImportOpen(true)
+  }, [])
+
+  const onFwImportProgramChange = async (idStr) => {
+    setFwImportProgramId(idStr)
+    if (!idStr) {
+      setFwImportDetail(null)
+      return
+    }
+    setFwImportLoading(true)
+    try {
+      const d = await api.getTrainingFrameworkProgram(parseInt(idStr, 10))
+      setFwImportDetail(d)
+      setFwImportSelectedSlots(new Set())
+      setFwImportSlotDates({})
+    } catch (e) {
+      toast.error(e.message || 'Rahmenprogramm laden fehlgeschlagen')
+      setFwImportDetail(null)
+    } finally {
+      setFwImportLoading(false)
+    }
+  }
+
+  const toggleFwImportSlot = (slot) => {
+    if (!slot?.blueprint_training_unit_id) return
+    const sid = slot.id
+    setFwImportSelectedSlots((prev) => {
+      const n = new Set(prev)
+      if (n.has(sid)) n.delete(sid)
+      else n.add(sid)
+      return n
+    })
+  }
+
+  const applyFwImportDateSuggestions = () => {
+    if (!fwImportDetail?.slots?.length) return
+    const sorted = [...fwImportDetail.slots].sort(
+      (a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)
+    )
+    let offset = 0
+    const iv = Math.max(0, Number(fwImportIntervalDays) || 0)
+    const next = {}
+    for (const s of sorted) {
+      if (!fwImportSelectedSlots.has(s.id)) continue
+      if (!s.blueprint_training_unit_id) continue
+      next[String(s.id)] = addDaysIsoDate(fwImportStartDate, offset)
+      offset += iv
+    }
+    setFwImportSlotDates((prev) => ({ ...prev, ...next }))
+  }
+
+  const submitFrameworkImport = async () => {
+    if (!selectedGroupId) {
+      toast.error('Bitte zuerst eine Trainingsgruppe wählen.')
+      return
+    }
+    const gid = parseInt(selectedGroupId, 10)
+    if (!fwImportDetail?.slots?.length) return
+    const sorted = [...fwImportDetail.slots].sort(
+      (a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)
+    )
+    const picks = sorted.filter(
+      (s) => fwImportSelectedSlots.has(s.id) && s.blueprint_training_unit_id
+    )
+    if (!picks.length) {
+      toast.error('Bitte mindestens eine Session mit Ablauf (Blueprint) auswählen.')
+      return
+    }
+    for (const s of picks) {
+      const key = String(s.id)
+      const date = fwImportSlotDates[key] || fwImportStartDate
+      if (!date) {
+        toast.error('Bitte für jede ausgewählte Session ein Datum setzen (oder Datumsvorschläge nutzen).')
+        return
+      }
+    }
+    setFwImportSubmitting(true)
+    try {
+      for (const s of picks) {
+        const key = String(s.id)
+        const date = fwImportSlotDates[key] || fwImportStartDate
+        await api.createTrainingUnitFromFrameworkSlot({
+          group_id: gid,
+          planned_date: date,
+          framework_slot_id: s.id,
+        })
+      }
+      setFrameworkImportOpen(false)
+      await loadUnits()
+    } catch (e) {
+      toast.error(e.message || 'Übernahme fehlgeschlagen')
+    } finally {
+      setFwImportSubmitting(false)
+    }
+  }
+
+  const handleCreate = () => {
+    if (!selectedGroupId) {
+      toast.error('Bitte wähle zuerst eine Trainingsgruppe')
+      return
+    }
+    const group = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
+    setEditingUnit(null)
+    setDraftPlanTemplateId('')
+    setFormData({
+      group_id: selectedGroupId,
+      planned_date: today,
+      planned_time_start: group?.time_start?.slice(0, 5) || '',
+      planned_time_end: group?.time_end?.slice(0, 5) || '',
+      planned_focus: '',
+      actual_date: '',
+      actual_time_start: '',
+      actual_time_end: '',
+      attendance_count: '',
+      status: 'planned',
+      notes: '',
+      trainer_notes: '',
+      debrief_completed: false,
+      sections: [defaultSection('Hauptteil')],
+      ...sessionAssignDefaults()
+    })
+    setSectionsEditMode('planning')
+    setShowModal(true)
+  }
+
+  const handleCreateForDate = (isoDay) => {
+    if (!selectedGroupId) {
+      toast.error('Bitte wähle zuerst eine Trainingsgruppe')
+      return
+    }
+    const group = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
+    setEditingUnit(null)
+    setDraftPlanTemplateId('')
+    setFormData({
+      group_id: selectedGroupId,
+      planned_date: isoDay,
+      planned_time_start: group?.time_start?.slice(0, 5) || '',
+      planned_time_end: group?.time_end?.slice(0, 5) || '',
+      planned_focus: '',
+      actual_date: '',
+      actual_time_start: '',
+      actual_time_end: '',
+      attendance_count: '',
+      status: 'planned',
+      notes: '',
+      trainer_notes: '',
+      debrief_completed: false,
+      sections: [defaultSection('Hauptteil')],
+      ...sessionAssignDefaults()
+    })
+    setSectionsEditMode('planning')
+    setShowModal(true)
+  }
+
+  const applyTemplateFromSelect = async (templateId) => {
+    setDraftPlanTemplateId(templateId)
+    if (!templateId) return
+    try {
+      const tpl = await api.getTrainingPlanTemplate(parseInt(templateId, 10))
+      setFormData((fd) => ({
+        ...fd,
+        sections: (tpl.sections || []).length
+          ? tpl.sections.map((s) => ({
+              title: s.title,
+              guidance_notes: s.guidance_text || '',
+              items: []
+            }))
+          : [defaultSection()]
+      }))
+    } catch (err) {
+      toast.error('Vorlage laden: ' + err.message)
+    }
+  }
+
+  const handleEdit = useCallback(async (unit) => {
+    try {
+      const fullUnit = await api.getTrainingUnit(unit.id)
+      setEditingUnit(fullUnit)
+      setDraftPlanTemplateId(fullUnit.plan_template_id ? String(fullUnit.plan_template_id) : '')
+      let sections = normalizeUnitToForm(fullUnit)
+      sections = await enrichSectionsWithVariants(sections)
+      setFormData({
+        group_id: fullUnit.group_id,
+        planned_date: fullUnit.planned_date || '',
+        planned_time_start: fullUnit.planned_time_start?.slice(0, 5) || '',
+        planned_time_end: fullUnit.planned_time_end?.slice(0, 5) || '',
+        planned_focus: fullUnit.planned_focus || '',
+        actual_date: fullUnit.actual_date || '',
+        actual_time_start: fullUnit.actual_time_start?.slice(0, 5) || '',
+        actual_time_end: fullUnit.actual_time_end?.slice(0, 5) || '',
+        attendance_count: fullUnit.attendance_count ?? '',
+        status: fullUnit.status || 'planned',
+        notes: fullUnit.notes || '',
+        trainer_notes: fullUnit.trainer_notes || '',
+        debrief_completed: Boolean(fullUnit.debrief_completed_at),
+        sections,
+        lead_trainer_profile_id:
+          fullUnit.lead_trainer_profile_id != null && fullUnit.lead_trainer_profile_id !== ''
+            ? String(fullUnit.lead_trainer_profile_id)
+            : '',
+        session_assistants_inherit:
+          fullUnit.assistant_trainer_profile_ids == null ||
+          fullUnit.assistant_trainer_profile_ids === undefined,
+        session_assistant_profile_ids: (() => {
+          const efLead =
+            fullUnit.effective_lead_trainer_profile_id != null
+              ? Number(fullUnit.effective_lead_trainer_profile_id)
+              : null
+          let xs = toNumList(fullUnit.assistant_trainer_profile_ids)
+          if (efLead != null && Number.isFinite(efLead)) xs = xs.filter((id) => id !== efLead)
+          return xs
+        })(),
+      })
+      setSectionsEditMode(fullUnit.status === 'completed' ? 'debrief' : 'planning')
+      setShowModal(true)
+    } catch (err) {
+      toast.error('Fehler beim Laden: ' + err.message)
+      throw err
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!user?.id || loading) return
+    const uid = searchParams.get('unit')
+    if (!uid) {
+      unitDeepLinkHandledRef.current = null
+      return
+    }
+    if (unitDeepLinkHandledRef.current === uid) return
+    const idNum = parseInt(uid, 10)
+    if (!Number.isFinite(idNum)) return
+    unitDeepLinkHandledRef.current = uid
+    handleEdit({ id: idNum })
+      .then(() => {
+        setSearchParams(
+          (prev) => {
+            const next = new URLSearchParams(prev)
+            next.delete('unit')
+            next.delete('debrief')
+            return next
+          },
+          { replace: true }
+        )
+      })
+      .catch(() => {
+        unitDeepLinkHandledRef.current = null
+        setSearchParams(
+          (prev) => {
+            const next = new URLSearchParams(prev)
+            next.delete('unit')
+            next.delete('debrief')
+            return next
+          },
+          { replace: true }
+        )
+      })
+  }, [user?.id, loading, searchParams, handleEdit, setSearchParams])
+
+  const handleSaveAsTemplate = async () => {
+    const name = window.prompt('Name für die neue Trainingsvorlage (nur Abschnitts-Gliederung):')
+    if (!name?.trim()) return
+    try {
+      await api.createTrainingPlanTemplate({
+        name: name.trim(),
+        sections: formData.sections.map((s) => ({
+          title: s.title || 'Abschnitt',
+          guidance_text: s.guidance_notes?.trim() ? s.guidance_notes.trim() : null
+        }))
+      })
+      await loadPlanTemplates()
+      toast.success('Vorlage gespeichert.')
+    } catch (err) {
+      toast.error('Speichern: ' + err.message)
+    }
+  }
+
+  const openModuleApplyModal = useCallback(async (placement) => {
+    setModuleApplyErr('')
+    setModuleApplySearchQuery('')
+    const placementLocked =
+      placement != null &&
+      typeof placement.sectionIndex === 'number' &&
+      typeof placement.insertBeforeIndex === 'number'
+    setModuleApplyPlacementLocked(placementLocked)
+    const secs = planningFormRef.current?.sections ?? []
+    let secIx = 0
+    let before = 0
+    if (secs.length) {
+      if (placement && typeof placement.sectionIndex === 'number') {
+        secIx = Math.min(Math.max(0, placement.sectionIndex), secs.length - 1)
+        const items = Array.isArray(secs[secIx]?.items) ? secs[secIx].items : []
+        const cap = items.length
+        if (typeof placement.insertBeforeIndex === 'number' && Number.isFinite(placement.insertBeforeIndex)) {
+          before = Math.min(Math.max(0, placement.insertBeforeIndex), cap)
+        } else before = cap
+      } else {
+        const items = Array.isArray(secs[0]?.items) ? secs[0].items : []
+        before = items.length
+        secIx = 0
+      }
+    }
+    setModuleApplySectionIx(secIx)
+    setModuleApplyInsertSlot(`before:${before}`)
+    setModuleApplyOpen(true)
+    try {
+      const list = await api.listTrainingModules()
+      const arr = Array.isArray(list) ? list : []
+      setModuleApplyList(arr)
+      setModuleApplyModuleId(arr.length ? String(arr[0].id) : '')
+    } catch (e) {
+      setModuleApplyErr(e.message || 'Module konnten nicht geladen werden')
+      setModuleApplyList([])
+    }
+  }, [])
+
+  const onModuleApplySectionIndexChange = useCallback((newIx) => {
+    setModuleApplySectionIx(newIx)
+    const secsNow = planningFormRef.current?.sections ?? []
+    const len = Array.isArray(secsNow[newIx]?.items) ? secsNow[newIx].items.length : 0
+    setModuleApplyInsertSlot(`before:${len}`)
+  }, [])
+
+  const handleApplyTrainingModuleConfirm = useCallback(async () => {
+    const mid = parseInt(moduleApplyModuleId, 10)
+    if (!Number.isFinite(mid)) {
+      toast.error('Bitte ein Trainingsmodul wählen.')
+      return
+    }
+    let secIx = parseInt(String(moduleApplySectionIx), 10)
+    if (!Number.isFinite(secIx)) secIx = 0
+
+    const baseSections = planningFormRef.current?.sections ?? formData.sections ?? []
+    if (!baseSections.length) {
+      toast.error('Keine Abschnitte im Formular.')
+      return
+    }
+    if (secIx < 0 || secIx >= baseSections.length) secIx = 0
+
+    const secItems = Array.isArray(baseSections[secIx]?.items) ? baseSections[secIx].items : []
+    const itemCap = secItems.length
+    let insertBefore = itemCap
+    if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
+      const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
+      if (Number.isFinite(zi)) insertBefore = Math.min(Math.max(0, zi), itemCap)
+    }
+
+    setModuleApplyBusy(true)
+    setModuleApplyErr('')
+    try {
+      const detail = await api.getTrainingModule(mid)
+      let nextSections = await insertTrainingModuleIntoPlanningSections({
+        sections: baseSections,
+        moduleDetail: detail,
+        sectionIndex: secIx,
+        insertBeforeItemIndex: insertBefore,
+      })
+      nextSections = await enrichSectionsWithVariants(nextSections)
+      setFormData((fd) => ({ ...fd, sections: nextSections }))
+      setModuleApplyOpen(false)
+      setModuleApplyPlacementLocked(false)
+    } catch (e) {
+      setModuleApplyErr(e.message || 'Einfügen fehlgeschlagen')
+    } finally {
+      setModuleApplyBusy(false)
+    }
+  }, [moduleApplyModuleId, moduleApplySectionIx, moduleApplyInsertSlot])
+
+  useEffect(() => {
+    if (!moduleApplyOpen) {
+      setModulePickPreview({
+        loading: false,
+        moduleId: '',
+        exercises: [],
+        notes: 0,
+        err: '',
+      })
+      return undefined
+    }
+    const mid = parseInt(String(moduleApplyModuleId), 10)
+    if (!Number.isFinite(mid) || mid < 1) {
+      setModulePickPreview({
+        loading: false,
+        moduleId: '',
+        exercises: [],
+        notes: 0,
+        err: '',
+      })
+      return undefined
+    }
+    let cancelled = false
+    setModulePickPreview({
+      loading: true,
+      moduleId: String(mid),
+      exercises: [],
+      notes: 0,
+      err: '',
+    })
+    ;(async () => {
+      try {
+        const detail = await api.getTrainingModule(mid)
+        if (cancelled) return
+        const itemsSorted = [...(detail.items ?? [])].sort(
+          (a, b) => (a.order_index ?? 0) - (b.order_index ?? 0)
+        )
+        const uniqueEx = new Set()
+        let notes = 0
+        for (const row of itemsSorted) {
+          if ((row.item_type || '') !== 'note') {
+            const eid = row.exercise_id
+            if (eid) uniqueEx.add(Number(eid))
+            continue
+          }
+          const b = String(row.note_body ?? '').trim()
+          if (b === '---') continue
+          notes += 1
+        }
+        const titleById = new Map()
+        await Promise.all(
+          [...uniqueEx].map(async (eid) => {
+            try {
+              const ex = await api.getExercise(eid)
+              titleById.set(eid, (ex?.title || '').trim() || `Übung #${eid}`)
+            } catch {
+              titleById.set(eid, `Übung #${eid}`)
+            }
+          })
+        )
+        if (cancelled) return
+        const exTitlesInOrder = []
+        for (const row of itemsSorted) {
+          if ((row.item_type || '') !== 'exercise') continue
+          const eid = Number(row.exercise_id)
+          if (!Number.isFinite(eid)) continue
+          exTitlesInOrder.push(titleById.get(eid) || `Übung #${eid}`)
+        }
+        setModulePickPreview({
+          loading: false,
+          moduleId: String(mid),
+          exercises: exTitlesInOrder,
+          notes,
+          err: '',
+        })
+      } catch (e) {
+        if (!cancelled) {
+          setModulePickPreview({
+            loading: false,
+            moduleId: String(mid),
+            exercises: [],
+            notes: 0,
+            err: e?.message || 'Vorschau fehlgeschlagen',
+          })
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [moduleApplyOpen, moduleApplyModuleId])
+
+  const handleTakeLead = async (unit) => {
+    if (!user?.id) return
+    try {
+      await api.updateTrainingUnit(unit.id, { lead_trainer_profile_id: user.id })
+      await loadUnits()
+    } catch (err) {
+      toast.error(err.message || 'Leitung konnte nicht übernommen werden')
+    }
+  }
+
+  const openTrainerAssignModal = (unit) => {
+    const effLead =
+      unit.effective_lead_trainer_profile_id != null
+        ? Number(unit.effective_lead_trainer_profile_id)
+        : null
+    let coIds = toNumList(unit.assistant_trainer_profile_ids)
+    if (effLead != null && Number.isFinite(effLead)) {
+      coIds = coIds.filter((id) => id !== effLead)
+    }
+    setAssignDraft({
+      unit,
+      lead_trainer_profile_id:
+        unit.lead_trainer_profile_id != null && unit.lead_trainer_profile_id !== ''
+          ? String(unit.lead_trainer_profile_id)
+          : '',
+      session_assistants_inherit:
+        unit.assistant_trainer_profile_ids == null || unit.assistant_trainer_profile_ids === undefined,
+      session_assistant_profile_ids: coIds,
+    })
+    setAssignModalOpen(true)
+  }
+
+  const saveTrainerAssignModal = async () => {
+    if (!assignDraft.unit) return
+    setAssignSaving(true)
+    try {
+      const payload = {}
+      const leadStr = String(assignDraft.lead_trainer_profile_id || '').trim()
+      if (leadStr) payload.lead_trainer_profile_id = parseInt(leadStr, 10)
+      else payload.lead_trainer_profile_id = null
+      if (assignDraft.session_assistants_inherit) {
+        payload.assistant_trainer_profile_ids = null
+      } else {
+        payload.assistant_trainer_profile_ids = [...assignDraft.session_assistant_profile_ids].sort((a, b) => a - b)
+      }
+      await api.updateTrainingUnit(assignDraft.unit.id, payload)
+      setAssignModalOpen(false)
+      setAssignDraft({
+        unit: null,
+        ...sessionAssignDefaults(),
+      })
+      await loadUnits()
+    } catch (err) {
+      toast.error(err.message || 'Zuweisung konnte nicht gespeichert werden')
+    } finally {
+      setAssignSaving(false)
+    }
+  }
+
+  const handleAssignLeadSelectChange = useCallback((v) => {
+    setAssignDraft((prev) => {
+      const exclude = []
+      const tr = String(v || '').trim()
+      if (tr !== '') {
+        const n = parseInt(tr, 10)
+        if (Number.isFinite(n)) exclude.push(n)
+      } else if (prev.unit?.effective_lead_trainer_profile_id != null) {
+        const ef = Number(prev.unit.effective_lead_trainer_profile_id)
+        if (Number.isFinite(ef)) exclude.push(ef)
+      }
+      const exSet = new Set(exclude)
+      const co = exclude.length
+        ? prev.session_assistant_profile_ids.filter((x) => !exSet.has(x))
+        : prev.session_assistant_profile_ids
+      return { ...prev, lead_trainer_profile_id: v, session_assistant_profile_ids: co }
+    })
+  }, [])
+
+  const handleAssignAssistantsInheritChange = useCallback((checked) => {
+    setAssignDraft((prev) => ({
+      ...prev,
+      session_assistants_inherit: checked,
+    }))
+  }, [])
+
+  const handleAssignCoTrainerToggle = useCallback((mid) => {
+    setAssignDraft((prev) => {
+      const was = prev.session_assistant_profile_ids.includes(mid)
+      const nextIds = was
+        ? prev.session_assistant_profile_ids.filter((x) => x !== mid)
+        : [...prev.session_assistant_profile_ids, mid].sort((a, b) => a - b)
+      return { ...prev, session_assistant_profile_ids: nextIds }
+    })
+  }, [])
+
+  const handleDelete = async (unit) => {
+    if (!confirm(`Trainingseinheit vom ${unit.planned_date} wirklich löschen?`)) return
+    try {
+      await api.deleteTrainingUnit(unit.id)
+      await loadUnits()
+    } catch (err) {
+      toast.error('Fehler beim Löschen: ' + err.message)
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!formData.group_id || !formData.planned_date) {
+      toast.error('Gruppe und Datum sind Pflichtfelder')
+      return
+    }
+    try {
+      const planPart = buildPlanPayloadForSave(formData.sections)
+      const payload = {
+        planned_date: formData.planned_date,
+        planned_time_start: formData.planned_time_start || null,
+        planned_time_end: formData.planned_time_end || null,
+        planned_focus: formData.planned_focus || null,
+        actual_date: formData.actual_date || null,
+        actual_time_start: formData.actual_time_start || null,
+        actual_time_end: formData.actual_time_end || null,
+        attendance_count: formData.attendance_count ? parseInt(formData.attendance_count, 10) : null,
+        status: formData.status || 'planned',
+        notes: formData.notes || null,
+        trainer_notes: formData.trainer_notes || null,
+        ...planPart,
+      }
+      if (editingUnit) {
+        payload.debrief_completed =
+          (formData.status || '') === 'completed' ? !!formData.debrief_completed : false
+      }
+      const leadStr = String(formData.lead_trainer_profile_id || '').trim()
+      if (leadStr) {
+        payload.lead_trainer_profile_id = parseInt(leadStr, 10)
+      } else if (editingUnit) {
+        payload.lead_trainer_profile_id = null
+      }
+      if (formData.session_assistants_inherit) {
+        if (editingUnit) payload.assistant_trainer_profile_ids = null
+      } else {
+        payload.assistant_trainer_profile_ids = [...formData.session_assistant_profile_ids].sort(
+          (a, b) => a - b
+        )
+      }
+      if (!editingUnit) {
+        payload.group_id = parseInt(formData.group_id, 10)
+        if (draftPlanTemplateId) {
+          payload.plan_template_id = parseInt(draftPlanTemplateId, 10)
+        }
+      }
+
+      if (editingUnit) {
+        await api.updateTrainingUnit(editingUnit.id, payload)
+      } else {
+        await api.createTrainingUnit(payload)
+      }
+      setShowModal(false)
+      await loadUnits()
+    } catch (err) {
+      toast.error('Fehler beim Speichern: ' + err.message)
+    }
+  }
+
+  const updateFormField = (field, value) => {
+    setFormData((prev) => {
+      if (field !== 'lead_trainer_profile_id') {
+        const patch = { ...prev, [field]: value }
+        if (field === 'status' && value !== 'completed') {
+          patch.debrief_completed = false
+        }
+        return patch
+      }
+      const ts = typeof value === 'string' ? value.trim() : String(value ?? '').trim()
+      const strip = new Set()
+      if (ts !== '') {
+        const nid = parseInt(ts, 10)
+        if (Number.isFinite(nid)) strip.add(nid)
+      } else {
+        const gidParsed = parseInt(prev.group_id || selectedGroupId || '0', 10)
+        const gr =
+          Number.isFinite(gidParsed) && gidParsed >= 1
+            ? groups.find((xg) => xg.id === gidParsed)
+            : null
+        if (gr?.trainer_id != null) {
+          const ht = Number(gr.trainer_id)
+          if (Number.isFinite(ht)) strip.add(ht)
+        }
+      }
+      const assistants = prev.session_assistant_profile_ids.filter((id) => !strip.has(id))
+      return { ...prev, lead_trainer_profile_id: value, session_assistant_profile_ids: assistants }
+    })
+  }
+
+  const calendarGridDays = useMemo(() => {
+    const r = getCalendarGridRange(calendarMonthStr)
+    return enumerateIsoDays(r.gridStart, r.gridEnd)
+  }, [calendarMonthStr])
+
+  const unitsByPlannedDate = useMemo(() => {
+    const m = new Map()
+    for (const u of units) {
+      const raw = u.planned_date
+      if (!raw) continue
+      const key = String(raw).slice(0, 10)
+      if (!m.has(key)) m.set(key, [])
+      m.get(key).push(u)
+    }
+    return m
+  }, [units])
+
+  const calendarMonthTitle = useMemo(() => {
+    const p = calendarMonthStr.split('-').map(Number)
+    const y = p[0]
+    const mo = p[1]
+    if (!y || !mo) return ''
+    return new Date(y, mo - 1, 1).toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })
+  }, [calendarMonthStr])
+
+  const mayConfigureSessionAssignments = useCallback(
+    (unit) => {
+      if (!unit) return false
+      const pid = Number(user?.id)
+      if (!Number.isFinite(pid)) return false
+      const r = (user?.role || '').toLowerCase()
+      if (r === 'admin' || r === 'superadmin') return true
+
+      const gClub = unit.group_club_id != null ? Number(unit.group_club_id) : null
+      if (Number.isFinite(gClub) && clubAdminClubIdSet.has(gClub)) return true
+
+      const gid = Number(unit.group_id)
+      const g = groups.find((gr) => gr.id === gid)
+      if (!g) return false
+
+      const cb = unit.created_by != null ? Number(unit.created_by) : NaN
+      if (Number.isFinite(cb) && cb === pid) return true
+
+      const ht = g.trainer_id != null ? Number(g.trainer_id) : NaN
+      if (Number.isFinite(ht) && ht === pid) return true
+
+      return normalizeGroupCoTrainerIds(g.co_trainer_ids).includes(pid)
+    },
+    [user?.id, user?.role, groups, clubAdminClubIdSet]
+  )
+
+  if (loading) {
+    return (
+      <div className="app-page" style={{ padding: '2rem 0', textAlign: 'center' }}>
+        <div className="spinner"></div>
+        <p>Laden...</p>
+      </div>
+    )
+  }
+
+  const selectedGroup = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
+
+  const gidTrainerForm = parseInt(formData.group_id || selectedGroupId || '0', 10)
+  const groupForTrainerForm =
+    Number.isFinite(gidTrainerForm) && gidTrainerForm >= 1
+      ? groups.find((gr) => gr.id === gidTrainerForm)
+      : null
+
+  let formTrainerAssignLeadExcludeId = null
+  if (groupForTrainerForm?.trainer_id != null) formTrainerAssignLeadExcludeId = Number(groupForTrainerForm.trainer_id)
+  const leadDraftTrim = String(formData.lead_trainer_profile_id || '').trim()
+  if (leadDraftTrim !== '') {
+    const nl = parseInt(leadDraftTrim, 10)
+    if (Number.isFinite(nl)) formTrainerAssignLeadExcludeId = nl
+  }
+  if (editingUnit?.effective_lead_trainer_profile_id != null && leadDraftTrim === '') {
+    const el = Number(editingUnit.effective_lead_trainer_profile_id)
+    if (Number.isFinite(el)) formTrainerAssignLeadExcludeId = el
+  }
+
+  const clubDirectoryForCo = filterDirectoryExcludingLead(clubDirectory, formTrainerAssignLeadExcludeId)
+
+  let assignExcludeLeadPid = null
+  if (assignModalOpen && assignDraft.unit) {
+    const dl = String(assignDraft.lead_trainer_profile_id || '').trim()
+    if (dl !== '') {
+      const n = parseInt(dl, 10)
+      assignExcludeLeadPid = Number.isFinite(n) ? n : null
+    } else if (assignDraft.unit.effective_lead_trainer_profile_id != null) {
+      const n = Number(assignDraft.unit.effective_lead_trainer_profile_id)
+      assignExcludeLeadPid = Number.isFinite(n) ? n : null
+    }
+  }
+  const clubDirectoryForAssignCo = filterDirectoryExcludingLead(clubDirectory, assignExcludeLeadPid)
+
+  return (
+    <div className="app-page">
+        <h1 style={{ marginBottom: '0.35rem' }}>Trainingsplanung</h1>
+
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: '1rem',
+          }}
+        >
+          <span
+            className="form-label"
+            style={{
+              marginBottom: 0,
+              fontSize: '0.9rem',
+              color: 'var(--text2)',
+            }}
+          >
+            Ansicht
+          </span>
+          <PageSectionNav
+            semantics="toggle"
+            ariaLabel="Darstellung Liste oder Kalender"
+            value={planView}
+            onChange={(id) => {
+              if (id === 'calendar') {
+                setPlanView('calendar')
+                setCalendarMonthStr((prev) => {
+                  const fromList = (startDate || '').slice(0, 7)
+                  if (/^\d{4}-\d{2}$/.test(fromList)) return fromList
+                  return prev || new Date().toISOString().slice(0, 7)
+                })
+              } else {
+                setPlanView('list')
+              }
+            }}
+            items={[
+              { id: 'list', label: 'Liste' },
+              { id: 'calendar', label: 'Kalender' },
+            ]}
+            className="page-section-nav--inline planning-ansicht-nav"
+          />
+          <span style={{ fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.35, maxWidth: '22rem' }}>
+            {planView === 'list'
+              ? 'Zeitraum unten mit Von/Bis filtern.'
+              : 'Monat unten wechseln; Termine erscheinen im Raster.'}
+          </span>
+        </div>
+
+        <p style={{ color: 'var(--text2)', fontSize: '0.95rem', marginBottom: '1.25rem' }}>
+          Wähle eine Trainingsgruppe und lege <strong>Trainingseinheiten</strong> für den Zeitraum an (Inhalt: Abschnitte
+          und Übungen).
+        </p>
+
+        <div className="card" style={{ marginBottom: '1.25rem', padding: '12px 14px' }}>
+          <p style={{ margin: '0 0 0.5rem', fontSize: '0.92rem', color: 'var(--text2)' }}>
+            Mehrere Einheiten strukturieren auf einmal:{' '}
+            <Link to="/planning/framework-programs" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
+              Trainingsrahmenprogramme
+            </Link>{' '}
+            (Ziele, Sessions, Vorlagen‑Ablauf).
+          </p>
+          <p style={{ margin: 0, fontSize: '0.92rem', color: 'var(--text2)' }}>
+            Wiederverwendbare Blöcke innerhalb einer Einheit:{' '}
+            <Link to="/planning/training-modules" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
+              Trainingsmodule
+            </Link>{' '}
+            (übernahme als Kopie beim Bearbeiten einer Einheit).
+          </p>
+        </div>
+        {!loading && groups.length === 0 && (
+          <div
+            className="card"
+            style={{
+              marginBottom: '1.25rem',
+              borderLeft: '4px solid var(--accent)',
+              padding: '1rem 1.25rem'
+            }}
+          >
+            <h2 style={{ fontSize: '1.1rem', marginBottom: '0.5rem' }}>Erst Verein & Gruppe anlegen</h2>
+            <p style={{ color: 'var(--text2)', marginBottom: '0.85rem', lineHeight: 1.5 }}>
+              Ohne Trainingsgruppe kann hier nichts gebucht werden. Unter <strong>Vereine</strong> legst du einen Verein an
+              (kurzer Name genügt), optional eine Sparte, dann eine <strong>Trainingsgruppe</strong>. Wochentage, feste Zeiten oder
+              Eigenschaften sind optional und kannst du später ergänzen.
+            </p>
+            <Link to="/clubs" className="btn btn-primary" style={{ textDecoration: 'none' }}>
+              Zu Vereinen & Trainingsgruppen
+            </Link>
+          </div>
+        )}
+
+        <div className="card" style={{ marginBottom: '1.5rem' }}>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: '1rem'
+            }}
+          >
+            <div>
+              <label className="form-label">Trainingsgruppe</label>
+              <select
+                className="form-input"
+                value={selectedGroupId}
+                onChange={(e) => setSelectedGroupId(e.target.value)}
+              >
+                <option value="">Bitte wählen</option>
+                {groups.map((g) => (
+                  <option key={g.id} value={g.id}>
+                    {g.name} ({g.club_name})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {planView === 'list' ? (
+              <>
+                <div>
+                  <label className="form-label">Von</label>
+                  <input
+                    type="date"
+                    className="form-input"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                  />
+                </div>
+
+                <div>
+                  <label className="form-label">Bis</label>
+                  <input
+                    type="date"
+                    className="form-input"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                  />
+                </div>
+              </>
+            ) : (
+              <div
+                style={{
+                  gridColumn: '1 / -1',
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  gap: '0.65rem',
+                }}
+              >
+                <button
+                  type="button"
+                  className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                  aria-label="Voriger Monat"
+                  onClick={() => setCalendarMonthStr((prev) => shiftCalendarMonth(prev, -1))}
+                >
+                  ←
+                </button>
+                <span
+                  style={{
+                    fontWeight: 600,
+                    fontSize: '1rem',
+                    flex: '1 1 auto',
+                    textAlign: 'center',
+                    minWidth: '12rem',
+                  }}
+                >
+                  {calendarMonthTitle}
+                </span>
+                <button
+                  type="button"
+                  className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                  aria-label="Nächster Monat"
+                  onClick={() => setCalendarMonthStr((prev) => shiftCalendarMonth(prev, 1))}
+                >
+                  →
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  style={{ whiteSpace: 'nowrap', padding: '0.35rem 0.65rem', fontSize: '0.85rem' }}
+                  onClick={() => setCalendarMonthStr(new Date().toISOString().slice(0, 7))}
+                >
+                  Aktueller Monat
+                </button>
+              </div>
+            )}
+
+            <div
+              style={{
+                gridColumn: '1 / -1',
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
+              <span className="form-label" style={{ marginBottom: 0, alignSelf: 'center' }}>
+                Einblenden
+              </span>
+              <PageSectionNav
+                semantics="toggle"
+                ariaLabel="Gruppe oder ganzer Verein"
+                value={planScope}
+                onChange={setPlanScope}
+                items={[
+                  { id: 'group', label: 'Nur diese Gruppe', disabled: !selectedGroupId },
+                  { id: 'club', label: 'Ganzer Verein', disabled: !selectedGroupId },
+                ]}
+                className="page-section-nav--inline"
+              />
+              <label
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  fontSize: '0.88rem',
+                  color: 'var(--text2)',
+                  cursor: selectedGroupId ? 'pointer' : 'default',
+                  opacity: selectedGroupId ? 1 : 0.65,
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={assignedToMeOnly}
+                  disabled={!selectedGroupId}
+                  onChange={(e) => setAssignedToMeOnly(e.target.checked)}
+                />
+                Nur meine Zuordnung (Leitung / Co)
+              </label>
+              <p
+                style={{
+                  fontSize: '0.78rem',
+                  color: 'var(--text3)',
+                  lineHeight: 1.45,
+                  flex: '1 1 220px',
+                  margin: 0,
+                }}
+              >
+                Neue Termine gelten immer für die gewählte Gruppe. „Ganzer Verein“ zeigt zusätzlich Termine
+                anderer Gruppen desselben Vereins.
+              </p>
+              <details className="planning-filter-help">
+                <summary className="planning-filter-help__summary">Mehr zu Ansicht &amp; Trainerzuordnung</summary>
+                <div className="planning-filter-help__body">
+                  <p style={{ margin: '0 0 0.65rem' }}>
+                    „Ganzer Verein“ bezieht sich auf denselben Verein wie die gewählte Gruppe. Neu angelegte Termine
+                    beziehen sich weiterhin auf die Gruppe, die du oben gewählt hast.
+                  </p>
+                  {selectedGroupId ? (
+                    <p style={{ margin: 0 }}>
+                      Über <strong>Trainer</strong> oder <strong>Trainer zuweisen</strong> bearbeitest du Leitung und
+                      Co je Einheit (berechtigt: Vereinsorganisation, Haupt-/Co‑Trainer der Gruppe sowie Erstellung
+                      der Einheit). Das Mitgliederverzeichnis listet nur eigene Vereinsmitglieder; die Leitung erscheint
+                      nicht unter Co‑Trainer.
+                    </p>
+                  ) : (
+                    <p style={{ margin: 0, color: 'var(--text3)' }}>
+                      Wähle zuerst eine Gruppe — dann erweitert sich die Hilfe zu Trainer und Berechtigungen.
+                    </p>
+                  )}
+                </div>
+              </details>
+            </div>
+          </div>
+
+          {selectedGroup && (
+            <div
+              style={{
+                marginTop: '1rem',
+                padding: '1rem',
+                background: 'var(--surface2)',
+                borderRadius: '8px'
+              }}
+            >
+              <p style={{ fontSize: '0.875rem', color: 'var(--text2)' }}>
+                {selectedGroup.location || 'Kein Ort angegeben'}
+                {selectedGroup.weekday && ` · ${selectedGroup.weekday}`}
+                {selectedGroup.time_start &&
+                  ` · ${selectedGroup.time_start.slice(0, 5)} - ${selectedGroup.time_end?.slice(0, 5)}`}
+              </p>
+            </div>
+          )}
+
+          <div className="training-planning-create training-planning-create--in-card">
+            <div className="training-planning-create__intro">
+              <h3 className="training-planning-create__title">Neue Trainingseinheit</h3>
+              <p className="training-planning-create__lede">
+                Datum, Zeiten und Ablauf (Abschnitte &amp; Übungen) — optional{' '}
+                <strong>Trainingsvorlage</strong> oder Inhalte aus einem <strong>Rahmenprogramm</strong> im Dialog.
+              </p>
+              {!selectedGroupId && (
+                <p className="training-planning-create__hint training-planning-create__hint--warn">
+                  Wähle oben eine Trainingsgruppe, um fortzufahren.
+                </p>
+              )}
+              {groups.length === 0 && (
+                <p className="training-planning-create__hint training-planning-create__hint--warn">
+                  Es gibt noch keine aktive Trainingsgruppe — unter{' '}
+                  <Link to="/clubs">Vereine</Link> anlegen oder aktivieren.
+                </p>
+              )}
+            </div>
+            <div className="training-planning-create__actions">
+              <button
+                type="button"
+                className="btn btn-primary training-planning-create__cta"
+                disabled={!selectedGroupId}
+                title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
+                onClick={handleCreate}
+              >
+                Trainingseinheit planen…
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary training-planning-create__secondary"
+                disabled={!selectedGroupId}
+                title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
+                onClick={openFrameworkImportModal}
+              >
+                Aus Rahmen übernehmen…
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {!selectedGroupId ? (
+          <div className="card">
+            <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
+              Wähle oben eine Trainingsgruppe — danach kannst du unter{' '}
+              <strong>„Trainingseinheit planen…“</strong> einen Termin anlegen.
+            </p>
+          </div>
+        ) : planView === 'calendar' ? (
+          <div className="card" style={{ padding: 'clamp(8px, 2vw, 14px)', overflowX: 'auto' }}>
+            {units.length === 0 ? (
+              <p style={{ color: 'var(--text2)', fontSize: '0.88rem', margin: '0 0 12px', lineHeight: 1.45 }}>
+                Im sichtbaren Monatsbereich liegt noch keine Einheit. Über <strong>+</strong> in einem Tag legst du einen
+                neuen Termin mit Datum an.
+              </p>
+            ) : null}
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+                gap: '4px',
+                minWidth: 'min(960px, 100%)',
+              }}
+              role="grid"
+              aria-label={`Kalender ${calendarMonthTitle}`}
+            >
+              {WEEKDAYS_DE.map((w) => (
+                <div
+                  key={w}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: '0.72rem',
+                    textAlign: 'center',
+                    padding: '6px 2px',
+                    color: 'var(--text3)',
+                  }}
+                  role="columnheader"
+                >
+                  {w}
+                </div>
+              ))}
+              {calendarGridDays.map((dayIso) => {
+                const inMonth = dayIso.slice(0, 7) === calendarMonthStr
+                const dayNum = parseInt(dayIso.slice(8, 10), 10)
+                const isTodayMarker = dayIso === today
+                const dayUnits = unitsByPlannedDate.get(dayIso) || []
+                return (
+                  <div
+                    key={dayIso}
+                    role="gridcell"
+                    style={{
+                      minHeight: '96px',
+                      border: '1px solid var(--border, rgba(0, 0, 0, 0.1))',
+                      borderRadius: '6px',
+                      padding: '5px',
+                      background: inMonth ? 'var(--surface)' : 'var(--surface2)',
+                      opacity: inMonth ? 1 : 0.58,
+                      boxShadow: isTodayMarker ? 'inset 0 0 0 2px var(--accent-dark, #256)' : undefined,
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                        gap: '4px',
+                        marginBottom: '6px',
+                      }}
+                    >
+                      <span style={{ fontWeight: 700, fontSize: '0.82rem', lineHeight: 1 }}>{dayNum}</span>
+                      <button
+                        type="button"
+                        className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                        title={`Neue Trainingseinheit am ${dayIso}`}
+                        aria-label={`Neue Trainingseinheit am ${dayIso}`}
+                        onClick={() => handleCreateForDate(dayIso)}
+                        disabled={!selectedGroupId}
+                        style={{ padding: '2px 6px', flexShrink: 0 }}
+                      >
+                        +
+                      </button>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                      {dayUnits.slice(0, 3).map((unit) => (
+                        <div
+                          key={unit.id}
+                          style={{ display: 'flex', flexDirection: 'column', gap: '4px', width: '100%' }}
+                        >
+                          <button
+                            type="button"
+                            onClick={() => handleEdit(unit)}
+                            title={[
+                              planScope === 'club' && unit.group_name ? unit.group_name : '',
+                              unit.planned_time_start?.slice(0, 5) || '',
+                              unit.lead_trainer_name?.trim(),
+                              unit.planned_focus?.trim(),
+                              unit.status === 'completed'
+                                ? 'Durchgeführt'
+                                : unit.status === 'cancelled'
+                                  ? 'Abgesagt'
+                                  : 'Geplant',
+                            ]
+                              .filter(Boolean)
+                              .join(' · ')}
+                            style={{
+                              border: 'none',
+                              cursor: 'pointer',
+                              textAlign: 'left',
+                              padding: '4px 5px',
+                              borderRadius: '4px',
+                              fontSize: '0.7rem',
+                              lineHeight: 1.25,
+                              width: '100%',
+                              borderLeftWidth: '3px',
+                              borderLeftStyle: 'solid',
+                              borderLeftColor:
+                                unit.status === 'completed'
+                                  ? '#2ea44f'
+                                  : unit.status === 'cancelled'
+                                    ? 'var(--danger)'
+                                    : 'var(--accent-dark)',
+                              background: 'var(--surface2)',
+                              color: 'var(--text1)',
+                            }}
+                          >
+                            <span style={{ fontWeight: 600 }}>
+                              {unit.planned_time_start
+                                ? `${unit.planned_time_start.slice(0, 5)}`
+                                : 'Ganztags'}
+                            </span>
+                            {planScope === 'club' && (unit.group_name || '').trim() ? (
+                              <span style={{ display: 'block', fontWeight: 500, color: 'var(--text1)' }}>
+                                {(unit.group_name || '').trim().length > 22
+                                  ? `${(unit.group_name || '').trim().slice(0, 22)}…`
+                                  : unit.group_name}
+                              </span>
+                            ) : null}
+                            {unit.lead_trainer_name?.trim() ? (
+                              <span
+                                style={{
+                                  display: 'block',
+                                  color: 'var(--text3)',
+                                  fontWeight: 400,
+                                  fontSize: '0.62rem',
+                                }}
+                              >
+                                {unit.lead_trainer_name.trim().split(/\s+/).slice(-1)[0] ||
+                                  unit.lead_trainer_name.trim()}
+                              </span>
+                            ) : null}
+                            {unit.planned_focus?.trim() ? (
+                              <span style={{ display: 'block', color: 'var(--text2)', fontWeight: 400 }}>
+                                {(unit.planned_focus || '').trim().length > 24
+                                  ? `${(unit.planned_focus || '').trim().slice(0, 24)}…`
+                                  : unit.planned_focus}
+                              </span>
+                            ) : null}
+                          </button>
+                          {mayConfigureSessionAssignments(unit) ? (
+                            <button
+                              type="button"
+                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                              style={{ fontSize: '0.62rem', padding: '2px 4px', alignSelf: 'stretch' }}
+                              onClick={(ev) => {
+                                ev.stopPropagation()
+                                openTrainerAssignModal(unit)
+                              }}
+                            >
+                              Trainer
+                            </button>
+                          ) : null}
+                        </div>
+                      ))}
+                    </div>
+                    {dayUnits.length > 3 ? (
+                      <p style={{ fontSize: '0.65rem', color: 'var(--text3)', margin: '4px 0 0', lineHeight: 1.3 }}>
+                        +{dayUnits.length - 3} weitere
+                      </p>
+                    ) : null}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ) : units.length === 0 ? (
+          <div className="card">
+            <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
+              Keine Trainingseinheiten in diesem Zeitraum. Unten unter <strong>„Neue Trainingseinheit“</strong> einen
+              Termin anlegen — optional mit Vorlage im Dialog.
+            </p>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gap: '1rem' }}>
+            {units.map((unit) => {
+              const lineage = unit.origin_framework_slot_id ? frameworkLineageText(unit) : null
+              const uid = user?.id != null ? Number(user.id) : null
+              const effLead =
+                unit.effective_lead_trainer_profile_id != null
+                  ? Number(unit.effective_lead_trainer_profile_id)
+                  : null
+              const showTakeLead =
+                unit.status === 'planned' && uid != null && effLead != null && effLead !== uid
+              return (
+              <div key={unit.id} className="card">
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    gap: '12px',
+                    marginBottom: '1rem'
+                  }}
+                >
+                  <div style={{ minWidth: 0, flex: '1 1 200px' }}>
+                    <h3 style={{ marginBottom: '0.25rem' }}>
+                      {unit.planned_date}
+                      {unit.planned_time_start &&
+                        ` · ${unit.planned_time_start.slice(0, 5)} - ${unit.planned_time_end?.slice(0, 5)}`}
+                    </h3>
+                    {planScope === 'club' && (unit.group_name || '').trim() ? (
+                      <p
+                        style={{
+                          fontSize: '0.85rem',
+                          color: 'var(--text3)',
+                          margin: '0 0 0.35rem',
+                        }}
+                      >
+                        {unit.group_name}
+                      </p>
+                    ) : null}
+                    <p style={{ fontSize: '0.82rem', color: 'var(--text2)', margin: '0 0 0.5rem' }}>
+                      Leitung: {(unit.lead_trainer_name || '').trim() || '—'}
+                    </p>
+                    {(() => {
+                      const coRaw = unit.effective_assistant_trainer_profile_ids
+                      const co = Array.isArray(coRaw)
+                        ? coRaw.map(Number).filter((x) => Number.isFinite(x) && x >= 1)
+                        : []
+                      if (!co.length) return null
+                      const src =
+                        unit.assistant_trainer_profile_ids != null
+                          ? 'Session-Zuweisung'
+                          : 'über Trainingsgruppe'
+                      return (
+                        <p
+                          style={{
+                            fontSize: '0.78rem',
+                            color: 'var(--text3)',
+                            margin: '0 0 0.5rem',
+                          }}
+                        >
+                          Co-Trainer ({src}): {co.length}
+                        </p>
+                      )
+                    })()}
+                    {unit.planned_focus && (
+                      <p
+                        style={{
+                          color: 'var(--text2)',
+                          fontSize: '0.875rem',
+                          marginBottom: '0.5rem'
+                        }}
+                      >
+                        Fokus: {unit.planned_focus}
+                      </p>
+                    )}
+                    {lineage ? (
+                      <p
+                        style={{
+                          color: 'var(--text2)',
+                          fontSize: '0.82rem',
+                          marginBottom: '0.5rem',
+                          lineHeight: 1.45,
+                        }}
+                      >
+                        <span style={{ fontWeight: 600, color: 'var(--text3)' }}>Aus Rahmen: </span>
+                        {unit.origin_framework_program_id ? (
+                          <Link
+                            to={`/planning/framework-programs/${unit.origin_framework_program_id}`}
+                            style={{ color: 'var(--accent-dark)' }}
+                          >
+                            {lineage.fpTitle}
+                          </Link>
+                        ) : (
+                          <span>{lineage.fpTitle}</span>
+                        )}
+                        <span style={{ color: 'var(--text2)' }}> · {lineage.slotBit}</span>
+                      </p>
+                    ) : null}
+                    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                      <span
+                        style={{
+                          fontSize: '0.75rem',
+                          padding: '0.25rem 0.5rem',
+                          borderRadius: '4px',
+                          background:
+                            unit.status === 'completed'
+                              ? '#2ea44f'
+                              : unit.status === 'cancelled'
+                                ? 'var(--danger)'
+                                : 'var(--surface2)',
+                          color:
+                            unit.status === 'completed' || unit.status === 'cancelled'
+                              ? 'white'
+                              : 'var(--text2)'
+                        }}
+                      >
+                        {unit.status === 'planned' && 'Geplant'}
+                        {unit.status === 'completed' && 'Durchgeführt'}
+                        {unit.status === 'cancelled' && 'Abgesagt'}
+                      </span>
+                      {unit.attendance_count !== null && unit.attendance_count !== undefined && (
+                        <span
+                          style={{
+                            fontSize: '0.75rem',
+                            padding: '0.25rem 0.5rem',
+                            borderRadius: '4px',
+                            background: 'var(--surface2)',
+                            color: 'var(--text2)'
+                          }}
+                        >
+                          {unit.attendance_count} Teilnehmer
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div
+                    style={{
+                      display: 'flex',
+                      gap: '0.5rem',
+                      flexWrap: 'wrap',
+                      justifyContent: 'flex-end',
+                      flex: '1 1 180px',
+                      minWidth: 0
+                    }}
+                  >
+                    <Link
+                      to={`/planning/run/${unit.id}`}
+                      className="btn btn-secondary"
+                      style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                    >
+                      Plan &amp; Ablauf
+                    </Link>
+                    <Link
+                      to={`/planning/run/${unit.id}/coach`}
+                      className="btn btn-primary"
+                      style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                    >
+                      Im Training (Coach)
+                    </Link>
+                    <button className="btn btn-secondary" onClick={() => handleEdit(unit)}>
+                      Bearbeiten
+                    </button>
+                    {mayConfigureSessionAssignments(unit) ? (
+                      <button
+                        type="button"
+                        className="btn btn-secondary"
+                        onClick={() => openTrainerAssignModal(unit)}
+                        title="Nur organisatorisch: Leitung und Co für diese Einheit"
+                      >
+                        Trainer zuweisen
+                      </button>
+                    ) : null}
+                    {showTakeLead ? (
+                      <button type="button" className="btn btn-secondary" onClick={() => handleTakeLead(unit)}>
+                        Ich übernehme
+                      </button>
+                    ) : null}
+                    <button
+                      className="btn"
+                      style={{ background: 'var(--danger)', color: 'white', border: 'none' }}
+                      onClick={() => handleDelete(unit)}
+                    >
+                      Löschen
+                    </button>
+                  </div>
+                </div>
+
+                {unit.notes && (
+                  <p style={{ color: 'var(--text2)', fontSize: '0.875rem', marginTop: '0.5rem' }}>
+                    {unit.notes}
+                  </p>
+                )}
+              </div>
+              )
+            })}
+          </div>
+        )}
+
+        <TrainingPlanningTrainerAssignModal
+          open={assignModalOpen && !!assignDraft.unit}
+          unit={assignDraft.unit}
+          leadTrainerProfileId={assignDraft.lead_trainer_profile_id}
+          onLeadChange={handleAssignLeadSelectChange}
+          sessionAssistantsInherit={assignDraft.session_assistants_inherit}
+          onSessionAssistantsInheritChange={handleAssignAssistantsInheritChange}
+          sessionAssistantProfileIds={assignDraft.session_assistant_profile_ids}
+          onCoTrainerToggle={handleAssignCoTrainerToggle}
+          clubDirectory={clubDirectory}
+          coTrainerOptions={clubDirectoryForAssignCo}
+          saving={assignSaving}
+          onBackdropRequestClose={() => {
+            if (!assignSaving) setAssignModalOpen(false)
+          }}
+          onCancel={() => setAssignModalOpen(false)}
+          onSave={saveTrainerAssignModal}
+        />
+
+        <TrainingPlanningModuleApplyModal
+          open={moduleApplyOpen}
+          busy={moduleApplyBusy}
+          err={moduleApplyErr}
+          placementLocked={moduleApplyPlacementLocked}
+          placementSummary={modulePlacementSummary}
+          sections={formData.sections}
+          sectionIx={moduleApplySectionIx}
+          onSectionIndexChange={onModuleApplySectionIndexChange}
+          insertSlot={moduleApplyInsertSlot}
+          onInsertSlotChange={setModuleApplyInsertSlot}
+          targetItems={moduleApplyTargetItems}
+          searchQuery={moduleApplySearchQuery}
+          onSearchQueryChange={setModuleApplySearchQuery}
+          filteredList={moduleApplyFilteredList}
+          fullList={moduleApplyList}
+          selectedModuleId={moduleApplyModuleId}
+          onSelectModuleId={setModuleApplyModuleId}
+          modulePickPreview={modulePickPreview}
+          onConfirm={handleApplyTrainingModuleConfirm}
+          onCancel={() => {
+            setModuleApplyOpen(false)
+            setModuleApplyPlacementLocked(false)
+          }}
+        />
+
+        <TrainingPlanningFrameworkImportModal
+          open={frameworkImportOpen}
+          frameworkProgramsList={frameworkProgramsList}
+          fwImportProgramId={fwImportProgramId}
+          onProgramChange={onFwImportProgramChange}
+          fwImportLoading={fwImportLoading}
+          fwImportDetail={fwImportDetail}
+          fwImportSelectedSlots={fwImportSelectedSlots}
+          onToggleSlot={toggleFwImportSlot}
+          fwImportSlotDates={fwImportSlotDates}
+          onSlotDateChange={(slotId, value) =>
+            setFwImportSlotDates((prev) => ({ ...prev, [slotId]: value }))
+          }
+          fwImportStartDate={fwImportStartDate}
+          onFwImportStartDateChange={setFwImportStartDate}
+          fwImportIntervalDays={fwImportIntervalDays}
+          onFwImportIntervalDaysChange={setFwImportIntervalDays}
+          fwImportSubmitting={fwImportSubmitting}
+          onApplyDateSuggestions={applyFwImportDateSuggestions}
+          onSubmit={submitFrameworkImport}
+          onClose={() => setFrameworkImportOpen(false)}
+        />
+
+        <TrainingPlanningUnitFormModal
+          open={showModal}
+          editingUnit={editingUnit}
+          formData={formData}
+          updateFormField={updateFormField}
+          setFormData={setFormData}
+          onSubmit={handleSubmit}
+          onCancel={() => setShowModal(false)}
+          draftPlanTemplateId={draftPlanTemplateId}
+          onDraftTemplateSelect={applyTemplateFromSelect}
+          planTemplates={planTemplates}
+          clubDirectory={clubDirectory}
+          clubDirectoryForCo={clubDirectoryForCo}
+          planningModalClubId={planningModalClubId}
+          user={user}
+          onMetaRefresh={refreshPlanningSectionMeta}
+          sectionsEditMode={sectionsEditMode}
+          setSectionsEditMode={setSectionsEditMode}
+          onSaveAsTemplate={handleSaveAsTemplate}
+          onRequestTrainingModulePick={(ctx) => {
+            void openModuleApplyModal(ctx)
+          }}
+          onRequestExercisePick={({ sectionIndex, itemIndex, insertBeforeIndex }) => {
+            setExercisePickerTarget({
+              sIdx: sectionIndex,
+              iIdx: typeof itemIndex === 'number' ? itemIndex : undefined,
+              insertBeforeIndex:
+                typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
+                  ? insertBeforeIndex
+                  : undefined,
+            })
+            setExercisePickerOpen(true)
+          }}
+          onPeekExercise={(id, variantId, peekExtras) =>
+            setPlanningPeekCtx({
+              exerciseId: id,
+              variantId: variantId ?? null,
+              peekExtras: peekExtras ?? null,
+            })
+          }
+        />
+      <ExercisePickerModal
+        open={exercisePickerOpen}
+        multiSelect
+        enableQuickCreateDraft
+        onClose={() => {
+          setExercisePickerOpen(false)
+          setExercisePickerTarget(null)
+        }}
+        onSelectExercises={async (picked) => {
+          if (!exercisePickerTarget || !picked?.length) return
+          const rows = []
+          for (const ex of picked) {
+            const row = await hydrateExercisePlanningRow(ex)
+            if (row) rows.push(row)
+          }
+          if (!rows.length) return
+          const { sIdx, iIdx, insertBeforeIndex } = exercisePickerTarget
+          setFormData((prev) => ({
+            ...prev,
+            sections: prev.sections.map((s, si) => {
+              if (si !== sIdx) return s
+              const items = [...(s.items || [])]
+              if (typeof iIdx === 'number') {
+                const cur = items[iIdx]
+                if (!cur || cur.item_type !== 'exercise') return s
+                const [first, ...tail] = rows
+                items[iIdx] = {
+                  ...cur,
+                  exercise_id: first.exercise_id,
+                  exercise_variant_id: first.exercise_variant_id,
+                  exercise_title: first.exercise_title,
+                  variants: first.variants,
+                }
+                if (tail.length) items.splice(iIdx + 1, 0, ...tail)
+                return { ...s, items }
+              }
+              const rawAt =
+                typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
+                  ? insertBeforeIndex
+                  : items.length
+              const at = Math.max(0, Math.min(rawAt, items.length))
+              items.splice(at, 0, ...rows)
+              return { ...s, items }
+            }),
+          }))
+          setExercisePickerOpen(false)
+          setExercisePickerTarget(null)
+        }}
+      />
+      <ExercisePeekModal
+        key={planningPeekCtx != null ? String(planningPeekCtx.exerciseId) : 'plan-peek-closed'}
+        open={planningPeekCtx != null}
+        exerciseId={planningPeekCtx?.exerciseId}
+        variantId={planningPeekCtx?.variantId ?? undefined}
+        peekExtras={planningPeekCtx?.peekExtras ?? undefined}
+        onClose={() => setPlanningPeekCtx(null)}
+      />
+    </div>
+  )
+}
+
+export default TrainingPlanningPageRoot
diff --git a/frontend/src/components/planning/TrainingPlanningTrainerAssignModal.jsx b/frontend/src/components/planning/TrainingPlanningTrainerAssignModal.jsx
new file mode 100644
index 0000000..ac861fc
--- /dev/null
+++ b/frontend/src/components/planning/TrainingPlanningTrainerAssignModal.jsx
@@ -0,0 +1,155 @@
+import React from 'react'
+
+/**
+ * Modal: organisatorische Trainer-Zuweisung (Leitung + Co) für eine bestehende Einheit.
+ */
+export default function TrainingPlanningTrainerAssignModal({
+  open,
+  unit,
+  leadTrainerProfileId,
+  onLeadChange,
+  sessionAssistantsInherit,
+  onSessionAssistantsInheritChange,
+  sessionAssistantProfileIds,
+  onCoTrainerToggle,
+  clubDirectory,
+  coTrainerOptions,
+  saving,
+  onBackdropRequestClose,
+  onCancel,
+  onSave,
+}) {
+  if (!open || !unit) return null
+
+  return (
+    <div
+      data-testid="planning-trainer-assign-modal"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1020,
+        padding: '1rem',
+        overflowY: 'auto',
+      }}
+      role="presentation"
+      onClick={() => {
+        if (!saving) onBackdropRequestClose()
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="trainer-assign-modal-title"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: 'var(--surface)',
+          borderRadius: '12px',
+          padding: 'clamp(14px, 3vw, 1.75rem)',
+          maxWidth: 'min(460px, 100%)',
+          width: '100%',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+          boxSizing: 'border-box',
+        }}
+      >
+        <h2 id="trainer-assign-modal-title" style={{ marginBottom: '0.5rem', fontSize: '1.1rem' }}>
+          Trainer zuweisen (organisatorisch)
+        </h2>
+        <p style={{ fontSize: '0.86rem', color: 'var(--text2)', marginBottom: '1rem', lineHeight: 1.45 }}>
+          {(unit.planned_date || '').toString().slice(0, 10)}
+          {unit.planned_time_start ? ` · ${String(unit.planned_time_start).slice(0, 5)}` : ''}
+          {(unit.group_name || '').trim() ? ` · ${(unit.group_name || '').trim()}` : null}
+        </p>
+        <div className="form-row">
+          <label className="form-label">Leitung (diese Einheit)</label>
+          <select
+            className="form-input"
+            value={leadTrainerProfileId}
+            onChange={(e) => onLeadChange(e.target.value)}
+            disabled={saving}
+          >
+            <option value="">Standard (Haupttrainer der Gruppe)</option>
+            {(clubDirectory || []).map((m) => {
+              const idStr = String(m.id)
+              return (
+                <option key={idStr} value={idStr}>
+                  {(m.name || '').trim() || m.email || `Profil ${m.id}`}
+                </option>
+              )
+            })}
+          </select>
+        </div>
+        <div className="form-row" style={{ marginTop: '0.85rem' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={sessionAssistantsInherit}
+              disabled={saving}
+              onChange={(e) => onSessionAssistantsInheritChange(e.target.checked)}
+            />
+            <span style={{ fontSize: '0.9rem', color: 'var(--text1)' }}>Co-Trainer wie in der Trainingsgruppe</span>
+          </label>
+        </div>
+        {!sessionAssistantsInherit ? (
+          <div style={{ marginTop: '10px', maxHeight: '180px', overflowY: 'auto' }}>
+            {coTrainerOptions.map((m) => {
+              const mid = typeof m.id === 'number' ? m.id : parseInt(String(m.id), 10)
+              const labelText = `${(m.name || '').trim() || m.email || `Profil ${mid}`}`
+              const isOn = Number.isFinite(mid) && sessionAssistantProfileIds.includes(mid)
+              return (
+                <label
+                  key={`assign-co-${mid}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    fontSize: '0.875rem',
+                    marginBottom: '6px',
+                    cursor: saving ? 'default' : 'pointer',
+                    color: 'var(--text1)',
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isOn}
+                    disabled={saving}
+                    onChange={() => onCoTrainerToggle(mid)}
+                  />
+                  <span>{labelText}</span>
+                </label>
+              )
+            })}
+          </div>
+        ) : null}
+        {!clubDirectory.length ? (
+          <p style={{ marginTop: '10px', fontSize: '0.82rem', color: 'var(--text3)' }}>
+            Mitgliederverzeichnis konnte nicht geladen werden.
+          </p>
+        ) : null}
+        <div
+          style={{
+            display: 'flex',
+            gap: '0.65rem',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end',
+            marginTop: '1.25rem',
+          }}
+        >
+          <button type="button" className="btn btn-secondary" disabled={saving} onClick={onCancel}>
+            Abbrechen
+          </button>
+          <button type="button" className="btn btn-primary" disabled={saving} onClick={onSave}>
+            {saving ? 'Speichern …' : 'Speichern'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/planning/TrainingPlanningUnitFormModal.jsx b/frontend/src/components/planning/TrainingPlanningUnitFormModal.jsx
new file mode 100644
index 0000000..eaec781
--- /dev/null
+++ b/frontend/src/components/planning/TrainingPlanningUnitFormModal.jsx
@@ -0,0 +1,486 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import TrainingPlanExerciseVisibilityPanel from '../TrainingPlanExerciseVisibilityPanel'
+import TrainingUnitSectionsEditor from '../TrainingUnitSectionsEditor'
+import { frameworkLineageText } from '../../utils/trainingPlanningPageHelpers'
+
+/**
+ * Großes Modal: Neue Trainingseinheit / Einheit bearbeiten (Planung, Trainer, Abschnitte, Durchführung, Notizen).
+ */
+export default function TrainingPlanningUnitFormModal({
+  open,
+  editingUnit,
+  formData,
+  updateFormField,
+  setFormData,
+  onSubmit,
+  onCancel,
+  draftPlanTemplateId,
+  onDraftTemplateSelect,
+  planTemplates,
+  clubDirectory,
+  clubDirectoryForCo,
+  planningModalClubId,
+  user,
+  onMetaRefresh,
+  sectionsEditMode,
+  setSectionsEditMode,
+  onSaveAsTemplate,
+  onRequestTrainingModulePick,
+  onRequestExercisePick,
+  onPeekExercise,
+}) {
+  if (!open) return null
+
+  return (
+    <div
+      data-testid="planning-unit-form-modal"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        padding: '1rem',
+        overflowY: 'auto',
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--surface)',
+          borderRadius: '12px',
+          padding: 'clamp(12px, 3vw, 2rem)',
+          maxWidth: 'min(1100px, 100%)',
+          width: '100%',
+          maxHeight: '92vh',
+          overflowY: 'auto',
+          margin: 'max(0px, env(safe-area-inset-top, 0px)) auto',
+          boxSizing: 'border-box',
+          minWidth: 0,
+        }}
+      >
+        <h2 style={{ marginBottom: '1rem' }}>
+          {editingUnit ? 'Trainingseinheit bearbeiten' : 'Neue Trainingseinheit'}
+        </h2>
+
+        {editingUnit?.origin_framework_slot_id
+          ? (() => {
+              const L = frameworkLineageText(editingUnit)
+              return (
+                <div
+                  className="card"
+                  style={{
+                    marginBottom: '1.1rem',
+                    padding: '12px 14px',
+                    background: 'var(--surface2)',
+                    fontSize: '0.9rem',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  <strong style={{ color: 'var(--text1)' }}>Herkunft:</strong>{' '}
+                  {editingUnit.origin_framework_program_id ? (
+                    <Link
+                      to={`/planning/framework-programs/${editingUnit.origin_framework_program_id}`}
+                      style={{ color: 'var(--accent-dark)' }}
+                    >
+                      {L.fpTitle}
+                    </Link>
+                  ) : (
+                    L.fpTitle
+                  )}
+                  <span style={{ color: 'var(--text2)' }}> · {L.slotBit}</span>
+                  <p style={{ margin: '0.5rem 0 0', fontSize: '0.82rem', color: 'var(--text2)' }}>
+                    Inhalt stammt aus dem Session-Blueprint des Rahmenprogramms. Änderungen gelten nur für diese
+                    geplante Einheit; die Zuordnung zum Rahmen bleibt zur Nachverfolgung erhalten.
+                  </p>
+                </div>
+              )
+            })()
+          : null}
+
+        {!editingUnit && (
+          <div className="training-planning-template-panel" style={{ marginBottom: '1.35rem' }}>
+            <label className="form-label training-planning-template-panel__label" htmlFor="planning-draft-template">
+              Vorlage für den Ablauf
+            </label>
+            <select
+              id="planning-draft-template"
+              className="form-input training-planning-template-panel__select"
+              value={draftPlanTemplateId}
+              onChange={(e) => onDraftTemplateSelect(e.target.value)}
+            >
+              <option value="">Ohne Vorlage — leere Gliederung (ein Abschnitt)</option>
+              {planTemplates.map((t) => (
+                <option key={t.id} value={String(t.id)}>
+                  {t.name}
+                  {typeof t.sections_count === 'number' ? ` · ${t.sections_count} Abschn.` : ''}
+                </option>
+              ))}
+            </select>
+            <p className="training-planning-template-panel__help">
+              Übernimmt nur die <strong>Sektionsstruktur</strong> aus der Bibliothek; Übungen trägst du unten bei den
+              Abschnitten ein. Gespeicherte Vorlagen kannst du unter Planung später erweitern.
+            </p>
+          </div>
+        )}
+
+        <form onSubmit={onSubmit}>
+          <h3 style={{ marginBottom: '1rem' }}>Planung</h3>
+
+          <div className="responsive-grid-3" style={{ marginBottom: '1rem' }}>
+            <div className="form-row">
+              <label className="form-label">Datum *</label>
+              <input
+                type="date"
+                className="form-input"
+                value={formData.planned_date}
+                onChange={(e) => updateFormField('planned_date', e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="form-row">
+              <label className="form-label">Von</label>
+              <input
+                type="time"
+                className="form-input"
+                value={formData.planned_time_start}
+                onChange={(e) => updateFormField('planned_time_start', e.target.value)}
+              />
+            </div>
+
+            <div className="form-row">
+              <label className="form-label">Bis</label>
+              <input
+                type="time"
+                className="form-input"
+                value={formData.planned_time_end}
+                onChange={(e) => updateFormField('planned_time_end', e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Trainingsfokus</label>
+            <input
+              type="text"
+              className="form-input"
+              value={formData.planned_focus}
+              onChange={(e) => updateFormField('planned_focus', e.target.value)}
+              placeholder="z.B. Grundlagen, Kinder altersgerecht"
+            />
+          </div>
+
+          <div
+            className="card"
+            style={{
+              marginTop: '1.25rem',
+              marginBottom: '0.25rem',
+              padding: '12px 14px',
+              background: 'var(--surface2)',
+            }}
+          >
+            <h3 style={{ margin: '0 0 10px', fontSize: '1rem' }}>Trainerzuordnung (diese Einheit)</h3>
+            <div className="form-row">
+              <label className="form-label">Leitung</label>
+              <select
+                className="form-input"
+                value={formData.lead_trainer_profile_id}
+                onChange={(e) => updateFormField('lead_trainer_profile_id', e.target.value)}
+                disabled={!editingUnit && !formData.group_id}
+              >
+                <option value="">Standard (Haupttrainer der Gruppe)</option>
+                {clubDirectory.map((m) => {
+                  const idStr = String(m.id)
+                  return (
+                    <option key={idStr} value={idStr}>
+                      {(m.name || '').trim() || m.email || `Profil ${m.id}`}
+                    </option>
+                  )
+                })}
+              </select>
+              <p style={{ fontSize: '0.8rem', color: 'var(--text2)', marginTop: '0.35rem', lineHeight: 1.45 }}>
+                Für Vertretungen genügt in der Regel die Vereinsmitgliedschaft; Zuweisen dürfen u. a. Haupt-/Co‑Trainer
+                dieser Gruppe, der/die Ersteller:in der Einheit oder Vereinsadmins.
+              </p>
+            </div>
+            <div className="form-row" style={{ marginTop: '0.75rem' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+                <input
+                  type="checkbox"
+                  checked={formData.session_assistants_inherit}
+                  onChange={(e) => updateFormField('session_assistants_inherit', e.target.checked)}
+                />
+                <span style={{ fontSize: '0.9rem', color: 'var(--text1)' }}>
+                  Co-Trainer wie in der Trainingsgruppe (Standard)
+                </span>
+              </label>
+            </div>
+            {!formData.session_assistants_inherit ? (
+              <div style={{ marginTop: '10px', maxHeight: '200px', overflowY: 'auto' }}>
+                {clubDirectoryForCo.map((m) => {
+                  const mid = typeof m.id === 'number' ? m.id : parseInt(String(m.id), 10)
+                  const labelText = `${(m.name || '').trim() || m.email || `Profil ${mid}`}`
+                  const isOn = Number.isFinite(mid) && formData.session_assistant_profile_ids.includes(mid)
+                  return (
+                    <label
+                      key={`co-${mid}`}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        fontSize: '0.875rem',
+                        marginBottom: '6px',
+                        cursor: 'pointer',
+                        color: 'var(--text1)',
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isOn}
+                        onChange={() => {
+                          setFormData((prev) => {
+                            const was = prev.session_assistant_profile_ids.includes(mid)
+                            const nextIds = was
+                              ? prev.session_assistant_profile_ids.filter((x) => x !== mid)
+                              : [...prev.session_assistant_profile_ids, mid].sort((a, b) => a - b)
+                            return { ...prev, session_assistant_profile_ids: nextIds }
+                          })
+                        }}
+                      />
+                      <span>{labelText}</span>
+                    </label>
+                  )
+                })}
+              </div>
+            ) : null}
+            {!clubDirectory.length ? (
+              <p style={{ margin: '10px 0 0', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.4 }}>
+                Keine Einträge im Vereins-Mitgliederverzeichnis oder noch nicht geladen (nur für Vereinsinterne).
+              </p>
+            ) : null}
+          </div>
+
+          <TrainingPlanExerciseVisibilityPanel
+            sections={formData.sections}
+            targetClubId={planningModalClubId}
+            user={user}
+            onMetaRefresh={onMetaRefresh}
+          />
+
+          <div style={{ marginTop: '2rem' }}>
+            {editingUnit ? (
+              <div style={{ marginBottom: '1rem' }}>
+                <div
+                  role="radiogroup"
+                  aria-label="Modus für Abschnitte und Übungen"
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: '10px',
+                  }}
+                >
+                  <span className="form-label" style={{ marginBottom: 0, fontSize: '0.82rem' }}>
+                    Ablauf bearbeiten als
+                  </span>
+                  <div
+                    style={{
+                      display: 'inline-flex',
+                      borderRadius: '10px',
+                      border: '1.5px solid var(--border2)',
+                      overflow: 'hidden',
+                      background: 'var(--surface2)',
+                    }}
+                  >
+                    {[
+                      { id: 'planning', label: 'Planung' },
+                      { id: 'debrief', label: 'Nachbereitung' },
+                    ].map((opt, i) => (
+                      <button
+                        key={opt.id}
+                        type="button"
+                        role="radio"
+                        aria-checked={sectionsEditMode === opt.id}
+                        onClick={() => setSectionsEditMode(opt.id)}
+                        style={{
+                          border: 'none',
+                          padding: '8px 14px',
+                          fontWeight: 600,
+                          fontSize: '0.85rem',
+                          cursor: 'pointer',
+                          background: sectionsEditMode === opt.id ? 'var(--accent-dark)' : 'transparent',
+                          color: sectionsEditMode === opt.id ? '#fff' : 'var(--text1)',
+                          whiteSpace: 'nowrap',
+                          ...(i > 0 ? { borderLeft: '1.5px solid var(--border2)' } : {}),
+                        }}
+                      >
+                        {opt.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <p style={{ margin: '0.35rem 0 0', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.45 }}>
+                  {sectionsEditMode === 'debrief'
+                    ? 'Ist‑Minuten rechts in derselben Spaltenbreite wie „Min“ (Plan); Abweichungen als Text über die volle Breite.'
+                    : 'Ablauf, Übungen und geplante Minuten. Ist‑Werte und Abweichungen unter „Nachbereitung“.'}
+                </p>
+              </div>
+            ) : null}
+            <TrainingUnitSectionsEditor
+              heading="Abschnitte & Übungen"
+              headingAccessory={
+                <>
+                  <button type="button" className="btn btn-secondary" onClick={onSaveAsTemplate}>
+                    Vorlage aus Aufbau speichern
+                  </button>
+                </>
+              }
+              sections={formData.sections}
+              wideExerciseGrid
+              onSectionsChange={(updater) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  sections: updater(prev.sections),
+                }))
+              }
+              onRequestTrainingModulePick={onRequestTrainingModulePick}
+              onRequestExercisePick={onRequestExercisePick}
+              onPeekExercise={onPeekExercise}
+              showExecutionExtras={Boolean(editingUnit) && sectionsEditMode === 'debrief'}
+              enableParallelPhaseControls
+            />
+          </div>
+
+          <div style={{ marginBottom: '1.75rem' }} />
+
+          {editingUnit && (
+            <>
+              <h3 style={{ marginTop: '0.5rem', marginBottom: '1rem' }}>Durchführung</h3>
+
+              <div className="responsive-grid-4" style={{ marginBottom: '1rem' }}>
+                <div className="form-row">
+                  <label className="form-label">Tatsächliches Datum</label>
+                  <input
+                    type="date"
+                    className="form-input"
+                    value={formData.actual_date}
+                    onChange={(e) => updateFormField('actual_date', e.target.value)}
+                  />
+                </div>
+
+                <div className="form-row">
+                  <label className="form-label">Von</label>
+                  <input
+                    type="time"
+                    className="form-input"
+                    value={formData.actual_time_start}
+                    onChange={(e) => updateFormField('actual_time_start', e.target.value)}
+                  />
+                </div>
+
+                <div className="form-row">
+                  <label className="form-label">Bis</label>
+                  <input
+                    type="time"
+                    className="form-input"
+                    value={formData.actual_time_end}
+                    onChange={(e) => updateFormField('actual_time_end', e.target.value)}
+                  />
+                </div>
+
+                <div className="form-row">
+                  <label className="form-label">Teilnehmer</label>
+                  <input
+                    type="number"
+                    className="form-input"
+                    value={formData.attendance_count}
+                    onChange={(e) => updateFormField('attendance_count', e.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div className="form-row">
+                <label className="form-label">Status</label>
+                <select
+                  className="form-input"
+                  value={formData.status}
+                  onChange={(e) => updateFormField('status', e.target.value)}
+                >
+                  <option value="planned">Geplant</option>
+                  <option value="completed">Durchgeführt</option>
+                  <option value="cancelled">Abgesagt</option>
+                </select>
+              </div>
+
+              {formData.status === 'completed' ? (
+                <div className="form-row" style={{ marginTop: '0.75rem' }}>
+                  <label
+                    style={{
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      gap: '10px',
+                      cursor: 'pointer',
+                      lineHeight: 1.45,
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={!!formData.debrief_completed}
+                      onChange={(e) => updateFormField('debrief_completed', e.target.checked)}
+                      style={{ marginTop: '3px' }}
+                    />
+                    <span>
+                      <strong>Rückschau erledigt</strong>
+                      <span className="muted" style={{ display: 'block', fontSize: '0.82rem', marginTop: '5px' }}>
+                        Wenn angehakt, erscheint die Einheit nicht mehr unter „Offene Rückschau“ auf dem Dashboard
+                        (Nachbereitung gilt als abgeschlossen).
+                      </span>
+                    </span>
+                  </label>
+                </div>
+              ) : null}
+            </>
+          )}
+
+          <h3 style={{ marginTop: '2rem', marginBottom: '1rem' }}>Notizen</h3>
+
+          <div className="form-row">
+            <label className="form-label">Öffentliche Notizen</label>
+            <textarea
+              className="form-input"
+              rows={3}
+              value={formData.notes}
+              onChange={(e) => updateFormField('notes', e.target.value)}
+              placeholder="Für Teilnehmer"
+            />
+          </div>
+
+          <div className="form-row">
+            <label className="form-label">Trainernotizen</label>
+            <textarea
+              className="form-input"
+              rows={3}
+              value={formData.trainer_notes}
+              onChange={(e) => updateFormField('trainer_notes', e.target.value)}
+            />
+          </div>
+
+          <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1.5rem' }}>
+            <button type="submit" className="btn btn-primary" style={{ flex: 1 }}>
+              {editingUnit ? 'Speichern' : 'Erstellen'}
+            </button>
+            <button type="button" className="btn btn-secondary" onClick={onCancel}>
+              Abbrechen
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/ExerciseFormPage.jsx b/frontend/src/pages/ExerciseFormPage.jsx
index b82904a..466bf5a 100644
--- a/frontend/src/pages/ExerciseFormPage.jsx
+++ b/frontend/src/pages/ExerciseFormPage.jsx
@@ -1,2447 +1,2 @@
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react'
-import { useNavigate, useParams, Link } from 'react-router-dom'
-import api, { buildExerciseApiPayload } from '../utils/api'
-import { resolveExerciseMediaFileUrl, resolveMediaAssetFileUrl } from '../utils/exerciseMediaUrl'
-import RichTextEditor from '../components/RichTextEditor'
-import ExerciseProgressionGraphPanel from '../components/ExerciseProgressionGraphPanel'
-import ExerciseMediaThumbTile from '../components/ExerciseMediaThumbTile'
-import MediaPreviewModal from '../components/MediaPreviewModal'
-import ReportContentModal from '../components/ReportContentModal'
-import CombinationMethodProfileEditor from '../components/CombinationMethodProfileEditor'
-import ExercisePickerModal from '../components/ExercisePickerModal'
-import {
-  SHINKAN_EXERCISE_MEDIA_DRAG_MIME,
-  buildExerciseMediaDragPayload,
-} from '../utils/exerciseInlineMediaRefs'
-import { autoScrollForDragNearEdges } from '../utils/dragAutoScroll'
-import { SKILL_LEVEL_OPTIONS, normalizeSkillLevelSlug } from '../constants/skillLevels'
-import { useAuth } from '../context/AuthContext'
-import { useToast } from '../context/ToastContext'
-import {
-  activeClubMemberships,
-  getDefaultClubIdForGovernanceForms,
-  getTenantClubDependencyKey,
-} from '../utils/activeClub'
-import { COMBINATION_ARCHETYPE_OPTIONS, ARCHETYPE_DEFAULT_REP_SERIES_COUNT, defaultRepSeriesCountForArchetype } from '../constants/combinationArchetypes'
-import { readSlotProfilesV1, normalizeAdvanceMode, parseComboRepSeriesCountUi } from '../utils/combinationMethodProfileUi'
-import { GripVertical } from 'lucide-react'
-import UnsavedChangesPrompt from '../components/UnsavedChangesPrompt'
-import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../hooks/useUnsavedChangesBlocker'
-
-const INTENSITY_OPTIONS = [
-  { value: '', label: '—' },
-  { value: 'niedrig', label: 'niedrig' },
-  { value: 'mittel', label: 'mittel' },
-  { value: 'hoch', label: 'hoch' },
-]
-
-const VARIANT_DIFFICULTY = [
-  { value: '', label: '—' },
-  { value: 'easier', label: 'Einfacher' },
-  { value: 'same', label: 'Gleich' },
-  { value: 'harder', label: 'Schwerer' },
-  { value: 'adapted', label: 'Angepasst' },
-]
-
-/** HTML5-DnD für Kombi-Stationen (Reihenfolge = Ablauf). */
-const DND_EXERCISE_COMBO_STATION = 'application/x-shinkan-exercise-combo-station-v1'
-
-/** Pro Station meist 1 Übung; bis zu 3 wenn kurzer Auswahl-Pool sinnvoll ist. */
-const MAX_COMBO_CANDIDATES_PER_STATION = 3
-
-const comboTinyNumberInputSx = {
-  width: '3.5rem',
-  maxWidth: '100%',
-  padding: '4px 6px',
-  fontSize: '0.8125rem',
-  textAlign: 'center',
-}
-
-function emptyComboSlotRow() {
-  return {
-    title: '',
-    candidate_exercise_ids: [],
-    exercise_title_by_id: {},
-    advance_mode: 'timed',
-    load_sec: '',
-    consecutive_reps: '',
-    rep_series_count: '1',
-    intra_rep_rest_sec: '',
-    transition_after_sec: '',
-  }
-}
-
-function comboSlotsFromDetail(exercise) {
-  const raw = exercise?.combination_slots
-  const arch = exercise?.method_archetype != null ? String(exercise.method_archetype).trim() : ''
-  const serienFallback = defaultRepSeriesCountForArchetype(arch)
-  const mp =
-    exercise?.method_profile &&
-    typeof exercise.method_profile === 'object' &&
-    !Array.isArray(exercise.method_profile)
-      ? exercise.method_profile
-      : {}
-  const spvList = readSlotProfilesV1(mp)
-  const byIx = new Map(spvList.map((r) => [Number(r.slot_index), r]))
-
-  if (!Array.isArray(raw) || raw.length === 0) {
-    return [emptyComboSlotRow()]
-  }
-  const sorted = [...raw].sort((a, b) => (Number(a.slot_index) || 0) - (Number(b.slot_index) || 0))
-  return sorted.map((s) => {
-    const si = Number(s.slot_index)
-    const st = byIx.get(si) || {}
-    const cands = Array.isArray(s.candidate_exercise_ids)
-      ? s.candidate_exercise_ids.map((x) => Number(x)).filter((n) => Number.isFinite(n))
-      : []
-    const mode = normalizeAdvanceMode(st.advance_mode)
-    let repSer = ''
-    if (st.rep_series_count != null) repSer = String(st.rep_series_count)
-    else if (mode === 'rep' || mode === 'manual') repSer = String(serienFallback)
-    else repSer = '1'
-    return {
-      title: s.title != null ? String(s.title) : '',
-      candidate_exercise_ids: cands,
-      exercise_title_by_id: {},
-      advance_mode: mode,
-      load_sec: st.load_sec != null ? String(st.load_sec) : '',
-      consecutive_reps: st.consecutive_reps != null ? String(st.consecutive_reps) : '',
-      rep_series_count: repSer,
-      intra_rep_rest_sec: st.intra_rep_rest_sec != null ? String(st.intra_rep_rest_sec) : '',
-      transition_after_sec: st.transition_after_sec != null ? String(st.transition_after_sec) : '',
-    }
-  })
-}
-
-function emptyVariantDraft() {
-  return {
-    variant_name: '',
-    description: '',
-    execution_changes: '',
-    duration_min: '',
-    duration_max: '',
-    equipment_lines: '',
-    difficulty_adjustment: '',
-    progression_level: 1,
-    prerequisite_variant_id: '',
-  }
-}
-
-function apiVariantToRow(v) {
-  let lines = ''
-  const eq = v.equipment_changes
-  if (Array.isArray(eq)) {
-    lines = eq.join('\n')
-  } else if (typeof eq === 'string' && eq.trim()) {
-    try {
-      const p = JSON.parse(eq)
-      lines = Array.isArray(p) ? p.join('\n') : eq
-    } catch {
-      lines = eq
-    }
-  }
-  return {
-    ...v,
-    duration_min: v.duration_min ?? '',
-    duration_max: v.duration_max ?? '',
-    equipment_lines: lines,
-    progression_level: v.progression_level ?? 1,
-    prerequisite_variant_id: v.prerequisite_variant_id ?? '',
-    difficulty_adjustment: v.difficulty_adjustment ?? '',
-  }
-}
-
-function buildVariantPayloadFromRow(row) {
-  const lines = (row.equipment_lines || '')
-    .split(/[\n,]+/)
-    .map((s) => s.trim())
-    .filter(Boolean)
-  const pl =
-    row.progression_level === '' || row.progression_level == null
-      ? 1
-      : parseInt(row.progression_level, 10)
-  const so =
-    row.sequence_order === '' || row.sequence_order == null
-      ? null
-      : parseInt(row.sequence_order, 10)
-  return {
-    variant_name: (row.variant_name || '').trim(),
-    description: (row.description || '').trim() || null,
-    execution_changes: (row.execution_changes || '').trim() || null,
-    duration_min: row.duration_min === '' || row.duration_min == null ? null : parseInt(row.duration_min, 10),
-    duration_max: row.duration_max === '' || row.duration_max == null ? null : parseInt(row.duration_max, 10),
-    equipment_changes: lines,
-    difficulty_adjustment: row.difficulty_adjustment || null,
-    progression_level: Number.isNaN(pl) ? 1 : pl,
-    sequence_order: so !== null && Number.isNaN(so) ? null : so,
-    prerequisite_variant_id:
-      row.prerequisite_variant_id === '' || row.prerequisite_variant_id == null
-        ? null
-        : parseInt(row.prerequisite_variant_id, 10),
-  }
-}
-
-/** Gemeinsame Felder für „Variante bearbeiten“ und „Neue Variante“. */
-function ExerciseVariantFields({
-  row,
-  onPatch,
-  prerequisiteOthers,
-  rteMinHeight = '110px',
-  inlineExerciseId,
-  linkedExerciseMedia = [],
-  onExerciseMediaListChanged,
-}) {
-  return (
-    <>
-      <div className="form-row">
-        <label className="form-label">Variantenname *</label>
-        <input
-          type="text"
-          className="form-input"
-          value={row.variant_name || ''}
-          onChange={(e) => onPatch({ variant_name: e.target.value })}
-          minLength={3}
-        />
-      </div>
-      <div className="form-row">
-        <label className="form-label">Kurzbeschreibung</label>
-        <textarea
-          className="form-input"
-          rows={2}
-          value={row.description || ''}
-          onChange={(e) => onPatch({ description: e.target.value })}
-        />
-      </div>
-      <div className="form-row">
-        <label className="form-label">Abweichungen zur Durchführung</label>
-        <RichTextEditor
-          value={row.execution_changes || ''}
-          onChange={(html) => onPatch({ execution_changes: html })}
-          placeholder="Was unterscheidet diese Variante? (Listen über Symbolleiste)"
-          minHeight={rteMinHeight}
-          inlineExerciseId={inlineExerciseId}
-          linkedExerciseMedia={linkedExerciseMedia}
-          onExerciseMediaListChanged={onExerciseMediaListChanged}
-        />
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
-        <div className="form-row">
-          <label className="form-label">Dauer Min</label>
-          <input
-            type="number"
-            className="form-input"
-            value={row.duration_min}
-            onChange={(e) => onPatch({ duration_min: e.target.value })}
-          />
-        </div>
-        <div className="form-row">
-          <label className="form-label">Dauer Max</label>
-          <input
-            type="number"
-            className="form-input"
-            value={row.duration_max}
-            onChange={(e) => onPatch({ duration_max: e.target.value })}
-          />
-        </div>
-      </div>
-      <div className="form-row">
-        <label className="form-label">Materialänderungen (eine Zeile pro Eintrag)</label>
-        <textarea
-          className="form-input"
-          rows={2}
-          value={row.equipment_lines || ''}
-          onChange={(e) => onPatch({ equipment_lines: e.target.value })}
-          placeholder="+ Pratzen"
-        />
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '10px' }}>
-        <div className="form-row">
-          <label className="form-label">Schwere relativ</label>
-          <select
-            className="form-input"
-            value={row.difficulty_adjustment || ''}
-            onChange={(e) => onPatch({ difficulty_adjustment: e.target.value })}
-          >
-            {VARIANT_DIFFICULTY.map((o) => (
-              <option key={o.label} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="form-row">
-          <label className="form-label">Progressions-Stufe (1–10)</label>
-          <input
-            type="number"
-            min={1}
-            max={10}
-            className="form-input"
-            value={row.progression_level}
-            onChange={(e) =>
-              onPatch({
-                progression_level: e.target.value === '' ? '' : parseInt(e.target.value, 10),
-              })
-            }
-          />
-        </div>
-        <div className="form-row">
-          <label className="form-label">Voraussetzungs-Variante</label>
-          <select
-            className="form-input"
-            value={
-              row.prerequisite_variant_id === '' || row.prerequisite_variant_id == null
-                ? ''
-                : String(row.prerequisite_variant_id)
-            }
-            onChange={(e) =>
-              onPatch({
-                prerequisite_variant_id: e.target.value === '' ? '' : parseInt(e.target.value, 10),
-              })
-            }
-          >
-            <option value="">— keine —</option>
-            {prerequisiteOthers.map((o) => (
-              <option key={o.id} value={o.id}>
-                {o.variant_name || `Variante #${o.id}`}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-    </>
-  )
-}
-
-function emptyForm() {
-  return {
-    title: '',
-    summary: '',
-    goal: '',
-    execution: '',
-    preparation: '',
-    trainer_notes: '',
-    equipmentLines: '',
-    duration_min: '',
-    duration_max: '',
-    group_size_min: '',
-    group_size_max: '',
-    focus_areas_multi: [],
-    training_styles_multi: [],
-    training_types_multi: [],
-    target_groups_multi: [],
-    visibility: 'private',
-    club_id: null,
-    status: 'draft',
-    skills: [],
-    exercise_kind: 'simple',
-    method_archetype: '',
-    method_profile_json: '{}',
-    combination_slots: [emptyComboSlotRow()],
-  }
-}
-
-function detailToForm(exercise) {
-  return {
-    title: exercise.title || '',
-    summary: exercise.summary || '',
-    goal: exercise.goal || '',
-    execution: exercise.execution || '',
-    preparation: exercise.preparation || '',
-    trainer_notes: exercise.trainer_notes || '',
-    equipmentLines: (exercise.equipment || []).join('\n'),
-    duration_min: exercise.duration_min ?? '',
-    duration_max: exercise.duration_max ?? '',
-    group_size_min: exercise.group_size_min ?? '',
-    group_size_max: exercise.group_size_max ?? '',
-    focus_areas_multi: (exercise.focus_areas || []).map((f) => ({
-      focus_area_id: f.focus_area_id,
-      is_primary: !!f.is_primary,
-    })),
-    training_styles_multi: (exercise.training_styles || []).map((t) => ({
-      training_style_id: t.training_style_id,
-      is_primary: !!t.is_primary,
-    })),
-    training_types_multi: (exercise.training_types || []).map((t) => ({
-      training_type_id: t.training_type_id,
-      is_primary: !!t.is_primary,
-    })),
-    target_groups_multi: (exercise.target_groups || []).map((g) => ({
-      target_group_id: g.target_group_id,
-      is_primary: !!g.is_primary,
-    })),
-    visibility: exercise.visibility || 'private',
-    club_id:
-      String(exercise.visibility || '').trim().toLowerCase() === 'club' &&
-      exercise.club_id != null &&
-      exercise.club_id !== ''
-        ? Number(exercise.club_id)
-        : null,
-    status: exercise.status || 'draft',
-    skills:
-      exercise.skills?.map((s) => ({
-        skill_id: s.skill_id,
-        is_primary: s.is_primary || false,
-        intensity: s.intensity || '',
-        required_level: normalizeSkillLevelSlug(s.required_level),
-        target_level: normalizeSkillLevelSlug(s.target_level),
-      })) || [],
-    exercise_kind:
-      String(exercise.exercise_kind || 'simple').toLowerCase() === 'combination'
-        ? 'combination'
-        : 'simple',
-    method_archetype: exercise.method_archetype != null ? String(exercise.method_archetype) : '',
-    method_profile_json:
-      typeof exercise.method_profile === 'object' &&
-      exercise.method_profile != null &&
-      !Array.isArray(exercise.method_profile)
-        ? JSON.stringify(exercise.method_profile, null, 2)
-        : '{}',
-    combination_slots: comboSlotsFromDetail(exercise),
-  }
-}
-
-function MultiAssocBlock({ title, rows, setRows, options, idKey, emptyLabel }) {
-  const setPrimary = (idx) => {
-    setRows(rows.map((r, i) => ({ ...r, is_primary: i === idx })))
-  }
-  const updateRow = (idx, patch) => {
-    const next = rows.map((r, i) => (i === idx ? { ...r, ...patch } : r))
-    if (patch.is_primary === true) {
-      next.forEach((r, i) => {
-        if (i !== idx) r.is_primary = false
-      })
-    }
-    setRows(next)
-  }
-  const addRow = () => setRows([...rows, { [idKey]: '', is_primary: rows.length === 0 }])
-  const removeRow = (idx) => {
-    const next = rows.filter((_, i) => i !== idx)
-    if (next.length && !next.some((r) => r.is_primary)) next[0].is_primary = true
-    setRows(next)
-  }
-
-  return (
-    <div className="multi-assoc-block">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
-        <h3>{title}</h3>
-        <button type="button" className="btn btn-secondary" style={{ fontSize: '12px', padding: '4px 10px' }} onClick={addRow}>
-          + Eintrag
-        </button>
-      </div>
-      {rows.length === 0 && (
-        <p style={{ fontSize: '13px', color: 'var(--text2)', margin: 0 }}>{emptyLabel}</p>
-      )}
-      {rows.map((row, idx) => (
-        <div key={idx} className="multi-assoc-row">
-          <select
-            className="form-input"
-            value={row[idKey] || ''}
-            onChange={(e) => updateRow(idx, { [idKey]: e.target.value ? parseInt(e.target.value, 10) : '' })}
-          >
-            <option value="">— wählen —</option>
-            {options.map((o) => (
-              <option key={o.id} value={o.id}>
-                {o.icon ? `${o.icon} ` : ''}
-                {o.name}
-                {o.abbreviation ? ` (${o.abbreviation})` : ''}
-              </option>
-            ))}
-          </select>
-          <label style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '13px', whiteSpace: 'nowrap' }}>
-            <input
-              type="radio"
-              name={`primary-${idKey}`}
-              checked={!!row.is_primary}
-              onChange={() => setPrimary(idx)}
-            />
-            primär
-          </label>
-          <button type="button" className="btn" style={{ fontSize: '12px', padding: '4px 8px' }} onClick={() => removeRow(idx)}>
-            ✕
-          </button>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function ExerciseFormPage() {
-  const { id: routeId } = useParams()
-  const navigate = useNavigate()
-  const { user } = useAuth()
-  const isSuperadmin = user?.role === 'superadmin'
-  const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
-  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
-
-  const [clubsForGovernanceForms, setClubsForGovernanceForms] = useState([])
-  useEffect(() => {
-    if (!isPlatformAdmin) {
-      setClubsForGovernanceForms([])
-      return undefined
-    }
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = await api.listClubs()
-        if (!cancelled) setClubsForGovernanceForms(Array.isArray(list) ? list : [])
-      } catch {
-        if (!cancelled) setClubsForGovernanceForms([])
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [isPlatformAdmin, tenantClubDepKey])
-
-  const membershipClubRows = useMemo(() => activeClubMemberships(user?.clubs), [user?.clubs])
-
-  /** Plattform-Admin: alle Vereine; sonst nur Mitgliedschafts-Vereine. */
-  const visibilityClubChoices = useMemo(() => {
-    if (isPlatformAdmin && clubsForGovernanceForms.length > 0) {
-      return [...clubsForGovernanceForms].sort((a, b) =>
-        String(a.name || '').localeCompare(String(b.name || ''), 'de'),
-      )
-    }
-    return [...membershipClubRows].sort((a, b) =>
-      String(a.name || '').localeCompare(String(b.name || ''), 'de'),
-    )
-  }, [isPlatformAdmin, clubsForGovernanceForms, membershipClubRows])
-
-  const governanceDefaultClubId = useMemo(() => getDefaultClubIdForGovernanceForms(user), [user])
-
-  const exerciseId = routeId && !Number.isNaN(parseInt(routeId, 10)) ? parseInt(routeId, 10) : null
-  const isEdit = exerciseId != null
-
-  const [formData, setFormData] = useState(emptyForm)
-  const [skillsCatalog, setSkillsCatalog] = useState([])
-  const [focusAreas, setFocusAreas] = useState([])
-  const [styleDirections, setStyleDirections] = useState([])
-  const [trainingTypes, setTrainingTypes] = useState([])
-  const [targetGroups, setTargetGroups] = useState([])
-  const [mediaList, setMediaList] = useState([])
-  const [loading, setLoading] = useState(!!isEdit)
-  const [saving, setSaving] = useState(false)
-  const [formDirty, setFormDirty] = useState(false)
-  const [skillPick, setSkillPick] = useState('')
-
-  const toast = useToast()
-  const allowUnloadBlock = Boolean(formDirty && !loading && !saving)
-  useBeforeUnloadWhen(allowUnloadBlock)
-  const blocker = useUnsavedChangesBlocker(allowUnloadBlock)
-  const [variants, setVariants] = useState([])
-  const [variantDraft, setVariantDraft] = useState(() => emptyVariantDraft())
-  const [variantSavingId, setVariantSavingId] = useState(null)
-  const [variantBusy, setVariantBusy] = useState(false)
-  const [variantEditSelection, setVariantEditSelection] = useState(null)
-  const variantsDetailsRef = useRef(null)
-
-  const [mediaFields, setMediaFields] = useState({})
-  const [mediaSavingId, setMediaSavingId] = useState(null)
-  const [archiveOpen, setArchiveOpen] = useState(false)
-  const [archiveQ, setArchiveQ] = useState('')
-  const [archiveLoading, setArchiveLoading] = useState(false)
-  const [archiveItems, setArchiveItems] = useState([])
-  const [archiveError, setArchiveError] = useState(null)
-  const [mediaPreview, setMediaPreview] = useState(null)
-  const [reportTarget, setReportTarget] = useState(null)
-
-  useEffect(() => {
-    const next = {}
-    for (const m of mediaList) {
-      next[m.id] = {
-        title: m.title || '',
-      }
-    }
-    setMediaFields(next)
-  }, [mediaList])
-
-  useEffect(() => {
-    const onDragOverDoc = (e) => {
-      const types = e.dataTransfer?.types ? Array.from(e.dataTransfer.types) : []
-      if (!types.includes(SHINKAN_EXERCISE_MEDIA_DRAG_MIME)) return
-      e.preventDefault()
-      autoScrollForDragNearEdges(e)
-    }
-    document.addEventListener('dragover', onDragOverDoc)
-    return () => document.removeEventListener('dragover', onDragOverDoc)
-  }, [])
-
-
-
-  useEffect(() => {
-    if (!archiveOpen) return undefined
-    let cancelled = false
-    const t = setTimeout(async () => {
-      setArchiveLoading(true)
-      setArchiveError(null)
-      try {
-        const res = await api.listMediaAssets({
-          q: archiveQ.trim() || undefined,
-          limit: 40,
-        })
-        if (!cancelled) setArchiveItems((res.items || []).filter(a => !a.legal_hold_active))
-      } catch (e) {
-        if (!cancelled) setArchiveError(e.message || String(e))
-      } finally {
-        if (!cancelled) setArchiveLoading(false)
-      }
-    }, 280)
-    return () => {
-      cancelled = true
-      clearTimeout(t)
-    }
-  }, [archiveOpen, archiveQ])
-
-  useEffect(() => {
-    let cancelled = false
-    const boot = async () => {
-      try {
-        const [skillsData, faData, sdData, ttData, tgData] = await Promise.all([
-          api.listSkills(),
-          api.listFocusAreas(),
-          api.listTrainingStyles(),
-          api.listTrainingTypes(),
-          api.listTargetGroups(),
-        ])
-        if (cancelled) return
-        setSkillsCatalog(skillsData)
-        setFocusAreas(faData)
-        setStyleDirections(sdData)
-        setTrainingTypes(ttData)
-        setTargetGroups(tgData)
-      } catch (e) {
-        if (!cancelled) {
-          console.error(e)
-          toast.error(
-            'Kataloge (Fokus, Stile, Zielgruppen, Fähigkeiten) konnten nicht geladen werden: ' +
-              (e.message || e),
-          )
-        }
-      }
-    }
-    boot()
-    return () => {
-      cancelled = true
-    }
-  }, [toast])
-
-  useEffect(() => {
-    if (!isEdit) {
-      setFormData(emptyForm())
-      setMediaList([])
-      setVariants([])
-      setVariantDraft(emptyVariantDraft())
-      setVariantEditSelection(null)
-      setFormDirty(false)
-      setLoading(false)
-      return
-    }
-    let cancelled = false
-    const load = async () => {
-      setLoading(true)
-      try {
-        const exercise = await api.getExercise(exerciseId)
-        if (cancelled) return
-        setFormData(detailToForm(exercise))
-        setMediaList(exercise.media || [])
-        setVariants((exercise.variants || []).map(apiVariantToRow))
-        setVariantDraft(emptyVariantDraft())
-        setVariantEditSelection(null)
-        setFormDirty(false)
-      } catch (err) {
-        if (!cancelled) {
-          toast.error(err.message || 'Übung nicht ladbar')
-          navigate('/exercises')
-        }
-      } finally {
-        if (!cancelled) setLoading(false)
-      }
-    }
-    load()
-    return () => {
-      cancelled = true
-    }
-  }, [isEdit, exerciseId, navigate, toast])
-
-  useEffect(() => {
-    if (variantEditSelection == null || variantEditSelection === 'new') return
-    if (!variants.some((v) => v.id === variantEditSelection)) {
-      setVariantEditSelection(null)
-    }
-  }, [variants, variantEditSelection])
-
-  useEffect(() => {
-    if (variantEditSelection != null && variantsDetailsRef.current) {
-      variantsDetailsRef.current.open = true
-    }
-  }, [variantEditSelection])
-
-  const updateFormField = (field, value) => {
-    setFormDirty(true)
-    setFormData((prev) => ({ ...prev, [field]: value }))
-  }
-
-  useEffect(() => {
-    if (formData.visibility !== 'club') return
-    const choices = visibilityClubChoices
-    if (!choices.length) return
-
-    const id =
-      formData.club_id != null && formData.club_id !== '' ? Number(formData.club_id) : NaN
-    const hasValid =
-      Number.isFinite(id) && id > 0 && choices.some((c) => Number(c.id) === id)
-
-    if (hasValid) return
-
-    const fallback = governanceDefaultClubId
-    const next =
-      fallback != null &&
-      Number.isFinite(Number(fallback)) &&
-      choices.some((c) => Number(c.id) === Number(fallback))
-        ? Number(fallback)
-        : Number(choices[0].id)
-
-    setFormData((prev) => {
-      if (prev.visibility !== 'club') return prev
-      if (prev.club_id != null && Number(prev.club_id) === next) return prev
-      return { ...prev, club_id: next }
-    })
-  }, [
-    formData.visibility,
-    formData.club_id,
-    visibilityClubChoices,
-    governanceDefaultClubId,
-  ])
-
-  const [comboStationPickerIx, setComboStationPickerIx] = useState(null)
-  const [comboDropTargetIx, setComboDropTargetIx] = useState(null)
-
-  const reorderCombinationSlots = (fromI, toBeforeIx) => {
-    setFormDirty(true)
-    setFormData((prev) => {
-      const rows = [...(prev.combination_slots || [])]
-      if (fromI < 0 || fromI >= rows.length) return prev
-      const [moved] = rows.splice(fromI, 1)
-      let insertAt = toBeforeIx
-      if (fromI < toBeforeIx) insertAt = toBeforeIx - 1
-      insertAt = Math.max(0, Math.min(insertAt, rows.length))
-      rows.splice(insertAt, 0, moved)
-      return { ...prev, combination_slots: rows }
-    })
-  }
-
-  const patchComboSlotRow = (idx, patch) => {
-    setFormDirty(true)
-    setFormData((prev) => {
-      const rows = [...(prev.combination_slots || [])]
-      if (!rows[idx]) return prev
-      rows[idx] = { ...rows[idx], ...patch }
-      return { ...prev, combination_slots: rows }
-    })
-  }
-
-  const removeCandidateFromSlot = (slotIdx, exerciseId) => {
-    setFormDirty(true)
-    setFormData((prev) => {
-      const rows = [...(prev.combination_slots || [])]
-      const row = rows[slotIdx]
-      if (!row) return prev
-      const nextIds = (row.candidate_exercise_ids || []).filter((id) => Number(id) !== Number(exerciseId))
-      const labels = row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object' ? { ...row.exercise_title_by_id } : {}
-      delete labels[Number(exerciseId)]
-      rows[slotIdx] = { ...row, candidate_exercise_ids: nextIds, exercise_title_by_id: labels }
-      return { ...prev, combination_slots: rows }
-    })
-  }
-
-  const mergePickedExercisesIntoSlot = (slotIdx, pickedList) => {
-    if (!Array.isArray(pickedList) || !pickedList.length) return
-    const rowNow = (formData.combination_slots || [])[slotIdx] || emptyComboSlotRow()
-    const existingIds = Array.isArray(rowNow.candidate_exercise_ids)
-      ? rowNow.candidate_exercise_ids.map((n) => Number(n)).filter((n) => Number.isFinite(n))
-      : []
-    const ordered = [...existingIds]
-    pickedList.forEach((ex) => {
-      if (ex?.id == null) return
-      const id = Number(ex.id)
-      if (!Number.isFinite(id)) return
-      if (!ordered.includes(id)) ordered.push(id)
-    })
-    let nextIds = ordered
-    if (nextIds.length > MAX_COMBO_CANDIDATES_PER_STATION) {
-      toast.info(
-        `Pro Station höchstens ${MAX_COMBO_CANDIDATES_PER_STATION} Übungen — üblich eine feste Übung; zwei bis drei nur als kleiner Wechsel‑Pool. Überschüssige Auswahl wurde abgeschnitten.`,
-      )
-      nextIds = nextIds.slice(0, MAX_COMBO_CANDIDATES_PER_STATION)
-    }
-    setFormDirty(true)
-    setFormData((prev) => {
-      const rows = [...(prev.combination_slots || [])]
-      const row = rows[slotIdx] || emptyComboSlotRow()
-      const labels =
-        row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object' ? { ...row.exercise_title_by_id } : {}
-      pickedList.forEach((ex) => {
-        if (ex && ex.id != null) {
-          const id = Number(ex.id)
-          const t = (ex.title || '').trim()
-          if (t) labels[id] = t
-        }
-      })
-      rows[slotIdx] = { ...row, candidate_exercise_ids: nextIds, exercise_title_by_id: labels }
-      return { ...prev, combination_slots: rows }
-    })
-  }
-
-  const addSkillRow = () => {
-    const id = skillPick ? parseInt(skillPick, 10) : null
-    if (!id) {
-      toast.error('Fähigkeit wählen')
-      return
-    }
-    if (formData.skills.some((s) => s.skill_id === id)) {
-      toast.info('Bereits zugeordnet')
-      return
-    }
-    updateFormField('skills', [
-      ...formData.skills,
-      {
-        skill_id: id,
-        is_primary: formData.skills.length === 0,
-        intensity: '',
-        required_level: '',
-        target_level: '',
-      },
-    ])
-    setSkillPick('')
-  }
-
-  const setSkillPrimary = (idx) => {
-    updateFormField(
-      'skills',
-      formData.skills.map((s, i) => ({ ...s, is_primary: i === idx })),
-    )
-  }
-
-  const updateSkillField = (idx, field, value) => {
-    updateFormField(
-      'skills',
-      formData.skills.map((s, i) => (i === idx ? { ...s, [field]: value } : s)),
-    )
-  }
-
-  const removeSkillRow = (idx) => {
-    const next = formData.skills.filter((_, i) => i !== idx)
-    if (next.length && !next.some((s) => s.is_primary)) next[0].is_primary = true
-    updateFormField('skills', next)
-  }
-
-  const performSaveAttempt = useCallback(
-    async ({ fromUnsavedDialog = false } = {}) => {
-      if (!formData.title || formData.title.trim().length < 3) {
-        toast.error('Titel mindestens 3 Zeichen')
-        return false
-      }
-      const payloadBase = {
-        ...formData,
-        equipment:
-          typeof formData.equipmentLines === 'string'
-            ? formData.equipmentLines
-                .split(/[\n,]+/)
-                .map((s) => s.trim())
-                .filter(Boolean)
-            : [],
-      }
-      let payload
-      try {
-        payload = buildExerciseApiPayload(payloadBase)
-      } catch (err) {
-        toast.error(err.message)
-        return false
-      }
-      setSaving(true)
-      try {
-        if (isEdit) {
-          const saveOnce = (extras = {}) =>
-            api.updateExercise(exerciseId, buildExerciseApiPayload(payloadBase, extras))
-          try {
-            await saveOnce()
-          } catch (firstErr) {
-            if (
-              firstErr.status === 422 &&
-              firstErr.code === 'OFFICIAL_MEDIA_LIFECYCLE' &&
-              firstErr.payload?.media_assets
-            ) {
-              toast.error(
-                'Speichern nicht möglich: mindestens ein verknüpftes Medium ist nicht aktiv (Papierkorb). ' +
-                  'Bitte Medium wiederherstellen oder aus der Übung entfernen.',
-              )
-              throw firstErr
-            }
-            if (firstErr.status === 422 && firstErr.code === 'OFFICIAL_MEDIA_CONFIRM_REQUIRED') {
-              const promo = (firstErr.payload.assets_need_visibility_promotion || []).length
-              const miss = (firstErr.payload.assets_missing_copyright || []).length
-              let msg = 'Die Übung ist oder wird offiziell. '
-              if (promo > 0) {
-                msg += `${promo} verknüpfte Datei(en) werden dabei plattformweit („offiziell“) freigegeben. `
-              }
-              if (miss > 0) {
-                msg += `${miss} Datei(en) haben noch keinen ausreichenden Copyright-Vermerk (mind. 3 Zeichen). `
-              }
-              msg += 'Fortfahren?'
-              if (!window.confirm(msg)) throw firstErr
-              let defaultCopyright = ''
-              if (miss > 0) {
-                defaultCopyright = window.prompt(
-                  'Copyright-Vermerk für betroffene Dateien ohne Eintrag (mind. 3 Zeichen):',
-                  '© ',
-                )
-                if (!defaultCopyright || String(defaultCopyright).trim().length < 3) {
-                  toast.error('Mindestens 3 Zeichen für den Copyright-Vermerk.')
-                  throw firstErr
-                }
-              }
-              await saveOnce({
-                promote_attached_media_for_official: true,
-                ...(miss > 0 ? { default_official_media_copyright: String(defaultCopyright).trim() } : {}),
-              })
-            } else if (
-              firstErr.status === 422 &&
-              firstErr.code === 'CLUB_MEDIA_COPYRIGHT_REQUIRED' &&
-              firstErr.payload?.media_assets
-            ) {
-              const miss = firstErr.payload.media_assets.length
-              const msg =
-                `Vereinsöffentliche Übungen brauchen bei jeder verknüpften Datei einen Copyright-Vermerk (mind. 3 Zeichen). ` +
-                `${miss} Datei(en) sind noch ohne ausreichenden Vermerk. ` +
-                `Beim Speichern einen gemeinsamen Vermerk für diese Dateien setzen?`
-              if (!window.confirm(msg)) throw firstErr
-              const defaultCopyright = window.prompt(
-                'Copyright-Vermerk für die betroffenen Dateien (mind. 3 Zeichen):',
-                '© ',
-              )
-              if (!defaultCopyright || String(defaultCopyright).trim().length < 3) {
-                toast.error('Mindestens 3 Zeichen für den Copyright-Vermerk.')
-                throw firstErr
-              }
-              await saveOnce({
-                default_club_media_copyright: String(defaultCopyright).trim(),
-              })
-            } else if (firstErr.status === 422 && firstErr.code === 'CLUB_MEDIA_LIFECYCLE') {
-              toast.error(
-                'Speichern nicht möglich: mindestens ein verknüpftes Medium ist nicht aktiv (Papierkorb). Bitte reaktivieren oder entfernen.',
-              )
-              throw firstErr
-            } else {
-              throw firstErr
-            }
-          }
-          const ex = await api.getExercise(exerciseId)
-          setMediaList(ex.media || [])
-          setVariants((ex.variants || []).map(apiVariantToRow))
-          setFormDirty(false)
-          toast.success('Gespeichert.')
-          return true
-        }
-        const created = await api.createExercise(payload)
-        setFormDirty(false)
-        toast.success('Übung angelegt.')
-        if (!fromUnsavedDialog) {
-          navigate(`/exercises/${created.id}/edit`, { replace: true })
-        }
-        return true
-      } catch (err) {
-        toast.error('Fehler beim Speichern: ' + err.message)
-        return false
-      } finally {
-        setSaving(false)
-      }
-    },
-    [exerciseId, formData, isEdit, navigate, toast],
-  )
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    await performSaveAttempt({ fromUnsavedDialog: false })
-  }
-
-  const handleUnsavedDialogSave = async () => {
-    const ok = await performSaveAttempt({ fromUnsavedDialog: true })
-    if (ok) blocker.proceed()
-  }
-
-  const refreshMedia = async () => {
-    if (!exerciseId) return
-    const ex = await api.getExercise(exerciseId)
-    setMediaList(ex.media || [])
-  }
-
-  const attachFromArchive = async (assetId) => {
-    if (!exerciseId) return
-    try {
-      await api.attachExerciseMediaFromAsset(exerciseId, {
-        media_asset_id: assetId,
-        context: 'ablauf',
-        title: '',
-        description: '',
-        is_primary: false,
-      })
-      setArchiveOpen(false)
-      await refreshMedia()
-    } catch (e) {
-      toast.error(e.message || String(e))
-    }
-  }
-
-  const linkedArchiveAssetIds = useMemo(
-    () => new Set((mediaList || []).map((m) => m.media_asset_id).filter(Boolean)),
-    [mediaList],
-  )
-
-  const handleDeleteMedia = async (mid) => {
-    if (
-      !confirm(
-        'Dieses Medium aus der Übung entfernen? Nur die Verknüpfung wird gelöscht. Die Datei bleibt im Archiv, solange sie noch woanders genutzt wird.\n\n' +
-          'Hinweis: Wenn dieser Eintrag noch als Platzhalter im Fließtext steht, zeigt die Vorschau [Medium nicht verfügbar] oder das Speichern der Übung schlägt fehl, bis der Platzhalter entfernt ist.',
-      )
-    ) {
-      return
-    }
-    try {
-      const res = await api.deleteExerciseMedia(exerciseId, mid)
-      await refreshMedia()
-      const oid = res?.orphan_media_asset_id
-      if (oid != null) {
-        if (
-          confirm(
-            'Dieses Archiv-Medium wird danach nirgendwo mehr verwendet. In den Papierkorb (Stufe 1) legen? (Später in der Medienverwaltung wiederherstellbar.)',
-          )
-        ) {
-          await api.postMediaAssetLifecycle(oid, 'trash_soft')
-          await refreshMedia()
-        }
-      }
-    } catch (err) {
-      toast.error(err.message)
-    }
-  }
-
-  const moveMediaRow = async (idx, dir) => {
-    if (!exerciseId) return
-    const j = idx + dir
-    if (j < 0 || j >= mediaList.length) return
-    const next = [...mediaList]
-    const tmp = next[idx]
-    next[idx] = next[j]
-    next[j] = tmp
-    try {
-      await api.reorderExerciseMedia(
-        exerciseId,
-        next.map((x) => x.id),
-      )
-      setMediaList(next)
-    } catch (e) {
-      toast.error(e.message || String(e))
-    }
-  }
-
-  const saveMediaMeta = async (mid) => {
-    if (!exerciseId) return
-    const fld = mediaFields[mid]
-    if (!fld) return
-    setMediaSavingId(mid)
-    try {
-      await api.updateExerciseMedia(exerciseId, mid, {
-        title: fld.title.trim() || null,
-      })
-      await refreshMedia()
-    } catch (e) {
-      toast.error(e.message || String(e))
-    } finally {
-      setMediaSavingId(null)
-    }
-  }
-
-  const refreshVariants = async () => {
-    if (!exerciseId) return
-    const ex = await api.getExercise(exerciseId)
-    setVariants((ex.variants || []).map(apiVariantToRow))
-  }
-
-  const updateVariantField = (id, patch) => {
-    setFormDirty(true)
-    setVariants((prev) => prev.map((v) => (v.id === id ? { ...v, ...patch } : v)))
-  }
-
-  const saveVariantRow = async (row) => {
-    const payload = buildVariantPayloadFromRow(row)
-    if (payload.variant_name.length < 3) {
-      toast.error('Variantenname mindestens 3 Zeichen')
-      return
-    }
-    setVariantSavingId(row.id)
-    try {
-      await api.updateExerciseVariant(exerciseId, row.id, payload)
-      await refreshVariants()
-    } catch (e) {
-      toast.error(e.message || String(e))
-    } finally {
-      setVariantSavingId(null)
-    }
-  }
-
-  const deleteVariantRow = async (id) => {
-    if (!confirm('Variante wirklich löschen?')) return
-    setVariantBusy(true)
-    try {
-      await api.deleteExerciseVariant(exerciseId, id)
-      if (variantEditSelection === id) setVariantEditSelection(null)
-      await refreshVariants()
-    } catch (e) {
-      toast.error(e.message || String(e))
-    } finally {
-      setVariantBusy(false)
-    }
-  }
-
-  const moveVariantRow = async (idx, dir) => {
-    const j = idx + dir
-    if (j < 0 || j >= variants.length) return
-    const next = [...variants]
-    const tmp = next[idx]
-    next[idx] = next[j]
-    next[j] = tmp
-    const ids = next.map((x) => x.id)
-    setVariantBusy(true)
-    try {
-      await api.reorderExerciseVariants(exerciseId, ids)
-      await refreshVariants()
-    } catch (e) {
-      toast.error(e.message || String(e))
-    } finally {
-      setVariantBusy(false)
-    }
-  }
-
-  const createVariantSubmit = async (e) => {
-    e.preventDefault()
-    if (!exerciseId) return
-    const payload = buildVariantPayloadFromRow(variantDraft)
-    if (payload.variant_name.length < 3) {
-      toast.error('Variantenname mindestens 3 Zeichen')
-      return
-    }
-    setVariantBusy(true)
-    try {
-      const created = await api.createExerciseVariant(exerciseId, payload)
-      setVariantDraft(emptyVariantDraft())
-      await refreshVariants()
-      if (created?.id != null) setVariantEditSelection(created.id)
-      else setVariantEditSelection(null)
-    } catch (err) {
-      toast.error(err.message || String(err))
-    } finally {
-      setVariantBusy(false)
-    }
-  }
-
-  const availableSkills = skillsCatalog.filter((s) => !formData.skills.some((x) => x.skill_id === s.id))
-
-  const selectedVariantForEdit =
-    typeof variantEditSelection === 'number' ? variants.find((v) => v.id === variantEditSelection) : null
-  const selectedVariantIdx = selectedVariantForEdit
-    ? variants.findIndex((v) => v.id === selectedVariantForEdit.id)
-    : -1
-
-  if (loading) {
-    return (
-      <div style={{ padding: '2rem', textAlign: 'center' }}>
-        <div className="spinner"></div>
-        <p>Laden...</p>
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ padding: '12px' }} className="app-page">
-      <div style={{ marginBottom: '12px' }}>
-        <button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
-          ← Übersicht
-        </button>
-        {isEdit && (
-          <button
-            type="button"
-            className="btn btn-secondary"
-            style={{ marginLeft: '8px' }}
-            onClick={() => navigate(`/exercises/${exerciseId}`, { state: { fromExerciseEdit: true } })}
-          >
-            Ansehen
-          </button>
-        )}
-      </div>
-
-      <div className="card">
-        <h1 style={{ marginTop: 0, fontSize: '1.25rem' }}>{isEdit ? 'Übung bearbeiten' : 'Neue Übung'}</h1>
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-row">
-            <label className="form-label">Titel *</label>
-            <input
-              type="text"
-              className="form-input"
-              value={formData.title}
-              onChange={(e) => updateFormField('title', e.target.value)}
-              required
-              minLength={3}
-            />
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Kurzbeschreibung</label>
-            <RichTextEditor
-              value={formData.summary}
-              onChange={(html) => updateFormField('summary', html)}
-              placeholder="Kurzbeschreibung (optional)"
-              minHeight="80px"
-              inlineExerciseId={isEdit ? exerciseId : null}
-              linkedExerciseMedia={isEdit ? mediaList : []}
-              onExerciseMediaListChanged={refreshMedia}
-            />
-          </div>
-
-          <div
-            style={{
-              padding: '12px',
-              borderRadius: '8px',
-              border: '1px solid var(--border)',
-              background: 'var(--surface2)',
-              marginBottom: '12px',
-            }}
-          >
-            <h3 style={{ marginTop: 0, marginBottom: '10px', fontSize: '1rem' }}>Übungstyp</h3>
-            <div className="form-row">
-              <label className="form-label">Art</label>
-              <select
-                className="form-input"
-                value={formData.exercise_kind === 'combination' ? 'combination' : 'simple'}
-                onChange={(e) => {
-                  const nk = e.target.value
-                  setFormDirty(true)
-                  setFormData((prev) => ({
-                    ...prev,
-                    exercise_kind: nk,
-                    ...(nk === 'simple'
-                      ? {
-                          method_archetype: '',
-                          method_profile_json: '{}',
-                          combination_slots: [emptyComboSlotRow()],
-                        }
-                      : {}),
-                  }))
-                }}
-              >
-                <option value="simple">Einzelübung</option>
-                <option value="combination">Kombinationsübung (Stationen / Pool)</option>
-              </select>
-            </div>
-            {formData.exercise_kind === 'combination' ? (
-              <>
-                <div className="form-row">
-                  <label className="form-label">Methoden-Archetyp (für Coach &amp; Planung empfohlen)</label>
-                  <select
-                    className="form-input"
-                    value={formData.method_archetype || ''}
-                    onChange={(e) => {
-                      const arch = (e.target.value || '').trim()
-                      const forced = ARCHETYPE_DEFAULT_REP_SERIES_COUNT[arch]
-                      setFormDirty(true)
-                      setFormData((prev) => {
-                        const slots = prev.combination_slots || []
-                        const nextSlots =
-                          forced !== undefined && forced !== null
-                            ? slots.map((row) =>
-                                normalizeAdvanceMode(row.advance_mode) !== 'timed'
-                                  ? {
-                                      ...row,
-                                      rep_series_count: String(Math.max(1, Math.round(Number(forced)))),
-                                    }
-                                  : row,
-                              )
-                            : slots
-                        return { ...prev, method_archetype: arch, combination_slots: nextSlots }
-                      })
-                    }}
-                  >
-                    <option value="">— noch nicht festgelegt —</option>
-                    {COMBINATION_ARCHETYPE_OPTIONS.map((o) => (
-                      <option key={o.id} value={o.id}>
-                        {o.label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                {String(formData.method_archetype || '').trim() === 'station_parcour' ? (
-                  <p
-                    style={{
-                      fontSize: '12px',
-                      color: 'var(--text2)',
-                      margin: '4px 0 10px',
-                      lineHeight: 1.48,
-                      padding: '10px 12px',
-                      borderRadius: '8px',
-                      background: 'var(--surface)',
-                      border: '1px solid var(--border)',
-                    }}
-                  >
-                    <strong>Parcours / Bahnsystem:</strong> typischerweise starten alle an Station 1 und durchlaufen der
-                    Reihe nach alle Punkte (Geschwindigkeit variabel). Die Stationsreihenfolge unten ist der Ablaufweg;
-                    Zeitangaben pro Station und <strong>Gesamtdurchläufe</strong> im Ablaufprofil strukturieren das
-                    spätere Coaching.
-                  </p>
-                ) : null}
-                <div style={{ paddingTop: '4px', borderTop: '1px dashed var(--border)', marginBottom: '12px' }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '8px', flexWrap: 'wrap' }}>
-                    <strong style={{ fontSize: '14px' }}>Stationen</strong>
-                    <span style={{ fontSize: '11px', color: 'var(--text3)' }}>
-                      Ablauf = Reihenfolge · ziehen / Pfeile · Einzelübungen · max. {MAX_COMBO_CANDIDATES_PER_STATION}/Station
-                    </span>
-                  </div>
-                  <p style={{ fontSize: '12px', color: 'var(--text2)', margin: '6px 0 12px', lineHeight: 1.48 }}>
-                    Pro Station oft <strong>eine</strong> feste Übung; höchstens <strong>drei</strong> als kleiner Auswahl‑Pool.
-                    Unter <strong>Steuerung</strong> wählen: zeitlich, nach Wiederholungszahl oder ohne Arbeitsuhr (Coach führt).
-                  </p>
-                  {(formData.combination_slots || []).map((row, idx) => {
-                    const candIds = Array.isArray(row.candidate_exercise_ids) ? row.candidate_exercise_ids : []
-                    const comboPoolFull = candIds.length >= MAX_COMBO_CANDIDATES_PER_STATION
-                    const slotAdv = normalizeAdvanceMode(row.advance_mode)
-                    const serieLabel =
-                      slotAdv === 'timed' ? 'Serie' : slotAdv === 'rep' ? 'Wdh. / Serie' : 'Richtwert'
-                    const seriePlaceholder = slotAdv === 'rep' ? '10' : slotAdv === 'manual' ? '–' : '1'
-                    const showMultiSeries = slotAdv === 'rep' || slotAdv === 'manual'
-                    const serienCountUi = parseComboRepSeriesCountUi(row.rep_series_count)
-                    const showInterSeriesPause = showMultiSeries && serienCountUi >= 2
-                    const intraLabel = slotAdv === 'timed' ? 'Pause (s)' : 'Pause zw. Serien'
-                    const lbl =
-                      row.exercise_title_by_id && typeof row.exercise_title_by_id === 'object'
-                        ? row.exercise_title_by_id
-                        : {}
-                    const isDropHere = comboDropTargetIx === idx
-                    return (
-                      <div
-                        key={`combo-slot-${idx}`}
-                        onDragOver={(e) => {
-                          if (!e.dataTransfer?.types?.includes?.(DND_EXERCISE_COMBO_STATION)) return
-                          e.preventDefault()
-                          e.dataTransfer.dropEffect = 'move'
-                          setComboDropTargetIx(idx)
-                        }}
-                        onDragLeave={() => setComboDropTargetIx((cur) => (cur === idx ? null : cur))}
-                        onDrop={(e) => {
-                          const rawFrom = e.dataTransfer.getData(DND_EXERCISE_COMBO_STATION)
-                          const fromI = parseInt(rawFrom, 10)
-                          e.preventDefault()
-                          setComboDropTargetIx(null)
-                          if (!Number.isFinite(fromI)) return
-                          reorderCombinationSlots(fromI, idx)
-                        }}
-                        style={{
-                          marginBottom: '12px',
-                          padding: '12px 14px',
-                          borderRadius: '12px',
-                          border: `1px solid ${isDropHere ? 'var(--accent)' : 'var(--border)'}`,
-                          background: 'var(--surface)',
-                          boxShadow: isDropHere ? '0 0 0 2px var(--accent-soft)' : 'none',
-                        }}
-                      >
-                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'flex-start', marginBottom: '12px' }}>
-                          <button
-                            type="button"
-                            draggable
-                            onDragStart={(e) => {
-                              e.dataTransfer.effectAllowed = 'move'
-                              e.dataTransfer.setData(DND_EXERCISE_COMBO_STATION, String(idx))
-                            }}
-                            onDragEnd={() => setComboDropTargetIx(null)}
-                            aria-label={`Station ${idx + 1} ziehen`}
-                            title="Ziehen zum Sortieren"
-                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                            style={{ cursor: 'grab', padding: '6px 8px', touchAction: 'none' }}
-                          >
-                            <GripVertical size={18} strokeWidth={2} aria-hidden />
-                          </button>
-                          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                            <button
-                              type="button"
-                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                              aria-label="Station nach oben"
-                              disabled={idx === 0}
-                              onClick={() => reorderCombinationSlots(idx, idx - 1)}
-                            >
-                              ▲
-                            </button>
-                            <button
-                              type="button"
-                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                              aria-label="Station nach unten"
-                              disabled={idx === (formData.combination_slots || []).length - 1}
-                              onClick={() => reorderCombinationSlots(idx, idx + 2)}
-                            >
-                              ▼
-                            </button>
-                          </div>
-                          <div className="form-row" style={{ flex: '1 1 200px', marginBottom: 0 }}>
-                            <label className="form-label" style={{ fontSize: '12px' }}>
-                              Name (St.&nbsp;{idx + 1})
-                            </label>
-                            <input
-                              type="text"
-                              className="form-input"
-                              value={row.title || ''}
-                              placeholder="z.&nbsp;B. Liegestütz"
-                              onChange={(e) => patchComboSlotRow(idx, { title: e.target.value })}
-                            />
-                          </div>
-                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'flex-end' }}>
-                            <button
-                              type="button"
-                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                              disabled={comboPoolFull}
-                              title={
-                                comboPoolFull
-                                  ? `Max. ${MAX_COMBO_CANDIDATES_PER_STATION} Übungen — eine entfernen, um weitere zu wählen.`
-                                  : 'Einzelübung zur Station hinzufügen'
-                              }
-                              onClick={() => setComboStationPickerIx(idx)}
-                            >
-                              + Übung
-                            </button>
-                            <button
-                              type="button"
-                              className="btn framework-ctrl framework-ctrl--xs"
-                              style={{ fontSize: '12px' }}
-                              title="Diese Station entfernen"
-                              onClick={() => {
-                                const prev = formData.combination_slots || []
-                                const next = prev.filter((_, j) => j !== idx)
-                                updateFormField('combination_slots', next.length ? next : [emptyComboSlotRow()])
-                              }}
-                            >
-                              Entfernen
-                            </button>
-                          </div>
-                        </div>
-                        <div style={{ marginBottom: '12px' }}>
-                          <span className="form-label" style={{ fontSize: '11px', display: 'block', marginBottom: '6px' }}>
-                            Übungen ({candIds.length}/{MAX_COMBO_CANDIDATES_PER_STATION})
-                          </span>
-                          {candIds.length === 0 ? (
-                            <p style={{ fontSize: '12px', color: 'var(--text3)', margin: 0 }}>
-                              Mindestens eine Übung — mit „+ Übung“ wählen.
-                            </p>
-                          ) : (
-                            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-                              {candIds.map((id) => (
-                                <li
-                                  key={`${idx}-c-${id}`}
-                                  style={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: '6px',
-                                    padding: '4px 10px',
-                                    borderRadius: '999px',
-                                    border: '1px solid var(--border)',
-                                    background: 'var(--surface2)',
-                                    fontSize: '12px',
-                                  }}
-                                >
-                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '14rem' }} title={`#${id}`}>
-                                    {(lbl[id] || lbl[String(id)] || '').trim() || `Übung #${id}`}
-                                  </span>
-                                  <button
-                                    type="button"
-                                    className="tu-icon-btn"
-                                    aria-label={`Übung ${id} entfernen`}
-                                    title="Entfernen"
-                                    onClick={() => removeCandidateFromSlot(idx, id)}
-                                  >
-                                    ✗
-                                  </button>
-                                </li>
-                              ))}
-                            </ul>
-                          )}
-                        </div>
-                        <div className="form-row" style={{ marginBottom: '8px', maxWidth: '22rem' }}>
-                          <label className="form-label" style={{ fontSize: '11px' }}>
-                            Steuerung
-                          </label>
-                          <select
-                            className="form-input"
-                            style={{ fontSize: '0.8125rem' }}
-                            value={slotAdv}
-                            onChange={(e) => {
-                              const m = normalizeAdvanceMode(e.target.value)
-                              const patch = { advance_mode: m }
-                              if (m !== 'timed') patch.load_sec = ''
-                              if (m === 'rep' || m === 'manual') {
-                                const curSer = String(row.rep_series_count ?? '').trim()
-                                if (!curSer) {
-                                  patch.rep_series_count = String(
-                                    defaultRepSeriesCountForArchetype(formData.method_archetype || ''),
-                                  )
-                                }
-                              }
-                              patchComboSlotRow(idx, patch)
-                            }}
-                          >
-                            <option value="timed">Zeit (Arbeit in Sekunden)</option>
-                            <option value="rep">Wiederholungen (Ziel)</option>
-                            <option value="manual">Coach (Weiter nach Freigabe)</option>
-                          </select>
-                        </div>
-                        <p style={{ fontSize: '11px', color: 'var(--text3)', margin: '0 0 10px', lineHeight: 1.42 }}>
-                          {slotAdv === 'timed'
-                            ? 'Arbeit (s): geplantes Ende nach Countdown möglich. Serie: Wiederholungen ohne Stationswechsel innerhalb einer Phase.'
-                            : slotAdv === 'rep'
-                              ? 'Ohne Pflicht-Arbeits-Timer: Ziel über Wiederholungen. Ab zwei Serien: Pause zwischen diesen Serien; sonst nur Wechsel zur nächsten Station.'
-                              : 'Coach: keine feste Arbeitsuhr — Fortschritt später per Tipp. Ab 2 Serien: Pause zwischen Serien; sonst nur Wechsel zur nächsten Station zeitlich planen.'}
-                        </p>
-                        <div
-                          style={{
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(auto-fill, minmax(5.25rem, 1fr))',
-                            gap: '8px 10px',
-                            alignItems: 'end',
-                          }}
-                        >
-                          {slotAdv === 'timed' ? (
-                            <div className="form-row" style={{ marginBottom: 0 }}>
-                              <label className="form-label" style={{ fontSize: '10px' }}>
-                                Arbeit (s)
-                              </label>
-                              <input
-                                type="number"
-                                min={0}
-                                className="form-input"
-                                style={comboTinyNumberInputSx}
-                                placeholder="–"
-                                value={row.load_sec || ''}
-                                onChange={(e) => patchComboSlotRow(idx, { load_sec: e.target.value })}
-                              />
-                            </div>
-                          ) : null}
-                          <div className="form-row" style={{ marginBottom: 0 }}>
-                            <label className="form-label" style={{ fontSize: '10px' }}>
-                              {serieLabel}
-                            </label>
-                            <input
-                              type="number"
-                              min={slotAdv === 'rep' ? 1 : undefined}
-                              className="form-input"
-                              style={comboTinyNumberInputSx}
-                              placeholder={seriePlaceholder}
-                              value={row.consecutive_reps || ''}
-                              onChange={(e) => patchComboSlotRow(idx, { consecutive_reps: e.target.value })}
-                            />
-                          </div>
-                          {showMultiSeries ? (
-                            <div className="form-row" style={{ marginBottom: 0 }}>
-                              <label className="form-label" style={{ fontSize: '10px' }} title="Wie oft die angegebene Wdh.-Zahl hintereinander (mit Pause zw. Serien)?">
-                                Serien
-                              </label>
-                              <input
-                                type="number"
-                                min={slotAdv === 'rep' ? 1 : undefined}
-                                className="form-input"
-                                style={comboTinyNumberInputSx}
-                                placeholder="1"
-                                value={row.rep_series_count || ''}
-                                onChange={(e) => {
-                                  let rawSer = e.target.value.trim()
-                                  if (rawSer === '') rawSer = '1'
-                                  const pn = parseInt(String(rawSer).trim(), 10)
-                                  const patch = { rep_series_count: rawSer }
-                                  if (!Number.isFinite(pn) || pn < 2) patch.intra_rep_rest_sec = ''
-                                  patchComboSlotRow(idx, patch)
-                                }}
-                              />
-                            </div>
-                          ) : null}
-                          {slotAdv === 'timed' || showInterSeriesPause ? (
-                            <div className="form-row" style={{ marginBottom: 0 }}>
-                              <label className="form-label" style={{ fontSize: '10px' }}>
-                                {intraLabel}
-                              </label>
-                              <input
-                                type="number"
-                                min={0}
-                                className="form-input"
-                                style={comboTinyNumberInputSx}
-                                placeholder="–"
-                                value={row.intra_rep_rest_sec || ''}
-                                onChange={(e) => patchComboSlotRow(idx, { intra_rep_rest_sec: e.target.value })}
-                              />
-                            </div>
-                          ) : null}
-                          <div className="form-row" style={{ marginBottom: 0 }}>
-                            <label className="form-label" style={{ fontSize: '10px' }}>
-                              Wechsel (s)
-                            </label>
-                            <input
-                              type="number"
-                              min={0}
-                              className="form-input"
-                              style={comboTinyNumberInputSx}
-                              placeholder="–"
-                              value={row.transition_after_sec || ''}
-                              onChange={(e) => patchComboSlotRow(idx, { transition_after_sec: e.target.value })}
-                            />
-                          </div>
-                        </div>
-                        {showMultiSeries && serienCountUi < 2 ? (
-                          <p style={{ fontSize: '10px', color: 'var(--text3)', margin: '6px 0 0', lineHeight: 1.38 }}>
-                            <strong>Wechsel (s)</strong> = Pause bis zur <strong>nächsten Station</strong>. Feld „Pause zw.
-                            Serien“ erscheint erst ab&nbsp;2 Serien (sonst keine Pause zwischen zwei Blöcken nötig).
-                          </p>
-                        ) : null}
-                      </div>
-                    )
-                  })}
-                  <div
-                    onDragOver={(e) => {
-                      if (!e.dataTransfer?.types?.includes?.(DND_EXERCISE_COMBO_STATION)) return
-                      e.preventDefault()
-                      e.dataTransfer.dropEffect = 'move'
-                    }}
-                    onDrop={(e) => {
-                      const rawFrom = e.dataTransfer.getData(DND_EXERCISE_COMBO_STATION)
-                      const fromI = parseInt(rawFrom, 10)
-                      e.preventDefault()
-                      setComboDropTargetIx(null)
-                      if (!Number.isFinite(fromI)) return
-                      const len = (formData.combination_slots || []).length
-                      reorderCombinationSlots(fromI, len)
-                    }}
-                    style={{
-                      padding: '10px',
-                      textAlign: 'center',
-                      fontSize: '11px',
-                      color: 'var(--text3)',
-                      border: '1px dashed var(--border)',
-                      borderRadius: '10px',
-                      marginBottom: '8px',
-                    }}
-                  >
-                    Hier ablegen zum Anhängen am Ende der Reihenfolge
-                  </div>
-                  <button
-                    type="button"
-                    className="btn btn-secondary"
-                    style={{ fontSize: '12px', marginTop: '4px' }}
-                    onClick={() => updateFormField('combination_slots', [...(formData.combination_slots || []), emptyComboSlotRow()])}
-                  >
-                    + Station
-                  </button>
-                </div>
-                <div className="form-row">
-                  <label className="form-label">Ablaufprofil (Runden &amp; global)</label>
-                  <CombinationMethodProfileEditor
-                    methodArchetype={formData.method_archetype || ''}
-                    methodProfileJson={formData.method_profile_json || '{}'}
-                    onChangeMethodProfileJson={(s) => updateFormField('method_profile_json', s)}
-                    comboSlotsOutline={(formData.combination_slots || []).map((r, i) => ({
-                      slot_index: i,
-                      title: r.title || '',
-                    }))}
-                    omitPerSlotTiming
-                  />
-                </div>
-              </>
-            ) : null}
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Ziel *</label>
-            <RichTextEditor
-              value={formData.goal}
-              onChange={(html) => updateFormField('goal', html)}
-              placeholder="Trainingsziel"
-              minHeight="120px"
-              inlineExerciseId={isEdit ? exerciseId : null}
-              linkedExerciseMedia={isEdit ? mediaList : []}
-              onExerciseMediaListChanged={refreshMedia}
-            />
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Durchführung *</label>
-            <RichTextEditor
-              value={formData.execution}
-              onChange={(html) => updateFormField('execution', html)}
-              placeholder="Ablauf Schritt für Schritt"
-              minHeight="180px"
-              inlineExerciseId={isEdit ? exerciseId : null}
-              linkedExerciseMedia={isEdit ? mediaList : []}
-              onExerciseMediaListChanged={refreshMedia}
-            />
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Vorbereitung / Aufbau</label>
-            <RichTextEditor
-              value={formData.preparation}
-              onChange={(html) => updateFormField('preparation', html)}
-              placeholder="Matten, Raum, …"
-              minHeight="100px"
-              inlineExerciseId={isEdit ? exerciseId : null}
-              linkedExerciseMedia={isEdit ? mediaList : []}
-              onExerciseMediaListChanged={refreshMedia}
-            />
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Hinweise für Trainer</label>
-            <RichTextEditor
-              value={formData.trainer_notes}
-              onChange={(html) => updateFormField('trainer_notes', html)}
-              placeholder="Sicherheit, Varianten-Hinweise, …"
-              minHeight="100px"
-              inlineExerciseId={isEdit ? exerciseId : null}
-              linkedExerciseMedia={isEdit ? mediaList : []}
-              onExerciseMediaListChanged={refreshMedia}
-            />
-          </div>
-
-          <div className="form-row">
-            <label className="form-label">Material (eine Zeile oder kommagetrennt)</label>
-            <textarea
-              className="form-input"
-              rows={3}
-              value={formData.equipmentLines}
-              onChange={(e) => updateFormField('equipmentLines', e.target.value)}
-              placeholder="Matten&#10;Pratzen"
-            />
-          </div>
-
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
-            <div className="form-row">
-              <label className="form-label">Dauer Min</label>
-              <input
-                type="number"
-                className="form-input"
-                value={formData.duration_min}
-                onChange={(e) =>
-                  updateFormField('duration_min', e.target.value ? parseInt(e.target.value, 10) : '')
-                }
-              />
-            </div>
-            <div className="form-row">
-              <label className="form-label">Dauer Max</label>
-              <input
-                type="number"
-                className="form-input"
-                value={formData.duration_max}
-                onChange={(e) =>
-                  updateFormField('duration_max', e.target.value ? parseInt(e.target.value, 10) : '')
-                }
-              />
-            </div>
-          </div>
-
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
-            <div className="form-row">
-              <label className="form-label">Gruppe Min</label>
-              <input
-                type="number"
-                className="form-input"
-                value={formData.group_size_min}
-                onChange={(e) =>
-                  updateFormField('group_size_min', e.target.value ? parseInt(e.target.value, 10) : '')
-                }
-              />
-            </div>
-            <div className="form-row">
-              <label className="form-label">Gruppe Max</label>
-              <input
-                type="number"
-                className="form-input"
-                value={formData.group_size_max}
-                onChange={(e) =>
-                  updateFormField('group_size_max', e.target.value ? parseInt(e.target.value, 10) : '')
-                }
-              />
-            </div>
-          </div>
-
-          <MultiAssocBlock
-            title="Fokusbereiche (0…n, ein „primär“)"
-            rows={formData.focus_areas_multi}
-            setRows={(r) => updateFormField('focus_areas_multi', r)}
-            options={focusAreas}
-            idKey="focus_area_id"
-            emptyLabel="Keine Zuordnung — optional „+ Eintrag“."
-          />
-
-          <MultiAssocBlock
-            title="Stilrichtungen (0…n, z. B. Shotokan)"
-            rows={formData.training_styles_multi}
-            setRows={(r) => updateFormField('training_styles_multi', r)}
-            options={styleDirections.map((sd) => ({
-              ...sd,
-              name: sd.parent_style_name ? `${sd.name} (${sd.parent_style_name})` : sd.name,
-            }))}
-            idKey="training_style_id"
-            emptyLabel="Keine Stilrichtung gewählt."
-          />
-
-          <MultiAssocBlock
-            title="Trainingsstil (0…n, z. B. Breitensport / Leistungssport)"
-            rows={formData.training_types_multi}
-            setRows={(r) => updateFormField('training_types_multi', r)}
-            options={trainingTypes}
-            idKey="training_type_id"
-            emptyLabel="Kein Trainingsstil gewählt."
-          />
-
-          <MultiAssocBlock
-            title="Zielgruppen (0…n)"
-            rows={formData.target_groups_multi}
-            setRows={(r) => updateFormField('target_groups_multi', r)}
-            options={targetGroups}
-            idKey="target_group_id"
-            emptyLabel="Keine Zielgruppe gewählt."
-          />
-
-          <div className="form-row">
-            <label className="form-label">Fähigkeiten (je Übung mehrere, mit Niveau)</label>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '10px' }}>
-              <select
-                className="form-input"
-                style={{ flex: '1 1 200px' }}
-                value={skillPick}
-                onChange={(e) => setSkillPick(e.target.value)}
-              >
-                <option value="">Fähigkeit wählen…</option>
-                {availableSkills.map((s) => (
-                  <option key={s.id} value={s.id}>
-                    {s.name} ({s.category})
-                  </option>
-                ))}
-              </select>
-              <button type="button" className="btn btn-secondary" onClick={addSkillRow}>
-                Hinzufügen
-              </button>
-            </div>
-            {formData.skills.map((row, idx) => {
-              const sk = skillsCatalog.find((s) => s.id === row.skill_id)
-              return (
-                <div key={`${row.skill_id}-${idx}`} className="skills-editor-row">
-                  <div>
-                    <strong style={{ fontSize: '14px' }}>{sk?.name || `Skill #${row.skill_id}`}</strong>
-                    {sk?.category && (
-                      <span style={{ color: 'var(--text2)', fontSize: '12px', marginLeft: '6px' }}>
-                        {sk.category}
-                      </span>
-                    )}
-                  </div>
-                  <label style={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px' }}>
-                    <input
-                      type="radio"
-                      name="skill-primary"
-                      checked={row.is_primary}
-                      onChange={() => setSkillPrimary(idx)}
-                    />
-                    primär
-                  </label>
-                  <select
-                    className="form-input"
-                    value={row.intensity || ''}
-                    onChange={(e) => updateSkillField(idx, 'intensity', e.target.value)}
-                  >
-                    {INTENSITY_OPTIONS.map((o) => (
-                      <option key={o.value || 'i'} value={o.value}>
-                        {o.label}
-                      </option>
-                    ))}
-                  </select>
-                  <select
-                    className="form-input"
-                    value={row.required_level || ''}
-                    onChange={(e) => updateSkillField(idx, 'required_level', e.target.value)}
-                  >
-                    {SKILL_LEVEL_OPTIONS.map((o) => (
-                      <option key={`r-${o.value}`} value={o.value}>
-                        von {o.label}
-                      </option>
-                    ))}
-                  </select>
-                  <select
-                    className="form-input"
-                    value={row.target_level || ''}
-                    onChange={(e) => updateSkillField(idx, 'target_level', e.target.value)}
-                  >
-                    {SKILL_LEVEL_OPTIONS.map((o) => (
-                      <option key={`t-${o.value}`} value={o.value}>
-                        bis {o.label}
-                      </option>
-                    ))}
-                  </select>
-                  <button type="button" className="btn" style={{ fontSize: '12px', padding: '4px 8px' }} onClick={() => removeSkillRow(idx)}>
-                    Entf.
-                  </button>
-                </div>
-              )
-            })}
-          </div>
-
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
-            <div className="form-row">
-              <label className="form-label">Sichtbarkeit</label>
-              <select
-                className="form-input"
-                value={formData.visibility}
-                onChange={(e) => updateFormField('visibility', e.target.value)}
-              >
-                <option value="private">Privat</option>
-                <option value="club">Verein</option>
-                {isSuperadmin ? <option value="official">Offiziell</option> : null}
-              </select>
-            </div>
-            <div className="form-row">
-              <label className="form-label">Status</label>
-              <select
-                className="form-input"
-                value={formData.status}
-                onChange={(e) => updateFormField('status', e.target.value)}
-              >
-                <option value="draft">Entwurf</option>
-                <option value="in_review">In Prüfung</option>
-                <option value="approved">Freigegeben</option>
-                <option value="archived">Archiviert</option>
-              </select>
-            </div>
-          </div>
-
-          {formData.visibility === 'club' && visibilityClubChoices.length > 0 ? (
-            <div className="form-row" style={{ marginTop: '10px' }}>
-              <label className="form-label">Verein (Sichtbarkeit)</label>
-              <select
-                className="form-input"
-                value={formData.club_id != null && formData.club_id !== '' ? String(formData.club_id) : ''}
-                onChange={(e) => {
-                  const v = e.target.value
-                  updateFormField('club_id', v === '' ? null : Number(v))
-                }}
-              >
-                {visibilityClubChoices.map((c) => (
-                  <option key={c.id} value={String(c.id)}>
-                    {(c.name || '').trim() || `Verein #${c.id}`}
-                  </option>
-                ))}
-              </select>
-              <p style={{ margin: '6px 0 0', fontSize: '12px', color: 'var(--text3)', lineHeight: 1.4 }}>
-                Standard ist der aktive Verein aus der Navigation. Bei Plattform-Admins sind alle Vereine wählbar.
-              </p>
-            </div>
-          ) : null}
-
-          <div style={{ marginTop: '16px' }}>
-            <button type="submit" className="btn btn-primary" disabled={saving}>
-              {saving ? 'Speichern…' : isEdit ? 'Speichern' : 'Anlegen & weiter'}
-            </button>
-          </div>
-        </form>
-      </div>
-
-      {isEdit && formData.exercise_kind !== 'combination' && (
-        <details ref={variantsDetailsRef} className="card exercise-variants-details" style={{ marginTop: '16px' }}>
-          <summary className="exercise-variants-summary">
-            <span className="exercise-variants-summary__title">Übungsvarianten</span>
-            <span className="exercise-variants-summary__badge">
-              {variants.length === 0
-                ? 'keine'
-                : `${variants.length} ${variants.length === 1 ? 'Variante' : 'Varianten'}`}
-            </span>
-          </summary>
-          <div className="exercise-variants-details__body">
-            <p className="exercise-variants-hint">
-              Pro Durchgang nur eine Variante bearbeiten – weniger Scrollen. Reihenfolge entspricht Planung und Auswahl im
-              Training; „Voraussetzung“ nutzt ihr später für Progressions-Serien.
-            </p>
-
-            {variants.length > 0 && (
-              <div className="form-row">
-                <label className="form-label" htmlFor="variant-edit-select">
-                  Variante auswählen
-                </label>
-                <select
-                  id="variant-edit-select"
-                  className="form-input"
-                  value={
-                    variantEditSelection === 'new'
-                      ? 'new'
-                      : variantEditSelection == null
-                        ? ''
-                        : String(variantEditSelection)
-                  }
-                  onChange={(e) => {
-                    const val = e.target.value
-                    if (val === '') setVariantEditSelection(null)
-                    else if (val === 'new') setVariantEditSelection('new')
-                    else setVariantEditSelection(parseInt(val, 10))
-                  }}
-                >
-                  <option value="">— nicht bearbeiten —</option>
-                  {variants.map((v) => (
-                    <option key={v.id} value={v.id}>
-                      {(v.variant_name && String(v.variant_name).trim()) || `Variante #${v.id}`}
-                    </option>
-                  ))}
-                  <option value="new">+ Neue Variante anlegen…</option>
-                </select>
-              </div>
-            )}
-
-            {variants.length === 0 && (
-              <p style={{ fontSize: '13px', color: 'var(--text3)', marginBottom: '10px' }}>
-                Noch keine Varianten – optional für andere Ausführung, Dauer oder Material in Planung und Training.
-              </p>
-            )}
-
-            {variants.length === 0 && variantEditSelection !== 'new' && (
-              <button type="button" className="btn btn-secondary" onClick={() => setVariantEditSelection('new')}>
-                Erste Variante anlegen
-              </button>
-            )}
-
-            {variantEditSelection === 'new' && (
-              <form
-                className="exercise-variant-single-form"
-                onSubmit={createVariantSubmit}
-                style={{ marginTop: '14px', paddingTop: '14px', borderTop: '1px solid var(--border)' }}
-              >
-                <h3 style={{ marginTop: 0, fontSize: '1rem' }}>Neue Variante</h3>
-                <ExerciseVariantFields
-                  row={variantDraft}
-                  onPatch={(patch) => {
-                    setFormDirty(true)
-                    setVariantDraft((d) => ({ ...d, ...patch }))
-                  }}
-                  prerequisiteOthers={variants}
-                  rteMinHeight="110px"
-                  inlineExerciseId={isEdit ? exerciseId : null}
-                  linkedExerciseMedia={isEdit ? mediaList : []}
-                  onExerciseMediaListChanged={refreshMedia}
-                />
-                <button type="submit" className="btn btn-primary" style={{ marginTop: '10px' }} disabled={variantBusy}>
-                  {variantBusy ? 'Anlegen…' : 'Variante anlegen'}
-                </button>
-              </form>
-            )}
-
-            {selectedVariantForEdit && (
-              <div
-                className="exercise-variant-single-form"
-                style={{ marginTop: '14px', paddingTop: '14px', borderTop: '1px solid var(--border)' }}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: '8px',
-                    alignItems: 'center',
-                    marginBottom: '12px',
-                  }}
-                >
-                  <span style={{ fontSize: '12px', color: 'var(--text3)' }}>
-                    Pos. {selectedVariantIdx + 1} von {variants.length}
-                  </span>
-                  <button
-                    type="button"
-                    className="btn btn-secondary"
-                    style={{ fontSize: '11px', padding: '4px 8px' }}
-                    disabled={variantBusy || selectedVariantIdx <= 0}
-                    onClick={() => moveVariantRow(selectedVariantIdx, -1)}
-                  >
-                    Nach oben
-                  </button>
-                  <button
-                    type="button"
-                    className="btn btn-secondary"
-                    style={{ fontSize: '11px', padding: '4px 8px' }}
-                    disabled={variantBusy || selectedVariantIdx >= variants.length - 1}
-                    onClick={() => moveVariantRow(selectedVariantIdx, 1)}
-                  >
-                    Nach unten
-                  </button>
-                  <button
-                    type="button"
-                    className="btn btn-primary"
-                    style={{ marginLeft: 'auto', fontSize: '12px' }}
-                    disabled={variantSavingId === selectedVariantForEdit.id || variantBusy}
-                    onClick={() => saveVariantRow(selectedVariantForEdit)}
-                  >
-                    {variantSavingId === selectedVariantForEdit.id ? 'Speichern…' : 'Speichern'}
-                  </button>
-                  <button
-                    type="button"
-                    className="btn"
-                    style={{ fontSize: '12px', background: 'var(--danger)', color: '#fff', border: 'none' }}
-                    disabled={variantBusy}
-                    onClick={() => deleteVariantRow(selectedVariantForEdit.id)}
-                  >
-                    Löschen
-                  </button>
-                </div>
-                <ExerciseVariantFields
-                  row={selectedVariantForEdit}
-                  onPatch={(patch) => updateVariantField(selectedVariantForEdit.id, patch)}
-                  prerequisiteOthers={variants.filter((o) => o.id !== selectedVariantForEdit.id)}
-                  rteMinHeight="110px"
-                  inlineExerciseId={isEdit ? exerciseId : null}
-                  linkedExerciseMedia={isEdit ? mediaList : []}
-                  onExerciseMediaListChanged={refreshMedia}
-                />
-              </div>
-            )}
-
-            {variants.length > 0 && variantEditSelection == null && (
-              <p style={{ fontSize: '13px', color: 'var(--text3)', marginTop: '12px', marginBottom: 0 }}>
-                Wähle eine Variante zum Bearbeiten oder „Neue Variante anlegen…“.
-              </p>
-            )}
-          </div>
-        </details>
-      )}
-
-      {isEdit && formData.exercise_kind !== 'combination' && (
-        <details className="card exercise-variants-details" style={{ marginTop: '16px' }}>
-          <summary className="exercise-variants-summary">
-            <span className="exercise-variants-summary__title">Progressionsgraph</span>
-            <span className="exercise-variants-summary__badge">Übung → Übung</span>
-          </summary>
-          <div className="exercise-variants-details__body">
-            <ExerciseProgressionGraphPanel anchorExerciseId={exerciseId} anchorTitle={formData.title} />
-          </div>
-        </details>
-      )}
-
-      {isEdit && (
-        <div className="card" style={{ marginTop: '16px' }}>
-          <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Medien</h2>
-          <p style={{ color: 'var(--text2)', fontSize: '13px', marginBottom: '6px' }}>
-            Neue Uploads oder Embeds über die Textfeld-Symbolleiste („Medien im Text“ / „Embed im Text“). Hier
-            verwaltest du Verknüpfungen — Kachel in ein Textfeld ziehen, um sie an der Cursorposition einzufügen
-            (mittlere Darstellung).
-          </p>
-          <p style={{ color: 'var(--text3)', fontSize: '12px', marginTop: 0 }}>
-            Max. 10 Medien pro Übung.
-          </p>
-          <div
-            style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: '8px',
-              alignItems: 'center',
-              marginTop: '10px',
-            }}
-          >
-            <button type="button" className="btn btn-secondary" onClick={() => setArchiveOpen(true)}>
-              Aus Archiv verknüpfen…
-            </button>
-            <Link to="/media" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
-              Medienbibliothek
-            </Link>
-          </div>
-          {mediaList.length > 0 && (
-            <ul className="exercise-edit-media-strip">
-              {mediaList.map((m, idx) => {
-                const cap =
-                  (m.title || '').trim() ||
-                  (m.original_filename || '').trim() ||
-                  (m.embed_url ? String(m.embed_url).replace(/^https?:\/\//i, '').slice(0, 80) : '')
-                const sub = [m.media_type, m.embed_platform].filter(Boolean).join(' · ') || 'Medium'
-                const payloadCaption = (
-                  [m.title, m.original_filename].find((x) => typeof x === 'string' && x.trim()) || ''
-                ).trim()
-                return (
-                  <li key={m.id} className="exercise-edit-media-strip__item">
-                    <div className="exercise-edit-media-strip__lead">
-                      {!m.embed_url ? (
-                        <ExerciseMediaThumbTile exerciseId={exerciseId} media={m} onOpenPreview={setMediaPreview} size={76} />
-                      ) : (
-                        <div
-                          className="exercise-edit-media-strip__embed-badge exercise-edit-media-strip__embed-badge--solo"
-                          aria-hidden
-                        >
-                          {m.embed_platform || 'Embed'}
-                        </div>
-                      )}
-                      <div
-                        className="exercise-edit-media-strip__handle"
-                        title="Mit Drag und Drop in ein Textfeld ziehen"
-                        draggable
-                        onDragStart={(e) => {
-                          try {
-                            e.dataTransfer.setData(
-                              SHINKAN_EXERCISE_MEDIA_DRAG_MIME,
-                              buildExerciseMediaDragPayload(m.id, payloadCaption),
-                            )
-                            e.dataTransfer.effectAllowed = 'copy'
-                          } catch (_) {
-                            /* ignore */
-                          }
-                        }}
-                      >
-                        ⣿<span className="exercise-edit-media-strip__handle-text"> Ziehen</span>
-                      </div>
-                    </div>
-                    <div className="exercise-edit-media-strip__body">
-                      <div className="exercise-edit-media-strip__headline">
-                        <span style={{ fontSize: '12px', color: 'var(--text3)' }}>
-                          #{m.id} · {sub}
-                        </span>
-                      </div>
-                      <div style={{ fontSize: '13px', color: 'var(--text2)', lineHeight: 1.35 }}>{cap || '—'}</div>
-                      <div className="exercise-edit-media-strip__toolbar">
-                        <input
-                          type="text"
-                          className="form-input exercise-edit-media-strip__title"
-                          placeholder="Titel (wird in der Vorschau und im Platzhalter genutzt)"
-                          value={(mediaFields[m.id] || {}).title ?? ''}
-                          onChange={(e) =>
-                            setMediaFields((prev) => ({
-                              ...prev,
-                              [m.id]: {
-                                title: e.target.value,
-                              },
-                            }))
-                          }
-                        />
-                      </div>
-                      <div className="exercise-edit-media-strip__actions">
-                        {mediaList.length > 1 && (
-                          <>
-                            <button
-                              type="button"
-                              className="btn btn-secondary"
-                              style={{ fontSize: '11px', padding: '4px 8px' }}
-                              disabled={idx === 0}
-                              onClick={() => moveMediaRow(idx, -1)}
-                              title="Nach oben"
-                            >
-                              ↑
-                            </button>
-                            <button
-                              type="button"
-                              className="btn btn-secondary"
-                              style={{ fontSize: '11px', padding: '4px 8px' }}
-                              disabled={idx >= mediaList.length - 1}
-                              onClick={() => moveMediaRow(idx, 1)}
-                              title="Nach unten"
-                            >
-                              ↓
-                            </button>
-                          </>
-                        )}
-                        <button
-                          type="button"
-                          className="btn btn-primary"
-                          style={{ fontSize: '12px', padding: '4px 10px' }}
-                          disabled={mediaSavingId === m.id}
-                          onClick={() => saveMediaMeta(m.id)}
-                        >
-                          {mediaSavingId === m.id ? '…' : 'Speichern'}
-                        </button>
-                        <button
-                          type="button"
-                          className="btn btn-secondary"
-                          style={{ fontSize: '12px', padding: '4px 10px' }}
-                          onClick={() => handleDeleteMedia(m.id)}
-                        >
-                          Entfernen
-                        </button>
-                      </div>
-                    </div>
-                  </li>
-                )
-              })}
-            </ul>
-          )}
-          <p style={{ color: 'var(--text3)', fontSize: '12px', marginTop: mediaList.length ? '12px' : 0 }}>
-            Verknüpfungen bleiben nötig (u. a. Zugriff, Orphan-Hinweise): Im Fließtext verweist du gezielt über
-            Platzhalter. Ohne Verknüpfung gäbe es keine exercise_media-ID zum Einbetten.
-          </p>
-          {archiveOpen && (
-            <div
-              role="dialog"
-              aria-modal="true"
-              aria-label="Medienarchiv"
-              style={{
-                position: 'fixed',
-                inset: 0,
-                background: 'rgba(0,0,0,0.5)',
-                zIndex: 1000,
-                overflow: 'auto',
-                padding: '16px',
-              }}
-              onClick={() => setArchiveOpen(false)}
-              onKeyDown={(e) => e.key === 'Escape' && setArchiveOpen(false)}
-            >
-              <div
-                className="card"
-                style={{
-                  maxWidth: 560,
-                  margin: '4vh auto',
-                  maxHeight: '88vh',
-                  overflow: 'auto',
-                  position: 'relative',
-                }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <h3 style={{ marginTop: 0, fontSize: '1.05rem' }}>Medienarchiv</h3>
-                <input
-                  type="search"
-                  className="form-input"
-                  placeholder="Suche Dateiname…"
-                  value={archiveQ}
-                  onChange={(e) => setArchiveQ(e.target.value)}
-                  style={{ marginBottom: '8px' }}
-                />
-                {archiveLoading && <p style={{ fontSize: '13px', color: 'var(--text3)' }}>Laden…</p>}
-                {archiveError && <p style={{ fontSize: '13px', color: 'var(--danger)' }}>{archiveError}</p>}
-                {!archiveLoading && !archiveError && archiveItems.length === 0 && (
-                  <p style={{ fontSize: '13px', color: 'var(--text3)' }}>Keine Treffer.</p>
-                )}
-                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-                  {archiveItems.map((a) => {
-                    const already = linkedArchiveAssetIds.has(a.id)
-                    return (
-                    <li
-                      key={a.id}
-                      style={{
-                        display: 'flex',
-                        gap: '10px',
-                        alignItems: 'center',
-                        padding: '8px 0',
-                        borderBottom: '1px solid var(--border)',
-                      }}
-                    >
-                      <div
-                        style={{
-                          width: 56,
-                          height: 56,
-                          flexShrink: 0,
-                          borderRadius: '6px',
-                          overflow: 'hidden',
-                          background: 'var(--surface2, rgba(127,127,127,0.12))',
-                          border: '1px solid var(--border)',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        {a.mime_type?.startsWith('image/') ? (
-                          <img
-                            alt=""
-                            src={resolveMediaAssetFileUrl(a.id)}
-                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                          />
-                        ) : a.mime_type?.startsWith('video/') ? (
-                          <span style={{ fontSize: '18px', opacity: 0.75 }} aria-hidden>
-                            ▶
-                          </span>
-                        ) : (
-                          <span style={{ fontSize: '10px', color: 'var(--text2)', padding: '2px', textAlign: 'center' }}>
-                            PDF
-                          </span>
-                        )}
-                      </div>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ fontSize: '13px', fontWeight: 600, wordBreak: 'break-word' }}>
-                          {a.original_filename || `Asset #${a.id}`}
-                        </div>
-                        <div style={{ fontSize: '11px', color: 'var(--text3)', marginTop: '2px' }}>
-                          {a.visibility} · {a.mime_type || '—'}{' '}
-                          {a.byte_size != null ? `· ${(a.byte_size / 1024).toFixed(0)} KB` : ''}
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        className="btn btn-primary"
-                        style={{ fontSize: '12px' }}
-                        disabled={already}
-                        title={already ? 'Schon mit dieser Übung verknüpft' : ''}
-                        onClick={() => !already && attachFromArchive(a.id)}
-                      >
-                        {already ? 'Bereits verknüpft' : 'Verknüpfen'}
-                      </button>
-                    </li>
-                    )
-                  })}
-                </ul>
-                <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
-                  <button type="button" className="btn btn-secondary" onClick={() => setArchiveOpen(false)}>
-                    Schließen
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-          {mediaPreview && (
-            <MediaPreviewModal
-              title={(mediaPreview.title || '').trim() || mediaPreview.original_filename || `Medium #${mediaPreview.id}`}
-              media={mediaPreview}
-              fileUrl={mediaPreview.embed_url ? null : resolveExerciseMediaFileUrl(exerciseId, mediaPreview)}
-              onClose={() => setMediaPreview(null)}
-              onReport={
-                !mediaPreview.asset_legal_hold_active
-                  ? () => {
-                      setReportTarget(mediaPreview)
-                      setMediaPreview(null)
-                    }
-                  : null
-              }
-            />
-          )}
-          {reportTarget && (
-            <ReportContentModal
-              targetType="media_asset"
-              targetId={reportTarget.media_asset_id || reportTarget.id}
-              targetLabel={reportTarget.title || reportTarget.original_filename || `Medium #${reportTarget.id}`}
-              onClose={() => setReportTarget(null)}
-            />
-          )}
-        </div>
-      )}
-
-      <ExercisePickerModal
-        open={comboStationPickerIx !== null}
-        onClose={() => setComboStationPickerIx(null)}
-        exerciseKindAny={['simple']}
-        multiSelect
-        enableQuickCreateDraft
-        onSelectExercises={(picked) => {
-          if (comboStationPickerIx === null) return
-          mergePickedExercisesIntoSlot(comboStationPickerIx, picked)
-          setComboStationPickerIx(null)
-        }}
-      />
-
-      <p style={{ fontSize: '12px', color: 'var(--text3)', marginTop: '16px' }}>
-        <strong>KI-Ausbaustufe:</strong> Backend laut Spec{' '}
-        <code style={{ fontSize: '11px' }}>POST /api/exercises/ai/suggest</code> und{' '}
-        <code style={{ fontSize: '11px' }}>POST /api/exercises/{'{id}'}/ai/regenerate</code> — z. B.{' '}
-        <code>OPENROUTER_API_KEY</code>, Vorschläge nur nach Trainer-Bestätigung übernehmen (siehe{' '}
-        <code>api.suggestExerciseAi</code>).
-      </p>
-      <UnsavedChangesPrompt
-        blocker={blocker}
-        isBusy={saving}
-        onSave={handleUnsavedDialogSave}
-        onDiscardWithoutSave={() => setFormDirty(false)}
-      />
-    </div>
-  )
-}
-
-export default ExerciseFormPage
+/** Routen-Einstieg: Implementierung in `components/exercises/ExerciseFormPageRoot.jsx` (Phase-3 Soft-Limit). */
+export { default } from '../components/exercises/ExerciseFormPageRoot'
diff --git a/frontend/src/pages/ExercisesListPage.jsx b/frontend/src/pages/ExercisesListPage.jsx
index 5e2473b..5e5c9ee 100644
--- a/frontend/src/pages/ExercisesListPage.jsx
+++ b/frontend/src/pages/ExercisesListPage.jsx
@@ -1,599 +1,2 @@
-import React, { useState, useEffect, useMemo, useCallback, useRef, lazy, Suspense } from 'react'
-import { Link } from 'react-router-dom'
-import api from '../utils/api'
-import { useAuth } from '../context/AuthContext'
-import { activeClubMemberships, getTenantClubDependencyKey } from '../utils/activeClub'
-import PageSectionNav from '../components/PageSectionNav'
-import ExerciseListCard from '../components/exercises/ExerciseListCard'
-import ExerciseListFilterModal from '../components/exercises/ExerciseListFilterModal'
-import ExerciseListBulkModal from '../components/exercises/ExerciseListBulkModal'
-import ExerciseListSearchBar from '../components/exercises/ExerciseListSearchBar'
-import { buildExerciseListFilterChips } from '../utils/exerciseListFilterChips'
-import { applyDashboardExerciseListUrl, buildExerciseListQueryBase } from '../utils/exerciseListQuery'
-import { useExerciseListCatalogsAndQuery } from '../hooks/useExerciseListCatalogsAndQuery'
-import {
-  INITIAL_EXERCISE_LIST_FILTERS,
-  mergeExerciseListPrefsFromApi,
-  compactExerciseListPrefsPayload,
-} from '../constants/exerciseListFilters'
-
-const ExerciseProgressionGraphPanel = lazy(() => import('../components/ExerciseProgressionGraphPanel'))
-
-const BULK_MAX_IDS = 500
-const EXERCISES_PAGE_TABS = [
-  { id: 'list', label: 'Liste' },
-  { id: 'progression', label: 'Progressionsgraphen' },
-]
-
-function ExercisesListPage() {
-  const { user, checkAuth } = useAuth()
-  const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
-  const isSuperadmin = user?.role === 'superadmin'
-  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
-
-  const [mineOnly, setMineOnly] = useState(() => {
-    try {
-      const sp = new URLSearchParams(window.location.search)
-      return sp.get('mine') === '1' || sp.get('created_by_me') === '1'
-    } catch {
-      return false
-    }
-  })
-
-  const [searchInput, setSearchInput] = useState('')
-  const [aiSearchInput, setAiSearchInput] = useState('')
-  const [debouncedSearch, setDebouncedSearch] = useState('')
-  const [debouncedAiSearch, setDebouncedAiSearch] = useState('')
-  const [filters, setFilters] = useState(() => ({ ...INITIAL_EXERCISE_LIST_FILTERS }))
-  const [filterModalOpen, setFilterModalOpen] = useState(false)
-  const [savingExercisePrefs, setSavingExercisePrefs] = useState(false)
-  const [pageTab, setPageTab] = useState('list')
-  const prefsAppliedRef = useRef(false)
-
-  const [selectedIds, setSelectedIds] = useState(() => new Set())
-  const [bulkModalOpen, setBulkModalOpen] = useState(false)
-  const [bulkVisibility, setBulkVisibility] = useState('')
-  const [bulkStatus, setBulkStatus] = useState('')
-  const [bulkClubSelect, setBulkClubSelect] = useState('')
-  const [bulkClubManual, setBulkClubManual] = useState('')
-  const [bulkSubmitting, setBulkSubmitting] = useState(false)
-  const [bulkPatchFocusAreas, setBulkPatchFocusAreas] = useState(false)
-  const [bulkFocusAreaIds, setBulkFocusAreaIds] = useState([])
-  const [bulkPatchStyleDirections, setBulkPatchStyleDirections] = useState(false)
-  const [bulkStyleDirectionIds, setBulkStyleDirectionIds] = useState([])
-  const [bulkPatchTrainingTypes, setBulkPatchTrainingTypes] = useState(false)
-  const [bulkTrainingTypeIds, setBulkTrainingTypeIds] = useState([])
-  const [bulkPatchTargetGroups, setBulkPatchTargetGroups] = useState(false)
-  const [bulkTargetGroupIds, setBulkTargetGroupIds] = useState([])
-
-  useEffect(() => {
-    if (!user?.id) return
-    if (prefsAppliedRef.current) return
-    const merged = mergeExerciseListPrefsFromApi(user.exercise_list_prefs)
-    setFilters(applyDashboardExerciseListUrl(merged))
-    try {
-      const sp = new URLSearchParams(window.location.search)
-      if (sp.get('mine') === '1' || sp.get('created_by_me') === '1') setMineOnly(true)
-    } catch {
-      /* ignore */
-    }
-    prefsAppliedRef.current = true
-  }, [user?.id, user?.exercise_list_prefs])
-
-  useEffect(() => {
-    if (!user?.id) prefsAppliedRef.current = false
-  }, [user?.id])
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedSearch(searchInput.trim()), 400)
-    return () => clearTimeout(t)
-  }, [searchInput])
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedAiSearch(aiSearchInput.trim()), 400)
-    return () => clearTimeout(t)
-  }, [aiSearchInput])
-
-  useEffect(() => {
-    if (!filterModalOpen) return
-    const onKey = (e) => {
-      if (e.key === 'Escape') setFilterModalOpen(false)
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [filterModalOpen])
-
-  const queryBase = useMemo(
-    () => buildExerciseListQueryBase(filters, debouncedSearch, debouncedAiSearch, mineOnly),
-    [filters, debouncedSearch, debouncedAiSearch, mineOnly]
-  )
-
-  const {
-    catalogs,
-    catalogsReady,
-    exercises,
-    setExercises,
-    listFetching,
-    loadingMore,
-    hasMore,
-    loadMore,
-  } = useExerciseListCatalogsAndQuery({ queryBase, pageTab, tenantClubDepKey })
-
-  useEffect(() => {
-    setSelectedIds(new Set())
-  }, [queryBase])
-
-  const focusOptions = useMemo(
-    () =>
-      catalogs.focusAreas.map((fa) => ({
-        id: fa.id,
-        label: `${fa.icon || ''} ${fa.name || ''}`.trim(),
-      })),
-    [catalogs.focusAreas]
-  )
-  const styleOptions = useMemo(
-    () => catalogs.styleDirections.map((s) => ({ id: s.id, label: s.name || String(s.id) })),
-    [catalogs.styleDirections]
-  )
-  const trainingTypeOptions = useMemo(
-    () => catalogs.trainingTypes.map((t) => ({ id: t.id, label: t.name || String(t.id) })),
-    [catalogs.trainingTypes]
-  )
-  const targetGroupOptions = useMemo(
-    () => catalogs.targetGroups.map((g) => ({ id: g.id, label: g.name || String(g.id) })),
-    [catalogs.targetGroups]
-  )
-  const skillOptions = useMemo(
-    () => catalogs.skills.map((s) => ({ id: s.id, label: s.name || String(s.id) })),
-    [catalogs.skills]
-  )
-  const visibilityOptions = useMemo(
-    () => [
-      { id: 'private', label: 'Privat' },
-      { id: 'club', label: 'Verein' },
-      { id: 'official', label: 'Offiziell' },
-    ],
-    []
-  )
-  const statusOptions = useMemo(
-    () => [
-      { id: 'draft', label: 'Entwurf' },
-      { id: 'in_review', label: 'In Prüfung' },
-      { id: 'approved', label: 'Freigegeben' },
-      { id: 'archived', label: 'Archiviert' },
-    ],
-    []
-  )
-
-  const filterChips = useMemo(
-    () =>
-      buildExerciseListFilterChips({
-        mineOnly,
-        setMineOnly,
-        filters,
-        setFilters,
-        focusOptions,
-        styleOptions,
-        trainingTypeOptions,
-        targetGroupOptions,
-        skillOptions,
-        visibilityOptions,
-        statusOptions,
-      }),
-    [
-      mineOnly,
-      filters,
-      focusOptions,
-      styleOptions,
-      trainingTypeOptions,
-      targetGroupOptions,
-      skillOptions,
-      visibilityOptions,
-      statusOptions,
-    ]
-  )
-
-  /** Für Browser-/datalist-Vorschläge (aktuelle Treffer-Titel, begrenzt) */
-  const searchTitleSuggestions = useMemo(() => {
-    const titles = exercises.map((e) => (e.title || '').trim()).filter(Boolean)
-    return [...new Set(titles)].slice(0, 80)
-  }, [exercises])
-
-  const clubNameById = useMemo(() => {
-    const m = {}
-    for (const c of activeClubMemberships(user?.clubs)) {
-      if (c?.id != null) m[Number(c.id)] = c.name || `#${c.id}`
-    }
-    return m
-  }, [user?.clubs])
-
-  const effectiveClubId =
-    user?.effective_club_id != null && user.effective_club_id !== ''
-      ? Number(user.effective_club_id)
-      : user?.active_club_id != null && user.active_club_id !== ''
-        ? Number(user.active_club_id)
-        : null
-
-  const toggleSelect = useCallback((id) => {
-    setSelectedIds((prev) => {
-      const n = new Set(prev)
-      const nid = Number(id)
-      if (Number.isNaN(nid)) return prev
-      if (n.has(nid)) n.delete(nid)
-      else n.add(nid)
-      return n
-    })
-  }, [])
-
-  const clearSelection = useCallback(() => setSelectedIds(new Set()), [])
-
-  const toggleSelectAllPage = useCallback(() => {
-    setSelectedIds((prev) => {
-      const n = new Set(prev)
-      const allSel =
-        exercises.length > 0 && exercises.every((e) => n.has(Number(e.id)))
-      if (allSel) {
-        exercises.forEach((e) => n.delete(Number(e.id)))
-      } else {
-        exercises.forEach((e) => n.add(Number(e.id)))
-      }
-      return n
-    })
-  }, [exercises])
-
-  const allOnPageSelected = useMemo(
-    () => exercises.length > 0 && exercises.every((e) => selectedIds.has(Number(e.id))),
-    [exercises, selectedIds]
-  )
-
-  const bulkVisibilityOptions = useMemo(() => {
-    const base = [
-      { id: '', label: '— nicht ändern —' },
-      { id: 'private', label: 'Privat' },
-      { id: 'club', label: 'Verein' },
-    ]
-    if (isSuperadmin) base.push({ id: 'official', label: 'Offiziell (global)' })
-    return base
-  }, [isSuperadmin])
-
-  const handleDelete = async (exercise) => {
-    if (!confirm(`Übung "${exercise.title}" wirklich löschen?`)) return
-    try {
-      await api.deleteExercise(exercise.id)
-      setExercises((prev) => prev.filter((e) => e.id !== exercise.id))
-    } catch (err) {
-      alert('Fehler beim Löschen: ' + err.message)
-    }
-  }
-
-  const resetAllFilters = useCallback(() => {
-    setMineOnly(false)
-    setFilters({ ...INITIAL_EXERCISE_LIST_FILTERS })
-  }, [])
-
-  const handleSaveExerciseFilterPrefs = useCallback(async () => {
-    const uid = user?.id
-    if (!uid) {
-      alert('Nicht angemeldet.')
-      return
-    }
-    setSavingExercisePrefs(true)
-    try {
-      const payload = compactExerciseListPrefsPayload(filters)
-      await api.updateProfile(uid, { exercise_list_prefs: payload })
-      await checkAuth()
-      alert('Standardfilter für die Übungsliste gespeichert.')
-    } catch (e) {
-      alert('Speichern fehlgeschlagen: ' + (e.message || String(e)))
-    } finally {
-      setSavingExercisePrefs(false)
-    }
-  }, [user?.id, filters, checkAuth])
-
-  const openBulkModal = () => {
-    setBulkVisibility('')
-    setBulkStatus('')
-    setBulkClubSelect('')
-    setBulkClubManual('')
-    setBulkPatchFocusAreas(false)
-    setBulkFocusAreaIds([])
-    setBulkPatchStyleDirections(false)
-    setBulkStyleDirectionIds([])
-    setBulkPatchTrainingTypes(false)
-    setBulkTrainingTypeIds([])
-    setBulkPatchTargetGroups(false)
-    setBulkTargetGroupIds([])
-    setBulkModalOpen(true)
-  }
-
-  const handleBulkSubmit = async () => {
-    const anyRelationPatch =
-      bulkPatchFocusAreas ||
-      bulkPatchStyleDirections ||
-      bulkPatchTrainingTypes ||
-      bulkPatchTargetGroups
-    if (!bulkVisibility && !bulkStatus && !anyRelationPatch) {
-      alert(
-        'Bitte mindestens eine Änderung wählen (Sichtbarkeit, Status oder eine der Zuordnungen mit gesetztem Häkchen „ersetzen“).'
-      )
-      return
-    }
-    const ids = Array.from(selectedIds).filter((x) => Number.isFinite(x) && x > 0)
-    if (ids.length === 0) {
-      alert('Keine Übungen ausgewählt.')
-      return
-    }
-    if (ids.length > BULK_MAX_IDS) {
-      alert(`Maximal ${BULK_MAX_IDS} Übungen pro Vorgang. Bitte Auswahl oder mehrere Durchläufe verwenden.`)
-      return
-    }
-    const payload = { exercise_ids: ids }
-    if (bulkVisibility) payload.visibility = bulkVisibility
-    if (bulkStatus) payload.status = bulkStatus
-    if (bulkPatchFocusAreas) {
-      payload.focus_area_ids = bulkFocusAreaIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
-    }
-    if (bulkPatchStyleDirections) {
-      payload.style_direction_ids = bulkStyleDirectionIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
-    }
-    if (bulkPatchTrainingTypes) {
-      payload.training_type_ids = bulkTrainingTypeIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
-    }
-    if (bulkPatchTargetGroups) {
-      payload.target_group_ids = bulkTargetGroupIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
-    }
-    if (bulkVisibility === 'club') {
-      const manual = String(bulkClubManual || '').trim()
-      if (manual && /^\d+$/.test(manual)) payload.club_id = Number(manual)
-      else if (bulkClubSelect && /^\d+$/.test(String(bulkClubSelect))) {
-        payload.club_id = Number(bulkClubSelect)
-      }
-    }
-    setBulkSubmitting(true)
-    try {
-      const res = await api.bulkPatchExercisesMetadata(payload)
-      const updatedSet = new Set((res.updated || []).map((x) => Number(x)))
-      let resolvedClubId = null
-      if (bulkVisibility === 'club') {
-        if (payload.club_id != null) resolvedClubId = payload.club_id
-        else if (effectiveClubId != null && !Number.isNaN(effectiveClubId)) resolvedClubId = effectiveClubId
-      }
-      const clubLabel =
-        resolvedClubId != null ? clubNameById[resolvedClubId] || `Verein #${resolvedClubId}` : null
-
-      let nextPrimaryFocusName = null
-      if (bulkPatchFocusAreas) {
-        const faNums = bulkFocusAreaIds.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0)
-        if (faNums.length > 0) {
-          const opt = focusOptions.find((o) => Number(o.id) === Number(faNums[0]))
-          nextPrimaryFocusName = String(opt?.label ?? '').trim() || String(faNums[0])
-        }
-      }
-
-      setExercises((prev) =>
-        prev.map((e) => {
-          if (!updatedSet.has(Number(e.id))) return e
-          const next = { ...e }
-          if (bulkVisibility) {
-            next.visibility = bulkVisibility
-            next.club_id = bulkVisibility === 'club' ? resolvedClubId : null
-            next.club_name = bulkVisibility === 'club' ? clubLabel : null
-          }
-          if (bulkStatus) next.status = bulkStatus
-          if (bulkPatchFocusAreas) {
-            if (nextPrimaryFocusName == null) delete next.focus_area
-            else next.focus_area = nextPrimaryFocusName
-          }
-          return next
-        })
-      )
-
-      let msg = `${res.updated_count ?? updatedSet.size} Übung(en) aktualisiert.`
-      if (res.failed_count) msg += `\n${res.failed_count} nicht geändert (siehe Details).`
-      if (Array.isArray(res.failed) && res.failed.length) {
-        msg +=
-          '\n\n' +
-          res.failed
-            .slice(0, 12)
-            .map((f) => `#${f.id}: ${f.detail}`)
-            .join('\n')
-        if (res.failed.length > 12) msg += '\n…'
-      }
-      alert(msg)
-      setBulkModalOpen(false)
-      clearSelection()
-    } catch (err) {
-      alert('Massenänderung fehlgeschlagen: ' + (err.message || String(err)))
-    } finally {
-      setBulkSubmitting(false)
-    }
-  }
-
-  if (!catalogsReady && pageTab === 'list') {
-    return (
-      <div className="app-page">
-        <div className="empty-state" style={{ padding: '2.5rem 1rem' }}>
-          <div className="spinner" />
-          <p className="muted" style={{ marginTop: '12px' }}>
-            Lade Kataloge…
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="app-page">
-      <div className="exercises-page__header">
-        <h1 className="page-title exercises-page__title">Übungen</h1>
-        {pageTab === 'list' ? (
-          <Link to="/exercises/new" className="btn btn-primary">
-            + Neu
-          </Link>
-        ) : (
-          <span aria-hidden="true" />
-        )}
-      </div>
-
-      <PageSectionNav
-        ariaLabel="Übungen Bereiche"
-        value={pageTab}
-        onChange={setPageTab}
-        items={EXERCISES_PAGE_TABS}
-        className="exercises-page-toolbar-tabs"
-      />
-
-      {pageTab === 'progression' ? (
-        <Suspense
-          fallback={
-            <div className="card empty-state" style={{ padding: '2rem 1rem' }}>
-              <div className="spinner" />
-              <p className="muted" style={{ marginTop: '12px' }}>
-                Lade Progressionsgraphen…
-              </p>
-            </div>
-          }
-        >
-          <ExerciseProgressionGraphPanel />
-        </Suspense>
-      ) : (
-        <>
-      <ExerciseListSearchBar
-        searchTitleSuggestions={searchTitleSuggestions}
-        searchInput={searchInput}
-        onSearchInputChange={setSearchInput}
-        aiSearchInput={aiSearchInput}
-        onAiSearchInputChange={setAiSearchInput}
-        mineOnly={mineOnly}
-        onToggleMineOnly={() => setMineOnly((v) => !v)}
-        onOpenFilter={() => setFilterModalOpen(true)}
-        filterChips={filterChips}
-        onResetAllFilters={resetAllFilters}
-        exerciseCount={exercises.length}
-        allOnPageSelected={allOnPageSelected}
-        onToggleSelectAllPage={toggleSelectAllPage}
-      />
-
-      {selectedIds.size > 0 ? (
-        <div className="card exercise-bulk-toolbar">
-          <strong>{selectedIds.size} ausgewählt</strong>
-          <button type="button" className="btn btn-secondary btn-small" onClick={clearSelection}>
-            Auswahl aufheben
-          </button>
-          <button type="button" className="btn btn-primary btn-small" onClick={openBulkModal}>
-            Massenänderung…
-          </button>
-          <span className="exercise-bulk-toolbar__meta">
-            Bis zu {BULK_MAX_IDS} pro Anfrage. Für „Verein“ ohne Auswahl: aktiver Vereinskontext (
-            <code>X-Active-Club-Id</code>
-            ).
-          </span>
-        </div>
-      ) : null}
-
-      <ExerciseListFilterModal
-        open={filterModalOpen}
-        onClose={() => setFilterModalOpen(false)}
-        filters={filters}
-        setFilters={setFilters}
-        focusOptions={focusOptions}
-        styleOptions={styleOptions}
-        trainingTypeOptions={trainingTypeOptions}
-        targetGroupOptions={targetGroupOptions}
-        skillOptions={skillOptions}
-        visibilityOptions={visibilityOptions}
-        statusOptions={statusOptions}
-        savingExercisePrefs={savingExercisePrefs}
-        onSaveStandard={handleSaveExerciseFilterPrefs}
-        onResetAll={resetAllFilters}
-      />
-
-      <ExerciseListBulkModal
-        open={bulkModalOpen}
-        onClose={() => setBulkModalOpen(false)}
-        onSubmit={handleBulkSubmit}
-        bulkSubmitting={bulkSubmitting}
-        selectedCount={selectedIds.size}
-        bulkMaxIds={BULK_MAX_IDS}
-        user={user}
-        isPlatformAdmin={isPlatformAdmin}
-        statusOptions={statusOptions}
-        bulkVisibilityOptions={bulkVisibilityOptions}
-        focusOptions={focusOptions}
-        styleOptions={styleOptions}
-        trainingTypeOptions={trainingTypeOptions}
-        targetGroupOptions={targetGroupOptions}
-        bulkVisibility={bulkVisibility}
-        setBulkVisibility={setBulkVisibility}
-        bulkStatus={bulkStatus}
-        setBulkStatus={setBulkStatus}
-        bulkClubSelect={bulkClubSelect}
-        setBulkClubSelect={setBulkClubSelect}
-        bulkClubManual={bulkClubManual}
-        setBulkClubManual={setBulkClubManual}
-        bulkPatchFocusAreas={bulkPatchFocusAreas}
-        setBulkPatchFocusAreas={setBulkPatchFocusAreas}
-        bulkFocusAreaIds={bulkFocusAreaIds}
-        setBulkFocusAreaIds={setBulkFocusAreaIds}
-        bulkPatchStyleDirections={bulkPatchStyleDirections}
-        setBulkPatchStyleDirections={setBulkPatchStyleDirections}
-        bulkStyleDirectionIds={bulkStyleDirectionIds}
-        setBulkStyleDirectionIds={setBulkStyleDirectionIds}
-        bulkPatchTrainingTypes={bulkPatchTrainingTypes}
-        setBulkPatchTrainingTypes={setBulkPatchTrainingTypes}
-        bulkTrainingTypeIds={bulkTrainingTypeIds}
-        setBulkTrainingTypeIds={setBulkTrainingTypeIds}
-        bulkPatchTargetGroups={bulkPatchTargetGroups}
-        setBulkPatchTargetGroups={setBulkPatchTargetGroups}
-        bulkTargetGroupIds={bulkTargetGroupIds}
-        setBulkTargetGroupIds={setBulkTargetGroupIds}
-      />
-
-      {listFetching && exercises.length === 0 ? (
-        <div className="card empty-state" style={{ padding: '2rem 1rem' }}>
-          <div className="spinner" />
-          <p className="muted" style={{ marginTop: '12px' }}>
-            Lade Übungen…
-          </p>
-        </div>
-      ) : exercises.length === 0 ? (
-        <div className="card">
-          <p className="exercises-empty-text">Keine Übungen gefunden.</p>
-        </div>
-      ) : (
-        <>
-          {listFetching ? (
-            <p className="exercises-meta-line exercises-meta-line--muted">Aktualisiere Treffer…</p>
-          ) : null}
-          <p className="exercises-meta-line">
-            {exercises.length} angezeigt
-            {hasMore ? ' · es gibt weitere Einträge' : ''}
-          </p>
-          <div className="exercises-list-grid" data-testid="exercises-list-grid">
-            {exercises.map((exercise) => (
-              <ExerciseListCard
-                key={exercise.id}
-                exercise={exercise}
-                user={user}
-                selectedIds={selectedIds}
-                toggleSelect={toggleSelect}
-                onDelete={handleDelete}
-              />
-            ))}
-          </div>
-          {hasMore && (
-            <div className="exercises-load-more">
-              <button type="button" className="btn btn-secondary" disabled={loadingMore} onClick={loadMore}>
-                {loadingMore ? 'Laden…' : 'Mehr laden'}
-              </button>
-            </div>
-          )}
-        </>
-      )}
-    </>
-      )}
-    </div>
-  )
-}
-
-export default ExercisesListPage
+/** Routen-Einstieg: Implementierung in `components/exercises/ExercisesListPageRoot.jsx` (Phase-3 Soft-Limit). */
+export { default } from '../components/exercises/ExercisesListPageRoot'
diff --git a/frontend/src/pages/TrainingCoachPage.jsx b/frontend/src/pages/TrainingCoachPage.jsx
index a81bef5..10c9ecc 100644
--- a/frontend/src/pages/TrainingCoachPage.jsx
+++ b/frontend/src/pages/TrainingCoachPage.jsx
@@ -1,20 +1,43 @@
 /**
- * Coach-Modus: eine Position nach der anderen mit Assistentenhinweisen, Zeitnahme und optionaler Nachbereitung.
+ * Coach-Modus: Schrittfolge mit Split-Punkten (branch_gate), Stream-Wahl pro paralleler Phase, Assistenz und Zeitnahme.
  */
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import api from '../utils/api'
 import ExerciseFullContent from '../components/ExerciseFullContent'
 import ExercisePeekModal from '../components/ExercisePeekModal'
 import {
+  COACH_ENTRY_BRANCH_GATE,
+  buildCoachSavePlanPayload,
+  coachBranchPicksStepStorageSuffix,
+  coachBranchPicksStorageKey,
+  coachOutlineGroupsFromTimeline,
+  coachShouldPromptSplitRejoin,
+  coachShouldPromptSplitRejoinTransition,
+  durationOverridesMapFromDeltas,
+  findCoachTimelineJumpIndexForPhase,
   flattenPlanTimeline,
   itemStableKey,
-  sectionsToPutPayload,
+  listCoachStreamFocusOptions,
+  mergeCoachBranchPicksWithUrlFocus,
+  normalizeCoachBranchPicks,
   summarizeTimelineEntry,
 } from '../utils/trainingPlanUtils'
 
-function storageStepKey(unitId) {
-  return `sj_coach_step_${unitId}`
+function storageStepKey(unitId, mergedPicks) {
+  return `sj_coach_step_${unitId}_${coachBranchPicksStepStorageSuffix(mergedPicks)}`
+}
+
+function clearCoachStepStorageForUnit(unitId) {
+  const pref = `sj_coach_step_${unitId}_`
+  try {
+    for (let i = sessionStorage.length - 1; i >= 0; i -= 1) {
+      const k = sessionStorage.key(i)
+      if (k && k.startsWith(pref)) sessionStorage.removeItem(k)
+    }
+  } catch {
+    /* ignore */
+  }
 }
 
 function storageDeltasKey(unitId) {
@@ -54,14 +77,16 @@ function CoachControlsBand({
   showJumpToTimerOwnerRow = true,
   onJumpToTimerOwner,
   timerOwnerLabelIndex,
+  branchGateMode = false,
 }) {
   const disPrev = step <= 0
-  const disNext = step >= timelineLength - 1
+  const disNext = branchGateMode || step >= timelineLength - 1
   const alive = runStartAt != null || pausedAccumMs > 0
-  const canApplyForOwner = roundedMinForApply != null && roundedMinForApply >= 1
+  const canApplyForOwner = !branchGateMode && roundedMinForApply != null && roundedMinForApply >= 1
   const istLabelMin = roundedMinForApply == null ? '—' : String(roundedMinForApply)
-  const doneLabel =
-    timelineLength <= 1
+  const doneLabel = branchGateMode
+    ? 'Zuerst Gruppe wählen'
+    : timelineLength <= 1
       ? 'Nachbereitung öffnen'
       : isLastCoachStep
         ? 'Nachbereitung & Ist-Zeit'
@@ -105,6 +130,7 @@ function CoachControlsBand({
                 type="button"
                 className="btn btn-primary"
                 style={{ minHeight: '44px', flex: '1 1 auto', fontWeight: 700 }}
+                disabled={branchGateMode}
                 onClick={onTimerStart}
               >
                 ▶ Start{alive ? ` · ${clockStr}` : ''}
@@ -117,7 +143,7 @@ function CoachControlsBand({
             <button type="button" className="btn btn-secondary" style={{ minHeight: '44px', flex: '0 1 auto', fontWeight: 600 }} disabled={!canApplyForOwner} onClick={onApplyActual}>
               Ist ({istLabelMin}&nbsp;Min)
             </button>
-            {alive && (
+            {alive && !branchGateMode && (
               <button
                 type="button"
                 className="btn btn-secondary"
@@ -133,6 +159,7 @@ function CoachControlsBand({
             type="button"
             className="btn btn-primary"
             style={{ width: '100%', minHeight: '44px', fontWeight: 700, lineHeight: 1.2, padding: '6px 10px', whiteSpace: 'normal', textAlign: 'center' }}
+            disabled={branchGateMode}
             onClick={onDone}
           >
             {doneLabel}
@@ -155,8 +182,11 @@ function CoachControlsBand({
 export default function TrainingCoachPage() {
   const { unitId } = useParams()
   const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
   const idNum = unitId ? parseInt(unitId, 10) : NaN
 
+  const coachFocusResetRef = useRef(null)
+
   const [unit, setUnit] = useState(null)
   const [loadError, setLoadError] = useState(null)
   const [loading, setLoading] = useState(true)
@@ -169,6 +199,8 @@ export default function TrainingCoachPage() {
   const [coachDebriefPhase, setCoachDebriefPhase] = useState(false)
 
   const [step, setStep] = useState(0)
+  const [branchPicks, setBranchPicks] = useState({})
+  const [streamChoiceHint, setStreamChoiceHint] = useState(null)
   const [deltas, setDeltas] = useState({})
 
   const [runStartAt, setRunStartAt] = useState(null)
@@ -176,6 +208,8 @@ export default function TrainingCoachPage() {
   const [timerOwningStep, setTimerOwningStep] = useState(null)
   const [, setPulse] = useState(0)
 
+  const [splitRejoinPrompt, setSplitRejoinPrompt] = useState(null)
+
   const [trainerAppend, setTrainerAppend] = useState('')
   const [saveMarkDone, setSaveMarkDone] = useState(true)
   const [saving, setSaving] = useState(false)
@@ -187,12 +221,52 @@ export default function TrainingCoachPage() {
     setUnit(u)
   }, [idNum])
 
+  const coachFocus = useMemo(() => {
+    const poRaw = searchParams.get('po')
+    const soRaw = searchParams.get('so')
+    if (poRaw == null || poRaw === '' || soRaw == null || soRaw === '') return null
+    const po = parseInt(poRaw, 10)
+    const so = parseInt(soRaw, 10)
+    if (!Number.isFinite(po) || !Number.isFinite(so)) return null
+    if (!unit) return null
+    const opts = listCoachStreamFocusOptions(unit)
+    if (!opts.some((o) => o.phaseOrder === po && o.streamOrder === so)) return null
+    return { phaseOrder: po, streamOrder: so }
+  }, [searchParams, unit])
+
+  const mergedPicks = useMemo(
+    () => mergeCoachBranchPicksWithUrlFocus(branchPicks, coachFocus),
+    [branchPicks, coachFocus]
+  )
+
+  const streamFocusOptions = useMemo(() => (unit ? listCoachStreamFocusOptions(unit) : []), [unit])
+
+  const navigationKey = coachBranchPicksStepStorageSuffix(mergedPicks)
+
+  const streamQuickSelectValue = useMemo(() => {
+    for (let i = 0; i < streamFocusOptions.length; i++) {
+      const o = streamFocusOptions[i]
+      if (mergedPicks[o.phaseOrder] === o.streamOrder) return o.valueKey
+    }
+    return ''
+  }, [streamFocusOptions, mergedPicks])
+
+  const hasStreamSelectParams =
+    (searchParams.get('po') != null && searchParams.get('po') !== '') ||
+    (searchParams.get('so') != null && searchParams.get('so') !== '')
+  const streamParamsInvalid = Boolean(unit && hasStreamSelectParams && !coachFocus)
+
+  const timeline = useMemo(() => flattenPlanTimeline(unit, mergedPicks), [unit, mergedPicks])
+
+  const outlineGroups = useMemo(() => coachOutlineGroupsFromTimeline(timeline), [timeline])
+
   useEffect(() => {
     if (!unitId || Number.isNaN(idNum)) {
       setLoadError('Ungültige Trainingseinheit')
       setLoading(false)
       return
     }
+    coachFocusResetRef.current = null
     let cancelled = false
     ;(async () => {
       setLoading(true)
@@ -200,9 +274,13 @@ export default function TrainingCoachPage() {
       try {
         await reloadUnit()
         if (cancelled) return
+        let nextBranchPicks = {}
         try {
-          const s = parseInt(sessionStorage.getItem(storageStepKey(idNum)), 10)
-          if (!Number.isNaN(s) && s >= 0) setStep(s)
+          const br = sessionStorage.getItem(coachBranchPicksStorageKey(idNum))
+          if (br) {
+            const o = JSON.parse(br)
+            if (o && typeof o === 'object') nextBranchPicks = normalizeCoachBranchPicks(o)
+          }
         } catch {
           /* ignore */
         }
@@ -220,6 +298,10 @@ export default function TrainingCoachPage() {
         } catch {
           /* ignore */
         }
+        if (!cancelled) {
+          setBranchPicks(nextBranchPicks)
+          setStreamChoiceHint(null)
+        }
       } catch (e) {
         if (!cancelled) setLoadError(e.message || 'Laden fehlgeschlagen')
       } finally {
@@ -232,8 +314,68 @@ export default function TrainingCoachPage() {
   }, [unitId, idNum, reloadUnit])
 
   useEffect(() => {
-    sessionStorage.setItem(storageStepKey(idNum), String(step))
-  }, [idNum, step])
+    if (!unit) return
+    const po = searchParams.get('po')
+    const so = searchParams.get('so')
+    if ((po == null || po === '') && (so == null || so === '')) return
+    const p = parseInt(po, 10)
+    const s = parseInt(so, 10)
+    if (!Number.isFinite(p) || !Number.isFinite(s)) {
+      setSearchParams({}, { replace: true })
+      return
+    }
+    const opts = listCoachStreamFocusOptions(unit)
+    if (opts.length === 0 || !opts.some((o) => o.phaseOrder === p && o.streamOrder === s)) {
+      setSearchParams({}, { replace: true })
+    }
+  }, [unit, searchParams, setSearchParams])
+
+  useEffect(() => {
+    if (!unit) return
+    const ab = searchParams.get('atBranch')
+    if (ab == null || ab === '') return
+    const po = parseInt(ab, 10)
+    const phaseOrders = [...new Set(streamFocusOptions.map((o) => o.phaseOrder))]
+    if (!Number.isFinite(po) || !phaseOrders.includes(po)) {
+      const next = new URLSearchParams(searchParams)
+      next.delete('atBranch')
+      next.delete('preferSo')
+      setSearchParams(next, { replace: true })
+    }
+  }, [unit, searchParams, setSearchParams, streamFocusOptions])
+
+  useEffect(() => {
+    if (!unit || timeline.length === 0) return
+    const ab = searchParams.get('atBranch')
+    if (ab == null || ab === '') return
+    const po = parseInt(ab, 10)
+    if (!Number.isFinite(po)) return
+    const prefRaw = searchParams.get('preferSo')
+    const pref = prefRaw != null && prefRaw !== '' ? parseInt(prefRaw, 10) : NaN
+    const ix = findCoachTimelineJumpIndexForPhase(timeline, po, Number.isFinite(pref) ? pref : null)
+    if (ix >= 0) {
+      setStep(ix)
+      if (Number.isFinite(pref)) setStreamChoiceHint({ phaseOrder: po, streamOrder: pref })
+    }
+    const next = new URLSearchParams(searchParams)
+    next.delete('atBranch')
+    next.delete('preferSo')
+    setSearchParams(next, { replace: true })
+  }, [unit, timeline, searchParams, setSearchParams])
+
+  useEffect(() => {
+    if (Number.isNaN(idNum)) return
+    try {
+      sessionStorage.setItem(coachBranchPicksStorageKey(idNum), JSON.stringify(branchPicks))
+    } catch {
+      /* quota */
+    }
+  }, [idNum, branchPicks])
+
+  useEffect(() => {
+    if (Number.isNaN(idNum)) return
+    sessionStorage.setItem(storageStepKey(idNum, mergedPicks), String(step))
+  }, [idNum, mergedPicks, step])
 
   useEffect(() => {
     try {
@@ -257,46 +399,91 @@ export default function TrainingCoachPage() {
     return () => clearInterval(iv)
   }, [runStartAt])
 
-  const timeline = useMemo(() => flattenPlanTimeline(unit), [unit])
-
   const clampStep = (s, len = timeline.length) =>
     Math.max(0, Math.min(s, Math.max(len - 1, 0)))
 
+  const timerReset = useCallback(() => {
+    setRunStartAt(null)
+    setPausedAccumMs(0)
+    setTimerOwningStep(null)
+  }, [])
+
   useEffect(() => {
     if (!unit) return
     if (timeline.length === 0) {
       setStep(0)
       return
     }
-    if (coachDebriefPhase) return
-    setStep((prev) => clampStep(prev, timeline.length))
+    if (coachDebriefPhase) {
+      setStep(timeline.length - 1)
+    } else {
+      setStep((prev) => clampStep(prev, timeline.length))
+    }
   }, [unit, timeline.length, coachDebriefPhase])
 
   useEffect(() => {
-    if (!coachDebriefPhase || !unit || timeline.length === 0) return
-    setStep(timeline.length - 1)
-  }, [coachDebriefPhase, unit, timeline.length])
+    if (!unit || Number.isNaN(idNum)) return
+    if (timeline.length === 0) {
+      setStep(0)
+      return
+    }
+    const prev = coachFocusResetRef.current
+    if (prev === null) {
+      coachFocusResetRef.current = navigationKey
+    } else if (prev !== navigationKey) {
+      coachFocusResetRef.current = navigationKey
+      setCoachDebriefPhase(false)
+      setSplitRejoinPrompt(null)
+      timerReset()
+    } else {
+      return
+    }
+    try {
+      const raw = sessionStorage.getItem(storageStepKey(idNum, mergedPicks))
+      const s = parseInt(raw, 10)
+      const maxIdx = Math.max(0, timeline.length - 1)
+      if (!Number.isNaN(s) && s >= 0) setStep(Math.min(s, maxIdx))
+      else setStep(0)
+    } catch {
+      setStep(0)
+    }
+  }, [unit, idNum, navigationKey, mergedPicks, timeline.length, timerReset])
 
   const elapsedMs =
     pausedAccumMs + (runStartAt != null ? Date.now() - runStartAt : 0)
 
   const tickDisplaySec = Math.max(0, Math.floor(elapsedMs / 1000))
 
-  const currentEntry = timeline[step]
-  const nextEntry = timeline[step + 1] || null
-  const next2Entry = timeline[step + 2] || null
+  const safeStep = useMemo(() => {
+    if (!timeline.length) return 0
+    return Math.min(Math.max(0, step), timeline.length - 1)
+  }, [step, timeline.length])
+
+  useLayoutEffect(() => {
+    if (!timeline.length) return
+    const max = timeline.length - 1
+    const s = Math.min(Math.max(0, step), max)
+    if (s !== step) setStep(s)
+  }, [step, timeline.length])
+
+  const currentEntry = timeline[safeStep] ?? null
+  const nextEntry = timeline[safeStep + 1] || null
+  const next2Entry = timeline[safeStep + 2] || null
 
   const clockStr = formatClock(tickDisplaySec)
   const roundedMinApply = elapsedMs <= 650 ? null : Math.max(1, Math.round(elapsedMs / 60000))
   const showJumpToTimerOwner =
     timerOwningStep != null &&
-    step !== timerOwningStep &&
+    safeStep !== timerOwningStep &&
     (runStartAt != null || pausedAccumMs > 0)
-  const isLastCoachStep = timeline.length > 0 && step >= timeline.length - 1
+  const isLastCoachStep =
+    timeline.length > 0 &&
+    safeStep >= timeline.length - 1 &&
+    currentEntry?.entryKind !== COACH_ENTRY_BRANCH_GATE
 
   const timerStart = () => {
     setRunStartAt(Date.now())
-    setTimerOwningStep(step)
+    setTimerOwningStep(safeStep)
   }
 
   const timerPause = () => {
@@ -306,14 +493,8 @@ export default function TrainingCoachPage() {
     }
   }
 
-  const timerReset = () => {
-    setRunStartAt(null)
-    setPausedAccumMs(0)
-    setTimerOwningStep(null)
-  }
-
   const applySuggestedDuration = () => {
-    const idx = timerOwningStep != null ? timerOwningStep : step
+    const idx = timerOwningStep != null ? timerOwningStep : safeStep
     const ent = timeline[idx]
     const item = ent?.item
     if (!item || item.item_type !== 'exercise') return
@@ -324,12 +505,28 @@ export default function TrainingCoachPage() {
     timerPause()
   }
 
+  const pickStreamForPhase = useCallback(
+    (phaseOrder, streamOrder) => {
+      if (!Number.isFinite(phaseOrder) || !Number.isFinite(streamOrder)) return
+      setStreamChoiceHint(null)
+      setSplitRejoinPrompt(null)
+      setBranchPicks((prev) => ({ ...normalizeCoachBranchPicks(prev), [phaseOrder]: streamOrder }))
+      timerReset()
+      setCoachDebriefPhase(false)
+      setSearchParams({ po: String(phaseOrder), so: String(streamOrder) }, { replace: true })
+    },
+    [timerReset, setSearchParams]
+  )
+
+  const atBranchGate = currentEntry?.entryKind === COACH_ENTRY_BRANCH_GATE
+
   const goPrev = () => setStep((s) => clampStep(s - 1))
   const goNext = () => setStep((s) => clampStep(s + 1))
 
   const markCurrentDoneAdvance = () => {
-    const ownerIdx = timerOwningStep != null ? timerOwningStep : step
+    const ownerIdx = timerOwningStep != null ? timerOwningStep : safeStep
     const ent = timeline[ownerIdx]
+    if (ent?.entryKind === COACH_ENTRY_BRANCH_GATE) return
     const item = ent?.item
     if (item?.item_type === 'exercise' && elapsedMs > 650) {
       const key = itemStableKey(item, ent.secOrder, ent.ii)
@@ -339,7 +536,12 @@ export default function TrainingCoachPage() {
     timerReset()
 
     const lastIdx = timeline.length - 1
-    if (step >= lastIdx && lastIdx >= 0) {
+    if (safeStep >= lastIdx && lastIdx >= 0) {
+      const rejoin = coachShouldPromptSplitRejoin(unit, timeline[safeStep])
+      if (rejoin) {
+        setSplitRejoinPrompt(rejoin)
+        return
+      }
       setCoachDebriefPhase(true)
       try {
         sessionStorage.setItem(storageDebriefKey(idNum), '1')
@@ -348,25 +550,31 @@ export default function TrainingCoachPage() {
       }
       return
     }
+    const nextIdx = safeStep + 1
+    if (nextIdx < timeline.length) {
+      const rejoinMid = coachShouldPromptSplitRejoinTransition(unit, timeline[safeStep], timeline[nextIdx])
+      if (rejoinMid) {
+        setSplitRejoinPrompt(rejoinMid)
+        return
+      }
+    }
     setStep((s) => clampStep(s + 1, timeline.length))
   }
 
-  const durationOverridesForApi = useMemo(() => {
-    const out = {}
-    for (let i = 0; i < timeline.length; i++) {
-      const ent = timeline[i]
-      const { item } = ent
-      if (item.item_type !== 'exercise' || item.id == null) continue
-      const k = itemStableKey(item, ent.secOrder, ent.ii)
-      const dv = deltas[k]?.actual_duration_min
-      if (dv !== undefined && dv !== '' && dv !== null && !Number.isNaN(Number(dv))) {
-        out[String(item.id)] = { actual_duration_min: Number(dv) }
-      }
-    }
-    return out
-  }, [timeline, deltas])
+  useEffect(() => {
+    if (!atBranchGate) return
+    if (runStartAt != null || pausedAccumMs > 0) timerReset()
+  }, [step, atBranchGate, runStartAt, pausedAccumMs, timerReset])
+
+  const durationOverridesForApi = useMemo(() => durationOverridesMapFromDeltas(unit, deltas), [unit, deltas])
 
   useEffect(() => {
+    if (currentEntry?.entryKind === COACH_ENTRY_BRANCH_GATE) {
+      setCatalogExercise(null)
+      setCatalogError(null)
+      setCatalogLoading(false)
+      return
+    }
     const item = currentEntry?.item
     if (!item || item.item_type === 'note') {
       setCatalogExercise(null)
@@ -402,16 +610,16 @@ export default function TrainingCoachPage() {
     return () => {
       cancelled = true
     }
-  }, [step, currentEntry?.item?.exercise_id, currentEntry?.item?.exercise_variant_id, currentEntry?.item?.item_type])
+  }, [step, currentEntry?.entryKind, currentEntry?.item?.exercise_id, currentEntry?.item?.exercise_variant_id, currentEntry?.item?.item_type])
 
   const handleSaveDebrief = async () => {
     setSaveOk(null)
     setSaving(true)
     try {
-      const sectionsPayload = sectionsToPutPayload(unit, durationOverridesForApi)
+      const sectionsPayloadPart = buildCoachSavePlanPayload(unit, durationOverridesForApi)
       const tn = trainerAppend.trim()
       const payload = {
-        sections: sectionsPayload,
+        ...sectionsPayloadPart,
         ...(saveMarkDone ? { status: 'completed' } : {}),
       }
       if (tn) {
@@ -421,18 +629,24 @@ export default function TrainingCoachPage() {
           .trim()
       }
       await api.updateTrainingUnit(idNum, payload)
-      await reloadUnit()
       setTrainerAppend('')
       try {
         sessionStorage.removeItem(storageDeltasKey(idNum))
         sessionStorage.removeItem(storageDebriefKey(idNum))
+        sessionStorage.removeItem(coachBranchPicksStorageKey(idNum))
+        clearCoachStepStorageForUnit(idNum)
       } catch {
         /* ignore */
       }
       setDeltas({})
+      setBranchPicks({})
+      setStreamChoiceHint(null)
+      setSplitRejoinPrompt(null)
       setCoachDebriefPhase(false)
-      setSaveOk('Gespeichert.')
       setDebriefOpen(false)
+      setSaveOk('Gespeichert.')
+      setSearchParams({}, { replace: true })
+      navigate(`/planning/run/${unitId}`, { replace: true })
     } catch (e) {
       setSaveOk(`Fehler: ${e.message || e}`)
     } finally {
@@ -486,6 +700,41 @@ export default function TrainingCoachPage() {
         <button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
           Planung
         </button>
+        {streamFocusOptions.length > 0 ? (
+          <label
+            className="no-print"
+            style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', color: 'var(--text2)' }}
+          >
+            <span style={{ color: 'var(--text3)', whiteSpace: 'nowrap' }}>Ansicht</span>
+            <select
+              className="form-input"
+              style={{ minWidth: 'min(220px, 72vw)', margin: 0, padding: '6px 8px', fontSize: '0.82rem' }}
+              value={streamQuickSelectValue}
+              onChange={(e) => {
+                setSplitRejoinPrompt(null)
+                setCoachDebriefPhase(false)
+                timerReset()
+                const v = e.target.value
+                if (!v) {
+                  setBranchPicks({})
+                  setStreamChoiceHint(null)
+                  setSplitRejoinPrompt(null)
+                  setSearchParams({}, { replace: true })
+                } else {
+                  const [ppo, sso] = v.split('-').map((x) => parseInt(x, 10))
+                  pickStreamForPhase(ppo, sso)
+                }
+              }}
+            >
+              <option value="">Ablauf mit Split-Punkten (Standard)</option>
+              {streamFocusOptions.map((o) => (
+                <option key={o.valueKey} value={o.valueKey}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        ) : null}
         <button
           type="button"
           className="btn btn-primary"
@@ -496,6 +745,111 @@ export default function TrainingCoachPage() {
         </button>
       </nav>
 
+      {streamParamsInvalid ? (
+        <p
+          className="no-print card"
+          style={{
+            padding: '10px 12px',
+            fontSize: '0.82rem',
+            color: 'var(--danger)',
+            marginBottom: '8px',
+            flexShrink: 0,
+          }}
+        >
+          Ungültige Stream-Parameter in der Adresszeile — es wird der Gesamtplan angezeigt.
+        </p>
+      ) : null}
+
+      {splitRejoinPrompt && !coachDebriefPhase ? (
+        <div
+          className="card no-print"
+          style={{
+            flexShrink: 0,
+            marginBottom: '10px',
+            padding: '16px 14px',
+            borderRadius: '12px',
+            border: '2px solid var(--accent)',
+            background: 'linear-gradient(135deg, var(--accent-light), var(--surface))',
+          }}
+        >
+          <div style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--accent-dark)', marginBottom: '6px' }}>
+            Parallelphase · Abschluss
+          </div>
+          <p style={{ fontSize: '0.95rem', fontWeight: 700, margin: '0 0 8px', color: 'var(--text1)' }}>
+            {splitRejoinPrompt.phaseTitle != null && String(splitRejoinPrompt.phaseTitle).trim()
+              ? String(splitRejoinPrompt.phaseTitle).trim()
+              : `Phase ${splitRejoinPrompt.phaseOrderIndex}`}
+            {' — '}
+            alle Gruppen zusammen?
+          </p>
+          <p style={{ fontSize: '0.84rem', color: 'var(--text2)', margin: '0 0 12px', lineHeight: 1.45 }}>
+            Diese Phase hat mehrere Streams. Kurz mit dem anderen Trainer klären, dann gemeinsam weitermachen. Ist-Zeiten
+            und Speichern erfolgen in der Nachbereitung am Ende der Einheit.
+          </p>
+          <ul style={{ margin: '0 0 14px', paddingLeft: '1.2rem', fontSize: '0.82rem', color: 'var(--text2)' }}>
+            {splitRejoinPrompt.streams.map((st) => (
+              <li key={st.printStreamId || `s-${st.streamOrder}`}>
+                {st.streamTitle?.trim() ? String(st.streamTitle).trim() : `Gruppe ${st.streamOrder + 1}`}{' '}
+                <span style={{ color: 'var(--text3)' }}>(ca. {st.minutes} Min. Üb.)</span>
+              </li>
+            ))}
+          </ul>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {safeStep < timeline.length - 1 ? (
+              <button
+                type="button"
+                className="btn btn-primary"
+                style={{ minHeight: '48px', fontWeight: 700 }}
+                onClick={() => {
+                  setSplitRejoinPrompt(null)
+                  setStep((s) => clampStep(s + 1, timeline.length))
+                }}
+              >
+                Gruppen zusammengeführt — weiter mit dem Plan
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="btn btn-primary"
+                style={{ minHeight: '48px', fontWeight: 700 }}
+                onClick={() => {
+                  setSplitRejoinPrompt(null)
+                  setCoachDebriefPhase(true)
+                  try {
+                    sessionStorage.setItem(storageDebriefKey(idNum), '1')
+                  } catch {
+                    /* ignore */
+                  }
+                }}
+              >
+                Alle Gruppen fertig — zur Nachbereitung
+              </button>
+            )}
+            <button type="button" className="btn btn-secondary" style={{ minHeight: '44px' }} onClick={() => setSplitRejoinPrompt(null)}>
+              Zurück — andere Gruppe läuft noch
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              style={{ minHeight: '44px', fontSize: '0.82rem' }}
+              onClick={() => {
+                setSplitRejoinPrompt(null)
+                setCoachDebriefPhase(true)
+                try {
+                  sessionStorage.setItem(storageDebriefKey(idNum), '1')
+                } catch {
+                  /* ignore */
+                }
+              }}
+            >
+              {safeStep < timeline.length - 1
+                ? 'Ausnahme: jetzt schon zur Nachbereitung'
+                : 'Ausnahme: trotzdem zur Nachbereitung'}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
       <header
         className="card training-coach-hero training-coach-hero--compact"
         style={{
@@ -509,44 +863,93 @@ export default function TrainingCoachPage() {
       >
         <div style={{ fontSize: '0.7rem', color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
           Coach ·{' '}
-          {coachDebriefPhase ? 'Nachbereitung · abschließend speichern' : `Schritt ${(step || 0) + 1} / ${Math.max(timeline.length, 1)}`}
+          {coachDebriefPhase ? 'Nachbereitung · abschließend speichern' : `Schritt ${(safeStep || 0) + 1} / ${Math.max(timeline.length, 1)}`}
         </div>
         <h1 style={{ fontSize: '1.1rem', margin: '4px 0 0', lineHeight: 1.28 }}>
           {unit.planned_date}
           {unit.planned_time_start && ` · ${String(unit.planned_time_start).slice(0, 5)}`}
           {unit.planned_focus ? ` · ${unit.planned_focus}` : ''}
         </h1>
+        {streamFocusOptions.length > 0 ? (
+          <p style={{ fontSize: '0.8rem', color: 'var(--text2)', margin: '8px 0 0', lineHeight: 1.4 }}>
+            Parallele Phasen erscheinen als Schritt <strong>Gruppe wählen</strong> — kein Durcheinander mehr aus
+            verschränkten Streams. Pro paralleler Phase entscheiden Sie (oder der Co-Trainer auf dem eigenen Gerät), welcher
+            Stream coacht wird. Kurzwahl oben springt die betreffende Phase sofort auf einen Stream (z. B. zwischen Gruppen
+            wechseln).
+            {Object.keys(mergedPicks).length > 0 ? (
+              <span style={{ display: 'block', marginTop: '6px', color: 'var(--text3)', fontSize: '0.78rem' }}>
+                Aktuell festgelegt:{' '}
+                {Object.keys(mergedPicks)
+                  .map((pk) => {
+                    const po = parseInt(pk, 10)
+                    const so = mergedPicks[pk]
+                    const o = streamFocusOptions.find((x) => x.phaseOrder === po && x.streamOrder === so)
+                    return o?.label ?? `Phase ${po} · Stream ${so}`
+                  })
+                  .join(' · ')}
+              </span>
+            ) : null}
+          </p>
+        ) : null}
       </header>
 
       {outlineOpen && (
         <div className="card training-coach-outline" style={{ flexShrink: 0, marginBottom: '8px', padding: '10px 12px', maxHeight: 'min(28vh, 260px)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-          <div style={{ fontSize: '0.75rem', color: 'var(--text3)', marginBottom: '6px', flexShrink: 0 }}>Ablauf · Antippen zum Springen</div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', overflowY: 'auto', minHeight: 0 }}>
-            {timeline.map((ent, ix) => {
-              const lbl = summarizeTimelineEntry(ent)
-              const secTitle = ent.sec.title || `Abschnitt ${ent.si + 1}`
-              const active = coachDebriefPhase ? ix === timeline.length - 1 : ix === step
-              return (
-                <button
-                  key={`${itemStableKey(ent.item, ent.secOrder, ent.ii)}-${ix}`}
-                  type="button"
-                  className={`btn ${active ? 'btn-primary' : 'btn-secondary'}`}
+          <div style={{ fontSize: '0.75rem', color: 'var(--text3)', marginBottom: '6px', flexShrink: 0 }}>
+            Trainingsrahmen · nach Blöcken und Streams
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', overflowY: 'auto', minHeight: 0 }}>
+            {outlineGroups.map((grp) => (
+              <div key={grp.mergeKey} style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                <div
                   style={{
-                    textAlign: 'left',
-                    justifyContent: 'flex-start',
-                    opacity: active ? 1 : 0.92,
-                    fontWeight: active ? 700 : 500
-                  }}
-                  onClick={() => {
-                    setCoachDebriefPhase(false)
-                    setStep(ix)
+                    fontSize: '0.72rem',
+                    fontWeight: 700,
+                    color: 'var(--accent-dark)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.04em',
                   }}
                 >
-                  <span style={{ opacity: 0.75 }}>{secTitle.substring(0, 14)} › </span>
-                  <span>{lbl}</span>
-                </button>
-              )
-            })}
+                  {grp.heading}
+                  {grp.sub ? <span style={{ fontWeight: 600, color: 'var(--text3)', textTransform: 'none' }}> · {grp.sub}</span> : null}
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                  {grp.entries.map(({ ix, ent }) => {
+                    const lbl = summarizeTimelineEntry(ent)
+                    const ctx = ent.coachContext || ''
+                    const active = coachDebriefPhase ? ix === timeline.length - 1 : ix === safeStep
+                    const rowKey =
+                      ent.entryKind === COACH_ENTRY_BRANCH_GATE
+                        ? `gate-${ix}`
+                        : `${itemStableKey(ent.item, ent.secOrder, ent.ii)}-${ix}`
+                    return (
+                      <button
+                        key={rowKey}
+                        type="button"
+                        className={`btn ${active ? 'btn-primary' : 'btn-secondary'}`}
+                        style={{
+                          textAlign: 'left',
+                          justifyContent: 'flex-start',
+                          opacity: active ? 1 : 0.92,
+                          fontWeight: active ? 700 : 500,
+                        }}
+                        onClick={() => {
+                          setCoachDebriefPhase(false)
+                          setStep(ix)
+                        }}
+                      >
+                        {ctx ? (
+                          <span style={{ opacity: 0.8, display: 'block', fontSize: '0.72rem', marginBottom: '2px' }}>
+                            {ctx.length > 42 ? `${ctx.slice(0, 40)}…` : ctx}
+                          </span>
+                        ) : null}
+                        <span>{lbl}</span>
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       )}
@@ -566,13 +969,16 @@ export default function TrainingCoachPage() {
             </p>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px' }}>
               {timeline
-                .filter((e) => e.item.item_type === 'exercise')
+                .filter((e) => e.item?.item_type === 'exercise')
                 .map((ent) => {
                   const k = itemStableKey(ent.item, ent.secOrder, ent.ii)
                   const val = deltas[k]?.actual_duration_min ?? ent.item.actual_duration_min ?? ''
                   return (
                     <label key={`db-${k}`} style={{ display: 'grid', gridTemplateColumns: '1fr 88px', gap: '10px', alignItems: 'center', fontSize: '0.88rem' }}>
-                      <span style={{ wordBreak: 'break-word' }}>{summarizeTimelineEntry(ent)}</span>
+                      <span style={{ wordBreak: 'break-word' }}>
+                        {ent.coachContext ? <span style={{ color: 'var(--text3)' }}>{ent.coachContext} · </span> : null}
+                        {summarizeTimelineEntry(ent)}
+                      </span>
                       <input
                         type="number"
                         min="0"
@@ -635,6 +1041,8 @@ export default function TrainingCoachPage() {
         </div>
       ) : (
         <>
+          {!splitRejoinPrompt ? (
+            <>
           <div
             className="training-coach-assist training-coach-assist--compact"
             style={{
@@ -648,7 +1056,12 @@ export default function TrainingCoachPage() {
             <div style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--accent-dark)', marginBottom: '6px' }}>
               Als Nächstes
             </div>
-            {nextEntry ? (
+            {atBranchGate ? (
+              <p style={{ margin: 0, fontSize: '0.88rem', color: 'var(--text2)', lineHeight: 1.45 }}>
+                Wählen Sie unten eine Gruppe. Danach zeigt der Coach fortlaufend nur die Übungen dieses Streams in dieser
+                parallelen Phase.
+              </p>
+            ) : nextEntry ? (
               <>
                 <p style={{ margin: '0', fontSize: '0.9rem', color: 'var(--text1)', lineHeight: 1.4 }}>
                   <strong>Nächste:</strong> {summarizeTimelineEntry(nextEntry)}
@@ -667,7 +1080,7 @@ export default function TrainingCoachPage() {
           </div>
 
           <CoachControlsBand
-            step={step}
+            step={safeStep}
             timelineLength={timeline.length}
             onPrev={goPrev}
             onNext={goNext}
@@ -683,15 +1096,99 @@ export default function TrainingCoachPage() {
             isLastCoachStep={isLastCoachStep}
             showJumpToTimerOwner={showJumpToTimerOwner}
             showJumpToTimerOwnerRow
-            onJumpToTimerOwner={() => setStep(timerOwningStep ?? step)}
+            onJumpToTimerOwner={() => setStep(timerOwningStep ?? safeStep)}
             timerOwnerLabelIndex={timerOwningStep ?? 0}
+            branchGateMode={atBranchGate}
           />
 
           <div className="training-coach-scroll">
-            {currentEntry?.item?.item_type === 'note' ? (
+            {atBranchGate && currentEntry?.branchMeta ? (
+              <div
+                className="card"
+                style={{
+                  padding: '18px 16px',
+                  marginBottom: '12px',
+                  borderRadius: '14px',
+                  border: '2px solid var(--accent)',
+                  background: 'linear-gradient(180deg, var(--accent-light) 0%, var(--surface) 38%)',
+                  boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+                }}
+              >
+                <div style={{ fontSize: '0.74rem', fontWeight: 800, color: 'var(--accent-dark)', marginBottom: '6px', letterSpacing: '0.04em' }}>
+                  ⑂ SPLIT — GRUPPE WÄHLEN
+                </div>
+                <p style={{ fontSize: '1.05rem', fontWeight: 800, margin: '0 0 8px', color: 'var(--text1)' }}>
+                  {currentEntry.branchMeta.phaseTitle != null && String(currentEntry.branchMeta.phaseTitle).trim()
+                    ? String(currentEntry.branchMeta.phaseTitle).trim()
+                    : `Phase ${currentEntry.branchMeta.phaseOrderIndex}`}
+                </p>
+                <p style={{ fontSize: '0.88rem', color: 'var(--text2)', margin: '0 0 16px', lineHeight: 1.45 }}>
+                  Tippen Sie auf eine Kachel, um <strong>diese Gruppe</strong> zu coachen. Andere Trainer:innen wählen auf
+                  ihrem Gerät parallel eine andere Kachel.
+                </p>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '12px' }}>
+                  {(currentEntry.branchMeta.streams || []).map((st) => {
+                    const hinted =
+                      streamChoiceHint?.phaseOrder === currentEntry.branchMeta.phaseOrderIndex &&
+                      streamChoiceHint?.streamOrder === st.streamOrder
+                    const label = st.streamTitle?.trim() ? String(st.streamTitle).trim() : `Gruppe ${st.streamOrder + 1}`
+                    const baseBg = hinted ? 'var(--accent)' : 'var(--surface2)'
+                    const baseColor = hinted ? '#fff' : 'var(--text1)'
+                    const borderCol = hinted ? 'var(--accent-dark)' : 'var(--border)'
+                    return (
+                      <button
+                        key={st.printStreamId || `s-${st.streamOrder}`}
+                        type="button"
+                        className="btn"
+                        style={{
+                          textAlign: 'left',
+                          justifyContent: 'flex-start',
+                          flexDirection: 'column',
+                          alignItems: 'stretch',
+                          padding: '14px 16px',
+                          minHeight: '96px',
+                          fontWeight: 700,
+                          background: baseBg,
+                          color: baseColor,
+                          border: `2px solid ${borderCol}`,
+                          borderRadius: '12px',
+                          boxShadow: hinted ? '0 4px 0 var(--accent-dark)' : '0 3px 0 hsl(200 20% 78%)',
+                          transition: 'transform 0.08s ease, box-shadow 0.08s ease',
+                        }}
+                        onClick={() => pickStreamForPhase(currentEntry.branchMeta.phaseOrderIndex, st.streamOrder)}
+                      >
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1rem' }}>
+                          <span style={{ fontSize: '1.35rem', lineHeight: 1 }} aria-hidden="true">
+                            {hinted ? '◉' : '○'}
+                          </span>
+                          <span>{label}</span>
+                        </span>
+                        <span
+                          style={{
+                            display: 'block',
+                            fontSize: '0.82rem',
+                            fontWeight: 600,
+                            opacity: hinted ? 0.95 : 0.88,
+                            marginTop: '8px',
+                          }}
+                        >
+                          ≈ {st.minutes} Min. Üb. · Jetzt aktivieren
+                        </span>
+                        {hinted ? (
+                          <span style={{ display: 'block', fontSize: '0.74rem', fontWeight: 600, marginTop: '8px', opacity: 0.92 }}>
+                            Vorschlag aus Planansicht — trotzdem andere Kachel möglich
+                          </span>
+                        ) : null}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            ) : currentEntry?.item?.item_type === 'note' ? (
               <div className="card" style={{ padding: '16px 14px' }}>
                 <div style={{ fontSize: '0.74rem', color: 'var(--text3)', marginBottom: '8px' }}>
-                  {currentEntry.sec.title || 'Abschnitt'} · Coach-Notiz · Teil {step + 1}
+                  {currentEntry?.coachContext || currentEntry?.sec?.title || 'Abschnitt'} · Coach-Notiz · Teil{' '}
+                  {safeStep + 1}
                 </div>
                 <div style={{ fontSize: '0.78rem', color: 'var(--text3)', marginBottom: '6px' }}>Coach-Notiz</div>
                 <p style={{ fontSize: '1.05rem', lineHeight: 1.52, whiteSpace: 'pre-wrap', margin: 0 }}>{currentEntry.item.note_body || ''}</p>
@@ -700,7 +1197,8 @@ export default function TrainingCoachPage() {
               <>
                 <div className="card training-coach-plan-strip" style={{ padding: '12px 14px', marginBottom: '12px', borderRadius: '12px', borderLeft: `3px solid var(--accent)` }}>
                   <div style={{ fontSize: '0.74rem', color: 'var(--text3)', marginBottom: '6px' }}>
-                    In diesem Training · {currentEntry?.sec.title || 'Abschnitt'} · Teil {step + 1}
+                    In diesem Training · {currentEntry?.coachContext || currentEntry?.sec?.title || 'Abschnitt'} · Teil{' '}
+                    {safeStep + 1}
                   </div>
                   {currentEntry?.item && (
                     <>
@@ -788,13 +1286,16 @@ export default function TrainingCoachPage() {
                   </p>
                   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px' }}>
                     {timeline
-                      .filter((e) => e.item.item_type === 'exercise')
+                      .filter((e) => e.item?.item_type === 'exercise')
                       .map((ent) => {
                         const k = itemStableKey(ent.item, ent.secOrder, ent.ii)
                         const val = deltas[k]?.actual_duration_min ?? ent.item.actual_duration_min ?? ''
                         return (
                           <label key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 88px', gap: '10px', alignItems: 'center', fontSize: '0.88rem' }}>
-                            <span style={{ wordBreak: 'break-word' }}>{summarizeTimelineEntry(ent)}</span>
+                            <span style={{ wordBreak: 'break-word' }}>
+                              {ent.coachContext ? <span style={{ color: 'var(--text3)' }}>{ent.coachContext} · </span> : null}
+                              {summarizeTimelineEntry(ent)}
+                            </span>
                             <input
                               type="number"
                               min="0"
@@ -840,7 +1341,7 @@ export default function TrainingCoachPage() {
           </div>
 
           <CoachControlsBand
-            step={step}
+            step={safeStep}
             timelineLength={timeline.length}
             onPrev={goPrev}
             onNext={goNext}
@@ -856,9 +1357,12 @@ export default function TrainingCoachPage() {
             isLastCoachStep={isLastCoachStep}
             showJumpToTimerOwner={showJumpToTimerOwner}
             showJumpToTimerOwnerRow={false}
-            onJumpToTimerOwner={() => setStep(timerOwningStep ?? step)}
+            onJumpToTimerOwner={() => setStep(timerOwningStep ?? safeStep)}
             timerOwnerLabelIndex={timerOwningStep ?? 0}
+            branchGateMode={atBranchGate}
           />
+            </>
+          ) : null}
         </>
       )}
     </div>
diff --git a/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx b/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx
index f0a2a00..588a6cb 100644
--- a/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx
+++ b/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx
@@ -14,6 +14,7 @@ import {
   enrichSectionsWithVariants,
   buildSectionsPayload,
   hydrateExercisePlanningRow,
+  reorderBlockIntoParallelStreamEnd,
 } from '../utils/trainingUnitSectionsForm'
 
 const DND_FW_SLOT = 'application/x-shinkan-framework-slot'
@@ -553,7 +554,7 @@ export default function TrainingFrameworkProgramEditPage() {
   }
 
   const moveSectionsAcrossFrameworkSlots = useCallback(
-    ({ fromSlot, fromSectionIdx, toSlot, toSectionIdx }) => {
+    ({ fromSlot, fromSectionIdx, toSlot, toSectionIdx, toParallelStream }) => {
       setForm((prev) => {
         const slots = prev.slots.map((sl) => ({
           ...sl,
@@ -581,17 +582,32 @@ export default function TrainingFrameworkProgramEditPage() {
 
         const [block] = fromSecs.splice(fromSectionIdx, 1)
 
+        const applyParallelStreamEnd =
+          toParallelStream != null && toParallelStream.po != null && toParallelStream.so != null
+            ? (secs, insertedAt) => {
+                const po = Number(toParallelStream.po) || 0
+                const so = Number(toParallelStream.so) || 0
+                return reorderBlockIntoParallelStreamEnd(secs, insertedAt, po, so)
+              }
+            : null
+
         if (fromSlot === toSlot) {
           let insertAt = toSectionIdx
           if (fromSectionIdx < toSectionIdx) insertAt = toSectionIdx - 1
           insertAt = Math.max(0, Math.min(insertAt, fromSecs.length))
           fromSecs.splice(insertAt, 0, block)
+          if (applyParallelStreamEnd) {
+            slots[fromSlot].sections = applyParallelStreamEnd(fromSecs, insertAt)
+          }
           return { ...prev, slots }
         }
 
         const toSecs = slots[toSlot].sections
         const ia = Math.max(0, Math.min(toSectionIdx, toSecs.length))
         toSecs.splice(ia, 0, block)
+        if (applyParallelStreamEnd) {
+          slots[toSlot].sections = applyParallelStreamEnd(toSecs, ia)
+        }
         return { ...prev, slots }
       })
     },
diff --git a/frontend/src/pages/TrainingPlanningPage.jsx b/frontend/src/pages/TrainingPlanningPage.jsx
index c031138..d5ce4de 100644
--- a/frontend/src/pages/TrainingPlanningPage.jsx
+++ b/frontend/src/pages/TrainingPlanningPage.jsx
@@ -1,3101 +1,2 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Link, useSearchParams } from 'react-router-dom'
-import api from '../utils/api'
-import { useAuth } from '../context/AuthContext'
-import { useToast } from '../context/ToastContext'
-import { activeClubMemberships, getTenantClubDependencyKey } from '../utils/activeClub'
-import ExercisePickerModal from '../components/ExercisePickerModal'
-import ExercisePeekModal from '../components/ExercisePeekModal'
-import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor'
-import TrainingPlanExerciseVisibilityPanel from '../components/TrainingPlanExerciseVisibilityPanel'
-import PageSectionNav from '../components/PageSectionNav'
-import {
-  defaultSection,
-  normalizeUnitToForm,
-  enrichSectionsWithVariants,
-  buildSectionsPayload,
-  hydrateExercisePlanningRow,
-  insertTrainingModuleIntoPlanningSections,
-} from '../utils/trainingUnitSectionsForm'
-
-/** Kurz-Anzeige Sichtbarkeit (Trainingsmodule, Übungen) */
-function trainingVisibilityShortDE(visibility) {
-  const v = String(visibility || '').trim().toLowerCase()
-  if (v === 'official') return 'Öffentliche Bibliothek'
-  if (v === 'club') return 'Verein'
-  if (v === 'private') return 'Privat'
-  return visibility ? String(visibility) : ''
-}
-
-function addDaysIsoDate(isoDay, daysDelta) {
-  const d = new Date(`${isoDay}T12:00:00`)
-  d.setDate(d.getDate() + daysDelta)
-  return d.toISOString().slice(0, 10)
-}
-
-function pad2(n) {
-  return String(n).padStart(2, '0')
-}
-
-function toIsoLocal(d) {
-  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
-}
-
-/** Montag = erster Wochentag (ISO-Woche UI) */
-function mondayIndex(d) {
-  return (d.getDay() + 6) % 7
-}
-
-/** Kalendarische Monatsansicht: erster und letzter Tag des sichtbaren Rasters (Mo–So) */
-function getCalendarGridRange(ym) {
-  const parts = (ym || '').split('-').map(Number)
-  const y = parts[0]
-  const m = parts[1]
-  if (!y || !m || m < 1 || m > 12) {
-    const t = new Date()
-    return { gridStart: toIsoLocal(t), gridEnd: toIsoLocal(t) }
-  }
-  const first = new Date(y, m - 1, 1)
-  const last = new Date(y, m, 0)
-  const gridStart = new Date(first)
-  gridStart.setDate(first.getDate() - mondayIndex(first))
-  const lastMon = mondayIndex(last)
-  const gridEnd = new Date(last)
-  gridEnd.setDate(last.getDate() + (6 - lastMon))
-  return { gridStart: toIsoLocal(gridStart), gridEnd: toIsoLocal(gridEnd) }
-}
-
-function shiftCalendarMonth(ym, delta) {
-  const parts = (ym || '').split('-').map(Number)
-  const y = parts[0] || new Date().getFullYear()
-  const m = parts[1] || 1
-  const d = new Date(y, m - 1 + delta, 1)
-  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`
-}
-
-function enumerateIsoDays(fromIso, toIso) {
-  const out = []
-  const cur = new Date(`${fromIso}T12:00:00`)
-  const end = new Date(`${toIso}T12:00:00`)
-  while (cur <= end) {
-    out.push(toIsoLocal(cur))
-    cur.setDate(cur.getDate() + 1)
-  }
-  return out
-}
-
-const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
-
-function toNumList(arr) {
-  if (!Array.isArray(arr)) return []
-  const out = []
-  for (const x of arr) {
-    const n = Number(x)
-    if (Number.isFinite(n) && n >= 1) out.push(n)
-  }
-  return out
-}
-
-const sessionAssignDefaults = () => ({
-  lead_trainer_profile_id: '',
-  session_assistants_inherit: true,
-  session_assistant_profile_ids: [],
-})
-
-/** Co_trainer_ids aus TrainingGroups (Liste/JSON) → Zahlenliste */
-function normalizeGroupCoTrainerIds(raw) {
-  if (raw == null) return []
-  const arr = Array.isArray(raw) ? raw : []
-  const out = []
-  for (const x of arr) {
-    const n = Number(x)
-    if (Number.isFinite(n) && n >= 1) out.push(n)
-  }
-  return out
-}
-
-/** Mitgliederverzeichnis-Einträge ohne effektiven Leitungsträger als Co‑Option */
-function filterDirectoryExcludingLead(directory, excludeLeadPid) {
-  const ex =
-    excludeLeadPid != null && excludeLeadPid !== '' && Number.isFinite(Number(excludeLeadPid))
-      ? Number(excludeLeadPid)
-      : null
-  if (ex == null) return directory
-  return directory.filter((m) => Number(m.id) !== ex)
-}
-function TrainingPlanningPage() {
-  const { user } = useAuth()
-  const toast = useToast()
-  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
-  const [searchParams, setSearchParams] = useSearchParams()
-  const unitDeepLinkHandledRef = useRef(null)
-  const [groups, setGroups] = useState([])
-  const [selectedGroupId, setSelectedGroupId] = useState('')
-  const [units, setUnits] = useState([])
-  const [planTemplates, setPlanTemplates] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [showModal, setShowModal] = useState(false)
-  const [editingUnit, setEditingUnit] = useState(null)
-  /** Abschnitts-Editor bei Bearbeitung: Planung vs. Nachbereitung (Ist & Abweichungen) */
-  const [sectionsEditMode, setSectionsEditMode] = useState('planning')
-  const [draftPlanTemplateId, setDraftPlanTemplateId] = useState('')
-  const [exercisePickerOpen, setExercisePickerOpen] = useState(false)
-  const [exercisePickerTarget, setExercisePickerTarget] = useState(null)
-  const [planningPeekCtx, setPlanningPeekCtx] = useState(null)
-
-  const today = new Date().toISOString().split('T')[0]
-  const thirtyDaysLater = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
-
-  const [frameworkImportOpen, setFrameworkImportOpen] = useState(false)
-  const [frameworkProgramsList, setFrameworkProgramsList] = useState([])
-  const [fwImportProgramId, setFwImportProgramId] = useState('')
-  const [fwImportDetail, setFwImportDetail] = useState(null)
-  const [fwImportLoading, setFwImportLoading] = useState(false)
-  const [fwImportSelectedSlots, setFwImportSelectedSlots] = useState(() => new Set())
-  const [fwImportSlotDates, setFwImportSlotDates] = useState({})
-  const [fwImportStartDate, setFwImportStartDate] = useState(today)
-  const [fwImportIntervalDays, setFwImportIntervalDays] = useState(7)
-  const [fwImportSubmitting, setFwImportSubmitting] = useState(false)
-
-  const [moduleApplyOpen, setModuleApplyOpen] = useState(false)
-  const [moduleApplyBusy, setModuleApplyBusy] = useState(false)
-  const [moduleApplyList, setModuleApplyList] = useState([])
-  const [moduleApplyModuleId, setModuleApplyModuleId] = useState('')
-  const [moduleApplySectionIx, setModuleApplySectionIx] = useState(0)
-  const [moduleApplyInsertSlot, setModuleApplyInsertSlot] = useState('before:0')
-  const [moduleApplyErr, setModuleApplyErr] = useState('')
-  const [moduleApplyPlacementLocked, setModuleApplyPlacementLocked] = useState(false)
-  const [moduleApplySearchQuery, setModuleApplySearchQuery] = useState('')
-  const [modulePickPreview, setModulePickPreview] = useState({
-    loading: false,
-    moduleId: '',
-    exercises: [],
-    notes: 0,
-    err: '',
-  })
-
-  const [startDate, setStartDate] = useState(today)
-  const [endDate, setEndDate] = useState(thirtyDaysLater)
-  const [planView, setPlanView] = useState('list')
-  const [calendarMonthStr, setCalendarMonthStr] = useState(() => today.slice(0, 7))
-  const [planScope, setPlanScope] = useState('group')
-  const [assignedToMeOnly, setAssignedToMeOnly] = useState(false)
-  const [clubDirectory, setClubDirectory] = useState([])
-  const [assignModalOpen, setAssignModalOpen] = useState(false)
-  const [assignDraft, setAssignDraft] = useState({
-    unit: null,
-    lead_trainer_profile_id: '',
-    session_assistants_inherit: true,
-    session_assistant_profile_ids: [],
-  })
-  const [assignSaving, setAssignSaving] = useState(false)
-
-  const [formData, setFormData] = useState({
-    group_id: '',
-    planned_date: '',
-    planned_time_start: '',
-    planned_time_end: '',
-    planned_focus: '',
-    actual_date: '',
-    actual_time_start: '',
-    actual_time_end: '',
-    attendance_count: '',
-    status: 'planned',
-    notes: '',
-    trainer_notes: '',
-    debrief_completed: false,
-    sections: [defaultSection()],
-    ...sessionAssignDefaults()
-  })
-  const planningFormRef = useRef(formData)
-  planningFormRef.current = formData
-
-  const moduleApplyFilteredList = useMemo(() => {
-    const q = moduleApplySearchQuery.trim().toLowerCase().replace(/\s+/g, ' ')
-    const words = q ? q.split(' ').filter(Boolean) : []
-    const list = Array.isArray(moduleApplyList) ? moduleApplyList : []
-    if (!words.length) return list
-    return list.filter((m) => {
-      const blob = [
-        m.title,
-        m.summary,
-        m.goal,
-        m.target_group_notes,
-        m.deployment_context_notes,
-      ]
-        .map((x) => String(x ?? '').toLowerCase())
-        .join('\n')
-      return words.every((w) => blob.includes(w))
-    })
-  }, [moduleApplySearchQuery, moduleApplyList])
-
-  const modulePlacementSummary = useMemo(() => {
-    const secs = Array.isArray(formData.sections) ? formData.sections : []
-    let si =
-      typeof moduleApplySectionIx === 'number'
-        ? moduleApplySectionIx
-        : parseInt(String(moduleApplySectionIx), 10)
-    if (!Number.isFinite(si)) si = 0
-    si = Math.max(0, Math.min(si, secs.length ? secs.length - 1 : 0))
-    const cap = secs[si]?.items?.length ?? 0
-    let beforeIx = cap
-    if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
-      const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
-      if (Number.isFinite(zi)) beforeIx = Math.min(Math.max(0, zi), cap)
-    }
-    const rawTitle = (secs[si]?.title || '').trim()
-    const secTitle = rawTitle || `Abschnitt ${si + 1}`
-    let positionDescription
-    if (cap <= 0) positionDescription = 'als erste Einträge dieses Abschnitts'
-    else if (beforeIx <= 0) positionDescription = 'vor dem ersten Eintrag dieses Abschnitts'
-    else if (beforeIx >= cap) positionDescription = 'nach dem letzten Eintrag dieses Abschnitts'
-    else positionDescription = `unmittelbar vor Eintrag ${beforeIx + 1} (${cap} Einträge im Abschnitt)`
-    return { secTitle, positionDescription }
-  }, [formData.sections, moduleApplySectionIx, moduleApplyInsertSlot])
-
-  useEffect(() => {
-    if (!moduleApplyOpen || !moduleApplyFilteredList.length) return
-    if (moduleApplyFilteredList.some((m) => String(m.id) === String(moduleApplyModuleId))) return
-    setModuleApplyModuleId(String(moduleApplyFilteredList[0].id))
-  }, [moduleApplyOpen, moduleApplyFilteredList, moduleApplyModuleId])
-
-  const planningModalClubId = useMemo(() => {
-    const gid = Number(formData.group_id)
-    if (!Number.isFinite(gid) || gid < 1) return null
-    const g = groups.find((x) => Number(x.id) === gid)
-    if (!g || g.club_id == null || g.club_id === '') return null
-    const c = Number(g.club_id)
-    return Number.isFinite(c) ? c : null
-  }, [groups, formData.group_id])
-
-  const moduleApplyTargetItems = useMemo(() => {
-    const secs = formData.sections || []
-    if (!secs.length) return []
-    let ix =
-      typeof moduleApplySectionIx === 'number'
-        ? moduleApplySectionIx
-        : parseInt(String(moduleApplySectionIx), 10)
-    if (!Number.isFinite(ix)) ix = 0
-    if (ix < 0 || ix >= secs.length) return []
-    const sec = secs[ix]
-    return Array.isArray(sec?.items) ? sec.items : []
-  }, [formData.sections, moduleApplySectionIx])
-
-  const refreshPlanningSectionMeta = useCallback(async () => {
-    const next = await enrichSectionsWithVariants(planningFormRef.current.sections)
-    setFormData((prev) => ({ ...prev, sections: next }))
-  }, [])
-
-  const loadPlanTemplates = useCallback(async () => {
-    try {
-      const tpl = await api.listTrainingPlanTemplates()
-      setPlanTemplates(tpl)
-    } catch (e) {
-      console.error('Vorlagen laden:', e)
-    }
-  }, [])
-
-  const loadData = useCallback(async () => {
-    try {
-      const groupsData = await api.listTrainingGroups({ status: 'active' })
-      setGroups(groupsData)
-      await loadPlanTemplates()
-
-      if (groupsData.length > 0) {
-        setSelectedGroupId((prev) => {
-          const prevStr = prev != null && prev !== '' ? String(prev) : ''
-          const stillThere = prevStr && groupsData.some((g) => String(g.id) === prevStr)
-          if (stillThere) return prevStr
-          const ownGroup = groupsData.find((g) => g.trainer_id === user?.id)
-          if (ownGroup) return String(ownGroup.id)
-          if (groupsData.length === 1) return String(groupsData[0].id)
-          return ''
-        })
-      } else {
-        setSelectedGroupId('')
-      }
-    } catch (err) {
-      console.error('Failed to load data:', err)
-      toast.error('Fehler beim Laden: ' + err.message)
-    } finally {
-      setLoading(false)
-    }
-  }, [user?.id, loadPlanTemplates])
-
-  const loadUnits = useCallback(async () => {
-    if (!selectedGroupId) return
-    let start = startDate
-    let end = endDate
-    if (planView === 'calendar') {
-      const r = getCalendarGridRange(calendarMonthStr)
-      start = r.gridStart
-      end = r.gridEnd
-    }
-    const gid = parseInt(selectedGroupId, 10)
-    const groupRow = groups.find((g) => g.id === gid)
-    const clubId = groupRow?.club_id
-    try {
-      const filters = {
-        start_date: start,
-        end_date: end
-      }
-      if (assignedToMeOnly) {
-        filters.assigned_to_me = true
-      }
-      if (planScope === 'club' && clubId) {
-        filters.club_id = clubId
-      } else {
-        filters.group_id = gid
-      }
-      const unitsData = await api.listTrainingUnits(filters)
-      setUnits(unitsData)
-    } catch (err) {
-      console.error('Failed to load units:', err)
-    }
-  }, [
-    selectedGroupId,
-    groups,
-    startDate,
-    endDate,
-    planView,
-    calendarMonthStr,
-    planScope,
-    assignedToMeOnly
-  ])
-
-  useEffect(() => {
-    loadData()
-  }, [loadData, tenantClubDepKey])
-
-  useEffect(() => {
-    if (selectedGroupId) {
-      loadUnits()
-    }
-  }, [selectedGroupId, loadUnits])
-
-  const selectedGroupClubIdMemo = useMemo(() => {
-    const g = groups.find((gr) => gr.id === parseInt(selectedGroupId, 10))
-    return g?.club_id != null ? Number(g.club_id) : null
-  }, [groups, selectedGroupId])
-
-  const canClubOrgTraining = useMemo(() => {
-    const r = (user?.role || '').toLowerCase()
-    if (r === 'admin' || r === 'superadmin') return true
-    if (selectedGroupClubIdMemo == null || !Number.isFinite(selectedGroupClubIdMemo)) return false
-    const row = activeClubMemberships(user?.clubs).find((c) => Number(c.id) === selectedGroupClubIdMemo)
-    return Array.isArray(row?.roles) && row.roles.includes('club_admin')
-  }, [user?.role, user?.clubs, selectedGroupClubIdMemo])
-
-  const clubAdminClubIdSet = useMemo(() => {
-    const ids = []
-    for (const c of activeClubMemberships(user?.clubs)) {
-      if (Array.isArray(c.roles) && c.roles.includes('club_admin')) {
-        const id = Number(c.id)
-        if (Number.isFinite(id)) ids.push(id)
-      }
-    }
-    return new Set(ids)
-  }, [user?.clubs])
-
-  useEffect(() => {
-    const gid = parseInt(formData.group_id || selectedGroupId || '0', 10)
-    const gModal = Number.isFinite(gid) && gid >= 1 ? groups.find((x) => x.id === gid) : null
-    const clubForModal = gModal?.club_id != null ? Number(gModal.club_id) : null
-
-    let assignModalClubId = null
-    if (assignModalOpen && assignDraft.unit?.group_id != null) {
-      const ug = Number(assignDraft.unit.group_id)
-      const gAssign = Number.isFinite(ug) ? groups.find((x) => x.id === ug) : null
-      if (gAssign?.club_id != null) assignModalClubId = Number(gAssign.club_id)
-    }
-
-    const loadClubId =
-      showModal && clubForModal != null && Number.isFinite(clubForModal)
-        ? clubForModal
-        : assignModalOpen && assignModalClubId != null && Number.isFinite(assignModalClubId)
-          ? assignModalClubId
-          : canClubOrgTraining && selectedGroupClubIdMemo != null && Number.isFinite(selectedGroupClubIdMemo)
-            ? selectedGroupClubIdMemo
-            : null
-
-    if (loadClubId == null || !Number.isFinite(loadClubId)) {
-      setClubDirectory([])
-      return undefined
-    }
-    let cancelled = false
-    ;(async () => {
-      try {
-        const d = await api.clubMembersDirectory(loadClubId)
-        if (!cancelled) setClubDirectory(Array.isArray(d) ? d : [])
-      } catch (err) {
-        if (!cancelled) {
-          console.error('Mitgliederverzeichnis:', err)
-          setClubDirectory([])
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [
-    showModal,
-    assignModalOpen,
-    assignDraft.unit,
-    formData.group_id,
-    selectedGroupId,
-    groups,
-    canClubOrgTraining,
-    selectedGroupClubIdMemo,
-  ])
-
-  useEffect(() => {
-    if (!frameworkImportOpen) return
-    let cancelled = false
-    ;(async () => {
-      try {
-        const list = await api.listTrainingFrameworkPrograms()
-        if (!cancelled) setFrameworkProgramsList(Array.isArray(list) ? list : [])
-      } catch (e) {
-        if (!cancelled) {
-          console.error('Rahmenprogramme laden:', e)
-          setFrameworkProgramsList([])
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [frameworkImportOpen])
-
-  const openFrameworkImportModal = useCallback(() => {
-    setFwImportProgramId('')
-    setFwImportDetail(null)
-    setFwImportSelectedSlots(new Set())
-    setFwImportSlotDates({})
-    setFwImportStartDate(new Date().toISOString().split('T')[0])
-    setFwImportIntervalDays(7)
-    setFrameworkImportOpen(true)
-  }, [])
-
-  const onFwImportProgramChange = async (idStr) => {
-    setFwImportProgramId(idStr)
-    if (!idStr) {
-      setFwImportDetail(null)
-      return
-    }
-    setFwImportLoading(true)
-    try {
-      const d = await api.getTrainingFrameworkProgram(parseInt(idStr, 10))
-      setFwImportDetail(d)
-      setFwImportSelectedSlots(new Set())
-      setFwImportSlotDates({})
-    } catch (e) {
-      toast.error(e.message || 'Rahmenprogramm laden fehlgeschlagen')
-      setFwImportDetail(null)
-    } finally {
-      setFwImportLoading(false)
-    }
-  }
-
-  const toggleFwImportSlot = (slot) => {
-    if (!slot?.blueprint_training_unit_id) return
-    const sid = slot.id
-    setFwImportSelectedSlots((prev) => {
-      const n = new Set(prev)
-      if (n.has(sid)) n.delete(sid)
-      else n.add(sid)
-      return n
-    })
-  }
-
-  const applyFwImportDateSuggestions = () => {
-    if (!fwImportDetail?.slots?.length) return
-    const sorted = [...fwImportDetail.slots].sort(
-      (a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)
-    )
-    let offset = 0
-    const iv = Math.max(0, Number(fwImportIntervalDays) || 0)
-    const next = {}
-    for (const s of sorted) {
-      if (!fwImportSelectedSlots.has(s.id)) continue
-      if (!s.blueprint_training_unit_id) continue
-      next[String(s.id)] = addDaysIsoDate(fwImportStartDate, offset)
-      offset += iv
-    }
-    setFwImportSlotDates((prev) => ({ ...prev, ...next }))
-  }
-
-  const submitFrameworkImport = async () => {
-    if (!selectedGroupId) {
-      toast.error('Bitte zuerst eine Trainingsgruppe wählen.')
-      return
-    }
-    const gid = parseInt(selectedGroupId, 10)
-    if (!fwImportDetail?.slots?.length) return
-    const sorted = [...fwImportDetail.slots].sort(
-      (a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)
-    )
-    const picks = sorted.filter(
-      (s) => fwImportSelectedSlots.has(s.id) && s.blueprint_training_unit_id
-    )
-    if (!picks.length) {
-      toast.error('Bitte mindestens eine Session mit Ablauf (Blueprint) auswählen.')
-      return
-    }
-    for (const s of picks) {
-      const key = String(s.id)
-      const date = fwImportSlotDates[key] || fwImportStartDate
-      if (!date) {
-        toast.error('Bitte für jede ausgewählte Session ein Datum setzen (oder Datumsvorschläge nutzen).')
-        return
-      }
-    }
-    setFwImportSubmitting(true)
-    try {
-      for (const s of picks) {
-        const key = String(s.id)
-        const date = fwImportSlotDates[key] || fwImportStartDate
-        await api.createTrainingUnitFromFrameworkSlot({
-          group_id: gid,
-          planned_date: date,
-          framework_slot_id: s.id,
-        })
-      }
-      setFrameworkImportOpen(false)
-      await loadUnits()
-    } catch (e) {
-      toast.error(e.message || 'Übernahme fehlgeschlagen')
-    } finally {
-      setFwImportSubmitting(false)
-    }
-  }
-
-  const frameworkLineageText = (unit) => {
-    const fpTitle = (unit.origin_framework_program_title || '').trim() || 'Rahmenprogramm'
-    const st = (unit.origin_framework_slot_title || '').trim()
-    const idx = unit.origin_framework_slot_sort_order
-    const slotBit =
-      st || (typeof idx === 'number' ? `Session ${idx + 1}` : 'Session')
-    return { fpTitle, slotBit, fpId: unit.origin_framework_program_id }
-  }
-
-  const handleCreate = () => {
-    if (!selectedGroupId) {
-      toast.error('Bitte wähle zuerst eine Trainingsgruppe')
-      return
-    }
-    const group = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
-    setEditingUnit(null)
-    setDraftPlanTemplateId('')
-    setFormData({
-      group_id: selectedGroupId,
-      planned_date: today,
-      planned_time_start: group?.time_start?.slice(0, 5) || '',
-      planned_time_end: group?.time_end?.slice(0, 5) || '',
-      planned_focus: '',
-      actual_date: '',
-      actual_time_start: '',
-      actual_time_end: '',
-      attendance_count: '',
-      status: 'planned',
-      notes: '',
-      trainer_notes: '',
-      debrief_completed: false,
-      sections: [defaultSection('Hauptteil')],
-      ...sessionAssignDefaults()
-    })
-    setSectionsEditMode('planning')
-    setShowModal(true)
-  }
-
-  const handleCreateForDate = (isoDay) => {
-    if (!selectedGroupId) {
-      toast.error('Bitte wähle zuerst eine Trainingsgruppe')
-      return
-    }
-    const group = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
-    setEditingUnit(null)
-    setDraftPlanTemplateId('')
-    setFormData({
-      group_id: selectedGroupId,
-      planned_date: isoDay,
-      planned_time_start: group?.time_start?.slice(0, 5) || '',
-      planned_time_end: group?.time_end?.slice(0, 5) || '',
-      planned_focus: '',
-      actual_date: '',
-      actual_time_start: '',
-      actual_time_end: '',
-      attendance_count: '',
-      status: 'planned',
-      notes: '',
-      trainer_notes: '',
-      debrief_completed: false,
-      sections: [defaultSection('Hauptteil')],
-      ...sessionAssignDefaults()
-    })
-    setSectionsEditMode('planning')
-    setShowModal(true)
-  }
-
-  const applyTemplateFromSelect = async (templateId) => {
-    setDraftPlanTemplateId(templateId)
-    if (!templateId) return
-    try {
-      const tpl = await api.getTrainingPlanTemplate(parseInt(templateId, 10))
-      setFormData((fd) => ({
-        ...fd,
-        sections: (tpl.sections || []).length
-          ? tpl.sections.map((s) => ({
-              title: s.title,
-              guidance_notes: s.guidance_text || '',
-              items: []
-            }))
-          : [defaultSection()]
-      }))
-    } catch (err) {
-      toast.error('Vorlage laden: ' + err.message)
-    }
-  }
-
-  const handleEdit = useCallback(async (unit) => {
-    try {
-      const fullUnit = await api.getTrainingUnit(unit.id)
-      setEditingUnit(fullUnit)
-      setDraftPlanTemplateId(fullUnit.plan_template_id ? String(fullUnit.plan_template_id) : '')
-      let sections = normalizeUnitToForm(fullUnit)
-      sections = await enrichSectionsWithVariants(sections)
-      setFormData({
-        group_id: fullUnit.group_id,
-        planned_date: fullUnit.planned_date || '',
-        planned_time_start: fullUnit.planned_time_start?.slice(0, 5) || '',
-        planned_time_end: fullUnit.planned_time_end?.slice(0, 5) || '',
-        planned_focus: fullUnit.planned_focus || '',
-        actual_date: fullUnit.actual_date || '',
-        actual_time_start: fullUnit.actual_time_start?.slice(0, 5) || '',
-        actual_time_end: fullUnit.actual_time_end?.slice(0, 5) || '',
-        attendance_count: fullUnit.attendance_count ?? '',
-        status: fullUnit.status || 'planned',
-        notes: fullUnit.notes || '',
-        trainer_notes: fullUnit.trainer_notes || '',
-        debrief_completed: Boolean(fullUnit.debrief_completed_at),
-        sections,
-        lead_trainer_profile_id:
-          fullUnit.lead_trainer_profile_id != null && fullUnit.lead_trainer_profile_id !== ''
-            ? String(fullUnit.lead_trainer_profile_id)
-            : '',
-        session_assistants_inherit:
-          fullUnit.assistant_trainer_profile_ids == null ||
-          fullUnit.assistant_trainer_profile_ids === undefined,
-        session_assistant_profile_ids: (() => {
-          const efLead =
-            fullUnit.effective_lead_trainer_profile_id != null
-              ? Number(fullUnit.effective_lead_trainer_profile_id)
-              : null
-          let xs = toNumList(fullUnit.assistant_trainer_profile_ids)
-          if (efLead != null && Number.isFinite(efLead)) xs = xs.filter((id) => id !== efLead)
-          return xs
-        })(),
-      })
-      setSectionsEditMode(fullUnit.status === 'completed' ? 'debrief' : 'planning')
-      setShowModal(true)
-    } catch (err) {
-      toast.error('Fehler beim Laden: ' + err.message)
-      throw err
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!user?.id || loading) return
-    const uid = searchParams.get('unit')
-    if (!uid) {
-      unitDeepLinkHandledRef.current = null
-      return
-    }
-    if (unitDeepLinkHandledRef.current === uid) return
-    const idNum = parseInt(uid, 10)
-    if (!Number.isFinite(idNum)) return
-    unitDeepLinkHandledRef.current = uid
-    handleEdit({ id: idNum })
-      .then(() => {
-        setSearchParams(
-          (prev) => {
-            const next = new URLSearchParams(prev)
-            next.delete('unit')
-            next.delete('debrief')
-            return next
-          },
-          { replace: true }
-        )
-      })
-      .catch(() => {
-        unitDeepLinkHandledRef.current = null
-        setSearchParams(
-          (prev) => {
-            const next = new URLSearchParams(prev)
-            next.delete('unit')
-            next.delete('debrief')
-            return next
-          },
-          { replace: true }
-        )
-      })
-  }, [user?.id, loading, searchParams, handleEdit, setSearchParams])
-
-  const handleSaveAsTemplate = async () => {
-    const name = window.prompt('Name für die neue Trainingsvorlage (nur Abschnitts-Gliederung):')
-    if (!name?.trim()) return
-    try {
-      await api.createTrainingPlanTemplate({
-        name: name.trim(),
-        sections: formData.sections.map((s) => ({
-          title: s.title || 'Abschnitt',
-          guidance_text: s.guidance_notes?.trim() ? s.guidance_notes.trim() : null
-        }))
-      })
-      await loadPlanTemplates()
-      toast.success('Vorlage gespeichert.')
-    } catch (err) {
-      toast.error('Speichern: ' + err.message)
-    }
-  }
-
-  const openModuleApplyModal = useCallback(async (placement) => {
-    setModuleApplyErr('')
-    setModuleApplySearchQuery('')
-    const placementLocked =
-      placement != null &&
-      typeof placement.sectionIndex === 'number' &&
-      typeof placement.insertBeforeIndex === 'number'
-    setModuleApplyPlacementLocked(placementLocked)
-    const secs = planningFormRef.current?.sections ?? []
-    let secIx = 0
-    let before = 0
-    if (secs.length) {
-      if (placement && typeof placement.sectionIndex === 'number') {
-        secIx = Math.min(Math.max(0, placement.sectionIndex), secs.length - 1)
-        const items = Array.isArray(secs[secIx]?.items) ? secs[secIx].items : []
-        const cap = items.length
-        if (typeof placement.insertBeforeIndex === 'number' && Number.isFinite(placement.insertBeforeIndex)) {
-          before = Math.min(Math.max(0, placement.insertBeforeIndex), cap)
-        } else before = cap
-      } else {
-        const items = Array.isArray(secs[0]?.items) ? secs[0].items : []
-        before = items.length
-        secIx = 0
-      }
-    }
-    setModuleApplySectionIx(secIx)
-    setModuleApplyInsertSlot(`before:${before}`)
-    setModuleApplyOpen(true)
-    try {
-      const list = await api.listTrainingModules()
-      const arr = Array.isArray(list) ? list : []
-      setModuleApplyList(arr)
-      setModuleApplyModuleId(arr.length ? String(arr[0].id) : '')
-    } catch (e) {
-      setModuleApplyErr(e.message || 'Module konnten nicht geladen werden')
-      setModuleApplyList([])
-    }
-  }, [])
-
-  const handleApplyTrainingModuleConfirm = useCallback(async () => {
-    const mid = parseInt(moduleApplyModuleId, 10)
-    if (!Number.isFinite(mid)) {
-      toast.error('Bitte ein Trainingsmodul wählen.')
-      return
-    }
-    let secIx = parseInt(String(moduleApplySectionIx), 10)
-    if (!Number.isFinite(secIx)) secIx = 0
-
-    const baseSections = planningFormRef.current?.sections ?? formData.sections ?? []
-    if (!baseSections.length) {
-      toast.error('Keine Abschnitte im Formular.')
-      return
-    }
-    if (secIx < 0 || secIx >= baseSections.length) secIx = 0
-
-    const secItems = Array.isArray(baseSections[secIx]?.items) ? baseSections[secIx].items : []
-    const itemCap = secItems.length
-    let insertBefore = itemCap
-    if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
-      const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
-      if (Number.isFinite(zi)) insertBefore = Math.min(Math.max(0, zi), itemCap)
-    }
-
-    setModuleApplyBusy(true)
-    setModuleApplyErr('')
-    try {
-      const detail = await api.getTrainingModule(mid)
-      let nextSections = await insertTrainingModuleIntoPlanningSections({
-        sections: baseSections,
-        moduleDetail: detail,
-        sectionIndex: secIx,
-        insertBeforeItemIndex: insertBefore,
-      })
-      nextSections = await enrichSectionsWithVariants(nextSections)
-      setFormData((fd) => ({ ...fd, sections: nextSections }))
-      setModuleApplyOpen(false)
-      setModuleApplyPlacementLocked(false)
-    } catch (e) {
-      setModuleApplyErr(e.message || 'Einfügen fehlgeschlagen')
-    } finally {
-      setModuleApplyBusy(false)
-    }
-  }, [moduleApplyModuleId, moduleApplySectionIx, moduleApplyInsertSlot])
-
-  useEffect(() => {
-    if (!moduleApplyOpen) {
-      setModulePickPreview({
-        loading: false,
-        moduleId: '',
-        exercises: [],
-        notes: 0,
-        err: '',
-      })
-      return undefined
-    }
-    const mid = parseInt(String(moduleApplyModuleId), 10)
-    if (!Number.isFinite(mid) || mid < 1) {
-      setModulePickPreview({
-        loading: false,
-        moduleId: '',
-        exercises: [],
-        notes: 0,
-        err: '',
-      })
-      return undefined
-    }
-    let cancelled = false
-    setModulePickPreview({
-      loading: true,
-      moduleId: String(mid),
-      exercises: [],
-      notes: 0,
-      err: '',
-    })
-    ;(async () => {
-      try {
-        const detail = await api.getTrainingModule(mid)
-        if (cancelled) return
-        const itemsSorted = [...(detail.items ?? [])].sort(
-          (a, b) => (a.order_index ?? 0) - (b.order_index ?? 0)
-        )
-        const uniqueEx = new Set()
-        let notes = 0
-        for (const row of itemsSorted) {
-          if ((row.item_type || '') !== 'note') {
-            const eid = row.exercise_id
-            if (eid) uniqueEx.add(Number(eid))
-            continue
-          }
-          const b = String(row.note_body ?? '').trim()
-          if (b === '---') continue
-          notes += 1
-        }
-        const titleById = new Map()
-        await Promise.all(
-          [...uniqueEx].map(async (eid) => {
-            try {
-              const ex = await api.getExercise(eid)
-              titleById.set(eid, (ex?.title || '').trim() || `Übung #${eid}`)
-            } catch {
-              titleById.set(eid, `Übung #${eid}`)
-            }
-          })
-        )
-        if (cancelled) return
-        const exTitlesInOrder = []
-        for (const row of itemsSorted) {
-          if ((row.item_type || '') !== 'exercise') continue
-          const eid = Number(row.exercise_id)
-          if (!Number.isFinite(eid)) continue
-          exTitlesInOrder.push(titleById.get(eid) || `Übung #${eid}`)
-        }
-        setModulePickPreview({
-          loading: false,
-          moduleId: String(mid),
-          exercises: exTitlesInOrder,
-          notes,
-          err: '',
-        })
-      } catch (e) {
-        if (!cancelled) {
-          setModulePickPreview({
-            loading: false,
-            moduleId: String(mid),
-            exercises: [],
-            notes: 0,
-            err: e?.message || 'Vorschau fehlgeschlagen',
-          })
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [moduleApplyOpen, moduleApplyModuleId])
-
-  const handleTakeLead = async (unit) => {
-    if (!user?.id) return
-    try {
-      await api.updateTrainingUnit(unit.id, { lead_trainer_profile_id: user.id })
-      await loadUnits()
-    } catch (err) {
-      toast.error(err.message || 'Leitung konnte nicht übernommen werden')
-    }
-  }
-
-  const openTrainerAssignModal = (unit) => {
-    const effLead =
-      unit.effective_lead_trainer_profile_id != null
-        ? Number(unit.effective_lead_trainer_profile_id)
-        : null
-    let coIds = toNumList(unit.assistant_trainer_profile_ids)
-    if (effLead != null && Number.isFinite(effLead)) {
-      coIds = coIds.filter((id) => id !== effLead)
-    }
-    setAssignDraft({
-      unit,
-      lead_trainer_profile_id:
-        unit.lead_trainer_profile_id != null && unit.lead_trainer_profile_id !== ''
-          ? String(unit.lead_trainer_profile_id)
-          : '',
-      session_assistants_inherit:
-        unit.assistant_trainer_profile_ids == null || unit.assistant_trainer_profile_ids === undefined,
-      session_assistant_profile_ids: coIds,
-    })
-    setAssignModalOpen(true)
-  }
-
-  const saveTrainerAssignModal = async () => {
-    if (!assignDraft.unit) return
-    setAssignSaving(true)
-    try {
-      const payload = {}
-      const leadStr = String(assignDraft.lead_trainer_profile_id || '').trim()
-      if (leadStr) payload.lead_trainer_profile_id = parseInt(leadStr, 10)
-      else payload.lead_trainer_profile_id = null
-      if (assignDraft.session_assistants_inherit) {
-        payload.assistant_trainer_profile_ids = null
-      } else {
-        payload.assistant_trainer_profile_ids = [...assignDraft.session_assistant_profile_ids].sort((a, b) => a - b)
-      }
-      await api.updateTrainingUnit(assignDraft.unit.id, payload)
-      setAssignModalOpen(false)
-      setAssignDraft({
-        unit: null,
-        ...sessionAssignDefaults(),
-      })
-      await loadUnits()
-    } catch (err) {
-      toast.error(err.message || 'Zuweisung konnte nicht gespeichert werden')
-    } finally {
-      setAssignSaving(false)
-    }
-  }
-
-  const handleDelete = async (unit) => {
-    if (!confirm(`Trainingseinheit vom ${unit.planned_date} wirklich löschen?`)) return
-    try {
-      await api.deleteTrainingUnit(unit.id)
-      await loadUnits()
-    } catch (err) {
-      toast.error('Fehler beim Löschen: ' + err.message)
-    }
-  }
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!formData.group_id || !formData.planned_date) {
-      toast.error('Gruppe und Datum sind Pflichtfelder')
-      return
-    }
-    try {
-      const sectionsPayload = buildSectionsPayload(formData.sections)
-      const payload = {
-        planned_date: formData.planned_date,
-        planned_time_start: formData.planned_time_start || null,
-        planned_time_end: formData.planned_time_end || null,
-        planned_focus: formData.planned_focus || null,
-        actual_date: formData.actual_date || null,
-        actual_time_start: formData.actual_time_start || null,
-        actual_time_end: formData.actual_time_end || null,
-        attendance_count: formData.attendance_count ? parseInt(formData.attendance_count, 10) : null,
-        status: formData.status || 'planned',
-        notes: formData.notes || null,
-        trainer_notes: formData.trainer_notes || null,
-        sections: sectionsPayload
-      }
-      if (editingUnit) {
-        payload.debrief_completed =
-          (formData.status || '') === 'completed' ? !!formData.debrief_completed : false
-      }
-      const leadStr = String(formData.lead_trainer_profile_id || '').trim()
-      if (leadStr) {
-        payload.lead_trainer_profile_id = parseInt(leadStr, 10)
-      } else if (editingUnit) {
-        payload.lead_trainer_profile_id = null
-      }
-      if (formData.session_assistants_inherit) {
-        if (editingUnit) payload.assistant_trainer_profile_ids = null
-      } else {
-        payload.assistant_trainer_profile_ids = [...formData.session_assistant_profile_ids].sort(
-          (a, b) => a - b
-        )
-      }
-      if (!editingUnit) {
-        payload.group_id = parseInt(formData.group_id, 10)
-        if (draftPlanTemplateId) {
-          payload.plan_template_id = parseInt(draftPlanTemplateId, 10)
-        }
-      }
-
-      if (editingUnit) {
-        await api.updateTrainingUnit(editingUnit.id, payload)
-      } else {
-        await api.createTrainingUnit(payload)
-      }
-      setShowModal(false)
-      await loadUnits()
-    } catch (err) {
-      toast.error('Fehler beim Speichern: ' + err.message)
-    }
-  }
-
-  const updateFormField = (field, value) => {
-    setFormData((prev) => {
-      if (field !== 'lead_trainer_profile_id') {
-        const patch = { ...prev, [field]: value }
-        if (field === 'status' && value !== 'completed') {
-          patch.debrief_completed = false
-        }
-        return patch
-      }
-      const ts = typeof value === 'string' ? value.trim() : String(value ?? '').trim()
-      const strip = new Set()
-      if (ts !== '') {
-        const nid = parseInt(ts, 10)
-        if (Number.isFinite(nid)) strip.add(nid)
-      } else {
-        const gidParsed = parseInt(prev.group_id || selectedGroupId || '0', 10)
-        const gr =
-          Number.isFinite(gidParsed) && gidParsed >= 1
-            ? groups.find((xg) => xg.id === gidParsed)
-            : null
-        if (gr?.trainer_id != null) {
-          const ht = Number(gr.trainer_id)
-          if (Number.isFinite(ht)) strip.add(ht)
-        }
-      }
-      const assistants = prev.session_assistant_profile_ids.filter((id) => !strip.has(id))
-      return { ...prev, lead_trainer_profile_id: value, session_assistant_profile_ids: assistants }
-    })
-  }
-
-  const calendarGridDays = useMemo(() => {
-    const r = getCalendarGridRange(calendarMonthStr)
-    return enumerateIsoDays(r.gridStart, r.gridEnd)
-  }, [calendarMonthStr])
-
-  const unitsByPlannedDate = useMemo(() => {
-    const m = new Map()
-    for (const u of units) {
-      const raw = u.planned_date
-      if (!raw) continue
-      const key = String(raw).slice(0, 10)
-      if (!m.has(key)) m.set(key, [])
-      m.get(key).push(u)
-    }
-    return m
-  }, [units])
-
-  const calendarMonthTitle = useMemo(() => {
-    const p = calendarMonthStr.split('-').map(Number)
-    const y = p[0]
-    const mo = p[1]
-    if (!y || !mo) return ''
-    return new Date(y, mo - 1, 1).toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })
-  }, [calendarMonthStr])
-
-  const mayConfigureSessionAssignments = useCallback(
-    (unit) => {
-      if (!unit) return false
-      const pid = Number(user?.id)
-      if (!Number.isFinite(pid)) return false
-      const r = (user?.role || '').toLowerCase()
-      if (r === 'admin' || r === 'superadmin') return true
-
-      const gClub = unit.group_club_id != null ? Number(unit.group_club_id) : null
-      if (Number.isFinite(gClub) && clubAdminClubIdSet.has(gClub)) return true
-
-      const gid = Number(unit.group_id)
-      const g = groups.find((gr) => gr.id === gid)
-      if (!g) return false
-
-      const cb = unit.created_by != null ? Number(unit.created_by) : NaN
-      if (Number.isFinite(cb) && cb === pid) return true
-
-      const ht = g.trainer_id != null ? Number(g.trainer_id) : NaN
-      if (Number.isFinite(ht) && ht === pid) return true
-
-      return normalizeGroupCoTrainerIds(g.co_trainer_ids).includes(pid)
-    },
-    [user?.id, user?.role, groups, clubAdminClubIdSet]
-  )
-
-  if (loading) {
-    return (
-      <div className="app-page" style={{ padding: '2rem 0', textAlign: 'center' }}>
-        <div className="spinner"></div>
-        <p>Laden...</p>
-      </div>
-    )
-  }
-
-  const selectedGroup = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
-
-  const gidTrainerForm = parseInt(formData.group_id || selectedGroupId || '0', 10)
-  const groupForTrainerForm =
-    Number.isFinite(gidTrainerForm) && gidTrainerForm >= 1
-      ? groups.find((gr) => gr.id === gidTrainerForm)
-      : null
-
-  let formTrainerAssignLeadExcludeId = null
-  if (groupForTrainerForm?.trainer_id != null) formTrainerAssignLeadExcludeId = Number(groupForTrainerForm.trainer_id)
-  const leadDraftTrim = String(formData.lead_trainer_profile_id || '').trim()
-  if (leadDraftTrim !== '') {
-    const nl = parseInt(leadDraftTrim, 10)
-    if (Number.isFinite(nl)) formTrainerAssignLeadExcludeId = nl
-  }
-  if (editingUnit?.effective_lead_trainer_profile_id != null && leadDraftTrim === '') {
-    const el = Number(editingUnit.effective_lead_trainer_profile_id)
-    if (Number.isFinite(el)) formTrainerAssignLeadExcludeId = el
-  }
-
-  const clubDirectoryForCo = filterDirectoryExcludingLead(clubDirectory, formTrainerAssignLeadExcludeId)
-
-  let assignExcludeLeadPid = null
-  if (assignModalOpen && assignDraft.unit) {
-    const dl = String(assignDraft.lead_trainer_profile_id || '').trim()
-    if (dl !== '') {
-      const n = parseInt(dl, 10)
-      assignExcludeLeadPid = Number.isFinite(n) ? n : null
-    } else if (assignDraft.unit.effective_lead_trainer_profile_id != null) {
-      const n = Number(assignDraft.unit.effective_lead_trainer_profile_id)
-      assignExcludeLeadPid = Number.isFinite(n) ? n : null
-    }
-  }
-  const clubDirectoryForAssignCo = filterDirectoryExcludingLead(clubDirectory, assignExcludeLeadPid)
-
-  return (
-    <div className="app-page">
-        <h1 style={{ marginBottom: '0.35rem' }}>Trainingsplanung</h1>
-
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            gap: '12px',
-            marginBottom: '1rem',
-          }}
-        >
-          <span
-            className="form-label"
-            style={{
-              marginBottom: 0,
-              fontSize: '0.9rem',
-              color: 'var(--text2)',
-            }}
-          >
-            Ansicht
-          </span>
-          <PageSectionNav
-            semantics="toggle"
-            ariaLabel="Darstellung Liste oder Kalender"
-            value={planView}
-            onChange={(id) => {
-              if (id === 'calendar') {
-                setPlanView('calendar')
-                setCalendarMonthStr((prev) => {
-                  const fromList = (startDate || '').slice(0, 7)
-                  if (/^\d{4}-\d{2}$/.test(fromList)) return fromList
-                  return prev || new Date().toISOString().slice(0, 7)
-                })
-              } else {
-                setPlanView('list')
-              }
-            }}
-            items={[
-              { id: 'list', label: 'Liste' },
-              { id: 'calendar', label: 'Kalender' },
-            ]}
-            className="page-section-nav--inline planning-ansicht-nav"
-          />
-          <span style={{ fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.35, maxWidth: '22rem' }}>
-            {planView === 'list'
-              ? 'Zeitraum unten mit Von/Bis filtern.'
-              : 'Monat unten wechseln; Termine erscheinen im Raster.'}
-          </span>
-        </div>
-
-        <p style={{ color: 'var(--text2)', fontSize: '0.95rem', marginBottom: '1.25rem' }}>
-          Wähle eine Trainingsgruppe und lege <strong>Trainingseinheiten</strong> für den Zeitraum an (Inhalt: Abschnitte
-          und Übungen).
-        </p>
-
-        <div className="card" style={{ marginBottom: '1.25rem', padding: '12px 14px' }}>
-          <p style={{ margin: '0 0 0.5rem', fontSize: '0.92rem', color: 'var(--text2)' }}>
-            Mehrere Einheiten strukturieren auf einmal:{' '}
-            <Link to="/planning/framework-programs" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
-              Trainingsrahmenprogramme
-            </Link>{' '}
-            (Ziele, Sessions, Vorlagen‑Ablauf).
-          </p>
-          <p style={{ margin: 0, fontSize: '0.92rem', color: 'var(--text2)' }}>
-            Wiederverwendbare Blöcke innerhalb einer Einheit:{' '}
-            <Link to="/planning/training-modules" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
-              Trainingsmodule
-            </Link>{' '}
-            (übernahme als Kopie beim Bearbeiten einer Einheit).
-          </p>
-        </div>
-        {!loading && groups.length === 0 && (
-          <div
-            className="card"
-            style={{
-              marginBottom: '1.25rem',
-              borderLeft: '4px solid var(--accent)',
-              padding: '1rem 1.25rem'
-            }}
-          >
-            <h2 style={{ fontSize: '1.1rem', marginBottom: '0.5rem' }}>Erst Verein & Gruppe anlegen</h2>
-            <p style={{ color: 'var(--text2)', marginBottom: '0.85rem', lineHeight: 1.5 }}>
-              Ohne Trainingsgruppe kann hier nichts gebucht werden. Unter <strong>Vereine</strong> legst du einen Verein an
-              (kurzer Name genügt), optional eine Sparte, dann eine <strong>Trainingsgruppe</strong>. Wochentage, feste Zeiten oder
-              Eigenschaften sind optional und kannst du später ergänzen.
-            </p>
-            <Link to="/clubs" className="btn btn-primary" style={{ textDecoration: 'none' }}>
-              Zu Vereinen & Trainingsgruppen
-            </Link>
-          </div>
-        )}
-
-        <div className="card" style={{ marginBottom: '1.5rem' }}>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-              gap: '1rem'
-            }}
-          >
-            <div>
-              <label className="form-label">Trainingsgruppe</label>
-              <select
-                className="form-input"
-                value={selectedGroupId}
-                onChange={(e) => setSelectedGroupId(e.target.value)}
-              >
-                <option value="">Bitte wählen</option>
-                {groups.map((g) => (
-                  <option key={g.id} value={g.id}>
-                    {g.name} ({g.club_name})
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {planView === 'list' ? (
-              <>
-                <div>
-                  <label className="form-label">Von</label>
-                  <input
-                    type="date"
-                    className="form-input"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                  />
-                </div>
-
-                <div>
-                  <label className="form-label">Bis</label>
-                  <input
-                    type="date"
-                    className="form-input"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                  />
-                </div>
-              </>
-            ) : (
-              <div
-                style={{
-                  gridColumn: '1 / -1',
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  alignItems: 'center',
-                  gap: '0.65rem',
-                }}
-              >
-                <button
-                  type="button"
-                  className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                  aria-label="Voriger Monat"
-                  onClick={() => setCalendarMonthStr((prev) => shiftCalendarMonth(prev, -1))}
-                >
-                  ←
-                </button>
-                <span
-                  style={{
-                    fontWeight: 600,
-                    fontSize: '1rem',
-                    flex: '1 1 auto',
-                    textAlign: 'center',
-                    minWidth: '12rem',
-                  }}
-                >
-                  {calendarMonthTitle}
-                </span>
-                <button
-                  type="button"
-                  className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                  aria-label="Nächster Monat"
-                  onClick={() => setCalendarMonthStr((prev) => shiftCalendarMonth(prev, 1))}
-                >
-                  →
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  style={{ whiteSpace: 'nowrap', padding: '0.35rem 0.65rem', fontSize: '0.85rem' }}
-                  onClick={() => setCalendarMonthStr(new Date().toISOString().slice(0, 7))}
-                >
-                  Aktueller Monat
-                </button>
-              </div>
-            )}
-
-            <div
-              style={{
-                gridColumn: '1 / -1',
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-                gap: '12px',
-              }}
-            >
-              <span className="form-label" style={{ marginBottom: 0, alignSelf: 'center' }}>
-                Einblenden
-              </span>
-              <PageSectionNav
-                semantics="toggle"
-                ariaLabel="Gruppe oder ganzer Verein"
-                value={planScope}
-                onChange={setPlanScope}
-                items={[
-                  { id: 'group', label: 'Nur diese Gruppe', disabled: !selectedGroupId },
-                  { id: 'club', label: 'Ganzer Verein', disabled: !selectedGroupId },
-                ]}
-                className="page-section-nav--inline"
-              />
-              <label
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                  fontSize: '0.88rem',
-                  color: 'var(--text2)',
-                  cursor: selectedGroupId ? 'pointer' : 'default',
-                  opacity: selectedGroupId ? 1 : 0.65,
-                }}
-              >
-                <input
-                  type="checkbox"
-                  checked={assignedToMeOnly}
-                  disabled={!selectedGroupId}
-                  onChange={(e) => setAssignedToMeOnly(e.target.checked)}
-                />
-                Nur meine Zuordnung (Leitung / Co)
-              </label>
-              <p
-                style={{
-                  fontSize: '0.78rem',
-                  color: 'var(--text3)',
-                  lineHeight: 1.45,
-                  flex: '1 1 220px',
-                  margin: 0,
-                }}
-              >
-                Neue Termine gelten immer für die gewählte Gruppe. „Ganzer Verein“ zeigt zusätzlich Termine
-                anderer Gruppen desselben Vereins.
-              </p>
-              <details className="planning-filter-help">
-                <summary className="planning-filter-help__summary">Mehr zu Ansicht &amp; Trainerzuordnung</summary>
-                <div className="planning-filter-help__body">
-                  <p style={{ margin: '0 0 0.65rem' }}>
-                    „Ganzer Verein“ bezieht sich auf denselben Verein wie die gewählte Gruppe. Neu angelegte Termine
-                    beziehen sich weiterhin auf die Gruppe, die du oben gewählt hast.
-                  </p>
-                  {selectedGroupId ? (
-                    <p style={{ margin: 0 }}>
-                      Über <strong>Trainer</strong> oder <strong>Trainer zuweisen</strong> bearbeitest du Leitung und
-                      Co je Einheit (berechtigt: Vereinsorganisation, Haupt-/Co‑Trainer der Gruppe sowie Erstellung
-                      der Einheit). Das Mitgliederverzeichnis listet nur eigene Vereinsmitglieder; die Leitung erscheint
-                      nicht unter Co‑Trainer.
-                    </p>
-                  ) : (
-                    <p style={{ margin: 0, color: 'var(--text3)' }}>
-                      Wähle zuerst eine Gruppe — dann erweitert sich die Hilfe zu Trainer und Berechtigungen.
-                    </p>
-                  )}
-                </div>
-              </details>
-            </div>
-          </div>
-
-          {selectedGroup && (
-            <div
-              style={{
-                marginTop: '1rem',
-                padding: '1rem',
-                background: 'var(--surface2)',
-                borderRadius: '8px'
-              }}
-            >
-              <p style={{ fontSize: '0.875rem', color: 'var(--text2)' }}>
-                {selectedGroup.location || 'Kein Ort angegeben'}
-                {selectedGroup.weekday && ` · ${selectedGroup.weekday}`}
-                {selectedGroup.time_start &&
-                  ` · ${selectedGroup.time_start.slice(0, 5)} - ${selectedGroup.time_end?.slice(0, 5)}`}
-              </p>
-            </div>
-          )}
-
-          <div className="training-planning-create training-planning-create--in-card">
-            <div className="training-planning-create__intro">
-              <h3 className="training-planning-create__title">Neue Trainingseinheit</h3>
-              <p className="training-planning-create__lede">
-                Datum, Zeiten und Ablauf (Abschnitte &amp; Übungen) — optional{' '}
-                <strong>Trainingsvorlage</strong> oder Inhalte aus einem <strong>Rahmenprogramm</strong> im Dialog.
-              </p>
-              {!selectedGroupId && (
-                <p className="training-planning-create__hint training-planning-create__hint--warn">
-                  Wähle oben eine Trainingsgruppe, um fortzufahren.
-                </p>
-              )}
-              {groups.length === 0 && (
-                <p className="training-planning-create__hint training-planning-create__hint--warn">
-                  Es gibt noch keine aktive Trainingsgruppe — unter{' '}
-                  <Link to="/clubs">Vereine</Link> anlegen oder aktivieren.
-                </p>
-              )}
-            </div>
-            <div className="training-planning-create__actions">
-              <button
-                type="button"
-                className="btn btn-primary training-planning-create__cta"
-                disabled={!selectedGroupId}
-                title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
-                onClick={handleCreate}
-              >
-                Trainingseinheit planen…
-              </button>
-              <button
-                type="button"
-                className="btn btn-secondary training-planning-create__secondary"
-                disabled={!selectedGroupId}
-                title={!selectedGroupId ? 'Zuerst eine Trainingsgruppe wählen' : undefined}
-                onClick={openFrameworkImportModal}
-              >
-                Aus Rahmen übernehmen…
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {!selectedGroupId ? (
-          <div className="card">
-            <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
-              Wähle oben eine Trainingsgruppe — danach kannst du unter{' '}
-              <strong>„Trainingseinheit planen…“</strong> einen Termin anlegen.
-            </p>
-          </div>
-        ) : planView === 'calendar' ? (
-          <div className="card" style={{ padding: 'clamp(8px, 2vw, 14px)', overflowX: 'auto' }}>
-            {units.length === 0 ? (
-              <p style={{ color: 'var(--text2)', fontSize: '0.88rem', margin: '0 0 12px', lineHeight: 1.45 }}>
-                Im sichtbaren Monatsbereich liegt noch keine Einheit. Über <strong>+</strong> in einem Tag legst du einen
-                neuen Termin mit Datum an.
-              </p>
-            ) : null}
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                gap: '4px',
-                minWidth: 'min(960px, 100%)',
-              }}
-              role="grid"
-              aria-label={`Kalender ${calendarMonthTitle}`}
-            >
-              {WEEKDAYS_DE.map((w) => (
-                <div
-                  key={w}
-                  style={{
-                    fontWeight: 600,
-                    fontSize: '0.72rem',
-                    textAlign: 'center',
-                    padding: '6px 2px',
-                    color: 'var(--text3)',
-                  }}
-                  role="columnheader"
-                >
-                  {w}
-                </div>
-              ))}
-              {calendarGridDays.map((dayIso) => {
-                const inMonth = dayIso.slice(0, 7) === calendarMonthStr
-                const dayNum = parseInt(dayIso.slice(8, 10), 10)
-                const isTodayMarker = dayIso === today
-                const dayUnits = unitsByPlannedDate.get(dayIso) || []
-                return (
-                  <div
-                    key={dayIso}
-                    role="gridcell"
-                    style={{
-                      minHeight: '96px',
-                      border: '1px solid var(--border, rgba(0, 0, 0, 0.1))',
-                      borderRadius: '6px',
-                      padding: '5px',
-                      background: inMonth ? 'var(--surface)' : 'var(--surface2)',
-                      opacity: inMonth ? 1 : 0.58,
-                      boxShadow: isTodayMarker ? 'inset 0 0 0 2px var(--accent-dark, #256)' : undefined,
-                    }}
-                  >
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'flex-start',
-                        gap: '4px',
-                        marginBottom: '6px',
-                      }}
-                    >
-                      <span style={{ fontWeight: 700, fontSize: '0.82rem', lineHeight: 1 }}>{dayNum}</span>
-                      <button
-                        type="button"
-                        className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                        title={`Neue Trainingseinheit am ${dayIso}`}
-                        aria-label={`Neue Trainingseinheit am ${dayIso}`}
-                        onClick={() => handleCreateForDate(dayIso)}
-                        disabled={!selectedGroupId}
-                        style={{ padding: '2px 6px', flexShrink: 0 }}
-                      >
-                        +
-                      </button>
-                    </div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                      {dayUnits.slice(0, 3).map((unit) => (
-                        <div
-                          key={unit.id}
-                          style={{ display: 'flex', flexDirection: 'column', gap: '4px', width: '100%' }}
-                        >
-                          <button
-                            type="button"
-                            onClick={() => handleEdit(unit)}
-                            title={[
-                              planScope === 'club' && unit.group_name ? unit.group_name : '',
-                              unit.planned_time_start?.slice(0, 5) || '',
-                              unit.lead_trainer_name?.trim(),
-                              unit.planned_focus?.trim(),
-                              unit.status === 'completed'
-                                ? 'Durchgeführt'
-                                : unit.status === 'cancelled'
-                                  ? 'Abgesagt'
-                                  : 'Geplant',
-                            ]
-                              .filter(Boolean)
-                              .join(' · ')}
-                            style={{
-                              border: 'none',
-                              cursor: 'pointer',
-                              textAlign: 'left',
-                              padding: '4px 5px',
-                              borderRadius: '4px',
-                              fontSize: '0.7rem',
-                              lineHeight: 1.25,
-                              width: '100%',
-                              borderLeftWidth: '3px',
-                              borderLeftStyle: 'solid',
-                              borderLeftColor:
-                                unit.status === 'completed'
-                                  ? '#2ea44f'
-                                  : unit.status === 'cancelled'
-                                    ? 'var(--danger)'
-                                    : 'var(--accent-dark)',
-                              background: 'var(--surface2)',
-                              color: 'var(--text1)',
-                            }}
-                          >
-                            <span style={{ fontWeight: 600 }}>
-                              {unit.planned_time_start
-                                ? `${unit.planned_time_start.slice(0, 5)}`
-                                : 'Ganztags'}
-                            </span>
-                            {planScope === 'club' && (unit.group_name || '').trim() ? (
-                              <span style={{ display: 'block', fontWeight: 500, color: 'var(--text1)' }}>
-                                {(unit.group_name || '').trim().length > 22
-                                  ? `${(unit.group_name || '').trim().slice(0, 22)}…`
-                                  : unit.group_name}
-                              </span>
-                            ) : null}
-                            {unit.lead_trainer_name?.trim() ? (
-                              <span
-                                style={{
-                                  display: 'block',
-                                  color: 'var(--text3)',
-                                  fontWeight: 400,
-                                  fontSize: '0.62rem',
-                                }}
-                              >
-                                {unit.lead_trainer_name.trim().split(/\s+/).slice(-1)[0] ||
-                                  unit.lead_trainer_name.trim()}
-                              </span>
-                            ) : null}
-                            {unit.planned_focus?.trim() ? (
-                              <span style={{ display: 'block', color: 'var(--text2)', fontWeight: 400 }}>
-                                {(unit.planned_focus || '').trim().length > 24
-                                  ? `${(unit.planned_focus || '').trim().slice(0, 24)}…`
-                                  : unit.planned_focus}
-                              </span>
-                            ) : null}
-                          </button>
-                          {mayConfigureSessionAssignments(unit) ? (
-                            <button
-                              type="button"
-                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                              style={{ fontSize: '0.62rem', padding: '2px 4px', alignSelf: 'stretch' }}
-                              onClick={(ev) => {
-                                ev.stopPropagation()
-                                openTrainerAssignModal(unit)
-                              }}
-                            >
-                              Trainer
-                            </button>
-                          ) : null}
-                        </div>
-                      ))}
-                    </div>
-                    {dayUnits.length > 3 ? (
-                      <p style={{ fontSize: '0.65rem', color: 'var(--text3)', margin: '4px 0 0', lineHeight: 1.3 }}>
-                        +{dayUnits.length - 3} weitere
-                      </p>
-                    ) : null}
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        ) : units.length === 0 ? (
-          <div className="card">
-            <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
-              Keine Trainingseinheiten in diesem Zeitraum. Unten unter <strong>„Neue Trainingseinheit“</strong> einen
-              Termin anlegen — optional mit Vorlage im Dialog.
-            </p>
-          </div>
-        ) : (
-          <div style={{ display: 'grid', gap: '1rem' }}>
-            {units.map((unit) => {
-              const lineage = unit.origin_framework_slot_id ? frameworkLineageText(unit) : null
-              const uid = user?.id != null ? Number(user.id) : null
-              const effLead =
-                unit.effective_lead_trainer_profile_id != null
-                  ? Number(unit.effective_lead_trainer_profile_id)
-                  : null
-              const showTakeLead =
-                unit.status === 'planned' && uid != null && effLead != null && effLead !== uid
-              return (
-              <div key={unit.id} className="card">
-                <div
-                  style={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                    gap: '12px',
-                    marginBottom: '1rem'
-                  }}
-                >
-                  <div style={{ minWidth: 0, flex: '1 1 200px' }}>
-                    <h3 style={{ marginBottom: '0.25rem' }}>
-                      {unit.planned_date}
-                      {unit.planned_time_start &&
-                        ` · ${unit.planned_time_start.slice(0, 5)} - ${unit.planned_time_end?.slice(0, 5)}`}
-                    </h3>
-                    {planScope === 'club' && (unit.group_name || '').trim() ? (
-                      <p
-                        style={{
-                          fontSize: '0.85rem',
-                          color: 'var(--text3)',
-                          margin: '0 0 0.35rem',
-                        }}
-                      >
-                        {unit.group_name}
-                      </p>
-                    ) : null}
-                    <p style={{ fontSize: '0.82rem', color: 'var(--text2)', margin: '0 0 0.5rem' }}>
-                      Leitung: {(unit.lead_trainer_name || '').trim() || '—'}
-                    </p>
-                    {(() => {
-                      const coRaw = unit.effective_assistant_trainer_profile_ids
-                      const co = Array.isArray(coRaw)
-                        ? coRaw.map(Number).filter((x) => Number.isFinite(x) && x >= 1)
-                        : []
-                      if (!co.length) return null
-                      const src =
-                        unit.assistant_trainer_profile_ids != null
-                          ? 'Session-Zuweisung'
-                          : 'über Trainingsgruppe'
-                      return (
-                        <p
-                          style={{
-                            fontSize: '0.78rem',
-                            color: 'var(--text3)',
-                            margin: '0 0 0.5rem',
-                          }}
-                        >
-                          Co-Trainer ({src}): {co.length}
-                        </p>
-                      )
-                    })()}
-                    {unit.planned_focus && (
-                      <p
-                        style={{
-                          color: 'var(--text2)',
-                          fontSize: '0.875rem',
-                          marginBottom: '0.5rem'
-                        }}
-                      >
-                        Fokus: {unit.planned_focus}
-                      </p>
-                    )}
-                    {lineage ? (
-                      <p
-                        style={{
-                          color: 'var(--text2)',
-                          fontSize: '0.82rem',
-                          marginBottom: '0.5rem',
-                          lineHeight: 1.45,
-                        }}
-                      >
-                        <span style={{ fontWeight: 600, color: 'var(--text3)' }}>Aus Rahmen: </span>
-                        {unit.origin_framework_program_id ? (
-                          <Link
-                            to={`/planning/framework-programs/${unit.origin_framework_program_id}`}
-                            style={{ color: 'var(--accent-dark)' }}
-                          >
-                            {lineage.fpTitle}
-                          </Link>
-                        ) : (
-                          <span>{lineage.fpTitle}</span>
-                        )}
-                        <span style={{ color: 'var(--text2)' }}> · {lineage.slotBit}</span>
-                      </p>
-                    ) : null}
-                    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-                      <span
-                        style={{
-                          fontSize: '0.75rem',
-                          padding: '0.25rem 0.5rem',
-                          borderRadius: '4px',
-                          background:
-                            unit.status === 'completed'
-                              ? '#2ea44f'
-                              : unit.status === 'cancelled'
-                                ? 'var(--danger)'
-                                : 'var(--surface2)',
-                          color:
-                            unit.status === 'completed' || unit.status === 'cancelled'
-                              ? 'white'
-                              : 'var(--text2)'
-                        }}
-                      >
-                        {unit.status === 'planned' && 'Geplant'}
-                        {unit.status === 'completed' && 'Durchgeführt'}
-                        {unit.status === 'cancelled' && 'Abgesagt'}
-                      </span>
-                      {unit.attendance_count !== null && unit.attendance_count !== undefined && (
-                        <span
-                          style={{
-                            fontSize: '0.75rem',
-                            padding: '0.25rem 0.5rem',
-                            borderRadius: '4px',
-                            background: 'var(--surface2)',
-                            color: 'var(--text2)'
-                          }}
-                        >
-                          {unit.attendance_count} Teilnehmer
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div
-                    style={{
-                      display: 'flex',
-                      gap: '0.5rem',
-                      flexWrap: 'wrap',
-                      justifyContent: 'flex-end',
-                      flex: '1 1 180px',
-                      minWidth: 0
-                    }}
-                  >
-                    <Link
-                      to={`/planning/run/${unit.id}`}
-                      className="btn btn-secondary"
-                      style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-                    >
-                      Plan &amp; Ablauf
-                    </Link>
-                    <Link
-                      to={`/planning/run/${unit.id}/coach`}
-                      className="btn btn-primary"
-                      style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-                    >
-                      Im Training (Coach)
-                    </Link>
-                    <button className="btn btn-secondary" onClick={() => handleEdit(unit)}>
-                      Bearbeiten
-                    </button>
-                    {mayConfigureSessionAssignments(unit) ? (
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        onClick={() => openTrainerAssignModal(unit)}
-                        title="Nur organisatorisch: Leitung und Co für diese Einheit"
-                      >
-                        Trainer zuweisen
-                      </button>
-                    ) : null}
-                    {showTakeLead ? (
-                      <button type="button" className="btn btn-secondary" onClick={() => handleTakeLead(unit)}>
-                        Ich übernehme
-                      </button>
-                    ) : null}
-                    <button
-                      className="btn"
-                      style={{ background: 'var(--danger)', color: 'white', border: 'none' }}
-                      onClick={() => handleDelete(unit)}
-                    >
-                      Löschen
-                    </button>
-                  </div>
-                </div>
-
-                {unit.notes && (
-                  <p style={{ color: 'var(--text2)', fontSize: '0.875rem', marginTop: '0.5rem' }}>
-                    {unit.notes}
-                  </p>
-                )}
-              </div>
-              )
-            })}
-          </div>
-        )}
-
-        {assignModalOpen && assignDraft.unit ? (
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: 'rgba(0,0,0,0.5)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              zIndex: 1020,
-              padding: '1rem',
-              overflowY: 'auto',
-            }}
-            role="presentation"
-            onClick={() => {
-              if (!assignSaving) setAssignModalOpen(false)
-            }}
-          >
-            <div
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="trainer-assign-modal-title"
-              onClick={(e) => e.stopPropagation()}
-              style={{
-                background: 'var(--surface)',
-                borderRadius: '12px',
-                padding: 'clamp(14px, 3vw, 1.75rem)',
-                maxWidth: 'min(460px, 100%)',
-                width: '100%',
-                maxHeight: '90vh',
-                overflowY: 'auto',
-                boxSizing: 'border-box',
-              }}
-            >
-              <h2 id="trainer-assign-modal-title" style={{ marginBottom: '0.5rem', fontSize: '1.1rem' }}>
-                Trainer zuweisen (organisatorisch)
-              </h2>
-              <p style={{ fontSize: '0.86rem', color: 'var(--text2)', marginBottom: '1rem', lineHeight: 1.45 }}>
-                {(assignDraft.unit.planned_date || '').toString().slice(0, 10)}
-                {assignDraft.unit.planned_time_start
-                  ? ` · ${String(assignDraft.unit.planned_time_start).slice(0, 5)}`
-                  : ''}
-                {(assignDraft.unit.group_name || '').trim()
-                  ? ` · ${(assignDraft.unit.group_name || '').trim()}`
-                  : null}
-              </p>
-              <div className="form-row">
-                <label className="form-label">Leitung (diese Einheit)</label>
-                <select
-                  className="form-input"
-                  value={assignDraft.lead_trainer_profile_id}
-                  onChange={(e) => {
-                    const v = e.target.value
-                    setAssignDraft((prev) => {
-                      const exclude = []
-                      const tr = String(v || '').trim()
-                      if (tr !== '') {
-                        const n = parseInt(tr, 10)
-                        if (Number.isFinite(n)) exclude.push(n)
-                      } else if (prev.unit?.effective_lead_trainer_profile_id != null) {
-                        const ef = Number(prev.unit.effective_lead_trainer_profile_id)
-                        if (Number.isFinite(ef)) exclude.push(ef)
-                      }
-                      const exSet = new Set(exclude)
-                      const co = exclude.length
-                        ? prev.session_assistant_profile_ids.filter((x) => !exSet.has(x))
-                        : prev.session_assistant_profile_ids
-                      return { ...prev, lead_trainer_profile_id: v, session_assistant_profile_ids: co }
-                    })
-                  }}
-                  disabled={assignSaving}
-                >
-                  <option value="">Standard (Haupttrainer der Gruppe)</option>
-                  {clubDirectory.map((m) => {
-                    const idStr = String(m.id)
-                    return (
-                      <option key={idStr} value={idStr}>
-                        {(m.name || '').trim() || m.email || `Profil ${m.id}`}
-                      </option>
-                    )
-                  })}
-                </select>
-              </div>
-              <div className="form-row" style={{ marginTop: '0.85rem' }}>
-                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-                  <input
-                    type="checkbox"
-                    checked={assignDraft.session_assistants_inherit}
-                    disabled={assignSaving}
-                    onChange={(e) =>
-                      setAssignDraft((prev) => ({
-                        ...prev,
-                        session_assistants_inherit: e.target.checked,
-                      }))
-                    }
-                  />
-                  <span style={{ fontSize: '0.9rem', color: 'var(--text1)' }}>
-                    Co-Trainer wie in der Trainingsgruppe
-                  </span>
-                </label>
-              </div>
-              {!assignDraft.session_assistants_inherit ? (
-                <div style={{ marginTop: '10px', maxHeight: '180px', overflowY: 'auto' }}>
-                  {clubDirectoryForAssignCo.map((m) => {
-                    const mid = typeof m.id === 'number' ? m.id : parseInt(String(m.id), 10)
-                    const labelText = `${(m.name || '').trim() || m.email || `Profil ${mid}`}`
-                    const isOn = Number.isFinite(mid) && assignDraft.session_assistant_profile_ids.includes(mid)
-                    return (
-                      <label
-                        key={`assign-co-${mid}`}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '8px',
-                          fontSize: '0.875rem',
-                          marginBottom: '6px',
-                          cursor: assignSaving ? 'default' : 'pointer',
-                          color: 'var(--text1)',
-                        }}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={isOn}
-                          disabled={assignSaving}
-                          onChange={() => {
-                            setAssignDraft((prev) => {
-                              const was = prev.session_assistant_profile_ids.includes(mid)
-                              const nextIds = was
-                                ? prev.session_assistant_profile_ids.filter((x) => x !== mid)
-                                : [...prev.session_assistant_profile_ids, mid].sort((a, b) => a - b)
-                              return { ...prev, session_assistant_profile_ids: nextIds }
-                            })
-                          }}
-                        />
-                        <span>{labelText}</span>
-                      </label>
-                    )
-                  })}
-                </div>
-              ) : null}
-              {!clubDirectory.length ? (
-                <p style={{ marginTop: '10px', fontSize: '0.82rem', color: 'var(--text3)' }}>
-                  Mitgliederverzeichnis konnte nicht geladen werden.
-                </p>
-              ) : null}
-              <div
-                style={{
-                  display: 'flex',
-                  gap: '0.65rem',
-                  flexWrap: 'wrap',
-                  justifyContent: 'flex-end',
-                  marginTop: '1.25rem',
-                }}
-              >
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  disabled={assignSaving}
-                  onClick={() => setAssignModalOpen(false)}
-                >
-                  Abbrechen
-                </button>
-                <button type="button" className="btn btn-primary" disabled={assignSaving} onClick={saveTrainerAssignModal}>
-                  {assignSaving ? 'Speichern …' : 'Speichern'}
-                </button>
-              </div>
-            </div>
-          </div>
-        ) : null}
-
-        {moduleApplyOpen && (
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: 'rgba(0,0,0,0.5)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              zIndex: 1010,
-              padding: '1rem',
-              overflowY: 'auto',
-            }}
-            role="presentation"
-            onMouseDown={(ev) => {
-              if (ev.target !== ev.currentTarget || moduleApplyBusy) return
-              setModuleApplyOpen(false)
-              setModuleApplyPlacementLocked(false)
-            }}
-          >
-            <div
-              className="card"
-              style={{
-                padding: 'clamp(14px, 3vw, 1.75rem)',
-                maxWidth: 'min(560px, 100%)',
-                width: '100%',
-                maxHeight: '90vh',
-                overflowY: 'auto',
-                boxSizing: 'border-box',
-              }}
-              role="dialog"
-              aria-labelledby="module-apply-title"
-            >
-              <h2 id="module-apply-title" style={{ marginBottom: '0.5rem', fontSize: '1.15rem' }}>
-                Trainingsmodul einfügen
-              </h2>
-              <p style={{ color: 'var(--text2)', fontSize: '0.87rem', marginBottom: '0.85rem', lineHeight: 1.5 }}>
-                Alle Positionen des gewählten Moduls werden <strong>als neue Zeilen</strong> eingefügt (Kopie, mit klarer
-                Herkunft im Ablauf). Die Einheit brauchst du dafür nicht vorher gespeichert zu haben — Speichern am Ende
-                wie gewohnt. <strong>Vollständige Textsuche oder Modulkategorien</strong> planen wir serverseitig für
-                eine spätere Iteration; vorerst steht hier eine{' '}
-                <strong>Schnellsuche über Titel und Freitext-Felder</strong> zur Verfügung.
-              </p>
-
-              {moduleApplyErr ? (
-                <p style={{ color: 'var(--danger)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>{moduleApplyErr}</p>
-              ) : null}
-
-              {moduleApplyPlacementLocked ? (
-                <>
-                  <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', lineHeight: 1.5, color: 'var(--text2)' }}>
-                    Aktuelle Einfügeposition: Abschnitt <strong>{modulePlacementSummary.secTitle}</strong>{' '}
-                    <span aria-hidden>/</span> {modulePlacementSummary.positionDescription}
-                  </p>
-                  <details className="tu-module-apply-placement-details">
-                    <summary style={{ outline: 'none' }}>Abschnitt oder Position ändern</summary>
-                    <div style={{ marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
-                      <div className="form-row" style={{ marginBottom: 0 }}>
-                        <label className="form-label">Abschnitt (Reihenfolge wie im Editor)</label>
-                        <select
-                          className="form-input"
-                          value={String(moduleApplySectionIx)}
-                          onChange={(e) => {
-                            const newIx = parseInt(e.target.value, 10)
-                            setModuleApplySectionIx(newIx)
-                            const secsNow = planningFormRef.current?.sections ?? []
-                            const len = Array.isArray(secsNow[newIx]?.items) ? secsNow[newIx].items.length : 0
-                            setModuleApplyInsertSlot(`before:${len}`)
-                          }}
-                          disabled={moduleApplyBusy || !formData.sections?.length}
-                        >
-                          {(formData.sections || []).map((s, i) => (
-                            <option key={`sec-opt-u-${i}`} value={String(i)}>
-                              {(s.title || `Abschnitt ${i + 1}`).trim()}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                      <div className="form-row" style={{ marginBottom: 0 }}>
-                        <label className="form-label">Position in diesem Abschnitt</label>
-                        <select
-                          className="form-input"
-                          value={moduleApplyInsertSlot}
-                          onChange={(e) => setModuleApplyInsertSlot(e.target.value)}
-                          disabled={moduleApplyBusy || !(formData.sections?.length > 0)}
-                        >
-                          <option value={`before:${moduleApplyTargetItems.length}`}>
-                            Am Ende einfügen (nach allen Einträgen)
-                          </option>
-                          <option value="before:0">An den Anfang (vor dem ersten Eintrag)</option>
-                          {moduleApplyTargetItems.map((row, xi) => {
-                            const labelPart =
-                              row.item_type === 'note'
-                                ? 'Zwischen-Anmerkung'
-                                : (row.exercise_title || '').trim() || `Übung #${row.exercise_id || '—'}`
-                            const clipped =
-                              labelPart.length > 44 ? `${labelPart.slice(0, 43).trim()}…` : labelPart
-                            return (
-                              <option key={`before-u-${xi}`} value={`before:${xi}`}>
-                                Vor Eintrag {xi + 1}: {clipped}
-                              </option>
-                            )
-                          })}
-                        </select>
-                      </div>
-                    </div>
-                  </details>
-                </>
-              ) : (
-                <>
-                  <div className="form-row">
-                    <label className="form-label">Abschnitt (Reihenfolge wie im Editor)</label>
-                    <select
-                      className="form-input"
-                      value={String(moduleApplySectionIx)}
-                      onChange={(e) => {
-                        const newIx = parseInt(e.target.value, 10)
-                        setModuleApplySectionIx(newIx)
-                        const secsNow = planningFormRef.current?.sections ?? []
-                        const len = Array.isArray(secsNow[newIx]?.items) ? secsNow[newIx].items.length : 0
-                        setModuleApplyInsertSlot(`before:${len}`)
-                      }}
-                      disabled={moduleApplyBusy || !formData.sections?.length}
-                    >
-                      {(formData.sections || []).map((s, i) => (
-                        <option key={`sec-opt-${i}`} value={String(i)}>
-                          {(s.title || `Abschnitt ${i + 1}`).trim()}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div className="form-row">
-                    <label className="form-label">Position in diesem Abschnitt</label>
-                    <select
-                      className="form-input"
-                      value={moduleApplyInsertSlot}
-                      onChange={(e) => setModuleApplyInsertSlot(e.target.value)}
-                      disabled={moduleApplyBusy || !(formData.sections?.length > 0)}
-                    >
-                      <option value={`before:${moduleApplyTargetItems.length}`}>
-                        Am Ende einfügen (nach allen Einträgen)
-                      </option>
-                      <option value="before:0">An den Anfang (vor dem ersten Eintrag)</option>
-                      {moduleApplyTargetItems.map((row, xi) => {
-                        const labelPart =
-                          row.item_type === 'note'
-                            ? 'Zwischen-Anmerkung'
-                            : (row.exercise_title || '').trim() || `Übung #${row.exercise_id || '—'}`
-                        const clipped =
-                          labelPart.length > 44 ? `${labelPart.slice(0, 43).trim()}…` : labelPart
-                        return (
-                          <option key={`before-${xi}`} value={`before:${xi}`}>
-                            Vor Eintrag {xi + 1}: {clipped}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </div>
-                </>
-              )}
-
-              <div className="form-row" style={{ marginTop: moduleApplyPlacementLocked ? '1rem' : undefined }}>
-                <label className="form-label">Suche Module</label>
-                <input
-                  type="search"
-                  enterKeyHint="search"
-                  className="form-input tu-modulepick-search"
-                  placeholder="Freitext: Titel, Kurzbeschreibung, Ziel, Zielgruppe …"
-                  value={moduleApplySearchQuery}
-                  onChange={(e) => setModuleApplySearchQuery(e.target.value)}
-                  disabled={moduleApplyBusy}
-                  aria-label="Module durch Freitext filtern"
-                />
-              </div>
-
-              <div className="form-row" style={{ marginBottom: '0.65rem' }}>
-                <label className="form-label" id="module-pick-label">
-                  Modulliste
-                </label>
-              </div>
-              <div
-                className="tu-modulepick-list"
-                role="listbox"
-                aria-labelledby="module-pick-label"
-                aria-activedescendant={
-                  moduleApplyModuleId ? `module-pick-opt-${moduleApplyModuleId}` : undefined
-                }
-              >
-                {!moduleApplyFilteredList.length ? (
-                  <p style={{ margin: '0.45rem', fontSize: '0.86rem', color: 'var(--text3)', lineHeight: 1.45 }}>
-                    {!moduleApplyList.length ? 'Keine Module verfügbar oder keine Berechtigung.' : 'Kein Modul entspricht der Suche.'}
-                  </p>
-                ) : (
-                  moduleApplyFilteredList.map((m) => {
-                    const title = ((m.title || '').trim() || `Modul #${m.id}`).trim()
-                    const visLbl = trainingVisibilityShortDE(m.visibility)
-                    const nPos = typeof m.items_count === 'number' ? m.items_count : '—'
-                    const selected = String(m.id) === String(moduleApplyModuleId)
-                    return (
-                      <button
-                        key={m.id}
-                        id={`module-pick-opt-${m.id}`}
-                        type="button"
-                        role="option"
-                        aria-selected={selected}
-                        className={`tu-modulepick-item${selected ? ' tu-modulepick-item--active' : ''}`}
-                        disabled={moduleApplyBusy}
-                        onClick={() => setModuleApplyModuleId(String(m.id))}
-                      >
-                        <span className="tu-modulepick-item__title">{title}</span>
-                        <span className="tu-modulepick-item__meta">
-                          {nPos} {typeof nPos === 'number' ? (nPos === 1 ? 'Position' : 'Positionen') : 'Position(en)'}
-                          {visLbl ? <> · {visLbl}</> : null}
-                          {m.summary ? <> · {(m.summary || '').trim().slice(0, 72)}{(m.summary || '').trim().length > 72 ? '…' : ''}</> : null}
-                        </span>
-                      </button>
-                    )
-                  })
-                )}
-              </div>
-
-              {moduleApplyModuleId ? (
-                <div className="tu-modulepick-preview" aria-live="polite">
-                  <div className="tu-modulepick-preview__title">Ablauf-Vorschau (Bibliotheksmodul)</div>
-                  {modulePickPreview.loading ? (
-                    <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--text3)' }}>
-                      Übungen und Hinweise laden …
-                    </p>
-                  ) : modulePickPreview.err ? (
-                    <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--danger)' }}>
-                      {modulePickPreview.err}
-                    </p>
-                  ) : !modulePickPreview.exercises.length && !modulePickPreview.notes ? (
-                    <p style={{ margin: '0.15rem 0 0', fontSize: '0.86rem', color: 'var(--text3)' }}>
-                      Keine Übungspositionen in diesem Eintrag gefunden (prüfen, ob Übungen im Modul gültige IDs haben).
-                    </p>
-                  ) : (
-                    <>
-                      <ol className="tu-modulepick-preview__list">
-                        {(modulePickPreview.exercises.slice(0, 12)).map((t, qi) => (
-                          <li key={`pv-ex-${qi}`}>{t}</li>
-                        ))}
-                      </ol>
-                      {modulePickPreview.exercises.length > 12 ? (
-                        <p className="tu-modulepick-preview__more">
-                          … und noch {modulePickPreview.exercises.length - 12} weitere Übungen in genau dieser Modulreihenfolge.
-                        </p>
-                      ) : null}
-                      {modulePickPreview.notes > 0 ? (
-                        <p className="tu-modulepick-preview__more">
-                          zusätzlich {modulePickPreview.notes}{' '}
-                          {modulePickPreview.notes === 1 ? 'Position mit Hinweis' : 'Positionen mit Hinweisen'}{' '}
-                          (ohne Aufzählung)
-                        </p>
-                      ) : null}
-                    </>
-                  )}
-                </div>
-              ) : null}
-
-              <div
-                style={{
-                  display: 'flex',
-                  gap: '0.65rem',
-                  flexWrap: 'wrap',
-                  justifyContent: 'flex-end',
-                  marginTop: '1.25rem',
-                }}
-              >
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  disabled={moduleApplyBusy}
-                  onClick={() => {
-                    if (moduleApplyBusy) return
-                    setModuleApplyOpen(false)
-                    setModuleApplyPlacementLocked(false)
-                  }}
-                >
-                  Abbrechen
-                </button>
-                <button type="button" className="btn btn-primary" disabled={moduleApplyBusy} onClick={handleApplyTrainingModuleConfirm}>
-                  {moduleApplyBusy ? 'Einfügen …' : 'Einfügen'}
-                </button>
-              </div>
-
-              <p style={{ margin: '1rem 0 0', fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.45 }}>
-                Neue Module kannst du unter{' '}
-                <Link to="/planning/training-modules" style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
-                  Trainingsmodule
-                </Link>{' '}
-                anlegen.
-              </p>
-            </div>
-          </div>
-        )}
-
-        {frameworkImportOpen && (
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: 'rgba(0,0,0,0.5)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              zIndex: 1010,
-              padding: '1rem',
-              overflowY: 'auto',
-            }}
-          >
-            <div
-              style={{
-                background: 'var(--surface)',
-                borderRadius: '12px',
-                padding: 'clamp(14px, 3vw, 1.75rem)',
-                maxWidth: 'min(620px, 100%)',
-                width: '100%',
-                maxHeight: '90vh',
-                overflowY: 'auto',
-                boxSizing: 'border-box',
-                minWidth: 0,
-              }}
-            >
-              <h2 style={{ marginBottom: '0.65rem' }}>Sessions aus Rahmen übernehmen</h2>
-              <p style={{ color: 'var(--text2)', fontSize: '0.9rem', marginBottom: '1rem', lineHeight: 1.5 }}>
-                Wähle ein Trainingsrahmenprogramm und eine oder mehrere Sessions. Pro Session entsteht eine{' '}
-                <strong>eigene geplante Einheit</strong> in der aktuellen Gruppe (Kopie des Ablaufs). Die{' '}
-                <strong>Verknüpfung zum Rahmen-Slot</strong> wird gespeichert, damit die Herkunft sichtbar bleibt.
-              </p>
-
-              <div className="form-row">
-                <label className="form-label">Rahmenprogramm</label>
-                <select
-                  className="form-input"
-                  value={fwImportProgramId}
-                  onChange={(e) => onFwImportProgramChange(e.target.value)}
-                  disabled={fwImportLoading || fwImportSubmitting}
-                >
-                  <option value="">Bitte wählen…</option>
-                  {frameworkProgramsList.map((fp) => (
-                    <option key={fp.id} value={String(fp.id)}>
-                      {(fp.title || '').trim() || `Rahmen #${fp.id}`}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              {fwImportLoading ? (
-                <p style={{ color: 'var(--text2)', marginTop: '1rem' }}>Laden der Sessions…</p>
-              ) : fwImportDetail?.slots?.length ? (
-                <>
-                  <fieldset style={{ border: 'none', margin: '1rem 0', padding: 0 }}>
-                    <legend className="form-label" style={{ padding: 0, marginBottom: '0.5rem' }}>
-                      Sessions (mit Ablauf)
-                    </legend>
-                    <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-                      {[...fwImportDetail.slots]
-                        .sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
-                        .map((slot) => {
-                          const hasBp = !!slot.blueprint_training_unit_id
-                          const checked = fwImportSelectedSlots.has(slot.id)
-                          const label =
-                            (slot.title || '').trim() ||
-                            `Session ${(slot.sort_order ?? 0) + 1}`
-                          return (
-                            <li key={slot.id} style={{ marginBottom: '10px' }}>
-                              <label
-                                style={{
-                                  display: 'flex',
-                                  gap: '10px',
-                                  alignItems: 'flex-start',
-                                  cursor: hasBp ? 'pointer' : 'not-allowed',
-                                  opacity: hasBp ? 1 : 0.55,
-                                }}
-                              >
-                                <input
-                                  type="checkbox"
-                                  checked={checked}
-                                  disabled={!hasBp || fwImportSubmitting}
-                                  onChange={() => toggleFwImportSlot(slot)}
-                                  style={{ marginTop: '0.2rem', flexShrink: 0 }}
-                                />
-                                <span style={{ flex: 1, minWidth: 0 }}>
-                                  <strong>{label}</strong>
-                                  {!hasBp ? (
-                                    <span style={{ display: 'block', fontSize: '0.82rem', color: 'var(--danger)' }}>
-                                      Ohne Session-Ablauf — Übernahme nicht möglich.
-                                    </span>
-                                  ) : null}
-                                  {hasBp && checked ? (
-                                    <span style={{ display: 'block', marginTop: '6px' }}>
-                                      <span className="form-label" style={{ fontSize: '0.78rem' }}>
-                                        Termin (Datum)
-                                      </span>
-                                      <input
-                                        type="date"
-                                        className="form-input"
-                                        style={{ maxWidth: '200px', marginTop: '4px' }}
-                                        value={fwImportSlotDates[String(slot.id)] || ''}
-                                        onChange={(e) =>
-                                          setFwImportSlotDates((prev) => ({
-                                            ...prev,
-                                            [String(slot.id)]: e.target.value,
-                                          }))
-                                        }
-                                        disabled={fwImportSubmitting}
-                                      />
-                                    </span>
-                                  ) : null}
-                                </span>
-                              </label>
-                            </li>
-                          )
-                        })}
-                    </ul>
-                  </fieldset>
-
-                  <div
-                    className="responsive-grid-3"
-                    style={{
-                      marginBottom: '0.75rem',
-                      padding: '12px',
-                      background: 'var(--surface2)',
-                      borderRadius: '8px',
-                    }}
-                  >
-                    <div className="form-row">
-                      <label className="form-label">Startdatum (Vorschlag)</label>
-                      <input
-                        type="date"
-                        className="form-input"
-                        value={fwImportStartDate}
-                        onChange={(e) => setFwImportStartDate(e.target.value)}
-                        disabled={fwImportSubmitting}
-                      />
-                    </div>
-                    <div className="form-row">
-                      <label className="form-label">Abstand (Tage)</label>
-                      <input
-                        type="number"
-                        min={0}
-                        className="form-input"
-                        value={fwImportIntervalDays}
-                        onChange={(e) => setFwImportIntervalDays(parseInt(e.target.value, 10) || 0)}
-                        disabled={fwImportSubmitting}
-                      />
-                    </div>
-                    <div className="form-row" style={{ alignSelf: 'end' }}>
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        style={{ width: '100%' }}
-                        disabled={fwImportSubmitting}
-                        onClick={applyFwImportDateSuggestions}
-                      >
-                        Datumsvorschläge setzen
-                      </button>
-                    </div>
-                  </div>
-                </>
-              ) : fwImportProgramId ? (
-                <p style={{ color: 'var(--text2)', marginTop: '0.75rem' }}>Keine Sessions in diesem Programm.</p>
-              ) : null}
-
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1.25rem' }}>
-                <button
-                  type="button"
-                  className="btn btn-primary"
-                  disabled={fwImportSubmitting || !fwImportDetail}
-                  onClick={submitFrameworkImport}
-                >
-                  {fwImportSubmitting ? 'Übernehmen…' : 'In Planung übernehmen'}
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  disabled={fwImportSubmitting}
-                  onClick={() => setFrameworkImportOpen(false)}
-                >
-                  Abbrechen
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {showModal && (
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: 'rgba(0,0,0,0.5)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              zIndex: 1000,
-              padding: '1rem',
-              overflowY: 'auto'
-            }}
-          >
-            <div
-              style={{
-                background: 'var(--surface)',
-                borderRadius: '12px',
-                padding: 'clamp(12px, 3vw, 2rem)',
-                maxWidth: 'min(1100px, 100%)',
-                width: '100%',
-                maxHeight: '92vh',
-                overflowY: 'auto',
-                margin: 'max(0px, env(safe-area-inset-top, 0px)) auto',
-                boxSizing: 'border-box',
-                minWidth: 0
-              }}
-            >
-              <h2 style={{ marginBottom: '1rem' }}>
-                {editingUnit ? 'Trainingseinheit bearbeiten' : 'Neue Trainingseinheit'}
-              </h2>
-
-              {editingUnit?.origin_framework_slot_id ? (() => {
-                const L = frameworkLineageText(editingUnit)
-                return (
-                  <div
-                    className="card"
-                    style={{
-                      marginBottom: '1.1rem',
-                      padding: '12px 14px',
-                      background: 'var(--surface2)',
-                      fontSize: '0.9rem',
-                      lineHeight: 1.5,
-                    }}
-                  >
-                    <strong style={{ color: 'var(--text1)' }}>Herkunft:</strong>{' '}
-                    {editingUnit.origin_framework_program_id ? (
-                      <Link
-                        to={`/planning/framework-programs/${editingUnit.origin_framework_program_id}`}
-                        style={{ color: 'var(--accent-dark)' }}
-                      >
-                        {L.fpTitle}
-                      </Link>
-                    ) : (
-                      L.fpTitle
-                    )}
-                    <span style={{ color: 'var(--text2)' }}> · {L.slotBit}</span>
-                    <p style={{ margin: '0.5rem 0 0', fontSize: '0.82rem', color: 'var(--text2)' }}>
-                      Inhalt stammt aus dem Session-Blueprint des Rahmenprogramms. Änderungen gelten nur für diese
-                      geplante Einheit; die Zuordnung zum Rahmen bleibt zur Nachverfolgung erhalten.
-                    </p>
-                  </div>
-                )
-              })() : null}
-
-              {!editingUnit && (
-                <div className="training-planning-template-panel" style={{ marginBottom: '1.35rem' }}>
-                  <label className="form-label training-planning-template-panel__label" htmlFor="planning-draft-template">
-                    Vorlage für den Ablauf
-                  </label>
-                  <select
-                    id="planning-draft-template"
-                    className="form-input training-planning-template-panel__select"
-                    value={draftPlanTemplateId}
-                    onChange={(e) => applyTemplateFromSelect(e.target.value)}
-                  >
-                    <option value="">Ohne Vorlage — leere Gliederung (ein Abschnitt)</option>
-                    {planTemplates.map((t) => (
-                      <option key={t.id} value={String(t.id)}>
-                        {t.name}
-                        {typeof t.sections_count === 'number' ? ` · ${t.sections_count} Abschn.` : ''}
-                      </option>
-                    ))}
-                  </select>
-                  <p className="training-planning-template-panel__help">
-                    Übernimmt nur die <strong>Sektionsstruktur</strong> aus der Bibliothek; Übungen trägst du unten bei
-                    den Abschnitten ein. Gespeicherte Vorlagen kannst du unter Planung später erweitern.
-                  </p>
-                </div>
-              )}
-
-              <form onSubmit={handleSubmit}>
-                <h3 style={{ marginBottom: '1rem' }}>Planung</h3>
-
-                <div className="responsive-grid-3" style={{ marginBottom: '1rem' }}>
-                  <div className="form-row">
-                    <label className="form-label">Datum *</label>
-                    <input
-                      type="date"
-                      className="form-input"
-                      value={formData.planned_date}
-                      onChange={(e) => updateFormField('planned_date', e.target.value)}
-                      required
-                    />
-                  </div>
-
-                  <div className="form-row">
-                    <label className="form-label">Von</label>
-                    <input
-                      type="time"
-                      className="form-input"
-                      value={formData.planned_time_start}
-                      onChange={(e) => updateFormField('planned_time_start', e.target.value)}
-                    />
-                  </div>
-
-                  <div className="form-row">
-                    <label className="form-label">Bis</label>
-                    <input
-                      type="time"
-                      className="form-input"
-                      value={formData.planned_time_end}
-                      onChange={(e) => updateFormField('planned_time_end', e.target.value)}
-                    />
-                  </div>
-                </div>
-
-                <div className="form-row">
-                  <label className="form-label">Trainingsfokus</label>
-                  <input
-                    type="text"
-                    className="form-input"
-                    value={formData.planned_focus}
-                    onChange={(e) => updateFormField('planned_focus', e.target.value)}
-                    placeholder="z.B. Grundlagen, Kinder altersgerecht"
-                  />
-                </div>
-
-                <div
-                  className="card"
-                  style={{
-                    marginTop: '1.25rem',
-                    marginBottom: '0.25rem',
-                    padding: '12px 14px',
-                    background: 'var(--surface2)',
-                  }}
-                >
-                  <h3 style={{ margin: '0 0 10px', fontSize: '1rem' }}>Trainerzuordnung (diese Einheit)</h3>
-                  <div className="form-row">
-                    <label className="form-label">Leitung</label>
-                    <select
-                      className="form-input"
-                      value={formData.lead_trainer_profile_id}
-                      onChange={(e) => updateFormField('lead_trainer_profile_id', e.target.value)}
-                      disabled={!editingUnit && !formData.group_id}
-                    >
-                      <option value="">Standard (Haupttrainer der Gruppe)</option>
-                      {clubDirectory.map((m) => {
-                        const idStr = String(m.id)
-                        return (
-                          <option key={idStr} value={idStr}>
-                            {(m.name || '').trim() || m.email || `Profil ${m.id}`}
-                          </option>
-                        )
-                      })}
-                    </select>
-                    <p style={{ fontSize: '0.8rem', color: 'var(--text2)', marginTop: '0.35rem', lineHeight: 1.45 }}>
-                      Für Vertretungen genügt in der Regel die Vereinsmitgliedschaft; Zuweisen dürfen u. a.
-                      Haupt-/Co‑Trainer dieser Gruppe, der/die Ersteller:in der Einheit oder Vereinsadmins.
-                    </p>
-                  </div>
-                  <div className="form-row" style={{ marginTop: '0.75rem' }}>
-                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-                      <input
-                        type="checkbox"
-                        checked={formData.session_assistants_inherit}
-                        onChange={(e) =>
-                          updateFormField('session_assistants_inherit', e.target.checked)
-                        }
-                      />
-                      <span style={{ fontSize: '0.9rem', color: 'var(--text1)' }}>
-                        Co-Trainer wie in der Trainingsgruppe (Standard)
-                      </span>
-                    </label>
-                  </div>
-                  {!formData.session_assistants_inherit ? (
-                    <div style={{ marginTop: '10px', maxHeight: '200px', overflowY: 'auto' }}>
-                      {clubDirectoryForCo.map((m) => {
-                        const mid = typeof m.id === 'number' ? m.id : parseInt(String(m.id), 10)
-                        const labelText = `${(m.name || '').trim() || m.email || `Profil ${mid}`}`
-                        const isOn = Number.isFinite(mid) && formData.session_assistant_profile_ids.includes(mid)
-                        return (
-                          <label
-                            key={`co-${mid}`}
-                            style={{
-                              display: 'flex',
-                              alignItems: 'center',
-                              gap: '8px',
-                              fontSize: '0.875rem',
-                              marginBottom: '6px',
-                              cursor: 'pointer',
-                              color: 'var(--text1)',
-                            }}
-                          >
-                            <input
-                              type="checkbox"
-                              checked={isOn}
-                              onChange={() => {
-                                setFormData((prev) => {
-                                  const was = prev.session_assistant_profile_ids.includes(mid)
-                                  const nextIds = was
-                                    ? prev.session_assistant_profile_ids.filter((x) => x !== mid)
-                                    : [...prev.session_assistant_profile_ids, mid].sort((a, b) => a - b)
-                                  return { ...prev, session_assistant_profile_ids: nextIds }
-                                })
-                              }}
-                            />
-                            <span>{labelText}</span>
-                          </label>
-                        )
-                      })}
-                    </div>
-                  ) : null}
-                  {!clubDirectory.length && showModal ? (
-                    <p style={{ margin: '10px 0 0', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.4 }}>
-                      Keine Einträge im Vereins-Mitgliederverzeichnis oder noch nicht geladen (nur für Vereinsinterne).
-                    </p>
-                  ) : null}
-                </div>
-
-                <TrainingPlanExerciseVisibilityPanel
-                  sections={formData.sections}
-                  targetClubId={planningModalClubId}
-                  user={user}
-                  onMetaRefresh={refreshPlanningSectionMeta}
-                />
-
-                <div style={{ marginTop: '2rem' }}>
-                {editingUnit ? (
-                  <div style={{ marginBottom: '1rem' }}>
-                    <div
-                      role="radiogroup"
-                      aria-label="Modus für Abschnitte und Übungen"
-                      style={{
-                        display: 'flex',
-                        flexWrap: 'wrap',
-                        alignItems: 'center',
-                        gap: '10px',
-                      }}
-                    >
-                      <span className="form-label" style={{ marginBottom: 0, fontSize: '0.82rem' }}>
-                        Ablauf bearbeiten als
-                      </span>
-                      <div
-                        style={{
-                          display: 'inline-flex',
-                          borderRadius: '10px',
-                          border: '1.5px solid var(--border2)',
-                          overflow: 'hidden',
-                          background: 'var(--surface2)',
-                        }}
-                      >
-                        {[
-                          { id: 'planning', label: 'Planung' },
-                          { id: 'debrief', label: 'Nachbereitung' },
-                        ].map((opt, i) => (
-                          <button
-                            key={opt.id}
-                            type="button"
-                            role="radio"
-                            aria-checked={sectionsEditMode === opt.id}
-                            onClick={() => setSectionsEditMode(opt.id)}
-                            style={{
-                              border: 'none',
-                              padding: '8px 14px',
-                              fontWeight: 600,
-                              fontSize: '0.85rem',
-                              cursor: 'pointer',
-                              background: sectionsEditMode === opt.id ? 'var(--accent-dark)' : 'transparent',
-                              color: sectionsEditMode === opt.id ? '#fff' : 'var(--text1)',
-                              whiteSpace: 'nowrap',
-                              ...(i > 0 ? { borderLeft: '1.5px solid var(--border2)' } : {}),
-                            }}
-                          >
-                            {opt.label}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                    <p style={{ margin: '0.35rem 0 0', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.45 }}>
-                      {sectionsEditMode === 'debrief'
-                        ? 'Ist‑Minuten rechts in derselben Spaltenbreite wie „Min“ (Plan); Abweichungen als Text über die volle Breite.'
-                        : 'Ablauf, Übungen und geplante Minuten. Ist‑Werte und Abweichungen unter „Nachbereitung“.'}
-                    </p>
-                  </div>
-                ) : null}
-                <TrainingUnitSectionsEditor
-                  heading="Abschnitte & Übungen"
-                  headingAccessory={
-                    <>
-                      <button type="button" className="btn btn-secondary" onClick={handleSaveAsTemplate}>
-                        Vorlage aus Aufbau speichern
-                      </button>
-                    </>
-                  }
-                  sections={formData.sections}
-                  wideExerciseGrid
-                  onSectionsChange={(updater) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      sections: updater(prev.sections),
-                    }))
-                  }
-                  onRequestTrainingModulePick={(ctx) => {
-                    void openModuleApplyModal(ctx)
-                  }}
-                  onRequestExercisePick={({ sectionIndex, itemIndex, insertBeforeIndex }) => {
-                    setExercisePickerTarget({
-                      sIdx: sectionIndex,
-                      iIdx: typeof itemIndex === 'number' ? itemIndex : undefined,
-                      insertBeforeIndex:
-                        typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
-                          ? insertBeforeIndex
-                          : undefined,
-                    })
-                    setExercisePickerOpen(true)
-                  }}
-                  onPeekExercise={(id, variantId, peekExtras) =>
-                    setPlanningPeekCtx({
-                      exerciseId: id,
-                      variantId: variantId ?? null,
-                      peekExtras: peekExtras ?? null,
-                    })
-                  }
-                  showExecutionExtras={Boolean(editingUnit) && sectionsEditMode === 'debrief'}
-                />
-                </div>
-
-                <div style={{ marginBottom: '1.75rem' }} />
-
-                {editingUnit && (
-                  <>
-                    <h3 style={{ marginTop: '0.5rem', marginBottom: '1rem' }}>Durchführung</h3>
-
-                    <div className="responsive-grid-4" style={{ marginBottom: '1rem' }}>
-                      <div className="form-row">
-                        <label className="form-label">Tatsächliches Datum</label>
-                        <input
-                          type="date"
-                          className="form-input"
-                          value={formData.actual_date}
-                          onChange={(e) => updateFormField('actual_date', e.target.value)}
-                        />
-                      </div>
-
-                      <div className="form-row">
-                        <label className="form-label">Von</label>
-                        <input
-                          type="time"
-                          className="form-input"
-                          value={formData.actual_time_start}
-                          onChange={(e) => updateFormField('actual_time_start', e.target.value)}
-                        />
-                      </div>
-
-                      <div className="form-row">
-                        <label className="form-label">Bis</label>
-                        <input
-                          type="time"
-                          className="form-input"
-                          value={formData.actual_time_end}
-                          onChange={(e) => updateFormField('actual_time_end', e.target.value)}
-                        />
-                      </div>
-
-                      <div className="form-row">
-                        <label className="form-label">Teilnehmer</label>
-                        <input
-                          type="number"
-                          className="form-input"
-                          value={formData.attendance_count}
-                          onChange={(e) => updateFormField('attendance_count', e.target.value)}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="form-row">
-                      <label className="form-label">Status</label>
-                      <select
-                        className="form-input"
-                        value={formData.status}
-                        onChange={(e) => updateFormField('status', e.target.value)}
-                      >
-                        <option value="planned">Geplant</option>
-                        <option value="completed">Durchgeführt</option>
-                        <option value="cancelled">Abgesagt</option>
-                      </select>
-                    </div>
-
-                    {formData.status === 'completed' ? (
-                      <div className="form-row" style={{ marginTop: '0.75rem' }}>
-                        <label
-                          style={{
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            gap: '10px',
-                            cursor: 'pointer',
-                            lineHeight: 1.45,
-                          }}
-                        >
-                          <input
-                            type="checkbox"
-                            checked={!!formData.debrief_completed}
-                            onChange={(e) => updateFormField('debrief_completed', e.target.checked)}
-                            style={{ marginTop: '3px' }}
-                          />
-                          <span>
-                            <strong>Rückschau erledigt</strong>
-                            <span className="muted" style={{ display: 'block', fontSize: '0.82rem', marginTop: '5px' }}>
-                              Wenn angehakt, erscheint die Einheit nicht mehr unter „Offene Rückschau“ auf dem
-                              Dashboard (Nachbereitung gilt als abgeschlossen).
-                            </span>
-                          </span>
-                        </label>
-                      </div>
-                    ) : null}
-                  </>
-                )}
-
-                <h3 style={{ marginTop: '2rem', marginBottom: '1rem' }}>Notizen</h3>
-
-                <div className="form-row">
-                  <label className="form-label">Öffentliche Notizen</label>
-                  <textarea
-                    className="form-input"
-                    rows={3}
-                    value={formData.notes}
-                    onChange={(e) => updateFormField('notes', e.target.value)}
-                    placeholder="Für Teilnehmer"
-                  />
-                </div>
-
-                <div className="form-row">
-                  <label className="form-label">Trainernotizen</label>
-                  <textarea
-                    className="form-input"
-                    rows={3}
-                    value={formData.trainer_notes}
-                    onChange={(e) => updateFormField('trainer_notes', e.target.value)}
-                  />
-                </div>
-
-                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1.5rem' }}>
-                  <button type="submit" className="btn btn-primary" style={{ flex: 1 }}>
-                    {editingUnit ? 'Speichern' : 'Erstellen'}
-                  </button>
-                  <button type="button" className="btn btn-secondary" onClick={() => setShowModal(false)}>
-                    Abbrechen
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        )}
-      <ExercisePickerModal
-        open={exercisePickerOpen}
-        multiSelect
-        enableQuickCreateDraft
-        onClose={() => {
-          setExercisePickerOpen(false)
-          setExercisePickerTarget(null)
-        }}
-        onSelectExercises={async (picked) => {
-          if (!exercisePickerTarget || !picked?.length) return
-          const rows = []
-          for (const ex of picked) {
-            const row = await hydrateExercisePlanningRow(ex)
-            if (row) rows.push(row)
-          }
-          if (!rows.length) return
-          const { sIdx, iIdx, insertBeforeIndex } = exercisePickerTarget
-          setFormData((prev) => ({
-            ...prev,
-            sections: prev.sections.map((s, si) => {
-              if (si !== sIdx) return s
-              const items = [...(s.items || [])]
-              if (typeof iIdx === 'number') {
-                const cur = items[iIdx]
-                if (!cur || cur.item_type !== 'exercise') return s
-                const [first, ...tail] = rows
-                items[iIdx] = {
-                  ...cur,
-                  exercise_id: first.exercise_id,
-                  exercise_variant_id: first.exercise_variant_id,
-                  exercise_title: first.exercise_title,
-                  variants: first.variants,
-                }
-                if (tail.length) items.splice(iIdx + 1, 0, ...tail)
-                return { ...s, items }
-              }
-              const rawAt =
-                typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
-                  ? insertBeforeIndex
-                  : items.length
-              const at = Math.max(0, Math.min(rawAt, items.length))
-              items.splice(at, 0, ...rows)
-              return { ...s, items }
-            }),
-          }))
-          setExercisePickerOpen(false)
-          setExercisePickerTarget(null)
-        }}
-      />
-      <ExercisePeekModal
-        key={planningPeekCtx != null ? String(planningPeekCtx.exerciseId) : 'plan-peek-closed'}
-        open={planningPeekCtx != null}
-        exerciseId={planningPeekCtx?.exerciseId}
-        variantId={planningPeekCtx?.variantId ?? undefined}
-        peekExtras={planningPeekCtx?.peekExtras ?? undefined}
-        onClose={() => setPlanningPeekCtx(null)}
-      />
-    </div>
-  )
-}
-
-export default TrainingPlanningPage
+/** Routen-Einstieg: Implementierung in `components/planning/TrainingPlanningPageRoot.jsx` (Phase-3 Soft-Limit). */
+export { default } from '../components/planning/TrainingPlanningPageRoot'
diff --git a/frontend/src/pages/TrainingUnitRunPage.jsx b/frontend/src/pages/TrainingUnitRunPage.jsx
index 5a7f4e1..f456325 100644
--- a/frontend/src/pages/TrainingUnitRunPage.jsx
+++ b/frontend/src/pages/TrainingUnitRunPage.jsx
@@ -1,12 +1,18 @@
 /**
  * Trainingsablauf anzeigen, drucken und lokal auf der Matte abhaken (Fortschritt im Browser gespeichert).
+ * Phasen: Ganzgruppe vs. Split (planLoc); Druck mit optional getrennten Breakout-Seiten.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import api from '../utils/api'
 import ExercisePeekModal from '../components/ExercisePeekModal'
 import CombinationPlanBracket from '../components/CombinationPlanBracket'
-import { itemStableKey, sortedSections, sortedItems } from '../utils/trainingPlanUtils'
+import {
+  buildPlanRunViewModelFromSections,
+  itemStableKey,
+  sectionsWithPlanLocForDisplay,
+  sortedItems,
+} from '../utils/trainingPlanUtils'
 import { effectiveComboMethodProfile } from '../utils/comboPlanningMethodProfile'
 
 function storageKey(unitId) {
@@ -36,6 +42,8 @@ export default function TrainingUnitRunPage() {
   const [loading, setLoading] = useState(true)
   const [checked, setChecked] = useState(() => new Set())
   const [peekCtx, setPeekCtx] = useState(null)
+  /** null | printStreamId z. B. p0-s1 — nur dieser Split-Stream in @media print */
+  const [printOnlyStreamId, setPrintOnlyStreamId] = useState(null)
 
   const loadChecked = useCallback((uid) => {
     try {
@@ -107,20 +115,245 @@ export default function TrainingUnitRunPage() {
     }
   }, [idNum, persistChecked])
 
-  const sections = useMemo(() => sortedSections(unit), [unit])
+  const sections = useMemo(() => sectionsWithPlanLocForDisplay(unit), [unit])
+  const planModel = useMemo(() => buildPlanRunViewModelFromSections(sections), [sections])
 
-  const totalPlannedMin = useMemo(() => {
-    let t = 0
-    for (const sec of sections) {
-      for (const it of sortedItems(sec)) {
-        if (it.item_type === 'exercise' && it.planned_duration_min != null) {
-          const n = Number(it.planned_duration_min)
-          if (Number.isFinite(n)) t += n
-        }
+  const printStreamOptions = useMemo(() => {
+    const opts = []
+    for (const run of planModel.runs) {
+      if (run.kind !== 'parallel' || !run.streams) continue
+      for (const st of run.streams) {
+        opts.push({
+          id: st.printStreamId,
+          label: `${run.phaseTitle ? String(run.phaseTitle).trim().slice(0, 28) : `Phase ${run.phaseOrderIndex}`} · ${st.streamTitle ? String(st.streamTitle).trim() : `Gruppe ${st.streamOrder + 1}`}`,
+        })
       }
     }
-    return t
-  }, [sections])
+    return opts
+  }, [planModel.runs])
+
+  const totalPlannedMin = planModel.totalMin
+  const showWholeGroupInView = !printOnlyStreamId
+  const showStreamColumn = (streamPrintId) => !printOnlyStreamId || streamPrintId === printOnlyStreamId
+
+  const renderSectionCard = (sec, siInUnit) => {
+    const secOrder = sec.order_index ?? siInUnit
+    const items = sortedItems(sec)
+    return (
+      <section
+        key={sec.id ?? `sec-${secOrder}-${siInUnit}`}
+        className="card training-run-section"
+        style={{ padding: '1.15rem 1.25rem' }}
+      >
+        <h2 style={{ fontSize: '1.05rem', marginBottom: '0.65rem', color: 'var(--accent-dark)' }}>
+          {sec.title || `Abschnitt ${siInUnit + 1}`}
+        </h2>
+        {sec.guidance_notes && (
+          <p
+            style={{
+              fontSize: '0.88rem',
+              color: 'var(--text2)',
+              marginBottom: '0.85rem',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            {sec.guidance_notes}
+          </p>
+        )}
+        <ul
+          style={{
+            listStyle: 'none',
+            padding: 0,
+            margin: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.65rem',
+          }}
+        >
+          {items.map((it, ii) => {
+            const ck = itemStableKey(it, secOrder, ii)
+            const done = checked.has(ck)
+
+            if (it.item_type === 'note') {
+              return (
+                <li
+                  key={ck}
+                  className={`training-run-item training-run-item--note${done ? ' training-run-item--done' : ''}`}
+                >
+                  <label
+                    style={{
+                      display: 'flex',
+                      gap: '0.75rem',
+                      alignItems: 'flex-start',
+                      cursor: 'pointer',
+                      fontSize: '0.92rem',
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      className="training-run-checkbox training-run-checkbox--printable"
+                      checked={done}
+                      onChange={() => toggle(ck)}
+                      style={{ marginTop: '4px', width: '20px', height: '20px' }}
+                    />
+                    <span style={{ whiteSpace: 'pre-wrap', color: 'var(--text2)' }}>
+                      <em style={{ fontStyle: 'normal', color: 'var(--text3)', fontSize: '0.8rem' }}>
+                        Notiz
+                      </em>
+                      <br />
+                      {it.note_body || ''}
+                    </span>
+                  </label>
+                </li>
+              )
+            }
+
+            const title =
+              it.exercise_title || (it.exercise_id ? `Übung #${it.exercise_id}` : 'Übung')
+            const variant = it.exercise_variant_name ? ` (${it.exercise_variant_name})` : ''
+            const plan = formatMin(it.planned_duration_min)
+            const extras = []
+            if (it.exercise_focus_area) extras.push(it.exercise_focus_area)
+            const exKind = String(it.exercise_kind || 'simple').toLowerCase().trim()
+            const isComboRow = exKind === 'combination'
+            const metaParts = [...extras, isComboRow ? 'Kombination' : null, plan].filter(Boolean)
+            const comboEffectiveProfile = isComboRow
+              ? effectiveComboMethodProfile(
+                  it.catalog_method_profile || {},
+                  it.planning_method_profile ?? null
+                )
+              : null
+
+            return (
+              <li
+                key={ck}
+                className={`training-run-item training-run-item--exercise${done ? ' training-run-item--done' : ''}`}
+              >
+                <label
+                  style={{
+                    display: 'flex',
+                    gap: '0.75rem',
+                    alignItems: 'flex-start',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    className="training-run-checkbox training-run-checkbox--printable"
+                    checked={done}
+                    onChange={() => toggle(ck)}
+                    style={{
+                      marginTop: '6px',
+                      width: '22px',
+                      height: '22px',
+                      flexShrink: 0,
+                    }}
+                  />
+                  <span style={{ flex: 1, minWidth: 0 }}>
+                    <span style={{ fontSize: '1.02rem', fontWeight: 600 }}>
+                      {title}
+                      {variant}
+                    </span>
+                    {metaParts.length > 0 && (
+                      <div
+                        style={{
+                          fontSize: '0.85rem',
+                          color: 'var(--text3)',
+                          marginTop: '3px',
+                          lineHeight: 1.35,
+                        }}
+                      >
+                        {metaParts.join(' · ')}
+                      </div>
+                    )}
+                    {(it.notes || it.modifications) && (
+                      <div
+                        style={{
+                          marginTop: '0.35rem',
+                          fontSize: '0.88rem',
+                          color: 'var(--text2)',
+                          whiteSpace: 'pre-wrap',
+                        }}
+                      >
+                        {it.notes && (
+                          <>
+                            <strong style={{ fontWeight: 600 }}>Coach:</strong> {it.notes}
+                          </>
+                        )}
+                        {it.modifications && (
+                          <>
+                            {it.notes ? <br /> : null}
+                            <strong style={{ fontWeight: 600 }}>Anpassung:</strong> {it.modifications}
+                          </>
+                        )}
+                      </div>
+                    )}
+                    {isComboRow && it.exercise_id ? (
+                      <div className="training-run-combo-embed">
+                        <CombinationPlanBracket
+                          methodArchetype={String(it.catalog_method_archetype || '').trim()}
+                          methodProfile={comboEffectiveProfile || {}}
+                          combinationSlots={
+                            Array.isArray(it.combination_slots) ? it.combination_slots : []
+                          }
+                          planningAdjusted={
+                            it.planning_method_profile != null &&
+                            typeof it.planning_method_profile === 'object' &&
+                            !Array.isArray(it.planning_method_profile)
+                          }
+                        />
+                      </div>
+                    ) : null}
+                    {it.exercise_id && (
+                      <div
+                        className="no-print"
+                        style={{
+                          display: 'flex',
+                          flexWrap: 'wrap',
+                          gap: '10px',
+                          marginTop: '0.55rem',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          style={{ fontSize: '0.82rem', margin: 0 }}
+                          onClick={() =>
+                            setPeekCtx({
+                              exerciseId: it.exercise_id,
+                              variantId:
+                                it.exercise_variant_id != null
+                                  ? Number(it.exercise_variant_id)
+                                  : null,
+                              peekExtras: isComboRow
+                                ? {
+                                    catalog_method_profile: it.catalog_method_profile,
+                                    planning_method_profile: it.planning_method_profile,
+                                  }
+                                : undefined,
+                            })
+                          }
+                        >
+                          Katalog (Popup)
+                        </button>
+                        <Link
+                          to={`/exercises/${it.exercise_id}`}
+                          style={{ fontSize: '0.82rem', color: 'var(--accent)' }}
+                        >
+                          Vollständige Seite öffnen
+                        </Link>
+                      </div>
+                    )}
+                  </span>
+                </label>
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+    )
+  }
 
   if (loading) {
     return (
@@ -152,21 +385,66 @@ export default function TrainingUnitRunPage() {
         onClose={() => setPeekCtx(null)}
       />
 
-      <nav className="training-run-toolbar no-print" style={{ marginBottom: '1rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+      <nav
+        className="training-run-toolbar no-print"
+        style={{
+          marginBottom: '1rem',
+          display: 'flex',
+          gap: '0.5rem',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+        }}
+      >
         <button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
           Zur Planung
         </button>
         <Link
           to={`/planning/run/${unitId}/coach`}
           className="btn btn-primary"
-          style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+          style={{
+            textDecoration: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
         >
           Im Training (Coach)
         </Link>
         <button type="button" className="btn btn-secondary" onClick={() => window.print()}>
           Drucken / PDF
         </button>
-        <button type="button" className="btn btn-secondary" title="Alle Häkchen auf dieser Matte zurücksetzen" onClick={() => confirm('Fortschritt wirklich zurücksetzen?') && clearProgress()}>
+        {printStreamOptions.length > 0 ? (
+          <label
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              fontSize: '0.86rem',
+              color: 'var(--text2)',
+            }}
+          >
+            Druck / Vorschau
+            <select
+              className="form-input"
+              style={{ marginBottom: 0, minWidth: '200px', fontSize: '0.86rem' }}
+              value={printOnlyStreamId || ''}
+              onChange={(e) => setPrintOnlyStreamId(e.target.value || null)}
+            >
+              <option value="">Gesamter Plan (empfohlen)</option>
+              {printStreamOptions.map((o) => (
+                <option key={o.id} value={o.id}>
+                  Nur: {o.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        ) : null}
+        <button
+          type="button"
+          className="btn btn-secondary"
+          title="Alle Häkchen auf dieser Matte zurücksetzen"
+          onClick={() => confirm('Fortschritt wirklich zurücksetzen?') && clearProgress()}
+        >
           Fortschritt leeren
         </button>
       </nav>
@@ -200,10 +478,81 @@ export default function TrainingUnitRunPage() {
           </span>
           {totalPlannedMin > 0 && (
             <span>
-              <strong>Geplante Zeit (Übungen):</strong> ca. {totalPlannedMin} Min.
+              <strong>Geplante Zeit (Übungen, gesamt):</strong> ca. {totalPlannedMin} Min.
             </span>
           )}
         </div>
+        {printOnlyStreamId ? (
+          <div
+            className="no-print"
+            style={{
+              marginTop: '0.75rem',
+              padding: '0.5rem 0.75rem',
+              background: 'hsl(200 40% 94%)',
+              borderRadius: '8px',
+              fontSize: '0.82rem',
+              color: 'hsl(200 25% 28%)',
+            }}
+          >
+            Vorschau wie fürs Drucken: nur die gewählte Split-Gruppe. Ganzgruppen-Blöcke sind ausgeblendet.
+          </div>
+        ) : null}
+        {planModel.mode === 'phased' && planModel.runs.length > 0 && showWholeGroupInView && (
+          <div
+            className="training-run-phase-schedule training-run-notes-print"
+            style={{
+              marginTop: '1rem',
+              padding: '0.75rem 0.9rem',
+              background: 'var(--surface2)',
+              borderRadius: '8px',
+              fontSize: '0.86rem',
+              overflowX: 'auto',
+            }}
+          >
+            <strong style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text1)' }}>
+              Zeitplanung (Summe Übungsminuten)
+            </strong>
+            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '280px' }}>
+              <thead>
+                <tr style={{ textAlign: 'left', color: 'var(--text3)', fontSize: '0.78rem' }}>
+                  <th style={{ padding: '4px 8px 4px 0', fontWeight: 600 }}>Block</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 600 }}>Art</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 600 }}> Min</th>
+                  <th style={{ padding: '4px 0 4px 8px', fontWeight: 600 }}>∑ bis hier</th>
+                </tr>
+              </thead>
+              <tbody>
+                {planModel.runs.map((run, ri) => {
+                  const cum = planModel.runCumulativeEnds[ri]
+                  const label =
+                    run.phaseTitle != null && String(run.phaseTitle).trim()
+                      ? String(run.phaseTitle).trim()
+                      : run.kind === 'legacy'
+                        ? 'Ablauf'
+                        : run.kind === 'whole_group'
+                          ? `Ganzgruppe (Phase ${run.phaseOrderIndex})`
+                          : `Parallel (Phase ${run.phaseOrderIndex})`
+                  return (
+                    <tr key={`sched-${ri}-${run.kind}`} style={{ borderTop: '1px solid var(--border)' }}>
+                      <td style={{ padding: '6px 8px 6px 0', verticalAlign: 'top' }}>{label}</td>
+                      <td style={{ padding: '6px 8px', color: 'var(--text2)', whiteSpace: 'nowrap' }}>
+                        {run.kind === 'parallel' ? 'Split' : run.kind === 'legacy' ? '—' : 'Ganzgruppe'}
+                      </td>
+                      <td style={{ padding: '6px 8px' }}>{run.minutes || '—'}</td>
+                      <td style={{ padding: '6px 0 6px 8px', fontWeight: 600 }}>{cum}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+            {unit.planned_time_start && (
+              <p style={{ margin: '0.55rem 0 0', fontSize: '0.78rem', color: 'var(--text3)', lineHeight: 1.4 }}>
+                Hinweis: Startzeit oben im Kopf; Minuten sind aus den Übungseinplanungen — ohne Pausen und ohne
+                automatische Uhrzeitliste.
+              </p>
+            )}
+          </div>
+        )}
         {unit.notes && (
           <div
             className="training-run-notes-print"
@@ -212,7 +561,7 @@ export default function TrainingUnitRunPage() {
               padding: '0.65rem 0.85rem',
               background: 'var(--accent-light)',
               borderRadius: '8px',
-              fontSize: '0.92rem'
+              fontSize: '0.92rem',
             }}
           >
             <strong>Hinweis Teilnehmer:</strong> {unit.notes}
@@ -225,171 +574,175 @@ export default function TrainingUnitRunPage() {
           Noch keine Abschnitte in diesem Plan. Unter <Link to="/planning">Planung</Link> bearbeiten.
         </p>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
-          {sections.map((sec, si) => {
-            const secOrder = sec.order_index ?? si
-            const items = sortedItems(sec)
-            return (
-              <section key={sec.id ?? `sec-${si}`} className="card training-run-section" style={{ padding: '1.15rem 1.25rem' }}>
-                <h2 style={{ fontSize: '1.05rem', marginBottom: '0.65rem', color: 'var(--accent-dark)' }}>
-                  {sec.title || `Abschnitt ${si + 1}`}
-                </h2>
-                {sec.guidance_notes && (
-                  <p style={{ fontSize: '0.88rem', color: 'var(--text2)', marginBottom: '0.85rem', whiteSpace: 'pre-wrap' }}>
-                    {sec.guidance_notes}
-                  </p>
-                )}
-                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.65rem' }}>
-                  {items.map((it, ii) => {
-                    const ck = itemStableKey(it, secOrder, ii)
-                    const done = checked.has(ck)
-
-                    if (it.item_type === 'note') {
+        <div className="training-run-body" style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          {planModel.runs.map((run, runIdx) => {
+            if (run.kind === 'parallel') {
+              const visibleStreams = run.streams.filter((st) => showStreamColumn(st.printStreamId))
+              if (!visibleStreams.length) return null
+              return (
+                <div
+                  key={`run-p-${run.phaseOrderIndex}-${runIdx}`}
+                  className="training-run-phase training-run-phase--parallel"
+                >
+                  <div
+                    className="card training-run-phase-banner"
+                    style={{
+                      padding: '0.85rem 1rem',
+                      background: 'linear-gradient(135deg, hsl(200 35% 94%), var(--surface2))',
+                      border: '1px solid hsl(200 40% 80%)',
+                      borderRadius: '10px',
+                    }}
+                  >
+                    <div style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--text3)', letterSpacing: '0.04em' }}>
+                      PARALLELE PHASE
+                    </div>
+                    <div style={{ fontSize: '1.02rem', fontWeight: 700, color: 'var(--accent-dark)', marginTop: '4px' }}>
+                      {run.phaseTitle ? String(run.phaseTitle).trim() : `Phase ${run.phaseOrderIndex}`}
+                    </div>
+                    <div style={{ fontSize: '0.82rem', color: 'var(--text2)', marginTop: '4px' }}>
+                      {printOnlyStreamId
+                        ? `Auszug eine Gruppe · ca. ${visibleStreams[0]?.minutes ?? run.minutes} Min. (Üb.)`
+                        : `Geplante Übungszeit (gesamt): ca. ${run.minutes} Min. · Jede Spalte kann separat gedruckt werden (Dropdown oder Seitenumbruch).`}
+                    </div>
+                  </div>
+                  <div
+                    className="training-run-parallel-columns"
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+                      gap: '1rem',
+                      alignItems: 'start',
+                    }}
+                  >
+                    {visibleStreams.map((st, streamIdx) => {
+                      const siUnit = (sec) => Math.max(0, sections.indexOf(sec))
                       return (
-                        <li key={ck} className={`training-run-item training-run-item--note${done ? ' training-run-item--done' : ''}`}>
-                          <label
+                        <div
+                          key={st.printStreamId}
+                          className={
+                            'training-run-breakout-stream' +
+                            (!printOnlyStreamId && streamIdx > 0
+                              ? ' training-run-breakout-stream--page-break'
+                              : '')
+                          }
+                          data-print-id={st.printStreamId}
+                        >
+                          <div
+                            className="training-run-stream-ribbon"
                             style={{
+                              marginBottom: '10px',
+                              padding: '8px 12px',
+                              borderRadius: '8px',
+                              background: 'hsl(200 38% 92%)',
+                              border: '1px dashed hsl(200 42% 58%)',
+                              fontSize: '0.88rem',
+                              fontWeight: 700,
+                              color: 'hsl(200 30% 28%)',
                               display: 'flex',
-                              gap: '0.75rem',
-                              alignItems: 'flex-start',
-                              cursor: 'pointer',
-                              fontSize: '0.92rem'
+                              flexWrap: 'wrap',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                              gap: '8px',
                             }}
                           >
-                            <input type="checkbox" className="training-run-checkbox" checked={done} onChange={() => toggle(ck)} style={{ marginTop: '4px', width: '20px', height: '20px' }} />
-                            <span style={{ whiteSpace: 'pre-wrap', color: 'var(--text2)' }}>
-                              <em style={{ fontStyle: 'normal', color: 'var(--text3)', fontSize: '0.8rem' }}>Notiz</em>
-                              <br />
-                              {it.note_body || ''}
+                            <span>
+                              {st.streamTitle ? String(st.streamTitle).trim() : `Gruppe ${st.streamOrder + 1}`}
+                              <span style={{ fontWeight: 500, marginLeft: '8px', opacity: 0.85 }}>
+                                · ca. {st.minutes} Min. (Üb.)
+                              </span>
                             </span>
-                          </label>
-                        </li>
+                            <Link
+                              className="no-print"
+                              to={`/planning/run/${unitId}/coach?atBranch=${run.phaseOrderIndex}&preferSo=${st.streamOrder}`}
+                              style={{
+                                fontSize: '0.78rem',
+                                fontWeight: 600,
+                                color: 'var(--accent-dark)',
+                                textDecoration: 'underline',
+                                textUnderlineOffset: '2px',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              Coach · Split-Punkt (Vorschlag)
+                            </Link>
+                          </div>
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                            {st.sections.map((sec) => renderSectionCard(sec, siUnit(sec)))}
+                          </div>
+                        </div>
                       )
-                    }
+                    })}
+                  </div>
+                </div>
+              )
+            }
 
-                    const title =
-                      it.exercise_title ||
-                      (it.exercise_id ? `Übung #${it.exercise_id}` : 'Übung')
-                    const variant = it.exercise_variant_name ? ` (${it.exercise_variant_name})` : ''
-                    const plan = formatMin(it.planned_duration_min)
-                    const extras = []
-                    if (it.exercise_focus_area) extras.push(it.exercise_focus_area)
-                    const exKind = String(it.exercise_kind || 'simple').toLowerCase().trim()
-                    const isComboRow = exKind === 'combination'
-                    const metaParts = [...extras, isComboRow ? 'Kombination' : null, plan].filter(Boolean)
-                    const comboEffectiveProfile = isComboRow
-                      ? effectiveComboMethodProfile(
-                          it.catalog_method_profile || {},
-                          it.planning_method_profile ?? null,
-                        )
-                      : null
+            if (!showWholeGroupInView) return null
 
-                    return (
-                      <li key={ck} className={`training-run-item training-run-item--exercise${done ? ' training-run-item--done' : ''}`}>
-                        <label
-                          style={{
-                            display: 'flex',
-                            gap: '0.75rem',
-                            alignItems: 'flex-start',
-                            cursor: 'pointer'
-                          }}
-                        >
-                          <input type="checkbox" className="training-run-checkbox" checked={done} onChange={() => toggle(ck)} style={{ marginTop: '6px', width: '22px', height: '22px', flexShrink: 0 }} />
-                          <span style={{ flex: 1, minWidth: 0 }}>
-                            <span style={{ fontSize: '1.02rem', fontWeight: 600 }}>
-                              {title}
-                              {variant}
-                            </span>
-                            {metaParts.length > 0 && (
-                              <div style={{ fontSize: '0.85rem', color: 'var(--text3)', marginTop: '3px', lineHeight: 1.35 }}>
-                                {metaParts.join(' · ')}
-                              </div>
-                            )}
-                            {(it.notes || it.modifications) && (
-                              <div style={{ marginTop: '0.35rem', fontSize: '0.88rem', color: 'var(--text2)', whiteSpace: 'pre-wrap' }}>
-                                {it.notes && (
-                                  <>
-                                    <strong style={{ fontWeight: 600 }}>Coach:</strong> {it.notes}
-                                  </>
-                                )}
-                                {it.modifications && (
-                                  <>
-                                    {it.notes ? <br /> : null}
-                                    <strong style={{ fontWeight: 600 }}>Anpassung:</strong> {it.modifications}
-                                  </>
-                                )}
-                              </div>
-                            )}
-                            {isComboRow && it.exercise_id ? (
-                              <div className="training-run-combo-embed">
-                                <CombinationPlanBracket
-                                  methodArchetype={String(it.catalog_method_archetype || '').trim()}
-                                  methodProfile={comboEffectiveProfile || {}}
-                                  combinationSlots={
-                                    Array.isArray(it.combination_slots) ? it.combination_slots : []
-                                  }
-                                  planningAdjusted={
-                                    it.planning_method_profile != null &&
-                                    typeof it.planning_method_profile === 'object' &&
-                                    !Array.isArray(it.planning_method_profile)
-                                  }
-                                />
-                              </div>
-                            ) : null}
-                            {it.exercise_id && (
-                              <div className="no-print" style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '0.55rem', alignItems: 'center' }}>
-                                <button
-                                  type="button"
-                                  className="btn btn-secondary"
-                                  style={{ fontSize: '0.82rem', margin: 0 }}
-                                  onClick={() =>
-                                    setPeekCtx({
-                                      exerciseId: it.exercise_id,
-                                      variantId:
-                                        it.exercise_variant_id != null
-                                          ? Number(it.exercise_variant_id)
-                                          : null,
-                                      peekExtras: isComboRow
-                                        ? {
-                                            catalog_method_profile: it.catalog_method_profile,
-                                            planning_method_profile: it.planning_method_profile,
-                                          }
-                                        : undefined,
-                                    })
-                                  }
-                                >
-                                  Katalog (Popup)
-                                </button>
-                                <Link
-                                  to={`/exercises/${it.exercise_id}`}
-                                  style={{ fontSize: '0.82rem', color: 'var(--accent)' }}
-                                >
-                                  Vollständige Seite öffnen
-                                </Link>
-                              </div>
-                            )}
-                          </span>
-                        </label>
-                      </li>
-                    )
-                  })}
-                </ul>
-              </section>
+            return (
+              <div
+                key={`run-wg-${run.phaseOrderIndex}-${runIdx}`}
+                className="training-run-phase training-run-phase--whole training-run-wg-block"
+              >
+                {run.kind !== 'legacy' ? (
+                  <div
+                    className="card training-run-phase-banner"
+                    style={{
+                      padding: '0.85rem 1rem',
+                      marginBottom: '0.25rem',
+                      background: 'color-mix(in srgb, var(--accent) 12%, var(--surface2))',
+                      border: '1px solid color-mix(in srgb, var(--accent) 28%, var(--border))',
+                      borderRadius: '10px',
+                    }}
+                  >
+                    <div style={{ fontSize: '0.72rem', fontWeight: 700, color: 'var(--text3)', letterSpacing: '0.04em' }}>
+                      GANZGRUPPE
+                    </div>
+                    <div style={{ fontSize: '1.02rem', fontWeight: 700, color: 'var(--accent-dark)', marginTop: '4px' }}>
+                      {run.phaseTitle ? String(run.phaseTitle).trim() : `Phase ${run.phaseOrderIndex}`}
+                    </div>
+                    <div style={{ fontSize: '0.82rem', color: 'var(--text2)', marginTop: '4px' }}>
+                      Geplante Übungszeit: ca. {run.minutes} Min.
+                    </div>
+                  </div>
+                ) : null}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+                  {run.sections.map((sec) => renderSectionCard(sec, Math.max(0, sections.indexOf(sec))))}
+                </div>
+              </div>
             )
           })}
         </div>
       )}
 
       {unit.trainer_notes && (
-        <div className="card training-run-trainer-note no-print" style={{ marginTop: '1.25rem', padding: '1rem', borderLeft: `4px solid var(--accent)` }}>
-          <div style={{ fontSize: '0.75rem', fontWeight: 700, color: 'var(--text3)', marginBottom: '0.35rem', textTransform: 'uppercase' }}>
+        <div
+          className="card training-run-trainer-note no-print"
+          style={{
+            marginTop: '1.25rem',
+            padding: '1rem',
+            borderLeft: `4px solid var(--accent)`,
+          }}
+        >
+          <div
+            style={{
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              color: 'var(--text3)',
+              marginBottom: '0.35rem',
+              textTransform: 'uppercase',
+            }}
+          >
             Nur Trainer
           </div>
           <p style={{ fontSize: '0.92rem', whiteSpace: 'pre-wrap' }}>{unit.trainer_notes}</p>
         </div>
       )}
 
-      <footer className="no-print training-run-footer" style={{ marginTop: '1.75rem', textAlign: 'center', fontSize: '0.82rem', color: 'var(--text3)' }}>
+      <footer
+        className="no-print training-run-footer"
+        style={{ marginTop: '1.75rem', textAlign: 'center', fontSize: '0.82rem', color: 'var(--text3)' }}
+      >
         Haken werden nur auf diesem Gerät gespeichert (Session — Tab schließen kann sie löschen).
       </footer>
     </div>
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index 5a46420..4d999ad 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -4,86 +4,13 @@
  * Zentrale API-Kommunikation mit automatischer Token-Injektion
  */
 
-import { stripHtmlToText } from './htmlUtils'
-import { normalizeAdvanceMode, parseComboRepSeriesCountUi } from './combinationMethodProfileUi'
+import { request, ACTIVE_CLUB_STORAGE_KEY } from '../api/client.js'
+import * as exercises from '../api/exercises.js'
+import * as planning from '../api/planning.js'
 
-const API_URL = import.meta.env.VITE_API_URL || ''
-
-/** LocalStorage + Request-Header für Mandanten-Kontext */
-export const ACTIVE_CLUB_STORAGE_KEY = 'shinkan_active_club_id'
-
-function mergeActiveClubHeader(headers = {}) {
-  const cid = localStorage.getItem(ACTIVE_CLUB_STORAGE_KEY)
-  if (cid && /^\d+$/.test(String(cid).trim())) {
-    return { ...headers, 'X-Active-Club-Id': String(cid).trim() }
-  }
-  return { ...headers }
-}
-
-/**
- * Generic API request with automatic token injection
- */
-async function request(endpoint, options = {}) {
-  const token = localStorage.getItem('authToken')
-  const method = (options.method || 'GET').toUpperCase()
-
-  const headers = mergeActiveClubHeader({
-    ...options.headers,
-  })
-  // GET ohne Body: kein Content-Type: application/json (manche Proxies/Headers stören sich)
-  if (method !== 'GET' && method !== 'HEAD') {
-    if (!headers['Content-Type'] && !headers['content-type']) {
-      headers['Content-Type'] = 'application/json'
-    }
-  }
-
-  if (token) {
-    headers['X-Auth-Token'] = token
-  }
-
-  const url = `${API_URL}${endpoint}`
-
-  try {
-    const response = await fetch(url, {
-      ...options,
-      headers,
-    })
-
-    if (!response.ok) {
-      const text = await response.text()
-      let parsed = null
-      try {
-        parsed = JSON.parse(text)
-      } catch {
-        parsed = null
-      }
-      if (parsed?.detail != null) {
-        const d = parsed.detail
-        throw new Error(typeof d === 'string' ? d : JSON.stringify(d))
-      }
-      if (response.status === 502) {
-        throw new Error(
-          'HTTP 502 (Bad Gateway): Der Reverse-Proxy hat die API nicht korrekt erreicht. Ist `shinkan-api` aktiv (`docker compose ps`, `docker logs shinkan-api`)? Bei Host-Routing nur einen Weg verwenden — alles auf Port 3003 (Nginx nach `backend:8000`) oder sauber `/api` → Backend-Port.'
-        )
-      }
-      const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
-      throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
-    }
-
-    return response.json()
-  } catch (e) {
-    if (e instanceof TypeError && (e.message === 'Failed to fetch' || e.message.includes('fetch'))) {
-      const hint =
-        API_URL && API_URL.length > 0
-          ? `Verbindung zum API unter ${API_URL} fehlgeschlagen. Läuft das Backend (z. B. Port 8098) und ist CORS erlaubt?`
-          : 'Kein VITE_API_URL gesetzt: Anfragen gehen an die Frontend-URL und schlagen oft fehl. Setze in .env z. B. VITE_API_URL=http://localhost:8098 und starte Vite neu.'
-      // Ursache oft: CORS (v. a. bei Fehler-Antworten ohne CORS-Header), Adblocker, falsche URL —
-      // Login kann trotzdem klappen wenn nur eine andere Route betroffen ist.
-      throw new Error(`${hint} [Technisch: ${e.message}; URL war ${endpoint}]`)
-    }
-    throw e
-  }
-}
+export { ACTIVE_CLUB_STORAGE_KEY }
+export * from '../api/exercises.js'
+export * from '../api/planning.js'
 
 // ============================================================================
 // Auth
@@ -399,583 +326,6 @@ export async function deleteMethod(id) {
   return request(`/api/methods/${id}`, { method: 'DELETE' })
 }
 
-// ============================================================================
-// Exercises
-// ============================================================================
-
-export async function listExercises(filters = {}) {
-  const q = new URLSearchParams()
-  Object.entries(filters).forEach(([k, v]) => {
-    if (v === undefined || v === null) return
-    if (typeof v === 'boolean') {
-      q.set(k, v ? 'true' : 'false')
-      return
-    }
-    if (Array.isArray(v)) {
-      if (v.length === 0) return
-      v.forEach((item) => {
-        if (item !== '' && item !== undefined && item !== null && String(item).trim() !== '') {
-          q.append(k, String(item))
-        }
-      })
-      return
-    }
-    if (String(v).trim() !== '') q.set(k, String(v))
-  })
-  const query = q.toString()
-  return request(`/api/exercises${query ? '?' + query : ''}`)
-}
-
-/** Formular → API-Body (M:N gemäß EXERCISES_API_SPEC + training_types) */
-export function buildExerciseApiPayload(formData, extras = {}) {
-  const num = (v) => (v === '' || v == null ? null : Number(v))
-
-  const goalHtml = formData.goal || ''
-  const execHtml = formData.execution || ''
-  const goalText = stripHtmlToText(goalHtml)
-  const execText = stripHtmlToText(execHtml)
-
-  if (!goalText && !execText) {
-    throw new Error('Ziel oder Durchführung ausfüllen (mindestens eines, auch mit Formatierung).')
-  }
-
-  const mapFocus = (formData.focus_areas_multi || [])
-    .filter((x) => x && x.focus_area_id)
-    .map((x) => ({ focus_area_id: Number(x.focus_area_id), is_primary: !!x.is_primary }))
-  const mapStyles = (formData.training_styles_multi || [])
-    .filter((x) => x && x.training_style_id)
-    .map((x) => ({ training_style_id: Number(x.training_style_id), is_primary: !!x.is_primary }))
-  const mapTTypes = (formData.training_types_multi || [])
-    .filter((x) => x && x.training_type_id)
-    .map((x) => ({ training_type_id: Number(x.training_type_id), is_primary: !!x.is_primary }))
-  const mapTg = (formData.target_groups_multi || [])
-    .filter((x) => x && x.target_group_id)
-    .map((x) => ({ target_group_id: Number(x.target_group_id), is_primary: !!x.is_primary }))
-
-  const visibilityNorm = String(formData.visibility || 'private').trim().toLowerCase()
-
-  const payload = {
-    title: (formData.title || '').trim(),
-    summary: formData.summary || null,
-    goal: goalHtml.trim() ? goalHtml : null,
-    execution: execHtml.trim() ? execHtml : null,
-    preparation: formData.preparation || null,
-    trainer_notes: formData.trainer_notes || null,
-    duration_min: num(formData.duration_min),
-    duration_max: num(formData.duration_max),
-    group_size_min: num(formData.group_size_min),
-    group_size_max: num(formData.group_size_max),
-    equipment: Array.isArray(formData.equipment) ? formData.equipment : [],
-    focus_areas_multi: mapFocus,
-    training_styles_multi: mapStyles,
-    training_types_multi: mapTTypes,
-    target_groups_multi: mapTg,
-    age_groups: [],
-    skills: (formData.skills || []).map((s) => ({
-      skill_id: s.skill_id,
-      is_primary: !!s.is_primary,
-      intensity: s.intensity || null,
-      required_level: s.required_level || null,
-      target_level: s.target_level || null,
-    })),
-    visibility: visibilityNorm,
-    status: formData.status || 'draft',
-    club_id: visibilityNorm === 'club' ? num(formData.club_id) : null,
-    exercise_kind:
-      String(formData.exercise_kind || 'simple').toLowerCase() === 'combination'
-        ? 'combination'
-        : 'simple',
-    ...extras,
-  }
-
-  const isCombo = payload.exercise_kind === 'combination'
-
-  if (isCombo) {
-    let mpObj = {}
-    const mpRaw = typeof formData.method_profile_json === 'string' ? formData.method_profile_json.trim() : ''
-    if (mpRaw) {
-      try {
-        const parsed = JSON.parse(mpRaw)
-        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-          throw new Error('Ablaufprofil muss ein JSON-Objekt sein.')
-        }
-        mpObj = parsed
-      } catch (e) {
-        if (e instanceof SyntaxError) {
-          throw new Error('Ablaufprofil (JSON): Syntax ungültig.')
-        }
-        throw e
-      }
-    }
-
-    const slotRows = Array.isArray(formData.combination_slots) ? formData.combination_slots : []
-    const combination_slots = []
-
-    function parseTimingField(raw) {
-      if (raw === '' || raw == null || raw === undefined) return undefined
-      const n = parseInt(String(raw), 10)
-      return Number.isFinite(n) ? n : undefined
-    }
-
-    for (let i = 0; i < slotRows.length; i += 1) {
-      const row = slotRows[i] || {}
-      let ids = Array.isArray(row.candidate_exercise_ids)
-        ? row.candidate_exercise_ids.map((x) => Number(x)).filter((n) => Number.isFinite(n))
-        : []
-
-      /** Legacy: noch idsText Unterstützung für Import von älteren FormStand */
-      if ((!ids || ids.length === 0) && typeof row.idsText === 'string' && row.idsText.trim()) {
-        ids = row.idsText
-          .split(/[\s,;]+/)
-          .map((s) => s.trim())
-          .filter(Boolean)
-          .map((s) => parseInt(s, 10))
-          .filter((n) => Number.isFinite(n))
-      }
-
-      combination_slots.push({
-        slot_index: i,
-        title: (typeof row.title === 'string' && row.title.trim()) || null,
-        candidate_exercise_ids: ids,
-      })
-    }
-
-    const slot_profiles_v1_next = []
-    for (let i = 0; i < slotRows.length; i += 1) {
-      const row = slotRows[i] || {}
-      const o = { slot_index: i }
-      const advanceMode = normalizeAdvanceMode(row.advance_mode)
-      if (advanceMode !== 'timed') o.advance_mode = advanceMode
-      const load = parseTimingField(row.load_sec)
-      const crs = parseTimingField(row.consecutive_reps)
-      const rsc = parseTimingField(row.rep_series_count)
-      const intra = parseTimingField(row.intra_rep_rest_sec)
-      const tran = parseTimingField(row.transition_after_sec)
-      const serienUi = parseComboRepSeriesCountUi(row.rep_series_count)
-      const allowInterSeriesPause =
-        advanceMode === 'timed' ||
-        ((advanceMode === 'rep' || advanceMode === 'manual') && serienUi >= 2)
-
-      if (advanceMode === 'timed' && load !== undefined && load >= 0) o.load_sec = Math.round(load)
-      if (crs !== undefined && crs >= 1) o.consecutive_reps = Math.round(crs)
-      if (
-        rsc !== undefined &&
-        rsc >= 1 &&
-        (advanceMode === 'rep' || advanceMode === 'manual')
-      ) {
-        o.rep_series_count = Math.round(rsc)
-      }
-      if (intra !== undefined && intra >= 0 && allowInterSeriesPause) o.intra_rep_rest_sec = Math.round(intra)
-      if (tran !== undefined && tran >= 0) o.transition_after_sec = Math.round(tran)
-      if (Object.keys(o).length > 1) slot_profiles_v1_next.push(o)
-    }
-
-    payload.method_archetype = (formData.method_archetype || '').trim() || null
-    if (slot_profiles_v1_next.length > 0) mpObj.slot_profiles_v1 = slot_profiles_v1_next
-    else delete mpObj.slot_profiles_v1
-    payload.method_profile = mpObj
-    payload.combination_slots = combination_slots
-  } else {
-    payload.method_archetype = null
-    payload.method_profile = {}
-  }
-
-  return payload
-}
-
-export async function uploadExerciseMedia(exerciseId, formData) {
-  const token = localStorage.getItem('authToken')
-  const headers = mergeActiveClubHeader({})
-  if (token) headers['X-Auth-Token'] = token
-  const response = await fetch(`${API_URL}/api/exercises/${exerciseId}/media`, {
-    method: 'POST',
-    headers,
-    body: formData,
-  })
-  if (!response.ok) {
-    const text = await response.text()
-    let parsed = null
-    try {
-      parsed = text ? JSON.parse(text) : null
-    } catch {
-      parsed = null
-    }
-    const d = parsed?.detail
-    if (
-      response.status === 409 &&
-      d &&
-      typeof d === 'object' &&
-      !Array.isArray(d) &&
-      typeof d.code === 'string'
-    ) {
-      const e = new Error(
-        typeof d.message === 'string' ? d.message : 'Upload konnte nicht verarbeitet werden',
-      )
-      e.code = d.code
-      e.status = 409
-      e.payload = d
-      throw e
-    }
-    if (response.status === 413) {
-      const nginx = (text || '').toLowerCase().includes('nginx')
-      throw new Error(
-        nginx
-          ? 'Die Anfrage ist zu groß (413). Häufig: nginx „client_max_body_size“ — z. B. große/r mehrere Videos oder Bulk-Upload. Dateien kleiner aufteilen oder Server-Limit erhöhen (Frontend-Image Neu bauen).'
-          : 'Die Anfrage ist zu groß (413). Dateigröße oder Server-Limit prüfen.',
-      )
-    }
-    const msg =
-      typeof d === 'string'
-        ? d
-        : d != null && typeof d === 'object' && typeof d.message === 'string'
-          ? d.message
-          : d != null
-            ? JSON.stringify(d)
-            : text && text.length < 400 && !/^\s*</.test(text)
-              ? `HTTP ${response.status}: ${text.trim()}`
-              : `HTTP ${response.status}`
-    throw new Error(msg)
-  }
-  return response.json()
-}
-
-export async function updateExerciseMedia(exerciseId, mediaId, data) {
-  return request(`/api/exercises/${exerciseId}/media/${mediaId}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExerciseMedia(exerciseId, mediaId) {
-  return request(`/api/exercises/${exerciseId}/media/${mediaId}`, { method: 'DELETE' })
-}
-
-export async function reorderExerciseMedia(exerciseId, mediaIds) {
-  return request(`/api/exercises/${exerciseId}/media/reorder`, {
-    method: 'PUT',
-    body: JSON.stringify({ media_ids: mediaIds }),
-  })
-}
-
-/** Papierkorb / Recovery — `action`: trash_soft | trash_hidden | recover | purge | reactivate */
-export async function postMediaAssetLifecycle(assetId, action, extra = {}) {
-  return request(`/api/media-assets/${assetId}/lifecycle`, {
-    method: 'POST',
-    body: JSON.stringify({ action, ...extra }),
-  })
-}
-
-/** Archiv: aktive media_assets sichtbar für den Nutzer (Bibliotheksrechte). */
-export async function listMediaAssets(params = {}) {
-  const sp = new URLSearchParams()
-  if (params.q) sp.set('q', params.q)
-  if (params.limit != null) sp.set('limit', String(params.limit))
-  if (params.offset != null) sp.set('offset', String(params.offset))
-  if (params.lifecycle) sp.set('lifecycle', String(params.lifecycle))
-  if (params.media_kind) sp.set('media_kind', String(params.media_kind))
-  if (params.club_id != null && params.club_id !== '') sp.set('club_id', String(params.club_id))
-  if (params.uploaded_by != null && params.uploaded_by !== '') sp.set('uploaded_by', String(params.uploaded_by))
-  if (params.include_filter_meta) sp.set('include_filter_meta', 'true')
-  const qs = sp.toString()
-  return request(`/api/media-assets${qs ? `?${qs}` : ''}`)
-}
-
-export async function patchMediaAsset(assetId, data) {
-  return request(`/api/media-assets/${assetId}`, {
-    method: 'PATCH',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function bulkMediaLifecycle(data) {
-  return request('/api/media-assets/bulk-lifecycle', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function bulkPatchMediaAssets(data) {
-  return request('/api/media-assets/bulk-patch', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-/**
- * Mehrere Dateien ins Medienarchiv (`POST /api/media-assets/bulk-upload`).
- * @param {File[]} files
- * @param {{ visibility?: string, club_id?: number }} [options]
- */
-export async function bulkUploadMediaAssets(files, options = {}) {
-  const visibility = options.visibility || 'private'
-  const token = localStorage.getItem('authToken')
-  const headers = mergeActiveClubHeader({})
-  if (token) headers['X-Auth-Token'] = token
-  const formData = new FormData()
-  formData.append('visibility', String(visibility))
-  if (options.club_id != null && options.club_id !== '') {
-    formData.append('club_id', String(options.club_id))
-  }
-  // Copyright + P-06: Rechte-Erklaerung + Kontextfelder
-  if (options.copyright_notice != null && String(options.copyright_notice).trim())
-    formData.append('copyright_notice', String(options.copyright_notice).trim())
-  const p06Fields = [
-    'rights_holder_confirmed',
-    'contains_identifiable_persons',
-    'person_consent_confirmed',
-    'person_consent_context',
-    'contains_minors',
-    'parental_consent_confirmed',
-    'parental_consent_context',
-    'contains_music',
-    'music_rights_confirmed',
-    'music_rights_context',
-    'contains_third_party_content',
-    'third_party_rights_confirmed',
-    'third_party_rights_context',
-  ]
-  for (const f of p06Fields) {
-    if (options[f] != null && options[f] !== '') formData.append(f, String(options[f]))
-  }
-  const arr = Array.isArray(files) ? files : [files]
-  for (const f of arr) {
-    if (f) formData.append('files', f)
-  }
-  const url = `${API_URL}/api/media-assets/bulk-upload`
-  const response = await fetch(url, {
-    method: 'POST',
-    headers,
-    body: formData,
-  })
-  if (!response.ok) {
-    const text = await response.text()
-    let parsed = null
-    try {
-      parsed = JSON.parse(text)
-    } catch {
-      parsed = null
-    }
-    if (parsed?.detail != null) {
-      const d = parsed.detail
-      throw new Error(typeof d === 'string' ? d : JSON.stringify(d))
-    }
-    const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
-    throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
-  }
-  return response.json()
-}
-
-/** Übung: bestehendes Archiv-Medium verknüpfen (`POST /api/exercises/{id}/media/from-asset`). */
-export async function getMediaAssetJournal(assetId) {
-  return request(`/api/admin/media-rights/assets/${assetId}/journal`)
-}
-
-export async function addMediaAssetDeclarationCorrection(assetId, body) {
-  return request(`/api/admin/media-rights/assets/${assetId}/correction`, {
-    method: 'POST',
-    body: JSON.stringify(body),
-  })
-}
-
-export async function attachExerciseMediaFromAsset(exerciseId, body) {
-  return request(`/api/exercises/${exerciseId}/media/from-asset`, {
-    method: 'POST',
-    body: JSON.stringify(body),
-  })
-}
-
-// P-11: Legal-Hold-Endpunkte
-export async function setMediaAssetLegalHold(assetId, reasonCode, reasonNote) {
-  return request(`/api/admin/media-assets/${assetId}/legal-hold`, {
-    method: 'POST',
-    body: JSON.stringify({ reason_code: reasonCode, reason_note: reasonNote }),
-  })
-}
-
-export async function releaseMediaAssetLegalHold(assetId, releaseNote) {
-  return request(`/api/admin/media-assets/${assetId}/legal-hold/release`, {
-    method: 'POST',
-    body: JSON.stringify({ release_note: releaseNote }),
-  })
-}
-
-export async function listMediaAssetsWithLegalHold(limit = 100, offset = 0) {
-  return request(`/api/admin/media-assets/legal-hold?limit=${limit}&offset=${offset}`)
-}
-
-export async function getExercise(id) {
-  return request(`/api/exercises/${id}`)
-}
-
-export async function createExercise(data) {
-  return request('/api/exercises', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function updateExercise(id, data) {
-  const token = localStorage.getItem('authToken')
-  const headers = mergeActiveClubHeader({ 'Content-Type': 'application/json' })
-  if (token) headers['X-Auth-Token'] = token
-  const url = `${API_URL}/api/exercises/${id}`
-  const response = await fetch(url, {
-    method: 'PUT',
-    headers,
-    body: JSON.stringify(data),
-  })
-  if (!response.ok) {
-    const text = await response.text()
-    let parsed = null
-    try {
-      parsed = JSON.parse(text)
-    } catch {
-      parsed = null
-    }
-    const d = parsed?.detail
-    if (
-      response.status === 422 &&
-      d &&
-      typeof d === 'object' &&
-      !Array.isArray(d) &&
-      typeof d.code === 'string'
-    ) {
-      const e = new Error(typeof d.message === 'string' ? d.message : 'Validierung fehlgeschlagen')
-      e.status = 422
-      e.code = d.code
-      e.payload = d
-      throw e
-    }
-    if (parsed?.detail != null) {
-      const msg = typeof parsed.detail === 'string' ? parsed.detail : JSON.stringify(parsed.detail)
-      throw new Error(msg)
-    }
-    const snippet = (text || '').replace(/\s+/g, ' ').trim().slice(0, 180)
-    throw new Error(snippet ? `HTTP ${response.status}: ${snippet}` : `HTTP ${response.status}`)
-  }
-  return response.json()
-}
-
-/** Massenänderung Übungen: Sichtbarkeit, Status, Katalog-Zuordnungen (`PATCH /api/exercises/bulk-metadata`). */
-export async function bulkPatchExercisesMetadata(data) {
-  return request('/api/exercises/bulk-metadata', {
-    method: 'PATCH',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExercise(id) {
-  return request(`/api/exercises/${id}`, { method: 'DELETE' })
-}
-
-export async function createExerciseVariant(exerciseId, data) {
-  return request(`/api/exercises/${exerciseId}/variants`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function updateExerciseVariant(exerciseId, variantId, data) {
-  return request(`/api/exercises/${exerciseId}/variants/${variantId}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExerciseVariant(exerciseId, variantId) {
-  return request(`/api/exercises/${exerciseId}/variants/${variantId}`, { method: 'DELETE' })
-}
-
-export async function reorderExerciseVariants(exerciseId, variantIds) {
-  return request(`/api/exercises/${exerciseId}/variants/reorder`, {
-    method: 'PUT',
-    body: JSON.stringify({ variant_ids: variantIds }),
-  })
-}
-
-// Progressionsgraphen (Übung → Übung), Migration 032/033
-export async function listExerciseProgressionGraphs() {
-  return request('/api/exercise-progression-graphs')
-}
-
-export async function getExerciseProgressionGraph(id, { includeEdges = false } = {}) {
-  const q = includeEdges ? '?include_edges=true' : ''
-  return request(`/api/exercise-progression-graphs/${id}${q}`)
-}
-
-export async function createExerciseProgressionGraph(data) {
-  return request('/api/exercise-progression-graphs', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function updateExerciseProgressionGraph(id, data) {
-  return request(`/api/exercise-progression-graphs/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExerciseProgressionGraph(id) {
-  return request(`/api/exercise-progression-graphs/${id}`, { method: 'DELETE' })
-}
-
-export async function listExerciseProgressionEdges(graphId, query = {}) {
-  const q = new URLSearchParams()
-  if (query.from_exercise_id != null) q.set('from_exercise_id', String(query.from_exercise_id))
-  if (query.to_exercise_id != null) q.set('to_exercise_id', String(query.to_exercise_id))
-  const qs = q.toString()
-  return request(`/api/exercise-progression-graphs/${graphId}/edges${qs ? `?${qs}` : ''}`)
-}
-
-export async function createExerciseProgressionEdge(graphId, data) {
-  return request(`/api/exercise-progression-graphs/${graphId}/edges`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function updateExerciseProgressionEdge(graphId, edgeId, data) {
-  return request(`/api/exercise-progression-graphs/${graphId}/edges/${edgeId}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExerciseProgressionEdge(graphId, edgeId) {
-  return request(`/api/exercise-progression-graphs/${graphId}/edges/${edgeId}`, { method: 'DELETE' })
-}
-
-export async function createExerciseProgressionSequence(graphId, data) {
-  return request(`/api/exercise-progression-graphs/${graphId}/edges/sequence`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteExerciseProgressionEdgesBatch(graphId, edgeIds) {
-  return request(`/api/exercise-progression-graphs/${graphId}/edges/delete-batch`, {
-    method: 'POST',
-    body: JSON.stringify({ edge_ids: edgeIds }),
-  })
-}
-
-/** KI-Ausbaustufe (EXERCISES_API_SPEC): benötigt Backend + z. B. OPENROUTER_API_KEY. */
-export async function suggestExerciseAi(payload) {
-  return request('/api/exercises/ai/suggest', {
-    method: 'POST',
-    body: JSON.stringify(payload),
-  })
-}
-
-export async function regenerateExerciseAi(exerciseId, payload) {
-  return request(`/api/exercises/${exerciseId}/ai/regenerate`, {
-    method: 'POST',
-    body: JSON.stringify(payload),
-  })
-}
-
 // ============================================================================
 // Catalogs (Admin-verwaltbare Stammdaten)
 // ============================================================================
@@ -1328,176 +678,6 @@ export async function deleteTrainerContext(id) {
   return request(`/api/trainer-contexts/${id}`, { method: 'DELETE' })
 }
 
-// ============================================================================
-// Training Planning
-// ============================================================================
-
-/** Query-Parameter wie GET /api/training-units. */
-export async function listTrainingUnits(filters = {}) {
-  const q = new URLSearchParams()
-  if (filters.group_id != null && filters.group_id !== '') {
-    q.set('group_id', String(filters.group_id))
-  }
-  if (filters.club_id != null && filters.club_id !== '') {
-    q.set('club_id', String(filters.club_id))
-  }
-  if (filters.start_date) q.set('start_date', filters.start_date)
-  if (filters.end_date) q.set('end_date', filters.end_date)
-  if (filters.status) q.set('status', filters.status)
-  if (filters.debrief_pending === true) q.set('debrief_pending', 'true')
-  if (filters.assigned_to_me === true) q.set('assigned_to_me', 'true')
-  if (filters.sort) q.set('sort', String(filters.sort))
-  if (filters.limit != null && filters.limit !== '') q.set('limit', String(filters.limit))
-  if (filters.cursor_planned_date) q.set('cursor_planned_date', String(filters.cursor_planned_date))
-  if (filters.cursor_planned_time != null && filters.cursor_planned_time !== '') {
-    q.set('cursor_planned_time', String(filters.cursor_planned_time))
-  }
-  if (filters.cursor_id != null && filters.cursor_id !== '') q.set('cursor_id', String(filters.cursor_id))
-  const qs = q.toString()
-  return request(`/api/training-units${qs ? `?${qs}` : ''}`)
-}
-
-/** Dashboard Kurzüberblick: Entwürfe / meine Übungen / YTD abgeschlossene Einheiten (ein Roundtrip). */
-export async function getDashboardKpis() {
-  return request('/api/dashboard/kpis')
-}
-
-/** Dashboard: Übungen in geplanten Einheiten, die für den Verein noch auf Sichtbarkeit „Verein“ gehören. */
-export async function getTrainingExerciseClubVisibilityQueue(filters = {}) {
-  const q = new URLSearchParams()
-  if (filters.start_date) q.set('start_date', String(filters.start_date))
-  if (filters.end_date) q.set('end_date', String(filters.end_date))
-  if (filters.assigned_to_me === false) q.set('assigned_to_me', 'false')
-  if (filters.limit_units != null && filters.limit_units !== '') {
-    q.set('limit_units', String(filters.limit_units))
-  }
-  const qs = q.toString()
-  return request(`/api/training-units/exercises-club-visibility-queue${qs ? `?${qs}` : ''}`)
-}
-
-export async function getTrainingUnit(id) {
-  return request(`/api/training-units/${id}`)
-}
-
-export async function createTrainingUnit(data) {
-  return request('/api/training-units', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function updateTrainingUnit(id, data) {
-  return request(`/api/training-units/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function deleteTrainingUnit(id) {
-  return request(`/api/training-units/${id}`, { method: 'DELETE' })
-}
-
-export async function quickCreateTrainingUnit(data) {
-  return request('/api/training-units/quick-create', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  })
-}
-
-/** Rahmen-Slot → geplante Einheit (tiefe Kopie, origin_framework_slot_id). */
-export async function createTrainingUnitFromFrameworkSlot(data) {
-  return request('/api/training-units/from-framework-slot', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function listTrainingPlanTemplates() {
-  return request('/api/training-plan-templates')
-}
-
-export async function getTrainingPlanTemplate(id) {
-  return request(`/api/training-plan-templates/${id}`)
-}
-
-export async function createTrainingPlanTemplate(data) {
-  return request('/api/training-plan-templates', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function updateTrainingPlanTemplate(id, data) {
-  return request(`/api/training-plan-templates/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data)
-  })
-}
-
-export async function deleteTrainingPlanTemplate(id) {
-  return request(`/api/training-plan-templates/${id}`, { method: 'DELETE' })
-}
-
-export async function listTrainingModules() {
-  return request('/api/training-modules')
-}
-
-export async function getTrainingModule(id) {
-  return request(`/api/training-modules/${id}`)
-}
-
-export async function createTrainingModule(data) {
-  return request('/api/training-modules', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function updateTrainingModule(id, data) {
-  return request(`/api/training-modules/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteTrainingModule(id) {
-  return request(`/api/training-modules/${id}`, { method: 'DELETE' })
-}
-
-/** Kopiert Modul-Inhalte ans Ende eines Abschnitts (section_order_index 0-basiert). */
-export async function applyTrainingModuleToTrainingUnit(unitId, data) {
-  return request(`/api/training-units/${unitId}/apply-training-module`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function listTrainingFrameworkPrograms() {
-  return request('/api/training-framework-programs')
-}
-
-export async function getTrainingFrameworkProgram(id) {
-  return request(`/api/training-framework-programs/${id}`)
-}
-
-export async function createTrainingFrameworkProgram(data) {
-  return request('/api/training-framework-programs', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function updateTrainingFrameworkProgram(id, data) {
-  return request(`/api/training-framework-programs/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-export async function deleteTrainingFrameworkProgram(id) {
-  return request(`/api/training-framework-programs/${id}`, { method: 'DELETE' })
-}
-
 // ============================================================================
 // Version & Health
 // ============================================================================
@@ -1567,74 +747,11 @@ export const api = {
   updateMethod,
   deleteMethod,
 
-  // Exercises
-  listExercises,
-  getExercise,
-  createExercise,
-  updateExercise,
-  bulkPatchExercisesMetadata,
-  deleteExercise,
-  createExerciseVariant,
-  updateExerciseVariant,
-  deleteExerciseVariant,
-  reorderExerciseVariants,
-  buildExerciseApiPayload,
-  suggestExerciseAi,
-  regenerateExerciseAi,
-  uploadExerciseMedia,
-  updateExerciseMedia,
-  deleteExerciseMedia,
-  reorderExerciseMedia,
-  postMediaAssetLifecycle,
-  listMediaAssets,
-  patchMediaAsset,
-  bulkMediaLifecycle,
-  bulkPatchMediaAssets,
-  bulkUploadMediaAssets,
-  getMediaAssetJournal,
-  addMediaAssetDeclarationCorrection,
-  attachExerciseMediaFromAsset,
-  setMediaAssetLegalHold,
-  releaseMediaAssetLegalHold,
-  listMediaAssetsWithLegalHold,
-  listExerciseProgressionGraphs,
-  getExerciseProgressionGraph,
-  createExerciseProgressionGraph,
-  updateExerciseProgressionGraph,
-  deleteExerciseProgressionGraph,
-  listExerciseProgressionEdges,
-  createExerciseProgressionEdge,
-  updateExerciseProgressionEdge,
-  deleteExerciseProgressionEdge,
-  createExerciseProgressionSequence,
-  deleteExerciseProgressionEdgesBatch,
+  // Exercises + Medien/Archiv (Progression, KI) → frontend/src/api/exercises.js
+  ...exercises,
 
-  // Training Planning
-  listTrainingUnits,
-  getDashboardKpis,
-  getTrainingExerciseClubVisibilityQueue,
-  getTrainingUnit,
-  createTrainingUnit,
-  updateTrainingUnit,
-  deleteTrainingUnit,
-  quickCreateTrainingUnit,
-  createTrainingUnitFromFrameworkSlot,
-  listTrainingPlanTemplates,
-  getTrainingPlanTemplate,
-  createTrainingPlanTemplate,
-  updateTrainingPlanTemplate,
-  deleteTrainingPlanTemplate,
-  listTrainingModules,
-  getTrainingModule,
-  createTrainingModule,
-  updateTrainingModule,
-  deleteTrainingModule,
-  applyTrainingModuleToTrainingUnit,
-  listTrainingFrameworkPrograms,
-  getTrainingFrameworkProgram,
-  createTrainingFrameworkProgram,
-  updateTrainingFrameworkProgram,
-  deleteTrainingFrameworkProgram,
+  // Training Planning → frontend/src/api/planning.js
+  ...planning,
 
   // Catalogs
   listFocusAreas,
diff --git a/frontend/src/utils/trainingPlanUtils.js b/frontend/src/utils/trainingPlanUtils.js
index db4139d..df92ca6 100644
--- a/frontend/src/utils/trainingPlanUtils.js
+++ b/frontend/src/utils/trainingPlanUtils.js
@@ -2,7 +2,15 @@
  * Hilfen für Trainingsplan-Ansicht, Coach-Modus und API-Payload für PUT /training-units/:id.
  */
 
-import { cloneJsonSerializablePlanningProfile } from './trainingUnitSectionsForm'
+import {
+  buildPlanPayloadForSave,
+  cloneJsonSerializablePlanningProfile,
+  defaultPlanLocWholeGroup,
+  inheritPlanLocForPhasedSave,
+  phaseRunsFromSections,
+  sectionIndicesForParallelStream,
+  streamsForParallelPhaseOrders,
+} from './trainingUnitSectionsForm'
 export function sortedSections(unit) {
   const raw = unit?.sections
   if (!Array.isArray(raw)) return []
@@ -20,10 +28,352 @@ export function itemStableKey(it, secOrder, ix) {
   return `${secOrder}-${it?.item_type || 'row'}-${ix}`
 }
 
-/** Flache Reihenfolge wie auf der Matte: alle Notizen und Übungen nacheinander. */
-export function flattenPlanTimeline(unit) {
+export function sumExerciseMinutesInSection(sec) {
+  let t = 0
+  for (const it of sortedItems(sec)) {
+    if (it.item_type === 'exercise' && it.planned_duration_min != null) {
+      const n = Number(it.planned_duration_min)
+      if (Number.isFinite(n)) t += n
+    }
+  }
+  return t
+}
+
+/**
+ * GET liefert `planLoc` oft nicht auf flachen `sections`, aber `unit.phases` (verschachtelt).
+ * Baut pro Abschnitt `planLoc` für phaseRuns / Darstellung (camelCase wie im Editor).
+ */
+function planLocBySectionIdFromPhases(phases) {
+  const byId = new Map()
+  if (!Array.isArray(phases)) return byId
+  for (const ph of phases) {
+    const po = Number(ph.order_index ?? ph.orderIndex ?? 0) || 0
+    const pk = String(ph.phase_kind ?? ph.phaseKind ?? '')
+      .toLowerCase()
+      .trim()
+    const phaseTitle = ph.title ?? ph.phaseTitle ?? null
+    const phaseGuidanceNotes = ph.guidance_notes ?? ph.guidanceNotes ?? null
+    if (pk === 'whole_group') {
+      for (const sec of ph.sections || []) {
+        const sid = sec.id != null ? Number(sec.id) : NaN
+        if (!Number.isFinite(sid)) continue
+        byId.set(sid, {
+          phaseKind: 'whole_group',
+          phaseOrderIndex: po,
+          parallelStreamOrderIndex: null,
+          phaseTitle,
+          phaseGuidanceNotes,
+          streamTitle: null,
+          streamNotes: null,
+          streamAssignedTrainerProfileIds: null,
+        })
+      }
+    } else if (pk === 'parallel') {
+      for (const st of ph.streams || []) {
+        const so = Number(st.order_index ?? st.orderIndex ?? 0) || 0
+        const streamTitle = st.title ?? st.streamTitle ?? null
+        const streamNotes = st.notes ?? st.streamNotes ?? null
+        const streamAssignedTrainerProfileIds =
+          st.assigned_trainer_profile_ids ?? st.streamAssignedTrainerProfileIds ?? null
+        for (const sec of st.sections || []) {
+          const sid = sec.id != null ? Number(sec.id) : NaN
+          if (!Number.isFinite(sid)) continue
+          byId.set(sid, {
+            phaseKind: 'parallel',
+            phaseOrderIndex: po,
+            parallelStreamOrderIndex: so,
+            phaseTitle,
+            phaseGuidanceNotes,
+            streamTitle,
+            streamNotes,
+            streamAssignedTrainerProfileIds,
+          })
+        }
+      }
+    }
+  }
+  return byId
+}
+
+function maxPhaseOrderIndexFromNestedPhases(phases) {
+  let m = -1
+  if (!Array.isArray(phases)) return m
+  for (const ph of phases) {
+    const po = Number(ph.order_index ?? ph.orderIndex ?? 0)
+    if (Number.isFinite(po)) m = Math.max(m, po)
+  }
+  return m
+}
+
+export function sectionsWithPlanLocForDisplay(unit) {
+  const sorted = sortedSections(unit)
+  const byId = planLocBySectionIdFromPhases(unit?.phases)
+  const merged = sorted.map((s) => {
+    const sid = s.id != null ? Number(s.id) : NaN
+    if (Number.isFinite(sid) && byId.has(sid)) {
+      return { ...s, planLoc: { ...byId.get(sid) } }
+    }
+    if (s.planLoc && s.planLoc.phaseKind) return s
+    return { ...s }
+  })
+  const inherited = inheritPlanLocForPhasedSave(merged)
+  const maxPhPo = maxPhaseOrderIndexFromNestedPhases(unit?.phases)
+  return inherited.map((s) => {
+    const sid = s.id != null ? Number(s.id) : NaN
+    if (!Number.isFinite(sid) || byId.has(sid)) return s
+    const pl = s.planLoc
+    if (pl?.phaseKind === 'parallel') {
+      const po = maxPhPo >= 0 ? maxPhPo + 1 : 0
+      return {
+        ...s,
+        planLoc: {
+          ...defaultPlanLocWholeGroup(po),
+          phaseTitle: pl.phaseTitle ?? null,
+          phaseGuidanceNotes: pl.phaseGuidanceNotes ?? null,
+        },
+      }
+    }
+    return s
+  })
+}
+
+/**
+ * Läuft auf bereits angereichter Abschnittsliste (gleiche Objektreferenzen wie in Slices).
+ */
+export function buildPlanRunViewModelFromSections(sections) {
+  if (!sections.length) {
+    return { mode: 'empty', runs: [], totalMin: 0, runCumulativeEnds: [] }
+  }
+
+  const runsMeta = phaseRunsFromSections(sections)
+  const runs = []
+  let cum = 0
+  const runCumulativeEnds = []
+
+  if (runsMeta.length === 0) {
+    const minutes = sections.reduce((s, sec) => s + sumExerciseMinutesInSection(sec), 0)
+    cum = minutes
+    runCumulativeEnds.push(cum)
+    runs.push({
+      kind: 'legacy',
+      phaseOrderIndex: 0,
+      phaseTitle: null,
+      minutes,
+      sections,
+      streams: null,
+      globalOrderSections: sections,
+    })
+    return { mode: 'legacy', runs, totalMin: minutes, runCumulativeEnds }
+  }
+
+  for (const r of runsMeta) {
+    const slice = sections.slice(r.start, r.end)
+    if (r.phaseKind === 'whole_group') {
+      const minutes = slice.reduce((s, sec) => s + sumExerciseMinutesInSection(sec), 0)
+      cum += minutes
+      runCumulativeEnds.push(cum)
+      const phaseTitle = slice[0]?.planLoc?.phaseTitle ?? null
+      runs.push({
+        kind: 'whole_group',
+        phaseOrderIndex: r.phaseOrderIndex,
+        phaseTitle,
+        minutes,
+        sections: slice,
+        streams: null,
+        globalOrderSections: slice,
+      })
+    } else {
+      const po = r.phaseOrderIndex
+      const streamOrders = streamsForParallelPhaseOrders(slice, po)
+      const streams = streamOrders.map((so) => {
+        const idxs = sectionIndicesForParallelStream(slice, po, so)
+        const streamSecs = idxs
+          .map((i) => slice[i])
+          .sort((a, b) => (a.order_index ?? 0) - (b.order_index ?? 0))
+        const first = streamSecs[0]
+        const streamTitle = first?.planLoc?.streamTitle ?? null
+        const minutes = streamSecs.reduce((s, sec) => s + sumExerciseMinutesInSection(sec), 0)
+        return {
+          streamOrder: so,
+          streamTitle,
+          minutes,
+          sections: streamSecs,
+          printStreamId: `p${po}-s${so}`,
+        }
+      })
+      const minutes = slice.reduce((s, sec) => s + sumExerciseMinutesInSection(sec), 0)
+      cum += minutes
+      runCumulativeEnds.push(cum)
+      const phaseTitle = slice[0]?.planLoc?.phaseTitle ?? null
+      runs.push({
+        kind: 'parallel',
+        phaseOrderIndex: po,
+        phaseTitle,
+        minutes,
+        streams,
+        sections: null,
+        globalOrderSections: slice,
+      })
+    }
+  }
+
+  return { mode: 'phased', runs, totalMin: cum, runCumulativeEnds }
+}
+
+/** @param {object} unit Trainingseinheit inkl. `sections`, optional `phases` (GET) */
+export function buildPlanRunViewModel(unit) {
+  return buildPlanRunViewModelFromSections(sectionsWithPlanLocForDisplay(unit))
+}
+
+function coachContextLabelForSection(sec, sectionsList) {
+  const pl = sec?.planLoc
+  if (!pl?.phaseKind) return 'Ablauf'
+  if (pl.phaseKind === 'whole_group') {
+    const pt = pl.phaseTitle != null && String(pl.phaseTitle).trim() ? String(pl.phaseTitle).trim() : null
+    return pt ? `Ganzgruppe · ${pt}` : 'Ganzgruppe'
+  }
+  const pt = pl.phaseTitle != null && String(pl.phaseTitle).trim() ? String(pl.phaseTitle).trim() : `Phase ${pl.phaseOrderIndex ?? 0}`
+  const so = pl.parallelStreamOrderIndex ?? 0
+  const st = pl.streamTitle != null && String(pl.streamTitle).trim() ? String(pl.streamTitle).trim() : `Gruppe ${so + 1}`
+  return `Parallel · ${pt} · ${st}`
+}
+
+export const COACH_ENTRY_BRANCH_GATE = 'branch_gate'
+
+/** Normalisierte Stream-Wahl pro paralleler Phase (Phase-Index → Stream-Order). */
+export function normalizeCoachBranchPicks(raw) {
+  const out = {}
+  if (!raw || typeof raw !== 'object') return out
+  for (const [k, v] of Object.entries(raw)) {
+    const pk = parseInt(String(k), 10)
+    const sv = typeof v === 'number' ? v : parseInt(String(v), 10)
+    if (Number.isFinite(pk) && Number.isFinite(sv)) out[pk] = sv
+  }
+  return out
+}
+
+/**
+ * URL-/Dropdown-Fokus `coachFocus` in Pick-Map mergen (fest gewählter Stream für eine Phase).
+ * @param {object} branchPicks Roh-Picks (z. B. aus Session)
+ * @param {{ phaseOrder: number, streamOrder: number }|null} coachFocusUrl z. B. ?po=&so=
+ */
+export function mergeCoachBranchPicksWithUrlFocus(branchPicks, coachFocusUrl) {
+  const m = normalizeCoachBranchPicks(branchPicks)
+  if (
+    coachFocusUrl != null &&
+    Number.isFinite(coachFocusUrl.phaseOrder) &&
+    Number.isFinite(coachFocusUrl.streamOrder)
+  ) {
+    m[coachFocusUrl.phaseOrder] = coachFocusUrl.streamOrder
+  }
+  return m
+}
+
+/** Kurzstring für SessionStorage-Schlüssel (Sortierung stabil). */
+export function coachBranchPicksStepStorageSuffix(mergedPicks) {
+  const keys = Object.keys(mergedPicks)
+    .map((k) => parseInt(String(k), 10))
+    .filter((n) => Number.isFinite(n))
+    .sort((a, b) => a - b)
+  if (!keys.length) return 'full'
+  return keys.map((k) => `p${k}-s${mergedPicks[k]}`).join('_')
+}
+
+export function coachBranchPicksStorageKey(unitId) {
+  return `sj_coach_branches_${unitId}`
+}
+
+/**
+ * Index zum Springen: Co-Trainer-Link atBranch+preferSo — Gate falls noch offen, sonst erste Kachel im Stream.
+ */
+export function findCoachTimelineJumpIndexForPhase(timeline, phaseOrder, preferStreamOrder = null) {
+  const po = Number(phaseOrder)
+  if (!Number.isFinite(po) || !Array.isArray(timeline)) return -1
+  const hint = preferStreamOrder != null && Number.isFinite(Number(preferStreamOrder)) ? Number(preferStreamOrder) : null
+  if (hint != null) {
+    const ixStream = timeline.findIndex(
+      (e) =>
+        e.entryKind !== COACH_ENTRY_BRANCH_GATE &&
+        e.runMeta?.kind === 'parallel' &&
+        e.runMeta.phaseOrderIndex === po &&
+        e.runMeta.streamOrder === hint
+    )
+    if (ixStream >= 0) return ixStream
+  }
+  const ixGate = timeline.findIndex(
+    (e) => e.entryKind === COACH_ENTRY_BRANCH_GATE && e.branchMeta?.phaseOrderIndex === po
+  )
+  return ixGate
+}
+
+/** Gruppiert die flache Coach-Timeline für den Trainingsrahmen (Überschriften + Einträge). */
+export function coachOutlineGroupsFromTimeline(timeline) {
+  const groups = []
+  for (let ix = 0; ix < timeline.length; ix++) {
+    const ent = timeline[ix]
+    let mergeKey = `ix-${ix}`
+    let heading = 'Ablauf'
+    let sub = ''
+    if (ent.entryKind === COACH_ENTRY_BRANCH_GATE) {
+      const po = ent.branchMeta?.phaseOrderIndex ?? 0
+      mergeKey = `gate-${po}`
+      heading = 'Split · Gruppe wählen'
+      const pt = ent.branchMeta?.phaseTitle
+      sub =
+        pt != null && String(pt).trim()
+          ? String(pt).trim()
+          : `Parallele Phase ${po}`
+    } else {
+      const rm = ent.runMeta
+      if (rm?.kind === 'whole_group') {
+        mergeKey = `wg-${rm.phaseOrderIndex}`
+        const pl = ent.sec?.planLoc
+        const ptt = pl?.phaseTitle
+        heading = 'Ganzgruppe'
+        sub = ptt != null && String(ptt).trim() ? String(ptt).trim() : ''
+      } else if (rm?.kind === 'parallel' && rm.streamOrder != null) {
+        mergeKey = `par-${rm.phaseOrderIndex}-s${rm.streamOrder}`
+        const pl = ent.sec?.planLoc
+        const ptt = pl?.phaseTitle
+        const stt = pl?.streamTitle
+        const ptl = ptt != null && String(ptt).trim() ? String(ptt).trim() : `Phase ${rm.phaseOrderIndex}`
+        const stl = stt != null && String(stt).trim() ? String(stt).trim() : `Gruppe ${rm.streamOrder + 1}`
+        heading = `Parallel · ${ptl}`
+        sub = stl
+      } else if (rm?.kind === 'legacy') {
+        mergeKey = 'legacy'
+        heading = 'Ablauf'
+        sub = ''
+      } else {
+        mergeKey = `misc-${ix}`
+      }
+    }
+    const prev = groups[groups.length - 1]
+    if (!prev || prev.mergeKey !== mergeKey) {
+      groups.push({ mergeKey, heading, sub, entries: [{ ix, ent }] })
+    } else {
+      prev.entries.push({ ix, ent })
+    }
+  }
+  return groups
+}
+
+/**
+ * Flache Coach-Reihenfolge. Pro paralleler Phase ohne Eintrag in branchPicks: ein sichtbarer branch_gate,
+ * damit keine verschränkten Split-Übungen, bis eine Gruppe gewählt wurde.
+ * @param {object} unit
+ * @param {object} branchPicks z. B. { 0: 1 } = Phase 0 → Stream 1
+ */
+export function flattenPlanTimeline(unit, branchPicks = {}) {
+  const sections = sectionsWithPlanLocForDisplay(unit)
+  const model = buildPlanRunViewModelFromSections(sections)
+  if (model.mode === 'empty') return []
+
+  const picks = normalizeCoachBranchPicks(branchPicks)
   const list = []
-  sortedSections(unit).forEach((sec, si) => {
+
+  const pushSectionItems = (sec, coachCtx, runMeta) => {
+    const si = Math.max(0, sections.indexOf(sec))
     const secOrder = sec.order_index ?? si
     sortedItems(sec).forEach((item, ii) => {
       list.push({
@@ -33,13 +383,165 @@ export function flattenPlanTimeline(unit) {
         flatIndex: list.length,
         sec,
         item,
+        coachContext: coachCtx,
+        runMeta: runMeta || null,
       })
     })
-  })
+  }
+
+  for (const run of model.runs) {
+    if (run.kind === 'legacy') {
+      const meta = { kind: 'legacy', phaseOrderIndex: 0, streamOrder: null }
+      for (const sec of run.globalOrderSections) {
+        pushSectionItems(sec, coachContextLabelForSection(sec, sections), meta)
+      }
+      continue
+    }
+    if (run.kind === 'whole_group') {
+      const meta = { kind: 'whole_group', phaseOrderIndex: run.phaseOrderIndex, streamOrder: null }
+      for (const sec of run.globalOrderSections) {
+        pushSectionItems(sec, coachContextLabelForSection(sec, sections), meta)
+      }
+      continue
+    }
+    if (run.kind === 'parallel') {
+      const po = run.phaseOrderIndex
+      const chosen = picks[po]
+      const hasPick = chosen !== undefined && chosen !== null && Number.isFinite(Number(chosen))
+      if (!hasPick) {
+        list.push({
+          entryKind: COACH_ENTRY_BRANCH_GATE,
+          si: -1,
+          ii: -1,
+          secOrder: -1,
+          flatIndex: list.length,
+          sec: null,
+          item: null,
+          coachContext: '',
+          branchMeta: {
+            phaseOrderIndex: po,
+            phaseTitle: run.phaseTitle,
+            streams: run.streams || [],
+          },
+          runMeta: { kind: 'parallel', phaseOrderIndex: po, streamOrder: null },
+        })
+      } else {
+        const st = run.streams?.find((x) => x.streamOrder === Number(chosen))
+        const meta = { kind: 'parallel', phaseOrderIndex: po, streamOrder: Number(chosen) }
+        if (st?.sections?.length) {
+          for (const sec of st.sections) {
+            pushSectionItems(sec, coachContextLabelForSection(sec, sections), meta)
+          }
+        }
+      }
+    }
+  }
+
   return list
 }
 
-export function summarizeTimelineEntry({ item }) {
+/** Optionen für Coach-Stream-Auswahl (phases · Gruppe). */
+export function listCoachStreamFocusOptions(unit) {
+  const model = buildPlanRunViewModelFromSections(sectionsWithPlanLocForDisplay(unit))
+  const opts = []
+  for (const run of model.runs) {
+    if (run.kind !== 'parallel' || !run.streams?.length) continue
+    const phaseLabel =
+      run.phaseTitle != null && String(run.phaseTitle).trim()
+        ? String(run.phaseTitle).trim()
+        : `Phase ${run.phaseOrderIndex}`
+    for (const st of run.streams) {
+      const gl =
+        st.streamTitle != null && String(st.streamTitle).trim()
+          ? String(st.streamTitle).trim()
+          : `Gruppe ${st.streamOrder + 1}`
+      opts.push({
+        phaseOrder: run.phaseOrderIndex,
+        streamOrder: st.streamOrder,
+        label: `${phaseLabel} · ${gl}`,
+        valueKey: `${run.phaseOrderIndex}-${st.streamOrder}`,
+      })
+    }
+  }
+  return opts
+}
+
+/** Alle Ist-Minuten-Overrides aus lokalem Delta-State für PUT (unabhängig von gefilterter Coach-Timeline). */
+export function durationOverridesMapFromDeltas(unit, deltas) {
+  const out = {}
+  if (!unit || !deltas || typeof deltas !== 'object') return out
+  const sections = sortedSections(unit)
+  sections.forEach((sec, si) => {
+    const secOrder = sec.order_index ?? si
+    sortedItems(sec).forEach((it, ii) => {
+      if (it.item_type !== 'exercise' || it.id == null) return
+      const k = itemStableKey(it, secOrder, ii)
+      const dv = deltas[k]?.actual_duration_min
+      if (dv !== undefined && dv !== '' && dv !== null && !Number.isNaN(Number(dv))) {
+        out[String(it.id)] = { actual_duration_min: Number(dv) }
+      }
+    })
+  })
+  return out
+}
+
+/** PUT-Body für Coach-Speichern: `phases` wenn Plan Phasen hat, sonst `sections` (wie Planungseditor). */
+export function buildCoachSavePlanPayload(unit, durationOverridesByItemId = {}) {
+  const withLoc = sectionsWithPlanLocForDisplay(unit)
+  const withDur = withLoc.map((sec) => ({
+    ...sec,
+    items: sortedItems(sec).map((it) => {
+      if (it.item_type !== 'exercise' || it.id == null) return it
+      const o = durationOverridesByItemId[String(it.id)]
+      const av = o?.actual_duration_min
+      if (av !== undefined && av !== '' && av !== null && Number.isFinite(Number(av))) {
+        return { ...it, actual_duration_min: Number(av) }
+      }
+      return it
+    }),
+  }))
+  return buildPlanPayloadForSave(withDur)
+}
+
+/**
+ * Nach dem letzten Block eines Streams: Rückfrage, wenn die parallele Phase mehrere Gruppen hat.
+ */
+export function coachShouldPromptSplitRejoin(unit, lastTimelineEntry) {
+  const rm = lastTimelineEntry?.runMeta
+  if (!rm || rm.kind !== 'parallel' || rm.streamOrder == null) return null
+  const model = buildPlanRunViewModelFromSections(sectionsWithPlanLocForDisplay(unit))
+  const run = model.runs.find((r) => r.kind === 'parallel' && r.phaseOrderIndex === rm.phaseOrderIndex)
+  if (!run?.streams || run.streams.length <= 1) return null
+  return {
+    phaseOrderIndex: run.phaseOrderIndex,
+    phaseTitle: run.phaseTitle,
+    streams: run.streams,
+  }
+}
+
+/**
+ * Nach dem letzten Block eines gewählten Streams: Rückfrage vor Ganzgruppenphase oder vor dem nächsten Split,
+ * wenn die aktuelle Parallelphase mehrere Streams hat.
+ */
+export function coachShouldPromptSplitRejoinTransition(unit, currentEntry, nextEntry) {
+  if (!currentEntry || !nextEntry) return null
+  const cRm = currentEntry.runMeta
+  if (!cRm || cRm.kind !== 'parallel' || cRm.streamOrder == null) return null
+  const intoWholeGroup = nextEntry.runMeta?.kind === 'whole_group'
+  const intoNextSplit = nextEntry.entryKind === COACH_ENTRY_BRANCH_GATE
+  if (!intoWholeGroup && !intoNextSplit) return null
+  return coachShouldPromptSplitRejoin(unit, currentEntry)
+}
+
+export function summarizeTimelineEntry(ent) {
+  if (!ent) return ''
+  if (ent.entryKind === COACH_ENTRY_BRANCH_GATE) {
+    const t = ent.branchMeta?.phaseTitle != null && String(ent.branchMeta.phaseTitle).trim()
+      ? String(ent.branchMeta.phaseTitle).trim()
+      : ''
+    return t ? `Split wählen · ${t}` : 'Split · Gruppe wählen'
+  }
+  const { item } = ent
   if (!item) return ''
   if (item.item_type === 'note') {
     const t = String(item.note_body || '').trim()
diff --git a/frontend/src/utils/trainingPlanningPageHelpers.js b/frontend/src/utils/trainingPlanningPageHelpers.js
new file mode 100644
index 0000000..f31ae43
--- /dev/null
+++ b/frontend/src/utils/trainingPlanningPageHelpers.js
@@ -0,0 +1,115 @@
+/** Reine Hilfen für Trainingsplanung (Kalender, Sichtbarkeits-Kurztext, Trainer-Zuordnung). */
+
+export function trainingVisibilityShortDE(visibility) {
+  const v = String(visibility || '').trim().toLowerCase()
+  if (v === 'official') return 'Öffentliche Bibliothek'
+  if (v === 'club') return 'Verein'
+  if (v === 'private') return 'Privat'
+  return visibility ? String(visibility) : ''
+}
+
+export function addDaysIsoDate(isoDay, daysDelta) {
+  const d = new Date(`${isoDay}T12:00:00`)
+  d.setDate(d.getDate() + daysDelta)
+  return d.toISOString().slice(0, 10)
+}
+
+export function pad2(n) {
+  return String(n).padStart(2, '0')
+}
+
+export function toIsoLocal(d) {
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
+}
+
+/** Montag = erster Wochentag (ISO-Woche UI) */
+export function mondayIndex(d) {
+  return (d.getDay() + 6) % 7
+}
+
+/** Kalendarische Monatsansicht: erster und letzter Tag des sichtbaren Rasters (Mo–So) */
+export function getCalendarGridRange(ym) {
+  const parts = (ym || '').split('-').map(Number)
+  const y = parts[0]
+  const m = parts[1]
+  if (!y || !m || m < 1 || m > 12) {
+    const t = new Date()
+    return { gridStart: toIsoLocal(t), gridEnd: toIsoLocal(t) }
+  }
+  const first = new Date(y, m - 1, 1)
+  const last = new Date(y, m, 0)
+  const gridStart = new Date(first)
+  gridStart.setDate(first.getDate() - mondayIndex(first))
+  const lastMon = mondayIndex(last)
+  const gridEnd = new Date(last)
+  gridEnd.setDate(last.getDate() + (6 - lastMon))
+  return { gridStart: toIsoLocal(gridStart), gridEnd: toIsoLocal(gridEnd) }
+}
+
+export function shiftCalendarMonth(ym, delta) {
+  const parts = (ym || '').split('-').map(Number)
+  const y = parts[0] || new Date().getFullYear()
+  const m = parts[1] || 1
+  const d = new Date(y, m - 1 + delta, 1)
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`
+}
+
+export function enumerateIsoDays(fromIso, toIso) {
+  const out = []
+  const cur = new Date(`${fromIso}T12:00:00`)
+  const end = new Date(`${toIso}T12:00:00`)
+  while (cur <= end) {
+    out.push(toIsoLocal(cur))
+    cur.setDate(cur.getDate() + 1)
+  }
+  return out
+}
+
+export const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+
+export function toNumList(arr) {
+  if (!Array.isArray(arr)) return []
+  const out = []
+  for (const x of arr) {
+    const n = Number(x)
+    if (Number.isFinite(n) && n >= 1) out.push(n)
+  }
+  return out
+}
+
+export const sessionAssignDefaults = () => ({
+  lead_trainer_profile_id: '',
+  session_assistants_inherit: true,
+  session_assistant_profile_ids: [],
+})
+
+/** Co_trainer_ids aus TrainingGroups (Liste/JSON) → Zahlenliste */
+export function normalizeGroupCoTrainerIds(raw) {
+  if (raw == null) return []
+  const arr = Array.isArray(raw) ? raw : []
+  const out = []
+  for (const x of arr) {
+    const n = Number(x)
+    if (Number.isFinite(n) && n >= 1) out.push(n)
+  }
+  return out
+}
+
+/** Mitgliederverzeichnis-Einträge ohne effektiven Leitungsträger als Co‑Option */
+export function filterDirectoryExcludingLead(directory, excludeLeadPid) {
+  const ex =
+    excludeLeadPid != null && excludeLeadPid !== '' && Number.isFinite(Number(excludeLeadPid))
+      ? Number(excludeLeadPid)
+      : null
+  if (ex == null) return directory
+  return directory.filter((m) => Number(m.id) !== ex)
+}
+
+/** Kurztexte für Rahmen-Herkunft (Listen + Formular-Modal). */
+export function frameworkLineageText(unit) {
+  const fpTitle = (unit.origin_framework_program_title || '').trim() || 'Rahmenprogramm'
+  const st = (unit.origin_framework_slot_title || '').trim()
+  const idx = unit.origin_framework_slot_sort_order
+  const slotBit = st || (typeof idx === 'number' ? `Session ${idx + 1}` : 'Session')
+  return { fpTitle, slotBit, fpId: unit.origin_framework_program_id }
+}
diff --git a/frontend/src/utils/trainingUnitSectionsForm.js b/frontend/src/utils/trainingUnitSectionsForm.js
index ecfacaa..f2ce62f 100644
--- a/frontend/src/utils/trainingUnitSectionsForm.js
+++ b/frontend/src/utils/trainingUnitSectionsForm.js
@@ -5,6 +5,201 @@ export function defaultSection(title = 'Hauptteil') {
   return { title, guidance_notes: '', items: [] }
 }
 
+/** Standard-`planLoc` für eine Ganzgruppen-Phase (Editor-Breakout-UI). */
+export function defaultPlanLocWholeGroup(phaseOrderIndex = 0) {
+  return {
+    phaseKind: 'whole_group',
+    phaseOrderIndex,
+    parallelStreamOrderIndex: null,
+    phaseTitle: null,
+    phaseGuidanceNotes: null,
+    streamTitle: null,
+    streamNotes: null,
+    streamAssignedTrainerProfileIds: null,
+  }
+}
+
+/** Standard-`planLoc` für einen Stream innerhalb einer parallelen Phase. */
+export function defaultPlanLocParallel(phaseOrderIndex, streamOrderIndex) {
+  return {
+    phaseKind: 'parallel',
+    phaseOrderIndex,
+    parallelStreamOrderIndex: streamOrderIndex,
+    phaseTitle: null,
+    phaseGuidanceNotes: null,
+    streamTitle: null,
+    streamNotes: null,
+    streamAssignedTrainerProfileIds: null,
+  }
+}
+
+export function planLocKey(pl) {
+  if (!pl || !pl.phaseKind) return ''
+  if (pl.phaseKind === 'whole_group') return `wg:${pl.phaseOrderIndex ?? 0}`
+  return `par:${pl.phaseOrderIndex ?? 0}:${pl.parallelStreamOrderIndex ?? 0}`
+}
+
+export function maxPhaseOrderIndexFromSections(sections) {
+  let m = -1
+  for (const s of sections || []) {
+    const pl = s?.planLoc
+    if (!pl || typeof pl.phaseOrderIndex !== 'number') continue
+    if (pl.phaseOrderIndex > m) m = pl.phaseOrderIndex
+  }
+  return m
+}
+
+/**
+ * Eindeutige Ziele für die Zuordnung eines Abschnitts (Dropdown).
+ * `template` ist ein vollständiges planLoc-Objekt zum Kopieren.
+ */
+export function buildPlanTargetOptions(sections) {
+  const map = new Map()
+  for (const s of sections || []) {
+    const pl = s?.planLoc
+    if (!pl?.phaseKind) continue
+    if (pl.phaseKind === 'whole_group') {
+      const po = pl.phaseOrderIndex ?? 0
+      const k = `wg:${po}`
+      if (!map.has(k)) {
+        const title = pl.phaseTitle != null && String(pl.phaseTitle).trim() ? String(pl.phaseTitle).trim() : ''
+        map.set(k, {
+          key: k,
+          label: title || `Ganzgruppe · Phase ${po}`,
+          template: { ...pl },
+        })
+      }
+    } else {
+      const po = pl.phaseOrderIndex ?? 0
+      const so = pl.parallelStreamOrderIndex ?? 0
+      const k = `par:${po}:${so}`
+      if (!map.has(k)) {
+        const st = pl.streamTitle != null && String(pl.streamTitle).trim() ? String(pl.streamTitle).trim() : ''
+        map.set(k, {
+          key: k,
+          label: st || `Parallel · Phase ${po} · Stream ${so}`,
+          template: { ...pl },
+        })
+      }
+    }
+  }
+  return [...map.values()].sort((a, b) => a.key.localeCompare(b.key, undefined, { numeric: true }))
+}
+
+/** Max. Streams pro paralleler Phase (UI + API-Schutz). */
+export const MAX_PARALLEL_STREAMS_PER_PHASE = 5
+
+/** Farben pro Stream-Index (max. 5 unterschiedliche Farbzyklen). */
+export function parallelStreamVisual(streamOrderIndex) {
+  const n = Math.max(0, Number(streamOrderIndex) || 0)
+  const hues = [200, 135, 38, 285, 22]
+  const h = hues[n % hues.length]
+  return {
+    border: `hsl(${h} 50% 36%)`,
+    soft: `hsl(${h} 36% 94%)`,
+    tabBg: `hsl(${h} 34% 92%)`,
+    tabBgActive: `hsl(${h} 40% 82%)`,
+  }
+}
+
+export function streamTabLabelFromIndices(sections, globalIndices) {
+  const first = globalIndices?.[0]
+  if (first === undefined || !sections?.[first]) return 'Stream'
+  const pl = sections[first].planLoc
+  const t = pl?.streamTitle != null && String(pl.streamTitle).trim() ? String(pl.streamTitle).trim() : ''
+  if (t) return t
+  const so = pl?.parallelStreamOrderIndex ?? 0
+  return `Stream ${so + 1}`
+}
+
+/** Sortierte Stream-Indizes innerhalb einer parallelen Phase (für Reiter). */
+export function streamsForParallelPhaseOrders(sections, phaseOrderIndex) {
+  const set = new Set()
+  const po = Number(phaseOrderIndex) || 0
+  for (const s of sections || []) {
+    const L = s?.planLoc
+    if (L?.phaseKind === 'parallel' && (L.phaseOrderIndex ?? 0) === po) {
+      set.add(L.parallelStreamOrderIndex ?? 0)
+    }
+  }
+  return [...set].sort((a, b) => a - b)
+}
+
+/** Globale Abschnitts-Indizes eines Streams. */
+export function sectionIndicesForParallelStream(sections, phaseOrderIndex, streamOrderIndex) {
+  const out = []
+  const po = Number(phaseOrderIndex) || 0
+  const so = Number(streamOrderIndex) || 0
+  ;(sections || []).forEach((s, i) => {
+    const L = s?.planLoc
+    if (L?.phaseKind === 'parallel' && (L.phaseOrderIndex ?? 0) === po && (L.parallelStreamOrderIndex ?? 0) === so) {
+      out.push(i)
+    }
+  })
+  return out
+}
+
+/** Abschnitte an den angegebenen globalen Indizes entfernen (mindestens ein Abschnitt bleibt). */
+export function reorderWithoutIndices(prev, removeGlobalIndices) {
+  const set = new Set(removeGlobalIndices || [])
+  const next = (prev || []).filter((_, i) => !set.has(i))
+  return next.length ? next : [defaultSection()]
+}
+
+/**
+ * Ob in den Abschnitten eines Stream-Buckets planerisch etwas steht (Übungen, Text-Anmerkungen).
+ * Trennlinien-Marker (---) zählen nicht als Inhalt.
+ */
+export function parallelStreamBucketHasContent(sections, globalIndices, separatorBody = '---') {
+  for (const gi of globalIndices || []) {
+    const sec = (sections || [])[gi]
+    if (!sec) continue
+    for (const it of sec.items || []) {
+      if ((it.item_type || '') === 'note') {
+        const b = (it.note_body || '').trim()
+        if (b && b !== separatorBody) return true
+      } else {
+        if (it.exercise_id) return true
+        if ((it.exercise_title || '').trim()) return true
+      }
+    }
+  }
+  return false
+}
+
+/** Parallele Phase auflösen: alle Abschnitte dieser Phase werden Ganzgruppe (gleicher phaseOrderIndex). */
+export function dissolveParallelPhaseToWholeGroup(sections, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  return (sections || []).map((s) => {
+    const L = s?.planLoc
+    if (L?.phaseKind !== 'parallel' || (L.phaseOrderIndex ?? 0) !== po) return s
+    return {
+      ...s,
+      planLoc: {
+        ...defaultPlanLocWholeGroup(po),
+        phaseTitle: L.phaseTitle ?? null,
+        phaseGuidanceNotes: L.phaseGuidanceNotes ?? null,
+      },
+    }
+  })
+}
+
+export function reorderWithinBucketIndices(prev, bucketGlobalIndicesSorted, oldPos, newPos) {
+  const sortedIdx = [...bucketGlobalIndicesSorted].sort((a, b) => a - b)
+  if (oldPos === newPos || oldPos < 0 || newPos < 0 || oldPos >= sortedIdx.length || newPos >= sortedIdx.length) {
+    return prev
+  }
+  const values = sortedIdx.map((gi) => prev[gi])
+  const arr = [...values]
+  const [x] = arr.splice(oldPos, 1)
+  arr.splice(newPos, 0, x)
+  const next = [...prev]
+  sortedIdx.forEach((gi, k) => {
+    next[gi] = arr[k]
+  })
+  return next
+}
+
 function normalizeCatalogMethodProfile(cp) {
   if (cp && typeof cp === 'object' && !Array.isArray(cp)) return { ...cp }
   return {}
@@ -156,65 +351,132 @@ function parseOptionalSourceTrainingModuleIdForPayload(v) {
   return Number.isFinite(n) && n >= 1 ? n : null
 }
 
+function sortByOrderIndex(arr) {
+  return [...(arr || [])].sort((a, b) => (a.order_index ?? 0) - (b.order_index ?? 0))
+}
+
+/** Katalog-Abschnitt (GET) → Editor-Zeilen inkl. Kombi/Modul-Meta — wird von Legacy `sections` und von `phases` genutzt. */
+function formItemsFromApiItems(items) {
+  return (items || []).map((it) => {
+    if (it.item_type === 'note') {
+      const sm = parseOptionalSourceTrainingModuleIdForPayload(it.source_training_module_id)
+      const rowNote = {
+        item_type: 'note',
+        note_body: it.note_body || '',
+        source_training_module_id: '',
+        source_module_title: '',
+      }
+      if (sm != null) {
+        rowNote.source_training_module_id = sm
+        rowNote.source_module_title = (
+          it.source_module_title ||
+          it.source_training_module_title ||
+          ''
+        ).trim()
+      }
+      return rowNote
+    }
+    const smEx = parseOptionalSourceTrainingModuleIdForPayload(it.source_training_module_id)
+    const ek = String(it.exercise_kind || 'simple').toLowerCase().trim()
+    const isCombo = ek === 'combination'
+    return {
+      item_type: 'exercise',
+      exercise_id: it.exercise_id,
+      exercise_kind: isCombo ? 'combination' : 'simple',
+      exercise_variant_id: isCombo ? '' : it.exercise_variant_id ?? '',
+      exercise_title: it.exercise_title || '',
+      variants: [],
+      planned_duration_min:
+        it.planned_duration_min !== null && it.planned_duration_min !== undefined
+          ? String(it.planned_duration_min)
+          : '',
+      actual_duration_min:
+        it.actual_duration_min !== null && it.actual_duration_min !== undefined
+          ? String(it.actual_duration_min)
+          : '',
+      notes: it.notes ?? '',
+      modifications: it.modifications ?? '',
+      catalog_method_archetype: String(it.catalog_method_archetype ?? '').trim(),
+      catalog_method_profile: normalizeCatalogMethodProfile(it.catalog_method_profile),
+      planning_method_profile: normalizePlanningMethodProfile(it.planning_method_profile),
+      ...(smEx != null
+        ? {
+            source_training_module_id: smEx,
+            source_module_title: (
+              it.source_module_title ||
+              it.source_training_module_title ||
+              ''
+            ).trim(),
+          }
+        : {}),
+    }
+  })
+}
+
+/** GET `phases` → flache Editor-Abschnitte mit `planLoc` (für PUT `phases` Roundtrip). */
+function normalizePhasesToFormSections(fullUnit) {
+  const phases = sortByOrderIndex(fullUnit.phases || [])
+  const out = []
+  for (const ph of phases) {
+    const pOi = ph.order_index ?? 0
+    const pk = String(ph.phase_kind || 'whole_group').toLowerCase().trim()
+    const basePhaseLoc = {
+      phaseTitle: ph.title ?? null,
+      phaseGuidanceNotes: ph.guidance_notes ?? null,
+    }
+    if (pk === 'parallel') {
+      for (const st of sortByOrderIndex(ph.streams || [])) {
+        const sOi = st.order_index ?? 0
+        const streamLoc = {
+          phaseKind: 'parallel',
+          phaseOrderIndex: pOi,
+          parallelStreamOrderIndex: sOi,
+          ...basePhaseLoc,
+          streamTitle: st.title ?? null,
+          streamNotes: st.notes ?? null,
+          streamAssignedTrainerProfileIds: st.assigned_trainer_profile_ids ?? null,
+        }
+        for (const sec of sortByOrderIndex(st.sections || [])) {
+          out.push({
+            title: sec.title,
+            guidance_notes: sec.guidance_notes || '',
+            items: formItemsFromApiItems(sec.items),
+            planLoc: { ...streamLoc },
+          })
+        }
+      }
+    } else {
+      const loc = {
+        phaseKind: 'whole_group',
+        phaseOrderIndex: pOi,
+        parallelStreamOrderIndex: null,
+        ...basePhaseLoc,
+        streamTitle: null,
+        streamNotes: null,
+        streamAssignedTrainerProfileIds: null,
+      }
+      for (const sec of sortByOrderIndex(ph.sections || [])) {
+        out.push({
+          title: sec.title,
+          guidance_notes: sec.guidance_notes || '',
+          items: formItemsFromApiItems(sec.items),
+          planLoc: { ...loc },
+        })
+      }
+    }
+  }
+  return out.length ? out : [defaultSection()]
+}
+
 export function normalizeUnitToForm(fullUnit) {
+  if (Array.isArray(fullUnit?.phases) && fullUnit.phases.length > 0) {
+    return normalizePhasesToFormSections(fullUnit)
+  }
   if (fullUnit.sections && fullUnit.sections.length) {
     return fullUnit.sections.map((sec) => ({
       title: sec.title,
       guidance_notes: sec.guidance_notes || '',
-      items: (sec.items || []).map((it) => {
-        if (it.item_type === 'note') {
-          const sm = parseOptionalSourceTrainingModuleIdForPayload(it.source_training_module_id)
-          const rowNote = {
-            item_type: 'note',
-            note_body: it.note_body || '',
-            source_training_module_id: '',
-            source_module_title: '',
-          }
-          if (sm != null) {
-            rowNote.source_training_module_id = sm
-            rowNote.source_module_title = (
-              it.source_module_title ||
-              it.source_training_module_title ||
-              ''
-            ).trim()
-          }
-          return rowNote
-        }
-        const smEx = parseOptionalSourceTrainingModuleIdForPayload(it.source_training_module_id)
-        const ek = String(it.exercise_kind || 'simple').toLowerCase().trim()
-        const isCombo = ek === 'combination'
-        return {
-          item_type: 'exercise',
-          exercise_id: it.exercise_id,
-          exercise_kind: isCombo ? 'combination' : 'simple',
-          exercise_variant_id: isCombo ? '' : it.exercise_variant_id ?? '',
-          exercise_title: it.exercise_title || '',
-          variants: [],
-          planned_duration_min:
-            it.planned_duration_min !== null && it.planned_duration_min !== undefined
-              ? String(it.planned_duration_min)
-              : '',
-          actual_duration_min:
-            it.actual_duration_min !== null && it.actual_duration_min !== undefined
-              ? String(it.actual_duration_min)
-              : '',
-          notes: it.notes ?? '',
-          modifications: it.modifications ?? '',
-          catalog_method_archetype: String(it.catalog_method_archetype ?? '').trim(),
-          catalog_method_profile: normalizeCatalogMethodProfile(it.catalog_method_profile),
-          planning_method_profile: normalizePlanningMethodProfile(it.planning_method_profile),
-          ...(smEx != null
-            ? {
-                source_training_module_id: smEx,
-                source_module_title: (
-                  it.source_module_title ||
-                  it.source_training_module_title ||
-                  ''
-                ).trim(),
-              }
-            : {}),
-        }
-      }),
+      items: formItemsFromApiItems(sec.items),
     }))
   }
   if (fullUnit.exercises && fullUnit.exercises.length) {
@@ -398,9 +660,9 @@ export function parseMin(v) {
   return Number.isFinite(n) ? n : null
 }
 
-export function buildSectionsPayload(sections) {
-  return sections.map((sec, si) => ({
-    order_index: si,
+export function buildOneSectionPayload(sec, orderIndex) {
+  return {
+    order_index: orderIndex,
     title: (sec.title || '').trim() || 'Abschnitt',
     guidance_notes: sec.guidance_notes?.trim() ? sec.guidance_notes.trim() : null,
     items: (sec.items || [])
@@ -445,7 +707,431 @@ export function buildSectionsPayload(sections) {
         return rowEx
       })
       .filter(Boolean),
-  }))
+  }
+}
+
+/** PUT /api/training-units: Legacy `sections` (eine whole_group-Phase) wenn kein `planLoc` gesetzt ist. */
+export function buildSectionsPayload(sections) {
+  return sections.map((sec, si) => buildOneSectionPayload(sec, si))
+}
+
+function stripPlanLoc(sec) {
+  if (!sec || typeof sec !== 'object') return sec
+  const { planLoc: _pl, ...rest } = sec
+  return rest
+}
+
+export function inheritPlanLocForPhasedSave(sections) {
+  let prev = {
+    phaseKind: 'whole_group',
+    phaseOrderIndex: 0,
+    parallelStreamOrderIndex: null,
+    phaseTitle: null,
+    phaseGuidanceNotes: null,
+    streamTitle: null,
+    streamNotes: null,
+    streamAssignedTrainerProfileIds: null,
+  }
+  return (sections || []).map((s) => {
+    if (s?.planLoc && s.planLoc.phaseKind) {
+      prev = { ...s.planLoc }
+      return { ...s, planLoc: prev }
+    }
+    return { ...s, planLoc: { ...prev } }
+  })
+}
+
+/** Phasen-„Runs“ in der flachen Abschnittsliste (Reihenfolge wie beim Speichern). */
+export function phaseRunsFromSections(sections) {
+  const norm = inheritPlanLocForPhasedSave(sections)
+  const runs = []
+  let i = 0
+  while (i < norm.length) {
+    const loc0 = norm[i]?.planLoc
+    if (!loc0?.phaseKind) {
+      i += 1
+      continue
+    }
+    const pOi = loc0.phaseOrderIndex ?? 0
+    const pk = loc0.phaseKind === 'parallel' ? 'parallel' : 'whole_group'
+    const start = i
+    while (i < norm.length) {
+      const L = norm[i]?.planLoc
+      if (!L?.phaseKind) break
+      const pk2 = L.phaseKind === 'parallel' ? 'parallel' : 'whole_group'
+      if ((L.phaseOrderIndex ?? 0) !== pOi || pk2 !== pk) break
+      i += 1
+    }
+    runs.push({ phaseKind: pk, phaseOrderIndex: pOi, start, end: i })
+  }
+  return runs
+}
+
+/** Vertauscht zwei unmittelbar benachbarte Runs (upperRunIndex = erste der beiden). */
+export function swapAdjacentPhaseRuns(prev, upperRunIndex) {
+  const runs = phaseRunsFromSections(prev)
+  const a = upperRunIndex
+  const b = upperRunIndex + 1
+  if (a < 0 || b >= runs.length) return prev
+  const rgA = runs[a]
+  const rgB = runs[b]
+  const head = prev.slice(0, rgA.start)
+  const blA = prev.slice(rgA.start, rgA.end)
+  const blB = prev.slice(rgB.start, rgB.end)
+  const tail = prev.slice(rgB.end)
+  return [...head, ...blB, ...blA, ...tail]
+}
+
+export function movePhaseRunUpByPhaseOrder(prev, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const runs = phaseRunsFromSections(prev)
+  const rIdx = runs.findIndex((r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po)
+  if (rIdx <= 0) return prev
+  return swapAdjacentPhaseRuns(prev, rIdx - 1)
+}
+
+export function movePhaseRunDownByPhaseOrder(prev, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const runs = phaseRunsFromSections(prev)
+  const rIdx = runs.findIndex((r) => r.phaseKind === 'parallel' && r.phaseOrderIndex === po)
+  if (rIdx < 0 || rIdx >= runs.length - 1) return prev
+  return swapAdjacentPhaseRuns(prev, rIdx)
+}
+
+/**
+ * Abschnitt verschieben und planLoc an der Einfügestelle an Nachbarn anpassen.
+ * Regel: Einfügen vor Abschnitt X übernimmt X.planLoc; am Listenende nach Parallel → neue Ganzgruppen-Phase.
+ */
+export function reorderBlocksImmutableWithPlanLoc(prev, fromI, toBeforeIdx) {
+  const arr = [...prev]
+  if (fromI < 0 || fromI >= arr.length) return prev
+  const [moved] = arr.splice(fromI, 1)
+  let insertAt = toBeforeIdx
+  if (fromI < toBeforeIdx) insertAt = toBeforeIdx - 1
+  insertAt = Math.max(0, Math.min(insertAt, arr.length))
+
+  const below = insertAt < arr.length ? arr[insertAt] : undefined
+  const above = insertAt > 0 ? arr[insertAt - 1] : undefined
+
+  let planLocNext = null
+  const belowKind = below?.planLoc?.phaseKind
+  const aboveKind = above?.planLoc?.phaseKind
+  const movedKind = moved?.planLoc?.phaseKind
+  const belowPo = below?.planLoc?.phaseOrderIndex ?? 0
+  const movedPo = moved?.planLoc?.phaseOrderIndex ?? 0
+
+  if (belowKind === 'parallel' && aboveKind === 'whole_group') {
+    if (movedKind !== 'parallel') {
+      planLocNext = { ...above.planLoc }
+    } else if (movedPo !== belowPo) {
+      planLocNext = { ...below.planLoc }
+    }
+  } else if (belowKind === 'parallel' && !above) {
+    if (movedKind !== 'parallel') {
+      planLocNext = defaultPlanLocWholeGroup(0)
+    }
+  }
+
+  if (!planLocNext && belowKind) {
+    planLocNext = { ...below.planLoc }
+  }
+  if (!planLocNext && insertAt === arr.length) {
+    if (!above) {
+      planLocNext = defaultPlanLocWholeGroup(0)
+    } else if (above.planLoc?.phaseKind === 'parallel') {
+      const mx = maxPhaseOrderIndexFromSections(arr)
+      planLocNext = defaultPlanLocWholeGroup(mx + 1)
+    } else if (above.planLoc?.phaseKind === 'whole_group') {
+      planLocNext = { ...above.planLoc }
+    }
+  }
+  if (!planLocNext && above?.planLoc?.phaseKind === 'whole_group') {
+    planLocNext = { ...above.planLoc }
+  }
+  if (!planLocNext && above?.planLoc?.phaseKind === 'parallel') {
+    const mx = maxPhaseOrderIndexFromSections(arr)
+    planLocNext = defaultPlanLocWholeGroup(mx + 1)
+  }
+
+  let nextMoved = { ...moved }
+  if (planLocNext) {
+    nextMoved = { ...moved, planLoc: planLocNext }
+  } else {
+    nextMoved = stripPlanLoc(moved)
+  }
+  arr.splice(insertAt, 0, nextMoved)
+  return arr
+}
+
+/**
+ * Abschnitt direkt vor den Parallel-Lauf setzen (immer Ganzgruppe oberhalb der Split-Phase).
+ */
+export function reorderSectionBeforeParallelRunAsWholeGroup(prev, fromI, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const idxs = indicesOfParallelPhase(prev, po)
+  if (!idxs.length || fromI < 0 || fromI >= (prev?.length ?? 0)) return prev
+  const fg = idxs[0]
+  const arr = [...prev]
+  const [moved] = arr.splice(fromI, 1)
+  let insertAt = fg
+  if (fromI < insertAt) insertAt -= 1
+  insertAt = Math.max(0, Math.min(insertAt, arr.length))
+  const above = insertAt > 0 ? arr[insertAt - 1] : undefined
+  let planLocNext
+  if (above?.planLoc?.phaseKind === 'whole_group') {
+    planLocNext = { ...above.planLoc }
+  } else if (!above) {
+    planLocNext = defaultPlanLocWholeGroup(0)
+  } else {
+    const mx = maxPhaseOrderIndexFromSections(arr)
+    planLocNext = defaultPlanLocWholeGroup(mx + 1)
+  }
+  arr.splice(insertAt, 0, { ...moved, planLoc: planLocNext })
+  return arr
+}
+
+/** Abschnitt als neuen ersten Eintrag der Parallel-Phase (gleiche Phasen-/Stream-Metadaten wie bisheriger Kopf). */
+export function reorderSectionAsFirstInParallelPhase(prev, fromI, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const idxs = indicesOfParallelPhase(prev, po)
+  if (!idxs.length || fromI < 0 || fromI >= (prev?.length ?? 0)) return prev
+  let fg = idxs[0]
+  const arr = [...prev]
+  const headTpl = { ...arr[fg].planLoc }
+  const [moved] = arr.splice(fromI, 1)
+  if (fromI < fg) fg -= 1
+  fg = Math.max(0, Math.min(fg, arr.length))
+  arr.splice(fg, 0, { ...moved, planLoc: { ...headTpl } })
+  return arr
+}
+
+/** Abschnitt als ersten Eintrag eines parallelen Streams setzen (planLoc wie erster Abschnitt dieses Streams, bzw. leerer Stream wie reorderBlockIntoParallelStreamEnd). */
+export function reorderSectionAsFirstInParallelStream(prev, fromI, phaseOrderIndex, streamOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const so = Number(streamOrderIndex) || 0
+  const len = prev?.length ?? 0
+  if (fromI < 0 || fromI >= len) return prev
+
+  const arr = [...prev]
+  const [moved] = arr.splice(fromI, 1)
+
+  const streamIdx = sectionIndicesForParallelStream(arr, po, so)
+  let insertAt
+  let headTpl
+  let skipFromIAdjust = false
+
+  if (streamIdx.length) {
+    const first = Math.min(...streamIdx)
+    headTpl = { ...arr[first].planLoc }
+    insertAt = first
+  } else {
+    const phaseIdx = indicesOfParallelPhase(arr, po)
+    if (!phaseIdx.length) {
+      const ml = moved?.planLoc
+      if (ml?.phaseKind !== 'parallel' || (ml.phaseOrderIndex ?? 0) !== po) return prev
+      headTpl = {
+        ...ml,
+        parallelStreamOrderIndex: so,
+        streamTitle: null,
+        streamNotes: null,
+        streamAssignedTrainerProfileIds: null,
+      }
+      insertAt = Math.min(fromI, arr.length)
+      skipFromIAdjust = true
+    } else {
+      const ref = arr[phaseIdx[phaseIdx.length - 1]]
+      headTpl = {
+        ...ref.planLoc,
+        parallelStreamOrderIndex: so,
+        streamTitle: null,
+        streamNotes: null,
+        streamAssignedTrainerProfileIds: null,
+      }
+      insertAt = phaseIdx[phaseIdx.length - 1] + 1
+    }
+  }
+
+  if (!skipFromIAdjust && fromI < insertAt) insertAt -= 1
+  insertAt = Math.max(0, Math.min(insertAt, arr.length))
+  arr.splice(insertAt, 0, { ...moved, planLoc: { ...headTpl } })
+  return arr
+}
+
+/**
+ * Abschnitt ans Ende eines parallelen Streams setzen (planLoc wie dieser Stream).
+ * Leerer Stream: Einfügen hinter den letzten Abschnitt der zugehörigen parallelen Phase, planLoc vom Referenz-Abschnitt mit angepasstem streamIndex.
+ */
+export function reorderBlockIntoParallelStreamEnd(prev, fromI, phaseOrderIndex, streamOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const so = Number(streamOrderIndex) || 0
+  const len = prev?.length ?? 0
+  if (fromI < 0 || fromI >= len) return prev
+  const arr = [...prev]
+  const [moved] = arr.splice(fromI, 1)
+  const streamIdx = sectionIndicesForParallelStream(arr, po, so)
+  let insertAt
+  let planLocTemplate
+
+  if (streamIdx.length) {
+    const last = Math.max(...streamIdx)
+    planLocTemplate = { ...arr[last].planLoc }
+    insertAt = last + 1
+  } else {
+    const phaseIdx = indicesOfParallelPhase(arr, po)
+    if (!phaseIdx.length) return prev
+    const ref = arr[phaseIdx[phaseIdx.length - 1]]
+    planLocTemplate = {
+      ...ref.planLoc,
+      parallelStreamOrderIndex: so,
+      streamTitle: null,
+      streamNotes: null,
+      streamAssignedTrainerProfileIds: null,
+    }
+    insertAt = phaseIdx[phaseIdx.length - 1] + 1
+  }
+
+  insertAt = Math.max(0, Math.min(insertAt, arr.length))
+  arr.splice(insertAt, 0, { ...moved, planLoc: { ...planLocTemplate } })
+  return arr
+}
+
+/** Globales insertBeforeIndex, um einen Abschnitt hinter den letzten des Streams einzufügen (z. B. Rahmen-Slots). */
+export function globalInsertBeforeIndexForParallelStreamEnd(sections, phaseOrderIndex, streamOrderIndex) {
+  const arr = sections || []
+  const po = Number(phaseOrderIndex) || 0
+  const so = Number(streamOrderIndex) || 0
+  const streamIdx = sectionIndicesForParallelStream(arr, po, so)
+  if (streamIdx.length) return Math.max(...streamIdx) + 1
+  const phaseIdx = indicesOfParallelPhase(arr, po)
+  if (!phaseIdx.length) return arr.length
+  return Math.max(...phaseIdx) + 1
+}
+
+/** Alle globalen Indizes einer parallelen Phase (alle Streams), sortiert. */
+export function indicesOfParallelPhase(sections, phaseOrderIndex) {
+  const po = Number(phaseOrderIndex) || 0
+  const out = []
+  ;(sections || []).forEach((s, i) => {
+    const L = s?.planLoc
+    if (L?.phaseKind === 'parallel' && (L.phaseOrderIndex ?? 0) === po) out.push(i)
+  })
+  return out.sort((a, b) => a - b)
+}
+
+/** Gesamten Parallel-Block an neue Position (insertBefore globale Liste) schieben. */
+export function moveParallelPhaseRunToInsertBefore(prev, phaseOrderIndex, toBeforeIdx) {
+  const po = Number(phaseOrderIndex) || 0
+  const indices = indicesOfParallelPhase(prev, po)
+  if (!indices.length) return prev
+  const indexSet = new Set(indices)
+  const blocks = indices.map((i) => prev[i])
+  const without = prev.filter((_, i) => !indexSet.has(i))
+  let ins = toBeforeIdx
+  for (const i of indices) {
+    if (i < toBeforeIdx) ins -= 1
+  }
+  ins = Math.max(0, Math.min(ins, without.length))
+  return [...without.slice(0, ins), ...blocks, ...without.slice(ins)]
+}
+
+/**
+ * Nach Drag&Drop: wenn aus einer Parallelphase noch ≤1 Stream übrig ist (vorher ≥2), Rückfrage wie beim Stream-Löschen.
+ */
+export function afterSectionReorderParallelGuard(prev, next) {
+  const seenPo = new Set()
+  for (const s of prev || []) {
+    const L = s?.planLoc
+    if (L?.phaseKind !== 'parallel') continue
+    seenPo.add(L.phaseOrderIndex ?? 0)
+  }
+  let out = next
+  for (const po of seenPo) {
+    const prevN = streamsForParallelPhaseOrders(prev, po).length
+    if (prevN < 2) continue
+    const nowN = streamsForParallelPhaseOrders(out, po).length
+    if (nowN <= 1) {
+      if (
+        window.confirm(
+          'In dieser parallelen Phase ist nur noch eine Gruppe übrig. Parallelaufbau auflösen und alle zugehörigen Abschnitte als gemeinsame Ganzgruppen-Phase führen?'
+        )
+      ) {
+        out = dissolveParallelPhaseToWholeGroup(out, po)
+      }
+    }
+  }
+  return out
+}
+
+function buildPhasesPayloadFromFlat(sections) {
+  const norm = inheritPlanLocForPhasedSave(sections)
+  const phases = []
+  let i = 0
+  while (i < norm.length) {
+    const loc0 = norm[i].planLoc
+    const pOi = loc0.phaseOrderIndex ?? 0
+    const pk = loc0.phaseKind === 'parallel' ? 'parallel' : 'whole_group'
+
+    const run = []
+    while (i < norm.length) {
+      const L = norm[i].planLoc
+      const pk2 = L.phaseKind === 'parallel' ? 'parallel' : 'whole_group'
+      if ((L.phaseOrderIndex ?? 0) !== pOi || pk2 !== pk) break
+      run.push(norm[i])
+      i += 1
+    }
+
+    const head = run[0].planLoc
+    if (pk === 'whole_group') {
+      phases.push({
+        phase_kind: 'whole_group',
+        order_index: pOi,
+        title: head.phaseTitle ?? null,
+        guidance_notes: head.phaseGuidanceNotes ?? null,
+        sections: run.map((s, idx) => buildOneSectionPayload(stripPlanLoc(s), idx)),
+      })
+    } else {
+      const byStream = new Map()
+      for (const s of run) {
+        const soi = s.planLoc.parallelStreamOrderIndex ?? 0
+        if (!byStream.has(soi)) byStream.set(soi, [])
+        byStream.get(soi).push(s)
+      }
+      const streamOrder = [...byStream.keys()].sort((a, b) => a - b)
+      const streams = streamOrder.map((soi) => {
+        const bucket = byStream.get(soi)
+        const h = bucket[0].planLoc
+        const st = {
+          order_index: soi,
+          title: h.streamTitle ?? null,
+          notes: h.streamNotes ?? null,
+          sections: bucket.map((s, idx) => buildOneSectionPayload(stripPlanLoc(s), idx)),
+        }
+        const asst = h.streamAssignedTrainerProfileIds
+        if (asst !== null && asst !== undefined) st.assigned_trainer_profile_ids = asst
+        return st
+      })
+      phases.push({
+        phase_kind: 'parallel',
+        order_index: pOi,
+        title: head.phaseTitle ?? null,
+        guidance_notes: head.phaseGuidanceNotes ?? null,
+        streams,
+      })
+    }
+  }
+  return { phases }
+}
+
+/**
+ * Speichern einer Einheit: flache `sections` oder verschachtelte `phases`, sobald `planLoc` gesetzt ist.
+ */
+export function buildPlanPayloadForSave(sections) {
+  const list = Array.isArray(sections) ? sections : []
+  const anyPhased = list.some((s) => s && s.planLoc && s.planLoc.phaseKind)
+  if (!anyPhased) {
+    return { sections: buildSectionsPayload(list) }
+  }
+  return buildPhasesPayloadFromFlat(list)
 }
 
 /** Fügt die Positionen eines Moduls in lokale Abschnitte ein (wie eine Übung, ohne Zwischenspeichern der Einheit). */
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
index cbcc1fb..38eed2d 100644
--- a/test-results/.last-run.json
+++ b/test-results/.last-run.json
@@ -1,4 +1,8 @@
 {
-  "status": "passed",
-  "failedTests": []
+  "status": "failed",
+  "failedTests": [
+    "d6ae548bbe32e0652471-c2435d34f500841a9fcc",
+    "d6ae548bbe32e0652471-6495823d1677ce34da5c",
+    "d6ae548bbe32e0652471-b581d2777c999619d7af"
+  ]
 }
\ No newline at end of file
diff --git a/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/error-context.md b/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/error-context.md
new file mode 100644
index 0000000..85f8b37
--- /dev/null
+++ b/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/error-context.md
@@ -0,0 +1,137 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: dev-smoke-test.spec.js >> 11. Übungsliste: Massenauswahl zeigt Bulk-Toolbar
+- Location: tests\dev-smoke-test.spec.js:253:1
+
+# Error details
+
+```
+Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+Call log:
+  - navigating to "http://127.0.0.1:3098/", waiting until "load"
+
+```
+
+# Test source
+
+```ts
+  1   | const { test, expect } = require('@playwright/test');
+  2   | 
+  3   | const TEST_EMAIL    = process.env.TEST_EMAIL    || 'lars@stommer.com';
+  4   | const TEST_PASSWORD = process.env.TEST_PASSWORD || '12345678';
+  5   | 
+  6   | /** Primärer Submit auf der Login-Seite (nicht den Tab "Login" vs. "Registrieren"). */
+  7   | async function submitLoginForm(page) {
+  8   |   await page.getByRole('button', { name: 'Anmelden' }).click();
+  9   | }
+  10  | 
+  11  | async function login(page) {
+> 12  |   await page.goto('/');
+      |              ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+  13  |   await page.waitForLoadState('networkidle');
+  14  | 
+  15  |   // Warte bis Login-Seite geladen ist
+  16  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  17  | 
+  18  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  19  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  20  |   await submitLoginForm(page);
+  21  |   // Wait until auth is complete: URL leaves /login and Dashboard is rendered
+  22  |   await page.waitForURL((url) => !url.toString().includes('/login'), { timeout: 15000 });
+  23  |   await page.waitForLoadState('networkidle');
+  24  | }
+  25  | 
+  26  | test('1. Login funktioniert', async ({ page }) => {
+  27  |   await page.goto('/');
+  28  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  29  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  30  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  31  |   await submitLoginForm(page);
+  32  |   await page.waitForLoadState('networkidle');
+  33  | 
+  34  |   // Nach Login soll der Tab "Login" (Moduswahl) verschwinden — nicht der Submit "Anmelden"
+  35  |   const loginButton = page.locator('button:has-text("Login")');
+  36  |   await expect(loginButton).toHaveCount(0, { timeout: 10000 });
+  37  | 
+  38  |   await page.screenshot({ path: 'screenshots/01-nach-login.png' });
+  39  |   console.log('✓ Login erfolgreich');
+  40  | });
+  41  | 
+  42  | test('2. Dashboard lädt ohne Fehler', async ({ page }) => {
+  43  |   await login(page);
+  44  | 
+  45  |   // Warte bis Spinner verschwunden
+  46  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  47  | 
+  48  |   // Dashboard: h1 „Dashboard“ + Begrüßungstext (nicht mehr „Willkommen bei Shinkan“ als Überschrift)
+  49  |   const main = page.locator('.app-main');
+  50  |   await expect(main.getByRole('heading', { level: 1, name: 'Dashboard' })).toBeVisible({
+  51  |     timeout: 5000,
+  52  |   });
+  53  |   await expect(main.getByText(/Shinkan unterstützt dich/i)).toBeVisible({ timeout: 5000 });
+  54  | 
+  55  |   await page.screenshot({ path: 'screenshots/02-dashboard.png' });
+  56  |   console.log('✓ Dashboard OK');
+  57  | });
+  58  | 
+  59  | test('3. Navigation zu Übungen', async ({ page }) => {
+  60  |   await login(page);
+  61  | 
+  62  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  63  | 
+  64  |   // Bei Viewport ≥1024px ist .bottom-nav versteckt — Mobile garantieren wie in playwright.config.js
+  65  |   await page.setViewportSize({ width: 390, height: 844 });
+  66  | 
+  67  |   // Bottom-Nav: Navigation und URL gemeinsam abwarten (vermeidet race mit networkidle)
+  68  |   const exercisesLink = page.locator('.bottom-nav').getByRole('link', { name: /Übungen/i });
+  69  |   await Promise.all([
+  70  |     page.waitForURL(
+  71  |       (u) => {
+  72  |         const path = u.pathname.replace(/\/$/, '') || '/'
+  73  |         return path === '/exercises'
+  74  |       },
+  75  |       { timeout: 15000 },
+  76  |     ),
+  77  |     exercisesLink.click(),
+  78  |   ]);
+  79  |   await page.waitForLoadState('networkidle');
+  80  | 
+  81  |   // Wie Test 4 (Vereine): eine eindeutige h1 — nicht h1,h2-Kombi (Strict Mode + mehrere Treffer)
+  82  |   const main = page.locator('.app-main');
+  83  |   await expect(main.getByRole('heading', { level: 1, name: /Übungen/i })).toBeVisible({
+  84  |     timeout: 10000,
+  85  |   });
+  86  | 
+  87  |   await page.screenshot({ path: 'screenshots/03-uebungen.png' });
+  88  |   console.log('✓ Übungen-Seite erreichbar');
+  89  | });
+  90  | 
+  91  | test('4. Navigation zu Vereine', async ({ page }) => {
+  92  |   await login(page);
+  93  |   await page.setViewportSize({ width: 390, height: 844 });
+  94  | 
+  95  |   await page.locator('.bottom-nav a[href="/clubs"]').click();
+  96  |   await page.waitForLoadState('networkidle');
+  97  | 
+  98  |   // ClubsPage: <h1>Vereinsverwaltung</h1> + Tab <h2>Vereine</h2> → ein kombinierter
+  99  |   // Selektor löst 2 Treffer aus (Playwright strict mode). URL + primäre Überschrift reichen.
+  100 |   await expect(page).toHaveURL(/\/clubs\/?$/, { timeout: 5000 });
+  101 |   await expect(page.getByRole('heading', { level: 1, name: /Vereinsverwaltung/i })).toBeVisible({
+  102 |     timeout: 5000,
+  103 |   });
+  104 | 
+  105 |   await page.screenshot({ path: 'screenshots/04-vereine.png' });
+  106 |   console.log('✓ Vereine-Seite erreichbar');
+  107 | });
+  108 | 
+  109 | test('5. Desktop-Sidebar sichtbar (Desktop)', async ({ page }) => {
+  110 |   // Desktop-Viewport
+  111 |   await page.setViewportSize({ width: 1280, height: 800 });
+  112 | 
+```
\ No newline at end of file
diff --git a/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/test-failed-1.png b/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/test-failed-1.png
new file mode 100644
index 0000000..67a7d77
Binary files /dev/null and b/test-results/dev-smoke-test-11-Übungsli-01330-nauswahl-zeigt-Bulk-Toolbar/test-failed-1.png differ
diff --git a/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/error-context.md b/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/error-context.md
new file mode 100644
index 0000000..329beea
--- /dev/null
+++ b/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/error-context.md
@@ -0,0 +1,137 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: dev-smoke-test.spec.js >> 12. Trainingsplanung: Seite lädt mit Überschrift
+- Location: tests\dev-smoke-test.spec.js:275:1
+
+# Error details
+
+```
+Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+Call log:
+  - navigating to "http://127.0.0.1:3098/", waiting until "load"
+
+```
+
+# Test source
+
+```ts
+  1   | const { test, expect } = require('@playwright/test');
+  2   | 
+  3   | const TEST_EMAIL    = process.env.TEST_EMAIL    || 'lars@stommer.com';
+  4   | const TEST_PASSWORD = process.env.TEST_PASSWORD || '12345678';
+  5   | 
+  6   | /** Primärer Submit auf der Login-Seite (nicht den Tab "Login" vs. "Registrieren"). */
+  7   | async function submitLoginForm(page) {
+  8   |   await page.getByRole('button', { name: 'Anmelden' }).click();
+  9   | }
+  10  | 
+  11  | async function login(page) {
+> 12  |   await page.goto('/');
+      |              ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+  13  |   await page.waitForLoadState('networkidle');
+  14  | 
+  15  |   // Warte bis Login-Seite geladen ist
+  16  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  17  | 
+  18  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  19  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  20  |   await submitLoginForm(page);
+  21  |   // Wait until auth is complete: URL leaves /login and Dashboard is rendered
+  22  |   await page.waitForURL((url) => !url.toString().includes('/login'), { timeout: 15000 });
+  23  |   await page.waitForLoadState('networkidle');
+  24  | }
+  25  | 
+  26  | test('1. Login funktioniert', async ({ page }) => {
+  27  |   await page.goto('/');
+  28  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  29  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  30  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  31  |   await submitLoginForm(page);
+  32  |   await page.waitForLoadState('networkidle');
+  33  | 
+  34  |   // Nach Login soll der Tab "Login" (Moduswahl) verschwinden — nicht der Submit "Anmelden"
+  35  |   const loginButton = page.locator('button:has-text("Login")');
+  36  |   await expect(loginButton).toHaveCount(0, { timeout: 10000 });
+  37  | 
+  38  |   await page.screenshot({ path: 'screenshots/01-nach-login.png' });
+  39  |   console.log('✓ Login erfolgreich');
+  40  | });
+  41  | 
+  42  | test('2. Dashboard lädt ohne Fehler', async ({ page }) => {
+  43  |   await login(page);
+  44  | 
+  45  |   // Warte bis Spinner verschwunden
+  46  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  47  | 
+  48  |   // Dashboard: h1 „Dashboard“ + Begrüßungstext (nicht mehr „Willkommen bei Shinkan“ als Überschrift)
+  49  |   const main = page.locator('.app-main');
+  50  |   await expect(main.getByRole('heading', { level: 1, name: 'Dashboard' })).toBeVisible({
+  51  |     timeout: 5000,
+  52  |   });
+  53  |   await expect(main.getByText(/Shinkan unterstützt dich/i)).toBeVisible({ timeout: 5000 });
+  54  | 
+  55  |   await page.screenshot({ path: 'screenshots/02-dashboard.png' });
+  56  |   console.log('✓ Dashboard OK');
+  57  | });
+  58  | 
+  59  | test('3. Navigation zu Übungen', async ({ page }) => {
+  60  |   await login(page);
+  61  | 
+  62  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  63  | 
+  64  |   // Bei Viewport ≥1024px ist .bottom-nav versteckt — Mobile garantieren wie in playwright.config.js
+  65  |   await page.setViewportSize({ width: 390, height: 844 });
+  66  | 
+  67  |   // Bottom-Nav: Navigation und URL gemeinsam abwarten (vermeidet race mit networkidle)
+  68  |   const exercisesLink = page.locator('.bottom-nav').getByRole('link', { name: /Übungen/i });
+  69  |   await Promise.all([
+  70  |     page.waitForURL(
+  71  |       (u) => {
+  72  |         const path = u.pathname.replace(/\/$/, '') || '/'
+  73  |         return path === '/exercises'
+  74  |       },
+  75  |       { timeout: 15000 },
+  76  |     ),
+  77  |     exercisesLink.click(),
+  78  |   ]);
+  79  |   await page.waitForLoadState('networkidle');
+  80  | 
+  81  |   // Wie Test 4 (Vereine): eine eindeutige h1 — nicht h1,h2-Kombi (Strict Mode + mehrere Treffer)
+  82  |   const main = page.locator('.app-main');
+  83  |   await expect(main.getByRole('heading', { level: 1, name: /Übungen/i })).toBeVisible({
+  84  |     timeout: 10000,
+  85  |   });
+  86  | 
+  87  |   await page.screenshot({ path: 'screenshots/03-uebungen.png' });
+  88  |   console.log('✓ Übungen-Seite erreichbar');
+  89  | });
+  90  | 
+  91  | test('4. Navigation zu Vereine', async ({ page }) => {
+  92  |   await login(page);
+  93  |   await page.setViewportSize({ width: 390, height: 844 });
+  94  | 
+  95  |   await page.locator('.bottom-nav a[href="/clubs"]').click();
+  96  |   await page.waitForLoadState('networkidle');
+  97  | 
+  98  |   // ClubsPage: <h1>Vereinsverwaltung</h1> + Tab <h2>Vereine</h2> → ein kombinierter
+  99  |   // Selektor löst 2 Treffer aus (Playwright strict mode). URL + primäre Überschrift reichen.
+  100 |   await expect(page).toHaveURL(/\/clubs\/?$/, { timeout: 5000 });
+  101 |   await expect(page.getByRole('heading', { level: 1, name: /Vereinsverwaltung/i })).toBeVisible({
+  102 |     timeout: 5000,
+  103 |   });
+  104 | 
+  105 |   await page.screenshot({ path: 'screenshots/04-vereine.png' });
+  106 |   console.log('✓ Vereine-Seite erreichbar');
+  107 | });
+  108 | 
+  109 | test('5. Desktop-Sidebar sichtbar (Desktop)', async ({ page }) => {
+  110 |   // Desktop-Viewport
+  111 |   await page.setViewportSize({ width: 1280, height: 800 });
+  112 | 
+```
\ No newline at end of file
diff --git a/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/test-failed-1.png b/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/test-failed-1.png
new file mode 100644
index 0000000..67a7d77
Binary files /dev/null and b/test-results/dev-smoke-test-12-Training-ae8bb--Seite-lädt-mit-Überschrift/test-failed-1.png differ
diff --git a/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/error-context.md b/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/error-context.md
new file mode 100644
index 0000000..fd4f774
--- /dev/null
+++ b/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/error-context.md
@@ -0,0 +1,137 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: dev-smoke-test.spec.js >> 8. Dashboard API-Budget nach Reload (profiles/me, dashboard/kpis)
+- Location: tests\dev-smoke-test.spec.js:165:1
+
+# Error details
+
+```
+Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+Call log:
+  - navigating to "http://127.0.0.1:3098/", waiting until "load"
+
+```
+
+# Test source
+
+```ts
+  1   | const { test, expect } = require('@playwright/test');
+  2   | 
+  3   | const TEST_EMAIL    = process.env.TEST_EMAIL    || 'lars@stommer.com';
+  4   | const TEST_PASSWORD = process.env.TEST_PASSWORD || '12345678';
+  5   | 
+  6   | /** Primärer Submit auf der Login-Seite (nicht den Tab "Login" vs. "Registrieren"). */
+  7   | async function submitLoginForm(page) {
+  8   |   await page.getByRole('button', { name: 'Anmelden' }).click();
+  9   | }
+  10  | 
+  11  | async function login(page) {
+> 12  |   await page.goto('/');
+      |              ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://127.0.0.1:3098/
+  13  |   await page.waitForLoadState('networkidle');
+  14  | 
+  15  |   // Warte bis Login-Seite geladen ist
+  16  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  17  | 
+  18  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  19  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  20  |   await submitLoginForm(page);
+  21  |   // Wait until auth is complete: URL leaves /login and Dashboard is rendered
+  22  |   await page.waitForURL((url) => !url.toString().includes('/login'), { timeout: 15000 });
+  23  |   await page.waitForLoadState('networkidle');
+  24  | }
+  25  | 
+  26  | test('1. Login funktioniert', async ({ page }) => {
+  27  |   await page.goto('/');
+  28  |   await page.waitForSelector('input[type="email"]', { timeout: 10000 });
+  29  |   await page.fill('input[type="email"]', TEST_EMAIL);
+  30  |   await page.fill('input[type="password"]', TEST_PASSWORD);
+  31  |   await submitLoginForm(page);
+  32  |   await page.waitForLoadState('networkidle');
+  33  | 
+  34  |   // Nach Login soll der Tab "Login" (Moduswahl) verschwinden — nicht der Submit "Anmelden"
+  35  |   const loginButton = page.locator('button:has-text("Login")');
+  36  |   await expect(loginButton).toHaveCount(0, { timeout: 10000 });
+  37  | 
+  38  |   await page.screenshot({ path: 'screenshots/01-nach-login.png' });
+  39  |   console.log('✓ Login erfolgreich');
+  40  | });
+  41  | 
+  42  | test('2. Dashboard lädt ohne Fehler', async ({ page }) => {
+  43  |   await login(page);
+  44  | 
+  45  |   // Warte bis Spinner verschwunden
+  46  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  47  | 
+  48  |   // Dashboard: h1 „Dashboard“ + Begrüßungstext (nicht mehr „Willkommen bei Shinkan“ als Überschrift)
+  49  |   const main = page.locator('.app-main');
+  50  |   await expect(main.getByRole('heading', { level: 1, name: 'Dashboard' })).toBeVisible({
+  51  |     timeout: 5000,
+  52  |   });
+  53  |   await expect(main.getByText(/Shinkan unterstützt dich/i)).toBeVisible({ timeout: 5000 });
+  54  | 
+  55  |   await page.screenshot({ path: 'screenshots/02-dashboard.png' });
+  56  |   console.log('✓ Dashboard OK');
+  57  | });
+  58  | 
+  59  | test('3. Navigation zu Übungen', async ({ page }) => {
+  60  |   await login(page);
+  61  | 
+  62  |   await expect(page.locator('.spinner')).toHaveCount(0, { timeout: 10000 });
+  63  | 
+  64  |   // Bei Viewport ≥1024px ist .bottom-nav versteckt — Mobile garantieren wie in playwright.config.js
+  65  |   await page.setViewportSize({ width: 390, height: 844 });
+  66  | 
+  67  |   // Bottom-Nav: Navigation und URL gemeinsam abwarten (vermeidet race mit networkidle)
+  68  |   const exercisesLink = page.locator('.bottom-nav').getByRole('link', { name: /Übungen/i });
+  69  |   await Promise.all([
+  70  |     page.waitForURL(
+  71  |       (u) => {
+  72  |         const path = u.pathname.replace(/\/$/, '') || '/'
+  73  |         return path === '/exercises'
+  74  |       },
+  75  |       { timeout: 15000 },
+  76  |     ),
+  77  |     exercisesLink.click(),
+  78  |   ]);
+  79  |   await page.waitForLoadState('networkidle');
+  80  | 
+  81  |   // Wie Test 4 (Vereine): eine eindeutige h1 — nicht h1,h2-Kombi (Strict Mode + mehrere Treffer)
+  82  |   const main = page.locator('.app-main');
+  83  |   await expect(main.getByRole('heading', { level: 1, name: /Übungen/i })).toBeVisible({
+  84  |     timeout: 10000,
+  85  |   });
+  86  | 
+  87  |   await page.screenshot({ path: 'screenshots/03-uebungen.png' });
+  88  |   console.log('✓ Übungen-Seite erreichbar');
+  89  | });
+  90  | 
+  91  | test('4. Navigation zu Vereine', async ({ page }) => {
+  92  |   await login(page);
+  93  |   await page.setViewportSize({ width: 390, height: 844 });
+  94  | 
+  95  |   await page.locator('.bottom-nav a[href="/clubs"]').click();
+  96  |   await page.waitForLoadState('networkidle');
+  97  | 
+  98  |   // ClubsPage: <h1>Vereinsverwaltung</h1> + Tab <h2>Vereine</h2> → ein kombinierter
+  99  |   // Selektor löst 2 Treffer aus (Playwright strict mode). URL + primäre Überschrift reichen.
+  100 |   await expect(page).toHaveURL(/\/clubs\/?$/, { timeout: 5000 });
+  101 |   await expect(page.getByRole('heading', { level: 1, name: /Vereinsverwaltung/i })).toBeVisible({
+  102 |     timeout: 5000,
+  103 |   });
+  104 | 
+  105 |   await page.screenshot({ path: 'screenshots/04-vereine.png' });
+  106 |   console.log('✓ Vereine-Seite erreichbar');
+  107 | });
+  108 | 
+  109 | test('5. Desktop-Sidebar sichtbar (Desktop)', async ({ page }) => {
+  110 |   // Desktop-Viewport
+  111 |   await page.setViewportSize({ width: 1280, height: 800 });
+  112 | 
+```
\ No newline at end of file
diff --git a/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/test-failed-1.png b/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/test-failed-1.png
new file mode 100644
index 0000000..67a7d77
Binary files /dev/null and b/test-results/dev-smoke-test-8-Dashboard-8c7cc-profiles-me-dashboard-kpis-/test-failed-1.png differ
diff --git a/tests/dev-smoke-test.spec.js b/tests/dev-smoke-test.spec.js
index 58a61b9..ea9b0bf 100644
--- a/tests/dev-smoke-test.spec.js
+++ b/tests/dev-smoke-test.spec.js
@@ -184,6 +184,17 @@ test('8. Dashboard API-Budget nach Reload (profiles/me, dashboard/kpis)', async
 
   page.on('request', onRequest);
 
+  const kpisStatuses = [];
+  const onResponse = (response) => {
+    try {
+      const u = response.url();
+      if (u.includes('/api/dashboard/kpis')) kpisStatuses.push(response.status());
+    } catch {
+      /* ignore */
+    }
+  };
+  page.on('response', onResponse);
+
   try {
     await page.reload({ waitUntil: 'networkidle' });
 
@@ -199,11 +210,13 @@ test('8. Dashboard API-Budget nach Reload (profiles/me, dashboard/kpis)', async
     expect(profilesMe).toBe(1);
     expect(trainingUnits).toBe(0);
     expect(dashboardKpis).toBe(1);
+    expect(kpisStatuses.some((s) => s === 200)).toBe(true);
   } finally {
     page.off('request', onRequest);
+    page.off('response', onResponse);
   }
 
-  console.log('✓ Dashboard API-Budget: 1× profiles/me, 0× training-units, 1× dashboard/kpis');
+  console.log('✓ Dashboard API-Budget: 1× profiles/me, 0× training-units, 1× dashboard/kpis (HTTP 200)');
 });
 
 test('9. Übungsliste: nach Laden entweder Treffer-Gitter oder Leerhinweis', async ({ page }) => {
@@ -237,6 +250,61 @@ test('10. Übungsliste: Filter-Dialog öffnet und schließt', async ({ page }) =
   console.log('✓ Übungsliste: Filter-Dialog Smoke');
 });
 
+test('11. Übungsliste: Massenauswahl zeigt Bulk-Toolbar', async ({ page }, testInfo) => {
+  await login(page);
+  await page.goto('/exercises', { waitUntil: 'networkidle' });
+  const main = page.locator('.app-main');
+  await expect(main.getByRole('heading', { level: 1, name: /Übungen/i })).toBeVisible({
+    timeout: 15000,
+  });
+  await expect(main.locator('.spinner')).toHaveCount(0, { timeout: 20000 });
+  const grid = main.getByTestId('exercises-list-grid');
+  const checks = grid.locator('input[type="checkbox"]');
+  const n = await checks.count();
+  if (n < 1) {
+    testInfo.skip(true, 'Keine Übung in der Liste (Bulk-Smoke braucht mind. einen Treffer)');
+    return;
+  }
+  await checks.first().click();
+  const bulk = main.getByTestId('exercise-list-bulk-toolbar');
+  await expect(bulk).toBeVisible({ timeout: 5000 });
+  await expect(bulk.getByRole('button', { name: /Massenänderung/i })).toBeVisible();
+  console.log('✓ Übungsliste: Bulk-Toolbar nach Auswahl');
+});
+
+test('12. Trainingsplanung: Seite lädt mit Überschrift', async ({ page }) => {
+  await login(page);
+  await page.goto('/planning', { waitUntil: 'networkidle' });
+  const main = page.locator('.app-main');
+  await expect(main.locator('.spinner')).toHaveCount(0, { timeout: 25000 });
+  await expect(main.getByRole('heading', { level: 1, name: 'Trainingsplanung' })).toBeVisible({
+    timeout: 20000,
+  });
+  console.log('✓ Trainingsplanung: Grundansicht');
+});
+
+test('13. Trainingsplanung: Rahmen-Import-Dialog öffnet und schließt', async ({ page }, testInfo) => {
+  await login(page);
+  await page.goto('/planning', { waitUntil: 'networkidle' });
+  const main = page.locator('.app-main');
+  await expect(main.locator('.spinner')).toHaveCount(0, { timeout: 25000 });
+  await expect(main.getByRole('heading', { level: 1, name: 'Trainingsplanung' })).toBeVisible({
+    timeout: 20000,
+  });
+  const openBtn = main.getByRole('button', { name: /Aus Rahmen übernehmen/i });
+  if (await openBtn.isDisabled()) {
+    testInfo.skip(true, 'Keine Trainingsgruppe — Button bleibt deaktiviert');
+    return;
+  }
+  await openBtn.click();
+  const dlg = page.getByTestId('planning-framework-import-modal');
+  await expect(dlg).toBeVisible({ timeout: 10000 });
+  await expect(dlg.getByRole('heading', { name: /Sessions aus Rahmen übernehmen/i })).toBeVisible();
+  await dlg.getByRole('button', { name: 'Abbrechen' }).click();
+  await expect(dlg).toHaveCount(0);
+  console.log('✓ Trainingsplanung: Rahmen-Import-Dialog Smoke');
+});
+
 test('P-12: sessionStorage wird bei Logout bereinigt (sj_coach_* Schlüssel)', async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 800 });
   await login(page);