/* Animierter Behandlungsablauf (assets/ablauf.js) */
.ablauf:not(.is-ready) .ablauf-stage{display:none}
.ablauf.is-ready .ablauf-steps{display:none}
.ablauf-stage{border:1px solid var(--line);border-radius:22px;background:#fff;padding:28px 28px 18px}

/* Zeitleiste */
.ablauf-track{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;margin-bottom:26px}
.ablauf-line{position:absolute;top:21px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:2px;background:var(--line);border-radius:2px}
.ablauf-line i{display:block;height:100%;width:0;background:var(--gold-grad);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.ablauf-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;color:var(--ink-soft);cursor:pointer;text-align:center}
.ablauf-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);transition:border-color .4s,background .4s,color .4s,transform .4s}
.ablauf-label{font-size:.82rem;line-height:1.3;max-width:140px;transition:color .3s}
.ablauf-node:hover .ablauf-num{border-color:var(--gold)}
.ablauf-node.is-done .ablauf-num{border-color:var(--gold);color:var(--gold-deep)}
.ablauf-node.is-active .ablauf-num{background:var(--gold-grad);border-color:transparent;color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(176,138,78,.14)}
.ablauf-node.is-active .ablauf-label{color:var(--ink);font-weight:500}
.is-playing .ablauf-node.is-active .ablauf-num{animation:abRing 2.2s ease-out infinite}

/* Inhalt des aktuellen Schritts */
.ablauf-panel{min-height:132px;border-top:1px solid var(--line);padding-top:22px}
.ablauf-card{animation:abIn .55s cubic-bezier(.2,.8,.2,1) both}
.ablauf-kicker{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.ablauf-card h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-bottom:8px}
.ablauf-card p{color:var(--ink-soft);margin:0;max-width:560px}

/* Steuerung + Zeitbalken */
.ablauf-bar{display:flex;align-items:center;gap:18px;margin-top:18px}
.ablauf-time{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.ablauf-time i{display:block;height:100%;width:0;background:var(--gold-grad)}
.is-playing .ablauf-time i{animation:abProg 5.2s linear forwards}
.ablauf-controls{display:flex;gap:8px;flex:none}
.ablauf-btn{font:inherit;font-size:.85rem;color:var(--gold-deep);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .2s}
.ablauf-btn:hover{border-color:var(--gold)}

@media (max-width:640px){
  .ablauf-stage{padding:22px 16px 14px}
  .ablauf-label{display:none}
  .ablauf-num{width:38px;height:38px;font-size:1rem}
  .ablauf-line{top:18px}
}

@keyframes abIn{from{opacity:0;transform:translateY(12px)}}
@keyframes abProg{to{width:100%}}
@keyframes abRing{0%{box-shadow:0 0 0 0 rgba(176,138,78,.35)}100%{box-shadow:0 0 0 14px rgba(176,138,78,0)}}

/* ---------- Linien-Grafik pro Schritt (2026-10-29) ---------- */
.ablauf-panel{min-height:200px}
.ablauf-card{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px;align-items:center}
.ab-art{aspect-ratio:4/3;border-radius:18px;background:var(--sand,#f5efe6);display:grid;place-items:center;overflow:hidden}
.ab-art svg{width:92%;height:auto;overflow:visible;fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-art svg *{transform-box:fill-box;transform-origin:center}
.ab-skin{stroke:var(--gold)}
.ab-skin2{stroke:var(--gold-light);stroke-dasharray:2 5}
.ab-thin{stroke:var(--gold-light)}
.ab-face{stroke:var(--gold);stroke-width:1.3}
.ab-label{fill:var(--gold-deep);stroke:none;font-family:var(--sans);font-size:13px}

/* Microneedling: Pen fährt, Punkte + Mikrokanäle entstehen */
.ab-penx{animation:abPenX 4s cubic-bezier(.45,0,.55,1) infinite;transform-box:view-box}
.ab-tap{animation:abTap .3s ease-in-out infinite;transform-box:view-box}
.ab-dot{fill:var(--gold);stroke:none;animation:abDot 4s ease-out infinite backwards}
.ab-chan{stroke:var(--gold);stroke-width:1.2;animation:abChan 4s ease-out infinite backwards;transform-origin:top}
/* Wirkstoffe: Tropfen fallen, Kreise, Wirkstoff zieht ein */
.ab-drop{fill:var(--gold-light);animation:abDrop 2.4s ease-in infinite backwards}
.ab-ripple{stroke:var(--gold);animation:abRipple 2.4s ease-out infinite backwards}
.ab-sink{stroke:var(--gold);stroke-dasharray:2 6;animation:abSink 1.2s linear infinite}
/* Radiofrequenz / Ultraschall: Wellen in die Tiefe */
.ab-wave{stroke:var(--gold);transform-box:view-box;transform-origin:100px 114px;animation:abWave 2.1s ease-out infinite backwards}
.ab-heat{fill:var(--gold);stroke:none;animation:abTwinkle 1.4s ease-in-out infinite alternate}
/* Sauerstoff */
.ab-o2{stroke:var(--gold);animation:abO2 2.2s ease-out infinite backwards}
/* Reinigung: Pad wischt, Schaum steigt */
.ab-sweep{animation:abSweep 2.6s ease-in-out infinite alternate;transform-box:view-box}
.ab-bubble{stroke:var(--gold);animation:abBubble 2.7s ease-out infinite backwards}
/* Peeling: Schüppchen lösen sich */
.ab-flake{stroke:var(--gold);stroke-width:2;animation:abFlake 2.4s ease-in infinite backwards}
/* Maske wird aufgetragen */
.ab-paint{stroke:var(--gold-light);stroke-width:10;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;animation:abPaint 4.6s ease-in-out infinite backwards}
/* Massage / Lifting: Pfeile nach oben */
.ab-draw{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:1;animation:abDraw 2.6s ease-in-out infinite backwards}
/* Entspannung */
.ab-z{fill:var(--gold);stroke:none;font-family:var(--serif);font-style:italic;animation:abZ 2.1s ease-out infinite backwards}
/* Pflege: Tiegel öffnet sich, Funkeln */
.ab-lid{transform-origin:left bottom;animation:abLid 2.6s ease-in-out infinite alternate}
.ab-star{fill:var(--gold-light);stroke:var(--gold);stroke-width:1;animation:abTwinkle 1.8s ease-in-out infinite alternate backwards}
.ab-halo{stroke:var(--gold-light);animation:abHalo 2.7s ease-out infinite backwards}
/* Beratung: Sprechblasen */
.ab-pop{animation:abPop 3.2s ease-out infinite backwards}
.ab-type{fill:var(--gold);stroke:none;animation:abType 1s ease-in-out infinite alternate}
/* Farbwahl */
.ab-swatch{stroke:none;animation:abSwatch 3s ease-in-out infinite backwards}

@keyframes abPenX{0%{transform:translateX(0)}75%{transform:translateX(120px)}100%{transform:translateX(0)}}
@keyframes abTap{50%{transform:translateY(-5px)}}
@keyframes abDot{0%{opacity:0;transform:scale(0)}6%{opacity:1;transform:scale(1.6)}14%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes abChan{0%{opacity:0;transform:scaleY(0)}10%{opacity:.9;transform:scaleY(1)}70%{opacity:.6}100%{opacity:0}}
@keyframes abDrop{0%{opacity:0;transform:translateY(-4px)}15%{opacity:1}62%{opacity:1;transform:translateY(32px)}70%,100%{opacity:0;transform:translateY(34px) scaleX(1.4)}}
@keyframes abRipple{0%,60%{opacity:0;transform:scale(.2)}68%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
@keyframes abSink{to{stroke-dashoffset:-16}}
@keyframes abWave{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes abO2{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),32px) scale(1.2)}}
@keyframes abSweep{from{transform:translateX(-32px)}to{transform:translateX(32px)}}
@keyframes abBubble{0%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translateY(-58px) scale(1.1)}}
@keyframes abFlake{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-14px) rotate(40deg)}}
@keyframes abPaint{0%{stroke-dashoffset:1}12%,80%{stroke-dashoffset:0;opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
@keyframes abDraw{0%{stroke-dashoffset:1;opacity:1}45%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes abZ{0%{opacity:0;transform:translate(0,6px)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-22px)}}
@keyframes abLid{from{transform:translateY(0) rotate(0)}to{transform:translateY(-12px) rotate(-12deg)}}
@keyframes abTwinkle{from{opacity:.25;transform:scale(.55)}to{opacity:1;transform:scale(1.1)}}
@keyframes abHalo{0%{opacity:0;transform:scale(.92)}30%{opacity:.9}100%{opacity:0;transform:scale(1.18)}}
@keyframes abPop{0%{opacity:0;transform:translateY(8px) scale(.94)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes abType{from{opacity:.25}to{opacity:1}}
@keyframes abSwatch{0%{transform:scale(.6);opacity:.4}25%{transform:scale(1.12);opacity:1}40%,100%{transform:scale(1);opacity:1}}

@media (max-width:640px){
  .ablauf-card{grid-template-columns:1fr;gap:16px}
  .ab-art{max-width:300px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ab-art svg *{animation:none!important}
  .ab-paint,.ab-draw{stroke-dashoffset:0}
}

/* ---------- So wirkt die Behandlung ---------- */
.how-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.how-grid li{position:relative;background:var(--sand,#f5efe6);border-radius:18px;padding:22px 20px 20px}
.how-no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-grad);color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:14px}
.how-grid b{display:block;font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;margin-bottom:6px}
.how-grid p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.how-grid li:not(:last-child)::after{content:"";position:absolute;top:38px;right:-12px;width:10px;height:1.5px;background:var(--gold-light)}
.after-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.after-grid > div{border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.after-grid h3{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px}
.after-grid p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.65}
@media (max-width:860px){
  .how-grid,.after-grid{grid-template-columns:1fr}
  .how-grid li:not(:last-child)::after{display:none}
}
/* Grafik größer und kräftiger */
.ablauf-card{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.ab-art svg{width:100%;stroke-width:2}
.ab-skin{stroke-width:2.4}
@media (max-width:640px){.ablauf-card{grid-template-columns:1fr}.ab-art{max-width:none}}
/* Viele Schritte (z. B. 9): Kreise schrumpfen statt die Seite zu verbreitern */
.ablauf-track{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.ablauf-node{min-width:0}
@media (max-width:640px){
  .ablauf-track{gap:4px}
  .ablauf-num{width:min(38px,100%);height:auto;aspect-ratio:1;font-size:clamp(.72rem,3.4vw,1rem)}
}