/* dezaak.online · procesanimatie "Van idee tot online"
   Werkt zonder JavaScript als gewone stappenlijst; dzo-proces.js voegt het animatievlak toe.
   CSP-veilig: geen inline styles nodig. Kleuren volgen brand.css. */
.dzo{
  --dzo-accent:#ff782d;
  --dzo-accent-dark:#a73317;
  --dzo-accent-light:#ffc29b;
  --dzo-g1:#f04324;
  --dzo-g2:#ff702d;
  --dzo-g3:#ff982f;
  --dzo-gradient:linear-gradient(115deg,#f04324 0%,#ff702d 52%,#ff982f 100%);
  --dzo-tint:#fff0e5;
  --dzo-tint-2:#ffe1cb;
  --dzo-ink:#17191e;
  --dzo-muted:#565c65;
  --dzo-mid:#cdbfb3;
  --dzo-line:#e6ddd5;
  --dzo-soft:#f8f2ec;
  --dzo-paper:#fffdfb;
  --dzo-ok:#2b7a53;
  --dzo-ok-tint:#e4f1e8;
  --dzo-dot:#ead8c9;
  --dzo-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --dzo-font-head:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  container-type:inline-size;
  font-family:var(--dzo-font);
  color:var(--dzo-ink);
}
.dzo *,.dzo *::before,.dzo *::after{box-sizing:border-box}

/* ---------- Zonder JavaScript: leesbare stappenlijst ---------- */
.dzo-steps{list-style:none;margin:0;padding:0;counter-reset:dzo}
.dzo:not(.is-enhanced) .dzo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dzo:not(.is-enhanced) .dzo-step{counter-increment:dzo;background:#fff;border:1px solid var(--dzo-line);border-radius:18px;padding:22px}
.dzo:not(.is-enhanced) .dzo-step::before{content:counter(dzo,decimal-leading-zero);display:block;margin-bottom:10px;font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--dzo-accent-dark)}
.dzo:not(.is-enhanced) .dzo-label{display:block;font-family:var(--dzo-font-head);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;margin-bottom:6px}
.dzo:not(.is-enhanced) .dzo-text{display:block;color:var(--dzo-muted);line-height:1.6}
.dzo:not(.is-enhanced) .dzo-final{margin:20px 0 0;padding:18px 22px;border-radius:18px;background:var(--dzo-tint);border:1px solid #f1d6c1}
.dzo:not(.is-enhanced) .dzo-final .dzo-label{display:inline;margin-right:6px}
@container (max-width:860px){.dzo:not(.is-enhanced) .dzo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:520px){.dzo:not(.is-enhanced) .dzo-steps{grid-template-columns:1fr}}

/* ---------- Met JavaScript: animatie + bijschrift + voortgang ---------- */
.dzo.is-enhanced .dzo-final{display:none}
.dzo-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
.dzo-stage{position:relative;border-radius:24px;background:var(--dzo-paper);border:1px solid var(--dzo-line);box-shadow:0 4px 20px #28160e08,0 24px 60px #28160e0d;overflow:hidden}
.dzo-stage>svg{display:block;width:100%;height:auto}
.dzo-side{min-width:0}
.dzo-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:.8rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--dzo-accent-dark)}
.dzo-eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--dzo-gradient);flex-shrink:0}
.dzo-title{margin:0 0 10px;font-family:var(--dzo-font-head);font-size:clamp(1.45rem,14px + 1.7cqi,2.1rem);line-height:1.12;font-weight:800;letter-spacing:-.045em;color:var(--dzo-ink)}
.dzo-desc{margin:0;font-size:1rem;line-height:1.6;color:var(--dzo-muted);min-height:6.4em}
.dzo-cap.is-in{animation:dzo-in .55s cubic-bezier(.22,1,.36,1) both}
@keyframes dzo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* voortgang – smal: segmenten */
.dzo.is-enhanced .dzo-steps{margin-top:16px;display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.dzo.is-enhanced .dzo-step{position:relative;height:4px;border-radius:2px;background:var(--dzo-line);overflow:hidden}
.dzo.is-enhanced .dzo-label,.dzo.is-enhanced .dzo-text,.dzo.is-enhanced .dzo-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.dzo-bar{position:absolute;inset:0;background:var(--dzo-gradient);transform-origin:left center;transform:scaleX(0)}
.dzo.is-enhanced .dzo-step.is-done .dzo-bar{transform:scaleX(1)}

/* voortgang – breed: stappenlijst naast de animatie */
@container (min-width:860px){
  .dzo-inner{grid-template-columns:minmax(250px,.78fr) minmax(0,2fr);gap:48px}
  .dzo-side{order:-1}
  .dzo.is-enhanced .dzo-steps{grid-template-columns:1fr;gap:0;margin-top:26px}
  .dzo.is-enhanced .dzo-step{height:auto;background:none;overflow:visible;display:flex;align-items:center;gap:12px;padding:6px 0 8px;font-size:.95rem;line-height:1.3;color:var(--dzo-muted);transition:color .3s}
  .dzo.is-enhanced .dzo-label{position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal}
  .dzo.is-enhanced .dzo-num{position:relative;width:26px;height:26px;clip:auto;clip-path:none;flex:none;border-radius:50%;border:1.5px solid var(--dzo-line);display:grid;place-items:center;font-size:.68rem;font-weight:800;color:var(--dzo-muted);background:#fff;transition:background .3s,border-color .3s,color .3s}
  .dzo-bar{top:auto;left:38px;right:0;bottom:0;height:2px;border-radius:1px}
  .dzo.is-enhanced .dzo-step.is-done .dzo-bar{transform:scaleX(0)}
  .dzo.is-enhanced .dzo-step.is-done .dzo-num{background:var(--dzo-gradient);border-color:transparent;color:transparent;font-size:0;transition:none}
  .dzo.is-enhanced .dzo-step.is-done .dzo-num::after{content:"";position:absolute;left:8px;top:7.5px;width:8px;height:4.5px;border-left:2px solid var(--dzo-ink);border-bottom:2px solid var(--dzo-ink);transform:rotate(-45deg)}
  .dzo.is-enhanced .dzo-step.is-active{color:var(--dzo-ink);font-weight:700}
  .dzo.is-enhanced .dzo-step.is-active .dzo-num{border-color:var(--dzo-accent);color:var(--dzo-accent-dark)}
}

/* pauzeknop */
.dzo-toggle{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--dzo-line);background:#fffdfbe6;color:var(--dzo-ink);display:grid;place-items:center;cursor:pointer;padding:0;min-height:0;opacity:.6;transition:opacity .2s}
.dzo-toggle:hover,.dzo-toggle:focus-visible{opacity:1}
.dzo-toggle:focus-visible{outline:3px solid var(--dzo-accent-dark);outline-offset:3px}
.dzo-toggle svg{width:13px;height:13px;fill:currentColor}
.dzo-toggle .dzo-play{display:none}
.dzo.is-paused .dzo-toggle .dzo-play{display:block}
.dzo.is-paused .dzo-toggle .dzo-pause{display:none}
@container (max-width:520px){
  .dzo .lbl-sm{display:none}
  .dzo-toggle{width:30px;height:30px;right:8px;bottom:8px}
  .dzo-toggle svg{width:11px;height:11px}
  .dzo-stage{border-radius:18px}
}
.dzo.is-enhanced:not(.is-ready) .dzo-stage svg>g{opacity:0}

/* ---------- SVG ---------- */
.dzo svg text{font-family:var(--dzo-font)}
.dzo svg .t-h{font-family:var(--dzo-font-head);letter-spacing:-.03em}
.dzo .t-b{font-weight:700}
.dzo .t-x{font-weight:800}
.dzo .c-card{fill:#fff;stroke:var(--dzo-line);stroke-width:1.5}
.dzo .c-sh{fill:#28160e;opacity:.045}
.dzo .c-soft{fill:var(--dzo-soft)}
.dzo .c-line{fill:var(--dzo-line)}
.dzo .c-mid{fill:var(--dzo-mid)}
.dzo .c-acc{fill:var(--dzo-accent)}
.dzo .c-accd{fill:var(--dzo-accent-dark)}
.dzo .c-tint{fill:var(--dzo-tint)}
.dzo .c-tint2{fill:var(--dzo-tint-2)}
.dzo .c-ink{fill:var(--dzo-ink)}
.dzo .c-muted{fill:var(--dzo-muted)}
.dzo .c-ok{fill:var(--dzo-ok)}
.dzo .c-oktint{fill:var(--dzo-ok-tint)}
.dzo .c-red{fill:var(--dzo-g1)}
.dzo .c-bright{fill:var(--dzo-g3)}
.dzo .c-white{fill:#fff}
.dzo .c-dot{fill:var(--dzo-dot)}
.dzo .k-box{fill:#fff;stroke:var(--dzo-line);stroke-width:2}
.dzo .k-box1{fill:#fff;stroke:var(--dzo-line);stroke-width:1.5}
.dzo .k-tree{fill:none;stroke:#d9c9bb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dzo .k-acc{fill:none;stroke:var(--dzo-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dzo .k-accd{fill:none;stroke:var(--dzo-accent-dark);stroke-linecap:round;stroke-linejoin:round}
.dzo .k-ok{fill:none;stroke:var(--dzo-ok)}
.dzo .k-ln{fill:none;stroke:var(--dzo-line)}
.dzo .k-ink{stroke:var(--dzo-ink)}
.dzo .k-ring{fill:none;stroke:var(--dzo-accent-light);stroke-width:2;stroke-linecap:round}
.dzo .k-wire{fill:none;stroke:#cbb9aa;stroke-width:1.5;stroke-dasharray:5 4}
.dzo .k-deco{fill:none;stroke:#f07e34;stroke-opacity:.2;stroke-width:1.5}
.dzo .ic-a{color:var(--dzo-accent-dark)}
.dzo .ic-ink{color:var(--dzo-ink)}
.dzo .ic-m{color:var(--dzo-muted)}
.dzo .ic-ok{color:var(--dzo-ok)}
.dzo .st-1{stop-color:var(--dzo-g1)}
.dzo .st-2{stop-color:var(--dzo-g2)}
.dzo .st-3{stop-color:var(--dzo-g3)}
.dzo .st-glow{stop-color:#ff8627;stop-opacity:.16}
.dzo .st-glow0{stop-color:#ff8627;stop-opacity:0}
.dzo .st-cream{stop-color:#ffdfc7;stop-opacity:.5}
.dzo .st-cream0{stop-color:#ffdfc7;stop-opacity:0}
.dzo .k-env{fill:#fff;stroke:var(--dzo-accent-dark);stroke-width:2.5;stroke-linejoin:round}
.dzo .k-cream{fill:var(--dzo-tint);stroke:var(--dzo-line);stroke-width:2}
.dzo .k-shield{fill:var(--dzo-tint);stroke:var(--dzo-accent);stroke-width:4;stroke-linejoin:round}