/* ==========================================================================
   droneruleseurope.com
   Alle farger går gjennom tokens. Ingen rå hex utenfor :root/[data-tema].
   ========================================================================== */

:root {
  /* Farge — himmelblå primær, teal aksent */
  --h-primar: 210 100% 44%;
  --h-primar-lys: 210 100% 96%;
  --h-aksent: 175 78% 34%;
  --h-bg: 210 30% 98%;
  --h-flate: 0 0% 100%;
  --h-flate-2: 210 30% 96%;
  --h-tekst: 215 30% 12%;
  --h-tekst-svak: 215 14% 42%;
  --h-kant: 214 22% 88%;
  --h-ok: 158 68% 32%;
  --h-advarsel: 32 92% 42%;
  --h-feil: 355 72% 46%;

  --primar: hsl(var(--h-primar));
  --primar-mot: #fff;
  --aksent: hsl(var(--h-aksent));
  --bg: hsl(var(--h-bg));
  --flate: hsl(var(--h-flate));
  --flate-2: hsl(var(--h-flate-2));
  --tekst: hsl(var(--h-tekst));
  --tekst-svak: hsl(var(--h-tekst-svak));
  --kant: hsl(var(--h-kant));
  --ok: hsl(var(--h-ok));
  --advarsel: hsl(var(--h-advarsel));
  --feil: hsl(var(--h-feil));

  --tone-primar: color-mix(in oklab, var(--primar) 8%, var(--flate));
  --tone-aksent: color-mix(in oklab, var(--aksent) 10%, var(--flate));
  --tone-advarsel: color-mix(in oklab, var(--advarsel) 12%, var(--flate));
  --tone-ok: color-mix(in oklab, var(--ok) 10%, var(--flate));

  /* Rom */
  --rom-1: .25rem;
  --rom-2: .5rem;
  --rom-3: .75rem;
  --rom-4: 1rem;
  --rom-5: 1.5rem;
  --rom-6: 2rem;
  --rom-7: 3rem;
  --rom-8: 4.5rem;

  --radius-s: .5rem;
  --radius: .875rem;
  --radius-l: 1.25rem;

  --skygge-1: 0 1px 2px hsl(var(--h-tekst) / .05);
  --skygge-2: 0 4px 14px -4px hsl(var(--h-tekst) / .12), 0 2px 4px -2px hsl(var(--h-tekst) / .06);
  --skygge-3: 0 16px 40px -12px hsl(var(--h-tekst) / .2);

  --bredde: 1140px;
  --bredde-tekst: 74ch;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

:root[data-tema="dark"] {
  --h-primar: 210 100% 62%;
  --h-primar-lys: 213 40% 18%;
  --h-aksent: 175 70% 46%;
  --h-bg: 217 34% 8%;
  --h-flate: 217 30% 11%;
  --h-flate-2: 217 28% 15%;
  --h-tekst: 210 25% 95%;
  --h-tekst-svak: 213 15% 68%;
  --h-kant: 216 22% 22%;
  --h-ok: 158 60% 46%;
  --h-advarsel: 36 92% 58%;
  --h-feil: 355 78% 64%;

  --primar-mot: hsl(217 40% 9%);
  --tone-primar: color-mix(in oklab, var(--primar) 14%, var(--flate));
  --tone-aksent: color-mix(in oklab, var(--aksent) 14%, var(--flate));
  --tone-advarsel: color-mix(in oklab, var(--advarsel) 16%, var(--flate));
  --tone-ok: color-mix(in oklab, var(--ok) 14%, var(--flate));

  --skygge-1: 0 1px 2px rgb(0 0 0 / .4);
  --skygge-2: 0 4px 14px -4px rgb(0 0 0 / .5);
  --skygge-3: 0 16px 40px -12px rgb(0 0 0 / .6);
}

/* ─────────────────────────── grunn ─────────────────────────── */

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 var(--rom-3); font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); margin-top: var(--rom-7); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); margin-top: var(--rom-5); }
p { margin: 0 0 var(--rom-4); }

a { color: var(--primar); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

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

.ramme { width: min(100% - 2rem, var(--bredde)); margin-inline: auto; }

.ikon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.ikon-tittel { width: 1em; height: 1em; color: var(--primar); margin-right: .35em; }

.hopp-lenke {
  position: absolute; left: var(--rom-4); top: -4rem; z-index: 100;
  background: var(--primar); color: var(--primar-mot);
  padding: var(--rom-2) var(--rom-4); border-radius: var(--radius-s);
  font-weight: 600; text-decoration: none; transition: top .15s;
}
.hopp-lenke:focus { top: var(--rom-3); }

/* ─────────────────────────── topp ─────────────────────────── */

.topp {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--flate) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kant);
}
.topp-inner { display: flex; align-items: center; gap: var(--rom-4); min-height: 4rem; }

.merke {
  display: inline-flex; align-items: center; gap: var(--rom-2);
  font-size: 1.05rem; color: var(--tekst); text-decoration: none; font-weight: 600;
}
.merke-ikon { width: 1.7rem; height: 1.7rem; color: var(--primar); }
.merke-tekst b { font-weight: 800; }
.merke:hover .merke-ikon { color: var(--aksent); }

.hovednav { margin-left: auto; }
.hovednav ul { display: flex; gap: var(--rom-1); list-style: none; margin: 0; padding: 0; }
.hovednav a {
  display: block; padding: var(--rom-2) var(--rom-3);
  border-radius: var(--radius-s); color: var(--tekst-svak);
  text-decoration: none; font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.hovednav a:hover { color: var(--tekst); background: var(--flate-2); }
.hovednav a[aria-current="page"] { color: var(--primar); background: var(--tone-primar); }

.topp-knapper { display: flex; gap: var(--rom-2); margin-left: auto; }
.hovednav + .topp-knapper { margin-left: 0; }

.tema-knapp, .meny-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  background: transparent; border: 1px solid var(--kant);
  border-radius: var(--radius-s); color: var(--tekst-svak); cursor: pointer;
}
.tema-knapp:hover, .meny-knapp:hover { color: var(--primar); border-color: var(--primar); }
.meny-knapp { display: none; }

:root[data-tema="dark"] .ikon-sol { display: none; }
:root:not([data-tema="dark"]) .ikon-maane { display: none; }
.meny-knapp .ikon-lukk { display: none; }
.meny-knapp[aria-expanded="true"] .ikon-lukk { display: block; }
.meny-knapp[aria-expanded="true"] .ikon-meny { display: none; }

.mobilmeny { border-top: 1px solid var(--kant); background: var(--flate); }
.mobilmeny ul { list-style: none; margin: 0; padding: var(--rom-3) 0; }
.mobilmeny a {
  display: block; padding: var(--rom-3) var(--rom-2);
  color: var(--tekst); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--kant);
}
.mobilmeny li:last-child a { border-bottom: 0; }

@media (max-width: 1040px) {
  .hovednav { display: none; }
  .meny-knapp { display: inline-flex; }
}
@media (min-width: 1041px) {
  .mobilmeny { display: none !important; }
}

/* ─────────────────────────── brødsmuler ─────────────────────────── */

.brodsmuler { border-bottom: 1px solid var(--kant); background: var(--flate); }
.brodsmuler ol {
  display: flex; flex-wrap: wrap; gap: var(--rom-2);
  list-style: none; margin: 0; padding: var(--rom-3) 0;
  font-size: .875rem; color: var(--tekst-svak);
}
.brodsmuler li + li::before { content: "/"; margin-right: var(--rom-2); color: var(--kant); }
.brodsmuler a { color: var(--tekst-svak); text-decoration: none; }
.brodsmuler a:hover { color: var(--primar); text-decoration: underline; }

/* ─────────────────────────── sidetopp ─────────────────────────── */

.sidetopp {
  padding: var(--rom-7) 0 var(--rom-6);
  background:
    radial-gradient(60rem 22rem at 15% -10%, var(--tone-primar), transparent 70%),
    radial-gradient(48rem 20rem at 92% 0%, var(--tone-aksent), transparent 68%);
  border-bottom: 1px solid var(--kant);
}
.sidetopp h1 { max-width: 20ch; }
.overtittel {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--aksent); margin: 0 0 var(--rom-2);
}
.ingress { font-size: 1.15rem; color: var(--tekst-svak); max-width: 62ch; margin: 0; }

/* ─────────────────────────── hero (forside) ─────────────────────────── */

.hero {
  padding: var(--rom-8) 0 var(--rom-7);
  background:
    radial-gradient(70rem 28rem at 12% -15%, var(--tone-primar), transparent 68%),
    radial-gradient(56rem 24rem at 95% 5%, var(--tone-aksent), transparent 66%);
  border-bottom: 1px solid var(--kant);
}
.hero h1 { max-width: 17ch; margin-bottom: var(--rom-4); }
.hero .ingress { font-size: 1.2rem; max-width: 58ch; }
.hero-knapper { display: flex; flex-wrap: wrap; gap: var(--rom-3); margin-top: var(--rom-5); }
.hero-rutenett { display: grid; gap: var(--rom-6); align-items: center; }
.hero-foto { margin: 0; }
.hero-foto img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-l); box-shadow: var(--skygge-3);
}
.hero-foto figcaption { margin-top: var(--rom-2); color: var(--tekst-svak); font-size: .8rem; }
.hero-foto figcaption a { color: inherit; }
@media (min-width: 900px) {
  .hero-rutenett { grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); }
}

.knapp {
  display: inline-flex; align-items: center; gap: var(--rom-2);
  padding: .7rem 1.3rem; border-radius: var(--radius-s);
  font: inherit; font-weight: 650; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.knapp-primar { background: var(--primar); color: var(--primar-mot); box-shadow: var(--skygge-2); }
.knapp-primar:hover { background: color-mix(in oklab, var(--primar) 86%, black); }
.knapp-sekundar { background: var(--flate); color: var(--tekst); border-color: var(--kant); }
.knapp-sekundar:hover { border-color: var(--primar); color: var(--primar); }

.hero-tall {
  display: flex; flex-wrap: wrap; gap: var(--rom-6);
  margin-top: var(--rom-6); padding-top: var(--rom-5);
  border-top: 1px solid var(--kant);
}
.hero-tall div strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--primar); line-height: 1.1; }
.hero-tall div span { font-size: .9rem; color: var(--tekst-svak); }

/* ─────────────────────────── seksjoner ─────────────────────────── */

.seksjon { padding: var(--rom-7) 0; }
.seksjon-topp { margin-bottom: var(--rom-5); }
.seksjon-topp h2 { margin-top: 0; }
.seksjon-topp p { color: var(--tekst-svak); max-width: 60ch; margin: 0; }
.seksjon-gratone { background: var(--flate-2); border-block: 1px solid var(--kant); }

/* ─────────────────────────── landkort ─────────────────────────── */

.landrutenett {
  display: grid; gap: var(--rom-3);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.landkort {
  display: flex; align-items: center; gap: var(--rom-3);
  padding: var(--rom-3) var(--rom-4);
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius); text-decoration: none; color: var(--tekst);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.landkort:hover {
  transform: translateY(-2px); box-shadow: var(--skygge-2);
  border-color: color-mix(in oklab, var(--primar) 45%, var(--kant));
}
.landkort-flagg { font-size: 1.7rem; line-height: 1; }
.landkort-tekst { display: flex; flex-direction: column; min-width: 0; }
.landkort-navn { font-weight: 650; }
.landkort-meta { font-size: .82rem; color: var(--tekst-svak); }
.landkort-varsel { color: var(--advarsel); font-weight: 600; }
.landkort-pil { margin-left: auto; color: var(--tekst-svak); width: 1.1rem; height: 1.1rem; }
.landkort:hover .landkort-pil { color: var(--primar); }

/* ─────────────────────────── innhold ─────────────────────────── */

.innhold { padding: var(--rom-6) 0 var(--rom-8); }
.innhold-todelt { display: grid; gap: var(--rom-6); grid-template-columns: 1fr; }
.innhold-todelt > * { min-width: 0; }
@media (min-width: 1000px) {
  .innhold-todelt { grid-template-columns: 16.5rem 1fr; }
  .innhold-todelt > .toc { order: -1; }
}

.tekst { max-width: var(--bredde-tekst); }
.tekst h2:first-child, .tekst h3:first-child { margin-top: 0; }
.tekst ul, .tekst ol { padding-left: 1.3em; margin: 0 0 var(--rom-4); }
.tekst li { margin-bottom: var(--rom-2); }
.tekst li::marker { color: var(--primar); }

/* ─────────────────────────── toc ─────────────────────────── */

.toc {
  align-self: start; font-size: .92rem;
  border: 1px solid var(--kant); border-radius: var(--radius);
  background: var(--flate); padding: var(--rom-4);
}
@media (min-width: 1000px) { .toc { position: sticky; top: 5.25rem; max-height: calc(100vh - 7rem); overflow-y: auto; } }
.toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tekst-svak); margin: 0 0 var(--rom-3); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--rom-1); }
.toc a {
  display: block; padding: .3rem var(--rom-3); border-left: 2px solid var(--kant);
  color: var(--tekst-svak); text-decoration: none; border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.toc a:hover { color: var(--tekst); background: var(--flate-2); }
.toc a.aktiv { color: var(--primar); border-left-color: var(--primar); background: var(--tone-primar); font-weight: 600; }

.redaksjon-meta {
  margin: 0 0 var(--rom-5); color: var(--tekst-svak); font-size: .9rem;
}
.redaksjon-meta a { color: inherit; text-decoration-color: var(--kant-sterk); }
.kildeliste { margin-top: var(--rom-7); padding-top: var(--rom-5); border-top: 1px solid var(--kant); }
.kildeliste ul { list-style: none; margin: var(--rom-4) 0 0; padding: 0; display: grid; gap: var(--rom-3); }
.kildeliste li { display: grid; gap: .2rem; }
.kildetype { color: var(--tekst-svak); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kildeliste .ekstern { width: fit-content; }

/* ─────────────────────────── bokser ─────────────────────────── */

.tldr {
  border: 1px solid color-mix(in oklab, var(--primar) 30%, var(--kant));
  background: var(--tone-primar);
  border-radius: var(--radius-l); padding: var(--rom-5);
  margin-bottom: var(--rom-6);
}
.tldr h2 {
  display: flex; align-items: center; gap: var(--rom-2);
  margin: 0 0 var(--rom-3); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--primar);
}
.tldr ul { margin: 0; padding-left: 1.2em; }
.tldr li { margin-bottom: var(--rom-2); }
.tldr li:last-child { margin-bottom: 0; }

.faktaboks {
  border: 1px solid var(--kant); border-radius: var(--radius);
  background: var(--flate); overflow: hidden; margin-bottom: var(--rom-5);
}
.faktaboks h3 { margin: 0; padding: var(--rom-3) var(--rom-4); background: var(--flate-2); border-bottom: 1px solid var(--kant); font-size: 1rem; }
.faktaboks dl { margin: 0; }
.fakta-rad { display: grid; gap: var(--rom-1); padding: var(--rom-3) var(--rom-4); border-bottom: 1px solid var(--kant); }
@media (min-width: 640px) { .fakta-rad { grid-template-columns: 13rem 1fr; gap: var(--rom-4); align-items: baseline; } }
.fakta-rad:last-child { border-bottom: 0; }
.fakta-rad dt { display: flex; align-items: center; gap: var(--rom-2); font-weight: 650; color: var(--tekst-svak); font-size: .92rem; }
.fakta-rad dt .ikon { color: var(--primar); width: 1.1em; height: 1.1em; }
.fakta-rad dd { margin: 0; }

.merknad {
  display: flex; gap: var(--rom-3); align-items: flex-start;
  padding: var(--rom-4); border-radius: var(--radius);
  border: 1px solid var(--kant); background: var(--flate-2);
  margin-bottom: var(--rom-5);
}
.merknad .ikon { margin-top: .15em; }
.merknad p { margin: 0; }
.merknad strong { display: block; margin-bottom: var(--rom-1); }
.merknad-info { background: var(--tone-primar); border-color: color-mix(in oklab, var(--primar) 28%, var(--kant)); }
.merknad-info > .ikon { color: var(--primar); }
.merknad-advarsel { background: var(--tone-advarsel); border-color: color-mix(in oklab, var(--advarsel) 34%, var(--kant)); }
.merknad-advarsel > .ikon { color: var(--advarsel); }
.merknad-ok { background: var(--tone-ok); border-color: color-mix(in oklab, var(--ok) 30%, var(--kant)); }
.merknad-ok > .ikon { color: var(--ok); }

/* ─────────────────────────── faq ─────────────────────────── */

.faq { margin-top: var(--rom-7); }
.faq details {
  border: 1px solid var(--kant); border-radius: var(--radius);
  background: var(--flate); margin-bottom: var(--rom-3); overflow: hidden;
}
.faq summary {
  padding: var(--rom-4); font-weight: 650; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: var(--rom-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primar); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--flate-2); }
.faq-svar { padding: 0 var(--rom-4) var(--rom-4); }
.faq-svar p:last-child { margin-bottom: 0; }

/* ─────────────────────────── tabeller ─────────────────────────── */

.tabellramme { overflow-x: auto; margin-bottom: var(--rom-5); border: 1px solid var(--kant); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--flate); }
th, td { text-align: left; padding: var(--rom-3) var(--rom-4); border-bottom: 1px solid var(--kant); }
thead th { background: var(--flate-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-svak); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flate-2); }

.merke-ja { color: var(--ok); font-weight: 650; }
.merke-nei { color: var(--tekst-svak); }

/* ─────────────────────────── relatert ─────────────────────────── */

.relatert { margin-top: var(--rom-7); padding-top: var(--rom-6); border-top: 1px solid var(--kant); }
.relatert-rutenett { display: grid; gap: var(--rom-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.relatert a {
  display: flex; gap: var(--rom-3); align-items: flex-start;
  padding: var(--rom-4); background: var(--flate);
  border: 1px solid var(--kant); border-radius: var(--radius);
  text-decoration: none; color: var(--tekst);
}
.relatert a:hover { border-color: var(--primar); box-shadow: var(--skygge-2); }
.relatert .ikon { color: var(--primar); margin-top: .1em; }
.relatert strong { display: block; }
.relatert em { font-style: normal; font-size: .88rem; color: var(--tekst-svak); }

/* ─────────────────────────── ekstern lenke ─────────────────────────── */

.ekstern { display: inline-flex; align-items: center; gap: .35em; }
.ekstern .ikon { width: .95em; height: .95em; }

/* ─────────────────────────── blogg ─────────────────────────── */

.bloggrutenett { display: grid; gap: var(--rom-5); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.bloggkort {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius-l); text-decoration: none; color: var(--tekst);
  transition: transform .16s ease, box-shadow .16s ease;
}
.bloggkort:hover { transform: translateY(-3px); box-shadow: var(--skygge-3); }
.bloggkort img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--flate-2); }
.bloggkort-tekst { padding: var(--rom-4); display: flex; flex-direction: column; gap: var(--rom-2); flex: 1; }
.bloggkort h3 { margin: 0; font-size: 1.1rem; }
.bloggkort p { margin: 0; font-size: .93rem; color: var(--tekst-svak); }
.bloggkort-meta { margin-top: auto; display: flex; gap: var(--rom-3); font-size: .82rem; color: var(--tekst-svak); align-items: center; }
.stikkord {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  background: var(--tone-aksent); color: var(--aksent);
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
}

.artikkel-topp img { width: 100%; border-radius: var(--radius-l); margin-bottom: var(--rom-5); aspect-ratio: 16/7; object-fit: cover; }
.innhold-figur { margin: var(--rom-5) 0; }
.innhold-figur img { width: 100%; border-radius: var(--radius-l); aspect-ratio: 16/9; object-fit: cover; display: block; }
.innhold-figur figcaption { color: var(--tekst-svak); font-size: .82rem; margin-top: var(--rom-2); }
.land-beslutning {
  margin: var(--rom-6) 0; padding: var(--rom-5);
  border: 1px solid color-mix(in oklab, var(--primar) 28%, var(--kant));
  border-radius: var(--radius-l); background: var(--tone-primar);
}
.land-beslutning-topp { display: flex; align-items: flex-start; gap: var(--rom-3); }
.land-beslutning-topp > .ikon { width: 2rem; height: 2rem; flex: 0 0 auto; color: var(--primar); }
.land-beslutning-topp .overtittel { margin: 0 0 var(--rom-1); }
.land-beslutning-topp h2 { margin: 0; }
.land-beslutning-steg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rom-3); margin: var(--rom-4) 0 0; padding: 0; list-style: none; counter-reset: landsteg;
}
.land-beslutning-steg li {
  counter-increment: landsteg; display: flex; flex-direction: column; gap: var(--rom-2);
  padding: var(--rom-4); border: 1px solid var(--kant); border-radius: var(--radius-m); background: var(--flate);
}
.land-beslutning-steg li::before {
  content: counter(landsteg); display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 999px; background: var(--primar); color: white; font-weight: 750; font-size: .85rem;
}
.land-beslutning-steg span { color: var(--tekst-svak); font-size: .92rem; }
.land-beslutning-steg a { margin-top: auto; font-weight: 650; }
@media (max-width: 760px) {
  .land-beslutning { padding: var(--rom-4); }
  .land-beslutning-steg { grid-template-columns: 1fr; }
}
.artikkel-figur { margin: 0 0 var(--rom-5); }
.artikkel-figur img { margin-bottom: var(--rom-2); }
.artikkel-figur figcaption { color: var(--tekst-svak); font-size: .82rem; margin-bottom: var(--rom-5); }
.artikkel-meta { display: flex; flex-wrap: wrap; gap: var(--rom-3); align-items: center; color: var(--tekst-svak); font-size: .9rem; margin-bottom: var(--rom-4); }

.location-video { margin: var(--rom-5) 0; }
.location-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-l); background: #0b1721;
  box-shadow: var(--skygge-2);
}
.location-video figcaption { color: var(--tekst-svak); font-size: .82rem; margin-top: var(--rom-2); }

/* ─────────────────────────── verktøy ─────────────────────────── */

.verktoy {
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius-l); padding: var(--rom-5);
  box-shadow: var(--skygge-2);
}
.verktoy-topp { display: flex; align-items: center; gap: var(--rom-3); margin-bottom: var(--rom-4); }
.verktoy-topp .ikon { width: 2rem; height: 2rem; color: var(--primar); }
.verktoy-topp h2 { margin: 0; }
.felt { display: flex; flex-direction: column; gap: var(--rom-2); margin-bottom: var(--rom-4); }
.felt-full { grid-column: 1 / -1; border: 0; padding: 0; min-width: 0; }
.felt legend { padding: 0; font-weight: 650; font-size: .95rem; }
.felt label { font-weight: 650; font-size: .95rem; }
.felt select, .felt input[type="number"], .felt input[type="text"] {
  font: inherit; padding: .65rem var(--rom-3);
  border: 1px solid var(--kant); border-radius: var(--radius-s);
  background: var(--flate); color: var(--tekst); width: 100%;
}
.valggruppe { display: flex; flex-wrap: wrap; gap: var(--rom-2); }
.valggruppe label {
  display: inline-flex; align-items: center; gap: var(--rom-2);
  padding: .5rem var(--rom-3); border: 1px solid var(--kant);
  border-radius: var(--radius-s); cursor: pointer; font-weight: 600; font-size: .93rem;
}
.valggruppe label:has(input:checked) { border-color: var(--primar); background: var(--tone-primar); color: var(--primar); }
.valggruppe input { accent-color: var(--primar); }

.preflight-grid { display: grid; gap: 0 var(--rom-4); }
@media (min-width: 720px) { .preflight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preflight-verdict {
  margin: 0 0 var(--rom-4); padding: var(--rom-3) var(--rom-4);
  border: 1px solid var(--kant); border-radius: var(--radius-s); background: var(--flate-2);
}
.preflight-verdict.svar-ok { border-color: color-mix(in oklab, var(--ok) 35%, var(--kant)); background: var(--tone-ok); }
.preflight-verdict.svar-kanskje { border-color: color-mix(in oklab, var(--advarsel) 38%, var(--kant)); background: var(--tone-advarsel); }
.preflight-verdict.svar-nei { border-color: color-mix(in oklab, var(--feil) 35%, var(--kant)); }
.preflight-checklist { margin-top: var(--rom-5); }
.preflight-checklist h3 { margin-bottom: var(--rom-1); }
.preflight-checklist ul { list-style: none; padding: 0; }
.preflight-checklist li { margin-bottom: var(--rom-2); }
.preflight-checklist label { display: flex; gap: var(--rom-2); align-items: flex-start; cursor: pointer; }
.preflight-checklist input { margin-top: .3em; accent-color: var(--primar); }
.preflight-checklist input:checked + span { color: var(--tekst-svak); text-decoration: line-through; }
.preflight-actions { display: flex; flex-wrap: wrap; gap: var(--rom-3); margin-top: var(--rom-4); }

.svar { margin-top: var(--rom-4); padding-top: var(--rom-4); border-top: 1px solid var(--kant); }
.svar[hidden] { display: none; }
.svar-tittel { display: flex; align-items: center; gap: var(--rom-2); font-size: 1.15rem; font-weight: 700; margin-bottom: var(--rom-3); }
.svar-tittel .ikon { width: 1.5rem; height: 1.5rem; }
.svar-ok .svar-tittel { color: var(--ok); }
.svar-nei .svar-tittel { color: var(--feil); }
.svar-kanskje .svar-tittel { color: var(--advarsel); }
.kategori-skille { margin: var(--rom-4) 0; }
.kategori-modell { padding: var(--rom-3); border-radius: var(--radius-s); background: var(--flate-2); }
.kategori-papirer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rom-3); margin: var(--rom-5) 0; }
.kategori-papirer section { padding: var(--rom-4); border: 1px solid var(--kant); border-radius: var(--radius-m); background: var(--flate); }
.kategori-papirer h3 { margin: var(--rom-2) 0; font-size: 1rem; }
.kategori-papirer p { margin: 0 0 var(--rom-2); font-size: .92rem; }
.kategori-lenker { display: flex; flex-wrap: wrap; gap: var(--rom-3); }
.kategori-eksempel-kilde { margin-top: var(--rom-4); }
@media (max-width: 760px) { .kategori-papirer { grid-template-columns: 1fr; } }

@media print {
  body:has(#landvelger-svar:not([hidden])) header,
  body:has(#landvelger-svar:not([hidden])) footer,
  body:has(#landvelger-svar:not([hidden])) .hero,
  body:has(#landvelger-svar:not([hidden])) .verktoy > :not(#landvelger-svar),
  body:has(#landvelger-svar:not([hidden])) .seksjon:not(:has(#landvelger-svar)),
  body:has(#landvelger-svar:not([hidden])) .preflight-actions { display: none !important; }
  body:has(#landvelger-svar:not([hidden])) #landvelger-svar { display: block !important; border: 0; }
  body:has(#kategorivelger-svar:not([hidden])) header,
  body:has(#kategorivelger-svar:not([hidden])) footer,
  body:has(#kategorivelger-svar:not([hidden])) .sidetopp,
  body:has(#kategorivelger-svar:not([hidden])) .hero,
  body:has(#kategorivelger-svar:not([hidden])) .verktoy > :not(#kategorivelger-svar),
  body:has(#kategorivelger-svar:not([hidden])) .seksjon:not(:has(#kategorivelger-svar)),
  body:has(#kategorivelger-svar:not([hidden])) .kategori-lenker,
  body:has(#kategorivelger-svar:not([hidden])) .preflight-actions { display: none !important; }
  body:has(#kategorivelger-svar:not([hidden])) #kategorivelger-svar { display: block !important; border: 0; }
}

/* ─────────────────────────── skoler ─────────────────────────── */

.skolerutenett { display: grid; gap: var(--rom-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.skolekort {
  display: flex; flex-direction: column; gap: var(--rom-2);
  padding: var(--rom-4); background: var(--flate);
  border: 1px solid var(--kant); border-radius: var(--radius);
  text-decoration: none; color: var(--tekst);
}
.skolekort:hover { border-color: var(--primar); box-shadow: var(--skygge-2); }
.skolekort h3 { margin: 0; font-size: 1.05rem; }
.skolekort-sted { font-size: .88rem; color: var(--tekst-svak); display: flex; align-items: center; gap: var(--rom-2); }
.skolekort-fokus { display: flex; flex-wrap: wrap; gap: var(--rom-1); margin-top: auto; padding-top: var(--rom-2); }
.skolekort-fokus span { font-size: .74rem; padding: .15rem .5rem; border-radius: 999px; background: var(--flate-2); color: var(--tekst-svak); }

/* ─────────────────────────── bunn ─────────────────────────── */

.bunn { background: var(--flate); border-top: 1px solid var(--kant); padding: var(--rom-7) 0 var(--rom-5); margin-top: var(--rom-8); }
.bunn-rutenett { display: grid; gap: var(--rom-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .bunn-rutenett { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.bunn h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tekst-svak); margin: 0 0 var(--rom-3); }
.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin-bottom: var(--rom-2); }
.bunn a { color: var(--tekst); text-decoration: none; font-size: .95rem; }
.bunn a:hover { color: var(--primar); text-decoration: underline; }
.bunn-ingress { color: var(--tekst-svak); font-size: .95rem; margin: var(--rom-3) 0 var(--rom-2); max-width: 42ch; }
.bunn-oppdatert { color: var(--tekst-svak); font-size: .85rem; margin: 0; }

.ansvar {
  display: flex; gap: var(--rom-3); align-items: flex-start;
  margin: var(--rom-6) 0 0; padding: var(--rom-4);
  background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: var(--radius); font-size: .9rem; color: var(--tekst-svak);
}
.ansvar .ikon { color: var(--primar); margin-top: .15em; }

.bunn-linje {
  display: flex; flex-wrap: wrap; gap: var(--rom-3) var(--rom-5);
  justify-content: space-between; align-items: center;
  margin-top: var(--rom-5); padding-top: var(--rom-4);
  border-top: 1px solid var(--kant); font-size: .88rem; color: var(--tekst-svak);
}
.bunn-linje p { margin: 0; }
.bunn-juss { display: flex; flex-wrap: wrap; gap: var(--rom-4); list-style: none; margin: 0; padding: 0; }
.bunn-juss li { margin: 0; }

/* ─────────────────────────── annonser ─────────────────────────── */

.annonse { min-height: 90px; margin: var(--rom-5) 0; }

/* ─────────────────────────── 404 ─────────────────────────── */

.feilside { text-align: center; padding: var(--rom-8) 0; }
.feilside .ikon { width: 4rem; height: 4rem; color: var(--primar); margin-bottom: var(--rom-4); }