From 4b4d5d117e3a7854577e485a902166e2e5558db1 Mon Sep 17 00:00:00 2001
From: sascha <sascha@schliep.it>
Date: Wed, 28 Jan 2026 18:55:30 +0000
Subject: [PATCH] app/static/style.css aktualisiert

---
 app/static/style.css | 58 ++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 2a19733..715f60c 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1,7 +1,7 @@
 :root {
-    --primary: #007bff;
+    --primary: #28a745; 
+    --primary-hover: #218838;
     --accent: #ff9800;
-    --success: #28a745;
     --danger: #dc3545;
     --bg: #f4f4f9;
 }
@@ -27,9 +27,15 @@ body {
     justify-content: center;
 }
 
+#quiz-screen {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+}
+
 h1 { text-align: center; margin-bottom: 20px; color: #333; }
 
-/* SETUP & BUTTONS */
 .section-title {
     font-weight: bold;
     margin: 20px 0 10px;
@@ -38,16 +44,15 @@ h1 { text-align: center; margin-bottom: 20px; color: #333; }
     text-transform: uppercase;
 }
 
-/* WICHTIG: Erzwingt vertikale Anordnung */
 .button-group, .quiz-controls {
     display: flex;
-    flex-direction: column !important; /* WICHTIG */
+    flex-direction: column !important;
     gap: 15px;
     width: 100%;
 }
 
 button {
-    display: block !important; /* WICHTIG */
+    display: block !important;
     width: 100%;
     padding: 16px;
     border: 2px solid #ddd;
@@ -57,13 +62,12 @@ button {
     font-weight: bold;
     cursor: pointer;
     text-align: center;
-    margin-bottom: 0; /* Gap regelt den Abstand */
 }
 
 button:hover { background: #f0f0f0; }
 
 button.active {
-    background: #e3f2fd;
+    background: #e9f7ef;
     border-color: var(--primary);
     color: var(--primary);
 }
@@ -74,29 +78,27 @@ button.active {
     color: #e65100;
 }
 
-/* Action Buttons (Start, Check, Next) */
-.action-btn {
-    color: white;
-    border: none;
-    margin-top: 10px;
-}
+.action-btn { color: white; border: none; margin-top: 0; transition: background 0.2s; }
 .primary { background: var(--primary); }
+.primary:hover { background: var(--primary-hover); }
+
 .secondary { background: #6c757d; }
 .danger { background: var(--danger); }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 
-/* QUIZ CARD */
 .card {
     background: white;
-    padding: 20px;
+    padding: 25px;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-.label { font-size: 0.9rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
-.question { font-size: 1.8rem; font-weight: bold; margin: 15px 0; color: #222; }
+.label { font-size: 0.9rem; color: #888; text-transform: uppercase; }
+.question { font-size: 2rem; font-weight: bold; margin: 15px 0; color: #222; }
 .hint { color: #888; font-style: italic; margin-bottom: 15px; }
 
 input {
@@ -111,13 +113,11 @@ input {
 }
 input:focus { border-color: var(--primary); outline: none; }
 
-/* FEEDBACK */
-.feedback { font-weight: bold; min-height: 25px; margin-top: 5px; font-size: 1.1rem; }
-.correct { color: var(--success); }
+.feedback { font-weight: bold; margin-top: 10px; font-size: 1.1rem; min-height: 25px;}
+.correct { color: var(--primary); }
 .wrong { color: var(--danger); }
 .typo { color: var(--accent); }
 
-/* OVERLAY (Seitenauswahl) */
 .overlay {
     display: none;
     position: fixed;
@@ -140,7 +140,7 @@ input:focus { border-color: var(--primary); outline: none; }
 }
 .page-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
     gap: 10px;
     overflow-y: auto;
     margin: 15px 0;
@@ -155,15 +155,15 @@ input:focus { border-color: var(--primary); outline: none; }
     color: #555;
     text-align: center;
     cursor: pointer;
+    border: 2px solid transparent;
 }
 .page-item input { display: none; }
 .page-item input:checked + label {
-    background: #e3f2fd;
+    background: #e9f7ef;
+    border-color: var(--primary);
     color: var(--primary);
-    border: 1px solid var(--primary);
 }
 
-/* PROGRESS BAR */
 .progress-container {
     background: white;
     padding: 10px;
@@ -172,5 +172,5 @@ input:focus { border-color: var(--primary); outline: none; }
     position: fixed;
     bottom: 0; left: 0; right: 0;
 }
-.progress-bar-bg { height: 8px; background: #eee; width: 100%; border-radius: 4px; overflow: hidden; margin-top: 5px;}
-.progress-bar-fill { height: 100%; background: var(--success); width: 0%; transition: width 0.3s; }
\ No newline at end of file
+.progress-bar-bg { height: 8px; background: #eee; width: 100%; border-radius: 4px; overflow: hidden; margin-top: 5px; }
+.progress-bar-fill { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s; }
\ No newline at end of file