/* ==========================================================================
   OrdBro — landingsside
   Én stilfil. Ingen rammeverk, ingen byggesteg, ingen JavaScript.

   Paletten er den samme som appens: varmt papir, mørkt blekk, og én
   mettet farge — appens egen verb-grønne — brukt på hovedknappen.
   Fitzgerald-fargene fra appen brukes bare i sonekartet, der de
   betyr noe.
   ========================================================================== */

/* ==========================================================================
   SKRIFTENE — de ligger her, ikke hos Google

   Sida hentet Newsreader og Source Sans 3 fra fonts.googleapis.com fram til
   24.08.2026. Det sendte IP-adressen til hver eneste leser videre til en
   tredjepart, på et nettsted som argumenterer for at ingenting forlater
   enheten. Nå ligger filene i nettside/skrift/, og sida gjør ingen
   forespørsel ut av sitt eget opphav i det hele tatt.

   Filene er ikke laget av oss. De er byte for byte de samme filene Google
   Fonts serverer, hentet ned uendret. Begge skriftene er lisensiert under
   SIL Open Font License 1.1, som uttrykkelig tillater det — på vilkår av at
   lisensteksten følger med. Den ligger i nettside/skrift/, og opphavsmann og
   lisens står i NOTICE.md. Hele begrunnelsen står i nettside/skrift/LES-MEG.md.

   TRE TING Å VITE FØR DU RETTER NOE HER:

   1. font-display: swap. Teksten skal være lesbar fra første maling, i
      reserveskrifta, og bytte når fila er nede. Alternativet — block — gir
      inntil tre sekunder usynlig tekst, og leseren vår sitter ofte på
      mobildata.

   2. Reservestakken er ikke pynt. Georgia og system-ui står der fordi de er
      nær nok i bredde til at ombrekkinga ikke hopper stygt når swap slår inn.
      Målt i nettleseren 24.08.2026, på setningen «Nettbrettet sier ordet
      høyt. æøåÆØÅ»:

          Georgia    er  6,3 % BREDERE enn Newsreader
          system-ui  er  7,6 % BREDERE enn Source Sans 3

      Merk retningen. Begge reservene er BREDERE, aldri smalere, og det er den
      trygge veien: teksten krymper når skrifta kommer, den vokser ikke. Det er
      også den samme målingen nettside/README.md hviler på — Georgia er den
      bredeste av de to serifene, og derfor er det Georgia, ikke Newsreader,
      som avgjør hvor smal tekstspalta kan bli før overskrifta brekker.
      Layouten er altså allerede målt mot det verste tilfellet.

   3. unicode-range er kopiert ordrett fra Googles eget CSS-svar. Den avgjør
      hvilken fil nettleseren i det hele tatt ber om. Endrer du ett tall her
      uten å bytte fil, ber sida om feil fil — og et tegn som ikke finnes i
      den faller tilbake til Georgia midt i en linje.

      «latin» dekker U+0000-00FF. Der ligger æ ø å Æ Ø Å, og der ligger alt
      annet norsk. Det er kontrollert i selve filene, ikke antatt.
      «latin-ext» lastes derfor ikke ned av en norsk leser i det hele tatt.
      Den ligger her for den dagen et navn med č, ł eller š skal skrives.

   Vakta (node nettside/verifiser-paastander.mjs) leser denne blokka: hver
   url() må peke på en fil som finnes, hver fil i skrift/ må være i bruk, og
   forhåndslastinga i mal.html må gjelde nøyaktig de filene som brukes.
   ========================================================================== */

/* --- Newsreader 400 — overskrifter, tall, merkenavn --------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrift/newsreader-400-latin-ext-v26.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrift/newsreader-400-latin-v26.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Source Sans 3 400 — brødteksten ------------------------------------ */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrift/source-sans-3-400-latin-ext-v19.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrift/source-sans-3-400-latin-v19.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Source Sans 3 600 — knapper, uthevinger, <strong> ------------------ */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('skrift/source-sans-3-600-latin-ext-v19.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('skrift/source-sans-3-600-latin-v19.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Flater */
  --papir:        #FDF7EF;
  --hvit:         #FFFFFF;
  --tavle:        #F2ECE3;
  --moerk:        #252E38;
  --moerk-flate:  #3C4651;

  /* Tekst */
  --blekk:        #131B23;
  --daempet:      #3C4651;
  --sekundaer:    #68717C;   /* 4,6:1 mot papir — svakeste tekst på sida */
  --lys-tekst:    #F6F8FA;
  --lys-daempet:  #BFC5CC;

  /* Linjer */
  --linje:        #EBEEF2;
  --linje-sterk:  #D9DEE3;

  /* Aksent */
  --gronn:        #206B32;   /* appens verb-kant. 6,2:1 mot papir */
  --gronn-moerk:  #175025;
  --gronn-lys:    #95D49D;   /* aksent på mørk flate. 7,9:1 mot #252E38 */

  /* Mål */
  --ramme-bredde: 1240px;
  --ramme-smal:   38rem;
  --luft:         clamp(3.5rem, 2rem + 5vw, 5.5rem);
  --radius:       18px;
  --radius-liten: 14px;

  /* Reserveskriftene står først i rekka helt til woff2-fila er nede — se
     @font-face øverst i fila. De er ikke valgt for å ligne mest mulig, men
     for å være nær nok i bredde til at ombrekkinga ikke hopper når swap slår
     inn, og for å finnes overalt: Georgia på Windows, macOS, iOS og Android,
     system-ui på alt. Rekkefølgen etter dem er ren nødutgang. */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  margin: 0;
}

h1 {
  /* Skalaen er målt, ikke gjettet. De to setningene i overskrifta skal få plass
     på hver sin linje — også når Newsreader ikke lastes og Georgia trer inn, som
     er bredere. Den bredeste linja er «Nettbrettet sier ordet høyt.». Endrer du
     størrelsen eller spaltebredden, må begge skriftene måles på nytt.
     Under omtrent 370 px brekker overskrifta i flere linjer. Det er greit —
     `text-wrap: balance` fordeler dem, og ingenting flyter ut. */
  font-size: clamp(1.8rem, 1rem + 3.1vw, 2.8rem);
  line-height: 1.14;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  line-height: 1.18;
  margin-bottom: 0.85rem;
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--gronn);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

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

b, strong { font-weight: 600; }

/* --- Fokus og hopp-lenke ------------------------------------------------- */

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

.seksjon--moerk :focus-visible {
  outline-color: var(--gronn-lys);
}

/* Fokusringen må ha noe å stå mot. På de to grønne flatene ville en grønn
   ring forsvinne, så der bytter den til blekk. */
.knapp--primaer:focus-visible,
.hopp-til-innhold:focus,
.hopp-til-innhold:focus-visible {
  outline: 3px solid var(--blekk);
  outline-offset: 4px;
}

main:focus { outline: none; }

.hopp-til-innhold {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 20;
  background: var(--gronn);
  color: var(--papir);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-liten) var(--radius-liten);
  font-weight: 600;
  text-decoration: none;
}

.hopp-til-innhold:focus {
  top: 0;
  color: var(--papir);
}

.visuelt-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Rammer og seksjoner ------------------------------------------------- */

.ramme {
  width: 100%;
  max-width: var(--ramme-bredde);
  margin: 0 auto;
  padding: 0 clamp(1.15rem, 0.4rem + 3vw, 4.5rem);
}

.ramme--smal { max-width: calc(var(--ramme-smal) + 2 * clamp(1.15rem, 0.4rem + 3vw, 4.5rem)); }

.seksjon {
  padding: var(--luft) 0;
  border-top: 1px solid var(--linje);
}

.seksjon--papir { background: var(--papir); }
.seksjon--hvit  { background: var(--hvit); }

.seksjon--moerk {
  background: var(--moerk);
  color: var(--lys-tekst);
  border-top: none;
}

.seksjon--moerk h2,
.seksjon--moerk h3 { color: var(--lys-tekst); }

.seksjon--moerk p { color: var(--lys-daempet); }

.seksjon--moerk a { color: var(--gronn-lys); }
.seksjon--moerk a:hover { color: var(--lys-tekst); }

.seksjon__topp {
  max-width: 42em;
  margin-bottom: 2.75rem;
}

.seksjon__topp--smal { max-width: var(--ramme-smal); }

.seksjon__topp > h1,
.seksjon__topp > h2 { margin-bottom: 0.75rem; }

/* --- Topplinje ----------------------------------------------------------- */

.topplinje {
  background: var(--papir);
  border-bottom: 1px solid var(--linje);
}

.topplinje__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.75rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.merke {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--blekk);
  text-decoration: none;
}

.merke__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--gronn);
  color: var(--papir);
}

.merke__navn {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.topplinje__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 1rem;
}

.topplinje__nav a {
  color: var(--daempet);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.topplinje__nav a:hover {
  color: var(--blekk);
  border-bottom-color: var(--gronn);
}

/* Sida man står på. Fargen alene er ikke nok — aria-current="page" står i
   oppmerkingen, slik at den som hører sida lest opp også får vite hvor hun er. */
.topplinje__nav a.er-her {
  color: var(--blekk);
  font-weight: 600;
  border-bottom-color: var(--gronn);
}

.topplinje__handling { margin: 0; }

/* Hovedhandlingen står på hver side. Er det ikke plass til logo, meny og knapp
   på én linje, legger menyen seg på egen linje UNDER logoen og knappen — ikke
   mellom dem. Da står de to viktigste tingene, «hvor er jeg» og «prøv appen»,
   alltid øverst, og topplinja blir to rader i stedet for tre.

   Knekkpunktet er målt, ikke gjettet: logo (112 px) + meny (579 px) + knapp
   (125 px) + to mellomrom (56 px) = 872 px, og med sidemargene trengs det rundt
   950 px. 64 rem gir litt å gå på hvis en menytekst blir lengre. Legger du til
   en side i menyen, mål på nytt. */
@media (max-width: 63.99rem) {
  .topplinje__nav {
    order: 3;
    width: 100%;
    gap: 0.35rem 1.25rem;
  }
}

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

.hero { border-top: none; }

.hero__rad {
  display: grid;
  gap: clamp(2.25rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 68rem) {
  .hero__rad { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.hero__tekst > * + * { margin-top: 1.5rem; }
.hero__tekst h1 + .ingress { margin-top: 1.9rem; }

.ingress {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--daempet);
  max-width: 32em;
  margin: 0;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .ingress { font-size: 1.22rem; }
}

.ingress--seksjon {
  max-width: 42em;
  margin-bottom: 1.35rem;
}

.seksjon__topp .ingress { margin-bottom: 0; }

.seksjon--moerk .ingress { color: var(--lys-daempet); }

/* --- Handlinger ---------------------------------------------------------- */

.handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.handlinger--etter { margin-top: 2rem; }

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.7rem 1.85rem;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
}

.knapp--primaer {
  background: var(--gronn);
  border-color: var(--gronn);
  color: var(--papir);
}

.knapp--primaer:hover {
  background: var(--gronn-moerk);
  border-color: var(--gronn-moerk);
  color: var(--papir);
}

.knapp--sekundaer {
  background: transparent;
  border-color: var(--gronn);
  color: var(--gronn);
}

.knapp--sekundaer:hover {
  background: var(--gronn);
  color: var(--papir);
}

/* Knappen i topplinja. Lavere enn hovedknappen i heroen, men fortsatt 44 px
   høy — det er den minste flata en tommel treffer uten å sikte. */
.knapp--liten {
  min-height: 2.75rem;
  padding: 0.45rem 1.15rem;
  font-size: 1rem;
  border-radius: 12px;
}

.tekstlenke {
  color: var(--daempet);
  font-size: 1.05rem;
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

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

.mikrolinjer {
  /* Disse fire linjene er ikke finskrift. De sier at appen snakker høyt, at den
     er laget for nettbrett, og at det er den voksne som kommer til å bruke tavla
     mest — tre ting leseren skal vite FØR hun trykker. Den siste sto ikke her
     fram til 24.08.2026, og da kunne hun lese hele forsida uten å få vite at
     jobben er hennes. Derfor står de i den samme mørke tonen som brødteksten,
     bare mindre. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--daempet);
  max-width: 34em;
}

/* --- Småtekst ------------------------------------------------------------ */

.fotnote {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sekundaer);
}

.fotnote--strek {
  border-top: 1px solid var(--linje);
  padding-top: 1.1rem;
  margin-top: 1.6rem;
}

.fotnote--moerk {
  color: var(--lys-daempet);
  max-width: 46em;
  margin-top: 1.5rem;
}

.publikumsmarkoer {
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lys-daempet);
  margin: 0 0 1rem;
}

/* --- Orienteringslinja på undersidene ------------------------------------

   Den vanligste veien inn på dette nettstedet er ikke forsida. Det er en lenke
   limt inn i en foreldregruppe, og den lander midt inne på en undersida — på
   «Støtt drifta», på «For fagfolk», hvor som helst. Sida hun lander på må da
   selv si hva OrdBro er, og gi henne en vei til forsida som ikke bare er
   logoen i hjørnet.

   Den er ikke finskrift, og skal ikke bli det: full brødtekststørrelse, samme
   farge som resten av teksten på flata. Den skiller seg med kant og flate, ikke
   ved å være mindre. De fem linjene står i hver sin kildefil og er skrevet for
   hver sin leser.

   DERFOR SETTES INGEN `color` HER. Fram til 24.08.2026 sto det
   `color: var(--daempet)`, og det gjorde nettopp det linja ikke skal gjøre:
   på papir- og hvitflatene ble hun #3C4651 mens brødteksten rundt er #131B23,
   altså litt lysere enn alt annet — finskrift uten å være mindre. Uten regelen
   arver hun brødtekstfargen på de lyse flatene, og `.seksjon--moerk p`
   (spesifisitet 0,2,0) gir henne den lyse brødtekstfargen på fagfolksida. Da
   er hun samme farge som teksten rundt seg begge steder, slik merknaden over
   sier. */
.orientering {
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  max-width: 42em;
  border-left: 3px solid var(--gronn);
  border-radius: 0 var(--radius-liten) var(--radius-liten) 0;
  background: var(--hvit);
  line-height: 1.6;
}

/* Flata under må ikke bli den samme som seksjonens egen, ellers forsvinner
   ramma og bare den grønne streken står igjen. */
.seksjon--hvit .orientering { background: var(--papir); }

.seksjon--moerk .orientering {
  background: var(--moerk-flate);
  border-left-color: var(--gronn-lys);
}

/* Et avsnitt rett etter ingressen inne i en seksjonstopp. Ingressen har ingen
   bunnmarg der, så uten dette klistrer de to seg sammen. */
.seksjon__topp .ingress + p { margin-top: 1.1rem; }

/* --- Figurer ------------------------------------------------------------- */

.figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

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

.figur__lenke img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 2px solid var(--linje-sterk);
  background: var(--tavle);
}

.figur--merket .figur__lenke img { border-color: var(--gronn); }

.figur__forstorr {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--sekundaer);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.figur__lenke:hover .figur__forstorr { color: var(--blekk); }

.seksjon--moerk .figur__forstorr { color: var(--lys-daempet); }
.seksjon--moerk .figur__lenke:hover .figur__forstorr { color: var(--lys-tekst); }
.seksjon--moerk .figur__lenke img { border-color: var(--moerk-flate); }

figcaption {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sekundaer);
}

.seksjon--moerk figcaption { color: var(--lys-daempet); }

.figur--smal { margin-top: 2rem; max-width: 34rem; }
.figur--telefon { margin-top: 1.25rem; max-width: 16rem; }

/* --- Steg (seksjon 2) ---------------------------------------------------- */

.steg-rad {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 2.75rem);
}

@media (min-width: 52rem) {
  .steg-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.steg-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.steg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.steg li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.85rem;
  align-items: baseline;
}

.steg__tall {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gronn);
}

.steg p { margin: 0; color: var(--daempet); }

/* --- Sidetopp -------------------------------------------------------------

   Undersidene begynner med en kort blokk som sier hvor du er. Den bærer <h1>
   på sida, og har ikke noe annet i seg.
   -------------------------------------------------------------------------- */

.sidetopp { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }

.sidetopp h1 { margin-bottom: 1.4rem; }

/* --- Veien videre ----------------------------------------------------------

   Ingen blindveier: hver side slutter med minst én vei til neste naturlige
   steg. «Støtt drifta» står med vilje aldri her — den sida er den eneste som
   ber leseren om noe, og menyen er nok til å finne den.
   -------------------------------------------------------------------------- */

.veier {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 46rem) {
  .veier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

.vei {
  padding: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  border: 2px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvit);
}

.seksjon--hvit .vei { background: var(--papir); }

.vei h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
}

.vei h3 a { text-decoration: none; }

.vei h3 a:hover { text-decoration: underline; }

.vei p {
  margin: 0;
  color: var(--daempet);
  font-size: 1rem;
  line-height: 1.55;
}

/* --- Kortpar ------------------------------------------------------------- */

.kortpar {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2.25rem, 1rem + 3vw, 3rem);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem) clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  border-radius: 20px;
  background: var(--papir);
  border: 2px solid var(--linje);
}

@media (min-width: 46rem) {
  .kortpar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

.kort h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 0.5rem;
}

.kort p { margin: 0; color: var(--daempet); font-size: 1rem; }

/* --- Tavlerad (forsida: «Ni ord først») ---------------------------------- */

.tavlerad {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 40rem) {
  .tavlerad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .tavlerad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
}

/* --- Todeling ------------------------------------------------------------ */

.todeling {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 2.75rem);
  margin-top: clamp(2.25rem, 1rem + 3vw, 3rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .todeling { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .todeling--tekst { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.todeling__hoved { max-width: 40em; }
.todeling__hoved p { color: var(--daempet); }

.todeling__side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.uthevet-avsnitt {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--blekk) !important;
}

.uthevet-linje {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--blekk);
  border-left: 3px solid var(--gronn);
  padding-left: 1.1rem;
  margin: 1.75rem 0;
}

.uthevet-blokk {
  margin: 1.75rem 0;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-liten);
  background: var(--papir);
  border: 2px solid var(--linje);
}

.uthevet-blokk p { color: var(--blekk) !important; margin: 0; }

.rytme {
  font-size: 1.15rem;
  color: var(--blekk);
  margin-bottom: 0.35em;
}

/* --- Tallkort ------------------------------------------------------------ */

.tallkort {
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--hvit);
  border: 2px solid var(--linje);
}

.seksjon--papir .tallkort { background: var(--hvit); }

.tallkort dl { margin: 0 0 1rem; }

.tallkort__rad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linje);
}

.tallkort__rad dt {
  font-size: 0.98rem;
  color: var(--daempet);
}

.tallkort__rad dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
}

/* --- Lister -------------------------------------------------------------- */

.liste {
  margin: 0 0 1.25rem;
  padding-left: 1.2rem;
}

.liste li {
  margin-bottom: 0.75rem;
  color: var(--daempet);
}

.liste li:last-child { margin-bottom: 0; }

.eksempler {
  margin: 1.25rem 0;
  padding-left: 1.2rem;
}

.eksempler li {
  margin-bottom: 0.5rem;
  color: var(--daempet);
}

.punktliste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: punkt;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 42em;
}

.punktliste > li {
  counter-increment: punkt;
  padding-left: 3.1rem;
  position: relative;
}

.punktliste > li::before {
  content: counter(punkt);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--linje-sterk);
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gronn);
}

.punktliste h3 { margin: 0 0 0.4rem; }
.punktliste p { color: var(--daempet); }

.punktliste + p,
.punktliste + .handlinger { margin-top: 2rem; }

.punktliste--enkel { gap: 1.1rem; margin-bottom: 1.5rem; }
.punktliste--enkel > li { color: var(--daempet); }

.faktakort {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 46rem) {
  .faktakort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.faktakort li {
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-liten);
  background: var(--papir);
  border: 2px solid var(--linje);
  color: var(--blekk);
  font-size: 1.02rem;
  line-height: 1.55;
}

.lenkeliste {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lenkeliste--forklart li { color: var(--daempet); }

.lenkeliste + p { margin-top: 1.5rem; }

/* --- Fagfolk: kriterier -------------------------------------------------- */

.kriterier {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--moerk-flate);
  border-radius: 20px;
  overflow: hidden;
}

.kriterium {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding: 1.15rem clamp(1.1rem, 0.7rem + 1vw, 1.7rem);
  border-top: 1px solid var(--moerk-flate);
}

.kriterium:first-child { border-top: none; }
.kriterium:nth-child(odd) { background: var(--moerk-flate); }

.kriterium__merke {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
}

.kriterium__merke svg { width: 100%; height: 100%; display: block; }

.kriterium--ja     .kriterium__merke { color: var(--gronn-lys); }
.kriterium--nei    .kriterium__merke { color: #E79A93; }
.kriterium--delvis .kriterium__merke { color: #E7D08A; }

.kriterium h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 0.3rem;
  color: var(--lys-tekst);
}

.kriterium p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lys-daempet);
}

.fagfolk-rad {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 2.75rem);
  margin-top: clamp(2.25rem, 1rem + 3vw, 3rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .fagfolk-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fagtekst {
  margin-top: clamp(2.25rem, 1rem + 3vw, 3rem);
  max-width: 44em;
}

.fagtekst h2 { color: var(--lys-tekst); }

/* --- Sonekartet ---------------------------------------------------------- */

.sonekart-flate {
  padding: 0.7rem;
  border-radius: var(--radius);
  background: var(--tavle);
  border: 2px solid var(--linje-sterk);
}

.sonekart {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.3rem;
}

.rute {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  border: 2px solid;
  font-family: var(--sans);
  font-size: clamp(0.6rem, 0.35rem + 0.7vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Fitzgerald-fargene fra appens designsystem, uendret. */
.rute--nav         { background: #535D68; border-color: #BFC5CC; color: #F6F8FA; }
.rute--question    { background: #F2F5F9; border-color: #7A7D81; color: #2C2F32; }
.rute--pronoun     { background: #FAE982; border-color: #857502; color: #342F12; }
.rute--verb        { background: #95D49D; border-color: #206B32; color: #1D3420; }
.rute--emne        { background: #DD9859; border-color: #6D3C00; color: #3D2714; }
.rute--adjective   { background: #80B2EB; border-color: #134F89; color: #1D3045; }
.rute--preposition { background: #997DC2; border-color: #411F67; color: #10071C; }
.rute--social      { background: #FFBBDF; border-color: #A43E7C; color: #412735; }
.rute--negation    { background: #D16F66; border-color: #6A0106; color: #200706; }
.rute--personlig   { background: #F2ECE3; border-color: #7A7D81; border-style: dashed; color: #3C4651; }

.sonetegn {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--lys-daempet);
}

@media (min-width: 30rem) {
  .sonetegn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sonetegn li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sonetegn__prikk {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  border: 2px solid;
}

/* --- Gjennomgangen ------------------------------------------------------- *
   Den lengste delen av sida, og den eneste noen kommer TILBAKE til. Den er
   derfor bygget for å bli skummet: hver del er et kort med sitt eget nummer,
   innholdslista står øverst, og hver del har en vei tilbake til lista.
   -------------------------------------------------------------------------- */

.opplaering {
  counter-reset: del;
}

/* --- Innholdslista ---------------------------------------- */

.innholdsliste {
  margin: 0 0 3rem;
  padding: 1.75rem clamp(1.15rem, 0.6rem + 2vw, 2.25rem);
  background: var(--hvit);
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius);
}

.innholdsliste > h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.innholdsliste__merknad {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  color: var(--daempet);
  max-width: 42em;
}

.innholdsliste__liste {
  counter-reset: punkt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem 2.5rem;
}

@media (min-width: 46rem) {
  .innholdsliste__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.innholdsliste__liste > li {
  counter-increment: punkt;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  align-items: baseline;
  gap: 0 0.5rem;
  line-height: 1.45;
}

.innholdsliste__liste > li::before {
  content: counter(punkt) ".";
  grid-row: span 2;
  font-variant-numeric: tabular-nums;
  color: var(--sekundaer);
  font-size: 0.95rem;
}

.innholdsliste__liste a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linje-sterk);
}

.innholdsliste__liste a:hover { border-bottom-color: currentColor; }

.innholdsliste__liste span {
  grid-column: 2;
  display: block;
  font-size: 0.95rem;
  color: var(--sekundaer);
}

/* --- Gjennomgangen med lyd -------------------------------- */

.gjennomgang {
  margin: 0 0 3rem;
  padding: 1.75rem clamp(1.15rem, 0.6rem + 2vw, 2.25rem) 1.5rem;
  background: var(--moerk);
  color: var(--lys-tekst);
  border-radius: var(--radius);
}

.gjennomgang[hidden] { display: none; }

.gjennomgang__tittel {
  margin: 0 0 0.5rem;
  color: var(--lys-tekst);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
}

.gjennomgang__ingress {
  margin: 0 0 1.25rem;
  color: var(--lys-daempet);
  max-width: 42em;
}

.gjennomgang__video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 60rem;
  border-radius: var(--radius-liten);
  background: #000;
}

.gjennomgang__fotnote {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--lys-daempet);
}

/* --- Én del ------------------------------------------------ */

.del {
  counter-increment: del;
  scroll-margin-top: 1.5rem;
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--linje-sterk);
  margin-top: 2.75rem;
}

.del:first-of-type { margin-top: 0; }

.del__rad {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .del__rad {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.del__tekst { max-width: 42em; }

.del__sammendrag h2 {
  /* Tar plassen mellom nummeret og pluss-tegnet, slik at tegnet står ytterst
     til høyre og leses som «her åpner du». */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.7rem;
}

.del__sammendrag h2::before {
  content: counter(del);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gronn);
  background: var(--hvit);
  border: 1px solid var(--gronn);
  border-radius: 999px;
  min-width: 1.85rem;
  padding: 0.4rem 0.2rem;
  text-align: center;
  align-self: center;
}

/* --- Én del, sammenleggbar -------------------------------------------------

   Hver av de elleve delene ligger i sitt eget <details>. Selve sammenlegginga
   er uten JavaScript: den virker uten skript, den kan betjenes med tastatur
   uten at noen har skrevet kode for det, skjermlesere kjenner den, og
   nettleserens egen søkefunksjon åpner den. Første del står åpen; resten er
   lukket, slik at hele lista er synlig med én gang.

   ÉN ting gjør et skript likevel, og det står i nettside/kilde/mal.html under
   DYPLENKER: en nettleser åpner ikke et <details> av at ankeret peker på selve
   elementet — bare når ankeret ligger inne i det. «…#sikkerhetskopi» landet
   derfor på en lukket del. Skriptet åpner den. Uten skriptet er delen der
   fortsatt, lukket, ett trykk unna — det er en dårligere vei, ikke en stengt.
   -------------------------------------------------------------------------- */

.del__brett {
  /* scroll-margin gjelder ankeret, og ankeret er <details>. Uten den legger
     tittelen seg helt inntil skjermkanten når man hopper hit fra
     innholdslista. Skriptet under DYPLENKER ruller med scrollIntoView(), og
     den respekterer denne marga. */
  scroll-margin-top: 1.5rem;
}

.del__sammendrag {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  /* Rada blir 64 px høy med denne polstringa: sirkelen er 36 px, og resten er
     luft over og under. Det er tallet prosjektet krever av appen, og selv om
     regelen etter ordlyden gjelder appen, er det den samme tommelen som
     betjener gjennomgangen. WCAG 2.5.5 ber om 44. */
  padding: 0.875rem 0;
  /* Den innebygde trekanten byttes ut med pluss og minus lenger nede — det er
     det samme tegnet som brukerguiden i appen bruker. */
  list-style: none;
}

.del__sammendrag::-webkit-details-marker { display: none; }

.del__sammendrag:hover h2 { color: var(--gronn); }

.del__sammendrag::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gronn);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linje-sterk);
  border-radius: 999px;
  background: var(--hvit);
}

/* Minustegn (U+2212), ikke bindestrek: det er like bredt som pluss, saa
   tegnet ikke hopper naar delen aapnes. */
.del__brett[open] .del__sammendrag::after { content: "\2212"; }

.del__brett > .del__rad { margin-top: 1.5rem; }

.del__hva {
  color: var(--daempet);
  margin-bottom: 1.6rem;
}

.del__tekst h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sekundaer);
  margin: 1.9rem 0 0.7rem;
}

.del__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.del__side .figur { margin: 0; }

/* --- Steg og punkter --------------------------------------- */

.stegliste {
  counter-reset: steg;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

/* Merk: `position: relative` og et absolutt ::before, IKKE grid eller flex.
   Et steg inneholder <b> midt i setningen — «Trykk <b>«Snakk»</b> for å …» —
   og i en grid- eller flexboks blir hvert slikt element sin egen celle. Da
   brekker knappenavnet ut av setningen og legger seg i en søyle for seg. */
.stegliste > li {
  counter-increment: steg;
  position: relative;
  padding-left: 2.5rem;
  min-height: 1.75rem;
  color: var(--daempet);
  line-height: 1.55;
}

.stegliste > li::before {
  content: counter(steg);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blekk);
  background: var(--tavle);
  border-radius: 999px;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verdt {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.verdt > li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--daempet);
  line-height: 1.55;
}

.verdt > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--linje-sterk);
}

.verdt--meny > li::before { border-radius: 2px; background: var(--gronn); }

.verdt b { color: var(--blekk); }

/* --- Merknad ------------------------------------------------ */

.merknad {
  margin: 1.4rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--hvit);
  border: 1px solid var(--linje-sterk);
  border-left: 4px solid var(--gronn);
  border-radius: var(--radius-liten);
}

.merknad p {
  margin: 0;
  color: var(--blekk);
  font-size: 1rem;
  line-height: 1.6;
}

.merknad--advarsel { border-left-color: #B3452F; }

/* --- Feilsøkingslista --------------------------------------- */

.feilsoek {
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

.feilsoek dt {
  font-weight: 600;
  color: var(--blekk);
  margin-top: 1.15rem;
}

.feilsoek dt:first-child { margin-top: 0; }

.feilsoek dd {
  margin: 0;
  color: var(--daempet);
  line-height: 1.55;
}

/* --- Sonekortet --------------------------------------------- */

.sonekort {
  padding: 1.25rem 1.4rem;
  background: var(--hvit);
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius);
}

.sonekort h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sekundaer);
  margin: 0 0 0.85rem;
}

.sonekort .verdt { margin-bottom: 0; }

/* --- Videoklippene ------------------------------------------ *
   Hvert klipp står skjult i oppmerkingen og slippes fram av skriptet nederst
   på sida først når fila er bekreftet. Derfor `display: none` på [hidden]:
   ingen tom luke, ingen ødelagt spiller.
   ------------------------------------------------------------ */

.klipp {
  margin: 0;
}

.klipp[hidden] { display: none; }

.klipp__video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--tavle);
}

.klipp figcaption {
  margin-top: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--sekundaer);
}

/* --- Tilbake til lista -------------------------------------- */

.tilbake {
  margin: 1.6rem 0 0;
  font-size: 0.95rem;
}

.tilbake a {
  color: var(--sekundaer);
  text-decoration: none;
  border-bottom: 1px solid var(--linje-sterk);
}

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

/* --- Donasjonssida ---------------------------------------------------------

   Lenka står først og er en knapp; nummeret står som tekst ved siden av; QR-en
   står sist og er liten. Den som allerede er på mobilen kan ikke skanne sin
   egen skjerm, så for henne er QR-en pynt og knappen hele veien.
   -------------------------------------------------------------------------- */

.kostnader {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--linje);
  border-radius: var(--radius);
  background: var(--papir);
}

.seksjon--papir .kostnader { background: var(--hvit); }

.kostnader__rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linje);
}

.kostnader__rad:last-child { border-bottom: none; padding-bottom: 0; }
.kostnader__rad:first-child { padding-top: 0; }

.kostnader__rad dt { color: var(--daempet); }

.kostnader__rad dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  white-space: nowrap;
}

.vipps {
  margin: 1.75rem 0 2.5rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border: 2px solid var(--linje-sterk);
  border-radius: var(--radius);
  background: var(--hvit);
}

.vipps .handlinger { margin-bottom: 1.4rem; }

.vipps__nummer {
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--blekk);
}

.vipps__gebyr {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--sekundaer);
}

.qr {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.qr img {
  flex: none;
  width: 150px;
  height: 150px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: #fff;
  padding: 6px;
}

.qr figcaption {
  margin: 0;
  flex: 1 1 15rem;
  max-width: 26em;
}

/* --- Bunn ---------------------------------------------------------------- */

.bunn {
  background: var(--papir);
  border-top: 1px solid var(--linje);
  padding: 3rem 0 4rem;
}

.bunn > .ramme {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: calc(48rem + 2 * clamp(1.15rem, 0.4rem + 3vw, 4.5rem));
  margin: 0 auto;
}

.bunn__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.95rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linje-sterk);
  border-bottom: 1px solid var(--linje-sterk);
}

.bunn__nav a {
  color: var(--daempet);
  text-decoration: none;
  border-bottom: 1px solid var(--linje-sterk);
}

.bunn__nav a:hover { color: var(--blekk); border-bottom-color: currentColor; }

.bunn__nav a.er-her { color: var(--blekk); font-weight: 600; }

.navngivelse {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--daempet);
  margin: 0;
}

/* --- Utskrift ------------------------------------------------------------ */

@media print {
  .topplinje__nav,
  .topplinje__handling,
  .bunn__nav,
  .veier,
  .hopp-til-innhold,
  .figur__forstorr,
  .tilbake,
  .klipp,
  .gjennomgang { display: none; }

  /* Gjennomgangen skal kunne skrives ut hel, også de delene som ligger
     sammenlagt på skjermen. Pluss- og minustegnet er en skjermknapp og har
     ingenting på papir å gjøre.

     DET TRENGS TO REGLER, og bare den ene under sto her fram til 24.08.2026.
     Nettleserne skjuler et lukket <details> på to helt ulike måter:

       · eldre måte — nettleserens egen stilfil setter display: none på alt som
         ikke er <summary>. Da holder regelen med display: block.
       · nyere Chrome — innholdet ligger i pseudoelementet ::details-content,
         som er skjult med content-visibility: hidden. Da tar den første
         regelen ikke, for elementet er ikke skjult med display i det hele
         tatt.

     Målt i Chrome 148 den 24.08.2026: med bare den nederste regelen kom ti av
     de elleve delene ikke med på papiret — sida ble elleve overskrifter og én
     del. Nå kommer alle med.

     Kjenner ikke nettleseren ::details-content, faller hele den regelen bort
     av seg selv, og den nederste står igjen. Derfor kan begge stå. */
  .del__brett:not([open])::details-content {
    content-visibility: visible;
    contain-intrinsic-size: none;
    block-size: auto;
  }
  .del__brett:not([open]) > *:not(summary) { display: block; }
  .del__sammendrag::after { content: none; }

  .seksjon,
  .seksjon--moerk,
  .bunn { background: #fff; color: #000; }

  /* Orienteringslinja har sin egen flate, og på fagfolksida er den satt av
     `.seksjon--moerk .orientering` — spesifisitet 0,2,0 mot 0,1,0 over. Uten
     denne regelen kom hun ut som svart tekst på mørk flate hos den som skriver
     ut med bakgrunnsgrafikk slått på. Den grønne streken langs kanten er
     dekorasjon på skjerm og blir en blek strek på papir; på utskrift er den
     svart, slik at ramma fortsatt leses. */
  .orientering,
  .seksjon--hvit .orientering,
  .seksjon--moerk .orientering {
    background: #fff;
    border-left-color: #000;
  }

  .seksjon--moerk h2,
  .seksjon--moerk h3,
  .seksjon--moerk p,
  .kriterium h2,
  .kriterium p { color: #000; }

  /* Aksentgroennen er valgt for aa staa mot den moerke flata, og gir 1,7:1 mot
     hvitt papir. Naar flata blir hvit, maa lenkene bli svarte med den — ellers
     forsvinner nettopp kildehenvisningene i fagfolkavsnittet i utskrifta. */
  .seksjon--moerk a { color: #000; text-decoration: underline; }

  .kriterium:nth-child(odd) { background: #fff; }

  /* Gjennomgangen skal kunne henges på kjøleskapet. Hver del begynner på
     en ny side, og kortene mister flatene sine. */
  .del { break-before: page; border-top: none; }
  .innholdsliste,
  .merknad,
  .sonekort { background: #fff; border-color: #999; }
}