/* ---------------------------------------------------------------------------
   Lernwelt (/app/welt) — Karten-Darstellungsmodus, Admin-Experiment.

   Bewusst eine eigene Datei statt eines Anbaus an style.css: style.css wird
   ohne ?v=-Parameter ausgeliefert, ein Rollout hinge damit am Browser-Cache.

   Die Lernwelt ist dunkel, unabhängig vom App-Theme (default/minimal/glass) —
   sie erzwingt aber NICHT setTheme('glass'), das würde localStorage
   ['mindmap-theme'] überschreiben und das Theme der Mindmap hinter dem Rücken
   des Nutzers ändern. Deshalb definiert #lernwelt seine Tokens selbst.

   Die Werte spiegeln body.glass-theme (style.css ~10804) und
   body.glass-theme .mm-node (~11001) — bei Änderungen dort hier mitziehen.
   --------------------------------------------------------------------------- */

#lernwelt {
    --lw-card-bg: rgba(255, 255, 255, 0.045);
    --lw-card-bg-hover: rgba(255, 255, 255, 0.075);
    --lw-border: rgba(255, 255, 255, 0.12);
    --lw-border-hover: rgba(255, 255, 255, 0.22);
    --lw-blur: blur(14px) saturate(150%);
    --lw-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --lw-text: #ffffff;
    --lw-text-dim: rgba(255, 255, 255, 0.62);
    --lw-accent: #a78bfa;
    --lw-pad: clamp(18px, 4vw, 56px);
    --lw-top: 96px;
    /* Beginnt unter dem fixierten .site-header (top 16px + 70px hoch) —
       dadurch klebt die Kopfzeile unten sauber am oberen Rand der Fläche. */

    position: fixed;
    top: var(--lw-top);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    /* display wird von lernwelt.js auf block gesetzt */
    /* Transparent statt einer eigenen Fläche: dahinter liegt (z-index 0)
       dasselbe Farbfeld wie im Dark Mode der Mindmap — vier weiche, farbige
       Kreise plus eine der Maus folgende Lichtkugel (.bg-field/#bgOrbCursor,
       style.css ~10885; sichtbar geschaltet über body.lernwelt-active dort).
       initCursorGlow() in app.js bewegt die Lichtkugel bereits unabhängig
       vom Modus, hier ist also nichts weiter zu verdrahten. */
    background: transparent;
    color: var(--lw-text);
    font-family: var(--font-family);
    overflow: hidden;
}

/* Das Dock gehört zur Mindmap-Oberfläche (Theme-Schalter, Optionen) und hat
   z-index 2000 — es läge sonst über der Lernwelt. */
body.lernwelt-active .bottom-right-dock {
    display: none !important;
}

/* ===========================================================================
   Bühne
   =========================================================================== */
.lw-stage {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px var(--lw-pad) 110px;
    scrollbar-width: thin;
}

/* ===========================================================================
   Kopfzeile — ohne eigene Leiste: Überschrift und Knöpfe stehen direkt auf
   dem Farbfeld. Deshalb auch nicht klebend, sonst schöbe sich der Inhalt
   beim Scrollen sichtbar darunter hindurch.
   =========================================================================== */
.lw-head {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    max-width: 1280px;
    margin: 0 auto 30px;
}

.lw-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lw-head-nav,
.lw-head-actions {
    flex: 0 0 auto;
}

.lw-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -0.022em;
    margin: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lw-title.is-long {
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
}

/* ---- Zurück / Vor ---- */
.lw-head-nav {
    display: flex;
    gap: 8px;
}

.lw-nav-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--lw-border);
    border-radius: 50%;
    background: var(--lw-card-bg);
    -webkit-backdrop-filter: var(--lw-blur);
    backdrop-filter: var(--lw-blur);
    color: var(--lw-text);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.lw-nav-btn:hover:not(:disabled) {
    background: var(--lw-card-bg-hover);
    border-color: var(--lw-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 0 16px rgba(167, 139, 250, 0.35);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--lw-accent) 45%, transparent),
        0 0 16px color-mix(in srgb, var(--lw-accent) 35%, transparent);
}

.lw-nav-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.lw-nav-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* Pfeil aus zwei Rändern statt einer SVG-Datei — kein Asset, kein Ladepfad. */
.lw-nav-arrow {
    width: 10px;
    height: 10px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 3px;
}

.lw-nav-btn.is-fwd .lw-nav-arrow {
    transform: rotate(-135deg);
    margin-left: -3px;
}

/* ---- Lernmodus-Schalter ---- */
.lw-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.lw-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lw-switch-track {
    position: relative;
    width: 48px;
    height: 27px;
    flex: 0 0 auto;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.lw-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.28s ease, box-shadow 0.28s ease;
}

.lw-switch-label {
    font-family: var(--font-family);
    font-size: 0.84rem;
    color: var(--lw-text-dim);
    transition: color 0.25s ease;
}

.lw-switch.is-on .lw-switch-track {
    background: rgba(167, 139, 250, 0.4);
    background: color-mix(in srgb, var(--lw-accent) 40%, transparent);
    border-color: rgba(167, 139, 250, 0.7);
    border-color: color-mix(in srgb, var(--lw-accent) 70%, transparent);
    animation: lwSwitchGlow 2.8s ease-in-out infinite;
}

.lw-switch.is-on .lw-switch-knob {
    transform: translateX(21px);
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
}

.lw-switch.is-on .lw-switch-label {
    color: var(--lw-text);
}

.lw-switch:hover .lw-switch-track {
    border-color: var(--lw-border-hover);
}

.lw-switch-input:focus-visible+.lw-switch-track {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* Ruhiges Atmen statt Blinken: der Schalter soll den aktiven Lernmodus
   signalisieren, ohne beim Lesen zu stören. */
@keyframes lwSwitchGlow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(167, 139, 250, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.12);
        box-shadow:
            0 0 12px color-mix(in srgb, var(--lw-accent) 40%, transparent),
            inset 0 0 8px rgba(255, 255, 255, 0.12);
    }

    50% {
        box-shadow: 0 0 22px rgba(167, 139, 250, 0.65), inset 0 0 11px rgba(255, 255, 255, 0.2);
        box-shadow:
            0 0 22px color-mix(in srgb, var(--lw-accent) 65%, transparent),
            inset 0 0 11px rgba(255, 255, 255, 0.2);
    }
}

/* ===========================================================================
   Raster
   =========================================================================== */
.lw-grid.is-maps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

/* Lerninhalte als Raster — die Karten sollen als Felder wahrgenommen werden,
   nicht als lange Scroll-Liste. Die Baumreihenfolge bleibt erhalten (links
   nach rechts, dann abwärts); "dense" füllt Lücken, die unterschiedlich hohe
   Karten sonst hinterlassen. */
.lw-grid.is-learn {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(16px, 1.6vw, 22px);
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
    grid-auto-flow: row dense;
}

/* ===========================================================================
   Karten
   =========================================================================== */
.lw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border: 1px solid var(--lw-border);
    border-radius: 20px;
    background: var(--lw-card-bg);
    -webkit-backdrop-filter: var(--lw-blur);
    backdrop-filter: var(--lw-blur);
    box-shadow: var(--lw-shadow);
    color: var(--lw-text);
    /* KEIN overflow:hidden — der Halo des Laser-Umlaufs (stroke-width 18)
       steht bewusst über den Rand hinaus, genau wie an .mm-node in der
       Mindmap. Abgeschnitten wirkte der Glow nur halb so kräftig. */
    overflow: visible;
    isolation: isolate;
    transition: background 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lw-card.is-schema {
    --lw-accent: #a78bfa;
}

.lw-card.is-definition {
    --lw-accent: #60a5fa;
}

.lw-card[role="button"] {
    cursor: pointer;
}

@keyframes lwCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lw-grid .lw-card {
    animation: lwCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--lw-enter, 0) * 30ms);
}

/* Hover-Spotlight. --mx/--my liefert initCursorGlow() in app.js (der Selektor
   dort umfasst .lw-card). Gilt für JEDE Karte — Schema- und Definitionskarten
   sind keine Schaltflächen, hingen bei einer [role=button]-Bedingung also
   dauerhaft im Ruhezustand fest. Nur für echte Zeigergeräte: auf Touch bliebe
   :hover nach dem Tippen hängen. */
@media (hover: hover) {
    .lw-card::after {
        content: '';
        position: absolute;
        inset: 0;
        /* Ohne overflow:hidden am Elternteil muss die Rundung hier stehen,
           sonst leuchtet der Spotlight über die abgerundeten Ecken hinaus. */
        border-radius: inherit;
        z-index: -1;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                rgba(167, 139, 250, 0.3) 0%, rgba(167, 139, 250, 0.14) 34%, transparent 76%);
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in srgb, var(--lw-accent) 38%, transparent) 0%,
                color-mix(in srgb, var(--lw-accent) 18%, transparent) 34%,
                transparent 76%);
    }

    .lw-card:hover::after {
        opacity: 1;
    }

    .lw-card:hover {
        border-color: var(--lw-border-hover);
    }

    /* Anheben nur bei anklickbaren Karten — eine Schema-Karte, die man liest,
       soll beim Überfahren nicht wandern. */
    .lw-card[role="button"]:hover {
        background: var(--lw-card-bg-hover);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        transform: translateY(-3px) scale(1.012);
    }
}

/* Auswahl-/Hervorhebungs-Glow: gestapelte box-shadows wie bei .mm-node.selected.
   NIE filter: drop-shadow — das rastert jedes Element einzeln und kostet beim
   Scrollen die Framerate (Begründung in style.css bei den Verbindungslinien). */
.lw-card.is-highlight,
.lw-card[role="button"]:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.55), 0 0 14px rgba(99, 102, 241, 0.3), var(--lw-shadow);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--lw-accent) 55%, transparent),
        0 0 8px color-mix(in srgb, var(--lw-accent) 45%, transparent),
        0 0 18px color-mix(in srgb, var(--lw-accent) 22%, transparent),
        var(--lw-shadow);
}

.lw-card[role="button"]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -4px;
}

/* Während der Laser läuft: derselbe Auswahl-Glow, den .mm-node.selected in
   der Mindmap trägt (style.css ~11201) — dort gehören Umlauf und Glow
   zusammen, weil selectNode() beides gleichzeitig auslöst. */
.lw-card.is-tracing {
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.55), 0 0 14px rgba(99, 102, 241, 0.3), var(--lw-shadow);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--lw-accent) 55%, transparent),
        0 0 8px color-mix(in srgb, var(--lw-accent) 45%, transparent),
        0 0 18px color-mix(in srgb, var(--lw-accent) 22%, transparent),
        var(--lw-shadow);
}

/* Vollständig aufgedeckt: bleibt sichtbar markiert, nachdem der Laser-Umlauf
   (playSelectTrace) durchgelaufen ist. */
.lw-card.is-complete {
    border-color: rgba(167, 139, 250, 0.5);
    border-color: color-mix(in srgb, var(--lw-accent) 50%, transparent);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.16), var(--lw-shadow);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--lw-accent) 16%, transparent),
        var(--lw-shadow);
}

/* ---- Kopfbereich der Karte ----
   Icon und Text stehen als zwei Flex-Spalten nebeneinander statt das Icon
   absolut zu setzen: lange Überschriften laufen dadurch in ihrer eigenen
   Spalte um, können das Icon nicht überdecken und verschwinden nicht unter
   dem Kartenrand. min-width:0 ist Pflicht — sonst schrumpft die Textspalte
   nicht unter ihre Inhaltsbreite. */
.lw-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.lw-card-head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lw-card-icon {
    flex: 0 0 auto;
    width: clamp(34px, 3vw, 48px);
    aspect-ratio: 1;
    background-color: #fff;
    opacity: 0.92;
    pointer-events: none;
    /* Beide Präfixe: ältere Safari-Versionen kennen mask-image nur mit -webkit-. */
    -webkit-mask-image: var(--lw-icon);
    mask-image: var(--lw-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lw-card:hover .lw-card-icon {
    opacity: 1;
    transform: scale(1.06) rotate(-2deg);
}

/* ---- Typografie: Display groß für Titel, Text für alles Kleine ---- */
.lw-card-title,
.lw-def-term {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.022em;
    margin: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    /* Harter Riegel für Ausreißer; der volle Text steht im title-Attribut. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lw-card-title {
    font-size: clamp(1.22rem, 1.02rem + 0.85vw, 1.9rem);
}

.lw-def-term {
    font-size: clamp(1.3rem, 1.08rem + 1vw, 2.1rem);
}

.lw-card-title.is-long,
.lw-def-term.is-long {
    font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.32rem);
    line-height: 1.24;
}

.lw-card-sub,
.lw-meta,
.lw-item,
.lw-def-body,
.lw-eyebrow {
    font-family: var(--font-family);
}

.lw-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--lw-text-dim);
}

.lw-eyebrow.is-def {
    color: #60a5fa;
}

.lw-card-sub {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--lw-text-dim);
    margin: 0;
}

.lw-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lw-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--lw-text-dim);
}

.lw-meta.is-status {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lw-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.lw-dot.is-green {
    background: #34d399;
    box-shadow: 0 0 9px rgba(52, 211, 153, 0.7);
}

.lw-dot.is-yellow {
    background: #fbbf24;
    box-shadow: 0 0 9px rgba(251, 191, 36, 0.7);
}

.lw-dot.is-red {
    background: #fb7185;
    box-shadow: 0 0 9px rgba(251, 113, 133, 0.7);
}

/* ---- Fortschrittsring (Serie 0–3) ---- */
.lw-ring {
    position: absolute;
    bottom: 18px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(var(--lw-accent) var(--lw-progress, 0%), rgba(255, 255, 255, 0.1) 0);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
    mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.lw-ring.is-done {
    background: conic-gradient(#34d399 100%, #34d399 0);
}

/* ===========================================================================
   Kacheln der Rechtsgebiete — undurchsichtig: sie stehen VOR dem Farbfeld,
   statt darin zu schweben. Deshalb kein backdrop-filter und eine deckende
   Fläche, die etwas heller ist als der Hintergrund (#0d0815).
   =========================================================================== */
.lw-card.is-map {
    /* Hier bleibt das Clipping: das Hintergrundmotiv füllt die ganze Kachel. */
    overflow: hidden;
    min-height: 172px;
    justify-content: flex-end;
    background: #171227;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

@media (hover: hover) {
    .lw-card.is-map:hover {
        background: #1e1833;
    }
}

.lw-card.is-map.is-locked {
    opacity: 0.55;
}

.lw-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.34;
    z-index: -1;
    /* Der Titel muss auf dem Bild lesbar bleiben. */
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 76%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 76%);
}

/* ===========================================================================
   Schema- und Definitionsinhalt
   =========================================================================== */
.lw-schema-list {
    list-style: none;
    counter-reset: lwstep;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lw-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.95rem;
    line-height: 1.5;
    counter-increment: lwstep;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.lw-item::before {
    content: counter(lwstep);
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lw-text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lw-item-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

#lernwelt:not(.lw-learning-off) .lw-item[role="button"]:hover,
#lernwelt:not(.lw-learning-off) .lw-def-body[role="button"]:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.lw-item[role="button"]:focus-visible,
.lw-def-body[role="button"]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -2px;
}

.lw-def-body {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-wrap: anywhere;
}

/* ---- Lernmodus: Blur zum Aufdecken ----
   Werte identisch zu style.css (.mm-node.learning-child) — der Lernmodus soll
   sich in beiden Ansichten gleich anfühlen. Geschaltet wird er über
   #lernwelt.lw-learning-off, NICHT über die globale Body-Klasse: der Schalter
   der Lernwelt darf das Verhalten der Mindmap nicht verändern.
   Bei Schema-Punkten bleibt die Schrittnummer scharf und nur der Inhalt wird
   unscharf — wie in der Mindmap, wo .node-text verdeckt wird, nicht der ganze
   Knoten. */
/* Auch aufgedeckt klickbar: ein erneuter Klick verdeckt den Inhalt wieder. */
#lernwelt:not(.lw-learning-off) .lw-hidden {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

#lernwelt:not(.lw-learning-off) .lw-item.lw-hidden:not(.lw-revealed) .lw-item-text,
#lernwelt:not(.lw-learning-off) .lw-def-body.lw-hidden:not(.lw-revealed) {
    filter: blur(8px);
    opacity: 0.6;
}

#lernwelt:not(.lw-learning-off) .lw-item.lw-hidden:not(.lw-revealed) .lw-item-text>*,
#lernwelt:not(.lw-learning-off) .lw-def-body.lw-hidden:not(.lw-revealed)>* {
    pointer-events: none;
}

.lw-item-text,
.lw-def-body {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Aufdeck-Pop: nutzt die global definierten Keyframes revealPop/revealSheen
   aus style.css — dort sind nur die Trägerregeln auf .mm-node gescoped. */
#lernwelt .just-revealed {
    animation: revealPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lernwelt .just-revealed::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 50%, transparent 68%);
    background-size: 250% 100%;
    animation: revealSheen 0.6s ease-out forwards;
}

/* ===========================================================================
   "… gewusst?"-Abfrage
   =========================================================================== */
.lw-quiz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
    padding: 8px 11px;
    border: 1px solid rgba(167, 139, 250, 0.4);
    border: 1px solid color-mix(in srgb, var(--lw-accent) 40%, transparent);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.2);
    box-shadow: 0 0 18px color-mix(in srgb, var(--lw-accent) 20%, transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.lw-quiz.is-visible {
    opacity: 1;
    transform: none;
}

.lw-quiz.is-answered {
    opacity: 0;
    transform: translateY(-6px);
}

.lw-quiz-q {
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.86rem;
}

.lw-quiz-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.lw-quiz-btn {
    -webkit-appearance: none;
    appearance: none;
    padding: 4px 14px;
    border-radius: 8px;
    border: 1px solid var(--lw-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--lw-text);
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lw-quiz-btn.is-yes:hover {
    background: rgba(52, 211, 153, 0.22);
    border-color: rgba(52, 211, 153, 0.6);
}

.lw-quiz-btn.is-no:hover {
    background: rgba(251, 113, 133, 0.22);
    border-color: rgba(251, 113, 133, 0.6);
}

.lw-quiz-hint {
    flex-basis: 100%;
    font-size: 0.66rem;
    color: var(--lw-text-dim);
}

@keyframes lwFxYes {
    50% {
        box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.6), 0 0 26px rgba(52, 211, 153, 0.4), var(--lw-shadow);
    }
}

@keyframes lwFxNo {

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

.lw-card.lw-fx-yes {
    animation: lwFxYes 0.7s ease-out;
}

.lw-card.lw-fx-no {
    animation: lwFxNo 0.45s ease-in-out;
}

/* ===========================================================================
   Laser-Umlauf beim vollständigen Aufdecken (playSelectTrace aus app.js).
   Die Regeln in style.css sind auf body.glass-theme .mm-node gescoped —
   hier dieselben Werte für die Karten. Reines CSS, keine doppelte Logik.
   =========================================================================== */
#lernwelt .lw-card .node-trace {
    position: absolute;
    top: -1px;
    left: -1px;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
    fill: none;
    animation: nodeTraceFade 0.35s ease-in 0.5s both;
}

#lernwelt .lw-card .node-trace path {
    stroke-linecap: round;
    stroke-dasharray: 100 200;
    stroke-dashoffset: 102;
    animation: nodeTraceDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Strichstärken leicht über style.css (9 / 4 / 1,6): um eine große Karte
   wirkt derselbe absolute Wert zarter als um einen Mindmap-Knoten. 18/8/3
   war dagegen zu breit und zu hell — das hier liegt knapp darüber. */
#lernwelt .lw-card .node-trace-halo {
    display: inline;
    stroke-width: 11;
    stroke-opacity: 0.22;
}

#lernwelt .lw-card .node-trace-glow {
    display: inline;
    stroke-width: 4.5;
    stroke-opacity: 0.5;
}

#lernwelt .lw-card .node-trace-core {
    stroke: #fff;
    stroke-width: 1.8;
}

/* ===========================================================================
   Zustände: Laden, leer
   =========================================================================== */
.lw-loading,
.lw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 20px;
    text-align: center;
    color: var(--lw-text-dim);
}

.lw-empty h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--lw-text);
    margin: 0;
}

.lw-empty p,
.lw-loading p {
    margin: 0;
    font-size: 0.9rem;
}

.lw-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--lw-accent);
    animation: lwSpin 0.8s linear infinite;
}

@keyframes lwSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 900px) {
    #lernwelt {
        --lw-top: 88px;
    }

    .lw-head {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .lw-head-main {
        order: 3;
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .lw-grid.is-maps {
        grid-template-columns: 1fr;
    }

    .lw-card {
        padding: 18px 18px;
    }

    .lw-nav-btn {
        width: 40px;
        height: 40px;
    }
}

/* ===========================================================================
   Bewegung reduzieren
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {

    #lernwelt *,
    #lernwelt *::before,
    #lernwelt *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .lw-card[role="button"]:hover {
        transform: none;
    }
}