/* Toc -- mitlaufendes Inhaltsverzeichnis und Breadcrumb-Zeile fuer lange Seiten (Rechtstexte, Styleguide, Konzepte). Kein Eingriff in frame.html. Das Modul haengt sich selbst unter die Kopfleiste und neben die Lesespalte, per Seite eingebunden ueber zwei Zeilen im beziehungsweise vor . Wer es wieder los sein will, nimmt die zwei Zeilen raus -- der Frame bleibt unberuehrt. Drei Bausteine: .toc-kopf Klebende Zeile direkt unter der Kopfleiste. Traegt die Breadcrumbs und, wenn die Schiene nicht passt, die Kompaktleiste. Spannt wie die Kopfleiste ueber die volle Breite (negative Aussenabstaende gegen --pad-stage). .toc-rail Schiene links neben der Lesespalte. Nur wenn dort Platz ist -- das entscheidet toc.js an der gemessenen Breite, nicht eine Media Query, weil .page 780px und .page-wide 1120px breit sein kann. .toc-panel Aufklappliste der Kompaktleiste. Das bestehende statische .toc aus dem Theme bleibt der Zustand ohne JavaScript und wird von toc.js nur ausgeblendet, wenn die Schiene oder die Kompaktleiste tatsaechlich steht. Ohne JS bleibt also alles lesbar. Laedt NACH https://ui.1.ki/theme/1ki-theme.css. Nur Theme-Token, keine rohen Hex-Werte -- damit greifen die Darstellungsstufen aus a11y.css automatisch mit. Version: 1.0 (2026-08-06) */ /* --- Klebende Zeile unter der Kopfleiste --------------------------------- */ /* --toc-kopf-top setzt toc.js auf die aktuelle Hoehe der Kopfleiste. Die schrumpft beim Scrollen, ein fester Wert wuerde eine Luecke oder eine Ueberdeckung erzeugen. */ .toc-kopf { position: sticky; top: var(--toc-kopf-top, 0px); z-index: 45; margin: 0 calc(-1 * var(--pad-stage)); padding: 4px var(--pad-stage) 5px; background: var(--surface-1); border-bottom: 1px solid var(--line); transition: transform var(--t-base); } /* Beim Scrollen nach unten faehrt die Zeile mit der Kopfleiste hoch und gibt den Bildschirm frei. Hoch scrollen holt sie sofort zurueck. */ .toc-kopf[data-weg="true"] { transform: translateY(-130%); } /* --- Breadcrumbs --------------------------------------------------------- */ /* Bewusst eine Stufe kleiner als --fs-xs. Die Zeile soll da sein, wenn man sie sucht, und sonst nicht auffallen. */ .toc-weg { display: flex; align-items: center; gap: 5px; font-size: calc(var(--fs-xs) - 1.5px); line-height: 1.4; color: var(--text-muted); white-space: nowrap; overflow: hidden; } .toc-weg a { color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); padding: 1px 2px; margin: -1px -2px; } .toc-weg a:hover { color: var(--sky); text-decoration: underline; } /* Der aktuelle Punkt ist kein Link, aber heller als der Rest. */ .toc-weg [aria-current="page"] { color: var(--text); } .toc-weg-trenner { opacity: 0.45; padding: 0 1px; } /* Herkunft: die Seite, von der man kam, wenn sie nicht im Pfad liegt. In Sky, damit der Unterschied zur Hierarchie ohne Erklaerung lesbar ist. */ .toc-weg-herkunft { color: var(--sky); flex: 0 0 auto; } .toc-weg-herkunft:hover { color: var(--sky); } .toc-weg-strich { opacity: 0.3; padding: 0 5px; flex: 0 0 auto; } /* Die mittleren Glieder duerfen schrumpfen, das letzte nie. */ .toc-weg-glied { overflow: hidden; text-overflow: ellipsis; } .toc-weg-glied:last-child { flex: 0 0 auto; } /* --- Kompaktleiste ------------------------------------------------------- */ .toc-leiste { display: flex; align-items: center; gap: 10px; width: 100%; margin: 3px 0 0; padding: 3px 0; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: calc(var(--fs-xs) - 0.5px); text-align: left; cursor: pointer; } .toc-leiste-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .toc-leiste-spur { flex: 0 0 64px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .toc-leiste-fuell { display: block; height: 100%; width: 0; background: var(--gradient-accent); } .toc-leiste-zahl { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .toc-leiste-pfeil { flex: 0 0 auto; color: var(--sky); transition: transform var(--t-fast); } .toc-leiste[aria-expanded="true"] .toc-leiste-pfeil { transform: rotate(180deg); } /* --- Aufklappliste ------------------------------------------------------- */ .toc-panel { margin: 0 calc(-1 * var(--pad-stage)); padding: 0 var(--pad-stage); max-height: 0; overflow: hidden auto; overscroll-behavior: contain; background: var(--surface-2); transition: max-height var(--t-base); } /* Nie mehr als drei Fuenftel des Bildschirms, damit der Text darunter sichtbar bleibt und klar ist, dass man in einer Seite steht. */ .toc-panel[data-open="true"] { max-height: 60vh; border-bottom: 1px solid var(--line); } .toc-panel ol { list-style: none; margin: 0; padding: var(--space-2) 0; counter-reset: toc; } .toc-panel li { margin: 0; padding: 0; } .toc-panel li::before { content: none; } .toc-panel a { display: block; padding: 7px 10px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); line-height: 1.4; } .toc-panel a:hover { color: var(--text); background: var(--glass); } .toc-panel a[data-aktiv="true"] { color: var(--text-strong); border-left-color: var(--sky); } /* --- Schiene ------------------------------------------------------------- */ /* Fest positioniert. toc.js setzt --toc-rail-left aus der gemessenen Lage der Lesespalte, damit die Schiene bei .page (780px) und .page-wide (1120px) gleichermassen sitzt und nie in den Text laeuft. */ .toc-rail { position: fixed; left: var(--toc-rail-left, 0px); top: var(--toc-rail-top, 96px); width: var(--toc-rail-width, 200px); max-height: calc(100vh - var(--toc-rail-top, 96px) - var(--space-7)); overflow: hidden auto; overscroll-behavior: contain; z-index: 20; scrollbar-width: thin; } .toc-rail-titel { font-size: calc(var(--fs-xs) - 1.5px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; } .toc-rail-spur { position: relative; padding-left: 14px; } /* Die Linie und ihre Fuellung. Die Fuellung ist der Lesefortschritt der ganzen Seite, nicht nur der Sprung zwischen zwei Abschnitten -- deshalb laeuft sie stetig und nicht in Stufen. */ .toc-rail-linie, .toc-rail-fuell { position: absolute; left: 3px; top: 4px; width: 2px; border-radius: 2px; } .toc-rail-linie { bottom: 4px; background: var(--line); } .toc-rail-fuell { height: 0; background: var(--gradient-accent); transition: height var(--t-fast) linear; } .toc-rail ol { list-style: none; margin: 0; padding: 0; position: relative; } .toc-rail li { position: relative; margin: 0 0 9px; padding: 0; } .toc-rail li::before { content: none; } .toc-rail-punkt { position: absolute; left: -14px; top: 5px; width: 8px; height: 8px; margin-left: -3px; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--line); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .toc-rail a { display: block; font-size: calc(var(--fs-xs) - 1px); line-height: 1.35; color: var(--text-muted); text-decoration: none; transition: color var(--t-fast); } .toc-rail a:hover { color: var(--text); } /* Gelesen: gedimmtes Sky. Man sieht, wie weit man ist, ohne dass die Abschnitte verschwinden. */ .toc-rail li[data-stand="vorbei"] .toc-rail-punkt { background: color-mix(in srgb, var(--sky) 45%, transparent); border-color: color-mix(in srgb, var(--sky) 45%, transparent); } .toc-rail li[data-stand="aktiv"] .toc-rail-punkt { background: var(--sky); border-color: var(--sky); transform: scale(1.35); } .toc-rail li[data-stand="aktiv"] a { color: var(--text-strong); } /* Fuer Browser ohne color-mix bleibt der Punkt schlicht in --line -- der aktive Punkt und die Fuellung tragen die Orientierung ohnehin. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .toc-rail li[data-stand="vorbei"] .toc-rail-punkt { background: var(--line-strong); border-color: var(--line-strong); } } /* --- Ruecksprung nach oben ----------------------------------------------- */ .toc-rail-hoch { display: inline-block; margin-top: var(--space-4); font-size: calc(var(--fs-xs) - 1px); color: var(--text-muted); text-decoration: none; } .toc-rail-hoch:hover { color: var(--sky); } /* --- Bewegung, Druck ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .toc-kopf, .toc-panel, .toc-rail-fuell, .toc-rail-punkt, .toc-leiste-pfeil { transition: none; } .toc-kopf[data-weg="true"] { transform: none; } } @media print { .toc-kopf, .toc-rail, .toc-panel { display: none !important; } }