diff --git a/frontend/src/config/products.js b/frontend/src/config/products.js
index 0cf2a817..5afa2738 100755
--- a/frontend/src/config/products.js
+++ b/frontend/src/config/products.js
@@ -65,6 +65,7 @@ export const SIDEBAR_NAVIGATION = {
       items: [
         { to: '/members', icon: '👥', labelKey: 'navigation.members', permission: ['members', 'read'] },
         { to: '/diary', icon: '📝', labelKey: 'navigation.diary', permission: ['diary', 'read'] },
+        { to: '/kaisertisch', icon: '🏓', label: 'Kaisertisch' },
         {
           to: '/calendar',
           icon: '📆',
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 74aa8555..d1fbe05d 100755
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -18,6 +18,7 @@ const CreateClub = () => import('./views/CreateClub.vue');
 const ClubView = () => import('./views/ClubView.vue');
 const MembersView = () => import('./views/MembersView.vue');
 const DiaryView = () => import('./views/DiaryView.vue');
+const KaisertischView = () => import('./views/KaisertischView.vue');
 const CalendarView = () => import('./views/CalendarView.vue');
 const PendingApprovalsView = () => import('./views/PendingApprovalsView.vue');
 const ScheduleView = () => import('./views/ScheduleView.vue');
@@ -175,6 +176,7 @@ const routes = [
   { path: '/showclub/:clubId', name: 'show-club', component: ClubView, meta: withMeta({ products: fullAppProducts }) },
   { path: '/members', name: 'members', component: MembersView, meta: withMeta({ products: fullAppProducts, permission: ['members', 'read'] }) },
   { path: '/diary', name: 'diary', component: DiaryView, meta: withMeta({ products: trainerOnly }) },
+  { path: '/kaisertisch', name: 'kaisertisch', component: KaisertischView, meta: withMeta({ products: trainerOnly }) },
   { path: '/calendar', name: 'calendar', component: CalendarView, meta: withMeta({ products: allProducts, anyPermission: [['diary', 'read'], ['schedule', 'read'], ['tournaments', 'read']] }) },
   { path: '/pending-approvals', name: 'pending-approvals', component: PendingApprovalsView, meta: withMeta({ products: fullAppProducts, capability: 'approvals' }) },
   { path: '/schedule', name: 'schedule', component: ScheduleView, meta: withMeta({ products: fullAppProducts, permission: ['schedule', 'read'] }) },
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 5f808a87..d253eadc 100755
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -179,6 +179,14 @@
                             >
                                 {{ $t('diary.trainingDaySummaryPdfShort') }}
                             </button>
+                            <button
+                                v-if="date && date.id"
+                                type="button"
+                                aria-label="Kaisertisch für diesen Trainingstag starten"
+                                @click="startKaisertisch"
+                            >
+                                🏓 Kaisertisch starten
+                            </button>
                         </div>
                     </div>
                     <div style="overflow: visible; position: relative;">
@@ -2964,6 +2972,10 @@ export default {
             pdf.addTrainingPlan(this.currentClubName, this.date.date, this.trainingStart, this.trainingEnd, this.trainingPlan);
             pdf.save('trainingsplan.pdf');
         },
+        startKaisertisch() {
+            if (!this.date?.id) return;
+            this.$router.push({ path: '/kaisertisch', query: { dateId: String(this.date.id) } });
+        },
         async generateTrainingDayPDF() {
             if (!this.date || !this.participants || this.participants.length === 0) {
                 this.showInfo('Fehler', 'Keine Teilnehmer für diesen Trainingstag vorhanden.', '', 'error');
diff --git a/frontend/src/views/KaisertischView.vue b/frontend/src/views/KaisertischView.vue
new file mode 100644
index 00000000..fc9faaef
--- /dev/null
+++ b/frontend/src/views/KaisertischView.vue
@@ -0,0 +1,203 @@
+<template>
+  <main class="kaisertisch">
+    <header class="kaiser-header">
+      <div>
+        <p class="eyebrow">TRAININGSMODUS</p>
+        <h2>Kaisertisch</h2>
+        <p class="intro">Ein Sieg, ein Klick – und der nächste Durchgang ist klar.</p>
+      </div>
+      <div class="session-status" :class="{ ready: occupiedSlots === tableCount * 2 }">
+        <span class="status-dot" aria-hidden="true"></span>
+        {{ occupiedSlots === tableCount * 2 ? `Runde ${round + 1} läuft` : `${occupiedSlots} von ${tableCount * 2} Plätzen belegt` }}
+      </div>
+    </header>
+
+    <div v-if="error" class="kaiser-alert" role="alert">{{ error }} <button type="button" @click="loadData">Erneut versuchen</button></div>
+
+    <div class="kaiser-layout">
+      <section class="board-panel" aria-labelledby="board-title" :aria-busy="loading">
+        <div class="section-heading">
+          <div><p class="eyebrow">LIVE-BOARD</p><h3 id="board-title">Die Tischfolge</h3></div>
+          <span class="round-chip">{{ history.length ? `${history.length} Runden` : 'Noch keine Runde' }}</span>
+        </div>
+
+        <div v-if="activeTableIndexes.length" class="round-control" :class="{ complete: roundReady }">
+          <div>
+            <strong>{{ pendingWinnerCount }} von {{ activeTableIndexes.length }} Ergebnissen erfasst</strong>
+            <span v-if="incompleteTableIndexes.length">Unvollständige Tische zuerst vollständig besetzen.</span>
+            <span v-else-if="roundReady">Alle Ergebnisse sind bereit für die gemeinsame Verschiebung.</span>
+            <span v-else>Sieger an jedem besetzten Tisch markieren.</span>
+          </div>
+          <button type="button" class="btn-primary round-apply" :disabled="!roundReady" @click="showRoundConfirm = true">Runde übernehmen</button>
+        </div>
+
+        <div v-if="loading" class="board-loading">Teilnehmende werden geladen …</div>
+        <div v-else class="tables-flow">
+          <div class="flow-rail" aria-hidden="true"><span>AUFSTIEG</span><i></i><b>↑</b></div>
+          <div class="tables-list">
+            <article v-for="(table, tableIndex) in tables" :key="tableIndex" class="kaiser-table" :class="{ emperor: tableIndex === 0 }">
+              <header class="table-label">
+                <span class="table-number">{{ tableIndex === 0 ? 'K' : tableIndex + 1 }}</span>
+                <strong>{{ tableIndex === 0 ? 'Kaisertisch' : `Tisch ${tableIndex + 1}` }}</strong>
+                <small v-if="tableIndex === 0">bleibt oben</small>
+              </header>
+              <div class="table-surface">
+                <button
+                  type="button" class="player-seat left" :class="seatClass(tableIndex, 'left')"
+                  :aria-label="seatAriaLabel(tableIndex, 'left')" @click="handleSeatClick(tableIndex, 'left')"
+                >
+                  <span v-if="table.left" class="player-name">{{ playerName(table.left) }}</span>
+                  <span v-else>{{ selectedSeat && selectedSeat.table === tableIndex && selectedSeat.side === 'left' ? 'Hier einsetzen' : 'Freier Platz' }}</span>
+                </button>
+                <span class="net" aria-hidden="true"></span>
+                <button
+                  type="button" class="player-seat right" :class="seatClass(tableIndex, 'right')"
+                  :aria-label="seatAriaLabel(tableIndex, 'right')" @click="handleSeatClick(tableIndex, 'right')"
+                >
+                  <span v-if="table.right" class="player-name">{{ playerName(table.right) }}</span>
+                  <span v-else>{{ selectedSeat && selectedSeat.table === tableIndex && selectedSeat.side === 'right' ? 'Hier einsetzen' : 'Freier Platz' }}</span>
+                </button>
+              </div>
+              <p class="table-hint" v-if="table.left && table.right">{{ pendingWinners[tableIndex] ? `${playerName(pendingWinners[tableIndex])} gewinnt – zum Ändern anderen Spieler antippen` : 'Sieger für diese Runde antippen' }}</p>
+              <p class="table-hint" v-else>Platz wählen, dann Teilnehmer antippen</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <aside class="control-column">
+        <section class="utility-panel setup-panel" aria-labelledby="setup-title">
+          <div class="section-heading compact"><div><p class="eyebrow">AUFBAU</p><h3 id="setup-title">Startaufstellung</h3></div></div>
+          <div class="field-label" role="group" aria-label="Anzahl der Tische">
+            <span>Tische</span>
+            <div class="table-count-spinner">
+              <button type="button" aria-label="Einen Tisch weniger" :disabled="tableCount <= 1" @click="adjustTableCount(-1)">−</button>
+              <output aria-live="polite">{{ tableCount }} {{ tableCount === 1 ? 'Tisch' : 'Tische' }}</output>
+              <button type="button" aria-label="Einen Tisch mehr" :disabled="tableCount >= 30" @click="adjustTableCount(1)">+</button>
+            </div>
+          </div>
+          <div class="setup-actions">
+            <button type="button" class="btn-primary" @click="createDemo">⚡ Demo-Aufstellung</button>
+            <button type="button" class="btn-secondary" :class="{ active: swapMode }" @click="toggleSwapMode">⇄ {{ swapMode ? 'Tausch wählen …' : 'Tauschen' }}</button>
+          </div>
+          <p class="setup-note" v-if="swapMode">Zwei besetzte Plätze nacheinander antippen.</p>
+          <p class="setup-note" v-else-if="selectedSeat">{{ selectedSeatLabel }} ausgewählt. Nun einen Namen antippen.</p>
+          <p class="setup-note" v-else>Erst einen freien Platz auf dem Tisch auswählen.</p>
+        </section>
+
+        <section class="utility-panel pool-panel" aria-labelledby="pool-title">
+          <div class="section-heading compact"><div><p class="eyebrow">ANWESEND</p><h3 id="pool-title">Teilnehmerpool <span>{{ availablePlayers.length }}</span></h3></div></div>
+          <div v-if="!trainingDates.length && !loading" class="empty-copy">Kein Trainingstag vorhanden. Die Demo-Aufstellung funktioniert trotzdem.</div>
+          <label v-else class="field-label">Trainingstag
+            <select v-model="selectedDateId" @change="loadParticipantsForDate">
+              <option value="">Trainingstag wählen</option>
+              <option v-for="date in trainingDates" :key="date.id" :value="String(date.id)">{{ formatDate(date.date) }}</option>
+            </select>
+          </label>
+          <div v-if="availablePlayers.length" class="participant-pool" aria-label="Nicht gesetzte Teilnehmende">
+            <button v-for="player in availablePlayers" :key="player.id" type="button" @click="placePlayer(player.id)">{{ player.name }}</button>
+          </div>
+          <p v-else class="empty-copy">{{ members.length ? 'Alle geladenen Teilnehmenden sind gesetzt.' : 'Für diesen Trainingstag sind keine anwesenden Teilnehmenden gemeldet.' }}</p>
+        </section>
+
+        <section class="utility-panel history-panel" aria-labelledby="history-title">
+          <div class="section-heading compact"><div><p class="eyebrow">VERLAUF</p><h3 id="history-title">Rundenhistorie</h3></div><button type="button" class="text-button" :disabled="!history.length" @click="undo">↶ Rückgängig</button></div>
+          <p v-if="history.length" class="latest-result"><strong>Zuletzt:</strong> {{ history[0].summary }}</p>
+          <p v-else class="empty-copy">Noch kein Ergebnis erfasst.</p>
+          <ol v-if="history.length" class="history-list"><li v-for="entry in history.slice(0, 5)" :key="entry.id"><span>Runde {{ entry.round }}</span><span>{{ entry.summary }}</span><time>{{ entry.time }}</time></li></ol>
+        </section>
+
+      </aside>
+    </div>
+
+    <div v-if="showRoundConfirm" class="dialog-backdrop" @click.self="showRoundConfirm = false">
+      <section class="result-dialog" role="dialog" aria-modal="true" aria-labelledby="result-title">
+        <p class="eyebrow">RUNDE BESTÄTIGEN</p><h3 id="result-title">Alle Tische gleichzeitig verschieben?</h3>
+        <p>Die markierten Sieger und Verlierer werden als eine Runde übernommen.</p>
+        <ul class="move-preview"><li v-for="movement in roundMovementPreview" :key="movement.tableIndex"><b>{{ movement.label }}:</b> {{ movement.players }}</li></ul>
+        <div class="dialog-actions"><button type="button" class="btn-secondary" @click="showRoundConfirm = false">Abbrechen</button><button type="button" class="btn-primary result-confirm" @click="applyRound">Runde übernehmen</button></div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '../apiClient.js';
+import { safeLocalStorage } from '../utils/storage.js';
+
+const DEMO_PLAYERS = ['Mia Weber', 'Luca Schneider', 'Nora Fischer', 'Jonas Becker', 'Lea Hoffmann', 'Tim Wagner', 'Sofia Klein', 'Paul Richter', 'Emma Wolf', 'Noah Bauer', 'Lina König', 'Max Schmitt', 'Anna Keller', 'Ben Hartmann', 'Marie Lange', 'Finn Krause'];
+
+export default {
+  name: 'KaisertischView',
+  data() {
+    return { loading: true, error: '', allMembers: [], members: [], trainingDates: [], selectedDateId: '', tableCount: 4, tables: [], history: [], round: 0, selectedSeat: null, swapMode: false, swapSelection: [], pendingWinners: {}, showRoundConfirm: false, participantRequestId: 0 };
+  },
+  computed: {
+    ...mapGetters(['currentClub', 'isAuthenticated']),
+    storageKey() { return `kaisertisch-session:${this.currentClub || 'none'}`; },
+    occupiedSlots() { return this.tables.reduce((count, table) => count + Number(Boolean(table.left)) + Number(Boolean(table.right)), 0); },
+    seatedIds() { return new Set(this.tables.flatMap(table => [table.left, table.right]).filter(Boolean)); },
+    availablePlayers() { return this.members.filter(member => !this.seatedIds.has(member.id)); },
+    selectedSeatLabel() { return this.selectedSeat ? `${this.selectedSeat.side === 'left' ? 'Linker' : 'Rechter'} Platz an ${this.selectedSeat.table === 0 ? 'Kaisertisch' : `Tisch ${this.selectedSeat.table + 1}`}` : ''; },
+    activeTableIndexes() { return this.tables.map((table, index) => ({ table, index })).filter(({ table }) => table.left && table.right).map(({ index }) => index); },
+    incompleteTableIndexes() { return this.tables.map((table, index) => ({ table, index })).filter(({ table }) => Boolean(table.left) !== Boolean(table.right)).map(({ index }) => index); },
+    pendingWinnerCount() { return this.activeTableIndexes.filter(index => this.pendingWinners[index] && [this.tables[index].left, this.tables[index].right].includes(this.pendingWinners[index])).length; },
+    roundReady() { return this.activeTableIndexes.length > 0 && this.incompleteTableIndexes.length === 0 && this.pendingWinnerCount === this.activeTableIndexes.length; },
+    roundMovementPreview() {
+      const indexes = this.activeTableIndexes;
+      if (!this.roundReady) return [];
+      if (indexes.length === 1) return [{ tableIndex: indexes[0], label: this.tableLabel(indexes[0]), players: `${this.playerName(this.tables[indexes[0]].left)} und ${this.playerName(this.tables[indexes[0]].right)} bleiben` }];
+      return indexes.map((tableIndex, position) => {
+        const winner = index => this.pendingWinners[index];
+        const loser = index => this.tables[index].left === winner(index) ? this.tables[index].right : this.tables[index].left;
+        const players = position === 0 ? [winner(indexes[0]), winner(indexes[1])] : position === indexes.length - 1 ? [loser(indexes[position - 1]), loser(indexes[position])] : [loser(indexes[position - 1]), winner(indexes[position + 1])];
+        return { tableIndex, label: this.tableLabel(tableIndex), players: players.map(id => this.playerName(id)).join(' · ') };
+      });
+    },
+  },
+  watch: {
+    tables: { deep: true, handler() { this.persist(); } }, tableCount() { this.persist(); }, history: { deep: true, handler() { this.persist(); } }, pendingWinners: { deep: true, handler() { this.persist(); } }, selectedDateId() { this.persist(); },
+    currentClub() { this.loadData(); },
+    '$route.query.dateId': async function(dateId) {
+      if (!dateId || !this.trainingDates.some(date => String(date.id) === String(dateId))) return;
+      this.selectedDateId = String(dateId);
+      await this.loadParticipantsForDate();
+    },
+  },
+  methods: {
+    makeTables(count = this.tableCount) { return Array.from({ length: count }, () => ({ left: null, right: null })); },
+    playerName(id) { const member = this.members.find(item => String(item.id) === String(id)); return member?.name || `${member?.firstName || ''} ${member?.lastName || ''}`.trim() || String(id); },
+    formatMember(member) { return { ...member, name: `${member.firstName || member.firstname || ''} ${member.lastName || member.lastname || ''}`.trim() || member.name || 'Unbekannt' }; },
+    formatDate(value) { return value ? new Intl.DateTimeFormat('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' }).format(new Date(`${value}T12:00:00`)) : 'Unbekanntes Datum'; },
+    restore() { try { const saved = JSON.parse(safeLocalStorage.getItem(this.storageKey) || 'null'); if (!saved) return false; this.tableCount = Math.min(30, Math.max(1, Number(saved.tableCount) || 4)); this.tables = Array.isArray(saved.tables) && saved.tables.length === this.tableCount ? saved.tables : this.makeTables(); this.history = Array.isArray(saved.history) ? saved.history : []; this.round = Number(saved.round) || this.history.length; this.selectedDateId = saved.selectedDateId || ''; this.pendingWinners = saved.pendingWinners && typeof saved.pendingWinners === 'object' ? saved.pendingWinners : {}; return true; } catch (_) { return false; } },
+    persist() { if (!this.currentClub || !this.tables.length) return; safeLocalStorage.setItem(this.storageKey, JSON.stringify({ tableCount: this.tableCount, tables: this.tables, history: this.history, round: this.round, selectedDateId: this.selectedDateId, pendingWinners: this.pendingWinners })); },
+    async loadData() { this.loading = true; this.error = ''; try { if (!this.currentClub) return; const [membersResponse, datesResponse] = await Promise.all([apiClient.get(`/clubmembers/get/${this.currentClub}/false`), apiClient.get(`/diary/${this.currentClub}`)]); this.allMembers = (Array.isArray(membersResponse.data) ? membersResponse.data : []).map(this.formatMember); this.members = [...this.allMembers]; this.trainingDates = Array.isArray(datesResponse.data) ? datesResponse.data : []; const restored = this.restore(); if (!restored) this.tables = this.makeTables(); const requestedDateId = this.$route?.query?.dateId; if (requestedDateId && this.trainingDates.some(date => String(date.id) === String(requestedDateId))) this.selectedDateId = String(requestedDateId); if (this.selectedDateId) await this.loadParticipantsForDate(); else { const today = new Date().toISOString().slice(0, 10); const todayEntry = this.trainingDates.find(date => date.date === today); if (todayEntry) { this.selectedDateId = String(todayEntry.id); await this.loadParticipantsForDate(); } } } catch (error) { this.error = 'Die Trainingsdaten konnten nicht geladen werden. Deine lokale Aufstellung bleibt erhalten.'; if (!this.tables.length) this.tables = this.makeTables(); } finally { this.loading = false; } },
+    async loadParticipantsForDate() { if (!this.selectedDateId) return; const dateId = String(this.selectedDateId); const requestId = ++this.participantRequestId; try { const response = await apiClient.get(`/participants/${dateId}`); if (requestId !== this.participantRequestId || dateId !== String(this.selectedDateId)) return; const presentIds = new Set((Array.isArray(response.data) ? response.data : []).filter(participant => !participant.attendanceStatus || participant.attendanceStatus === 'present').map(participant => String(participant.memberId))); this.members = this.allMembers.filter(member => presentIds.has(String(member.id)) || this.seatedIds.has(member.id)); } catch (_) { if (requestId === this.participantRequestId) this.error = 'Teilnehmende dieses Trainingstags konnten nicht geladen werden.'; } },
+    adjustTableCount(direction) { const nextCount = Math.min(30, Math.max(1, this.tableCount + direction)); if (nextCount === this.tableCount) return; this.tableCount = nextCount; this.changeTableCount(); },
+    changeTableCount() { const old = this.tables; this.tables = this.makeTables(this.tableCount).map((table, index) => old[index] || table); this.selectedSeat = null; this.swapSelection = []; this.pendingWinners = {}; },
+    createDemo() { const names = this.members.length ? this.members.map(member => ({ id: member.id, name: member.name })) : DEMO_PLAYERS.map((name, index) => ({ id: `demo-${index}`, name })); if (!this.members.length) this.members = names; this.tables = this.makeTables().map((table, index) => ({ left: names[index * 2]?.id || null, right: names[index * 2 + 1]?.id || null })); this.history = []; this.round = 0; this.selectedSeat = null; this.pendingWinners = {}; },
+    seatClass(table, side) { return { empty: !this.tables[table][side], selected: this.selectedSeat?.table === table && this.selectedSeat?.side === side, 'swap-selected': this.swapSelection.some(item => item.table === table && item.side === side), winner: this.pendingWinners[table] === this.tables[table][side] }; },
+    seatAriaLabel(table, side) { const value = this.tables[table][side]; return value ? `${this.playerName(value)} an ${this.tableLabel(table)}${this.pendingWinners[table] === value ? ', als Sieger markiert' : ', als Sieger auswählen'}` : `Freier ${side === 'left' ? 'linker' : 'rechter'} Platz an ${this.tableLabel(table)}`; },
+    handleSeatClick(table, side) { const player = this.tables[table][side]; if (this.swapMode) { if (!player) return; const selection = { table, side }; if (this.swapSelection.some(item => item.table === table && item.side === side)) { this.swapSelection = []; return; } this.swapSelection.push(selection); if (this.swapSelection.length === 2) { const [first, second] = this.swapSelection; [this.tables[first.table][first.side], this.tables[second.table][second.side]] = [this.tables[second.table][second.side], this.tables[first.table][first.side]]; this.swapSelection = []; this.swapMode = false; this.pendingWinners = {}; } return; } if (!player) { this.selectedSeat = { table, side }; return; } if (!this.tables[table].left || !this.tables[table].right) { this.selectedSeat = { table, side }; return; } this.pendingWinners = { ...this.pendingWinners, [table]: player }; },
+    placePlayer(id) { if (!this.selectedSeat) return; this.tables[this.selectedSeat.table][this.selectedSeat.side] = id; this.selectedSeat = null; this.pendingWinners = {}; },
+    toggleSwapMode() { this.swapMode = !this.swapMode; this.swapSelection = []; this.selectedSeat = null; },
+    tableLabel(index) { return index === 0 ? 'Kaisertisch' : `Tisch ${index + 1}`; },
+    applyRound() { if (!this.roundReady) return; const snapshot = this.tables.map(table => ({ ...table })); const indexes = this.activeTableIndexes; const oldTables = snapshot.map(table => ({ ...table })); const winner = index => this.pendingWinners[index]; const loser = index => oldTables[index].left === winner(index) ? oldTables[index].right : oldTables[index].left; if (indexes.length > 1) { indexes.forEach((tableIndex, position) => { const nextPlayers = position === 0 ? [winner(indexes[0]), winner(indexes[1])] : position === indexes.length - 1 ? [loser(indexes[position - 1]), loser(indexes[position])] : [loser(indexes[position - 1]), winner(indexes[position + 1])]; this.tables[tableIndex] = { left: nextPlayers[0], right: nextPlayers[1] }; }); } this.round += 1; const summary = indexes.map(index => `${this.tableLabel(index)}: ${this.playerName(winner(index))}`).join(' · '); this.history.unshift({ id: `${Date.now()}-${this.round}`, round: this.round, time: new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit' }).format(new Date()), summary, before: snapshot }); this.pendingWinners = {}; this.showRoundConfirm = false; },
+    undo() { const previous = this.history.shift(); if (!previous) return; this.tables = previous.before.map(table => ({ ...table })); this.round = Math.max(0, this.round - 1); this.pendingWinners = {}; this.showRoundConfirm = false; },
+  },
+  mounted() { this.loadData(); },
+};
+</script>
+
+<style scoped>
+.kaisertisch { --ink:#26332d; --muted:#65716c; --cream:#fbf8f1; --paper:#fffdf8; --green:#4caf50; --deep-green:#17633d; --line:#dcd8cd; --coral:#c95b3e; max-width:1400px; margin:0 auto; padding:1.5rem; color:var(--ink); font-family:Inter,system-ui,sans-serif; }
+.kaiser-header,.section-heading,.table-label,.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.kaiser-header { margin:0 0 1.5rem; }.eyebrow { margin:0 0 .25rem; font-size:.69rem; letter-spacing:.14em; color:#a07040; font-weight:800; }.kaiser-header h2,.section-heading h3 { margin:0; letter-spacing:-.035em; }.kaiser-header h2 { font-size:clamp(2rem,4vw,3rem); }.intro,.empty-copy,.setup-note { color:var(--muted); margin:.35rem 0 0; line-height:1.45; }.session-status { display:flex; align-items:center; gap:.5rem; color:#95513b; font-weight:750; background:#fff0e9; border:1px solid #f1d2c5; padding:.65rem .8rem; border-radius:8px; }.session-status.ready { color:#21683b; background:#edf8ed; border-color:#cce9ce; }.status-dot { width:.58rem;height:.58rem;border-radius:50%;background:currentColor; }.kaiser-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:1.25rem; align-items:start; }.board-panel,.utility-panel { background:var(--paper); border:1px solid var(--line); box-shadow:0 4px 18px rgba(48,42,27,.07); }.board-panel { padding:1.2rem; }.section-heading h3 { font-size:1.2rem; }.section-heading.compact { align-items:start; }.round-chip { font-size:.8rem; font-weight:700; color:var(--muted); }.tables-flow { display:grid; grid-template-columns:48px 1fr; gap:.75rem; margin-top:1.25rem; }.flow-rail { position:relative; min-height:100%; display:flex; align-items:center; flex-direction:column; color:#a07040; font-size:.65rem; font-weight:800; letter-spacing:.1em; writing-mode:vertical-rl; transform:rotate(180deg); }.flow-rail i { flex:1; border-left:1px solid #cdb794; margin:.75rem 0; }.flow-rail b { font-size:1.5rem; }.tables-list { display:grid; gap:.8rem; }.kaiser-table { display:grid; grid-template-columns:118px 1fr; gap:.75rem; align-items:center; }.table-label { display:block; }.table-number { display:inline-grid; place-items:center; width:1.7rem;height:1.7rem; background:#e8e2d5;color:#705a37; border-radius:4px; font-size:.78rem; margin-right:.35rem; }.emperor .table-number { color:#fff;background:#a07040; }.table-label small { display:block; padding-left:2.1rem;color:var(--muted);font-size:.72rem;margin-top:.2rem; }.table-surface { display:grid; grid-template-columns:1fr 9px 1fr; min-height:76px; background:var(--deep-green); border:5px solid #f5f0e7; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 2px 4px rgba(23,62,39,.18); }.net { background:repeating-linear-gradient(to bottom,#e8ebde 0 3px,#58755e 3px 6px); }.player-seat { border:0; background:transparent; color:white; padding:.6rem; min-height:66px; cursor:pointer; font:inherit; font-weight:750; text-align:center; }.player-seat:hover,.player-seat:focus-visible { background:rgba(255,255,255,.16); outline:3px solid #f4bd5c; outline-offset:-3px; }.player-seat.empty { color:#d5e3d7;font-size:.82rem;font-weight:600; }.player-seat.selected { background:rgba(246,190,91,.26); }.player-seat.swap-selected { background:rgba(201,91,62,.55); }.table-hint { grid-column:2; margin:0; font-size:.72rem;color:var(--muted); }.control-column { display:grid; gap:.8rem; }.utility-panel { padding:1rem; background:#f2f3ef; }.field-label { display:grid; gap:.35rem; margin-top:.8rem; font-size:.82rem;font-weight:750; }.field-label select { padding:.62rem; border:1px solid #bfc7be; border-radius:5px; color:var(--ink); background:#fff; font:inherit; }.setup-actions { display:grid;grid-template-columns:1fr 1fr; gap:.5rem;margin-top:.8rem; }.btn-primary,.btn-secondary { min-height:42px; border-radius:6px;padding:.55rem .75rem; font:inherit;font-weight:750;cursor:pointer; }.btn-primary { border:1px solid #3e9f43;background:var(--green);color:#fff; }.btn-primary:hover,.btn-primary:focus-visible { background:#38933e; }.btn-secondary { border:1px solid #a07040;background:#fff;color:#684722; }.btn-secondary:hover,.btn-secondary.active { background:#f4eadc; }.btn-primary:focus-visible,.btn-secondary:focus-visible,.text-button:focus-visible { outline:3px solid #f4bd5c; outline-offset:2px; }.setup-note { font-size:.8rem;min-height:1.1rem; }.participant-pool { display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.75rem; }.participant-pool button { border:1px solid #c9d4ca;background:#fff;color:var(--ink);border-radius:4px;padding:.5rem .6rem;font:inherit;font-size:.84rem;cursor:pointer; }.participant-pool button:hover,.participant-pool button:focus-visible { border-color:var(--green); background:#edf8ed; }.history-panel { background:#33413b;color:#eff4ed; }.history-panel .eyebrow { color:#dabd8a; }.history-panel h3,.history-panel .empty-copy { color:inherit; }.text-button { border:0;background:transparent;color:#a07040;font:inherit;font-weight:800;cursor:pointer;padding:.25rem; }.history-panel .text-button { color:#f1c686; }.text-button:disabled { opacity:.5;cursor:not-allowed; }.latest-result { margin:.8rem 0 .4rem;font-size:.86rem; }.history-list { list-style:none;margin:0;padding:0; }.history-list li { display:grid;grid-template-columns:62px 1fr auto;gap:.5rem;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.13);font-size:.77rem; }.history-list time { color:#b9c4bb; }.kaiser-alert { padding:.8rem;background:#fff0e9;border-left:4px solid var(--coral);margin-bottom:1rem; }.kaiser-alert button { margin-left:.5rem; }.board-loading { padding:4rem 1rem;text-align:center;color:var(--muted); }.dialog-backdrop { position:fixed;inset:0;background:rgba(30,39,33,.55);z-index:50;display:grid;place-items:center;padding:1rem; }.result-dialog { width:min(100%,520px);background:#fffdf8;padding:1.3rem;box-shadow:0 20px 50px rgba(0,0,0,.25); }.result-dialog h3 { margin:.1rem 0 .6rem;font-size:1.45rem; }.move-preview { padding-left:1.1rem;line-height:1.8;color:#4f5a54; }.dialog-actions { justify-content:flex-end;margin-top:1.2rem; }.result-confirm { background:var(--coral);border-color:#b94a32; }
+.table-count-spinner { display:grid;grid-template-columns:38px minmax(96px,1fr) 38px;align-items:stretch;border:1px solid #bfc7be;background:#fff;border-radius:5px;overflow:hidden; }.table-count-spinner button { border:0;background:#e7ece5;color:var(--ink);font:800 1.25rem/1 Inter,system-ui,sans-serif;cursor:pointer; }.table-count-spinner button:hover:not(:disabled),.table-count-spinner button:focus-visible { background:#d6e1d4; }.table-count-spinner button:focus-visible { outline:3px solid #f4bd5c;outline-offset:-3px;z-index:1; }.table-count-spinner button:disabled { color:#aeb8b0;background:#f2f3ef;cursor:not-allowed; }.table-count-spinner output { display:grid;place-items:center;color:var(--ink);font-size:.95rem;font-weight:850;white-space:nowrap; }
+@media (max-width:850px) { .kaiser-header { align-items:flex-start;flex-direction:column; }.kaiser-layout { grid-template-columns:1fr; }.control-column { grid-template-columns:1fr 1fr; }.pool-panel,.history-panel { grid-row:auto; } }
+@media (max-width:580px) { .kaisertisch { padding:1rem .75rem; }.board-panel { padding:.85rem; }.tables-flow { grid-template-columns:28px 1fr;gap:.35rem; }.kaiser-table { grid-template-columns:1fr;gap:.25rem; }.table-label { display:flex;align-items:center;gap:.3rem; }.table-label small { padding:0;margin:0; }.table-hint { grid-column:auto; }.control-column { grid-template-columns:1fr; }.setup-actions { grid-template-columns:1fr; }.history-list li { grid-template-columns:58px 1fr; }.history-list time { grid-column:2; }.session-status { font-size:.85rem; } }
+@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important;scroll-behavior:auto!important; } }
+.net { background:#e8ebde; border-top:3px dashed #58755e; border-bottom:3px dashed #58755e; }
+
+.round-control { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.75rem .85rem;border:1px solid #e2c79e;background:#fff6e6;color:#75552c; }.round-control strong,.round-control span { display:block; }.round-control strong { font-size:.9rem; }.round-control span { margin-top:.14rem;font-size:.77rem; }.round-control.complete { background:#eaf7ea;border-color:#a9d9ae;color:#21683b; }.round-apply:disabled { background:#b6c2b5;border-color:#aab5a9;color:#fff;cursor:not-allowed; }.player-seat.winner { background:#66c96a;color:#123d24;box-shadow:inset 0 0 0 3px #eaffdd; }.player-seat.winner::after { content:'✓ Sieger';display:block;font-size:.68rem;letter-spacing:.04em;margin-top:.22rem;font-weight:900; }
+</style>