/* HAMMERBETRIEB.DE – Kundenreise (AIDA, illustrierte Schlangenlinie) · nur Startseite */
.cj-section{padding-top:58px;padding-bottom:26px}
.cj-section + section.section-space,.cj-section + section{padding-top:42px}

.cj-head{max-width:900px}
.cj-head h2{margin:10px 0 0}
.cj-lead{max-width:720px;margin:18px 0 0;font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;font-size:17px;line-height:1.62;color:#4f4a45}

.cj{
  --cj-red:#c8102e;
  --cj-line:#ded8d2;
  --cj-ink:#262321;
  --cj-muted:#77716b;
  --c:#c8102e;
  margin-top:28px;
}
.cj *,.cj *::before,.cj *::after{box-sizing:border-box}

.cj-scroll{position:relative}
.cj-stage{position:relative}
.cj-svg{display:block;width:100%;height:auto;overflow:visible}
.cj-svg-m{display:none}

/* Phasen */
.cj-band-bg{fill:var(--c);opacity:.05}
.cj-band-line{fill:none;stroke:var(--cj-line);stroke-width:1.5;stroke-dasharray:5 7;opacity:.9}
.cj-badge{fill:#fff;stroke:var(--cj-line);stroke-width:2}
.cj-badge-t{font-family:'Hammer Anton','Anton',Impact,sans-serif;font-weight:400;font-size:16px;letter-spacing:.02em;fill:var(--cj-muted)}
.cj-ph-t{font-family:'Hammer Anton','Anton',Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:.02em;text-transform:uppercase;fill:var(--cj-ink)}
.cj-ph-s{font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;font-weight:600;font-size:15px;fill:var(--cj-muted)}
.cj-band.is-on .cj-badge{fill:var(--c);stroke:var(--c)}
.cj-band.is-on .cj-badge-t{fill:#fff}
.cj-band.is-on .cj-ph-t{fill:var(--c)}
.cj-band.is-on .cj-ph-s{fill:var(--cj-ink)}
.cj-band.is-active .cj-band-bg{opacity:.13}
.cj-band.is-active .cj-ph-s{fill:var(--cj-ink);font-weight:800}

/* Weg */
.cj-base{fill:none;stroke:var(--cj-line);stroke-width:3;stroke-linecap:round}
.cj-line{fill:none;stroke:var(--c);stroke-width:4.5;stroke-linecap:round}

/* Medaillons */
.cj-med{fill:#fff;stroke:var(--cj-line);stroke-width:2.2;filter:drop-shadow(0 4px 10px rgba(38,35,33,.13))}
.cj-halo{fill:none;stroke:var(--c);stroke-width:1.6;opacity:0}
.cj-ic{fill:none;stroke:var(--cj-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cj-ic .cj-f{fill:var(--cj-muted);stroke:none}
.cj-ic .cj-fill-red{fill:var(--cj-line);stroke:none}
.cj-ic .cj-check{stroke:#fff;stroke-width:2.6;fill:none}
.cj-lb{font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.01em;fill:var(--cj-muted)}
.cj-final .cj-lb{font-weight:800}

.cj-node.is-on .cj-med{stroke:var(--c)}
.cj-node.is-on .cj-ic{stroke:var(--c)}
.cj-node.is-on .cj-ic .cj-f{fill:var(--c)}
.cj-node.is-on .cj-ic .cj-fill-red{fill:var(--c)}
.cj-node.is-on .cj-lb{fill:var(--cj-ink)}
.cj-node.is-active .cj-halo{opacity:.6}
.cj-node.is-active .cj-med{stroke-width:3.2}
.cj-node.is-active .cj-lb{fill:var(--cj-ink);font-weight:800}
.cj-dot{fill:var(--c);stroke:#fff;stroke-width:3}

.cj-final.is-on .cj-med{fill:#fff;stroke-width:3.4}
.cj-final.is-on .cj-lb{fill:var(--cj-red)}
.cj-final-note{font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;font-weight:700;font-size:14.5px;fill:var(--cj-red);opacity:0;transition:opacity .3s}
.cj.is-arrived .cj-final-note{opacity:1}

/* Statisch (ohne JS / reduzierte Bewegung): vollständiger Weg */
.cj:not(.cj-js) .cj-med,.cj.is-static .cj-med{stroke:var(--c)}
.cj:not(.cj-js) .cj-ic,.cj.is-static .cj-ic{stroke:var(--c)}
.cj:not(.cj-js) .cj-ic .cj-f,.cj.is-static .cj-ic .cj-f{fill:var(--c)}
.cj:not(.cj-js) .cj-ic .cj-fill-red,.cj.is-static .cj-ic .cj-fill-red{fill:var(--c)}
.cj:not(.cj-js) .cj-lb,.cj.is-static .cj-lb{fill:var(--cj-ink)}
.cj:not(.cj-js) .cj-badge,.cj.is-static .cj-badge{fill:var(--c);stroke:var(--c)}
.cj:not(.cj-js) .cj-badge-t,.cj.is-static .cj-badge-t{fill:#fff}
.cj:not(.cj-js) .cj-ph-t,.cj.is-static .cj-ph-t{fill:var(--c)}
.cj:not(.cj-js) .cj-band-bg,.cj.is-static .cj-band-bg{opacity:.09}
.cj:not(.cj-js) .cj-final-note,.cj.is-static .cj-final-note{opacity:1}
.cj:not(.cj-js) .cj-final .cj-halo,.cj.is-static .cj-final .cj-halo{opacity:.5}

.cj-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cj-note{margin:18px 0 0;font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;font-size:14px;line-height:1.6;color:var(--cj-muted)}

/* Geldzeichen-Sprüheffekt (einmalig, lokal) */
.cj-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cj-burst b{
  position:absolute;display:block;
  font-family:'Hammer Manrope','Manrope',system-ui,Arial,sans-serif;
  font-weight:800;line-height:1;opacity:0;pointer-events:none;
  text-shadow:0 1px 2px rgba(38,35,33,.16);
  will-change:transform,opacity;
  animation:cj-money 1.15s cubic-bezier(.2,.72,.3,1) forwards;
}
@keyframes cj-money{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(0)}
  12%{opacity:1}
  72%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot))}
}


/* JS-Modus: Fortschritt kommt aus der Scrollposition */
.cj-js .cj-node .cj-med,.cj-js .cj-node .cj-ic,.cj-js .cj-node .cj-lb{transition:stroke .25s,fill .25s,stroke-width .25s}
.cj-js .cj-node .cj-halo,.cj-js .cj-band .cj-band-bg{transition:opacity .3s}
.cj-js .cj-band .cj-badge,.cj-js .cj-band .cj-ph-t,.cj-js .cj-band .cj-ph-s{transition:fill .25s,stroke .25s}
.cj-js.cj-sticky .cj-stage{position:sticky;top:96px}

@media(prefers-reduced-motion:reduce){
  .cj-burst{display:none}
}

@media(max-width:1000px){
  .cj-svg-d{display:none}
  .cj-svg-m{display:block}
  .cj-lead{font-size:16px}
  .cj-ph-t{font-size:19px}
  .cj-ph-s{font-size:14px}
  .cj-badge-t{font-size:14px}
  .cj-lb{font-size:14px}
  .cj-base{stroke-width:2.5}
  .cj-line{stroke-width:4}
  .cj-js.cj-sticky .cj-stage{position:static}
  .cj-section{padding-top:44px;padding-bottom:20px}
}
@media(min-width:1001px) and (max-width:1180px){
  .cj-ph-t{font-size:23px}
  .cj-ph-s{font-size:14px}
  .cj-lb{font-size:14px}
}