/* Variant A, «Klar». Schibsted Grotesk + Hanken Grotesk. Hvit og blå, rutenett, tabelltall, hårfine linjer. */
:root{
  --natt:#0b1b33;--natt-2:#dbe8ff;--natt-3:#bcd3f7;--natt-rgb:11 27 51;
  --sno:#f0f6ff;--sno-2:#cddcf2;--hvit:#fff;
  --stikke:#1b5fd6;--knapp:#1b5fd6;--knapp-hover:#154ab0;--stikke-tekst:#1750b8;--refleks:#e6efff;
  --pa-knapp:#fff;--pa-stikke:#fff;
  --tekst:#0b1b33;--tekst-2:#1f3555;--dempet:#43587a;--lys-dempet:#3a4f72;--gront:#0b6b3d;
  --inv-bg:#e3eeff;--inv-bg-2:#d3e4ff;--inv-linje:#b7cff4;--inv-tekst:#0b1b33;--inv-rgb:11 27 51;
  --inv-lenke:#1f3555;--inv-ingress:#1f3555;--inv-tillit:#1f3555;--inv-illu:#43587a;--inv-varsel:var(--stikke-tekst);
  --aksent-inv:var(--stikke-tekst);
  --topp-fg:#0b1b33;--topp-rgb:11 27 51;--topp-hover-fg:#fff;--topp-bg:#fff;--topp-solid-bg:#fff;
  --sek-bg:transparent;--sek-kant:#0b1b33;--sek-fg:#0b1b33;--sek-hover-bg:#0b1b33;--sek-hover-fg:#fff;--sek-blur:none;
  --ikon-bg:#0b1b33;
  --font-b:"Hanken Grotesk",system-ui,sans-serif;--font-h:"Schibsted Grotesk",system-ui,sans-serif;
  --maks:1240px;--bilde-format:5/4;
}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.022em}
.knapp{border-radius:10px;font-weight:700;font-stretch:100%;letter-spacing:-.005em}
.knapp.sek{border-width:1.5px}
.topp{border-bottom:1px solid var(--sno-2)}
.merke strong{font-stretch:100%;font-weight:800;letter-spacing:-.02em}
.meny .elevknapp{border-radius:10px;font-weight:700;font-stretch:100%;border-width:1.5px}

/* Hero: tekst til venstre, bilde til høyre i egen ramme */
.hero-lys{background:linear-gradient(var(--hvit),var(--sno))}
.hero-lys h1{font-size:clamp(2.75rem,6vw,4.75rem);max-width:12ch}
.hero-bilde img{border-radius:20px;box-shadow:0 24px 48px -24px rgb(var(--natt-rgb)/.35)}
.tillit{border-top-color:var(--sno-2)}
.tillit b{font-stretch:100%;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--stikke-tekst)}

/* Typografi: ingen smalstilt skrift */
.merkelapp,.kl b,.klassekort b,.meny .panel a b{font-stretch:100%;letter-spacing:-.03em}
.klassekort h3,.liste h3,.kull h3,.laererkort h3,.kl h3,.svarboks h2{font-stretch:100%}
.verktoy b,.videre b,.sidetopp .fakta b,.kurspris,td:last-child,.kull .pris,.laererkort .initial{font-stretch:100%}
.trinn .nr,.tabell th,.bunn h2,.mobilmeny h2{text-transform:none;letter-spacing:0;font-weight:700}
.tabell th{font-size:.875rem}
.bunn h2,.mobilmeny h2{font-size:1rem}

/* Rutenett og kort */
.klassekort{background:transparent;border:0;gap:16px}
.klassekort a{border:1px solid var(--sno-2);border-radius:16px}
.klassekort a:hover{border-color:var(--stikke);background:var(--hvit);box-shadow:0 12px 28px -16px rgb(var(--natt-rgb)/.35)}
.klassekort a.hoved{background:var(--inv-bg);border-color:var(--inv-linje)}
.klassekort b{font-size:3.25rem}
.laererkort{background:transparent;border:0;gap:16px}
.laererkort > div{border:1px solid var(--sno-2);border-radius:16px}
.laererkort .initial{border-radius:12px}
.videre{background:transparent;border:0;gap:16px}
.videre a{border:1px solid var(--inv-linje);border-radius:16px}
.kull li{border:1px solid var(--sno-2);border-radius:14px;box-shadow:none}
.kull li.fullt{border-color:var(--sno-2)}
.kull .status::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:currentColor;margin-right:.5em}
.sidekort,.pris,.svarboks{border-radius:16px}
.sidekort{border:1px solid var(--inv-linje)}
.svarboks{border-width:1px;border-color:var(--sno-2)}
.verktoy,.liste,.faq{border-top-width:1px}
.kk-valg span{border-radius:12px}
.kurspris{border-radius:8px}
.veg{border-top:1px solid var(--inv-linje)}
.trinn li{border-top:2px solid var(--stikke);padding-top:18px}
.trinn p{color:var(--tekst-2)}
.panel{border-radius:12px}

/* Bestått-seksjonen */
.bestatt-bilde img{border-radius:20px}
.sidebilde img{border-radius:16px}
.sidetopp{border-bottom:1px solid var(--inv-linje)}
.hero-lys + .seksjon{border-top:1px solid var(--sno-2)}
.laerere figure img{height:auto;border-radius:16px}
p,li{text-wrap:pretty}
.seksjon .lede,.elev .lede,.laerere .lede{max-width:54ch}
.prosa,.wrap.prosa > *{max-width:58ch}

/* Fire klasser fyller én rad i stedet for å gi en enslig kolonne på neste */
@media (min-width:901px){.klassekort:has(> a:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
/* Prisen i kurskortet er en span med klassen pris, ikke prisboksen */
.kull .pris{background:none;padding:0;border-radius:0}
/* Prislistene fordeles i to jevne kolonner i stedet for to rader med ulik høyde */
@media (min-width:901px){.pristabeller{display:block;columns:2;column-gap:56px;margin-top:28px}.pristabeller > *{break-inside:avoid;margin-bottom:32px}.pristabeller h2{margin-top:0 !important}}

/* Tett rytme: roligere overskrifter og mindre luft, så innholdet bærer siden i stedet for titlene */
.seksjon h2{font-size:clamp(1.875rem,3.4vw,2.75rem)}
.elev h2,.klasser h2,.laerere h2,.veg h2{font-size:clamp(2rem,3.8vw,3rem)}
.bestatt-lys h2{font-size:clamp(2.125rem,4.4vw,3.5rem)}
.seksjon,.klasser,.laerere{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.veg,.bestatt-lys{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
@media (min-width:901px){.laerere figure{position:sticky;top:24px}}

/* Toppmeny: hamburger før navn og knapper rekker å gå ut over bredden, og Elevside bare i bunnlinja på nettbrett */
@media (max-width:1180px){.burger{display:block}.meny .nedtrekk,.meny a.lnk{display:none}}
@media (min-width:641px) and (max-width:820px){.meny .elevknapp{display:none}}

.merke-logo img{display:block;height:52px;width:auto;max-width:min(340px,52vw);object-fit:contain;object-position:left center}
@media (max-width:640px){.merke-logo img{height:40px}}

.medlem{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:24px;border-top:1px solid var(--linje,#d6deea)}
.medlem span{font-size:.875rem;color:var(--lys-dempet)}
.medlem img{display:block;width:auto;height:auto;max-height:52px;max-width:200px}

.topp,.topp.solid{position:sticky;top:0;z-index:30;background:var(--topp-solid-bg,#fff)}
html{scroll-padding-top:104px}
.sidekort{top:112px}