/* =====================================================================
   BELEGWIJZER DESIGN SYSTEM — v1
   Zweedse fintech-stijl · sparrengroen + mint + berkenwit
   Eén stylesheet voor alle pagina's. Pagina-specifieke stijlen horen
   NIET hier maar in een klein <style>-blok op de pagina zelf.
   ===================================================================== */

:root{
  /* kleuren */
  --snow:#F5F7F5;          /* berkenwit — paginakleur */
  --card:#FFFFFF;
  --ink:#111A15;
  --muted:#5A665F;
  --line:#E2E7E3;
  --line-strong:#CBD4CE;
  --gran:#17604D;          /* sparrengroen — primair accent */
  --gran-deep:#0C3A2E;
  --gran-donker:#092E25;   /* donkerste vlak: hero, eerlijk-blok */
  --gran-tint:#E9F1EA;
  --mint:#9FE8C6;          /* licht accent, alleen op donkere vlakken */
  --varn:#A8553F;          /* waarschuwing / minpunt */

  /* typografie */
  --disp:'Schibsted Grotesk',sans-serif;
  --body:'Inter',sans-serif;

  /* vorm */
  --r:16px;
  --r-groot:20px;
  --shadow:0 1px 2px rgba(17,26,21,.04), 0 8px 24px rgba(17,26,21,.06);
  --shadow-zweef:0 14px 34px rgba(17,26,21,.12);
  --shadow-groot:0 24px 60px rgba(9,46,37,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--snow);color:var(--ink);font-family:var(--body);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
a{color:inherit}
button{font-family:inherit}

/* ---- scroll-reveal (JS voegt .zichtbaar toe) ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   TOPBAR — donker, sticky, met segment-switcher voor de drie tools
   ===================================================================== */
.top{position:sticky;top:0;z-index:60;background:rgba(9,46,37,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.top-in{max-width:1160px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;gap:20px}
.merk{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:9px;color:#fff}
/* merk-teken: klokje in mint (wijzer op "tien over tien") */
.merk .wijzer{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--mint);position:relative;flex:none}
.merk .wijzer::before{content:"";position:absolute;left:5px;top:1px;width:2px;height:5px;background:var(--mint);transform-origin:50% 100%;transform:rotate(55deg)}
.merk .wijzer::after{content:"";position:absolute;left:5px;top:2px;width:2px;height:4px;background:var(--mint);transform-origin:50% 100%;transform:rotate(-55deg)}
.segment{margin-left:auto;display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:3px;gap:2px;overflow-x:auto}
.segment a{font-size:13px;font-weight:600;color:rgba(255,255,255,.65);text-decoration:none;padding:6px 14px;border-radius:100px;white-space:nowrap}
.segment a.on{background:#fff;color:var(--gran-deep)}
.segment a:not(.on):hover{color:#fff}
.segment a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.top .land{font-size:12px;font-weight:600;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:4px 8px}
@media(max-width:760px){.top .land{display:none}.segment a{padding:6px 10px}.top-in{padding:0 16px;gap:12px}}

/* =====================================================================
   HERO — donker sparrengroen paneel met mint-gloed
   ===================================================================== */
.heropaneel{background:
  radial-gradient(1100px 500px at 85% -10%, rgba(159,232,198,.16), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, rgba(23,96,77,.55), transparent 60%),
  linear-gradient(160deg, var(--gran-donker), var(--gran-deep) 55%, var(--gran))}
.hero{max-width:1160px;margin:0 auto;padding:72px 28px 88px;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;color:#fff}
.hero.enkel{grid-template-columns:1fr;padding-bottom:72px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:48px 28px 64px;gap:40px}}
.hero .eyebrow{font-size:12.5px;font-weight:600;color:var(--mint);display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;border:1px solid rgba(159,232,198,.35);border-radius:100px;padding:6px 14px}
.hero .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 2.4s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(159,232,198,.5)}55%{box-shadow:0 0 0 7px rgba(159,232,198,0)}}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(36px,5vw,58px);line-height:1.03;letter-spacing:-.027em;max-width:16ch}
.hero h1 .accent{color:var(--mint)}
.hero p.sub{margin-top:20px;color:rgba(255,255,255,.75);font-size:16.5px;max-width:44ch}
.hero .cta-rij{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

/* =====================================================================
   KNOPPEN
   ===================================================================== */
.knop{font-family:var(--disp);font-weight:700;font-size:15px;background:var(--mint);color:var(--gran-donker);border:none;border-radius:100px;padding:13px 26px;cursor:pointer;transition:transform .15s ease;text-decoration:none;display:inline-block}
.knop:hover{transform:translateY(-2px)}
.knop:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.knop-ghost{font-family:var(--disp);font-weight:600;font-size:15px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:13px 22px;cursor:pointer;text-decoration:none;display:inline-block}
.knop-ghost:hover{border-color:#fff}
.knop.groen{background:var(--gran);color:#fff;padding:11px 22px;font-size:14.5px}
.knop.groen:hover{background:var(--gran-deep)}
.knop.klein{padding:9px 16px;font-size:13.5px}
.knop-licht{font-family:var(--disp);font-weight:600;font-size:13.5px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:100px;padding:9px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.knop-licht:hover{border-color:var(--ink)}
.knop:disabled,.knop.groen:disabled{opacity:.45;cursor:default;transform:none}

/* =====================================================================
   ZWEVENDE KAART (hero-rechts: keuzehulp of ander werkend voorbeeld)
   ===================================================================== */
.hkaart{background:var(--card);border-radius:var(--r-groot);box-shadow:var(--shadow-groot);padding:26px;max-width:420px;justify-self:end;width:100%;color:var(--ink);transform:rotate(1.2deg);transition:transform .3s ease}
.hkaart:hover,.hkaart:focus-within{transform:rotate(0deg) translateY(-4px)}
@media(max-width:900px){.hkaart{justify-self:start;transform:none}}
.hkaart .hk-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hkaart .hk-titel{font-size:12.5px;font-weight:600;color:var(--muted)}
.hkaart .hk-stap{font-size:12.5px;font-weight:600;color:var(--gran)}
.hkaart h2{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.015em;margin:6px 0 16px}
.opties{display:flex;flex-direction:column;gap:8px}
.optie{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-weight:500;font-size:14.5px;cursor:pointer;background:var(--card);transition:border-color .15s ease;text-align:left;width:100%}
.optie:hover{border-color:var(--line-strong)}
.optie:focus-visible{outline:2px solid var(--gran);outline-offset:1px}
.optie .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);flex:none}
.optie .radio.vierkant{border-radius:5px}
.optie.gekozen{border-color:var(--gran);background:var(--gran-tint)}
.optie.gekozen .radio{border-color:var(--gran);background:radial-gradient(circle,var(--gran) 0 42%,transparent 46%)}
.optie.gekozen .radio.vierkant{background:var(--gran);position:relative}
.optie.gekozen .radio.vierkant::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.optie small{margin-left:auto;color:var(--muted);font-weight:400;font-size:12.5px}
.hk-voet{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hk-dots{display:flex;gap:6px}
.hk-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:all .25s ease}
.hk-dots i.aan{background:var(--gran);width:18px;border-radius:100px}

/* =====================================================================
   HOOK-STRIP — kaart die half over de hero-rand hangt, met teller
   ===================================================================== */
.hook{max-width:1160px;margin:-44px auto 0;padding:0 28px;position:relative;z-index:5}
.hook-in{background:var(--card);border:1px solid var(--line);border-radius:var(--r-groot);box-shadow:var(--shadow);padding:26px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
@media(max-width:820px){.hook-in{grid-template-columns:1fr;gap:14px}}
.hook .h-cijfer{font-family:var(--disp);font-weight:800;font-size:clamp(38px,4.4vw,54px);letter-spacing:-.03em;color:var(--gran-deep);line-height:1}
.hook .h-cijfer small{font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0}
.hook .h-tekst{font-size:15px;color:var(--muted);max-width:52ch}
.hook .h-tekst b{color:var(--ink)}
.hook .h-bron{font-size:12px;color:var(--muted);text-align:right;border-left:1px solid var(--line);padding-left:26px;line-height:1.5}
@media(max-width:820px){.hook .h-bron{border-left:none;padding-left:0;text-align:left}}

/* =====================================================================
   RAAMWERK — inhoudsopgave-rail links + inhoud rechts
   ===================================================================== */
.raam{max-width:1160px;margin:0 auto;padding:16px 28px 40px;display:grid;grid-template-columns:200px 1fr;gap:56px}
@media(max-width:900px){.raam{grid-template-columns:1fr;gap:0}}
.rail{position:sticky;top:84px;align-self:start;padding-top:44px}
@media(max-width:900px){.rail{display:none}}
.rail .r-kop{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.rail a{display:flex;gap:10px;align-items:baseline;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;padding:7px 0;border-left:2px solid transparent;padding-left:14px;margin-left:-16px;transition:color .15s ease,border-color .15s ease}
.rail a .r-nr{font-size:11px;font-variant-numeric:tabular-nums;color:var(--line-strong)}
.rail a:hover{color:var(--ink)}
.rail a.hier{color:var(--ink);border-left-color:var(--gran)}
.rail a.hier .r-nr{color:var(--gran)}
.rail .peildatum{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.rail .peildatum b{color:var(--ink);font-weight:600}

.inhoud{min-width:0}
section.blok{padding:44px 0;scroll-margin-top:84px}
section.blok+section.blok{border-top:1px solid var(--line)}
.blok-kop{margin-bottom:24px}
.blok-kop .b-nr{font-size:12.5px;font-weight:600;color:var(--gran)}
.blok-kop h2{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-top:4px}
.blok-kop p{color:var(--muted);margin-top:8px;max-width:58ch;font-size:14.5px}

/* =====================================================================
   MONOGRAMMEN — vaste kleur per aanbieder (uitbreidbaar)
   ===================================================================== */
.mono{width:40px;height:40px;border-radius:12px;font-family:var(--disp);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--gran-tint);color:var(--gran-deep)}
.mono.k-1{background:#E7ECFB;color:#2A3F8F}
.mono.k-2{background:#E5F2FB;color:#0E6BA8}
.mono.k-3{background:#FBEFE0;color:#9A6210}
.mono.k-4{background:#E9F6F0;color:#0F7A55}
.mono.k-5{background:#F1EAFB;color:#5A3C9E}
.mono.k-6{background:#FBE9E9;color:#A33434}
.mono.k-7{background:#FBECE2;color:#B25419}
.mono.k-8{background:#E6F4F4;color:#0F6B6B}

/* =====================================================================
   KAARTEN — matches, profielen, panelen
   ===================================================================== */
.matches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.matches{grid-template-columns:1fr}}
.match{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);position:relative;transition:transform .2s ease,box-shadow .2s ease}
.match:hover{transform:translateY(-4px);box-shadow:var(--shadow-zweef)}
.match.eerste{border-color:var(--gran)}
.match .m-tag{position:absolute;top:-11px;left:20px;background:var(--gran);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:100px;padding:3px 11px}
.m-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.m-naam{font-family:var(--disp);font-weight:700;font-size:16.5px}
.m-sub{font-size:12.5px;color:var(--muted)}
.m-past{font-size:13px;color:var(--muted);line-height:1.5;min-height:60px}
.m-past b{color:var(--ink);font-weight:600}
.m-regel{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-top:1px solid var(--line);gap:12px}
.m-regel .w{color:var(--muted)}
.m-regel .v{font-weight:600;text-align:right}
.m-voet{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.scorebar{height:6px;border-radius:100px;background:var(--line);overflow:hidden;margin:10px 0 4px}
.scorebar i{display:block;height:100%;background:var(--gran);border-radius:100px;transition:width .7s cubic-bezier(.2,.7,.2,1)}

.profielen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.profielen{grid-template-columns:1fr}}
.prof{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .3s ease}
.prof:hover{transform:translateY(-4px);box-shadow:var(--shadow-zweef)}
.prof.aangewezen{border-color:var(--gran);box-shadow:0 0 0 3px var(--gran-tint), var(--shadow-zweef)}
.prof .m-kop{margin-bottom:10px}
.prof .p-meta{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:10px}
.prof .p-meta b{color:var(--ink);font-weight:600}
.prof .plus,.prof .minnetje{font-size:13px;display:flex;gap:8px;padding:3px 0;color:var(--muted)}
.prof .plus::before{content:"+";color:var(--gran);font-weight:700;flex:none}
.prof .minnetje::before{content:"–";color:var(--varn);font-weight:700;flex:none}
.prof .p-voet{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.prof .p-past{font-size:13px;font-weight:600;color:var(--gran-deep)}

.paneel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.paneel .p-kop{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

/* =====================================================================
   TABEL
   ===================================================================== */
.tabelkaart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tabel-tools{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.filter{font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--snow);cursor:pointer;transition:border-color .15s ease}
.filter:hover{border-color:var(--line-strong)}
.filter:focus-visible{outline:2px solid var(--gran);outline-offset:1px}
.filter.aan{background:var(--gran-tint);border-color:var(--gran);color:var(--gran-deep);font-weight:600}
.tabel-tools .rechts{margin-left:auto;font-size:12.5px;color:var(--muted)}
.tscroll{overflow-x:auto}
table.bw{width:100%;border-collapse:collapse;min-width:760px}
table.bw th{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
table.bw th:hover{color:var(--ink)}
table.bw th .sorteer{color:var(--gran);font-weight:700}
table.bw td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.bw tr:last-child td{border-bottom:none}
table.bw tbody tr{transition:background .15s ease}
table.bw tr:hover td{background:#F7FAF8}
table.bw td .b{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
table.bw td .b .sub{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
table.bw td .mono{width:30px;height:30px;border-radius:9px;font-size:12px}
.stip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.stip.g{background:var(--gran)}
.stip.o{background:#C99A2E}
.stip.r{background:var(--varn)}
.ok{color:var(--gran);font-weight:700}
.nee{color:var(--line-strong);font-weight:700}
.min{color:var(--varn)}

/* =====================================================================
   FORMULIER-ELEMENTEN (calculator, invoer)
   ===================================================================== */
.veld{margin-bottom:20px}
.veld label{display:flex;justify-content:space-between;font-size:13.5px;font-weight:500;margin-bottom:10px;gap:10px}
.veld label .waarde{font-weight:700;color:var(--gran-deep)}
.veld .hint{font-size:12px;color:var(--muted);margin-top:6px}
.invoer{width:100%;font-family:var(--body);font-size:15px;font-variant-numeric:tabular-nums;padding:11px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink)}
.invoer:focus{outline:2px solid var(--gran);outline-offset:1px;border-color:var(--gran)}
.invoer-euro{position:relative}
.invoer-euro .invoer{padding-left:32px}
.invoer-euro::before{content:"€";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.keuzeregel{display:flex;gap:8px;flex-wrap:wrap}
.keuzeregel .filter{flex:1;text-align:center;min-width:64px}
input[type=range].glij{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:linear-gradient(to right,var(--gran) 0 var(--pct,50%),var(--line) var(--pct,50%) 100%);outline:none}
input[type=range].glij::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--gran);box-shadow:0 1px 4px rgba(17,26,21,.18);cursor:pointer}
input[type=range].glij::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--gran);box-shadow:0 1px 4px rgba(17,26,21,.18);cursor:pointer}
input[type=range].glij:focus-visible{outline:2px solid var(--gran);outline-offset:4px}

/* =====================================================================
   BALKENDIAGRAM (kostencalculator e.d.)
   ===================================================================== */
.balken .balk-rij{display:grid;grid-template-columns:150px 1fr 84px;gap:12px;align-items:center;padding:8px 0}
@media(max-width:560px){.balken .balk-rij{grid-template-columns:110px 1fr 74px}}
.balk-rij .naam{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.balk-rij .naam .nvt-tag{display:block;font-size:10.5px;font-weight:500;color:var(--varn)}
.balk-rij .spoor{height:22px;border-radius:6px;background:var(--snow);overflow:hidden}
.balk-rij .vulling{height:100%;background:var(--gran-tint);border-right:3px solid var(--gran);border-radius:6px 0 0 6px;width:var(--w,0%);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.balk-rij.top .vulling{background:var(--gran);border-right:none}
.balk-rij.nvt{opacity:.5}
.balk-rij.nvt .vulling{display:none}
.balk-rij .bedrag{font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap}
.balken .toel{font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.balken .toel b{color:var(--ink)}

/* gewichtsbalkjes (criteria) */
.gewicht{height:5px;border-radius:100px;background:var(--line);overflow:hidden}
.gewicht i{display:block;height:100%;background:var(--gran);border-radius:100px;width:0;transition:width .8s ease .15s}
.zichtbaar .gewicht i{width:var(--w)}
.zichtbaar .balk-rij .vulling{width:var(--w)}

/* criteria-lijst */
.criteria{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:700px){.criteria{grid-template-columns:1fr}}
.crit{padding:18px 0;border-top:1px solid var(--line);display:flex;gap:16px}
.crit .c-w{flex:none;width:64px}
.crit .gewicht{margin-top:9px}
.crit .c-wl{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.crit h3{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.crit p{font-size:13.5px;color:var(--muted);margin-top:4px}

/* =====================================================================
   EERLIJK-BLOK + FOOTER
   ===================================================================== */
.eerlijk{background:var(--gran-donker);color:#fff;border-radius:var(--r);padding:28px 30px;display:grid;grid-template-columns:auto 1fr;gap:18px;box-shadow:var(--shadow)}
@media(max-width:600px){.eerlijk{grid-template-columns:1fr}}
.eerlijk .schild{width:42px;height:42px;border-radius:12px;background:rgba(159,232,198,.15);display:flex;align-items:center;justify-content:center;color:var(--mint);font-family:var(--disp);font-weight:800;font-size:18px}
.eerlijk h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.eerlijk p{font-size:13.5px;color:rgba(255,255,255,.72);max-width:70ch}
.eerlijk p+p{margin-top:8px}
.eerlijk a{color:var(--mint)}

footer.voet{border-top:1px solid var(--line);margin-top:24px}
.voet-in{max-width:1160px;margin:0 auto;padding:34px 28px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:13px;color:var(--muted)}
.voet-in nav{display:flex;gap:18px;flex-wrap:wrap}
.voet-in a{text-decoration:none}
.voet-in a:hover{color:var(--ink)}
.voet-in .klein{flex-basis:100%;font-size:12px;max-width:78ch}

/* =====================================================================
   TEKSTPAGINA'S (over, privacy) — smallere kolom
   ===================================================================== */
.smal{max-width:760px;margin:0 auto;padding:0 28px}
article.tekst{padding:14px 0 30px}
article.tekst h2{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:34px 0 10px}
article.tekst p{color:var(--muted);font-size:15.5px}
article.tekst p+p{margin-top:10px}
article.tekst strong{color:var(--ink)}
article.tekst ul{margin:10px 0 0 20px;color:var(--muted);font-size:15.5px}
article.tekst li{margin-bottom:6px}
.kader{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:14px;box-shadow:var(--shadow)}
.kader .k-titel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gran);font-weight:700;margin-bottom:8px}

/* mail-reveal (over/privacy) */
.mailreveal .mr-prompt{font-size:14px;margin-bottom:12px;color:var(--muted)}
.mailreveal .mr-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mailreveal .mr-vraag{font-weight:600;font-size:15px;color:var(--ink);background:var(--snow);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.mailreveal .mr-input{font-size:15px;width:110px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);font-variant-numeric:tabular-nums}
.mailreveal .mr-input:focus{outline:2px solid var(--gran);outline-offset:1px;border-color:var(--gran)}
.mailreveal .mr-fout{font-size:13px;color:var(--varn);margin-top:10px}
.mailreveal .mr-uit{font-size:15px;margin-top:12px}
.mailreveal .mr-uit a{color:var(--ink);font-weight:600}

/* leeg / meldingen */
.leeg{font-size:14px;color:var(--muted);background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r);padding:22px;text-align:center}

/* =====================================================================
   TOEVOEGINGEN — door Opus, na overleg te bevestigen (OPUS-TAKEN §5)
   Niets hierboven is gewijzigd; dit zijn alleen aanvullingen die op
   meerdere pagina's nodig bleken.
   ===================================================================== */

/* 1. Calculator-tweeluik. Stond als inline style in brokerwijzer.html en
      klapte daardoor niet in op mobiel (horizontale scroll bij 380px). */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px}
@media(max-width:820px){.calc{grid-template-columns:1fr}}

/* 2. Brede contentkolom zonder rail (homepage). */
.breed{max-width:1160px;margin:0 auto;padding:0 28px}

/* 3. Tekstpagina-hero (over, privacy): zelfde vlak, rustiger schaal. */
.hero.enkel{padding-bottom:52px}
.hero.enkel h1{font-size:clamp(30px,4vw,44px);max-width:24ch}
.hero .datum{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}

/* 4. .optie ook bruikbaar als link (wegwijzer op de homepage). */
a.optie{text-decoration:none;color:inherit}
a.optie small{white-space:nowrap}

/* 5. Omschrijvingsregel in een .prof-kaart (homepage-toolkaarten). */
.prof p.omschrijving{font-size:14px;color:var(--muted);margin-bottom:12px}

/* =====================================================================
   RONDE 2 — keuzehulp-herbouw + anti-steriel-laag (senior)
   ===================================================================== */

/* Grote omlijnde sectienummers — alleen op rail-pagina's (.raam), zodat
   de homepage-koppen zonder nummer niet inspringen. */
.raam .blok-kop{position:relative;padding-left:70px;min-height:48px}
.raam .blok-kop .b-nr{position:absolute;left:0;top:0;font-family:var(--disp);font-weight:800;font-size:42px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--gran);opacity:.45}
@supports not (-webkit-text-stroke:1px black){.raam .blok-kop .b-nr{color:var(--gran-tint);opacity:1}}
.raam .blok-kop h2::after{content:"";display:block;width:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gran),var(--mint));margin-top:10px}
@media(max-width:560px){.raam .blok-kop{padding-left:56px}.raam .blok-kop .b-nr{font-size:34px}}

/* Zacht getint sectiepaneel — doorbreekt de witte kolom. */
section.blok.zacht{background:linear-gradient(180deg,#ECF3EE,var(--snow) 90%);border:1px solid var(--line);border-radius:20px;padding:34px 28px;border-top:1px solid var(--line)}
section.blok.zacht + section.blok{border-top:none}
@media(max-width:560px){section.blok.zacht{padding:26px 18px}}

/* Kaart-accent: gradientrand bovenop, altijd bij .eerste, anders op hover.
   GEEN overflow:hidden — anders snijdt de kaart de 'Beste match'-tag af. */
.match::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--gran),var(--mint));opacity:0;transition:opacity .2s ease}
.match .m-tag{z-index:2}
.match:hover::before,.match.eerste::before{opacity:1}
.prof{border-top:3px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.prof:hover{border-top-color:var(--gran)}

/* Klikbare tabelrijen (rijen met data-ga openen het profiel). */
table.bw tbody tr[data-ga]{cursor:pointer}
table.bw tbody tr[data-ga]:hover td:first-child{color:var(--gran-deep)}

/* Keuzehulp-chips (volwaardige sectie, naar het oude principe). */
.chip-groep{margin-bottom:22px}
.chip-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--ink);border:1px solid var(--line-strong);border-radius:100px;padding:8px 16px;background:var(--card);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.chip:hover{border-color:var(--gran)}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:2px solid var(--gran);outline-offset:1px}
.chip.aan{background:var(--gran);border-color:var(--gran);color:#fff;font-weight:600}

/* Logo in monogram-vak: officieel merklogo indien aanwezig, anders initialen.
   Bestanden zelf hosten in /logos/ — nooit hotlinken (privacyverklaring). */
.mono.heeft-logo{background:#fff;border:1px solid var(--line)}
.mono img{width:72%;height:72%;object-fit:contain;display:block}

/* Mint-streep ook op pagina's zonder rail (homepage), zonder de
   nummer-inspringing die alleen bij .raam hoort. */
.breed .blok-kop h2::after{content:"";display:block;width:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gran),var(--mint));margin-top:10px}


/* =====================================================================
   RONDE 3 — correcties na review
   ===================================================================== */

/* 1. Balkjes in de calculators werkten niet: .spoor/.vulling zijn <span>'s en
      een inline element negeert height/width. Blokkeren dus. */
.balk-rij .spoor,.balk-rij .vulling{display:block}

/* 2. Knoppen in kaarten altijd onder elkaar en even breed — voorheen wrapte
      de rij per kaart anders, wat onrustig oogde. */
.m-voet{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-wrap:nowrap}
.m-voet .knop,.m-voet .knop-licht{width:100%;text-align:center}

/* 3. Profielkaarten: knop altijd onderaan, ongeacht hoeveel plus/min-regels. */
.prof{display:flex;flex-direction:column}
.prof .p-voet{margin-top:auto}
.prof .p-voet .knop-licht{white-space:nowrap}

/* 4. Tekstpagina's links uitlijnen met de rest van de site: dezelfde
      containerbreedte als de hero, tekstkolom links daarbinnen. */
.smal{max-width:1160px;margin:0 auto;padding:0 28px}
.smal article.tekst{max-width:72ch;margin:0}

/* 5. Meer ruimte voor het balkenspoor: naamkolom smaller, zodat de
      vergelijking bij twaalf rijen leesbaar blijft. */
.balken .balk-rij{grid-template-columns:128px 1fr 78px}
@media(max-width:560px){.balken .balk-rij{grid-template-columns:96px 1fr 68px}}

/* 6. De gradientstreep bovenop de kaart was een 4px pseudo-element met de
      kaartradius (16px), wat vervormde uiteinden gaf, en hij liep bovendien
      achter het 'Beste match'-label door. Nu een crispe achtergrondlijn die
      de afronding vanzelf volgt, en alleen bij hover — de bestematchkaart is
      al herkenbaar aan zijn groene rand en label. */
.match::before{content:none}
.match{background-image:linear-gradient(90deg,var(--gran),var(--mint));
       background-repeat:no-repeat;background-position:top left;background-size:100% 0;
       transition:transform .2s ease,box-shadow .2s ease,background-size .18s ease}
.match:hover{background-size:100% 4px}
.match.eerste,.match.eerste:hover{background-size:100% 0}