/* =========================================================
   Sektion „Der Weg zum Kunden“ (in sich geschlossen)
   Entfernen: <section class="journey"> in index.html, den Link auf
   diese Datei und das Script assets/js/journey.js löschen.
   ========================================================= */

.journey { position: relative; overflow: hidden; }
.journey::before { content: ""; position: absolute; left: 50%; top: 40%; width: 900px; height: 500px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(72, 189, 128, .1), transparent); pointer-events: none; }

.journey__track { --p: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding-top: 8px; }

/* Verbindungslinie + Füllung + wandernder Punkt (Desktop: waagrecht) */
.journey__line { position: absolute; left: 10%; right: 10%; top: 36px; height: 2px; background: var(--line-2); border-radius: 2px; }
.journey__fill { position: absolute; inset: 0; background: var(--grad); border-radius: 2px; transform: scaleX(var(--f, 0)); transform-origin: left; }
.journey__dot { position: absolute; top: var(--dy, 50%); left: var(--dx, 0); width: 38px; height: 38px; margin: -19px 0 0 -19px; transform: translateY(calc(var(--hop, 0) * -16px)) scale(calc(1 + var(--hop, 0) * .08)); will-change: transform, left, top; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--green-ink); box-shadow: 0 0 0 6px rgba(72, 189, 128, .25), 0 10px 30px -6px rgba(72, 189, 128, .7); z-index: 2; }
.journey__dot svg { width: 18px; height: 18px; }
.journey__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(72, 189, 128, .6); animation: jPulse 2s ease-out infinite; }
@keyframes jPulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Stationen */
.jstep { position: relative; text-align: center; }
.jstep__node { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 22px; display: grid; place-items: center; color: var(--muted); background: var(--card); border: 1px solid var(--line-2); transition: color .4s, background .4s, border-color .4s, box-shadow .4s, transform .5s cubic-bezier(.3, .7, .2, 1); }
.jstep__node svg { width: 28px; height: 28px; }
.jstep__num { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); transition: background .4s, color .4s, border-color .4s; }
.jstep__tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; transition: color .4s; }
.jstep h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; transition: color .4s; color: var(--text-2); }
.jstep p { font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 26ch; margin: 0 auto; transition: color .4s; }

/* Mini-Vorschau je Station */
.jstep__peek { margin: 18px auto 0; max-width: 210px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: left; font-size: 12px; opacity: .35; transform: translateY(10px) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.3, .7, .2, 1), border-color .4s; }
.jpeek__row { display: flex; align-items: center; gap: 8px; }
.jpeek__row + .jpeek__row { margin-top: 6px; }
.jpeek__av { width: 22px; height: 22px; border-radius: 50%; background: var(--green-3); flex: 0 0 auto; }
.jpeek__bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); flex: 1; }
.jpeek__bar.s { flex: .6; }
.jpeek__bar.g { background: rgba(72, 189, 128, .5); }
.jpeek__btn { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 99px; background: var(--green); color: var(--green-ink); font-weight: 700; font-size: 10.5px; }
.jpeek__title { font-weight: 700; font-size: 12px; color: var(--text); }
.jpeek__muted { color: var(--muted); font-size: 11px; }
.jpeek__serif { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--text); }
.jpeek__ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--green-ink); flex: 0 0 auto; }
.jpeek__ok svg { width: 12px; height: 12px; }

/* Aktiv: Station erreicht */
.jstep.is-on .jstep__node { color: var(--green); background: linear-gradient(rgba(72, 189, 128, .14), rgba(72, 189, 128, .14)), var(--card); border-color: rgba(72, 189, 128, .5); box-shadow: 0 0 40px -6px rgba(72, 189, 128, .45); transform: scale(1.04); }
.jstep.is-on .jstep__num { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.jstep.is-on .jstep__tag { color: var(--green); }
.jstep.is-on h3 { color: var(--text); }
.jstep.is-on p { color: var(--text-2); }
.jstep.is-on .jstep__peek { opacity: 1; transform: none; border-color: rgba(72, 189, 128, .3); }
.jstep--goal.is-on .jstep__node { background: var(--green); color: var(--green-ink); }

.journey__note { margin-top: 48px; text-align: center; font-size: 15px; color: var(--text-2); }
.journey__note b { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .jstep .jstep__node, .jstep .jstep__peek { transition: none; }
  .journey__dot::after { animation: none; }
}

/* Tablet: weiterhin waagrecht, Vorschau ausblenden */
@media (max-width: 960px) {
  .journey__track { gap: 10px; }
  .jstep__peek { display: none; }
  .jstep p { font-size: 13px; }
  .jstep h3 { font-size: 16px; }
  .jstep__node { width: 60px; height: 60px; border-radius: 18px; }
  .journey__line { top: 30px; }
}

/* Handy: senkrecht */
@media (max-width: 640px) {
  .journey__track { grid-template-columns: 1fr; gap: 26px; padding-left: 0; }
  .journey__line { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .journey__fill { transform: scaleY(var(--f, 0)); transform-origin: top; }
  .journey__dot { top: var(--dy, 0); left: var(--dx, 50%); transform: translateX(calc(var(--hop, 0) * 10px)) scale(calc(1 + var(--hop, 0) * .08)); }
  .jstep { display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; text-align: left; align-items: start; }
  .jstep__node { grid-row: span 3; margin: 0; }
  .jstep p { margin: 0; max-width: none; }
  .jstep__tag { margin-top: 4px; }
}