/* ==========================================================================
   Gemeinsame Gestaltung der eigenständigen Simulationen
   (Habitus, Reizfilter, Sehen, Braille, Hören, LRS) – passend zum Kurs
   ========================================================================== */

:root {
    --page-bg: #f3f4f6;
    --surface: #ffffff;
    --surface-sunken: #f6f7f9;
    --ink: #1f2933;
    --ink-muted: #5b6573;
    --line: #e1e5ea;
    --line-strong: #c9d0d8;
    --brand: #00305e;
    --brand-soft: #e8eef6;
    --accent: #0b5cad;
    --ok: #1e7b36;
    --ok-soft: #e9f6ed;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);

    /* Variablen der einzelnen Seiten auf die Kursfarben abbilden */
    --bg-color: var(--page-bg);
    --container-bg: var(--surface);
    --card-bg: var(--surface);
    --text-color: var(--ink);
    --heading-color: var(--brand);
    --accent-color: var(--accent);
    --border-color: var(--line);
    --theme-text-muted: var(--ink-muted);
}
[data-theme="dark"] {
    --page-bg: #0d1117;
    --surface: #161b22;
    --surface-sunken: #1c222b;
    --ink: #d4dae1;
    --ink-muted: #8e99a6;
    --line: #2d3540;
    --line-strong: #3d4652;
    --brand: #8cc2ff;
    --brand-soft: rgba(88, 166, 255, 0.12);
    --accent: #6cb2ff;
    --ok: #56d364;
    --ok-soft: rgba(46, 160, 67, 0.14);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html { font-size: 17px; }
body {
    margin: 0 !important;
    padding: 0 0 2.5rem !important;
    background-color: var(--page-bg) !important;
    color: var(--ink);
    font-family: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif !important;
    line-height: 1.6;
}
h1, h2, h3, h4 { color: var(--brand); }
p { font-size: 1rem; }

/* --- Einheitlicher Seitenkopf ------------------------------------------- */
.sim-page-head { width: calc(100% - 3rem); max-width: 1040px; margin: 0 auto; padding: 1.75rem 0 1rem; box-sizing: border-box; }
.sim-page-kicker { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.sim-page-title { margin: 0 0 0.35rem; font-size: 1.7rem; line-height: 1.2; color: var(--brand); }
.sim-page-lead { margin: 0; max-width: 75ch; font-size: 0.95rem; color: var(--ink-muted); }
/* Eingebettet (Kurs, Hub) zeigt der Rahmen den Titel bereits an */
html.is-framed .sim-page-head { display: none; }
html.is-framed body { padding-top: 1.25rem !important; }

/* --- Inhaltsflächen ------------------------------------------------------ */
.wrapper, body > main {
    max-width: 1040px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}
body > main { width: calc(100% - 3rem); padding: 0 !important; }
.wrapper {
    width: calc(100% - 3rem);
    padding: 2rem 2.25rem !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
}
@media (max-width: 700px) {
    .wrapper { width: calc(100% - 1.5rem); padding: 1.25rem 1.1rem !important; }
    body > main { width: calc(100% - 1.5rem); }
    .sim-page-head { width: calc(100% - 1.5rem); padding: 1.25rem 0 0.75rem; }
}

/* Abschnittstitel innerhalb der Simulationen etwas zurücknehmen */
.screen > h1, #start-screen h1, #view-start h1 { font-size: 1.45rem !important; margin: 0 0 1rem !important; }
.screen > h2 { font-size: 1.25rem !important; }

/* --- Schaltflächen ------------------------------------------------------ */
button { font-family: inherit !important; }
.wrapper button, .primary-btn, .action-btn {
    border-radius: 8px !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    background-color: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    transform: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] .wrapper button, [data-theme="dark"] .primary-btn, [data-theme="dark"] .action-btn { color: #0d1117; }
.wrapper button:hover, .primary-btn:hover, .action-btn:hover { filter: brightness(1.08); opacity: 1 !important; }
.btn-nta { background-color: var(--surface) !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
.btn-udl { background-color: var(--ok) !important; border-color: var(--ok) !important; }
.btn-group { gap: 0.6rem !important; margin-top: 1.5rem !important; }

/* Antwortfelder als ruhige Auswahlkarten */
.answer-btn {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
    font-weight: 600 !important;
    padding: 0.85rem 1rem !important;
    border-radius: 10px !important;
}
.answer-btn:hover { border-color: var(--accent) !important; color: var(--brand) !important; background: var(--brand-soft) !important; filter: none; }
.answer-btn.selected { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--brand) !important; box-shadow: inset 0 0 0 1px var(--brand) !important; }

/* Kleine Werkzeug-Schaltflächen (Sehen, Braille) */
.nav-btn, .toolbar-btn, .skip-btn {
    border-radius: 8px !important;
    border: 1px solid var(--line-strong) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}
.nav-btn:hover, .toolbar-btn:hover, .skip-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
#btn-compare { border-radius: 8px !important; font-weight: 700 !important; }

/* --- Hinweise und Reflexion ---------------------------------------------- */
.disclaimer, .info-box, .didactic-tip, .reflection-box, #outro-reflection {
    background: var(--surface-sunken) !important;
    border: 0 !important;
    border-left: 4px solid var(--brand) !important;
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.93rem !important;
    font-style: normal !important;
    color: var(--ink) !important;
}

/* --- Formulare ----------------------------------------------------------- */
select, input[type="text"], .decoder-input {
    font-family: inherit !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--line-strong) !important;
    background-color: var(--surface) !important;
    color: var(--ink) !important;
}
select { padding: 0.55rem 0.8rem !important; min-height: 2.6rem; }
input[type="range"] { accent-color: var(--accent); }

/* --- Seiten-spezifische Flächen ----------------------------------------- */
/* Sehen */
.preview-section, .info-section, .info-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
}
.controls-row { border-radius: 10px !important; }
/* Hören */
.sim-panel {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
}
.panel-title { color: var(--brand) !important; font-size: 1rem !important; }
#start-screen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 2.25rem 2rem !important;
}
.audio-btn { border-radius: 8px !important; font-weight: 700 !important; }
/* Braille */
.mode-tile {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-card) !important;
}
.mode-tile:hover { border-color: var(--accent) !important; transform: translateY(-3px) !important; }
.mode-tile h2 { font-size: 1.1rem !important; }
.flashcard-face { border-radius: 14px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-card) !important; }
/* Habitus */
.exam-paper { border-radius: 10px !important; }
.grade-display { border-radius: 8px !important; }