/* 00-road — Roadmap-Komponente (Ablauf in Schritten), seit 17.09.2026 wiederverwendbar für Startseite (Service) und Unterseiten.
   Markup: .rad-road.rad-reveal > .rad-road__track (svg path + Knoten, von 00-road.js aus den Spaltenmitten gebaut) + ol.rad-road__steps.
   Desktop: geschwungener Pfad in Pixelkoordinaten (viewBox = Trackgröße, kein Verzerren, keine Maske — Knoten-Glühen wird nirgends
   abgeschnitten), Enden über einen Verlaufsstrich weich; Knoten sitzen exakt über der Mitte jedes Schritts, zeichnen sich mit dem Pfad
   und LEUCHTEN beim ersten Erscheinen auf (Puls, fill-mode backwards → danach gilt der normale Stil, Hover kann übersteuern).
   ≤1000: senkrechte Linie links, Punkt je Schritt. */
.rad-road{--rad-stagger:80ms}
.rad-road__track{position:relative;height:120px}
.rad-road__path{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rad-road__path path{fill:none;stroke:var(--rad-road-stroke,var(--vn-color-accent));stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2000ms var(--vn-ease-out) 120ms}
.rad-road.is-inview .rad-road__path path{stroke-dashoffset:0}
.rad-road__node{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;background:var(--vn-color-accent-on-dark);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--vn-color-accent) 16%,transparent),0 0 18px color-mix(in srgb,var(--vn-color-accent-on-dark) 45%,transparent);transition:box-shadow 700ms var(--vn-ease-out)}
.rad-road.is-inview .rad-road__node{transform:translate(-50%,-50%) scale(1);animation:rad-road-node 900ms var(--vn-ease-out) var(--d,0ms) backwards}
@keyframes rad-road-node{
  0%{transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 0 color-mix(in srgb,var(--vn-color-accent) 0%,transparent),0 0 0 color-mix(in srgb,var(--vn-color-accent-on-dark) 0%,transparent)}
  45%{transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 0 16px color-mix(in srgb,var(--vn-color-accent) 30%,transparent),0 0 44px color-mix(in srgb,var(--vn-color-accent-on-dark) 100%,transparent)}
  100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 7px color-mix(in srgb,var(--vn-color-accent) 16%,transparent),0 0 18px color-mix(in srgb,var(--vn-color-accent-on-dark) 45%,transparent)}}
/* Knoten leuchtet mit, wenn der zugehörige Schritt darunter überfahren wird */
@media(hover:hover){.rad-road:has(.rad-road__step:nth-child(1):hover) .rad-road__node:nth-of-type(1),.rad-road:has(.rad-road__step:nth-child(2):hover) .rad-road__node:nth-of-type(2),.rad-road:has(.rad-road__step:nth-child(3):hover) .rad-road__node:nth-of-type(3),.rad-road:has(.rad-road__step:nth-child(4):hover) .rad-road__node:nth-of-type(4),.rad-road:has(.rad-road__step:nth-child(5):hover) .rad-road__node:nth-of-type(5){box-shadow:0 0 0 10px color-mix(in srgb,var(--vn-color-accent) 26%,transparent),0 0 32px color-mix(in srgb,var(--vn-color-accent-on-dark) 85%,transparent)}}
.rad-road__steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(var(--rad-road-n,4),minmax(0,1fr));gap:32px}
.rad-road__step{min-width:0;padding-right:8px}
.rad-road__steptitle{font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-fg)}
.rad-road__steptext{margin-top:6px;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}
@media(max-width:1000px){
  .rad-road__track{display:none}
  .rad-road__steps{position:relative;grid-template-columns:1fr;gap:22px;padding-left:34px}
  .rad-road__steps::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--vn-color-accent);opacity:.55;transform:scaleY(0);transform-origin:top;transition:transform 1600ms var(--vn-ease-out)}
  .rad-road.is-inview .rad-road__steps::before{transform:none}
  .rad-road__step{position:relative;padding-right:0}
  .rad-road__step::before{content:"";position:absolute;left:-34px;top:.3em;width:12px;height:12px;border-radius:50%;background:var(--vn-color-accent-on-dark);
    box-shadow:0 0 0 6px color-mix(in srgb,var(--vn-color-accent) 16%,transparent),0 0 16px color-mix(in srgb,var(--vn-color-accent-on-dark) 45%,transparent);transform:scale(0);transition:transform 600ms var(--vn-ease-out) calc(200ms + var(--i,0) * 350ms)}
  .rad-road.is-inview .rad-road__step::before{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .rad-road__path path,.rad-road__node,.rad-road__steps::before,.rad-road__step::before{transition:none;animation:none}
  .rad-road__path path{stroke-dashoffset:0}
  .rad-road__node{transform:translate(-50%,-50%) scale(1)}
  .rad-road__step::before{transform:none}
}