/* =====================================================================
   gjeldsproblemer.no – oppussing 20.10.2026
   FASIT: arbeidsfiler/gjeldsproblemer/oppussing/css/oppussing.css
   Kopieres til gjeldsproblemer/oppussing.css av sett_inn.py og lenkes
   SIST i <head> på alle sider. Rediger aldri kopien i deploy-mappa.

   Retning: «kompasset». Teal er blekket, husets egen lysegule (--gul,
   som fantes i den første paletten og ble slått av i en senere :root)
   er lyset: valgt tilstand, merker, «godt å vite». Ingen ny fargefamilie.

   Flatestigen (luminansnivåer, 0–255):
     papir  #FFFFFF 255   dis   #E7F1F4 238   tåke #D3E6EC 225
     gul-myk #FFF6D6 245  teal  #0E5C74       natt #1D2E3C
   Naboseksjoner skifter flate (≥12 nivå), aldri strek (Bendik 14.10.).
   Kantløs boks i boks ≥25 nivå; har den kant, bærer kanten spranget.

   Skrift: Inter (brødtekst) + Source Serif 4 (husets tittel- og
   tallanker). Bricolage Grotesque lever KUN i logotypen (.brand .navn).
   ===================================================================== */

:root{
  --op-teal:#0E5C74; --op-teal-2:#177F9A; --op-natt:#1D2E3C;
  --op-dis:#E7F1F4; --op-take:#D3E6EC; --op-kant:#BFD5DE;
  --op-gul:#FBE07E; --op-gul-dyp:#EDBE36; --op-gul-myk:#FFF6D6; --op-gul-kant:#E9D27F;
  --op-tekst:#3F4C59; --op-myk:#56636F;
  --op-skygge:0 14px 28px -18px rgba(14,60,80,.45);
  --op-skygge-2:0 22px 40px -24px rgba(14,60,80,.55);
  --op-serif:'Source Serif 4',Georgia,serif;
  /* pilen i spørsmålsplatene: hvit på teal (lukket), teal på gul (åpen) */
  --op-chev-hvit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --op-chev-teal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5C74' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   1. SKRIFT: én brødtekstfont + husets serif. Bricolage bare i logoen.
   --------------------------------------------------------------------- */
html body .art-hero h1,
html body .midt-topp h1,
html body .soknad-topp h2,
html body .sk-takk h3,
html body .kalk-inn h2,
html body .kalk-res .stor,
html body .stopp-nr,
html body .vs-tall,
html body .funn-liste .fv,
html body .statkort .sk .n,
html body .tb b,
html body .kode,
html body [style*="Bricolage"]{font-family:var(--op-serif)!important;letter-spacing:-.012em!important}
html body .art-hero h1,html body .midt-topp h1{font-weight:700!important}

/* ---------------------------------------------------------------------
   2. FLATENE PÅ ARTIKKELSIDENE – rekkefølgen varierer mellom sidene, så
      hver seksjonstype har sin faste flate, og de få naboparene som ellers
      ville smeltet, får egne sibling-regler.
   --------------------------------------------------------------------- */
html body.artikkel .art-body{background:#fff}
html body.artikkel .ordliste-sek{background:var(--op-take);padding:3.6rem 0}
html body.artikkel section.blokk.ekspert{background:var(--op-dis)}
html body.artikkel section.blokk:not(.egg2){background:#fff}
html body.artikkel .kilder-sek{background:var(--op-take);padding:3.4rem 0 3rem}
/* personvern: FAQ rett etter artikkelen */
html body.artikkel .art-body + section.blokk:not(.egg2){background:var(--op-dis)}
/* gjeldsproblemer-ekspert: profilen kommer rett etter heroen */
html body.artikkel .art-hero + section.blokk.ekspert{background:#fff}
html body.artikkel .art-hero + section.blokk.ekspert + .art-body{background:var(--op-dis)}

/* Avslutnings-CTA: fra boks til et helt teal bånd */
html body.artikkel section.art-slutt-cta{background:linear-gradient(125deg,#0E5C74 0%,#126A84 55%,#177F9A 100%);padding:4.2rem 0;position:relative;overflow:hidden}
html body.artikkel section.art-slutt-cta .cta-banner{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;transform:none!important;overflow:visible}
html body.artikkel section.art-slutt-cta .cta-banner::after{display:none}
/* kompassrosen fra logoen som vannmerke, ikke en sirkel */
html body.artikkel section.art-slutt-cta::after{content:"";position:absolute;right:max(-60px,calc(50% - 640px));top:50%;width:340px;height:340px;transform:translateY(-50%) rotate(12deg);
  background:rgba(255,255,255,.07);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 61 39 100 50 61 61 50 100 39 61 0 50 39 39Z'/%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 100 100'%3E%3Cpath d='M50 0 61 39 100 50 61 61 50 100 39 61 0 50 39 39Z'/%3E%3C/svg%3E") center/contain no-repeat}
html body.artikkel section.art-slutt-cta .wrap{position:relative;z-index:1}
html body.artikkel section.art-slutt-cta .cta-banner p{color:#E1EEF2!important}
html body.artikkel section.art-slutt-cta .btn-mork{background:var(--op-gul);color:var(--op-natt);box-shadow:0 10px 22px -12px rgba(0,0,0,.45)}
html body.artikkel section.art-slutt-cta .btn-mork:hover{background:#FDEBA6;color:var(--op-natt)}
html body.artikkel section.art-slutt-cta .btn-mork:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------------------------------------------------------------------
   3. SPØRSMÅL OG SVAR – en liste, ikke tretten hvite bokser.
      Devicet er platen med pilen: teal lukket, gul åpen.
   --------------------------------------------------------------------- */
html body .faq details{background:none!important;border:0!important;border-bottom:1px solid rgba(14,92,116,.18)!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
html body .faq details:first-of-type{border-top:1px solid rgba(14,92,116,.18)!important}
html body .faq summary{padding:1.15rem .15rem;font-size:1.02rem;line-height:1.4;color:var(--op-teal)}
html body .faq summary:hover{color:var(--op-natt)}
html body .faq summary::after{content:""!important;width:30px!important;height:30px!important;border:0!important;border-radius:50%;flex-shrink:0;
  background:var(--op-teal) var(--op-chev-hvit) center/15px no-repeat;transform:none!important;transition:background-color .2s!important}
html body .faq details[open] summary::after{background:var(--op-gul) var(--op-chev-teal) center/15px no-repeat;transform:rotate(180deg)!important}
html body .faq details[open] summary{color:var(--op-natt)}
html body .faq details p{padding:0 3.2rem 1.35rem .15rem!important;color:var(--op-tekst)}
html body .faq summary:focus-visible{outline:3px solid var(--op-teal);outline-offset:2px;border-radius:6px}

/* ---------------------------------------------------------------------
   4. FORFATTER OG KVALITETSSIKRING
   --------------------------------------------------------------------- */
html body.artikkel .ekspert .boks{background:#fff;border:0;box-shadow:var(--op-skygge-2)}
html body .ekspert .boks blockquote{background:none!important;border-left:3px solid var(--op-gul-dyp)!important;border-radius:0!important;padding:.2rem 0 .2rem 1.3rem!important;color:var(--op-teal)}
/* kvalitetssikringen er et segl: hel teal flate, ikke en blåhvit kopi av kortet over */
html body .ekspert .kvalsikk{background:linear-gradient(140deg,#0E5C74,#13708C)!important;border:0!important;box-shadow:var(--op-skygge-2)!important;color:#fff}
html body .ekspert .kvalsikk h3,html body .ekspert .kvalsikk h3 a{color:#fff!important}
html body .ekspert .kvalsikk .eyebrow{color:var(--op-gul)!important}
html body .ekspert .kvalsikk .eyebrow svg{stroke:var(--op-gul)!important}
html body .ekspert .kvalsikk .rolle{color:#CFE3EA!important}
html body .ekspert .kvalsikk p{color:#E6F0F3!important}
html body .ekspert .kvalsikk .ekspert-kontakt a,html body .ekspert .kvalsikk .cred li{color:#F2F7F9!important}
html body .ekspert .kvalsikk .ekspert-kontakt a:hover{color:var(--op-gul)!important}
html body .ekspert .kvalsikk .ekspert-kontakt svg,html body .ekspert .kvalsikk .cred svg{stroke:var(--op-gul)!important}
html body .ekspert .kvalsikk .linkedin svg{fill:var(--op-gul)!important;stroke:none!important}
html body .ekspert .kvalsikk .ks-foto img{box-shadow:0 0 0 3px var(--op-gul)!important}
html body .ekspert .kvalsikk a:focus-visible{outline:2px solid var(--op-gul);outline-offset:2px}

/* ---------------------------------------------------------------------
   5. KILDER (og kortene på /guider/, som deler komponenten)
   --------------------------------------------------------------------- */
html body .kilder-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;justify-content:stretch}
html body .kilder-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
html body .kilder-grid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
html body .kilder-grid:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
html body .kilder-grid:has(>:nth-child(8):last-child),
html body .kilder-grid:has(>:nth-child(7):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
html body .kld-kort{max-width:none!important;background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none;border-radius:14px;transition:background-color .2s,border-color .2s,transform .2s}
html body .kilder-grid .kld-kort{background:#fff;border-color:transparent;box-shadow:var(--op-skygge)}
html body .kld-kort .kilde-ic{background:var(--op-teal)}
html body .kld-kort .kilde-ic svg{stroke:#fff}
html body .kld-kort .kilde-tx b{color:var(--op-teal)}
html body .kld-kort .kilde-tx span{color:var(--op-tekst)}
html body .kld-kort .kilde-tx .kilde-dom{color:var(--op-teal);font-weight:600}
html body .kld-kort:hover{background:var(--op-teal);border-color:var(--op-teal);transform:translateY(-2px)}
html body .kld-kort:hover .kilde-tx b,html body .kld-kort:hover .kilde-tx span,html body .kld-kort:hover .kilde-tx .kilde-dom{color:#fff}
html body .kld-kort:hover .kilde-ic{background:var(--op-gul)}
html body .kld-kort:hover .kilde-ic svg{stroke:var(--op-teal)}
html body .kld-kort:focus-visible{outline:3px solid var(--op-teal);outline-offset:3px}
@media (max-width:1000px){
  html body .kilder-grid,html body .kilder-grid:has(>:nth-child(4):last-child),
  html body .kilder-grid:has(>:nth-child(7):last-child),html body .kilder-grid:has(>:nth-child(8):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  html body .kilder-grid:has(>:nth-child(4):last-child),html body .kilder-grid:has(>:nth-child(8):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  html body .kilder-grid,html body .kilder-grid[class]{grid-template-columns:1fr!important}
  html body .kilder-grid .kld-kort{flex-direction:row;align-items:flex-start;gap:.9rem}
}
/* /guider/: tretten kort i tre spor gir ett foreldreløst – det siste tar hele raden */
html body .guider-rad > :last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:860px){
  html body .guider-rad > :last-child:nth-child(3n+1){grid-column:auto}
  html body .guider-rad > :last-child:nth-child(2n+1){grid-column:1/-1}
}
@media (max-width:560px){html body .guider-rad > :last-child{grid-column:auto!important}}
html body .guider-intro-rad{border-bottom:0!important;padding-bottom:0!important;margin-bottom:1.4rem!important}

/* ---------------------------------------------------------------------
   6. ARTIKKELKOMPONENTER
   --------------------------------------------------------------------- */
/* tidslinja: fylte nummerplater */
html body .tl-num{background:var(--op-teal)!important;color:#fff!important;box-shadow:0 6px 14px -8px rgba(14,60,80,.6)}
html body .tl-steg:hover .tl-num{background:var(--op-gul)!important;color:var(--op-teal)!important}

/* «Slik kan du stoppe …»-radene: farget flate + teal plate, gul når åpen */
html body .stopp-rad{background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none}
html body .stopp-rad:hover{border-color:var(--op-teal);box-shadow:none}
html body .stopp-rad.open{background:#fff;border-color:var(--op-teal);box-shadow:var(--op-skygge)}
html body .stopp-nr{color:var(--op-teal)!important;font-size:1.3rem;font-weight:700}
html body .stopp-ic{background:var(--op-teal)}
html body .stopp-ic svg{stroke:#fff}
html body .stopp-rad.open .stopp-ic,html body .stopp-hode:hover .stopp-ic{background:var(--op-gul);transform:none}
html body .stopp-rad.open .stopp-ic svg,html body .stopp-hode:hover .stopp-ic svg{stroke:var(--op-teal)}
html body .stopp-tit small{color:var(--op-myk)}
html body .stopp-pil{stroke:var(--op-teal)}
/* ingen pille rundt en status: ordet står alene, med en gul prikk */
html body .stopp-tag{background:none!important;padding:0!important;border-radius:0!important;color:var(--op-teal)!important;display:inline-flex;align-items:center;gap:.4rem}
html body .stopp-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--op-gul-dyp);flex-shrink:0}

/* «Godt å vite»: husets gule flate, ingen strek over */
html body .art-kropp .rett{background:var(--op-gul-myk);border:1px solid var(--op-gul-kant)!important;border-radius:16px;padding:1.5rem 1.6rem 1.6rem!important}
html body .rett-ic{background:var(--op-teal)}
html body .rett-ic svg{stroke:#fff}

/* kalkulatoren på /tvangssalg/: resultatlinja i gult */
html body .vs-diff{background:var(--op-gul-myk);border:1px solid var(--op-gul-kant)}

/* ---------------------------------------------------------------------
   7. KORT I ARTIKKELEN: farget flate + teal plate, aldri hvitt på hvitt
   --------------------------------------------------------------------- */
html body .type-kort,html body .utfall-kort{background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none}
html body .type-kort .ti,html body .utfall-kort .ui{background:var(--op-teal)}
html body .type-kort .ti svg,html body .utfall-kort .ui svg{stroke:#fff}
html body .utfall-kort p,html body .type-kort p{color:var(--op-tekst)}
/* tallrekka på /hvem-far-gjeldsproblemer/ m.fl.: ett bånd med fire tall, ikke fire bokser */
html body .statkort{background:var(--op-dis);border-radius:16px;padding:1.4rem 1rem;gap:0!important}
html body .statkort .sk{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:.4rem .8rem!important}
html body .statkort .sk + .sk{box-shadow:inset 1px 0 0 rgba(14,92,116,.16)!important}
@media (max-width:720px){
  html body .statkort{row-gap:1rem!important}
  html body .statkort .sk:nth-child(odd){box-shadow:none!important}
}
html body .statkort .sk .l{color:var(--op-tekst)}
/* sitat fra kilde: gul strek, ingen flate (en flate i flaten ble en boks i boksen) */
html body .art-kropp .kildesitat{background:none!important;border-left:3px solid var(--op-gul-dyp)!important;border-radius:0!important;padding:.3rem 0 .3rem 1.4rem!important}

/* ---------------------------------------------------------------------
   8. TABELLER: teal hode er devicet; ingen min-width som lager scroll
      som ikke trengs (Bendik 13.10.) – wrapperen ruller bare hvis den må
   --------------------------------------------------------------------- */
html body .sats-wrap,html body .rt-tab-wrap,html body .art-kropp .tabell-wrap:has(thead){background:#fff;border:1px solid var(--op-kant)!important;border-radius:14px!important;box-shadow:none!important;overflow-x:auto}
html body .sats thead th,html body .rt-tab thead th,html body .art-kropp .tabell-wrap thead th,
html body .art-kropp .tabell-wrap thead tr{background:var(--op-teal)!important;color:#fff!important;border-bottom:0!important}
html body .sats caption,html body .rt-tab caption{color:var(--op-teal)}
html body .rt-tab,html body .art-kropp .tabell-wrap table{min-width:0!important}
html body .art-kropp .tabell-wrap:has(thead){margin:1.6rem 0!important}

/* ---------------------------------------------------------------------
   9. KONTAKTPANELET: søknadskortet ligger alt i et hvitt panel – ikke en
      hvit boks til inni
   --------------------------------------------------------------------- */
html body .kontakt-panel .kp-hoyre .soknad{border:0!important;box-shadow:none!important;background:none!important;padding-left:0!important;padding-right:0!important}

/* ---------------------------------------------------------------------
   10. HERO PÅ SMAL SKJERM: kortet ved siden av teksten får ikke sprenge
       spalta (refinansiering-med-inkasso klippet H1 med 20 px på 390)
   --------------------------------------------------------------------- */
html body .hero-landing > *{min-width:0}
@media (max-width:860px){html body .hero-landing{grid-template-columns:minmax(0,1fr)!important}}
html body .funn-liste .fv{text-align:right;white-space:normal!important;text-wrap:balance}
@media (max-width:420px){html body .funn-liste .fv{font-size:1.02rem}}

/* ---------------------------------------------------------------------
   11. FORSIDEN (konservativt: bare platene og pillen)
   --------------------------------------------------------------------- */
/* temaflisene: plate med vekt i stedet for blek sirkel – gul på hover */
html body .flis-kat .ikon{background:var(--op-teal)}
html body .flis-kat .ikon svg{stroke:#fff}
html body .flis-kat:hover .ikon{background:var(--op-gul)}
html body .flis-kat:hover .ikon svg{stroke:var(--op-teal)}
/* «Helt uavhengig av bankene»: en setning, ikke en kapsel */
html body .fs-uavh span{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
html body .fs-uavh svg{stroke:var(--op-teal)}

/* tallrekka finnes også inline-stylet (/inkassogjeld/): samme bånd */
html body .statkort,
html body .art-kropp > div[style*="minmax(90px,1fr)"]{background:var(--op-dis)!important;border:1px solid var(--op-kant)!important;border-radius:16px!important;padding:1.3rem .8rem!important;gap:0!important}
html body .art-kropp > div[style*="minmax(90px,1fr)"] > div{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:.4rem .7rem!important}
html body .art-kropp > div[style*="minmax(90px,1fr)"] > div + div{box-shadow:inset 1px 0 0 rgba(14,92,116,.16)!important}
html body .art-kropp > div[style*="minmax(90px,1fr)"] > div > div + div{color:var(--op-tekst)!important}
/* kildelister med mange kilder: fire spor (16 = 4 x 4) */
html body .kilder-grid:has(>:nth-child(9)){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1000px){html body .kilder-grid:has(>:nth-child(9)){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){html body .kilder-grid:has(>:nth-child(9)){grid-template-columns:1fr!important}}

/* ---------------------------------------------------------------------
   12. /gjeldsproblemer-ekspert/: profilen står på papir rett under heroen,
       så kortet får dis-flaten; «Fire grunner» mister ytterboksen
       (artikkelen står på dis der) og de fire kortene blir hvite med plate
   --------------------------------------------------------------------- */
html body.artikkel .art-hero + section.blokk.ekspert .boks{background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none}
html body .art-kropp > div[style*="linear-gradient(180deg,#ffffff,var(--blaa-myk))"]{background:none!important;border:0!important;padding:0!important;border-radius:0!important}
html body div[style*="minmax(248px,1fr)"] > div{border:0!important;box-shadow:var(--op-skygge)!important;background:#fff!important}
html body div[style*="minmax(248px,1fr)"] > div > span:first-child{background:var(--op-teal)!important}
html body div[style*="minmax(248px,1fr)"] > div > span:first-child svg{stroke:#fff}
/* kildelister med én eller to kilder: ikke fem smale spor */
html body .kilder-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,260px));justify-content:center}
html body .kilder-grid:has(>:only-child){grid-template-columns:minmax(0,300px);justify-content:center}

/* ordlista: to spalter som flyter som en ordbok, ikke en smal stripe */
html body .ordliste-boks{border:0;box-shadow:var(--op-skygge)}
@media (min-width:760px){
  html body .ordliste-sek .wrap{max-width:960px}
  html body .ordliste-boks{padding:1.8rem 2.1rem}
  html body .ordliste-boks dl{display:block;columns:2;column-gap:2.8rem}
  html body .ordliste-boks dl > div{break-inside:avoid;margin:0 0 1rem}
}

/* ---------------------------------------------------------------------
   13. SMÅJUSTERINGER FRA MÅLINGENE
   --------------------------------------------------------------------- */
/* forfatterboksen: kvalifikasjonslista stakk 5 px ut av vinduet mellom 700 og 749 px */
html body .ekspert .ekspert-todel,html body .ekspert .kvalsikk .ekspert-todel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html body .ekspert .ekspert-todel .cred li{white-space:normal}
/* «Mest effektiv» på smal skjerm: egen linje under tittelen, så tittelen ikke presses til tre linjer */
@media (max-width:600px){
  html body .stopp-hode{flex-wrap:wrap;row-gap:.35rem}
  html body .stopp-tag{order:10;flex-basis:100%;padding-left:calc(44px + .7rem)!important}
}

/* ---------------------------------------------------------------------
   14. TYPETRINN (målt per komponent 20.10.): færre kombinasjoner
   --------------------------------------------------------------------- */
/* forfatterkortet 7 -> 5: rolle, kontakt og kvalifikasjoner på samme trinn */
html body .ekspert .rolle,
html body .ekspert .ekspert-todel .ekspert-kontakt a,
html body .ekspert .ekspert-todel .cred li{font-size:.875rem!important;font-weight:500!important}
html body .ekspert .boks:not(.kvalsikk) .rolle{color:var(--op-tekst)!important}
html body .ekspert .boks:not(.kvalsikk) .ekspert-todel .ekspert-kontakt a,html body .ekspert .boks:not(.kvalsikk) .ekspert-todel .cred li{color:var(--op-tekst)!important}
html body .ekspert .kvalsikk .rolle,html body .ekspert .kvalsikk p{color:#E1EDF1!important}
/* stopp-radene 6 -> 5: lenken på samme trinn som tittelen, merket på samme størrelse som undertittelen */
html body .stopp-lenke{font-size:1rem}
html body .stopp-tag{font-size:.8125rem!important;letter-spacing:.03em}
html body .stopp-tit small{font-size:.8125rem}
/* regnestykket: nøkler og note på brødtekstens trinn */
html body .regne .rk{font-size:1rem}

/* ---------------------------------------------------------------------
   15. KONTRAST (sveip_kontrast.py, 30 sider x 390/1440, 20.10.2026)
   --------------------------------------------------------------------- */
/* husets dempede grå #77838F ga 3,9:1 på hvitt og ~3,0 på de lyseblå
   flatene – én tone for hele domenet som holder AA overalt */
:root{--ink-myk:#56636F}
html body .art-hero .art-krumme span,html body nav.toc a{color:var(--op-myk)}
/* hovedknappen: hvit tekst på mintgrønn ga 3,0–3,3:1. Grønnen mørknes til
   smaragd (≥4,8 mot hvitt i begge ender); hvit tekst beholdes, så den ikke
   blir en kopi av en annen merkevares grønne knapp med mørk tekst */
html body .btn-tp{background:linear-gradient(135deg,#078255,#066B47)!important;color:#fff!important;box-shadow:0 8px 18px -10px rgba(6,90,60,.6)!important}
html body .btn-tp:hover{background:linear-gradient(135deg,#066B47,#055A3C)!important}
html body .btn-tp:focus-visible{outline:3px solid var(--op-teal);outline-offset:3px}
/* footeren: fire grånyanser mellom 3,0 og 4,5 på natt -> to toner som holder */
html body .footer .pris p,html body .footer .pris p b,html body .footer .bunn span,html body .footer .f-brand p{color:#A9B8C4!important}
html body .footer .ansvar,html body .footer .ansvar b{color:#BAC7D1!important}
/* regnestykket: den røde verdien 4,3 -> 5,7 */
html body .regne-rad.uthev .rv{color:#A8402A}
/* kalkulatorens resultatpanel: hvit tekst skal ikke dempes med opacity på gradient */
html body .kalk-res .rnote,html body .kalk-res .fordel .f span,html body .kalk-res .rlbl{opacity:1!important;color:#E6F0F3}

/* ---------------------------------------------------------------------
   16. 404-SIDEN (egen mal): flateskifte i stedet for streker, og
       tekst som holder AA
   --------------------------------------------------------------------- */
html body:has(> main.midt) {background:var(--op-dis)}
html body > header.topp{border-bottom:0}
html body > footer.bunn{border-top:0;color:var(--op-myk)}
html body > main.midt .kode{color:var(--op-teal-2)}
html body > main.midt .lenker-tittel{color:var(--op-myk)}
html body > header.topp .logo span[style]{color:#078255!important}
html body > header.topp .logo-dot{background:#078255}
html body > main.midt .lenker a{border-color:var(--op-kant)}
html body > main.midt .lenker a:hover{background:var(--op-teal);color:#fff;border-color:var(--op-teal)}

/* ---------------------------------------------------------------------
   17. /kontakt/: de tre kontaktmåtene som kortene ellers på domenet
   --------------------------------------------------------------------- */
html body .kmet{background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none}
html body a.kmet:hover{background:var(--op-dis);border-color:var(--op-teal);box-shadow:var(--op-skygge)}
html body .kmet-ic{background:var(--op-teal);box-shadow:none}
html body .kmet-ic svg{stroke:#fff}
html body a.kmet:hover .kmet-ic{background:var(--op-gul)}
html body a.kmet:hover .kmet-ic svg{stroke:var(--op-teal)}
html body .kmet-val{word-break:normal;overflow-wrap:normal}
@media (max-width:380px){html body .kmet-val{font-size:1rem}}
html body .kmet-note svg{stroke:var(--op-teal)}
/* kildekort INNE i artikkelen (om-oss, slik-jobber-vi) står på papir: dis-flate, ikke hvitt */
html body .art-kropp .kilder-grid .kld-kort{background:var(--op-dis);border-color:var(--op-kant);box-shadow:none}
html body .art-kropp .kilder-grid .kld-kort:hover{background:var(--op-teal)}

/* ---------------------------------------------------------------------
   18. INNHOLDSFORTEGNELSEN
   --------------------------------------------------------------------- */
/* desktop: på lave skjermer (1366x768) var de lengste (adhd 615 px) høyere
   enn plassen og fikk egen rullefelt. Tettere linjer der i stedet for rulling. */
@media (min-width:901px) and (max-height:860px){
  html body .toc a{padding-top:.28rem;padding-bottom:.28rem;font-size:.84rem;line-height:1.28}
  html body .toc-rail{top:84px;max-height:calc(100vh - 96px)}
}
/* mobil: innholdslista er en boks på papir -> dis-flate, ikke hvit med ramme */
@media (max-width:900px){
  html body .toc{background:var(--op-dis)!important;border:1px solid var(--op-kant)!important;box-shadow:none!important}
}

/* ---------------------------------------------------------------------
   19. FRA MATRISEN (30 sider x 320/390/768/1024/1440/1920)
   --------------------------------------------------------------------- */
/* forsiden vekslet hvitt og #F4F7F9 – 9 nivåer, under det øyet ser.
   Partallsseksjonene får husets dis (17 nivåer). Seksjoner med egen flate
   (heroen, kontaktbåndet) er ikke blokk-seksjoner i denne rekka. */
html body .resten > section.blokk:nth-of-type(even){background:var(--op-dis)}
/* stripa under den faste headeren er en del av heroen, ikke en egen flate */
html body.artikkel .art-pad{background:#EDF4F7}
/* tallkortene på forsiden stakk 17 px ut på 320 (eksisterende): minmax(0,1fr) og mindre tall */
@media (max-width:720px){html body .ts-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){html body .tb b{font-size:1.8rem!important}html body .tb{padding-left:.8rem;padding-right:.8rem}}
/* «Mest effektiv ved mye gjeld» klippet på 320: får brekke på egen linje */
@media (max-width:600px){html body .stopp-tag{white-space:normal!important}}
/* sju kilder: fire spor også på nettbrett (tre ga 3+3+1) */
@media (min-width:641px) and (max-width:1000px){html body .kilder-grid:has(>:nth-child(7):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* tre tall inline-stylet (/inkassogjeld/) ga 2+1 på 320 */
@media (max-width:420px){html body .art-kropp > div[style*="minmax(90px,1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .art-kropp > div[style*="minmax(90px,1fr)"] > div{padding:.3rem .35rem!important}}
/* tabellhodet som ett bånd (også raden, ikke bare cellene) */
html body .sats thead tr,html body .rt-tab thead tr{background:var(--op-teal)}
/* klokka på /betalingsanmerkning/ står på papir: dis-flate */
html body .klokke-boks{background:var(--op-dis)!important;border:1px solid var(--op-kant)!important;box-shadow:none!important}
/* siste kontrastfunn: øyebrynet i forsidens kontaktpanel (4,1), det grønne
   beløpet i den gule resultatlinja (3,3), og ingressen i CTA-båndet der
   gradienten er lysest (4,3) */
html body .kontakt-panel .kp-venstre .eyebrow{color:var(--op-gul)!important}
html body .kontakt-panel .kp-venstre .eyebrow::before{background:var(--op-gul)!important}
html body .vs-diff b{color:#066B47}
html body.artikkel section.art-slutt-cta .cta-banner p{color:#F3F8FA!important}
html body.artikkel section.art-slutt-cta .cta-banner p b{color:#fff}
/* forsidens forfatterkort står i en hvit seksjon (oddetall i rekka): dis-flate */
html body .resten .ekspert .boks{background:var(--op-dis);border:1px solid var(--op-kant);box-shadow:none}