/* Roadmap-Viewer (viewers/roadmap.js). Nutzt Tokens aus base.css und portal.css; Präfix lp-rm-. */
.lp-rm {
  --rm-d1: #6a5acd; --rm-d2: #c46a1a; --rm-d3: #b23b3b;
  --rm-rail: 15px; --rm-indent: 38px;
  --rm-card: var(--bg-elev);
  --rm-soft: color-mix(in srgb, var(--fg) 4%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-rm { --rm-d1: #a99bf0; --rm-d2: #e6a15e; --rm-d3: #e57d7d; --rm-card: #232328; }
}
:root[data-theme="dark"] .lp-rm { --rm-d1: #a99bf0; --rm-d2: #e6a15e; --rm-d3: #e57d7d; --rm-card: #232328; }

.lp-rm-scroll { flex: 1; min-height: 0; overflow: auto; container: lp-rm / inline-size; }
.lp-rm-page { max-width: 880px; margin: 0 auto; padding: 14px 22px 30vh; display: flex; flex-direction: column; gap: 8px; }
.lp-rm-updated { white-space: nowrap; }
.lp-rm-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.lp-rm-md > :first-child { margin-top: 0; } .lp-rm-md > :last-child { margin-bottom: 0; }
.lp-rm-md p { margin: .35em 0; }
.lp-rm-md code { font-size: .85em; padding: .08em .3em; border-radius: 4px; background: var(--lp-chrome-2); }
.lp-rm-md.inline .katex, .lp-rm-md .katex { font-size: 1.04em; }
.lp-rm-link { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-align: left; }
.lp-rm-link:hover { text-decoration: underline; }
.lp-rm-flash { animation: lp-rm-flash 1.2s ease-out; }
@keyframes lp-rm-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ------------------------------------------------------------------ Kopf */
.lp-rm-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.lp-rm-goal { margin-top: 2px; display: flex; gap: 8px; align-items: baseline; }
.lp-rm-goal-label { flex: none; font-size: .72rem; font-weight: 600; color: var(--muted); }
.lp-rm-goal-text { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.4; font-weight: 600; color: var(--fg); }
.lp-rm-goal-text p { margin: 0; }
.lp-rm-goal-text code { font-size: .78em; font-weight: 500; vertical-align: .08em; }

/* Karten */
.lp-rm-card { background: var(--rm-card); border: 1px solid var(--lp-line); border-radius: 10px; padding: 8px 12px; }
.lp-rm-card-title { font-weight: 600; font-size: .92rem; }
.lp-rm-card-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.lp-rm-card-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.lp-rm-chev { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; }
.lp-rm-big.open .lp-rm-chev { transform: rotate(90deg); }

/* Großes Bild */
.lp-rm-big-body { display: grid; gap: 10px; margin-top: 10px; }
.lp-rm-big-goal { display: grid; gap: 3px; font-family: var(--font-read); font-size: 1.02rem; }
.lp-rm-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.lp-rm-chain li { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--rm-soft); font-size: .86rem; }
.lp-rm-chain li + li::before { content: "›"; position: absolute; left: -6px; transform: translateX(-50%); color: var(--muted); }
.lp-rm-chain li + li { margin-left: 10px; }
.lp-rm-chain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; flex: none; }
.lp-rm-chain li.today { background: var(--lp-here); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-here-line) 50%, transparent); font-weight: 600; }
.lp-rm-chain li.today .lp-rm-chain-dot { background: var(--lp-here-line); opacity: 1; }
.lp-rm-flows { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.lp-rm-flow { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--rm-soft); }
.lp-rm-flow ul { margin: 0; padding-left: 1.1em; font-size: .88rem; }
.lp-rm-flow li + li { margin-top: 2px; }
.lp-rm-flow-arrow { align-self: center; color: var(--muted); font-size: 1.2rem; }
.lp-rm-why { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); font-family: var(--font-read); font-size: .98rem; line-height: 1.55; }

/* Position: schlanke Leiste, bleibt beim Scrollen oben */
.lp-rm-where { position: sticky; top: 0; z-index: 5; display: grid; gap: 3px; margin: 0 -22px; padding: 6px 22px; border-bottom: 1px solid var(--lp-line); background: color-mix(in srgb, var(--lp-paper) 92%, transparent); backdrop-filter: blur(6px); }
.lp-rm-where-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lp-rm-where-top .lp-rm-crumbs { flex: 1; min-width: 0; }
.lp-rm-where-extra { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--fg); }
.lp-rm-drift { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--ok); white-space: nowrap; }
.lp-rm-drift.d1 { color: var(--rm-d1); } .lp-rm-drift.d2 { color: var(--rm-d2); } .lp-rm-drift.d3 { color: var(--rm-d3); }
.lp-rm-drift-bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.lp-rm-drift-bars i { width: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); }
.lp-rm-drift-bars i:nth-child(1) { height: 6px; } .lp-rm-drift-bars i:nth-child(2) { height: 9px; } .lp-rm-drift-bars i:nth-child(3) { height: 12px; }
.lp-rm-drift-bars i.on { background: currentColor; }
.lp-rm-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 0; align-items: center; font-size: .8rem; }
.lp-rm-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.lp-rm-crumbs li + li::before { content: "›"; margin: 0 4px; color: var(--muted); }
.lp-rm-crumbs li.branch::before { content: "↳"; }
.lp-rm-crumbs li.goal span { padding: 3px 9px; border-radius: 999px; background: var(--rm-soft); color: var(--muted); font-weight: 600; }
.lp-rm-crumbs button { display: inline-flex; gap: 5px; align-items: baseline; max-width: 220px; padding: 1px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-rm-crumbs button .lp-rm-md { overflow: hidden; text-overflow: ellipsis; }
.lp-rm-crumbs button:hover { border-color: var(--accent); }
.lp-rm-crumbs b { font-family: var(--mono); font-size: .9em; }
.lp-rm-crumbs li.d1 button { border-color: color-mix(in srgb, var(--rm-d1) 55%, transparent); color: var(--rm-d1); }
.lp-rm-crumbs li.d2 button { border-color: color-mix(in srgb, var(--rm-d2) 55%, transparent); color: var(--rm-d2); }
.lp-rm-crumbs li.d3 button { border-color: color-mix(in srgb, var(--rm-d3) 55%, transparent); color: var(--rm-d3); }
.lp-rm-crumbs li.cur button { background: var(--lp-here); border-color: var(--lp-here-line); color: var(--fg); font-weight: 600; max-width: 320px; }
.lp-rm-where-ref, .lp-rm-where-back { line-height: 1.4; }
.lp-rm-where-back b { font-family: var(--mono); font-size: .9em; }
.lp-rm-drift-hint { margin: 0; padding: 6px 10px; border-radius: 8px; color: var(--rm-d3); background: color-mix(in srgb, var(--rm-d3) 9%, transparent); }

/* Fortschritt: eine Zeile */
.lp-rm-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lp-rm-stats .lp-rm-bar { flex: 1 1 120px; max-width: 260px; margin: 0; }
.lp-rm-stats b { font-variant-numeric: tabular-nums; }
.lp-rm-stat-alert { color: var(--accent); font-weight: 600; }
.lp-rm-bar { display: flex; height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--rm-soft); gap: 2px; }
.lp-rm-bar i { display: block; min-width: 4px; flex-basis: 0; }
.lp-rm-bar i.done { background: var(--ok); }
.lp-rm-bar i.expl { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.lp-rm-bar i.prog { background: var(--lp-here-line); }
.lp-rm-bar i.rest { background: transparent; }

/* ------------------------------------------------------------------ Route */
.lp-rm-section-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--lp-line); font-weight: 700; font-size: .9rem; }
.lp-rm-tools { display: inline-flex; flex-wrap: wrap; gap: 2px; font-weight: 400; }
.lp-rm-tool { padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer; }
.lp-rm-tool:hover { border-color: var(--lp-line); color: var(--fg); }

.lp-rm-route { position: relative; padding-top: 4px; }
.lp-rm-node { position: relative; border-radius: 12px; }
.lp-rm-node-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-height: 26px; }
.lp-rm-node-title { min-width: 0; font-weight: 600; line-height: 1.35; }
.lp-rm-node-tags { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.lp-rm-id { flex: none; padding: 0 5px; border: 1px solid var(--lp-line); border-radius: 6px; background: var(--rm-soft); color: var(--muted); font: 600 .7rem var(--mono); cursor: pointer; }
.lp-rm-id:hover { color: var(--accent); border-color: var(--accent); }
.lp-rm-node-body { display: grid; gap: 5px; margin-top: 2px; }
.lp-rm-desc { font-size: .84rem; line-height: 1.45; color: color-mix(in srgb, var(--fg) 80%, var(--muted)); }
.lp-rm-desc > * + * { margin-left: 8px; }
.lp-rm-node-sum { margin-left: 8px; font-size: .76rem; font-weight: 400; }
.lp-rm-fold { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: 600 15px/1 var(--font); cursor: pointer; }
.lp-rm-fold:hover { border-color: var(--lp-line); color: var(--fg); }

/* Stationen auf der Hauptlinie */
.lp-rm-node.lvl0 { padding: 2px 0 8px var(--rm-indent); }
.lp-rm-node.lvl0::before { content: ""; position: absolute; left: calc(var(--rm-rail) - 1px); top: 20px; bottom: -2px; width: 2px; background: repeating-linear-gradient(to bottom, var(--lp-line) 0 5px, transparent 5px 9px); }
.lp-rm-node.lvl0.st-erledigt::before { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.lp-rm-node.lvl0.st-in_bearbeitung::before, .lp-rm-node.lvl0.st-erklaert::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 50%, transparent), var(--lp-line)); }
.lp-rm-route > .lp-rm-node:last-child::before { display: none; }
.lp-rm-node.lvl0 > .lp-rm-node-head .lp-rm-node-title { font-size: .98rem; }
.lp-rm-node-title { font-size: .9rem; }
.lp-rm-marker { position: absolute; display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--muted); background: var(--lp-paper); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.lp-rm-node.lvl0 > .lp-rm-node-head .lp-rm-marker { left: calc(var(--rm-rail) - 8px); top: 7px; width: 16px; height: 16px; }
.lp-rm-node.st-geplant > .lp-rm-node-head .lp-rm-marker { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.lp-rm-node.st-in_bearbeitung > .lp-rm-node-head .lp-rm-marker { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--lp-paper), inset 0 0 0 10px var(--accent); }
.lp-rm-node.st-erklaert > .lp-rm-node-head .lp-rm-marker { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 35%, var(--lp-paper)); }
.lp-rm-node.st-erledigt > .lp-rm-node-head .lp-rm-marker { border-color: var(--ok); background: var(--ok); }
.lp-rm-node.st-erledigt > .lp-rm-node-head .lp-rm-marker::after { content: "✓"; }
.lp-rm-node.st-vertagt > .lp-rm-node-head .lp-rm-marker { border-color: var(--muted); background: repeating-linear-gradient(45deg, var(--lp-line) 0 2px, var(--lp-paper) 2px 4px); }

/* Unterstationen (Voraussetzungen, Aufgaben) als Karten an der Linie */
.lp-rm-sub { display: grid; gap: 4px; margin-top: 5px; }
.lp-rm-node.lvl1:not(.branch) { padding: 4px 8px 5px 10px; border: 1px solid var(--lp-line); background: var(--rm-card); }
.lp-rm-node.lvl1:not(.branch) > .lp-rm-node-head .lp-rm-marker { left: calc(var(--rm-rail) - var(--rm-indent) - 6px); top: 11px; width: 12px; height: 12px; border-width: 2px; font-size: 8px; }
.lp-rm-node.lvl1:not(.branch) > .lp-rm-node-head .lp-rm-marker::before { content: ""; position: absolute; left: 12px; top: 4px; width: calc(var(--rm-indent) - var(--rm-rail) - 6px); height: 2px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.lp-rm-node.lvl1.st-geplant:not(.branch):not(.current) { background: transparent; border-style: dashed; }
.lp-rm-node.lvl1.st-geplant:not(.branch) .lp-rm-node-title { color: color-mix(in srgb, var(--fg) 75%, var(--muted)); }
.lp-rm-node.lvl1.art-aufgabe:not(.branch) { border-color: color-mix(in srgb, var(--accent) 40%, var(--lp-line)); }
.lp-rm-sub .lp-rm-sub { margin-left: 6px; padding-left: 12px; border-left: 2px solid var(--lp-line); }
.lp-rm-node.lvl2:not(.branch), .lp-rm-node.lvl3:not(.branch) { padding: 4px 8px; border: 1px solid var(--lp-line); background: var(--rm-card); }
.lp-rm-node.lvl2 .lp-rm-marker, .lp-rm-node.lvl3 .lp-rm-marker { display: none; }

/* Abzweige (Vertiefungen), Farbe nach Tiefe */
.lp-rm-branches { display: grid; gap: 4px; margin: 5px 0 2px 14px; }
.lp-rm-node.branch { --rm-c: var(--rm-d1); padding: 4px 8px 5px 10px; border: 1px solid color-mix(in srgb, var(--rm-c) 30%, var(--lp-line)); border-left: 3px solid var(--rm-c); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--rm-c) 6%, var(--rm-card)); }
.lp-rm-node.branch.d2 { --rm-c: var(--rm-d2); }
.lp-rm-node.branch.d3 { --rm-c: var(--rm-d3); }
.lp-rm-node.branch::before { content: ""; position: absolute; left: -16px; top: -6px; width: 13px; height: 20px; border-left: 2px solid color-mix(in srgb, var(--rm-c) 55%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--rm-c) 55%, transparent); border-bottom-left-radius: 9px; }
.lp-rm-node.branch > .lp-rm-node-head .lp-rm-marker { display: none; }
.lp-rm-node.branch > .lp-rm-node-head .lp-rm-node-title { color: var(--fg); }

/* Aktueller Punkt und Rückkehrpunkt */
.lp-rm-node.current { background: var(--lp-here) !important; border-color: var(--lp-here-line) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-here-line) 22%, transparent); }
.lp-rm-node.lvl0.current { padding-right: 8px; padding-top: 2px; }
.lp-rm-node.current > .lp-rm-node-head .lp-rm-marker { border-color: var(--lp-here-line); background: var(--lp-here-line); animation: lp-rm-pulse 2s ease-out infinite; }
@keyframes lp-rm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lp-here-line) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.lp-rm-pill.here { color: #6f5200; background: color-mix(in srgb, var(--lp-here-line) 35%, transparent); }
.lp-rm-pill.back { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-rm-pill.here { color: #f0d27a; } }
:root[data-theme="dark"] .lp-rm-pill.here { color: #f0d27a; }
.lp-rm-node.return:not(.current) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Pillen */
.lp-rm-pill { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 7px; border-radius: 999px; font-size: .68rem; font-weight: 600; white-space: nowrap; color: var(--muted); background: var(--rm-soft); }
.lp-rm-pill.st-erledigt { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.lp-rm-pill.st-erklaert { color: var(--ok); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.lp-rm-pill.st-in_bearbeitung { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.lp-rm-pill.st-geplant { background: transparent; box-shadow: inset 0 0 0 1px var(--lp-line); }
.lp-rm-pill.st-vertagt { text-decoration: line-through; }
.lp-rm-pill.art { background: transparent; box-shadow: inset 0 0 0 1px var(--lp-line); font-weight: 500; }
.lp-rm-pill.art-vertiefung { color: var(--rm-d1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-d1) 45%, transparent); }
.lp-rm-pill.art-vertiefung.d2 { color: var(--rm-d2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-d2) 45%, transparent); }
.lp-rm-pill.art-vertiefung.d3 { color: var(--rm-d3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-d3) 45%, transparent); }
.lp-rm-pill.art-aufgabe { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.lp-rm-pill.must { color: #fff; background: var(--accent); }
:root[data-theme="dark"] .lp-rm-pill.must { color: #10202e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-rm-pill.must { color: #10202e; } }
.lp-rm-pill.opt { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 55%, transparent); }
.lp-rm-pill.q-offen { color: var(--fg); }
.lp-rm-pill.q-uebersprungen { opacity: .8; }
.lp-rm-pill.wait { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lp-rm-pill.score { font-variant-numeric: tabular-nums; }
.lp-rm-pill.score.good { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.lp-rm-pill.score.mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.lp-rm-pill.score.low { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }

/* ------------------------------------------------------------------ Fragen */
.lp-rm-qs { display: grid; gap: 4px; }
.lp-rm-q { display: grid; gap: 6px; padding: 6px 10px 8px 12px; border: 1px solid var(--lp-line); border-radius: 8px; background: var(--lp-paper); position: relative; }
.lp-rm-q::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
.lp-rm-q.must::before { background: var(--accent); }
.lp-rm-q.opt::before { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--muted) 55%, transparent) 0 4px, transparent 4px 7px); }
.lp-rm-q.must.st-offen { border-color: color-mix(in srgb, var(--accent) 40%, var(--lp-line)); }
.lp-rm-q.st-uebersprungen, .lp-rm-q.later { background: transparent; }
.lp-rm-q.st-uebersprungen .lp-rm-q-text { opacity: .7; }
.lp-rm-q.pending { border-style: dashed; border-color: var(--accent); }
.lp-rm-q-head { display: flex; align-items: baseline; gap: 8px; }
.lp-rm-q-head .lp-rm-id, .lp-rm-q-head .lp-rm-pill { position: relative; top: -1px; }
.lp-rm-q-text { flex: 1; min-width: 0; font-family: var(--font-read); font-size: .93rem; line-height: 1.5; }
/* Einzeilige Fragen (später / beantwortet) */
.lp-rm-q.compact { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 12px; border-color: transparent; background: transparent; }
.lp-rm-q.compact:hover { border-color: var(--lp-line); }
.lp-rm-q.compact::before { top: 5px; bottom: 5px; }
.lp-rm-q-line { flex: 1; min-width: 0; padding: 2px 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-rm-q-line .lp-rm-q-short { white-space: nowrap; }
.lp-rm-q.compact.later .lp-rm-q-line { color: var(--muted); }
.nowrap { white-space: nowrap; }

.lp-rm-opts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lp-rm-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 8px; border: 1px solid var(--lp-line); border-radius: 8px; background: var(--rm-card); color: var(--fg); font: inherit; font-size: .93rem; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
button.lp-rm-opt:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--lp-line)); }
.lp-rm-opt-l { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--lp-line); font-weight: 700; font-size: .8rem; color: var(--muted); }
.lp-rm-opt-t { min-width: 0; line-height: 1.45; }
.lp-rm-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--rm-card)); }
.lp-rm-opt.on .lp-rm-opt-l { border-color: var(--accent); background: var(--accent); color: var(--bg-elev); }
.lp-rm-opt.none .lp-rm-opt-t { color: var(--muted); }
.lp-rm-opts.static .lp-rm-opt { cursor: default; min-height: 28px; }
.lp-rm-opt.ok.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--rm-card)); }
.lp-rm-opt.ok.on .lp-rm-opt-l { border-color: var(--ok); background: var(--ok); }
.lp-rm-opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--rm-card)); }
.lp-rm-opt.wrong .lp-rm-opt-l { border-color: var(--bad); background: var(--bad); color: var(--bg-elev); }
.lp-rm-opt.missed { border-color: var(--warn); border-style: dashed; }
.lp-rm-opt.missed .lp-rm-opt-l { border-color: var(--warn); color: var(--warn); }
.lp-rm-opt-mark { font-weight: 700; font-size: .85rem; color: var(--muted); }
.lp-rm-opt.ok .lp-rm-opt-mark { color: var(--ok); } .lp-rm-opt.wrong .lp-rm-opt-mark { color: var(--bad); } .lp-rm-opt.missed .lp-rm-opt-mark { color: var(--warn); font-size: .72rem; }

.lp-rm-form { display: grid; gap: 6px; }
.lp-rm-hint { margin: -2px 0 0; }
.lp-rm-text { width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid var(--lp-line); border-radius: 9px; background: var(--rm-card); color: var(--fg); font: .95rem/1.5 var(--font); resize: vertical; }
.lp-rm-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.lp-rm-preview { padding: 8px 11px; border-radius: 9px; background: var(--rm-soft); font-family: var(--font-read); }
.lp-rm-preview.hidden { display: none; }
.lp-rm-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp-rm-conf-scale { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.lp-rm-conf-btn { width: 24px; height: 22px; padding: 0; border: 1px solid var(--lp-line); border-radius: 6px; background: var(--rm-card); color: var(--muted); font: 600 .78rem var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.lp-rm-conf-btn:hover { border-color: var(--accent); color: var(--fg); }
.lp-rm-conf-btn.on { border-color: var(--accent); background: var(--accent); color: var(--bg-elev); }
.lp-rm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-rm-send { min-width: 84px; }
.lp-rm-send:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--fg); border-color: var(--lp-line); }
.lp-rm-kbd { margin-left: auto; }

.lp-rm-answer { display: grid; gap: 8px; }
.lp-rm-solution { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--lp-line)); border-radius: 8px; background: color-mix(in srgb, var(--ok) 6%, var(--rm-card)); }
.lp-rm-solution > .lp-rm-md { font-family: var(--font-read); font-size: .95rem; line-height: 1.55; }
.lp-rm-sol-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .9rem; }
.lp-rm-sol-verdict { margin-left: auto; font-size: .82rem; font-weight: 600; }
.lp-rm-sol-verdict.ok { color: var(--ok); } .lp-rm-sol-verdict.bad { color: var(--bad); }
.lp-rm-mine { display: grid; gap: 3px; }
.lp-rm-mine.small { display: block; }
.lp-rm-mine .lp-rm-md { font-family: var(--font-read); padding: 6px 10px; border-radius: 8px; background: var(--rm-soft); }
.lp-rm-feedback { border-top: 1px solid var(--lp-line); padding-top: 6px; }
.lp-rm-feedback summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent); list-style: none; }
.lp-rm-feedback summary::-webkit-details-marker { display: none; }
.lp-rm-feedback summary::before { content: "›"; display: inline-block; width: 12px; transition: transform .12s; }
.lp-rm-feedback[open] summary::before { transform: rotate(90deg); }
.lp-rm-feedback > .lp-rm-md { margin-top: 6px; font-family: var(--font-read); font-size: .95rem; line-height: 1.55; }
.lp-rm-skipped { display: flex; gap: 10px; align-items: baseline; }
.lp-rm-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .88rem; color: var(--accent); }
.lp-rm-pending-text { flex-basis: 100%; order: 3; padding: 5px 8px; border-radius: 6px; background: var(--rm-soft); color: var(--fg); font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
.lp-rm-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: lp-spin .9s linear infinite; }

/* Für später, Schwierigkeiten */
.lp-rm-later ul, .lp-rm-hard ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 5px; font-size: .92rem; }
.lp-rm-later li.done { text-decoration: line-through; color: var(--muted); }
.lp-rm-later-ref { margin-left: 8px; }
.lp-rm-later { border-style: dashed; background: transparent; }
.lp-rm-hard { border-color: color-mix(in srgb, var(--warn) 40%, var(--lp-line)); }

/* Rohdaten */
.lp-rm-raw pre { margin: 0; padding: 16px 20px 40vh; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.lp-rm-raw code.hljs { background: none; padding: 0; }

/* ------------------------------------------------------------------ Schmal / Handy */
@container lp-rm (max-width: 760px) {
  .lp-rm-page { padding: 10px 12px 30vh; gap: 8px; }
  .lp-rm-where { margin: 0 -12px; padding: 6px 12px; }
  .lp-rm-goal-text { font-size: 1rem; }
  .lp-rm-flows { grid-template-columns: minmax(0, 1fr); }
  .lp-rm-flow-arrow { display: none; }
  .lp-rm-card { padding: 12px; }
  .lp-rm-node.lvl0 { padding-left: 30px; }
  .lp-rm-node.lvl1:not(.branch) > .lp-rm-node-head .lp-rm-marker { left: calc(15px - 30px - 6px); }
  .lp-rm-node.lvl1:not(.branch) > .lp-rm-node-head .lp-rm-marker::before { width: 9px; }
  .lp-rm-branches { margin-left: 10px; }
  .lp-rm-node.branch::before { left: -12px; width: 9px; }
  .lp-rm-crumbs button { max-width: 230px; }
}
.lp-rm.touch .lp-rm-opt { min-height: 48px; font-size: .97rem; grid-template-columns: 30px minmax(0, 1fr) auto; }
.lp-rm.touch .lp-rm-opt-l { width: 30px; height: 30px; }
.lp-rm.touch .lp-rm-conf-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; }
.lp-rm.touch .lp-rm-conf-btn { width: auto; height: 38px; }
.lp-rm.touch .lp-rm-actions .btn { min-height: 46px; flex: 1; font-size: 1rem; }
.lp-rm.touch .lp-rm-kbd { display: none; }
.lp-rm.touch .lp-rm-text { font-size: 16px; }
.lp-rm.touch .lp-rm-fold { width: 34px; height: 34px; }
.lp-rm.touch .lp-rm-id { padding: 3px 8px; }
.lp-rm.touch .lp-rm-link { padding: 4px 0; }
@container lp-rm (max-width: 600px) {
  /* Tiefe Verschachtelung darf auf dem Handy nicht die Breite auffressen. */
  .lp-rm-branches { margin-left: 4px; }
  .lp-rm-node.branch::before { display: none; }
}
@container lp-rm (max-width: 420px) {
  .lp-rm.touch .lp-rm-conf-scale, .lp-rm-conf-scale { display: grid; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Lange Zeilen (einzeilige Fragen, KaTeX) dürfen die Spalten nicht verbreitern. */
.lp-rm-qs, .lp-rm-sub, .lp-rm-branches, .lp-rm-node-body, .lp-rm-q, .lp-rm-form { grid-template-columns: minmax(0, 1fr); }
.lp-rm-node, .lp-rm-q { min-width: 0; }

/* Positionsleiste: immer eine Zeile Pfad + eine Zeile Bezug/Rückkehr, Überlauf mit „…“ */
.lp-rm-where .lp-rm-crumbs { flex-wrap: nowrap; overflow: hidden; }
.lp-rm-where .lp-rm-crumbs li { display: flex; flex: 0 1 auto; min-width: 24px; }
.lp-rm-where .lp-rm-crumbs li.cur { flex: 0 0 auto; max-width: 60%; }
.lp-rm-where .lp-rm-crumbs li.branch::before { content: "›"; }
.lp-rm-where .lp-rm-crumbs button { max-width: 100%; min-width: 0; }
.lp-rm-where .lp-rm-crumbs li.cur button { min-width: 0; }
.lp-rm-where-extra { flex-wrap: nowrap; }
.lp-rm-where-extra > span { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-rm-where-extra .lp-rm-md.inline { white-space: nowrap; }
.lp-rm-where { grid-template-columns: minmax(0, 1fr); }
.lp-rm-where-extra > .lp-rm-where-back { flex: 0 0 auto; max-width: 45%; }