:root {
  --bla: #1d4e89;
  --bla-mork: #143a68;
  --bla-lys: #eaf1fa;
  --aksent: #f2a541;
  --tekst: #1f2733;
  --dempet: #5b6675;
  --linje: #dfe5ec;
  --bakgrunn: #ffffff;
  --flate: #f6f8fb;
  --gronn: #e6f4ea;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bakgrunn); color: var(--tekst);
  font: 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--bla); }
a:hover { color: var(--bla-mork); }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { line-height: 1.25; color: #121a26; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .4em 0 .3em; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; margin: 1.8em 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.5em 0 .4em; }
.liten { font-size: .85rem; color: var(--dempet); }

/* Toppmeny */
.topp { border-bottom: 1px solid var(--linje); background: #fff; position: sticky; top: 0; z-index: 10; }
.topp-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { font-weight: 700; font-size: 1.15rem; color: var(--tekst); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logo-merke { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bla); color: #fff; font-size: 1rem; }
.hovedmeny { display: flex; gap: 4px; flex-wrap: wrap; }
.hovedmeny a { text-decoration: none; color: var(--tekst); font-size: .95rem; padding: 8px 10px; border-radius: 8px; }
.hovedmeny a:hover { background: var(--flate); }
.hovedmeny .nav-maler { background: var(--bla); color: #fff; }
.hovedmeny .nav-maler:hover { background: var(--bla-mork); color: #fff; }
.meny-knapp { display: none; background: none; border: 1px solid var(--linje); border-radius: 8px; font-size: 1.2rem; padding: 4px 10px; cursor: pointer; }
@media (max-width: 860px) {
  .meny-knapp { display: block; }
  .hovedmeny { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--linje); flex-direction: column; padding: 8px 20px 16px; }
  .meny-apen .hovedmeny { display: flex; }
}

/* Knapper */
.knapp { display: inline-block; background: var(--bla); color: #fff; text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 10px; }
.knapp:hover { background: var(--bla-mork); color: #fff; }
.knapp-hvit { background: #fff; color: var(--bla); border: 1px solid #fff; }
.knapp-hvit:hover { background: var(--bla-lys); color: var(--bla-mork); }

/* Forside */
.hero { background: linear-gradient(135deg, var(--bla) 0%, #2a6bb3 100%); color: #fff; padding: 56px 0 64px; }
.hero h1 { color: #fff; max-width: 760px; }
.hero .ingress { color: #e3ecf7; max-width: 680px; }
.hero-etikett { display: inline-block; background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: 999px; font-size: .85rem; margin: 0; }
.hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero .knapp:not(.knapp-hvit) { background: var(--aksent); color: #1b1300; }
.hero .knapp:not(.knapp-hvit):hover { background: #e3932a; }
.varsel { margin-top: 24px; background: #fff7e8; border: 1px solid #f6d9a8; border-radius: var(--radius); padding: 14px 18px; }
.seksjon { margin-top: 40px; }
.ingress { font-size: 1.15rem; color: var(--dempet); }
.side-topp { padding-top: 24px; padding-bottom: 8px; }

.kort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kort { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--linje); border-radius: var(--radius); text-decoration: none; color: var(--tekst); background: #fff; transition: border-color .15s, box-shadow .15s; }
.kort:hover { border-color: var(--bla); box-shadow: 0 4px 16px rgba(29,78,137,.08); color: var(--tekst); }
.kort-kat { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bla); font-weight: 600; }
.kort-tittel { font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.kort-tekst { font-size: .92rem; color: var(--dempet); line-height: 1.5; }
.kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kat { display: flex; flex-direction: column; padding: 16px; background: var(--flate); border-radius: var(--radius); text-decoration: none; color: var(--tekst); }
.kat:hover { background: var(--bla-lys); color: var(--tekst); }
.kat-navn { font-weight: 700; }
.kat-tekst { font-size: .88rem; color: var(--dempet); line-height: 1.45; }

/* Maler */
.mal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.mal-boks { border: 2px solid var(--bla); border-radius: var(--radius); padding: 20px 22px; background: #fff; margin: 32px 0; }
.mal-grid .mal-boks { margin: 0; }
.mal-boks h3 { margin: .1em 0 .3em; font-size: 1.3rem; }
.mal-boks p { margin: .4em 0; }
.mal-etikett { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bla); font-weight: 700; }
.hake { list-style: none; padding: 0; margin: 12px 0 18px; }
.hake li { padding-left: 26px; position: relative; margin: 4px 0; font-size: .95rem; }
.hake li::before { content: "✓"; position: absolute; left: 0; color: #1a7f37; font-weight: 700; }

/* Artikkel */
.artikkel { max-width: 760px; padding-top: 16px; padding-bottom: 40px; }
.brodsmuler { font-size: .9rem; color: var(--dempet); margin-top: 12px; }
.brodsmuler a { color: var(--dempet); }
.oppdatert { font-size: .88rem; color: var(--dempet); border-bottom: 1px solid var(--linje); padding-bottom: 16px; }
.innhold.smal { max-width: 760px; margin-top: 24px; }
.innhold ul, .innhold ol { padding-left: 1.3em; }
.innhold li { margin: .3em 0; }
.innhold blockquote, .boks { margin: 1.5em 0; padding: 16px 20px; background: var(--bla-lys); border-left: 4px solid var(--bla); border-radius: 0 var(--radius) var(--radius) 0; }
.innhold blockquote p { margin: .3em 0; }
.tabell { overflow-x: auto; margin: 1.2em 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { background: var(--flate); font-weight: 600; }
.ansvar { font-size: .85rem; color: var(--dempet); margin-top: 32px; }
.relatert { margin-top: 40px; }
a.annonse::after { content: " (annonselenke)"; font-size: .78em; color: var(--dempet); }

/* Kalkulatorer */
.kalk { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 20px 22px; margin: 28px 0; }
.kalk h3 { margin-top: 0; }
.kalk-rad { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.kalk label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; flex: 1 1 200px; }
.kalk label.radio { flex-direction: row; align-items: center; font-weight: 400; gap: 8px; }
.kalk input[type=text], .kalk select { font: inherit; padding: 10px 12px; border: 1px solid #c4cfdb; border-radius: 8px; background: #fff; }
.kalk-svar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 0; }
.kalk-svar div { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--linje); }
.kalk-svar dt { font-size: .82rem; color: var(--dempet); }
.kalk-svar dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 700; }

/* Bunn */
.bunn { background: #10233d; color: #c9d4e2; margin-top: 64px; padding: 36px 0 24px; font-size: .95rem; }
.bunn a { color: #fff; text-decoration: none; }
.bunn a:hover { text-decoration: underline; color: #fff; }
.bunn-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bunn p { margin: .3em 0; }
.bunn .logo { color: #fff; }
.bunn .liten { color: #93a3b8; margin-top: 24px; }