:root {
    --bg-color: #F3F2EF;
    --text-main: #1E4349;
    --text-muted: #5a7b80;
    --border-color: #d6e0e2;
    --card-bg: #FAF8F2;
    
    --primary: #1E4349;      /* Teal */
    --success: #2a9d8f;      /* Akademie-Grün */
    --error: #e63946;        /* Akademie-Rot */
    --math-bg: #FDE7D7;      /* Apricot Light */
    --primary-hover: #132d31;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background: radial-gradient(circle at 85% 20%, #faece3 0%, var(--bg-color) 60%);
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Geist', sans-serif;
}

/* SIDEBAR STYLING (Spiegelt den harmonischen Glassmorphismus wider) */
.sidebar {
    width: 340px;
    background-color: rgba(250, 248, 242, 0.6);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    box-shadow: 4px 0 25px rgba(30, 67, 73, 0.02);
    z-index: 10;
}

.sidebar h1 {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.sidebar-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.4;
}

.topics-list {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.topics-list::-webkit-scrollbar {
    width: 6px;
}
.topics-list::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

/* Checkbox-Items (Design-Struktur bleibt zweckmäßig quadratisch, farblich angepasst) */
.topic-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.topic-item:hover {
    background-color: rgba(30, 67, 73, 0.04);
    color: var(--text-main);
}

.topic-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    margin-right: 14px;
    outline: none;
    cursor: pointer;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.topic-item input[type="checkbox"]:checked {
    background-color: var(--text-main);
    border-color: var(--text-main);
}

.topic-item.active {
    color: var(--primary);
    background-color: var(--math-bg);
}

.topic-item.active input[type="checkbox"] {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* DYNAMISCHER ZURÜCK BUTTON */
.btn-back {
    margin-top: 24px;
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 2px solid var(--border-color);
    padding: 14px 20px;
    border-radius: 50px; /* Pill Shape */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: block;
    box-shadow: 0 4px 12px rgba(30, 67, 73, 0.02);
}

.btn-back:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #ffffff;
    transform: translateY(-1px);
}


/* HAUPTBEREICH & DASHBOARD VIEW */
.main-content {
    flex-grow: 1;
    padding: 40px;
    overflow-y: auto;
    background: radial-gradient(circle at 50% 20%, #faece3 0%, var(--bg-color) 70%);
}

.tasks-container {
    max-width: 850px;
    margin: 0 auto;
}

/* START ZONE */
.start-zone {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 50px; /* Changed from 24px to match .btn-primary pill-shape */
    border: none;
    box-shadow: 0 8px 30px rgba(30, 67, 73, 0.06);
    text-align: center;
    margin-bottom: 35px;
}

.start-zone h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
}

.start-zone p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* BUTTONS */
.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 14px 36px;
    border-radius: 50px; /* Pill-Shape */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 67, 73, 0.12);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}


/* AUFGABEN KARTEN */
.task-card {
    position: relative;
    background-color: var(--card-bg);
    border-radius: 24px; /* Weiche Kurven */
    border: none;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(30, 67, 73, 0.06);
    animation: fadeIn 0.35s ease;
}

/* Linker Akzentbalken analog zu AP2 Lösungen */
.task-card::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 0;
    width: 4px;
    background-color: var(--primary);
    border-radius: 4px;
}

/* Neu aufgebaute Struktur für Header und Body */
.task-header {
    display: block;
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.task-category-label {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.task-body {
    display: block; /* Stoppt Flex-Blowout an der Wurzel */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 24px;
    overflow: hidden; /* Hard-Stop für jeglichen Overflow (MathJax) */
}

.task-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 16px;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.math-render-box {
    display: block;
    background: #fdfdfd;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
    font-size: 1.2rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Zwingt MathJax CHTML-Elemente strikt in die vorgegebene Breite */
mjx-container {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

mjx-container > svg {
    max-width: 100%;
    height: auto;
}

/* INPUT BEREICHE */
.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-input {
    width: 100%;
    max-width: 450px;
    padding: 14px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px; /* Pill Shape */
    font-size: 1rem;
    color: var(--text-main);
    background-color: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.task-input:focus {
    border-color: var(--primary);
}

/* FEEDBACK MELDUNGEN & INPUT STATUS */
.solution-feedback {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 10px;
    display: none;
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-block;
    width: max-content;
    max-width: 100%;
}

.feedback-correct { 
    background-color: #f0fdfa;
    color: var(--success); 
    border: 1px solid var(--success);
}

.feedback-info { 
    background-color: var(--math-bg);
    color: var(--text-main); 
}

.feedback-error { 
    background-color: #fef2f2;
    color: var(--error); 
    border: 1px solid var(--error);
}

/* Zustände der Eingabefelder nach dem Auswerten */
.task-input:disabled {
    background-color: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.8;
}

.task-input.input-correct:disabled {
    border-color: var(--success);
    color: var(--success);
    background-color: #f0fdf4;
}

.task-input.input-error:disabled {
    border-color: var(--error);
    color: var(--error);
    background-color: #fef2f2;
}

.action-zone {
    margin-top: 40px;
    text-align: right;
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
   ERWÄHLTE ZUSATZ-STYLES FÜR FILTER & AKKORDEON (DROPDOWN-LOOK)
   ========================================================================== */

/* Suchleiste */
.search-container {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.search-input {
    flex-grow: 1;
    width: auto;
    padding: 12px 18px;
    border: 2px solid var(--border-color);
    border-radius: 50px; /* Pill Shape */
    font-size: 0.9rem;
    color: var(--text-main);
    outline: none;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    font-weight: 500;
}

.search-input:focus {
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(30, 67, 73, 0.05);
}

/* NEU: Tutorial Button */
.btn-tutorial {
    flex-shrink: 0;
    width: 48px;
    border-radius: 50px;
    border: 2px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    color: var(--text-main);
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tutorial:hover {
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(30, 67, 73, 0.05);
}

/* Dropdown Kategorien-Wrapper */
.category-group {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}

/* Kategorie Header-Zeile */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
    user-select: none;
}

.category-header:hover {
    background-color: rgba(30, 67, 73, 0.05);
}

/* Drehpfeil */
.category-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

/* Akkordeon-Zustand: Eingeklappt */
.category-group.collapsed .category-content {
    display: none;
}

.category-group.collapsed .category-icon {
    transform: rotate(-90deg);
}

/* Checkbox-Inhalt Box */
.category-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-left: 4px;
}

/* =========================================================
   PRÜFUNGSMODUS & MODALS
   ========================================================= */
.sidebar.exam-mode-hidden { display: none !important; }
.main-content.exam-mode-active { display: flex; justify-content: center; align-items: flex-start; }
.main-content.exam-mode-active .tasks-container { width: 100%; max-width: 900px; }

@keyframes pulseTimer {
    0% { background-color: var(--error); transform: scaleY(1); }
    100% { background-color: #b91c1c; transform: scaleY(1.05); }
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(30, 67, 73, 0.4); backdrop-filter: blur(4px);
    z-index: 9999; display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-content {
    background: var(--card-bg); padding: 32px; border-radius: 24px;
    max-width: 400px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: scale(0.95); transition: transform 0.2s ease;
}
.modal-overlay.show .modal-content { transform: scale(1); }

/* =========================================================
   CONFIG MODAL (Options-Karten & Custom Radios)
   ========================================================= */
.config-options-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.config-option-card {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.config-option-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(30, 67, 73, 0.05);
}

/* Verstecke den nativen Browser-Button */
.config-option-card input[type="radio"] {
    display: none;
}

/* Der eigene, stylische Radio-Button */
.custom-radio {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin-right: 16px;
    margin-top: 2px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Zustand: Ausgewählt */
.config-option-card input[type="radio"]:checked + .custom-radio {
    border-color: var(--primary);
    background-color: var(--primary);
}

/* Der innere weiße Punkt */
.config-option-card input[type="radio"]:checked + .custom-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
}

/* Die Karte selbst, wenn ausgewählt */
.config-option-card:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background-color: var(--math-bg);
}

.option-text {
    display: flex;
    flex-direction: column;
}

.option-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.option-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* =========================================================
   CUSTOM TIME INPUT (Manuelle Zeitvorgabe)
   ========================================================= */
#custom-time-wrapper {
    display: none;
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

/* Der neue, breite Container, der sich optisch an die Karten anpasst */
.custom-time-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
}

/* Das Eingabefeld selbst */
.custom-time-field {
    width: 100px !important;
    padding: 10px 16px !important;
    text-align: center;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    border: 2px solid var(--border-color) !important;
    background-color: var(--bg-color) !important;
}

.custom-time-field:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
}

/* Pfeile (Spinners) beim Number-Input radikal ausblenden (Webkit & Firefox) */
.custom-time-field::-webkit-outer-spin-button,
.custom-time-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-time-field[type=number] {
    -moz-appearance: textfield;
}

/* Sekundärer Button (Abbrechen) */
.btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

/* =========================================================
   PRÜFUNGSMODUS: SCHWEBENDER ZURÜCK-BUTTON (OBEN LINKS)
   ========================================================= */
#btn-exam-exit {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 2000;
    background-color: rgba(250, 248, 242, 0.9);
    backdrop-filter: blur(10px);
    color: var(--text-main);
    border: 2px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 50px;
    font-family: 'Geist', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(30, 67, 73, 0.08);
}

#btn-exam-exit:hover {
    border-color: var(--error);
    color: var(--error);
    background-color: #ffffff;
    transform: translateY(-1px);
}

/* =========================================================
   NEUE AUFGABE BUTTON (In der Task-Card)
   ========================================================= */
.btn-new-task {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-new-task:hover {
    background-color: var(--math-bg);
    border-color: var(--primary);
}

/* HARTE SPERRE: Verstecken in der Prüfungs-Umgebung */
.main-content.exam-mode-active .btn-new-task {
    display: none !important;
}

/* =========================================================
   PRÜFEN-BUTTON (Sofort-Feedback pro Aufgabe)
   ========================================================= */
.btn-check-task {
    transition: all 0.2s ease;
}

.btn-check-task:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 67, 73, 0.15);
}

/* HARTE SPERRE: In der Prüfungs-Umgebung ausblenden */
.main-content.exam-mode-active .btn-check-task {
    display: none !important;
}

/* =========================================================
   SPICKER-SCHUBLADE PRO AUFGABE (nur Desktop > 900px)
   ========================================================= */

/* Basis-Styling überschreibt Inline-CSS bei Hover/Active */
.btn-spicker-task {
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-spicker-task:hover {
    border-color: var(--primary) !important;
    background-color: var(--math-bg) !important;
}

.btn-spicker-task.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(30, 67, 73, 0.15) !important;
}

/* Aufgabenkarte über die Schublade legen, damit diese "dahinter" hervorkommt */
.task-card {
    z-index: 1;
}

/* Die Schublade ist ein eigenständiges Element HINTER/UNTER der Karte.
   Die Aufgabenbox selbst ändert ihre Größe nicht – hier fährt eine kleine
   Box heraus. Reveal via 0fr -> 1fr (weich, unabhängig von der Inhaltshöhe). */
.spicker-drawer {
    position: relative;
    z-index: 0;              /* hinter der Aufgabenkarte */
    top: -24px;              /* konstant: Lade sitzt direkt unter der Karte (kein Margin-Sprung) */
    display: grid;
    grid-template-rows: 0fr;
    /* Es animiert NUR die Höhe:
       öffnen = wächst nach unten, schließen = fährt nach oben zurück. */
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.spicker-drawer.open {
    grid-template-rows: 1fr;
}

/* Kein Padding hier: sonst bleibt im eingefahrenen (0px) Zustand ein Streifen sichtbar. */
.spicker-drawer-inner {
    overflow: hidden;
    min-height: 0;
}

/* Die eigentliche "Lade": zentriert, eigener weißer Hintergrund + Schatten.
   Breite so, dass der Zettel weder abgeschnitten (zu schmal) noch zerrissen
   (zu breit) wird. Der kleine weiße Rand rundum kommt aus dem 6px-Padding von
   .spicker-section innerhalb des iframes (Seiten == unten).
   margin-bottom liefert dem Schatten Platz und wird im eingefahrenen Zustand
   mit weggeklappt (durch overflow:hidden des Inners). */
.spicker-drawer-box {
    max-width: 580px;
    margin: 0 auto 14px;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 26px -6px rgba(30, 67, 73, 0.18);
    /* Kein overflow:hidden nötig: der transparente iframe zeigt den runden
       weißen Hintergrund der Box; border-radius beschneidet den Hintergrund selbst. */
}

.spicker-drawer-frame {
    width: 100%;
    display: block;
    border: none;
    background: transparent;
}


/* Prüfungsmodus: Spicker komplett sperren */
.main-content.exam-mode-active .btn-spicker-task { display: none !important; }
.main-content.exam-mode-active .spicker-drawer { display: none !important; }

/* =========================================================
   SIDEBAR BUTTONS: OPTIMIERTER ABSTAND & LOOK
   ========================================================= */

/* Der Aktualisieren-Button (Oben) */
#btn-update-selection {
    display: none;
    width: 100%;
    margin-bottom: 4px; /* Minimaler Abstand zum nächsten Button */

    background-color: var(--primary);
    color: #ffffff;
    border: 2px solid var(--primary);
    padding: 12px 16px;
    border-radius: 50px;
    font-family: 'Geist', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(30, 67, 73, 0.1);
}

#btn-update-selection:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 6px 16px rgba(30, 67, 73, 0.2);
}

/* Der Zurück-Button (Unten) - Anpassung des Margin-Top */
.btn-back {
    margin-top: 8px; /* Deutlich verringert, damit er direkt am oberen Button klebt */
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 2px solid var(--border-color);
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: block;
    box-shadow: 0 4px 12px rgba(30, 67, 73, 0.02);
}

/* =========================================================
   LAYOUT-IDEE: SIDE-BY-SIDE GRID
   ========================================================= */
#start-zones-container.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 35px;
}

.layout-grid .start-zone {
    margin-bottom: 0; /* Überschreibt alte Abstände */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 40px 32px;
}

.layout-grid .zone-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.9;
}

.layout-grid .start-zone p {
    flex-grow: 1; /* Drückt den Button immer ganz nach unten */
    margin-bottom: 32px;
    font-size: 0.95rem;
}

.layout-grid .start-zone button {
    width: 100%; /* Klickziel maximieren */
    margin-top: auto;
}

.layout-grid .zone-exam {
    background-color: var(--math-bg);
    border: 2px solid var(--accent); /* Falls --accent fehlt, nutze #e2e8f0 */
    box-shadow: none;
}

.layout-grid .btn-exam {
    background-color: var(--error);
}

.layout-grid .btn-exam:hover {
    background-color: #b91c1c;
}

/* =========================================================
   TUTORIAL MODAL (DESKTOP)
   ========================================================= */
.tutorial-modal-content {
    background: var(--card-bg);
    padding: 32px;
    border-radius: 24px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal-overlay.show .tutorial-modal-content {
    transform: scale(1);
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    color: var(--text-main);
    margin: 0;
}

.tutorial-close-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
}

.tutorial-close-btn:hover {
    color: var(--error);
}

.tutorial-image-placeholder {
    width: 100%;
    height: 280px;
    background-color: #ffffff;
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.tutorial-description {
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.6;
    text-align: center;
    min-height: 50px;
    margin: 0;
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.tutorial-progress {
    display: flex;
    gap: 8px;
}

.tutorial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s ease;
}

.tutorial-dot.active {
    background: var(--primary);
}

.tutorial-actions {
    display: flex;
    gap: 12px;
}

@media (max-width: 900px) {
    /* Tutorial Modal Anpassungen für Mobile */
    .tutorial-modal-content {
        margin: 16px;
        padding: 24px 20px;
        gap: 16px;
    }

    .tutorial-header h3 {
        font-size: 1.3rem;
    }

    .tutorial-image-placeholder {
        height: 180px;
        font-size: 3rem;
    }

    .tutorial-description {
        font-size: 0.95rem;
        min-height: auto;
    }

    .tutorial-actions button {
        padding: 10px 16px !important;
        font-size: 0.95rem;
    }
}

/* =========================================================
   MOBILE APP-LAYOUT (Bottom Pill Navigation & Flashcard UI)
   ========================================================= */
.mobile-edge-toggle { display: none; }

@media (max-width: 900px) {
    /* 1. Nativer iOS Scroll & Klick-Fix (Animation Ready) */
    html, body {
        overflow: hidden !important; /* Body selbst scrollt nicht mehr, sondern die Container */
        height: 100vh !important;
        width: 100vw !important;
        position: fixed; /* Verhindert iOS Bounce-Effekt auf dem Viewport */
    }


    /* 2. Zurück-Button umbenennen und unten links fixieren */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0;
        width: 100vw !important;
        height: 100vh !important;
        border-right: none;
        padding-bottom: 100px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(0);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s, opacity 0.4s;
        visibility: visible;
        opacity: 1;
        z-index: 10;
    }

    #btn-zurueck {
        position: fixed;
        bottom: 24px;
        left: 5%;
        width: 42.5%;
        height: 54px;
        padding: 0 10px;
        margin: 0;
        z-index: 9999;
        font-size: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* NEU: Verhindert die Kollision mit dem Toggle-Button im Testbereich */
    body.mobile-view-main #btn-zurueck {
        display: none !important;
    }

    #btn-zurueck::after {
        content: "« Dashboard";
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* NEU: Wenn ein Test aktiv ist und der Nutzer in der Themenwahl ist */
    body.test-is-running #btn-zurueck::after {
        content: "✕ Beenden";
        color: var(--error);
        font-weight: 600;
    }

    .mobile-action-exit {
        display: none;
    }

    body.mobile-view-main .mobile-action-exit {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        bottom: 24px;
        right: 5%;
        width: 42.5%;
        height: 54px;
        background-color: var(--card-bg);
        color: var(--text-main);
        border: 2px solid var(--border-color);
        border-radius: 50px;
        font-family: 'Geist', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(30, 67, 73, 0.02);
        /* NEU: Beschränkt Transitionen strikt auf visuelle Wechsel, blockiert Layout-Glitches */
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 9999;
        cursor: pointer;
    }

    body.mobile-view-main .mobile-action-exit.is-error {
        color: var(--error);
    }

    body.mobile-view-main .mobile-action-exit:active {
        background-color: var(--border-color);
    }

    /* 3. Der Toggle-Button (Testbereich / Themenwahl) */
    .mobile-edge-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        bottom: 24px;
        height: 54px;
        padding: 0 10px;
        z-index: 9999;
        cursor: pointer;
        background-color: var(--card-bg);
        color: var(--text-main);
        border: 2px solid var(--border-color);
        border-radius: 50px;
        font-family: 'Geist', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(30, 67, 73, 0.02);
        /* NEU: Blockiert das seitliche "Sliden", animiert nur Hover/Active States */
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .mobile-edge-toggle:active { background-color: var(--border-color); }

    body:not(.mobile-view-main) .mobile-edge-toggle { right: 5%; width: 42.5%; }
    body.mobile-view-main .mobile-edge-toggle { left: 5%; right: auto; width: 42.5%; }

    /* Layout-Steuerung & Swipe-Animation */
    .main-content {
        position: fixed !important;
        top: 0; left: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        padding: 16px 16px 120px 16px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s, opacity 0.4s;
        visibility: hidden;
        opacity: 0;
        z-index: 20;
        display: block !important; /* Überschreibt altes display: none */
    }

    /* NEU: Sicherheits-Ebene - Zwingt iOS dazu, Klicks zu registrieren */
    .input-wrapper, .input-action-row, .mc-container {
        position: relative !important;
        z-index: 50 !important;
        pointer-events: auto !important;
    }

    /* NEU: Zwingt die Buttons und das Textfeld in den absoluten Vordergrund */
    .task-input, .btn-check-task, .btn-new-task, .mc-btn {
        position: relative !important;
        z-index: 60 !important;
        pointer-events: auto !important;
    }

    /* Swipe Animations-Zustände (Ersetzt harte Display-Wechsel) */
    body.mobile-view-main .sidebar {
        transform: translateX(-30%); /* Eleganter Parallax Effekt */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    body.mobile-view-main .main-content {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    body.exam-is-running .mobile-edge-toggle { display: none !important; }


    /* =========================================================
           5. FLASHCARD-UI & AUFGABEN-KARTEN OPTIMIERUNG
           ========================================================= */
    .task-card {
        min-height: auto !important; /* Hebt die erzwungene Bildschirmhöhe auf */
        display: flex;
        flex-direction: column;
        padding: 24px 20px !important;
        margin-bottom: 32px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 20px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .task-header {
        margin-bottom: 16px !important;
    }

    .task-desc {
        font-size: 0.95rem !important; /* Verkleinert auf mobilen Geräten, um Wortumbruch-Fehler bei langen deutschen Wörtern zu vermeiden */
        margin-bottom: 12px !important;
    }

    .math-render-box {
        font-size: 1.05rem !important;
        padding: 12px 0 !important; /* Kein horizontales Padding, um Box-Sizing Fehler zu vermeiden */
        border: none !important;
        background: transparent !important;
        margin: 16px 0 24px 0 !important; /* Fester Abstand verbindet Text, Formel und Input ohne extreme Lücken */
    }

    /* Input & Prüfen-Button rücken direkt an die Formel heran */
    .input-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .input-wrapper > div {
        flex-direction: column !important;
    }

    .btn-check-task {
        width: 100%;
        margin-top: 8px;
        padding: 16px !important; /* Maximales Touch-Target */
        font-size: 1.05rem !important;
    }

    /* Standard UX Fixes für Modals */
    .start-zone {
        padding: 24px 16px !important; /* Reduces the box height and width[cite: 1] */
        border-radius: 35px; /* Slightly softer curve for smaller screens */
    }

    /* Shrink the headings */
    .start-zone h2 {
        font-size: 1.25rem !important;
        margin-bottom: 8px !important;
    }

    /* Make text smaller and limit it to 3 lines (makes text "less") */
    .start-zone p {
        font-size: 0.85rem !important;
        margin-bottom: 16px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Hides text after 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Shrink the emojis */
    .layout-grid .zone-icon {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }

    /* =========================================================
           UX-FIXES FÜR AUFGABEN-KARTEN (FIXE HÖHE FÜR GLEICHHEIT)
           ========================================================= */

    .input-action-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: center !important; /* Zentriert die Buttons vertikal zueinander */
    }

    .task-input {
        grid-column: span 2 !important;
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 20px !important;
        margin-bottom: 4px !important;
    }

    /* Check-Button belegt linke Spalte (50%) */
    .btn-check-task {
        grid-column: span 1 !important;
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        font-size: 1.05rem !important;
        border: none !important;
        box-shadow: none !important;
        background-color: var(--primary) !important;
        color: #ffffff !important;
        transition: transform 0.2s ease;
    }

    /* Sekundärgruppe belegt rechte Spalte (50%) */
    .action-secondary-group {
        grid-column: span 1 !important;
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        height: 50px !important;
    }

    /* Spicker und Refresh teilen sich die 50% exakt auf (Flex 1) */
    .btn-spicker-task, .btn-new-task {
        flex: 1 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.3rem !important;
        border: 2px solid var(--border-color) !important;
        background-color: #ffffff !important;
        color: var(--text-muted) !important;
        transition: transform 0.2s ease;
    }

    .btn-check-task:active, .btn-spicker-task:active, .btn-new-task:active {
        transform: scale(0.96);
    }

    .math-render-box {
        font-size: 1rem !important; /* Formeln verkleinern gegen Overflows */
        padding: 12px 8px !important;
    }

    /* iOS Zoom-Schutz auch für die Suchleiste und das Zeit-Feld anwenden */
    .search-input, .custom-time-field {
        font-size: 16px !important;
    }
}