/* Hellander NXT – stilark
   Lys, redaksjonell profil: varm kremhvit flate, serif-overskrifter (Playfair
   Display), én blåtone som aksent og en blå-til-cyan forløpning på de flatene
   som skal løftes frem (oppfordringsbåndet). */

/* Innhold

    1. Grunnlag
    2. Knapper
    3. Toppfelt
    4. Mobilmeny: fullskjerm
    5. Seksjoner
    6. Hero
    7. Inngangsanimasjon
    8. Bilder i hero og delt felt, og hero på smale skjermer
    9. Tjenestekort
   10. Trinn (slik jobber vi)
   11. Delt bilde/tekst-felt
   12. Bloggliste
   13. Spørsmål og svar (utvidbare felter)
   14. Blått oppfordringsbånd
   15. Ring meg tilbake
   16. Artikkel (blogg + juridiske sider)
   17. Kontakt
   18. Bunnfelt
   19. Avduking (styres av js/avduk.js)
   20. Felles bevegelsesspråk
   21. Undermeny under "Tjenester"
   22. Hub-kortene pa tjenestesiden
   23. Brodsmuler
   24. Tjenesteikoner
   25. Undermeny med beskrivelse
   26. Teamet
   27. Feilside (404)
   28. Kontaktskjema
   29. Samtykke til informasjonskapsler
   30. Portaldemo (kundeportal.html)
   31. Bransjesider (nettside-for-*.html)
   32. Ordliste
   33. Sjekk nettsiden
   34. Sidebytte
   35. Handlingslinje, driftsstatus, lyskjegle og «Til toppen» (js/felles.js)
   36. Systemskisse og før/etter (forsidens hero og systemer.html)
   37. Bilder som lastes: skjelett og inntoning (js/felles.js)
   38. Mørk drakt og draktbryteren (js/tema.js)
   39. Utskrift
   40. Referanser (referanser.html)
   41. Eksempelstripe og bransjelenker (index.html og nettsider.html)
   42. Illustrasjoner på tjenestesidene
   43. Nettsider-siden: alltid med, prisboks og sammenligning
   44. Kontaktskjemaet og oppfordringene

   Det bare én side bruker, og som er stort nok til å merkes, ligger i
   sidas egen fil: forside.css (index.html) og priser.css (priser.html).
   Mindre sidespesifikke deler (kontaktskjemaet, 404, teamet, portaldemoen)
   står her, i hver sin seksjon.
*/

:root {
  /* Lyst grensesnitt. Uten dette tegner Windows og iOS rullefelt
     og skjemakontroller i moerk drakt paa moerkt system. */
  color-scheme: light;
  --blaa: #2456c8;
  --blaa-moerk: #1a419c;
  --blaa-lys: #eef3fc;
  /* Fyll med hvit tekst paa (knapper, tallbrikker, merker). Egne tokens
     fordi --blaa blir en lys teksttone i moerk drakt, og --hvit blir
     sideflaten. Disse to holder seg like i begge. */
  --blaa-flate: #2456c8;
  --blaa-flate-moerk: #1a419c;
  --paa-blaa: #ffffff;
  --cyan: #58c6da;
  --blekk: #141a24;
  --graa-tekst: #5b6676;
  --graa-linje: #e7eaf0;
  --graa-flate: #f6f8fb;
  --krem: #fdf7ee;
  --hvit: #ffffff;
  --forloep: linear-gradient(112deg, #2a5fd0 0%, #3d8cd4 48%, #5cc6da 100%);
  /* Samme retning som --forloep, men holdt moerk hele veien: hvit tekst
     maaler 5,01:1 selv paa det lyseste stoppet, mot AA-kravet 4,5.
     Den opprinnelige endte paa #5cc6da, der hvit gir 1,99:1. */
  --forloep-tekst: linear-gradient(112deg, #1a419c 0%, #2456c8 52%, #2f6fc4 100%);
  --radius: 14px;
  --radius-stor: 22px;
  --pille: 999px;
  --ramme-maks: 1160px;
  /* To lag: en tett kontaktskygge og en vid, diffus ambient-skygge */
  --skygge: 0 1px 2px rgba(20, 26, 36, 0.04), 0 12px 32px -10px rgba(20, 26, 36, 0.10);
  --skygge-loft: 0 2px 6px rgba(20, 26, 36, 0.05), 0 28px 64px -16px rgba(36, 86, 200, 0.30);
  /* Tung, fjærende kurve – ingen ease-in-out */
  --fjaer: cubic-bezier(0.32, 0.72, 0, 1);
}


/* ---------- Grunnlag ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--blekk);
  background: var(--hvit);
  -webkit-font-smoothing: antialiased;
  /* En lang e-postadresse eller URL uten mellomrom sprenger ellers
     kolonnen og gir horisontal rulling paa mobil. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 650; }

/* «pretty» unngaar et ensomt ord paa siste linje i avsnitt. Nettlesere som
   ikke kan det, bryter som foer. */
p { margin: 0 0 1em; text-wrap: pretty; }

/* Fjerner 300 ms-forsinkelsen nettlesere legger inn for aa se om et trykk
   blir til et dobbelttrykk (zoom). Sidezoom med knip virker som foer. */
a, button, summary, .knapp, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(36, 86, 200, 0.14);
}

/* Understreken staar dempet og tar full farge ved hover, i stedet for at
   hele lenka bare skifter blaatone. */
a {
  color: var(--blaa);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(36, 86, 200, 0.35);
  transition: color 0.25s var(--fjaer), text-decoration-color 0.25s var(--fjaer), text-underline-offset 0.25s var(--fjaer);
}
a:hover { color: var(--blaa-moerk); text-decoration-color: currentColor; text-underline-offset: 4px; }

:focus-visible {
  outline: 3px solid var(--blaa);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--blaa-flate); color: var(--paa-blaa); }

/* Ankerlenker skal ikke havne under det klebrige toppfeltet */
[id] { scroll-margin-top: 84px; }

/* Hopp-til-innhold for tastaturbrukere: usynlig til den får fokus */
.hopp {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 20;
  background: var(--blaa-flate);
  color: var(--paa-blaa);
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 700;
}

.hopp:focus { left: 1rem; }

.ramme {
  max-width: var(--ramme-maks);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sekundaer { color: var(--graa-tekst); }

.prosa { max-width: 46rem; }
.uten-luft-topp { padding-top: 0; }

/* Blå markeringslinje over korttitler */
.strek {
  display: inline-block;
  width: 2.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--blaa);
  margin-bottom: 1.1rem;
}


/* For skjermlesere, ikke for oeyet. */
.skjult-visuelt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- Knapper ---------- */

.knapp {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: var(--pille);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  user-select: none;
  transition: background-color 0.35s var(--fjaer), color 0.35s var(--fjaer),
              box-shadow 0.35s var(--fjaer),
              transform 0.35s var(--fjaer);
}

/* Trykket kjennes: knappen gir etter, og skyggen legger seg. Raskere enn
   loeftet, saa et klikk aldri foeles tregt. */
.knapp:active { transform: scale(0.97); box-shadow: none; transition-duration: 0.12s; }

/* Loeft kun paa enheter med ekte pekerhover (mus/styreflate). Et rolig loeft
   uten sprett: knappen skal kjennes solid, ikke gummiaktig. */
@media (hover: hover) and (pointer: fine) {
  .knapp:hover { transform: translateY(-2px); }
  .knapp:active { transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .knapp:hover, .knapp:active { transform: none; }
}

.knapp-blaa {
  background: var(--blaa-flate);
  color: var(--paa-blaa);
  box-shadow: 0 1px 2px rgba(20, 26, 36, 0.08), 0 10px 24px -10px rgba(36, 86, 200, 0.55);
}
.knapp-blaa:hover {
  background: var(--blaa-flate-moerk);
  color: var(--paa-blaa);
  box-shadow: 0 2px 4px rgba(20, 26, 36, 0.08), 0 18px 36px -12px rgba(36, 86, 200, 0.6);
}

/* Mørk pilleknapp – hovedhandlingen i toppfeltet, som i skissen */
.knapp-moerk {
  background: var(--blekk);
  color: var(--hvit);
  box-shadow: 0 1px 2px rgba(20, 26, 36, 0.10), 0 10px 24px -12px rgba(20, 26, 36, 0.55);
}
.knapp-moerk:hover { background: #262f3d; color: var(--hvit); }

/* Bølge fra klikkpunktet (lages av js/knapp.js) */
.knapp-bolge {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: knapp-bolge-ut 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes knapp-bolge-ut {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Lys sekundærknapp: hvit flate med hårfin kant */
.knapp-lys {
  background: var(--hvit);
  color: var(--blekk);
  box-shadow: inset 0 0 0 1px var(--graa-linje), 0 1px 2px rgba(20, 26, 36, 0.04);
}
.knapp-lys:hover {
  background: var(--graa-flate);
  color: var(--blekk);
  box-shadow: inset 0 0 0 1px #d7dce6, 0 6px 18px -8px rgba(20, 26, 36, 0.25);
}

.knapp-hvit {
  background: var(--hvit);
  color: var(--blaa-moerk);
  box-shadow: 0 2px 6px rgba(12, 30, 70, 0.12), 0 16px 36px -14px rgba(9, 24, 58, 0.5);
}
.knapp-hvit:hover { background: #f2f6fd; color: var(--blaa-moerk); }


/* ---------- Toppfelt ----------

   To tilstander. Øverst på siden er feltet helt gjennomsiktig, slik at heroen
   får ligge urørt bak lenkene. Så snart man ruller, legger det seg en frostet
   flate under — og det er ikke bare pynt: uten flate står de grå lenkene på
   1,01:1 mot det blå båndet lenger nede, altså usynlige. Klassen settes av
   js/topp.js; uten JS blir feltet stående med flate hele veien, som er den
   trygge tilstanden. */

/* Full bredde inni prisplanene */


.topp {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  transition: background-color 0.35s var(--fjaer),
              box-shadow 0.35s var(--fjaer),
              backdrop-filter 0.35s var(--fjaer);
}

/* Hårfin linje som tones inn sammen med flaten. Egen pseudo i stedet for
   border-bottom, så høyden på feltet ikke hopper når den dukker opp. */
.topp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--graa-linje);
  opacity: 0;
  transition: opacity 0.35s var(--fjaer);
}

.topp.festet {
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(20, 26, 36, 0.03), 0 10px 30px -20px rgba(20, 26, 36, 0.28);
}

.topp.festet::after { opacity: 1; }

/* Lesefremdrift paa artiklene og de juridiske sidene: en tynn strek langs
   underkanten av toppfeltet som fylles mens man leser. Ren CSS, drevet av
   rulleposisjonen (animation-timeline). Nettlesere som ikke kan det, viser
   ingen strek. Bevegelsen foelger fingeren, saa den blir staaende ogsaa med
   redusert bevegelse. */
@supports (animation-timeline: scroll()) {
  body:has(.artikkel) .topp::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 2px;
    background: var(--forloep);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: lesefremdrift linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes lesefremdrift { to { transform: scaleX(1); } }

/* 0.88 er ikke tilfeldig: over det mørkeste stoppet i det blå båndet
   (#2a5fd0) gir 0.82 en kontrast på 4,49:1 for de grå lenkene - akkurat
   under AA-grensen. 0.88 gir 4,91:1. */

/* Uten JS: vis flaten med en gang, slik at lenkene aldri blir uleselige. */
.topp.uten-js {
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.topp-indre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 72px;
  transition: height 0.35s var(--fjaer);
}

/* Feltet strammer seg litt sammen når man ruller. */
.topp.festet .topp-indre { height: 62px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--blekk);
  text-decoration: none;
  letter-spacing: -0.01em;
  /* To ord: uten dette deler navnet seg paa to linjer naar feltet er trangt. */
  white-space: nowrap;
  transition: font-size 0.35s var(--fjaer), letter-spacing 0.4s var(--fjaer);
}

.topp.festet .logo { font-size: 1.35rem; }

/* Logoen er to tegninger fra img/logo.svg: merket (flaten med H-en) og
   ordmerket. Maalene er i em, saa de foelger skriftstoerrelsen paa .logo
   og .bunn-merke - ogsaa naar toppfeltet strammer seg sammen. */
.logo-merke {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

.logo-ord {
  width: auto;
  height: 0.9em;
  /* KOBLING: viewBox paa ordmerket, skrevet ut av verktoy/logo.py. */
  aspect-ratio: 573 / 78;
  flex: none;
  /* Bokstavene arver fill, pilen i X-en bruker currentColor. */
  fill: var(--blekk);
  color: var(--blaa-flate);
}

/* Paa de smaleste telefonene (320 px) faar ikke «Hellander NXT» plass i
   full stoerrelse ved siden av Meny og temaknappen. */
@media (max-width: 350px) {
  .logo,
  .topp.festet .logo { font-size: 1.2rem; }
}

/* Merket viker der feltet er for trangt til baade merke og ordmerke: paa
   smale telefoner, og rett over grensa der menyen legger seg paa én linje
   (821 px) til det er plass igjen. */
@media (max-width: 389px), (min-width: 821px) and (max-width: 869px) {
  .topp .logo-merke { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover { letter-spacing: 0.01em; }
}

.topp-nav { display: flex; align-items: center; gap: 1.9rem; }

/* Sju punkter i menyen: rett over brytepunktet til mobilmenyen (820px) ble
   det for trangt, og «Om oss» og «Kontakt oss» brakk over to linjer. */
.topp-nav a { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1000px) {
  .topp-nav { gap: 1.2rem; }
}

.topp-nav a {
  position: relative;
  color: var(--graa-tekst);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.97rem;
  transition: color 0.3s var(--fjaer);
}

.topp-nav a:hover { color: var(--blekk); }

/* Understrek som vokser ut fra midten. Ligger som pseudo-element, ikke som
   border, så den kan animeres uten å flytte teksten. */
.topp-nav a:not(.knapp)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--fjaer);
}

.topp-nav a:not(.knapp):hover::after,
.topp-nav a:not(.knapp):focus-visible::after { transform: scaleX(1); }

/* Gjeldende side: samme strek, men alltid utslått og i blått. */
.topp-nav a[aria-current="page"] { color: var(--blekk); }
.topp-nav a[aria-current="page"]:not(.knapp)::after {
  transform: scaleX(1);
  background: var(--blaa);
}

/* Lenkene loeftet seg tidligere med et sprett ved hover. Det er tatt bort:
   streken som vokser fram sier det samme, roligere, og teksten staar stille
   der man sikter. */

@media (prefers-reduced-motion: reduce) {
  .topp,
  .topp-indre,
  .logo,
  .topp-nav a:not(.knapp)::after { transition: none; }
}

.topp-nav .knapp {
  padding: 0.6rem 1.35rem;
  font-size: 0.95rem;
  /* ".topp-nav a" er mer spesifikk enn ".knapp" og ville ellers gitt
     knappen i toppfeltet den lette lenkevekten. Samme problem gjelder
     overgangen: uten denne arver knappen "transition: color" fra lenkene,
     og løftet ved hover skjer i ett hopp uten mykhet. */
  font-weight: 700;
  transition: background-color 0.35s var(--fjaer), color 0.35s var(--fjaer),
              box-shadow 0.35s var(--fjaer),
              transform 0.35s var(--fjaer);
}

/* Egen fargeregel: ellers vinner lenkefargen i .topp-nav a over knappefargen */
.topp-nav a.knapp-moerk,
.topp-nav a.knapp-moerk:hover { color: var(--hvit); }

.topp-nav a.knapp[aria-current="page"] {
  border-bottom: none;
  padding-bottom: 0.6rem;
}

.meny-knapp {
  display: none;
  background: none;
  border: 1px solid var(--graa-linje);
  border-radius: var(--pille);
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--blekk);
  cursor: pointer;
}

@media (max-width: 820px) {
  .meny-knapp {
    display: block;
    position: relative;
    z-index: 30;
  }

  /* ---------- Mobilmeny: fullskjerm ----------
     Legger seg over hele skjermen med samme mesh-gradient og bølgenett som
     heroen, så den kjennes som en del av siden og ikke et fremmed panel.
     Skjult med "visibility" og ikke "display", slik at inn- og utgangen kan
     tones - display kan ikke animeres. */
  .topp-nav {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 6rem 1.75rem 3rem;
    /* Hakk og hjemindikator: hold innholdet innenfor den trygge sonen. */
    padding-left: max(1.75rem, env(safe-area-inset-left));
    padding-right: max(1.75rem, env(safe-area-inset-right));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.32s var(--fjaer), visibility 0s linear 0.32s;

    background-color: #f7f7fb;
    background-image:
      radial-gradient(58% 42% at 14% 12%, rgba(206, 205, 246, 0.9) 0%, rgba(206, 205, 246, 0) 62%),
      radial-gradient(52% 38% at 88% 18%, rgba(255, 238, 214, 0.85) 0%, rgba(255, 238, 214, 0) 64%),
      radial-gradient(66% 46% at 78% 88%, rgba(198, 214, 247, 0.9) 0%, rgba(198, 214, 247, 0) 66%),
      radial-gradient(48% 34% at 22% 84%, rgba(226, 214, 246, 0.85) 0%, rgba(226, 214, 246, 0) 62%),
      linear-gradient(180deg, #fbfbfe 0%, #f3f4fa 100%);
  }

  /* Bølgenettet ligger over gradienten, under lenkene. */
  .topp-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/bolge.svg") no-repeat center / cover;
    opacity: 0.55;
    pointer-events: none;
  }

  .topp-nav.aapen {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.32s var(--fjaer), visibility 0s linear 0s;
  }

  .topp-nav a {
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(20, 26, 36, 0.09);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--blekk);
  }

  .topp-nav a[aria-current="page"] {
    border-bottom: 1px solid rgba(20, 26, 36, 0.09);
    color: var(--blaa);
  }

  .topp-nav .knapp {
    margin-top: 2rem;
    padding: 1rem 1.7rem;
    text-align: center;
    border-bottom: none;
    font-family: "Lato", system-ui, sans-serif;
    font-size: 1.05rem;
  }

  /* Lenkene faller inn etter hverandre når menyen åpnes. Forsinkelsene
     settes av js/topp.js, slik at de følger rekkefølgen i markupen. */
  @media (prefers-reduced-motion: no-preference) {
    .topp-nav.aapen a {
      animation: meny-inn 0.45s var(--fjaer) both;
      animation-delay: var(--meny-forsinkelse, 0ms);
    }
  }

  /* Siden bak skal ikke kunne rulles mens menyen står åpen. */
  body.meny-apen { overflow: hidden; }
}

@keyframes meny-inn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- Seksjoner ---------- */

.seksjon { padding: 6.5rem 0; }
.seksjon-graa { background: var(--graa-flate); }

/* Seksjonsoverskrifter står midtstilt, slik som i skissen */
.seksjon-hode {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.seksjon-hode p { color: var(--graa-tekst); font-size: 1.08rem; }
.seksjon-hode :last-child { margin-bottom: 0; }


/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 5.5rem;
  color: var(--blekk);
  /* Varm krem til venstre, kjølig blålys til høyre – samme stemning som skissen */
  background:
    radial-gradient(58rem 34rem at 8% -6%, var(--krem) 0%, rgba(253, 247, 238, 0) 62%),
    radial-gradient(52rem 34rem at 95% 4%, #e8f1fb 0%, rgba(232, 241, 251, 0) 64%),
    var(--hvit);
}

/* Hårfint rutenett bak innholdet, tonet ut mot kantene */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 26, 36, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 26, 36, 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(78% 76% at 50% 26%, #000 0%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(78% 76% at 50% 26%, #000 0%, rgba(0, 0, 0, 0) 76%);
}

.hero > * { position: relative; }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Uten sidestilt foto står heroteksten midtstilt */
.hero:not(:has(.hero-foto)):not(.hero-forside) .hero-tekst {
  text-align: center;
  margin-inline: auto;
  max-width: 46rem;
}

.hero:not(:has(.hero-foto)):not(.hero-forside) .hero-tekst .ingress { margin-inline: auto; }
.hero:not(:has(.hero-foto)):not(.hero-forside) .hero-knapper { justify-content: center; }

/* Fotoet i heroen (faq, kontakt, om oss) glir inn etter teksten. Det brukte
   tidligere "hero-inn", som to @keyframes delte navn paa: den siste vant, og
   fotoet kom inn skalert og vridd som laptopen paa forsiden. Det har egne
   keyframes naa. Teksten styres av «Inngangsanimasjon» under. Startilstanden
   ligger bare i animasjonen ("backwards"), saa fotoet aldri blir staaende
   usynlig hvis animasjoner ikke kjoerer. */
@media (prefers-reduced-motion: no-preference) {
  .hero-foto { animation: hero-foto-inn 0.8s var(--fjaer) 0.2s backwards; }
}

@keyframes hero-foto-inn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
}

.hero-indre {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.hero:not(:has(.hero-foto)):not(.hero-forside) .hero-indre { display: block; }

.hero-tekst h1 { margin-bottom: 0.4em; }

.hero-tekst .ingress {
  font-size: 1.2rem;
  color: var(--graa-tekst);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}

.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Hindrer at bilder tvinger rutenettspaltene bredere enn skjermen */
.hero-indre > *, .delt > * { min-width: 0; }


/* ---------- Inngangsanimasjon ----------
   Ren CSS med forsinkelser. Ingen preloader: siden skal være lesbar med en
   gang, slik teksten lenger nede på forsiden lover. Ved reduced motion vises
   alt ferdig uten bevegelse. */

@media (prefers-reduced-motion: no-preference) {
  /* Gjelder heroen på alle sider, ikke bare forsiden: samme trappetrinn
     uansett om den inneholder to eller tre elementer. */
  .hero .hero-tekst > * { animation: hero-opp 0.7s var(--fjaer) both; }
  .hero .hero-tekst > *:nth-child(1) { animation-delay: 0.05s; }
  .hero .hero-tekst > *:nth-child(2) { animation-delay: 0.18s; }
  .hero .hero-tekst > *:nth-child(3) { animation-delay: 0.31s; }
  .hero .hero-tekst > *:nth-child(n+4) { animation-delay: 0.44s; }
}

@keyframes hero-opp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Laptopen i forsidens hero (forside.css, .hero-vippe). */
@keyframes hero-inn {
  from { opacity: 0; transform: scale(0.9) rotate(-1.5deg); }
  to   { opacity: 1; transform: none; }
}

/* scale/translate som egne egenskaper, ikke transform: da kolliderer de ikke
   med rotate: på glassformene, og de to animasjonene kan dele element. */
@keyframes hero-sprett {
  from { opacity: 0; scale: 0; }
  to   { opacity: 1; scale: 1; }
}

@keyframes hero-sveve {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}


/* ---------- Bilder i hero og delt felt, og hero på smale skjermer ---------- */

/* Fast bildeforhold: reserverer plass (ingen hopp ved lasting). Flaten
   bildet står på mens det lastes, er skjelettet i «Bilder som lastes». */
.hero-foto img, .delt-foto img, .artikkel img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hero-foto img { width: 100%; box-shadow: var(--skygge); }



@media (max-width: 820px) {
  .hero { padding: 3rem 0 3.5rem; }
  .hero-indre { grid-template-columns: 1fr; gap: 2rem; }
}


/* ---------- Tjenestekort ---------- */

/* Lysbilde 2: skogsgrønn */


/* Lysbilde 3: terrakotta */


/* Bærbar maskin: ytre skall i "aluminium" med egen inneramme (dobbeltkant) */


/* Fast skjermformat: da får alle lysbildene nøyaktig samme høyde på alle
   skjermbredder, uansett hvor mye innhold varianten inneholder. Det som ikke
   får plass klippes nederst – akkurat som en nettside fortsetter under bretten. */


/* Nettleserlinje med tre prikker */


/* Miniatyren av en nettside inni skjermen */


/* Variant: bredt toppbilde i stedet for todelt hero.
   Høyden settes med bildeforhold, ikke faste piksler, slik at lysbildet holder
   samme høyde som de andre variantene på alle skjermbredder. */


/* Variant: midtstilt tekstblokk */


/* Variant: bilde til venstre, tekst til høyre */


/* Foten på maskinen */


/* Mobilen som ligger foran til høyre */


.tjenester {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.tjeneste {
  display: flex;
  flex-direction: column;
  background: var(--hvit);
  border-radius: var(--radius-stor);
  padding: 2.1rem 1.9rem 2.2rem;
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
  transition: transform 0.6s var(--fjaer), box-shadow 0.6s var(--fjaer);
}

/* Loeftet selv ligger i «Felles bevegelsesspraak» (translate, ikke transform:
   avduk.js eier transform). Det sto ogsaa her som transform, og da loeftet
   kortet seg dobbelt, 8 px i stedet for 4. */
@media (hover: hover) and (pointer: fine) {
  .tjeneste:hover {
    box-shadow: inset 0 0 0 1px #d9dfe9, 0 2px 6px rgba(20, 26, 36, 0.05), 0 28px 56px -20px rgba(20, 26, 36, 0.22);
  }
}

.tjeneste h3 { margin-bottom: 0.4em; }
.tjeneste p { color: var(--graa-tekst); margin: 0; font-size: 1rem; }

/* Broedteksten vokser og skyver foten ned, i stedet for "margin-top: auto"
   paa foten selv: da holder kortene lik hoeyde uten at avstanden over
   streken kollapser naar teksten er kort. ":not(.tjeneste-fot)" maa staa
   her - uten den arver foten samme flex-grow og synker bare halvveis. */
.tjeneste > p:not(.tjeneste-fot):not(.tjeneste-merke) { flex: 1 1 auto; }

@media (max-width: 700px) {
  .tjenester { grid-template-columns: 1fr; gap: 1.2rem; }
}


/* ---------- Trinn (slik jobber vi) ---------- */

/* Like høye kort: i en sammenlikning ser ulik høyde ut som en feil */


/* Vår side får en hårfin blå ring og litt mer løft, uten å rope */


/* Kryss og hake i stedet for firkanten. Krysset holdes grått: den kjedelige
   spalten skal føles blass, ikke skrike med en farge som ikke finnes ellers.
   Merk: .punktliste må stå med i velgeren, ellers vinner den generelle
   .punktliste li::before lenger ned i filen (samme spesifisitet, senere regel). */


.trinn-liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
}

.trinn {
  position: relative;
  padding: 0 0 2.6rem 4.4rem;
}

.trinn:last-child { padding-bottom: 0; }

.trinn::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: 3rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--graa-linje);
}

.trinn:last-child::before { display: none; }

.trinn-tall {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  display: grid;
  place-items: center;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.trinn h3 { margin-bottom: 0.3em; padding-top: 0.55rem; }
.trinn p { color: var(--graa-tekst); margin: 0; max-width: 38rem; }

/* #28 Tidslinja i «Slik jobber vi» tegnes mens man ruller. Klassen .avduk
   settes bare av avduk.js, saa uten JS eller med redusert bevegelse staar
   linja og tallene ferdige. */
.trinn.avduk::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--fjaer) calc(var(--avduk-forsinkelse, 0ms) + 350ms);
}
.trinn.avduk-inne::before { transform: scaleY(1); }
.trinn.avduk .trinn-tall {
  transition: background-color 0.45s var(--fjaer) calc(var(--avduk-forsinkelse, 0ms) + 200ms),
              color 0.45s var(--fjaer) calc(var(--avduk-forsinkelse, 0ms) + 200ms);
}
.trinn.avduk-inne .trinn-tall { background: var(--blaa-flate); color: var(--paa-blaa); }


/* ---------- Delt bilde/tekst-felt ---------- */

.delt {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}

.delt-foto img { width: 100%; box-shadow: var(--skygge); }

.punktliste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}

.punktliste li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.9rem;
  color: var(--graa-tekst);
}

.punktliste li strong { color: var(--blekk); }

.punktliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
  background: var(--blaa);
}

@media (max-width: 820px) {
  .delt { grid-template-columns: 1fr; gap: 2rem; }
}


/* ---------- Bloggliste ---------- */

.innlegg-liste { list-style: none; margin: 0; padding: 0; }

.innlegg-liste li { border-top: 1px solid var(--graa-linje); }
.innlegg-liste li:last-child { border-bottom: 1px solid var(--graa-linje); }

.innlegg-lenke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 1.1rem;
  margin: 0 -1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.45s var(--fjaer);
}

.innlegg-lenke:hover { background: var(--blaa-lys); color: inherit; }

.innlegg-lenke h3 { margin: 0 0 0.25em; }
.innlegg-lenke:hover h3 { color: var(--blaa-moerk); }
.innlegg-lenke p { margin: 0; color: var(--graa-tekst); font-size: 0.98rem; max-width: 40rem; }

.innlegg-dato {
  flex-shrink: 0;
  color: var(--graa-tekst);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .innlegg-lenke { flex-direction: column; gap: 0.5rem; }
}


/* ---------- Spørsmål og svar (utvidbare felter) ---------- */

/* Hake i stedet for firkant inni planene */


/* Knappen skal alltid stå nederst, uansett hvor lang lista er */


/* Midterste plan løftes ut av rekka med forløpning og dypere skygge */


/* Merkelappen svever over kortkanten */


/* Appkortet staar alene. Uten dette ville det arvet tre kolonner og blitt
   staaende i venstre tredjedel med to hull ved siden av. */


/* Fire kort på rad (tjenestesiden). Kortene har ingen prisrad, så de tåler
   å være smalere enn planene. Reglene står etter 900px-blokka over, slik at
   de vinner på alle bredder. */


/* Litt høyere enn standard: smalere kort gir flere linjer i ingressen,
   og "Dette kan vi gjøre:" skal stå på samme høyde i alle fire. */


.faq-liste {
  max-width: 46rem;
  margin: 0 auto;
  border-top: 1px solid var(--graa-linje);
}

.faq { border-bottom: 1px solid var(--graa-linje); }

.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.15rem 2.4rem 1.15rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  transition: color 0.3s var(--fjaer);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--blaa-moerk); }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blaa);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.45s var(--fjaer);
}

.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq div {
  padding: 0 0 1.3rem;
  color: var(--graa-tekst);
  max-width: 42rem;
}

/* Svaret glir aapent og igjen i stedet for aa hoppe. Ren CSS:
   ::details-content er beholderen nettleseren selv legger rundt innholdet i
   <details>, og interpolate-size lar hoeyden animeres til "auto".
   Nettlesere som ikke kan det, aapner og lukker som foer, uten bevegelse. */
.faq { interpolate-size: allow-keywords; }
.faq::details-content { block-size: 0; overflow-y: clip; }
.faq[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .faq::details-content {
    transition: block-size 0.42s var(--fjaer), content-visibility 0.42s allow-discrete;
  }
  .faq div { opacity: 0; translate: 0 -6px; transition: opacity 0.3s ease-out, translate 0.42s var(--fjaer); }
  .faq[open] div { opacity: 1; translate: none; }
}

.faq div p { margin: 0 0 0.8em; }
.faq div p:last-child { margin-bottom: 0; }

/* #20 FAQ-filter */
.faq-filter { max-width: 46rem; margin: 0 auto 1.6rem; display: grid; gap: 0.4rem; }
.faq-filter label { font-weight: 600; }
.faq-filter input {
  font: inherit;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid #d7dce6;
  background: var(--hvit);
  color: var(--blekk);
}
.faq-filter input:focus-visible { outline: none; border-color: var(--blaa); box-shadow: 0 0 0 3px rgba(36, 86, 200, 0.18); }
.faq-antall { margin: 0; min-height: 1.4em; font-size: 0.9rem; color: var(--graa-tekst); }
.faq[hidden] { display: none; }


/* ---------- Blått oppfordringsbånd ---------- */

/* Båndet går fra kant til kant: seksjonen bærer forløpningen, .ramme holder
   innholdet på plass. .oppfordring er dermed bare typografi og luft. */
.seksjon-band {
  padding: 0;
  /* Var --forloep, som ender paa #5cc6da: hvit tekst der maaler 1,99:1 og
     stryker paa AA. --forloep-tekst holder 5,01:1 i det lyseste punktet. */
  background: var(--forloep-tekst);
}

.oppfordring {
  color: var(--paa-blaa);
  padding: 5rem 0;
  text-align: center;
}

.oppfordring h2 {
  color: var(--paa-blaa);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 0.5em;
}
.oppfordring p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
  margin: 0 auto 2rem;
}


/* ---------- Ring meg tilbake ----------
   Navn og telefon, ingenting mer. Står i det blå båndet på forsida
   (varianten ligger i forside.css) og på lys flate på kontaktsida. */

/* #7 «Ring meg tilbake» i det blaa bandet */
.ring-tilbake {
  max-width: 40rem;
  margin: 2.6rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: left;
}
.ring-tilbake-felt {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.8rem;
  align-items: start;
}
.ring-tilbake-rad { display: grid; gap: 0.3rem; min-width: 0; }
.ring-tilbake label { font-size: 0.85rem; font-weight: 600; color: var(--paa-blaa); }
.ring-tilbake input {
  font: inherit;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--hvit);
  color: var(--blekk);
}
.ring-tilbake input::placeholder { color: #6b7585; }
.ring-tilbake input:focus-visible { outline: 3px solid var(--paa-blaa); outline-offset: 2px; }
.ring-tilbake input[aria-invalid="true"] { border-color: #ffd1d1; box-shadow: 0 0 0 2px #ffd1d1; }
.ring-tilbake-send { align-self: end; min-height: 3rem; margin-top: 1.55rem; }
.ring-tilbake-info a { color: var(--paa-blaa); }
.ring-tilbake-felle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
  .ring-tilbake-felt { grid-template-columns: 1fr; }
  .ring-tilbake-send { margin-top: 0.2rem; width: 100%; }
}

/* #7 «Ring meg tilbake» paa lys flate */
.ring-tilbake-lys {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding: 2rem 1.9rem;
  border-top: 0;
  border-radius: var(--radius-stor);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.ring-tilbake-lys .ring-tilbake-overskrift { margin: 0 0 0.3rem; }
.ring-tilbake-lys .ring-tilbake-tittel { margin: 0 0 1rem; color: var(--graa-tekst); }
.ring-tilbake-lys label { color: var(--blekk); }
.ring-tilbake-lys input { border-color: #d7dce6; }
.ring-tilbake-lys input:focus-visible { outline-color: var(--blaa); }
.ring-tilbake-lys input[aria-invalid="true"] { border-color: #c02626; box-shadow: none; }
.ring-tilbake-lys .ring-tilbake-feil { margin: 0; font-size: 0.86rem; color: #b42318; font-weight: 600; }
.ring-tilbake-lys .ring-tilbake-info { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--graa-tekst); }
.ring-tilbake-lys .ring-tilbake-info a { color: var(--blaa); }
.ring-tilbake-lys .ring-tilbake-status { margin: 0.6rem 0 0; font-weight: 600; color: var(--blekk); }


/* ---------- Artikkel (blogg + juridiske sider) ---------- */

.artikkel { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }

.artikkel-meta {
  color: var(--graa-tekst);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.artikkel .ingress { font-size: 1.15rem; color: var(--graa-tekst); }

.artikkel h2 { margin-top: 2.2em; font-size: 1.65rem; }
.artikkel h3 { margin-top: 1.8em; }

.artikkel img { margin: 2rem 0; box-shadow: var(--skygge); }

.artikkel ul, .artikkel ol { padding-left: 1.4rem; color: var(--graa-tekst); }
.artikkel li { margin-bottom: 0.5rem; }

.artikkel-boks {
  background: var(--graa-flate);
  border-radius: var(--radius-stor);
  padding: 1.8rem 2rem;
  margin-top: 3rem;
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}

.artikkel-boks h2, .artikkel-boks h3 { margin-top: 0; }
.artikkel-boks p:last-child { margin-bottom: 0; }

/* #36 Innholdsfortegnelse i artiklene */
.artikkel-innhold {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.artikkel-innhold-tittel {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graa-tekst);
}
.artikkel-innhold ol { margin: 0; padding-left: 1.2rem; }
.artikkel-innhold li { margin: 0.25rem 0; font-size: 0.95rem; }
.artikkel-innhold a { color: var(--blekk); text-decoration: none; }
.artikkel-innhold a:hover { color: var(--blaa); text-decoration: underline; }
.artikkel-innhold a[aria-current="true"] { color: var(--blaa); font-weight: 700; }

/* Paa brede skjermer flytter fortegnelsen ut i margen og blir staaende.
   Tre kolonner, saa selve teksten fortsatt staar midt paa sida. */
@media (min-width: 1200px) {
  .artikkel:has(.artikkel-innhold) {
    max-width: 78rem;
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 46rem) minmax(0, 15rem);
    column-gap: 2.5rem;
    align-items: start;
  }
  .artikkel:has(.artikkel-innhold) > * { grid-column: 2; }
  .artikkel:has(.artikkel-innhold) > .artikkel-innhold {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: 6.5rem;
    margin: 0;
    background: none;
    box-shadow: none;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--graa-linje);
  }
}


/* ---------- Kontakt ---------- */

.kontakt-epost {
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 600;
  margin: 0.5rem 0 0.6rem;
  word-break: break-all;
}

.kontakt-tlf {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.kontakt-tlf a { text-decoration: none; }


/* ---------- Bunnfelt ---------- */

.bunn {
  background: var(--graa-flate);
  border-top: 1px solid var(--graa-linje);
  padding: 4rem 0 2rem;
  color: var(--graa-tekst);
  font-size: 0.97rem;
}

.bunn-indre {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.bunn h3 {
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blekk);
  margin-bottom: 1em;
}

.bunn-merke {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
}

.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin-bottom: 0.6rem; }

.bunn a { color: var(--graa-tekst); text-decoration: none; transition: color 0.3s var(--fjaer); }
.bunn a:hover { color: var(--blaa); }

.bunn-linje {
  border-top: 1px solid var(--graa-linje);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  font-size: 0.9rem;
}

.bunn-linje ul { display: flex; gap: 1.5rem; }
.bunn-linje li { margin: 0; }

@media (max-width: 860px) {
  .bunn-indre { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 560px) {
  .bunn-indre { grid-template-columns: 1fr; gap: 2rem; }
}


/* ---------- Avduking (styres av js/avduk.js) ---------- */

.avduk {
  opacity: 0;
  transform: translateY(24px);
}

.avduk-inne {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
              transform 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms);
}


/* ---------- Felles bevegelsesspråk ----------
   Samme vokabular som heroen bruker, brukt sparsomt ellers på siden:
   sprett på små dekorelementer når kortet deres avdukes, og et løft ved
   hover. Alt ligger bak "no-preference", så en bruker som har bedt om
   mindre bevegelse får den rolige siden uten noe av dette. */

@media (prefers-reduced-motion: no-preference) {

  /* Små merker og ikoner spretter inn etter at kortet har glidd på plass.
     Forsinkelsen legger seg etter avdukingens egen forsinkelse, slik at
     sprettet kommer i kjølvannet av kortet og ikke samtidig. */
  .avduk-inne .tjeneste-ikon,
.avduk-inne .trinn-tall,
.avduk-inne .strek {
    animation: hero-sprett 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--avduk-forsinkelse, 0ms) + 260ms);
  }

  /* Kort løftes mot leseren ved hover, som lenkene i toppfeltet.
     Bare på ekte pekerhover – ellers henger effekten igjen etter et trykk. */
  @media (hover: hover) and (pointer: fine) {
    /* Løftet bruker "translate" som egen egenskap, ikke "transform".
       Avdukingen eier transform, og to regler på samme egenskap ville
       kollidert når kortet både avdukes og hoveres.
       Hele transition-listen gjentas her fordi denne regelen ellers
       erstatter den fra ".avduk-inne", og kortene ville mistet inntoningen. */
    .tjeneste,
.artikkel-boks,
.innlegg-lenke {
      transition:
        opacity 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
        transform 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
        translate 0.4s var(--fjaer),
        box-shadow 0.4s var(--fjaer);
    }

    .tjeneste:hover,
.artikkel-boks:hover,
.innlegg-lenke:hover {
      translate: 0 -4px;
    }
  }

  /* Paa beroeringsskjerm finnes ingen hover. Kort som er lenker, gir litt
     etter under fingeren, saa man ser at trykket ble tatt imot. Hele
     transition-listen gjentas av samme grunn som over. */
  @media (hover: none) {
    .tjenestekort,
    .innlegg-lenke {
      transition:
        opacity 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
        transform 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
        scale 0.2s var(--fjaer),
        background-color 0.45s var(--fjaer);
    }
    .tjenestekort:active,
    .innlegg-lenke:active { scale: 0.98; }
  }
}


/* ---------- Undermeny under "Tjenester" ----------
   Apnes ved hover og ved :focus-within, sa den virker med tastatur uten JS.
   Pa mobil ligger den apen i fullskjermmenyen - der er det plass, og en
   skjult meny inni en meny er bare et hinder til. */

/* Avdukingen selv beholder transform til seg selv. Sprettet over bruker
   "scale" som egen egenskap nettopp for at de to ikke skal overskrive
   hverandre på samme element. */


.topp-nav-gruppe { position: relative; display: flex; align-items: center; }

.topp-undermeny {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  z-index: 12;
  margin: 0;
  padding: 0.5rem;
  min-width: 15rem;
  list-style: none;
  transform: translateX(-50%) translateY(-6px);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
  opacity: 0;
  visibility: hidden;
  /* Lukking: raskt og samlet, uten trappetrinn. */
  transition: opacity 0.16s ease-out, transform 0.16s ease-out,
              visibility 0s linear 0.16s;
}

/* Usynlig bro opp til lenka, sa menyen ikke lukkes i mellomrommet. */
.topp-undermeny::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9rem;
  height: 0.9rem;
}

.topp-nav-gruppe:hover .topp-undermeny,
.topp-nav-gruppe:focus-within .topp-undermeny {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s var(--fjaer), transform 0.3s var(--fjaer),
              visibility 0s linear 0s;
}

.topp-undermeny a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--graa-tekst);
  text-decoration: none;
  white-space: nowrap;
  /* Glir inn rad for rad når nedtrekket åpnes, i samme takt og kurve som
     panelet. Utgangspunktet er skjult – men bare på store skjermer, se
     min-width-blokken under. Lukking går samlet og uten forsinkelse. */
  transform: translateY(-4px);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out,
              background-color 0.2s var(--fjaer), color 0.2s var(--fjaer);
}

@media (min-width: 821px) {
  .topp-undermeny a { opacity: 0; }

  .topp-nav-gruppe:hover .topp-undermeny a,
  .topp-nav-gruppe:focus-within .topp-undermeny a {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s var(--fjaer), transform 0.3s var(--fjaer),
                background-color 0.2s var(--fjaer), color 0.2s var(--fjaer);
  }

  /* Trappetrinn per rad, ikke per lenke: i to kolonner kommer naboene
     samtidig. Forsinkelsen sitter bare paa aapen tilstand, saa lukking
     ikke henger etter panelet. Egen min-width-blokk fordi :nth-child er
     mer spesifikk enn ".topp-undermeny a" og ellers ville slaatt
     mobil-overstyringen. KOBLING: ti tjenester i verktoy/deler/topp.html;
     en ellevte trenger en ny linje her. */
  .topp-nav-gruppe:hover .topp-undermeny li:nth-child(n+3) a,
  .topp-nav-gruppe:focus-within .topp-undermeny li:nth-child(n+3) a { transition-delay: 0.03s; }
  .topp-nav-gruppe:hover .topp-undermeny li:nth-child(n+5) a,
  .topp-nav-gruppe:focus-within .topp-undermeny li:nth-child(n+5) a { transition-delay: 0.06s; }
  .topp-nav-gruppe:hover .topp-undermeny li:nth-child(n+7) a,
  .topp-nav-gruppe:focus-within .topp-undermeny li:nth-child(n+7) a { transition-delay: 0.09s; }
  .topp-nav-gruppe:hover .topp-undermeny li:nth-child(n+9) a,
  .topp-nav-gruppe:focus-within .topp-undermeny li:nth-child(n+9) a { transition-delay: 0.12s; }
}

.topp-undermeny a:hover,
.topp-undermeny a:focus-visible {
  background: var(--graa-flate);
  color: var(--blekk);
}


/* ---------- Hub-kortene pa tjenestesiden ---------- */

.tjenestekort-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
}

.tjenestekort {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
  text-decoration: none;
  color: inherit;
}

/* Korta ligger under seksjonens h2 (tjenester.html) eller under
   «Passer ofte sammen med» (tjenestesidene), saa de er h3. Stoerrelsen
   settes her, saa de ser ut som kort og ikke som seksjonsoverskrifter. */
.tjenestekort h3 {
  margin-bottom: 0.4em;
  font-size: 1.25rem;
  font-weight: 650;
}
.tjenestekort p { color: var(--graa-tekst); font-size: 0.99rem; margin-bottom: 1.2rem; }

.tjenestekort-pil {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blaa);
}

.tjenestekort:hover .tjenestekort-pil { color: var(--blaa-moerk); }

/* Pilspissen skyves fram ved hover, som paa forsidens tjenestekort. */
.tjenestekort-pilspiss { display: inline-block; transition: translate 0.3s var(--fjaer); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tjenestekort:hover .tjenestekort-pilspiss { translate: 4px 0; }
}


/* #35 «Passer ofte sammen med»: to kort, midtstilt. Overskriftsstilen
   deler de med hub-korta paa tjenester.html (.tjenestekort h3 over). */
.tjenestekort-par { grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); justify-content: center; }
.tjenestekort-par-fot { text-align: center; margin: 2rem 0 0; }


/* ---------- Brodsmuler ---------- */

/* Overskriftene i de tre ikonkortene var lenker, men regelen her siktet paa
   "h2 a" mens markupen alltid har vaert h3 - den traff ingenting, og
   lenkene sto med nettleserens standard blaa understrek. Lenka er flyttet
   ned i ".tjeneste-fot"; overskriften er ren tekst. */


.brodsmuler {
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
  color: var(--graa-tekst);
}
.brodsmuler a { color: var(--graa-tekst); text-decoration: none; }
.brodsmuler a:hover { color: var(--blaa); text-decoration: underline; }
.brodsmuler span[aria-hidden] { margin: 0 0.4rem; opacity: 0.6; }

@media (hover: hover) and (pointer: fine) {
  .tjenestekort {
    transition: opacity 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
                transform 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
                translate 0.4s var(--fjaer),
                box-shadow 0.4s var(--fjaer);
  }
  .tjenestekort:hover { translate: 0 -4px; }
}

@media (max-width: 820px) {
  /* Understreken hører til den vannrette menyen; i fullskjermmenyen har
     lenkene sin egen kantlinje. */
  .topp-nav a:not(.knapp)::after { display: none; }

  /* Undermenyen ligger åpen og innrykket, uten trappetrinn. */
  .topp-nav-gruppe { display: block; }
  .topp-undermeny a { opacity: 1; transform: none; transition-delay: 0s; }
  .topp-undermeny {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    min-width: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .topp-undermeny::before { display: none; }
  .topp-undermeny a {
    padding: 0.6rem 0 0.6rem 1.1rem;
    border-bottom: 1px solid rgba(20, 26, 36, 0.07);
    border-radius: 0;
    font-family: "Lato", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--graa-tekst);
  }
}

/* Tjenestene innrykket under "Tjenester" i bunnfeltet */
.bunn-tjenester > ul {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--graa-linje);
}
.bunn-tjenester li { margin-bottom: 0.45rem; font-size: 0.93rem; }


/* ---------- Tjenesteikoner ----------
   Ikonene kommer fra Heroicons (MIT) og Lucide (ISC), lastet ned og lagt inn
   som <symbol> i img/ikoner/tjenester.svg. Se img/ikoner/KILDER.md.
   De arver farge fra teksten, saa de folger lenkens tilstand av seg selv. */

/* I nedtrekket og i bunnfeltet: liten, foran navnet */
.topp-undermeny a,
.bunn-tjenester a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tjenesteikon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--blaa);
  opacity: 0.85;
  transition: opacity 0.2s var(--fjaer), transform 0.3s var(--fjaer);
}

.topp-undermeny a:hover .tjenesteikon,
.topp-undermeny a:focus-visible .tjenesteikon {
  opacity: 1;
  transform: scale(1.12);
}

/* Bunnfeltet er rolig; ingen bevegelse der. */
.bunn-tjenester .tjenesteikon { color: var(--graa-tekst); opacity: 0.7; transition: none; }
.bunn-tjenester a:hover .tjenesteikon { color: var(--blaa); opacity: 1; }

/* Paa hub-kortene: stoerre, i en myk flate over overskriften */
.tjenestekort-ikon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius);
  background: var(--blaa-lys);
  color: var(--blaa);
  transition: background-color 0.35s var(--fjaer), color 0.35s var(--fjaer);
}

.tjenestekort-ikon svg { width: 1.5rem; height: 1.5rem; }

@media (hover: hover) and (pointer: fine) {
  .tjenestekort:hover .tjenestekort-ikon {
    background: var(--blaa-flate);
    color: var(--paa-blaa);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tjenesteikon, .tjenestekort-ikon { transition: none; }
  .topp-undermeny a:hover .tjenesteikon { transform: none; }
}


/* ---------- Undermeny i to kolonner ---------- */

.undermeny-navn { font-weight: 600; }

@media (min-width: 901px) {
  .topp-undermeny {
    display: grid;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    column-gap: 0.4rem;
    min-width: 26rem;
  }
}


/* ---------- Teamet ----------
   Bygget for aa vokse: rutenettet tar imot flere kort uten endringer, men
   ser ikke tomt ut med ett. Derfor midtstilles det og kortet faar en
   maksbredde, i stedet for aa strekke seg over hele raden. */

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem;
  justify-content: center;
}

.teammedlem {
  max-width: 26rem;
  margin-inline: auto;
  padding: 2.2rem 2rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
  text-align: center;
}

/* Staar i stedet for portrettet inntil et ekte bilde er paa plass. */
.teammedlem-initialer {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--forloep);
  color: var(--paa-blaa);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.teammedlem h3 { margin-bottom: 0.2em; }

.teammedlem-rolle {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blaa);
  margin-bottom: 1em;
}

.teammedlem p { color: var(--graa-tekst); }

.teammedlem-kontakt {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--graa-linje);
}

.teammedlem-kontakt li { margin-bottom: 0.4rem; font-size: 0.97rem; }
.teammedlem-kontakt li:last-child { margin-bottom: 0; }
.teammedlem-kontakt a { text-decoration: none; }
.teammedlem-kontakt a:hover { text-decoration: underline; }

.team-fot { max-width: 34rem; margin: 2.5rem auto 0; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .teammedlem { transition: translate 0.4s var(--fjaer), box-shadow 0.4s var(--fjaer); }
  .teammedlem:hover { translate: 0 -4px; }
}

/* Fagfeltene under beskrivelsen: smaa piller, ikke en punktliste. */
.teammedlem-felt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}

.teammedlem-felt li {
  padding: 0.32rem 0.75rem;
  border-radius: var(--pille);
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}


/* ---------- Feilside (404) ----------

   Tallet er dekor og ligger i aria-hidden, saa en skjermleser sier
   "Denne siden finnes ikke" og ikke "fire null fire". */

.feilkode {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: var(--forloep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tre lenkespalter. auto-fit gjoer at de legger seg under hverandre paa
   mobil uten et eget bruddpunkt. */
.feilsider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.6rem;
  align-items: start;
}

.feilside-gruppe {
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}

.feilside-gruppe h3 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.feilside-gruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feilside-gruppe li + li { margin-top: 0.55rem; }

.feilside-gruppe a {
  color: var(--graa-tekst);
  text-decoration: none;
  /* Understreken ligger som bakgrunn, saa den kan vokse fra venstre
     uten aa flytte teksten. */
  background-image: linear-gradient(var(--blaa), var(--blaa));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color 0.3s var(--fjaer), background-size 0.35s var(--fjaer);
}

.feilside-gruppe a:hover,
.feilside-gruppe a:focus-visible {
  color: var(--blaa);
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .feilside-gruppe a { transition: color 0.3s var(--fjaer); }
  .feilside-gruppe a:hover,
  .feilside-gruppe a:focus-visible { background-size: 0 1px; }
}


/* ---------- Kontaktskjema ---------- */

.skjema {
  max-width: 46rem;
  margin: 0 auto;
  display: grid;
  gap: 1.15rem;
}

.skjema-noscript {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--blaa-lys);
  color: var(--blekk);
}

/* To felt ved siden av hverandre paa brede skjermer, under hverandre paa
   smale. auto-fit gjoer det uten et eget bruddpunkt. */
.skjema-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.15rem;
}

.skjema-felt { display: grid; gap: 0.4rem; }

.skjema-felt label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blekk);
}

.skjema-valgfri {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--graa-tekst);
}

.skjema-felt input,
.skjema-felt textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background: var(--hvit);
  font-family: inherit;
  font-size: 1rem;
  color: var(--blekk);
  transition: border-color 0.25s var(--fjaer), box-shadow 0.25s var(--fjaer);
}

.skjema-felt textarea { resize: vertical; min-height: 8rem; }

.skjema-felt input::placeholder,
.skjema-felt textarea::placeholder { color: #8a94a4; }

.skjema-felt input:hover,
.skjema-felt textarea:hover { border-color: #c9d1de; }

.skjema-felt input:focus-visible,
.skjema-felt textarea:focus-visible {
  outline: none;                 /* erstattes av rammen og glorien under */
  border-color: var(--blaa);
  box-shadow: 0 0 0 3px rgba(36, 86, 200, 0.18);
}

/* Feil markeres med farge OG tekst - fargen alene er ikke nok for den
   som ikke skiller roedt fra graatt. */
.skjema-felt input[aria-invalid="true"],
.skjema-felt textarea[aria-invalid="true"] { border-color: #c02626; }

.skjema-hjelp,
.skjema-feil {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.skjema-hjelp { color: var(--graa-tekst); }

.skjema-feil {
  color: #a81f1f;
  font-weight: 700;
}

/* Tekstvariant av varseltrekanten, ikke emoji-varianten. */
/* Tekstvariant av varseltrekanten, ikke emoji-varianten. */
.skjema-feil::before { content: "\26A0\FE0E"; margin-right: 0.4rem; }

/* Avkryssingsboks og etikett deler ett treffomraade, uten doede soner
   mellom dem. */
.skjema-avkryssing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background: var(--graa-flate);
}

.skjema-avkryssing input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--blaa);
  cursor: pointer;
}

.skjema-avkryssing label {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--graa-tekst);
  cursor: pointer;
}

.skjema-avkryssing:focus-within {
  border-color: var(--blaa);
  box-shadow: 0 0 0 3px rgba(36, 86, 200, 0.14);
}

.skjema-bunn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
}

.skjema-send { border: 0; cursor: pointer; font-family: inherit; }
.skjema-send[disabled] { cursor: progress; opacity: 0.75; }

.skjema-fot { margin: 0; }

/* Snurrende ring mens forespoerselen er i gang. */
.skjema-send-jobber .skjema-send-tekst::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.55em;
  vertical-align: -0.1em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--paa-blaa);
  border-radius: 50%;
  animation: skjema-snurr 0.7s linear infinite;
}

@keyframes skjema-snurr { to { transform: rotate(360deg); } }

.skjema-status {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.5;
}

.skjema-status-ok   { background: #eaf7ee; color: #1b6b33; }
.skjema-status-feil { background: #fdeceb; color: #a81f1f; }
.skjema-status-info { background: var(--blaa-lys); color: var(--blaa-moerk); }

@media (prefers-reduced-motion: reduce) {
  .skjema-felt input,
  .skjema-felt textarea { transition: none; }
  .skjema-send-jobber .skjema-send-tekst::after { animation-duration: 2s; }
}


/* #4 Hva kunden spurte om */
.skjema-valgt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--blaa-lys);
  border: 1px solid #cddbf5;
}
.skjema-valgt[hidden] { display: none; }
.skjema-valgt-tekst { margin: 0; color: var(--blekk); }
.skjema-valgt-fjern {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blaa-moerk);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.2rem 0;
  cursor: pointer;
}
.skjema-valgt-fjern:focus-visible { outline: 3px solid var(--blaa); outline-offset: 3px; }
.skjema-felle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }


/* ---------- Samtykke til informasjonskapsler ----------

   Avvis og Godta er identiske i stoerrelse, farge og vekt. Et nedtonet
   avslag ved siden av en fargesterk godta-knapp er den vanligste maaten aa
   gjoere et samtykke ufritt paa, og den er lett aa gjenkjenne naar noen
   ser etter den.

   Banneret dekker ikke sida og har ingen bakgrunnsplate: man kan lese
   ferdig og bla videre uten aa svare. En kapselvegg er ikke et fritt valg. */

.samtykke {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  display: flex;
  justify-content: center;
  pointer-events: none;   /* bare kortet tar imot klikk, ikke luften rundt */
}

.samtykke-boks {
  pointer-events: auto;
  width: min(44rem, 100%);
  box-sizing: border-box;
  padding: 1.5rem 1.7rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  border: 1px solid var(--graa-linje);
  box-shadow: 0 2px 8px rgba(20, 26, 36, 0.06),
              0 24px 60px -20px rgba(20, 26, 36, 0.35);
  animation: samtykke-inn 0.5s var(--fjaer) both;
}

@keyframes samtykke-inn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.samtykke-hode {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.samtykke-ikon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--blaa);
}

.samtykke-tittel {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.samtykke-boks p {
  margin: 0 0 0.85rem;
  color: var(--graa-tekst);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 60ch;
}

.samtykke-lenke {
  display: inline-block;
  margin-bottom: 1.15rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.samtykke-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Lik bredde, lik vekt, lik farge, lik ramme. Eneste forskjell er ordet. */
.samtykke-knapp {
  flex: 1 1 11rem;
  min-height: 2.9rem;          /* komfortabelt treffomraade paa berooering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--blaa);
  background: var(--hvit);
  color: var(--blaa-moerk);
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.samtykke-knapp:hover {
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
}

.samtykke-tilpass {
  display: block;
  width: 100%;
  margin: 0.95rem 0 0;
  padding: 0.55rem 0.2rem;
  border: 0;
  background: none;
  color: var(--graa-tekst);
  font-family: inherit;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.samtykke-tilpass:hover { color: var(--blekk); }

/* ---- detaljert dialog ---- */
.samtykke-overlegg {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 26, 36, 0.45);
  overscroll-behavior: contain;
  animation: samtykke-tone 0.3s var(--fjaer) both;
}

@keyframes samtykke-tone { from { opacity: 0; } to { opacity: 1; } }

body.samtykke-laast { overflow: hidden; }

.samtykke-dialog {
  position: relative;
  width: min(48rem, 100%);
  max-height: min(85vh, 48rem);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.9rem;
  padding-bottom: max(1.9rem, env(safe-area-inset-bottom));
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: var(--skygge-loft);
}

.samtykke-ingress { font-size: 1.02rem; max-width: 62ch; }

.samtykke-kategori {
  margin: 1.3rem 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background: var(--graa-flate);
}

.samtykke-kategori-hode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.samtykke-kategori-hode h3 { margin: 0; flex: 1 1 auto; font-size: 1.08rem; }

.samtykke-alltid {
  padding: 0.22rem 0.65rem;
  border-radius: var(--pille);
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Bryteren og etiketten er ett treffomraade, uten doede soner imellom. */
.samtykke-bryter {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--blaa);
  cursor: pointer;
}

.samtykke-bryter-etikett {
  padding: 0.35rem 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blekk);
  cursor: pointer;
}

.samtykke-kategori:focus-within {
  border-color: var(--blaa);
  box-shadow: 0 0 0 3px rgba(36, 86, 200, 0.14);
}

.samtykke-forklaring { margin: 0 0 0.85rem; font-size: 0.94rem; color: var(--graa-tekst); }

.samtykke-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  /* Smal skjerm: la tabellen rulle i sin egen boks i stedet for aa dytte
     hele dialogen bredere. */
  display: block;
  overflow-x: auto;
}

.samtykke-tabell th,
.samtykke-tabell td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--graa-linje);
}

.samtykke-tabell th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graa-tekst);
}

.samtykke-tabell code { font-size: 0.85rem; word-break: break-all; }

.samtykke-type { display: block; font-size: 0.78rem; color: var(--graa-tekst); }

.samtykke-fotnote { font-size: 0.9rem; color: var(--graa-tekst); max-width: 62ch; }

.samtykke-lukk {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--graa-tekst);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.samtykke-lukk:hover { background: var(--graa-flate); color: var(--blekk); }

@media (max-width: 560px) {
  .samtykke-knapp { flex: 1 1 100%; }
  .samtykke-boks { padding: 1.25rem 1.2rem; }
  .samtykke-dialog { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .samtykke-boks,
  .samtykke-overlegg { animation: none; }
}


/* ---------- Portaldemo (kundeportal.html) ---------- */

/* #18 Portaldemo. Fanene styres av js/faner.js; js/portaldemo.js legger paa
   pillen som glir bak den valgte fanen, glidende hoeyde, adresselinja og
   tall som teller opp. Inntoningen av hvert panel er ren CSS lenger ned:
   en animasjon starter paa nytt hver gang et panel gaar fra hidden til synlig.
   Statusfargene er portalens egne (DESIGN-FRA-NETTSIDEN.md i WebDesign
   Dashboard): Ferdig groenn, Under arbeid gul, Mottatt graa. */
.portaldemo {
  max-width: 56rem;
  margin: 0 auto;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), 0 2px 6px rgba(20, 26, 36, 0.04), 0 40px 80px -36px rgba(36, 86, 200, 0.35);
  overflow: hidden;
}
.portaldemo-topp {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: var(--graa-flate);
  border-bottom: 1px solid var(--graa-linje);
}
.portaldemo-prikk { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #d5dae3; }
.portaldemo-prikk:nth-child(1) { background: #f0a9a0; }
.portaldemo-prikk:nth-child(2) { background: #f3d08a; }
.portaldemo-prikk:nth-child(3) { background: #9fd5b0; }
.portaldemo-adresse {
  margin-left: 0.8rem;
  padding: 0.2rem 0.8rem;
  border-radius: var(--pille);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
  font-size: 0.8rem;
  color: var(--graa-tekst);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fanene: en pillerad som i galleriet paa systemer.html og i portalen. */
.portaldemo-faner {
  position: relative;
  display: flex;
  gap: 0.2rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0;
  padding: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--pille);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.portaldemo-faner[hidden] { display: none; }
.portaldemo-faner::-webkit-scrollbar { display: none; }
.portaldemo-faner [role="tab"] {
  position: relative;
  z-index: 1;
  flex: none;
  white-space: nowrap;
  min-height: 2.6rem;
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: var(--pille);
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--graa-tekst);
  cursor: pointer;
  transition: color 0.3s var(--fjaer), background-color 0.3s var(--fjaer);
}
.portaldemo-faner [role="tab"]:hover { color: var(--blekk); background: rgba(20, 26, 36, 0.04); }
.portaldemo-faner [role="tab"][aria-selected="true"] { color: var(--blaa-moerk); background: none; }
.portaldemo-faner [role="tab"]:focus-visible { outline: 3px solid var(--blaa); outline-offset: -3px; }
/* Uten markoeren (skriptet ikke lastet) faar den valgte fanen egen bakgrunn. */
.portaldemo-faner:not(.har-markor) [role="tab"][aria-selected="true"] {
  background: var(--hvit);
  box-shadow: 0 1px 2px rgba(20, 26, 36, 0.08), 0 6px 16px -8px rgba(20, 26, 36, 0.25);
}
.portaldemo-markor {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 0;
  border-radius: var(--pille);
  background: var(--hvit);
  box-shadow: 0 1px 2px rgba(20, 26, 36, 0.08), 0 6px 16px -8px rgba(20, 26, 36, 0.3);
}
.portaldemo-markor.klar { transition: transform 0.5s var(--fjaer), width 0.5s var(--fjaer); }

.portaldemo-flate { position: relative; }
.portaldemo-flate.glir { overflow: hidden; }
.portaldemo-panel { padding: 1.5rem 1.6rem 1.8rem; }
.portaldemo-panel:focus-visible { outline: 3px solid var(--blaa); outline-offset: -3px; }
/* Uten faner staar panelene under hverandre, adskilt av en strek. */
.portaldemo:not([data-faner-aktiv]) .portaldemo-panel + .portaldemo-panel { border-top: 1px solid var(--graa-linje); }
.portaldemo[data-faner-aktiv] .portaldemo-paneltittel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.portaldemo-paneltittel { font-size: 1.1rem; margin-bottom: 1rem; }
.portaldemo-undertittel { margin: 0 0 0.6rem; font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graa-tekst); }
.portaldemo-saker + .portaldemo-undertittel,
.portaldemo-maler + .portaldemo-undertittel,
.portaldemo-soyler + .portaldemo-undertittel { margin-top: 1.5rem; }
.portaldemo-ref { font-size: 0.82rem; }

/* Live-telleren oeverst i statistikken. */
.portaldemo-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.25rem 0.8rem 0.25rem 0.65rem;
  border-radius: var(--pille);
  background: #dcf1e4;
  color: #1d6a43;
  font-size: 0.85rem;
  font-weight: 700;
}
.portaldemo-puls { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.25); }

/* Noekkeltall: fire kort som loefter seg naar man peker paa dem. */
.portaldemo-tall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.portaldemo-tall > div {
  position: relative;
  padding: 0.95rem 1rem 1rem;
  border-radius: var(--radius);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px transparent;
  overflow: hidden;
  transition: background-color 0.35s var(--fjaer), box-shadow 0.35s var(--fjaer), translate 0.35s var(--fjaer);
}
/* En tynn blaa strek som tegnes langs toppen ved hover. */
.portaldemo-tall > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--forloep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--fjaer);
}
.portaldemo-tall > div:hover {
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), 0 14px 30px -14px rgba(36, 86, 200, 0.35);
  translate: 0 -3px;
}
.portaldemo-tall > div:hover::before { transform: scaleX(1); }
.portaldemo-tall dt { font-size: 0.85rem; color: var(--graa-tekst); }
.portaldemo-tall dd { margin: 0.1rem 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.9rem; font-weight: 600; color: var(--blekk); font-variant-numeric: tabular-nums; transition: color 0.35s var(--fjaer); }
.portaldemo-tall > div:hover dd:not(.portaldemo-under) { color: var(--blaa-moerk); }
.portaldemo-tall .portaldemo-under { margin-top: 0.2rem; font-family: inherit; font-size: 0.8rem; font-weight: 400; line-height: 1.4; color: var(--graa-tekst); }
.portaldemo-opp {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: var(--pille);
  background: #dcf1e4;
  font-weight: 700;
  color: #1d6a43;
}

/* Soeylene. Boblen over hver soeyle er ekte tekst (ikke bare pynt), saa
   skjermlesere faar tallet; den vises for oeyet ved hover. */
.portaldemo-soyler {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 0.6rem;
  height: 11rem;
  margin: 0;
  padding: 1.6rem 0 0;
  background: linear-gradient(var(--graa-linje), var(--graa-linje)) no-repeat 0 calc(100% - 1.6rem) / 100% 1px;
}
.portaldemo-soyler li {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.portaldemo-soyler li::before {
  content: "";
  width: 100%;
  height: var(--h);
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #5a88e6, var(--blaa));
  transform-origin: bottom;
  transition: opacity 0.3s var(--fjaer), filter 0.3s var(--fjaer);
}
.portaldemo-soyler:hover li::before { opacity: 0.4; }
.portaldemo-soyler li:hover::before { opacity: 1; filter: brightness(1.12) saturate(1.1); }
.portaldemo-dag { margin-top: 0.45rem; font-size: 0.78rem; color: var(--graa-tekst); transition: color 0.3s var(--fjaer); }
.portaldemo-soyler li:hover .portaldemo-dag { color: var(--blekk); font-weight: 700; }
.portaldemo-boble {
  position: absolute;
  bottom: calc(var(--h) + 2.2rem);
  left: 50%;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: var(--blekk);
  color: var(--hvit);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 0.25s var(--fjaer), transform 0.35s var(--fjaer);
}
.portaldemo-boble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--blekk);
}
.portaldemo-soyler li:hover .portaldemo-boble { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Radlistene: henvendelser, saker, status, «Vi trenger fra deg». */
.portaldemo-status, .portaldemo-saker, .portaldemo-leads, .portaldemo-logg { list-style: none; margin: 0; padding: 0; }
.portaldemo-status li, .portaldemo-saker li, .portaldemo-leads li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 -0.75rem;
  padding: 0.8rem 0.75rem;
  border-radius: var(--radius);
  box-shadow: inset 0 -1px 0 var(--graa-linje);
  color: var(--graa-tekst);
  font-size: 0.93rem;
  transition: background-color 0.3s var(--fjaer), box-shadow 0.3s var(--fjaer), translate 0.3s var(--fjaer);
}
.portaldemo-status li:last-child, .portaldemo-saker li:last-child, .portaldemo-leads li:last-child { box-shadow: none; }
.portaldemo-status li:hover, .portaldemo-saker li:hover, .portaldemo-leads li:hover {
  background: var(--graa-flate);
  box-shadow: none;
  translate: 3px 0;
}
.portaldemo-status strong, .portaldemo-saker strong, .portaldemo-leads strong { color: var(--blekk); }
.portaldemo-saker li { justify-content: space-between; }

.portaldemo-klokke {
  flex: none;
  min-width: 3.6rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--pille);
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.portaldemo-lampe { position: relative; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.portaldemo-ok { background: #1f9d55; box-shadow: 0 0 0 4px #dcf1e4; }

.portaldemo-sakstatus {
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: var(--pille);
  background: #e6ebf3;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4a5568;
}
.portaldemo-ferdig { background: #dcf1e4; color: #1d6a43; }
.portaldemo-arbeid { background: #fbe9c9; color: #85560a; }
.portaldemo-info { background: var(--blaa-lys); color: var(--blaa-moerk); }

/* De ferdige sakskjemaene, vist som piller. Pynt: de gjoer ingenting. */
.portaldemo-maler { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.portaldemo-maler li {
  padding: 0.45rem 0.95rem;
  border-radius: var(--pille);
  border: 1px solid var(--graa-linje);
  background: var(--hvit);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blekk);
  transition: background-color 0.3s var(--fjaer), border-color 0.3s var(--fjaer), color 0.3s var(--fjaer), translate 0.3s var(--fjaer), box-shadow 0.3s var(--fjaer);
}
.portaldemo-maler li:hover {
  border-color: var(--blaa);
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  translate: 0 -2px;
  box-shadow: 0 8px 18px -10px rgba(36, 86, 200, 0.5);
}
.portaldemo-maler li:last-child { border-style: dashed; color: var(--graa-tekst); }

/* «Oppdateringer»: en tidslinje med dato, type og en kort tekst. */
.portaldemo-logg li {
  position: relative;
  margin-left: 0.3rem;
  padding: 0 0 1.3rem 1.4rem;
  border-left: 2px solid var(--graa-linje);
  font-size: 0.93rem;
  color: var(--graa-tekst);
}
.portaldemo-logg li:last-child { padding-bottom: 0.2rem; border-left-color: transparent; }
.portaldemo-logg li::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--hvit);
  box-shadow: inset 0 0 0 3px var(--blaa);
  transition: background-color 0.3s var(--fjaer), transform 0.4s var(--fjaer);
}
.portaldemo-logg li:hover::before { background: var(--blaa); transform: scale(1.25); }
.portaldemo-logg strong { display: block; margin-top: 0.3rem; color: var(--blekk); transition: color 0.3s var(--fjaer); }
.portaldemo-logg li:hover strong { color: var(--blaa-moerk); }
.portaldemo-logg p { margin: 0.15rem 0 0; }
.portaldemo-logg .portaldemo-sakstatus { margin-left: 0.4rem; font-size: 0.75rem; }

/* Bevegelsen. Alt bak "no-preference", og panelanimasjonene venter paa at
   avduk.js har tonet inn demoen (.avduk-inne), eller staar uten avduking
   naar demoen var i foerste skjermbilde. */
@media (prefers-reduced-motion: no-preference) {
  .portaldemo-adresse.byttet { animation: portaldemo-adresse 0.45s var(--fjaer); }

  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) > * {
    animation: portaldemo-inn 0.55s var(--fjaer) both;
  }
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) > :nth-child(3) { animation-delay: 0.05s; }
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) > :nth-child(4) { animation-delay: 0.1s; }
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) > :nth-child(5) { animation-delay: 0.15s; }
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) > :nth-child(n+6) { animation-delay: 0.2s; }

  /* Radene og kortene inni panelet kommer ett og ett. */
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) :is(.portaldemo-tall > div, .portaldemo-status > li, .portaldemo-saker > li, .portaldemo-leads > li, .portaldemo-logg > li, .portaldemo-maler > li) {
    animation: portaldemo-inn 0.55s var(--fjaer) both;
    animation-delay: calc(0.08s + var(--n, 0) * 0.06s);
  }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(2) { --n: 1; }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(3) { --n: 2; }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(4) { --n: 3; }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(5) { --n: 4; }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(6) { --n: 5; }
  .portaldemo-panel :is(.portaldemo-tall > div, ul > li, ol > li):nth-child(7) { --n: 6; }

  /* Soeylene vokser opp fra grunnlinja, hver gang statistikken vises. */
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) .portaldemo-soyler li::before {
    animation: portaldemo-vokse 0.9s var(--fjaer) both;
    animation-delay: calc(0.15s + var(--n, 0) * 0.05s);
  }

  /* Lampene og live-prikken pulserer tre ganger naar panelet vises. */
  :is(.portaldemo[data-faner-aktiv]:not(.avduk), .portaldemo.avduk-inne) .portaldemo-panel:not([hidden]) :is(.portaldemo-puls, .portaldemo-lampe) {
    animation: portaldemo-puls 1.8s ease-out 0.4s 3;
  }

  @keyframes portaldemo-inn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes portaldemo-vokse {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
  @keyframes portaldemo-puls {
    0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.5); }
    100% { box-shadow: 0 0 0 10px rgba(31, 157, 85, 0); }
  }
  @keyframes portaldemo-adresse {
    from { opacity: 0.2; transform: translateX(-4px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .portaldemo-markor.klar,
  .portaldemo-tall > div,
  .portaldemo-tall > div::before { transition: none; }
}

/* Funksjonskortene under demoen («Dette faar du i portalen»). */
.portalfunksjoner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.4rem;
}
.portalfunksjon {
  position: relative;
  padding: 1.8rem 1.7rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
}
.portalfunksjon h3 { margin-bottom: 0.45em; font-size: 1.2rem; font-weight: 650; }
.portalfunksjon p { margin: 0; color: var(--graa-tekst); font-size: 0.98rem; }
/* Loeftet bruker "translate", ikke "transform", som tjenestekortene: avduk.js
   eier transform, og hele transition-listen gjentas av samme grunn. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .portalfunksjon {
    transition: opacity 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
                transform 0.8s var(--fjaer) var(--avduk-forsinkelse, 0ms),
                translate 0.4s var(--fjaer),
                box-shadow 0.4s var(--fjaer);
  }
  .portalfunksjon:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge-loft); }
}

/* To spalter med lister av ulik lengde: toppjustert, ikke midtstilt. */
.portaldelt { align-items: start; }

@media (max-width: 760px) {
  .portaldemo-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .portaldemo-panel { padding: 1.3rem 1.1rem 1.5rem; }
  .portaldemo-faner { margin: 0.8rem 0.8rem 0; max-width: calc(100% - 1.6rem); }
  .portaldemo-adresse { margin-left: 0.4rem; }
  .portaldemo-soyler { gap: 0.35rem; }
}


/* ---------- Bransjesider (nettside-for-*.html) ---------- */

.bransjelenker ul,
.bransje-andre ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.bransjelenker a,
.bransje-andre a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--pille);
  border: 1px solid var(--graa-linje);
  background: var(--hvit);
  color: var(--blekk);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.bransjelenker a:hover,
.bransje-andre a:hover { border-color: var(--blaa); color: var(--blaa-moerk); }

/* #41 Bransjesider */
.bransje-eksempel { margin: 0; }
.bransje-eksempel img { width: 100%; border-radius: var(--radius-stor); box-shadow: var(--skygge); }
.bransje-eksempel figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--graa-tekst); text-align: center; }

.bransje-punkter {
  list-style: none;
  counter-reset: bransje;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}
.bransje-punkt {
  counter-increment: bransje;
  position: relative;
  padding: 1.6rem 1.5rem 1.6rem 4.2rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
}
.bransje-punkt::before {
  content: counter(bransje);
  position: absolute;
  left: 1.3rem;
  top: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 700;
}
.bransje-punkt h3 { font-size: 1.12rem; margin-bottom: 0.35em; }
.bransje-punkt p { margin: 0; color: var(--graa-tekst); }

.bransje-feilliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.bransje-feil {
  padding: 1.5rem;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  border-left: 4px solid #d97706;
  box-shadow: var(--skygge);
}
.bransje-feil h3 { font-size: 1.08rem; margin-bottom: 0.35em; }
.bransje-feil p { margin: 0; color: var(--graa-tekst); }

.bransje-pakke {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
  border-radius: var(--radius-stor);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.bransje-pakke-merke {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blaa-moerk);
}
.bransje-pakke h2 { margin-bottom: 0.4em; }
.bransje-pakke-pris { display: block; margin-top: 0.2rem; font-family: "Lato", system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: var(--graa-tekst); }
.bransje-pakke p { color: var(--graa-tekst); max-width: 40rem; }
.bransje-app { margin-bottom: 0; }
.bransje-pakke-knapper { display: flex; flex-direction: column; gap: 0.6rem; }
@media (max-width: 800px) {
  .bransje-pakke { grid-template-columns: 1fr; padding: 1.6rem; }
  .bransje-pakke-knapper { flex-direction: row; flex-wrap: wrap; }
}
.bransje-andre { text-align: center; }
.bransje-andre h2 { font-size: 1.4rem; margin-bottom: 1rem; }


/* ---------- Ordliste ---------- */

/* #43 Ordliste */
.ordliste-hopp { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 2rem; font-size: 0.92rem; }
.ordliste { margin: 0; }
.ordliste-post { padding: 1.1rem 0; border-bottom: 1px solid var(--graa-linje); scroll-margin-top: 6rem; }
.ordliste-post:target { background: var(--blaa-lys); padding-inline: 0.8rem; border-radius: var(--radius); }
.ordliste dt { font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--blekk); }
.ordliste dd { margin: 0.3rem 0 0; color: var(--graa-tekst); }


/* ---------- Sjekk nettsiden ---------- */

/* #17 Sjekk nettsiden din */
.sjekk { max-width: 46rem; margin: 0 auto; }
.sjekk-spm { border: 0; margin: 0 0 1rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-stor); background: var(--hvit); box-shadow: inset 0 0 0 1px var(--graa-linje); min-width: 0; }
.sjekk-spm legend { float: left; width: 100%; padding: 0; margin-bottom: 0.8rem; font-weight: 600; color: var(--blekk); }
.sjekk-spm legend + * { clear: both; }
.sjekk-nr {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.4rem;
  border-radius: 8px;
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  font-size: 0.9rem;
}
.sjekk-valg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sjekk-valg label {
  flex: 1 1 7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--graa-linje);
  cursor: pointer;
}
.sjekk-valg label:has(input:checked) { border-color: var(--blaa); background: var(--blaa-lys); }
.sjekk-valg label:has(input:focus-visible) { outline: 3px solid var(--blaa); outline-offset: 2px; }
.sjekk-valg input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--blaa); }
.sjekk-send { margin-top: 0.6rem; }
.sjekk-send[hidden] { display: none; }
.sjekk-noscript { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--blaa-lys); }
.sjekk-resultat {
  margin: 1.6rem 0 1rem;
  padding: 1.8rem;
  border-radius: var(--radius-stor);
  background: var(--graa-flate);
  border-left: 5px solid var(--blaa);
}
.sjekk-resultat:focus { outline: none; }
.sjekk-resultat:focus-visible { outline: 3px solid var(--blaa); outline-offset: 3px; }
.sjekk-god { border-left-color: #1f9d55; }
.sjekk-ok { border-left-color: #d97706; }
.sjekk-lav { border-left-color: #c02626; }
.sjekk-poeng { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--blekk); }
.sjekk-tittel { margin: 0.3rem 0 1rem; font-size: 1.5rem; }
.sjekk-raad { margin: 0 0 1.4rem; padding-left: 1.2rem; color: var(--graa-tekst); }
.sjekk-raad li { margin-bottom: 0.5rem; }
.sjekk-mangler { margin: 0; font-weight: 600; }


/* ---------- Sidebytte ----------
   Overgang mellom sider uten en linje JavaScript. Nettlesere som ikke kan
   det, bytter side som foer. Toppfeltet har eget navn og blir staaende,
   mens innholdet under toner over. */

/* Det loeftede kortet ligger paa blaa forloepning. Den globale
   fokusmarkeringen er ogsaa blaa, og ville forsvunnet i bakgrunnen -
   her maa den vaere hvit for aa vaere synlig i det hele tatt. */


@view-transition { navigation: auto; }

.topp { view-transition-name: topp; }

/* Den gamle sida toner raskt ut, den nye toner inn og glir 8 px opp.
   Toppfeltet har eget navn og staar stille imens. */
::view-transition-old(root) { animation: sidebytte-ut 0.16s ease-out both; }
::view-transition-new(root) { animation: sidebytte-inn 0.34s var(--fjaer) both; }

@keyframes sidebytte-ut { to { opacity: 0; } }
@keyframes sidebytte-inn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* ---------- Handlingslinje, driftsstatus, lyskjegle og «Til toppen» (js/felles.js) ---------- */

/* #6 Handlingslinje paa mobil. Skjult med visibility, ikke bare flyttet ut av
   syne: da faller lenkene ut av tabrekkefoelgen naar linja ikke vises. */
.handlingslinje {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem max(0.9rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -1px 0 var(--graa-linje), 0 -10px 30px -12px rgba(20, 26, 36, 0.25);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.35s var(--fjaer), visibility 0s linear 0.35s;
}
@media (max-width: 700px) {
  .handlingslinje { display: flex; }
}
/* En sides egen linje (priser.html) gjelder også på nettbrett, der
   kvitteringen står under valgene og ikke ved siden av. js/felles.js leser
   bare om linja er display: none, så brytepunktet står her og ingen andre
   steder. */
@media (max-width: 960px) {
  .handlingslinje-bred { display: flex; }
}
.handlingslinje-tekst {
  flex: 1 1 auto;
  align-self: center;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--graa-tekst);
}
.handlingslinje-sum { display: block; font-size: 1.05rem; font-weight: 700; color: var(--blekk); font-variant-numeric: tabular-nums; }
.handlingslinje.synlig {
  transform: none;
  visibility: visible;
  transition: transform 0.35s var(--fjaer), visibility 0s;
}
.handlingslinje-knapp {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: var(--pille);
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
.handlingslinje-ring { background: var(--hvit); color: var(--blekk); box-shadow: inset 0 0 0 1px #d7dce6; }
.handlingslinje-pris { background: var(--blaa-flate); color: var(--paa-blaa); }
.handlingslinje-knapp:focus-visible { outline: 3px solid var(--blaa); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .handlingslinje, .handlingslinje.synlig { transition: none; }
}

/* #14 Driftsstatus i bunnfeltet */
.bunn-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: inherit;
}
.bunn-status[hidden] { display: none; }
.bunn-status-lampe {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
}
.bunn-status-avvik { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }

/* «Til toppen». Lages av felles.js (del 5) og vises naar man har rullet et
   stykke ned paa en lang side. Ringen rundt fylles etter hvor langt ned paa
   sida man er (ren CSS, animation-timeline); uten stoette staar knappen uten
   ring. Paa mobil har handlingslinja plassen nederst, saa der vises den ikke. */
@property --fremdrift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.til-toppen {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hvit);
  color: var(--blekk);
  box-shadow: inset 0 0 0 1px var(--graa-linje), 0 12px 28px -12px rgba(20, 26, 36, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  scale: 0.9;
  transition: opacity 0.3s var(--fjaer), translate 0.4s var(--fjaer), scale 0.4s var(--fjaer),
              visibility 0s linear 0.4s, background-color 0.25s var(--fjaer), color 0.25s var(--fjaer);
}
.til-toppen.synlig {
  opacity: 1;
  visibility: visible;
  translate: none;
  scale: 1;
  transition: opacity 0.3s var(--fjaer), translate 0.4s var(--fjaer), scale 0.4s var(--fjaer),
              visibility 0s, background-color 0.25s var(--fjaer), color 0.25s var(--fjaer);
}
.til-toppen svg { width: 1.15rem; height: 1.15rem; transition: translate 0.3s var(--fjaer); }
.til-toppen:hover { background: var(--blekk); color: var(--hvit); }
.til-toppen:active { scale: 0.94; }
.til-toppen:focus-visible { outline: 3px solid var(--blaa); outline-offset: 3px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .til-toppen:hover svg { translate: 0 -2px; }
}
@supports (animation-timeline: scroll()) {
  .til-toppen::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--blaa) calc(var(--fremdrift) * 1%), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: til-toppen-fremdrift linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}
@keyframes til-toppen-fremdrift { to { --fremdrift: 100; } }
@media (max-width: 700px) {
  .til-toppen { display: none; }
}
/* Nederst paa sida ville knappen ligget over lenkene til hoeyre i bunnlinja.
   Over 1320 px staar rammen langt nok inn fra kanten til at det ikke skjer. */
@media (min-width: 701px) and (max-width: 1320px) {
  .bunn-linje { padding-right: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .til-toppen, .til-toppen.synlig, .til-toppen svg { transition: none; }
}

/* #29 Lyskjegle som foelger pekeren. Variablene settes bare av felles.js paa
   ekte pekerenheter; uten dem ligger lyset langt utenfor kortet. */
.tjeneste,
.tjenestekort {
  background-image: radial-gradient(26rem circle at var(--lys-x, -60rem) var(--lys-y, -60rem),
                                    rgba(36, 86, 200, 0.075), transparent 60%);
}


/* ---------- Systemskisse ----------
   Et lite dashbord tegnet i CSS: sidemeny, nøkkeltall, søyler og tabell.
   Brukes i laptopen på forsiden, der js/hero.js viser det, og i galleriet
   på systemer.html (css/systemer.css). Alle mål står i cqi - prosent av
   skissens egen bredde - så den ser lik ut i begge størrelsene. Ren pynt: alltid aria-hidden. */

.systemskisse {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 17% minmax(0, 1fr);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f7fc;
}

.systemskisse-meny {
  display: flex;
  flex-direction: column;
  gap: 2.4cqi;
  padding: 4cqi 2.6cqi;
  background: #1d2433;
}
.systemskisse-meny b {
  width: 5cqi;
  height: 5cqi;
  margin-bottom: 1.8cqi;
  border-radius: 1.4cqi;
  background: var(--blaa);
}
.systemskisse-meny i {
  height: 1cqi;
  border-radius: 1cqi;
  background: rgba(255, 255, 255, 0.2);
}
.systemskisse-meny i:first-of-type { width: 80%; background: rgba(255, 255, 255, 0.62); }

.systemskisse-hoved {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 2.2cqi;
  padding: 3.4cqi 3.6cqi;
  min-width: 0;
}

.systemskisse-topp { display: flex; align-items: center; justify-content: space-between; }
.systemskisse-topp span:first-child {
  width: 24cqi;
  height: 1.9cqi;
  border-radius: 1cqi;
  background: #c6cdd9;
}
.systemskisse-topp span:last-child {
  width: 4.4cqi;
  height: 4.4cqi;
  border-radius: 50%;
  background: #dfe4ec;
}

.systemskisse-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; }
.systemskisse-tall span {
  display: flex;
  flex-direction: column;
  gap: 1.3cqi;
  padding: 2.2cqi;
  border-radius: 1.6cqi;
  background: var(--hvit);
  box-shadow: inset 0 0 0 0.16cqi #e6eaf1;
}
.systemskisse-tall b {
  width: 52%;
  height: 2.6cqi;
  border-radius: 0.8cqi;
  background: #3a4252;
}
.systemskisse-tall span:nth-child(2) b { background: var(--blaa); }
.systemskisse-tall i {
  width: 78%;
  height: 1cqi;
  border-radius: 1cqi;
  background: #dfe4ec;
}

.systemskisse-graf {
  display: flex;
  align-items: flex-end;
  gap: 1.8cqi;
  min-height: 0;
  padding: 2.4cqi 2.6cqi 0;
  border-radius: 1.6cqi;
  background: var(--hvit);
  box-shadow: inset 0 0 0 0.16cqi #e6eaf1;
}
.systemskisse-graf i {
  flex: 1;
  border-radius: 0.8cqi 0.8cqi 0 0;
  background: #c9d6f2;
  transform-origin: bottom;
}
.systemskisse-graf i:nth-child(1) { height: 38%; }
.systemskisse-graf i:nth-child(2) { height: 56%; }
.systemskisse-graf i:nth-child(3) { height: 44%; }
.systemskisse-graf i:nth-child(4) { height: 70%; }
.systemskisse-graf i:nth-child(5) { height: 60%; }
.systemskisse-graf i:nth-child(6) { height: 88%; background: var(--blaa); }
.systemskisse-graf i:nth-child(7) { height: 74%; }

.systemskisse-tabell { display: grid; gap: 1.2cqi; }
.systemskisse-tabell span {
  position: relative;
  height: 3cqi;
  border-radius: 0.8cqi;
  background: var(--hvit);
  box-shadow: inset 0 0 0 0.16cqi #e6eaf1;
}
.systemskisse-tabell span::before,
.systemskisse-tabell span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 1cqi;
}
.systemskisse-tabell span::before { left: 2cqi; width: 34%; height: 0.9cqi; background: #dfe4ec; }
.systemskisse-tabell span::after { right: 2cqi; width: 7cqi; height: 1.4cqi; background: #d3ecdd; }
.systemskisse-tabell span:nth-child(2)::after { background: #fbe6c2; }

@keyframes skisse-soyle {
  from { transform: scaleY(0.12); }
  to   { transform: none; }
}

/* «I dag» og «Med et system» side om side på systemer.html. Det første
   kortet er grått med grå prikker; det andre har tjenestens blå ramme. */
.foer-etter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.4rem;
}
.foer-etter-kort {
  padding: 1.9rem 1.7rem 1.1rem;
  border-radius: var(--radius-stor);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.foer-etter-kort h3 { margin: 0; }
.foer-etter-kort:not(.foer-etter-etter) .punktliste li::before { background: #c3cad6; border-radius: 50%; }
.foer-etter-etter {
  background: var(--hvit);
  box-shadow: inset 0 0 0 2px var(--blaa), var(--skygge);
}


/* ---------- Bilder som lastes: skjelett og inntoning (js/felles.js) ----------
   Hvert bilde staar paa et skjelett fra foerste maling: en graa flate med et
   lite bildeikon og en lysstripe som glir over. Det er ren CSS paa selve
   <img>, saa det virker foer skriptene og uten dem; et bilde som er lastet,
   dekker flaten.

   felles.js (del 4) gjoer resten. Er bildet ferdig naar skriptet kjoerer,
   faar det .bilde-klar og skjelettet slaas av. Er det ikke det, legges det i
   en .bilde-ramme med det samme skjelettet, bildet gjoeres usynlig, og naar
   det er lastet og dekodet tones det raskt inn over rammen. Rammen trengs
   fordi opacity alltid gjelder hele elementet: et bilde kan ikke tones inn
   over sin egen bakgrunn.

   Ingen data:-URL til ikonet: img-src er 'self'. */
img,
.bilde-ramme {
  background-color: #edf0f5;
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%),
    url("../img/ikoner/bilde.svg");
  background-repeat: no-repeat;
  background-size: 250% 100%, 2.75rem;
  background-position: 150% 0, 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  /* Tolv runder er rundt tjue sekunder. Uten skript stopper lysstripa da av
     seg selv, i stedet for aa male om under hvert eneste lastede bilde. */
  img,
  .bilde-ramme { animation: bilde-skjelett 1.7s ease-in-out 12; }
  .bilde-ramme > img { transition: opacity 0.35s ease-out, scale 0.6s var(--fjaer); }
}
@keyframes bilde-skjelett {
  0% { background-position: 150% 0, 50% 50%; }
  70%, 100% { background-position: -50% 0, 50% 50%; }
}

.bilde-ramme { display: block; }
img.bilde-klar,
.bilde-ramme.bilde-ferdig { background: none; animation: none; }
img.bilde-venter { opacity: 0; scale: 1.02; background: none; animation: none; }
/* Et bilde som ikke kom, blir staaende som en rolig graa flate med ikonet. */
img.bilde-feil,
.bilde-ramme.bilde-feil { animation: none; background-image: url("../img/ikoner/bilde.svg"); background-size: 2.75rem; background-position: 50% 50%; }

/* Rammen tar over margen bildet hadde der den skal ligge utenfor flaten. */
.artikkel .bilde-ramme { margin: 2rem 0; }
.artikkel .bilde-ramme > img { margin: 0; }


/* ---------- Mørk drakt og draktbryteren ----------
   js/tema.js setter data-tema="lys" eller "moerk" på <html> før første
   bilde: lagret valg, ellers systemets innstilling. Bryteren øverst til
   høyre bytter og lagrer. Det meste skjer
   ved at tokenene i :root får nye verdier; reglene under tar det som er
   skrevet med faste farger (miniatyrskjermene, statusmerkene, rutenett og
   frostede flater).

   Overstyringene står bak :where(), som ikke teller i spesifisiteten. En
   regel her veier altså like mye som den den overstyrer og vinner bare på
   rekkefølgen, så :hover og :focus i originalen slår fortsatt gjennom.
   Alt står i @media screen: utskrift blir alltid lys.

   forside.css, priser.css og systemer.css har hver sin tilsvarende blokk
   nederst for det bare de bruker. */

/* Den mørke utgaven av hvert bransjeeksempel er skjult til mørk drakt er
   på (regelen står i @media screen lenger ned). Gjelder også .bilde-ramme
   rundt bildet (js/felles.js gir rammen samme klasse). :root gjør at regelen
   slår ".eksempel img" (seksjon 41) og .bilde-ramme. */
:root .eksempel-moerk { display: none; }

/* Bryteren. Skjult uten JS, for da er det ingen som kan bytte. */
.tema-knapp {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--graa-linje);
  border-radius: 50%;
  background: transparent;
  color: var(--blekk);
  cursor: pointer;
  transition: background-color 0.3s var(--fjaer), border-color 0.3s var(--fjaer), color 0.3s var(--fjaer);
}
.tema-knapp:hover { border-color: var(--blaa); color: var(--blaa); }
html:not([data-tema]) .tema-knapp { display: none; }

/* Sola og månen ligger oppå hverandre; den som ikke gjelder, roterer ut.
   Styres av data-tema og ikke aria-pressed: data-tema står der før første
   bilde, aria-pressed først når dokumentet er lest, og da ville ikonet
   snurret om ved hver sidelasting. */
.tema-knapp svg {
  grid-area: 1 / 1;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s var(--fjaer), transform 0.45s var(--fjaer);
}
.tema-maane { opacity: 0; transform: rotate(-70deg) scale(0.5); }
[data-tema="moerk"] .tema-sol { opacity: 0; transform: rotate(70deg) scale(0.5); }
[data-tema="moerk"] .tema-maane { opacity: 1; transform: none; }

/* Tre synlige ting i toppfeltet nå (logo, meny, bryter). Uten disse
   marginene ville space-between lagt menyen midt på. */
@media (min-width: 821px) {
  .topp-nav { margin-left: auto; }
}
@media (max-width: 820px) {
  .meny-knapp { margin-left: auto; }
  /* Over fullskjermsmenyen, som menyknappen, så man kan bytte med den åpen. */
  .tema-knapp { position: relative; z-index: 30; }
}

/* Selve byttet er en View Transition (js/tema.js): den nye drakta vokser
   ut som en sirkel fra bryteren, oppå et stillestående bilde av den gamle.
   Sirkelen animeres fra JS, fordi midtpunktet er der bryteren står. Mens
   .tema-bytter står på <html>:
   - kobles sidebytte-animasjonen ut (seksjonen «Sidebytte»), så det gamle
     bildet blir liggende urørt under sirkelen i stedet for å tone ut;
   - mister toppfeltet sitt eget lag, så sirkelen feier over det også. */
.tema-bytter .topp { view-transition-name: none; }
.tema-bytter::view-transition-old(root),
.tema-bytter::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  .tema-knapp, .tema-knapp svg { transition: none; }
}

@media screen {
  /* Kontrast mot --hvit (#111821): blekk 15,6:1, graa-tekst 7,4:1,
     blaa 7,2:1, blaa-moerk 10,3:1. Hvit tekst på --blaa-flate 5,3:1. */
  :root[data-tema="moerk"] {
    color-scheme: dark;
    --blaa: #7da5ff;
    --blaa-moerk: #a9c3ff;
    --blaa-lys: #172446;
    --blaa-flate: #2f63d6;
    --blaa-flate-moerk: #3d72e8;
    --blekk: #e7ebf2;
    --graa-tekst: #a1abbb;
    --graa-linje: #253041;
    --graa-flate: #0c1118;
    --krem: #1b1710;
    --hvit: #111821;
    --skygge: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -10px rgba(0, 0, 0, 0.55);
    --skygge-loft: 0 2px 6px rgba(0, 0, 0, 0.4), 0 28px 64px -16px rgba(47, 99, 214, 0.45);
  }

  :where([data-tema="moerk"]) a { text-decoration-color: rgba(125, 165, 255, 0.4); }
  :where([data-tema="moerk"]) .tema-knapp:hover { background: var(--graa-flate); }

  /* Pilen i logoens X: blaa mot moerk flate blir for svak, saa den faar
     samme cyan som pilen i merket. Bokstavene foelger --blekk av seg selv. */
  :where([data-tema="moerk"]) .logo-ord { color: var(--cyan); }

  /* Knapper. Den mørke pilleknappen snur til lys, med mørk tekst. */
  :where([data-tema="moerk"]) .knapp-moerk:hover { background: #ffffff; }
  :where([data-tema="moerk"]) .knapp-lys:hover { box-shadow: inset 0 0 0 1px #3a4658, 0 6px 18px -8px rgba(0, 0, 0, 0.5); }
  /* Står på det blå båndet, som er blått i begge draktene. */
  :where([data-tema="moerk"]) .knapp-hvit { background: #ffffff; color: #1a419c; }
  :where([data-tema="moerk"]) .knapp-hvit:hover { background: #e8effc; color: #1a419c; }

  /* Toppfeltet og undermenyen */
  :where([data-tema="moerk"]) .topp.festet,
  :where([data-tema="moerk"]) .topp.uten-js { background-color: rgba(14, 19, 27, 0.84); }
  :where([data-tema="moerk"]) .topp.festet { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -20px rgba(0, 0, 0, 0.7); }
  /* Bare som nedtrekk; i mobilmenyen har undermenyen ingen flate. */
  @media (min-width: 821px) {
    :where([data-tema="moerk"]) .topp-undermeny { background: rgba(17, 24, 33, 0.97); }
  }

  @media (max-width: 820px) {
    :where([data-tema="moerk"]) .topp-nav {
      background-color: #0d1119;
      background-image:
        radial-gradient(58% 42% at 14% 12%, rgba(88, 80, 190, 0.32) 0%, rgba(88, 80, 190, 0) 62%),
        radial-gradient(52% 38% at 88% 18%, rgba(150, 110, 60, 0.18) 0%, rgba(150, 110, 60, 0) 64%),
        radial-gradient(66% 46% at 78% 88%, rgba(47, 99, 214, 0.28) 0%, rgba(47, 99, 214, 0) 66%),
        radial-gradient(48% 34% at 22% 84%, rgba(120, 90, 200, 0.22) 0%, rgba(120, 90, 200, 0) 62%),
        linear-gradient(180deg, #0f141d 0%, #0b0f16 100%);
    }
    :where([data-tema="moerk"]) .topp-nav::before { opacity: 0.3; }
    :where([data-tema="moerk"]) .topp-nav a,
    :where([data-tema="moerk"]) .topp-nav a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, 0.09); }
    :where([data-tema="moerk"]) .topp-undermeny a { border-bottom-color: rgba(255, 255, 255, 0.07); }
  }

  /* Hero: samme to lyskilder, dempet ned til glød. */
  :where([data-tema="moerk"]) .hero {
    background:
      radial-gradient(58rem 34rem at 8% -6%, var(--krem) 0%, rgba(27, 23, 16, 0) 62%),
      radial-gradient(52rem 34rem at 95% 4%, rgba(47, 99, 214, 0.16) 0%, rgba(47, 99, 214, 0) 64%),
      var(--hvit);
  }
  :where([data-tema="moerk"]) .hero::before {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  }

  :where([data-tema="moerk"]) .tjeneste:hover { box-shadow: inset 0 0 0 1px #34405a, 0 2px 6px rgba(0, 0, 0, 0.3), 0 28px 56px -20px rgba(0, 0, 0, 0.6); }
  :where([data-tema="moerk"]) .tjeneste,
  :where([data-tema="moerk"]) .tjenestekort {
    background-image: radial-gradient(26rem circle at var(--lys-x, -60rem) var(--lys-y, -60rem),
                                      rgba(125, 165, 255, 0.08), transparent 60%);
  }

  /* Skjemaer */
  :where([data-tema="moerk"]) .faq-filter input { border-color: #34405a; }
  /* Feltene på det blå båndet forblir hvite, som knappen ved siden av. */
  :where([data-tema="moerk"]) .ring-tilbake input { background: #ffffff; color: #141a24; }
  :where([data-tema="moerk"]) .ring-tilbake-lys input { background: var(--hvit); color: var(--blekk); border-color: #34405a; }
  :where([data-tema="moerk"]) .ring-tilbake-lys input::placeholder { color: #6f7a8c; }
  :where([data-tema="moerk"]) .ring-tilbake-lys input[aria-invalid="true"] { border-color: #f07167; }
  :where([data-tema="moerk"]) .ring-tilbake-lys .ring-tilbake-feil { color: #f4a199; }
  :where([data-tema="moerk"]) .skjema-felt input::placeholder,
  :where([data-tema="moerk"]) .skjema-felt textarea::placeholder { color: #6f7a8c; }
  :where([data-tema="moerk"]) .skjema-felt input:hover,
  :where([data-tema="moerk"]) .skjema-felt textarea:hover { border-color: #3a4658; }
  :where([data-tema="moerk"]) .skjema-felt input[aria-invalid="true"],
  :where([data-tema="moerk"]) .skjema-felt textarea[aria-invalid="true"] { border-color: #f07167; }
  :where([data-tema="moerk"]) .skjema-feil { color: #f4a199; }
  :where([data-tema="moerk"]) .skjema-status-ok { background: #12331f; color: #8fe0ad; }
  :where([data-tema="moerk"]) .skjema-status-feil { background: #3a1714; color: #f4a199; }
  :where([data-tema="moerk"]) .skjema-valgt { border-color: #2b3d6b; }

  :where([data-tema="moerk"]) .samtykke-overlegg { background: rgba(0, 0, 0, 0.6); }

  /* Portaldemoen */
  :where([data-tema="moerk"]) .portaldemo-prikk { background: #3a4454; }
  :where([data-tema="moerk"]) .portaldemo-faner [role="tab"]:hover { background: rgba(255, 255, 255, 0.05); }
  :where([data-tema="moerk"]) .portaldemo-live,
  :where([data-tema="moerk"]) .portaldemo-opp,
  :where([data-tema="moerk"]) .portaldemo-ferdig { background: #12331f; color: #8fe0ad; }
  :where([data-tema="moerk"]) .portaldemo-ok { box-shadow: 0 0 0 4px #12331f; }
  :where([data-tema="moerk"]) .portaldemo-sakstatus { background: #222a36; color: #aab4c5; }
  :where([data-tema="moerk"]) .portaldemo-arbeid { background: #3a2a0c; color: #f2c06b; }

  :where([data-tema="moerk"]) .handlingslinje { background: rgba(17, 24, 33, 0.96); box-shadow: 0 -1px 0 var(--graa-linje), 0 -10px 30px -12px rgba(0, 0, 0, 0.6); }
  :where([data-tema="moerk"]) .handlingslinje-ring { box-shadow: inset 0 0 0 1px #34405a; }

  /* Systemskissen: et mørkt dashbord i stedet for et lyst. */
  :where([data-tema="moerk"]) .systemskisse { background: #0d131c; }
  :where([data-tema="moerk"]) .systemskisse-meny { background: #070a10; }
  :where([data-tema="moerk"]) .systemskisse-topp span:first-child { background: #3a4454; }
  :where([data-tema="moerk"]) .systemskisse-topp span:last-child,
  :where([data-tema="moerk"]) .systemskisse-tall i,
  :where([data-tema="moerk"]) .systemskisse-tabell span::before { background: #2a3342; }
  :where([data-tema="moerk"]) .systemskisse-tall span,
  :where([data-tema="moerk"]) .systemskisse-graf,
  :where([data-tema="moerk"]) .systemskisse-tabell span { box-shadow: inset 0 0 0 0.16cqi #253041; }
  :where([data-tema="moerk"]) .systemskisse-tall b { background: #c3cad6; }
  :where([data-tema="moerk"]) .systemskisse-graf i { background: #2a3d6b; }
  :where([data-tema="moerk"]) .systemskisse-tabell span::after { background: #1d4430; }
  :where([data-tema="moerk"]) .systemskisse-tabell span:nth-child(2)::after { background: #4a3a17; }

  :where([data-tema="moerk"]) .foer-etter-kort:not(.foer-etter-etter) .punktliste li::before { background: #4a5568; }

  /* Bransjeeksemplene finnes i to utgaver, img/eksempler/ og
     img/eksempler/moerk/, side om side i markupen. */
  :root[data-tema="moerk"] .eksempel-lys { display: none; }
  :root[data-tema="moerk"] .eksempel-moerk { display: block; }

  :where([data-tema="moerk"]) img,
  :where([data-tema="moerk"]) .bilde-ramme {
    background-color: #1a212c;
    background-image:
      linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 60%),
      url("../img/ikoner/bilde.svg");
  }
}


/* ---------- Utskrift ----------
   Folk skriver ut prisene for aa vise en partner eller et styre. Da skal
   papiret ha prisene og vilkaarene - ikke meny, knapper og animasjoner. */

/* #33 Kortere kort. Klassen settes av priser.js - uten JS er alt åpent. */


/* #30 Hakene tegnes inn når kortet kommer til syne. Bare transform og
   opacity, og bare når avduk.js har satt .avduk. */


/* #32 Sammenlikningstabell */


/* Første kolonne blir staaende naar tabellen rulles sidelengs paa mobil. */


/* #15 #16 Verktoey */


@media print {
  @page { margin: 1.6cm; }

  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .topp,
.hopp,
.bunn,
.samtykke,
.samtykke-overlegg,
.handlingslinje,
.til-toppen,
.hero-scene,
.hero-bolge,
.hero-glass,
.knapp,
.seksjon-band,
[data-verktoey],
.eksempelstripe,
.eksempelstripe-kontroll { display: none !important; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  [data-avduk], .avduk { opacity: 1 !important; transform: none !important; translate: none !important; }

  .seksjon { padding: 0.8cm 0 !important; background: none !important; }
  .ramme { max-width: none !important; padding: 0 !important; }

  /* Alle punkter synlige paa papir, ogsaa de som var sammenfoldet. */
  

  
  
  
  
  
  h2, h3 { break-after: avoid; }

  /* Lenker i broedtekst faar adressen skrevet ut etter seg. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }

  
}


/* ---------- Referanser (referanser.html) ----------
   Ett felt per kunde: skjermbildet av forsiden i et nettleservindu, med
   mobilutgaven lagt foran nede til høyre, og teksten ved siden av. Annethvert
   felt snus med .referanse-snudd. Skjermbildene er ekte (img/referanser/),
   tatt i lys drakt. Alle farger er tokens, unntatt telefonrammen og prikkene,
   som er like i begge drakter, så det trengs ingen tvilling i «Mørk drakt».
   Bildene står i hver sin div, ikke direkte i figuren: felles.js kan legge
   et <img> i en .bilde-ramme, og plasseringen må da ligge på forelderen. */

.referanse {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.referanse > * { min-width: 0; }

.referanse-snudd .referanse-bilde { order: 2; }

.referanse-bilde {
  position: relative;
  margin: 0;
  /* Plass til mobilen som stikker ut under og til høyre for vinduet. */
  padding: 0 9% 9% 0;
}

.referanse-vindu {
  overflow: hidden;
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge);
}

.referanse-topp {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.65rem 1rem;
  background: var(--graa-flate);
  border-bottom: 1px solid var(--graa-linje);
}
.referanse-topp i { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #e9786a; }
.referanse-topp i:nth-child(2) { background: #e8bb55; }
.referanse-topp i:nth-child(3) { background: #64b97c; }
.referanse-topp span {
  min-width: 0;
  margin-left: 0.7rem;
  padding: 0.12rem 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--pille);
  background: var(--hvit);
  font-size: 0.76rem;
  color: var(--graa-tekst);
}

.referanse-vindu img,
.referanse-mobil img {
  display: block;
  width: 100%;
  height: auto;
}
.referanse-vindu img { aspect-ratio: 8 / 5; border-radius: 0; }
.referanse-mobil img { aspect-ratio: 6 / 13; border-radius: 14px; }

.referanse-mobil {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  padding: 5px;
  border-radius: 19px;
  background: #0f141c;
  box-shadow: 0 0 0 1px var(--graa-linje), 0 24px 48px -18px rgba(20, 26, 36, 0.45);
}

.referanse-bilde figcaption {
  margin-top: 0.9rem;
  max-width: 72%;
  font-size: 0.78rem;
  color: var(--graa-tekst);
}

.referanse-tekst h2 { margin-bottom: 0.3em; }

.referanse-type {
  margin-bottom: 0.9rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blaa);
}

.referanse-tekst > p { color: var(--graa-tekst); }

.referanse-tekst .punktliste { margin-top: 1.1rem; }
.referanse-tekst .punktliste li { margin-bottom: 0.6rem; }

/* Samme piller som fagfeltene på teamkortet, venstrestilt. */
.referanse-tekst .teammedlem-felt { justify-content: flex-start; margin-top: 1.4rem; }

.referanse-lenke { margin: 1.5rem 0 0; }

.referanse-status {
  display: inline-block;
  margin: 1.5rem 0 0;
  padding: 0.32rem 0.75rem;
  border-radius: var(--pille);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
  font-size: 0.85rem;
  color: var(--graa-tekst);
}

@media (max-width: 860px) {
  .referanse { grid-template-columns: 1fr; gap: 2.2rem; }
  .referanse-snudd .referanse-bilde { order: 0; }
}

@media print {
  .referanse { display: block; }
  .referanse-bilde { display: none; }
}

/* Referansekortene: smakebiten på index.html og nettsider.html.
   Fire kort med skjermbilde i nettleservindu. Vinduet og linja med prikkene
   er .referanse-vindu og .referanse-topp over; her står bare rutenettet og
   kortet. Bare tokens, så Mørk drakt trenger ingenting. */

.referansekort {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.referansekort-lenke {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Spans i lenka, ikke p og div, så alt er lovlig innhold i en <a>. */
.referansekort-lenke .referanse-vindu { display: block; }
.referansekort-lenke .referanse-topp { padding: 0.5rem 0.75rem; gap: 0.3rem; }
.referansekort-lenke .referanse-topp i { width: 0.5rem; height: 0.5rem; }
.referansekort-lenke .referanse-topp span { margin-left: 0.4rem; font-size: 0.7rem; }

.referansekort-navn {
  display: block;
  margin-top: 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blekk);
}

.referansekort-type {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.92rem;
  color: var(--graa-tekst);
}

.referansekort-lenke:hover .referansekort-navn { color: var(--blaa); }

@media (hover: hover) and (pointer: fine) {
  .referansekort-lenke .referanse-vindu { transition: translate 0.4s var(--fjaer), box-shadow 0.4s var(--fjaer); }
  .referansekort-lenke:hover .referanse-vindu { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--graa-linje), var(--skygge-loft); }
}

.referansekort-alle { margin: 2.6rem 0 0; text-align: center; }

.referansekort-kreditt { margin: 1.4rem 0 0; text-align: center; font-size: 0.78rem; color: var(--graa-tekst); }

/* Tre kort: tre kolonner ned til 720 px, så én kolonne, siden to
   kolonner ville latt det tredje kortet stå alene. */
@media (max-width: 960px) {
  .referansekort { gap: 2rem 1.25rem; }
  .referansekort-lenke .referanse-topp span { display: none; }
  .referansekort-navn { font-size: 1.05rem; }
  .referansekort-type { font-size: 0.85rem; }
}

@media (max-width: 720px) {
  .referansekort { grid-template-columns: minmax(0, 28rem); justify-content: center; gap: 2rem; }
  .referansekort-lenke .referanse-topp span { display: inline; }
}

/* ---------- Eksempelstripe og bransjelenker ----------
   «Noen av bransjene vi lager nettsider for» på forsida og på
   nettsider.html. KOBLING: markupen står likt på begge sidene, og begge
   laster js/eksempelstripe.js. Mørk drakt står nederst i seksjonen, etter
   originalene, slik at :where()-reglene vinner på rekkefølgen. */

.eksempelstripe {
  position: relative;
  /* Ligger utenfor .ramme, så den går helt ut til skjermkanten. */
  margin-top: 3rem;
}

/* Mykner kantene så kortene tones ut i stedet for å bli klippet bratt av. */
.eksempelstripe::before,
.eksempelstripe::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(1.5rem, 8vw, 12rem);
  pointer-events: none;
}
.eksempelstripe::before { left: 0; background: linear-gradient(90deg, var(--hvit), rgba(255, 255, 255, 0)); }
.eksempelstripe::after { right: 0; background: linear-gradient(270deg, var(--hvit), rgba(255, 255, 255, 0)); }

.eksempelstripe-spor {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 1.6vw, 1.9rem);
  overflow-x: auto;
  overflow-y: hidden;
  /* Ingen snapping: stripa skal gli jevnt, ikke hoppe mellom faste punkter. */
  scroll-behavior: auto;
  padding: 1.6rem clamp(1rem, 3vw, 3rem) 1.8rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.eksempelstripe-spor::-webkit-scrollbar { display: none; }
.eksempelstripe-spor:focus-visible { outline: 3px solid var(--blaa); outline-offset: 4px; border-radius: var(--radius); }

@media (hover: hover) and (pointer: fine) {
  .eksempelstripe-spor { cursor: grab; }
  .eksempelstripe-spor.drar { cursor: grabbing; }
}

.eksempelstripe-spor.drar { user-select: none; }

.eksempelstripe-spor img {
  -webkit-user-drag: none;
  user-select: none;
}


/* ---------- Ett eksempelkort ---------- */

.eksempel {
  position: relative;
  /* Kortene tar mer plass på store skjermer: rundt tre i bredden på en
     vanlig laptop, som i skissen. */
  flex: 0 0 clamp(16rem, 31vw, 34rem);
  margin: 0;
}

.eksempel-merke {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  margin: 0 auto -1.1rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--pille);
  background: var(--hvit);
  box-shadow: inset 0 0 0 1px var(--graa-linje), 0 8px 22px -12px rgba(20, 26, 36, 0.35);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blekk);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eksempel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}

@media (max-width: 620px) {
  .eksempelstripe-spor { gap: 1rem; }
  .eksempel { flex-basis: 15rem; }
  .eksempel-merke { font-size: 0.6rem; padding: 0.42rem 0.9rem; margin-bottom: -0.9rem; }
}

/* #37 Pauseknapp under eksempelstripa */
.eksempelstripe-kontroll { display: flex; justify-content: center; margin-top: 1.2rem; }
.stripe-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--pille);
  border: 1px solid var(--graa-linje);
  background: var(--hvit);
  color: var(--blekk);
  cursor: pointer;
}
.stripe-pause[hidden] { display: none; }
.stripe-pause:hover { border-color: #c9d1de; }
.stripe-pause:focus-visible { outline: 3px solid var(--blaa); outline-offset: 2px; }
/* To streker = pause, en trekant = spill av. Ren CSS, ingen ikonfil. */
.stripe-pause-ikon {
  width: 0.7rem;
  height: 0.8rem;
  border-inline: 3px solid currentColor;
  box-sizing: border-box;
}
.stripe-pause[aria-pressed="true"] .stripe-pause-ikon {
  border-inline: 0;
  width: 0;
  height: 0;
  border-block: 0.42rem solid transparent;
  border-left: 0.7rem solid currentColor;
}

/* Lenker til bransjesidene under stripa */
.bransjelenker { margin-top: 1.8rem; text-align: center; }
.bransjelenker-tittel { font-size: 1.05rem; margin-bottom: 0.9rem; }

@media screen {
  :where([data-tema="moerk"]) .eksempelstripe::before { background: linear-gradient(90deg, var(--hvit), rgba(17, 24, 33, 0)); }
  :where([data-tema="moerk"]) .eksempelstripe::after { background: linear-gradient(270deg, var(--hvit), rgba(17, 24, 33, 0)); }
  :where([data-tema="moerk"]) .eksempel-merke { box-shadow: inset 0 0 0 1px var(--graa-linje), 0 8px 22px -12px rgba(0, 0, 0, 0.6); }
  :where([data-tema="moerk"]) .stripe-pause:hover { border-color: #3a4658; }
}

/* ---------- Illustrasjoner på tjenestesidene ----------
   Inline SVG i de illustrerte seksjonene på design, logo, trykk, app, seo,
   drift og innhold. Hver form har én i-klasse, og hver klasse peker på et
   token. Derfor bytter tegningene drakt sammen med resten av siden, uten
   egne mørke filer og uten regler i seksjon 38. Bokstavelige farger står
   bare i i-fast-*, se under.
   Tegningene er pynt (aria-hidden). Teksten ved siden av sier det samme
   med ord. Logoen i dem er oppdiktet. */

.illustrasjon { margin: 0; }
.illu { display: block; width: 100%; height: auto; overflow: visible; }

.i-flate { fill: var(--hvit); stroke: var(--graa-linje); stroke-width: 2; }
.i-flate-ren { fill: var(--hvit); }
.i-bunn { fill: var(--graa-flate); }
.i-strek { fill: var(--graa-linje); }
.i-strek-moerk { fill: var(--graa-tekst); opacity: 0.5; }
.i-blaa { fill: var(--blaa-flate); }
.i-blaa-svak { fill: var(--blaa-flate); opacity: 0.35; }
.i-blaa-lys { fill: var(--blaa-lys); }
.i-cyan { fill: var(--cyan); }
.i-blekk { fill: var(--blekk); }
.i-paa { fill: var(--paa-blaa); }
.i-kontur { fill: none; stroke: var(--graa-linje); stroke-width: 2; }
.i-kontur-moerk { fill: none; stroke: var(--blekk); stroke-width: 2; stroke-linecap: round; }
.i-kontur-blaa { fill: none; stroke: var(--blaa); stroke-width: 2.5; stroke-linecap: round; }
.i-stiplet { fill: none; stroke: var(--blaa); stroke-width: 2; stroke-dasharray: 6 5; }
.i-stiplet-graa { fill: none; stroke: var(--graa-tekst); stroke-opacity: 0.55; stroke-width: 2; stroke-dasharray: 6 5; }
.i-pil { fill: none; stroke: var(--graa-tekst); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.i-hake { fill: none; stroke: var(--paa-blaa); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.i-vei { fill: none; stroke: var(--hvit); stroke-width: 7; stroke-linecap: round; }
.i-tekst { fill: var(--blekk); font-weight: 700; }
.i-tekst-graa { fill: var(--graa-tekst); font-weight: 700; }
.i-tekst-paa { fill: var(--paa-blaa); font-weight: 700; }
/* Står på en --blekk-flate, som snur med drakta. */
.i-tekst-snudd { fill: var(--hvit); font-weight: 700; }

/* Unntaket: logovariantene på logo.html viser et bestemt underlag (lyst og
   mørkt), og det skal ikke snu. Fargene er derfor faste og har med vilje
   ingen mørk tvilling. KOBLING: lik --hvit, --blekk og --graa-tekst i lys drakt. */
.i-fast-lys { fill: #ffffff; stroke: #e7eaf0; stroke-width: 2; }
.i-fast-moerk { fill: #141a24; }
.i-fast-tekst { fill: #5b6676; font-weight: 700; }
.i-fast-tekst-lys { fill: #ffffff; font-weight: 700; }

/* Nummerert liste som peker på tallene i tegningen (seo.html) */
.illu-tall { counter-reset: illu; }
.illu-tall li { counter-increment: illu; padding-left: 2.3rem; }
.illu-tall li::before {
  content: counter(illu);
  top: 0.08em;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blaa-flate);
  color: var(--paa-blaa);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}


/* ---------- Nettsider-siden: alltid med, prisboks og sammenligning ----------
   nettsider.html. Bare tokens, så mørk drakt trenger ingenting. */

/* Haker foran korte løfter (heroen og prisboksen) */
.fakta-haker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blekk);
}
.fakta-haker li { display: inline-flex; align-items: center; gap: 0.55rem; }
.fakta-haker li::before {
  content: "";
  width: 0.42rem;
  height: 0.78rem;
  margin-top: -0.2rem;
  border: solid var(--blaa);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Sju kort og prisboksen som den åttende ruta: fire, to eller én i bredden,
   så det aldri blir et kort alene på siste rad. */
.alltid-rutenett {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1000px) { .alltid-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .alltid-rutenett { grid-template-columns: 1fr; } }
.alltid-kort {
  padding: 1.3rem 1.4rem 1.2rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background: var(--hvit);
}
.alltid-kort h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.45rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
}
.alltid-kort h3::before {
  content: "";
  flex: none;
  width: 0.38rem;
  height: 0.7rem;
  margin: -0.2rem 0.15rem 0 0.2rem;
  border: solid var(--blaa);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.alltid-kort p { margin: 0; font-size: 0.95rem; color: var(--graa-tekst); }

.pris-boks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.2rem;
  border-radius: var(--radius);
  background: var(--blaa-lys);
  text-align: center;
}
.pris-boks-tall {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}
.pris-boks-tall span { display: block; margin-top: 0.2rem; font-family: "Lato", system-ui, sans-serif; font-size: 1rem; font-weight: 400; color: var(--graa-tekst); }
.pris-boks .fakta-haker { flex-direction: column; align-items: center; gap: 0.3rem; margin: 0.9rem 0 1.1rem; font-size: 0.88rem; }
/* Heroen uten bilde er midtstilt (seksjon 6); hakene følger knappene. */
.hero:not(:has(.hero-foto)):not(.hero-forside) .fakta-haker { justify-content: center; }

.sammenlign-ramme {
  max-width: 52rem;
  margin: 0 auto;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background: var(--hvit);
  overflow: hidden;
}
.sammenlign { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.sammenlign th,
.sammenlign td { padding: 0.95rem 1.2rem; text-align: left; vertical-align: top; }
.sammenlign thead th { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graa-tekst); }
.sammenlign thead th:last-child { color: var(--blaa); }
.sammenlign tbody tr { border-top: 1px solid var(--graa-linje); }
.sammenlign tbody th { width: 30%; font-weight: 700; }
.sammenlign tbody td { color: var(--graa-tekst); }
.sammenlign tbody td:last-child { color: var(--blekk); font-weight: 600; }
.sammenlign-fot { max-width: 52rem; margin: 1.3rem auto 0; text-align: center; }

/* Smal skjerm: hver rad blir et lite kort, med kolonnenavnet foran svaret. */
@media (max-width: 620px) {
  .sammenlign thead { display: none; }
  .sammenlign,
  .sammenlign tbody { display: block; }
  .sammenlign tbody tr { display: block; padding: 0.9rem 1rem; }
  .sammenlign tbody th,
  .sammenlign tbody td { display: block; width: auto; padding: 0.15rem 0; }
  .sammenlign tbody th { margin-bottom: 0.3rem; }
  .sammenlign tbody td::before {
    content: attr(data-etikett) ": ";
    font-weight: 700;
    color: var(--graa-tekst);
  }
}


/* ---------- Kontaktskjemaet og oppfordringene ----------
   kontakt.html: skjemaet i et kort med fire nummererte deler, og en
   sidekolonne med e-post, «Ring meg» og hva som skjer etterpå. Under:
   oppfordringslinja på tjenestesidene, knappen i artikkelboksene og i
   bunnfeltet. Bare tokens, så mørk drakt trenger ingenting her. */

.hero-kontakt { padding-bottom: 2.6rem; }
.hero-kontakt .fakta-haker { margin-top: 0; }

.kontakt-oppsett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: 2.5rem;
  align-items: start;
}

.skjema-kort {
  max-width: none;
  margin: 0;
  gap: 1.6rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius-stor);
  background: var(--hvit);
  box-shadow: var(--skygge);
}

.skjema-del {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  margin: 0;
  padding: 0 0 1.6rem;
  border: 0;
  border-bottom: 1px solid var(--graa-linje);
}
.skjema-del legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  padding: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--blekk);
}
.skjema-del-nr {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--blaa-flate);
  color: var(--paa-blaa);
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}
.skjema-del > .skjema-hjelp { margin-top: -0.6rem; }

/* Valgknapper: en ekte avkrysningsboks eller radioknapp ligger usynlig
   over pillen, så klikk, tastatur og skjermleser virker som vanlig. */
.valg-rutenett { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.valg { position: relative; display: inline-flex; }
.valg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.valg span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--pille);
  background: var(--hvit);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blekk);
  transition: border-color 0.2s var(--fjaer), background-color 0.2s var(--fjaer);
}
.valg span::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border: 1.5px solid var(--graa-tekst);
  border-radius: 4px;
  box-sizing: border-box;
}
.valg-radio span::before { border-radius: 50%; }
.valg:hover span { border-color: var(--blaa); }
.valg input:checked + span { border-color: var(--blaa); background: var(--blaa-lys); color: var(--blaa-moerk); }
.valg input:checked + span::before {
  border-color: var(--blaa-flate);
  background: var(--blaa-flate);
  box-shadow: inset 0 0 0 2px var(--hvit);
}
.valg input:focus-visible + span { outline: 3px solid var(--blaa); outline-offset: 2px; }

.skjema-gruppe { display: grid; gap: 0.7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.skjema-gruppe legend { margin: 0 0 0.7rem; padding: 0; font-size: 0.95rem; font-weight: 700; color: var(--blekk); }
/* Adressefeltet vises først når «Ja» er valgt. Uten :has står det alltid
   framme, og er fortsatt valgfritt. */
@supports selector(:has(a)) {
  .dagens-side { display: none; }
  .skjema-gruppe:has(input[value="ja"]:checked) .dagens-side { display: grid; }
}

.skjema-felt select {
  width: 100%;
  min-height: 3.05rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius);
  background-color: var(--hvit);
  font: inherit;
  color: var(--blekk);
  cursor: pointer;
}
.skjema-felt select:hover { border-color: var(--blaa); }
.skjema-felt select:focus-visible { outline: none; border-color: var(--blaa); box-shadow: 0 0 0 3px var(--blaa-lys); }

/* Sidekolonnen */
.kontakt-side { display: grid; gap: 1.2rem; }
@media (min-width: 901px) {
  .kontakt-side { position: sticky; top: 6rem; }
}
.kontakt-kort {
  padding: 1.5rem 1.5rem 1.3rem;
  border-radius: var(--radius-stor);
  background: var(--graa-flate);
  box-shadow: inset 0 0 0 1px var(--graa-linje);
}
.kontakt-kort h2,
.kontakt-side .ring-tilbake-overskrift { margin: 0 0 0.5rem; font-size: 1.2rem; }
.kontakt-kort .kontakt-epost { margin: 0.2rem 0 0.3rem; font-size: 1.15rem; }
.kontakt-kort .kontakt-tlf { margin: 0 0 0.9rem; }
.kontakt-kort .sekundaer { margin: 0 0 0.6rem; font-size: 0.93rem; }
.kontakt-kort .sekundaer:last-child { margin-bottom: 0; }
.kontakt-side .ring-tilbake-lys { max-width: none; margin: 0; padding: 1.5rem; }
.kontakt-side .ring-tilbake-felt { grid-template-columns: 1fr; }
.kontakt-side .ring-tilbake-send { width: 100%; margin-top: 0.2rem; }
.kontakt-trinn { margin: 0.6rem 0 0; padding-left: 1.2rem; font-size: 0.93rem; color: var(--graa-tekst); }
.kontakt-trinn li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.kontakt-trinn li:last-child { margin-bottom: 0; }
.kontakt-trinn strong { color: var(--blekk); }

@media (max-width: 900px) {
  .kontakt-oppsett { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .skjema-kort { border-radius: var(--radius); }
  .skjema-del legend { font-size: 1.15rem; }
}

/* Oppfordringslinja under «Slik går vi fram» på tjenestesidene */
.cta-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: 44rem;
  margin: 2.8rem auto 0;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius-stor);
  background: var(--hvit);
}
.cta-linje > div { flex: 1 1 18rem; min-width: 0; }
.cta-linje-tittel { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--blekk); }
.cta-linje-tekst { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--graa-tekst); }
@media (max-width: 560px) {
  .cta-linje .knapp { width: 100%; }
}

.artikkel-boks .artikkel-boks-knapp { margin: 1.2rem 0 0; }

/* Knappen i bunnfeltet. «.bunn a» ville ellers gitt den grå tekst. */
.bunn .bunn-knapp { margin-top: 0.4rem; }
.bunn .bunn-knapp,
.bunn .bunn-knapp:hover { color: var(--paa-blaa); }