/* website-laten-maken: CSS van de secties op deze pagina (docs/prototype/website-laten-maken.html, inline <style>).
   De cases-carrousel staat in cases.css, de stappen en het kruimelpad in styles.css. */
/* ---------- website laten maken: paginaspecifiek ---------- */
.hand{font-family:var(--font-hand)}
.wl-aalst a{padding-block:3px}
/* hero: blijft staan terwijl de site in het venster van taal wisselt en herschikt */
.wl-track{position:relative}
.wl-h1{font-size:clamp(36px,4.3vw,62px);line-height:1.04;text-wrap:balance}
@media (min-width:640px){
.wl-kw{white-space:nowrap}
}
/* naast de visual: schaal met de kolom, zodat "Website laten maken:" (nowrap) er nooit onder schuift */
@media (min-width:1024px){
.wl-copy{container-type:inline-size}
.wl-h1{font-size:clamp(36px,9.4cqi,62px)}
}
.wl-lede{text-wrap:pretty}
.wl-fact{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--color-ink-2)}
.wl-sticky{padding:28px 0 56px}
@media (min-width:1024px){
.wl-sticky{padding:36px 0 80px}
}
.wl-phases{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.wl-phases li{display:flex;gap:8px;align-items:center;padding:0;color:var(--color-ink-3);font-size:15px;line-height:1.35;transition:color .3s}
.wl-phases li b{display:block;font-family:var(--font-serif);font-size:15px;font-weight:600;color:inherit;white-space:nowrap}
.wl-phases li i{flex:none;font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--color-rule);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .3s}
.wl-phases li.on{color:var(--color-ink)}
.wl-phases li.on i{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.wl-phases li.done{color:var(--color-ink-2)}
.wl-phases li.done i{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
/* het browservenster */
.wl-mock{position:relative;container-type:inline-size;background:#fff;border-radius:16px;box-shadow:var(--shadow-lift),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden}
.wl-mock-in{font-size:clamp(8.5px,2.05cqw,14px);line-height:1.35}
.wl-bar{height:2.8em;background:#F1EEE8;display:flex;align-items:center;gap:.5em;padding:0 1em;color:var(--color-ink-3)}
.wl-bar i{width:.75em;height:.75em;border-radius:50%;background:#DAD3C6}
.wl-url{margin-left:.8em;flex:1;background:#fff;border-radius:1em;padding:.25em .9em;font-size:.9em;white-space:nowrap;overflow:hidden}
.wl-url b{color:var(--color-ink);font-weight:600;transition:color .3s}
.wl-url.flash b{color:var(--color-accent)}
.wl-status{font-size:.82em;font-weight:700;padding:.2em .7em;border-radius:1em;background:var(--color-warn-soft);color:var(--color-warn);white-space:nowrap;transition:background .3s,color .3s}
.wl-status.live{background:var(--color-ok-soft);color:var(--color-ok)}
.wl-body{display:grid;grid-template-columns:0fr 1fr;min-height:30em;transition:grid-template-columns .6s cubic-bezier(.2,.8,.2,1)}
.ed-open .wl-body{grid-template-columns:.78fr 1fr}
/* beheerpaneel */
.wl-editor{min-width:0;overflow:hidden;background:var(--color-paper);border-right:1px solid var(--color-rule)}
.wl-editor-in{width:100%;min-width:15em;padding:1.1em 1em;opacity:0;transition:opacity .4s .15s}
.ed-open .wl-editor-in{opacity:1}
.wl-ed-h{font-family:var(--font-serif);font-weight:600;font-size:1.25em;margin-bottom:.2em}
.wl-ed-sub{font-size:.85em;color:var(--color-ink-3);margin-bottom:.9em}
.wl-ed-list{display:flex;flex-direction:column;gap:.45em}
.wl-ed-item{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--color-rule);border-radius:.6em;padding:.6em .7em;font-weight:600;font-size:.95em;position:relative}
.wl-ed-item .grip{color:var(--color-ink-3);letter-spacing:-.15em;font-weight:800}
.wl-ed-item small{margin-left:auto;font-weight:500;color:var(--color-ink-3);font-size:.8em}
.wl-ed-item.lift{box-shadow:0 .8em 1.6em -.4em rgb(25 23 20 / .35);border-color:var(--color-ink);rotate:-1.2deg;z-index:2}
.wl-ed-item.lift::after{content:"";position:absolute;right:-.4em;top:60%;width:1.5em;height:1.7em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M2 2 L2 19 L6.5 15 L9.5 22 L12.5 20.7 L9.6 14 L16 14 Z' fill='%23191714' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wl-ed-foot{margin-top:1em;display:flex;gap:.5em;flex-wrap:wrap}
.wl-ed-foot span{font-size:.85em;font-weight:700;padding:.45em .9em;border-radius:1em;border:1.5px solid var(--color-ink)}
.wl-ed-foot .pub{background:var(--color-ink);color:#fff;transition:background .3s,transform .2s}
.live .wl-ed-foot .pub{background:var(--color-ok);border-color:var(--color-ok)}
/* de pagina zelf */
.wl-page{min-width:0;padding:1.2em 1.4em 1.4em;display:flex;flex-direction:column;gap:.8em}
.wl-nav{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.wl-logo{font-family:var(--font-serif);font-weight:700;font-size:1.1em}
.wl-langs{display:flex;gap:.3em}
.wl-langs span{font-size:.78em;font-weight:700;padding:.2em .55em;border-radius:.4em;background:#F1EEE8;color:var(--color-ink-3);transition:background .25s,color .25s}
.wl-langs span.on{background:var(--color-ink);color:#fff}
.wl-blocks{display:flex;flex-direction:column;gap:.7em}
.wl-blk{border-radius:.6em;position:relative}
.wl-blk[data-k="hero"]{padding:.4em 0 .2em}
.wl-h{font-family:var(--font-serif);font-weight:600;font-size:2.05em;line-height:1.08;min-height:2.2em;letter-spacing:-.01em}
.wl-sub{color:var(--color-ink-2);margin-top:.4em}
.wl-btn{display:inline-block;margin-top:.7em;background:var(--color-accent);color:#fff;font-weight:700;font-size:.85em;padding:.45em 1em;border-radius:1em}
.wl-vid{height:7.4em;background:repeating-linear-gradient(45deg,#EFEAE1 0 8px,#E6DFD2 8px 16px);display:flex;align-items:center;justify-content:center;gap:.6em;color:var(--color-ink-2);font-size:.9em;font-weight:600}
.wl-vid b{width:2.4em;height:2.4em;border-radius:50%;background:var(--color-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9em}
.wl-txt{padding:.2em 0}
.wl-txt b{font-family:var(--font-serif);font-size:1.15em}
.wl-txt i{display:block;height:.5em;border-radius:1em;background:#ECE7DE;margin-top:.5em}
.wl-cta{background:var(--color-paper);padding:.7em .9em;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9em}
.wl-blk.hl{outline:2px dashed var(--color-accent);outline-offset:.25em}
.t-swap{transition:opacity .22s}
.t-swap.out{opacity:0}
.wl-hnote{position:absolute;font-family:var(--font-hand);color:var(--color-accent);font-size:clamp(17px,1.6vw,22px);line-height:1.15;rotate:-3deg;opacity:0;transition:opacity .4s;pointer-events:none}
.wl-hnote.on{opacity:1;transition-delay:.4s}
.wl-stage{position:relative;padding-top:34px}
.zz-pub,.zz-urls,.zz-img,.zz-redir{width:100%;max-width:380px}
.zz-pub{background:#fff;border-radius:12px;box-shadow:var(--shadow-soft);padding:16px}
.zz-pub-h{display:flex;flex-direction:column;margin-bottom:12px}
.zz-pub-h span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3)}
.zz-pub-h b{font-family:var(--font-serif);font-size:20px;font-weight:600}
.zz-pub-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--color-rule)}
.zz-pub-row .av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;background:var(--color-accent-soft);color:var(--color-accent-dark)}
.zz-pub-row .av-2{background:var(--color-ok-soft);color:var(--color-ok)}
.zz-pub-row span{font-weight:600}
.zz-pub-row small{color:var(--color-ink-3)}
.zz-pub-row em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.zz-pub-row em.ok{background:var(--color-ok-soft);color:var(--color-ok)}
.zz-pub-row em.go{background:var(--color-ink);color:#fff}
.zz-urls{display:grid;gap:8px}
.zz-urls div{display:flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:9px 16px;box-shadow:var(--shadow-soft)}
.zz-urls span{color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zz-urls b{color:var(--color-ink);font-weight:700}
.zz-urls em{margin-left:auto;font-style:normal;font-weight:700;color:var(--color-ok)}
.zz-urls .miss{background:transparent;box-shadow:none;border:1.5px dashed var(--color-rule)}
.zz-urls .miss em{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--color-warn-soft);color:var(--color-warn)}
.zz-img{display:flex;align-items:center;gap:14px}
.zz-file{flex:none;width:118px;background:#fff;border-radius:10px;box-shadow:var(--shadow-soft);padding:8px;display:flex;flex-direction:column;gap:2px}
.zz-file .ph{display:block;height:64px;border-radius:6px;background:linear-gradient(135deg,#C9BFAE,#8F8574);margin-bottom:6px}
.zz-file span{font-weight:700}
.zz-file small,.zz-out small{color:var(--color-ink-3)}
.zz-arrow{font-size:22px;color:var(--color-accent)}
.zz-out{flex:1;display:grid;gap:6px}
.zz-out div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:#fff;border-radius:8px;padding:7px 12px;box-shadow:var(--shadow-soft)}
.zz-out b{font-family:var(--font-mono);font-size:12px}
.zz-redir{display:flex;flex-direction:column;align-items:stretch}
.zz-redir .old,.zz-redir .new{background:#fff;border-radius:10px;padding:10px 14px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.zz-redir small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3)}
.zz-redir span{font-family:var(--font-mono);font-size:13px}
.zz-redir .old span{color:var(--color-ink-3);text-decoration:line-through;text-decoration-color:var(--color-accent)}
.zz-redir .hop{display:flex;align-items:center;gap:10px;padding:8px 14px}
.zz-redir .hop span{font-size:20px;color:var(--color-accent);font-family:inherit}
.zz-redir .hop em{font-family:var(--font-hand);font-style:normal;font-size:18px;color:var(--color-accent);rotate:-2deg}
/* meer nodig: dezelfde twee deuren als op websites-en-webshops (.ww-doors, .dx); hoort op termijn in src/site.css */
.ww-head{display:grid;gap:12px}
.ww-head .lede{max-width:52ch}
.ww-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dx{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:500px;overflow:hidden;border-radius:28px;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.dx:hover,.dx:focus-visible{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgb(25 23 20 / .55)}
.dx:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.dx-dark{background:var(--color-ink);color:var(--color-paper)}
.dx-light{background:var(--color-accent-strong);color:#fff}
.dx-text{padding:clamp(26px,3vw,40px) clamp(28px,3.6vw,44px) 36px}
.dx h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.dx-dark h3{color:var(--color-paper)}
.dx-light h3{color:#fff}
.dx-text p{margin-top:12px;max-width:44ch;font-size:17px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (max-width:1023px){
.dx-text p{display:block}
}
.dx-dark .dx-text p{color:rgb(244 239 230 / .72)}
.dx-light .dx-text p{color:rgb(255 255 255 / .88)}
.dx-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.dx-btn span{transition:transform .25s}
.dx:hover .dx-btn span,.dx:focus-visible .dx-btn span{transform:translateX(4px)}
.dx-dark .dx-btn{border:1px solid rgb(244 239 230 / .4)}
.dx-dark:hover .dx-btn{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.dx-light .dx-btn{border:1px solid rgb(255 255 255 / .55)}
.dx-light:hover .dx-btn{background:#fff;border-color:#fff;color:var(--color-accent-strong)}
/* het schermpje dat onderaan uit de kaart komt */
.dx-app{display:flex;margin:auto 0 0 clamp(28px,3.6vw,48px);height:250px;translate:0 14px;border-radius:14px 0 0 0;overflow:hidden;background:var(--color-card);color:var(--color-ink);box-shadow:0 -20px 50px -20px rgb(0 0 0 / .45);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.dx-light .dx-app{box-shadow:0 -20px 50px -20px rgb(90 25 8 / .45)}
.dx:hover .dx-app,.dx:focus-visible .dx-app{translate:0 8px}
.dx-app{flex-direction:column;position:relative}
.dx-bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 14px;background:#EFE9DE;border-bottom:1px solid #E2DACB}
.dx-bar i{width:8px;height:8px;border-radius:50%;background:#D3C9B7}
.dx-bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#FBF8F2;font-size:11px;color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-page{flex:1;min-height:0;padding:12px 18px;background:#fff}
.dx-top{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid #F0EBE2;font-size:11px;white-space:nowrap}
.dx-logo{font-family:var(--font-serif);font-size:15px;font-weight:600}
.dx-logo em{font-style:normal;color:var(--color-accent)}
.dx-links{display:flex;gap:10px;margin-left:auto}
.dx-links i{width:30px;height:5px;border-radius:3px;background:#E6E0D4}
.dx-lang{display:flex;gap:3px}
.dx-lang em{font-style:normal;font-size:9.5px;font-weight:700;padding:2px 5px;border-radius:5px;color:var(--color-ink-3);transition:background .3s,color .3s}
.dx-lang em.on{background:var(--color-ink);color:var(--color-paper)}
.dx-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;padding-top:14px}
.dx-h1{font-family:var(--font-serif);font-size:19px;line-height:1.12;font-weight:600}
.dx-line{display:block;height:5px;margin-top:9px;border-radius:3px;background:#ECE6DA}
.dx-line.s{width:70%;margin-top:6px}
.dx-cta{display:inline-block;margin-top:12px;padding:5px 11px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-size:10.5px;font-weight:600}
.dx-vid{position:relative;aspect-ratio:16/10;border-radius:8px;background:linear-gradient(135deg,#4A453D,#2A2622)}
.dx-play{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgb(244 239 230 / .92);transition:transform .3s}
.dx-play::after{content:"";position:absolute;left:12px;top:9px;border:6px solid transparent;border-left:9px solid var(--color-ink);border-right:0}
.dx:hover .dx-play{transform:scale(1.15)}
.dx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.dx-tiles i{height:46px;border-radius:7px;background:#F4EFE6}
.dx-edit{position:absolute;top:96px;right:26px;padding:4px 10px;border-radius:999px;background:var(--color-postit);font-family:var(--font-hand);font-size:13px;color:var(--color-ink);rotate:3deg;box-shadow:0 6px 14px rgb(25 23 20 / .18)}
.dx-search{flex:1;max-width:190px;margin-left:auto;padding:4px 10px;border:1px solid #E6E0D4;border-radius:999px;color:var(--color-ink-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.dx-acct{font-weight:600;color:var(--color-ink-2)}
.dx-cart{padding:3px 9px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-weight:600}
.dx-cart b{display:inline-block;min-width:15px;margin-left:3px;padding:0 4px;border-radius:999px;background:var(--color-accent);text-align:center;font-size:10px;transition:transform .3s}
.dx-light:hover .dx-cart b{transform:scale(1.25)}
.dx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px}
.dx-prod{position:relative;display:flex;flex-direction:column;padding:8px;border:1px solid #EFE9DE;border-radius:9px;font-size:11px;white-space:nowrap}
.dx-img{display:grid;place-items:center;height:40px;margin-bottom:7px;border-radius:6px;background:#F4EFE6}
.dx-img.t2{background:#EEF0E8}
.dx-img.t3{background:#F3E9E2}
.dx-img i{width:26px;height:22px;border:1.5px solid #B9AE9B;border-radius:3px;background:linear-gradient(#B9AE9B,#B9AE9B) center 6px/100% 1.5px no-repeat}
.dx-prod b{font-weight:700}
.dx-prod small{color:var(--color-ink-3);font-size:9.5px}
.dx-price{margin-top:6px;font-size:12px;font-weight:700;color:var(--color-ink)}
.dx-price small{display:block;font-weight:600;color:var(--color-ok)}
.dx-add{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);font-weight:700;transition:background .25s}
.dx-light:hover .dx-prod:first-child .dx-add{background:var(--color-accent)}
/* software op maat: een planningsscherm */
.dx-tabs{display:flex;gap:4px;margin-left:auto}
.dx-tabs em{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--color-ink-3)}
.dx-tabs em.on{background:var(--color-ink);color:var(--color-paper)}
.dx-av{width:20px;height:20px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-dark);display:grid;place-items:center;font-size:10px;font-weight:700}
.dx-plan{position:relative;display:grid;grid-template-columns:52px 1fr;gap:9px 10px;padding-top:32px;font-size:10.5px;font-weight:600;color:var(--color-ink-2)}
.dx-plan .tr{position:relative;height:18px;border-radius:5px;background:#F6F2EA}
.dx-plan .tr i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--color-ink);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.dx-plan .tr i.a{background:var(--color-accent)}
.dx-plan .tr i.o{background:var(--color-ok)}
.dx-plan .tr i.l{background:#CFC6B5}
.dx-plan .now{position:absolute;top:14px;bottom:-4px;left:calc(62px + 46%);width:2px;background:var(--color-accent);border-radius:2px}
.dx-plan .now::before{content:"vandaag";position:absolute;top:-8px;left:6px;line-height:1;font-family:var(--font-hand);font-size:13px;font-weight:400;color:var(--color-accent);white-space:nowrap}
.dx:hover .dx-plan .tr i.mv,.dx:focus-visible .dx-plan .tr i.mv{translate:18% 0}
@media (max-width:1023px){
.dx{min-height:480px}
.dx h3{font-size:clamp(26px,3.6vw,34px)}
}
@media (max-width:699px){
.ww-doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.dx{min-height:0}
.dx-app{height:230px;margin-top:28px}
.dx-btn{padding:12px 18px;font-size:14px}
.dx-links,.dx-search{display:none}
.dx-acct{margin-left:auto}
.dx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-grid .dx-prod:nth-child(3){display:none}
.dx-hero{grid-template-columns:1fr}
.dx-vid{display:none}
.dx-edit{top:46px;right:14px}
.dx-img{height:26px;margin-bottom:6px}
.dx-img i{width:20px;height:16px}
.dx-tabs em:not(.on){display:none}
}
@media (prefers-reduced-motion:reduce){
.dx,.dx-app,.dx-plan .tr i{transition:none}
}
/* herkenning en oplossing: klacht links of rechts, het beeld schuift van "nu" naar "met code-on" */
.po{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:64px}
.po-row{display:grid;gap:28px;align-items:center}
.po-vis{position:relative;background:var(--color-paper);border-radius:var(--radius-card);padding:64px 24px 36px;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:14px}
.po-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgb(255 255 255 / .55),transparent 65%);opacity:0;transition:opacity .6s}
.po-row.is-after .po-vis::before{opacity:1}
.po-switch{position:absolute;top:16px;left:50%;translate:-50% 0;z-index:2;display:flex;padding:3px;border-radius:99px;background:var(--color-paper-2);font-size:12.5px;font-weight:700}
.po-switch button{padding:6px 14px;border-radius:99px;color:var(--color-ink-2);cursor:pointer;transition:background .25s,color .25s}
.po-switch button[aria-pressed="true"]{background:var(--color-ink);color:#fff}
.po-switch button[data-po-set="1"][aria-pressed="true"]{background:var(--color-accent-strong)}
.po-switch button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.po-stage{display:grid;width:100%;max-width:380px;place-items:center}
.po-stage > div{grid-area:1/1;width:100%;display:flex;justify-content:center;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1),filter .45s}
.po-after{opacity:0;transform:translateY(18px) scale(.97);pointer-events:none}
.po-row.is-after .po-before{opacity:0;transform:translateY(-10px) scale(.94) rotate(-2deg);filter:blur(2px)}
.po-row.is-after .po-after{opacity:1;transform:none;transition-delay:.15s}
.po-before .o-mail,.po-before .o-load,.po-before .o-fr,.po-before .o-404{rotate:-1.5deg;scale:1.2}
.po-txt h3{margin-top:10px;font-size:clamp(24px,2.2vw,32px);line-height:1.15;text-wrap:balance}
.po-pain{font-family:var(--font-hand);font-size:22px;line-height:1.25;color:var(--color-ink-2)}
.po-pain s{text-decoration:none;background:linear-gradient(var(--color-accent),var(--color-accent)) no-repeat 0 58%/0% 2px;transition:background-size .7s .35s cubic-bezier(.2,.8,.2,1)}
.po-row.is-after .po-pain s{background-size:100% 2px}
.po-p{margin-top:12px;max-width:48ch;color:var(--color-ink-2);font-size:17px;line-height:1.55}
.po-li{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--color-ink-2)}
.po-li li{display:flex;gap:10px}
.po-li li::before{content:"✓";color:var(--color-accent);font-weight:700}
.po-cta{margin-top:72px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-card);padding:28px}
.po-cta p{max-width:60ch;color:#CFC7B8;font-size:17px;line-height:1.55}
.po-cta b{color:var(--color-paper);font-family:var(--font-serif);font-size:21px;font-weight:600;display:block;margin-bottom:4px}
.po-cta .btn-primary{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:#fff;flex:none}
/* gsm en tablet: eerst de klacht en de kop, dan het beeld; zo weet je waarover de schakelaar gaat.
   Het vak volgt de hoogte van het beeld, zonder lege ruimte eronder. */
@media (max-width:1023px){
.po-txt{order:-1}
.po-row{gap:20px}
.po-vis{min-height:0;padding:60px 16px 28px}
}
@media (min-width:768px){
.po{gap:64px;margin-top:48px}
.po-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:32px 40px}
}
@media (min-width:1024px){
.po-row{grid-template-columns:1fr 1fr;gap:64px}
.po-row:nth-child(even) .po-vis{order:2}
.po-vis{min-height:340px}
}
/* de vier "na"-beelden: kleine animaties zodra ze verschijnen */
.zz-pub-row em.go{display:grid}
.zz-pub-row em.go > span{grid-area:1/1;transition:opacity .3s}
.zz-pub-row em.go .b{opacity:0}
.po-row.is-after .zz-pub-row em.go{animation:po-live 0s 1.5s forwards}
.po-row.is-after .zz-pub-row em.go .a{transition-delay:1.4s;opacity:0}
.po-row.is-after .zz-pub-row em.go .b{transition-delay:1.5s;opacity:1}
@keyframes po-live{to{background:var(--color-ok)}}
.po-after .zz-urls > div,.po-after .zz-out > div{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.po-row.is-after .zz-urls > div,.po-row.is-after .zz-out > div{opacity:1;transform:none}
.po-row.is-after .zz-urls > div:nth-child(1),.po-row.is-after .zz-out > div:nth-child(1){transition-delay:.45s}
.po-row.is-after .zz-urls > div:nth-child(2),.po-row.is-after .zz-out > div:nth-child(2){transition-delay:.6s}
.po-row.is-after .zz-urls > div:nth-child(3),.po-row.is-after .zz-out > div:nth-child(3){transition-delay:.75s}
.po-row.is-after .zz-urls > div:nth-child(4){transition-delay:.9s}
.po-after .zz-redir .new{opacity:0;transform:translateY(-10px);transition:opacity .4s .9s,transform .5s .9s}
.po-row.is-after .zz-redir .new{opacity:1;transform:none}
.zz-redir .old span{text-decoration-color:transparent;transition:text-decoration-color .3s .5s}
.po-row.is-after .zz-redir .old span{text-decoration-color:var(--color-accent)}
.o-404{width:100%;max-width:280px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);overflow:hidden}
.o-404 .bar{height:24px;background:#F1EEE8;display:flex;align-items:center;gap:4px;padding:0 8px}
.o-404 .bar i{width:6px;height:6px;border-radius:50%;background:#DAD3C6}
.o-404 .bar span{margin-left:6px;font-size:10.5px;color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-404 .body{padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:2px}
.o-404 .body b{font-family:var(--font-serif);font-size:44px;line-height:1;color:var(--color-rule)}
.o-404 .body span{font-size:12px;color:var(--color-ink-3)}
@media (prefers-reduced-motion: reduce){
.po-pain s{transition:none}
}
/* herkenning: voorwerpen uit het dagelijks werk met een site */
.o-mail{width:100%;max-width:230px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-size:11.5px;padding:11px 13px;line-height:1.4}
.o-mail .from{color:var(--color-ink-3)}
.o-mail .subj{font-weight:700;margin:3px 0 5px}
.o-mail .tag{display:inline-block;margin-top:6px;font-size:10px;font-weight:700;padding:1px 7px;border-radius:9px;background:var(--color-warn-soft);color:var(--color-warn)}
.o-load{width:100%;max-width:220px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);overflow:hidden;font-size:10.5px}
.o-load .b{height:20px;background:#F1EEE8;display:flex;align-items:center;gap:4px;padding:0 8px}
.o-load .b i{width:6px;height:6px;border-radius:50%;background:#DAD3C6}
.o-load .prog{height:3px;background:#EEE}
.o-load .prog i{display:block;height:100%;width:68%;background:var(--color-accent);animation:stuck 3.5s ease-out infinite}
@keyframes stuck{0%{width:5%}60%,100%{width:68%}}
.o-load .sk{padding:10px}
.o-load .sk i{display:block;height:8px;border-radius:4px;background:#EEE9E0;margin-bottom:6px}
.o-load .sk .img{height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--color-ink-3)}
.o-load .spin{width:16px;height:16px;border-radius:50%;border:2px solid #D9D1C2;border-top-color:var(--color-ink-3);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.o-fr{width:100%;max-width:220px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);padding:11px 13px;font-size:11px;line-height:1.4}
.o-fr .langs{display:flex;gap:4px;margin-bottom:8px}
.o-fr .langs span{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;background:#F1EEE8;color:var(--color-ink-3)}
.o-fr .langs span.on{background:var(--color-ink);color:#fff}
.o-fr .msg{background:var(--color-paper);border-left:3px solid var(--color-accent);padding:6px 8px;font-style:italic}
/* lokaal */
.map{width:100%;height:auto}
.map .river{fill:none;stroke:#5B7C8F;stroke-width:3}
.map .road{fill:none;stroke:#3A362F;stroke-width:1.5}
.map .town circle{fill:#6B645A}
.map .town text{fill:#B9B1A2;font-size:13px;font-family:var(--font-sans)}
.map .home circle{fill:var(--color-accent)}
.map .home text{fill:var(--color-paper);font-weight:700;font-size:16px;font-family:var(--font-sans)}
.map .route{fill:none;stroke:var(--color-accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease .3s}
.map.in .route{stroke-dashoffset:0}
.map .dest{opacity:0;transition:opacity .4s 2s}
.map.in .dest{opacity:1}
.map .dest text{font-family:var(--font-hand);fill:var(--color-postit);font-size:19px}
[role=tabpanel].hidden{display:none}
[role=tab]{scroll-margin-top:7rem}
.wl-status.off{visibility:hidden}
@media (max-width:560px){
.wl-hero-btns > a{width:100%;justify-content:center}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.wl-mock-in{font-size:max(10px,2.05cqw)}
}
/* 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:4px;margin-bottom:-8px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:4px;margin-bottom:-8px}
}
@media (min-width:1024px){
.svc-hero{margin-top:12px;margin-bottom:-16px}
}
/* 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: de regels onder de deuren komen uit rich text */
.ww-also-rt{color:var(--color-ink-2)}
.ww-also-rt p + p{margin-top:.5rem;font-size:14px;color:var(--color-ink-3)}
.ww-also-rt a{padding-block:3px}