/* ── Stats Bar ── */
        .stats-bar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 1rem;
            width: 100%;
            align-self: stretch;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1rem 1.25rem;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .stat-card:hover::before {
            transform: scaleX(1);
        }

        .stat-card .stat-icon {
            font-size: 1.6rem;
            margin-bottom: 0.3rem;
        }

        .stat-card .stat-value {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--clr-accent-text);
            line-height: 1;
            margin-bottom: 0.2rem;
        }

        .stat-card .stat-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--clr-muted);
            font-weight: 600;
        }

        .stat-card.streak .stat-value {
            color: #f97316;
        }

        .stat-card.streak .stat-icon {
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.15)
            }
        }

        .stat-card.xp .stat-value {
            color: var(--clr-accent2-text);
        }

        /* ── XP Bar ── */
        .xp-bar-wrapper {
            width: 100%;
            align-self: stretch;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 0.9rem 1.25rem;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .xp-bar-wrapper .xp-label {
            font-size: 0.8rem;
            color: var(--clr-muted);
            font-weight: 700;
            white-space: nowrap;
            min-width: 90px;
        }

        .xp-track {
            flex: 1;
            height: 12px;
            background: var(--box-bg);
            border-radius: 999px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .xp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            border-radius: 999px;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .xp-bar-wrapper .xp-next {
            font-size: 0.78rem;
            color: var(--clr-muted);
            white-space: nowrap;
            min-width: 60px;
            text-align: right;
        }

        /* ── Nav Tabs ── */
        .main-nav {
            width: 100%;
            align-self: stretch;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 0.5rem;
        }

        .nav-tab {
            flex: 1;
            min-width: 120px;
            padding: 0.75rem 1rem;
            border-radius: calc(var(--radius) - 4px);
            border: none;
            background: transparent;
            color: var(--clr-muted);
            font-family: inherit;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .nav-tab:hover {
            background: var(--box-bg);
            color: var(--text-color);
        }

        .nav-tab.active {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
        }

        /* ── Views: flex statt block ── */
        .view {
            display: none;
            width: 100%;
            box-sizing: border-box;
            flex-direction: column;
            align-items: stretch;
        }

        .view.active {
            display: flex;
            /* ← flex statt block */
            flex-direction: column;
            align-items: stretch;
            width: 100%;
        }

        /* ── Kapitel: volle Breite ── */
        .chapter {
            width: 100%;
            align-self: stretch;
            margin-bottom: 2.5rem;
            box-sizing: border-box;
        }

        .chapter-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--border-color);
        }

        .chapter-header .ch-icon {
            font-size: 1.6rem;
        }

        .chapter-header h2 {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text-color);
        }

        .chapter-header .ch-badge {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-weight: 700;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
        }

        .ch-badge.beginner {
            background: rgba(52, 211, 153, 0.15);
            color: #34d399;
        }

        .ch-badge.intermediate {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
        }

        .ch-badge.advanced {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
        }

        .ch-badge.expert {
            background: rgba(248, 113, 113, 0.15);
            color: #f87171;
        }

        .ch-badge.master {
            background: rgba(167, 139, 250, 0.15);
            color: #a78bfa;
        }

        .ch-badge.legend {
            background: rgba(244, 114, 182, 0.15);
            color: #f472b6;
        }

        html[data-theme="light"] .ch-badge.beginner {
            background: rgba(5, 150, 105, 0.1);
            color: #059669
        }

        html[data-theme="light"] .ch-badge.intermediate {
            background: rgba(2, 132, 199, 0.1);
            color: #0284c7
        }

        html[data-theme="light"] .ch-badge.advanced {
            background: rgba(217, 119, 6, 0.1);
            color: #d97706
        }

        html[data-theme="light"] .ch-badge.expert {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626
        }

        html[data-theme="light"] .ch-badge.master {
            background: rgba(109, 40, 217, 0.1);
            color: #6d28d9
        }

        html[data-theme="light"] .ch-badge.legend {
            background: rgba(219, 39, 119, 0.1);
            color: #db2777
        }

        /* ── Task-Card: feste Breite, nie strecken ── */
        .task-card {
            width: 280px;
            flex: 0 0 280px;
            /* grow:0, shrink:0, basis:280px */
            min-width: 220px;
            box-sizing: border-box;

            /* alle anderen bestehenden Styles behalten: */
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.25rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .task-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--task-clr, var(--clr-accent));
            border-radius: 4px 0 0 4px;
        }

        .task-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            border-color: var(--task-clr, var(--clr-accent));
        }

        .task-card.done {
            border-color: rgba(52, 211, 153, 0.4);
        }

        .task-card.done::after {
            content: '✓';
            position: absolute;
            top: 0.75rem;
            right: 0.85rem;
            font-size: 1rem;
            color: var(--clr-accent-text);
            font-weight: 800;
        }

        .task-card .tc-header {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
        }

        .task-card .tc-icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .task-card .tc-meta {
            flex: 1;
        }

        .task-card .tc-title {
            font-size: 0.97rem;
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.3;
        }

        .task-card .tc-sub {
            font-size: 0.78rem;
            color: var(--clr-muted);
            margin-top: 0.15rem;
        }

        .tc-tags {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .tc-tag {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
        }

        .tc-tag.primm {
            background: rgba(167, 139, 250, 0.15);
            color: #a78bfa
        }

        .tc-tag.explore {
            background: rgba(244, 114, 182, 0.15);
            color: #f472b6
        }

        .tc-tag.easy {
            background: rgba(52, 211, 153, 0.15);
            color: #34d399
        }

        .tc-tag.medium {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24
        }

        .tc-tag.hard {
            background: rgba(248, 113, 113, 0.15);
            color: #f87171
        }

        .tc-tag.expert {
            background: rgba(167, 139, 250, 0.15);
            color: #a78bfa
        }

        html[data-theme="light"] .tc-tag.primm {
            background: rgba(109, 40, 217, 0.1);
            color: #6d28d9
        }

        html[data-theme="light"] .tc-tag.easy {
            background: rgba(5, 150, 105, 0.1);
            color: #059669
        }

        html[data-theme="light"] .tc-tag.medium {
            background: rgba(217, 119, 6, 0.1);
            color: #d97706
        }

        html[data-theme="light"] .tc-tag.hard {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626
        }

        html[data-theme="light"] .tc-tag.expert {
            background: rgba(109, 40, 217, 0.1);
            color: #6d28d9
        }

        .tc-xp {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--clr-accent2-text);
            display: flex;
            align-items: center;
            gap: 0.3rem
        }

        .tc-new {
            position: absolute;
            top: 0.6rem;
            right: 0.7rem;
            font-size: 0.62rem;
            background: #f97316;
            color: white;
            padding: 0.15rem 0.5rem;
            border-radius: 999px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em
        }

        /* ── Übersicht-Grid ── */
        .overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
            width: 100%;
            align-self: stretch;
            /* ← volle Breite im flex-Container */
            box-sizing: border-box;
        }

        .overview-chapter-card {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .overview-chapter-card:hover {
            box-shadow: var(--shadow);
            border-color: var(--clr-accent);
        }

        .occ-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--box-bg);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .occ-header .occ-icon {
            font-size: 1.8rem;
        }

        .occ-header h3 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-color);
            flex: 1;
        }

        .occ-body {
            padding: 1.25rem 1.5rem;
        }

        .occ-desc {
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .occ-concepts {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .occ-concept {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            font-size: 0.85rem;
            color: var(--clr-muted);
            line-height: 1.5;
        }

        .occ-concept .cc-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--clr-accent);
            flex-shrink: 0;
            margin-top: 0.35rem;
        }

        .occ-concept strong {
            color: var(--text-color);
        }

        .occ-footer {
            padding: 0.75rem 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .occ-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--box-bg);
            border-radius: 999px;
            margin: 0 0.75rem;
            overflow: hidden;
        }

        .occ-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            border-radius: 999px;
            transition: width 0.5s ease;
        }

        .occ-progress-label {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-weight: 700;
            white-space: nowrap;
        }

        .occ-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1.1rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
            border: 1px solid var(--clr-accent);
            color: var(--clr-accent-text);
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
            margin-top: 0.75rem;
        }

        .occ-btn:hover {
            background: var(--clr-accent);
            color: #0f172a;
        }

        /* ── Script-Nav & Learn-Cards ── */
        .script-nav {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
            width: 100%;
            /* ← volle Breite */
            align-self: stretch;
        }

        #learn-cards-container {
            width: 100%;
            align-self: stretch;
        }

        .script-nav-btn {
            padding: 0.5rem 1rem;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--box-bg);
            color: var(--clr-muted);
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
        }

        .script-nav-btn:hover {
            border-color: var(--clr-accent2);
            color: var(--text-color);
        }

        .script-nav-btn.active {
            background: var(--clr-accent2);
            color: #0f172a;
            border-color: var(--clr-accent2);
        }

        .learn-card {
            width: 100%;
            align-self: stretch;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            display: none;
        }

        .learn-card.active {
            display: flex;
            /* ← flex statt block */
            flex-direction: column;
        }

        /* ── Hero in Views ── */
        #view-uebersicht .hero,
        #view-skript .hero {
            width: 100%;
            align-self: stretch;
            margin-bottom: 2rem;
        }

        /* ── Adventure View ── */
        #view-adventure {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        #view-adventure.active {
            display: flex;
        }

        .lc-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--box-bg);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .lc-header .lc-num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            font-weight: 800;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .lc-header h3 {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-color);
            flex: 1;
        }

        .lc-header .lc-tag {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-weight: 700;
            padding: 0.2rem 0.65rem;
            border-radius: 999px;
            background: rgba(56, 189, 248, 0.15);
            color: var(--clr-accent2-text);
        }

        .lc-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .lc-intro {
            font-size: 0.95rem;
            color: var(--clr-muted);
            line-height: 1.7;
        }

        .lc-intro strong {
            color: var(--text-color);
        }

        /* Merksatz */
        .merksatz {
            background: rgba(52, 211, 153, 0.07);
            border: 1px solid rgba(52, 211, 153, 0.3);
            border-left: 4px solid var(--clr-accent);
            border-radius: 0 10px 10px 0;
            padding: 1rem 1.25rem;
        }

        .merksatz-title {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
            color: var(--clr-accent-text);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .merksatz p {
            font-size: 0.9rem;
            color: var(--clr-muted);
            line-height: 1.6;
            font-style: italic;
        }

        .merksatz strong {
            color: var(--text-color);
            font-style: normal;
        }

        /* Syntax-Box */
        .syntax-box {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }

        html[data-theme="light"] .syntax-box {
            background: rgba(15, 23, 42, 0.04);
        }

        .syntax-box-header {
            padding: 0.5rem 1rem;
            background: rgba(56, 189, 248, 0.08);
            border-bottom: 1px solid var(--border-color);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
            color: var(--clr-accent2-text);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .syntax-box-code {
            padding: 1rem 1.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.8;
            color: var(--clr-muted);
            white-space: pre;
            overflow-x: auto;
        }

        /* Beispiel-Block */
        .lc-examples {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .example-block {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }

        .example-block-header {
            padding: 0.5rem 1rem;
            background: var(--box-bg);
            border-bottom: 1px solid var(--border-color);
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--clr-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .example-code {
            padding: 0.85rem 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.87rem;
            line-height: 1.7;
            color: var(--clr-muted);
            background: rgba(0, 0, 0, 0.2);
            white-space: pre;
            overflow-x: auto;
        }

        html[data-theme="light"] .example-code {
            background: rgba(15, 23, 42, 0.04);
        }

        .example-output {
            padding: 0.6rem 1rem;
            background: rgba(52, 211, 153, 0.05);
            border-top: 1px solid rgba(52, 211, 153, 0.15);
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            color: #34d399;
        }

        html[data-theme="light"] .example-output {
            color: #059669;
        }

        /* Warnung-Box */
        .warn-box {
            background: rgba(251, 191, 36, 0.07);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-left: 4px solid var(--warning);
            border-radius: 0 10px 10px 0;
            padding: 0.85rem 1.25rem;
        }

        .warn-box-title {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-weight: 800;
            color: var(--warning-text);
            margin-bottom: 0.4rem;
        }

        .warn-box p {
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .warn-box code {
            color: var(--danger-text);
            background: rgba(248, 113, 113, 0.1);
            padding: 1px 5px;
            border-radius: 4px;
        }

        /* Tipp-Box */
        .tip-box {
            background: rgba(56, 189, 248, 0.07);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-left: 4px solid var(--clr-accent2);
            border-radius: 0 10px 10px 0;
            padding: 0.85rem 1.25rem;
        }

        .tip-box-title {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-weight: 800;
            color: var(--clr-accent2-text);
            margin-bottom: 0.4rem;
        }

        .tip-box p {
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .tip-box code {
            color: var(--clr-accent2-text);
            background: rgba(56, 189, 248, 0.1);
            padding: 1px 5px;
            border-radius: 4px;
        }

        /* Vergleichstabelle */
        .compare-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.88rem;
        }

        .compare-table th {
            padding: 0.6rem 0.9rem;
            text-align: left;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 700;
            color: var(--clr-muted);
            border-bottom: 2px solid var(--border-color);
        }

        .compare-table td {
            padding: 0.6rem 0.9rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--clr-muted);
            vertical-align: top;
        }

        .compare-table td:first-child {
            font-family: monospace;
            color: var(--clr-accent2-text);
            font-weight: 700;
        }

        .compare-table tr:last-child td {
            border-bottom: none;
        }

        .compare-table tr:hover td {
            background: var(--box-bg);
        }

        /* Syntax-Kw Farben inline */
        .kw {
            color: #c084fc;
            font-weight: 600
        }

        .fn-name {
            color: #34d399
        }

        .str {
            color: #f97316
        }

        .num {
            color: #38bdf8
        }

        .cm {
            color: #64748b;
            font-style: italic
        }

        .op {
            color: #f472b6
        }

        .builtin {
            color: #fbbf24
        }

        html[data-theme="light"] .kw {
            color: #7c3aed
        }

        html[data-theme="light"] .fn-name {
            color: #059669
        }

        html[data-theme="light"] .str {
            color: #c2410c
        }

        html[data-theme="light"] .num {
            color: #0284c7
        }

        html[data-theme="light"] .cm {
            color: #94a3b8
        }

        html[data-theme="light"] .builtin {
            color: #d97706
        }

        /* ── Modal ── */
        .task-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(6px);
            z-index: 3000;
            align-items: stretch;
            justify-content: stretch;
            padding: 0;
        }

        .task-modal-overlay.open {
            display: flex;
        }

        .task-modal {
            background: var(--panel-bg);
            border: none;
            border-radius: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            overflow-y: auto;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.97)
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }

        .modal-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            background: var(--panel-bg);
            z-index: 10;
            /* kein border-radius mehr */
        }

        .modal-top-bar .mtb-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .modal-top-bar .mtb-icon {
            font-size: 1.5rem;
        }

        .modal-top-bar .mtb-title {
            font-size: 1.1rem;
            font-weight: 800;
        }

        .modal-top-bar .mtb-close {
            background: none;
            border: none;
            color: var(--clr-muted);
            font-size: 1.4rem;
            cursor: pointer;
            padding: 0.3rem;
            border-radius: 8px;
            transition: var(--transition);
            line-height: 1;
        }

        .modal-top-bar .mtb-close:hover {
            color: var(--danger-text);
            background: rgba(248, 113, 113, 0.1);
        }

        .modal-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* PRIMM */
        .primm-phase {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }

        .primm-phase-header {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1rem;
            background: rgba(167, 139, 250, 0.07);
            border-bottom: 1px solid var(--border-color);
        }

        .primm-phase-header .ph-badge {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 800;
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            background: rgba(167, 139, 250, 0.2);
            color: #a78bfa;
        }

        html[data-theme="light"] .primm-phase-header .ph-badge {
            background: rgba(109, 40, 217, 0.12);
            color: #6d28d9;
        }

        .primm-phase-header .ph-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-color);
        }

        .primm-phase-body {
            padding: 1rem;
        }

        .primm-phase-body p {
            color: var(--clr-muted);
            font-size: 0.9rem;
            line-height: 1.7;
            margin-bottom: 0.75rem;
        }

        /* Task desc */
        .task-description {
            color: var(--clr-muted);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .task-description strong {
            color: var(--text-color);
        }

        .task-description .highlight-box {
            background: rgba(56, 189, 248, 0.07);
            border-left: 3px solid var(--clr-accent2);
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1rem;
            margin: 0.75rem 0;
            font-size: 0.9rem;
        }

        .task-description .example-box {
            background: rgba(52, 211, 153, 0.06);
            border: 1px solid rgba(52, 211, 153, 0.2);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin: 0.75rem 0;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
        }

        /* Editor */
        .editor-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .editor-label {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--clr-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Gleiche Fixes für den Haupt-Code-Editor (Aufgaben-Modal) */
        .code-editor-wrapper {
            position: relative;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: row;
            align-items: stretch;
            resize: both;
            overflow: hidden;
            min-width: 280px;
            min-height: 120px;
        }

        .code-editor-wrapper:focus-within {
            border-color: var(--clr-accent2);
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
        }

        .line-numbers {
            flex: 0 0 42px;
            width: 42px;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.6em;
            color: var(--clr-muted);
            opacity: 0.6;
            pointer-events: none;
            border-right: 1px solid var(--border-color);
            user-select: none;
            background: rgba(0, 0, 0, 0.2);
            overflow: hidden;
            box-sizing: border-box;
        }

        html[data-theme="light"] .line-numbers {
            background: rgba(15, 23, 42, 0.04);
        }

        .line-numbers span {
            display: block;
            padding-right: 8px;
            height: 1.6em;
            line-height: 1.6em;
        }

        .code-editor {
            flex: 1 1 auto;
            width: 0;
            min-height: 140px;
            height: 100%;
            padding: 0.75rem 0.75rem 0.75rem 10px;
            background: rgba(0, 0, 0, 0.25);
            color: var(--text-color);
            border: none;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.6em;
            resize: none;
            outline: none;
            tab-size: 4;
            white-space: pre;
            overflow-wrap: normal;
            overflow: auto;
            box-sizing: border-box;
        }

        html[data-theme="light"] .code-editor {
            background: rgba(15, 23, 42, 0.03);
        }

        /* Fehler-Overlay auch für Aufgaben-Modal */
        .code-error-overlay {
            position: absolute;
            left: 42px;
            right: 0;
            top: 0;
            pointer-events: none;
            z-index: 2;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.6em;
            padding: 0.75rem 0.75rem 0 0.75rem;
            overflow: hidden;
        }

        .code-error-overlay-line {
            display: block;
            height: 1.6em;
            background: transparent;
        }

        .code-error-overlay-line.highlight {
            background: rgba(248, 113, 113, 0.18);
            border-left: 3px solid #f87171;
            border-radius: 0 4px 4px 0;
            margin-left: -0.75rem;
            padding-left: calc(0.75rem - 3px);
        }

        .code-error-info {
            display: none;
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.35);
            border-left: 4px solid #f87171;
            border-radius: 0 8px 8px 0;
            padding: 0.65rem 1rem;
            font-size: 0.85rem;
            color: #f87171;
            font-family: 'Courier New', monospace;
            line-height: 1.5;
            margin-top: 0.25rem;
        }

        .code-error-info.show {
            display: block;
        }

        .code-error-info .err-loc {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-family: inherit;
            margin-top: 0.25rem;
        }

        .code-display {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.7;
            color: var(--clr-muted);
            overflow-x: auto;
            white-space: pre;
        }

        html[data-theme="light"] .code-display {
            background: rgba(15, 23, 42, 0.04);
        }

        /* Buttons */
        .action-row {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.65rem 1.4rem;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: var(--box-bg);
            color: var(--text-color);
            transition: var(--transition);
            font-family: inherit;
        }

        .btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

        .btn:active:not(:disabled) {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .btn-run {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            border: none;
            box-shadow: 0 4px 15px rgba(52, 211, 153, 0.2);
        }

        .btn-run:hover:not(:disabled) {
            box-shadow: 0 8px 25px rgba(52, 211, 153, 0.4);
        }

        .btn-hint {
            color: var(--clr-accent2-text);
            border-color: rgba(56, 189, 248, 0.3);
        }

        .btn-reset-code {
            color: var(--clr-muted);
        }

        .btn-stop {
            background: linear-gradient(135deg, #f87171, #ef4444);
            color: #fff;
            border: none;
            box-shadow: 0 4px 15px rgba(248, 113, 113, 0.3);
            display: none;
        }
        .btn-stop.visible {
            display: inline-flex;
        }
        .btn-stop:hover {
            box-shadow: 0 8px 25px rgba(248, 113, 113, 0.5);
        }

        .btn-next-task {
            background: linear-gradient(135deg, #a78bfa, #8b5cf6);
            color: #fff;
            border: none;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
            font-weight: 700;
            letter-spacing: 0.01em;
        }
        .btn-next-task:hover {
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
            transform: translateY(-1px);
        }

        .fb-next-row {
            margin-top: 0.9rem;
            display: flex;
            justify-content: flex-end;
        }

        .btn-solution {
            color: #fbbf24;
            border-color: rgba(251, 191, 36, 0.3);
        }
        .btn-solution:hover {
            border-color: rgba(251, 191, 36, 0.6);
            background: rgba(251, 191, 36, 0.08);
        }

        /* Ausführungs-Indikator */
        .run-indicator {
            display: none;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            color: var(--clr-accent-text);
            font-weight: 600;
        }
        .run-indicator.visible { display: flex; }
        .run-spinner {
            width: 14px; height: 14px;
            border: 2px solid rgba(52,211,153,0.25);
            border-top-color: var(--clr-accent);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Lösung-Overlay */
        .solution-overlay {
            display: none;
            background: rgba(251,191,36,0.07);
            border: 1px solid rgba(251,191,36,0.35);
            border-left: 4px solid #fbbf24;
            border-radius: 10px;
            padding: 0.85rem 1rem;
            margin-top: 0.5rem;
        }
        .solution-overlay.show { display: block; }
        .solution-overlay-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: #fbbf24;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .solution-overlay pre {
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            line-height: 1.6;
            color: var(--text-color);
            white-space: pre-wrap;
            margin: 0;
        }
        .solution-no-points {
            font-size: 0.78rem;
            color: #f87171;
            margin-top: 0.5rem;
            font-style: italic;
        }

        /* Output & Tests */
        .output-section {
            display: none;
            flex-direction: column;
            gap: 0.5rem;
        }

        .output-section.visible {
            display: flex;
        }

        .output-box {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.6;
            color: var(--clr-muted);
            min-height: 60px;
            white-space: pre-wrap;
            max-height: 160px;
            overflow-y: auto;
        }

        html[data-theme="light"] .output-box {
            background: rgba(15, 23, 42, 0.04);
        }

        .test-results {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .test-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.6rem 0.9rem;
            border-radius: 8px;
            font-size: 0.87rem;
            border: 1px solid transparent;
        }

        .test-item.pass {
            background: rgba(52, 211, 153, 0.08);
            border-color: rgba(52, 211, 153, 0.25);
            color: #34d399;
        }

        .test-item.fail {
            background: rgba(248, 113, 113, 0.08);
            border-color: rgba(248, 113, 113, 0.25);
            color: #f87171;
        }

        .test-item.running {
            background: rgba(56, 189, 248, 0.08);
            border-color: rgba(56, 189, 248, 0.2);
            color: var(--clr-accent2-text);
        }

        .test-item .ti-icon {
            font-size: 1rem;
            flex-shrink: 0;
        }

        .test-item .ti-desc {
            flex: 1;
            color: var(--clr-muted);
        }

        .test-item .ti-result {
            font-family: monospace;
            font-size: 0.82rem;
        }

        /* Feedback */
        .feedback-banner {
            display: none;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            animation: slideUp 0.3s ease;
        }

        .feedback-banner.show {
            display: block;
        }

        .feedback-banner.success {
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.35);
        }

        .feedback-banner.partial {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.35);
        }

        .feedback-banner.error {
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.35);
        }

        .fb-top {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 0.5rem;
        }

        .fb-emoji {
            font-size: 1.6rem;
        }

        .fb-title {
            font-size: 1rem;
            font-weight: 800;
        }

        .feedback-banner.success .fb-title {
            color: var(--clr-accent-text);
        }

        .feedback-banner.partial .fb-title {
            color: var(--warning-text);
        }

        .feedback-banner.error .fb-title {
            color: var(--danger-text);
        }

        .fb-msg {
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .fb-xp {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--clr-accent2-text);
            margin-top: 0.5rem;
        }

        /* Hint */
        .hint-box {
            display: none;
            background: rgba(167, 139, 250, 0.07);
            border: 1px solid rgba(167, 139, 250, 0.25);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .hint-box.show {
            display: block;
        }

        .hint-box .hint-title {
            font-weight: 700;
            color: #a78bfa;
            margin-bottom: 0.35rem;
            font-size: 0.85rem;
        }

        html[data-theme="light"] .hint-title {
            color: #6d28d9;
        }

        /* PRIMM Question */
        .question-section {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 1rem;
        }

        .question-section label {
            display: block;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 0.6rem;
        }

        .question-options {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .q-option {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.6rem 0.9rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.88rem;
            color: var(--clr-muted);
            background: var(--panel-bg);
        }

        .q-option:hover {
            border-color: var(--clr-accent2);
            color: var(--text-color);
        }

        .q-option input {
            accent-color: var(--clr-accent);
        }

        .q-option.correct {
            background: rgba(52, 211, 153, 0.08);
            border-color: rgba(52, 211, 153, 0.4);
            color: #34d399;
        }

        .q-option.wrong {
            background: rgba(248, 113, 113, 0.08);
            border-color: rgba(248, 113, 113, 0.3);
            color: #f87171;
        }

        /* Level Badge */
        .level-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
        }

        /* Konfetti */
        #confetti-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Streak Toast */
        .streak-toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: linear-gradient(135deg, #f97316, #ef4444);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 8px 30px rgba(249, 115, 22, 0.4);
            z-index: 5000;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-width: 320px;
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(40px) scale(0.9)
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1)
            }
        }

        .streak-toast .st-icon {
            font-size: 1.8rem;
        }

        /* Reset Button Overlay */
        .reset-progress-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 700;
            border: 1px solid rgba(248, 113, 113, 0.3);
            color: var(--danger-text);
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
        }

        .reset-progress-btn:hover {
            background: rgba(248, 113, 113, 0.1);
        }

        @media(max-width:600px) {
            .stats-bar {
                grid-template-columns: repeat(2, 1fr)
            }

            .action-row {
                flex-direction: column
            }

            .task-modal {
                max-height: 98vh
            }

            .modal-body {
                padding: 1rem
            }

            .overview-grid {
                grid-template-columns: 1fr
            }

            .main-nav {
                gap: 0.25rem
            }

            .nav-tab {
                min-width: 90px;
                font-size: 0.78rem;
                padding: 0.6rem 0.6rem
            }
        }

        /* ══════════════════════════════════════════════════════════════
   PYTHON-ADVENTURE STYLES
══════════════════════════════════════════════════════════════ */

        /* Hero */
        .adv-hero {
            width: 100%;
            align-self: stretch;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .adv-hero-left {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .adv-main-icon {
            font-size: 3rem;
        }

        .adv-title {
            font-size: 1.6rem;
            font-weight: 800;
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .adv-subtitle {
            font-size: 0.88rem;
            color: var(--clr-muted);
            margin-top: 0.2rem;
        }

        .adv-stats-row {
            display: flex;
            gap: 1.25rem;
            flex-wrap: wrap;
            margin-top: 0.75rem;
        }

        .adv-stat {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--clr-muted);
        }

        .adv-stat-icon {
            font-size: 1rem;
        }

        .adv-stat-streak {
            color: #f97316;
        }

        .adv-xp-bar-wrap {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .adv-xp-track {
            width: 100%;
            height: 10px;
            background: var(--box-bg);
            border-radius: 999px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .adv-xp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            border-radius: 999px;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .adv-xp-label {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-weight: 600;
        }

        /* Section Title */
        .adv-section-title {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--text-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Worlds Grid */
        .adv-worlds-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.25rem;
            width: 100%;
        }

        .adv-world-card {
            background: var(--panel-bg);
            border: 2px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.75rem 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.75rem;
        }

        .adv-world-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0%, var(--wclr-a, rgba(52, 211, 153, 0.12)), transparent 65%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .adv-world-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--wclr, var(--clr-accent));
        }

        .adv-world-card:hover::before {
            opacity: 1;
        }

        .adv-world-card.locked {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none;
        }

        .adv-world-icon {
            font-size: 3rem;
            position: relative;
            z-index: 1;
        }

        .adv-world-name {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-color);
            position: relative;
            z-index: 1;
        }

        .adv-world-desc {
            font-size: 0.82rem;
            color: var(--clr-muted);
            line-height: 1.5;
            position: relative;
            z-index: 1;
        }

        .adv-world-meta {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            position: relative;
            z-index: 1;
            flex-wrap: wrap;
            justify-content: center;
        }

        .adv-world-levels {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-weight: 600;
        }

        .adv-world-stars {
            font-size: 0.82rem;
            font-weight: 700;
            color: #fbbf24;
        }

        .adv-world-progress {
            width: 100%;
            height: 5px;
            background: var(--box-bg);
            border-radius: 999px;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .adv-world-progress-fill {
            height: 100%;
            border-radius: 999px;
            transition: width 0.5s ease;
        }

        .adv-world-badge {
            position: absolute;
            top: 0.7rem;
            right: 0.8rem;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
        }

        .adv-world-badge.new {
            background: #f97316;
            color: white;
        }

        .adv-world-badge.locked {
            background: var(--box-bg);
            color: var(--clr-muted);
            border: 1px solid var(--border-color);
        }

        .adv-world-badge.done {
            background: rgba(52, 211, 153, 0.2);
            color: #34d399;
        }

        .adv-world-selector {
            width: 100%;
            align-self: stretch;
        }

        /* Level Map */
        .adv-level-map {
            width: 100%;
            align-self: stretch;
        }

        .adv-map-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border-color);
        }

        .adv-back-btn {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            color: var(--clr-muted);
            padding: 0.5rem 1rem;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
        }

        .adv-back-btn:hover {
            border-color: var(--clr-accent);
            color: var(--clr-accent-text);
        }

        .adv-map-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--text-color);
            flex: 1;
        }

        .adv-map-stars {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fbbf24;
        }

        .adv-levels-row {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
            width: 100%;
        }

        .adv-level-bubble {
            background: var(--panel-bg);
            border: 2px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.25rem 1rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            text-align: center;
            position: relative;
        }

        .adv-level-bubble:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            border-color: var(--clr-accent);
        }

        .adv-level-bubble.locked {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .adv-level-bubble.completed {
            border-color: rgba(52, 211, 153, 0.5);
            background: rgba(52, 211, 153, 0.04);
        }

        .adv-level-num {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--clr-accent2-text);
        }

        .adv-level-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-color);
        }

        .adv-level-diff {
            font-size: 0.7rem;
            color: var(--clr-muted);
        }

        .adv-level-stars-row {
            display: flex;
            gap: 0.2rem;
            font-size: 1.1rem;
        }

        .adv-level-star {
            transition: transform 0.2s;
        }

        .adv-level-star.earned {
            color: #fbbf24;
            transform: scale(1.1);
        }

        .adv-level-star.empty {
            color: var(--border-color);
        }

        .adv-level-lock {
            font-size: 1.2rem;
            position: absolute;
            top: 0.5rem;
            right: 0.6rem;
            opacity: 0.5;
        }

        /* Game Modal – volle Fenstergröße */
        .adv-game-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            z-index: 4000;
            align-items: stretch;
            /* war: center */
            justify-content: stretch;
            /* war: center */
            padding: 0;
        }

        .adv-game-overlay.open {
            display: flex;
        }

        .adv-game-modal {
            background: var(--panel-bg);
            border: none;
            /* kein Rand bei Vollbild */
            border-radius: 0;
            /* kein Radius bei Vollbild */
            width: 100%;
            height: 100%;
            /* volle Höhe */
            max-width: none;
            max-height: none;
            overflow-y: auto;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }


        /* Game Top Bar */
        .adv-game-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            background: var(--panel-bg);
            z-index: 10;
            /* kein border-radius mehr */
        }

        .adv-game-topbar-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .adv-game-world-icon {
            font-size: 1.4rem;
        }

        .adv-game-level-title {
            font-size: 1rem;
            font-weight: 800;
        }

        .adv-game-level-sub {
            font-size: 0.78rem;
            color: var(--clr-muted);
        }

        .adv-game-close {
            background: none;
            border: none;
            font-size: 1.3rem;
            color: var(--clr-muted);
            cursor: pointer;
            padding: 0.35rem;
            border-radius: 8px;
            transition: var(--transition);
            line-height: 1;
        }

        .adv-game-close:hover {
            color: var(--danger-text);
            background: rgba(248, 113, 113, 0.1);
        }

        /* Game Body */
        /* ── Resizable Split Layout ── */
        .adv-game-body {
            display: flex;
            /* war: grid */
            flex-direction: row;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        @media(max-width: 900px) {
            .adv-game-body {
                flex-direction: column;
            }

            .adv-split-handle {
                display: none;
            }

            .adv-game-left,
            .adv-game-right {
                width: 100% !important;
                max-width: 100%;
            }
        }

        /* Linke Seite: Grid + Aufgabe → nur nötiger Platz */
        .adv-game-left {
            /* Breite wird per JS gesetzt, Startwert: */
            width: auto;
            min-width: 300px;
            max-width: 70%;
            flex-shrink: 0;
            padding: 1.25rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border-right: none;
            /* Splitter übernimmt die Trennung */
            overflow-y: auto;
        }

        /* ── Drag-Handle (Splitter) ── */
        .adv-split-handle {
            width: 6px;
            background: var(--border-color);
            cursor: col-resize;
            flex-shrink: 0;
            position: relative;
            transition: background 0.2s;
            z-index: 10;
        }

        .adv-split-handle:hover,
        .adv-split-handle.dragging {
            background: var(--clr-accent);
        }

        .adv-split-handle::after {
            content: '⋮';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--clr-muted);
            font-size: 1rem;
            pointer-events: none;
        }


        /* Task Description */
        .adv-task-desc {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.9rem 1rem;
            font-size: 0.88rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .adv-task-desc strong {
            color: var(--text-color);
        }

        .adv-task-goal {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: var(--clr-accent2-text);
        }

        /* Grid Canvas Area */
        .adv-grid-wrap {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
        }

        .adv-grid-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--clr-muted);
            align-self: flex-start;
        }

        .adv-grid-canvas-wrap {
            position: relative;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            background: var(--box-bg);
        }

        canvas.adv-grid-canvas {
            display: block;
        }

        /* Simulation Controls */
        .adv-sim-controls {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .adv-sim-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.55rem 1rem;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: var(--box-bg);
            color: var(--text-color);
            transition: var(--transition);
            font-family: inherit;
        }

        .adv-sim-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .adv-sim-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .adv-sim-btn.run {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            border: none;
            box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
        }

        .adv-sim-btn.run:hover:not(:disabled) {
            box-shadow: 0 8px 24px rgba(52, 211, 153, 0.4);
        }

        .adv-sim-btn.reset {
            color: var(--danger-text);
            border-color: rgba(248, 113, 113, 0.3);
        }

        .adv-speed-wrap {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--clr-muted);
            margin-left: auto;
        }

        .adv-speed-wrap input[type=range] {
            width: 80px;
            accent-color: var(--clr-accent);
        }

        /* Objective Checklist */
        .adv-objectives {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .adv-obj-item {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.85rem;
            color: var(--clr-muted);
            padding: 0.4rem 0.6rem;
            border-radius: 8px;
            transition: background 0.2s;
        }

        .adv-obj-item.done {
            color: var(--clr-accent-text);
            background: rgba(52, 211, 153, 0.07);
        }

        .adv-obj-item .obj-icon {
            font-size: 1rem;
            flex-shrink: 0;
        }

        /* Right: Code Editor Panel */
        /* Rechte Seite: Code-Editor → nimmt restlichen Platz */
        .adv-game-right {
            flex: 1;
            /* nimmt ALLEN restlichen Platz */
            min-width: 280px;
            padding: 1.25rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            overflow-y: auto;
        }

        .adv-code-label {
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--clr-muted);
        }

        /* Code-Editor füllt verfügbare Höhe */
        /* ── Code-Wrap: position:relative ist PFLICHT ── */
        .adv-code-wrap {
            position: relative;
            /* ← KRITISCH für absolute Kinder */
            border-radius: 10px;
            border: 1px solid var(--border-color);
            flex: 1;
            min-height: 200px;
            min-width: 280px;
            display: flex;
            /* ← NEU: damit textarea 100% Höhe bekommt */
            flex-direction: column;
            overflow: hidden;
            /* ← verhindert dass ln-div rausragt */
        }

        .adv-code-wrap:focus-within {
            border-color: var(--clr-accent2);
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
        }

        /* ── Zeilennummern: muss ÜBER textarea liegen ── */
        .adv-line-numbers {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            /* ← volle Höhe */
            width: 42px;
            padding-top: 0.75rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.65em;
            color: var(--clr-muted);
            opacity: 0.7;
            /* ← war 0.55, erhöht für Sichtbarkeit */
            pointer-events: none;
            border-right: 1px solid var(--border-color);
            user-select: none;
            background: rgba(0, 0, 0, 0.22);
            overflow: hidden;
            box-sizing: border-box;
            z-index: 3;
            /* ← ÜBER textarea und overlay */
        }

        html[data-theme="light"] .adv-line-numbers {
            background: rgba(15, 23, 42, 0.06);
            opacity: 0.8;
        }

        .adv-line-numbers span {
            display: block;
            padding-right: 8px;
            height: 1.65em;
            line-height: 1.65em;
            box-sizing: border-box;
            font-size: 0.88rem;
        }

        /* ── Fehler-Highlighting ── */
        .adv-line-numbers span.error-line {
            background: rgba(248, 113, 113, 0.3);
            color: #f87171;
            font-weight: 800;
        }

        /* ── Code Editor – exakt gleiche Typografie ── */
        /* ── Textarea: left-padding = Breite der Zeilennummern ── */
        .adv-code-editor {
            display: block;
            width: 100%;
            min-height: 220px;
            height: 100%;
            padding: 0.75rem 0.75rem 0.75rem 52px;
            /* ← 52px = 42px + 10px gap */
            background: rgba(0, 0, 0, 0.25);
            color: var(--text-color);
            border: none;
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.65em;
            resize: none;
            outline: none;
            tab-size: 4;
            white-space: pre;
            overflow-wrap: normal;
            overflow-x: auto;
            overflow-y: auto;
            box-sizing: border-box;
            position: relative;
            /* ← damit z-index wirkt */
            z-index: 1;
        }

        html[data-theme="light"] .adv-code-editor {
            background: rgba(15, 23, 42, 0.03);
        }

        /* Overlay für Fehler-Zeile im Textarea (nicht direkt möglich –
   wir nutzen ein transparentes Highlight-Overlay) */
        .adv-error-overlay {
            position: absolute;
            left: 42px;
            /* = Breite der Zeilennummern */
            right: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 2;
            /* über textarea (z:1), unter ln (z:3) */
            font-family: 'Courier New', monospace;
            font-size: 0.88rem;
            line-height: 1.65em;
            padding: 0.75rem 0.75rem 0 0.75rem;
            overflow: hidden;
        }

        .adv-error-overlay-line {
            display: block;
            height: 1.65em;
            background: transparent;
            box-sizing: border-box;
        }

        .adv-error-overlay-line.highlight {
            background: rgba(248, 113, 113, 0.18);
            border-left: 3px solid #f87171;
            border-radius: 0 4px 4px 0;
            margin-left: -0.75rem;
            padding-left: calc(0.75rem - 3px);
        }

        /* ── Fehler-Info: erweitertes Layout ── */
        .adv-error-info {
            display: none;
            background: rgba(248, 113, 113, 0.08);
            border: 1px solid rgba(248, 113, 113, 0.35);
            border-left: 4px solid #f87171;
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1rem;
            font-size: 0.85rem;
            color: #f87171;
            font-family: inherit;
            line-height: 1.5;
            margin-top: 0.25rem;
        }

        .adv-error-info.show {
            display: block;
        }

        .adv-error-info .err-loc {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-family: inherit;
            margin-top: 0.25rem;
        }

        /* Fehler-Typ Badge */
        .err-type-badge {
            display: inline-block;
            font-weight: 800;
            font-size: 0.88rem;
            margin-bottom: 0.3rem;
        }

        /* Rohe Fehlermeldung */
        .err-raw {
            display: block;
            font-family: 'Courier New', monospace;
            font-size: 0.78rem;
            color: var(--clr-muted);
            margin-bottom: 0.5rem;
            opacity: 0.85;
        }

        /* Erklärungstext */
        .err-detail {
            font-size: 0.85rem;
            color: var(--clr-muted);
            line-height: 1.6;
            margin-bottom: 0.5rem;
            font-family: inherit;
        }

        .err-detail code {
            color: #f87171;
            background: rgba(248, 113, 113, 0.12);
            padding: 1px 5px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
        }

        /* Tipps-Liste */
        .err-tips {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            border-top: 1px solid rgba(248, 113, 113, 0.2);
            padding-top: 0.5rem;
            margin-top: 0.25rem;
        }

        .err-tips li {
            font-size: 0.82rem;
            color: var(--clr-muted);
            line-height: 1.5;
            padding-left: 0.25rem;
            font-family: inherit;
        }

        .err-tips li code {
            color: var(--clr-accent2-text);
            background: rgba(56, 189, 248, 0.1);
            padding: 1px 5px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
        }

        .err-tips li strong {
            color: var(--text-color);
        }

        /* Zeilennummer-Anzeige */
        .err-loc {
            font-size: 0.75rem;
            color: var(--clr-muted);
            font-family: 'Courier New', monospace;
            margin-top: 0.4rem;
            padding-top: 0.4rem;
            border-top: 1px solid rgba(248, 113, 113, 0.15);
        }

        /* Zeilenbereich-Highlight: leicht andere Farbe */
        .adv-error-overlay-line.highlight {
            background: rgba(248, 113, 113, 0.18);
            border-left: 3px solid #f87171;
            border-radius: 0 4px 4px 0;
            margin-left: -0.75rem;
            padding-left: calc(0.75rem - 3px);
        }

        /* Zweite Zeile im Bereich: etwas heller */
        .adv-error-overlay-line.highlight+.adv-error-overlay-line.highlight {
            background: rgba(248, 113, 113, 0.10);
            border-left-color: rgba(248, 113, 113, 0.5);
        }

        /* API Docs */
        .adv-api-box {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 1rem;
        }

        .adv-api-title {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--clr-accent2-text);
            margin-bottom: 0.6rem;
        }

        .adv-api-list {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .adv-api-entry {
            font-size: 0.8rem;
            font-family: 'Courier New', monospace;
            color: var(--clr-muted);
            display: flex;
            gap: 0.5rem;
            align-items: flex-start;
        }

        .adv-api-fn {
            color: var(--clr-accent-text);
            font-weight: 700;
            white-space: nowrap;
        }

        .adv-api-desc {
            color: var(--clr-muted);
            font-family: inherit;
        }

        /* Output Box */
        .adv-output-box {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0.7rem 0.9rem;
            font-family: 'Courier New', monospace;
            font-size: 0.83rem;
            line-height: 1.5;
            color: var(--clr-muted);
            min-height: 50px;
            max-height: 100px;
            overflow-y: auto;
            white-space: pre-wrap;
        }

        html[data-theme="light"] .adv-output-box {
            background: rgba(15, 23, 42, 0.04);
        }

        /* Stars Result */
        .adv-result-banner {
            display: none;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            text-align: center;
            animation: slideUp 0.4s ease;
        }

        .adv-result-banner.show {
            display: block;
        }

        .adv-result-banner.success {
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.3);
        }

        .adv-result-banner.partial {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .adv-result-banner.fail {
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.3);
        }

        .adv-result-stars {
            font-size: 2rem;
            letter-spacing: 0.15rem;
            margin-bottom: 0.5rem;
        }

        .adv-result-title {
            font-size: 1rem;
            font-weight: 800;
        }

        .adv-result-banner.success .adv-result-title {
            color: var(--clr-accent-text);
        }

        .adv-result-banner.partial .adv-result-title {
            color: var(--warning-text);
        }

        .adv-result-banner.fail .adv-result-title {
            color: var(--danger-text);
        }

        .adv-result-msg {
            font-size: 0.85rem;
            color: var(--clr-muted);
            margin-top: 0.3rem;
        }

        .adv-result-xp {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--clr-accent2-text);
            margin-top: 0.5rem;
        }

        /* Hint Strip */
        .adv-hint-strip {
            display: none;
            background: rgba(167, 139, 250, 0.07);
            border: 1px solid rgba(167, 139, 250, 0.25);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-size: 0.85rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        .adv-hint-strip.show {
            display: block;
        }

        .adv-hint-strip-title {
            font-weight: 700;
            color: #a78bfa;
            font-size: 0.8rem;
            margin-bottom: 0.3rem;
        }

        /* Difficulty pills */
        .diff-pill {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 800;
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
        }

        .diff-pill.easy {
            background: rgba(52, 211, 153, 0.15);
            color: #34d399;
        }

        .diff-pill.medium {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
        }

        .diff-pill.hard {
            background: rgba(248, 113, 113, 0.15);
            color: #f87171;
        }

        .diff-pill.expert {
            background: rgba(167, 139, 250, 0.15);
            color: #a78bfa;
        }

        /* Next Level Button */
        .adv-next-btn {
            display: none;
            margin-top: 0.75rem;
            width: 100%;
            padding: 0.75rem;
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(52, 211, 153, 0.2);
        }

        .adv-next-btn.show {
            display: block;
        }

        .adv-next-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(52, 211, 153, 0.4);
        }

        /* Responsive */
        @media(max-width:600px) {
            .adv-worlds-grid {
                grid-template-columns: 1fr;
            }

            .adv-levels-row {
                grid-template-columns: repeat(2, 1fr);
            }

            .adv-game-body {
                grid-template-columns: 1fr;
            }

            .adv-code-editor {
                min-height: 160px;
            }
        }

        /* ══════════════════════════════════════════════════════════════
   MISSIONSZIELE, BADGES & BOSS-LEVEL STYLES
══════════════════════════════════════════════════════════════ */

        /* ── Mission Panel (im Adventure-Hero) ── */
        .adv-mission-panel {
            width: 100%;
            align-self: stretch;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow-sm);
        }

        .adv-mission-title {
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--clr-accent-text);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .adv-mission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 0.75rem;
            width: 100%;
        }

        .adv-mission-card {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .adv-mission-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--mission-clr, var(--clr-accent));
            border-radius: 3px 0 0 3px;
        }

        .adv-mission-card.done {
            border-color: rgba(52, 211, 153, 0.35);
            background: rgba(52, 211, 153, 0.05);
        }

        .adv-mission-card.done::before {
            background: var(--clr-accent);
        }

        .adv-mission-icon {
            font-size: 1.6rem;
            flex-shrink: 0;
        }

        .adv-mission-body {
            flex: 1;
            min-width: 0;
        }

        .adv-mission-name {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 0.2rem;
        }

        .adv-mission-desc {
            font-size: 0.78rem;
            color: var(--clr-muted);
            line-height: 1.5;
        }

        .adv-mission-progress-wrap {
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .adv-mission-bar {
            flex: 1;
            height: 5px;
            background: var(--border-color);
            border-radius: 999px;
            overflow: hidden;
        }

        .adv-mission-bar-fill {
            height: 100%;
            border-radius: 999px;
            background: var(--mission-clr, var(--clr-accent));
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .adv-mission-pct {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--mission-clr, var(--clr-accent));
            white-space: nowrap;
        }

        .adv-mission-reward {
            font-size: 0.72rem;
            color: var(--clr-accent2-text);
            font-weight: 700;
            margin-top: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .adv-mission-check {
            position: absolute;
            top: 0.6rem;
            right: 0.75rem;
            font-size: 1rem;
            color: var(--clr-accent-text);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .adv-mission-card.done .adv-mission-check {
            opacity: 1;
        }

        /* ── Badge Gallery ── */
        .adv-badge-section {
            width: 100%;
            align-self: stretch;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow-sm);
        }

        .adv-badge-title {
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #fbbf24;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .adv-badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 0.75rem;
            width: 100%;
        }

        .adv-badge-card {
            background: var(--box-bg);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem 0.75rem;
            text-align: center;
            transition: var(--transition);
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        .adv-badge-card.earned {
            border-color: #fbbf24;
            background: rgba(251, 191, 36, 0.07);
            box-shadow: 0 0 16px rgba(251, 191, 36, 0.2);
        }

        .adv-badge-card.earned:hover {
            transform: translateY(-3px) scale(1.04);
        }

        .adv-badge-card.locked {
            opacity: 0.38;
            filter: grayscale(1);
        }

        .adv-badge-icon {
            font-size: 2rem;
            margin-bottom: 0.4rem;
            display: block;
        }

        .adv-badge-name {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.3;
            margin-bottom: 0.2rem;
        }

        .adv-badge-cond {
            font-size: 0.65rem;
            color: var(--clr-muted);
            line-height: 1.4;
        }

        .adv-badge-earned-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #fbbf24, #f97316);
            color: #0f172a;
            font-size: 0.6rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            padding: 0.2rem;
            text-align: center;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        .adv-badge-card.earned .adv-badge-earned-label {
            transform: translateY(0);
        }

        .adv-badge-new-flash {
            position: absolute;
            top: 0.4rem;
            right: 0.4rem;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f97316;
            box-shadow: 0 0 6px #f97316;
            animation: pulse 1s ease-in-out infinite;
        }

        /* Badge-Toast */
        .badge-toast {
            position: fixed;
            bottom: 6rem;
            right: 2rem;
            background: linear-gradient(135deg, #fbbf24, #f97316);
            color: #0f172a;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 8px 30px rgba(251, 191, 36, 0.45);
            z-index: 5500;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-width: 320px;
        }

        .badge-toast .bt-icon {
            font-size: 2rem;
        }

        .badge-toast .bt-title {
            font-size: 0.75rem;
            opacity: 0.8;
        }

        .badge-toast .bt-name {
            font-size: 1rem;
        }

        /* ── Boss-Level Card ── */
        .adv-level-bubble.boss {
            border-color: rgba(248, 113, 113, 0.6);
            background: rgba(248, 113, 113, 0.06);
            grid-column: span 2;
        }

        .adv-level-bubble.boss:hover {
            border-color: #f87171;
            box-shadow: 0 0 24px rgba(248, 113, 113, 0.35);
        }

        .adv-boss-label {
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f87171;
            background: rgba(248, 113, 113, 0.15);
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            margin-top: 0.2rem;
        }

        .adv-level-bubble.boss .adv-level-num {
            color: #f87171;
            font-size: 1.8rem;
        }

        /* Boss-Level Modal – spezielle Topbar */
        .adv-game-topbar.boss-topbar {
            background: linear-gradient(135deg,
                    rgba(248, 113, 113, 0.15), rgba(167, 139, 250, 0.1));
            border-bottom-color: rgba(248, 113, 113, 0.3);
        }

        .boss-crown {
            font-size: 1.4rem;
            animation: float 2s ease-in-out infinite;
        }

        .boss-phase-indicator {
            display: flex;
            gap: 0.4rem;
            align-items: center;
            font-size: 0.78rem;
            color: var(--clr-muted);
            font-weight: 700;
        }

        .boss-phase-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--border-color);
            transition: background 0.3s;
        }

        .boss-phase-dot.active {
            background: #f87171;
            box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
        }

        .boss-phase-dot.done {
            background: var(--clr-accent);
        }

        /* Boss-Phasen-Banner */
        .boss-phase-banner {
            background: rgba(248, 113, 113, 0.08);
            border: 1px solid rgba(248, 113, 113, 0.25);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            margin-bottom: 0.75rem;
        }

        .boss-phase-banner-title {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #f87171;
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .boss-phase-banner p {
            font-size: 0.85rem;
            color: var(--clr-muted);
            line-height: 1.6;
        }

        /* Boss HP-Bar */
        .boss-hp-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .boss-hp-label {
            font-size: 0.78rem;
            font-weight: 800;
            color: #f87171;
            white-space: nowrap;
        }

        .boss-hp-track {
            flex: 1;
            height: 14px;
            background: var(--box-bg);
            border-radius: 999px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .boss-hp-fill {
            height: 100%;
            background: linear-gradient(90deg, #f87171, #f97316);
            border-radius: 999px;
            transition: width 0.6s ease;
        }

        .boss-hp-val {
            font-size: 0.78rem;
            font-weight: 700;
            color: #f87171;
            white-space: nowrap;
        }

        /* Boss-Sieg Animation */
        @keyframes bossDefeated {
            0% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: scale(1.3) rotate(5deg);
                opacity: 0.6;
            }

            100% {
                transform: scale(0) rotate(20deg);
                opacity: 0;
            }
        }

        .boss-defeated {
            animation: bossDefeated 0.8s ease forwards;
        }

        /* Responsive */
        @media(max-width: 600px) {
            .task-card {
                width: 100%;
                flex: 0 0 100%;
            }

            .adv-badge-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .adv-mission-grid {
                grid-template-columns: 1fr;
            }

            .adv-level-bubble.boss {
                grid-column: span 1;
            }
        }

        /* Kapitel-Highlight beim Anspringen aus der Übersicht */
        @keyframes chapterPulse {
            0% {
                box-shadow: 0 0 0 0px rgba(52, 211, 153, 0.6);
            }

            50% {
                box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.2);
            }

            100% {
                box-shadow: 0 0 0 0px rgba(52, 211, 153, 0.0);
            }
        }

        .chapter-highlight {
            animation: chapterPulse 1.5s ease-out;
            border-radius: var(--radius);
        }
        /* ── Spielername-Dialog ─────────────────────────────────── */
        #lb-name-dialog-overlay {
            display:none; position:fixed; inset:0; z-index:9999;
            background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
            align-items:center; justify-content:center;
        }
        #lb-name-dialog-overlay.show { display:flex; }
        #lb-name-dialog {
            background:var(--card-bg); border:1px solid var(--border-color);
            border-radius:18px; padding:2rem; width:min(420px,92vw);
            box-shadow:0 20px 60px rgba(0,0,0,.5);
        }
        #lb-name-dialog h2 { font-size:1.3rem; margin-bottom:.4rem; }
        #lb-name-dialog p  { color:var(--clr-muted); font-size:.88rem; margin-bottom:1.2rem; }
        #lb-name-dialog p a { color:var(--clr-accent-text); }
        #lb-name-input {
            width:100%; box-sizing:border-box; padding:.7rem 1rem; font-size:1rem;
            border-radius:10px; border:1px solid var(--border-color);
            background:rgba(0,0,0,.2); color:var(--text-color);
            outline:none; margin-bottom:.2rem;
        }
        #lb-name-input:focus { border-color:var(--clr-accent); }
        #lb-name-error { color:#f87171; font-size:.82rem; min-height:1.2em; margin-bottom:.8rem; }
        .lb-dialog-btns { display:flex; gap:.7rem; justify-content:flex-end; }
        /* ── Leaderboard-Tabelle ──────────────────────────────────── */
        .lb-table {
            width:100%; border-collapse:collapse; font-size:.88rem;
            border-radius:12px; overflow:hidden;
        }
        .lb-table th {
            background:rgba(52,211,153,.1); padding:.6rem .8rem; text-align:left;
            font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
            color:var(--clr-muted); font-weight:600;
        }
        .lb-table td { padding:.6rem .8rem; border-bottom:1px solid var(--border-color); }
        .lb-table tr:last-child td { border-bottom:none; }
        .lb-table tr:hover td { background:rgba(255,255,255,.03); }
        .lb-table tr.lb-me td { background:rgba(52,211,153,.07); font-weight:600; }
        .lb-xp { color:var(--clr-accent-text); font-weight:700; }
        html[data-theme="light"] .lb-table tr.lb-me td { background:rgba(52,211,153,.12); }
        html[data-theme="light"] #lb-name-input { background:rgba(15,23,42,.04); }
    
        /* Kontrast-Korrekturen (WCAG AA, 2026-10-07): gleiche Farbtöne, nur dunkler bzw. heller */
        html[data-theme="light"] .ch-badge.advanced { color: #9d5604; }  /* statt #d97706 */
        html[data-theme="light"] .ch-badge.beginner { color: #047854; }  /* statt #059669 */
        html[data-theme="light"] .ch-badge.expert { color: #c82020; }  /* statt #dc2626 */
        html[data-theme="light"] .ch-badge.intermediate { color: #026da4; }  /* statt #0284c7 */
        html[data-theme="light"] .ch-badge.legend { color: #c32069; }  /* statt #db2777 */
    

        /* Aufgabenkacheln füllen die Breite (zec_breit.css: .tasks-grid als Flex-Reihe, .task-card fest 280 px) */
        .tasks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        }

        .tasks-grid > .task-card {
            width: auto;
            flex: none;
            min-width: 0;
        }