/*
 * Themes für die Übersicht (uebersicht.html). Ergänzt css/uebungsplaner.css.
 *
 * uebungsplaner.css ist über Variablen (--bg, --surface, --ink, --line, ...) aufgebaut; jedes Theme
 * setzt diese Variablen neu und übernimmt dann die Formensprache seiner Übungsseiten für Boxen,
 * Knöpfe, Kacheln und Karten (css/themes.css). Das GdI-Banner im Kopf bindet jedes Theme auf
 * eigene Weise ein.
 *
 * "Klassisch" ist das Grund-Design dieser Seite und braucht hier keine Regeln.
 *
 * Geometrie des Banners (aus uebungsplaner.css, gilt innerhalb von .page-head):
 *   --crop        Verschiebung nach oben auf breiten Bildschirmen
 *   --img-bottom  Unterkante des Bildes
 *   Logo endet bei 31.25cqw - var(--crop); auf Handys (<= 600px) ist das Bild 420px hoch, Logo endet bei 233px
 */

html[data-lw-theme] {
    --lw-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --lw-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    --lw-hand: "Caveat", "Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --lw-banner: url("../img/brand/GdI_banner_tall.jpg");
}


/* ============================================================================
   Dunkle Themes (Terminal, Tafel, Shadows): Flächen, die in uebungsplaner.css mit --ink gefüllt sind und weiße
   Schrift tragen, bekommen die Hintergrundfarbe als Schrift, weil --ink hier hell ist.
   ============================================================================ */

html[data-lw-theme="terminal"],
html[data-lw-theme="tafel"],
html[data-lw-theme="shadows"] {
    color-scheme: dark;
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .step-no {
    color: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) :is(.scope-btn[aria-checked="true"],
    .seg button[aria-pressed="true"],
    .chip[aria-pressed="true"],
    .badge,
    .btn-primary) {
    color: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .concept::after {
    color: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) :is(.scope-btn[aria-checked="true"], .chip[aria-pressed="true"]) .count {
    background: rgb(0 0 0 / 0.15);
    color: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .chip[aria-pressed="true"] .dot.on {
    background: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .switch-track::after {
    background: var(--bg);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .switch input:not(:checked)+.switch-track::after {
    background: var(--ink-2);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .dot:not(.on) {
    background: var(--line-strong);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .table tbody tr:hover {
    background: var(--surface-2);
}

html:is([data-lw-theme="terminal"], [data-lw-theme="tafel"], [data-lw-theme="shadows"]) .search {
    background-color: var(--surface);
}


/* ============================================================================
   Heft – Papier, Serifen, Textmarker. Banner als eingeklebtes Foto mit Klebestreifen.
   ============================================================================ */

html[data-lw-theme="heft"] {
    --bg: #f7f3ea;
    --surface: #fffdf8;
    --surface-2: #f4eee1;
    --ink: #2d2a24;
    --ink-2: #4a443a;
    --muted: #6b624f; /* WCAG AA: >= 4.5:1 */
    --line: #e7dfcd;
    --line-strong: #cfc3aa;
    --accent: #8b4a2b;
    --accent-soft: #f3e3d6;
    --radius-lg: 8px;
    --radius: 6px;
    --shadow: 0 1px 0 #e7dfcd, 0 8px 24px -16px rgb(80 60 20 / 0.3);
    --lw-accent: #8b4a2b;
}

html[data-lw-theme="heft"] :is(h1, .profile-title, .card-title, .group-head, .step-text h2, .empty-title) {
    font-family: var(--lw-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Foto: weißer Rand, leicht schief, Klebestreifen an den Ecken */
html[data-lw-theme="heft"] .page-head {
    position: relative;
    margin: 12px 8px 40px;
    border: 12px solid #fff;
    border-bottom-width: 12px;
    border-radius: 2px;
    background:
        linear-gradient(rgb(255 238 205 / 0.18), rgb(255 238 205 / 0.18)),
        linear-gradient(transparent calc(var(--img-bottom) - 120px), #d9cbbd var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #d9cbbd;
    box-shadow: 0 1px 2px rgb(60 40 20 / 0.15), 0 18px 36px -18px rgb(60 40 20 / 0.45);
    transform: rotate(-0.6deg);
    overflow: visible;
}

html[data-lw-theme="heft"] .page-head::before,
html[data-lw-theme="heft"] .page-head::after {
    content: "";
    position: absolute;
    top: -22px;
    width: 130px;
    height: 34px;
    background: rgb(250 236 170 / 0.75);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
    z-index: 2;
}

html[data-lw-theme="heft"] .page-head::before {
    left: -34px;
    transform: rotate(-32deg);
}

html[data-lw-theme="heft"] .page-head::after {
    right: -34px;
    transform: rotate(32deg);
}

html[data-lw-theme="heft"] .page-head h1 {
    display: inline;
    background: linear-gradient(transparent 60%, #ffe27a 60%);
    font-size: clamp(32px, 4.6vw, 48px);
}

html[data-lw-theme="heft"] .eyebrow {
    color: #6f6150;
    letter-spacing: 0.14em;
}

html[data-lw-theme="heft"] .card,
html[data-lw-theme="heft"] .card-title a::after {
    border-radius: 8px;
}

html[data-lw-theme="heft"] .card-media {
    border: 5px solid #fff;
    border-radius: 3px;
    box-shadow: 0 4px 10px -4px rgb(60 40 20 / 0.4);
    transform: rotate(1.2deg);
}

html[data-lw-theme="heft"] .card:nth-child(even) .card-media {
    transform: rotate(-1.2deg);
}

html[data-lw-theme="heft"] .tile {
    border-radius: 6px;
}

html[data-lw-theme="heft"] .group-head {
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line-strong);
}


/* Boxen und Bedienelemente wie auf den Heft-Übungsseiten */
html[data-lw-theme="heft"] .profile-title {
    align-self: flex-start;
    background: linear-gradient(transparent 62%, #ffe27a 62%);
}

html[data-lw-theme="heft"] .card:hover .card-title a {
    color: var(--ink);
    background: linear-gradient(transparent 62%, #ffe27a 62%);
}

html[data-lw-theme="heft"] .step-no {
    border: 1.5px solid #8e5bb8;
    background: none;
    color: #8e5bb8;
    font-family: var(--lw-serif);
    font-size: 16px;
}

html[data-lw-theme="heft"] .profile-steps {
    border-top-style: dashed;
}

html[data-lw-theme="heft"] .results-bar {
    border-bottom-style: dashed;
}

html[data-lw-theme="heft"] :is(.scope, .seg, .search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .chip, .done-btn) {
    border-radius: 4px;
}

html[data-lw-theme="heft"] .scope-btn,
html[data-lw-theme="heft"] .seg button {
    border-radius: 3px;
}

html[data-lw-theme="heft"] .card-flag {
    color: #8b4a2b;
}

@media (max-width: 600px) {
    html[data-lw-theme="heft"] .page-head {
        border-width: 8px;
        background:
            linear-gradient(rgb(255 238 205 / 0.18), rgb(255 238 205 / 0.18)),
            linear-gradient(transparent 300px, #d9cbbd 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #d9cbbd;
    }

    html[data-lw-theme="heft"] .page-head::before,
    html[data-lw-theme="heft"] .page-head::after {
        width: 90px;
        height: 26px;
        top: -16px;
    }
}


/* ============================================================================
   Karten – hell, kühl, aufgeräumt. Banner mit Milchglas-Schild für den Titel.
   ============================================================================ */

html[data-lw-theme="karten"] {
    --bg: #f2f4f7;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --ink: #1d2433;
    --ink-2: #414a5c;
    --muted: #5d6577; /* WCAG AA: >= 4.5:1 */
    --line: #e5e8ee;
    --line-strong: #cfd5df;
    --accent: #4f46e5;
    --accent-soft: #eef0ff;
    --radius-lg: 16px;
    --radius: 12px;
    --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 16px -4px rgb(16 24 40 / 0.08);
    --lw-accent: #4f46e5;
}

html[data-lw-theme="karten"] .page-head {
    border-radius: 16px;
    background:
        linear-gradient(rgb(79 70 229 / 0.06), rgb(79 70 229 / 0.06)),
        linear-gradient(transparent calc(var(--img-bottom) - 120px), #d4cdd3 var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #d4cdd3;
    box-shadow: var(--shadow);
}

html[data-lw-theme="karten"] .hero-text {
    width: fit-content;
    max-width: calc(59.4cqw - 48px);
    margin: 0 0 22px 22px;
    padding: 18px 22px 20px;
    border: 1px solid rgb(255 255 255 / 0.7);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.62);
    box-shadow: 0 8px 30px -10px rgb(16 24 40 / 0.25);
    backdrop-filter: blur(14px) saturate(1.3);
}

html[data-lw-theme="karten"] .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef0ff;
    color: #4f46e5;
    font-size: 12px;
}

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

/* Boxen: weiße Karten ohne Rahmen, mit weichem Schatten */
html[data-lw-theme="karten"] :is(.profile, .more, .table-wrap) {
    border: none;
    box-shadow: var(--shadow);
}

html[data-lw-theme="karten"] .profile.is-new {
    box-shadow: 0 0 0 3px #c7c4f7, var(--shadow);
}

html[data-lw-theme="karten"] .profile-title {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff4d6;
    color: #8a5a00;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-lw-theme="karten"] .profile-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5b400;
}

html[data-lw-theme="karten"] .step-no {
    border-radius: 8px;
    background: #9333ea;
    font-size: 13px;
}

html[data-lw-theme="karten"] .tile {
    border-color: transparent;
    background: #f7f8fa;
}

html[data-lw-theme="karten"] .tile.is-heard {
    border-color: #e5e8ee;
    background: #fff;
}

html[data-lw-theme="karten"] .tile.is-last {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px #c7c4f7;
}

/* Umschalter als Segment-Control wie die Tabs auf den Übungsseiten */
html[data-lw-theme="karten"] :is(.scope, .seg) {
    border: none;
    border-radius: 10px;
    background: #e9ecf1;
}

html[data-lw-theme="karten"] :is(.scope-btn, .seg button) {
    border-radius: 7px;
}

html[data-lw-theme="karten"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"]) {
    background: #fff;
    color: #1d2433;
    box-shadow: 0 1px 3px rgb(16 24 40 / 0.12);
}

html[data-lw-theme="karten"] .scope-btn[aria-checked="true"] .count {
    background: #eef0ff;
    color: #4f46e5;
}

html[data-lw-theme="karten"] :is(.chip[aria-pressed="true"], .btn-primary, .badge) {
    border-color: #4f46e5;
    background: #4f46e5;
}

html[data-lw-theme="karten"] .switch input:checked+.switch-track {
    background: #4f46e5;
}

html[data-lw-theme="karten"] :is(.search, .more-btn, .select, .stepper select, .stepper-btn, .btn) {
    border-width: 1px;
    border-radius: 10px;
}

/* Übungskarten: weiß und ohne Muster, der Typ steht nur im Badge */
html[data-lw-theme="karten"] .card {
    border: none;
    border-radius: 16px;
    background-color: #fff;
    background-image: none;
    box-shadow: var(--shadow);
}

html[data-lw-theme="karten"] .card:hover {
    box-shadow: 0 12px 32px -8px rgb(16 24 40 / 0.18);
}

html[data-lw-theme="karten"] .card-title a::after {
    border-radius: 16px;
}

html[data-lw-theme="karten"] .card-media {
    border-radius: 12px;
}

html[data-lw-theme="karten"] .type-badge {
    border: none;
}

html[data-lw-theme="karten"] .card.type-sandbox {
    --type-bg: #fff;
}

html[data-lw-theme="karten"] .card.type-sandbox :is(.card-desc, .feature-none) {
    color: var(--muted);
}

html[data-lw-theme="karten"] .card.type-sandbox .card-flag {
    color: var(--accent);
}

html[data-lw-theme="karten"] .card.type-sandbox :is(.feature, .reason) {
    color: var(--ok);
}

html[data-lw-theme="karten"] .card.type-sandbox .dot:not(.on) {
    background: #d5dae3;
}

html[data-lw-theme="karten"] .card.type-sandbox .type-badge {
    background: var(--type-soft);
}

html[data-lw-theme="karten"] .card.type-sandbox .done-btn {
    border-color: var(--line-strong);
    background: #fff;
    color: var(--muted);
}

html[data-lw-theme="karten"] .card.type-sandbox:hover .card-title a {
    color: var(--type);
}

html[data-lw-theme="karten"] .dot:not(.on) {
    background: #d5dae3;
}

html[data-lw-theme="karten"] .group-state.is-heard {
    background: #e7f6ec;
}

@media (max-width: 600px) {
    html[data-lw-theme="karten"] .page-head {
        background:
            linear-gradient(rgb(79 70 229 / 0.06), rgb(79 70 229 / 0.06)),
            linear-gradient(transparent 300px, #d4cdd3 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #d4cdd3;
    }

    html[data-lw-theme="karten"] .hero-text {
        max-width: none;
        margin: 0 12px 14px;
        padding: 14px 16px 16px;
    }
}


/* ============================================================================
   Terminal – dunkel wie eine IDE. Banner als grünlich-monochromes Röhrenbild mit Scanlines.
   ============================================================================ */

html[data-lw-theme="terminal"] {
    --bg: #0d1017;
    --surface: #121620;
    --surface-2: #0f131b;
    --ink: #e6edf3;
    --ink-2: #c3cad6;
    --muted: #7d8aa3;
    --line: #1f2533;
    --line-strong: #2c3446;
    --accent: #34d399;
    --accent-soft: rgb(52 211 153 / 0.14);
    --ok: #34d399;
    --ok-soft: rgb(52 211 153 / 0.12);
    --shaky: #fbbf24;
    --shaky-soft: rgb(251 191 36 / 0.12);
    --confident: #c084fc;
    --confident-soft: rgb(192 132 252 / 0.14);
    --unknown: #5c6780;
    --radius-lg: 12px;
    --radius: 10px;
    --shadow: none;
    --lw-accent: #34d399;
}

html[data-lw-theme="terminal"] :is(h1, .profile-title, .card-title, .group-head, .step-text h2, .empty-title) {
    font-family: var(--lw-mono);
    letter-spacing: -0.02em;
}

html[data-lw-theme="terminal"] .page-head {
    border: 1px solid #1f2533;
    background:
        repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px),
        linear-gradient(rgb(13 16 23 / 0.2), rgb(13 16 23 / 0.2) calc(31.25cqw - var(--crop) - 60px),
            rgb(13 16 23 / 0.94) calc(31.25cqw - var(--crop) + 40px), #0d1017 var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #0f3a2a;
    background-blend-mode: normal, normal, luminosity, normal;
}

html[data-lw-theme="terminal"] .eyebrow {
    font-family: var(--lw-mono);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #34d399;
}

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

html[data-lw-theme="terminal"] .page-head h1 {
    color: #f0f3f8;
}

html[data-lw-theme="terminal"] .page-head 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"] .page-head h1::after {
        animation: none;
    }
}

html[data-lw-theme="terminal"] .lede {
    color: #aab4c4;
}

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

html[data-lw-theme="terminal"] .profile.is-new {
    box-shadow: 0 0 0 4px rgb(52 211 153 / 0.14);
}

html[data-lw-theme="terminal"] .tile.is-heard {
    background: #161b27;
}

/* Kartentypen dunkel eingefärbt */
html[data-lw-theme="terminal"] .type-lecture { --type: #c4a5f5; --type-soft: rgb(160 110 230 / 0.16); --type-line: #3b3057; --type-bg: #15131f; }
html[data-lw-theme="terminal"] .type-exercise { --type: #f0a58f; --type-soft: rgb(240 140 110 / 0.14); --type-line: #4a2e27; --type-bg: #17120f; }
html[data-lw-theme="terminal"] .type-test { --type: #5eead4; --type-soft: rgb(94 234 212 / 0.12); --type-line: #1d4943; --type-bg: #0f1716; }
html[data-lw-theme="terminal"] .type-tool { --type: #cbd5e1; --type-soft: rgb(203 213 225 / 0.1); --type-line: #2c3446; --type-bg: #12151b; }
html[data-lw-theme="terminal"] .type-sandbox { --type: #b5e07c; --type-soft: rgb(116 165 55 / 0.2); --type-line: #3e5a1d; --type-bg: #141d0c; }

html[data-lw-theme="terminal"] .card.type-lecture {
    background-image: repeating-radial-gradient(circle at 0 0, rgb(196 165 245 / 0.07) 0 1.5px, transparent 1.5px 22px);
}

html[data-lw-theme="terminal"] .card.type-exercise {
    background-image: radial-gradient(rgb(240 165 143 / 0.16) 1px, transparent 1.4px);
}

html[data-lw-theme="terminal"] .card.type-test {
    background-image: repeating-linear-gradient(0deg, rgb(94 234 212 / 0.07) 0 1px, transparent 1px 13px);
}

/* Sandkasten: statt vollem Grün ein dunkles Grün mit hellen Details */
html[data-lw-theme="terminal"] .card.type-sandbox {
    border-color: #3e5a1d;
}

html[data-lw-theme="terminal"] .card.type-sandbox :is(.card-desc, .feature-none) {
    color: #9fb58a;
}

html[data-lw-theme="terminal"] .card.type-sandbox :is(.card-flag, .feature, .reason) {
    color: #b5e07c;
}

html[data-lw-theme="terminal"] .card.type-sandbox .dot:not(.on) {
    background: #3e5a1d;
}

html[data-lw-theme="terminal"] .card.type-sandbox .dot.on {
    background: var(--ink);
}

html[data-lw-theme="terminal"] .card.type-sandbox .type-badge {
    border-color: var(--type-line);
    background: var(--type-soft);
}

html[data-lw-theme="terminal"] .card.type-sandbox .done-btn {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--muted);
}

html[data-lw-theme="terminal"] .card.type-sandbox:hover .card-title a {
    color: var(--type);
}

html[data-lw-theme="terminal"] .card.is-done .card-media::after {
    background: #0d1017;
}


/* Boxen und Bedienelemente wie auf den Terminal-Übungsseiten: farbige linke Kante, // Kommentare */
html[data-lw-theme="terminal"] .profile {
    border-left: 3px solid #fbbf24;
}

html[data-lw-theme="terminal"] .profile-title {
    color: #fbbf24;
    font-size: 15px;
    font-weight: 500;
}

html[data-lw-theme="terminal"] .profile-title::before,
html[data-lw-theme="terminal"] .group-head::before {
    content: "// ";
    color: #5c6780;
    font-family: var(--lw-mono);
    font-weight: 400;
}

html[data-lw-theme="terminal"] .card {
    border-left: 3px solid var(--type);
}

/* .step davor: schlägt die gemeinsame Regel für dunkle Themes oben */
html[data-lw-theme="terminal"] .step .step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    background: none;
    color: #c084fc;
    font-family: var(--lw-mono);
    font-weight: 500;
}

html[data-lw-theme="terminal"] .step-no::before {
    content: "[";
}

html[data-lw-theme="terminal"] .step-no::after {
    content: "]";
}

html[data-lw-theme="terminal"] :is(.scope-btn, .seg button, .chip, .search, .more-btn, .select, .results-count, .scope-hint, .switch) {
    font-family: var(--lw-mono);
    font-size: 13px;
}

html[data-lw-theme="terminal"] :is(.scope, .seg, .search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .chip) {
    border-radius: 6px;
}

html[data-lw-theme="terminal"] :is(.scope-btn, .seg button) {
    border-radius: 4px;
}

html[data-lw-theme="terminal"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary, .badge) {
    background: #34d399;
    border-color: #34d399;
    color: #04130d;
}

html[data-lw-theme="terminal"] .switch input:checked+.switch-track {
    background: #34d399;
}

html[data-lw-theme="terminal"] .tile.is-last {
    border-color: #34d399;
    box-shadow: 0 0 0 2px #34d399;
}

html[data-lw-theme="terminal"] .card,
html[data-lw-theme="terminal"] .card-title a::after {
    border-radius: 10px;
}

html[data-lw-theme="terminal"] .card-media {
    border-radius: 6px;
}

@media (max-width: 600px) {
    html[data-lw-theme="terminal"] .page-head {
        background:
            repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px),
            linear-gradient(rgb(13 16 23 / 0.2), rgb(13 16 23 / 0.2) 180px, rgb(13 16 23 / 0.94) 270px, #0d1017 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #0f3a2a;
        background-blend-mode: normal, normal, luminosity, normal;
    }
}


/* ============================================================================
   Abenteuer – kräftig und verspielt. Banner als Comic-Panel, Titel als schräges Bildunterschrift-Kärtchen.
   ============================================================================ */

html[data-lw-theme="abenteuer"] {
    --bg: #f6f2ee;
    --surface: #ffffff;
    --surface-2: #faf6f1;
    --ink: #111111;
    --ink-2: #2e2a27;
    --muted: #5d544e;
    --line: #111111;
    --line-strong: #111111;
    --accent: #1c63c7;
    --accent-soft: #dbe8ff;
    --radius-lg: 18px;
    --radius: 12px;
    --shadow: 5px 5px 0 #111;
    --lw-accent: #111;
    background: #fff4dc;
}

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

html[data-lw-theme="abenteuer"] .page-head {
    border: 3px solid #111;
    border-radius: 22px;
    box-shadow: 8px 8px 0 #111;
}

html[data-lw-theme="abenteuer"] .hero-text {
    width: fit-content;
    max-width: calc(59.4cqw - 48px);
    margin: 0 0 26px 24px;
    padding: 14px 22px 16px;
    border: 2.5px solid #111;
    border-radius: 14px;
    background: #ffd23f;
    box-shadow: 5px 5px 0 #111;
    transform: rotate(-1.2deg);
}

html[data-lw-theme="abenteuer"] .eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    background: #111;
    color: #fff4dc;
    transform: rotate(1.5deg);
}

html[data-lw-theme="abenteuer"] .lede {
    color: #111;
}

html[data-lw-theme="abenteuer"] :is(.profile, .card, .more, .table-wrap, .empty) {
    border-width: 2.5px;
    border-color: #111;
}

html[data-lw-theme="abenteuer"] .profile.is-new {
    border-color: #111;
    box-shadow: 6px 6px 0 #1c63c7;
}

html[data-lw-theme="abenteuer"] .card {
    box-shadow: 5px 5px 0 #111;
    transition: transform 0.12s, box-shadow 0.12s;
}

html[data-lw-theme="abenteuer"] .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #111;
}

/* die Grundregel färbt den Rand gesperrter Sandkästen grün wie die Karte, hier bleibt er schwarz und gestrichelt */
html[data-lw-theme="abenteuer"] .card.type-sandbox.is-locked {
    border-style: dashed;
    border-color: #111;
}

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

html[data-lw-theme="abenteuer"] .tile {
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #111;
}

html[data-lw-theme="abenteuer"] .tile.state-unknown {
    background: #f1ece6;
}

html[data-lw-theme="abenteuer"] .tile.is-last {
    background: #ffd23f;
    box-shadow: 3px 3px 0 #111;
}

html[data-lw-theme="abenteuer"] :is(.scope, .seg, .search, .more-btn, .select, .stepper select, .stepper-btn, .btn) {
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #111;
}

/* Der versetzte Schatten ragt nur nach rechts unten und kollidiert dort mit dem Fokusring;
   beim Fokus weicht er einem gleichmäßigen Band, damit der Ring zentriert sitzt */
html[data-lw-theme="abenteuer"] body :is(.search, .more-btn, .select, .stepper select, .stepper-btn, .btn):focus-visible {
    box-shadow: 0 0 0 2px #ffd23f;
    outline: 2px solid #111;
    outline-offset: 2px;
}

html[data-lw-theme="abenteuer"] :is(.chip, .pill, .done-btn, .rate-btn) {
    border-color: #111;
}

html[data-lw-theme="abenteuer"] .type-badge {
    border: 1.5px solid #111;
}

html[data-lw-theme="abenteuer"] .step-no {
    background: #ffd23f;
    color: #111;
    border: 2px solid #111;
    transform: rotate(-8deg);
}

html[data-lw-theme="abenteuer"] .profile-head-action {
    border: 2px solid #111;
    background: #7fd6ff;
    color: #111;
}

html[data-lw-theme="abenteuer"] .group-head {
    font-weight: 800;
}

html[data-lw-theme="abenteuer"] .group-state {
    border: 1.5px solid #111;
}


/* Boxen wie auf den Abenteuer-Übungsseiten: farbige Kopfleiste mit dicker Linie */
html[data-lw-theme="abenteuer"] .profile-head {
    background: #ffd23f;
    border-bottom: 2.5px solid #111;
}

html[data-lw-theme="abenteuer"] .profile-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-lw-theme="abenteuer"] .profile-title::before {
    content: "⚑ ";
}

html[data-lw-theme="abenteuer"] .profile-summary {
    color: #111;
}

html[data-lw-theme="abenteuer"] .profile-head-action {
    background: #fff;
    box-shadow: 2px 2px 0 #111;
}

html[data-lw-theme="abenteuer"] .profile-steps {
    border-top: none;
}

html[data-lw-theme="abenteuer"] .group-head {
    padding: 10px 16px;
    border: 2.5px solid #111;
    border-radius: 12px;
    background: #7fd6ff;
    box-shadow: 4px 4px 0 #111;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

html[data-lw-theme="abenteuer"] .group-no,
html[data-lw-theme="abenteuer"] .group-count {
    color: #111;
}

html[data-lw-theme="abenteuer"] .group-state {
    background: #fff;
    color: #111;
}

html[data-lw-theme="abenteuer"] .group-state.is-heard {
    background: #3ddc84;
}

html[data-lw-theme="abenteuer"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"]) {
    background: #111;
}

html[data-lw-theme="abenteuer"] .btn-primary {
    background: #3ddc84;
    color: #111;
    font-weight: 800;
}

html[data-lw-theme="abenteuer"] .new {
    border: 1.5px solid #111;
    transform: rotate(-4deg);
}

html[data-lw-theme="abenteuer"] .card-chapter {
    border: 1.5px solid #111;
    background: #ffd23f;
    color: #111;
    backdrop-filter: none;
}

@media (max-width: 600px) {
    html[data-lw-theme="abenteuer"] .hero-text {
        max-width: none;
        margin: 0 14px 18px;
        padding: 12px 16px 14px;
    }
}


/* ============================================================================
   Raster – klares Schweizer Raster. Banner in Graustufen, rote Kante, Titel groß und eng.
   ============================================================================ */

html[data-lw-theme="raster"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --ink: #111111;
    --ink-2: #333333;
    --muted: #666666; /* WCAG AA: >= 4.5:1 */
    --line: #dddddd;
    --line-strong: #111111;
    --accent: #e30613;
    --accent-soft: #fde4e5;
    --radius-lg: 0;
    --radius: 0;
    --shadow: none;
    --lw-accent: #e30613;
}

html[data-lw-theme="raster"] :is(.page-head, .profile, .card, .card-title a, .tile, .tile-main, .scope, .scope-btn, .chip, .pill,
    .type-badge, .new, .hidden-badge, .draft-badge, .search, .more-btn, .select, .stepper select, .stepper-btn,
    .seg, .seg button, .btn, .done-btn, .card-media, .card-image, .rate-btn, .rate-glyph, .count, .badge,
    .group-state, .profile-head-action, .active-chip, .card-chapter, .table-wrap, .more, .empty, .step-no, .c-thumb) {
    border-radius: 0;
}

html[data-lw-theme="raster"] .card-title a::after {
    border-radius: 0;
}

html[data-lw-theme="raster"] .page-head {
    position: relative;
    margin-bottom: 36px;
    background:
        linear-gradient(transparent calc(var(--img-bottom) - 140px), #fff var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #fff;
    background-blend-mode: normal, luminosity, normal;
    border-bottom: 3px solid #111;
}

/* rote Kante links */
html[data-lw-theme="raster"] .page-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background: #e30613;
}

html[data-lw-theme="raster"] .hero-text {
    padding-left: 44px;
}

html[data-lw-theme="raster"] .eyebrow {
    color: #e30613;
    font-weight: 700;
    letter-spacing: 0.12em;
}

html[data-lw-theme="raster"] h1 {
    font-size: clamp(36px, 6vw, 72px);
    letter-spacing: -0.045em;
    line-height: 0.95;
}

html[data-lw-theme="raster"] .profile {
    border-width: 0;
    border-top: 3px solid #111;
}

html[data-lw-theme="raster"] .profile.is-new {
    box-shadow: none;
    border-top-color: #e30613;
}

html[data-lw-theme="raster"] .step-no {
    background: #e30613;
}

html[data-lw-theme="raster"] .card {
    border: 1px solid #111;
    border-left-width: 6px;
    border-left-color: var(--type);
}

html[data-lw-theme="raster"] .card:hover {
    box-shadow: none;
    background-color: #fafafa;
}

html[data-lw-theme="raster"] .card.type-sandbox {
    border-left-color: #3d6a10;
}

html[data-lw-theme="raster"] .card:is(.type-lecture, .type-exercise, .type-test, .type-tool) {
    background-color: #fff;
    background-image: none;
}

html[data-lw-theme="raster"] .card-title {
    letter-spacing: -0.03em;
}

html[data-lw-theme="raster"] .group-head {
    padding-top: 12px;
    border-top: 3px solid #111;
    font-size: 26px;
    letter-spacing: -0.03em;
}

html[data-lw-theme="raster"] .group-no {
    color: #e30613;
}

html[data-lw-theme="raster"] .tile.is-last {
    box-shadow: inset 0 -4px 0 #e30613;
}


/* Bedienelemente und Abschnitte wie auf den Raster-Übungsseiten: große rote Nummern, Haarlinien */
/* feste Nummern: .page ist ein Container (Style-Containment), CSS-Zähler greifen dort nicht durch */
html[data-lw-theme="raster"] .profile-title::before {
    content: "01";
}

html[data-lw-theme="raster"] .scope::before {
    content: "02";
}

html[data-lw-theme="raster"] :is(.profile-title, .scope)::before {
    display: block;
    margin-bottom: 6px;
    color: #e30613;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

html[data-lw-theme="raster"] .controls {
    padding-top: 22px;
    border-top: 3px solid #111;
}

html[data-lw-theme="raster"] .scope {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 0;
    border: none;
    background: none;
    gap: 2px;
}

html[data-lw-theme="raster"] .scope::before {
    margin: 0 20px 0 0;
}

html[data-lw-theme="raster"] .scope-btn {
    border: 1px solid #111;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] .scope-btn[aria-checked="true"] {
    background: #111;
}

html[data-lw-theme="raster"] :is(.seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary) {
    background: #111;
    color: #fff;
}

html[data-lw-theme="raster"] :is(.search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .seg) {
    border: 1px solid #111;
}

html[data-lw-theme="raster"] .search:focus {
    border-color: #e30613;
    box-shadow: inset 4px 0 0 #e30613;
}

html[data-lw-theme="raster"] .switch input:checked+.switch-track {
    background: #e30613;
}

html[data-lw-theme="raster"] .switch-track,
html[data-lw-theme="raster"] .switch-track::after {
    border-radius: 0;
}

html[data-lw-theme="raster"] .tile {
    border-width: 1px;
}

html[data-lw-theme="raster"] .type-badge {
    border: none;
    background: none;
    padding-left: 0;
    color: var(--type);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-lw-theme="raster"] .new {
    background: #e30613;
    color: #fff;
}

html[data-lw-theme="raster"] .card-flag {
    color: #e30613;
}

@media (max-width: 600px) {
    html[data-lw-theme="raster"] .page-head {
        background:
            linear-gradient(transparent 300px, #fff 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #fff;
        background-blend-mode: normal, luminosity, normal;
    }

    html[data-lw-theme="raster"] .hero-text {
        padding-left: 30px;
    }
}


/* ============================================================================
   Tafel – Kreide auf grüner Tafel. Banner als Polaroid, mit Magnet an die Tafel geheftet;
   der Titel steht als Bildunterschrift in Handschrift auf dem Foto.
   ============================================================================ */

html[data-lw-theme="tafel"] {
    --bg: #26392f;
    --surface: #2c4136;
    --surface-2: #22342b;
    --ink: #eef3ec;
    --ink-2: #d5dfd6;
    --muted: #9fb8a8;
    --line: rgb(255 255 255 / 0.2);
    --line-strong: rgb(255 255 255 / 0.42);
    --accent: #f7d774;
    --accent-soft: rgb(247 215 116 / 0.16);
    --ok: #9fe0b0;
    --ok-soft: rgb(159 224 176 / 0.14);
    --shaky: #f7b267;
    --shaky-soft: rgb(247 178 103 / 0.14);
    --confident: #f4a6c6;
    --confident-soft: rgb(244 166 198 / 0.16);
    --unknown: #7f9688;
    --radius-lg: 18px;
    --radius: 12px;
    --shadow: none;
    --lw-accent: #f7d774;
}

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%, rgb(255 255 255 / 0.07), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgb(255 255 255 / 0.04), transparent 50%);
    pointer-events: none;
}

html[data-lw-theme="tafel"] :is(.profile-title, .card-title, .group-head, .step-text h2, .empty-title) {
    font-family: var(--lw-hand);
    font-weight: 700;
    letter-spacing: 0;
}

html[data-lw-theme="tafel"] .page-head {
    position: relative;
    margin: 18px 10px 44px;
    border: 14px solid #f4f1ea;
    border-bottom-width: 14px;
    border-radius: 3px;
    background:
        linear-gradient(transparent calc(var(--img-bottom) - 120px), #efe6de var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #efe6de;
    box-shadow: 0 16px 34px rgb(0 0 0 / 0.45);
    transform: rotate(0.8deg);
    overflow: visible;
}

/* Magnet */
html[data-lw-theme="tafel"] .page-head::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f 60%, #8e1b1b);
    box-shadow: 0 4px 6px rgb(0 0 0 / 0.45);
    transform: translateX(-50%);
    z-index: 2;
}

html[data-lw-theme="tafel"] .hero-text {
    color: #1f2a24;
}

html[data-lw-theme="tafel"] .page-head h1 {
    font-family: var(--lw-hand);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 700;
    color: #1f2a24;
}

html[data-lw-theme="tafel"] .eyebrow {
    color: #6b5d55;
}

html[data-lw-theme="tafel"] .lede {
    color: #3b463f;
}

html[data-lw-theme="tafel"] :is(.profile, .card, .more, .table-wrap, .empty) {
    border: 2px solid rgb(255 255 255 / 0.45);
    border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

html[data-lw-theme="tafel"] .profile {
    background: rgb(0 0 0 / 0.12);
}

html[data-lw-theme="tafel"] .profile.is-new {
    border-color: #f7d774;
    box-shadow: none;
}

html[data-lw-theme="tafel"] .card-title a::after {
    border-radius: 18px;
}

html[data-lw-theme="tafel"] .tile {
    border-style: dashed;
    background: transparent;
}

html[data-lw-theme="tafel"] .tile.is-heard {
    background: rgb(255 255 255 / 0.05);
}

html[data-lw-theme="tafel"] .tile.is-last {
    border-color: #f7d774;
    box-shadow: 0 0 0 2px #f7d774;
}

html[data-lw-theme="tafel"] .group-head {
    font-size: 26px;
    text-decoration: underline wavy #f7d774;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 7px;
}

/* Kartentypen als farbige Kreide auf der Tafel */
html[data-lw-theme="tafel"] .type-lecture { --type: #d9c2ff; --type-soft: rgb(217 194 255 / 0.14); --type-line: rgb(217 194 255 / 0.5); --type-bg: rgb(0 0 0 / 0.1); }
html[data-lw-theme="tafel"] .type-exercise { --type: #ffc2ad; --type-soft: rgb(255 194 173 / 0.14); --type-line: rgb(255 194 173 / 0.5); --type-bg: rgb(0 0 0 / 0.1); }
html[data-lw-theme="tafel"] .type-test { --type: #a8e6dd; --type-soft: rgb(168 230 221 / 0.14); --type-line: rgb(168 230 221 / 0.5); --type-bg: rgb(0 0 0 / 0.1); }
html[data-lw-theme="tafel"] .type-tool { --type: #e2e8e4; --type-soft: rgb(226 232 228 / 0.12); --type-line: rgb(226 232 228 / 0.45); --type-bg: rgb(0 0 0 / 0.1); }
html[data-lw-theme="tafel"] .type-sandbox { --type: #c9f08f; --type-soft: rgb(201 240 143 / 0.14); --type-line: rgb(201 240 143 / 0.55); --type-bg: rgb(116 165 55 / 0.28); }

html[data-lw-theme="tafel"] .card:is(.type-lecture, .type-exercise, .type-test, .type-tool) {
    background-image: none;
}

html[data-lw-theme="tafel"] .card.type-sandbox {
    border-color: rgb(201 240 143 / 0.55);
}

html[data-lw-theme="tafel"] .card.type-sandbox :is(.card-desc, .feature-none) {
    color: #cfe0c4;
}

html[data-lw-theme="tafel"] .card.type-sandbox :is(.card-flag, .feature, .reason) {
    color: #c9f08f;
}

html[data-lw-theme="tafel"] .card.type-sandbox .dot:not(.on) {
    background: rgb(255 255 255 / 0.25);
}

html[data-lw-theme="tafel"] .card.type-sandbox .dot.on {
    background: var(--ink);
}

html[data-lw-theme="tafel"] .card.type-sandbox .type-badge {
    border-color: var(--type-line);
    background: var(--type-soft);
}

html[data-lw-theme="tafel"] .card.type-sandbox .done-btn {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--ink-2);
}

html[data-lw-theme="tafel"] .card.type-sandbox:hover .card-title a {
    color: var(--type);
}

html[data-lw-theme="tafel"] .card-media {
    border: 5px solid #f4f1ea;
    border-radius: 3px;
    transform: rotate(-1.5deg);
}

html[data-lw-theme="tafel"] .card.is-done .card-media::after {
    background: #26392f;
    color: #9fe0b0;
}


/* Bedienelemente wie auf den Tafel-Übungsseiten: Kreidegelb, Handschrift, gewellte Unterstreichung */
html[data-lw-theme="tafel"] .profile-title {
    color: #f7d774;
    font-size: 26px;
    text-decoration: underline wavy;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 7px;
}

/* .step davor: schlägt die gemeinsame Regel für dunkle Themes oben */
html[data-lw-theme="tafel"] .step .step-no {
    border: 2px solid #f4a6c6;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: none;
    color: #f4a6c6;
    font-family: var(--lw-hand);
    font-size: 18px;
}

html[data-lw-theme="tafel"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary, .badge) {
    border-color: #f7d774;
    background: #f7d774;
    color: #1c2b23;
}

html[data-lw-theme="tafel"] .switch input:checked+.switch-track {
    background: #f7d774;
}

html[data-lw-theme="tafel"] :is(.scope, .seg, .search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .chip, .done-btn, .rate-btn) {
    border-color: rgb(255 255 255 / 0.4);
    background-color: transparent;
}

html[data-lw-theme="tafel"] .search {
    background-color: rgb(0 0 0 / 0.15);
}

html[data-lw-theme="tafel"] :is(.scope-btn, .seg button, .more-btn, .chip) {
    font-family: var(--lw-hand);
    font-size: 17px;
}

html[data-lw-theme="tafel"] .stepper select option {
    background: #26392f;
}

html[data-lw-theme="tafel"] .type-badge {
    font-family: var(--lw-hand);
    font-size: 15px;
}

@media (max-width: 600px) {
    html[data-lw-theme="tafel"] .page-head {
        border-width: 10px;
        background:
            linear-gradient(transparent 300px, #efe6de 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #efe6de;
    }
}


/* ============================================================================
   Prisma – weißes Licht, in alle Spektralfarben zerlegt. Banner mit Spektrum-Streifen unten,
   Titel im Farbverlauf.
   ============================================================================ */

html[data-lw-theme="prisma"] {
    --lw-spectrum: linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6);
    --lw-spectrum-ink: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #7c3aed);
    --bg: #fbfaff;
    --surface: #ffffff;
    --surface-2: #f6f4fd;
    --ink: #1e1b2e;
    --ink-2: #413c58;
    --muted: #6e6a85;
    --line: #e6e2f3;
    --line-strong: #d0c9e8;
    --accent: #6d28d9;
    --accent-soft: #efe8fd;
    --radius-lg: 20px;
    --radius: 12px;
    --shadow: 0 1px 2px rgb(30 27 46 / 0.04), 0 10px 30px -12px rgb(91 63 214 / 0.18);
    --lw-accent: #6d28d9;
}

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"] .page-head {
    position: relative;
    box-shadow: var(--shadow);
}

html[data-lw-theme="prisma"] .page-head::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 8px;
    background: var(--lw-spectrum);
}

html[data-lw-theme="prisma"] .hero-text {
    width: fit-content;
    max-width: calc(59.4cqw - 48px);
    margin: 0 0 30px 22px;
    padding: 18px 22px 20px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.82);
    box-shadow: 0 8px 30px -10px rgb(30 27 46 / 0.25);
    backdrop-filter: blur(12px);
}

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

html[data-lw-theme="prisma"] .eyebrow {
    color: var(--accent);
}

html[data-lw-theme="prisma"] .group-head::after {
    content: "";
    flex-basis: 100%;
    height: 4px;
    max-width: 56px;
    border-radius: 2px;
    background: var(--lw-spectrum);
}

/* Boxen mit Spektrum-Kante oben wie auf den Übungsseiten */
html[data-lw-theme="prisma"] :is(.profile, .more, .table-wrap) {
    border-top: 4px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--lw-spectrum) top / 100% 4px no-repeat border-box,
        var(--line) border-box;
}

/* Schrittnummern wandern durch das Spektrum */
html[data-lw-theme="prisma"] .step:nth-child(6n+1) .step-no { background: #ef4444; }
html[data-lw-theme="prisma"] .step:nth-child(6n+2) .step-no { background: #f97316; }
html[data-lw-theme="prisma"] .step:nth-child(6n+3) .step-no { background: #facc15; color: #1e1b2e; }
html[data-lw-theme="prisma"] .step:nth-child(6n+4) .step-no { background: #22c55e; }
html[data-lw-theme="prisma"] .step:nth-child(6n+5) .step-no { background: #3b82f6; }
html[data-lw-theme="prisma"] .step:nth-child(6n) .step-no { background: #8b5cf6; }

html[data-lw-theme="prisma"] .tile.is-last {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px #ddd6fe;
}

html[data-lw-theme="prisma"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary, .badge) {
    border-color: #6d28d9;
    background: #6d28d9;
    color: #fff;
}

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

html[data-lw-theme="prisma"] .switch input:checked+.switch-track {
    background: var(--lw-spectrum);
}

html[data-lw-theme="prisma"] :is(.search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .chip) {
    border-radius: 999px;
}

html[data-lw-theme="prisma"] .card,
html[data-lw-theme="prisma"] .card-title a::after {
    border-radius: 20px;
}

html[data-lw-theme="prisma"] .card-media {
    border-radius: 12px;
}

@media (max-width: 600px) {
    html[data-lw-theme="prisma"] .hero-text {
        max-width: none;
        margin: 0 12px 20px;
        padding: 14px 16px 16px;
    }
}


/* ============================================================================
   Shadows – dunkel, Tiefe durch weiche Schatten, Akzente leuchten. Banner violett getönt, mit
   Vignette, die in den Hintergrund ausläuft.
   ============================================================================ */

html[data-lw-theme="shadows"] {
    --bg: #101015;
    --surface: #1a1a22;
    --surface-2: #15151c;
    --ink: #ececf4;
    --ink-2: #c8c8d4;
    --muted: #8e8ea0;
    --line: #272732;
    --line-strong: #383846;
    --accent: #a78bfa;
    --accent-soft: rgb(167 139 250 / 0.14);
    --ok: #4ade80;
    --ok-soft: rgb(74 222 128 / 0.12);
    --shaky: #fbbf24;
    --shaky-soft: rgb(251 191 36 / 0.12);
    --confident: #f472b6;
    --confident-soft: rgb(244 114 182 / 0.14);
    --unknown: #5f5f73;
    --radius-lg: 20px;
    --radius: 14px;
    --shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 48px -16px rgb(0 0 0 / 0.85), 0 4px 12px rgb(0 0 0 / 0.45);
    --lw-accent: #a78bfa;
}

html[data-lw-theme="shadows"] body {
    background: #101015;
}

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

html[data-lw-theme="shadows"] .page-head {
    border: 1px solid #272732;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 120% 90% at 50% 30%, transparent 40%, rgb(16 16 21 / 0.7)),
        linear-gradient(rgb(16 16 21 / 0.35), rgb(16 16 21 / 0.35) calc(31.25cqw - var(--crop) - 60px),
            rgb(16 16 21 / 0.92) calc(31.25cqw - var(--crop) + 40px), #101015 var(--img-bottom)),
        var(--lw-banner) center calc(-1 * var(--crop)) / 100% auto no-repeat,
        #2b2145;
    background-blend-mode: normal, normal, luminosity, normal;
    box-shadow: var(--shadow);
}

/* Überschriften in gebrochener Schrift (fonts/grenze-gotisch, lokal ausgeliefert) */
html[data-lw-theme="shadows"] :is(h1, .profile-title, .card-title, .group-head, .step-text h2, .empty-title) {
    font-family: "Grenze Gotisch", "Iowan Old Style", Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

html[data-lw-theme="shadows"] .profile-title {
    font-size: 1.3em;
}

html[data-lw-theme="shadows"] .card-title {
    font-size: 1.2em;
}

html[data-lw-theme="shadows"] .page-head h1 {
    font-size: clamp(40px, 6vw, 64px);
    color: #f5f3ff;
    text-shadow: 0 4px 24px rgb(0 0 0 / 0.8), 0 0 28px rgb(167 139 250 / 0.35);
}

html[data-lw-theme="shadows"] .eyebrow {
    color: #c4b5fd;
}

html[data-lw-theme="shadows"] .lede {
    color: #b4b4c4;
}

/* Boxen schweben über dem Hintergrund */
html[data-lw-theme="shadows"] :is(.profile, .more, .table-wrap, .empty) {
    border: 1px solid rgb(255 255 255 / 0.06);
    box-shadow: var(--shadow);
}

html[data-lw-theme="shadows"] .profile.is-new {
    border-color: rgb(167 139 250 / 0.5);
    box-shadow: 0 0 24px -6px rgb(167 139 250 / 0.5), var(--shadow);
}

html[data-lw-theme="shadows"] .profile-title {
    color: #fbbf24;
}

html[data-lw-theme="shadows"] .tile.is-heard {
    background: #20202a;
}

html[data-lw-theme="shadows"] .tile.is-last {
    border-color: #a78bfa;
    box-shadow: 0 0 0 2px #a78bfa, 0 0 18px rgb(167 139 250 / 0.35);
}

/* Kartentypen dunkel eingefärbt, ohne Muster */
html[data-lw-theme="shadows"] .type-lecture { --type: #c4b5fd; --type-soft: rgb(167 139 250 / 0.16); --type-line: #3b3357; --type-bg: #1b1827; }
html[data-lw-theme="shadows"] .type-exercise { --type: #fda4af; --type-soft: rgb(253 164 175 / 0.14); --type-line: #4a2c33; --type-bg: #1e171b; }
html[data-lw-theme="shadows"] .type-test { --type: #67e8f9; --type-soft: rgb(103 232 249 / 0.12); --type-line: #1d4650; --type-bg: #141c21; }
html[data-lw-theme="shadows"] .type-tool { --type: #d4d4dc; --type-soft: rgb(212 212 220 / 0.1); --type-line: #33333f; --type-bg: #1a1a22; }
html[data-lw-theme="shadows"] .type-sandbox { --type: #bef264; --type-soft: rgb(132 204 22 / 0.18); --type-line: #3f5a1a; --type-bg: #171e10; }

html[data-lw-theme="shadows"] .card {
    border-color: rgb(255 255 255 / 0.06);
    background-image: none;
    box-shadow: var(--shadow);
}

html[data-lw-theme="shadows"] .card:hover {
    border-color: var(--type-line);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 30px 56px -16px rgb(0 0 0 / 0.95), 0 0 28px -8px var(--type);
}

html[data-lw-theme="shadows"] .card.type-sandbox :is(.card-desc, .feature-none) {
    color: #a7b894;
}

html[data-lw-theme="shadows"] .card.type-sandbox :is(.card-flag, .feature, .reason) {
    color: #bef264;
}

html[data-lw-theme="shadows"] .card.type-sandbox .dot:not(.on) {
    background: #3f5a1a;
}

html[data-lw-theme="shadows"] .card.type-sandbox .dot.on {
    background: var(--ink);
}

html[data-lw-theme="shadows"] .card.type-sandbox .type-badge {
    border-color: var(--type-line);
    background: var(--type-soft);
}

html[data-lw-theme="shadows"] .card.type-sandbox .done-btn {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--muted);
}

html[data-lw-theme="shadows"] .card.type-sandbox:hover .card-title a {
    color: var(--type);
}

html[data-lw-theme="shadows"] .card-media {
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.8);
}

html[data-lw-theme="shadows"] .card.is-done .card-media::after {
    background: #101015;
}

/* .step davor: schlägt die gemeinsame Regel für dunkle Themes oben */
html[data-lw-theme="shadows"] .step .step-no {
    background: #a78bfa;
    box-shadow: 0 0 16px rgb(167 139 250 / 0.5);
}

html[data-lw-theme="shadows"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary, .badge) {
    border-color: #a78bfa;
    background: #a78bfa;
    color: #160e2b;
    box-shadow: 0 4px 14px -4px rgb(167 139 250 / 0.6);
}

html[data-lw-theme="shadows"] .switch input:checked+.switch-track {
    background: #a78bfa;
}

html[data-lw-theme="shadows"] :is(.search, .stepper select) {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45);
}

@media (max-width: 600px) {
    html[data-lw-theme="shadows"] .page-head {
        background:
            radial-gradient(ellipse 120% 90% at 50% 30%, transparent 40%, rgb(16 16 21 / 0.7)),
            linear-gradient(rgb(16 16 21 / 0.35), rgb(16 16 21 / 0.35) 180px, rgb(16 16 21 / 0.92) 270px, #101015 420px),
            var(--lw-banner) 6% top / auto 420px no-repeat,
            #2b2145;
        background-blend-mode: normal, normal, luminosity, normal;
    }
}


/* ============================================================================
   Koralle – warm, im Stil des GdI-Zeitplans. Das Banner läuft unter dem Logo in einen
   Korallen-Verlauf mit feinem Raster aus (wie im GdI-Zeitplan), darauf steht der Titel in Weiß.
   Schrift auf Weiß nutzt das dunklere #c9401f (WCAG AA). Der Verlauf im Kopf ist heller: kleine weiße
   Schrift darauf erreicht nur etwa 3:1.
   ============================================================================ */

html[data-lw-theme="koralle"] {
    --bg: #faf7f5;
    --surface: #ffffff;
    --surface-2: #fbf8f6;
    --ink: #1c1917;
    --ink-2: #44403c;
    --muted: #6f6863; /* WCAG AA: >= 4.5:1 */
    --line: #ece7e3;
    --line-strong: #dcd2cb;
    --accent: #c9401f;
    --accent-soft: #fff1ec;
    --radius-lg: 18px;
    --radius: 12px;
    --shadow: 0 1px 2px rgb(28 25 23 / 0.06), 0 0 0 1px #ece7e3;
    --lw-accent: #c9401f;
    /* Verlauf wie im Kopf des GdI-Zeitplans */
    --lw-koralle-hero:
        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);
    --lw-koralle-grid:
        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;
}

/* Banner nur mit CSS, aus demselben Bild (gleiche Lage über --lw-koralle-pos):
   Schwarzweiß, mehr Kontrast (das Bild ein zweites Mal per overlay) und etwas aufgehellt (screen).
   Unter dem Logo eine klare Kante: darunter wird das Foto unscharf und schwarzweiß, darüber liegt der
   Korallen-Verlauf des GdI-Zeitplans (multipliziert, mit Lichtfleck oben rechts und Raster). */
html[data-lw-theme="koralle"] .page-head {
    --lw-koralle-break: calc(31.25cqw - var(--crop));
    --lw-koralle-pos: center calc(-1 * var(--crop)) / 100% auto;
    --lw-koralle-fade: linear-gradient(transparent calc(var(--img-bottom) - 120px), #8c8c8c var(--img-bottom));
    position: relative;
    isolation: isolate;
    background:
        var(--lw-koralle-fade),
        linear-gradient(#2e2e2e, #2e2e2e),
        linear-gradient(#ececec, #ececec),
        var(--lw-banner) var(--lw-koralle-pos) no-repeat,
        var(--lw-banner) var(--lw-koralle-pos) no-repeat,
        #ececec;
    /* aufhellen, entsättigen, Kontrast, Helligkeit des Fotos. Für luminosity/saturation genügt irgendein
       Grau; ein helles, damit an den Ecken kein dunkler Saum durchscheint */
    background-blend-mode: normal, screen, saturation, overlay, luminosity, normal;
    /* Rundung per clip-path statt border-radius: so wird die Kante erst nach dem Mischen aller Ebenen einmal
       geglättet. Mit border-radius glätten Safari und Chrome jede Ebene einzeln, dann bleibt ein grauer Saum.
       (clip-path schneidet auch Schatten ab, darum hat dieses Banner keinen.) */
    border-radius: 0;
    clip-path: inset(0 round var(--radius-lg));
}

html[data-lw-theme="koralle"] .page-head::before,
html[data-lw-theme="koralle"] .page-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--lw-koralle-break);
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

/* das Foto dahinter unscharf und schwarzweiß */
html[data-lw-theme="koralle"] .page-head::before {
    -webkit-backdrop-filter: blur(16px) grayscale(1);
    backdrop-filter: blur(16px) grayscale(1);
}

/* darüber der Verlauf des Zeitplans, mit dem Foto multipliziert: auf der hellen Wand bleibt er unverändert,
   dunklere Bildteile scheinen als weiche Schatten durch */
html[data-lw-theme="koralle"] .page-head::after {
    border-top: 1px solid rgb(255 255 255 / 0.5);
    background: var(--lw-koralle-hero);
    mix-blend-mode: multiply;
}

html[data-lw-theme="koralle"] .hero-text {
    text-shadow: 0 1px 2px rgb(120 30 10 / 0.25);
}

/* "Einklappen" als Knopf mit Pfeil (der ganze Kopf ist der eigentliche Knopf) */
html[data-lw-theme="koralle"] .profile-head-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 16px;
    border: 1.5px solid #c9401f;
    background: #fff;
    color: #c9401f;
    box-shadow: 0 2px 6px -2px rgb(201 64 31 / 0.35);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

html[data-lw-theme="koralle"] .profile-head-action::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.2s;
}

html[data-lw-theme="koralle"] .profile-head[aria-expanded="false"] .profile-head-action::after {
    margin-top: -4px;
    transform: rotate(45deg);
}

html[data-lw-theme="koralle"] .profile-head:hover .profile-head-action,
html[data-lw-theme="koralle"] .profile-head:focus-visible .profile-head-action {
    background: #c9401f;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgb(201 64 31 / 0.6);
}

html[data-lw-theme="koralle"] .hero-text {
    z-index: 1;
}

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

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

html[data-lw-theme="koralle"] .page-head h1 {
    color: #fff;
    font-size: clamp(32px, 4.6vw, 48px);
}

html[data-lw-theme="koralle"] .lede {
    color: rgb(255 255 255 / 0.92);
}

html[data-lw-theme="koralle"] .map-link {
    border-color: transparent;
    background: #fff;
    color: #9a2f16;
    box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.5);
}

/* Boxen: weiß, ohne Rahmen, Titel als Code-Kommentar */
html[data-lw-theme="koralle"] :is(.profile, .more, .table-wrap) {
    border: none;
    box-shadow: var(--shadow);
}

html[data-lw-theme="koralle"] .profile.is-new {
    box-shadow: 0 0 0 3px #f6c8b8, var(--shadow);
}

html[data-lw-theme="koralle"] .profile-title::before {
    content: "// ";
    color: #ec5f3d;
    font-family: var(--lw-mono);
    font-weight: 600;
}

/* Schritte als große Ziffern mit Kontur wie die Wochennummern im GdI-Zeitplan */
html[data-lw-theme="koralle"] .step-no {
    width: auto;
    min-width: 28px;
    height: auto;
    border-radius: 0;
    background: linear-gradient(180deg, transparent 55%, #fff1ec 55%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.5px #ec5f3d;
    font: 800 40px/0.9 "Avenir Next", "Segoe UI Variable Display", var(--lw-font, system-ui);
    letter-spacing: -0.04em;
}

/* Kapitelnummern in den Gruppenköpfen ebenso */
html[data-lw-theme="koralle"] .group-title {
    align-items: baseline;
}

html[data-lw-theme="koralle"] .group-no {
    background: linear-gradient(180deg, transparent 55%, #fff1ec 55%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.3px #ec5f3d;
    font: 800 40px/0.9 "Avenir Next", "Segoe UI Variable Display", var(--lw-font, system-ui);
    letter-spacing: -0.04em;
}

html[data-lw-theme="koralle"] .tile.is-last {
    border-color: #c9401f;
    box-shadow: 0 0 0 3px #f6c8b8;
}

/* Umschalter als Pillen, ausgewählt in Koralle */
html[data-lw-theme="koralle"] :is(.scope, .seg) {
    border: none;
    border-radius: 999px;
    background: #f3eeea;
}

html[data-lw-theme="koralle"] :is(.scope-btn, .seg button) {
    border-radius: 999px;
}

html[data-lw-theme="koralle"] :is(.scope-btn[aria-checked="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"], .btn-primary, .badge) {
    border-color: #c9401f;
    background: #c9401f;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgb(201 64 31 / 0.55);
}

html[data-lw-theme="koralle"] .scope-btn[aria-checked="true"] .count {
    background: rgb(255 255 255 / 0.22);
    color: #fff;
}

html[data-lw-theme="koralle"] .switch input:checked+.switch-track {
    background: #c9401f;
}

html[data-lw-theme="koralle"] :is(.search, .more-btn, .select, .stepper select, .stepper-btn, .btn, .chip) {
    border-radius: 999px;
}

/* Übungskarten: weiß, beim Überfahren angehoben mit Korallen-Kante unten */
html[data-lw-theme="koralle"] .card {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.25s, transform 0.25s;
}

html[data-lw-theme="koralle"] .card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 -3px 0 #ec5f3d, 0 14px 30px -10px rgb(194 65 12 / 0.35), 0 0 0 1px #f6c8b8;
}

html[data-lw-theme="koralle"] .card-title a::after {
    border-radius: 16px;
}

html[data-lw-theme="koralle"] .card-media {
    border-radius: 12px;
}

html[data-lw-theme="koralle"] .type-badge {
    border: none;
}

html[data-lw-theme="koralle"] .group-head {
    font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
    html[data-lw-theme="koralle"] .card:hover {
        transform: none;
    }
}

@media (max-width: 600px) {
    html[data-lw-theme="koralle"] .page-head {
        --lw-koralle-break: 233px;
        --lw-koralle-pos: 6% top / auto 420px;
        --lw-koralle-fade: linear-gradient(transparent 300px, #8c8c8c 420px);
    }
}