/* ============================================================
   DØGNLANDSKABET — forsidens hero. Alle klasser starter med lx
   (tjekket: ingen kollision med resten af sitet).
   Palet: sitets egen — neutral, grøn = sitet, orange = dig.
   ============================================================ */
.lx{position:relative;padding:clamp(36px,calc(6 * var(--vh,1vh)),80px) 0 clamp(40px,calc(6 * var(--vh,1vh)),72px);overflow:hidden;
  background:linear-gradient(180deg,var(--hvid) 0%,var(--papir) 78%)}
.lx__top{max-width:980px;margin:0 auto;padding:0 clamp(20px,3.2vw,48px);text-align:center}
.lx__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;font-weight:500;
  color:var(--text-3);letter-spacing:.01em;opacity:0;animation:lxOp .8s var(--ease-out) .1s forwards}
.lx__puls{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.lx__puls::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent);
  opacity:0;animation:lxPuls 2.4s var(--ease-out) infinite}
.lx__h{margin:0;font-size:clamp(40px,min(6.2vw,calc(10.5 * var(--vh,1vh))),96px);line-height:.98;letter-spacing:-.045em;font-weight:700;color:var(--text-1);
  opacity:0;animation:lxOp 1s var(--ease-out) .2s forwards}
.lx__h span{display:block;color:var(--text-3);opacity:0;animation:lxOp 1s var(--ease-out) .55s forwards}
.lx__lede{margin:20px auto 0;max-width:640px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--text-2);
  opacity:0;animation:lxOp 1s var(--ease-out) .85s forwards}
@keyframes lxOp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lxPuls{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}

/* ---------- scenen ---------- */
.lx__stage{position:relative;margin-top:clamp(12px,calc(3 * var(--vh,1vh)),40px)}
.lx__scene{position:relative;height:clamp(320px,calc(46 * var(--vh,1vh)),520px);
  user-select:none;-webkit-user-select:none}
.lx__svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;touch-action:pan-y;cursor:crosshair}
.lx__scene:not(.is-klar) .lx__svg{opacity:0}
.lx__scene::before{content:"Henter strømpriserne…";position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  font-size:14px;color:var(--text-3);transition:opacity .4s}
.lx__scene.is-klar::before{opacity:0}
.lx__scene.is-fejl::before{content:"Strømpriserne kunne ikke hentes lige nu."}

.lx__linje{fill:none;stroke:var(--text-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lx__digL{fill:none;stroke:var(--dig);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.lx__fyld{transition:opacity .5s var(--ease-out)}
.lx__fyld.af{opacity:0 !important}
.lx__horisont{stroke:var(--line);stroke-width:1}
.lx__midnat{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.lx__akse text{font-size:11.5px;fill:var(--text-3);font-variant-numeric:lining-nums proportional-nums;letter-spacing:.02em}
.lx__akse .lx__dag{fill:var(--text-1);font-weight:600;text-transform:capitalize}
.lx__akse .lx__nuT{fill:var(--text-1);font-weight:700}

/* nørd-laget */
.lx__lagG{opacity:0;transition:opacity .55s var(--ease-out)}
.lx__lagG.on{opacity:1}
.lx__spotA{fill:rgba(21,23,22,.09)}
.lx__lagT{font-size:12px;font-weight:600;fill:var(--text-2);paint-order:stroke;stroke:rgba(246,246,244,.85);stroke-width:3px;pointer-events:none}
.lx__lagT--fast{fill:var(--accent-ink)}
.lx__fastA{fill:var(--accent-flad)}
.lx__fastL{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.55}

/* hover-markør */
.lx__mark{opacity:0;transition:opacity .2s;pointer-events:none}
.lx__mark line{stroke:var(--text-1);stroke-width:1;stroke-dasharray:1 3}
.lx__mark circle{fill:var(--hvid);stroke:var(--text-1);stroke-width:2}
.lx__tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .18s;
  background:var(--text-1);color:#fff;border-radius:10px;padding:7px 11px;font-size:13px;line-height:1.3;
  white-space:nowrap;text-align:center;box-shadow:var(--sh-2)}
.lx__tip.on{opacity:1}
.lx__tip b{font-variant-numeric:lining-nums proportional-nums}
.lx__tip span{display:block;font-size:11.5px;color:rgba(255,255,255,.66)}
.is-traek .lx__tip,.is-koer .lx__tip{opacity:0}

/* ladestander og kabel */
.lx__stander{transform-box:fill-box;transition:opacity .25s}
.lx__stander rect{fill:var(--text-1)}
.lx__stander .lx__skaerm{fill:var(--dig)}
.lx__kabel{fill:none;stroke:var(--text-1);stroke-width:1.6;stroke-linecap:round}
.lx__est{fill:rgba(246,246,244,.55)}
.lx__estL{stroke:var(--text-3);stroke-width:1;stroke-dasharray:1 4}
.lx__estT{font-size:12px;font-weight:600;fill:var(--text-2)}
.lx__estT2{font-size:11px;fill:var(--text-3)}
.lx__tip em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.85);text-align:left;margin-top:3px}
.lx__tip em i{width:8px;height:8px;border-radius:2px;flex:none}
.lx__tip em i.s{background:#b9bcb8}.lx__tip em i.f{background:#cfe3d8}
.lx__svarE{margin:8px auto 0;display:inline-block;font-size:13px;color:var(--warn-ink);background:var(--warn-flad);border-radius:999px;padding:5px 12px}
.lx__klar{stroke:var(--text-1);stroke-width:1.2;stroke-dasharray:3 4}
.lx__klarT{font-size:12px;font-weight:600;fill:var(--text-1);paint-order:stroke;stroke:rgba(246,246,244,.9);stroke-width:4px}
.lx__leder{stroke:var(--text-3);stroke-width:1;stroke-dasharray:2 4;transition:opacity .3s;pointer-events:none}

/* bilen */
.lx__bil{cursor:grab;outline:none;touch-action:none}
.is-traek .lx__bil{cursor:grabbing}
.lx__krop{fill:var(--text-1)}
.lx__rude{fill:#e9ebe7;opacity:.9}
.lx__lys{fill:#fff;opacity:.55}
.lx__daek{fill:var(--text-1);stroke:var(--papir);stroke-width:1.2}
.lx__faelg{fill:#c9ccc7}
.lx__eger{stroke:var(--text-1);stroke-width:.8}
.lx__port{fill:#3a3d3b;transition:fill .3s}
.lx__port.on{fill:var(--dig)}
.lx__fokus{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transition:opacity .15s}
.lx__bil:focus-visible .lx__fokus{opacity:1}
.lx__bil:hover .lx__krop{fill:#2a2d2b}

/* ---------- ladeuret ---------- */
.lx__ur{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:16px;
  padding:14px 20px 14px 14px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);border-radius:22px;
  box-shadow:0 1px 0 rgba(21,23,22,.04),0 18px 44px -20px rgba(21,23,22,.34);
  opacity:0;scale:.94;transition:opacity .55s var(--ease-out),scale .7s var(--ease-spring),transform .12s linear;
  pointer-events:none}
.lx__ur.is-inde{opacity:1;scale:1;pointer-events:auto}
.is-traek .lx__ur,.is-koer .lx__ur{transition:opacity .55s var(--ease-out),scale .7s var(--ease-spring),transform 0s}
.lx__urRing{position:relative;width:132px;height:132px;flex:none}
.lx__urRing svg{width:100%;height:100%;display:block}
.lx__urSpor{fill:none;stroke:var(--line-soft);stroke-width:1}
.lx__urB{stroke:var(--g,#d6d8d3);stroke-width:4.2;stroke-linecap:round;transition:stroke .3s}
.lx__urB.nu{stroke:var(--text-1)}
.lx__urB.dig{stroke:var(--dig)}
.lx__urH{font-size:7.5px;fill:var(--text-3);font-variant-numeric:lining-nums proportional-nums}
.lx__urKwh{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.lx__urKwh b{font-size:17px;letter-spacing:-.02em}
.lx__urKwh span{font-size:9.5px;color:var(--text-3);margin-top:2px}
.lx__urTxt{min-width:150px}
.lx__urLab{font-size:12px;color:var(--text-3);margin:0}
.lx__urT{display:block;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:2px 0 4px;
  font-variant-numeric:lining-nums proportional-nums}
.lx__urS{font-size:13px;color:var(--text-2);margin:0}
.lx__urP{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);font-size:19px;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums}
.lx__urP small{font-size:12px;font-weight:400;color:var(--text-3);letter-spacing:0}
.lx__urD{margin:2px 0 0;font-size:12.5px;color:var(--text-2)}
.lx__urD .pos{color:var(--pos-ink);font-weight:600}

/* ---------- svaret og knapperne ---------- */
.lx__bund{max-width:980px;margin:clamp(20px,calc(3 * var(--vh,1vh)),32px) auto 0;padding:0 clamp(20px,3.2vw,48px);text-align:center}
.lx__svar{min-height:84px}
.lx__svarH{margin:0;font-size:clamp(22px,2.3vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.lx__svarH em{font-style:normal;color:var(--dig-ink)}
.lx__svarP{margin:8px 0 0;font-size:16px;color:var(--text-2)}
.lx__tilbage{border:0;background:none;padding:0;font:inherit;color:var(--accent-ink);font-weight:600;cursor:pointer;
  border-radius:4px}
.lx__tilbage:hover{text-decoration:underline;text-underline-offset:3px}
.lx__tilbage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lx__knap{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.lx__lag{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--hvid);color:var(--text-1);
  font:inherit;font-size:14.5px;font-weight:500;padding:10px 18px;border-radius:999px;cursor:pointer;
  transition:border-color .2s,background .2s}
.lx__lag:hover{border-color:var(--text-1)}
.lx__lag:focus-visible,.lx .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lx__lag i{width:28px;height:16px;border-radius:999px;background:var(--flade-2);position:relative;transition:background .25s}
.lx__lag i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .3s var(--ease-spring)}
.lx__lag[aria-pressed="true"] i{background:var(--accent)}
.lx__lag[aria-pressed="true"] i::after{transform:translateX(12px)}
.lx .btn--primary{border-radius:999px;padding:12px 24px}
.lx__noegle{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:16px 0 0;font-size:13px;color:var(--text-2);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s}
.lx.is-lag .lx__noegle{max-height:120px;opacity:1}
.lx__noegle span{display:inline-flex;align-items:center;gap:8px}
.lx__noegle i{width:12px;height:12px;border-radius:3px}
.lx__noegle p{flex-basis:100%;margin:4px auto 0;max-width:620px;color:var(--text-3);font-size:12.5px;line-height:1.5}
.lx__hint{margin:14px 0 0;font-size:12.5px;color:var(--text-3)}

/* ---------- mobil ---------- */
@media (max-width:720px){
  .lx__scene{height:300px}
  .lx__ur{position:relative;margin:18px auto 0;width:max-content;max-width:calc(100% - 32px);transform:none !important}
  .lx__urRing{width:112px;height:112px}
  .lx__urT{font-size:34px}
  .lx__hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lx__eyebrow,.lx__h,.lx__h span,.lx__lede{animation:none;opacity:1}
  .lx__puls::after{animation:none}
}