/* ==========================================================================
   Estateshot - statisch prototype
   Eén lettertype: Public Sans. Lichte basis, teal accent, donker alleen
   in de voettekst en in één afsluitende band.
   ========================================================================== */

:root{
  --wit:#FFFFFF;
  --papier:#F6F7F8;      /* zacht koel wit voor afwisselende secties */
  --tint:#ECF5F3;        /* lichte tealwaas */
  --tint-2:#DCEDEA;

  --inkt:#14211F;
  --inkt-2:#3D4E4B;
  --inkt-3:#5A6A67;
  --lijn:#E1E5E6;
  --lijn-2:#C6CFCF;

  --teal:#0F6E6A;
  --teal-diep:#0A4B48;
  --teal-licht:#2FA89F;

  --nacht:#0D1A19;       /* alleen voet en slotband */
  --nacht-2:#152423;
  --nacht-lijn:#283634;

  --ok-waas:#E2F1EB;
  --ok-inkt:#1C5637;
  --let-waas:#FBF0DC;
  --let-inkt:#78500D;

  --radius:6px;
  --radius-lg:10px;
  --schaduw:0 1px 2px rgba(20,33,31,.04), 0 12px 32px rgba(20,33,31,.07);
  --wrap:1220px;

  --sans:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wit);color:var(--inkt);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--teal-diep)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- typografie ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;margin:0;text-wrap:balance;color:var(--inkt)}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.1vw,40px);line-height:1.12;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.015em}
h4{font-size:15px;font-weight:700;letter-spacing:0}
p{margin:0}
/* het Bright River-gebaar: één zinsdeel in de accentkleur */
.accent{color:var(--teal)}
.cijfer{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);
}
.eyebrow--op{color:#7FD8CE}
.lede{font-size:18.5px;line-height:1.6;color:var(--inkt-2);max-width:58ch}
.lede--op{color:#E6EDEC}
.klein{font-size:14px;color:var(--inkt-3)}
.klein--op{color:#FFFFFF}

/* --- vlakken ------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px}
.vlak{padding-block:clamp(52px,6.2vw,96px)}
.vlak--papier{background:var(--papier)}
.vlak--tint{background:var(--tint)}
.vlak--krap{padding-block:clamp(30px,3.6vw,48px)}
.vlak--nacht{background:var(--nacht);color:#FFFFFF}
.vlak--nacht h1,.vlak--nacht h2,.vlak--nacht h3{color:#FFFFFF}

.rij{display:grid;gap:22px}
.rij-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rij-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rij-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rij-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:900px){.rij-3,.rij-4{grid-template-columns:repeat(2,minmax(0,1fr))}.rij-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:580px){.rij-2,.rij-3,.rij-4{grid-template-columns:minmax(0,1fr)}}

/* --- beeld --------------------------------------------------------------- */
.beeld{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#DDE3E3}
.beeld img{width:100%;height:100%;object-fit:cover;color:transparent}
.beeld--3x2{aspect-ratio:3/2}
.beeld--4x3{aspect-ratio:4/3}
.beeld--16x9{aspect-ratio:16/9}
.beeld--1x1{aspect-ratio:1/1}
.beeld--hoog{aspect-ratio:4/5}
.beeld--rand{box-shadow:0 0 0 6px #fff, var(--schaduw)}
.beeld__label{
  position:absolute;left:12px;top:12px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(13,26,25,.8);padding:6px 11px;border-radius:99px;
}
.beeld__label--teal{background:var(--teal)}
.beeld__bijschrift{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 14px 12px;
  background:linear-gradient(to top,rgba(13,26,25,.88),rgba(13,26,25,0));
  color:#fff;font-size:13.5px;font-weight:700;
}
.beeld--voor img{filter:saturate(.6) brightness(.85) contrast(.9)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* collage in de hero, in plaats van een volvlaks foto */
.collage{position:relative;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:12px}
.collage > :nth-child(1){grid-row:span 2}
.zwever{
  position:absolute;left:-26px;bottom:34px;z-index:3;background:var(--wit);
  border-radius:var(--radius);box-shadow:var(--schaduw);padding:14px 18px;
  display:flex;gap:18px;align-items:center;
}
.zwever b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.zwever span{display:block;font-size:12px;color:var(--inkt-3)}
@media (max-width:940px){.zwever{position:static;margin-top:12px}}

/* --- kop ----------------------------------------------------------------- */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid var(--lijn)}
.kop__in{max-width:var(--wrap);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.merk{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--inkt)}
.merk svg{flex:0 0 auto;display:block}
.merk__naam{font-size:21px;font-weight:800;letter-spacing:-.035em;line-height:1}
.menu{display:flex;gap:24px;flex:1 1 auto;min-width:0;font-size:15px;font-weight:600}
.menu a{color:var(--inkt-2);text-decoration:none}
.menu a:hover,.menu a[aria-current="page"]{color:var(--teal)}
@media (max-width:860px){
  .kop__in{gap:14px}
  .menu{order:3;flex-basis:100%;width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  .merk{flex:1 1 auto}
}
@media (max-width:470px){.kop__in .knop{flex:1 1 auto}.merk{flex-basis:100%}}

/* --- knoppen ------------------------------------------------------------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--teal);color:#fff;border:2px solid var(--teal);
  padding:12px 22px;border-radius:var(--radius);font-weight:700;font-size:15.5px;
  text-decoration:none;cursor:pointer;min-height:48px;letter-spacing:-.005em;
}
.knop:hover{background:var(--teal-diep);border-color:var(--teal-diep);color:#fff}
.knop--rand{background:transparent;color:var(--inkt);border-color:var(--lijn-2)}
.knop--rand:hover{background:var(--inkt);border-color:var(--inkt);color:#fff}
.knop--randop{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.knop--randop:hover{background:#fff;color:var(--nacht);border-color:#fff}
.knop--wit{background:#fff;color:var(--teal-diep);border-color:#fff}
.knop--wit:hover{background:var(--tint);color:var(--teal-diep);border-color:var(--tint)}
.knop--klein{padding:9px 16px;font-size:14px;min-height:40px}
.knop--breed{width:100%}
.knop[disabled]{opacity:.4;cursor:not-allowed}

/* --- blokken ------------------------------------------------------------- */
.blok{background:var(--wit);color:var(--inkt);border:1px solid var(--lijn);border-radius:var(--radius-lg);padding:26px}
.blok h1,.blok h2,.blok h3{color:var(--inkt)}
.blok .klein{color:var(--inkt-3)}
.blok .lede{color:var(--inkt-2)}
.blok--zwevend{border-color:transparent;box-shadow:var(--schaduw)}
.blok--tint{background:var(--tint);border-color:transparent}
.blok--teal{background:var(--teal-diep);border-color:var(--teal-diep);color:#fff}
.blok--teal h2,.blok--teal h3{color:#fff}
.blok--teal .klein,.blok--teal p{color:#E6EDEC}
.blok--teal .eyebrow{color:#7FD8CE}
.blok--nacht{background:var(--nacht);border-color:var(--nacht);color:#fff}
.blok--nacht h2,.blok--nacht h3{color:#fff}
.blok--nacht .klein,.blok--nacht p{color:#FFFFFF}
.blok--beeld{padding:0;overflow:hidden;display:flex;flex-direction:column}
.blok--beeld .blok__tekst{padding:22px}
.blok--kies{cursor:pointer;text-align:left;width:100%;display:flex;flex-direction:column;gap:9px}
.blok--kies:hover{border-color:var(--lijn-2)}
.blok--kies[aria-pressed="true"]{border:2px solid var(--teal);padding:25px;background:var(--tint)}
.blok__hoofd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.blok__titel{font-weight:700;font-size:17px}
.blok__prijs{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.blok ul{margin:4px 0 0;padding-left:19px;color:var(--inkt-2);font-size:15px;line-height:1.75}
.blok--teal ul,.blok--nacht ul{color:#fff}

.merkje{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.05em;
  padding:5px 12px;border-radius:99px;background:var(--tint-2);color:var(--teal-diep)}
.merkje--op{background:rgba(255,255,255,.2);color:#fff}
.merkje--ok{background:var(--ok-waas);color:var(--ok-inkt)}
.merkje--let{background:var(--let-waas);color:var(--let-inkt)}

.melding{display:flex;gap:12px;align-items:flex-start;background:var(--tint);color:var(--teal-diep);
  padding:14px 16px;border-radius:var(--radius);font-size:15px;border-left:3px solid var(--teal)}
.melding--amber{background:var(--let-waas);color:var(--let-inkt);border-left-color:#C89A4A}
.melding--op{background:var(--nacht-2);color:#fff;border-left-color:var(--teal-licht)}

/* --- kerncijfers --------------------------------------------------------- */
.kerncijfer{display:flex;flex-direction:column;gap:2px}
.kerncijfer b{font-weight:800;font-size:clamp(34px,3.6vw,50px);line-height:1;letter-spacing:-.04em;color:var(--teal)}
.kerncijfer span{font-size:14.5px;color:var(--inkt-2)}
.vlak--nacht .kerncijfer b,.vlak--nacht .kerncijfer span{color:#fff}

/* --- ingang (twee doelgroepen) ------------------------------------------- */
.ingang{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--nacht)}
.ingang img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.ingang::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,26,25,.92) 10%,rgba(13,26,25,.3) 72%)}
.ingang__in{position:relative;z-index:2;padding:28px;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:320px}
.ingang h3{color:#fff;font-size:25px}
.ingang p{color:#fff;font-size:15px;margin-top:8px;max-width:38ch}
.ingang .link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:#7FD8CE;font-weight:700;font-size:15px}

/* --- rolblokken ---------------------------------------------------------- */
.rol{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start;
  padding:30px 0;border-top:1px solid var(--lijn)}
.rol:first-of-type{border-top:none;padding-top:0}
.rol__wie{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);padding-top:7px}
.rol h3{font-size:24px;letter-spacing:-.025em}
.rol ul{margin:12px 0 0;padding-left:19px;color:var(--inkt-2);line-height:1.8}
@media (max-width:760px){.rol{grid-template-columns:minmax(0,1fr);gap:10px}.rol__wie{padding-top:0}}

/* --- garantieblok -------------------------------------------------------- */
.garantie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--lijn);border-radius:var(--radius-lg);overflow:hidden;background:var(--wit)}
.garantie__cel{padding:26px;border-left:1px solid var(--lijn);display:flex;gap:14px;align-items:flex-start}
.garantie__cel:first-child{border-left:none}
.garantie__cel svg{flex:0 0 auto;margin-top:2px}
.garantie__cel h4{margin-bottom:5px}
.garantie__cel p{font-size:14.5px;color:var(--inkt-2)}
@media (max-width:820px){.garantie{grid-template-columns:minmax(0,1fr)}
  .garantie__cel{border-left:none;border-top:1px solid var(--lijn)}
  .garantie__cel:first-child{border-top:none}}

/* --- tabellen ------------------------------------------------------------ */
.tabelwrap{overflow-x:auto}
.tabel{color:var(--inkt);width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.tabel th,.tabel td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--lijn)}
.tabel thead th{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3)}
.tabel td.r,.tabel th.r{text-align:right;font-variant-numeric:tabular-nums}
.tabel tfoot td{border-bottom:none;font-weight:700;background:var(--papier)}

/* --- vergelijking -------------------------------------------------------- */
.vergelijk{border:1px solid var(--lijn);border-radius:var(--radius-lg);overflow:hidden;background:var(--wit)}
.vergelijk table{width:100%;border-collapse:collapse;color:var(--inkt);min-width:580px}
.vergelijk th,.vergelijk td{padding:0;text-align:left}
.vergelijk thead th{padding:20px 16px 16px;vertical-align:bottom;border-bottom:1px solid var(--lijn);
  font-size:15px;font-weight:700;color:var(--inkt)}
.vergelijk thead th:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3)}
.vergelijk .kolom{text-align:center;width:160px}
.vergelijk .kolom small{display:block;font-weight:400;font-size:12.5px;color:var(--inkt-3);margin-top:3px}
.vergelijk .kolom--uit{background:var(--teal);color:#fff;border-bottom-color:var(--teal)}
.vergelijk .kolom--uit small{color:#DFF1EE}
.vergelijk .kolom--uit .merkje{margin-bottom:8px}
.vergelijk tbody td{padding:13px 16px;border-bottom:1px solid var(--lijn);font-size:15.5px}
.vergelijk tbody td:first-child{font-weight:500}
.vergelijk tbody .cel{text-align:center;width:160px}
.vergelijk tbody .cel--uit{background:var(--tint)}
.vergelijk tbody tr:last-child td{border-bottom:none}
.vergelijk tfoot td{padding:20px 16px;background:var(--papier);font-weight:700;font-size:15.5px;border-top:2px solid var(--inkt)}
.vergelijk tfoot .cel{text-align:center}
.vergelijk tfoot .cel--uit{background:var(--teal);color:#fff;border-top-color:var(--teal)}
.vergelijk tfoot .prijs{display:block;font-weight:800;font-size:25px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.vink{display:inline-flex;width:24px;height:24px;border-radius:99px;background:var(--teal);color:#fff;
  align-items:center;justify-content:center}
.cel--uit .vink{background:var(--teal-diep)}
.geenvink{display:inline-block;width:14px;height:2px;background:var(--lijn-2);vertical-align:middle;border-radius:2px}

/* --- staffel ------------------------------------------------------------- */
.staffel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--lijn);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--wit)}
.staffel__cel{padding:20px 22px;border-left:1px solid var(--lijn);color:var(--inkt)}
.staffel__cel:first-child{border-left:none}
.staffel__cel--aan{background:var(--tint)}
.staffel__bereik{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3)}
.staffel__cel--aan .staffel__bereik{color:var(--teal-diep)}
.staffel__prijs{display:block;font-weight:800;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.1;margin-top:8px}
.staffel__per{display:block;font-size:13px;color:var(--inkt-3);margin-top:2px}
@media (max-width:760px){.staffel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staffel__cel:nth-child(3){border-left:none}
  .staffel__cel:nth-child(n+3){border-top:1px solid var(--lijn)}}
@media (max-width:420px){.staffel{grid-template-columns:minmax(0,1fr)}
  .staffel__cel{border-left:none;border-top:1px solid var(--lijn)}
  .staffel__cel:first-child{border-top:none}}

/* --- formulier ----------------------------------------------------------- */
.veld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.veld label{font-size:13px;font-weight:700;color:var(--inkt-2)}
.veld input,.veld select,.veld textarea{background:var(--wit);border:1.5px solid var(--lijn-2);
  border-radius:var(--radius);padding:12px 14px;font-size:16px;width:100%;min-height:48px}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--teal)}
.veld textarea{min-height:92px;resize:vertical}
.keuze{color:var(--inkt);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border:1.5px solid var(--lijn);border-radius:var(--radius);cursor:pointer;background:var(--wit)}
.keuze:hover{border-color:var(--lijn-2)}
.keuze--aan{border-color:var(--teal);border-width:2px;padding:13.5px 15.5px;background:var(--tint)}
.keuze input{margin-top:4px;accent-color:var(--teal);width:18px;height:18px}
.keuze__t{display:block;font-size:15.5px;font-weight:700}
.keuze__s{display:block;font-size:14px;color:var(--inkt-3)}
.keuze--aan .keuze__s{color:var(--teal-diep)}
.keuzelijst{display:grid;gap:10px}

/* --- faq ----------------------------------------------------------------- */
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{cursor:pointer;padding:17px 0;font-weight:700;font-size:17px;display:flex;
  justify-content:space-between;gap:18px;list-style:none}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1;font-weight:700}
.vraag[open] summary::after{content:"\2013"}
.vraag p{padding:0 0 18px;color:var(--inkt-2);max-width:74ch}

/* --- configurator -------------------------------------------------------- */
.conf{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:24px;align-items:start}
@media (max-width:1020px){.conf{grid-template-columns:minmax(0,1fr)}}

.stappen{display:flex;gap:4px;overflow-x:auto;padding:0 0 14px}
.stappen__i{flex:0 0 auto;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
  color:var(--inkt-3);padding:9px 14px;border-radius:99px;background:none;border:1px solid transparent;
  cursor:pointer;white-space:nowrap}
.stappen__n{width:24px;height:24px;border-radius:99px;border:1.5px solid var(--lijn-2);
  display:grid;place-items:center;font-size:12px;font-weight:800}
.stappen__i[data-state="done"]{color:var(--inkt-2)}
.stappen__i[data-state="done"] .stappen__n{background:var(--teal);border-color:var(--teal);color:#fff}
.stappen__i[aria-current="true"]{color:var(--inkt);background:var(--wit);border-color:var(--lijn)}
.stappen__i[aria-current="true"] .stappen__n{border-color:var(--teal);color:var(--teal)}

.sleepvlak{border:2px dashed var(--lijn-2);border-radius:var(--radius-lg);padding:52px 22px;
  text-align:center;background:var(--papier)}
.sleepvlak--bezig{border-style:solid;border-color:var(--teal);background:var(--tint)}
.balk{height:8px;background:var(--lijn);border-radius:99px;overflow:hidden;margin:16px auto 0;max-width:380px}
.balk i{display:block;height:100%;width:0;background:var(--teal);transition:width .15s linear}

.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.tegel{position:relative;border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  background:var(--wit);cursor:pointer;padding:0;text-align:left;width:100%;display:block}
.tegel:hover{border-color:var(--lijn-2)}
.tegel--uit{opacity:.38}
.tegel__beeld{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:#DDE3E3}
.tegel__beeld img{width:100%;height:100%;object-fit:cover;color:transparent}
.tegel__info{display:block;padding:9px 11px 11px}
.tegel__naam{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tegel__sub{display:block;font-size:12px;color:var(--inkt-3)}
.tegel__merkjes{position:absolute;top:7px;left:7px;display:flex;gap:4px;flex-wrap:wrap;
  max-width:calc(100% - 14px);z-index:2}
.vlagje{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:99px;
  background:rgba(13,26,25,.82);color:#fff}
.vlagje--teal{background:var(--teal)}
.vlagje--amber{background:var(--let-inkt)}

/* prijspaneel: licht, met een tealkop */
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius-lg);
  position:sticky;top:96px;overflow:hidden;box-shadow:var(--schaduw)}
@media (max-width:1020px){.paneel{position:static}}
.paneel__hoofd{padding:20px;background:var(--teal-diep);color:#fff;display:flex;gap:14px;align-items:flex-start}
.paneel__groot{font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums}
.paneel__hoofd .klein,.paneel__hoofd .klein--op{color:#DFF1EE}
.paneel__body{padding:18px 20px}
.regel{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:4px 0;color:var(--inkt-2)}
.regel b{font-weight:700;color:var(--inkt)}
.regel .w{font-variant-numeric:tabular-nums;white-space:nowrap}
.regel--som{border-top:1px solid var(--lijn);margin-top:12px;padding-top:12px}
.totaal{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.totaal span:first-child{font-size:15px;font-weight:700;color:var(--inkt)}
.totaal .w{font-weight:800;font-size:30px;letter-spacing:-.04em;color:var(--inkt);font-variant-numeric:tabular-nums}

.teller{display:inline-flex;border:1.5px solid var(--lijn-2);border-radius:var(--radius);overflow:hidden;background:var(--wit)}
.teller button{width:42px;height:42px;background:var(--papier);border:none;cursor:pointer;font-size:19px;line-height:1}
.teller button:hover{background:var(--lijn)}
.teller span{min-width:46px;display:grid;place-items:center;font-variant-numeric:tabular-nums;font-weight:700}

.streep{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--lijn)}
.streep:first-of-type{border-top:none}
.streep__main{flex:1 1 auto;min-width:0}

.knoppenrij{display:flex;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--lijn);flex-wrap:wrap}
.knoppenrij__sp{flex:1 1 auto}

/* --- lade ---------------------------------------------------------------- */
.waas{position:fixed;inset:0;background:rgba(13,26,25,.55);z-index:60}
.lade{position:fixed;z-index:61;right:0;top:0;bottom:0;width:min(450px,100%);background:var(--wit);
  overflow-y:auto;padding:24px;box-shadow:-10px 0 40px rgba(20,33,31,.18)}
@media (max-width:580px){.lade{top:auto;left:0;border-radius:12px 12px 0 0;max-height:90vh}}
.speldvlak{color:var(--inkt);position:relative;border-radius:var(--radius);overflow:hidden;
  cursor:crosshair;aspect-ratio:3/2;background:#DDE3E3}
.speldvlak img{width:100%;height:100%;object-fit:cover;color:transparent}
.speld{position:absolute;width:22px;height:22px;border-radius:99px;background:var(--teal);
  border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2}

/* --- statuspad ----------------------------------------------------------- */
.pad{color:var(--inkt-3);display:flex;gap:0;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.pad li{flex:1 1 130px;border-top:4px solid var(--lijn);padding:13px 12px 0 0;font-size:13px;color:var(--inkt-3)}
.pad li.aan{border-color:var(--teal);color:var(--inkt-2)}
.pad li b{display:block;font-size:15px;color:var(--inkt);font-weight:700}

/* --- voet ---------------------------------------------------------------- */
.voet{background:var(--nacht);color:#FFFFFF;padding-block:52px 32px;font-size:15px}
.voet h4{color:#fff;margin:0 0 10px}
.voet a{color:#FFFFFF;text-decoration:none;display:block;padding:4px 0}
.voet a:hover{color:#7FD8CE}
.voet .merk{display:inline-flex;padding:0;color:#fff}
.voet .merk:hover{color:#fff}
.voet .merk__naam{color:#fff}
.voet__onder{border-top:1px solid var(--nacht-lijn);margin-top:32px;padding-top:20px;font-size:13.5px;
  color:#FFFFFF;display:flex;gap:18px;flex-wrap:wrap}

.verborgen{display:none!important}

/* --- rasters met een eigen breekpunt ------------------------------------- */
.hero-rij{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,4vw,60px);align-items:center}
@media (max-width:940px){.hero-rij{grid-template-columns:minmax(0,1fr);gap:32px}}
.dienstkop{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:46px;align-items:start}
@media (max-width:960px){
  .dienstkop{grid-template-columns:minmax(0,1fr);gap:28px}
  .dienstkop > div:first-child{padding-bottom:0!important}
  .dienstkop aside{position:static!important;margin-bottom:0!important}
}
.prijsvoet{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
@media (max-width:820px){.prijsvoet{grid-template-columns:minmax(0,1fr)}}