:root {
            --bg-base: #EFECE4;
            --primary: #3E4B41;
            --primary-hover: #2D372F;
            --card-bg: #FFFFFF;
            --text-main: #3E4B41;
            --text-muted: #7A857C;
            --border-light: rgba(62, 75, 65, 0.15);
            --correct: #5B8266;
            --wrong: #B85C5C;
            --correct-soft: #eef6f1;
            --wrong-soft: #fdf2f2;
            --progress-track: rgba(62, 75, 65, 0.12);
        }
        body.dark-mode {
            --bg-base: #1B1F1C;
            --primary: #5B8B68;
            --primary-hover: #6B9C78;
            --card-bg: #262B27;
            --text-main: #ECEFEA;
            --text-muted: #93A196;
            --border-light: rgba(236, 239, 234, 0.14);
            --correct: #6FAE7C;
            --wrong: #E08282;
            --correct-soft: rgba(111, 174, 124, 0.16);
            --wrong-soft: rgba(224, 130, 130, 0.16);
            --progress-track: rgba(236, 239, 234, 0.12);
        }
        body { transition: background-color 0.25s ease, color 0.25s ease; }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        button { outline: none; }
        button:focus:not(:focus-visible) { outline: none; }
        button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--primary);
        }
        body {
            font-family: 'Montserrat', sans-serif;
            background: var(--bg-base);
            color: var(--text-main);
            padding: 20px;
            margin: 0;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
        }

        /* ── Toast ── */
        .toast {
            position: fixed; bottom: 24px; left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: var(--primary); color: white;
            padding: 14px 20px; border-radius: 10px;
            font-size: 14px; font-weight: 600; line-height: 1.4;
            white-space: normal; word-break: break-word; overflow-wrap: break-word;
            box-sizing: border-box;
            width: min(88vw, 360px);
            text-align: center; box-shadow: 0 8px 22px rgba(0,0,0,0.2);
            z-index: 999; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
            pointer-events: none;
        }
        .toast.show { transform: translateX(-50%) translateY(0); }

        /* ── Screens ── */
        .screen { display: none; }
        .screen.active { display: block; }

        /* ── Typo & Shared ── */
        h1 { text-align:center; font-weight:800; font-size:1.8rem; letter-spacing:-0.5px; margin-bottom:6px; }
        .home-title-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px; }
        .home-title-row .home-title { margin-bottom:0; flex:1; }
        .subtitle { text-align:center; color:var(--text-muted); font-size:14px; font-weight:600; margin-bottom:30px; }
        .section-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); margin:28px 0 10px; padding-left:4px; }
        .grid { display:grid; grid-template-columns:1fr; gap:10px; }

        /* ── Back button (styled like a small solid btn) ── */
        .back-btn-sm {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--primary); color: white; border: none;
            border-radius: 8px; padding: 9px 16px;
            font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
            cursor: pointer; margin-bottom: 18px; transition: background 0.15s;
        }
        .back-btn-sm:active { background: var(--primary-hover); }

        /* ── Dark-Mode Toggle (nur auf der Startseite, im normalen Textfluss neben dem Titel) ── */
        .dark-mode-toggle {
            flex-shrink: 0;
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--card-bg); border: 1.5px solid var(--border-light);
            display: flex; align-items: center; justify-content: center;
            font-size: 19px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: border-color 0.15s, transform 0.15s;
        }
        .dark-mode-toggle:hover { border-color: var(--primary); }
        .dark-mode-toggle:active { transform: scale(0.92); }


        /* ── HOME cards ── */
        .home-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:10px; }
        .home-card {
            background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:14px;
            padding:24px 22px; cursor:pointer; transition:all 0.15s ease;
            text-align:left; width:100%; font-family:'Montserrat',sans-serif;
            display:flex; align-items:center; gap:18px;
        }
        .home-card:hover { border-color:var(--primary); transform:translateY(-1px); }
        .home-card:active { transform:scale(0.98); }
        .home-card-icon { font-size:2rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--bg-base); border-radius:12px; flex-shrink:0; }
        .home-card-body { flex:1; }
        .home-card-title { font-size:16px; font-weight:800; color:var(--text-main); margin:0 0 4px; }
        .home-card-sub { font-size:13px; font-weight:600; color:var(--text-muted); margin:0; }
        .home-card-arrow { font-size:20px; color:var(--text-muted); opacity:0.5; transition:opacity 0.15s, transform 0.15s; }
        .home-card:hover .home-card-arrow { opacity:1; transform:translateX(3px); }
        .home-card { position:relative; }
        .home-card-badge-new { position:absolute; top:-12px; right:-8px; width:52px; height:52px; z-index:2; pointer-events:none; }

        /* ── by qd footnote ── */
        .home-byline-row {
            display:flex; align-items:center; justify-content:flex-end; gap:8px;
            margin-top: 6px; padding-right: 2px;
        }
        .version-badge {
            display:inline-flex; align-items:center; justify-content:center;
            width: 6ch; font-size: 11px; font-weight: 600;
            color: var(--text-muted); opacity: 0.55;
            letter-spacing: 0.3px; font-family:'Montserrat',sans-serif;
            background: transparent; border: none; cursor: pointer; padding: 2px 0;
        }
        .version-badge:hover { opacity: 0.9; }
        .home-byline {
            text-align: right; font-size: 11px; font-weight: 600;
            color: var(--text-muted); opacity: 0.55;
            letter-spacing: 0.3px;
        }
        .version-modal-list { text-align:left; }
        .version-modal-entry { border-bottom:1.5px solid var(--border-light); padding:12px 0; }
        .version-modal-entry:last-child { border-bottom:none; padding-bottom:0; }
        .version-modal-num { font-size:14px; font-weight:800; color:var(--text-main); margin:0 0 3px; }
        .version-modal-notes { font-size:13px; font-weight:600; color:var(--text-muted); margin:0; line-height:1.4; }
        .version-modal-toggle {
            display:block; width:100%; text-align:center; background:transparent; border:none;
            color:var(--primary); font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px;
            padding:10px 0 0; cursor:pointer;
        }
        .version-modal-toggle:active { opacity:0.7; }

        /* ── PRÜFUNGS-DASHBOARD ── */
        .cat-item { background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:12px; overflow:hidden; transition:border-color 0.15s; }
        .cat-item:hover { border-color:var(--primary); }
        .cat-header { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:12px; }
        .cat-header-left { flex:1; }
        .cat-header-name { font-size:15px; font-weight:700; margin:0 0 6px; color:var(--text-main); }
        .cat-progress-row { display:flex; align-items:center; gap:10px; }
        .cat-mini-bar { flex:1; height:5px; background:var(--progress-track); border-radius:10px; overflow:hidden; }
        .cat-mini-fill { height:100%; background:var(--correct); border-radius:10px; transition:width 0.5s ease; }
        .cat-pct { font-size:12px; font-weight:700; color:var(--text-muted); min-width:36px; text-align:right; }
        .cat-chevron { font-size:18px; color:var(--text-muted); transition:transform 0.25s; flex-shrink:0; }
        .cat-item.open .cat-chevron { transform:rotate(90deg); }
        .cat-detail { max-height:0; overflow:hidden; transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1); }
        .cat-item.open .cat-detail { max-height:500px; }
        .cat-detail-inner { padding:0 20px 20px; border-top:1.5px solid var(--border-light); }
        .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 16px; }
        .stat-card { background:var(--bg-base); border-radius:10px; padding:12px 14px; }
        .stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:4px; }
        .stat-value { font-size:20px; font-weight:800; color:var(--text-main); }
        .stat-value.green { color:var(--correct); }
        .stat-value.red   { color:var(--wrong); }
        .start-cat-btn { width:100%; padding:14px; background:var(--primary); color:white; border:none; border-radius:9px; font-size:14px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; margin-bottom:10px; }
        .start-cat-btn:active { background:var(--primary-hover); }
        .reset-cat-btn { width:100%; padding:11px; background:transparent; color:var(--wrong); border:1.5px solid var(--wrong); border-radius:9px; font-size:13px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; }
        .reset-cat-btn:active { background:var(--wrong-soft); }
        .repeat-wrong-btn { width:100%; padding:11px; background:transparent; color:var(--primary); border:1.5px solid var(--primary); border-radius:9px; font-size:13px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; margin-top:10px; }
        .repeat-wrong-btn:active { background:var(--border-light); }
        .marked-btn { background:var(--primary); color:var(--card-bg); border:1.5px solid var(--primary); border-radius:10px; padding:18px 20px; font-size:15px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:background 0.15s; }
        .marked-btn:hover { background:var(--primary-hover); }
        .marked-count { background:rgba(255,255,255,0.2); border-radius:20px; padding:3px 10px; font-size:13px; }

        /* ── QUIZ ── */
        .progress-wrap { margin-bottom:20px; }
        .progress-meta { display:flex; justify-content:space-between; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:8px; }
        .progress-bar { height:5px; background:var(--progress-track); border-radius:10px; overflow:hidden; }
        .progress-fill { height:100%; background:var(--primary); border-radius:10px; transition:width 0.4s cubic-bezier(0.4,0,0.2,1); }
        .question-box { background:var(--card-bg); padding:24px; border-radius:14px; margin-bottom:20px; border:1.5px solid var(--border-light); min-width:0; overflow-wrap:break-word; }
        #question-text, #qm-question-text, #exam-question-text {
            font-size:1.2rem; font-weight:700; margin:0; line-height:1.45;
            overflow-wrap:break-word; word-break:break-word; hyphens:auto;
            -webkit-hyphens:auto; -ms-hyphens:auto;
        }
        .answer-btn { display:block; background:var(--card-bg); border:1.5px solid var(--border-light); color:var(--text-main); padding:16px 18px; margin:10px 0; border-radius:10px; width:100%; max-width:100%; box-sizing:border-box; font-size:15px; font-weight:600; font-family:'Montserrat',sans-serif; cursor:pointer; text-align:left; transition:border-color 0.15s, background 0.2s, color 0.2s; overflow-wrap:break-word; word-break:break-word; hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; }
        .answer-btn:hover:not(:disabled) { border-color:var(--primary); }
        .answer-btn:active:not(:disabled) { background:var(--bg-base); }
        .answer-btn:disabled { cursor:default; }
        .answer-btn.correct { background:var(--correct); color:white; border-color:var(--correct); }
        .answer-btn.wrong   { background:var(--wrong);   color:white; border-color:var(--wrong); }
        .nav-bar { display:flex; justify-content:space-between; margin-top:22px; gap:10px; }
        .action-btn { flex:1; padding:15px 10px; border-radius:10px; font-weight:700; font-size:14px; font-family:'Montserrat',sans-serif; cursor:pointer; transition:all 0.15s; text-align:center; }
        .btn-solid   { background:var(--primary); color:white; border:1.5px solid var(--primary); }
        .btn-solid:active { background:var(--primary-hover); }
        .btn-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
        .btn-outline:active { background:var(--border-light); }
        .btn-mark { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
        .btn-mark.is-marked { background:var(--primary); color:white; }
        .btn-end-round { background:transparent; color:var(--wrong); border:1.5px solid var(--wrong); }
        .btn-end-round:active { background:var(--wrong-soft); }
        .qm-weiter-btn { display:none; width:100%; margin-top:12px; padding:15px 10px; border:1.5px solid var(--correct); border-radius:10px; background:var(--correct); color:white; font-weight:700; font-size:14px; font-family:'Montserrat',sans-serif; cursor:pointer; text-align:center; transition:background 0.15s; }
        .qm-weiter-btn:active { background:#4a6d54; }

        /* ── QUIZMODUS: STREAK-FEUERWERK ── */
        .qm-fireworks-overlay {
            position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
            pointer-events:none; z-index:1100;
        }
        .qm-fireworks-overlay.play { animation: qmFireworksPop 1s ease-out forwards; }
        .qm-fireworks-emojis { font-size:4rem; text-align:center; text-shadow:0 4px 18px rgba(0,0,0,0.25); }
        .qm-fireworks-label { display:block; margin-top:8px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem; color:var(--primary); background:rgba(255,255,255,0.85); border-radius:10px; padding:4px 14px; }
        @keyframes qmFireworksPop {
            0%   { opacity:0; transform:scale(0.4); }
            18%  { opacity:1; transform:scale(1.15); }
            32%  { opacity:1; transform:scale(1); }
            78%  { opacity:1; transform:scale(1); }
            100% { opacity:0; transform:scale(1.25); }
        }

        /* ── END SCREEN ── */
        #end-screen { text-align:center; padding:40px 20px; }
        .end-icon  { font-size:3rem; margin-bottom:16px; }
        .end-title { font-size:1.6rem; font-weight:800; margin-bottom:10px; }
        .end-sub   { color:var(--text-muted); font-size:15px; margin-bottom:30px; }
        .end-btn { display:inline-block; padding:16px 32px; background:var(--primary); color:white; border:none; border-radius:10px; font-size:15px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; margin:6px; }
        .end-btn:active { background:var(--primary-hover); }
        .end-btn.outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }

        /* ── CONFIRM MODAL ── */
        .modal-overlay { position:fixed; inset:0; background:rgba(62,75,65,0.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
        .modal-box { background:var(--card-bg); border-radius:14px; padding:26px 22px; max-width:340px; width:100%; text-align:center; }
        .modal-text { font-size:15px; font-weight:700; margin:0 0 20px; line-height:1.4; color:var(--text-main); }
        .modal-actions { display:flex; gap:10px; }
        .modal-actions .action-btn { flex:1; }

        /* ══════════════════════════════════════
           FISCHE ERKENNEN
        ══════════════════════════════════════ */
        .modus-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px; }
        .modus-card {
            background:var(--card-bg); border:1.5px solid var(--border-light);
            border-radius:12px; padding:20px 18px; cursor:pointer;
            font-family:'Montserrat',sans-serif; text-align:left;
            display:flex; align-items:center; gap:16px; transition:all 0.15s ease;
        }
        .modus-card:hover { border-color:var(--primary); transform:translateY(-1px); }
        .modus-card:active { transform:scale(0.98); }
        .modus-icon { font-size:1.6rem; width:44px; height:44px; background:var(--bg-base); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .modus-body { flex:1; }
        .modus-title { font-size:15px; font-weight:800; margin:0 0 3px; color:var(--text-main); }
        .modus-sub   { font-size:12px; font-weight:600; color:var(--text-muted); margin:0; }
        .modus-arrow { font-size:18px; color:var(--text-muted); opacity:0.4; transition:opacity 0.15s, transform 0.15s; }
        .modus-card:hover .modus-arrow { opacity:1; transform:translateX(3px); }

        /* Fisch-Modus Stats */
        .fisch-modus-stats { margin-top:8px; padding:10px 14px; background:var(--bg-base); border-radius:8px; display:flex; gap:14px; flex-wrap:wrap; }
        .fms-item { font-size:12px; font-weight:700; color:var(--text-muted); }
        .fms-item span { color:var(--text-main); }
        .fms-item span.green { color:var(--correct); }
        .fms-item span.red   { color:var(--wrong); }
        .fms-reset { font-size:11px; font-weight:700; color:var(--wrong); background:none; border:none; cursor:pointer; font-family:'Montserrat',sans-serif; padding:0; margin-top:4px; text-decoration:underline; }

        .fisch-quiz-wrap { max-width:480px; margin:0 auto; }
        .fisch-img-box {
            background:var(--card-bg); border:1.5px solid var(--border-light);
            border-radius:16px; overflow:hidden; margin-bottom:18px;
            aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative;
        }
        .fisch-img-box img { width:100%; height:100%; object-fit:contain; transition:opacity 0.35s ease; }
        .fisch-img-box .img-placeholder { font-size:3rem; color:var(--text-muted); opacity:0.3; }
        .fisch-info-card { background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
        .fisch-info-name { font-size:1.3rem; font-weight:800; margin:0 0 12px; }
        .fisch-info-row { display:flex; gap:8px; margin-bottom:6px; font-size:13px; }
        .fisch-info-label { font-weight:700; color:var(--text-muted); min-width:90px; }
        .fisch-info-value { font-weight:600; color:var(--text-main); }
        .fisch-info-card.single-column .fisch-info-row { display:block; margin-bottom:12px; text-align:left; }
        .fisch-info-card.single-column .fisch-info-label { display:block; min-width:0; margin-bottom:4px; text-align:left; }
        .fisch-info-card.single-column .fisch-info-value { display:block; text-align:left; }
        .fisch-info-note { margin-top:10px; padding-top:10px; border-top:1.5px solid var(--border-light); font-size:13px; font-weight:600; color:var(--text-muted); line-height:1.5; }
        .fisch-input-wrap { position:relative; margin-bottom:14px; }
        .fisch-input { width:100%; padding:16px 18px; border:1.5px solid var(--border-light); border-radius:10px; font-size:15px; font-weight:600; font-family:'Montserrat',sans-serif; background:var(--card-bg); color:var(--text-main); outline:none; transition:border-color 0.15s; }
        .fisch-input:focus { border-color:var(--primary); }
        .fisch-input.correct-input { border-color:var(--correct); background:var(--correct-soft); }
        .fisch-input.wrong-input   { border-color:var(--wrong);   background:var(--wrong-soft); }
        .fisch-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card-bg); border:1.5px solid var(--primary); border-radius:10px; overflow:hidden; z-index:100; box-shadow:0 8px 24px rgba(62,75,65,0.12); max-height:220px; overflow-y:auto; }
        .fisch-dropdown-item { padding:14px 18px; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.1s; color:var(--text-main); border-bottom:1px solid var(--border-light); }
        .fisch-dropdown-item:last-child { border-bottom:none; }
        .fisch-dropdown-item:hover { background:var(--bg-base); }
        .fisch-dropdown-item em { color:var(--primary); font-style:normal; }
        .fisch-result {
            min-height: 10px;
            border-radius:10px;
            padding:0 18px;
            margin-bottom:8px;
            font-size:15px;
            font-weight:800;
            display:flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            visibility:hidden;
            background:transparent;
            color:transparent;
            border:1.5px solid transparent;
        }
        .fisch-result.correct { min-height:40px; padding:10px 18px; visibility:visible; background:var(--correct-soft); color:var(--correct); border:1.5px solid var(--correct); }
        .fisch-result.wrong   { min-height:40px; padding:10px 18px; visibility:visible; background:var(--wrong-soft); color:var(--wrong);   border:1.5px solid var(--wrong);   }
        .fisch-nav-actions { display:flex; justify-content:space-between; margin-top:18px; gap:10px; }
        .fisch-menu-row { display:flex; justify-content:center; margin-top:12px; }
        .fisch-menu-row .action-btn { flex:0 1 170px; }
        .fisch-progress-meta { display:flex; justify-content:space-between; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:8px; }
        .fisch-progress-wrap { margin-bottom:20px; }

        /* ══════════════════════════════════════
           ANGELMONTAGEN
        ══════════════════════════════════════ */
        .montage-task-box {
            background:var(--card-bg); border:1.5px solid var(--border-light);
            border-radius:14px; padding:20px; margin-bottom:16px;
        }
        .montage-task-label {
            font-size:0.7rem; font-weight:700; text-transform:uppercase;
            letter-spacing:1.2px; color:var(--text-muted); margin-bottom:6px;
        }
        .montage-task-name {
            font-size:1.2rem; font-weight:800; margin:0 0 4px;
        }
        .montage-task-sub {
            font-size:13px; font-weight:600; color:var(--text-muted); margin:0;
        }
        .montage-progress-row {
            display:flex; justify-content:space-between; align-items:center;
            font-size:0.7rem; font-weight:700; text-transform:uppercase;
            letter-spacing:1px; color:var(--text-muted); margin-bottom:10px;
        }
        .montage-layout { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
        .montage-image-panel {
            flex:1 1 260px; min-width:240px; background:var(--card-bg); border:1.5px solid var(--border-light);
            border-radius:14px; padding:14px;
        }
        .montage-picker-panel {
            flex:1 1 220px; min-width:220px; background:var(--card-bg); border:1.5px solid var(--border-light);
            border-radius:14px; padding:18px;
        }
        .montage-svg { width:100%; height:auto; display:block; }
        .montage-rod-line { stroke:#3E2E22; stroke-width:6; stroke-linecap:round; fill:none; }
        .montage-fishing-line { stroke:#9aa39c; stroke-width:1.5; fill:none; }
        .montage-hotspot { cursor:pointer; }
        .montage-hotspot-ring {
            fill:var(--card-bg); stroke:var(--border-light); stroke-width:2;
            stroke-dasharray:3 3; transition:stroke 0.2s, fill 0.2s;
        }
        .montage-hotspot.active .montage-hotspot-ring   { stroke:var(--primary); stroke-width:2.5; stroke-dasharray:none; }
        .montage-hotspot.answered .montage-hotspot-ring { fill:var(--correct); stroke:var(--correct); stroke-dasharray:none; }
        .montage-hotspot-mark {
            font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800;
            fill:var(--primary); text-anchor:middle; dominant-baseline:central; pointer-events:none;
        }
        .montage-hotspot.answered .montage-hotspot-mark { fill:white; }
        .montage-hotspot-label {
            font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700;
            fill:var(--text-muted); text-anchor:middle; pointer-events:none;
        }
        .montage-hotspot.answered .montage-hotspot-label { fill:var(--correct); }
        .montage-picker-hint { font-size:14px; color:var(--text-muted); font-weight:600; text-align:center; padding:30px 4px; margin:0; }
        .montage-picker-title { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.1px; color:var(--text-muted); margin:0 0 12px; }
        .montage-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
        .montage-opt-btn {
            background:var(--card-bg); border:1.5px solid var(--border-light); color:var(--text-main);
            border-radius:9px; padding:10px 4px; font-size:11.5px; font-weight:700; line-height:1.25;
            font-family:'Montserrat',sans-serif; cursor:pointer; text-align:center;
            transition:border-color 0.15s, background 0.2s, color 0.2s; min-height:52px;
            display:flex; align-items:center; justify-content:center;
            min-width:0; width:100%; max-width:100%;
            overflow-wrap:break-word; word-break:break-word; hyphens:auto;
            -webkit-hyphens:auto; -ms-hyphens:auto;
        }
        .montage-opt-btn:hover:not(:disabled) { border-color:var(--primary); }
        .montage-opt-btn:disabled { cursor:default; }
        .montage-opt-btn.wrong { background:var(--wrong); color:white; border-color:var(--wrong); }
        .montage-zubehoer-box { margin-top:14px; background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:14px; padding:16px 20px; }
        .montage-zubehoer-box ul { margin:8px 0 0; padding-left:20px; }
        .montage-zubehoer-box li { font-size:13.5px; margin-bottom:4px; }
        .montage-zubehoer-hint { font-size:12.5px; font-weight:600; color:var(--text-muted); margin:6px 0 0; line-height:1.4; }
        .zubehoer-picker-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
        .zubehoer-opt-btn {
            background:var(--bg-base); border:1.5px solid var(--border-light); color:var(--text-main);
            border-radius:9px; padding:10px 4px; font-size:11px; font-weight:700; line-height:1.25;
            font-family:'Montserrat',sans-serif; cursor:pointer; text-align:center;
            transition:border-color 0.15s, background 0.2s, color 0.2s; min-height:52px;
            display:flex; align-items:center; justify-content:center;
            min-width:0; width:100%; max-width:100%;
            overflow-wrap:break-word; word-break:break-word; hyphens:auto;
            -webkit-hyphens:auto; -ms-hyphens:auto;
        }
        .zubehoer-opt-btn:hover:not(:disabled) { border-color:var(--primary); }
        .zubehoer-opt-btn:disabled { cursor:default; }
        .zubehoer-opt-btn.selected { background:var(--primary); color:white; border-color:var(--primary); }
        .zubehoer-opt-btn.correct  { background:var(--correct); color:white; border-color:var(--correct); }
        .zubehoer-opt-btn.wrong    { background:var(--wrong); color:white; border-color:var(--wrong); }
        .zubehoer-opt-btn.missed   { background:transparent; color:var(--wrong); border:1.5px dashed var(--wrong); }
        .zubehoer-result { font-size:13px; font-weight:700; margin:12px 0 0; line-height:1.4; }
        .zubehoer-result.ok  { color:var(--correct); }
        .zubehoer-result.bad { color:var(--wrong); }
        .zubehoer-schnellauswahl-label {
            font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
            color:var(--text-muted); margin:12px 0 0;
        }
        .zubehoer-more-toggle {
            display:block; width:100%; background:transparent; border:none; padding:12px 2px 4px;
            font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:700; color:var(--primary);
            cursor:pointer; text-align:center;
        }
        .zubehoer-more-toggle:active { color:var(--primary-hover); }
        .zubehoer-picker-grid-more { margin-top:8px; }
        .montage-success-banner {
            border-radius:10px; padding:14px 18px; margin-top:14px; font-size:14px;
            font-weight:700; text-align:center; background:var(--correct-soft); color:var(--correct); border:1.5px solid var(--correct);
        }
        .montage-hotspot-static { cursor:default; }
        .montage-hotspot-static .montage-hotspot-ring { stroke:var(--primary); stroke-dasharray:none; }
        .montage-hotspot-static .montage-hotspot-mark { fill:var(--primary); }
        .montage-legend-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
        .montage-legend-item { display:flex; align-items:baseline; gap:10px; font-size:14px; line-height:1.4; }
        .montage-legend-num {
            flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--primary); color:white;
            font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
            transform:translateY(1px);
        }
        .montage-legend-text strong { font-weight:700; }

        /* ══════════════════════════════════════
           PRÜFUNGSMODUS
        ══════════════════════════════════════ */
        .exam-intro-box {
            background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:14px;
            padding:20px 20px 6px; margin-bottom:16px;
        }
        .exam-intro-box p { font-size:13.5px; font-weight:600; color:var(--text-muted); line-height:1.5; margin:0 0 14px; }
        .exam-part-row {
            display:flex; align-items:center; gap:14px; padding:14px 4px;
            border-top:1.5px solid var(--border-light);
        }
        .exam-part-row:first-of-type { border-top:none; }
        .exam-part-icon {
            font-size:1.4rem; width:40px; height:40px; background:var(--bg-base); border-radius:10px;
            display:flex; align-items:center; justify-content:center; flex-shrink:0;
        }
        .exam-part-body { flex:1; }
        .exam-part-title { font-size:14px; font-weight:800; margin:0 0 2px; color:var(--text-main); }
        .exam-part-sub { font-size:12px; font-weight:600; color:var(--text-muted); margin:0; }
        .exam-last-result {
            background:var(--bg-base); border-radius:10px; padding:14px 16px; margin-bottom:16px;
            display:flex; align-items:center; justify-content:space-between; gap:10px;
        }
        .exam-last-result-text { font-size:13px; font-weight:700; }
        .exam-last-result-text span { display:block; font-size:11px; font-weight:600; color:var(--text-muted); margin-top:2px; }
        .exam-badge { font-size:12px; font-weight:800; padding:5px 12px; border-radius:20px; }
        .exam-badge.pass { background:var(--correct-soft); color:var(--correct); }
        .exam-badge.fail { background:var(--wrong-soft); color:var(--wrong); }
        .exam-start-btn { width:100%; padding:16px; background:var(--primary); color:white; border:none; border-radius:10px; font-size:15px; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; }
        .exam-start-btn:active { background:var(--primary-hover); }
        .exam-start-btn:disabled { background:var(--text-muted); opacity:0.45; cursor:not-allowed; }
        .exam-start-btn:disabled:active { background:var(--text-muted); }

        .exam-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
        .exam-timer {
            font-size:14px; font-weight:800; color:var(--text-main); background:var(--bg-base);
            border-radius:8px; padding:6px 12px; letter-spacing:0.5px; font-variant-numeric:tabular-nums;
        }
        .exam-timer.low { color:white; background:var(--wrong); }
        .exam-progress-meta { display:flex; justify-content:space-between; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:8px; }
        .answer-btn.selected { background:var(--primary); color:white; border-color:var(--primary); }
        .exam-cancel-row { text-align:center; margin-top:14px; }
        .exam-cancel-link { background:none; border:none; color:var(--wrong); font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:700; text-decoration:underline; cursor:pointer; padding:6px; }

        .exam-modal-box { background:var(--card-bg); border-radius:14px; padding:26px 24px; max-width:380px; width:100%; text-align:left; }
        .exam-modal-title { font-size:1.1rem; font-weight:800; margin:0 0 4px; text-align:center; }
        .exam-modal-badge-row { display:flex; justify-content:center; margin:8px 0 18px; }
        .exam-result-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1.5px solid var(--border-light); font-size:13.5px; font-weight:700; }
        .exam-result-row:first-of-type { border-top:none; }
        .exam-result-row span.muted { color:var(--text-muted); font-weight:600; }
        .exam-result-row span.green { color:var(--correct); }
        .exam-result-row span.red { color:var(--wrong); }

        .exam-final-card {
            background:var(--card-bg); border:1.5px solid var(--border-light); border-radius:14px;
            padding:18px 20px; margin-bottom:14px;
        }
        .exam-final-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
        .exam-final-head-title { font-size:15px; font-weight:800; }
        .exam-final-verdict { text-align:center; padding:26px 20px; border-radius:14px; margin-bottom:18px; }
        .exam-final-verdict.pass { background:var(--correct-soft); }
        .exam-final-verdict.fail { background:var(--wrong-soft); }
        .exam-final-verdict-icon { font-size:2.4rem; margin-bottom:8px; }
        .exam-final-verdict-title { font-size:1.3rem; font-weight:800; margin:0 0 4px; }
        .exam-final-verdict.pass .exam-final-verdict-title { color:var(--correct); }
        .exam-final-verdict.fail .exam-final-verdict-title { color:var(--wrong); }
        .exam-final-verdict-sub { font-size:13px; font-weight:600; color:var(--text-muted); margin:0; }

        /* Landscape-Optimierung */
        @media (orientation: landscape) and (max-height: 500px) {
            body { padding: 12px 20px; }
            .fisch-img-box { aspect-ratio: 16/7; max-height: 200px; }
            h1 { font-size: 1.3rem; }
            .question-box { padding: 16px; }
            #question-text, #qm-question-text, #exam-question-text { font-size: 1rem; }
        }