/* ============================================================
           SEITEN-SPEZIFISCHE STYLES
           (nur was zec_breit.css nicht abdeckt)
           ============================================================ */

        /* Export-Theme-Farben */
        :root {
            --clr-accent3: #c084fc;
            --clr-accent4: #f472b6;
            --morse-dot: #34d399;
            --morse-dash: #38bdf8;
            --braille-active: #fbbf24;
            --ascii-bit-on: #f472b6;
            --ascii-bit-off: var(--clr-muted);
            --export-bg: #1e293b;
            --export-text: #94a3b8;
            --export-dot-color: #34d399;
            --export-dash-color: #38bdf8;
            --export-braille-active: #fbbf24;
            --export-braille-inactive: #334155;
            --export-braille-stroke-inactive: #475569;
            --export-braille-cell-bg: rgba(251, 191, 36, 0.06);
            --export-braille-cell-stroke: rgba(251, 191, 36, 0.2);
            --export-finger-label: #c084fc;
            --export-ascii-bit-on: #f472b6;
            --export-ascii-label: #f472b6;
        }

        html[data-theme="light"] {
            --clr-accent3: #7e22ce;
            --clr-accent4: #be185d;
            --morse-dot: #047857;
            --morse-dash: #0ea5e9;
            --braille-active: #d97706;
            --ascii-bit-on: #db2777;
            --ascii-bit-off: var(--clr-muted);
            --export-bg: #f8fafc;
            --export-text: #64748b;
            --export-dot-color: #10b981;
            --export-dash-color: #0ea5e9;
            --export-braille-active: #d97706;
            --export-braille-inactive: #e2e8f0;
            --export-braille-stroke-inactive: #94a3b8;
            --export-braille-cell-bg: rgba(217, 119, 6, 0.06);
            --export-braille-cell-stroke: rgba(217, 119, 6, 0.3);
            --export-finger-label: #9333ea;
            --export-ascii-bit-on: #db2777;
            --export-ascii-label: #db2777;
        }

        /* ── Seiten-Layout ── */
        main {
            align-items: stretch;
        }

        /* ── Generische Buttons ── */
        button {
            padding: 10px 18px;
            background-color: var(--box-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
            font-size: .9em;
            transition: var(--transition-fast);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
        }

        button:hover:not(:disabled) {
            background-color: var(--border-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

        button:disabled {
            opacity: .4;
            cursor: not-allowed;
        }

        .btn-export {
            color: var(--clr-accent3);
            border-color: rgba(192, 132, 252, 0.3);
            font-size: .82em;
            padding: 7px 14px;
        }

        .btn-export:hover:not(:disabled) {
            background: rgba(192, 132, 252, 0.1);
        }

        /* ── Inputs / Selects / Textareas ── */
        select,
        input[type="range"],
        input[type="text"],
        textarea {
            background: var(--panel-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 8px 12px;
            font-family: inherit;
            font-size: 14px;
            cursor: pointer;
        }

        select:focus,
        input:focus,
        textarea:focus {
            outline: none;
            border-color: var(--clr-accent2);
        }

        /* ── Statistik-Box ── */
        #statistik-box {
            background: linear-gradient(135deg, var(--box-bg), var(--panel-bg));
            border: 2px solid var(--clr-accent);
            border-radius: var(--radius);
            padding: 20px;
            margin: 20px 0;
            box-shadow: var(--shadow);
            width: 100%;
        }

        #statistik-box h4 {
            margin: 0 0 15px 0;
            color: var(--clr-accent-text);
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #statistik-box h4::before {
            content: "📊";
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 15px;
        }

        .stat-karte {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 12px;
            text-align: center;
            box-shadow: var(--shadow-sm);
        }

        .stat-karte .stat-zahl {
            font-size: 28px;
            font-weight: bold;
            display: block;
            margin-bottom: 4px;
        }

        .stat-karte .stat-label {
            font-size: 12px;
            color: var(--clr-muted);
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .stat-karte.gesamt .stat-zahl {
            color: var(--clr-accent-text);
        }

        .stat-karte.richtig .stat-zahl {
            color: var(--success-text);
        }

        .stat-karte.falsch .stat-zahl {
            color: var(--danger-text);
        }

        .stat-karte.quote .stat-zahl {
            color: var(--warning-text);
        }

        .stat-balken-container {
            background: var(--border-color);
            border-radius: 10px;
            height: 20px;
            overflow: hidden;
            margin: 10px 0;
            display: flex;
        }

        .stat-balken-richtig {
            background: linear-gradient(90deg, #22aa22, #33cc33);
            height: 100%;
            transition: width .5s ease;
        }

        .stat-balken-falsch {
            background: linear-gradient(90deg, #cc3333, #ee5555);
            height: 100%;
            transition: width .5s ease;
        }

        .stat-legende {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: var(--clr-muted);
            margin-top: 5px;
            justify-content: center;
        }

        .stat-legende span::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 4px;
            vertical-align: middle;
        }

        .stat-legende .leg-richtig::before {
            background: #33cc33;
        }

        .stat-legende .leg-falsch::before {
            background: #ee5555;
        }

        .stat-detail-tabelle {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            margin-top: 10px;
            background: var(--box-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .stat-detail-tabelle th,
        .stat-detail-tabelle td {
            border: 1px solid var(--border-color);
            padding: 6px 10px;
            text-align: center;
        }

        .stat-detail-tabelle th {
            background: var(--clr-accent);
            color: #0f172a;
            font-weight: 600;
        }

        .stat-toggle-btn {
            background: none;
            border: none;
            color: var(--clr-accent-text);
            cursor: pointer;
            font-size: 13px;
            text-decoration: underline;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .stat-toggle-btn:hover {
            color: var(--clr-accent2-text);
            transform: none;
            box-shadow: none;
            background: none;
        }

        #stat-detail-container {
            overflow: hidden;
            max-height: 0;
            transition: max-height .4s ease;
        }

        #stat-detail-container.offen {
            max-height: 600px;
        }

        .stat-aktionen {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 12px;
        }

        .stat-zeitstempel {
            font-size: 11px;
            color: var(--clr-muted);
            margin-top: 8px;
            text-align: center;
            width: 100%;
        }

        /* ── Tab-System ── */
        .tab-navigation {
            display: flex;
            gap: 4px;
            width: 100%;
            margin-bottom: 0;
            border-bottom: 3px solid var(--border-color);
            padding: 0;
            flex-wrap: wrap;
        }

        .tab-btn {
            flex: 1;
            min-width: 160px;
            padding: 16px 24px;
            background: var(--box-bg);
            color: var(--clr-muted);
            border: 1px solid var(--border-color);
            border-bottom: none;
            border-radius: var(--radius) var(--radius) 0 0;
            cursor: pointer;
            font-weight: 700;
            font-size: 1em;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: relative;
            top: 3px;
        }

        .tab-btn:hover:not(.aktiv) {
            background: var(--panel-bg);
            color: var(--text-color);
            transform: none;
            box-shadow: none;
        }

        .tab-btn.aktiv {
            background: var(--panel-bg);
            color: var(--text-color);
            border-color: var(--border-color);
            border-bottom: 3px solid var(--panel-bg);
            transform: none;
            box-shadow: var(--shadow);
            z-index: 2;
        }

        .tab-btn .tab-icon {
            font-size: 1.4em;
        }

        .tab-btn .tab-label {
            font-size: .95em;
        }

        .tab-btn.aktiv .tab-label {
            background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tab-btn[data-tab="braille"].aktiv .tab-label {
            background: linear-gradient(90deg, var(--warning), #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tab-btn[data-tab="finger"].aktiv .tab-label {
            background: linear-gradient(90deg, var(--clr-accent3), #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tab-btn[data-tab="ascii"].aktiv .tab-label {
            background: linear-gradient(90deg, var(--clr-accent4), #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tab-panel {
            display: none;
            width: 100%;
            animation: tabFadeIn .35s ease;
        }

        .tab-panel.aktiv {
            display: block;
        }

        .tab-container {
            width: 100%;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 var(--radius) var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }

        @keyframes tabFadeIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        /* ── Split-Layout ── */
        .split-layout {
            display: flex;
            gap: 24px;
            align-items: flex-start;
            width: 100%;
            margin-bottom: 20px;
        }

        .main-tasks {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .sticky-sidebar {
            width: 360px;
            flex-shrink: 0;
            position: sticky;
            top: 20px;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .sticky-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sticky-sidebar::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        .sidebar-panel {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
        }

        /* ── Box-Titel ── */
        .box-title {
            font-weight: 700;
            font-size: 1.1em;
            color: var(--clr-accent2-text);
            margin-bottom: 15px;
            text-align: center;
        }

        /* ── Aufgaben ── */
        .aufgabe {
            background-color: var(--box-bg);
            border: 1px solid var(--border-color);
            border-left: 5px solid var(--clr-accent);
            padding: 20px;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
        }

        .aufgabe h4 {
            margin: 0 0 15px 0;
            color: var(--clr-accent-text);
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .aufgabe h4::before {
            content: "📝";
            font-size: 1.2em;
        }

        .aufgabe-stats {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 12px;
            padding: 8px 12px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: .85em;
            color: var(--clr-muted);
        }

        .aufgabe-stats .as-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .aufgabe-stats .as-value {
            font-weight: 800;
            font-size: 1.1em;
        }

        .aufgabe-stats .as-value.richtig {
            color: var(--success-text);
        }

        .aufgabe-stats .as-value.falsch {
            color: var(--danger-text);
        }

        .aufgabe-stats .as-value.gesamt {
            color: var(--clr-accent2-text);
        }

        .aufgabe-stats .as-sep {
            width: 1px;
            height: 16px;
            background: var(--border-color);
            flex-shrink: 0;
        }

        /* ── Schwierigkeit ── */
        .diff-bar {
            display: flex;
            gap: 8px;
            margin: 12px 0;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        .diff-bar label {
            font-weight: 600;
            font-size: .85em;
            color: var(--clr-muted);
        }

        .diff-btn {
            padding: 6px 14px;
            font-size: .8em;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--box-bg);
            color: var(--text-color);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition-fast);
        }

        .diff-btn:hover {
            background: var(--border-color);
            transform: none;
            box-shadow: none;
        }

        .diff-btn.aktiv {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            border-color: transparent;
            font-weight: 800;
        }

        /* ── Feedback-Boxen ── */
        #feedback-box {
            padding: 16px 20px;
            border-radius: var(--radius);
            font-weight: 600;
            text-align: center;
            display: none;
            width: 100%;
            font-size: .95em;
            box-shadow: var(--shadow);
            animation: fadeIn .3s ease;
            margin-bottom: 20px;
        }

        /* ── Player ── */
        .player-box {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 16px;
            margin: 12px 0;
        }

        .player-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;
        }

        .player-controls button {
            min-width: 90px;
            justify-content: center;
        }

        .speed-slider {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: 6px 14px;
        }

        .speed-slider label {
            font-size: .85em;
            color: var(--clr-muted);
            font-weight: 600;
            white-space: nowrap;
            margin: 0;
        }

        .speed-slider input[type="range"] {
            width: 100px;
            padding: 0;
            border: none;
            background: transparent;
            accent-color: var(--clr-accent);
        }

        .speed-slider .spd-val {
            font-weight: 800;
            color: var(--clr-accent-text);
            font-size: .9em;
            min-width: 30px;
            text-align: center;
        }

        .signal-lamp-box {
            height: 50px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        .signal-lamp {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--border-color);
            transition: background .05s, box-shadow .05s;
        }

        .signal-lamp.aktiv {
            background: var(--clr-accent);
            box-shadow: 0 0 20px var(--clr-accent), 0 0 40px var(--clr-accent);
        }

        .play-status {
            text-align: center;
            font-size: .85em;
            color: var(--clr-muted);
            min-height: 1.5em;
            margin-bottom: 8px;
        }

        .play-status .s-play {
            color: var(--success-text);
            font-weight: 700;
        }

        .play-status .s-pause {
            color: var(--warning-text);
            font-weight: 700;
        }

        .play-status .s-ready {
            color: var(--clr-accent2-text);
        }

        .replay-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: 4px 12px;
            font-size: .8em;
            color: var(--clr-muted);
        }

        .replay-badge strong {
            color: var(--warning-text);
        }

        .wort-laenge-hint {
            text-align: center;
            font-size: .85em;
            color: var(--clr-muted);
            margin-bottom: 8px;
        }

        .wort-laenge-hint strong {
            color: var(--clr-accent2-text);
        }

        /* ── Werkzeug-Bereich ── */
        .werkzeug-box {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .werkzeug-spalte {
            flex: 1;
            min-width: 200px;
        }

        .werkzeug-spalte textarea {
            width: 100%;
            height: 80px;
            padding: 8px;
            font-family: Arial, sans-serif;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--box-bg);
            color: var(--text-color);
        }

        /* Resizable Ausgabe-Wrap */
        .werkzeug-output-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .werkzeug-preview {
            width: 100%;
            min-height: 80px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            padding: 15px;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            justify-content: center;
            resize: both;
            overflow: auto;
            cursor: default;
            transition: border-color .2s, box-shadow .2s;
        }

        .werkzeug-preview:hover {
            border-color: var(--clr-accent2);
        }

        .werkzeug-preview.leer {
            justify-content: center;
            color: var(--clr-muted);
            font-size: .9em;
            font-style: italic;
        }

        .werkzeug-preview.copy-flash {
            border-color: var(--clr-accent) !important;
            box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
        }

        /* Clipboard-Icon-Hint */
        .werkzeug-output-wrap::after {
            content: '📋';
            position: absolute;
            top: 6px;
            right: 22px;
            font-size: 14px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 2px 6px;
            line-height: 1.4;
        }

        .werkzeug-output-wrap:hover::after {
            opacity: 1;
        }

        /* ── Export-Bar ── */
        .export-bar {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 10px;
            padding: 10px 14px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .export-bar .export-label {
            font-size: .82em;
            font-weight: 700;
            color: var(--clr-muted);
            margin-right: 4px;
        }

        .export-right-group {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-left: auto;
            flex-wrap: wrap;
        }

        .toggle-label {
            font-size: .85em;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }

        .toggle-label input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--clr-accent);
            cursor: pointer;
        }

        .char-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--clr-muted);
            min-height: 16px;
            text-transform: uppercase;
        }

        .hide-labels .char-label {
            display: none !important;
        }

        /* ── Morse-Darstellung ── */
        .morse-font {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 18px;
            letter-spacing: 2px;
            color: var(--morse-dot);
        }

        .morse-char-group {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .morse-code-display {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 20px;
            color: var(--morse-dot);
            letter-spacing: 2px;
            line-height: 1;
        }

        /* ── Morse-Trennzeichen (Buchstaben/Wörter) ── */
        .morse-sep {
            align-self: center;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 700;
            font-size: 20px;
            line-height: 1;
            color: var(--clr-muted);
            opacity: .6;
            flex-shrink: 0;
        }

        .morse-sep-wort {
            color: var(--morse-dash);
            opacity: .9;
            letter-spacing: 1px;
        }

        /* ── Braille-Darstellung ── */
        .braille-block {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 4px;
            width: 24px;
            height: 36px;
            vertical-align: middle;
            margin: 0 5px;
            background: var(--box-bg);
            border-radius: 6px;
            padding: 4px;
        }

        .braille-punkt {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: var(--panel-bg);
            margin: auto;
        }

        .braille-punkt.gesetzt {
            background: var(--braille-active);
            border-color: var(--braille-active);
        }

        .braille-block-gross {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 5px;
            width: 32px;
            height: 48px;
            vertical-align: middle;
            background: rgba(251, 191, 36, 0.06);
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 8px;
            padding: 5px;
        }

        .braille-block-gross .braille-punkt {
            width: 10px;
            height: 10px;
        }

        .braille-char-group {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .braille-input {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 6px;
            padding: 10px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .braille-input-punkt {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            background: var(--panel-bg);
            cursor: pointer;
            text-align: center;
            line-height: 22px;
            font-size: 11px;
            color: var(--clr-muted);
            transition: all .2s;
        }

        .braille-input-punkt:hover {
            border-color: var(--braille-active);
            color: var(--text-color);
        }

        .braille-input-punkt.gesetzt {
            background: var(--braille-active);
            border-color: var(--braille-active);
            color: #0f172a;
        }

        /* ── ASCII-Darstellung ── */
        .ascii-char-group {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .ascii-code-display {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 17px;
            letter-spacing: 1px;
            line-height: 1;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px 5px;
        }

        .ascii-code-display .bit-1 {
            color: var(--ascii-bit-on);
        }

        .ascii-code-display .bit-0 {
            color: var(--ascii-bit-off);
            opacity: .45;
        }

        .ascii-dez-display {
            font-size: 11px;
            font-weight: 700;
            color: var(--clr-muted);
        }

        .ascii-tabelle-wrap {
            max-height: 360px;
            overflow-y: auto;
        }

        /* ── Fingeralphabet ── */
        .finger-char-group {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .finger-werkzeug-img {
            width: 56px;
            height: auto;
            background: #fff;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            padding: 3px;
        }

        .finger-img-container {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--panel-bg);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 8px;
            margin: 4px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-fast);
        }

        .finger-img-container.big {
            padding: 12px;
            border-radius: 16px;
        }

        .finger-img {
            width: 50px;
            height: auto;
            display: block;
            border-radius: 4px;
            background-color: #fff;
        }

        .finger-img-container.big .finger-img {
            width: 80px;
        }

        .finger-img.ref {
            width: 60px;
            background-color: #fff;
            border: 1px solid var(--border-color);
            padding: 4px;
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s;
        }

        .finger-img.ref:hover {
            transform: scale(1.1);
            border-color: var(--clr-accent3);
        }

        .finger-ref-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 8px;
            justify-items: center;
        }

        /* ── Tabellen ── */
        table.code-table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
            font-size: 14px;
            background: var(--box-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        table.code-table th,
        table.code-table td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: center;
        }

        table.code-table th {
            background-color: var(--border-color);
            font-weight: bold;
            color: var(--text-color);
        }

        /* ── Morsebaum ── */
        .morsebaum-container {
            margin: 15px 0;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            overflow: hidden;
            position: relative;
        }

        .morsebaum-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            background: var(--panel-bg);
            border-bottom: 1px solid var(--border-color);
        }

        .morsebaum-header h5 {
            margin: 0;
            color: var(--clr-accent2-text);
            font-size: .95em;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .morsebaum-svg-wrap {
            overflow-x: auto;
            overflow-y: hidden;
            padding: 10px;
        }

        .morsebaum-svg-wrap svg {
            display: block;
            margin: 0 auto;
        }

        .morsebaum-legende {
            display: flex;
            gap: 16px;
            justify-content: center;
            padding: 8px;
            font-size: .75em;
            color: var(--clr-muted);
            border-top: 1px solid var(--border-color);
        }

        .morsebaum-legende span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .morsebaum-legende .leg-dot {
            width: 24px;
            height: 3px;
            background: var(--morse-dot);
            border-radius: 2px;
        }

        .morsebaum-legende .leg-dash {
            width: 24px;
            height: 3px;
            background: var(--morse-dash);
            border-radius: 2px;
        }

        .mt-edge {
            stroke-width: 2;
            fill: none;
            opacity: 0.4;
            transition: opacity .2s, stroke-width .2s;
        }

        .mt-edge.highlight {
            opacity: 1;
            stroke-width: 3;
        }

        .mt-edge.dot-edge {
            stroke: var(--morse-dot);
        }

        .mt-edge.dash-edge {
            stroke: var(--morse-dash);
        }

        .mt-node {
            cursor: pointer;
            transition: transform .15s;
        }

        .mt-circle {
            fill: var(--panel-bg);
            stroke: var(--border-color);
            stroke-width: 2;
            transition: fill .2s, stroke .2s;
        }

        .mt-node.selected .mt-circle,
        .mt-node.highlight .mt-circle {
            fill: var(--clr-accent);
            stroke: var(--clr-accent);
        }

        .mt-label {
            fill: var(--text-color);
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-weight: 700;
            font-size: 11px;
            text-anchor: middle;
            dominant-baseline: central;
            pointer-events: none;
            transition: fill .2s;
        }

        .mt-node.selected .mt-label,
        .mt-node.highlight .mt-label {
            fill: #0f172a;
        }

        .mt-edge-label {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 10px;
            text-anchor: middle;
            dominant-baseline: central;
            pointer-events: none;
        }

        .mt-edge-label.dot-label {
            fill: var(--morse-dot);
        }

        .mt-edge-label.dash-label {
            fill: var(--morse-dash);
        }

        .mt-root .mt-circle {
            fill: var(--clr-accent2);
            stroke: var(--clr-accent2);
        }

        .mt-root .mt-label {
            fill: #0f172a;
        }

        .morsebaum-info {
            padding: 8px 16px;
            font-size: .8em;
            color: var(--clr-muted);
            text-align: center;
            border-top: 1px solid var(--border-color);
            min-height: 2em;
        }

        .morsebaum-info strong {
            color: var(--clr-accent-text);
        }

        .morsebaum-info .morse-path {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: var(--clr-accent2-text);
            letter-spacing: 2px;
        }

        /* ── Sidebar-Toggle ── */
        .sidebar-toggle {
            width: 100%;
            padding: 12px 16px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            cursor: pointer;
            font-weight: 700;
            font-size: .95em;
            color: var(--clr-accent2-text);
            display: flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition-fast);
            text-align: left;
        }

        .sidebar-toggle:hover {
            background: var(--box-bg);
            transform: none;
            box-shadow: var(--shadow);
        }

        .sidebar-toggle .toggle-icon {
            transition: transform .3s ease;
            font-size: 1.1em;
            flex-shrink: 0;
        }

        .sidebar-toggle.offen .toggle-icon {
            transform: rotate(180deg);
        }

        .sidebar-toggle-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease;
        }

        .sidebar-toggle-content.offen {
            max-height: 4000px;
        }

        .sidebar-toggle-inner {
            padding: 20px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 var(--radius) var(--radius);
            font-size: .9em;
            line-height: 1.7;
            color: var(--clr-muted);
        }

        .sidebar-toggle-inner h4 {
            color: var(--clr-accent-text);
            margin: 18px 0 8px 0;
            font-size: 1.05em;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-toggle-inner h4:first-child {
            margin-top: 0;
        }

        .sidebar-toggle-inner p {
            margin-bottom: 10px;
        }

        .sidebar-toggle-inner ul,
        .sidebar-toggle-inner ol {
            margin: 8px 0 12px 18px;
        }

        .sidebar-toggle-inner li {
            margin-bottom: 6px;
        }

        /* ── Merksatz / Hilfe ── */
        .merksatz {
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(56, 189, 248, 0.08));
            border: 1px solid var(--clr-accent);
            border-left: 4px solid var(--clr-accent);
            border-radius: 8px;
            padding: 12px 14px;
            margin: 12px 0;
            font-weight: 600;
            color: var(--clr-accent-text);
            font-size: .95em;
            line-height: 1.5;
        }

        .merksatz::before {
            content: "💡 Merke: ";
            font-weight: 800;
        }

        .hilfe-schritt {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin: 10px 0;
            padding: 10px;
            background: var(--box-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .hilfe-schritt .schritt-nr {
            background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
            color: #0f172a;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .85em;
            flex-shrink: 0;
        }

        .hilfe-schritt .schritt-text {
            flex: 1;
            font-size: .9em;
        }

        .hilfe-schritt .schritt-text strong {
            color: var(--text-color);
        }

        .tastatur-hint {
            display: inline-block;
            background: var(--border-color);
            color: var(--text-color);
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
            font-size: .85em;
            font-weight: bold;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        /* ── Zusammenfassung ── */
        .vis-box {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
            width: 100%;
            margin-bottom: 20px;
        }

        /* ── Klickbare Screenshot-Bereiche ── */
        .screenshot-target {
            cursor: pointer;
            transition: border-color .2s, box-shadow .2s;
            position: relative;
        }

        .screenshot-target:hover {
            border-color: var(--clr-accent2) !important;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
        }

        .screenshot-target.copy-flash {
            border-color: var(--clr-accent) !important;
            box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25) !important;
        }

        /* Clipboard-Icon-Hint für alle Screenshot-Targets */
        .screenshot-wrap {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .screenshot-wrap::after {
            content: '📋';
            position: absolute;
            top: 6px;
            right: 10px;
            font-size: 13px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 2px 6px;
            line-height: 1.4;
            z-index: 10;
        }

        .screenshot-wrap:hover::after {
            opacity: 1;
        }

        /* Morsebaum-Container als Screenshot-Target */
        .morsebaum-container.screenshot-target {
            border-radius: var(--radius);
        }

        /* Sidebar-Panel Screenshot */
        .sidebar-panel.screenshot-target,
        .code-table-wrap.screenshot-target {
            border-radius: var(--radius);
        }

        /* ── Responsive ── */
        @media (max-width: 1000px) {
            .split-layout {
                flex-direction: column;
                /* sonst wird die Aufgabenspalte so breit wie ihr längster Inhalt */
                align-items: stretch;
            }

            .sticky-sidebar {
                width: 100%;
                position: static;
                max-height: none;
                order: -1;
            }
        }

        @media (max-width: 850px) {
            button {
                justify-content: center;
                width: 100%;
                padding: 12px;
            }

            .tab-btn {
                min-width: 0;
                padding: 12px 10px;
                flex: 1;
            }

            .tab-btn .tab-label {
                font-size: .8em;
            }

            .tab-container {
                padding: 16px;
            }

            .player-controls {
                flex-direction: column;
            }

            .speed-slider {
                width: 100%;
                justify-content: center;
            }

            .werkzeug-spalte {
                flex-basis: 100%;
                min-width: 0;
            }

            .export-right-group {
                width: 100%;
                justify-content: center;
                margin-left: 0;
                margin-top: 8px;
            }

            .export-right-group button {
                flex: 1;
            }
        }
    
        /* Kontrast-Korrekturen (WCAG AA, 2026-10-07): gleiche Farbtöne, nur dunkler bzw. heller */
        html:not([data-theme="light"]) .btn-export { color: #c58efc; }  /* statt #c084fc */
        html[data-theme="light"] .morse-font { color: #0b7c56; }  /* statt #10b981 */