/*
 * bestegrasmaaier.nl - componenten
 * Gebruikt uitsluitend de tokens uit tokens.css.
 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.bgm{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--geist);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--w-regular);-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;
}

h1,h2,h3,h4{font-family:var(--geist);font-weight:var(--w-semibold);margin:0;color:var(--ink)}
h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--t-sub);line-height:var(--lh-sub);letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin-bottom:.35em}

/* Koppen staan in één lettertype. Een cursief serif-woord in een kop bleek
   te veel aandacht te trekken (Bram, 30 sep 2026). */
h1 em,h2 em,h3 em,.q em{font-family:inherit;font-style:normal;font-weight:inherit}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.smal{max-width:820px}
.num{font-variant-numeric:tabular-nums;font-weight:var(--w-semibold)}
.cap{font-size:var(--t-caption);line-height:1.4;color:var(--muted-2)}
.lbl{font-size:12px;font-weight:var(--w-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-8);
  font-family:var(--geist);font-size:var(--t-body-sm);font-weight:var(--w-medium);
  text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);border-radius:var(--r-btn);
  padding:9px 16px;background:var(--paper);color:var(--ink);
  transition:box-shadow .12s,transform .12s;
}
.btn:hover{box-shadow:var(--sh);transform:translate(-1px,-1px)}
.btn:active{box-shadow:none;transform:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}
.btn-lime{background:var(--lime)}
.btn-dark{background:var(--depth);color:var(--paper);border-color:var(--depth)}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--ink);border-radius:var(--r-pill);
  padding:4px 12px;font-size:12px;font-weight:var(--w-medium);
  text-transform:uppercase;letter-spacing:.08em;
}
.pill-lime{background:var(--lime)}
.status{
  background:var(--mint-wash);border:1px solid var(--mint);border-radius:var(--r-pill);
  padding:6px 12px;font-size:var(--t-caption);font-weight:var(--w-medium);
  display:inline-flex;align-items:center;gap:var(--s-8);text-transform:none;letter-spacing:0;
}
.status::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--mint);flex:0 0 auto}

/* ---------- kop van de site ---------- */
.kop{border-bottom:1px solid var(--rule);background:var(--paper)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);height:67px}
.merk{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:var(--w-semibold);font-size:17px;letter-spacing:-.02em}
.merk .mk{width:26px;height:26px;flex:0 0 auto;display:block}
.merk .mk img,.merk .mk svg{width:100%;height:100%;display:block}
.menu{display:flex;gap:26px}
.menu a{font-size:var(--t-body-sm);font-weight:var(--w-medium);text-decoration:none}
.menu a:hover{text-decoration:underline;text-underline-offset:4px}
.menu a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--lime)}
.kop-rechts{display:flex;align-items:center;gap:14px}
.menuknop{display:none}

/* ---------- band met contourwatermerk ---------- */
.band{position:relative}
.band>.wrap{position:relative;z-index:1}
.topo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.topo img{width:100%;height:100%;object-fit:cover}
.halo{
  position:absolute;top:-220px;right:-180px;width:760px;height:640px;border-radius:999px;
  background:radial-gradient(closest-side,rgba(163,230,53,.5),rgba(163,230,53,0));
  pointer-events:none;z-index:0;
}
.cream{background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--sectie) 0}

/* ---------- pagina-indeling ---------- */
.hero{padding:var(--s-56) 0 var(--s-40);overflow:hidden}
.hero h1{margin:var(--s-16) 0 var(--s-20);max-width:18ch}
.dek{font-size:var(--t-sub);line-height:1.5;color:var(--muted);max-width:56ch}
section{padding:var(--sectie) 0}
section>.wrap>h2+.intro{margin-top:10px}
.intro{font-size:var(--t-body);color:var(--muted);max-width:58ch;margin:0 0 var(--s-24)}
.kruimel{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--t-caption);color:var(--muted-2);margin-bottom:var(--s-16)}
.kruimel a{color:var(--muted-2)}

/* ---------- kaart ---------- */
.kaart{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-24)}
.kaart-cream{background:var(--cream)}
.kaart-hard{border-color:var(--ink);box-shadow:var(--sh)}

/* ---------- statistiektegels ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16)}
.stats.drie{grid-template-columns:repeat(3,1fr)}
.stats.twee{grid-template-columns:1fr 1fr}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px var(--s-24)}
.stat .v{font-size:48px;font-weight:var(--w-semibold);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stat.mark .v{display:inline-block;background:var(--lime);padding:2px 10px;border-radius:var(--r-btn);margin-left:-4px}
.stat .d{font-size:17px;color:var(--muted);line-height:1.4;margin-bottom:var(--s-8)}
.stat .s{font-size:var(--t-caption);color:var(--muted-2)}

/* ---------- de rekening ---------- */
.rekening{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.rekening .k{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-24)}
.rekening .k.win{border-color:var(--ink);box-shadow:var(--sh)}
.rekening .naam{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--t-sub);font-weight:var(--w-semibold);letter-spacing:-.02em;margin-bottom:var(--s-16)}
.rekening .big{display:flex;align-items:baseline;gap:var(--s-8)}
.rekening .big .v{font-size:40px;font-weight:var(--w-semibold);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.rekening .big .u{font-size:15px;color:var(--muted-2)}
.rekening .sub{font-size:var(--t-body-sm);color:var(--muted);margin:6px 0 var(--s-16)}
.posten{border-top:1px solid var(--rule);padding-top:var(--s-12)}
.posten div{display:flex;justify-content:space-between;gap:var(--s-12);font-size:15px;padding:4px 0;color:var(--muted)}
.posten span:last-child{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:var(--w-medium)}
.aannames{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-20)}
.aannames span{font-size:13px;color:var(--muted-2);border:1px solid var(--rule);background:var(--paper);border-radius:var(--r-pill);padding:5px var(--s-12)}

/* rekenkaart, de samenvatting rechtsboven */
.rekenkaart{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.rekenkaart .h{padding:13px var(--s-20);border-bottom:1px solid var(--rule);background:var(--cream)}
.rekenkaart ul{margin:0;padding:6px var(--s-20) var(--s-16);list-style:none}
.rekenkaart li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:var(--t-body-sm);color:var(--muted);margin:0}
.rekenkaart li:last-child{border-bottom:0}
.rekenkaart b{font-size:21px;font-weight:var(--w-semibold);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rekenkaart li.hl b{background:var(--lime);padding:1px 7px;border-radius:3px}

/* ---------- adviesblok ---------- */
.advies{background:var(--depth);color:var(--paper);border-radius:var(--r-card);padding:var(--s-40) 44px 36px;box-shadow:var(--sh)}
.advies h3{color:var(--paper);margin:var(--s-16) 0;max-width:28ch;font-size:28px}
.advies p{color:#d6d6d6;max-width:64ch}
.advies .num{color:var(--paper)}
.advies .pill{border-color:#6b6b6b;color:#e8e8e8}
.advies mark{background:var(--lime);color:var(--ink);padding:1px 6px;border-radius:3px}
.advies .melding{font-size:var(--t-caption);color:#9e9e9e;margin:var(--s-16) 0 0}
.melding{font-size:var(--t-caption);color:var(--muted-2);margin-top:14px}

/* ---------- wel/niet ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16)}
.split .k{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px 28px 24px}
.split h3{font-size:22px;margin-bottom:var(--s-16)}
.split ul{margin:0;padding:0;list-style:none}
.split li{padding:11px 0 11px 30px;position:relative;font-size:17px;line-height:1.45;color:var(--muted);border-top:1px solid var(--rule);margin:0}
.split li:first-child{border-top:0}
.split li::before{
  position:absolute;left:0;top:12px;width:19px;height:19px;border-radius:3px;
  display:grid;place-items:center;font-size:12px;font-weight:var(--w-semibold);
  line-height:1;border:1px solid var(--ink);
}
.split .ja li::before{content:"\2713";background:var(--lime);color:var(--ink)}
.split .nee li::before{content:"\00d7";background:var(--paper);color:var(--ink)}

/* ---------- tabel ---------- */
.tabel{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
.tabel table{border-collapse:collapse;width:100%;min-width:640px;font-size:17px}
.tabel th,.tabel td{text-align:left;padding:15px var(--s-20);border-bottom:1px solid var(--rule);vertical-align:middle}
.tabel thead th{font-size:12px;font-weight:var(--w-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);background:var(--cream)}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tr.keus{background:var(--cream)}
.tabel .model{font-weight:var(--w-semibold);font-size:var(--t-body);display:block;letter-spacing:-.02em}
.tabel .voor{font-size:14.5px;color:var(--muted-2);display:block;margin-top:2px}
.tabel td.r{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:var(--w-medium)}

/* ---------- eigen ervaring ---------- */
.quote{display:grid;grid-template-columns:1.9fr 1fr;gap:var(--s-56);align-items:start}
.quote .q{font-size:36px;font-weight:var(--w-semibold);line-height:1.18;letter-spacing:-.018em;margin:0 0 26px}
.quote .body p{color:var(--muted);font-size:17px}
.bio{display:flex;align-items:center;gap:var(--s-12);margin-bottom:var(--s-20)}
.bio .av{width:48px;height:48px;border-radius:999px;background:var(--depth);color:var(--lime);display:grid;place-items:center;font-weight:var(--w-semibold);font-size:var(--t-body-sm);flex:0 0 auto}
.bio .nm{font-size:var(--t-body-sm);font-weight:var(--w-medium);line-height:1.3;display:block}
.bio .ro{font-size:var(--t-caption);color:var(--muted-2);line-height:1.3;display:block}
.fotokaart{border:1px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;background:var(--paper)}
.fotokaart img{width:100%;height:200px;object-fit:cover}
.fotokaart .cp{padding:14px var(--s-16);border-top:1px solid var(--rule)}

/* ---------- veelgestelde vragen ---------- */
.faq dl{margin:0;border-top:1px solid var(--rule)}
.faq dt{font-size:var(--t-sub);font-weight:var(--w-semibold);letter-spacing:-.02em;padding:22px 0 var(--s-8)}
.faq dd{margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--rule);color:var(--muted);font-size:17px}

/* ---------- voettekst ---------- */
.voet{background:var(--cream);border-top:1px solid var(--rule);padding:var(--s-40) 0 var(--s-64);font-size:15px;color:var(--muted-2)}
.voet a{color:var(--muted-2)}
.voet .kolommen{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-32);margin-bottom:var(--s-32)}
.voet h4{font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:var(--s-12)}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin-bottom:7px}
.voet .onder{display:flex;justify-content:space-between;gap:var(--s-24);flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:var(--s-20)}

/* ---------- lopende tekst in een pagina ---------- */
.inhoud{max-width:760px}
.inhoud h2{margin:var(--s-56) 0 var(--s-16)}
.inhoud h3{margin:var(--s-32) 0 var(--s-12)}
.inhoud>*:first-child{margin-top:0}
.inhoud a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule);text-decoration-thickness:2px}
.inhoud a:hover{text-decoration-color:var(--lime)}
.inhoud figure{margin:var(--s-32) 0}
.inhoud figure img{border:1px solid var(--rule);border-radius:var(--r-card)}
.inhoud figcaption{margin-top:var(--s-8);font-size:var(--t-caption);color:var(--muted-2)}

/* ---------- smal scherm ---------- */
@media (max-width:940px){
  .menu{
    display:none;position:absolute;top:67px;left:0;right:0;z-index:30;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;gap:0;padding:var(--s-8) var(--gutter) var(--s-16);
  }
  .menu.open{display:flex}
  .menu a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .menuknop{display:inline-flex}
  .kop{position:relative}
  .stats,.stats.drie{grid-template-columns:1fr 1fr}
  .rekening,.split,.quote{grid-template-columns:1fr}
  .voet .kolommen{grid-template-columns:1fr 1fr}
  .advies{padding:28px var(--s-24) 26px}
  .stat .v{font-size:40px}
  .quote .q{font-size:26px}
  .hero{padding:var(--s-40) 0 30px}
}
@media (max-width:560px){
  .stats,.stats.drie,.stats.twee{grid-template-columns:1fr}
  .voet .kolommen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- keuzehulp ---------- */
.tool{
  background:var(--cream);border:1px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--sh);margin:36px 0 0;overflow:hidden;
}
.tool-hd,.tool-ft{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);
  padding:var(--s-16) 26px;background:var(--paper);flex-wrap:wrap;
}
.tool-hd{border-bottom:1px solid var(--rule)}
.tool-ft{border-top:1px solid var(--rule)}
.voortgang{display:flex;align-items:center;gap:10px}
.balk{width:190px;height:6px;background:var(--rule);border-radius:999px;overflow:hidden}
.balk i{display:block;height:100%;background:var(--lime);border-right:1px solid var(--ink);transition:width .25s}
.tool-bd{padding:34px 36px 30px;min-height:330px}

.vraag{display:none}
.vraag.on{display:block}
.vraag h2{font-size:32px;margin-bottom:6px}
.vraag .hint{color:var(--muted);font-size:17px;margin-bottom:22px;max-width:60ch}
.opties{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-12)}
.opt{
  text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:var(--s-16) 18px;cursor:pointer;font-family:var(--geist);font-size:17px;color:var(--ink);
  transition:box-shadow .12s,transform .12s,border-color .12s;
}
.opt:hover{border-color:var(--ink);box-shadow:var(--sh);transform:translate(-1px,-1px)}
.opt.sel{border-color:var(--ink);background:var(--lime);box-shadow:var(--sh)}
.opt b{display:block;font-weight:var(--w-semibold);letter-spacing:-.01em;margin-bottom:3px}
.opt span{display:block;font-size:14.5px;color:var(--muted);line-height:1.35}
.opt.sel span{color:#3f4a24}

.u-top{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s-32);align-items:start}
.u-top h2{margin:10px 0 14px}
.redenen{margin:0;padding:0;list-style:none}
.redenen li{
  padding:10px 0 10px 28px;position:relative;border-top:1px solid var(--rule);
  font-size:17px;color:var(--muted);line-height:1.45;margin:0;
}
.redenen li:first-child{border-top:0}
.redenen li::before{
  content:"\2713";position:absolute;left:0;top:11px;width:19px;height:19px;
  border:1px solid var(--ink);border-radius:3px;background:var(--lime);
  display:grid;place-items:center;font-size:12px;font-weight:var(--w-semibold);color:var(--ink);line-height:1;
}
.niet{background:var(--depth);color:var(--paper);border-radius:var(--r-card);padding:26px 30px;margin-top:28px}
.niet h3{color:var(--paper);font-size:21px;margin-bottom:10px}
.niet p{color:#d6d6d6;margin:0;max-width:70ch;font-size:17px}
.niet .num{color:var(--paper)}
.niet mark{background:var(--lime);color:var(--ink);padding:1px 6px;border-radius:3px}
.modellen{margin-top:28px}

/* ---------- cookiebalk ---------- */
.bgm-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);border-top:1px solid var(--ink);
  padding:var(--s-16) 0;font-size:var(--t-body-sm);
}
.bgm-cookie[hidden]{display:none}
.bgm-cookie .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-20);flex-wrap:wrap}
.bgm-cookie p{margin:0;max-width:70ch;color:var(--muted)}
.bgm-cookie .knoppen{display:flex;gap:var(--s-12)}

/* ---------- legal ---------- */
.bgm-legal{font-size:var(--t-caption);color:var(--muted-2);line-height:1.5;border-top:1px solid var(--rule);padding-top:var(--s-20);margin-bottom:var(--s-20)}
.bgm-legal p{margin:0 0 6px}

@media (max-width:940px){
  .tool-bd{padding:var(--s-24) var(--s-20) 22px}
  .tool-hd,.tool-ft{padding:14px var(--s-20)}
  .balk{width:120px}
  .vraag h2{font-size:24px}
  .u-top{grid-template-columns:1fr;gap:var(--s-24)}
}

/* ---------- winstregel op een doelkaart ---------- */
.winst{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:15px;
  font-weight:600;color:var(--ink);line-height:1.4}
@media (min-width:561px){.stats .winst{min-height:calc(2em * 1.4)}}
.winst::before{content:"";flex:0 0 18px;width:18px;height:18px;margin-top:1px;border-radius:9999px;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}

/* ---------- doelkaart ---------- */
.doelkaart{transition:box-shadow .12s,transform .12s,border-color .12s}
.doelkaart:hover{border-color:var(--ink);box-shadow:var(--sh);transform:translate(-1px,-1px)}
.doelkaart h3 a,.doelkaart h3{color:var(--ink)}
.stat h3 a{text-decoration:none}
.stat h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime);text-decoration-thickness:2px}

/* Hero met foto: de kaart mag niet smaller dan leesbaar */
.hero .u-top{grid-template-columns:1.1fr .9fr}
@media (max-width:940px){ .hero .u-top{grid-template-columns:1fr} }

/* Op een telefoon past de knop naast het logo en de menuknop niet.
   Aanbiedingen staat dan in het uitklapmenu. */
@media (max-width:560px){
  .kop-rechts .btn-lime{display:none}
  .menu .alleen-smal{display:flex}
}
.menu .alleen-smal{display:none}

/* ---------- tabel in lopende tekst ---------- */
.inhoud table,table.tabelinline{
  border-collapse:collapse;width:100%;font-size:16px;margin:var(--s-24) 0;
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;
}
.inhoud th,.inhoud td,table.tabelinline th,table.tabelinline td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top;
}
.inhoud thead th,table.tabelinline thead th{
  font-size:12px;font-weight:var(--w-medium);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-2);background:var(--cream);
}
.inhoud tbody tr:last-child td,table.tabelinline tbody tr:last-child td{border-bottom:0}
.inhoud td:not(:first-child),table.tabelinline td:not(:first-child){font-variant-numeric:tabular-nums}
.inhoud ol{padding-left:1.3em}
.inhoud ol li,.inhoud ul li{margin-bottom:.5em}
.inhoud h2{font-size:28px;letter-spacing:-.02em}
.inhoud h3{font-size:21px;letter-spacing:-.015em}
.inhoud strong{font-weight:var(--w-semibold)}
@media (max-width:560px){
  .inhoud table,table.tabelinline{font-size:15px;display:block;overflow-x:auto}
}

/* ---------- productfoto in een tabel ---------- */
.prod{display:flex;align-items:center;gap:var(--s-12)}
.pf{width:56px;height:56px;object-fit:contain;flex:0 0 auto;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-btn);padding:3px}
.pf-leeg{display:block;background:var(--cream)}
.tabel td .prod .model a{text-decoration:none}
.tabel td .prod .model a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime);text-decoration-thickness:2px}

/* ---------- tekening ---------- */
.figuur{
  margin:var(--s-32) 0;border:1px solid var(--rule);border-radius:var(--r-card);
  overflow:hidden;background:var(--paper);
}
.figuur svg{display:block;width:100%;height:auto}
.figuur figcaption{
  padding:12px 18px;border-top:1px solid var(--rule);background:var(--cream);
  font-size:var(--t-caption);line-height:1.45;color:var(--muted-2);
}
.inhoud .figuur{margin-left:0;margin-right:0}
.figuur-breed{margin-left:calc(-1 * var(--s-32));margin-right:calc(-1 * var(--s-32))}
@media (max-width:940px){ .figuur-breed{margin-left:0;margin-right:0} }

/* ---------- modelkaarten ---------- */
.modelblok{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16);margin:var(--s-24) 0 0}
.modelkaart{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;
}
.modelkaart.eerste{border-color:var(--ink);box-shadow:var(--sh)}
.mk-beeld{
  background:var(--cream);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:var(--s-20);min-height:180px;
}
.mk-beeld img{width:100%;height:150px;object-fit:contain;mix-blend-mode:multiply}
.mk-leeg{
  font-size:var(--t-caption);color:var(--muted-2);text-align:center;max-width:14ch;
  line-height:1.4;padding:var(--s-24) 0;position:relative;
}
.mk-leeg::before{
  content:"";display:block;width:56px;height:38px;margin:0 auto var(--s-12);
  border:1px solid var(--rule);border-radius:4px;
  background:repeating-linear-gradient(115deg,var(--rule) 0 3px,transparent 3px 8px);
}
.mk-tekst{padding:var(--s-20);display:flex;flex-direction:column;flex:1}
.mk-tekst h3{font-size:19px;margin:var(--s-8) 0 6px;letter-spacing:-.02em}
.mk-tekst .pill{align-self:flex-start}
.mk-voor{font-size:15px;color:var(--muted);line-height:1.4;margin-bottom:var(--s-16)}
.mk-feiten{margin:0 0 var(--s-16);padding:0}
.mk-feiten div{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:8px 0;border-top:1px solid var(--rule);font-size:15px;
}
.mk-feiten dt{color:var(--muted);margin:0}
.mk-feiten dd{margin:0;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.mk-feiten dd.hl{background:var(--lime);padding:1px 7px;border-radius:3px}
.mk-tekst .btn{margin-top:auto;justify-content:center}
@media (max-width:940px){ .modelblok{grid-template-columns:1fr} }

/* ---------- tabellen op een telefoon ----------
   Onder de 700 px staan de rijen als blokjes onder elkaar, met het
   kolomkopje voor de waarde. Horizontaal scrollen verbergt anders precies
   de kolommen waar het om gaat (gebruikerstest 30 sep 2026). */
@media (max-width:700px){
  .tabel,.inhoud table,table.tabelinline{overflow-x:visible;border:0;border-radius:0}
  .tabel table,.inhoud table,table.tabelinline{min-width:0;width:100%;border:0;display:block}
  .tabel thead,.inhoud thead,table.tabelinline thead{display:none}
  .tabel tbody,.inhoud tbody,table.tabelinline tbody{display:block}
  .tabel tbody tr,.inhoud tbody tr,table.tabelinline tbody tr{
    display:block;border:1px solid var(--rule);border-radius:var(--r-card);
    background:var(--paper);padding:var(--s-12) var(--s-16);margin-bottom:var(--s-12);
  }
  .tabel tbody tr.keus{border-color:var(--ink);box-shadow:var(--sh)}
  .tabel tbody td,.inhoud tbody td,table.tabelinline tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-16);
    padding:7px 0;border-bottom:1px solid var(--rule);text-align:right;
  }
  .tabel tbody tr td:last-child,.inhoud tbody tr td:last-child,table.tabelinline tbody tr td:last-child{border-bottom:0}
  .tabel tbody td::before,.inhoud tbody td::before,table.tabelinline tbody td::before{
    content:attr(data-label);text-align:left;flex:0 0 auto;
    font-size:13px;color:var(--muted-2);font-weight:var(--w-regular);
  }
  /* De eerste cel is de rijnaam: die krijgt geen label en staat als kop. */
  .tabel tbody td:first-child,.inhoud tbody td:first-child,table.tabelinline tbody td:first-child{
    display:block;text-align:left;font-weight:var(--w-semibold);
    padding-top:0;padding-bottom:var(--s-8);
  }
  .tabel tbody td:first-child::before,.inhoud tbody td:first-child::before,table.tabelinline tbody td:first-child::before{content:none}
  .tabel tbody td:first-child .voor{font-weight:var(--w-regular)}
  .tabel td .prod{justify-content:flex-start}
}

/* ---------- vaktaal met uitleg ---------- */
.term{position:relative;display:inline}
.term-woord{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;
  border-bottom:1px dashed var(--muted-2);
}
.term-woord:hover{border-bottom-color:var(--ink)}
.term-woord[aria-expanded="true"]{background:var(--lime);border-bottom-color:var(--ink)}
.term-uitleg{
  position:absolute;left:0;top:calc(100% + 10px);z-index:40;
  width:min(320px,calc(100vw - 40px));
  background:var(--paper);color:var(--muted);
  border:1px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:var(--s-16);font-size:15px;line-height:1.45;font-weight:var(--w-regular);
  text-align:left;
}
.term-uitleg[hidden]{display:none}
/* Aanwijzen toont de uitleg zonder JS; aantikken en focus gaan via het script. */
.term-woord:focus-visible + .term-uitleg[hidden]{display:block}
@media (hover:hover){
  .term:hover .term-uitleg[hidden]{display:block}
  .term:hover .term-woord{border-bottom-color:var(--ink)}
}
.term-uitleg::before{
  content:"";position:absolute;top:-7px;left:18px;width:11px;height:11px;
  background:var(--paper);border-left:1px solid var(--ink);border-top:1px solid var(--ink);
  transform:rotate(45deg);
}
@media (max-width:560px){
  .term-uitleg{left:auto;right:auto;position:fixed;bottom:var(--s-16);top:auto;left:var(--s-16);right:var(--s-16);width:auto}
  .term-uitleg::before{display:none}
}

/* ---------- merktegels ---------- */
.merken{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-12);margin:var(--s-24) 0}
.merk-tegel{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:var(--s-16);display:flex;flex-direction:column;gap:6px;
}
.merk-tegel .mt-naam{
  font-size:19px;font-weight:var(--w-semibold);letter-spacing:-.025em;
  padding-bottom:var(--s-8);border-bottom:2px solid var(--lime);align-self:flex-start;
}
.merk-tegel .mt-sterk{font-size:14.5px;color:var(--muted);line-height:1.4;margin-top:4px}
.merk-tegel .mt-let{font-size:13px;color:var(--muted-2);line-height:1.4;padding-top:6px;border-top:1px solid var(--rule);margin-top:auto}
@media (max-width:940px){ .merken{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .merken{grid-template-columns:1fr} }

/* ---------- ranglijst: de best beoordeelde modellen ---------- */
.rang{list-style:none;margin:var(--s-24) 0 0;padding:0;counter-reset:rang}
.rang-item{display:grid;grid-template-columns:40px 140px 1fr auto;gap:var(--s-16);align-items:center;
  padding:var(--s-20);border:1px solid var(--rule);border-radius:8px;background:var(--paper);margin-bottom:var(--s-12)}
.rang-item:first-child:not(.rang-keuze){border-color:var(--ink);box-shadow:var(--sh)}
.rang-keuze{border-color:var(--ink);box-shadow:var(--sh);background:var(--cream)}
.rang-nr{width:40px;height:40px;border-radius:9999px;background:var(--ink);color:var(--paper);display:flex;
  align-items:center;justify-content:center;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;font-size:17px}
.rang-nr-keuze{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/18px 18px no-repeat}
.rang-beeld{width:140px;height:120px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:6px}
.rang-beeld img{max-width:100%;max-height:120px;object-fit:contain;mix-blend-mode:multiply}
.rang-tekst h3{font-size:19px;margin:0 0 6px;letter-spacing:-.02em}
.rang-score{margin:0 0 8px;font-size:15px}
.rang-score b{font-size:17px}
.rang-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rang-specs li{font-size:13.5px;padding:3px 9px;border:1px solid var(--rule);border-radius:9999px;color:var(--ink);
  font-variant-numeric:tabular-nums;background:var(--paper)}
.rang-let{color:#9a3412;font-weight:var(--w-semibold)}
.rang-koop{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:170px;text-align:center}
.rang-prijs{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rang-koop .btn{justify-content:center}
.rang-uitleg{margin-top:var(--s-12)}
.rang-enkel{margin-top:var(--s-16)}
@media (max-width:760px){
  .rang-item{grid-template-columns:96px 1fr;grid-template-areas:"nr tekst" "beeld tekst" "koop koop";align-items:start}
  .rang-nr{grid-area:nr;width:36px;height:36px;font-size:15px}
  .rang-beeld{grid-area:beeld;width:96px;height:96px}
  .rang-tekst{grid-area:tekst}
  .rang-koop{grid-area:koop;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .rang-koop .btn{flex:1}
}

/* ---------- koopadvies in de nieuwe opbouw ---------- */
.koop h2{margin-bottom:var(--s-16)}
.koop .inhoud h3{margin-top:var(--s-24)}
.koop .inhoud h3:first-child{margin-top:0}
.koop .intro{margin-bottom:var(--s-8)}
/* "past niet bij": een kruis in plaats van een vinkje, zelfde lijststijl */
.redenen.nee li::before{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/11px 11px no-repeat;border:1.5px solid var(--ink)}
/* onze keuze staat in een halve kolom: altijd de gestapelde indeling */
.rang-enkel .rang-item{grid-template-columns:96px 1fr;grid-template-areas:"nr tekst" "beeld tekst" "koop koop";align-items:start}
.rang-enkel .rang-nr{grid-area:nr;width:36px;height:36px}
.rang-enkel .rang-beeld{grid-area:beeld;width:96px;height:96px}
.rang-enkel .rang-tekst{grid-area:tekst}
.rang-enkel .rang-koop{grid-area:koop;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.rang-enkel .rang-koop .btn{flex:1}

/* ---------- koopadvies: "waar je op let" en "functies" als begrippenlijst ---------- */
/* Zeven kop-plus-alinea's onder elkaar lezen als een ladder; term links en
   uitleg rechts maakt het scanbaar en geeft de pagina ritme. */
.letop{margin:0;display:grid;grid-template-columns:252px 1fr;column-gap:0;row-gap:0}
.letop dt{font-size:19px;font-weight:var(--w-semibold);letter-spacing:-.015em;color:var(--ink);padding:var(--s-20) var(--s-32) var(--s-20) 0;border-top:1px solid var(--rule)}
.letop dd{margin:0;padding:var(--s-20) 0;border-top:1px solid var(--rule);color:var(--muted);font-size:17px;line-height:1.55;max-width:62ch}
.letop dt:first-of-type,.letop dd:first-of-type{border-top:0;padding-top:0}
.letop dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule);text-decoration-thickness:2px}
.letop dd a:hover{text-decoration-color:var(--lime)}
@media (max-width:700px){
  .letop{grid-template-columns:1fr}
  .letop dt{padding-bottom:var(--s-4)}
  .letop dd{border-top:0;padding-top:0}
}
/* de twee keuzes als twee duidelijke blokken */
.keuzes>.u-top+.u-top{border-top:1px solid var(--rule);padding-top:var(--s-32);margin-top:var(--s-32)}
.keuzes .inhoud p:last-child{margin-bottom:0}
/* de score is het ordenende getal van de lijst en krijgt daarom de markering
   die elders de beslisgetallen hebben */
.rang-score b{background:var(--lime);padding:1px 7px;border-radius:3px;font-variant-numeric:tabular-nums}
.rang-item{transition:border-color .12s,box-shadow .12s,transform .12s}
.rang-item:hover{border-color:var(--ink);box-shadow:var(--sh);transform:translate(-1px,-1px)}
.rang-item:first-child:not(.rang-keuze):hover{transform:none}
.rang-tekst h3{text-wrap:balance}
::selection{background:var(--lime);color:var(--ink)}

/* ---------- koopadvies: grote keuzekaart (hero en adviesvlak) ---------- */
.keuze-kaart{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh);padding:var(--s-20) var(--s-20) var(--s-24)}
.keuze-kaart .lbl{margin:0 0 var(--s-12)}
.keuze-beeld{height:220px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;margin-bottom:var(--s-16)}
.keuze-beeld img{max-width:100%;max-height:220px;object-fit:contain;mix-blend-mode:multiply}
.keuze-kaart h3{font-size:24px;letter-spacing:-.02em;margin:0 0 var(--s-8);text-wrap:balance}
.keuze-score{margin:0 0 var(--s-12);font-size:16px;color:var(--muted);line-height:1.7}
.keuze-score mark{background:var(--lime);color:var(--ink);padding:1px 7px;border-radius:3px;font-weight:var(--w-semibold);font-size:18px;font-variant-numeric:tabular-nums}
.keuze-kaart .rang-specs{margin-bottom:var(--s-20)}
.keuze-koop{display:flex;align-items:center;gap:var(--s-16);flex-wrap:wrap}
.keuze-prijs{font-size:30px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.keuze-koop .btn{flex:1;justify-content:center;min-width:180px}
.hero-keuze{align-items:center}
.hero-keuze .dek{max-width:48ch}
/* het donkere adviesvlak met twee keuzes */
.keuze-paneel{padding:var(--s-40);margin-top:var(--s-8)}
.keuze-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-40)}
.keuze-kolom .keuze-kaart{box-shadow:none;border-color:transparent}
.keuze-waarom{margin-top:var(--s-20)}
.keuze-waarom p{color:#d6d6d6;font-size:16px;line-height:1.6;margin:0 0 .8em;max-width:none}
.keuze-waarom p:last-child{margin-bottom:0}
/* scorebalk in de lijst, en limoen voor de top 3 */
.rang-balk{height:6px;max-width:260px;background:var(--rule);border-radius:9999px;overflow:hidden;margin:0 0 10px}
.rang-balk i{display:block;height:100%;background:var(--lime);border-radius:9999px}
.rang-nr.top{background:var(--lime);color:var(--ink)}
/* vergelijkingstabel */
.vergelijking td,.vergelijking th{white-space:nowrap}
.vergelijking td:first-child{white-space:normal;min-width:220px}
.vergelijking tr.keus td{background:var(--cream)}
.vink{display:inline-block;width:18px;height:18px;border-radius:9999px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat;vertical-align:middle}
@media (max-width:900px){
  .hero-keuze{grid-template-columns:1fr}
  .keuze-grid{grid-template-columns:1fr}
  .keuze-paneel{padding:var(--s-24)}
}

.advies .keuze-kaart h3{color:var(--ink);font-size:24px;margin:0 0 var(--s-8);max-width:none}
.advies .keuze-kaart p{color:var(--muted);max-width:none}
.advies .keuze-kaart .keuze-prijs{color:var(--ink)}
.advies .keuze-kaart .lbl{color:var(--muted-2)}

/* ---------- taste-ronde 2 okt 2026 ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2{text-wrap:balance}
.btn{transition:background-color .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.btn:active{transform:translateY(1px)}
/* kaartlabel in zinnen, geen kleine kapitalen */
.kaart-label{font-size:15px;color:var(--muted-2);margin:0 0 var(--s-12)}
/* past bij / past niet bij: ruimte in plaats van dozen */
.past-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-56)}
.past-grid h3{font-size:21px;margin:0 0 var(--s-12)}
@media (max-width:700px){.past-grid{grid-template-columns:1fr;gap:var(--s-32)}}
/* waar je op let: tegels met het beslisgetal groot */
.spec-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.spec-tegel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-24)}
.spec-tegel.eerste{background:var(--cream);border-color:var(--ink);box-shadow:var(--sh)}
.spec-tegel.breed{grid-column:span 2}
.spec-getal{display:block;font-size:34px;font-weight:var(--w-semibold);letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums;margin-bottom:var(--s-12)}
.spec-tegel h3{font-size:18px;margin:0 0 var(--s-8)}
.spec-tegel p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;max-width:48ch}
@media (max-width:900px){.spec-tegels{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.spec-tegels{grid-template-columns:1fr}.spec-tegel.breed{grid-column:auto}}
/* onze keuze: één thema voor de hele pagina. Cream vlak met inktrand en de schaduw van het systeem. */
.keuze-paneel{background:var(--cream);border:1px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh);padding:var(--s-40)}
.keuze-kolom .keuze-kaart{box-shadow:none;border-color:var(--rule)}
.keuze-waarom p{color:var(--muted)}
.rang-balk{display:none}

/* brede tekening met gestapelde variant voor smalle schermen */
.fig-smal{display:none}
@media (max-width:700px){.fig-breed{display:none}.fig-smal{display:block}}

/* ---------- adviesblok (skill adviesblokken) ---------- */
.bgm__ed{margin:var(--s-32) 0;padding:var(--s-20) var(--s-24);border:1px solid var(--rule);border-left:3px solid var(--lime);border-radius:var(--r-card);background:var(--cream)}
.bgm__ed__l{font-size:12px;font-weight:var(--w-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin:0 0 6px}
.bgm__ed p:last-child{margin:0}
/* ---------- stappenplan ---------- */
.stappenplan{list-style:none;margin:var(--s-24) 0;padding:0;counter-reset:stap}
.stappenplan li{display:grid;grid-template-columns:40px 1fr;gap:var(--s-16);padding:var(--s-20) 0;border-top:1px solid var(--rule)}
.stappenplan li:first-child{border-top:0;padding-top:0}
.stappenplan .stap-nr{width:36px;height:36px;border-radius:9999px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:var(--w-semibold)}
.stappenplan h3{margin:4px 0 8px;font-size:20px}
.stappenplan p:last-child{margin-bottom:0}
.benodigd{margin:var(--s-24) 0;padding:var(--s-20) var(--s-24);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
.benodigd h3{margin:0 0 var(--s-12);font-size:18px}

/* ---------- ook handig om te weten ---------- */
.handig{margin:var(--s-40) 0 0;padding:var(--s-24);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--cream)}
.handig h3{margin:0 0 var(--s-12);font-size:19px}
.handig ul{list-style:none;margin:0;padding:0}
.handig li{padding:10px 0;border-top:1px solid var(--rule);font-size:16px}
.handig li:first-child{border-top:0;padding-top:0}
.handig li a{font-weight:var(--w-semibold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime);margin-right:6px}
.handig li span{color:var(--muted)}
.hero-foto img{height:280px}

/* ---------- gazonkalender ---------- */
.kalender{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16);margin:var(--s-24) 0}
.maand{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-20) var(--s-24);display:flex;flex-direction:column}
.maand header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);margin-bottom:6px}
.maand h3{margin:0;font-size:20px}
.maand .nu-label{font-size:12.5px;font-weight:var(--w-semibold);border-radius:9999px;padding:3px 10px;background:var(--ink);color:var(--paper);white-space:nowrap}
.maand .seizoen{color:var(--muted);font-size:15px;margin:0 0 var(--s-12)}
.maand ul{list-style:none;margin:auto 0 0;padding:0}
.maand li{font-size:15px;padding:8px 0 8px 18px;border-top:1px solid var(--rule);position:relative}
.maand li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:9999px;background:var(--lime)}
.maand li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.maand.nu{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.matrix-scroll{overflow-x:auto;margin:var(--s-24) 0 var(--s-8);-webkit-overflow-scrolling:touch}
table.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:640px}
table.matrix th,table.matrix td{padding:9px 6px;border-bottom:1px solid var(--rule);text-align:center}
table.matrix thead th{font-weight:var(--w-semibold);font-size:13px;color:var(--muted)}
table.matrix thead th abbr{text-decoration:none}
table.matrix tbody th{text-align:left;font-weight:var(--w-medium);white-space:nowrap;padding-left:0}
table.matrix tbody th a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
table.matrix td span{display:inline-block;width:14px;height:14px;border-radius:9999px;vertical-align:middle}
table.matrix td.vol span,.legenda .vol{background:var(--ink)}
table.matrix td.kan span,.legenda .kan{background:var(--paper);border:2px solid var(--ink);box-sizing:border-box}
table.matrix th.nu,table.matrix td.nu{background:var(--cream)}
.legenda{font-size:14px;color:var(--muted);margin:0 0 var(--s-24)}
.legenda span{display:inline-block;width:12px;height:12px;border-radius:9999px;vertical-align:-1px;margin:0 4px 0 8px}
.legenda span:first-child{margin-left:0}
@media (max-width:900px){.kalender{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kalender{grid-template-columns:1fr}}
/* De matrix blijft op mobiel een tabel en scrolt horizontaal; stapelen zou 13 kolommen onleesbaar maken. */
@media (max-width:700px){
  .inhoud table.matrix{display:table;min-width:640px;width:auto}
  .inhoud table.matrix thead{display:table-header-group}
  .inhoud table.matrix tbody{display:table-row-group}
  .inhoud table.matrix tbody tr{display:table-row;border:0;border-radius:0;padding:0;margin:0;background:none}
  .inhoud table.matrix tbody td{display:table-cell;padding:9px 6px;text-align:center;border-bottom:1px solid var(--rule)}
  .inhoud table.matrix tbody td::before{content:none}
}
table.matrix thead th:first-child,table.matrix tbody th{position:sticky;left:0;background:var(--paper);z-index:1}

/* ---------- hoofdmenu met uitklappanelen ---------- */
.kop .wrap{position:relative}
.mi{position:relative;display:flex;align-items:center}
.mi-top{text-decoration:none}
.mi-knop{background:none;border:0;padding:6px 4px;margin-left:-4px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;border-radius:6px}
.mi-knop svg{transition:transform .15s}
.mi.open .mi-knop svg,.mi:hover .mi-knop svg{transform:rotate(180deg)}
.mi-paneel{display:none}
@media (min-width:941px){
  .kop{position:relative}
  .mi{position:static}
  .mi-paneel{position:absolute;left:0;right:0;top:100%;z-index:40;padding:0 var(--gutter)}
  .mi:hover .mi-paneel,.mi.open .mi-paneel,.mi:focus-within .mi-paneel{display:block}
  .mi-binnen{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:var(--s-32);background:var(--paper);border:1px solid var(--rule);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 18px 50px rgba(21,23,26,.12),0 2px 6px rgba(21,23,26,.06);padding:var(--s-24)}
  .mi-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px var(--s-24);align-content:start}
  .mi-lijst.twee{grid-template-columns:1fr 1fr 1fr}
  .mi-lijst a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:var(--w-medium)}
  .mi-lijst a:hover{background:var(--cream)}
  .mi-lijst li:first-child a{font-weight:var(--w-semibold)}
  .mi-uit{display:block;text-decoration:none;border-radius:12px;overflow:hidden;background:var(--cream);border:1px solid var(--rule)}
  .mi-uit img{width:100%;height:160px;object-fit:cover}
  .mi-uit-kop{display:block;padding:12px 14px 2px;font-weight:var(--w-semibold);font-size:15px}
  .mi-uit-tekst{display:block;padding:0 14px 14px;font-size:14px;color:var(--muted);line-height:1.45}
}
@media (max-width:940px){
  .mi{flex-wrap:wrap;border-bottom:1px solid var(--rule)}
  .menu .mi-top{flex:1 1 auto;padding:12px 0;border-bottom:0}
  .mi-knop{padding:10px 8px;margin:0}
  .mi-paneel{flex:0 0 100%}
  .mi.open .mi-paneel{display:block;padding:0 0 var(--s-12)}
  .mi-lijst{list-style:none;margin:0;padding:0}
  .mi-lijst a{display:block;padding:9px 0 9px 14px;border-bottom:0;font-size:15px;text-decoration:none;color:var(--muted)}
  .mi-uit{display:none}
  .menu .alleen-smal{display:block;padding:12px 0}
}
/* Geen gat tussen link en paneel: het item vult de hele hoogte van de kop,
   zodat de muis onderweg naar beneden het item niet verlaat. */
@media (min-width:941px){
  .kop .wrap{align-items:stretch}
  .merk,.kop-rechts{align-self:center}
  .menu{align-self:stretch;align-items:stretch}
  .mi{align-self:stretch;align-items:center}
}

/* ---------- keuzehulp: stappen en uitslag ---------- */
.voortgang-stappen{display:inline-flex;gap:4px}
.voortgang-stappen i{display:block;width:22px;height:6px;border-radius:9999px;background:var(--rule);transition:background .2s}
.voortgang-stappen i.aan{background:var(--ink)}
.tool-tegels{margin-top:var(--s-24)}
.uitslag .niet p{margin:0 0 10px}
.uitslag .niet p:last-child{margin:0}
.keuze-leeg p{color:var(--muted);font-size:16px}
.uitslag .modellen .hint{color:var(--muted);font-size:16px;margin:4px 0 0;max-width:62ch}
.uitslag .knoprij{margin:var(--s-20) 0 0}
@media (max-width:560px){.voortgang-stappen i{width:14px}}

/* ---------- typekaarten op de homepage ---------- */
.typekaart{display:flex;flex-direction:column;text-decoration:none;padding:20px}
.typekaart-beeld{display:block;height:150px;margin:-4px 0 14px;border-radius:var(--r-card);background:var(--cream);display:grid;place-items:center;overflow:hidden}
.typekaart-beeld img{max-width:86%;max-height:134px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.typekaart h3{font-size:20px;margin:0 0 4px}
.typekaart .cap{margin:0 0 12px;color:var(--muted)}
.typekaart-rij{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px;margin-top:10px}
.typekaart-rij b{font-variant-numeric:tabular-nums;color:var(--ink)}
.typekaart-keuze{display:block;margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--muted-2)}

/* ---------- korte strook onder de hero ---------- */
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.kortstrip{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.kortstrip ul{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.kortstrip li{font-size:15px;color:var(--muted)}
.kortstrip b{color:var(--ink);font-weight:var(--w-semibold)}
.kortstrip > a{font-size:15px}
@media (max-width:600px){
  .hero-knoppen{flex-direction:column;align-items:stretch}
  .hero-knoppen .btn{width:100%}
  .kortstrip{display:block;margin-top:28px}
  .kortstrip .lbl{display:block;margin-bottom:10px}
  .kortstrip ul{display:block}
  .kortstrip li{padding:7px 0 7px 18px;position:relative;border-top:1px solid var(--rule)}
  .kortstrip li:first-child{border-top:0}
  .kortstrip li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:9999px;background:var(--lime)}
  .kortstrip > a{display:inline-block;margin-top:12px}
}
/* variant met het uitgelichte model in plaats van de kosten */
.typekaart-model{display:block;font-size:15px;color:var(--muted);margin-top:4px}
.typekaart-model b{color:var(--ink);font-weight:var(--w-semibold)}
.typekaart-meer{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;font-size:15px;font-weight:var(--w-semibold);color:var(--ink)}
.typekaart-meer::after{content:"\2192"}
.typekaart h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--lime)}