/* Navigation: gleitende Pille im Header und Kapitel-Rail mit Fischaugen-Effekt */
.desktop-nav { position: relative; }
.nav-pill { position: absolute; top: 50%; left: 0; z-index: 0; width: var(--pill-w, 0); height: 2.35rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: 999px; background: rgb(255 255 255 / 7%); opacity: 0; pointer-events: none; transform: translate(var(--pill-x, 0), -50%); transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s; }
.desktop-nav.has-pill .nav-pill { opacity: 1; }
.desktop-nav a { z-index: 1; }
.desktop-nav a.is-active { color: var(--color-paper); }

.section-nav-rail.is-chapter-rail { --chapter-progress: 0; }
.is-chapter-rail ol { position: relative; }
.is-chapter-rail ol::before, .is-chapter-rail ol::after { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgb(255 255 255 / 12%); content: ""; }
.is-chapter-rail ol::after { background: var(--color-signal); box-shadow: 0 0 8px var(--mp-glow, rgb(232 102 27 / 30%)); transform: scaleY(var(--chapter-progress)); transform-origin: top; transition: transform 0.25s linear; }
.is-chapter-rail li { --d: 9; }
.is-chapter-rail .section-nav-tick { width: calc(0.55rem + 1.1rem * max(0, 1 - var(--d) / 3)); margin-left: 0.15rem; opacity: calc(0.45 + 0.55 * max(0, 1 - var(--d) / 4)); background: var(--color-steel-dark); }
.is-chapter-rail a.is-active .section-nav-tick { width: 2rem; opacity: 1; background: var(--color-signal); box-shadow: 0 0 10px var(--mp-glow, rgb(232 102 27 / 40%)); }
.is-chapter-rail a strong { z-index: 2; min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
.is-chapter-rail a:is(:hover, :focus-visible) strong { z-index: 3; }
.is-chapter-rail a.is-active strong small { color: var(--color-signal); }
/* Aktiver Eintrag: Kapitelnummer neben dem Strich, Volltitel nur bei Hover/Fokus */
.is-chapter-rail a.is-active:not(:hover, :focus-visible) strong { min-width: 0; grid-template-columns: auto; padding: 0 0.2rem; border-color: transparent; background: transparent; box-shadow: none; opacity: 1; transform: none; left: 2.35rem; }
.is-chapter-rail a.is-active:not(:hover, :focus-visible) strong > span { display: none; }
.is-chapter-rail a.is-active:is(:hover, :focus-visible) strong { border-color: rgb(232 102 27 / 45%); }
@media (prefers-reduced-motion: reduce) { .nav-pill, .is-chapter-rail ol::after { transition: none; } .is-chapter-rail a.is-active strong { animation: none; } }