/* ===========================================================
   Datalage, ontwerpvoorstel. Warm zwart, papier, oker en patina.
   =========================================================== */
:root{
  --zwart:      #161614;   /* de pagina */
  --kool:       #1F1F1C;   /* panelen op zwart */
  --diep:       #0E0E0D;   /* kaders, de donkerste laag */
  --papier:     #F3EFE6;   /* lichte panelen */
  --been:       #E8E2D6;   /* kaarten op papier */
  --tekst:      #ECE8DF;   /* lopende tekst op zwart, 13:1 */
  --zacht:      #B8B3A8;   /* bijtekst op zwart, 7.4:1 */
  --inkt:       #161614;   /* tekst op papier */
  --lees:       #3F3D38;   /* bijtekst op papier, 9:1 */
  --oker:       #FF6A3D;   /* Ivo: gevonden worden, verkopen. Ook de knop */
  --oker-diep:  #E2571F;
  --patina:     #3FD59A;   /* Maurits: bouwen, bewaken */
  --patina-diep:#0F6F53;
  --lijn:       rgba(243,239,230,.13);
  --lijn-sterk: rgba(243,239,230,.28);
  --lijn-licht: rgba(22,22,20,.14);

  --kop:  "Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --lop:  "Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --marge: clamp(18px,4.5vw,72px);
  --breed: 1280px;
  --hoek-groot: clamp(22px,3vw,36px);
  --hoek: 20px;
  --pil: 999px;
  --header: 78px;
}
@media (max-width:760px){ :root{ --header:66px } }

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; background:var(--zwart); -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--zwart); color:var(--tekst);
  font-family:var(--lop); font-size:21px; line-height:1.58;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
p{ margin:0 0 1.1em }
img{ max-width:100%; display:block }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--oker); outline-offset:3px }
h1,h2,h3,h4{ font-family:var(--kop); font-weight:300; letter-spacing:-.025em; line-height:1.04; margin:0; color:inherit }
h1,h2{ text-wrap:balance }
strong{ font-weight:600 }

.binnen{ padding-inline:var(--marge); max-width:var(--breed); margin-inline:auto }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }

/* Kicker: het bolletje en het label. Elke sectie begint ermee. */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zacht); margin:0 0 22px;
}
.licht .kicker{ color:var(--lees) }

.kop-groot{ font-size:clamp(34px,5vw,89px); letter-spacing:-.03em; max-width:19ch }
.kop-mid{ font-size:clamp(34px,3.8vw,55px); letter-spacing:-.028em; max-width:23ch }
.intro{ font-size:21px; line-height:1.58; max-width:36em; color:var(--zacht); margin:22px 0 0 }
.licht .intro{ color:var(--lees) }

/* ---------- knoppen ---------------------------------------- */
.knop, .knop-lijn, .knop-vonk{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--lop); font-size:21px; font-weight:600; line-height:1.2;
  padding:16px 26px; border-radius:var(--pil); border:1.5px solid transparent;
  cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s;
  min-height:48px;
}
.knop{ background:var(--oker); color:var(--inkt); border-color:var(--oker) }
.knop:hover{ background:#FF8259; border-color:#FF8259; transform:translateY(-1px) }
.knop-lijn{ background:transparent; color:var(--tekst); border-color:var(--lijn-sterk) }
.knop-lijn:hover{ border-color:var(--tekst) }
.licht .knop-lijn{ color:var(--inkt); border-color:rgba(22,22,20,.35) }
.licht .knop-lijn:hover{ border-color:var(--inkt) }
.pijl{ transition:transform .3s cubic-bezier(.2,.7,.3,1) }
.knop:hover .pijl, .knop-lijn:hover .pijl{ transform:translateX(4px) }

/* De vonkknop: een los vierkantje met een ster, en de pil ernaast. Eén vorm
   met twee delen, zoals de etalage ook een kader en een plank is. */
.knop-vonk{ padding:0; gap:4px; background:transparent; border:0 }
.knop-vonk .vonk{
  width:52px; height:52px; border-radius:16px 8px 8px 16px; background:var(--oker);
  display:grid; place-items:center; color:var(--inkt); flex:none; transition:transform .3s, border-radius .3s;
}
.knop-vonk .etiket{
  background:var(--oker); color:var(--inkt); padding:0 24px; height:52px; display:inline-flex; align-items:center;
  border-radius:8px 16px 16px 8px; transition:transform .3s;
}
.knop-vonk:hover .vonk{ transform:rotate(90deg) }
.knop-vonk:hover .etiket{ transform:translateX(3px) }
.acties{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:34px 0 0 }
.drempel{ font-size:13px; color:var(--zacht); margin:16px 0 0; max-width:40em }
.licht .drempel{ color:var(--lees) }

/* ---------- lopende band bovenaan -------------------------- */
.band{
  background:var(--diep); color:var(--zacht); font-family:var(--mono); font-size:13px;
  letter-spacing:.06em; overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--lijn);
}
.band .spoor{ display:inline-flex; gap:0; padding:11px 0; animation:schuif 55s linear infinite }
.band span{ padding:0 22px; display:inline-flex; align-items:center; gap:22px }
.band span::after{ content:""; width:1px; height:12px; background:var(--lijn-sterk) }
@keyframes schuif{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .band .spoor{ animation:none } }

/* ---------- navigatie -------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--header);
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding-inline:var(--marge);
  background:rgba(22,22,20,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.nav.vast{ border-bottom-color:var(--lijn) }
.nav .merk{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tekst); margin-right:auto; min-height:44px; padding:4px 0 }
.nav .merkteken{ width:34px; height:34px; flex:none }
.nav .merknaam{ font-family:var(--kop); font-weight:400; font-size:21px; letter-spacing:-.02em }
.nav .merknaam b{ font-weight:inherit; color:var(--oker) }
.nav .links{ display:flex; gap:clamp(12px,1.8vw,26px); list-style:none; margin:0; padding:0 }
.nav .links a{
  font-size:13px; font-weight:500; letter-spacing:.02em; text-decoration:none; color:var(--zacht);
  padding:12px 2px; display:inline-block; transition:color .25s;
}
.nav .links a:hover{ color:var(--tekst) }
.nav .nu{ font-size:13px; padding:12px 20px; min-height:44px }

/* Bellen vanaf een telefoon. Staat alleen op een klein scherm, want op een
   laptop is een telefoonnummer om te lezen en niet om aan te tikken. Het nummer
   staat in de voet en op /contact/, maar wie op een advertentie klikt en wil
   bellen, moet daar niet eerst naartoe hoeven zoeken. */
.nav .bel{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--lijn-sterk);
  color:var(--tekst); text-decoration:none; flex:none; transition:border-color .2s, color .2s;
}
.nav .bel svg{ width:19px; height:19px; display:block }
.nav .bel:hover{ border-color:var(--oker); color:var(--oker) }
@media (max-width:920px){ .nav .bel{ display:inline-flex } }
.nav .menu-knop{
  display:none; align-items:center; gap:8px; background:var(--kool); color:var(--tekst); border:1px solid var(--lijn-sterk);
  border-radius:var(--pil); padding:10px 16px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; min-height:44px;
}
@media (max-width:920px){
  .nav .links, .nav .nu{ display:none }
  .nav .menu-knop{ display:inline-flex }
}
.mobiel{
  position:fixed; inset:var(--header) 0 0 0; z-index:55; background:var(--zwart);
  padding:28px var(--marge) 24px; display:none; flex-direction:column; gap:6px;
}
.mobiel.open{ display:flex }
.mobiel a{ font-family:var(--kop); font-size:34px; font-weight:300; text-decoration:none; padding:10px 0; color:var(--tekst); border-bottom:1px solid var(--lijn) }
.mobiel .knop{ margin-top:auto; justify-content:center; font-size:21px }
body.dicht{ overflow:hidden }

/* ---------- panelen, het etalagemotief ------------------------ */
.paneel{
  border-radius:var(--hoek-groot); position:relative;
  padding:clamp(48px,7vw,104px) var(--marge);
}
.paneel.licht{ background:var(--papier); color:var(--inkt) }
.paneel.kool{ background:var(--kool) }
/* De plank onder de etalage: een korte streep onder elk paneel */
.paneel::after{
  content:""; position:absolute; left:var(--marge); bottom:-13px; width:72px; height:5px; border-radius:3px; background:var(--oker);
}
.paneel.licht::after{ background:var(--patina-diep) }
.paneel + .paneel, .paneel + section{ margin-top:34px }
.sectie{ padding-block:clamp(56px,8vw,112px) }
main > .paneel{ margin-inline:clamp(8px,1.2vw,18px) }

/* ---------- hero ----------------------------------------------- */
.hero{ padding-block:clamp(32px,4.4vw,64px) clamp(32px,4.4vw,64px) }
.hero .raster{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,80px); align-items:center }
.hero h1{ font-size:clamp(34px,5vw,55px); letter-spacing:-.04em; max-width:none; line-height:1 }
.hero .intro{ font-size:21px; max-width:24em }

/* De machine: vier stations in een kader, met een stroom ertussen. */
.machine{
  background:var(--diep); border:1px solid var(--lijn); border-radius:var(--hoek-groot);
  padding:clamp(22px,3vw,34px); position:relative; overflow:hidden;
}
.stations{ list-style:none; margin:0; padding:0; display:grid; gap:10px; position:relative }
.stations::before{ content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--lijn-sterk) }
.station{
  display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:center;
  background:var(--kool); border:1px solid var(--lijn); border-radius:18px; padding:14px 18px 14px 14px; position:relative;
}
.station .nr{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:var(--zwart); border:1px solid var(--lijn-sterk); font-family:var(--mono); font-size:13px; color:var(--tekst) }
.station h3{ font-family:var(--lop); font-weight:600; font-size:21px; letter-spacing:0; line-height:1.25 }
.station p{ margin:2px 0 0; font-size:13px; color:var(--zacht); line-height:1.4 }
.machine .prijsregel{ margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--zacht) }
.machine .prijsregel b{ color:var(--tekst); font-weight:600 }
@media (max-width:560px){ .station{ grid-template-columns:48px 1fr } .station .nr{ width:48px; height:48px } .stations::before{ left:23px } }

/* ---------- referentiestrook ----------------------------------- */
.referenties{ padding-block:clamp(24px,4vw,44px) clamp(40px,6vw,72px); border-top:1px solid var(--lijn) }
.referenties .aanhef{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--zacht); margin:0 0 22px; display:flex; flex-wrap:wrap; gap:10px 28px }
.strook{ overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.strook .spoor{ display:inline-flex; animation:schuif 70s linear infinite }
.strook .spoor:hover{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .strook .spoor{ animation:none } .strook{ white-space:normal; mask-image:none } .strook .spoor{ flex-wrap:wrap } .strook .spoor.dubbel{ display:none } }
.strook .naam{ display:inline-flex; flex-direction:column; gap:4px; padding:0 clamp(22px,3vw,44px); border-left:1px solid var(--lijn) }
.strook .naam b{ font-family:var(--kop); font-weight:400; font-size:21px; letter-spacing:-.02em; color:var(--tekst) }
.strook .naam span{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--zacht) }

/* ---------- verschil --------------------------------------------- */
.verschil{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:21px; margin-top:55px; align-items:start }
.verschil .kaart:first-child{ opacity:.72 }
.verschil .kaart:first-child h3{ font-size:21px }
.verschil .kaart:first-child li{ font-size:13px }
.verschil .kaart.donker{ border:1px solid var(--oker); box-shadow:0 21px 55px rgba(0,0,0,.35) }
@media (max-width:820px){ .verschil{ grid-template-columns:1fr } }
.kaart{
  border-radius:var(--hoek); padding:clamp(24px,3vw,36px); border:1px solid var(--lijn); background:var(--kool);
}
.licht .kaart{ background:var(--been); border-color:transparent }
.kaart{ color:inherit }
.licht .kaart:not(.donker), .kaart.papier{ color:var(--lees) }
.licht .kaart:not(.donker) h3, .kaart.papier h3{ color:var(--inkt) }
.licht .kaart.donker{ background:var(--zwart); color:var(--tekst) }
.licht .kaart.donker h3{ color:var(--tekst) }
.kaart h3{ font-size:clamp(21px,2.6vw,34px); margin:0 0 14px }
.kaart .sub{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 22px; color:var(--lees) }
.kaart.donker .sub{ color:var(--oker) }
.kaart ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.kaart li{ display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:21px; line-height:1.5 }
.kaart li::before{ content:"×"; font-family:var(--mono); color:var(--lees); font-size:21px; line-height:1.4 }
.kaart.donker li::before{ content:"✓"; color:var(--patina) }
@media (max-width:820px){ .verschil{ grid-template-columns:1fr } }

/* ---------- diensten, de drie kaarten met de pijl ---------------- */
.diensten{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:52px 0 0; border-radius:var(--hoek-groot); overflow:hidden; border:1px solid var(--lijn) }
.dienst{
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px) clamp(24px,3vw,36px); position:relative; display:flex; flex-direction:column; gap:18px; min-height:330px;
  border-left:1px solid var(--lijn); text-decoration:none; color:inherit; background:var(--kool); transition:background .3s;
}
.dienst:first-child{ border-left:0 }
.dienst:hover{ background:#262622 }
.dienst h3{ font-size:clamp(34px,3vw,34px); font-weight:300 }
.dienst p{ font-size:21px; color:var(--zacht); margin:0; max-width:26em; padding-right:64px }
.dienst .rond{
  position:absolute; right:clamp(20px,2.6vw,32px); bottom:clamp(20px,2.6vw,32px); width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; background:var(--zwart); border:1px solid var(--lijn-sterk); color:var(--tekst); transition:background .3s, color .3s, transform .3s;
}
.dienst:hover .rond{ background:var(--oker); color:var(--inkt); transform:translateX(4px); border-color:var(--oker) }
@media (max-width:900px){ .diensten{ grid-template-columns:1fr } .dienst{ border-left:0; border-top:1px solid var(--lijn); min-height:0; padding-bottom:96px } .dienst p{ padding-right:0 } .dienst:first-child{ border-top:0 } }

/* ---------- de vijf dagen ---------------------------------------------- */
.dagen{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:48px }
.dag{ background:var(--been); border-radius:var(--hoek); padding:21px 21px 21px; display:flex; flex-direction:column; gap:8px; min-height:0; position:relative }
.dag.live{ background:var(--zwart); color:var(--tekst) }
.dag .d{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lees) }
.dag.live .d{ color:var(--patina) }
.dag h3{ font-size:21px; font-weight:500; letter-spacing:-.02em }
.dag p{ font-size:21px; line-height:1.5; margin:0; color:var(--lees) }
.dag.live p{ color:var(--zacht) }
.dag .cijfer{ margin-top:13px; font-family:var(--mono); font-size:13px; font-weight:400; line-height:1; letter-spacing:.08em; color:var(--lees); opacity:.55 }
.dag.live .cijfer{ color:var(--oker) }
@media (max-width:1040px){ .dagen{ grid-template-columns:repeat(2,1fr) } .dag{ min-height:0 } .dag.live{ grid-column:span 2 } }
@media (max-width:520px){ .dagen{ grid-template-columns:1fr } .dag.live{ grid-column:auto } .dag .cijfer{ display:none } }
.daarna{ margin-top:22px; padding:22px 26px; border-radius:var(--hoek); border:1px dashed rgba(22,22,20,.3); display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; font-size:21px; color:var(--lees) }
.daarna b{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--patina-diep); font-weight:500 }

/* ---------- mensen ------------------------------------------------ */
.mensen{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px }
.mens{ background:var(--diep); border:1px solid var(--lijn); border-radius:var(--hoek-groot); overflow:hidden; display:grid; grid-template-rows:auto 1fr }
.mens .foto{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--kool) }
.mens .foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; filter:saturate(.85) }
.mens .foto .naamplaat{
  position:absolute; left:18px; bottom:18px; background:rgba(14,14,13,.86); backdrop-filter:blur(6px); border:1px solid var(--lijn-sterk); border-radius:14px; padding:12px 16px;
}
.mens .foto .naamplaat b{ display:block; font-family:var(--kop); font-weight:400; font-size:21px; letter-spacing:-.02em }
.mens .foto .naamplaat span{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.mens .naamplaat span{ color:var(--zacht) }
.mens .tekst{ padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:20px }
.mens blockquote{ margin:0; font-family:var(--kop); font-size:clamp(21px,2.3vw,34px); font-weight:300; line-height:1.2; letter-spacing:-.02em }
.mens .feiten{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--lijn) }
.mens .feiten li{ display:grid; grid-template-columns:minmax(64px,auto) 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--lijn); font-size:21px; line-height:1.45; align-items:baseline }
.mens .feiten b{ font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.02em; white-space:nowrap }
.mens .feiten b{ color:var(--oker) }
.mens .werk{ font-size:13px; color:var(--zacht); margin:0 }
.mens .werk b{ color:var(--tekst); font-weight:500 }
.mens .acties{ margin-top:auto; padding-top:6px }
.mens .knop-lijn{ font-size:13px; padding:13px 20px }
.herman{ margin-top:22px; padding:22px 26px; border-radius:var(--hoek); border:1px dashed var(--lijn-sterk); display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:center }
.herman img{ width:64px; height:64px; border-radius:16px; object-fit:cover; filter:saturate(.85) }
.herman p{ margin:0; font-size:21px; color:var(--zacht) }
.herman b{ color:var(--tekst); font-weight:500 }
@media (max-width:880px){ .mensen{ grid-template-columns:1fr } }

/* ---------- waarom, het raster ----------------------------------- */
.waarom{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px }
.waarom .vak{ background:var(--been); border-radius:var(--hoek); padding:28px 26px; display:flex; flex-direction:column; gap:10px }
.waarom .vak.kop-vak{ background:transparent; padding-left:0; justify-content:end }
.waarom h3{ font-size:34px; font-weight:400; letter-spacing:-.02em }
.waarom p{ margin:0; font-size:21px; line-height:1.5; color:var(--lees) }
.waarom .cijfer{ font-family:var(--kop); font-size:55px; font-weight:300; line-height:1; letter-spacing:-.04em; color:var(--inkt); margin-bottom:6px }
.waarom .cijfer small{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--patina-diep); margin-left:10px }
@media (max-width:900px){ .waarom{ grid-template-columns:1fr 1fr } .waarom .vak.kop-vak{ grid-column:span 2 } }
@media (max-width:560px){ .waarom{ grid-template-columns:1fr } .waarom .vak.kop-vak{ grid-column:auto } }

/* ---------- prijzen ---------------------------------------------- */
.bouwprijs{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px }
.prijs{ background:var(--been); border-radius:var(--hoek-groot); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:16px; position:relative }
.prijs.uitgelicht{ background:var(--zwart); color:var(--tekst) }
.prijs .lab{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lees) }
.prijs.uitgelicht .lab{ color:var(--oker) }
.prijs h3{ font-size:clamp(34px,3vw,34px); font-weight:400 }
.prijs .bedrag{ font-family:var(--kop); font-size:clamp(55px,5vw,55px); font-weight:300; letter-spacing:-.04em; line-height:1 }
.prijs .bedrag small{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.05em; margin-top:10px; color:var(--lees); line-height:1.5 }
.prijs.uitgelicht .bedrag small{ color:var(--zacht) }
.prijs p{ margin:0; font-size:21px; line-height:1.5; color:var(--lees) }
.prijs.uitgelicht p{ color:var(--zacht) }
.prijs ul{ margin:6px 0 0; padding:0; list-style:none; display:grid; gap:9px }
.prijs li{ font-size:21px; display:grid; grid-template-columns:18px 1fr; gap:10px; line-height:1.45 }
.prijs li::before{ content:"✓"; font-family:var(--mono); color:var(--patina-diep) }
.prijs.uitgelicht li::before{ color:var(--patina) }
.prijs .acties{ margin-top:auto; padding-top:10px }
.prijs .knop-lijn{ font-size:13px }
.maand{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px }
.maand .vak{ background:var(--been); border-radius:var(--hoek); padding:24px 24px 22px; display:flex; flex-direction:column; gap:8px }
.maand .lab{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lees) }
.maand h4{ font-size:21px; font-weight:400; display:flex; justify-content:space-between; align-items:baseline; gap:10px; letter-spacing:-.02em }
.maand h4 span{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0; color:var(--inkt) }
.maand p{ margin:0; font-size:21px; line-height:1.5; color:var(--lees) }
.maand .inhoud{ list-style:none; margin:13px 0 0; padding:0; display:grid; gap:8px; font-size:13px; color:var(--lees) }
.maand .inhoud li{ display:grid; grid-template-columns:13px 1fr; gap:8px; line-height:1.5 }
.maand .inhoud li::before{ content:"+"; font-family:var(--mono); color:var(--patina-diep) }
.maand .vak.basis{ outline:2px solid var(--patina-diep); outline-offset:-2px }
@media (max-width:820px){ .bouwprijs, .maand{ grid-template-columns:1fr } }
.prijsnoot{ margin-top:22px; font-size:13px; color:var(--lees) }

/* ---------- vragen ------------------------------------------------ */
.vragen{ margin-top:40px; border-top:1px solid var(--lijn); max-width:42em }
.vragen details{ border-bottom:1px solid var(--lijn) }
.vragen summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:var(--kop); font-size:21px; font-weight:400; letter-spacing:-.015em; line-height:1.25;
}
.vragen summary::-webkit-details-marker{ display:none }
.vragen summary::after{ content:"+"; position:absolute; right:4px; top:16px; font-family:var(--mono); font-size:34px; font-weight:300; color:var(--oker); transition:transform .3s }
.vragen details[open] summary::after{ transform:rotate(45deg) }
.vragen .antwoord{ padding:0 0 22px; font-size:21px; line-height:1.6; color:var(--zacht); max-width:40em }

/* ---------- aanmelden -------------------------------------------- */
.aanmeld{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,72px); margin-top:44px }
.aanmeld .zij ol{ margin:0; padding:0 0 0 1.2em; display:grid; gap:12px; font-size:21px; color:var(--zacht) }
.aanmeld .zij ol li::marker{ font-family:var(--mono); color:var(--oker) }
.waarborg{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:8px; font-size:13px; color:var(--zacht) }
.waarborg li{ display:grid; grid-template-columns:18px 1fr; gap:10px }
.waarborg li::before{ content:"✓"; font-family:var(--mono); color:var(--patina) }
form.velden{ background:var(--diep); border:1px solid var(--lijn); border-radius:var(--hoek-groot); padding:clamp(22px,3vw,36px); display:grid; gap:18px }
.veld{ display:grid; gap:8px }
.veld label{ font-size:13px; font-weight:500; color:var(--tekst) }
.veld label small{ font-weight:400; color:var(--zacht) }
.veld input, .veld textarea{
  font:inherit; font-size:21px; color:var(--tekst); background:var(--kool); border:1px solid var(--lijn-sterk); border-radius:14px; padding:14px 16px; width:100%; min-height:50px;
}
.veld textarea{ min-height:130px; resize:vertical }
.veld input:focus, .veld textarea:focus{ outline:2px solid var(--oker); outline-offset:0; border-color:transparent }
.veld .hint{ font-size:13px; color:var(--zacht); margin:0 }
.pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
form .knop{ justify-content:center; width:100%; font-size:21px }
.akkoord{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:13px; align-items:start }
.akkoord input{ margin-top:5px; width:17px; height:17px; accent-color:var(--oker) }
.akkoord label{ font-size:13px; line-height:1.55; color:var(--zacht); font-weight:400 }
.akkoord a{ color:var(--tekst); text-decoration-color:var(--lijn-sterk); text-underline-offset:3px }
.akkoord a:hover{ color:var(--oker) }
.melding{ display:none; background:var(--kool); border:1px solid var(--lijn-sterk); border-radius:14px; padding:14px 16px; font-size:21px }
.melding.toon{ display:block }

/* Wat er in de plaats van het formulier komt zodra de aanmelding binnen is,
   en het paneel dat erboven verschijnt als het versturen niet lukte. */
.gelukt{
  background:var(--diep); border:1px solid var(--patina-diep); border-radius:var(--hoek-groot);
  padding:clamp(22px,3vw,36px); display:grid; gap:12px;
}
.gelukt h3{ font-family:var(--kop); font-weight:300; font-size:clamp(21px,3vw,34px); letter-spacing:-.02em }
.gelukt p{ margin:0; color:var(--zacht); font-size:21px }
.terugknop{
  justify-self:start; margin-top:8px; font:inherit; font-size:13px; color:var(--tekst);
  background:transparent; border:1.5px solid var(--lijn-sterk); border-radius:var(--pil);
  padding:12px 22px; min-height:44px; cursor:pointer;
}
.terugknop:hover{ border-color:var(--tekst) }
@media (max-width:860px){ .aanmeld{ grid-template-columns:1fr } }

/* ---------- juridische pagina's ---------------------------------- */
/* De privacyverklaring en de algemene voorwaarden. Lange leestekst, dus die
   ligt op papier in plaats van op het zwart: een vel in de pagina, met de
   kop er nog op het donker boven. De klassen hieronder heten met opzet niet
   .kaart en .nr, want die betekenen elders op de site iets anders. */
.jur-kop{ padding-block:clamp(44px,7vw,84px) clamp(26px,4vw,44px) }
.jur-kop h1{ font-size:clamp(34px,4.8vw,55px); max-width:20ch; margin:0 0 18px }
.jur-kop .eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zacht);
}
.jur-kop .staat{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--zacht); margin:0;
}
.jur-kop .inleiding{ font-size:21px; line-height:1.6; color:var(--zacht); max-width:56ch; margin:22px 0 0 }

.juridisch{
  background:var(--papier); color:var(--lees); border-radius:var(--hoek-groot);
  max-width:900px; margin:0 auto clamp(40px,6vw,80px);
  padding:clamp(28px,4.5vw,64px);
  font-size:21px; line-height:1.68;
}
.juridisch a{ color:var(--inkt); text-underline-offset:3px }
.juridisch a:hover{ color:var(--oker-diep) }
.juridisch strong{ font-weight:600; color:var(--inkt) }
.juridisch h2{
  font-family:var(--kop); font-weight:400; font-size:clamp(21px,2.8vw,34px);
  letter-spacing:-.02em; color:var(--inkt); margin:44px 0 14px;
  padding-top:24px; border-top:1px solid var(--lijn-licht);
}
.juridisch > h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.juridisch h2 .nummer{
  font-family:var(--mono); font-size:13px; color:var(--patina-diep);
  margin-right:12px; letter-spacing:.06em;
}
.juridisch h3{ font-family:var(--lop); font-weight:600; font-size:21px; color:var(--inkt); margin:26px 0 8px }
.juridisch ul{ margin:0 0 1.2em; padding-left:0; list-style:none }
.juridisch li{ position:relative; padding:0 0 9px 22px }
.juridisch li::before{ content:""; position:absolute; left:0; top:13px; width:9px; height:1px; background:var(--oker-diep) }

.juridisch .vak{
  background:var(--been); border:1px solid var(--lijn-licht); border-radius:var(--hoek);
  padding:clamp(20px,3vw,30px); margin:22px 0;
}
.juridisch .vak p:last-child{ margin-bottom:0 }
.juridisch .gegevens{ list-style:none; margin:0; padding:0 }
.juridisch .gegevens li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--lijn-licht);
}
.juridisch .gegevens li::before{ content:none }
.juridisch .gegevens li:last-child{ border-bottom:0 }
.juridisch .gegevens .termijn{
  font-family:var(--mono); font-size:13px; color:var(--patina-diep);
  white-space:nowrap; letter-spacing:.03em;
}
@media (max-width:560px){
  .juridisch{ font-size:21px }
  .juridisch .gegevens li{ grid-template-columns:minmax(0,1fr); gap:4px }
}

/* ---------- voet ------------------------------------------------- */
.voet{ padding:clamp(48px,7vw,88px) var(--marge) 40px; border-top:1px solid var(--lijn); margin-top:40px }
.voet .raster{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; max-width:var(--breed); margin-inline:auto }
.voet h4{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--zacht); margin:0 0 14px; font-weight:500 }
.voet ul{ list-style:none; margin:0; padding:0 }
.voet li{ display:block }
.voet li a{ font-size:13px; color:var(--tekst); text-decoration:none; display:inline-block; padding:7px 0 }
.voet li a:hover{ color:var(--oker) }
.voet .merk{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--tekst); margin-bottom:14px; min-height:44px; padding:4px 0 }
.voet .merk .merknaam{ font-family:var(--kop); font-size:21px }
.voet .merk .merknaam b{ font-weight:inherit; color:var(--oker) }
.voet p{ font-size:13px; color:var(--zacht); max-width:30em }
.voet .onder{ max-width:var(--breed); margin:40px auto 0; padding-top:22px; border-top:1px solid var(--lijn); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-family:var(--mono); font-size:13px; color:var(--zacht) }
@media (max-width:820px){ .voet .raster{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .voet .raster{ grid-template-columns:1fr } }

/* ---------- verschijnen bij scrollen ------------------------------ */
/* Drie soorten beweging en niet meer. Een sectie schuift één keer omhoog, een
   rij kaarten komt op na elkaar, en een plaat zakt op zijn plek. Alles onder de
   halve seconde, want beweging die je ziet duren is beweging die stoort. Wie in
   zijn systeem heeft staan dat hij minder beweging wil, krijgt niets. */
.toon-later{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1) }
.toon-later.zichtbaar{ opacity:1; transform:none }

@keyframes opkomen{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes zakken{ from{ opacity:0; transform:scale(1.015) } to{ opacity:1; transform:none } }

/* Een rij: elk volgend kaartje een tikje later. Zes is genoeg, daarna staat de
   rest er gewoon; een zevende vertraging van bijna een halve seconde valt op. */
.toon-later.zichtbaar .diensten > *,
.toon-later.zichtbaar .prijsrij > *,
.toon-later.zichtbaar .dagenrij > *,
.toon-later.zichtbaar .verder > *,
.toon-later.zichtbaar .artikellijst > *{ animation:opkomen .45s cubic-bezier(.2,.7,.2,1) backwards }
.toon-later.zichtbaar .diensten > *:nth-child(2),
.toon-later.zichtbaar .prijsrij > *:nth-child(2),
.toon-later.zichtbaar .dagenrij > *:nth-child(2),
.toon-later.zichtbaar .verder > *:nth-child(2),
.toon-later.zichtbaar .artikellijst > *:nth-child(2){ animation-delay:.07s }
.toon-later.zichtbaar .diensten > *:nth-child(3),
.toon-later.zichtbaar .prijsrij > *:nth-child(3),
.toon-later.zichtbaar .dagenrij > *:nth-child(3),
.toon-later.zichtbaar .artikellijst > *:nth-child(3){ animation-delay:.14s }
.toon-later.zichtbaar .dagenrij > *:nth-child(4),
.toon-later.zichtbaar .artikellijst > *:nth-child(4){ animation-delay:.21s }
.toon-later.zichtbaar .dagenrij > *:nth-child(5),
.toon-later.zichtbaar .artikellijst > *:nth-child(5){ animation-delay:.28s }
.toon-later.zichtbaar .artikellijst > *:nth-child(6){ animation-delay:.35s }

/* De plaat boven een artikel zakt op zijn plek in plaats van omhoog te komen. */
.plaat{ animation:zakken .5s cubic-bezier(.2,.7,.2,1) backwards }

@media (prefers-reduced-motion:reduce){
  .toon-later{ opacity:1; transform:none; transition:none }
  .plaat, .toon-later.zichtbaar .diensten > *, .toon-later.zichtbaar .prijsrij > *,
  .toon-later.zichtbaar .dagenrij > *, .toon-later.zichtbaar .verder > *,
  .toon-later.zichtbaar .artikellijst > *{ animation:none }
}

/* ---------- mobiel ------------------------------------------------ */
@media (max-width:920px){
  .hero .raster{ grid-template-columns:1fr }
}
@media (max-width:600px){
  body{ font-size:21px }
  .knop, .knop-lijn{ white-space:normal; text-align:left; padding:14px 20px }
  .acties .knop{ width:100%; justify-content:center; text-align:center }
  .acties .knop-lijn{ width:100%; justify-content:center }
  .hero h1{ font-size:clamp(34px,11.5vw,55px) }
  .kop-groot{ font-size:clamp(34px,8.6vw,34px) }
  .kop-mid{ font-size:clamp(34px,7.4vw,34px) }
  .intro, .hero .intro{ font-size:21px }
  .strook .naam b{ font-size:21px }
}

/* ---------- meerdere pagina's ------------------------------------ */
.nav .links a.actief{ color:var(--tekst) }
.kruimel{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:0 6px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--zacht) }
.kruimel li{ display:inline-flex; align-items:center; gap:6px }
.kruimel li + li::before{ content:"\2192"; color:var(--lijn-sterk) }
.kruimel a{ text-decoration:none; color:var(--zacht); padding:10px 0; display:inline-block; min-height:34px }
.kruimel a:hover{ color:var(--tekst) }
.kruimel span{ color:var(--tekst); padding:10px 0; display:inline-block }
.paginakop{ padding-block:clamp(36px,6vw,80px) clamp(10px,2vw,24px) }
.paginakop h1{ font-size:clamp(34px,6vw,89px); letter-spacing:-.035em; max-width:15ch }
.paginakop .intro{ font-size:21px }
.cta-blok{ margin-top:34px }
.cta-blok .binnen{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,4vw,64px); align-items:center }
.cta-blok h2{ font-size:clamp(34px,4.8vw,55px); letter-spacing:-.03em; max-width:15ch }
.cta-blok p{ margin:16px 0 0; font-size:21px; color:var(--zacht); max-width:32em }
.cta-blok .acties{ margin:0; justify-content:flex-end }
@media (max-width:820px){ .cta-blok .binnen{ grid-template-columns:1fr } .cta-blok .acties{ justify-content:flex-start } }
.dagenrij{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
.dagenrij li{ background:var(--been); color:var(--inkt); border-radius:var(--hoek); padding:21px 21px 18px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden }
.dagenrij li::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--oker); opacity:.2 }
.dagenrij li:nth-child(2)::before{ opacity:.4 }
.dagenrij li:nth-child(3)::before{ opacity:.6 }
.dagenrij li:nth-child(4)::before{ opacity:.8 }
.dagenrij li.live::before{ opacity:1 }
.dagenrij li.live{ background:var(--zwart); color:var(--tekst) }
.dagenrij b{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lees); font-weight:500 }
.dagenrij li.live b{ color:var(--patina) }
.dagenrij span{ font-family:var(--kop); font-size:21px; font-weight:400; letter-spacing:-.02em; line-height:1.15 }
@media (max-width:1040px){ .dagenrij{ grid-template-columns:repeat(2,1fr) } .dagenrij li.live{ grid-column:span 2 } }
@media (max-width:520px){ .dagenrij{ grid-template-columns:1fr } .dagenrij li.live{ grid-column:auto } }
.mens.compact .foto{ aspect-ratio:16/9 }
.mens.compact .tekst{ gap:16px }
.prijsrij{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px }
.prijsrij .vak{ background:var(--been); color:var(--lees); border-radius:var(--hoek); padding:26px 24px 24px; display:flex; flex-direction:column; gap:8px }
.prijsrij .vak h3, .prijsrij .vak .bedrag{ color:var(--inkt) }
.prijsrij .vak.uitgelicht{ background:var(--zwart); color:var(--zacht) }
.prijsrij .vak.uitgelicht h3, .prijsrij .vak.uitgelicht .bedrag{ color:var(--tekst) }
.prijsrij .lab{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lees) }
.prijsrij .vak.uitgelicht .lab{ color:var(--oker) }
.prijsrij h3{ font-size:34px; font-weight:400; letter-spacing:-.02em }
.prijsrij .bedrag{ font-family:var(--kop); font-size:55px; font-weight:300; letter-spacing:-.04em; line-height:1 }
.prijsrij .bedrag small{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.05em; margin-top:8px; color:var(--lees); line-height:1.5 }
.prijsrij .vak.uitgelicht .bedrag small{ color:var(--zacht) }
.prijsrij p{ margin:0; font-size:21px; line-height:1.5; color:var(--lees) }
.prijsrij .vak.uitgelicht p{ color:var(--zacht) }
@media (max-width:820px){ .prijsrij{ grid-template-columns:1fr } }
.lijst{ margin:0; padding:0; list-style:none; display:grid; gap:10px; max-width:36em }
.lijst li{ display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:21px; line-height:1.55 }
.lijst li::before{ content:"✓"; font-family:var(--mono); color:var(--patina) }
.licht .lijst li::before{ color:var(--patina-diep) }
.tweekolom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); margin-top:44px; align-items:start }
.tweekolom h3{ font-size:34px; font-weight:400; margin:0 0 14px; letter-spacing:-.02em }
@media (max-width:820px){ .tweekolom{ grid-template-columns:1fr } }
.contactvak{ margin-top:28px; display:grid; gap:6px; font-size:21px; color:var(--zacht) }
.contactvak a{ color:var(--tekst); text-decoration:none; padding:8px 0; display:inline-block }
.contactvak a:hover{ color:var(--oker) }
.fout{ padding-block:clamp(56px,10vw,140px) }
.fout h1{ font-size:clamp(34px,6vw,89px); max-width:14ch }
.fout ul.paginas{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:4px; max-width:24em }
.fout ul.paginas a{ display:inline-block; padding:10px 0; font-size:21px; color:var(--tekst); text-decoration:none; border-bottom:1px solid var(--lijn); width:100% }
.fout ul.paginas a:hover{ color:var(--oker) }

/* ---------- kennisartikel ---------------------------------------- */
/* Opmaak van een leespagina: de kop op zwart, het artikel zelf op papier.
   Alleen gebruikt door /kennis/, en opgezet met paginas/kennis/_voorbeeld.html
   als bron. Wat hier staat is vorm; de opbouw van een artikel staat daar. */
.artikelkop{ padding-block:clamp(34px,5vw,72px) clamp(8px,2vw,20px) }
.artikelkop h1{ font-size:clamp(34px,5.6vw,89px); letter-spacing:-.035em; max-width:18ch }
.artikelkop .intro{ font-size:21px; max-width:38em }
.feiten{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:28px 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--zacht) }
.feiten li{ display:inline-flex; align-items:center; gap:10px }
.feiten li + li::before{ content:""; width:1px; height:12px; background:var(--lijn-sterk) }

.artikel{
  background:var(--papier); color:var(--lees); border-radius:var(--hoek);
  max-width:780px; margin:clamp(24px,4vw,44px) auto clamp(40px,6vw,80px);
  padding:clamp(26px,4vw,56px);
  font-size:21px; line-height:1.66;
}
.artikel > *:last-child{ margin-bottom:0 }
.artikel a{ color:var(--inkt); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s }
.artikel a:hover{ color:var(--oker-diep) }
.artikel strong{ font-weight:600; color:var(--inkt) }
.artikel h2{
  font-family:var(--kop); font-weight:400; font-size:clamp(21px,2.8vw,34px); letter-spacing:-.03em;
  color:var(--inkt); margin:56px 0 14px; padding-top:26px; border-top:1px solid var(--lijn-licht);
  scroll-margin-top:calc(var(--header) + 20px);
}
.artikel h3{ font-family:var(--lop); font-weight:600; font-size:21px; color:var(--inkt); margin:30px 0 8px }
.artikel ul, .artikel ol{ margin:0 0 1.2em; padding-left:0; list-style:none; counter-reset:tel }
.artikel li{ position:relative; padding:0 0 10px 26px }
.artikel ul > li::before{ content:""; position:absolute; left:0; top:14px; width:10px; height:1px; background:var(--oker-diep) }
.artikel ol > li{ counter-increment:tel }
.artikel ol > li::before{ content:counter(tel); position:absolute; left:0; top:1px; font-family:var(--mono); font-size:13px; color:var(--patina-diep) }

/* Het korte antwoord, boven het artikel. Wie het alleen even wil weten,
   leest dit en gaat weer weg; dat is goed. */
.artikel .kort{
  border-left:2px solid var(--oker); padding:2px 0 2px clamp(18px,2.4vw,26px);
  margin:0 0 34px; font-size:21px; line-height:1.6; color:var(--inkt);
}
.artikel .kort b{ display:block; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--oker-diep); margin:0 0 9px }
.artikel .kort p:last-child{ margin-bottom:0 }

.artikel .vak{ background:var(--been); border-radius:12px; padding:clamp(20px,3vw,28px); margin:30px 0 }
.artikel .vak h3{ margin-top:0 }
.artikel .vak p:last-child, .artikel .vak ul:last-child{ margin-bottom:0 }
.artikel code{ font-family:var(--mono); font-size:.86em; background:var(--been); border:1px solid var(--lijn-licht); border-radius:6px; padding:2px 6px; color:var(--inkt); overflow-wrap:break-word }
.artikel figure{ margin:32px 0 }
.artikel figure img, .artikel figure svg{ border-radius:12px; width:100%; display:block }
.artikel figcaption{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--lees); margin-top:12px }
.artikel blockquote{ margin:32px 0; padding:0 0 0 24px; border-left:2px solid var(--patina-diep); font-family:var(--kop); font-weight:300; font-size:clamp(21px,2.6vw,34px); line-height:1.35; letter-spacing:-.02em; color:var(--inkt) }
.artikel .rol{ overflow-x:auto; margin:28px 0; -webkit-overflow-scrolling:touch }
.artikel .rol table{ margin:0; min-width:460px }
.artikel table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:21px }
.artikel th, .artikel td{ text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--lijn-licht); vertical-align:top }
.artikel th{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--lees) }
.artikel td:last-child, .artikel th:last-child{ padding-right:0 }

/* Op deze pagina: de sprongen naar de tussenkoppen. */
.inhoud{ border-block:1px solid var(--lijn-licht); padding:20px 0 16px; margin:0 0 40px }
.inhoud b{ display:block; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--lees); margin:0 0 12px }
/* De drie regels hieronder staan met .artikel ervoor, want de opsommingen in
   .artikel zetten anders hun eigen streepje en cijfer in deze lijst. */
.artikel .inhoud ol{ margin:0; padding:0; list-style:none; counter-reset:sprong; display:grid; gap:0 28px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:620px){ .artikel .inhoud ol{ grid-template-columns:minmax(0,1fr) } }
.artikel .inhoud ol > li{ padding:0; counter-increment:sprong }
.artikel .inhoud ol > li::before{ content:none }
.inhoud a{ display:flex; gap:10px; padding:6px 0; color:var(--inkt); text-decoration:none; font-size:13px; transition:color .15s }
.inhoud a::before{ content:counter(sprong) "."; font-family:var(--mono); font-size:13px; line-height:1.9; color:var(--patina-diep); flex:none; white-space:nowrap }
.inhoud a:hover{ color:var(--oker-diep); text-decoration:underline }

/* De plaat boven een artikel. Iets breder dan de tekstkolom eronder, zodat de
   twee over elkaar heen lijken te liggen in plaats van netjes op elkaar. */
.plaat{
  width:min(860px, calc(100% - 2 * var(--marge)));
  margin:clamp(20px,3vw,36px) auto 0; border-radius:var(--hoek);
  overflow:hidden; line-height:0; background:var(--kool);
}
.plaat img{ width:100%; height:auto; display:block }

/* Leesbalk: hoe ver je in het artikel bent. Staat alleen op een leespagina en
   doet niets zonder .artikel op de pagina. Twee pixels, want het is een hint en
   geen onderdeel van het ontwerp. */
.leesbalk{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none }
.leesbalk i{ display:block; height:100%; width:0; background:var(--oker); transition:width .12s linear }
@media (prefers-reduced-motion:reduce){ .leesbalk i{ transition:none } }

/* Wie het schreef, onder het artikel. Eén van de twee, nooit allebei. */
.schrijver{ display:flex; gap:20px; align-items:flex-start; margin-top:44px; padding-top:28px; border-top:1px solid var(--lijn-licht) }
.schrijver img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none }
.schrijver b{ display:block; font-family:var(--kop); font-weight:400; font-size:21px; letter-spacing:-.02em; color:var(--inkt) }
.schrijver p{ margin:6px 0 0; font-size:21px; line-height:1.55 }
@media (max-width:560px){
  .artikel{ font-size:21px }
  .artikel .kort{ font-size:21px }
  .schrijver{ gap:16px }
}

/* Verder lezen: twee andere artikelen, nooit meer. */
.verder{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px }
.verder a{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--tekst);
  background:var(--diep); border:1px solid var(--lijn); border-radius:var(--hoek);
  padding:24px 24px 22px; transition:border-color .25s, transform .25s;
}
.verder a:hover{ border-color:var(--lijn-sterk); transform:translateY(-2px) }
.verder .lab{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--oker) }
.verder h3{ font-size:21px; font-weight:400; letter-spacing:-.02em; line-height:1.2 }
.verder p{ margin:0; font-size:21px; line-height:1.5; color:var(--zacht) }
@media (max-width:760px){ .verder{ grid-template-columns:1fr } }

/* De lijst met artikelen op /kennis/. Rijen en geen kaarten: een lijst die
   groeit blijft zo leesbaar, ook als er twintig artikelen staan. */
.artikellijst{ list-style:none; margin:44px 0 0; padding:0; border-top:1px solid var(--lijn) }
.artikellijst li{ border-bottom:1px solid var(--lijn) }
.artikellijst a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; align-items:baseline;
  padding:26px 0; text-decoration:none; color:var(--tekst);
}
.artikellijst h3{ grid-column:1; grid-row:1; font-size:clamp(21px,2.6vw,34px); font-weight:400; letter-spacing:-.025em; line-height:1.15; max-width:22ch }
.artikellijst a:hover h3{ color:var(--oker) }
.artikellijst .wanneer{ grid-column:2; grid-row:1; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--zacht); white-space:nowrap; text-align:right }
.artikellijst p{ grid-column:1; grid-row:2; margin:0; font-size:21px; line-height:1.5; color:var(--zacht); max-width:46em }
@media (max-width:620px){
  .artikellijst a{ grid-template-columns:minmax(0,1fr) }
  .artikellijst .wanneer{ grid-column:1; grid-row:1; text-align:left }
  .artikellijst h3{ grid-row:2 }
  .artikellijst p{ grid-row:3 }
}

/* Een weg met stappen, voor in een artikel: waar iets langsgaat en waar het
   breekt. Past zich vanzelf aan de breedte aan, dus op een telefoon staan de
   stappen onder elkaar in plaats van dat er iets moet schuiven. */
.artikel .pad{ list-style:none; margin:30px 0 34px; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.artikel .pad li{ background:var(--been); color:var(--lees); border-radius:12px; padding:16px 16px 14px; margin:0 }
.artikel .pad li::before{ content:none }
.artikel .pad b{ display:block; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--patina-diep); margin:0 0 7px }
.artikel .pad span{ display:block; font-size:13px; line-height:1.45 }
.artikel .pad li.breekt{ box-shadow:inset 0 0 0 1.5px var(--oker) }
/* Bij vijf stappen valt de laatste op een eigen regel. Die laten we dan de hele
   breedte pakken, want het is de afloop en geen zesde stap. */
.artikel .pad.vijf li:last-child{ grid-column:1/-1 }
.artikel .pad li.breekt b{ color:var(--oker-diep) }

/* ---------- de vitrine op /werk/ --------------------------------- */
/* Eén opgeleverde site per blok: de site zelf groot in een venster, met de
   telefoonversie eroverheen, en ernaast wat we deden. Links en rechts wisselen
   elkaar af, zodat je bij het scrollen niet drie keer hetzelfde ziet. De
   afbeeldingen zijn echte schermafdrukken en geen mockups; dat is het hele
   punt van deze pagina. */
.vitrine{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding-block:clamp(44px,7vw,96px); border-top:1px solid var(--lijn);
}
.vitrine:first-of-type{ border-top:0 }
/* Bij het omdraaien moeten ook de kolombreedtes mee, anders krijgt de afdruk
   bij elk tweede blok de smalle kolom en wordt hij ineens kleiner. */
.vitrine:nth-of-type(even){ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
.vitrine:nth-of-type(even) .toonbank{ order:2 }

.toonbank{ position:relative; padding-bottom:clamp(20px,3vw,34px) }
.venster{
  border-radius:14px; overflow:hidden; background:var(--kool);
  border:1px solid var(--lijn-sterk); box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.venster .balk{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--diep); border-bottom:1px solid var(--lijn) }
.venster .balk i{ width:9px; height:9px; border-radius:50%; background:var(--lijn-sterk); flex:none }
.venster .balk span{ margin-left:8px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--zacht); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.venster img{ width:100%; height:auto; display:block; aspect-ratio:1200/750; object-fit:cover; object-position:top center }

.zakformaat{
  position:absolute; right:-14px; bottom:0; width:22%; min-width:104px; max-width:150px;
  border-radius:16px; overflow:hidden; background:var(--diep);
  border:3px solid var(--diep); box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.vitrine:nth-of-type(even) .zakformaat{ right:auto; left:-14px }
.zakformaat img{ width:100%; height:auto; display:block; aspect-ratio:390/844; object-fit:cover; object-position:top center }

.vitrine .nr{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--oker) }
.vitrine h2{ font-size:clamp(34px,3.6vw,55px); letter-spacing:-.03em; margin:14px 0 4px }
.vitrine .waar{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--zacht) }
.vitrine p{ margin:18px 0 0; font-size:21px; line-height:1.55; color:var(--zacht); max-width:38em }
.vitrine .gedaan{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px }
.vitrine .gedaan li{ display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:13px; line-height:1.45; color:var(--tekst) }
.vitrine .gedaan li::before{ content:""; width:8px; height:8px; margin-top:8px; border-radius:2px; background:var(--patina) }
.vitrine .acties{ margin-top:26px }

@media (max-width:860px){
  .vitrine{ grid-template-columns:minmax(0,1fr); gap:26px }
  .vitrine:nth-of-type(even) .toonbank{ order:0 }
  .zakformaat{ right:-8px; width:26%; min-width:96px }
  .vitrine:nth-of-type(even) .zakformaat{ left:auto; right:-8px }
}


/* ---------- de trap: visitekaart, marketingmachine, laten groeien ---- */
.trap{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:55px; border:1px solid var(--lijn); border-radius:var(--hoek-groot); overflow:hidden }
.stap{
  padding:34px 34px 89px; position:relative; display:flex; flex-direction:column; gap:13px;
  border-left:1px solid var(--lijn); text-decoration:none; color:inherit; background:var(--kool); transition:background .3s;
}
.stap:first-child{ border-left:0; background:var(--diep) }
.stap:last-child{ background:#262622 }
.stap:hover{ background:#2f2f2a }
.stap .nummer{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--zacht) }
.stap h3{ font-size:34px; font-weight:300; letter-spacing:-.02em; line-height:1.05 }
.stap .bedrag{ font-family:var(--mono); font-size:13px; color:var(--oker) }
.stap p{ margin:0; font-size:13px; color:var(--zacht); line-height:1.6 }
.stap .rond{
  position:absolute; left:34px; bottom:34px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--zwart); border:1px solid var(--lijn-sterk); color:var(--tekst); transition:background .3s, color .3s, transform .3s;
}
.stap:hover .rond{ background:var(--oker); color:var(--inkt); transform:translateX(5px); border-color:var(--oker) }
@media (max-width:900px){ .trap{ grid-template-columns:1fr } .stap{ border-left:0; border-top:1px solid var(--lijn); padding-bottom:89px } .stap:first-child{ border-top:0 } }

/* ---------- wie je spreekt, compact ---------------------------------- */
.twee{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:55px }
.persoon{ display:grid; grid-template-columns:89px 1fr; gap:21px; align-items:start }
.persoon img{ width:89px; height:89px; border-radius:21px; object-fit:cover; object-position:center top }
.persoon h3{ font-size:21px; font-weight:500; letter-spacing:0; margin:0 0 3px }
.persoon .rol{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--zacht); margin:0 0 13px }
.persoon p{ margin:0; font-size:13px; line-height:1.6; color:var(--zacht) }
.persoon a{ color:var(--tekst) }
@media (max-width:820px){ .twee{ grid-template-columns:1fr; gap:34px } }


/* ---------- het team achter de twee gezichten ----------------------- */
.achterban{ margin-top:34px; padding:34px; border:1px dashed var(--lijn-sterk); border-radius:var(--hoek) }
.achterban > p{ margin:0 0 21px; font-size:21px; color:var(--tekst); max-width:34em }
.achterban .vakjes{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px }
.achterban .vakje{ background:var(--kool); border-radius:13px; padding:21px }
.achterban .vakje b{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--oker); margin-bottom:8px; font-weight:500 }
.achterban .vakje span{ font-size:13px; line-height:1.5; color:var(--zacht) }
@media (max-width:820px){ .achterban .vakjes{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .achterban .vakjes{ grid-template-columns:1fr } }


/* ---------- modules bij Groeien! ------------------------------------ */
.modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:34px }
.module{ background:var(--been); border-radius:var(--hoek); padding:21px 21px 18px; display:flex; flex-direction:column; gap:8px }
.module h3{ font-size:21px; font-weight:500; letter-spacing:-.02em; margin:0 }
.module .bedrag{ font-family:var(--mono); font-size:13px; color:var(--patina-diep) }
.module p{ margin:0; font-size:13px; line-height:1.55; color:var(--lees) }
@media (max-width:900px){ .modules{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .modules{ grid-template-columns:1fr } }