/* ══════════════════════════════════════════════
           SEITEN-SPEZIFISCHE STYLES
           (alles was zec_breit.css nicht abdeckt)
        ══════════════════════════════════════════════ */

        /* ── Confetti-Canvas ── */
        #confetti-canvas {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
        }

        /* ── Toast ── */
        .toast-container {
            position: fixed;
            bottom: 1.4rem;
            right: 1.4rem;
            z-index: 8000;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .toast {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--clr-accent);
            border-radius: var(--radius);
            padding: .7rem 1.1rem;
            font-size: .85rem;
            font-weight: 600;
            box-shadow: var(--shadow);
            animation: fadeIn .25s ease;
            max-width: 300px;
            color: var(--clr-text);
        }

        .toast.hiding {
            animation: slideOut .3s ease forwards;
        }

        .toast.success-toast {
            border-left-color: var(--success);
        }

        .toast.badge-toast {
            border-left-color: var(--warning);
        }

        .toast.streak-toast {
            border-left-color: #f97316;
        }

        @keyframes slideOut {
            to {
                opacity: 0;
                transform: translateX(60px);
            }
        }

        /* ── Completion Overlay ── */
        .completion-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .65);
            backdrop-filter: blur(6px);
            z-index: 7000;
            align-items: center;
            justify-content: center;
        }

        .completion-overlay.show {
            display: flex;
        }

        .completion-box {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 2.5rem 2rem;
            text-align: center;
            max-width: 380px;
            width: 90%;
            box-shadow: var(--shadow-lg);
            animation: fadeIn .35s cubic-bezier(.34, 1.56, .64, 1);
        }

        .completion-box h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--clr-accent-text);
            margin-bottom: .4rem;
        }

        .completion-box p {
            color: var(--clr-muted);
            margin-bottom: .8rem;
        }

        .xp-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: var(--clr-on-accent);
            font-weight: 800;
            font-size: 1.2rem;
            padding: .45rem 1.2rem;
            border-radius: 999px;
        }

        /* ── Theme-Toggle: kein eigener z-index nötig –
           der Header selbst liegt über der sticky Nav ── */
        .theme-toggle {
            position: relative;
        }

        /* ── Header über der sticky Nav ── */
        header {
            position: relative;
            z-index: 210;
        }

        /* ── Stats-Bar: Abstand zum absolut positionierten Theme-Toggle ── */
        .stats-bar {
            margin-right: 60px;
            /* Breite des Toggle-Buttons (46px) + Abstand */
        }

        /* ── App-Nav (sticky) ── */
        .app-nav {
            display: flex;
            gap: .35rem;
            padding: .7rem 1.5rem;
            background: var(--clr-surface);
            border-bottom: 1px solid var(--border-color);
            overflow-x: auto;
            scrollbar-width: none;
            position: sticky;
            top: 0;
            z-index: 200;
            box-shadow: var(--shadow-sm);
        }

        .app-nav::-webkit-scrollbar {
            display: none;
        }

        .nav-btn {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            color: var(--clr-muted);
            border-radius: 999px;
            padding: .38rem .95rem;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            font-family: inherit;
            transition: var(--transition-fast);
        }

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

        .nav-btn.active {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: var(--clr-on-accent);
            border-color: transparent;
        }

        .nav-btn.done-nav::after {
            content: ' ✓';
            font-size: .72rem;
        }

        /* ── Stats-Bar im Header ── */
        .stats-bar {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .stat-pill {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: .3rem .9rem;
            font-size: .82rem;
            font-weight: 700;
            color: var(--clr-muted);
            display: flex;
            align-items: center;
            gap: .3rem;
        }

        .stat-pill .val {
            color: var(--clr-accent-text);
        }

        .streak-anim {
            display: inline-block;
            animation: flicker 1.4s ease-in-out infinite;
        }

        @keyframes flicker {

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

            50% {
                opacity: .7;
                transform: scale(1.2)
            }
        }

        /* ── Sections ── */
        .section {
            display: none;
        }

        .section.active {
            display: block;
        }

        /* ── Step Indicator ── */
        .step-indicator {
            display: flex;
            align-items: center;
            gap: .3rem;
            margin-bottom: 1.4rem;
            flex-wrap: wrap;
        }

        .step {
            display: flex;
            align-items: center;
            gap: .35rem;
            padding: .35rem .8rem;
            border-radius: 999px;
            font-size: .76rem;
            font-weight: 700;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            color: var(--clr-muted);
            opacity: .55;
            transition: var(--transition-fast);
        }

        .step.done {
            background: rgba(52, 211, 153, .15);
            border-color: var(--success);
            color: var(--success-text);
            opacity: 1;
        }

        .step.active {
            background: rgba(56, 189, 248, .15);
            border-color: var(--clr-accent2);
            color: var(--clr-accent2-text);
            opacity: 1;
        }

        .step-num {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .68rem;
        }

        .step-sep {
            color: var(--clr-muted);
            font-size: .85rem;
        }

        /* ── PRIMM Cards ── */
        .primm-card {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.4rem 1.5rem;
            margin-bottom: 1rem;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-fast);
        }

        .primm-card:hover {
            box-shadow: var(--shadow);
        }

        .primm-card.locked {
            opacity: .35;
            pointer-events: none;
            user-select: none;
        }

        /* PRIMM Labels */
        .primm-label {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            font-size: .72rem;
            font-weight: 800;
            padding: .25rem .8rem;
            border-radius: 999px;
            margin-bottom: .9rem;
            letter-spacing: .4px;
            text-transform: uppercase;
        }

        .primm-predict {
            background: rgba(167, 139, 250, .15);
            color: #a78bfa;
        }

        .primm-run {
            background: rgba(52, 211, 153, .15);
            color: var(--success-text);
        }

        .primm-investigate {
            background: rgba(251, 191, 36, .15);
            color: var(--warning-text);
        }

        .primm-modify {
            background: rgba(248, 113, 113, .15);
            color: var(--danger-text);
        }

        .primm-make {
            background: rgba(56, 189, 248, .15);
            color: var(--clr-accent2-text);
        }

        /* Task Header */
        .task-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: .7rem;
        }

        .task-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--clr-text);
        }

        .difficulty {
            display: flex;
            gap: 4px;
        }

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

        .dot.filled {
            background: var(--warning);
        }

        /* ── Code Blocks (read-only) ── */
        .code-wrap {
            background: #0d1117;
            border-radius: 10px;
            overflow: hidden;
            margin: .6rem 0;
            font-size: .81rem;
            border: 1px solid var(--border-color);
        }

        .code-inner {
            display: flex;
            overflow-x: auto;
        }

        .line-nums {
            background: #010409;
            color: #30363d;
            padding: .9rem .5rem .9rem .7rem;
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            font-size: .81rem;
            line-height: 1.7;
            min-width: 36px;
        }

        .line-nums span {
            display: block;
        }

        .code-content {
            padding: .9rem 1rem;
            white-space: pre;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            line-height: 1.7;
            color: #c9d1d9;
            flex: 1;
        }

        /* Syntax tokens */
        .kw {
            color: #ff7b72;
            font-weight: 700;
        }

        .fn {
            color: #d2a8ff;
        }

        .tp {
            color: #79c0ff;
        }

        .var {
            color: #c9d1d9;
        }

        .nm {
            color: #79c0ff;
        }

        .cm {
            color: #8b949e;
            font-style: italic;
        }

        .st {
            color: #a5d6ff;
        }

        .op {
            color: #ff7b72;
        }

        /* ── Canvas Display ── */
        .canvas-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .6rem;
            margin: .8rem 0;
        }

        .canvas-panel canvas {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            box-shadow: var(--shadow);
            max-width: 100%;
        }

        .canvas-caption {
            font-size: .74rem;
            color: var(--clr-muted);
            font-style: italic;
            text-align: center;
        }

        /* Two-column: code + canvas */
        .code-canvas-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.1rem;
            align-items: start;
        }

        @media (max-width: 700px) {
            .code-canvas-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── Choice Buttons ── */
        .choice-group {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin: .7rem 0;
        }

        .btn-choice {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: .45rem 1rem;
            font-size: .85rem;
            font-weight: 600;
            cursor: pointer;
            color: var(--clr-text);
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .btn-choice:hover {
            border-color: var(--clr-accent);
            color: var(--clr-accent-text);
            background: rgba(52, 211, 153, .07);
        }

        .btn-choice.sm {
            font-size: .78rem;
            padding: .35rem .8rem;
        }

        /* ── Feedback ── */
        .feedback {
            display: none;
            align-items: flex-start;
            gap: .5rem;
            padding: .6rem .9rem;
            border-radius: 8px;
            font-size: .84rem;
            margin-top: .6rem;
            font-weight: 600;
        }

        .feedback.show {
            display: flex;
        }

        .feedback.ok {
            background: rgba(52, 211, 153, .1);
            color: var(--success-text);
            border: 1px solid rgba(52, 211, 153, .3);
        }

        .feedback.err {
            background: rgba(248, 113, 113, .1);
            color: var(--danger-text);
            border: 1px solid rgba(248, 113, 113, .3);
        }

        /* ── Hint ── */
        .hint-box {
            display: none;
            background: rgba(251, 191, 36, .07);
            border-left: 3px solid var(--warning);
            border-radius: 8px;
            padding: .65rem .9rem;
            font-size: .83rem;
            margin-top: .5rem;
            color: var(--clr-muted);
        }

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

        .hint-btn {
            background: rgba(251, 191, 36, .1);
            border: 1px solid rgba(251, 191, 36, .3);
            color: var(--warning-text);
            border-radius: 999px;
            padding: .35rem .9rem;
            font-size: .78rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .hint-btn:hover {
            background: rgba(251, 191, 36, .2);
        }

        /* ── Action Buttons ── */
        .btn-group {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            margin-top: .8rem;
        }

        .btn-action {
            padding: .48rem 1.2rem;
            border: none;
            border-radius: 999px;
            font-size: .87rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .btn-action:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow);
        }

        .btn-action.success {
            background: var(--success);
            color: var(--clr-on-accent);
        }

        .btn-action.warn {
            background: var(--danger);
            color: #fff;
        }

        .btn-action.ghost {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--clr-muted);
        }

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

        .btn-action.sm {
            padding: .28rem .75rem;
            font-size: .76rem;
        }

        /* ── Code Editor ── */
        .code-editor {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            margin: .7rem 0;
            background: #0d1117;
        }

        .editor-toolbar {
            background: #010409;
            padding: .4rem .9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: .73rem;
            color: #8b949e;
            border-bottom: 1px solid #30363d;
        }

        .editor-body {
            display: flex;
        }

        .editor-line-nums {
            background: #010409;
            color: #30363d;
            padding: .7rem .5rem .7rem .6rem;
            min-width: 34px;
            text-align: right;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            font-size: .8rem;
            line-height: 1.7;
            display: flex;
            flex-direction: column;
            user-select: none;
            overflow: hidden;
            border-right: 1px solid #30363d;
        }

        .editor-line-nums span {
            display: block;
        }

        .code-textarea {
            flex: 1;
            background: #0d1117;
            color: #c9d1d9;
            border: none;
            outline: none;
            padding: .7rem .9rem;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            font-size: .8rem;
            line-height: 1.7;
            resize: none;
            min-height: 120px;
        }

        .code-textarea:focus {
            outline: none;
        }

        /* ── Array Visual ── */
        .array-visual {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin: .6rem 0;
        }

        .arr-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .15rem;
        }

        .arr-idx {
            font-size: .66rem;
            color: var(--clr-muted);
            font-weight: 700;
        }

        .arr-val {
            background: rgba(167, 139, 250, .12);
            border: 1px solid rgba(167, 139, 250, .4);
            border-radius: 6px;
            padding: .3rem .55rem;
            font-weight: 700;
            font-size: .86rem;
            min-width: 36px;
            text-align: center;
            color: var(--clr-text);
        }

        .arr-cell.input-cell input {
            width: 46px;
            text-align: center;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: .28rem .2rem;
            font-size: .82rem;
            font-weight: 700;
            background: var(--box-bg);
            color: var(--clr-text);
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .arr-cell.input-cell input:focus {
            outline: 2px solid var(--clr-accent);
            border-color: transparent;
        }

        .arr-cell.input-cell input.correct {
            border-color: var(--success);
            background: rgba(52, 211, 153, .1);
        }

        .arr-cell.input-cell input.wrong {
            border-color: var(--danger);
            background: rgba(248, 113, 113, .1);
        }

        /* ── Trace Table ── */
        .trace-container {
            overflow-x: auto;
            margin: .6rem 0;
        }

        .trace-table {
            border-collapse: collapse;
            font-size: .81rem;
            width: 100%;
            min-width: 300px;
        }

        .trace-table th {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: var(--clr-on-accent);
            padding: .4rem .65rem;
            text-align: left;
            white-space: nowrap;
            font-size: .78rem;
        }

        .trace-table td {
            border-bottom: 1px solid var(--border-color);
            padding: .35rem .5rem;
            white-space: nowrap;
        }

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

        .trace-table td.fixed {
            color: var(--clr-muted);
            font-style: italic;
            font-size: .76rem;
        }

        .trace-input {
            width: 52px;
            text-align: center;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: .22rem .2rem;
            font-size: .78rem;
            background: var(--box-bg);
            color: var(--clr-text);
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .trace-input:focus {
            outline: 2px solid var(--clr-accent);
        }

        .trace-input.correct {
            border-color: var(--success);
            background: rgba(52, 211, 153, .1);
        }

        .trace-input.wrong {
            border-color: var(--danger);
            background: rgba(248, 113, 113, .1);
        }

        /* ── Colour Table ── */
        .color-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .78rem;
            margin-top: .5rem;
        }

        .color-table th {
            background: var(--box-bg);
            color: var(--clr-accent-text);
            padding: .35rem .6rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .color-table td {
            padding: .3rem .6rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--clr-muted);
        }

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

        .swatch {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, .15);
            vertical-align: middle;
            margin-right: .35rem;
        }

        /* ── Stat Grid (Dashboard) ── */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: .9rem;
            margin-bottom: 1.4rem;
        }

        .stat-card {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 1.1rem .9rem;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-fast);
        }

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

        .big-num {
            font-size: 2rem;
            font-weight: 800;
            color: var(--clr-accent-text);
            line-height: 1;
        }

        .label {
            font-size: .75rem;
            color: var(--clr-muted);
            margin-top: .3rem;
        }

        /* ── Badges ── */
        .badges-grid {
            display: flex;
            flex-wrap: wrap;
            gap: .6rem;
            margin-top: .5rem;
        }

        .badge-item {
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: .65rem .85rem;
            text-align: center;
            opacity: .35;
            min-width: 88px;
            transition: var(--transition-fast);
        }

        .badge-item.earned {
            opacity: 1;
            border-color: var(--warning);
            background: rgba(251, 191, 36, .08);
        }

        .badge-icon {
            font-size: 1.4rem;
        }

        .badge-name {
            font-size: .72rem;
            font-weight: 700;
            margin-top: .18rem;
            color: var(--clr-text);
        }

        .badge-desc {
            font-size: .65rem;
            color: var(--clr-muted);
        }

        /* ── Progress ── */
        .progress-wrap {
            background: var(--border-color);
            border-radius: 999px;
            height: 6px;
            overflow: hidden;
        }

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

        /* ── Pixel Editor ── */
        .pixel-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-bottom: .7rem;
            align-items: center;
        }

        .color-btn {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform .15s;
        }

        .color-btn:hover {
            transform: scale(1.2);
        }

        .color-btn.selected {
            border-color: var(--clr-accent);
            transform: scale(1.12);
        }

        #pixel-editor-canvas {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            box-shadow: var(--shadow);
            cursor: crosshair;
            max-width: 100%;
            display: block;
            touch-action: none;
            /* Verhindert Scroll beim Zeichnen auf Touch */
        }

        .pixel-size-label {
            font-size: .78rem;
            color: var(--clr-muted);
        }

        /* ── Select / Inputs inline ── */
        .inline-select {
            font-size: .8rem;
            padding: .25rem .5rem;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--box-bg);
            color: var(--clr-text);
            font-family: inherit;
            cursor: pointer;
        }

        .inline-select:focus {
            outline: 2px solid var(--clr-accent);
        }

        /* ── Preview sections ── */
        .preview-panel {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
            margin-top: .9rem;
            padding: 1rem;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        .preview-panel.show {
            display: flex;
        }

        /* ── Make-Error-Anzeigen ── */
        [id$="-error"] {
            color: var(--danger-text);
            font-size: .8rem;
            margin-top: .4rem;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            min-height: 1.2em;
        }

        /* ════════════════════════════════════════════════
           RESPONSIVE — TABLET & SMARTPHONE
           Breakpoints:  768 px (tablet)  |  480 px (phone)
        ════════════════════════════════════════════════ */

        /* ── Alle Touch-Ziele: Mindestgröße 44 px ── */
        @media (max-width: 768px) {

            /* ── Header ── */
            header {
                padding: .6rem 1rem;
                gap: .5rem;
            }

            .stats-bar {
                gap: .35rem;
            }

            .stat-pill {
                padding: .28rem .65rem;
                font-size: .76rem;
            }

            /* ── Breadcrumb ── */
            .breadcrumb {
                padding: .45rem 1rem;
                font-size: .78rem;
            }

            /* ── App-Nav ── */
            .app-nav {
                padding: .55rem .9rem;
                gap: .3rem;
            }

            .nav-btn {
                padding: .45rem .85rem;
                font-size: .79rem;
                min-height: 36px;
            }

            /* ── Step Indicator ── */
            .step-indicator {
                gap: .2rem;
                margin-bottom: 1rem;
            }

            .step {
                padding: .3rem .6rem;
                font-size: .7rem;
            }

            .step span {
                display: none;
                /* Nur Nummern auf Tablet */
            }

            .step-sep {
                font-size: .75rem;
            }

            /* ── PRIMM Cards ── */
            .primm-card {
                padding: 1.1rem 1rem;
                margin-bottom: .8rem;
            }

            .task-title {
                font-size: 1rem;
            }

            /* ── Code+Canvas Grid: immer einspaltig ── */
            .code-canvas-grid {
                grid-template-columns: 1fr;
                gap: .8rem;
            }

            /* ── Code-Block schriftgröße ── */
            .code-content,
            .line-nums {
                font-size: .77rem;
            }

            /* ── Code-Editor ── */
            .code-textarea {
                font-size: .77rem;
                line-height: 1.6;
                min-height: 100px;
            }

            .editor-line-nums {
                font-size: .77rem;
                line-height: 1.6;
            }

            /* ── Choice Buttons: volle Breite auf kleinen Schirmen ── */
            .choice-group {
                flex-direction: column;
                gap: .4rem;
            }

            .btn-choice {
                width: 100%;
                text-align: left;
                padding: .7rem 1rem;
                font-size: .84rem;
                border-radius: 12px;
                /* Abgerundeter für Touch */
                min-height: 44px;
            }

            .btn-choice.sm {
                font-size: .82rem;
                padding: .6rem .9rem;
                min-height: 44px;
            }

            /* ── Action Buttons ── */
            .btn-group {
                flex-direction: column;
                gap: .4rem;
            }

            .btn-action {
                width: 100%;
                padding: .65rem 1rem;
                font-size: .88rem;
                min-height: 44px;
                text-align: center;
            }

            .hint-btn {
                width: 100%;
                padding: .6rem 1rem;
                font-size: .82rem;
                min-height: 44px;
                text-align: center;
                border-radius: 12px;
            }

            /* ── Stat-Grid ── */
            .stat-grid {
                grid-template-columns: 1fr 1fr;
                gap: .6rem;
            }

            .stat-card {
                padding: .9rem .7rem;
            }

            .big-num {
                font-size: 1.6rem;
            }

            /* ── Badges ── */
            .badges-grid {
                gap: .45rem;
            }

            .badge-item {
                min-width: 76px;
                padding: .55rem .65rem;
            }

            /* ── Trace-Tabelle ── */
            .trace-table th,
            .trace-table td {
                padding: .3rem .4rem;
                font-size: .77rem;
            }

            .trace-input {
                width: 46px;
                font-size: .77rem;
                padding: .25rem .15rem;
                min-height: 36px;
            }

            /* ── Array-Visual Inputs ── */
            .arr-cell.input-cell input {
                width: 42px;
                min-height: 36px;
                font-size: .8rem;
            }

            /* ── Pixel-Editor Toolbar ── */
            .pixel-toolbar {
                gap: .35rem;
            }

            .color-btn {
                width: 30px;
                height: 30px;
            }

            /* ── Inline-Select ── */
            .inline-select {
                font-size: .82rem;
                padding: .38rem .7rem;
                min-height: 36px;
            }

            /* ── Canvas max-width ── */
            .canvas-panel canvas {
                max-width: 100%;
                height: auto;
            }

            /* ── Progress Overview ── */
            #progress-overview>div {
                margin-bottom: .65rem;
            }

            /* ── Toast ── */
            .toast-container {
                bottom: .8rem;
                right: .8rem;
                left: .8rem;
            }

            .toast {
                max-width: 100%;
                font-size: .82rem;
            }

            /* ── Completion Box ── */
            .completion-box {
                padding: 1.8rem 1.2rem;
                width: 92%;
            }

            .completion-box h2 {
                font-size: 1.25rem;
            }
        }

        /* ── Smartphone: 480 px ── */
        @media (max-width: 480px) {

            /* Step-Indicator: noch kompakter */
            .step-indicator {
                gap: .15rem;
            }

            .step {
                padding: .25rem .45rem;
                font-size: .65rem;
            }

            /* Nur Icons in Header-Pills */
            .stat-pill .val {
                display: none;
            }

            /* Code-Block etwas kleiner */
            .code-content,
            .line-nums,
            .code-textarea,
            .editor-line-nums {
                font-size: .72rem;
            }

            /* Trace-Tabelle: horizontales Scrollen explizit */
            .trace-container {
                -webkit-overflow-scrolling: touch;
                overflow-x: auto;
            }

            /* Stat-Grid einspaltig auf sehr kleinen Schirmen */
            .stat-grid {
                grid-template-columns: 1fr 1fr;
            }

            /* Task-Titel kleiner */
            .task-title {
                font-size: .95rem;
            }

            /* Buttons noch etwas größer für sichere Touch-Fläche */
            .btn-choice,
            .btn-choice.sm {
                font-size: .86rem;
                padding: .75rem 1rem;
            }

            .btn-action {
                padding: .7rem 1rem;
                font-size: .9rem;
            }

            /* Pixel-Editor: größere Farb-Buttons */
            .color-btn {
                width: 34px;
                height: 34px;
            }

            /* Primm-Card Padding reduzieren */
            .primm-card {
                padding: .9rem .85rem;
            }
        }

        /* ── Landscape-Phones: Code+Canvas nebeneinander erlauben ── */
        @media (max-width: 768px) and (orientation: landscape) {
            .code-canvas-grid {
                grid-template-columns: 1fr 1fr;
            }

            .step span {
                display: inline;
                /* Labels wieder sichtbar im Landscape */
            }
        }
    

        /* Code-Blöcke sind in beiden Designs dunkel: helle Zeilennummern (überschreibt schreibtisch.css) */
        html[data-theme="light"] .section .code-wrap .line-nums span { color: #8b949e; }
        /* Code-Blöcke und Editoren sind auch im hellen Design dunkel (gegen die hellen Korrekturen in schreibtisch.css) */
        html[data-theme="light"] body .section .cm { color: #8b949e; }
        html[data-theme="light"] body .section .line-nums span,
        html[data-theme="light"] body .section .editor-line-nums span { color: #8b949e; }
        html[data-theme="light"] body .section .editor-toolbar button { color: #c9d1d9; }