diff --git a/app/static/style.css b/app/static/style.css
index 127151b..e18319d 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1,18 +1,14 @@
 :root {
-    --primary: #c0392b; /* Modernes Rot */
+    --primary: #c0392b; /* Latein Rot */
     --primary-hover: #a93226;
-    --bg: #f4f6f8;      /* Modernes Hellgrau */
+    --bg: #f0f2f5;      /* Heller, moderner Hintergrund */
     --card-bg: #ffffff;
-    --text: #333333;
+    --text: #333;
     --border: #dfe6e9;
     --correct: #d4edda;
-    --correct-border: #28a745;
     --wrong: #f8d7da;
-    --wrong-border: #dc3545;
     --typo: #fff3cd;
-    --typo-border: #ffc107;
     --incomplete: #fff3cd;
-    --incomplete-border: #ffc107;
 }
 
 * { box-sizing: border-box; }
@@ -22,226 +18,130 @@ body {
     background-color: var(--bg);
     color: var(--text);
     margin: 0;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    padding: 20px 20px 70px 20px; /* Unten Platz für Progressbar */
 }
 
 .container {
-    max-width: 500px;
+    max-width: 480px; /* Handy-optimierte Breite (wie Englisch App) */
     width: 100%;
-    margin: auto;
+    margin: 20px auto; /* Zentriert mit Abstand oben */
+    flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    justify-content: flex-start; /* Oben anfangen */
 }
 
 h1 {
     text-align: center;
-    font-size: 1.8rem;
     color: var(--primary);
-    margin-bottom: 10px;
-    font-weight: 700;
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+    font-weight: 800;
 }
 
-/* --- CARD STYLE --- */
+/* --- CARD DESIGN (Alles in einer Box) --- */
 .card, #setup-screen {
     background: var(--card-bg);
     padding: 25px;
-    border-radius: 16px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    border-radius: 20px; /* Schön rund wie iOS */
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08); /* Weicher Schatten */
+    display: flex;
+    flex-direction: column; /* Alles untereinander */
+    width: 100%;
 }
 
-.section-title {
-    font-size: 1.1rem;
-    font-weight: 600;
-    margin-bottom: 15px;
-    text-align: center;
-    color: #666;
-}
-
-/* --- LEKTIONEN WAHL --- */
+/* Lektionen Auswahl */
+.section-title { font-weight: bold; margin-bottom: 15px; text-align: center; }
 .lesson-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
-    gap: 8px;
-    margin-bottom: 25px;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.lesson-item input { display: none; }
-.lesson-item label {
-    display: block;
-    padding: 10px 5px;
-    background: #f1f2f6;
-    border-radius: 8px;
-    text-align: center;
-    cursor: pointer;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: #555;
-    transition: all 0.2s;
-    border: 2px solid transparent;
-}
-
-.lesson-item input:checked + label {
-    background: var(--primary);
-    color: white;
-    box-shadow: 0 2px 5px rgba(192, 57, 43, 0.3);
-}
-
-/* --- OPTIONS --- */
-.options {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
     gap: 10px;
     margin-bottom: 20px;
-    padding: 10px;
-    background: #f9f9f9;
-    border-radius: 8px;
+    max-height: 40vh;
+    overflow-y: auto;
 }
-.options input { transform: scale(1.2); }
-.options label { cursor: pointer; font-size: 0.95rem; }
-
-/* --- QUIZ AREA --- */
-.label {
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #888;
-    margin-bottom: 5px;
+.lesson-item label {
+    display: block; padding: 8px; 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;
 }
-
-.question {
-    font-size: 2rem;
-    font-weight: 800;
-    color: #2d3436;
-    margin: 5px 0 10px 0;
+.lesson-item input:checked + label {
+    background: var(--primary); color: white;
 }
+.options { text-align: center; margin-bottom: 20px; }
 
-.hint {
-    font-style: italic;
-    color: #636e72;
-    margin-bottom: 25px;
-    font-size: 0.95rem;
-    min-height: 20px;
-}
 
-/* --- INPUTS --- */
-.input-row {
-    margin-bottom: 15px;
-    text-align: left;
-}
-
-.lbl {
-    display: block;
-    font-size: 0.85rem;
-    font-weight: bold;
-    color: #666;
-    margin-bottom: 5px;
-}
+/* 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; }
+.hint { font-style: italic; color: #636e72; font-size: 0.9rem; margin-bottom: 25px; min-height: 1.2em; }
 
+/* Inputs */
+.input-row { margin-bottom: 15px; }
+.lbl { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; color: #555; }
 .quiz-input {
-    width: 100%;
-    padding: 14px;
-    font-size: 1.1rem;
-    border: 2px solid var(--border);
-    border-radius: 10px;
-    outline: none;
-    transition: border-color 0.2s;
-    background: #fff;
+    width: 100%; padding: 15px; font-size: 1.1rem;
+    border: 2px solid #e0e0e0; border-radius: 12px;
+    background: #fdfdfd; transition: border 0.2s; outline: none;
     -webkit-appearance: none;
 }
+.quiz-input:focus { border-color: var(--primary); background: #fff; }
 
-.quiz-input:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
+/* Feedback Status Farben */
+.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;
 }
 
-/* Feedback Farben */
-.correct { background-color: var(--correct); border-color: var(--correct-border) !important; color: #155724; }
-.wrong { background-color: var(--wrong); border-color: var(--wrong-border) !important; color: #721c24; }
-.typo { background-color: var(--typo); border-color: var(--typo-border) !important; color: #856404; }
-.incomplete { background-color: var(--incomplete); border-color: var(--incomplete-border) !important; }
-
-/* --- BUTTONS & CONTROLS (HIER WAR DER FEHLER!) --- */
-
-/* --- BUTTONS & CONTROLS (Aggressiver Fix) --- */
-
+/* --- BUTTONS (Jetzt fest in der Karte) --- */
 .quiz-controls {
-    display: flex !important;
-    flex-direction: column !important; /* Erzwingt: Untereinander */
-    width: 100% !important;
-    gap: 15px !important;
-    margin-top: 20px !important;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 10px;
+    width: 100%;
 }
 
 .action-btn {
-    width: 100% !important; /* Erzwingt: Volle Breite */
-    display: block !important;
-    padding: 18px !important; /* Schön groß für den Daumen */
-    margin: 0 !important;
-    font-size: 1.2rem !important;
-    border-radius: 12px !important;
-}
-
-/* Der "Beenden" Button etwas dezenter, aber immer noch groß */
-.danger {
-    background-color: #ffffff !important;
-    color: #636e72 !important;
-    border: 2px solid #dfe6e9 !important;
-    margin-top: 5px !important;
-}
-
-.action-btn:hover { background: var(--primary-hover); }
-.action-btn:active { transform: scale(0.98); }
-.action-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
-.danger { background: #636e72; }
-
-/* --- FEEDBACK TEXT --- */
-.feedback {
-    margin-top: 15px;
-    font-weight: bold;
-    font-size: 1.1rem;
-    min-height: 25px;
-}
-
-/* --- PROGRESS BAR --- */
-.progress-container {
-    position: fixed;
-    bottom: 0; left: 0; right: 0;
-    background: white;
-    padding: 10px 20px;
-    border-top: 1px solid #eee;
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-#stats-text {
-    font-size: 0.85rem;
-    color: #666;
-    margin-bottom: 5px;
-    font-weight: 600;
-}
-
-.progress-bar-bg {
-    height: 8px;
-    background: #e9ecef;
     width: 100%;
-    max-width: 500px;
-    border-radius: 4px;
-    overflow: hidden;
+    padding: 18px; /* Große Touch-Fläche */
+    border: none;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.1s;
+    text-align: center;
 }
 
-.progress-bar-fill {
-    height: 100%;
-    background: var(--primary);
-    width: 0%;
-    transition: width 0.4s ease;
-    border-radius: 4px;
-}
\ No newline at end of file
+.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;
+}
+
+.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;
+    text-align: center; z-index: 99;
+}
+.progress-bar-bg { height: 8px; background: #eee; 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