/* website-laten-maken-aalst: CSS van de secties op deze pagina (docs/prototype/website-laten-maken-aalst.html, inline <style>).
   De stappen en het kruimelpad staan in styles.css. Het prototype nam een deel van de CSS van website-laten-maken mee
   (o-*, mini, ltable, rj, tabs) dat op deze pagina niet gebruikt wordt; het staat er nog, gelijk met het prototype. */
/* ---------- website laten maken: paginaspecifiek ---------- */
.hand{font-family:var(--font-hand)}
/* hero: blijft staan terwijl de site in het venster van taal wisselt en herschikt */
.wl-track{position:relative;height:330vh}
/* vastgezette hero: zo hoog als de inhoud, met 48px onder het kruimelpad; geen volledig scherm met gecentreerde inhoud, want dat liet boven en onder de hero honderden pixels leeg (zelfde patroon als software-op-maat) */
.wl-sticky{position:sticky;top:40px;display:flex;align-items:center;padding:48px 0 40px}
.wl-phases{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){
.wl-phases{grid-template-columns:minmax(0,1fr);gap:2px}
}
.wl-phases li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:6px 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:18px;font-weight:600;color:inherit}
.wl-phases li i{font-style:normal;width:28px;height:28px;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-toast{position:absolute;right:1em;bottom:1em;background:var(--color-ok);color:#fff;font-weight:700;font-size:.9em;padding:.6em .9em;border-radius:.6em;opacity:0;transform:translateY(.6em);transition:opacity .35s,transform .35s;z-index:3}
.live .wl-toast{opacity:1;transform:none}
.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}
.wl-stage{position:relative;padding-top:42px}
/* herkenning: voorwerpen uit het dagelijks werk met een site */
.o-obj{height:150px;display:flex;align-items:center;justify-content:center}
.o-obj > *{animation:bob 6s ease-in-out infinite}
.pain-c:nth-child(2) .o-obj > *{animation-delay:-1.5s}
.pain-c:nth-child(3) .o-obj > *{animation-delay:-3s}
.pain-c:nth-child(4) .o-obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.6deg)}}
.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}
.o-postit{width:160px;min-height:120px;background:var(--color-postit);box-shadow:0 10px 20px rgb(25 23 20 / .15);padding:14px;font-family:var(--font-hand);font-size:17px;line-height:1.2;transform:rotate(-2deg)}
/* tabs: kleine schermen in het paneel */
.mini{background:#fff;border-radius:14px;box-shadow:0 30px 60px -24px rgb(25 23 20 / .28),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden;font-size:13px}
.mini-bar{height:32px;background:#F1EEE8;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11px;color:var(--color-ink-3)}
.mini-bar i{width:8px;height:8px;border-radius:50%;background:#DAD3C6}
.mini-bar span{margin-left:8px}
.addmenu{position:relative}
.addmenu .pop{position:absolute;right:14px;top:44px;width:170px;background:#fff;border:1px solid var(--color-rule);border-radius:10px;box-shadow:var(--shadow-soft);padding:6px;font-size:12px}
.addmenu .pop div{padding:6px 8px;border-radius:6px}
.addmenu .pop div.sel{background:var(--color-accent-soft);color:var(--color-accent-dark);font-weight:700}
.newblk{animation:newblk 4.5s ease-in-out infinite}
@keyframes newblk{0%,25%{opacity:0;transform:translateY(-6px)}35%,90%{opacity:1;transform:none}100%{opacity:0}}
.ltable{width:100%;border-collapse:collapse;font-size:12.5px}
.ltable th{font-size:11px;font-weight:700;color:var(--color-ink-3);text-align:center;padding:8px 6px;border-bottom:1px solid var(--color-rule)}
.ltable th:first-child{text-align:left}
.ltable td{padding:9px 6px;border-bottom:1px solid #F0EDE7;text-align:center}
.ltable td:first-child{text-align:left;font-weight:600}
.dot-ok{color:var(--color-ok);font-weight:800}
.links-svg text{font-family:var(--font-sans);font-size:12px;font-weight:600;fill:var(--color-ink)}
.links-svg .ln{fill:none;stroke:var(--color-rule);stroke-width:2}
.links-svg .flow{fill:none;stroke:var(--color-accent);stroke-width:2;stroke-dasharray:4 10;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
/* Robojob: één beheer, twee sites */
.rj{position:relative;background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:clamp(16px,3vw,32px)}
.rj-svg{display:block;width:100%;height:auto}
.rj-svg text{font-family:var(--font-sans)}
.rj-svg .wire{fill:none;stroke:var(--color-accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease}
.rj.in .rj-svg .wire{stroke-dashoffset:0}
.rj-svg .wire.b{transition-delay:.3s}
/* smalle schermen en minder beweging: geen vastgezette hero */
.static .wl-track{height:auto}
.static .wl-sticky{position:relative;top:auto;min-height:0;padding:56px 0 24px}
@media (prefers-reduced-motion:reduce){
.wl-track{height:auto}
.wl-sticky{position:relative;top:auto;min-height:0}
}
[role=tabpanel].hidden{display:none}
[role=tab]{scroll-margin-top:7rem}
.wl-status.off{visibility:hidden}
/* 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:-24px;margin-bottom:1px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-24px;margin-bottom:-23px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:24px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:0px;margin-bottom:-63px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:0px;margin-bottom:-43px}
}