/*
 * Navigationen „Arc Pure“, „Arc + Detailpanel“ und „Mosaik“ (UI/UX-Designsystem 2026-10-08) - Logik assets/js/alt_nav.js.
 * Greift nur unter :root[data-layout="arc" | "arc_panel" | "mosaic"]; Farben ausschließlich über die Tokens (jeder Stil,
 * jede Palette, hell und dunkel). Bewegung: nur transform/opacity (Arc) bzw. ein gemeinsamer Positionswechsel (Mosaik),
 * ruhige Kurven, Dauern nach docs/reports/UIUX Designsystem Recherche 2026-10.md.
 */
#altNav, .alt-home-link { display: none; }
:root[data-layout="arc"] .alt-home-link:not([hidden]), :root[data-layout="arc_panel"] .alt-home-link:not([hidden]), :root[data-layout="arc_cat"] .alt-home-link:not([hidden]), :root[data-layout="arc_cat_top"] .alt-home-link:not([hidden]), :root[data-layout="mosaic"] .alt-home-link:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-sm); padding: 0 var(--sp-3); border-radius: var(--r-pill);
  color: var(--c-ink); font-size: var(--fs-2); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--dur-hover) var(--ease-calm), background-color var(--dur-hover) var(--ease-calm);
}
.alt-home-link:hover { background: var(--c-surface-2); }
.alt-home-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
body.alt-home .alt-home-link { display: none !important; }

/* Startseite: Studio und Bereichs-Startseite aus, schlanke Kopfzeile (Name + Konto/Werkzeuge rechts) */
body.alt-home .studio-shell, body.alt-home #wsHome, body.alt-home .ws-home { display: none !important; }
body.alt-home .ws-nav, body.alt-home .app-header__new { display: none !important; }
body.alt-home #altNav {
  display: block; position: relative; height: calc(100vh - var(--alt-top, 64px)); min-height: 480px;
  width: 100vw; max-width: none !important; margin: calc(var(--sp-3) * -1) 0 0 calc(50% - 50vw) !important; overflow: hidden;
}
.alt-hint { position: absolute; left: clamp(16px, 3vw, 40px); bottom: 12px; margin: 0; font-size: var(--fs-1); color: var(--c-muted); z-index: 3; }
.alt-hint__btn { margin: 0; padding: 2px 4px; border: 0; background: none; color: var(--c-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.alt-hint__btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ================================================================ ARC */
.arc .alt-hint { top: 14px; bottom: auto; left: auto; right: clamp(16px, 3vw, 40px); }
.arc { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc.is-dragging { cursor: grabbing; }
.arc-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.arc-line { fill: none; stroke: var(--c-line); stroke-width: 1.25; }
.arc-line--outer { stroke-dasharray: 2 6; opacity: 0; transition: opacity var(--dur-panel) var(--ease-calm); }
.arc--pure.is-open .arc-line--outer { opacity: 1; }
.arc-link { fill: none; stroke: var(--c-muted); stroke-width: 1; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 380ms var(--ease-calm) var(--d, 0ms); }
.arc-links.is-in .arc-link { stroke-dashoffset: 0; }
.arc-bignum { position: absolute; right: clamp(16px, 4vw, 64px); bottom: -3vh; margin: 0; font-size: 30vh; font-weight: 200; line-height: 1; letter-spacing: -.05em; color: var(--c-line); pointer-events: none; font-variant-numeric: tabular-nums; }
.arc--panel.is-open .arc-bignum { opacity: 0; }
.arc-nodes, .arc-targets { list-style: none; margin: 0; padding: 0; }
.arc-node { position: absolute; left: 0; top: 0; will-change: transform; }
.arc-node__btn {
  position: absolute; left: 0; top: 0; transform: translate(-9px, -50%); display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 6px 10px 6px 0; border: 0; background: none; color: var(--c-ink-2); font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.arc-node__dot { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 0 0 1.5px var(--c-muted);
  transition: box-shadow var(--dur-panel) var(--ease-calm), transform var(--dur-hover) var(--ease-calm); }
.arc-node__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.arc-node__title {
  display: inline-block; font-size: clamp(30px, 4.2vw, 58px); font-weight: var(--t-display-fw, 700); letter-spacing: var(--t-display-ls, -.02em); line-height: 1;
  transform-origin: 0 55%; transform: scale(calc((.42 + .58 * var(--near, 0)) * var(--ok, 1))); transition: --ok 340ms var(--ease-calm);
}
/* Beim Auffächern macht der Titel Platz (registrierte Eigenschaft -> weicher Übergang statt Sprung) */
@property --ok { syntax: '<number>'; inherits: true; initial-value: 1; }
.arc--pure.is-open .arc-node.is-focus .arc-node__title { --ok: .55; }
.arc-node.is-focus .arc-node__btn { color: var(--c-ink); }
.arc-node.is-focus .arc-node__dot { box-shadow: inset 0 0 0 5px var(--c-brand); }
.arc-node__btn:hover .arc-node__dot { transform: scale(1.18); }
.arc-node__btn:hover { color: var(--c-ink); }
.arc-node__btn:focus-visible { outline: none; }
.arc-node__btn:focus-visible .arc-node__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.arc-node__btn:focus-visible .arc-node__dot { box-shadow: inset 0 0 0 5px var(--c-brand), 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-ink); }
.arc-node__purpose { position: absolute; left: 70px; top: clamp(26px, 3vw, 40px); width: min(360px, 30vw); margin: 0; font-size: var(--fs-3); line-height: 1.45; color: var(--c-ink-2);
  opacity: var(--near, 0); pointer-events: none; }
.arc--pure.is-open .arc-node__purpose { opacity: 0; transition: opacity var(--dur-hover) var(--ease-calm); }
/* Auffächern (Pure): Ziele auf dem äußeren Bogen, Schrift waagerecht */
.arc-targets { position: absolute; inset: 0; pointer-events: none; }
.arc-t { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity;
  transition: transform 400ms var(--ease-move) var(--d, 0ms), opacity 260ms var(--ease-calm) var(--d, 0ms); }
.arc-t.is-in { opacity: 1; pointer-events: auto; }
.arc-t__a { position: absolute; left: 0; top: 0; transform: translate(-5px, -50%); display: flex; align-items: baseline; gap: 10px; padding: 6px 10px 6px 0;
  color: var(--c-ink); text-decoration: none; white-space: nowrap; font-size: var(--fs-4); font-weight: 600; }
.arc-t__dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; align-self: center; background: var(--c-bg); box-shadow: inset 0 0 0 1.5px var(--c-muted);
  transition: box-shadow var(--dur-hover) var(--ease-calm); }
.arc-t__sub { font-size: var(--fs-1); font-weight: 400; color: var(--c-muted); }
.arc-t__a:hover .arc-t__dot, .arc-t__a:focus-visible .arc-t__dot { box-shadow: inset 0 0 0 5px var(--c-brand); }
.arc-t__a:hover .arc-t__label, .arc-t__a:focus-visible .arc-t__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.arc-t__a:focus-visible { outline: none; }
/* Detailpanel (B2) */
.arc-panel {
  position: absolute; top: 20px; right: clamp(12px, 2.4vw, 32px); bottom: 20px; z-index: 4; width: min(440px, 40vw); overflow: auto; box-sizing: border-box;
  padding: var(--sp-6); border-radius: var(--r-md); background: var(--c-bg); box-shadow: var(--nm-3);
  opacity: 0; transform: translateX(28px); transition: opacity 260ms var(--ease-calm), transform 340ms var(--ease-calm);
}
.arc-panel.is-in { opacity: 1; transform: none; }
.arc-panel[hidden] { display: none; }
.arc-panel:focus { outline: none; }
.arc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.arc-panel__kicker { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--t-label-fs, 12px); font-weight: 700; letter-spacing: var(--t-label-ls, .1em); text-transform: uppercase; color: var(--c-muted); }
.arc-panel__head .arc-panel__kicker { margin: 0; }
.arc-panel__close { min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink); font: inherit; font-size: var(--fs-1); font-weight: 700; cursor: pointer; }
.arc-panel__close:focus-visible, .arc-panel__a:focus-visible, .arc-panel__view:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.arc-panel__title { margin: var(--sp-3) 0 var(--sp-2); font-size: clamp(26px, 2.6vw, 36px); font-weight: var(--t-h1-fw, 700); letter-spacing: var(--t-h1-ls, -.01em); line-height: 1.1; }
.arc-panel__purpose { margin: 0; color: var(--c-ink-2); }
.arc-panel__intro { margin: var(--sp-2) 0 0; font-size: var(--fs-2); line-height: 1.5; color: var(--c-muted); }
.arc-panel__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.arc-panel__list li { border-bottom: 1px solid var(--c-line); }
.arc-panel__a { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-1); color: var(--c-ink); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-calm); }
.arc-panel__a:hover { background: var(--c-surface-2); }
.arc-panel__a strong { display: block; font-size: var(--fs-4); }
.arc-panel__a small { display: block; margin-top: 2px; font-size: var(--fs-2); line-height: 1.4; color: var(--c-muted); }
.arc-panel__ic { flex: 0 0 auto; color: var(--c-ink-2); margin-top: 1px; }
.arc-panel__ic svg { width: 20px; height: 20px; }
.arc-panel__views { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-panel__view { padding: 6px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink); font-size: var(--fs-2); font-weight: 600; text-decoration: none; }
.arc-panel__view:hover { background: var(--c-surface-2); }

/* ================================================================ MOSAIK */
.mos { position: absolute; inset: 0; overflow: auto; padding: clamp(16px, 2.4vw, 32px) clamp(16px, 4vw, 56px) 44px; box-sizing: border-box; }
.mos-grid { position: relative; list-style: none; margin: 0; padding: 0; }
.mos-cell { position: absolute; box-sizing: border-box; }
.mos-grid.is-anim .mos-cell { transition: left 420ms var(--ease-move), top 420ms var(--ease-move), width 420ms var(--ease-move), height 420ms var(--ease-move); }
.mos-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-sm); background: var(--c-bg); box-shadow: var(--nm-2), inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--dur-hover) var(--ease-calm); }
.mos-tile:hover { box-shadow: var(--nm-2), inset 0 0 0 1px var(--c-muted); }
.mos-tile__btn {
  flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-content: start; gap: 4px var(--sp-3); min-height: 0;
  margin: 0; padding: clamp(14px, 1.4vw, 22px); border: 0; background: none; color: var(--c-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.mos-tile__btn:disabled { cursor: default; }
.mos-tile__btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -4px; border-radius: var(--r-sm); }
.mos-tile__num { grid-column: 1; font-size: clamp(28px, 3.2vw, 52px); font-weight: 200; line-height: 1; letter-spacing: -.04em; color: var(--c-muted); font-variant-numeric: tabular-nums;
  transition: color var(--dur-hover) var(--ease-calm); }
.mos-tile__ic { grid-column: 2; grid-row: 1; color: var(--c-ink-2); }
.mos-tile__label { grid-column: 1 / -1; align-self: end; font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; line-height: 1.2; }
.mos-tile__purpose { grid-column: 1 / -1; font-size: var(--fs-2); line-height: 1.4; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mos-tile__go { position: absolute; right: 18px; bottom: 14px; font-weight: 700; color: var(--c-ink-2); }
.mos-tile:hover .mos-tile__num { color: var(--c-brand-deep); }
.mos-tile.is-small .mos-tile__purpose, .mos-tile.is-small .mos-tile__ic { display: none; }
.mos-tile.is-small .mos-tile__num { font-size: clamp(22px, 2vw, 32px); }
.mos-tile.is-open { z-index: 2; }
.mos-tile.is-open .mos-tile__btn { flex: 0 0 auto; grid-template-rows: auto auto auto; }
.mos-tile.is-open .mos-tile__label { font-size: clamp(22px, 2vw, 30px); }
.mos-tile.is-open .mos-tile__purpose { -webkit-line-clamp: 3; }
.mos-tile__body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 clamp(14px, 1.4vw, 22px) 14px; opacity: 0; transition: opacity 240ms var(--ease-calm) 220ms; }
.mos-tile__body.is-in { opacity: 1; }
.mos-links { list-style: none; margin: 4px 0 0; padding: 0 0 0 20px; columns: 2 220px; column-gap: var(--sp-6); border-left: 1px solid var(--c-line); }
.mos-links li { break-inside: avoid; }
.mos-link { position: relative; display: block; padding: 6px 0; color: var(--c-ink); text-decoration: none; }
.mos-link::before { content: ""; position: absolute; left: -20px; top: 1.05em; width: 14px; height: 1px; background: var(--c-muted); opacity: .6; }
.mos-link strong { font-size: var(--fs-3); }
.mos-link small { display: block; font-size: var(--fs-1); color: var(--c-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mos-link:hover strong, .mos-link:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.mos-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.mos-link--view strong::after { content: " ↗"; color: var(--c-muted); font-weight: 400; }
.mos-close { margin-top: var(--sp-3); min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink); font: inherit; font-size: var(--fs-1); font-weight: 700; cursor: pointer; }
.mos-close:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* Fragmente: dekorativ, klar von den Funktionskacheln unterscheidbar (kein Rahmen, keine Schrift) */
.mos-frag { pointer-events: none; overflow: hidden; transition: opacity var(--dur-panel) var(--ease-calm); }
.mos-frag.is-gone { opacity: 0; }
.mos-frag span { position: absolute; inset: 0; }
.mos-frag--circle span { inset: 8% auto auto 8%; width: 180%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-muted); opacity: .5; }
.mos-frag--circle::after { content: ""; position: absolute; left: 8%; top: 8%; width: 14px; height: 14px; border-radius: 50%; background: var(--c-brand); transform: translate(-50%, -50%); }
.mos-frag--lines span { background: repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 14px); }

/* ================================================================ LISTE (Handy + „Als Liste“) */
.alt-list { position: absolute; inset: 0; overflow: auto; padding: var(--sp-5) clamp(16px, 4vw, 56px) 56px; box-sizing: border-box; }
.alt-list__ol { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; border-top: 1px solid var(--c-line); }
.alt-list__g { border-bottom: 1px solid var(--c-line); }
.alt-list__head { display: grid; grid-template-columns: 3.2em 1fr; gap: 2px var(--sp-3); width: 100%; margin: 0; padding: var(--sp-4) var(--sp-1); border: 0; background: none; color: var(--c-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.alt-list__head:disabled { cursor: default; }
.alt-list__head:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.alt-list__num { grid-row: 1 / span 2; font-size: 28px; font-weight: 200; line-height: 1; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.alt-list__label { font-size: var(--fs-5); font-weight: 700; }
.alt-list__purpose { font-size: var(--fs-2); color: var(--c-muted); line-height: 1.4; }
.alt-list__g.is-open .alt-list__num { color: var(--c-brand-deep); }
.alt-list__links { list-style: none; margin: 0 0 var(--sp-4) calc(3.2em + var(--sp-3)); padding: 0 0 0 16px; border-left: 1px solid var(--c-line); }
.alt-list__a { display: block; padding: 8px 0; min-height: 28px; color: var(--c-ink); font-weight: 600; text-decoration: none; }
.alt-list__a small { font-weight: 400; color: var(--c-muted); }
.alt-list__a:hover, .alt-list__a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.alt-list__a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.is-list .alt-hint { position: static; text-align: center; margin: var(--sp-4) 0 0; }

/* Tablet: Panel breiter, Bogen etwas schmaler */
@media (max-width: 1100px) { .arc-panel { width: min(400px, 48vw); } .arc-node__purpose { width: min(300px, 34vw); } }
/* Bewegung reduziert: Überblenden statt Fliegen */
@media (prefers-reduced-motion: reduce) {
  .arc-t, .arc-panel, .mos-grid.is-anim .mos-cell, .mos-tile__body { transition: opacity 150ms linear !important; }
  .arc-link { transition: none; }
}
:root[data-motion="reduced"] .arc-t, :root[data-motion="reduced"] .arc-panel, :root[data-motion="reduced"] .mos-tile__body { transition: opacity 150ms linear !important; }
/* Tablet: bei offenem Panel macht der Titel etwas Platz, der Erklärsatz tritt zurück (Panel zeigt ihn ohnehin) */
@media (max-width: 1200px) {
  .arc--panel.is-open .arc-node.is-focus .arc-node__title { --ok: .72; }
  .arc--panel.is-open .arc-node__purpose { opacity: 0; transition: opacity var(--dur-hover) var(--ease-calm); }
}

/* Schnellzugriff „Angeheftet“ im Arc (2026-10-09): ruhige Leiste unten links, Text waagerecht, normale Links */
.alt-fav { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 16px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: min(720px, 46vw); transition: opacity var(--dur-panel) var(--ease-calm); }
.arc--panel.is-open .alt-fav { opacity: 0; pointer-events: none; visibility: hidden; }
.alt-fav__t { margin-right: 4px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--c-bg); font-size: var(--t-label-fs, 12px); font-weight: 700; letter-spacing: var(--t-label-ls, .1em); text-transform: uppercase; color: var(--c-muted); }
.alt-fav__a { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink); font-size: var(--fs-2); font-weight: 600; text-decoration: none;
  transition: box-shadow var(--dur-hover) var(--ease-calm); }
.alt-fav__a span { color: var(--c-brand-deep); }
.alt-fav__a:hover { box-shadow: inset 0 0 0 1px var(--c-muted); }
.alt-fav__a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
:root[data-design="glass"] .alt-fav__a, :root[data-design="glass"] .alt-fav__t { background: var(--gl-pane); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
/* Würfel-Startseite (cube_nav.js): gleiche Leiste; Klicks lösen kein Drehen aus */
.cube-fav[hidden] { display: none; }
.cube-stage .cube-fav { cursor: default; }

/* ================================================================ ARC KATEGORIEN (2026-10-09) */
/* Sechs feste Knoten; Darüberfahren vergrößert ruhig auf 1,5× (nur transform), Ziele fahren nach ~1 s Verweilen daneben auf. */
.arc--cat .arc-node__title { font-size: clamp(22px, 2.1vw, 34px); transform: scale(1); transform-origin: 0 55%; transition: transform 200ms var(--ease-calm), color 160ms var(--ease-calm); }
.arc--cat .arc-node.is-hot .arc-node__title { transform: scale(1.5); }
.arc--cat .arc-node.is-hot .arc-node__btn, .arc--cat .arc-node.is-open .arc-node__btn { color: var(--c-ink); }
.arc--cat .arc-node.is-hot .arc-node__dot { transform: scale(1.18); }
.arc--cat .arc-node.is-open .arc-node__dot { box-shadow: inset 0 0 0 5px var(--c-brand); }
.arc--cat .arc-node__btn:focus-visible .arc-node__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.arc-t__more { border: 0; background: none; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--c-ink-2); cursor: pointer; }
.arc-t__more:hover, .arc-t__more:focus-visible { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; outline: none; }
@media (prefers-reduced-motion: reduce) { .arc--cat .arc-node__title { transition: none; } }

/* Leiterbahnen (2026-10-09): 45°-Knicke, Äste zweigen nacheinander ab, Lötpunkte; Aufbau und Abbau über --d/--dur je Element */
.arc--cat .arc-link { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: miter; stroke-linecap: butt; stroke-width: 1.25; opacity: .75;
  transition: stroke-dashoffset var(--dur, 200ms) cubic-bezier(.45, 0, .25, 1) var(--d, 0ms); }
.arc--cat .arc-trace.is-in .arc-link { stroke-dashoffset: 0; }
.arc--cat .arc-trace.is-out .arc-link { stroke-dashoffset: 1; }
.arc-via { fill: var(--c-muted); opacity: 0; transition: opacity 140ms linear var(--d, 0ms); }
.arc--cat .arc-trace.is-in .arc-via { opacity: 1; }
.arc--cat .arc-trace.is-out .arc-via { opacity: 0; }
/* Ziele: blenden nach ihrem Ast ein und gleiten leicht nach rechts; Lage setzt das Skript (ausweichen beim Hover) */
.arc--cat .arc-t { transition: opacity 220ms var(--ease-calm) var(--d, 0ms); will-change: auto; }
.arc--cat .arc-t .arc-t__a { transform: translate(-16px, -50%); transition: transform 260ms var(--ease-calm) var(--d, 0ms); }
.arc--cat .arc-t.is-in .arc-t__a { transform: translate(-5px, -50%); }
.arc--cat .arc-t.is-out { opacity: 0; pointer-events: none; transition: opacity 170ms var(--ease-calm) var(--d, 0ms); }
.arc--cat .arc-t__label { font-size: var(--fs-4); transition: font-size 200ms var(--ease-calm); }
.arc--cat .arc-t.is-big .arc-t__label { font-size: calc(var(--fs-4) * 2); }
.arc--cat .arc-t.is-big .arc-t__dot { box-shadow: inset 0 0 0 5px var(--c-brand); }
@media (prefers-reduced-motion: reduce) {
  .arc--cat .arc-link, .arc-via, .arc--cat .arc-t, .arc--cat .arc-t .arc-t__a, .arc--cat .arc-t__label { transition: opacity 150ms linear !important; }
  .arc--cat .arc-link { stroke-dashoffset: 0; }
}
:root[data-motion="reduced"] .arc--cat .arc-link { stroke-dashoffset: 0; }

/* Bedienhinweise nur für Screenreader (sichtbar stehen sie im UI/UX-Fenster und im Handbuch) */
.alt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================================ MOSAIK als Kachel-Collage (2026-10-09) */
/* Raster ohne Lücken; Spalten/Zeilen-Gewichte setzt alt_nav.js (Hover = weiches Wachsen). Farben nur aus Tokens:
   Akzent = --c-brand (Original: CD-Rot), Schwarz = --c-ink, Papier = --c-bg/--c-surface-2. Fenster-Kacheln sind durchsichtig,
   dahinter liegt das Bild (Maske). Schrift: auf Akzent --c-brand-ink, auf Schwarz --c-bg, auf Papier --c-ink (alle abgesichert). */
.col { position: absolute; inset: 0; padding: clamp(10px, 1.6vw, 24px); box-sizing: border-box; background: var(--c-bg); }
.col__img { position: absolute; inset: clamp(10px, 1.6vw, 24px); background: center / cover no-repeat var(--c-surface-2); }
.col__grid { position: relative; height: 100%; display: grid; gap: 0; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr); }
.col-t { position: relative; min-width: 0; min-height: 0; overflow: hidden; box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-ink) 22%, transparent); }
/* Farben */
.col-t--brand, .col-d--brand { background: var(--c-brand); color: var(--c-brand-ink); }
.col-t--dark, .col-d--dark { background: var(--c-ink); color: var(--c-bg); }
.col-t--paper { background: var(--c-bg); color: var(--c-ink); }
.col-d--code, .col-d--num, .col-d--pie, .col-d--lines { background: var(--c-bg); color: var(--c-ink); }
.col-d--kpi { background: var(--c-brand); color: var(--c-brand-ink); }
.col-d--dot { background: var(--c-surface-2); color: var(--c-ink); }
.col-d--grid { background: var(--c-surface-2) repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--c-ink) 28%, transparent) 13px 14px), var(--c-surface-2) repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--c-ink) 28%, transparent) 13px 14px); background-blend-mode: multiply; }
.col-d--img { background: transparent; box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-ink) 30%, transparent); }
/* Gestaltung */
.col-d__code { position: absolute; left: 10px; top: 8px; font: 500 11px/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; }
.col-d__code--b { top: auto; bottom: 8px; left: auto; right: 10px; }
.col-d__num { position: absolute; left: 10px; bottom: -.12em; font-size: clamp(54px, 8vh, 110px); font-weight: 800; line-height: 1; }
.col-d__kpi { position: absolute; right: 10px; bottom: 6px; font-size: clamp(24px, 3.4vh, 40px); font-weight: 300; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.col-d__dotbig { position: absolute; left: 22%; top: 30%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.col-d__dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; }
.col-d__pie { position: absolute; left: 12px; top: 50%; width: 46%; max-width: 70px; transform: translateY(-50%); }
.col-d__pie + .col-d__code { top: auto; bottom: 8px; left: auto; right: 10px; }
.col-d__ln { display: block; height: 1px; margin: 14px 12px 0; background: currentColor; opacity: .7; }
.col-d__ln--s { width: 40%; }
/* Funktionskacheln */
.col-t__head { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4px; margin: 0; padding: clamp(10px, 1.2vw, 18px);
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.col-t--fn.is-hot .col-t__head { bottom: auto; }
.col-t__num { font-size: clamp(22px, 3vh, 38px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.col-t__label { font-size: clamp(15px, 1.25vw, 20px); font-weight: 700; line-height: 1.15; transition: font-size 260ms var(--ease-calm); }
.col-t--fn.is-hot .col-t__label { font-size: clamp(20px, 1.9vw, 30px); }
.col-t__count { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.col-t--fn.is-hot .col-t__count { display: none; }
.col-t__head:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.col-t__list { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 16px); list-style: none;
  columns: 2 150px; column-gap: 18px; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease-calm), transform 260ms var(--ease-calm), visibility 0s linear 260ms; }
.col-t--fn.is-hot .col-t__list { visibility: visible; opacity: 1; transform: none; transition: opacity 240ms var(--ease-calm) 160ms, transform 300ms var(--ease-calm) 160ms, visibility 0s; }
.col-t__list li { break-inside: avoid; border-top: 1px solid currentColor; }
.col-t__a { display: block; padding: 6px 0 7px; color: inherit; font-size: var(--fs-3); font-weight: 700; text-decoration: none; }
.col-t__a small { display: block; font-size: 11px; font-weight: 500; }
.col-t__a:hover, .col-t__a:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }

@media (prefers-reduced-motion: reduce) { .col-t__list, .col-t__label { transition: none !important; } }
/* Geschrumpfte Funktionskacheln: nur Nummer und Name, nichts abgeschnitten */
.col.is-open .col-t--fn:not(.is-hot) .col-t__count { display: none; }
.col-t__count { transition: opacity 160ms var(--ease-calm); }