/*
 * Alternative Darstellungen der Übungsseiten.
 *
 * Aktiv, sobald <html data-lw-theme="..."> gesetzt ist (content.js / theme.js, Auswahl über das Menü
 * oben rechts). Voreinstellung ist "klassisch". Ohne Attribut gilt nur editor.css (Rückfall, im Menü nicht wählbar).
 *
 * Aufbau:
 *   1. (Menü: siehe css/theme-menu.css)
 *   2. Gemeinsame Basis aller neuen Themes, gesteuert über --lw-* Variablen
 *   3. Pro Theme: Variablen + charakteristische Details (3a–3j)
 *   4. Gemeinsame Nachträge (dunkle Themes, API-Tabs)
 *
 * Schriften: Geist kommt mit CodeBlocks (js/codeblocks-js/fonts/). Für Serifen, Mono und Handschrift werden System-Schriften
 * verwendet (keine externen Font-CDNs).
 */

/* ============================================================================
   2. Gemeinsame Basis aller neuen Themes
   ============================================================================ */

html[data-lw-theme] {
    --lw-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    --lw-font: Geist, Roboto, system-ui, sans-serif;
    --lw-font-head: var(--lw-font);
    --lw-radius-sm: 8px;
    --lw-content-width: 860px;
    /* Eingabefelder (Werte wie die Voreinstellung der Quiz-Felder, je Theme angepasst) */
    --lw-input-bg: var(--lw-surface-solid, var(--lw-surface));
    --lw-input-fg: var(--lw-fg);
    --lw-input-border: rgba(0, 0, 0, 0.3);
    --lw-input-border-width: 1px;
    --lw-input-radius: 3px;
    --lw-input-shadow: none;
    --lw-input-weight: normal;
    --lw-input-focus: var(--lw-accent);
    --lw-input-hover: var(--lw-input-focus);
    --lw-input-focus-bg: var(--lw-input-bg);
    --lw-input-focus-shadow: 0 0 0 1px var(--lw-input-focus);
    --lw-input-focus-transform: none;
    /* Knöpfe (wie die Hinweis-Knöpfe, je Theme angepasst) */
    --lw-btn-bg: var(--lw-accent);
    --lw-btn-fg: var(--lw-accent-fg);
    --lw-btn-hover-bg: var(--lw-btn-bg);
    --lw-btn-border: none;
    --lw-btn-radius: var(--lw-radius-sm);
    --lw-btn-shadow: none;
    --lw-btn-font: var(--lw-font);
    --lw-btn-weight: 600;
    /* Checkboxen, Radioknöpfe, Schieberegler */
    accent-color: var(--lw-accent);
}

html[data-lw-theme] body {
    margin: 0;
    background: var(--lw-bg);
    color: var(--lw-fg);
    font-family: var(--lw-font);
    font-size: 16px;
    line-height: 1.6;
}

html[data-lw-theme] a {
    color: var(--lw-link, var(--lw-accent));
}

/* --- Kopfzeile --- */
html[data-lw-theme] div.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px 16px;
    padding: 32px max(16px, calc((100% - var(--lw-content-width)) / 2 + 16px)) 20px;
    border-bottom: var(--lw-topbar-border, none);
    background: var(--lw-topbar-bg, transparent);
}

html[data-lw-theme] .lw-title {
    min-width: 0;
}

html[data-lw-theme] .lw-crumb {
    display: block;
    margin-bottom: 6px;
    color: var(--lw-muted);
    font-size: 13px;
    font-weight: 500;
}

html[data-lw-theme] .lw-crumb:empty {
    display: none;
}

html[data-lw-theme] div.topbar h1 {
    margin: 0 !important;
    font-family: var(--lw-font-head);
    font-size: var(--lw-h1-size, 34px) !important;
    font-weight: var(--lw-h1-weight, 700);
    line-height: 1.12 !important;
    letter-spacing: var(--lw-h1-tracking, -0.02em);
    color: var(--lw-h1-color, var(--lw-fg));
}

html[data-lw-theme] div.topbar>a.backlink {
    color: var(--lw-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

html[data-lw-theme] .lw-menu-anchor {
    align-self: end;
    margin-left: 0;
}

/* --- Inhaltsspalte --- */
html[data-lw-theme] div#content {
    position: static;
    max-width: var(--lw-content-width);
    margin: 0 auto;
    padding: 24px 16px 80px;
}

/* --- Boxen (Aufgabe, Erklärung, Experimente, Tabs) --- */
html[data-lw-theme] div.boxed,
html[data-lw-theme] tabbar.code {
    width: auto;
    margin: 0 0 24px;
    padding: 24px 28px;
    border: var(--lw-card-border);
    border-radius: var(--lw-radius);
    background: var(--lw-surface);
    box-shadow: var(--lw-shadow);
    color: inherit;
    font-size: inherit;
}

html[data-lw-theme] div.intro {
    color: var(--lw-muted);
}

html[data-lw-theme] div.boxed h3 {
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: var(--lw-font-head);
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.25;
}

html[data-lw-theme] div.boxed p,
html[data-lw-theme] div.boxed div,
html[data-lw-theme] div.boxed ul,
html[data-lw-theme] div.boxed ol {
    font-weight: inherit;
}

html[data-lw-theme] div.boxed p:nth-child(2),
html[data-lw-theme] div.boxed div:nth-child(2) {
    font-style: normal;
}

/* Listen (die Tailwind-Basis der Codeblocks-Bibliothek entfernt sonst die Aufzählungszeichen) */
html[data-lw-theme] div.boxed ul,
html[data-lw-theme] div.boxed ol {
    margin: 10px 0 14px;
    padding-left: 1.4em;
}

html[data-lw-theme] div.boxed ul {
    list-style: disc;
}

html[data-lw-theme] div.boxed ol {
    list-style: decimal;
}

html[data-lw-theme] div.boxed li {
    margin-top: 6px;
}

html[data-lw-theme] div.boxed li::marker {
    color: var(--lw-muted);
}

html[data-lw-theme] div.boxed>h3+p {
    font-size: 1.06em;
}

html[data-lw-theme] div.boxed> :last-child {
    margin-bottom: 0;
}

/* Boxen innerhalb von Tabs (z.B. Erklärung unter der Beispiellösung) */
html[data-lw-theme] tabbar>div[data-tab]>div.boxed {
    margin: 20px 0 0;
    padding: 20px 22px;
    border: var(--lw-nested-border, var(--lw-card-border));
    background: var(--lw-surface-2);
    box-shadow: none;
}

/* --- Code & Ausgaben --- */
html[data-lw-theme] code,
html[data-lw-theme] pre[code] {
    font-family: var(--lw-mono);
    font-size: 0.88em;
    font-weight: 500;
    color: var(--lw-code-fg, inherit);
    background: transparent;
}

html[data-lw-theme] code.inline-code>span[code] {
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--lw-code-bg);
    color: var(--lw-code-fg, inherit);
}

html[data-lw-theme] pre[code] {
    margin: 10px 0;
    padding: 12px 16px;
    border-radius: var(--lw-radius-sm);
    background: var(--lw-code-block-bg, var(--lw-code-bg));
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
}

html[data-lw-theme] pre[output],
html[data-lw-theme] code[output].inline-code>span[code] {
    background: var(--lw-out-bg);
    color: var(--lw-out-fg);
}

html[data-lw-theme] pre[output] {
    margin: 8px 0;
    padding: 14px 18px;
    border-radius: var(--lw-radius-sm);
    font-family: var(--lw-mono);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
}

/* in editor.css sind Inhalte in .colored (Experimente) weiß auf violett, das wird hier zurückgesetzt */
html[data-lw-theme] .colored pre[code] {
    margin-left: 0;
    background: var(--lw-code-block-bg, var(--lw-code-bg));
    color: var(--lw-code-fg, inherit);
}

html[data-lw-theme] .colored pre[output] {
    background: var(--lw-exp-out-bg, var(--lw-out-bg));
    color: var(--lw-exp-out-fg, var(--lw-out-fg));
}

html[data-lw-theme] .colored code.inline-code>span[code] {
    background: var(--lw-code-bg);
    color: var(--lw-code-fg, inherit);
}

html[data-lw-theme] .colored a {
    color: var(--lw-link, var(--lw-accent));
}

html[data-lw-theme] quote {
    border: none;
    background: var(--lw-code-bg);
    color: inherit;
}

/* --- Experimente --- */
html[data-lw-theme] div.experiment {
    counter-reset: lw-exp;
}

html[data-lw-theme] div.experiment>div {
    position: relative;
    counter-increment: lw-exp;
    margin: 12px 0 0 !important;
    padding: 14px 16px 14px 54px;
    border: var(--lw-exp-item-border, none);
    border-radius: var(--lw-radius-sm);
    background: var(--lw-exp-item-bg, transparent);
    color: inherit;
    font-weight: inherit;
}

html[data-lw-theme] div.experiment>div:nth-child(2) {
    margin-top: 4px !important;
}

html[data-lw-theme] div.experiment>div::before {
    content: counter(lw-exp);
    position: absolute;
    left: 14px;
    top: 13px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--lw-experiment);
    color: var(--lw-experiment-fg, #fff);
    font: 600 13px/26px var(--lw-font);
    text-align: center;
}

/* --- Hinweise --- */
html[data-lw-theme] .hint-container button,
html[data-lw-theme] .colored .hint-container button {
    border-radius: var(--lw-radius-sm);
    background: var(--lw-accent);
    color: var(--lw-accent-fg);
    font-family: var(--lw-font);
    font-size: 14px;
    font-weight: 600;
}

html[data-lw-theme] hint.expanded {
    border-left-color: var(--lw-border);
}

/* --- Formularelemente aus Playgrounds, Bibliotheken und Textblöcken ---
   Ohne eigene Gestaltung folgen Knöpfe und Eingabefelder im Inhaltsbereich dem gewählten Theme statt den
   Browser-Voreinstellungen. Spezifität (0,0,2): stärker als die Tailwind-Basis der Codeblocks (button, input, …),
   schwächer als jede Klasse, mit der eine Bibliothek oder ein Playground selbst gestaltet. Ausgenommen sind die
   Oberfläche der Codeblocks (tw-Klassen, CodeMirror) und die eigens gestalteten Tabs, Hinweise und Quizze. */
:where(html[data-lw-theme]) div:where(#content) input:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *, [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=image], [type=hidden], [type=button], [type=submit], [type=reset])),
:where(html[data-lw-theme]) div:where(#content) select:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)),
:where(html[data-lw-theme]) div:where(#content) textarea:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)) {
    padding: 3px 8px;
    border: var(--lw-input-border-width) solid var(--lw-input-border);
    border-radius: var(--lw-input-radius);
    background-color: var(--lw-input-bg);
    color: var(--lw-input-fg);
    box-shadow: var(--lw-input-shadow);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--lw-input-weight);
    caret-color: var(--lw-input-focus);
    transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s, transform 0.12s;
}

:where(html[data-lw-theme]) div:where(#content) input:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *, [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=image], [type=hidden], [type=button], [type=submit], [type=reset])):hover,
:where(html[data-lw-theme]) div:where(#content) select:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):hover,
:where(html[data-lw-theme]) div:where(#content) textarea:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):hover {
    border-color: var(--lw-input-hover);
}

:where(html[data-lw-theme]) div:where(#content) input:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *, [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=image], [type=hidden], [type=button], [type=submit], [type=reset])):focus,
:where(html[data-lw-theme]) div:where(#content) select:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):focus,
:where(html[data-lw-theme]) div:where(#content) textarea:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):focus {
    outline: none;
    border-color: var(--lw-input-focus);
    background-color: var(--lw-input-focus-bg);
    box-shadow: var(--lw-input-focus-shadow);
    transform: var(--lw-input-focus-transform);
}

/* Eigener Pfeil statt des nativen, der in Chrome direkt am Rand klebt; currentColor folgt dem Theme
   (wie in css/uebungsplaner.css) */
:where(html[data-lw-theme]) div:where(#content) select:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)) {
    appearance: none;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(135deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
    background-position: right 16px center, right 10px center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

:where(html[data-lw-theme]) div:where(#content) button:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)),
:where(html[data-lw-theme]) div:where(#content) input:where([type=button], [type=submit], [type=reset]):where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)) {
    padding: 4px 14px;
    border: var(--lw-btn-border);
    border-radius: var(--lw-btn-radius);
    background: var(--lw-btn-bg);
    color: var(--lw-btn-fg);
    box-shadow: var(--lw-btn-shadow);
    font-family: var(--lw-btn-font);
    font-size: 14px;
    font-weight: var(--lw-btn-weight);
    cursor: pointer;
}

:where(html[data-lw-theme]) div:where(#content) button:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):hover:enabled,
:where(html[data-lw-theme]) div:where(#content) input:where([type=button], [type=submit], [type=reset]):where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):hover:enabled {
    background: var(--lw-btn-hover-bg);
}

:where(html[data-lw-theme]) div:where(#content) button:where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):disabled,
:where(html[data-lw-theme]) div:where(#content) input:where([type=button], [type=submit], [type=reset]):where(:not([class*="tw-"], tabbar>div.buttonbar *, .hint-container *, .quiz *, .cm-editor *)):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Tabs --- */
html[data-lw-theme] tabbar.code {
    padding: 0;
    /* clip (not hidden): hidden makes the tabbar a scroll container, which breaks the sticky (pinned) runner */
    overflow: clip;
}

html[data-lw-theme] tabbar>div.buttonbar {
    gap: 4px;
    padding: 0 16px;
    border-bottom: none;
    background: var(--lw-tabbar-bg, transparent);
    box-shadow: inset 0 -1px var(--lw-border);
    /* viele Tabs (z.B. Aufgaben mit mehreren Teilen) brechen in eine zweite Zeile um, statt zu scrollen */
    flex-wrap: wrap;
}

html[data-lw-theme] tabbar>div.buttonbar button,
html[data-lw-theme] tabbar>div.buttonbar button.inactive {
    margin-bottom: 0;
    padding: 14px 10px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--lw-muted);
    font-family: var(--lw-font);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

html[data-lw-theme] tabbar>div.buttonbar button:hover {
    color: var(--lw-fg) !important;
}

html[data-lw-theme] tabbar>div.buttonbar button.active {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lw-accent);
    color: var(--lw-fg);
}

html[data-lw-theme] tabbar>div[data-tab] {
    padding: 16px;
}

/* --- Codeblocks (Editor, Ausführen-Knopf, Konsole) --- */
/* Ein gemeinsamer Rahmen um alle Blöcke eines Editors: Die Bibliothek markiert den ersten Block mit
   .round-top und den letzten mit .round-bottom (ein einzelner Block trägt beide). Seitenkanten gibt
   es immer, Ober-/Unterkante und Rundung nur an diesen Enden. */
html[data-lw-theme] [codeblocks] .codeblock .code-editor>div {
    border: var(--lw-editor-border-width, 1px) solid var(--lw-editor-border, var(--lw-border));
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0;
    overflow: hidden;
}

html[data-lw-theme] [codeblocks] .codeblock.round-top .code-editor>div {
    border-top-width: var(--lw-editor-border-width, 1px);
    border-top-left-radius: var(--lw-radius-sm);
    border-top-right-radius: var(--lw-radius-sm);
}

html[data-lw-theme] [codeblocks] .codeblock.round-bottom .code-editor>div {
    border-bottom-width: var(--lw-editor-border-width, 1px);
    border-bottom-left-radius: var(--lw-radius-sm);
    border-bottom-right-radius: var(--lw-radius-sm);
}

html[data-lw-theme] [codeblocks] .codeblock .cm-editor {
    border-radius: 0;
}

html[data-lw-theme] [codeblocks] pre.output {
    border-color: var(--lw-border) !important;
    border-radius: var(--lw-radius-sm) !important;
    background: var(--lw-out-bg) !important;
    color: var(--lw-out-fg) !important;
    font-family: var(--lw-mono) !important;
}

/* --- Quiz (common/quiz) --- */
html[data-lw-theme] .quiz {
    --quiz-back: var(--lw-surface-2);
    --quiz-line: var(--lw-surface-solid, var(--lw-surface));
    --quiz-border: var(--lw-border);
    --quiz-accent: var(--lw-accent);
    --quiz-mono: var(--lw-mono);
    --quiz-fg: var(--lw-fg);
    --quiz-muted: var(--lw-muted);
    --quiz-input-bg: var(--lw-input-bg);
    --quiz-input-fg: var(--lw-input-fg);
    --quiz-input-border: var(--lw-input-border);
    --quiz-input-border-width: var(--lw-input-border-width);
    --quiz-input-radius: var(--lw-input-radius);
    --quiz-input-shadow: var(--lw-input-shadow);
    --quiz-input-weight: var(--lw-input-weight);
    --quiz-input-hover: var(--lw-input-hover);
    --quiz-input-focus: var(--lw-input-focus);
    --quiz-input-focus-bg: var(--lw-input-focus-bg);
    --quiz-input-focus-shadow: var(--lw-input-focus-shadow);
    --quiz-input-focus-transform: var(--lw-input-focus-transform);
}

/* Eingabefelder je Theme: gelten für die Quiz-Typen (Ausgabe-Lücken, Graph- und Zahlentabellen) und für alle
   Eingabefelder aus Playgrounds, Bibliotheken und Textblöcken (siehe "Formularelemente") */
html[data-lw-theme="heft"] {
    --lw-input-bg: #fffdf8;
    --lw-input-border: #cfc4ac;
    --lw-input-radius: 2px;
    --lw-input-focus: #2d2a24;
    --lw-input-focus-bg: #fff3a8; /* Textmarker */
}

html[data-lw-theme="klassisch"] {
    --lw-input-border: #c6bbb2;
    --lw-input-border-width: 1.5px;
    --lw-input-radius: 6px;
    --lw-input-focus: #1a1614;
    --lw-input-focus-shadow: 0 0 0 3px rgb(26 22 20 / 0.12);
}

html[data-lw-theme="karten"] {
    --lw-input-border: #d5d9e2;
    --lw-input-radius: 6px;
    --lw-input-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --lw-input-focus: #4f46e5;
    --lw-input-focus-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

html[data-lw-theme="terminal"] {
    --lw-input-bg: #1e2636;
    --lw-input-fg: #e2f7ec;
    --lw-input-border: #56637d;
    --lw-input-radius: 4px;
    --lw-input-focus: #34d399;
    --lw-input-focus-bg: #10201a;
    --lw-input-focus-shadow: 0 0 0 1px #34d399, 0 0 10px rgba(52, 211, 153, 0.35);
}

/* kräftig: dicker Rand, harter Schatten, beim Fokus gelb hinterlegt und leicht angehoben */
html[data-lw-theme="abenteuer"] {
    --lw-input-bg: #ffffff;
    --lw-input-border: #111111;
    --lw-input-border-width: 2px;
    --lw-input-radius: 6px;
    --lw-input-shadow: 2px 2px 0 #111111;
    --lw-input-weight: 700;
    --lw-input-hover: #111111;
    --lw-input-focus: #111111;
    --lw-input-focus-bg: #fff4b8;
    --lw-input-focus-shadow: 3px 3px 0 #111111;
    --lw-input-focus-transform: translate(-1px, -1px);
}

/* in der dichten Dijkstra-Tabelle rahmen schon die Zellen: Schatten erst beim Fokus */
html[data-lw-theme="abenteuer"] .quiz-graph-table {
    --quiz-input-shadow: none;
    --quiz-input-border-width: 1.5px;
}

/* Schweizer Raster: eckig, schwarzer Rand, Fokus als roter Balken unten */
html[data-lw-theme="raster"] {
    --lw-input-bg: #ffffff;
    --lw-input-border: #111111;
    --lw-input-radius: 0;
    --lw-input-hover: #e30613;
    --lw-input-focus: #e30613;
    --lw-input-focus-shadow: inset 0 -3px 0 #e30613;
}

/* Kreide: halbtransparent, leicht unregelmäßige Ecken */
html[data-lw-theme="tafel"] {
    --lw-input-bg: rgba(255, 255, 255, 0.1);
    --lw-input-fg: #ffffff;
    --lw-input-border: rgba(255, 255, 255, 0.55);
    --lw-input-border-width: 1.5px;
    --lw-input-radius: 6px 3px 7px 2px / 3px 6px 2px 7px;
    --lw-input-focus: #f7d774;
    --lw-input-focus-bg: rgba(247, 215, 116, 0.12);
}

/* Schatten: eingelassen (Schatten innen), beim Fokus violett leuchtend */
html[data-lw-theme="shadows"] {
    --lw-input-bg: #121218;
    --lw-input-fg: #ececf4;
    --lw-input-border: #3a3a48;
    --lw-input-radius: 8px;
    --lw-input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    --lw-input-focus: #a78bfa;
    --lw-input-focus-bg: #17141f;
    --lw-input-focus-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(167, 139, 250, 0.22), 0 0 16px rgba(167, 139, 250, 0.25);
}

/* Richtig/falsch-Markierung (Eingabefelder, Kanten-/Knotenlisten, Mengen, Parsons-Zeilen, Rückmeldung) je Theme.
   Blau/Orangerot statt Grün/Rot, damit die Farben auch bei Rot-Grün-Sehschwäche unterscheidbar bleiben. */
html[data-lw-theme="heft"] .quiz {
    --quiz-ok: #1f5f9e;
    --quiz-bad: #b3470f;
    --quiz-warn: #c98a00;
    --quiz-ok-bg: rgba(120, 170, 230, 0.28); /* blauer bzw. orangefarbener Textmarker */
    --quiz-bad-bg: rgba(245, 150, 80, 0.3);
    --quiz-warn-bg: rgba(250, 210, 90, 0.3);
    --quiz-ok-ring: none;
    --quiz-bad-ring: none;
}

html[data-lw-theme="klassisch"] .quiz {
    --quiz-ok-ring: 0 0 0 3px rgb(29 78 216 / 0.15);
    --quiz-bad-ring: 0 0 0 3px rgb(194 65 12 / 0.15);
}

html[data-lw-theme="karten"] .quiz {
    --quiz-ok: #2563eb;
    --quiz-ok-bg: rgba(37, 99, 235, 0.07);
    --quiz-bad-bg: rgba(194, 65, 12, 0.07);
    --quiz-ok-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
    --quiz-bad-ring: 0 0 0 3px rgba(194, 65, 12, 0.18);
}

html[data-lw-theme="terminal"] .quiz {
    --quiz-ok: #60a5fa;
    --quiz-bad: #fb923c;
    --quiz-warn: #facc15;
    --quiz-ok-bg: rgba(96, 165, 250, 0.14);
    --quiz-bad-bg: rgba(251, 146, 60, 0.14);
    --quiz-warn-bg: rgba(250, 204, 21, 0.1);
    --quiz-ok-ring: 0 0 0 1px #60a5fa, 0 0 8px rgba(96, 165, 250, 0.35);
    --quiz-bad-ring: 0 0 0 1px #fb923c, 0 0 8px rgba(251, 146, 60, 0.35);
}

/* kräftige, deckende Farben und harter Schatten in der Ergebnisfarbe statt eines dünnen Rings */
html[data-lw-theme="abenteuer"] .quiz {
    --quiz-ok: #1c63c7;
    --quiz-bad: #d9480f;
    --quiz-warn: #f2a900;
    --quiz-ok-bg: #dbe8ff;
    --quiz-bad-bg: #ffe2cf;
    --quiz-warn-bg: #fff1c2;
    --quiz-ok-ring: 2px 2px 0 #1c63c7;
    --quiz-bad-ring: 2px 2px 0 #d9480f;
    /* statt gestricheltem Rand (wirkt bei den dicken Rändern und schmalen Feldern zerbrochen): schraffiert */
    --quiz-bad-border-style: solid;
    --quiz-bad-pattern: repeating-linear-gradient(-45deg, rgba(217, 72, 15, 0.28) 0 3px, transparent 3px 7px);
}

html[data-lw-theme="abenteuer"] .quiz-graph-table input {
    --quiz-ok-ring: none;
    --quiz-bad-ring: none;
}

html[data-lw-theme="raster"] .quiz {
    --quiz-ok: #0057b8;
    --quiz-bad: #e30613;
    --quiz-warn: #f0a000;
    --quiz-ok-bg: rgba(0, 87, 184, 0.07);
    --quiz-bad-bg: rgba(227, 6, 19, 0.07);
    --quiz-ok-ring: inset 0 -3px 0 #0057b8;
    --quiz-bad-ring: inset 0 -3px 0 #e30613;
}

html[data-lw-theme="tafel"] .quiz {
    --quiz-ok: #8ec5ff;
    --quiz-bad: #ffa55c;
    --quiz-warn: #f7d774;
    --quiz-ok-bg: rgba(142, 197, 255, 0.16);
    --quiz-bad-bg: rgba(255, 165, 92, 0.16);
    --quiz-warn-bg: rgba(247, 215, 116, 0.12);
    --quiz-ok-ring: none;
    --quiz-bad-ring: none;
}

html[data-lw-theme="shadows"] .quiz {
    --quiz-ok: #60a5fa;
    --quiz-bad: #fb923c;
    --quiz-warn: #facc15;
    --quiz-ok-bg: rgba(96, 165, 250, 0.12);
    --quiz-bad-bg: rgba(251, 146, 60, 0.12);
    --quiz-warn-bg: rgba(250, 204, 21, 0.1);
    --quiz-ok-ring: 0 0 0 1px #60a5fa, 0 0 14px rgba(96, 165, 250, 0.35);
    --quiz-bad-ring: 0 0 0 1px #fb923c, 0 0 14px rgba(251, 146, 60, 0.35);
}

/* Antwortknöpfe (Zuordnen) wie die Eingabefelder; der gewählte Knopf in Akzentfarbe */
html[data-lw-theme] .quiz-options button {
    background: var(--quiz-input-bg);
    color: var(--quiz-input-fg);
    border: var(--quiz-input-border-width) solid var(--quiz-input-border);
    border-radius: var(--quiz-input-radius);
    box-shadow: var(--quiz-input-shadow);
}

html[data-lw-theme] .quiz-options button:hover {
    border-color: var(--quiz-input-hover);
}

html[data-lw-theme] .quiz-options button[aria-pressed="true"] {
    background: var(--lw-accent);
    border-color: var(--lw-accent);
    color: var(--lw-accent-fg);
}

html[data-lw-theme] .quiz-actions button {
    color: var(--lw-accent-fg);
}

html[data-lw-theme] .quiz-actions button.secondary {
    color: var(--lw-accent);
}

html[data-lw-theme] .quiz-grip,
html[data-lw-theme] .quiz-move button {
    color: var(--lw-muted);
}

/* Graphen (common/quiz/graph.js): Farben je Theme */
html[data-lw-theme="heft"] .quiz-graphs,
html[data-lw-theme="klassisch"] .quiz-graphs {
    --graph-node: #437094;
    --graph-start: #e67e22;
    --graph-edge: var(--lw-muted);
    --graph-sel: #bc8958;
    --graph-noted: #8fb4d6;
    --graph-mark: rgba(67, 112, 148, 0.18);
    --graph-set: #ffc107;
    --graph-set-fg: #222222;
}

html[data-lw-theme="karten"] .quiz-graphs {
    --graph-node: #4f46e5;
    --graph-start: #f97316;
    --graph-edge: #a3aabb;
    --graph-sel: #0ea5e9;
    --graph-noted: #c7d2fe;
    --graph-noted-fg: #1d2433;
    --graph-mark: rgba(79, 70, 229, 0.15);
    --graph-set: #c7d2fe;
    --graph-set-fg: #1d2433;
}

html[data-lw-theme="abenteuer"] .quiz-graphs {
    --graph-node: #1c63c7;
    --graph-start: #e4572e;
    --graph-edge: #111111;
    --graph-sel: #ffd23f;
    --graph-sel-fg: #111111;
    --graph-noted: #bfdbfe;
    --graph-noted-fg: #111111;
    --graph-grid: #111111;
    --graph-label-border: #111111;
    --graph-mark: rgba(17, 17, 17, 0.14);
    --graph-set: #ffd23f;
    --graph-set-fg: #111111;
}

html[data-lw-theme="raster"] .quiz-graphs {
    --graph-node: #111111;
    --graph-start: #e30613;
    --graph-edge: #999999;
    --graph-sel: #e30613;
    --graph-noted: #dddddd;
    --graph-noted-fg: #111111;
    --graph-mark: rgba(0, 0, 0, 0.12);
    --graph-set: #e30613;
    --graph-set-fg: #ffffff;
}

/* dunkle Themes: Knoten und Auswahl hell */
html[data-lw-theme="terminal"] .quiz-graphs {
    --graph-node: #34d399;
    --graph-node-fg: #04130d;
    --graph-start: #fbbf24;
    --graph-start-fg: #1a1406;
    --graph-edge: #56637d;
    --graph-sel: #7dd3fc;
    --graph-sel-fg: #04130d;
    --graph-noted: #6b7a99;
    --graph-noted-fg: #ffffff;
    --graph-grid: #3a4459;
    --graph-mark: rgba(125, 211, 252, 0.2);
    --graph-set: #34d399;
    --graph-set-fg: #04130d;
}

html[data-lw-theme="terminal"] .quiz-graph-table th {
    background-color: #1b2130;
    color: #34d399;
}

html[data-lw-theme="tafel"] .quiz-graphs {
    --graph-node: #e6ece4;
    --graph-node-fg: #1c2b23;
    --graph-start: #f7d774;
    --graph-start-fg: #1c2b23;
    --graph-edge: rgba(230, 236, 228, 0.55);
    --graph-sel: #f4a6c6;
    --graph-sel-fg: #1c2b23;
    --graph-noted: #86b9d1;
    --graph-noted-fg: #1c2b23;
    --graph-grid: rgba(255, 255, 255, 0.35);
    --graph-mark: rgba(247, 215, 116, 0.25);
    --graph-set: #f7d774;
    --graph-set-fg: #1c2b23;
}

html[data-lw-theme="tafel"] .quiz-graph-table th {
    background-color: rgba(0, 0, 0, 0.25);
    color: #f7d774;
}

html[data-lw-theme="shadows"] .quiz-graphs {
    --graph-node: #a78bfa;
    --graph-node-fg: #160e2b;
    --graph-start: #fbbf24;
    --graph-start-fg: #1a1406;
    --graph-edge: #5a5a6e;
    --graph-sel: #7dd3fc;
    --graph-sel-fg: #08131c;
    --graph-noted: #6b6b85;
    --graph-noted-fg: #ffffff;
    --graph-grid: #34343f;
    --graph-mark: rgba(167, 139, 250, 0.2);
    --graph-set: #a78bfa;
    --graph-set-fg: #160e2b;
}

html[data-lw-theme="shadows"] .quiz-graph-table th {
    background-color: #15151c;
    color: #c4b5fd;
}

html[data-lw-theme="terminal"] .quiz-graph-chip,
html[data-lw-theme="tafel"] .quiz-graph-chip,
html[data-lw-theme="shadows"] .quiz-graph-chip {
    background-color: var(--quiz-input-bg);
    border-color: var(--quiz-input-border);
}


/* ============================================================================
   3a. Heft – Papier, Serifen, Textmarker
   ============================================================================ */

html[data-lw-theme="heft"] {
    --lw-bg: #f7f3ea;
    --lw-fg: #2d2a24;
    --lw-muted: #6b624f; /* WCAG AA: >= 4.5:1 */
    --lw-font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --lw-h1-size: 42px;
    --lw-h1-weight: 600;
    --lw-h1-tracking: -0.01em;
    --lw-surface: #fffdf8;
    --lw-surface-2: #f7f3ea;
    --lw-border: #e7dfcd;
    --lw-card-border: 1px solid #e7dfcd;
    --lw-nested-border: none;
    --lw-radius: 6px;
    --lw-radius-sm: 4px;
    --lw-shadow: 0 1px 0 #e7dfcd, 0 8px 24px -16px rgba(80, 60, 20, 0.25);
    --lw-accent: #2d2a24;
    --lw-accent-fg: #fffdf8;
    --lw-link: #8b4a2b;
    --lw-code-bg: #f1eadb;
    --lw-out-bg: #2d2a24;
    --lw-out-fg: #f3ead6;
    --lw-exp-out-bg: #f1eadb;
    --lw-exp-out-fg: #2d2a24;
    --lw-experiment: #8e5bb8;
    --lw-tabbar-bg: #fbf8f1;
    /* Codeblocks (shadcn-Variablen) */
    --primary: 43 11% 16%;
    --primary-foreground: 40 100% 99%;
    --destructive: 6 59% 44%;
    --destructive-foreground: 40 100% 99%;
}

html[data-lw-theme="heft"] .lw-crumb {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-lw-theme="heft"] div.topbar>a.backlink {
    border-bottom: 1px solid #d6ccb6;
}

html[data-lw-theme="heft"] div.boxed h3 {
    display: inline-block;
    font-size: 24px;
    background: linear-gradient(transparent 62%, #ffe27a 62%);
}

html[data-lw-theme="heft"] div.experiment h3 {
    background: linear-gradient(transparent 62%, #e3d1f5 62%);
}

html[data-lw-theme="heft"] div.explain h3 {
    background: linear-gradient(transparent 62%, #cfe6fb 62%);
}

html[data-lw-theme="heft"] div.experiment>div {
    margin: 0 !important;
    padding: 14px 0 14px 52px;
    border-top: 1px dashed #e0d6c1;
    border-radius: 0;
}

html[data-lw-theme="heft"] div.experiment>div:nth-child(2) {
    margin-top: 0 !important;
    border-top: none;
}

html[data-lw-theme="heft"] div.experiment>div::before {
    left: 0;
    top: 12px;
    width: 32px;
    height: 32px;
    border: 1.5px solid #8e5bb8;
    border-radius: 50%;
    background: none;
    color: #8e5bb8;
    font: 600 16px/29px var(--lw-font-head);
}

html[data-lw-theme="heft"] tabbar>div.buttonbar button.active {
    font-weight: 600;
}


/* ============================================================================
   3b. Klassisch – Formensprache der Übersicht (uebersicht.html / uebungsplaner.css):
       warme Neutraltöne, Banner im Kopf, Boxen wie die Übungskarten mit Typfarbe, Muster
       und Pixel-Icon (Aufgabe = Übung, Experimente = Test, Erklärung = Vorlesung).
   ============================================================================ */

html[data-lw-theme="klassisch"] {
    --lw-bg: #f6f2ee;
    --lw-fg: #1a1614;
    --lw-muted: #6b625c; /* WCAG AA: >= 4.5:1 */
    --lw-h1-size: 40px;
    --lw-h1-weight: 800;
    --lw-surface: #ffffff;
    --lw-surface-2: #f2ece7;
    --lw-border: #e3dbd4;
    --lw-card-border: 1.5px solid #e3dbd4;
    --lw-nested-border: 1.5px solid #e3dbd4;
    --lw-radius: 24px;
    --lw-radius-sm: 12px;
    --lw-shadow: 0 1px 2px rgb(60 40 30 / 0.05), 0 4px 16px rgb(60 40 30 / 0.06);
    --lw-accent: #1a1614;
    --lw-accent-fg: #ffffff;
    --lw-link: #1d4ed8;
    --lw-code-bg: #f2ece7;
    --lw-code-fg: #453d38;
    --lw-code-block-bg: #faf7f4;
    --lw-out-bg: #1a1614;
    --lw-out-fg: #f6f2ee;
    --lw-exp-out-bg: #ffffff;
    --lw-exp-out-fg: #1a1614;
    --lw-experiment: #1a1614;
    --lw-editor-border: #c6bbb2;
    --lw-editor-border-width: 1.5px;
    --primary: 20 13% 9%;
    --primary-foreground: 0 0% 100%;
    --destructive: 12 59% 38%;
    --destructive-foreground: 0 0% 100%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-radius: 10px;
    --radius: 0.625rem;
}

/* --- Kopf: Eyebrow + kräftiger Titel wie auf der Übersicht, Knöpfe als weiße Pills --- */
html[data-lw-theme="klassisch"] .lw-crumb {
    color: #6b5d55;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-lw-theme="klassisch"] div.topbar>a.backlink {
    padding: 8px 14px;
    border: 1px solid #e3dbd4;
    border-radius: 999px;
    background: #fff;
    color: #1a1614;
    font-weight: 600;
}

html[data-lw-theme="klassisch"] div.topbar>a.backlink:hover {
    border-color: #c6bbb2;
}

html[data-lw-theme="klassisch"] .lw-menu-button {
    border-radius: 999px;
    background: #fff;
}

/* --- Boxen als Karten mit Typfarbe --- */
html[data-lw-theme="klassisch"] div.boxed,
html[data-lw-theme="klassisch"] tabbar>div[data-tab]>div.boxed {
    border: 1.5px solid var(--type-line, #e3dbd4);
    background-color: var(--type-bg, #ffffff);
}

html[data-lw-theme="klassisch"] div.aufgabe {
    --type: #9a3f28;
    --type-soft: #f8e5de;
    --type-line: #e7b7a8;
    --type-bg: #fdf8f6;
    --type-icon: url("../img/types/exercise.png");
    background-image: radial-gradient(rgb(154 63 40 / 0.14) 1px, transparent 1.4px);
    background-size: 12px 12px;
}

html[data-lw-theme="klassisch"] div.experiment {
    --type: #0f766e;
    --type-soft: #dcf0ed;
    --type-line: #a9d6d0;
    --type-bg: #f6fbfa;
    --type-icon: url("../img/types/test.png");
    background-image: repeating-linear-gradient(0deg, rgb(15 118 110 / 0.06) 0 1px, transparent 1px 13px);
}

html[data-lw-theme="klassisch"] div.explain {
    --type: #6b3fa0;
    --type-soft: #ede5f6;
    --type-line: #cfbde6;
    --type-bg: #faf7fc;
    --type-icon: url("../img/types/lecture.png");
    background-image: repeating-radial-gradient(circle at 0 0, rgb(107 63 160 / 0.07) 0 1.5px, transparent 1.5px 22px);
}

html[data-lw-theme="klassisch"] div.boxed>h3+p {
    color: #453d38;
}

/* Überschrift als Typ-Badge */
html[data-lw-theme="klassisch"] div.boxed h3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin-bottom: 14px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--type-line, #e3dbd4);
    border-radius: 999px;
    background: var(--type-soft, #f2ece7);
    color: var(--type, #453d38);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

html[data-lw-theme="klassisch"] div.boxed h3::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--type-icon, none) center / contain no-repeat;
    image-rendering: pixelated;
}

html[data-lw-theme="klassisch"] div.boxed:not(.aufgabe, .experiment, .explain) h3 {
    padding-left: 12px;
}

html[data-lw-theme="klassisch"] div.boxed:not(.aufgabe, .experiment, .explain) h3::before {
    display: none;
}

/* Experimente: Schritte mit schwarzer Nummer wie auf der Übersicht */
html[data-lw-theme="klassisch"] div.experiment>div {
    padding: 14px 18px 14px 56px;
    border: 1px solid var(--type-line);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.85);
}

html[data-lw-theme="klassisch"] div.experiment>div::before {
    left: 16px;
    top: 13px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font: 700 14px/28px var(--lw-font);
}

html[data-lw-theme="klassisch"] .colored pre[output] {
    border: 1px solid var(--type-line);
}

html[data-lw-theme="klassisch"] pre[output],
html[data-lw-theme="klassisch"] pre[code] {
    border-radius: 14px;
}

/* --- Tabs als Segment-Umschalter (.seg) --- */
html[data-lw-theme="klassisch"] tabbar.code {
    padding: 16px;
    border: 1.5px solid #e3dbd4;
}

html[data-lw-theme="klassisch"] tabbar>div.buttonbar {
    width: fit-content;
    max-width: 100%;
    gap: 0;
    padding: 3px;
    border: 1px solid #e3dbd4;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

html[data-lw-theme="klassisch"] tabbar>div.buttonbar button,
html[data-lw-theme="klassisch"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="klassisch"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 5px 14px;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
}

html[data-lw-theme="klassisch"] tabbar>div.buttonbar button.active {
    background: #1a1614;
    color: #fff !important;
}

html[data-lw-theme="klassisch"] tabbar>div[data-tab] {
    padding: 14px 0 0;
}

html[data-lw-theme="klassisch"] .hint-container button {
    border-radius: 10px;
}



/* ============================================================================
   3c. Karten – hell, ruhig, aufgeräumt
   ============================================================================ */

html[data-lw-theme="karten"] {
    --lw-bg: #f2f4f7;
    --lw-fg: #1d2433;
    --lw-muted: #5d6577; /* WCAG AA: >= 4.5:1 */
    --lw-h1-size: 34px;
    --lw-surface: #ffffff;
    --lw-surface-2: #f7f8fa;
    --lw-border: #e5e8ee;
    --lw-card-border: none;
    --lw-nested-border: 1px solid #e5e8ee;
    --lw-radius: 16px;
    --lw-radius-sm: 10px;
    --lw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px -4px rgba(16, 24, 40, 0.08);
    --lw-accent: #4f46e5;
    --lw-accent-fg: #ffffff;
    --lw-code-bg: #eef0ff;
    --lw-code-fg: #3730a3;
    --lw-code-block-bg: #f7f8fa;
    --lw-out-bg: #111827;
    --lw-out-fg: #e5e7eb;
    --lw-exp-out-bg: #ffffff;
    --lw-exp-out-fg: #1d2433;
    --lw-experiment: #9333ea;
    --lw-exp-item-bg: #faf7ff;
    --lw-exp-item-border: 1px solid #efe6fd;
    --primary: 243 75% 59%;
    --primary-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
}

html[data-lw-theme="karten"] div.topbar>a.backlink {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

html[data-lw-theme="karten"] div.boxed h3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #eef0f4;
    color: #414a5c;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-lw-theme="karten"] div.boxed h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

html[data-lw-theme="karten"] div.aufgabe h3 {
    background: #fff4d6;
    color: #8a5a00;
}

html[data-lw-theme="karten"] div.experiment h3 {
    background: #f1e8ff;
    color: #6b21a8;
}

html[data-lw-theme="karten"] div.explain h3 {
    background: #e0f2fe;
    color: #0369a1;
}

/* Konsole mit Fensterpunkten */
html[data-lw-theme="karten"] div.boxed:not(.experiment) pre[output] {
    position: relative;
    padding-top: 38px;
    border-radius: 12px;
}

html[data-lw-theme="karten"] div.boxed:not(.experiment) pre[output]::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 #febc2e, 32px 0 #28c840;
}

html[data-lw-theme="karten"] .colored pre[output] {
    border: 1px solid #efe6fd;
}

html[data-lw-theme="karten"] tabbar.code {
    padding: 16px;
}

html[data-lw-theme="karten"] tabbar>div.buttonbar {
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
    border: none;
    border-radius: 10px;
    background: #f2f4f7;
    box-shadow: none;
}

html[data-lw-theme="karten"] tabbar>div.buttonbar button,
html[data-lw-theme="karten"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="karten"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 6px 14px;
    border: none;
    border-radius: 7px;
    font-size: 14px;
}

html[data-lw-theme="karten"] tabbar>div.buttonbar button.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

html[data-lw-theme="karten"] tabbar>div[data-tab] {
    padding: 14px 0 0;
}


/* ============================================================================
   3d. Terminal – dunkel wie eine IDE
   ============================================================================ */

html[data-lw-theme="terminal"] {
    --lw-bg: #0d1017;
    --lw-fg: #c9d1dc;
    --lw-muted: #7d8aa3;
    --lw-font-head: var(--lw-mono);
    --lw-h1-size: 30px;
    --lw-h1-color: #f0f3f8;
    --lw-surface: #121620;
    --lw-surface-2: #0f131b;
    --lw-border: #1f2533;
    --lw-card-border: 1px solid #1f2533;
    --lw-radius: 10px;
    --lw-radius-sm: 6px;
    --lw-shadow: none;
    --lw-accent: #34d399;
    --lw-accent-fg: #04130d;
    --lw-link: #7dd3fc;
    --lw-code-bg: #1b2130;
    --lw-code-fg: #7dd3fc;
    --lw-code-block-bg: #07090d;
    --lw-out-bg: #07090d;
    --lw-out-fg: #a7f3d0;
    --lw-experiment: #c084fc;
    --lw-tabbar-bg: #0a0d13;
    --lw-topbar-bg: #0a0d13;
    --lw-topbar-border: 1px solid #1c2230;
    --primary: 158 64% 52%;
    --primary-foreground: 160 65% 5%;
    --destructive: 0 91% 71%;
    --destructive-foreground: 0 0% 7%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-font: var(--lw-mono);
}

html[data-lw-theme="terminal"] div.topbar {
    margin-bottom: 8px;
}

html[data-lw-theme="terminal"] .lw-crumb,
html[data-lw-theme="terminal"] div.topbar>a.backlink {
    font-family: var(--lw-mono);
    font-weight: 400;
}

html[data-lw-theme="terminal"] .lw-crumb::before {
    content: "~/ ";
    color: #3b4356;
}

html[data-lw-theme="terminal"] div.topbar h1::after {
    content: "_";
    color: #34d399;
    animation: lw-blink 1.1s steps(1) infinite;
}

@keyframes lw-blink {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-lw-theme="terminal"] div.topbar h1::after {
        animation: none;
    }
}

html[data-lw-theme="terminal"] div.topbar>a.backlink::before {
    content: "cd .. ← ";
}

html[data-lw-theme="terminal"] div.boxed h3 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

html[data-lw-theme="terminal"] div.boxed h3::before {
    content: "// ";
    color: #5c6780;
}

html[data-lw-theme="terminal"] div.aufgabe {
    border-left: 3px solid #fbbf24;
}

html[data-lw-theme="terminal"] div.aufgabe h3 {
    color: #fbbf24;
}

html[data-lw-theme="terminal"] div.experiment {
    border-left: 3px solid #c084fc;
}

html[data-lw-theme="terminal"] div.experiment h3 {
    color: #c084fc;
}

html[data-lw-theme="terminal"] div.explain {
    border-left: 3px solid #7dd3fc;
}

html[data-lw-theme="terminal"] div.explain h3 {
    color: #7dd3fc;
}

html[data-lw-theme="terminal"] div.boxed ul {
    list-style: none;
    padding-left: 1.2em;
}

html[data-lw-theme="terminal"] div.boxed ul>li::before {
    content: "›";
    margin-left: -1.2em;
    width: 1.2em;
    display: inline-block;
    color: #34d399;
}

html[data-lw-theme="terminal"] pre[output] {
    border: 1px solid #1c2230;
}

html[data-lw-theme="terminal"] div.boxed:not(.experiment) pre[output]::before {
    content: "$ java Main\A";
    color: #5c6780;
}

html[data-lw-theme="terminal"] div.experiment>div {
    margin: 0 !important;
    padding: 12px 0 12px 48px;
    border-top: 1px solid #1c2230;
    border-radius: 0;
}

html[data-lw-theme="terminal"] div.experiment>div:nth-child(2) {
    border-top: none;
}

html[data-lw-theme="terminal"] div.experiment>div::before {
    content: "[" counter(lw-exp) "]";
    left: 0;
    top: 12px;
    width: auto;
    height: auto;
    background: none;
    color: #c084fc;
    font: 500 14px/1.6 var(--lw-mono);
}

html[data-lw-theme="terminal"] tabbar>div.buttonbar {
    gap: 0;
    padding: 0;
}

html[data-lw-theme="terminal"] tabbar>div.buttonbar button,
html[data-lw-theme="terminal"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="terminal"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 11px 18px;
    border: none;
    border-right: 1px solid #1f2533;
    font-family: var(--lw-mono);
    font-size: 13px;
    font-weight: 400;
}

html[data-lw-theme="terminal"] tabbar>div.buttonbar button.active {
    background: #121620;
    box-shadow: inset 0 2px #34d399;
    color: #f0f3f8;
}

html[data-lw-theme="terminal"] .hint-container button,
html[data-lw-theme="terminal"] [codeblocks] .tw-bg-primary,
html[data-lw-theme="terminal"] [codeblocks] .tw-bg-destructive {
    font-family: var(--lw-mono);
}


/* ============================================================================
   3e. Abenteuer – kräftig und verspielt
   ============================================================================ */

html[data-lw-theme="abenteuer"] {
    --lw-bg: #f6f2ee; /* wie uebersicht.html (--bg) */
    --lw-fg: #111111;
    --lw-muted: #4a4a4a;
    --lw-h1-size: 42px;
    --lw-h1-weight: 800;
    --lw-h1-tracking: -0.03em;
    --lw-surface: #ffffff;
    --lw-surface-2: #faf7f4;
    --lw-border: #111111;
    --lw-card-border: 2.5px solid #111;
    --lw-nested-border: 2px solid #111;
    --lw-radius: 14px;
    --lw-radius-sm: 10px;
    --lw-shadow: 6px 6px 0 #111;
    --lw-accent: #111111;
    --lw-accent-fg: #ffffff;
    --lw-link: #1c63c7;
    --lw-code-bg: #fff0c2;
    --lw-code-block-bg: #faf6f1;
    --lw-out-bg: #1b1b1b;
    --lw-out-fg: #7cffb2;
    --lw-exp-out-bg: #ffffff;
    --lw-exp-out-fg: #111111;
    --lw-experiment: #ffd23f;
    --lw-experiment-fg: #111;
    --lw-exp-item-bg: #f3eeff;
    --lw-exp-item-border: 2px solid #111;
    --lw-editor-border-width: 2.5px;
    --primary: 147 69% 55%;
    --primary-foreground: 0 0% 7%;
    --destructive: 0 100% 71%;
    --destructive-foreground: 0 0% 7%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-bg: #ffd23f;
    --lw-btn-fg: #111;
    --lw-btn-border: 2px solid #111;
    --lw-btn-shadow: 3px 3px 0 #111;
    --lw-btn-weight: 800;
    --radius: 0.625rem;
}

/* Verlauf über die ganze Seite: oben das Beige der Übersicht, unten ein warmes Gelb.
   html trägt die Endfarbe, damit auch der Überscroll-Bereich passt. */
html[data-lw-theme="abenteuer"] {
    background: #fff4dc;
}

html[data-lw-theme="abenteuer"] body {
    min-height: 100vh;
    background:
        radial-gradient(rgba(120, 90, 50, 0.16) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(var(--lw-bg), #fff4dc);
    font-size: 17px;
}

html[data-lw-theme="abenteuer"] .lw-crumb {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: #111;
    color: #f6f2ee;
    font-weight: 600;
    transform: rotate(-1.5deg);
}

html[data-lw-theme="abenteuer"] .lw-crumb:empty {
    display: none;
}

html[data-lw-theme="abenteuer"] div.topbar>a.backlink {
    border: 2px solid #111;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 3px 3px 0 #111;
}

html[data-lw-theme="abenteuer"] div.topbar>a.backlink {
    padding: 6px 12px;
    font-weight: 600;
}

html[data-lw-theme="abenteuer"] div.boxed {
    padding: 0 24px 22px;
    margin-bottom: 30px;
}

html[data-lw-theme="abenteuer"] div.boxed:not(:has(>h3:first-child)) {
    padding-top: 22px;
}

/* Die Kopfzeile nicht mit eigenem Radius nachbilden, sondern von der Box
   auf deren Innenkante (Padding-Box) zuschneiden lassen. Sonst liegen zwei
   geglättete Kanten übereinander (Farbsaum, ungleich dicke Linie). */
html[data-lw-theme="abenteuer"] div.boxed:has(>h3:first-child) {
    overflow: clip;
}

html[data-lw-theme="abenteuer"] div.boxed>h3:first-child {
    display: block;
    margin: 0 -24px 18px;
    padding: 14px 24px;
    border-bottom: 2.5px solid #111;
    border-radius: 0;
    background: #ffd23f;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

html[data-lw-theme="abenteuer"] div.aufgabe>h3:first-child::before {
    content: "⚑ Quest · ";
}

html[data-lw-theme="abenteuer"] div.experiment>h3:first-child {
    background: #b69cff;
}

html[data-lw-theme="abenteuer"] div.experiment>h3:first-child::before {
    content: "★ Bonus · ";
}

html[data-lw-theme="abenteuer"] div.explain>h3:first-child {
    background: #7fd6ff;
}

html[data-lw-theme="abenteuer"] div.explain>h3:first-child::before {
    content: "✎ ";
}

html[data-lw-theme="abenteuer"] tabbar>div[data-tab]>div.boxed {
    padding: 0 20px 20px;
    box-shadow: 4px 4px 0 #111;
}

html[data-lw-theme="abenteuer"] tabbar>div[data-tab]>div.boxed>h3:first-child {
    margin: 0 -20px 16px;
    padding: 12px 20px;
    border-bottom-width: 2px;
}

html[data-lw-theme="abenteuer"] pre[output] {
    border: 2.5px solid #111;
}

html[data-lw-theme="abenteuer"] .colored pre[output] {
    border-width: 2px;
}

html[data-lw-theme="abenteuer"] div.experiment>div {
    margin-top: 14px !important;
    padding-left: 60px;
}

html[data-lw-theme="abenteuer"] div.experiment>div::before {
    left: 12px;
    top: 11px;
    width: 34px;
    height: 34px;
    border: 2px solid #111;
    border-radius: 50%;
    font: 800 17px/30px var(--lw-font);
    transform: rotate(-8deg);
}

html[data-lw-theme="abenteuer"] tabbar>div.buttonbar {
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 2.5px solid #111;
    background: #7fd6ff;
}

html[data-lw-theme="abenteuer"] tabbar>div.buttonbar button,
html[data-lw-theme="abenteuer"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="abenteuer"] tabbar>div.buttonbar button.active {
    margin: 0 4px 4px 0;
    padding: 6px 14px;
    border: 2px solid #111;
    border-radius: 8px;
    background: #fff;
    box-shadow: 2px 2px 0 #111;
    color: #111;
    font-weight: 600;
}

html[data-lw-theme="abenteuer"] tabbar>div.buttonbar button.active {
    background: #111;
    color: #fff !important;
    box-shadow: none;
    transform: translate(2px, 2px);
}

html[data-lw-theme="abenteuer"] [codeblocks] .tw-bg-primary,
html[data-lw-theme="abenteuer"] [codeblocks] .tw-bg-destructive,
html[data-lw-theme="abenteuer"] .hint-container button {
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #111;
    font-weight: 800;
}

html[data-lw-theme="abenteuer"] .hint-container button,
html[data-lw-theme="abenteuer"] .colored .hint-container button {
    background: #ffd23f;
    color: #111;
}


/* ============================================================================
   3f. Raster – klares Schweizer Raster
   ============================================================================ */

html[data-lw-theme="raster"] {
    --lw-bg: #ffffff;
    --lw-fg: #111111;
    --lw-muted: #666666; /* WCAG AA: >= 4.5:1 */
    --lw-h1-size: 50px;
    --lw-h1-tracking: -0.045em;
    --lw-surface: transparent;
    --lw-surface-solid: #ffffff;
    --lw-surface-2: #f6f6f6;
    --lw-border: #dddddd;
    --lw-card-border: none;
    --lw-nested-border: none;
    --lw-radius: 0;
    --lw-radius-sm: 0;
    --lw-shadow: none;
    --lw-accent: #e30613;
    --lw-accent-fg: #ffffff;
    --lw-link: #111;
    --lw-code-bg: #f1f1f1;
    --lw-out-bg: #f3f3f3;
    --lw-out-fg: #111111;
    --lw-experiment: #e30613;
    --lw-topbar-border: 3px solid #111;
    --lw-editor-border: #111;
    --primary: 0 0% 7%;
    --primary-foreground: 0 0% 100%;
    --destructive: 356 95% 46%;
    --destructive-foreground: 0 0% 100%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-hover-bg: #111;
    --radius: 0;
}

html[data-lw-theme="raster"] div.topbar {
    padding-top: 44px;
    border-bottom: none;
    background: linear-gradient(#111, #111) bottom / min(calc(100% - 32px), calc(var(--lw-content-width) - 32px)) 3px no-repeat;
}

html[data-lw-theme="raster"] .lw-crumb {
    color: #e30613;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

html[data-lw-theme="raster"] div.topbar>a.backlink {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
}

html[data-lw-theme="raster"] div#content {
    counter-reset: lw-sec;
    padding-top: 0;
}

/* Hauptabschnitte: Nummer + Titel links, Inhalt rechts */
html[data-lw-theme="raster"] div#content>div.boxed,
html[data-lw-theme="raster"] div#content>tabbar.code {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    margin: 0;
    padding: 26px 0 36px;
    border-top: 1px solid #111;
    counter-increment: lw-sec;
    overflow: visible;
}

html[data-lw-theme="raster"] div#content>div.boxed:first-child,
html[data-lw-theme="raster"] div#content>tabbar.code:first-child {
    border-top: none;
}

html[data-lw-theme="raster"] div#content>div.boxed>* {
    grid-column: 2;
    margin-top: 0;
}

html[data-lw-theme="raster"] div#content>div.boxed>h3 {
    grid-column: 1;
    grid-row: 1 / span 60;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] div#content>div.boxed>h3::before,
html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::before {
    content: counter(lw-sec, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    color: #e30613;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

html[data-lw-theme="raster"] div#content>div.boxed>h3+p {
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

html[data-lw-theme="raster"] pre[output] {
    border-left: 4px solid #e30613;
}

html[data-lw-theme="raster"] div.boxed h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] tabbar>div[data-tab]>div.boxed {
    padding: 20px 0 0;
    border-top: 1px solid #dddddd;
    background: none;
}

/* Tabs als senkrechte Liste in der linken Spalte */
html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar {
    grid-column: 1;
    grid-row: 1 / span 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    overflow: visible;
}

html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::after {
    content: "Code";
    order: -1;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::before {
    order: -2;
}

html[data-lw-theme="raster"] tabbar>div.buttonbar button,
html[data-lw-theme="raster"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="raster"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 14px;
    text-align: left;
    white-space: normal;
}

html[data-lw-theme="raster"] tabbar>div.buttonbar button.active {
    color: #111;
    font-weight: 600;
}

html[data-lw-theme="raster"] tabbar>div.buttonbar button.active::before {
    content: "→ ";
    color: #e30613;
}

html[data-lw-theme="raster"] div#content>tabbar.code>div[data-tab] {
    grid-column: 2;
    padding: 0;
}

html[data-lw-theme="raster"] [codeblocks] .tw-bg-primary,
html[data-lw-theme="raster"] [codeblocks] .tw-bg-destructive {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] div.experiment>div {
    margin: 0 !important;
    padding: 12px 0 12px 48px;
    border-bottom: 1px solid #dddddd;
}

html[data-lw-theme="raster"] div.experiment>div:nth-child(2) {
    padding-top: 0;
}

html[data-lw-theme="raster"] div.experiment>div::before {
    content: counter(lw-sec) "." counter(lw-exp);
    left: 0;
    top: 12px;
    width: auto;
    height: auto;
    background: none;
    color: #e30613;
    font: 700 16px/1.6 var(--lw-font);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

html[data-lw-theme="raster"] div.experiment>div:nth-child(2)::before {
    top: 0;
}

html[data-lw-theme="raster"] .hint-container button:hover {
    background: #111;
}

@media (max-width: 700px) {
    html[data-lw-theme="raster"] {
        --lw-h1-size: 38px;
    }

    html[data-lw-theme="raster"] div#content>div.boxed,
    html[data-lw-theme="raster"] div#content>tabbar.code {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-lw-theme="raster"] div#content>div.boxed>*,
    html[data-lw-theme="raster"] div#content>div.boxed>h3,
    html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar,
    html[data-lw-theme="raster"] div#content>tabbar.code>div[data-tab] {
        grid-column: 1;
        grid-row: auto;
    }

    html[data-lw-theme="raster"] div#content>div.boxed>h3 {
        margin-bottom: 16px;
    }

    html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 16px;
        margin-bottom: 16px;
    }

    html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::before,
    html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::after {
        width: 100%;
    }

    html[data-lw-theme="raster"] div#content>tabbar.code>div.buttonbar::after {
        margin-bottom: 4px;
    }
}


/* ============================================================================
   3g. Tafel – Kreide auf grüner Tafel
   ============================================================================ */

html[data-lw-theme="tafel"] {
    --lw-bg: #26392f;
    --lw-fg: #e6ece4;
    --lw-muted: #9fb8a8;
    --lw-font-head: "Caveat", "Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --lw-h1-size: 44px;
    --lw-h1-color: #fdfdf6;
    --lw-h1-tracking: 0;
    --lw-surface: transparent;
    --lw-surface-solid: #1f3128;
    --lw-surface-2: rgba(0, 0, 0, 0.12);
    --lw-border: rgba(255, 255, 255, 0.28);
    --lw-card-border: 2px solid rgba(255, 255, 255, 0.5);
    --lw-nested-border: 2px dashed rgba(255, 255, 255, 0.3);
    --lw-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
    --lw-radius-sm: 8px;
    --lw-shadow: none;
    --lw-accent: #f7d774;
    --lw-accent-fg: #1c2b23;
    --lw-link: #a8d8f0;
    --lw-code-bg: rgba(0, 0, 0, 0.22);
    --lw-code-fg: #a8d8f0;
    --lw-out-bg: rgba(0, 0, 0, 0.25);
    --lw-out-fg: #ffffff;
    --lw-exp-out-bg: rgba(0, 0, 0, 0.2);
    --lw-experiment: #f4a6c6;
    --primary: 45 89% 71%;
    --primary-foreground: 147 21% 14%;
    --destructive: 5 81% 73%;
    --destructive-foreground: 147 21% 14%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-font: var(--lw-font-head);
    --lw-btn-weight: 700;
}

html[data-lw-theme="tafel"] body {
    background: #26392f;
}

html[data-lw-theme="tafel"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.07), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.04), transparent 50%);
    pointer-events: none;
}

html[data-lw-theme="tafel"] div.topbar h1 {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.35);
}

html[data-lw-theme="tafel"] .lw-crumb,
html[data-lw-theme="tafel"] div.topbar>a.backlink {
    font-family: var(--lw-font-head);
    font-size: 17px;
}

html[data-lw-theme="tafel"] .lw-crumb {
    color: #f7d774;
}

html[data-lw-theme="tafel"] div.boxed,
html[data-lw-theme="tafel"] tabbar.code {
    margin-bottom: 30px;
}

html[data-lw-theme="tafel"] div.boxed h3 {
    font-size: 26px;
    font-weight: 700;
    text-decoration: underline wavy;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 7px;
}

html[data-lw-theme="tafel"] div.aufgabe h3 {
    color: #f7d774;
}

html[data-lw-theme="tafel"] div.experiment h3 {
    color: #f4a6c6;
}

html[data-lw-theme="tafel"] div.explain h3 {
    color: #a8d8f0;
}

html[data-lw-theme="tafel"] pre[output] {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

html[data-lw-theme="tafel"] div.boxed ul {
    list-style: none;
    padding-left: 1.4em;
}

html[data-lw-theme="tafel"] div.boxed ul>li::before {
    content: "✓";
    display: inline-block;
    width: 1.4em;
    margin-left: -1.4em;
    color: #9fe0b0;
}

html[data-lw-theme="tafel"] div.experiment>div {
    padding: 10px 0 10px 54px;
}

html[data-lw-theme="tafel"] div.experiment>div::before {
    left: 4px;
    top: 8px;
    width: 34px;
    height: 34px;
    border: 2px solid #f4a6c6;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: none;
    color: #f4a6c6;
    font: 700 19px/30px var(--lw-font-head);
}

html[data-lw-theme="tafel"] tabbar.code {
    padding: 12px 22px 18px;
    border-radius: 14px 225px 14px 255px / 255px 14px 225px 14px;
}

html[data-lw-theme="tafel"] tabbar>div.buttonbar {
    gap: 14px;
    padding: 0;
    border: none;
}

html[data-lw-theme="tafel"] tabbar>div.buttonbar button,
html[data-lw-theme="tafel"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="tafel"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 4px;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--lw-font-head);
    font-size: 19px;
    font-weight: 700;
}

html[data-lw-theme="tafel"] tabbar>div.buttonbar button.active {
    color: #fff;
    text-decoration: underline wavy #f7d774;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
}

html[data-lw-theme="tafel"] tabbar>div[data-tab] {
    padding: 12px 0 0;
}

html[data-lw-theme="tafel"] [codeblocks] .tw-bg-primary,
html[data-lw-theme="tafel"] [codeblocks] .tw-bg-destructive,
html[data-lw-theme="tafel"] .hint-container button {
    font-family: var(--lw-font-head);
    font-weight: 700;
}


/* ============================================================================
   3h. Prisma – weißes Licht, in alle Spektralfarben zerlegt
   ============================================================================ */

html[data-lw-theme="prisma"] {
    /* Spektrum: für Flächen und Linien ... */
    --lw-spec-1: #ef4444;
    --lw-spec-2: #f97316;
    --lw-spec-3: #facc15;
    --lw-spec-4: #22c55e;
    --lw-spec-5: #3b82f6;
    --lw-spec-6: #8b5cf6;
    --lw-spectrum: linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6);
    /* ... und dunkler für Schrift auf Weiß */
    --lw-spectrum-ink: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #7c3aed);
    --lw-bg: #fbfaff;
    --lw-fg: #1e1b2e;
    --lw-muted: #6e6a85;
    --lw-h1-size: 42px;
    --lw-h1-weight: 800;
    --lw-surface: #ffffff;
    --lw-surface-2: #f6f4fd;
    --lw-border: #e6e2f3;
    --lw-card-border: 1px solid #e6e2f3;
    --lw-nested-border: 1px solid #e6e2f3;
    --lw-radius: 20px;
    --lw-radius-sm: 10px;
    --lw-shadow: 0 1px 2px rgb(30 27 46 / 0.04), 0 10px 30px -12px rgb(91 63 214 / 0.18);
    --lw-accent: #6d28d9;
    --lw-accent-fg: #ffffff;
    --lw-link: #2563eb;
    --lw-code-bg: #f1eefb;
    --lw-code-fg: #4c1d95;
    --lw-code-block-bg: #f8f7fd;
    --lw-out-bg: #1e1b2e;
    --lw-out-fg: #f3f0ff;
    --lw-exp-out-bg: #1e1b2e;
    --lw-exp-out-fg: #f3f0ff;
    --lw-experiment: #8b5cf6;
    --lw-editor-border: #d9d3ee;
    --primary: 263 70% 50%;
    --primary-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-hover-bg: linear-gradient(90deg, #dc2626, #ea580c, #16a34a, #2563eb, #7c3aed);
    --radius: 0.625rem;
}

/* Lichtstreifen am oberen Rand */
html[data-lw-theme="prisma"] body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    height: 6px;
    background: var(--lw-spectrum);
    pointer-events: none;
}

html[data-lw-theme="prisma"] div.topbar {
    padding-top: 40px;
}

html[data-lw-theme="prisma"] div.topbar h1 {
    width: fit-content;
    background: var(--lw-spectrum-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-lw-theme="prisma"] .lw-crumb {
    color: var(--lw-accent);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Boxen: weiße Karten mit Spektrum-Kante oben */
html[data-lw-theme="prisma"] div.boxed,
html[data-lw-theme="prisma"] tabbar.code {
    border-top: 4px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--lw-spectrum) top / 100% 4px no-repeat border-box,
        #e6e2f3 border-box;
}

html[data-lw-theme="prisma"] tabbar>div[data-tab]>div.boxed {
    border-top: var(--lw-nested-border);
    background: var(--lw-surface-2);
}

html[data-lw-theme="prisma"] div.boxed h3 {
    font-size: 1.35em;
    font-weight: 700;
}

html[data-lw-theme="prisma"] div.boxed h3::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--lw-spectrum);
}

/* Aufzählungszeichen und Experiment-Nummern wandern durch das Spektrum */
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n+1)::marker { color: var(--lw-spec-1); }
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n+2)::marker { color: var(--lw-spec-2); }
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n+3)::marker { color: #eab308; }
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n+4)::marker { color: var(--lw-spec-4); }
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n+5)::marker { color: var(--lw-spec-5); }
html[data-lw-theme="prisma"] div.boxed li:nth-child(6n)::marker { color: var(--lw-spec-6); }

html[data-lw-theme="prisma"] div.experiment>div::before {
    border-radius: 50%;
    font-weight: 700;
}

html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n+2) { --lw-experiment: var(--lw-spec-1); }
html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n+3) { --lw-experiment: var(--lw-spec-2); }
html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n+4) { --lw-experiment: var(--lw-spec-3); --lw-experiment-fg: #1e1b2e; }
html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n+5) { --lw-experiment: var(--lw-spec-4); }
html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n) { --lw-experiment: var(--lw-spec-5); }
html[data-lw-theme="prisma"] div.experiment>div:nth-child(6n+1) { --lw-experiment: var(--lw-spec-6); }

/* Ausgaben: dunkel mit Spektrum-Kante links */
html[data-lw-theme="prisma"] pre[output] {
    padding-left: 22px;
    background:
        linear-gradient(180deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6) left / 4px 100% no-repeat,
        var(--lw-out-bg);
}

html[data-lw-theme="prisma"] .colored pre[output] {
    background:
        linear-gradient(180deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6) left / 4px 100% no-repeat,
        var(--lw-exp-out-bg);
}

/* Tabs: aktiver Tab mit Spektrum-Unterstrich */
html[data-lw-theme="prisma"] tabbar>div.buttonbar button.active {
    border-bottom-color: transparent;
    background: var(--lw-spectrum) bottom / 100% 3px no-repeat;
    font-weight: 600;
}

html[data-lw-theme="prisma"] .hint-container button:hover {
    background: linear-gradient(90deg, #dc2626, #ea580c, #16a34a, #2563eb, #7c3aed);
}

/* Quiz */
html[data-lw-theme="prisma"] {
    --lw-input-border: #d9d3ee;
    --lw-input-border-width: 1.5px;
    --lw-input-radius: 8px;
    --lw-input-focus: #7c3aed;
    --lw-input-focus-shadow: 0 0 0 3px rgb(139 92 246 / 0.22);
}

html[data-lw-theme="prisma"] .quiz-graphs {
    --graph-node: #3b82f6;
    --graph-start: #f97316;
    --graph-edge: #a9a3c2;
    --graph-sel: #ec4899;
    --graph-noted: #c4b5fd;
    --graph-noted-fg: #1e1b2e;
    --graph-mark: rgba(139, 92, 246, 0.16);
    --graph-set: #facc15;
    --graph-set-fg: #1e1b2e;
}


/* ============================================================================
   3i. Shadows – dunkel, Tiefe durch weiche Schatten, Akzente leuchten
   ============================================================================ */

html[data-lw-theme="shadows"] {
    --lw-bg: #101015;
    --lw-fg: #d6d6e0;
    --lw-muted: #8e8ea0;
    /* Überschriften in gebrochener Schrift (fonts/grenze-gotisch, lokal ausgeliefert) */
    --lw-font-head: "Grenze Gotisch", "Iowan Old Style", Georgia, serif;
    --lw-h1-size: 46px;
    --lw-h1-weight: 600;
    --lw-h1-tracking: 0.01em;
    --lw-h1-color: #f5f3ff;
    --lw-surface: #1a1a22;
    --lw-surface-2: #15151c;
    --lw-border: rgba(255, 255, 255, 0.08);
    --lw-card-border: 1px solid rgba(255, 255, 255, 0.06);
    --lw-radius: 16px;
    --lw-radius-sm: 10px;
    --lw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -16px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.45);
    --lw-accent: #a78bfa;
    --lw-accent-fg: #160e2b;
    --lw-link: #93c5fd;
    --lw-code-bg: #25252f;
    --lw-code-fg: #c4b5fd;
    --lw-code-block-bg: #0c0c10;
    --lw-out-bg: #0c0c10;
    --lw-out-fg: #e9e5ff;
    --lw-exp-item-bg: #15151c;
    --lw-experiment: #f472b6;
    --lw-experiment-fg: #2a0a1a;
    --lw-tabbar-bg: #15151c;
    --primary: 255 92% 76%;
    --primary-foreground: 258 51% 11%;
    --destructive: 0 91% 71%;
    --destructive-foreground: 0 0% 7%;
    /* Knöpfe aus Playgrounds und Textblöcken (wie die Hinweis-Knöpfe) */
    --lw-btn-shadow: 0 4px 14px -4px rgba(167, 139, 250, 0.55);
}

/* schwaches violettes Licht von oben, zum Rand hin dunkel */
html[data-lw-theme="shadows"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 55% at 50% -12%, rgba(167, 139, 250, 0.12), transparent 70%),
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

html[data-lw-theme="shadows"] div.topbar h1 {
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 28px rgba(167, 139, 250, 0.35);
}

html[data-lw-theme="shadows"] div.boxed,
html[data-lw-theme="shadows"] tabbar.code {
    margin-bottom: 32px;
}

html[data-lw-theme="shadows"] div.boxed h3 {
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Überschriften mit leuchtendem Punkt in der Farbe der Box */
html[data-lw-theme="shadows"] div.boxed h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 12px 0 2px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px 1px currentColor;
    vertical-align: 0.22em;
}

html[data-lw-theme="shadows"] div.aufgabe h3 {
    color: #fbbf24;
}

html[data-lw-theme="shadows"] div.experiment h3 {
    color: #f472b6;
}

html[data-lw-theme="shadows"] div.explain h3 {
    color: #7dd3fc;
}

html[data-lw-theme="shadows"] tabbar>div[data-tab]>div.boxed h3 {
    color: var(--lw-fg);
}

html[data-lw-theme="shadows"] pre[output],
html[data-lw-theme="shadows"] pre[code] {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

html[data-lw-theme="shadows"] div.experiment>div {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 16px -8px rgba(0, 0, 0, 0.7);
}

html[data-lw-theme="shadows"] div.experiment>div::before {
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(244, 114, 182, 0.55);
}

html[data-lw-theme="shadows"] div.boxed li::marker {
    color: #a78bfa;
}

html[data-lw-theme="shadows"] tabbar>div.buttonbar button.active {
    color: #f5f3ff;
    box-shadow: 0 6px 12px -6px rgba(167, 139, 250, 0.8);
}

html[data-lw-theme="shadows"] .hint-container button,
html[data-lw-theme="shadows"] .colored .hint-container button {
    box-shadow: 0 4px 14px -4px rgba(167, 139, 250, 0.55);
}


/* ============================================================================
   3j. Koralle – warm, im Stil des GdI-Zeitplans: Kopf im Korallen-Verlauf des Zeitplans mit feinem Raster,
   Überschriften als Code-Kommentare ("// Aufgabe"), Nummern als dunkle Stempel.
   Schrift auf Weiß nutzt das dunklere #c9401f (WCAG AA), die hellen Töne nur für Flächen.
   ============================================================================ */

html[data-lw-theme="koralle"] {
    --lw-coral: #ff6b6b;
    --lw-coral-2: #ec5f3d;
    --lw-coral-soft: #fff1ec;
    --lw-coral-line: #f6c8b8;
    --lw-bg: #faf7f5;
    --lw-fg: #1c1917;
    --lw-muted: #6f6863; /* WCAG AA: >= 4.5:1 */
    --lw-h1-size: 38px;
    --lw-h1-weight: 800;
    --lw-h1-color: #ffffff;
    --lw-surface: #ffffff;
    --lw-surface-2: #fbf8f6;
    --lw-border: #ece7e3;
    --lw-card-border: none;
    --lw-nested-border: 1px solid #ece7e3;
    --lw-radius: 16px;
    --lw-radius-sm: 10px;
    --lw-shadow: 0 1px 2px rgb(28 25 23 / 0.06), 0 0 0 1px #ece7e3;
    --lw-accent: #c9401f;
    --lw-accent-fg: #ffffff;
    --lw-code-bg: #fff1ec;
    --lw-code-fg: #a8361a;
    --lw-code-block-bg: #fbf8f6;
    --lw-out-bg: #1c1917;
    --lw-out-fg: #f5efeb;
    --lw-exp-out-bg: #1c1917;
    --lw-exp-out-fg: #f5efeb;
    --lw-experiment: #1c1917;
    --lw-exp-item-bg: #fbf8f6;
    --lw-exp-item-border: 1px solid #ece7e3;
    /* Verlauf wie im Kopf des GdI-Zeitplans (kleine weiße Schrift darauf erreicht nur etwa 3:1) */
    --lw-topbar-bg:
        radial-gradient(circle at 92% -20%, rgb(255 255 255 / 0.28), transparent 45%),
        linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(120deg, #ff6b6b, #ec5f3d 55%, #c2410c);
    /* Eingabefelder und Knöpfe */
    --lw-input-border: #dcd2cb;
    --lw-input-radius: 8px;
    --lw-input-focus: #c9401f;
    --lw-input-focus-shadow: 0 0 0 3px rgb(236 95 61 / 0.22);
    --lw-btn-radius: 999px;
    --lw-btn-shadow: 0 4px 12px -4px rgb(201 64 31 / 0.55);
    --lw-btn-hover-bg: #b93a1e;
    /* Codeblocks-Oberfläche (shadcn) */
    --primary: 12 73% 45%;
    --primary-foreground: 0 0% 100%;
    --ring: 12 73% 45%;
    --cb-ov-blue: #2f5fc4;
}

/* --- Kopf: Verlauf mit Raster, Kapitel als Code-Kommentar, Zurück als helle Pille --- */
html[data-lw-theme="koralle"] div.topbar {
    padding-top: 40px;
    padding-bottom: 28px;
    color: #fff;
    text-shadow: 0 1px 2px rgb(120 30 10 / 0.25);
}

html[data-lw-theme="koralle"] .lw-crumb {
    color: rgb(255 255 255 / 0.9);
    font: 600 12px/1.4 var(--lw-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-lw-theme="koralle"] .lw-crumb::before {
    content: "// ";
}

html[data-lw-theme="koralle"] div.topbar>a.backlink {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.18);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

html[data-lw-theme="koralle"] div.topbar>a.backlink:hover {
    background: rgb(0 0 0 / 0.3);
}

html[data-lw-theme="koralle"] div.intro {
    color: var(--lw-muted);
    font-size: 1.04em;
}

/* --- Boxen: weiße Karten, Typfarbe als Kante links, Titel mit "//"-Kommentar --- */
html[data-lw-theme="koralle"] div.boxed {
    --lw-box-type: var(--lw-coral-2);
    border-left: 4px solid var(--lw-box-type);
}

html[data-lw-theme="koralle"] div.experiment {
    --lw-box-type: #a43fc0;
}

html[data-lw-theme="koralle"] div.explain {
    --lw-box-type: #2f5fc4;
}

html[data-lw-theme="koralle"] div.boxed h3 {
    font-weight: 750;
    letter-spacing: -0.01em;
}

html[data-lw-theme="koralle"] div.boxed h3::before {
    content: "// ";
    color: var(--lw-box-type);
    font-family: var(--lw-mono);
    font-weight: 600;
}

html[data-lw-theme="koralle"] tabbar>div[data-tab]>div.boxed {
    border-left: 4px solid var(--lw-box-type);
}

/* Große Ziffern mit Kontur wie die Wochennummern im GdI-Zeitplan: die Boxen werden durchgezählt
   (oben rechts), Experimente tragen ihre Nummer links. Die untere Hälfte ist zart hinterlegt. */
html[data-lw-theme="koralle"] {
    --lw-outline-num:
        800 1em/0.9 "Avenir Next", "Segoe UI Variable Display", var(--lw-font);
}

html[data-lw-theme="koralle"] div#content {
    counter-reset: lw-sec;
}

html[data-lw-theme="koralle"] div#content>div.boxed,
html[data-lw-theme="koralle"] div#content>tabbar.code {
    position: relative;
    counter-increment: lw-sec;
}

html[data-lw-theme="koralle"] div#content>div.boxed::after,
html[data-lw-theme="koralle"] div#content>tabbar.code::after {
    content: counter(lw-sec, decimal-leading-zero);
    position: absolute;
    top: 14px;
    right: 22px;
    font: var(--lw-outline-num);
    font-size: 46px;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--lw-coral);
    background: linear-gradient(180deg, transparent 55%, var(--lw-coral-soft) 55%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}

/* Platz für die Ziffer neben dem Titel bzw. den Tabs */
html[data-lw-theme="koralle"] div#content>div.boxed>h3 {
    padding-right: 72px;
}

html[data-lw-theme="koralle"] div#content>tabbar.code>div.buttonbar {
    max-width: calc(100% - 72px);
}

/* Experimente: Nummer als Kontur-Ziffer statt Stempel */
html[data-lw-theme="koralle"] div.experiment>div::before {
    content: counter(lw-exp, decimal-leading-zero);
    left: 12px;
    top: 10px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(180deg, transparent 55%, var(--lw-coral-soft) 55%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.2px #a43fc0;
    font: var(--lw-outline-num);
    font-size: 28px;
    letter-spacing: -0.03em;
}

/* Konsole: dunkel und warm, mit Korallen-Kante oben */
html[data-lw-theme="koralle"] pre[output],
html[data-lw-theme="koralle"] [codeblocks] pre.output {
    border-top: 3px solid var(--lw-coral-2) !important;
}

html[data-lw-theme="koralle"] [codeblocks] .codeblock .code-editor>div {
    --lw-editor-border: #e4dcd6;
}

/* --- Tabs als Segment-Umschalter, aktiver Tab in Koralle --- */
html[data-lw-theme="koralle"] tabbar.code {
    padding: 16px;
}

html[data-lw-theme="koralle"] tabbar>div.buttonbar {
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: #f3eeea;
    box-shadow: none;
}

html[data-lw-theme="koralle"] tabbar>div.buttonbar button,
html[data-lw-theme="koralle"] tabbar>div.buttonbar button.inactive,
html[data-lw-theme="koralle"] tabbar>div.buttonbar button.active {
    margin: 0;
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

html[data-lw-theme="koralle"] tabbar>div.buttonbar button.active {
    background: var(--lw-accent);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgb(201 64 31 / 0.6);
}

html[data-lw-theme="koralle"] tabbar>div.buttonbar button.active:hover {
    color: #fff !important;
}

html[data-lw-theme="koralle"] tabbar>div[data-tab] {
    padding: 16px 0 0;
}

/* --- Hinweise: Knöpfe mit weichem Korallen-Schatten (keine Pillen, sie werden mit dem Hinweis hoch) --- */
html[data-lw-theme="koralle"] .hint-container button,
html[data-lw-theme="koralle"] .colored .hint-container button {
    box-shadow: 0 4px 12px -4px rgb(201 64 31 / 0.55);
}

html[data-lw-theme="koralle"] hint.expanded {
    border-left-color: var(--lw-coral-line);
}

/* --- Quiz und Graphen --- */
html[data-lw-theme="koralle"] .quiz {
    --quiz-ok: #2f5fc4;
    --quiz-bad: #c9401f;
    --quiz-ok-bg: rgba(47, 95, 196, 0.07);
    --quiz-bad-bg: rgba(201, 64, 31, 0.08);
    --quiz-ok-ring: 0 0 0 3px rgba(47, 95, 196, 0.18);
    --quiz-bad-ring: 0 0 0 3px rgba(201, 64, 31, 0.2);
}

html[data-lw-theme="koralle"] .quiz-graphs {
    --graph-node: #c9401f;
    --graph-start: #1c1917;
    --graph-edge: #b5aaa3;
    --graph-sel: #2f5fc4;
    --graph-noted: #f6c8b8;
    --graph-noted-fg: #1c1917;
    --graph-mark: rgba(236, 95, 61, 0.15);
    --graph-set: #f6c8b8;
    --graph-set-fg: #1c1917;
}

@media (max-width: 600px) {
    html[data-lw-theme="koralle"] {
        --lw-h1-size: 30px;
    }
}


/* ============================================================================
   4. Gemeinsame Nachträge
   ============================================================================ */

/* Dunkle Themes: Codeblocks-Oberfläche (shadcn-Variablen) abdunkeln, Editor invertieren */
html[data-lw-theme="terminal"],
html[data-lw-theme="tafel"],
html[data-lw-theme="shadows"] {
    color-scheme: dark;
    --background: 222 25% 9%;
    --foreground: 210 20% 90%;
    --muted: 222 20% 16%;
    --muted-foreground: 218 15% 60%;
    --popover: 222 25% 11%;
    --popover-foreground: 210 20% 90%;
    --card: 222 25% 11%;
    --card-foreground: 210 20% 90%;
    --border: 222 20% 20%;
    --input: 222 20% 24%;
    --secondary: 222 20% 16%;
    --secondary-foreground: 210 20% 90%;
    --accent: 222 20% 16%;
    --accent-foreground: 210 20% 90%;
    --ring: 210 20% 80%;
}

html[data-lw-theme="tafel"] {
    --background: 150 20% 13%;
    --muted: 150 18% 18%;
    --popover: 150 20% 15%;
    --card: 150 20% 15%;
    --border: 150 15% 28%;
    --input: 150 15% 30%;
    --secondary: 150 18% 18%;
    --accent: 150 18% 18%;
}

html[data-lw-theme="shadows"] {
    --background: 240 14% 8%;
    --muted: 240 10% 15%;
    --popover: 240 13% 11%;
    --card: 240 13% 11%;
    --border: 240 8% 20%;
    --input: 240 8% 24%;
    --secondary: 240 10% 15%;
    --accent: 240 10% 15%;
}

/* Die Editor-Farbschemata der Codeblocks-Bibliothek sind hell; per Filter werden sie dunkel,
   die Farbtöne der Syntaxhervorhebung bleiben dabei erhalten. */
html[data-lw-theme="terminal"] [codeblocks] .cm-editor,
html[data-lw-theme="tafel"] [codeblocks] .cm-editor,
html[data-lw-theme="shadows"] [codeblocks] .cm-editor {
    filter: invert(0.9) hue-rotate(180deg);
}

/* API-Tabs (Klassendokumentation) ohne Box-Dekoration */
html[data-lw-theme] tabbar>div[data-tab].api>div.boxed {
    margin: 0;
    padding: 4px 4px 8px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

html[data-lw-theme] tabbar>div[data-tab].api h2 {
    margin-top: 4px !important;
    font-family: var(--lw-font-head);
}

html[data-lw-theme] tabbar>div[data-tab].api h4 {
    color: var(--lw-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Overlays der Codeblocks (Markierungen, Pills, Kommentarkarten, Sprechblasen) ---
   Die Bibliothek liest ihre Farben aus --cb-ov-* Variablen. Pro Theme werden Oberfläche, Schrift
   und das Blau (für Ergebnisse in den Beispiellösungen) an die Theme-Farben angepasst. */
html[data-lw-theme] {
    --cb-ov-surface: var(--lw-surface-solid, var(--lw-surface));
    --cb-ov-fg: var(--lw-fg);
    --cb-ov-muted: var(--lw-muted);
    --cb-ov-hairline: var(--lw-border);
    --cb-ov-font: var(--lw-font);
}

html[data-lw-theme="klassisch"] {
    --cb-ov-blue: #2848c7;
}

html[data-lw-theme="heft"] {
    --cb-ov-blue: #2a52be; /* Königsblaue Tinte */
}

html[data-lw-theme="karten"] {
    --cb-ov-blue: var(--lw-accent);
}

html[data-lw-theme="abenteuer"] {
    --cb-ov-blue: #1c63c7;
}

html[data-lw-theme="raster"] {
    --cb-ov-blue: #0047bb;
}

html[data-lw-theme="prisma"] {
    --cb-ov-blue: #5246e8;
}

/* Code in Kommentaren in Textfarbe statt --lw-code-fg (in dunklen Themes sonst invertiert kaum lesbar) */
html[data-lw-theme] .cb-ov-pill code,
html[data-lw-theme] .cb-ov-comment code {
    color: inherit;
    font-weight: 600;
}

/* Abenteuer: kräftige Konturen und harte Schatten wie die Kästen */
html[data-lw-theme="abenteuer"] .cb-ov-pill {
    height: 15px;
    border: 1px solid #111;
    box-shadow: 1.5px 1.5px 0 #111;
    font-weight: 600;
}

html[data-lw-theme="abenteuer"] .cb-ov-card {
    border-left-width: 4px;
    border-radius: 0 6px 6px 0;
}

html[data-lw-theme="abenteuer"] .cb-ov-bubble {
    border: 2px solid #111;
    border-top: 4px solid var(--cb-ov-color, #111);
    border-radius: 10px;
    box-shadow: 4px 4px 0 #111;
}

/* Raster: eckig und flach */
html[data-lw-theme="raster"] .cb-ov-pill,
html[data-lw-theme="raster"] .cb-ov-card,
html[data-lw-theme="raster"] .cb-ov-bubble {
    border-radius: 0;
    box-shadow: none;
}

/* Dunkle Themes: der Editor wird per Filter invertiert (siehe oben), also auch Pills, Karten und
   Hover-Sprechblasen darin. Dort gelten deshalb helle Werte. Sprechblasen außerhalb des Editors
   (Gutter, Playground-Elemente) hängen am <body> und bekommen dunkle Werte. */
html[data-lw-theme="terminal"],
html[data-lw-theme="tafel"],
html[data-lw-theme="shadows"] {
    --cb-ov-surface: #ffffff;
    --cb-ov-fg: #1f2430;
    --cb-ov-muted: #5d6576;
    --cb-ov-hairline: rgba(15, 23, 42, 0.12);
}

html[data-lw-theme="terminal"] {
    --cb-ov-blue: #0369a1; /* invertiert: helles Himmelblau wie --lw-link */
}

html[data-lw-theme="tafel"] {
    --cb-ov-blue: #1f6f99; /* invertiert: Kreideblau */
}

html[data-lw-theme="shadows"] {
    --cb-ov-blue: #1e40af; /* invertiert: helles Blau wie --lw-link */
}

html[data-lw-theme="terminal"] .cb-ov-bubble--floating,
html[data-lw-theme="terminal"] .cb-ov-layer,
html[data-lw-theme="tafel"] .cb-ov-bubble--floating,
html[data-lw-theme="tafel"] .cb-ov-layer,
html[data-lw-theme="shadows"] .cb-ov-bubble--floating,
html[data-lw-theme="shadows"] .cb-ov-layer {
    --cb-ov-surface: var(--lw-surface-solid, var(--lw-surface));
    --cb-ov-fg: var(--lw-fg);
    --cb-ov-muted: var(--lw-muted);
    --cb-ov-hairline: var(--lw-border);
    --cb-ov-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-lw-theme="terminal"] .cb-ov-bubble--floating,
html[data-lw-theme="terminal"] .cb-ov-layer {
    --cb-ov-blue: var(--lw-link);
}

html[data-lw-theme="tafel"] .cb-ov-bubble--floating,
html[data-lw-theme="tafel"] .cb-ov-layer,
html[data-lw-theme="shadows"] .cb-ov-bubble--floating,
html[data-lw-theme="shadows"] .cb-ov-layer {
    --cb-ov-blue: var(--lw-link);
}

/* Schmale Bildschirme */
@media (max-width: 600px) {
    html[data-lw-theme] {
        --lw-h1-size: 30px !important;
    }

    html[data-lw-theme] div.topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-top: 20px;
    }

    html[data-lw-theme] .lw-title {
        grid-row: 1;
    }

    html[data-lw-theme] .lw-menu-anchor {
        grid-row: 1;
        grid-column: 2;
        align-self: start;
    }

    html[data-lw-theme] div.topbar>a.backlink {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 0;
    }

    html[data-lw-theme] div.boxed {
        padding: 18px;
    }

    html[data-lw-theme="abenteuer"] div.boxed {
        padding: 0 18px 18px;
    }

    html[data-lw-theme="abenteuer"] div.boxed>h3:first-child {
        margin: 0 -18px 16px;
        padding: 12px 18px;
    }

    html[data-lw-theme] tabbar>div[data-tab] {
        padding: 12px;
    }

    html[data-lw-theme] div#content {
        padding-left: 12px;
        padding-right: 12px;
    }
}