/* Feature comparer — premium decision table, 20 August 2026 */

body .werkbalk{
  margin:18px 0 20px;
  padding:16px 18px;
  border:1px solid #dfe6f1;
  border-radius:16px;
  background:#fff;
  display:grid;
  grid-template-columns:minmax(230px,1fr) auto auto;
}
body .kenmerk-zoeken{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  height:44px;
  padding:0 13px;
  border:1px solid #dbe3ef;
  border-radius:11px;
  background:#f8faff;
  color:#7d91b8;
}
body .kenmerk-zoeken:focus-within{border-color:#2e63f1;box-shadow:0 0 0 3px rgba(46,99,241,.10)}
body .kenmerk-zoeken input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#101b33;font:650 13.5px/1.2 Inter,system-ui,sans-serif}
body .kenmerk-zoeken input::placeholder{color:#8190aa}
body .schakel{gap:12px;font-size:15px;color:#101b33}
body .schakel .spoor{width:44px;height:24px;background:#d7e0ee}
body .schakel .spoor::after{width:20px;height:20px}
body .schakel input:checked + .spoor::after{left:22px}
body .schakel small{margin-left:8px;color:#8190aa;font-size:13px}

body .raam{
  grid-template-columns:224px minmax(0,1fr);
  gap:0;
  overflow:clip;
  border:1px solid #dbe3ef;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 50px -42px rgba(16,27,51,.38);
}
body .catlijst{
  top:90px;
  gap:5px;
  min-height:420px;
  padding:26px 18px;
  border-right:1px solid #dbe3ef;
  background:#f8faff;
}
body .catlijst-kicker{
  display:block;
  padding:0 10px 12px;
  color:#8a98b1;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body .catlijst button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:10px 11px;
  border-radius:12px;
  color:#61708b;
  font-size:14px;
  line-height:1.25;
}
body .catlijst button:hover{background:#eef3fb;color:#101b33}
body .catlijst button.actief{background:#e8efff;color:#245de8}
body .cat-aantal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:9px;
  background:#e9eef6;
  color:#71809a;
  font-size:12px;
  font-weight:800;
}
body .catlijst button.actief .cat-aantal{background:#d7e3ff;color:#245de8}

body .tafelkaart{border:0;border-radius:0;background:#fff}
body table{min-width:760px}
body th,body td{
  padding:18px 18px;
  border-bottom:1px solid #e2e8f2;
  font-size:14px;
  line-height:1.38;
  vertical-align:middle;
}
body thead th{padding-top:16px;padding-bottom:16px}
body th.kolkop{font-size:15px}
body .kolkop .kc{gap:12px}
body .kolkop img{width:30px;height:30px}
body .kolkop img.breed{width:58px}
body td.rijlabel,body th.rijlabel{
  min-width:220px;
  max-width:260px;
  font-size:14px;
  line-height:1.32;
  box-shadow:inset -1px 0 0 #dfe6f1;
}
body tr.sectie td{
  padding:12px 18px;
  background:#e9f0ff;
  color:#245de8;
  font-size:12px;
  letter-spacing:.13em;
}
body tr.kern-sectie td{background:#dfe9ff}
body tr.kern-sectie .sectie-naam{display:flex;align-items:center;gap:12px}
body tr.kern-sectie .sectie-naam small{color:#62708a;font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none}
body .sectie-naam{left:18px}

body .status-hoofd{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:29px;
  font-weight:800;
  line-height:1.2;
}
body .status-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:50%;
  font-size:14px;
  font-style:normal;
  font-weight:900;
  line-height:1;
}
body .ja.status-hoofd{color:#10965a}
body .ja .status-ico{background:#e5f7ef;color:#10965a}
body .nee.status-hoofd{color:#ba555c}
body .nee .status-ico{background:#fbeaec;color:#c2535a}
body .vw.status-hoofd{color:#9a5b00}
body .vw .status-ico{background:#fff0d6;color:#a45e00}
body .vw-noot,body .ja-noot,body .nee-noot{
  display:block;
  margin-top:5px;
  padding-left:36px;
  color:#6f7d98;
  font-size:11.5px;
  font-weight:650;
  line-height:1.35;
}
body .cel-open{padding-right:28px}
body .cel-pijl{right:3px;top:10px;width:8px;height:8px;border-width:0 2px 2px 0}
body .cel-open[aria-expanded="true"] .cel-pijl{top:13px}
body .cel-open:focus-visible{
  outline:2px solid #2e63f1;
  outline-offset:8px;
  border-radius:8px;
}
body .cel-detail{
  margin:10px 0 0 36px;
  padding:11px 0 0;
  border-top:1px solid #dfe6f1;
  color:#7c90b7;
  font-size:12px;
  line-height:1.45;
}
body .waarde{font-size:14px;font-weight:750}
body .data-freshness{display:block;margin-top:5px;color:#8a98b1;font-size:10.5px;font-weight:650;line-height:1.25}
body .vergelijk-badge{display:inline-flex;margin:7px 0 0;padding:3px 7px;border:1px solid #cbd7e8;border-radius:999px;color:#687791;font-size:9.5px;font-weight:850;line-height:1;text-transform:uppercase;letter-spacing:.04em}
body .vergelijk-badge.gunstig{border-color:#9bb7f9;background:#edf3ff;color:#245de8}
body td.heeft-detail a{font-weight:750;text-decoration:underline;text-underline-offset:2px}
body .meter{gap:10px;font-size:15px}
body .meter i{width:72px;height:7px}

body #vastekop .vk-cel{padding:12px 18px;font-size:14px}
body #vastekop .kc{gap:12px}
body #vastekop img{width:30px;height:30px}
body #vastesectie{padding:10px 18px;letter-spacing:.12em}

/* Motion hero: the existing image remains the LCP poster and mobile fallback. */
body .fx-hero{overflow:hidden}
body .fx-hero .fx-hero-poster{position:relative;z-index:0}
body .fx-hero .fx-hero-motion{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:center 38%;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
body .fx-hero.motion-ready .fx-hero-motion{opacity:1}
body .fx-hero.motion-ready::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(5,11,26,.64) 0%,rgba(5,11,26,.3) 42%,rgba(5,11,26,.08) 70%);
}
body .fx-hero .wrap{z-index:3}

@media (max-width:900px){
  body .fx-hero .fx-hero-motion{display:none}
  body .fx-hero img{height:132px}
  body .fx-hero h1{font-size:22px}
  body .werkbalk{padding:14px}
  body .werkbalk{grid-template-columns:minmax(0,1fr) auto}
  body .kenmerk-zoeken{grid-column:1/-1}
  body .raam{display:block;overflow:visible;border-radius:16px}
  body .catlijst{
    top:65px;
    min-height:0;
    padding:10px;
    border-right:0;
    border-bottom:1px solid #dbe3ef;
    background:#f8faff;
  }
  body .catlijst-kicker{display:none}
  body .catlijst button{min-height:40px;padding:7px 10px;white-space:nowrap}
  body .cat-aantal{min-width:25px;height:25px;border-radius:7px}
  body th,body td{padding:16px 15px}
  body td.rijlabel,body th.rijlabel{min-width:180px}
}

@media (max-width:600px){
  body .werkbalk{align-items:center;grid-template-columns:minmax(0,1fr);gap:9px;padding:11px}
  body .kenmerk-zoeken{height:42px}
  body .schakel{grid-column:1/-1;width:100%;min-width:0;font-size:14px}
  body .schakel small{display:block;margin:2px 0 0}
  body .acties{grid-column:1/-1;width:auto;gap:6px;justify-content:flex-end}
  body .acties button{padding:8px 10px;font-size:12px;text-align:center;white-space:nowrap}
  body tr.kern-sectie .sectie-naam{align-items:flex-start;flex-direction:column;gap:3px}
  body th,body td{padding:16px 14px;font-size:13px}
  body td.rijlabel,body th.rijlabel{min-width:158px;font-size:13px}
  body .status-hoofd{gap:8px}
  body .status-ico{width:27px;height:27px;flex-basis:27px;font-size:14px}
  body .vw-noot,body .ja-noot,body .nee-noot{padding-left:35px;font-size:11px}
  body .cel-detail{margin-left:35px}
}

@media (prefers-reduced-motion:reduce){
  body .fx-hero .fx-hero-motion{display:none!important}
}