/* ============================================= */
/* 1. GRUNDLAGEN & VARIABLEN                      */
/* ============================================= */

:root {
    /* Farben */
    --primary: #007bff;
    --secondary: #6c757d;
    --success-bg: #e8f5e9;
    --success-text: #2e7d32;
    --error-bg: #fce8e6;
    --error-text: #c62828;
    --light-gray: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #212529;
    --white: #ffffff;
    --header-bg: var(--white);
    --dark-blue-gray: #2c3e50;

    /* Typografie */
    --font-family: 'Roboto', sans-serif;

    /* Layout */
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* ... (Grundlegende Stile für html, body, h1-h4 bleiben gleich) ... */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
    margin: 0;
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--light-gray);
    color: var(--text-color);
}
h1, h2, h3, h4 { margin-top: 0; margin-bottom: 0.75em; font-weight: 700; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }

/* in style.css */

html {
    height: 100%; /* Stellt sicher, dass das HTML-Element die volle Höhe hat */
}

body {
    min-height: 100%; /* Stellt sicher, dass der Body immer mindestens die volle Fensterhöhe einnimmt */
    display: flex; /* Aktiviert das Flexbox-Layout-Modell */
    flex-direction: column; /* Ordnet die Elemente (header, main, footer) untereinander an */
    
    /* Ihre bestehenden body-Stile bleiben unverändert */
    margin: 0;
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--light-gray);
    color: var(--text-color);
}

.main-page-content {
    flex: 1; /* Sagt dem Hauptinhalt, dass er allen verfügbaren freien Platz einnehmen soll */

    /* Ihre bestehenden .main-page-content-Stile bleiben unverändert */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ============================================= */
/* 2. ALLGEMEINES LAYOUT & KARTEN                */
/* ============================================= */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

.card {
    background: var(--white);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

/* ... (Header & Navigation bleiben gleich) ... */
.main-header {
    background-color: var(--header-bg);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5em; font-weight: 700; color: var(--primary); text-decoration: none; }
.main-nav ul { display: flex; gap: 25px; margin: 0; padding: 0; list-style: none; }
.main-nav a { padding: 10px 5px; color: #333; font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; transition: border-color 0.3s, color 0.3s; }
.main-nav a:hover, .main-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
.main-page-content { padding-top: 40px; padding-bottom: 40px; }

/* ============================================= */
/* 4. FOOTER                                     */
/* ============================================= */

footer {
    padding: 30px 15px;
    margin-top: 40px;
    background-color: var(--dark-blue-gray);
    color: var(--white);
    text-align: center;
    font-size: 0.9em;
}
footer a {
    color: var(--white);
    text-decoration: none;
    transition: text-decoration 0.2s;
}
footer a:hover {
    text-decoration: underline;
}


/* ============================================= */
/* 5. ALLGEMEINE BUTTON-STILE                    */
/* ============================================= */

.button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--white);
    background-color: var(--primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}
.button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Farb-Modifikatoren */
.button-success { background-color: var(--success-text); }
.button-success:hover { background-color: #256a2a; }

.button-danger { background-color: var(--error-text); }
.button-danger:hover { background-color: #a92222; }

/* KORREKTUR: Eigene Klassen für spezielle Buttons beibehalten, um das Design nicht zu brechen. */
/* Sie erben nicht mehr von .button, um Konflikte zu vermeiden. */

.start-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    background-color: var(--primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
.start-button:hover {
    background-color: #0056b3;
}

.submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    font-size: 1.1em;
    color: #fff;
    background-color: var(--success-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* ============================================= */
/* 6. STARTSEITE & QUIZ-KONFIGURATION              */
/* ============================================= */

/* ... (Begrüßungstexte bleiben gleich) ... */
.welcome-message { text-align: center; margin-bottom: 5px; }
.welcome-subtitle { text-align: center; margin-bottom: 30px; color: var(--secondary); }

.quiz-config-card h2 {
    text-align: center;
}

/* KORREKTUR: Die ursprünglichen Selektoren werden wieder verwendet, um das HTML nicht ändern zu müssen. */
.name-input, .quiz-options, .quiz-config-card fieldset {
    padding: 15px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}
/* Letztes Element im Card hat keinen unteren Rand mehr */
.quiz-config-card > *:last-child {
    border-bottom: none;
}

.name-input > label, .option-label > label {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text-color);
}
fieldset {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
}
legend {
    padding: 0 10px;
    font-weight: 700;
}
.input-description {
    font-size: 0.9em;
    color: var(--secondary);
    margin: 5px 0 10px 0;
}

/* ... (Rest der Startseiten-Stile bleibt größtenteils gleich) ... */
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
}

.category-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    background-color: var(--light-gray);
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.category-label:hover { background-color: #e9ecef; }
.category-name-wrapper { display: flex; align-items: center; }
.category-name-wrapper input[type="checkbox"] { margin-right: 12px; }
input[type="checkbox"]:checked + span { font-weight: bold; }
.question-count { font-size: 0.9em; color: var(--secondary); }
.ai-plus { color: var(--primary); font-weight: bold; }

.advanced-options { margin-top: 25px; border: 1px solid var(--border-color); border-radius: 4px; }
.advanced-options summary { padding: 12px 15px; font-weight: 700; cursor: pointer; outline: none; transition: background-color 0.2s; }
.advanced-options summary:hover { background-color: var(--light-gray); }
.advanced-options[open] summary { border-bottom: 1px solid var(--border-color); }
.advanced-options .options-content { padding: 15px; }

.option-group { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.option-group .quiz-options { flex: 1; min-width: 200px; padding: 0; border: none; }
.quiz-options { display: flex; justify-content: space-between; align-items: center; }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(22px); }

.error {
    background-color: var(--error-bg);
    color: var(--error-text);
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

/* KORREKTUR für Formular-Layout */
.name-input > label {
    display: block; /* Stellt sicher, dass das Label immer eine eigene Zeile einnimmt */
    margin-bottom: 5px; /* Fügt einen kleinen Abstand zum Eingabefeld hinzu */
}

/* KORREKTUR: input[type="password"] zum Selektor hinzufügen */
input[type="text"],
input[type="number"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
}
/* ... Die restlichen Sektionen (Quiz-Seite, Ergebnisse, Bestenliste etc.) bleiben wie in der ersten optimierten Version, da sie korrekt waren. Ich füge sie hier der Vollständigkeit halber ein. */

/* ============================================= */
/* 7. QUIZ-SEITE                                 */
/* ============================================= */
.quiz-header { display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 700; color: var(--secondary); }
.progress-bar-container { width: 100%; background-color: #e9ecef; border-radius: 5px; margin-bottom: 25px; }
.progress-bar { height: 10px; background-color: var(--primary); border-radius: 5px; transition: width 0.3s ease-in-out; }
.question-text { font-size: 1.4em; margin-bottom: 20px; }
.question-image { width: 90%; margin: 0 auto 20px auto; }
.question-image img { max-width: 100%; height: auto; border-radius: 4px; }
.answer { display: flex; padding: 15px; margin-bottom: 10px; background: #f8f9fa; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, background-color 0.2s; }
.answer:hover { border-color: var(--primary); }
.answer input[type="radio"] { margin-right: 15px; transform: translateY(2px); }
.explanation-details { margin-top: 25px; border: 1px solid var(--border-color); border-radius: 4px; }
.explanation-details summary { padding: 10px; cursor: pointer; font-weight: 700; outline: none; }
.explanation-content { padding: 15px; background-color: var(--light-gray); border-top: 1px solid var(--border-color); }
.button-terminate { color: var(--secondary); text-decoration: none; }
.button-terminate:hover { color: var(--error-text); }


/* ============================================= */
/* 8. ERGEBNISSEITE                              */
/* ============================================= */
.results-card h1 { text-align: center; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; margin: 20px 0; background: var(--light-gray); border-radius: var(--border-radius); }
.result-item { padding: 10px; }
.result-item .label { display: block; margin-bottom: 5px; font-weight: 700; }
.result-item .value { font-size: 1.2em; }
.ihk-bewertung { grid-column: 1 / -1; text-align: center; border-top: 1px solid var(--border-color); padding-top: 15px !important; }
.ihk-bewertung .label { margin-bottom: 10px; }
.ihk-note-block .note-text { font-size: 1.2em; display: block; }
.ihk-note-block .bestehen-text { display: block; margin-top: 5px; font-size: 1.1em; font-weight: 700; }
.review-section { margin-top: 30px; }
.review-section h2 { border-bottom: 2px solid var(--primary); padding-bottom: 10px; }
.review-question { padding: 15px; border-bottom: 1px solid var(--border-color); }
.review-answer { background: var(--success-bg); padding: 10px; border-radius: 4px; font-weight: 700; }
.review-explanation { margin-top: 10px; padding: 10px; background-color: #f1f3f5; border-radius: 4px; }


/* ============================================= */
/* 9. BESTENLISTE & UPDATES                      */
/* ============================================= */
.highscore-card h2, .changelog-card h2 { text-align: center; }
.highscore-card table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* Optional: Sorgt für ein stabileres Spaltenlayout */
}
.highscore-card th, .highscore-card td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.highscore-card th:nth-child(1), .highscore-card td:nth-child(1),
.highscore-card th:nth-child(7), .highscore-card td:nth-child(7) {
    width: 70px; /* Feste Breite für Platz und Aktion */
    text-align: center;
}

.highscore-card th {
    background-color: var(--light-gray);
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.highscore-card tr:nth-child(even) {
    background-color: var(--light-gray);
}
.highscore-card tr:hover {
    background-color: #e9ecef;
}
.highscore-card tr:last-child td {
    border-bottom: none;
}
.user-highlight { background-color: var(--success-bg); font-weight: 700; }
.user-highlight td:first-child { border-left: 4px solid var(--success-text); }

/* in Sektion 9. BESTENLISTE & UPDATES */
.highscore-card h2, .changelog-card h2 { text-align: center; }
/* ... (andere highscore-regeln) ... */

/* ### NEU: Verbesserte Changelog-Stile ### */
.changelog-card {
    padding: 15px; /* Reduziertes Padding, da die Einträge jetzt eigene haben */
}
.changelog-entry {
    background-color: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px 25px;
    margin-bottom: 20px;
}
.changelog-entry:last-child {
    margin-bottom: 0;
}
.changelog-entry h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
}
.changelog-date {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--secondary);
    background-color: var(--white);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
.changelog-entry ul {
    margin: 0;
    padding-left: 20px;
    color: #34495e;
    line-height: 1.7;
}
.changelog-entry li::marker {
    color: var(--primary);
}
.changelog-entry li strong {
    color: var(--text-color);
}


/* ============================================= */
/* 10. STATISCHE SEITEN & WIDGETS                */
/* ============================================= */
.about-page-content { display: flex; gap: 30px; }
.about-photo { flex: 0 0 200px; }
.about-photo img, .photo-placeholder { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.about-text { flex: 1; }
.photo-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #e9ecef; border: 2px dashed var(--border-color); color: var(--secondary); }
.photo-placeholder .fa-user { font-size: 4em; margin-bottom: 10px; }
.welcome-options { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; text-align: left; }
.welcome-box { display: block; flex: 1; min-width: 200px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-color); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.welcome-box:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.welcome-box i { font-size: 2em; color: var(--primary); margin-bottom: 10px; }
.welcome-box p { font-size: 0.9em; color: var(--secondary); }
.awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; }
.award-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border-radius: var(--border-radius); text-align: center; border: 1px solid var(--border-color); }
.award-item i { font-size: 2.5em; margin-bottom: 10px; }
.award-item span { font-size: 0.9em; font-weight: 700; }
.award-item.locked { background-color: var(--light-gray); color: #adb5bd; cursor: help; }
.award-item.unlocked { background-color: #fffbeb; color: #f59f0b; border-color: #f59f0b; }
.quote-text { position: relative; margin: 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--border-color); font-size: 1.2em; font-style: italic; }
.quote-text i { position: absolute; top: -10px; left: -15px; font-size: 1.5em; color: var(--border-color); opacity: 0.8; }
.quote-author { display: block; margin-top: 10px; color: var(--primary); font-weight: 700; text-align: right; }
.quote-context { margin: 10px 0 0 0; padding: 10px; background-color: var(--light-gray); border-radius: 4px; font-size: 0.85em; color: var(--secondary); }

/* ============================================= */
/* LAYOUT FÜR MASTER-ÜBUNGEN WIDGET              */
/* ============================================= */

.master-uebung-grid {
    display: grid;
    gap: 20px;
    /* Standardmäßig (für kleine Bildschirme) eine Spalte */
    grid-template-columns: 1fr;
}

/* Ab einer Bildschirmbreite von 600px, wechsle zu zwei Spalten */
@media (min-width: 600px) {
    .master-uebung-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ============================================= */
/* SPEZIELLE STILE FÜR PRÜFUNGS-KATEGORIEN       */
/* ============================================= */

/* Stil für Kategorien der Zwischenprüfung */
.category-style-blue {
    background-color: #e7f5ff; /* sehr helles Blau */
    border-left: 4px solid #4dabf7; /* kräftigeres Blau */
}

/* Stil für Kategorien der Abschlussprüfung */
.category-style-green {
    background-color: #e6fcf5; /* sehr helles Grün */
    border-left: 4px solid #20c997; /* kräftigeres Grün */
}

/* ### NEU: Stil für die praktische Prüfung ### */
.category-style-red {
    background-color: var(--error-bg); /* sehr helles Rot / Rosé aus Ihren Variablen */
    border-left: 4px solid #e57373; /* sanftes Rot */
}

/* ============================================= */
/* 11. DASHBOARD-GRID LAYOUT (NEU)               */
/* ============================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 25px; /* Abstand zwischen den Widgets */
    margin-bottom: 25px; /* Abstand zur Einstellungs-Box */
}

/* Weist ein Element an, die volle Breite einzunehmen */
.grid-item-full {
    grid-column: 1 / -1;
}

/* Entfernt den Standard-Abstand der Karten im Grid, da der 'gap' das übernimmt */
.dashboard-grid .card {
    margin-bottom: 0;
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 800px) {
    .dashboard-grid {
        grid-template-columns: 1fr; /* Alle Widgets untereinander */
    }
}

/* Hilfsklasse zum Zentrieren von Text */
.text-center {
    text-align: center;
}