/* Luxe Horloge Leasen - stylesheet. Self-hosted fonts, geen externe verzoeken. */
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-garamond-normal-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-garamond-normal-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-garamond-italic-500-latin.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --zwart:#0C0B09;--vlak:#15130F;--vlak2:#1D1A15;--vlak3:#25211A;
  --lijn:rgba(255,255,255,.09);--lijn2:rgba(201,168,92,.35);
  --goud:#C9A85C;--goud2:#E4CA86;--goud-donker:#9E8140;
  --tekst:#F1EBE0;--dim:#B1A899;--dim2:#7E776B;--groen:#3BAA6A;--rood:#E06B6B;
  --header-h:78px;--r:14px;--r2:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--zwart);color:var(--tekst);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--goud2);text-decoration:none}
a:hover{color:#fff}
p{margin:0 0 1.1em}
h1,h2,h3,.serif{font-family:Cormorant,Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:.005em;margin:0 0 .5em;color:var(--tekst)}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(30px,3.6vw,44px)}
h3{font-size:clamp(22px,2.2vw,27px)}
b,strong{font-weight:600;color:#fff}
ul,ol{padding-left:1.25em}
li{margin:.3em 0}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.smal .wrap{max-width:820px}
section{padding:84px 0}
section.strak{padding:56px 0}
.vlak{background:var(--vlak)}
.vlak2{background:var(--vlak2)}
.grens{border-top:1px solid var(--lijn)}
.centreer{text-align:center}
.eyebrow{display:inline-block;background:transparent;border:1px solid var(--goud);color:var(--tekst);border-radius:999px;padding:7px 18px;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:500;margin-bottom:18px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--dim);max-width:62ch}
.sub{color:var(--dim)}
.kop{max-width:720px;margin-bottom:38px}
.kop.centreer{margin-inline:auto}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--goud2),var(--goud) 55%,var(--goud-donker));color:#161309;font-weight:600;font-size:16px;padding:15px 28px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 12px 28px -10px rgba(201,168,92,.55);transition:transform .85s var(--ease),box-shadow .85s var(--ease),filter .4s var(--ease);font-family:inherit;line-height:1.2;text-align:center}
.knop:hover{color:#161309;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(201,168,92,.65);filter:brightness(1.04)}
.knop.licht{background:transparent;color:var(--tekst);border:1px solid var(--lijn2);box-shadow:none}
.knop.licht:hover{border-color:var(--goud);color:#fff;box-shadow:none}
.knop.klein{padding:11px 20px;font-size:14.5px}
.knop:disabled{opacity:.7;cursor:wait;transform:none}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:40;background:none;background-image:linear-gradient(to bottom,rgba(0,0,0,.62),transparent);background-size:100% 150px;background-repeat:no-repeat}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px}
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--tekst)}
.logo svg{flex:none}
.logo .naam{font-family:Cormorant,Georgia,serif;font-weight:600;font-size:23px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.logo .naam span{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--goud);margin-top:4px}
.links{display:flex;align-items:center;gap:6px}
.links .item{color:var(--tekst);font-size:15px;font-weight:500;padding:9px 13px;border-radius:999px;white-space:nowrap;transition:background .4s var(--ease)}
.links .item:hover{background:rgba(255,255,255,.08);color:#fff}
.links .knop{margin-left:8px}
.menuknop{display:none;background:transparent;border:1px solid var(--lijn2);color:var(--tekst);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer}
@media (max-width:1180px){
  .links .item{padding:8px 9px;font-size:14px}
  .logo .naam span{display:none}
}
@media (max-width:1040px){
  .menuknop{display:inline-block}
  .links{display:none;position:absolute;top:calc(var(--header-h) - 6px);right:20px;left:20px;background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r);padding:12px;flex-direction:column;align-items:stretch;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .links.open{display:flex}
  .links .item{padding:12px 14px}
  .links .knop{margin:8px 0 0}
}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero .achter{position:absolute;inset:0;z-index:-2}
.hero .achter img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero .waas{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,11,9,.92) 0%,rgba(12,11,9,.78) 42%,rgba(12,11,9,.45) 100%),linear-gradient(to top,rgba(12,11,9,1) 0%,rgba(12,11,9,0) 40%)}
.hero .wrap{padding-top:calc(var(--header-h) + 36px);padding-bottom:56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px}
.usp{list-style:none;padding:0;margin:0;display:grid;gap:9px;width:fit-content;text-align:left}
.usp li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:var(--tekst)}
.vink{flex:none;margin-top:4px}
.hero.klein{min-height:0}
.hero.klein .wrap{padding-top:calc(var(--header-h) + 60px);padding-bottom:40px}
.hero.klein .hero-grid{grid-template-columns:1fr}
.hero.klein .waas{background:linear-gradient(90deg,rgba(12,11,9,.94) 0%,rgba(12,11,9,.82) 50%,rgba(12,11,9,.6) 100%),linear-gradient(to top,rgba(12,11,9,1) 0%,rgba(12,11,9,0) 50%)}
.kruimels{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--dim);margin-bottom:16px}
.kruimels a{color:var(--dim)}
.kruimels a:hover{color:var(--goud2)}
.kruimels span::before{content:"/";margin:0 6px;color:var(--dim2)}
.kruimels span:first-child::before{content:none}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero{min-height:0}
  .hero .waas{background:linear-gradient(to bottom,rgba(12,11,9,.9),rgba(12,11,9,.86))}
}

/* kort samengevat */
.kortblok{background:var(--vlak2);border:1px solid var(--lijn2);border-left:3px solid var(--goud);border-radius:var(--r);padding:20px 24px;margin:0 0 34px}
.kortblok b{color:var(--goud2)}
.kortblok p{margin:0}
.bijgewerkt{font-size:13px;color:var(--dim2);margin-top:10px}

/* offerte-formulier */
.offerte{background:rgba(21,19,15,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--lijn2);border-radius:var(--r2);padding:28px 28px 24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);position:relative}
.offerte-kop h2{font-size:30px;margin-bottom:6px}
.offerte-kop .sub{font-size:15px;margin-bottom:16px}
.stapteller{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:8px;letter-spacing:.02em}
.balk{height:3px;background:var(--lijn);border-radius:3px;overflow:hidden;margin-bottom:22px}
.balk i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--goud-donker),var(--goud2));transition:width .6s var(--ease)}
.stap{display:none}
.stap.actief{display:block}
.vraag{display:block;font-family:Cormorant,Georgia,serif;font-size:24px;font-weight:600;margin-bottom:14px;line-height:1.2}
.keuzes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.keuze{position:relative;display:block;cursor:pointer}
.keuze input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.keuze span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:10px 12px;border:1px solid var(--lijn);border-radius:12px;background:rgba(255,255,255,.03);font-size:15px;transition:border-color .4s var(--ease),background .4s var(--ease)}
.keuze:hover span{border-color:var(--lijn2)}
.keuze input:checked+span,.keuze.aan span{border-color:var(--goud);background:rgba(201,168,92,.14);color:#fff}
.keuze input:focus-visible+span{outline:2px solid var(--goud2);outline-offset:2px}
.knoppen{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.terug{background:transparent;border:0;color:var(--dim);font:inherit;font-size:14px;cursor:pointer;padding:10px 12px}
.terug:hover{color:var(--tekst)}
.veld{display:block;margin-bottom:12px}
.veld span{display:block;font-size:13px;color:var(--dim);margin-bottom:5px;letter-spacing:.02em}
.veld input,.veld textarea,.veld select{width:100%;font:inherit;font-size:16px;color:var(--tekst);background:rgba(255,255,255,.04);border:1px solid var(--lijn);border-radius:11px;padding:12px 14px;outline:0;transition:border-color .4s var(--ease)}
.veld input:focus,.veld textarea:focus{border-color:var(--goud)}
.veld input[aria-invalid="true"]{border-color:var(--rood)}
.veld textarea{resize:vertical}
.fout{background:rgba(224,107,107,.12);border:1px solid rgba(224,107,107,.5);color:#ffd9d9;border-radius:11px;padding:11px 14px;font-size:14.5px;margin-bottom:12px}
.fout a{color:#fff;text-decoration:underline}
.honing{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.gerust{font-size:13px;color:var(--dim);text-align:center;margin:14px 0 0}
.offerte [data-verstuur]{min-width:240px}

/* secties met tekst */
.tekst{max-width:780px}
.tekst h2{margin-top:44px;font-size:clamp(27px,3vw,36px)}
.tekst h2:first-child{margin-top:0}
.tekst ul li::marker{color:var(--goud)}
.tekst a{border-bottom:1px solid rgba(228,202,134,.35)}
.tekst a:hover{border-color:#fff}
.tussen{margin:44px 0;padding:26px 28px;border:1px solid var(--lijn2);border-radius:var(--r);background:var(--vlak2);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tussen p{margin:0;font-family:Cormorant,Georgia,serif;font-size:24px;font-weight:600;line-height:1.2}
.tussen small{display:block;font-family:Inter,sans-serif;font-size:13.5px;color:var(--dim);font-weight:400;margin-top:4px}

/* twee kolommen: tekst + zijbalk */
.twee{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.zij{position:sticky;top:calc(var(--header-h) + 16px)}
@media (max-width:1000px){.twee{grid-template-columns:1fr}.zij{position:static}}

/* rekenvoorbeeld */
.reken{background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r2);padding:26px 28px;margin:40px 0}
.reken h3{margin-bottom:6px}
.reken .sub{font-size:14.5px;margin-bottom:16px}
.reken table{width:100%;border-collapse:collapse;font-size:15.5px}
.reken th,.reken td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--lijn)}
.reken th{font-weight:500;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.reken td b{font-family:Cormorant,Georgia,serif;font-size:22px;color:var(--goud2)}
.reken .let{font-size:13px;color:var(--dim);margin:14px 0 0}
.reken .waarschuwing{display:inline-block;margin-top:10px;border:1px solid var(--lijn2);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--tekst);font-weight:600}
.reken .knoppen{justify-content:flex-start;margin-top:14px}

/* kaarten */
.raster{display:grid;gap:18px}
.raster.k3{grid-template-columns:repeat(3,1fr)}
.raster.k4{grid-template-columns:repeat(4,1fr)}
.raster.k2{grid-template-columns:repeat(2,1fr)}
.kaart{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r2);padding:28px 24px;color:var(--tekst);transition:transform .85s var(--ease),border-color .85s var(--ease),box-shadow .85s var(--ease)}
a.kaart:hover{transform:translateY(-4px);border-color:var(--lijn2);box-shadow:0 30px 50px -30px rgba(0,0,0,.9);color:var(--tekst)}
.kaart .ic{width:52px;height:52px;border-radius:50%;border:1px solid var(--lijn2);display:grid;place-items:center;margin:0 auto 16px;color:var(--goud2)}
.kaart h3{margin-bottom:8px}
.kaart p{color:var(--dim);font-size:15px;margin:0}
.kaart .meer{margin-top:auto;padding-top:14px;color:var(--goud2);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.kaart .label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);margin-bottom:10px}
.fotokaart{padding:0;overflow:hidden}
.fotokaart img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fotokaart .inhoud{padding:22px 22px 24px;display:flex;flex-direction:column;align-items:center;flex:1}
.kaart ul{list-style:none;padding:0;margin:8px 0 0;width:fit-content;margin-inline:auto;text-align:left}
.kaart ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px}
.kaart.cijfer{border-color:transparent;background:transparent;padding:16px 8px}
.kaart.cijfer .getal{font-family:Cormorant,Georgia,serif;font-size:54px;font-weight:600;color:var(--goud2);line-height:1}
.kaart.cijfer p{font-size:14.5px}
@media (max-width:900px){.raster.k4{grid-template-columns:repeat(2,1fr)}.raster.k3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .raster.k3,.raster.k4,.raster.k2{grid-template-columns:repeat(2,1fr);gap:12px}
  .raster > :last-child:nth-child(odd){grid-column:1 / -1}
  .kaart{padding:22px 16px}
  .kaart h3{font-size:20px}
  .kaart p{font-size:14px}
}

/* merkenrij */
.merken{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.merk{display:flex;align-items:center;justify-content:center;text-align:center;min-height:74px;padding:14px 10px;border:1px solid var(--lijn);border-radius:12px;font-family:Cormorant,Georgia,serif;font-size:21px;font-weight:600;color:var(--tekst);background:var(--vlak2);transition:border-color .85s var(--ease),transform .85s var(--ease)}
.merk:hover{border-color:var(--goud);transform:translateY(-3px);color:#fff}
@media (max-width:900px){.merken{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.merken{grid-template-columns:repeat(2,1fr)}.merk{font-size:18px;min-height:60px}}

/* stappen */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:stap}
.stappen .kaart{position:relative;padding-top:34px}
.stappen .kaart::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--zwart);border:1px solid var(--goud);color:var(--goud2);border-radius:999px;padding:4px 14px;font-size:13px;letter-spacing:.14em}
@media (max-width:900px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stappen{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--lijn);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;font-family:Cormorant,Georgia,serif;font-size:23px;font-weight:600;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border:1px solid var(--lijn2);border-radius:50%;display:grid;place-items:center;color:var(--goud2);font-family:Inter,sans-serif;font-size:18px;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .antwoord{padding:0 0 18px;color:var(--dim);max-width:70ch}
.faq .antwoord p:last-child{margin:0}

/* links */
.verder{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;list-style:none;padding:0;margin:0;max-width:820px}
.verder li{margin:0;border-bottom:1px solid var(--lijn)}
.verder a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:var(--tekst)}
.verder a::after{content:"\2192";color:var(--goud)}
.verder a:hover{color:var(--goud2)}
@media (max-width:640px){.verder{grid-template-columns:1fr}}

/* cta-blok */
.cta{position:relative;overflow:hidden;background:var(--vlak2);border:1px solid var(--lijn2);border-radius:var(--r2);padding:52px 40px;text-align:center}
.cta::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(ellipse at top,rgba(201,168,92,.16),transparent 60%);pointer-events:none}
.cta h2{position:relative}
.cta p{position:relative;color:var(--dim);max-width:60ch;margin-inline:auto}
.cta .knoppen{position:relative;margin-top:22px}

/* beeld */
.beeld{border-radius:var(--r2);overflow:hidden;border:1px solid var(--lijn)}
.beeld img{width:100%;aspect-ratio:3/2;object-fit:cover}
.beeld figcaption{font-size:13px;color:var(--dim2);padding:10px 14px;background:var(--vlak2)}
.beeldrij{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:36px 0}
@media (max-width:640px){.beeldrij{grid-template-columns:1fr}}

/* tabellen in tekst */
.tekst table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 1.4em}
.tekst th,.tekst td{padding:10px 8px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.tekst th{color:var(--dim);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.08em}

/* footer */
footer{background:#000;color:var(--dim);padding:64px 0 28px;border-top:1px solid var(--lijn)}
footer .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
footer h2{font-size:15px;font-family:Inter,sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goud);margin-bottom:14px}
footer a{display:block;color:var(--dim);padding:4px 0;font-size:15px}
footer a:hover{color:#fff}
footer .logo{margin-bottom:14px}
footer .onder{border-top:1px solid var(--lijn);padding-top:20px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center}
footer .onder a{display:inline;padding:0;font-size:13.5px}
footer .let{font-size:13px;color:var(--dim2);max-width:80ch;margin:0 0 16px}
@media (max-width:900px){footer .kolommen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .kolommen{grid-template-columns:1fr}}

/* zwevende knop en onderbalk */
.zweef{display:none}
.balkonder{display:none}
@media (min-width:1041px){
  .balkonder{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(12,11,9,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lijn2);transform:translateY(110%);transition:transform .85s var(--ease)}
  .balkonder.zichtbaar{transform:none}
  .balkonder .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
  .balkonder p{margin:0;font-family:Cormorant,Georgia,serif;font-size:22px;font-weight:600;line-height:1.15}
  .balkonder small{display:block;font-family:Inter,sans-serif;font-size:13px;color:var(--dim);font-weight:400}
}
@media (max-width:1040px){
  .zweef{display:inline-flex;position:fixed;left:16px;bottom:16px;z-index:30;background:linear-gradient(135deg,var(--goud2),var(--goud) 55%,var(--goud-donker));color:#161309;font-weight:600;font-size:15px;padding:14px 22px;border-radius:999px;box-shadow:0 12px 28px -10px rgba(201,168,92,.6);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .zweef.verborgen{opacity:0;transform:translateY(20px);pointer-events:none}
}

/* reveals: pas actief zodra het script draait (html.anim) */
html.anim .reveal,html.anim .stagger>*{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
html.anim .reveal.is-visible,html.anim .stagger.is-visible>*{opacity:1;transform:none}
html.anim .stagger.is-visible>:nth-child(2){transition-delay:110ms}
html.anim .stagger.is-visible>:nth-child(3){transition-delay:220ms}
html.anim .stagger.is-visible>:nth-child(4){transition-delay:330ms}
html.anim .stagger.is-visible>:nth-child(5){transition-delay:440ms}
html.anim .stagger.is-visible>:nth-child(6){transition-delay:550ms}
@media (prefers-reduced-motion:reduce){html.anim .reveal,html.anim .stagger>*{opacity:1;transform:none;transition:none}}

/* cookiebalk */
.cookiebalk{position:fixed;z-index:60;left:16px;right:16px;bottom:16px;max-width:560px;margin-inline:auto;background:var(--vlak2);border:1px solid var(--lijn2);border-radius:var(--r);padding:22px 24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);font-size:14.5px}
.cookiebalk h3{margin-bottom:6px}
.cookiebalk .cookiekeuze{display:block;margin:4px 0}
.cookiebalk .rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cookiebalk .knop{padding:10px 16px;font-size:14px}

/* mobiel */
@media (max-width:640px){
  body{font-size:16px}
  section{padding:56px 0}
  .wrap{width:calc(100% - 32px)}
  .hero .wrap{padding-top:calc(var(--header-h) + 16px);padding-bottom:36px}
  .offerte{padding:22px 18px 18px}
  .offerte-kop h2{font-size:26px}
  .vraag{font-size:21px}
  .keuzes{grid-template-columns:1fr 1fr;gap:8px}
  .keuze span{min-height:46px;font-size:14px;padding:8px}
  .tussen{padding:20px}
  .tussen p{font-size:20px}
  .reken{padding:20px 16px}
  .reken td b{font-size:19px}
  .reken th,.reken td{padding:9px 4px;font-size:14px}
  .cta{padding:38px 22px}
  .usp{width:100%}
  .logo .naam{font-size:19px}
  .logo .naam span{font-size:9px}
}
@media print{header,.zweef,.balkonder,.offerte,footer .kolommen,.cookiebalk{display:none!important}body{background:#fff;color:#000}a{color:#000}}

/* Zonder JavaScript: alles zichtbaar en alle vragen in beeld, plus een
   uitwijkroute per e-mail omdat het versturen JavaScript nodig heeft. */
html.no-js .reveal,html.no-js .stagger>*{opacity:1;transform:none}
html.no-js .stap{display:block;border-top:1px solid var(--lijn);padding-top:14px;margin-top:14px}
html.no-js .stap:first-of-type{border-top:0;padding-top:0;margin-top:0}
html.no-js .stapteller,html.no-js .balk,html.no-js .terug,html.no-js [data-volgende],html.no-js [data-verstuur]{display:none}
html.no-js .geenjs{display:block}
.geenjs{display:none;background:rgba(201,168,92,.12);border:1px solid var(--lijn2);border-radius:11px;padding:12px 14px;font-size:14.5px;margin-top:14px}

/* Rekenvoorbeeld op telefoonformaat: geen tabel die buiten de kaart loopt,
   maar een blok per aankoopbedrag met de looptijden eronder. */
.reken td small{display:block;color:var(--dim);font-size:12.5px}
@media (max-width:640px){
  .reken table,.reken tbody,.reken tr,.reken td{display:block;width:100%}
  .reken thead{position:absolute;left:-10000px}
  .reken tr{border:1px solid var(--lijn);border-radius:12px;padding:6px 14px 10px;margin-bottom:12px;background:rgba(255,255,255,.02)}
  .reken td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--lijn);padding:10px 0}
  .reken tr td:last-child{border-bottom:0}
  .reken td::before{content:attr(data-label);color:var(--dim);font-size:13px;letter-spacing:.02em}
  .reken td.bedrag{font-family:Cormorant,Georgia,serif;font-size:22px;color:var(--tekst);border-bottom:1px solid var(--lijn2)}
  .reken td.bedrag::before{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
  .reken td b{font-size:20px}
  .reken td small{display:inline;margin-left:6px;font-size:12px}
}