diff --git a/app/static/style.css b/app/static/style.css index 8d1673f..246cf71 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -1,7 +1,7 @@ :root { - --primary: #c0392b; /* Modernes Rot für Latein */ + --primary: #c0392b; /* Modernes Rot */ --primary-hover: #a93226; - --bg: #f4f6f8; /* Kühles Hellgrau (Modern) */ + --bg: #f4f6f8; /* Modernes Hellgrau */ --card-bg: #ffffff; --text: #333333; --border: #dfe6e9; @@ -25,11 +25,11 @@ body { display: flex; flex-direction: column; min-height: 100vh; - padding: 20px; + padding: 20px 20px 70px 20px; /* Unten Platz für Progressbar */ } .container { - max-width: 500px; /* Handy-optimierte Breite */ + max-width: 500px; width: 100%; margin: auto; display: flex; @@ -45,7 +45,7 @@ h1 { font-weight: 700; } -/* --- CARD STYLE (Wie Englisch App) --- */ +/* --- CARD STYLE --- */ .card, #setup-screen { background: var(--card-bg); padding: 25px; @@ -61,14 +61,14 @@ h1 { color: #666; } -/* --- LEKTIONEN WAHL (Chips statt Checkboxen) --- */ +/* --- LEKTIONEN WAHL --- */ .lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-bottom: 25px; max-height: 300px; - overflow-y: auto; /* Scrollen wenn zu viele */ + overflow-y: auto; } .lesson-item input { display: none; } @@ -147,7 +147,7 @@ h1 { .quiz-input { width: 100%; padding: 14px; - font-size: 1.1rem; /* Groß genug für Handy (kein Zoom) */ + font-size: 1.1rem; border: 2px solid var(--border); border-radius: 10px; outline: none; @@ -167,9 +167,18 @@ h1 { .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 --- */ -.action-btn { +/* --- BUTTONS & CONTROLS (HIER WAR DER FEHLER!) --- */ + +/* Container für die Buttons: Buttons stapeln sich untereinander */ +.quiz-controls { + display: flex; + flex-direction: column; /* WICHTIG: Untereinander */ + gap: 15px; /* Abstand zwischen den Buttons */ width: 100%; +} + +.action-btn { + width: 100%; /* Volle Breite */ padding: 16px; font-size: 1.1rem; background: var(--primary); @@ -180,14 +189,14 @@ h1 { font-weight: 700; letter-spacing: 0.5px; transition: background 0.2s, transform 0.1s; - margin-top: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); + margin-top: 0; /* Kein extra Margin mehr nötig wegen gap */ } .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; margin-top: 15px; } +.danger { background: #636e72; } /* --- FEEDBACK TEXT --- */ .feedback {