@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('f/fraunces-latin-opsz-normal.woff2') format('woff2-variations'),url('f/fraunces-latin-opsz-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('f/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('f/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('f/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('f/inter-latin-700-normal.woff2') format('woff2')}

/* DINSIKKERHET AS · nettsted
   Fargene er de samme målte tokenene som portalen og kursene bruker
   (palett «Kalk»). Endrer du en verdi her, må den endres i design/tokens.css
   også — ellers sklir nettstedet og portalen fra hverandre. */

/* TOKENS-START */
:root{
  --ground:#EFEDE7;
  --paper:#FCFBF8;
  --line:rgba(23,26,30,.13);
  --ink:#101A28;
  --steel:#54606F;
  --blaa:#0E3B5C;        /* dyp marineblå, som ordmerket og det gamle nettstedet */
  --blaa-lys:#3D6E97;
  --blaa-mork:#0A2C46;
  --varm:#98491A;        /* stempel-brun */
  --ok:#2E6B45;
  --feil:#A32B1C;
  --signal:#E0A21C;
  --char:#7A3B1E;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
}
@media (prefers-contrast:more){:root{--line:rgba(23,26,30,.45)}}
/* TOKENS-SLUTT */

:root{
  --bred:1120px;      /* innholdsbredden */
  --smal:44rem;       /* lesebredden for lengre tekst */
  --gutter:24px;
  --hjorne:14px;
  --skygge:0 1px 2px rgba(23,25,28,.05),0 10px 30px -20px rgba(23,25,28,.5);
}
@media(max-width:620px){:root{--gutter:18px}}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:only light;scroll-behavior:smooth;scroll-padding-top:84px;
  -webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--blaa);text-underline-offset:3px}
h1,h2,h3{scroll-margin-top:84px}
a,button,summary,input,textarea{touch-action:manipulation}

.inn{max-width:var(--bred);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.inn.smal{max-width:var(--bred)}
.inn.smal > *{max-width:var(--smal)}

/* ---------- hopp til innhold ---------- */
.hopp{position:absolute;left:-9999px;top:0;background:var(--blaa);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;z-index:100}
.hopp:focus{left:0}

/* ---------- topplinje ---------- */
header.topp{background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.topprad{max-width:var(--bred);margin:0 auto;padding:10px var(--gutter);
  display:flex;align-items:center;gap:20px;min-height:64px}
.merke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink);flex:0 0 auto;font-weight:700;letter-spacing:.02em;font-size:1rem;
  min-height:44px;padding:0 8px;margin-left:-8px;border-radius:9px}
.merke:hover{background:rgba(23,25,28,.05)}
.merke svg{width:28px;height:28px;flex:0 0 auto;display:block}
/* Ordmerket: DINSIKKERHET i Fraunces, «AS» under i små sperrede versaler. */
.ordmerke{display:flex;flex-direction:column;line-height:1;font-family:var(--display);
  font-weight:600;font-size:1.3125rem;letter-spacing:.005em;color:var(--ink);font-optical-sizing:auto}
.ordmerke small{font-family:var(--body);font-weight:600;font-size:.5625rem;letter-spacing:.24em;
  color:var(--steel);margin-top:4px}
.merke:hover .ordmerke{color:var(--blaa)}
nav.hoved{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.hoved a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;
  padding:10px 12px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center}
nav.hoved a:hover{background:rgba(23,25,28,.06)}
nav.hoved a[aria-current="page"]{color:var(--blaa);box-shadow:inset 0 -2px 0 var(--blaa);
  border-radius:9px 9px 0 0}
.logglenke{color:var(--steel)!important;font-weight:500}
nav.hoved .knapp{min-height:2.75rem;padding:0 16px;font-size:.9375rem;margin-left:6px}
/* På telefon står CTA-en i toppen ved siden av Meny, så den er synlig uansett
   hvor på siden man er — uten å ligge fast nederst og stjele skjermplass. */
.toppcta{display:none}
@media(max-width:820px){
  .knapp.toppcta{display:inline-flex;margin-left:auto;min-height:2.75rem;padding:0 14px;font-size:.9375rem}
  .mobilmeny{margin-left:0}
  .ordmerke{font-size:1rem}            /* ordmerket får plass ved siden av knappen og Meny */
  .ordmerke small{font-size:.5rem;margin-top:3px}
  .merke{margin-left:-4px;padding:0 4px}
  .knapp.toppcta{padding:0 12px;font-size:.875rem;white-space:nowrap}
}
@media(max-width:400px){
  .ordmerke{font-size:.875rem}
  .knapp.toppcta{padding:0 10px;font-size:.8125rem}
  .topprad{gap:6px}
  .mobilmeny summary span{position:absolute;left:-9999px}  /* ikonet står, ordet leses opp */
  .mobilmeny summary{padding:0 12px}
}
@media(max-width:340px){
  .js-toppcta .toppcta,.toppcta{display:none} /* på de smaleste står knappen i menyen og i teksten */
}
@media(min-width:821px){.topprad .toppcta{display:none}}

/* Mobilmeny uten JavaScript. <details> lukkes av Escape i alle nettlesere
   som støtter det, og virker om skriptet aldri lastes. */
.mobilmeny{display:none;margin-left:auto;position:relative}
.mobilmeny summary{list-style:none;cursor:pointer;font-weight:600;font-size:.9375rem;
  min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;
  border-radius:9px;background:rgba(23,25,28,.06)}
.mobilmeny summary::-webkit-details-marker{display:none}
.menyikon{display:block;flex:0 0 auto}
.menypanel{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--skygge);
  min-width:220px;padding:8px;display:flex;flex-direction:column}
.menypanel a{text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;
  padding:12px 14px;border-radius:9px;min-height:44px;display:flex;align-items:center}
.menypanel .menynavn{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);padding:10px 14px 4px}
.menypanel a:hover{background:rgba(23,25,28,.06)}
@media(max-width:820px){nav.hoved{display:none}.mobilmeny{display:block}}

/* ---------- knapper ----------
   To navn, to utseender, ingen flere. «Be om tilbud» er den fylte og fører
   til skjemaet. «Ta kontakt» og alt annet er rolige omrissknapper eller
   tekstlenker. Regelen står i friske-oyne-2026-09-08.md, punkt 3. */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:1rem;text-decoration:none;
  min-height:3rem;padding:0 22px;border-radius:11px;border:0;cursor:pointer;
  transition:background .14s,transform .1s cubic-bezier(.32,.72,0,1)}
.knapp.primar{background:var(--blaa);color:#fff;
  box-shadow:0 1px 2px rgba(19,67,114,.3),0 10px 24px -14px rgba(19,67,114,.7)}
.knapp.primar:hover{background:var(--blaa-mork)}
.knapp.rolig{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.knapp.rolig:hover{background:rgba(23,25,28,.05)}
.knapp:active{transform:scale(.98)}
.knapp:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
summary:focus-visible{outline:3px solid var(--blaa);outline-offset:2px}
.knapprad{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tekstlenke{color:var(--blaa);font-weight:600;text-decoration:none;
  text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.tekstlenke:hover{text-decoration:underline}
/* Rett pil, tegnet som strek med spiss, ikke skrifttegnet → som står skrått i Inter. */
.pil{width:1.15em;height:.7em;flex:0 0 auto;margin-left:.35em;display:inline-block;
  vertical-align:-.03em;overflow:visible}
a:hover .pil{transform:translateX(2px)}
.pil{transition:transform .14s cubic-bezier(.32,.72,0,1)}
@media(prefers-reduced-motion:reduce){.pil{transition:none}a:hover .pil{transform:none}}

/* ---------- typografi ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;font-optical-sizing:auto;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.25rem,5.6vw,3.5rem);line-height:1.04;letter-spacing:-.022em;margin:0 0 18px}
h2{font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.12;letter-spacing:-.014em;margin:0 0 14px}
h3{font-size:1.25rem;line-height:1.28;letter-spacing:-.006em;margin:0 0 8px}
p{margin:0 0 18px}
.ingress{font-size:1.1875rem;line-height:1.55;color:var(--steel);max-width:44rem}
.stempel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--varm);margin:0 0 12px}
.stempel.blaa{color:var(--blaa)}

/* ---------- seksjoner ---------- */
section{padding-block:clamp(44px,7vw,76px)}
section.sidetopp{padding-block:clamp(32px,5vw,52px) clamp(24px,4vw,40px)}
section.lys{background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.seksjonstopp{max-width:42rem;margin:0 0 34px}
.seksjonstopp p{color:var(--steel);margin:0}

/* ---------- helt ---------- */
.helt{background:var(--blaa-mork);color:#fff;padding-block:clamp(44px,7vw,80px)}
.helt h1{color:#fff}
.helt .ingress{color:#C9DCEE}
.heltrad{display:grid;gap:36px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.heltrad{grid-template-columns:1.05fr .95fr;gap:52px}}
.heltbilde{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--hjorne);padding:18px}
.heltbilde svg{display:block;width:100%;height:auto}
.helt .knapp.primar{background:#fff;color:var(--blaa-mork)}
.helt .knapp.primar:hover{background:#E8F0F8}
.helt .knapp.rolig{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.helt .knapp.rolig:hover{background:rgba(255,255,255,.1)}
.helt .tekstlenke{color:#C9DCEE}
.helt .tekstlenke:hover{color:#fff}

/* ---------- kort ---------- */
.rutenett{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.rutenett.to{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.rutenett.tre{grid-template-columns:repeat(3,1fr)}}
.kort{background:var(--paper);border:1px solid var(--line);border-radius:var(--hjorne);
  padding:24px;display:flex;flex-direction:column;gap:2px}
section.lys .kort{background:var(--ground);border-color:var(--line)}
.kort p:last-child{margin-bottom:0}
.kort p{color:var(--steel);margin-bottom:0}
.kort .nr{font-size:.8125rem;font-weight:700;letter-spacing:.1em;color:var(--blaa);
  margin:0 0 10px;font-variant-numeric:tabular-nums}

/* Kort som er en lenke: hele kortet er trykkflaten, men bare tittelen er
   selve lenka, slik at skjermlesere leser opp noe fornuftig. */
.kort.lenkekort{position:relative;transition:box-shadow .16s,transform .16s}
.kort.lenkekort:hover{box-shadow:var(--skygge);transform:translateY(-2px)}
.kort.lenkekort h3 a{color:var(--ink);text-decoration:none}
.kort.lenkekort h3 a::after{content:'';position:absolute;inset:0}
.kort.lenkekort:focus-within{outline:3px solid var(--blaa);outline-offset:2px}

.merkelapp{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;margin:0 0 12px}
.merkelapp.vaar{background:rgba(14,59,92,.1);color:var(--blaa)}
.merkelapp.deres{background:rgba(122,59,30,.1);color:var(--char)}
.merkelapp.venter{background:rgba(224,162,28,.16);color:#6B4A08}

/* ---------- liste med haker ---------- */
ul.haker{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
ul.haker li{position:relative;padding-left:30px;color:var(--ink)}
ul.haker li::before{content:'';position:absolute;left:4px;top:.56em;
  width:11px;height:6px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);
  transform:rotate(-45deg)}
ul.kryss li::before{border-color:var(--feil);transform:none;height:0;width:12px;
  border-left:0;border-bottom:2.5px solid var(--feil);top:.85em}

/* ---------- faktaboks ---------- */
.faktaboks{background:var(--paper);border-left:4px solid var(--signal);
  border-radius:var(--hjorne);padding:22px 24px;margin:0 0 22px;box-shadow:var(--skygge)}
section.lys .faktaboks{background:var(--ground);box-shadow:none}
.faktaboks h3{margin-bottom:10px;max-width:44rem}
.faktaboks p,.faktaboks ul{max-width:44rem}
.faktaboks p:last-child,.faktaboks ul:last-child{margin-bottom:0}
.faktaboks.stopp{border-left-color:var(--feil)}
.faktaboks.rolig{border-left-color:var(--blaa)}

/* ---------- nøkkeltall / fakta på rad ---------- */
dl.fakta{display:grid;gap:0;margin:0 0 22px;padding:0;
  border-top:1px solid var(--line)}
dl.fakta div{display:grid;grid-template-columns:11rem 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){dl.fakta div{grid-template-columns:1fr;gap:2px}}
dl.fakta dt{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin:0;padding-top:3px}
dl.fakta dd{margin:0}

/* ---------- avsluttende oppfordring ---------- */
.band{background:var(--blaa);color:#fff;border-radius:var(--hjorne);
  padding:clamp(28px,5vw,44px);display:grid;gap:20px}
@media(min-width:760px){.band{grid-template-columns:1fr auto;align-items:center;gap:36px}}
.band h2{color:#fff;margin:0 0 6px}
.band p{color:#C9DCEE;margin:0;max-width:42rem}
.band .knapp.primar{background:#fff;color:var(--blaa-mork);box-shadow:none}
.band .knapp.primar:hover{background:#E8F0F8}

/* ---------- skjema ---------- */
form.skjema{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--hjorne);padding:clamp(20px,4vw,32px);display:grid;gap:18px}
.felt{display:grid;gap:6px}
.felt label{font-weight:600;font-size:.9375rem}
.felt .hjelp{font-size:.875rem;color:var(--steel);margin:0}
input[type=text],input[type=email],input[type=tel],textarea,select{
  font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;
  min-height:3rem;width:100%}
textarea{min-height:8rem;resize:vertical;line-height:1.55}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
fieldset legend{font-weight:600;font-size:.9375rem;padding:0;margin:0 0 4px}
.valg{display:flex;gap:11px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;cursor:pointer}
.valg:hover{border-color:var(--steel)}
.valg input{margin:0;flex:0 0 auto;width:24px;height:24px;accent-color:var(--blaa)}
.valg span{font-size:1rem}
.paakrevd{color:var(--feil);font-weight:700}
.felt .feilmelding{display:none;font-size:.875rem;color:var(--feil);margin:0;font-weight:600}
.felt.harfeil input,.felt.harfeil textarea{border-color:var(--feil);box-shadow:0 0 0 3px rgba(163,43,28,.12)}
.felt.harfeil .feilmelding{display:block}
.skjemafeil{display:none;background:rgba(163,43,28,.07);border-left:4px solid var(--feil);
  border-radius:10px;padding:14px 16px;margin:0;font-weight:600}
.skjemafeil.vis{display:block}
button.knapp[aria-busy="true"]{opacity:.7;cursor:progress}
.skjult{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- bunn (utkast C: handling til venstre, tettere lenker) ---------- */
footer.bunn{background:var(--paper);border-top:1px solid var(--line);
  padding-block:30px 26px;margin-top:0}
.bunnrad{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:760px){.bunnrad{grid-template-columns:1.2fr 1fr 1fr}}
.bunnavn{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.005em;
  color:var(--ink);margin:0 0 8px}
.bunnom{font-size:13px;line-height:1.5;color:var(--steel);margin:0 0 6px;max-width:34rem}
.bunnknapp{font-size:14px;padding:11px 18px;min-height:44px;display:inline-flex;
  align-items:center;margin:2px 0 12px}
.bunnkontakt{font-size:13px;color:var(--steel);margin:0}
.bunnkontakt a{font-weight:500;display:inline-flex;align-items:center;min-height:32px}
.bunnkontakt.liten{font-size:12.5px}
@media(max-width:759px){.bunnkontakt a{min-height:44px}}
footer.bunn h2{font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);margin:0 0 10px}
footer.bunn ul{list-style:none;margin:0;padding:0}
footer.bunn a{color:var(--ink);text-decoration:none}
footer.bunn li a{font-size:13.5px;display:flex;align-items:center;min-height:28px}
@media(max-width:759px){footer.bunn li a{min-height:40px}}
footer.bunn a:hover{text-decoration:underline;text-underline-offset:3px}
footer.bunn .bunnknapp:hover{text-decoration:none}
footer.bunn .smaatt{color:var(--steel);font-size:12px;line-height:1.5;margin:20px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Liste der hvert punkt ER en lenke — da er punktet trykkflata, ikke ordet. */
ul.haker.lenker li{padding-left:0}
ul.haker.lenker li::before{left:4px;top:1.32rem}
ul.haker.lenker a{display:flex;align-items:center;min-height:44px;padding-left:30px;
  color:var(--blaa);font-weight:600;text-decoration:none;border-radius:9px}
ul.haker.lenker a:hover{background:rgba(23,25,28,.05);text-decoration:underline;
  text-underline-offset:3px}

/* ---------- bekreftelse etter booking ---------- */
.kvittering{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ok);
  border-radius:var(--hjorne);padding:24px 26px;margin:0 0 24px;max-width:44rem}
.kvittering h2{font-size:1.125rem;margin:0 0 12px}
.kvittering dl.fakta{margin:0}
.steg{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;max-width:44rem;counter-reset:s}
.steg li{counter-increment:s;position:relative;padding-left:44px;min-height:32px}
.steg li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--blaa);color:#fff;font-weight:700;font-size:.9375rem;
  display:grid;place-items:center}

/* ---------- «Kurs»-nedtrekket i toppen ----------
   Åpnes ved hover og ved fokus (tastatur), og ved trykk (JS legger på .apen).
   Panelet ligger inntil knappen uten luft, så musa ikke faller ut på veien. */
.nedtrekk{position:relative}
.nedtrekk > button{font-family:var(--body);background:none;border:0;cursor:pointer;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;
  padding:10px 12px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.nedtrekk > button:hover{background:rgba(23,25,28,.06)}
.nedtrekk > button svg{transition:transform .16s}
.nedtrekk.er-her > button{color:var(--blaa);box-shadow:inset 0 -2px 0 var(--blaa);border-radius:9px 9px 0 0}
.nedtrekkpanel{position:absolute;left:0;top:100%;padding-top:8px;display:none;z-index:60}
.nedtrekkpanel::before{content:'';position:absolute;inset:8px 0 0;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--skygge);z-index:-1}
.nedtrekk:hover .nedtrekkpanel,.nedtrekk:focus-within .nedtrekkpanel,.nedtrekk.apen .nedtrekkpanel{
  display:grid;grid-template-columns:minmax(300px,1fr);gap:0;padding:8px 0 0}
.nedtrekk:hover > button svg,.nedtrekk.apen > button svg{transform:rotate(180deg)}
.nd-kol{padding:10px 10px 10px;display:flex;flex-direction:column;min-width:0}
.nd-skille{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.nd-side{border-left:1px solid var(--line)}
.nd-h{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin:0 0 4px;padding:0 12px}
nav.hoved .nedtrekkpanel a{text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:9px;
  min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;white-space:nowrap}
nav.hoved .nedtrekkpanel a b{font-weight:600;font-size:.9375rem}
nav.hoved .nedtrekkpanel a span{font-size:.8125rem;color:var(--steel);white-space:normal}
nav.hoved .nedtrekkpanel a:hover{background:rgba(23,25,28,.06)}
nav.hoved .nedtrekkpanel a.nd-alle{color:var(--blaa);font-weight:700;margin-top:6px;justify-content:flex-start;
  flex-direction:row;font-size:.9375rem}
@media(prefers-reduced-motion:reduce){.nedtrekk > button svg{transition:none}}
/* Mobilmenyen har fått flere lenker; gi den plass og la den rulle om den må. */
.menypanel{max-height:calc(100vh - 90px);overflow:auto;min-width:260px}
.menypanel .menynavn{padding-top:12px}
/* Bransjekortene er ankre fra nedtrekket; gi dem luft under den faste toppen. */
.bransjer .kort{scroll-margin-top:96px}
.bransjer .kort:target{box-shadow:0 0 0 3px var(--blaa)}
/* Kategoriene på kurs.html veksler lys/mørk selv, og er ankre fra nedtrekket. */
section.kategori{scroll-margin-top:84px}
section.kategori:nth-of-type(odd){background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.kategori:target h2{box-shadow:inset 0 -3px 0 var(--blaa);display:inline-block;padding-bottom:2px}
.merkelapp.produksjon{background:rgba(14,59,92,.1);color:var(--blaa)}
.kort.egne{border-style:dashed}
.hopp-kategori{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hopp-kategori a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:0 16px;
  min-height:44px;display:inline-flex;align-items:center}
.hopp-kategori a:hover{border-color:var(--ink)}
/* Skjermbilder av oppgavene: tre skjermer side om side, naturlig høyde,
   toppjustert. Ulik høyde er riktig — feilmeldingen nederst er poenget. */
.skjermer{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media(min-width:700px){.skjermer{grid-template-columns:repeat(3,1fr)}}
.skjermer figure{margin:0;display:flex;flex-direction:column;gap:10px}
.skjermer img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(23,25,28,.05),0 18px 40px -26px rgba(23,25,28,.6);background:var(--ground)}
.skjermer figcaption{font-size:.9375rem;color:var(--steel);line-height:1.5;padding:0 4px}
.skjermer figcaption b{color:var(--ink);font-weight:600}
/* Heltbildet på forsiden: et ekte skjermbilde fra kurset, i telefonbredde. */
.helttelefon{display:flex;justify-content:center}
.helttelefon img{width:min(100%,380px);height:auto;border-radius:18px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.18)}
@media(min-width:900px){.helt .heltrad{grid-template-columns:1.15fr .85fr}}
/* Helt med skjermbildet under teksten: teksten holder lesebredde, bildet får
   hele bredden — slik det ser ut på en PC. */
.heltstabel{display:grid;gap:34px}
.heltstabel > div:first-child{max-width:46rem}
.heltskjerm img{display:block;width:100%;max-width:1040px;height:auto;border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
/* To PC-skjermbilder under hverandre, aldri side om side — da blir teksten i dem for liten. */
.skjermer.to{grid-template-columns:1fr;max-width:520px;gap:24px}
@media(min-width:820px){.skjermer.to{grid-template-columns:1fr 1fr;max-width:900px;gap:24px}}
.skjermer.to img{border-radius:12px}
.regnestykke{font-size:.9375rem;color:#C9DCEE;max-width:46rem;margin:12px 0 0;line-height:1.55}
.valgrad{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:560px){.valgrad{grid-template-columns:repeat(3,1fr)}}
.valgrad .valg{align-items:center}

/* ---- kurskatalogen på forsiden ---------------------------------- */
@media(min-width:640px){.rutenett.fire{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.rutenett.fire{grid-template-columns:repeat(4,1fr)}}
.rutenett.fire .kort h3{font-size:1.125rem}
.katalogfot{margin:24px 0 0;color:var(--steel);font-size:.9375rem;line-height:1.6;
  max-width:52rem}
.bransjer{font-size:.9375rem;color:#C9DCEE;max-width:38rem;margin:22px 0 0;
  line-height:1.55;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}

/* ==================================================================
   Navigasjonsrunden, 14. september. Alt under er nytt, og alt svarer
   på et punkt i gjennomgangen «Veien gjennom nettstedet».
   ================================================================== */

/* 01 · Neste steg nederst på undersidene, så de ikke er blindveier */
.stegoverskrift{font-size:1.25rem;margin:0 0 20px}
.stegrad{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.stegrad{grid-template-columns:repeat(3,1fr);gap:18px}}
.stegkort{display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--hjorne);
  padding:20px 20px 18px;text-decoration:none;color:var(--ink);min-height:44px;
  transition:box-shadow .16s,transform .16s,border-color .16s}
@media(prefers-reduced-motion:reduce){.stegkort{transition:none}}
.stegkort:hover{box-shadow:var(--skygge);transform:translateY(-2px);border-color:var(--ink)}
.stegtittel{font-weight:700;font-size:1.0625rem;line-height:1.3}
.stegtekst{grid-column:1/3;color:var(--steel);font-size:.9375rem;line-height:1.5;margin-top:4px}
.stegpil{color:var(--blaa);font-weight:700;transition:transform .16s}
@media(prefers-reduced-motion:reduce){.stegpil{transition:none}}
.stegkort:hover .stegpil{transform:translateX(3px)}

/* 04 · Hurtigraden på kurssiden ligger nå fast under toppen */
html{scroll-padding-top:132px}
.kategoribar{position:sticky;top:64px;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);padding:8px 0}
.kategoribar .inn{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kategoribar-navn{font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);margin-right:4px}
.kategoribar a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;
  border:1px solid var(--line);border-radius:999px;padding:0 15px;min-height:44px;
  display:inline-flex;align-items:center;background:var(--ground)}
.kategoribar a:hover{border-color:var(--ink)}
@media(max-width:620px){
  .kategoribar{top:60px;padding:6px 0}
  .kategoribar-navn{display:none}
  .kategoribar .inn{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kategoribar .inn::-webkit-scrollbar{display:none}
  .kategoribar a{flex:none}
}

/* Kurskort med bilde, samme form som i portalen: bilde øverst med merkelappen
   over, tekst under. Bildene er strektegninger, ikke fotografier. */
/* Kategoribaren er fast, så ankeret må stoppe under både toppen og pillene. */
section.kategori{scroll-margin-top:56px}
@media(max-width:620px){section.kategori{scroll-margin-top:52px}}
.kursrutenett{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:620px){.kursrutenett{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.kursrutenett{grid-template-columns:repeat(3,1fr)}}
.kurskort{background:var(--paper);border:1px solid var(--line);border-radius:var(--hjorne);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--skygge)}
.kurskort.egne{border-style:dashed}
.kortbilde{position:relative;border-bottom:1px solid var(--line);background:#F3F1EA}
.kortbilde img{display:block;width:100%;height:auto}
.kortbilde .merkelapp{position:absolute;left:14px;top:14px;margin:0;
  background:var(--paper);box-shadow:0 1px 2px rgba(23,25,28,.08)}
.korttekst{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1 1 auto}
.korttekst h3{margin:0 0 8px}
.korttekst h3 a{color:var(--ink);text-decoration:none}
.korttekst h3 a:hover{color:var(--blaa);text-decoration:underline;text-underline-offset:3px}
.korttekst p{margin:0;color:var(--steel);font-size:.9375rem;line-height:1.55}
.kurskort.lenkekort:focus-within{outline:3px solid var(--blaa);outline-offset:2px}
.kategoribar a.alle{background:var(--blaa);color:#fff;border-color:var(--blaa)}
.kategoribar a.alle:hover{background:var(--blaa-mork);border-color:var(--blaa-mork)}

/* 05 · Veien ett hakk opp, øverst på undersidene */
.opplenke{margin:0 0 14px}
.opplenke a{color:var(--steel);text-decoration:none;font-weight:600;font-size:.9375rem;
  display:inline-flex;align-items:center;min-height:44px}
.opplenke a:hover{color:var(--blaa);text-decoration:underline}

/* 06 · Det frivillige i skjemaet ligger bak én linje */
details.mer{border:1px solid var(--line);border-radius:var(--hjorne);background:var(--paper)}
details.mer > summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;
  display:flex;flex-direction:column;gap:3px;min-height:44px;border-radius:var(--hjorne)}
details.mer > summary::-webkit-details-marker{display:none}
details.mer > summary::after{content:'Vis';position:absolute;right:18px;color:var(--blaa);
  font-weight:700;font-size:.9375rem}
details.mer[open] > summary::after{content:'Skjul'}
details.mer > summary{position:relative;padding-right:74px}
details.mer > summary span{font-weight:400;color:var(--steel);font-size:.9375rem}
details.mer > summary:hover{background:rgba(23,25,28,.03)}
details.mer > summary:focus-visible{outline:3px solid var(--blaa);outline-offset:2px}
.merinnhold{padding:4px 18px 18px;display:grid;gap:18px}

/* 09 · Én «Book en samtale» i første skjerm på mobil */
.js-toppcta .toppcta{visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease}
.js-toppcta .toppcta.vis{visibility:visible;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-toppcta .toppcta{transition:none}
}

/* ======================================================================
   10 · Flyt og materiale. Forslag 15. september 2026.
   Prinsippene er hentet fra Apples «Designing Fluid Interfaces»: svar på
   trykket idet det skjer, la ting komme fra der de hører hjemme og gå
   samme vei tilbake, gjennomskinnelig topp som innholdet ruller under,
   og ingen bevegelse som ikke har en jobb. Alt slår seg av ved
   «reduser bevegelse» (regelen i 08 gjelder fortsatt).
   ====================================================================== */
:root{--ut:cubic-bezier(.23,1,.32,1)}

/* Toppen og hurtigraden er materiale, ikke en vegg: innholdet skimtes under. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  header.topp{background:rgba(252,251,248,.76);-webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(23,26,30,.09)}
  .kategoribar{background:rgba(252,251,248,.8);-webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(23,26,30,.09)}
}
@media(prefers-reduced-transparency:reduce){
  header.topp,.kategoribar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Trykk gir svar idet fingeren lander, på alt som kan trykkes, ikke bare knappene. */
.kort.lenkekort,.stegkort,.kategoribar a,.menypanel a,nav.hoved .nedtrekkpanel a,
nav.hoved a,.nedtrekk > button,.valg,.merke,.mobilmeny summary,ul.haker.lenker a{
  transition:background-color .14s var(--ut),border-color .14s var(--ut),
    box-shadow .16s var(--ut),transform .16s var(--ut),color .14s var(--ut)}
.kort.lenkekort:active,.stegkort:active,.kategoribar a:active,.menypanel a:active,
nav.hoved .nedtrekkpanel a:active,nav.hoved a:active,.nedtrekk > button:active,.valg:active,
.merke:active,.mobilmeny summary:active,ul.haker.lenker a:active,.tekstlenke:active .pil{
  transform:scale(.985);transition-duration:.08s}
.knapp{transition:background .14s var(--ut),transform .1s var(--ut)}
.knapp:active{transform:scale(.97)}
/* Løftet ved hover hører til musa. På en telefon henger det ellers igjen etter trykket. */
@media(hover:none){
  .kort.lenkekort:hover,.stegkort:hover{transform:none;box-shadow:none}
  .kategoribar a:hover{border-color:var(--line)}
  .kategoribar a.alle:hover{border-color:var(--blaa)}
  .stegkort:hover{border-color:var(--line);box-shadow:var(--skygge)}
}

/* «Kurs»-nedtrekket vokser ut fra knappen sin, og trekker seg tilbake dit. */
.nedtrekkpanel{display:grid;grid-template-columns:minmax(300px,1fr);gap:0;padding:8px 0 0;
  visibility:hidden;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:16px top;
  transition:opacity .11s var(--ut),transform 0s linear .11s,visibility 0s linear .11s}
.nedtrekk:hover .nedtrekkpanel,.nedtrekk:focus-within .nedtrekkpanel,.nedtrekk.apen .nedtrekkpanel{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .16s var(--ut),transform .16s var(--ut),visibility 0s}
.nedtrekk > button svg{transition:transform .2s var(--ut)}

/* Mobilmenyen kommer fra «Meny»-knappen og går tilbake dit. */
.mobilmeny[open] .menypanel{transform-origin:calc(100% - 28px) top;
  transition:opacity .18s var(--ut),transform .18s var(--ut)}
@starting-style{.mobilmeny[open] .menypanel{opacity:0;transform:translateY(-6px) scale(.96)}}
.mobilmeny.lukker .menypanel{opacity:0;transform:translateY(-6px) scale(.96);
  transition-duration:.14s;pointer-events:none}

/* Det frivillige i skjemaet glir fram, i stedet for å hoppe. */
details.mer[open] .merinnhold{transition:opacity .2s var(--ut),transform .2s var(--ut)}
@starting-style{details.mer[open] .merinnhold{opacity:0;transform:translateY(-4px)}}

/* Toppknappen på mobil bruker samme kurve som alt annet. */
.js-toppcta .toppcta{transition:opacity .18s var(--ut),transform .18s var(--ut)}

/* Pillene på mobil: en antydning om at raden kan rulles, og at den stopper pent. */
@media(max-width:620px){
  .kategoribar .inn{scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
    padding-right:36px}
  .kategoribar a{scroll-snap-align:start}
}

/* Sidebyttet: innholdet toner over, toppen står stille. Bare i nettlesere som kan det. */
@view-transition{navigation:auto}
header.topp{view-transition-name:topp}
::view-transition-old(root){animation:110ms var(--ut) both vt-ut}
::view-transition-new(root){animation:160ms var(--ut) both vt-inn}
@keyframes vt-ut{to{opacity:0}}
@keyframes vt-inn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
}

/* Tegnavstand etter størrelse: stramt på det store, nøytralt på det lille. */
h1{letter-spacing:-.026em}
h2{letter-spacing:-.017em}
h3{letter-spacing:-.006em}

/* Første skjerm på forsiden kommer på plass én gang, rolig, innenfra og ut. */
.heltstabel > div:first-child > *{animation:helt-inn .42s var(--ut) both}
.heltstabel > div:first-child > :nth-child(2){animation-delay:.05s}
.heltstabel > div:first-child > :nth-child(3){animation-delay:.1s}
.heltstabel > div:first-child > :nth-child(n+4){animation-delay:.15s}
.heltskjerm{animation:helt-inn .5s var(--ut) .12s both}
@keyframes helt-inn{from{opacity:0;transform:translateY(8px)}}

/* ======================================================================
   11 · Runde to, 16. september 2026: rulling, knapper og der du er.
   ====================================================================== */

/* Ting under første skjerm kommer på plass idet de rulles inn: én gang,
   14 px opp, ingenting som venter på deg. Uten skript er alt synlig. */
.avsl{opacity:0;transform:translateY(10px)}
.avsl,.avsl.kort.lenkekort,.avsl.kurskort.lenkekort,.avsl.stegkort{
  transition:opacity .4s var(--ut),transform .4s var(--ut),filter .4s var(--ut)}   /* vinner over hover-overgangene til kortet er inne */
.avsl.inn{opacity:1;transform:none;filter:none}
.skjermer > figure.avsl{transform:none;filter:blur(6px)}           /* bilder: fra uskarpt til skarpt */
.faktaboks.avsl,.band.avsl,.fakta > div.avsl{transform:none}        /* bokser: bare tone inn */
@media(prefers-reduced-motion:reduce){.avsl{opacity:1;transform:none;filter:none}}

/* Toppen får en myk kant først når det ligger innhold under den. */
header.topp{border-bottom-color:transparent;transition:border-color .2s var(--ut),box-shadow .2s var(--ut)}
header.topp.rullet{border-bottom-color:rgba(23,26,30,.09);box-shadow:0 8px 24px -18px rgba(23,26,30,.35)}

/* Knappene løfter seg litt under musa og senker seg under fingeren. */
.knapp{transition:background .14s var(--ut),transform .14s var(--ut),box-shadow .16s var(--ut)}
@media(hover:hover) and (pointer:fine){
  .knapp.primar:hover,.knapp.rolig:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(10,44,70,.55)}
  .helt .knapp.primar:hover,.band .knapp.primar:hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
}
.knapp:active,.knapp.primar:active,.knapp.rolig:active{transform:scale(.97);box-shadow:none}

/* Kurskortene som er lenker løfter seg som de andre kortene. */
.kurskort.lenkekort{transition:box-shadow .18s var(--ut),transform .18s var(--ut)}
@media(hover:hover) and (pointer:fine){
  .kurskort.lenkekort:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(23,25,28,.05),0 18px 34px -20px rgba(23,25,28,.55)}
}

/* Skjemaet: valget du har gjort er tydelig, og feltene svarer når du lander i dem. */
.valg{transition:border-color .15s var(--ut),background-color .15s var(--ut),transform .16s var(--ut)}
.valg:has(input:checked){border-color:var(--blaa);background:rgba(14,59,92,.05)}
input,textarea,select{transition:border-color .15s var(--ut),box-shadow .15s var(--ut)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--blaa)}

/* Pillene på kurssiden viser hvor du er mens du ruller. */
.kategoribar a{transition:border-color .16s var(--ut),background-color .16s var(--ut),color .16s var(--ut),transform .16s var(--ut)}
.kategoribar a.aktiv{border-color:var(--ink);background:var(--paper)}
.kategoribar a.alle.aktiv{border-color:var(--blaa-mork);background:var(--blaa-mork)}

/* Lenker i bunnen og tekstlenker skifter farge mykt. */
footer.bunn a,.tekstlenke,.korttekst h3 a,.opplenke a{transition:color .14s var(--ut)}

/* ======================================================================
   12 · Apple-pakken, 16. september 2026. Modell: apple.com sin produktside.
   Toppen ruller vekk på pc, en smal lokalmeny blir stående. Inntreden er
   styrt av rullingen, ikke av klokka: rull opp, og det går tilbake.
   Bildene vokser på plass. Knappene er piller uten løft.
   ====================================================================== */

/* Lokalmenyen */
.lokal{position:sticky;top:0;z-index:45;background:rgba(252,251,248,.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(23,26,30,.09)}
.lokal .inn{display:flex;align-items:center;gap:22px;min-height:52px;padding-top:0;padding-bottom:0}
.lokalnavn{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.lokallenker{display:flex;gap:4px;margin-left:auto}
.lokallenker a{text-decoration:none;color:var(--steel);font-weight:500;font-size:.8125rem;padding:6px 10px;border-radius:999px;min-height:32px;display:inline-flex;align-items:center;transition:color .14s var(--ut),background-color .14s var(--ut)}
.lokallenker a:hover{color:var(--ink);background:rgba(23,25,28,.06)}
.lokallenker a.aktiv{color:var(--ink);background:rgba(23,25,28,.08)}
.knapp.liten{min-height:32px;padding:0 14px;font-size:.8125rem;margin-left:0}
.lokal .knapp.liten{margin-left:auto}
.lokallenker + .knapp.liten{margin-left:0}
@media(max-width:820px){.lokal{display:none}}          /* på mobil står toppen fast, som før */
@media(min-width:821px){
  header.topp{position:relative}                         /* ikke static: relative gjør at z-index:50 fortsatt gjelder, så «Kurs»-nedtrekket vinner over lokalmenyens z-index:45 */
  header.topp.rullet{box-shadow:none;border-bottom-color:var(--line)}
  html{scroll-padding-top:72px}
  section.kategori{scroll-margin-top:0}
  .kategoribar{top:0}                                    /* kurssiden: pillene ER lokalmenyen */
  h1,h2,h3{scroll-margin-top:72px}
}
@media(prefers-reduced-transparency:reduce){.lokal{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Knapper som Apple: pille, ingen løft, lysere under musa, mindre under fingeren */
.knapp{border-radius:999px;box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .knapp.primar:hover,.knapp.rolig:hover{transform:none;box-shadow:none}
  .knapp.primar:hover{background:#174B76}
  .helt .knapp.primar:hover,.band .knapp.primar:hover{background:#fff;opacity:.92}
}
.knapp:active,.knapp.primar:active,.knapp.rolig:active{transform:scale(.97)}

/* Rulle-styrt inntreden. Alt under er tilstander bundet til hvor langt elementet
   har kommet inn i skjermen. Ingen klokke, ingen setTimeout. */
@supports (animation-timeline: view()){
  .rs-h{animation:rs-inn linear both;animation-timeline:view();animation-range:entry 15% entry 60%}
  .rs-k{animation:rs-inn linear both;animation-timeline:view();
    animation-range:entry calc(5% + var(--i,0) * 9%) entry calc(50% + var(--i,0) * 9%)}
  .rs-m{animation:rs-media linear both;animation-timeline:view();animation-range:entry 0% entry 65%}
  @keyframes rs-inn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes rs-media{from{opacity:.001;transform:scale(.94)}to{opacity:1;transform:none}}
  /* Første skjerm: teksten toner ut og skjermbildet setter seg idet du ruller vekk */
  .rs .heltstabel > div:first-child{animation:helt-inn .42s var(--ut) both,helt-ut linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0 520px}
  .rs .heltstabel > div:first-child > *{animation:none}
  .rs .heltskjerm{animation:helt-inn .5s var(--ut) .12s both,helt-sett linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0 520px}
  @keyframes helt-ut{to{opacity:0;transform:translateY(-28px)}}
  @keyframes helt-sett{from{transform:scale(1.035)}to{transform:scale(1) translateY(-14px)}}
}
/* «Slik foregår det»: overskriften står fast mens stegene ruller forbi, som Apples
   faste overskrift med spesifikasjonene under. Bare på pc. */
@media(min-width:900px){
  .inn.festet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
  .inn.festet .seksjonstopp{position:sticky;top:96px;margin-bottom:0}
  .inn.festet .rutenett.tre{grid-template-columns:1fr;gap:18px}
  .inn.festet .rutenett.tre .kort{padding:26px 28px}
}
@media(prefers-reduced-motion:reduce){.rs-h,.rs-k,.rs-m,.rs .heltstabel > div:first-child,.rs .heltskjerm{animation:none!important;opacity:1;transform:none}}

/* ======================================================================
   13 · Mobil, gjennomgått på nytt 16. september 2026.
   ====================================================================== */
/* Teksten i første skjerm skal ikke tone ut mens du fortsatt leser den på en
   liten skjerm. På mobil er det bare skjermbildet som setter seg. */
@media(max-width:820px){
  .rs .heltstabel > div:first-child{animation:helt-inn .42s var(--ut) both;animation-timeline:auto;animation-range:normal}
}
/* Hele kortet er trykkflaten, ikke bare tittelen. Lenken i tittelen strekkes
   over kortet, så et kort på 44 px og oppover treffes overalt. */
.kort.lenkekort,.kurskort.lenkekort{position:relative}
.kort.lenkekort h3 a::after,.kurskort.lenkekort h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* Kortet om eget materiell står én gang per bransje. På mobil, der kortene
   ligger under hverandre, står det uten bilde, så siden blir kortere og bildet
   ikke gjentas fire ganger. */
@media(max-width:619px){
  .kurskort.egne .kortbilde{display:none}
  .kurskort.egne .korttekst{padding-top:18px}
  .kurskort.egne .korttekst::before{content:"Egne kurs";display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--char);background:rgba(122,59,30,.1);
    padding:4px 9px;border-radius:999px;margin-bottom:10px}
  h1{font-size:2.05rem}
}
/* Utskrift og lagring som PDF: ingenting skal være usynlig, og lokalmenyen
   hører ikke hjemme på papir. */
@media print{
  .rs-h,.rs-k,.rs-m,.avsl,.rs .heltstabel > div:first-child,.rs .heltskjerm{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .lokal,header.topp .knapp,.mobilmeny{display:none}
}

/* ======================================================================
   14 · Mobil, runde to, 16. september 2026. Modell: apple.com på iPhone.
   Toppen ruller vekk der det finnes en lokalmeny, og lokalmenyen tar over
   øverst med sidenavn, en pil som åpner seksjonene, og én knapp. Menyen
   kommer i full bredde fra toppen med et slør bak og siden låst. Ting under
   første skjerm er på plass etter 120 px, uten kø. «Vis mer» glir opp.
   ====================================================================== */

/* 14a · Toppen ruller vekk på mobil der lokalmenyen eller pillene finnes */
@media(max-width:820px){
  body:has(.lokal) header.topp,body:has(.kategoribar) header.topp{position:relative}
  body:has(.lokal) header.topp.rullet,body:has(.kategoribar) header.topp.rullet{box-shadow:none;border-bottom-color:var(--line)}
  body:has(.lokal) .toppcta,body:has(.kategoribar) .toppcta{display:none}   /* knappen står i lokalmenyen */
  html:has(.kategoribar){scroll-padding-top:64px}
  html:has(.kategoribar) .kategoribar{top:0}
  html:has(.kategoribar) section.kategori{scroll-margin-top:0}
  html:has(.lokal){scroll-padding-top:60px}
  html:has(.lokal) h1,html:has(.lokal) h2,html:has(.lokal) h3{scroll-margin-top:60px}

  .lokal{display:block}
  .lokal .inn{min-height:48px;gap:12px}
  .lokalnavn{display:none}
  .lokalnavn.alene{display:inline}
  .lokalknapp{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;
    font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink);background:none;border:0;padding:0 8px;
    margin-left:-8px;min-height:44px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .lokalknapp svg{color:var(--steel);transition:transform .2s var(--ut)}
  .lokalknapp:active{background:rgba(23,25,28,.06)}
  .lokal.apen .lokalknapp svg{transform:rotate(180deg)}
  .lokallenker{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:2px;
    padding:8px var(--gutter) 12px;background:rgba(252,251,248,.97);
    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
    border-bottom:1px solid var(--line);box-shadow:0 22px 34px -24px rgba(16,26,40,.45);
    transform-origin:24px top;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.985);
    transition:opacity .12s var(--ut),transform .12s var(--ut),visibility 0s linear .12s}
  .lokal.apen .lokallenker{visibility:visible;opacity:1;transform:none;
    transition:opacity .18s var(--ut),transform .18s var(--ut),visibility 0s}
  .lokallenker a{min-height:44px;font-size:1rem;padding:0 12px;border-radius:9px;color:var(--ink)}
  .lokallenker a.aktiv{background:rgba(23,25,28,.07)}
  .lokal .knapp.liten{min-height:36px;padding:0 14px;font-size:.875rem}
  /* Knappen i raden viser seg først når heltknappen har rullet forbi, som toppknappen gjorde. */
  .js-toppcta .lokal .knapp{visibility:hidden;opacity:0;transform:translateY(-4px);
    transition:opacity .18s var(--ut),transform .18s var(--ut),visibility 0s linear .18s}
  .js-toppcta .lokal .knapp.vis{visibility:visible;opacity:1;transform:none;transition:opacity .18s var(--ut),transform .18s var(--ut),visibility 0s}
}
@media(min-width:821px){.lokalknapp{display:none}}
@media(prefers-reduced-transparency:reduce){.lokallenker,.menypanel{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* 14b · Menyen på mobil: full bredde fra toppen, slør bak, siden står stille */
@media(max-width:820px){
  .mobilmeny{position:static}
  .mobilmeny[open]::before{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;height:100dvh;
    background:rgba(16,26,40,.3);touch-action:none;z-index:1;transition:opacity .2s var(--ut)}
  @starting-style{.mobilmeny[open]::before{opacity:0}}
  .mobilmeny.lukker::before{opacity:0;transition-duration:.14s}
  .menypanel{position:absolute;left:0;right:0;top:100%;z-index:2;min-width:0;
    border:0;border-bottom:1px solid var(--line);border-radius:0 0 18px 18px;
    max-height:calc(100vh - 65px);max-height:calc(100dvh - 65px);overflow:auto;overscroll-behavior:contain;
    padding:10px var(--gutter) 16px;background:rgba(252,251,248,.97);
    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
    box-shadow:0 26px 44px -26px rgba(16,26,40,.5)}
  .mobilmeny[open] .menypanel{transform-origin:50% top;transition:opacity .2s var(--ut),transform .22s var(--ut)}
  @starting-style{.mobilmeny[open] .menypanel{opacity:0;transform:translateY(-8px) scale(.985)}}
  .mobilmeny.lukker .menypanel{opacity:0;transform:translateY(-5px) scale(.99);transition-duration:.14s}
  .menypanel a{min-height:48px;font-size:1.0625rem;padding:0 14px}
  .menypanel .menynavn{padding-top:14px}
  /* Lenkene kommer én etter én, ovenfra, som på apple.com */
  .mobilmeny[open] .menypanel > *{animation:meny-lenke .3s var(--ut) both}
  .mobilmeny[open] .menypanel > :nth-child(2){animation-delay:.02s}
  .mobilmeny[open] .menypanel > :nth-child(3){animation-delay:.04s}
  .mobilmeny[open] .menypanel > :nth-child(4){animation-delay:.06s}
  .mobilmeny[open] .menypanel > :nth-child(5){animation-delay:.08s}
  .mobilmeny[open] .menypanel > :nth-child(6){animation-delay:.1s}
  .mobilmeny[open] .menypanel > :nth-child(7){animation-delay:.12s}
  .mobilmeny[open] .menypanel > :nth-child(8){animation-delay:.14s}
  .mobilmeny[open] .menypanel > :nth-child(9){animation-delay:.16s}
  .mobilmeny[open] .menypanel > :nth-child(10){animation-delay:.18s}
  .mobilmeny[open] .menypanel > :nth-child(11){animation-delay:.2s}
  .mobilmeny[open] .menypanel > :nth-child(n+12){animation-delay:.22s}
  .mobilmeny.lukker .menypanel > *{animation:none}
  @keyframes meny-lenke{from{opacity:0;transform:translateY(-6px)}}
  html.menyapen{overflow:hidden}
  /* Meny-ikonet blir et kryss, og tilbake */
  .menyikon path{transition:transform .22s var(--ut),opacity .14s var(--ut);transform-origin:10px 10px}
  .mobilmeny[open] .menyikon path:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .mobilmeny[open] .menyikon path:nth-child(2){opacity:0}
  .mobilmeny[open] .menyikon path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .mobilmeny.lukker .menyikon path{transform:none;opacity:1}
}

/* 14c · Inntreden på mobil: ingen kø i én kolonne, ferdig etter 120 px, overskrifter står */
@media(max-width:820px){
  @supports (animation-timeline: view()){
    .rs-h{animation:none}
    .rs-k{animation-name:rs-inn-m;animation-range:entry 0px entry 120px}
    .rs-m{animation-range:entry 0px entry 160px}
    .kurskort .kortbilde.rs-m{animation:none}          /* ett kort, én bevegelse */
    @keyframes rs-inn-m{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
}

/* 14d · «Vis mer» i skjemaet glir opp i stedet for å hoppe (nettlesere som kan det) */
html{interpolate-size:allow-keywords}
@supports selector(details::details-content){
  details.mer::details-content{height:0;overflow:clip;transition:height .32s var(--ut),content-visibility .32s allow-discrete}
  details.mer[open]::details-content{height:auto}
}

/* 14e · Småting: trykkflater i bunnen, og fade i begge kanter av pilleraden */
@media(max-width:759px){footer.bunn li a{min-height:44px}}
@media(max-width:620px){
  .kategoribar .inn{padding-left:calc(var(--gutter));-webkit-mask-image:none;mask-image:none}
  .kategoribar .inn.mer-hoyre{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
  .kategoribar .inn.mer-venstre{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);mask-image:linear-gradient(to right,transparent,#000 36px)}
  .kategoribar .inn.mer-venstre.mer-hoyre{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}
@media(prefers-reduced-motion:reduce){
  .lokallenker,.menypanel,.mobilmeny[open]::before,.menyikon path,.lokalknapp svg{transition:none}
  .mobilmeny[open] .menypanel > *{animation:none}
}