/* ny3: HolmestrandIT, bygget på nytt 03.10.2026.
   Teksten er ny2 sin, ordrett. Utformingen følger arbeidsordren § 3:
   mørk blå, varm lys bakgrunn og dempet gul, én skrift, brødtekst på 18 px,
   linjer på 60 til 70 tegn, få innrammede felt.
   Alle farger er tokener. Komponentene leser bare tokenene, aldri faste
   farger, så lys og mørk modus er det samme oppsettet. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("skrifter/Geist.woff2") format("woff2");
}

:root {
  --papir: #FAF7F1;
  --flate: #FFFFFF;
  --flate-2: #F3EEE4;
  --bilde-flate: #FAF7F1;
  --blekk: #1D2A33;
  --overskrift: #143C52;
  --dempet: #4F5E68;
  --linje: #E3DACB;
  /* kanten på skjemafelt og knapper: minst 3:1 mot alle flatene de står på
     (WCAG 1.4.11). Den forrige, #C9BCA6, ga 1,75:1. */
  --linje-sterk: #948772;
  --navy: #143C52;
  --navy-dyp: #0E2C3D;
  --lenke: #1A5577;
  --gul: #D99521;
  --gul-tekst: #8A5E12;
  --gul-flate: #F6EBD6;
  --knapp: #143C52;
  --knapp-tekst: #FFFFFF;
  --knapp-hover: #0E2C3D;
  /* fokusringen: 3,67:1 mot papiret; gul #D99521 ga bare 2,37:1 der.
     Bunnen og mørk modus bruker den lyse gule, som har god kontrast mot mørkt. */
  --fokus: #B07414;
  /* meldingen etter at skjemaet er sendt: 6,1 til 7,3:1 lys, 7,8 til 9,8:1 mørk */
  --ok: #1E6B3C;
  --feil: #A12A1F;
  --bunn: #143C52;
  --bunn-tekst: #E4EDF2;
  --bunn-dempet: #A9C0CD;
  --skygge: 0 1px 2px rgba(20, 60, 82, .06), 0 8px 24px rgba(20, 60, 82, .06);

  --maks: 1120px;
  --tekst: 66ch;
  --rand: 20px;
  --r: 14px;
  --r-s: 10px;
  --f-liten: 15px;
  --f-mini: 13px;
  --f-brod: 18px;
  --f-ingress: 20px;
  --f-h3: 21px;
  --f-h2: clamp(26px, 2.8vw, 32px);
  --f-h1: clamp(34px, 5vw, 52px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --papir: #101C24;
    --flate: #15242D;
    --flate-2: #182A35;
    --bilde-flate: #F3EEE4;
    --blekk: #E6EDF2;
    --overskrift: #EEF4F8;
    --dempet: #A3B2BC;
    --linje: #25384A;
    --linje-sterk: #5B788D;
    --fokus: #D99521;
    --ok: #86D3A0;
    --feil: #F2A097;
    --lenke: #9CC8E4;
    --gul-tekst: #E9BC6B;
    --gul-flate: #2A2617;
    --knapp: #E0A33E;
    --knapp-tekst: #17120A;
    --knapp-hover: #EDB75A;
    --bunn: #0B151B;
    --bunn-tekst: #E4EDF2;
    --bunn-dempet: #A3B2BC;
    --skygge: none;
    color-scheme: dark;
  }
}
:root[data-tema="mork"] {
  --papir: #101C24;
  --flate: #15242D;
  --flate-2: #182A35;
  --bilde-flate: #F3EEE4;
  --blekk: #E6EDF2;
  --overskrift: #EEF4F8;
  --dempet: #A3B2BC;
  --linje: #25384A;
  --linje-sterk: #5B788D;
  --fokus: #D99521;
  --ok: #86D3A0;
  --feil: #F2A097;
  --lenke: #9CC8E4;
  --gul-tekst: #E9BC6B;
  --gul-flate: #2A2617;
  --knapp: #E0A33E;
  --knapp-tekst: #17120A;
  --knapp-hover: #EDB75A;
  --bunn: #0B151B;
  --bunn-tekst: #E4EDF2;
  --bunn-dempet: #A3B2BC;
  --skygge: none;
  color-scheme: dark;
}

/* ── grunnlag ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font: 400 var(--f-brod)/1.62 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01" 1;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--overskrift); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: var(--f-h1); letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); letter-spacing: -0.01em; }
p, ul, ol, table { margin: 0 0 16px; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--lenke); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--overskrift); }
code { font: 500 .9em ui-monospace, SFMono-Regular, Menlo, monospace; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.hoppetil {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--knapp); color: var(--knapp-tekst); padding: 10px 16px; border-radius: var(--r-s);
}
.hoppetil:focus { top: 12px; }
.inn { max-width: var(--maks); margin: 0 auto; padding: 0 var(--rand); }
@media (min-width: 720px) { :root { --rand: 32px; } }

/* ── knapper ───────────────────────────────────────────────────── */
.btn svg, .knapp-rolig svg, .dl svg { width: 18px; height: 18px; flex: none; }
.btn, .knapp-rolig, .dl, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 16px/1 "Geist", sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn, .dl, button.btn { background: var(--knapp); color: var(--knapp-tekst); border: 1.5px solid var(--knapp); }
.btn:hover, .dl:hover, button.btn:hover { background: var(--knapp-hover); border-color: var(--knapp-hover); }
/* En lang knappetekst brytes heller enn å gjøre siden bredere («Kontakt oss
   om gjennomgang av oppsettet» ga 416 px på en 390 px telefon). Toppens
   ringeknapp brytes aldri. */
.btn, .knapp-rolig { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
.btn:active, .knapp-rolig:active, .dl:active { transform: translateY(1px); }
.knapp-rolig { background: transparent; color: var(--overskrift); border: 1.5px solid var(--linje-sterk); }
.knapp-rolig:hover { border-color: var(--overskrift); }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.lenkeknapp { font-weight: 600; text-decoration: none; color: var(--lenke); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lenkeknapp::after { content: "→"; transition: transform .18s var(--ease); }
.lenkeknapp:hover::after { transform: translateX(3px); }

/* ── toppen ────────────────────────────────────────────────────── */
.topp {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papir) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linje);
}
.topp .inn { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.merke { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--overskrift); font-weight: 650; font-size: 19px; letter-spacing: -0.02em; margin-right: auto; }
.merke svg { width: 32px; height: 32px; border-radius: 8px; }
.merke b { color: var(--gul); font-weight: 700; }
.meny { display: none; }
.meny a { color: var(--blekk); text-decoration: none; font-size: 16px; font-weight: 500; padding: 10px 12px; border-radius: var(--r-s); }
.meny a:hover, .meny a[aria-current="page"] { color: var(--overskrift); background: var(--flate-2); }
.meny .hjelpelenke { color: var(--gul-tekst); }
.ikonknapp {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--linje); background: transparent; color: var(--overskrift); cursor: pointer;
}
.ikonknapp svg { width: 20px; height: 20px; }
/* ⚠️ Knappene i toppen krymper aldri. På telefon står bare logoen, Ring og
   menyknappen der; lys og mørk visning ligger i menyen (.temavalg). Med alle
   fire på én linje trengte toppen 371 av 350 px, og knappene ble klemt til
   32 px brede. */
.topp .inn > .ikonknapp, .topp .btn { flex: none; }
.topp .btn { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.topp .ring-kort { display: inline-flex; }
.topp .ring-lang { display: none; }
.topp .inn > #tema { display: none; }
/* minste telefoner: ringeknappen blir bare ikonet, med navnet i aria-label */
@media (max-width: 359.98px) {
  .topp .ring-kort { width: 44px; padding: 0; font-size: 0; gap: 0; }
}
.temavalg {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 6px; padding: 12px 8px;
  border: 0; border-top: 1px solid var(--linje); border-radius: 0; background: transparent; color: var(--blekk);
  font: 500 18px/1.2 "Geist", sans-serif; text-align: left; cursor: pointer;
}
.temavalg svg { width: 20px; height: 20px; color: var(--overskrift); }
.temavalg .naa-lys, .temavalg .naa-mork { display: inline-flex; align-items: center; gap: 12px; }
.temavalg .naa-mork { display: none; }
:root[data-tema="mork"] .temavalg .naa-lys { display: none; }
:root[data-tema="mork"] .temavalg .naa-mork { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) .temavalg .naa-lys { display: none; }
  :root:not([data-tema="lys"]) .temavalg .naa-mork { display: inline-flex; }
}
.ikon-sol { display: none; }
:root[data-tema="mork"] .ikon-sol { display: block; }
:root[data-tema="mork"] .ikon-maane { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) .ikon-sol { display: block; }
  :root:not([data-tema="lys"]) .ikon-maane { display: none; }
}
.menyknapp[aria-expanded="true"] .ikon-liste { display: none; }
.menyknapp .ikon-lukk { display: none; }
.menyknapp[aria-expanded="true"] .ikon-lukk { display: block; }
.mobilmeny { border-top: 1px solid var(--linje); padding: 8px var(--rand) 16px; display: grid; gap: 2px; }
.mobilmeny[hidden] { display: none; }
.mobilmeny a { color: var(--blekk); text-decoration: none; font-size: 18px; font-weight: 500; padding: 12px 8px; border-radius: var(--r-s); }
.mobilmeny a:hover { background: var(--flate-2); }
@media (min-width: 980px) {
  .meny { display: flex; gap: 2px; margin-right: 8px; }
  .menyknapp, .mobilmeny { display: none !important; }
  .topp .inn > #tema { display: inline-grid; }
  .topp .ring-kort { display: none; }
  .topp .ring-lang { display: inline-flex; }
}

/* ── innledningen ──────────────────────────────────────────────── */
.hode { padding: 48px 0 56px; display: grid; gap: 36px; align-items: center; }
.hode .tekst { max-width: 40rem; }
.hode h1 + p, .hode h1 + .ingress { margin-top: 20px; }
.ingress { font-size: var(--f-ingress); line-height: 1.55; color: var(--blekk); }
.hode p:not(.ingress) { color: var(--dempet); }
.hode .tider { font-size: var(--f-liten); color: var(--dempet); margin-top: 18px; }
@media (min-width: 900px) {
  .hode { padding: 72px 0 80px; }
  .hode.med-bilde { grid-template-columns: 1.02fr .98fr; gap: 56px; }
}

/* ── delene: overskriften til venstre, innholdet til høyre ────── */
/* ⚠️ Byggeren legger alt etter overskriften i .delinnhold, så rutenettet
   har nøyaktig to deler. Med en overskrift som strakk seg over mange rader
   ble mellomrommene mellom de tomme radene til et stort tomrom. */
/* ⚠️ minmax(0, 1fr) og min-width: 0 også på telefon: uten dem gjorde en
   bred tabell hele delen bredere enn skjermen, og siden rullet sidelengs. */
.del { border-top: 1px solid var(--linje); padding: 48px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.del > * { min-width: 0; }
.del > h2 { max-width: 22ch; }
.delinnhold > p, .delinnhold > ul, .delinnhold > ol, .delinnhold > h3, .delinnhold > .viktig { max-width: var(--tekst); }
.delinnhold > h3 { margin: 28px 0 10px; }
.delinnhold > figure.illustrasjon { margin: 0 0 24px; }
.del.uten-tittel { border-top: 0; padding-top: 8px; }
@media (min-width: 980px) {
  .del { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; padding: 64px 0; }
  .del > h2 { align-self: start; position: sticky; top: 100px; }
  .del.uten-tittel { grid-template-columns: minmax(0, 1fr); }
  /* en del med tre kort får hele bredden, med overskriften over */
  .del.bred { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .del.bred > h2 { position: static; max-width: none; }
}

/* ── illustrasjonene ───────────────────────────────────────────── */
figure.illustrasjon { margin: 0; }
figure.illustrasjon .ramme { background: var(--bilde-flate); border-radius: var(--r); overflow: hidden; isolation: isolate; }
figure.illustrasjon img { width: 100%; height: auto; }
/* Illustrasjonene har hvit bakgrunn. multiply lar den gå i ett med flaten
   bak, i begge modusene, i stedet for å stå som et hvitt rektangel. */
.ramme img { mix-blend-mode: multiply; }
figure.illustrasjon figcaption { font-size: var(--f-mini); color: var(--dempet); margin-top: 8px; }
.hode figure.illustrasjon { order: 2; }
@media (min-width: 900px) { .hode figure.illustrasjon { order: 0; } }

/* ── tre kort ──────────────────────────────────────────────────── */
.kort3 { display: grid; gap: 28px; margin-top: 8px; }
.kort3 > div { display: grid; align-content: start; gap: 12px; padding-top: 20px; border-top: 2px solid var(--gul); }
.kort3 > div > .ramme { background: var(--bilde-flate); border-radius: var(--r); overflow: hidden; isolation: isolate; margin-bottom: 6px; aspect-ratio: 4 / 3; }
/* like store bildeflater i alle tre kortene, også når bildene har ulikt format */
.kort3 > div > .ramme picture { display: block; width: 100%; height: 100%; }
.kort3 > div > .ramme img { width: 100%; height: 100%; object-fit: contain; }
.kort3 .knapper { margin-top: 4px; }
.kort3 h2.korttittel, .kort3 h3 { font-size: var(--f-h3); }
@media (min-width: 760px) { .kort3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── trinn ─────────────────────────────────────────────────────── */
ol.trinn { list-style: none; padding: 0; margin: 0; counter-reset: trinn; display: grid; gap: 4px; }
ol.trinn li { counter-increment: trinn; position: relative; padding: 14px 0 14px 56px; border-bottom: 1px solid var(--linje); }
ol.trinn li:last-child { border-bottom: 0; }
ol.trinn li::before {
  content: counter(trinn); position: absolute; left: 0; top: 12px;
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gul-flate); color: var(--gul-tekst); font-weight: 650; font-size: 16px;
}

/* ── tabeller og priser ────────────────────────────────────────── */
.tabell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linje); }
thead th { font-size: var(--f-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dempet); }
tbody th { font-weight: 600; color: var(--overskrift); }
td.pris { white-space: nowrap; font-weight: 600; color: var(--overskrift); }
.hopp { font-size: var(--f-liten); }
/* Prislistene på telefon: tjenesten og prisen på én linje, beskrivelsen
   under. Tre kolonner på 350 px ga ti tegn per linje i beskrivelsen.
   Byggeren gir tabellen eksplisitte roller, så den leses fortsatt som en
   tabell når visningen endres; kolonneoverskriftene er da bare for
   skjermlesere. */
@media (max-width: 639.98px) {
  .prisliste table, .prisliste tbody { display: block; }
  .prisliste thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prisliste tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--linje); }
  .prisliste td { display: block; padding: 0; border: 0; }
  .prisliste td:first-child { flex: 1 1 10rem; font-weight: 600; color: var(--overskrift); }
  .prisliste td.pris { flex: 0 1 auto; margin-left: auto; white-space: normal; text-align: right; }
  .prisliste td:nth-child(3) { flex: 1 1 100%; color: var(--dempet); }
  /* etikett og verdi («Behandlingsansvarlig | HOLMESTRANDIT AS»): etiketten
     over verdien, så en lang e-postadresse får hele bredden */
  .nokkeltabell table, .nokkeltabell tbody, .nokkeltabell tr, .nokkeltabell th, .nokkeltabell td { display: block; }
  .nokkeltabell tr { padding: 12px 0; border-bottom: 1px solid var(--linje); }
  .nokkeltabell th, .nokkeltabell td { padding: 0; border: 0; }
  .nokkeltabell th { font-size: var(--f-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--dempet); margin-bottom: 4px; }
  .nokkeltabell td { overflow-wrap: break-word; }
}

/* ── bokser ────────────────────────────────────────────────────── */
.viktig, .boks, .cta-inline {
  background: var(--gul-flate); border-radius: var(--r); padding: 20px 22px;
}
.boks { background: var(--flate-2); }
h2.boksh { font-size: var(--f-h3); margin: 0 0 10px; }
.oppdatert { font-size: var(--f-liten); color: var(--dempet); }
.fyll { background: var(--gul-flate); border-radius: 4px; padding: 0 4px; }

/* ── kontakt ───────────────────────────────────────────────────── */
.tider { color: var(--dempet); }
.kontaktlinjer { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0; }
.kontaktlenke { font-size: 22px; font-weight: 600; color: var(--overskrift); text-decoration: none; }
.kontaktlenke:hover { text-decoration: underline; }
.fet { font-weight: 600; color: var(--overskrift); }
form#kontaktskjema {
  margin-top: 24px; display: grid; gap: 8px;
  background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r); padding: 24px;
  box-shadow: var(--skygge);
}
form#kontaktskjema label { font-weight: 600; font-size: 16px; margin-top: 10px; color: var(--overskrift); }
form#kontaktskjema .valgfritt { font-weight: 400; color: var(--dempet); }
form#kontaktskjema input, form#kontaktskjema select, form#kontaktskjema textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-s);
  border: 1.5px solid var(--linje-sterk); background: var(--papir); color: var(--blekk);
  font: 400 17px/1.4 "Geist", sans-serif;
}
form#kontaktskjema textarea { min-height: 140px; resize: vertical; }
form#kontaktskjema input:focus, form#kontaktskjema select:focus, form#kontaktskjema textarea:focus { border-color: var(--overskrift); outline: 3px solid color-mix(in srgb, var(--fokus) 45%, transparent); outline-offset: 0; }
.frow { display: grid; gap: 8px 20px; }
/* feltene står på linje nederst, også når én etikett går over to linjer */
.frow > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
@media (min-width: 720px) { .frow { grid-template-columns: 1fr 1fr; } }
.fhint { font-size: var(--f-liten); color: var(--dempet); margin: 0; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.fbot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.formmsg { font-size: var(--f-liten); color: var(--dempet); }
.formmsg.ok { color: var(--ok); font-weight: 500; }
.formmsg.err { color: var(--feil); font-weight: 500; }

/* ── fjernhjelp ────────────────────────────────────────────────── */
.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.picker button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linje-sterk); background: transparent; color: var(--blekk);
  font: 500 16px/1 "Geist", sans-serif;
}
.picker button[aria-pressed="true"] { background: var(--overskrift); border-color: var(--overskrift); color: var(--papir); }
.os { font-size: var(--f-liten); color: var(--dempet); margin-top: 10px; }
.setup { margin-top: 20px; background: var(--flate-2); border-radius: var(--r); padding: 20px; }
.setup h3 { margin-bottom: 6px; }
.hint { color: var(--dempet); font-size: var(--f-liten); }
/* Etiketten og Kopier på én linje, verdien under i hele bredden. Side om
   side brøt servernavnet midt i et ord på telefon («holmestrandi / t.no»). */
.field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl kopier" "verdi verdi";
  align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--linje);
}
.field .lbl { grid-area: lbl; color: var(--dempet); font-size: var(--f-liten); }
.field code { grid-area: verdi; overflow-wrap: anywhere; }
.field button.copy { grid-area: kopier; }
@media (min-width: 720px) {
  .field { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "lbl verdi kopier"; }
}
button.copy {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linje-sterk); background: transparent; color: var(--overskrift); font: 600 14px/1 "Geist", sans-serif;
}

/* ── artikler og avtaler ───────────────────────────────────────── */
.tekstside { max-width: 46rem; margin: 0 auto; padding: 48px 0 72px; }
.tekstside h1 { margin-bottom: 18px; }
.tekstside h2 { font-size: clamp(22px, 2.4vw, 26px); margin: 40px 0 12px; }
.tekstside h3 { margin: 28px 0 8px; }
.tekstside ul, .tekstside ol { padding-left: 22px; }
.tekstside li { margin-bottom: 6px; }
.tekstside .tabell { margin: 8px 0 20px; }
.tekstside table { margin: 0; font-size: 16px; }
.tekstside figure.illustrasjon { margin: 8px 0 28px; }
.tekstside .cta-inline { margin-top: 32px; }

/* ── bunnen ────────────────────────────────────────────────────── */
.bunn { background: var(--bunn); color: var(--bunn-tekst); margin-top: 24px; --fokus: #D99521; }
.bunn .inn { display: grid; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
.bunn .merke { color: #FFFFFF; }
.bunn .merke b { color: var(--gul); }
.bunn a { color: var(--bunn-tekst); }
.bunn .sted, .bunn .orgnr { color: var(--bunn-dempet); font-size: var(--f-liten); }
.bunn .lenker { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--f-liten); }
.bunn .lenker { row-gap: 0; }
.bunn .lenker a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.bunn .lenker a:hover { text-decoration: underline; }
.bunn .hoyre { display: grid; gap: 14px; align-content: start; }
.bunn .epost { font-size: 18px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.bunn .btn { background: var(--gul); border-color: var(--gul); color: #17120A; justify-self: start; }
.bunn .btn:hover { background: #E8A93F; border-color: #E8A33A; }
@media (min-width: 860px) {
  .bunn .inn { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .bunn .hoyre { justify-items: end; text-align: right; }
  .bunn .hoyre .btn { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .topp, .bunn, form#kontaktskjema, .knapper { display: none !important; }
  body { background: #fff; color: #000; }
}