/* ============================================================
   Roadmap (Ablauf-Seite): schräge Top-View-Karte + scrollende Stationen.
   - Desktop: Karte links (sticky), Stationen rechts, Fokus-Station
     hebt sich ab, vorherige/nächste blenden aus bzw. ein (--o per JS).
   - Mobil: kompakte Fortschrittsleiste (sticky) + Zeitleiste links.
   - Ohne JS: alle Stationen untereinander, voll sichtbar.
   ============================================================ */
.rm{display:block}
.rm-stage{display:none}
.js .rm-stage{display:block}

/* ---------- Lesezeile (Station x von y), Sprungleiste ---------- */
.rm-read{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px 16px;box-shadow:var(--shadow-sm)}
.rm-cap{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--brand)}
.rm-title{display:block;font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--ink);margin:2px 0 10px}
.rm-bar{height:6px;border-radius:99px;background:#e6ebf1;overflow:hidden}
.rm-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.rm-jump{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rm-jump a{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-2);background:#fff;border:2px solid var(--border-strong);transition:background .2s,border-color .2s,color .2s,transform .2s}
.rm-jump a:hover{border-color:var(--brand-2);color:var(--brand)}
.rm-jump a.is-past{background:var(--brand-soft);border-color:var(--brand-2);color:var(--brand)}
.rm-jump a.is-current{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.12)}

/* ---------- Karte (SVG, per js/roadmap.js) ---------- */
.rm-map svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--header-h) - 210px);filter:drop-shadow(0 22px 26px rgba(15,23,42,.10))}
.rm-st{transition:opacity .55s ease,filter .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
/* passiert = grün (volle Farbe), noch offen = grau */
.rm-st.is-past{opacity:1}
.rm-st.is-current{transform:scale(1.14)}
.rm-st.is-next{opacity:.9;filter:grayscale(1)}
.rm-st.is-far{opacity:.6;filter:grayscale(1)}
.rm-badge circle{fill:#fff;stroke:#b8c4d0;stroke-width:2.4;transition:fill .4s,stroke .4s}
.rm-badge text{font:700 13px "Segoe UI",Arial,sans-serif;fill:#64748b;text-anchor:middle;transition:fill .4s}
/* Titel erscheinen nur am aktuell erreichten Meilenstein, alle anderen sind unsichtbar */
.rm-lbl{font:600 12.5px "Segoe UI",Arial,sans-serif;fill:#64748b;text-anchor:middle;opacity:0;transition:fill .4s,opacity .45s ease;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;stroke-opacity:.92;pointer-events:none}
.rm-st.is-current .rm-lbl{opacity:1}
.rm-st.is-current .rm-badge circle{fill:var(--brand);stroke:var(--brand)}
.rm-st.is-current .rm-badge text{fill:#fff}
.rm-st.is-current .rm-lbl{fill:var(--ink);font-weight:700}
.rm-st.is-past .rm-badge circle{fill:var(--brand-2);stroke:var(--brand)}
.rm-st.is-past .rm-badge text{fill:#fff}
.rm-st.is-past .rm-lbl{fill:#0a7d55}
.rm-st.is-next .rm-lbl{fill:#475569}
.rm-ring{fill:none;stroke:var(--brand-2);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s}
.rm-st.is-current .rm-ring{opacity:1;animation:rmPulse 2.2s ease-out infinite}
@keyframes rmPulse{0%{transform:scale(.88);opacity:.95}100%{transform:scale(1.22);opacity:0}}
.rm-pin{pointer-events:none;filter:drop-shadow(0 4px 4px rgba(15,23,42,.25))}
/* Weg zum nächsten Meilenstein: pulsiert (Segment zwischen Pin und nächster Station) */
.rm-hint-glow{animation:rmHintGlow 1.6s ease-in-out infinite}
.rm-hint{animation:rmHint 1.6s ease-in-out infinite}
@keyframes rmHintGlow{0%,100%{stroke-opacity:.08}50%{stroke-opacity:.55}}
@keyframes rmHint{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- Stationen (Kapitel) ---------- */
.rm-chapters{position:relative}
.rm-ch{display:flex;align-items:center;padding:14px 0}
.rm-card{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;transition:border-color .4s,box-shadow .4s}
.rm-art{display:flex;justify-content:center;padding:14px 18px 6px;background:radial-gradient(120% 90% at 50% 0,#f6fcf9 0,#e2f7ee 100%)}
.rm-art svg{width:min(250px,64%);height:auto;transition:filter .5s,opacity .5s}
/* Station 7: echter Ausschnitt aus dem Kundenportal statt Illustration */
.rm-art.has-shot{padding:16px 16px 12px;flex-direction:column;align-items:center}
.rm-shot{margin:0;width:100%}
.rm-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff}
.rm-shot figcaption{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink-2);text-align:center}
.rm-body{padding:22px 26px 26px}
.rm .step-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.rm-body h3{font-size:24px;margin-bottom:10px}
.rm-body p{color:var(--ink-2)}
.rm-aside{background:var(--brand-soft);border-radius:var(--radius-sm);padding:16px 18px;margin-top:14px}
.rm-aside h4{font-size:15px;margin:0 0 8px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.rm-aside ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--ink-2)}
.rm-aside li{margin-bottom:4px}
.rm-body .btn{margin-top:16px}
.rm-ch.is-current .rm-card{border-color:var(--brand-2);box-shadow:0 22px 54px -22px rgba(10,157,104,.5)}
.rm-ch.is-past .rm-card{border-color:#bfeedb}
.rm-ch.is-past .rm-art{background:radial-gradient(120% 90% at 50% 0,#f1fbf6 0,#d3f3e5 100%)}

/* Scroll-getriebenes Ein-/Ausblenden (Wert --o von js/roadmap.js) */
.js .rm-ch .rm-card{opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 34px)) scale(calc(.94 + var(--o,1) * .06));will-change:opacity,transform}

/* ---------- Desktop ---------- */
@media(min-width:901px){
  .js .rm{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:44px;align-items:start}
  .rm-stage{position:sticky;top:calc(var(--header-h) + 18px);align-self:start}
  .rm-read{margin-top:8px}
  .rm-chapters{padding:6vh 0 24vh}
  .rm-ch{min-height:78vh}
}

/* ---------- Mobil: Fortschrittsleiste + Zeitleiste ---------- */
@media(max-width:900px){
  .js .rm-stage{position:sticky;top:var(--header-h);z-index:30;margin:0 -20px;padding:8px 20px;background:rgba(244,246,249,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
  .rm-map{display:none}
  .rm-read{padding:10px 14px 12px;border-radius:12px}
  .rm-title{font-size:16px;margin-bottom:8px}
  .rm-jump{display:none}
  .rm-chapters{padding:10px 0 12vh 34px}
  .js .rm-chapters::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(var(--border-strong),var(--border-strong))}
  .rm-ch{min-height:62vh;position:relative}
  .js .rm-ch::before{content:attr(data-n);position:absolute;left:-34px;top:calc(50% - 150px);width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--border-strong);color:var(--ink-2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,color .3s}
  .js .rm-ch.is-current::before{background:var(--brand);border-color:var(--brand);color:#fff}
  .js .rm-ch.is-past::before{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
  .rm-body{padding:18px 18px 22px}
  .rm-body h3{font-size:21px}
}

/* Ohne Bewegung: keine Ein-/Ausblendung, Fokus nur über Rahmen und Karte */
@media(prefers-reduced-motion:reduce){
  .js .rm-ch .rm-card{opacity:1!important;transform:none!important}
  .rm-st,.rm-ring,.rm-hint,.rm-hint-glow{transition:none;animation:none!important}
  .rm-hint-glow{stroke-opacity:.35}
}