@charset "UTF-8";
/* ==========================================================================
   Sterrenberg Verhuur

   Vormtaal: grote ronde vlakken op een warme botkleur, één kleurrijk verloop
   in de kop, en verder witte kaarten en twee donkere banden. Grote, strak
   gespatieerde koppen met één woord in het rood. Naar het model van moderne
   softwaresites (shiftbase.com als voorbeeld), maar in de kleuren en met de
   motieven van Sterrenberg: het rood uit hun logo, de ster en de tentnok.

   Drie eigen motieven:
   - het verloop: wijnrood naar vuurrood naar oranje, als avondlicht op doek
   - het sterrenspoor: de zeven kleine sterren uit het logo
   - de nok: het profiel van een rij pagodetenten
   ========================================================================== */

/* ---------- Fonts (zelfgehost) ------------------------------------------ */
/* Koppen in Archivo 800 op 92% breedte: dezelfde zware, iets smalle grotesk
   als het woordmerk VERHUUR. Tekst in Figtree, een warme geometrische sans
   die naast dat harde woordmerk de vriendelijke kant doet. */
@font-face{
  font-family:Archivo;src:url(../fonts/archivo-var.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
@font-face{
  font-family:Figtree;src:url(../fonts/figtree-var.woff2) format("woff2");
  font-weight:300 900;font-display:swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* #BE1622 komt uit hun logobestand. Wit daarop haalt 6,3:1, dus het rood
     mag zowel knop- als tekstkleur zijn. */
  --rood:#BE1622;
  --rood-diep:#9E101C;
  --rood-op-donker:#FF7C86;      /* 7,4:1 op de inktband */
  --rood-tint:#FBEDEE;
  --goud:#F2B705;                /* tweede accent, alleen als stip en streep */

  --bot:#F7F5EF;                 /* de paginagrond, warm en ongebleekt */
  --bot-diep:#EFEBE1;
  --wit:#FFFFFF;
  --inkt:#211E1B;                /* warm bijna zwart */
  --inkt-op:#2C2823;
  --inkt-lijn:rgba(255,255,255,.12);
  --grijs:#57524B;
  --grijs-licht:#726C64;         /* 5,4:1 op bot */
  --lijn:#E6E1D7;
  --op-donker:#CFC8BE;

  --kop:Archivo,"Helvetica Neue",Arial,sans-serif;
  --tekst:Figtree,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1280px;
  --marge:clamp(18px,4.4vw,40px);
  --rond-xl:clamp(24px,3vw,40px);
  --rond:24px;
  --rond-m:16px;
  --rond-s:12px;

  --schaduw:0 1px 2px rgba(33,30,27,.05), 0 10px 30px -12px rgba(33,30,27,.13);
  --schaduw-diep:0 2px 4px rgba(33,30,27,.06), 0 24px 60px -20px rgba(33,30,27,.22);

  /* Het verloop van de kop: avondlicht op tentdoek, om het rood van het logo
     heen gebouwd. Vier zachte vlekken over een schuine ondergrond. De platte
     variant is de ondergrond alleen, voor brede lage vlakken waar die vlekken
     tot strepen uitrekken. */
  --verloop-plat:linear-gradient(100deg, #A81120 0%, #C9242F 46%, #E05A2C 100%);
  --verloop:
    radial-gradient(62% 86% at 8% 14%, #7C1030 0%, rgba(124,16,48,0) 62%),
    radial-gradient(56% 72% at 88% 8%, #E43C62 0%, rgba(228,60,98,0) 60%),
    radial-gradient(76% 96% at 76% 96%, #E9572A 0%, rgba(233,87,42,0) 66%),
    radial-gradient(52% 64% at 24% 98%, #93101F 0%, rgba(147,16,31,0) 62%),
    linear-gradient(128deg, #A81120 0%, #C9242F 46%, #E05A2C 100%);
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bot)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--bot);color:var(--inkt);
  font:400 clamp(16px,.35vw + 15px,17.5px)/1.62 var(--tekst);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
picture{display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{
  margin:0;font-family:var(--kop);font-weight:800;font-stretch:92%;
  letter-spacing:-.028em;line-height:1.03;
}
h3,h4{font-weight:700;letter-spacing:-.018em;line-height:1.14}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--rood);outline-offset:3px;border-radius:8px}
.op-kleur :focus-visible,.op-donker-vlak :focus-visible{outline-color:#fff}

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:120;background:var(--inkt);color:#fff;
  padding:.8em 1.4em;border-radius:0 0 var(--rond-s) 0;font-weight:700;text-decoration:none;
}
.overslaan:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--marge)}
.midden{text-align:center;margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.min0{min-width:0}

/* ---------- Typografie --------------------------------------------------- */
.t-xxl{font-size:clamp(2.5rem,6.1vw,5rem);line-height:.98;letter-spacing:-.034em}
.t-xl{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.03em}
.t-lg{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.06;letter-spacing:-.026em}
.t-md{font-size:clamp(1.25rem,1.8vw,1.55rem)}
h1 em,h2 em,h3 em{font-style:normal;color:var(--rood)}
.op-kleur h1 em,.op-kleur h2 em{color:#FFD9A8}
.op-donker-vlak h2 em,.op-donker-vlak h3 em{color:var(--rood-op-donker)}
.lood{font-size:clamp(1.05rem,.7vw + .9rem,1.22rem);line-height:1.55;color:var(--grijs);max-width:56ch}
.midden .lood{margin-inline:auto}
.op-kleur .lood{color:rgba(255,255,255,.88)}
.op-donker-vlak .lood{color:var(--op-donker)}
.fijndruk{font-size:.9rem;color:var(--grijs-licht)}
.op-donker-vlak .fijndruk{color:#9C958C}

/* Het oogje: een klein kopje met een streepje ervoor, zoals boven elke
   sectie op de voorbeeldsite. */
.oog{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
  font-family:var(--tekst);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  color:var(--rood);
}
.oog::before{content:"";width:3px;height:1.1em;border-radius:2px;background:var(--rood);flex:none}
.midden .oog{justify-content:center}
.op-kleur .oog,.op-donker-vlak .oog{color:#fff}
.op-kleur .oog::before{background:var(--goud)}
.op-donker-vlak .oog::before{background:var(--rood)}

/* Het pilletje met een sterretje uit het logo. */
.pil{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42em .95em .42em .78em;border-radius:999px;
  background:var(--wit);color:var(--inkt);border:1px solid var(--lijn);
  font-size:.86rem;font-weight:600;line-height:1.4;
}
.pil::before{
  content:"";width:12px;height:12px;flex:none;background:var(--rood);
  -webkit-mask:url(../img/sterretje.svg) center/12px no-repeat;
  mask:url(../img/sterretje.svg) center/12px no-repeat;
}
.pil--licht{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px)}
.pil--licht::before{background:var(--goud)}
.pil--donker{background:rgba(255,255,255,.07);border-color:var(--inkt-lijn);color:#fff}

.kopgroep{max-width:640px}
.kopgroep .lood{margin-top:1.1rem}
.kopgroep.midden{max-width:26ch}
.kopgroep.midden .lood{max-width:54ch}
.sectie .kopgroep{margin-bottom:clamp(30px,3.6vw,52px)}
/* Kop links, tekst rechts: de tweekoloms sectiekop van de voorbeeldsite. */
.kopduo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(30px,3.6vw,52px)}
.kopduo .lood{max-width:46ch}
@media (max-width:820px){.kopduo{grid-template-columns:1fr;gap:1.2rem;align-items:start}}

/* ---------- Secties ------------------------------------------------------ */
.sectie{padding-block:clamp(56px,7.4vw,108px)}
.sectie--krap{padding-block:clamp(38px,4.6vw,64px)}
.sectie--donker{background:var(--inkt);color:var(--op-donker)}
.sectie--donker h2,.sectie--donker h3{color:#fff}

/* ---------- Knoppen ------------------------------------------------------ */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--tekst);font-weight:700;font-size:1rem;line-height:1;
  padding:1.05em 1.6em;border-radius:12px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.knop svg{width:17px;height:17px;flex:none}
.knop:active{transform:translateY(1px)}
.knop--rood{background:var(--rood);color:#fff;box-shadow:0 8px 20px -10px rgba(190,22,34,.8)}
.knop--rood:hover{background:var(--rood-diep)}
.knop--inkt{background:var(--inkt);color:#fff}
.knop--inkt:hover{background:#35302A}
.knop--wit{background:var(--wit);color:var(--inkt);box-shadow:0 10px 26px -12px rgba(33,30,27,.5)}
.knop--wit:hover{background:#F2EFE8}
.knop--rand{border-color:var(--lijn);background:var(--wit);color:var(--inkt)}
.knop--rand:hover{border-color:var(--inkt)}
.knop--licht{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08)}
.knop--licht:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.knop--breed{width:100%}
.knop--klein{padding:.72em 1.1em;font-size:.92rem;border-radius:10px}
.knoprij{display:flex;flex-wrap:wrap;gap:.7rem}
.knoprij--midden{justify-content:center}

.tekstlink{
  display:inline-flex;align-items:center;gap:.4rem;padding-block:.3rem;
  font-weight:700;color:var(--rood);text-decoration:none;
}
.tekstlink svg{width:16px;height:16px;transition:transform .16s ease}
.tekstlink:hover svg{transform:translateX(3px)}
.op-donker-vlak .tekstlink{color:var(--rood-op-donker)}
.op-kleur .tekstlink{color:#fff}
.tekst a:not(.knop):not(.tekstlink){color:var(--rood);text-underline-offset:3px}

/* ---------- Aankondigingsbalk -------------------------------------------- */
.aankondiging{
  background:var(--inkt);color:#fff;font-size:.9rem;font-weight:500;
  padding:.62rem var(--marge);text-align:center;
}
.aankondiging a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.4);
}
.aankondiging a:hover{border-bottom-color:#fff}
.aankondiging svg{width:14px;height:14px}
.aankondiging i{
  display:inline-block;width:13px;height:13px;margin-right:.55rem;vertical-align:-2px;
  background:var(--goud);
  -webkit-mask:url(../img/sterretje.svg) center/13px no-repeat;
  mask:url(../img/sterretje.svg) center/13px no-repeat;
}
@media (max-width:680px){.aankondiging{font-size:.83rem;padding-inline:14px}}

/* ---------- Kopbalk: zweeft over de gekleurde kop ------------------------ */
/* De balk hangt in .paginalaag, die direct onder de aankondigingsbalk begint.
   Zo staat hij over het verloop zonder dat er een hoogte in JavaScript
   uitgerekend hoeft te worden. */
.paginalaag{position:relative}
.kop-balk{position:absolute;top:0;left:0;right:0;z-index:60;transition:background-color .2s ease}
.kop-balk__rij{display:flex;align-items:center;gap:.9rem;min-height:92px;position:relative}
.merk{display:flex;align-items:center;margin-right:clamp(1.2rem,2.6vw,2.4rem);padding-block:.4rem}
.merk img{height:76px;width:auto}
.merk .merk--licht{display:block}
.merk .merk--donker{display:none}

.menu{display:flex;align-items:center;gap:.1rem}
.menu > a,.menu__knop{
  font-weight:600;font-size:1rem;text-decoration:none;color:#fff;
  padding:.55em .8em;border-radius:10px;transition:background-color .15s ease;
}
.menu > a:hover,.menu__knop:hover{background:rgba(255,255,255,.14)}
.menu > a[aria-current=page],.menu__knop[aria-current=page]{background:rgba(255,255,255,.18)}

.menu__uitklap{display:flex;align-items:center;position:relative}
.menu__knop{padding-right:.4em}
.menu__pijl{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:34px;margin-left:-.3em;padding:0;border:0;background:none;
  color:rgba(255,255,255,.75);cursor:pointer;border-radius:8px;
}
.menu__pijl svg{width:14px;height:14px;transition:transform .2s ease}
.menu__uitklap[data-open=true] .menu__pijl svg{transform:rotate(180deg)}
@media (min-width:1141px){
  .menu__uitklap{border-radius:10px;padding-right:.45em;transition:background-color .15s ease}
  .menu__uitklap:hover{background:rgba(255,255,255,.14)}
  .menu__uitklap .menu__knop:hover{background:none}
  .menu__uitklap:has(.menu__knop[aria-current=page]){background:rgba(255,255,255,.18)}
  .menu__uitklap .menu__knop[aria-current=page]{background:none}
}
.menu__paneel{
  position:absolute;top:calc(100% + 16px);left:0;z-index:70;width:max-content;
  background:var(--wit);border-radius:var(--rond);
  padding:16px;box-shadow:var(--schaduw-diep);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.menu__paneel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.menu__uitklap[data-open=true] > .menu__paneel{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (min-width:1141px){
  .menu__uitklap:hover > .menu__paneel,.menu__uitklap:focus-within > .menu__paneel{opacity:1;visibility:visible;transform:none}
}
.menu__paneel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem .4rem}
.menu__paneel li a{
  display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem .6rem .6rem;border-radius:12px;
  text-decoration:none;color:var(--inkt);transition:background-color .14s ease;
}
.menu__paneel li a:hover{background:var(--bot)}
.menu__paneel li b{display:block;font-weight:700;font-size:.96rem;line-height:1.25;white-space:nowrap}
.menu__paneel li small{display:block;font-size:.83rem;color:var(--grijs-licht);line-height:1.3;white-space:nowrap}
.menu__paneel .menu__schets{
  width:54px;height:42px;flex:none;border-radius:10px;background:var(--bot);
  color:var(--grijs-licht);padding:5px 6px;
}
.menu__paneel li a:hover .menu__schets{color:var(--rood);background:var(--rood-tint)}
.menu__paneel .menu__schets .sl{stroke-width:2.6}
.menu__voet{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.6rem;padding:.9rem .8rem .2rem;border-top:1px solid var(--lijn);font-size:.9rem;
}
.menu__voet span{color:var(--grijs-licht)}
.menu__voet a{font-weight:700;color:var(--rood);text-decoration:none;white-space:nowrap}

.kop-balk__acties{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.kop-bel{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6em .8em;border-radius:10px;
  font-weight:700;text-decoration:none;color:#fff;white-space:nowrap;
}
.kop-bel svg{width:17px;height:17px}
.kop-bel:hover{background:rgba(255,255,255,.14)}
.hamburger{
  display:none;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
}
.hamburger svg{width:22px;height:22px}
.menu__voet-la{display:none}

/* Zodra de bezoeker voorbij de gekleurde kop is, wordt de balk een vast wit
   lint. Dan draaien de kleuren om. */
.kop-balk[data-vast]{
  position:fixed;background:rgba(247,245,239,.92);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--lijn);
}
.kop-balk[data-vast] .kop-balk__rij{min-height:76px}
.kop-balk[data-vast] .merk img{height:56px}
.kop-balk[data-vast] .merk--licht{display:none}
.kop-balk[data-vast] .merk--donker{display:block}
.kop-balk[data-vast] .menu > a,.kop-balk[data-vast] .menu__knop{color:var(--inkt)}
.kop-balk[data-vast] .menu > a:hover,.kop-balk[data-vast] .menu__knop:hover,
.kop-balk[data-vast] .menu__uitklap:hover{background:var(--bot-diep)}
.kop-balk[data-vast] .menu > a[aria-current=page],.kop-balk[data-vast] .menu__knop[aria-current=page]{color:var(--rood);background:var(--rood-tint)}
.kop-balk[data-vast] .menu__pijl{color:var(--grijs-licht)}
.kop-balk[data-vast] .kop-bel{color:var(--inkt)}
.kop-balk[data-vast] .kop-bel svg{color:var(--rood)}
.kop-balk[data-vast] .kop-bel:hover{background:var(--bot-diep)}
.kop-balk[data-vast] .hamburger{border-color:var(--lijn);background:var(--wit);color:var(--inkt)}

@media (max-width:1320px){.kop-bel span{display:none}}
@media (max-width:1140px){
  .hamburger{display:inline-flex}
  .merk{margin-right:0}
  .kop-bel{display:none}
  .menu{
    display:none;position:fixed;left:0;right:0;top:var(--balkhoogte,92px);bottom:0;
    overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:.1rem;
    background:var(--bot);border-top:1px solid var(--lijn);
    padding:.8rem var(--marge) calc(1.4rem + env(safe-area-inset-bottom));
  }
  .menu[data-open=true]{display:flex}
  html[data-menu-open=true] .kop-balk{background:var(--bot);backdrop-filter:none;box-shadow:0 1px 0 var(--lijn)}
  html[data-menu-open=true] .merk--licht{display:none}
  html[data-menu-open=true] .merk--donker{display:block}
  html[data-menu-open=true] .hamburger{border-color:var(--lijn);background:var(--wit);color:var(--inkt)}
  .menu > a,.menu__knop{padding:.9em 1em;font-size:1.06rem;color:var(--inkt)}
  .menu > a:hover,.menu__knop:hover{background:var(--bot-diep)}
  .menu > a[aria-current=page],.menu__knop[aria-current=page]{color:var(--rood);background:var(--rood-tint)}
  .menu__pijl{color:var(--grijs-licht)}
  .menu__uitklap{flex-direction:column;align-items:stretch}
  .menu__knop + .menu__pijl{position:absolute;right:.4rem;top:7px;width:46px;height:46px;margin:0}
  .menu__paneel{
    position:static;width:auto;border-radius:0;box-shadow:none;padding:0 0 .4rem .4rem;background:none;
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .menu__uitklap[data-open=true] > .menu__paneel{display:block}
  .menu__paneel ul{grid-template-columns:1fr}
  .menu__paneel li b,.menu__paneel li small{white-space:normal}
  .menu__paneel li a:hover{background:var(--wit)}
  .menu__voet{flex-direction:column;align-items:flex-start;gap:.3rem}
  .menu__voet-la{
    display:flex;flex-direction:column;gap:.7rem;margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--lijn);
  }
  .menu__bel{display:flex;align-items:center;gap:.7rem;text-decoration:none;padding:.35rem 0;color:var(--inkt)}
  .menu__bel svg{width:18px;height:18px;color:var(--rood);flex:none}
  .menu__bel b{display:block;font-weight:700}
  .menu__bel small{display:block;font-size:.84rem;color:var(--grijs-licht)}
  .menu__voet-la .knop{width:100%}
}
@media (max-width:620px){
  .kop-balk__rij{min-height:76px}
  .merk img{height:46px}
  .kop-balk[data-vast] .merk img{height:42px}
  .knop--kop{padding:.8em 1.05em;font-size:.9rem}
  .hamburger{width:42px;height:42px}
}
@media (max-width:420px){
  .merk img,.kop-balk[data-vast] .merk img{height:38px}
  .knop--kop{padding:.72em .85em;font-size:.83rem}
}

/* ---------- De gekleurde kop --------------------------------------------- */
.kleurkop{
  position:relative;border-radius:0 0 var(--rond-xl) var(--rond-xl);
  background:var(--verloop);background-color:var(--rood);color:#fff;overflow:hidden;isolation:isolate;
}
.kleurkop__sterren{
  position:absolute;top:clamp(-30px,1vw,10px);right:clamp(-60px,2vw,10px);
  width:clamp(240px,32vw,520px);color:rgba(255,255,255,.13);z-index:0;pointer-events:none;
}
/* Een rij tentkappen langs de onderrand, heel licht. */
.kleurkop__nok{
  position:absolute;left:0;right:0;bottom:0;height:44px;color:rgba(255,255,255,.16);
  z-index:0;pointer-events:none;overflow:hidden;
}
.kleurkop__nok svg{width:1520px;max-width:none;height:44px}
.kleurkop > .wrap{position:relative;z-index:1}

.held{padding-block:clamp(130px,15vw,184px) clamp(74px,9vw,122px);text-align:center}
.held .pil{margin-bottom:1.3rem}
.held h1{color:#fff}
.held .lood{margin:1.35rem auto 0;max-width:52ch}
.held .knoprij{margin-top:2.1rem;justify-content:center}
.held__troeven{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.9rem;margin-top:1.7rem;
  font-size:.96rem;font-weight:600;color:rgba(255,255,255,.95);
}
.held__troeven li{display:flex;align-items:center;gap:.45rem}
.held__troeven svg{width:17px;height:17px;color:var(--goud);flex:none}

/* De foto die half over de onderrand van de kop valt. */
.heldfoto{margin-top:calc(-1 * clamp(52px,7vw,104px));position:relative;z-index:2}
.heldfoto__raam{
  border-radius:var(--rond-xl);overflow:hidden;background:var(--bot-diep);
  box-shadow:var(--schaduw-diep);aspect-ratio:16/7;
}
.heldfoto__raam picture,.heldfoto__raam img{width:100%;height:100%}
.heldfoto__raam img{object-fit:cover}
@media (max-width:700px){.heldfoto__raam{aspect-ratio:4/3}}

/* Paginakop van de binnenpagina's: dezelfde kleurkop, lager. */
.paginakop{padding-block:clamp(120px,13vw,150px) clamp(48px,6vw,76px)}
.paginakop h1{color:#fff;max-width:18ch}
.paginakop .lood{margin-top:1rem}
.kruimels{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.87rem;color:rgba(255,255,255,.72);margin:0 0 1.1rem}
.kruimels a{text-decoration:none;color:rgba(255,255,255,.92)}
.kruimels a:hover{color:#fff}
.kruimels li + li::before{content:"/";margin-right:.4rem;color:rgba(255,255,255,.45)}
/* De lijntekening rechtsonder in de kop. Met .kleurkop ervoor, anders wint de
   algemene .schets-regel verderop van de breedte hier. */
.kleurkop .paginakop__schets{
  position:absolute;right:clamp(24px,7vw,120px);bottom:clamp(30px,4vw,64px);
  width:clamp(120px,15vw,200px);color:rgba(255,255,255,.4);z-index:0;
}
@media (max-width:860px){.kleurkop .paginakop__schets{display:none}}

/* ---------- Sociale proef ------------------------------------------------ */
.proef{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
.proef h2{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2}
.proef p{margin-top:.6rem;color:var(--grijs);font-size:.98rem}
.klanten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,46px)}
.klanten li{flex:none}
.klanten img{
  height:clamp(58px,6.4vw,84px);width:auto;
  filter:grayscale(1);opacity:.6;transition:filter .2s ease,opacity .2s ease;
}
.klanten li:hover img{filter:none;opacity:1}
@media (max-width:860px){.proef{grid-template-columns:1fr}.klanten{justify-content:flex-start;gap:26px}}

/* ---------- Kaarten ------------------------------------------------------ */
.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.kaarten--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kaarten--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kaart{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--wit);border-radius:var(--rond);text-decoration:none;
  box-shadow:var(--schaduw);transition:transform .2s ease,box-shadow .2s ease;
}
.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-diep)}
.kaart__beeld{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bot-diep)}
.kaart__beeld picture{width:100%;height:100%}
.kaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kaart:hover .kaart__beeld img{transform:scale(1.045)}
.kaart__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2vw,26px)}
.kaart h3{font-size:1.24rem;margin-bottom:.4rem}
.kaart p{color:var(--grijs);font-size:.97rem;margin-bottom:1rem;line-height:1.5}
.kaart .tekstlink{margin-top:auto;align-self:flex-start}
.kaart__label{
  position:absolute;top:14px;left:14px;padding:.3em .8em;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--inkt);font-size:.78rem;font-weight:700;
  backdrop-filter:blur(6px);
}
@media (max-width:1050px){.kaarten--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kaarten,.kaarten--4,.kaarten--2{grid-template-columns:1fr}}

/* ---------- Tabbladen met een groot gekleurd paneel ---------------------- */
.tabrij{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem;
}
.tabrij button{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62em 1.05em;border:0;border-radius:999px;background:none;cursor:pointer;
  font-weight:700;font-size:.97rem;color:var(--grijs-licht);
  transition:background-color .15s ease,color .15s ease;
}
.tabrij button .schets{width:26px;height:auto;color:currentColor}
.tabrij button:hover{color:var(--inkt);background:var(--bot-diep)}
.tabrij button[aria-selected=true]{background:var(--rood-tint);color:var(--rood)}
@media (max-width:620px){
  .tabrij{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none}
  .tabrij::-webkit-scrollbar{display:none}
  .tabrij button{flex:none}
}

.paneel{
  position:relative;border-radius:var(--rond-xl);overflow:hidden;
  background:var(--verloop);background-color:var(--rood);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(26px,3.4vw,52px);
}
.paneel[hidden]{display:none}
.paneel__tekst{position:relative;z-index:1;max-width:44ch}
.paneel h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.028em;color:#fff;margin-bottom:.7rem}
.paneel p{color:rgba(255,255,255,.9)}
.paneel .vinkjes{margin:1.1rem 0 1.4rem}
.paneel .vinkjes li{color:rgba(255,255,255,.95)}
.paneel .vinkjes li::before{background:#fff}
.paneel__beeld{
  position:relative;z-index:1;border-radius:var(--rond);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 24px 60px -24px rgba(33,30,27,.6);
}
.paneel__beeld picture,.paneel__beeld img{width:100%;height:100%}
.paneel__beeld img{object-fit:cover}
.paneel__sterren{position:absolute;top:-22px;right:-30px;width:300px;color:rgba(255,255,255,.14);z-index:0}
@media (max-width:860px){.paneel{grid-template-columns:1fr}.paneel__beeld{aspect-ratio:16/10}}

/* ---------- Verhalenbaan: staande fotokaarten die naar rechts doorlopen -- */
/* De baan is zo breed als de pagina, maar begint precies waar de tekst
   begint. De laatste kaart loopt door voorbij de rand, zodat je ziet dat er
   meer is. */
.verhalen{position:relative}
.verhalen__baan{
  display:flex;gap:clamp(12px,1.3vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  /* De goot is precies de afstand waarop .wrap zijn tekst begint, zodat de
     eerste kaart onder de kop uitkomt. Ook als scroll-padding, anders schuift
     het scrollvak de eerste kaart meteen tegen de rand aan. */
  --goot:max(var(--marge), calc((100% - var(--wrap)) / 2 + var(--marge)));
  padding-inline:var(--goot);
  scroll-padding-inline:var(--goot);
  padding-block:4px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.verhalen__baan::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.verhalen__baan{scroll-behavior:auto}}

.verhaal{
  position:relative;flex:0 0 clamp(236px,25vw,310px);aspect-ratio:3/4;
  border-radius:var(--rond);overflow:hidden;background:var(--bot-diep);
  scroll-snap-align:start;text-decoration:none;color:#fff;
  box-shadow:var(--schaduw);transition:transform .2s ease,box-shadow .2s ease;
}
.verhaal:hover{transform:translateY(-3px);box-shadow:var(--schaduw-diep)}
.verhaal picture,.verhaal img{position:absolute;inset:0;width:100%;height:100%}
.verhaal img{object-fit:cover;transition:transform .5s ease}
/* Een staande uitsnede van een liggende foto valt soms verkeerd. Vier vaste
   standen, gezet met data-plek op de foto zelf. */
img[data-plek=links]{object-position:34% 50%}
img[data-plek=rechts]{object-position:66% 50%}
img[data-plek=boven]{object-position:50% 28%}
img[data-plek=onder]{object-position:50% 72%}
.verhaal:hover img{transform:scale(1.05)}
/* Twee sluiers: een sterke onderin voor het bijschrift en een lichte bovenin
   voor het pilletje. Zonder die laatste valt het label weg op een foto met
   lucht erboven. */
.verhaal::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(18,15,13,.94) 0%,rgba(18,15,13,.82) 20%,rgba(18,15,13,.38) 44%,rgba(18,15,13,0) 66%),
    linear-gradient(to bottom,rgba(18,15,13,.45) 0%,rgba(18,15,13,0) 24%);
}
/* De foto ligt onderop, de sluier erover, de teksten daar weer boven. */
.verhaal picture{z-index:0}
.verhaal::after{z-index:1}
.verhaal__pil,.verhaal__pijl,.verhaal__onder,.verhaal__inhoud{z-index:2}
.verhaal__pil{
  position:absolute;top:14px;left:14px;padding:.34em .85em;border-radius:999px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px);font-size:.8rem;font-weight:600;line-height:1.3;
}
.verhaal__pijl{
  position:absolute;top:13px;right:13px;display:grid;place-items:center;
  width:38px;height:38px;border-radius:12px;background:var(--rood);
  transition:background-color .16s ease,transform .16s ease;
}
.verhaal__pijl svg{width:18px;height:18px;stroke-width:2.2}
.verhaal:hover .verhaal__pijl{background:var(--rood-diep);transform:translate(2px,-2px)}
.verhaal__onder{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.6vw,22px)}
.verhaal__onder b{display:block;font-family:var(--kop);font-weight:800;font-stretch:92%;
  font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.15;letter-spacing:-.018em}
.verhaal__onder small{display:block;margin-top:.35rem;font-size:.86rem;line-height:1.38;color:rgba(255,255,255,.86)}

/* De laatste kaart is de oproep, in de kleuren van de site. */
.verhaal--oproep{background:var(--verloop);background-color:var(--rood)}
.verhaal--oproep::after{display:none}
.verhaal--oproep .verhaal__inhoud{
  position:absolute;inset:0;padding:clamp(20px,2vw,28px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.verhaal--oproep .verhaal__inhoud b{display:block;font-family:var(--kop);font-weight:800;font-stretch:92%;
  font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.1;letter-spacing:-.022em}
.verhaal--oproep .verhaal__inhoud small{display:block;margin-top:.5rem;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.88)}
.verhaal--oproep .verhaal__pijl{background:#fff;color:var(--rood)}
.verhaal--oproep:hover .verhaal__pijl{background:#fff}
.verhaal--oproep .paneel__sterren{position:absolute;top:-30px;right:-30px;width:210px;color:rgba(255,255,255,.16);z-index:0}

.verhalen__sturen{display:flex;gap:.5rem;margin-top:clamp(18px,2vw,26px)}
.verhalen__sturen button{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,opacity .15s ease;
}
.verhalen__sturen button:hover:not(:disabled){border-color:var(--inkt)}
.verhalen__sturen button:disabled{opacity:.35;cursor:default}
.verhalen__sturen svg{width:19px;height:19px}
@media (max-width:700px){
  .verhalen__sturen{display:none}
  /* Op een telefoon een bredere kaart, met de volgende net zichtbaar. */
  .verhaal{flex-basis:min(74vw,300px)}
}

/* ---------- Bento: cijfers en foto's in één raster ----------------------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.bento > *{border-radius:var(--rond);overflow:hidden;min-height:190px}
.bento__cijfer{
  background:var(--inkt-op);padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;justify-content:center;
}
.bento__cijfer b{
  display:block;font-family:var(--kop);font-weight:800;font-stretch:92%;
  font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--rood-op-donker);
}
.bento__cijfer b small{font-size:.44em;letter-spacing:0;margin-left:.14em}
.bento__cijfer span{display:block;margin-top:.7rem;color:var(--op-donker);font-size:.97rem;line-height:1.45}
.bento__foto{position:relative;background:var(--inkt-op)}
.bento__foto picture,.bento__foto img{width:100%;height:100%}
.bento__foto img{object-fit:cover}
.bento__breed{grid-column:span 2}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento__breed{grid-column:auto}.bento > *{min-height:0}.bento__foto{aspect-ratio:16/10}}

/* ---------- Twee kolommen: zonder en met -------------------------------- */
.weegschaal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.weeg{border-radius:var(--rond-xl);padding:clamp(26px,3vw,44px)}
.weeg--zonder{background:var(--wit);box-shadow:var(--schaduw)}
.weeg--met{position:relative;background:var(--verloop);background-color:var(--rood);color:#fff;overflow:hidden}
.weeg h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin-bottom:1.2rem}
.weeg--met h3{color:#fff}
.weeg ul{display:grid;gap:.85rem;position:relative;z-index:1}
.weeg li{display:flex;gap:.85rem;align-items:flex-start;line-height:1.5}
.weeg li svg{width:21px;height:21px;flex:none;margin-top:.15rem}
.weeg--zonder li{color:var(--grijs)}
.weeg--zonder li svg{color:#B4322F}
.weeg--met li{color:rgba(255,255,255,.95)}
.weeg--met li svg{color:var(--goud)}
.weeg--met .paneel__sterren{width:250px}
@media (max-width:760px){.weegschaal{grid-template-columns:1fr}}

/* ---------- Stappen ------------------------------------------------------ */
.stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);counter-reset:stap}
.stappen--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stap{background:var(--wit);border-radius:var(--rond);padding:clamp(22px,2.4vw,30px);box-shadow:var(--schaduw)}
.stap::before{
  counter-increment:stap;content:counter(stap);
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:1rem;border-radius:12px;
  background:var(--rood-tint);color:var(--rood);
  font:800 1.05rem var(--kop);font-stretch:92%;
}
.stap h3{font-size:1.15rem;margin-bottom:.4rem}
.stap p{color:var(--grijs);font-size:.96rem;line-height:1.5}
.sectie--donker .stap{background:var(--inkt-op);box-shadow:none}
.sectie--donker .stap::before{background:rgba(255,124,134,.16);color:var(--rood-op-donker)}
.sectie--donker .stap p{color:var(--op-donker)}
@media (max-width:980px){.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.stappen,.stappen--3{grid-template-columns:1fr}}

/* ---------- Werkgebied --------------------------------------------------- */
.locatie{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(12px,1.3vw,20px)}
.locatie__kaart{
  position:relative;overflow:hidden;border-radius:var(--rond-xl);
  background:var(--inkt);color:var(--op-donker);padding:clamp(28px,3.4vw,52px);
}
.locatie__kaart h2{color:#fff;margin-bottom:.9rem}
.locatie__adres{font-size:1.15rem;color:#fff;font-weight:700;line-height:1.5;margin:1.4rem 0 1.7rem}
.locatie__kaart .waterster{position:absolute;right:-80px;bottom:-80px;width:320px;opacity:.055;z-index:0}
.locatie__kaart > *{position:relative;z-index:1}
.locatie__beeld{position:relative;border-radius:var(--rond-xl);overflow:hidden;min-height:340px;background:var(--bot-diep)}
.locatie__beeld picture,.locatie__beeld img{position:absolute;inset:0;width:100%;height:100%}
.locatie__beeld img{object-fit:cover}
@media (max-width:860px){.locatie{grid-template-columns:1fr}.locatie__beeld{min-height:0;aspect-ratio:16/10}}

/* ---------- Duo: tekstvlak naast foto ----------------------------------- */
.duos{display:grid;gap:clamp(12px,1.3vw,20px)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);align-items:stretch}
.duo__tekst{
  background:var(--wit);border-radius:var(--rond-xl);padding:clamp(28px,3.4vw,52px);
  display:flex;flex-direction:column;justify-content:center;box-shadow:var(--schaduw);
}
.duo__tekst h2,.duo__tekst h3{font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:800;letter-spacing:-.026em;margin-bottom:.85rem}
.duo__tekst p{color:var(--grijs)}
.duo__tekst .tekstlink,.duo__tekst .knoprij{margin-top:1.1rem;align-self:flex-start}
.duo__beeld{position:relative;border-radius:var(--rond-xl);overflow:hidden;min-height:340px;background:var(--bot-diep)}
.duo__beeld picture,.duo__beeld img{position:absolute;inset:0;width:100%;height:100%}
.duo__beeld img{object-fit:cover}
.duo--om .duo__beeld{order:-1}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo--om .duo__beeld{order:0}
  .duo__beeld{min-height:0;aspect-ratio:4/3}
}

/* ---------- Lijntekeningen ---------------------------------------------- */
.schets{width:100%;height:auto;color:var(--grijs-licht)}
.sl{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Vinkjes ------------------------------------------------------ */
.vinkjes{display:grid;gap:.6rem;margin:1rem 0 1.4rem}
.vinkjes li{position:relative;padding-left:1.9rem}
.vinkjes li::before{
  content:"";position:absolute;left:0;top:.36em;width:17px;height:17px;border-radius:6px;background:var(--rood);
  -webkit-mask:url(../img/vinkje.svg) center/12px no-repeat;mask:url(../img/vinkje.svg) center/12px no-repeat;
}

/* ---------- Lopende tekst en zijkaart ----------------------------------- */
.indeling{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:960px){.indeling{grid-template-columns:1fr}}
.blad{background:var(--wit);border-radius:var(--rond-xl);padding:clamp(24px,3.4vw,52px);box-shadow:var(--schaduw)}
.tekst{max-width:66ch}
.tekst h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.4rem 0 .8rem}
.tekst h2:first-child{margin-top:0}
.tekst h3{font-size:1.2rem;margin:1.8rem 0 .5rem}
.tekst p,.tekst li{color:var(--grijs)}
.tekst strong{color:var(--inkt)}

.zijkaart{position:sticky;top:96px;background:var(--wit);border-radius:var(--rond-xl);padding:clamp(24px,2.4vw,32px);box-shadow:var(--schaduw)}
.zijkaart h2{font-size:1.3rem;margin-bottom:.6rem}
.zijkaart p{color:var(--grijs);font-size:.97rem}
.zijkaart .knop{width:100%;margin-top:1.1rem}
.belregel{
  display:flex;align-items:center;gap:.8rem;margin-top:.6rem;padding:.85rem .9rem;border-radius:14px;
  background:var(--bot);text-decoration:none;transition:background-color .15s ease;
}
.belregel svg{width:20px;height:20px;color:var(--rood);flex:none}
.belregel b{display:block;font-weight:700;font-size:1.04rem;line-height:1.2}
.belregel small{display:block;color:var(--grijs-licht);font-size:.84rem}
.belregel:hover{background:var(--bot-diep)}
.zijkaart__foto{border-radius:16px;overflow:hidden;margin:-4px 0 1.2rem;aspect-ratio:16/10}
.zijkaart__foto picture,.zijkaart__foto img{width:100%;height:100%}
.zijkaart__foto img{object-fit:cover}
.gegevens{display:grid;gap:.9rem;margin-top:1.2rem}
.gegevens dt{font-size:.8rem;font-weight:600;color:var(--grijs-licht)}
.gegevens dd{margin:0;font-weight:700}
.gegevens a{text-decoration:none}
.gegevens a:hover{color:var(--rood)}

/* ---------- Tabellen ----------------------------------------------------- */
.maten{width:100%;border-collapse:collapse;margin:1rem 0 .6rem;font-size:.97rem}
.maten caption{text-align:left;font-weight:700;padding-bottom:.7rem;color:var(--inkt)}
.maten th,.maten td{text-align:left;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.maten thead th{font-size:.82rem;font-weight:600;color:var(--grijs-licht)}
.maten tbody th{font-weight:700;color:var(--inkt);white-space:nowrap}
.maten td{color:var(--grijs);font-variant-numeric:tabular-nums}
.tabelschuif{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Foto's ------------------------------------------------------- */
.beeld{margin:0}
.beeld__omhulsel{position:relative;border-radius:var(--rond);overflow:hidden;background:var(--bot-diep)}
.beeld__omhulsel picture{width:100%;height:100%}
.beeld__omhulsel img{width:100%;height:100%;object-fit:cover}
.beeld figcaption{margin-top:.6rem;font-size:.88rem;color:var(--grijs-licht)}
.galerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin:1.6rem 0 .4rem}
.galerij .beeld__omhulsel{aspect-ratio:4/3}
.galerij--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr))}.galerij:not(.galerij--2) > :nth-child(3){display:none}}
.beeld--breed{margin:0 0 1.9rem}
.beeld--breed .beeld__omhulsel{aspect-ratio:16/9}

/* ---------- Vouwvragen --------------------------------------------------- */
.vragen{display:grid;gap:.6rem;max-width:80ch}
.vraag{background:var(--wit);border-radius:18px;overflow:hidden;box-shadow:var(--schaduw)}
.blad .vraag{background:var(--bot);box-shadow:none}
.vraag summary{
  display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.4rem;cursor:pointer;
  font-weight:700;font-size:1.05rem;list-style:none;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";flex:none;width:22px;height:22px;margin-left:auto;background:var(--rood);
  -webkit-mask:url(../img/neer.svg) center/22px no-repeat;mask:url(../img/neer.svg) center/22px no-repeat;
  transition:transform .2s ease;
}
.vraag[open] summary::after{transform:rotate(180deg)}
.vraag__antwoord{padding:0 1.4rem 1.3rem;color:var(--grijs)}
.vraag__antwoord p + p{margin-top:.7rem}

/* ---------- Tentwijzer --------------------------------------------------- */
.wijzer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(12px,1.3vw,20px);
}
.wijzer__keuzes{background:var(--wit);border-radius:var(--rond-xl);padding:clamp(24px,3vw,40px);box-shadow:var(--schaduw)}
.wijzer__uitkomst{
  background:var(--wit);border-radius:var(--rond-xl);padding:clamp(22px,2.6vw,36px);
  display:flex;flex-direction:column;box-shadow:var(--schaduw);
}
.wijzer__plattegrond{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:240px;
  background:var(--bot);border-radius:var(--rond);padding:clamp(10px,1.4vw,20px);
}
.wijzer__plattegrond svg{width:100%;height:auto;max-height:340px}
.wijzer__advies{margin-top:1.3rem}
.wijzer__advies h3{font-size:1.35rem;margin-bottom:.5rem}
.wijzer__advies p{color:var(--grijs);font-size:.97rem;line-height:1.5}
.wijzer__cijfers{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.wijzer__cijfers span{
  display:inline-flex;align-items:baseline;gap:.35rem;padding:.32em .8em;border-radius:999px;
  background:var(--bot);font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.wijzer__cijfers b{font-weight:800}
.wijzer__regel{
  margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px solid var(--lijn);
  font-size:.9rem;color:var(--grijs-licht);
}
@media (max-width:900px){.wijzer{grid-template-columns:minmax(0,1fr)}}

/* De plattegrond zelf */
.pg-doek{fill:#FFFFFF;stroke:#3A342D;stroke-width:2.2}
.pg-nok{stroke:#CFC7BB;stroke-width:1.4;fill:none}
.pg-mast{fill:#8A8278}
.pg-mens{fill:var(--rood);opacity:.85}
.pg-maat{stroke:var(--inkt);stroke-width:1.2;fill:none}
.pg-maattekst{font:600 15px var(--tekst);fill:var(--inkt)}
.pg-grond{fill:var(--bot-diep)}

.keuzegroep{border:0;margin:0 0 1.4rem;padding:0}
.keuzegroep:last-of-type{margin-bottom:0}
.keuzegroep legend{font-weight:700;font-size:.95rem;margin-bottom:.6rem;padding:0}
.keuzegroep legend small{font-weight:500;color:var(--grijs-licht);margin-left:.3rem}
.keuzeknoppen{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.keuzeknoppen label{position:relative}
.keuzeknoppen input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.keuzeknoppen span{
  display:inline-block;padding:.55em .95em;border-radius:999px;border:1.5px solid var(--lijn);background:var(--wit);
  font-weight:600;font-size:.93rem;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .14s ease,background-color .14s ease,color .14s ease;
}
.keuzeknoppen label:hover span{border-color:var(--inkt)}
.keuzeknoppen input:checked + span{background:var(--inkt);border-color:var(--inkt);color:#fff}
.keuzeknoppen input:focus-visible + span{outline:2.5px solid var(--rood);outline-offset:2px}
.schuif{display:flex;align-items:center;gap:1rem}
.schuif input[type=range]{flex:1;accent-color:var(--rood);min-width:0}
.schuif output{
  min-width:4.6ch;text-align:center;font-family:var(--kop);font-weight:800;font-stretch:92%;
  font-size:1.6rem;font-variant-numeric:tabular-nums;
}

/* ---------- Rekenhulp hekwerk ------------------------------------------- */
.rekenhulp{background:var(--bot);border-radius:var(--rond);padding:clamp(22px,2.8vw,36px);margin:1.8rem 0}
.rekenhulp h3{font-size:1.25rem;margin-bottom:.3rem}
.rekenhulp > p{color:var(--grijs);font-size:.96rem;margin-bottom:1.2rem}
.rekenhulp__uit{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1.4rem;
  padding-top:1.3rem;border-top:1px solid var(--lijn);
}
.rekenhulp__uit div b{
  display:block;font-family:var(--kop);font-weight:800;font-stretch:92%;font-size:1.9rem;
  line-height:1.1;font-variant-numeric:tabular-nums;color:var(--rood);
}
.rekenhulp__uit div span{font-size:.88rem;color:var(--grijs-licht)}
@media (max-width:520px){.rekenhulp__uit{grid-template-columns:1fr 1fr}}

/* ---------- Formulier ---------------------------------------------------- */
.formulier{display:grid;gap:clamp(14px,1.6vw,22px)}
.formblok{background:var(--wit);border-radius:var(--rond-xl);padding:clamp(24px,3vw,44px);box-shadow:var(--schaduw)}
.formblok > h2{font-size:1.32rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.75rem}
.formblok > h2 i{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:var(--rood-tint);color:var(--rood);font:800 .92rem var(--kop);font-stretch:92%;font-style:normal;
}
.formblok > p{color:var(--grijs);font-size:.96rem;margin-bottom:1.3rem}
.formblok[hidden]{display:none}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.6rem}
@media (max-width:560px){.tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tegel{position:relative;display:block}
.tegel input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tegel > span{
  display:flex;flex-direction:column;gap:.3rem;height:100%;padding:1rem;border-radius:16px;
  background:var(--bot);border:1.5px solid transparent;cursor:pointer;min-width:0;
  transition:border-color .14s ease,background-color .14s ease;
}
.tegel .schets{width:56px;color:var(--grijs-licht);margin-bottom:.2rem}
.tegel b{font-weight:700;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.tegel small{color:var(--grijs-licht);font-size:.86rem;line-height:1.35;overflow-wrap:break-word}
.tegel:hover > span{border-color:var(--inkt)}
.tegel input:checked + span{border-color:var(--rood);background:var(--rood-tint)}
.tegel input:checked + span .schets{color:var(--rood)}
.tegel input:focus-visible + span{outline:2.5px solid var(--rood);outline-offset:2px}

.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
@media (max-width:560px){.velden{grid-template-columns:1fr}}
.veld--breed{grid-column:1/-1}
.veld label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.4rem}
.veld label small{font-weight:400;color:var(--grijs-licht)}
.veld label abbr{color:var(--rood);text-decoration:none;margin-left:.15rem}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.85em .95em;border-radius:12px;border:1.5px solid var(--lijn);background:var(--bot);
  transition:border-color .14s ease,background-color .14s ease;
}
.veld textarea{min-height:130px;resize:vertical}
.veld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23726C64' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;
}
.veld input:hover,.veld textarea:hover,.veld select:hover{border-color:#CFC8BC}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--inkt);background:var(--wit)}
.veld ::placeholder{color:#8F887F}
.veld[data-fout] input,.veld[data-fout] textarea,.veld[data-fout] select{border-color:var(--rood)}
.veld__fout{display:none;margin-top:.35rem;font-size:.87rem;font-weight:600;color:var(--rood)}
.veld[data-fout] .veld__fout{display:block}
.spamval{position:absolute;left:-9999px}

.vink{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.95rem;color:var(--grijs)}
.vink input{
  appearance:none;-webkit-appearance:none;flex:none;width:23px;height:23px;margin:.05rem 0 0;border-radius:7px;
  border:1.5px solid #BDB6AC;background:var(--wit);display:grid;place-content:center;cursor:pointer;
}
.vink input::before{
  content:"";width:12px;height:12px;background:#fff;transform:scale(0);transition:transform .12s ease;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
}
.vink input:checked{background:var(--rood);border-color:var(--rood)}
.vink input:checked::before{transform:scale(1)}
.vink a{color:var(--rood)}
.vink[data-fout] input{border-color:var(--rood)}
.formulier__verzend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.melding{display:none;padding:1rem 1.2rem;border-radius:14px;background:var(--rood-tint);color:var(--rood-diep);font-weight:600}
.melding[data-zichtbaar]{display:block}

/* ---------- Slotband en voet in één donker blok -------------------------- */
.slot{background:var(--inkt);color:var(--op-donker);padding-block:clamp(56px,7vw,96px) 26px;position:relative;overflow:hidden}
.slot__sterren{position:absolute;top:-40px;right:-40px;width:clamp(240px,26vw,420px);color:rgba(255,255,255,.055)}
.slot > .wrap{position:relative;z-index:1}
.slotkop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.slotkop h2{color:#fff}
.slotkop p{color:var(--op-donker);margin-top:.9rem;max-width:44ch}
.slotkop .knoprij{justify-content:flex-end}
@media (max-width:860px){.slotkop{grid-template-columns:1fr}.slotkop .knoprij{justify-content:flex-start}}

.voet__rij{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:clamp(26px,4vw,56px);
  margin-top:clamp(48px,6vw,84px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--inkt-lijn);
}
.voet__merk img{height:72px;width:auto;margin-bottom:1.2rem}
.voet__merk p{max-width:34ch;font-size:.96rem}
.slot h2.voetkop{font:600 .82rem var(--tekst);color:#9C958C;margin:0 0 .9rem;letter-spacing:.02em;text-transform:uppercase}
/* Op een breed scherm staat alles gewoon open en is de samenvatting niets meer
   dan het kopje. */
.voetblok > summary{list-style:none;cursor:default}
.voetblok > summary::-webkit-details-marker{display:none}
.voetblok > summary::after{content:none}
.voet ul{display:grid;gap:.1rem}
.voet a{text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:.6rem;padding-block:.32rem;font-size:.97rem}
.voet a:hover{color:var(--rood-op-donker)}
.voet a svg{width:16px;height:16px;color:#9C958C;flex:none}
.voet__onder{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;margin-top:clamp(36px,4.6vw,60px);
  padding-top:22px;border-top:1px solid var(--inkt-lijn);font-size:.86rem;color:#9C958C;
}
.voet__onder a{color:#CFC8BE;padding:0;font-size:.86rem}
@media (max-width:900px){.voet__rij{grid-template-columns:1fr 1fr}.voet__merk{grid-column:1/-1}}
/* Op een telefoon werd de voet anderhalf scherm lang. De drie lijsten klappen
   daar dicht; zonder JavaScript staan ze gewoon open, dus er verdwijnt niets. */
@media (max-width:700px){
  .voet__rij{grid-template-columns:1fr;gap:0;margin-top:clamp(34px,5vw,48px);padding-top:clamp(26px,4vw,38px)}
  .voet__merk{margin-bottom:1.6rem}
  .voet__merk img{height:60px;margin-bottom:.9rem}
  .voetblok{border-top:1px solid var(--inkt-lijn)}
  .voetblok > summary{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding-block:1.05rem;cursor:pointer;
  }
  .slot .voetblok h2.voetkop{margin:0;color:#fff;font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:700}
  .voetblok > summary::after{
    content:"";flex:none;width:20px;height:20px;background:var(--rood-op-donker);
    -webkit-mask:url(../img/neer.svg) center/20px no-repeat;mask:url(../img/neer.svg) center/20px no-repeat;
    transition:transform .2s ease;
  }
  .voetblok[open] > summary::after{transform:rotate(180deg)}
  /* De contactgegevens klappen niet, dus daar hoort geen pijltje of vingertje. */
  .voetblok[data-altijd-open] > summary{cursor:default}
  .voetblok[data-altijd-open] > summary::after{content:none}
  .voetblok > ul{padding-bottom:1rem}
  .voet__onder{flex-direction:column;align-items:flex-start;text-align:left;margin-top:1.8rem}
}

/* ---------- Makersband --------------------------------------------------- */
/* De regel "website gemaakt door" stond klein en rechts onder in de voet. Hier
   krijgt hij een eigen band in het verloop van de kop, gecentreerd. */
.maker{
  background:var(--verloop-plat);background-color:var(--rood);color:#fff;
  padding-block:clamp(15px,1.7vw,21px);text-align:center;
  font-size:.95rem;font-weight:600;letter-spacing:.005em;
}
.maker a{
  font-weight:800;text-decoration:none;color:#fff;
  border-bottom:1.5px solid rgba(255,255,255,.5);
  transition:border-color .15s ease;
}
.maker a:hover{border-bottom-color:#fff}
@media (max-width:520px){.maker{font-size:.9rem}}

/* ---------- Kleine hulpklassen ------------------------------------------ */
.ruimte-boven{margin-top:clamp(28px,3.4vw,44px)}
.ruimte-boven-s{margin-top:1.1rem}
.fout404{min-height:44vh;display:flex;align-items:center}