From ecfe5c09a831e0b659c808a01fc593e974cbc796 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Thu, 26 Mar 2026 11:06:27 +0100
Subject: [PATCH 01/15] Simple chessboard design + slove button (shows you the
 solution with the algorithm) and marks conflicts with damen red.

conflict still has some errors (damen despawn somethimes) and css is very simple.
---
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 1006 -> 3283 bytes
 app/routes/main_routes.py                     |  53 ++++++-
 app/static/css/dashboard.css                  | 116 ++++++++++++++
 app/templates/dashboard.html                  | 145 +++++++++++++++---
 app/templates/index.html                      |   2 +-
 5 files changed, 290 insertions(+), 26 deletions(-)
 create mode 100644 app/static/css/dashboard.css

diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index 506fedf814e44ded2daa3b5565810373da0a9955..6d84cdad740e1bfb63718b98e357b9289c750d05 100644
GIT binary patch
literal 3283
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

delta 396
zcmcaC`Hr1$IWI340}$+evNkh;aU!3D(=i}#IztLW3S$mKE@Kp9E>jc}BZ$wG!<@?!
z#gfY!#mdOQ#E{CE!ko&sjER9^H4sBU6niTB0*;A=!V{ZSSUF+r{X#x0DeNr_%Ycej
z!<3@&qPS8xf*CY9UxMT{nQn19<&>rt6lLa>+~O}v%}YrwiZ4mcEyzhMNu9iwv6PWz
zvNBU7Bk$x|CRs-A$+MYCRat-<i`YN}$U{ZkAc6--+~Q10EY3*EPb^9)5}0httf~W&
z^3&wL#hR9rSe#wN3{nZweTy3`5TBEuo|#v~3KC|UoXIWc%L`%(fCyBhe{tC4=BJeA
rq}mmU0c9D1xOgp)_`uA_$asT6=K?k~`4xAo00SeV1LFrU33e#}6C+rT

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 5909e0a..3524549 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,4 +1,4 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, jsonify, render_template, request
 from flask_login  import login_required, current_user
 
 main_bp = Blueprint("main", __name__)
@@ -11,3 +11,54 @@ def home():
 @login_required
 def dashboard():
     return render_template('dashboard.html', user=current_user)
+
+@main_bp.route("/check", methods=["POST"])
+def check():
+    data = request.json
+    board = data["board"]
+    row = data["row"]
+    col = data["col"]
+
+    for r in range(len(board)):
+        c = board[r]
+
+        if c == -1 or r == row:
+            continue
+
+        # gleiche Spalte
+        if c == col:
+            return jsonify({"valid": False})
+
+        # gleiche Diagonale
+        if abs(c - col) == abs(r - row):
+            return jsonify({"valid": False})
+
+    return jsonify({"valid": True})
+
+
+@main_bp.route("/solve")
+def solve():
+    n = 8
+    solutions = []
+    board = [-1] * n
+
+    def is_safe(row, col):
+        for r in range(row):
+            c = board[r]
+            if c == col or abs(c - col) == abs(r - row):
+                return False
+        return True
+
+    def backtrack(row):
+        if row == n:
+            solutions.append(board[:])
+            return
+
+        for col in range(n):
+            if is_safe(row, col):
+                board[row] = col
+                backtrack(row + 1)
+                board[row] = -1
+
+    backtrack(0)
+    return jsonify(solutions)
\ No newline at end of file
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
new file mode 100644
index 0000000..a1754f7
--- /dev/null
+++ b/app/static/css/dashboard.css
@@ -0,0 +1,116 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background: #f5f7fa;
+}
+
+/* 🔝 Navbar */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #1e293b;
+    color: white;
+    padding: 15px 30px;
+}
+
+.navbar a {
+    color: white;
+    margin-left: 15px;
+    text-decoration: none;
+}
+
+.navbar a:hover {
+    text-decoration: underline;
+}
+
+/* 📦 Layout */
+.container {
+    max-width: 900px;
+    margin: 30px auto;
+    padding: 10px;
+}
+
+/* 📇 Cards */
+.card {
+    background: white;
+    padding: 20px;
+    margin-bottom: 25px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.game-card {
+    text-align: center;
+}
+
+/* ♟️ Board */
+.board {
+    display: grid;
+    grid-template-columns: repeat(8, 60px);
+    margin: 20px auto;
+    width: 480px;
+}
+
+.cell {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.cell:hover {
+    transform: scale(1.05);
+}
+
+.white {
+    background: #e2e8f0;
+}
+
+.black {
+    background: #475569;
+    color: white;
+}
+
+.invalid {
+    background: #ef4444 !important;
+}
+
+/* 🎛️ Buttons */
+.controls {
+    margin-top: 15px;
+}
+
+.btn {
+    padding: 10px 15px;
+    margin: 5px;
+    border: none;
+    border-radius: 8px;
+    background: #3b82f6;
+    color: white;
+    cursor: pointer;
+}
+
+.btn:hover {
+    background: #2563eb;
+}
+
+.btn.secondary {
+    background: #64748b;
+}
+
+.btn.secondary:hover {
+    background: #475569;
+}
+
+.btn.danger {
+    background: #ef4444;
+}
+
+.btn.danger:hover {
+    background: #dc2626;
+}
\ No newline at end of file
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 96397ba..f6c183e 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -1,51 +1,148 @@
 <!DOCTYPE html>
-
-<html lang="en">
+<html lang="de">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard</title>
+
+    <link rel="stylesheet" href="../static/css/dashboard.css">
 </head>
 
 <body>
 
-    <nav>
-        <a href="{{ url_for('main.dashboard') }}">Dashboard</a>
-        <a href="{{ url_for('login.logout') }}">Logout</a>
+    <!-- 🔝 Navbar -->
+    <nav class="navbar">
+        <div class="nav-left">♛ 8-Queens App</div>
+        <div class="nav-right">
+            <a href="{{ url_for('main.dashboard') }}">Dashboard</a>
+            <a href="{{ url_for('login.logout') }}">Logout</a>
+        </div>
     </nav>
 
+    <!-- 📦 Container -->
     <div class="container">
 
-        ```
-        <h1>Dashboard</h1>
+        <!-- 👤 User Card -->
+        <div class="card">
+            <h2>👋 Willkommen, {{ current_user.username }}</h2>
 
-        <p>Welcome back <strong>{{ current_user.username }}</strong> 👋</p>
+            <div class="user-info">
+                <p><strong>ID:</strong> {{ current_user.id }}</p>
+                <p><strong>Username:</strong> {{ current_user.username }}</p>
 
-        <div class="user-info">
-            <h3>Your Account</h3>
+                {% if current_user.email %}
+                <p><strong>Email:</strong> {{ current_user.email }}</p>
+                {% else %}
+                <p><strong>Email:</strong> Not set</p>
+                {% endif %}
 
-            <p><strong>User ID:</strong> {{ current_user.id }}</p>
-            <p><strong>Username:</strong> {{ current_user.username }}</p>
+                <p><strong>Erstellt:</strong> {{ current_user.created_at }}</p>
+            </div>
 
-            {% if current_user.email %}
-            <p><strong>Email:</strong> {{ current_user.email }}</p>
-            {% else %}
-            <p><strong>Email:</strong> Not set</p>
-            {% endif %}
-
-            <p><strong>Account created:</strong> {{ current_user.created_at }}</p>
-        </div>
-
-        <div class="logout">
             <form action="{{ url_for('login.logout') }}" method="post">
-                <button type="submit">Logout</button>
+                <button class="btn danger" type="submit">Logout</button>
             </form>
         </div>
-        ```
+
+        <!-- ♟️ Game Card -->
+        <div class="card game-card">
+            <h2>♟️ 8-Damen Spiel</h2>
+
+            <div class="board" id="board"></div>
+
+            <div class="controls">
+                <button class="btn" onclick="solve()">Solve</button>
+                <button class="btn secondary" onclick="resetBoard()">Reset</button>
+            </div>
+        </div>
 
     </div>
 
+    <script>
+        let board = Array(8).fill(-1);
+        const boardDiv = document.getElementById("board");
+
+        function getConflicts() {
+            let conflicts = [];
+
+            for (let r1 = 0; r1 < 8; r1++) {
+                if (board[r1] === -1) continue;
+
+                for (let r2 = r1 + 1; r2 < 8; r2++) {
+                    if (board[r2] === -1) continue;
+
+                    let c1 = board[r1];
+                    let c2 = board[r2];
+
+                    if (
+                        c1 === c2 ||
+                        Math.abs(c1 - c2) === Math.abs(r1 - r2)
+                    ) {
+                        conflicts.push([r1, c1]);
+                        conflicts.push([r2, c2]);
+                    }
+                }
+            }
+
+            return conflicts;
+        }
+
+        function drawBoard() {
+            boardDiv.innerHTML = "";
+            const conflicts = getConflicts();
+
+            for (let row = 0; row < 8; row++) {
+                for (let col = 0; col < 8; col++) {
+
+                    const cell = document.createElement("div");
+                    cell.classList.add("cell");
+
+                    if ((row + col) % 2 === 0) {
+                        cell.classList.add("white");
+                    } else {
+                        cell.classList.add("black");
+                    }
+
+                    if (board[row] === col) {
+                        cell.textContent = "♛";
+
+                        if (conflicts.some(([r, c]) => r === row && c === col)) {
+                            cell.classList.add("invalid");
+                        }
+                    }
+
+                    cell.onclick = () => placeQueen(row, col);
+                    boardDiv.appendChild(cell);
+                }
+            }
+        }
+
+        function placeQueen(row, col) {
+            if (board[row] === col) {
+                board[row] = -1;
+            } else {
+                board[row] = col;
+            }
+            drawBoard();
+        }
+
+        async function solve() {
+            const res = await fetch("/solve");
+            const solutions = await res.json();
+
+            board = solutions[0];
+            drawBoard();
+        }
+
+        function resetBoard() {
+            board = Array(8).fill(-1);
+            drawBoard();
+        }
+
+        drawBoard();
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
index 3d2f07b..f364808 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -21,7 +21,7 @@
 
             <nav>
                 <a href="/">Home</a>
-                <a href="/solver">Solver</a>
+                <a href="/dashboard">Solver</a>
 
                 {% if session.get('user_id') %}
                 <a href="/dashboard">Dashboard</a>

From 81d689c1ba199c6c2374b080ac8806036f813800 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Thu, 26 Mar 2026 19:38:56 +0100
Subject: [PATCH 02/15] Added chess board specification (number and
 cahracters), aswell as a detail view for the damen

---
 app/static/css/dashboard.css | 33 ++++++++++++--
 app/templates/dashboard.html | 86 ++++++++++++++++++++++++++++++------
 2 files changed, 103 insertions(+), 16 deletions(-)

diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index a1754f7..76ace99 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -45,13 +45,28 @@ body {
 }
 
 /* ♟️ Board */
-.board {
+.board-grid {
     display: grid;
-    grid-template-columns: repeat(8, 60px);
+    grid-template-columns: 30px repeat(8, 60px);
+    grid-template-rows: 30px repeat(8, 60px);
     margin: 20px auto;
-    width: 480px;
+    width: max-content;
+    border: 6px solid #1e293b;
+    border-radius: 10px;
+    overflow: hidden;
 }
 
+.label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    background: #aec8eb;
+    color: #1e293b;
+}
+
+
+
 .cell {
     width: 60px;
     height: 60px;
@@ -113,4 +128,16 @@ body {
 
 .btn.danger:hover {
     background: #dc2626;
+}
+
+#queenList {
+    list-style: none;
+    padding: 0;
+}
+
+#queenList li {
+    padding: 5px;
+    background: #f1f5f9;
+    margin: 4px 0;
+    border-radius: 6px;
 }
\ No newline at end of file
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index f6c183e..1884b05 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -90,32 +90,59 @@
 
         function drawBoard() {
             boardDiv.innerHTML = "";
-            const conflicts = getConflicts();
+            boardDiv.className = "board-grid";
 
-            for (let row = 0; row < 8; row++) {
-                for (let col = 0; col < 8; col++) {
+            const conflicts = getConflicts();
+            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+            for (let row = -1; row < 8; row++) {
+                for (let col = -1; col < 8; col++) {
 
                     const cell = document.createElement("div");
-                    cell.classList.add("cell");
 
-                    if ((row + col) % 2 === 0) {
-                        cell.classList.add("white");
-                    } else {
-                        cell.classList.add("black");
+                    // 🔹 Ecke oben links
+                    if (row === -1 && col === -1) {
+                        cell.classList.add("label");
                     }
 
-                    if (board[row] === col) {
-                        cell.textContent = "♛";
+                    // 🔹 Buchstaben (oben)
+                    else if (row === -1) {
+                        cell.textContent = letters[col];
+                        cell.classList.add("label");
+                    }
 
-                        if (conflicts.some(([r, c]) => r === row && c === col)) {
-                            cell.classList.add("invalid");
+                    // 🔹 Zahlen (links)
+                    else if (col === -1) {
+                        cell.textContent = 8 - row;
+                        cell.classList.add("label");
+                    }
+
+                    // 🔹 echtes Spielfeld
+                    else {
+                        cell.classList.add("cell");
+
+                        if ((row + col) % 2 === 0) {
+                            cell.classList.add("white");
+                        } else {
+                            cell.classList.add("black");
                         }
+
+                        if (board[row] === col) {
+                            cell.textContent = "♛";
+
+                            if (conflicts.some(([r, c]) => r === row && c === col)) {
+                                cell.classList.add("invalid");
+                            }
+                        }
+
+                        cell.onclick = () => placeQueen(row, col);
                     }
 
-                    cell.onclick = () => placeQueen(row, col);
                     boardDiv.appendChild(cell);
                 }
             }
+
+            updateQueenList();
         }
 
         function placeQueen(row, col) {
@@ -125,6 +152,7 @@
                 board[row] = col;
             }
             drawBoard();
+            updateQueenList();
         }
 
         async function solve() {
@@ -138,11 +166,43 @@
         function resetBoard() {
             board = Array(8).fill(-1);
             drawBoard();
+            updateQueenList();
         }
 
         drawBoard();
     </script>
 
+    <div class="card">
+        <h3>📋 Damen Positionen</h3>
+        <ul id="queenList"></ul>
+    </div>
+
+    <script>
+        function updateQueenList() {
+            const list = document.getElementById("queenList");
+            list.innerHTML = "";
+
+            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+            let count = 1;
+
+            for (let row = 0; row < 8; row++) {
+                if (board[row] !== -1) {
+                    let col = board[row];
+
+                    let pos = letters[col] + (8 - row);
+
+                    const li = document.createElement("li");
+                    li.textContent = `Dame ${count}: ${pos}`;
+
+                    list.appendChild(li);
+                    count++;
+                }
+            }
+        }
+
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file

From 79cf3240e1e776d3e29e87fa85bf8d54a8ea4a51 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Sun, 29 Mar 2026 17:54:11 +0200
Subject: [PATCH 03/15] implemented "acht-damen algorithmus", seperated
 javascript from html, made a simple check function.

---
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 3283 -> 3910 bytes
 app/routes/main_routes.py                     |  13 +-
 app/static/css/dashboard.css                  |  12 ++
 app/static/js/dashboard.js                    | 199 ++++++++++++++++++
 app/templates/dashboard.html                  | 156 ++------------
 5 files changed, 236 insertions(+), 144 deletions(-)
 create mode 100644 app/static/js/dashboard.js

diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index 6d84cdad740e1bfb63718b98e357b9289c750d05..e097a85a9d76f2a9232ab1ebb299b5f2632b9518 100644
GIT binary patch
delta 968
zcmZ`#L2DCH5PtJ^vq|=4lQt=$lEfMdHi$-A1=~U|Rtz2@SiIyS(znrQZ0PPrL~0Tx
zV1<G%+tM68#Y4R1AYQx(f`ZUskP__Cd&EEBY!cIKs<X`OyqRy_`{w(0>{HbLMp0yf
z_G9UD_KRftk3!WveRhfyF62CE4<#yaQT5g+A$9bgrDauq&CIn>oN!kSu!Y_;E>%bk
z)B4{6N&EWXIl|peuqtuSD12mC=?^Ce_j36Tyk$-*+&6kb+J8V!alXg>hroe8c$V<M
z2zcxec#Ma5umb6EE-aJyg!Kq+LdyCI4RBje={sPJIUz-1tg+!TDV%E@_q+$VXtliG
zVcM$8o2AFTgr3hmRBvhd{C$08pb;i6bOHVMJcb=&3=}2Au<L!};AH7MAuF2FrVtya
znuxzP8+uPG`LLuZcJSNH@u4PCDj2GE9_yFU^&=R{<R=SmFI3me#jV9Ai?vv6SB&*8
zupe0&B6+Yt20Q;=z<TL+m57tF^YjD^TZq2h8!Wy)vNn))z-1v77u#Yks~cJvXWEi>
zdzI%OwB7pMLMD?_QH3*h-Ghr3jBI{Yr^|Srob2weB{1)XtC;B17|LWn5Zb;{J!vMl
zk}ryz#d30Alq;!MmzrX@C5Cs!@E!}5uXi<wLr?0UHP2?KHfv?sjARR_C9EA5kryzv
z71D25AJ~$2k0|BtXHnnBYZnOhK94+$Y!sUiZ9%j{0Zw%YhF=1qCk7QsfQb(IPw3M4
E17~x%H2?qr

delta 355
zcmX>mcUh8eIWI340}$M0I-2>0bt0bxqt8TjT^S~ZRK^tMRE}j#3=FG*7y_a=Q#luK
zO=e^i)?`RwS;h#I17ZkBVQpbp24t>=2{1%)!&Hkhq_Cl?PGw7BpLj=}l?SFopCN@K
zg)^OT4Hv4FDcl&w^1}3JGo<jK8k@q4p_(s+FPK4-fASH=(8*Fvn;F?ApJUq2$hEnR
z*^h~lfAdw=iA;>To6|XVGBTP>R^+<Is6P1zR}ZrvP)j7Q(c}rd`pP^&FBS2E2tFY3
oi^C>2KczG$)vm}G$OQ#JG4JFzye^Y1`400jNHEHM01;pf0KsrX00000

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 3524549..102dcaa 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,5 +1,6 @@
 from flask import Blueprint, jsonify, render_template, request
 from flask_login  import login_required, current_user
+import random
 
 main_bp = Blueprint("main", __name__)
 
@@ -61,4 +62,14 @@ def solve():
                 board[row] = -1
 
     backtrack(0)
-    return jsonify(solutions)
\ No newline at end of file
+    return jsonify(solutions)
+
+@main_bp.route("/solve_rooks")
+def solve_rooks_route():
+    return jsonify(solve_rooks(8))
+
+def solve_rooks(n=8):
+    solution = list(range(n))
+    random.shuffle(solution)
+    return solution
+
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index 76ace99..19f7438 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -140,4 +140,16 @@ body {
     background: #f1f5f9;
     margin: 4px 0;
     border-radius: 6px;
+}
+
+.mode-switch {
+    margin-bottom: 15px;
+}
+
+.mode-switch .btn {
+    margin: 5px;
+}
+
+.btn.active {
+    background: #22c55e;
 }
\ No newline at end of file
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
new file mode 100644
index 0000000..d51e68c
--- /dev/null
+++ b/app/static/js/dashboard.js
@@ -0,0 +1,199 @@
+let mode = "queens"; // oder "rooks"
+
+function setMode(newMode) {
+    mode = newMode;
+    resetBoard();
+
+    document.getElementById("btnQueens").classList.remove("active");
+    document.getElementById("btnRooks").classList.remove("active");
+
+    if (mode === "queens") {
+        document.getElementById("btnQueens").classList.add("active");
+    } else {
+        document.getElementById("btnRooks").classList.add("active");
+    }
+
+    drawBoard();
+}
+
+let board = Array(8).fill(-1);
+const boardDiv = document.getElementById("board");
+
+function getConflicts() {
+    let conflicts = [];
+
+    for (let r1 = 0; r1 < 8; r1++) {
+        if (board[r1] === -1) continue;
+
+        for (let r2 = r1 + 1; r2 < 8; r2++) {
+            if (board[r2] === -1) continue;
+
+            let c1 = board[r1];
+            let c2 = board[r2];
+
+            // 🔴 Türme: nur gleiche Spalte
+            if (mode === "rooks") {
+                if (c1 === c2) {
+                    conflicts.push([r1, c1]);
+                    conflicts.push([r2, c2]);
+                }
+            }
+
+            // 🔴 Damen: Spalte + Diagonale
+            else if (mode === "queens") {
+                if (
+                    c1 === c2 ||
+                    Math.abs(c1 - c2) === Math.abs(r1 - r2)
+                ) {
+                    conflicts.push([r1, c1]);
+                    conflicts.push([r2, c2]);
+                }
+            }
+        }
+    }
+
+    return conflicts;
+}
+
+function checkSolution() {
+    const status = document.getElementById("statusMessage");
+
+    const allPlaced = board.every(col => col !== -1);
+
+    if (!allPlaced) {
+        status.textContent = "❗ Noch nicht alle Figuren platziert.";
+        status.style.color = "orange";
+        return;
+    }
+
+    const conflicts = getConflicts();
+
+    if (conflicts.length > 0) {
+        status.textContent = "❌ Es gibt Konflikte!";
+        status.style.color = "red";
+        return;
+    }
+
+    status.textContent = "🎉 Perfekt gelöst!";
+    status.style.color = "green";
+}
+
+function drawBoard() {
+    boardDiv.innerHTML = "";
+    boardDiv.className = "board-grid";
+
+    const conflicts = getConflicts();
+    const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+    for (let row = -1; row < 8; row++) {
+        for (let col = -1; col < 8; col++) {
+
+            const cell = document.createElement("div");
+
+            // 🔹 Ecke oben links
+            if (row === -1 && col === -1) {
+                cell.classList.add("label");
+            }
+
+            // 🔹 Buchstaben (oben)
+            else if (row === -1) {
+                cell.textContent = letters[col];
+                cell.classList.add("label");
+            }
+
+            // 🔹 Zahlen (links)
+            else if (col === -1) {
+                cell.textContent = 8 - row;
+                cell.classList.add("label");
+            }
+
+            // 🔹 echtes Spielfeld
+            else {
+                cell.classList.add("cell");
+
+                if ((row + col) % 2 === 0) {
+                    cell.classList.add("white");
+                } else {
+                    cell.classList.add("black");
+                }
+
+                if (board[row] === col) {
+                    cell.textContent = (mode === "queens") ? "♛" : "♜";
+
+                    if (conflicts.some(([r, c]) => r === row && c === col)) {
+                        cell.classList.add("invalid");
+                    }
+                }
+
+                cell.onclick = () => placeQueen(row, col);
+            }
+
+            boardDiv.appendChild(cell);
+        }
+    }
+
+    updateQueenList();
+}
+
+function placeQueen(row, col) {
+    if (board[row] === col) {
+        board[row] = -1;
+    } else {
+        board[row] = col;
+    }
+    drawBoard();
+    updateQueenList();
+}
+
+async function solve() {
+
+    if (mode === "rooks") {
+        const res = await fetch("/solve_rooks");
+        const solution = await res.json();
+
+        board = solution;
+        drawBoard();
+        return;
+    }
+
+    // Damen (wie vorher)
+    const res = await fetch("/solve");
+    const solution = await res.json();
+
+    board = Array.isArray(solution[0]) ? solution[0] : solution;
+    drawBoard();
+}
+
+
+function resetBoard() {
+    const status = document.getElementById("statusMessage");
+    board = Array(8).fill(-1);
+    drawBoard();
+    updateQueenList();
+    status.textContent = "";
+}
+
+drawBoard();
+
+function updateQueenList() {
+    const list = document.getElementById("queenList");
+    list.innerHTML = "";
+
+    const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+    let count = 1;
+
+    for (let row = 0; row < 8; row++) {
+        if (board[row] !== -1) {
+            let col = board[row];
+
+            let pos = letters[col] + (8 - row);
+
+            const li = document.createElement("li");
+            li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${pos}`;
+
+            list.appendChild(li);
+            count++;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 1884b05..9db3807 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -45,163 +45,33 @@
             </form>
         </div>
 
+        <div class="mode-switch">
+            <button class="btn active" onclick="setMode('queens')" id="btnQueens">♛ Damen</button>
+            <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks">♜ Türme</button>
+        </div>
+
+
         <!-- ♟️ Game Card -->
         <div class="card game-card">
             <h2>♟️ 8-Damen Spiel</h2>
 
+            <p id="statusMessage"></p>
             <div class="board" id="board"></div>
 
             <div class="controls">
                 <button class="btn" onclick="solve()">Solve</button>
+                <button class="btn" onclick="checkSolution()">Check</button>
                 <button class="btn secondary" onclick="resetBoard()">Reset</button>
             </div>
         </div>
 
+        <div class="card">
+            <h3>📋 Damen Positionen</h3>
+            <ul id="queenList"></ul>
+        </div>
     </div>
 
-    <script>
-        let board = Array(8).fill(-1);
-        const boardDiv = document.getElementById("board");
-
-        function getConflicts() {
-            let conflicts = [];
-
-            for (let r1 = 0; r1 < 8; r1++) {
-                if (board[r1] === -1) continue;
-
-                for (let r2 = r1 + 1; r2 < 8; r2++) {
-                    if (board[r2] === -1) continue;
-
-                    let c1 = board[r1];
-                    let c2 = board[r2];
-
-                    if (
-                        c1 === c2 ||
-                        Math.abs(c1 - c2) === Math.abs(r1 - r2)
-                    ) {
-                        conflicts.push([r1, c1]);
-                        conflicts.push([r2, c2]);
-                    }
-                }
-            }
-
-            return conflicts;
-        }
-
-        function drawBoard() {
-            boardDiv.innerHTML = "";
-            boardDiv.className = "board-grid";
-
-            const conflicts = getConflicts();
-            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
-
-            for (let row = -1; row < 8; row++) {
-                for (let col = -1; col < 8; col++) {
-
-                    const cell = document.createElement("div");
-
-                    // 🔹 Ecke oben links
-                    if (row === -1 && col === -1) {
-                        cell.classList.add("label");
-                    }
-
-                    // 🔹 Buchstaben (oben)
-                    else if (row === -1) {
-                        cell.textContent = letters[col];
-                        cell.classList.add("label");
-                    }
-
-                    // 🔹 Zahlen (links)
-                    else if (col === -1) {
-                        cell.textContent = 8 - row;
-                        cell.classList.add("label");
-                    }
-
-                    // 🔹 echtes Spielfeld
-                    else {
-                        cell.classList.add("cell");
-
-                        if ((row + col) % 2 === 0) {
-                            cell.classList.add("white");
-                        } else {
-                            cell.classList.add("black");
-                        }
-
-                        if (board[row] === col) {
-                            cell.textContent = "♛";
-
-                            if (conflicts.some(([r, c]) => r === row && c === col)) {
-                                cell.classList.add("invalid");
-                            }
-                        }
-
-                        cell.onclick = () => placeQueen(row, col);
-                    }
-
-                    boardDiv.appendChild(cell);
-                }
-            }
-
-            updateQueenList();
-        }
-
-        function placeQueen(row, col) {
-            if (board[row] === col) {
-                board[row] = -1;
-            } else {
-                board[row] = col;
-            }
-            drawBoard();
-            updateQueenList();
-        }
-
-        async function solve() {
-            const res = await fetch("/solve");
-            const solutions = await res.json();
-
-            board = solutions[0];
-            drawBoard();
-        }
-
-        function resetBoard() {
-            board = Array(8).fill(-1);
-            drawBoard();
-            updateQueenList();
-        }
-
-        drawBoard();
-    </script>
-
-    <div class="card">
-        <h3>📋 Damen Positionen</h3>
-        <ul id="queenList"></ul>
-    </div>
-
-    <script>
-        function updateQueenList() {
-            const list = document.getElementById("queenList");
-            list.innerHTML = "";
-
-            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
-
-            let count = 1;
-
-            for (let row = 0; row < 8; row++) {
-                if (board[row] !== -1) {
-                    let col = board[row];
-
-                    let pos = letters[col] + (8 - row);
-
-                    const li = document.createElement("li");
-                    li.textContent = `Dame ${count}: ${pos}`;
-
-                    list.appendChild(li);
-                    count++;
-                }
-            }
-        }
-
-    </script>
+    <script src="../static/js/dashboard.js"></script>
 
 </body>
 

From b808b0017b8a44d84567b1d3dcdfe85d5ff16931 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Mon, 30 Mar 2026 13:22:04 +0200
Subject: [PATCH 04/15] implemented new model for database, new routes for
 save. Fixed logout not allowing post requests

---
 app/__init__.py                               |   1 +
 app/__pycache__/__init__.cpython-311.pyc      | Bin 2405 -> 2477 bytes
 app/app.db                                    | Bin 16384 -> 20480 bytes
 .../__pycache__/gamestate.cpython-311.pyc     | Bin 0 -> 1108 bytes
 app/models/gamestate.py                       |  11 ++++++
 .../__pycache__/login_routes.cpython-311.pyc  | Bin 3503 -> 3515 bytes
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 3910 -> 5694 bytes
 app/routes/login_routes.py                    |   2 +-
 app/routes/main_routes.py                     |  35 ++++++++++++++++-
 app/static/js/dashboard.js                    |  37 +++++++++++++++++-
 app/templates/dashboard.html                  |   3 ++
 database_setup.sql                            |   8 ++++
 12 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 app/models/__pycache__/gamestate.cpython-311.pyc
 create mode 100644 app/models/gamestate.py

diff --git a/app/__init__.py b/app/__init__.py
index 5fd7acc..ddb86b3 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -20,6 +20,7 @@ def create_app():
     login_manager.login_view = "login.login"
 
     from .models.user import User
+    from .models.gamestate import GameState
 
     with app.app_context():
         db.create_all()
diff --git a/app/__pycache__/__init__.cpython-311.pyc b/app/__pycache__/__init__.cpython-311.pyc
index 7124496d8c86a27c42540541fabdbb5374b3b83e..3a6324cf054d49b95230387a0b02f799fe94505e 100644
GIT binary patch
delta 508
zcmaDVv{smRIWI340}yyboyz<_k@pbW8zu&ZcD9XIH!}*eF*2lZrf}!*=L*y^F*4LJ
zED)UR$RslPIuoCeDFY)zi4aI91S}AON_pD~!^Aq+(il^CS~!*g1y;iZ8ETn<hVtf!
z<cij^fGyz55z7^?Wd&Ox0W?K)@;qi?rUhUoBkSb(%%Y6^leaRr@@g{P;&e~UO${zd
zEJ@vL#UjkeC^OlQ)rC=V@?;>%H~9vuwXi^LeoAUiv0ge*VKGQy5zl0PHhV^~$^L8-
z_2NKh+!88EP0uU_%ETw-l%^IGW#*M=vfpA(EGW3e;p7<X8t>v6RKx>RStJ4?#6Sc{
zV-YuyC}sx|3Si(+1oG-FuH>Rrpgr+G{YAP!0Zx#r)r<@bKN=YBa`8{)=+y7gZ*YFf
zFW58r0ozQW8!XxvP|@T{_AiQNQZ6#gM`T!B6xfd_GXhCXu3M~WIf=#DMa)1GizFxa
xap<b?ftZRQ0%X-nh9XfA8|02(95z6&m*%9}6&X!_$dMr<%gFzM0h0jh00191d$9lj

delta 405
zcmZ20{8Wf{IWI340}!zFuFbqOk@pbW111KBcGitoH#4%cGBVUKEa0E)$Rsj(J(E16
z0F=cy`6H99tsqDn2z0QfF{W_0a4Z9|SA#`BL@iSaX9`b_P_A$-Gb00#&6^{VD_Y9}
zHd72}k|-nd<VI#;MlgGF1G6woFoP!F<b%wun}b<|85yM~r?a{+icekxBzY%)WVN2`
z%x29fI=P-rB1H^n!7ZVp)bz~alGLL3q@2>!f}+g45>2*S%!vgBw>X>}gI(iYJcEja
zfhvncK?F!o5jT)1W&;umAmC6W1Z3XgN-j!GEJ=+A>MYU*3UGoH&7920zHahC_AiPC
zQZ8c5N5oiMq}Y$hG6G3Wu3M~WIf=#DMa)2zMG}**ap<b?f|v>*0%XKWh9VIV8)W`3
d4x8Nkl+v73yCQ?hnw%LjGK~Bm7%&O24ggW{UXlO+

diff --git a/app/app.db b/app/app.db
index 479ce3a3ce8b1227654035b3a039b314d6429240..d8d2fca1212c056c3d10a85c44c6d47bf2a8e670 100644
GIT binary patch
delta 500
zcmb7AO-mb56rBl1QJg#lB@_{#prA03cjvvC_a=eDL<WmQg%Gu+h|K#KiI|4gxN&3B
zh3l650m;4#^(S;KbnhQ=>4;y&ofi(AbM8H7al2i+dtv{Ynao?3^?>Ke{dVbe-dZ{Q
z=b$@l$hoo#J#>Qx&edh_qf_bChDM6>^Y%~GN#v0^NLpt9xRZ4LWBJv395rIxh^n<1
zzh3nJ6z1&x{$-&^WIOqxaU=fRz?)kcwre#PkBzq4+Tfk2zWOPuF9BJ8S@vg9v2V~+
zZfyCwSGb)xi<E-3jpj*nz5S)VOR5Wo(SQpN0u%a)5Fr&(@<2&LQ=wBOlqW+5kO&rt
zl!St@l=DOrFV&erL#+(=fdL_!F+~gyv<f{?gojxZO&Rl3%9QY!0Ld29L@G^G$Oup=
z4M^W3UQi;mL<t5c11<Y}fbqDK{WXWqE%X<iUr*vwbXv&`Tchy@`jxx51TLm7_8(a$
c9*h#~eLpeg+wq%9zf7TGKZVIV!>mmBJ(>u9XaE2J

delta 228
zcmXxTD^3JK5CG7g1<TBCkeCtRSkl$Ms$K~pfe;J=-&I{LHo;*~%-jHOK=ulI4iY>U
zL4x5WZ~Ew_se3zFEsQaTfB$vw=l*zMF1BAs!;d-WXVcHa=djzamP5av`|suJ?aTGu
z&E?frp5+1VpB_(ZYA8;$5;bWKNuv;PCRPWWLkldKOSM``g(j#u=YR#!tLIn?*_1Uv
zsI@tem@?OBiL@XC22I|gFmerrAfA<`!ZBL*RT6^}bk?P{^=nHbgiTBv>v!Y$3lDWX
A82|tP

diff --git a/app/models/__pycache__/gamestate.cpython-311.pyc b/app/models/__pycache__/gamestate.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..02fc1f9e2bb7ad5c99298bffc0f3636e79837b3f
GIT binary patch
literal 1108
zcmaJ<zfaph6h7NY9LGu8pjH+AF)(HzLWH5ERjSeyN-I#+z(5paIk_Xa*iP!$Dr^}#
zWXO<8k;uT%DWwWSTOsv-s5&H4hUg}wPHa?kV(PmDLj$OH_TBgHz3<)k?(S146hP2^
zrhjNP4xwMnaGUQG9M1ySMi^mEM+TSXID~mD=)57M1rG6O4q?xGguO%{+#8QeZvtwa
zS!pl!rBGBn<iQ{1D37y;EE1r!Tq4$jwyBvpm&<1Fsc}37!nP4XX%3?_&m$t7Zvxnj
z19^LV6VkWX7X6m?{U=)3^IV7)FGc&^O!#uNG#uTx`iIFl*xLlvE%*oR3cftdhf0EO
zG~kenKZafO@7x5Vb+)kQyHLqBEW%;?sWhh=BxS2MS%QO>i<V}n)|RqCwr0Whn~tul
zS)Cj*-LN2HvZgw^y%@bt{fc4&Sy5;}QH%n1bcTb9^43xHfyWYnMtx5Ux?`ABoHuQf
zCl=*3OhpIoQ~}^wBAYh#W(%r?sV`+)nwh5_$VaF@$#iK3p`JCz%u&HCyrY4fMPL~#
zs{I)qvkFg=x#>(Qw+;d_FH_Gm^T}6FGHPz!9><{19Jd`}8DzX@6`&F$qZW%9mR>Jq
z^58GA;$y`vON3PYfj!Am1BUWh?@1$-k?Lq|vOc{#)s`kY(nMF9D9`l5w<_7H*5G#n
zyUXoxyc3Rh!}0RmLGWf}raE8C*7LjGb}-fn#=5~+`B_iCQJJhhsIAmq*H;?Wht>Kj
z@Z@+$j(6pFIe8GdT^p&7HYRr-e&P4U@A5bKYiK{zjwCvfL^qNszhK?E>q=dW`Y0Nl
zvb?6Nr42<d<TcY`Po8=gSe1ji?l4B5b`Q{r|Iy&W64n@)>=Bk!7>)#v<9aC49{zf0
ctUdf4c|`8<5xP9oB+!2UH}m|t!rhnf7vUZSivR!s

literal 0
HcmV?d00001

diff --git a/app/models/gamestate.py b/app/models/gamestate.py
new file mode 100644
index 0000000..d68aa08
--- /dev/null
+++ b/app/models/gamestate.py
@@ -0,0 +1,11 @@
+from .. import db
+from flask_login import UserMixin
+
+class GameState(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, nullable=False)
+
+    board = db.Column(db.Text, nullable=False)  # JSON String
+    mode = db.Column(db.String(10), nullable=False)  # queens / rooks
+
+    created_at = db.Column(db.DateTime, default=db.func.now())
diff --git a/app/routes/__pycache__/login_routes.cpython-311.pyc b/app/routes/__pycache__/login_routes.cpython-311.pyc
index 1b6cba17cad548f85c93d767e1173fe1dfb453fc..60142fbac202d7a59c2ad6e912f83c4bf4ab1ffc 100644
GIT binary patch
delta 94
zcmZ24y<3`hIWI340}xopoXWg3kyny2WTUz?BToufI^!DdWlRhVtC==?Fsg7fI&9A6
o;bG)i;I_b`LGB`>&J{+T$@RPv61qUf2Nq@^!2lzQG=T;J0Ez_{ivR!s

delta 117
zcmdljy<VDkIWI340}wR4SetoZBCjN)-$r$5Mz&>)3=FFoH~TTFaC2D!*&mo085wU(
zp2#CLc><5<<kdV^%q}uYU15~E!N~uCiJ4L70|Suw$jrbb&>{z-q=9lDSYQ%h*&<D#
FJpez~9ozr_

diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index e097a85a9d76f2a9232ab1ebb299b5f2632b9518..c3c7267c6a8196fe1cbc5349f6d8047d4668ab3b 100644
GIT binary patch
delta 2446
zcmZ`)YiJx*6u$G^ot=GTH`zy$rb*MyW80E8T6`sKrKAs{rb5s{5W;5fG~HykTkq_)
zw4`iWf-Mp;Wg-MAvK2{%Mk?rU{UiRUP<G2o!)UCa1qFpIRuB>NoY_aSNj=P*xsUIh
zd*|Hmocs0GFLt?axLghb^6K&1@t>5d?ht>FzuLR^C?!-#C}Rp0sg!Ue)iISL(3TU<
zq-)G&wQUJ^(lh4a2v0PQ+O>vdo{*dHmSxPVd2>F4;~FD`D$5+q!CMyUm?O*3yjdL}
zV~tg`pHQ_Pt;y7R_4{_IsS5EB>Z0yRZpBkx(s-Y1mHgFNSk7DTfciEq7pS8932oef
zZrX$n(pDOn<HkZ&tKEbK*YBYEA2hVdwz+DvlhEc3E46Gww@_h}M79`Taj$p$im{Av
zrg9{j)JD_Mv<4mVHC<!y<>`dc!rzh_0pl?4@Xegp_=V55H$b0xQTafb3XSR~CsI*H
zSpfQO<1Jwu=l$$s;U7+IK~yWMEygX$@3jo1*hwum&AMT@(fC&S0o;Brf55dFqqZ;i
zbRf7BR79#6;y@Tx7b^6qOQ1SHW|_}8Xb*G!#-x1$+}yVR+}{Rs5#E%er%!9ADC@wk
z?XfFUnTW=w(+rg5i|sJ(D_g_3G1dp_d`M3v&S-suiBv3_(D(P%;LjP`91BOR|1L+3
ziRfFh%qqUn%WhPAKv~;-5v3d`$@0wlVQQ!Gm*Wa-_@WvQ_d-9yTh2_?f{e3NYFcOO
z;%vB`L1`}l4;wq2?XtCrUgMbaU9Q8p?+kX~nx-9$GwFEhl#cuB=&)90Pea>M!$zyC
zzY|T*OS|>x87&6Qn#j-+;Qiw%<2zwrHjN>!NE+uVGKK$aNgB}=nW~{@xO)E0@GHVH
zAaB;t7lgF4YDdVFt=i7nt1b8%PR_oQ%n0?)IPyQH3f6$^hI|LK|FKJ~GVu+YgEWvw
ztdldvWQuAL!L((7`{Qw1KF<NLH)S32BBPrU#*9W(hT&lCsIaav+_%ZcY1WizCV5(C
z_<N>J*K{4u!W5#EnsO|aOvck?#)xb?+F7|_tsqW9_URZ|By}aLaJ6xqV25Dh7`*yL
zP_yKL>YE>&9s1GPun?SoW%kgj>RFIsBs=s#ZCY#CvglcJ`{t*X`~`P=(cQl4@|J9(
zQ+`N5Jwi1*^rw?Zwz=WUBbP=N_7=oYQ4Hn9(3&XE4c`;}cSV0e3>L*;UJSxw3rCkG
z^NrmFwWp}|<i#E<^?^c(RFuYGM^!PtksTZb_O$XjzFd@_%$$`C$B>f{-AvL|Pw;)r
zvz&~xw#wlechmr%v*FO>hV#BaW{4h0Bf%>|`ALon=YgDf`q%h+HjR??*fdtTicDGe
z6?SIGl!{Acp;2S)lUxCjA{-k86NUwdVN#p&n;A_zr9*Pp&N||<NMlMc#m<?^iFhIn
zgqt{L(TE*DGkc0rYs?g>rpHX_L_Ev%GI=cCnG(icU+0x$Ltv@n?N{XwLdyIZfzc>V
zFM&e-G|eBlr-tvU;ZNRJ8PBWXg1WD$?z^ve-wwSOS=@EcxBaefd%@RL^mP@K?xNCt
zBb)g!bN%c`XG;Q+l#)!G4JE=!gKM5Zt~1w^i(U_W8p;P>fT!RYD0&9+_5ondn%BSB
zvNUvUxZv$6dV5wIniiFkBs9q-0_q_VoVG`(pexxdT0so0a@Yz#orvnw49f;&jd9Wy
ze&$(hW8Rq!n5_xD&&nITwaP(NE5n$>Ohq7JPU9Wd)|c>bt=q}Eb*vK1u$-2wBPJNb
zD6KEK(EZy!2p%&DZ9h8>U5u{&yYZXr@XL*P@`PuV^ycfIRkAf-|Ev;kzWy<ucmGQr
zgjX)NU23~>HW$d*XWI%~q{u}|yoc*85l{~W!tbb!bk@)XE?DG(CEme76hR>_R5xM`
HTfzMg-o^b4

delta 914
zcmZWoL1+^}6rI^5o9u38(<Z4l+9quXCEHfpP(8I2MX`t=Qo%znl4iE1ByH+!t2fP|
z2X7jtLQm=`A{7L^D|!$Vgcf>QMHJeT7tbQ-|C2~<`<Hn;JO9o5|LyF)9)6#;pE70=
zh%e_q%zxAycDJ@p8~IZ`8gVHPx<*qYWCKPkW=z+7Vl}=e9Ku6Q3Mm+^;QA_Q!gS-`
z0-1@n$z6np_mf?nM`VO%Laa?0A>82R4f@>LUyw%+soHxju>GpsK17bS$p+!E7Fk}V
z$73Bl!Q-oRrjrM*5+^AawQF)mdy$Dj^I;fX2SA<dTF2HWwygZNmER2J1(PoWcQa8)
z35H+;_y#X}<=I+Ma1n=ROI``~Q}#*(f78MdWF1B5Mk*CPEqOXj`&6_9LZz}>s)#Hs
zcgV;3SIXp_@FSX%y^%MgJ-9gy;Dq*sL?5p9BVYwD1b~8dVauqIqbFs-m<5?NW2caU
zoTK@AacRk2<O21a@Sc=!%oa<PWdWeH#DIKergd~C2IVKSm!6hC%m-7-FMb9N6+yg(
z#2|8%!vUNPAq)ekcFth5{du+OEmxd?R9?Qb?m=UhqVsMJo*hkz`Ie$w7qwc&69?XJ
z=YKh1tSq}?6t<qjN?09FDgJPL{bplwZF0-XZd=*SV77HYIhkVjQ|Q^(MRAeW7W}YR
zUYVP#x=?yZzGYo8WpxB70%1z-vI0Z5U{tjjm$wsRbWDCrq|f5#p-x$yma?RpQCkl*
o{wp%EP~$6AcT$YQHvCV#X?ZbuA<XLPlAn`*Y!aZ!p9reqzpV<qivR!s

diff --git a/app/routes/login_routes.py b/app/routes/login_routes.py
index a849065..4525a07 100644
--- a/app/routes/login_routes.py
+++ b/app/routes/login_routes.py
@@ -46,7 +46,7 @@ def login():
 
     return render_template("login.html")
 
-@login_bp.route('/logout')
+@login_bp.route('/logout', methods=['POST'])
 @login_required
 def logout():
     logout_user()
diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 102dcaa..5222b6f 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,6 +1,9 @@
 from flask import Blueprint, jsonify, render_template, request
 from flask_login  import login_required, current_user
-import random
+import random, json
+from ..models.gamestate import GameState
+from ..models.user import User
+from .. import db
 
 main_bp = Blueprint("main", __name__)
 
@@ -73,3 +76,33 @@ def solve_rooks(n=8):
     random.shuffle(solution)
     return solution
 
+@main_bp.route("/save", methods=["POST"])
+def save_game():
+    data = request.json
+
+    board = data["board"]
+    mode = data["mode"]
+
+    game = GameState(
+        user_id=current_user.id,
+        board=json.dumps(board),
+        mode=mode
+    )
+
+    db.session.add(game)
+    db.session.commit()
+
+    return jsonify({"status": "saved"})
+
+@main_bp.route("/load")
+def load_game():
+    game = GameState.query.filter_by(user_id=current_user.id)\
+        .order_by(GameState.id.desc()).first()
+
+    if not game:
+        return jsonify({"board": [-1]*8, "mode": "queens"})
+
+    return jsonify({
+        "board": json.loads(game.board),
+        "mode": game.mode
+    })
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index d51e68c..c8c744a 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -196,4 +196,39 @@ function updateQueenList() {
             count++;
         }
     }
-}
\ No newline at end of file
+}
+
+async function saveGame() {
+    await fetch("/save", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            board: board,
+            mode: mode
+        })
+    });
+
+    alert("💾 Spiel gespeichert!");
+}
+
+async function loadGame() {
+    const res = await fetch("/load");
+    const data = await res.json();
+
+    board = data.board;
+    mode = data.mode;
+
+    // Buttons richtig setzen
+    document.getElementById("btnQueens").classList.remove("active");
+    document.getElementById("btnRooks").classList.remove("active");
+
+    if (mode === "queens") {
+        document.getElementById("btnQueens").classList.add("active");
+    } else {
+        document.getElementById("btnRooks").classList.add("active");
+    }
+
+    drawBoard();
+}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 9db3807..dcf526a 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -62,6 +62,9 @@
                 <button class="btn" onclick="solve()">Solve</button>
                 <button class="btn" onclick="checkSolution()">Check</button>
                 <button class="btn secondary" onclick="resetBoard()">Reset</button>
+
+                <button class="btn" onclick="saveGame()">💾 Save</button>
+                <button class="btn" onclick="loadGame()">📂 Load</button>
             </div>
         </div>
 
diff --git a/database_setup.sql b/database_setup.sql
index e1be1a2..c2ece83 100644
--- a/database_setup.sql
+++ b/database_setup.sql
@@ -5,3 +5,11 @@ CREATE TABLE users (
     email VARCHAR(120) NOT NULL UNIQUE,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );
+
+CREATE TABLE game_state (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id INTEGER NOT NULL,
+    board TEXT NOT NULL,       -- JSON String (z.B. "[0,4,7,5,2,6,1,3]")
+    mode TEXT NOT NULL,        -- "queens" oder "rooks"
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
\ No newline at end of file

From bc377b6e33ef7e7cf83ed2ea8ff48c441d8d9d87 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Mon, 30 Mar 2026 19:03:13 +0200
Subject: [PATCH 05/15] improved javascript structure, added load selection and
 made chessboard selectable

---
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 5694 -> 9286 bytes
 .../__pycache__/main_routes.cpython-312.pyc   | Bin 0 -> 8027 bytes
 app/routes/main_routes.py                     | 179 +++++---
 app/static/css/dashboard.css                  | 140 ++++++-
 app/static/js/dashboard.js                    | 387 ++++++++++++------
 app/templates/dashboard.html                  |  44 +-
 6 files changed, 554 insertions(+), 196 deletions(-)
 create mode 100644 app/routes/__pycache__/main_routes.cpython-312.pyc

diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index c3c7267c6a8196fe1cbc5349f6d8047d4668ab3b..c5a0bbff6a3d1f6c64b0d3e6c19412e50f45f3d0 100644
GIT binary patch
literal 9286
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%0ABS5kstazb=`
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

literal 5694
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

diff --git a/app/routes/__pycache__/main_routes.cpython-312.pyc b/app/routes/__pycache__/main_routes.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..72826714a6570b1c1c9ef42e0cbed4c8cb908f78
GIT binary patch
literal 8027
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
LJ&y&bGJE|maJxr~

literal 0
HcmV?d00001

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 5222b6f..cf8405c 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,20 +1,88 @@
+import json
+import random
+
 from flask import Blueprint, jsonify, render_template, request
-from flask_login  import login_required, current_user
-import random, json
-from ..models.gamestate import GameState
-from ..models.user import User
+from flask_login import current_user, login_required
+
 from .. import db
+from ..models.gamestate import GameState
+
+DEFAULT_BOARD_SIZE = 8
+MIN_BOARD_SIZE = 4
+MAX_BOARD_SIZE = 13
 
 main_bp = Blueprint("main", __name__)
 
+
+def parse_board_size(raw_size, default=DEFAULT_BOARD_SIZE):
+    try:
+        board_size = int(raw_size)
+    except (TypeError, ValueError):
+        board_size = default
+
+    return max(MIN_BOARD_SIZE, min(MAX_BOARD_SIZE, board_size))
+
+
+def solve_queens(board_size):
+    queen_positions = [-1] * board_size
+    queen_solutions = []
+
+    def is_queen_position_safe(row, col):
+        for previous_row in range(row):
+            previous_col = queen_positions[previous_row]
+
+            if previous_col == col:
+                return False
+
+            if abs(previous_col - col) == abs(previous_row - row):
+                return False
+
+        return True
+
+    def place_queen(row):
+        if row == board_size:
+            queen_solutions.append(queen_positions[:])
+            return
+
+        for col in range(board_size):
+            if is_queen_position_safe(row, col):
+                queen_positions[row] = col
+                place_queen(row + 1)
+                queen_positions[row] = -1
+
+    place_queen(0)
+    return queen_solutions
+
+
+def solve_rooks(board_size):
+    rook_positions = list(range(board_size))
+    random.shuffle(rook_positions)
+    return rook_positions
+
+
+def serialize_game_state(game_state):
+    board = json.loads(game_state.board)
+
+    return {
+        "id": game_state.id,
+        "board": board,
+        "mode": game_state.mode,
+        "board_size": len(board),
+        "pieces_placed": sum(1 for column in board if column != -1),
+        "created_at": game_state.created_at.strftime("%Y-%m-%d %H:%M:%S")
+    }
+
+
 @main_bp.route("/")
 def home():
     return render_template("index.html")
 
-@main_bp.route('/dashboard')
+
+@main_bp.route("/dashboard")
 @login_required
 def dashboard():
-    return render_template('dashboard.html', user=current_user)
+    return render_template("dashboard.html", user=current_user)
+
 
 @main_bp.route("/check", methods=["POST"])
 def check():
@@ -22,71 +90,48 @@ def check():
     board = data["board"]
     row = data["row"]
     col = data["col"]
+    piece_mode = data.get("mode", "queens")
 
-    for r in range(len(board)):
-        c = board[r]
-
-        if c == -1 or r == row:
+    for current_row, current_col in enumerate(board):
+        if current_col == -1 or current_row == row:
             continue
 
-        # gleiche Spalte
-        if c == col:
+        same_column = current_col == col
+        same_diagonal = abs(current_col - col) == abs(current_row - row)
+
+        if same_column:
             return jsonify({"valid": False})
 
-        # gleiche Diagonale
-        if abs(c - col) == abs(r - row):
+        if piece_mode == "queens" and same_diagonal:
             return jsonify({"valid": False})
 
     return jsonify({"valid": True})
 
 
 @main_bp.route("/solve")
-def solve():
-    n = 8
-    solutions = []
-    board = [-1] * n
+def solve_queens_route():
+    board_size = parse_board_size(request.args.get("size"))
+    return jsonify(solve_queens(board_size))
 
-    def is_safe(row, col):
-        for r in range(row):
-            c = board[r]
-            if c == col or abs(c - col) == abs(r - row):
-                return False
-        return True
-
-    def backtrack(row):
-        if row == n:
-            solutions.append(board[:])
-            return
-
-        for col in range(n):
-            if is_safe(row, col):
-                board[row] = col
-                backtrack(row + 1)
-                board[row] = -1
-
-    backtrack(0)
-    return jsonify(solutions)
 
 @main_bp.route("/solve_rooks")
 def solve_rooks_route():
-    return jsonify(solve_rooks(8))
+    board_size = parse_board_size(request.args.get("size"))
+    return jsonify(solve_rooks(board_size))
 
-def solve_rooks(n=8):
-    solution = list(range(n))
-    random.shuffle(solution)
-    return solution
 
 @main_bp.route("/save", methods=["POST"])
+@login_required
 def save_game():
     data = request.json
 
     board = data["board"]
-    mode = data["mode"]
+    piece_mode = data["mode"]
 
     game = GameState(
         user_id=current_user.id,
         board=json.dumps(board),
-        mode=mode
+        mode=piece_mode
     )
 
     db.session.add(game)
@@ -94,15 +139,43 @@ def save_game():
 
     return jsonify({"status": "saved"})
 
-@main_bp.route("/load")
-def load_game():
-    game = GameState.query.filter_by(user_id=current_user.id)\
-        .order_by(GameState.id.desc()).first()
 
-    if not game:
-        return jsonify({"board": [-1]*8, "mode": "queens"})
+@main_bp.route("/save_points")
+@login_required
+def list_save_points():
+    saved_games = (
+        GameState.query.filter_by(user_id=current_user.id)
+        .order_by(GameState.id.desc())
+        .all()
+    )
+
+    return jsonify([serialize_game_state(game_state) for game_state in saved_games])
+
+
+@main_bp.route("/load")
+@login_required
+def load_game():
+    latest_game = (
+        GameState.query.filter_by(user_id=current_user.id)
+        .order_by(GameState.id.desc())
+        .first()
+    )
+
+    if not latest_game:
+        return jsonify({"board": [-1] * DEFAULT_BOARD_SIZE, "mode": "queens"})
 
     return jsonify({
-        "board": json.loads(game.board),
-        "mode": game.mode
+        "board": json.loads(latest_game.board),
+        "mode": latest_game.mode
     })
+
+
+@main_bp.route("/load/<int:game_id>")
+@login_required
+def load_specific_game(game_id):
+    selected_game = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
+
+    if not selected_game:
+        return jsonify({"error": "Save point not found"}), 404
+
+    return jsonify(serialize_game_state(selected_game))
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index 19f7438..ee0e1b3 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -44,16 +44,24 @@ body {
     text-align: center;
 }
 
+.board {
+    overflow-x: auto;
+    padding-bottom: 8px;
+}
+
 /* ♟️ Board */
 .board-grid {
+    --label-size: 30px;
+    --cell-size: 60px;
     display: grid;
-    grid-template-columns: 30px repeat(8, 60px);
-    grid-template-rows: 30px repeat(8, 60px);
+    grid-template-columns: var(--label-size) repeat(var(--board-size, 8), var(--cell-size));
+    grid-template-rows: var(--label-size) repeat(var(--board-size, 8), var(--cell-size));
     margin: 20px auto;
     width: max-content;
     border: 6px solid #1e293b;
     border-radius: 10px;
     overflow: hidden;
+    max-width: 100%;
 }
 
 .label {
@@ -63,17 +71,18 @@ body {
     font-weight: bold;
     background: #aec8eb;
     color: #1e293b;
+    width: var(--label-size);
+    height: var(--label-size);
+    font-size: 14px;
 }
 
-
-
 .cell {
-    width: 60px;
-    height: 60px;
+    width: var(--cell-size);
+    height: var(--cell-size);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 30px;
+    font-size: calc(var(--cell-size) * 0.5);
     cursor: pointer;
     transition: 0.2s;
 }
@@ -152,4 +161,119 @@ body {
 
 .btn.active {
     background: #22c55e;
-}
\ No newline at end of file
+}
+
+.board-size-info {
+    margin: 0 0 10px;
+    color: #475569;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(320px, 85vw);
+    height: 100vh;
+    padding: 24px;
+    background: white;
+    box-shadow: -10px 0 24px rgba(15, 23, 42, 0.18);
+    transform: translateX(100%);
+    transition: transform 0.25s ease;
+    z-index: 30;
+}
+
+.sidebar.open {
+    transform: translateX(0);
+}
+
+.save-points-sidebar {
+    width: min(380px, 92vw);
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.sidebar-close {
+    margin: 0;
+}
+
+.sidebar-label {
+    display: block;
+    margin-top: 18px;
+    margin-bottom: 8px;
+    font-weight: bold;
+}
+
+.sidebar input[type="range"] {
+    width: 100%;
+}
+
+.sidebar-size-row {
+    margin: 12px 0 18px;
+    font-size: 18px;
+}
+
+.sidebar-hint {
+    color: #64748b;
+    font-size: 14px;
+}
+
+.save-points-list {
+    display: grid;
+    gap: 12px;
+    margin-top: 18px;
+}
+
+.save-point-card {
+    border: 1px solid #dbe4ee;
+    border-radius: 10px;
+    padding: 14px;
+    background: #f8fafc;
+}
+
+.save-point-card h4 {
+    margin: 0 0 8px;
+    color: #1e293b;
+}
+
+.save-point-meta {
+    margin: 4px 0;
+    color: #475569;
+    font-size: 14px;
+}
+
+.save-point-preview {
+    margin: 10px 0 0;
+    color: #334155;
+    font-size: 14px;
+    word-break: break-word;
+}
+
+.sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.3);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 20;
+}
+
+.sidebar-backdrop.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+@media (max-width: 720px) {
+    .container {
+        padding: 12px;
+    }
+
+    .navbar {
+        padding: 15px 18px;
+    }
+}
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index c8c744a..abb2334 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -1,53 +1,95 @@
-let mode = "queens"; // oder "rooks"
+const DEFAULT_BOARD_SIZE = 8;
+const MIN_BOARD_SIZE = 4;
+const MAX_BOARD_SIZE = 13;
+const EMPTY_CELL = -1;
+
+let mode = "queens";
+let boardSize = DEFAULT_BOARD_SIZE;
+let pendingBoardSize = DEFAULT_BOARD_SIZE;
+let board = createEmptyBoard(boardSize);
+
+const boardDiv = document.getElementById("board");
+const statusMessage = document.getElementById("statusMessage");
+const queenList = document.getElementById("queenList");
+const btnQueens = document.getElementById("btnQueens");
+const btnRooks = document.getElementById("btnRooks");
+const settingsSidebar = document.getElementById("settingsSidebar");
+const sidebarBackdrop = document.getElementById("sidebarBackdrop");
+const savePointsSidebar = document.getElementById("savePointsSidebar");
+const savePointsBackdrop = document.getElementById("savePointsBackdrop");
+const boardSizeInput = document.getElementById("boardSizeInput");
+const boardSizeValue = document.getElementById("boardSizeValue");
+const boardSizeValueMirror = document.getElementById("boardSizeValueMirror");
+const sidebarBoardSizeValue = document.getElementById("sidebarBoardSizeValue");
+const sidebarBoardSizeValueMirror = document.getElementById("sidebarBoardSizeValueMirror");
+const savePointsList = document.getElementById("savePointsList");
+
+function createEmptyBoard(size) {
+    return Array(size).fill(EMPTY_CELL);
+}
+
+function clampBoardSize(size) {
+    return Math.min(MAX_BOARD_SIZE, Math.max(MIN_BOARD_SIZE, Number(size)));
+}
+
+function getColumnLabel(index) {
+    return String.fromCharCode(65 + index);
+}
+
+function updateModeButtons() {
+    btnQueens.classList.toggle("active", mode === "queens");
+    btnRooks.classList.toggle("active", mode === "rooks");
+}
+
+function updateBoardSizeDisplays(size) {
+    boardSizeValue.textContent = size;
+    boardSizeValueMirror.textContent = size;
+    sidebarBoardSizeValue.textContent = size;
+    sidebarBoardSizeValueMirror.textContent = size;
+    boardSizeInput.value = size;
+}
+
+function setStatus(message = "", color = "") {
+    statusMessage.textContent = message;
+    statusMessage.style.color = color;
+}
+
+function updateBoardLayout() {
+    const cellSize = Math.max(32, Math.min(60, Math.floor(480 / boardSize)));
+
+    boardDiv.style.setProperty("--board-size", boardSize);
+    boardDiv.style.setProperty("--cell-size", `${cellSize}px`);
+}
 
 function setMode(newMode) {
     mode = newMode;
     resetBoard();
-
-    document.getElementById("btnQueens").classList.remove("active");
-    document.getElementById("btnRooks").classList.remove("active");
-
-    if (mode === "queens") {
-        document.getElementById("btnQueens").classList.add("active");
-    } else {
-        document.getElementById("btnRooks").classList.add("active");
-    }
-
-    drawBoard();
+    updateModeButtons();
 }
 
-let board = Array(8).fill(-1);
-const boardDiv = document.getElementById("board");
-
 function getConflicts() {
-    let conflicts = [];
+    const conflicts = [];
 
-    for (let r1 = 0; r1 < 8; r1++) {
-        if (board[r1] === -1) continue;
+    for (let rowA = 0; rowA < boardSize; rowA++) {
+        if (board[rowA] === EMPTY_CELL) {
+            continue;
+        }
 
-        for (let r2 = r1 + 1; r2 < 8; r2++) {
-            if (board[r2] === -1) continue;
-
-            let c1 = board[r1];
-            let c2 = board[r2];
-
-            // 🔴 Türme: nur gleiche Spalte
-            if (mode === "rooks") {
-                if (c1 === c2) {
-                    conflicts.push([r1, c1]);
-                    conflicts.push([r2, c2]);
-                }
+        for (let rowB = rowA + 1; rowB < boardSize; rowB++) {
+            if (board[rowB] === EMPTY_CELL) {
+                continue;
             }
 
-            // 🔴 Damen: Spalte + Diagonale
-            else if (mode === "queens") {
-                if (
-                    c1 === c2 ||
-                    Math.abs(c1 - c2) === Math.abs(r1 - r2)
-                ) {
-                    conflicts.push([r1, c1]);
-                    conflicts.push([r2, c2]);
-                }
+            const colA = board[rowA];
+            const colB = board[rowB];
+            const sameColumn = colA === colB;
+            const sameDiagonal = Math.abs(colA - colB) === Math.abs(rowA - rowB);
+
+            // Rooks only attack vertically, queens also attack diagonally.
+            const hasConflict = mode === "rooks" ? sameColumn : sameColumn || sameDiagonal;
+
+            if (hasConflict) {
+                conflicts.push([rowA, colA], [rowB, colB]);
             }
         }
     }
@@ -56,71 +98,48 @@ function getConflicts() {
 }
 
 function checkSolution() {
-    const status = document.getElementById("statusMessage");
-
-    const allPlaced = board.every(col => col !== -1);
+    const allPlaced = board.every((col) => col !== EMPTY_CELL);
 
     if (!allPlaced) {
-        status.textContent = "❗ Noch nicht alle Figuren platziert.";
-        status.style.color = "orange";
+        setStatus("❗ Noch nicht alle Figuren platziert.", "orange");
         return;
     }
 
-    const conflicts = getConflicts();
-
-    if (conflicts.length > 0) {
-        status.textContent = "❌ Es gibt Konflikte!";
-        status.style.color = "red";
+    if (getConflicts().length > 0) {
+        setStatus("❌ Es gibt Konflikte!", "red");
         return;
     }
 
-    status.textContent = "🎉 Perfekt gelöst!";
-    status.style.color = "green";
+    setStatus("🎉 Perfekt geloest!", "green");
 }
 
 function drawBoard() {
     boardDiv.innerHTML = "";
     boardDiv.className = "board-grid";
+    updateBoardLayout();
 
     const conflicts = getConflicts();
-    const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
-
-    for (let row = -1; row < 8; row++) {
-        for (let col = -1; col < 8; col++) {
 
+    for (let row = -1; row < boardSize; row++) {
+        for (let col = -1; col < boardSize; col++) {
             const cell = document.createElement("div");
 
-            // 🔹 Ecke oben links
             if (row === -1 && col === -1) {
                 cell.classList.add("label");
-            }
-
-            // 🔹 Buchstaben (oben)
-            else if (row === -1) {
-                cell.textContent = letters[col];
+            } else if (row === -1) {
+                cell.textContent = getColumnLabel(col);
                 cell.classList.add("label");
-            }
-
-            // 🔹 Zahlen (links)
-            else if (col === -1) {
-                cell.textContent = 8 - row;
+            } else if (col === -1) {
+                cell.textContent = boardSize - row;
                 cell.classList.add("label");
-            }
-
-            // 🔹 echtes Spielfeld
-            else {
-                cell.classList.add("cell");
-
-                if ((row + col) % 2 === 0) {
-                    cell.classList.add("white");
-                } else {
-                    cell.classList.add("black");
-                }
+            } else {
+                cell.classList.add("cell", (row + col) % 2 === 0 ? "white" : "black");
 
                 if (board[row] === col) {
-                    cell.textContent = (mode === "queens") ? "♛" : "♜";
+                    cell.textContent = mode === "queens" ? "♛" : "♜";
 
-                    if (conflicts.some(([r, c]) => r === row && c === col)) {
+                    // Highlight pieces that are part of at least one conflict pair.
+                    if (conflicts.some(([conflictRow, conflictCol]) => conflictRow === row && conflictCol === col)) {
                         cell.classList.add("invalid");
                     }
                 }
@@ -136,65 +155,163 @@ function drawBoard() {
 }
 
 function placeQueen(row, col) {
-    if (board[row] === col) {
-        board[row] = -1;
-    } else {
-        board[row] = col;
-    }
+    board[row] = board[row] === col ? EMPTY_CELL : col;
     drawBoard();
-    updateQueenList();
 }
 
-async function solve() {
+function previewBoardSize(size) {
+    pendingBoardSize = clampBoardSize(size);
+    sidebarBoardSizeValue.textContent = pendingBoardSize;
+    sidebarBoardSizeValueMirror.textContent = pendingBoardSize;
+}
 
-    if (mode === "rooks") {
-        const res = await fetch("/solve_rooks");
-        const solution = await res.json();
+function applyBoardSize() {
+    boardSize = pendingBoardSize;
+    board = createEmptyBoard(boardSize);
+    updateBoardSizeDisplays(boardSize);
+    setStatus(`Brettgroesse auf ${boardSize} x ${boardSize} gesetzt.`, "#2563eb");
+    drawBoard();
+    toggleSidebar(false);
+}
 
-        board = solution;
-        drawBoard();
+function toggleSidebar(forceOpen) {
+    const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !settingsSidebar.classList.contains("open");
+
+    if (shouldOpen) {
+        toggleSavePointsPanel(false);
+    }
+
+    settingsSidebar.classList.toggle("open", shouldOpen);
+    sidebarBackdrop.classList.toggle("visible", shouldOpen);
+    settingsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
+}
+
+function toggleSavePointsPanel(forceOpen) {
+    const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !savePointsSidebar.classList.contains("open");
+
+    savePointsSidebar.classList.toggle("open", shouldOpen);
+    savePointsBackdrop.classList.toggle("visible", shouldOpen);
+    savePointsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
+}
+
+function getPieceLabel(selectedMode) {
+    return selectedMode === "queens" ? "Dame" : "Turm";
+}
+
+function getBoardPreview(savedBoard, limit = 4) {
+    const preview = [];
+
+    for (let row = 0; row < savedBoard.length; row++) {
+        if (savedBoard[row] === EMPTY_CELL) {
+            continue;
+        }
+
+        preview.push(`${getColumnLabel(savedBoard[row])}${savedBoard.length - row}`);
+
+        if (preview.length === limit) {
+            break;
+        }
+    }
+
+    return preview.length > 0 ? preview.join(", ") : "Noch keine Figuren gesetzt";
+}
+
+function renderSavePoints(savePoints) {
+    savePointsList.innerHTML = "";
+
+    if (savePoints.length === 0) {
+        savePointsList.innerHTML = '<p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>';
         return;
     }
 
-    // Damen (wie vorher)
-    const res = await fetch("/solve");
-    const solution = await res.json();
+    for (const savePoint of savePoints) {
+        const item = document.createElement("article");
+        const title = document.createElement("h4");
+        const createdAt = document.createElement("p");
+        const boardMeta = document.createElement("p");
+        const preview = document.createElement("p");
+        const loadButton = document.createElement("button");
 
-    board = Array.isArray(solution[0]) ? solution[0] : solution;
+        item.className = "save-point-card";
+        title.textContent = `Save Point #${savePoint.id}`;
+        createdAt.className = "save-point-meta";
+        createdAt.textContent = `Gespeichert: ${savePoint.created_at}`;
+        boardMeta.className = "save-point-meta";
+        boardMeta.textContent = `${getPieceLabel(savePoint.mode)} | ${savePoint.board_size} x ${savePoint.board_size} | ${savePoint.pieces_placed}/${savePoint.board_size} gesetzt`;
+        preview.className = "save-point-preview";
+        preview.textContent = `Vorschau: ${getBoardPreview(savePoint.board)}`;
+
+        loadButton.className = "btn";
+        loadButton.type = "button";
+        loadButton.textContent = "Diesen laden";
+        loadButton.onclick = () => loadSavePoint(savePoint.id);
+
+        item.appendChild(title);
+        item.appendChild(createdAt);
+        item.appendChild(boardMeta);
+        item.appendChild(preview);
+        item.appendChild(loadButton);
+        savePointsList.appendChild(item);
+    }
+}
+
+async function refreshSavePoints() {
+    const response = await fetch("/save_points");
+    const savePoints = await response.json();
+    renderSavePoints(savePoints);
+}
+
+async function openSavePointsPanel() {
+    await refreshSavePoints();
+    toggleSidebar(false);
+    toggleSavePointsPanel(true);
+}
+
+function applyLoadedGame(data) {
+    board = data.board;
+    boardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
+    pendingBoardSize = boardSize;
+    mode = data.mode;
+
+    updateModeButtons();
+    updateBoardSizeDisplays(boardSize);
     drawBoard();
 }
 
+async function solve() {
+    const endpoint = mode === "rooks" ? "/solve_rooks" : "/solve";
+    const response = await fetch(`${endpoint}?size=${boardSize}`);
+    const solution = await response.json();
+
+    // The queens endpoint may return multiple solutions; we display the first one.
+    board = mode === "queens" && Array.isArray(solution[0]) ? solution[0] : solution;
+    setStatus(`Loesung fuer ${boardSize} x ${boardSize} geladen.`, "green");
+    drawBoard();
+}
 
 function resetBoard() {
-    const status = document.getElementById("statusMessage");
-    board = Array(8).fill(-1);
+    board = createEmptyBoard(boardSize);
+    setStatus();
     drawBoard();
-    updateQueenList();
-    status.textContent = "";
 }
 
-drawBoard();
-
 function updateQueenList() {
-    const list = document.getElementById("queenList");
-    list.innerHTML = "";
-
-    const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+    queenList.innerHTML = "";
 
     let count = 1;
 
-    for (let row = 0; row < 8; row++) {
-        if (board[row] !== -1) {
-            let col = board[row];
-
-            let pos = letters[col] + (8 - row);
-
-            const li = document.createElement("li");
-            li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${pos}`;
-
-            list.appendChild(li);
-            count++;
+    for (let row = 0; row < boardSize; row++) {
+        if (board[row] === EMPTY_CELL) {
+            continue;
         }
+
+        const col = board[row];
+        const position = `${getColumnLabel(col)}${boardSize - row}`;
+        const li = document.createElement("li");
+
+        li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${position}`;
+        queenList.appendChild(li);
+        count++;
     }
 }
 
@@ -205,30 +322,38 @@ async function saveGame() {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            board: board,
-            mode: mode
+            board,
+            mode,
+            boardSize
         })
     });
 
+    await refreshSavePoints();
     alert("💾 Spiel gespeichert!");
 }
 
 async function loadGame() {
-    const res = await fetch("/load");
-    const data = await res.json();
+    const response = await fetch("/load");
+    const data = await response.json();
+    applyLoadedGame(data);
+}
 
-    board = data.board;
-    mode = data.mode;
+async function loadSavePoint(savePointId) {
+    const response = await fetch(`/load/${savePointId}`);
 
-    // Buttons richtig setzen
-    document.getElementById("btnQueens").classList.remove("active");
-    document.getElementById("btnRooks").classList.remove("active");
-
-    if (mode === "queens") {
-        document.getElementById("btnQueens").classList.add("active");
-    } else {
-        document.getElementById("btnRooks").classList.add("active");
+    if (!response.ok) {
+        setStatus("❌ Dieser Speicherstand konnte nicht geladen werden.", "red");
+        return;
     }
 
-    drawBoard();
+    const data = await response.json();
+
+    applyLoadedGame(data);
+    setStatus(`Speicherstand #${savePointId} geladen.`, "green");
+    toggleSavePointsPanel(false);
 }
+
+pendingBoardSize = boardSize;
+updateModeButtons();
+updateBoardSizeDisplays(boardSize);
+drawBoard();
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index dcf526a..9c988c1 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -48,12 +48,15 @@
         <div class="mode-switch">
             <button class="btn active" onclick="setMode('queens')" id="btnQueens">♛ Damen</button>
             <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks">♜ Türme</button>
+            <button class="btn secondary" onclick="toggleSidebar()" id="btnSidebar">Board Settings</button>
         </div>
 
 
         <!-- ♟️ Game Card -->
         <div class="card game-card">
-            <h2>♟️ 8-Damen Spiel</h2>
+            <h2>♟️ Damen- und Tuerme-Spiel</h2>
+            <p class="board-size-info">Aktuelle Brettgroesse: <span id="boardSizeValue">8</span> x <span
+                    id="boardSizeValueMirror">8</span></p>
 
             <p id="statusMessage"></p>
             <div class="board" id="board"></div>
@@ -64,18 +67,51 @@
                 <button class="btn secondary" onclick="resetBoard()">Reset</button>
 
                 <button class="btn" onclick="saveGame()">💾 Save</button>
-                <button class="btn" onclick="loadGame()">📂 Load</button>
+                <button class="btn" onclick="openSavePointsPanel()">📂 Load</button>
             </div>
         </div>
 
         <div class="card">
-            <h3>📋 Damen Positionen</h3>
+            <h3>📋 Figuren Positionen</h3>
             <ul id="queenList"></ul>
         </div>
     </div>
 
+    <aside class="sidebar" id="settingsSidebar" aria-hidden="true">
+        <div class="sidebar-header">
+            <h3>Brettgroesse</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSidebar(false)" type="button">Schliessen</button>
+        </div>
+
+        <p>Wähle eine Grösse zwischen 4 und 13.</p>
+
+        <label class="sidebar-label" for="boardSizeInput">Groesse</label>
+        <input id="boardSizeInput" type="range" min="4" max="13" value="8" oninput="previewBoardSize(this.value)">
+        <div class="sidebar-size-row">
+            <strong><span id="sidebarBoardSizeValue">8</span> x <span id="sidebarBoardSizeValueMirror">8</span></strong>
+        </div>
+
+        <button class="btn" onclick="applyBoardSize()" type="button">Apply Size</button>
+        <p class="sidebar-hint">Das Brett wird beim Ändern zur Sicherheit zurückgesetzt.</p>
+    </aside>
+
+    <aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
+        <div class="sidebar-header">
+            <h3>Save Points</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSavePointsPanel(false)" type="button">Schliessen</button>
+        </div>
+
+        <p>Waehle einen Speicherstand aus der Liste.</p>
+        <div class="save-points-list" id="savePointsList">
+            <p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>
+        </div>
+    </aside>
+
+    <div class="sidebar-backdrop" id="sidebarBackdrop" onclick="toggleSidebar(false)"></div>
+    <div class="sidebar-backdrop" id="savePointsBackdrop" onclick="toggleSavePointsPanel(false)"></div>
+
     <script src="../static/js/dashboard.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>

From b90d6d0f03cf7ebc81b966879f2a884160d23ce9 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Mon, 30 Mar 2026 19:22:14 +0200
Subject: [PATCH 06/15] Improved save and load system, added description and
 sort options

---
 app/__pycache__/__init__.cpython-311.pyc      | Bin 2477 -> 2477 bytes
 app/__pycache__/__init__.cpython-312.pyc      | Bin 0 -> 4439 bytes
 .../__pycache__/gamestate.cpython-311.pyc     | Bin 1108 -> 1747 bytes
 .../__pycache__/gamestate.cpython-312.pyc     | Bin 0 -> 1743 bytes
 app/models/gamestate.py                       |  22 ++-
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 9286 -> 13583 bytes
 .../__pycache__/main_routes.cpython-312.pyc   | Bin 8027 -> 11962 bytes
 app/routes/main_routes.py                     | 106 ++++++++---
 app/static/css/dashboard.css                  |  61 +++++++
 app/static/js/dashboard.js                    | 165 ++++++++++++++++--
 app/templates/dashboard.html                  |  57 +++++-
 database_setup.sql                            |  13 +-
 12 files changed, 378 insertions(+), 46 deletions(-)
 create mode 100644 app/__pycache__/__init__.cpython-312.pyc
 create mode 100644 app/models/__pycache__/gamestate.cpython-312.pyc

diff --git a/app/__pycache__/__init__.cpython-311.pyc b/app/__pycache__/__init__.cpython-311.pyc
index 3a6324cf054d49b95230387a0b02f799fe94505e..c75a2cb53ecd25c07bde4182f6d7f95ab4362cfc 100644
GIT binary patch
delta 22
ccmZ20yjGZZIWI340}$L_e=76lM&1RS082~<S^xk5

delta 22
ccmZ20yjGZZIWI340}yyboyz>bk#_+n07Mf8lmGw#

diff --git a/app/__pycache__/__init__.cpython-312.pyc b/app/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..ae97128424de79a8757e3b913bbd82e78df38ceb
GIT binary patch
literal 4439
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

literal 0
HcmV?d00001

diff --git a/app/models/__pycache__/gamestate.cpython-311.pyc b/app/models/__pycache__/gamestate.cpython-311.pyc
index 02fc1f9e2bb7ad5c99298bffc0f3636e79837b3f..9a1f79a2f5a8535fcb9975de9cf305e3db026cce 100644
GIT binary patch
literal 1747
zcmb_cO=#Oz9G7I-mi$#qO&YSSqXgE@1BVdruw^3<FHPo@6f@U{8W$n^DXBYIa%DML
z8Ui}(kb@6S5yTrl^yFnEgB*M8Mxn5i4L%5+3OnVNlAe0%|JjjK+hZ`;lit(+<M;o3
z@9EcI&_}?~fB&oSv5O%7#*8!E7sUCOKpYT=K%`6*$qY#n6tO}e>L&uZB=QmE7&O7d
z5zOAmxDcHpBJNYHkB~Nna(PFGzupVx{1*Tm5E79g5s{$~nQ>8sL_c!EW7^{wBI?-H
z1pHAyXvX_5X!_Vagl0z2Y~S}N+Bb;qa{fNv(<C7in7x5U?E{1M1C`Lod&~^AEI5cC
zipLJeL%tCYp+OH2@q_x1e*}MJ1RuVv2PzuQkQ>4Cmw1SF)#09vIn;;WCNM{R!Es=y
z{_+3Q`+v?R*rXvln7xs?hC*<Fuh{I0Sd>z_s7tnQ14yBa>3eXd{UxnX6t!*P2Wfj5
zct)wnvY3;lQ+%yX8CW8ehCj9!N$X-o)=!hbJqe^01w5e}DREP>`=C%+(l#YcxWGnS
zU0W@L9Wbg=DIo}aH!@)}f`IJ>!S)G4QAHIQ(*Z$vToL69O;8YYoJ)_@@Wr$}->Pz@
zsMy|wqDvc+W>W=Zdn*uD0D`_J{ixgSoGNO__M~*JplsMQxQD{KLZMuEBH3&ilJ3TL
zNEKS+jjO6GiHhwnl!bM1Q`HI}WtMQO3Ps7L*DFfib}8zX?aONth>;-bwy#$drhg;O
zAxGlfQhq+0%0GmfvUgJ7WfM!u#jKcrs7Dc$tVH#Sq!p!TNmHS?Vpc4bvN%P#oW+~d
z-J6-xwub*7-31q3PQW!a`j0hs!&rOG@_T%BvNmVVAAZqdXWQ&-hn+RzR%l``S1r`3
zhVL-l3dP!?SSJ)SR$d3j_u|z=EoW{Vx?6#nc3`Fxm@#f!{;|Ee>Q}Y<weQXQb#4EF
z`2g(vv9>?f@yCoMi~Fd?o0Ijq#{7x<`QsM1*ya{H+@i5+g(qv2$<`zF=|<#P{O4#R
zdh+RuPg>z*JDlu<lSaZpOgC;F-hMvU3NN(73!U%+X!xnxv>B<#8>=VdFWfDDxy>(k
z_+{hHWxTIJqrKdEwe#oBAG<GiTU@%$r8`_2BKLB#7+=+Iao4PgNptI9=jqP=uDNS*
zSIvoosi#x>*Ujr^tef||Az*on7h@Ga+AXKIcO$eG#7y^ex!3SM^g4eNOS`zwfO^M#
t(>tXL+ULOHe`a|NmNOSgk`}?W2H!K9Cp~Ax=mPCx-eCFLe^7SAy$5p?km~>d

literal 1108
zcmaJ<zfaph6h7NY9LGu8pjH+AF)(HzLWH5ERjSeyN-I#+z(5paIk_Xa*iP!$Dr^}#
zWXO<8k;uT%DWwWSTOsv-s5&H4hUg}wPHa?kV(PmDLj$OH_TBgHz3<)k?(S146hP2^
zrhjNP4xwMnaGUQG9M1ySMi^mEM+TSXID~mD=)57M1rG6O4q?xGguO%{+#8QeZvtwa
zS!pl!rBGBn<iQ{1D37y;EE1r!Tq4$jwyBvpm&<1Fsc}37!nP4XX%3?_&m$t7Zvxnj
z19^LV6VkWX7X6m?{U=)3^IV7)FGc&^O!#uNG#uTx`iIFl*xLlvE%*oR3cftdhf0EO
zG~kenKZafO@7x5Vb+)kQyHLqBEW%;?sWhh=BxS2MS%QO>i<V}n)|RqCwr0Whn~tul
zS)Cj*-LN2HvZgw^y%@bt{fc4&Sy5;}QH%n1bcTb9^43xHfyWYnMtx5Ux?`ABoHuQf
zCl=*3OhpIoQ~}^wBAYh#W(%r?sV`+)nwh5_$VaF@$#iK3p`JCz%u&HCyrY4fMPL~#
zs{I)qvkFg=x#>(Qw+;d_FH_Gm^T}6FGHPz!9><{19Jd`}8DzX@6`&F$qZW%9mR>Jq
z^58GA;$y`vON3PYfj!Am1BUWh?@1$-k?Lq|vOc{#)s`kY(nMF9D9`l5w<_7H*5G#n
zyUXoxyc3Rh!}0RmLGWf}raE8C*7LjGb}-fn#=5~+`B_iCQJJhhsIAmq*H;?Wht>Kj
z@Z@+$j(6pFIe8GdT^p&7HYRr-e&P4U@A5bKYiK{zjwCvfL^qNszhK?E>q=dW`Y0Nl
zvb?6Nr42<d<TcY`Po8=gSe1ji?l4B5b`Q{r|Iy&W64n@)>=Bk!7>)#v<9aC49{zf0
ctUdf4c|`8<5xP9oB+!2UH}m|t!rhnf7vUZSivR!s

diff --git a/app/models/__pycache__/gamestate.cpython-312.pyc b/app/models/__pycache__/gamestate.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..db13518392aa5ee34fb3b8da4780cd331dbc795d
GIT binary patch
literal 1743
zcmcIkO=ufO7@b}1N~_gREH$>Ox(%*r>u#Y*ae9eT0#%b3yCj4<K3Gtem1iv0UF|BP
zl~u(ARLH?PNsA9F(Sv$)kqbWNn9xHYz3Q+G6aqc@R&aXBsWU6dR*7Y3p>vpd-`jcL
z_swHxev8FqK!^Ry3;o>y0DrJxG{hk|&QRb22q0&GBA4Shz=I_K`NseT5Vs|a1gC3{
z=3*lks0oUA#8aqngopVJpB_%3;d*?DZg&9!ISzsx54l``2T0iRTN@Vu#zz0iun6)8
zfgUSDM=ta)wZegTqLt3kCI|V)XE?5vCux0tW?VPGFxcaUXgp7JQl1HC7hvc>Ix##p
zNj<TP@M#xN9?KM;l!^9nrWY_WroM2FdhQG_1nTAKDH7+XKR8QGd-~{2eoJ|i>kX-c
z=!s|3|9`dr&|j=KyjZ!JT3oq6!b@5at=gK6h+LphEi-(d-m6Fn>qQOM)bCL3HjO2-
zVi;Q9Ku7Eb9Z7Ujc+3_Of@o8#81~UU8a<4znI_Ey=T^0CL{2uv%Ls2HtPb}o0bh&b
zEP-U1l@g?d?<y%GsVdW}Dv?#SXu*oXa8y+vR5WAwC8nx2>tzsP_Arp(SC&yJnk2Mr
z+Ngjq;dMwt6<SuMK)8>-w~3gyGz>{_)yBG6AOcNK5AKs{S$~K~xJ;Y&>yMyCtqEl<
z%Rrh*B6?Zf)V3|GQ&zgktkR2!2%8mig9J>gO5_cUC=FH3Ci37=4F3#{X^-G_N-LGF
zu&PG+3iI2y`*Nv<*}LdZ>@4N?=^cIyyo+=7J1@h@-DES}NVgW<jFZ{_ydVCop7r9X
z-F#DT=xx3$cjW!Ge*9{E>1A|!H``opEVuG*!71#E{pjWTEiZC$cd>b`ajmu9`o>*%
z*4udRTdIg$t>5$#@3fL`+DW$;yO~brP<-;BpZK!A;!UMnyc>4HZKXZmRXWN~*&jbW
z{P5|e{?xtt^6A(4?m}l_|JIYm{?rZ1CudvpuHq=|Y<H!zayb1|>?d#6zaFo0y>p%N
z_<8kN_4&@TonIgI6Kk~Is1Hw)n~_GuOU!twv|Dwm?vAsw_sC1U<))mJJL}Buz4t0C
zCWAk$;DwQAcNGE0Sm6H%;vMGiz)^O82m3yz=(Y64;D@?_KcOLeD9dlt>CXVialeDa
SD<R1R>A59G`U_C#EB^*Ewp?xi

literal 0
HcmV?d00001

diff --git a/app/models/gamestate.py b/app/models/gamestate.py
index d68aa08..7aef035 100644
--- a/app/models/gamestate.py
+++ b/app/models/gamestate.py
@@ -1,11 +1,21 @@
 from .. import db
-from flask_login import UserMixin
 
-class GameState(UserMixin, db.Model):
+class GameState(db.Model):
+    __tablename__ = "game_state"
+
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer, nullable=False)
 
-    board = db.Column(db.Text, nullable=False)  # JSON String
-    mode = db.Column(db.String(10), nullable=False)  # queens / rooks
-
-    created_at = db.Column(db.DateTime, default=db.func.now())
+    board = db.Column(db.Text, nullable=False)
+    mode = db.Column(db.String(10), nullable=False)
+    board_size = db.Column(db.Integer, nullable=False, default=8)
+    save_name = db.Column(db.String(80), nullable=False, default="Unnamed Save")
+    save_note = db.Column(db.Text, nullable=False, default="")
+    is_favorite = db.Column(db.Boolean, nullable=False, default=False)
+    created_at = db.Column(db.DateTime, nullable=False, server_default=db.func.now())
+    updated_at = db.Column(
+        db.DateTime,
+        nullable=False,
+        server_default=db.func.now(),
+        onupdate=db.func.now()
+    )
diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index c5a0bbff6a3d1f6c64b0d3e6c19412e50f45f3d0..ec65ad5f4128bc316292c594bb4bf37706520277 100644
GIT binary patch
delta 5741
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

delta 2675
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

diff --git a/app/routes/__pycache__/main_routes.cpython-312.pyc b/app/routes/__pycache__/main_routes.cpython-312.pyc
index 72826714a6570b1c1c9ef42e0cbed4c8cb908f78..237fe6ebaf62d02e644b984c2ee3ad75f1e36916 100644
GIT binary patch
literal 11962
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
C1s!Vu

delta 2366
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
R#p3&S)T8$$h3$8W@E>KLEdl@l

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index cf8405c..c1b77b2 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -23,6 +23,10 @@ def parse_board_size(raw_size, default=DEFAULT_BOARD_SIZE):
     return max(MIN_BOARD_SIZE, min(MAX_BOARD_SIZE, board_size))
 
 
+def parse_favorite_flag(raw_value):
+    return str(raw_value).lower() in {"1", "true", "yes", "on"}
+
+
 def solve_queens(board_size):
     queen_positions = [-1] * board_size
     queen_solutions = []
@@ -67,12 +71,43 @@ def serialize_game_state(game_state):
         "id": game_state.id,
         "board": board,
         "mode": game_state.mode,
-        "board_size": len(board),
+        "board_size": game_state.board_size,
+        "save_name": game_state.save_name,
+        "save_note": game_state.save_note,
+        "is_favorite": game_state.is_favorite,
         "pieces_placed": sum(1 for column in board if column != -1),
-        "created_at": game_state.created_at.strftime("%Y-%m-%d %H:%M:%S")
+        "created_at": game_state.created_at.strftime("%Y-%m-%d %H:%M:%S"),
+        "updated_at": game_state.updated_at.strftime("%Y-%m-%d %H:%M:%S")
     }
 
 
+def build_save_point_query():
+    query = GameState.query.filter_by(user_id=current_user.id)
+
+    selected_mode = request.args.get("mode")
+    board_size = request.args.get("board_size")
+    favorites_only = request.args.get("favorites_only")
+    sort_by = request.args.get("sort", "newest")
+
+    if selected_mode in {"queens", "rooks"}:
+        query = query.filter_by(mode=selected_mode)
+
+    if board_size not in {None, "", "all"}:
+        query = query.filter_by(board_size=parse_board_size(board_size))
+
+    if parse_favorite_flag(favorites_only):
+        query = query.filter_by(is_favorite=True)
+
+    sort_options = {
+        "newest": GameState.created_at.desc(),
+        "oldest": GameState.created_at.asc(),
+        "updated": GameState.updated_at.desc(),
+        "favorites": GameState.is_favorite.desc()
+    }
+
+    return query.order_by(sort_options.get(sort_by, GameState.created_at.desc()), GameState.id.desc())
+
+
 @main_bp.route("/")
 def home():
     return render_template("index.html")
@@ -127,29 +162,63 @@ def save_game():
 
     board = data["board"]
     piece_mode = data["mode"]
+    board_size = parse_board_size(data.get("boardSize"), default=len(board))
+    save_name = (data.get("saveName") or "").strip() or f"{piece_mode.title()} Save"
+    save_note = (data.get("saveNote") or "").strip()
+    is_favorite = bool(data.get("isFavorite"))
 
-    game = GameState(
+    game_state = GameState(
         user_id=current_user.id,
         board=json.dumps(board),
-        mode=piece_mode
+        mode=piece_mode,
+        board_size=board_size,
+        save_name=save_name,
+        save_note=save_note,
+        is_favorite=is_favorite
     )
 
-    db.session.add(game)
+    db.session.add(game_state)
     db.session.commit()
 
-    return jsonify({"status": "saved"})
+    return jsonify({
+        "status": "saved",
+        "save_point": serialize_game_state(game_state)
+    })
 
 
 @main_bp.route("/save_points")
 @login_required
 def list_save_points():
-    saved_games = (
-        GameState.query.filter_by(user_id=current_user.id)
-        .order_by(GameState.id.desc())
-        .all()
-    )
+    save_points = build_save_point_query().all()
+    return jsonify([serialize_game_state(game_state) for game_state in save_points])
 
-    return jsonify([serialize_game_state(game_state) for game_state in saved_games])
+
+@main_bp.route("/save_points/<int:game_id>/favorite", methods=["POST"])
+@login_required
+def toggle_save_point_favorite(game_id):
+    game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
+
+    if not game_state:
+        return jsonify({"error": "Save point not found"}), 404
+
+    game_state.is_favorite = not game_state.is_favorite
+    db.session.commit()
+
+    return jsonify(serialize_game_state(game_state))
+
+
+@main_bp.route("/save_points/<int:game_id>", methods=["DELETE"])
+@login_required
+def delete_save_point(game_id):
+    game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
+
+    if not game_state:
+        return jsonify({"error": "Save point not found"}), 404
+
+    db.session.delete(game_state)
+    db.session.commit()
+
+    return jsonify({"status": "deleted"})
 
 
 @main_bp.route("/load")
@@ -157,25 +226,22 @@ def list_save_points():
 def load_game():
     latest_game = (
         GameState.query.filter_by(user_id=current_user.id)
-        .order_by(GameState.id.desc())
+        .order_by(GameState.created_at.desc(), GameState.id.desc())
         .first()
     )
 
     if not latest_game:
         return jsonify({"board": [-1] * DEFAULT_BOARD_SIZE, "mode": "queens"})
 
-    return jsonify({
-        "board": json.loads(latest_game.board),
-        "mode": latest_game.mode
-    })
+    return jsonify(serialize_game_state(latest_game))
 
 
 @main_bp.route("/load/<int:game_id>")
 @login_required
 def load_specific_game(game_id):
-    selected_game = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
+    game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
 
-    if not selected_game:
+    if not game_state:
         return jsonify({"error": "Save point not found"}), 404
 
-    return jsonify(serialize_game_state(selected_game))
+    return jsonify(serialize_game_state(game_state))
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index ee0e1b3..c3ca90f 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -190,6 +190,10 @@ body {
     width: min(380px, 92vw);
 }
 
+.save-sidebar {
+    width: min(360px, 90vw);
+}
+
 .sidebar-header {
     display: flex;
     justify-content: space-between;
@@ -212,6 +216,29 @@ body {
     width: 100%;
 }
 
+.sidebar-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    font: inherit;
+    box-sizing: border-box;
+    background: #fff;
+}
+
+.sidebar-textarea {
+    resize: vertical;
+    min-height: 96px;
+}
+
+.sidebar-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 16px 0 18px;
+    color: #334155;
+}
+
 .sidebar-size-row {
     margin: 12px 0 18px;
     font-size: 18px;
@@ -228,6 +255,14 @@ body {
     margin-top: 18px;
 }
 
+.save-point-filters {
+    display: grid;
+    gap: 8px;
+    margin-top: 18px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
 .save-point-card {
     border: 1px solid #dbe4ee;
     border-radius: 10px;
@@ -253,6 +288,32 @@ body {
     word-break: break-word;
 }
 
+.save-point-note {
+    margin: 10px 0 0;
+    color: #475569;
+    font-size: 14px;
+}
+
+.save-point-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
+}
+
+.save-point-actions .btn {
+    margin: 0;
+}
+
+.btn.ghost {
+    background: #e2e8f0;
+    color: #1e293b;
+}
+
+.btn.ghost:hover {
+    background: #cbd5e1;
+}
+
 .sidebar-backdrop {
     position: fixed;
     inset: 0;
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index abb2334..437d712 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -15,6 +15,8 @@ const btnQueens = document.getElementById("btnQueens");
 const btnRooks = document.getElementById("btnRooks");
 const settingsSidebar = document.getElementById("settingsSidebar");
 const sidebarBackdrop = document.getElementById("sidebarBackdrop");
+const saveSidebar = document.getElementById("saveSidebar");
+const saveBackdrop = document.getElementById("saveBackdrop");
 const savePointsSidebar = document.getElementById("savePointsSidebar");
 const savePointsBackdrop = document.getElementById("savePointsBackdrop");
 const boardSizeInput = document.getElementById("boardSizeInput");
@@ -23,6 +25,13 @@ const boardSizeValueMirror = document.getElementById("boardSizeValueMirror");
 const sidebarBoardSizeValue = document.getElementById("sidebarBoardSizeValue");
 const sidebarBoardSizeValueMirror = document.getElementById("sidebarBoardSizeValueMirror");
 const savePointsList = document.getElementById("savePointsList");
+const saveNameInput = document.getElementById("saveNameInput");
+const saveNoteInput = document.getElementById("saveNoteInput");
+const saveFavoriteInput = document.getElementById("saveFavoriteInput");
+const savePointModeFilter = document.getElementById("savePointModeFilter");
+const savePointSizeFilter = document.getElementById("savePointSizeFilter");
+const savePointSortFilter = document.getElementById("savePointSortFilter");
+const savePointFavoritesOnly = document.getElementById("savePointFavoritesOnly");
 
 function createEmptyBoard(size) {
     return Array(size).fill(EMPTY_CELL);
@@ -67,6 +76,12 @@ function setMode(newMode) {
     updateModeButtons();
 }
 
+function closeAllPanels() {
+    toggleSidebar(false);
+    toggleSavePanel(false);
+    toggleSavePointsPanel(false);
+}
+
 function getConflicts() {
     const conflicts = [];
 
@@ -178,6 +193,7 @@ function toggleSidebar(forceOpen) {
     const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !settingsSidebar.classList.contains("open");
 
     if (shouldOpen) {
+        toggleSavePanel(false);
         toggleSavePointsPanel(false);
     }
 
@@ -186,9 +202,27 @@ function toggleSidebar(forceOpen) {
     settingsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
 }
 
+function toggleSavePanel(forceOpen) {
+    const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !saveSidebar.classList.contains("open");
+
+    if (shouldOpen) {
+        toggleSidebar(false);
+        toggleSavePointsPanel(false);
+    }
+
+    saveSidebar.classList.toggle("open", shouldOpen);
+    saveBackdrop.classList.toggle("visible", shouldOpen);
+    saveSidebar.setAttribute("aria-hidden", String(!shouldOpen));
+}
+
 function toggleSavePointsPanel(forceOpen) {
     const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !savePointsSidebar.classList.contains("open");
 
+    if (shouldOpen) {
+        toggleSidebar(false);
+        toggleSavePanel(false);
+    }
+
     savePointsSidebar.classList.toggle("open", shouldOpen);
     savePointsBackdrop.classList.toggle("visible", shouldOpen);
     savePointsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
@@ -198,6 +232,21 @@ function getPieceLabel(selectedMode) {
     return selectedMode === "queens" ? "Dame" : "Turm";
 }
 
+function getPlacedPieceCount() {
+    return board.filter((col) => col !== EMPTY_CELL).length;
+}
+
+function resetSaveForm() {
+    saveNameInput.value = `${getPieceLabel(mode)} ${boardSize}x${boardSize} - ${getPlacedPieceCount()} gesetzt`;
+    saveNoteInput.value = "";
+    saveFavoriteInput.checked = false;
+}
+
+function openSavePanel() {
+    resetSaveForm();
+    toggleSavePanel(true);
+}
+
 function getBoardPreview(savedBoard, limit = 4) {
     const preview = [];
 
@@ -216,11 +265,40 @@ function getBoardPreview(savedBoard, limit = 4) {
     return preview.length > 0 ? preview.join(", ") : "Noch keine Figuren gesetzt";
 }
 
+function getSavePointFilters() {
+    const params = new URLSearchParams();
+
+    if (savePointModeFilter.value !== "all") {
+        params.set("mode", savePointModeFilter.value);
+    }
+
+    if (savePointSizeFilter.value !== "all") {
+        params.set("board_size", savePointSizeFilter.value);
+    }
+
+    params.set("sort", savePointSortFilter.value);
+
+    if (savePointFavoritesOnly.checked) {
+        params.set("favorites_only", "true");
+    }
+
+    return params.toString();
+}
+
+function createSavePointActionButton(label, className, onClick) {
+    const button = document.createElement("button");
+    button.className = className;
+    button.type = "button";
+    button.textContent = label;
+    button.onclick = onClick;
+    return button;
+}
+
 function renderSavePoints(savePoints) {
     savePointsList.innerHTML = "";
 
     if (savePoints.length === 0) {
-        savePointsList.innerHTML = '<p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>';
+        savePointsList.innerHTML = '<p class="sidebar-hint">Keine Speicherstaende fuer diese Filter gefunden.</p>';
         return;
     }
 
@@ -228,42 +306,54 @@ function renderSavePoints(savePoints) {
         const item = document.createElement("article");
         const title = document.createElement("h4");
         const createdAt = document.createElement("p");
+        const updatedAt = document.createElement("p");
         const boardMeta = document.createElement("p");
         const preview = document.createElement("p");
-        const loadButton = document.createElement("button");
+        const note = document.createElement("p");
+        const actions = document.createElement("div");
 
         item.className = "save-point-card";
-        title.textContent = `Save Point #${savePoint.id}`;
+        title.textContent = `${savePoint.is_favorite ? "★ " : ""}${savePoint.save_name}`;
         createdAt.className = "save-point-meta";
-        createdAt.textContent = `Gespeichert: ${savePoint.created_at}`;
+        createdAt.textContent = `Erstellt: ${savePoint.created_at}`;
+        updatedAt.className = "save-point-meta";
+        updatedAt.textContent = `Aktualisiert: ${savePoint.updated_at}`;
         boardMeta.className = "save-point-meta";
         boardMeta.textContent = `${getPieceLabel(savePoint.mode)} | ${savePoint.board_size} x ${savePoint.board_size} | ${savePoint.pieces_placed}/${savePoint.board_size} gesetzt`;
         preview.className = "save-point-preview";
         preview.textContent = `Vorschau: ${getBoardPreview(savePoint.board)}`;
+        note.className = "save-point-note";
+        note.textContent = savePoint.save_note ? `Notiz: ${savePoint.save_note}` : "Notiz: Keine Notiz";
+        actions.className = "save-point-actions";
 
-        loadButton.className = "btn";
-        loadButton.type = "button";
-        loadButton.textContent = "Diesen laden";
-        loadButton.onclick = () => loadSavePoint(savePoint.id);
+        actions.appendChild(createSavePointActionButton("Laden", "btn", () => loadSavePoint(savePoint.id)));
+        actions.appendChild(createSavePointActionButton(
+            savePoint.is_favorite ? "Favorit entfernen" : "Als Favorit",
+            "btn secondary",
+            () => toggleSavePointFavorite(savePoint.id)
+        ));
+        actions.appendChild(createSavePointActionButton("Loeschen", "btn ghost", () => deleteSavePoint(savePoint.id)));
 
         item.appendChild(title);
         item.appendChild(createdAt);
+        item.appendChild(updatedAt);
         item.appendChild(boardMeta);
         item.appendChild(preview);
-        item.appendChild(loadButton);
+        item.appendChild(note);
+        item.appendChild(actions);
         savePointsList.appendChild(item);
     }
 }
 
 async function refreshSavePoints() {
-    const response = await fetch("/save_points");
+    const queryString = getSavePointFilters();
+    const response = await fetch(`/save_points${queryString ? `?${queryString}` : ""}`);
     const savePoints = await response.json();
     renderSavePoints(savePoints);
 }
 
 async function openSavePointsPanel() {
     await refreshSavePoints();
-    toggleSidebar(false);
     toggleSavePointsPanel(true);
 }
 
@@ -316,7 +406,7 @@ function updateQueenList() {
 }
 
 async function saveGame() {
-    await fetch("/save", {
+    const response = await fetch("/save", {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
@@ -324,12 +414,23 @@ async function saveGame() {
         body: JSON.stringify({
             board,
             mode,
-            boardSize
+            boardSize,
+            saveName: saveNameInput.value,
+            saveNote: saveNoteInput.value,
+            isFavorite: saveFavoriteInput.checked
         })
     });
 
+    if (!response.ok) {
+        setStatus("❌ Der Speicherstand konnte nicht gespeichert werden.", "red");
+        return;
+    }
+
+    const data = await response.json();
+
+    toggleSavePanel(false);
     await refreshSavePoints();
-    alert("💾 Spiel gespeichert!");
+    setStatus(`Speicherpunkt "${data.save_point.save_name}" gespeichert.`, "green");
 }
 
 async function loadGame() {
@@ -349,10 +450,44 @@ async function loadSavePoint(savePointId) {
     const data = await response.json();
 
     applyLoadedGame(data);
-    setStatus(`Speicherstand #${savePointId} geladen.`, "green");
+    setStatus(`Speicherpunkt "${data.save_name}" geladen.`, "green");
     toggleSavePointsPanel(false);
 }
 
+async function toggleSavePointFavorite(savePointId) {
+    const response = await fetch(`/save_points/${savePointId}/favorite`, {
+        method: "POST"
+    });
+
+    if (!response.ok) {
+        setStatus("❌ Favorit konnte nicht aktualisiert werden.", "red");
+        return;
+    }
+
+    await refreshSavePoints();
+    setStatus("Favoritenstatus aktualisiert.", "#2563eb");
+}
+
+async function deleteSavePoint(savePointId) {
+    const confirmed = window.confirm("Diesen Speicherpunkt wirklich loeschen?");
+
+    if (!confirmed) {
+        return;
+    }
+
+    const response = await fetch(`/save_points/${savePointId}`, {
+        method: "DELETE"
+    });
+
+    if (!response.ok) {
+        setStatus("❌ Speicherpunkt konnte nicht geloescht werden.", "red");
+        return;
+    }
+
+    await refreshSavePoints();
+    setStatus("Speicherpunkt geloescht.", "#2563eb");
+}
+
 pendingBoardSize = boardSize;
 updateModeButtons();
 updateBoardSizeDisplays(boardSize);
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 9c988c1..1c82d34 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -66,7 +66,7 @@
                 <button class="btn" onclick="checkSolution()">Check</button>
                 <button class="btn secondary" onclick="resetBoard()">Reset</button>
 
-                <button class="btn" onclick="saveGame()">💾 Save</button>
+                <button class="btn" onclick="openSavePanel()">💾 Save</button>
                 <button class="btn" onclick="openSavePointsPanel()">📂 Load</button>
             </div>
         </div>
@@ -95,6 +95,29 @@
         <p class="sidebar-hint">Das Brett wird beim Ändern zur Sicherheit zurückgesetzt.</p>
     </aside>
 
+    <aside class="sidebar save-sidebar" id="saveSidebar" aria-hidden="true">
+        <div class="sidebar-header">
+            <h3>Speicherpunkt</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSavePanel(false)" type="button">Schliessen</button>
+        </div>
+
+        <p>Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
+
+        <label class="sidebar-label" for="saveNameInput">Name</label>
+        <input class="sidebar-input" id="saveNameInput" type="text" maxlength="80" placeholder="z. B. Fast geloeste Dame 8x8">
+
+        <label class="sidebar-label" for="saveNoteInput">Notiz</label>
+        <textarea class="sidebar-input sidebar-textarea" id="saveNoteInput" rows="4" maxlength="240"
+            placeholder="z. B. Gute Startposition fuer Tuermetest"></textarea>
+
+        <label class="sidebar-checkbox">
+            <input id="saveFavoriteInput" type="checkbox">
+            Als Favorit markieren
+        </label>
+
+        <button class="btn" onclick="saveGame()" type="button">Jetzt speichern</button>
+    </aside>
+
     <aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
         <div class="sidebar-header">
             <h3>Save Points</h3>
@@ -102,12 +125,44 @@
         </div>
 
         <p>Waehle einen Speicherstand aus der Liste.</p>
+
+        <div class="save-point-filters">
+            <label class="sidebar-label" for="savePointModeFilter">Modus</label>
+            <select class="sidebar-input" id="savePointModeFilter" onchange="refreshSavePoints()">
+                <option value="all">Alle</option>
+                <option value="queens">Damen</option>
+                <option value="rooks">Tuerme</option>
+            </select>
+
+            <label class="sidebar-label" for="savePointSizeFilter">Brettgroesse</label>
+            <select class="sidebar-input" id="savePointSizeFilter" onchange="refreshSavePoints()">
+                <option value="all">Alle</option>
+                {% for board_size in range(4, 14) %}
+                <option value="{{ board_size }}">{{ board_size }} x {{ board_size }}</option>
+                {% endfor %}
+            </select>
+
+            <label class="sidebar-label" for="savePointSortFilter">Sortierung</label>
+            <select class="sidebar-input" id="savePointSortFilter" onchange="refreshSavePoints()">
+                <option value="newest">Neueste zuerst</option>
+                <option value="oldest">Aelteste zuerst</option>
+                <option value="updated">Zuletzt bearbeitet</option>
+                <option value="favorites">Favoriten zuerst</option>
+            </select>
+
+            <label class="sidebar-checkbox">
+                <input id="savePointFavoritesOnly" type="checkbox" onchange="refreshSavePoints()">
+                Nur Favoriten anzeigen
+            </label>
+        </div>
+
         <div class="save-points-list" id="savePointsList">
             <p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>
         </div>
     </aside>
 
     <div class="sidebar-backdrop" id="sidebarBackdrop" onclick="toggleSidebar(false)"></div>
+    <div class="sidebar-backdrop" id="saveBackdrop" onclick="toggleSavePanel(false)"></div>
     <div class="sidebar-backdrop" id="savePointsBackdrop" onclick="toggleSavePointsPanel(false)"></div>
 
     <script src="../static/js/dashboard.js"></script>
diff --git a/database_setup.sql b/database_setup.sql
index c2ece83..161cd8b 100644
--- a/database_setup.sql
+++ b/database_setup.sql
@@ -9,7 +9,12 @@ CREATE TABLE users (
 CREATE TABLE game_state (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     user_id INTEGER NOT NULL,
-    board TEXT NOT NULL,       -- JSON String (z.B. "[0,4,7,5,2,6,1,3]")
-    mode TEXT NOT NULL,        -- "queens" oder "rooks"
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
\ No newline at end of file
+    board TEXT NOT NULL,             -- JSON String (z.B. "[0,4,7,5,2,6,1,3]")
+    mode TEXT NOT NULL,              -- "queens" oder "rooks"
+    board_size INTEGER NOT NULL DEFAULT 8,
+    save_name VARCHAR(80) NOT NULL DEFAULT 'Unnamed Save',
+    save_note TEXT NOT NULL DEFAULT '',
+    is_favorite BOOLEAN NOT NULL DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);

From 9cc1a222320f58eef897adb97b19a95e490c6302 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Wed, 1 Apr 2026 10:38:29 +0200
Subject: [PATCH 07/15] implemented optional authentification app and stricter
 password and user rules.

Also against brute force.
---
 app/__init__.py                               |  26 +-
 app/__pycache__/__init__.cpython-311.pyc      | Bin 2477 -> 4223 bytes
 app/__pycache__/__init__.cpython-312.pyc      | Bin 4439 -> 3616 bytes
 .../__pycache__/login_attempt.cpython-311.pyc | Bin 0 -> 1619 bytes
 .../__pycache__/login_attempt.cpython-312.pyc | Bin 0 -> 1569 bytes
 app/models/__pycache__/user.cpython-311.pyc   | Bin 1475 -> 1657 bytes
 app/models/__pycache__/user.cpython-312.pyc   | Bin 0 -> 1598 bytes
 app/models/login_attempt.py                   |  19 +
 app/models/user.py                            |   6 +-
 .../__pycache__/login_routes.cpython-311.pyc  | Bin 3515 -> 25819 bytes
 .../__pycache__/login_routes.cpython-312.pyc  | Bin 0 -> 22820 bytes
 app/routes/login_routes.py                    | 485 +++++++++++++++++-
 app/static/css/dashboard.css                  |  69 +++
 app/static/css/login.css                      | 274 +++++++---
 app/static/js/login.js                        |  85 ++-
 app/templates/dashboard.html                  |  39 +-
 app/templates/login.html                      |  50 +-
 app/templates/login_settings.html             | 123 +++++
 app/templates/sign_up.html                    |  45 +-
 app/templates/two_factor_verify.html          |  49 ++
 database_setup.sql                            |  24 +-
 21 files changed, 1124 insertions(+), 170 deletions(-)
 create mode 100644 app/models/__pycache__/login_attempt.cpython-311.pyc
 create mode 100644 app/models/__pycache__/login_attempt.cpython-312.pyc
 create mode 100644 app/models/__pycache__/user.cpython-312.pyc
 create mode 100644 app/models/login_attempt.py
 create mode 100644 app/routes/__pycache__/login_routes.cpython-312.pyc
 create mode 100644 app/templates/login_settings.html
 create mode 100644 app/templates/two_factor_verify.html

diff --git a/app/__init__.py b/app/__init__.py
index ddb86b3..666f398 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -2,28 +2,52 @@ from flask import Flask
 import os
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager
+from sqlalchemy import inspect, text
 
 db = SQLAlchemy()
 login_manager = LoginManager()
 
+
+def apply_startup_migrations():
+    inspector = inspect(db.engine)
+
+    if "users" in inspector.get_table_names():
+        existing_columns = {column["name"] for column in inspector.get_columns("users")}
+        user_column_migrations = {
+            "two_factor_enabled": "ALTER TABLE users ADD COLUMN two_factor_enabled BOOLEAN NOT NULL DEFAULT 0",
+            "two_factor_secret": "ALTER TABLE users ADD COLUMN two_factor_secret VARCHAR(64)",
+        }
+
+        for column_name, statement in user_column_migrations.items():
+            if column_name not in existing_columns:
+                db.session.execute(text(statement))
+
+        db.session.commit()
+
 def create_app():
     app = Flask(__name__)
 
     BASE_DIR = os.path.abspath(os.path.dirname(__file__))
 
     app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(BASE_DIR, "app.db")
-    app.config["SECRET_KEY"] = "dev-secret-key"
+    app.config["SECRET_KEY"] = os.getenv("SECRET_KEY", "dev-secret-key")
     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SESSION_COOKIE_HTTPONLY"] = True
+    app.config["REMEMBER_COOKIE_HTTPONLY"] = True
+    app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
     db.init_app(app)
     login_manager.init_app(app)
     login_manager.login_view = "login.login"
+    login_manager.login_message_category = "info"
 
     from .models.user import User
     from .models.gamestate import GameState
+    from .models.login_attempt import LoginAttempt
 
     with app.app_context():
         db.create_all()
+        apply_startup_migrations()
 
     @login_manager.user_loader
     def load_user(user_id):
diff --git a/app/__pycache__/__init__.cpython-311.pyc b/app/__pycache__/__init__.cpython-311.pyc
index c75a2cb53ecd25c07bde4182f6d7f95ab4362cfc..b44b30f3c87876bb102c299c4b8783434097917b 100644
GIT binary patch
literal 4223
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

delta 1026
zcmZuvOH30{6n!(DPUq9klom><MT(e^8d?z4xF84uA?S|cLN>K9LsOW3@@6nf+CU76
zg^-Zu#f3ZKLSxXlGjS~|qlqMFa14=+MiUn`YSOUL_XaB;eMxWcJ@=mbonN8HUg?3$
zB>?<BJb96NXDdm5>RPGw^cfnc%zX^65uf$O92jGdV4PxK0AsvD$3U1Z-HViVeC$^m
zfZJ?oH-IGevs+>EV2Z0IQS7MA;g<|g6#!sWKz*DSy>WOY!}lM!wu?K6$DP#}g;xa4
zm6n!R3SeE-<g~j$Qy>pkYpj&dDA{usP~cECPt}ETG=rXUk>LYHr@YnVMRt->oD1CH
zc?&jN$feb$>k5ojRMLFu`hwjm>bEj`=^ES*?qScoz}GQ&H!`}#M}xDHqF#^a>I77c
z$h3OX6k>z@BZH&y%Y#?ZOTM{vR@Ab|R3>W4FBEPjOqt9TU4{6cA4;Uvn2|74lotw7
zlUBw}hpy^+Dw{EFN!2iIsf-b(O~(u-#8V0saRMD*1BB+$d%6dO#Zy!ejf$=GcYq4w
zF{%OG75ix@p-*DCPfTYORnwz{ZBb44A0&wj>!dIw%QwYDE*GE3W(@U)VG4K{?1?8d
z4Hca&ln*^}`seCNoCm7Ol#W^PacxG;LDHSWv|+Z%UF?eu#s`K+tc<W0heL7)NQirV
zJFphAUN0nP*{_t#!3YL;{L|O)k}C6HTafQ?i|xzp^Zg&?nq@TX>TTF+!q&p2Vt#`O
zZgrg}`fIs;gXutTT~XwePR{M{&XuO6rVT!@$p^}SvimKu%?T^6CD)?7EEnantqNPd
zZzSr+-_U*15v@|G96>DeCkt5bru}%CrtF>Qm1LZFel9Q&w5<o3fskXpg~Bo{nD$96
zp-)2_o)9*m3AwEUN<?oag3SI9z&fIn#q4t3_)asL+5<bWNxm9gN89oc>UP&RGL4j6
J2LB3+{~KC6`o;hN

diff --git a/app/__pycache__/__init__.cpython-312.pyc b/app/__pycache__/__init__.cpython-312.pyc
index ae97128424de79a8757e3b913bbd82e78df38ceb..a633a39a35340171b5f6e0bdb96e75fe9f8361aa 100644
GIT binary patch
delta 1786
zcmZuy+i%lW7`GiKzU11_^^#=NO{G$=O=zJ571$+7UD}c+C`m_&G+9~gb}4oe*=`{b
zRXYiZizcz^JOBa>BsQrV+FvkD(;k@6HfhNMYh;SV%O22P3Y#>IryaYrbb=%KJKy*F
z&UZP-=Vz}4Zv|XGJDoHFN2UHt{wHF^)wc98w5}imBA^l?qgfO+bWFms7@RGVMaHwZ
ziQ$q}wq<RmZj}g`%#t#drBDPzMEs7C6pkznE!(zb7i{N{tV1B6be1ued}1tOQQbNs
z<<wIN7G3!!hMhrIo}I8D$|aCMN3k0i_#C~rR7T3kG={=w5j~BtwuEk-S4BnD@j^}(
zE8~%PhD$M-NHoqdrh|zL4>Pf3d~zbeXs3((Om12$D!f?8eI$tj6HO-LTqMCHk{Kp3
z8ILo=+(=|Ho?-echhCE__1a{rIIV~p^FbsP8;zuT4h*s^rh8wlrZ?@tHiK9ioVQJ4
ztPPwbx}7aX%lvdvnwJYaSSEr?stukDV~*$UT&c8|=ktZU#`ED)S#N`YROVGJr)cvf
zUe3=dIW1o-s7e4v+2Nyp4aG9D?rFV&-K4Hjbx&}4>@nf`j9v5g*1WxSZ>UCu8bi^w
zp+s#caqo0}=)~{-snvz6BexD*PgIxuQ&qC9>YsWXEHpYld}_4>=_<K<gGTnev(_E0
zbw}&n!_N?m8mu{j7mi(RZ@7Kc;J)A7`_?_)EA$Gz<_Xq3!7m0^soU>8@a*5P!li$c
z2xY%aU!>Q__8Qs#fb?&)B4qeq-9M#TVZYxyq6hJ5s2~XVlJeLp76ds@-2RqA9h%`c
z$D9}ZK<^@P!FmUS0JuT>2>b}t1RJ<Xw-SV@lcrAX&}mb*8+en$(6weW9~5(~AY|X|
z(Axe7bfldx5#G7w6I?q`*EZ@FJd#`XTp}PL+(MJoBzqU(b%nZD+9fwHT2SOHGS>^j
zsL%5@g6^yy0tq~TX?ww4dl$9c1Gr^r4qqT<P+`|Oa*IKWI84|qwadOmtC{=_$u9>M
zAq!#h!(h_Ew9Fme>gnZt)&}y9J!lJ9afAapo#tXGF2f(=PF7rkxDeXBk)cy!89a1!
zE@kxAG?z|~B@=usnLIYe@uQi{@nj-?Qg2If6Wm0UOTFT;#B*m}iAzT&xb#?ttJtOD
zY`zdSrH<zdGsPz;Y!5OYpM*Cb&eTyz<FuC3L=UtaabtZ%(?q$X0l#yh&p3a@3x#f(
z6*b+GFKCc!gvpz{pzMJj)wmDLvf>BdIYa0m_|q9dcY}~CM(Z{hBNi4ECs17MQj6IK
zFN><0n-%$KSai0ily$pY6hui48%fQKy5|Kl3!8&%(?q4mXrcK9yqPDr*`~r8E<2<q
zByvF$&uBUgKMyd7&q<QWOx<pz2D<A_U%#=~s}$!oQ4Pzve1YH8l>yM?ZaYEh7MMsU
zqmeYn509nHx@H9>3?mgITp2KgxpNX~n;#42eZ>!rm!(T3WgG$qsE&b(JLO*Q=)76J
zR$dKM4<4;|jDla?zEGpDe>rx3{FCvjyQhY;jnKfB$=2|<8hzWQ;RR3J!NErFz`2S0
zc+Ver=OeuL5x(y+<+$8&v7=7;o+6mFYn`MoJ1;svb+41meKPou6=Gn}bF`;x!*D-W
z9k8RjSjWhK<;MZ*$RUDt>DC$JH=sb;Bg%fT>WM|o*KV-YJU??MUm?m~12A^<oIC<w
p#k?fGs~m@>ai`QiC^jr8iatVGA0ia!Z)$hC(7<0z7wR@6{{!d-=0^Yk

literal 4439
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

diff --git a/app/models/__pycache__/login_attempt.cpython-311.pyc b/app/models/__pycache__/login_attempt.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..9aa4c7a64d7ea4238c9bb79d1b9a95b0b8fa5b6a
GIT binary patch
literal 1619
zcma)5&2Jl35Pxs|k+oxIV+WfWQrbfgnBppmK&eApDM<w>q@haMKo`Sm?e~&yx?VeP
zcM&NZeCQz(J@^m_R~V5)6<Q^S9QXscbFrm8SbJ$DPPrL{1Imec-mIyie2jNzXWo4L
z=FN<Mh{vM{==-NXYhMcp{lXQWLMOt}MG(G01QD#GGL|t$0(uV-;XWb(iq|2|qul^P
zd+>TB2S{)kWkZMDp2e;}iY4F1zv78<RL49$MKUHx76_ID0;0inAD+u$KadFffn7+r
z*9Vn{2EBWlpBs_jE@a<>*CP_z5C0`T@~`nj{}~@0j31~rM8uwTxQ`zh%(oxi4MKhJ
zdL+mGmM!kv1|#K>|LrODJV*UJWSGQAe1BwcT&q}45a~XWlVlXemT+SWl{L+nu`F7y
zTJDI>HAVGQ^Ck>*xXQG$$~Kj|bn`F=+24gj(Xe%0E$Z~}2AmvnOczgN11!R&AwpMG
zTZeQeWuH@~_<B^UDk>q2nx-q-U^LV+b;s=uWdK(JH{S|iLGD%R4;K*l((nyDdL0<-
zEdC0ugXGb-u(P1|{Xq|W7lO+M7w?T+dj7g+kMZ;|zLFJ~1fh(#j>DN$Up0C7+2i@r
zbYZ!4$JS}#gXQ_cwW~K~3To+&l_OA+k+W>d$~0GH6=+4dpjNAea)nUcEDYS|LUq#>
z6@}3%Q<QtD=S#TYA149NJOiwTI@0V;@R8J#X5l$F_hZhJI2UJ+zy&R4$9O{C7e#TS
ziUO!mBgipD*|1gp#1dB&i%-c@8E=^zo~!6~*>H!h85Uim%oQ}^hL<g-8Eb#`!3|pU
z3(J*ORZXX)zYwl?Rki3%4W<^;E2X<&vJFeqVR2N`Qu^NR=q*Fru<2aIFfFEP2JFH~
zEsDz4Ot|$aDCP-b8Thc5Ipag^G5$9(e+O3U|2i+7t6hH<Np2+{Wa^XK(~sY3MJC#j
z2`4g9o9!fCsVBEHjeKLWncrD@c)5A`;O$l--%jM6M85WZM>@5|9&9!;jbt;kGx_jz
z^YlTgB~7)ZDMy;B&3Dpg>cwqsM|c!Hxb@RaYvt3{%Eu1y&(!ux(OD_B(xrB~<fKcr
z4?APyfS+$HH9u*OWu38XZK0ETt-iE<yTO`Ywo~Vw)cM+CH;f|VTY@9L+E{q}M(ds1
zEm3ZZvLnjffRGM@gNQ?OxQkxQy{7PfEM|i)^5z!0&Ns{JQkJ)>-??M)k~jY=>`gH6
k%{4y))(v2cJ1Ef_e7a!?bL<y$xZTBHd$!;H!J`NK2SKNjtpET3

literal 0
HcmV?d00001

diff --git a/app/models/__pycache__/login_attempt.cpython-312.pyc b/app/models/__pycache__/login_attempt.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..65fbb7ef3b6a4883f7b2eff27300ce2ad718644a
GIT binary patch
literal 1569
zcmbVMO-vg{6rR~#o3&$DYzmD7EgW*$wj>C(YD`I_K$QN7xD`oI*(e<?%z&1x*JgIN
zs*@h}z=0@-;FFC|WpYX?IJl=?bLZj+OR-k!kJJ-4B)1n%o$=aW+ES^V!`t`!z4zw5
z*}d-WC}5}j%bxK>0N^(+v`?tTG$t5R1Q=jwf(+Ck1OoUNU||hlk-!zH9dPp95d&Tm
z^O71mV8}p)zJM1NPkaE7TSDV!$P*BtK@2njLroL_kye_ebp`;gjh)tT2@AX84o||4
z)^%2FQ{NkSby6(tu>Abs&~Eq`C-R?hy8aO-dKS(Zy@asbj2H-N>ZCZ*&afNZX<fS(
z`xpERozVf`M$mfxXPnZE8~HmjK8Ittd$*@O{3WQxv9boVM7~#z`>~nqvSD3!9Foa7
zevio|qz9sXhporC95pgJ&7%h-e=y4MZ!)E9xu&TvnB?FKra9nQeK@9yG{U(qOqO)l
zWN<d2UlWSja@5En9b-yt+m~HtwDb(|hul?kDlcMgZ7WMAaj(VJGVoM@zX86>jY&q>
z8-U+}6~_JbY_Sz&mevY(TA4-sE_55HQu<-fWakx(9Knercuf_k!U8B?OkRRb%q5$b
zFmg1g=W>@bSxij(@~N^f<?_Ca5G6T^(8K;t)Jtu3f<f3LjCi0PAKsRpE6<eb@K^;_
zF8(<B!)RsrC9En_Re7qxd_Y?5<A}U}g#0K%EUjyDK8Db$tD7xLH$o1dMj%ptHGX(H
zYq}ZB@A}ko$TFe6U|>Id+o6WFeA1gQIpiD1SC(|cB=~snzI;P>$Q^@CCuU|BA25?^
zIfls=M7JGu?Ctm7wTxAlOlK|Ip}JwQnYU^|I$gF|+viy^-vgRtANnRIe0WX5pNhT5
z$Qr1>anZZ=Yb3Frc$$2i+!!xT6eeE0UyF=+Q}y_TjYKh7NS0Ei@p5W2wLQCawemqN
zp7K7cE9ckg)BNLnDOpOClbgxy@vXNi{Wax7@00q#@Ww*XC>Yzq^XRi^<?hSt)w%oC
zxi4SO-G9ZHuk`)7h1$TP_j$c<h-FL_Ql;7Qz0G_3eX2K8?|*w^wm4syFVXU&%}4wF
z?|SLOFo+DT3$NwDSMp$K=EXbJkLGK#b|?x1VK3c~VQ3l#eexF5s^o)U6ro#uTY|<_
t-u>}q9LbZxNUzcNn1L^t&HoOEB82cK5dS@_z-h>;yHdFF2jF}&_D}deVm$x=

literal 0
HcmV?d00001

diff --git a/app/models/__pycache__/user.cpython-311.pyc b/app/models/__pycache__/user.cpython-311.pyc
index 0748aa0ac9ad887b021489ae3b80c092f71d8fda..bc150d66259ffb89918750d955e025a0dc589ad9 100644
GIT binary patch
delta 576
zcmX@i{ga1xIWI340}xbQK9iY0k++|V1H=P@&o?G6J1>>WlEn?-GcW+zJTUeG-pLmk
zl?^$UF)=W#24V<^;$s4-VukUMbuVKCs$`t}n^D?U04ATpn!*a!AqW@Yf~bS>*KjXm
z0qO%{2#6Aztj;K_&4a26l@}$P!rQ_SC6dAy%%I6X*_z3Dax;^V>@7wEP39ty4{oui
zq^2d7=9Coi0eLSSfW+jfOj{TQCVMffFp5sjXAa{N0jc9CNGvWc&o4@ue2ZB(;ugD8
zetu4BV%{y5lGKWlTS6t}`SEFq$tC$k@u_)<Nja%0w*-;Iic^z|QcH@&fhMhFD3SnD
zMPeX=9Y%n{shELrvL;K;<n1gbo;M_wW(duZTwt`sY6t6q(hIRE7h>bD0Lj#hi?Nwk
zVlyvDW?hubx+0l%fko_wgyIaQIh+eL7bq>!T;a4(cZu#r34<#V1{YXFC%<NqVw9N7
z#%d^~4YCYw_b(2c-29Z%oK(9a{mFr>W;Sd*jG7-9Fo_P!2}x5jK7wSvV37u!2mq|Q
BiYovB

delta 424
zcmey#bC{cVIWI340}yQMU7Kk<k++|V6~qIA&l4stJ3rZziQkuV86yM3Y9NMy6s8oW
zHEhe6fnq=m0a4sc45=(xFufo)4@?fo=7q5r@J;S#R95C%#st(2#1Ih0kEwfdJd-%D
zKniyYLzG|&PcVZf@8o7CXYrR6KrNb#xA=-vi^@`q;!{%75=(PRCVyqx!pJvy6|)MX
z(B$*XVWL7nWw$sA5{rw=^NUh$v8LuGX68&bX3<qD5(P@FWGE5?Qbi&lf*nS%02#$M
z87A*w$x-AH?QrVxoRB#oX-eh-=81Vz@>YcGaJj(ac#+5P3Xfxh>ttnC)5!~2r5ME~
z?_o8RQUe(RH}e;VO>TZlX-=wLk=A5(HZvO*Zbr=y446cRCD4M5k06;ZSfs%w0ssY(
BUzh*@

diff --git a/app/models/__pycache__/user.cpython-312.pyc b/app/models/__pycache__/user.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..fdc64d343eefe5d9892f2c8255ebbea8bfc353c8
GIT binary patch
literal 1598
zcmb7DO>7%Q6rTO_U*Z^>q>ZVH(nu9uQJN@lfV8SmC{U1+OUq@YXtnW-lXcg-?(8nE
zQxHDnke-^H>?lG>#i2p=p%sVr$Q=$wu^<|$QYB8lAsH^Yv~RrLG&D`6j<j#z``*0o
zy?OKIw`4MbU@h<dZaN}De{&;Tk-pNs3Q7%Ogar!~1x*kT7O`ZBMM;wcB%&`7mRAr~
zh(v@!EDV3~Z^(hJDV2yC?LZ!+3QWWc9gc$<|HdVB*1TofxnO4?L#pn12&o~0Gyx+`
z#DXS?h{%Or>4yUlM+g6pa0`n~sln62(xS)3_VBlYU56!>8$w{iv6W_|AqAEee`BWT
z0h7{<9aNM!jt5S2;&3H_4(RAnv~cPu*62gc_(86rH_H{)tEFBOH+D2LR<P2G7=MK?
z5wbQ14n`w$9Dfgg)vXMMEa6{!8z)zgHe4A}Q%vR~#S|Z;dmTn>phV50K`Z(VQt1ps
zQD3Mci}<#A(<dxu`<7)aSfuj|JgPwX3_;KkM1M=Dj!E9|EsqJ4s?_tbXdj|Ou(R_i
zh+Kb0Kt+g82>-hL`0#Xu?@$4>m)9mt=8w`fq)KzkkxRVdv3=n(B#!aAZKFs)mtA7z
zUCutXpD{|MiK2sv<xcP|7fKZt({)NpRM(f2oZ&)f@}9XPAgX9DeX=fZB{!05KWrPV
z)VWsdT$k4}r;hM&o=DeOLf3)Xx41s2>o<MF>U)y9?(y~nCgmq%k<T2<FWM~nmF<y5
z=(T8K7P;n8(_W;!!7NrXT(|5{%wkszk6bs4gvoi|&N0b$$}Ewi1YoQi9!pq;>*<!W
zXaeDk<5<M7ne35U9?N)TN6#BM&!IXL099a?K7_dhcszO%GX9Jxe;Aa%85#|R0*d=5
zh!wOqe5yM8G@e<_+|Ay}u1(dZ*Qa+rYR4z5GkdAgReHB_r&7<>Gh5k>?Do{==^gJe
zX{WAKuO9V&xcTmbv+dN!;7h-=mZ@dev-PR1iyIdo&`0Hm<wv(4-u~tLcKY+`*Dv{Z
z)9(S69S^hIpT0N!Sozg&&EwX*{?|PI0~E5fJ8!nLg_e9`Z}d!E+=_3+x7F?O`|3S)
zXXd95c1I^$@<>+}6g4<9Kkb|vVJNtqfjl(yM$k~o8^DxVJ~csC-Ur}Cr}kr)f@{A_
oC&0l6%{>j`A4w2|Cn)^{o%uI1D5$HStS!`*)|dW6VD!SD1Mx3cL;wH)

literal 0
HcmV?d00001

diff --git a/app/models/login_attempt.py b/app/models/login_attempt.py
new file mode 100644
index 0000000..cb9baf2
--- /dev/null
+++ b/app/models/login_attempt.py
@@ -0,0 +1,19 @@
+from .. import db
+
+
+class LoginAttempt(db.Model):
+    __tablename__ = "login_attempts"
+
+    id = db.Column(db.Integer, primary_key=True)
+    ip_address = db.Column(db.String(45), nullable=False)
+    username = db.Column(db.String(80), nullable=False)
+    failed_attempts = db.Column(db.Integer, nullable=False, default=0, server_default=db.text("0"))
+    locked_until = db.Column(db.DateTime)
+    last_failed_at = db.Column(db.DateTime)
+
+    __table_args__ = (
+        db.UniqueConstraint("ip_address", "username", name="uq_login_attempt_ip_username"),
+    )
+
+    def __repr__(self):
+        return f"<LoginAttempt {self.ip_address}:{self.username}>"
diff --git a/app/models/user.py b/app/models/user.py
index 1a70419..ef6e199 100644
--- a/app/models/user.py
+++ b/app/models/user.py
@@ -1,15 +1,17 @@
 from .. import db
 from flask_login import UserMixin
 
+
 class User(UserMixin, db.Model):
     __tablename__ = "users"
 
     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String(20), unique=True, nullable=False)
-    password = db.Column(db.String(255), nullable=False)  # <- größer!
-    email = db.Column(db.String(120), unique=True, nullable=True)
+    password = db.Column(db.String(255), nullable=False)
     created_at = db.Column(db.DateTime, server_default=db.func.now())
     last_login = db.Column(db.DateTime)
+    two_factor_enabled = db.Column(db.Boolean, nullable=False, default=False, server_default=db.text("0"))
+    two_factor_secret = db.Column(db.String(64))
 
     def __repr__(self):
         return f"<User {self.username}>"
diff --git a/app/routes/__pycache__/login_routes.cpython-311.pyc b/app/routes/__pycache__/login_routes.cpython-311.pyc
index 60142fbac202d7a59c2ad6e912f83c4bf4ab1ffc..0bc2badf62c56780452547068029641f26bdaf64 100644
GIT binary patch
literal 25819
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
Dq<Vsw

literal 3515
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

diff --git a/app/routes/__pycache__/login_routes.cpython-312.pyc b/app/routes/__pycache__/login_routes.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..698eb894c375e9eb8131268877af3554c0574a1a
GIT binary patch
literal 22820
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

literal 0
HcmV?d00001

diff --git a/app/routes/login_routes.py b/app/routes/login_routes.py
index 4525a07..9d3148d 100644
--- a/app/routes/login_routes.py
+++ b/app/routes/login_routes.py
@@ -1,30 +1,291 @@
-from flask import Blueprint, render_template, request, url_for, redirect, flash
-from werkzeug.security import generate_password_hash, check_password_hash
-from flask_login import login_user, login_required, logout_user
-from ..models.user import User
+import base64
+import binascii
+import hashlib
+import hmac
+import re
+import secrets
+import struct
+from datetime import datetime, timedelta, timezone
+from urllib.parse import quote
+
+from flask import Blueprint, flash, redirect, render_template, request, session, url_for
+from flask_login import current_user, login_required, login_user, logout_user
+from werkzeug.security import check_password_hash, generate_password_hash
+
 from .. import db
+from ..models.login_attempt import LoginAttempt
+from ..models.user import User
 
 login_bp = Blueprint("login", __name__)
 
+MIN_PASSWORD_LENGTH = 8
+MAX_PASSWORD_LENGTH = 128
+MAX_LOGIN_FAILURES = 5
+LOGIN_LOCK_MINUTES = 15
+TWO_FACTOR_CODE_DIGITS = 6
+TWO_FACTOR_TIME_STEP_SECONDS = 30
+TWO_FACTOR_VALID_WINDOW = 1
+TWO_FACTOR_ISSUER = "8 Queens Solver"
+MAX_TWO_FACTOR_ATTEMPTS = 5
+USERNAME_PATTERN = re.compile(r"^[A-Za-z0-9_.-]{3,20}$")
+DUMMY_PASSWORD_HASH = generate_password_hash("dummy-password-for-timing-protection")
+
+
+def utcnow():
+    return datetime.utcnow()
+
+
+def get_utc_timestamp(moment=None):
+    if moment is None:
+        return int(datetime.now(timezone.utc).timestamp())
+
+    if moment.tzinfo is None:
+        moment = moment.replace(tzinfo=timezone.utc)
+
+    return int(moment.timestamp())
+
+
+def normalize_username(username):
+    return (username or "").strip()
+
+
+def validate_username(username):
+    if not USERNAME_PATTERN.fullmatch(username):
+        return "Username must be 3-20 characters and only use letters, numbers, dots, dashes, or underscores."
+    return None
+
+
+def validate_password(password):
+    if len(password) < MIN_PASSWORD_LENGTH:
+        return f"Password must be at least {MIN_PASSWORD_LENGTH} characters long."
+
+    if len(password) > MAX_PASSWORD_LENGTH:
+        return f"Password must be at most {MAX_PASSWORD_LENGTH} characters long."
+
+    return None
+
+
+def get_request_ip():
+    forwarded_for = request.headers.get("X-Forwarded-For", "")
+
+    if forwarded_for:
+        return forwarded_for.split(",")[0].strip()[:45] or "unknown"
+
+    return (request.remote_addr or "unknown")[:45]
+
+
+def login_attempt_buckets(username):
+    normalized_username = normalize_username(username).lower() or "__empty__"
+    ip_address = get_request_ip()
+    return [
+        (ip_address, normalized_username),
+        (ip_address, "__ip__"),
+    ]
+
+
+def get_or_create_attempt(ip_address, bucket_key):
+    attempt = LoginAttempt.query.filter_by(ip_address=ip_address, username=bucket_key).first()
+
+    if attempt is None:
+        attempt = LoginAttempt(ip_address=ip_address, username=bucket_key)
+        db.session.add(attempt)
+
+    return attempt
+
+
+def clear_expired_lock(attempt, now):
+    if attempt.locked_until and attempt.locked_until <= now:
+        attempt.failed_attempts = 0
+        attempt.locked_until = None
+
+
+def get_active_lock(username):
+    now = utcnow()
+    active_until = None
+
+    for ip_address, bucket_key in login_attempt_buckets(username):
+        attempt = LoginAttempt.query.filter_by(ip_address=ip_address, username=bucket_key).first()
+
+        if not attempt:
+            continue
+
+        clear_expired_lock(attempt, now)
+
+        if attempt.locked_until and (active_until is None or attempt.locked_until > active_until):
+            active_until = attempt.locked_until
+
+    db.session.commit()
+    return active_until
+
+
+def record_failed_login(username):
+    now = utcnow()
+    locked_until = None
+
+    for ip_address, bucket_key in login_attempt_buckets(username):
+        attempt = get_or_create_attempt(ip_address, bucket_key)
+        clear_expired_lock(attempt, now)
+        attempt.failed_attempts = (attempt.failed_attempts or 0) + 1
+        attempt.last_failed_at = now
+
+        if attempt.failed_attempts >= MAX_LOGIN_FAILURES:
+            attempt.locked_until = now + timedelta(minutes=LOGIN_LOCK_MINUTES)
+            locked_until = attempt.locked_until
+
+    db.session.commit()
+    return locked_until
+
+
+def clear_login_attempts(username):
+    for ip_address, bucket_key in login_attempt_buckets(username):
+        attempt = LoginAttempt.query.filter_by(ip_address=ip_address, username=bucket_key).first()
+
+        if attempt:
+            db.session.delete(attempt)
+
+    db.session.commit()
+
+
+def lookup_user_by_username(username):
+    if not username:
+        return None
+
+    return User.query.filter(db.func.lower(User.username) == username.lower()).first()
+
+
+def minutes_until(target_time):
+    seconds = max(1, int((target_time - utcnow()).total_seconds()))
+    return max(1, (seconds + 59) // 60)
+
+
+def normalize_two_factor_secret(secret):
+    return (secret or "").strip().replace(" ", "").upper()
+
+
+def generate_two_factor_secret():
+    return base64.b32encode(secrets.token_bytes(20)).decode("ascii").rstrip("=")
+
+
+def format_two_factor_secret(secret):
+    normalized = normalize_two_factor_secret(secret)
+    return " ".join(normalized[index:index + 4] for index in range(0, len(normalized), 4))
+
+
+def clear_pending_two_factor(user=None):
+    session.pop("pending_2fa_user_id", None)
+    session.pop("pending_2fa_attempts", None)
+
+
+def get_pending_two_factor_setup_secret(user):
+    if session.get("pending_2fa_setup_user_id") != user.id:
+        return None
+
+    secret = normalize_two_factor_secret(session.get("pending_2fa_setup_secret"))
+    return secret or None
+
+
+def clear_pending_two_factor_setup():
+    session.pop("pending_2fa_setup_user_id", None)
+    session.pop("pending_2fa_setup_secret", None)
+
+
+def build_totp_uri(user, secret):
+    normalized_secret = normalize_two_factor_secret(secret)
+    label = quote(f"{TWO_FACTOR_ISSUER}:{user.username}")
+    issuer = quote(TWO_FACTOR_ISSUER)
+    return (
+        f"otpauth://totp/{label}"
+        f"?secret={normalized_secret}&issuer={issuer}"
+        f"&algorithm=SHA1&digits={TWO_FACTOR_CODE_DIGITS}&period={TWO_FACTOR_TIME_STEP_SECONDS}"
+    )
+
+
+def decode_two_factor_secret(secret):
+    normalized_secret = normalize_two_factor_secret(secret)
+    padded_secret = normalized_secret + ("=" * (-len(normalized_secret) % 8))
+    return base64.b32decode(padded_secret, casefold=True)
+
+
+def generate_totp_code(secret, for_time=None):
+    timestamp = get_utc_timestamp(for_time)
+    counter = timestamp // TWO_FACTOR_TIME_STEP_SECONDS
+    key = decode_two_factor_secret(secret)
+    message = struct.pack(">Q", counter)
+    digest = hmac.new(key, message, hashlib.sha1).digest()
+    offset = digest[-1] & 0x0F
+    truncated_hash = struct.unpack(">I", digest[offset:offset + 4])[0] & 0x7FFFFFFF
+    code = truncated_hash % (10 ** TWO_FACTOR_CODE_DIGITS)
+    return f"{code:0{TWO_FACTOR_CODE_DIGITS}d}"
+
+
+def verify_totp_code(secret, code, at_time=None):
+    normalized_code = (code or "").strip()
+
+    if not normalized_code.isdigit() or len(normalized_code) != TWO_FACTOR_CODE_DIGITS:
+        return False
+
+    current_time = at_time or utcnow()
+
+    try:
+        for window in range(-TWO_FACTOR_VALID_WINDOW, TWO_FACTOR_VALID_WINDOW + 1):
+            window_time = current_time + timedelta(seconds=window * TWO_FACTOR_TIME_STEP_SECONDS)
+
+            if secrets.compare_digest(generate_totp_code(secret, window_time), normalized_code):
+                return True
+    except (TypeError, ValueError, binascii.Error):
+        return False
+
+    return False
+
+
+def get_pending_two_factor_user():
+    user_id = session.get("pending_2fa_user_id")
+
+    if not user_id:
+        return None
+
+    return db.session.get(User, user_id)
+
+
+def render_login_settings(error=None):
+    pending_secret = get_pending_two_factor_setup_secret(current_user)
+    formatted_secret = format_two_factor_secret(pending_secret) if pending_secret else None
+    provisioning_uri = build_totp_uri(current_user, pending_secret) if pending_secret else None
+
+    return render_template(
+        "login_settings.html",
+        error=error,
+        pending_two_factor_secret=formatted_secret,
+        pending_two_factor_uri=provisioning_uri,
+    )
+
+
 @login_bp.route("/register", methods=["GET", "POST"])
 def register():
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+
     if request.method == "POST":
-        username = request.form.get("username")
-        password = request.form.get("password")
+        username = normalize_username(request.form.get("username"))
+        password = request.form.get("password") or ""
 
-        if User.query.filter_by(username=username).first():
-            return render_template("sign_up.html", error="Username already taken!")
+        username_error = validate_username(username)
+        password_error = validate_password(password)
 
-        hashed_password = generate_password_hash(password)
+        if username_error:
+            return render_template("sign_up.html", error=username_error, username=username)
 
-        new_user = User(
-            username=username,
-            password=hashed_password
-        )
+        if password_error:
+            return render_template("sign_up.html", error=password_error, username=username)
 
+        if lookup_user_by_username(username):
+            return render_template("sign_up.html", error="Username already taken!", username=username)
+
+        new_user = User(username=username, password=generate_password_hash(password))
         db.session.add(new_user)
         db.session.commit()
 
+        flash("Account created successfully. You can log in now.", "success")
         return redirect(url_for("login.login"))
 
     return render_template("sign_up.html")
@@ -32,23 +293,201 @@ def register():
 
 @login_bp.route("/login", methods=["GET", "POST"])
 def login():
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+
     if request.method == "POST":
-        username = request.form.get("username")
-        password = request.form.get("password")
+        username = normalize_username(request.form.get("username"))
+        password = request.form.get("password") or ""
 
-        user = User.query.filter_by(username=username).first()
+        if not username or not password:
+            return render_template("login.html", error="Username and password are required.", username=username)
 
-        if user and check_password_hash(user.password, password):
-            login_user(user)
-            return redirect(url_for("main.dashboard"))
+        locked_until = get_active_lock(username)
 
-        return render_template("login.html", error="Invalid username or password")
+        if locked_until and locked_until > utcnow():
+            return render_template(
+                "login.html",
+                error=f"Too many failed login attempts. Please try again in about {minutes_until(locked_until)} minute(s).",
+                username=username,
+            )
+
+        user = lookup_user_by_username(username)
+        password_hash = user.password if user else DUMMY_PASSWORD_HASH
+        password_matches = check_password_hash(password_hash, password)
+
+        if not user or not password_matches:
+            locked_until = record_failed_login(username)
+            error_message = "Invalid username or password."
+
+            if locked_until:
+                error_message = (
+                    f"Too many failed login attempts. Please try again in about {minutes_until(locked_until)} minute(s)."
+                )
+
+            return render_template("login.html", error=error_message, username=username)
+
+        clear_login_attempts(username)
+
+        if user.two_factor_enabled:
+            if not user.two_factor_secret:
+                return render_template(
+                    "login.html",
+                    error="This account requires two-factor authentication, but no authenticator app is configured.",
+                    username=username,
+                )
+
+            session["pending_2fa_user_id"] = user.id
+            session["pending_2fa_attempts"] = 0
+            flash("Enter the current 6-digit code from your authenticator app.", "info")
+            return redirect(url_for("login.verify_two_factor"))
+
+        user.last_login = utcnow()
+        db.session.commit()
+        login_user(user)
+        clear_pending_two_factor()
+        return redirect(url_for("main.dashboard"))
 
     return render_template("login.html")
 
-@login_bp.route('/logout', methods=['POST'])
+
+@login_bp.route("/login/verify", methods=["GET", "POST"])
+def verify_two_factor():
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+
+    user = get_pending_two_factor_user()
+
+    if user is None:
+        flash("Your verification session expired. Please log in again.", "error")
+        return redirect(url_for("login.login"))
+
+    if request.method == "POST":
+        code = (request.form.get("code") or "").strip()
+
+        if not code.isdigit() or len(code) != TWO_FACTOR_CODE_DIGITS:
+            return render_template(
+                "two_factor_verify.html",
+                error="Please enter the 6-digit verification code.",
+            )
+
+        attempts = int(session.get("pending_2fa_attempts", 0))
+
+        if attempts >= MAX_TWO_FACTOR_ATTEMPTS:
+            clear_pending_two_factor(user)
+            db.session.commit()
+            flash("Too many invalid 2FA attempts. Please log in again.", "error")
+            return redirect(url_for("login.login"))
+
+        if not user.two_factor_secret:
+            clear_pending_two_factor()
+            flash("Authenticator app 2FA is not configured for this account.", "error")
+            return redirect(url_for("login.login"))
+
+        if not verify_totp_code(user.two_factor_secret, code):
+            attempts += 1
+            session["pending_2fa_attempts"] = attempts
+
+            if attempts >= MAX_TWO_FACTOR_ATTEMPTS:
+                clear_pending_two_factor(user)
+                db.session.commit()
+                flash("Too many invalid 2FA attempts. Please log in again.", "error")
+                return redirect(url_for("login.login"))
+
+            remaining_attempts = MAX_TWO_FACTOR_ATTEMPTS - attempts
+            return render_template(
+                "two_factor_verify.html",
+                error=f"Invalid authenticator code. You have {remaining_attempts} attempt(s) left.",
+            )
+
+        clear_pending_two_factor(user)
+        user.last_login = utcnow()
+        db.session.commit()
+        login_user(user)
+        flash("Two-factor authentication successful.", "success")
+        return redirect(url_for("main.dashboard"))
+
+    return render_template("two_factor_verify.html")
+
+
+@login_bp.route("/login/settings", methods=["GET", "POST"])
+@login_required
+def login_settings():
+    if request.method == "POST":
+        action = request.form.get("action")
+
+        if action == "start_two_factor_setup":
+            if current_user.two_factor_enabled:
+                return render_login_settings(error="Authenticator app 2FA is already enabled.")
+
+            secret = generate_two_factor_secret()
+            session["pending_2fa_setup_user_id"] = current_user.id
+            session["pending_2fa_setup_secret"] = secret
+            flash("Add the secret to your authenticator app, then confirm it with the current 6-digit code.", "info")
+            return redirect(url_for("login.login_settings"))
+
+        if action == "confirm_two_factor_setup":
+            pending_secret = get_pending_two_factor_setup_secret(current_user)
+
+            if not pending_secret:
+                return render_login_settings(error="Start the authenticator setup first.")
+
+            code = (request.form.get("code") or "").strip()
+
+            if not verify_totp_code(pending_secret, code):
+                return render_login_settings(error="Invalid authenticator code. Please try the current code again.")
+
+            current_user.two_factor_secret = pending_secret
+            current_user.two_factor_enabled = True
+            clear_pending_two_factor_setup()
+            db.session.commit()
+            flash("Authenticator app 2FA enabled.", "success")
+            return redirect(url_for("login.login_settings"))
+
+        if action == "cancel_two_factor_setup":
+            clear_pending_two_factor_setup()
+            flash("Authenticator app setup cancelled.", "info")
+            return redirect(url_for("login.login_settings"))
+
+        if action == "disable_two_factor":
+            current_user.two_factor_enabled = False
+            current_user.two_factor_secret = None
+            clear_pending_two_factor_setup()
+            db.session.commit()
+            flash("Authenticator app 2FA disabled.", "success")
+            return redirect(url_for("login.login_settings"))
+
+        if action == "password":
+            current_password = request.form.get("current_password") or ""
+            new_password = request.form.get("new_password") or ""
+            confirm_password = request.form.get("confirm_password") or ""
+
+            if not check_password_hash(current_user.password, current_password):
+                return render_login_settings(error="Your current password is incorrect.")
+
+            password_error = validate_password(new_password)
+
+            if password_error:
+                return render_login_settings(error=password_error)
+
+            if new_password != confirm_password:
+                return render_login_settings(error="The new passwords do not match.")
+
+            current_user.password = generate_password_hash(new_password)
+            db.session.commit()
+            flash("Password updated successfully.", "success")
+            return redirect(url_for("login.login_settings"))
+
+        return render_login_settings(error="Unknown settings action.")
+
+    return render_login_settings()
+
+
+@login_bp.route("/logout", methods=["POST"])
 @login_required
 def logout():
+    clear_pending_two_factor()
+    clear_pending_two_factor_setup()
     logout_user()
-    flash('You have been logged out', 'info')
-    return redirect(url_for('login.login'))
+    flash("You have been logged out.", "info")
+    return redirect(url_for("login.login"))
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index c3ca90f..0e33aad 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -24,6 +24,29 @@ body {
     text-decoration: underline;
 }
 
+.nav-right {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.nav-logout-form {
+    margin: 0 0 0 15px;
+}
+
+.nav-link-button {
+    padding: 0;
+    border: none;
+    background: none;
+    color: white;
+    font: inherit;
+    cursor: pointer;
+}
+
+.nav-link-button:hover {
+    text-decoration: underline;
+}
+
 /* 📦 Layout */
 .container {
     max-width: 900px;
@@ -40,6 +63,33 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
+.flash-stack {
+    display: grid;
+    gap: 12px;
+    margin-bottom: 18px;
+}
+
+.flash-message {
+    margin: 0;
+    padding: 12px 14px;
+    border-radius: 10px;
+}
+
+.flash-message.success {
+    color: #166534;
+    background: #dcfce7;
+}
+
+.flash-message.info {
+    color: #1d4ed8;
+    background: #dbeafe;
+}
+
+.flash-message.error {
+    color: #b91c1c;
+    background: #fee2e2;
+}
+
 .game-card {
     text-align: center;
 }
@@ -305,6 +355,21 @@ body {
     margin: 0;
 }
 
+.inline-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+}
+
+.inline-actions form {
+    margin: 0;
+}
+
+.inline-actions .btn {
+    margin: 0;
+}
+
 .btn.ghost {
     background: #e2e8f0;
     color: #1e293b;
@@ -337,4 +402,8 @@ body {
     .navbar {
         padding: 15px 18px;
     }
+
+    .nav-logout-form {
+        margin-left: 0;
+    }
 }
diff --git a/app/static/css/login.css b/app/static/css/login.css
index 2035741..21554a9 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -1,7 +1,12 @@
 :root {
-    --primary-bg-color: #f4f6f8;
-    --secondary-bg-color: white;
-    --nav-bg-color: #333;
+    --nav-bg-color: #172033;
+    --panel-bg-color: rgba(255, 255, 255, 0.18);
+    --panel-border-color: rgba(255, 255, 255, 0.24);
+    --text-color: #172033;
+    --muted-text-color: #475569;
+    --success-color: #15803d;
+    --info-color: #1d4ed8;
+    --error-color: #b91c1c;
 }
 
 @font-face {
@@ -18,24 +23,30 @@
 body {
     margin: 0;
     min-height: 100vh;
-    display: grid;
-    place-items: center;
+    color: var(--text-color);
     font-family: "Geist Sans", system-ui, sans-serif;
-
-    background: linear-gradient(135deg, #c6dff4, #7c8384);
+    background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 32%),
+        linear-gradient(135deg, #d2ecff 0%, #b8c6db 48%, #7f8ea3 100%);
 }
 
-
 nav {
     width: 100%;
-    background: var(--nav-bg-color);
+    min-height: 68px;
     padding: 15px 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    background: var(--nav-bg-color);
 }
 
 nav ul {
+    margin: 0;
+    padding: 0;
     list-style: none;
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 20px;
 }
 
@@ -46,28 +57,68 @@ nav a {
 }
 
 nav a:hover {
-    color: #4facfe;
+    color: #93c5fd;
 }
 
-/* Center login section */
-main {
-    min-height: calc(100vh - 60px);
-    /* full screen minus navbar */
+.nav-form {
+    margin: 0;
+    padding: 0;
+    width: auto;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+}
+
+.nav-button {
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: 0;
+    color: white;
+    font: inherit;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    transform: none;
+    box-shadow: none;
+    color: #93c5fd;
+}
+
+.auth-shell {
+    min-height: calc(100vh - 68px);
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
 }
 
-/* Title */
-main h1 {
-    margin-bottom: 20px;
+.settings-shell {
+    align-items: flex-start;
 }
 
-main {
+.auth-panel {
+    width: min(420px, 100%);
+    padding: 34px;
+    border-radius: 20px;
+    background: var(--panel-bg-color);
+    border: 1px solid var(--panel-border-color);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
     animation: fadeIn 0.8s ease;
 }
 
+.settings-panel {
+    width: min(900px, 100%);
+}
+
+.settings-grid {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;
@@ -80,72 +131,167 @@ main {
     }
 }
 
-
-/* Form box */
-form {
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(12px);
-    padding: 35px;
-    border-radius: 12px;
-    width: 320px;
-    display: flex;
-    flex-direction: column;
-
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+h1,
+h2 {
+    margin-top: 0;
 }
 
+.muted {
+    margin: 0 0 20px;
+    color: var(--muted-text-color);
+    line-height: 1.5;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 18px;
+    padding: 24px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+}
 
-/* Labels */
 label {
-    margin-top: 10px;
-    margin-bottom: 5px;
+    margin-top: 8px;
     font-size: 14px;
+    font-weight: 600;
 }
 
-/* Inputs */
-form {
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(12px);
-    padding: 35px;
-    border-radius: 12px;
-    width: 320px;
+input {
+    width: 100%;
+    padding: 12px 14px;
+    border: 1px solid rgba(71, 85, 105, 0.25);
+    border-radius: 10px;
+    font: inherit;
+    background: rgba(255, 255, 255, 0.86);
+    color: var(--text-color);
+}
+
+input:focus {
+    outline: 2px solid rgba(59, 130, 246, 0.35);
+    border-color: rgba(59, 130, 246, 0.5);
+}
+
+.field-hint {
+    margin: 0;
+    font-size: 13px;
+    color: var(--muted-text-color);
+}
+
+.checkbox-row {
     display: flex;
-    flex-direction: column;
-
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    align-items: center;
+    gap: 10px;
+    margin: 10px 0 6px;
 }
 
+.checkbox-row input {
+    width: auto;
+}
 
-/* Button */
 button {
-    margin-top: 20px;
-    padding: 12px;
+    margin-top: 14px;
+    padding: 12px 16px;
     border: none;
-    background: linear-gradient(135deg, #e9eff5, #daebf0);
-    color: rgb(0, 0, 0);
-    border-radius: 8px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #eff6ff, #dbeafe);
+    color: #172033;
     cursor: pointer;
     font-size: 16px;
-
-    transition: all 0.2s ease;
+    font-weight: 600;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
 
 button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
 }
 
 button:active {
-    transform: scale(0.97);
+    transform: scale(0.98);
 }
 
-
-/* Error message */
-.error {
-    color: red;
-    margin-bottom: 15px;
+.button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
 }
 
-/* button anim */
\ No newline at end of file
+.button-row button {
+    flex: 1 1 160px;
+}
+
+.secondary-button {
+    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
+}
+
+.message {
+    margin: 0 0 14px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    font-size: 14px;
+}
+
+.message.error {
+    color: var(--error-color);
+    background: rgba(254, 226, 226, 0.92);
+}
+
+.message.success {
+    color: var(--success-color);
+    background: rgba(220, 252, 231, 0.92);
+}
+
+.message.info {
+    color: var(--info-color);
+    background: rgba(219, 234, 254, 0.92);
+}
+
+.qr-panel {
+    display: flex;
+    justify-content: center;
+    margin: 8px 0 6px;
+    padding: 18px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.38);
+    border: 1px solid rgba(255, 255, 255, 0.24);
+}
+
+.qr-code {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 220px;
+    min-height: 220px;
+    padding: 10px;
+    border-radius: 14px;
+    background: #ffffff;
+    color: var(--muted-text-color);
+    text-align: center;
+}
+
+.qr-code img {
+    display: block;
+}
+
+@media (max-width: 640px) {
+    nav {
+        padding: 16px 20px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .auth-shell {
+        padding: 20px 12px 28px;
+    }
+
+    .auth-panel {
+        padding: 24px 18px;
+    }
+
+    form {
+        padding: 18px;
+    }
+}
diff --git a/app/static/js/login.js b/app/static/js/login.js
index 7b22fe2..d916419 100644
--- a/app/static/js/login.js
+++ b/app/static/js/login.js
@@ -1,32 +1,69 @@
-const button = document.querySelector(".magnetic");
+const magneticButtons = document.querySelectorAll(".magnetic");
 
-button.addEventListener("mousemove", (e) => {
-    const rect = button.getBoundingClientRect();
-    const x = e.clientX - rect.left - rect.width / 2;
-    const y = e.clientY - rect.top - rect.height / 2;
+magneticButtons.forEach((button) => {
+    button.addEventListener("mousemove", (event) => {
+        const rect = button.getBoundingClientRect();
+        const x = event.clientX - rect.left - rect.width / 2;
+        const y = event.clientY - rect.top - rect.height / 2;
 
-    button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
-});
+        button.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
+    });
 
-button.addEventListener("mouseleave", () => {
-    button.style.transform = "translate(0,0)";
-});
-
-const inputs = document.querySelectorAll("input");
-
-inputs.forEach(input => {
-    input.addEventListener("input", () => {
-        input.style.boxShadow = "0 0 8px rgba(79,172,254,0.6)";
-
-        setTimeout(() => {
-            input.style.boxShadow = "";
-        }, 300);
+    button.addEventListener("mouseleave", () => {
+        button.style.transform = "translate(0, 0)";
     });
 });
 
-const form = document.querySelector("form");
+document.querySelectorAll("input").forEach((input) => {
+    input.addEventListener("input", () => {
+        input.style.boxShadow = "0 0 8px rgba(59, 130, 246, 0.4)";
 
-form.addEventListener("submit", () => {
-    button.innerText = "Logging in...";
-    button.style.opacity = "0.7";
+        window.clearTimeout(input._loginGlowTimeout);
+        input._loginGlowTimeout = window.setTimeout(() => {
+            input.style.boxShadow = "";
+        }, 250);
+    });
+});
+
+document.querySelectorAll("form").forEach((form) => {
+    form.addEventListener("submit", (event) => {
+        const submitter = event.submitter;
+
+        if (!submitter || submitter.dataset.loadingLabelApplied === "true") {
+            return;
+        }
+
+        const loadingLabel = submitter.dataset.loadingLabel;
+
+        if (loadingLabel) {
+            submitter.dataset.loadingLabelApplied = "true";
+            submitter.dataset.originalLabel = submitter.innerText;
+            submitter.innerText = loadingLabel;
+            submitter.style.opacity = "0.7";
+        }
+    });
+});
+
+document.querySelectorAll(".qr-code[data-qr-value]").forEach((container) => {
+    const qrValue = container.dataset.qrValue;
+
+    if (!qrValue) {
+        return;
+    }
+
+    if (typeof window.QRCode !== "function") {
+        container.textContent = "QR preview could not be loaded.";
+        return;
+    }
+
+    container.innerHTML = "";
+
+    new window.QRCode(container, {
+        text: qrValue,
+        width: 220,
+        height: 220,
+        colorDark: "#172033",
+        colorLight: "#ffffff",
+        correctLevel: window.QRCode.CorrectLevel.M
+    });
 });
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 1c82d34..0d491d5 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -6,24 +6,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard</title>
 
-    <link rel="stylesheet" href="../static/css/dashboard.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
 </head>
 
 <body>
 
-    <!-- 🔝 Navbar -->
     <nav class="navbar">
         <div class="nav-left">♛ 8-Queens App</div>
         <div class="nav-right">
             <a href="{{ url_for('main.dashboard') }}">Dashboard</a>
-            <a href="{{ url_for('login.logout') }}">Logout</a>
+            <a href="{{ url_for('login.login_settings') }}">Login settings</a>
+            <form action="{{ url_for('login.logout') }}" method="post" class="nav-logout-form">
+                <button class="nav-link-button" type="submit">Logout</button>
+            </form>
         </div>
     </nav>
 
-    <!-- 📦 Container -->
     <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-stack">
+            {% for category, message in messages %}
+            <p class="flash-message {{ category }}">{{ message }}</p>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
 
-        <!-- 👤 User Card -->
         <div class="card">
             <h2>👋 Willkommen, {{ current_user.username }}</h2>
 
@@ -31,18 +40,16 @@
                 <p><strong>ID:</strong> {{ current_user.id }}</p>
                 <p><strong>Username:</strong> {{ current_user.username }}</p>
 
-                {% if current_user.email %}
-                <p><strong>Email:</strong> {{ current_user.email }}</p>
-                {% else %}
-                <p><strong>Email:</strong> Not set</p>
-                {% endif %}
-
+                <p><strong>2FA:</strong> {% if current_user.two_factor_enabled %}Authenticator app enabled{% else %}Disabled{% endif %}</p>
                 <p><strong>Erstellt:</strong> {{ current_user.created_at }}</p>
             </div>
 
-            <form action="{{ url_for('login.logout') }}" method="post">
-                <button class="btn danger" type="submit">Logout</button>
-            </form>
+            <div class="inline-actions">
+                <a class="btn secondary" href="{{ url_for('login.login_settings') }}">Open login settings</a>
+                <form action="{{ url_for('login.logout') }}" method="post">
+                    <button class="btn danger" type="submit">Logout</button>
+                </form>
+            </div>
         </div>
 
         <div class="mode-switch">
@@ -51,8 +58,6 @@
             <button class="btn secondary" onclick="toggleSidebar()" id="btnSidebar">Board Settings</button>
         </div>
 
-
-        <!-- ♟️ Game Card -->
         <div class="card game-card">
             <h2>♟️ Damen- und Tuerme-Spiel</h2>
             <p class="board-size-info">Aktuelle Brettgroesse: <span id="boardSizeValue">8</span> x <span
@@ -165,7 +170,7 @@
     <div class="sidebar-backdrop" id="saveBackdrop" onclick="toggleSavePanel(false)"></div>
     <div class="sidebar-backdrop" id="savePointsBackdrop" onclick="toggleSavePointsPanel(false)"></div>
 
-    <script src="../static/js/dashboard.js"></script>
+    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
 
 </body>
 
diff --git a/app/templates/login.html b/app/templates/login.html
index 00152b2..3afe9fa 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -5,35 +5,47 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login</title>
-    <link rel="stylesheet" href="../static/css/login.css">
-    <link rel="stylesheet" href="../static/css/login.css">
-    </link>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
 </head>
 
 <body>
     <nav>
         <ul>
-            <li><a href="{{ url_for('login.login') }}"><span>Login</span></a></li>
-            <li><a href="{{ url_for('login.register') }}"><span>Create account</span></a></li>
+            <li><a href="{{ url_for('login.login') }}">Login</a></li>
+            <li><a href="{{ url_for('login.register') }}">Create account</a></li>
         </ul>
     </nav>
 
-    <main>
-        <h1>Login to your account</h1>
+    <main class="auth-shell">
+        <section class="auth-panel">
+            <h1>Login to your account</h1>
+            <p class="muted">If two-factor authentication is enabled, enter the current 6-digit code from your authenticator app after the password check.</p>
 
-        {% if error %}
-        <p class="error">{{ error }}</p>
-        {% endif %}
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            {% for category, message in messages %}
+            <p class="message {{ category }}">{{ message }}</p>
+            {% endfor %}
+            {% endif %}
+            {% endwith %}
 
-        <form action="{{ url_for('login.login') }}" method="post">
-            <label for="username">Username:</label>
-            <input type="text" name="username" required />
-            <label for="password">Password:</label>
-            <input type="password" name="password" required />
-            <button class="magnetic" type="submit">Login</button>
-        </form>
+            {% if error %}
+            <p class="message error">{{ error }}</p>
+            {% endif %}
+
+            <form action="{{ url_for('login.login') }}" method="post">
+                <label for="username">Username</label>
+                <input id="username" type="text" name="username" maxlength="20" required value="{{ username or '' }}">
+
+                <label for="password">Password</label>
+                <input id="password" type="password" name="password" minlength="8" maxlength="128" required>
+
+                <button class="magnetic" type="submit" data-loading-label="Checking login...">Login</button>
+            </form>
+        </section>
     </main>
-    <script src="../static/js/login.js" defer></script>
+
+    <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/templates/login_settings.html b/app/templates/login_settings.html
new file mode 100644
index 0000000..b4faf67
--- /dev/null
+++ b/app/templates/login_settings.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Settings</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" defer></script>
+</head>
+
+<body>
+    <nav>
+        <ul>
+            <li><a href="{{ url_for('main.dashboard') }}">Dashboard</a></li>
+            <li><a href="{{ url_for('login.login_settings') }}">Login settings</a></li>
+        </ul>
+        <form action="{{ url_for('login.logout') }}" method="post" class="nav-form">
+            <button type="submit" class="nav-button">Logout</button>
+        </form>
+    </nav>
+
+    <main class="auth-shell settings-shell">
+        <section class="auth-panel settings-panel">
+            <h1>Login settings</h1>
+            <p class="muted">Manage authenticator app 2FA and your password without changing the registration flow.</p>
+
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            {% for category, message in messages %}
+            <p class="message {{ category }}">{{ message }}</p>
+            {% endfor %}
+            {% endif %}
+            {% endwith %}
+
+            {% if error %}
+            <p class="message error">{{ error }}</p>
+            {% endif %}
+
+            <div class="settings-grid">
+                {% if current_user.two_factor_enabled %}
+                <form action="{{ url_for('login.login_settings') }}" method="post">
+                    <input type="hidden" name="action" value="disable_two_factor">
+
+                    <h2>Authenticator app 2FA</h2>
+                    <p class="field-hint">2FA is currently enabled for this account.</p>
+                    <p class="field-hint">Use Google Authenticator, Microsoft Authenticator, Authy, or another TOTP app to generate your 6-digit login codes.</p>
+
+                    <button class="secondary-button" type="submit" data-loading-label="Disabling 2FA...">Disable 2FA</button>
+                </form>
+                {% elif pending_two_factor_secret %}
+                <form action="{{ url_for('login.login_settings') }}" method="post">
+                    <input type="hidden" name="action" value="confirm_two_factor_setup">
+
+                    <h2>Finish 2FA setup</h2>
+                    <p class="field-hint">Scan this QR code with your authenticator app, then enter the current 6-digit code to confirm.</p>
+
+                    <div class="qr-panel">
+                        <div class="qr-code" data-qr-value="{{ pending_two_factor_uri }}"></div>
+                    </div>
+                    <p class="field-hint">If scanning does not work, you can still use the manual setup key below.</p>
+
+                    <label for="two_factor_secret">Manual setup key</label>
+                    <input id="two_factor_secret" type="text" value="{{ pending_two_factor_secret }}" readonly>
+
+                    <label for="two_factor_uri">Setup URI</label>
+                    <input id="two_factor_uri" type="text" value="{{ pending_two_factor_uri }}" readonly>
+                    <p class="field-hint">This URI is used to generate the QR setup and can be copied as a fallback for compatible apps.</p>
+
+                    <label for="code">Authenticator code</label>
+                    <input id="code" type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required>
+
+                    <div class="button-row">
+                        <button class="magnetic" type="submit" data-loading-label="Enabling 2FA...">Confirm and enable</button>
+                    </div>
+                </form>
+
+                <form action="{{ url_for('login.login_settings') }}" method="post">
+                    <input type="hidden" name="action" value="cancel_two_factor_setup">
+
+                    <h2>Cancel setup</h2>
+                    <p class="field-hint">Cancel the current authenticator setup if you want to restart with a new secret.</p>
+
+                    <button class="secondary-button" type="submit">Cancel setup</button>
+                </form>
+                {% else %}
+                <form action="{{ url_for('login.login_settings') }}" method="post">
+                    <input type="hidden" name="action" value="start_two_factor_setup">
+
+                    <h2>Authenticator app 2FA</h2>
+                    <p class="field-hint">Protect your account with 6-digit codes from an authenticator app.</p>
+                    <p class="field-hint">After starting setup, you will get a QR code to scan and then confirm once with a live code.</p>
+
+                    <button class="magnetic" type="submit" data-loading-label="Starting setup...">Start setup</button>
+                </form>
+                {% endif %}
+
+                <form action="{{ url_for('login.login_settings') }}" method="post">
+                    <input type="hidden" name="action" value="password">
+
+                    <h2>Change password</h2>
+
+                    <label for="current_password">Current password</label>
+                    <input id="current_password" type="password" name="current_password" minlength="8" maxlength="128"
+                        required>
+
+                    <label for="new_password">New password</label>
+                    <input id="new_password" type="password" name="new_password" minlength="8" maxlength="128" required>
+
+                    <label for="confirm_password">Confirm new password</label>
+                    <input id="confirm_password" type="password" name="confirm_password" minlength="8" maxlength="128"
+                        required>
+
+                    <button class="magnetic" type="submit" data-loading-label="Updating password...">Update password</button>
+                </form>
+            </div>
+        </section>
+    </main>
+
+    <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
+</body>
+
+</html>
diff --git a/app/templates/sign_up.html b/app/templates/sign_up.html
index 88adee1..e12576f 100644
--- a/app/templates/sign_up.html
+++ b/app/templates/sign_up.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign Up</title>
-    <link rel="stylesheet" href="../static/css/login.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
 </head>
 
 <body>
@@ -15,21 +15,38 @@
             <li><a href="{{ url_for('login.register') }}">Create account</a></li>
         </ul>
     </nav>
-    <main>
-        <h1>Create an account</h1>
 
-        {% if error %}
-        <p class="error">{{ error }}</p>
-        {% endif %}
+    <main class="auth-shell">
+        <section class="auth-panel">
+            <h1>Create an account</h1>
+            <p class="muted">Create your account here and enable authenticator app 2FA later in your login settings.</p>
 
-        <form action="{{ url_for('login.register') }}" method="post">
-            <label for="username">Username:</label>
-            <input type="text" name="username" required />
-            <label for="password">Password:</label>
-            <input type="password" name="password" required />
-            <button type="submit">Sign Up</button>
-        </form>
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            {% for category, message in messages %}
+            <p class="message {{ category }}">{{ message }}</p>
+            {% endfor %}
+            {% endif %}
+            {% endwith %}
+
+            {% if error %}
+            <p class="message error">{{ error }}</p>
+            {% endif %}
+
+            <form action="{{ url_for('login.register') }}" method="post">
+                <label for="username">Username</label>
+                <input id="username" type="text" name="username" maxlength="20" required value="{{ username or '' }}">
+
+                <label for="password">Password</label>
+                <input id="password" type="password" name="password" minlength="8" maxlength="128" required>
+                <p class="field-hint">Use at least 8 characters.</p>
+
+                <button class="magnetic" type="submit" data-loading-label="Creating account...">Sign Up</button>
+            </form>
+        </section>
     </main>
+
+    <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/templates/two_factor_verify.html b/app/templates/two_factor_verify.html
new file mode 100644
index 0000000..e5af10b
--- /dev/null
+++ b/app/templates/two_factor_verify.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verify Login</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+</head>
+
+<body>
+    <nav>
+        <ul>
+            <li><a href="{{ url_for('login.login') }}">Login</a></li>
+            <li><a href="{{ url_for('login.register') }}">Create account</a></li>
+        </ul>
+    </nav>
+
+    <main class="auth-shell">
+        <section class="auth-panel">
+            <h1>Verify your login</h1>
+            <p class="muted">Open your authenticator app and enter the current 6-digit code.</p>
+
+            {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+            {% for category, message in messages %}
+            <p class="message {{ category }}">{{ message }}</p>
+            {% endfor %}
+            {% endif %}
+            {% endwith %}
+
+            {% if error %}
+            <p class="message error">{{ error }}</p>
+            {% endif %}
+
+            <form action="{{ url_for('login.verify_two_factor') }}" method="post">
+                <label for="code">Verification code</label>
+                <input id="code" type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required>
+                <p class="field-hint">Codes refresh automatically every 30 seconds in your authenticator app.</p>
+
+                <button class="magnetic" type="submit" data-loading-label="Verifying...">Verify</button>
+            </form>
+        </section>
+    </main>
+
+    <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
+</body>
+
+</html>
diff --git a/database_setup.sql b/database_setup.sql
index 161cd8b..216606d 100644
--- a/database_setup.sql
+++ b/database_setup.sql
@@ -1,16 +1,28 @@
 CREATE TABLE users (
-    id INT AUTO_INCREMENT PRIMARY KEY,
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
     username VARCHAR(20) NOT NULL UNIQUE,
-    password VARCHAR(80) NOT NULL,
-    email VARCHAR(120) NOT NULL UNIQUE,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    password VARCHAR(255) NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    last_login DATETIME,
+    two_factor_enabled BOOLEAN NOT NULL DEFAULT 0,
+    two_factor_secret VARCHAR(64)
+);
+
+CREATE TABLE login_attempts (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    ip_address VARCHAR(45) NOT NULL,
+    username VARCHAR(80) NOT NULL,
+    failed_attempts INTEGER NOT NULL DEFAULT 0,
+    locked_until DATETIME,
+    last_failed_at DATETIME,
+    CONSTRAINT uq_login_attempt_ip_username UNIQUE (ip_address, username)
 );
 
 CREATE TABLE game_state (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     user_id INTEGER NOT NULL,
-    board TEXT NOT NULL,             -- JSON String (z.B. "[0,4,7,5,2,6,1,3]")
-    mode TEXT NOT NULL,              -- "queens" oder "rooks"
+    board TEXT NOT NULL,
+    mode TEXT NOT NULL,
     board_size INTEGER NOT NULL DEFAULT 8,
     save_name VARCHAR(80) NOT NULL DEFAULT 'Unnamed Save',
     save_note TEXT NOT NULL DEFAULT '',

From 02cb1d0a640a88fa7927e398a001cad11c13e6b1 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Wed, 1 Apr 2026 11:54:40 +0200
Subject: [PATCH 08/15] added step wise solution and an animation.

---
 __pycache__/run.cpython-312.pyc               | Bin 0 -> 275 bytes
 app/__init__.py                               |   5 +-
 app/__pycache__/__init__.cpython-311.pyc      | Bin 2477 -> 2477 bytes
 app/__pycache__/__init__.cpython-312.pyc      | Bin 4439 -> 2108 bytes
 .../__pycache__/gamestate.cpython-311.pyc     | Bin 1747 -> 1747 bytes
 .../__pycache__/gamestate.cpython-312.pyc     | Bin 1743 -> 1743 bytes
 app/models/__pycache__/user.cpython-311.pyc   | Bin 1475 -> 1475 bytes
 .../__pycache__/login_routes.cpython-311.pyc  | Bin 3515 -> 3515 bytes
 .../__pycache__/main_routes.cpython-311.pyc   | Bin 13583 -> 17527 bytes
 .../__pycache__/main_routes.cpython-312.pyc   | Bin 11962 -> 15316 bytes
 app/routes/main_routes.py                     | 121 ++++-
 app/static/css/dashboard.css                  | 133 ++++++
 app/static/js/dashboard.js                    | 432 +++++++++++++++++-
 app/templates/dashboard.html                  |  25 +-
 14 files changed, 689 insertions(+), 27 deletions(-)
 create mode 100644 __pycache__/run.cpython-312.pyc

diff --git a/__pycache__/run.cpython-312.pyc b/__pycache__/run.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b970ad63162bc8b0a8b0a76f84b7232f8a14f530
GIT binary patch
literal 275
zcmX@j%ge<81pJTAWTpe@#~=<2Fhd!i{eX<=3@HpLj5!Rsj8Tk?3``8EjH{v2Q4Fa}
zDNNZK3=BoWsSH`{FzpCBg?SCjYDNg3k)e{cl2w!KC5WrZc#A8!C^fMpH9oPR;1)-G
zd~RZ9UVMBAP=YljHK{b+Pm|>qGf=Jw<QR~Gyu{qp`1o7QMWuNw89svy`Nalg>lIY~
z;;_lhPbtkwwJYKQ3WMw`)&deAm>C%v?=na|WD{u4X<&Z9%-vCSiCOXn3wyhJqx%Gv
S2KTEh;vbk9Sfq+TVF3UJPd&{5

literal 0
HcmV?d00001

diff --git a/app/__init__.py b/app/__init__.py
index ddb86b3..621c801 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -1,7 +1,8 @@
-from flask import Flask
 import os
-from flask_sqlalchemy import SQLAlchemy
+
+from flask import Flask
 from flask_login import LoginManager
+from flask_sqlalchemy import SQLAlchemy
 
 db = SQLAlchemy()
 login_manager = LoginManager()
diff --git a/app/__pycache__/__init__.cpython-311.pyc b/app/__pycache__/__init__.cpython-311.pyc
index c75a2cb53ecd25c07bde4182f6d7f95ab4362cfc..f13f5cffc8dfe2f8c316f537ff1ca170f21840ce 100644
GIT binary patch
delta 257
zcmZ20yjGZZIWI340}#A;aVGQDL|#?CD25b<6s8=;T&5@{Muv$F(xPn3fby$BiohU>
zorxipWnzK25o0ieCfiGppr0n=EmpUj#NuoqgU2U7Ju}ZYF)uMawFt=P3J&yf%t_8j
z&8^(Hb1e&_?B;aVDU6I<oByz#VKgn01nR%Vng-Hb#0+9{gW2&pAXAE1Kq3MVk>bLf
mM2I<)|8m&dayEeB0|xO6sOScR$^}$(gF*cQDw<r$X#xN~9!n|!

delta 257
zcmZ20yjGZZIWI340}$L_e=76lL|#?CT*fFyMurrI6s8=eD5i-H(xNQOfby$BiohU>
zorxipZDN7A5mPXOCfiGppeExjR=1qQ;%q-4iz_(L$1x{4BQ>`Y$m8+JPtVNrP0UM7
zPc7QGb1e&_%;t2~DU6JqoByz#VKlwPng-HX#0)g1ND@fg5&#Rt7Z>IvLQE-Q0SR+M
ogmXZ~P5#SaZ!3O*0R`P);A{ZH8w~0fP|*zrl?$k7awVq;01UrM-2eap

diff --git a/app/__pycache__/__init__.cpython-312.pyc b/app/__pycache__/__init__.cpython-312.pyc
index ae97128424de79a8757e3b913bbd82e78df38ceb..e7768a0ce75829f99a5bab57a2bc7ad0b1896dbc 100644
GIT binary patch
delta 692
zcmYLGO=uHA7@gU_WRvVB+9qimE3Fn~g+{BTCs89-FIBLmmql3C>>5{RH*sbI1}zQf
zMG!>h;8E}<9u-d>MDe6Yp}5+E2cgAFp@NW$&bI;m4sYLkGxNTW{WcD~DVZM)BZow7
zZG8$7`LQ{+zAV%e<RK3eWW!e?IFxJ&1DA;$Dz=hxg{YxsYZyt$*Iqz~C_5vR@=s+w
z^**xo9=5b?IKE`zL_JSjc2khTQo9vI7v0Eh`BdoK%H^eoMw-|Cu*aY375whyYu%9e
zM!tp*@!h;t9SzHC&|LRSQVFYTDn@tFjX8dzFpcN<YT?zyHWpn(ma@vyO#Olz`YW*;
z`@Cj!PbZRhHOVlav7j9#a?6hsIf!CQN-|yXzzIB>7XeHXFx4Lv-A?DI;{;I<J5IgR
z<8O^4c#{7#8hD(~n&+^|sktx@Pm)sD_I$$XEzyucLs|ekFCv^~JBt0=agu9NUz|8D
zA^fv>aH0Y?_R@AY_E|l2gUA_jTIG9+Rs#a)C;(ifRe*H7j9^n~ouMOw{}1kT=&Uec
zr|b{ncZ$zOusZfFn|owDFdi0v%R>Fq_(JLIdQH$BBw)ax(fecN#j^aNtS;`)SUEZl
zvFbHg6_tVKQ|=Jh8CAe34IOrixWlDURoK)7m<E7Jo+DZY4r30oC&f?d68{uEj^+`9
pU9lMfJ2J-jE7E_U>L!}mM2Ekt#d}x!(wEXcZuX5`WfB+Dn7=qJwT}P*

literal 4439
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

diff --git a/app/models/__pycache__/gamestate.cpython-311.pyc b/app/models/__pycache__/gamestate.cpython-311.pyc
index 9a1f79a2f5a8535fcb9975de9cf305e3db026cce..15f2556c1dd6a1c22e048fbd7d8d72b698dd5ef1 100644
GIT binary patch
delta 22
ccmcc2dzqJaIWI340}x0*I+JO*k@pxI07zQ~h5!Hn

delta 22
ccmcc2dzqJaIWI340}zy~J(Vf5k@pxI07+d2lK=n!

diff --git a/app/models/__pycache__/gamestate.cpython-312.pyc b/app/models/__pycache__/gamestate.cpython-312.pyc
index db13518392aa5ee34fb3b8da4780cd331dbc795d..7606bb26f25e6ca489169a9434b2f42cdcf3b7cc 100644
GIT binary patch
delta 22
ccmX@ld!Co~G%qg~0}x0*I+JO*k@pZA07?%Ao&W#<

delta 22
ccmX@ld!Co~G%qg~0}zy~J(Vf5k@pZA080@Ds{jB1

diff --git a/app/models/__pycache__/user.cpython-311.pyc b/app/models/__pycache__/user.cpython-311.pyc
index 0748aa0ac9ad887b021489ae3b80c092f71d8fda..1ecb09acf640c7fe0cbdd9e7b05c761acc9be631 100644
GIT binary patch
delta 20
acmX@ieVChjIWI340}${(I<t{`2P*(L?FFd-

delta 20
acmX@ieVChjIWI340}yQMUAvKc2P*(N<ptaT

diff --git a/app/routes/__pycache__/login_routes.cpython-311.pyc b/app/routes/__pycache__/login_routes.cpython-311.pyc
index 60142fbac202d7a59c2ad6e912f83c4bf4ab1ffc..9f461faf873baf2ad19af5b29d226aaa7d2bc2b1 100644
GIT binary patch
delta 20
acmdljy<3`lIWI340}x0*I<t{`11|tNNd?6K

delta 20
acmdljy<3`lIWI340}xopoZ85}ffoQb`vqM9

diff --git a/app/routes/__pycache__/main_routes.cpython-311.pyc b/app/routes/__pycache__/main_routes.cpython-311.pyc
index ec65ad5f4128bc316292c594bb4bf37706520277..7e04893e90b1a4ebdb10018f91ac432b96bcaefb 100644
GIT binary patch
delta 6430
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

delta 3292
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

diff --git a/app/routes/__pycache__/main_routes.cpython-312.pyc b/app/routes/__pycache__/main_routes.cpython-312.pyc
index 237fe6ebaf62d02e644b984c2ee3ad75f1e36916..ab7d6ab35069164a7e657293a4978f296cd1d3e1 100644
GIT binary patch
delta 5885
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
DZfkK9

delta 3140
zcma)8TWlOx8J@Fq*}D_39bfhmuN~X#u^p>PjO(-^p%6QD+PF&W1Z8O0jCW@3NoIGJ
zGwZmCT5M1%DtPGSv}y{yq*S6xourjq@c;_tfv5H*&?2F!Kp^n|ybzK+01uS^KjU3H
z#*r9lfB)zF-}%pfKmKgtXQvuIiN_-XeD7ZS*!pGi#fG-U+W|p%RWJmD*n;N&B^rTs
zzz&o|O)N>8RFXBhq-Y93xo8JVAuUu2YhhSRhHOVlQ7y`O#g3KYS{(SG)?kFREk;<|
z8W2p;h?tGba1(x7!fYrKBYKf&O@<h|D7<(*DVd2gd)U#Irc~oH@nJ^dqOk0<f|jhw
zdzxx;Gi)@kA?nCf4cWQPXqhEfTWi-EZEI*PT|=eXYx<1jI(eopPu1n=b@J^s`9S90
zTfnOAYq+{q9W^}rh=kJs%5DP6)<6TD|D&{P6MSbKzr*NW?<(l;*#zHJ!}s*ooC0KS
z6XcE>a-eS=Qr!gEeV(ZOf5kLSuDmDSAaVxSMrO-@=|}_THC1%#n)#xB&Y@Nn7+asE
zy&y?4S5a4v2Sw7Mij(8hYQU4JUY<2QQJ-;D*%PU=;E4stW(%QFl4c)-Cgd(S=(7KW
zrb&(+4K}mc@Oz^w?7?A0uT;#kK?iUdq&wjc9YT^qvKxpOt=M|O%zta%G|O}sn}~EO
zXd@kAl}IlcVy{N#CUUreg?dF$<+ZbP1ow9#c@T&z13CQ__$c=><~sJdRn0El3&QQ}
z(dfh6%69ff^i*#n?5UC`*_K=7HhKzpYd9q@=+4a-i?*o-Xo_WHsaCEr>T9HqbJnE?
z;P98(vDhHVtqgDbh{VumIt*lzj<PRW+95pctq+n(cC_{27EhjWbZU4~$uUgO`F886
z#c@0^hU5?u9+O9rn?Q0Hh$p)9CHgpWAuzF6wMr&E0!xT(WL7VkdAF)pO^TXa3{W=f
z``+xD)Y5J1f|*|jn*zkw5c)ijCH73)^I&_t{bNz_4Pd`d_clSs(LYb&DREUo53$Bf
z(^fQZ8dhkRD$$c{IMcNlg@q>rlAia%Mau?T@-ydY5Vn2K6a+{*opn8N)~r&jL|$sX
zSCV161t>1Jz}@nl4mlKJ1bS43&fxjDYuaX^Y8rVzdZ^>;C}6+MbU~Q^nMunwtfyDn
zx1S`CV7KG&2v!3fMZ(L6Cs3MmAb<{R;?Io(SrYynO<vmfX|(UA)JJpdPRH3Xew6#L
z;e6Q8-8r5}O5to3l_a>5yNVD?-AoO9IQUugz)k4@&8@tXeU6;wIbN%K9_Mes35wO?
z$>$(P2K1RiF;H|8iHVZ1S)K<|F}Z`dDFIQ#o@D4%ou_-Xnb@;k(~aCWxiDuI&eCrK
z@B;f=*G&k+&vz{M^MG^Z2I@iOTp4c&`b}86INPCa*bCil@^^uMiCya+hU1CepB!0&
zHCT6FE!YM3Xo0oYxUNs~)R_k-F2epL(3@j}xj5){`dTAl*c0J*=c$z!`W8r_nqYmY
zG&|BCB`xe^e{aLp$TDUDzGs5fHugk+y6X&Dvf+C=Seu7L@L_>79qiY;Gp(I9q!F#|
zsPRt+S?55~;+esGcwwH=DQFfb?<DSoT>YFm3H?Q%gyjV}I|b|2U8ib#5z8H49iA}O
zP5{Qw2~Y3FK4#YkIunU?3Fg5x*`Ee7ynoiZ#gmQsQpKhC-vEpt({(MU4BcTEo>Fj1
zC9CSE4*OUQ(WmP7o=0xuy|{M_h#LZuUH$y=5JvxCGQ`2dS3vqE!X)<2;Op$Moju{Z
zTS5tC>G0iVwzzXYB<mMDueSQLl46_DQ%JBP=@k3UP*a@WQX4<)?V%Rs5(sYyD>sJT
zC(0NCPcZsG-w7NSyrpRYIZQ4e6P{eOC=58R69)_r0euO%myw{yR{~y;4>QZ~{i@%1
z>w#?K$AI`1{M>mKA020>ckO}M_VTU;viKuZ@H&z=kf5*h2SB`_0b>QGiW;T&GmO54
zXl@oJg<Iq){yE>W%dmaV=xy|+c^=}5W5vr=`YwQegFrOy5c|WP-C$hf@b`&v9CrCE
zpg0xaxv7_>8oR$$b9f4$1zJQ>H_}TS92<Y+_~X<0uRig}v4i=k32h8=^u?FjTlkC!
z+m3GV7lAIr!9NOYXykj4;Gd5COZy>gKvDf4k-%io%Ruh&JHd6k6|-O!t%85aH30ox
zVBygx7jwX>J^qB-2Rx+Q*4?ud2Y?@7K6P<Yc~LIP+s>?2_KO5dnD?UJ8(Z-mu-zdn
z2mb}+W?w;63z9Ze6Uyhy_(tZvU};ge%K4efy7veFA>fZVFD_o#`1Ikh!pDIRcs@-j
z&O|=Ic&|{bZHnc_)5-%$(a{Z$&A&tYz{+{s+)qCgglz&&S@$l`TOuLkb0PY<5NEIL
z-5*Jl)b0HuN#2gJ+k4+)*B@%`es1A%%jM8g=2N2nj%@iyAW4FEL?N&hN&hVgmbV^a
L^247<7}fs*K4HV5

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index c1b77b2..15ea363 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,5 +1,6 @@
 import json
 import random
+from datetime import datetime
 
 from flask import Blueprint, jsonify, render_template, request
 from flask_login import current_user, login_required
@@ -27,6 +28,10 @@ def parse_favorite_flag(raw_value):
     return str(raw_value).lower() in {"1", "true", "yes", "on"}
 
 
+def get_position_label(row, col, board_size):
+    return f"{chr(65 + col)}{board_size - row}"
+
+
 def solve_queens(board_size):
     queen_positions = [-1] * board_size
     queen_solutions = []
@@ -64,6 +69,105 @@ def solve_rooks(board_size):
     return rook_positions
 
 
+def build_queens_trace(board_size):
+    queen_positions = [-1] * board_size
+    steps = []
+
+    def is_queen_position_safe(row, col):
+        for previous_row in range(row):
+            previous_col = queen_positions[previous_row]
+
+            if previous_col == col:
+                return False
+
+            if abs(previous_col - col) == abs(previous_row - row):
+                return False
+
+        return True
+
+    def place_queen(row):
+        if row == board_size:
+            steps.append({
+                "type": "solution",
+                "row": None,
+                "col": None,
+                "board": queen_positions[:],
+                "message": f"Loesung gefunden. Alle {board_size} Damen stehen ohne Konflikte."
+            })
+            return True
+
+        for col in range(board_size):
+            if not is_queen_position_safe(row, col):
+                continue
+
+            queen_positions[row] = col
+            position = get_position_label(row, col, board_size)
+            steps.append({
+                "type": "place",
+                "row": row,
+                "col": col,
+                "board": queen_positions[:],
+                "message": f"Dame auf {position} gesetzt."
+            })
+
+            if place_queen(row + 1):
+                return True
+
+            queen_positions[row] = -1
+            steps.append({
+                "type": "remove",
+                "row": row,
+                "col": col,
+                "board": queen_positions[:],
+                "message": f"Backtracking: Dame von {position} entfernt."
+            })
+
+        return False
+
+    solved = place_queen(0)
+
+    return {
+        "mode": "queens",
+        "board_size": board_size,
+        "initial_board": [-1] * board_size,
+        "steps": steps,
+        "solved": solved
+    }
+
+
+def build_rooks_trace(board_size):
+    rook_positions = solve_rooks(board_size)
+    board = [-1] * board_size
+    steps = []
+
+    for row, col in enumerate(rook_positions):
+        board[row] = col
+        position = get_position_label(row, col, board_size)
+        steps.append({
+            "type": "place",
+            "row": row,
+            "col": col,
+            "board": board[:],
+            "message": f"Turm auf {position} gesetzt."
+        })
+
+    steps.append({
+        "type": "solution",
+        "row": None,
+        "col": None,
+        "board": board[:],
+        "message": f"Loesung gefunden. Alle {board_size} Tuerme stehen ohne Konflikte."
+    })
+
+    return {
+        "mode": "rooks",
+        "board_size": board_size,
+        "initial_board": [-1] * board_size,
+        "steps": steps,
+        "solved": True
+    }
+
+
 def serialize_game_state(game_state):
     board = json.loads(game_state.board)
 
@@ -149,12 +253,24 @@ def solve_queens_route():
     return jsonify(solve_queens(board_size))
 
 
+@main_bp.route("/solve_trace")
+def solve_queens_trace_route():
+    board_size = parse_board_size(request.args.get("size"))
+    return jsonify(build_queens_trace(board_size))
+
+
 @main_bp.route("/solve_rooks")
 def solve_rooks_route():
     board_size = parse_board_size(request.args.get("size"))
     return jsonify(solve_rooks(board_size))
 
 
+@main_bp.route("/solve_rooks_trace")
+def solve_rooks_trace_route():
+    board_size = parse_board_size(request.args.get("size"))
+    return jsonify(build_rooks_trace(board_size))
+
+
 @main_bp.route("/save", methods=["POST"])
 @login_required
 def save_game():
@@ -166,6 +282,7 @@ def save_game():
     save_name = (data.get("saveName") or "").strip() or f"{piece_mode.title()} Save"
     save_note = (data.get("saveNote") or "").strip()
     is_favorite = bool(data.get("isFavorite"))
+    timestamp = datetime.utcnow()
 
     game_state = GameState(
         user_id=current_user.id,
@@ -174,7 +291,9 @@ def save_game():
         board_size=board_size,
         save_name=save_name,
         save_note=save_note,
-        is_favorite=is_favorite
+        is_favorite=is_favorite,
+        created_at=timestamp,
+        updated_at=timestamp
     )
 
     db.session.add(game_state)
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index c3ca90f..bf902fd 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -44,6 +44,12 @@ body {
     text-align: center;
 }
 
+#statusMessage {
+    min-height: 24px;
+    margin: 0 0 8px;
+    font-weight: bold;
+}
+
 .board {
     overflow-x: auto;
     padding-bottom: 8px;
@@ -91,6 +97,21 @@ body {
     transform: scale(1.05);
 }
 
+.cell.solver-place {
+    box-shadow: inset 0 0 0 4px #22c55e;
+    animation: solverPulse 0.35s ease;
+}
+
+.cell.solver-remove {
+    box-shadow: inset 0 0 0 4px #f59e0b;
+    animation: solverPulse 0.35s ease;
+}
+
+.cell.solver-solution {
+    box-shadow: inset 0 0 0 4px #2563eb;
+    animation: solverPulse 0.35s ease;
+}
+
 .white {
     background: #e2e8f0;
 }
@@ -107,6 +128,10 @@ body {
 /* 🎛️ Buttons */
 .controls {
     margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
 .btn {
@@ -123,6 +148,12 @@ body {
     background: #2563eb;
 }
 
+.btn:disabled,
+.btn:disabled:hover {
+    background: #94a3b8;
+    cursor: not-allowed;
+}
+
 .btn.secondary {
     background: #64748b;
 }
@@ -163,6 +194,79 @@ body {
     background: #22c55e;
 }
 
+.solver-panel {
+    margin-top: 12px;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid #dbe4ee;
+    background: #f8fafc;
+    text-align: left;
+}
+
+.solver-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.solver-panel h3 {
+    margin: 0 0 6px;
+    color: #1e293b;
+}
+
+.solver-message {
+    margin: 0;
+    color: #475569;
+}
+
+.solver-step-info {
+    margin: 0;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: #dbeafe;
+    color: #1d4ed8;
+    font-size: 14px;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.solver-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 14px;
+}
+
+.solver-controls .btn,
+.controls .btn {
+    margin: 0;
+}
+
+.solver-speed {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 12px;
+    margin-top: 14px;
+}
+
+.solver-speed input[type="range"] {
+    width: 100%;
+}
+
+.solver-speed-label {
+    font-weight: bold;
+    color: #334155;
+}
+
+.solver-speed-value {
+    min-width: 62px;
+    text-align: right;
+    color: #475569;
+    font-variant-numeric: tabular-nums;
+}
+
 .board-size-info {
     margin: 0 0 10px;
     color: #475569;
@@ -175,10 +279,14 @@ body {
     width: min(320px, 85vw);
     height: 100vh;
     padding: 24px;
+    box-sizing: border-box;
     background: white;
     box-shadow: -10px 0 24px rgba(15, 23, 42, 0.18);
     transform: translateX(100%);
     transition: transform 0.25s ease;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     z-index: 30;
 }
 
@@ -329,6 +437,20 @@ body {
     pointer-events: auto;
 }
 
+@keyframes solverPulse {
+    0% {
+        transform: scale(0.97);
+    }
+
+    50% {
+        transform: scale(1.03);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
 @media (max-width: 720px) {
     .container {
         padding: 12px;
@@ -337,4 +459,15 @@ body {
     .navbar {
         padding: 15px 18px;
     }
+
+    .solver-panel-header,
+    .solver-speed {
+        grid-template-columns: 1fr;
+        display: grid;
+    }
+
+    .solver-step-info,
+    .solver-speed-value {
+        justify-self: start;
+    }
 }
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index 437d712..ca8b30c 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -2,17 +2,34 @@ const DEFAULT_BOARD_SIZE = 8;
 const MIN_BOARD_SIZE = 4;
 const MAX_BOARD_SIZE = 13;
 const EMPTY_CELL = -1;
+const DEFAULT_SOLVER_MESSAGE = "Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.";
 
 let mode = "queens";
 let boardSize = DEFAULT_BOARD_SIZE;
 let pendingBoardSize = DEFAULT_BOARD_SIZE;
 let board = createEmptyBoard(boardSize);
 
+let solverSteps = [];
+let solverStepIndex = -1;
+let solverTimerId = null;
+let solverSpeedMs = 320;
+let solverLoading = false;
+let solverRequestId = 0;
+let currentSolverHighlight = null;
+
 const boardDiv = document.getElementById("board");
 const statusMessage = document.getElementById("statusMessage");
 const queenList = document.getElementById("queenList");
 const btnQueens = document.getElementById("btnQueens");
 const btnRooks = document.getElementById("btnRooks");
+const btnPrepareSolve = document.getElementById("btnPrepareSolve");
+const btnInstantSolve = document.getElementById("btnInstantSolve");
+const btnNextStep = document.getElementById("btnNextStep");
+const btnPlayPause = document.getElementById("btnPlayPause");
+const solverMessage = document.getElementById("solverMessage");
+const solverStepInfo = document.getElementById("solverStepInfo");
+const solverSpeedInput = document.getElementById("solverSpeedInput");
+const solverSpeedValue = document.getElementById("solverSpeedValue");
 const settingsSidebar = document.getElementById("settingsSidebar");
 const sidebarBackdrop = document.getElementById("sidebarBackdrop");
 const saveSidebar = document.getElementById("saveSidebar");
@@ -63,6 +80,21 @@ function setStatus(message = "", color = "") {
     statusMessage.style.color = color;
 }
 
+function setSolverMessage(message = DEFAULT_SOLVER_MESSAGE) {
+    solverMessage.textContent = message;
+}
+
+function updateSolverSpeed(rawValue) {
+    solverSpeedMs = Number(rawValue);
+    solverSpeedInput.value = String(solverSpeedMs);
+    solverSpeedValue.textContent = `${solverSpeedMs} ms`;
+
+    if (isSolverPlaying()) {
+        stopSolverPlayback(false);
+        scheduleNextSolverPlaybackStep();
+    }
+}
+
 function updateBoardLayout() {
     const cellSize = Math.max(32, Math.min(60, Math.floor(480 / boardSize)));
 
@@ -70,10 +102,85 @@ function updateBoardLayout() {
     boardDiv.style.setProperty("--cell-size", `${cellSize}px`);
 }
 
+function isSolverPlaying() {
+    return solverTimerId !== null;
+}
+
+function hasPreparedSolverTrace() {
+    return solverSteps.length > 0;
+}
+
+function hasCompletedSolverTrace() {
+    return hasPreparedSolverTrace() && solverStepIndex >= solverSteps.length - 1;
+}
+
+function stopSolverPlayback(refreshControls = true) {
+    if (solverTimerId !== null) {
+        window.clearTimeout(solverTimerId);
+        solverTimerId = null;
+    }
+
+    if (refreshControls) {
+        updateSolverControls();
+    }
+}
+
+function updateSolverControls() {
+    const currentStep = Math.max(0, solverStepIndex + 1);
+
+    btnPrepareSolve.disabled = solverLoading;
+    btnInstantSolve.disabled = solverLoading;
+    btnNextStep.disabled = solverLoading || hasCompletedSolverTrace();
+    btnPlayPause.disabled = solverLoading;
+
+    btnPrepareSolve.textContent = solverLoading ? "Preparing..." : "Solve Step-by-Step";
+
+    if (isSolverPlaying()) {
+        btnPlayPause.textContent = "Pause";
+    } else if (hasCompletedSolverTrace()) {
+        btnPlayPause.textContent = "Replay Animation";
+    } else {
+        btnPlayPause.textContent = "Play Animation";
+    }
+
+    solverStepInfo.textContent = `Schritt ${currentStep} / ${solverSteps.length}`;
+}
+
+function discardSolverTrace(message = DEFAULT_SOLVER_MESSAGE) {
+    solverRequestId += 1;
+    solverLoading = false;
+    stopSolverPlayback(false);
+
+    solverSteps = [];
+    solverStepIndex = -1;
+    currentSolverHighlight = null;
+
+    setSolverMessage(message);
+    updateSolverControls();
+}
+
+function rewindSolverTrace() {
+    stopSolverPlayback(false);
+    solverStepIndex = -1;
+    currentSolverHighlight = null;
+    board = createEmptyBoard(boardSize);
+    setSolverMessage("Ablauf zurueckgesetzt. Starte die Animation erneut oder gehe weiter mit Next Step.");
+    drawBoard();
+    updateSolverControls();
+}
+
 function setMode(newMode) {
+    if (mode === newMode) {
+        return;
+    }
+
     mode = newMode;
-    resetBoard();
     updateModeButtons();
+    resetBoard({
+        statusMessageText: `${getPieceLabel(mode)}-Modus aktiviert.`,
+        statusColor: "#2563eb",
+        solverMessageText: `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
+    });
 }
 
 function closeAllPanels() {
@@ -99,8 +206,6 @@ function getConflicts() {
             const colB = board[rowB];
             const sameColumn = colA === colB;
             const sameDiagonal = Math.abs(colA - colB) === Math.abs(rowA - rowB);
-
-            // Rooks only attack vertically, queens also attack diagonally.
             const hasConflict = mode === "rooks" ? sameColumn : sameColumn || sameDiagonal;
 
             if (hasConflict) {
@@ -116,16 +221,16 @@ function checkSolution() {
     const allPlaced = board.every((col) => col !== EMPTY_CELL);
 
     if (!allPlaced) {
-        setStatus("❗ Noch nicht alle Figuren platziert.", "orange");
+        setStatus("Noch nicht alle Figuren platziert.", "#d97706");
         return;
     }
 
     if (getConflicts().length > 0) {
-        setStatus("❌ Es gibt Konflikte!", "red");
+        setStatus("Es gibt Konflikte auf dem Brett.", "red");
         return;
     }
 
-    setStatus("🎉 Perfekt geloest!", "green");
+    setStatus("Perfekt geloest.", "green");
 }
 
 function drawBoard() {
@@ -134,6 +239,7 @@ function drawBoard() {
     updateBoardLayout();
 
     const conflicts = getConflicts();
+    const highlight = currentSolverHighlight;
 
     for (let row = -1; row < boardSize; row++) {
         for (let col = -1; col < boardSize; col++) {
@@ -150,10 +256,19 @@ function drawBoard() {
             } else {
                 cell.classList.add("cell", (row + col) % 2 === 0 ? "white" : "black");
 
+                if (highlight && highlight.row === row && highlight.col === col) {
+                    cell.classList.add(
+                        highlight.type === "remove"
+                            ? "solver-remove"
+                            : highlight.type === "solution"
+                                ? "solver-solution"
+                                : "solver-place"
+                    );
+                }
+
                 if (board[row] === col) {
                     cell.textContent = mode === "queens" ? "♛" : "♜";
 
-                    // Highlight pieces that are part of at least one conflict pair.
                     if (conflicts.some(([conflictRow, conflictCol]) => conflictRow === row && conflictCol === col)) {
                         cell.classList.add("invalid");
                     }
@@ -170,6 +285,18 @@ function drawBoard() {
 }
 
 function placeQueen(row, col) {
+    if (solverLoading) {
+        return;
+    }
+
+    if (hasPreparedSolverTrace() || isSolverPlaying()) {
+        discardSolverTrace("Solver-Ablauf verworfen, weil das Brett manuell geaendert wurde.");
+        setStatus("Solver-Ablauf verworfen. Bereite ihn bei Bedarf neu vor.", "#d97706");
+    } else {
+        setStatus();
+    }
+
+    currentSolverHighlight = null;
     board[row] = board[row] === col ? EMPTY_CELL : col;
     drawBoard();
 }
@@ -182,7 +309,9 @@ function previewBoardSize(size) {
 
 function applyBoardSize() {
     boardSize = pendingBoardSize;
+    discardSolverTrace(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
     board = createEmptyBoard(boardSize);
+    currentSolverHighlight = null;
     updateBoardSizeDisplays(boardSize);
     setStatus(`Brettgroesse auf ${boardSize} x ${boardSize} gesetzt.`, "#2563eb");
     drawBoard();
@@ -358,30 +487,284 @@ async function openSavePointsPanel() {
 }
 
 function applyLoadedGame(data) {
-    board = data.board;
+    discardSolverTrace(`${getPieceLabel(data.mode || "queens")}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+
+    board = Array.isArray(data.board) ? data.board.slice() : createEmptyBoard(DEFAULT_BOARD_SIZE);
     boardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
     pendingBoardSize = boardSize;
-    mode = data.mode;
+    mode = data.mode === "rooks" ? "rooks" : "queens";
+    currentSolverHighlight = null;
 
     updateModeButtons();
     updateBoardSizeDisplays(boardSize);
     drawBoard();
 }
 
-async function solve() {
-    const endpoint = mode === "rooks" ? "/solve_rooks" : "/solve";
-    const response = await fetch(`${endpoint}?size=${boardSize}`);
-    const solution = await response.json();
+function applySolverStep(step) {
+    board = Array.isArray(step.board) ? step.board.slice() : createEmptyBoard(boardSize);
 
-    // The queens endpoint may return multiple solutions; we display the first one.
-    board = mode === "queens" && Array.isArray(solution[0]) ? solution[0] : solution;
-    setStatus(`Loesung fuer ${boardSize} x ${boardSize} geladen.`, "green");
+    if (Number.isInteger(step.row) && Number.isInteger(step.col)) {
+        currentSolverHighlight = {
+            row: step.row,
+            col: step.col,
+            type: step.type
+        };
+    } else if (step.type === "solution" && solverStepIndex > 0) {
+        const previousStep = solverSteps[solverStepIndex - 1];
+        currentSolverHighlight = Number.isInteger(previousStep.row) && Number.isInteger(previousStep.col)
+            ? {
+                row: previousStep.row,
+                col: previousStep.col,
+                type: "solution"
+            }
+            : null;
+    } else {
+        currentSolverHighlight = null;
+    }
+
+    setSolverMessage(step.message || DEFAULT_SOLVER_MESSAGE);
     drawBoard();
+    updateSolverControls();
 }
 
-function resetBoard() {
+function advanceSolverStep() {
+    if (!hasPreparedSolverTrace() || hasCompletedSolverTrace()) {
+        stopSolverPlayback(false);
+        updateSolverControls();
+        return false;
+    }
+
+    solverStepIndex += 1;
+    applySolverStep(solverSteps[solverStepIndex]);
+
+    if (hasCompletedSolverTrace()) {
+        stopSolverPlayback(false);
+        setStatus(`Loesung fuer ${boardSize} x ${boardSize} Schritt fuer Schritt aufgebaut.`, "green");
+        updateSolverControls();
+    }
+
+    return true;
+}
+
+function scheduleNextSolverPlaybackStep() {
+    stopSolverPlayback(false);
+
+    solverTimerId = window.setTimeout(() => {
+        solverTimerId = null;
+
+        const advanced = advanceSolverStep();
+
+        if (advanced && !hasCompletedSolverTrace()) {
+            scheduleNextSolverPlaybackStep();
+            return;
+        }
+
+        updateSolverControls();
+    }, solverSpeedMs);
+
+    updateSolverControls();
+}
+
+function startSolverPlayback(stepImmediately = true) {
+    if (!hasPreparedSolverTrace() || hasCompletedSolverTrace()) {
+        updateSolverControls();
+        return;
+    }
+
+    if (stepImmediately) {
+        const advanced = advanceSolverStep();
+
+        if (!advanced || hasCompletedSolverTrace()) {
+            updateSolverControls();
+            return;
+        }
+    }
+
+    scheduleNextSolverPlaybackStep();
+}
+
+async function prepareSolutionTrace() {
+    const endpoint = mode === "rooks" ? "/solve_rooks_trace" : "/solve_trace";
+    const requestId = ++solverRequestId;
+
+    solverLoading = true;
+    stopSolverPlayback(false);
+    solverSteps = [];
+    solverStepIndex = -1;
+    currentSolverHighlight = null;
+    setSolverMessage(`Berechne ${getPieceLabel(mode)}-Ablauf fuer ${boardSize} x ${boardSize}...`);
+    setStatus(`Solver berechnet die Schritte fuer ${boardSize} x ${boardSize}.`, "#2563eb");
+    updateSolverControls();
+
+    try {
+        const response = await fetch(`${endpoint}?size=${boardSize}`);
+
+        if (!response.ok) {
+            throw new Error("trace request failed");
+        }
+
+        const trace = await response.json();
+
+        if (requestId !== solverRequestId) {
+            return false;
+        }
+
+        solverSteps = Array.isArray(trace.steps) ? trace.steps : [];
+        solverStepIndex = -1;
+        board = Array.isArray(trace.initial_board) ? trace.initial_board.slice() : createEmptyBoard(boardSize);
+        currentSolverHighlight = null;
+
+        if (!trace.solved || solverSteps.length === 0) {
+            setSolverMessage("Keine Loesung gefunden.");
+            setStatus("Keine Loesung fuer dieses Brett gefunden.", "red");
+            drawBoard();
+            return false;
+        }
+
+        setSolverMessage(
+            mode === "queens"
+                ? `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder Play Animation, um das Backtracking zu verfolgen.`
+                : `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder starte die Animation.`
+        );
+        setStatus("Solver-Ablauf bereit. Nutze Next Step oder Play Animation.", "#2563eb");
+        drawBoard();
+        return true;
+    } catch (error) {
+        if (requestId !== solverRequestId) {
+            return false;
+        }
+
+        setSolverMessage("Der Solver-Ablauf konnte nicht geladen werden.");
+        setStatus("Der Solver-Ablauf konnte nicht geladen werden.", "red");
+        return false;
+    } finally {
+        if (requestId === solverRequestId) {
+            solverLoading = false;
+            updateSolverControls();
+        }
+    }
+}
+
+async function nextSolverStep() {
+    if (solverLoading) {
+        return;
+    }
+
+    if (!hasPreparedSolverTrace()) {
+        const prepared = await prepareSolutionTrace();
+
+        if (!prepared) {
+            return;
+        }
+    }
+
+    if (isSolverPlaying()) {
+        stopSolverPlayback(false);
+    }
+
+    if (!advanceSolverStep()) {
+        setStatus("Der Solver-Ablauf ist bereits abgeschlossen.", "#2563eb");
+    }
+}
+
+async function toggleSolverPlayback() {
+    if (solverLoading) {
+        return;
+    }
+
+    if (isSolverPlaying()) {
+        stopSolverPlayback();
+        setStatus("Solver-Animation pausiert.", "#2563eb");
+        return;
+    }
+
+    if (!hasPreparedSolverTrace()) {
+        const prepared = await prepareSolutionTrace();
+
+        if (!prepared) {
+            return;
+        }
+    }
+
+    if (hasCompletedSolverTrace()) {
+        rewindSolverTrace();
+    }
+
+    setStatus("Solver-Animation laeuft.", "#2563eb");
+    startSolverPlayback(true);
+}
+
+async function solve() {
+    await prepareSolutionTrace();
+}
+
+async function instantSolve() {
+    if (solverLoading) {
+        return;
+    }
+
+    const endpoint = mode === "rooks" ? "/solve_rooks" : "/solve";
+    const requestId = ++solverRequestId;
+
+    solverLoading = true;
+    stopSolverPlayback(false);
+    solverSteps = [];
+    solverStepIndex = -1;
+    currentSolverHighlight = null;
+    setSolverMessage(`Lade sofortige ${getPieceLabel(mode)}-Loesung fuer ${boardSize} x ${boardSize}...`);
+    setStatus(`Sofortige Loesung wird geladen.`, "#2563eb");
+    updateSolverControls();
+
+    try {
+        const response = await fetch(`${endpoint}?size=${boardSize}`);
+
+        if (!response.ok) {
+            throw new Error("instant solve request failed");
+        }
+
+        const solution = await response.json();
+
+        if (requestId !== solverRequestId) {
+            return;
+        }
+
+        board = mode === "queens" && Array.isArray(solution[0]) ? solution[0].slice() : solution.slice();
+        currentSolverHighlight = null;
+        setSolverMessage("Sofortige Loesung geladen. Starte Solve Step-by-Step, wenn du den Ablauf sehen moechtest.");
+        setStatus(`Loesung fuer ${boardSize} x ${boardSize} sofort geladen.`, "green");
+        drawBoard();
+    } catch (error) {
+        if (requestId !== solverRequestId) {
+            return;
+        }
+
+        setSolverMessage("Die sofortige Loesung konnte nicht geladen werden.");
+        setStatus("Die sofortige Loesung konnte nicht geladen werden.", "red");
+    } finally {
+        if (requestId === solverRequestId) {
+            solverLoading = false;
+            updateSolverControls();
+        }
+    }
+}
+
+function resetBoard(options = {}) {
+    const {
+        statusMessageText = "",
+        statusColor = "",
+        solverMessageText = `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
+    } = options;
+
+    discardSolverTrace(solverMessageText);
     board = createEmptyBoard(boardSize);
-    setStatus();
+    currentSolverHighlight = null;
+
+    if (statusMessageText) {
+        setStatus(statusMessageText, statusColor);
+    } else {
+        setStatus();
+    }
+
     drawBoard();
 }
 
@@ -401,7 +784,7 @@ function updateQueenList() {
 
         li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${position}`;
         queenList.appendChild(li);
-        count++;
+        count += 1;
     }
 }
 
@@ -422,7 +805,7 @@ async function saveGame() {
     });
 
     if (!response.ok) {
-        setStatus("❌ Der Speicherstand konnte nicht gespeichert werden.", "red");
+        setStatus("Der Speicherstand konnte nicht gespeichert werden.", "red");
         return;
     }
 
@@ -443,7 +826,7 @@ async function loadSavePoint(savePointId) {
     const response = await fetch(`/load/${savePointId}`);
 
     if (!response.ok) {
-        setStatus("❌ Dieser Speicherstand konnte nicht geladen werden.", "red");
+        setStatus("Dieser Speicherstand konnte nicht geladen werden.", "red");
         return;
     }
 
@@ -460,7 +843,7 @@ async function toggleSavePointFavorite(savePointId) {
     });
 
     if (!response.ok) {
-        setStatus("❌ Favorit konnte nicht aktualisiert werden.", "red");
+        setStatus("Favorit konnte nicht aktualisiert werden.", "red");
         return;
     }
 
@@ -480,7 +863,7 @@ async function deleteSavePoint(savePointId) {
     });
 
     if (!response.ok) {
-        setStatus("❌ Speicherpunkt konnte nicht geloescht werden.", "red");
+        setStatus("Speicherpunkt konnte nicht geloescht werden.", "red");
         return;
     }
 
@@ -491,4 +874,7 @@ async function deleteSavePoint(savePointId) {
 pendingBoardSize = boardSize;
 updateModeButtons();
 updateBoardSizeDisplays(boardSize);
+updateSolverSpeed(solverSpeedMs);
+setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+updateSolverControls();
 drawBoard();
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 1c82d34..72fddbd 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -61,8 +61,31 @@
             <p id="statusMessage"></p>
             <div class="board" id="board"></div>
 
+            <div class="solver-panel">
+                <div class="solver-panel-header">
+                    <div>
+                        <h3>Solver-Ablauf</h3>
+                        <p class="solver-message" id="solverMessage">Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.</p>
+                    </div>
+                    <p class="solver-step-info" id="solverStepInfo">Schritt 0 / 0</p>
+                </div>
+
+                <div class="solver-controls">
+                    <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve" type="button">Solve Step-by-Step</button>
+                    <button class="btn secondary" onclick="instantSolve()" id="btnInstantSolve" type="button">Instant Solve</button>
+                    <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep" type="button">Next Step</button>
+                    <button class="btn secondary" onclick="toggleSolverPlayback()" id="btnPlayPause" type="button">Play Animation</button>
+                </div>
+
+                <div class="solver-speed">
+                    <label class="solver-speed-label" for="solverSpeedInput">Speed</label>
+                    <input id="solverSpeedInput" type="range" min="80" max="900" step="20" value="320"
+                        oninput="updateSolverSpeed(this.value)">
+                    <span class="solver-speed-value" id="solverSpeedValue">320 ms</span>
+                </div>
+            </div>
+
             <div class="controls">
-                <button class="btn" onclick="solve()">Solve</button>
                 <button class="btn" onclick="checkSolution()">Check</button>
                 <button class="btn secondary" onclick="resetBoard()">Reset</button>
 

From 59b48683a8a8ad9b4de9d36c3c99ac69df482c89 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Sat, 4 Apr 2026 23:15:36 +0200
Subject: [PATCH 09/15] added missing features, time counter, step counter,
 game instructions and table view for savepoints.

---
 app/__init__.py              |   1 +
 app/models/gamestate.py      |   4 +
 app/routes/main_routes.py    |  18 ++
 app/static/css/dashboard.css | 190 ++++++++++++++++++++-
 app/static/js/dashboard.js   | 318 +++++++++++++++++++++++++++++++++--
 app/templates/dashboard.html |  78 ++++++++-
 6 files changed, 589 insertions(+), 20 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index 21dc324..9abff38 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -7,6 +7,7 @@ from flask_sqlalchemy import SQLAlchemy
 db = SQLAlchemy()
 login_manager = LoginManager()
 
+
 def create_app():
     app = Flask(__name__)
 
diff --git a/app/models/gamestate.py b/app/models/gamestate.py
index 7aef035..ddb1ab2 100644
--- a/app/models/gamestate.py
+++ b/app/models/gamestate.py
@@ -1,5 +1,6 @@
 from .. import db
 
+
 class GameState(db.Model):
     __tablename__ = "game_state"
 
@@ -12,6 +13,9 @@ class GameState(db.Model):
     save_name = db.Column(db.String(80), nullable=False, default="Unnamed Save")
     save_note = db.Column(db.Text, nullable=False, default="")
     is_favorite = db.Column(db.Boolean, nullable=False, default=False)
+    step_count = db.Column(db.Integer, nullable=False, default=0, server_default=db.text("0"))
+    elapsed_seconds = db.Column(db.Integer, nullable=False, default=0, server_default=db.text("0"))
+    is_solved = db.Column(db.Boolean, nullable=False, default=False, server_default=db.text("0"))
     created_at = db.Column(db.DateTime, nullable=False, server_default=db.func.now())
     updated_at = db.Column(
         db.DateTime,
diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 15ea363..ad17578 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -28,6 +28,15 @@ def parse_favorite_flag(raw_value):
     return str(raw_value).lower() in {"1", "true", "yes", "on"}
 
 
+def parse_non_negative_int(raw_value, default=0):
+    try:
+        value = int(raw_value)
+    except (TypeError, ValueError):
+        return default
+
+    return max(0, value)
+
+
 def get_position_label(row, col, board_size):
     return f"{chr(65 + col)}{board_size - row}"
 
@@ -180,6 +189,9 @@ def serialize_game_state(game_state):
         "save_note": game_state.save_note,
         "is_favorite": game_state.is_favorite,
         "pieces_placed": sum(1 for column in board if column != -1),
+        "step_count": game_state.step_count,
+        "elapsed_seconds": game_state.elapsed_seconds,
+        "is_solved": game_state.is_solved,
         "created_at": game_state.created_at.strftime("%Y-%m-%d %H:%M:%S"),
         "updated_at": game_state.updated_at.strftime("%Y-%m-%d %H:%M:%S")
     }
@@ -282,6 +294,9 @@ def save_game():
     save_name = (data.get("saveName") or "").strip() or f"{piece_mode.title()} Save"
     save_note = (data.get("saveNote") or "").strip()
     is_favorite = bool(data.get("isFavorite"))
+    step_count = parse_non_negative_int(data.get("stepCount"))
+    elapsed_seconds = parse_non_negative_int(data.get("elapsedSeconds"))
+    is_solved = bool(data.get("isSolved"))
     timestamp = datetime.utcnow()
 
     game_state = GameState(
@@ -292,6 +307,9 @@ def save_game():
         save_name=save_name,
         save_note=save_note,
         is_favorite=is_favorite,
+        step_count=step_count,
+        elapsed_seconds=elapsed_seconds,
+        is_solved=is_solved,
         created_at=timestamp,
         updated_at=timestamp
     )
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index fe15596..b83c8e2 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -94,6 +94,68 @@ body {
     text-align: center;
 }
 
+.game-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.game-card-header h2 {
+    margin: 0;
+}
+
+.info-button {
+    width: 38px;
+    height: 38px;
+    border: none;
+    border-radius: 999px;
+    background: #dbeafe;
+    color: #1d4ed8;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.info-button:hover {
+    background: #bfdbfe;
+}
+
+.game-stats {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+    margin: 18px 0 12px;
+}
+
+.game-stat-card {
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f8fafc;
+    border: 1px solid #dbe4ee;
+    text-align: left;
+}
+
+.game-stat-label {
+    margin: 0 0 8px;
+    font-size: 14px;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.game-stat-value {
+    margin: 0;
+    font-size: 26px;
+    font-weight: bold;
+    color: #1e293b;
+    font-variant-numeric: tabular-nums;
+}
+
+.game-stat-status {
+    font-size: 20px;
+}
+
 #statusMessage {
     min-height: 24px;
     margin: 0 0 8px;
@@ -478,6 +540,55 @@ body {
     margin: 0;
 }
 
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 14px;
+}
+
+.history-header h3 {
+    margin: 0;
+}
+
+.history-subtitle {
+    margin: 6px 0 0;
+    color: #64748b;
+}
+
+.history-table-wrapper {
+    overflow-x: auto;
+}
+
+.history-table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 720px;
+}
+
+.history-table th,
+.history-table td {
+    padding: 12px 10px;
+    border-bottom: 1px solid #e2e8f0;
+    text-align: left;
+}
+
+.history-table th {
+    color: #334155;
+    font-size: 14px;
+}
+
+.history-table td {
+    color: #475569;
+    font-size: 14px;
+}
+
+.history-empty {
+    color: #64748b;
+    text-align: center !important;
+}
+
 .btn.ghost {
     background: #e2e8f0;
     color: #1e293b;
@@ -502,6 +613,73 @@ body {
     pointer-events: auto;
 }
 
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 40;
+}
+
+.modal-backdrop.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: min(620px, calc(100vw - 32px));
+    max-height: min(82vh, 720px);
+    padding: 24px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 18px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
+    transform: translate(-50%, -48%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    overflow-y: auto;
+    z-index: 50;
+}
+
+.modal.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(-50%, -50%);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.modal-header h3 {
+    margin: 0;
+}
+
+.modal-content {
+    margin-top: 16px;
+    color: #334155;
+    text-align: left;
+}
+
+.modal-content h4 {
+    margin: 16px 0 8px;
+    color: #1e293b;
+}
+
+.modal-content p {
+    margin: 0;
+    line-height: 1.6;
+}
+
 @keyframes solverPulse {
     0% {
         transform: scale(0.97);
@@ -536,8 +714,18 @@ body {
         display: grid;
     }
 
+    .game-stats {
+        grid-template-columns: 1fr;
+    }
+
+    .history-header,
+    .modal-header {
+        grid-template-columns: 1fr;
+        display: grid;
+    }
+
     .solver-step-info,
     .solver-speed-value {
         justify-self: start;
     }
-}
\ No newline at end of file
+}
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index ca8b30c..691af6e 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -3,11 +3,17 @@ const MIN_BOARD_SIZE = 4;
 const MAX_BOARD_SIZE = 13;
 const EMPTY_CELL = -1;
 const DEFAULT_SOLVER_MESSAGE = "Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.";
+const GAME_STORAGE_KEY = "eight-queens-dashboard-session-v1";
 
 let mode = "queens";
 let boardSize = DEFAULT_BOARD_SIZE;
 let pendingBoardSize = DEFAULT_BOARD_SIZE;
 let board = createEmptyBoard(boardSize);
+let stepCount = 0;
+let elapsedBeforeTimerStartMs = 0;
+let timerStartedAtMs = Date.now();
+let gameTimerId = null;
+let isSolved = false;
 
 let solverSteps = [];
 let solverStepIndex = -1;
@@ -20,6 +26,9 @@ let currentSolverHighlight = null;
 const boardDiv = document.getElementById("board");
 const statusMessage = document.getElementById("statusMessage");
 const queenList = document.getElementById("queenList");
+const stepCounterValue = document.getElementById("stepCounterValue");
+const timerValue = document.getElementById("timerValue");
+const gameProgressState = document.getElementById("gameProgressState");
 const btnQueens = document.getElementById("btnQueens");
 const btnRooks = document.getElementById("btnRooks");
 const btnPrepareSolve = document.getElementById("btnPrepareSolve");
@@ -49,6 +58,9 @@ const savePointModeFilter = document.getElementById("savePointModeFilter");
 const savePointSizeFilter = document.getElementById("savePointSizeFilter");
 const savePointSortFilter = document.getElementById("savePointSortFilter");
 const savePointFavoritesOnly = document.getElementById("savePointFavoritesOnly");
+const timeHistoryTableBody = document.getElementById("timeHistoryTableBody");
+const infoModal = document.getElementById("infoModal");
+const infoModalBackdrop = document.getElementById("infoModalBackdrop");
 
 function createEmptyBoard(size) {
     return Array(size).fill(EMPTY_CELL);
@@ -62,6 +74,116 @@ function getColumnLabel(index) {
     return String.fromCharCode(65 + index);
 }
 
+function sanitizeBoard(candidateBoard, size) {
+    if (!Array.isArray(candidateBoard) || candidateBoard.length !== size) {
+        return createEmptyBoard(size);
+    }
+
+    return candidateBoard.map((value) => {
+        const numericValue = Number(value);
+
+        if (!Number.isInteger(numericValue)) {
+            return EMPTY_CELL;
+        }
+
+        return numericValue >= 0 && numericValue < size ? numericValue : EMPTY_CELL;
+    });
+}
+
+function formatDuration(totalSeconds) {
+    const safeSeconds = Math.max(0, Number(totalSeconds) || 0);
+    const hours = Math.floor(safeSeconds / 3600);
+    const minutes = Math.floor((safeSeconds % 3600) / 60);
+    const seconds = safeSeconds % 60;
+
+    return [hours, minutes, seconds]
+        .map((value) => String(value).padStart(2, "0"))
+        .join(":");
+}
+
+function getElapsedMilliseconds() {
+    if (isSolved) {
+        return elapsedBeforeTimerStartMs;
+    }
+
+    return elapsedBeforeTimerStartMs + Math.max(0, Date.now() - timerStartedAtMs);
+}
+
+function persistCurrentSession() {
+    try {
+        window.localStorage.setItem(
+            GAME_STORAGE_KEY,
+            JSON.stringify({
+                mode,
+                boardSize,
+                board,
+                stepCount,
+                elapsedMs: getElapsedMilliseconds(),
+                isSolved
+            })
+        );
+    } catch (error) {
+        // Ignore unavailable storage so the game keeps working normally.
+    }
+}
+
+function updateProgressDisplay() {
+    stepCounterValue.textContent = String(stepCount);
+    timerValue.textContent = formatDuration(Math.floor(getElapsedMilliseconds() / 1000));
+    gameProgressState.textContent = isSolved ? "Geloest" : "Laeuft";
+    gameProgressState.style.color = isSolved ? "#15803d" : "#1d4ed8";
+}
+
+function stopGameTimer() {
+    if (gameTimerId !== null) {
+        window.clearInterval(gameTimerId);
+        gameTimerId = null;
+    }
+}
+
+function startGameTimer() {
+    stopGameTimer();
+
+    if (isSolved) {
+        updateProgressDisplay();
+        persistCurrentSession();
+        return;
+    }
+
+    timerStartedAtMs = Date.now();
+    gameTimerId = window.setInterval(() => {
+        updateProgressDisplay();
+        persistCurrentSession();
+    }, 1000);
+
+    updateProgressDisplay();
+    persistCurrentSession();
+}
+
+function resetProgress({ stepCountValue = 0, elapsedMs = 0, solved = false } = {}) {
+    stepCount = Math.max(0, Number(stepCountValue) || 0);
+    elapsedBeforeTimerStartMs = Math.max(0, Number(elapsedMs) || 0);
+    isSolved = Boolean(solved);
+    timerStartedAtMs = Date.now();
+
+    if (isSolved) {
+        stopGameTimer();
+        updateProgressDisplay();
+        persistCurrentSession();
+        return;
+    }
+
+    startGameTimer();
+}
+
+function ensureFreshRunAfterSolvedBoard() {
+    if (!isSolved) {
+        return;
+    }
+
+    resetProgress();
+}
+
 function updateModeButtons() {
     btnQueens.classList.toggle("active", mode === "queens");
     btnRooks.classList.toggle("active", mode === "rooks");
@@ -187,26 +309,27 @@ function closeAllPanels() {
     toggleSidebar(false);
     toggleSavePanel(false);
     toggleSavePointsPanel(false);
+    toggleInfoModal(false);
 }
 
-function getConflicts() {
+function getConflicts(selectedBoard = board, selectedMode = mode) {
     const conflicts = [];
 
     for (let rowA = 0; rowA < boardSize; rowA++) {
-        if (board[rowA] === EMPTY_CELL) {
+        if (selectedBoard[rowA] === EMPTY_CELL) {
             continue;
         }
 
         for (let rowB = rowA + 1; rowB < boardSize; rowB++) {
-            if (board[rowB] === EMPTY_CELL) {
+            if (selectedBoard[rowB] === EMPTY_CELL) {
                 continue;
             }
 
-            const colA = board[rowA];
-            const colB = board[rowB];
+            const colA = selectedBoard[rowA];
+            const colB = selectedBoard[rowB];
             const sameColumn = colA === colB;
             const sameDiagonal = Math.abs(colA - colB) === Math.abs(rowA - rowB);
-            const hasConflict = mode === "rooks" ? sameColumn : sameColumn || sameDiagonal;
+            const hasConflict = selectedMode === "rooks" ? sameColumn : sameColumn || sameDiagonal;
 
             if (hasConflict) {
                 conflicts.push([rowA, colA], [rowB, colB]);
@@ -217,6 +340,23 @@ function getConflicts() {
     return conflicts;
 }
 
+function isBoardSolved(selectedBoard = board, selectedMode = mode) {
+    const allPlaced = selectedBoard.every((col) => col !== EMPTY_CELL);
+    return allPlaced && getConflicts(selectedBoard, selectedMode).length === 0;
+}
+
+function finishSolvedRun() {
+    if (isSolved) {
+        return;
+    }
+
+    elapsedBeforeTimerStartMs = getElapsedMilliseconds();
+    isSolved = true;
+    stopGameTimer();
+    updateProgressDisplay();
+    persistCurrentSession();
+}
+
 function checkSolution() {
     const allPlaced = board.every((col) => col !== EMPTY_CELL);
 
@@ -230,7 +370,8 @@ function checkSolution() {
         return;
     }
 
-    setStatus("Perfekt geloest.", "green");
+    finishSolvedRun();
+    setStatus(`Perfekt geloest in ${formatDuration(Math.floor(getElapsedMilliseconds() / 1000))}.`, "green");
 }
 
 function drawBoard() {
@@ -289,6 +430,8 @@ function placeQueen(row, col) {
         return;
     }
 
+    ensureFreshRunAfterSolvedBoard();
+
     if (hasPreparedSolverTrace() || isSolverPlaying()) {
         discardSolverTrace("Solver-Ablauf verworfen, weil das Brett manuell geaendert wurde.");
         setStatus("Solver-Ablauf verworfen. Bereite ihn bei Bedarf neu vor.", "#d97706");
@@ -298,7 +441,16 @@ function placeQueen(row, col) {
 
     currentSolverHighlight = null;
     board[row] = board[row] === col ? EMPTY_CELL : col;
+    stepCount += 1;
     drawBoard();
+    updateProgressDisplay();
+
+    if (isBoardSolved()) {
+        finishSolvedRun();
+        setStatus(`Perfekt geloest in ${formatDuration(Math.floor(getElapsedMilliseconds() / 1000))}.`, "green");
+    } else {
+        persistCurrentSession();
+    }
 }
 
 function previewBoardSize(size) {
@@ -312,6 +464,7 @@ function applyBoardSize() {
     discardSolverTrace(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
     board = createEmptyBoard(boardSize);
     currentSolverHighlight = null;
+    resetProgress();
     updateBoardSizeDisplays(boardSize);
     setStatus(`Brettgroesse auf ${boardSize} x ${boardSize} gesetzt.`, "#2563eb");
     drawBoard();
@@ -357,6 +510,14 @@ function toggleSavePointsPanel(forceOpen) {
     savePointsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
 }
 
+function toggleInfoModal(forceOpen) {
+    const shouldOpen = typeof forceOpen === "boolean" ? forceOpen : !infoModal.classList.contains("open");
+
+    infoModal.classList.toggle("open", shouldOpen);
+    infoModalBackdrop.classList.toggle("visible", shouldOpen);
+    infoModal.setAttribute("aria-hidden", String(!shouldOpen));
+}
+
 function getPieceLabel(selectedMode) {
     return selectedMode === "queens" ? "Dame" : "Turm";
 }
@@ -423,6 +584,10 @@ function createSavePointActionButton(label, className, onClick) {
     return button;
 }
 
+function getModeLabel(selectedMode) {
+    return selectedMode === "rooks" ? "Tuerme" : "Damen";
+}
+
 function renderSavePoints(savePoints) {
     savePointsList.innerHTML = "";
 
@@ -455,6 +620,10 @@ function renderSavePoints(savePoints) {
         note.textContent = savePoint.save_note ? `Notiz: ${savePoint.save_note}` : "Notiz: Keine Notiz";
         actions.className = "save-point-actions";
 
+        const progressMeta = document.createElement("p");
+        progressMeta.className = "save-point-meta";
+        progressMeta.textContent = `Schritte: ${savePoint.step_count || 0} | Zeit: ${formatDuration(savePoint.elapsed_seconds)} | Status: ${savePoint.is_solved ? "Geloest" : "Offen"}`;
+
         actions.appendChild(createSavePointActionButton("Laden", "btn", () => loadSavePoint(savePoint.id)));
         actions.appendChild(createSavePointActionButton(
             savePoint.is_favorite ? "Favorit entfernen" : "Als Favorit",
@@ -467,6 +636,7 @@ function renderSavePoints(savePoints) {
         item.appendChild(createdAt);
         item.appendChild(updatedAt);
         item.appendChild(boardMeta);
+        item.appendChild(progressMeta);
         item.appendChild(preview);
         item.appendChild(note);
         item.appendChild(actions);
@@ -474,6 +644,36 @@ function renderSavePoints(savePoints) {
     }
 }
 
+function renderTimeHistory(savePoints) {
+    timeHistoryTableBody.innerHTML = "";
+
+    if (savePoints.length === 0) {
+        timeHistoryTableBody.innerHTML = '<tr><td colspan="7" class="history-empty">Noch keine gespeicherten Zeiten vorhanden.</td></tr>';
+        return;
+    }
+
+    for (const savePoint of savePoints) {
+        const row = document.createElement("tr");
+        const values = [
+            `${savePoint.is_favorite ? "★ " : ""}${savePoint.save_name}`,
+            getModeLabel(savePoint.mode),
+            `${savePoint.board_size} x ${savePoint.board_size}`,
+            String(savePoint.step_count || 0),
+            formatDuration(savePoint.elapsed_seconds),
+            savePoint.is_solved ? "Geloest" : "Offen",
+            savePoint.updated_at
+        ];
+
+        for (const value of values) {
+            const cell = document.createElement("td");
+            cell.textContent = value;
+            row.appendChild(cell);
+        }
+
+        timeHistoryTableBody.appendChild(row);
+    }
+}
+
 async function refreshSavePoints() {
     const queryString = getSavePointFilters();
     const response = await fetch(`/save_points${queryString ? `?${queryString}` : ""}`);
@@ -481,6 +681,17 @@ async function refreshSavePoints() {
     renderSavePoints(savePoints);
 }
 
+async function refreshTimeHistory() {
+    const response = await fetch("/save_points?sort=updated");
+
+    if (!response.ok) {
+        return;
+    }
+
+    const savePoints = await response.json();
+    renderTimeHistory(savePoints);
+}
+
 async function openSavePointsPanel() {
     await refreshSavePoints();
     toggleSavePointsPanel(true);
@@ -489,19 +700,28 @@ async function openSavePointsPanel() {
 function applyLoadedGame(data) {
     discardSolverTrace(`${getPieceLabel(data.mode || "queens")}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
 
-    board = Array.isArray(data.board) ? data.board.slice() : createEmptyBoard(DEFAULT_BOARD_SIZE);
-    boardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
+    const restoredBoardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
+
+    boardSize = restoredBoardSize;
     pendingBoardSize = boardSize;
     mode = data.mode === "rooks" ? "rooks" : "queens";
+    board = sanitizeBoard(data.board, boardSize);
     currentSolverHighlight = null;
+    resetProgress({
+        stepCountValue: data.step_count,
+        elapsedMs: Number(data.elapsed_seconds || 0) * 1000,
+        solved: data.is_solved || isBoardSolved(board, mode)
+    });
 
     updateModeButtons();
     updateBoardSizeDisplays(boardSize);
     drawBoard();
+    updateProgressDisplay();
+    persistCurrentSession();
 }
 
 function applySolverStep(step) {
-    board = Array.isArray(step.board) ? step.board.slice() : createEmptyBoard(boardSize);
+    board = sanitizeBoard(step.board, boardSize);
 
     if (Number.isInteger(step.row) && Number.isInteger(step.col)) {
         currentSolverHighlight = {
@@ -524,6 +744,7 @@ function applySolverStep(step) {
 
     setSolverMessage(step.message || DEFAULT_SOLVER_MESSAGE);
     drawBoard();
+    persistCurrentSession();
     updateSolverControls();
 }
 
@@ -538,6 +759,7 @@ function advanceSolverStep() {
     applySolverStep(solverSteps[solverStepIndex]);
 
     if (hasCompletedSolverTrace()) {
+        finishSolvedRun();
         stopSolverPlayback(false);
         setStatus(`Loesung fuer ${boardSize} x ${boardSize} Schritt fuer Schritt aufgebaut.`, "green");
         updateSolverControls();
@@ -618,6 +840,7 @@ async function prepareSolutionTrace() {
             setSolverMessage("Keine Loesung gefunden.");
             setStatus("Keine Loesung fuer dieses Brett gefunden.", "red");
             drawBoard();
+            persistCurrentSession();
             return false;
         }
 
@@ -730,9 +953,11 @@ async function instantSolve() {
 
         board = mode === "queens" && Array.isArray(solution[0]) ? solution[0].slice() : solution.slice();
         currentSolverHighlight = null;
+        finishSolvedRun();
         setSolverMessage("Sofortige Loesung geladen. Starte Solve Step-by-Step, wenn du den Ablauf sehen moechtest.");
         setStatus(`Loesung fuer ${boardSize} x ${boardSize} sofort geladen.`, "green");
         drawBoard();
+        persistCurrentSession();
     } catch (error) {
         if (requestId !== solverRequestId) {
             return;
@@ -758,6 +983,7 @@ function resetBoard(options = {}) {
     discardSolverTrace(solverMessageText);
     board = createEmptyBoard(boardSize);
     currentSolverHighlight = null;
+    resetProgress();
 
     if (statusMessageText) {
         setStatus(statusMessageText, statusColor);
@@ -800,7 +1026,10 @@ async function saveGame() {
             boardSize,
             saveName: saveNameInput.value,
             saveNote: saveNoteInput.value,
-            isFavorite: saveFavoriteInput.checked
+            isFavorite: saveFavoriteInput.checked,
+            stepCount,
+            elapsedSeconds: Math.floor(getElapsedMilliseconds() / 1000),
+            isSolved
         })
     });
 
@@ -813,6 +1042,7 @@ async function saveGame() {
 
     toggleSavePanel(false);
     await refreshSavePoints();
+    await refreshTimeHistory();
     setStatus(`Speicherpunkt "${data.save_point.save_name}" gespeichert.`, "green");
 }
 
@@ -848,6 +1078,7 @@ async function toggleSavePointFavorite(savePointId) {
     }
 
     await refreshSavePoints();
+    await refreshTimeHistory();
     setStatus("Favoritenstatus aktualisiert.", "#2563eb");
 }
 
@@ -868,13 +1099,64 @@ async function deleteSavePoint(savePointId) {
     }
 
     await refreshSavePoints();
+    await refreshTimeHistory();
     setStatus("Speicherpunkt geloescht.", "#2563eb");
 }
 
-pendingBoardSize = boardSize;
-updateModeButtons();
-updateBoardSizeDisplays(boardSize);
-updateSolverSpeed(solverSpeedMs);
-setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
-updateSolverControls();
-drawBoard();
+function restoreSessionFromStorage() {
+    try {
+        const rawSession = window.localStorage.getItem(GAME_STORAGE_KEY);
+
+        if (!rawSession) {
+            return false;
+        }
+
+        const savedSession = JSON.parse(rawSession);
+        const restoredBoardSize = clampBoardSize(savedSession.boardSize || DEFAULT_BOARD_SIZE);
+        const restoredMode = savedSession.mode === "rooks" ? "rooks" : "queens";
+
+        boardSize = restoredBoardSize;
+        pendingBoardSize = restoredBoardSize;
+        mode = restoredMode;
+        board = sanitizeBoard(savedSession.board, restoredBoardSize);
+        currentSolverHighlight = null;
+
+        updateModeButtons();
+        updateBoardSizeDisplays(boardSize);
+        drawBoard();
+        resetProgress({
+            stepCountValue: savedSession.stepCount,
+            elapsedMs: savedSession.elapsedMs,
+            solved: savedSession.isSolved || isBoardSolved(board, mode)
+        });
+
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
+async function initializeDashboard() {
+    pendingBoardSize = boardSize;
+    updateModeButtons();
+    updateBoardSizeDisplays(boardSize);
+    updateSolverSpeed(solverSpeedMs);
+    setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+    updateSolverControls();
+
+    if (!restoreSessionFromStorage()) {
+        resetProgress();
+        drawBoard();
+    }
+
+    updateProgressDisplay();
+    await refreshTimeHistory();
+}
+
+window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+        closeAllPanels();
+    }
+});
+
+initializeDashboard();
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 1c09088..93129e1 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -59,10 +59,29 @@
         </div>
 
         <div class="card game-card">
-            <h2>♟️ Damen- und Tuerme-Spiel</h2>
+            <div class="game-card-header">
+                <h2>♟️ Damen- und Tuerme-Spiel</h2>
+                <button class="info-button" id="infoButton" onclick="toggleInfoModal(true)" type="button"
+                    aria-label="Spielanleitung und Erklaerung anzeigen">i</button>
+            </div>
             <p class="board-size-info">Aktuelle Brettgroesse: <span id="boardSizeValue">8</span> x <span
                     id="boardSizeValueMirror">8</span></p>
 
+            <div class="game-stats" aria-label="Spielstatus">
+                <article class="game-stat-card">
+                    <p class="game-stat-label">Schritte</p>
+                    <p class="game-stat-value" id="stepCounterValue">0</p>
+                </article>
+                <article class="game-stat-card">
+                    <p class="game-stat-label">Zeit</p>
+                    <p class="game-stat-value" id="timerValue">00:00:00</p>
+                </article>
+                <article class="game-stat-card">
+                    <p class="game-stat-label">Status</p>
+                    <p class="game-stat-value game-stat-status" id="gameProgressState">Laeuft</p>
+                </article>
+            </div>
+
             <p id="statusMessage"></p>
             <div class="board" id="board"></div>
 
@@ -103,6 +122,37 @@
             <h3>📋 Figuren Positionen</h3>
             <ul id="queenList"></ul>
         </div>
+
+        <div class="card">
+            <div class="history-header">
+                <div>
+                    <h3>⏱️ Bisherige Zeiten</h3>
+                    <p class="history-subtitle">Die Tabelle zeigt gespeicherte Save-Points mit Zeit und Schritten.</p>
+                </div>
+                <button class="btn secondary" onclick="refreshTimeHistory()" type="button">Aktualisieren</button>
+            </div>
+
+            <div class="history-table-wrapper">
+                <table class="history-table">
+                    <thead>
+                        <tr>
+                            <th>Save-Point</th>
+                            <th>Modus</th>
+                            <th>Brett</th>
+                            <th>Schritte</th>
+                            <th>Zeit</th>
+                            <th>Status</th>
+                            <th>Gespeichert</th>
+                        </tr>
+                    </thead>
+                    <tbody id="timeHistoryTableBody">
+                        <tr>
+                            <td colspan="7" class="history-empty">Noch keine gespeicherten Zeiten vorhanden.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
 
     <aside class="sidebar" id="settingsSidebar" aria-hidden="true">
@@ -193,6 +243,32 @@
     <div class="sidebar-backdrop" id="saveBackdrop" onclick="toggleSavePanel(false)"></div>
     <div class="sidebar-backdrop" id="savePointsBackdrop" onclick="toggleSavePointsPanel(false)"></div>
 
+    <div class="modal-backdrop" id="infoModalBackdrop" onclick="toggleInfoModal(false)"></div>
+    <section class="modal" id="infoModal" aria-hidden="true" aria-labelledby="infoModalTitle">
+        <div class="modal-header">
+            <h3 id="infoModalTitle">Spielanleitung und Acht-Damen-Problem</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)" type="button">Schliessen</button>
+        </div>
+
+        <div class="modal-content">
+            <p>Setze pro Reihe genau eine Figur auf das Brett. Eine gueltige Loesung hat keine Konflikte.</p>
+
+            <h4>So funktioniert das Spiel</h4>
+            <p>Im Damen-Modus duerfen sich Damen weder in derselben Spalte noch diagonal angreifen. Im Tuerme-Modus
+                zaehlen nur Spalten-Konflikte. Mit einem Klick setzt oder entfernst du eine Figur.</p>
+
+            <h4>Was ist das Acht-Damen-Problem?</h4>
+            <p>Das klassische Acht-Damen-Problem fragt nach einer Anordnung von acht Damen auf einem 8x8-Brett, bei
+                der sich keine zwei Damen schlagen. Es ist ein bekanntes Beispiel fuer kombinatorische Suche und
+                Backtracking.</p>
+
+            <h4>Was zeigen Zeit und Schritte?</h4>
+            <p>Der Schrittzaehler erfasst deine Zuege auf dem Brett. Die Zeit laeuft fuer das aktuelle Spiel weiter,
+                auch wenn du die Seite neu laedst. Beim Speichern werden Zeit und Schritte zusammen mit dem Save-Point
+                abgelegt.</p>
+        </div>
+    </section>
+
     <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
 
 </body>

From 19a6bbd392e73a513040bfd1b4417f02f3c48ca4 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Sun, 5 Apr 2026 00:42:25 +0200
Subject: [PATCH 10/15] Made consistent design for landing page and login.
 Landing page has all the text and design.

Added language support for english and german (swappable)
---
 app/routes/main_routes.py            |   3 +-
 app/static/css/dashboard.css         | 422 ++++++++++++----------
 app/static/css/index.css             | 514 +++++++++++++++++++++++++++
 app/static/css/login.css             | 257 +++++++++-----
 app/static/js/index.js               | 238 +++++++++++++
 app/templates/index.html             | 225 +++++++++---
 app/templates/login.html             |   9 +-
 app/templates/login_settings.html    |   9 +-
 app/templates/sign_up.html           |   9 +-
 app/templates/two_factor_verify.html |   9 +-
 10 files changed, 1347 insertions(+), 348 deletions(-)
 create mode 100644 app/static/css/index.css
 create mode 100644 app/static/js/index.js

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index ad17578..fbb0f29 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -226,7 +226,8 @@ def build_save_point_query():
 
 @main_bp.route("/")
 def home():
-    return render_template("index.html")
+    initial_language = request.accept_languages.best_match(["de", "en"]) or "de"
+    return render_template("index.html", initial_language=initial_language)
 
 
 @main_bp.route("/dashboard")
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index b83c8e2..634fb38 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -1,10 +1,58 @@
+/* ==================== Base ==================== */
+
 body {
     margin: 0;
     font-family: Arial, sans-serif;
     background: #f5f7fa;
 }
 
-/* 🔝 Navbar */
+
+/* ==================== Layout And Cards ==================== */
+
+.container {
+    max-width: 900px;
+    margin: 30px auto;
+    padding: 10px;
+}
+
+.card {
+    background: white;
+    padding: 20px;
+    margin-bottom: 25px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.flash-stack {
+    display: grid;
+    gap: 12px;
+    margin-bottom: 18px;
+}
+
+.flash-message {
+    margin: 0;
+    padding: 12px 14px;
+    border-radius: 10px;
+}
+
+.flash-message.success {
+    color: #166534;
+    background: #dcfce7;
+}
+
+.flash-message.info {
+    color: #1d4ed8;
+    background: #dbeafe;
+}
+
+.flash-message.error {
+    color: #b91c1c;
+    background: #fee2e2;
+}
+
+
+/* ==================== Navigation ==================== */
+
 .navbar {
     display: flex;
     justify-content: space-between;
@@ -47,49 +95,103 @@ body {
     text-decoration: underline;
 }
 
-/* 📦 Layout */
-.container {
-    max-width: 900px;
-    margin: 30px auto;
-    padding: 10px;
+
+/* ==================== Shared Buttons ==================== */
+
+.btn {
+    padding: 10px 15px;
+    margin: 5px;
+    border: none;
+    border-radius: 8px;
+    background: #3b82f6;
+    color: white;
+    cursor: pointer;
 }
 
-/* 📇 Cards */
-.card {
-    background: white;
-    padding: 20px;
-    margin-bottom: 25px;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+.btn:hover {
+    background: #2563eb;
 }
 
-.flash-stack {
-    display: grid;
-    gap: 12px;
-    margin-bottom: 18px;
+.btn:disabled,
+.btn:disabled:hover {
+    background: #94a3b8;
+    cursor: not-allowed;
 }
 
-.flash-message {
+.btn.secondary {
+    background: #64748b;
+}
+
+.btn.secondary:hover {
+    background: #475569;
+}
+
+.btn.danger {
+    background: #ef4444;
+}
+
+.btn.danger:hover {
+    background: #dc2626;
+}
+
+.btn.active {
+    background: #22c55e;
+}
+
+.btn.ghost {
+    background: #e2e8f0;
+    color: #1e293b;
+}
+
+.btn.ghost:hover {
+    background: #cbd5e1;
+}
+
+
+/* ==================== User Card Details ==================== */
+
+.inline-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+}
+
+.inline-actions form {
     margin: 0;
-    padding: 12px 14px;
-    border-radius: 10px;
 }
 
-.flash-message.success {
-    color: #166534;
-    background: #dcfce7;
+.inline-actions .btn {
+    margin: 0;
 }
 
-.flash-message.info {
-    color: #1d4ed8;
-    background: #dbeafe;
+
+/* ==================== Mode Switch And Main Actions ==================== */
+
+.mode-switch {
+    margin-bottom: 15px;
 }
 
-.flash-message.error {
-    color: #b91c1c;
-    background: #fee2e2;
+.mode-switch .btn {
+    margin: 5px;
 }
 
+.controls {
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.solver-controls .btn,
+.controls .btn {
+    margin: 0;
+}
+
+
+/* ==================== Game Overview ==================== */
+
 .game-card {
     text-align: center;
 }
@@ -121,6 +223,11 @@ body {
     background: #bfdbfe;
 }
 
+.board-size-info {
+    margin: 0 0 10px;
+    color: #475569;
+}
+
 .game-stats {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -162,12 +269,14 @@ body {
     font-weight: bold;
 }
 
+
+/* ==================== Chessboard ==================== */
+
 .board {
     overflow-x: auto;
     padding-bottom: 8px;
 }
 
-/* ♟️ Board */
 .board-grid {
     --label-size: 30px;
     --cell-size: 60px;
@@ -209,21 +318,6 @@ body {
     transform: scale(1.05);
 }
 
-.cell.solver-place {
-    box-shadow: inset 0 0 0 4px #22c55e;
-    animation: solverPulse 0.35s ease;
-}
-
-.cell.solver-remove {
-    box-shadow: inset 0 0 0 4px #f59e0b;
-    animation: solverPulse 0.35s ease;
-}
-
-.cell.solver-solution {
-    box-shadow: inset 0 0 0 4px #2563eb;
-    animation: solverPulse 0.35s ease;
-}
-
 .white {
     background: #e2e8f0;
 }
@@ -237,74 +331,8 @@ body {
     background: #ef4444 !important;
 }
 
-/* 🎛️ Buttons */
-.controls {
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-}
 
-.btn {
-    padding: 10px 15px;
-    margin: 5px;
-    border: none;
-    border-radius: 8px;
-    background: #3b82f6;
-    color: white;
-    cursor: pointer;
-}
-
-.btn:hover {
-    background: #2563eb;
-}
-
-.btn:disabled,
-.btn:disabled:hover {
-    background: #94a3b8;
-    cursor: not-allowed;
-}
-
-.btn.secondary {
-    background: #64748b;
-}
-
-.btn.secondary:hover {
-    background: #475569;
-}
-
-.btn.danger {
-    background: #ef4444;
-}
-
-.btn.danger:hover {
-    background: #dc2626;
-}
-
-#queenList {
-    list-style: none;
-    padding: 0;
-}
-
-#queenList li {
-    padding: 5px;
-    background: #f1f5f9;
-    margin: 4px 0;
-    border-radius: 6px;
-}
-
-.mode-switch {
-    margin-bottom: 15px;
-}
-
-.mode-switch .btn {
-    margin: 5px;
-}
-
-.btn.active {
-    background: #22c55e;
-}
+/* ==================== Solver And Animation Details ==================== */
 
 .solver-panel {
     margin-top: 12px;
@@ -350,11 +378,6 @@ body {
     margin-top: 14px;
 }
 
-.solver-controls .btn,
-.controls .btn {
-    margin: 0;
-}
-
 .solver-speed {
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -379,11 +402,91 @@ body {
     font-variant-numeric: tabular-nums;
 }
 
-.board-size-info {
-    margin: 0 0 10px;
-    color: #475569;
+.cell.solver-place {
+    box-shadow: inset 0 0 0 4px #22c55e;
+    animation: solverPulse 0.35s ease;
 }
 
+.cell.solver-remove {
+    box-shadow: inset 0 0 0 4px #f59e0b;
+    animation: solverPulse 0.35s ease;
+}
+
+.cell.solver-solution {
+    box-shadow: inset 0 0 0 4px #2563eb;
+    animation: solverPulse 0.35s ease;
+}
+
+
+/* ==================== Figure Details ==================== */
+
+#queenList {
+    list-style: none;
+    padding: 0;
+}
+
+#queenList li {
+    padding: 5px;
+    background: #f1f5f9;
+    margin: 4px 0;
+    border-radius: 6px;
+}
+
+
+/* ==================== Save History And Tables ==================== */
+
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 14px;
+}
+
+.history-header h3 {
+    margin: 0;
+}
+
+.history-subtitle {
+    margin: 6px 0 0;
+    color: #64748b;
+}
+
+.history-table-wrapper {
+    overflow-x: auto;
+}
+
+.history-table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 720px;
+}
+
+.history-table th,
+.history-table td {
+    padding: 12px 10px;
+    border-bottom: 1px solid #e2e8f0;
+    text-align: left;
+}
+
+.history-table th {
+    color: #334155;
+    font-size: 14px;
+}
+
+.history-table td {
+    color: #475569;
+    font-size: 14px;
+}
+
+.history-empty {
+    color: #64748b;
+    text-align: center !important;
+}
+
+
+/* ==================== Sidebars And Save Points ==================== */
+
 .sidebar {
     position: fixed;
     top: 0;
@@ -525,78 +628,8 @@ body {
     margin: 0;
 }
 
-.inline-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-}
 
-.inline-actions form {
-    margin: 0;
-}
-
-.inline-actions .btn {
-    margin: 0;
-}
-
-.history-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 12px;
-    margin-bottom: 14px;
-}
-
-.history-header h3 {
-    margin: 0;
-}
-
-.history-subtitle {
-    margin: 6px 0 0;
-    color: #64748b;
-}
-
-.history-table-wrapper {
-    overflow-x: auto;
-}
-
-.history-table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 720px;
-}
-
-.history-table th,
-.history-table td {
-    padding: 12px 10px;
-    border-bottom: 1px solid #e2e8f0;
-    text-align: left;
-}
-
-.history-table th {
-    color: #334155;
-    font-size: 14px;
-}
-
-.history-table td {
-    color: #475569;
-    font-size: 14px;
-}
-
-.history-empty {
-    color: #64748b;
-    text-align: center !important;
-}
-
-.btn.ghost {
-    background: #e2e8f0;
-    color: #1e293b;
-}
-
-.btn.ghost:hover {
-    background: #cbd5e1;
-}
+/* ==================== Backdrops And Modal ==================== */
 
 .sidebar-backdrop {
     position: fixed;
@@ -680,6 +713,9 @@ body {
     line-height: 1.6;
 }
 
+
+/* ==================== Animations ==================== */
+
 @keyframes solverPulse {
     0% {
         transform: scale(0.97);
@@ -694,6 +730,9 @@ body {
     }
 }
 
+
+/* ==================== Responsive ==================== */
+
 @media (max-width: 720px) {
     .container {
         padding: 12px;
@@ -703,7 +742,6 @@ body {
         padding: 15px 18px;
     }
 
-
     .nav-logout-form {
         margin-left: 0;
     }
diff --git a/app/static/css/index.css b/app/static/css/index.css
new file mode 100644
index 0000000..1aaef0c
--- /dev/null
+++ b/app/static/css/index.css
@@ -0,0 +1,514 @@
+:root {
+    --bg: #f4efe7;
+    --bg-accent: #efe3cd;
+    --surface: rgba(255, 250, 242, 0.82);
+    --surface-strong: #fffaf2;
+    --text: #1e1f1d;
+    --muted: #5f615c;
+    --navy: #1f3140;
+    --navy-soft: #324d63;
+    --gold: #c68b2c;
+    --gold-soft: #e7bf77;
+    --line: rgba(31, 49, 64, 0.12);
+    --shadow: 0 24px 60px rgba(37, 42, 48, 0.14);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    color: var(--text);
+    font-family: Georgia, "Times New Roman", serif;
+    background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 24%),
+        radial-gradient(circle at 82% 18%, rgba(198, 139, 44, 0.2), transparent 20%),
+        linear-gradient(180deg, #f7f0e5 0%, #efe5d5 52%, #f4efe7 100%);
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+main {
+    width: min(1200px, calc(100vw - 32px));
+    margin: 0 auto;
+    padding: 34px 0 56px;
+}
+
+.landing-nav {
+    width: 100%;
+    margin: 0;
+    padding: 18px max(16px, calc((100vw - 1200px) / 2)) 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    border-top: 0;
+    border-right: 4px solid #12212d;
+    border-bottom: 4px solid #12212d;
+    border-left: 4px solid #12212d;
+    background:
+        linear-gradient(180deg, rgba(17, 29, 39, 0.96), rgba(31, 49, 64, 0.94));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 18px 40px rgba(31, 49, 64, 0.18);
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    color: #fff7eb;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.brand-mark {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2c2215;
+    font-size: 22px;
+}
+
+.landing-links {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px;
+    color: #ecf4fb;
+}
+
+.landing-links a:not(.nav-cta) {
+    padding: 12px 14px;
+    border: 2px solid transparent;
+    background: rgba(255, 255, 255, 0.04);
+    opacity: 0.92;
+}
+
+.landing-links a:not(.nav-cta):hover {
+    opacity: 1;
+    border-color: rgba(231, 191, 119, 0.45);
+}
+
+.lang-switch,
+.nav-cta,
+.hero-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 13px 20px;
+    font-weight: 700;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.lang-switch {
+    min-width: 68px;
+    border: 2px solid rgba(231, 191, 119, 0.45);
+    background: rgba(255, 255, 255, 0.06);
+    color: #fff7eb;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.nav-cta {
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2d2418;
+}
+
+.nav-cta.secondary {
+    background: rgba(255, 255, 255, 0.08);
+    color: #f8fafc;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+}
+
+.lang-switch:hover,
+.nav-cta:hover,
+.hero-button:hover {
+    transform: translateY(-2px);
+}
+
+.hero {
+    padding: 88px 0 56px;
+    display: grid;
+    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
+    gap: 42px;
+    align-items: center;
+}
+
+.eyebrow {
+    margin: 0 0 12px;
+    color: var(--navy-soft);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.hero h1,
+.info-band h2,
+.section-heading h2,
+.cta-panel h2 {
+    margin: 0;
+    line-height: 0.95;
+    letter-spacing: -0.03em;
+    font-size: clamp(2.8rem, 5vw, 5.5rem);
+    color: #182029;
+}
+
+.hero-text,
+.info-band p,
+.feature-card p,
+.journey-step p,
+.cta-panel p {
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-size: 18px;
+    line-height: 1.7;
+    color: var(--muted);
+}
+
+.hero-text {
+    max-width: 640px;
+    margin: 24px 0 0;
+}
+
+.hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin-top: 30px;
+}
+
+.hero-button.primary {
+    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
+    color: #f9fbfd;
+    box-shadow: 0 14px 30px rgba(31, 49, 64, 0.22);
+}
+
+.hero-button.secondary {
+    border: 1px solid rgba(31, 49, 64, 0.16);
+    background: rgba(255, 255, 255, 0.5);
+    color: var(--navy);
+}
+
+.hero-facts {
+    margin-top: 30px;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.hero-facts article {
+    padding: 18px;
+    border-radius: 10px;
+    background: rgba(255, 250, 242, 0.65);
+    border: 1px solid rgba(31, 49, 64, 0.08);
+    box-shadow: var(--shadow);
+}
+
+.hero-facts strong {
+    display: block;
+    font-size: 18px;
+    color: var(--navy);
+}
+
+.hero-facts span {
+    display: block;
+    margin-top: 6px;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    color: var(--muted);
+    line-height: 1.5;
+}
+
+.hero-visual {
+    position: relative;
+    min-height: 620px;
+    display: grid;
+    place-items: center;
+}
+
+.board-showcase {
+    width: min(100%, 520px);
+    aspect-ratio: 1;
+    padding: 18px;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 0;
+    border-radius: 14px;
+    background:
+        linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(247, 233, 210, 0.7)),
+        rgba(255, 255, 255, 0.5);
+    box-shadow: var(--shadow);
+    position: relative;
+    overflow: hidden;
+}
+
+.board-cell {
+    position: relative;
+    display: grid;
+    place-items: center;
+    font-size: clamp(20px, 2vw, 30px);
+    transition: transform 0.45s ease, opacity 0.45s ease, background 0.45s ease;
+}
+
+.board-cell.light {
+    background: #f7e6ca;
+}
+
+.board-cell.dark {
+    background: #92613a;
+}
+
+.board-cell.highlight {
+    background: #2f485f;
+}
+
+.board-cell.queen::after {
+    content: "♛";
+    color: #fff3df;
+    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+    transform: scale(1);
+    animation: queenPulse 1.8s ease-in-out infinite;
+}
+
+.floating-card {
+    position: absolute;
+    padding: 16px 18px;
+    border-radius: 8px;
+    background: rgba(255, 250, 242, 0.85);
+    border: 1px solid rgba(31, 49, 64, 0.08);
+    box-shadow: 0 18px 35px rgba(31, 49, 64, 0.14);
+    backdrop-filter: blur(10px);
+}
+
+.solver-card {
+    top: 26px;
+    right: -8px;
+}
+
+.timer-card {
+    left: -8px;
+    bottom: 34px;
+}
+
+.floating-label {
+    margin: 0;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+}
+
+.floating-value {
+    margin: 6px 0 0;
+    font-size: 22px;
+    color: var(--navy);
+}
+
+.info-band,
+.feature-section,
+.journey-section,
+.cta-section {
+    padding: 38px 0;
+}
+
+.info-band-inner,
+.cta-panel {
+    padding: 36px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(255, 250, 242, 0.88), rgba(245, 230, 205, 0.7));
+    border: 1px solid rgba(31, 49, 64, 0.08);
+    box-shadow: var(--shadow);
+}
+
+.info-band h2 {
+    font-size: clamp(2.2rem, 4vw, 4.2rem);
+    margin-bottom: 18px;
+}
+
+.section-heading {
+    max-width: 760px;
+    margin-bottom: 28px;
+}
+
+.section-heading h2 {
+    font-size: clamp(2.2rem, 3.8vw, 4rem);
+}
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.feature-card,
+.journey-step {
+    padding: 26px;
+    border-radius: 10px;
+    background: rgba(255, 250, 242, 0.72);
+    border: 1px solid rgba(31, 49, 64, 0.08);
+    box-shadow: var(--shadow);
+}
+
+.feature-icon {
+    display: inline-grid;
+    place-items: center;
+    width: 54px;
+    height: 54px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
+    color: #fff3df;
+    font-size: 28px;
+}
+
+.feature-card h3,
+.journey-step h3 {
+    margin: 18px 0 10px;
+    font-size: 28px;
+    color: #1c2833;
+}
+
+.journey-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.step-number {
+    display: inline-block;
+    margin-bottom: 18px;
+    color: var(--gold);
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+}
+
+.cta-panel {
+    text-align: center;
+}
+
+.cta-panel h2 {
+    font-size: clamp(2.2rem, 4vw, 4.4rem);
+}
+
+.cta-panel p {
+    max-width: 760px;
+    margin: 18px auto 0;
+}
+
+.cta-panel .hero-actions {
+    justify-content: center;
+}
+
+@keyframes queenPulse {
+    0%,
+    100% {
+        transform: scale(1) translateY(0);
+    }
+
+    50% {
+        transform: scale(1.08) translateY(-2px);
+    }
+}
+
+@media (max-width: 980px) {
+    .hero {
+        grid-template-columns: 1fr;
+        gap: 28px;
+        padding-top: 54px;
+    }
+
+    .hero-visual {
+        min-height: auto;
+    }
+
+    .journey-grid,
+    .feature-grid,
+    .hero-facts {
+        grid-template-columns: 1fr;
+    }
+
+    .solver-card,
+    .timer-card {
+        position: static;
+    }
+
+    .hero-visual {
+        gap: 16px;
+    }
+}
+
+@media (max-width: 760px) {
+    .landing-nav {
+        position: static;
+        width: 100%;
+        padding: 18px 16px;
+        border-left-width: 0;
+        border-right-width: 0;
+        gap: 14px;
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .brand {
+        width: 100%;
+        justify-content: space-between;
+        gap: 8px;
+        font-size: 16px;
+    }
+
+    .brand-mark {
+        display: none;
+    }
+
+    .landing-links {
+        justify-content: flex-start;
+        gap: 10px;
+        width: 100%;
+    }
+
+    .landing-links a:not(.nav-cta),
+    .lang-switch,
+    .nav-cta {
+        padding: 11px 14px;
+    }
+
+    main {
+        width: min(100%, calc(100vw - 24px));
+    }
+
+    .hero h1,
+    .info-band h2,
+    .section-heading h2,
+    .cta-panel h2 {
+        line-height: 1.02;
+    }
+
+    .info-band-inner,
+    .cta-panel,
+    .feature-card,
+    .journey-step {
+        padding: 24px;
+    }
+
+    .floating-card {
+        width: 100%;
+    }
+}
diff --git a/app/static/css/login.css b/app/static/css/login.css
index 21554a9..1431a37 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -1,17 +1,21 @@
 :root {
-    --nav-bg-color: #172033;
-    --panel-bg-color: rgba(255, 255, 255, 0.18);
-    --panel-border-color: rgba(255, 255, 255, 0.24);
-    --text-color: #172033;
-    --muted-text-color: #475569;
-    --success-color: #15803d;
+    --bg: #f4efe7;
+    --bg-accent: #efe3cd;
+    --surface: rgba(255, 250, 242, 0.88);
+    --surface-strong: #fffaf2;
+    --surface-soft: rgba(255, 247, 235, 0.72);
+    --text-color: #1e1f1d;
+    --muted-text-color: #5f615c;
+    --navy: #1f3140;
+    --navy-soft: #324d63;
+    --gold: #c68b2c;
+    --gold-soft: #e7bf77;
+    --gold-pale: #f1ddae;
+    --line: rgba(31, 49, 64, 0.12);
+    --shadow: 0 24px 60px rgba(37, 42, 48, 0.14);
+    --success-color: #166534;
     --info-color: #1d4ed8;
-    --error-color: #b91c1c;
-}
-
-@font-face {
-    font-family: "Geist Sans";
-    src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
+    --error-color: #991b1b;
 }
 
 *,
@@ -24,74 +28,103 @@ body {
     margin: 0;
     min-height: 100vh;
     color: var(--text-color);
-    font-family: "Geist Sans", system-ui, sans-serif;
+    font-family: Georgia, "Times New Roman", serif;
     background:
-        radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 32%),
-        linear-gradient(135deg, #d2ecff 0%, #b8c6db 48%, #7f8ea3 100%);
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 24%),
+        radial-gradient(circle at 82% 18%, rgba(198, 139, 44, 0.2), transparent 20%),
+        linear-gradient(180deg, #f7f0e5 0%, #efe5d5 52%, #f4efe7 100%);
 }
 
-nav {
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.auth-nav {
     width: 100%;
-    min-height: 68px;
-    padding: 15px 30px;
+    margin: 0;
+    padding: 18px max(16px, calc((100vw - 1200px) / 2)) 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
-    background: var(--nav-bg-color);
+    gap: 18px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    border-top: 0;
+    border-right: 4px solid #12212d;
+    border-bottom: 4px solid #12212d;
+    border-left: 4px solid #12212d;
+    background: linear-gradient(180deg, rgba(17, 29, 39, 0.96), rgba(31, 49, 64, 0.94));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 18px 40px rgba(31, 49, 64, 0.18);
 }
 
-nav ul {
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    color: #fff7eb;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.brand-mark {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2c2215;
+    font-size: 22px;
+}
+
+.nav-links {
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
-    gap: 20px;
+    gap: 12px;
+    color: #ecf4fb;
 }
 
-nav a {
-    color: white;
-    text-decoration: none;
-    font-size: 16px;
+.nav-links a,
+.nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 11px 16px;
+    border: 2px solid transparent;
+    background: rgba(255, 255, 255, 0.06);
+    color: inherit;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
 }
 
-nav a:hover {
-    color: #93c5fd;
+.nav-links a:hover,
+.nav-button:hover {
+    transform: translateY(-2px);
+    border-color: rgba(231, 191, 119, 0.45);
+    color: #fff7eb;
 }
 
 .nav-form {
     margin: 0;
-    padding: 0;
-    width: auto;
-    background: none;
-    border: 0;
-    box-shadow: none;
-    backdrop-filter: none;
-}
-
-.nav-button {
-    margin: 0;
-    padding: 0;
-    background: none;
-    border: 0;
-    color: white;
-    font: inherit;
-    cursor: pointer;
-}
-
-.nav-button:hover {
-    transform: none;
-    box-shadow: none;
-    color: #93c5fd;
 }
 
 .auth-shell {
-    min-height: calc(100vh - 68px);
+    min-height: calc(100vh - 78px);
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 32px 16px;
+    padding: 38px 16px 48px;
 }
 
 .settings-shell {
@@ -99,18 +132,17 @@ nav a:hover {
 }
 
 .auth-panel {
-    width: min(420px, 100%);
+    width: min(460px, 100%);
     padding: 34px;
-    border-radius: 20px;
-    background: var(--panel-bg-color);
-    border: 1px solid var(--panel-border-color);
-    backdrop-filter: blur(16px);
-    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(245, 230, 205, 0.8));
+    border: 1px solid var(--line);
+    box-shadow: var(--shadow);
     animation: fadeIn 0.8s ease;
 }
 
 .settings-panel {
-    width: min(900px, 100%);
+    width: min(980px, 100%);
 }
 
 .settings-grid {
@@ -134,12 +166,31 @@ nav a:hover {
 h1,
 h2 {
     margin-top: 0;
+    color: #182029;
+}
+
+h1 {
+    margin-bottom: 10px;
+    line-height: 0.98;
+    letter-spacing: -0.03em;
+    font-size: clamp(2.2rem, 4vw, 3.6rem);
+}
+
+h2 {
+    margin-bottom: 10px;
+    font-size: 1.55rem;
+}
+
+.muted,
+.field-hint {
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    line-height: 1.6;
+    color: var(--muted-text-color);
 }
 
 .muted {
     margin: 0 0 20px;
-    color: var(--muted-text-color);
-    line-height: 1.5;
+    font-size: 17px;
 }
 
 form {
@@ -148,65 +199,56 @@ form {
     gap: 8px;
     margin-top: 18px;
     padding: 24px;
-    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 10px;
+    background: var(--surface-soft);
+    border: 1px solid rgba(31, 49, 64, 0.1);
 }
 
 label {
     margin-top: 8px;
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 700;
+    color: var(--navy);
+    letter-spacing: 0.03em;
 }
 
 input {
     width: 100%;
     padding: 12px 14px;
-    border: 1px solid rgba(71, 85, 105, 0.25);
-    border-radius: 10px;
+    border: 1px solid rgba(31, 49, 64, 0.16);
+    border-radius: 0;
     font: inherit;
     background: rgba(255, 255, 255, 0.86);
     color: var(--text-color);
 }
 
 input:focus {
-    outline: 2px solid rgba(59, 130, 246, 0.35);
-    border-color: rgba(59, 130, 246, 0.5);
+    outline: 2px solid rgba(198, 139, 44, 0.28);
+    border-color: rgba(198, 139, 44, 0.55);
 }
 
 .field-hint {
     margin: 0;
     font-size: 13px;
-    color: var(--muted-text-color);
-}
-
-.checkbox-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 10px 0 6px;
-}
-
-.checkbox-row input {
-    width: auto;
 }
 
 button {
     margin-top: 14px;
-    padding: 12px 16px;
+    min-height: 50px;
+    padding: 12px 18px;
     border: none;
-    border-radius: 10px;
-    background: linear-gradient(135deg, #eff6ff, #dbeafe);
-    color: #172033;
+    border-radius: 0;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2d2418;
     cursor: pointer;
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 700;
     transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
 
 button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+    box-shadow: 0 12px 24px rgba(31, 49, 64, 0.16);
 }
 
 button:active {
@@ -220,18 +262,20 @@ button:active {
 }
 
 .button-row button {
-    flex: 1 1 160px;
+    flex: 1 1 180px;
 }
 
 .secondary-button {
-    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
+    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
+    color: #f9fbfd;
 }
 
 .message {
     margin: 0 0 14px;
     padding: 12px 14px;
-    border-radius: 10px;
+    border-radius: 8px;
     font-size: 14px;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
 }
 
 .message.error {
@@ -254,9 +298,9 @@ button:active {
     justify-content: center;
     margin: 8px 0 6px;
     padding: 18px;
-    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.38);
-    border: 1px solid rgba(255, 255, 255, 0.24);
+    border-radius: 10px;
+    background: rgba(255, 250, 242, 0.72);
+    border: 1px solid rgba(31, 49, 64, 0.12);
 }
 
 .qr-code {
@@ -266,7 +310,7 @@ button:active {
     min-width: 220px;
     min-height: 220px;
     padding: 10px;
-    border-radius: 14px;
+    border-radius: 8px;
     background: #ffffff;
     color: var(--muted-text-color);
     text-align: center;
@@ -276,15 +320,32 @@ button:active {
     display: block;
 }
 
-@media (max-width: 640px) {
-    nav {
-        padding: 16px 20px;
+@media (max-width: 760px) {
+    .auth-nav {
+        position: static;
+        padding: 18px 16px;
+        border-left-width: 0;
+        border-right-width: 0;
         flex-direction: column;
         align-items: flex-start;
     }
 
+    .brand {
+        width: 100%;
+        font-size: 16px;
+    }
+
+    .nav-links {
+        width: 100%;
+    }
+
+    .nav-links a,
+    .nav-button {
+        padding: 10px 14px;
+    }
+
     .auth-shell {
-        padding: 20px 12px 28px;
+        padding: 22px 12px 28px;
     }
 
     .auth-panel {
diff --git a/app/static/js/index.js b/app/static/js/index.js
new file mode 100644
index 0000000..be170c2
--- /dev/null
+++ b/app/static/js/index.js
@@ -0,0 +1,238 @@
+const HERO_BOARD_SIZE = 8;
+const heroBoard = document.getElementById("heroBoard");
+const langSwitch = document.getElementById("langSwitch");
+const supportedLanguages = ["de", "en"];
+const initialLanguage = window.LANDING_INITIAL_LANGUAGE || "de";
+
+const translations = {
+    de: {
+        "meta.title": "8-Damen- und 8-Türme Solver",
+        "nav.brand": "8-Damen- und 8-Türme Solver",
+        "nav.problem": "Problem",
+        "nav.features": "Features",
+        "nav.journey": "Ablauf",
+        "nav.login": "Login",
+        "nav.signup": "Create Account",
+        "hero.eyebrow": "Interaktives Lernen mit Strategie, Logik und Backtracking",
+        "hero.title": "Entdecke das Acht-Damen- und Acht-Türme-Problem.",
+        "hero.text": "Diese App macht aus einem klassischen Informatik- und Mathematikproblem ein interaktives Erlebnis: Setze Damen oder Türme, verfolge den Solver Schritt fuer Schritt, miss deine Zeit und speichere clevere Zwischenstände.",
+        "hero.primaryCta": "Jetzt starten",
+        "hero.secondaryCta": "Bereits Account? Login",
+        "hero.fact1Title": "Skalierbar",
+        "hero.fact1Text": "Brettgrösse flexibel anpassen",
+        "hero.fact2Title": "Schritt für Schritt",
+        "hero.fact2Text": "Solver mit Animation",
+        "hero.fact3Title": "Save-Points",
+        "hero.fact3Text": "Zeit und Fortschritt behalten",
+        "hero.solverLabel": "Solver",
+        "hero.solverValue": "Backtracking live",
+        "hero.challengeLabel": "Challenge",
+        "hero.challengeValue": "Zeit und Schritte messen",
+        "problem.eyebrow": "Warum dieses Problem spannend ist",
+        "problem.title": "Die Acht-Damen- und Acht-Türme-Probleme sind mehr als Schachrätsel.",
+        "problem.text": "Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich keine zwei Damen schlagen. Beim Acht-Tuerme-Problem gilt dieselbe Idee für Türme, nur mit einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und Backtracking funktionieren.<br><br>Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige moegliche Platzierungen, aber nur sehr wenige wirklich gültige Loesungen. Genau das macht diese App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.",
+        "features.eyebrow": "Was die Applikation bietet",
+        "features.title": "Von der Idee bis zur gelösten Stellung.",
+        "features.card1Title": "Interaktives Brett",
+        "features.card1Text": "Setze Damen oder Türme direkt auf dem Brett und prüfe, ob deine Anordnung konfliktfrei ist.",
+        "features.card2Title": "Solver mit Animation",
+        "features.card2Text": "Beobachte den Loesungsweg Schritt fuer Schritt und verstehe, wie Backtracking arbeitet.",
+        "features.card3Title": "Zeit und Schritte",
+        "features.card3Text": "Miss deinen Fortschritt während des Spiels und vergleiche unterschiedliche Versuche.",
+        "features.card4Title": "Save-Points",
+        "features.card4Text": "Speichere Zwischenstände mit Notizen, Zeiten und Schrittzahl fuer späteres Weiterarbeiten.",
+        "features.card5Title": "Skalierbare Bretter",
+        "features.card5Text": "Passe die Brettgrösse an und erkunde die Probleme nicht nur auf dem klassischen 8x8-Brett.",
+        "journey.eyebrow": "So funktioniert dein Einstieg",
+        "journey.title": "In wenigen Schritten vom ersten Besuch zur eigenen Lösung.",
+        "journey.step1Title": "Account erstellen",
+        "journey.step1Text": "Registriere dich und erhalte Zugang zu Dashboard, Save-Points und deinem Fortschritt.",
+        "journey.step2Title": "Spielmodus wählen",
+        "journey.step2Text": "Arbeite mit Damen oder Türmen und passe die Brettgrösse deinem Ziel an.",
+        "journey.step3Title": "Loesen oder analysieren",
+        "journey.step3Text": "Teste eigene Ideen oder lass dir die Lösung visuell vom Solver lösen lassen, dabei wird 1:1 gezeigt wie der Solver vorgeht.",
+        "cta.eyebrow": "Bereit für den ersten Versuch?",
+        "cta.title": "Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.",
+        "cta.text": "Starte mit einem Account, speichere deine Zwischenstände und finde heraus, wie schnell du eine konfliktfreie Lösung erreichst.",
+        "cta.primaryCta": "Create Account",
+        "cta.secondaryCta": "Login"
+    },
+    en: {
+        "meta.title": "8 Queens and 8 Rooks Solver",
+        "nav.brand": "8 Queens and 8 Rooks Solver",
+        "nav.problem": "Problem",
+        "nav.features": "Features",
+        "nav.journey": "Journey",
+        "nav.login": "Login",
+        "nav.signup": "Create Account",
+        "hero.eyebrow": "Interactive learning with strategy, logic, and backtracking",
+        "hero.title": "Discover the Eight Queens and Eight Rooks puzzle.",
+        "hero.text": "This app turns a classic computer science and mathematics problem into an interactive experience: place queens or rooks, follow the solver step by step, track your time, and save clever checkpoints.",
+        "hero.primaryCta": "Get Started",
+        "hero.secondaryCta": "Already have an account? Login",
+        "hero.fact1Title": "Scalable",
+        "hero.fact1Text": "Adjust the board size freely",
+        "hero.fact2Title": "Step by step",
+        "hero.fact2Text": "Animated solver walkthrough",
+        "hero.fact3Title": "Save points",
+        "hero.fact3Text": "Keep your time and progress",
+        "hero.solverLabel": "Solver",
+        "hero.solverValue": "Backtracking in motion",
+        "hero.challengeLabel": "Challenge",
+        "hero.challengeValue": "Measure time and steps",
+        "problem.eyebrow": "Why this puzzle matters",
+        "problem.title": "The Eight Queens and Eight Rooks problems are more than chess puzzles.",
+        "problem.text": "In the Eight Queens problem, you search for a way to place eight queens on a chessboard so that no two queens can attack each other. The Eight Rooks problem follows the same idea for rooks, but with simpler conflict rules. Both tasks show how pattern recognition, systematic search, and backtracking work.<br><br>The queens puzzle quickly makes it obvious why strategy matters: there are countless possible placements, but only a few truly valid solutions. That is what makes this app interesting, because you do not just see the result, you also see the path to it.",
+        "features.eyebrow": "What the application offers",
+        "features.title": "From the first idea to a solved position.",
+        "features.card1Title": "Interactive board",
+        "features.card1Text": "Place queens or rooks directly on the board and check whether your setup is conflict-free.",
+        "features.card2Title": "Animated solver",
+        "features.card2Text": "Watch the solving path step by step and understand how backtracking works.",
+        "features.card3Title": "Time and steps",
+        "features.card3Text": "Track your progress during play and compare different attempts.",
+        "features.card4Title": "Save points",
+        "features.card4Text": "Store checkpoints with notes, time, and step count so you can continue later.",
+        "features.card5Title": "Scalable boards",
+        "features.card5Text": "Adjust the board size and explore the puzzle beyond the classic 8x8 board.",
+        "journey.eyebrow": "How your first session works",
+        "journey.title": "Reach your own solution in just a few steps.",
+        "journey.step1Title": "Create an account",
+        "journey.step1Text": "Sign up and unlock the dashboard, save points, and your tracked progress.",
+        "journey.step2Title": "Choose a game mode",
+        "journey.step2Text": "Work with queens or rooks and tune the board size to your goal.",
+        "journey.step3Title": "Solve or analyze",
+        "journey.step3Text": "Test your own ideas or let the solver show the solution visually, with a 1:1 view of each solving step.",
+        "cta.eyebrow": "Ready for your first attempt?",
+        "cta.title": "Turn a famous puzzle into a visible learning experience.",
+        "cta.text": "Start with an account, save your checkpoints, and find out how quickly you can reach a conflict-free solution.",
+        "cta.primaryCta": "Create Account",
+        "cta.secondaryCta": "Login"
+    }
+};
+
+const queenPatterns = [
+    [0, 4, 7, 5, 2, 6, 1, 3],
+    [1, 3, 5, 7, 2, 0, 6, 4],
+    [2, 5, 7, 0, 3, 6, 4, 1]
+];
+
+let currentPatternIndex = 0;
+
+function normalizeLanguage(language) {
+    const shortLanguage = String(language || "").trim().slice(0, 2).toLowerCase();
+    return supportedLanguages.includes(shortLanguage) ? shortLanguage : "de";
+}
+
+function getStoredLanguage() {
+    try {
+        return window.localStorage.getItem("preferredLanguage");
+    } catch (error) {
+        return null;
+    }
+}
+
+function storeLanguage(language) {
+    try {
+        window.localStorage.setItem("preferredLanguage", language);
+    } catch (error) {
+        return;
+    }
+}
+
+function detectBrowserLanguage() {
+    const browserLanguage = navigator.language || navigator.userLanguage || initialLanguage;
+    return normalizeLanguage(browserLanguage);
+}
+
+function setLanguage(language) {
+    const resolvedLanguage = normalizeLanguage(language);
+    const dictionary = translations[resolvedLanguage];
+    const i18nElements = document.querySelectorAll("[data-i18n]");
+
+    document.documentElement.lang = resolvedLanguage;
+    document.body.dataset.language = resolvedLanguage;
+
+    i18nElements.forEach((element) => {
+        const key = element.dataset.i18n;
+        const translatedText = dictionary[key];
+
+        if (!translatedText) {
+            return;
+        }
+
+        if (element.tagName === "TITLE" || translatedText.includes("<br")) {
+            element.innerHTML = translatedText;
+            return;
+        }
+
+        element.textContent = translatedText;
+    });
+
+    if (langSwitch) {
+        langSwitch.textContent = resolvedLanguage.toUpperCase();
+        langSwitch.setAttribute("aria-label", resolvedLanguage === "de" ? "Switch language to English" : "Sprache auf Deutsch wechseln");
+        langSwitch.title = resolvedLanguage === "de" ? "Switch to English" : "Zu Deutsch wechseln";
+    }
+
+    storeLanguage(resolvedLanguage);
+}
+
+function getPreferredLanguage() {
+    return normalizeLanguage(getStoredLanguage() || detectBrowserLanguage() || initialLanguage);
+}
+
+function createHeroBoard() {
+    if (!heroBoard) {
+        return;
+    }
+
+    heroBoard.innerHTML = "";
+
+    for (let row = 0; row < HERO_BOARD_SIZE; row += 1) {
+        for (let col = 0; col < HERO_BOARD_SIZE; col += 1) {
+            const cell = document.createElement("div");
+            cell.className = `board-cell ${(row + col) % 2 === 0 ? "light" : "dark"}`;
+            cell.dataset.row = String(row);
+            cell.dataset.col = String(col);
+            heroBoard.appendChild(cell);
+        }
+    }
+}
+
+function applyPattern(pattern) {
+    if (!heroBoard) {
+        return;
+    }
+
+    const cells = heroBoard.querySelectorAll(".board-cell");
+
+    cells.forEach((cell) => {
+        const row = Number(cell.dataset.row);
+        const col = Number(cell.dataset.col);
+        const hasQueen = pattern[row] === col;
+
+        cell.classList.toggle("queen", hasQueen);
+        cell.classList.toggle("highlight", hasQueen);
+    });
+}
+
+function rotatePattern() {
+    currentPatternIndex = (currentPatternIndex + 1) % queenPatterns.length;
+    applyPattern(queenPatterns[currentPatternIndex]);
+}
+
+if (langSwitch) {
+    langSwitch.addEventListener("click", () => {
+        const nextLanguage = document.documentElement.lang === "de" ? "en" : "de";
+        setLanguage(nextLanguage);
+    });
+}
+
+createHeroBoard();
+applyPattern(queenPatterns[currentPatternIndex]);
+setLanguage(getPreferredLanguage());
+
+if (heroBoard) {
+    window.setInterval(rotatePattern, 2200);
+}
diff --git a/app/templates/index.html b/app/templates/index.html
index f364808..f90190e 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,66 +1,193 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ initial_language }}">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Solver App{% endblock %}</title>
-
-    <!-- CSS -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-
-    {% block head_extra %}{% endblock %}
+    <title data-i18n="meta.title">8-Damen- und 8-Tuerme Solver</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
 </head>
 
 <body>
+    <header class="landing-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span data-i18n="nav.brand">8-Damen- und 8-Tuerme Solver</span>
+        </a>
 
-    <!-- Navigation -->
-    <header class="navbar">
-        <div class="container">
-            <h1 class="logo">SolverApp</h1>
-
-            <nav>
-                <a href="/">Home</a>
-                <a href="/dashboard">Solver</a>
-
-                {% if session.get('user_id') %}
-                <a href="/dashboard">Dashboard</a>
-                <a href="/logout">Logout</a>
-                {% else %}
-                <a href="{{ url_for('login.login') }}">Login</a>
-                {% endif %}
-            </nav>
-        </div>
+        <nav class="landing-links">
+            <a href="#problem" data-i18n="nav.problem">Problem</a>
+            <a href="#features" data-i18n="nav.features">Features</a>
+            <a href="#journey" data-i18n="nav.journey">Ablauf</a>
+            <button class="lang-switch" id="langSwitch" type="button" aria-label="Sprache wechseln">DE</button>
+            <a class="nav-cta secondary" href="{{ url_for('login.login') }}" data-i18n="nav.login">Login</a>
+            <a class="nav-cta" href="{{ url_for('login.register') }}" data-i18n="nav.signup">Create Account</a>
+        </nav>
     </header>
 
-    <!-- Flash messages -->
-    <main class="container">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-        <div class="flash-container">
-            {% for category, message in messages %}
-            <div class="flash {{ category }}">
-                {{ message }}
-            </div>
-            {% endfor %}
-        </div>
-        {% endif %}
-        {% endwith %}
+    <main>
+        <section class="hero">
+            <div class="hero-copy">
+                <p class="eyebrow" data-i18n="hero.eyebrow">Interaktives Lernen mit Strategie, Logik und Backtracking
+                </p>
+                <h1 data-i18n="hero.title">Entdecke das Acht-Damen- und Acht-Türme-Problem.</h1>
+                <p class="hero-text" data-i18n="hero.text">
+                    Diese App macht aus einem klassischen Informatik- und Mathematikproblem ein interaktives Erlebnis:
+                    Setze Damen oder Türme, verfolge den Solver Schritt für Schritt, miss deine Zeit und speichere
+                    clevere Zwischenstände.
+                </p>
 
-        <!-- Page Content -->
-        {% block content %}{% endblock %}
+                <div class="hero-actions">
+                    <a class="hero-button primary" href="{{ url_for('login.register') }}"
+                        data-i18n="hero.primaryCta">Jetzt starten</a>
+                    <a class="hero-button secondary" href="{{ url_for('login.login') }}"
+                        data-i18n="hero.secondaryCta">Bereits Account? Login</a>
+                </div>
+
+                <div class="hero-facts">
+                    <article>
+                        <strong data-i18n="hero.fact1Title">Skalierbar</strong>
+                        <span data-i18n="hero.fact1Text">Brettgrösse flexibel anpassen</span>
+                    </article>
+                    <article>
+                        <strong data-i18n="hero.fact2Title">Schritt für Schritt</strong>
+                        <span data-i18n="hero.fact2Text">Solver mit Animation</span>
+                    </article>
+                    <article>
+                        <strong data-i18n="hero.fact3Title">Save-Points</strong>
+                        <span data-i18n="hero.fact3Text">Zeit und Fortschritt behalten</span>
+                    </article>
+                </div>
+            </div>
+
+            <div class="hero-visual">
+                <div class="board-showcase" id="heroBoard" aria-hidden="true"></div>
+                <div class="floating-card solver-card">
+                    <p class="floating-label" data-i18n="hero.solverLabel">Solver</p>
+                    <p class="floating-value" data-i18n="hero.solverValue">Backtracking live</p>
+                </div>
+                <div class="floating-card timer-card">
+                    <p class="floating-label" data-i18n="hero.challengeLabel">Challenge</p>
+                    <p class="floating-value" data-i18n="hero.challengeValue">Zeit und Schritte messen</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="info-band" id="problem">
+            <div class="info-band-inner">
+                <p class="eyebrow" data-i18n="problem.eyebrow">Warum dieses Problem spannend ist</p>
+                <h2 data-i18n="problem.title">Die Acht-Damen- und Acht-Tuerme-Probleme sind mehr als Schachrätsel.</h2>
+                <p data-i18n="problem.text">
+                    Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich
+                    keine zwei Damen schlagen. Beim Acht-Türme-Problem gilt dieselbe Idee für Türme, nur mit
+                    einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und
+                    Backtracking funktionieren.
+                    <br><br>
+                    Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige
+                    mögliche Platzierungen, aber nur sehr wenige wirklich gültige Lösungen. Genau das macht diese
+                    App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.
+                </p>
+            </div>
+        </section>
+
+        <section class="feature-section" id="features">
+            <div class="section-heading">
+                <p class="eyebrow" data-i18n="features.eyebrow">Was die Applikation bietet</p>
+                <h2 data-i18n="features.title">Von der Idee bis zur gelösten Stellung.</h2>
+            </div>
+
+            <div class="feature-grid">
+                <article class="feature-card">
+                    <span class="feature-icon">♟</span>
+                    <h3 data-i18n="features.card1Title">Interaktives Brett</h3>
+                    <p data-i18n="features.card1Text">Setze Damen oder Tuerme direkt auf dem Brett und prüfe, ob deine
+                        Anordnung konfliktfrei ist.</p>
+                </article>
+
+                <article class="feature-card">
+                    <span class="feature-icon">⚙</span>
+                    <h3 data-i18n="features.card2Title">Solver mit Animation</h3>
+                    <p data-i18n="features.card2Text">Beobachte den Lösungsweg Schritt für Schritt und verstehe, wie
+                        Backtracking arbeitet.</p>
+                </article>
+
+                <article class="feature-card">
+                    <span class="feature-icon">⏱</span>
+                    <h3 data-i18n="features.card3Title">Zeit und Schritte</h3>
+                    <p data-i18n="features.card3Text">Miss deinen Fortschritt während des Spiels und vergleiche
+                        unterschiedliche Versuche.</p>
+                </article>
+
+                <article class="feature-card">
+                    <span class="feature-icon">💾</span>
+                    <h3 data-i18n="features.card4Title">Save-Points</h3>
+                    <p data-i18n="features.card4Text">Speichere Zwischenstaende mit Notizen, Zeiten und Schrittzahl für
+                        späteres Weiterarbeiten.</p>
+                </article>
+
+                <article class="feature-card">
+                    <span class="feature-icon">▦</span>
+                    <h3 data-i18n="features.card5Title">Skalierbare Bretter</h3>
+                    <p data-i18n="features.card5Text">Passe die Brettgrösse an und erkunde die Probleme nicht nur auf
+                        dem klassischen 8x8-Brett.</p>
+                </article>
+            </div>
+        </section>
+
+        <section class="journey-section" id="journey">
+            <div class="section-heading">
+                <p class="eyebrow" data-i18n="journey.eyebrow">So funktioniert dein Einstieg</p>
+                <h2 data-i18n="journey.title">In wenigen Schritten vom ersten Besuch zur eigenen Lösung.</h2>
+            </div>
+
+            <div class="journey-grid">
+                <article class="journey-step">
+                    <span class="step-number">01</span>
+                    <h3 data-i18n="journey.step1Title">Account erstellen</h3>
+                    <p data-i18n="journey.step1Text">Registriere dich und erhalte Zugang zu Dashboard, Save-Points und
+                        deinem Fortschritt.</p>
+                </article>
+
+                <article class="journey-step">
+                    <span class="step-number">02</span>
+                    <h3 data-i18n="journey.step2Title">Spielmodus wählen</h3>
+                    <p data-i18n="journey.step2Text">Arbeite mit Damen oder Türmen und passe die Brettgrösse deinem Ziel
+                        an.</p>
+                </article>
+
+                <article class="journey-step">
+                    <span class="step-number">03</span>
+                    <h3 data-i18n="journey.step3Title">Lösen oder analysieren</h3>
+                    <p data-i18n="journey.step3Text">Teste eigene Ideen oder lass dir die Lösung visuell vom Solver
+                        lösen lassen, dabei wird 1:1
+                        gezeigt wie der Solver vorgeht.</p>
+                </article>
+            </div>
+        </section>
+
+        <section class="cta-section">
+            <div class="cta-panel">
+                <p class="eyebrow" data-i18n="cta.eyebrow">Bereit für den ersten Versuch?</p>
+                <h2 data-i18n="cta.title">Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.</h2>
+                <p data-i18n="cta.text">
+                    Starte mit einem Account, speichere deine Zwischenstände und finde heraus, wie schnell du eine
+                    konfliktfreie Lösung erreichst.
+                </p>
+
+                <div class="hero-actions">
+                    <a class="hero-button primary" href="{{ url_for('login.register') }}"
+                        data-i18n="cta.primaryCta">Create Account</a>
+                    <a class="hero-button secondary" href="{{ url_for('login.login') }}"
+                        data-i18n="cta.secondaryCta">Login</a>
+                </div>
+            </div>
+        </section>
     </main>
 
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="container">
-            <p>© {{ 2026 }} SolverApp</p>
-        </div>
-    </footer>
-
-    <!-- JS -->
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-    {% block scripts %}{% endblock %}
+    <script>
+        window.LANDING_INITIAL_LANGUAGE = "{{ initial_language }}";
+    </script>
+    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/templates/login.html b/app/templates/login.html
index 3afe9fa..47d4de4 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -9,8 +9,13 @@
 </head>
 
 <body>
-    <nav>
-        <ul>
+    <nav class="auth-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span>8-Damen- und 8-Tuerme Solver</span>
+        </a>
+
+        <ul class="nav-links">
             <li><a href="{{ url_for('login.login') }}">Login</a></li>
             <li><a href="{{ url_for('login.register') }}">Create account</a></li>
         </ul>
diff --git a/app/templates/login_settings.html b/app/templates/login_settings.html
index b4faf67..fe85391 100644
--- a/app/templates/login_settings.html
+++ b/app/templates/login_settings.html
@@ -10,8 +10,13 @@
 </head>
 
 <body>
-    <nav>
-        <ul>
+    <nav class="auth-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span>8-Damen- und 8-Tuerme Solver</span>
+        </a>
+
+        <ul class="nav-links">
             <li><a href="{{ url_for('main.dashboard') }}">Dashboard</a></li>
             <li><a href="{{ url_for('login.login_settings') }}">Login settings</a></li>
         </ul>
diff --git a/app/templates/sign_up.html b/app/templates/sign_up.html
index e12576f..50c7cb4 100644
--- a/app/templates/sign_up.html
+++ b/app/templates/sign_up.html
@@ -9,8 +9,13 @@
 </head>
 
 <body>
-    <nav>
-        <ul>
+    <nav class="auth-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span>8-Damen- und 8-Tuerme Solver</span>
+        </a>
+
+        <ul class="nav-links">
             <li><a href="{{ url_for('login.login') }}">Login</a></li>
             <li><a href="{{ url_for('login.register') }}">Create account</a></li>
         </ul>
diff --git a/app/templates/two_factor_verify.html b/app/templates/two_factor_verify.html
index e5af10b..e8ad1de 100644
--- a/app/templates/two_factor_verify.html
+++ b/app/templates/two_factor_verify.html
@@ -9,8 +9,13 @@
 </head>
 
 <body>
-    <nav>
-        <ul>
+    <nav class="auth-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span>8-Damen- und 8-Tuerme Solver</span>
+        </a>
+
+        <ul class="nav-links">
             <li><a href="{{ url_for('login.login') }}">Login</a></li>
             <li><a href="{{ url_for('login.register') }}">Create account</a></li>
         </ul>

From aa569e6cff7b50f5ca9da58f76f8076dd8cf2c51 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Sun, 5 Apr 2026 02:18:31 +0200
Subject: [PATCH 11/15] made dashboard style consistent to landingpage and
 login, also added translation for english and german

---
 app/static/css/dashboard.css | 991 +++++++++++++++++++++++------------
 app/static/css/login.css     |   2 +-
 app/static/js/dashboard.js   | 744 ++++++++++++++++++++++----
 app/templates/dashboard.html | 287 ++++++----
 database_setup.sql           |   3 +
 5 files changed, 1490 insertions(+), 537 deletions(-)

diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index 634fb38..a1a6404 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -1,26 +1,224 @@
-/* ==================== Base ==================== */
+:root {
+    --bg: #f4efe7;
+    --bg-accent: #efe3cd;
+    --surface: rgba(255, 250, 242, 0.88);
+    --surface-strong: #fffaf2;
+    --surface-soft: rgba(255, 247, 235, 0.76);
+    --text: #1e1f1d;
+    --muted: #5f615c;
+    --navy: #1f3140;
+    --navy-soft: #324d63;
+    --gold: #c68b2c;
+    --gold-soft: #e7bf77;
+    --gold-pale: #f1ddae;
+    --line: rgba(31, 49, 64, 0.12);
+    --shadow: 0 24px 60px rgba(37, 42, 48, 0.14);
+    --success-color: #166534;
+    --info-color: #1d4ed8;
+    --error-color: #991b1b;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
 
 body {
     margin: 0;
-    font-family: Arial, sans-serif;
-    background: #f5f7fa;
+    min-height: 100vh;
+    color: var(--text);
+    font-family: Georgia, "Times New Roman", serif;
+    background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 24%),
+        radial-gradient(circle at 82% 18%, rgba(198, 139, 44, 0.2), transparent 20%),
+        linear-gradient(180deg, #f7f0e5 0%, #efe5d5 52%, #f4efe7 100%);
 }
 
+a {
+    color: inherit;
+    text-decoration: none;
+}
 
-/* ==================== Layout And Cards ==================== */
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+.dashboard-nav {
+    width: 100%;
+    margin: 0;
+    padding: 18px max(16px, calc((100vw - 1200px) / 2)) 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    border-top: 0;
+    border-right: 4px solid #12212d;
+    border-bottom: 4px solid #12212d;
+    border-left: 4px solid #12212d;
+    background: linear-gradient(180deg, rgba(17, 29, 39, 0.96), rgba(31, 49, 64, 0.94));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 18px 40px rgba(31, 49, 64, 0.18);
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    color: #fff7eb;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.brand-mark {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2c2215;
+    font-size: 22px;
+}
+
+.nav-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.nav-link,
+.nav-link-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 11px 16px;
+    border: 2px solid transparent;
+    background: rgba(255, 255, 255, 0.06);
+    color: #ecf4fb;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.lang-switch {
+    min-width: 68px;
+}
+
+.nav-link:hover,
+.nav-link-button:hover {
+    transform: translateY(-2px);
+    border-color: rgba(231, 191, 119, 0.45);
+}
+
+.nav-logout-form {
+    margin: 0;
+}
+
+.account-shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 46px;
+    padding: 8px 12px 8px 8px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 2px solid rgba(231, 191, 119, 0.26);
+    color: #fff7eb;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.account-shortcut:hover {
+    transform: translateY(-2px);
+    border-color: rgba(231, 191, 119, 0.48);
+}
+
+.account-avatar {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 999px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2d2418;
+    font-weight: 700;
+}
+
+.account-copy {
+    display: grid;
+    gap: 2px;
+}
+
+.account-label {
+    font-size: 12px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.account-name {
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-size: 14px;
+}
+
+.settings-trigger {
+    position: fixed;
+    left: 0;
+    top: 180px;
+    z-index: 18;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 16px;
+    border: 0;
+    border-left: 0;
+    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
+    color: #fff7eb;
+    box-shadow: 0 16px 34px rgba(31, 49, 64, 0.18);
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.settings-trigger:hover {
+    transform: translateX(4px);
+}
+
+.settings-trigger-arrow {
+    font-size: 20px;
+    line-height: 1;
+}
+
+.settings-trigger-label {
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
 
 .container {
-    max-width: 900px;
-    margin: 30px auto;
-    padding: 10px;
+    width: min(1200px, calc(100vw - 32px));
+    margin: 0 auto;
+    padding: 34px 0 56px;
 }
 
 .card {
-    background: white;
-    padding: 20px;
-    margin-bottom: 25px;
+    padding: 28px;
+    margin-bottom: 24px;
     border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(245, 230, 205, 0.8));
+    border: 1px solid var(--line);
+    box-shadow: var(--shadow);
 }
 
 .flash-stack {
@@ -32,245 +230,257 @@ body {
 .flash-message {
     margin: 0;
     padding: 12px 14px;
-    border-radius: 10px;
+    border-radius: 8px;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
 }
 
 .flash-message.success {
-    color: #166534;
-    background: #dcfce7;
+    color: var(--success-color);
+    background: rgba(220, 252, 231, 0.92);
 }
 
 .flash-message.info {
-    color: #1d4ed8;
-    background: #dbeafe;
+    color: var(--info-color);
+    background: rgba(219, 234, 254, 0.92);
 }
 
 .flash-message.error {
-    color: #b91c1c;
-    background: #fee2e2;
+    color: var(--error-color);
+    background: rgba(254, 226, 226, 0.92);
 }
 
-
-/* ==================== Navigation ==================== */
-
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #1e293b;
-    color: white;
-    padding: 15px 30px;
+.section-kicker {
+    margin: 0 0 12px;
+    color: var(--navy-soft);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 13px;
+    font-weight: 700;
 }
 
-.navbar a {
-    color: white;
-    margin-left: 15px;
-    text-decoration: none;
+.dashboard-intro {
+    text-align: center;
 }
 
-.navbar a:hover {
-    text-decoration: underline;
+.dashboard-intro h1 {
+    margin: 0;
+    line-height: 0.96;
+    letter-spacing: -0.03em;
+    font-size: clamp(2.4rem, 4.4vw, 4.8rem);
+    color: #182029;
 }
 
-.nav-right {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+.dashboard-intro-text,
+.board-mode-text,
+.solver-message,
+.solver-group-text,
+.history-subtitle,
+.board-size-info,
+.sidebar p,
+.sidebar-hint,
+.modal-content p,
+.save-point-meta,
+.save-point-preview,
+.save-point-note {
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    line-height: 1.65;
+    color: var(--muted);
 }
 
-.nav-logout-form {
-    margin: 0 0 0 15px;
+.dashboard-intro-text {
+    max-width: 760px;
+    margin: 18px auto 0;
+    font-size: 18px;
 }
 
-.nav-link-button {
-    padding: 0;
-    border: none;
-    background: none;
-    color: white;
-    font: inherit;
-    cursor: pointer;
-}
-
-.nav-link-button:hover {
-    text-decoration: underline;
-}
-
-
-/* ==================== Shared Buttons ==================== */
-
 .btn {
-    padding: 10px 15px;
-    margin: 5px;
+    min-height: 50px;
+    padding: 12px 18px;
     border: none;
-    border-radius: 8px;
-    background: #3b82f6;
-    color: white;
+    border-radius: 0;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2d2418;
+    font-weight: 700;
     cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
 
 .btn:hover {
-    background: #2563eb;
+    transform: translateY(-2px);
+    box-shadow: 0 12px 24px rgba(31, 49, 64, 0.16);
+}
+
+.btn:active {
+    transform: scale(0.98);
 }
 
 .btn:disabled,
 .btn:disabled:hover {
-    background: #94a3b8;
+    transform: none;
+    opacity: 0.55;
+    box-shadow: none;
     cursor: not-allowed;
 }
 
 .btn.secondary {
-    background: #64748b;
-}
-
-.btn.secondary:hover {
-    background: #475569;
-}
-
-.btn.danger {
-    background: #ef4444;
-}
-
-.btn.danger:hover {
-    background: #dc2626;
-}
-
-.btn.active {
-    background: #22c55e;
+    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
+    color: #f9fbfd;
 }
 
+.btn.danger,
 .btn.ghost {
-    background: #e2e8f0;
-    color: #1e293b;
+    background: rgba(255, 255, 255, 0.68);
+    color: var(--navy);
+    border: 1px solid rgba(31, 49, 64, 0.16);
 }
 
-.btn.ghost:hover {
-    background: #cbd5e1;
+.btn.active,
+.btn.accent {
+    background: linear-gradient(135deg, var(--gold), #f0c35b);
+    color: #241b0d;
 }
 
-
-/* ==================== User Card Details ==================== */
-
-.inline-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-}
-
-.inline-actions form {
-    margin: 0;
-}
-
-.inline-actions .btn {
-    margin: 0;
-}
-
-
-/* ==================== Mode Switch And Main Actions ==================== */
-
 .mode-switch {
-    margin-bottom: 15px;
-}
-
-.mode-switch .btn {
-    margin: 5px;
-}
-
-.controls {
-    margin-top: 15px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 16px;
+    margin-top: 28px;
 }
 
-.solver-controls .btn,
-.controls .btn {
-    margin: 0;
+.mode-switch .btn {
+    min-width: 220px;
+    min-height: 68px;
+    padding: 18px 28px;
+    font-size: 1.15rem;
 }
 
-
-/* ==================== Game Overview ==================== */
-
 .game-card {
     text-align: center;
 }
 
 .game-card-header {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+    text-align: left;
 }
 
-.game-card-header h2 {
+.game-card-copy {
+    max-width: 760px;
+}
+
+.game-card h2,
+.card h3,
+.solver-panel h3,
+.sidebar h3,
+.modal-header h3 {
     margin: 0;
+    color: #182029;
+}
+
+.game-card h2 {
+    line-height: 0.98;
+    letter-spacing: -0.03em;
+    font-size: clamp(2rem, 3.2vw, 3.2rem);
+}
+
+.board-mode-text {
+    margin: 16px 0 0;
+    font-size: 18px;
 }
 
 .info-button {
-    width: 38px;
-    height: 38px;
-    border: none;
-    border-radius: 999px;
-    background: #dbeafe;
-    color: #1d4ed8;
-    font-size: 20px;
-    font-weight: bold;
+    min-height: 48px;
+    padding: 12px 18px;
+    border: 1px solid rgba(31, 49, 64, 0.14);
+    background: rgba(255, 255, 255, 0.66);
+    color: var(--navy);
+    font-weight: 700;
     cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .info-button:hover {
-    background: #bfdbfe;
+    transform: translateY(-2px);
+    box-shadow: 0 12px 24px rgba(31, 49, 64, 0.12);
 }
 
 .board-size-info {
-    margin: 0 0 10px;
-    color: #475569;
+    margin: 18px 0 10px;
+    font-size: 16px;
 }
 
 .game-stats {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-    margin: 18px 0 12px;
+    gap: 14px;
+    margin: 18px 0 14px;
+    text-align: left;
 }
 
 .game-stat-card {
-    padding: 14px 16px;
-    border-radius: 12px;
-    background: #f8fafc;
-    border: 1px solid #dbe4ee;
-    text-align: left;
+    padding: 16px 18px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.56);
+    border: 1px solid rgba(31, 49, 64, 0.08);
 }
 
 .game-stat-label {
     margin: 0 0 8px;
-    font-size: 14px;
-    color: #64748b;
+    font-size: 13px;
+    color: var(--navy-soft);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.12em;
+    font-weight: 700;
 }
 
 .game-stat-value {
     margin: 0;
-    font-size: 26px;
-    font-weight: bold;
+    font-size: 28px;
+    font-weight: 700;
     color: #1e293b;
     font-variant-numeric: tabular-nums;
 }
 
 .game-stat-status {
-    font-size: 20px;
+    font-size: 22px;
 }
 
 #statusMessage {
     min-height: 24px;
-    margin: 0 0 8px;
-    font-weight: bold;
+    margin: 0 0 10px;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-weight: 700;
 }
 
+.solved-celebration {
+    margin: 0 auto 18px;
+    padding: 18px 20px;
+    max-width: 760px;
+    border: 1px solid rgba(198, 139, 44, 0.28);
+    background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 35%),
+        linear-gradient(135deg, rgba(240, 195, 91, 0.96), rgba(231, 191, 119, 0.9));
+    color: #2d2418;
+    box-shadow: 0 18px 40px rgba(198, 139, 44, 0.18);
+    animation: solvedPop 0.55s ease;
+}
 
-/* ==================== Chessboard ==================== */
+.solved-celebration-title {
+    margin: 0;
+    font-size: clamp(1.8rem, 3vw, 2.6rem);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+}
+
+.solved-celebration-text {
+    margin: 8px 0 0;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-size: 16px;
+    line-height: 1.55;
+}
 
 .board {
     overflow-x: auto;
@@ -278,14 +488,15 @@ body {
 }
 
 .board-grid {
-    --label-size: 30px;
+    --label-size: var(--cell-size);
     --cell-size: 60px;
     display: grid;
     grid-template-columns: var(--label-size) repeat(var(--board-size, 8), var(--cell-size));
     grid-template-rows: var(--label-size) repeat(var(--board-size, 8), var(--cell-size));
     margin: 20px auto;
     width: max-content;
-    border: 6px solid #1e293b;
+    background: var(--navy);
+    border: 6px solid var(--navy);
     border-radius: 10px;
     overflow: hidden;
     max-width: 100%;
@@ -295,12 +506,13 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-weight: bold;
-    background: #aec8eb;
-    color: #1e293b;
+    font-weight: 700;
+    background: var(--navy);
+    color: #fff7eb;
     width: var(--label-size);
     height: var(--label-size);
-    font-size: 14px;
+    font-size: clamp(13px, 1.4vw, 18px);
+    text-align: center;
 }
 
 .cell {
@@ -311,7 +523,7 @@ body {
     justify-content: center;
     font-size: calc(var(--cell-size) * 0.5);
     cursor: pointer;
-    transition: 0.2s;
+    transition: transform 0.2s ease, background 0.2s ease;
 }
 
 .cell:hover {
@@ -319,27 +531,24 @@ body {
 }
 
 .white {
-    background: #e2e8f0;
+    background: #f7e6ca;
 }
 
 .black {
-    background: #475569;
-    color: white;
+    background: #92613a;
+    color: #fff5ea;
 }
 
 .invalid {
-    background: #ef4444 !important;
+    background: #d65555 !important;
 }
 
-
-/* ==================== Solver And Animation Details ==================== */
-
 .solver-panel {
-    margin-top: 12px;
-    padding: 16px;
+    margin-top: 18px;
+    padding: 18px;
     border-radius: 12px;
-    border: 1px solid #dbe4ee;
-    background: #f8fafc;
+    border: 1px solid rgba(31, 49, 64, 0.1);
+    background: rgba(255, 250, 242, 0.74);
     text-align: left;
 }
 
@@ -351,31 +560,61 @@ body {
 }
 
 .solver-panel h3 {
-    margin: 0 0 6px;
-    color: #1e293b;
+    margin-bottom: 8px;
 }
 
 .solver-message {
     margin: 0;
-    color: #475569;
 }
 
 .solver-step-info {
     margin: 0;
-    padding: 6px 10px;
-    border-radius: 999px;
-    background: #dbeafe;
-    color: #1d4ed8;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.74);
+    border: 1px solid rgba(31, 49, 64, 0.12);
+    color: var(--navy);
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 700;
     white-space: nowrap;
 }
 
+.solver-groups {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
+    gap: 16px;
+    margin-top: 18px;
+}
+
+.solver-group {
+    padding: 18px;
+    border: 1px solid rgba(31, 49, 64, 0.1);
+    background: rgba(255, 255, 255, 0.58);
+}
+
+.solver-group h4 {
+    margin: 0 0 8px;
+    color: #182029;
+    font-size: 1.15rem;
+}
+
+.solver-group-text {
+    margin: 0;
+    font-size: 15px;
+}
+
 .solver-controls {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 10px;
-    margin-top: 14px;
+    margin-top: 16px;
+}
+
+.instant-solver-actions {
+    margin-top: 16px;
+}
+
+.instant-solver-actions .btn {
+    width: 100%;
 }
 
 .solver-speed {
@@ -383,7 +622,7 @@ body {
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 16px;
 }
 
 .solver-speed input[type="range"] {
@@ -391,69 +630,91 @@ body {
 }
 
 .solver-speed-label {
-    font-weight: bold;
-    color: #334155;
+    font-weight: 700;
+    color: var(--navy);
 }
 
 .solver-speed-value {
     min-width: 62px;
     text-align: right;
-    color: #475569;
+    color: var(--muted);
     font-variant-numeric: tabular-nums;
 }
 
-.cell.solver-place {
-    box-shadow: inset 0 0 0 4px #22c55e;
-    animation: solverPulse 0.35s ease;
+.controls {
+    margin-top: 18px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
-.cell.solver-remove {
-    box-shadow: inset 0 0 0 4px #f59e0b;
-    animation: solverPulse 0.35s ease;
+.controls-save-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    width: min(420px, 100%);
 }
 
-.cell.solver-solution {
-    box-shadow: inset 0 0 0 4px #2563eb;
-    animation: solverPulse 0.35s ease;
+.settings-sidebar-actions {
+    margin-top: 18px;
+    display: grid;
+    gap: 10px;
 }
 
-
-/* ==================== Figure Details ==================== */
-
-#queenList {
-    list-style: none;
-    padding: 0;
-}
-
-#queenList li {
-    padding: 5px;
-    background: #f1f5f9;
-    margin: 4px 0;
-    border-radius: 6px;
-}
-
-
-/* ==================== Save History And Tables ==================== */
-
-.history-header {
+.section-header,
+.history-header,
+.sidebar-header,
+.modal-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 12px;
-    margin-bottom: 14px;
+}
+
+.section-badge {
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.66);
+    border: 1px solid rgba(31, 49, 64, 0.1);
+    color: var(--navy);
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+#queenList {
+    list-style: none;
+    padding: 0;
+    margin: 18px 0 0;
+    display: grid;
+    gap: 10px;
+}
+
+#queenList li {
+    padding: 12px 14px;
+    background: rgba(255, 255, 255, 0.56);
+    border: 1px solid rgba(31, 49, 64, 0.08);
+    border-radius: 8px;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    color: var(--navy);
+}
+
+#queenList li.empty {
+    color: var(--muted);
 }
 
 .history-header h3 {
-    margin: 0;
+    margin-top: 4px;
 }
 
 .history-subtitle {
-    margin: 6px 0 0;
-    color: #64748b;
+    margin: 8px 0 0;
+    font-size: 15px;
 }
 
 .history-table-wrapper {
     overflow-x: auto;
+    margin-top: 18px;
 }
 
 .history-table {
@@ -465,37 +726,35 @@ body {
 .history-table th,
 .history-table td {
     padding: 12px 10px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid rgba(31, 49, 64, 0.08);
     text-align: left;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
 }
 
 .history-table th {
-    color: #334155;
+    color: var(--navy);
     font-size: 14px;
 }
 
 .history-table td {
-    color: #475569;
+    color: var(--muted);
     font-size: 14px;
 }
 
 .history-empty {
-    color: #64748b;
+    color: var(--muted);
     text-align: center !important;
 }
 
-
-/* ==================== Sidebars And Save Points ==================== */
-
 .sidebar {
     position: fixed;
     top: 0;
     right: 0;
-    width: min(320px, 85vw);
+    width: min(360px, 92vw);
     height: 100vh;
     padding: 24px;
-    box-sizing: border-box;
-    background: white;
+    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(245, 230, 205, 0.96));
+    border-left: 1px solid rgba(31, 49, 64, 0.12);
     box-shadow: -10px 0 24px rgba(15, 23, 42, 0.18);
     transform: translateX(100%);
     transition: transform 0.25s ease;
@@ -509,44 +768,45 @@ body {
     transform: translateX(0);
 }
 
+.settings-sidebar {
+    left: 0;
+    right: auto;
+    border-left: 0;
+    border-right: 1px solid rgba(31, 49, 64, 0.12);
+    box-shadow: 10px 0 24px rgba(15, 23, 42, 0.18);
+    transform: translateX(-100%);
+}
+
+.settings-sidebar.open {
+    transform: translateX(0);
+}
+
 .save-points-sidebar {
-    width: min(380px, 92vw);
-}
-
-.save-sidebar {
-    width: min(360px, 90vw);
-}
-
-.sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-}
-
-.sidebar-close {
-    margin: 0;
+    width: min(400px, 94vw);
 }
 
 .sidebar-label {
     display: block;
     margin-top: 18px;
     margin-bottom: 8px;
-    font-weight: bold;
+    font-weight: 700;
+    color: var(--navy);
 }
 
 .sidebar input[type="range"] {
     width: 100%;
 }
 
-.sidebar-input {
+.sidebar-input,
+.sidebar select,
+.sidebar textarea,
+.sidebar input[type="text"] {
     width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #cbd5e1;
-    border-radius: 8px;
-    font: inherit;
-    box-sizing: border-box;
-    background: #fff;
+    padding: 12px 14px;
+    border: 1px solid rgba(31, 49, 64, 0.16);
+    border-radius: 0;
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--text);
 }
 
 .sidebar-textarea {
@@ -559,7 +819,8 @@ body {
     align-items: center;
     gap: 10px;
     margin: 16px 0 18px;
-    color: #334155;
+    color: var(--navy);
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
 }
 
 .sidebar-size-row {
@@ -567,11 +828,6 @@ body {
     font-size: 18px;
 }
 
-.sidebar-hint {
-    color: #64748b;
-    font-size: 14px;
-}
-
 .save-points-list {
     display: grid;
     gap: 12px;
@@ -583,14 +839,13 @@ body {
     gap: 8px;
     margin-top: 18px;
     padding-bottom: 16px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid rgba(31, 49, 64, 0.08);
 }
 
 .save-point-card {
-    border: 1px solid #dbe4ee;
-    border-radius: 10px;
+    border: 1px solid rgba(31, 49, 64, 0.1);
     padding: 14px;
-    background: #f8fafc;
+    background: rgba(255, 255, 255, 0.56);
 }
 
 .save-point-card h4 {
@@ -598,22 +853,10 @@ body {
     color: #1e293b;
 }
 
-.save-point-meta {
-    margin: 4px 0;
-    color: #475569;
-    font-size: 14px;
-}
-
-.save-point-preview {
-    margin: 10px 0 0;
-    color: #334155;
-    font-size: 14px;
-    word-break: break-word;
-}
-
+.save-point-meta,
+.save-point-preview,
 .save-point-note {
-    margin: 10px 0 0;
-    color: #475569;
+    margin: 6px 0 0;
     font-size: 14px;
 }
 
@@ -624,13 +867,6 @@ body {
     margin-top: 14px;
 }
 
-.save-point-actions .btn {
-    margin: 0;
-}
-
-
-/* ==================== Backdrops And Modal ==================== */
-
 .sidebar-backdrop {
     position: fixed;
     inset: 0;
@@ -665,12 +901,12 @@ body {
     position: fixed;
     top: 50%;
     left: 50%;
-    width: min(620px, calc(100vw - 32px));
+    width: min(680px, calc(100vw - 32px));
     max-height: min(82vh, 720px);
     padding: 24px;
-    box-sizing: border-box;
-    background: white;
-    border-radius: 18px;
+    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(245, 230, 205, 0.96));
+    border-radius: 12px;
+    border: 1px solid rgba(31, 49, 64, 0.12);
     box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
     transform: translate(-50%, -48%);
     opacity: 0;
@@ -686,35 +922,30 @@ body {
     transform: translate(-50%, -50%);
 }
 
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.modal-header h3 {
-    margin: 0;
-}
-
 .modal-content {
     margin-top: 16px;
-    color: #334155;
     text-align: left;
 }
 
 .modal-content h4 {
-    margin: 16px 0 8px;
-    color: #1e293b;
+    margin: 18px 0 8px;
+    color: var(--navy);
 }
 
-.modal-content p {
-    margin: 0;
-    line-height: 1.6;
+.cell.solver-place {
+    box-shadow: inset 0 0 0 4px #2f8f53;
+    animation: solverPulse 0.35s ease;
 }
 
+.cell.solver-remove {
+    box-shadow: inset 0 0 0 4px #d08a24;
+    animation: solverPulse 0.35s ease;
+}
 
-/* ==================== Animations ==================== */
+.cell.solver-solution {
+    box-shadow: inset 0 0 0 4px #2563eb;
+    animation: solverPulse 0.35s ease;
+}
 
 @keyframes solverPulse {
     0% {
@@ -730,40 +961,128 @@ body {
     }
 }
 
-
-/* ==================== Responsive ==================== */
-
-@media (max-width: 720px) {
-    .container {
-        padding: 12px;
+@keyframes solvedPop {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.96);
     }
 
-    .navbar {
-        padding: 15px 18px;
+    60% {
+        opacity: 1;
+        transform: translateY(2px) scale(1.02);
     }
 
-    .nav-logout-form {
-        margin-left: 0;
-    }
-
-    .solver-panel-header,
-    .solver-speed {
-        grid-template-columns: 1fr;
-        display: grid;
-    }
-
-    .game-stats {
-        grid-template-columns: 1fr;
-    }
-
-    .history-header,
-    .modal-header {
-        grid-template-columns: 1fr;
-        display: grid;
-    }
-
-    .solver-step-info,
-    .solver-speed-value {
-        justify-self: start;
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@media (max-width: 980px) {
+    .solver-groups {
+        grid-template-columns: 1fr;
+    }
+
+    .solver-controls {
+        grid-template-columns: 1fr;
+    }
+
+    .game-card-header,
+    .history-header,
+    .section-header {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 760px) {
+    .dashboard-nav {
+        position: static;
+        padding: 18px 16px;
+        border-left-width: 0;
+        border-right-width: 0;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .brand {
+        width: 100%;
+        font-size: 16px;
+    }
+
+    .nav-actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
+    .account-name {
+        display: none;
+    }
+
+    .settings-trigger {
+        top: auto;
+        bottom: 16px;
+        left: 12px;
+        max-width: calc(100vw - 24px);
+    }
+
+    .container {
+        width: 100%;
+        padding-top: 22px;
+    }
+
+    .card {
+        padding: 22px 18px;
+    }
+
+    .game-card {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    .board {
+        margin-left: -4px;
+        margin-right: -4px;
+        padding-bottom: 4px;
+    }
+
+    .board-grid {
+        margin: 12px auto;
+        border-width: 4px;
+        border-radius: 8px;
+    }
+
+    .label {
+        font-size: 12px;
+    }
+
+    .game-stats,
+    .solver-speed {
+        grid-template-columns: 1fr;
+    }
+
+    .mode-switch .btn {
+        min-width: min(100%, 280px);
+    }
+
+    .controls {
+        justify-content: stretch;
+    }
+
+    .controls>.btn,
+    .save-point-actions .btn {
+        width: 100%;
+    }
+
+    .controls-save-row {
+        width: 100%;
+    }
+
+    .sidebar {
+        width: min(100%, calc(100vw - 24px));
+    }
+
+    .modal {
+        width: min(100%, calc(100vw - 24px));
+        padding: 20px;
     }
 }
diff --git a/app/static/css/login.css b/app/static/css/login.css
index 1431a37..d4a1008 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -355,4 +355,4 @@ button:active {
     form {
         padding: 18px;
     }
-}
+}
\ No newline at end of file
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index 691af6e..0e7ea99 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -2,7 +2,6 @@ const DEFAULT_BOARD_SIZE = 8;
 const MIN_BOARD_SIZE = 4;
 const MAX_BOARD_SIZE = 13;
 const EMPTY_CELL = -1;
-const DEFAULT_SOLVER_MESSAGE = "Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.";
 const GAME_STORAGE_KEY = "eight-queens-dashboard-session-v1";
 
 let mode = "queens";
@@ -26,20 +25,56 @@ let currentSolverHighlight = null;
 const boardDiv = document.getElementById("board");
 const statusMessage = document.getElementById("statusMessage");
 const queenList = document.getElementById("queenList");
+const pieceCountBadge = document.getElementById("pieceCountBadge");
+const navDashboardLink = document.getElementById("navDashboardLink");
+const langSwitch = document.getElementById("langSwitch");
+const accountLabel = document.getElementById("accountLabel");
+const introKicker = document.getElementById("introKicker");
+const introTitle = document.getElementById("introTitle");
+const introText = document.getElementById("introText");
+const infoButton = document.getElementById("infoButton");
+const gameModeEyebrow = document.getElementById("gameModeEyebrow");
+const gameTitle = document.getElementById("gameTitle");
+const boardModeText = document.getElementById("boardModeText");
+const boardSizeInfoPrefix = document.getElementById("boardSizeInfoPrefix");
+const pieceListTitle = document.getElementById("pieceListTitle");
+const infoModalTitle = document.getElementById("infoModalTitle");
+const infoModeRuleText = document.getElementById("infoModeRuleText");
+const infoModalProblemHeading = document.getElementById("infoModalProblemHeading");
+const infoModalProblemText = document.getElementById("infoModalProblemText");
+const stepsLabel = document.getElementById("stepsLabel");
+const timeLabel = document.getElementById("timeLabel");
+const statusLabel = document.getElementById("statusLabel");
 const stepCounterValue = document.getElementById("stepCounterValue");
 const timerValue = document.getElementById("timerValue");
 const gameProgressState = document.getElementById("gameProgressState");
+const solvedCelebration = document.getElementById("solvedCelebration");
+const solvedCelebrationTitle = document.getElementById("solvedCelebrationTitle");
+const solvedCelebrationText = document.getElementById("solvedCelebrationText");
 const btnQueens = document.getElementById("btnQueens");
 const btnRooks = document.getElementById("btnRooks");
 const btnPrepareSolve = document.getElementById("btnPrepareSolve");
 const btnInstantSolve = document.getElementById("btnInstantSolve");
 const btnNextStep = document.getElementById("btnNextStep");
 const btnPlayPause = document.getElementById("btnPlayPause");
+const btnReset = document.getElementById("btnReset");
+const btnSave = document.getElementById("btnSave");
+const btnLoad = document.getElementById("btnLoad");
 const solverMessage = document.getElementById("solverMessage");
 const solverStepInfo = document.getElementById("solverStepInfo");
+const solverKicker = document.getElementById("solverKicker");
+const solverTitle = document.getElementById("solverTitle");
+const animationSolverTitle = document.getElementById("animationSolverTitle");
+const animationSolverText = document.getElementById("animationSolverText");
+const instantSolverTitle = document.getElementById("instantSolverTitle");
+const instantSolverText = document.getElementById("instantSolverText");
 const solverSpeedInput = document.getElementById("solverSpeedInput");
 const solverSpeedValue = document.getElementById("solverSpeedValue");
+const solverSpeedLabel = document.getElementById("solverSpeedLabel");
 const settingsSidebar = document.getElementById("settingsSidebar");
+const settingsTrigger = document.getElementById("settingsTrigger");
+const settingsTriggerArrow = document.getElementById("settingsTriggerArrow");
+const settingsTriggerLabel = document.getElementById("settingsTriggerLabel");
 const sidebarBackdrop = document.getElementById("sidebarBackdrop");
 const saveSidebar = document.getElementById("saveSidebar");
 const saveBackdrop = document.getElementById("saveBackdrop");
@@ -50,18 +85,369 @@ const boardSizeValue = document.getElementById("boardSizeValue");
 const boardSizeValueMirror = document.getElementById("boardSizeValueMirror");
 const sidebarBoardSizeValue = document.getElementById("sidebarBoardSizeValue");
 const sidebarBoardSizeValueMirror = document.getElementById("sidebarBoardSizeValueMirror");
+const settingsSidebarTitle = document.getElementById("settingsSidebarTitle");
+const settingsSidebarClose = document.getElementById("settingsSidebarClose");
+const settingsSidebarText = document.getElementById("settingsSidebarText");
+const boardSizeInputLabel = document.getElementById("boardSizeInputLabel");
+const applyBoardSizeButton = document.getElementById("applyBoardSizeButton");
+const settingsSidebarHint = document.getElementById("settingsSidebarHint");
 const savePointsList = document.getElementById("savePointsList");
 const saveNameInput = document.getElementById("saveNameInput");
 const saveNoteInput = document.getElementById("saveNoteInput");
 const saveFavoriteInput = document.getElementById("saveFavoriteInput");
+const saveSidebarTitle = document.getElementById("saveSidebarTitle");
+const saveSidebarClose = document.getElementById("saveSidebarClose");
+const saveSidebarText = document.getElementById("saveSidebarText");
+const saveNameLabel = document.getElementById("saveNameLabel");
+const saveNoteLabel = document.getElementById("saveNoteLabel");
+const saveFavoriteLabel = document.getElementById("saveFavoriteLabel");
+const saveNowButton = document.getElementById("saveNowButton");
 const savePointModeFilter = document.getElementById("savePointModeFilter");
 const savePointSizeFilter = document.getElementById("savePointSizeFilter");
 const savePointSortFilter = document.getElementById("savePointSortFilter");
 const savePointFavoritesOnly = document.getElementById("savePointFavoritesOnly");
+const savePointsSidebarTitle = document.getElementById("savePointsSidebarTitle");
+const savePointsSidebarClose = document.getElementById("savePointsSidebarClose");
+const savePointsSidebarText = document.getElementById("savePointsSidebarText");
+const savePointModeFilterLabel = document.getElementById("savePointModeFilterLabel");
+const savePointSizeFilterLabel = document.getElementById("savePointSizeFilterLabel");
+const savePointSortFilterLabel = document.getElementById("savePointSortFilterLabel");
+const savePointFavoritesOnlyLabel = document.getElementById("savePointFavoritesOnlyLabel");
+const savePointsEmptyState = document.getElementById("savePointsEmptyState");
+const historyKicker = document.getElementById("historyKicker");
+const historyTitle = document.getElementById("historyTitle");
+const historySubtitle = document.getElementById("historySubtitle");
+const btnRefreshHistory = document.getElementById("btnRefreshHistory");
+const historyHeadSave = document.getElementById("historyHeadSave");
+const historyHeadMode = document.getElementById("historyHeadMode");
+const historyHeadBoard = document.getElementById("historyHeadBoard");
+const historyHeadSteps = document.getElementById("historyHeadSteps");
+const historyHeadTime = document.getElementById("historyHeadTime");
+const historyHeadStatus = document.getElementById("historyHeadStatus");
+const historyHeadSaved = document.getElementById("historyHeadSaved");
 const timeHistoryTableBody = document.getElementById("timeHistoryTableBody");
 const infoModal = document.getElementById("infoModal");
 const infoModalBackdrop = document.getElementById("infoModalBackdrop");
 
+const SUPPORTED_LANGUAGES = ["de", "en"];
+let currentLanguage = "de";
+
+const MODE_COPY = {
+    de: {
+        queens: {
+            singular: "Dame",
+            plural: "Damen",
+            eyebrow: "Damen-Modus",
+            gameTitle: "Damen-Spielbrett",
+            boardText: "Platziere Damen so, dass keine zwei dieselbe Spalte oder Diagonale teilen.",
+            infoTitle: "Spielregeln und Acht-Damen-Problem",
+            infoRuleText: "Im Damen-Modus dürfen sich Damen weder in derselben Spalte noch diagonal angreifen. Mit einem Klick setzt oder entfernst du eine Figur.",
+            infoProblemHeading: "Was ist das Acht-Damen-Problem?",
+            infoProblemText: "Das klassische Acht-Damen-Problem fragt nach einer Anordnung von acht Damen auf einem 8x8-Brett, bei der sich keine zwei Damen schlagen. Es ist ein bekanntes Beispiel für kombinatorische Suche und Backtracking."
+        },
+        rooks: {
+            singular: "Turm",
+            plural: "Türme",
+            eyebrow: "Türme-Modus",
+            gameTitle: "Türme-Spielbrett",
+            boardText: "Platziere Türme so, dass keine zwei dieselbe Spalte teilen.",
+            infoTitle: "Spielregeln und Acht-Türme-Problem",
+            infoRuleText: "Im Türme-Modus duerfen sich Türme nicht in derselben Spalte stehen. Diagonalen spielen hier keine Rolle. Mit einem Klick setzt oder entfernst du eine Figur.",
+            infoProblemHeading: "Was ist das Acht-Türme-Problem?",
+            infoProblemText: "Beim Acht-Türme-Problem suchst du eine Anordnung von acht Türmen auf einem 8x8-Brett, bei der sich keine zwei Türme angreifen. Es ist eine einfachere Variante, um systematische Suche und Konfliktprüfung sichtbar zu machen."
+        }
+    },
+    en: {
+        queens: {
+            singular: "Queen",
+            plural: "Queens",
+            eyebrow: "Queens Mode",
+            gameTitle: "Queens Board",
+            boardText: "Place queens so that no two share the same column or diagonal.",
+            infoTitle: "Rules and the Eight Queens Puzzle",
+            infoRuleText: "In queens mode, queens may not attack each other in the same column or on diagonals. Click once to place or remove a piece.",
+            infoProblemHeading: "What is the Eight Queens puzzle?",
+            infoProblemText: "The classic Eight Queens puzzle asks for eight queens on an 8x8 board so that no two queens attack each other. It is a well-known example of combinatorial search and backtracking."
+        },
+        rooks: {
+            singular: "Rook",
+            plural: "Rooks",
+            eyebrow: "Rooks Mode",
+            gameTitle: "Rooks Board",
+            boardText: "Place rooks so that no two share the same column.",
+            infoTitle: "Rules and the Eight Rooks Puzzle",
+            infoRuleText: "In rooks mode, rooks may not stand in the same column. Diagonals do not matter here. Click once to place or remove a piece.",
+            infoProblemHeading: "What is the Eight Rooks puzzle?",
+            infoProblemText: "In the Eight Rooks puzzle, you arrange eight rooks on an 8x8 board so that no two rooks attack each other. It is a simpler variant that helps visualize systematic search and conflict checking."
+        }
+    }
+};
+
+const UI_TRANSLATIONS = {
+    de: {
+        navDashboard: "Dashboard",
+        accountLabel: "Account",
+        introKicker: "Puzzle-Modus",
+        introTitle: "Wähl deinen Modus und löse das Brett auf deine Art.",
+        introText: "Wechsle zwischen Damen und Türmen, nutze Animation oder Sofort-Lösung und öffne die Brett-Einstellungen jederzeit ueber den linken Seiten-Tab.",
+        infoButton: "Regeln & Hilfe",
+        stepsLabel: "Schritte",
+        timeLabel: "Zeit",
+        statusLabel: "Status",
+        progressRunning: "Läuft",
+        progressSolved: "Gelöst",
+        boardSizePrefix: ({ modeLabel }) => `Aktuelle Brettgrösse im ${modeLabel}-Modus:`,
+        solverKicker: "Solver",
+        solverTitle: "Lösungswerkzeuge",
+        animationSolverTitle: "Animations-Solver",
+        animationSolverText: "Bereite den Lösungsweg vor, gehe ihn manuell Schritt für Schritt durch oder spiele die Animation automatisch ab.",
+        instantSolverTitle: "Sofort-Lösung",
+        instantSolverText: "Lade direkt eine gültige Lösung, ohne Zwischenschritte oder Animation.",
+        defaultSolverMessage: "Bereite einen Ablauf vor und spiele ihn Schritt für Schritt ab.",
+        solverReady: ({ modeLabel }) => `Solver für ${modeLabel} bereit. ${t("defaultSolverMessage")}`,
+        solverSpeedLabel: "Animationsgeschwindigkeit",
+        btnPrepareSolve: "Animation vorbereiten",
+        btnPrepareSolveLoading: "Animation wird vorbereitet...",
+        btnNextStep: "Nächster Schritt",
+        btnPlayPause: "Animation abspielen",
+        btnPlayReplay: "Animation erneut abspielen",
+        btnPlayPauseRunning: "Animation pausieren",
+        btnInstantSolve: "Sofort lösen",
+        btnReset: "Brett zurücksetzen",
+        settingsTrigger: "Brett-Einstellungen",
+        settingsSidebarTitle: "Brett-Einstellungen",
+        settingsSidebarClose: "Schliessen",
+        settingsSidebarText: "Passe die Brettgroesse zwischen 4 und 13 an.",
+        boardSizeInputLabel: "Grösse",
+        applyBoardSizeButton: "Grösse anwenden",
+        settingsSidebarHint: "Beim ändern wird das Brett zur Sicherheit zurückgesetzt. Auf dem Handy ist 8x8 eingeplant, grössere Bretter können abgeschnitten wirken.",
+        btnSave: "Speichern",
+        btnLoad: "Save-Points",
+        saveSidebarTitle: "Speicherpunkt",
+        saveSidebarClose: "Schliessen",
+        saveSidebarText: "Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.",
+        saveNameLabel: "Name",
+        saveNamePlaceholder: "z. B. Fast gelöste Dame 8x8",
+        saveNoteLabel: "Notiz",
+        saveNotePlaceholder: "z. B. Gute Startposition fuer Türmetest",
+        saveFavoriteLabel: "Als Favorit markieren",
+        saveNowButton: "Jetzt speichern",
+        savePointsSidebarTitle: "Save-Points",
+        savePointsSidebarClose: "Schliessen",
+        savePointsSidebarText: "Wähle einen Speicherstand aus der Liste.",
+        savePointModeFilterLabel: "Modus",
+        savePointSizeFilterLabel: "Brettgrösse",
+        savePointSortFilterLabel: "Sortierung",
+        savePointFavoritesOnlyLabel: "Nur Favoriten anzeigen",
+        savePointsEmptyState: "Noch keine Speicherstände gefunden.",
+        filterAll: "Alle",
+        filterNewest: "Neueste zuerst",
+        filterOldest: "älteste zuerst",
+        filterUpdated: "Zuletzt bearbeitet",
+        filterFavorites: "Favoriten zuerst",
+        historyKicker: "Save-Points",
+        historyTitle: "Gespeicherte Zeiten und Fortschritte",
+        historySubtitle: "Die Tabelle zeigt gespeicherte Save-Points mit Zeit, Schritten und Status.",
+        btnRefreshHistory: "Aktualisieren",
+        historyHeadSave: "Save-Point",
+        historyHeadMode: "Modus",
+        historyHeadBoard: "Brett",
+        historyHeadSteps: "Schritte",
+        historyHeadTime: "Zeit",
+        historyHeadStatus: "Status",
+        historyHeadSaved: "Gespeichert",
+        pieceListTitle: ({ modeLabel }) => `Positionen der ${modeLabel}`,
+        historyEmpty: "Noch keine gespeicherten Zeiten vorhanden.",
+        placedWord: "gesetzt",
+        noSavePointsFiltered: "Keine Speicherstände fuer diese Filter gefunden.",
+        previewEmpty: "Noch keine Figuren gesetzt",
+        createdLabel: "Erstellt",
+        updatedLabel: "Aktualisiert",
+        previewLabel: "Vorschau",
+        noteLabel: "Notiz",
+        noNote: "Keine Notiz",
+        stepsMeta: "Schritte",
+        timeMeta: "Zeit",
+        solvedMeta: "Gelöst",
+        openMeta: "Offen",
+        loadButton: "Laden",
+        favoriteAddButton: "Als Favorit",
+        favoriteRemoveButton: "Favorit entfernen",
+        deleteButton: "Löschen",
+        celebrationTitle: "Richtig geloöst!",
+        celebrationText: ({ modeLabel, duration }) => `Stark gemacht. Deine ${modeLabel.toLowerCase()}-Lösung ist konfliktfrei in ${duration}.`,
+        settingsApplied: ({ size }) => `Brettgrösse auf ${size} x ${size} gesetzt.`,
+        modeActivated: ({ piece }) => `${piece}-Modus aktiviert.`,
+        solverDiscardedManual: "Solver-Ablauf verworfen, weil das Brett manuell geändert wurde.",
+        solverDiscardedStatus: "Solver-Ablauf verworfen. Bereite ihn bei Bedarf neu vor.",
+        solvedPerfect: ({ duration }) => `Perfekt gelöst in ${duration}.`,
+        animationReset: "Animations-Ablauf zurückgesetzt. Starte die Animation erneut oder gehe weiter mit Nächster Schritt.",
+        animationPreparing: ({ modeLabel, size }) => `Berechne den Animations-Ablauf für ${modeLabel.toLowerCase()} auf ${size} x ${size}...`,
+        animationPreparingStatus: ({ size }) => `Animations-Solver berechnet die Schritte fuer ${size} x ${size}.`,
+        noSolution: "Keine Lösung gefunden.",
+        noSolutionStatus: "Keine Lösung fuer dieses Brett gefunden.",
+        animationReady: ({ steps, queensMode }) => queensMode
+            ? `Animations-Ablauf bereit mit ${steps} Schritten. Nutze Nächster Schritt oder Animation abspielen, um das Backtracking zu verfolgen.`
+            : `Animations-Ablauf bereit mit ${steps} Schritten. Nutze Nächster Schritt oder Animation abspielen.`,
+        animationReadyStatus: "Animations-Solver bereit. Nutze Nächster Schritt oder Animation abspielen.",
+        animationLoadError: "Der Solver-Ablauf konnte nicht geladen werden.",
+        animationFinishedStatus: ({ size }) => `Loesung für ${size} x ${size} Schritt fuer Schritt aufgebaut.`,
+        animationAlreadyFinished: "Der Animations-Ablauf ist bereits abgeschlossen.",
+        animationPaused: "Animations-Solver pausiert.",
+        animationRunning: "Animations-Solver läuft.",
+        instantLoading: ({ modeLabel, size }) => `Lade die Sofort-Lösung für ${modeLabel.toLowerCase()} auf ${size} x ${size}...`,
+        instantLoadingStatus: "Sofort-Lösung wird geladen.",
+        instantLoaded: "Sofort-Lösung geladen. Starte den Animations-Solver, wenn du den Lösungsweg sehen möchtest.",
+        instantLoadedStatus: ({ size }) => `Sofort-Loesung für ${size} x ${size} geladen.`,
+        instantLoadError: "Die Sofort-Lösung konnte nicht geladen werden.",
+        saveError: "Der Speicherstand konnte nicht gespeichert werden.",
+        saveSuccess: ({ name }) => `Speicherpunkt "${name}" gespeichert.`,
+        loadError: "Dieser Speicherstand konnte nicht geladen werden.",
+        loadSuccess: ({ name }) => `Speicherpunkt "${name}" geladen.`,
+        favoriteError: "Favorit konnte nicht aktualisiert werden.",
+        favoriteSuccess: "Favoritenstatus aktualisiert.",
+        deleteConfirm: "Diesen Speicherpunkt wirklich löschen?",
+        deleteError: "Speicherpunkt konnte nicht gelöscht werden.",
+        deleteSuccess: "Speicherpunkt geloescht.",
+        pieceCount: ({ count }) => `${count} gesetzt`,
+        pieceEmpty: ({ modeLabel }) => `Noch keine ${modeLabel.toLowerCase()} gesetzt.`,
+        saveDefaultName: ({ piece, size, count }) => `${piece} ${size}x${size} - ${count} gesetzt`,
+        speedValue: ({ speed }) => `${speed} ms`,
+        languageSwitchAria: "Sprache wechseln"
+    },
+    en: {
+        navDashboard: "Dashboard",
+        accountLabel: "Account",
+        introKicker: "Puzzle Mode",
+        introTitle: "Choose your mode and solve the board your way.",
+        introText: "Switch between queens and rooks, use animation or instant solve, and open board settings anytime from the left side tab.",
+        infoButton: "Rules & Help",
+        stepsLabel: "Steps",
+        timeLabel: "Time",
+        statusLabel: "Status",
+        progressRunning: "Running",
+        progressSolved: "Solved",
+        boardSizePrefix: ({ modeLabel }) => `Current board size in ${modeLabel} mode:`,
+        solverKicker: "Solver",
+        solverTitle: "Solving Tools",
+        animationSolverTitle: "Animation Solver",
+        animationSolverText: "Prepare the solving path, step through it manually, or play the animation automatically.",
+        instantSolverTitle: "Instant Solve",
+        instantSolverText: "Load a valid solution directly, without intermediate steps or animation.",
+        defaultSolverMessage: "Prepare a solving trace and play it back step by step.",
+        solverReady: ({ modeLabel }) => `Solver for ${modeLabel} is ready. ${t("defaultSolverMessage")}`,
+        solverSpeedLabel: "Animation speed",
+        btnPrepareSolve: "Prepare animation",
+        btnPrepareSolveLoading: "Preparing animation...",
+        btnNextStep: "Next step",
+        btnPlayPause: "Play animation",
+        btnPlayReplay: "Replay animation",
+        btnPlayPauseRunning: "Pause animation",
+        btnInstantSolve: "Solve instantly",
+        btnReset: "Reset board",
+        settingsTrigger: "Board settings",
+        settingsSidebarTitle: "Board Settings",
+        settingsSidebarClose: "Close",
+        settingsSidebarText: "Adjust the board size between 4 and 13.",
+        boardSizeInputLabel: "Size",
+        applyBoardSizeButton: "Apply size",
+        settingsSidebarHint: "Changing the size resets the board for safety. On phones, 8x8 is the intended maximum for a reliable fit and larger boards may appear cropped.",
+        btnSave: "Save",
+        btnLoad: "Save points",
+        saveSidebarTitle: "Save Point",
+        saveSidebarClose: "Close",
+        saveSidebarText: "Give the current run a clear name and optionally a short note.",
+        saveNameLabel: "Name",
+        saveNamePlaceholder: "e.g. Nearly solved queen 8x8",
+        saveNoteLabel: "Note",
+        saveNotePlaceholder: "e.g. Strong starting position for rook test",
+        saveFavoriteLabel: "Mark as favorite",
+        saveNowButton: "Save now",
+        savePointsSidebarTitle: "Save Points",
+        savePointsSidebarClose: "Close",
+        savePointsSidebarText: "Choose a saved state from the list.",
+        savePointModeFilterLabel: "Mode",
+        savePointSizeFilterLabel: "Board size",
+        savePointSortFilterLabel: "Sorting",
+        savePointFavoritesOnlyLabel: "Show favorites only",
+        savePointsEmptyState: "No saved states yet.",
+        filterAll: "All",
+        filterNewest: "Newest first",
+        filterOldest: "Oldest first",
+        filterUpdated: "Recently updated",
+        filterFavorites: "Favorites first",
+        historyKicker: "Save Points",
+        historyTitle: "Saved Times and Progress",
+        historySubtitle: "The table shows saved runs with time, steps, and status.",
+        btnRefreshHistory: "Refresh",
+        historyHeadSave: "Save Point",
+        historyHeadMode: "Mode",
+        historyHeadBoard: "Board",
+        historyHeadSteps: "Steps",
+        historyHeadTime: "Time",
+        historyHeadStatus: "Status",
+        historyHeadSaved: "Saved",
+        pieceListTitle: ({ modeLabel }) => `${modeLabel} positions`,
+        historyEmpty: "No saved times yet.",
+        placedWord: "placed",
+        noSavePointsFiltered: "No saved states found for these filters.",
+        previewEmpty: "No pieces placed yet",
+        createdLabel: "Created",
+        updatedLabel: "Updated",
+        previewLabel: "Preview",
+        noteLabel: "Note",
+        noNote: "No note",
+        stepsMeta: "Steps",
+        timeMeta: "Time",
+        solvedMeta: "Solved",
+        openMeta: "Open",
+        loadButton: "Load",
+        favoriteAddButton: "Favorite",
+        favoriteRemoveButton: "Remove favorite",
+        deleteButton: "Delete",
+        celebrationTitle: "Correctly solved!",
+        celebrationText: ({ modeLabel, duration }) => `Well done. Your ${modeLabel.toLowerCase()} solution is conflict-free in ${duration}.`,
+        settingsApplied: ({ size }) => `Board size set to ${size} x ${size}.`,
+        modeActivated: ({ piece }) => `${piece} mode activated.`,
+        solverDiscardedManual: "Solver trace discarded because the board was changed manually.",
+        solverDiscardedStatus: "Solver trace discarded. Prepare it again if needed.",
+        solvedPerfect: ({ duration }) => `Perfectly solved in ${duration}.`,
+        animationReset: "Animation trace reset. Start the animation again or continue with Next step.",
+        animationPreparing: ({ modeLabel, size }) => `Preparing the animation trace for ${modeLabel.toLowerCase()} on ${size} x ${size}...`,
+        animationPreparingStatus: ({ size }) => `Animation solver is preparing the steps for ${size} x ${size}.`,
+        noSolution: "No solution found.",
+        noSolutionStatus: "No solution found for this board.",
+        animationReady: ({ steps, queensMode }) => queensMode
+            ? `Animation trace ready with ${steps} steps. Use Next step or Play animation to follow the backtracking process.`
+            : `Animation trace ready with ${steps} steps. Use Next step or Play animation.`,
+        animationReadyStatus: "Animation solver ready. Use Next step or Play animation.",
+        animationLoadError: "The solver trace could not be loaded.",
+        animationFinishedStatus: ({ size }) => `Solution for ${size} x ${size} was built step by step.`,
+        animationAlreadyFinished: "The animation trace is already complete.",
+        animationPaused: "Animation solver paused.",
+        animationRunning: "Animation solver is running.",
+        instantLoading: ({ modeLabel, size }) => `Loading the instant solution for ${modeLabel.toLowerCase()} on ${size} x ${size}...`,
+        instantLoadingStatus: "Instant solution is loading.",
+        instantLoaded: "Instant solution loaded. Start the animation solver if you want to see the solving path.",
+        instantLoadedStatus: ({ size }) => `Instant solution for ${size} x ${size} loaded.`,
+        instantLoadError: "The instant solution could not be loaded.",
+        saveError: "The save point could not be saved.",
+        saveSuccess: ({ name }) => `Save point "${name}" saved.`,
+        loadError: "This save point could not be loaded.",
+        loadSuccess: ({ name }) => `Save point "${name}" loaded.`,
+        favoriteError: "Favorite status could not be updated.",
+        favoriteSuccess: "Favorite status updated.",
+        deleteConfirm: "Really delete this save point?",
+        deleteError: "Save point could not be deleted.",
+        deleteSuccess: "Save point deleted.",
+        pieceCount: ({ count }) => `${count} placed`,
+        pieceEmpty: ({ modeLabel }) => `No ${modeLabel.toLowerCase()} placed yet.`,
+        saveDefaultName: ({ piece, size, count }) => `${piece} ${size}x${size} - ${count} placed`,
+        speedValue: ({ speed }) => `${speed} ms`,
+        languageSwitchAria: "Switch language"
+    }
+};
+
 function createEmptyBoard(size) {
     return Array(size).fill(EMPTY_CELL);
 }
@@ -74,6 +460,44 @@ function getColumnLabel(index) {
     return String.fromCharCode(65 + index);
 }
 
+function normalizeLanguage(language) {
+    const shortLanguage = String(language || "").trim().slice(0, 2).toLowerCase();
+    return SUPPORTED_LANGUAGES.includes(shortLanguage) ? shortLanguage : "de";
+}
+
+function getStoredLanguage() {
+    try {
+        return window.localStorage.getItem("preferredLanguage");
+    } catch (error) {
+        return null;
+    }
+}
+
+function storeLanguage(language) {
+    try {
+        window.localStorage.setItem("preferredLanguage", language);
+    } catch (error) {
+        return;
+    }
+}
+
+function detectBrowserLanguage() {
+    return normalizeLanguage(navigator.language || navigator.userLanguage || "de");
+}
+
+function t(key, params = {}) {
+    const value = UI_TRANSLATIONS[currentLanguage][key];
+    return typeof value === "function" ? value(params) : value;
+}
+
+function getDefaultSolverMessage() {
+    return t("defaultSolverMessage");
+}
+
+function getModeCopy(selectedMode = mode, language = currentLanguage) {
+    return MODE_COPY[language][selectedMode === "rooks" ? "rooks" : "queens"];
+}
+
 function sanitizeBoard(candidateBoard, size) {
     if (!Array.isArray(candidateBoard) || candidateBoard.length !== size) {
         return createEmptyBoard(size);
@@ -130,8 +554,9 @@ function persistCurrentSession() {
 function updateProgressDisplay() {
     stepCounterValue.textContent = String(stepCount);
     timerValue.textContent = formatDuration(Math.floor(getElapsedMilliseconds() / 1000));
-    gameProgressState.textContent = isSolved ? "Geloest" : "Laeuft";
+    gameProgressState.textContent = isSolved ? t("progressSolved") : t("progressRunning");
     gameProgressState.style.color = isSolved ? "#15803d" : "#1d4ed8";
+    updateSolvedCelebration();
 }
 
 function stopGameTimer() {
@@ -187,6 +612,121 @@ function ensureFreshRunAfterSolvedBoard() {
 function updateModeButtons() {
     btnQueens.classList.toggle("active", mode === "queens");
     btnRooks.classList.toggle("active", mode === "rooks");
+    btnQueens.classList.toggle("secondary", mode !== "queens");
+    btnRooks.classList.toggle("secondary", mode !== "rooks");
+}
+
+function updateModeContent() {
+    const copy = getModeCopy(mode);
+
+    gameModeEyebrow.textContent = copy.eyebrow;
+    gameTitle.textContent = copy.gameTitle;
+    boardModeText.textContent = copy.boardText;
+    pieceListTitle.textContent = t("pieceListTitle", { modeLabel: copy.plural });
+    infoModalTitle.textContent = copy.infoTitle;
+    infoModeRuleText.textContent = copy.infoRuleText;
+    infoModalProblemHeading.textContent = copy.infoProblemHeading;
+    infoModalProblemText.textContent = copy.infoProblemText;
+    boardSizeInfoPrefix.textContent = t("boardSizePrefix", { modeLabel: copy.plural });
+}
+
+function updateSolvedCelebration() {
+    if (!isSolved) {
+        solvedCelebration.hidden = true;
+        return;
+    }
+
+    solvedCelebrationTitle.textContent = t("celebrationTitle");
+    solvedCelebrationText.textContent = t("celebrationText", {
+        modeLabel: getModeLabel(mode),
+        duration: formatDuration(Math.floor(getElapsedMilliseconds() / 1000))
+    });
+    solvedCelebration.hidden = false;
+}
+
+function applyLanguageContent() {
+    document.documentElement.lang = currentLanguage;
+    navDashboardLink.textContent = t("navDashboard");
+    accountLabel.textContent = t("accountLabel");
+    introKicker.textContent = t("introKicker");
+    introTitle.textContent = t("introTitle");
+    introText.textContent = t("introText");
+    infoButton.textContent = t("infoButton");
+    infoButton.setAttribute("aria-label", t("infoButton"));
+    stepsLabel.textContent = t("stepsLabel");
+    timeLabel.textContent = t("timeLabel");
+    statusLabel.textContent = t("statusLabel");
+    solverKicker.textContent = t("solverKicker");
+    solverTitle.textContent = t("solverTitle");
+    animationSolverTitle.textContent = t("animationSolverTitle");
+    animationSolverText.textContent = t("animationSolverText");
+    instantSolverTitle.textContent = t("instantSolverTitle");
+    instantSolverText.textContent = t("instantSolverText");
+    solverSpeedLabel.textContent = t("solverSpeedLabel");
+    btnNextStep.textContent = t("btnNextStep");
+    btnInstantSolve.textContent = t("btnInstantSolve");
+    btnReset.textContent = t("btnReset");
+    settingsSidebarTitle.textContent = t("settingsSidebarTitle");
+    settingsSidebarClose.textContent = t("settingsSidebarClose");
+    settingsSidebarText.textContent = t("settingsSidebarText");
+    boardSizeInputLabel.textContent = t("boardSizeInputLabel");
+    applyBoardSizeButton.textContent = t("applyBoardSizeButton");
+    settingsSidebarHint.textContent = t("settingsSidebarHint");
+    btnSave.textContent = t("btnSave");
+    btnLoad.textContent = t("btnLoad");
+    saveSidebarTitle.textContent = t("saveSidebarTitle");
+    saveSidebarClose.textContent = t("saveSidebarClose");
+    saveSidebarText.textContent = t("saveSidebarText");
+    saveNameLabel.textContent = t("saveNameLabel");
+    saveNameInput.placeholder = t("saveNamePlaceholder");
+    saveNoteLabel.textContent = t("saveNoteLabel");
+    saveNoteInput.placeholder = t("saveNotePlaceholder");
+    saveFavoriteLabel.textContent = t("saveFavoriteLabel");
+    saveNowButton.textContent = t("saveNowButton");
+    savePointsSidebarTitle.textContent = t("savePointsSidebarTitle");
+    savePointsSidebarClose.textContent = t("savePointsSidebarClose");
+    savePointsSidebarText.textContent = t("savePointsSidebarText");
+    savePointModeFilterLabel.textContent = t("savePointModeFilterLabel");
+    savePointSizeFilterLabel.textContent = t("savePointSizeFilterLabel");
+    savePointSortFilterLabel.textContent = t("savePointSortFilterLabel");
+    savePointFavoritesOnlyLabel.textContent = t("savePointFavoritesOnlyLabel");
+    savePointsEmptyState.textContent = t("savePointsEmptyState");
+    historyKicker.textContent = t("historyKicker");
+    historyTitle.textContent = t("historyTitle");
+    historySubtitle.textContent = t("historySubtitle");
+    btnRefreshHistory.textContent = t("btnRefreshHistory");
+    historyHeadSave.textContent = t("historyHeadSave");
+    historyHeadMode.textContent = t("historyHeadMode");
+    historyHeadBoard.textContent = t("historyHeadBoard");
+    historyHeadSteps.textContent = t("historyHeadSteps");
+    historyHeadTime.textContent = t("historyHeadTime");
+    historyHeadStatus.textContent = t("historyHeadStatus");
+    historyHeadSaved.textContent = t("historyHeadSaved");
+
+    savePointModeFilter.options[0].textContent = t("filterAll");
+    savePointModeFilter.options[1].textContent = getModeCopy("queens").plural;
+    savePointModeFilter.options[2].textContent = getModeCopy("rooks").plural;
+    savePointSizeFilter.options[0].textContent = t("filterAll");
+    savePointSortFilter.options[0].textContent = t("filterNewest");
+    savePointSortFilter.options[1].textContent = t("filterOldest");
+    savePointSortFilter.options[2].textContent = t("filterUpdated");
+    savePointSortFilter.options[3].textContent = t("filterFavorites");
+
+    langSwitch.textContent = currentLanguage.toUpperCase();
+    langSwitch.setAttribute("aria-label", t("languageSwitchAria"));
+    langSwitch.title = currentLanguage === "de" ? "Switch to English" : "Zu Deutsch wechseln";
+
+    updateModeContent();
+    updateQueenList();
+    updateProgressDisplay();
+    updateSolverSpeed(solverSpeedMs);
+    updateSolverControls();
+}
+
+function updateSettingsTrigger(isOpen = settingsSidebar.classList.contains("open")) {
+    settingsTrigger.setAttribute("aria-expanded", String(isOpen));
+    settingsTriggerArrow.textContent = isOpen ? "←" : "→";
+    settingsTriggerLabel.textContent = t("settingsTrigger");
 }
 
 function updateBoardSizeDisplays(size) {
@@ -202,14 +742,14 @@ function setStatus(message = "", color = "") {
     statusMessage.style.color = color;
 }
 
-function setSolverMessage(message = DEFAULT_SOLVER_MESSAGE) {
+function setSolverMessage(message = getDefaultSolverMessage()) {
     solverMessage.textContent = message;
 }
 
 function updateSolverSpeed(rawValue) {
     solverSpeedMs = Number(rawValue);
     solverSpeedInput.value = String(solverSpeedMs);
-    solverSpeedValue.textContent = `${solverSpeedMs} ms`;
+    solverSpeedValue.textContent = t("speedValue", { speed: solverSpeedMs });
 
     if (isSolverPlaying()) {
         stopSolverPlayback(false);
@@ -218,10 +758,19 @@ function updateSolverSpeed(rawValue) {
 }
 
 function updateBoardLayout() {
-    const cellSize = Math.max(32, Math.min(60, Math.floor(480 / boardSize)));
+    let cellSize = Math.max(32, Math.min(60, Math.floor(480 / boardSize)));
+    let labelSize = cellSize;
+
+    if (window.innerWidth <= 760) {
+        const labelRatio = 0.72;
+        const availableWidth = Math.max(250, window.innerWidth - 26);
+        cellSize = Math.max(24, Math.floor(availableWidth / (boardSize + labelRatio)));
+        labelSize = Math.max(18, Math.floor(cellSize * labelRatio));
+    }
 
     boardDiv.style.setProperty("--board-size", boardSize);
     boardDiv.style.setProperty("--cell-size", `${cellSize}px`);
+    boardDiv.style.setProperty("--label-size", `${labelSize}px`);
 }
 
 function isSolverPlaying() {
@@ -255,20 +804,20 @@ function updateSolverControls() {
     btnNextStep.disabled = solverLoading || hasCompletedSolverTrace();
     btnPlayPause.disabled = solverLoading;
 
-    btnPrepareSolve.textContent = solverLoading ? "Preparing..." : "Solve Step-by-Step";
+    btnPrepareSolve.textContent = solverLoading ? t("btnPrepareSolveLoading") : t("btnPrepareSolve");
 
     if (isSolverPlaying()) {
-        btnPlayPause.textContent = "Pause";
+        btnPlayPause.textContent = t("btnPlayPauseRunning");
     } else if (hasCompletedSolverTrace()) {
-        btnPlayPause.textContent = "Replay Animation";
+        btnPlayPause.textContent = t("btnPlayReplay");
     } else {
-        btnPlayPause.textContent = "Play Animation";
+        btnPlayPause.textContent = t("btnPlayPause");
     }
 
     solverStepInfo.textContent = `Schritt ${currentStep} / ${solverSteps.length}`;
 }
 
-function discardSolverTrace(message = DEFAULT_SOLVER_MESSAGE) {
+function discardSolverTrace(message = getDefaultSolverMessage()) {
     solverRequestId += 1;
     solverLoading = false;
     stopSolverPlayback(false);
@@ -286,7 +835,7 @@ function rewindSolverTrace() {
     solverStepIndex = -1;
     currentSolverHighlight = null;
     board = createEmptyBoard(boardSize);
-    setSolverMessage("Ablauf zurueckgesetzt. Starte die Animation erneut oder gehe weiter mit Next Step.");
+    setSolverMessage(t("animationReset"));
     drawBoard();
     updateSolverControls();
 }
@@ -298,10 +847,11 @@ function setMode(newMode) {
 
     mode = newMode;
     updateModeButtons();
+    updateModeContent();
     resetBoard({
-        statusMessageText: `${getPieceLabel(mode)}-Modus aktiviert.`,
+        statusMessageText: t("modeActivated", { piece: getPieceLabel(mode) }),
         statusColor: "#2563eb",
-        solverMessageText: `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
+        solverMessageText: t("solverReady", { modeLabel: getModeLabel(mode) })
     });
 }
 
@@ -357,23 +907,6 @@ function finishSolvedRun() {
     persistCurrentSession();
 }
 
-function checkSolution() {
-    const allPlaced = board.every((col) => col !== EMPTY_CELL);
-
-    if (!allPlaced) {
-        setStatus("Noch nicht alle Figuren platziert.", "#d97706");
-        return;
-    }
-
-    if (getConflicts().length > 0) {
-        setStatus("Es gibt Konflikte auf dem Brett.", "red");
-        return;
-    }
-
-    finishSolvedRun();
-    setStatus(`Perfekt geloest in ${formatDuration(Math.floor(getElapsedMilliseconds() / 1000))}.`, "green");
-}
-
 function drawBoard() {
     boardDiv.innerHTML = "";
     boardDiv.className = "board-grid";
@@ -433,8 +966,8 @@ function placeQueen(row, col) {
     ensureFreshRunAfterSolvedBoard();
 
     if (hasPreparedSolverTrace() || isSolverPlaying()) {
-        discardSolverTrace("Solver-Ablauf verworfen, weil das Brett manuell geaendert wurde.");
-        setStatus("Solver-Ablauf verworfen. Bereite ihn bei Bedarf neu vor.", "#d97706");
+        discardSolverTrace(t("solverDiscardedManual"));
+        setStatus(t("solverDiscardedStatus"), "#d97706");
     } else {
         setStatus();
     }
@@ -447,7 +980,7 @@ function placeQueen(row, col) {
 
     if (isBoardSolved()) {
         finishSolvedRun();
-        setStatus(`Perfekt geloest in ${formatDuration(Math.floor(getElapsedMilliseconds() / 1000))}.`, "green");
+        setStatus(t("solvedPerfect", { duration: formatDuration(Math.floor(getElapsedMilliseconds() / 1000)) }), "green");
     } else {
         persistCurrentSession();
     }
@@ -461,12 +994,12 @@ function previewBoardSize(size) {
 
 function applyBoardSize() {
     boardSize = pendingBoardSize;
-    discardSolverTrace(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+    discardSolverTrace(t("solverReady", { modeLabel: getModeLabel(mode) }));
     board = createEmptyBoard(boardSize);
     currentSolverHighlight = null;
     resetProgress();
     updateBoardSizeDisplays(boardSize);
-    setStatus(`Brettgroesse auf ${boardSize} x ${boardSize} gesetzt.`, "#2563eb");
+    setStatus(t("settingsApplied", { size: boardSize }), "#2563eb");
     drawBoard();
     toggleSidebar(false);
 }
@@ -482,6 +1015,7 @@ function toggleSidebar(forceOpen) {
     settingsSidebar.classList.toggle("open", shouldOpen);
     sidebarBackdrop.classList.toggle("visible", shouldOpen);
     settingsSidebar.setAttribute("aria-hidden", String(!shouldOpen));
+    updateSettingsTrigger(shouldOpen);
 }
 
 function toggleSavePanel(forceOpen) {
@@ -519,7 +1053,7 @@ function toggleInfoModal(forceOpen) {
 }
 
 function getPieceLabel(selectedMode) {
-    return selectedMode === "queens" ? "Dame" : "Turm";
+    return getModeCopy(selectedMode).singular;
 }
 
 function getPlacedPieceCount() {
@@ -527,7 +1061,11 @@ function getPlacedPieceCount() {
 }
 
 function resetSaveForm() {
-    saveNameInput.value = `${getPieceLabel(mode)} ${boardSize}x${boardSize} - ${getPlacedPieceCount()} gesetzt`;
+    saveNameInput.value = t("saveDefaultName", {
+        piece: getPieceLabel(mode),
+        size: boardSize,
+        count: getPlacedPieceCount()
+    });
     saveNoteInput.value = "";
     saveFavoriteInput.checked = false;
 }
@@ -552,7 +1090,7 @@ function getBoardPreview(savedBoard, limit = 4) {
         }
     }
 
-    return preview.length > 0 ? preview.join(", ") : "Noch keine Figuren gesetzt";
+    return preview.length > 0 ? preview.join(", ") : t("previewEmpty");
 }
 
 function getSavePointFilters() {
@@ -585,14 +1123,14 @@ function createSavePointActionButton(label, className, onClick) {
 }
 
 function getModeLabel(selectedMode) {
-    return selectedMode === "rooks" ? "Tuerme" : "Damen";
+    return getModeCopy(selectedMode).plural;
 }
 
 function renderSavePoints(savePoints) {
     savePointsList.innerHTML = "";
 
     if (savePoints.length === 0) {
-        savePointsList.innerHTML = '<p class="sidebar-hint">Keine Speicherstaende fuer diese Filter gefunden.</p>';
+        savePointsList.innerHTML = `<p class="sidebar-hint">${t("noSavePointsFiltered")}</p>`;
         return;
     }
 
@@ -609,28 +1147,28 @@ function renderSavePoints(savePoints) {
         item.className = "save-point-card";
         title.textContent = `${savePoint.is_favorite ? "★ " : ""}${savePoint.save_name}`;
         createdAt.className = "save-point-meta";
-        createdAt.textContent = `Erstellt: ${savePoint.created_at}`;
+        createdAt.textContent = `${t("createdLabel")}: ${savePoint.created_at}`;
         updatedAt.className = "save-point-meta";
-        updatedAt.textContent = `Aktualisiert: ${savePoint.updated_at}`;
+        updatedAt.textContent = `${t("updatedLabel")}: ${savePoint.updated_at}`;
         boardMeta.className = "save-point-meta";
-        boardMeta.textContent = `${getPieceLabel(savePoint.mode)} | ${savePoint.board_size} x ${savePoint.board_size} | ${savePoint.pieces_placed}/${savePoint.board_size} gesetzt`;
+        boardMeta.textContent = `${getPieceLabel(savePoint.mode)} | ${savePoint.board_size} x ${savePoint.board_size} | ${savePoint.pieces_placed}/${savePoint.board_size} ${t("placedWord")}`;
         preview.className = "save-point-preview";
-        preview.textContent = `Vorschau: ${getBoardPreview(savePoint.board)}`;
+        preview.textContent = `${t("previewLabel")}: ${getBoardPreview(savePoint.board)}`;
         note.className = "save-point-note";
-        note.textContent = savePoint.save_note ? `Notiz: ${savePoint.save_note}` : "Notiz: Keine Notiz";
+        note.textContent = savePoint.save_note ? `${t("noteLabel")}: ${savePoint.save_note}` : `${t("noteLabel")}: ${t("noNote")}`;
         actions.className = "save-point-actions";
 
         const progressMeta = document.createElement("p");
         progressMeta.className = "save-point-meta";
-        progressMeta.textContent = `Schritte: ${savePoint.step_count || 0} | Zeit: ${formatDuration(savePoint.elapsed_seconds)} | Status: ${savePoint.is_solved ? "Geloest" : "Offen"}`;
+        progressMeta.textContent = `${t("stepsMeta")}: ${savePoint.step_count || 0} | ${t("timeMeta")}: ${formatDuration(savePoint.elapsed_seconds)} | ${t("statusLabel")}: ${savePoint.is_solved ? t("solvedMeta") : t("openMeta")}`;
 
-        actions.appendChild(createSavePointActionButton("Laden", "btn", () => loadSavePoint(savePoint.id)));
+        actions.appendChild(createSavePointActionButton(t("loadButton"), "btn", () => loadSavePoint(savePoint.id)));
         actions.appendChild(createSavePointActionButton(
-            savePoint.is_favorite ? "Favorit entfernen" : "Als Favorit",
+            savePoint.is_favorite ? t("favoriteRemoveButton") : t("favoriteAddButton"),
             "btn secondary",
             () => toggleSavePointFavorite(savePoint.id)
         ));
-        actions.appendChild(createSavePointActionButton("Loeschen", "btn ghost", () => deleteSavePoint(savePoint.id)));
+        actions.appendChild(createSavePointActionButton(t("deleteButton"), "btn ghost", () => deleteSavePoint(savePoint.id)));
 
         item.appendChild(title);
         item.appendChild(createdAt);
@@ -648,7 +1186,7 @@ function renderTimeHistory(savePoints) {
     timeHistoryTableBody.innerHTML = "";
 
     if (savePoints.length === 0) {
-        timeHistoryTableBody.innerHTML = '<tr><td colspan="7" class="history-empty">Noch keine gespeicherten Zeiten vorhanden.</td></tr>';
+        timeHistoryTableBody.innerHTML = `<tr><td colspan="7" class="history-empty">${t("historyEmpty")}</td></tr>`;
         return;
     }
 
@@ -660,7 +1198,7 @@ function renderTimeHistory(savePoints) {
             `${savePoint.board_size} x ${savePoint.board_size}`,
             String(savePoint.step_count || 0),
             formatDuration(savePoint.elapsed_seconds),
-            savePoint.is_solved ? "Geloest" : "Offen",
+            savePoint.is_solved ? t("solvedMeta") : t("openMeta"),
             savePoint.updated_at
         ];
 
@@ -698,7 +1236,7 @@ async function openSavePointsPanel() {
 }
 
 function applyLoadedGame(data) {
-    discardSolverTrace(`${getPieceLabel(data.mode || "queens")}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+    discardSolverTrace(t("solverReady", { modeLabel: getModeLabel(data.mode || "queens") }));
 
     const restoredBoardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
 
@@ -714,6 +1252,7 @@ function applyLoadedGame(data) {
     });
 
     updateModeButtons();
+    updateModeContent();
     updateBoardSizeDisplays(boardSize);
     drawBoard();
     updateProgressDisplay();
@@ -742,7 +1281,7 @@ function applySolverStep(step) {
         currentSolverHighlight = null;
     }
 
-    setSolverMessage(step.message || DEFAULT_SOLVER_MESSAGE);
+    setSolverMessage(step.message || getDefaultSolverMessage());
     drawBoard();
     persistCurrentSession();
     updateSolverControls();
@@ -761,7 +1300,7 @@ function advanceSolverStep() {
     if (hasCompletedSolverTrace()) {
         finishSolvedRun();
         stopSolverPlayback(false);
-        setStatus(`Loesung fuer ${boardSize} x ${boardSize} Schritt fuer Schritt aufgebaut.`, "green");
+        setStatus(t("animationFinishedStatus", { size: boardSize }), "green");
         updateSolverControls();
     }
 
@@ -814,8 +1353,8 @@ async function prepareSolutionTrace() {
     solverSteps = [];
     solverStepIndex = -1;
     currentSolverHighlight = null;
-    setSolverMessage(`Berechne ${getPieceLabel(mode)}-Ablauf fuer ${boardSize} x ${boardSize}...`);
-    setStatus(`Solver berechnet die Schritte fuer ${boardSize} x ${boardSize}.`, "#2563eb");
+    setSolverMessage(t("animationPreparing", { modeLabel: getModeLabel(mode), size: boardSize }));
+    setStatus(t("animationPreparingStatus", { size: boardSize }), "#2563eb");
     updateSolverControls();
 
     try {
@@ -837,19 +1376,15 @@ async function prepareSolutionTrace() {
         currentSolverHighlight = null;
 
         if (!trace.solved || solverSteps.length === 0) {
-            setSolverMessage("Keine Loesung gefunden.");
-            setStatus("Keine Loesung fuer dieses Brett gefunden.", "red");
+            setSolverMessage(t("noSolution"));
+            setStatus(t("noSolutionStatus"), "red");
             drawBoard();
             persistCurrentSession();
             return false;
         }
 
-        setSolverMessage(
-            mode === "queens"
-                ? `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder Play Animation, um das Backtracking zu verfolgen.`
-                : `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder starte die Animation.`
-        );
-        setStatus("Solver-Ablauf bereit. Nutze Next Step oder Play Animation.", "#2563eb");
+        setSolverMessage(t("animationReady", { steps: solverSteps.length, queensMode: mode === "queens" }));
+        setStatus(t("animationReadyStatus"), "#2563eb");
         drawBoard();
         return true;
     } catch (error) {
@@ -857,8 +1392,8 @@ async function prepareSolutionTrace() {
             return false;
         }
 
-        setSolverMessage("Der Solver-Ablauf konnte nicht geladen werden.");
-        setStatus("Der Solver-Ablauf konnte nicht geladen werden.", "red");
+        setSolverMessage(t("animationLoadError"));
+        setStatus(t("animationLoadError"), "red");
         return false;
     } finally {
         if (requestId === solverRequestId) {
@@ -886,7 +1421,7 @@ async function nextSolverStep() {
     }
 
     if (!advanceSolverStep()) {
-        setStatus("Der Solver-Ablauf ist bereits abgeschlossen.", "#2563eb");
+        setStatus(t("animationAlreadyFinished"), "#2563eb");
     }
 }
 
@@ -897,7 +1432,7 @@ async function toggleSolverPlayback() {
 
     if (isSolverPlaying()) {
         stopSolverPlayback();
-        setStatus("Solver-Animation pausiert.", "#2563eb");
+        setStatus(t("animationPaused"), "#2563eb");
         return;
     }
 
@@ -913,7 +1448,7 @@ async function toggleSolverPlayback() {
         rewindSolverTrace();
     }
 
-    setStatus("Solver-Animation laeuft.", "#2563eb");
+    setStatus(t("animationRunning"), "#2563eb");
     startSolverPlayback(true);
 }
 
@@ -934,8 +1469,8 @@ async function instantSolve() {
     solverSteps = [];
     solverStepIndex = -1;
     currentSolverHighlight = null;
-    setSolverMessage(`Lade sofortige ${getPieceLabel(mode)}-Loesung fuer ${boardSize} x ${boardSize}...`);
-    setStatus(`Sofortige Loesung wird geladen.`, "#2563eb");
+    setSolverMessage(t("instantLoading", { modeLabel: getModeLabel(mode), size: boardSize }));
+    setStatus(t("instantLoadingStatus"), "#2563eb");
     updateSolverControls();
 
     try {
@@ -954,8 +1489,8 @@ async function instantSolve() {
         board = mode === "queens" && Array.isArray(solution[0]) ? solution[0].slice() : solution.slice();
         currentSolverHighlight = null;
         finishSolvedRun();
-        setSolverMessage("Sofortige Loesung geladen. Starte Solve Step-by-Step, wenn du den Ablauf sehen moechtest.");
-        setStatus(`Loesung fuer ${boardSize} x ${boardSize} sofort geladen.`, "green");
+        setSolverMessage(t("instantLoaded"));
+        setStatus(t("instantLoadedStatus", { size: boardSize }), "green");
         drawBoard();
         persistCurrentSession();
     } catch (error) {
@@ -963,8 +1498,8 @@ async function instantSolve() {
             return;
         }
 
-        setSolverMessage("Die sofortige Loesung konnte nicht geladen werden.");
-        setStatus("Die sofortige Loesung konnte nicht geladen werden.", "red");
+        setSolverMessage(t("instantLoadError"));
+        setStatus(t("instantLoadError"), "red");
     } finally {
         if (requestId === solverRequestId) {
             solverLoading = false;
@@ -977,7 +1512,7 @@ function resetBoard(options = {}) {
     const {
         statusMessageText = "",
         statusColor = "",
-        solverMessageText = `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
+        solverMessageText = t("solverReady", { modeLabel: getModeLabel(mode) })
     } = options;
 
     discardSolverTrace(solverMessageText);
@@ -996,7 +1531,6 @@ function resetBoard(options = {}) {
 
 function updateQueenList() {
     queenList.innerHTML = "";
-
     let count = 1;
 
     for (let row = 0; row < boardSize; row++) {
@@ -1008,10 +1542,20 @@ function updateQueenList() {
         const position = `${getColumnLabel(col)}${boardSize - row}`;
         const li = document.createElement("li");
 
-        li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${position}`;
+        li.textContent = `${getPieceLabel(mode)} ${count}: ${position}`;
         queenList.appendChild(li);
         count += 1;
     }
+
+    const placedPieces = count - 1;
+    pieceCountBadge.textContent = t("pieceCount", { count: placedPieces });
+
+    if (placedPieces === 0) {
+        const emptyItem = document.createElement("li");
+        emptyItem.className = "empty";
+        emptyItem.textContent = t("pieceEmpty", { modeLabel: getModeLabel(mode) });
+        queenList.appendChild(emptyItem);
+    }
 }
 
 async function saveGame() {
@@ -1034,7 +1578,7 @@ async function saveGame() {
     });
 
     if (!response.ok) {
-        setStatus("Der Speicherstand konnte nicht gespeichert werden.", "red");
+        setStatus(t("saveError"), "red");
         return;
     }
 
@@ -1043,7 +1587,7 @@ async function saveGame() {
     toggleSavePanel(false);
     await refreshSavePoints();
     await refreshTimeHistory();
-    setStatus(`Speicherpunkt "${data.save_point.save_name}" gespeichert.`, "green");
+    setStatus(t("saveSuccess", { name: data.save_point.save_name }), "green");
 }
 
 async function loadGame() {
@@ -1056,14 +1600,14 @@ async function loadSavePoint(savePointId) {
     const response = await fetch(`/load/${savePointId}`);
 
     if (!response.ok) {
-        setStatus("Dieser Speicherstand konnte nicht geladen werden.", "red");
+        setStatus(t("loadError"), "red");
         return;
     }
 
     const data = await response.json();
 
     applyLoadedGame(data);
-    setStatus(`Speicherpunkt "${data.save_name}" geladen.`, "green");
+    setStatus(t("loadSuccess", { name: data.save_name }), "green");
     toggleSavePointsPanel(false);
 }
 
@@ -1073,17 +1617,17 @@ async function toggleSavePointFavorite(savePointId) {
     });
 
     if (!response.ok) {
-        setStatus("Favorit konnte nicht aktualisiert werden.", "red");
+        setStatus(t("favoriteError"), "red");
         return;
     }
 
     await refreshSavePoints();
     await refreshTimeHistory();
-    setStatus("Favoritenstatus aktualisiert.", "#2563eb");
+    setStatus(t("favoriteSuccess"), "#2563eb");
 }
 
 async function deleteSavePoint(savePointId) {
-    const confirmed = window.confirm("Diesen Speicherpunkt wirklich loeschen?");
+    const confirmed = window.confirm(t("deleteConfirm"));
 
     if (!confirmed) {
         return;
@@ -1094,13 +1638,13 @@ async function deleteSavePoint(savePointId) {
     });
 
     if (!response.ok) {
-        setStatus("Speicherpunkt konnte nicht geloescht werden.", "red");
+        setStatus(t("deleteError"), "red");
         return;
     }
 
     await refreshSavePoints();
     await refreshTimeHistory();
-    setStatus("Speicherpunkt geloescht.", "#2563eb");
+    setStatus(t("deleteSuccess"), "#2563eb");
 }
 
 function restoreSessionFromStorage() {
@@ -1122,6 +1666,7 @@ function restoreSessionFromStorage() {
         currentSolverHighlight = null;
 
         updateModeButtons();
+        updateModeContent();
         updateBoardSizeDisplays(boardSize);
         drawBoard();
         resetProgress({
@@ -1137,12 +1682,13 @@ function restoreSessionFromStorage() {
 }
 
 async function initializeDashboard() {
+    currentLanguage = normalizeLanguage(getStoredLanguage() || detectBrowserLanguage());
     pendingBoardSize = boardSize;
     updateModeButtons();
     updateBoardSizeDisplays(boardSize);
-    updateSolverSpeed(solverSpeedMs);
-    setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
-    updateSolverControls();
+    applyLanguageContent();
+    updateSettingsTrigger(false);
+    setSolverMessage(t("solverReady", { modeLabel: getModeLabel(mode) }));
 
     if (!restoreSessionFromStorage()) {
         resetProgress();
@@ -1153,10 +1699,28 @@ async function initializeDashboard() {
     await refreshTimeHistory();
 }
 
+if (langSwitch) {
+    langSwitch.addEventListener("click", async () => {
+        currentLanguage = currentLanguage === "de" ? "en" : "de";
+        storeLanguage(currentLanguage);
+        applyLanguageContent();
+        resetSaveForm();
+        await refreshTimeHistory();
+
+        if (savePointsSidebar.classList.contains("open")) {
+            await refreshSavePoints();
+        }
+    });
+}
+
 window.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {
         closeAllPanels();
     }
 });
 
+window.addEventListener("resize", () => {
+    drawBoard();
+});
+
 initializeDashboard();
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 93129e1..c1c37c9 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -10,18 +10,39 @@
 </head>
 
 <body>
+    <nav class="dashboard-nav">
+        <a class="brand" href="{{ url_for('main.home') }}">
+            <span class="brand-mark">♛</span>
+            <span>8-Damen- und 8-Türme Solver</span>
+        </a>
+
+        <div class="nav-actions">
+            <a class="nav-link" href="{{ url_for('main.dashboard') }}" id="navDashboardLink">Dashboard</a>
+
+            <button class="nav-link-button lang-switch" id="langSwitch" type="button"
+                aria-label="Sprache wechseln">DE</button>
+
+            <a class="account-shortcut" href="{{ url_for('login.login_settings') }}"
+                aria-label="Konto und Login-Einstellungen öffnen">
+                <span class="account-avatar" aria-hidden="true">{{ current_user.username[:1]|upper }}</span>
+                <span class="account-copy">
+                    <span class="account-label" id="accountLabel">Account</span>
+                    <span class="account-name">{{ current_user.username }}</span>
+                </span>
+            </a>
 
-    <nav class="navbar">
-        <div class="nav-left">♛ 8-Queens App</div>
-        <div class="nav-right">
-            <a href="{{ url_for('main.dashboard') }}">Dashboard</a>
-            <a href="{{ url_for('login.login_settings') }}">Login settings</a>
             <form action="{{ url_for('login.logout') }}" method="post" class="nav-logout-form">
                 <button class="nav-link-button" type="submit">Logout</button>
             </form>
         </div>
     </nav>
 
+    <button class="settings-trigger" id="settingsTrigger" onclick="toggleSidebar()" type="button"
+        aria-controls="settingsSidebar" aria-expanded="false">
+        <span class="settings-trigger-arrow" id="settingsTriggerArrow">→</span>
+        <span class="settings-trigger-label" id="settingsTriggerLabel">Brett-Einstellungen</span>
+    </button>
+
     <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
@@ -33,116 +54,157 @@
         {% endif %}
         {% endwith %}
 
-        <div class="card">
-            <h2>👋 Willkommen, {{ current_user.username }}</h2>
+        <section class="dashboard-intro card">
+            <p class="section-kicker" id="introKicker">Puzzle-Modus</p>
+            <h1 id="introTitle">Wähl deinen Modus und löse das Brett auf deine Art.</h1>
+            <p class="dashboard-intro-text" id="introText">
+                Wechsle zwischen Damen und Türmen, nutze Animation oder Sofort-Lösung und öffne die
+                Brett-Einstellungen jederzeit über den linken Seiten-Tab.
+            </p>
 
-            <div class="user-info">
-                <p><strong>ID:</strong> {{ current_user.id }}</p>
-                <p><strong>Username:</strong> {{ current_user.username }}</p>
-
-                <p><strong>2FA:</strong> {% if current_user.two_factor_enabled %}Authenticator app enabled{% else %}Disabled{% endif %}</p>
-                <p><strong>Erstellt:</strong> {{ current_user.created_at }}</p>
+            <div class="mode-switch" aria-label="Spielmodus">
+                <button class="btn active" onclick="setMode('queens')" id="btnQueens" type="button">♛ Damen</button>
+                <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks" type="button">♜ Tuerme</button>
             </div>
-
-            <div class="inline-actions">
-                <a class="btn secondary" href="{{ url_for('login.login_settings') }}">Open login settings</a>
-                <form action="{{ url_for('login.logout') }}" method="post">
-                    <button class="btn danger" type="submit">Logout</button>
-                </form>
-            </div>
-        </div>
-
-        <div class="mode-switch">
-            <button class="btn active" onclick="setMode('queens')" id="btnQueens">♛ Damen</button>
-            <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks">♜ Türme</button>
-            <button class="btn secondary" onclick="toggleSidebar()" id="btnSidebar">Board Settings</button>
-        </div>
+        </section>
 
         <div class="card game-card">
             <div class="game-card-header">
-                <h2>♟️ Damen- und Tuerme-Spiel</h2>
+                <div class="game-card-copy">
+                    <p class="section-kicker" id="gameModeEyebrow">Damen-Modus</p>
+                    <h2 id="gameTitle">Damen-Spielbrett</h2>
+                    <p class="board-mode-text" id="boardModeText">
+                        Platziere Damen so, dass keine zwei dieselbe Spalte oder Diagonale teilen.
+                    </p>
+                </div>
+
                 <button class="info-button" id="infoButton" onclick="toggleInfoModal(true)" type="button"
-                    aria-label="Spielanleitung und Erklaerung anzeigen">i</button>
+                    aria-label="Spielregeln und Hilfe anzeigen">Regeln & Hilfe</button>
             </div>
-            <p class="board-size-info">Aktuelle Brettgroesse: <span id="boardSizeValue">8</span> x <span
-                    id="boardSizeValueMirror">8</span></p>
+
+            <p class="board-size-info" id="boardSizeInfo"><span id="boardSizeInfoPrefix">Aktuelle Brettgrösse im
+                    Damen-Modus:</span>
+                <span id="boardSizeValue">8</span> x <span id="boardSizeValueMirror">8</span>
+            </p>
 
             <div class="game-stats" aria-label="Spielstatus">
                 <article class="game-stat-card">
-                    <p class="game-stat-label">Schritte</p>
+                    <p class="game-stat-label" id="stepsLabel">Schritte</p>
                     <p class="game-stat-value" id="stepCounterValue">0</p>
                 </article>
                 <article class="game-stat-card">
-                    <p class="game-stat-label">Zeit</p>
+                    <p class="game-stat-label" id="timeLabel">Zeit</p>
                     <p class="game-stat-value" id="timerValue">00:00:00</p>
                 </article>
                 <article class="game-stat-card">
-                    <p class="game-stat-label">Status</p>
-                    <p class="game-stat-value game-stat-status" id="gameProgressState">Laeuft</p>
+                    <p class="game-stat-label" id="statusLabel">Status</p>
+                    <p class="game-stat-value game-stat-status" id="gameProgressState">Läuft</p>
                 </article>
             </div>
 
             <p id="statusMessage"></p>
+            <div class="solved-celebration" id="solvedCelebration" aria-live="polite" hidden>
+                <p class="solved-celebration-title" id="solvedCelebrationTitle">Richtig gelöst!</p>
+                <p class="solved-celebration-text" id="solvedCelebrationText">Stark gemacht. Das Brett ist konfliktfrei.
+                </p>
+            </div>
+
             <div class="board" id="board"></div>
 
+            <div class="controls">
+                <button class="btn secondary" onclick="resetBoard()" id="btnReset" type="button">Brett
+                    zuruecksetzen</button>
+                <div class="controls-save-row">
+                    <button class="btn" onclick="openSavePanel()" id="btnSave" type="button">Speichern</button>
+                    <button class="btn secondary" onclick="openSavePointsPanel()" id="btnLoad"
+                        type="button">Save-Points</button>
+                </div>
+            </div>
+
             <div class="solver-panel">
                 <div class="solver-panel-header">
                     <div>
-                        <h3>Solver-Ablauf</h3>
-                        <p class="solver-message" id="solverMessage">Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.</p>
+                        <p class="section-kicker" id="solverKicker">Solver</p>
+                        <h3 id="solverTitle">Lösungswerkzeuge</h3>
+                        <p class="solver-message" id="solverMessage">Bereite einen Ablauf vor und spiele ihn Schritt
+                            für Schritt ab.</p>
                     </div>
                     <p class="solver-step-info" id="solverStepInfo">Schritt 0 / 0</p>
                 </div>
 
-                <div class="solver-controls">
-                    <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve" type="button">Solve Step-by-Step</button>
-                    <button class="btn secondary" onclick="instantSolve()" id="btnInstantSolve" type="button">Instant Solve</button>
-                    <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep" type="button">Next Step</button>
-                    <button class="btn secondary" onclick="toggleSolverPlayback()" id="btnPlayPause" type="button">Play Animation</button>
+                <div class="solver-groups">
+                    <section class="solver-group">
+                        <h4 id="animationSolverTitle">Animations-Solver</h4>
+                        <p class="solver-group-text" id="animationSolverText">
+                            Bereite den Lösungsweg vor, gehe ihn manüll Schritt für Schritt durch oder spiele die
+                            Animation automatisch ab.
+                        </p>
+
+                        <div class="solver-controls">
+                            <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve"
+                                type="button">Animation vorbereiten</button>
+                            <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep"
+                                type="button">Nächster Schritt</button>
+                            <button class="btn secondary" onclick="toggleSolverPlayback()" id="btnPlayPause"
+                                type="button">Animation abspielen</button>
+                        </div>
+
+                        <div class="solver-speed">
+                            <label class="solver-speed-label" id="solverSpeedLabel"
+                                for="solverSpeedInput">Animationsgeschwindigkeit</label>
+                            <input id="solverSpeedInput" type="range" min="80" max="900" step="20" value="320"
+                                oninput="updateSolverSpeed(this.value)">
+                            <span class="solver-speed-value" id="solverSpeedValue">320 ms</span>
+                        </div>
+                    </section>
+
+                    <section class="solver-group instant-solver-group">
+                        <h4 id="instantSolverTitle">Sofort-Lösung</h4>
+                        <p class="solver-group-text" id="instantSolverText">
+                            Lade direkt eine gültige Lösung, ohne Zwischenschritte oder Animation.
+                        </p>
+
+                        <div class="instant-solver-actions">
+                            <button class="btn accent" onclick="instantSolve()" id="btnInstantSolve"
+                                type="button">Sofort lösen</button>
+                        </div>
+                    </section>
                 </div>
-
-                <div class="solver-speed">
-                    <label class="solver-speed-label" for="solverSpeedInput">Speed</label>
-                    <input id="solverSpeedInput" type="range" min="80" max="900" step="20" value="320"
-                        oninput="updateSolverSpeed(this.value)">
-                    <span class="solver-speed-value" id="solverSpeedValue">320 ms</span>
-                </div>
-            </div>
-
-            <div class="controls">
-                <button class="btn" onclick="checkSolution()">Check</button>
-                <button class="btn secondary" onclick="resetBoard()">Reset</button>
-
-                <button class="btn" onclick="openSavePanel()">💾 Save</button>
-                <button class="btn" onclick="openSavePointsPanel()">📂 Load</button>
             </div>
         </div>
 
-        <div class="card">
-            <h3>📋 Figuren Positionen</h3>
+        <div class="card piece-card">
+            <div class="section-header">
+                <h3 id="pieceListTitle">Positionen der Damen</h3>
+                <span class="section-badge" id="pieceCountBadge">0 gesetzt</span>
+            </div>
             <ul id="queenList"></ul>
         </div>
 
         <div class="card">
             <div class="history-header">
                 <div>
-                    <h3>⏱️ Bisherige Zeiten</h3>
-                    <p class="history-subtitle">Die Tabelle zeigt gespeicherte Save-Points mit Zeit und Schritten.</p>
+                    <p class="section-kicker" id="historyKicker">Save-Points</p>
+                    <h3 id="historyTitle">Gespeicherte Zeiten und Fortschritte</h3>
+                    <p class="history-subtitle" id="historySubtitle">Die Tabelle zeigt gespeicherte Save-Points mit
+                        Zeit, Schritten und
+                        Status.</p>
                 </div>
-                <button class="btn secondary" onclick="refreshTimeHistory()" type="button">Aktualisieren</button>
+                <button class="btn secondary" onclick="refreshTimeHistory()" id="btnRefreshHistory"
+                    type="button">Aktualisieren</button>
             </div>
 
             <div class="history-table-wrapper">
                 <table class="history-table">
                     <thead>
                         <tr>
-                            <th>Save-Point</th>
-                            <th>Modus</th>
-                            <th>Brett</th>
-                            <th>Schritte</th>
-                            <th>Zeit</th>
-                            <th>Status</th>
-                            <th>Gespeichert</th>
+                            <th id="historyHeadSave">Save-Point</th>
+                            <th id="historyHeadMode">Modus</th>
+                            <th id="historyHeadBoard">Brett</th>
+                            <th id="historyHeadSteps">Schritte</th>
+                            <th id="historyHeadTime">Zeit</th>
+                            <th id="historyHeadStatus">Status</th>
+                            <th id="historyHeadSaved">Gespeichert</th>
                         </tr>
                     </thead>
                     <tbody id="timeHistoryTableBody">
@@ -155,64 +217,69 @@
         </div>
     </div>
 
-    <aside class="sidebar" id="settingsSidebar" aria-hidden="true">
+    <aside class="sidebar settings-sidebar" id="settingsSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3>Brettgroesse</h3>
-            <button class="btn secondary sidebar-close" onclick="toggleSidebar(false)" type="button">Schliessen</button>
+            <h3 id="settingsSidebarTitle">Brett-Einstellungen</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSidebar(false)" id="settingsSidebarClose"
+                type="button">Schliessen</button>
         </div>
 
-        <p>Wähle eine Grösse zwischen 4 und 13.</p>
+        <p id="settingsSidebarText">Passe die Brettgrösse zwischen 4 und 13 an.</p>
 
-        <label class="sidebar-label" for="boardSizeInput">Groesse</label>
+        <label class="sidebar-label" id="boardSizeInputLabel" for="boardSizeInput">Grösse</label>
         <input id="boardSizeInput" type="range" min="4" max="13" value="8" oninput="previewBoardSize(this.value)">
         <div class="sidebar-size-row">
             <strong><span id="sidebarBoardSizeValue">8</span> x <span id="sidebarBoardSizeValueMirror">8</span></strong>
         </div>
 
-        <button class="btn" onclick="applyBoardSize()" type="button">Apply Size</button>
-        <p class="sidebar-hint">Das Brett wird beim Ändern zur Sicherheit zurückgesetzt.</p>
+        <button class="btn" onclick="applyBoardSize()" id="applyBoardSizeButton" type="button">Grösse anwenden</button>
+        <p class="sidebar-hint" id="settingsSidebarHint">Beim Ändern wird das Brett zur Sicherheit zurückgesetzt. Auf
+            dem Handy ist 8x8 eingeplant, grössere Bretter können abgeschnitten wirken.</p>
     </aside>
 
     <aside class="sidebar save-sidebar" id="saveSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3>Speicherpunkt</h3>
-            <button class="btn secondary sidebar-close" onclick="toggleSavePanel(false)" type="button">Schliessen</button>
+            <h3 id="saveSidebarTitle">Speicherpunkt</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSavePanel(false)" id="saveSidebarClose"
+                type="button">Schliessen</button>
         </div>
 
-        <p>Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
+        <p id="saveSidebarText">Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
 
-        <label class="sidebar-label" for="saveNameInput">Name</label>
-        <input class="sidebar-input" id="saveNameInput" type="text" maxlength="80" placeholder="z. B. Fast geloeste Dame 8x8">
+        <label class="sidebar-label" id="saveNameLabel" for="saveNameInput">Name</label>
+        <input class="sidebar-input" id="saveNameInput" type="text" maxlength="80"
+            placeholder="z. B. Fast gelöste Dame 8x8">
 
-        <label class="sidebar-label" for="saveNoteInput">Notiz</label>
+        <label class="sidebar-label" id="saveNoteLabel" for="saveNoteInput">Notiz</label>
         <textarea class="sidebar-input sidebar-textarea" id="saveNoteInput" rows="4" maxlength="240"
-            placeholder="z. B. Gute Startposition fuer Tuermetest"></textarea>
+            placeholder="z. B. Gute Startposition für Türmetest"></textarea>
 
         <label class="sidebar-checkbox">
             <input id="saveFavoriteInput" type="checkbox">
-            Als Favorit markieren
+            <span id="saveFavoriteLabel">Als Favorit markieren</span>
         </label>
 
-        <button class="btn" onclick="saveGame()" type="button">Jetzt speichern</button>
+        <button class="btn" onclick="saveGame()" id="saveNowButton" type="button">Jetzt speichern</button>
     </aside>
 
     <aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3>Save Points</h3>
-            <button class="btn secondary sidebar-close" onclick="toggleSavePointsPanel(false)" type="button">Schliessen</button>
+            <h3 id="savePointsSidebarTitle">Save-Points</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleSavePointsPanel(false)"
+                id="savePointsSidebarClose" type="button">Schliessen</button>
         </div>
 
-        <p>Waehle einen Speicherstand aus der Liste.</p>
+        <p id="savePointsSidebarText">Wähle einen Speicherstand aus der Liste.</p>
 
         <div class="save-point-filters">
-            <label class="sidebar-label" for="savePointModeFilter">Modus</label>
+            <label class="sidebar-label" id="savePointModeFilterLabel" for="savePointModeFilter">Modus</label>
             <select class="sidebar-input" id="savePointModeFilter" onchange="refreshSavePoints()">
                 <option value="all">Alle</option>
                 <option value="queens">Damen</option>
-                <option value="rooks">Tuerme</option>
+                <option value="rooks">Türme</option>
             </select>
 
-            <label class="sidebar-label" for="savePointSizeFilter">Brettgroesse</label>
+            <label class="sidebar-label" id="savePointSizeFilterLabel" for="savePointSizeFilter">Brettgrösse</label>
             <select class="sidebar-input" id="savePointSizeFilter" onchange="refreshSavePoints()">
                 <option value="all">Alle</option>
                 {% for board_size in range(4, 14) %}
@@ -220,22 +287,22 @@
                 {% endfor %}
             </select>
 
-            <label class="sidebar-label" for="savePointSortFilter">Sortierung</label>
+            <label class="sidebar-label" id="savePointSortFilterLabel" for="savePointSortFilter">Sortierung</label>
             <select class="sidebar-input" id="savePointSortFilter" onchange="refreshSavePoints()">
                 <option value="newest">Neueste zuerst</option>
-                <option value="oldest">Aelteste zuerst</option>
+                <option value="oldest">älteste zuerst</option>
                 <option value="updated">Zuletzt bearbeitet</option>
                 <option value="favorites">Favoriten zuerst</option>
             </select>
 
             <label class="sidebar-checkbox">
                 <input id="savePointFavoritesOnly" type="checkbox" onchange="refreshSavePoints()">
-                Nur Favoriten anzeigen
+                <span id="savePointFavoritesOnlyLabel">Nur Favoriten anzeigen</span>
             </label>
         </div>
 
         <div class="save-points-list" id="savePointsList">
-            <p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>
+            <p class="sidebar-hint" id="savePointsEmptyState">Noch keine Speicherstände gefunden.</p>
         </div>
     </aside>
 
@@ -246,31 +313,31 @@
     <div class="modal-backdrop" id="infoModalBackdrop" onclick="toggleInfoModal(false)"></div>
     <section class="modal" id="infoModal" aria-hidden="true" aria-labelledby="infoModalTitle">
         <div class="modal-header">
-            <h3 id="infoModalTitle">Spielanleitung und Acht-Damen-Problem</h3>
-            <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)" type="button">Schliessen</button>
+            <h3 id="infoModalTitle">Spielregeln und Acht-Damen-Problem</h3>
+            <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)"
+                type="button">Schliessen</button>
         </div>
 
         <div class="modal-content">
-            <p>Setze pro Reihe genau eine Figur auf das Brett. Eine gueltige Loesung hat keine Konflikte.</p>
+            <p>Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine Konflikte.</p>
 
-            <h4>So funktioniert das Spiel</h4>
-            <p>Im Damen-Modus duerfen sich Damen weder in derselben Spalte noch diagonal angreifen. Im Tuerme-Modus
-                zaehlen nur Spalten-Konflikte. Mit einem Klick setzt oder entfernst du eine Figur.</p>
+            <h4>So funktioniert der aktuelle Modus</h4>
+            <p id="infoModeRuleText">Im Damen-Modus dürfen sich Damen weder in derselben Spalte noch diagonal
+                angreifen. Mit einem Klick setzt oder entfernst du eine Figur.</p>
 
-            <h4>Was ist das Acht-Damen-Problem?</h4>
-            <p>Das klassische Acht-Damen-Problem fragt nach einer Anordnung von acht Damen auf einem 8x8-Brett, bei
-                der sich keine zwei Damen schlagen. Es ist ein bekanntes Beispiel fuer kombinatorische Suche und
-                Backtracking.</p>
+            <h4 id="infoModalProblemHeading">Was ist das Acht-Damen-Problem?</h4>
+            <p id="infoModalProblemText">Das klassische Acht-Damen-Problem fragt nach einer Anordnung von acht Damen
+                auf einem 8x8-Brett, bei der sich keine zwei Damen schlagen. Es ist ein bekanntes Beispiel für
+                kombinatorische Suche und Backtracking.</p>
 
             <h4>Was zeigen Zeit und Schritte?</h4>
-            <p>Der Schrittzaehler erfasst deine Zuege auf dem Brett. Die Zeit laeuft fuer das aktuelle Spiel weiter,
-                auch wenn du die Seite neu laedst. Beim Speichern werden Zeit und Schritte zusammen mit dem Save-Point
-                abgelegt.</p>
+            <p>Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das aktuelle Spiel weiter,
+                auch wenn du die Seite neu lädst. Beim Speichern werden Zeit und Schritte zusammen mit dem
+                Save-Point abgelegt.</p>
         </div>
     </section>
 
     <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
-
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/database_setup.sql b/database_setup.sql
index 216606d..413051c 100644
--- a/database_setup.sql
+++ b/database_setup.sql
@@ -27,6 +27,9 @@ CREATE TABLE game_state (
     save_name VARCHAR(80) NOT NULL DEFAULT 'Unnamed Save',
     save_note TEXT NOT NULL DEFAULT '',
     is_favorite BOOLEAN NOT NULL DEFAULT 0,
+    step_count INTEGER NOT NULL DEFAULT 0,
+    elapsed_seconds INTEGER NOT NULL DEFAULT 0,
+    is_solved BOOLEAN NOT NULL DEFAULT 0,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
     updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );

From fc94d812d25746b93e42f3fcfa8de32a29ffedf4 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Tue, 7 Apr 2026 11:14:20 +0200
Subject: [PATCH 12/15] fixed some missing translations and added a back button
 to login_settings.

---
 app/static/css/login.css          |  82 +++++++++-
 app/static/js/dashboard.js        | 243 +++++++++++++-----------------
 app/static/js/index.js            |   6 +-
 app/static/js/login.js            | 227 +++++++++++++++++++++++++++-
 app/templates/dashboard.html      | 169 +++++++++++----------
 app/templates/login_settings.html |  94 ++++++++----
 6 files changed, 563 insertions(+), 258 deletions(-)

diff --git a/app/static/css/login.css b/app/static/css/login.css
index d4a1008..cd2b5de 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -117,6 +117,14 @@ a {
 
 .nav-form {
     margin: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: #ecf4fb;
 }
 
 .auth-shell {
@@ -145,6 +153,68 @@ a {
     width: min(980px, 100%);
 }
 
+.settings-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(31, 49, 64, 0.08);
+    border: 1px solid rgba(31, 49, 64, 0.12);
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-weight: 700;
+    color: var(--navy);
+    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.back-link:hover {
+    transform: translateY(-1px);
+    background: rgba(31, 49, 64, 0.12);
+    border-color: rgba(31, 49, 64, 0.18);
+}
+
+.back-link-arrow {
+    font-size: 18px;
+    line-height: 1;
+}
+
+.lang-switch,
+#logoutButton {
+    margin-top: 0;
+    min-height: 40px;
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 14px;
+    line-height: 1.1;
+}
+
+.lang-switch {
+    min-width: 58px;
+    background: rgba(31, 49, 64, 0.08);
+    border: 1px solid rgba(31, 49, 64, 0.12);
+    color: var(--navy);
+}
+
+.lang-switch:hover {
+    color: var(--navy);
+    background: rgba(31, 49, 64, 0.12);
+    border-color: rgba(31, 49, 64, 0.18);
+    box-shadow: none;
+}
+
+#logoutButton {
+    color: #fff7eb;
+}
+
 .settings-grid {
     display: grid;
     gap: 24px;
@@ -344,6 +414,16 @@ button:active {
         padding: 10px 14px;
     }
 
+    .settings-topbar {
+        align-items: stretch;
+    }
+
+    .back-link,
+    .lang-switch {
+        width: 100%;
+        justify-content: center;
+    }
+
     .auth-shell {
         padding: 22px 12px 28px;
     }
@@ -355,4 +435,4 @@ button:active {
     form {
         padding: 18px;
     }
-}
\ No newline at end of file
+}
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index 0e7ea99..8254d10 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -26,13 +26,7 @@ const boardDiv = document.getElementById("board");
 const statusMessage = document.getElementById("statusMessage");
 const queenList = document.getElementById("queenList");
 const pieceCountBadge = document.getElementById("pieceCountBadge");
-const navDashboardLink = document.getElementById("navDashboardLink");
 const langSwitch = document.getElementById("langSwitch");
-const accountLabel = document.getElementById("accountLabel");
-const introKicker = document.getElementById("introKicker");
-const introTitle = document.getElementById("introTitle");
-const introText = document.getElementById("introText");
-const infoButton = document.getElementById("infoButton");
 const gameModeEyebrow = document.getElementById("gameModeEyebrow");
 const gameTitle = document.getElementById("gameTitle");
 const boardModeText = document.getElementById("boardModeText");
@@ -42,9 +36,6 @@ const infoModalTitle = document.getElementById("infoModalTitle");
 const infoModeRuleText = document.getElementById("infoModeRuleText");
 const infoModalProblemHeading = document.getElementById("infoModalProblemHeading");
 const infoModalProblemText = document.getElementById("infoModalProblemText");
-const stepsLabel = document.getElementById("stepsLabel");
-const timeLabel = document.getElementById("timeLabel");
-const statusLabel = document.getElementById("statusLabel");
 const stepCounterValue = document.getElementById("stepCounterValue");
 const timerValue = document.getElementById("timerValue");
 const gameProgressState = document.getElementById("gameProgressState");
@@ -57,20 +48,10 @@ const btnPrepareSolve = document.getElementById("btnPrepareSolve");
 const btnInstantSolve = document.getElementById("btnInstantSolve");
 const btnNextStep = document.getElementById("btnNextStep");
 const btnPlayPause = document.getElementById("btnPlayPause");
-const btnReset = document.getElementById("btnReset");
-const btnSave = document.getElementById("btnSave");
-const btnLoad = document.getElementById("btnLoad");
 const solverMessage = document.getElementById("solverMessage");
 const solverStepInfo = document.getElementById("solverStepInfo");
-const solverKicker = document.getElementById("solverKicker");
-const solverTitle = document.getElementById("solverTitle");
-const animationSolverTitle = document.getElementById("animationSolverTitle");
-const animationSolverText = document.getElementById("animationSolverText");
-const instantSolverTitle = document.getElementById("instantSolverTitle");
-const instantSolverText = document.getElementById("instantSolverText");
 const solverSpeedInput = document.getElementById("solverSpeedInput");
 const solverSpeedValue = document.getElementById("solverSpeedValue");
-const solverSpeedLabel = document.getElementById("solverSpeedLabel");
 const settingsSidebar = document.getElementById("settingsSidebar");
 const settingsTrigger = document.getElementById("settingsTrigger");
 const settingsTriggerArrow = document.getElementById("settingsTriggerArrow");
@@ -85,46 +66,14 @@ const boardSizeValue = document.getElementById("boardSizeValue");
 const boardSizeValueMirror = document.getElementById("boardSizeValueMirror");
 const sidebarBoardSizeValue = document.getElementById("sidebarBoardSizeValue");
 const sidebarBoardSizeValueMirror = document.getElementById("sidebarBoardSizeValueMirror");
-const settingsSidebarTitle = document.getElementById("settingsSidebarTitle");
-const settingsSidebarClose = document.getElementById("settingsSidebarClose");
-const settingsSidebarText = document.getElementById("settingsSidebarText");
-const boardSizeInputLabel = document.getElementById("boardSizeInputLabel");
-const applyBoardSizeButton = document.getElementById("applyBoardSizeButton");
-const settingsSidebarHint = document.getElementById("settingsSidebarHint");
 const savePointsList = document.getElementById("savePointsList");
 const saveNameInput = document.getElementById("saveNameInput");
 const saveNoteInput = document.getElementById("saveNoteInput");
 const saveFavoriteInput = document.getElementById("saveFavoriteInput");
-const saveSidebarTitle = document.getElementById("saveSidebarTitle");
-const saveSidebarClose = document.getElementById("saveSidebarClose");
-const saveSidebarText = document.getElementById("saveSidebarText");
-const saveNameLabel = document.getElementById("saveNameLabel");
-const saveNoteLabel = document.getElementById("saveNoteLabel");
-const saveFavoriteLabel = document.getElementById("saveFavoriteLabel");
-const saveNowButton = document.getElementById("saveNowButton");
 const savePointModeFilter = document.getElementById("savePointModeFilter");
 const savePointSizeFilter = document.getElementById("savePointSizeFilter");
 const savePointSortFilter = document.getElementById("savePointSortFilter");
 const savePointFavoritesOnly = document.getElementById("savePointFavoritesOnly");
-const savePointsSidebarTitle = document.getElementById("savePointsSidebarTitle");
-const savePointsSidebarClose = document.getElementById("savePointsSidebarClose");
-const savePointsSidebarText = document.getElementById("savePointsSidebarText");
-const savePointModeFilterLabel = document.getElementById("savePointModeFilterLabel");
-const savePointSizeFilterLabel = document.getElementById("savePointSizeFilterLabel");
-const savePointSortFilterLabel = document.getElementById("savePointSortFilterLabel");
-const savePointFavoritesOnlyLabel = document.getElementById("savePointFavoritesOnlyLabel");
-const savePointsEmptyState = document.getElementById("savePointsEmptyState");
-const historyKicker = document.getElementById("historyKicker");
-const historyTitle = document.getElementById("historyTitle");
-const historySubtitle = document.getElementById("historySubtitle");
-const btnRefreshHistory = document.getElementById("btnRefreshHistory");
-const historyHeadSave = document.getElementById("historyHeadSave");
-const historyHeadMode = document.getElementById("historyHeadMode");
-const historyHeadBoard = document.getElementById("historyHeadBoard");
-const historyHeadSteps = document.getElementById("historyHeadSteps");
-const historyHeadTime = document.getElementById("historyHeadTime");
-const historyHeadStatus = document.getElementById("historyHeadStatus");
-const historyHeadSaved = document.getElementById("historyHeadSaved");
 const timeHistoryTableBody = document.getElementById("timeHistoryTableBody");
 const infoModal = document.getElementById("infoModal");
 const infoModalBackdrop = document.getElementById("infoModalBackdrop");
@@ -152,7 +101,7 @@ const MODE_COPY = {
             gameTitle: "Türme-Spielbrett",
             boardText: "Platziere Türme so, dass keine zwei dieselbe Spalte teilen.",
             infoTitle: "Spielregeln und Acht-Türme-Problem",
-            infoRuleText: "Im Türme-Modus duerfen sich Türme nicht in derselben Spalte stehen. Diagonalen spielen hier keine Rolle. Mit einem Klick setzt oder entfernst du eine Figur.",
+            infoRuleText: "Im Türme-Modus dürfen sich Türme nicht in derselben Spalte stehen. Diagonalen spielen hier keine Rolle. Mit einem Klick setzt oder entfernst du eine Figur.",
             infoProblemHeading: "Was ist das Acht-Türme-Problem?",
             infoProblemText: "Beim Acht-Türme-Problem suchst du eine Anordnung von acht Türmen auf einem 8x8-Brett, bei der sich keine zwei Türme angreifen. Es ist eine einfachere Variante, um systematische Suche und Konfliktprüfung sichtbar zu machen."
         }
@@ -183,14 +132,22 @@ const MODE_COPY = {
     }
 };
 
-const UI_TRANSLATIONS = {
+const translations = {
     de: {
+        pageTitle: "Dashboard",
+        navBrand: "8-Damen- und 8-Türme Solver",
         navDashboard: "Dashboard",
+        navLogout: "Logout",
         accountLabel: "Account",
+        accountShortcutAria: "Konto und Login-Einstellungen öffnen",
         introKicker: "Puzzle-Modus",
         introTitle: "Wähl deinen Modus und löse das Brett auf deine Art.",
         introText: "Wechsle zwischen Damen und Türmen, nutze Animation oder Sofort-Lösung und öffne die Brett-Einstellungen jederzeit ueber den linken Seiten-Tab.",
+        modeSwitchAria: "Spielmodus",
+        btnQueens: "Damen",
+        btnRooks: "Türme",
         infoButton: "Regeln & Hilfe",
+        gameStatsAria: "Spielstatus",
         stepsLabel: "Schritte",
         timeLabel: "Zeit",
         statusLabel: "Status",
@@ -256,6 +213,11 @@ const UI_TRANSLATIONS = {
         historyHeadTime: "Zeit",
         historyHeadStatus: "Status",
         historyHeadSaved: "Gespeichert",
+        infoModalClose: "Schliessen",
+        infoModalIntro: "Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine Konflikte.",
+        infoModalModeHeading: "So funktioniert der aktuelle Modus",
+        infoModalTimeHeading: "Was zeigen Zeit und Schritte?",
+        infoModalTimeText: "Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das aktuelle Spiel weiter, auch wenn du die Seite neu lädst. Beim Speichern werden Zeit und Schritte zusammen mit dem Save-Point abgelegt.",
         pieceListTitle: ({ modeLabel }) => `Positionen der ${modeLabel}`,
         historyEmpty: "Noch keine gespeicherten Zeiten vorhanden.",
         placedWord: "gesetzt",
@@ -312,16 +274,27 @@ const UI_TRANSLATIONS = {
         pieceCount: ({ count }) => `${count} gesetzt`,
         pieceEmpty: ({ modeLabel }) => `Noch keine ${modeLabel.toLowerCase()} gesetzt.`,
         saveDefaultName: ({ piece, size, count }) => `${piece} ${size}x${size} - ${count} gesetzt`,
+        filterQueens: "Damen",
+        filterRooks: "Türme",
+        solverStepInfo: ({ currentStep, totalSteps }) => `Schritt ${currentStep} / ${totalSteps}`,
         speedValue: ({ speed }) => `${speed} ms`,
         languageSwitchAria: "Sprache wechseln"
     },
     en: {
+        pageTitle: "Dashboard",
+        navBrand: "8 Queens and 8 Rooks Solver",
         navDashboard: "Dashboard",
+        navLogout: "Logout",
         accountLabel: "Account",
+        accountShortcutAria: "Open account and login settings",
         introKicker: "Puzzle Mode",
         introTitle: "Choose your mode and solve the board your way.",
         introText: "Switch between queens and rooks, use animation or instant solve, and open board settings anytime from the left side tab.",
+        modeSwitchAria: "Game mode",
+        btnQueens: "Queens",
+        btnRooks: "Rooks",
         infoButton: "Rules & Help",
+        gameStatsAria: "Game status",
         stepsLabel: "Steps",
         timeLabel: "Time",
         statusLabel: "Status",
@@ -387,6 +360,11 @@ const UI_TRANSLATIONS = {
         historyHeadTime: "Time",
         historyHeadStatus: "Status",
         historyHeadSaved: "Saved",
+        infoModalClose: "Close",
+        infoModalIntro: "Place exactly one piece in each row. A valid solution has no conflicts.",
+        infoModalModeHeading: "How the current mode works",
+        infoModalTimeHeading: "What do time and steps show?",
+        infoModalTimeText: "The step counter records your moves on the board. Time keeps running for the current game even if you reload the page. When saving, time and steps are stored together with the save point.",
         pieceListTitle: ({ modeLabel }) => `${modeLabel} positions`,
         historyEmpty: "No saved times yet.",
         placedWord: "placed",
@@ -443,6 +421,9 @@ const UI_TRANSLATIONS = {
         pieceCount: ({ count }) => `${count} placed`,
         pieceEmpty: ({ modeLabel }) => `No ${modeLabel.toLowerCase()} placed yet.`,
         saveDefaultName: ({ piece, size, count }) => `${piece} ${size}x${size} - ${count} placed`,
+        filterQueens: "Queens",
+        filterRooks: "Rooks",
+        solverStepInfo: ({ currentStep, totalSteps }) => `Step ${currentStep} / ${totalSteps}`,
         speedValue: ({ speed }) => `${speed} ms`,
         languageSwitchAria: "Switch language"
     }
@@ -486,7 +467,7 @@ function detectBrowserLanguage() {
 }
 
 function t(key, params = {}) {
-    const value = UI_TRANSLATIONS[currentLanguage][key];
+    const value = translations[currentLanguage][key];
     return typeof value === "function" ? value(params) : value;
 }
 
@@ -494,6 +475,69 @@ function getDefaultSolverMessage() {
     return t("defaultSolverMessage");
 }
 
+function applyTextTranslations() {
+    document.documentElement.lang = currentLanguage;
+    document.body.dataset.language = currentLanguage;
+
+    document.querySelectorAll("[data-i18n]").forEach((element) => {
+        const key = element.dataset.i18n;
+        const translatedText = t(key);
+
+        if (translatedText === undefined) {
+            return;
+        }
+
+        if (element.tagName === "TITLE" || String(translatedText).includes("<br")) {
+            element.innerHTML = translatedText;
+            return;
+        }
+
+        element.textContent = translatedText;
+    });
+
+    document.querySelectorAll("[data-i18n-placeholder]").forEach((element) => {
+        const translatedText = t(element.dataset.i18nPlaceholder);
+
+        if (translatedText === undefined) {
+            return;
+        }
+
+        element.setAttribute("placeholder", translatedText);
+    });
+
+    document.querySelectorAll("[data-i18n-aria-label]").forEach((element) => {
+        const translatedText = t(element.dataset.i18nAriaLabel);
+
+        if (translatedText === undefined) {
+            return;
+        }
+
+        element.setAttribute("aria-label", translatedText);
+    });
+}
+
+function setLanguage(language) {
+    currentLanguage = normalizeLanguage(language);
+    applyTextTranslations();
+
+    langSwitch.textContent = currentLanguage.toUpperCase();
+    langSwitch.setAttribute("aria-label", t("languageSwitchAria"));
+    langSwitch.title = currentLanguage === "de" ? "Switch to English" : "Zu Deutsch wechseln";
+
+    updateSettingsTrigger();
+    updateModeContent();
+    updateQueenList();
+    updateProgressDisplay();
+    updateSolverSpeed(solverSpeedMs);
+    updateSolverControls();
+
+    if (!solverLoading && !hasPreparedSolverTrace()) {
+        setSolverMessage(t("solverReady", { modeLabel: getModeLabel(mode) }));
+    }
+
+    storeLanguage(currentLanguage);
+}
+
 function getModeCopy(selectedMode = mode, language = currentLanguage) {
     return MODE_COPY[language][selectedMode === "rooks" ? "rooks" : "queens"];
 }
@@ -644,85 +688,6 @@ function updateSolvedCelebration() {
     solvedCelebration.hidden = false;
 }
 
-function applyLanguageContent() {
-    document.documentElement.lang = currentLanguage;
-    navDashboardLink.textContent = t("navDashboard");
-    accountLabel.textContent = t("accountLabel");
-    introKicker.textContent = t("introKicker");
-    introTitle.textContent = t("introTitle");
-    introText.textContent = t("introText");
-    infoButton.textContent = t("infoButton");
-    infoButton.setAttribute("aria-label", t("infoButton"));
-    stepsLabel.textContent = t("stepsLabel");
-    timeLabel.textContent = t("timeLabel");
-    statusLabel.textContent = t("statusLabel");
-    solverKicker.textContent = t("solverKicker");
-    solverTitle.textContent = t("solverTitle");
-    animationSolverTitle.textContent = t("animationSolverTitle");
-    animationSolverText.textContent = t("animationSolverText");
-    instantSolverTitle.textContent = t("instantSolverTitle");
-    instantSolverText.textContent = t("instantSolverText");
-    solverSpeedLabel.textContent = t("solverSpeedLabel");
-    btnNextStep.textContent = t("btnNextStep");
-    btnInstantSolve.textContent = t("btnInstantSolve");
-    btnReset.textContent = t("btnReset");
-    settingsSidebarTitle.textContent = t("settingsSidebarTitle");
-    settingsSidebarClose.textContent = t("settingsSidebarClose");
-    settingsSidebarText.textContent = t("settingsSidebarText");
-    boardSizeInputLabel.textContent = t("boardSizeInputLabel");
-    applyBoardSizeButton.textContent = t("applyBoardSizeButton");
-    settingsSidebarHint.textContent = t("settingsSidebarHint");
-    btnSave.textContent = t("btnSave");
-    btnLoad.textContent = t("btnLoad");
-    saveSidebarTitle.textContent = t("saveSidebarTitle");
-    saveSidebarClose.textContent = t("saveSidebarClose");
-    saveSidebarText.textContent = t("saveSidebarText");
-    saveNameLabel.textContent = t("saveNameLabel");
-    saveNameInput.placeholder = t("saveNamePlaceholder");
-    saveNoteLabel.textContent = t("saveNoteLabel");
-    saveNoteInput.placeholder = t("saveNotePlaceholder");
-    saveFavoriteLabel.textContent = t("saveFavoriteLabel");
-    saveNowButton.textContent = t("saveNowButton");
-    savePointsSidebarTitle.textContent = t("savePointsSidebarTitle");
-    savePointsSidebarClose.textContent = t("savePointsSidebarClose");
-    savePointsSidebarText.textContent = t("savePointsSidebarText");
-    savePointModeFilterLabel.textContent = t("savePointModeFilterLabel");
-    savePointSizeFilterLabel.textContent = t("savePointSizeFilterLabel");
-    savePointSortFilterLabel.textContent = t("savePointSortFilterLabel");
-    savePointFavoritesOnlyLabel.textContent = t("savePointFavoritesOnlyLabel");
-    savePointsEmptyState.textContent = t("savePointsEmptyState");
-    historyKicker.textContent = t("historyKicker");
-    historyTitle.textContent = t("historyTitle");
-    historySubtitle.textContent = t("historySubtitle");
-    btnRefreshHistory.textContent = t("btnRefreshHistory");
-    historyHeadSave.textContent = t("historyHeadSave");
-    historyHeadMode.textContent = t("historyHeadMode");
-    historyHeadBoard.textContent = t("historyHeadBoard");
-    historyHeadSteps.textContent = t("historyHeadSteps");
-    historyHeadTime.textContent = t("historyHeadTime");
-    historyHeadStatus.textContent = t("historyHeadStatus");
-    historyHeadSaved.textContent = t("historyHeadSaved");
-
-    savePointModeFilter.options[0].textContent = t("filterAll");
-    savePointModeFilter.options[1].textContent = getModeCopy("queens").plural;
-    savePointModeFilter.options[2].textContent = getModeCopy("rooks").plural;
-    savePointSizeFilter.options[0].textContent = t("filterAll");
-    savePointSortFilter.options[0].textContent = t("filterNewest");
-    savePointSortFilter.options[1].textContent = t("filterOldest");
-    savePointSortFilter.options[2].textContent = t("filterUpdated");
-    savePointSortFilter.options[3].textContent = t("filterFavorites");
-
-    langSwitch.textContent = currentLanguage.toUpperCase();
-    langSwitch.setAttribute("aria-label", t("languageSwitchAria"));
-    langSwitch.title = currentLanguage === "de" ? "Switch to English" : "Zu Deutsch wechseln";
-
-    updateModeContent();
-    updateQueenList();
-    updateProgressDisplay();
-    updateSolverSpeed(solverSpeedMs);
-    updateSolverControls();
-}
-
 function updateSettingsTrigger(isOpen = settingsSidebar.classList.contains("open")) {
     settingsTrigger.setAttribute("aria-expanded", String(isOpen));
     settingsTriggerArrow.textContent = isOpen ? "←" : "→";
@@ -814,7 +779,10 @@ function updateSolverControls() {
         btnPlayPause.textContent = t("btnPlayPause");
     }
 
-    solverStepInfo.textContent = `Schritt ${currentStep} / ${solverSteps.length}`;
+    solverStepInfo.textContent = t("solverStepInfo", {
+        currentStep,
+        totalSteps: solverSteps.length
+    });
 }
 
 function discardSolverTrace(message = getDefaultSolverMessage()) {
@@ -1682,11 +1650,10 @@ function restoreSessionFromStorage() {
 }
 
 async function initializeDashboard() {
-    currentLanguage = normalizeLanguage(getStoredLanguage() || detectBrowserLanguage());
     pendingBoardSize = boardSize;
     updateModeButtons();
     updateBoardSizeDisplays(boardSize);
-    applyLanguageContent();
+    setLanguage(getStoredLanguage() || detectBrowserLanguage());
     updateSettingsTrigger(false);
     setSolverMessage(t("solverReady", { modeLabel: getModeLabel(mode) }));
 
@@ -1701,9 +1668,7 @@ async function initializeDashboard() {
 
 if (langSwitch) {
     langSwitch.addEventListener("click", async () => {
-        currentLanguage = currentLanguage === "de" ? "en" : "de";
-        storeLanguage(currentLanguage);
-        applyLanguageContent();
+        setLanguage(currentLanguage === "de" ? "en" : "de");
         resetSaveForm();
         await refreshTimeHistory();
 
diff --git a/app/static/js/index.js b/app/static/js/index.js
index be170c2..0722145 100644
--- a/app/static/js/index.js
+++ b/app/static/js/index.js
@@ -30,13 +30,13 @@ const translations = {
         "hero.challengeValue": "Zeit und Schritte messen",
         "problem.eyebrow": "Warum dieses Problem spannend ist",
         "problem.title": "Die Acht-Damen- und Acht-Türme-Probleme sind mehr als Schachrätsel.",
-        "problem.text": "Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich keine zwei Damen schlagen. Beim Acht-Tuerme-Problem gilt dieselbe Idee für Türme, nur mit einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und Backtracking funktionieren.<br><br>Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige moegliche Platzierungen, aber nur sehr wenige wirklich gültige Loesungen. Genau das macht diese App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.",
+        "problem.text": "Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich keine zwei Damen schlagen. Beim Acht-Tuerme-Problem gilt dieselbe Idee für Türme, nur mit einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und Backtracking funktionieren.<br><br>Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige moegliche Platzierungen, aber nur sehr wenige wirklich gültige Lösungen. Genau das macht diese App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.",
         "features.eyebrow": "Was die Applikation bietet",
         "features.title": "Von der Idee bis zur gelösten Stellung.",
         "features.card1Title": "Interaktives Brett",
         "features.card1Text": "Setze Damen oder Türme direkt auf dem Brett und prüfe, ob deine Anordnung konfliktfrei ist.",
         "features.card2Title": "Solver mit Animation",
-        "features.card2Text": "Beobachte den Loesungsweg Schritt fuer Schritt und verstehe, wie Backtracking arbeitet.",
+        "features.card2Text": "Beobachte den Lösungsweg Schritt fuer Schritt und verstehe, wie Backtracking arbeitet.",
         "features.card3Title": "Zeit und Schritte",
         "features.card3Text": "Miss deinen Fortschritt während des Spiels und vergleiche unterschiedliche Versuche.",
         "features.card4Title": "Save-Points",
@@ -49,7 +49,7 @@ const translations = {
         "journey.step1Text": "Registriere dich und erhalte Zugang zu Dashboard, Save-Points und deinem Fortschritt.",
         "journey.step2Title": "Spielmodus wählen",
         "journey.step2Text": "Arbeite mit Damen oder Türmen und passe die Brettgrösse deinem Ziel an.",
-        "journey.step3Title": "Loesen oder analysieren",
+        "journey.step3Title": "Lösen oder analysieren",
         "journey.step3Text": "Teste eigene Ideen oder lass dir die Lösung visuell vom Solver lösen lassen, dabei wird 1:1 gezeigt wie der Solver vorgeht.",
         "cta.eyebrow": "Bereit für den ersten Versuch?",
         "cta.title": "Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.",
diff --git a/app/static/js/login.js b/app/static/js/login.js
index d916419..ca25820 100644
--- a/app/static/js/login.js
+++ b/app/static/js/login.js
@@ -1,3 +1,224 @@
+const SUPPORTED_LANGUAGES = ["de", "en"];
+const DEFAULT_LANGUAGE = "de";
+const LANGUAGE_STORAGE_KEY = "preferredLanguage";
+
+const langSwitch = document.getElementById("langSwitch");
+
+const translations = {
+    de: {
+        pageTitle: "Login-Einstellungen",
+        navBrand: "8-Damen- und 8-Türme Solver",
+        navDashboard: "Dashboard",
+        navSettings: "Login-Einstellungen",
+        navLogout: "Logout",
+        backToDashboard: "Zurück zum Dashboard",
+        backToDashboardAria: "Zurück zum Dashboard",
+        languageSwitchAria: "Sprache wechseln",
+        settingsTitle: "Login-Einstellungen",
+        settingsSubtitle: "Verwalte die Authenticator-App-2FA und dein Passwort, ohne den Registrierungsablauf zu ändern.",
+        twoFactorTitle: "Authenticator-App-2FA",
+        twoFactorEnabledHint: "2FA ist für dieses Konto aktuell aktiviert.",
+        twoFactorEnabledAppHint: "Nutze Google Authenticator, Microsoft Authenticator, Authy oder eine andere TOTP-App, um deine 6-stelligen Login-Codes zu generieren.",
+        disableTwoFactorButton: "2FA deaktivieren",
+        disableTwoFactorLoading: "2FA wird deaktiviert...",
+        finishSetupTitle: "2FA-Einrichtung abschließen",
+        finishSetupHint: "Scanne diesen QR-Code mit deiner Authenticator-App und gib danach den aktuellen 6-stelligen Code zur Bestätigung ein.",
+        scanFallbackHint: "Wenn das Scannen nicht funktioniert, kannst du den manuellen Einrichtungsschlüssel unten verwenden.",
+        manualSetupKey: "Manueller Einrichtungsschlüssel",
+        setupUriLabel: "Einrichtungs-URI",
+        setupUriHint: "Diese URI wird für den QR-Setup verwendet und kann als Fallback für kompatible Apps kopiert werden.",
+        authenticatorCodeLabel: "Authenticator-Code",
+        confirmAndEnableButton: "Bestätigen und aktivieren",
+        confirmAndEnableLoading: "2FA wird aktiviert...",
+        cancelSetupTitle: "Einrichtung abbrechen",
+        cancelSetupHint: "Brich die aktuelle Authenticator-Einrichtung ab, wenn du mit einem neuen Schlüssel neu starten möchtest.",
+        cancelSetupButton: "Einrichtung abbrechen",
+        startSetupHint: "Schütze dein Konto mit 6-stelligen Codes aus einer Authenticator-App.",
+        startSetupHintFollowup: "Nach dem Start der Einrichtung erhältst du einen QR-Code zum Scannen und bestätigst dann einmal mit einem aktuellen Code.",
+        startSetupButton: "Einrichtung starten",
+        startSetupLoading: "Einrichtung wird gestartet...",
+        changePasswordTitle: "Passwort ändern",
+        currentPasswordLabel: "Aktuelles Passwort",
+        newPasswordLabel: "Neues Passwort",
+        confirmPasswordLabel: "Neues Passwort bestätigen",
+        updatePasswordButton: "Passwort aktualisieren",
+        updatePasswordLoading: "Passwort wird aktualisiert...",
+        qrLoadError: "QR-Vorschau konnte nicht geladen werden."
+    },
+    en: {
+        pageTitle: "Login Settings",
+        navBrand: "8-Damen- und 8-Türme Solver",
+        navDashboard: "Dashboard",
+        navSettings: "Login settings",
+        navLogout: "Logout",
+        backToDashboard: "Back to dashboard",
+        backToDashboardAria: "Back to dashboard",
+        languageSwitchAria: "Switch language",
+        settingsTitle: "Login settings",
+        settingsSubtitle: "Manage authenticator app 2FA and your password without changing the registration flow.",
+        twoFactorTitle: "Authenticator app 2FA",
+        twoFactorEnabledHint: "2FA is currently enabled for this account.",
+        twoFactorEnabledAppHint: "Use Google Authenticator, Microsoft Authenticator, Authy, or another TOTP app to generate your 6-digit login codes.",
+        disableTwoFactorButton: "Disable 2FA",
+        disableTwoFactorLoading: "Disabling 2FA...",
+        finishSetupTitle: "Finish 2FA setup",
+        finishSetupHint: "Scan this QR code with your authenticator app, then enter the current 6-digit code to confirm.",
+        scanFallbackHint: "If scanning does not work, you can still use the manual setup key below.",
+        manualSetupKey: "Manual setup key",
+        setupUriLabel: "Setup URI",
+        setupUriHint: "This URI is used to generate the QR setup and can be copied as a fallback for compatible apps.",
+        authenticatorCodeLabel: "Authenticator code",
+        confirmAndEnableButton: "Confirm and enable",
+        confirmAndEnableLoading: "Enabling 2FA...",
+        cancelSetupTitle: "Cancel setup",
+        cancelSetupHint: "Cancel the current authenticator setup if you want to restart with a new secret.",
+        cancelSetupButton: "Cancel setup",
+        startSetupHint: "Protect your account with 6-digit codes from an authenticator app.",
+        startSetupHintFollowup: "After starting setup, you will get a QR code to scan and then confirm once with a live code.",
+        startSetupButton: "Start setup",
+        startSetupLoading: "Starting setup...",
+        changePasswordTitle: "Change password",
+        currentPasswordLabel: "Current password",
+        newPasswordLabel: "New password",
+        confirmPasswordLabel: "Confirm new password",
+        updatePasswordButton: "Update password",
+        updatePasswordLoading: "Updating password...",
+        qrLoadError: "QR preview could not be loaded."
+    }
+};
+
+const serverMessageTranslations = {
+    de: {
+        "Authenticator app 2FA is already enabled.": "Authenticator-App-2FA ist bereits aktiviert.",
+        "Add the secret to your authenticator app, then confirm it with the current 6-digit code.": "Füge den Schlüssel zu deiner Authenticator-App hinzu und bestätige ihn dann mit dem aktuellen 6-stelligen Code.",
+        "Start the authenticator setup first.": "Starte zuerst die Authenticator-Einrichtung.",
+        "Invalid authenticator code. Please try the current code again.": "Ungültiger Authenticator-Code. Bitte versuche den aktuellen Code erneut.",
+        "Authenticator app 2FA enabled.": "Authenticator-App-2FA wurde aktiviert.",
+        "Authenticator app setup cancelled.": "Die Einrichtung der Authenticator-App wurde abgebrochen.",
+        "Authenticator app 2FA disabled.": "Authenticator-App-2FA wurde deaktiviert.",
+        "Your current password is incorrect.": "Dein aktuelles Passwort ist falsch.",
+        "The new passwords do not match.": "Die neuen Passwörter stimmen nicht überein.",
+        "Password updated successfully.": "Das Passwort wurde erfolgreich aktualisiert.",
+        "Unknown settings action.": "Unbekannte Einstellungsaktion."
+    },
+    en: {}
+};
+
+let currentLanguage = DEFAULT_LANGUAGE;
+
+function normalizeLanguage(language) {
+    const shortLanguage = String(language || "").trim().slice(0, 2).toLowerCase();
+    return SUPPORTED_LANGUAGES.includes(shortLanguage) ? shortLanguage : DEFAULT_LANGUAGE;
+}
+
+function getStoredLanguage() {
+    try {
+        return window.localStorage.getItem(LANGUAGE_STORAGE_KEY);
+    } catch (error) {
+        return null;
+    }
+}
+
+function storeLanguage(language) {
+    try {
+        window.localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
+    } catch (error) {
+        return;
+    }
+}
+
+function detectBrowserLanguage() {
+    return normalizeLanguage(navigator.language || navigator.userLanguage || DEFAULT_LANGUAGE);
+}
+
+function t(key) {
+    return translations[currentLanguage]?.[key] ?? translations.en[key] ?? key;
+}
+
+function translateServerMessage(message) {
+    const originalMessage = String(message || "").trim();
+
+    if (!originalMessage || currentLanguage === "en") {
+        return originalMessage;
+    }
+
+    const exactMatch = serverMessageTranslations[currentLanguage]?.[originalMessage];
+
+    if (exactMatch) {
+        return exactMatch;
+    }
+
+    const minLengthMatch = originalMessage.match(/^Password must be at least (\d+) characters long\.$/);
+
+    if (minLengthMatch) {
+        return `Das Passwort muss mindestens ${minLengthMatch[1]} Zeichen lang sein.`;
+    }
+
+    const maxLengthMatch = originalMessage.match(/^Password must be at most (\d+) characters long\.$/);
+
+    if (maxLengthMatch) {
+        return `Das Passwort darf höchstens ${maxLengthMatch[1]} Zeichen lang sein.`;
+    }
+
+    return originalMessage;
+}
+
+function applyTextTranslations() {
+    document.documentElement.lang = currentLanguage;
+
+    document.querySelectorAll("[data-i18n]").forEach((element) => {
+        const translatedText = t(element.dataset.i18n);
+
+        if (element.tagName === "TITLE") {
+            element.textContent = translatedText;
+            return;
+        }
+
+        element.textContent = translatedText;
+    });
+
+    document.querySelectorAll("[data-i18n-aria-label]").forEach((element) => {
+        element.setAttribute("aria-label", t(element.dataset.i18nAriaLabel));
+    });
+
+    document.querySelectorAll("[data-i18n-loading-label]").forEach((element) => {
+        const translatedLoadingLabel = t(element.dataset.i18nLoadingLabel);
+        element.dataset.loadingLabel = translatedLoadingLabel;
+
+        if (element.dataset.loadingLabelApplied === "true") {
+            element.textContent = translatedLoadingLabel;
+        }
+    });
+
+    document.querySelectorAll(".message").forEach((element) => {
+        if (!element.dataset.originalText) {
+            element.dataset.originalText = element.textContent.trim();
+        }
+
+        element.textContent = translateServerMessage(element.dataset.originalText);
+    });
+
+    if (langSwitch) {
+        langSwitch.textContent = currentLanguage.toUpperCase();
+        langSwitch.setAttribute("aria-label", t("languageSwitchAria"));
+        langSwitch.title = currentLanguage === "de" ? "Switch to English" : "Zu Deutsch wechseln";
+    }
+}
+
+function setLanguage(language) {
+    currentLanguage = normalizeLanguage(language);
+    applyTextTranslations();
+    storeLanguage(currentLanguage);
+}
+
+setLanguage(getStoredLanguage() || detectBrowserLanguage());
+
+if (langSwitch) {
+    langSwitch.addEventListener("click", () => {
+        setLanguage(currentLanguage === "de" ? "en" : "de");
+    });
+}
+
 const magneticButtons = document.querySelectorAll(".magnetic");
 
 magneticButtons.forEach((button) => {
@@ -37,8 +258,8 @@ document.querySelectorAll("form").forEach((form) => {
 
         if (loadingLabel) {
             submitter.dataset.loadingLabelApplied = "true";
-            submitter.dataset.originalLabel = submitter.innerText;
-            submitter.innerText = loadingLabel;
+            submitter.dataset.originalLabel = submitter.textContent;
+            submitter.textContent = loadingLabel;
             submitter.style.opacity = "0.7";
         }
     });
@@ -52,7 +273,7 @@ document.querySelectorAll(".qr-code[data-qr-value]").forEach((container) => {
     }
 
     if (typeof window.QRCode !== "function") {
-        container.textContent = "QR preview could not be loaded.";
+        container.textContent = t("qrLoadError");
         return;
     }
 
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index c1c37c9..8e99d9c 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard</title>
+    <title data-i18n="pageTitle">Dashboard</title>
 
     <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
 </head>
@@ -13,26 +13,27 @@
     <nav class="dashboard-nav">
         <a class="brand" href="{{ url_for('main.home') }}">
             <span class="brand-mark">♛</span>
-            <span>8-Damen- und 8-Türme Solver</span>
+            <span data-i18n="navBrand">8-Damen- und 8-Türme Solver</span>
         </a>
 
         <div class="nav-actions">
-            <a class="nav-link" href="{{ url_for('main.dashboard') }}" id="navDashboardLink">Dashboard</a>
+            <a class="nav-link" href="{{ url_for('main.dashboard') }}" id="navDashboardLink"
+                data-i18n="navDashboard">Dashboard</a>
 
             <button class="nav-link-button lang-switch" id="langSwitch" type="button"
                 aria-label="Sprache wechseln">DE</button>
 
-            <a class="account-shortcut" href="{{ url_for('login.login_settings') }}"
+            <a class="account-shortcut" href="{{ url_for('login.login_settings') }}" data-i18n-aria-label="accountShortcutAria"
                 aria-label="Konto und Login-Einstellungen öffnen">
                 <span class="account-avatar" aria-hidden="true">{{ current_user.username[:1]|upper }}</span>
                 <span class="account-copy">
-                    <span class="account-label" id="accountLabel">Account</span>
+                    <span class="account-label" id="accountLabel" data-i18n="accountLabel">Account</span>
                     <span class="account-name">{{ current_user.username }}</span>
                 </span>
             </a>
 
             <form action="{{ url_for('login.logout') }}" method="post" class="nav-logout-form">
-                <button class="nav-link-button" type="submit">Logout</button>
+                <button class="nav-link-button" type="submit" data-i18n="navLogout">Logout</button>
             </form>
         </div>
     </nav>
@@ -43,7 +44,7 @@
         <span class="settings-trigger-label" id="settingsTriggerLabel">Brett-Einstellungen</span>
     </button>
 
-    <div class="container">
+        <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         <div class="flash-stack">
@@ -55,16 +56,22 @@
         {% endwith %}
 
         <section class="dashboard-intro card">
-            <p class="section-kicker" id="introKicker">Puzzle-Modus</p>
-            <h1 id="introTitle">Wähl deinen Modus und löse das Brett auf deine Art.</h1>
-            <p class="dashboard-intro-text" id="introText">
+            <p class="section-kicker" id="introKicker" data-i18n="introKicker">Puzzle-Modus</p>
+            <h1 id="introTitle" data-i18n="introTitle">Wähl deinen Modus und löse das Brett auf deine Art.</h1>
+            <p class="dashboard-intro-text" id="introText" data-i18n="introText">
                 Wechsle zwischen Damen und Türmen, nutze Animation oder Sofort-Lösung und öffne die
                 Brett-Einstellungen jederzeit über den linken Seiten-Tab.
             </p>
 
-            <div class="mode-switch" aria-label="Spielmodus">
-                <button class="btn active" onclick="setMode('queens')" id="btnQueens" type="button">♛ Damen</button>
-                <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks" type="button">♜ Tuerme</button>
+            <div class="mode-switch" data-i18n-aria-label="modeSwitchAria" aria-label="Spielmodus">
+                <button class="btn active" onclick="setMode('queens')" id="btnQueens" type="button">
+                    <span aria-hidden="true">♛</span>
+                    <span data-i18n="btnQueens">Damen</span>
+                </button>
+                <button class="btn secondary" onclick="setMode('rooks')" id="btnRooks" type="button">
+                    <span aria-hidden="true">♜</span>
+                    <span data-i18n="btnRooks">Türme</span>
+                </button>
             </div>
         </section>
 
@@ -79,6 +86,7 @@
                 </div>
 
                 <button class="info-button" id="infoButton" onclick="toggleInfoModal(true)" type="button"
+                    data-i18n="infoButton" data-i18n-aria-label="infoButton"
                     aria-label="Spielregeln und Hilfe anzeigen">Regeln & Hilfe</button>
             </div>
 
@@ -87,17 +95,17 @@
                 <span id="boardSizeValue">8</span> x <span id="boardSizeValueMirror">8</span>
             </p>
 
-            <div class="game-stats" aria-label="Spielstatus">
+            <div class="game-stats" data-i18n-aria-label="gameStatsAria" aria-label="Spielstatus">
                 <article class="game-stat-card">
-                    <p class="game-stat-label" id="stepsLabel">Schritte</p>
+                    <p class="game-stat-label" id="stepsLabel" data-i18n="stepsLabel">Schritte</p>
                     <p class="game-stat-value" id="stepCounterValue">0</p>
                 </article>
                 <article class="game-stat-card">
-                    <p class="game-stat-label" id="timeLabel">Zeit</p>
+                    <p class="game-stat-label" id="timeLabel" data-i18n="timeLabel">Zeit</p>
                     <p class="game-stat-value" id="timerValue">00:00:00</p>
                 </article>
                 <article class="game-stat-card">
-                    <p class="game-stat-label" id="statusLabel">Status</p>
+                    <p class="game-stat-label" id="statusLabel" data-i18n="statusLabel">Status</p>
                     <p class="game-stat-value game-stat-status" id="gameProgressState">Läuft</p>
                 </article>
             </div>
@@ -112,20 +120,21 @@
             <div class="board" id="board"></div>
 
             <div class="controls">
-                <button class="btn secondary" onclick="resetBoard()" id="btnReset" type="button">Brett
+                <button class="btn secondary" onclick="resetBoard()" id="btnReset" type="button" data-i18n="btnReset">Brett
                     zuruecksetzen</button>
                 <div class="controls-save-row">
-                    <button class="btn" onclick="openSavePanel()" id="btnSave" type="button">Speichern</button>
+                    <button class="btn" onclick="openSavePanel()" id="btnSave" type="button"
+                        data-i18n="btnSave">Speichern</button>
                     <button class="btn secondary" onclick="openSavePointsPanel()" id="btnLoad"
-                        type="button">Save-Points</button>
+                        type="button" data-i18n="btnLoad">Save-Points</button>
                 </div>
             </div>
 
             <div class="solver-panel">
                 <div class="solver-panel-header">
                     <div>
-                        <p class="section-kicker" id="solverKicker">Solver</p>
-                        <h3 id="solverTitle">Lösungswerkzeuge</h3>
+                        <p class="section-kicker" id="solverKicker" data-i18n="solverKicker">Solver</p>
+                        <h3 id="solverTitle" data-i18n="solverTitle">Lösungswerkzeuge</h3>
                         <p class="solver-message" id="solverMessage">Bereite einen Ablauf vor und spiele ihn Schritt
                             für Schritt ab.</p>
                     </div>
@@ -134,24 +143,24 @@
 
                 <div class="solver-groups">
                     <section class="solver-group">
-                        <h4 id="animationSolverTitle">Animations-Solver</h4>
-                        <p class="solver-group-text" id="animationSolverText">
+                        <h4 id="animationSolverTitle" data-i18n="animationSolverTitle">Animations-Solver</h4>
+                        <p class="solver-group-text" id="animationSolverText" data-i18n="animationSolverText">
                             Bereite den Lösungsweg vor, gehe ihn manüll Schritt für Schritt durch oder spiele die
                             Animation automatisch ab.
                         </p>
 
                         <div class="solver-controls">
                             <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve"
-                                type="button">Animation vorbereiten</button>
+                                type="button" data-i18n="btnPrepareSolve">Animation vorbereiten</button>
                             <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep"
-                                type="button">Nächster Schritt</button>
+                                type="button" data-i18n="btnNextStep">Nächster Schritt</button>
                             <button class="btn secondary" onclick="toggleSolverPlayback()" id="btnPlayPause"
-                                type="button">Animation abspielen</button>
+                                type="button" data-i18n="btnPlayPause">Animation abspielen</button>
                         </div>
 
                         <div class="solver-speed">
                             <label class="solver-speed-label" id="solverSpeedLabel"
-                                for="solverSpeedInput">Animationsgeschwindigkeit</label>
+                                for="solverSpeedInput" data-i18n="solverSpeedLabel">Animationsgeschwindigkeit</label>
                             <input id="solverSpeedInput" type="range" min="80" max="900" step="20" value="320"
                                 oninput="updateSolverSpeed(this.value)">
                             <span class="solver-speed-value" id="solverSpeedValue">320 ms</span>
@@ -159,14 +168,14 @@
                     </section>
 
                     <section class="solver-group instant-solver-group">
-                        <h4 id="instantSolverTitle">Sofort-Lösung</h4>
-                        <p class="solver-group-text" id="instantSolverText">
+                        <h4 id="instantSolverTitle" data-i18n="instantSolverTitle">Sofort-Lösung</h4>
+                        <p class="solver-group-text" id="instantSolverText" data-i18n="instantSolverText">
                             Lade direkt eine gültige Lösung, ohne Zwischenschritte oder Animation.
                         </p>
 
                         <div class="instant-solver-actions">
                             <button class="btn accent" onclick="instantSolve()" id="btnInstantSolve"
-                                type="button">Sofort lösen</button>
+                                type="button" data-i18n="btnInstantSolve">Sofort lösen</button>
                         </div>
                     </section>
                 </div>
@@ -184,32 +193,32 @@
         <div class="card">
             <div class="history-header">
                 <div>
-                    <p class="section-kicker" id="historyKicker">Save-Points</p>
-                    <h3 id="historyTitle">Gespeicherte Zeiten und Fortschritte</h3>
-                    <p class="history-subtitle" id="historySubtitle">Die Tabelle zeigt gespeicherte Save-Points mit
+                    <p class="section-kicker" id="historyKicker" data-i18n="historyKicker">Save-Points</p>
+                    <h3 id="historyTitle" data-i18n="historyTitle">Gespeicherte Zeiten und Fortschritte</h3>
+                    <p class="history-subtitle" id="historySubtitle" data-i18n="historySubtitle">Die Tabelle zeigt gespeicherte Save-Points mit
                         Zeit, Schritten und
                         Status.</p>
                 </div>
                 <button class="btn secondary" onclick="refreshTimeHistory()" id="btnRefreshHistory"
-                    type="button">Aktualisieren</button>
+                    type="button" data-i18n="btnRefreshHistory">Aktualisieren</button>
             </div>
 
             <div class="history-table-wrapper">
                 <table class="history-table">
                     <thead>
                         <tr>
-                            <th id="historyHeadSave">Save-Point</th>
-                            <th id="historyHeadMode">Modus</th>
-                            <th id="historyHeadBoard">Brett</th>
-                            <th id="historyHeadSteps">Schritte</th>
-                            <th id="historyHeadTime">Zeit</th>
-                            <th id="historyHeadStatus">Status</th>
-                            <th id="historyHeadSaved">Gespeichert</th>
+                            <th id="historyHeadSave" data-i18n="historyHeadSave">Save-Point</th>
+                            <th id="historyHeadMode" data-i18n="historyHeadMode">Modus</th>
+                            <th id="historyHeadBoard" data-i18n="historyHeadBoard">Brett</th>
+                            <th id="historyHeadSteps" data-i18n="historyHeadSteps">Schritte</th>
+                            <th id="historyHeadTime" data-i18n="historyHeadTime">Zeit</th>
+                            <th id="historyHeadStatus" data-i18n="historyHeadStatus">Status</th>
+                            <th id="historyHeadSaved" data-i18n="historyHeadSaved">Gespeichert</th>
                         </tr>
                     </thead>
                     <tbody id="timeHistoryTableBody">
                         <tr>
-                            <td colspan="7" class="history-empty">Noch keine gespeicherten Zeiten vorhanden.</td>
+                            <td colspan="7" class="history-empty" data-i18n="historyEmpty">Noch keine gespeicherten Zeiten vorhanden.</td>
                         </tr>
                     </tbody>
                 </table>
@@ -219,90 +228,90 @@
 
     <aside class="sidebar settings-sidebar" id="settingsSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3 id="settingsSidebarTitle">Brett-Einstellungen</h3>
+            <h3 id="settingsSidebarTitle" data-i18n="settingsSidebarTitle">Brett-Einstellungen</h3>
             <button class="btn secondary sidebar-close" onclick="toggleSidebar(false)" id="settingsSidebarClose"
-                type="button">Schliessen</button>
+                type="button" data-i18n="settingsSidebarClose">Schliessen</button>
         </div>
 
-        <p id="settingsSidebarText">Passe die Brettgrösse zwischen 4 und 13 an.</p>
+        <p id="settingsSidebarText" data-i18n="settingsSidebarText">Passe die Brettgrösse zwischen 4 und 13 an.</p>
 
-        <label class="sidebar-label" id="boardSizeInputLabel" for="boardSizeInput">Grösse</label>
+        <label class="sidebar-label" id="boardSizeInputLabel" for="boardSizeInput" data-i18n="boardSizeInputLabel">Grösse</label>
         <input id="boardSizeInput" type="range" min="4" max="13" value="8" oninput="previewBoardSize(this.value)">
         <div class="sidebar-size-row">
             <strong><span id="sidebarBoardSizeValue">8</span> x <span id="sidebarBoardSizeValueMirror">8</span></strong>
         </div>
 
-        <button class="btn" onclick="applyBoardSize()" id="applyBoardSizeButton" type="button">Grösse anwenden</button>
-        <p class="sidebar-hint" id="settingsSidebarHint">Beim Ändern wird das Brett zur Sicherheit zurückgesetzt. Auf
+        <button class="btn" onclick="applyBoardSize()" id="applyBoardSizeButton" type="button" data-i18n="applyBoardSizeButton">Grösse anwenden</button>
+        <p class="sidebar-hint" id="settingsSidebarHint" data-i18n="settingsSidebarHint">Beim Ändern wird das Brett zur Sicherheit zurückgesetzt. Auf
             dem Handy ist 8x8 eingeplant, grössere Bretter können abgeschnitten wirken.</p>
     </aside>
 
     <aside class="sidebar save-sidebar" id="saveSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3 id="saveSidebarTitle">Speicherpunkt</h3>
+            <h3 id="saveSidebarTitle" data-i18n="saveSidebarTitle">Speicherpunkt</h3>
             <button class="btn secondary sidebar-close" onclick="toggleSavePanel(false)" id="saveSidebarClose"
-                type="button">Schliessen</button>
+                type="button" data-i18n="saveSidebarClose">Schliessen</button>
         </div>
 
-        <p id="saveSidebarText">Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
+        <p id="saveSidebarText" data-i18n="saveSidebarText">Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
 
-        <label class="sidebar-label" id="saveNameLabel" for="saveNameInput">Name</label>
+        <label class="sidebar-label" id="saveNameLabel" for="saveNameInput" data-i18n="saveNameLabel">Name</label>
         <input class="sidebar-input" id="saveNameInput" type="text" maxlength="80"
-            placeholder="z. B. Fast gelöste Dame 8x8">
+            placeholder="z. B. Fast gelöste Dame 8x8" data-i18n-placeholder="saveNamePlaceholder">
 
-        <label class="sidebar-label" id="saveNoteLabel" for="saveNoteInput">Notiz</label>
+        <label class="sidebar-label" id="saveNoteLabel" for="saveNoteInput" data-i18n="saveNoteLabel">Notiz</label>
         <textarea class="sidebar-input sidebar-textarea" id="saveNoteInput" rows="4" maxlength="240"
-            placeholder="z. B. Gute Startposition für Türmetest"></textarea>
+            placeholder="z. B. Gute Startposition für Türmetest" data-i18n-placeholder="saveNotePlaceholder"></textarea>
 
         <label class="sidebar-checkbox">
             <input id="saveFavoriteInput" type="checkbox">
-            <span id="saveFavoriteLabel">Als Favorit markieren</span>
+            <span id="saveFavoriteLabel" data-i18n="saveFavoriteLabel">Als Favorit markieren</span>
         </label>
 
-        <button class="btn" onclick="saveGame()" id="saveNowButton" type="button">Jetzt speichern</button>
+        <button class="btn" onclick="saveGame()" id="saveNowButton" type="button" data-i18n="saveNowButton">Jetzt speichern</button>
     </aside>
 
     <aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
         <div class="sidebar-header">
-            <h3 id="savePointsSidebarTitle">Save-Points</h3>
+            <h3 id="savePointsSidebarTitle" data-i18n="savePointsSidebarTitle">Save-Points</h3>
             <button class="btn secondary sidebar-close" onclick="toggleSavePointsPanel(false)"
-                id="savePointsSidebarClose" type="button">Schliessen</button>
+                id="savePointsSidebarClose" type="button" data-i18n="savePointsSidebarClose">Schliessen</button>
         </div>
 
-        <p id="savePointsSidebarText">Wähle einen Speicherstand aus der Liste.</p>
+        <p id="savePointsSidebarText" data-i18n="savePointsSidebarText">Wähle einen Speicherstand aus der Liste.</p>
 
         <div class="save-point-filters">
-            <label class="sidebar-label" id="savePointModeFilterLabel" for="savePointModeFilter">Modus</label>
+            <label class="sidebar-label" id="savePointModeFilterLabel" for="savePointModeFilter" data-i18n="savePointModeFilterLabel">Modus</label>
             <select class="sidebar-input" id="savePointModeFilter" onchange="refreshSavePoints()">
-                <option value="all">Alle</option>
-                <option value="queens">Damen</option>
-                <option value="rooks">Türme</option>
+                <option value="all" data-i18n="filterAll">Alle</option>
+                <option value="queens" data-i18n="filterQueens">Damen</option>
+                <option value="rooks" data-i18n="filterRooks">Türme</option>
             </select>
 
-            <label class="sidebar-label" id="savePointSizeFilterLabel" for="savePointSizeFilter">Brettgrösse</label>
+            <label class="sidebar-label" id="savePointSizeFilterLabel" for="savePointSizeFilter" data-i18n="savePointSizeFilterLabel">Brettgrösse</label>
             <select class="sidebar-input" id="savePointSizeFilter" onchange="refreshSavePoints()">
-                <option value="all">Alle</option>
+                <option value="all" data-i18n="filterAll">Alle</option>
                 {% for board_size in range(4, 14) %}
                 <option value="{{ board_size }}">{{ board_size }} x {{ board_size }}</option>
                 {% endfor %}
             </select>
 
-            <label class="sidebar-label" id="savePointSortFilterLabel" for="savePointSortFilter">Sortierung</label>
+            <label class="sidebar-label" id="savePointSortFilterLabel" for="savePointSortFilter" data-i18n="savePointSortFilterLabel">Sortierung</label>
             <select class="sidebar-input" id="savePointSortFilter" onchange="refreshSavePoints()">
-                <option value="newest">Neueste zuerst</option>
-                <option value="oldest">älteste zuerst</option>
-                <option value="updated">Zuletzt bearbeitet</option>
-                <option value="favorites">Favoriten zuerst</option>
+                <option value="newest" data-i18n="filterNewest">Neueste zuerst</option>
+                <option value="oldest" data-i18n="filterOldest">älteste zuerst</option>
+                <option value="updated" data-i18n="filterUpdated">Zuletzt bearbeitet</option>
+                <option value="favorites" data-i18n="filterFavorites">Favoriten zuerst</option>
             </select>
 
             <label class="sidebar-checkbox">
                 <input id="savePointFavoritesOnly" type="checkbox" onchange="refreshSavePoints()">
-                <span id="savePointFavoritesOnlyLabel">Nur Favoriten anzeigen</span>
+                <span id="savePointFavoritesOnlyLabel" data-i18n="savePointFavoritesOnlyLabel">Nur Favoriten anzeigen</span>
             </label>
         </div>
 
         <div class="save-points-list" id="savePointsList">
-            <p class="sidebar-hint" id="savePointsEmptyState">Noch keine Speicherstände gefunden.</p>
+            <p class="sidebar-hint" id="savePointsEmptyState" data-i18n="savePointsEmptyState">Noch keine Speicherstände gefunden.</p>
         </div>
     </aside>
 
@@ -315,13 +324,13 @@
         <div class="modal-header">
             <h3 id="infoModalTitle">Spielregeln und Acht-Damen-Problem</h3>
             <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)"
-                type="button">Schliessen</button>
+                type="button" data-i18n="infoModalClose">Schliessen</button>
         </div>
 
         <div class="modal-content">
-            <p>Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine Konflikte.</p>
+            <p data-i18n="infoModalIntro">Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine Konflikte.</p>
 
-            <h4>So funktioniert der aktuelle Modus</h4>
+            <h4 data-i18n="infoModalModeHeading">So funktioniert der aktuelle Modus</h4>
             <p id="infoModeRuleText">Im Damen-Modus dürfen sich Damen weder in derselben Spalte noch diagonal
                 angreifen. Mit einem Klick setzt oder entfernst du eine Figur.</p>
 
@@ -330,8 +339,8 @@
                 auf einem 8x8-Brett, bei der sich keine zwei Damen schlagen. Es ist ein bekanntes Beispiel für
                 kombinatorische Suche und Backtracking.</p>
 
-            <h4>Was zeigen Zeit und Schritte?</h4>
-            <p>Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das aktuelle Spiel weiter,
+            <h4 data-i18n="infoModalTimeHeading">Was zeigen Zeit und Schritte?</h4>
+            <p data-i18n="infoModalTimeText">Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das aktuelle Spiel weiter,
                 auch wenn du die Seite neu lädst. Beim Speichern werden Zeit und Schritte zusammen mit dem
                 Save-Point abgelegt.</p>
         </div>
@@ -340,4 +349,4 @@
     <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/templates/login_settings.html b/app/templates/login_settings.html
index fe85391..ae87425 100644
--- a/app/templates/login_settings.html
+++ b/app/templates/login_settings.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Settings</title>
+    <title data-i18n="pageTitle">Login Settings</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" defer></script>
 </head>
@@ -13,22 +13,33 @@
     <nav class="auth-nav">
         <a class="brand" href="{{ url_for('main.home') }}">
             <span class="brand-mark">♛</span>
-            <span>8-Damen- und 8-Tuerme Solver</span>
+            <span data-i18n="navBrand">8-Damen- und 8-Türme Solver</span>
         </a>
 
         <ul class="nav-links">
-            <li><a href="{{ url_for('main.dashboard') }}">Dashboard</a></li>
-            <li><a href="{{ url_for('login.login_settings') }}">Login settings</a></li>
+            <li><a href="{{ url_for('main.dashboard') }}" data-i18n="navDashboard">Dashboard</a></li>
+            <li><a href="{{ url_for('login.login_settings') }}" data-i18n="navSettings">Login settings</a></li>
         </ul>
         <form action="{{ url_for('login.logout') }}" method="post" class="nav-form">
-            <button type="submit" class="nav-button">Logout</button>
+            <button type="submit" class="nav-button" id="logoutButton" data-i18n="navLogout">Logout</button>
         </form>
     </nav>
 
     <main class="auth-shell settings-shell">
         <section class="auth-panel settings-panel">
-            <h1>Login settings</h1>
-            <p class="muted">Manage authenticator app 2FA and your password without changing the registration flow.</p>
+            <div class="settings-topbar">
+                <a class="back-link" href="{{ url_for('main.dashboard') }}" data-i18n-aria-label="backToDashboardAria"
+                    aria-label="Back to dashboard">
+                    <span class="back-link-arrow" aria-hidden="true">&larr;</span>
+                    <span data-i18n="backToDashboard">Back to dashboard</span>
+                </a>
+
+                <button class="nav-button lang-switch" id="langSwitch" type="button" aria-label="Switch language">DE</button>
+            </div>
+
+            <h1 data-i18n="settingsTitle">Login settings</h1>
+            <p class="muted" data-i18n="settingsSubtitle">Manage authenticator app 2FA and your password without
+                changing the registration flow.</p>
 
             {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
@@ -47,76 +58,95 @@
                 <form action="{{ url_for('login.login_settings') }}" method="post">
                     <input type="hidden" name="action" value="disable_two_factor">
 
-                    <h2>Authenticator app 2FA</h2>
-                    <p class="field-hint">2FA is currently enabled for this account.</p>
-                    <p class="field-hint">Use Google Authenticator, Microsoft Authenticator, Authy, or another TOTP app to generate your 6-digit login codes.</p>
+                    <h2 data-i18n="twoFactorTitle">Authenticator app 2FA</h2>
+                    <p class="field-hint" data-i18n="twoFactorEnabledHint">2FA is currently enabled for this account.</p>
+                    <p class="field-hint" data-i18n="twoFactorEnabledAppHint">Use Google Authenticator, Microsoft
+                        Authenticator, Authy, or another TOTP app
+                        to generate your 6-digit login codes.</p>
 
-                    <button class="secondary-button" type="submit" data-loading-label="Disabling 2FA...">Disable 2FA</button>
+                    <button class="secondary-button" type="submit" data-loading-label="Disabling 2FA..."
+                        data-i18n="disableTwoFactorButton" data-i18n-loading-label="disableTwoFactorLoading">Disable
+                        2FA</button>
                 </form>
                 {% elif pending_two_factor_secret %}
                 <form action="{{ url_for('login.login_settings') }}" method="post">
                     <input type="hidden" name="action" value="confirm_two_factor_setup">
 
-                    <h2>Finish 2FA setup</h2>
-                    <p class="field-hint">Scan this QR code with your authenticator app, then enter the current 6-digit code to confirm.</p>
+                    <h2 data-i18n="finishSetupTitle">Finish 2FA setup</h2>
+                    <p class="field-hint" data-i18n="finishSetupHint">Scan this QR code with your authenticator app,
+                        then enter the current 6-digit
+                        code to confirm.</p>
 
                     <div class="qr-panel">
                         <div class="qr-code" data-qr-value="{{ pending_two_factor_uri }}"></div>
                     </div>
-                    <p class="field-hint">If scanning does not work, you can still use the manual setup key below.</p>
+                    <p class="field-hint" data-i18n="scanFallbackHint">If scanning does not work, you can still use the
+                        manual setup key below.</p>
 
-                    <label for="two_factor_secret">Manual setup key</label>
+                    <label for="two_factor_secret" data-i18n="manualSetupKey">Manual setup key</label>
                     <input id="two_factor_secret" type="text" value="{{ pending_two_factor_secret }}" readonly>
 
-                    <label for="two_factor_uri">Setup URI</label>
+                    <label for="two_factor_uri" data-i18n="setupUriLabel">Setup URI</label>
                     <input id="two_factor_uri" type="text" value="{{ pending_two_factor_uri }}" readonly>
-                    <p class="field-hint">This URI is used to generate the QR setup and can be copied as a fallback for compatible apps.</p>
+                    <p class="field-hint" data-i18n="setupUriHint">This URI is used to generate the QR setup and can be
+                        copied as a fallback for
+                        compatible apps.</p>
 
-                    <label for="code">Authenticator code</label>
-                    <input id="code" type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required>
+                    <label for="code" data-i18n="authenticatorCodeLabel">Authenticator code</label>
+                    <input id="code" type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
+                        required>
 
                     <div class="button-row">
-                        <button class="magnetic" type="submit" data-loading-label="Enabling 2FA...">Confirm and enable</button>
+                        <button class="magnetic" type="submit" data-loading-label="Enabling 2FA..."
+                            data-i18n="confirmAndEnableButton" data-i18n-loading-label="confirmAndEnableLoading">Confirm and
+                            enable</button>
                     </div>
                 </form>
 
                 <form action="{{ url_for('login.login_settings') }}" method="post">
                     <input type="hidden" name="action" value="cancel_two_factor_setup">
 
-                    <h2>Cancel setup</h2>
-                    <p class="field-hint">Cancel the current authenticator setup if you want to restart with a new secret.</p>
+                    <h2 data-i18n="cancelSetupTitle">Cancel setup</h2>
+                    <p class="field-hint" data-i18n="cancelSetupHint">Cancel the current authenticator setup if you want
+                        to restart with a new
+                        secret.</p>
 
-                    <button class="secondary-button" type="submit">Cancel setup</button>
+                    <button class="secondary-button" type="submit" data-i18n="cancelSetupButton">Cancel setup</button>
                 </form>
                 {% else %}
                 <form action="{{ url_for('login.login_settings') }}" method="post">
                     <input type="hidden" name="action" value="start_two_factor_setup">
 
-                    <h2>Authenticator app 2FA</h2>
-                    <p class="field-hint">Protect your account with 6-digit codes from an authenticator app.</p>
-                    <p class="field-hint">After starting setup, you will get a QR code to scan and then confirm once with a live code.</p>
+                    <h2 data-i18n="twoFactorTitle">Authenticator app 2FA</h2>
+                    <p class="field-hint" data-i18n="startSetupHint">Protect your account with 6-digit codes from an
+                        authenticator app.</p>
+                    <p class="field-hint" data-i18n="startSetupHintFollowup">After starting setup, you will get a QR code to scan and then confirm once
+                        with a live code.</p>
 
-                    <button class="magnetic" type="submit" data-loading-label="Starting setup...">Start setup</button>
+                    <button class="magnetic" type="submit" data-loading-label="Starting setup..."
+                        data-i18n="startSetupButton" data-i18n-loading-label="startSetupLoading">Start setup</button>
                 </form>
                 {% endif %}
 
                 <form action="{{ url_for('login.login_settings') }}" method="post">
                     <input type="hidden" name="action" value="password">
 
-                    <h2>Change password</h2>
+                    <h2 data-i18n="changePasswordTitle">Change password</h2>
 
-                    <label for="current_password">Current password</label>
+                    <label for="current_password" data-i18n="currentPasswordLabel">Current password</label>
                     <input id="current_password" type="password" name="current_password" minlength="8" maxlength="128"
                         required>
 
-                    <label for="new_password">New password</label>
+                    <label for="new_password" data-i18n="newPasswordLabel">New password</label>
                     <input id="new_password" type="password" name="new_password" minlength="8" maxlength="128" required>
 
-                    <label for="confirm_password">Confirm new password</label>
+                    <label for="confirm_password" data-i18n="confirmPasswordLabel">Confirm new password</label>
                     <input id="confirm_password" type="password" name="confirm_password" minlength="8" maxlength="128"
                         required>
 
-                    <button class="magnetic" type="submit" data-loading-label="Updating password...">Update password</button>
+                    <button class="magnetic" type="submit" data-loading-label="Updating password..."
+                        data-i18n="updatePasswordButton" data-i18n-loading-label="updatePasswordLoading">Update
+                        password</button>
                 </form>
             </div>
         </section>

From 26e4d0dd274bf101e875820713c6dbe3ccd1780a Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Tue, 7 Apr 2026 17:42:51 +0200
Subject: [PATCH 13/15] Issue #17 Added imprint and privacy policy page and
 added englisch language support to it.

imprint still unfinished
---
 app/routes/main_routes.py            |  10 ++
 app/static/css/dashboard.css         |   1 +
 app/static/css/footer.css            | 111 ++++++++++++
 app/static/css/legal.css             | 220 ++++++++++++++++++++++++
 app/static/css/login.css             |   5 +-
 app/static/js/dashboard.js           |  12 +-
 app/static/js/index.js               |  23 ++-
 app/static/js/legal.js               | 242 +++++++++++++++++++++++++++
 app/static/js/login.js               |  12 +-
 app/templates/dashboard.html         |   3 +
 app/templates/impressum.html         |  82 +++++++++
 app/templates/index.html             |   5 +-
 app/templates/login.html             |   3 +
 app/templates/login_settings.html    |   3 +
 app/templates/partials/footer.html   |  12 ++
 app/templates/privacy.html           | 132 +++++++++++++++
 app/templates/sign_up.html           |   3 +
 app/templates/two_factor_verify.html |   3 +
 18 files changed, 872 insertions(+), 10 deletions(-)
 create mode 100644 app/static/css/footer.css
 create mode 100644 app/static/css/legal.css
 create mode 100644 app/static/js/legal.js
 create mode 100644 app/templates/impressum.html
 create mode 100644 app/templates/partials/footer.html
 create mode 100644 app/templates/privacy.html

diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index fbb0f29..321b5e7 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -236,6 +236,16 @@ def dashboard():
     return render_template("dashboard.html", user=current_user)
 
 
+@main_bp.route("/privacy_policy")
+def privacy_policy():
+    return render_template("privacy.html")
+
+
+@main_bp.route("/imprint")
+def imprint():
+    return render_template("impressum.html")
+
+
 @main_bp.route("/check", methods=["POST"])
 def check():
     data = request.json
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index a1a6404..75accb6 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -117,6 +117,7 @@ textarea {
 
 .lang-switch {
     min-width: 68px;
+    border-color: rgba(231, 191, 119, 0.45);
 }
 
 .nav-link:hover,
diff --git a/app/static/css/footer.css b/app/static/css/footer.css
new file mode 100644
index 0000000..b6a3203
--- /dev/null
+++ b/app/static/css/footer.css
@@ -0,0 +1,111 @@
+:root {
+    --footer-surface: rgba(18, 33, 45, 0.94);
+    --footer-line: rgba(231, 191, 119, 0.28);
+    --footer-text: #f7f1e6;
+    --footer-muted: rgba(247, 241, 230, 0.72);
+    --footer-link-bg: rgba(255, 255, 255, 0.06);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+body > main,
+body > .container {
+    flex: 1 0 auto;
+}
+
+body > main.auth-shell {
+    min-height: 0;
+}
+
+.page-footer {
+    margin-top: 32px;
+    border-top: 1px solid var(--footer-line);
+    background:
+        linear-gradient(180deg, rgba(17, 29, 39, 0.98), rgba(31, 49, 64, 0.96));
+    color: var(--footer-text);
+    box-shadow: 0 -18px 40px rgba(31, 49, 64, 0.08);
+}
+
+.page-footer-inner {
+    width: min(1200px, calc(100vw - 32px));
+    margin: 0 auto;
+    padding: 26px 0 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.page-footer-copy {
+    display: grid;
+    gap: 10px;
+}
+
+.page-footer-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.page-footer-mark {
+    width: 38px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #c68b2c, #e7bf77);
+    color: #2c2215;
+    font-size: 21px;
+}
+
+.page-footer-text {
+    margin: 0;
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    color: var(--footer-muted);
+    line-height: 1.6;
+}
+
+.page-footer-links {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.page-footer-links a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    padding: 10px 16px;
+    border: 1px solid rgba(231, 191, 119, 0.24);
+    background: var(--footer-link-bg);
+    color: var(--footer-text);
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    font-weight: 700;
+    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.page-footer-links a:hover {
+    transform: translateY(-2px);
+    border-color: rgba(231, 191, 119, 0.45);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 760px) {
+    .page-footer-inner {
+        padding: 22px 0 26px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .page-footer-links {
+        justify-content: flex-start;
+    }
+}
diff --git a/app/static/css/legal.css b/app/static/css/legal.css
new file mode 100644
index 0000000..ee0fd99
--- /dev/null
+++ b/app/static/css/legal.css
@@ -0,0 +1,220 @@
+:root {
+    --bg: #f4efe7;
+    --surface: rgba(255, 250, 242, 0.9);
+    --surface-strong: #fffaf2;
+    --text: #1e1f1d;
+    --muted: #5f615c;
+    --navy: #1f3140;
+    --navy-soft: #324d63;
+    --gold: #c68b2c;
+    --gold-soft: #e7bf77;
+    --line: rgba(31, 49, 64, 0.12);
+    --shadow: 0 24px 60px rgba(37, 42, 48, 0.14);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    color: var(--text);
+    font-family: Georgia, "Times New Roman", serif;
+    background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 24%),
+        radial-gradient(circle at 82% 18%, rgba(198, 139, 44, 0.2), transparent 20%),
+        linear-gradient(180deg, #f7f0e5 0%, #efe5d5 52%, #f4efe7 100%);
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.legal-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.legal-nav {
+    width: 100%;
+    padding: 18px max(16px, calc((100vw - 1200px) / 2)) 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    border-right: 4px solid #12212d;
+    border-bottom: 4px solid #12212d;
+    border-left: 4px solid #12212d;
+    background: linear-gradient(180deg, rgba(17, 29, 39, 0.96), rgba(31, 49, 64, 0.94));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 18px 40px rgba(31, 49, 64, 0.18);
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    color: #fff7eb;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.brand-mark {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
+    color: #2c2215;
+    font-size: 22px;
+}
+
+.legal-nav-links {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    color: #ecf4fb;
+}
+
+.legal-nav-links a,
+.legal-nav-links .lang-switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 11px 16px;
+    border: 2px solid transparent;
+    background: rgba(255, 255, 255, 0.06);
+    font-weight: 700;
+    transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.lang-switch {
+    cursor: pointer;
+    border: 2px solid rgba(231, 191, 119, 0.45);
+    color: #ecf4fb;
+    appearance: none;
+}
+
+.legal-nav-links .lang-switch {
+    min-width: 68px;
+    font: inherit;
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.legal-nav-links a:hover {
+    transform: translateY(-2px);
+    border-color: rgba(231, 191, 119, 0.45);
+}
+
+.legal-nav-links .lang-switch:hover {
+    transform: translateY(-2px);
+    border-color: rgba(255, 222, 170, 0.85);
+}
+
+.legal-main {
+    width: min(980px, calc(100vw - 32px));
+    margin: 0 auto;
+    padding: 40px 0 56px;
+}
+
+.legal-hero {
+    margin-bottom: 24px;
+    padding: 34px;
+    border: 1px solid var(--line);
+    background: linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(245, 230, 205, 0.8));
+    box-shadow: var(--shadow);
+}
+
+.legal-eyebrow {
+    margin: 0 0 12px;
+    color: var(--navy-soft);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.legal-hero h1,
+.legal-card h2 {
+    margin-top: 0;
+    color: #182029;
+}
+
+.legal-hero h1 {
+    margin-bottom: 16px;
+    line-height: 0.98;
+    letter-spacing: -0.03em;
+    font-size: clamp(2.4rem, 4vw, 4.4rem);
+}
+
+.legal-lead,
+.legal-card p,
+.legal-list {
+    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+    color: var(--muted);
+    line-height: 1.7;
+}
+
+.legal-card {
+    margin-bottom: 20px;
+    padding: 28px 30px;
+    border: 1px solid var(--line);
+    background: rgba(255, 250, 242, 0.82);
+    box-shadow: var(--shadow);
+}
+
+.legal-note {
+    border-left: 6px solid var(--gold);
+    background: linear-gradient(135deg, rgba(255, 247, 235, 0.98), rgba(241, 221, 174, 0.3));
+}
+
+.legal-card h2 {
+    margin-bottom: 12px;
+    font-size: 1.45rem;
+}
+
+.legal-card p {
+    margin: 0;
+}
+
+.legal-card p+p,
+.legal-card p+.legal-list,
+.legal-list+p {
+    margin-top: 14px;
+}
+
+.legal-list {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.legal-list li+li {
+    margin-top: 8px;
+}
+
+@media (max-width: 760px) {
+    .legal-nav {
+        padding-left: 16px;
+        padding-right: 16px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .legal-main {
+        padding-top: 28px;
+    }
+
+    .legal-hero,
+    .legal-card {
+        padding: 24px 22px;
+    }
+}
diff --git a/app/static/css/login.css b/app/static/css/login.css
index cd2b5de..f86f1c0 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -191,8 +191,7 @@ a {
 #logoutButton {
     margin-top: 0;
     min-height: 40px;
-    padding: 8px 14px;
-    border-radius: 999px;
+    padding: 11px 16px;
     font-size: 14px;
     line-height: 1.1;
 }
@@ -200,7 +199,7 @@ a {
 .lang-switch {
     min-width: 58px;
     background: rgba(31, 49, 64, 0.08);
-    border: 1px solid rgba(31, 49, 64, 0.12);
+    border: 2px solid rgba(31, 49, 64, 0.18);
     color: var(--navy);
 }
 
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index 8254d10..ab320cc 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -278,7 +278,11 @@ const translations = {
         filterRooks: "Türme",
         solverStepInfo: ({ currentStep, totalSteps }) => `Schritt ${currentStep} / ${totalSteps}`,
         speedValue: ({ speed }) => `${speed} ms`,
-        languageSwitchAria: "Sprache wechseln"
+        languageSwitchAria: "Sprache wechseln",
+        footerText: "Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.",
+        footerPrivacy: "Datenschutzerklärung",
+        footerImprint: "Impressum",
+        footerNavAria: "Rechtliche Hinweise"
     },
     en: {
         pageTitle: "Dashboard",
@@ -425,7 +429,11 @@ const translations = {
         filterRooks: "Rooks",
         solverStepInfo: ({ currentStep, totalSteps }) => `Step ${currentStep} / ${totalSteps}`,
         speedValue: ({ speed }) => `${speed} ms`,
-        languageSwitchAria: "Switch language"
+        languageSwitchAria: "Switch language",
+        footerText: "School project about the Eight Queens and Eight Rooks problem.",
+        footerPrivacy: "Privacy Policy",
+        footerImprint: "Imprint",
+        footerNavAria: "Legal information"
     }
 };
 
diff --git a/app/static/js/index.js b/app/static/js/index.js
index 0722145..c2e7b1f 100644
--- a/app/static/js/index.js
+++ b/app/static/js/index.js
@@ -55,7 +55,11 @@ const translations = {
         "cta.title": "Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.",
         "cta.text": "Starte mit einem Account, speichere deine Zwischenstände und finde heraus, wie schnell du eine konfliktfreie Lösung erreichst.",
         "cta.primaryCta": "Create Account",
-        "cta.secondaryCta": "Login"
+        "cta.secondaryCta": "Login",
+        "footerText": "Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.",
+        "footerPrivacy": "Datenschutzerklärung",
+        "footerImprint": "Impressum",
+        "footerNavAria": "Rechtliche Hinweise"
     },
     en: {
         "meta.title": "8 Queens and 8 Rooks Solver",
@@ -107,7 +111,11 @@ const translations = {
         "cta.title": "Turn a famous puzzle into a visible learning experience.",
         "cta.text": "Start with an account, save your checkpoints, and find out how quickly you can reach a conflict-free solution.",
         "cta.primaryCta": "Create Account",
-        "cta.secondaryCta": "Login"
+        "cta.secondaryCta": "Login",
+        "footerText": "School project about the Eight Queens and Eight Rooks problem.",
+        "footerPrivacy": "Privacy Policy",
+        "footerImprint": "Imprint",
+        "footerNavAria": "Legal information"
     }
 };
 
@@ -169,6 +177,17 @@ function setLanguage(language) {
         element.textContent = translatedText;
     });
 
+    document.querySelectorAll("[data-i18n-aria-label]").forEach((element) => {
+        const key = element.dataset.i18nAriaLabel;
+        const translatedText = dictionary[key];
+
+        if (!translatedText) {
+            return;
+        }
+
+        element.setAttribute("aria-label", translatedText);
+    });
+
     if (langSwitch) {
         langSwitch.textContent = resolvedLanguage.toUpperCase();
         langSwitch.setAttribute("aria-label", resolvedLanguage === "de" ? "Switch language to English" : "Sprache auf Deutsch wechseln");
diff --git a/app/static/js/legal.js b/app/static/js/legal.js
new file mode 100644
index 0000000..d8869fd
--- /dev/null
+++ b/app/static/js/legal.js
@@ -0,0 +1,242 @@
+const SUPPORTED_LANGUAGES = ["de", "en"];
+const DEFAULT_LANGUAGE = "de";
+const LANGUAGE_STORAGE_KEY = "preferredLanguage";
+
+const langSwitch = document.getElementById("langSwitch");
+const legalPage = document.body.dataset.legalPage;
+
+const translations = {
+    de: {
+        common: {
+            navBrand: "8-Damen- und 8-Türme Solver",
+            navHome: "Startseite",
+            navDashboard: "Dashboard",
+            navLogin: "Login",
+            heroEyebrow: "Rechtliche Hinweise",
+            footerText: "Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.",
+            footerPrivacy: "Datenschutzerklärung",
+            footerImprint: "Impressum",
+            footerNavAria: "Rechtliche Hinweise",
+            languageSwitchAria: "Sprache wechseln"
+        },
+        imprint: {
+            pageTitle: "Impressum",
+            heroTitle: "Impressum",
+            contactTitle: "Kontakt",
+            contactName: "Jérôme Bachmann",
+            contactEmailLabel: "E-Mail:",
+            projectResponsibilityTitle: "Projektverantwortung",
+            projectResponsibilityText: "Dieses Webprojekt wurde im Rahmen eines Schulprojekts zum Acht-Damen- und Acht-Türme-Problem erstellt. Inhaltlich verantwortlich ist die jeweils oben genannte verantwortliche Stelle.",
+            contentLiabilityTitle: "Haftung fuer Inhalte",
+            contentLiabilityText: "Die Inhalte dieser Website wurden mit Sorgfalt erstellt. Für die Richtigkeit, Vollstaendigkeit und Aktualitaet der Inhalte kann jedoch keine Gewaehr übernommen werden. Bei Bekanntwerden von Rechtsverletzungen werden entsprechende Inhalte umgehend überarbeitet oder entfernt.",
+            linksLiabilityTitle: "Haftung fuer Links",
+            linksLiabilityText: "Diese Website kann Links zu externen Angeboten enthalten. Fuer deren Inhalte sind ausschliesslich die jeweiligen Betreiber verantwortlich. Eine permanente inhaltliche Kontrolle verlinkter Seiten ist ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar.",
+            versionTitle: "Stand",
+            versionText: "Stand dieser Vorlage: April 2026"
+        },
+        privacy: {
+            pageTitle: "Datenschutzerklärung",
+            heroTitle: "Datenschutzerklärung",
+            heroLead: "Diese Seite beschreibt, welche personenbezogenen Daten im Rahmen dieses Schulprojekts verarbeitet werden.",
+            dataProcessedTitle: "1. Welche Daten verarbeitet werden",
+            dataProcessedText: "Im Rahmen der Nutzung dieser Webanwendung können insbesondere folgende Daten verarbeitet werden:",
+            dataProcessedItem1: "Benutzername und verschlüsseltes Passwort bei der Registrierung und beim Login",
+            dataProcessedItem2: "Daten zur Zwei-Faktor-Authentifizierung, falls diese freiwillig aktiviert wird",
+            dataProcessedItem3: "gespeicherte Spielstände, Notizen, Schrittzahlen, Zeiten und Favoriten",
+            dataProcessedItem4: "technische Verbindungsdaten, die durch den Server oder das Hosting entstehen koennen",
+            processingPurposeTitle: "3. Zweck der Verarbeitung",
+            processingPurposeText: "Die Verarbeitung erfolgt, um die Funktionen dieser Anwendung bereitzustellen. Dazu gehoeren insbesondere:",
+            processingPurposeItem1: "Erstellung und Verwaltung von Benutzerkonten",
+            processingPurposeItem2: "sicherer Login in das persönliche Dashboard",
+            processingPurposeItem3: "optionale Absicherung des Kontos per Authenticator-App",
+            processingPurposeItem4: "Speichern und Laden von Spielständen",
+            processingPurposeItem5: "technischer Betrieb, Fehleranalyse und Missbrauchsschutz",
+            legalBasisTitle: "4. Rechtsgrundlage",
+            legalBasisText: "Soweit personenbezogene Daten verarbeitet werden, erfolgt dies in der Regel zur Bereitstellung der Anwendung und ihrer Funktionen sowie aufgrund des berechtigten Interesses an einem sicheren und funktionsfaehigen Webangebot. Falls eine ausdrückliche Einwilligung erforderlich ist, wird diese gesondert eingeholt.",
+            storageTitle: "5. Speicherung und Löschung",
+            storageText: "Personenbezogene Daten werden nur so lange gespeichert, wie sie für den jeweiligen Zweck benötigt werden. Benutzerkonten und zugehörige Spielstände bleiben grundsätzlich gespeichert, bis sie gelöscht oder für das Projekt nicht mehr benötigt werden.",
+            thirdPartyTitle: "6. Weitergabe an Dritte",
+            thirdPartyText: "Eine Weitergabe personenbezogener Daten erfolgt nur, wenn dies für den Betrieb der Anwendung erforderlich ist, etwa durch einen Hosting-Anbieter oder technische Dienstleister. Ansonsten werden keine Daten weitergegeben.",
+            rightsTitle: "7. Rechte betroffener Personen",
+            rightsText: "Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts insbesondere das Recht auf:",
+            rightsItem1: "Auskunft über die verarbeiteten personenbezogenen Daten",
+            rightsItem2: "Berichtigung unrichtiger Daten",
+            rightsItem3: "Löschung oder Einschraenkung der Verarbeitung",
+            rightsItem4: "Widerspruch gegen die Verarbeitung",
+            rightsItem5: "Herausgabe der bereitgestellten Daten, soweit anwendbar",
+            securityTitle: "8. Datensicherheit",
+            securityText: "Es werden technische und organisatorische Massnahmen getroffen, um gespeicherte Daten vor Verlust, Missbrauch oder unberechtigtem Zugriff zu schuetzen. Dazu gehoeren insbesondere passwortgeschuetzte Konten und die Möglichkeit, Zwei-Faktor-Authentifizierung zu aktivieren.",
+            versionTitle: "9. Stand",
+            versionText: "Stand dieser Vorlage: April 2026"
+        }
+    },
+    en: {
+        common: {
+            navBrand: "8 Queens and 8 Rooks Solver",
+            navHome: "Home",
+            navDashboard: "Dashboard",
+            navLogin: "Login",
+            heroEyebrow: "Legal information",
+            footerText: "School project about the Eight Queens and Eight Rooks problem.",
+            footerPrivacy: "Privacy Policy",
+            footerImprint: "Imprint",
+            footerNavAria: "Legal information",
+            languageSwitchAria: "Switch language"
+        },
+        imprint: {
+            pageTitle: "Imprint",
+            heroTitle: "Imprint",
+            contactTitle: "Contact",
+            contactName: "Jérôme Bachmann",
+            contactEmailLabel: "Email:",
+            projectResponsibilityTitle: "Project responsibility",
+            projectResponsibilityText: "This web project was created as part of a school project on the Eight Queens and Eight Rooks problem. The entity named above is responsible for the content.",
+            contentLiabilityTitle: "Liability for content",
+            contentLiabilityText: "The content of this website was created with care. However, no guarantee can be given for the accuracy, completeness, or timeliness of the content. If legal violations become known, the relevant content will be revised or removed without delay.",
+            linksLiabilityTitle: "Liability for links",
+            linksLiabilityText: "This website may contain links to external offers. Their content is the sole responsibility of the respective operators. Permanent monitoring of linked pages is not reasonable without concrete indications of a legal violation.",
+            versionTitle: "Version",
+            versionText: "Version of this template: April 2026"
+        },
+        privacy: {
+            pageTitle: "Privacy Policy",
+            heroTitle: "Privacy Policy",
+            heroLead: "This page describes which personal data is processed as part of this school project.",
+            dataProcessedTitle: "1. Which data is processed",
+            dataProcessedText: "When using this web application, the following data in particular may be processed:",
+            dataProcessedItem1: "username and encrypted password during registration and login",
+            dataProcessedItem2: "two-factor authentication data if this feature is activated voluntarily",
+            dataProcessedItem3: "saved game states, notes, step counts, times, and favorites",
+            dataProcessedItem4: "technical connection data that may arise through the server or hosting",
+            processingPurposeTitle: "3. Purpose of processing",
+            processingPurposeText: "The processing is carried out to provide the functions of this application. This includes in particular:",
+            processingPurposeItem1: "creating and managing user accounts",
+            processingPurposeItem2: "secure login to the personal dashboard",
+            processingPurposeItem3: "optional account protection using an authenticator app",
+            processingPurposeItem4: "saving and loading game states",
+            processingPurposeItem5: "technical operation, error analysis, and abuse prevention",
+            legalBasisTitle: "4. Legal basis",
+            legalBasisText: "Where personal data is processed, this is generally done to provide the application and its functions, as well as on the basis of the legitimate interest in a secure and functional web offering. If explicit consent is required, it will be obtained separately.",
+            storageTitle: "5. Storage and deletion",
+            storageText: "Personal data is stored only as long as it is needed for the respective purpose. User accounts and related game states generally remain stored until they are deleted or are no longer needed for the project.",
+            thirdPartyTitle: "6. Disclosure to third parties",
+            thirdPartyText: "Personal data is shared only if this is necessary for operating the application, for example through a hosting provider or technical service providers. Otherwise, no data is shared.",
+            rightsTitle: "7. Rights of data subjects",
+            rightsText: "Within the framework of applicable data protection law, data subjects have in particular the right to:",
+            rightsItem1: "information about the personal data being processed",
+            rightsItem2: "correction of incorrect data",
+            rightsItem3: "deletion of data or restriction of processing",
+            rightsItem4: "object to the processing",
+            rightsItem5: "receive the data that has been provided, where applicable",
+            securityTitle: "8. Data security",
+            securityText: "Technical and organizational measures are taken to protect stored data against loss, misuse, or unauthorized access. These include password-protected accounts and the option to enable two-factor authentication.",
+            versionTitle: "9. Version",
+            versionText: "Version of this template: April 2026"
+        }
+    }
+};
+
+function normalizeLanguage(language) {
+    const shortLanguage = String(language || "").trim().slice(0, 2).toLowerCase();
+    return SUPPORTED_LANGUAGES.includes(shortLanguage) ? shortLanguage : DEFAULT_LANGUAGE;
+}
+
+function getStoredLanguage() {
+    try {
+        return window.localStorage.getItem(LANGUAGE_STORAGE_KEY);
+    } catch (error) {
+        return null;
+    }
+}
+
+function storeLanguage(language) {
+    try {
+        window.localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
+    } catch (error) {
+        return;
+    }
+}
+
+function detectBrowserLanguage() {
+    return normalizeLanguage(navigator.language || navigator.userLanguage || DEFAULT_LANGUAGE);
+}
+
+function t(language, key) {
+    const commonTranslation = translations[language]?.common?.[key];
+
+    if (commonTranslation) {
+        return commonTranslation;
+    }
+
+    return translations[language]?.[legalPage]?.[key] ?? null;
+}
+
+function translateFooter(language) {
+    const footerText = document.querySelector(".page-footer-text");
+    const footerNav = document.querySelector(".page-footer-links");
+    const privacyLink = document.querySelector('.page-footer-links a[href$="/privacy-policy"]');
+    const imprintLink = document.querySelector('.page-footer-links a[href$="/impressum"]');
+
+    if (footerText) {
+        footerText.textContent = t(language, "footerText") || footerText.textContent;
+    }
+
+    if (footerNav) {
+        footerNav.setAttribute("aria-label", t(language, "footerNavAria") || footerNav.getAttribute("aria-label") || "");
+    }
+
+    if (privacyLink) {
+        privacyLink.textContent = t(language, "footerPrivacy") || privacyLink.textContent;
+    }
+
+    if (imprintLink) {
+        imprintLink.textContent = t(language, "footerImprint") || imprintLink.textContent;
+    }
+}
+
+function applyTranslations(language) {
+    document.documentElement.lang = language;
+    document.body.dataset.language = language;
+
+    document.querySelectorAll("[data-i18n]").forEach((element) => {
+        const translatedText = t(language, element.dataset.i18n);
+
+        if (!translatedText) {
+            return;
+        }
+
+        element.textContent = translatedText;
+    });
+
+    document.querySelectorAll("[data-i18n-aria-label]").forEach((element) => {
+        const translatedText = t(language, element.dataset.i18nAriaLabel);
+
+        if (!translatedText) {
+            return;
+        }
+
+        element.setAttribute("aria-label", translatedText);
+    });
+
+    translateFooter(language);
+
+    if (langSwitch) {
+        langSwitch.textContent = language.toUpperCase();
+        langSwitch.setAttribute("aria-label", t(language, "languageSwitchAria") || "Sprache wechseln");
+        langSwitch.title = language === "de" ? "Switch to English" : "Zu Deutsch wechseln";
+    }
+
+    storeLanguage(language);
+}
+
+function setLanguage(language) {
+    applyTranslations(normalizeLanguage(language));
+}
+
+setLanguage(getStoredLanguage() || detectBrowserLanguage());
+
+if (langSwitch) {
+    langSwitch.addEventListener("click", () => {
+        setLanguage(document.documentElement.lang === "de" ? "en" : "de");
+    });
+}
diff --git a/app/static/js/login.js b/app/static/js/login.js
index ca25820..30b38a5 100644
--- a/app/static/js/login.js
+++ b/app/static/js/login.js
@@ -43,7 +43,11 @@ const translations = {
         confirmPasswordLabel: "Neues Passwort bestätigen",
         updatePasswordButton: "Passwort aktualisieren",
         updatePasswordLoading: "Passwort wird aktualisiert...",
-        qrLoadError: "QR-Vorschau konnte nicht geladen werden."
+        qrLoadError: "QR-Vorschau konnte nicht geladen werden.",
+        footerText: "Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.",
+        footerPrivacy: "Datenschutzerklärung",
+        footerImprint: "Impressum",
+        footerNavAria: "Rechtliche Hinweise"
     },
     en: {
         pageTitle: "Login Settings",
@@ -83,7 +87,11 @@ const translations = {
         confirmPasswordLabel: "Confirm new password",
         updatePasswordButton: "Update password",
         updatePasswordLoading: "Updating password...",
-        qrLoadError: "QR preview could not be loaded."
+        qrLoadError: "QR preview could not be loaded.",
+        footerText: "School project about the Eight Queens and Eight Rooks problem.",
+        footerPrivacy: "Privacy Policy",
+        footerImprint: "Imprint",
+        footerNavAria: "Legal information"
     }
 };
 
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 8e99d9c..2db34c4 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -7,6 +7,7 @@
     <title data-i18n="pageTitle">Dashboard</title>
 
     <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
 </head>
 
 <body>
@@ -226,6 +227,8 @@
         </div>
     </div>
 
+    {% include "partials/footer.html" %}
+
     <aside class="sidebar settings-sidebar" id="settingsSidebar" aria-hidden="true">
         <div class="sidebar-header">
             <h3 id="settingsSidebarTitle" data-i18n="settingsSidebarTitle">Brett-Einstellungen</h3>
diff --git a/app/templates/impressum.html b/app/templates/impressum.html
new file mode 100644
index 0000000..bfca517
--- /dev/null
+++ b/app/templates/impressum.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-i18n="pageTitle">Impressum</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
+</head>
+
+<body data-legal-page="imprint">
+    <header class="legal-header">
+        <nav class="legal-nav">
+            <a class="brand" href="{{ url_for('main.home') }}">
+                <span class="brand-mark">♛</span>
+                <span data-i18n="navBrand">8-Damen- und 8-Türme Solver</span>
+            </a>
+
+            <div class="legal-nav-links">
+                <button class="lang-switch" id="langSwitch" type="button" aria-label="Sprache wechseln">DE</button>
+                <a href="{{ url_for('main.home') }}" data-i18n="navHome">Startseite</a>
+                {% if current_user.is_authenticated %}
+                <a href="{{ url_for('main.dashboard') }}" data-i18n="navDashboard">Dashboard</a>
+                {% else %}
+                <a href="{{ url_for('login.login') }}" data-i18n="navLogin">Login</a>
+                {% endif %}
+            </div>
+        </nav>
+    </header>
+
+    <main class="legal-main">
+        <section class="legal-hero">
+            <p class="legal-eyebrow" data-i18n="heroEyebrow">Rechtliche Hinweise</p>
+            <h1 data-i18n="heroTitle">Impressum</h1>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="contactTitle">Kontakt</h2>
+            <p>
+                <strong data-i18n="contactName">Jérôme Bachmann</strong><br>
+                <span data-i18n="contactEmailLabel">E-Mail:</span> jerome.bachmann@bachmannj.ch<br>
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="projectResponsibilityTitle">Projektverantwortung</h2>
+            <p data-i18n="projectResponsibilityText">
+                Dieses Webprojekt wurde im Rahmen eines Schulprojekts zum Acht-Damen- und Acht-Türme-Problem
+                erstellt. Inhaltlich verantwortlich ist die jeweils oben genannte verantwortliche Stelle.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="contentLiabilityTitle">Haftung für Inhalte</h2>
+            <p data-i18n="contentLiabilityText">
+                Die Inhalte dieser Website wurden mit Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
+                Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden. Bei Bekanntwerden von
+                Rechtsverletzungen werden entsprechende Inhalte umgehend überarbeitet oder entfernt.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="linksLiabilityTitle">Haftung fuer Links</h2>
+            <p data-i18n="linksLiabilityText">
+                Diese Website kann Links zu externen Angeboten enthalten. Fuer deren Inhalte sind ausschliesslich die
+                jeweiligen Betreiber verantwortlich. Eine permanente inhaltliche Kontrolle verlinkter Seiten ist ohne
+                konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="versionTitle">Stand</h2>
+            <p data-i18n="versionText">Stand dieser Vorlage: April 2026</p>
+        </section>
+    </main>
+
+    {% include "partials/footer.html" %}
+    <script src="{{ url_for('static', filename='js/legal.js') }}" defer></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
index f90190e..8222126 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title data-i18n="meta.title">8-Damen- und 8-Tuerme Solver</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
 </head>
 
 <body>
@@ -184,10 +185,12 @@
         </section>
     </main>
 
+    {% include "partials/footer.html" %}
+
     <script>
         window.LANDING_INITIAL_LANGUAGE = "{{ initial_language }}";
     </script>
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/templates/login.html b/app/templates/login.html
index 47d4de4..1ef3298 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
 </head>
 
 <body>
@@ -50,6 +51,8 @@
         </section>
     </main>
 
+    {% include "partials/footer.html" %}
+
     <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 
diff --git a/app/templates/login_settings.html b/app/templates/login_settings.html
index ae87425..47f23a8 100644
--- a/app/templates/login_settings.html
+++ b/app/templates/login_settings.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title data-i18n="pageTitle">Login Settings</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" defer></script>
 </head>
 
@@ -152,6 +153,8 @@
         </section>
     </main>
 
+    {% include "partials/footer.html" %}
+
     <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 
diff --git a/app/templates/partials/footer.html b/app/templates/partials/footer.html
new file mode 100644
index 0000000..fc7f403
--- /dev/null
+++ b/app/templates/partials/footer.html
@@ -0,0 +1,12 @@
+<footer class="page-footer">
+    <div class="page-footer-inner">
+        <div class="page-footer-copy">
+            <p class="page-footer-text" data-i18n="footerText">Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.</p>
+        </div>
+
+        <nav class="page-footer-links" data-i18n-aria-label="footerNavAria" aria-label="Rechtliche Hinweise">
+            <a href="{{ url_for('main.privacy_policy') }}" data-i18n="footerPrivacy">Datenschutzerklärung</a>
+            <a href="{{ url_for('main.imprint') }}" data-i18n="footerImprint">Impressum</a>
+        </nav>
+    </div>
+</footer>
diff --git a/app/templates/privacy.html b/app/templates/privacy.html
new file mode 100644
index 0000000..0c1ce2c
--- /dev/null
+++ b/app/templates/privacy.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-i18n="pageTitle">Datenschutzerklärung</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
+</head>
+
+<body data-legal-page="privacy">
+    <header class="legal-header">
+        <nav class="legal-nav">
+            <a class="brand" href="{{ url_for('main.home') }}">
+                <span class="brand-mark">♛</span>
+                <span data-i18n="navBrand">8-Damen- und 8-Türme Solver</span>
+            </a>
+
+            <div class="legal-nav-links">
+                <button class="lang-switch" id="langSwitch" type="button" aria-label="Sprache wechseln">DE</button>
+                <a href="{{ url_for('main.home') }}" data-i18n="navHome">Startseite</a>
+                {% if current_user.is_authenticated %}
+                <a href="{{ url_for('main.dashboard') }}" data-i18n="navDashboard">Dashboard</a>
+                {% else %}
+                <a href="{{ url_for('login.login') }}" data-i18n="navLogin">Login</a>
+                {% endif %}
+            </div>
+        </nav>
+    </header>
+
+    <main class="legal-main">
+        <section class="legal-hero">
+            <p class="legal-eyebrow" data-i18n="heroEyebrow">Rechtliche Hinweise</p>
+            <h1 data-i18n="heroTitle">Datenschutzerklärung</h1>
+            <p class="legal-lead" data-i18n="heroLead">
+                Diese Seite beschreibt, welche personenbezogenen Daten im Rahmen dieses Schulprojekts verarbeitet
+                werden.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="dataProcessedTitle">1. Welche Daten verarbeitet werden</h2>
+            <p data-i18n="dataProcessedText">Im Rahmen der Nutzung dieser Webanwendung können insbesondere folgende
+                Daten verarbeitet werden:</p>
+            <ul class="legal-list">
+                <li data-i18n="dataProcessedItem1">Benutzername und verschlüsseltes Passwort bei der Registrierung und
+                    beim Login</li>
+                <li data-i18n="dataProcessedItem2">Daten zur Zwei-Faktor-Authentifizierung, falls diese freiwillig
+                    aktiviert wird</li>
+                <li data-i18n="dataProcessedItem3">gespeicherte Spielstände, Notizen, Schrittzahlen, Zeiten und
+                    Favoriten</li>
+                <li data-i18n="dataProcessedItem4">technische Verbindungsdaten, die durch den Server oder das Hosting
+                    entstehen koennen</li>
+            </ul>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="processingPurposeTitle">3. Zweck der Verarbeitung</h2>
+            <p data-i18n="processingPurposeText">Die Verarbeitung erfolgt, um die Funktionen dieser Anwendung
+                bereitzustellen. Dazu gehoeren insbesondere:
+            </p>
+            <ul class="legal-list">
+                <li data-i18n="processingPurposeItem1">Erstellung und Verwaltung von Benutzerkonten</li>
+                <li data-i18n="processingPurposeItem2">sicherer Login in das persönliche Dashboard</li>
+                <li data-i18n="processingPurposeItem3">optionale Absicherung des Kontos per Authenticator-App</li>
+                <li data-i18n="processingPurposeItem4">Speichern und Laden von Spielständen</li>
+                <li data-i18n="processingPurposeItem5">technischer Betrieb, Fehleranalyse und Missbrauchsschutz</li>
+            </ul>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="legalBasisTitle">4. Rechtsgrundlage</h2>
+            <p data-i18n="legalBasisText">
+                Soweit personenbezogene Daten verarbeitet werden, erfolgt dies in der Regel zur Bereitstellung der
+                Anwendung und ihrer Funktionen sowie aufgrund des berechtigten Interesses an einem sicheren und
+                funktionsfaehigen Webangebot. Falls eine ausdrückliche Einwilligung erforderlich ist, wird diese
+                gesondert eingeholt.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="storageTitle">5. Speicherung und Löschung</h2>
+            <p data-i18n="storageText">
+                Personenbezogene Daten werden nur so lange gespeichert, wie sie für den jeweiligen Zweck benötigt
+                werden. Benutzerkonten und zugehörige Spielstände bleiben grundsätzlich gespeichert, bis sie
+                gelöscht oder für das Projekt nicht mehr benötigt werden.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="thirdPartyTitle">6. Weitergabe an Dritte</h2>
+            <p data-i18n="thirdPartyText">
+                Eine Weitergabe personenbezogener Daten erfolgt nur, wenn dies für den Betrieb der Anwendung
+                erforderlich ist, etwa durch einen Hosting-Anbieter oder technische Dienstleister. Ansonsten werden
+                keine Daten weitergegeben.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="rightsTitle">7. Rechte betroffener Personen</h2>
+            <p data-i18n="rightsText">Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts insbesondere
+                das Recht auf:</p>
+            <ul class="legal-list">
+                <li data-i18n="rightsItem1">Auskunft über die verarbeiteten personenbezogenen Daten</li>
+                <li data-i18n="rightsItem2">Berichtigung unrichtiger Daten</li>
+                <li data-i18n="rightsItem3">Löschung oder Einschraenkung der Verarbeitung</li>
+                <li data-i18n="rightsItem4">Widerspruch gegen die Verarbeitung</li>
+                <li data-i18n="rightsItem5">Herausgabe der bereitgestellten Daten, soweit anwendbar</li>
+            </ul>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="securityTitle">8. Datensicherheit</h2>
+            <p data-i18n="securityText">
+                Es werden technische und organisatorische Massnahmen getroffen, um gespeicherte Daten vor Verlust,
+                Missbrauch oder unberechtigtem Zugriff zu schuetzen. Dazu gehoeren insbesondere passwortgeschuetzte
+                Konten und die Möglichkeit, Zwei-Faktor-Authentifizierung zu aktivieren.
+            </p>
+        </section>
+
+        <section class="legal-card">
+            <h2 data-i18n="versionTitle">9. Stand</h2>
+            <p data-i18n="versionText">Stand dieser Vorlage: April 2026</p>
+        </section>
+    </main>
+
+    {% include "partials/footer.html" %}
+    <script src="{{ url_for('static', filename='js/legal.js') }}" defer></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/app/templates/sign_up.html b/app/templates/sign_up.html
index 50c7cb4..22d2ec3 100644
--- a/app/templates/sign_up.html
+++ b/app/templates/sign_up.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign Up</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
 </head>
 
 <body>
@@ -51,6 +52,8 @@
         </section>
     </main>
 
+    {% include "partials/footer.html" %}
+
     <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 
diff --git a/app/templates/two_factor_verify.html b/app/templates/two_factor_verify.html
index e8ad1de..2fa6aa3 100644
--- a/app/templates/two_factor_verify.html
+++ b/app/templates/two_factor_verify.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Verify Login</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
 </head>
 
 <body>
@@ -48,6 +49,8 @@
         </section>
     </main>
 
+    {% include "partials/footer.html" %}
+
     <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
 </body>
 

From 1beb1ce6305c7480697fbc0511633ca214b845db Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Wed, 8 Apr 2026 11:06:37 +0200
Subject: [PATCH 14/15] added comments and fixed some wrong text.

---
 README.md                    |  9 +---
 app/__init__.py              | 17 ++++++++
 app/routes/login_routes.py   | 54 ++++++++++++++++++++++-
 app/routes/main_routes.py    | 49 ++++++++++++++++++++-
 app/static/js/dashboard.js   |  2 +-
 app/templates/dashboard.html | 83 +++++++++++++++++++++---------------
 app/templates/privacy.html   | 14 +++---
 7 files changed, 176 insertions(+), 52 deletions(-)

diff --git a/README.md b/README.md
index 9ff9134..3874215 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,6 @@ project-root/
 │
 ├── app/
 │   ├── __init__.py          # Flask App Factory
-│   ├── config.py            # Konfiguration (DB, Secrets, etc.)
 │   │
 │   ├── models/              # Datenbankmodelle
 │   │   ├── __init__.py
@@ -22,12 +21,7 @@ project-root/
 │   │   ├── solver_routes.py
 │   │   └── job_routes.py
 │   │
-│   ├── services/            # Businesslogik (Solver etc.)
-│   │   ├── __init__.py
-│   │   ├── solver_service.py
-│   │   └── auth_service.py
-│   │
-│   ├── templates/           # HTML (Jinja Templates)
+│   ├── templates/           # HTML
 │   │   ├── base.html
 │   │   ├── login.html
 │   │   ├── dashboard.html
@@ -42,6 +36,5 @@ project-root/
 │
 ├── run.py                   # Startpunkt der Anwendung
 ├── requirements.txt
-├── .env                     # DB-Zugangsdaten, Secrets
 └── README.md
 ```
\ No newline at end of file
diff --git a/app/__init__.py b/app/__init__.py
index 9abff38..9315507 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -1,18 +1,30 @@
+"""Application factory and shared Flask extensions.
+
+This file creates the Flask application, configures the database and login
+manager, imports the data models so SQLAlchemy knows about them, and registers
+the route blueprints used by the project.
+"""
+
 import os
 
 from flask import Flask
 from flask_login import LoginManager
 from flask_sqlalchemy import SQLAlchemy
 
+# Shared extension instances are created once here and attached to the app
 db = SQLAlchemy()
 login_manager = LoginManager()
 
 
 def create_app():
+    """Build and configure the Flask application instance."""
     app = Flask(__name__)
 
+    # Build an absolute path to the application directory so the SQLite
+    # database file can be referenced reliably from any working directory.
     BASE_DIR = os.path.abspath(os.path.dirname(__file__))
 
+    # Core Flask and SQLAlchemy configuration.
     app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(BASE_DIR, "app.db")
     app.config["SECRET_KEY"] = os.getenv("SECRET_KEY", "dev-secret-key")
     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
@@ -20,22 +32,27 @@ def create_app():
     app.config["REMEMBER_COOKIE_HTTPONLY"] = True
     app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
+    # Connect the shared extension objects to this specific app instance.
     db.init_app(app)
     login_manager.init_app(app)
     login_manager.login_view = "login.login"
     login_manager.login_message_category = "info"
 
+    # Import the models before create_all() so SQLAlchemy has the table
     from .models.user import User
     from .models.gamestate import GameState
     from .models.login_attempt import LoginAttempt
 
+    # Create any database tables that do not exist yet.
     with app.app_context():
         db.create_all()
 
     @login_manager.user_loader
     def load_user(user_id):
+        """Reload the logged-in user from the session-stored user id."""
         return db.session.get(User, int(user_id))
 
+    # Import and register the blueprints that contain the route handlers.
     from .routes.login_routes import login_bp
     from .routes.main_routes import main_bp
 
diff --git a/app/routes/login_routes.py b/app/routes/login_routes.py
index 9d3148d..a2b52cc 100644
--- a/app/routes/login_routes.py
+++ b/app/routes/login_routes.py
@@ -1,3 +1,11 @@
+"""Authentication routes and login-related helper functions.
+
+This module handles user registration, login, logout, password changes,
+login-attempt throttling, and authenticator-app based two-factor
+authentication. It also contains the utility functions that keep these flows
+consistent across the different route handlers.
+"""
+
 import base64
 import binascii
 import hashlib
@@ -16,11 +24,13 @@ from .. import db
 from ..models.login_attempt import LoginAttempt
 from ..models.user import User
 
+# Blueprint that groups all authentication and account-security routes.
 login_bp = Blueprint("login", __name__)
 
+# constants
 MIN_PASSWORD_LENGTH = 8
 MAX_PASSWORD_LENGTH = 128
-MAX_LOGIN_FAILURES = 5
+MAX_LOGIN_FAILURES = 8
 LOGIN_LOCK_MINUTES = 15
 TWO_FACTOR_CODE_DIGITS = 6
 TWO_FACTOR_TIME_STEP_SECONDS = 30
@@ -32,10 +42,12 @@ DUMMY_PASSWORD_HASH = generate_password_hash("dummy-password-for-timing-protecti
 
 
 def utcnow():
+    """Return the current UTC time as datetime."""
     return datetime.utcnow()
 
 
 def get_utc_timestamp(moment=None):
+    """Convert a datetime into a Unix timestamp in UTC seconds."""
     if moment is None:
         return int(datetime.now(timezone.utc).timestamp())
 
@@ -46,16 +58,19 @@ def get_utc_timestamp(moment=None):
 
 
 def normalize_username(username):
+    """Trim surrounding whitespace from the username field."""
     return (username or "").strip()
 
 
 def validate_username(username):
+    """Return an error message if the username violates the allowed pattern."""
     if not USERNAME_PATTERN.fullmatch(username):
         return "Username must be 3-20 characters and only use letters, numbers, dots, dashes, or underscores."
     return None
 
 
 def validate_password(password):
+    """Return an error message if the password length is outside the allowed range."""
     if len(password) < MIN_PASSWORD_LENGTH:
         return f"Password must be at least {MIN_PASSWORD_LENGTH} characters long."
 
@@ -66,6 +81,7 @@ def validate_password(password):
 
 
 def get_request_ip():
+    """Determine the client IP address, preferring a reverse-proxy header when present."""
     forwarded_for = request.headers.get("X-Forwarded-For", "")
 
     if forwarded_for:
@@ -75,6 +91,11 @@ def get_request_ip():
 
 
 def login_attempt_buckets(username):
+    """Return the lockout buckets tracked for this login attempt.
+
+    The app tracks failures both per username+IP and per IP-only bucket to
+    slow down brute-force attempts against many usernames from the same client.
+    """
     normalized_username = normalize_username(username).lower() or "__empty__"
     ip_address = get_request_ip()
     return [
@@ -84,6 +105,7 @@ def login_attempt_buckets(username):
 
 
 def get_or_create_attempt(ip_address, bucket_key):
+    """Fetch an existing login-attempt record or create a new one."""
     attempt = LoginAttempt.query.filter_by(ip_address=ip_address, username=bucket_key).first()
 
     if attempt is None:
@@ -94,12 +116,14 @@ def get_or_create_attempt(ip_address, bucket_key):
 
 
 def clear_expired_lock(attempt, now):
+    """Reset the failure counter when a temporary lockout has expired."""
     if attempt.locked_until and attempt.locked_until <= now:
         attempt.failed_attempts = 0
         attempt.locked_until = None
 
 
 def get_active_lock(username):
+    """Return the latest active lockout time for this username/IP combination."""
     now = utcnow()
     active_until = None
 
@@ -119,6 +143,7 @@ def get_active_lock(username):
 
 
 def record_failed_login(username):
+    """Increase the failure counter and start a temporary lock when needed."""
     now = utcnow()
     locked_until = None
 
@@ -137,6 +162,7 @@ def record_failed_login(username):
 
 
 def clear_login_attempts(username):
+    """Remove tracked failed attempts after a successful login."""
     for ip_address, bucket_key in login_attempt_buckets(username):
         attempt = LoginAttempt.query.filter_by(ip_address=ip_address, username=bucket_key).first()
 
@@ -147,6 +173,7 @@ def clear_login_attempts(username):
 
 
 def lookup_user_by_username(username):
+    """Look up a user case-insensitively so login is not case-sensitive."""
     if not username:
         return None
 
@@ -154,29 +181,35 @@ def lookup_user_by_username(username):
 
 
 def minutes_until(target_time):
+    """Return the remaining lockout time in rounded-up whole minutes."""
     seconds = max(1, int((target_time - utcnow()).total_seconds()))
     return max(1, (seconds + 59) // 60)
 
 
 def normalize_two_factor_secret(secret):
+    """Normalize a Base32 secret by removing spaces and uppercasing it."""
     return (secret or "").strip().replace(" ", "").upper()
 
 
 def generate_two_factor_secret():
+    """Generate a new random Base32 secret for authenticator apps."""
     return base64.b32encode(secrets.token_bytes(20)).decode("ascii").rstrip("=")
 
 
 def format_two_factor_secret(secret):
+    """Insert spaces into the secret to make manual entry easier."""
     normalized = normalize_two_factor_secret(secret)
     return " ".join(normalized[index:index + 4] for index in range(0, len(normalized), 4))
 
 
 def clear_pending_two_factor(user=None):
+    """Remove the session values used during the login 2FA verification step."""
     session.pop("pending_2fa_user_id", None)
     session.pop("pending_2fa_attempts", None)
 
 
 def get_pending_two_factor_setup_secret(user):
+    """Return the temporary secret generated during 2FA setup for this user."""
     if session.get("pending_2fa_setup_user_id") != user.id:
         return None
 
@@ -185,11 +218,13 @@ def get_pending_two_factor_setup_secret(user):
 
 
 def clear_pending_two_factor_setup():
+    """Remove the session values used during authenticator setup."""
     session.pop("pending_2fa_setup_user_id", None)
     session.pop("pending_2fa_setup_secret", None)
 
 
 def build_totp_uri(user, secret):
+    """Build the otpauth URI consumed by authenticator applications."""
     normalized_secret = normalize_two_factor_secret(secret)
     label = quote(f"{TWO_FACTOR_ISSUER}:{user.username}")
     issuer = quote(TWO_FACTOR_ISSUER)
@@ -201,12 +236,14 @@ def build_totp_uri(user, secret):
 
 
 def decode_two_factor_secret(secret):
+    """Decode the Base32 secret into raw bytes for HMAC processing."""
     normalized_secret = normalize_two_factor_secret(secret)
     padded_secret = normalized_secret + ("=" * (-len(normalized_secret) % 8))
     return base64.b32decode(padded_secret, casefold=True)
 
 
 def generate_totp_code(secret, for_time=None):
+    """Generate a time-based one-time password from the shared secret."""
     timestamp = get_utc_timestamp(for_time)
     counter = timestamp // TWO_FACTOR_TIME_STEP_SECONDS
     key = decode_two_factor_secret(secret)
@@ -219,6 +256,7 @@ def generate_totp_code(secret, for_time=None):
 
 
 def verify_totp_code(secret, code, at_time=None):
+    """Validate a 2FA code, allowing a small time window for clock drift."""
     normalized_code = (code or "").strip()
 
     if not normalized_code.isdigit() or len(normalized_code) != TWO_FACTOR_CODE_DIGITS:
@@ -239,6 +277,7 @@ def verify_totp_code(secret, code, at_time=None):
 
 
 def get_pending_two_factor_user():
+    """Load the user who is currently in the middle of the login 2FA step."""
     user_id = session.get("pending_2fa_user_id")
 
     if not user_id:
@@ -248,6 +287,7 @@ def get_pending_two_factor_user():
 
 
 def render_login_settings(error=None):
+    """Render the login settings page with optional 2FA setup data."""
     pending_secret = get_pending_two_factor_setup_secret(current_user)
     formatted_secret = format_two_factor_secret(pending_secret) if pending_secret else None
     provisioning_uri = build_totp_uri(current_user, pending_secret) if pending_secret else None
@@ -262,6 +302,7 @@ def render_login_settings(error=None):
 
 @login_bp.route("/register", methods=["GET", "POST"])
 def register():
+    """Create a new user account after validating the submitted credentials."""
     if current_user.is_authenticated:
         return redirect(url_for("main.dashboard"))
 
@@ -293,6 +334,7 @@ def register():
 
 @login_bp.route("/login", methods=["GET", "POST"])
 def login():
+    """Authenticate a user and start the 2FA step when required."""
     if current_user.is_authenticated:
         return redirect(url_for("main.dashboard"))
 
@@ -303,6 +345,7 @@ def login():
         if not username or not password:
             return render_template("login.html", error="Username and password are required.", username=username)
 
+        # Stop early if this user or IP bucket is currently locked.
         locked_until = get_active_lock(username)
 
         if locked_until and locked_until > utcnow():
@@ -313,6 +356,8 @@ def login():
             )
 
         user = lookup_user_by_username(username)
+        # Use a dummy hash when the user does not exist so the timing stays
+        # similar and does not reveal valid usernames.
         password_hash = user.password if user else DUMMY_PASSWORD_HASH
         password_matches = check_password_hash(password_hash, password)
 
@@ -330,6 +375,7 @@ def login():
         clear_login_attempts(username)
 
         if user.two_factor_enabled:
+            # Delay the full login until the authenticator code has been verified.
             if not user.two_factor_secret:
                 return render_template(
                     "login.html",
@@ -353,6 +399,7 @@ def login():
 
 @login_bp.route("/login/verify", methods=["GET", "POST"])
 def verify_two_factor():
+    """Complete login by verifying the authenticator-app code."""
     if current_user.is_authenticated:
         return redirect(url_for("main.dashboard"))
 
@@ -373,6 +420,7 @@ def verify_two_factor():
 
         attempts = int(session.get("pending_2fa_attempts", 0))
 
+        # Limit repeated guesses during the second factor step as well.
         if attempts >= MAX_TWO_FACTOR_ATTEMPTS:
             clear_pending_two_factor(user)
             db.session.commit()
@@ -413,6 +461,7 @@ def verify_two_factor():
 @login_bp.route("/login/settings", methods=["GET", "POST"])
 @login_required
 def login_settings():
+    """Handle password changes and authenticator-based 2FA settings."""
     if request.method == "POST":
         action = request.form.get("action")
 
@@ -420,6 +469,8 @@ def login_settings():
             if current_user.two_factor_enabled:
                 return render_login_settings(error="Authenticator app 2FA is already enabled.")
 
+            # Store the generated secret in the session until the user confirms
+            # it with a valid authenticator code.
             secret = generate_two_factor_secret()
             session["pending_2fa_setup_user_id"] = current_user.id
             session["pending_2fa_setup_secret"] = secret
@@ -486,6 +537,7 @@ def login_settings():
 @login_bp.route("/logout", methods=["POST"])
 @login_required
 def logout():
+    """Log the user out and clear any unfinished authentication state."""
     clear_pending_two_factor()
     clear_pending_two_factor_setup()
     logout_user()
diff --git a/app/routes/main_routes.py b/app/routes/main_routes.py
index 321b5e7..fcca6a5 100644
--- a/app/routes/main_routes.py
+++ b/app/routes/main_routes.py
@@ -1,3 +1,10 @@
+"""Main application routes for pages, puzzle solving, and save points.
+
+This module contains the public pages, the dashboard, the board validation
+logic for queens and rooks, solver endpoints, and the CRUD-style endpoints
+used to store and restore saved games for a logged-in user.
+"""
+
 import json
 import random
 from datetime import datetime
@@ -12,10 +19,12 @@ DEFAULT_BOARD_SIZE = 8
 MIN_BOARD_SIZE = 4
 MAX_BOARD_SIZE = 13
 
+# Blueprint that groups the main site and game-related routes.
 main_bp = Blueprint("main", __name__)
 
 
 def parse_board_size(raw_size, default=DEFAULT_BOARD_SIZE):
+    """Convert a user-supplied board size into a safe integer range."""
     try:
         board_size = int(raw_size)
     except (TypeError, ValueError):
@@ -25,10 +34,12 @@ def parse_board_size(raw_size, default=DEFAULT_BOARD_SIZE):
 
 
 def parse_favorite_flag(raw_value):
+    """Interpret common truthy values from query parameters or JSON payloads."""
     return str(raw_value).lower() in {"1", "true", "yes", "on"}
 
 
 def parse_non_negative_int(raw_value, default=0):
+    """Parse an integer and clamp negative values to zero."""
     try:
         value = int(raw_value)
     except (TypeError, ValueError):
@@ -38,14 +49,17 @@ def parse_non_negative_int(raw_value, default=0):
 
 
 def get_position_label(row, col, board_size):
+    """Return a chess-style board label such as A8 or C5."""
     return f"{chr(65 + col)}{board_size - row}"
 
 
 def solve_queens(board_size):
+    """Return every valid N-Queens solution for the requested board size."""
     queen_positions = [-1] * board_size
     queen_solutions = []
 
     def is_queen_position_safe(row, col):
+        """Check whether the new queen conflicts with any earlier queen."""
         for previous_row in range(row):
             previous_col = queen_positions[previous_row]
 
@@ -58,6 +72,7 @@ def solve_queens(board_size):
         return True
 
     def place_queen(row):
+        """Backtracking search that fills the board row by row."""
         if row == board_size:
             queen_solutions.append(queen_positions[:])
             return
@@ -73,16 +88,19 @@ def solve_queens(board_size):
 
 
 def solve_rooks(board_size):
+    """Return one valid rook arrangement with exactly one rook per row/column."""
     rook_positions = list(range(board_size))
     random.shuffle(rook_positions)
     return rook_positions
 
 
 def build_queens_trace(board_size):
+    """Build a step-by-step trace that explains the queens backtracking search."""
     queen_positions = [-1] * board_size
     steps = []
 
     def is_queen_position_safe(row, col):
+        """Reuse the same safety rules used by the queens solver."""
         for previous_row in range(row):
             previous_col = queen_positions[previous_row]
 
@@ -95,13 +113,14 @@ def build_queens_trace(board_size):
         return True
 
     def place_queen(row):
+        """Record every placement and backtracking step until a solution is found."""
         if row == board_size:
             steps.append({
                 "type": "solution",
                 "row": None,
                 "col": None,
                 "board": queen_positions[:],
-                "message": f"Loesung gefunden. Alle {board_size} Damen stehen ohne Konflikte."
+                "message": f"Lösung gefunden. Alle {board_size} Damen stehen ohne Konflikte."
             })
             return True
 
@@ -111,6 +130,8 @@ def build_queens_trace(board_size):
 
             queen_positions[row] = col
             position = get_position_label(row, col, board_size)
+            # Store a snapshot of the current board so the frontend can replay
+            # the solving process visually.
             steps.append({
                 "type": "place",
                 "row": row,
@@ -145,6 +166,7 @@ def build_queens_trace(board_size):
 
 
 def build_rooks_trace(board_size):
+    """Build a simple placement trace for the rook mode."""
     rook_positions = solve_rooks(board_size)
     board = [-1] * board_size
     steps = []
@@ -152,6 +174,8 @@ def build_rooks_trace(board_size):
     for row, col in enumerate(rook_positions):
         board[row] = col
         position = get_position_label(row, col, board_size)
+        # As with the queens trace, each step includes a full board snapshot for
+        # straightforward frontend rendering.
         steps.append({
             "type": "place",
             "row": row,
@@ -178,6 +202,7 @@ def build_rooks_trace(board_size):
 
 
 def serialize_game_state(game_state):
+    """Convert a database model into JSON-friendly data for the frontend."""
     board = json.loads(game_state.board)
 
     return {
@@ -198,6 +223,7 @@ def serialize_game_state(game_state):
 
 
 def build_save_point_query():
+    """Create a filtered and sorted query for the current user's save points."""
     query = GameState.query.filter_by(user_id=current_user.id)
 
     selected_mode = request.args.get("mode")
@@ -205,6 +231,7 @@ def build_save_point_query():
     favorites_only = request.args.get("favorites_only")
     sort_by = request.args.get("sort", "newest")
 
+    # Apply optional filters only when the request contains a supported value.
     if selected_mode in {"queens", "rooks"}:
         query = query.filter_by(mode=selected_mode)
 
@@ -226,6 +253,7 @@ def build_save_point_query():
 
 @main_bp.route("/")
 def home():
+    """Render the public landing page and choose a matching default language."""
     initial_language = request.accept_languages.best_match(["de", "en"]) or "de"
     return render_template("index.html", initial_language=initial_language)
 
@@ -233,27 +261,33 @@ def home():
 @main_bp.route("/dashboard")
 @login_required
 def dashboard():
+    """Render the logged-in dashboard."""
     return render_template("dashboard.html", user=current_user)
 
 
 @main_bp.route("/privacy_policy")
 def privacy_policy():
+    """Render the privacy policy page."""
     return render_template("privacy.html")
 
 
 @main_bp.route("/imprint")
 def imprint():
+    """Render the imprint/legal notice page."""
     return render_template("impressum.html")
 
 
 @main_bp.route("/check", methods=["POST"])
 def check():
+    """Validate whether a piece can be placed on the requested square."""
     data = request.json
     board = data["board"]
     row = data["row"]
     col = data["col"]
     piece_mode = data.get("mode", "queens")
 
+    # The board is stored as a list where the index is the row and the value is
+    # the column of the placed piece. -1 means the row is still empty.
     for current_row, current_col in enumerate(board):
         if current_col == -1 or current_row == row:
             continue
@@ -264,6 +298,7 @@ def check():
         if same_column:
             return jsonify({"valid": False})
 
+        # Diagonal conflicts only matter for queens, not for rooks.
         if piece_mode == "queens" and same_diagonal:
             return jsonify({"valid": False})
 
@@ -272,24 +307,28 @@ def check():
 
 @main_bp.route("/solve")
 def solve_queens_route():
+    """Return all queens solutions for the requested board size."""
     board_size = parse_board_size(request.args.get("size"))
     return jsonify(solve_queens(board_size))
 
 
 @main_bp.route("/solve_trace")
 def solve_queens_trace_route():
+    """Return a step-by-step queens solving trace."""
     board_size = parse_board_size(request.args.get("size"))
     return jsonify(build_queens_trace(board_size))
 
 
 @main_bp.route("/solve_rooks")
 def solve_rooks_route():
+    """Return one rook solution for the requested board size."""
     board_size = parse_board_size(request.args.get("size"))
     return jsonify(solve_rooks(board_size))
 
 
 @main_bp.route("/solve_rooks_trace")
 def solve_rooks_trace_route():
+    """Return a step-by-step rook placement trace."""
     board_size = parse_board_size(request.args.get("size"))
     return jsonify(build_rooks_trace(board_size))
 
@@ -297,6 +336,7 @@ def solve_rooks_trace_route():
 @main_bp.route("/save", methods=["POST"])
 @login_required
 def save_game():
+    """Store the current board state as a new save point for the user."""
     data = request.json
 
     board = data["board"]
@@ -310,6 +350,7 @@ def save_game():
     is_solved = bool(data.get("isSolved"))
     timestamp = datetime.utcnow()
 
+    # Save the board as JSON text so it can be restored exactly as the user left it.
     game_state = GameState(
         user_id=current_user.id,
         board=json.dumps(board),
@@ -337,6 +378,7 @@ def save_game():
 @main_bp.route("/save_points")
 @login_required
 def list_save_points():
+    """Return all save points for the current user after filtering and sorting."""
     save_points = build_save_point_query().all()
     return jsonify([serialize_game_state(game_state) for game_state in save_points])
 
@@ -344,6 +386,7 @@ def list_save_points():
 @main_bp.route("/save_points/<int:game_id>/favorite", methods=["POST"])
 @login_required
 def toggle_save_point_favorite(game_id):
+    """Toggle the favorite flag for one saved game."""
     game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
 
     if not game_state:
@@ -358,6 +401,7 @@ def toggle_save_point_favorite(game_id):
 @main_bp.route("/save_points/<int:game_id>", methods=["DELETE"])
 @login_required
 def delete_save_point(game_id):
+    """Delete one save point owned by the current user."""
     game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
 
     if not game_state:
@@ -372,12 +416,14 @@ def delete_save_point(game_id):
 @main_bp.route("/load")
 @login_required
 def load_game():
+    """Load the newest save point for the current user."""
     latest_game = (
         GameState.query.filter_by(user_id=current_user.id)
         .order_by(GameState.created_at.desc(), GameState.id.desc())
         .first()
     )
 
+    # If the user has never saved a game, return a clean default board.
     if not latest_game:
         return jsonify({"board": [-1] * DEFAULT_BOARD_SIZE, "mode": "queens"})
 
@@ -387,6 +433,7 @@ def load_game():
 @main_bp.route("/load/<int:game_id>")
 @login_required
 def load_specific_game(game_id):
+    """Load a specific save point owned by the current user."""
     game_state = GameState.query.filter_by(id=game_id, user_id=current_user.id).first()
 
     if not game_state:
diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js
index ab320cc..60aaa41 100644
--- a/app/static/js/dashboard.js
+++ b/app/static/js/dashboard.js
@@ -236,7 +236,7 @@ const translations = {
         favoriteAddButton: "Als Favorit",
         favoriteRemoveButton: "Favorit entfernen",
         deleteButton: "Löschen",
-        celebrationTitle: "Richtig geloöst!",
+        celebrationTitle: "Richtig gelöst!",
         celebrationText: ({ modeLabel, duration }) => `Stark gemacht. Deine ${modeLabel.toLowerCase()}-Lösung ist konfliktfrei in ${duration}.`,
         settingsApplied: ({ size }) => `Brettgrösse auf ${size} x ${size} gesetzt.`,
         modeActivated: ({ piece }) => `${piece}-Modus aktiviert.`,
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 2db34c4..45379c1 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -24,8 +24,8 @@
             <button class="nav-link-button lang-switch" id="langSwitch" type="button"
                 aria-label="Sprache wechseln">DE</button>
 
-            <a class="account-shortcut" href="{{ url_for('login.login_settings') }}" data-i18n-aria-label="accountShortcutAria"
-                aria-label="Konto und Login-Einstellungen öffnen">
+            <a class="account-shortcut" href="{{ url_for('login.login_settings') }}"
+                data-i18n-aria-label="accountShortcutAria" aria-label="Konto und Login-Einstellungen öffnen">
                 <span class="account-avatar" aria-hidden="true">{{ current_user.username[:1]|upper }}</span>
                 <span class="account-copy">
                     <span class="account-label" id="accountLabel" data-i18n="accountLabel">Account</span>
@@ -45,7 +45,7 @@
         <span class="settings-trigger-label" id="settingsTriggerLabel">Brett-Einstellungen</span>
     </button>
 
-        <div class="container">
+    <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         <div class="flash-stack">
@@ -121,13 +121,14 @@
             <div class="board" id="board"></div>
 
             <div class="controls">
-                <button class="btn secondary" onclick="resetBoard()" id="btnReset" type="button" data-i18n="btnReset">Brett
-                    zuruecksetzen</button>
+                <button class="btn secondary" onclick="resetBoard()" id="btnReset" type="button"
+                    data-i18n="btnReset">Brett
+                    zurücksetzen</button>
                 <div class="controls-save-row">
                     <button class="btn" onclick="openSavePanel()" id="btnSave" type="button"
                         data-i18n="btnSave">Speichern</button>
-                    <button class="btn secondary" onclick="openSavePointsPanel()" id="btnLoad"
-                        type="button" data-i18n="btnLoad">Save-Points</button>
+                    <button class="btn secondary" onclick="openSavePointsPanel()" id="btnLoad" type="button"
+                        data-i18n="btnLoad">Save-Points</button>
                 </div>
             </div>
 
@@ -151,17 +152,17 @@
                         </p>
 
                         <div class="solver-controls">
-                            <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve"
-                                type="button" data-i18n="btnPrepareSolve">Animation vorbereiten</button>
-                            <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep"
-                                type="button" data-i18n="btnNextStep">Nächster Schritt</button>
+                            <button class="btn" onclick="prepareSolutionTrace()" id="btnPrepareSolve" type="button"
+                                data-i18n="btnPrepareSolve">Animation vorbereiten</button>
+                            <button class="btn secondary" onclick="nextSolverStep()" id="btnNextStep" type="button"
+                                data-i18n="btnNextStep">Nächster Schritt</button>
                             <button class="btn secondary" onclick="toggleSolverPlayback()" id="btnPlayPause"
                                 type="button" data-i18n="btnPlayPause">Animation abspielen</button>
                         </div>
 
                         <div class="solver-speed">
-                            <label class="solver-speed-label" id="solverSpeedLabel"
-                                for="solverSpeedInput" data-i18n="solverSpeedLabel">Animationsgeschwindigkeit</label>
+                            <label class="solver-speed-label" id="solverSpeedLabel" for="solverSpeedInput"
+                                data-i18n="solverSpeedLabel">Animationsgeschwindigkeit</label>
                             <input id="solverSpeedInput" type="range" min="80" max="900" step="20" value="320"
                                 oninput="updateSolverSpeed(this.value)">
                             <span class="solver-speed-value" id="solverSpeedValue">320 ms</span>
@@ -175,8 +176,8 @@
                         </p>
 
                         <div class="instant-solver-actions">
-                            <button class="btn accent" onclick="instantSolve()" id="btnInstantSolve"
-                                type="button" data-i18n="btnInstantSolve">Sofort lösen</button>
+                            <button class="btn accent" onclick="instantSolve()" id="btnInstantSolve" type="button"
+                                data-i18n="btnInstantSolve">Sofort lösen</button>
                         </div>
                     </section>
                 </div>
@@ -196,12 +197,13 @@
                 <div>
                     <p class="section-kicker" id="historyKicker" data-i18n="historyKicker">Save-Points</p>
                     <h3 id="historyTitle" data-i18n="historyTitle">Gespeicherte Zeiten und Fortschritte</h3>
-                    <p class="history-subtitle" id="historySubtitle" data-i18n="historySubtitle">Die Tabelle zeigt gespeicherte Save-Points mit
+                    <p class="history-subtitle" id="historySubtitle" data-i18n="historySubtitle">Die Tabelle zeigt
+                        gespeicherte Save-Points mit
                         Zeit, Schritten und
                         Status.</p>
                 </div>
-                <button class="btn secondary" onclick="refreshTimeHistory()" id="btnRefreshHistory"
-                    type="button" data-i18n="btnRefreshHistory">Aktualisieren</button>
+                <button class="btn secondary" onclick="refreshTimeHistory()" id="btnRefreshHistory" type="button"
+                    data-i18n="btnRefreshHistory">Aktualisieren</button>
             </div>
 
             <div class="history-table-wrapper">
@@ -219,7 +221,8 @@
                     </thead>
                     <tbody id="timeHistoryTableBody">
                         <tr>
-                            <td colspan="7" class="history-empty" data-i18n="historyEmpty">Noch keine gespeicherten Zeiten vorhanden.</td>
+                            <td colspan="7" class="history-empty" data-i18n="historyEmpty">Noch keine gespeicherten
+                                Zeiten vorhanden.</td>
                         </tr>
                     </tbody>
                 </table>
@@ -238,14 +241,17 @@
 
         <p id="settingsSidebarText" data-i18n="settingsSidebarText">Passe die Brettgrösse zwischen 4 und 13 an.</p>
 
-        <label class="sidebar-label" id="boardSizeInputLabel" for="boardSizeInput" data-i18n="boardSizeInputLabel">Grösse</label>
+        <label class="sidebar-label" id="boardSizeInputLabel" for="boardSizeInput"
+            data-i18n="boardSizeInputLabel">Grösse</label>
         <input id="boardSizeInput" type="range" min="4" max="13" value="8" oninput="previewBoardSize(this.value)">
         <div class="sidebar-size-row">
             <strong><span id="sidebarBoardSizeValue">8</span> x <span id="sidebarBoardSizeValueMirror">8</span></strong>
         </div>
 
-        <button class="btn" onclick="applyBoardSize()" id="applyBoardSizeButton" type="button" data-i18n="applyBoardSizeButton">Grösse anwenden</button>
-        <p class="sidebar-hint" id="settingsSidebarHint" data-i18n="settingsSidebarHint">Beim Ändern wird das Brett zur Sicherheit zurückgesetzt. Auf
+        <button class="btn" onclick="applyBoardSize()" id="applyBoardSizeButton" type="button"
+            data-i18n="applyBoardSizeButton">Grösse anwenden</button>
+        <p class="sidebar-hint" id="settingsSidebarHint" data-i18n="settingsSidebarHint">Beim Ändern wird das Brett zur
+            Sicherheit zurückgesetzt. Auf
             dem Handy ist 8x8 eingeplant, grössere Bretter können abgeschnitten wirken.</p>
     </aside>
 
@@ -256,7 +262,8 @@
                 type="button" data-i18n="saveSidebarClose">Schliessen</button>
         </div>
 
-        <p id="saveSidebarText" data-i18n="saveSidebarText">Gib dem Spielstand einen klaren Namen und optional eine kurze Notiz.</p>
+        <p id="saveSidebarText" data-i18n="saveSidebarText">Gib dem Spielstand einen klaren Namen und optional eine
+            kurze Notiz.</p>
 
         <label class="sidebar-label" id="saveNameLabel" for="saveNameInput" data-i18n="saveNameLabel">Name</label>
         <input class="sidebar-input" id="saveNameInput" type="text" maxlength="80"
@@ -271,7 +278,8 @@
             <span id="saveFavoriteLabel" data-i18n="saveFavoriteLabel">Als Favorit markieren</span>
         </label>
 
-        <button class="btn" onclick="saveGame()" id="saveNowButton" type="button" data-i18n="saveNowButton">Jetzt speichern</button>
+        <button class="btn" onclick="saveGame()" id="saveNowButton" type="button" data-i18n="saveNowButton">Jetzt
+            speichern</button>
     </aside>
 
     <aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
@@ -284,14 +292,16 @@
         <p id="savePointsSidebarText" data-i18n="savePointsSidebarText">Wähle einen Speicherstand aus der Liste.</p>
 
         <div class="save-point-filters">
-            <label class="sidebar-label" id="savePointModeFilterLabel" for="savePointModeFilter" data-i18n="savePointModeFilterLabel">Modus</label>
+            <label class="sidebar-label" id="savePointModeFilterLabel" for="savePointModeFilter"
+                data-i18n="savePointModeFilterLabel">Modus</label>
             <select class="sidebar-input" id="savePointModeFilter" onchange="refreshSavePoints()">
                 <option value="all" data-i18n="filterAll">Alle</option>
                 <option value="queens" data-i18n="filterQueens">Damen</option>
                 <option value="rooks" data-i18n="filterRooks">Türme</option>
             </select>
 
-            <label class="sidebar-label" id="savePointSizeFilterLabel" for="savePointSizeFilter" data-i18n="savePointSizeFilterLabel">Brettgrösse</label>
+            <label class="sidebar-label" id="savePointSizeFilterLabel" for="savePointSizeFilter"
+                data-i18n="savePointSizeFilterLabel">Brettgrösse</label>
             <select class="sidebar-input" id="savePointSizeFilter" onchange="refreshSavePoints()">
                 <option value="all" data-i18n="filterAll">Alle</option>
                 {% for board_size in range(4, 14) %}
@@ -299,7 +309,8 @@
                 {% endfor %}
             </select>
 
-            <label class="sidebar-label" id="savePointSortFilterLabel" for="savePointSortFilter" data-i18n="savePointSortFilterLabel">Sortierung</label>
+            <label class="sidebar-label" id="savePointSortFilterLabel" for="savePointSortFilter"
+                data-i18n="savePointSortFilterLabel">Sortierung</label>
             <select class="sidebar-input" id="savePointSortFilter" onchange="refreshSavePoints()">
                 <option value="newest" data-i18n="filterNewest">Neueste zuerst</option>
                 <option value="oldest" data-i18n="filterOldest">älteste zuerst</option>
@@ -309,12 +320,14 @@
 
             <label class="sidebar-checkbox">
                 <input id="savePointFavoritesOnly" type="checkbox" onchange="refreshSavePoints()">
-                <span id="savePointFavoritesOnlyLabel" data-i18n="savePointFavoritesOnlyLabel">Nur Favoriten anzeigen</span>
+                <span id="savePointFavoritesOnlyLabel" data-i18n="savePointFavoritesOnlyLabel">Nur Favoriten
+                    anzeigen</span>
             </label>
         </div>
 
         <div class="save-points-list" id="savePointsList">
-            <p class="sidebar-hint" id="savePointsEmptyState" data-i18n="savePointsEmptyState">Noch keine Speicherstände gefunden.</p>
+            <p class="sidebar-hint" id="savePointsEmptyState" data-i18n="savePointsEmptyState">Noch keine Speicherstände
+                gefunden.</p>
         </div>
     </aside>
 
@@ -326,12 +339,13 @@
     <section class="modal" id="infoModal" aria-hidden="true" aria-labelledby="infoModalTitle">
         <div class="modal-header">
             <h3 id="infoModalTitle">Spielregeln und Acht-Damen-Problem</h3>
-            <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)"
-                type="button" data-i18n="infoModalClose">Schliessen</button>
+            <button class="btn secondary sidebar-close" onclick="toggleInfoModal(false)" type="button"
+                data-i18n="infoModalClose">Schliessen</button>
         </div>
 
         <div class="modal-content">
-            <p data-i18n="infoModalIntro">Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine Konflikte.</p>
+            <p data-i18n="infoModalIntro">Setze pro Reihe genau eine Figur auf das Brett. Eine gültige Lösung hat keine
+                Konflikte.</p>
 
             <h4 data-i18n="infoModalModeHeading">So funktioniert der aktuelle Modus</h4>
             <p id="infoModeRuleText">Im Damen-Modus dürfen sich Damen weder in derselben Spalte noch diagonal
@@ -343,7 +357,8 @@
                 kombinatorische Suche und Backtracking.</p>
 
             <h4 data-i18n="infoModalTimeHeading">Was zeigen Zeit und Schritte?</h4>
-            <p data-i18n="infoModalTimeText">Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das aktuelle Spiel weiter,
+            <p data-i18n="infoModalTimeText">Der Schrittzähler erfasst deine Züge auf dem Brett. Die Zeit läuft für das
+                aktuelle Spiel weiter,
                 auch wenn du die Seite neu lädst. Beim Speichern werden Zeit und Schritte zusammen mit dem
                 Save-Point abgelegt.</p>
         </div>
@@ -352,4 +367,4 @@
     <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/app/templates/privacy.html b/app/templates/privacy.html
index 0c1ce2c..acf1d3c 100644
--- a/app/templates/privacy.html
+++ b/app/templates/privacy.html
@@ -56,7 +56,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="processingPurposeTitle">3. Zweck der Verarbeitung</h2>
+            <h2 data-i18n="processingPurposeTitle">2. Zweck der Verarbeitung</h2>
             <p data-i18n="processingPurposeText">Die Verarbeitung erfolgt, um die Funktionen dieser Anwendung
                 bereitzustellen. Dazu gehoeren insbesondere:
             </p>
@@ -70,7 +70,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="legalBasisTitle">4. Rechtsgrundlage</h2>
+            <h2 data-i18n="legalBasisTitle">3. Rechtsgrundlage</h2>
             <p data-i18n="legalBasisText">
                 Soweit personenbezogene Daten verarbeitet werden, erfolgt dies in der Regel zur Bereitstellung der
                 Anwendung und ihrer Funktionen sowie aufgrund des berechtigten Interesses an einem sicheren und
@@ -80,7 +80,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="storageTitle">5. Speicherung und Löschung</h2>
+            <h2 data-i18n="storageTitle">4. Speicherung und Löschung</h2>
             <p data-i18n="storageText">
                 Personenbezogene Daten werden nur so lange gespeichert, wie sie für den jeweiligen Zweck benötigt
                 werden. Benutzerkonten und zugehörige Spielstände bleiben grundsätzlich gespeichert, bis sie
@@ -89,7 +89,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="thirdPartyTitle">6. Weitergabe an Dritte</h2>
+            <h2 data-i18n="thirdPartyTitle">5. Weitergabe an Dritte</h2>
             <p data-i18n="thirdPartyText">
                 Eine Weitergabe personenbezogener Daten erfolgt nur, wenn dies für den Betrieb der Anwendung
                 erforderlich ist, etwa durch einen Hosting-Anbieter oder technische Dienstleister. Ansonsten werden
@@ -98,7 +98,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="rightsTitle">7. Rechte betroffener Personen</h2>
+            <h2 data-i18n="rightsTitle">6. Rechte betroffener Personen</h2>
             <p data-i18n="rightsText">Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts insbesondere
                 das Recht auf:</p>
             <ul class="legal-list">
@@ -111,7 +111,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="securityTitle">8. Datensicherheit</h2>
+            <h2 data-i18n="securityTitle">7. Datensicherheit</h2>
             <p data-i18n="securityText">
                 Es werden technische und organisatorische Massnahmen getroffen, um gespeicherte Daten vor Verlust,
                 Missbrauch oder unberechtigtem Zugriff zu schuetzen. Dazu gehoeren insbesondere passwortgeschuetzte
@@ -120,7 +120,7 @@
         </section>
 
         <section class="legal-card">
-            <h2 data-i18n="versionTitle">9. Stand</h2>
+            <h2 data-i18n="versionTitle">8. Stand</h2>
             <p data-i18n="versionText">Stand dieser Vorlage: April 2026</p>
         </section>
     </main>

From 045d4bf575216843c3b087918b0489b61ff0c840 Mon Sep 17 00:00:00 2001
From: ScriptSorcerer20 <jerome.bachmann3@gmail.com>
Date: Wed, 8 Apr 2026 11:26:42 +0200
Subject: [PATCH 15/15] file for depolyment on cpanel

---
 passenger_wsgi.py | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 passenger_wsgi.py

diff --git a/passenger_wsgi.py b/passenger_wsgi.py
new file mode 100644
index 0000000..3cca8f4
--- /dev/null
+++ b/passenger_wsgi.py
@@ -0,0 +1,16 @@
+import os
+import sys
+
+
+PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
+
+if PROJECT_ROOT not in sys.path:
+    sys.path.insert(0, PROJECT_ROOT)
+
+os.chdir(PROJECT_ROOT)
+
+from app import create_app
+
+
+application = create_app()
+app = application