/* =====================================================================
   Teoritrener designsystem
   Alle sider bruker denne fila. Endrer du en verdi her, endrer den seg
   overalt. Ingen side skal definere egne farger eller skriftstørrelser.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;
  --bg:        #FFFFFF;
  --bg-2:      #F5F7FB;
  --bg-3:      #EDF1F8;
  --panel:     #FFFFFF;
  --ink:       #0B0E14;
  --ink-2:     #39404F;
  --muted:     #6B7385;
  --line:      #E3E8F0;
  --line-2:    #CFD6E4;

  --brand:      #1B5CFF;
  --brand-deep: #1342C7;
  --brand-soft: #EAF0FF;
  --brand-ring: rgba(27,92,255,.30);
  --accent:     #F2A20C;
  --accent-soft:#FEF3DC;
  --accent-deep:#6E4700;

  --ok:      #0E9F6E;  --ok-soft: #E4F7EF;  --ok-deep: #07704C;
  --no:      #E02424;  --no-soft: #FDECEC;  --no-deep: #A81616;

  --display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(11,14,20,.05), 0 1px 3px rgba(11,14,20,.04);
  --shadow-2: 0 2px 4px rgba(11,14,20,.04), 0 12px 28px -12px rgba(11,14,20,.18);
  --shadow-3: 0 4px 8px rgba(11,14,20,.05), 0 28px 56px -24px rgba(11,14,20,.28);
  --maks: 1140px;
}
:root[data-tema="dark"], :root:not([data-tema="light"]) {
  /* fylles av media-spørringen under, denne linja er kun for spesifisitet */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    color-scheme: dark;
    --bg: #0C0F16; --bg-2: #12161F; --bg-3: #1A1F2B; --panel: #141924;
    --ink: #F2F4F9; --ink-2: #C3C9D6; --muted: #8B93A5;
    --line: #232937; --line-2: #333B4D;
    --brand: #6E9BFF; --brand-deep: #A8C2FF; --brand-soft: #17203A; --brand-ring: rgba(110,155,255,.30);
    --accent: #FFC14D; --accent-soft: #2E2513; --accent-deep: #FFC14D;
    --ok: #34D399; --ok-soft: #12271F; --ok-deep: #86EFC4;
    --no: #FF6B6B; --no-soft: #2A1516; --no-deep: #FFA5A5;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 14px 30px -14px rgba(0,0,0,.7);
    --shadow-3: 0 4px 10px rgba(0,0,0,.4), 0 30px 60px -26px rgba(0,0,0,.8);
  }
}
:root[data-tema="dark"] {
  color-scheme: dark;
  --bg: #0C0F16; --bg-2: #12161F; --bg-3: #1A1F2B; --panel: #141924;
  --ink: #F2F4F9; --ink-2: #C3C9D6; --muted: #8B93A5;
  --line: #232937; --line-2: #333B4D;
  --brand: #6E9BFF; --brand-deep: #A8C2FF; --brand-soft: #17203A; --brand-ring: rgba(110,155,255,.30);
  --accent: #FFC14D; --accent-soft: #2E2513; --accent-deep: #FFC14D;
  --ok: #34D399; --ok-soft: #12271F; --ok-deep: #86EFC4;
  --no: #FF6B6B; --no-soft: #2A1516; --no-deep: #FFA5A5;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 14px 30px -14px rgba(0,0,0,.7);
  --shadow-3: 0 4px 10px rgba(0,0,0,.4), 0 30px 60px -26px rgba(0,0,0,.8);
}

/* ---------- 2. Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.021em; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
p  { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }
.wrap { width: min(100% - 40px, var(--maks)); margin-inline: auto; }
@media (max-width: 620px) { .wrap { width: calc(100% - 32px); } }
.skjult { display: none !important; }
.kunskjerm {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Topplinje ---------- */
/* Motivet er vegoppmerking. Den aktive lenken får en stiplet midtlinje
   under seg, som på asfalt, og selve topplinja avsluttes med en stiplet
   kantlinje når du har rullet. Bevegelsen slås av for de som har bedt
   om mindre bevegelse. */
.topp {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent; transition: box-shadow .2s;
}
/* Uskarp bakgrunn er dyr på mobil: laget må tegnes på nytt for hver
   piksel siden ruller, og det er nettopp der topplinja står fast.
   Den beholdes der den er gratis, på store skjermer. */
@media (min-width: 901px) {
  .topp {
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
  }
}
.topp.festet { box-shadow: var(--shadow-1); }
.topp.festet::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: repeating-linear-gradient(to right,
    var(--line-2) 0 14px, transparent 14px 26px);
}

/* Fremdriftslinje: veien du har lagt bak deg på siden */
.vei {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 61;
  pointer-events: none; background: transparent;
}
.vei > i {
  display: block; height: 100%; width: 0; position: relative; overflow: hidden;
  background: linear-gradient(to right, var(--brand-deep), var(--brand));
  transition: width .1s linear;
}
/* Veistripene skal ligge oppå den fylte delen, ikke over hele linja.
   Uten position: relative over festes de til .vei og går tvers over toppen. */
.vei > i::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,.85) 0 10px, transparent 10px 24px);
}
.topp-rad { display: flex; align-items: center; gap: 18px; height: 66px; }
.merke { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display);
  font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.merke svg { width: 27px; height: 27px; flex: 0 0 auto; color: var(--brand); }
.merke:hover svg { color: var(--brand-deep); }
.meny { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.meny a, .meny button.lenke {
  position: relative; padding: 8px 12px 10px; border-radius: 9px; text-decoration: none;
  background: none; border: 0; color: var(--ink-2); font-size: 15px; font-weight: 550;
  cursor: pointer; white-space: nowrap; transition: color .15s;
}
/* Stiplet midtlinje under lenken, som vegoppmerking */
.meny a::after, .meny button.lenke::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2.5px;
  border-radius: 2px; opacity: 0; transform: scaleX(.55); transform-origin: left center;
  transition: opacity .2s, transform .3s cubic-bezier(.16,1,.3,1);
  background: repeating-linear-gradient(to right,
    var(--brand) 0 8px, transparent 8px 15px);
}
.meny a:hover, .meny button.lenke:hover { color: var(--ink); }
.meny a:hover::after, .meny button.lenke:hover::after { opacity: .5; transform: scaleX(1); }
.meny a[aria-current="page"] { color: var(--brand); }
.meny a[aria-current="page"]::after {
  opacity: 1; transform: scaleX(1);
  animation: kjor 1.6s linear infinite;
}
@keyframes kjor { to { background-position-x: -15px; } }
@media (prefers-reduced-motion: reduce) {
  .meny a[aria-current="page"]::after { animation: none; }
}
@media (max-width: 900px) {
  .meny a::after, .meny button.lenke::after { left: 12px; right: auto; width: 26px; bottom: 6px; }
}
.ikonknapp {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); cursor: pointer; flex: 0 0 auto;
}
.ikonknapp:hover { background: var(--bg-2); color: var(--ink); }
.ikonknapp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.burger { display: none; }
@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .meny {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 20px 20px;
    box-shadow: var(--shadow-2); display: none;
  }
  .topp.apen .meny { display: flex; }
  .meny a, .meny button.lenke { padding: 13px 12px; font-size: 16px; }
}

/* ---------- 4. Knapper ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15.5px; font-weight: 650; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s cubic-bezier(.2,.9,.3,1.2), background .16s, border-color .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.btn-primar { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11,14,20,.16), 0 10px 22px -12px var(--brand-ring); }
.btn-primar:hover:not(:disabled) { background: var(--brand-deep); }
:root[data-tema="dark"] .btn-primar, :root:not([data-tema="light"]) .btn-primar { color: #08111F; }
.btn-hvit { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn-hvit:hover:not(:disabled) { background: var(--bg-2); border-color: var(--muted); }
.btn-svak { background: var(--bg-2); color: var(--ink-2); }
.btn-svak:hover:not(:disabled) { background: var(--bg-3); color: var(--ink); }
.btn-stor { padding: 15px 26px; font-size: 17px; border-radius: 14px; }
.btn-bred { width: 100%; }

/* ---------- 5. Flater ---------- */
/* Skygge som standard, ikke bare kant: det er det som skiller en flate
   som «ligger på» siden fra en som bare har en strek rundt seg. */
.kort { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--shadow-1); }
.kort-l { box-shadow: var(--shadow-2); }
.seksjon { padding: clamp(56px, 8vw, 104px) 0; }
.seksjon-alt { background: var(--bg-2); }
.stikkord {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
/* Samme stiplede vegoppmerking som under menylenken og i logoen, gjentatt
   foran hvert lille avsnittsmerke. Ett motiv, brukt flere steder. */
.stikkord::before {
  content: ''; display: inline-block; width: 16px; height: 2px; border-radius: 2px; flex: 0 0 auto;
  background: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px);
}
.sek-topp { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.sek-topp p { color: var(--muted); font-size: 17px; margin-top: 12px; }
.midtstilt { margin-inline: auto; text-align: center; }

.merkelapp {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; background: var(--bg-3); color: var(--ink-2);
}
.merkelapp-ok { background: var(--ok-soft); color: var(--ok-deep); }
.merkelapp-brand { background: var(--brand-soft); color: var(--brand-deep); }
.merkelapp-varsel { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- 6. Spørsmålskortet ---------- */
/* Kortet tegnes på nytt for hvert spørsmål (rot.innerHTML byttes ut i
   quiz.js), så denne animasjonen spiller hver gang et nytt spørsmål
   kommer inn, uten at JS-en trenger å vite noe om det. */
@keyframes qkortInn { from { opacity: 0; transform: translateY(10px); } }
.qkort { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); overflow: hidden;
  animation: qkortInn .32s cubic-bezier(.16,1,.3,1); }
.qtopp { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 22px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.qkat { font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: .01em; }
.qtell { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 8px; }
.qkropp { padding: 24px 22px; }
.qtekst { font-family: var(--display); font-size: clamp(1.12rem, 1rem + .5vw, 1.42rem);
  font-weight: 650; line-height: 1.32; letter-spacing: -.014em; margin-bottom: 18px; }
.qfigur { margin: 0 auto 20px; max-width: 420px; }
.qfigur svg { width: 100%; height: auto; display: block; }
.qskilt { width: 116px; margin: 0 auto 20px; }
.svar { display: grid; gap: 10px; }
.alt {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 16px; font-weight: 500;
  cursor: pointer; transition: border-color .14s, background .14s, transform .12s;
}
.alt:hover:not(:disabled) { border-color: var(--line-2); background: var(--bg-2); }
.alt:disabled { cursor: default; }
.alt .bok {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; background: var(--bg-3);
  color: var(--ink-2); font-size: 13.5px; font-weight: 700; display: grid; place-items: center;
}
.alt.valgt { border-color: var(--brand); background: var(--brand-soft); }
.alt.valgt .bok { background: var(--brand); color: #fff; }
/* Et lite støt idet fasiten avgjøres, ikke bare et fargebytte. Samme
   bevegelse for riktig og galt: det er dommen som skal kjennes, ikke
   hvilken av dem det ble. */
@keyframes altAvgjort { 35% { transform: scale(1.017); } }
.alt.riktig, .alt.galt { animation: altAvgjort .3s ease-out; }
.alt.riktig { border-color: var(--ok); background: var(--ok-soft); }
.alt.riktig .bok { background: var(--ok); color: #fff; }
.alt.galt { border-color: var(--no); background: var(--no-soft); }
.alt.galt .bok { background: var(--no); color: #fff; }
.qfot { display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-top: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.fasit { padding: 17px 19px; border-radius: 16px; margin-top: 18px; font-size: 15.5px; line-height: 1.6;
  animation: qkortInn .3s cubic-bezier(.16,1,.3,1); }
.fasit-ok { background: var(--ok-soft); color: var(--ok-deep); }
.fasit-nei { background: var(--no-soft); color: var(--no-deep); }
.fasit .dom { font-family: var(--display); font-weight: 700; font-size: 16px; display: block; margin-bottom: 5px; }
.fasit b { font-weight: 700; }
.tast { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.tast kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--panel); }

/* ---------- 7. Fremdrift ---------- */
.stolpe { height: 7px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.stolpe > i { display: block; height: 100%; background: var(--brand); border-radius: 999px;
  transition: width .45s cubic-bezier(.16,1,.3,1); }
.stolpe.ok > i { background: var(--ok); }

/* ---------- 8. Låst innhold ---------- */
.laas { text-align: center; padding: clamp(30px, 5vw, 52px) 24px; border-radius: var(--r-xl);
  border: 1.5px dashed var(--line-2); background: var(--bg-2); }
.laas svg.hengelaas { width: 34px; height: 34px; stroke: var(--muted); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.laas h3 { margin-bottom: 8px; }
.laas p { color: var(--muted); max-width: 420px; margin: 0 auto 20px; }

/* ---------- 9. Skjema ---------- */
.felt { margin-bottom: 14px; }
.felt label { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.felt input, .felt select {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 16px;
}
.felt input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.feilboks { display: none; background: var(--no-soft); border: 1px solid var(--no); color: var(--no-deep);
  border-radius: 12px; padding: 11px 14px; font-size: 14.5px; margin-bottom: 14px; }
.feilboks.vis { display: block; }

/* ---------- 10. Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8,11,18,.55); backdrop-filter: blur(4px); }
.modal.apen { display: flex; }
.ark { position: relative; width: min(100%, 440px); background: var(--panel); border-radius: var(--r-xl);
  border: 1px solid var(--line); box-shadow: var(--shadow-3); padding: 28px;
  max-height: 88vh; overflow-y: auto; animation: opp .28s cubic-bezier(.16,1,.3,1); }
@keyframes opp { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.ark h3 { margin-bottom: 6px; }
.ark .under { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.lukk { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 9px;
  border: 0; background: var(--bg-2); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.lukk:hover { background: var(--bg-3); color: var(--ink); }
.finstilt { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.5; }

/* ---------- 11. Bunn ---------- */
.bunn { border-top: 1px solid var(--line); background: var(--bg-2); padding: 52px 0 30px; margin-top: 60px; }
.bunn-rutenett { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 820px) { .bunn-rutenett { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 480px) { .bunn-rutenett { grid-template-columns: 1fr; } }
.bunn h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 12px; }
.bunn ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.bunn a, .bunn button.lenke { color: var(--ink-2); text-decoration: none; font-size: 15px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.bunn a:hover, .bunn button.lenke:hover { color: var(--brand); }
.bunn .liten { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.bunn-strek { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px; }

/* ---------- 12. Varsel ---------- */
#varsel { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  z-index: 300; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14.5px;
  padding: 13px 20px; border-radius: 13px; box-shadow: var(--shadow-3); opacity: 0;
  transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1); pointer-events: none;
  max-width: 86vw; text-align: center; }
#varsel.vis { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 13. Brukerområdet i topplinja ---------- */
.brukerknapp {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.brukerknapp:hover { border-color: var(--line-2); background: var(--bg-2); }
.brukerknapp .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0;
}
.brukerknapp .strek { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 700; }
.brukerknapp .strek svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.brukerknapp .pil { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.brukerknapp[aria-expanded="true"] .pil { transform: rotate(180deg); }

.nedtrekk {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: 258px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-3); padding: 7px; display: none;
  animation: nedtrekkInn .18s cubic-bezier(.16,1,.3,1);
}
.nedtrekk.apen { display: block; }
@keyframes nedtrekkInn { from { opacity: 0; transform: translateY(-6px); } }
.nedtrekk .hode { padding: 11px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nedtrekk .hode b { display: block; font-size: 14.5px; }
.nedtrekk .hode span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nedtrekk a, .nedtrekk button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font-size: 14.5px; font-weight: 550; text-decoration: none;
}
.nedtrekk a:hover, .nedtrekk button:hover { background: var(--bg-2); color: var(--ink); }
.nedtrekk svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nedtrekk .skille { height: 1px; background: var(--line); margin: 6px 4px; }
.nedtrekk .tilgang { margin: 6px 4px 4px; padding: 11px 12px; border-radius: 11px;
  background: var(--brand-soft); }
.nedtrekk .tilgang b { display: block; font-size: 13.5px; color: var(--brand-deep); }
.nedtrekk .tilgang span { display: block; font-size: 12.5px; color: var(--ink-2); margin: 3px 0 9px; }
.nedtrekk .fare { color: var(--no); }
.nedtrekk .fare:hover { background: var(--no-soft); color: var(--no-deep); }

.brukerfelt { position: relative; display: flex; align-items: center; gap: 9px; }
@media (max-width: 900px) {
  .nedtrekk { right: auto; left: 0; width: 100%; position: static; box-shadow: none;
    border: 0; padding: 0; margin-top: 6px; }
  .nedtrekk.apen { display: block; }
  .brukerfelt { flex-direction: column; align-items: stretch; }
}

/* ---------- 14. Innloggingsvinduet ---------- */
.ark .logohode { display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--display); font-weight: 700; font-size: 17px; }
.ark .logohode svg { width: 25px; height: 25px; color: var(--brand); }
.passordfelt { position: relative; }
.passordfelt input { padding-right: 78px; }
.passordfelt .vis {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.passordfelt .vis:hover { background: var(--bg-2); color: var(--ink); }
.ark .fordeler { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.ark .fordeler li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.ark .fordeler svg { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto;
  stroke: var(--ok); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 15. Signatur ---------- */
.bunn-strek .ktf { color: var(--muted); text-decoration: none; transition: color .15s; }
.bunn-strek .ktf b { color: var(--ink-2); font-weight: 650; }
.bunn-strek .ktf:hover { color: var(--brand); }
.bunn-strek .ktf:hover b { color: var(--brand); }
.ktf-merke {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; padding: 9px 15px; border-radius: 999px;
  box-shadow: var(--shadow-2); text-decoration: none; transition: transform .15s, border-color .15s;
}
.ktf-merke b { font-weight: 650; color: var(--ink); }
.ktf-merke:hover { transform: translateY(-2px); border-color: var(--brand); }
@media (max-width: 760px) { .ktf-merke { font-size: 11.5px; padding: 8px 12px; left: 12px; bottom: 12px; } }

/* Bekreftelsesboks, motstykket til .feilboks */
.okboks { display: none; background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok-deep);
  border-radius: 12px; padding: 11px 14px; font-size: 14.5px; margin-bottom: 14px; line-height: 1.5; }
.okboks.vis { display: block; }

/* ---------- 16. Innlogging med Google og Apple ---------- */
.sosial { display: grid; gap: 9px; margin-bottom: 16px; }
.sosial-knapp {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--line-2);
  background: var(--panel); color: var(--ink); font-size: 15.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sosial-knapp:hover:not(:disabled) { background: var(--bg-2); border-color: var(--muted); }
.sosial-knapp:disabled { cursor: default; }
.sosial-knapp svg { flex: 0 0 auto; }
.skille-tekst { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.skille-tekst::before, .skille-tekst::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.skille-tekst span { font-size: 12.5px; color: var(--muted); }

/* ---------- 17. Skjelett-lasting ---------- */
/* Flater som viser fasongen av det som kommer, i stedet for et "Laster
   ..." midt på en ellers tom side. Brukes som statisk markup i .html-
   fila, og forsvinner av seg selv når siden sitt eget skript bytter ut
   innholdet i beholderen. Ingen JS her, bare CSS. */
.skjelett-linje, .skjelett-boks, .skjelett-sirkel {
  position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r-sm);
}
.skjelett-linje { height: 14px; border-radius: 7px; }
.skjelett-linje.stor { height: 22px; }
.skjelett-linje.sml { width: 40%; }
.skjelett-linje.mid { width: 65%; }
.skjelett-sirkel { border-radius: 50%; flex: 0 0 auto; }
.skjelett-linje::after, .skjelett-boks::after, .skjelett-sirkel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%,
    color-mix(in oklab, var(--panel) 65%, transparent) 50%, transparent 70%);
  animation: skjelettSkinn 1.7s ease-in-out infinite;
}
@keyframes skjelettSkinn { to { transform: translateX(100%); } }
.skjelett-rad { display: flex; flex-direction: column; gap: 10px; }
.skjelett-kort { padding: 22px; display: grid; gap: 12px; }