/* Vergelijkingspagina's (/vergelijken). Alleen tokens uit site.css; ontwerp akkoord Jacky 10-11-2026. */

.vg .st{padding:56px 40px}
.vg .t{margin:10px 0 0}
.vg .sub{color:var(--ink3);font-size:17px;line-height:1.5;max-width:640px;margin:14px 0 0}

/* 1. kop */
.vg-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:72px!important}
.vg-hero h1{font-size:52px;line-height:1.04;letter-spacing:-.025em;margin:14px 0 0;font-weight:600}
.vg-hero h1 b{color:var(--violet);font-weight:600}
.vg-hero .act{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.vg-stamp{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font:500 12px var(--mono);color:var(--ink3);padding:6px 12px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.vg-stamp i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.vg-duo{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(20,10,60,.3);background:var(--paper)}
.vg-duo>div{padding:24px;display:flex;flex-direction:column;gap:14px}
.vg-duo>div+div{border-left:1px solid var(--line)}
.vg-duo .h{background:var(--vsofter)}
.vg-duo .nm{font-weight:600;font-size:20px;display:flex;align-items:center;gap:8px}
.vg-duo .nm .mk{width:22px;height:22px}
.vg-duo .ln{font-size:14px;color:var(--ink3);line-height:1.45}
.vg-duo .kv{border-top:1px solid var(--line);padding-top:12px}
.vg-duo .kv small{display:block;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:4px}
.vg-duo .kv b{font-size:15px;font-weight:500}
.vg-vs{grid-column:1/-1;text-align:center;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:10px;border-top:1px solid var(--line);background:var(--panel)}

/* 2. in het kort */
.vg-kort{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.vg-kort>div{border-radius:16px;padding:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.vg-kort>div.h{background:var(--vsofter);box-shadow:inset 0 0 0 1px var(--vsoft)}
.vg-kort h4{margin:0 0 12px;font-size:17px;font-weight:600}
.vg-kort ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--ink2);line-height:1.45}
.vg-kort li{padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px}
.vg-kort .h li:before{content:"✓";color:var(--violet);font-weight:600}
.vg-kort .o li:before{content:"→";color:var(--mute)}
.vg-kort .d p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}

/* 3. tabel */
.vg-tw{margin-top:32px;border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow-x:auto}
.vg-t{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.vg-t th,.vg-t td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.4}
.vg-t thead th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);background:var(--panel);position:sticky;top:0}
.vg-t th.h,.vg-t td.h{background:var(--vsofter)}
.vg-t thead th.h{color:var(--violet)}
.vg-t tbody th{color:var(--ink3);width:30%;font-weight:400}
.vg-t .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vg-t tr.vg-grp td{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--card);padding:10px 18px}
.vg-t sup a{font:500 10px var(--mono);color:var(--violet);margin-left:3px;text-decoration:none}
.vg-t .y{color:var(--good);font-weight:600}
.vg-t .p{color:var(--warn);font-weight:500}
.vg-t .x{color:var(--mute);font-weight:500}
.vg-leg{margin:12px 0 0;font-size:13px;color:var(--mute);line-height:1.5}

/* 4. rekenvoorbeeld */
.vg-rek{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
.vg-sl{margin-top:24px}
.vg-sl label{font:500 12px var(--mono);text-transform:uppercase;color:var(--ink3);display:flex;justify-content:space-between}
.vg-sl label b{color:var(--ink);font-size:14px}
.vg-sl input{width:100%;accent-color:var(--violet);margin-top:10px}
.vg-bars{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.vg-bar .r{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.vg-bar .r b{font-weight:600}
.vg-bar .trk{height:12px;border-radius:99px;background:var(--card);overflow:hidden}
.vg-bar .trk i{display:block;height:100%;border-radius:99px;background:var(--line2);transition:width .5s cubic-bezier(.22,1,.36,1)}
.vg-bar.h .trk i{background:var(--violet)}
.vg-bar small{display:block;margin-top:6px;font-size:12.5px;color:var(--mute);line-height:1.4}
.vg-lbl{display:inline-block;font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:99px;background:var(--warnsoft);color:var(--warn)}

/* 5. eerlijk */
.vg-eer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.vg-eer>div{border-radius:16px;padding:24px;box-shadow:inset 0 0 0 1px var(--line);background:var(--paper)}
.vg-eer h4{margin:0 0 8px;font-size:17px;font-weight:600}
.vg-eer p{margin:0;color:var(--ink3);font-size:15px;line-height:1.5}

/* 7. bronnen */
.vg-bron{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.vg-bron ol{margin:0;padding:0;list-style:none;counter-reset:b}
.vg-bron li{counter-increment:b;display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink2);align-items:baseline}
.vg-bron li:before{content:counter(b);font:500 12px var(--mono);color:var(--violet)}
.vg-bron li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.vg-bron li time{font:500 11px var(--mono);color:var(--mute);white-space:nowrap}
.vg-bron .nb{margin-top:18px;font-size:13.5px;color:var(--mute);line-height:1.5}

/* 8. andere vergelijkingen */
.vg-meer{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.vg-kaart{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s;color:inherit;text-decoration:none}
.vg-kaart:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--violet)}
.vg-kaart .vs{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.vg-kaart b{font-size:18px;font-weight:600}
.vg-kaart p{margin:0;font-size:14px;color:var(--ink3);line-height:1.45}
.vg-kaart .tg{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.vg-kaart .tg span{font:500 10px var(--mono);text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--card);color:var(--ink3)}
.vg-kaart.soon{opacity:.55;pointer-events:none}

/* hub */
.vg-filter{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px}
.vg-filter button{border:0;font:500 14px var(--sans);padding:8px 14px;border-radius:99px;background:var(--card);color:var(--ink2);cursor:pointer}
.vg-filter button.on{background:var(--ink);color:#fff}
.vg-filter button em{font-style:normal;font-size:11px;color:var(--warn);margin-left:4px}

@media (max-width:1000px){.vg .st{padding:40px 0}}
@media (max-width:900px){
  .vg-hero{grid-template-columns:1fr;gap:32px;padding-top:40px!important}
  .vg-hero h1{font-size:36px}
  .vg-kort,.vg-eer,.vg-rek,.vg-bron{grid-template-columns:1fr}
  .vg-meer{grid-template-columns:1fr 1fr}
  .vg-duo>div{padding:18px}
}
@media (max-width:560px){.vg-meer{grid-template-columns:1fr}.vg-duo{grid-template-columns:1fr}.vg-duo>div+div{border-left:0;border-top:1px solid var(--line)}}

.vg-hero h1 b,.vg-hub h1 b{color:var(--violet);font-weight:600}
.vg-hub{padding-top:72px!important}
.vg-hub h1{font-size:48px;line-height:1.05;letter-spacing:-.025em;margin:14px 0 0;font-weight:600;max-width:760px}
.vg-duo .kv sup a,.vg-bars sup a{font:500 10px var(--mono);color:var(--violet);margin-left:3px;text-decoration:none}
.vg-nb{color:var(--mute);font-size:12.5px;line-height:1.45}
.vg-eer.n3{grid-template-columns:repeat(3,1fr)}
.vg-filter button:disabled{cursor:default;opacity:.6}
.vg-lijst>[data-p]{display:flex}.vg-lijst>[data-p]>*{flex:1}.vg-lijst>[hidden]{display:none}
.vg-alle{margin:20px 0 0;font-size:15px}.vg-alle a{text-decoration:underline;text-underline-offset:3px}
.vg-bron .nb a{text-decoration:underline}
@media (max-width:900px){.vg-hub{padding-top:40px!important}.vg-hub h1{font-size:34px}.vg-eer.n3{grid-template-columns:1fr}}
@media (max-width:640px){
  .vg-t,.vg-t thead,.vg-t tbody{display:block}.vg-t{min-width:0;font-size:14px}
  .vg-t thead tr,.vg-t tbody tr{display:grid;grid-template-columns:1fr 1fr}
  .vg-t thead th:first-child{display:none}
  .vg-t tbody th{grid-column:1/-1;width:auto;padding:12px 14px 4px;border-bottom:0;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
  .vg-t td{padding:6px 14px 14px}
  .vg-t tbody tr.vg-grp{display:block}.vg-t tbody tr.vg-grp td{display:block;padding:10px 14px}
  .vg-t thead th{padding:12px 14px}
}