/* ================================================================
   Samme uttrykk som Børshub (moderne stil): Geist, myke hjørner, mintgrønn aksent med glød.
   Mørk modus er standard. data-modus på <html>: mork | lys.
   Alle farger går via variablene, så både lys og mørk modus virker.
   ================================================================ */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonter/geist-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonter/geist-mono-latin.woff2) format('woff2')}

:root{
  --font-display:'Geist';--font-body:'Geist';--font-mono:'Geist Mono';
  --bg:#FFFFFF;--kort:#FFFFFF;--flate:#F6F7F9;--flate2:#EEF0F3;
  --linje:#E8EAEE;--linje2:#D7DBE2;--kant:#E4E7EC;--kant-hover:#C5CBD4;
  --blekk:#0E1116;--tekst2:#434955;--dempet:#6B7280;
  --aksent:#0A8A62;--aksent2:#0B8FB0;--aksent-hover:#077552;--aksent-bg:#E3F6EE;
  --glod:rgba(10,138,98,.10);--kort-lys:none;
  --pos:#0E8A5F;--pos-bg:#E6F6EE;--neg:#D04040;--neg-tekst:#BF3434;--neg-bg:#FDEDED;--stabil-bg:#EEF0F3;
  --varsel:#9A6700;--varsel-bg:#FFF6DD;
  --paa-mork:#FFFFFF;--blekk-hover:#272C35;--deaktiv:#B5BBC5;
  --topp-bg:rgba(255,255,255,.86);
  --skygge:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --skygge-stor:0 12px 32px -12px rgba(16,24,40,.18);
  /* Fargene i fordelingsstolpen: faste, lån, mat, annet, sparing. Validert for fargeblinde i lys og mørk modus. */
  --f1:#2a78d6;--f2:#eb6834;--f3:#6250d6;--f4:#eda100;--f5:#1baf7a;
}
html[data-modus="mork"]{
  color-scheme:dark;
  --bg:#070B12;--kort:#0C121C;--flate:#0E1520;--flate2:#141C29;
  --linje:#18212F;--linje2:#223043;--kant:#1B2535;--kant-hover:#2C5A4C;
  --blekk:#F1F5F9;--tekst2:#B4BFCD;--dempet:#8291A3;
  --aksent:#34E3A5;--aksent2:#3CC8E8;--aksent-hover:#66EDBC;--aksent-bg:#0A2A20;
  --pos:#34E3A5;--pos-bg:#0A2A20;--neg:#FF7A7A;--neg-tekst:#FF8C8C;--neg-bg:#2E1418;--stabil-bg:#141C29;
  --varsel:#F0CF86;--varsel-bg:#2B2410;
  --paa-mork:#03130D;--blekk-hover:#D3D9E1;--deaktiv:#334155;
  --topp-bg:rgba(7,11,18,.82);
  --glod:rgba(52,227,165,.22);--kort-lys:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 60%);
  --skygge:0 1px 2px rgba(0,0,0,.4);--skygge-stor:0 20px 48px -20px rgba(0,0,0,.8);
  --f1:#3987e5;--f2:#d95926;--f3:#9085e9;--f4:#c98500;--f5:#199e70;
}
html[data-modus="mork"] ::selection{background:#1D4A3B}

/* ---------- Grunnlag ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--blekk);font-family:var(--font-body),system-ui,sans-serif;font-size:16px;line-height:1.55;letter-spacing:-0.006em;font-variant-numeric:tabular-nums}
a{color:var(--aksent)}
a:hover{color:var(--aksent-hover)}
h1,h2,h3{font-family:var(--font-display),sans-serif;font-weight:650;letter-spacing:-0.035em;margin:0;line-height:1.1}
::selection{background:var(--aksent-bg)}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
.smal{max-width:720px}
.dempet{color:var(--dempet)}
.tekst2{color:var(--tekst2)}
.liten{font-size:14px}
.mini{font-size:13px}
.mono{font-family:var(--font-mono),ui-monospace,monospace;letter-spacing:-0.02em}
.skjult-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--aksent);outline-offset:2px}

/* ---------- Toppstripe og topp ---------- */
.kurslinje{background:var(--flate);border-bottom:1px solid var(--linje);color:var(--tekst2);font-size:13px}
.kurslinje-inner{display:flex;align-items:center;gap:20px;min-height:34px}
.kl-tekst{white-space:nowrap;color:var(--dempet);overflow:hidden;text-overflow:ellipsis}
.modus-knapp{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border:1px solid var(--linje2);border-radius:8px;background:var(--kort);color:var(--tekst2);font:inherit;font-size:12px;cursor:pointer}
.modus-knapp:hover{color:var(--blekk);border-color:var(--kant-hover)}
.modus-knapp .ikon-sol{display:none}
html[data-modus="mork"] .modus-knapp .ikon-sol{display:inline}
html[data-modus="mork"] .modus-knapp .ikon-mane{display:none}

.topp{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linje);background:var(--topp-bg);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.topp-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--blekk);font-family:var(--font-display),sans-serif;font-weight:700;letter-spacing:-0.04em;font-size:21px}
.logo:hover{color:var(--blekk)}
.logo-merke{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--aksent),var(--aksent2));display:flex;align-items:center;justify-content:center;color:var(--paa-mork)}
.nav-desktop{display:flex;align-items:center;gap:4px}
.nav-desktop a:not(.knapp){padding:10px 14px;text-decoration:none;color:var(--tekst2)}
.nav-desktop a:not(.knapp):hover{color:var(--blekk)}
.nav-desktop a[aria-current="page"]{color:var(--blekk);font-weight:600}
.nav-mobil{display:none;align-items:center;gap:6px}

/* ---------- Knapper ---------- */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.knapp-aksent{background:var(--aksent);color:var(--paa-mork);box-shadow:0 8px 24px -10px var(--aksent)}
.knapp-aksent:hover{background:var(--aksent-hover);color:var(--paa-mork);box-shadow:0 10px 30px -8px var(--aksent)}
.knapp-kant{background:var(--kort);color:var(--blekk);border-color:var(--linje2)}
.knapp-kant:hover{color:var(--blekk);border-color:var(--aksent)}
.knapp-fare{background:var(--kort);color:var(--neg-tekst);border-color:var(--linje2)}
.knapp-fare:hover{border-color:var(--neg)}
.knapp-stor{min-height:50px;padding:0 28px}
.knapp-liten{min-height:38px;padding:0 14px;font-size:14px}
.ikonknapp{width:44px;height:44px;border:0;border-radius:10px;background:var(--flate2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blekk)}
.lenkeknapp{padding:0;border:0;background:none;font:inherit;color:var(--aksent);text-decoration:underline;cursor:pointer}

/* ---------- Mobilmeny ---------- */
.meny{position:fixed;inset:0;z-index:50}
.meny-bakgrunn{position:absolute;inset:0;width:100%;border:0;background:rgba(0,0,0,.45);cursor:pointer}
.meny-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--kort);padding:18px 20px 28px;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.3);animation:glid .2s ease-out;overflow-y:auto}
@keyframes glid{from{transform:translateX(100%)}to{transform:none}}
.meny-topp{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--font-display),sans-serif;font-weight:700;font-size:20px}
.meny-panel>a{padding:16px 2px;font-size:18px;text-decoration:none;color:var(--blekk);border-bottom:1px solid var(--linje)}

/* ---------- Bunn ---------- */
.bunn{border-top:1px solid var(--linje);font-size:14px;color:var(--dempet);margin-top:clamp(56px,10vw,96px)}
.bunn-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:32px;padding-bottom:32px}
.bunn p{max-width:620px}
.bunn-lenker{display:flex;flex-wrap:wrap;gap:8px 20px}
.bunn-lenker a{color:var(--dempet)}
.bunn-lenker a:hover{color:var(--blekk)}
.bunn-ansvar{border-top:1px solid var(--linje);padding-top:20px;padding-bottom:32px;text-align:center;font-size:13px;line-height:1.6}
.bunn-ansvar p{max-width:820px;margin:0 auto}
.bunn-ansvar p+p{margin-top:10px}
.bunn-ansvar a{color:var(--tekst2)}

/* ---------- Felles byggeklosser ---------- */
.spaltenavn{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--aksent)}
.spaltenavn::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--aksent),var(--aksent2))}
.merke{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--flate2);font-size:12px;font-weight:600;color:var(--blekk)}
.merke-aksent{background:var(--aksent-bg);color:var(--aksent)}
.kort{padding:clamp(20px,4vw,28px);border-radius:16px;border:1px solid var(--kant);background:var(--kort-lys),var(--kort);box-shadow:var(--skygge)}
.flate{padding:clamp(20px,4vw,28px);border-radius:16px;border:1px solid var(--kant);background:var(--flate)}
.ikonrute{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;color:var(--aksent);background:var(--aksent-bg);border:1px solid color-mix(in srgb,var(--aksent) 28%,transparent);box-shadow:0 0 24px -8px var(--glod)}
.ikonrute-stor{width:52px;height:52px;border-radius:14px}
.hake{width:16px;height:16px;border-radius:50%;background:var(--aksent-bg);position:relative;flex:none}
.hake::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--aksent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Forside ---------- */
.forside-topp{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-top:clamp(36px,7vw,80px);padding-bottom:clamp(36px,6vw,64px)}
.forside-topp::before{content:"";position:absolute;z-index:-1;inset:-60px 0 -40px 0;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 22% 30%,var(--glod),transparent 70%),radial-gradient(ellipse 40% 50% at 80% 45%,color-mix(in srgb,var(--aksent2) 10%,transparent),transparent 70%)}
.forside-topp::after{content:"";position:absolute;z-index:-2;inset:-60px 0 -40px 0;pointer-events:none;opacity:0;
  background-image:linear-gradient(var(--linje) 1px,transparent 1px),linear-gradient(90deg,var(--linje) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 40% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 40% 35%,#000 20%,transparent 75%)}
html[data-modus="mork"] .forside-topp::after{opacity:.7}
.forside-topp h1{font-size:clamp(42px,7.5vw,72px);line-height:1;letter-spacing:-0.045em;font-weight:700}
.forside-topp h1 em{font-style:normal;background:linear-gradient(92deg,var(--aksent) 10%,var(--aksent2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.ingress{margin:20px 0 28px;max-width:520px;font-size:clamp(17px,2.2vw,19px);color:var(--tekst2)}
.topp-knapper{display:flex;flex-wrap:wrap;gap:12px}
.fordeler{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--tekst2)}
.fordeler li{display:flex;align-items:center;gap:8px}
@media (max-width:960px){.forside-topp{grid-template-columns:1fr;gap:32px}}
@media (max-width:480px){.topp-knapper .knapp{flex:1 1 100%}}

/* Eksempelkortet ved siden av overskriften */
.eksempel{padding:22px;border-radius:20px;border:1px solid var(--kant);background:var(--kort-lys),var(--kort);box-shadow:var(--skygge-stor),0 0 0 1px var(--kant),0 0 60px -20px var(--glod)}
.eks-topp{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eks-etikett{font-size:13px;color:var(--dempet)}
.eks-verdi{font-size:30px;font-weight:650;letter-spacing:-0.035em;margin-top:2px}
.eks-rader{list-style:none;margin:14px 0 0;padding:0}
.eks-rader li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--linje);font-size:14px}
.eks-rader li span:first-child{color:var(--tekst2)}
.eks-rader b{font-family:var(--font-mono),monospace;font-weight:600}
.eks-fot{margin-top:12px;font-size:12px;color:var(--dempet)}

.seksjon{padding-bottom:clamp(40px,7vw,72px)}
.seksjon-tittel{margin-bottom:28px}
.seksjon-tittel h2{font-size:clamp(28px,5vw,40px)}
.tre-steg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steg-kort{position:relative;padding:28px 24px 26px;border-radius:16px;border:1px solid var(--kant);background:var(--kort-lys),var(--kort);box-shadow:var(--skygge);transition:border-color .15s,box-shadow .15s,transform .15s}
.steg-kort:hover{border-color:var(--kant-hover);box-shadow:0 0 0 1px var(--kant-hover),0 18px 40px -18px var(--glod);transform:translateY(-2px)}
.steg-kort .ikonrute{margin-bottom:16px}
.steg-kort h3{font-size:20px;margin-bottom:8px}
.steg-nr{position:absolute;top:14px;right:14px;width:28px;height:28px;display:grid;place-items:center;border-radius:999px;border:1.5px solid var(--aksent);color:var(--aksent);font-size:13px;font-weight:700;font-family:var(--font-mono),monospace}
@media (max-width:820px){.tre-steg{grid-template-columns:1fr}}
.rekkefolge{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:n}
.rekkefolge li{padding:18px;border-radius:14px;border:1px solid var(--kant);background:var(--kort);counter-increment:n}
.rekkefolge li::before{content:counter(n);display:block;font-family:var(--font-mono),monospace;font-size:13px;color:var(--aksent);font-weight:700;margin-bottom:8px}
.rekkefolge b{display:block;margin-bottom:4px}
.rekkefolge span{font-size:14px;color:var(--tekst2)}
@media (max-width:900px){.rekkefolge{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.rekkefolge{grid-template-columns:1fr}}

/* ---------- Kalkulator ---------- */
.side-main{padding-top:clamp(32px,7vw,56px)}
.side-hode{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.side-hode h1{font-size:clamp(32px,8vw,44px);letter-spacing:-0.035em}
.side-hode p{margin-top:8px;max-width:620px}
.valg{display:inline-flex;padding:4px;gap:4px;border-radius:12px;background:var(--flate2)}
.valg button{border:0;border-radius:9px;background:transparent;color:var(--tekst2);min-height:40px;padding:0 16px;font:inherit;font-size:15px;cursor:pointer}
.valg button[aria-pressed="true"]{background:var(--kort);color:var(--blekk);font-weight:600;box-shadow:var(--skygge)}
.kalk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;align-items:start}
.kalk-resultat{display:flex;flex-direction:column;gap:16px}
@media (max-width:980px){.kalk{grid-template-columns:1fr}}
.skjema{display:flex;flex-direction:column;gap:16px}
.del-hode{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.del-hode .ikonrute{width:36px;height:36px;border-radius:10px}
.del-hode h2{font-size:21px;letter-spacing:-0.02em}
.del-hode p{font-size:14px;color:var(--dempet);margin-top:2px}
.felt-gruppe{display:flex;flex-direction:column;gap:16px}
.to-felt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.etikett{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.hjelp{display:block;font-size:13px;color:var(--dempet);margin-top:6px}
.felt{display:block;width:100%;height:48px;padding:0 14px;border:1px solid var(--linje2);border-radius:10px;font:inherit;font-size:16px;color:var(--blekk);background:var(--kort)}
.felt:focus{outline:none;border-color:var(--aksent);box-shadow:0 0 0 4px var(--glod)}
select.felt{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--dempet) 50%),linear-gradient(135deg,var(--dempet) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.belop{position:relative}
.belop .felt{padding-right:48px;font-family:var(--font-mono),ui-monospace,monospace;letter-spacing:-0.02em}
.belop::after{content:attr(data-enhet);position:absolute;right:14px;top:0;height:48px;display:flex;align-items:center;font-size:14px;color:var(--dempet);pointer-events:none}
.felt[aria-invalid="true"]{border-color:var(--neg)}
.feil{display:block;color:var(--neg-tekst);font-size:13px;margin-top:6px}
.avkryss{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.avkryss input{width:20px;height:20px;accent-color:var(--aksent)}

details.detaljer{border-top:1px solid var(--linje);padding-top:14px}
details.detaljer>summary{list-style:none;cursor:pointer;color:var(--aksent);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
details.detaljer>summary::-webkit-details-marker{display:none}
details.detaljer>summary::before{content:"+";font-family:var(--font-mono),monospace}
details.detaljer[open]>summary::before{content:"–"}
details.detaljer>.felt-gruppe{margin-top:16px}

.rad-liste{display:flex;flex-direction:column;gap:12px}
.rad-kort{position:relative;padding:16px;border-radius:12px;border:1px solid var(--kant);background:var(--flate)}
.rad-kort-topp{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.rad-kort-topp b{font-size:15px}
.fjern{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--dempet);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.fjern:hover{background:var(--flate2);color:var(--blekk)}
.person-rad{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:end;gap:10px}
.tom{font-size:14px;color:var(--dempet)}
.forslag-linje{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:13px;color:var(--dempet)}

/* Resultat */
.tall-rader{list-style:none;margin:0;padding:0}
.tall-rader li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--linje);font-size:15px}
.tall-rader li:first-child{border-top:0;padding-top:0}
.tall-rader li span:first-child{color:var(--tekst2)}
.tall-rader b{font-family:var(--font-mono),monospace;font-weight:600;letter-spacing:-0.02em;white-space:nowrap}
.tall-rader li.sum{border-top:1px solid var(--linje2)}
.tall-rader li.sum span:first-child{color:var(--blekk);font-weight:600}
.stort-tall{font-size:clamp(34px,6vw,44px);font-weight:650;letter-spacing:-0.035em;line-height:1.05;margin:4px 0 2px}
.stort-tall.neg{color:var(--neg)}
.pos{color:var(--pos)}.neg{color:var(--neg)}

.stolpe{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;background:var(--flate2);margin:14px 0 12px}
.stolpe i{display:block;height:100%;min-width:0}
.forklaring{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--tekst2)}
.forklaring li{display:flex;align-items:center;gap:6px}
.prikk{width:8px;height:8px;border-radius:999px;display:inline-block;flex:none;background:var(--aksent)}
.c1{background:var(--f1)}.c2{background:var(--f2)}.c3{background:var(--f3)}.c4{background:var(--f4)}.c5{background:var(--f5)}

.raad{border-color:color-mix(in srgb,var(--aksent) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--aksent) 25%,transparent),0 24px 60px -24px var(--glod)}
.raad h2{font-size:24px;margin:10px 0 8px}
.raad p{color:var(--tekst2)}
.raad p strong,.raad li strong{color:var(--blekk)}
.raad ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.raad li{display:flex;gap:10px;align-items:flex-start;color:var(--tekst2)}
.raad li .prikk{margin-top:8px}
.raad .neste{margin-top:16px;padding-top:14px;border-top:1px solid var(--linje)}
.raad.advarsel{border-color:color-mix(in srgb,var(--neg) 45%,transparent);box-shadow:none}

details.slik{border-radius:16px;border:1px solid var(--kant);background:var(--flate);padding:16px 20px}
details.slik>summary{list-style:none;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;gap:16px}
details.slik>summary::-webkit-details-marker{display:none}
details.slik>summary::after{content:"+";color:var(--dempet);font-size:20px;line-height:1}
details.slik[open]>summary::after{content:"–"}
details.slik ol,details.slik ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--tekst2);font-size:14px}
.merknad{font-size:13px;color:var(--dempet);line-height:1.5}
.lagring{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border-radius:14px;background:var(--flate);font-size:14px;color:var(--tekst2)}

/* ---------- Tekstsider ---------- */
.tekstside{padding-top:clamp(40px,9vw,72px);line-height:1.65}
.tekstside h1{font-size:clamp(32px,8vw,44px);letter-spacing:-0.035em;margin-bottom:6px}
.tekstside h2{font-size:22px;margin:40px 0 8px}
.tekstside p,.tekstside li{color:var(--tekst2)}
.tekstside p+p{margin-top:12px}
.tekstside ul{margin:8px 0 0;padding-left:20px}
.utfyll{background:var(--varsel-bg);color:var(--varsel);padding:1px 6px;border-radius:6px;font-weight:600}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  .nav-desktop{display:none}
  .nav-mobil{display:flex}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Forsiden: eksempelstolpen (faste 12 000, lån 3 000, mat 4 520, annet 4 180, sparing 3 400 av 32 000) */
.eks-b1{width:37.5%}.eks-b2{width:9.4%}.eks-b3{width:14.1%}.eks-b4{width:13.1%}.eks-b5{width:10.6%}
#forside-merknad{margin-top:16px}
.student-kort{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px}
.student-kort>div{flex:1 1 380px}
.student-kort h2{font-size:clamp(24px,4vw,32px);margin-bottom:8px}
.rad-liste:not(:empty){margin-bottom:14px}
.tom{margin-bottom:14px}

/* ---------- Innlogging og konto ---------- */
.innlogging{display:flex;justify-content:center;padding-top:clamp(32px,8vw,72px)}
.innlogging-kort{width:100%;max-width:440px}
.innlogging h1{font-size:clamp(28px,6vw,34px);margin-bottom:8px}
.ingress-liten{font-size:16px}
.kode-felt{font-family:var(--font-mono),ui-monospace,monospace;font-size:22px;letter-spacing:.25em}
.melding{padding:14px 18px;border-radius:14px;border:1px solid var(--kant);background:var(--flate);margin-bottom:16px;font-weight:500}
.kort-topp{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.kort-topp h2,.konto-del h2,.lagre-kort h2{font-size:21px;letter-spacing:-0.02em}
.konto-del{margin-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.konto-del>details{align-self:stretch}
.fare-sone{border-color:color-mix(in srgb,var(--neg) 35%,transparent)}
.fare-sone details.detaljer>summary{color:var(--neg-tekst)}
.maaned-liste{list-style:none;margin:0;padding:0}
.maaned-rad{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--linje)}
.maaned-rad:first-child{border-top:0}
.maaned-rad b{display:block;text-transform:capitalize}
.lagre-kort{display:flex;flex-direction:column;gap:12px}
.knapp:disabled{opacity:.55;cursor:default;box-shadow:none}
.varsel-stripe{background:var(--aksent-bg);color:var(--aksent);text-align:center;padding:10px 16px;font-size:14px;font-weight:500}

/* ---------- Kalkulator i steg ---------- */
.fortsett{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:16px;padding:14px 18px;font-size:15px}
.stegviser{margin-bottom:20px;scroll-margin-top:84px}
.stegviser ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stegviser button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--kant);border-radius:12px;background:var(--kort);color:var(--dempet);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.stegviser button:hover{border-color:var(--kant-hover);color:var(--blekk)}
.steg-tall{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:999px;border:1.5px solid currentColor;font-family:var(--font-mono),monospace;font-size:12px;font-weight:700}
.stegviser button.ferdig{color:var(--tekst2)}
.stegviser button.ferdig .steg-tall{background:var(--aksent-bg);border-color:var(--aksent);color:var(--aksent)}
.stegviser button[aria-current="step"]{border-color:var(--aksent);color:var(--blekk);font-weight:600;box-shadow:0 0 0 3px var(--glod)}
.stegviser button[aria-current="step"] .steg-tall{background:var(--aksent);border-color:var(--aksent);color:var(--paa-mork)}
@media (max-width:720px){.steg-navn{display:none}.stegviser button{justify-content:center;padding:10px 4px}.stegviser button[aria-current="step"] .steg-navn{display:inline}.stegviser ol{grid-template-columns:repeat(5,auto);justify-content:space-between}}
.veiviser{max-width:760px}
.steg-panel{display:flex;flex-direction:column;gap:16px}
.steg-panel h2:focus{outline:none}
.steg-knapper{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:14px 16px;border-radius:16px;border:1px solid var(--kant);background:var(--flate);position:sticky;bottom:12px;z-index:5;box-shadow:var(--skygge-stor)}
.steg-knapper #neste{margin-left:auto}
.underveis{display:flex;flex-direction:column;align-items:center;font-size:13px;line-height:1.3;text-align:center}
.underveis b{font-size:17px;font-weight:600}
.underveis b.neg{color:var(--neg)}
@media (max-width:480px){.underveis span{display:none}}
.steg-feil{margin-top:4px}
.resultat-hode{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.resultat-hode h2{font-size:clamp(26px,5vw,32px)}
.resultat-hode h2:focus{outline:none}
.resultat .kalk{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
.kalk-hoved{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:980px){.resultat .kalk{grid-template-columns:1fr}}

/* Statuskort */
.status-rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.status-kort{padding:18px;display:flex;flex-direction:column;gap:8px}
.status-topp{display:flex;justify-content:space-between;align-items:center;gap:8px}
.status-topp h3{font-size:15px;font-family:var(--font-body),sans-serif;letter-spacing:0;font-weight:600;color:var(--tekst2)}
.status-verdi{font-size:18px;font-weight:600}
.maaler{height:8px;border-radius:999px;background:var(--flate2);overflow:hidden}
.maaler i{display:block;height:100%;border-radius:999px;background:var(--aksent)}

/* Utskrift: bare resultatet */
@media print{
  .kurslinje,.topp,.meny,.bunn,.stegviser,.side-hode .valg,.resultat-hode .topp-knapper,.lagre-kort,.lagring,.fortsett{display:none!important}
  body{background:#fff;color:#000}
  .kort,.flate,details.slik{box-shadow:none!important;border-color:#ccc!important;background:#fff!important;break-inside:avoid}
  .resultat .kalk{grid-template-columns:1fr}
  details.slik ol{display:flex}
}

/* ---------- Utvikling (historikk) ---------- */
.historikk #innhold{display:flex;flex-direction:column;gap:16px}
.nokkeltall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.nokkel-flis{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.nokkel-verdi{font-size:clamp(26px,5vw,32px);font-weight:650;letter-spacing:-0.035em;line-height:1.15}
.graf-kort h2,.historikk section>h2{font-size:21px;letter-spacing:-0.02em}
.graf{position:relative;margin-top:8px}
.graf-svg{display:block;overflow:visible}
.rutenett{stroke:var(--linje);stroke-width:1}
.akse-null{stroke:var(--linje2);stroke-width:1}
.akse-tekst{fill:var(--dempet);font-size:12px;font-family:var(--font-mono),monospace}
.graf-linje{fill:none;stroke:var(--aksent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf-flate{fill:var(--aksent);opacity:.12}
.graf-punkt{fill:var(--aksent);stroke:var(--kort);stroke-width:2}
.graf-aktiv{fill:var(--aksent);stroke:var(--kort);stroke-width:2}
.graf-strek{stroke:var(--kant-hover);stroke-width:1;stroke-dasharray:3 3}
.graf-verdi{fill:var(--blekk);font-size:13px;font-weight:600;font-family:var(--font-mono),monospace}
.graf-treff{fill:transparent;cursor:crosshair}
.stolpe-pos{fill:var(--aksent)}
.stolpe-neg{fill:var(--neg)}
.stolpe-pos.aktiv,.stolpe-neg.aktiv{opacity:.75}
.graf-tips{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 10px;border-radius:10px;border:1px solid var(--kant);background:var(--kort);box-shadow:var(--skygge-stor);font-size:12px;white-space:nowrap;pointer-events:none;z-index:2}
.graf-tips b{font-size:14px;color:var(--blekk)}
.sammenlign-valg{margin:14px 0 8px}
.sammenlign-fot{margin-top:10px}

/* Tabeller */
.tabell-boks{overflow-x:auto}
.tabell{width:100%;border-collapse:collapse;font-size:15px}
.tabell th,.tabell td{padding:12px 10px;text-align:right;border-bottom:1px solid var(--linje);white-space:nowrap}
.tabell thead th{font-size:13px;font-weight:500;color:var(--dempet)}
.tabell th:first-child{text-align:left;padding-left:0;font-weight:500}
.tabell td:last-child,.tabell th:last-child{padding-right:0}
.tabell td{font-family:var(--font-mono),monospace;letter-spacing:-0.02em;color:var(--tekst2)}
.tabell td.pos{color:var(--pos)}.tabell td.neg{color:var(--neg)}
.tabell tr.sum th,.tabell tr.sum td{font-weight:600;color:var(--blekk);border-top:1px solid var(--linje2)}
.tabell tr.sum td.pos{color:var(--pos)}.tabell tr.sum td.neg{color:var(--neg)}.tabell tr.sum td.dempet{color:var(--dempet)}
details.slik .tabell-boks{margin-top:12px}

/* Studentdelen: valg av lærested og beløp fra Lånekassen */
.radiogruppe{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.radiogruppe legend{padding:0;margin-bottom:6px}
.radio{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--linje2);border-radius:10px;background:var(--kort);cursor:pointer;font-size:15px}
.radio:has(input:checked){border-color:var(--aksent);box-shadow:0 0 0 3px var(--glod)}
.radio input{width:18px;height:18px;accent-color:var(--aksent);margin:0}
.lanekassen{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:16px 18px}
.lanekassen .avkryss{font-size:14px;margin-top:4px}
.tall-rader li.under span:first-child{padding-left:14px;font-size:14px;color:var(--dempet)}
.tall-rader li.under b{font-weight:500;color:var(--dempet)}

/* ---------- Admin ---------- */
.admin #innhold{display:flex;flex-direction:column;gap:16px}
.admin-tittel{font-size:21px;letter-spacing:-0.02em;margin:8px 0 12px}
.uke-liste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.uke-rad{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:12px;font-size:14px}
.uke-navn{color:var(--tekst2)}
.uke-spor{height:10px;border-radius:999px;background:var(--flate2);overflow:hidden}
.uke-spor i{display:block;height:100%;border-radius:999px;background:var(--aksent)}
.uke-spor i.skjult{background:var(--kant-hover);opacity:.6}
.uke-rad b{text-align:right;font-weight:600}
.kommer li b{font-family:var(--font-body),sans-serif;font-weight:500}
.slett-valg{align-self:stretch;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--linje)}
.slett-valg>div{flex:1 1 300px}
.slett-valg h3{font-size:16px;font-family:var(--font-body),sans-serif;letter-spacing:0;font-weight:600;margin-bottom:4px}
.slett-konto{display:block}
.slett-konto details{margin-top:10px}

/* ---------- Månedlig sjekk ---------- */
.sjekk-skjema{max-width:760px}
.sjekk-post{border:1px solid var(--kant);margin:0;display:flex;flex-direction:column;gap:10px}
.sjekk-sporsmal{float:left;width:100%;padding:0;font-weight:600;font-size:17px;letter-spacing:-0.01em;margin-bottom:2px}
.sjekk-sporsmal+*{clear:both}
.sjekk-valg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sjekk-valg .radio{justify-content:center;text-align:center}
@media (max-width:520px){.sjekk-valg{grid-template-columns:1fr}.sjekk-valg .radio{justify-content:flex-start}}
.sjekk-belop{max-width:320px}
.sjekk #resultat .kalk{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
@media (max-width:980px){.sjekk #resultat .kalk{grid-template-columns:1fr}}
.sjekk-varsel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px;padding:14px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--aksent) 45%,transparent);background:var(--aksent-bg);color:var(--blekk);font-size:15px}
.maaned-handling{display:flex;align-items:center;gap:8px;flex:none}
.sjekket-merke{font-size:13px;color:var(--pos);font-weight:600;white-space:nowrap}
.maaned-rad>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ---------- Kontakt og innboks ---------- */
.kontakt-skjema{margin-top:24px}
.kontakt-skjema textarea.felt{height:auto;min-height:150px;padding:12px 14px;resize:vertical;line-height:1.5}
.robotfelle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.kontakt-takk{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kontakt-takk:focus{outline:none}
.kontakt-takk h2{font-size:24px;margin:0}
.innboks-liste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.innboks-melding{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--linje)}
.innboks-melding.lest{opacity:.7}
.innboks-topp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.innboks-tekst{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--blekk)}
.tekstside .kort p{color:var(--tekst2)}
.admin-fot{margin-top:8px}
.admin .uke-rad{grid-template-columns:120px minmax(0,1fr) 72px}

/* ---------- Støtt siden ---------- */
.stotte-kort{margin:28px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stotte-kort h2{font-size:22px;margin:0 0 4px}
.bunn-stotte{color:var(--aksent)!important;font-weight:600}
.stotte-hint{margin-top:4px}