/* Wissens-Navigator (r29): effective r337 cascade of wissens-navigator.v2559.css (all revision blocks v2257–v2555 resolved,
   measured against the r337 page at 1280 and 390 px) in FINAL v18 tokens. Loaded only on /tools/wissens-navigator/.
   Staged r337 elements keep their form: compass ring and axes, the four direction cards with accent edge and arrow, the
   pulsing centre (mobile: two arcs with the term bar), "Info" and "Besser verstehen" pills, category chips, content
   picks with type edge, Plus pills, the connection route with start/way/target nodes and edge markers. The r337 dark
   navy surfaces map to semantic surfaces, the direction and content colours to status tokens; H1 follows the central
   scale. Breakpoints 1280/980/820/500/360 stay because the page script switches its mobile behaviour at 820 px. */
@layer components {
 .tool-page--wissens-navigator {
  --wn-dir-basics: var(--info);
  --wn-dir-depth: color-mix(in srgb, var(--info) 55%, var(--danger));
  --wn-dir-practice: var(--success);
  /* r44 (r35 V02): gold as text on light surfaces reached 2.0–2.3:1; the accent text token keeps the gold family. */
  --wn-dir-neighbor: var(--accent-text);
  --wn-content-glossary: var(--accent-text);
  --wn-content-faq: var(--info);
  --wn-content-guide: var(--success);
  --wn-content-tool: var(--warning);
  --wn-content-training: var(--wn-dir-depth);
  --wn-panel: linear-gradient(145deg, color-mix(in srgb, var(--info) 7%, var(--surface)), var(--surface) 70%);
  --wn-card: linear-gradient(145deg, var(--surface-muted), color-mix(in srgb, var(--info) 6%, var(--surface-muted)));
  --wn-card-hover: linear-gradient(145deg, var(--surface-strong), color-mix(in srgb, var(--info) 12%, var(--surface-strong)));
  --wn-flat: 0px;
  --wn-sticky-top: calc(var(--tool-shell-offset, 0px) + 6px);
 }
 html.wn-dialog-open, html.wn-dialog-open body { overflow: hidden; }
 .tool-page--wissens-navigator [hidden] { display: none; }
 .tool-page--wissens-navigator .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 :where(.tool-page--wissens-navigator) :where(button, input, a) { font-family: inherit; }
 .tool-page--wissens-navigator :is(button, a, input):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

 /* ── Hero ─────────────────────────────────────────────── */
 .wn-shell { width: 100%; margin: 0 auto; }
 .wn-hero { display: flex; align-items: center; gap: 18px; padding: 8px 4px 24px; }
 .wn-hero__copy { min-width: 0; }
 .wn-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; color: var(--text-muted); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
 .wn-kicker__mark { color: var(--accent-text); }
 .wn-hero h1 { margin: 0; color: var(--text); font-weight: 700; }
 .wn-hero p { max-width: 760px; margin: 9px 0 0; color: var(--text-muted); font-size: 1rem; line-height: 1.65; }

 /* ── Toolbar ──────────────────────────────────────────── */
 .wn-toolbar { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 14px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--wn-panel); box-shadow: var(--shadow-card); }
 .wn-toolbar__primary { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
 .wn-toolbar__actions { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; }
 .wn-control, .wn-search-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text); cursor: pointer; transition: border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); }
 .wn-control:hover, .wn-search-trigger:hover { border-color: var(--gold-border); background: var(--surface-strong); transform: translateY(-1px); }
 .wn-control:disabled { opacity: .38; cursor: not-allowed; transform: none; }
 .wn-control--quiet { width: 46px; padding: 0; color: var(--text-muted); }
 .wn-search-trigger { justify-content: flex-start; color: var(--text-muted); }
 /* UX r29 (Daniel 30.09.2026): the search prompt stays on one line instead of wrapping into two (r337 wrapped at 1280 px). */
 .wn-search-trigger > span:nth-child(2) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .wn-search-trigger__icon { color: var(--accent-text); font-size: 1.35rem; }
 .wn-search-trigger kbd { margin-left: auto; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--surface); color: var(--text-faint); font-size: .72rem; }
 /* UX r29: the search prompt may use the free toolbar space (up to 360 px) so it stays readable on one line. */
 .wn-toolbar__primary .wn-search-trigger { flex: 1 1 285px; min-width: 210px; max-width: 360px; }
 .wn-toolbar__primary .wn-path { flex: 1 1 auto; min-width: 120px; padding-inline: 2px; }
 .wn-toolbar__primary :is(#startBtn, #backBtn, #resetBtn) { flex: 0 0 auto; }
 .wn-path { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .wn-path__label { flex: 0 0 auto; color: var(--text-faint); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
 .wn-path__items { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 2px; overflow-x: auto; scrollbar-width: none; }
 .wn-path__items::-webkit-scrollbar { display: none; }
 .wn-path__crumb { padding: 6px 7px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text-muted); font-size: .78rem; white-space: nowrap; cursor: pointer; }
 .wn-path__crumb:hover { background: var(--surface-strong); color: var(--text); }
 .wn-path__crumb[aria-current="page"] { color: var(--accent-text); font-weight: 700; cursor: default; }
 .wn-path__sep { color: var(--text-faint); font-size: .72rem; }

 /* "Begriffe verbinden": its own Plus tool, not a quiet toolbar button (r337 v2259). */
 .wn-control--compare { position: relative; justify-content: flex-start; gap: 11px; min-width: 280px; min-height: 58px; padding: 7px 11px; overflow: hidden; border-color: var(--gold-border); background: radial-gradient(circle at 15% 0, var(--gold-soft), transparent 46%), linear-gradient(145deg, var(--surface-strong), color-mix(in srgb, var(--info) 8%, var(--surface-muted)) 68%); box-shadow: var(--shadow-card); text-align: left; }
 .wn-control--compare::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: var(--wn-flat) var(--radius-badge) var(--radius-badge) 0; background: var(--accent-text); }
 .wn-control--compare:hover { border-color: var(--gold); }
 .wn-compare-cta__icon { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; overflow: visible; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--accent-text); font-size: 1.05rem; }
 .wn-compare-cta__mark { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
 .wn-control--compare.is-plus-active .wn-compare-cta__icon { border-color: var(--success-border); color: var(--success); }
 .wn-compare-cta__copy { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
 .wn-compare-cta__copy strong { color: var(--text); font-size: .79rem; font-weight: 700; white-space: nowrap; }
 .wn-compare-cta__copy small { color: var(--text-muted); font-size: .59rem; font-weight: 400; white-space: nowrap; }
 .wn-control--compare .wn-control__plus { flex: 0 0 auto; margin-left: auto; }

 /* ── Workspace, map panel and compass ─────────────────── */
 .wn-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); align-items: start; gap: 16px; }
 .wn-map-panel, .wn-inspector { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--wn-panel); box-shadow: var(--shadow-elevated); overflow: hidden; }
 .wn-map-panel { position: relative; align-self: start; min-height: 700px; padding: 22px; }
 .wn-map-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--info) 14%, transparent), transparent 42%); }
 .wn-map-panel__topline { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 2px 4px 0; }
 .wn-map-panel__topline > div { display: grid; gap: 3px; }
 .wn-map-panel__eyebrow, .wn-inspector__eyebrow, .wn-mobile-current__eyebrow { color: var(--accent-text); font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
 .wn-map-panel__topline strong { color: var(--text); font-size: .9rem; font-weight: 600; }
 .wn-map-panel__counter { padding: 6px 10px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .wn-mobile-current { display: none; }

 .wn-compass { position: relative; z-index: 1; width: min(100%, 900px); height: 625px; margin: 14px auto 0; }
 .wn-compass.is-changing { animation: wn-compass-change .42s ease; }
 .wn-compass__ring { position: absolute; left: 50%; top: 50%; width: 69%; height: 67%; transform: translate(-50%, -50%); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); box-shadow: inset 0 0 44px color-mix(in srgb, var(--info) 10%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 6%, transparent); }
 .wn-compass__ring::before { content: ""; position: absolute; inset: 15%; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); }
 .wn-compass__axis { position: absolute; left: 50%; top: 50%; pointer-events: none; }
 .wn-compass__axis--horizontal { width: 78%; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, var(--gold-border), transparent); }
 .wn-compass__axis--vertical { width: 1px; height: 77%; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent, var(--gold-border), transparent); }

 /* Direction cards: accent per direction, the coloured edge points to the current term in the centre. */
 .wn-route { --wn-route-accent: var(--wn-dir-neighbor); --wn-route-soft: color-mix(in srgb, var(--wn-route-accent) 40%, transparent); position: absolute; z-index: 3; width: 300px; min-height: 132px; padding: 17px 18px 15px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--wn-card); color: var(--text); text-align: left; box-shadow: var(--shadow-card); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
 .wn-route--north { --wn-route-accent: var(--wn-dir-basics); left: 50%; top: 17px; width: 350px; transform: translateX(-50%); }
 .wn-route--east { --wn-route-accent: var(--wn-dir-depth); right: 0; top: 50%; transform: translateY(-50%); }
 .wn-route--south { --wn-route-accent: var(--wn-dir-practice); left: 50%; bottom: 15px; width: 350px; transform: translateX(-50%); }
 .wn-route--west { --wn-route-accent: var(--wn-dir-neighbor); left: 0; top: 50%; transform: translateY(-50%); }
 .wn-route::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--wn-route-accent), transparent); opacity: .72; }
 .wn-route::after { content: ""; position: absolute; background: var(--wn-route-accent); box-shadow: 0 0 18px var(--wn-route-soft); opacity: .9; }
 .wn-route--north::after { left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: var(--radius-badge) var(--radius-badge) var(--wn-flat) var(--wn-flat); }
 .wn-route--south::after { left: 18px; right: 18px; top: 0; height: 3px; border-radius: var(--wn-flat) 0 var(--radius-badge) var(--radius-badge); }
 .wn-route--west::after { right: 0; top: 18px; bottom: 18px; width: 3px; border-radius: var(--radius-badge) var(--wn-flat) var(--wn-flat) var(--radius-badge); }
 .wn-route--east::after { left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: var(--wn-flat) var(--radius-badge) var(--radius-badge) 0; }
 .wn-route:is(:hover, :focus-within, .is-selected) { border-color: var(--wn-route-soft); background: var(--wn-card-hover); box-shadow: var(--shadow-elevated); }
 .wn-route--north:hover, .wn-route--south:hover { transform: translate(-50%, -2px); }
 .wn-route--west:hover, .wn-route--east:hover { transform: translateY(calc(-50% - 2px)); }
 .wn-route__navigate { display: block; width: 100%; min-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
 .wn-route__navigate:disabled { cursor: not-allowed; }
 .wn-route__arrow { position: absolute; right: 15px; top: 13px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--wn-route-soft); border-radius: var(--radius-pill); background: var(--surface); color: var(--wn-route-accent); font-size: .88rem; }
 .wn-route__direction { display: block; padding-right: 35px; color: var(--wn-route-accent); font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
 .wn-route__term { display: block; margin-top: 6px; color: var(--text); font-size: 1.13rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; word-break: normal; overflow-wrap: normal; hyphens: manual; }
 .wn-route.is-long .wn-route__term { font-size: 1.02rem; }
 .wn-route.is-very-long .wn-route__term { font-size: .9rem; }
 .wn-route__reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 7px; color: var(--text-muted); font-size: .73rem; font-weight: 400; line-height: 1.46; }
 /* UX r29: r337 reserved 116 px beside the chips for the Info pill, which squeezed the chips of the side cards into
    single columns. On the narrow side cards the pill now sits in its own row below the chips. */
 .wn-route__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-right: 116px; }
 :is(.wn-route--west, .wn-route--east) { padding-bottom: 50px; }
 :is(.wn-route--west, .wn-route--east) .wn-route__meta { padding-right: 0; }
 /* "Info" opens the relation deliberately; hovering a card never changes the right column. */
 .wn-route__context { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 118px; height: 31px; padding: 0 7px 0 6px; border: 1px solid color-mix(in srgb, var(--wn-route-accent) 60%, transparent); border-radius: var(--radius-pill); background: var(--surface); color: var(--wn-route-accent); font-size: .59rem; font-weight: 600; letter-spacing: .01em; line-height: 1; cursor: pointer; box-shadow: var(--shadow-card); transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
 .wn-route__context:is(:hover, :focus-visible) { border-color: var(--wn-route-accent); background: color-mix(in srgb, var(--wn-route-accent) 11%, var(--surface)); transform: translateY(-1px); }
 .wn-route__context:focus-visible { outline: 2px solid var(--wn-route-accent); outline-offset: 2px; }
 .wn-route__context-icon { display: grid; flex: 0 0 auto; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--wn-route-accent) 12%, var(--surface)); font-size: .56rem; font-weight: 700; }
 .wn-route__context-label { white-space: nowrap; }
 .wn-route__context-arrow { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 1px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--wn-route-accent) 12%, transparent); font-size: .72rem; line-height: 1; transition: transform .18s ease, background .18s ease; }
 .wn-route__context:is(:hover, :focus-visible) .wn-route__context-arrow { transform: translateX(2px); background: color-mix(in srgb, var(--wn-route-accent) 22%, transparent); }

 /* Centre: the current term with a slow pulse (r337 v2261/v2263). */
 .wn-center { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 238px; height: 238px; padding: 28px; transform: translate(-50%, -50%); isolation: isolate; overflow: visible; border: 1px solid var(--gold); border-radius: var(--radius-pill); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--info) 22%, var(--surface-strong)) 0, color-mix(in srgb, var(--info) 8%, var(--surface)) 45%, var(--surface) 100%); color: var(--text); cursor: pointer; box-shadow: 0 0 0 9px var(--page-solid), 0 0 0 10px var(--gold-border), 0 0 34px color-mix(in srgb, var(--gold) 10%, transparent), var(--shadow-elevated); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
 .wn-center:hover { transform: translate(-50%, -50%) scale(1.018); border-color: var(--accent-text); box-shadow: 0 0 0 9px var(--page-solid), 0 0 0 10px var(--gold), 0 0 42px color-mix(in srgb, var(--gold) 16%, transparent), var(--shadow-elevated); }
 .wn-center:focus-visible { outline: 3px solid var(--info); outline-offset: 5px; }
 .wn-center > * { position: relative; z-index: 2; }
 .wn-center::before, .wn-center::after { content: ""; position: absolute; border-radius: var(--radius-pill); pointer-events: none; }
 .wn-center::before { inset: -18px; border: 1px solid var(--gold-border); opacity: .7; box-shadow: 0 0 42px color-mix(in srgb, var(--gold) 14%, transparent), 0 0 80px color-mix(in srgb, var(--info) 12%, transparent); animation: wn-center-pulse-strong 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
 .wn-center::after { inset: 8px; border: 1px solid var(--border-soft); opacity: .5; box-shadow: inset 0 0 28px color-mix(in srgb, var(--info) 12%, transparent); animation: wn-center-breathe-strong 2.8s ease-in-out infinite; }
 .wn-center__overline { color: var(--text-muted); font-size: .59rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
 .wn-center__term { max-width: 190px; margin: 9px 0 8px; color: var(--text); font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-align: center; word-break: normal; overflow-wrap: normal; hyphens: manual; }
 .wn-center.is-long .wn-center__term { font-size: 1.35rem; }
 .wn-center.is-very-long .wn-center__term { font-size: 1.08rem; }
 .wn-center__categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
 /* "Besser verstehen": the compact action for the current term. */
 .wn-center__action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: calc(100% - 14px); min-height: 34px; margin: 9px auto 0; padding: 7px 13px 7px 14px; border: 1px solid var(--gold); border-radius: var(--radius-button); background: linear-gradient(180deg, var(--surface-strong), var(--surface)); color: var(--accent-text); font-size: .69rem; font-weight: 700; line-height: 1.05; white-space: nowrap; box-shadow: var(--shadow-card); transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
 .wn-center:is(:hover, :focus-visible) .wn-center__action { transform: translateY(-1px); border-color: var(--accent-text); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--surface-strong)), var(--surface)); }
 .wn-center__action > span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .82em; transition: transform .18s ease, background .18s ease; }
 .wn-center:is(:hover, :focus-visible) .wn-center__action > span { transform: translateX(2px); background: color-mix(in srgb, var(--gold) 22%, transparent); }

 .wn-category { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 8px; border: 1px solid var(--info-border); border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info); font-size: .58rem; font-weight: 600; line-height: 1.15; }
 .wn-category--more { background: var(--surface-muted); color: var(--text-muted); }

 /* ── Inspector ────────────────────────────────────────── */
 .wn-inspector { position: relative; min-height: 700px; background: linear-gradient(160deg, color-mix(in srgb, var(--info) 22%, var(--surface)), var(--surface) 72%); }
 .wn-inspector::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .72; }
 .wn-inspector__view { position: relative; z-index: 1; min-height: 100%; padding: 28px 27px 30px; animation: wn-fade .22s ease; }
 /* Paket AM (V6, Daniel 19.10.2026): eyebrow and actions share the first row, the term has the whole width below, so a
    long term ("Verwahrung") never runs under "Merken". */
 .wn-inspector__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); }
 .wn-inspector__head > div:first-child { display: contents; }
 .wn-inspector__head .wn-inspector__eyebrow { grid-column: 1; grid-row: 1; }
 .wn-inspector__head > .wn-inspector__head-actions { grid-column: 2; grid-row: 1; }
 .wn-inspector__head h2 { grid-column: 1 / -1; grid-row: 2; }
 .wn-inspector__head-actions { display: flex; align-items: center; gap: 8px; }
 .wn-inspector__head-actions--reference { margin: 12px 0 0; }
 .wn-inspector h2 { margin: 5px 0 0; color: var(--text); font-size: clamp(1.65rem, 2.7vw, 2.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; word-break: normal; overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
 .wn-inspector__focus { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--accent-text); cursor: pointer; }
 .wn-inspector__summary { margin: 18px 0 0; color: var(--text-muted); font-size: .94rem; font-weight: 400; line-height: 1.72; }
 .wn-inspector__categories, .wn-route-preview__categories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
 .wn-content-block { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--border); }
 .wn-content-block__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 11px; }
 .wn-content-block__head > div { display: grid; gap: 3px; }
 .wn-content-block__head span { color: var(--text-faint); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
 .wn-content-block__head strong { color: var(--text); font-size: .96rem; font-weight: 600; }
 .wn-content-picks { display: grid; gap: 8px; }
 /* Content picks and targets: the coloured edge shows the content type (glossary, FAQ, guide, tool, training). */
 .wn-content-pick, .wn-target { --wn-content-accent: var(--wn-content-tool); position: relative; overflow: hidden; color: inherit; text-decoration: none; }
 :is(.wn-content-pick, .wn-target):is(.wn-content-pick--glossary, .wn-target--glossary) { --wn-content-accent: var(--wn-content-glossary); }
 :is(.wn-content-pick, .wn-target):is(.wn-content-pick--faq, .wn-target--faq) { --wn-content-accent: var(--wn-content-faq); }
 :is(.wn-content-pick, .wn-target):is(.wn-content-pick--guide, .wn-target--guide) { --wn-content-accent: var(--wn-content-guide); }
 :is(.wn-content-pick, .wn-target):is(.wn-content-pick--training, .wn-target--training) { --wn-content-accent: var(--wn-content-training); }
 :is(.wn-content-pick, .wn-target)::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: var(--wn-flat) var(--radius-badge) var(--radius-badge) 0; background: var(--wn-content-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--wn-content-accent) 35%, transparent); }
 .wn-content-pick { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
 .wn-content-pick:hover { border-color: color-mix(in srgb, var(--wn-content-accent) 42%, transparent); background: var(--surface-strong); transform: translateX(2px); }
 .wn-content-pick__icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
 .wn-content-pick__icon img { width: 21px; height: 21px; object-fit: contain; }
 .wn-content-pick__body { display: grid; gap: 2px; min-width: 0; }
 .wn-content-pick__meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
 .wn-content-pick__meta small { min-width: 0; }
 .wn-content-pick__body small { color: var(--wn-content-accent); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
 .wn-content-pick__body strong { overflow: hidden; color: var(--text); font-size: .76rem; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; hyphens: manual; }
 .wn-content-pick__arrow { color: var(--wn-content-accent); }
 :is(.wn-content-pick__access, .wn-target__access) { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .5rem; font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
 .wn-content-pick__access.is-locked, .wn-target__access.is-locked { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
 :is(.wn-content-pick, .wn-target).is-plus-locked { border-color: color-mix(in srgb, var(--gold) 18%, transparent); }
 :is(.wn-content-pick, .wn-target).is-plus-locked:hover { border-color: var(--gold-border); }
 .wn-content-pick.is-plus-locked .wn-content-pick__arrow { color: var(--accent-text); }
 .wn-content-empty { padding: 15px; border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); font-size: .78rem; }
 .wn-content-access-note { margin: 10px 2px 0; color: var(--text-faint); font-size: .68rem; line-height: 1.45; }
 .wn-all-content { width: 100%; margin-top: 10px; }
 .wn-remember { gap:7px; }
 .wn-remember:disabled { opacity: .45; cursor: not-allowed; }
 .wn-remember__icon { display: inline-flex; width: 15px; height: 15px; }
 .wn-remember__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
 .wn-remember.is-remembered { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--text); }
 /* Paket AK (UI-114): the hat of the Wissensgedächtnis; a kept term fills its top in gold, the label says "Gemerkt". */
 .wn-remember.is-remembered .wn-remember__icon svg { stroke: var(--gold); }
 .wn-remember.is-remembered .wn-remember__icon path:first-child { fill: var(--gold); }

 /* Route preview in the right column (desktop) and the relation dialog. */
 .wn-route-preview__back { padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: .73rem; font-weight: 600; cursor: pointer; }
 .wn-route-preview__context-kicker { display: inline-flex; align-items: center; gap: 7px; margin-top: 30px; padding: 6px 9px 6px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
 .wn-route-preview__context-kicker > span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); font-size: .58rem; }
 .wn-route-preview__direction { display: block; margin-top: 13px; color: var(--accent-text); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
 .wn-inspector__view--route h2, .wn-dialog__panel--relation .wn-dialog__head h2 { text-wrap: balance; }
 .wn-inspector__view--route h2 { margin-top: 8px; }
 .wn-route-preview__reason { margin: 18px 0 0; color: var(--text); font-size: .96rem; font-weight: 400; line-height: 1.62; }
 .wn-route-preview__go { width: 100%; margin-top: 25px; }
 :is(.wn-inspector__view--route, .wn-dialog--relation)[data-direction="basics"] :is(.wn-route-preview__direction, .wn-dialog__eyebrow) { color: var(--wn-dir-basics); }
 :is(.wn-inspector__view--route, .wn-dialog--relation)[data-direction="depth"] :is(.wn-route-preview__direction, .wn-dialog__eyebrow) { color: var(--wn-dir-depth); }
 :is(.wn-inspector__view--route, .wn-dialog--relation)[data-direction="practice"] :is(.wn-route-preview__direction, .wn-dialog__eyebrow) { color: var(--wn-dir-practice); }
 :is(.wn-inspector__view--route, .wn-dialog--relation)[data-direction="neighbor"] :is(.wn-route-preview__direction, .wn-dialog__eyebrow) { color: var(--wn-dir-neighbor); }
 .wn-reference-note { margin-top: 22px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
 .wn-reference-note strong { color: var(--text); font-size: .86rem; }
 .wn-reference-note p { margin: 7px 0 0; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }

 .wn-noscript { max-width: 760px; margin: 16px auto; padding: 14px 16px; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: var(--surface-muted); color: var(--text); }
 .wn-footer { margin: var(--s5) 0 0; }
 .wn-footer a { color: var(--text-muted); font-size: .82rem; text-decoration: none; }
 .wn-footer a:hover { color: var(--text); }
 .wn-load-error { max-width: 1180px; margin: 18px auto; padding: 18px 20px; border: 1px solid var(--danger-border); border-radius: var(--radius-card); background: var(--danger-soft); color: var(--text); }
 .wn-load-error strong { display: block; font-size: 1rem; }
 .wn-load-error p { margin: 6px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
 .wn-load-error__retry { margin-top: 12px; }

 /* ── Dialogs (native, r337) ───────────────────────────── */
 .wn-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--text); overflow: auto; }
 .wn-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(12px); }
 .wn-dialog__panel { position: relative; width: min(1040px, 100%); max-height: calc(100dvh - 48px); margin: auto; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-elevated); }
 .wn-dialog__head { position: sticky; z-index: 4; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
 .wn-dialog__eyebrow { color: var(--accent-text); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
 .wn-dialog__head h2 { margin: 6px 0 0; color: var(--text); font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; word-break: normal; overflow-wrap: normal; hyphens: manual; }
 .wn-dialog__categories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
 .wn-dialog__close { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
 .wn-dialog__close:hover { border-color: var(--gold-border); color: var(--text); }

 .wn-target-list { padding: 22px 27px 30px; }
 .wn-target-group + .wn-target-group { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
 .wn-target-group h3 { margin: 0 0 11px; color: var(--text); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
 .wn-target-group__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .wn-target-group__grid:has(> :only-child) { grid-template-columns: 1fr; }
 .wn-target { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; min-height: 91px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--wn-card); transition: border-color .18s ease, transform .18s ease, background .18s ease; }
 .wn-target:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--wn-content-accent) 42%, transparent); background: var(--wn-card-hover); }
 .wn-target__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
 .wn-target__icon img { width: 29px; height: 29px; object-fit: contain; }
 .wn-target__body { display: grid; gap: 4px; min-width: 0; }
 .wn-target__type-row { display: flex; align-items: center; gap: 6px; }
 .wn-target__type { color: var(--wn-content-accent); font-size: .58rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
 .wn-target__access { font-size: .54rem; }
 .wn-target__body strong { color: var(--text); font-size: .9rem; font-weight: 600; line-height: 1.28; }
 .wn-target__cta { color: var(--text-muted); font-size: .68rem; }
 .wn-target__arrow { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid color-mix(in srgb, var(--wn-content-accent) 35%, transparent); border-radius: var(--radius-pill); color: var(--wn-content-accent); }

 .wn-dialog__panel--search { width: min(840px, 100%); }
 .wn-searchbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 58px; margin: 22px 27px 10px; padding: 0 16px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--input); color: var(--accent-text); }
 .wn-searchbox input { width: 100%; height: 56px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .96rem; }
 .wn-searchbox input::placeholder { color: var(--text-faint); }
 .wn-search-hints { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 27px 11px; }
 .wn-search-hints button { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: .68rem; cursor: pointer; }
 .wn-search-hints button:hover { border-color: var(--gold-border); color: var(--text); }
 .wn-search-results { display: grid; gap: 8px; padding: 10px 27px 28px; }
 .wn-search-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
 .wn-search-result:hover { border-color: var(--gold-border); background: var(--surface-strong); }
 .wn-search-result__main { display: grid; gap: 4px; min-width: 0; }
 .wn-search-result__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .wn-search-result__main strong { color: var(--text); font-size: .91rem; word-break: normal; overflow-wrap: normal; hyphens: manual; }
 .wn-search-result__quality { padding: 2px 6px; border: 1px solid var(--success-border); border-radius: var(--radius-pill); color: var(--success); font-size: .53rem; font-weight: 700; text-transform: uppercase; }
 .wn-search-result__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
 .wn-search-result__cats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
 .wn-search-empty { padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); text-align: center; }

 .wn-dialog__panel--start { width: min(1120px, 100%); }
 .wn-start-section { padding: 22px 27px; }
 .wn-start-section + .wn-start-section { border-top: 1px solid var(--border); }
 .wn-start-section__head { display: grid; gap: 3px; margin-bottom: 12px; }
 .wn-start-section__head span { color: var(--text-faint); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .wn-start-section__head strong { color: var(--text); font-size: 1rem; }
 .wn-situation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .wn-start-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
 .wn-recent-grid { display: flex; gap: 9px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
 :is(.wn-situation-card, .wn-start-card, .wn-recent-card) { position: relative; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--wn-card); color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
 :is(.wn-situation-card, .wn-start-card, .wn-recent-card):hover { transform: translateY(-2px); border-color: var(--gold-border); background: var(--wn-card-hover); }
 .wn-situation-card { display: grid; grid-template-columns: 38px 1fr; gap: 12px; min-height: 106px; }
 .wn-situation-card__icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--accent-text); font-weight: 700; }
 .wn-situation-card__body, .wn-start-card { display: grid; gap: 5px; }
 .wn-recent-card { display: grid; gap: 4px; min-width: 210px; }
 :is(.wn-situation-card, .wn-start-card, .wn-recent-card) strong { color: var(--text); font-size: .87rem; font-weight: 600; line-height: 1.3; }
 :is(.wn-situation-card, .wn-start-card, .wn-recent-card) small { color: var(--text-muted); font-size: .69rem; line-height: 1.45; }
 .wn-start-card__icon { color: var(--accent-text); font-size: 1.25rem; }

 .wn-dialog__panel--relation { width: min(520px, 100%); }
 .wn-relation-dialog__body { padding: 21px 24px 25px; }
 .wn-relation-dialog__body > p { margin: 0; color: var(--text); font-size: .92rem; line-height: 1.65; }
 .wn-relation-dialog__body > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
 .wn-relation-dialog__body .wn-route-preview__go { margin-top: 20px; }

 /* ── "Begriffe verbinden" (Plus) ──────────────────────── */
 .wn-dialog__panel--compare { width: min(1040px, 100%); }
 .wn-compare-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 20px 27px 0; }
 .wn-compare-intro { min-width: 0; margin: 0; color: var(--text-muted); font-size: .84rem; line-height: 1.6; }
 .wn-compare-available { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .68rem; font-weight: 700; white-space: nowrap; }
 .wn-compare-access { position: relative; margin: 18px 27px 0; padding: 18px; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: linear-gradient(145deg, var(--gold-soft), var(--surface-muted)); }
 .wn-compare-access > span { color: var(--accent-text); font-size: .59rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .wn-compare-access > strong { display: block; margin-top: 5px; color: var(--text); font-size: 1rem; }
 .wn-compare-access > p { margin: 7px 0 0; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
 .wn-compare-access > button { gap: 8px; margin-top: 13px; }
 .wn-compare-access__lock { display: grid; flex: 0 0 auto; place-items: center; width: 21px; height: 21px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); color: var(--accent-text); font-size: .76rem; line-height: 1; }
 .wn-dialog.is-free-demo .wn-compare-output { padding-top: 16px; }
 .wn-dialog.is-free-demo .wn-compare-summary > div > span::before { content: "Feste Demo · "; color: var(--accent-text); font-weight: 700; }

 /* Quick choices: recently used and remembered terms (collapsible). */
 .wn-compare-memory { margin: 0 27px 4px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
 .wn-compare-recent { margin-top: 16px; }
 .wn-compare-memory + .wn-compare-memory { margin-top: 9px; }
 .wn-compare-memory.is-collapsed { background: var(--surface); }
 .wn-compare-memory__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 15px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
 .wn-compare-memory__toggle:hover { background: var(--surface-strong); }
 .wn-compare-memory__toggle:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }
 .wn-compare-memory__headcopy { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
 .wn-compare-memory__headcopy strong { color: var(--text); font-size: .82rem; }
 .wn-compare-memory__headcopy span { color: var(--accent-text); font-size: .7rem; font-weight: 700; white-space: nowrap; }
 .wn-compare-memory__chevron { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--text-muted); font-size: 1rem; transition: transform .18s ease, border-color .18s ease, color .18s ease; }
 .wn-compare-memory:not(.is-collapsed) .wn-compare-memory__chevron { transform: rotate(180deg); border-color: var(--gold-border); color: var(--accent-text); }
 .wn-compare-memory__body { padding: 0 15px 14px; border-top: 1px solid var(--border-soft); }
 .wn-compare-memory__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
 .wn-compare-memory__hint { margin: 10px 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
 .wn-memory-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 6px 7px 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
 .wn-memory-choice--recent { background: var(--info-soft); }
 .wn-memory-choice__label { min-width: 0; color: var(--text); font-size: .72rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
 .wn-memory-choice__actions { display: flex; gap: 4px; }
 .wn-memory-choice__action { min-width: 43px; min-height: 28px; border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface-muted); color: var(--text-muted); font-size: .56rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
 .wn-memory-choice__action--start:is(:hover, .is-selected) { border-color: var(--info-border); background: var(--info-soft); color: var(--info); }
 .wn-memory-choice__action--target:is(:hover, .is-selected) { border-color: var(--gold-border); background: var(--gold-soft); color: var(--accent-text); }
 .wn-memory-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text); font-size: .74rem; font-weight: 600; cursor: pointer; }
 .wn-memory-chip:hover { background: var(--surface-strong); }
 .wn-memory-chip small { color: var(--accent-text); font-size: .63rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
 .wn-memory-chip--bridge.is-remembered { border-color: var(--gold-border); background: color-mix(in srgb, var(--gold) 18%, transparent); }

 /* Start and target pickers with explicit roles, direct-connection filter and paginated list. */
 .wn-compare-pickers { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: start; gap: 14px; padding: 20px 27px 10px; }
 .wn-compare-picker { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); }
 .wn-compare-picker--start { border-color: var(--info-border); background: linear-gradient(180deg, var(--info-soft), var(--surface-muted)); }
 .wn-compare-picker--target { border-color: var(--gold-border); background: linear-gradient(180deg, var(--gold-soft), var(--surface-muted)); }
 .wn-compare-picker__selection { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 10px 11px; border-radius: var(--radius-control); background: var(--surface); }
 .wn-compare-picker--start .wn-compare-picker__selection { border: 1px solid var(--info-border); box-shadow: inset 3px 0 0 var(--info); }
 .wn-compare-picker--target .wn-compare-picker__selection { border: 1px solid var(--gold-border); box-shadow: inset 3px 0 0 var(--gold); }
 .wn-compare-picker__selection > strong { min-width: 0; color: var(--text); font-size: .96rem; line-height: 1.3; overflow-wrap: anywhere; }
 .wn-compare-role { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: var(--radius-pill); font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
 .wn-compare-role--start { border: 1px solid var(--info-border); background: var(--info-soft); color: var(--info); }
 .wn-compare-role--target { border: 1px solid var(--gold-border); background: var(--gold-soft); color: var(--accent-text); }
 .wn-compare-clear { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface-muted); color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; }
 .wn-compare-clear:hover { border-color: var(--text-faint); color: var(--text); }
 .wn-compare-picker label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 11px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--input); color: var(--text-muted); }
 .wn-compare-picker input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .78rem; }
 .wn-compare-swap { align-self: start; width: 44px; height: 44px; margin-top: 4px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--accent-text); font-size: 1.25rem; cursor: pointer; }
 .wn-compare-swap:hover:not(:disabled) { border-color: var(--gold); background: var(--surface-strong); }
 .wn-compare-swap:disabled { opacity: .35; cursor: not-allowed; }
 .wn-compare-filter { display: grid; gap: 7px; margin-top: 11px; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--surface); }
 .wn-compare-filter__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .wn-compare-filter__line > span { color: var(--text-muted); font-size: .62rem; font-weight: 700; }
 .wn-compare-filter__line > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface-muted); color: var(--text-muted); font-size: .66rem; font-weight: 700; cursor: pointer; }
 .wn-compare-filter__line > button:hover:not(:disabled) { border-color: var(--gold-border); color: var(--accent-text); }
 .wn-compare-filter__line > button:is(.is-active, [aria-pressed="true"]) { border-color: var(--gold-border); background: var(--gold-soft); color: var(--accent-text); }
 .wn-compare-filter__line > button:disabled { opacity: .38; cursor: not-allowed; }
 .wn-compare-filter__check { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: var(--radius-badge); color: transparent; font-size: .65rem; line-height: 1; }
 .wn-compare-filter__line > button[aria-pressed="true"] .wn-compare-filter__check { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--accent-text); }
 .wn-compare-filter p { margin: 0; color: var(--text-faint); font-size: .63rem; line-height: 1.45; }
 .wn-compare-picker__meta { margin: 9px 2px 0; color: var(--text-faint); font-size: .65rem; line-height: 1.35; }
 .wn-compare-results { display: grid; gap: 5px; max-height: 248px; margin-top: 8px; padding-right: 3px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
 .wn-compare-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text-muted); text-align: left; font-size: .72rem; cursor: pointer; }
 .wn-compare-result:hover { background: var(--surface-strong); color: var(--text); }
 .wn-compare-result.is-new { animation: wnCompareNewRow .8s ease both; }
 .wn-compare-result__copy { display: grid; gap: 2px; min-width: 0; }
 .wn-compare-result strong { min-width: 0; color: var(--text); font-size: .75rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
 .wn-compare-result small { color: var(--text-faint); font-size: .61rem; line-height: 1.25; }
 .wn-compare-result .wn-compare-result__direct { padding: 3px 6px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .53rem; font-weight: 700; white-space: nowrap; }
 .wn-compare-result-empty { padding: 15px 10px; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
 .wn-compare-more { position: relative; width: 100%; min-height: 39px; margin-top: 8px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--accent-text); font-size: .69rem; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
 .wn-compare-more:hover { border-color: var(--gold); background: var(--surface-strong); }
 .wn-compare-more.is-loading { border-color: var(--info-border); background: var(--info-soft); color: var(--info); cursor: wait; }
 .wn-compare-more.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 2px solid var(--info-border); border-top-color: var(--info); border-radius: var(--radius-pill); vertical-align: -2px; animation: wnCompareSpin .65s linear infinite; }
 .wn-compare-more-feedback { min-height: 18px; margin-top: 5px; color: var(--success); font-size: .62rem; font-weight: 700; text-align: center; opacity: 0; transform: translateY(-3px); transition: opacity .18s ease, transform .18s ease; }
 .wn-compare-more-feedback.is-visible { opacity: 1; transform: translateY(0); }
 .wn-compare-more-feedback.is-visible::before { content: "✓"; margin-right: 5px; }
 .wn-compare-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 27px 0; }
 .wn-compare-run { min-width: 220px; }
 .wn-compare-output { padding: 22px 27px 30px; }

 /* The connection: start, way terms and target with the editorial text of every step. */
 .wn-compare-path { display: grid; gap: 12px; }
 .wn-compare-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 15px; padding: 0 2px; font-size: .88rem; line-height: 1.55; }
 .wn-compare-summary > div { display: grid; gap: 4px; }
 .wn-compare-summary > div > span { color: var(--text-muted); font-size: .76rem; }
 .wn-compare-summary > div > strong { color: var(--text); font-size: 1rem; line-height: 1.35; }
 .wn-compare-summary b { color: var(--accent-text); font-weight: 700; }
 .wn-compare-summary > small { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--success-border); border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: .59rem; font-weight: 700; }
 .wn-compare-route { position: relative; display: grid; gap: 0; }
 .wn-compare-route-node { position: relative; z-index: 2; display: grid; gap: 4px; width: 100%; min-height: 72px; padding: 13px 16px; border-radius: var(--radius-card); color: var(--text); text-align: left; cursor: pointer; }
 .wn-compare-route-node > span { font-size: .59rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .wn-compare-route-node > strong { color: var(--text); font-size: 1rem; line-height: 1.3; }
 .wn-compare-route-node.is-start { border: 1px solid var(--info-border); background: linear-gradient(90deg, color-mix(in srgb, var(--info) 13%, var(--surface)), var(--surface)); box-shadow: inset 4px 0 0 var(--info); }
 .wn-compare-route-node.is-start > span { color: var(--info); }
 .wn-compare-route-node.is-target { border: 1px solid var(--gold-border); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 15%, var(--surface)), var(--surface)); box-shadow: inset 4px 0 0 var(--gold); }
 .wn-compare-route-node.is-target > span { color: var(--accent-text); }
 .wn-compare-route-node.is-way { width: calc(100% - 44px); margin-left: 22px; border: 1px solid var(--border); background: linear-gradient(90deg, var(--surface-strong), var(--surface-muted)); box-shadow: inset 3px 0 0 var(--text-faint); }
 .wn-compare-route-node.is-way > span { color: var(--text-muted); }
 .wn-compare-route-edge { position: relative; display: grid; gap: 9px; margin: 0 20px; padding: 18px 16px 19px 34px; border-left: 2px solid var(--gold-border); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 4%, transparent), transparent); }
 .wn-compare-route-edge::before { content: ""; position: absolute; left: -6px; top: 24px; width: 10px; height: 10px; border: 2px solid var(--gold); border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 0 0 5px var(--gold-soft); }
 .wn-compare-route-edge__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .wn-compare-route-edge__head > span:first-child { color: var(--text-muted); font-size: .61rem; font-weight: 700; }
 .wn-compare-route-edge__head > strong { padding: 3px 7px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .61rem; }
 .wn-compare-route-edge p { margin: 0; color: var(--text-muted); font-size: .83rem; line-height: 1.58; }
 .wn-compare-route-edge__status { padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .56rem; font-weight: 700; }
 .wn-compare-route-edge__status.is-contextual { border-color: var(--gold-border); background: var(--gold-soft); color: var(--accent-text); }
 .wn-compare-route-edge__status.is-open { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
 .wn-compare-empty { padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); text-align: left; }
 .wn-compare-empty > strong { display: block; color: var(--text); font-size: .91rem; }
 .wn-compare-empty > p { margin: 7px 0 0; color: var(--text-muted); font-size: .76rem; line-height: 1.58; }
 .wn-compare-alternatives { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
 .wn-compare-alternatives > span { width: 100%; color: var(--text-muted); font-size: .65rem; font-weight: 700; }
 .wn-compare-alternatives button { padding: 7px 10px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .68rem; cursor: pointer; }
 .wn-compare-bridge { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
 .wn-compare-bridge__head { margin: 0 0 10px; color: var(--text); font-size: .78rem; font-weight: 700; }
 .wn-compare-bridge__chips { display: flex; flex-wrap: wrap; gap: 8px; }
 .wn-compare-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

 /* ── Motion ───────────────────────────────────────────── */
 @keyframes wn-fade { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
 @keyframes wn-compass-change { 0% { opacity: .55; transform: scale(.992); } 100% { opacity: 1; transform: none; } }
 @keyframes wn-center-pulse-strong { 0%, 100% { transform: scale(1); opacity: .52; } 55% { transform: scale(1.07); opacity: .92; } }
 @keyframes wn-center-breathe-strong { 0%, 100% { transform: scale(1); opacity: .34; } 50% { transform: scale(1.05); opacity: .64; } }
 @keyframes wn-mobile-arc { 0%, 100% { transform: scale(1); filter: brightness(.96); } 50% { transform: scale(1.035); filter: brightness(1.14); } }
 @keyframes wn-current-view-breath { 0%, 50%, 100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; } 25%, 75% { box-shadow: 0 0 0 1px var(--gold-border), 0 0 38px color-mix(in srgb, var(--gold) 18%, transparent); background-color: color-mix(in srgb, var(--gold) 3%, transparent); } }
 @keyframes wnCompareSpin { to { transform: rotate(360deg); } }
 @keyframes wnCompareNewRow { 0% { transform: translateY(5px); background: var(--info-soft); box-shadow: 0 0 0 1px var(--info-border); } 100% { transform: none; } }

 /* ── Desktop-only details ─────────────────────────────── */
 @media (min-width: 821px) {
  .wn-center__action > span { display: inline-grid; }
  /* East/west cards mirrored and centred (r337 v2274). */
  :is(.wn-route--west, .wn-route--east), :is(.wn-route--west, .wn-route--east) :is(.wn-route__direction, .wn-route__term, .wn-route__reason) { text-align: center; }
  :is(.wn-route--west, .wn-route--east) .wn-route__meta { justify-content: center; }
  .wn-route--west .wn-route__arrow { left: 15px; right: auto; }
  .wn-route--west .wn-route__direction { padding-left: 35px; padding-right: 0; }
  .wn-route--east .wn-route__direction { padding-right: 35px; padding-left: 0; }
  .wn-inspector { overflow: visible; }
  /* "Besser verstehen" or ◎ pulses the right column once (r337 is-focus-pulsing). */
  .wn-inspector__view#currentView { border-radius: var(--radius-card); overflow: visible; }
  .wn-inspector__view#currentView.is-focus-pulsing { animation: wn-current-view-breath 3.6s ease-in-out 1; }
 }
 @media (min-width: 981px) {
  .wn-inspector { height: 700px; overflow-y: auto; scrollbar-width: thin; }
 }
 @media (min-width: 981px) and (max-width: 1280px) {
  .wn-inspector { height: 670px; }
  .wn-toolbar__primary .wn-search-trigger { flex-basis: 235px; min-width: 180px; }
  .wn-toolbar__primary .wn-path__label { display: none; }
  .wn-control--compare { min-width: 245px; }
 }
 @media (max-width: 1280px) {
  .wn-workspace { grid-template-columns: minmax(0, 1fr) 360px; }
  .wn-map-panel { min-height: 670px; padding: 18px; }
  .wn-compass { height: 600px; }
  .wn-route { width: 245px; }
  .wn-route--north, .wn-route--south { width: 315px; }
  .wn-center { width: 214px; height: 214px; }
  .wn-center__term { font-size: 1.45rem; }
  .wn-route__reason { font-size: .69rem; }
 }
 @media (max-width: 980px) {
  .wn-workspace { grid-template-columns: 1fr; }
  .wn-map-panel, .wn-inspector { min-height: auto; }
  .wn-inspector__view { min-height: 0; }
  .wn-toolbar { grid-template-columns: 1fr; }
  .wn-toolbar__primary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .wn-toolbar__primary #startBtn { grid-column: 1; }
  .wn-toolbar__primary .wn-search-trigger { grid-column: 2; width: 100%; min-width: 0; }
  .wn-toolbar__primary #backBtn { grid-column: 3; }
  .wn-toolbar__primary .wn-path { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .wn-toolbar__primary #resetBtn { display: none; }
  .wn-toolbar__actions { display: block; }
  .wn-control--compare { width: 100%; min-width: 0; }
 }

 /* ── Mobile (≤ 820 px, the page script's breakpoint) ──── */
 @media (max-width: 820px) {
  .wn-hero { align-items: flex-start; padding-bottom: 17px; }
  .wn-kicker { font-size: .64rem; }
  .wn-hero p { font-size: .84rem; line-height: 1.55; }
  .wn-toolbar { padding: 8px; }
  .wn-path { gap: 6px; }
  .wn-path__label { display: none; }
  .wn-control { min-width: 45px; padding: 0 11px; }
  .wn-search-trigger { padding: 0 12px; }
  .wn-search-trigger > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .wn-search-trigger kbd { display: none; }
  .wn-control--compare { gap: 8px; min-height: 50px; padding: 6px 9px; }
  .wn-compare-cta__icon { width: 34px; height: 34px; }
  .wn-compare-cta__mark { width: 22px; height: 22px; }
  .wn-compare-cta__copy strong { font-size: .7rem; }
  .wn-compare-cta__copy small { font-size: .52rem; }

  /* Sticky card of the current term (r337 v2554/v2555), below the pinned central shell. */
  .wn-mobile-current { position: sticky; top: var(--wn-sticky-top); z-index: 70; display: block; margin: 0 4px 10px; padding: 12px 16px 11px; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: linear-gradient(145deg, color-mix(in srgb, var(--info) 18%, var(--surface)), var(--surface)); box-shadow: var(--shadow-elevated); backdrop-filter: blur(16px) saturate(1.08); }
  .wn-mobile-current::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-text), transparent); pointer-events: none; }
  .wn-mobile-current__eyebrow { font-size: .58rem; letter-spacing: .11em; }
  .wn-mobile-current h2 { margin: 4px 0 0; color: var(--text); font-size: 1.34rem; font-weight: 700; line-height: 1.07; letter-spacing: -.035em; word-break: normal; overflow-wrap: normal; hyphens: manual; }
  .wn-mobile-current p { margin: 6px 0 0; color: var(--text-muted); font-size: .73rem; font-weight: 400; line-height: 1.45; }
  .wn-mobile-current__footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; }
  .wn-mobile-current__footer > button:not(.wn-remember) { min-height: 30px; padding: 3px 0; border: 0; background: transparent; color: var(--accent-text); font-size: .64rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .wn-mobile-current__footer .wn-remember { min-height: 34px; padding: 6px 10px; font-size: .7rem; }
  .wn-content-block { margin-top: 0; padding-top: 0; border-top: 0; scroll-margin-top: calc(var(--wn-sticky-top) + 160px); }

  .wn-map-panel { padding: 10px 4px 24px; scroll-margin-top: calc(var(--wn-sticky-top) + 184px); }
  .wn-map-panel__topline { padding: 2px 5px 0; }
  .wn-map-panel__topline strong { font-size: .78rem; }

  /* The compass becomes a 3 × 3 grid: north and south span the row, west · centre · east in the middle. */
  .wn-compass { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); grid-template-rows: 82px 156px 82px; align-items: center; gap: 10px 7px; width: 100%; height: auto; min-height: 348px; margin: 4px auto 0; padding: 5px 0 9px; }
  .wn-compass__ring { width: 236px; height: 236px; max-width: 86vw; max-height: 86vw; opacity: .72; }
  .wn-compass__axis--horizontal { width: 96%; }
  .wn-compass__axis--vertical { height: 76%; }
  .wn-route, .wn-route--north, .wn-route--south, .wn-route--west, .wn-route--east { position: relative; inset: auto; min-width: 0; max-width: none; margin: 0; transform: none; }
  .wn-route:hover, .wn-route--north:hover, .wn-route--south:hover, .wn-route--west:hover, .wn-route--east:hover { transform: none; }
  .wn-route { min-height: 96px; padding: 13px 10px 40px; border-color: var(--border); }
  .wn-route__navigate { min-height: 58px; padding-bottom: 4px; }
  .wn-route__navigate:focus-visible { outline: 2px solid var(--wn-route-accent); outline-offset: 3px; border-radius: var(--radius-button); }
  .wn-route__reason, .wn-route__meta { display: none; }
  .wn-route__arrow { right: 8px; top: 8px; width: 25px; height: 25px; font-size: .76rem; }
  .wn-route__direction { padding-right: 29px; font-size: .61rem; line-height: 1.18; letter-spacing: .075em; }
  .wn-route__term { margin-top: 6px; font-size: 1rem; line-height: 1.2; letter-spacing: -.015em; }
  .wn-route.is-long .wn-route__term { font-size: .91rem; }
  .wn-route.is-very-long .wn-route__term { font-size: .84rem; }
  .wn-route__context { left: 7px; right: 7px; bottom: 7px; width: auto; min-width: 0; height: 27px; padding: 0 5px; gap: 4px; border-radius: var(--radius-control); background: var(--surface); box-shadow: none; }
  .wn-route__context::before { content: ""; position: absolute; left: 8px; right: 8px; top: -7px; height: 1px; background: linear-gradient(90deg, transparent, var(--wn-route-soft), transparent); opacity: .7; }
  .wn-route__context-icon { width: 15px; height: 15px; font-size: .52rem; }
  .wn-route__context-arrow { width: 13px; height: 13px; font-size: .58rem; }
  /* North and south: compact cards with the pill on the right (r337 v2555). */
  .wn-route--north, .wn-route--south { grid-column: 1 / -1; justify-self: center; width: min(68vw, 244px); min-width: 218px; min-height: 80px; padding: 9px 11px 29px; }
  .wn-route--north { grid-row: 1; align-self: start; }
  .wn-route--south { grid-row: 3; align-self: end; }
  :is(.wn-route--north, .wn-route--south) .wn-route__navigate { min-height: 38px; }
  :is(.wn-route--north, .wn-route--south) .wn-route__direction { padding-right: 26px; font-size: .52rem; line-height: 1.12; letter-spacing: .08em; }
  :is(.wn-route--north, .wn-route--south) .wn-route__term { margin-top: 3px; font-size: .88rem; line-height: 1.13; }
  :is(.wn-route--north, .wn-route--south) .wn-route__arrow { right: 7px; top: 7px; width: 21px; height: 21px; font-size: .64rem; }
  :is(.wn-route--north, .wn-route--south) .wn-route__context { left: auto; right: 8px; bottom: 6px; min-width: 68px; height: 23px; padding: 0 7px 0 5px; border-radius: var(--radius-pill); font-size: .52rem; }
  :is(.wn-route--north, .wn-route--south) .wn-route__context::before { display: none; }
  :is(.wn-route--north, .wn-route--south) .wn-route__context-icon { width: 13px; height: 13px; font-size: .45rem; }
  :is(.wn-route--north, .wn-route--south) .wn-route__context-arrow { width: 12px; height: 12px; font-size: .48rem; }
  /* West and east: centred, arrow on the outer side, full-width pill. */
  .wn-route--west, .wn-route--east { grid-row: 2; align-self: center; justify-self: stretch; width: 100%; min-height: 108px; padding: 13px 8px 31px; text-align: center; }
  .wn-route--west { grid-column: 1; padding-left: 12px; }
  .wn-route--east { grid-column: 3; padding-right: 12px; }
  .wn-route--west .wn-route__arrow { left: 8px; right: auto; }
  :is(.wn-route--west, .wn-route--east) :is(.wn-route__direction, .wn-route__term) { text-align: center; }
  /* UX r29: r337 padded the direction label on both sides of a 74 px box, so "Nachbarthema" had almost no room; the label
     now only keeps clear of the arrow and never breaks inside a word. */
  :is(.wn-route--west, .wn-route--east) .wn-route__direction { max-width: none; font-size: .6rem; line-height: 1.15; letter-spacing: .07em; word-break: normal; overflow-wrap: normal; text-wrap: balance; }
  .wn-route--west .wn-route__direction { padding: 0 0 0 29px; }
  .wn-route--east .wn-route__direction { padding: 0 29px 0 0; }
  :is(.wn-route--west, .wn-route--east) .wn-route__term { font-size: .95rem; line-height: 1.2; }
  :is(.wn-route--west, .wn-route--east) .wn-route__context { left: 8px; right: 8px; bottom: 6px; height: 24px; padding: 0 7px; gap: 5px; font-size: .62rem; }
  /* An opened "Info" dims the other cards and lights the axis towards the selected direction. */
  .wn-compass[data-active-direction] .wn-route:not(.is-selected) { opacity: .58; filter: saturate(.72); }
  .wn-route.is-selected { border-color: var(--wn-route-accent); box-shadow: var(--shadow-elevated), 0 0 0 1px var(--wn-route-soft), 0 0 24px color-mix(in srgb, var(--wn-route-accent) 18%, transparent); }
  .wn-route.is-selected .wn-route__context { border-color: var(--wn-route-accent); background: color-mix(in srgb, var(--wn-route-accent) 10%, var(--surface)); }
  .wn-compass[data-active-direction="neighbor"] .wn-compass__axis--horizontal { background: linear-gradient(90deg, transparent 0, var(--wn-dir-neighbor) 12%, var(--wn-dir-neighbor) 49%, transparent 50%, transparent 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--wn-dir-neighbor) 32%, transparent); }
  .wn-compass[data-active-direction="depth"] .wn-compass__axis--horizontal { background: linear-gradient(90deg, transparent 0, transparent 50%, var(--wn-dir-depth) 51%, var(--wn-dir-depth) 88%, transparent 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--wn-dir-depth) 32%, transparent); }
  .wn-compass[data-active-direction="basics"] .wn-compass__axis--vertical { background: linear-gradient(180deg, transparent 0, var(--wn-dir-basics) 12%, var(--wn-dir-basics) 49%, transparent 50%, transparent 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--wn-dir-basics) 32%, transparent); }
  .wn-compass[data-active-direction="practice"] .wn-compass__axis--vertical { background: linear-gradient(180deg, transparent 0, transparent 50%, var(--wn-dir-practice) 51%, var(--wn-dir-practice) 88%, transparent 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--wn-dir-practice) 32%, transparent); }

  /* Centre as a ring stage: two pulsing arcs, the term on a bar, "Besser verstehen" below (r337 v2270/v2555). */
  .wn-center, .wn-center:is(:hover, :focus, :focus-visible, :active) { position: relative; inset: auto; grid-column: 2; grid-row: 2; align-self: center; justify-self: center; width: 104px; height: 104px; padding: 0; transform: none; overflow: visible; border: 0; border-radius: var(--wn-flat); background: transparent; box-shadow: none; }
  .wn-center::before, .wn-center::after { left: 0; right: auto; width: 104px; height: 52px; margin: 0; border: 2px solid var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--info) 14%, var(--surface)), var(--surface)); opacity: .92; box-sizing: border-box; box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 13%, transparent); }
  .wn-center::before { inset: 0 auto auto 0; border-bottom: 0; border-radius: var(--radius-pill) var(--radius-pill) var(--wn-flat) var(--wn-flat); transform-origin: 50% 100%; animation: wn-mobile-arc 3.2s ease-in-out infinite; }
  .wn-center::after { inset: auto auto 0 0; border-top: 0; border-radius: var(--wn-flat) 0 var(--radius-pill) var(--radius-pill); transform-origin: 50% 0; animation: wn-mobile-arc 3.2s ease-in-out infinite; }
  .wn-center__overline { position: absolute; z-index: 5; left: 50%; top: -22px; margin: 0; transform: translateX(-50%); font-size: .49rem; letter-spacing: .1em; white-space: nowrap; }
  .wn-center__term { position: absolute; z-index: 6; left: 50%; top: 50%; display: grid; place-items: center; width: 108px; max-width: none; min-height: 50px; max-height: 50px; margin: 0; padding: 5px 9px; overflow: hidden; transform: translate(-50%, -50%); border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); border-radius: var(--radius-control); background: linear-gradient(90deg, var(--surface), color-mix(in srgb, var(--info) 10%, var(--surface)) 24%, color-mix(in srgb, var(--info) 10%, var(--surface)) 76%, var(--surface)); box-shadow: var(--shadow-card); font-size: .98rem; line-height: 1.02; text-wrap: balance; }
  .wn-center.is-long .wn-center__term { font-size: .98rem; }
  .wn-center.is-very-long .wn-center__term { font-size: .86rem; }
  .wn-center__categories { display: none; }
  /* UX r29: in r337 the action overlapped the term bar and the lower arc; it now sits just below the ring. */
  .wn-center__action { position: absolute; z-index: 7; left: 50%; top: auto; bottom: -34px; width: 112px; min-width: 112px; max-width: 112px; min-height: 28px; margin: 0; padding: 5px 7px; gap: 4px; transform: translateX(-50%); border-radius: var(--radius-button); font-size: .64rem; line-height: 1; }
  .wn-center:is(:hover, :focus-visible) .wn-center__action { transform: translateX(-50%); }
  .wn-center__action > span { width: 15px; height: 15px; }

  .wn-inspector { min-height: 0; margin-top: 12px; overflow: visible; scroll-margin-top: calc(var(--wn-sticky-top) + 184px); }
  .wn-inspector__view { padding: 22px 19px 24px; }
  .wn-inspector__head-actions { gap: 6px; }
  /* The mobile card carries title and summary; the right column shows the content picks. */
  #currentView > :is(.wn-inspector__head, .wn-inspector__summary, .wn-inspector__categories) { display: none; }
  .wn-inspector__view--route:not([hidden]) { display: block; min-height: 0; padding: 18px 17px 19px; }
  .wn-route-preview__back { min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .wn-route-preview__context-kicker { margin-top: 16px; }
  .wn-route-preview__direction { margin-top: 10px; }
  .wn-inspector__view--route h2 { margin-top: 7px; font-size: 1.28rem; line-height: 1.16; }
  .wn-route-preview__reason { margin-top: 12px; font-size: .84rem; line-height: 1.58; }
  .wn-route-preview__categories { margin-top: 11px; }
  .wn-route-preview__go { margin-top: 16px; }
  .wn-content-access-note { font-size: .64rem; }
  .wn-control__plus { display: inline-flex; }

  .wn-dialog { padding: 10px; }
  .wn-dialog__panel { max-height: calc(100dvh - 20px); }
  .wn-dialog__head { padding: 20px 18px 16px; }
  :is(.wn-target-list, .wn-start-section, .wn-compare-output) { padding-left: 18px; padding-right: 18px; }
  .wn-searchbox { margin-left: 18px; margin-right: 18px; }
  :is(.wn-search-hints, .wn-search-results) { padding-left: 18px; padding-right: 18px; }
  .wn-search-result { grid-template-columns: 1fr; }
  .wn-search-result__cats { justify-content: flex-start; }
  .wn-target-group__grid, .wn-situation-grid { grid-template-columns: 1fr; }
  .wn-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-compare-intro-row { display: grid; gap: 10px; margin: 16px 18px 0; }
  .wn-compare-available { justify-self: start; }
  .wn-compare-access { margin-left: 18px; margin-right: 18px; }
  .wn-compare-access > button { width: 100%; padding-inline: 10px; }
  .wn-compare-memory { margin: 0 16px 4px; }
  .wn-compare-memory__chips { grid-template-columns: 1fr; }
  .wn-compare-pickers { grid-template-columns: 1fr; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .wn-compare-picker { padding: 13px; }
  .wn-compare-results { max-height: 260px; }
  .wn-compare-swap { justify-self: center; width: 42px; height: 42px; margin: 0; transform: rotate(90deg); }
  .wn-compare-actions { flex-direction: column-reverse; align-items: stretch; margin-left: 16px; margin-right: 16px; }
  .wn-compare-actions :is(.wn-compare-run, .wn-compare-reset) { width: 100%; min-width: 0; }
  .wn-compare-summary { display: grid; gap: 9px; }
  .wn-compare-summary > small { justify-self: start; }
  .wn-compare-route-node.is-way { width: calc(100% - 24px); margin-left: 12px; }
  .wn-compare-route-edge { margin: 0 10px; padding-left: 25px; }
 }

 @media (max-width: 500px) {
  .wn-hero { gap: 11px; padding-left: 4px; padding-right: 4px; }
  .wn-hero p { margin-top: 6px; font-size: .75rem; }
  .wn-kicker { font-size: .55rem; letter-spacing: .11em; }
  .wn-search-trigger { font-size: .73rem; }
  .wn-path__crumb { padding: 5px; font-size: .67rem; }
  .wn-compare-cta__copy small { display: none; }
  .wn-map-panel { padding-left: 3px; padding-right: 3px; }
  .wn-map-panel__counter { padding: 5px 8px; font-size: .54rem; }
  .wn-mobile-current { margin: 0 1px 9px; padding: 11px 13px 10px; }
  .wn-mobile-current h2 { font-size: 1.26rem; }
  .wn-mobile-current p { font-size: .71rem; line-height: 1.43; }
  .wn-compass { grid-template-columns: minmax(0, 1fr) 106px minmax(0, 1fr); grid-template-rows: 80px 152px 80px; gap: 9px 5px; min-height: 338px; }
  .wn-route--north, .wn-route--south { width: min(70vw, 238px); min-width: 210px; min-height: 78px; }
  :is(.wn-route--north, .wn-route--south) .wn-route__term { font-size: .84rem; }
  .wn-route--west, .wn-route--east { padding-left: 8px; padding-right: 8px; }
  :is(.wn-route--west, .wn-route--east) .wn-route__direction { font-size: .52rem; }
  :is(.wn-route--west, .wn-route--east) .wn-route__term { font-size: .88rem; }
  .wn-route.is-long .wn-route__term { font-size: .89rem; }
  .wn-route.is-very-long .wn-route__term { font-size: .82rem; }
  :is(.wn-route--west, .wn-route--east) .wn-route__context { font-size: .59rem; }
  .wn-route__context-icon { width: 13px; height: 13px; }
  .wn-route__context-arrow { width: 12px; height: 12px; font-size: .52rem; }
  .wn-center.is-long .wn-center__term { font-size: .95rem; }
  .wn-center.is-very-long .wn-center__term { font-size: .83rem; }
  .wn-center__action { width: 104px; min-width: 104px; max-width: 104px; font-size: .5rem; }
  .wn-start-grid { grid-template-columns: 1fr; }
  .wn-target { grid-template-columns: 42px 1fr auto; padding: 12px; }
  .wn-target__icon { width: 40px; height: 40px; }
  .wn-target__icon img { width: 25px; height: 25px; }
  .wn-dialog__head h2 { font-size: 1.35rem; }
  .wn-content-pick__meta { gap: 5px; }
  .wn-content-pick__access { padding: 2px 5px; font-size: .46rem; }
  .wn-compare-intro-row { margin-left: 16px; margin-right: 16px; }
  .wn-compare-pickers, .wn-compare-output { padding-left: 12px; padding-right: 12px; }
  .wn-compare-memory { margin-left: 12px; margin-right: 12px; }
  .wn-compare-memory__headcopy { display: grid; gap: 2px; }
  .wn-compare-memory__headcopy span { white-space: normal; }
  .wn-compare-results { max-height: 238px; }
  .wn-compare-picker { padding: 12px; }
  .wn-compare-picker__selection { padding: 9px; }
  .wn-compare-role { padding: 4px 6px; font-size: .53rem; }
  .wn-compare-filter__line { flex-direction: column; align-items: stretch; }
  .wn-compare-filter__line > button { width: 100%; }
  .wn-memory-choice { grid-template-columns: 1fr; gap: 6px; }
  .wn-memory-choice__actions { width: 100%; }
  .wn-memory-choice__action { flex: 1; }
  .wn-compare-route-node { padding: 12px 13px; }
  .wn-compare-route-edge { margin-left: 8px; margin-right: 4px; padding: 16px 8px 17px 22px; }
  .wn-compare-node { max-width: 100%; overflow-wrap: anywhere; }
  .wn-compare-result-actions { display: grid; grid-template-columns: 1fr; }
  .wn-compare-result-actions > button { width: 100%; }
 }

 @media (max-width: 360px) {
  .wn-mobile-current { padding: 10px 12px 9px; }
  .wn-mobile-current h2 { font-size: 1.18rem; }
  .wn-mobile-current p { font-size: .68rem; line-height: 1.4; }
  .wn-mobile-current__footer > button:not(.wn-remember) { font-size: .58rem; }
  .wn-compass { grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); grid-template-rows: 78px 148px 78px; gap: 8px 4px; min-height: 326px; }
  .wn-compass__ring { width: 224px; height: 224px; }
  .wn-route--north, .wn-route--south { width: 210px; min-width: 0; min-height: 76px; }
  :is(.wn-route--north, .wn-route--south) .wn-route__term { font-size: .79rem; }
  .wn-route--west, .wn-route--east { padding-left: 6px; padding-right: 6px; }
  :is(.wn-route--west, .wn-route--east) .wn-route__term { font-size: .8rem; }
  .wn-route--west .wn-route__direction { max-width: 70px; font-size: .5rem; }
  .wn-route.is-long .wn-route__term { font-size: .83rem; }
  .wn-route.is-very-long .wn-route__term { font-size: .76rem; }
  :is(.wn-route--west, .wn-route--east) .wn-route__context { height: 28px; font-size: .5rem; }
  .wn-route__context-arrow { display: none; }
  .wn-center { width: 98px; height: 98px; }
  .wn-center::before, .wn-center::after { width: 98px; height: 49px; }
  .wn-center__term { width: 100px; min-height: 48px; max-height: 48px; font-size: .9rem; }
  .wn-center.is-long .wn-center__term { font-size: .89rem; }
  .wn-center.is-very-long .wn-center__term { font-size: .78rem; }
  .wn-center__overline { font-size: .39rem; }
  .wn-center__action { width: 98px; min-width: 98px; max-width: 98px; font-size: .44rem; padding: 4px 6px; }
 }

 /* UX r29 (Daniel 30.09.2026, readability): r337 shrank mobile labels down to 7–8 px. Direction labels, "Info" pills,
    the centre label and action and the small content labels keep at least about 10 px on phones. */
 @media (max-width: 820px) {
  :is(.wn-route--north, .wn-route--south) .wn-route__direction { font-size: .6rem; }
  .wn-route .wn-route__context, :is(.wn-route--north, .wn-route--south, .wn-route--west, .wn-route--east) .wn-route__context { font-size: .64rem; }
  :is(.wn-route--north, .wn-route--south) .wn-route__context { min-width: 74px; height: 26px; }
  .wn-center__overline { font-size: .58rem; }
  /* UX r29: on phones "Starten" and "Zurück" become icon buttons (the label stays for screen readers), so the search
     prompt "Was möchtest du verstehen?" is readable instead of "Was möch…". */
  .wn-toolbar__primary :is(#startBtn, #backBtn) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .wn-toolbar__primary :is(#startBtn, #backBtn) { position: relative; width: 46px; min-width: 46px; padding: 0; font-size: 1.15rem; }
  .wn-center__action { width: 112px; min-width: 112px; max-width: 112px; font-size: .64rem; }
  .wn-content-pick__body small, .wn-target__type { font-size: .62rem; }
  :is(.wn-content-pick__access, .wn-target__access) { font-size: .56rem; }
 }

 /* r31 FINAL v18 type floor (normal finding from r29; decision after the image comparison 30.09.2026, template
    R4X_r29_Navigator_Schrift_Vorschlag.png). Text is at least .66rem; eyebrows, marks, chips, info symbols, "Kernpfad"
    and the Plus lock .72rem. The same selectors as above, so the floor holds at every breakpoint; larger r337 values stay.
    Exception compass ≤ 500 px (below): direction labels and "Aktueller Begriff" 10 px with .05em tracking, because a
    strict .72rem overlaps the centre at 360 px. */
 .wn-path__label, .wn-map-panel__eyebrow, .wn-inspector__eyebrow, .wn-mobile-current__eyebrow, .wn-map-panel__counter, .wn-dialog__eyebrow,
 .wn-route__direction, :is(.wn-route--north, .wn-route--south) .wn-route__direction, :is(.wn-route--west, .wn-route--east) .wn-route__direction, .wn-route--west .wn-route__direction,
 .wn-route__context-icon, :is(.wn-route--north, .wn-route--south) .wn-route__context-icon, .wn-route__context-arrow, :is(.wn-route--north, .wn-route--south) .wn-route__context-arrow,
 :is(.wn-route--north, .wn-route--south) .wn-route__arrow, .wn-center__action > span, .wn-center__overline, .wn-category, .wn-content-block__head span,
 :is(.wn-content-pick__access, .wn-target__access), .wn-content-pick__access, .wn-target__access, .wn-target__type,
 .wn-route-preview__context-kicker, .wn-route-preview__context-kicker > span, .wn-route-preview__direction, .wn-search-result__quality, .wn-start-section__head span,
 .wn-compare-access > span, .wn-compare-role, .wn-compare-filter__line > span, .wn-compare-filter__check, .wn-compare-result .wn-compare-result__direct,
 .wn-compare-route-node > span, .wn-compare-route-edge__head > span:first-child, .wn-compare-route-edge__head > strong, .wn-compare-route-edge__status,
 .wn-compare-alternatives > span, .wn-kicker { font-size: .72rem; }
 .wn-compare-cta__copy small, .wn-content-pick__body small, .wn-memory-chip small, .wn-compare-filter p, .wn-compare-picker__meta, .wn-compare-result small,
 .wn-compare-more-feedback, .wn-compare-summary > small, .wn-memory-choice__action, .wn-mobile-current__footer > button:not(.wn-remember),
 .wn-route__context, :is(.wn-route--north, .wn-route--south) .wn-route__context, :is(.wn-route--west, .wn-route--east) .wn-route__context,
 .wn-route .wn-route__context, :is(.wn-route--north, .wn-route--south, .wn-route--west, .wn-route--east) .wn-route__context { font-size: .66rem; }
 .wn-content-access-note { font-size: .68rem; }
 .wn-center__action { font-size: .69rem; }
 @media (max-width: 820px) {
  .wn-center__action { font-size: .66rem; }
 }
 @media (max-width: 500px) {
  .wn-route__direction, :is(.wn-route--north, .wn-route--south) .wn-route__direction, :is(.wn-route--west, .wn-route--east) .wn-route__direction, .wn-route--west .wn-route__direction,
  .wn-center__overline { font-size: 10px; letter-spacing: .05em; }
 }

 @media (prefers-reduced-motion: reduce) {
  .wn-center::before, .wn-center::after, .wn-compass.is-changing, .wn-inspector__view, .wn-inspector__view#currentView.is-focus-pulsing, .wn-compare-more.is-loading::before, .wn-compare-result.is-new { animation: none; }
  .wn-compare-memory__chevron, .wn-compare-more, .wn-compare-more-feedback { transition: none; }
 }
}
/* Paket AL (Daniel 19.10.2026, Variante A; apps/dashboard/tool-pages/navigator-start.mjs): UI-112/UI-113 the start screen of a
   general call (the r337 start window on the page, compass preview with the start term, start bar; on phones the bar
   stays above the lower navigation) and the large view (the navigator in the whole content area, the hero only on the
   start screen); UI-111 the Merkliste with its count and window. */
@layer components {
 .tool-page--wissens-navigator.wn-start-mode .wn-toolbar,.tool-page--wissens-navigator.wn-start-mode .wn-mobile-current,.tool-page--wissens-navigator.wn-start-mode .wn-workspace { display:none; }
 .tool-page--wissens-navigator:not(.wn-start-mode) .wn-hero { display:none; }
 /* Paket AM (V4 A, Daniel 19.10.2026): the start screen in the look of Mein Bereich. The head is its stage (central
    .r4x-stage) with the title in the display serif, the search large with gold light, the cards with soft gold light and
    a clear choice; the preview shows the chosen start term in the middle and its four real ways (a dark scene in both
    themes); the start bar names the choice in the display serif. */
 .wn-startscreen { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s6); align-items:start; margin-block:var(--s4) var(--section-gap); }
 .wn-startscreen[hidden] { display:none; }
 .wn-startscreen__choices { display:grid; gap:var(--s5); min-width:0; }
 .wn-startscreen__head { display:grid; gap:var(--s2); padding:var(--s5); }
 .wn-startscreen h2 { margin:0; font-family:var(--font-beginner); font-size:clamp(2rem,1.6rem + 1.6vw,2.875rem); font-weight:600; line-height:1.04; letter-spacing:0; }
 .wn-startscreen .wn-startscreen__search { width:100%; max-width:none; min-width:0; min-height:calc(var(--touch-target) + var(--s3)); flex:none; border-color:var(--gold-border); font-size:1rem; box-shadow:0 0 0 var(--s1) var(--gold-soft); }
 .wn-startscreen :is(.wn-recent-card,.wn-start-card,.wn-situation-card) { border-color:var(--border); background:radial-gradient(120% 100% at 0 0, var(--gold-soft), transparent 55%), var(--surface); }
 .wn-startscreen :is(.wn-recent-card,.wn-start-card,.wn-situation-card):hover { border-color:var(--gold-border); }
 .wn-startscreen .wn-situation-card__icon { background:var(--gold-soft); }
 .wn-startscreen .wn-start-section { margin:0; padding:0; border:0; min-width:0; }
 .wn-startscreen .wn-start-section + .wn-start-section { padding-top:var(--s5); border-top:1px solid var(--border); }
 .wn-startscreen .wn-situation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .wn-startscreen [aria-pressed='true'] { border-color:var(--gold); background:linear-gradient(135deg, var(--gold-soft), transparent 70%), var(--surface); box-shadow:0 0 0 2px var(--gold-border), var(--shadow-card); }
 .wn-startscreen__aside { position:sticky; top:calc(var(--shell-sticky-height) + var(--s4)); display:grid; gap:var(--s3); }
 /* The preview: the colours of the four directions are taken again inside the dark scene, so they follow its tokens. */
 .wn-start-preview { --wn-dir-basics:var(--info); --wn-dir-depth:color-mix(in srgb, var(--info) 55%, var(--danger)); --wn-dir-practice:var(--success); --wn-dir-neighbor:var(--accent-text); position:relative; display:grid; grid-template-columns:1fr 1.15fr 1fr; grid-template-rows:auto 1fr auto; gap:var(--s3); align-items:center; aspect-ratio:1 / 1.02; padding:var(--s5) var(--s4); overflow:hidden; border:1px solid var(--navy-border); border-radius:var(--radius-card); background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 45%), radial-gradient(circle at 50% 50%, var(--navy-surface), var(--navy-page) 80%); color:var(--brand-text); }
 .wn-start-preview::before,.wn-start-preview::after { content:''; position:absolute; inset:14%; border:1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius:var(--radius-pill); }
 .wn-start-preview::after { inset:26%; border-style:dashed; border-color:color-mix(in srgb, var(--brand-text) 18%, transparent); }
 .wn-start-preview__route { --wn-start-dir:var(--wn-dir-neighbor); position:relative; z-index:1; display:grid; gap:var(--s1); padding:var(--s2) var(--s3); border:1px solid color-mix(in srgb, var(--wn-start-dir) 55%, transparent); border-radius:var(--radius-control); background:color-mix(in srgb, var(--navy-page) 82%, transparent); text-align:center; box-shadow:var(--shadow-elevated); }
 .wn-start-preview__route small { color:var(--wn-start-dir); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
 .wn-start-preview__route strong { font-size:.9375rem; line-height:1.2; overflow-wrap:anywhere; hyphens:auto; }
 .wn-start-preview__route--n { --wn-start-dir:var(--wn-dir-basics); grid-column:1 / -1; grid-row:1; justify-self:center; min-width:50%; }
 .wn-start-preview__route--s { --wn-start-dir:var(--wn-dir-practice); grid-column:1 / -1; grid-row:3; justify-self:center; min-width:50%; }
 .wn-start-preview__route--w { grid-column:1; grid-row:2; }
 .wn-start-preview__route--e { --wn-start-dir:var(--wn-dir-depth); grid-column:3; grid-row:2; }
 .wn-start-preview__center { position:relative; z-index:1; grid-column:2; grid-row:2; display:grid; place-items:center; align-content:center; gap:var(--s1); aspect-ratio:1; padding:var(--s3); border:2px solid var(--gold); border-radius:var(--radius-pill); background:radial-gradient(circle, var(--navy-surface), var(--navy-page)); box-shadow:0 0 0 var(--s1) color-mix(in srgb, var(--gold) 18%, transparent), 0 0 var(--s7) color-mix(in srgb, var(--gold) 35%, transparent); text-align:center; }
 .wn-start-preview__center small { color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
 .wn-start-preview__center strong { font-family:var(--font-beginner); font-size:1.5rem; font-weight:600; line-height:1.05; overflow-wrap:anywhere; hyphens:auto; }
 .wn-startbar { display:grid; gap:var(--s2); padding:var(--s4); border:1px solid var(--gold-border); border-radius:var(--radius-card); background:radial-gradient(90% 120% at 0 0, var(--gold-soft), transparent 60%), var(--surface); box-shadow:var(--shadow-card); }
 .wn-startbar__choice { display:grid; gap:var(--s1); margin:0; }
 .wn-startbar__choice small { color:var(--text-muted); font-size:.8125rem; }
 .wn-startbar__choice strong { font-family:var(--font-beginner); font-size:1.5rem; font-weight:600; line-height:1.15; }
 .wn-startbar__choice span { color:var(--accent-text); font-size:.875rem; font-weight:600; }
 .wn-startbar .btn { justify-content:center; min-height:calc(var(--touch-target) + var(--s2)); font-size:1rem; }
 .wn-control--memory { gap:var(--s2); }
 .wn-memory__hat { width:1.125rem; height:1.125rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 .wn-control__count { display:inline-grid; place-items:center; min-width:var(--s5); height:var(--s5); padding-inline:var(--s1); border:1px solid var(--gold-border); border-radius:var(--radius-pill); background:var(--gold-soft); color:var(--accent-text); font-size:.75rem; font-weight:700; }
 /* Paket AM (V8, Daniel 19.10.2026 "überall gleich zwecks Wiedererkennung"): the Merkliste in the look of the window of
    Mein Bereich: the stage with gold light, title and terms in the display serif, the way to the overview in gold. */
 .wn-dialog__panel--memory { display:grid; gap:var(--s3); width:min(40rem,100%); padding-bottom:var(--s5); border-color:var(--gold-border); background:radial-gradient(80% 60% at 0 0, var(--gold-soft), transparent 60%), linear-gradient(180deg, var(--stage-a), var(--stage-b)); }
 .wn-dialog__panel--memory .wn-dialog__head h2 { font-family:var(--font-beginner); font-size:clamp(1.875rem, 1.5rem + 1vw, 2.25rem); font-weight:600; line-height:1.05; letter-spacing:0; }
 .wn-dialog__panel--memory > :not(.wn-dialog__head) { margin-inline:var(--s5); }
 .wn-memory-list { display:grid; gap:var(--s2); max-height:min(60svh,34rem); margin:0; padding:0; overflow:auto; list-style:none; }
 .wn-memory-row { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s2); padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); }
 .wn-memory-row:hover { border-color:var(--gold-border); }
 .wn-memory-row__copy { display:grid; gap:var(--s1); min-width:0; }
 .wn-memory-row__copy strong { color:var(--accent-text); font-family:var(--font-beginner); font-size:1.5rem; font-weight:600; line-height:1.1; overflow-wrap:anywhere; }
 .wn-memory-row__copy small { display:-webkit-box; overflow:hidden; color:var(--text-muted); font-size:.8125rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
 .wn-memory-row__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2); }
 .wn-memory-row__actions .btn-free-secondary { min-height:var(--touch-target); border-color:var(--gold-border); }
 .wn-memory-empty { display:grid; gap:var(--s2); padding:var(--s4); border:1px dashed var(--border); border-radius:var(--radius-control); background:var(--surface-muted); }
 .wn-memory-empty p { margin:0; color:var(--text-muted); font-size:.875rem; }
 .wn-memory-foot { display:flex; justify-content:flex-end; margin:0; }
 .wn-memory-foot .btn { color:var(--accent-text); }
 @media (max-width:47.99rem) {
  .wn-startscreen { grid-template-columns:minmax(0,1fr); }
  .wn-startscreen .wn-situation-grid { grid-template-columns:minmax(0,1fr); }
  .wn-startscreen__aside { top:auto; bottom:calc(var(--bottom-nav-space) + var(--s2)); z-index:var(--z-sticky); }
  .wn-start-preview { display:none; }
  .wn-startbar { gap:var(--s2); padding:var(--s3); box-shadow:var(--shadow-elevated); }
  .wn-startbar__choice { grid-template-columns:auto minmax(0,1fr); column-gap:var(--s2); align-items:baseline; }
  .wn-startbar__choice strong { overflow:hidden; font-size:1.25rem; white-space:nowrap; text-overflow:ellipsis; }
  .wn-startscreen__head { padding:var(--s4); }
  .wn-startbar__choice span { grid-column:1 / -1; }
  body:has(.wn-start-mode) .back-top { display:none; }
 }
 /* Paket AM (V7 A, Daniel 19.10.2026: "Der Navigator ist das Hauptbedienelement und soll am Screen immer bedienbar
    bleiben"; "Im Wissens-Navigator muss zusätzlich die Beschreibung des Begriffs sichtbar sein mobile"): on phones one bar
    of five buttons above the compass (← Start, search, Merkliste with its count, Begriffe verbinden, Zurück), the way below
    it with "Weg zurücksetzen" at its end; the description of the term follows the compass (no longer sticky, without a
    second title, the term stands in the centre of the compass) with "Merken" and "Inhalte und Fragen". As in the chosen
    draft the line "Wissenspfad" with its counter gives its place on phones, so compass and description stand in the first
    screen (the centre of the compass names the term). */
 @media (max-width:820px) {
  .tool-page--wissens-navigator { padding-top:var(--s2); }
  .wn-toolbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:var(--s1) var(--s2); padding:var(--s2); }
  .wn-toolbar__primary,.wn-toolbar__actions { display:contents; }
  .wn-toolbar :is(#startBtn,#searchTrigger,#memoryListBtn,#compareBtn,#backBtn) { position:relative; grid-row:1; width:100%; min-width:0; min-height:var(--touch-target); padding:0; justify-content:center; }
  .wn-toolbar #startBtn { grid-column:1; gap:2px; font-size:.875rem; }
  .wn-toolbar #startBtn > span:last-child { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .wn-toolbar #searchTrigger { grid-column:2; }
  .wn-toolbar #memoryListBtn { grid-column:3; }
  .wn-toolbar #compareBtn { grid-column:4; }
  .wn-toolbar #backBtn { grid-column:5; }
  /* The words of the search, the Merkliste and "Begriffe verbinden" (with its Plus mark) stay for screen readers. */
  .wn-toolbar :is(#searchTrigger > span:nth-child(2),#memoryListBtn > span:not([data-wn-memory-count]),.wn-compare-cta__copy,.wn-control__plus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .wn-toolbar .wn-path { grid-column:1 / 5; grid-row:2; min-width:0; min-height:0; padding:0 var(--s1); overflow:hidden; }
  .wn-toolbar #resetBtn { grid-column:5; grid-row:2; justify-self:center; }
  .wn-map-panel { padding-top:var(--s2); padding-bottom:var(--s2); }
  .wn-map-panel__topline { display:none; }
  .wn-mobile-current { position:static; margin:0; padding:var(--s3) var(--s4); backdrop-filter:none; }
  .wn-mobile-current__eyebrow { display:none; }
  .wn-mobile-current h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .wn-mobile-current p { margin:0; color:var(--text); font-size:.9375rem; line-height:1.5; }
  .wn-inspector { margin-top:0; }
  :is(.wn-content-block,.wn-map-panel,.wn-inspector) { scroll-margin-top:calc(var(--wn-sticky-top) + var(--s4)); }
 }
}