/* ============================================================
   LADEUNIVERSET — NAVIGATION v3.0  "Avishovedet"
   En flad bjælke i fuld bredde med én hårfin streg under.
   Ingen pille, intet glas, ingen glød. Menuen folder sig ud som
   et ark under bjælken.
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--papir);border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease-out);
}
.nav.is-hidden{transform:translateY(-101%)}
.nav__bar{position:relative;max-width:1400px;margin:0 auto;padding:0 clamp(20px,3.2vw,48px)}

.pill{display:flex;align-items:center;gap:8px;height:var(--nav-h);
  transition:height .35s var(--ease-out)}
.nav.is-scrolled .pill{height:var(--nav-h-sm)}
.pill::after{display:none}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:10px;margin-right:22px;flex:0 0 auto;text-decoration:none}
.brand__mark{width:26px;height:26px;flex:0 0 auto}
.brand__txt{font-weight:700;font-size:19px;letter-spacing:-.025em;color:var(--text-1);white-space:nowrap;
  transition:font-size .35s var(--ease-out)}
.nav.is-scrolled .brand__txt{font-size:17px}

/* ---------- Menupunkter ---------- */
.nav__items{position:relative;display:flex;align-items:stretch;align-self:stretch;gap:0}
.nav__ind{display:none}
.nav__item{
  position:relative;display:flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;white-space:nowrap;
  padding:0 13px;color:var(--text-2);font-size:15px;font-weight:500;
  transition:color var(--t-fast) var(--ease-out);
}
.nav__item:hover,.nav__item.is-open{color:var(--text-1)}
.nav__item svg{width:9px;height:9px;opacity:.5;transition:transform var(--t-med) var(--ease-out)}
.nav__item.is-open svg{transform:rotate(180deg);opacity:1}
.nav__item::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav__item.is-aktiv{color:var(--text-1)}
.nav__item.is-aktiv::after,.nav__item.is-open::after{transform:scaleX(1)}
/* Direkte link i topmenuen (fx Fællesskab) — samme look, uden dropdown */
.nav__link{position:relative;display:flex;align-items:center;white-space:nowrap;text-decoration:none;
  padding:0 13px;color:var(--text-2);font-size:15px;font-weight:500;transition:color var(--t-fast) var(--ease-out)}
.nav__link:hover,.nav__link.is-aktiv{color:var(--text-1)}
.nav__link::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav__link.is-aktiv::after{transform:scaleX(1)}

/* ---------- Højre side ---------- */
.nav__right{display:flex;align-items:center;gap:6px;margin-left:auto}

/* ---------- Elpris-chip: mono, som en kurs i avisen ---------- */
.price{
  --c:var(--pos);
  position:relative;display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;
  color:var(--text-1);transition:border-color var(--t-fast),background var(--t-fast);
}
.price:hover{border-color:var(--text-2);background:var(--hvid);text-decoration:none}
.price.is-low{--c:var(--pris-lav)} .price.is-mid{--c:var(--pris-mid)} .price.is-high{--c:var(--pris-hoej)}
.price__pulse{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto}
.price__body{display:flex;align-items:baseline;gap:7px;line-height:1}
.price__lab{font-size:12px;color:var(--text-3);white-space:nowrap}
.price__val{font-weight:700;font-size:14px;color:var(--text-1);letter-spacing:-.01em;
  font-variant-numeric:lining-nums;white-space:nowrap}
.price__spark{width:44px;height:18px;flex:0 0 auto;color:var(--c)}
.nav.is-scrolled .price__lab{display:none}

/* Prisens hover-kort */
.pcard{
  position:absolute;top:calc(100% + 10px);right:0;width:320px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--hvid);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top right;
  transition:opacity .22s var(--ease-out),transform .28s var(--ease-out),visibility .22s;
}
.price-wrap{position:relative}
.price-wrap:hover .pcard,.price-wrap:focus-within .pcard{opacity:1;visibility:visible;transform:none}
.pcard h4{font-size:14.5px;margin-bottom:2px}
.pcard .sub{font-size:12.5px;color:var(--text-3);margin:0 0 14px}
.pcard__bars{display:flex;align-items:flex-end;gap:2px;height:66px;margin-bottom:6px}
.pcard__bars i{flex:1;background:var(--flade-2);transition:background .2s;min-height:2px}
.pcard__bars i.now{background:var(--text-1)}
.pcard__bars i.min{background:var(--pris-lav)}
.pcard__bars i.max{background:var(--pris-hoej)}
.pcard__axis{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-bottom:14px}
.pcard__row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-top:1px solid var(--line-soft)}
.pcard__row b{font-weight:500;font-variant-numeric:lining-nums}
.pcard__note{font-size:12px;color:var(--text-3);line-height:1.5;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-soft)}
.zone{display:inline-flex;gap:2px;border:1px solid var(--line);padding:2px;border-radius:var(--r-md);margin-left:auto}
.zone button{border:0;background:none;color:var(--text-3);font-size:12px;padding:3px 8px;
  border-radius:2px;cursor:pointer;transition:all var(--t-fast)}
.zone button.on{background:var(--text-1);color:var(--papir)}

/* ---------- Profil-knap ---------- */
.pknap{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:none;color:var(--text-1);
  font-size:13.5px;font-weight:500;white-space:nowrap;transition:border-color var(--t-fast),background var(--t-fast)}
.pknap:hover,.pknap.is-open{border-color:var(--text-2);background:var(--hvid)}
.pknap__m{display:flex;gap:2px}
.pknap__m i{width:5px;height:12px;background:var(--flade-2);display:block;border-radius:1px;transition:background var(--t-med)}
.pknap__m i.on{background:var(--dig)}
.pknap__t{font-size:12.5px;color:var(--text-3);font-variant-numeric:lining-nums}
.pknap b{font-weight:500}
@media (max-width:640px){.pknap span.pknap__lab{display:none}}

/* ---------- Profil-panelet: et ark i højre side ---------- */
.pp{position:absolute;top:100%;right:clamp(20px,3.2vw,48px);width:min(460px,calc(100vw - 32px));
  max-height:calc(calc(100 * var(--vh,1vh)) - var(--nav-h) - 16px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--hvid);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease-out),transform .28s var(--ease-out),visibility .22s}
.pp.is-open{opacity:1;visibility:visible;transform:none}
.pp__top{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.pp__top h3{font-size:22px;margin:6px 0 6px}
.pp__top p{font-size:13.5px;color:var(--text-2);margin:0;line-height:1.5}
.pp__luk{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;padding:0 2px}
.pp__luk:hover{color:var(--text-1)}
.pp__liste{padding:4px 24px}
.pp__r{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.pp__r:last-child{border-bottom:0}
.pp__h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pp__h b{font-size:14.5px;font-weight:500}
.pp__kilde{font-size:12px;color:var(--text-3);margin-left:auto}
.pp__r.is-kendt{border-left:3px solid var(--dig);padding-left:14px;margin-left:-17px}
.pp__r.is-kendt .pp__kilde{color:var(--dig-ink)}
.pp__glem{background:none;border:0;color:var(--text-3);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.pp__glem:hover{color:var(--neg-ink)}
.pp__valg{display:flex;gap:4px}
.pp__valg button{flex:1;border:1px solid var(--line);background:none;color:var(--text-2);font-size:13.5px;
  padding:8px 6px;border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast)}
.pp__valg button:hover{border-color:var(--text-2);color:var(--text-1)}
.pp__valg button.on{background:var(--dig);border-color:var(--dig);color:#fff}
.pp__valg--bil{display:grid;grid-template-columns:1fr 1fr}
.pp__valg--bil button{text-align:left;padding:8px 10px}
.pp__valg--bil b{display:block;font-weight:500;font-size:13.5px}
.pp__valg--bil small{display:block;font-size:12px;opacity:.8;margin-top:1px}
.pp__r.is-fokus{background:var(--dig-flad);margin:0 -24px;padding-left:24px;padding-right:24px;transition:background .6s}
.pp select{width:100%;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--text-1);background:var(--hvid);
  border:1px solid var(--line);border-radius:var(--r-md)}
.pp__tal{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.pp__tal input{margin:6px 0}
.pp__tal output{font-size:13px;font-weight:500;color:var(--text-1);white-space:nowrap;min-width:9ch;text-align:right;font-variant-numeric:lining-nums}
.pp__tal output em{font-style:normal;color:var(--text-3)}
.pp__hv{font-size:12.5px;color:var(--text-3);margin:8px 0 0;line-height:1.5}
.pp__bund{display:flex;gap:10px;align-items:center;padding:16px 24px 20px;border-top:1px solid var(--line)}

/* ---------- Konto-knap ---------- */
.knto{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-lg);font-size:13.5px;font-weight:500;color:var(--text-1);text-decoration:none;white-space:nowrap;
  transition:border-color var(--t-fast),background var(--t-fast)}
.knto:hover{border-color:var(--text-1);text-decoration:none}
.knto.is-ind{padding-left:6px}
.knto__av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:500}
@media(max-width:640px){.knto__t{display:none}}

/* ---------- Mega-menu: et ark under bjælken ---------- */
.mega{
  position:absolute;top:100%;left:0;
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-xl) var(--r-xl);
  background:var(--hvid);box-shadow:var(--sh-2);overflow:hidden;
  width:0;height:0;opacity:0;visibility:hidden;
  transform:translateY(-6px);transform-origin:top left;
  transition:width .38s var(--ease-out),height .38s var(--ease-out),left .3s var(--ease-out),
             opacity .22s var(--ease-out),transform .3s var(--ease-out),visibility .25s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega__glow{display:none}
.mega__panel{position:absolute;top:0;left:0;padding:26px 28px 24px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.mega__panel.is-active{opacity:1;transform:none;pointer-events:auto}

.mm{display:grid;gap:28px}
.mm--2f{grid-template-columns:1fr 1fr 220px}
.mm--1f{grid-template-columns:1fr 220px}
.mm--2{grid-template-columns:1fr 1fr}
.mm--1{grid-template-columns:1fr}
.mm__col{min-width:0}
.mm__h{font-size:12.5px;color:var(--text-3);margin:0 0 8px;padding-bottom:8px;
  border-bottom:1px solid var(--line-soft)}
.mm-link{display:block;padding:9px 0;text-decoration:none;border-bottom:1px solid var(--line-soft);
  transition:padding-left var(--t-fast) var(--ease-out)}
.mm-link:last-child{border-bottom:0}
.mm-link:hover{padding-left:6px;text-decoration:none}
.mm-link__ic{display:none}
.mm-link__t{display:block;font-size:14.5px;font-weight:500;color:var(--text-1);line-height:1.35}
.mm-link:hover .mm-link__t{color:var(--accent-ink)}
.mm-link__d{display:block;font-size:12.5px;color:var(--text-3);line-height:1.45;margin-top:1px}
.mm-link--snart{cursor:default;opacity:.55}
.mm-link--snart:hover{padding-left:0}
.mm-link--snart:hover .mm-link__t{color:var(--text-1)}
.snart{font-style:normal;font-size:12px;font-weight:400;color:var(--text-3);margin-left:8px}
.snart::before{content:"— "}

.mm-feat{padding:18px;border-left:1px solid var(--line);text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.mm-feat:hover{text-decoration:none}
.mm-feat__tag{font-size:12.5px;color:var(--text-3)}
.mm-feat h4{font-weight:700;font-size:19px;letter-spacing:-.02em;margin:8px 0 6px;color:var(--text-1)}
.mm-feat p{font-size:13px;color:var(--text-2);margin:0;line-height:1.5}
.mm-feat__go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--accent-ink)}
.mm-feat__go svg{width:14px;height:14px;transition:transform var(--t-med) var(--ease-out)}
.mm-feat:hover .mm-feat__go svg{transform:translateX(4px)}

/* ---------- Burger + mobil-ark ---------- */
.burger{display:none;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-lg);background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{display:block;width:16px;height:1.5px;background:var(--text-1);transition:transform .3s var(--ease-out),opacity .2s}
.burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--papir);
  padding:84px 24px 40px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility .3s}
.sheet.is-open{opacity:1;visibility:visible}
.sheet details{border-bottom:1px solid var(--line)}
.sheet summary{list-style:none;cursor:pointer;padding:18px 0;font-size:24px;font-weight:700;letter-spacing:-.02em;
  display:flex;justify-content:space-between;align-items:center}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary::after{content:"+";color:var(--text-3);font-weight:400;font-size:24px;transition:transform .3s}
.sheet details[open] summary::after{transform:rotate(45deg)}
.sheet .mm-link{padding:10px 0}
.sheet details > div{padding-bottom:12px}

@media (max-width:1080px){
  .nav__items{display:none}
  .burger{display:flex}
  .mega{display:none}
}
@media (max-width:640px){
  .price__spark,.price__lab{display:none}
  .brand__txt{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .nav,.pill,.mega,.mega__panel,.price{transition-duration:.01ms !important}
}

/* ---------- Plads nok til alt – topbaren må aldrig løbe ud over kanten ---------- */
@media (max-width:1560px){ .price__lab{display:none} }
@media (max-width:1480px){
  .pknap__m{display:none}
  .nav__item,.nav__link{padding:0 10px}
  .nav__item::after,.nav__link::after{left:10px;right:10px}
  .brand{margin-right:10px}
}
@media (max-width:1340px){ .price__spark,.pknap__t{display:none} }
@media (max-width:1240px){
  .nav__items{display:none}
  .burger{display:flex}
  .mega{display:none}
  .price__spark{display:block}
  .pknap__t{display:inline}
}
@media (max-width:640px){
  .price__spark{display:none}
  .pknap{padding:0 10px}
  .pknap__t{display:inline}
  .knto{padding:0 10px}
  .nav__right{gap:5px}
}
@media (max-width:420px){
  .brand__txt{font-size:16.5px}
  .price__pulse{display:none}
  .nav__bar{padding:0 14px}
  .nav__right{gap:4px}
  .pknap,.knto{padding:0 8px}
  .brand{margin-right:4px;gap:8px}
  .price{padding:0 9px;gap:6px}
}
@media (max-width:379px){ .brand__txt{display:none} }
/* Mobil: Antagelser som et lille ikon (teksten kan være "± 2.346 kr." og er for bred) */
@media (max-width:480px){
  .pknap{width:36px;padding:0;justify-content:center}
  .pknap__m,.pknap__lab,.pknap__t{display:none!important}
  .pknap::before{content:"";width:16px;height:16px;background:var(--text-1);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:379px){ .brand__txt{display:none} }
