/* ============================================================
   The Journey — "Vom Netzanschluss bis zum Endgerät"
   Elegant vertical S-curve (snake). Draws top→bottom on scroll.
   Stations sit on the curve; cards alternate beside it.
   Mobile: collapses to a clean left spine, cards stacked right.
   ============================================================ */
.journey{overflow:hidden}
.journey-v{position:relative;max-width:1120px;margin:80px auto 0}
.jv-track{position:relative}                 /* height set inline by JS */
.jv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.jv-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 14;animation:jvdash 26s linear infinite}
@keyframes jvdash{to{stroke-dashoffset:-300}}
@media (prefers-reduced-motion:reduce){.jv-bg{animation:none}.jv-comet:after{animation:none}}
/* no drop-shadow glow on the line — its halo used to bleed past the opaque card edges
   and read as a stray stroke near the icons. The crisp gradient stroke stays premium;
   the glowing focal point lives on the comet head instead. */
.jv-fg{fill:none;stroke:url(#jgrad);stroke-width:5.5;stroke-linecap:round}
.jv-head{fill:#fff}
/* comet = HTML element positioned by % in the SAME space as the stations → always exactly on the line */
.jv-comet{position:absolute;left:0;top:0;width:20px;height:20px;transform:translate(-50%,-50%);z-index:5;pointer-events:none;opacity:0;transition:opacity .25s}
.jv-comet:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;box-shadow:0 0 20px 6px rgba(230,60,88,.95),0 0 6px 1px #fff}
.jv-comet:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--brand-coral);opacity:.5;animation:cometpulse 2s var(--ease-soft,ease) infinite}
@keyframes cometpulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.35);opacity:0}}

/* endpoint flags */
.jv-flag{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:6;white-space:nowrap}
.jv-flag .tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:.04em;padding:9px 18px;border-radius:999px;background:var(--ink-700);border:1px solid var(--line-dark-strong)}
.jv-flag .tag svg{width:16px;height:16px;stroke:var(--brand-coral-light)}
.jv-flag.end .tag{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--glow-coral)}
.jv-flag.end .tag svg{stroke:#fff}

/* a station sits ON the curve (positioned by --nx/--ny) */
.jv-station{position:absolute;left:var(--nx);top:var(--ny);transform:translate(-50%,-50%);z-index:4}
.jv-node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:var(--ink-800);border:2px solid var(--line-dark-strong);display:flex;align-items:center;justify-content:center;transition:.45s;z-index:3}
.jv-node:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--fg-3);transition:.45s}
.jv-station.active .jv-node{border-color:var(--brand-coral);background:var(--ink-600);box-shadow:0 0 0 6px rgba(230,60,88,.16),var(--glow-coral)}
.jv-station.active .jv-node:before{background:var(--brand-coral);transform:scale(1.25)}

/* connector stem removed — the node on the curve + floating card read cleanly
   without short stubs (which showed as stray lines beside the cards) */
.jv-stem{display:none}

/* card */
.jv-card{position:absolute;top:0;transform:translateY(-50%);width:min(420px,34vw);
  background:linear-gradient(180deg,#241420,#1b0e15);border:1px solid var(--hair,rgba(255,255,255,.08));border-radius:20px;padding:24px 26px;
  box-shadow:var(--sh-md);opacity:.45;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s}
.jv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(230,60,88,.6),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s}
.jv-station.active .jv-card::after{opacity:1}
.jv-station.card-right .jv-card{left:30px;transform:translate(-14px,-50%)}
.jv-station.card-left  .jv-card{right:30px;transform:translate(14px,-50%)}
.jv-station.card-left  .jv-card{text-align:right}
.jv-station.active .jv-card{opacity:1;border-color:transparent;box-shadow:0 8px 18px -6px rgba(0,0,0,.5),0 30px 60px -18px rgba(0,0,0,.7);transform:translate(0,-50%)}

.jv-card .st-head{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.jv-station.card-left .jv-card .st-head{flex-direction:row-reverse}
.jv-stico{width:48px;height:48px;border-radius:13px;flex:none;background:var(--ink-600);border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;transition:.45s}
.jv-stico svg{width:24px;height:24px;stroke:var(--fg-2);transition:stroke .45s}
.jv-station.active .jv-stico{background:var(--grad-brand);border-color:transparent;box-shadow:var(--glow-coral)}
.jv-station.active .jv-stico svg{stroke:#fff}
.jv-card .st-num{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--fg-3);margin-left:auto}
.jv-station.card-left .jv-card .st-num{margin-left:0;margin-right:auto}
.jv-station.active .jv-card .st-num{color:var(--brand-coral-light)}
.jv-card h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 7px;letter-spacing:-.01em;color:var(--fg-1)}
.jv-card p{font-size:14px;line-height:1.55;color:var(--fg-2);margin:0}
.st-kicker{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-coral-light)}

/* ---------- mobile: dedicated linear timeline ---------- */
.jv-mobile{display:none}
@media(max-width:880px){
  .journey-v{max-width:600px}
  .jv-track{display:none}
  .jv-mobile{display:block;position:relative;padding-left:54px}
  .jv-mspine{position:absolute;left:21px;top:10px;bottom:10px;width:4px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
  .jv-mfill{position:absolute;inset:0 0 auto 0;height:0;background:linear-gradient(180deg,#6D1F37,#E63C58,#EC6D82);box-shadow:0 0 10px rgba(230,60,88,.55);transition:height .12s linear}
  .jv-mstation{position:relative;padding-bottom:40px}
  .jv-mstation:last-child{padding-bottom:0}
  .jv-mnode{position:absolute;left:-46px;top:4px;width:30px;height:30px;border-radius:50%;background:var(--ink-800);border:2px solid var(--line-dark-strong);display:flex;align-items:center;justify-content:center;transition:.4s;z-index:2}
  .jv-mnode:before{content:"";width:11px;height:11px;border-radius:50%;background:var(--fg-3);transition:.4s}
  .jv-mstation.active .jv-mnode{border-color:var(--brand-coral);box-shadow:0 0 0 5px rgba(230,60,88,.16),var(--glow-coral)}
  .jv-mstation.active .jv-mnode:before{background:var(--brand-coral)}
  .jv-mcard{background:var(--ink-700);border:1px solid var(--line-dark);border-radius:18px;padding:20px 22px;opacity:.5;transition:opacity .45s,border-color .45s}
  .jv-mstation.active .jv-mcard{opacity:1;border-color:var(--line-dark-strong)}
  .jv-mcard .st-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .jv-mcard h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin:2px 0 7px;color:var(--fg-1)}
  .jv-mcard p{font-size:14px;line-height:1.55;color:var(--fg-2);margin:0}
}