:root {
    /* Dark Theme (Default) */
    --background-color: #000000;
    --primary-text-color: #FFFFFF;
    --secondary-text-color: rgba(255, 255, 255, 0.7);
    --surface-color: #1e1e1e;
    --surface-hover-color: #2a2a2a;
    --border-color: #333;
    --button-primary-bg: #FFFFFF;
    --button-primary-fg: #000000;
    --icon-color: #FFFFFF;
    --inactive-opacity: 0.7;

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --header-height: 70px;
    --bottom-nav-height: 60px;

    /* Dynamische Schriftgrößen für größere Bildschirme */
    /* Größere Schriftgrößen für Desktop-Anzeigen. Auf kleineren Bildschirmen begrenzen
       die clamp()-Funktionen die Größe, sodass es nicht zu groß wirkt. */
    /* Größere Schriftgrößen für Desktop-Ansichten. Die unteren Grenzen
       sorgen dafür, dass auch auf kleinen Bildschirmen die Schrift
       ausreichend groß bleibt, während die oberen Grenzen für breite
       Monitore die Lesbarkeit verbessern. */
    --fs-h1: clamp(36px, 5vw, 56px);
    --fs-p: clamp(20px, 2.5vw, 28px);
    --fs-card-title: clamp(20px, 2.5vw, 28px);
    --fs-card-sub: clamp(16px, 2vw, 22px);
}

/* ======================= */
/* Lade-Overlay und Spinner */
/* Dieses Overlay wird während des initialen Ladevorgangs angezeigt, um
 * dem Benutzer eine Rückmeldung zu geben. Es beinhaltet eine
 * Fortschrittsanzeige und eine Rotationsanimation. */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
}

.loading-overlay.hidden {
    display: none;
}

.loading-overlay .loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--primary-color, #1e3a52);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.loading-overlay .loading-progress {
    width: 60%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-top: 1rem;
    overflow: hidden;
}

.loading-overlay .loading-bar {
    width: 0;
    height: 100%;
    background-color: var(--primary-color, #1e3a52);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.loading-overlay p {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #fff;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html[data-theme="light"] {
    /* Light Theme Overrides */
    --background-color: #FFFFFF;
    --primary-text-color: #203C50;
    --secondary-text-color: rgba(32, 60, 80, 0.7);
    --surface-color: #f0f4f8;
    --surface-hover-color: #e6eaf0;
    --border-color: #dde4e8;
    --button-primary-bg: #203C50;
    --button-primary-fg: #FFFFFF;
    --icon-color: #203C50;
    --inactive-opacity: 0.6;
}


/* --- Globale Stile & Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    /* Erlaube vertikales Scrollen, aber verhindere horizontales Scrollen. */
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--background-color);
    color: var(--primary-text-color);
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

.hidden {
    display: none !important;
}

/* --- Theme-basierte Logo-Sichtbarkeit (Korrigiert) --- */
/* Standard ist Dark Theme (siehe :root) */
.logo-light {
    display: none;
}
.logo-dark {
    display: block;
}

/* Überschreiben für Light Theme */
html[data-theme="light"] .logo-light {
    display: block;
}
html[data-theme="light"] .logo-dark {
    display: none;
}


/* --- Splash Screen --- */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    z-index: 100;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.splash-screen.fade-out {
    opacity: 0;
}

.splash-logo-container {
    animation: slideInFromLeft 1s ease-out forwards;
}

.splash-logo {
    width: 180px;
    height: auto;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Haupt-App-Layout --- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--background-color);
    display: flex;
    justify-content: flex-end; /* Angepasst, da Logo weg ist */
    align-items: center;
    padding: 0 16px;
    z-index: 10;
    gap: 8px;
}

.settings-btn {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    padding: 8px;
}

#reset-btn {
    color: #dc3545;
}
html[data-theme="light"] #reset-btn {
    color: #a02020;
}


.theme-menu {
    position: absolute;
    top: calc(var(--header-height) - 10px);
    right: 10px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 11;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.theme-menu button {
    background: none;
    border: none;
    color: var(--primary-text-color);
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-menu button:hover {
    background-color: var(--surface-hover-color);
}

.theme-menu button .check-icon {
    visibility: hidden;
}

.theme-menu button.active .check-icon {
    visibility: visible;
}


.app-content {
    flex: 1;
    overflow-y: auto;
    padding-top: var(--header-height);
    padding-bottom: var(--bottom-nav-height);
    position: relative;
}

.content-tab {
    display: none;
    padding: 24px;
    animation: fadeIn 0.4s ease-in-out;
}

.content-tab.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* Spezifisches Layout für den Lernen-Tab */
/* Der ehemals "Lernen" genannte Tab wurde zu "Tests" umbenannt. */
#tests-tab.active {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}
#tests-tab {
    padding: 0; /* Padding wird in den View-Containern verwaltet */
    /* Ermöglicht Scrollen im Tests-Tab auf großen Bildschirmen */
    overflow-y: auto;
}

.main-lernen-view, .all-results-container {
    padding: 16px;
    animation: fadeIn 0.4s;
    /* Damit die Liste bei langen Inhalten scrollbar bleibt */
    flex: 1;
    overflow-y: auto;
}

.all-results-container {
    position: relative;
    padding-top: 70px; /* Platz für den Zurück-Button */
}
.all-results-container .back-button {
    position: absolute;
    top: 20px;
    left: 16px;
}

#tests-tab h3 {
    font-size: 22px;
    margin-bottom: 12px;
    padding-left: 8px;
}
#tests-tab h3:not(:first-child) {
    /* Reduziere den Abstand zwischen den Überschriften, um auf großen
       Bildschirmen kompakter zu wirken. */
    margin-top: 12px;
}

.show-more-btn {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin-top: 12px;
    width: 100%;
    text-align: center;
    font-weight: 500;
    transition: background-color 0.2s;
}
.show-more-btn:hover {
    background-color: var(--surface-hover-color);
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* --- Untere Navigationsleiste --- */
.nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background-color: var(--background-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--icon-color);
    opacity: var(--inactive-opacity);
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.2s;
}

.nav-item.active {
    opacity: 1;
}

.nav-item svg {
    margin-bottom: 4px;
}

.nav-item span {
    font-size: 12px;
    color: var(--primary-text-color);
}

/* Größere Schrift in der Navigationsleiste auf großen Bildschirmen */
@media (min-width: 992px) {
    .nav-item span {
        font-size: 14px;
        font-weight: 500;
    }
    .nav-item svg {
        width: 26px;
        height: 26px;
    }
}

/* Light Mode Nav Bar Override */
html[data-theme="light"] .nav-bar {
    background-color: var(--button-primary-bg); /* Dunkelblau */
    border-top: 1px solid var(--button-primary-bg);
}
html[data-theme="light"] .nav-item {
    color: var(--button-primary-fg); /* Weiß */
    opacity: 0.7;
}
html[data-theme="light"] .nav-item.active {
    opacity: 1;
}
html[data-theme="light"] .nav-item span {
    color: var(--button-primary-fg); /* Weiß */
}


/* --- Tab-spezifische Stile --- */
/* Start Tab */
#start-tab h1 {
    font-size: var(--fs-h1);
    font-weight: bold;
    margin-bottom: 24px;
    color: var(--primary-text-color);
}

#start-tab .logo-container {
    margin-bottom: 24px;
}

#start-tab .logo-container img {
    width: 180px;
    height: auto;
}

#start-tab p {
    font-size: var(--fs-p);
    line-height: 1.6;
    max-width: 720px;
    color: var(--secondary-text-color);
}


/* Lernen Tab */
.test-list, .results-history-list {
    list-style: none;
    width: 100%;
    margin: 0;
}
.test-list-item, .result-history-item {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 16px;
}
.test-list-item:hover, .result-history-item:hover {
    background-color: var(--surface-hover-color);
}
.test-list-item:active, .result-history-item:active {
    transform: scale(0.98);
}
.test-list-item .icon, .result-history-item .icon {
    color: var(--icon-color);
    flex-shrink: 0;
}
/* Reduziere die Schriftgröße für die Ergebnisliste, um die Darstellung
   diskreter zu gestalten. */
.test-list-item .title, .result-history-item .title {
    font-weight: bold;
    font-size: 14px;
}

/* Untertitel für Testlisten und Ergebnisverläufe */
/* Kleinere Untertitel-Schrift für Testergebnisse */
.test-list-item .subtitle, .result-history-item .subtitle {
    font-size: 12px;
    color: var(--secondary-text-color);
}

.result-history-item {
    padding: 12px 16px;
}

.result-history-item .item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-history-item .subtitle {
    font-size: 13px;
    color: var(--secondary-text-color);
}


/* Kontakt Tab */
#kontakt-tab {
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Neues Kontaktlayout */
.kontakt-card {
    padding: 24px;
    max-width: 650px;
    margin: 0 auto;
}

.kontakt-section {
    margin-bottom: 24px;
}

.kontakt-section h4 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-text-color);
}

.kontakt-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dozent-item {
    margin-bottom: 8px;
}

.kontakt-list .contact-label {
    font-weight: 600;
    margin-right: 4px;
}

.kontakt-list .contact-link,
.kontakt-list .contact-text {
    color: var(--primary-text-color);
    text-decoration: none;
}

.kontakt-list .contact-link:hover {
    text-decoration: underline;
}

#kontakt-view-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.kontakt-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
}

.kontakt-view.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#kontakt-main-view.active {
    transform: translateX(0);
}

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    /* Größere Maximalbreite für breitere Buttons auf allen Geräten */
    max-width: 420px;
    /* Mehr Innenabstand, damit die Buttons größer wirken */
    padding: 24px;
    margin-bottom: 16px;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    border: none;
    border-radius: 8px;
    /* Größere Schrift für die Buttons im Kontakt-Tab */
    /* Reduziere die Schriftgröße der Kontakt‑Buttons, um sie weniger dominant erscheinen zu lassen */
    font-size: clamp(20px, 3vw, 32px);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
}
.contact-button:active {
    transform: scale(0.98);
}
.location-note {
    margin-top: 40px;
    color: var(--secondary-text-color);
}


#kontakt-email-view {
    justify-content: flex-start;
    padding-top: 80px;
}

#kontakt-email-view h3 {
    margin-bottom: 24px;
    font-size: 20px;
}

.email-options-list {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.email-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--primary-text-color);
    transition: background-color 0.2s;
}

.email-option:hover {
    background-color: var(--surface-hover-color);
}

.email-option svg {
    flex-shrink: 0;
    color: var(--icon-color);
}

.email-option-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.email-option strong {
    font-size: 16px;
    font-weight: bold;
}

.email-option span {
    font-size: 14px;
    color: var(--secondary-text-color);
    margin-top: 4px;
}

.back-button {
    position: absolute;
    top: 20px;
    left: 16px;
    background: none;
    border: none;
    color: var(--primary-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    padding: 8px;
}
.back-button svg {
    color: var(--icon-color);
}


/* --- Modals --- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

.modal-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    /* Größere Breite für Dialoge auf allen Geräten */
    width: 95%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.modal-container:not(.hidden) .modal-content {
    transform: scale(1);
}

/* ======================================== */
/* Einstellungen-Modal
 * Diese Stile definieren das Layout und das Aussehen des
 * Einstellungsdialogs, der über das Zahnradsymbol geöffnet wird. Die
 * Buttons für die Theme-Umschaltung und die Links zu Datenschutz und
 * Impressum sind so angeordnet, dass sie sowohl auf kleinen als auch
 * großen Bildschirmen gut funktionieren. */
.settings-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Titel für Abschnitte im Einstellungsmodal (z.B. "Design") */
.settings-section-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-text-color);
    margin-bottom: 4px;
    text-align: left;
}
.theme-toggle-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.legal-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-action-btn {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-action-btn:hover {
    background-color: var(--surface-hover-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
    min-width: 0; /* Important for flex truncation */
}

.modal-header h3 {
    font-size: 18px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#test-timer {
    display: none; /* Hidden by default */
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-text-color);
    background-color: var(--surface-hover-color);
    padding: 4px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: 300;
    color: var(--secondary-text-color);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

/* Größere Schrift in der Einleitung zur Prüfungssimulation und anderen Intro-Modalen */
#simulation-intro-modal .modal-body p,
#simulation-intro-modal .modal-body li {
    font-size: 18px;
    line-height: 1.6;
}

.modal-body p {
    text-align: left;
    line-height: 1.5;
}

.modal-body ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 20px;
    margin: 16px 0;
    text-align: left;
}
.modal-body ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}
.modal-body ul li strong {
    color: var(--primary-text-color);
}


#password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

#password-form input {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--primary-text-color);
    font-size: 16px;
}

#password-form button {
    padding: 12px;
    border-radius: 6px;
    border: none;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 10px;
}

.modal-footer button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    min-width: 100px;
    text-align: center;
    flex-grow: 1;
}

.modal-footer button#test-prev-btn, .modal-footer button#simulation-cancel-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
}


.modal-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Test Modal Specifics */
.question-container.active {
    display: block;
    animation: fadeIn 0.5s;
}

.question-topic {
    /* Themenbezeichnung pro Frage */
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    text-transform: none;
    color: var(--secondary-text-color);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.question-text {
    /* Größere Schrift für die Fragestellung, um die Lesbarkeit auf allen Geräten zu verbessern */
    font-size: clamp(20px, 3vw, 32px);
    margin-bottom: 24px;
    line-height: 1.4;
    text-align: left;
}

.question-points {
    font-size: 14px;
    font-style: italic;
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 16px;
    margin-top: -12px;
}

.options-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.option-item {
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    /* Größere Schrift für Antwortoptionen */
    font-size: clamp(18px, 2.5vw, 28px);
}

.review-mode .option-item {
    cursor: default;
    pointer-events: none;
}

.option-item.selected {
    border-color: var(--button-primary-bg);
    background-color: var(--surface-hover-color);
}

.option-item.correct {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: var(--primary-text-color);
}
html[data-theme="light"] .option-item.correct {
     color: #155724;
}


.option-item.incorrect {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: var(--primary-text-color);
}
html[data-theme="light"] .option-item.incorrect {
     color: #721c24;
}

/* Stil für teilweise richtige Antworten (1 von 2 Punkten) */
.option-item.partial {
    background-color: rgba(240, 173, 78, 0.2);
    border-color: #f0ad4e;
    color: var(--primary-text-color);
}
html[data-theme="light"] .option-item.partial {
     color: #856404;
}


.results-summary {
    text-align: left;
}
.results-summary h3 {
    /* Etwas kleinere Überschrift im Ergebnisbereich */
    font-size: 18px;
    margin-bottom: 8px;
}
 .results-summary .pass-status {
    /* Verkleinerte Anzeige für Bestanden/Nicht bestanden */
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    margin: 16px 0;
    text-align: center;
}
.results-summary .pass-status.passed {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}
html[data-theme="light"] .results-summary .pass-status.passed {
    color: #155724;
}
.results-summary .pass-status.failed {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}
html[data-theme="light"] .results-summary .pass-status.failed {
    color: #721c24;
}
.results-summary p {
    margin-bottom: 20px;
    color: var(--secondary-text-color);
    font-size: 16px;
}
.results-summary h4 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}
.results-list {
    list-style: none;
    width: 100%;
    /* Kein max-height mehr, damit alle Ergebnisse sichtbar sind. */
    overflow-y: auto;
}
.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}
.result-item:hover {
    background-color: var(--surface-hover-color);
    border-color: var(--border-color);
}
.result-icon {
    flex-shrink: 0;
}
.result-icon svg {
    display: block; /* Fix alignment issues */
}
.result-icon.correct svg {
    color: #28a745;
}
.result-icon.incorrect svg {
    color: #dc3545;
}

/* Orange Icon für teilweise richtige Antworten */
.result-icon.partial svg {
    color: #f0ad4e;
}

/* Status-Icons in der Ergebnisliste (Start-Tab) */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    font-size: 20px;
    line-height: 1;
}
.status-icon.passed {
    color: #28a745;
}
.status-icon.failed {
    color: #dc3545;
}
.result-question-text {
    line-height: 1.4;
    /* Kleinere Schriftgröße für Fragen in der Ergebnisliste */
    font-size: clamp(14px, 1.6vw, 20px);
}

/* Zusätzliche Details in der Ergebnisliste */
.result-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.result-details {
    /* Kleinere Schriftgröße für Details (Deine Antwort / Richtig) */
    font-size: clamp(12px, 1.4vw, 18px);
    color: var(--secondary-text-color);
    margin-top: 6px;
}
.result-details span {
    display: block;
    margin-top: 2px;
}


/* --- Snackbar --- */
#snackbar {
    position: fixed;
    bottom: -100px; /* Start outside the screen */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 14px 22px;
    border-radius: 8px;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: bottom 0.5s ease-in-out;
}

/* ======================== */
/* Kontakt-Tab Styles */
/* Der Kontaktbereich zeigt übersichtlich die wichtigsten
   Kontaktdaten des fairInstituts mit passenden Icons an. */
.kontakt-info-container {
    padding: 24px;
    text-align: left;
}
.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    color: var(--primary-text-color);
}
.contact-label {
    font-weight: 600;
    margin-right: 4px;
    color: var(--primary-text-color);
}
.contact-link,
.contact-text {
    color: var(--primary-text-color);
    text-decoration: none;
}
.contact-link:hover {
    text-decoration: underline;
}
#snackbar.show {
    bottom: calc(var(--bottom-nav-height) + 20px);
}

/* ======================== */
/* Einstellungs-Reset-Button Styles */
/* Der Container richtet den Button rechts aus und fügt einen oberen Rand hinzu. */
.settings-reset-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
/* Schloss-Icon innerhalb des Reset-Buttons */
.reset-lock-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

/* Standort-Button Container im Kontakt-Tab */
.kontakt-location-btn {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Neue Buttons für den Kontakt-Tab: "E-Mail schreiben", "Anrufen" und "Standort" */
.kontakt-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mehr Abstand zwischen den Buttons für bessere Bedienbarkeit */
    gap: 12px;
    /* Größerer oberer Rand, um die Buttons weiter nach unten zu setzen */
    margin-top: 32px;
}

/* E-Mail-Menü mit sanfter Animation */
.email-menu {
    display: none;
    margin-top: 16px;
    width: 100%;
    max-width: 340px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.email-menu.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.email-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.email-option {
    display: block;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.email-option:hover {
    background-color: var(--surface-hover-color);
}

/* Anpassungen für den Reset-Button im Einstellungsmenü */
.settings-reset-row {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
}

/* Verkleinere und passe den Reset-Button an */
.reset-btn {
    /* Der Reset‑Button soll kleiner und diskreter sein als die anderen
       Buttons im Einstellungsmenü. Wir setzen flex zurück, damit er
       sich nicht dehnt, reduzieren das Padding und die Schriftgröße
       und übernehmen explizit die primären Buttonfarben aus den
       CSS‑Variablen, damit das Icon dieselbe Farbe annimmt wie der
       Text und sich mit dem Theme ändert. */
    flex: none;
    padding: 8px 14px;
    font-size: 13px;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
}
.reset-btn .reset-lock-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    fill: currentColor;
}

/* Passwort-Modal immer über anderen Dialogen anzeigen */
/*
 * Das Passwort-Modal muss über allen anderen Dialogen liegen. Eine
 * höhere z‑Index sorgt dafür, dass es nicht vom Einstellungsmodal
 * überdeckt wird. Zudem definieren wir hier keine Hintergrundfarbe,
 * damit es die generelle Modal-Transparenz übernimmt.
 */
#password-modal {
    z-index: 3000;
}

/*
 * Passe die Größe des Passwort‑Modals an. Es soll kleiner sein als
 * andere Dialoge, damit es nicht den gesamten Bildschirm ausfüllt.
 */
#password-modal .modal-content {
    width: 80%;
    max-width: 420px;
}

/* Verkleinere das "Test beenden"-Modal gegenüber dem Testdialog */
/*
 * Das Bestätigungsfenster zum Beenden eines Tests soll optisch kleiner
 * wirken als das eigentliche Testfenster. Wir wählen eine geringere
 * Breite und eine kleinere maximale Breite. Diese Einstellungen
 * greifen sowohl auf Mobilgeräten als auch auf Desktop.
 */
#close-confirm-modal .modal-content {
    width: 80%;
    max-width: 450px;
}

/*
 * Stilierung für das E‑Mail‑Modal.
 * Es erhält eine deutliche Reinzoom-/Rauszoom-Animation durch
 * eine unterschiedliche Skalierung, wenn es angezeigt oder
 * ausgeblendet wird. Die E‑Mail‑Optionen werden als kleine Karten
 * dargestellt, die Name und Adresse auf zwei Zeilen zeigen.
 */
/* Grundgröße und Animation für das Modal-Innere */
#email-modal .modal-content {
    /* Starte stärker verkleinert für eine auffälligere Zoom‑Animation */
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
/* Wenn das Modal sichtbar ist, wächst der Inhalt auf volle Größe */
#email-modal:not(.hidden) .modal-content {
    transform: scale(1);
    opacity: 1;
}
/* Beim Ausblenden schrumpft der Inhalt zurück */
#email-modal.hidden .modal-content {
    transform: scale(0.8);
    opacity: 0;
}

/* Layout und Typografie des E‑Mail‑Modals */
.email-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 24px;
}
.email-modal-body p {
    margin: 0 0 8px;
    font-size: 20px;
    text-align: center;
}
.email-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Darstellung der einzelnen E‑Mail‑Optionen */
.email-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    /* Nutze neutrale Farben aus der Oberfläche, damit die Texte in beiden Designs lesbar bleiben */
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    gap: 6px;
    width: 100%;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.email-option:hover {
    background-color: var(--surface-hover-color);
    color: var(--primary-text-color);
}
.email-option .option-name {
    font-size: clamp(22px, 4vw, 32px);
    /* Nutze mittlere Schriftstärke für bessere Lesbarkeit */
    font-weight: 600;
}
.email-option .option-address {
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 400;
}

/*
 * Footer-Buttons im "Test beenden"-Modal sollen auch auf kleinen
 * Bildschirmen korrekt dargestellt werden. Wir verwenden Flexbox mit
 * Zeilenumbruch für die Buttons und lassen sie auf kleinen Displays
 * untereinander anordnen.
 */
#close-confirm-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
#close-confirm-options .modal-action-btn {
    flex: 1 1 auto;
}

@media (max-width: 480px) {
    #close-confirm-options {
        flex-direction: column;
    }
    #close-confirm-options .modal-action-btn {
        width: 100%;
    }
}

/*
 * Auf größeren Bildschirmen sollen die Antwortoptionen etwas kleiner
 * erscheinen als die Fragestellung. Die clamp-Funktion reduziert den
 * Font-Size-Oberbereich.
 */
@media (min-width: 992px) {
    .option-item {
        font-size: clamp(16px, 2vw, 24px);
    }
}

/* ---------------- Responsive Anpassungen für große Bildschirme ---------------- */
/* Begrenze die Breite der App und zentriere auf großen Bildschirmen */
.app-container {
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 992px) {
    /* App-Container zentrieren und maximale Breite setzen */
    .app-container {
        max-width: 1320px;
    }
    /* Startseite skalieren */
    #start-tab h1 {
        font-size: var(--fs-h1);
    }
    #start-tab p {
        font-size: var(--fs-p);
        max-width: 820px;
    }
    #start-tab .logo-container img {
        /* Größeres Logo auf Desktop-Geräten */
        width: 280px;
    }
    /* Test- und Ergebnislisten vertikal untereinander anordnen. Auf großen
       Bildschirmen wird keine Grid-Darstellung genutzt, damit die Liste
       in voller Breite erscheint. */
    #tests-tab .test-list,
    #tests-tab .results-history-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    /* Größere Darstellung aller Modale auf Desktop */
    .modal-content {
        width: min(80vw, 900px);
        max-width: 900px;
        padding: 32px;
    }
    #password-input {
        font-size: 20px;
        padding: 14px 16px;
    }
    #password-form button {
        font-size: 20px;
        padding: 14px 18px;
    }

    /* Größere Schrift für Testtitel und Untertitel auf großen Bildschirmen */
    .test-list-item .title,
    .result-history-item .title {
        font-size: var(--fs-card-title);
    }
    .test-list-item .subtitle,
    .result-history-item .subtitle {
        font-size: var(--fs-card-sub);
    }

    /* In der Grid-Darstellung werden Abstände durch gap geregelt,
       daher entfernen wir den unteren Rand der Listenelemente. */
    .test-list-item,
    .result-history-item {
        margin-bottom: 0;
    }
}

@media (min-width: 1400px) {
    .app-container {
        max-width: 1480px;
    }
    #tests-tab .test-list,
    #tests-tab .results-history-list {
        gap: 22px;
    }
    /* Für sehr große Bildschirme Modale noch breiter */
    .modal-content {
        width: min(70vw, 1100px);
        max-width: 1100px;
    }
}