/* ============================================================
   SAMMENLIGNINGEN v3 — klasser: sm
   ============================================================ */
.sm{background:var(--papir)}
.sm__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,48px)}

/* ---------- hero ---------- */
.sm__helt{padding:clamp(48px,calc(8 * var(--vh,1vh)),104px) 0 clamp(40px,calc(6 * var(--vh,1vh)),64px);text-align:center;
  background:linear-gradient(180deg,var(--hvid) 0%,var(--papir) 100%)}
.sm__eb{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--text-3)}
.sm__h{margin:0;font-size:clamp(40px,6.2vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.sm__h span{display:block;color:var(--text-3)}
.sm__lede{margin:22px auto 0;max-width:640px;font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--text-2)}
.sm__helt .sm__eb,.sm__h,.sm__lede,.sm__vinder{animation:smOp .9s var(--ease-out) both}
.sm__h{animation-delay:.1s}.sm__lede{animation-delay:.25s}.sm__vinder{animation-delay:.4s}
@keyframes smOp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.sm__vinder{margin:clamp(32px,calc(5 * var(--vh,1vh)),52px) auto 0;max-width:900px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;
  align-items:end;text-align:left;background:#fff;border-radius:32px;padding:clamp(24px,3vw,40px);
  box-shadow:0 1px 0 rgba(21,23,22,.04),0 30px 60px -44px rgba(21,23,22,.45)}
.sm__badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--dig-flad);color:var(--dig-ink);
  font-size:12.5px;font-weight:600;white-space:nowrap}
.sm__vNavn{margin:14px 0 0;font-size:16px;color:var(--text-2)}
.sm__vPris{margin:4px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sm__vPris b{font-size:clamp(56px,6.4vw,92px);line-height:.95;letter-spacing:-.055em;font-variant-numeric:lining-nums proportional-nums}
.sm__vPris span{font-size:17px;color:var(--text-3)}
.sm__vSub{margin:10px 0 0;font-size:14.5px;color:var(--text-2);line-height:1.5}
.sm__vSub b{color:var(--pos-ink)}
.sm__vSoj{display:flex;align-items:flex-end;gap:6px;height:150px}
.sm__vSoj i{flex:1;border-radius:6px 6px 2px 2px;background:#dcded9;transition:height .7s cubic-bezier(.3,1.2,.4,1)}
.sm__vSoj i.dig{background:var(--dig)}

/* ---------- dine tal ---------- */
.sm__tal{position:sticky;top:var(--nav-h);z-index:30;padding:10px 0;transition:background .3s,box-shadow .3s,top .45s var(--ease-out);background:var(--papir)}
body:has(.nav.is-hidden) .sm__tal{top:0}
.sm__tal.er-fast{background:rgba(246,246,244,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 1px 0 var(--line)}
.sm__talIn{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);gap:12px}
.sm__f{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:baseline;column-gap:5px;row-gap:6px;
  background:#fff;border-radius:18px;padding:12px 16px 10px}
.sm__f label{font-size:12.5px;color:var(--text-3);grid-column:1}
.sm__f output{font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums;grid-column:2}
.sm__f small{font-size:11.5px;color:var(--text-3);grid-column:3}
.sm__f input[type=range]{grid-column:1/-1}
.sm__f--hus{grid-template-columns:1fr auto auto auto}
.sm__f--hus label{grid-column:1}
.sm__f--hus .sm__sw{grid-column:2;align-self:center}
.sm__f--hus output{grid-column:3}.sm__f--hus small{grid-column:4}
.sm__f--hus.er-fra output,.sm__f--hus.er-fra small,.sm__f--hus.er-fra input{opacity:.35}
.sm__husNote{grid-column:1/-1;margin:0;font-size:11.5px;line-height:1.4;color:var(--text-3);display:none}
.sm__f--hus:focus-within .sm__husNote,.sm__f--hus:hover .sm__husNote{display:block}
.sm__sw{all:unset;cursor:pointer;width:30px;height:18px;border-radius:999px;background:var(--flade-2);position:relative;transition:background .25s;margin:0 4px}
.sm__sw i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s var(--ease-spring)}
.sm__sw[aria-checked="true"]{background:var(--accent)}
.sm__sw[aria-checked="true"] i{transform:translateX(12px)}
.sm__sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sm input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0;cursor:pointer;--p:50%}
.sm input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--text-1) var(--p),var(--flade-2) var(--p))}
.sm input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--flade-2)}
.sm input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--text-1)}
.sm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 2px rgba(21,23,22,.25),0 3px 10px -3px rgba(21,23,22,.35)}
.sm input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 2px rgba(21,23,22,.25),0 3px 10px -3px rgba(21,23,22,.35)}
.sm input[type=range]:focus{outline:none}
.sm input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent)}

/* ---------- filtre og sortering ---------- */
.sm__res{padding:clamp(28px,calc(4 * var(--vh,1vh)),44px) 0 clamp(80px,calc(12 * var(--vh,1vh)),140px)}
.sm__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 28px;flex-wrap:wrap}
.sm__filt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 560px}
.sm__filtMere{display:none;flex-wrap:wrap;gap:8px;flex-basis:100%;order:10}
.sm__filt.er-aaben .sm__filtMere{display:flex}
.sm__filt button,.sm__filt select{font:inherit;font-size:13.5px;font-weight:500;color:var(--text-1);background:#fff;border:1px solid transparent;
  border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;line-height:1.2}
.sm__filt button:hover,.sm__filt select:hover{border-color:var(--line)}
.sm__filt button[aria-pressed="true"],.sm__filt select.on{background:var(--text-1);color:#fff}
.sm__filt button:focus-visible,.sm__filt select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm__filt .sm__mereK,.sm__filt .sm__nul{background:none;color:var(--text-2)}
.sm__filt .sm__mereK::after{content:" +";}
.sm__filt .sm__mereK[aria-expanded="true"]::after{content:" –"}
.sm__filt .sm__nul{color:var(--accent-ink);display:none}
.sm__filt.har-filt .sm__nul{display:inline-block}
.sm__sortBoks{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sm__ant{font-size:13px;color:var(--text-3)}
.sm__sort{display:flex;background:var(--flade);border-radius:999px;padding:4px}
.sm__sort button{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);padding:7px 13px;border-radius:999px;transition:background .25s,color .25s,box-shadow .25s}
.sm__sort button[aria-pressed="true"]{background:#fff;color:var(--text-1);box-shadow:0 1px 2px rgba(21,23,22,.12),0 3px 10px -6px rgba(21,23,22,.3)}
.sm__sort button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sm__leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 14px;font-size:12.5px;color:var(--text-3)}
.sm__leg span{display:inline-flex;align-items:center;gap:7px}
.sm__leg i{width:9px;height:9px;border-radius:3px}

/* ---------- kortene ---------- */
.sm__liste{display:grid;gap:12px}
.sm__k{background:#fff;border-radius:24px;transition:box-shadow .3s}
.sm__k:hover{box-shadow:0 18px 40px -32px rgba(21,23,22,.45)}
.sm__k.er-bedst{box-shadow:inset 0 0 0 1.5px var(--dig)}
.sm__k.er-valgt{box-shadow:inset 0 0 0 1.5px var(--text-1)}
.sm__row{display:grid;grid-template-columns:34px minmax(0,1.5fr) minmax(0,1.1fr) 150px 150px;gap:22px;align-items:center;padding:22px 24px}
.sm__nr{font-size:14px;font-weight:600;color:var(--text-3);font-variant-numeric:lining-nums proportional-nums;text-align:center;align-self:start;padding-top:4px}
.er-bedst .sm__nr{color:var(--dig-ink)}
.sm__brand{display:flex;align-items:center;gap:10px;height:22px}
.sm__brand img{max-height:20px;max-width:84px}
.sm__brand b{font-size:13px}
.sm__navn{margin:8px 0 0;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;line-height:1.15}
.sm__dom{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.er-bedst .sm__dom{color:var(--dig-ink)}
.sm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sm__tag{font-size:12px;color:var(--text-2);background:var(--papir);border-radius:999px;padding:4px 10px;white-space:nowrap}
.sm__tag--pos{color:var(--pos-ink);background:var(--pos-flad)}
.sm__tag--tjek{color:var(--warn-ink);background:var(--warn-flad)}
.sm__bar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;background:var(--flade)}
.sm__bar i{height:100%}
.sm__kwh{margin:10px 0 0;font-size:13px;color:var(--text-3)}
.sm__kwh b{color:var(--text-1);font-variant-numeric:lining-nums proportional-nums}
.sm__tp{margin:4px 0 0;font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.sm__stj{display:inline-flex;gap:2px}
.sm__stj i{width:9px;height:9px;background:#d7d9d4;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sm__stj i.on{background:#151716}
.sm__pris{text-align:right}
.sm__pris b{display:block;font-size:clamp(28px,2.4vw,34px);letter-spacing:-.04em;line-height:1;font-variant-numeric:lining-nums proportional-nums}
.sm__pris span{font-size:13px;color:var(--text-3)}
.sm__pris small{display:block;margin-top:6px;font-size:12.5px;color:var(--text-3)}
.sm__akt{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.sm__vaelg,.sm__fold{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;border-radius:999px;padding:9px 14px;transition:background .2s,color .2s,border-color .2s}
.sm__vaelg{border:1px solid var(--line);color:var(--text-1)}
.sm__vaelg i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--text-3);position:relative;transition:background .2s,border-color .2s}
.sm__vaelg[aria-pressed="true"]{background:var(--text-1);color:#fff;border-color:var(--text-1)}
.sm__vaelg[aria-pressed="true"] i{background:#fff;border-color:#fff}
.sm__vaelg[aria-pressed="true"] i::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid var(--text-1);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sm__fold{background:var(--papir);color:var(--text-1)}
.sm__fold svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s var(--ease-out)}
.sm__k.is-aaben .sm__fold svg{transform:rotate(180deg)}
.sm__vaelg:hover{border-color:var(--text-1)}
.sm__fold:hover{background:var(--flade)}
.sm__vaelg:focus-visible,.sm__fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* detaljer */
.sm__det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.sm__k.is-aaben .sm__det{grid-template-rows:1fr}
.sm__detIn{overflow:hidden}
.sm__detG{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:8px 24px 28px 80px;border-top:1px solid var(--line-soft);margin:0 24px;padding-left:56px;padding-top:24px}
.sm__det h4{margin:0 0 12px;font-size:14px;letter-spacing:-.01em}
.sm__det h4:not(:first-child){margin-top:22px}
.sm__calc{width:100%;border-collapse:collapse;font-size:13.5px}
.sm__calc td{padding:7px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.sm__calc td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums;font-weight:600;padding-left:12px}
.sm__calc td:first-child{display:flex;gap:9px}
.sm__calc td:first-child i{flex:none;width:9px;height:9px;border-radius:3px;margin-top:5px}
.sm__calc td span em{display:block;font-style:normal;font-size:12px;color:var(--text-3);margin-top:1px}
.sm__calc[data-total] tr[data-v]{cursor:pointer;transition:opacity .2s}
.sm__calc[data-total] tr[data-v]:hover td{color:var(--text-1)}
.sm__calc tr.is-af{opacity:.35;text-decoration:line-through}
.sm__calc tr.sum td{border-bottom:0;border-top:1.5px solid var(--text-1);font-weight:700;padding-top:10px}
.sm__calc tr.sum.is-aendret td{color:var(--dig-ink)}
.sm__hint,.sm__note{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.sm__note b{color:var(--text-2)}
.sm__pm{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px;color:var(--text-2)}
.sm__pm li{display:flex;gap:9px}
.sm__pm li::before{content:"+";font-weight:700;color:var(--pos-ink);width:10px}
.sm__pm li.minus::before{content:"–";color:var(--neg-ink)}
.sm__specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm__spec{display:flex;flex-direction:column;background:var(--papir);border-radius:12px;padding:8px 11px;font-size:13px}
.sm__spec i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.sm__links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.sm__links .btn{border-radius:999px;padding:10px 20px}
.sm__links .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sm__lnk{font-size:13.5px;font-weight:600;color:var(--accent-ink)}
.sm__tom{padding:48px;text-align:center;background:#fff;border-radius:24px;color:var(--text-2)}
.sm__kilde{margin:26px 0 0;font-size:13px;line-height:1.6;color:var(--text-3);max-width:80ch}

/* ---------- sammenlign-bjælken ---------- */
.sm__cmp{position:fixed;left:50%;bottom:22px;z-index:40;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(21,23,22,.92);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
  transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--ease-spring),opacity .3s;font-size:14px}
.sm__cmp.is-on{transform:translate(-50%,0);opacity:1}
.sm__cmp button{all:unset;cursor:pointer;color:rgba(255,255,255,.7);font-size:13.5px;border-radius:6px}
.sm__cmp button:hover{color:#fff}
.sm__cmp button:focus-visible,.sm__cmp .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sm__cmp .btn{border-radius:999px;padding:10px 18px;background:#fff;color:var(--text-1);border-color:#fff}
.sm__cmp .btn:hover{background:#eceee9}

/* ---------- mobil ---------- */
@media (max-width:1080px){
  .sm__row{grid-template-columns:28px minmax(0,1fr) 140px;grid-template-areas:"nr id pris" "nr mix akt";row-gap:14px}
  .sm__nr{grid-area:nr}.sm__id{grid-area:id}.sm__mix{grid-area:mix}.sm__pris{grid-area:pris;align-self:start}.sm__akt{grid-area:akt}
  .sm__detG{grid-template-columns:1fr 1fr;padding-left:24px}
  .sm__talIn{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .sm__vinder{grid-template-columns:1fr}
  .sm__vSoj{height:90px}
  .sm__tal{position:relative;top:0}
  .sm__talIn{grid-template-columns:1fr}
  .sm__row{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"nr id" "nr pris" "nr mix" "nr akt";padding:18px}
  .sm__pris{text-align:left}
  .sm__akt{flex-direction:row}
  .sm__akt>*{flex:1}
  .sm__detG{grid-template-columns:1fr;margin:0 18px;padding:20px 0 24px}
  .sm__sortBoks{width:100%}
  .sm__sort{overflow-x:auto;max-width:100%}
  .sm__cmp{left:16px;right:16px;transform:translateY(140%);justify-content:space-between}
  .sm__cmp.is-on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sm__helt .sm__eb,.sm__h,.sm__lede,.sm__vinder{animation:none}
  .sm__det{transition:none}
}