diff --git a/css/style.css b/css/style.css index 07f932c..bcce3c8 100644 --- a/css/style.css +++ b/css/style.css @@ -134,6 +134,83 @@ body.dark #balken-container { background-color: #333; } +.quiz-container { + max-width: 760px; + margin: 2rem auto; + padding: 1rem; +} + +.quiz-card { + border: 1px solid #e2e8f0; + border-radius: 12px; + padding: 1.5rem; + background: #f8fafc; + box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08); +} + +.answer-list { + display: grid; + gap: 0.75rem; + margin: 1rem 0 0.5rem; +} + +.answer-button, +#next-button { + display: inline-block; + width: 100%; + padding: 0.85rem 1rem; + border-radius: 8px; + border: 1px solid #94a3b8; + background: #ffffff; + color: #111827; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.answer-button:hover, +#next-button:hover { + background-color: #e2e8f0; +} + +.answer-button:disabled { + cursor: default; + opacity: 0.7; +} + +.correct-answer { + border-color: #16a34a; + background: #dcfce7; +} + +.wrong-answer { + border-color: #dc2626; + background: #fee2e2; +} + +.feedback { + margin-top: 1rem; + font-weight: 600; +} + +.feedback.correct { + color: #166534; +} + +.feedback.wrong { + color: #991b1b; +} + +.quiz-score { + margin-top: 1rem; + font-weight: 700; +} + +.quiz-final { + margin-top: 1rem; + font-size: 1rem; +} + /* -------------------------------------- */ /* Roundtrip 2 — Farben nach Tageszeit */ /* -------------------------------------- */