/* Ablauf-Timeline. Basis (ohne JS / reduced motion / mobil): vertikal gestapelt. */
.tl{position:relative;margin:8px 0 40px}
.tl-track{position:relative;list-style:none;margin:0;padding:0 0 0 34px}
.tl-line{position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,rgba(184,212,74,.6),rgba(184,212,74,.15));transform-origin:top center}
.tl-step{position:relative;padding:0 0 26px}
.tl-dot{position:absolute;left:-31px;top:6px;width:16px;height:16px;border-radius:50%;background:#0a0d12;border:2px solid #b8d44a;box-shadow:0 0 0 4px rgba(184,212,74,.12)}
.tl-stem{display:none}
.tl-num{display:block;font-size:.78rem;font-weight:600;letter-spacing:.14em;color:#b8d44a;margin-bottom:4px}
.tl-step h2{margin-bottom:12px}
.tl-step .tl-row{margin-bottom:10px}
.tl-step .tl-row strong{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#b8d44a;margin-bottom:2px}

/* Desktop + Bewegung erlaubt + JS: horizontal, gepinnt */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .tl{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:#0e1219;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
  .js .tl-pin{height:100vh;min-height:560px;display:flex;align-items:center}
  .js .tl-track{display:flex;gap:0;padding:0 8vw 0 max(5vw,calc(50vw - 380px));width:max-content;align-items:flex-start;will-change:transform}
  .js .tl-line{left:max(5vw,calc(50vw - 380px));right:8vw;top:9px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,rgba(184,212,74,.15),rgba(184,212,74,.6) 12%,rgba(184,212,74,.6) 88%,rgba(184,212,74,.15));transform:scaleX(0);transform-origin:left center}
  .js .tl-step{width:min(460px,38vw);padding:0 56px 0 0;flex:none}
  .js .tl-dot{position:relative;left:0;top:0;display:block;width:20px;height:20px;transform:scale(0)}
  .js .tl-stem{display:block;width:2px;height:44px;margin:0 0 18px 9px;background:linear-gradient(180deg,rgba(184,212,74,.6),rgba(184,212,74,0));transform:scaleY(0);transform-origin:top center}
  .js .tl-step .tl-num,.js .tl-step h2,.js .tl-step .tl-row,.js .tl-step .tl-txt{opacity:0;transform:translateY(18px)}
  .js .tl-step .tl-row{font-size:.95rem;line-height:1.6}
}
/* Mobil mit Bewegung: leichte Reveals */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .js .tl-step.tl-m{opacity:0;transform:translateY(16px)}
  .js .tl-line{transform:scaleY(0)}
}

/* p7: Variante Startseite – Leistungen (.tl--svc). Ohne JS/mobil/reduced motion bleibt die normale Liste. */
.tl--svc .tl-track.svc-list{padding-left:0}
.tl--svc .tl-step{padding-bottom:0}
.tl--svc .tl-line,.tl--svc .tl-dot{display:none}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .tl--svc{margin-top:8px;margin-bottom:32px}
  .js .tl--svc .tl-pin{height:80vh;min-height:480px;flex-direction:column;justify-content:center;align-items:flex-start}
  .js .tl--svc .tl-head{padding-left:max(5vw,calc(50vw - 380px));margin:0 0 44px}
  .js .tl--svc .tl-track.svc-list{padding:0 8vw 0 max(5vw,calc(50vw - 380px));margin:0}
  .js .tl--svc .tl-line,.js .tl--svc .tl-dot{display:block}
  .js .tl--svc .svc-list li{border-bottom:0;padding:0}
  .js .tl--svc .tl-line{position:absolute;padding:0}
  .js .tl--svc .tl-step{width:min(340px,28vw);padding:0 28px 0 0}
  .js .tl--svc .tl-txt{display:block;min-height:150px;padding:22px 22px 24px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);font-size:1rem;line-height:1.6;color:rgba(238,240,244,.85)}
  .js .tl--svc .tl-txt a{font-size:1.15rem;font-weight:700}
}