/* software-op-maat: CSS van de secties op deze pagina (docs/prototype/software-op-maat.html, inline <style>).
   De cases-carrousel staat in cases.css, de stappen en het kruimelpad in styles.css. De FAQ-regels van het
   prototype zijn weggelaten: de pagina gebruikt het gedeelde FAQ-blok. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: software op maat ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* hero: excel wordt erp */
.morph-track{position:relative}
/* de hero speelt een lus en scrolt gewoon mee: geen vastgezet blok meer */
.morph-stage{position:relative;padding:48px 0 32px}
.morph-note{position:absolute;top:72px;left:0;right:0;z-index:5}
.morph-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.morph-copy h1{font-size:clamp(38px,4vw,60px)}
.morph-vis{position:relative;aspect-ratio:10/7;container-type:inline-size;font-size:clamp(8px,1.9cqw,14px)}
.morph-cap{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:14px;color:var(--color-ink-3)}
.morph-cap span{transition:color .3s}
.morph-cap span.on{color:var(--color-ink);font-weight:600}
.morph-cap .arr{color:var(--color-accent)}
.xl{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--font-sans);line-height:1.2}
.xl::before{content:"";position:absolute;inset:0;background:#fff;border-radius:.6em;box-shadow:0 30px 60px -25px rgb(25 23 20 / .35),0 0 0 1px rgb(25 23 20 / .06);opacity:var(--chrome,1)}
.xl > *{position:relative}
.xl-title{display:flex;justify-content:space-between;gap:1em;background:#1E7145;color:#fff;padding:.7em 1em;border-radius:.6em .6em 0 0;font-weight:600}
.xl-ro{font-weight:400;opacity:.8;white-space:nowrap}
.xl-fx{padding:.45em 1em;border-bottom:1px solid #E3E3E3;font-family:var(--font-mono);font-size:.9em;color:#444;white-space:nowrap;overflow:hidden}
.xl-fx i{font-style:italic;color:#888;margin-right:1em}
.xl-grid{flex:1;display:grid;grid-template-columns:2.2em 1.45fr 1fr .8fr 1fr 1.25fr;grid-auto-rows:1fr}
.xl-h,.xl-n{background:#F3F3F3;color:#666;border-right:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;display:flex;align-items:center;justify-content:center;font-size:.85em}
.xl-h{grid-row:auto;height:1.8em}
.xc{display:flex;align-items:center;padding:0 .6em;background:#fff;border-right:1px solid #E3E3E3;border-bottom:1px solid #E3E3E3;white-space:nowrap;overflow:hidden;transform-origin:0 0;will-change:transform;color:var(--color-ink)}
.xc.b{font-weight:700;background:#F7F7F2}
.xc.r{justify-content:flex-end}
.xc.err{color:#C0392B;font-weight:700}
.xc.hl{background:#FFF59D}
.xc.warn{color:#fff;background:#C0392B;font-weight:700;font-size:.85em}
.xc .tx{transition:none}
.xl-tabs{display:flex;gap:.2em;padding:.4em .6em;background:#F3F3F3;border-radius:0 0 .6em .6em;font-size:.85em;color:#555}
.xl-tabs span{padding:.2em .8em}
.xl-tabs .on{background:#fff;color:#1E7145;font-weight:700;border-bottom:2px solid #1E7145}
.xl-chrome{opacity:var(--chrome,1)}
.erp{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--color-card);border-radius:.8em;overflow:hidden;box-shadow:0 30px 60px -25px rgb(25 23 20 / .35),0 0 0 1px rgb(25 23 20 / .08);opacity:0}
.erp-top{display:flex;align-items:center;gap:1em;background:var(--color-ink);color:var(--color-paper);padding:.7em 1em}
.erp-top b{font-family:var(--font-serif);font-size:1.15em}
.erp-search{flex:1;background:#2E2A25;color:#9C9486;border-radius:2em;padding:.25em .9em;font-size:.85em}
.erp-user{font-size:.85em;color:#CFC7B8}
.erp-body{flex:1;display:grid;grid-template-columns:8.5em 1fr;min-height:0}
.erp-nav{display:flex;flex-direction:column;gap:.35em;padding:.8em .6em;border-right:1px solid var(--color-rule);background:var(--color-paper)}
.erp-nav span{padding:.45em .7em;border-radius:.5em;color:var(--color-ink-2);font-weight:600}
.erp-nav span.on{background:var(--color-ink);color:var(--color-paper)}
.erp-nav .erp-new{margin-top:auto;background:var(--color-accent);color:#fff;text-align:center}
.erp-main{padding:.8em;display:flex;flex-direction:column;gap:.7em;min-width:0}
.erp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.erp-kpis div{background:#fff;border:1px solid var(--color-rule);border-radius:.6em;padding:.45em .7em}
.erp-kpis small{display:block;color:var(--color-ink-3);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erp-kpis b{font-family:var(--font-serif);font-size:1.6em;line-height:1.1}
.erp-cols{flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:.7em;min-height:0}
.erp-card{background:#fff;border:1px solid var(--color-rule);border-radius:.6em;padding:.6em .7em;min-width:0}
.erp-card .eh{font-weight:600;font-family:var(--font-sans);font-size:.75em;text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink-3);margin-bottom:.4em}
.erp-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:.4em;align-items:center;padding:.45em 0;border-bottom:1px solid #F0EDE7;font-size:.9em}
.erp-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erp-row .st{font-size:.85em;font-weight:600;background:var(--color-paper-2);color:var(--color-ink-2);border-radius:2em;padding:.1em .6em}
.erp-row .st.ok{background:var(--color-ok-soft);color:var(--color-ok)}
.erp-stock{display:grid;grid-template-columns:4em 1fr;gap:.5em;align-items:center;font-size:.85em;margin:.3em 0}
.erp-stock i{display:block;height:.7em;border-radius:1em;background:linear-gradient(90deg,var(--color-ok) var(--w),#EEE9DF var(--w))}
.erp-stock i.low{background:linear-gradient(90deg,var(--color-accent) var(--w),#EEE9DF var(--w))}
.erp-plan{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto repeat(3,1.1em);gap:.25em;font-size:.75em;color:var(--color-ink-3)}
.erp-plan span{text-align:center}
.erp-plan i{grid-column:var(--c) / span var(--s);grid-row:calc(var(--r) + 1);background:var(--color-ink);border-radius:.3em}
.erp-plan i.alt{background:var(--color-accent)}
/* herkenning */
.pain-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pain .obj{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.pain .obj > *{animation:bob 6s ease-in-out infinite}
.pain:nth-child(2) .obj > *{animation-delay:-1.5s}
.pain:nth-child(3) .obj > *{animation-delay:-3s}
.pain:nth-child(4) .obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.6deg)}}
.pain h3{font-size:22px;padding-top:16px;border-top:1px solid var(--color-rule)}
.pain p{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.o-mail{width:100%;max-width:220px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-size:11px;padding:10px 12px;line-height:1.4;rotate:-3deg}
.o-mail .from{color:var(--color-ink-3)}
.o-mail .subj{font-weight:700;margin:3px 0 5px}
.o-scrib{display:block;margin-top:6px;font-family:var(--font-hand);font-size:14px;color:#2B3F86}
.o-sheet{width:100%;max-width:210px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-family:var(--font-mono);font-size:10px;overflow:hidden;rotate:2deg}
.o-sheet .t{background:#1E7145;color:#fff;padding:5px 8px;font-size:9.5px}
.o-sheet table{border-collapse:collapse;width:100%}
.o-sheet td{border:1px solid #E3E3E3;padding:4px 6px}
.o-sheet td.r{color:#C0392B;font-weight:700}
.o-sheet td.lock{background:#C0392B;color:#fff;font-weight:700}
.o-quote{width:100%;max-width:205px;background:#fff;border-radius:4px;box-shadow:0 8px 24px rgb(25 23 20 / .12);padding:12px;font-size:10.5px;line-height:1.45;border-top:5px solid #3A5BA0;rotate:-1.5deg}
.o-quote b{display:block;font-size:12px;margin-bottom:4px}
.o-quote .stamp{display:inline-block;margin-top:6px;border:1.5px solid #B03A2E;color:#B03A2E;font-weight:800;padding:1px 6px;transform:rotate(-6deg);font-size:10px;letter-spacing:.06em}
.o-bon{width:100%;max-width:200px;background:#FDFCF7;border:1px dashed #BDB5A5;box-shadow:0 8px 24px rgb(25 23 20 / .1);padding:10px 12px;font-family:var(--font-mono);font-size:10px;position:relative;rotate:3deg}
.o-bon .sig{font-family:var(--font-hand);font-size:17px;color:#2B3F86;margin-top:6px}
.o-bon .coffee{position:absolute;right:10px;bottom:6px;width:44px;height:44px;border-radius:50%;border:5px solid rgb(140 90 40 / .18)}
/* pakket of maatwerk */
.choice-tabs{display:flex;flex-wrap:wrap;gap:10px}
.choice-tab{font:inherit;font-size:15px;font-weight:600;padding:12px 20px;border-radius:999px;border:1.5px solid var(--color-rule);background:transparent;color:var(--color-ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.choice-tab:hover{border-color:var(--color-ink)}
.choice-tab.active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.choice-panel{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.choice-panel.hidden{display:none}
.choice-panel h3{line-height:1.12}
.ticks{list-style:none;padding:0;margin-left:0}
.ticks li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--color-rule);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:13px;height:2px;background:var(--color-accent)}
.choice-fig svg{width:100%;height:auto}
.choice-fig figcaption{text-align:center;margin-top:6px}
.s-pkg{fill:#E7E0D3;stroke:#C9C0AE;stroke-width:1.5}
.s-fit{fill:#fff;stroke:#C9C0AE}
.s-shape{fill:none;stroke:var(--color-ink-2);stroke-width:1.6;stroke-dasharray:5 5}
.s-own{fill:var(--color-accent);opacity:.92}
.s-t{font-family:var(--font-hand);font-size:15px;fill:var(--color-ink-2)}
.s-l{font-family:var(--font-sans);font-size:11px;font-weight:600;fill:var(--color-ink-2)}
.s-lw{fill:#fff}
.s-link{stroke:var(--color-accent);stroke-width:2.5;stroke-dasharray:4 4;fill:none;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
/* modulekaart */
.mods{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.mods-map{position:relative;aspect-ratio:1/1;max-width:600px;width:100%;margin:0 auto}
.mods-map::before{content:"";position:absolute;inset:6%;border-radius:50%;border:1px dashed var(--color-rule)}
.mods-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mods-lines line{stroke:var(--color-rule);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .3s}
.mods-lines line.on{stroke:var(--color-accent);stroke-width:2.5;stroke-dasharray:6 6;animation:dash 1s linear infinite}
.mods-lines line.ext.on{stroke:var(--color-ink-2)}
.mods-hub{position:absolute;left:50%;top:50%;translate:-50% -50%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--color-ink);color:var(--color-paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4%;box-shadow:var(--shadow-lift)}
.mods-hub b{font-family:var(--font-serif);font-size:clamp(16px,2.2vw,24px);line-height:1.1}
.mods-hub span{font-size:clamp(10px,1.1vw,13px);color:#CFC7B8;margin-top:4px;line-height:1.25}
.mod{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);translate:-50% -50%;width:24%;min-height:44px;padding:10px 8px;border-radius:14px;border:1.5px solid var(--color-rule);background:var(--color-card);font:inherit;font-size:clamp(12px,1.25vw,15px);font-weight:600;line-height:1.2;color:var(--color-ink-3);cursor:pointer;hyphens:manual;overflow-wrap:break-word;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.mod:hover{border-color:var(--color-ink);color:var(--color-ink)}
.mod[aria-pressed="true"]{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:#fff;box-shadow:0 10px 24px -10px rgb(217 71 31 / .7)}
.mod.mod-ext{border-style:dashed}
.mod.mod-ext[aria-pressed="true"]{background:#E7E0D3;border-color:var(--color-ink-2);color:var(--color-ink);box-shadow:none}
.mod.cur{outline:2px solid var(--color-ink);outline-offset:3px}
.mod::after{content:"+";display:block;font-size:11px;font-weight:700;opacity:.7;margin-top:2px}
.mod[aria-pressed="true"]::after{content:"✓ gekozen"}
.mods-detail article h3{font-size:30px}
.mods-detail article p{margin-top:10px;color:var(--color-ink-2)}
.mods-detail .mods-ex{font-size:14.5px;color:var(--color-ink-3);padding-top:10px;border-top:1px solid var(--color-rule);margin-top:16px}
.mods-detail article:not([hidden]){animation:copyIn .35s ease}
@keyframes copyIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.mods-sum{margin-top:28px;padding:22px;border-radius:18px;background:var(--color-paper-2)}
.mods-list{font-family:var(--font-serif);font-size:22px;margin-top:4px;line-height:1.25}
/* waarom nu: een kleine projectplanning. Drie fasen als balken op een tijdlijn en een vlag "live". Met de schakelaar
   (of vanzelf, als ze in beeld komt) worden alle balken korter en schuift de vlag naar voren: AI helpt in elke fase.
   Labels staan bij de rijen, geen legende; schets zonder cijfers. */
.plan{margin-top:30px}
.pl-switch{display:inline-flex;padding:4px;border-radius:999px;background:var(--color-paper-2)}
.pl-switch button{font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;color:var(--color-ink-2);cursor:pointer;transition:background .25s,color .25s}
.pl-switch button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}
.pl-switch button[data-mode="ai"][aria-pressed="true"]{background:var(--color-accent-strong);color:#fff}
.pl-switch button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.pl-board{margin-top:14px;padding:16px 18px 34px;border-radius:16px;background:var(--color-card);border:1px solid var(--color-rule)}
.pl-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;height:44px}
.pl-lab{font-size:14px;font-weight:600;color:var(--color-ink)}
.pl-track{position:relative;height:30px;background:repeating-linear-gradient(90deg,rgb(25 23 20 / .07) 0 1px,transparent 1px 10%)}
.pl-bar{position:absolute;top:0;bottom:0;left:var(--x0);width:var(--w0);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;border-radius:8px;background:var(--color-ink-2);transition:left 1.2s cubic-bezier(.2,.8,.2,1),width 1.2s cubic-bezier(.2,.8,.2,1),background .6s}
.pl-bar b{padding:2px 7px;border-radius:999px;background:#fff;color:var(--color-accent-dark);font-size:11px;font-weight:800;letter-spacing:.04em;opacity:0;transition:opacity .4s}
/* met AI blijft de oude balk als stippellijn staan: zo zie je wat er gewonnen is, zonder legende */
.pl-track::before{content:"";position:absolute;top:0;bottom:0;left:var(--x0);width:var(--w0);border-radius:8px;border:1.5px dashed var(--color-ink-3);opacity:0;transition:opacity .5s}
.plan[data-mode="ai"] .pl-track::before{opacity:.45;transition-delay:.6s}
.pl-axis .pl-track::before{display:none}
.pl-axis{height:40px}
.pl-axis .pl-track{height:2px;background:var(--color-ink-3)}
.pl-flag{position:absolute;bottom:0;left:var(--e0);width:2px;height:150px;background:var(--color-ink);transition:left 1.2s cubic-bezier(.2,.8,.2,1)}
.pl-flag span{position:absolute;bottom:-26px;left:50%;translate:-50% 0;padding:3px 10px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-size:12px;font-weight:700;white-space:nowrap}
.plan[data-mode="ai"] .pl-bar{left:var(--x1);width:var(--w1);background:var(--color-accent)}
.plan[data-mode="ai"] .pl-bar b{opacity:1;transition-delay:.9s}
.plan[data-mode="ai"] .pl-flag{left:var(--e1)}
.plan[data-mode="ai"] .pl-flag span{background:var(--color-accent-strong)}
@media (max-width:1279px){
.pl-bar{padding-right:2px;border-radius:6px}
.pl-bar b{padding:1px 4px;font-size:9px;letter-spacing:0}
}
@media (max-width:359px){
.pl-bar b{display:none}
}
@media (max-width:640px){
.pl-row{grid-template-columns:90px minmax(0,1fr);gap:8px}
.pl-lab{font-size:13px}
.pl-board{padding:14px 12px 32px}
}
@media (prefers-reduced-motion:reduce){
.pl-bar,.pl-flag,.pl-bar b{transition:none}
}
/* responsief en stilstaand */
/* desktop: altijd vier naast elkaar. Tussen 1024 en 1279px zijn de kolommen smal, dus de titel krimpt mee
   (18 tot 22px) en de tussenruimte is kleiner, zodat elke titel op één regel blijft */
@media (min-width:1024px) and (max-width:1279px){
.pain-row{gap:24px}
.pain h3{font-size:clamp(18px,1.72vw,22px)}
.pain .obj > *{scale:.9}
}
@media (max-width:1023px){
.morph-grid{grid-template-columns:minmax(0,1fr);gap:36px}
.choice-panel,.mods{grid-template-columns:minmax(0,1fr)}
.pain-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px),(orientation:portrait){
.morph-note{position:relative;top:auto}
}
@media (max-width:640px){
.pain-row{grid-template-columns:minmax(0,1fr)}
.pain-row{gap:24px}
.pain .obj{height:118px;margin-bottom:10px}
.pain .obj > *{scale:.85}
.xl-ro{display:none}
.erp-body{grid-template-columns:6.5em 1fr}
.erp-cols{grid-template-columns:1fr}
.erp-cols .erp-card:last-child{display:none}
.mod{width:27%;padding:8px 4px;border-radius:12px}
.mod::after{display:none}
.mods-hub span{display:none}
}
@media (prefers-reduced-motion:reduce){
.pain .obj > *,.s-link,.mods-lines line.on{animation:none}
}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.morph-vis{aspect-ratio:1/1;font-size:max(10px,1.9cqw)}
}
/* 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. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.svc-hero{margin-top:-16px;margin-bottom:0px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-16px;margin-bottom:0px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:0px}
}

/* omzetting naar Wagtail: rich text staat in een <div> rond de <p> */
@layer components{
.mods-detail .mods-ex p{margin-top:0;color:inherit}
.pain-row .pain p + p{margin-top:.5em}
}