/* =====================================================================
   GAD-Prozessleiste (Vorbild: BsMind „Bestell- und Versandprozess", Yusuf 2026-09-30)
   Nutzung:
   <div class="gf-flow" data-mx-reveal style="--n:5">
     <div class="gf-rail" aria-hidden="true"><div class="gf-fill"></div></div>
     <ol class="gf-steps">
       <li class="gf-step" style="--i:0"><small>01</small><h3>Titel</h3><p>Text</p></li> …
     </ol>
     <div class="gf-ends"><span>Start: <b>…</b></span><span>Ergebnis: <b>…</b></span></div>
   </div>
   + js/mx-reveal.js (setzt .is-in). Auf Navy-Flächen zusätzlich Klasse gf-flow--dark.
   Die Linie füllt sich beim Hineinscrollen von links nach rechts, die Schritte leuchten nacheinander auf.
   ===================================================================== */
.gf-flow { --gf-a:#1f6feb; --gf-ok:#16a34a; --gf-ink:#0f1b2d; --gf-body:#4a5768; --gf-line:#e3e9f2; --gf-num:#0066cc;
  margin-top: 52px; position: relative; }
.gf-rail { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--gf-line); }
.gf-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gf-a), var(--gf-ok)); transform-origin: left; }
.gf-steps { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 20px; position: relative; margin: 0; padding: 0; list-style: none; }
.gf-step { padding-top: 34px; position: relative; }
.gf-step::before { content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--gf-a); box-sizing: border-box; }
.gf-step:last-child::before { border-color: var(--gf-ok); background: var(--gf-ok); }
.gf-step small { display: block; font-size: 12px; font-weight: 700; color: var(--gf-num); letter-spacing: .06em; margin-bottom: 6px; }
.gf-step h3 { font-size: 17px; color: var(--gf-ink); margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.25; }
.gf-step p { font-size: 13.5px; line-height: 1.55; color: var(--gf-body); margin: 0; }
.gf-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; font-size: 12.5px; color: #5f6b7d; }
.gf-ends b { color: var(--gf-num); }
/* Auf Navy */
.gf-flow--dark { --gf-ink:#fff; --gf-body:rgba(232,234,238,.78); --gf-line:rgba(255,255,255,.16); --gf-num:#7cc6ff; --gf-a:#5aa0ff; }
.gf-flow--dark .gf-step::before { background: #0b1c3d; }
.gf-flow--dark .gf-step:last-child::before { background: var(--gf-ok); }
.gf-flow--dark .gf-ends { color: rgba(232,234,238,.66); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .gf-flow:not(.is-in) .gf-fill { transform: scaleX(0); }
  .gf-flow.is-in .gf-fill { transition: transform 2.4s cubic-bezier(.45,0,.2,1) .2s; }
  .gf-flow:not(.is-in) .gf-step { opacity: .35; }
  .gf-flow.is-in .gf-step { transition: opacity .5s; transition-delay: calc(.2s + var(--i) * .4s); }
}
@media (max-width: 1024px) {
  .gf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .gf-rail { display: none; }
}
@media (max-width: 760px) {
  .gf-steps { grid-template-columns: 1fr; row-gap: 24px; }
  .gf-ends { flex-direction: column; gap: 8px; }
}