/* Abschnitt 4 „Ablauf“: Weg durch das Quartier (ablauf.js, ablauf-kunst.js).
   Ohne JS: die vier Schritte als Text. Mit JS (.ab.js): Zeichnungen, Weg, Auto; Stationen erscheinen mit .on.
   .instant (Bewegung reduzieren, ?alles=1): Endzustand ohne Übergänge. */

.ab{position:relative;z-index:2;--gut:clamp(20px,5.2vw,84px);--col:min(440px,34vw);--rz:clamp(64px,6.2vw,92px);
  padding:0 0 clamp(120px,13vw,190px);overflow-x:clip}
.ab-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Kopf (wie „Was wir bauen“) ---------- */
.ab-head{padding:0 var(--gut)}
.ab-eyebrow{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#16479e}
.ab-head h2{margin:0;max-width:var(--col);font-size:clamp(34px,3.3vw,50px);font-weight:600;line-height:1.08;letter-spacing:.002em;text-wrap:balance}

/* ---------- Strecke ---------- */
.ab-track{position:relative;margin-top:clamp(28px,3.4vw,52px)}
.ab-back,.ab-road{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.ab-back svg,.ab-road svg{position:absolute;left:0;top:0;overflow:visible}
.ab[data-v="d"] .ab-back,.ab[data-v="d"] .ab-road{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.ab[data-v="m"] .ab-road{height:calc(100% + 150px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 120px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 120px),transparent 100%)}

.ab-steps{position:relative;list-style:none;margin:0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3.2%}
.ab-step{position:relative;min-width:0}
.ab-art{position:relative;aspect-ratio:320/230}
.ab-art svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ab:not(.js) .ab-art{display:none}
.ab-txt{position:relative;margin-top:var(--rz)}
.ab:not(.js) .ab-txt{margin-top:0}
.ab-txt h3{margin:0;display:flex;align-items:center;gap:11px;font-size:clamp(19px,1.5vw,21px);font-weight:600;line-height:1.25;letter-spacing:.002em}
.ab-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:600;color:#16479e;background:#eaf2ff}
.ab-txt p{margin:10px 0 0;font-size:16.5px;line-height:1.55;color:#26344a;max-width:21em;text-wrap:pretty}
.ab-btn{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:9px 15px 9px 17px;border-radius:999px;border:1.5px solid var(--ink);
  font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;color:var(--ink);background:#fff;transition:background .2s,color .2s}
.ab-btn svg{width:12px;height:12px;flex:none}
.ab-btn:hover{background:var(--ink);color:#fff}
.ab-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Auto ---------- */
.ab-car{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;will-change:transform}
.ab-car svg{position:absolute;display:block}
.ab-car-s{width:var(--cw,48px);height:calc(var(--cw,48px) * 30 / 52);left:calc(var(--cw,48px) * -.5);top:calc(var(--cw,48px) * -24 / 52)}
.ab-car-t{display:none!important;width:34px;height:21px;left:-17px;top:-10.5px}
.ab[data-v="m"] .ab-car-s{display:none!important}
.ab[data-v="m"] .ab-car-t{display:block!important}
.ab:not(.js) .ab-car{display:none}

/* ---------- Erscheinen der Stationen ---------- */
.ab.js .ab-art,.ab.js .ab-txt{transition:opacity .8s ease,transform 1s var(--ease)}
.ab.js .ab-step:not(.on) .ab-art{opacity:0;transform:translateY(18px) scale(.97)}
.ab.js .ab-step:not(.on) .ab-txt{opacity:0;transform:translateY(12px)}
.ab.js .ab-step.on .ab-txt{transition-delay:.18s}
.ab-art{transform-origin:50% 90%}

/* Landschaft wächst mit: Hügel blenden ein, Bäume und Plätze wachsen aus dem Boden */
.ab.js .ab-h{transition:opacity .9s ease,transform 1s var(--ease)}
.ab.js .ab-back .ab-h:not(.on){opacity:0}
.ab.js .ab-road .ab-h{transform-box:fill-box;transform-origin:50% 100%}
.ab.js .ab-road .ab-h:not(.on){opacity:0;transform:scale(.5)}

/* kleine Teile in den Zeichnungen */
.ab-pen,.ab-bub-in,.ab-spark,.ab-ring{transform-box:fill-box}
.ab-pen{transform-origin:0% 50%;transition:transform .7s var(--ease) .55s}
.ab-f2 .ab-pen{transition-delay:.72s}.ab-f3 .ab-pen{transition-delay:.9s}
.ab.js .ab-step:not(.on) .ab-pen{transform:scaleX(0)}
.ab-bub-in{transform-origin:50% 100%;transition:transform .6s var(--ease) .5s,opacity .4s ease .5s}
.ab.js .ab-step:not(.on) .ab-bub-in{transform:translateY(6px) scale(.5);opacity:0}
.ab-ring{transform-origin:50% 50%;transition:transform .8s var(--ease) .35s,opacity .6s ease .35s}
.ab.js .ab-step:not(.on) .ab-ring{transform:scale(.6);opacity:0}
.ab-spark{transform-origin:50% 50%;transition:transform .9s var(--ease) 1.05s,opacity .5s ease 1.05s}
.ab.js .ab-step:not(.on) .ab-spark{transform:scale(0) rotate(-90deg);opacity:0}
/* Sprechblase: drei Punkte „tippen“ leise, solange der Abschnitt zu sehen ist */
.ab-d1,.ab-d2,.ab-d3{transform-box:fill-box;transform-origin:50% 50%}
.ab.vis .ab-step.on .ab-d1{animation:abdot 1.6s ease-in-out 1.2s infinite}
.ab.vis .ab-step.on .ab-d2{animation:abdot 1.6s ease-in-out 1.4s infinite}
.ab.vis .ab-step.on .ab-d3{animation:abdot 1.6s ease-in-out 1.6s infinite}
@keyframes abdot{0%,60%,100%{transform:none;opacity:1}30%{transform:translateY(-2.2px);opacity:.55}}

.ab.instant *,.ab.instant{transition:none!important}
.ab.instant .ab-d1,.ab.instant .ab-d2,.ab.instant .ab-d3{animation:none!important}

/* ---------- Handy: untereinander, Weg schlängelt sich abwechselnd links und rechts vorbei ---------- */
.ab[data-v="m"]{--rg:58px}
.ab[data-v="m"] .ab-steps{grid-template-columns:minmax(0,1fr);row-gap:128px}
.ab[data-v="m"] .ab-step{width:100%;max-width:500px}
.ab[data-v="m"] .ab-step:nth-child(odd){padding-left:var(--rg)}
.ab[data-v="m"] .ab-step:nth-child(even){padding-right:var(--rg);justify-self:end}
.ab[data-v="m"] .ab-txt{margin-top:18px}
.ab[data-v="m"] .ab-txt p{font-size:16px;line-height:1.5}

@media (max-width:759px){
  .ab-head{text-align:left}
  .ab-eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:10px}
  .ab-head h2{font-size:clamp(28px,8vw,36px);max-width:none}
  .ab-track{margin-top:44px}
  .ab:not(.js) .ab-steps{grid-template-columns:minmax(0,1fr);row-gap:28px}
}
@media (min-width:760px) and (max-width:1100px){
  .ab-txt p{font-size:15.5px}
  .ab-txt h3{font-size:18px;gap:9px}
  .ab-n{width:25px;height:25px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .ab *,.ab{transition:none!important;animation:none!important}
}