From 715cda4e416f234652e5045af244060b780c86d4 Mon Sep 17 00:00:00 2001
From: VS-Code <->
Date: Fri, 6 Feb 2026 22:14:01 +0100
Subject: [PATCH] added games

---
 games/barcafinal.html | 358 ++++++++++++++++++++++++
 games/fussball.html   | 612 ++++++++++++++++++++++++++++++++++++++++++
 games/index.html      |   8 +
 3 files changed, 978 insertions(+)
 create mode 100644 games/barcafinal.html
 create mode 100644 games/fussball.html
diff --git a/games/barcafinal.html b/games/barcafinal.html
new file mode 100644
index 0000000..793d0cf
--- /dev/null
+++ b/games/barcafinal.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Barça History Master: Final 120 Facts Edition</title>
+    <style>
+        :root {
+            --barca-blue: #004d98;
+            --barca-red: #a50044;
+            --barca-gold: #edbb00;
+            --white: #ffffff;
+            --dark-blue: #002d5a;
+            --glass: rgba(255, 255, 255, 0.1);
+        }
+
+        * { box-sizing: border-box; transition: all 0.3s ease; }
+        body, html {
+            height: 100%; margin: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            background: radial-gradient(circle, var(--barca-blue), var(--dark-blue));
+            color: var(--white); display: flex; justify-content: center; align-items: center; overflow: hidden;
+        }
+
+        .bg-pattern {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-image: linear-gradient(45deg, var(--barca-blue) 25%, transparent 25%), 
+                              linear-gradient(-45deg, var(--barca-blue) 25%, transparent 25%), 
+                              linear-gradient(45deg, transparent 75%, var(--barca-blue) 75%), 
+                              linear-gradient(-45deg, transparent 75%, var(--barca-blue) 75%);
+            background-size: 100px 100px; opacity: 0.1; z-index: -1;
+        }
+
+        #menu-screen { width: 90%; max-width: 1100px; text-align: center; }
+        h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -2px; text-shadow: 0 10px 20px rgba(0,0,0,0.5); margin-bottom: 40px; }
+        h1 span { color: var(--barca-gold); }
+
+        .category-grid {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 25px;
+        }
+
+        .cat-card {
+            background: var(--glass); backdrop-filter: blur(15px);
+            border: 2px solid rgba(255,255,255,0.1); border-radius: 30px;
+            padding: 40px 20px; cursor: pointer; border-bottom: 6px solid var(--barca-gold);
+        }
+
+        .cat-card:hover { transform: translateY(-15px); background: rgba(255,255,255,0.2); border-color: var(--white); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
+        .cat-card h2 { font-size: 1.8rem; margin: 15px 0; color: var(--barca-gold); }
+
+        #quiz-card {
+            display: none; width: 95%; max-width: 900px; height: 85vh;
+            background: rgba(255, 255, 255, 0.98); color: #1a1a1a; border-radius: 40px;
+            box-shadow: 0 50px 100px rgba(0,0,0,0.6); overflow: hidden;
+            flex-direction: column; border: 4px solid var(--barca-gold);
+        }
+
+        .quiz-header {
+            background: linear-gradient(to right, var(--barca-blue), var(--barca-red));
+            color: #fff; padding: 25px 40px; display: flex; justify-content: space-between; align-items: center;
+        }
+
+        .difficulty-container {
+            padding: 15px 0; display: flex; justify-content: center; align-items: center;
+        }
+
+        .difficulty-badge {
+            font-size: 1.2rem; font-weight: 800; padding: 8px 25px; border-radius: 50px;
+            text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+        }
+        .diff-leicht { background: #e8f5e9; color: #2e7d32; border: 2px solid #2e7d32; }
+        .diff-mittel { background: #fff3e0; color: #ef6c00; border: 2px solid #ef6c00; }
+        .diff-schwer { background: #ffebee; color: #c62828; border: 2px solid #c62828; }
+
+        .quiz-content { padding: 40px; flex-grow: 1; text-align: center; }
+        .question { font-size: 1.8rem; font-weight: 800; color: var(--dark-blue); margin-bottom: 35px; min-height: 80px; }
+
+        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+        button.opt {
+            padding: 20px; font-size: 1.1rem; font-weight: 700; background: #f5f7fa;
+            border: 2px solid #e1e8ed; border-radius: 20px; cursor: pointer; color: #333;
+        }
+        button.opt:hover { background: var(--barca-blue); color: white; transform: scale(1.03); }
+        .correct { background: #2ecc71 !important; color: white !important; }
+        .wrong { background: #e74c3c !important; color: white !important; }
+
+        #slot-screen { display: none; padding: 40px; text-align: center; overflow-y: auto; height: 100%; }
+        .slot-box {
+            background: #1a1a1a; padding: 30px; border-radius: 30px; margin: 20px auto;
+            border: 4px solid var(--barca-gold); max-width: 500px;
+        }
+        #slot-val { font-size: 2.2rem; color: var(--barca-gold); font-weight: 900; text-shadow: 0 0 15px var(--barca-gold); height: 50px; }
+
+        .rank-table {
+            width: 100%; max-width: 500px; margin: 30px auto; border-radius: 20px; overflow: hidden;
+            border-collapse: collapse; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        .rank-table th { background: var(--barca-blue); color: white; padding: 15px; }
+        .rank-table td { padding: 15px; border-bottom: 1px solid #eee; color: #333; font-weight: 600; }
+        .rank-active { background: var(--barca-gold) !important; color: #000 !important; transform: scale(1.05); }
+
+        .btn-restart {
+            margin-top: 20px; padding: 15px 40px; background: var(--barca-red); color: white;
+            border: none; border-radius: 50px; font-weight: 900; cursor: pointer; text-transform: uppercase;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="bg-pattern"></div>
+
+    <div id="menu-screen">
+        <h1><span>MÉS QUE UN</span> QUIZ</h1>
+        <div class="category-grid">
+            <div class="cat-card" onclick="startQuiz('90')">
+                <h2>1990 - 2000</h2>
+                <p>Das Dream Team & Wembley '92</p>
+            </div>
+            <div class="cat-card" onclick="startQuiz('00')">
+                <h2>2000 - 2010</h2>
+                <p>Ronaldinho & Pep-Revolution</p>
+            </div>
+            <div class="cat-card" onclick="startQuiz('10')">
+                <h2>2010 - HEUTE</h2>
+                <p>MSN & Die goldene Ära</p>
+            </div>
+        </div>
+    </div>
+
+    <div id="quiz-card">
+        <div id="quiz-main" style="display: flex; flex-direction: column; height: 100%;">
+            <div class="quiz-header">
+                <span id="era-label" style="font-weight: 900; font-size: 1.2rem;">KATEGORIE</span>
+                <span id="progress" style="font-weight: 900; font-size: 1.4rem;">1 / 20</span>
+            </div>
+            <div class="difficulty-container">
+                <div id="diff-tag" class="difficulty-badge">Mittel</div>
+            </div>
+            <div class="quiz-content">
+                <div class="question" id="q-text">Lade Frage...</div>
+                <div class="options-grid" id="opt-container"></div>
+            </div>
+        </div>
+
+        <div id="slot-screen">
+            <h1 style="color: #1a1a1a; font-size: 2.5rem; margin-bottom: 10px;">DEIN RESULTAT</h1>
+            <div class="slot-box">
+                <div id="slot-val">???</div>
+                <button class="btn-restart" id="lever" onclick="runSlot()" style="background: var(--barca-blue); margin-top: 25px;">Zieh den Hebel</button>
+            </div>
+            
+            <table class="rank-table">
+                <thead><tr><th>Rang</th><th>Korrekte Antworten</th></tr></thead>
+                <tbody>
+                    <tr id="r-4"><td>THE GOAT 🐐</td><td>19 - 20</td></tr>
+                    <tr id="r-3"><td>BARÇA LEGENDE 🏆</td><td>16 - 18</td></tr>
+                    <tr id="r-2"><td>STAMMSPIELER ⚽</td><td>12 - 15</td></tr>
+                    <tr id="r-1"><td>TREUER FAN 🏟️</td><td>6 - 11</td></tr>
+                    <tr id="r-0"><td>PLASTIKFAN 🤡</td><td>0 - 5</td></tr>
+                </tbody>
+            </table>
+            <p style="color: #333; font-weight: 900; font-size: 1.5rem;">SCORE: <span id="final-score" style="color: var(--barca-red);">0</span> / 20</p>
+            <button onclick="location.reload()" class="btn-restart">Hauptmenü</button>
+        </div>
+    </div>
+
+<script>
+    const questions = {
+        '90': [
+            {q:"Wer erzielte das Freistoßtor im CL-Finale 1992 gegen Sampdoria?", a:["Ronald Koeman","Hristo Stoichkov","José Mari Bakero","Michael Laudrup"], c:0, d:"Leicht"},
+            {q:"Wie viele La-Liga-Titel gewann das Dream Team unter Johan Cruyff in Folge?", a:["Zwei","Drei","Vier","Fünf"], c:2, d:"Mittel"},
+            {q:"Welcher brasilianische Stürmer kam 1993 vom PSV Eindhoven?", a:["Ronaldo","Romário","Rivaldo","Sonny Anderson"], c:1, d:"Leicht"},
+            {q:"Wer löste Johan Cruyff im Jahr 1996 als Trainer ab?", a:["Louis van Gaal","Bobby Robson","Radomir Antić","Terry Venables"], c:1, d:"Mittel"},
+            {q:"Welchen Spitznamen hatte Hristo Stoichkov aufgrund seines Temperaments?", a:["El Mago","El Pistolero","El Búlgaro","Der Dolch"], c:2, d:"Leicht"},
+            {q:"Gegen wen verlor Barca das bittere CL-Finale 1994 mit 0:4?", a:["Juventus Turin","AC Mailand","Ajax Amsterdam","Real Madrid"], c:1, d:"Mittel"},
+            {q:"In welchem Jahr feierte der FC Barcelona sein 100-jähriges Bestehen?", a:["1998","1999","2000","1997"], c:1, d:"Leicht"},
+            {q:"Welche Nummer trug Pep Guardiola primär im Dream Team?", a:["Nr. 4","Nr. 6","Nr. 8","Nr. 10"], c:0, d:"Mittel"},
+            {q:"Welcher Star wechselte im Jahr 2000 für eine Rekordsumme zu Real Madrid?", a:["Rivaldo","Luís Figo","Luis Enrique","Patrick Kluivert"], c:1, d:"Leicht"},
+            {q:"Wer erzielte 1996/97 unglaubliche 47 Tore in einer einzigen Saison?", a:["Ronaldo (R9)","Romário","Rivaldo","Luis Enrique"], c:0, d:"Leicht"},
+            {q:"Wer war der Kapitän beim ersten CL-Sieg der Vereinsgeschichte 1992?", a:["Andoni Zubizarreta","José Ramón Alexanko","José Mari Bakero","Pep Guardiola"], c:1, d:"Schwer"},
+            {q:"Aus welchem Land kam der Spielmacher Michael Laudrup?", a:["Schweden","Dänemark","Norwegen","Niederlande"], c:1, d:"Leicht"},
+            {q:"Wer erzielte den entscheidenden Hattrick beim 5:0 im Clásico 1994?", a:["Romário","Stoichkov","Iván Iglesias","Bakero"], c:0, d:"Schwer"},
+            {q:"Welcher niederländische Trainer kam 1997 und brachte viele Ajax-Stars mit?", a:["Frank Rijkaard","Louis van Gaal","Dick Advocaat","Guus Hiddink"], c:1, d:"Leicht"},
+            {q:"Wer war der Stammtorhüter von 1986 bis 1994?", a:["Vítor Baía","Andoni Zubizarreta","Carles Busquets","Ruud Hesp"], c:1, d:"Mittel"},
+            {q:"Gegen wen gewann Barca das Finale der Pokalsieger 1997?", a:["Paris Saint-Germain","FC Liverpool","FC Arsenal","FC Porto"], c:0, d:"Schwer"},
+            {q:"Welcher Star kam 1997 als direkter Ersatz für Ronaldo von La Coruña?", a:["Rivaldo","Djalminha","Flávio Conceição","Bebeto"], c:0, d:"Mittel"},
+            {q:"Welche Nationalität hat Gheorghe Popescu (Kapitän 1996/97)?", a:["Bulgarisch","Rumänisch","Ungarisch","Kroatisch"], c:1, d:"Schwer"},
+            {q:"In welchem Londoner Stadion gewann Barca 1992 den Europapokal?", a:["Highbury","Wembley","Stamford Bridge","White Hart Lane"], c:1, d:"Leicht"},
+            {q:"Wie viele Tore schoss Romário in der La Liga Saison 93/94?", a:["26","30","34","38"], c:1, d:"Schwer"},
+            {q:"Wer war der Vizepräsident und Nachfolger von Josep Lluís Núñez im Jahr 2000?", a:["Joan Laporta","Joan Gaspart","Sandro Rosell","Enric Reyna"], c:1, d:"Schwer"},
+            {q:"Welcher Verteidiger trug den Spitznamen 'Tarzan'?", a:["Migueli","Albert Ferrer","Sergi Barjuán","Nadal"], c:0, d:"Schwer"},
+            {q:"Wer war der Übersetzer und Co-Trainer von Bobby Robson?", a:["Pep Guardiola","José Mourinho","Luis Enrique","Tito Vilanova"], c:1, d:"Mittel"},
+            {q:"Welcher niederländische Flügelstürmer kam 2000 für eine hohe Ablöse von Arsenal?", a:["Marc Overmars","Patrick Kluivert","Boudewijn Zenden","Philip Cocu"], c:0, d:"Mittel"},
+            {q:"Welcher Torwart hielt 1997-2000 den Kasten sauber?", a:["Ruud Hesp","Pepe Reina","Vítor Baía","Francesc Arnau"], c:0, d:"Schwer"},
+            {q:"Wer schoss das Goldene Tor im Finale der Pokalsieger 1997 per Elfmeter?", a:["Luís Figo","Ronaldo","Luis Enrique","Ivan de la Peña"], c:1, d:"Mittel"},
+            {q:"Welcher Star wechselte 1996 von Real Madrid direkt zum FC Barcelona?", a:["Luis Enrique","Michael Laudrup","Luís Figo","Gheorghe Hagi"], c:0, d:"Leicht"},
+            {q:"Wer erzielte das Tor des Jahrhunderts gegen Compostela 1996?", a:["Rivaldo","Ronaldo","Ronaldinho","Romário"], c:1, d:"Mittel"},
+            {q:"Aus welchem Land kam der Verteidiger Patrik Andersson (Ende der 90er)?", a:["Dänemark","Schweden","Norwegen","Finnland"], c:1, d:"Schwer"},
+            {q:"Gegen wen sicherte sich Barca 1999 am 100. Geburtstag die Meisterschaft?", a:["Real Madrid","Deportivo La Coruña","Deportivo Alavés","Atletico Madrid"], c:2, d:"Schwer"},
+            {q:"Welcher spätere Welttrainer spielte im Mittelfeld neben Guardiola?", a:["Luis Enrique","Luis Milla","Eusebio Sacristán","Guillermo Amor"], c:0, d:"Mittel"},
+            {q:"Was war die Besonderheit am CL-Trikot 1992?", a:["Es war Orange","Es hatte Kragen","Es war Weiß","Es hatte keine Streifen"], c:0, d:"Leicht"},
+            {q:"Wer war der Star-Einkauf aus Finnland im Jahr 1999?", a:["Jari Litmanen","Sami Hyypiä","Mikael Forssell","Teemu Pukki"], c:0, d:"Mittel"},
+            {q:"Welcher Außenverteidiger trug die Nummer 2 im Dream Team?", a:["Albert Ferrer","Sergi Barjuán","Nando","Juan Carlos"], c:0, d:"Schwer"},
+            {q:"Wie oft wurde Barca in den 90ern spanischer Meister?", a:["4 Mal","5 Mal","6 Mal","7 Mal"], c:2, d:"Schwer"},
+            {q:"Wer schoss 1992 im Halbfinale gegen Benfica das wichtige 1:0?", a:["Bakero","Stoichkov","Laudrup","Begiristain"], c:1, d:"Schwer"},
+            {q:"Welche Marke löste Kappa 1998 als Ausrüster ab?", a:["Adidas","Nike","Puma","Meyba"], c:1, d:"Leicht"},
+            {q:"Welcher Verteidiger war der Onkel von Tennis-Star Rafael Nadal?", a:["Miguel Ángel Nadal","Abelardo","Sergi","Nando"], c:0, d:"Mittel"},
+            {q:"Wer erzielte den entscheidenden Treffer im Finale der Copa del Rey 1997 (3:2 gegen Betis)?", a:["Pizzi","Figo","Luis Enrique","Ronaldo"], c:1, d:"Schwer"},
+            {q:"Welcher Star verließ Barca 1994 Richtung Real Madrid?", a:["Michael Laudrup","Robert Prosinečki","Luis Milla","Gheorghe Hagi"], c:0, d:"Mittel"}
+        ],
+        '00': [
+            {q:"Wer kam 2003 für ca. 30 Mio. Euro von Paris Saint-Germain?", a:["David Beckham","Ronaldinho","Ricardo Quaresma","Samuel Eto'o"], c:1, d:"Leicht"},
+            {q:"Gegen wen gewann Barca das Champions-League-Finale 2006?", a:["Manchester United","Arsenal London","FC Chelsea","AC Mailand"], c:1, d:"Leicht"},
+            {q:"Wer schoss das 2:1 Siegtor im CL-Finale 2006?", a:["Samuel Eto'o","Juliano Belletti","Henrik Larsson","Ludovic Giuly"], c:1, d:"Mittel"},
+            {q:"In welchem Jahr gewann der FC Barcelona das erste 'Sextuple'?", a:["2008","2009","2010","2011"], c:1, d:"Leicht"},
+            {q:"Welcher Trainer startete 2008 die Ära des Tiki-Taka?", a:["Frank Rijkaard","Pep Guardiola","Luis Enrique","Tito Vilanova"], c:1, d:"Leicht"},
+            {q:"Welche Rückennummer trug Lionel Messi bei seinem Profi-Debüt?", a:["Nr. 10","Nr. 19","Nr. 30","Nr. 14"], c:2, d:"Mittel"},
+            {q:"Wer erzielte im CL-Halbfinale 2009 das 'Iniestazo'-Tor an der Stamford Bridge?", a:["Lionel Messi","Andrés Iniesta","Xavi","Samuel Eto'o"], c:1, d:"Leicht"},
+            {q:"Gegen wen erzielte Messi 2007 sein legendäres Solo-Tor (wie Maradona)?", a:["Real Madrid","Getafe CF","RCD Espanyol","FC Valencia"], c:1, d:"Mittel"},
+            {q:"Wer war der Kapitän während der gesamten Ära Guardiola?", a:["Xavi","Carles Puyol","Andrés Iniesta","Víctor Valdés"], c:1, d:"Leicht"},
+            {q:"Welcher Stürmer kam 2004 von RCD Mallorca?", a:["Henrik Larsson","Samuel Eto'o","Maxi López","Santi Ezquerro"], c:1, d:"Leicht"},
+            {q:"Aus welchem Club kam Deco im Jahr 2004?", a:["FC Porto","Benfica Lissabon","Sporting Lissabon","Real Madrid"], c:0, d:"Mittel"},
+            {q:"Wer schoss das erste Tor im CL-Finale 2009 gegen Manchester United?", a:["Lionel Messi","Samuel Eto'o","Thierry Henry","Andrés Iniesta"], c:1, d:"Mittel"},
+            {q:"Welcher Sponsor stand ab 2006 erstmals auf dem Trikot (für den guten Zweck)?", a:["Qatar Airways","UNICEF","Rakuten","Beko"], c:1, d:"Leicht"},
+            {q:"Wer kam 2008 vom FC Sevilla als Rechtsverteidiger?", a:["Dani Alves","Adriano","Maxwell","Belletti"], c:0, d:"Leicht"},
+            {q:"Wer war der Torwart beim Champions-League-Sieg 2006?", a:["Rustu Reçber","Víctor Valdés","José Manuel Pinto","Pepe Reina"], c:1, d:"Mittel"},
+            {q:"Wer wechselte 2009 im Tausch für Samuel Eto'o nach Barcelona?", a:["David Villa","Zlatan Ibrahimović","Thierry Henry","Diego Forlán"], c:1, d:"Leicht"},
+            {q:"Aus welchem Land kommt der Verteidiger Rafael Márquez?", a:["Brasilien","Mexiko","Argentinien","Kolumbien"], c:1, d:"Leicht"},
+            {q:"Welcher Isländer spielte von 2006 bis 2009 bei Barca?", a:["Eidur Gudjohnsen","Gylfi Sigurdsson","Aron Gunnarsson","Alfreð Finnbogason"], c:0, d:"Mittel"},
+            {q:"Wer bereitete im Finale 2006 beide Tore nach seiner Einwechslung vor?", a:["Andrés Iniesta","Henrik Larsson","Mark van Bommel","Xavi"], c:1, d:"Schwer"},
+            {q:"Wer war der Präsident von 2003 bis 2010?", a:["Sandro Rosell","Joan Laporta","Joan Gaspart","Josep Maria Bartomeu"], c:1, d:"Leicht"},
+            {q:"Gegen wen feierte Barca 2009 den historischen 6:2 Auswärtssieg?", a:["Atletico Madrid","Real Madrid","Espanyol Barcelona","FC Sevilla"], c:1, d:"Leicht"},
+            {q:"Welcher Mittelfeldspieler kam 2005 vom PSV Eindhoven?", a:["Mark van Bommel","Ibrahim Afellay","Philip Cocu","Park Ji-sung"], c:0, d:"Schwer"},
+            {q:"In welchem Stadion gewann Barca das CL-Finale 2006?", a:["Wembley","Stade de France","San Siro","Olympiastadion Berlin"], c:1, d:"Mittel"},
+            {q:"Wer erzielte im Clásico 2005 im Bernabéu zwei Tore und bekam Standing Ovations?", a:["Lionel Messi","Ronaldinho","Samuel Eto'o","Xavi"], c:1, d:"Mittel"},
+            {q:"Welche Nummer trug Thierry Henry bei Barca?", a:["Nr. 9","Nr. 14","Nr. 7","Nr. 12"], c:1, d:"Leicht"},
+            {q:"Welcher Argentinier kam 2001 für eine Rekordsumme von River Plate?", a:["Juan Román Riquelme","Javier Saviola","Pablo Aimar","Gabriel Milito"], c:1, d:"Schwer"},
+            {q:"Wer war Trainer vor Frank Rijkaard (Saison 2002/03)?", a:["Louis van Gaal","Radomir Antić","Carles Rexach","Llorenç Serra Ferrer"], c:1, d:"Schwer"},
+            {q:"Wer schoss den Kopfballtreffer zum 2:0 im Finale 2009?", a:["Samuel Eto'o","Gerard Piqué","Lionel Messi","Carles Puyol"], c:2, d:"Mittel"},
+            {q:"Welcher Brasilianer kam 2001 von Cruzeiro und galt als Flop?", a:["Geovanni","Fabio Rochemback","Douglas","Keirrison"], c:1, d:"Schwer"},
+            {q:"Wie oft wurde Ronaldinho während seiner Zeit bei Barca Weltfußballer?", a:["1 Mal","2 Mal","3 Mal","Kein Mal"], c:1, d:"Mittel"},
+            {q:"Wer war 2003 der Trainer-Favorit von Gegenkandidat Lluis Bassat?", a:["Frank Rijkaard","Ronald Koeman","Pep Guardiola","Guus Hiddink"], c:1, d:"Schwer"},
+            {q:"Welcher Franzose trug die Nummer 8 vor Andrés Iniesta?", a:["Ludovic Giuly","Christophe Dugarry","Philippe Christanval","Emmanuel Petit"], c:0, d:"Schwer"},
+            {q:"Aus welchem Verein kam Gerard Piqué 2008 zurück nach Hause?", a:["Manchester United","Arsenal London","Real Saragossa","FC Liverpool"], c:0, d:"Leicht"},
+            {q:"Wer erzielte 2005 das erste offizielle Tor für Messi (Vorlage Ronaldinho)?", a:["Albacete","Getafe","Sevilla","Malaga"], c:0, d:"Schwer"},
+            {q:"Welcher Nationalität ist Edgar Davids (Leihe 2004)?", a:["Suriname","Niederlande","Belgien","Frankreich"], c:1, d:"Mittel"},
+            {q:"Wie hieß der Co-Trainer von Frank Rijkaard?", a:["Henk ten Cate","Tito Vilanova","Juan Carlos Unzué","Eusebio"], c:0, d:"Schwer"},
+            {q:"Welcher Star kam 2006 vom Absteiger Juventus Turin?", a:["Lilian Thuram","Zlatan Ibrahimovic","Fabio Cannavaro","David Trezeguet"], c:0, d:"Mittel"},
+            {q:"Wer schoss das entscheidende Tor zur Meisterschaft 2005 gegen Levante?", a:["Samuel Eto'o","Ronaldinho","Ludovic Giuly","Xavi"], c:0, d:"Schwer"},
+            {q:"Welcher Mittelfeldspieler trug die Nummer 20 unter Rijkaard?", a:["Deco","Edmilson","Motta","Van Bommel"], c:0, d:"Mittel"},
+            {q:"Wer war der Stammtorwart in der Katastrophensaison 2002/03?", a:["Roberto Bonano","Víctor Valdés","Robert Enke","Pepe Reina"], c:0, d:"Schwer"}
+        ],
+        '10': [
+            {q:"Wer bildete das legendäre 'MSN'-Angriffstrio?", a:["Messi, Suarez, Neymar","Messi, Suarez, Pedro","Messi, Villa, Sanchez","Messi, Neymar, Griezmann"], c:0, d:"Leicht"},
+            {q:"Wer war der Trainer beim zweiten Triple-Gewinn im Jahr 2015?", a:["Pep Guardiola","Luis Enrique","Tito Vilanova","Gerardo Martino"], c:1, d:"Leicht"},
+            {q:"Gegen welchen Club gelang die historische 'Remontada' (6:1) im Jahr 2017?", a:["Bayern München","Paris Saint-Germain","Manchester City","Juventus Turin"], c:1, d:"Leicht"},
+            {q:"Wie viele Tore erzielte Lionel Messi im Kalenderjahr 2012 (Weltrekord)?", a:["85 Tore","91 Tore","73 Tore","95 Tore"], c:1, d:"Leicht"},
+            {q:"Wer kam 2014 vom FC Liverpool als neuer Top-Stürmer?", a:["Philippe Coutinho","Luis Suárez","Raheem Sterling","Sadio Mané"], c:1, d:"Leicht"},
+            {q:"Gegen wen gewann Barcelona das CL-Finale 2015 in Berlin?", a:["Juventus Turin","Real Madrid","FC Bayern","Manchester United"], c:0, d:"Mittel"},
+            {q:"Wer erzielte das Tor zum 1:0 im CL-Finale 2015?", a:["Luis Suárez","Ivan Rakitić","Neymar","Lionel Messi"], c:1, d:"Mittel"},
+            {q:"Welcher deutsche Torhüter wurde 2014 als Nachfolger von Valdés verpflichtet?", a:["Marc-André ter Stegen","Bernd Leno","Manuel Neuer","Kevin Trapp"], c:0, d:"Leicht"},
+            {q:"Wer trug die Nummer 10 direkt nach Lionel Messis Abgang 2021?", a:["Pedri","Ansu Fati","Gavi","Ferran Torres"], c:1, d:"Mittel"},
+            {q:"In welchem Jahr verließ Lionel Messi den Verein Richtung Paris?", a:["2020","2021","2022","2019"], c:1, d:"Leicht"},
+            {q:"Wer war der Trainer beim 2:8-Debakel gegen Bayern München?", a:["Ernesto Valverde","Quique Setién","Ronald Koeman","Xavi"], c:1, d:"Mittel"},
+            {q:"Wer schoss im CL-Finale 2011 das Tor zum 2:1 gegen ManUnited?", a:["Pedro","Lionel Messi","David Villa","Xavi"], c:1, d:"Mittel"},
+            {q:"Welcher kroatische Mittelfeldspieler kam 2014 vom FC Sevilla?", a:["Luka Modrić","Ivan Rakitić","Mateo Kovačić","Ivan Perišić"], c:1, d:"Leicht"},
+            {q:"Wie hieß der Trainer der Saison 2012/13, der leider 2014 verstarb?", a:["Tata Martino","Tito Vilanova","Luis Enrique","Ernesto Valverde"], c:1, d:"Mittel"},
+            {q:"Aus welchem Club wechselte Neymar im Jahr 2013 nach Barcelona?", a:["FC Santos","Flamengo","FC São Paulo","Palmeiras"], c:0, d:"Leicht"},
+            {q:"Wer war der Kapitän der Mannschaft beim Champions-League-Sieg 2011?", a:["Carles Puyol","Xavi","Lionel Messi","Éric Abidal"], c:1, d:"Schwer"},
+            {q:"Welcher Franzose wechselte 2017 von Dortmund nach Barcelona?", a:["Antoine Griezmann","Ousmane Dembélé","Clément Lenglet","Samuel Umtiti"], c:1, d:"Leicht"},
+            {q:"In welchem Ausweichstadion spielt Barca während der Camp-Nou-Renovierung 2023/24?", a:["Montjuïc (Lluís Companys)","Mini Estadi","Cornellà-El Prat","RCDE Stadium"], c:0, d:"Mittel"},
+            {q:"Wer erzielte im Jahr 2023 das entscheidende Tor zur Meisterschaft gegen Espanyol?", a:["Robert Lewandowski","Alejandro Balde","Ferran Torres","Jules Koundé"], c:0, d:"Schwer"},
+            {q:"Welcher defensive Mittelfeldspieler kam 2010 von Liverpool (Spitzname 'El Jefecito')?", a:["Javier Mascherano","Xabi Alonso","Lucas Leiva","Fabinho"], c:0, d:"Mittel"},
+            {q:"Wie viele Titel gewann Barca in der Debüt-Saison von Luis Enrique?", a:["Zwei","Drei (Triple)","Vier","Sextuple"], c:1, d:"Leicht"},
+            {q:"Gegen wen schoss Sergi Roberto das entscheidende 6:1 Tor?", a:["Kevin Trapp","Salvatore Sirigu","Alphonse Areola","Gianluigi Buffon"], c:0, d:"Schwer"},
+            {q:"Wer kam 2022 ablösefrei vom FC Chelsea für die Abwehr?", a:["Andreas Christensen","Antonio Rüdiger","César Azpilicueta","Marcos Alonso"], c:0, d:"Mittel"},
+            {q:"Welche Nummer trug Xavi in seiner letzten Saison 2014/15?", a:["Nr. 6","Nr. 8","Nr. 4","Nr. 22"], c:0, d:"Leicht"},
+            {q:"Aus welchem Land stammt der Mittelfeldspieler Frenkie de Jong?", a:["Belgien","Niederlande","Dänemark","Deutschland"], c:1, d:"Leicht"},
+            {q:"Wer war der Trainer beim Gewinn der Meisterschaft 2022/23?", a:["Ronald Koeman","Xavi Hernández","Quique Setién","Ernesto Valverde"], c:1, d:"Leicht"},
+            {q:"Welchen Rekord brach Lamine Yamal 2023 bei seinem Debüt?", a:["Jüngster Torschütze","Jüngster Spieler der Geschichte","Schnellster Sprint","Meiste Vorlagen"], c:1, d:"Mittel"},
+            {q:"Wer schoss im Finale 2011 das herrliche Schlenzer-Tor zum 3:1?", a:["David Villa","Lionel Messi","Pedro","Dani Alves"], c:0, d:"Mittel"},
+            {q:"Welcher Sponsor löste 2022 Rakuten auf dem Trikot ab?", a:["Spotify","Apple","Google","Amazon"], c:0, d:"Leicht"},
+            {q:"Wer war der Rekordtransfer des Sommers 2019 (120 Mio.)?", a:["Philippe Coutinho","Antoine Griezmann","João Félix","Frenkie de Jong"], c:1, d:"Mittel"},
+            {q:"Aus welchem Land stammt Ronald Araújo?", a:["Brasilien","Uruguay","Argentinien","Chile"], c:1, d:"Mittel"},
+            {q:"Welcher Torwart hielt im Clásico 2017 (3:2 Sieg) über 10 Bälle?", a:["Claudio Bravo","Marc-André ter Stegen","Neto","Jasper Cillessen"], c:1, d:"Mittel"},
+            {q:"Wer war der sportliche Leiter beim Bau des MSN-Trios?", a:["Andoni Zubizarreta","Eric Abidal","Mateu Alemany","Ramon Planes"], c:0, d:"Schwer"},
+            {q:"Welcher Brasilianer kam 2017 als 'Ersatz' für Neymar für 145 Mio.?", a:["Philippe Coutinho","Malcom","Arthur Melo","Paulinho"], c:0, d:"Leicht"},
+            {q:"Gegen wen verlor Barca 2019 das Halbfinale trotz 3:0 Hinspielsieg?", a:["FC Liverpool","AS Rom","FC Bayern","Real Madrid"], c:0, d:"Leicht"},
+            {q:"Wer ist der Spieler mit den zweitmeisten Einsätzen nach Messi?", a:["Xavi","Sergio Busquets","Andrés Iniesta","Carles Puyol"], c:1, d:"Schwer"},
+            {q:"Welche Nummer trägt Pedri aktuell (seit 2022)?", a:["Nr. 16","Nr. 8","Nr. 10","Nr. 21"], c:1, d:"Mittel"},
+            {q:"Wer war der Präsident während des zweiten Triples (2015)?", a:["Joan Laporta","Josep Maria Bartomeu","Sandro Rosell","Carles Tusquets"], c:1, d:"Schwer"},
+            {q:"Welcher Deutsche wechselte 2023 von Manchester City zu Barca?", a:["İlkay Gündoğan","Leroy Sané","Joshua Kimmich","Timo Werner"], c:0, d:"Leicht"},
+            {q:"Wie hieß der Brasilianer, der 2017 aus China kam und Kritiker verstummen ließ?", a:["Paulinho","Oscar","Hulk","Talisca"], c:0, d:"Schwer"}
+        ]
+    };
+
+    let pool = []; let cur = 0; let score = 0;
+
+    function startQuiz(era) {
+        document.getElementById('menu-screen').style.display = 'none';
+        document.getElementById('quiz-card').style.display = 'flex';
+        document.getElementById('era-label').innerText = era === '90' ? '90ER JAHRE' : era === '00' ? '00ER JAHRE' : 'MODERNE';
+        pool = questions[era].sort(() => Math.random() - 0.5).slice(0, 20);
+        cur = 0; score = 0;
+        show();
+    }
+
+    function show() {
+        const q = pool[cur];
+        document.getElementById('progress').innerText = `${cur + 1} / 20`;
+        document.getElementById('q-text').innerText = q.q;
+        const dt = document.getElementById('diff-tag');
+        dt.innerText = q.d;
+        dt.className = 'difficulty-badge ' + (q.d === 'Leicht' ? 'diff-leicht' : q.d === 'Mittel' ? 'diff-mittel' : 'diff-schwer');
+        const cont = document.getElementById('opt-container');
+        cont.innerHTML = "";
+        q.a.forEach((o, i) => {
+            const b = document.createElement('button');
+            b.className = 'opt'; b.innerText = o;
+            b.onclick = () => {
+                const btns = document.querySelectorAll('.opt');
+                btns.forEach(x => x.disabled = true);
+                if(i === q.c) { b.classList.add('correct'); score++; }
+                else { b.classList.add('wrong'); btns[q.c].classList.add('correct'); }
+                setTimeout(() => { cur++; if(cur < 20) show(); else finish(); }, 1200);
+            };
+            cont.appendChild(b);
+        });
+    }
+
+    function finish() {
+        document.getElementById('quiz-main').style.display = 'none';
+        document.getElementById('slot-screen').style.display = 'block';
+        document.getElementById('final-score').innerText = score;
+    }
+
+    function runSlot() {
+        const s = document.getElementById('slot-val');
+        const l = document.getElementById('lever');
+        l.style.pointerEvents = 'none'; l.style.opacity = '0.5';
+        const r = ["FAN", "PLAYER", "LEGEND", "GOAT"];
+        let c = 0;
+        let t = setInterval(() => { s.innerText = r[c % r.length]; c++; }, 80);
+        setTimeout(() => {
+            clearInterval(t);
+            let rankId = 0; let finalName = "";
+            if(score >= 19) { rankId = 4; finalName = "THE GOAT 🐐"; }
+            else if(score >= 16) { rankId = 3; finalName = "BARÇA LEGENDE 🏆"; }
+            else if(score >= 12) { rankId = 2; finalName = "STAMMSPIELER ⚽"; }
+            else if(score >= 6) { rankId = 1; finalName = "TREUER FAN 🏟️"; }
+            else { rankId = 0; finalName = "PLASTIKFAN 🤡"; }
+            s.innerText = finalName;
+            document.getElementById(`r-${rankId}`).classList.add('rank-active');
+        }, 2000);
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/games/fussball.html b/games/fussball.html
new file mode 100644
index 0000000..9d2fa86
--- /dev/null
+++ b/games/fussball.html
@@ -0,0 +1,612 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elfmeterschießen Simulator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #222;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: white;
+            overflow: hidden;
+        }
+
+        #game-container {
+            position: relative;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            border: 4px solid #fff;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        canvas {
+            display: block;
+            background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 30%, #2E8B57 30%, #228B22 100%);
+            cursor: crosshair;
+        }
+
+        #ui-overlay {
+            position: absolute;
+            top: 20px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            pointer-events: none;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 24px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        #score-board {
+            font-size: 18px;
+            margin-top: 5px;
+            font-weight: bold;
+            color: #ffeb3b;
+        }
+
+        #message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 48px;
+            font-weight: 900;
+            opacity: 0;
+            transition: opacity 0.3s;
+            text-shadow: 0 0 10px rgba(0,0,0,0.5);
+            pointer-events: none;
+        }
+
+        .instruction {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 14px;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="game-container">
+        <canvas id="gameCanvas" width="800" height="600"></canvas>
+        
+        <div id="ui-overlay">
+            <h1>Elfmeter Simulator</h1>
+            <div id="score-board">Tore: 0 | Versuche: 0</div>
+        </div>
+
+        <div id="message">TOOR!</div>
+        <div class="instruction">Klicke irgendwo ins Tor, um zu schießen!</div>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const messageEl = document.getElementById('message');
+        const scoreEl = document.getElementById('score-board');
+
+        // Zuschauer-Daten (statisch)
+        const spectators = [];
+
+        // Spielzustand
+        let score = 0;
+        let attempts = 0;
+        let isBallFlying = false;
+        let showMessageTimer = null;
+        let frameCount = 0; // Für Animationen
+
+        // Ball Physik
+        const startBallY = 520;
+        const startBallX = 400;
+        const ball = {
+            x: startBallX,
+            y: startBallY,
+            z: 0, 
+            radius: 15,
+            targetX: 0,
+            targetY: 0,
+            speed: 0
+        };
+
+        // Torwart (Verbessert)
+        const goalie = {
+            x: 400,
+            baseY: 230, // Bodenlinie
+            y: 230,     // Aktuelle Y Position
+            width: 50,  // Körperbreite
+            height: 90,
+            speed: 1.5,
+            direction: 1,
+            diveTargetX: 0,
+            diveTargetY: 0,
+            isDiving: false,
+            angle: 0    // Rotation für Hechtsprung
+        };
+
+        // Tordimensionen
+        const goal = {
+            topY: 130,
+            bottomY: 230,
+            topLeftX: 250,
+            topRightX: 550,
+            bottomLeftX: 230,
+            bottomRightX: 570
+        };
+
+        // Hilfsfunktionen
+        function initSpectators() {
+            for (let y = 55; y < 220; y += 20) {
+                for (let x = 10; x < canvas.width; x += 15 + Math.random() * 10) {
+                    spectators.push({
+                        x: x,
+                        y: y,
+                        color: `hsl(${Math.random() * 360}, 70%, 60%)`
+                    });
+                }
+            }
+        }
+
+        function resetBall() {
+            isBallFlying = false;
+            ball.x = startBallX;
+            ball.y = startBallY;
+            ball.z = 0;
+            ball.radius = 15;
+            
+            // Torwart zurücksetzen
+            goalie.isDiving = false;
+            goalie.x = 400;
+            goalie.y = goalie.baseY;
+            goalie.angle = 0;
+        }
+
+        function showStatus(text, color) {
+            messageEl.innerText = text;
+            messageEl.style.color = color;
+            messageEl.style.opacity = 1;
+            
+            clearTimeout(showMessageTimer);
+            showMessageTimer = setTimeout(() => {
+                messageEl.style.opacity = 0;
+                resetBall();
+            }, 2000);
+        }
+
+        function updateScore() {
+            scoreEl.innerText = `Tore: ${score} | Versuche: ${attempts}`;
+        }
+
+        // --- Zeichnen ---
+
+        function drawStands() {
+            ctx.fillStyle = "#555";
+            ctx.fillRect(0, 50, canvas.width, 180);
+
+            ctx.fillStyle = "#777";
+            for (let y = 60; y < 230; y += 20) {
+                ctx.fillRect(0, y, canvas.width, 10);
+            }
+
+            for (const spectator of spectators) {
+                ctx.fillStyle = spectator.color;
+                ctx.beginPath();
+                ctx.arc(spectator.x, spectator.y, 5, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            
+            ctx.fillStyle = "#333";
+            ctx.fillRect(0, 0, canvas.width, 50);
+            ctx.strokeStyle = "#222";
+            ctx.lineWidth = 5;
+            ctx.beginPath();
+            ctx.moveTo(0, 50);
+            ctx.lineTo(canvas.width, 50);
+            ctx.stroke();
+        }
+
+        function drawPitch() {
+            ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
+            ctx.lineWidth = 2;
+            
+            ctx.beginPath();
+            ctx.moveTo(100, 600);
+            ctx.lineTo(200, 230); 
+            ctx.lineTo(600, 230); 
+            ctx.lineTo(700, 600); 
+            ctx.stroke();
+
+            ctx.fillStyle = "white";
+            ctx.beginPath();
+            ctx.arc(400, 480, 3, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        function drawGoal() {
+            ctx.strokeStyle = "white";
+            ctx.lineWidth = 8;
+            ctx.lineJoin = "round";
+
+            ctx.beginPath();
+            ctx.moveTo(goal.topLeftX + 20, goal.topY - 10);
+            ctx.lineTo(goal.topRightX - 20, goal.topY - 10);
+            ctx.lineTo(goal.bottomRightX - 10, goal.bottomY);
+            ctx.moveTo(goal.topLeftX + 20, goal.topY - 10);
+            ctx.lineTo(goal.bottomLeftX + 10, goal.bottomY);
+            ctx.stroke();
+
+            ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
+            ctx.lineWidth = 1;
+            for (let i = goal.topLeftX; i < goal.topRightX; i += 20) {
+                ctx.beginPath();
+                ctx.moveTo(i, goal.topY);
+                ctx.lineTo(i + (i - 400) * 0.2, goal.bottomY);
+                ctx.stroke();
+            }
+            for (let j = goal.topY; j < goal.bottomY; j += 15) {
+                ctx.beginPath();
+                ctx.moveTo(goal.topLeftX, j);
+                ctx.lineTo(goal.topRightX, j);
+                ctx.stroke();
+            }
+
+            ctx.strokeStyle = "white";
+            ctx.lineWidth = 8;
+            ctx.beginPath();
+            ctx.moveTo(goal.bottomLeftX, goal.bottomY); 
+            ctx.lineTo(goal.topLeftX, goal.topY);      
+            ctx.lineTo(goal.topRightX, goal.topY);     
+            ctx.lineTo(goal.bottomRightX, goal.bottomY);
+            ctx.stroke();
+        }
+
+        function drawGoalie() {
+            ctx.save();
+            
+            // Position setzen (Mitte des Torsos ca.)
+            let drawX = goalie.x;
+            let drawY = goalie.y - 45; // Etwas höher als die Füße
+
+            ctx.translate(drawX, drawY);
+            ctx.rotate(goalie.angle); // Rotation für Hechtsprung
+
+            // Farben
+            const skinColor = "#ffccaa";
+            const shirtColor = "#FFD700"; // Gelb
+            const shortsColor = "#111";   // Schwarz
+            
+            // --- Zeichne Körperteile (Menschlicher) ---
+
+            // Kopf
+            ctx.fillStyle = skinColor;
+            ctx.beginPath();
+            ctx.arc(0, -35, 12, 0, Math.PI * 2); // Relativ zur Mitte
+            ctx.fill();
+
+            // Körper (Trikot)
+            ctx.fillStyle = shirtColor;
+            // Abgerundetes Rechteck für Torso
+            ctx.beginPath();
+            ctx.roundRect(-18, -25, 36, 45, 5);
+            ctx.fill();
+
+            // Hose
+            ctx.fillStyle = shortsColor;
+            ctx.beginPath();
+            ctx.roundRect(-18, 15, 36, 15, 5);
+            ctx.fill();
+
+            // Gliedmaßen Animation
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            
+            // Beine
+            ctx.strokeStyle = skinColor; // Beine Hautfarbe oder Socken? Sagen wir schwarz für Stutzen
+            ctx.lineWidth = 10;
+            
+            ctx.strokeStyle = "#111"; // Stutzen/Hose Verlängerung
+            ctx.beginPath();
+            if (goalie.isDiving) {
+                // Beine strecken beim Sprung
+                ctx.moveTo(-10, 30); ctx.lineTo(-15, 60); // Linkes Bein
+                ctx.moveTo(10, 30);  ctx.lineTo(15, 60);  // Rechtes Bein
+            } else {
+                // Beine leicht gebeugt beim Stehen (Idle Animation)
+                const kneeBend = Math.sin(frameCount * 0.1) * 2;
+                ctx.moveTo(-10, 30); ctx.lineTo(-12, 55 + kneeBend); 
+                ctx.moveTo(10, 30);  ctx.lineTo(12, 55 + kneeBend);  
+            }
+            ctx.stroke();
+
+            // Arme (Trikot Farbe Ärmel + Haut)
+            // Wir zeichnen vereinfacht ganze Arme in Hautfarbe mit gelben Ärmeln
+            
+            // Ärmel
+            ctx.strokeStyle = shirtColor;
+            ctx.lineWidth = 12;
+            ctx.beginPath();
+            ctx.moveTo(-15, -20); ctx.lineTo(-25, -5); // Links
+            ctx.moveTo(15, -20);  ctx.lineTo(25, -5);  // Rechts
+            ctx.stroke();
+
+            // Unterarme / Hände
+            ctx.strokeStyle = skinColor;
+            ctx.lineWidth = 10;
+            ctx.beginPath();
+            
+            if (goalie.isDiving) {
+                // Arme weit strecken zum Ball
+                // Wenn wir nach rechts springen (angle > 0), ist "oben" relativ zur Rotation
+                // Da wir das ganze Canvas rotiert haben, zeichnen wir einfach Arme nach "oben" (über den Kopf)
+                ctx.moveTo(-25, -5); ctx.lineTo(-35, -40); // Arme hochreißen
+                ctx.moveTo(25, -5);  ctx.lineTo(35, -40);
+                
+                // Handschuhe (Weiß)
+                ctx.strokeStyle = "white";
+                ctx.lineWidth = 14;
+                ctx.beginPath();
+                ctx.moveTo(-35, -40); ctx.lineTo(-37, -45);
+                ctx.moveTo(35, -40); ctx.lineTo(37, -45);
+                ctx.stroke();
+
+            } else {
+                // Arme bereit halten (Idle)
+                const armWave = Math.cos(frameCount * 0.1) * 3;
+                ctx.moveTo(-25, -5); ctx.lineTo(-35 - armWave, 10); 
+                ctx.moveTo(25, -5);  ctx.lineTo(35 + armWave, 10);
+                
+                // Handschuhe
+                ctx.strokeStyle = "white";
+                ctx.lineWidth = 14;
+                ctx.beginPath();
+                ctx.moveTo(-35 - armWave, 10); ctx.lineTo(-37 - armWave, 15);
+                ctx.moveTo(35 + armWave, 10); ctx.lineTo(37 + armWave, 15);
+                ctx.stroke();
+            }
+            ctx.stroke();
+
+            ctx.restore();
+        }
+
+        function drawBall() {
+            ctx.save();
+            ctx.translate(ball.x, ball.y);
+            
+            if (isBallFlying) {
+                const rotation = Date.now() / 100;
+                ctx.rotate(rotation);
+            }
+
+            ctx.fillStyle = "white";
+            ctx.beginPath();
+            ctx.arc(0, 0, ball.radius, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.fillStyle = "black";
+            ctx.beginPath();
+            ctx.arc(0, 0, ball.radius * 0.5, 0, Math.PI * 2, false); 
+            ctx.fill();
+            
+            for(let i=0; i<5; i++) {
+                ctx.beginPath();
+                ctx.arc(
+                    Math.cos(i * 2 * Math.PI / 5) * ball.radius * 0.7, 
+                    Math.sin(i * 2 * Math.PI / 5) * ball.radius * 0.7, 
+                    ball.radius * 0.2, 0, Math.PI*2
+                );
+                ctx.fill();
+            }
+
+            if (!isBallFlying || ball.z < 0.1) {
+                ctx.restore(); 
+                ctx.fillStyle = "rgba(0,0,0,0.3)";
+                ctx.beginPath();
+                ctx.ellipse(ball.x + 5, ball.y + ball.radius + 2, ball.radius, ball.radius * 0.3, 0, 0, Math.PI * 2);
+                ctx.fill();
+            } else {
+                ctx.restore();
+            }
+        }
+
+        // --- Logik ---
+
+        function update() {
+            frameCount++;
+
+            // Torwart Idle Bewegung (Automatisch hin und her)
+            if (!isBallFlying && !goalie.isDiving) {
+                goalie.x += goalie.speed * goalie.direction;
+                
+                // Leichte Wippbewegung im Stand
+                goalie.y = goalie.baseY + Math.sin(frameCount * 0.2) * 2;
+                goalie.angle = 0; // Aufrecht stehen
+
+                if (goalie.x > goal.bottomRightX - 40 || goalie.x < goal.bottomLeftX + 40) {
+                    goalie.direction *= -1;
+                }
+            } 
+            else if (isBallFlying && goalie.isDiving) {
+                // HECHT-LOGIK
+                
+                // X Bewegung
+                const dx = goalie.diveTargetX - goalie.x;
+                goalie.x += dx * 0.08; // Sanfteres Gleiten
+
+                // Y Bewegung (Sprung)
+                const dy = goalie.diveTargetY - goalie.y;
+                goalie.y += dy * 0.08;
+
+                // Rotation berechnen (Hecht)
+                // Wenn er weit zur Seite muss (>50px vom Zentrum), dreht er sich
+                const distFromCenter = goalie.diveTargetX - 400;
+                let targetAngle = 0;
+
+                if (Math.abs(distFromCenter) > 40) {
+                    // 90 Grad (PI/2) nach rechts oder links
+                    // Wir nehmen etwas weniger als 90 Grad für realistischeren Sprung (ca 70 Grad)
+                    targetAngle = (distFromCenter > 0) ? 1.2 : -1.2;
+                } else {
+                    // Bei zentralen Bällen nur leicht neigen oder aufrecht bleiben
+                    targetAngle = (distFromCenter > 0) ? 0.2 : -0.2;
+                }
+
+                // Winkel interpolieren
+                goalie.angle += (targetAngle - goalie.angle) * 0.1;
+            }
+
+            // Ball Bewegung
+            if (isBallFlying) {
+                ball.z += 0.05; 
+                const progress = ball.z;
+                
+                ball.x = startBallX + (ball.targetX - startBallX) * progress;
+                ball.y = startBallY + (ball.targetY - startBallY) * progress;
+
+                ball.radius = 15 - (7 * progress);
+
+                if (progress >= 1) {
+                    isBallFlying = false;
+                    checkResult();
+                }
+            }
+        }
+
+        function checkResult() {
+            // Verbesserte Kollisionserkennung für den neuen Körper
+            // Wir prüfen die Distanz zum Zentrum des Torsos
+            // Da er sich dreht, ist eine einfache Box schwer, wir nehmen eine etwas größere Kreis-Distanz an
+            
+            // Torso Position anpassen für Hitbox
+            let hitX = goalie.x;
+            let hitY = goalie.y - 40; // Körpermitte
+
+            const distX = Math.abs(ball.x - hitX);
+            const distY = Math.abs(ball.y - hitY);
+            
+            // Hitbox
+            let caught = false;
+            
+            // Körpertreffer
+            if (distX < 45 && distY < 45) caught = true;
+
+            // Optional: Wenn er hechtet, deckt er mehr Breite aber weniger Höhe ab
+            // Das simulieren wir einfachheitshalber über den distX Parameter oben, der schon relativ generisch ist.
+
+            if (caught) {
+                showStatus("GEHALTEN!", "#ff4444");
+                return;
+            }
+
+            // Tor Check
+            const inGoalX = ball.x > goal.topLeftX && ball.x < goal.topRightX;
+            const inGoalY = ball.y > goal.topY && ball.y < goal.bottomY;
+
+            if (inGoalX && inGoalY) {
+                score++;
+                showStatus("TOOOOR!", "#44ff44");
+            } else {
+                showStatus("VORBEI!", "#aaaaaa");
+            }
+            
+            updateScore();
+        }
+
+        function gameLoop() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawStands(); 
+            
+            // Boden
+            ctx.fillStyle = "#2E8B57"; 
+            ctx.fillRect(0, 230, canvas.width, canvas.height - 230); 
+
+            drawPitch();
+            drawGoal();
+            
+            // Torwart zeichnen (Reihenfolge wichtig für Tiefe)
+            // Wenn Ball hinten ist (z nahe 1), ist Ball HINTER Torwart? Nein, Ball fliegt auf Tor zu.
+            // Im echten Leben steht Torwart VOR der Linie.
+            // Also: Ball (wenn weit weg) -> Torwart -> Ball (wenn nah)
+            // Hier einfachheitshalber: Torwart vor Netz, Ball davor.
+            
+            drawGoalie();
+            drawBall();
+
+            update();
+            requestAnimationFrame(gameLoop);
+        }
+
+        // Input Handler
+        function handleInput(x, y) {
+             if (isBallFlying || messageEl.style.opacity == "1") return;
+
+            isBallFlying = true;
+            attempts++;
+            updateScore();
+
+            ball.targetX = x;
+            ball.targetY = y;
+
+            // KI Entscheidung
+            goalie.isDiving = true;
+            
+            // Fehlerquote
+            const errorMargin = (Math.random() * 200) - 100;
+            
+            // Ziel für den Torwart setzen
+            goalie.diveTargetX = ball.targetX + errorMargin; 
+            
+            // Er soll auch springen (Y-Achse)!
+            // Ziel-Y ist Ballhöhe, aber begrenzt durch Boden
+            // Wir addieren etwas Offset, da er "hoch" springen muss um an hohe Bälle zu kommen
+            let jumpHeight = ball.targetY;
+            if (jumpHeight > goalie.baseY) jumpHeight = goalie.baseY; // Nicht in den Boden graben
+            
+            goalie.diveTargetY = jumpHeight + 40; // +40 weil seine Koordinaten bei den Füßen sind
+
+            // Begrenzen
+            if (goalie.diveTargetX < goal.bottomLeftX - 50) goalie.diveTargetX = goal.bottomLeftX - 50;
+            if (goalie.diveTargetX > goal.bottomRightX + 50) goalie.diveTargetX = goal.bottomRightX + 50;
+        }
+
+        canvas.addEventListener('mousedown', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            const clickX = (e.clientX - rect.left) * scaleX;
+            const clickY = (e.clientY - rect.top) * scaleY;
+            handleInput(clickX, clickY);
+        });
+
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault(); 
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            const touch = e.touches[0];
+            const clickX = (touch.clientX - rect.left) * scaleX;
+            const clickY = (touch.clientY - rect.top) * scaleY;
+            handleInput(clickX, clickY);
+        }, {passive: false});
+
+        initSpectators();
+        updateScore();
+        gameLoop();
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/games/index.html b/games/index.html
index b71b236..33eb1a2 100644
--- a/games/index.html
+++ b/games/index.html
@@ -196,6 +196,14 @@
             </div>
         </a>
 
+        <a href="barcafinal.html" class="game-card chess">
+            <div class="icon-box">♟️</div>
+            <div class="card-content">
+                <h3>Barcelona Quiz</h3>
+                <span>Quiz & Rätsel</span>
+            </div>
+        </a>
+
         <div class="game-card future" style="cursor: default; opacity: 0.7;">
             <div class="icon-box">?</div>
             <div class="card-content">

Rang	Korrekte Antworten
THE GOAT 🐐	19 - 20
BARÇA LEGENDE 🏆	16 - 18
STAMMSPIELER ⚽	12 - 15
TREUER FAN 🏟️	6 - 11
PLASTIKFAN 🤡	0 - 5