app/static/style.css aktualisiert

app/static/style.css

@@ -1,7 +1,7 @@
 :root {
     --primary: #c0392b; /* Latein Rot */
     --primary-hover: #a93226;
-    --bg: #f0f2f5;      /* Heller, moderner Hintergrund */
+    --bg: #f0f2f5;
     --card-bg: #ffffff;
     --text: #333;
     --border: #dfe6e9;
@@ -18,20 +18,20 @@ body {
     background-color: var(--bg);
     color: var(--text);
     margin: 0;
-    padding: 20px;
+    padding: 20px 20px 80px 20px;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }
 
 .container {
-    max-width: 480px; /* Handy-optimierte Breite (wie Englisch App) */
+    max-width: 480px;
     width: 100%;
-    margin: 20px auto; /* Zentriert mit Abstand oben */
+    margin: 20px auto;
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start; /* Oben anfangen */
+    justify-content: flex-start;
 }
 
 h1 {
@@ -42,19 +42,19 @@ h1 {
     font-weight: 800;
 }
 
-/* --- CARD DESIGN (Alles in einer Box) --- */
+/* --- CARD DESIGN --- */
 .card, #setup-screen {
     background: var(--card-bg);
     padding: 25px;
-    border-radius: 20px; /* Schön rund wie iOS */
+    border-radius: 20px;
-    box-shadow: 0 8px 30px rgba(0,0,0,0.08); /* Weicher Schatten */
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
     display: flex;
-    flex-direction: column; /* Alles untereinander */
+    flex-direction: column;
     width: 100%;
 }
 
-/* Lektionen Auswahl */
+/* SETUP: LEKTIONEN */
-.section-title { font-weight: bold; margin-bottom: 15px; text-align: center; }
+.section-title { font-weight: bold; margin-bottom: 15px; text-align: center; color: #555; }
 .lesson-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
@@ -63,23 +63,55 @@ h1 {
     max-height: 40vh;
     overflow-y: auto;
 }
+
+/* HIER WAR DER FEHLER: Checkboxen verstecken */
+.lesson-item input { display: none; } 
+
 .lesson-item label {
-    display: block; padding: 8px; background: #f1f2f6; border-radius: 8px;
+    display: block; padding: 10px; background: #f1f2f6; border-radius: 8px;
     text-align: center; font-size: 0.9rem; font-weight: 600; cursor: pointer;
-    border: 2px solid transparent; transition: all 0.2s;
+    border: 2px solid transparent; transition: all 0.2s; color: #555;
 }
 .lesson-item input:checked + label {
     background: var(--primary); color: white;
+    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.2);
 }
-.options { text-align: center; margin-bottom: 20px; }
 
+/* SETUP: GRAMMATIK OPTION (Jetzt auch als Button) */
+.options {
+    margin-bottom: 20px;
+    text-align: center;
+}
+.options input { display: none; } /* Checkbox verstecken */
 
-/* Quiz Elemente */
+.options label {
+    display: block; /* Volle Breite wie ein Button */
+    padding: 12px;
+    background: #f1f2f6;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #555;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 2px solid transparent;
+}
+
+.options input:checked + label {
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.2);
+}
+.options input:checked + label::after {
+    content: " ✓"; /* Kleines Häkchen im Text wenn aktiv */
+}
+
+/* QUIZ ELEMENTE */
 .label { font-size: 0.75rem; text-transform: uppercase; color: #888; letter-spacing: 1px; margin-bottom: 5px; }
-.question { font-size: 2.2rem; font-weight: 800; color: #2d3436; margin: 0 0 5px 0; line-height: 1.2; }
+.question { font-size: 2.2rem; font-weight: 800; color: #2d3436; margin: 0 0 5px 0; line-height: 1.2; word-wrap: break-word; }
-.hint { font-style: italic; color: #636e72; font-size: 0.9rem; margin-bottom: 25px; min-height: 1.2em; }
+.hint { font-style: italic; color: #636e72; font-size: 0.9rem; margin-bottom: 20px; min-height: 1.2em; }
 
-/* Inputs */
+/* INPUTS */
 .input-row { margin-bottom: 15px; }
 .lbl { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; color: #555; }
 .quiz-input {
@@ -90,54 +122,33 @@ h1 {
 }
 .quiz-input:focus { border-color: var(--primary); background: #fff; }
 
-/* Feedback Status Farben */
+/* FEEDBACK STATUS */
 .correct { background-color: var(--correct); border-color: #28a745 !important; }
 .wrong { background-color: var(--wrong); border-color: #dc3545 !important; }
 .typo { background-color: var(--typo); border-color: #ffc107 !important; }
 .incomplete { background-color: var(--incomplete); border-color: #ffc107 !important; }
 
 .feedback {
-    min-height: 30px; margin-bottom: 15px; font-weight: bold; text-align: center;
+    min-height: 25px; margin-bottom: 15px; font-weight: bold; text-align: center; font-size: 1.1rem;
 }
 
-/* --- BUTTONS (Jetzt fest in der Karte) --- */
+/* BUTTONS */
 .quiz-controls {
-    display: flex;
+    display: flex; flex-direction: column; gap: 12px; margin-top: 10px; width: 100%;
-    flex-direction: column;
-    gap: 12px;
-    margin-top: 10px;
-    width: 100%;
 }
 
 .action-btn {
-    width: 100%;
+    width: 100%; padding: 18px; border: none; border-radius: 12px;
-    padding: 18px; /* Große Touch-Fläche */
+    font-size: 1.1rem; font-weight: 700; cursor: pointer;
-    border: none;
+    transition: transform 0.1s; text-align: center;
-    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-    font-size: 1.1rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: transform 0.1s;
-    text-align: center;
 }
-
 .action-btn:active { transform: scale(0.98); }
+.primary { background-color: var(--primary); color: white; box-shadow: 0 4px 10px rgba(192, 57, 43, 0.3); }
+.danger { background-color: #fff; color: #7f8c8d; border: 2px solid #ecf0f1; box-shadow: none; }
+.action-btn:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
 
-.primary {
+/* STATS */
-    background-color: var(--primary);
-    color: white;
-    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.3);
-}
-
-.danger {
-    background-color: #fff;
-    color: #7f8c8d;
-    border: 2px solid #ecf0f1;
-}
-
-.action-btn:disabled { opacity: 0.5; box-shadow: none; }
-
-/* Stats Footer */
 .progress-container {
     position: fixed; bottom: 0; left: 0; right: 0;
     background: #fff; padding: 15px; border-top: 1px solid #eee;