/* ======================================================================
   novadesk. — productsite (desk.duonova.nl)
   Huisstijl van duonova. (richting 07 "Maatje", stijl A): dezelfde tokens,
   letters, knoppen en pil. Wijzig je die in assets/css/duonova.css, kijk dan
   ook even hier.
   ====================================================================== */

@import url('lettertypen.css');

:root{
  --roest:#8F3A1C;
  --roest-diep:#6F2C13;
  --roest-licht:#B05329;
  --oranje:#F59120;
  --oranje-diep:#D2740E;
  --inkt:#2B1D18;
  --inkt-zacht:#6B5A50;
  --zacht:#EFE1D3;
  --zacht-diep:#E2CDB8;
  --creme:#F8EFE6;
  --papier:#F2E7DA;
  --wit:#FFFFFF;
  --groen:#2E7D4F;

  --inkt-rgb:43,29,24;
  --roest-rgb:143,58,28;
  --oranje-rgb:245,145,32;
  --creme-rgb:248,239,230;
  --lijn:rgba(var(--inkt-rgb),.11);
  --lijn-sterk:rgba(var(--inkt-rgb),.2);

  --kop:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --tekst:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --breed:1160px;
  --kier:24px;
  --rond:14px;
  --rond-kaart:22px;
  --schaduw:0 1px 2px rgba(var(--inkt-rgb),.04), 0 14px 38px rgba(var(--inkt-rgb),.07);
  --schaduw-op:0 2px 6px rgba(var(--inkt-rgb),.06), 0 22px 54px rgba(var(--inkt-rgb),.11);
  --soepel:.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  overflow-x:hidden;
  touch-action:manipulation;
}
body{
  font-family:var(--tekst);
  font-size:16px;
  line-height:1.7;
  color:var(--inkt);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body > main{flex:1 0 auto}
img,svg{display:block;max-width:100%}
a{color:var(--roest)}
:focus-visible{outline:2.5px solid var(--roest);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Typografie: precies als in assets/css/duonova.css. */
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--inkt)}
h1{font-size:clamp(38px,5.4vw,62px)}
h2{font-size:clamp(30px,3.6vw,42px)}
h3{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
p + p{margin-top:16px}
.groot{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--inkt-zacht)}
.grijs{color:var(--inkt-zacht)}
.label{font-size:11px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.16em;color:var(--inkt-zacht)}

/* Pil: de twee bolletjes van het beeldmerk. */
.pil{display:inline-flex;align-items:center;gap:12px;color:var(--roest);font-size:14px;font-weight:600;line-height:1.4}
.pil::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--roest);box-shadow:12px 0 0 var(--oranje);margin-right:12px}

/* Woordmerk. */
.merk{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.beeldmerk{width:36px;height:36px;border-radius:10px;background:var(--roest);display:flex;align-items:center;justify-content:center;gap:11.75%;flex-shrink:0}
.beeldmerk i{width:22%;aspect-ratio:1;border-radius:50%;display:block;background:var(--creme)}
.beeldmerk i:last-child{background:var(--oranje)}
.woordmerk{font-family:var(--kop);font-weight:700;font-size:23px;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:var(--roest)}
/* Twee kleuren, net als bij duonova.: het eerste deel in inkt, het tweede in roest. */
.woordmerk .nova{color:var(--inkt)}
.woordmerk .desk{color:var(--roest)}
.woordmerk .punt{color:var(--oranje)}

/* Raamwerk. */
.omhulsel{width:100%;max-width:var(--breed);margin:0 auto;padding:0 var(--kier)}
.omhulsel{padding-left:max(var(--kier),env(safe-area-inset-left));padding-right:max(var(--kier),env(safe-area-inset-right))}
section{padding:clamp(64px,8vw,112px) 0}
section.zacht{background:var(--zacht)}
section.papier{background:var(--papier)}
section.donker{background:var(--roest);color:var(--creme)}
section.donker h2,section.donker h3{color:var(--creme)}
section.donker .groot,section.donker .grijs{color:rgba(var(--creme-rgb),.8)}
section.donker .pil{color:var(--creme)}
section.donker .pil::before{background:var(--creme)}
.sectiekop{max-width:700px;margin-bottom:clamp(36px,4.5vw,60px)}
.sectiekop .pil{margin-bottom:18px}
.sectiekop h2{margin-bottom:16px}
.raster{display:grid;gap:clamp(18px,2vw,26px)}
.raster > *{min-width:0}
.raster.k2{grid-template-columns:repeat(2,1fr)}
.raster.k3{grid-template-columns:repeat(3,1fr)}
.raster.k4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.raster.k3,.raster.k4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.raster.k2,.raster.k3,.raster.k4{grid-template-columns:1fr}}

/* Knoppen (stijl A: kleine ronding, geen pil). */
.knop{
  -webkit-appearance:none;appearance:none;background:transparent;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:8px;
  font-family:var(--tekst);font-size:15px;font-weight:600;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color var(--soepel),border-color var(--soepel),color var(--soepel),transform var(--soepel);
}
@media (hover:hover){.knop:hover{transform:translateY(-2px)}}
.knop:active{transform:translateY(0)}
.knop.groen{background:var(--roest);color:var(--creme)}
@media (hover:hover){.knop.groen:hover{background:var(--roest-diep)}}
.knop.vol{background:var(--inkt);color:var(--creme)}
@media (hover:hover){.knop.vol:hover{background:var(--roest)}}
.knop.oranje{background:var(--oranje);color:var(--inkt)}
@media (hover:hover){.knop.oranje:hover{background:var(--oranje-diep);color:var(--creme)}}
.knop.rand{border-color:var(--lijn-sterk);color:var(--inkt)}
@media (hover:hover){.knop.rand:hover{border-color:var(--roest);color:var(--roest)}}
.knop.klein{padding:10px 18px;font-size:14px}
.knop.breed{width:100%}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pijl{font-weight:600;text-decoration:none;color:var(--roest);display:inline-flex;gap:8px;align-items:center;padding:14px 4px}
.pijl::after{content:"→";transition:transform var(--soepel)}
@media (hover:hover){.pijl:hover::after{transform:translateX(4px)}}

/* ---------------------------------------------------------------------
   Kop van de pagina
   --------------------------------------------------------------------- */
.kopbalk{position:sticky;top:0;z-index:20;background:rgba(var(--creme-rgb),.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--soepel)}
.kopbalk.gescrold{border-bottom-color:var(--lijn)}
.kopbalk .omhulsel{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.kopbalk nav{display:flex;align-items:center;gap:28px}
.kopbalk nav a:not(.knop){color:var(--inkt);text-decoration:none;font-size:15px;font-weight:500}
@media (hover:hover){.kopbalk nav a:not(.knop):hover{color:var(--roest)}}
@media (max-width:900px){.kopbalk nav a:not(.knop){display:none}}

/* ---------------------------------------------------------------------
   Held
   --------------------------------------------------------------------- */
.held{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px);overflow:hidden}
.held .omhulsel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.held h1{margin:22px 0 22px}
.held h1 em{font-style:normal;color:var(--roest)}
.held .groot{max-width:520px}
.held .knoppen{margin-top:32px}
.held-punten{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;list-style:none;font-size:14px;color:var(--inkt-zacht)}
.held-punten li{display:flex;align-items:center;gap:8px}
.held-punten li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oranje)}
@media (max-width:960px){.held .omhulsel{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   Productbeeld: een nagebouwd scherm van novadesk. in HTML en CSS
   --------------------------------------------------------------------- */
.scherm{
  position:relative;background:var(--wit);border-radius:18px;
  box-shadow:0 2px 4px rgba(var(--inkt-rgb),.05),0 30px 80px rgba(var(--inkt-rgb),.16);
  border:1px solid var(--lijn);overflow:hidden;font-size:13px;line-height:1.45;
}
.scherm-balk{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--lijn);background:var(--creme)}
.scherm-balk i{width:10px;height:10px;border-radius:50%;background:var(--zacht-diep)}
.scherm-balk > span{margin-left:12px;font-size:12px;color:var(--inkt-zacht)}
.scherm-binnen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);min-height:400px}
.lijst{border-right:1px solid var(--lijn);padding:10px 0;background:#FDFAF6}
.lijst-tabs{display:flex;gap:6px;padding:4px 12px 10px;flex-wrap:wrap}
.lijst-tabs b,.lijst-tabs span{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--zacht);color:var(--inkt-zacht)}
.lijst-tabs b{background:var(--inkt);color:var(--creme)}
.regel{display:grid;grid-template-columns:8px 1fr auto;gap:4px 10px;align-items:center;padding:10px 14px;border-left:3px solid transparent}
.regel.open{background:var(--wit);border-left-color:var(--roest)}
.regel .stip{width:8px;height:8px;border-radius:50%;background:var(--oranje)}
.regel .stip.wacht{background:var(--zacht-diep)}
.regel .stip.klaar{background:var(--groen)}
.regel strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regel small{grid-column:2;color:var(--inkt-zacht);font-size:11.5px}
.regel time{font-size:11px;color:var(--inkt-zacht)}
.gesprek{display:flex;flex-direction:column}
.gesprek-kop{padding:14px 18px;border-bottom:1px solid var(--lijn)}
.gesprek-kop small{color:var(--inkt-zacht);font-size:11.5px}
.gesprek-kop strong{display:block;font-family:var(--kop);font-size:15px;letter-spacing:-.01em}
.gesprek-acties{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.gesprek-acties span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;border:1px solid var(--lijn-sterk)}
.gesprek-acties span:first-child{background:var(--roest);border-color:var(--roest);color:var(--creme)}
.berichten{flex:1;border-bottom:1px solid var(--lijn);padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:
  radial-gradient(circle at 20% 10%,rgba(var(--oranje-rgb),.06),transparent 40%),var(--creme)}
.bericht{max-width:82%;padding:9px 12px;border-radius:14px;background:var(--wit);box-shadow:0 1px 2px rgba(var(--inkt-rgb),.06)}
.bericht b{display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--roest);margin-bottom:2px}
.bericht.desk{align-self:flex-end;background:var(--roest);color:var(--creme);border-bottom-right-radius:4px}
.bericht.desk b{color:rgba(var(--creme-rgb),.7)}
.bericht.melder{border-bottom-left-radius:4px}
.notitie{align-self:center;max-width:88%;background:#FFF6D8;border:1px dashed #E5C463;border-radius:10px;padding:7px 12px;font-size:12px;color:#6B5310}
.bijlage{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--creme);color:var(--inkt)}
.bijlage .icoon{width:28px;height:32px;border-radius:5px;background:var(--roest);color:var(--creme);display:grid;place-items:center;font-size:9px;font-weight:700}
.bijlage small{display:block;color:var(--inkt-zacht);font-size:11px}
.voortgang{height:4px;border-radius:2px;background:var(--zacht);margin-top:5px;overflow:hidden}
.voortgang i{display:block;height:100%;width:100%;background:var(--groen)}
.reactievak{margin:14px 16px 16px;padding:6px 6px 6px 14px;gap:12px;border:1px solid var(--lijn-sterk);border-radius:10px;color:var(--inkt-zacht);display:flex;justify-content:space-between;align-items:center;background:var(--wit)}
.reactievak span:last-child{flex-shrink:0;font-weight:600;font-size:12px;color:var(--creme);background:var(--roest);padding:6px 12px;border-radius:7px}
.zweef{position:absolute;background:var(--wit);border-radius:14px;box-shadow:var(--schaduw-op);border:1px solid var(--lijn);padding:12px 14px;font-size:12.5px;line-height:1.4}
.zweef strong{display:block;font-size:13px}
.zweef.sla{right:-14px;bottom:72px;display:flex;gap:10px;align-items:center}
.zweef.sla .ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--groen) 0 72%,var(--zacht) 0);display:grid;place-items:center}
.zweef.sla .ring::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--wit)}
.scherm-wrap{position:relative;padding:0 18px 0 0}
@media (max-width:640px){
  .scherm-binnen{grid-template-columns:1fr}
  .lijst{display:none}
  .zweef.sla{position:relative;right:auto;bottom:auto;margin:-22px 12px 0 auto;width:max-content}
  .scherm-wrap{padding:0}
}

/* ---------------------------------------------------------------------
   Inhoudsblokken
   --------------------------------------------------------------------- */
.drie-punten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);border-top:1px solid var(--lijn-sterk);padding-top:36px}
.drie-punten h3{margin-bottom:10px}
.drie-punten p{color:var(--inkt-zacht)}
.drie-punten .nr{font-family:var(--kop);font-weight:700;color:var(--oranje);font-size:15px;display:block;margin-bottom:12px}
@media (max-width:800px){.drie-punten{grid-template-columns:1fr}}

.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-kaart);box-shadow:var(--schaduw);padding:clamp(22px,2.4vw,30px)}
.functie h3{margin:18px 0 8px}
.functie p{color:var(--inkt-zacht);font-size:15px}
.functie .icoon{width:44px;height:44px;border-radius:12px;background:var(--zacht);color:var(--roest);display:grid;place-items:center}
.functie .icoon svg{width:22px;height:22px}
.functie.uitgelicht{background:var(--inkt);color:var(--creme);border-color:var(--inkt)}
.functie.uitgelicht h3{color:var(--creme)}
.functie.uitgelicht p{color:rgba(var(--creme-rgb),.75)}
.functie.uitgelicht .icoon{background:rgba(var(--creme-rgb),.1);color:var(--oranje)}
.functie.breed{grid-column:span 2}
@media (max-width:640px){.functie.breed{grid-column:auto}}

.doelgroep{border-top:2px solid var(--roest);padding-top:22px}
.doelgroep h3{margin-bottom:10px}
.doelgroep p{color:var(--inkt-zacht);font-size:15px}
.doelgroep ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.doelgroep li{display:flex;gap:10px}
.doelgroep li::before{content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--roest);box-shadow:8px 0 0 var(--oranje);margin:.65em 10px 0 0}

.verhaal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.verhaal blockquote{font-family:var(--kop);font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.02em;font-weight:600}
@media (max-width:860px){.verhaal{grid-template-columns:1fr}}

.stappen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);counter-reset:stap}
.stappen li{counter-increment:stap;background:rgba(var(--creme-rgb),.08);border:1px solid rgba(var(--creme-rgb),.18);border-radius:var(--rond-kaart);padding:28px}
.stappen li::before{content:counter(stap);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--oranje);color:var(--inkt);font-family:var(--kop);font-weight:700;margin-bottom:18px}
.stappen h3{margin-bottom:8px}
.stappen p{color:rgba(var(--creme-rgb),.8);font-size:15px}
@media (max-width:860px){.stappen{grid-template-columns:1fr}}

.veilig{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--lijn-sterk);border-radius:var(--rond-kaart);overflow:hidden;background:var(--wit)}
.veilig > div{padding:28px;border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.veilig > div:nth-child(3n){border-right:0}
.veilig > div:nth-last-child(-n+3){border-bottom:0}
.veilig h3{font-size:17px;margin-bottom:6px}
.veilig p{font-size:14.5px;color:var(--inkt-zacht)}
@media (max-width:860px){
  .veilig{grid-template-columns:1fr}
  .veilig > div{border-right:0}
  .veilig > div:nth-last-child(-n+3){border-bottom:1px solid var(--lijn)}
  .veilig > div:last-child{border-bottom:0}
}

.vragen{max-width:820px}
.vragen details{border-bottom:1px solid var(--lijn-sterk)}
.vragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--kop);font-size:19px;font-weight:600;letter-spacing:-.01em}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font-family:var(--tekst);font-weight:400;font-size:26px;line-height:1;color:var(--roest);transition:transform var(--soepel)}
.vragen details[open] summary::after{transform:rotate(45deg)}
.vragen details p{padding:0 0 22px;color:var(--inkt-zacht);max-width:700px}

/* ---------------------------------------------------------------------
   Demo
   --------------------------------------------------------------------- */
.demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.demo h2{margin:18px 0 18px}
.demo ul{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.demo li{display:flex;gap:14px;align-items:flex-start}
.demo li .vink{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--oranje);color:var(--inkt);display:grid;place-items:center;font-size:14px;font-weight:700;margin-top:1px}
.demo .direct{margin-top:32px;padding-top:24px;border-top:1px solid rgba(var(--creme-rgb),.2);font-size:15px}
.demo .direct a{color:var(--creme)}
@media (max-width:900px){.demo{grid-template-columns:1fr}}

.formulier{background:var(--wit);color:var(--inkt);border-radius:var(--rond-kaart);padding:clamp(24px,3vw,36px);box-shadow:0 30px 80px rgba(0,0,0,.18)}
section.donker .formulier h3,.formulier h3{margin-bottom:6px;color:var(--inkt)}
.formulier > p{color:var(--inkt-zacht);font-size:14.5px;margin-bottom:22px}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.velden .heel{grid-column:1 / -1}
@media (max-width:560px){.velden{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.veld .optie{font-weight:400;color:var(--inkt-zacht)}
.veld input,.veld select,.veld textarea{
  font:inherit;font-weight:400;font-size:16px;color:var(--inkt);
  border:1.5px solid var(--lijn-sterk);border-radius:10px;padding:12px 14px;background:var(--wit);
  transition:border-color var(--soepel),box-shadow var(--soepel);width:100%;
}
.veld textarea{resize:vertical;min-height:96px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--roest);box-shadow:0 0 0 4px rgba(var(--roest-rgb),.12)}
.formulier .knop{margin-top:22px}
.formulier .klein{font-size:13px;color:var(--inkt-zacht);margin-top:14px;font-weight:400}
.verborgen{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.melding{display:none;margin-bottom:18px;padding:12px 14px;border-radius:10px;background:#FBE9E3;color:var(--roest-diep);font-size:14.5px;font-weight:500}
.melding.zichtbaar{display:block}

/* ---------------------------------------------------------------------
   Voet
   --------------------------------------------------------------------- */
.voet{position:relative;overflow:hidden;background:var(--inkt);color:rgba(var(--creme-rgb),.7);padding:clamp(64px,8vw,104px) 0 28px;font-size:15px}
.voet > .bollen{position:absolute;inset:0;pointer-events:none}
.voet > .omhulsel{position:relative;z-index:1}
.voet h4.merknaam{text-transform:none;letter-spacing:-.01em;font-family:var(--kop);font-size:15px;font-weight:700;color:var(--creme)}
.voet h4.merknaam .punt{color:var(--oranje)}
.voet h4.gewoon{color:var(--creme);letter-spacing:.14em}
.voet a{color:inherit;text-decoration:none}

.voet-boven{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.voet-oproep h2{color:var(--creme);font-size:clamp(30px,3.6vw,46px);max-width:520px}
.voet-oproep p{margin-top:14px;font-size:17px;max-width:460px}
.voet-oproep .knoppen{margin-top:28px}
.voet-oproep .pijl{color:var(--creme)}
.voet-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.voet h4{font-family:var(--tekst);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--creme-rgb),.45);margin-bottom:16px}
.voet ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.voet ul a{color:rgba(var(--creme-rgb),.82);transition:color var(--soepel)}
@media (hover:hover){.voet ul a:hover{color:var(--oranje)}}

/* Het woordmerk groot over de hele breedte, net boven de onderste regel. */
.voet-merk{display:block;margin:clamp(56px,7vw,96px) 0 0;font-family:var(--kop);font-weight:700;letter-spacing:-.055em;line-height:.8;
  font-size:clamp(72px,19.5vw,260px);white-space:nowrap;user-select:none}
.voet .voet-merk .nova,.voet .voet-merk .desk{color:var(--creme)}
.voet .voet-merk .punt{color:var(--oranje)}

.voet .onder{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid rgba(var(--creme-rgb),.12);font-size:13.5px}

/* "Een product van duonova." met het logo, naar duonova.nl. */
.product-van{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;border-radius:999px;border:1px solid rgba(var(--creme-rgb),.16);background:rgba(var(--creme-rgb),.05);transition:border-color var(--soepel),background-color var(--soepel)}
@media (hover:hover){.product-van:hover{border-color:rgba(var(--oranje-rgb),.6);background:rgba(var(--creme-rgb),.09)}}
.product-van .beeldmerk{width:26px;height:26px;border-radius:8px;background:var(--roest)}
.product-van .beeldmerk i{background:var(--creme)}
.product-van .beeldmerk i:last-child{background:var(--oranje)}
.product-van .woordmerk{font-size:19px}
.product-van .woordmerk .duo,.product-van .woordmerk .nova{color:var(--creme)}

@media (max-width:860px){.voet-boven{grid-template-columns:1fr}}
@media (max-width:560px){.voet .onder{flex-direction:column-reverse;align-items:flex-start}}

/* Kleine losse pagina's (bedankt, niet gevonden). */
.los{padding:clamp(72px,12vw,160px) 0}
.los .omhulsel{max-width:720px}
.los h1{margin:22px 0 18px;font-size:clamp(36px,5vw,56px)}
.los .knoppen{margin-top:30px}

/* ---------------------------------------------------------------------
   In beeld: screenshots van het product
   --------------------------------------------------------------------- */
.beeldtabs{display:flex;flex-wrap:wrap;gap:16px 0;margin-bottom:32px;align-items:flex-end}
.tabgroep{display:flex;flex-direction:column;gap:10px;padding:0 24px}
.tabgroep + .tabgroep{border-left:1.5px solid var(--lijn-sterk)}
.tablabel{font-size:13px;color:var(--inkt-zacht)}
.tablabel b{color:var(--roest);font-weight:700;margin-right:4px}
.tabrij{display:flex;flex-wrap:wrap;gap:8px}
.voorwie{display:block;font-family:var(--kop);font-size:17px;color:var(--inkt);margin-bottom:4px}
.beeldtabs button{font:inherit;font-size:15px;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid var(--lijn-sterk);background:var(--wit);color:var(--inkt);cursor:pointer;transition:background-color var(--soepel),border-color var(--soepel),color var(--soepel)}
@media (hover:hover){.beeldtabs button:hover{border-color:var(--roest);color:var(--roest)}}
.beeldtabs button[aria-selected="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.beeld[hidden]{display:none}
.beeld > figcaption{margin-top:22px;max-width:680px;color:var(--inkt-zacht)}
.toestel{margin:0;background:var(--inkt);box-shadow:0 2px 4px rgba(var(--inkt-rgb),.06),0 30px 80px rgba(var(--inkt-rgb),.18)}
.toestel img{width:100%;height:auto;display:block}
.toestel.computer{border-radius:16px;padding:0 10px 10px;position:relative}
.browserbalk{display:flex;align-items:center;gap:14px;height:44px;padding:0 6px}
.browserbalk .lampjes{display:flex;gap:7px;width:120px}
.browserbalk .lampjes i{width:11px;height:11px;border-radius:50%;background:#E2CDB8;opacity:.45}
.browserbalk .adres{flex:0 1 520px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:7px;height:28px;border-radius:8px;background:rgba(248,239,230,.1);color:rgba(248,239,230,.85);font-size:13px;letter-spacing:.01em}
.browserbalk .adres svg{width:12px;height:12px;opacity:.7}
.browserbalk .adres .pad{color:rgba(248,239,230,.5);margin-left:-7px}
.browserbalk .ruimte{width:120px}
.toestel.computer img{border-radius:8px}
.toestel.ipad{border-radius:34px;padding:16px;max-width:980px}
.toestel.ipad img{border-radius:20px}
.telefoons{display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:clamp(18px,3vw,40px);justify-content:start}
.telefoons figure{margin:0}
.toestel.telefoon{border-radius:46px;padding:9px}
.toestel.telefoon img{border-radius:38px}
.telefoons figcaption{margin-top:16px;font-size:15px;color:var(--inkt-zacht)}
.telefoons figcaption b{display:block;font-family:var(--kop);font-size:18px;color:var(--inkt);margin-bottom:2px}
@media (max-width:760px){
  .telefoons{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(-1 * var(--kier))}
  .telefoons figure{scroll-snap-align:start}
  .toestel.telefoon{border-radius:36px;padding:7px}
  .toestel.telefoon img{border-radius:30px}
  .toestel.ipad{border-radius:22px;padding:9px}
  .toestel.ipad img{border-radius:14px}
  .toestel.computer{padding:0 6px 6px;border-radius:12px}
  .browserbalk{height:32px;gap:8px;padding:0 4px}
  .browserbalk .lampjes,.browserbalk .ruimte{width:40px}
  .browserbalk .lampjes{gap:5px}
  .browserbalk .lampjes i{width:7px;height:7px}
  .browserbalk .adres{height:20px;font-size:10.5px;border-radius:6px}
  .browserbalk .adres svg{width:9px;height:9px}
}

/* In beeld staat gecentreerd: kop, tabbladen, schermen en onderschriften. */
#in-beeld .beeldtabs{justify-content:center}
#in-beeld .tabgroep{align-items:center}
#in-beeld .tabrij{justify-content:center}
@media (max-width:640px){
  .tabgroep{padding:0;width:100%}
  .tabgroep + .tabgroep{border-left:0;border-top:1.5px solid var(--lijn-sterk);padding-top:16px}
}
#in-beeld .toestel.computer{max-width:1100px;margin-left:auto;margin-right:auto}
#in-beeld .toestel.ipad{margin-left:auto;margin-right:auto}
#in-beeld .beeld > figcaption{margin-left:auto;margin-right:auto;text-align:center}
#in-beeld .telefoons{justify-content:center}
#in-beeld .telefoons figcaption{text-align:center}
@media (max-width:760px){#in-beeld .telefoons{justify-content:start}}

/* Klik je op "In beeld", dan komen de tabbladen net onder de kopbalk. Het
   scherm is dan zo groot dat het samen met het onderschrift precies in het
   venster past, ook op een laag scherm (100svh min kopbalk, tabbladen en
   onderschrift). */
#schermen{scroll-margin-top:12px}
#in-beeld .toestel.computer{max-width:min(1100px, calc((100svh - 430px) * 1.52))}
#in-beeld .toestel.ipad{max-width:min(980px, calc((100svh - 430px) * 1.3))}
#in-beeld .telefoons{grid-template-columns:repeat(3,minmax(0,min(300px, calc((100svh - 470px) * .46))))}
#in-beeld .beeld > figcaption{margin-top:18px}
#in-beeld .voorwie{margin-bottom:2px}
@media (max-width:760px){
  #in-beeld .toestel.computer,#in-beeld .toestel.ipad{max-width:none}
  #in-beeld .telefoons{grid-template-columns:repeat(3,72%)}
}

/* "novadesk." in lopende tekst: altijd zoals het logo, in de kopletter en de
   twee kleuren met de oranje punt. Op een donkere of roest ondergrond worden
   beide delen licht, net als het logo daar. */
.wm{font-family:var(--kop);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.wm .nova{color:var(--inkt)}
.wm .desk{color:var(--roest)}
.wm .punt{color:var(--oranje)}
section.donker .wm .nova,section.donker .wm .desk,
.voet .wm .nova,.voet .wm .desk,
.knop.groen .wm .nova,.knop.groen .wm .desk,
.functie.uitgelicht .wm .nova,.functie.uitgelicht .wm .desk{color:var(--creme)}
section.donker .formulier .wm .nova{color:var(--inkt)}
section.donker .formulier .wm .desk{color:var(--roest)}
.scherm .wm{font-size:1.02em}

/* Toelichting onder een scherm: een kaart die net over de onderrand valt. */
.toelichting{position:relative;z-index:2;max-width:min(860px, 94%);margin:-18px auto 0;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-kaart);
  box-shadow:0 2px 4px rgba(var(--inkt-rgb),.04),0 18px 44px rgba(var(--inkt-rgb),.1);padding:18px 22px;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;text-align:left}
#in-beeld .beeld > figcaption.toelichting{margin-top:-18px;text-align:left}
.toelichting-kop{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.toelichting-kop strong{font-family:var(--kop);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--inkt)}
.voor{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px 6px 10px;border-radius:999px}
.voor::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:10px 0 0 currentColor;margin-right:10px;opacity:.9}
.voor.behandelaar{background:var(--inkt);color:var(--creme)}
.voor.behandelaar::before{background:var(--creme);box-shadow:10px 0 0 var(--oranje)}
.voor.melder{background:var(--oranje);color:var(--inkt)}
.voor.melder::before{background:var(--roest);box-shadow:10px 0 0 var(--creme)}
.toelichting-tekst p{color:var(--inkt-zacht);font-size:15px;line-height:1.55}
.toelichting-tekst ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.toelichting-tekst li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--inkt);background:var(--creme);border:1px solid var(--lijn);border-radius:999px;padding:4px 10px 4px 6px;white-space:nowrap}
.toelichting-tekst li::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--roest);color:var(--creme);font-size:10.5px;font-weight:800}
#beeld-telefoon .toelichting{margin-top:36px}
@media (max-width:760px){
  .toelichting,#in-beeld .beeld > figcaption.toelichting{grid-template-columns:1fr;gap:12px;margin-top:16px;padding:18px}
  #beeld-telefoon .toelichting{margin-top:20px}
}

/* Kaart even breed als het scherm erboven; kop en label op één regel. */
.toelichting{grid-template-columns:1fr;gap:8px;padding:18px 24px 20px}
.toelichting-kop{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
#beeld-servicedesk .toelichting,#beeld-overzicht .toelichting,#beeld-melder .toelichting{max-width:calc(min(1100px, (100svh - 430px) * 1.52) - 48px)}
#beeld-ipad .toelichting{max-width:calc(min(980px, (100svh - 430px) * 1.3) - 48px)}
#beeld-telefoon .toelichting{max-width:860px}
@media (max-width:760px){
  #beeld-servicedesk .toelichting,#beeld-overzicht .toelichting,#beeld-melder .toelichting,#beeld-ipad .toelichting{max-width:none}
  .toelichting-tekst li{white-space:normal}
}

/* Zacht wisselen tussen de schermen (zie desk.js). */
.beelden{position:relative;transition:height .42s cubic-bezier(.22,.61,.36,1)}
.beeld{transition:opacity .38s ease, transform .45s cubic-bezier(.22,.61,.36,1)}
.beeld.weg{opacity:0;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease}
.beeld.komt{opacity:0;transform:translateY(14px) scale(.99);transition:none}
.beeldtabs button{transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .2s ease}
@media (prefers-reduced-motion:reduce){.beelden,.beeld{transition:none}}

/* Het woordmerk onderaan is een zacht watermerk, geen blikvanger. */
.voet-merk{font-size:clamp(56px,12vw,170px);margin-top:clamp(40px,5vw,72px)}
.voet .voet-merk .nova,.voet .voet-merk .desk{color:rgba(var(--creme-rgb),.07);transition:color .5s ease}
.voet .voet-merk .punt{color:rgba(var(--oranje-rgb),.45);transition:color .5s ease}
@media (hover:hover){
  .voet .voet-merk:hover .nova,.voet .voet-merk:hover .desk{color:rgba(var(--creme-rgb),.14)}
  .voet .voet-merk:hover .punt{color:var(--oranje)}
}

/* Bollen in de voettekst, naar onderen toe zacht weg, zodat het watermerk rustig blijft. */
.voet > .bollen{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 78%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 78%)}

/* De schuine poot van de k loopt ver door naar rechts; zonder wat lucht
   plakt de punt van novadesk. ertegenaan. Alleen na "desk", dus niet bij duonova. */
.desk + .punt{margin-left:.045em}
.voet-merk .desk + .punt{margin-left:.06em}

/* =====================================================================
   Telefoon
   ===================================================================== */

/* Menuknop en menu */
.menuknop{display:none;-webkit-appearance:none;appearance:none;border:1.5px solid var(--lijn-sterk);background:var(--wit);width:44px;height:44px;border-radius:12px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menuknop span{display:block;width:18px;height:2px;border-radius:2px;background:var(--inkt);transition:transform .25s ease}
.menuknop[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobielmenu{border-top:1px solid var(--lijn);background:var(--creme);padding:8px var(--kier) 24px;box-shadow:0 20px 40px rgba(var(--inkt-rgb),.12)}
.mobielmenu nav{display:flex;flex-direction:column}
.kopbalk .mobielmenu nav a{font-family:var(--kop);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--inkt);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:center}
.kopbalk .mobielmenu nav a::after{content:"→";color:var(--roest);font-family:var(--tekst)}
.mobielmenu .knop{margin-top:20px;padding:16px}
.mobielmenu p{margin-top:14px;font-size:14px;color:var(--inkt-zacht);text-align:center}
@media (max-width:900px){
  .menuknop{display:inline-flex}
  .kopbalk nav{gap:10px}
}
@media (min-width:901px){.mobielmenu{display:none!important}}

/* Telefoon in de held: alleen op een telefoon */
.held-telefoon{display:none}
@media (max-width:640px){
  .held .scherm-wrap{display:none}
  .held-telefoon{display:block;position:relative;width:min(300px,78%);margin:8px auto 0}
  .held-telefoon .toestel.telefoon{border-radius:42px;padding:8px}
  .held-telefoon .toestel.telefoon img{border-radius:34px}
  .held-telefoon .zweef{position:absolute;font-size:12px;line-height:1.35;padding:10px 12px;border-radius:14px;display:flex;gap:10px;align-items:center;width:max-content;max-width:220px}
  .held-telefoon .zweef strong{font-size:12.5px}
  .held-telefoon .zweef.melding{left:-34px;top:26%}
  .held-telefoon .zweef.melding .beeldmerk{width:28px;height:28px;border-radius:8px}
  .held-telefoon .zweef.sla{right:-30px;left:auto;bottom:18%;top:auto;margin:0}
  .held-telefoon .zweef.sla .ring{width:28px;height:28px}
  .held-telefoon .zweef.sla .ring::after{width:19px;height:19px}
}

/* Vergroten van een scherm */
[data-vergroot]{cursor:zoom-in}
.vergroot{position:fixed;inset:0;z-index:100;background:rgba(var(--inkt-rgb),.94);display:flex;flex-direction:column}
.vergroot[hidden]{display:none}
.vergroot-vlak{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;padding:64px 16px 16px}
.vergroot-vlak img{display:block;width:100%;max-width:1600px;height:auto;margin:auto;border-radius:10px}
.vergroot-dicht{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--creme);color:var(--inkt);font-size:26px;line-height:1;cursor:pointer;z-index:2}
.vergroot-hint{display:none;text-align:center;color:rgba(var(--creme-rgb),.7);font-size:13px;padding:0 0 20px}
@media (max-width:760px){
  .vergroot-vlak img{width:auto;height:calc(100svh - 140px);max-width:none}
  .vergroot-hint{display:block}
  [data-vergroot]{position:relative}
  [data-vergroot]::after{content:"Tik om te vergroten";position:absolute;right:10px;bottom:10px;font-size:11.5px;font-weight:600;color:var(--creme);background:rgba(var(--inkt-rgb),.78);padding:5px 10px;border-radius:999px}
}

/* Functies compacter: icoon naast de tekst */
@media (max-width:640px){
  .functie{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px}
  .functie .icoon{grid-row:span 2}
  .functie h3{margin:0;font-size:18px;align-self:center}
  .functie p{grid-column:2;font-size:14.5px}
  .raster.k3{gap:12px}
  .stappen li{padding:22px}
  .stappen li::before{margin-bottom:12px}
  .held{padding-top:28px}
  .held h1{margin:16px 0}
  .held .knoppen{margin-top:24px}
  .held-punten{margin-top:20px}
}
.kopbalk .knop{white-space:nowrap}
@media (max-width:400px){
  .kopbalk .omhulsel{gap:10px}
  .kopbalk .knop.klein{padding:10px 14px}
  .kopbalk .woordmerk{font-size:21px}
  .kopbalk .beeldmerk{width:32px;height:32px}
}
.kopbalk .mobielmenu nav{align-items:stretch;gap:0}
@media (max-width:760px){
  #in-beeld .telefoons{margin:0 calc(-1 * var(--kier));padding:4px var(--kier) 14px;scroll-padding:0 var(--kier);grid-template-columns:repeat(3,70%)}
  #beeld-telefoon .telefoons + .toelichting::before{content:"Veeg voor de andere schermen →";position:absolute;top:-30px;left:0;right:0;text-align:center;font-size:12.5px;font-weight:600;color:var(--inkt-zacht)}
  #beeld-telefoon .toelichting{margin-top:40px}
}
#in-beeld .telefoons{scrollbar-width:none}#in-beeld .telefoons::-webkit-scrollbar{display:none}

/* Toelichting onder het scherm, niet erover. */
.toelichting,#in-beeld .beeld > figcaption.toelichting{margin-top:18px}
#in-beeld .toestel.computer{max-width:min(1100px, calc((100svh - 470px) * 1.52))}
#in-beeld .toestel.ipad{max-width:min(980px, calc((100svh - 470px) * 1.3))}
#beeld-servicedesk .toelichting,#beeld-overzicht .toelichting,#beeld-melder .toelichting{max-width:min(1100px, calc((100svh - 470px) * 1.52))}
#beeld-ipad .toelichting{max-width:min(980px, calc((100svh - 470px) * 1.3))}
@media (max-width:760px){
  #in-beeld .toestel.computer,#in-beeld .toestel.ipad,
  #beeld-servicedesk .toelichting,#beeld-overzicht .toelichting,#beeld-melder .toelichting,#beeld-ipad .toelichting{max-width:none}
  .toelichting,#in-beeld .beeld > figcaption.toelichting{margin-top:16px}
}

/* ---------------------------------------------------------------------
   Pakketten (pakketten.html)
   --------------------------------------------------------------------- */
.kopbalk nav a[aria-current="page"]:not(.knop){color:var(--roest)}
.prijzen-kop{padding:clamp(40px,6vw,88px) 0 clamp(28px,3vw,40px);text-align:center}
.prijzen-kop .omhulsel{max-width:820px}
.prijzen-kop h1{margin:22px 0}
.prijzen-kop h1 em{font-style:normal;color:var(--roest)}
.prijzen-kop .groot{max-width:620px;margin:0 auto}
.prijzen-kop .held-punten{justify-content:center}
.prijzen-pakketten{padding-top:clamp(24px,3vw,40px)}
.prijzen-noot{margin-top:28px;font-size:14.5px;color:var(--inkt-zacht);text-align:center}
#inrichting .prijzen-noot{text-align:left;max-width:700px}

.pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,26px);align-items:stretch}
@media (max-width:960px){.pakketten{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.pakket{position:relative;display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-kaart);box-shadow:var(--schaduw);padding:clamp(24px,2.6vw,34px)}
.pakket h2{font-size:clamp(26px,2.6vw,30px)}
.pakket-voor{color:var(--inkt-zacht);font-size:15px;margin-top:6px;min-height:3.4em}
.pakket-prijs{font-family:var(--kop);font-weight:700;font-size:clamp(46px,4.6vw,56px);letter-spacing:-.04em;line-height:1;margin-top:20px;display:flex;align-items:baseline;gap:4px}
.pakket-prijs .valuta{font-size:.5em;align-self:flex-start;margin-top:.18em}
.pakket-prijs .per{font-family:var(--tekst);font-size:15px;font-weight:500;letter-spacing:0;color:var(--inkt-zacht);margin-left:8px}
.pakket-incl{font-size:14.5px;color:var(--inkt-zacht);margin:12px 0 22px;min-height:3.2em}
.pakket-incl b{color:var(--inkt)}
.pakket-plus{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--inkt-zacht);margin-top:26px}
.pakket-lijst{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;margin-top:14px;flex:1}
.knop + .pakket-lijst{margin-top:26px}
.pakket-lijst li{display:flex;gap:12px;align-items:flex-start}
.pakket-lijst li::before{content:"✓";flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--zacht);color:var(--roest);display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:3px}
.pakket-voorwaarden{margin-top:26px;padding-top:18px;border-top:1px solid var(--lijn);display:flex;flex-direction:column;gap:8px;font-size:14px}
.pakket-voorwaarden div{display:flex;justify-content:space-between;gap:16px}
.pakket-voorwaarden dt{color:var(--inkt-zacht)}
.pakket-voorwaarden dd{font-weight:600;text-align:right}
.pakket.aanbevolen{background:var(--inkt);border-color:var(--inkt);color:var(--creme);box-shadow:var(--schaduw-op)}
.pakket.aanbevolen h2{color:var(--creme)}
.pakket.aanbevolen .pakket-voor,.pakket.aanbevolen .pakket-incl,.pakket.aanbevolen .per,.pakket.aanbevolen .pakket-plus,.pakket.aanbevolen dt{color:rgba(var(--creme-rgb),.7)}
.pakket.aanbevolen .pakket-incl b{color:var(--creme)}
.pakket.aanbevolen .pakket-lijst li::before{background:rgba(var(--creme-rgb),.12);color:var(--oranje)}
.pakket.aanbevolen .pakket-voorwaarden{border-top-color:rgba(var(--creme-rgb),.16)}
.pakket-label{position:absolute;top:-13px;left:clamp(24px,2.6vw,34px);background:var(--oranje);color:var(--inkt);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:6px}

.rekenaar{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-kaart);box-shadow:var(--schaduw);padding:clamp(22px,3vw,36px)}
.rekenaar-invoer label{font-weight:600;font-size:15px}
.rekenaar-schuif{display:flex;align-items:center;gap:20px;margin-top:10px}
.rekenaar-schuif input{flex:1;accent-color:var(--roest);height:28px;min-width:0}
.rekenaar-schuif output{font-family:var(--kop);font-weight:700;font-size:32px;letter-spacing:-.03em;min-width:2.2ch;text-align:right;color:var(--roest)}
.rekenaar-uitkomst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:26px}
@media (max-width:760px){.rekenaar-uitkomst{grid-template-columns:1fr}}
.rekenaar-uitkomst > div{border:1px solid var(--lijn);border-radius:var(--rond);padding:20px;transition:opacity var(--soepel)}
.rekenaar-uitkomst > div.aanbevolen{border:2px solid var(--oranje)}
.rekenaar-uitkomst > div.past-niet{opacity:.45}
.rekenaar-uitkomst h3{font-size:18px}
.rekenaar-uitkomst .bedrag{font-family:var(--kop);font-weight:700;font-size:30px;letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.rekenaar-uitkomst .bedrag small{font-family:var(--tekst);font-size:14px;font-weight:500;letter-spacing:0;color:var(--inkt-zacht);margin-left:6px}
.rekenaar-uitkomst .sub{font-size:14px;color:var(--inkt-zacht);margin-top:4px}

.prijzen-oproep{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.prijzen-oproep > div:first-child{max-width:640px}
.prijzen-oproep h2{margin:18px 0 14px}
.pijl.licht{color:var(--creme)}

/* Pakketten: de drie kaarten delen één raster (subgrid), zodat naam, prijs,
   knop, lijst en elke regel van de voorwaarden in alle kaarten op dezelfde
   hoogte staan, ook als een tekst bij één pakket een regel langer is. */
@supports (grid-template-rows: subgrid){
  @media (min-width:961px){
    .pakketten{grid-template-rows:repeat(11,auto);row-gap:0}
    .pakket{display:grid;grid-row:span 11;grid-template-rows:subgrid;row-gap:0}
    .pakket-voor,.pakket-incl{min-height:0}
    .pakket-lijst{flex:none;align-self:start}
    .pakket-voorwaarden{display:contents}
    .pakket-voorwaarden > div{padding:4px 0;align-items:flex-start}
    .pakket-voorwaarden > div:first-child{margin-top:26px;padding-top:18px;border-top:1px solid var(--lijn)}
    .pakket.aanbevolen .pakket-voorwaarden > div:first-child{border-top-color:rgba(var(--creme-rgb),.16)}
  }
}

/* Huidige pagina in het menu. */
.kopbalk nav a[aria-current="page"]{color:var(--roest)}
.kopbalk .mobielmenu nav a[aria-current="page"]{color:var(--roest)}

/* Pakkettenpagina: een compacte kop, zodat de pakketten met prijs en knop
   bij binnenkomst in beeld staan. */
.prijzen-kop{padding:clamp(28px,4vw,52px) 0 0}
.prijzen-kop h1{font-size:clamp(34px,4.2vw,50px);margin:16px 0 14px}
.prijzen-kop .groot{font-size:clamp(16px,1.3vw,17.5px)}
.prijzen-kop .held-punten{margin-top:16px}
.prijzen-pakketten{padding-top:clamp(28px,3vw,40px)}
.pakket-lijst{gap:7px;font-size:14.5px}
.pakket-voor{font-size:14.5px}

/* Pakkettenpagina compact: de drie pakketten passen in één venster. */
.prijzen-kop{padding:clamp(20px,3vw,36px) 0 0}
.prijzen-kop h1{font-size:clamp(30px,3.4vw,42px);margin:0 0 8px}
.prijzen-kop .groot{font-size:16px}
.prijzen-pakketten{padding-top:clamp(22px,2.4vw,30px)}
.pakket{padding:clamp(20px,2vw,26px) clamp(20px,2.2vw,28px)}
.pakket h2{font-size:24px}
.pakket-voor{margin-top:2px;font-size:14px}
.pakket-prijs{font-size:clamp(38px,3.6vw,46px);margin-top:12px}
.pakket-incl{font-size:13.5px;margin:8px 0 14px;line-height:1.45}
.pakket .knop{padding:11px 18px}
.pakket-plus{margin-top:16px;font-size:12px}
.pakket-lijst{gap:4px;font-size:14px;margin-top:8px;line-height:1.45}
.pakket-lijst li::before{width:18px;height:18px}
.pakket-voorwaarden{font-size:13px}
.pakket-voorwaarden dd{white-space:nowrap}
@supports (grid-template-rows: subgrid){
  @media (min-width:961px){
    .pakket-voorwaarden > div{padding:2px 0}
    .pakket-voorwaarden > div:first-child{margin-top:16px;padding-top:12px}
  }
}

.prijzen-kop{padding-top:clamp(16px,2vw,24px)}
.prijzen-pakketten{padding-top:22px}
.pakket{padding-top:20px;padding-bottom:20px}
.pakket-prijs{margin-top:8px}
.pakket-incl{white-space:nowrap;margin:6px 0 12px}
.pakket-plus{margin-top:14px}
@media (max-width:1100px){.pakket-incl{white-space:normal}}

/* Keuzevelden in de huisstijl: eigen pijltje in roest, zelfde rand en hoogte
   als de tekstvelden. */
.veld select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:44px;
  background-color:var(--wit);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F3A1C' stroke-width='2.4' 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 14px center;background-size:18px 18px}
.veld select:invalid,.veld select option[value=""]{color:var(--inkt-zacht)}
.veld select option{color:var(--inkt)}
@media (hover:hover){.veld select:hover{border-color:var(--roest-licht)}}

/* Pakkettenpagina: links uitgelijnd zoals de rest van de site, met het labeltje. */
.prijzen-kop{text-align:left}
.prijzen-kop .omhulsel{max-width:var(--breed)}
.prijzen-kop .groot{margin:0;max-width:680px}
.prijzen-kop h1{margin:10px 0 6px}
.prijzen-noot{text-align:left}
.prijzen-pakketten{padding-top:18px}
.prijzen-kop{padding-top:10px}
.prijzen-kop h1{margin:8px 0 4px}
.prijzen-pakketten{padding-top:26px}

/* Pakkettenpagina: de kop heeft dezelfde maten als elk ander blok
   (section, .sectiekop, h2 en .groot). */
.prijzen-kop{padding:clamp(64px,8vw,112px) 0 0}
.prijzen-kop .pil{margin-bottom:18px}
.prijzen-kop h1{font-size:clamp(30px,3.6vw,42px);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px}
.prijzen-kop .groot{font-size:clamp(17px,1.5vw,19px)}
.prijzen-pakketten{padding-top:clamp(36px,4.5vw,60px)}
.prijzen-noot{text-align:center}
.prijzen-kop .groot{max-width:780px}