/* Diese Datei enthält die grundlegenden Stile für das Business Quiz.
   Die meisten Design-Aspekte werden durch Tailwind CSS gesteuert, das in der PHP-Datei geladen wird.
   Hier können Sie bei Bedarf eigene, zusätzliche CSS-Regeln definieren. */

body {
    /* Die Schriftart wird über die PHP-Datei geladen, um Konflikte mit dem Theme zu vermeiden. */
}

/* Styling für die Feedback-Farben der Buttons */
.option-btn {
    transition: all 0.3s ease;
    /* KORREKTUR: Erzwingt den Zeilenumbruch für längere Antworttexte auf kleinen Bildschirmen. */
    white-space: normal;
    height: auto; /* Stellt sicher, dass die Höhe des Buttons mit dem Inhalt wächst. */
}

.option-btn.correct {
    background-color: #22c55e !important; /* green-500 */
    border-color: #16a34a !important; /* green-600 */
    color: white !important;
}

.option-btn.incorrect {
    background-color: #ef4444 !important; /* red-500 */
    border-color: #dc2626 !important; /* red-600 */
    color: white !important;
}

/* Animationen für den Übergang zwischen den Fragen */
.fade-out {
    animation: fadeOut 0.5s forwards;
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stellt sicher, dass das Quiz-Layout nicht durch Theme-Styles beeinflusst wird. */
#quiz-container {
    background: none; /* Entfernt mögliche Hintergrundfarben des Themes */
    padding: 0;
    margin: 0 auto;
}

/* KORREKTUR: Erhöhung der CSS-Spezifität, um Theme-Styles zu überschreiben. */
@media (max-width: 767px) {
    #quiz-container #start-screen h1 {
        font-size: 32px !important;
    }
    #quiz-container #question-text {
        font-size: 24px !important;
    }
}