Swipper mit Pfeilen bestückt

index.php

@@ -26,7 +26,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_score'])) {
 }
 
 // --- DATEN ABFRAGEN ---
-// ÄNDERUNG: JOIN hinzugefügt, um den Typ-Namen zu erhalten
 $sqlGames = "SELECT s.*, t.bezeichnung as typ_name 
              FROM spiele s 
              LEFT JOIN game_typen t ON s.typ_id = t.id 
@@ -52,7 +51,6 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
     <title>EXIT - Dashboard</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <style>
-        /* THEME VARIABLEN */
         :root { 
             --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
             --input-bg: #fff; --footer-bg: #f1f1f1; --success: #27ae60;
@@ -77,10 +75,59 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
 
         .theme-toggle { background: var(--card); border: 1px solid var(--border); color: var(--text); width: 42px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
 
-        .swiper { width: 100%; padding-top: 10px; padding-bottom: 40px; }
+        /* --- SWIPER LAYOUT MIT TRANSPARENTEN PFEILEN OHNE KREIS --- */
+        .swiper-outer-wrapper {
+            position: relative;
+            width: 100%;
+            padding: 0 50px; /* Platz für die Pfeile neben dem Banner */
+            box-sizing: border-box;
+            margin-bottom: 40px;
+        }
+
+        .swiper { width: 100%; padding-top: 10px; }
         .swiper-slide { width: 320px; height: auto; }
         .swiper-pagination-progressbar { background: var(--border) !important; height: 4px !important; top: 0 !important; }
         .swiper-pagination-progressbar-fill { background: var(--accent) !important; }
+        
+        /* Die Pfeil-Buttons angepasst */
+        .swiper-button-next, .swiper-button-prev { 
+            color: var(--text); /* Nutzt Standard-Textfarbe oder Akzentfarbe */
+            background: none;   /* Kreis entfernen */
+            width: auto;        /* Breite automatisch */
+            height: auto;       /* Höhe automatisch */
+            box-shadow: none;   /* Schatten entfernen */
+            border: none;       /* Rahmen entfernen */
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 10;
+            margin-top: 0;
+            opacity: 0.5;       /* Transparent setzen */
+            transition: all 0.3s ease;
+        }
+
+        /* Hover-Effekt: Farbe ändern und Deckkraft erhöhen */
+        .swiper-button-next:hover, .swiper-button-prev:hover {
+            color: var(--accent);
+            opacity: 1;
+            background: none;
+            transform: translateY(-50%) scale(1.1);
+        }
+
+        .swiper-button-prev { left: 10px; }
+        .swiper-button-next { right: 10px; }
+
+        /* Pfeilspitzen-Größe (angepasst für Icon-Look) */
+        .swiper-button-next:after, .swiper-button-prev:after { 
+            font-size: 40px;    /* Etwas größer, da der Kreis weg ist */
+            font-weight: bold; 
+        }
+
+        /* Auf kleinen Geräten Pfeile ausblenden für mehr Platz */
+        @media (max-width: 768px) {
+            .swiper-outer-wrapper { padding: 0 10px; }
+            .swiper-button-next, .swiper-button-prev { display: none; }
+        }
 
         .card { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; height: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
         .card img { width: 100%; height: 180px; object-fit: cover; opacity: 0.9; }
@@ -133,37 +180,41 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
         <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
     </header>
 
-    <div class="swiper mySwiper">
-        <div class="swiper-pagination"></div>
-        <div class="swiper-wrapper">
-            <?php foreach ($exitGames as $game): 
-                $lvl_class = (empty($game['level']) || strtolower($game['level']) == 'unknown') ? 'unknown' : $game['level'];
-            ?>
-                <div class="swiper-slide">
-                    <div class="card">
-                        <img src="<?= htmlspecialchars($game['bild_url']) ?>" alt="Cover" onerror="this.src='https://via.placeholder.com/320x180?text=Kein+Bild'">
-                        <div class="content">
-                            <span class="badge level-<?= $lvl_class ?>"><?= htmlspecialchars($game['level'] ?: 'Unbekannt') ?></span>
-                            <h2><?= htmlspecialchars($game['titel']) ?></h2>
-                            <table class="stats">
-                                <?php 
-                                $found = false;
-                                foreach ($allScores as $entry): 
-                                    if ($entry['spiel_id'] == $game['id']): $found = true; ?>
-                                    <tr>
-                                        <td><strong><?= htmlspecialchars($entry['spieler_name']) ?></strong></td>
-                                        <td><?= $entry['zeit'] ?>'</td>
-                                        <td style="color:#f1c40f"><?= $entry['sterne'] ?>★</td>
-                                    </tr>
-                                <?php endif; endforeach; 
-                                if (!$found) echo "<tr><td colspan='3' style='opacity:0.5'>Noch keine Scores.</td></tr>";
-                                ?>
-                            </table>
+    <div class="swiper-outer-wrapper">
+        <div class="swiper mySwiper">
+            <div class="swiper-pagination"></div>
+            <div class="swiper-wrapper">
+                <?php foreach ($exitGames as $game): 
+                    $lvl_class = (empty($game['level']) || strtolower($game['level']) == 'unknown') ? 'unknown' : $game['level'];
+                ?>
+                    <div class="swiper-slide">
+                        <div class="card">
+                            <img src="<?= htmlspecialchars($game['bild_url']) ?>" alt="Cover" onerror="this.src='https://via.placeholder.com/320x180?text=Kein+Bild'">
+                            <div class="content">
+                                <span class="badge level-<?= $lvl_class ?>"><?= htmlspecialchars($game['level'] ?: 'Unbekannt') ?></span>
+                                <h2><?= htmlspecialchars($game['titel']) ?></h2>
+                                <table class="stats">
+                                    <?php 
+                                    $found = false;
+                                    foreach ($allScores as $entry): 
+                                        if ($entry['spiel_id'] == $game['id']): $found = true; ?>
+                                        <tr>
+                                            <td><strong><?= htmlspecialchars($entry['spieler_name']) ?></strong></td>
+                                            <td><?= $entry['zeit'] ?>'</td>
+                                            <td style="color:#f1c40f"><?= $entry['sterne'] ?>★</td>
+                                        </tr>
+                                    <?php endif; endforeach; 
+                                    if (!$found) echo "<tr><td colspan='3' style='opacity:0.5'>Noch keine Scores.</td></tr>";
+                                    ?>
+                                </table>
+                            </div>
                         </div>
                     </div>
-                </div>
-            <?php endforeach; ?>
+                <?php endforeach; ?>
+            </div>
         </div>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
     </div>
 
     <div class="bottom-section">
@@ -231,7 +282,17 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
     if (localStorage.getItem('theme') === 'dark') themeIcon.innerText = '☀️';
 
     new Swiper(".mySwiper", {
-        slidesPerView: "auto", spaceBetween: 20, grabCursor: true, pagination: { el: ".swiper-pagination", type: "progressbar" },
+        slidesPerView: "auto", 
+        spaceBetween: 20, 
+        grabCursor: true, 
+        pagination: { 
+            el: ".swiper-pagination", 
+            type: "progressbar" 
+        },
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
     });
 
     function toggleModal() {