/* Direction A – Aesculap staff rail (round 3).
 *
 * aeskulap.js turns the staff from #leistungen into a long, slim rail at the left edge once the sticky column
 * releases (home page), or fades it in after the page header (sub-pages). The rail is created by JS only
 * (progressive enhancement) and only where there is room: viewport >= 1280 px and >= 96 px free left of the
 * content container. Position and size are set inline by the script; this file only styles it.
 *   .aesk-rail            fixed box in the left page margin (nav "Seitennavigation"), never takes pointer events
 *   .aesk-rail__stage     holds the shared WebGL canvas while the rail is shown
 *   .aesk-rail__mark      anchor link per section on its ring: cross-bar + short sign (signpost), title on hover
 *   .aesk-flight          fixed layer that carries the canvas during the ~1 s transformation
 * Stacking: above the page panels, below the mockup panel (.mc-panel, z-index 9999).
 */

.aesk-rail {
  position: fixed; z-index: 45; left: 0; top: 0; width: 110px; height: 80vh;
  pointer-events: none;
  visibility: hidden; opacity: 0; transform: translateX(-8px);
  transition: opacity .7s var(--ease, ease), transform .9s var(--ease, ease), visibility 0s linear .9s;
}
.aesk-rail.is-on {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .7s var(--ease, ease), transform .9s var(--ease, ease), visibility 0s;
}
.aesk-rail__stage { position: absolute; inset: 0; }
.aesk-rail__stage canvas, .aesk-flight canvas { pointer-events: none; }
.aesk-flight { position: fixed; z-index: 45; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }

/* Signpost marks: one per section. The link sits on the ring (3D) and runs right into the page margin:
   fine cross-bar (Quersteg) → small sign plate with the short label (always readable, on light and dark panels).
   Active section: gold bar + gold-edged plate. Full section title (h2) appears on hover/focus. Geometry comes from
   the script as custom properties: --tick-l/--tick-w (bar), --lab-l/--lab-w (label column), --lab-fs (font size). */
.aesk-rail__marks {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease, ease), visibility 0s linear .35s;
}
.aesk-rail.is-ready .aesk-rail__marks { visibility: visible; opacity: 1; transition: opacity .5s var(--ease, ease) .1s, visibility 0s; }
.aesk-rail__marks li { margin: 0; padding: 0; }
.aesk-rail__mark {
  position: absolute; left: 0; top: 0; height: 30px; width: calc(var(--lab-l, 56px) + var(--lab-w, 60px));
  pointer-events: auto; border-radius: 10px; color: var(--ink-2, #48413D); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.aesk-rail__mark:focus { outline: none; }
.aesk-rail__mark:focus-visible { outline: 2px solid var(--red-d, #8A1A1A); outline-offset: 2px; }
.aesk-rail__tick {
  position: absolute; left: var(--tick-l, 26px); width: var(--tick-w, 12px); top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(214, 170, 64, .95), rgba(214, 170, 64, .55));
  transition: background .3s, height .3s, margin .3s;
}
.aesk-rail__name {
  position: absolute; left: var(--lab-l, 56px); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: var(--lab-w, 60px); padding: 2px 4px 3px; border-radius: 6px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(216, 204, 188, .9);
  box-shadow: 0 1px 2px rgba(58, 33, 22, .08);
  font: 650 var(--lab-fs, 11px)/1.15 var(--ff-body, system-ui, sans-serif); letter-spacing: .005em;
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
  transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s;
}
.aesk-rail__mark:hover .aesk-rail__name { color: var(--red-d, #8A1A1A); border-color: #E9C255; }
.aesk-rail__mark[aria-current] .aesk-rail__tick { height: 2px; margin-top: -1px; background: linear-gradient(90deg, #F0B400, #FFCC00); }
.aesk-rail__mark[aria-current] .aesk-rail__name {
  color: var(--red-d, #8A1A1A); background: #fff; border-color: #E9C255;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, .22), 0 2px 6px -2px rgba(58, 33, 22, .2);
}
/* Full title on hover/focus, right next to the sign (stays in the accessibility tree via aria-label of the link) */
.aesk-rail__tip {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%);
  width: max-content; max-width: 300px; padding: 7px 12px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--line, #E6DCCF);
  box-shadow: 0 2px 6px rgba(58, 33, 22, .06), 0 16px 32px -16px rgba(58, 33, 22, .36);
  font: 600 .875rem/1.3 var(--ff-body, system-ui, sans-serif); color: var(--ink, #231D1A); hyphens: manual;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease, ease), transform .3s var(--ease, ease);
}
.aesk-rail__mark:hover .aesk-rail__tip, .aesk-rail__mark:focus-visible .aesk-rail__tip { opacity: 1; transform: translate(0, -50%); }
/* Narrow margin: signs only on hover/focus */
.aesk-rail.is-compact .aesk-rail__name { opacity: 0; }
.aesk-rail.is-compact .aesk-rail__mark:hover .aesk-rail__name, .aesk-rail.is-compact .aesk-rail__mark:focus-visible .aesk-rail__name { opacity: 1; }

/* Home stage while the staff is away in the rail: halo and ring labels step back */
.leist__stage::before { transition: opacity .6s var(--ease, ease); }
.leist__spy { transition: opacity .5s var(--ease, ease), visibility 0s; }
.leist__stagewrap.is-away .leist__stage::before { opacity: 0; }
.leist__stagewrap.is-away .leist__spy { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease, ease), visibility 0s linear .4s; }

/* No motion: end states only */
.reduce-motion .aesk-rail, .reduce-motion .aesk-rail *, .reduce-motion .leist__spy, .reduce-motion .leist__stage::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .aesk-rail, .aesk-rail *, .leist__spy, .leist__stage::before { transition: none !important; }
}
/* Safety net: never on narrow viewports (the script also checks the free margin) */
@media (max-width: 1279px) { .aesk-rail, .aesk-flight { display: none; } }