@charset "UTF-8";
/*
 * Norea — komponenter.
 *
 * Skallet og byggesteinene malene setter sammen. Kopiert fra skissenes
 * assets/proto/components.css (14.10.2026) og renset for skissegrep: merket i
 * toppen er ute, og plassholderen ligger i plassholder.css, som bare lastes
 * utenfor produksjon. Farger kommer bare fra tokens.css. Tekstparene er målt
 * mot DESIGN.md «Tillatte par».
 *
 * Innhold
 *   1  Hovedinnholdet
 *   2  Hopp-lenke
 *   3  Knapper (før topp og meny, så de kan overstyre knappens padding)
 *   4  Topp og meny
 *   5  Flater og seksjoner
 *   6  Etikettboks, typemerke, tekstboks, markering og strek
 *   7  Kort og rollekort
 *   8  Artikkelblokker
 *   9  Elementer (SVG)
 *   10 Bunn
 */

/* ── 1 Hovedinnholdet ──────────────────────────────── */
/* <main> får fokus fra hopp-lenka (tabindex="-1"). Ingen ring rundt hele sida. */
.hovedinnhold:focus { outline: none; }

/* ── 2 Hopp-lenke ──────────────────────────────────── */
.hopp {
  position: absolute;
  left: var(--sidemarg);
  top: -10rem;
  z-index: var(--z-hopp);
  background: var(--color-primary);
  color: var(--color-surface);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.hopp:focus { top: var(--space-sm); }

/* Til spilleren: finnes bare når lydspilleren vises (player.js setter .har-lydspiller) */
.hopp--spiller { display: none; }
.har-lydspiller .hopp--spiller { display: block; }

/* ── 3 Knapper ─────────────────────────────────────── */
/*
 * Minst 44 px høye. 2 px radius er bare for knapper, felt og merkelapper.
 * Fargene leses fra flatens kontekst (§ 5), så samme klasse virker på sand,
 * blå og oransje.
 */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0.75rem var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.knapp--primaer {
  background: var(--knapp-flate, var(--color-primary));
  color: var(--knapp-tekst, var(--color-surface));
}

.knapp--primaer:hover { background: var(--knapp-hover, var(--color-primary-deep)); }

.knapp--sekundaer {
  background: transparent;
  color: var(--kant, var(--color-ink));
  border-color: var(--kant, var(--color-ink));
}

.knapp--sekundaer:hover {
  background: var(--kant, var(--color-ink));
  color: var(--kant-hover-tekst, var(--color-surface));
}

/* Oransje flate, alltid sort tekst (6,94:1). Aldri oransje tekst. */
.knapp--oransje { background: var(--color-accent); color: var(--color-ink); }
.knapp--oransje:hover { border-color: var(--color-ink); }

.knapp--tertiaer {
  padding: var(--space-xs) 0.25rem;
  background: transparent;
  color: var(--lenke, var(--color-primary));
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.knapp--tertiaer:hover { text-decoration-thickness: 2px; }

.knapp-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* ── 4 Topp og meny ────────────────────────────────── */
/*
 * DOM-rekkefølgen er logo · [søk] · meny-knapp · meny · Gi. Menyen står rett
 * etter knappen som åpner den, så Tab går inn i menyen og ikke forbi den.
 * På mobil legges menyen under raden med `order`; på desktop mellom logo og Gi.
 */
.topp {
  background: var(--color-surface);
  border-bottom: 1px solid var(--line);
}

.topp__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
}

.topp__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--color-ink);
}

.topp__logo svg { width: 6.5rem; }

.topp__sok {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  padding-inline: var(--space-xs);
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}

.topp__sok svg { width: 1.25rem; height: 1.25rem; flex: none; }
.topp__sok:hover span { text-decoration: underline; }

/* Under 36em er søk bare ikonet. Teksten er fortsatt navnet på lenken. */
@media (max-width: 35.99em) {
  .topp__sok-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.topp__gi { order: 2; padding: var(--space-xs) var(--space-sm); }

/* Meny-knappen finnes bare med JS. Uten JS står menyen åpen. Menyen ligger over
   lydspilleren (--z-meny over --z-lydspiller), så «Lukk menyen» aldri havner bak den. */
.meny-knapp {
  display: none;
  order: 1;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-xs) 0.75rem;
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.6;
}

.js .meny-knapp { display: inline-flex; }
.meny-knapp svg { width: 1.25rem; height: 1.25rem; flex: none; }
.meny-knapp .ikon-lukk { display: none; }
.meny-knapp[aria-expanded="true"] .ikon-meny { display: none; }
.meny-knapp[aria-expanded="true"] .ikon-lukk { display: block; }

.meny {
  position: relative;
  z-index: var(--z-meny);
  order: 3;
  flex-basis: 100%;
  padding-block: var(--space-md) var(--space-lg);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--line);
  background: var(--color-surface);
}

.js .meny:not(.er-aapen) { display: none; }

/* Sanden går helt ut til kanten, så spilleren ikke titter fram på sidene av en åpen meny */
.meny::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--sidemarg) * -1);
  z-index: -1;
  background: var(--color-surface);
}

.meny a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem; /* korte ord som Lytt og Gi får også 44 px klikkflate */
  color: var(--color-ink);
  text-decoration: none;
}

/* Sida du står på (aria-current) og området den hører til (forelderen i menyen) */
.meny a:hover,
.meny a[aria-current="page"],
.meny a.er-i-omradet {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* De store områdene i Syne på mobil, de små i brødtekst. På desktop står alle på én rad */
.meny__store a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.meny__sma {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.meny__sma a { font-weight: var(--font-body-weight); }

.meny__lukk { margin-top: var(--space-lg); }

/* Pil etter lenker til andre nettsteder (Nettbutikk). Teksten «(eksternt nettsted)» står skjult i lenka. */
.lenke-ekstern {
  flex: none;
  width: 0.875em;
  height: 0.875em;
  margin-left: 0.25em;
}

/* Undermenyene (Bli med, Om oss). På mobil en nestet liste under lenka, alltid synlig, i brødtekst.
   Knappen som åpner den, finnes bare på desktop. */
.meny__under {
  margin-bottom: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--line);
}

/* Hele raden er klikkflaten, så korte ord som Gi og Be også er 44 px brede */
.meny__store .meny__under a {
  display: flex;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.meny__under-knapp {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  color: var(--color-ink);
  border: 0;
  border-radius: var(--radius-sm);
}

.meny__under-knapp svg { width: 1.125rem; height: 1.125rem; }
.meny__under-knapp[aria-expanded="true"] svg { rotate: 180deg; }

/* Under 375 px (320, 360) får logo, Søk, Meny og Gi ikke plass på én rad uten at logoen
   krymper og Meny-knappen står med bare tekst. Skissen stoppet på 360 px og brøt raden der. */
@media (max-width: 23.43em) {
  .topp__rad:has(.topp__sok) { gap: 0.25rem; }
  .topp__rad:has(.topp__sok) .topp__logo svg { width: 5.5rem; }
  .topp__rad:has(.topp__sok) .meny-knapp { padding-inline: var(--space-xs); }
  .topp__rad:has(.topp__sok) .meny-knapp svg { display: none; }
}

@media (min-width: 36em) {
  .topp__logo svg { width: 8rem; }
}

@media (min-width: 64em) {
  .topp__rad { flex-wrap: nowrap; gap: var(--space-md); min-height: 5rem; }
  .topp__logo svg { width: 9rem; }
  .topp__gi { padding: 0.75rem var(--space-md); }

  .js .meny-knapp { display: none; }

  .meny,
  .js .meny:not(.er-aapen) {
    order: 1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-basis: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .topp__sok { order: 1; }

  .meny__store,
  .meny__sma { display: flex; gap: var(--space-md); }

  .meny__store a {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
  }

  .meny__sma {
    margin: 0;
    padding: 0 0 0 var(--space-md);
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .meny__lukk { display: none; }
  .meny::before { content: none; }

  /* Undermenyen som nedtrekk under Bli med: sand med hårfin kant, rette hjørner, ingen skygge.
     Ligger i .meny, så den arver --z-meny og står over innholdet under toppen. */
  .meny__forelder {
    position: relative;
    display: flex;
    align-items: center;
  }

  .js .meny__under-knapp { display: inline-flex; margin-right: -0.75rem; }

  .meny__under {
    position: absolute;
    top: calc(100% + 1.4375rem); /* flukter med toppens bunnlinje: radens luft + halve Gi-knappen */
    left: calc(var(--space-sm) * -1);
    min-width: 15rem;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--line);
  }


  .js .meny__under-knapp[aria-expanded="false"] + .meny__under,
  html:not(.js) .meny__forelder:not(:hover, :focus-within) > .meny__under { display: none; }
}

/* 64–80em: menyen med Se og Bli med-knappen får ikke plass med full luft ved siden av logo,
   Søk og Gi. Tettere luft, og Søk som bare ikon (navnet står fortsatt i lenka). */
@media (min-width: 64em) and (max-width: 79.99em) {
  .topp__rad,
  .meny,
  .js .meny:not(.er-aapen),
  .meny__store,
  .meny__sma { gap: var(--space-sm); }

  .meny__sma { padding-left: var(--space-sm); }

  .topp__sok-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── 5 Flater og seksjoner ─────────────────────────── */
.seksjon { padding-block: var(--space-2xl); }
.seksjon--tett { padding-block: var(--space-xl); }
.seksjon--skille { border-top: 1px solid var(--line); }

@media (min-width: 56.25em) {
  .seksjon { padding-block: var(--space-3xl); }
  .seksjon--tett { padding-block: var(--space-2xl); }
}

/*
 * Fargekontekstene. Hver flate setter variablene, og alt inni arver dem.
 * Et kort (hvitt) på blå flate setter sand-konteksten tilbake for seg selv.
 * Parene står i README: sand/hvit, blå og oransje.
 */
.flate--sand,
.kort,
.faktaboks {
  --lenke: var(--color-primary);
  --uthev: var(--color-primary);
  --knapp-flate: var(--color-primary);
  --knapp-tekst: var(--color-surface);
  --knapp-hover: var(--color-primary-deep);
  --kant: var(--color-ink);
  --kant-hover-tekst: var(--color-surface);
  --element: var(--color-primary);
}

/* Blå og dyp blå: tekst, lenker og fokusring i sand (9,79:1 og 12,73:1) */
.flate--bla,
.flate--dyp,
.dette-er-norea,
.bunn {
  --lenke: var(--color-surface);
  --fokus: var(--color-surface);
  --uthev: var(--color-surface);
  --knapp-flate: var(--color-surface);
  --knapp-tekst: var(--color-primary);
  --knapp-hover: var(--color-field);
  --kant: var(--color-surface);
  --kant-hover-tekst: var(--color-primary);
  --element: var(--color-surface);
  color: var(--color-surface);
  /* Light brukes aldri som lys tekst på blå flate (byggeplanen § 7.2). Overskrifter, etiketter og
     knapper har egen vekt og påvirkes ikke. */
  font-weight: 400;
}

/* Oransje: all tekst sort. Blått på oransje holder bare som stor tekst og bare
   med de to mørkeste blåkandidatene, så flatene bruker det ikke. */
.flate--oransje,
.neste-steg {
  --lenke: var(--color-ink);
  --fokus: var(--color-ink);
  --uthev: var(--color-ink);
  --kant: var(--color-ink);
  --kant-hover-tekst: var(--color-surface);
  --element: var(--color-ink);
  color: var(--color-ink);
}

.flate--sand,
.faktaboks { --fokus: var(--color-ink); }

.flate--sand { background: var(--color-surface); color: var(--color-ink); }
.flate--bla { background: var(--color-primary); }
.flate--dyp { background: var(--color-primary-deep); }
.flate--oransje { background: var(--color-accent); }
.flate--oransje .knapp--oransje { border-color: var(--color-ink); }

/* ── 6 Etikettboks, typemerke, tekstboks, markering og strek ──── */
.etikettboks {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem var(--space-xs);
  border-radius: var(--radius-sm);
}

.etikettboks--bla { background: var(--color-primary); color: var(--color-surface); }
.etikettboks--sort { background: var(--color-ink); color: var(--color-surface); }
/* Unge for unådde: UFU-signaturen, oransje tekst på sort (6,94:1). Bare for UFU. */
.etikettboks--ufu { background: var(--color-ink); color: var(--color-accent); }

.typemerke {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uthev, var(--color-primary));
}

/* text-box-accent: profilens bildekort-grep. Rette hjørner, sort tekst i h2. */
.tekstboks {
  background: var(--color-accent);
  color: var(--color-ink);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-none);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/*
 * Markering: profilens typografiske grep (byggeplanen § 4.12). En oransje flate bak ett ord i en
 * overskrift i Syne, maks én per flate og aldri i brødtekst. Flaten følger linjeskiftet (clone).
 * Markupen er <mark class="markering"> fra nrea_markering(), så UA-stilen (gul flate) nullstilles
 * her. Sort på oransje er 6,94:1 og holder med alle blåkandidatene, og er standard, også på blå
 * flate (der resten av overskriften er sand). .markering--bla er blå på oransje (4,23:1 med
 * arbeidsblåfargen, under 3:1 med tre av fem kandidater): bare i hero-størrelse, og bare med en
 * blåfarge som tåler det.
 */
.markering {
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 0.03em 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.markering--bla { color: var(--color-primary); }

/* Overskriften med markering får litt mer linjeavstand, så flaten ikke berører linja over
   eller under (profilmanualen: 1.2). Gjelder også heroene, som ellers står tettere. */
:is(h1, h2, h3):has(.markering) { line-height: 1.2; }

/*
 * Oransje strek: 3,5 × 0,3 rem under en overskrift eller etter en tekstblokk, én per tekstblokk.
 * Står overskriften med markering, kommer streken under teksten. Aldri på oransje flate, og aldri
 * som lenkeunderstrek. Dekor: <span class="strek" aria-hidden="true"></span>. flex: none, så den
 * ikke krymper i en flex-forelder.
 */
.strek {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 0.3rem;
  margin: 0;
  background: var(--color-accent);
  border: 0;
}

/* ── 7 Kort og rollekort ───────────────────────────── */
.kort {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-field);
  color: var(--color-ink);
  border-radius: var(--radius-none);
}

.kort__bilde {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-surface-deep);
}

.kort__innhold {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  padding: var(--space-md);
}

.kort__tittel { font-size: var(--text-h3); }

/* Hele kortet er klikkbart via lenken i tittelen. Fokusringen tegnes rundt kortet. */
.kort__lenke { color: inherit; text-decoration: none; }
/* ::before, så ::after er ledig til piler o.l. i lenketeksten */
.kort__lenke::before { content: ""; position: absolute; inset: 0; }
.kort:hover .kort__lenke { text-decoration: underline; text-decoration-thickness: 2px; }
.kort__lenke:focus-visible { outline: none; }
/* Ringen tegnes utenfor kortet, på flaten rundt, så .kort setter ikke --fokus selv */
.kort:has(.kort__lenke:focus-visible) {
  outline: var(--fokus-bredde) solid var(--fokus, var(--color-ink));
  outline-offset: var(--fokus-avstand);
}

.kort__meta { font-size: var(--text-label); font-weight: 500; }

.kort-rad {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .kort-rad { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 56.25em) {
  .kort-rad { grid-template-columns: repeat(3, 1fr); }
}

/*
 * Rollekort: Gi · Be · Dra ut · Ambassadør. Ett foto, én setning, ett steg.
 * Markup: <ul class="roller"><li class="kort rollekort">…</li></ul>
 */
.roller {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 36em) {
  .roller { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .roller { grid-template-columns: repeat(4, 1fr); }
}

.rollekort .kort__bilde { aspect-ratio: 4 / 3; }
.rollekort .kort__innhold { gap: var(--space-sm); }
.rollekort .kort__tittel { font-size: var(--text-h2); }

.rollekort .rollekort__steg {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-weight: 600;
  color: var(--lenke, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.rollekort__steg::after { content: " \2192"; content: " \2192" / ""; }

/* ── 8 Artikkelblokker ─────────────────────────────── */
/* Brødtekst i artikkel og andakt: 62 ch, avstand etter nærhet */
.brodtekst > * + * { margin-top: var(--space-md); }
.brodtekst > :is(h2, h3) { margin-top: var(--space-xl); }
.brodtekst > :is(h2, h3) + * { margin-top: var(--space-sm); }
.brodtekst :is(ul, ol):not([class]) { padding-left: 1.25em; max-width: var(--measure); }
.brodtekst li + li { margin-top: var(--space-xs); }

.bibelsitat {
  max-width: var(--measure);
  padding-left: var(--space-md);
  border-left: 4px solid var(--color-accent);
}

.bibelsitat p { font-size: var(--text-h3); line-height: 1.5; }
.bibelsitat cite { display: block; margin-top: var(--space-xs); font-style: normal; font-weight: 500; }

.faktaboks {
  max-width: var(--measure);
  background: var(--color-surface-deep);
  color: var(--color-ink);
  padding: var(--space-md);
}

/* «Mer som dette»: tre kort med typemerke, så ett besøk blir to */
.mer-som-dette { padding-block: var(--space-2xl); border-top: 1px solid var(--line); }
.mer-som-dette > .container > h2,
.mer-som-dette > h2 { margin-bottom: var(--space-lg); }

/* Ett neste steg: text-box-accent med sort tekst */
.neste-steg {
  background: var(--color-accent);
  color: var(--color-ink);
  padding: var(--space-lg);
  border-radius: var(--radius-none);
}

.neste-steg > * + * { margin-top: var(--space-sm); }
.neste-steg > .knapp-rad,
.neste-steg > .knapp { margin-top: var(--space-md); }

@media (min-width: 48em) {
  .neste-steg { padding: var(--space-xl); }
}

/* «Dette er Norea»: én setning, tre fakta, én handling. Blå flate. */
.dette-er-norea {
  background: var(--color-primary);
  padding: var(--space-lg);
}

.dette-er-norea > * + * { margin-top: var(--space-md); }
.dette-er-norea__setning { font-size: var(--text-h2); }

.dette-er-norea__fakta {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.dette-er-norea__fakta > div { border-top: 1px solid var(--color-primary-light); padding-top: var(--space-sm); }
.dette-er-norea__fakta dt { font-size: var(--text-h1); line-height: 1.1; }
.dette-er-norea__fakta dd { margin-top: var(--space-xs); }

@media (min-width: 48em) {
  .dette-er-norea { padding: var(--space-xl); }
  .dette-er-norea__fakta { grid-template-columns: repeat(3, 1fr); }
}

/* ── 9 Elementer (SVG) ─────────────────────────────── */
/*
 * Ett bærende element per flate. Elementene er dekor: aria-hidden, og de
 * legges ALDRI over eller under tekst. Derfor reserverer forelderen plass:
 *
 *   <section class="har-element reserver-hoyre">
 *     <?php nrea_svg_e( 'Sirkel', 'el el--sirkel el--h' ); ?>
 *     <div class="container">…tekst…</div>
 *   </section>
 *
 * --el er elementets bredde, --kutt andelen som ligger utenfor kanten.
 * reserver-* gir innholdet padding lik den synlige delen pluss luft.
 */
.har-element {
  --el: 10rem;
  --kutt: 0.5;
  --el-synlig: calc(var(--el) * (1 - var(--kutt)));
  position: relative;
  overflow: hidden;
}

.har-element > :not(.el) { position: relative; }

.reserver-hoyre > :not(.el) { padding-right: calc(var(--el-synlig) + var(--space-lg)); }
.reserver-venstre > :not(.el) { padding-left: calc(var(--el-synlig) + var(--space-lg)); }
.reserver-topp { padding-top: calc(var(--el-synlig) + var(--space-md)); }
.reserver-bunn { padding-bottom: calc(var(--el-synlig) + var(--space-md)); }

/*
 * Plassering: kant (h, v) eller hjørne (oh = øverst høyre, ov, nh, nv).
 * Elementet settes i kanten og forskyves med --k av sin EGEN bredde og høyde,
 * så kuttet blir likt for runde og brede elementer.
 */
.el {
  --k: var(--kutt, 0.5);
  --x: 0%;
  --y: 0%;
  position: absolute;
  display: block;
  width: var(--el);
  height: auto;
  max-width: none;
  pointer-events: none;
  color: var(--element, var(--color-primary));
  translate: var(--x) var(--y);
}

.el--h, .el--oh, .el--nh { right: 0; --x: calc(var(--k) * 100%); }
.el--v, .el--ov, .el--nv { left: 0; --x: calc(var(--k) * -100%); }
.el--h, .el--v { top: 50%; --y: -50%; }
.el--oh, .el--ov { top: 0; --y: calc(var(--k) * -100%); }
.el--nh, .el--nv { bottom: 0; --y: calc(var(--k) * 100%); }

/*
 * Sirkelen står aldri hel. Uten plasseringsklasse skjæres den av høyre kant,
 * og kuttet har et gulv på 0.3, så minst 30 % alltid ligger utenfor.
 */
.el--sirkel { --k: max(var(--kutt, 0.5), 0.3); aspect-ratio: 1; }
.el--sirkel:not(.el--h, .el--v, .el--oh, .el--ov, .el--nh, .el--nv) {
  right: 0;
  top: 50%;
  --x: calc(var(--k) * 100%);
  --y: -50%;
}

/* Størrelser. Store elementer, få av dem. */
.el--s { --el: 8rem; }
.el--m { --el: 14rem; }
.el--l { --el: clamp(16rem, 36vw, 34rem); }

.har-element:has(> .el--s) { --el: 8rem; }
.har-element:has(> .el--m) { --el: 14rem; }
.har-element:has(> .el--l) { --el: clamp(16rem, 36vw, 34rem); }

/* Farge: enfargede elementer (Sirkel, Globe, Blink) følger `color`. */
.el--oransje { color: var(--color-accent); }
.el--sort { color: var(--color-ink); }
.el--sand { color: var(--color-surface); }
.el--lys { color: var(--color-primary-light); } /* Bare på blå flate: 3,04:1 mot primary */

/* Piler, Streker og Diagram er flerfargede. Denne klassen gjør dem enfargede. */
.el--enfarget path { fill: currentColor; }

/* Skjul et element under en bredde der det ikke får plass uten å møte tekst */
@media (max-width: 56.24em) {
  .el--kun-bred { display: none; }
  .har-element:has(> .el--kun-bred) > :not(.el) { padding-left: 0; padding-right: 0; }
}

/* ── 10 Bunn ───────────────────────────────────────── */
.bunn {
  background: var(--color-primary-deep);
  padding-block: var(--space-2xl) var(--space-xl);
}

.bunn__logo { display: inline-flex; color: var(--color-field); }
.bunn__logo svg { width: 11rem; }

.bunn__kolonner {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

.bunn__overskrift { color: var(--color-accent); margin-bottom: var(--space-xs); }

.bunn__liste a,
.bunn__overskrift a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* Samtykkeknappen (Complianz) ser ut som lenkene rundt den, men er en <button> */
.lenkeknapp {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--lenke, var(--color-primary));
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.lenkeknapp:hover { text-decoration-thickness: 2px; }

.bunn__base {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-primary-light);
  max-width: none;
}

/* Kolonnene kommer fra menyene (Norea, Mer, Om nettstedet), så antallet varierer. To og to fra
   36em med logo og setning over, alle på én rad fra 64em. */
@media (min-width: 36em) {
  .bunn__kolonner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bunn__om { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  /* min-content: lange ord som Tilgjengelighetserklæring brytes ikke, så kolonnen må romme dem */
  .bunn__kolonner {
    grid-template-columns: minmax(0, 2fr);
    grid-auto-columns: minmax(min-content, 1fr);
    grid-auto-flow: column;
  }

  .bunn__om { grid-column: auto; }
}