Responsive Mobile-Design: PGN/Tabelle-Reihenfolge, Board-Vergrößerung, Round-Info verschoben, kompaktere Player-Infos

app.js

@@ -114,6 +114,7 @@ function updateBoard() {
     if (board) {
         board.position(chess.fen(), true);
         board.orientation(orientation);
+        board.resize();
         highlightLastMove();
     } else {
         board = Chessboard('board', {
@@ -198,6 +199,8 @@ function updatePlayerInfo() {
     // Round info
     const roundInfo = `Runde ${currentGame.round} – ${currentGame.event || 'Turnier'}`;
     document.getElementById('round-info').textContent = roundInfo;
+    const mobileRound = document.getElementById('round-info-mobile');
+    if (mobileRound) mobileRound.textContent = roundInfo;
     
     // Result info
     const resultEl = document.getElementById('result-info');
@@ -317,7 +320,8 @@ function generatePGN(game) {
 
 function updatePGNDisplay() {
     if (!currentGame) return;
-    document.getElementById('pgn-text').textContent = generatePGN(currentGame);
+    const text = generatePGN(currentGame);
+    document.querySelectorAll('.pgn-text').forEach(el => el.textContent = text);
 }
 
 /**
@@ -573,16 +577,16 @@ document.getElementById('refresh-btn').addEventListener('click', () => {
 /**
  * PGN in Zwischenablage kopieren
  */
-document.getElementById('copy-pgn-btn').addEventListener('click', async () => {
+document.querySelectorAll('.copy-pgn-btn').forEach(btn => {
-    const text = document.getElementById('pgn-text').textContent;
+    btn.addEventListener('click', async () => {
+        const panel = btn.closest('[class*="pgn-panel"]');
+        const text = panel.querySelector('.pgn-text').textContent;
         if (!text) return;
         try {
             await navigator.clipboard.writeText(text);
-        const btn = document.getElementById('copy-pgn-btn');
             btn.textContent = '✅';
             setTimeout(() => { btn.textContent = '📋'; }, 1500);
         } catch {
-        // Fallback
             const ta = document.createElement('textarea');
             ta.value = text;
             document.body.appendChild(ta);
@@ -590,6 +594,7 @@ document.getElementById('copy-pgn-btn').addEventListener('click', async () => {
             document.execCommand('copy');
             document.body.removeChild(ta);
         }
+    });
 });
 
 /**
@@ -607,6 +612,20 @@ document.addEventListener('keydown', (e) => {
     }
 });
 
+/**
+ * Board-Resize bei Fenster- und Container-Änderungen
+ */
+window.addEventListener('resize', () => {
+    if (board) board.resize();
+});
+
+if (window.ResizeObserver) {
+    const ro = new ResizeObserver(() => {
+        if (board) board.resize();
+    });
+    ro.observe(document.getElementById('board'));
+}
+
 /**
  * Init
  */

index.html

@@ -20,6 +20,7 @@
 
         <div id="main-content">
             <!-- Linke Spalte: Schachbrett -->
+            <h2 id="round-info-mobile" class="round-info-mobile"></h2>
             <div id="board-section">
                 <div id="player-black" class="player-info">
                     <div class="player-avatar">⬛</div>
@@ -38,12 +39,12 @@
                     </div>
                     <div class="player-clock" id="white-clock">--:--:--</div>
                 </div>
-                <div id="pgn-panel">
+                <div id="pgn-panel" class="pgn-panel--desktop">
                     <div class="pgn-header">
                         <span>PGN</span>
-                        <button id="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
+                        <button class="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
                     </div>
-                    <pre id="pgn-text"></pre>
+                    <pre class="pgn-text"></pre>
                 </div>
             </div>
 
@@ -61,6 +62,13 @@
                     <h3>Alle Partien von Lara</h3>
                     <div id="all-games-list"></div>
                 </div>
+                <div id="pgn-panel-mobile" class="pgn-panel--mobile">
+                    <div class="pgn-header">
+                        <span>PGN</span>
+                        <button class="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
+                    </div>
+                    <pre class="pgn-text"></pre>
+                </div>
                 <div id="standings-panel">
                     <h3>Turniertabelle ODJM D 2026</h3>
                     <div id="standings-content">

style.css

@@ -133,11 +133,20 @@ header h1 {
 #board [data-square].last-move-highlight {
   box-shadow: inset 0 0 3px 3px rgba(255, 200, 0, 0.7);
 }
-#pgn-panel {
+#pgn-panel,
+#pgn-panel-mobile {
   width: 100%;
   max-width: 500px;
+}
+#pgn-panel-mobile {
+  display: none;
+}
+.pgn-panel--desktop,
+.pgn-panel--mobile {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 12px;
+}
+.pgn-panel--desktop {
   padding: 12px 16px;
 }
 .pgn-header {
@@ -149,7 +158,7 @@ header h1 {
   font-weight: bold;
   font-size: 0.9rem;
 }
-#copy-pgn-btn {
+.copy-pgn-btn {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #ccc;
@@ -160,10 +169,10 @@ header h1 {
   font-size: 1rem;
   transition: background 0.2s;
 }
-#copy-pgn-btn:hover {
+.copy-pgn-btn:hover {
   background: rgba(255, 255, 255, 0.2);
 }
-#pgn-text {
+.pgn-text {
   font-family: 'Courier New', monospace;
   font-size: 0.78rem;
   line-height: 1.5;
@@ -198,14 +207,16 @@ header h1 {
 }
 #moves-panel,
 #all-games-panel,
-#standings-panel {
+#standings-panel,
+#pgn-panel-mobile {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 12px;
   padding: 16px;
 }
 #moves-panel h3,
 #all-games-panel h3,
-#standings-panel h3 {
+#standings-panel h3,
+#pgn-panel-mobile h3 {
   margin-bottom: 12px;
   color: #e94560;
   font-size: 1rem;
@@ -377,17 +388,77 @@ header h1 {
   background: #e94560;
   border-radius: 3px;
 }
+.round-info-mobile {
+  display: none;
+}
 /* Responsive */
 @media (max-width: 900px) {
   #main-content {
     flex-direction: column;
     align-items: center;
+    padding: 12px;
   }
   #info-section {
     flex: none;
     width: 100%;
     max-width: 500px;
   }
+  html,
+  body {
+    overflow-x: hidden;
+  }
+  #board-section {
+    width: 100%;
+    align-items: stretch;
+  }
+  #board,
+  .player-info {
+    max-width: 100%;
+    width: 100%;
+  }
+  #board {
+    overflow: hidden;
+  }
+  #board > div {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .round-info-mobile {
+    display: block;
+    width: 100%;
+    max-width: 500px;
+    font-size: 1.3rem;
+    color: #e94560;
+    margin: 0 auto;
+  }
+  #round-info {
+    display: none;
+  }
+  #result-info {
+    display: none;
+  }
+  .pgn-panel--desktop {
+    display: none;
+  }
+  #pgn-panel-mobile {
+    display: block;
+  }
+  .player-info {
+    padding: 8px 12px;
+  }
+  .player-avatar {
+    width: 36px;
+    height: 36px;
+    font-size: 1.4rem;
+  }
+  .player-name {
+    font-size: 0.95rem;
+  }
+  .player-clock {
+    font-size: 1.1rem;
+    min-width: 80px;
+    padding: 4px 8px;
+  }
   header h1 {
     font-size: 1.2rem;
   }

style.less

@@ -85,14 +85,14 @@ header {
 }
 
 /* Board Section */
-#board-section {
+    #board-section {
         flex: 1;
         min-width: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 12px;
-}
+    }
 
 .player-info {
     display: flex;
@@ -163,11 +163,22 @@ header {
     }
 }
 
-#pgn-panel {
+#pgn-panel, #pgn-panel-mobile {
     width: 100%;
     max-width: 500px;
+}
+
+#pgn-panel-mobile {
+    display: none;
+}
+
+.pgn-panel--desktop,
+.pgn-panel--mobile {
     background: @bg-dark;
     border-radius: 12px;
+}
+
+.pgn-panel--desktop {
     padding: 12px 16px;
 }
 
@@ -181,7 +192,7 @@ header {
     font-size: 0.9rem;
 }
 
-#copy-pgn-btn {
+.copy-pgn-btn {
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: #ccc;
@@ -197,7 +208,7 @@ header {
     }
 }
 
-#pgn-text {
+.pgn-text {
     font-family: @font-mono;
     font-size: 0.78rem;
     line-height: 1.5;
@@ -234,7 +245,7 @@ header {
     border-radius: 8px;
 }
 
-#moves-panel, #all-games-panel, #standings-panel {
+#moves-panel, #all-games-panel, #standings-panel, #pgn-panel-mobile {
     background: @bg-dark;
     border-radius: 12px;
     padding: 16px;
@@ -440,11 +451,16 @@ header {
     border-radius: 3px;
 }
 
+.round-info-mobile {
+    display: none;
+}
+
 /* Responsive */
 @media (max-width: 900px) {
     #main-content {
         flex-direction: column;
         align-items: center;
+        padding: 12px;
     }
 
     #info-section {
@@ -453,6 +469,75 @@ header {
         max-width: 500px;
     }
 
+    html, body {
+        overflow-x: hidden;
+    }
+
+    #board-section {
+        width: 100%;
+        align-items: stretch;
+    }
+
+    #board,
+    .player-info {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    #board {
+        overflow: hidden;
+    }
+
+    #board > div {
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    .round-info-mobile {
+        display: block;
+        width: 100%;
+        max-width: 500px;
+        font-size: 1.3rem;
+        color: @primary;
+        margin: 0 auto;
+    }
+
+    #round-info {
+        display: none;
+    }
+
+    #result-info {
+        display: none;
+    }
+
+    .pgn-panel--desktop {
+        display: none;
+    }
+
+    #pgn-panel-mobile {
+        display: block;
+    }
+
+    .player-info {
+        padding: 8px 12px;
+    }
+
+    .player-avatar {
+        width: 36px;
+        height: 36px;
+        font-size: 1.4rem;
+    }
+
+    .player-name {
+        font-size: 0.95rem;
+    }
+
+    .player-clock {
+        font-size: 1.1rem;
+        min-width: 80px;
+        padding: 4px 8px;
+    }
+
     header h1 {
         font-size: 1.2rem;
     }