/* Gedeeld door de homepage en de cases: projectbanden, demo's, contact en voet. */
.vet{display:inline-grid;text-decoration:none;font-weight:500;transition:font-weight .24s var(--glij)}.vet::after{content:attr(data-tekst);font-weight:800;height:0;visibility:hidden;overflow:hidden}.vet>span,.vet::after{grid-area:1/1}.bubbelknop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:16px;line-height:24px;background:var(--tekst);color:var(--vlak);border-radius:24px 24px 24px 4px;transition:border-radius .32s var(--veer),transform .16s var(--glij),background-color .4s,color .4s}.bubbelknop:active{transform:scale(.96)}.band{padding-block:64px;color:var(--inkt)}.band .wrap{display:grid;gap:40px;align-items:center}.band h2{font-size:32px;line-height:36px;font-weight:800;letter-spacing:-.03em;max-width:12em;text-wrap:balance}.band .zin{margin-top:16px;font-size:18px;line-height:28px;font-weight:500;max-width:28em}.band .bubbelknop{margin-top:24px;background:var(--inkt);color:var(--bot)}.band.lucht{background:var(--lucht)}.band.abrikoos{background:var(--abrikoos)}.band.blauw{background:var(--blauw)}.band.inkt{background:var(--diep);color:var(--bot);transition:background-color .4s}.band.inkt .bubbelknop{background:var(--lucht);color:var(--inkt)}@media (min-width:960px){.band{padding-block:112px}.band .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px}.band h2{font-size:48px;line-height:52px}.band .zin{font-size:20px;line-height:32px}}.schakel{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none;gap:2px;padding:4px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(1,35,51,.14);border-radius:24px 24px 24px 4px}.schakel::-webkit-scrollbar{display:none}.schakel button{flex:none;border:0;cursor:pointer;min-height:40px;padding:0 16px;border-radius:20px 20px 20px 4px;background:transparent;color:var(--inkt);font-weight:600;font-size:15px;transition:background-color .24s var(--glij),color .24s var(--glij),box-shadow .24s var(--glij),border-radius .32s var(--veer)}.schakel button[aria-pressed="true"]{background:var(--wit);color:var(--inkt);box-shadow:0 1px 3px rgba(1,35,51,.2)}.schakel.te-breed{margin-right:calc(-1 * var(--kantlijn));max-width:calc(100% + var(--kantlijn));border-radius:24px 0 0 4px}.band.inkt .schakel{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.band.inkt .schakel button{color:var(--bot)}.band.inkt .schakel button[aria-pressed="true"]{background:var(--wit);color:var(--inkt)}.menudemo{display:grid;justify-items:center;gap:24px}.paneel{--w:280px;position:relative;width:var(--w);height:456px;background:var(--inkt);color:#C9D6DD;border-radius:calc(var(--w) / 2) calc(var(--w) / 8) calc(var(--w) / 8) calc(var(--w) / 8);padding:104px 16px 24px}.paneel .platform{position:absolute;left:44px;top:44px;font-weight:700;font-size:18px;color:var(--wit);letter-spacing:.01em}.paneel .platform::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:6px 6px 6px 2px;background:#5BC26A;vertical-align:-1px}.paneel ul{display:flex;flex-direction:column;position:relative;height:100%}.paneel li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;line-height:24px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);transition:padding .32s var(--glij),border-color .32s,background-color .32s,border-radius .32s,color .32s}.paneel li .pijl{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}.paneel[data-staat="nieuw"] li{border-bottom-color:transparent;padding:8px 12px;border-radius:8px;color:#E3EEF3}.paneel[data-staat="nieuw"] li:first-child{background:rgba(255,255,255,.08)}.paneel li[hidden]{display:none}.paneel[data-staat="nieuw"] li.onder{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);border-radius:0;background:none}.spook{position:absolute;pointer-events:none;margin:0}.knopdemo{display:grid;justify-items:center;gap:24px}.knopvlak{position:relative;width:min(100%,560px);background:var(--wit);border-radius:24px 24px 24px 144px;padding:24px 24px 136px;display:grid;grid-template-rows:minmax(0,1fr)}@media (min-width:520px){.knopvlak{aspect-ratio:1;border-radius:32px 32px 32px 50%;padding:40px}}@media (max-width:519px){.knoppen:not(.een) .kn{font-size:min(var(--k-fs),13px);padding:6px 10px}}.knoppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;justify-items:center;align-items:center}@media (min-width:520px){.knoppen{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}}.kn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:var(--k-bg);color:var(--k-fg);border-radius:var(--k-r);padding:var(--k-p);font-size:var(--k-fs);font-weight:var(--k-fw);text-transform:var(--k-tt);letter-spacing:var(--k-ls);border:var(--k-b);box-shadow:var(--k-sh);line-height:1.2;transition:background-color .4s var(--glij),color .4s,border-radius .4s var(--glij),padding .4s var(--glij),font-size .4s,letter-spacing .4s,box-shadow .4s,border-color .4s}.knoppen.een .kn{grid-area:1/1;grid-column:1/-1;grid-row:1}.knoppen.een .kn:first-child{background:#2E7D32;color:#fff;border-radius:8px;padding:20px 44px;font-size:26px;font-weight:600;text-transform:none;letter-spacing:0;border:1px solid transparent;box-shadow:none}.knoppen.een .kn:not(:first-child){opacity:0}.knoppen.een{grid-template-columns:1fr;align-content:center;height:100%;padding-bottom:64px}.knopvlak .bubbelknop{position:absolute;right:24px;bottom:24px;margin:0}@media (min-width:520px){.knopvlak .bubbelknop{right:40px;bottom:40px}}.knopvlak .noot{position:absolute;right:24px;bottom:80px;font-size:14px;line-height:20px;font-weight:600;color:var(--grafiet);text-align:right;max-width:14em}@media (min-width:520px){.knopvlak .noot{right:40px;bottom:96px}}.bouwdemo{display:grid;gap:24px;align-items:start;justify-items:center}@media (min-width:600px){.bouwdemo{grid-template-columns:auto 1fr;justify-items:start}}.pagina{--w:240px;position:relative;width:var(--w);min-height:480px;background:var(--wit);border-radius:calc(var(--w) / 2) calc(var(--w) / 8) calc(var(--w) / 8) calc(var(--w) / 8);padding:96px 16px 24px;display:flex;flex-direction:column;gap:8px}.pagina .leeg{display:none;font-size:15px;line-height:24px;color:var(--grafiet);padding:16px 8px;text-align:center;border:2px dashed #C7D6DE;border-radius:12px 12px 12px 4px}.pagina:not(:has(.blok)) .leeg{display:block}.tafel{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;max-width:440px;min-height:120px}.blok{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:208px;flex:none}.blok .vel{display:flex;align-items:center;gap:12px;height:56px;padding:8px 12px;background:var(--wit);border:1px solid rgba(1,35,51,.16);border-radius:4px;color:var(--inkt);font-size:15px;font-weight:600;transform:rotate(var(--draai,0deg));transition:transform .48s var(--veer),border-color .2s}.pagina .blok .vel{--draai:0deg;border-color:#DCE6EC}.blok:focus-visible{outline:none}.blok:focus-visible .vel{outline:2px solid var(--inkt);outline-offset:4px}.blok svg{flex:none;width:56px;height:36px}@media (min-width:600px){.pagina .blok{width:100%}}.sessie{width:96px;height:96px;border-radius:48px 48px 48px 12px;overflow:hidden;margin-bottom:24px}.sessie img{width:100%;height:100%;object-fit:cover}@media (max-width:599px){.bouwdemo{grid-template-columns:168px minmax(0,1fr);gap:12px;justify-items:stretch}.pagina{--w:168px;min-height:440px;padding:88px 12px 16px}.pagina .leeg{font-size:13px;line-height:20px;padding:12px 4px}.tafel{flex-direction:column;flex-wrap:nowrap;gap:8px;min-height:0}.blok{width:100%}.blok .vel{height:56px;gap:8px;padding:8px;font-size:13px;line-height:16px}.blok svg{width:36px;height:24px}.pagina .blok{width:100%}}.winkeldemo{display:grid;gap:24px;justify-items:start}.etalage{position:relative;width:100%;aspect-ratio:16/10;background:var(--bot);overflow:hidden;border-radius:64px 64px 64px 16px}.etalage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .56s var(--glij),opacity .4s}.etalage.breed{aspect-ratio:16/9;width:calc(100% - 16px);margin:8px;border-radius:12px 12px 12px 4px;box-shadow:0 0 0 8px var(--wit)}@media (min-width:960px){.etalage.breed{width:calc(100% - 24px);margin:12px;border-radius:16px 16px 16px 4px;box-shadow:0 0 0 12px var(--wit)}}.etalage img[data-pos="voor"]{transform:translateX(0);opacity:1}.etalage img[data-pos="links"]{transform:translateX(-24%);opacity:0}.etalage img[data-pos="rechts"]{transform:translateX(24%);opacity:0}.contact{padding-block:80px 96px}.contact .mail{display:inline-grid;margin-top:24px;font-size:clamp(28px,7vw,72px);line-height:1.1;letter-spacing:-.03em;text-decoration:none;font-weight:600;transition:font-weight .32s var(--glij)}.contact .mail::after{content:attr(data-tekst);font-weight:900;height:0;visibility:hidden;overflow:hidden}.contact .mail>span,.contact .mail::after{grid-area:1/1}.contact .acties{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}.kopieer .gelukt{display:none}.kopieer.gedaan .gelukt{display:inline}.kopieer.gedaan .doe{display:none}.kopieer svg{width:16px;height:16px;display:none}.kopieer.gedaan svg{display:block;animation:vink .4s var(--veer)}@keyframes vink{from{transform:scale(0) rotate(-30deg)}to{transform:none}}@media (min-width:960px){.contact h2{font-size:48px;line-height:52px}.contact{padding-block:96px 128px}}.voet{padding-block:12px 28px;color:var(--zacht);font-size:16px;line-height:24px;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;border-top:1px solid var(--lijn)}@media (max-width:479px){.voet>span{flex-basis:100%;padding-block:12px}}.voet a{text-decoration-color:var(--blauw);display:inline-flex;align-items:center;min-height:48px}.acties .vet{min-height:48px;align-content:center}.contact h2{font-size:32px;line-height:36px;font-weight:800;letter-spacing:-.03em}@media (min-width:960px){.contact h2{font-size:48px;line-height:52px}}@media (hover:hover){.vet:hover{font-weight:800}.bubbelknop:hover{border-radius:24px 24px 4px 24px}.schakel button:hover{border-radius:20px 20px 4px 20px}.schakel button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.5)}.band.inkt .schakel button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.14)}.tafel .blok:hover .vel{transform:rotate(0deg) translateY(-4px)}.pagina .blok:hover .vel{border-color:var(--inkt)}.contact .mail:hover{font-weight:900}}.vet:focus-visible{font-weight:800}.contact .mail:focus-visible{font-weight:900}.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Links naar live sites: tekstlink onder het beeld, opent in een nieuw tabblad. */
.uitlink{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:700;font-size:16px;color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
/* De stemming van de storefront, als balk. */
.stem{display:flex;margin-top:24px;max-width:28em;height:48px;font-size:15px;font-weight:700}
.stem span{display:flex;align-items:center;gap:6px;padding-inline:16px;white-space:nowrap}
.stem .a{flex:0 0 68%;background:var(--abrikoos);color:var(--inkt);border-radius:24px 0 0 4px}
.stem .a b{font-weight:900}
.stem .rest{flex:1;background:rgba(255,255,255,.14);border-radius:0 24px 24px 0;font-weight:500}
/* Papierdemo: op de pagina wordt een blok zijn eigen stuk homepage, en na vijf blokken is hij af. */
.pagina .blok .vel{height:auto;flex-direction:column;align-items:stretch;gap:4px;padding:8px}
.pagina .blok svg{width:100%;height:auto}
.pagina .blok .vel>span{font-size:12px;line-height:16px;color:var(--grafiet);font-weight:600}
/* Vergroten: elke screenshot kan op ware grootte. */
.etalage,figure .ph{position:relative}
.etalage img,figure .ph img{cursor:zoom-in}
.vergroot{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;cursor:pointer;
  background:var(--inkt);color:var(--bot);border-radius:22px 22px 22px 4px;opacity:.88;transition:opacity .2s,border-radius .32s var(--veer)}
.vergroot:hover{opacity:1;border-radius:22px 22px 4px 22px}
.groot{width:min(1400px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);padding:64px 0 0;border:0;border-radius:16px 16px 16px 4px;background:var(--wit);overflow:auto}
.groot::backdrop{background:rgba(1,35,51,.82)}
.groot img{display:block;width:100%;height:auto}
.groot .sluit{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;cursor:pointer;
  background:var(--inkt);color:var(--bot);border-radius:24px 24px 24px 4px}
/* Schakelaar die buiten beeld loopt: vervagen tot je het einde bereikt. */
.schakel.te-breed:not(.eind){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
/* Telefoon: de kopbalk wijkt bij naar beneden scrollen. */
@media (max-width:719px){header#hdr{transition:transform .32s var(--glij),border-color .3s,background-color .4s}header#hdr.weg{transform:translateY(-100%)}}
/* Geen losse woorden aan het eind van een alinea. */
.zin,.prose p,figcaption{text-wrap:pretty}
/* Donkere modus: de lichte banden een tikje zachter. */
html[data-theme=dark]{--lucht:#74BDE4;--abrikoos:#EDBA72}
.contact .zin{margin-top:16px;max-width:30em;font-size:20px;line-height:32px;font-weight:500;color:var(--zacht)}
/* Papierdemo: de slotzin staat direct onder het laatste blok, in de pagina zelf. */
.pagina .af{display:none;order:99;margin-top:8px;padding:12px 8px;font-size:15px;line-height:22px;font-weight:700;color:var(--inkt);text-align:center}
.pagina:has(.blok~.blok~.blok~.blok~.blok) .af{display:block}
/* Menudemo: de pijltjes zijn een aanduiding, geen knop. */
.paneel li .pijl{opacity:.32}
/* Bricks-demo: de knoppen blijven boven de noot en uit de ronde hoek. */
@media (min-width:520px){.knoppen:not(.een){padding-bottom:72px;padding-left:24px}}
/* Papierdemo: compacte blokken en een vaste hoogte, zodat de band niet verspringt. */
.pagina{min-height:680px}
.pagina .blok svg{width:72%;margin-inline:auto}
.pagina .blok .vel>span{display:none}
@media (max-width:599px){.pagina{min-height:572px}}
/* Papierdemo: een geplaatst blok laat zien dat je het terug kunt leggen. */
.pagina .blok .vel{position:relative}
.pagina .blok .vel::after{content:"×";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:10px 10px 10px 3px;background:var(--inkt);color:var(--wit);font-size:15px;line-height:20px;text-align:center;opacity:.45;transition:opacity .2s}
@media (hover:hover){.pagina .blok:hover .vel::after{opacity:1}}
.pagina .blok:focus-visible .vel::after{opacity:1}
/* Op een donkere band geen fel wit vlak terwijl een screenshot laadt. */
.band.inkt .etalage{background:rgba(255,255,255,.08)}
/* Ook korte menulinks (CV) hebben een raakvlak van minstens 24px breed. */
header#hdr nav a{min-width:32px;justify-content:center}
/* Papierdemo: slepen. Op touch scrollt verticaal vegen gewoon de pagina; zijwaarts slepen pakt een blok op. */
.blok{cursor:grab;touch-action:pan-y}
.blok.opgepakt .vel{opacity:.3}
.blok.sleep{position:fixed;left:0;top:0;z-index:90;pointer-events:none;cursor:grabbing}
.blok.sleep .vel{transform:none;border-color:var(--inkt);box-shadow:0 14px 28px rgba(1,35,51,.24)}
.pagina.doel,.tafel.doel{outline:3px dashed var(--inkt);outline-offset:8px}
.tafel.doel{border-radius:16px}
/* "Lees de case" brengt je ergens heen: de pijl schuift mee bij hover. */
.naarcase .pijl{display:inline-block;transition:transform .32s var(--veer)}
@media (hover:hover){.naarcase:hover .pijl{transform:translateX(4px)}}
/* Focusrand: altijd in contrast met de achtergrond, niet in de tekstkleur van de knop. */
.bubbelknop:focus-visible{outline:2px solid var(--tekst);outline-offset:4px}
.band .bubbelknop:focus-visible,.vergroot:focus-visible{outline-color:var(--inkt)}
.band.inkt .bubbelknop:focus-visible{outline-color:var(--bot)}
/* Alleen op mobiel loopt een te brede schakelaar door tot de schermrand; daarboven houdt hij zijn eigen vorm. */
@media (min-width:960px){.schakel.te-breed{margin-right:0;max-width:100%;border-radius:24px 24px 24px 4px}}
@media (min-width:960px) and (max-width:1199px){.schakel button{padding:0 12px;font-size:14px}}