/* webshop-erp-koppeling: CSS van de secties op deze pagina (docs/prototype/webshop-erp-koppeling.html, inline <style>).
   De cases-carrousel staat in cases.css, de stappen en het kruimelpad in styles.css. Weggelaten: de FAQ-regels
   (de pagina gebruikt het gedeelde FAQ-blok) en .cases/.case (in het prototype niet meer gebruikt). */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
body{overflow-x:hidden}
.ws-h1{font-size:clamp(34px,4.6vw,64px);text-wrap:balance}
.ws-hero-t{max-width:1100px}
/* ---------- hero: de stroom ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);gap:0;align-items:center;max-width:1040px;margin-left:auto;margin-right:auto}
.fl-shop,.demo-shop{position:relative;background:#fff;border-radius:16px;box-shadow:0 30px 60px -25px rgb(25 23 20 / .35),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden;font-size:13px}
.fl-bar{height:34px;background:#F1EEE8;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11px;color:var(--color-ink-3)}
.fl-bar i{width:9px;height:9px;border-radius:50%;background:#DAD3C6}
.fl-bar span{margin-left:10px}
.fl-shop-in{padding:16px 18px}
.fl-who{font-size:12px;color:var(--color-ink-3);margin-bottom:8px}
.fl-who b{color:var(--color-ink);transition:opacity .3s}
.fl-line{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #F0EDE7}
.th{width:34px;height:34px;border-radius:8px;background:repeating-linear-gradient(45deg,#EFEAE1 0 6px,#E6DFD2 6px 12px)}
.fl-line b{display:block;font-size:13px}
.fl-line small{color:var(--color-ink-3);font-size:11.5px}
.fl-line em{font-style:normal;font-weight:700;color:var(--color-ink);border-radius:4px;padding:0 3px;transition:background .4s}
.fl-line .q{font-weight:700;border:1px solid #E4DED3;border-radius:8px;padding:3px 10px;background:#FAF8F4}
.fl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.fl-terms{font-size:11.5px;color:var(--color-ink-3)}
.fl-btn{background:var(--color-ink);color:#fff;padding:9px 14px;border-radius:999px;font-weight:600;font-size:12.5px;transition:transform .15s,background .2s;white-space:nowrap}
.flow.s1 .fl-btn{transform:scale(.93);background:var(--color-accent)}
.fl-toast{position:absolute;right:14px;top:44px;background:var(--color-ok);color:#fff;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:600;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.flow.s4 .fl-toast{opacity:1;transform:none}
.flow.s4 .fl-line em{background:var(--color-ok-soft)}
.fl-pipe{position:relative;height:120px;margin:0 -4px}
.fl-pipe-l{position:absolute;left:50%;top:-6px;translate:-50% 0;font-family:var(--font-hand);color:var(--color-ink-3);font-size:17px;white-space:nowrap}
.fl-lane{position:absolute;left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--color-rule) 50%,transparent 50%);background-size:10px 2px}
.fl-out{top:46px}
.fl-back{top:86px}
.fl-lane::after{content:"";position:absolute;top:-4px;width:0;height:0;border:5px solid transparent}
.fl-out::after{right:-2px;border-left:7px solid var(--color-rule)}
.fl-back::after{left:-2px;border-right:7px solid var(--color-rule)}
.pk{position:absolute;top:-13px;white-space:nowrap;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;opacity:0;transition:left 1.3s cubic-bezier(.5,0,.3,1),opacity .25s}
.pk-out{left:0;background:var(--color-accent);color:#fff}
.pk-back{left:calc(100% - 118px);background:var(--color-ok);color:#fff}
.flow.s2 .pk-out{opacity:1;left:calc(100% - 118px)}
.flow.s4 .pk-back{opacity:1;left:0}
.fl-erp,.demo-erp{background:var(--color-ink);color:var(--color-paper);border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px -25px rgb(25 23 20 / .5);font-size:13px}
.fl-erp-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #3A362F;padding-bottom:8px;margin-bottom:6px}
.fl-erp-h b{font-family:var(--font-serif);font-size:24px}
.fl-erp-h span{font-size:11.5px;color:#9C9486}
.fl-r{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid #2E2A25;font-size:12px;align-items:center}
.fl-r span:first-child{font-family:var(--font-mono);color:#9C9486;font-size:11px}
.fl-r .ok{background:#24402F;color:#9FD8B2;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
.fl-r.old{opacity:.6}
.fl-r.new{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s,background .6s;border-radius:6px}
.flow.s3 .fl-r.new,.flow.s4 .fl-r.new{opacity:1;transform:none}
.flow.s3 .fl-r.new{background:#3A2A22}
.fl-erp-stock{display:flex;justify-content:space-between;margin-top:12px;padding:10px 12px;border-radius:10px;background:#2E2A25;font-size:12px}
.fl-erp-stock b{font-family:var(--font-mono);transition:color .3s}
.flow.s3 .fl-erp-stock b{color:var(--color-accent-soft)}
.fl-steps{list-style:none;padding:0;margin:26px auto 0;max-width:1040px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:fs}
.fl-steps li{counter-increment:fs;font-size:13px;line-height:1.3;color:var(--color-ink-3);padding:8px 10px;border-radius:10px;transition:background .3s,color .3s}
.fl-steps li::before{content:counter(fs);display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--color-rule);color:var(--color-ink);font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-right:6px}
.fl-steps li.on{background:var(--color-card);color:var(--color-ink)}
.fl-steps li.on::before{background:var(--color-accent);color:#fff}
/* ---------- herkenning: het bureau ---------- */
.desk{position:relative;height:440px}
.d-obj{position:absolute;box-shadow:0 10px 24px rgb(25 23 20 / .13);animation:bob 6s ease-in-out infinite}
.d-obj:nth-child(2){animation-delay:-1.5s}
.d-obj:nth-child(3){animation-delay:-3s}
.d-obj:nth-child(4){animation-delay:-4.5s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.d-mail{left:0;top:10px;width:230px;background:#fff;border-radius:8px;padding:11px 13px;font-size:11.5px;line-height:1.4;rotate:-4deg}
.d-mail .from{color:var(--color-ink-3)}
.d-mail b{display:block;margin:3px 0 4px}
.d-wa{right:4%;top:0;width:220px;background:#DCF8C6;border-radius:12px 12px 12px 2px;padding:10px 12px;font-size:12px;line-height:1.4;rotate:3deg}
.d-wa .wa-n{display:block;font-weight:700;color:#1F7A4A;font-size:11px;margin-bottom:2px}
.d-wa small{display:block;text-align:right;color:#6B8F72;font-size:10px}
.d-postit{left:6%;bottom:10px;width:160px;height:130px;background:var(--color-postit);padding:14px;font-family:var(--font-hand);font-size:18px;line-height:1.2;rotate:-6deg}
.d-form{right:2%;bottom:0;width:200px;background:#FDFCF7;border:1px solid #DDD5C6;padding:12px;font-family:var(--font-mono);font-size:10.5px;display:flex;flex-direction:column;gap:4px;rotate:5deg;filter:grayscale(.3) contrast(.9)}
.d-form i{font-style:normal;color:var(--color-ink-3);font-size:9.5px;margin-top:4px}
.d-typing{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(320px,80%);background:var(--color-ink);color:var(--color-paper);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-lift);z-index:2}
.d-tl{display:block;font-size:11px;color:#9C9486;margin-bottom:6px}
.d-tx{display:block;font-family:var(--font-mono);font-size:13px;background:#2E2A25;border-radius:6px;padding:8px 10px}
.caret{display:inline-block;width:2px;height:1em;background:var(--color-accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.d-hand{position:absolute;right:-6px;bottom:-30px;font-family:var(--font-hand);color:var(--color-accent);font-size:18px;rotate:-3deg;white-space:nowrap}
/* ---------- vergelijking ---------- */
.cmp{border-top:2px solid var(--color-ink)}
.cmp-row{display:grid;grid-template-columns:1.1fr 2.3fr 2.3fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--color-rule);align-items:baseline}
.cmp-row b{font-family:var(--font-serif);font-size:20px}
.cmp-row span:nth-child(n+2){color:var(--color-ink);position:relative;padding-left:22px}
.cmp-row span:nth-child(n+2)::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:2px;background:var(--color-accent)}
.cmp-head{font-size:13px;font-weight:700;color:var(--color-ink-3);text-transform:uppercase;letter-spacing:.06em;padding-top:12px}
.cmp-head span:nth-child(n+2){color:var(--color-accent);padding-left:22px}
.cmp-head span:nth-child(n+2)::before{display:none}
.cmp-both span{grid-column:2 / -1;font-weight:500}
/* ---------- demo ---------- */
.demo{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
.demo-shop{color:var(--color-ink);font-size:15px}
.demo-in{padding:22px 24px 24px}
.demo-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.demo-sel{min-width:240px;padding-top:10px;padding-bottom:10px}
.demo-terms{margin-top:12px;font-size:13.5px;color:var(--color-ink-2);background:var(--color-paper);border-radius:10px;padding:8px 12px;transition:background .4s}
.demo-terms.flash,.demo-price.flash{background:var(--color-accent-soft)}
.demo-list{list-style:none;padding:0;margin:14px 0 0}
.demo-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #F0EDE7}
.demo-item .th{width:42px;height:42px}
.demo-name b{display:block;font-size:15px;line-height:1.25}
.demo-name small{font-size:13px;color:var(--color-ink-3)}
.demo-price{font-weight:700;color:var(--color-ink);border-radius:4px;padding:0 3px;transition:background .6s}
.demo-item.out .demo-stock{color:var(--color-accent);font-weight:600}
.qty{display:flex;align-items:center;border:1.5px solid var(--color-rule);border-radius:999px;overflow:hidden;background:#fff}
.qty-b{width:36px;height:38px;font:inherit;font-size:18px;font-weight:600;color:var(--color-ink);background:transparent;border:0;cursor:pointer}
.qty-b:hover{background:var(--color-paper)}
.qty-b:disabled{color:#CFC8BA;cursor:default;background:transparent}
.qty-i{width:40px;height:38px;border:0;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--color-ink);background:transparent;-moz-appearance:textfield;appearance:textfield}
.qty-i::-webkit-outer-spin-button,.qty-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-i:focus{outline:2px solid var(--color-accent);outline-offset:-2px}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.demo-foot small{display:block;font-size:12.5px;color:var(--color-ink-3)}
.demo-foot b{font-family:var(--font-serif);font-size:28px}
.demo-msg{min-height:1.5em;margin-top:12px;font-size:14px;font-weight:600}
.demo-msg.ok{color:var(--color-ok)}
.demo-msg.warn{color:var(--color-accent)}
.demo-erp{position:sticky;top:96px}
.demo-log{list-style:none;padding:0;margin:4px 0 0;min-height:150px}
.demo-log li{padding:9px 0;border-bottom:1px solid #2E2A25;font-size:13px;animation:logIn .5s cubic-bezier(.2,.8,.2,1)}
.demo-log li b{font-family:var(--font-mono);font-size:12px;color:var(--color-accent-soft);margin-right:6px}
.demo-log li small{display:block;color:#9C9486;font-size:12px}
.demo-log li.muted{color:#9C9486;animation:none}
@keyframes logIn{from{opacity:0;transform:translateY(-8px);background:#3A2A22}to{opacity:1;transform:none;background:transparent}}
.demo-erp-stock{margin-top:12px;display:grid;gap:6px}
.demo-erp-stock div{display:flex;justify-content:space-between;font-size:12.5px;background:#2E2A25;border-radius:8px;padding:6px 10px}
.demo-erp-stock b{font-family:var(--font-mono);transition:color .4s}
.demo-erp-stock b.drop{color:var(--color-accent-soft)}
.demo-hand{margin-top:14px;font-family:var(--font-hand);color:var(--color-accent-soft);font-size:18px}
.toast-erp{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:70;background:var(--color-ok);color:#fff;font-weight:700;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow-lift);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.toast-erp.on{opacity:1;transform:none}
/* ---------- responsief ---------- */
@media (max-width:1023px){
.demo{grid-template-columns:minmax(0,1fr)}
.demo-erp{position:static;scroll-margin:96px}
.demo-log{min-height:0}
}
@media (max-width:767px){
.flow{grid-template-columns:minmax(0,1fr);max-width:420px}
.fl-pipe{height:110px;margin:0}
.fl-pipe-l{left:auto;right:0;top:50%;translate:0 -50%}
.fl-lane{top:0;bottom:0;left:auto;right:auto;width:2px;height:auto;background-image:linear-gradient(180deg,var(--color-rule) 50%,transparent 50%);background-size:2px 10px}
.fl-out{left:32%}
.fl-back{left:62%}
.fl-out::after{right:auto;top:auto;bottom:-2px;left:-4px;border:5px solid transparent;border-top:7px solid var(--color-rule)}
.fl-back::after{left:-4px;top:-2px;border:5px solid transparent;border-bottom:7px solid var(--color-rule)}
.pk{top:auto;left:50%!important;translate:-50% 0;transition:top 1.3s cubic-bezier(.5,0,.3,1),opacity .25s}
.pk-out{top:0}
.pk-back{top:calc(100% - 24px)}
.flow.s2 .pk-out{top:calc(100% - 24px)}
.flow.s4 .pk-back{top:0}
.fl-steps{grid-template-columns:1fr 1fr}
.desk{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:30px}
.d-obj,.d-typing{position:relative;left:auto;right:auto;top:auto;bottom:auto;translate:none;width:auto;height:auto}
.d-typing{grid-column:1 / -1;order:-1;width:auto}
.d-hand{right:0;bottom:-28px}
.d-typing{margin-bottom:22px}
.cmp-row{grid-template-columns:minmax(0,1fr);gap:4px}
.cmp-head{display:none}
.cmp-row span:nth-child(n+2){padding-left:0}
.cmp-row span:nth-child(n+2)::before{position:static;display:inline;width:auto;height:auto;background:none;font-weight:700;color:var(--color-ink-3)}
.cmp-row span:nth-child(2)::before{content:"Particulier: "}
.cmp-row span:nth-child(3)::before{content:"Bedrijf: "}
.cmp-both span{grid-column:auto}
.cmp-both span::before{content:"Allebei: " !important}
.demo-in{padding:16px}
.demo-item{grid-template-columns:minmax(0,1fr) auto}
.demo-item .th{display:none}
.demo-sel{min-width:0}
.demo-top > div{flex:1 1 100%}
}
@media (max-width:420px){
.desk{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
.d-obj,.caret{animation:none}
}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
.svc-hero{margin-top:0px;margin-bottom:-16px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:0px;margin-bottom:-16px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:-32px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:80px}
}

/* omzetting naar Wagtail */
@layer components{
/* de verwijzingen onder de afsluiter (erp.links): in het prototype twee <p> in de sectie van de afsluiter */
.erp-links{margin-top:32px}
.erp-links p + p{margin-top:12px}
}