/* Felles layout og komponenter. Alle farger kommer fra tokens i assets/varianter/<variant>.css.
   Hero, topp-posisjon, bestått-seksjon og sidetopp med bilde ligger i variantfilene, siden de er forskjellige komposisjoner. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--stikke) var(--inv-bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sno);color:var(--tekst);font:400 1.0625rem/1.6 var(--font-b)}
::selection{background:var(--stikke);color:var(--pa-stikke)}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--stikke);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-h);font-stretch:72%;font-weight:900;line-height:.95;margin:0;letter-spacing:-.005em;text-wrap:balance}
.wrap{max-width:var(--maks);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.num{font-variant-numeric:tabular-nums}
.knapp{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;font:800 1.1875rem/1 var(--font-b);font-stretch:80%;text-decoration:none;white-space:nowrap;border:2px solid var(--knapp);background:var(--knapp);color:var(--pa-knapp);transition:background .25s cubic-bezier(.16,1,.3,1),color .25s,border-color .25s}
.knapp:hover{background:var(--knapp-hover);border-color:var(--knapp-hover)}
.knapp.sek{background:var(--sek-bg);border-color:var(--sek-kant);color:var(--sek-fg);backdrop-filter:var(--sek-blur)}
.knapp.sek:hover{background:var(--sek-hover-bg);color:var(--sek-hover-fg)}
.knapp svg{width:20px;height:20px;flex:none}

/* Meny */
.topp{position:relative;z-index:10;color:var(--topp-fg);background:var(--topp-bg)}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}
.merke{text-decoration:none;display:flex;align-items:center;gap:14px}
.merke strong{display:block;font-stretch:75%;font-weight:900;font-size:1.625rem;line-height:1}
.merke span{display:block;font-size:.8125rem;color:var(--lys-dempet);margin-top:3px}
.meny{display:flex;align-items:center;gap:28px}
.meny a.lnk{text-decoration:none;font-weight:600;font-size:1rem;color:var(--inv-lenke)}
.meny a.lnk:hover{color:var(--topp-fg);text-decoration:underline}
.meny .elevknapp{border:2px solid var(--topp-fg);padding:10px 16px;font-weight:800;font-stretch:85%;text-decoration:none}
.meny .elevknapp:hover{background:var(--topp-fg);color:var(--topp-hover-fg)}
.meny .knapp{padding:12px 18px;font-size:1.0625rem}
@media (max-width:980px){.meny a.lnk{display:none}}
@media (max-width:640px){.meny .knapp{display:none}.merke strong{font-size:1.375rem}.merke span{display:none}}

.cta{display:flex;flex-wrap:wrap;gap:12px}
.tillit{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:40px;padding-top:24px;border-top:1px solid rgb(var(--inv-rgb)/.22);max-width:760px}
.tillit div{display:flex;align-items:baseline;gap:10px}
.tillit b{font-stretch:70%;font-weight:900;font-size:2.25rem;line-height:1;color:var(--inv-tekst)}
.tillit span{font-size:.9375rem;color:var(--inv-tillit);line-height:1.3}

/* Elevverktøy */
.elev{padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,64px)}
.elev h2{font-size:clamp(2.25rem,4.6vw,3.5rem)}
.elev .lede{color:var(--dempet);margin:12px 0 32px;max-width:56ch;font-size:1.125rem}
.verktoy{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--tekst)}
.verktoy a{display:block;padding:28px 28px 30px 0;text-decoration:none;border-bottom:1px solid var(--sno-2);position:relative}
.verktoy a + a{padding-left:28px;border-left:1px solid var(--sno-2)}
.verktoy b{display:flex;align-items:center;justify-content:space-between;gap:12px;font-stretch:75%;font-weight:900;font-size:clamp(1.625rem,2.6vw,2.125rem);line-height:1}
.verktoy b svg{width:26px;height:26px;color:var(--stikke);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.verktoy a:hover b svg{transform:translate(4px,-4px)}
.verktoy span{display:block;margin-top:10px;color:var(--dempet)}
@media (max-width:820px){.verktoy{grid-template-columns:1fr}.verktoy a + a{padding-left:0;border-left:0}}

/* Trinn */
.veg{background:var(--inv-bg);color:var(--inv-tekst);padding:clamp(72px,9vw,120px) 0;position:relative}
.veg h2{font-size:clamp(2.5rem,5.4vw,4.25rem);max-width:14ch}
.veg .lede{color:var(--lys-dempet);max-width:56ch;margin:18px 0 56px;font-size:1.125rem}
.trinn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.trinn li{position:relative;padding:0 24px 0 0}
.trinn .nr{font-weight:800;font-stretch:85%;color:var(--aksent-inv);text-transform:uppercase;letter-spacing:.06em;font-size:.875rem}
.trinn h3{font-size:clamp(1.625rem,2.4vw,2.125rem);margin:8px 0 10px}
.trinn p{margin:0;color:var(--lys-dempet);font-size:.9875rem}
.trinn li:last-child h3{color:var(--aksent-inv)}
@media (max-width:980px){.trinn{grid-template-columns:1fr 1fr;gap:40px 24px}}
@media (max-width:520px){.trinn{grid-template-columns:1fr}}

/* Lærere med bilde */
.laerere{padding:clamp(72px,9vw,120px) 0}
.laerere .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.laerere figure{margin:0;position:relative}
.laerere figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.laerere figcaption{font-size:.75rem;color:var(--dempet);margin-top:8px}
.laerere h2{font-size:clamp(2.5rem,5vw,4rem)}
.laerere .lede{color:var(--dempet);font-size:1.125rem;margin:16px 0 28px;max-width:52ch}
.liste{list-style:none;margin:0;padding:0;border-top:3px solid var(--tekst)}
.liste li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--sno-2)}
.liste h3{font-size:1.5rem;font-stretch:80%}
.liste span{display:block;color:var(--dempet);font-size:.9375rem;margin-top:2px}
.liste a{font-weight:800;font-stretch:85%;font-size:1.25rem;color:var(--stikke-tekst);text-decoration:none;white-space:nowrap}
.liste a:hover{text-decoration:underline}
@media (max-width:900px){.laerere .grid{grid-template-columns:1fr}.laerere figure{max-width:520px}}

/* Klasser og priser */
.klasser{background:var(--hvit);padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--sno-2)}
.klasser .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px)}
.klasser h2{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:28px}
.kl{list-style:none;margin:0;padding:0}
.kl li{display:grid;grid-template-columns:5.5rem 1fr;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--sno-2)}
.kl b{font-stretch:65%;font-weight:900;font-size:2.75rem;line-height:1;color:var(--stikke-tekst)}
.kl h3{font-size:1.5rem;font-stretch:80%}
.kl p{margin:4px 0 0;color:var(--dempet);font-size:.9375rem}
.kl li.hoved{background:var(--inv-bg);color:var(--inv-tekst);padding:24px;margin-bottom:6px;border:0}
.kl li.hoved b{color:var(--aksent-inv);font-size:4rem}
.kl li.hoved h3{font-size:2rem}
.kl li.hoved p{color:var(--lys-dempet);font-size:1.0625rem}
.pris{background:var(--sno);padding:32px}
.pris h3{font-size:2rem;margin-bottom:6px}
.pris > p{color:var(--dempet);margin:0 0 18px;font-size:.9375rem}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
td{padding:14px 0;border-bottom:1px solid var(--sno-2);font-size:1rem;vertical-align:baseline}
td:last-child{text-align:right;white-space:nowrap;font-weight:900;font-stretch:75%;font-size:1.5rem;color:var(--tekst)}
.pris .knapp{margin-top:24px}
@media (max-width:900px){.klasser .grid{grid-template-columns:1fr}}

footer{background:var(--inv-bg);color:var(--lys-dempet);font-size:.875rem;padding:24px 0 96px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (min-width:821px){footer{padding-bottom:24px}}

/* Faste knapper på mobil */
.fast{display:none}
@media (max-width:820px){
  .fast{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:20;box-shadow:0 -6px 24px rgb(var(--natt-rgb)/.25)}
  .fast a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;font-weight:800;font-stretch:85%;font-size:1.0625rem;text-decoration:none}
  .fast a:first-child{background:var(--knapp);color:var(--pa-knapp)}
  .fast a:last-child{background:var(--inv-bg);color:var(--inv-tekst)}
  .fast svg{width:18px;height:18px}
}

/* ===== Flersidig: felles ===== */
.topp.solid{position:relative;background:var(--topp-solid-bg)}
.meny .nedtrekk{position:relative}
.meny .nedtrekk > button{all:unset;white-space:nowrap;cursor:pointer;font-weight:600;font-size:1rem;color:var(--inv-lenke);display:inline-flex;align-items:center;gap:6px}
.meny .nedtrekk > button:hover,.meny .nedtrekk > button[aria-expanded=true]{color:var(--topp-fg)}
.meny .nedtrekk > button:focus-visible{outline:3px solid var(--stikke);outline-offset:3px}
.meny .nedtrekk > button svg{width:14px;height:14px;transition:transform .2s}
.meny .nedtrekk > button[aria-expanded=true] svg{transform:rotate(180deg)}
.meny .panel{position:absolute;top:calc(100% + 18px);left:-24px;min-width:300px;background:var(--hvit);color:var(--tekst);box-shadow:0 18px 48px rgb(var(--natt-rgb)/.28);border-top:4px solid var(--stikke);padding:10px 0;display:none}
.meny .panel.apen{display:block}
.meny .panel a{display:flex;align-items:baseline;gap:14px;padding:11px 22px;text-decoration:none;font-weight:600}
.meny .panel a:hover{background:var(--sno)}
.meny .panel a b{font-stretch:65%;font-weight:900;font-size:1.25rem;color:var(--stikke-tekst);min-width:2.6rem}
.meny .panel a small{display:block;color:var(--dempet);font-weight:400;font-size:.8125rem}
.meny .panel hr{border:0;border-top:1px solid var(--sno-2);margin:6px 0}
@media (max-width:1080px){.meny .nedtrekk,.meny a.lnk{display:none}}
.burger{all:unset;display:none;cursor:pointer;color:var(--topp-fg);padding:10px;border:2px solid rgb(var(--topp-rgb)/.5)}
.burger svg{width:24px;height:24px;display:block}
@media (max-width:1080px){.burger{display:block}}
.mobilmeny{display:none;position:fixed;inset:0;z-index:40;background:var(--inv-bg);color:var(--inv-tekst);overflow:auto;padding:20px clamp(16px,4vw,48px) 120px}
.mobilmeny.apen{display:block}
.mobilmeny .lukk{all:unset;cursor:pointer;float:right;padding:10px;border:2px solid rgb(var(--inv-rgb)/.5)}
.mobilmeny .lukk svg{width:24px;height:24px;display:block}
.mobilmeny h2{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aksent-inv);font-stretch:100%;font-weight:800;margin:28px 0 8px}
.mobilmeny a{display:block;padding:12px 0;border-bottom:1px solid var(--inv-linje);text-decoration:none;font-size:1.25rem;font-weight:700;font-stretch:85%}
.mobilmeny a small{display:block;font-size:.875rem;color:var(--lys-dempet);font-weight:400;font-stretch:100%}

/* Sidetopp for undersider */
.sidetopp{background:var(--inv-bg);color:var(--inv-tekst);padding:clamp(36px,5vw,64px) 0 clamp(44px,6vw,80px);position:relative;overflow:hidden}
.sidetopp .wrap{position:relative;z-index:2;width:100%}
.sidetopp .merkelapp{display:inline-block;font-stretch:65%;font-weight:900;font-size:clamp(3.5rem,8vw,6rem);line-height:.85;color:var(--aksent-inv);margin-bottom:10px}
.sidetopp h1{font-size:clamp(2.5rem,5.6vw,4.5rem);max-width:18ch}
.sidetopp .ingress{font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--inv-ingress);max-width:60ch;margin:18px 0 0}
.sidetopp .cta{margin-top:28px}
.sidetopp .fakta{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:32px;padding-top:20px;border-top:1px solid rgb(var(--inv-rgb)/.2)}
.sidetopp .fakta div{display:flex;flex-direction:column}
.sidetopp .fakta b{font-stretch:72%;font-weight:900;font-size:1.75rem;line-height:1.05}
.sidetopp .fakta span{font-size:.875rem;color:var(--lys-dempet)}
.smuler{font-size:.875rem;color:var(--lys-dempet);margin-bottom:22px}
.smuler ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.smuler li+li::before{content:"/";margin-right:6px;color:var(--inv-linje)}
.smuler a{color:var(--inv-lenke)}
.smuler [aria-current]{color:var(--inv-tekst)}

/* Innhold */
.seksjon{padding:clamp(56px,7vw,96px) 0}
.seksjon.hvit{background:var(--hvit)}
.seksjon.mork{background:var(--inv-bg);color:var(--inv-tekst)}
.seksjon h2{font-size:clamp(2rem,4.2vw,3.25rem);max-width:20ch}
.seksjon .lede{color:var(--dempet);font-size:1.125rem;max-width:60ch;margin:14px 0 32px}
.seksjon.mork .lede{color:var(--lys-dempet)}
.to-kol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.to-kol{grid-template-columns:1fr}}
.prosa{max-width:68ch}
.prosa h2{margin:48px 0 14px}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:1.625rem;font-stretch:80%;margin:32px 0 8px}
.prosa p,.prosa li{color:var(--tekst-2)}
.prosa ul{padding-left:1.2em}
.prosa li{margin:6px 0}
.prosa a{color:var(--stikke-tekst);font-weight:600}
.kilde{font-size:.8125rem;color:var(--dempet)}
.kilde a{color:inherit}
.sidekort{background:var(--inv-bg);color:var(--inv-tekst);padding:28px;position:sticky;top:24px}
.sidekort h3{font-size:1.75rem;margin-bottom:12px}
.sidekort p{color:var(--lys-dempet);margin:0 0 18px;font-size:.9375rem}
.sidekort dl{margin:0 0 22px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.9375rem}
.sidekort dt{color:var(--lys-dempet)}
.sidekort dd{margin:0;font-weight:700;text-align:right}
.sidekort .knapp{width:100%;justify-content:center}
.sidekort .knapp + .knapp{margin-top:10px}
.sidekort .knapp.sek{background:transparent}

/* Klassekort (forside og oversikt) */
.klassekort{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--sno-2);border:2px solid var(--sno-2)}
.klassekort a{background:var(--hvit);padding:28px 28px 26px;text-decoration:none;display:flex;flex-direction:column;min-height:220px;position:relative;transition:background .2s}
.klassekort a:hover{background:var(--refleks)}
.klassekort b{font-stretch:62%;font-weight:900;font-size:4rem;line-height:.9;color:var(--stikke-tekst)}
.klassekort h3{font-size:1.75rem;font-stretch:78%;margin:14px 0 6px}
.klassekort span{color:var(--dempet);font-size:.9375rem}
.klassekort i{margin-top:auto;padding-top:16px;font-style:normal;font-weight:800;font-stretch:85%;color:var(--tekst);display:flex;align-items:center;gap:8px}
.klassekort i svg{width:18px;height:18px;color:var(--stikke);transition:transform .25s}
.klassekort a:hover i svg{transform:translateX(4px)}
.klassekort a.hoved{background:var(--inv-bg);color:var(--inv-tekst)}
.klassekort a.hoved b{color:var(--aksent-inv)}

.klassekort a.hoved span{color:var(--lys-dempet)}
.klassekort a.hoved i{color:var(--inv-tekst)}
.klassekort a.hoved:hover{background:var(--inv-bg-2)}
@media (max-width:900px){.klassekort{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.klassekort{grid-template-columns:1fr}.klassekort a{min-height:0}}

/* Kurskull */
.kull{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kull li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;background:var(--hvit);border-left:6px solid var(--stikke);padding:22px 26px;box-shadow:0 1px 0 var(--sno-2)}
.kull li.fullt{border-left-color:var(--sno-2)}
.kull li.fullt h3,.kull li.fullt .pris{color:var(--dempet)}
.kull h3{font-size:1.5rem;font-stretch:80%}
.kull .navn{font-size:.9375rem;color:var(--dempet);margin-top:2px}
.kull .dager{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.9375rem;color:var(--tekst-2)}
.kull .dager span{white-space:nowrap}
.kull .hoyre{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kull .pris{font-stretch:72%;font-weight:900;font-size:1.75rem;line-height:1}
.kull .status{font-size:.875rem;font-weight:700;color:var(--gront)}
.kull li.fullt .status{color:var(--dempet)}
.kull .knapp{padding:12px 20px;font-size:1.0625rem}
@media (max-width:640px){.kull li{grid-template-columns:1fr}.kull .hoyre{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center}}
.seksjon.hvit .kull li{background:var(--sno)}

/* FAQ */
.faq{border-top:3px solid var(--tekst);max-width:860px}
.faq details{border-bottom:1px solid var(--sno-2)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-weight:800;font-stretch:85%;font-size:1.3125rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:3px solid var(--stikke);border-bottom:3px solid var(--stikke);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--stikke);outline-offset:3px}
.faq .svar{padding:0 0 22px;color:var(--tekst-2);max-width:68ch}
.faq .svar p{margin:0 0 10px}

/* Tabell på undersider */
.tabell td:last-child{font-size:1.25rem}
.tabell td:first-child small{display:block;color:var(--dempet);font-size:.875rem}
.tabell th{text-align:left;font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dempet);padding:0 0 10px;border-bottom:2px solid var(--tekst)}
.tabell th:last-child{text-align:right}

/* Lenkerutenett (neste steg) */
.videre{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--inv-linje);border:2px solid var(--inv-linje)}
.videre a{background:var(--inv-bg);padding:24px;text-decoration:none;color:var(--inv-tekst);display:block}
.videre a:hover{background:var(--inv-bg-2)}
.videre b{display:flex;justify-content:space-between;font-stretch:78%;font-weight:900;font-size:1.5rem}
.videre b svg{width:22px;height:22px;color:var(--aksent-inv)}
.videre span{display:block;color:var(--lys-dempet);font-size:.9375rem;margin-top:6px}

/* Lærerkort */
.laererkort{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--sno-2);border:2px solid var(--sno-2)}
.laererkort > div{background:var(--hvit);padding:28px}
.laererkort .initial{width:64px;height:64px;background:var(--inv-bg);color:var(--aksent-inv);display:grid;place-items:center;font-weight:900;font-stretch:70%;font-size:1.75rem;margin-bottom:18px}
.laererkort h3{font-size:1.75rem;font-stretch:78%}
.laererkort p{color:var(--dempet);margin:4px 0 16px;font-size:.9375rem}
.laererkort a{font-weight:800;font-stretch:85%;font-size:1.375rem;color:var(--stikke-tekst);text-decoration:none}
.laererkort a:hover{text-decoration:underline}
@media (max-width:900px){.laererkort{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.laererkort{grid-template-columns:1fr}}

/* Bunntekst, flersidig */
.bunn{background:var(--inv-bg);color:var(--lys-dempet);padding:clamp(48px,6vw,72px) 0 24px;font-size:.9375rem}
.bunn .kol{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.bunn h2{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--inv-tekst);font-stretch:100%;font-weight:800;margin-bottom:14px}
.bunn ul{list-style:none;margin:0;padding:0}
.bunn li{margin:7px 0}
.bunn a{color:var(--inv-lenke);text-decoration:none}
.bunn a:hover{text-decoration:underline;color:var(--inv-tekst)}
.bunn address{font-style:normal;line-height:1.7}
.bunn .nederst{margin-top:48px;padding-top:20px;border-top:1px solid var(--inv-linje);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.8125rem}
@media (max-width:900px){.bunn .kol{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.bunn{padding-bottom:96px}}
@media (max-width:520px){.bunn .kol{grid-template-columns:1fr}}
.demo-merke{background:var(--knapp);color:var(--pa-knapp);text-align:center;font-size:.8125rem;font-weight:700;padding:6px 16px}

.merke strong{white-space:nowrap}
.meny a.lnk{white-space:nowrap}
@media (min-width:1081px) and (max-width:1320px){.meny{gap:20px}.merke span{display:none}.meny .knapp{padding:12px 14px}}
@media (max-width:640px){.meny .elevknapp{display:none}.topp .wrap{gap:12px}}
@media (max-width:380px){.merke strong{font-size:1.2rem}}
.kull li.fullt .dager{display:none}

.pristabeller{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 56px}
@media (max-width:900px){.pristabeller{grid-template-columns:1fr}}
.kurspris{display:inline-block;background:var(--inv-bg);color:var(--inv-tekst);font-weight:900;font-stretch:75%;font-size:1.25rem;padding:6px 14px;margin:0 0 24px}

/* Svarboks og oppdatert */
.oppdatert{margin:18px 0 0;font-size:.8125rem;color:var(--lys-dempet)}
.svarboks-rad{background:var(--sno);padding:clamp(28px,4vw,48px) 0 0}
.svarboks{border:2px solid var(--tekst);background:var(--hvit);padding:24px 28px;max-width:860px}
.svarboks h2{font-size:1.5rem;font-stretch:80%;margin-bottom:12px}
.svarboks ul{margin:0;padding-left:1.1em}
.svarboks li{margin:6px 0;color:var(--tekst-2)}
.laererkort .bio{margin:0 0 16px;padding:10px 12px;border:1px dashed var(--sno-2);font-size:.875rem;color:var(--dempet);background:var(--sno)}
.svarboks{max-width:72ch}
.wrap.prosa{max-width:var(--maks)}.wrap.prosa > *{max-width:68ch}
/* priskalkulator */
.kk-klasser{border:0;padding:0;margin:0 0 32px;display:flex;flex-wrap:wrap;gap:8px}
.kk-klasser legend{font-weight:800;margin-bottom:12px;padding:0}
.kk-valg{position:relative;cursor:pointer}
.kk-valg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kk-valg span{display:flex;flex-direction:column;min-width:92px;padding:12px 16px;border:2px solid var(--sno-2);background:var(--hvit);font-size:.8125rem;color:var(--dempet);line-height:1.3;transition:border-color .2s,background .2s}
.kk-valg b{font:800 1.375rem/1.1 var(--font-b);font-stretch:80%;color:var(--tekst)}
.kk-valg input:checked+span{border-color:var(--stikke);background:var(--refleks)}
.kk-valg input:focus-visible+span{outline:3px solid var(--knapp);outline-offset:2px}
.kk-valg:hover span{border-color:var(--stikke)}
.kk{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,4vw,56px);align-items:start}
.kk-h{font-size:1.25rem;margin:28px 0 10px}
.kk-venstre>.kk-h:first-child{margin-top:0}
.kk-sum{margin-top:0}
.kk-tg{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:.9375rem;cursor:pointer}
.kk-tg input{width:20px;height:20px;accent-color:var(--knapp)}
.kk-tabell{width:100%}
.kk-tabell td small{display:block;color:var(--dempet);font-size:.8125rem}
.kk-tabell td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.kk-ukjentpris{color:var(--stikke-tekst);font-weight:600;font-size:.875rem}
.kk-merk{color:var(--dempet);font-size:.9375rem;margin:10px 0 0;max-width:65ch}
.kk-slider-l{display:block;margin-bottom:8px}
#kk-timer{width:100%;accent-color:var(--knapp);height:32px}
.kk-sum dl{grid-template-columns:1fr auto}
.kk-total{margin:0 0 6px!important;padding-top:14px;border-top:1px solid var(--inv-linje)}
.kk-total span{display:block;font:800 clamp(2.25rem,4vw,2.75rem)/1 var(--font-b);font-stretch:80%;color:var(--inv-tekst)}
.kk-ukjent{font-size:.875rem!important;color:var(--inv-varsel)!important}
.kk-hvorfor{margin-top:48px;max-width:72ch}
.kk-hvorfor ul{padding-left:20px}
.kk-hvorfor li{margin-bottom:8px}
.kk-kilde{font-size:.8125rem;color:var(--dempet);max-width:64ch}
@media (max-width:900px){.kk{grid-template-columns:1fr}.kk-sum{position:static}}
.tillit a.tillit-google{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.tillit-google i{font-style:normal;color:var(--aksent-inv);font-size:.8em}
.tillit-google:hover span,.tillit-google:focus-visible span{text-decoration:underline}
@media (min-width:561px){.tillit{display:grid;grid-template-columns:repeat(2,max-content);gap:18px 56px}}

/* ===== Lyse varianter (a, b, c): tekst og bilde side om side, aldri bilde bak tekst ===== */
.hero-lys{position:relative}
.hero-rutenett{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(40px,6vw,88px)}
.hero-lys h1{font-size:clamp(2.75rem,6.4vw,5rem);max-width:13ch}
.hero-lys h1 span{color:var(--stikke-tekst)}
.hero-lys .hero-tekst > p{font-size:clamp(1.125rem,1.7vw,1.3125rem);color:var(--tekst-2);max-width:46ch;margin:24px 0 32px}
.hero-bilde,.bestatt-bilde,.sidebilde{margin:0;position:relative}
.hero-bilde img,.bestatt-bilde img,.sidebilde img{width:100%;height:auto;aspect-ratio:var(--bilde-format,4/3);object-fit:cover;object-position:70% 50%}
.hero-bilde .illu,.bestatt-bilde .illu,.sidebilde .illu{position:absolute;right:10px;bottom:10px;font-size:.75rem;color:var(--dempet);background:color-mix(in srgb,var(--hvit) 90%,transparent);padding:3px 8px}
@media (max-width:900px){.hero-rutenett{grid-template-columns:1fr}}

.bestatt-lys{padding:clamp(56px,8vw,112px) 0;background:var(--sno)}
.bestatt-rutenett{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.bestatt-lys h2{font-size:clamp(2.5rem,5.6vw,4.5rem);max-width:12ch}
.bestatt-lys .bestatt-tekst > p{max-width:42ch;color:var(--tekst-2);font-size:1.125rem;margin:16px 0 0}
.bestatt-lys .cta{margin-top:28px}
.bestatt-lys address{font-style:normal;line-height:1.7;color:var(--tekst-2);margin-top:24px}
.bestatt-lys address a{color:var(--stikke-tekst);font-weight:600}
@media (max-width:900px){.bestatt-rutenett{grid-template-columns:1fr}}

.sidetopp-rutenett{display:block}
.sidetopp-bilde .sidetopp-rutenett{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.sidetopp-bilde .sidebilde img{--bilde-format:4/3}
@media (max-width:900px){.sidetopp-bilde .sidetopp-rutenett{grid-template-columns:1fr}}
