/* ============================================================
   Principe: de pagina is een muur. Papier blijft papier in
   beide thema's — alleen de muur erachter verandert.
   ============================================================ */
html{scroll-padding-top:5rem}
:root{
  --wand:#DCD7CC;
  --wand-diep:#CCC6B9;
  --wand-donker:#17161B;
  --vel:#FCFBF7;
  --vel-inkt:#121216;
  --vel-stil:#5E584E;
  --op-wand:#121216;
  --op-wand-stil:#544E45;
  --op-donker:#F3F0E9;
  --op-donker-stil:#A49D93;
  --tape:#8CBF6B;
  --lijn:#BFB8AA;
  --diep:rgba(20,18,14,.34);

  --geel:#F2A81C;
  --rood:#D6342B;
  --rood-tekst:#98201A;
  --groen:#4FA13A;
  --blauw:#2B7FC2;

  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --tekst:'Archivo','Helvetica Neue',Arial,sans-serif;
  --hand:'Caveat','Bradley Hand',cursive;

  --goot:clamp(1.25rem,5vw,4.5rem);
  --stap:clamp(4rem,10vw,8rem);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --wand:#17161B;
    --wand-diep:#100F14;
    --wand-donker:#232128;
    --op-wand:#F3F0E9;
    --op-wand-stil:#A49D93;
    --rood-tekst:#F0665E;
    --lijn:#302E36;
    --diep:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --wand:#17161B;
  --wand-diep:#100F14;
  --wand-donker:#232128;
  --op-wand:#F3F0E9;
  --op-wand-stil:#A49D93;
  --rood-tekst:#F0665E;
  --lijn:#302E36;
  --diep:rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--wand);
  color:var(--op-wand);
  font-family:var(--tekst);
  font-size:clamp(1.05rem,.98rem + .32vw,1.18rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--geel);color:#121216}
:focus-visible{outline:3px solid var(--op-wand);outline-offset:4px;
  box-shadow:0 0 0 4px var(--geel)}

.overslaan{position:absolute;left:1rem;top:-6rem;z-index:90;background:var(--op-wand);
  color:var(--wand);padding:.8rem 1.3rem;text-decoration:none;font-weight:600;transition:top .15s}
.overslaan:focus{top:1rem}

.binnen{max-width:1240px;margin:0 auto;padding:0 var(--goot)}

/* ===== navigatie ===== */
.balk{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--wand) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.balk .binnen{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;
  padding-top:.8rem;padding-bottom:.8rem}
.balk .merk{font-family:var(--display);text-transform:uppercase;font-size:1.02rem;
  letter-spacing:.015em;margin-right:auto;text-decoration:none}
.balk nav{display:flex;flex-wrap:wrap;gap:.3rem 1.35rem}
.balk nav a{font-size:.92rem;font-weight:500;text-decoration:none;padding:.2rem 0;
  border-bottom:2px solid transparent;transition:border-color .15s}
.balk nav a:hover,.balk nav a:focus-visible{border-bottom-color:var(--rood)}
.balk .cta{font-weight:600;color:var(--rood-tekst)}

/* ===== typografie ===== */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(3.2rem,11.5vw,8.5rem)}
h2{font-size:clamp(2.3rem,6vw,4.6rem)}
.d-m{font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:.92}
h3{font-family:var(--tekst);font-weight:700;font-size:1.22rem;letter-spacing:-.012em;line-height:1.2}

.kicker{display:block;font-family:var(--display);font-size:clamp(.72rem,1.3vw,.84rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--rood-tekst);margin-bottom:1.3rem}
.lead{font-size:clamp(1.22rem,1rem + .95vw,1.6rem);line-height:1.38;font-weight:500;max-width:32ch}
.proza{max-width:58ch}
.proza p + p{margin-top:1.1em}
.stil{color:var(--op-wand-stil)}
.hand{font-family:var(--hand);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.5rem);
  color:var(--op-wand-stil);line-height:1.25}

/* ===== vel ===== */
.vel{background:var(--vel);padding:.6rem;box-shadow:0 16px 38px var(--diep);position:relative}
.vel picture{display:block}
.vel::before,.vel::after{content:"";position:absolute;width:4.2rem;height:1.35rem;
  background:var(--tape);opacity:.88;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.vel::before{top:-.65rem;left:8%;transform:rotate(-4deg)}
.vel::after{top:-.65rem;right:8%;transform:rotate(3deg)}
.vel--een::after{display:none}
.vel--een::before{left:50%;transform:translateX(-50%) rotate(-2.5deg)}

/* ===== hero ===== */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 var(--stap);position:relative;overflow:hidden}
.hero .binnen{position:relative;min-height:min(84vh,800px)}
.hero-woord{position:relative;z-index:4;pointer-events:none;padding-top:clamp(.5rem,3vw,2rem)}
.hero-woord h1 span{display:block}
.hero-woord h1 .b{margin-left:clamp(0rem,7vw,7rem)}
.hero-onder{position:relative;z-index:5;max-width:31rem;margin-top:clamp(1.5rem,3vw,2.2rem)}
.hero-onder .lead{margin-bottom:1.6rem}

.geplakt{position:absolute;z-index:2}
.g1{width:clamp(9rem,19vw,15rem);top:1%;right:1%;transform:rotate(4.5deg)}
.g2{width:clamp(8rem,17vw,13.5rem);top:30%;right:14%;transform:rotate(-3deg);z-index:3}
.g3{width:clamp(8.5rem,18vw,14rem);bottom:6%;right:3%;transform:rotate(2deg)}
.g4{width:clamp(7.5rem,15vw,12rem);bottom:0;right:26%;transform:rotate(-5deg);z-index:1}
.strip{display:none}

/* ===== blokken ===== */
.blok{padding:var(--stap) 0}
.blok--rand{border-top:2px solid var(--lijn)}
.blok--dof{background:var(--wand-diep)}
.strook{background:var(--wand-donker);color:var(--op-donker)}
.strook .kicker{color:var(--geel)}
.strook .stil,.strook .hand{color:var(--op-donker-stil)}
.strook .proza{color:var(--op-donker)}

.belofte .binnen{display:grid;align-items:start;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
.belofte h2{margin-bottom:1.8rem}

/* ===== veilig: vier waarborgen ===== */
.waarborgen{display:grid;gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(2.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.waarborg{border-top:4px solid var(--blauw);padding-top:1.2rem}
.waarborg:nth-child(2){border-top-color:var(--groen)}
.waarborg:nth-child(3){border-top-color:var(--geel)}
.waarborg:nth-child(4){border-top-color:var(--rood)}
.waarborg h3{margin-bottom:.5rem}
.waarborg p{color:var(--op-wand-stil);font-size:1rem}

/* ===== casus ===== */
.casus{display:grid;align-items:start;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;
  margin-top:clamp(2rem,4vw,3rem)}
.casus-wand{margin-top:clamp(2.2rem,4vw,3.2rem);transform:rotate(-.7deg)}
.casus-wand img{width:100%}
.casus-wand figcaption{margin-top:1.4rem;font-family:var(--hand);font-weight:600;
  font-size:1.22rem;color:var(--op-donker-stil);transform:rotate(.7deg)}
.casus-duo{display:grid;align-items:start;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(2.2rem,4vw,3rem)}
.casus-duo .vel:nth-child(1){transform:rotate(1.4deg)}
.casus-duo .vel:nth-child(2){transform:rotate(-1.2deg)}
.casus-duo .vel:nth-child(3){transform:rotate(.8deg)}

/* brede sfeerband */
.sfeer{position:relative;background:var(--wand-donker)}
.sfeer img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;object-position:center 45%}
.sfeer figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem var(--goot) 1.3rem;
  background:linear-gradient(to top,rgba(10,10,12,.9),transparent);
  color:#FCFBF7;font-family:var(--hand);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem)}
.sfeer figcaption span{display:block;max-width:1240px;margin:0 auto}
.cijfers{display:flex;flex-wrap:wrap;gap:1.6rem 2.8rem;margin-top:2.2rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.16)}
.cijfers div{display:flex;flex-direction:column}
.cijfers b{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:.9;color:var(--geel);font-variant-numeric:tabular-nums}
.cijfers span{font-size:.88rem;color:var(--op-donker-stil);margin-top:.5rem}
.programma{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.programma li{font-family:var(--hand);font-weight:700;font-size:1.22rem;
  padding:.3rem 1rem;border:2px solid rgba(255,255,255,.22)}

/* ===== diensten ===== */
.dienstkop{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:baseline;
  margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-bottom:.9rem;border-bottom:2px solid var(--lijn)}
.dienstkop h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:0;line-height:1}
.dienstkop .voor{font-family:var(--hand);font-weight:600;font-size:1.25rem;color:var(--op-wand-stil)}
.postits{display:grid;gap:clamp(1.5rem,3vw,2.2rem);margin-top:clamp(1.8rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.postit{padding:1.6rem 1.5rem 1.7rem;min-height:14rem;color:#17150F;
  display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 12px 26px var(--diep);transition:transform .2s ease}
.postit:nth-child(4n+1){background:#FFE15C;transform:rotate(-2deg)}
.postit:nth-child(4n+2){background:#AEE474;transform:rotate(1.3deg)}
.postit:nth-child(4n+3){background:#FFB166;transform:rotate(-.8deg)}
.postit:nth-child(4n+4){background:#93D6F5;transform:rotate(2.1deg)}
.postit:hover{transform:rotate(0) translateY(-6px)}
.postit h4{font-family:var(--hand);font-weight:700;font-size:1.95rem;line-height:1.02}
.postit p{font-size:.98rem;line-height:1.45}
.postit .vorm{margin-top:auto;font-family:var(--hand);font-weight:700;font-size:1.18rem;
  border-top:2px solid rgba(23,21,15,.3);padding-top:.6rem}
.postit .bron{font-size:.8rem;font-weight:600;letter-spacing:.04em;opacity:.72}

/* ===== wand ===== */
.wand{columns:3;column-gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:clamp(2.5rem,4vw,3.5rem)}
.plaat{break-inside:avoid;margin-bottom:clamp(1.8rem,3vw,2.6rem);width:100%;
  display:block;cursor:zoom-in;text-align:left;
  transition:transform .22s ease}
.plaat:nth-child(5n+1){transform:rotate(-1.3deg)}
.plaat:nth-child(5n+2){transform:rotate(.9deg)}
.plaat:nth-child(5n+3){transform:rotate(-.5deg)}
.plaat:nth-child(5n+4){transform:rotate(1.6deg)}
.plaat:nth-child(5n+5){transform:rotate(-1.8deg)}
.plaat:hover,.plaat:focus-visible{transform:rotate(0) translateY(-8px) scale(1.015)}
.plaat .vel{padding:.55rem .55rem .3rem}
.plaat:hover .vel,.plaat:focus-visible .vel{box-shadow:0 26px 52px var(--diep)}
.plaat figcaption{padding:.85rem .35rem .1rem;background:var(--vel);color:var(--vel-inkt)}
.plaat .titel{display:block;font-family:var(--hand);font-weight:700;font-size:1.42rem;line-height:1.04}
.plaat .bij{display:block;font-size:.87rem;color:var(--vel-stil);line-height:1.35;margin-top:.15rem}

.koffer{margin-top:clamp(2.5rem,4vw,3.5rem);padding:1.7rem 1.9rem;border:2px dashed var(--lijn)}
.koffer h3{font-family:var(--hand);font-weight:700;font-size:1.7rem;margin-bottom:1rem}
.koffer ul{display:flex;flex-wrap:wrap;gap:.65rem .75rem}
.koffer li{font-size:.93rem;padding:.32rem .9rem;border:1.5px solid var(--lijn);border-radius:999px}

/* ===== stappen ===== */
.stappen{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;gap:0}
.stap{display:grid;grid-template-columns:clamp(3.5rem,7vw,6rem) 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:2px solid var(--lijn)}
.stap:last-child{border-bottom:2px solid var(--lijn)}
.stapnr{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:.85;
  color:var(--rood-tekst);font-variant-numeric:tabular-nums}
.stap p{margin-top:.7rem;max-width:56ch;color:var(--op-wand-stil)}

/* ===== tarieven ===== */
.tarieven{display:grid;gap:0;margin-top:clamp(2.5rem,4vw,3.5rem);max-width:56rem}
.tarief{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:1.3rem 0;border-top:2px solid var(--lijn)}
.tarief:last-child{border-bottom:2px solid var(--lijn)}
.tarief h3{margin-bottom:.25rem}
.tarief p{color:var(--op-wand-stil);font-size:1rem;max-width:46ch}
.tarief .prijs{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.4rem);color:var(--op-wand-stil);white-space:nowrap}

/* ===== niet bellen ===== */
.nietbellen{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:clamp(2.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.nb{padding:1.4rem 1.5rem;border:2px solid rgba(255,255,255,.2)}
.nb h3{margin-bottom:.45rem}
.nb p{color:var(--op-donker-stil);font-size:1rem}

/* ===== team ===== */
.team .binnen{display:grid;gap:clamp(2.2rem,4.5vw,3.8rem);
  grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start}
.team-beeld{display:flex;flex-direction:column;gap:1.6rem}
.team .vel{transform:rotate(-2.2deg)}
.team-beeld .vel:nth-of-type(2){transform:rotate(1.6deg)}
.team-beeld .portret-bij{margin-top:0}
.portret-bij{margin-top:1.6rem;font-family:var(--hand);font-weight:600;font-size:1.2rem;
  color:var(--op-wand-stil);transform:rotate(-1deg);transform-origin:left}

/* ===== acties ===== */
.acties{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center}
.knop{display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.22rem);letter-spacing:.02em;
  padding:1.1rem 2.2rem;background:var(--rood);color:#FCFBF7;text-decoration:none;
  transition:transform .13s ease, background .13s ease}
.knop:not(:disabled):hover,.knop:not(:disabled):focus-visible{background:#B8251D;transform:translateY(-3px)}
.knop:disabled{background:var(--op-wand-stil);cursor:default;transform:none}
.bijknop{font-family:var(--hand);font-weight:600;font-size:1.25rem;color:var(--op-wand-stil)}
.strook .bijknop,.slot .bijknop{color:var(--op-donker-stil)}
.bijknop a{color:var(--op-donker);text-decoration-color:var(--geel);text-decoration-thickness:2px}

.slot .binnen{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:end}
.slot .lead{color:var(--op-donker-stil)}
.bellen{margin-top:1.2rem;font-family:var(--hand);font-weight:600;font-size:1.3rem;color:var(--op-donker-stil)}
.bellen a{color:var(--op-donker);text-decoration-color:var(--geel);text-decoration-thickness:2px;white-space:nowrap}

footer{background:var(--wand-donker);color:var(--op-donker-stil);padding:0 0 2.8rem;font-size:.92rem}
footer .binnen{display:grid;gap:1rem 2.5rem;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.14)}
footer a{color:var(--op-donker);text-decoration-color:var(--geel);text-decoration-thickness:2px}
footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:flex-start}
footer .adres{font-style:normal}
footer .familie{grid-column:1/-1;margin:1.4rem 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.09);font-size:.86rem}

.notitie{margin-top:2rem;padding:1rem 1.3rem;border:2px dashed var(--lijn);
  font-family:var(--hand);font-weight:600;font-size:1.18rem;color:var(--op-wand-stil)}
.strook .notitie,.slot .notitie{border-color:rgba(255,255,255,.22);color:var(--op-donker-stil)}

/* ===== loep ===== */
#loep{position:fixed;inset:0;background:rgba(10,9,12,.95);display:none;place-items:center;
  padding:1.6rem;z-index:70}
#loep[data-open]{display:grid}
#loep figure{display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-width:100%}
#loep img{max-width:100%;max-height:78vh;object-fit:contain;
  background:var(--vel);padding:.6rem;box-shadow:0 30px 70px rgba(0,0,0,.7)}
#loep figcaption{font-family:var(--hand);font-weight:700;font-size:1.4rem;color:#FCFBF7;text-align:center}
#loep .dicht{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--display);
  text-transform:uppercase;font-size:1rem;letter-spacing:.06em;
  background:var(--geel);color:#121216;padding:.75rem 1.4rem;cursor:pointer}

@media (max-width:1080px){ .wand{columns:2} }
@media (max-width:900px){
  .hero .binnen{min-height:0}
  .geplakt{display:none}
  .hero-onder{max-width:none}
  .strip{display:flex;gap:1.2rem;overflow-x:auto;padding:2.5rem 0 1rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .strip .vel{flex:0 0 min(62vw,16rem);scroll-snap-align:center}
  .strip .vel:nth-child(odd){transform:rotate(-2deg)}
  .strip .vel:nth-child(even){transform:rotate(1.6deg)}
  .belofte .binnen,.casus,.team .binnen,.slot .binnen{grid-template-columns:1fr}
  .slot .binnen{align-items:start}
  footer .binnen{grid-template-columns:1fr}
  .balk nav{display:none}
}
@media (max-width:620px){
  .wand{columns:1}
  .hero-woord h1 .b{margin-left:0}
  .tarief{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ landingspagina's ============ */
.lp-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,4rem)}
.lp-hero .binnen{display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.lp-hero h1{font-size:clamp(2.6rem,7.5vw,5.2rem)}
.lp-hero .lead{margin-top:1.5rem}
.lp-hero .acties{margin-top:2rem}
.lp-hero figure{transform:rotate(2deg)}

.kruimel{display:flex;gap:.5rem;align-items:center;font-size:.9rem;
  color:var(--op-wand-stil);margin-bottom:1.2rem}
.kruimel a{text-decoration-color:var(--rood);text-decoration-thickness:2px}

.situaties{display:grid;gap:clamp(1.5rem,3vw,2.4rem);margin-top:clamp(2.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.situatie{border-left:4px solid var(--rood);padding:.2rem 0 .2rem 1.3rem}
.situatie p{font-size:1.06rem;line-height:1.5}
.situatie:nth-child(2){border-left-color:var(--geel)}
.situatie:nth-child(3){border-left-color:var(--blauw)}

.dagdelen{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;gap:0;max-width:58rem}
.dagdeel{display:grid;grid-template-columns:clamp(5rem,11vw,9rem) 1fr;gap:clamp(1rem,2.5vw,2rem);
  align-items:start;padding:1.4rem 0;border-top:2px solid var(--lijn)}
.dagdeel:last-child{border-bottom:2px solid var(--lijn)}
.dagdeel .klok{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.92rem,1.6vw,1.1rem);color:var(--rood-tekst);line-height:1.15;padding-top:.15rem}
.dagdeel p{margin-top:.35rem;color:var(--op-wand-stil);max-width:52ch}

.oogst{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(2rem,3.5vw,2.8rem)}
.oogst li{font-size:.96rem;padding:.45rem 1.1rem;border:2px solid var(--lijn)}

.bewijs{display:grid;gap:clamp(1.6rem,3vw,2.4rem);margin-top:clamp(2.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bewijs .vel:nth-child(1){transform:rotate(-1.4deg)}
.bewijs .vel:nth-child(2){transform:rotate(1.1deg)}
.bewijs .vel:nth-child(3){transform:rotate(-.7deg)}
.bewijs figcaption{padding:.8rem .3rem 0;font-family:var(--hand);font-weight:700;
  font-size:1.3rem;color:var(--vel-inkt);background:var(--vel);line-height:1.1}

.prijskaart{margin-top:clamp(2rem,3.5vw,2.8rem);padding:1.8rem 2rem;
  border:2px solid var(--lijn);display:grid;gap:1rem 2rem;
  grid-template-columns:1fr auto;align-items:center;max-width:50rem}
.prijskaart h3{margin-bottom:.3rem}
.prijskaart p{color:var(--op-wand-stil);font-size:1rem;max-width:44ch}
.prijskaart .prijs{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);color:var(--op-wand);white-space:nowrap}

.verder{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(2rem,3.5vw,2.8rem)}
.verder a{font-size:.96rem;padding:.5rem 1.2rem;border:2px solid var(--lijn);
  text-decoration:none;transition:border-color .15s, background .15s}
.verder a:hover,.verder a:focus-visible{border-color:var(--rood)}

@media (max-width:900px){
  .lp-hero .binnen{grid-template-columns:1fr}
  .lp-hero figure{max-width:24rem}
}
@media (max-width:620px){
  .dagdeel{grid-template-columns:1fr;gap:.3rem}
  .prijskaart{grid-template-columns:1fr}
}

/* ============ gereedschapskist ============ */
.kist{display:grid;gap:0;margin-top:clamp(2.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:2px solid var(--lijn);border-left:2px solid var(--lijn)}
.lade{padding:1.5rem 1.6rem 1.7rem;border-right:2px solid var(--lijn);border-bottom:2px solid var(--lijn)}
.lade h3{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem}
.lade h3 .merkje{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rood-tekst)}
.lade ul{display:flex;flex-wrap:wrap;gap:.45rem}
.lade li{font-size:.92rem;padding:.25rem .75rem;background:var(--vel);color:var(--vel-inkt)}
.lade p{margin-top:.9rem;font-size:.95rem;color:var(--op-wand-stil)}

/* dienst-post-its als links */
a.postit{text-decoration:none;color:#17150F;display:flex}
a.postit .pijl{margin-top:auto;font-family:var(--display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.12em;padding-top:.6rem;
  border-top:2px solid rgba(23,21,15,.3)}
a.postit:hover .pijl,a.postit:focus-visible .pijl{text-decoration:underline;text-underline-offset:3px}

/* ============ contactformulier ============ */
.formulier{display:grid;gap:1.1rem;max-width:34rem}
.formulier .paar{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.formulier label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.formulier label .los{font-weight:400;color:var(--op-donker-stil)}
.formulier input,.formulier select,.formulier textarea{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;
  background:var(--vel);color:var(--vel-inkt);
  border:2px solid transparent;border-radius:0}
.formulier textarea{min-height:7.5rem;resize:vertical}
.formulier input:focus-visible,.formulier select:focus-visible,.formulier textarea:focus-visible{
  border-color:var(--geel)}
.formulier .val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier button{align-self:start;justify-self:start;cursor:pointer}
.formulier .melding{padding:.9rem 1.1rem;font-weight:500;font-size:.98rem;display:none}
.formulier .melding[data-toon]{display:block}
.formulier .melding.goed{background:var(--groen);color:#0C1408}
.formulier .melding.mis{background:var(--rood);color:#FCFBF7}
.formulier .kleine-letter{font-size:.86rem;color:var(--op-donker-stil);max-width:40ch}
.formulier .kleine-letter a{text-decoration-color:var(--geel);text-decoration-thickness:2px}
@media (max-width:560px){ .formulier .paar{grid-template-columns:1fr} }

/* ============ juridische documenten ============ */
.doc{max-width:46rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--goot) 5rem}
.doc h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:1.2rem}
.doc h2{font-family:var(--tekst);font-weight:700;text-transform:none;letter-spacing:-.015em;
  font-size:1.35rem;line-height:1.25;margin:2.6rem 0 .7rem}
.doc h2:first-of-type{margin-top:2rem}
.doc h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.doc p{margin-bottom:.9rem}
.doc ul{margin:0 0 .9rem;display:grid;gap:.45rem}
.doc ul li{padding-left:1.2rem;position:relative}
.doc ul li::before{content:"—";position:absolute;left:0;color:var(--rood-tekst)}
.doc .datum{font-family:var(--hand);font-weight:600;font-size:1.25rem;color:var(--op-wand-stil);
  margin-bottom:2rem}
.doc .invullen{background:var(--geel);color:#17150F;padding:.05em .4em;font-weight:600}
.doc dl{display:grid;gap:.5rem 1.5rem;grid-template-columns:auto 1fr;margin-bottom:1rem}
.doc dt{font-weight:700}
.doc dd{margin:0}
@media (max-width:520px){ .doc dl{grid-template-columns:1fr;gap:.1rem 0} .doc dd{margin-bottom:.6rem} }


/* ============ mobiel: opgelost na meting op 390px ============ */
@media (max-width:900px){
  /* menu was verborgen; nu een horizontaal schuivende rij */
  .balk nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:1.1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:.2rem calc(var(--goot) * -1) 0;padding-bottom:.2rem}
  .balk nav::-webkit-scrollbar{display:none}
  .balk nav a{white-space:nowrap;font-size:.88rem}
  .balk .binnen{padding-top:.6rem;padding-bottom:.6rem}
  .balk .merk{font-size:.95rem;margin-right:0;width:100%}

  /* koppen kregen te weinig regelruimte op smalle schermen */
  .display{line-height:.98}
  h1{font-size:clamp(2.8rem,13vw,4.6rem)}
  h2{font-size:clamp(2rem,8.5vw,3rem)}

  /* de platenstrip: gelijke hoogte, zodat hij niet rafelig oogt */
  .strip{gap:.9rem;padding:2rem 0 .6rem}
  .strip .vel{flex:0 0 auto;width:auto;padding:.4rem}
  .strip .vel img{height:13rem;width:auto;max-width:none}
  .strip .vel::before{width:3rem;height:1rem;top:-.5rem}
}
@media (max-width:620px){
  h1{font-size:clamp(2.6rem,12.5vw,4rem)}
  .lead{font-size:1.14rem}
  .hero{padding-top:1.6rem}
}