From 911c07e522d078837356c1aed9d4b593fc5d3f99 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sat, 15 Nov 2025 22:20:59 +0100
Subject: [PATCH] Refactor tournament management by removing external and
 official tournament views

This commit simplifies the tournament management system by removing the `ExternalTournamentsView` and `OfficialTournaments` components, consolidating tournament functionality into the `TournamentsView`. The routing has been updated accordingly, and the UI has been adjusted to reflect these changes. Additionally, the `App.vue` navigation has been streamlined to enhance user experience by focusing on internal tournaments only.
---
 .cursor/commands/club-settings.md             |    0
 frontend/src/App.vue                          |   12 +-
 frontend/src/router.js                        |    8 +-
 .../src/views/ExternalTournamentsView.vue     |   14 -
 frontend/src/views/OfficialTournaments.vue    |    1 -
 frontend/src/views/TournamentTab.vue          | 3448 ++++++++++++++++
 frontend/src/views/TournamentsView.vue        | 3520 +----------------
 frontend/src/views/TrainingGroupsView.vue     |  569 ---
 8 files changed, 3552 insertions(+), 4020 deletions(-)
 create mode 100644 .cursor/commands/club-settings.md
 delete mode 100644 frontend/src/views/ExternalTournamentsView.vue
 create mode 100644 frontend/src/views/TournamentTab.vue
 delete mode 100644 frontend/src/views/TrainingGroupsView.vue

diff --git a/.cursor/commands/club-settings.md b/.cursor/commands/club-settings.md
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a31c5b6..70808d1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -91,17 +91,9 @@
                 <span class="nav-icon">📅</span>
                 Spielpläne
               </router-link>
-              <router-link v-if="hasPermission('tournaments', 'read')" to="/tournaments" class="nav-link" title="Interne Turniere">
+              <router-link v-if="hasPermission('tournaments', 'read')" to="/tournaments" class="nav-link" title="Turniere">
                 <span class="nav-icon">🏆</span>
-                Interne Turniere
-              </router-link>
-              <router-link v-if="hasPermission('tournaments', 'read')" to="/external-tournaments" class="nav-link" title="Turniere mit Externen">
-                <span class="nav-icon">🌐</span>
-                Offene Turniere
-              </router-link>
-              <router-link v-if="hasPermission('tournaments', 'read')" to="/official-tournaments" class="nav-link" title="Turnierteilnahmen">
-                <span class="nav-icon">📄</span>
-                Turnierteilnahmen
+                Turniere
               </router-link>
               <router-link v-if="hasPermission('predefined_activities', 'read')" to="/predefined-activities" class="nav-link" title="Vordefinierte Aktivitäten">
                 <span class="nav-icon">⚙️</span>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 48f65aa..c6a4564 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -10,17 +10,14 @@ import DiaryView from './views/DiaryView.vue';
 import PendingApprovalsView from './views/PendingApprovalsView.vue';
 import ScheduleView from './views/ScheduleView.vue';
 import TournamentsView from './views/TournamentsView.vue';
-import ExternalTournamentsView from './views/ExternalTournamentsView.vue';
 import TrainingStatsView from './views/TrainingStatsView.vue';
 import ClubSettings from './views/ClubSettings.vue';
 import PredefinedActivities from './views/PredefinedActivities.vue';
-import OfficialTournaments from './views/OfficialTournaments.vue';
 import MyTischtennisAccount from './views/MyTischtennisAccount.vue';
 import TeamManagementView from './views/TeamManagementView.vue';
 import PermissionsView from './views/PermissionsView.vue';
 import LogsView from './views/LogsView.vue';
 import MemberTransferSettingsView from './views/MemberTransferSettingsView.vue';
-import TrainingGroupsView from './views/TrainingGroupsView.vue';
 import Impressum from './views/Impressum.vue';
 import Datenschutz from './views/Datenschutz.vue';
 
@@ -35,18 +32,15 @@ const routes = [
   { path: '/diary', component: DiaryView },
   { path: '/pending-approvals', component: PendingApprovalsView},
   { path: '/schedule', component: ScheduleView},
-  { path: '/tournaments', component: TournamentsView, props: { allowsExternal: false } },
-  { path: '/external-tournaments', component: ExternalTournamentsView },
+  { path: '/tournaments', component: TournamentsView },
   { path: '/training-stats', component: TrainingStatsView },
   { path: '/club-settings', component: ClubSettings },
   { path: '/predefined-activities', component: PredefinedActivities },
-  { path: '/official-tournaments', component: OfficialTournaments },
   { path: '/mytischtennis-account', component: MyTischtennisAccount },
   { path: '/team-management', component: TeamManagementView },
   { path: '/permissions', component: PermissionsView },
   { path: '/logs', component: LogsView },
   { path: '/member-transfer-settings', component: MemberTransferSettingsView },
-  { path: '/training-groups', component: TrainingGroupsView },
   { path: '/impressum', component: Impressum },
   { path: '/datenschutz', component: Datenschutz },
 ];
diff --git a/frontend/src/views/ExternalTournamentsView.vue b/frontend/src/views/ExternalTournamentsView.vue
deleted file mode 100644
index 36d1826..0000000
--- a/frontend/src/views/ExternalTournamentsView.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <TournamentsView :allowsExternal="true" />
-</template>
-
-<script>
-import TournamentsView from './TournamentsView.vue';
-
-export default {
-    name: 'ExternalTournamentsView',
-    components: {
-        TournamentsView
-    }
-};
-</script>
diff --git a/frontend/src/views/OfficialTournaments.vue b/frontend/src/views/OfficialTournaments.vue
index b406ed5..8a49280 100644
--- a/frontend/src/views/OfficialTournaments.vue
+++ b/frontend/src/views/OfficialTournaments.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="official-tournaments">
-    <h2>Turnierteilnahmen</h2>
     
     <div class="uploader">
       <input type="file" accept="application/pdf" @change="onFile" />
diff --git a/frontend/src/views/TournamentTab.vue b/frontend/src/views/TournamentTab.vue
new file mode 100644
index 0000000..cf03f55
--- /dev/null
+++ b/frontend/src/views/TournamentTab.vue
@@ -0,0 +1,3448 @@
+<template>
+    <div class="tournaments-view">
+        <div class="tournament-config">
+            <h3>Datum</h3>
+            <select v-model="selectedDate">
+                <option value="new">Neues Turnier</option>
+                <option v-for="date in dates" :key="date.id" :value="date.id">
+                    <template v-if="date.name">
+                        {{ date.name }} ({{ date.date ? new Date(date.date).toLocaleDateString('de-DE', {
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit'
+                        }) : 'Unbekanntes Datum' }})
+                    </template>
+                    <template v-else>
+                        {{ date.date ? new Date(date.date).toLocaleDateString('de-DE', {
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit'
+                        }) : 'Unbekanntes Datum' }}
+                    </template>
+                </option>
+            </select>
+            <div v-if="selectedDate === 'new'" class="new-tournament">
+                <label>
+                    Name:
+                    <input type="text" v-model="newTournamentName" placeholder="Turniername" />
+                </label>
+                <label>
+                    Datum:
+                    <input type="date" v-model="newDate" />
+                </label>
+                <label>
+                    Gewinnsätze:
+                    <input type="number" v-model.number="newWinningSets" min="1" />
+                </label>
+                <button @click="createTournament">Erstellen</button>
+            </div>
+        </div>
+        <div v-if="selectedDate !== 'new'" class="tournament-setup">
+            <div class="tournament-info">
+                <label>
+                    Name:
+                    <input type="text" v-model="currentTournamentName" @input="updateTournament" />
+                </label>
+                <label>
+                    Datum:
+                    <input type="date" v-model="currentTournamentDate" @change="updateTournament" />
+                </label>
+                <label>
+                    Gewinnsätze:
+                    <input type="number" v-model.number="currentWinningSets" min="1" @input="updateTournament" />
+                </label>
+                <button @click="generatePDF" class="btn-primary" style="margin-top: 1rem;">PDF exportieren</button>
+            </div>
+            <label class="checkbox-item">
+                <input type="checkbox" v-model="isGroupTournament" @change="onModusChange" />
+                <span>Spielen in Gruppen</span>
+            </label>
+            <section class="tournament-classes">
+                <div class="classes-header" @click="toggleClasses">
+                    <h4>Klassen</h4>
+                    <span class="collapse-icon" :class="{ 'expanded': showClasses }">▼</span>
+                </div>
+                <div v-show="showClasses" class="classes-content">
+                    <div class="classes-list">
+                        <div v-for="classItem in tournamentClasses" :key="classItem.id" class="class-item">
+                            <template v-if="editingClassId === classItem.id">
+                                <input type="text" v-model="editingClassName" @keyup.enter="saveClassEdit(classItem)" @blur="saveClassEdit(classItem)" @keyup.esc="cancelClassEdit" class="class-name-input" ref="classEditInput" />
+                                <button @click="saveClassEdit(classItem)" class="btn-save-small" title="Speichern">✓</button>
+                                <button @click="cancelClassEdit" class="btn-cancel-small" title="Abbrechen">✕</button>
+                            </template>
+                            <template v-else>
+                                <span class="class-name-label">{{ classItem.name }}</span>
+                                <button @click.stop="editClass(classItem)" class="btn-edit-small" title="Bearbeiten">✏️</button>
+                                <button @click.stop="deleteClass(classItem)" class="trash-btn-small" title="Löschen">🗑️</button>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="add-class">
+                        <input type="text" v-model="newClassName" placeholder="Klassenname" class="class-name-input" @keyup.enter="addClass" />
+                        <button @click="addClass" class="btn-add">Klasse hinzufügen</button>
+                    </div>
+                </div>
+            </section>
+            <section class="participants">
+                <div class="participants-header" @click="toggleParticipants">
+                    <h4>Teilnehmer</h4>
+                    <span class="collapse-icon" :class="{ 'expanded': showParticipants }">▼</span>
+                </div>
+                <div v-show="showParticipants" class="participants-content">
+                    <div class="participants-table-container">
+                        <table class="participants-table participants-table-header">
+                            <thead>
+                                <tr>
+                                    <th class="participant-seeded-cell">Gesetzt</th>
+                                    <th class="participant-name">Name</th>
+                                    <th v-if="allowsExternal" class="participant-club-cell">Verein</th>
+                                    <th class="participant-class-cell">Klasse</th>
+                                    <th v-if="isGroupTournament" class="participant-group-cell">Gruppe</th>
+                                    <th class="participant-action-cell">Aktion</th>
+                                </tr>
+                            </thead>
+                        </table>
+                        <div class="participants-table-body-wrapper">
+                            <table class="participants-table participants-table-body">
+                                <tbody>
+                                    <tr v-for="participant in sortedParticipants" :key="participant.id" class="participant-item">
+                                        <td class="participant-seeded-cell">
+                                            <label class="seeded-checkbox-label">
+                                                <input type="checkbox" :checked="participant.seeded" @change="updateParticipantSeeded(participant, $event)" />
+                                            </label>
+                                        </td>
+                                        <td class="participant-name">
+                                            <template v-if="participant.member">
+                                                {{ participant.member.firstName || 'Unbekannt' }}
+                                                {{ participant.member.lastName || '' }}
+                                            </template>
+                                            <template v-else>
+                                                {{ participant.firstName || 'Unbekannt' }}
+                                                {{ participant.lastName || '' }}
+                                            </template>
+                                        </td>
+                                        <td v-if="allowsExternal" class="participant-club-cell">
+                                            <template v-if="participant.member">
+                                                <em>(Vereinsmitglied)</em>
+                                            </template>
+                                            <template v-else>
+                                                {{ participant.club || '–' }}
+                                            </template>
+                                        </td>
+                                        <td class="participant-class-cell">
+                                            <select v-model.number="participant.classId" @change="updateParticipantClass(participant, $event)" class="class-select-small">
+                                                <option :value="null">–</option>
+                                                <option v-for="classItem in tournamentClasses" :key="classItem.id" :value="classItem.id">
+                                                    {{ classItem.name }}
+                                                </option>
+                                            </select>
+                                        </td>
+                                        <td v-if="isGroupTournament" class="participant-group-cell">
+                                            <select v-model.number="participant.groupNumber" @change="updateParticipantGroup(participant, $event)" class="group-select-small">
+                                                <option :value="null">–</option>
+                                                <option v-for="group in groups" :key="group.groupId" :value="group.groupNumber">
+                                                    {{ group.groupNumber }}
+                                                </option>
+                                            </select>
+                                        </td>
+                                        <td class="participant-action-cell">
+                                            <button @click="removeParticipant(participant)" class="trash-btn-small" title="Löschen">🗑️</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="add-participant">
+                        <div v-if="allowsExternal" class="add-participant-section">
+                            <h5>Vereinsmitglied hinzufügen</h5>
+                            <div class="add-participant-row">
+                                <select v-model="selectedMember" class="member-select">
+                                    <option :value="null">-- Teilnehmer auswählen --</option>
+                                    <option v-for="member in clubMembers" :key="member.id" :value="member.id">
+                                        {{ member.firstName }}
+                                        {{ member.lastName }}
+                                    </option>
+                                </select>
+                                <button @click="addParticipant" class="btn-add">Hinzufügen</button>
+                                <button v-if="hasTrainingToday && !allowsExternal" @click="loadParticipantsFromTraining" class="training-btn">
+                                    📅 Aus Trainingstag laden
+                                </button>
+                            </div>
+                        </div>
+                        <div v-if="allowsExternal" class="add-participant-section">
+                            <h5>Externen Teilnehmer hinzufügen</h5>
+                            <div class="add-participant-row">
+                                <input type="text" v-model="newExternalParticipant.firstName" placeholder="Vorname" class="external-input" />
+                                <input type="text" v-model="newExternalParticipant.lastName" placeholder="Nachname" class="external-input" />
+                                <input type="text" v-model="newExternalParticipant.club" placeholder="Verein (optional)" class="external-input" />
+                                <input type="date" v-model="newExternalParticipant.birthDate" placeholder="Geburtsdatum (optional)" class="external-input" />
+                                <button @click="addExternalParticipant" class="btn-add">Hinzufügen</button>
+                            </div>
+                        </div>
+                        <div v-if="!allowsExternal" class="add-participant-row">
+                            <select v-model="selectedMember" class="member-select">
+                                <option :value="null">-- Teilnehmer auswählen --</option>
+                                <option v-for="member in clubMembers" :key="member.id" :value="member.id">
+                                    {{ member.firstName }}
+                                    {{ member.lastName }}
+                                </option>
+                            </select>
+                            <button @click="addParticipant" class="btn-add">Hinzufügen</button>
+                            <button v-if="hasTrainingToday" @click="loadParticipantsFromTraining" class="training-btn">
+                                📅 Aus Trainingstag laden
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section v-if="isGroupTournament" class="group-controls">
+                <label>
+                    Aufsteiger pro Gruppe:
+                    <input type="number" v-model.number="advancingPerGroup" min="1" @change="onModusChange" />
+                </label>
+                <label style="margin-left:1em">
+                    Maximale Gruppengröße:
+                    <input type="number" v-model.number="maxGroupSize" min="1" />
+                </label>
+                
+                <div v-if="tournamentClasses.length > 0" class="groups-per-class">
+                    <h4>Gruppen pro Klasse</h4>
+                    <div v-for="classItem in tournamentClasses" :key="classItem.id" class="class-group-config">
+                        <label>
+                            {{ classItem.name }}:
+                            <input type="number" v-model.number="groupsPerClass[classItem.id]" min="0" @change="onGroupCountChange" style="width: 60px;" />
+                            Gruppen
+                        </label>
+                    </div>
+                </div>
+                <div v-else class="groups-per-class">
+                    <label>
+                        Anzahl Gruppen:
+                        <input type="number" v-model.number="numberOfGroups" min="1" @change="onGroupCountChange" />
+                    </label>
+                </div>
+
+                <button @click="createGroups">Gruppen erstellen</button>
+                <button @click="randomizeGroups">Zufällig verteilen</button>
+                <button @click="resetGroups">Gruppen zurücksetzen</button>
+            </section>
+            <section v-if="groups.length" class="groups-overview">
+                <h3>Gruppenübersicht</h3>
+                <template v-for="(classGroups, classId) in groupsByClass" :key="classId">
+                    <div v-if="classId !== 'null' && classId !== 'undefined'" class="class-section">
+                        <h4 class="class-header">
+                            {{ getClassName(classId) }}
+                        </h4>
+                    </div>
+                    <div v-for="group in classGroups" :key="group.groupId" class="group-table">
+                        <h4>Gruppe {{ group.groupNumber }}</h4>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Index</th>
+                                <th>Platz</th>
+                                <th>Spieler</th>
+                                <th>Punkte</th>
+                                <th>Satz</th>
+                                <th>Diff</th>
+                                <th v-for="(opponent, idx) in groupRankings[group.groupId]" :key="`opp-${opponent.id}`">
+                                    G{{ String.fromCharCode(96 + group.groupNumber) }}{{ idx + 1 }}
+                                </th>
+                                <th>Live-Platz</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(pl, idx) in groupRankings[group.groupId]" :key="pl.id">
+                                <td><strong>G{{ String.fromCharCode(96 + group.groupNumber) }}{{ idx + 1 }}</strong></td>
+                                <td>{{ pl.position }}.</td>
+                                <td><span v-if="pl.seeded" class="seeded-star">★</span>{{ pl.name }}</td>
+                                <td>{{ pl.points }}</td>
+                                <td>{{ pl.setsWon }}:{{ pl.setsLost }}</td>
+                                <td>
+                                    {{ pl.setDiff >= 0 ? '+' + pl.setDiff : pl.setDiff }}
+                                </td>
+                                <td v-for="(opponent, oppIdx) in groupRankings[group.groupId]" 
+                                    :key="`match-${pl.id}-${opponent.id}`"
+                                    :class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`), 'diagonal-cell': idx === oppIdx }]"
+                                    @click="idx !== oppIdx ? highlightMatch(pl.id, opponent.id, group.groupId) : null">
+                                    <span v-if="idx === oppIdx" class="diagonal"></span>
+                                    <span v-else-if="getMatchLiveResult(pl.id, opponent.id, group.groupId)" 
+                                          :class="getMatchCellClasses(pl.id, opponent.id, group.groupId)">
+                                        {{ getMatchDisplayText(pl.id, opponent.id, group.groupId) }}
+                                    </span>
+                                    <span v-else class="no-match">-</span>
+                                </td>
+                                <td>{{ getLivePosition(pl.id, group.groupId) }}.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    </div>
+                </template>
+                <div class="reset-controls" style="margin-top:1rem">
+                    <button @click="resetMatches" class="trash-btn">
+                        🗑️ Gruppenspiele
+                    </button>
+                </div>
+            </section>
+        </div>
+        <section v-if="groupMatches.length" class="group-matches">
+            <h4>Gruppenspiele</h4>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Runde</th>
+                        <th>Gruppe</th>
+                        <th>Begegnung</th>
+                        <th>Ergebnis</th>
+                        <th>Sätze</th>
+                        <th>Aktion</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="m in groupMatches" :key="m.id" :data-match-id="m.id" :class="{ 'active-match': activeMatchId === m.id, 'match-finished': m.isFinished, 'match-live': m.isActive }" @click="activeMatchId = m.id">
+                        <td>{{ m.groupRound }}</td>
+                        <td>
+                            <template v-if="getGroupClassName(m.groupId)">
+                                {{ getGroupClassName(m.groupId) }} - Gruppe {{ m.groupNumber }}
+                            </template>
+                            <template v-else>
+                                Gruppe {{ m.groupNumber }}
+                            </template>
+                        </td>
+                        <td>
+                            <template v-if="m.isFinished">
+                                <span v-if="winnerIsPlayer1(m)">
+                                    <strong>{{ getPlayerName(m.player1) }}</strong> – {{ getPlayerName(m.player2) }}
+                                </span>
+                                <span v-else>
+                                    {{ getPlayerName(m.player1) }} – <strong>{{ getPlayerName(m.player2) }}</strong>
+                                </span>
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                            <template v-else>
+                                {{ getPlayerName(m.player1) }} – {{ getPlayerName(m.player2) }}
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                        </td>
+
+                        <td>
+                            <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
+                            <template v-if="!m.isFinished">
+                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
+                                <template v-for="r in m.tournamentResults" :key="r.set">
+                                    <template v-if="isEditing(m, r.set)">
+                                        <input 
+                                            v-model="editingResult.value"
+                                            @keyup.enter="saveEditedResult(m)"
+                                            @blur="saveEditedResult(m)"
+                                            @keyup.escape="cancelEdit"
+                                            class="inline-input"
+                                            ref="editInput"
+                                        />
+                                    
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                                    <template v-else>
+                                        <span @click="startEditResult(m, r)" class="result-text clickable">
+                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
+                                        </span>
+                                    
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                                    <span v-if="!isLastResult(m, r)">, </span>
+                                
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+
+                                <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
+                                <div class="new-set-line">
+                                    <input v-model="m.resultInput" placeholder="Neuen Satz, z.B. 11:7"
+                                        @keyup.enter="saveMatchResult(m, m.resultInput)"
+                                        @blur="saveMatchResult(m, m.resultInput)" class="inline-input" />
+                                </div>
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+
+                            <!-- 2. Fall: Match ist abgeschlossen → Read‑only -->
+                            <template v-else>
+                                {{ formatResult(m) }}
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                        </td>
+                        <td>
+                            {{ getSetsString(m) }}
+                        </td>
+                        <td>
+                            <!-- „Abschließen"-Button nur, wenn noch nicht fertig -->
+                            <button v-if="!m.isFinished" @click="finishMatch(m)">Abschließen</button>
+                            <!-- „Korrigieren"-Button nur, wenn fertig -->
+                            <button v-else @click="reopenMatch(m)" class="btn-correct">Korrigieren</button>
+                            <!-- „Läuft gerade"-Button nur, wenn nicht abgeschlossen -->
+                            <button v-if="!m.isFinished && !m.isActive" @click.stop="setMatchActive(m, true)" class="btn-live" title="Als laufend markieren">▶️</button>
+                            <button v-if="!m.isFinished && m.isActive" @click.stop="setMatchActive(m, false)" class="btn-live active" title="Laufend-Markierung entfernen">⏸️</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+        <div v-if="participants.length > 1
+            && !groupMatches.length
+            && !knockoutMatches.length" class="start-matches" style="margin-top:1.5rem">
+            <button @click="startMatches">
+                Spiele erstellen
+            </button>
+        </div>
+        <div v-if="canStartKnockout && !showKnockout" class="ko-start">
+            <button @click="startKnockout">
+                K.o.-Runde starten
+            </button>
+        </div>
+
+        <div v-if="showKnockout && canResetKnockout" class="ko-reset" style="margin-top:1rem">
+            <button @click="resetKnockout" class="trash-btn">
+                🗑️ K.o.-Runde
+            </button>
+        </div>
+        <section v-if="showKnockout" class="ko-round">
+            <h4>K.-o.-Runde</h4>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Klasse</th>
+                        <th>Runde</th>
+                        <th>Begegnung</th>
+                        <th>Ergebnis</th>
+                        <th>Sätze</th>
+                        <th>Aktion</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="m in knockoutMatches" :key="m.id" :class="{ 'active-match': activeMatchId === m.id, 'match-finished': m.isFinished, 'match-live': m.isActive }" @click="activeMatchId = m.id">
+                        <td>{{ getKnockoutMatchClassName(m) }}</td>
+                        <td>{{ m.round }}</td>
+                        <td>
+                            <template v-if="m.isFinished">
+                                <span v-if="winnerIsPlayer1(m)">
+                                    <strong>{{ getPlayerName(m.player1) }}</strong> – {{ getPlayerName(m.player2) }}
+                                </span>
+                                <span v-else>
+                                    {{ getPlayerName(m.player1) }} – <strong>{{ getPlayerName(m.player2) }}</strong>
+                                </span>
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                            <template v-else>
+                                {{ getPlayerName(m.player1) }} – {{ getPlayerName(m.player2) }}
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                        </td>
+                        <td>
+                            <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
+                            <template v-if="!m.isFinished">
+                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
+                                <template v-for="r in m.tournamentResults" :key="r.set">
+                                    <template v-if="isEditing(m, r.set)">
+                                        <input 
+                                            v-model="editingResult.value"
+                                            @keyup.enter="saveEditedResult(m)"
+                                            @blur="saveEditedResult(m)"
+                                            @keyup.escape="cancelEdit"
+                                            class="inline-input"
+                                            ref="editInput"
+                                        />
+                                    
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                                    <template v-else>
+                                        <span @click="startEditResult(m, r)" class="result-text clickable">
+                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
+                                        </span>
+                                    
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                                    <span v-if="!isLastResult(m, r)">, </span>
+                                
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+
+                                <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
+                                <div class="new-set-line">
+                                    <input v-model="m.resultInput" placeholder="Neuen Satz, z.B. 11:7"
+                                        @keyup.enter="saveMatchResult(m, m.resultInput)"
+                                        @blur="saveMatchResult(m, m.resultInput)" class="inline-input" />
+                                </div>
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+
+                            <!-- 2. Fall: Match ist abgeschlossen → Read‑only -->
+                            <template v-else>
+                                {{ formatResult(m) }}
+                            
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+                        </td>
+                        <td>
+                            {{ getSetsString(m) }}
+                        </td>
+                        <td>
+                            <button v-if="!m.isFinished" @click="finishMatch(m)">Fertig</button>
+                            <button v-else @click="reopenMatch(m)" class="btn-correct">Korrigieren</button>
+                            <!-- „Läuft gerade"-Button nur, wenn nicht abgeschlossen -->
+                            <button v-if="!m.isFinished && !m.isActive" @click.stop="setMatchActive(m, true)" class="btn-live" title="Als laufend markieren">▶️</button>
+                            <button v-if="!m.isFinished && m.isActive" @click.stop="setMatchActive(m, false)" class="btn-live active" title="Laufend-Markierung entfernen">⏸️</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+        <section v-if="Object.keys(groupedRankingList).length > 0" class="ranking">
+            <h4>Rangliste</h4>
+            <template v-for="(classKey, idx) in Object.keys(groupedRankingList).sort((a, b) => {
+                const aNum = a === 'null' ? 999999 : parseInt(a);
+                const bNum = b === 'null' ? 999999 : parseInt(b);
+                return aNum - bNum;
+            })" :key="`class-${classKey}`">
+                <div v-if="idx > 0" style="margin-top: 2rem;"></div>
+                <h5 v-if="getClassName(classKey)">{{ getClassName(classKey) }}</h5>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Platz</th>
+                            <th>Spieler</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(entry, entryIdx) in groupedRankingList[classKey]" :key="`${entry.member.id}-${entryIdx}`">
+                            <td>{{ entry.position }}.</td>
+                            <td>
+                                {{ entry.member.firstName }}
+                                {{ entry.member.lastName }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </template>
+        </section>
+    </div>
+
+    
+    <!-- Info Dialog -->
+    <InfoDialog
+        v-model="infoDialog.isOpen"
+        :title="infoDialog.title"
+        :message="infoDialog.message"
+        :details="infoDialog.details"
+        :type="infoDialog.type"
+    />
+    
+    <!-- Confirm Dialog -->
+    <ConfirmDialog
+        v-model="confirmDialog.isOpen"
+        :title="confirmDialog.title"
+        :message="confirmDialog.message"
+        :details="confirmDialog.details"
+        :type="confirmDialog.type"
+        @confirm="handleConfirmResult(true)"
+        @cancel="handleConfirmResult(false)"
+    />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '../apiClient.js';
+import InfoDialog from '../components/InfoDialog.vue';
+import ConfirmDialog from '../components/ConfirmDialog.vue';
+import { buildInfoConfig, buildConfirmConfig, safeErrorMessage } from '../utils/dialogUtils.js';
+import { connectSocket, disconnectSocket, onTournamentChanged, offTournamentChanged } from '../services/socketService.js';
+import PDFGenerator from '../components/PDFGenerator.js';
+export default {
+    name: 'TournamentTab',
+    components: {
+        InfoDialog,
+        ConfirmDialog
+    },
+    props: {
+        allowsExternal: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            // Dialog States
+            infoDialog: {
+                isOpen: false,
+                title: '',
+                message: '',
+                details: '',
+                type: 'info'
+            },
+            confirmDialog: {
+                isOpen: false,
+                title: '',
+                message: '',
+                details: '',
+                type: 'info',
+                resolveCallback: null
+            },
+            selectedDate: 'new',
+            newDate: '',
+            newTournamentName: '',
+            newWinningSets: 3,
+            currentTournamentName: '',
+            currentTournamentDate: '',
+            currentWinningSets: 3,
+            dates: [],
+            participants: [],
+            selectedMember: null,
+            clubMembers: [],
+            advancingPerGroup: 1,
+            numberOfGroups: 1,
+            groupsPerClass: {}, // { classId: numberOfGroups }
+            maxGroupSize: null,
+            isGroupTournament: false,
+            groups: [],
+            matches: [],
+            showKnockout: false,
+            showParticipants: false, // Kollaps-Status für Teilnehmerliste
+            hasTrainingToday: false, // Gibt es einen Trainingstag heute?
+            editingResult: {
+                matchId: null,   // aktuell bearbeitetes Match
+                set: null,   // aktuell bearbeitete Satz‑Nummer
+                value: ''      // Eingabewert
+            },
+            activeMatchId: null,  // Angeklicktes/aktives Match (für Hervorhebung)
+            tournamentClasses: [], // Turnierklassen
+            newClassName: '', // Name für neue Klasse
+            showClasses: false, // Kollaps-Status für Klassen-Verwaltung
+            editingClassId: null, // ID der gerade bearbeiteten Klasse
+            editingClassName: '', // Temporärer Name während der Bearbeitung
+            externalParticipants: [], // Externe Teilnehmer (nur bei allowsExternal = true)
+            newExternalParticipant: { // Neuer externer Teilnehmer (nur bei allowsExternal = true)
+                firstName: '',
+                lastName: '',
+                club: '',
+                birthDate: null
+            }
+        };
+    },
+    computed: {
+        ...mapGetters(['isAuthenticated', 'currentClub']),
+
+        sortedParticipants() {
+            // Kombiniere interne und externe Teilnehmer (wenn allowsExternal = true)
+            const allParticipants = this.allowsExternal
+                ? [
+                    ...this.participants.map(p => ({ ...p, isExternal: false })),
+                    ...this.externalParticipants.map(p => ({ ...p, isExternal: true }))
+                ]
+                : this.participants.map(p => ({ ...p, isExternal: false }));
+            
+            if (allParticipants.length === 0) {
+                return [];
+            }
+            
+            return allParticipants.sort((a, b) => {
+                // Für interne Teilnehmer: verwende member.firstName/lastName
+                // Für externe Teilnehmer: verwende firstName/lastName direkt
+                const firstNameA = (a.member?.firstName || a.firstName || '').toLowerCase();
+                const firstNameB = (b.member?.firstName || b.firstName || '').toLowerCase();
+                if (firstNameA !== firstNameB) {
+                    return firstNameA.localeCompare(firstNameB, 'de');
+                }
+                const lastNameA = (a.member?.lastName || a.lastName || '').toLowerCase();
+                const lastNameB = (b.member?.lastName || b.lastName || '').toLowerCase();
+                return lastNameA.localeCompare(lastNameB, 'de');
+            });
+        },
+
+        knockoutMatches() {
+            const koMatches = this.matches.filter(m => m.round !== 'group');
+            // Sortiere nach Klasse, dann nach Runde
+            return koMatches.sort((a, b) => {
+                // Zuerst nach Klasse (null zuletzt)
+                const aClass = a.classId || 999999;
+                const bClass = b.classId || 999999;
+                if (aClass !== bClass) return aClass - bClass;
+                
+                // Dann nach Runde (frühere Runden zuerst: Achtelfinale, Viertelfinale, Halbfinale, Finale)
+                // Extrahiere die Rundennamen (ohne Zahlen in Klammern)
+                const getRoundType = (roundName) => {
+                    if (roundName.includes('Achtelfinale')) return 0;
+                    if (roundName.includes('Viertelfinale')) return 1;
+                    if (roundName.includes('Halbfinale')) return 2;
+                    if (roundName.includes('Finale')) return 3;
+                    // Für Runden wie "6-Runde", "8-Runde" etc. - extrahiere die Zahl
+                    const numberMatch = roundName.match(/(\d+)-Runde/);
+                    if (numberMatch) {
+                        const num = parseInt(numberMatch[1]);
+                        // Größere Zahlen = frühere Runden, also umgekehrt sortieren
+                        return -num; // Negativ, damit größere Zahlen zuerst kommen
+                    }
+                    return 999; // Unbekannte Runden zuletzt
+                };
+                
+                const aRoundType = getRoundType(a.round);
+                const bRoundType = getRoundType(b.round);
+                if (aRoundType !== bRoundType) {
+                    return aRoundType - bRoundType;
+                }
+                
+                // Wenn gleicher Typ, alphabetisch sortieren
+                return a.round.localeCompare(b.round);
+            });
+        },
+
+        // Computed property für aktive Gruppentabellen-Zellen
+        activeGroupCells() {
+            if (!this.activeMatchId) return [];
+            
+            const match = this.matches.find(m => m.id === this.activeMatchId);
+            if (!match || match.round !== 'group') return [];
+            
+            return [
+                `match-${match.player1.id}-${match.player2.id}`,
+                `match-${match.player2.id}-${match.player1.id}`
+            ];
+        },
+
+        groupMatches() {
+            const filtered = this.matches.filter(m => m.round === 'group');
+            
+            // Gruppiere nach Runde
+            const byRound = {};
+            filtered.forEach(m => {
+                const round = m.groupRound || 0;
+                if (!byRound[round]) {
+                    byRound[round] = [];
+                }
+                byRound[round].push(m);
+            });
+            
+            // Sortiere die Runden
+            const sortedRounds = Object.keys(byRound).sort((a, b) => Number(a) - Number(b));
+            
+            // Für jede Runde: Sortiere nach Gruppe, dann interleaved zusammenführen
+            const result = [];
+            sortedRounds.forEach(round => {
+                const matchesInRound = byRound[round];
+                
+                // Gruppiere nach groupNumber
+                const byGroup = {};
+                matchesInRound.forEach(m => {
+                    const groupNum = m.groupNumber || 0;
+                    if (!byGroup[groupNum]) {
+                        byGroup[groupNum] = [];
+                    }
+                    byGroup[groupNum].push(m);
+                });
+                
+                // Sortiere die Gruppen
+                const sortedGroups = Object.keys(byGroup).sort((a, b) => Number(a) - Number(b));
+                
+                // Interleaved: Nimm abwechselnd aus jeder Gruppe
+                let maxLength = 0;
+                sortedGroups.forEach(groupNum => {
+                    maxLength = Math.max(maxLength, byGroup[groupNum].length);
+                });
+                
+                for (let i = 0; i < maxLength; i++) {
+                    sortedGroups.forEach(groupNum => {
+                        if (i < byGroup[groupNum].length) {
+                            result.push(byGroup[groupNum][i]);
+                        }
+                    });
+                }
+            });
+            
+            return result;
+        },
+
+        groupsByClass() {
+            const grouped = {};
+            this.groups.forEach(g => {
+                const classKey = g.classId != null ? String(g.classId) : 'null';
+                if (!grouped[classKey]) {
+                    grouped[classKey] = [];
+                }
+                grouped[classKey].push(g);
+            });
+            return grouped;
+        },
+
+        groupRankings() {
+            const byGroup = {};
+            this.groups.forEach(g => {
+                byGroup[g.groupId] = g.participants.map(p => ({
+                    id: p.id,
+                    name: p.name,
+                    seeded: p.seeded || false,
+                    points: 0,
+                    setsWon: 0,
+                    setsLost: 0,
+                    setDiff: 0,
+                }));
+            });
+            this.matches.forEach(m => {
+                if (!m.isFinished || m.round !== 'group') return;
+                const [s1, s2] = m.result.split(':').map(n => +n);
+                const arr = byGroup[m.groupId];
+                if (!arr) return;
+                const e1 = arr.find(x => x.id === m.player1.id);
+                const e2 = arr.find(x => x.id === m.player2.id);
+                if (!e1 || !e2) return;
+                if (s1 > s2) {
+                    e1.points += 1;  // Sieger bekommt +1
+                    e2.points -= 1;  // Verlierer bekommt -1
+                } else if (s2 > s1) {
+                    e2.points += 1;  // Sieger bekommt +1
+                    e1.points -= 1;  // Verlierer bekommt -1
+                }
+                e1.setsWon += s1; e1.setsLost += s2;
+                e2.setsWon += s2; e2.setsLost += s1;
+            });
+            const rankings = {};
+            Object.entries(byGroup).forEach(([gid, arr]) => {
+                arr.forEach(p => p.setDiff = p.setsWon - p.setsLost);
+                arr.sort((a, b) => {
+                    if (b.points !== a.points) return b.points - a.points;
+                    if (b.setDiff !== a.setDiff) return b.setDiff - a.setDiff;
+                    if (b.setsWon !== a.setsWon) return b.setsWon - a.setsWon;
+                    return a.name.localeCompare(b.name);
+                });
+                // Weise Positionen zu, wobei Spieler mit identischen Werten den gleichen Platz bekommen
+                let currentPosition = 1;
+                rankings[gid] = arr.map((p, i) => {
+                    // Wenn nicht der erste Spieler und die Werte identisch sind, verwende die gleiche Position
+                    if (i > 0) {
+                        const prev = arr[i - 1];
+                        if (prev.points === p.points && 
+                            prev.setDiff === p.setDiff && 
+                            prev.setsWon === p.setsWon) {
+                            // Gleicher Platz wie Vorgänger
+                            return { ...p, position: currentPosition };
+                        }
+                    }
+                    // Neuer Platz
+                    currentPosition = i + 1;
+                    return { ...p, position: currentPosition };
+                });
+            });
+            return rankings;
+        },
+
+        // Mapping von groupId zu groupNumber für die Teilnehmer-Auswahl
+        groupIdToNumberMap() {
+            const map = {};
+            this.groups.forEach(g => {
+                map[g.groupId] = g.groupNumber;
+            });
+            return map;
+        },
+
+        rankingList() {
+            const finalMatch = this.knockoutMatches.find(
+                m => m.round.toLowerCase() === 'finale'
+            );
+            if (!finalMatch || !finalMatch.isFinished) return [];
+            const list = [];
+            
+            // Gruppiere nach Klassen
+            const matchesByClass = {};
+            this.knockoutMatches.forEach(m => {
+                const classKey = m.classId != null ? String(m.classId) : 'null';
+                if (!matchesByClass[classKey]) {
+                    matchesByClass[classKey] = [];
+                }
+                matchesByClass[classKey].push(m);
+            });
+            
+            // Verarbeite jede Klasse separat
+            Object.entries(matchesByClass).forEach(([classKey, classMatches]) => {
+                const classFinalMatch = classMatches.find(m => m.round.toLowerCase() === 'finale');
+                if (!classFinalMatch || !classFinalMatch.isFinished) return;
+                
+                const [s1, s2] = classFinalMatch.result.split(':').map(n => +n);
+                const winner = s1 > s2 ? classFinalMatch.player1 : classFinalMatch.player2;
+                const loser = s1 > s2 ? classFinalMatch.player2 : classFinalMatch.player1;
+                list.push({ position: 1, member: winner.member, classId: classFinalMatch.classId });
+                list.push({ position: 2, member: loser.member, classId: classFinalMatch.classId });
+                
+                const roundsMap = {};
+                classMatches.forEach(m => {
+                    if (m.round.toLowerCase() === 'finale') return;
+                    (roundsMap[m.round] ||= []).push(m);
+                });
+                Object.values(roundsMap).forEach(matches => {
+                    const M = matches.length;
+                    const pos = M + 1;
+                    matches.forEach(match => {
+                        const [a, b] = match.result.split(':').map(n => +n);
+                        const knockedOut = a > b ? match.player2 : match.player1;
+                        list.push({ position: pos, member: knockedOut.member, classId: match.classId });
+                    });
+                });
+            });
+            
+            return list.sort((a, b) => {
+                // Zuerst nach Klasse, dann nach Position
+                const aClass = a.classId || 999999;
+                const bClass = b.classId || 999999;
+                if (aClass !== bClass) return aClass - bClass;
+                return a.position - b.position;
+            });
+        },
+        
+        // Computed property für gruppiertes Ranking (nach Klassen)
+        groupedRankingList() {
+            const ranking = this.knockoutMatches.length > 0 ? this.extendedRankingList : this.rankingList;
+            if (ranking.length === 0) return {};
+            
+            const grouped = {};
+            ranking.forEach(entry => {
+                const classKey = entry.classId != null ? String(entry.classId) : 'null';
+                if (!grouped[classKey]) {
+                    grouped[classKey] = [];
+                }
+                grouped[classKey].push(entry);
+            });
+            
+            return grouped;
+        },
+
+        // Erweiterte Ranking-Liste, die auch teilweise abgeschlossene K.O.-Runden berücksichtigt
+        // WICHTIG: Diese Liste ist nicht nach Klassen gruppiert - das wird im PDF gemacht
+        extendedRankingList() {
+            if (this.knockoutMatches.length === 0) return [];
+            
+            const list = [];
+            const finishedMatches = this.knockoutMatches.filter(m => m.isFinished);
+            
+            if (finishedMatches.length === 0) return [];
+            
+            // Finde alle Spieler, die noch im Turnier sind (Gewinner von abgeschlossenen Matches, die noch nicht ausgeschieden sind)
+            const stillInTournament = new Set();
+            finishedMatches.forEach(match => {
+                const [a, b] = match.result.split(':').map(n => +n);
+                const winner = a > b ? match.player1 : match.player2;
+                const winnerId = winner.member ? winner.member.id : winner.id;
+                
+                // Prüfe, ob der Gewinner noch in einem nicht abgeschlossenen Match ist
+                const hasUnfinishedMatch = this.knockoutMatches.some(m => 
+                    !m.isFinished && 
+                    m.classId === match.classId && // WICHTIG: Nur Matches derselben Klasse prüfen
+                    ((m.player1 && m.player1.member && m.player1.member.id === winnerId) ||
+                     (m.player1 && m.player1.id === winnerId) ||
+                     (m.player2 && m.player2.member && m.player2.member.id === winnerId) ||
+                     (m.player2 && m.player2.id === winnerId))
+                );
+                
+                if (hasUnfinishedMatch) {
+                    stillInTournament.add(`${match.classId || 'null'}-${winnerId}`);
+                }
+            });
+            
+            // Gruppiere nach Klasse, dann nach Runden
+            const matchesByClass = {};
+            finishedMatches.forEach(m => {
+                const classKey = m.classId != null ? String(m.classId) : 'null';
+                if (!matchesByClass[classKey]) {
+                    matchesByClass[classKey] = [];
+                }
+                matchesByClass[classKey].push(m);
+            });
+            
+            // Verarbeite jede Klasse separat
+            Object.entries(matchesByClass).forEach(([classKey, classMatches]) => {
+                // Gruppiere nach Runden innerhalb dieser Klasse
+                const roundsMap = {};
+                classMatches.forEach(m => {
+                    const roundName = m.round.toLowerCase();
+                    (roundsMap[roundName] ||= []).push(m);
+                });
+                
+                // Sortiere Runden: Finale zuerst, dann nach Anzahl der Matches (mehr = früher)
+                const roundOrder = ['finale', 'halbfinale', 'viertelfinale', 'achtelfinale'];
+                const sortedRounds = Object.entries(roundsMap).sort((a, b) => {
+                    const aIndex = roundOrder.indexOf(a[0]);
+                    const bIndex = roundOrder.indexOf(b[0]);
+                    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+                    if (aIndex !== -1) return -1;
+                    if (bIndex !== -1) return 1;
+                    // Für andere Runden: sortiere nach Anzahl der Matches (mehr = früher, da später ausgeschieden)
+                    return b[1].length - a[1].length;
+                });
+                
+                // Bestimme Positionen basierend auf abgeschlossenen Runden (pro Klasse)
+                let currentPosition = 1;
+                
+                sortedRounds.forEach(([roundName, matches]) => {
+                    if (roundName === 'finale') {
+                        // Finale: 1. und 2. Platz
+                        const match = matches[0];
+                        const [s1, s2] = match.result.split(':').map(n => +n);
+                        const winner = s1 > s2 ? match.player1 : match.player2;
+                        const loser = s1 > s2 ? match.player2 : match.player1;
+                        const winnerId = winner.member ? winner.member.id : winner.id;
+                        const loserId = loser.member ? loser.member.id : loser.id;
+                        
+                        // Nur hinzufügen, wenn nicht mehr im Turnier
+                        if (!stillInTournament.has(`${classKey}-${winnerId}`)) {
+                            list.push({ position: 1, member: winner.member, classId: match.classId });
+                        }
+                        if (!stillInTournament.has(`${classKey}-${loserId}`)) {
+                            list.push({ position: 2, member: loser.member, classId: match.classId });
+                        }
+                        currentPosition = 3;
+                    } else {
+                        // Andere Runden: Alle Verlierer bekommen die gleiche Position
+                        const numMatches = matches.length;
+                        const position = currentPosition;
+                        matches.forEach(match => {
+                            const [a, b] = match.result.split(':').map(n => +n);
+                            const knockedOut = a > b ? match.player2 : match.player1;
+                            const knockedOutId = knockedOut.member ? knockedOut.member.id : knockedOut.id;
+                            
+                            // Nur hinzufügen, wenn nicht mehr im Turnier
+                            if (!stillInTournament.has(`${classKey}-${knockedOutId}`)) {
+                                list.push({ position: position, member: knockedOut.member, classId: match.classId });
+                            }
+                        });
+                        currentPosition += numMatches;
+                    }
+                });
+            });
+            
+            return list.sort((a, b) => {
+                // Zuerst nach Klasse, dann nach Position
+                const aClass = a.classId || 999999;
+                const bClass = b.classId || 999999;
+                if (aClass !== bClass) return aClass - bClass;
+                return a.position - b.position;
+            });
+        },
+
+        canStartKnockout() {
+            const totalParticipants = this.allowsExternal
+                ? this.participants.length + this.externalParticipants.length
+                : this.participants.length;
+            if (totalParticipants < 2) return false;
+            if (!this.isGroupTournament) {
+                // kein Gruppenmodus → immer starten
+                return true;
+            }
+            // Gruppenmodus → nur, wenn es Gruppenspiele gibt und alle beendet sind
+            return this.groupMatches.length > 0
+                && this.groupMatches.every(m => m.isFinished);
+        },
+
+        canResetKnockout() {
+            // KO‑Matches existieren und keiner ist beendet
+            return this.knockoutMatches.length > 0
+                && this.knockoutMatches.every(m => !m.isFinished);
+        },
+    },
+    watch: {
+        selectedDate: {
+            immediate: true,
+            handler: async function (val) {
+                if (val === 'new') return;
+                await this.loadTournamentData();
+            }
+        }
+    },
+    async created() {
+        if (!this.isAuthenticated) {
+            this.$router.push('/login');
+            return;
+        }
+        const d = await apiClient.get(`/tournament/${this.currentClub}`);
+        // Filtere Turniere basierend auf allowsExternal Prop
+        if (this.allowsExternal) {
+            this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
+        } else {
+            this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
+        }
+        const m = await apiClient.get(
+            `/clubmembers/get/${this.currentClub}/false`
+        );
+        // Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
+        const sorted = (m.data || []).sort((a, b) => {
+            const firstNameA = (a.firstName || '').toLowerCase();
+            const firstNameB = (b.firstName || '').toLowerCase();
+            if (firstNameA !== firstNameB) {
+                return firstNameA.localeCompare(firstNameB, 'de');
+            }
+            const lastNameA = (a.lastName || '').toLowerCase();
+            const lastNameB = (b.lastName || '').toLowerCase();
+            return lastNameA.localeCompare(lastNameB, 'de');
+        });
+        this.clubMembers = sorted;
+    },
+    mounted() {
+        // Lade Turniere beim Start
+        this.loadTournaments();
+        
+        // Socket.IO verbinden
+        try {
+            if (this.currentClub) {
+                connectSocket(this.currentClub);
+                onTournamentChanged(this.handleTournamentChanged);
+            }
+        } catch (error) {
+            console.error('Fehler beim Verbinden mit Socket:', error);
+        }
+        
+        // Event-Listener für das Entfernen des Highlights
+        document.addEventListener('click', (e) => {
+            // Entferne Highlight nur wenn nicht auf eine Matrix-Zelle geklickt wird
+            if (!e.target.closest('.match-cell')) {
+                this.clearHighlight();
+            }
+        });
+        
+        // Event-Listener für Eingabefelder
+        document.addEventListener('input', () => {
+            this.clearHighlight();
+        });
+    },
+    beforeUnmount() {
+        // Socket-Listener entfernen
+        offTournamentChanged(this.handleTournamentChanged);
+        disconnectSocket();
+    },
+    methods: {
+        getClassName(classId) {
+            if (!classId || classId === 'null' || classId === 'undefined') return '';
+            try {
+                const classIdNum = typeof classId === 'string' ? parseInt(classId) : classId;
+                const classItem = this.tournamentClasses.find(c => c.id === classIdNum);
+                return classItem ? classItem.name : '';
+            } catch (e) {
+                return '';
+            }
+        },
+
+        getGroupClassName(groupId) {
+            if (!groupId) return '';
+            const group = this.groups.find(g => g.groupId === groupId);
+            if (!group || !group.classId) return '';
+            return this.getClassName(group.classId);
+        },
+
+        getKnockoutMatchClassName(match) {
+            if (!match) return '';
+            
+            // Verwende direkt die classId aus dem Match
+            if (match.classId) {
+                return this.getClassName(match.classId);
+            }
+            
+            return '';
+        },
+
+        // Dialog Helper Methods
+        async showInfo(title, message, details = '', type = 'info') {
+            this.infoDialog = buildInfoConfig({ title, message, details, type });
+        },
+        
+        async showConfirm(title, message, details = '', type = 'info', options = {}) {
+            return new Promise((resolve) => {
+                this.confirmDialog = buildConfirmConfig({
+                    title,
+                    message,
+                    details,
+                    type,
+                    resolveCallback: resolve,
+                    ...options,
+                });
+            });
+        },
+        
+        handleConfirmResult(confirmed) {
+            if (this.confirmDialog.resolveCallback) {
+                this.confirmDialog.resolveCallback(confirmed);
+                this.confirmDialog.resolveCallback = null;
+            }
+            this.confirmDialog.isOpen = false;
+        },
+        
+        normalizeResultInput(raw) {
+            const s = raw.trim();
+            if (s.includes(':')) {
+                const [xRaw, yRaw] = s.split(':');
+                const x = Number(xRaw), y = Number(yRaw);
+                if (
+                    Number.isInteger(x) && Number.isInteger(y) &&
+                    (x >= 11 || y >= 11) &&
+                    Math.abs(x - y) >= 2
+                ) {
+                    return `${x}:${y}`;
+                }
+                return null;
+            }
+
+            const num = Number(s);
+            if (isNaN(num)) {
+                return null;
+            }
+
+            const losing = Math.abs(num);
+            const winning = losing < 10 ? 11 : losing + 2;
+
+            // Prüfe das ursprüngliche Vorzeichen vor der Konvertierung
+            if (s.startsWith('-')) {
+                return `${losing}:${winning}`;
+            } else {
+                return `${winning}:${losing}`;
+            }
+        },
+
+        async loadTournamentData() {
+            const tRes = await apiClient.get(
+                `/tournament/${this.currentClub}/${this.selectedDate}`
+            );
+            const tournament = tRes.data;
+            this.currentTournamentName = tournament.name || '';
+            this.currentTournamentDate = tournament.date || '';
+            this.currentWinningSets = tournament.winningSets || 3;
+            this.isGroupTournament = tournament.type === 'groups';
+            this.numberOfGroups = tournament.numberOfGroups;
+            this.advancingPerGroup = tournament.advancingPerGroup;
+            
+            // Prüfe, ob es einen Trainingstag für das Turnierdatum gibt
+            await this.checkTrainingForDate(tournament.date);
+            // Lade Klassen
+            await this.loadTournamentClasses();
+            const pRes = await apiClient.post('/tournament/participants', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate
+            });
+            // Stelle sicher, dass seeded-Feld vorhanden ist (für alte Einträge)
+            this.participants = pRes.data.map(p => ({
+                ...p,
+                seeded: p.seeded || false
+            }));
+            
+            // Lade externe Teilnehmer (nur bei allowsExternal = true)
+            if (this.allowsExternal) {
+                try {
+                    const extRes = await apiClient.post('/tournament/external-participants', {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate
+                    });
+                    this.externalParticipants = extRes.data.map(p => ({
+                        ...p,
+                        seeded: p.seeded || false,
+                        isExternal: true
+                    }));
+                } catch (error) {
+                    console.error('Fehler beim Laden der externen Teilnehmer:', error);
+                    this.externalParticipants = [];
+                }
+            } else {
+                this.externalParticipants = [];
+            }
+            const gRes = await apiClient.get('/tournament/groups', {
+                params: {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate
+                }
+            });
+            this.groups = gRes.data;
+            const mRes = await apiClient.get(
+                `/tournament/matches/${this.currentClub}/${this.selectedDate}`
+            );
+            const grpMap = this.groups.reduce((m, g) => {
+                m[g.groupId] = g.groupNumber;
+                return m;
+            }, {});
+            
+            this.matches = mRes.data.map(m => {
+                // Verwende groupId aus dem Backend, falls vorhanden, sonst aus den Spielern
+                const matchGroupId = m.groupId || m.player1?.groupId || m.player2?.groupId;
+                
+                // Stelle sicher, dass groupRound vorhanden ist (kann als group_round vom Backend kommen)
+                const groupRound = m.groupRound || m.group_round || 0;
+                
+                const groupNumber = grpMap[matchGroupId] || 0;
+                
+                return {
+                    ...m,
+                    groupId: matchGroupId,
+                    groupNumber: groupNumber,
+                    groupRound: groupRound, // Stelle sicher, dass groupRound gesetzt ist
+                    resultInput: '',
+                    isActive: m.isActive || false
+                };
+            });
+            
+            // Initialisiere groupNumber für Teilnehmer basierend auf groupId
+            this.initializeParticipantGroupNumbers();
+            
+            // Setze Kollaps-Status: ausgeklappt wenn keine Spiele, eingeklappt wenn Spiele vorhanden
+            this.showParticipants = this.matches.length === 0;
+            
+            this.showKnockout = this.matches.some(m => m.round !== 'group');
+        },
+        
+        async handleTournamentChanged(data) {
+            if (!data || !data.tournamentId) {
+                return;
+            }
+            // Nur aktualisieren, wenn das aktuelle Turnier betroffen ist
+            if (this.selectedDate && this.selectedDate !== 'new' && String(this.selectedDate) === String(data.tournamentId)) {
+                try {
+                    await this.loadTournamentData();
+                    // Force Vue update
+                    this.$forceUpdate();
+                } catch (error) {
+                    console.error('Fehler beim Neuladen der Turnier-Daten:', error);
+                }
+            } else {
+                // Wenn ein neues Turnier erstellt wurde, lade die Turnierliste neu
+                if (data.tournamentId && this.selectedDate === 'new') {
+                    try {
+                        const d = await apiClient.get(`/tournament/${this.currentClub}`);
+                        // Filtere Turniere basierend auf allowsExternal Prop
+                        if (this.allowsExternal) {
+                            this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
+                        } else {
+                            this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
+                        }
+                    } catch (error) {
+                        console.error('Fehler beim Neuladen der Turnierliste:', error);
+                    }
+                }
+            }
+        },
+
+        getPlayerName(p) {
+            // Unterstütze sowohl interne (mit member) als auch externe Teilnehmer
+            if (p.member) {
+                return p.member.firstName + ' ' + p.member.lastName;
+            } else {
+                return (p.firstName || '') + ' ' + (p.lastName || '');
+            }
+        },
+
+        async loadTournaments() {
+            try {
+                const d = await apiClient.get(`/tournament/${this.currentClub}`);
+                // Filtere Turniere basierend auf allowsExternal Prop
+                if (this.allowsExternal) {
+                    this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
+                } else {
+                    this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
+                }
+                
+                // Lade Mitgliederliste, falls noch nicht geladen
+                if (!this.clubMembers || this.clubMembers.length === 0) {
+                    try {
+                        const m = await apiClient.get(
+                            `/clubmembers/get/${this.currentClub}/false`
+                        );
+                        // Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
+                        const sorted = (m.data || []).sort((a, b) => {
+                            const firstNameA = (a.firstName || '').toLowerCase();
+                            const firstNameB = (b.firstName || '').toLowerCase();
+                            if (firstNameA !== firstNameB) {
+                                return firstNameA.localeCompare(firstNameB, 'de');
+                            }
+                            const lastNameA = (a.lastName || '').toLowerCase();
+                            const lastNameB = (b.lastName || '').toLowerCase();
+                            return lastNameA.localeCompare(lastNameB, 'de');
+                        });
+                        this.clubMembers = sorted;
+                    } catch (error) {
+                        console.error('Fehler beim Laden der Mitgliederliste:', error);
+                        this.clubMembers = [];
+                    }
+                }
+                
+                // Prüfe nicht hier, da kein Turnier ausgewählt ist
+            } catch (error) {
+                console.error('Fehler beim Laden der Turniere:', error);
+                this.dates = [];
+            }
+        },
+
+        async checkTrainingForDate(date) {
+            try {
+                if (!date) {
+                    this.hasTrainingToday = false;
+                    return;
+                }
+                // Konvertiere das Datum ins YYYY-MM-DD Format, falls es noch nicht in diesem Format ist
+                const dateStr = date instanceof Date 
+                    ? date.toISOString().split('T')[0] 
+                    : date.split('T')[0]; // Falls es ein ISO-String ist, nimm nur den Datumsteil
+                
+                const response = await apiClient.get(`/diary/${this.currentClub}`);
+                
+                // Die API gibt alle Trainingstage zurück, filtere nach dem Turnierdatum
+                const trainingData = response.data;
+                if (Array.isArray(trainingData)) {
+                    this.hasTrainingToday = trainingData.some(training => training.date === dateStr);
+                } else {
+                    this.hasTrainingToday = false;
+                }
+            } catch (error) {
+                console.error('Fehler beim Prüfen des Trainingstags:', error);
+                this.hasTrainingToday = false;
+            }
+        },
+
+        async updateTournament() {
+            if (!this.currentTournamentDate) {
+                // Wenn kein Datum vorhanden ist, nicht speichern (z.B. beim ersten Laden)
+                return;
+            }
+            try {
+                await apiClient.put(`/tournament/${this.currentClub}/${this.selectedDate}`, {
+                    name: this.currentTournamentName || this.currentTournamentDate,
+                    date: this.currentTournamentDate,
+                    winningSets: this.currentWinningSets
+                });
+                // Prüfe, ob es einen Trainingstag für das neue Datum gibt
+                await this.checkTrainingForDate(this.currentTournamentDate);
+                // Lade Turnierliste neu, damit der Name in der Dropdown-Liste aktualisiert wird
+                await this.loadTournaments();
+                // Lade Turnierdaten neu, um sicherzustellen, dass alle Werte korrekt sind
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren des Turniers:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren des Turniers.');
+                await this.showInfo('Fehler', message, '', 'error');
+                // Lade Daten neu, um die ursprünglichen Werte wiederherzustellen
+                await this.loadTournamentData();
+            }
+        },
+
+        async createTournament() {
+            if (!this.newDate) {
+                await this.showInfo('Fehler', 'Bitte geben Sie ein Datum ein!', '', 'error');
+                return;
+            }
+            try {
+                const r = await apiClient.post('/tournament', {
+                    clubId: this.currentClub,
+                    tournamentName: this.newTournamentName || this.newDate,
+                    date: this.newDate,
+                    winningSets: this.newWinningSets,
+                    allowsExternal: this.allowsExternal
+                });
+                
+                
+                // Speichere die ID des neuen Turniers
+                const newTournamentId = r.data.id;
+                
+                // Lade die Turniere neu
+                await this.loadTournaments();
+                
+                // Setze das neue Turnier als ausgewählt
+                this.selectedDate = newTournamentId;
+                
+                this.newDate = '';
+                this.newTournamentName = '';
+                this.newWinningSets = 3;
+            } catch (error) {
+                console.error('Fehler beim Erstellen des Turniers:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Erstellen des Turniers.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        async addParticipant() {
+            if (!this.selectedMember) {
+                await this.showInfo('Fehler', 'Bitte wählen Sie einen Teilnehmer aus!', '', 'error');
+                return;
+            }
+            const oldMap = this.participants.reduce((map, p) => {
+                map[p.id] = p.groupNumber
+                return map
+            }, {})
+            const r = await apiClient.post('/tournament/participant', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                participant: this.selectedMember
+            })
+            this.participants = r.data.map(p => ({
+                ...p,
+                groupNumber:
+                    oldMap[p.id] != null
+                        ? oldMap[p.id]
+                        : (p.groupId || null)
+            }))
+            this.selectedMember = null
+        },
+
+        async createGroups() {
+            try {
+                // Wenn Klassen vorhanden sind, verwende groupsPerClass
+                if (this.tournamentClasses.length > 0) {
+                    await apiClient.post('/tournament/groups/create', {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate,
+                        groupsPerClass: this.groupsPerClass
+                    });
+                } else {
+                    // Fallback: Verwende numberOfGroups wie bisher
+                    await apiClient.put('/tournament/groups', {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate,
+                        numberOfGroups: this.numberOfGroups
+                    });
+                }
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Erstellen der Gruppen:', error);
+                const message = error.response?.data?.error || error.message || 'Fehler beim Erstellen der Gruppen.';
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        async randomizeGroups() {
+            try {
+                const r = await apiClient.post('/tournament/groups', {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate
+                });
+                this.participants = r.data;
+            } catch (err) {
+                const message = safeErrorMessage(err, 'Fehler beim Zufällig-Verteilen.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+            await this.loadTournamentData();
+        },
+
+        async saveMatchResult(match, result) {
+            if (!result || result.trim().length === 0) {
+                return;
+            }
+            const normalized = this.normalizeResultInput(result);
+            if (!normalized) return;
+            result = normalized;
+            await apiClient.post('/tournament/match/result', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                matchId: match.id,
+                set: (match.tournamentResults?.length || 0) + 1,
+                result
+            });
+            // Lade Turnierdaten neu, da das Match möglicherweise automatisch abgeschlossen wurde
+            await this.loadTournamentData();
+        },
+
+        async finishMatch(match) {
+            await apiClient.post('/tournament/match/finish', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                matchId: match.id
+            });
+            await this.loadTournamentData();
+        },
+
+        async setMatchActive(match, isActive) {
+            try {
+                await apiClient.put(`/tournament/match/${this.currentClub}/${this.selectedDate}/${match.id}/active`, {
+                    isActive: isActive
+                });
+                // Lade Turnierdaten neu, um sicherzustellen, dass der Status korrekt ist
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Setzen des Match-Status:', error);
+                await this.loadTournamentData();
+            }
+        },
+
+        async generatePDF() {
+            if (!this.selectedDate || this.selectedDate === 'new') {
+                await this.showInfo('Hinweis', 'Bitte wählen Sie zuerst ein Turnier aus.', '', 'info');
+                return;
+            }
+
+            try {
+                const pdf = new PDFGenerator();
+                
+                // Bereite Daten vor - erstelle Mapping von groupId zu classId
+                const groupIdToClassId = {};
+                this.groups.forEach(group => {
+                    groupIdToClassId[group.groupId] = group.classId;
+                });
+
+                const matchesByClassAndGroup = {};
+                this.groupMatches.forEach(match => {
+                    // Hole classId aus der Gruppe
+                    const classId = match.classId != null ? String(match.classId) : 
+                                   (groupIdToClassId[match.groupId] != null ? String(groupIdToClassId[match.groupId]) : 'null');
+                    const groupId = String(match.groupId || 'null');
+                    
+                    if (!matchesByClassAndGroup[classId]) {
+                        matchesByClassAndGroup[classId] = {};
+                    }
+                    if (!matchesByClassAndGroup[classId][groupId]) {
+                        matchesByClassAndGroup[classId][groupId] = [];
+                    }
+                    matchesByClassAndGroup[classId][groupId].push(match);
+                });
+
+                // Sortiere Matches innerhalb jeder Gruppe nach Runde
+                Object.values(matchesByClassAndGroup).forEach(groups => {
+                    Object.values(groups).forEach(matches => {
+                        matches.sort((a, b) => {
+                            if (a.groupRound !== b.groupRound) {
+                                return (a.groupRound || 0) - (b.groupRound || 0);
+                            }
+                            return (a.id || 0) - (b.id || 0);
+                        });
+                    });
+                });
+
+                // Erstelle eine Funktion, um Match-Ergebnisse zu finden
+                const findMatchResult = (player1Id, player2Id, groupId) => {
+                    const match = this.groupMatches.find(m => 
+                        m.groupId === groupId &&
+                        ((m.player1.id === player1Id && m.player2.id === player2Id) ||
+                         (m.player1.id === player2Id && m.player2.id === player1Id)) &&
+                        m.isFinished
+                    );
+                    if (!match) return null;
+                    return match.result || this.formatResult(match);
+                };
+
+                // Erstelle eine Funktion, um Klassennamen zu finden
+                const getClassNameForId = (classId) => {
+                    if (classId === 'null' || classId === 'undefined') return null;
+                    const classItem = this.tournamentClasses.find(c => c.id === parseInt(classId));
+                    return classItem ? classItem.name : null;
+                };
+
+                // Erweitere PDFGenerator mit den benötigten Funktionen
+                pdf.getClassNameForId = (classId) => getClassNameForId(classId);
+                pdf.findMatchResult = findMatchResult;
+
+                // Generiere PDF
+                // Verwende extendedRankingList wenn K.O.-Runden vorhanden sind, sonst rankingList
+                const rankingToUse = this.knockoutMatches.length > 0 ? this.extendedRankingList : this.rankingList;
+                pdf.addTournamentPDF(
+                    this.currentTournamentName || 'Turnier',
+                    this.currentTournamentDate,
+                    this.groupsByClass,
+                    this.groupRankings,
+                    matchesByClassAndGroup,
+                    this.getPlayerName,
+                    rankingToUse,
+                    this.sortedParticipants,
+                    this.knockoutMatches.length > 0,
+                    this.knockoutMatches
+                );
+
+                // Dateiname generieren
+                const dateStr = this.currentTournamentDate 
+                    ? new Date(this.currentTournamentDate).toISOString().split('T')[0]
+                    : 'turnier';
+                const filename = `${this.currentTournamentName || 'Turnier'}_${dateStr}.pdf`.replace(/[^a-zA-Z0-9._-]/g, '_');
+                
+                pdf.save(filename);
+            } catch (error) {
+                console.error('Fehler beim Generieren des PDFs:', error);
+                await this.showInfo('Fehler', 'Fehler beim Generieren des PDFs', error.message, 'error');
+            }
+        },
+
+        async startKnockout() {
+            await apiClient.post('/tournament/knockout', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate
+            });
+            await this.loadTournamentData();
+        },
+
+        formatResult(match) {
+            if (!match.tournamentResults?.length) return '-';
+            return match.tournamentResults
+                .sort((a, b) => a.set - b.set)
+                .map(r => `${Math.abs(r.pointsPlayer1)}:${Math.abs(r.pointsPlayer2)}`)
+                .join(', ');
+        },
+
+        async startMatches() {
+            if (this.isGroupTournament) {
+                if (!this.groups.length) {
+                    await this.createGroups();
+                }
+                await this.randomizeGroups();
+            } else {
+                await this.startKnockout();
+            }
+            await this.loadTournamentData();
+        },
+
+        async onModusChange() {
+            const type = this.isGroupTournament ? 'groups' : 'knockout';
+            await apiClient.post('/tournament/modus', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                type,
+                numberOfGroups: this.numberOfGroups,
+                advancingPerGroup: this.advancingPerGroup
+            });
+            await this.loadTournamentData();
+        },
+
+        async resetGroups() {
+            await apiClient.post('/tournament/groups/reset', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate
+            });
+            await this.loadTournamentData();
+        },
+
+        async resetMatches() {
+            await apiClient.post('/tournament/matches/reset', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate
+            });
+            await this.loadTournamentData();
+        },
+
+        async removeParticipant(p) {
+            if (this.allowsExternal && p.isExternal) {
+                // Externer Teilnehmer
+                await apiClient.delete('/tournament/external-participant', {
+                    data: {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate,
+                        participantId: p.id
+                    }
+                });
+                this.externalParticipants = this.externalParticipants.filter(x => x.id !== p.id);
+            } else {
+                // Interner Teilnehmer
+                await apiClient.delete('/tournament/participant', {
+                    data: {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate,
+                        participantId: p.id
+                    }
+                });
+                this.participants = this.participants.filter(x => x.id !== p.id);
+            }
+            await this.loadTournamentData();
+        },
+
+        async onGroupCountChange() {
+            await apiClient.post('/tournament/modus', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                type: this.isGroupTournament ? 'groups' : 'knockout',
+                numberOfGroups: this.numberOfGroups
+            });
+            await this.loadTournamentData();
+        },
+
+        async reopenMatch(match) {
+            await apiClient.post('/tournament/match/reopen', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                matchId: match.id
+            });
+            await this.loadTournamentData();
+        },
+
+        async deleteResult(match, set) {
+            if (match.isFinished) {
+                await this.reopenMatch(match);
+                match.isFinished = false;
+            }
+            await apiClient.delete('/tournament/match/result', {
+                data: {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate,
+                    matchId: match.id,
+                    set
+                }
+            });
+            await this.loadTournamentData();
+        },
+
+        startEditResult(match, result) {
+            if (match.isFinished) {
+                this.reopenMatch(match);
+                match.isFinished = false;
+            }
+            this.editingResult.matchId = match.id;
+            this.editingResult.set = result.set;
+            this.editingResult.value = `${result.pointsPlayer1}:${result.pointsPlayer2}`;
+            this.activeMatchId = match.id;  // Setze aktives Match für Hervorhebung
+            
+            // Fokussiere das Eingabefeld nach dem nächsten DOM-Update
+            this.$nextTick(() => {
+                const editInputs = this.$refs.editInput;
+                if (editInputs && editInputs.length > 0) {
+                    const lastInput = editInputs[editInputs.length - 1];
+                    lastInput.focus();
+                    lastInput.select();
+                }
+            });
+        },
+
+        async saveEditedResult(match) {
+            const { set, value } = this.editingResult;
+            const normalized = this.normalizeResultInput(value);
+            if (!normalized) {
+                this.cancelEdit();
+                return;
+            }
+            let result = normalized;
+            await apiClient.post('/tournament/match/result', {
+                clubId: this.currentClub,
+                tournamentId: this.selectedDate,
+                matchId: match.id,
+                set,
+                result
+            });
+            this.editingResult.matchId = null;
+            this.editingResult.set = null;
+            this.editingResult.value = '';
+            await this.loadTournamentData();
+        },
+
+        cancelEdit() {
+            this.editingResult.matchId = null;
+            this.editingResult.set = null;
+            this.editingResult.value = '';
+        },
+
+        isEditing(match, set) {
+            return (
+                this.editingResult.matchId === match.id &&
+                this.editingResult.set === set
+            );
+        },
+
+        isLastResult(match, result) {
+            const arr = match.tournamentResults || [];
+            return arr.length > 0 && arr[arr.length - 1].set === result.set;
+        },
+
+        getSetsString(match) {
+            const results = match.tournamentResults || [];
+            let win1 = 0, win2 = 0;
+            for (const r of results) {
+                if (r.pointsPlayer1 > r.pointsPlayer2) win1++;
+                else if (r.pointsPlayer2 > r.pointsPlayer1) win2++;
+            }
+            return `${win1}:${win2}`;
+        },
+
+        winnerIsPlayer1(match) {
+            const [w1, w2] = this.getSetsString(match).split(':').map(Number);
+            return w1 > w2;
+        },
+
+        async resetKnockout() {
+            try {
+                await apiClient.delete('/tournament/matches/knockout', {
+                    data: {
+                        clubId: this.currentClub,
+                        tournamentId: this.selectedDate
+                    }
+                });
+                await this.loadTournamentData();
+            } catch (err) {
+                const message = safeErrorMessage(err, 'Fehler beim Zurücksetzen der K.o.-Runde.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        getMatchResult(player1Id, player2Id, groupId) {
+            const match = this.matches.find(m => 
+                m.round === 'group' && 
+                m.groupId === groupId &&
+                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
+                 (m.player1.id === player2Id && m.player2.id === player1Id)) &&
+                m.isFinished
+            );
+            
+            if (!match) return null;
+            
+            // Bestimme, wer gewonnen hat
+            const [sets1, sets2] = match.result.split(':').map(n => +n);
+            const player1Won = sets1 > sets2;
+            
+            // Gib das Ergebnis in der Sicht des ersten Spielers zurück
+            if (match.player1.id === player1Id) {
+                return player1Won ? 'W' : 'L';
+            } else {
+                return player1Won ? 'L' : 'W';
+            }
+        },
+
+        getMatchLiveResult(player1Id, player2Id, groupId) {
+            const match = this.matches.find(m => 
+                m.round === 'group' && 
+                m.groupId === groupId &&
+                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
+                 (m.player1.id === player2Id && m.player2.id === player1Id))
+            );
+            
+            if (!match) return null;
+            
+            // Berechne aktuelle Sätze aus tournamentResults
+            let sets1 = 0, sets2 = 0;
+            if (match.tournamentResults && match.tournamentResults.length > 0) {
+                match.tournamentResults.forEach(result => {
+                    if (result.pointsPlayer1 > result.pointsPlayer2) {
+                        sets1++;
+                    } else if (result.pointsPlayer2 > result.pointsPlayer1) {
+                        sets2++;
+                    }
+                });
+            }
+            
+            // Bestimme die Anzeige basierend auf der Spieler-Reihenfolge
+            if (match.player1.id === player1Id) {
+                return {
+                    sets1: sets1,
+                    sets2: sets2,
+                    isFinished: match.isFinished,
+                    player1Won: sets1 > sets2,
+                    player2Won: sets2 > sets1,
+                    isTie: sets1 === sets2
+                };
+            } else {
+                return {
+                    sets1: sets2,
+                    sets2: sets1,
+                    isFinished: match.isFinished,
+                    player1Won: sets2 > sets1,
+                    player2Won: sets1 > sets2,
+                    isTie: sets1 === sets2
+                };
+            }
+        },
+
+        highlightMatch(player1Id, player2Id, groupId) {
+            
+            // Finde das entsprechende Match (auch unbeendete)
+            const match = this.matches.find(m => 
+                m.round === 'group' && 
+                m.groupId === groupId &&
+                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
+                 (m.player1.id === player2Id && m.player2.id === player1Id))
+            );
+            
+            
+            if (!match) {
+                return;
+            }
+            
+            // Setze activeMatchId für bidirektionale Hervorhebung
+            this.activeMatchId = match.id;
+            
+            // Setze Highlight-Klasse
+            this.$nextTick(() => {
+                const matchElement = document.querySelector(`tr[data-match-id="${match.id}"]`);
+                
+                if (matchElement) {
+                    // Entferne vorherige Highlights
+                    document.querySelectorAll('.match-highlight').forEach(el => {
+                        el.classList.remove('match-highlight');
+                    });
+                    
+                    // Füge Highlight hinzu
+                    matchElement.classList.add('match-highlight');
+                    
+                    // Scrolle zum Element
+                    matchElement.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'center' 
+                    });
+                } else {
+                }
+            });
+        },
+
+        clearHighlight() {
+            // Entferne alle Highlights
+            document.querySelectorAll('.match-highlight').forEach(el => {
+                el.classList.remove('match-highlight');
+            });
+        },
+
+        async updateParticipantSeeded(participant, event) {
+            const seeded = event.target.checked;
+            
+            // Aktualisiere lokal
+            participant.seeded = seeded;
+            
+            // Sende an Backend
+            try {
+                if (this.allowsExternal && participant.isExternal) {
+                    // Externer Teilnehmer
+                    await apiClient.put(`/tournament/external-participant/${this.currentClub}/${this.selectedDate}/${participant.id}/seeded`, {
+                        seeded: seeded
+                    });
+                } else {
+                    // Interner Teilnehmer
+                    await apiClient.put(`/tournament/participant/${this.currentClub}/${this.selectedDate}/${participant.id}/seeded`, {
+                        seeded: seeded
+                    });
+                }
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren des Gesetzt-Status:', error);
+                // Bei Fehler: Lade Daten neu
+                await this.loadTournamentData();
+            }
+        },
+
+        async updateParticipantGroup(participant, event) {
+            const groupNumber = parseInt(event.target.value);
+            
+            // Aktualisiere lokal
+            participant.groupNumber = groupNumber;
+            
+            // Bereite alle Teilnehmer-Zuordnungen vor (interne und externe, wenn allowsExternal = true)
+            const assignments = this.allowsExternal
+                ? [
+                    ...this.participants.map(p => ({
+                        participantId: p.id,
+                        groupNumber: p.groupNumber || null,
+                        isExternal: false
+                    })),
+                    ...this.externalParticipants.map(p => ({
+                        participantId: p.id,
+                        groupNumber: p.groupNumber || null,
+                        isExternal: true
+                    }))
+                ]
+                : this.participants.map(p => ({
+                    participantId: p.id,
+                    groupNumber: p.groupNumber || null
+                }));
+            
+            // Sende an Backend
+            try {
+                await apiClient.post('/tournament/groups/manual', {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate,
+                    assignments: assignments,
+                    numberOfGroups: this.numberOfGroups,
+                    maxGroupSize: this.maxGroupSize
+                });
+                
+                // Lade Daten neu, um die aktualisierten Gruppen zu erhalten
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren der Gruppe:', error);
+                // Bei Fehler: Lade Daten neu
+                await this.loadTournamentData();
+            }
+        },
+
+        // Initialisiere groupNumber basierend auf groupId
+        initializeParticipantGroupNumbers() {
+            // Interne Teilnehmer
+            this.participants.forEach(participant => {
+                if (participant.groupId) {
+                    const group = this.groups.find(g => g.groupId === participant.groupId);
+                    if (group) {
+                        participant.groupNumber = group.groupNumber;
+                    }
+                }
+            });
+            // Externe Teilnehmer (nur bei allowsExternal = true)
+            if (this.allowsExternal) {
+                this.externalParticipants.forEach(participant => {
+                    if (participant.groupId) {
+                        const group = this.groups.find(g => g.groupId === participant.groupId);
+                        if (group) {
+                            participant.groupNumber = group.groupNumber;
+                        }
+                    }
+                });
+            }
+        },
+
+        toggleParticipants() {
+            this.showParticipants = !this.showParticipants;
+        },
+
+        toggleClasses() {
+            this.showClasses = !this.showClasses;
+        },
+
+        async loadTournamentClasses() {
+            if (!this.selectedDate || this.selectedDate === 'new') {
+                this.tournamentClasses = [];
+                this.groupsPerClass = {};
+                return;
+            }
+            try {
+                const res = await apiClient.get(`/tournament/classes/${this.currentClub}/${this.selectedDate}`);
+                this.tournamentClasses = res.data || [];
+                // Initialisiere groupsPerClass für jede Klasse
+                const newGroupsPerClass = { ...this.groupsPerClass };
+                this.tournamentClasses.forEach(classItem => {
+                    if (!(classItem.id in newGroupsPerClass)) {
+                        newGroupsPerClass[classItem.id] = 0;
+                    }
+                });
+                this.groupsPerClass = newGroupsPerClass;
+            } catch (error) {
+                console.error('Fehler beim Laden der Klassen:', error);
+                this.tournamentClasses = [];
+                this.groupsPerClass = {};
+            }
+        },
+
+        async addClass() {
+            if (!this.newClassName || !this.newClassName.trim()) {
+                await this.showInfo('Fehler', 'Bitte geben Sie einen Klassennamen ein!', '', 'error');
+                return;
+            }
+            try {
+                await apiClient.post(`/tournament/class/${this.currentClub}/${this.selectedDate}`, {
+                    name: this.newClassName.trim()
+                });
+                this.newClassName = '';
+                await this.loadTournamentClasses();
+            } catch (error) {
+                console.error('Fehler beim Hinzufügen der Klasse:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Hinzufügen der Klasse.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        editClass(classItem) {
+            this.editingClassId = classItem.id;
+            this.editingClassName = classItem.name;
+            this.$nextTick(() => {
+                const inputs = this.$refs.classEditInput;
+                if (inputs && inputs.length > 0) {
+                    const input = Array.isArray(inputs) ? inputs.find(i => i) : inputs;
+                    if (input) {
+                        input.focus();
+                        input.select();
+                    }
+                }
+            });
+        },
+
+        async saveClassEdit(classItem) {
+            if (!this.editingClassName || !this.editingClassName.trim()) {
+                await this.showInfo('Fehler', 'Bitte geben Sie einen Klassennamen ein!', '', 'error');
+                this.cancelClassEdit();
+                return;
+            }
+            try {
+                await apiClient.put(`/tournament/class/${this.currentClub}/${this.selectedDate}/${classItem.id}`, {
+                    name: this.editingClassName.trim()
+                });
+                classItem.name = this.editingClassName.trim();
+                this.cancelClassEdit();
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren der Klasse:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren der Klasse.');
+                await this.showInfo('Fehler', message, '', 'error');
+                // Lade Klassen neu, um den ursprünglichen Namen wiederherzustellen
+                await this.loadTournamentClasses();
+                this.cancelClassEdit();
+            }
+        },
+
+        cancelClassEdit() {
+            this.editingClassId = null;
+            this.editingClassName = '';
+        },
+
+        async deleteClass(classItem) {
+            const confirmed = await this.showConfirm(
+                'Klasse löschen',
+                `Möchten Sie die Klasse "${classItem.name}" wirklich löschen?`,
+                'Alle Teilnehmer werden von dieser Klasse entfernt.',
+                'warning'
+            );
+            if (!confirmed) return;
+            try {
+                await apiClient.delete(`/tournament/class/${this.currentClub}/${this.selectedDate}/${classItem.id}`);
+                await this.loadTournamentClasses();
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Löschen der Klasse:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Löschen der Klasse.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        async updateParticipantClass(participant, event) {
+            const classId = event.target.value === '' ? null : parseInt(event.target.value);
+            try {
+                await apiClient.put(`/tournament/participant/${this.currentClub}/${this.selectedDate}/${participant.id}/class`, {
+                    classId: classId,
+                    isExternal: participant.isExternal || false
+                });
+                participant.classId = classId;
+            } catch (error) {
+                console.error('Fehler beim Aktualisieren der Klasse:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren der Klasse.');
+                await this.showInfo('Fehler', message, '', 'error');
+                // Lade Daten neu, um die ursprüngliche Klasse wiederherzustellen
+                await this.loadTournamentData();
+            }
+        },
+
+        async addExternalParticipant() {
+            if (!this.newExternalParticipant.firstName || !this.newExternalParticipant.lastName) {
+                await this.showInfo('Fehler', 'Bitte geben Sie mindestens Vorname und Nachname ein!', '', 'error');
+                return;
+            }
+            try {
+                await apiClient.post('/tournament/external-participant', {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate,
+                    firstName: this.newExternalParticipant.firstName,
+                    lastName: this.newExternalParticipant.lastName,
+                    club: this.newExternalParticipant.club || null,
+                    birthDate: this.newExternalParticipant.birthDate || null
+                });
+                // Leere Eingabefelder
+                this.newExternalParticipant = {
+                    firstName: '',
+                    lastName: '',
+                    club: '',
+                    birthDate: null
+                };
+                // Lade Daten neu
+                await this.loadTournamentData();
+            } catch (error) {
+                console.error('Fehler beim Hinzufügen des externen Teilnehmers:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Hinzufügen des externen Teilnehmers.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        async loadParticipantsFromTraining() {
+            try {
+                if (!this.currentTournamentDate) {
+                    await this.showInfo('Hinweis', 'Kein Turnierdatum vorhanden!', '', 'info');
+                    return;
+                }
+                
+                // Konvertiere das Turnierdatum ins YYYY-MM-DD Format
+                const tournamentDate = this.currentTournamentDate instanceof Date 
+                    ? this.currentTournamentDate.toISOString().split('T')[0] 
+                    : this.currentTournamentDate.split('T')[0]; // Falls es ein ISO-String ist, nimm nur den Datumsteil
+                
+                const response = await apiClient.get(`/diary/${this.currentClub}`);
+                
+                // Die API gibt alle Trainingstage zurück, filtere nach dem Turnierdatum
+                const trainingData = response.data;
+                
+                if (Array.isArray(trainingData)) {
+                    
+                    // Finde den Trainingstag für das Turnierdatum
+                    const trainingForDate = trainingData.find(training => training.date === tournamentDate);
+                    
+                    if (trainingForDate) {
+                        // Lade die Teilnehmer für diesen Trainingstag über die Participant-API
+                        const participantsResponse = await apiClient.get(`/participants/${trainingForDate.id}`);
+                        
+                        const participants = participantsResponse.data;
+                        
+                        if (participants && participants.length > 0) {
+                            // Lade die Member-Details für jeden Teilnehmer
+                            const trainingParticipants = [];
+                            for (const participant of participants) {
+                                try {
+                                    // Lade Member-Details über die Member-API
+                                    const memberResponse = await apiClient.get(`/clubmembers/get/${this.currentClub}/true`);
+                                    const member = memberResponse.data.find(m => m.id === participant.memberId);
+                                    
+                                    if (member) {
+                                        trainingParticipants.push({
+                                            clubMemberId: participant.memberId,
+                                            member: member
+                                        });
+                                    }
+                                } catch (memberError) {
+                                    console.error('Fehler beim Laden der Member-Details:', memberError);
+                                }
+                            }
+                            
+                            if (trainingParticipants.length > 0) {
+                                // Füge alle Trainingsteilnehmer zum Turnier hinzu
+                                for (const participant of trainingParticipants) {
+                                    await this.addParticipantFromTraining(participant);
+                                }
+                                
+                                // Lade Turnierdaten neu
+                                await this.loadTournamentData();
+                            } else {
+                                await this.showInfo('Hinweis', 'Keine gültigen Teilnehmer im Trainingstag für dieses Datum gefunden!', '', 'info');
+                            }
+                        } else {
+                            await this.showInfo('Hinweis', 'Keine Teilnehmer im Trainingstag für dieses Datum gefunden!', '', 'info');
+                        }
+                    } else {
+                        await this.showInfo('Hinweis', `Kein Trainingstag für ${tournamentDate} gefunden!`, '', 'info');
+                    }
+                } else {
+                    await this.showInfo('Hinweis', `Kein Trainingstag für ${tournamentDate} gefunden!`, '', 'info');
+                }
+            } catch (error) {
+                console.error('Fehler beim Laden der Trainingsteilnehmer:', error);
+                const message = safeErrorMessage(error, 'Fehler beim Laden der Trainingsteilnehmer.');
+                await this.showInfo('Fehler', message, '', 'error');
+            }
+        },
+
+        async addParticipantFromTraining(participant) {
+            try {
+                await apiClient.post('/tournament/participant', {
+                    clubId: this.currentClub,
+                    tournamentId: this.selectedDate,
+                    participant: participant.clubMemberId
+                });
+            } catch (error) {
+                console.error('Fehler beim Hinzufügen des Teilnehmers:', error);
+                // Ignoriere Fehler, da Teilnehmer möglicherweise bereits existiert
+            }
+        },
+
+        getMatchDisplayText(player1Id, player2Id, groupId) {
+            const liveResult = this.getMatchLiveResult(player1Id, player2Id, groupId);
+            if (!liveResult) return '-';
+            
+            // Zeige Satzergebnis (z.B. 1:0, 2:1, 0:2)
+            return `${liveResult.sets1}:${liveResult.sets2}`;
+        },
+
+        getMatchCellClasses(player1Id, player2Id, groupId) {
+            const liveResult = this.getMatchLiveResult(player1Id, player2Id, groupId);
+            if (!liveResult) return ['no-match'];
+            
+            const classes = ['match-result'];
+            
+            if (liveResult.isFinished) {
+                // Spiel beendet: Dunkle Farben
+                if (liveResult.player1Won) {
+                    classes.push('match-finished-win');
+                } else if (liveResult.player2Won) {
+                    classes.push('match-finished-loss');
+                } else {
+                    classes.push('match-finished-tie');
+                }
+            } else {
+                // Spiel läuft: Helle Farben
+                if (liveResult.player1Won) {
+                    classes.push('match-live-win');
+                } else if (liveResult.player2Won) {
+                    classes.push('match-live-loss');
+                } else {
+                    classes.push('match-live-tie');
+                }
+            }
+            
+            return classes;
+        },
+
+        getLivePosition(playerId, groupId) {
+            // Berechne Live-Punkte für alle Spieler in der Gruppe
+            const groupPlayers = this.groupRankings[groupId] || [];
+            const liveStats = groupPlayers.map(player => {
+                let livePoints = player.points || 0;
+                let liveSetsWon = player.setsWon || 0;
+                let liveSetsLost = player.setsLost || 0;
+                
+                // Füge Live-Punkte aus begonnenen (aber nicht abgeschlossenen) Spielen hinzu
+                const playerMatches = this.matches.filter(m => 
+                    m.round === 'group' && 
+                    m.groupId === groupId &&
+                    (m.player1.id === player.id || m.player2.id === player.id) &&
+                    !m.isFinished && // Nur begonnene, nicht abgeschlossene Spiele
+                    m.tournamentResults && m.tournamentResults.length > 0 // Mit Satz-Ergebnissen
+                );
+                
+                playerMatches.forEach(match => {
+                    const isPlayer1 = match.player1.id === player.id;
+                    const results = match.tournamentResults || [];
+                    
+                    if (results.length > 0) {
+                        let setsWon = 0, setsLost = 0;
+                        results.forEach(result => {
+                            if (isPlayer1) {
+                                if (result.pointsPlayer1 > result.pointsPlayer2) setsWon++;
+                                else if (result.pointsPlayer2 > result.pointsPlayer1) setsLost++;
+                            } else {
+                                if (result.pointsPlayer2 > result.pointsPlayer1) setsWon++;
+                                else if (result.pointsPlayer1 > result.pointsPlayer2) setsLost++;
+                            }
+                        });
+                        
+                        // Füge Live-Punkte hinzu (basierend auf aktuellen Sätzen)
+                        if (setsWon > setsLost) {
+                            livePoints += 1;
+                        } else if (setsLost > setsWon) {
+                            livePoints -= 1;
+                        }
+                        
+                        // Füge Live-Sätze hinzu
+                        if (isPlayer1) {
+                            liveSetsWon += results.reduce((sum, r) => sum + r.pointsPlayer1, 0);
+                            liveSetsLost += results.reduce((sum, r) => sum + r.pointsPlayer2, 0);
+                        } else {
+                            liveSetsWon += results.reduce((sum, r) => sum + r.pointsPlayer2, 0);
+                            liveSetsLost += results.reduce((sum, r) => sum + r.pointsPlayer1, 0);
+                        }
+                    }
+                });
+                
+                return {
+                    id: player.id,
+                    name: player.name,
+                    livePoints: livePoints,
+                    liveSetsWon: liveSetsWon,
+                    liveSetsLost: liveSetsLost,
+                    liveSetDiff: liveSetsWon - liveSetsLost
+                };
+            });
+            
+            // Sortiere nach Live-Punkten (absteigend), dann nach Satzverhältnis
+            liveStats.sort((a, b) => {
+                if (b.livePoints !== a.livePoints) return b.livePoints - a.livePoints;
+                if (b.liveSetDiff !== a.liveSetDiff) return b.liveSetDiff - a.liveSetDiff;
+                if (b.liveSetsWon !== a.liveSetsWon) return b.liveSetsWon - a.liveSetsWon;
+                return a.name.localeCompare(b.name);
+            });
+            
+            // Weise Positionen zu, wobei Spieler mit identischen Werten den gleichen Platz bekommen
+            let currentPosition = 1;
+            const positions = liveStats.map((p, i) => {
+                // Wenn nicht der erste Spieler und die Werte identisch sind, verwende die gleiche Position
+                if (i > 0) {
+                    const prev = liveStats[i - 1];
+                    if (prev.livePoints === p.livePoints && 
+                        prev.liveSetDiff === p.liveSetDiff && 
+                        prev.liveSetsWon === p.liveSetsWon) {
+                        // Gleicher Platz wie Vorgänger
+                        return currentPosition;
+                    }
+                }
+                // Neuer Platz
+                currentPosition = i + 1;
+                return currentPosition;
+            });
+            
+            // Finde Position des Spielers
+            const playerIndex = liveStats.findIndex(p => p.id === playerId);
+            return playerIndex >= 0 ? positions[playerIndex] : liveStats.length + 1;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.tournaments-view {
+    padding: 1rem;
+}
+
+.new-tournament {
+    margin-top: 1rem;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+}
+
+.new-tournament label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.new-tournament input[type="text"],
+.new-tournament input[type="date"],
+.new-tournament input[type="number"] {
+    padding: 0.4rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1em;
+}
+
+.new-tournament input[type="text"] {
+    min-width: 200px;
+}
+
+.tournament-info {
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+}
+
+.tournament-info label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.tournament-info input[type="text"],
+.tournament-info input[type="date"],
+.tournament-info input[type="number"] {
+    padding: 0.4rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1em;
+}
+
+.tournament-info input[type="text"] {
+    min-width: 200px;
+}
+
+.participants,
+.group-controls,
+.groups-overview,
+.ko-round,
+.ko-start {
+    margin-top: 1.5rem;
+}
+
+.class-section {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+}
+
+.class-section:first-child {
+    margin-top: 0;
+}
+
+.class-header {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #ddd;
+}
+
+.group-table {
+    margin-bottom: 2rem;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    padding: 0.5em;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+button {
+    margin-left: 0.5em;
+}
+
+.match-cell.diagonal-cell {
+    position: relative;
+    padding: 0;
+}
+
+.diagonal {
+    background-color: #bbb;
+    color: #bbb;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.match-result {
+    font-weight: bold;
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+
+.match-result.win {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+.match-result.loss {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+/* Live-Ergebnisse während des Spiels */
+.match-live-win {
+    background-color: #d1eca1; /* Hellgrün */
+    color: #0c5460;
+    font-weight: bold;
+}
+
+.match-live-loss {
+    background-color: #ffeaa7; /* Orange */
+    color: #d63031;
+    font-weight: bold;
+}
+
+.match-live-tie {
+    background-color: #f8f9fa; /* Neutral */
+    color: #6c757d;
+    font-weight: bold;
+}
+
+/* Beendete Spiele */
+.match-finished-win {
+    background-color: #28a745; /* Dunkelgrün */
+    color: white;
+    font-weight: bold;
+}
+
+.match-finished-loss {
+    background-color: #fd7e14; /* Dunkelorange */
+    color: white;
+    font-weight: bold;
+}
+
+.match-finished-tie {
+    background-color: #6c757d; /* Grau */
+    color: white;
+    font-weight: bold;
+}
+
+/* Kollabierbare Teilnehmerliste */
+.participants-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #dee2e6;
+    margin-bottom: 1rem;
+}
+
+.participants-header:hover {
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.participants-header h4 {
+    margin: 0;
+    color: #495057;
+}
+
+.collapse-icon {
+    font-size: 0.8em;
+    color: #6c757d;
+    transition: transform 0.3s ease;
+    user-select: none;
+}
+
+.collapse-icon.expanded {
+    transform: rotate(180deg);
+}
+
+.participants-content {
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        max-height: 0;
+    }
+    to {
+        opacity: 1;
+        max-height: 1000px;
+    }
+}
+
+.participants-table-container {
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    overflow: hidden;
+    display: inline-block;
+    width: auto;
+}
+
+.participants-table {
+    width: auto;
+    border-collapse: collapse;
+    font-size: 0.9em;
+}
+
+.participants-table-header {
+    margin: 0;
+    border-bottom: none;
+}
+
+.participants-table-header th {
+    font-weight: bold;
+    font-size: 0.85em;
+    color: #495057;
+    padding: 0.15rem 0.5rem;
+    text-align: left;
+    white-space: nowrap;
+    background-color: white;
+}
+
+.participants-table-body-wrapper {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: auto;
+    margin: 0;
+}
+
+.participants-table-body td {
+    padding: 0.1rem 0.5rem;
+    white-space: nowrap;
+}
+
+/* Synchronisiere Spaltenbreiten zwischen Header und Body */
+.participants-table-header .participant-seeded-cell,
+.participants-table-body .participant-seeded-cell {
+    width: 60px;
+}
+
+.participants-table-header .participant-name,
+.participants-table-body .participant-name {
+    min-width: 150px;
+}
+
+.participants-table-header .participant-club-cell,
+.participants-table-body .participant-club-cell {
+    min-width: 120px;
+}
+
+.participants-table-header .participant-class-cell,
+.participants-table-body .participant-class-cell {
+    min-width: 120px;
+}
+
+.participants-table-header .participant-group-cell,
+.participants-table-body .participant-group-cell {
+    width: 80px;
+}
+
+.participants-table-header .participant-action-cell,
+.participants-table-body .participant-action-cell {
+    width: 50px;
+}
+
+.participant-item {
+    line-height: 1.2;
+}
+
+.participant-seeded-cell {
+    white-space: nowrap;
+}
+
+.seeded-checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.seeded-checkbox-label input[type="checkbox"] {
+    cursor: pointer;
+    margin: 0;
+}
+
+.participant-name {
+    white-space: nowrap;
+}
+
+.participant-group-cell {
+    white-space: nowrap;
+}
+
+.participant-action-cell {
+    white-space: nowrap;
+}
+
+.participant-class-cell {
+    white-space: nowrap;
+}
+
+.class-select-small {
+    font-size: 0.85em;
+    padding: 2px 4px;
+    min-width: 100px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.group-select-small {
+    font-size: 0.85em;
+    padding: 2px 4px;
+    width: 50px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.trash-btn-small {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9em;
+    padding: 0;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.trash-btn-small:hover {
+    opacity: 1;
+}
+
+.add-participant {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.add-participant-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.add-participant-section h5 {
+    margin: 0;
+    font-size: 0.9em;
+    color: #495057;
+}
+
+.add-participant-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.external-input {
+    padding: 0.4rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.9em;
+    min-width: 120px;
+}
+
+.member-select {
+    flex: 1;
+    min-width: 200px;
+    padding: 0.4rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.btn-add {
+    padding: 0.4rem 0.8rem;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    white-space: nowrap;
+}
+
+.btn-add:hover {
+    background-color: #0056b3;
+}
+
+.training-btn {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s ease;
+}
+
+.training-btn:hover {
+    background-color: #218838;
+}
+
+.training-btn:active {
+    background-color: #1e7e34;
+}
+
+.tournament-classes {
+    margin-top: 1.5rem;
+}
+
+.classes-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #dee2e6;
+    margin-bottom: 1rem;
+}
+
+.classes-header:hover {
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.classes-header h4 {
+    margin: 0;
+    color: #495057;
+}
+
+.classes-content {
+    animation: slideDown 0.3s ease;
+}
+
+.classes-list {
+    margin-bottom: 1rem;
+}
+
+.class-item {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.class-name-label {
+    flex: 1;
+    padding: 0.4rem;
+    font-size: 0.9em;
+    min-width: 200px;
+}
+
+.class-name-input {
+    flex: 1;
+    padding: 0.4rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.9em;
+    min-width: 200px;
+}
+
+.btn-edit-small,
+.btn-save-small,
+.btn-cancel-small {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9em;
+    padding: 0;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    margin-left: 0.25rem;
+}
+
+.btn-edit-small:hover,
+.btn-save-small:hover,
+.btn-cancel-small:hover {
+    opacity: 1;
+}
+
+.btn-save-small {
+    color: #28a745;
+}
+
+.btn-cancel-small {
+    color: #dc3545;
+}
+
+.add-class {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding-top: 0.5rem;
+    border-top: 1px solid #dee2e6;
+}
+
+.no-match {
+    color: #ccc;
+}
+
+.group-table table {
+    font-size: 0.9em;
+}
+
+.group-table th,
+.group-table td {
+    padding: 0.3em 0.5em;
+    text-align: center;
+}
+
+.group-table th:first-child,
+.group-table td:first-child {
+    text-align: left;
+    font-weight: bold;
+}
+
+.group-table th:nth-child(3),
+.group-table td:nth-child(3) {
+    text-align: left;
+    min-width: 120px;
+}
+
+.seeded-star {
+    color: #ffd700;
+    margin-right: 0.25em;
+}
+
+.match-cell.clickable {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.match-cell.clickable:hover {
+    background-color: #f8f9fa;
+    transform: scale(1.02);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.match-highlight {
+    background-color: #fff3cd !important;
+    border: 2px solid #ffc107 !important;
+    animation: highlight-pulse 0.5s ease-in-out;
+}
+
+@keyframes highlight-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+    100% { transform: scale(1); }
+}
+
+/* Container für neue Satzeingabe - inline */
+.new-set-line {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
+/* Eingabefeld für Sätze - nur so breit wie nötig für die Eingabe */
+.inline-input {
+    width: 5ch; /* 5 Zeichen breit */
+    padding: calc(0.2rem + 2px) calc(0.4rem + 2px);
+    font-family: inherit;
+    text-align: center;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    box-sizing: border-box;
+    line-height: 1.5;
+    font-size: inherit;
+}
+
+/* Klickbare Ergebnis-Texte */
+.result-text.clickable {
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+    line-height: 1.5;
+    display: inline-block;
+}
+
+.result-text.clickable:hover {
+    background-color: #f8f9fa;
+    border-color: #dee2e6;
+}
+
+/* Aktive Begegnung hervorheben */
+tr.active-match {
+    background-color: #fff3cd !important;
+    border-left: 3px solid #ffc107;
+    cursor: pointer;
+}
+
+tr.active-match:hover {
+    background-color: #ffe69c !important;
+}
+
+/* Tabellenzeilen klickbar machen */
+tbody tr {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+tbody tr:hover:not(.active-match) {
+    background-color: #f8f9fa;
+}
+
+/* Aktive Gruppentabellen-Zellen hervorheben */
+.match-cell.active-group-cell {
+    background-color: #fff3cd !important;
+    border: 2px solid #ffc107 !important;
+    font-weight: bold;
+}
+
+/* Abgeschlossene Spiele in grauer Schrift */
+.match-finished {
+    color: #626262 !important;
+    background-color: #e9ecef !important;
+}
+
+.match-finished td {
+    color: #828a91 !important;
+}
+
+/* Laufende Spiele farblich hervorheben - nur wenn nicht abgeschlossen */
+.match-live:not(.match-finished) {
+    background-color: #d4edda !important;
+    border-left: 4px solid #28a745 !important;
+}
+
+.match-live:not(.match-finished) td {
+    color: #155724;
+    font-weight: 500;
+}
+
+/* Button für "Läuft gerade" */
+.btn-live {
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.9em;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-live:hover {
+    background-color: #e9ecef;
+    border-color: #adb5bd;
+}
+
+.btn-live.active {
+    background-color: #28a745;
+    border-color: #28a745;
+    color: white;
+}
+
+.btn-live.active:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+}
+
+/* Button für "Korrigieren" - weißer Hintergrund mit grüner Schrift */
+.match-finished td .btn-correct,
+.btn-correct {
+    background: white !important;
+    background-color: white !important;
+    background-image: none !important;
+    color: #4CAF50 !important;
+    border: 1px solid #4CAF50 !important;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.9em;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: none !important;
+    min-height: auto !important;
+}
+
+.match-finished td .btn-correct::before,
+.btn-correct::before {
+    display: none !important;
+}
+
+.match-finished td .btn-correct:hover,
+.btn-correct:hover {
+    background: #f8f9fa !important;
+    background-color: #f8f9fa !important;
+    background-image: none !important;
+    border-color: #45a049 !important;
+    color: #45a049 !important;
+    transform: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/TournamentsView.vue b/frontend/src/views/TournamentsView.vue
index 36e6f4e..e8f74af 100644
--- a/frontend/src/views/TournamentsView.vue
+++ b/frontend/src/views/TournamentsView.vue
@@ -1,3449 +1,131 @@
 <template>
-    <div class="tournaments-view">
-        <h2>{{ allowsExternal ? 'Offene Turniere' : 'Interne Turniere' }}</h2>
-        <div class="tournament-config">
-            <h3>Datum</h3>
-            <select v-model="selectedDate">
-                <option value="new">Neues Turnier</option>
-                <option v-for="date in dates" :key="date.id" :value="date.id">
-                    <template v-if="date.name">
-                        {{ date.name }} ({{ date.date ? new Date(date.date).toLocaleDateString('de-DE', {
-                            year: 'numeric',
-                            month: '2-digit',
-                            day: '2-digit'
-                        }) : 'Unbekanntes Datum' }})
-                    </template>
-                    <template v-else>
-                        {{ date.date ? new Date(date.date).toLocaleDateString('de-DE', {
-                            year: 'numeric',
-                            month: '2-digit',
-                            day: '2-digit'
-                        }) : 'Unbekanntes Datum' }}
-                    </template>
-                </option>
-            </select>
-            <div v-if="selectedDate === 'new'" class="new-tournament">
-                <label>
-                    Name:
-                    <input type="text" v-model="newTournamentName" placeholder="Turniername" />
-                </label>
-                <label>
-                    Datum:
-                    <input type="date" v-model="newDate" />
-                </label>
-                <label>
-                    Gewinnsätze:
-                    <input type="number" v-model.number="newWinningSets" min="1" />
-                </label>
-                <button @click="createTournament">Erstellen</button>
-            </div>
-        </div>
-        <div v-if="selectedDate !== 'new'" class="tournament-setup">
-            <div class="tournament-info">
-                <label>
-                    Name:
-                    <input type="text" v-model="currentTournamentName" @input="updateTournament" />
-                </label>
-                <label>
-                    Datum:
-                    <input type="date" v-model="currentTournamentDate" @change="updateTournament" />
-                </label>
-                <label>
-                    Gewinnsätze:
-                    <input type="number" v-model.number="currentWinningSets" min="1" @input="updateTournament" />
-                </label>
-                <button @click="generatePDF" class="btn-primary" style="margin-top: 1rem;">PDF exportieren</button>
-            </div>
-            <label class="checkbox-item">
-                <input type="checkbox" v-model="isGroupTournament" @change="onModusChange" />
-                <span>Spielen in Gruppen</span>
-            </label>
-            <section class="tournament-classes">
-                <div class="classes-header" @click="toggleClasses">
-                    <h4>Klassen</h4>
-                    <span class="collapse-icon" :class="{ 'expanded': showClasses }">▼</span>
-                </div>
-                <div v-show="showClasses" class="classes-content">
-                    <div class="classes-list">
-                        <div v-for="classItem in tournamentClasses" :key="classItem.id" class="class-item">
-                            <template v-if="editingClassId === classItem.id">
-                                <input type="text" v-model="editingClassName" @keyup.enter="saveClassEdit(classItem)" @blur="saveClassEdit(classItem)" @keyup.esc="cancelClassEdit" class="class-name-input" ref="classEditInput" />
-                                <button @click="saveClassEdit(classItem)" class="btn-save-small" title="Speichern">✓</button>
-                                <button @click="cancelClassEdit" class="btn-cancel-small" title="Abbrechen">✕</button>
-                            </template>
-                            <template v-else>
-                                <span class="class-name-label">{{ classItem.name }}</span>
-                                <button @click.stop="editClass(classItem)" class="btn-edit-small" title="Bearbeiten">✏️</button>
-                                <button @click.stop="deleteClass(classItem)" class="trash-btn-small" title="Löschen">🗑️</button>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="add-class">
-                        <input type="text" v-model="newClassName" placeholder="Klassenname" class="class-name-input" @keyup.enter="addClass" />
-                        <button @click="addClass" class="btn-add">Klasse hinzufügen</button>
-                    </div>
-                </div>
-            </section>
-            <section class="participants">
-                <div class="participants-header" @click="toggleParticipants">
-                    <h4>Teilnehmer</h4>
-                    <span class="collapse-icon" :class="{ 'expanded': showParticipants }">▼</span>
-                </div>
-                <div v-show="showParticipants" class="participants-content">
-                    <div class="participants-table-container">
-                        <table class="participants-table participants-table-header">
-                            <thead>
-                                <tr>
-                                    <th class="participant-seeded-cell">Gesetzt</th>
-                                    <th class="participant-name">Name</th>
-                                    <th v-if="allowsExternal" class="participant-club-cell">Verein</th>
-                                    <th class="participant-class-cell">Klasse</th>
-                                    <th v-if="isGroupTournament" class="participant-group-cell">Gruppe</th>
-                                    <th class="participant-action-cell">Aktion</th>
-                                </tr>
-                            </thead>
-                        </table>
-                        <div class="participants-table-body-wrapper">
-                            <table class="participants-table participants-table-body">
-                                <tbody>
-                                    <tr v-for="participant in sortedParticipants" :key="participant.id" class="participant-item">
-                                        <td class="participant-seeded-cell">
-                                            <label class="seeded-checkbox-label">
-                                                <input type="checkbox" :checked="participant.seeded" @change="updateParticipantSeeded(participant, $event)" />
-                                            </label>
-                                        </td>
-                                        <td class="participant-name">
-                                            <template v-if="participant.member">
-                                                {{ participant.member.firstName || 'Unbekannt' }}
-                                                {{ participant.member.lastName || '' }}
-                                            </template>
-                                            <template v-else>
-                                                {{ participant.firstName || 'Unbekannt' }}
-                                                {{ participant.lastName || '' }}
-                                            </template>
-                                        </td>
-                                        <td v-if="allowsExternal" class="participant-club-cell">
-                                            <template v-if="participant.member">
-                                                <em>(Vereinsmitglied)</em>
-                                            </template>
-                                            <template v-else>
-                                                {{ participant.club || '–' }}
-                                            </template>
-                                        </td>
-                                        <td class="participant-class-cell">
-                                            <select v-model.number="participant.classId" @change="updateParticipantClass(participant, $event)" class="class-select-small">
-                                                <option :value="null">–</option>
-                                                <option v-for="classItem in tournamentClasses" :key="classItem.id" :value="classItem.id">
-                                                    {{ classItem.name }}
-                                                </option>
-                                            </select>
-                                        </td>
-                                        <td v-if="isGroupTournament" class="participant-group-cell">
-                                            <select v-model.number="participant.groupNumber" @change="updateParticipantGroup(participant, $event)" class="group-select-small">
-                                                <option :value="null">–</option>
-                                                <option v-for="group in groups" :key="group.groupId" :value="group.groupNumber">
-                                                    {{ group.groupNumber }}
-                                                </option>
-                                            </select>
-                                        </td>
-                                        <td class="participant-action-cell">
-                                            <button @click="removeParticipant(participant)" class="trash-btn-small" title="Löschen">🗑️</button>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                    <div class="add-participant">
-                        <div v-if="allowsExternal" class="add-participant-section">
-                            <h5>Vereinsmitglied hinzufügen</h5>
-                            <div class="add-participant-row">
-                                <select v-model="selectedMember" class="member-select">
-                                    <option :value="null">-- Teilnehmer auswählen --</option>
-                                    <option v-for="member in clubMembers" :key="member.id" :value="member.id">
-                                        {{ member.firstName }}
-                                        {{ member.lastName }}
-                                    </option>
-                                </select>
-                                <button @click="addParticipant" class="btn-add">Hinzufügen</button>
-                                <button v-if="hasTrainingToday && !allowsExternal" @click="loadParticipantsFromTraining" class="training-btn">
-                                    📅 Aus Trainingstag laden
-                                </button>
-                            </div>
-                        </div>
-                        <div v-if="allowsExternal" class="add-participant-section">
-                            <h5>Externen Teilnehmer hinzufügen</h5>
-                            <div class="add-participant-row">
-                                <input type="text" v-model="newExternalParticipant.firstName" placeholder="Vorname" class="external-input" />
-                                <input type="text" v-model="newExternalParticipant.lastName" placeholder="Nachname" class="external-input" />
-                                <input type="text" v-model="newExternalParticipant.club" placeholder="Verein (optional)" class="external-input" />
-                                <input type="date" v-model="newExternalParticipant.birthDate" placeholder="Geburtsdatum (optional)" class="external-input" />
-                                <button @click="addExternalParticipant" class="btn-add">Hinzufügen</button>
-                            </div>
-                        </div>
-                        <div v-if="!allowsExternal" class="add-participant-row">
-                            <select v-model="selectedMember" class="member-select">
-                                <option :value="null">-- Teilnehmer auswählen --</option>
-                                <option v-for="member in clubMembers" :key="member.id" :value="member.id">
-                                    {{ member.firstName }}
-                                    {{ member.lastName }}
-                                </option>
-                            </select>
-                            <button @click="addParticipant" class="btn-add">Hinzufügen</button>
-                            <button v-if="hasTrainingToday" @click="loadParticipantsFromTraining" class="training-btn">
-                                📅 Aus Trainingstag laden
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <section v-if="isGroupTournament" class="group-controls">
-                <label>
-                    Aufsteiger pro Gruppe:
-                    <input type="number" v-model.number="advancingPerGroup" min="1" @change="onModusChange" />
-                </label>
-                <label style="margin-left:1em">
-                    Maximale Gruppengröße:
-                    <input type="number" v-model.number="maxGroupSize" min="1" />
-                </label>
-                
-                <div v-if="tournamentClasses.length > 0" class="groups-per-class">
-                    <h4>Gruppen pro Klasse</h4>
-                    <div v-for="classItem in tournamentClasses" :key="classItem.id" class="class-group-config">
-                        <label>
-                            {{ classItem.name }}:
-                            <input type="number" v-model.number="groupsPerClass[classItem.id]" min="0" @change="onGroupCountChange" style="width: 60px;" />
-                            Gruppen
-                        </label>
-                    </div>
-                </div>
-                <div v-else class="groups-per-class">
-                    <label>
-                        Anzahl Gruppen:
-                        <input type="number" v-model.number="numberOfGroups" min="1" @change="onGroupCountChange" />
-                    </label>
-                </div>
-
-                <button @click="createGroups">Gruppen erstellen</button>
-                <button @click="randomizeGroups">Zufällig verteilen</button>
-                <button @click="resetGroups">Gruppen zurücksetzen</button>
-            </section>
-            <section v-if="groups.length" class="groups-overview">
-                <h3>Gruppenübersicht</h3>
-                <template v-for="(classGroups, classId) in groupsByClass" :key="classId">
-                    <div v-if="classId !== 'null' && classId !== 'undefined'" class="class-section">
-                        <h4 class="class-header">
-                            {{ getClassName(classId) }}
-                        </h4>
-                    </div>
-                    <div v-for="group in classGroups" :key="group.groupId" class="group-table">
-                        <h4>Gruppe {{ group.groupNumber }}</h4>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Index</th>
-                                <th>Platz</th>
-                                <th>Spieler</th>
-                                <th>Punkte</th>
-                                <th>Satz</th>
-                                <th>Diff</th>
-                                <th v-for="(opponent, idx) in groupRankings[group.groupId]" :key="`opp-${opponent.id}`">
-                                    G{{ String.fromCharCode(96 + group.groupNumber) }}{{ idx + 1 }}
-                                </th>
-                                <th>Live-Platz</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="(pl, idx) in groupRankings[group.groupId]" :key="pl.id">
-                                <td><strong>G{{ String.fromCharCode(96 + group.groupNumber) }}{{ idx + 1 }}</strong></td>
-                                <td>{{ pl.position }}.</td>
-                                <td><span v-if="pl.seeded" class="seeded-star">★</span>{{ pl.name }}</td>
-                                <td>{{ pl.points }}</td>
-                                <td>{{ pl.setsWon }}:{{ pl.setsLost }}</td>
-                                <td>
-                                    {{ pl.setDiff >= 0 ? '+' + pl.setDiff : pl.setDiff }}
-                                </td>
-                                <td v-for="(opponent, oppIdx) in groupRankings[group.groupId]" 
-                                    :key="`match-${pl.id}-${opponent.id}`"
-                                    :class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`), 'diagonal-cell': idx === oppIdx }]"
-                                    @click="idx !== oppIdx ? highlightMatch(pl.id, opponent.id, group.groupId) : null">
-                                    <span v-if="idx === oppIdx" class="diagonal"></span>
-                                    <span v-else-if="getMatchLiveResult(pl.id, opponent.id, group.groupId)" 
-                                          :class="getMatchCellClasses(pl.id, opponent.id, group.groupId)">
-                                        {{ getMatchDisplayText(pl.id, opponent.id, group.groupId) }}
-                                    </span>
-                                    <span v-else class="no-match">-</span>
-                                </td>
-                                <td>{{ getLivePosition(pl.id, group.groupId) }}.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    </div>
-                </template>
-                <div class="reset-controls" style="margin-top:1rem">
-                    <button @click="resetMatches" class="trash-btn">
-                        🗑️ Gruppenspiele
-                    </button>
-                </div>
-            </section>
-        </div>
-        <section v-if="groupMatches.length" class="group-matches">
-            <h4>Gruppenspiele</h4>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Runde</th>
-                        <th>Gruppe</th>
-                        <th>Begegnung</th>
-                        <th>Ergebnis</th>
-                        <th>Sätze</th>
-                        <th>Aktion</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="m in groupMatches" :key="m.id" :data-match-id="m.id" :class="{ 'active-match': activeMatchId === m.id, 'match-finished': m.isFinished, 'match-live': m.isActive }" @click="activeMatchId = m.id">
-                        <td>{{ m.groupRound }}</td>
-                        <td>
-                            <template v-if="getGroupClassName(m.groupId)">
-                                {{ getGroupClassName(m.groupId) }} - Gruppe {{ m.groupNumber }}
-                            </template>
-                            <template v-else>
-                                Gruppe {{ m.groupNumber }}
-                            </template>
-                        </td>
-                        <td>
-                            <template v-if="m.isFinished">
-                                <span v-if="winnerIsPlayer1(m)">
-                                    <strong>{{ getPlayerName(m.player1) }}</strong> – {{ getPlayerName(m.player2) }}
-                                </span>
-                                <span v-else>
-                                    {{ getPlayerName(m.player1) }} – <strong>{{ getPlayerName(m.player2) }}</strong>
-                                </span>
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                            <template v-else>
-                                {{ getPlayerName(m.player1) }} – {{ getPlayerName(m.player2) }}
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                        </td>
-
-                        <td>
-                            <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
-                            <template v-if="!m.isFinished">
-                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
-                                <template v-for="r in m.tournamentResults" :key="r.set">
-                                    <template v-if="isEditing(m, r.set)">
-                                        <input 
-                                            v-model="editingResult.value"
-                                            @keyup.enter="saveEditedResult(m)"
-                                            @blur="saveEditedResult(m)"
-                                            @keyup.escape="cancelEdit"
-                                            class="inline-input"
-                                            ref="editInput"
-                                        />
-                                    
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                                    <template v-else>
-                                        <span @click="startEditResult(m, r)" class="result-text clickable">
-                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
-                                        </span>
-                                    
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                                    <span v-if="!isLastResult(m, r)">, </span>
-                                
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-
-                                <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
-                                <div class="new-set-line">
-                                    <input v-model="m.resultInput" placeholder="Neuen Satz, z.B. 11:7"
-                                        @keyup.enter="saveMatchResult(m, m.resultInput)"
-                                        @blur="saveMatchResult(m, m.resultInput)" class="inline-input" />
-                                </div>
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-
-                            <!-- 2. Fall: Match ist abgeschlossen → Read‑only -->
-                            <template v-else>
-                                {{ formatResult(m) }}
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                        </td>
-                        <td>
-                            {{ getSetsString(m) }}
-                        </td>
-                        <td>
-                            <!-- „Abschließen"-Button nur, wenn noch nicht fertig -->
-                            <button v-if="!m.isFinished" @click="finishMatch(m)">Abschließen</button>
-                            <!-- „Korrigieren"-Button nur, wenn fertig -->
-                            <button v-else @click="reopenMatch(m)" class="btn-correct">Korrigieren</button>
-                            <!-- „Läuft gerade"-Button nur, wenn nicht abgeschlossen -->
-                            <button v-if="!m.isFinished && !m.isActive" @click.stop="setMatchActive(m, true)" class="btn-live" title="Als laufend markieren">▶️</button>
-                            <button v-if="!m.isFinished && m.isActive" @click.stop="setMatchActive(m, false)" class="btn-live active" title="Laufend-Markierung entfernen">⏸️</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </section>
-        <div v-if="participants.length > 1
-            && !groupMatches.length
-            && !knockoutMatches.length" class="start-matches" style="margin-top:1.5rem">
-            <button @click="startMatches">
-                Spiele erstellen
-            </button>
-        </div>
-        <div v-if="canStartKnockout && !showKnockout" class="ko-start">
-            <button @click="startKnockout">
-                K.o.-Runde starten
-            </button>
-        </div>
-
-        <div v-if="showKnockout && canResetKnockout" class="ko-reset" style="margin-top:1rem">
-            <button @click="resetKnockout" class="trash-btn">
-                🗑️ K.o.-Runde
-            </button>
-        </div>
-        <section v-if="showKnockout" class="ko-round">
-            <h4>K.-o.-Runde</h4>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Klasse</th>
-                        <th>Runde</th>
-                        <th>Begegnung</th>
-                        <th>Ergebnis</th>
-                        <th>Sätze</th>
-                        <th>Aktion</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="m in knockoutMatches" :key="m.id" :class="{ 'active-match': activeMatchId === m.id, 'match-finished': m.isFinished, 'match-live': m.isActive }" @click="activeMatchId = m.id">
-                        <td>{{ getKnockoutMatchClassName(m) }}</td>
-                        <td>{{ m.round }}</td>
-                        <td>
-                            <template v-if="m.isFinished">
-                                <span v-if="winnerIsPlayer1(m)">
-                                    <strong>{{ getPlayerName(m.player1) }}</strong> – {{ getPlayerName(m.player2) }}
-                                </span>
-                                <span v-else>
-                                    {{ getPlayerName(m.player1) }} – <strong>{{ getPlayerName(m.player2) }}</strong>
-                                </span>
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                            <template v-else>
-                                {{ getPlayerName(m.player1) }} – {{ getPlayerName(m.player2) }}
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                        </td>
-                        <td>
-                            <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
-                            <template v-if="!m.isFinished">
-                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
-                                <template v-for="r in m.tournamentResults" :key="r.set">
-                                    <template v-if="isEditing(m, r.set)">
-                                        <input 
-                                            v-model="editingResult.value"
-                                            @keyup.enter="saveEditedResult(m)"
-                                            @blur="saveEditedResult(m)"
-                                            @keyup.escape="cancelEdit"
-                                            class="inline-input"
-                                            ref="editInput"
-                                        />
-                                    
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                                    <template v-else>
-                                        <span @click="startEditResult(m, r)" class="result-text clickable">
-                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
-                                        </span>
-                                    
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                                    <span v-if="!isLastResult(m, r)">, </span>
-                                
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-
-                                <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
-                                <div class="new-set-line">
-                                    <input v-model="m.resultInput" placeholder="Neuen Satz, z.B. 11:7"
-                                        @keyup.enter="saveMatchResult(m, m.resultInput)"
-                                        @blur="saveMatchResult(m, m.resultInput)" class="inline-input" />
-                                </div>
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-
-                            <!-- 2. Fall: Match ist abgeschlossen → Read‑only -->
-                            <template v-else>
-                                {{ formatResult(m) }}
-                            
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
-</template>
-                        </td>
-                        <td>
-                            {{ getSetsString(m) }}
-                        </td>
-                        <td>
-                            <button v-if="!m.isFinished" @click="finishMatch(m)">Fertig</button>
-                            <button v-else @click="reopenMatch(m)" class="btn-correct">Korrigieren</button>
-                            <!-- „Läuft gerade"-Button nur, wenn nicht abgeschlossen -->
-                            <button v-if="!m.isFinished && !m.isActive" @click.stop="setMatchActive(m, true)" class="btn-live" title="Als laufend markieren">▶️</button>
-                            <button v-if="!m.isFinished && m.isActive" @click.stop="setMatchActive(m, false)" class="btn-live active" title="Laufend-Markierung entfernen">⏸️</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </section>
-        <section v-if="Object.keys(groupedRankingList).length > 0" class="ranking">
-            <h4>Rangliste</h4>
-            <template v-for="(classKey, idx) in Object.keys(groupedRankingList).sort((a, b) => {
-                const aNum = a === 'null' ? 999999 : parseInt(a);
-                const bNum = b === 'null' ? 999999 : parseInt(b);
-                return aNum - bNum;
-            })" :key="`class-${classKey}`">
-                <div v-if="idx > 0" style="margin-top: 2rem;"></div>
-                <h5 v-if="getClassName(classKey)">{{ getClassName(classKey) }}</h5>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Platz</th>
-                            <th>Spieler</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(entry, entryIdx) in groupedRankingList[classKey]" :key="`${entry.member.id}-${entryIdx}`">
-                            <td>{{ entry.position }}.</td>
-                            <td>
-                                {{ entry.member.firstName }}
-                                {{ entry.member.lastName }}
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </template>
-        </section>
+  <div class="tournaments-container">
+    <!-- Tab Navigation -->
+    <div class="tab-navigation">
+      <button 
+        :class="['tab-button', { active: activeTab === 'internal' }]"
+        @click="switchTab('internal')"
+      >
+        🏆 Interne Turniere
+      </button>
+      <button 
+        :class="['tab-button', { active: activeTab === 'external' }]"
+        @click="switchTab('external')"
+      >
+        🌐 Offene Turniere
+      </button>
+      <button 
+        :class="['tab-button', { active: activeTab === 'official' }]"
+        @click="switchTab('official')"
+      >
+        📄 Turnierteilnahmen
+      </button>
     </div>
 
-    
-    <!-- Info Dialog -->
-    <InfoDialog
-        v-model="infoDialog.isOpen"
-        :title="infoDialog.title"
-        :message="infoDialog.message"
-        :details="infoDialog.details"
-        :type="infoDialog.type"
-    />
-    
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-        v-model="confirmDialog.isOpen"
-        :title="confirmDialog.title"
-        :message="confirmDialog.message"
-        :details="confirmDialog.details"
-        :type="confirmDialog.type"
-        @confirm="handleConfirmResult(true)"
-        @cancel="handleConfirmResult(false)"
-    />
+    <!-- Tab Content -->
+    <div class="tab-content">
+      <div v-if="activeTab === 'internal'">
+        <TournamentTab :allowsExternal="false" />
+      </div>
+      <div v-else-if="activeTab === 'external'">
+        <TournamentTab :allowsExternal="true" />
+      </div>
+      <div v-else-if="activeTab === 'official'">
+        <OfficialTournaments />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import apiClient from '../apiClient.js';
-import InfoDialog from '../components/InfoDialog.vue';
-import ConfirmDialog from '../components/ConfirmDialog.vue';
-import { buildInfoConfig, buildConfirmConfig, safeErrorMessage } from '../utils/dialogUtils.js';
-import { connectSocket, disconnectSocket, onTournamentChanged, offTournamentChanged } from '../services/socketService.js';
-import PDFGenerator from '../components/PDFGenerator.js';
+import TournamentTab from './TournamentTab.vue';
+import OfficialTournaments from './OfficialTournaments.vue';
+
 export default {
-    name: 'TournamentsView',
-    components: {
-        InfoDialog,
-        ConfirmDialog
+  name: 'TournamentsView',
+  components: {
+    TournamentTab,
+    OfficialTournaments,
+  },
+  data() {
+    return {
+      activeTab: 'internal',
+    };
+  },
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
     },
-    props: {
-        allowsExternal: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-            // Dialog States
-            infoDialog: {
-                isOpen: false,
-                title: '',
-                message: '',
-                details: '',
-                type: 'info'
-            },
-            confirmDialog: {
-                isOpen: false,
-                title: '',
-                message: '',
-                details: '',
-                type: 'info',
-                resolveCallback: null
-            },
-            selectedDate: 'new',
-            newDate: '',
-            newTournamentName: '',
-            newWinningSets: 3,
-            currentTournamentName: '',
-            currentTournamentDate: '',
-            currentWinningSets: 3,
-            dates: [],
-            participants: [],
-            selectedMember: null,
-            clubMembers: [],
-            advancingPerGroup: 1,
-            numberOfGroups: 1,
-            groupsPerClass: {}, // { classId: numberOfGroups }
-            maxGroupSize: null,
-            isGroupTournament: false,
-            groups: [],
-            matches: [],
-            showKnockout: false,
-            showParticipants: false, // Kollaps-Status für Teilnehmerliste
-            hasTrainingToday: false, // Gibt es einen Trainingstag heute?
-            editingResult: {
-                matchId: null,   // aktuell bearbeitetes Match
-                set: null,   // aktuell bearbeitete Satz‑Nummer
-                value: ''      // Eingabewert
-            },
-            activeMatchId: null,  // Angeklicktes/aktives Match (für Hervorhebung)
-            tournamentClasses: [], // Turnierklassen
-            newClassName: '', // Name für neue Klasse
-            showClasses: false, // Kollaps-Status für Klassen-Verwaltung
-            editingClassId: null, // ID der gerade bearbeiteten Klasse
-            editingClassName: '', // Temporärer Name während der Bearbeitung
-            externalParticipants: [], // Externe Teilnehmer (nur bei allowsExternal = true)
-            newExternalParticipant: { // Neuer externer Teilnehmer (nur bei allowsExternal = true)
-                firstName: '',
-                lastName: '',
-                club: '',
-                birthDate: null
-            }
-        };
-    },
-    computed: {
-        ...mapGetters(['isAuthenticated', 'currentClub']),
-
-        sortedParticipants() {
-            // Kombiniere interne und externe Teilnehmer (wenn allowsExternal = true)
-            const allParticipants = this.allowsExternal
-                ? [
-                    ...this.participants.map(p => ({ ...p, isExternal: false })),
-                    ...this.externalParticipants.map(p => ({ ...p, isExternal: true }))
-                ]
-                : this.participants.map(p => ({ ...p, isExternal: false }));
-            
-            if (allParticipants.length === 0) {
-                return [];
-            }
-            
-            return allParticipants.sort((a, b) => {
-                // Für interne Teilnehmer: verwende member.firstName/lastName
-                // Für externe Teilnehmer: verwende firstName/lastName direkt
-                const firstNameA = (a.member?.firstName || a.firstName || '').toLowerCase();
-                const firstNameB = (b.member?.firstName || b.firstName || '').toLowerCase();
-                if (firstNameA !== firstNameB) {
-                    return firstNameA.localeCompare(firstNameB, 'de');
-                }
-                const lastNameA = (a.member?.lastName || a.lastName || '').toLowerCase();
-                const lastNameB = (b.member?.lastName || b.lastName || '').toLowerCase();
-                return lastNameA.localeCompare(lastNameB, 'de');
-            });
-        },
-
-        knockoutMatches() {
-            const koMatches = this.matches.filter(m => m.round !== 'group');
-            // Sortiere nach Klasse, dann nach Runde
-            return koMatches.sort((a, b) => {
-                // Zuerst nach Klasse (null zuletzt)
-                const aClass = a.classId || 999999;
-                const bClass = b.classId || 999999;
-                if (aClass !== bClass) return aClass - bClass;
-                
-                // Dann nach Runde (frühere Runden zuerst: Achtelfinale, Viertelfinale, Halbfinale, Finale)
-                // Extrahiere die Rundennamen (ohne Zahlen in Klammern)
-                const getRoundType = (roundName) => {
-                    if (roundName.includes('Achtelfinale')) return 0;
-                    if (roundName.includes('Viertelfinale')) return 1;
-                    if (roundName.includes('Halbfinale')) return 2;
-                    if (roundName.includes('Finale')) return 3;
-                    // Für Runden wie "6-Runde", "8-Runde" etc. - extrahiere die Zahl
-                    const numberMatch = roundName.match(/(\d+)-Runde/);
-                    if (numberMatch) {
-                        const num = parseInt(numberMatch[1]);
-                        // Größere Zahlen = frühere Runden, also umgekehrt sortieren
-                        return -num; // Negativ, damit größere Zahlen zuerst kommen
-                    }
-                    return 999; // Unbekannte Runden zuletzt
-                };
-                
-                const aRoundType = getRoundType(a.round);
-                const bRoundType = getRoundType(b.round);
-                if (aRoundType !== bRoundType) {
-                    return aRoundType - bRoundType;
-                }
-                
-                // Wenn gleicher Typ, alphabetisch sortieren
-                return a.round.localeCompare(b.round);
-            });
-        },
-
-        // Computed property für aktive Gruppentabellen-Zellen
-        activeGroupCells() {
-            if (!this.activeMatchId) return [];
-            
-            const match = this.matches.find(m => m.id === this.activeMatchId);
-            if (!match || match.round !== 'group') return [];
-            
-            return [
-                `match-${match.player1.id}-${match.player2.id}`,
-                `match-${match.player2.id}-${match.player1.id}`
-            ];
-        },
-
-        groupMatches() {
-            const filtered = this.matches.filter(m => m.round === 'group');
-            
-            // Gruppiere nach Runde
-            const byRound = {};
-            filtered.forEach(m => {
-                const round = m.groupRound || 0;
-                if (!byRound[round]) {
-                    byRound[round] = [];
-                }
-                byRound[round].push(m);
-            });
-            
-            // Sortiere die Runden
-            const sortedRounds = Object.keys(byRound).sort((a, b) => Number(a) - Number(b));
-            
-            // Für jede Runde: Sortiere nach Gruppe, dann interleaved zusammenführen
-            const result = [];
-            sortedRounds.forEach(round => {
-                const matchesInRound = byRound[round];
-                
-                // Gruppiere nach groupNumber
-                const byGroup = {};
-                matchesInRound.forEach(m => {
-                    const groupNum = m.groupNumber || 0;
-                    if (!byGroup[groupNum]) {
-                        byGroup[groupNum] = [];
-                    }
-                    byGroup[groupNum].push(m);
-                });
-                
-                // Sortiere die Gruppen
-                const sortedGroups = Object.keys(byGroup).sort((a, b) => Number(a) - Number(b));
-                
-                // Interleaved: Nimm abwechselnd aus jeder Gruppe
-                let maxLength = 0;
-                sortedGroups.forEach(groupNum => {
-                    maxLength = Math.max(maxLength, byGroup[groupNum].length);
-                });
-                
-                for (let i = 0; i < maxLength; i++) {
-                    sortedGroups.forEach(groupNum => {
-                        if (i < byGroup[groupNum].length) {
-                            result.push(byGroup[groupNum][i]);
-                        }
-                    });
-                }
-            });
-            
-            return result;
-        },
-
-        groupsByClass() {
-            const grouped = {};
-            this.groups.forEach(g => {
-                const classKey = g.classId != null ? String(g.classId) : 'null';
-                if (!grouped[classKey]) {
-                    grouped[classKey] = [];
-                }
-                grouped[classKey].push(g);
-            });
-            return grouped;
-        },
-
-        groupRankings() {
-            const byGroup = {};
-            this.groups.forEach(g => {
-                byGroup[g.groupId] = g.participants.map(p => ({
-                    id: p.id,
-                    name: p.name,
-                    seeded: p.seeded || false,
-                    points: 0,
-                    setsWon: 0,
-                    setsLost: 0,
-                    setDiff: 0,
-                }));
-            });
-            this.matches.forEach(m => {
-                if (!m.isFinished || m.round !== 'group') return;
-                const [s1, s2] = m.result.split(':').map(n => +n);
-                const arr = byGroup[m.groupId];
-                if (!arr) return;
-                const e1 = arr.find(x => x.id === m.player1.id);
-                const e2 = arr.find(x => x.id === m.player2.id);
-                if (!e1 || !e2) return;
-                if (s1 > s2) {
-                    e1.points += 1;  // Sieger bekommt +1
-                    e2.points -= 1;  // Verlierer bekommt -1
-                } else if (s2 > s1) {
-                    e2.points += 1;  // Sieger bekommt +1
-                    e1.points -= 1;  // Verlierer bekommt -1
-                }
-                e1.setsWon += s1; e1.setsLost += s2;
-                e2.setsWon += s2; e2.setsLost += s1;
-            });
-            const rankings = {};
-            Object.entries(byGroup).forEach(([gid, arr]) => {
-                arr.forEach(p => p.setDiff = p.setsWon - p.setsLost);
-                arr.sort((a, b) => {
-                    if (b.points !== a.points) return b.points - a.points;
-                    if (b.setDiff !== a.setDiff) return b.setDiff - a.setDiff;
-                    if (b.setsWon !== a.setsWon) return b.setsWon - a.setsWon;
-                    return a.name.localeCompare(b.name);
-                });
-                // Weise Positionen zu, wobei Spieler mit identischen Werten den gleichen Platz bekommen
-                let currentPosition = 1;
-                rankings[gid] = arr.map((p, i) => {
-                    // Wenn nicht der erste Spieler und die Werte identisch sind, verwende die gleiche Position
-                    if (i > 0) {
-                        const prev = arr[i - 1];
-                        if (prev.points === p.points && 
-                            prev.setDiff === p.setDiff && 
-                            prev.setsWon === p.setsWon) {
-                            // Gleicher Platz wie Vorgänger
-                            return { ...p, position: currentPosition };
-                        }
-                    }
-                    // Neuer Platz
-                    currentPosition = i + 1;
-                    return { ...p, position: currentPosition };
-                });
-            });
-            return rankings;
-        },
-
-        // Mapping von groupId zu groupNumber für die Teilnehmer-Auswahl
-        groupIdToNumberMap() {
-            const map = {};
-            this.groups.forEach(g => {
-                map[g.groupId] = g.groupNumber;
-            });
-            return map;
-        },
-
-        rankingList() {
-            const finalMatch = this.knockoutMatches.find(
-                m => m.round.toLowerCase() === 'finale'
-            );
-            if (!finalMatch || !finalMatch.isFinished) return [];
-            const list = [];
-            
-            // Gruppiere nach Klassen
-            const matchesByClass = {};
-            this.knockoutMatches.forEach(m => {
-                const classKey = m.classId != null ? String(m.classId) : 'null';
-                if (!matchesByClass[classKey]) {
-                    matchesByClass[classKey] = [];
-                }
-                matchesByClass[classKey].push(m);
-            });
-            
-            // Verarbeite jede Klasse separat
-            Object.entries(matchesByClass).forEach(([classKey, classMatches]) => {
-                const classFinalMatch = classMatches.find(m => m.round.toLowerCase() === 'finale');
-                if (!classFinalMatch || !classFinalMatch.isFinished) return;
-                
-                const [s1, s2] = classFinalMatch.result.split(':').map(n => +n);
-                const winner = s1 > s2 ? classFinalMatch.player1 : classFinalMatch.player2;
-                const loser = s1 > s2 ? classFinalMatch.player2 : classFinalMatch.player1;
-                list.push({ position: 1, member: winner.member, classId: classFinalMatch.classId });
-                list.push({ position: 2, member: loser.member, classId: classFinalMatch.classId });
-                
-                const roundsMap = {};
-                classMatches.forEach(m => {
-                    if (m.round.toLowerCase() === 'finale') return;
-                    (roundsMap[m.round] ||= []).push(m);
-                });
-                Object.values(roundsMap).forEach(matches => {
-                    const M = matches.length;
-                    const pos = M + 1;
-                    matches.forEach(match => {
-                        const [a, b] = match.result.split(':').map(n => +n);
-                        const knockedOut = a > b ? match.player2 : match.player1;
-                        list.push({ position: pos, member: knockedOut.member, classId: match.classId });
-                    });
-                });
-            });
-            
-            return list.sort((a, b) => {
-                // Zuerst nach Klasse, dann nach Position
-                const aClass = a.classId || 999999;
-                const bClass = b.classId || 999999;
-                if (aClass !== bClass) return aClass - bClass;
-                return a.position - b.position;
-            });
-        },
-        
-        // Computed property für gruppiertes Ranking (nach Klassen)
-        groupedRankingList() {
-            const ranking = this.knockoutMatches.length > 0 ? this.extendedRankingList : this.rankingList;
-            if (ranking.length === 0) return {};
-            
-            const grouped = {};
-            ranking.forEach(entry => {
-                const classKey = entry.classId != null ? String(entry.classId) : 'null';
-                if (!grouped[classKey]) {
-                    grouped[classKey] = [];
-                }
-                grouped[classKey].push(entry);
-            });
-            
-            return grouped;
-        },
-
-        // Erweiterte Ranking-Liste, die auch teilweise abgeschlossene K.O.-Runden berücksichtigt
-        // WICHTIG: Diese Liste ist nicht nach Klassen gruppiert - das wird im PDF gemacht
-        extendedRankingList() {
-            if (this.knockoutMatches.length === 0) return [];
-            
-            const list = [];
-            const finishedMatches = this.knockoutMatches.filter(m => m.isFinished);
-            
-            if (finishedMatches.length === 0) return [];
-            
-            // Finde alle Spieler, die noch im Turnier sind (Gewinner von abgeschlossenen Matches, die noch nicht ausgeschieden sind)
-            const stillInTournament = new Set();
-            finishedMatches.forEach(match => {
-                const [a, b] = match.result.split(':').map(n => +n);
-                const winner = a > b ? match.player1 : match.player2;
-                const winnerId = winner.member ? winner.member.id : winner.id;
-                
-                // Prüfe, ob der Gewinner noch in einem nicht abgeschlossenen Match ist
-                const hasUnfinishedMatch = this.knockoutMatches.some(m => 
-                    !m.isFinished && 
-                    m.classId === match.classId && // WICHTIG: Nur Matches derselben Klasse prüfen
-                    ((m.player1 && m.player1.member && m.player1.member.id === winnerId) ||
-                     (m.player1 && m.player1.id === winnerId) ||
-                     (m.player2 && m.player2.member && m.player2.member.id === winnerId) ||
-                     (m.player2 && m.player2.id === winnerId))
-                );
-                
-                if (hasUnfinishedMatch) {
-                    stillInTournament.add(`${match.classId || 'null'}-${winnerId}`);
-                }
-            });
-            
-            // Gruppiere nach Klasse, dann nach Runden
-            const matchesByClass = {};
-            finishedMatches.forEach(m => {
-                const classKey = m.classId != null ? String(m.classId) : 'null';
-                if (!matchesByClass[classKey]) {
-                    matchesByClass[classKey] = [];
-                }
-                matchesByClass[classKey].push(m);
-            });
-            
-            // Verarbeite jede Klasse separat
-            Object.entries(matchesByClass).forEach(([classKey, classMatches]) => {
-                // Gruppiere nach Runden innerhalb dieser Klasse
-                const roundsMap = {};
-                classMatches.forEach(m => {
-                    const roundName = m.round.toLowerCase();
-                    (roundsMap[roundName] ||= []).push(m);
-                });
-                
-                // Sortiere Runden: Finale zuerst, dann nach Anzahl der Matches (mehr = früher)
-                const roundOrder = ['finale', 'halbfinale', 'viertelfinale', 'achtelfinale'];
-                const sortedRounds = Object.entries(roundsMap).sort((a, b) => {
-                    const aIndex = roundOrder.indexOf(a[0]);
-                    const bIndex = roundOrder.indexOf(b[0]);
-                    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
-                    if (aIndex !== -1) return -1;
-                    if (bIndex !== -1) return 1;
-                    // Für andere Runden: sortiere nach Anzahl der Matches (mehr = früher, da später ausgeschieden)
-                    return b[1].length - a[1].length;
-                });
-                
-                // Bestimme Positionen basierend auf abgeschlossenen Runden (pro Klasse)
-                let currentPosition = 1;
-                
-                sortedRounds.forEach(([roundName, matches]) => {
-                    if (roundName === 'finale') {
-                        // Finale: 1. und 2. Platz
-                        const match = matches[0];
-                        const [s1, s2] = match.result.split(':').map(n => +n);
-                        const winner = s1 > s2 ? match.player1 : match.player2;
-                        const loser = s1 > s2 ? match.player2 : match.player1;
-                        const winnerId = winner.member ? winner.member.id : winner.id;
-                        const loserId = loser.member ? loser.member.id : loser.id;
-                        
-                        // Nur hinzufügen, wenn nicht mehr im Turnier
-                        if (!stillInTournament.has(`${classKey}-${winnerId}`)) {
-                            list.push({ position: 1, member: winner.member, classId: match.classId });
-                        }
-                        if (!stillInTournament.has(`${classKey}-${loserId}`)) {
-                            list.push({ position: 2, member: loser.member, classId: match.classId });
-                        }
-                        currentPosition = 3;
-                    } else {
-                        // Andere Runden: Alle Verlierer bekommen die gleiche Position
-                        const numMatches = matches.length;
-                        const position = currentPosition;
-                        matches.forEach(match => {
-                            const [a, b] = match.result.split(':').map(n => +n);
-                            const knockedOut = a > b ? match.player2 : match.player1;
-                            const knockedOutId = knockedOut.member ? knockedOut.member.id : knockedOut.id;
-                            
-                            // Nur hinzufügen, wenn nicht mehr im Turnier
-                            if (!stillInTournament.has(`${classKey}-${knockedOutId}`)) {
-                                list.push({ position: position, member: knockedOut.member, classId: match.classId });
-                            }
-                        });
-                        currentPosition += numMatches;
-                    }
-                });
-            });
-            
-            return list.sort((a, b) => {
-                // Zuerst nach Klasse, dann nach Position
-                const aClass = a.classId || 999999;
-                const bClass = b.classId || 999999;
-                if (aClass !== bClass) return aClass - bClass;
-                return a.position - b.position;
-            });
-        },
-
-        canStartKnockout() {
-            const totalParticipants = this.allowsExternal
-                ? this.participants.length + this.externalParticipants.length
-                : this.participants.length;
-            if (totalParticipants < 2) return false;
-            if (!this.isGroupTournament) {
-                // kein Gruppenmodus → immer starten
-                return true;
-            }
-            // Gruppenmodus → nur, wenn es Gruppenspiele gibt und alle beendet sind
-            return this.groupMatches.length > 0
-                && this.groupMatches.every(m => m.isFinished);
-        },
-
-        canResetKnockout() {
-            // KO‑Matches existieren und keiner ist beendet
-            return this.knockoutMatches.length > 0
-                && this.knockoutMatches.every(m => !m.isFinished);
-        },
-    },
-    watch: {
-        selectedDate: {
-            immediate: true,
-            handler: async function (val) {
-                if (val === 'new') return;
-                await this.loadTournamentData();
-            }
-        }
-    },
-    async created() {
-        if (!this.isAuthenticated) {
-            this.$router.push('/login');
-            return;
-        }
-        const d = await apiClient.get(`/tournament/${this.currentClub}`);
-        // Filtere Turniere basierend auf allowsExternal Prop
-        if (this.allowsExternal) {
-            this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
-        } else {
-            this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
-        }
-        const m = await apiClient.get(
-            `/clubmembers/get/${this.currentClub}/false`
-        );
-        // Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
-        const sorted = (m.data || []).sort((a, b) => {
-            const firstNameA = (a.firstName || '').toLowerCase();
-            const firstNameB = (b.firstName || '').toLowerCase();
-            if (firstNameA !== firstNameB) {
-                return firstNameA.localeCompare(firstNameB, 'de');
-            }
-            const lastNameA = (a.lastName || '').toLowerCase();
-            const lastNameB = (b.lastName || '').toLowerCase();
-            return lastNameA.localeCompare(lastNameB, 'de');
-        });
-        this.clubMembers = sorted;
-    },
-    mounted() {
-        // Lade Turniere beim Start
-        this.loadTournaments();
-        
-        // Socket.IO verbinden
-        try {
-            if (this.currentClub) {
-                connectSocket(this.currentClub);
-                onTournamentChanged(this.handleTournamentChanged);
-            }
-        } catch (error) {
-            console.error('Fehler beim Verbinden mit Socket:', error);
-        }
-        
-        // Event-Listener für das Entfernen des Highlights
-        document.addEventListener('click', (e) => {
-            // Entferne Highlight nur wenn nicht auf eine Matrix-Zelle geklickt wird
-            if (!e.target.closest('.match-cell')) {
-                this.clearHighlight();
-            }
-        });
-        
-        // Event-Listener für Eingabefelder
-        document.addEventListener('input', () => {
-            this.clearHighlight();
-        });
-    },
-    beforeUnmount() {
-        // Socket-Listener entfernen
-        offTournamentChanged(this.handleTournamentChanged);
-        disconnectSocket();
-    },
-    methods: {
-        getClassName(classId) {
-            if (!classId || classId === 'null' || classId === 'undefined') return '';
-            try {
-                const classIdNum = typeof classId === 'string' ? parseInt(classId) : classId;
-                const classItem = this.tournamentClasses.find(c => c.id === classIdNum);
-                return classItem ? classItem.name : '';
-            } catch (e) {
-                return '';
-            }
-        },
-
-        getGroupClassName(groupId) {
-            if (!groupId) return '';
-            const group = this.groups.find(g => g.groupId === groupId);
-            if (!group || !group.classId) return '';
-            return this.getClassName(group.classId);
-        },
-
-        getKnockoutMatchClassName(match) {
-            if (!match) return '';
-            
-            // Verwende direkt die classId aus dem Match
-            if (match.classId) {
-                return this.getClassName(match.classId);
-            }
-            
-            return '';
-        },
-
-        // Dialog Helper Methods
-        async showInfo(title, message, details = '', type = 'info') {
-            this.infoDialog = buildInfoConfig({ title, message, details, type });
-        },
-        
-        async showConfirm(title, message, details = '', type = 'info', options = {}) {
-            return new Promise((resolve) => {
-                this.confirmDialog = buildConfirmConfig({
-                    title,
-                    message,
-                    details,
-                    type,
-                    resolveCallback: resolve,
-                    ...options,
-                });
-            });
-        },
-        
-        handleConfirmResult(confirmed) {
-            if (this.confirmDialog.resolveCallback) {
-                this.confirmDialog.resolveCallback(confirmed);
-                this.confirmDialog.resolveCallback = null;
-            }
-            this.confirmDialog.isOpen = false;
-        },
-        
-        normalizeResultInput(raw) {
-            const s = raw.trim();
-            if (s.includes(':')) {
-                const [xRaw, yRaw] = s.split(':');
-                const x = Number(xRaw), y = Number(yRaw);
-                if (
-                    Number.isInteger(x) && Number.isInteger(y) &&
-                    (x >= 11 || y >= 11) &&
-                    Math.abs(x - y) >= 2
-                ) {
-                    return `${x}:${y}`;
-                }
-                return null;
-            }
-
-            const num = Number(s);
-            if (isNaN(num)) {
-                return null;
-            }
-
-            const losing = Math.abs(num);
-            const winning = losing < 10 ? 11 : losing + 2;
-
-            // Prüfe das ursprüngliche Vorzeichen vor der Konvertierung
-            if (s.startsWith('-')) {
-                return `${losing}:${winning}`;
-            } else {
-                return `${winning}:${losing}`;
-            }
-        },
-
-        async loadTournamentData() {
-            const tRes = await apiClient.get(
-                `/tournament/${this.currentClub}/${this.selectedDate}`
-            );
-            const tournament = tRes.data;
-            this.currentTournamentName = tournament.name || '';
-            this.currentTournamentDate = tournament.date || '';
-            this.currentWinningSets = tournament.winningSets || 3;
-            this.isGroupTournament = tournament.type === 'groups';
-            this.numberOfGroups = tournament.numberOfGroups;
-            this.advancingPerGroup = tournament.advancingPerGroup;
-            
-            // Prüfe, ob es einen Trainingstag für das Turnierdatum gibt
-            await this.checkTrainingForDate(tournament.date);
-            // Lade Klassen
-            await this.loadTournamentClasses();
-            const pRes = await apiClient.post('/tournament/participants', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate
-            });
-            // Stelle sicher, dass seeded-Feld vorhanden ist (für alte Einträge)
-            this.participants = pRes.data.map(p => ({
-                ...p,
-                seeded: p.seeded || false
-            }));
-            
-            // Lade externe Teilnehmer (nur bei allowsExternal = true)
-            if (this.allowsExternal) {
-                try {
-                    const extRes = await apiClient.post('/tournament/external-participants', {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate
-                    });
-                    this.externalParticipants = extRes.data.map(p => ({
-                        ...p,
-                        seeded: p.seeded || false,
-                        isExternal: true
-                    }));
-                } catch (error) {
-                    console.error('Fehler beim Laden der externen Teilnehmer:', error);
-                    this.externalParticipants = [];
-                }
-            } else {
-                this.externalParticipants = [];
-            }
-            const gRes = await apiClient.get('/tournament/groups', {
-                params: {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate
-                }
-            });
-            this.groups = gRes.data;
-            const mRes = await apiClient.get(
-                `/tournament/matches/${this.currentClub}/${this.selectedDate}`
-            );
-            const grpMap = this.groups.reduce((m, g) => {
-                m[g.groupId] = g.groupNumber;
-                return m;
-            }, {});
-            
-            this.matches = mRes.data.map(m => {
-                // Verwende groupId aus dem Backend, falls vorhanden, sonst aus den Spielern
-                const matchGroupId = m.groupId || m.player1?.groupId || m.player2?.groupId;
-                
-                // Stelle sicher, dass groupRound vorhanden ist (kann als group_round vom Backend kommen)
-                const groupRound = m.groupRound || m.group_round || 0;
-                
-                const groupNumber = grpMap[matchGroupId] || 0;
-                
-                return {
-                    ...m,
-                    groupId: matchGroupId,
-                    groupNumber: groupNumber,
-                    groupRound: groupRound, // Stelle sicher, dass groupRound gesetzt ist
-                    resultInput: '',
-                    isActive: m.isActive || false
-                };
-            });
-            
-            // Initialisiere groupNumber für Teilnehmer basierend auf groupId
-            this.initializeParticipantGroupNumbers();
-            
-            // Setze Kollaps-Status: ausgeklappt wenn keine Spiele, eingeklappt wenn Spiele vorhanden
-            this.showParticipants = this.matches.length === 0;
-            
-            this.showKnockout = this.matches.some(m => m.round !== 'group');
-        },
-        
-        async handleTournamentChanged(data) {
-            if (!data || !data.tournamentId) {
-                return;
-            }
-            // Nur aktualisieren, wenn das aktuelle Turnier betroffen ist
-            if (this.selectedDate && this.selectedDate !== 'new' && String(this.selectedDate) === String(data.tournamentId)) {
-                try {
-                    await this.loadTournamentData();
-                    // Force Vue update
-                    this.$forceUpdate();
-                } catch (error) {
-                    console.error('Fehler beim Neuladen der Turnier-Daten:', error);
-                }
-            } else {
-                // Wenn ein neues Turnier erstellt wurde, lade die Turnierliste neu
-                if (data.tournamentId && this.selectedDate === 'new') {
-                    try {
-                        const d = await apiClient.get(`/tournament/${this.currentClub}`);
-                        // Filtere Turniere basierend auf allowsExternal Prop
-                        if (this.allowsExternal) {
-                            this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
-                        } else {
-                            this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
-                        }
-                    } catch (error) {
-                        console.error('Fehler beim Neuladen der Turnierliste:', error);
-                    }
-                }
-            }
-        },
-
-        getPlayerName(p) {
-            // Unterstütze sowohl interne (mit member) als auch externe Teilnehmer
-            if (p.member) {
-                return p.member.firstName + ' ' + p.member.lastName;
-            } else {
-                return (p.firstName || '') + ' ' + (p.lastName || '');
-            }
-        },
-
-        async loadTournaments() {
-            try {
-                const d = await apiClient.get(`/tournament/${this.currentClub}`);
-                // Filtere Turniere basierend auf allowsExternal Prop
-                if (this.allowsExternal) {
-                    this.dates = d.data.filter(t => t.allowsExternal === true || t.allowsExternal === 1);
-                } else {
-                    this.dates = d.data.filter(t => !t.allowsExternal || t.allowsExternal === false || t.allowsExternal === 0);
-                }
-                
-                // Lade Mitgliederliste, falls noch nicht geladen
-                if (!this.clubMembers || this.clubMembers.length === 0) {
-                    try {
-                        const m = await apiClient.get(
-                            `/clubmembers/get/${this.currentClub}/false`
-                        );
-                        // Sortiere alphabetisch: zuerst nach Vorname, dann nach Nachname
-                        const sorted = (m.data || []).sort((a, b) => {
-                            const firstNameA = (a.firstName || '').toLowerCase();
-                            const firstNameB = (b.firstName || '').toLowerCase();
-                            if (firstNameA !== firstNameB) {
-                                return firstNameA.localeCompare(firstNameB, 'de');
-                            }
-                            const lastNameA = (a.lastName || '').toLowerCase();
-                            const lastNameB = (b.lastName || '').toLowerCase();
-                            return lastNameA.localeCompare(lastNameB, 'de');
-                        });
-                        this.clubMembers = sorted;
-                    } catch (error) {
-                        console.error('Fehler beim Laden der Mitgliederliste:', error);
-                        this.clubMembers = [];
-                    }
-                }
-                
-                // Prüfe nicht hier, da kein Turnier ausgewählt ist
-            } catch (error) {
-                console.error('Fehler beim Laden der Turniere:', error);
-                this.dates = [];
-            }
-        },
-
-        async checkTrainingForDate(date) {
-            try {
-                if (!date) {
-                    this.hasTrainingToday = false;
-                    return;
-                }
-                // Konvertiere das Datum ins YYYY-MM-DD Format, falls es noch nicht in diesem Format ist
-                const dateStr = date instanceof Date 
-                    ? date.toISOString().split('T')[0] 
-                    : date.split('T')[0]; // Falls es ein ISO-String ist, nimm nur den Datumsteil
-                
-                const response = await apiClient.get(`/diary/${this.currentClub}`);
-                
-                // Die API gibt alle Trainingstage zurück, filtere nach dem Turnierdatum
-                const trainingData = response.data;
-                if (Array.isArray(trainingData)) {
-                    this.hasTrainingToday = trainingData.some(training => training.date === dateStr);
-                } else {
-                    this.hasTrainingToday = false;
-                }
-            } catch (error) {
-                console.error('Fehler beim Prüfen des Trainingstags:', error);
-                this.hasTrainingToday = false;
-            }
-        },
-
-        async updateTournament() {
-            if (!this.currentTournamentDate) {
-                // Wenn kein Datum vorhanden ist, nicht speichern (z.B. beim ersten Laden)
-                return;
-            }
-            try {
-                await apiClient.put(`/tournament/${this.currentClub}/${this.selectedDate}`, {
-                    name: this.currentTournamentName || this.currentTournamentDate,
-                    date: this.currentTournamentDate,
-                    winningSets: this.currentWinningSets
-                });
-                // Prüfe, ob es einen Trainingstag für das neue Datum gibt
-                await this.checkTrainingForDate(this.currentTournamentDate);
-                // Lade Turnierliste neu, damit der Name in der Dropdown-Liste aktualisiert wird
-                await this.loadTournaments();
-                // Lade Turnierdaten neu, um sicherzustellen, dass alle Werte korrekt sind
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren des Turniers:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren des Turniers.');
-                await this.showInfo('Fehler', message, '', 'error');
-                // Lade Daten neu, um die ursprünglichen Werte wiederherzustellen
-                await this.loadTournamentData();
-            }
-        },
-
-        async createTournament() {
-            if (!this.newDate) {
-                await this.showInfo('Fehler', 'Bitte geben Sie ein Datum ein!', '', 'error');
-                return;
-            }
-            try {
-                const r = await apiClient.post('/tournament', {
-                    clubId: this.currentClub,
-                    tournamentName: this.newTournamentName || this.newDate,
-                    date: this.newDate,
-                    winningSets: this.newWinningSets,
-                    allowsExternal: this.allowsExternal
-                });
-                
-                
-                // Speichere die ID des neuen Turniers
-                const newTournamentId = r.data.id;
-                
-                // Lade die Turniere neu
-                await this.loadTournaments();
-                
-                // Setze das neue Turnier als ausgewählt
-                this.selectedDate = newTournamentId;
-                
-                this.newDate = '';
-                this.newTournamentName = '';
-                this.newWinningSets = 3;
-            } catch (error) {
-                console.error('Fehler beim Erstellen des Turniers:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Erstellen des Turniers.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        async addParticipant() {
-            if (!this.selectedMember) {
-                await this.showInfo('Fehler', 'Bitte wählen Sie einen Teilnehmer aus!', '', 'error');
-                return;
-            }
-            const oldMap = this.participants.reduce((map, p) => {
-                map[p.id] = p.groupNumber
-                return map
-            }, {})
-            const r = await apiClient.post('/tournament/participant', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                participant: this.selectedMember
-            })
-            this.participants = r.data.map(p => ({
-                ...p,
-                groupNumber:
-                    oldMap[p.id] != null
-                        ? oldMap[p.id]
-                        : (p.groupId || null)
-            }))
-            this.selectedMember = null
-        },
-
-        async createGroups() {
-            try {
-                // Wenn Klassen vorhanden sind, verwende groupsPerClass
-                if (this.tournamentClasses.length > 0) {
-                    await apiClient.post('/tournament/groups/create', {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate,
-                        groupsPerClass: this.groupsPerClass
-                    });
-                } else {
-                    // Fallback: Verwende numberOfGroups wie bisher
-                    await apiClient.put('/tournament/groups', {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate,
-                        numberOfGroups: this.numberOfGroups
-                    });
-                }
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Erstellen der Gruppen:', error);
-                const message = error.response?.data?.error || error.message || 'Fehler beim Erstellen der Gruppen.';
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        async randomizeGroups() {
-            try {
-                const r = await apiClient.post('/tournament/groups', {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate
-                });
-                this.participants = r.data;
-            } catch (err) {
-                const message = safeErrorMessage(err, 'Fehler beim Zufällig-Verteilen.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-            await this.loadTournamentData();
-        },
-
-        async saveMatchResult(match, result) {
-            if (!result || result.trim().length === 0) {
-                return;
-            }
-            const normalized = this.normalizeResultInput(result);
-            if (!normalized) return;
-            result = normalized;
-            await apiClient.post('/tournament/match/result', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                matchId: match.id,
-                set: (match.tournamentResults?.length || 0) + 1,
-                result
-            });
-            // Lade Turnierdaten neu, da das Match möglicherweise automatisch abgeschlossen wurde
-            await this.loadTournamentData();
-        },
-
-        async finishMatch(match) {
-            await apiClient.post('/tournament/match/finish', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                matchId: match.id
-            });
-            await this.loadTournamentData();
-        },
-
-        async setMatchActive(match, isActive) {
-            try {
-                await apiClient.put(`/tournament/match/${this.currentClub}/${this.selectedDate}/${match.id}/active`, {
-                    isActive: isActive
-                });
-                // Lade Turnierdaten neu, um sicherzustellen, dass der Status korrekt ist
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Setzen des Match-Status:', error);
-                await this.loadTournamentData();
-            }
-        },
-
-        async generatePDF() {
-            if (!this.selectedDate || this.selectedDate === 'new') {
-                await this.showInfo('Hinweis', 'Bitte wählen Sie zuerst ein Turnier aus.', '', 'info');
-                return;
-            }
-
-            try {
-                const pdf = new PDFGenerator();
-                
-                // Bereite Daten vor - erstelle Mapping von groupId zu classId
-                const groupIdToClassId = {};
-                this.groups.forEach(group => {
-                    groupIdToClassId[group.groupId] = group.classId;
-                });
-
-                const matchesByClassAndGroup = {};
-                this.groupMatches.forEach(match => {
-                    // Hole classId aus der Gruppe
-                    const classId = match.classId != null ? String(match.classId) : 
-                                   (groupIdToClassId[match.groupId] != null ? String(groupIdToClassId[match.groupId]) : 'null');
-                    const groupId = String(match.groupId || 'null');
-                    
-                    if (!matchesByClassAndGroup[classId]) {
-                        matchesByClassAndGroup[classId] = {};
-                    }
-                    if (!matchesByClassAndGroup[classId][groupId]) {
-                        matchesByClassAndGroup[classId][groupId] = [];
-                    }
-                    matchesByClassAndGroup[classId][groupId].push(match);
-                });
-
-                // Sortiere Matches innerhalb jeder Gruppe nach Runde
-                Object.values(matchesByClassAndGroup).forEach(groups => {
-                    Object.values(groups).forEach(matches => {
-                        matches.sort((a, b) => {
-                            if (a.groupRound !== b.groupRound) {
-                                return (a.groupRound || 0) - (b.groupRound || 0);
-                            }
-                            return (a.id || 0) - (b.id || 0);
-                        });
-                    });
-                });
-
-                // Erstelle eine Funktion, um Match-Ergebnisse zu finden
-                const findMatchResult = (player1Id, player2Id, groupId) => {
-                    const match = this.groupMatches.find(m => 
-                        m.groupId === groupId &&
-                        ((m.player1.id === player1Id && m.player2.id === player2Id) ||
-                         (m.player1.id === player2Id && m.player2.id === player1Id)) &&
-                        m.isFinished
-                    );
-                    if (!match) return null;
-                    return match.result || this.formatResult(match);
-                };
-
-                // Erstelle eine Funktion, um Klassennamen zu finden
-                const getClassNameForId = (classId) => {
-                    if (classId === 'null' || classId === 'undefined') return null;
-                    const classItem = this.tournamentClasses.find(c => c.id === parseInt(classId));
-                    return classItem ? classItem.name : null;
-                };
-
-                // Erweitere PDFGenerator mit den benötigten Funktionen
-                pdf.getClassNameForId = (classId) => getClassNameForId(classId);
-                pdf.findMatchResult = findMatchResult;
-
-                // Generiere PDF
-                // Verwende extendedRankingList wenn K.O.-Runden vorhanden sind, sonst rankingList
-                const rankingToUse = this.knockoutMatches.length > 0 ? this.extendedRankingList : this.rankingList;
-                pdf.addTournamentPDF(
-                    this.currentTournamentName || 'Turnier',
-                    this.currentTournamentDate,
-                    this.groupsByClass,
-                    this.groupRankings,
-                    matchesByClassAndGroup,
-                    this.getPlayerName,
-                    rankingToUse,
-                    this.sortedParticipants,
-                    this.knockoutMatches.length > 0,
-                    this.knockoutMatches
-                );
-
-                // Dateiname generieren
-                const dateStr = this.currentTournamentDate 
-                    ? new Date(this.currentTournamentDate).toISOString().split('T')[0]
-                    : 'turnier';
-                const filename = `${this.currentTournamentName || 'Turnier'}_${dateStr}.pdf`.replace(/[^a-zA-Z0-9._-]/g, '_');
-                
-                pdf.save(filename);
-            } catch (error) {
-                console.error('Fehler beim Generieren des PDFs:', error);
-                await this.showInfo('Fehler', 'Fehler beim Generieren des PDFs', error.message, 'error');
-            }
-        },
-
-        async startKnockout() {
-            await apiClient.post('/tournament/knockout', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate
-            });
-            await this.loadTournamentData();
-        },
-
-        formatResult(match) {
-            if (!match.tournamentResults?.length) return '-';
-            return match.tournamentResults
-                .sort((a, b) => a.set - b.set)
-                .map(r => `${Math.abs(r.pointsPlayer1)}:${Math.abs(r.pointsPlayer2)}`)
-                .join(', ');
-        },
-
-        async startMatches() {
-            if (this.isGroupTournament) {
-                if (!this.groups.length) {
-                    await this.createGroups();
-                }
-                await this.randomizeGroups();
-            } else {
-                await this.startKnockout();
-            }
-            await this.loadTournamentData();
-        },
-
-        async onModusChange() {
-            const type = this.isGroupTournament ? 'groups' : 'knockout';
-            await apiClient.post('/tournament/modus', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                type,
-                numberOfGroups: this.numberOfGroups,
-                advancingPerGroup: this.advancingPerGroup
-            });
-            await this.loadTournamentData();
-        },
-
-        async resetGroups() {
-            await apiClient.post('/tournament/groups/reset', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate
-            });
-            await this.loadTournamentData();
-        },
-
-        async resetMatches() {
-            await apiClient.post('/tournament/matches/reset', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate
-            });
-            await this.loadTournamentData();
-        },
-
-        async removeParticipant(p) {
-            if (this.allowsExternal && p.isExternal) {
-                // Externer Teilnehmer
-                await apiClient.delete('/tournament/external-participant', {
-                    data: {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate,
-                        participantId: p.id
-                    }
-                });
-                this.externalParticipants = this.externalParticipants.filter(x => x.id !== p.id);
-            } else {
-                // Interner Teilnehmer
-                await apiClient.delete('/tournament/participant', {
-                    data: {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate,
-                        participantId: p.id
-                    }
-                });
-                this.participants = this.participants.filter(x => x.id !== p.id);
-            }
-            await this.loadTournamentData();
-        },
-
-        async onGroupCountChange() {
-            await apiClient.post('/tournament/modus', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                type: this.isGroupTournament ? 'groups' : 'knockout',
-                numberOfGroups: this.numberOfGroups
-            });
-            await this.loadTournamentData();
-        },
-
-        async reopenMatch(match) {
-            await apiClient.post('/tournament/match/reopen', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                matchId: match.id
-            });
-            await this.loadTournamentData();
-        },
-
-        async deleteResult(match, set) {
-            if (match.isFinished) {
-                await this.reopenMatch(match);
-                match.isFinished = false;
-            }
-            await apiClient.delete('/tournament/match/result', {
-                data: {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate,
-                    matchId: match.id,
-                    set
-                }
-            });
-            await this.loadTournamentData();
-        },
-
-        startEditResult(match, result) {
-            if (match.isFinished) {
-                this.reopenMatch(match);
-                match.isFinished = false;
-            }
-            this.editingResult.matchId = match.id;
-            this.editingResult.set = result.set;
-            this.editingResult.value = `${result.pointsPlayer1}:${result.pointsPlayer2}`;
-            this.activeMatchId = match.id;  // Setze aktives Match für Hervorhebung
-            
-            // Fokussiere das Eingabefeld nach dem nächsten DOM-Update
-            this.$nextTick(() => {
-                const editInputs = this.$refs.editInput;
-                if (editInputs && editInputs.length > 0) {
-                    const lastInput = editInputs[editInputs.length - 1];
-                    lastInput.focus();
-                    lastInput.select();
-                }
-            });
-        },
-
-        async saveEditedResult(match) {
-            const { set, value } = this.editingResult;
-            const normalized = this.normalizeResultInput(value);
-            if (!normalized) {
-                this.cancelEdit();
-                return;
-            }
-            let result = normalized;
-            await apiClient.post('/tournament/match/result', {
-                clubId: this.currentClub,
-                tournamentId: this.selectedDate,
-                matchId: match.id,
-                set,
-                result
-            });
-            this.editingResult.matchId = null;
-            this.editingResult.set = null;
-            this.editingResult.value = '';
-            await this.loadTournamentData();
-        },
-
-        cancelEdit() {
-            this.editingResult.matchId = null;
-            this.editingResult.set = null;
-            this.editingResult.value = '';
-        },
-
-        isEditing(match, set) {
-            return (
-                this.editingResult.matchId === match.id &&
-                this.editingResult.set === set
-            );
-        },
-
-        isLastResult(match, result) {
-            const arr = match.tournamentResults || [];
-            return arr.length > 0 && arr[arr.length - 1].set === result.set;
-        },
-
-        getSetsString(match) {
-            const results = match.tournamentResults || [];
-            let win1 = 0, win2 = 0;
-            for (const r of results) {
-                if (r.pointsPlayer1 > r.pointsPlayer2) win1++;
-                else if (r.pointsPlayer2 > r.pointsPlayer1) win2++;
-            }
-            return `${win1}:${win2}`;
-        },
-
-        winnerIsPlayer1(match) {
-            const [w1, w2] = this.getSetsString(match).split(':').map(Number);
-            return w1 > w2;
-        },
-
-        async resetKnockout() {
-            try {
-                await apiClient.delete('/tournament/matches/knockout', {
-                    data: {
-                        clubId: this.currentClub,
-                        tournamentId: this.selectedDate
-                    }
-                });
-                await this.loadTournamentData();
-            } catch (err) {
-                const message = safeErrorMessage(err, 'Fehler beim Zurücksetzen der K.o.-Runde.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        getMatchResult(player1Id, player2Id, groupId) {
-            const match = this.matches.find(m => 
-                m.round === 'group' && 
-                m.groupId === groupId &&
-                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
-                 (m.player1.id === player2Id && m.player2.id === player1Id)) &&
-                m.isFinished
-            );
-            
-            if (!match) return null;
-            
-            // Bestimme, wer gewonnen hat
-            const [sets1, sets2] = match.result.split(':').map(n => +n);
-            const player1Won = sets1 > sets2;
-            
-            // Gib das Ergebnis in der Sicht des ersten Spielers zurück
-            if (match.player1.id === player1Id) {
-                return player1Won ? 'W' : 'L';
-            } else {
-                return player1Won ? 'L' : 'W';
-            }
-        },
-
-        getMatchLiveResult(player1Id, player2Id, groupId) {
-            const match = this.matches.find(m => 
-                m.round === 'group' && 
-                m.groupId === groupId &&
-                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
-                 (m.player1.id === player2Id && m.player2.id === player1Id))
-            );
-            
-            if (!match) return null;
-            
-            // Berechne aktuelle Sätze aus tournamentResults
-            let sets1 = 0, sets2 = 0;
-            if (match.tournamentResults && match.tournamentResults.length > 0) {
-                match.tournamentResults.forEach(result => {
-                    if (result.pointsPlayer1 > result.pointsPlayer2) {
-                        sets1++;
-                    } else if (result.pointsPlayer2 > result.pointsPlayer1) {
-                        sets2++;
-                    }
-                });
-            }
-            
-            // Bestimme die Anzeige basierend auf der Spieler-Reihenfolge
-            if (match.player1.id === player1Id) {
-                return {
-                    sets1: sets1,
-                    sets2: sets2,
-                    isFinished: match.isFinished,
-                    player1Won: sets1 > sets2,
-                    player2Won: sets2 > sets1,
-                    isTie: sets1 === sets2
-                };
-            } else {
-                return {
-                    sets1: sets2,
-                    sets2: sets1,
-                    isFinished: match.isFinished,
-                    player1Won: sets2 > sets1,
-                    player2Won: sets1 > sets2,
-                    isTie: sets1 === sets2
-                };
-            }
-        },
-
-        highlightMatch(player1Id, player2Id, groupId) {
-            
-            // Finde das entsprechende Match (auch unbeendete)
-            const match = this.matches.find(m => 
-                m.round === 'group' && 
-                m.groupId === groupId &&
-                ((m.player1.id === player1Id && m.player2.id === player2Id) ||
-                 (m.player1.id === player2Id && m.player2.id === player1Id))
-            );
-            
-            
-            if (!match) {
-                return;
-            }
-            
-            // Setze activeMatchId für bidirektionale Hervorhebung
-            this.activeMatchId = match.id;
-            
-            // Setze Highlight-Klasse
-            this.$nextTick(() => {
-                const matchElement = document.querySelector(`tr[data-match-id="${match.id}"]`);
-                
-                if (matchElement) {
-                    // Entferne vorherige Highlights
-                    document.querySelectorAll('.match-highlight').forEach(el => {
-                        el.classList.remove('match-highlight');
-                    });
-                    
-                    // Füge Highlight hinzu
-                    matchElement.classList.add('match-highlight');
-                    
-                    // Scrolle zum Element
-                    matchElement.scrollIntoView({ 
-                        behavior: 'smooth', 
-                        block: 'center' 
-                    });
-                } else {
-                }
-            });
-        },
-
-        clearHighlight() {
-            // Entferne alle Highlights
-            document.querySelectorAll('.match-highlight').forEach(el => {
-                el.classList.remove('match-highlight');
-            });
-        },
-
-        async updateParticipantSeeded(participant, event) {
-            const seeded = event.target.checked;
-            
-            // Aktualisiere lokal
-            participant.seeded = seeded;
-            
-            // Sende an Backend
-            try {
-                if (this.allowsExternal && participant.isExternal) {
-                    // Externer Teilnehmer
-                    await apiClient.put(`/tournament/external-participant/${this.currentClub}/${this.selectedDate}/${participant.id}/seeded`, {
-                        seeded: seeded
-                    });
-                } else {
-                    // Interner Teilnehmer
-                    await apiClient.put(`/tournament/participant/${this.currentClub}/${this.selectedDate}/${participant.id}/seeded`, {
-                        seeded: seeded
-                    });
-                }
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren des Gesetzt-Status:', error);
-                // Bei Fehler: Lade Daten neu
-                await this.loadTournamentData();
-            }
-        },
-
-        async updateParticipantGroup(participant, event) {
-            const groupNumber = parseInt(event.target.value);
-            
-            // Aktualisiere lokal
-            participant.groupNumber = groupNumber;
-            
-            // Bereite alle Teilnehmer-Zuordnungen vor (interne und externe, wenn allowsExternal = true)
-            const assignments = this.allowsExternal
-                ? [
-                    ...this.participants.map(p => ({
-                        participantId: p.id,
-                        groupNumber: p.groupNumber || null,
-                        isExternal: false
-                    })),
-                    ...this.externalParticipants.map(p => ({
-                        participantId: p.id,
-                        groupNumber: p.groupNumber || null,
-                        isExternal: true
-                    }))
-                ]
-                : this.participants.map(p => ({
-                    participantId: p.id,
-                    groupNumber: p.groupNumber || null
-                }));
-            
-            // Sende an Backend
-            try {
-                await apiClient.post('/tournament/groups/manual', {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate,
-                    assignments: assignments,
-                    numberOfGroups: this.numberOfGroups,
-                    maxGroupSize: this.maxGroupSize
-                });
-                
-                // Lade Daten neu, um die aktualisierten Gruppen zu erhalten
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren der Gruppe:', error);
-                // Bei Fehler: Lade Daten neu
-                await this.loadTournamentData();
-            }
-        },
-
-        // Initialisiere groupNumber basierend auf groupId
-        initializeParticipantGroupNumbers() {
-            // Interne Teilnehmer
-            this.participants.forEach(participant => {
-                if (participant.groupId) {
-                    const group = this.groups.find(g => g.groupId === participant.groupId);
-                    if (group) {
-                        participant.groupNumber = group.groupNumber;
-                    }
-                }
-            });
-            // Externe Teilnehmer (nur bei allowsExternal = true)
-            if (this.allowsExternal) {
-                this.externalParticipants.forEach(participant => {
-                    if (participant.groupId) {
-                        const group = this.groups.find(g => g.groupId === participant.groupId);
-                        if (group) {
-                            participant.groupNumber = group.groupNumber;
-                        }
-                    }
-                });
-            }
-        },
-
-        toggleParticipants() {
-            this.showParticipants = !this.showParticipants;
-        },
-
-        toggleClasses() {
-            this.showClasses = !this.showClasses;
-        },
-
-        async loadTournamentClasses() {
-            if (!this.selectedDate || this.selectedDate === 'new') {
-                this.tournamentClasses = [];
-                this.groupsPerClass = {};
-                return;
-            }
-            try {
-                const res = await apiClient.get(`/tournament/classes/${this.currentClub}/${this.selectedDate}`);
-                this.tournamentClasses = res.data || [];
-                // Initialisiere groupsPerClass für jede Klasse
-                const newGroupsPerClass = { ...this.groupsPerClass };
-                this.tournamentClasses.forEach(classItem => {
-                    if (!(classItem.id in newGroupsPerClass)) {
-                        newGroupsPerClass[classItem.id] = 0;
-                    }
-                });
-                this.groupsPerClass = newGroupsPerClass;
-            } catch (error) {
-                console.error('Fehler beim Laden der Klassen:', error);
-                this.tournamentClasses = [];
-                this.groupsPerClass = {};
-            }
-        },
-
-        async addClass() {
-            if (!this.newClassName || !this.newClassName.trim()) {
-                await this.showInfo('Fehler', 'Bitte geben Sie einen Klassennamen ein!', '', 'error');
-                return;
-            }
-            try {
-                await apiClient.post(`/tournament/class/${this.currentClub}/${this.selectedDate}`, {
-                    name: this.newClassName.trim()
-                });
-                this.newClassName = '';
-                await this.loadTournamentClasses();
-            } catch (error) {
-                console.error('Fehler beim Hinzufügen der Klasse:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Hinzufügen der Klasse.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        editClass(classItem) {
-            this.editingClassId = classItem.id;
-            this.editingClassName = classItem.name;
-            this.$nextTick(() => {
-                const inputs = this.$refs.classEditInput;
-                if (inputs && inputs.length > 0) {
-                    const input = Array.isArray(inputs) ? inputs.find(i => i) : inputs;
-                    if (input) {
-                        input.focus();
-                        input.select();
-                    }
-                }
-            });
-        },
-
-        async saveClassEdit(classItem) {
-            if (!this.editingClassName || !this.editingClassName.trim()) {
-                await this.showInfo('Fehler', 'Bitte geben Sie einen Klassennamen ein!', '', 'error');
-                this.cancelClassEdit();
-                return;
-            }
-            try {
-                await apiClient.put(`/tournament/class/${this.currentClub}/${this.selectedDate}/${classItem.id}`, {
-                    name: this.editingClassName.trim()
-                });
-                classItem.name = this.editingClassName.trim();
-                this.cancelClassEdit();
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren der Klasse:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren der Klasse.');
-                await this.showInfo('Fehler', message, '', 'error');
-                // Lade Klassen neu, um den ursprünglichen Namen wiederherzustellen
-                await this.loadTournamentClasses();
-                this.cancelClassEdit();
-            }
-        },
-
-        cancelClassEdit() {
-            this.editingClassId = null;
-            this.editingClassName = '';
-        },
-
-        async deleteClass(classItem) {
-            const confirmed = await this.showConfirm(
-                'Klasse löschen',
-                `Möchten Sie die Klasse "${classItem.name}" wirklich löschen?`,
-                'Alle Teilnehmer werden von dieser Klasse entfernt.',
-                'warning'
-            );
-            if (!confirmed) return;
-            try {
-                await apiClient.delete(`/tournament/class/${this.currentClub}/${this.selectedDate}/${classItem.id}`);
-                await this.loadTournamentClasses();
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Löschen der Klasse:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Löschen der Klasse.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        async updateParticipantClass(participant, event) {
-            const classId = event.target.value === '' ? null : parseInt(event.target.value);
-            try {
-                await apiClient.put(`/tournament/participant/${this.currentClub}/${this.selectedDate}/${participant.id}/class`, {
-                    classId: classId,
-                    isExternal: participant.isExternal || false
-                });
-                participant.classId = classId;
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren der Klasse:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Aktualisieren der Klasse.');
-                await this.showInfo('Fehler', message, '', 'error');
-                // Lade Daten neu, um die ursprüngliche Klasse wiederherzustellen
-                await this.loadTournamentData();
-            }
-        },
-
-        async addExternalParticipant() {
-            if (!this.newExternalParticipant.firstName || !this.newExternalParticipant.lastName) {
-                await this.showInfo('Fehler', 'Bitte geben Sie mindestens Vorname und Nachname ein!', '', 'error');
-                return;
-            }
-            try {
-                await apiClient.post('/tournament/external-participant', {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate,
-                    firstName: this.newExternalParticipant.firstName,
-                    lastName: this.newExternalParticipant.lastName,
-                    club: this.newExternalParticipant.club || null,
-                    birthDate: this.newExternalParticipant.birthDate || null
-                });
-                // Leere Eingabefelder
-                this.newExternalParticipant = {
-                    firstName: '',
-                    lastName: '',
-                    club: '',
-                    birthDate: null
-                };
-                // Lade Daten neu
-                await this.loadTournamentData();
-            } catch (error) {
-                console.error('Fehler beim Hinzufügen des externen Teilnehmers:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Hinzufügen des externen Teilnehmers.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        async loadParticipantsFromTraining() {
-            try {
-                if (!this.currentTournamentDate) {
-                    await this.showInfo('Hinweis', 'Kein Turnierdatum vorhanden!', '', 'info');
-                    return;
-                }
-                
-                // Konvertiere das Turnierdatum ins YYYY-MM-DD Format
-                const tournamentDate = this.currentTournamentDate instanceof Date 
-                    ? this.currentTournamentDate.toISOString().split('T')[0] 
-                    : this.currentTournamentDate.split('T')[0]; // Falls es ein ISO-String ist, nimm nur den Datumsteil
-                
-                const response = await apiClient.get(`/diary/${this.currentClub}`);
-                
-                // Die API gibt alle Trainingstage zurück, filtere nach dem Turnierdatum
-                const trainingData = response.data;
-                
-                if (Array.isArray(trainingData)) {
-                    
-                    // Finde den Trainingstag für das Turnierdatum
-                    const trainingForDate = trainingData.find(training => training.date === tournamentDate);
-                    
-                    if (trainingForDate) {
-                        // Lade die Teilnehmer für diesen Trainingstag über die Participant-API
-                        const participantsResponse = await apiClient.get(`/participants/${trainingForDate.id}`);
-                        
-                        const participants = participantsResponse.data;
-                        
-                        if (participants && participants.length > 0) {
-                            // Lade die Member-Details für jeden Teilnehmer
-                            const trainingParticipants = [];
-                            for (const participant of participants) {
-                                try {
-                                    // Lade Member-Details über die Member-API
-                                    const memberResponse = await apiClient.get(`/clubmembers/get/${this.currentClub}/true`);
-                                    const member = memberResponse.data.find(m => m.id === participant.memberId);
-                                    
-                                    if (member) {
-                                        trainingParticipants.push({
-                                            clubMemberId: participant.memberId,
-                                            member: member
-                                        });
-                                    }
-                                } catch (memberError) {
-                                    console.error('Fehler beim Laden der Member-Details:', memberError);
-                                }
-                            }
-                            
-                            if (trainingParticipants.length > 0) {
-                                // Füge alle Trainingsteilnehmer zum Turnier hinzu
-                                for (const participant of trainingParticipants) {
-                                    await this.addParticipantFromTraining(participant);
-                                }
-                                
-                                // Lade Turnierdaten neu
-                                await this.loadTournamentData();
-                            } else {
-                                await this.showInfo('Hinweis', 'Keine gültigen Teilnehmer im Trainingstag für dieses Datum gefunden!', '', 'info');
-                            }
-                        } else {
-                            await this.showInfo('Hinweis', 'Keine Teilnehmer im Trainingstag für dieses Datum gefunden!', '', 'info');
-                        }
-                    } else {
-                        await this.showInfo('Hinweis', `Kein Trainingstag für ${tournamentDate} gefunden!`, '', 'info');
-                    }
-                } else {
-                    await this.showInfo('Hinweis', `Kein Trainingstag für ${tournamentDate} gefunden!`, '', 'info');
-                }
-            } catch (error) {
-                console.error('Fehler beim Laden der Trainingsteilnehmer:', error);
-                const message = safeErrorMessage(error, 'Fehler beim Laden der Trainingsteilnehmer.');
-                await this.showInfo('Fehler', message, '', 'error');
-            }
-        },
-
-        async addParticipantFromTraining(participant) {
-            try {
-                await apiClient.post('/tournament/participant', {
-                    clubId: this.currentClub,
-                    tournamentId: this.selectedDate,
-                    participant: participant.clubMemberId
-                });
-            } catch (error) {
-                console.error('Fehler beim Hinzufügen des Teilnehmers:', error);
-                // Ignoriere Fehler, da Teilnehmer möglicherweise bereits existiert
-            }
-        },
-
-        getMatchDisplayText(player1Id, player2Id, groupId) {
-            const liveResult = this.getMatchLiveResult(player1Id, player2Id, groupId);
-            if (!liveResult) return '-';
-            
-            // Zeige Satzergebnis (z.B. 1:0, 2:1, 0:2)
-            return `${liveResult.sets1}:${liveResult.sets2}`;
-        },
-
-        getMatchCellClasses(player1Id, player2Id, groupId) {
-            const liveResult = this.getMatchLiveResult(player1Id, player2Id, groupId);
-            if (!liveResult) return ['no-match'];
-            
-            const classes = ['match-result'];
-            
-            if (liveResult.isFinished) {
-                // Spiel beendet: Dunkle Farben
-                if (liveResult.player1Won) {
-                    classes.push('match-finished-win');
-                } else if (liveResult.player2Won) {
-                    classes.push('match-finished-loss');
-                } else {
-                    classes.push('match-finished-tie');
-                }
-            } else {
-                // Spiel läuft: Helle Farben
-                if (liveResult.player1Won) {
-                    classes.push('match-live-win');
-                } else if (liveResult.player2Won) {
-                    classes.push('match-live-loss');
-                } else {
-                    classes.push('match-live-tie');
-                }
-            }
-            
-            return classes;
-        },
-
-        getLivePosition(playerId, groupId) {
-            // Berechne Live-Punkte für alle Spieler in der Gruppe
-            const groupPlayers = this.groupRankings[groupId] || [];
-            const liveStats = groupPlayers.map(player => {
-                let livePoints = player.points || 0;
-                let liveSetsWon = player.setsWon || 0;
-                let liveSetsLost = player.setsLost || 0;
-                
-                // Füge Live-Punkte aus begonnenen (aber nicht abgeschlossenen) Spielen hinzu
-                const playerMatches = this.matches.filter(m => 
-                    m.round === 'group' && 
-                    m.groupId === groupId &&
-                    (m.player1.id === player.id || m.player2.id === player.id) &&
-                    !m.isFinished && // Nur begonnene, nicht abgeschlossene Spiele
-                    m.tournamentResults && m.tournamentResults.length > 0 // Mit Satz-Ergebnissen
-                );
-                
-                playerMatches.forEach(match => {
-                    const isPlayer1 = match.player1.id === player.id;
-                    const results = match.tournamentResults || [];
-                    
-                    if (results.length > 0) {
-                        let setsWon = 0, setsLost = 0;
-                        results.forEach(result => {
-                            if (isPlayer1) {
-                                if (result.pointsPlayer1 > result.pointsPlayer2) setsWon++;
-                                else if (result.pointsPlayer2 > result.pointsPlayer1) setsLost++;
-                            } else {
-                                if (result.pointsPlayer2 > result.pointsPlayer1) setsWon++;
-                                else if (result.pointsPlayer1 > result.pointsPlayer2) setsLost++;
-                            }
-                        });
-                        
-                        // Füge Live-Punkte hinzu (basierend auf aktuellen Sätzen)
-                        if (setsWon > setsLost) {
-                            livePoints += 1;
-                        } else if (setsLost > setsWon) {
-                            livePoints -= 1;
-                        }
-                        
-                        // Füge Live-Sätze hinzu
-                        if (isPlayer1) {
-                            liveSetsWon += results.reduce((sum, r) => sum + r.pointsPlayer1, 0);
-                            liveSetsLost += results.reduce((sum, r) => sum + r.pointsPlayer2, 0);
-                        } else {
-                            liveSetsWon += results.reduce((sum, r) => sum + r.pointsPlayer2, 0);
-                            liveSetsLost += results.reduce((sum, r) => sum + r.pointsPlayer1, 0);
-                        }
-                    }
-                });
-                
-                return {
-                    id: player.id,
-                    name: player.name,
-                    livePoints: livePoints,
-                    liveSetsWon: liveSetsWon,
-                    liveSetsLost: liveSetsLost,
-                    liveSetDiff: liveSetsWon - liveSetsLost
-                };
-            });
-            
-            // Sortiere nach Live-Punkten (absteigend), dann nach Satzverhältnis
-            liveStats.sort((a, b) => {
-                if (b.livePoints !== a.livePoints) return b.livePoints - a.livePoints;
-                if (b.liveSetDiff !== a.liveSetDiff) return b.liveSetDiff - a.liveSetDiff;
-                if (b.liveSetsWon !== a.liveSetsWon) return b.liveSetsWon - a.liveSetsWon;
-                return a.name.localeCompare(b.name);
-            });
-            
-            // Weise Positionen zu, wobei Spieler mit identischen Werten den gleichen Platz bekommen
-            let currentPosition = 1;
-            const positions = liveStats.map((p, i) => {
-                // Wenn nicht der erste Spieler und die Werte identisch sind, verwende die gleiche Position
-                if (i > 0) {
-                    const prev = liveStats[i - 1];
-                    if (prev.livePoints === p.livePoints && 
-                        prev.liveSetDiff === p.liveSetDiff && 
-                        prev.liveSetsWon === p.liveSetsWon) {
-                        // Gleicher Platz wie Vorgänger
-                        return currentPosition;
-                    }
-                }
-                // Neuer Platz
-                currentPosition = i + 1;
-                return currentPosition;
-            });
-            
-            // Finde Position des Spielers
-            const playerIndex = liveStats.findIndex(p => p.id === playerId);
-            return playerIndex >= 0 ? positions[playerIndex] : liveStats.length + 1;
-        }
-    }
+  },
 };
 </script>
 
 <style scoped>
-.tournaments-view {
-    padding: 1rem;
+.tournaments-container {
+  padding: 20px;
 }
 
-.new-tournament {
-    margin-top: 1rem;
-    display: flex;
-    gap: 1rem;
-    align-items: flex-end;
-    flex-wrap: wrap;
+.tab-navigation {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid #e0e0e0;
+  margin-bottom: 20px;
 }
 
-.new-tournament label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+.tab-button {
+  background: none;
+  border: none;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  transition: all 0.3s ease;
+  margin-bottom: -2px;
 }
 
-.new-tournament input[type="text"],
-.new-tournament input[type="date"],
-.new-tournament input[type="number"] {
-    padding: 0.4rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1em;
+.tab-button:hover {
+  color: #333;
+  background-color: #f8f9fa;
 }
 
-.new-tournament input[type="text"] {
-    min-width: 200px;
+.tab-button.active {
+  color: #28a745;
+  border-bottom-color: #28a745;
 }
 
-.tournament-info {
-    margin-bottom: 1rem;
-    display: flex;
-    gap: 1rem;
-    align-items: flex-end;
-    flex-wrap: wrap;
+.tab-content {
+  margin-top: 20px;
+  min-height: 200px;
+  position: relative;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
 }
 
-.tournament-info label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+.tab-content > * {
+  width: 100%;
+  display: block;
 }
+</style>
 
-.tournament-info input[type="text"],
-.tournament-info input[type="date"],
-.tournament-info input[type="number"] {
-    padding: 0.4rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1em;
+<style>
+/* Global styles for tab content - components may have their own padding */
+.tab-content .tournaments-view {
+  padding: 1rem;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  height: auto !important;
 }
 
-.tournament-info input[type="text"] {
-    min-width: 200px;
+.tab-content .official-tournaments {
+  padding: 0;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  height: auto !important;
 }
+</style>
 
-.participants,
-.group-controls,
-.groups-overview,
-.ko-round,
-.ko-start {
-    margin-top: 1.5rem;
-}
-
-.class-section {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-}
-
-.class-section:first-child {
-    margin-top: 0;
-}
-
-.class-header {
-    font-size: 1.2em;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid #ddd;
-}
-
-.group-table {
-    margin-bottom: 2rem;
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-th,
-td {
-    padding: 0.5em;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-button {
-    margin-left: 0.5em;
-}
-
-.match-cell.diagonal-cell {
-    position: relative;
-    padding: 0;
-}
-
-.diagonal {
-    background-color: #bbb;
-    color: #bbb;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.match-result {
-    font-weight: bold;
-    padding: 2px 4px;
-    border-radius: 3px;
-}
-
-.match-result.win {
-    background-color: #d4edda;
-    color: #155724;
-}
-
-.match-result.loss {
-    background-color: #f8d7da;
-    color: #721c24;
-}
-
-/* Live-Ergebnisse während des Spiels */
-.match-live-win {
-    background-color: #d1eca1; /* Hellgrün */
-    color: #0c5460;
-    font-weight: bold;
-}
-
-.match-live-loss {
-    background-color: #ffeaa7; /* Orange */
-    color: #d63031;
-    font-weight: bold;
-}
-
-.match-live-tie {
-    background-color: #f8f9fa; /* Neutral */
-    color: #6c757d;
-    font-weight: bold;
-}
-
-/* Beendete Spiele */
-.match-finished-win {
-    background-color: #28a745; /* Dunkelgrün */
-    color: white;
-    font-weight: bold;
-}
-
-.match-finished-loss {
-    background-color: #fd7e14; /* Dunkelorange */
-    color: white;
-    font-weight: bold;
-}
-
-.match-finished-tie {
-    background-color: #6c757d; /* Grau */
-    color: white;
-    font-weight: bold;
-}
-
-/* Kollabierbare Teilnehmerliste */
-.participants-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #dee2e6;
-    margin-bottom: 1rem;
-}
-
-.participants-header:hover {
-    background-color: #f8f9fa;
-    border-radius: 4px;
-}
-
-.participants-header h4 {
-    margin: 0;
-    color: #495057;
-}
-
-.collapse-icon {
-    font-size: 0.8em;
-    color: #6c757d;
-    transition: transform 0.3s ease;
-    user-select: none;
-}
-
-.collapse-icon.expanded {
-    transform: rotate(180deg);
-}
-
-.participants-content {
-    animation: slideDown 0.3s ease;
-}
-
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        max-height: 0;
-    }
-    to {
-        opacity: 1;
-        max-height: 1000px;
-    }
-}
-
-.participants-table-container {
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    overflow: hidden;
-    display: inline-block;
-    width: auto;
-}
-
-.participants-table {
-    width: auto;
-    border-collapse: collapse;
-    font-size: 0.9em;
-}
-
-.participants-table-header {
-    margin: 0;
-    border-bottom: none;
-}
-
-.participants-table-header th {
-    font-weight: bold;
-    font-size: 0.85em;
-    color: #495057;
-    padding: 0.15rem 0.5rem;
-    text-align: left;
-    white-space: nowrap;
-    background-color: white;
-}
-
-.participants-table-body-wrapper {
-    max-height: 400px;
-    overflow-y: auto;
-    overflow-x: auto;
-    margin: 0;
-}
-
-.participants-table-body td {
-    padding: 0.1rem 0.5rem;
-    white-space: nowrap;
-}
-
-/* Synchronisiere Spaltenbreiten zwischen Header und Body */
-.participants-table-header .participant-seeded-cell,
-.participants-table-body .participant-seeded-cell {
-    width: 60px;
-}
-
-.participants-table-header .participant-name,
-.participants-table-body .participant-name {
-    min-width: 150px;
-}
-
-.participants-table-header .participant-club-cell,
-.participants-table-body .participant-club-cell {
-    min-width: 120px;
-}
-
-.participants-table-header .participant-class-cell,
-.participants-table-body .participant-class-cell {
-    min-width: 120px;
-}
-
-.participants-table-header .participant-group-cell,
-.participants-table-body .participant-group-cell {
-    width: 80px;
-}
-
-.participants-table-header .participant-action-cell,
-.participants-table-body .participant-action-cell {
-    width: 50px;
-}
-
-.participant-item {
-    line-height: 1.2;
-}
-
-.participant-seeded-cell {
-    white-space: nowrap;
-}
-
-.seeded-checkbox-label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-}
-
-.seeded-checkbox-label input[type="checkbox"] {
-    cursor: pointer;
-    margin: 0;
-}
-
-.participant-name {
-    white-space: nowrap;
-}
-
-.participant-group-cell {
-    white-space: nowrap;
-}
-
-.participant-action-cell {
-    white-space: nowrap;
-}
-
-.participant-class-cell {
-    white-space: nowrap;
-}
-
-.class-select-small {
-    font-size: 0.85em;
-    padding: 2px 4px;
-    min-width: 100px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-}
-
-.group-select-small {
-    font-size: 0.85em;
-    padding: 2px 4px;
-    width: 50px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-}
-
-.trash-btn-small {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.9em;
-    padding: 0;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-}
-
-.trash-btn-small:hover {
-    opacity: 1;
-}
-
-.add-participant {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #dee2e6;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.add-participant-section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.add-participant-section h5 {
-    margin: 0;
-    font-size: 0.9em;
-    color: #495057;
-}
-
-.add-participant-row {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.external-input {
-    padding: 0.4rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 0.9em;
-    min-width: 120px;
-}
-
-.member-select {
-    flex: 1;
-    min-width: 200px;
-    padding: 0.4rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.btn-add {
-    padding: 0.4rem 0.8rem;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9em;
-    white-space: nowrap;
-}
-
-.btn-add:hover {
-    background-color: #0056b3;
-}
-
-.training-btn {
-    background-color: #28a745;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9em;
-    transition: background-color 0.2s ease;
-}
-
-.training-btn:hover {
-    background-color: #218838;
-}
-
-.training-btn:active {
-    background-color: #1e7e34;
-}
-
-.tournament-classes {
-    margin-top: 1.5rem;
-}
-
-.classes-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #dee2e6;
-    margin-bottom: 1rem;
-}
-
-.classes-header:hover {
-    background-color: #f8f9fa;
-    border-radius: 4px;
-}
-
-.classes-header h4 {
-    margin: 0;
-    color: #495057;
-}
-
-.classes-content {
-    animation: slideDown 0.3s ease;
-}
-
-.classes-list {
-    margin-bottom: 1rem;
-}
-
-.class-item {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.class-name-label {
-    flex: 1;
-    padding: 0.4rem;
-    font-size: 0.9em;
-    min-width: 200px;
-}
-
-.class-name-input {
-    flex: 1;
-    padding: 0.4rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 0.9em;
-    min-width: 200px;
-}
-
-.btn-edit-small,
-.btn-save-small,
-.btn-cancel-small {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.9em;
-    padding: 0;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-    margin-left: 0.25rem;
-}
-
-.btn-edit-small:hover,
-.btn-save-small:hover,
-.btn-cancel-small:hover {
-    opacity: 1;
-}
-
-.btn-save-small {
-    color: #28a745;
-}
-
-.btn-cancel-small {
-    color: #dc3545;
-}
-
-.add-class {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    padding-top: 0.5rem;
-    border-top: 1px solid #dee2e6;
-}
-
-.no-match {
-    color: #ccc;
-}
-
-.group-table table {
-    font-size: 0.9em;
-}
-
-.group-table th,
-.group-table td {
-    padding: 0.3em 0.5em;
-    text-align: center;
-}
-
-.group-table th:first-child,
-.group-table td:first-child {
-    text-align: left;
-    font-weight: bold;
-}
-
-.group-table th:nth-child(3),
-.group-table td:nth-child(3) {
-    text-align: left;
-    min-width: 120px;
-}
-
-.seeded-star {
-    color: #ffd700;
-    margin-right: 0.25em;
-}
-
-.match-cell.clickable {
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.match-cell.clickable:hover {
-    background-color: #f8f9fa;
-    transform: scale(1.02);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.match-highlight {
-    background-color: #fff3cd !important;
-    border: 2px solid #ffc107 !important;
-    animation: highlight-pulse 0.5s ease-in-out;
-}
-
-@keyframes highlight-pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.02); }
-    100% { transform: scale(1); }
-}
-
-/* Container für neue Satzeingabe - inline */
-.new-set-line {
-    display: inline-block;
-    margin-left: 0.5rem;
-}
-
-/* Eingabefeld für Sätze - nur so breit wie nötig für die Eingabe */
-.inline-input {
-    width: 5ch; /* 5 Zeichen breit */
-    padding: calc(0.2rem + 2px) calc(0.4rem + 2px);
-    font-family: inherit;
-    text-align: center;
-    border: 1px solid #dee2e6;
-    border-radius: 3px;
-    box-sizing: border-box;
-    line-height: 1.5;
-    font-size: inherit;
-}
-
-/* Klickbare Ergebnis-Texte */
-.result-text.clickable {
-    cursor: pointer;
-    padding: 0.2rem 0.4rem;
-    border-radius: 3px;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
-    line-height: 1.5;
-    display: inline-block;
-}
-
-.result-text.clickable:hover {
-    background-color: #f8f9fa;
-    border-color: #dee2e6;
-}
-
-/* Aktive Begegnung hervorheben */
-tr.active-match {
-    background-color: #fff3cd !important;
-    border-left: 3px solid #ffc107;
-    cursor: pointer;
-}
-
-tr.active-match:hover {
-    background-color: #ffe69c !important;
-}
-
-/* Tabellenzeilen klickbar machen */
-tbody tr {
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-tbody tr:hover:not(.active-match) {
-    background-color: #f8f9fa;
-}
-
-/* Aktive Gruppentabellen-Zellen hervorheben */
-.match-cell.active-group-cell {
-    background-color: #fff3cd !important;
-    border: 2px solid #ffc107 !important;
-    font-weight: bold;
-}
-
-/* Abgeschlossene Spiele in grauer Schrift */
-.match-finished {
-    color: #626262 !important;
-    background-color: #e9ecef !important;
-}
-
-.match-finished td {
-    color: #828a91 !important;
-}
-
-/* Laufende Spiele farblich hervorheben - nur wenn nicht abgeschlossen */
-.match-live:not(.match-finished) {
-    background-color: #d4edda !important;
-    border-left: 4px solid #28a745 !important;
-}
-
-.match-live:not(.match-finished) td {
-    color: #155724;
-    font-weight: 500;
-}
-
-/* Button für "Läuft gerade" */
-.btn-live {
-    margin-left: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.9em;
-    background-color: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 3px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-live:hover {
-    background-color: #e9ecef;
-    border-color: #adb5bd;
-}
-
-.btn-live.active {
-    background-color: #28a745;
-    border-color: #28a745;
-    color: white;
-}
-
-.btn-live.active:hover {
-    background-color: #218838;
-    border-color: #1e7e34;
-}
-
-/* Button für "Korrigieren" - weißer Hintergrund mit grüner Schrift */
-.match-finished td .btn-correct,
-.btn-correct {
-    background: white !important;
-    background-color: white !important;
-    background-image: none !important;
-    color: #4CAF50 !important;
-    border: 1px solid #4CAF50 !important;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.9em;
-    border-radius: 3px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: none !important;
-    min-height: auto !important;
-}
-
-.match-finished td .btn-correct::before,
-.btn-correct::before {
-    display: none !important;
-}
-
-.match-finished td .btn-correct:hover,
-.btn-correct:hover {
-    background: #f8f9fa !important;
-    background-color: #f8f9fa !important;
-    background-image: none !important;
-    border-color: #45a049 !important;
-    color: #45a049 !important;
-    transform: none !important;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/TrainingGroupsView.vue b/frontend/src/views/TrainingGroupsView.vue
deleted file mode 100644
index 9341bfc..0000000
--- a/frontend/src/views/TrainingGroupsView.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<template>
-    <div class="training-groups-view">
-        <h2>Trainingsgruppen</h2>
-        
-        <div class="groups-section">
-            <div class="section-header">
-                <h3>Gruppen</h3>
-                <button @click="showAddGroupForm = true" class="btn-primary">+ Neue Gruppe</button>
-            </div>
-
-            <!-- Add Group Form -->
-            <div v-if="showAddGroupForm" class="add-group-form">
-                <input 
-                    v-model="newGroupName" 
-                    type="text" 
-                    placeholder="Gruppenname" 
-                    @keyup.enter="createGroup"
-                    class="input-field"
-                />
-                <button @click="createGroup" class="btn-primary">Erstellen</button>
-                <button @click="cancelAddGroup" class="btn-secondary">Abbrechen</button>
-            </div>
-
-            <!-- Groups List -->
-            <div class="groups-list">
-                <div 
-                    v-for="group in sortedGroups" 
-                    :key="group.id" 
-                    class="group-card"
-                    :class="{ 'preset-group': group.isPreset }"
-                >
-                    <div class="group-header">
-                        <h4>{{ group.name }}</h4>
-                        <div class="group-actions">
-                            <button 
-                                v-if="!group.isPreset" 
-                                @click="editGroup(group)" 
-                                class="btn-icon"
-                                title="Bearbeiten"
-                            >
-                                ✏️
-                            </button>
-                            <button 
-                                v-if="!group.isPreset" 
-                                @click="deleteGroup(group)" 
-                                class="btn-icon btn-danger"
-                                title="Löschen"
-                            >
-                                🗑️
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="group-members">
-                        <div class="members-count">
-                            {{ group.members ? group.members.length : 0 }} Mitglieder
-                        </div>
-                        <div class="members-list">
-                            <span 
-                                v-for="member in (group.members || [])" 
-                                :key="member.id"
-                                class="member-tag"
-                            >
-                                {{ member.firstName }} {{ member.lastName }}
-                                <button 
-                                    @click="removeMemberFromGroup(group.id, member.id)"
-                                    class="remove-member-btn"
-                                    title="Entfernen"
-                                >
-                                    ×
-                                </button>
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Add Member to Group -->
-                    <div class="add-member-section">
-                        <select 
-                            v-model="selectedMembers[group.id]"
-                            class="member-select"
-                            @change="addMemberToGroup(group.id, $event.target.value)"
-                            :disabled="availableMembersForGroup(group.id).length === 0"
-                        >
-                            <option value="">
-                                {{ availableMembersForGroup(group.id).length === 0 ? 'Keine Mitglieder verfügbar' : 'Mitglied hinzufügen...' }}
-                            </option>
-                            <option 
-                                v-for="member in availableMembersForGroup(group.id)" 
-                                :key="member.id"
-                                :value="member.id"
-                            >
-                                {{ member.firstName }} {{ member.lastName }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Edit Group Dialog -->
-        <div v-if="editingGroup" class="edit-group-dialog">
-            <div class="dialog-content">
-                <h3>Gruppe bearbeiten</h3>
-                <input 
-                    v-model="editingGroup.name" 
-                    type="text" 
-                    placeholder="Gruppenname"
-                    class="input-field"
-                />
-                <div class="dialog-actions">
-                    <button @click="saveGroupEdit" class="btn-primary">Speichern</button>
-                    <button @click="cancelGroupEdit" class="btn-secondary">Abbrechen</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Info/Confirm Dialogs -->
-        <InfoDialog
-            v-model="infoDialog.isOpen"
-            :title="infoDialog.title"
-            :message="infoDialog.message"
-            :details="infoDialog.details"
-            :type="infoDialog.type"
-        />
-        <ConfirmDialog
-            v-model="confirmDialog.isOpen"
-            :title="confirmDialog.title"
-            :message="confirmDialog.message"
-            :details="confirmDialog.details"
-            :type="confirmDialog.type"
-            @confirm="confirmDialog.resolveCallback && confirmDialog.resolveCallback(true)"
-            @cancel="confirmDialog.resolveCallback && confirmDialog.resolveCallback(false)"
-        />
-    </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import apiClient from '../apiClient.js';
-import { getSafeErrorMessage } from '../utils/errorMessages.js';
-import InfoDialog from '../components/InfoDialog.vue';
-import ConfirmDialog from '../components/ConfirmDialog.vue';
-
-export default {
-    name: 'TrainingGroupsView',
-    components: {
-        InfoDialog,
-        ConfirmDialog,
-    },
-    computed: {
-        ...mapGetters(['isAuthenticated', 'currentClub', 'token']),
-        
-        sortedGroups() {
-            if (!Array.isArray(this.groups)) {
-                return [];
-            }
-            return [...this.groups].sort((a, b) => {
-                // Preset-Gruppen zuerst
-                if (a.isPreset && !b.isPreset) return -1;
-                if (!a.isPreset && b.isPreset) return 1;
-                // Dann nach sortOrder
-                if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder;
-                // Dann alphabetisch
-                return a.name.localeCompare(b.name);
-            });
-        },
-    },
-    data() {
-        return {
-            groups: [],
-            members: [],
-            showAddGroupForm: false,
-            newGroupName: '',
-            editingGroup: null,
-            selectedMembers: {},
-            infoDialog: {
-                isOpen: false,
-                title: '',
-                message: '',
-                details: '',
-                type: 'info',
-            },
-            confirmDialog: {
-                isOpen: false,
-                title: '',
-                message: '',
-                details: '',
-                type: 'info',
-                resolveCallback: null,
-            },
-        };
-    },
-    async created() {
-        if (this.isAuthenticated && this.currentClub) {
-            await this.loadGroups();
-            await this.loadMembers();
-        }
-    },
-    watch: {
-        currentClub() {
-            if (this.isAuthenticated && this.currentClub) {
-                this.loadGroups();
-                this.loadMembers();
-            }
-        },
-    },
-    methods: {
-        async loadGroups() {
-            try {
-                const response = await apiClient.get(`/training-groups/${this.currentClub}`);
-                // Stelle sicher, dass es ein Array ist und dass jedes Gruppen-Objekt ein members-Array hat
-                const groups = Array.isArray(response.data) ? response.data : [];
-                this.groups = groups.map(group => ({
-                    ...group,
-                    members: Array.isArray(group.members) ? group.members : []
-                }));
-            } catch (error) {
-                const msg = getSafeErrorMessage(error, 'Fehler beim Laden der Trainingsgruppen');
-                this.showInfo('Fehler', msg, '', 'error');
-                this.groups = [];
-            }
-        },
-        
-        async loadMembers() {
-            try {
-                const response = await apiClient.get(`/clubmembers/get/${this.currentClub}/false`);
-                const members = Array.isArray(response.data) ? response.data : [];
-                // Die API filtert bereits nach active, also müssen wir nicht nochmal filtern
-                const filteredMembers = members.filter(m => m != null);
-                // Sortiere alphabetisch nach Nachname, dann Vorname
-                this.members = filteredMembers.sort((a, b) => {
-                    const lastNameA = (a.lastName || '').toLowerCase();
-                    const lastNameB = (b.lastName || '').toLowerCase();
-                    if (lastNameA !== lastNameB) {
-                        return lastNameA.localeCompare(lastNameB);
-                    }
-                    const firstNameA = (a.firstName || '').toLowerCase();
-                    const firstNameB = (b.firstName || '').toLowerCase();
-                    return firstNameA.localeCompare(firstNameB);
-                });
-                console.log('[loadMembers] Loaded', this.members.length, 'active members');
-            } catch (error) {
-                console.error('[loadMembers] Error:', error);
-                const msg = getSafeErrorMessage(error, 'Fehler beim Laden der Mitglieder');
-                this.showInfo('Fehler', msg, '', 'error');
-                this.members = [];
-            }
-        },
-        
-        availableMembersForGroup(groupId) {
-            if (!Array.isArray(this.members) || this.members.length === 0) {
-                return [];
-            }
-            const group = this.groups.find(g => g.id === groupId);
-            if (!group) {
-                return this.members;
-            }
-            
-            const groupMembers = Array.isArray(group.members) ? group.members : [];
-            const memberIdsInGroup = new Set(groupMembers.map(m => m && m.id).filter(id => id != null));
-            return this.members.filter(m => m && m.id && !memberIdsInGroup.has(m.id));
-        },
-        
-        async createGroup() {
-            if (!this.newGroupName.trim()) {
-                this.showInfo('Hinweis', 'Bitte geben Sie einen Gruppennamen ein.', '', 'warning');
-                return;
-            }
-            
-            try {
-                await apiClient.post(`/training-groups/${this.currentClub}`, {
-                    name: this.newGroupName.trim(),
-                });
-                this.newGroupName = '';
-                this.showAddGroupForm = false;
-                await this.loadGroups();
-            } catch (error) {
-                const msg = getSafeErrorMessage(error, 'Fehler beim Erstellen der Gruppe');
-                this.showInfo('Fehler', msg, '', 'error');
-            }
-        },
-        
-        cancelAddGroup() {
-            this.newGroupName = '';
-            this.showAddGroupForm = false;
-        },
-        
-        editGroup(group) {
-            this.editingGroup = { ...group };
-        },
-        
-        async saveGroupEdit() {
-            if (!this.editingGroup.name.trim()) {
-                this.showInfo('Hinweis', 'Bitte geben Sie einen Gruppennamen ein.', '', 'warning');
-                return;
-            }
-            
-            try {
-                await apiClient.put(`/training-groups/${this.currentClub}/${this.editingGroup.id}`, {
-                    name: this.editingGroup.name.trim(),
-                    sortOrder: this.editingGroup.sortOrder,
-                });
-                this.editingGroup = null;
-                await this.loadGroups();
-            } catch (error) {
-                const msg = getSafeErrorMessage(error, 'Fehler beim Aktualisieren der Gruppe');
-                this.showInfo('Fehler', msg, '', 'error');
-            }
-        },
-        
-        cancelGroupEdit() {
-            this.editingGroup = null;
-        },
-        
-        async deleteGroup(group) {
-            const confirmed = await this.showConfirm(
-                'Gruppe löschen',
-                `Möchten Sie die Gruppe "${group.name}" wirklich löschen?`,
-                'Alle Mitglieder-Zuordnungen werden entfernt.',
-                'warning'
-            );
-            
-            if (!confirmed) return;
-            
-            try {
-                await apiClient.delete(`/training-groups/${this.currentClub}/${group.id}`);
-                await this.loadGroups();
-            } catch (error) {
-                const msg = getSafeErrorMessage(error, 'Fehler beim Löschen der Gruppe');
-                this.showInfo('Fehler', msg, '', 'error');
-            }
-        },
-        
-        async addMemberToGroup(groupId, memberId) {
-            if (!memberId || !groupId) {
-                return;
-            }
-            
-            try {
-                await apiClient.post(`/training-groups/${this.currentClub}/${groupId}/member/${memberId}`);
-                this.selectedMembers[groupId] = '';
-                await this.loadGroups();
-            } catch (error) {
-                console.error('[addMemberToGroup] Error:', error);
-                const msg = getSafeErrorMessage(error, 'Fehler beim Hinzufügen des Mitglieds');
-                this.showInfo('Fehler', msg, '', 'error');
-            }
-        },
-        
-        async removeMemberFromGroup(groupId, memberId) {
-            try {
-                await apiClient.delete(`/training-groups/${this.currentClub}/${groupId}/member/${memberId}`);
-                await this.loadGroups();
-            } catch (error) {
-                const msg = getSafeErrorMessage(error, 'Fehler beim Entfernen des Mitglieds');
-                this.showInfo('Fehler', msg, '', 'error');
-            }
-        },
-        
-        showInfo(title, message, details, type) {
-            this.infoDialog = { isOpen: true, title, message, details, type };
-        },
-        
-        showConfirm(title, message, details, type) {
-            return new Promise((resolve) => {
-                this.confirmDialog = {
-                    isOpen: true,
-                    title,
-                    message,
-                    details,
-                    type,
-                    resolveCallback: resolve,
-                };
-            });
-        },
-    },
-};
-</script>
-
-<style scoped>
-.training-groups-view {
-    padding: 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.add-group-form {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-    padding: 1rem;
-    background: #f5f5f5;
-    border-radius: 4px;
-}
-
-.input-field {
-    flex: 1;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.groups-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1rem;
-}
-
-.group-card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1rem;
-    background: white;
-}
-
-.group-card.preset-group {
-    border-color: #4CAF50;
-    background: #f1f8f4;
-}
-
-.group-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.group-header h4 {
-    margin: 0;
-    color: #333;
-}
-
-.group-actions {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.btn-icon {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.2rem;
-    padding: 0.25rem 0.5rem;
-}
-
-.btn-icon:hover {
-    opacity: 0.7;
-}
-
-.btn-danger {
-    color: #d32f2f;
-}
-
-.group-members {
-    margin-top: 1rem;
-}
-
-.members-count {
-    font-size: 0.9rem;
-    color: #666;
-    margin-bottom: 0.5rem;
-}
-
-.members-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-.member-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.5rem;
-    background: #e3f2fd;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-.remove-member-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.2rem;
-    line-height: 1;
-    color: #d32f2f;
-    padding: 0;
-    margin-left: 0.25rem;
-}
-
-.remove-member-btn:hover {
-    opacity: 0.7;
-}
-
-.add-member-section {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #eee;
-}
-
-.member-select {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.edit-group-dialog {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.dialog-content {
-    background: white;
-    padding: 2rem;
-    border-radius: 8px;
-    min-width: 300px;
-}
-
-.dialog-actions {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
-    justify-content: flex-end;
-}
-
-.btn-primary {
-    background: #4CAF50;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.btn-primary:hover {
-    background: #45a049;
-}
-
-.btn-secondary {
-    background: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.btn-secondary:hover {
-    background: #e0e0e0;
-}
-</style>
-