/* Montserrat (variabel skrift), lastet lokalt – ingen kall til Google */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonter/montserrat-latin-ext.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: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonter/montserrat-latin.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; }

/* =========================================================
   Linken Næringshage – felles stil for alle sider
   Palett: petrol, dyphav, sjøblå, grunt vann, krem, bøyeoransje
   Prinsipp: skandinavisk «less is more» – én radius, linjer i
   stedet for bokser, én knappestil og én lenkestil.
   ========================================================= */
:root {
  --petrol: #1A484F;
  --dyphav: #0E3442;
  --sjobla: #2E7D8C;
  --grunt: #9FD3CF;
  --krem: #F8F2E8;
  --oransje: #F26B3A;
  --tekst: #0E3442;
  --dempet: #4A666C;
  --linje: rgba(26, 72, 79, .16);
  --radius: 4px;
  --seksjon: 120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; color: var(--tekst); background: var(--krem); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
h1, h2, h3 { margin: 0; color: var(--petrol); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(44px, 6.2vw, 76px); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 3.4vw, 40px); }
h3 { font-size: 20px; }
p { margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: var(--seksjon) 0; }
.eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sjobla); margin-bottom: 16px; }
.ingress { color: var(--dempet); max-width: 560px; }
.apple { position: absolute; pointer-events: none; border-radius: 0; }
.delt { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.topp { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.topp .ingress { margin-top: 16px; }

/* Én knapp, én lenke */
.btn { display: inline-block; background: var(--petrol); color: var(--krem); text-decoration: none; font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: var(--radius); transition: background .2s; }
.btn:hover { background: var(--dyphav); }
.lenke { color: var(--petrol); font-weight: 600; text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.lenke:hover { color: var(--sjobla); text-decoration-color: var(--sjobla); }
.handlinger { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* Liste med tynne linjer */
.liste { list-style: none; padding: 0; margin: 0 0 32px; border-top: 1px solid var(--linje); }
.liste li { padding: 16px 0; border-bottom: 1px solid var(--linje); }
.liste b { display: block; color: var(--petrol); font-weight: 600; }
.liste span { color: var(--dempet); font-size: 15px; }

/* Header og meny */
.header { position: sticky; top: 0; z-index: 50; background: var(--krem); border-bottom: 1px solid var(--linje); }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.logo img { height: 44px; width: auto; border-radius: 0; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--petrol); }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav .btn { padding: 11px 20px; font-size: 15px; color: var(--krem); }
.nav a.aktiv, .nav .aktiv > .dropdown-lenke { text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.dropdown { position: relative; display: flex; align-items: center; gap: 4px; }
.dropdown-knapp { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: 0; padding: 0; color: var(--petrol); cursor: pointer; border-radius: var(--radius); }
.dropdown-knapp:focus-visible { outline: 2px solid var(--sjobla); outline-offset: 2px; }
/* Usynlig «bro» så musepekeren ikke mister menyen på vei ned */
.dropdown-meny::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
@media (hover: hover) and (min-width: 961px) {
  .dropdown:hover .dropdown-meny { display: block; }
  .dropdown:hover .dropdown-knapp svg { transform: rotate(180deg); }
}
.dropdown-knapp svg { transition: transform .2s; }
.dropdown-knapp[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-meny { list-style: none; margin: 0; padding: 12px 0; position: absolute; top: calc(100% + 28px); left: -24px; min-width: 280px; background: var(--krem); border: 1px solid var(--linje); border-radius: var(--radius); display: none; }
.dropdown-meny.apen { display: block; }
.dropdown-meny a { display: block; padding: 9px 24px; font-weight: 400 !important; font-size: 15px; }
.dropdown-meny a:hover { background: rgba(26, 72, 79, .06); text-decoration: none !important; }
.dropdown-meny a[aria-current="page"] { font-weight: 600 !important; }
.dropdown-meny .alle { border-top: 1px solid var(--linje); margin-top: 8px; padding-top: 8px; }
.dropdown-meny .alle a { font-weight: 600 !important; }
.meny-knapp { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--petrol); }

/* Brødsmuler */
.smuler { font-size: 14px; color: var(--dempet); margin-bottom: 32px; }
.smuler a { color: var(--dempet); text-underline-offset: 4px; }
.smuler a:hover { color: var(--petrol); }

/* Mørk seksjon (petrol) */
.mork { background: var(--petrol); color: var(--krem); overflow: hidden; }
.mork h2, .mork h3 { color: var(--krem); }
.mork .eyebrow, .mork .ingress { color: var(--grunt); }
.mork .lenke { color: var(--krem); }
.mork .lenke:hover { color: var(--grunt); text-decoration-color: var(--grunt); }
.mork .apple { width: 720px; height: 720px; right: -240px; bottom: -280px; opacity: .06; }
.kolonner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; }
.kolonne { border-left: 1px solid var(--grunt); padding-left: 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.kolonne p { color: var(--grunt); max-width: 440px; }

/* Tråden (tegnes av felles.js) */
.traad-omrade { position: relative; }
.traad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; display: none; }
.traad-sti { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.traad-sti.lys { stroke: var(--sjobla); opacity: .7; }
.traad-sti.krem { stroke: var(--krem); opacity: .75; }
.traad .blad { fill: var(--oransje); opacity: 0; transition: opacity .5s; }
.traad .blad.vis { opacity: 1; }
@media (min-width: 961px) { .har-traad .traad { display: block; } }

/* Kontakt-seksjon nederst */
.kontakt { padding-top: 0; }
.kontakt .container > div { border-top: 1px solid var(--linje); padding-top: 80px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.kontakt h2 { margin-bottom: 16px; max-width: 620px; }
.kontakt .handlinger { flex-direction: column; align-items: flex-start; gap: 16px; }
.kontakt small { color: var(--dempet); font-size: 15px; }
.kontakt small a { color: var(--petrol); text-underline-offset: 4px; }

/* Footer */
.footer { background: var(--dyphav); color: var(--grunt); padding: 80px 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 64px; }
.footer h4 { color: var(--krem); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; color: var(--grunt); }
.footer a:hover { color: var(--krem); }
.footer-logo { height: 56px; width: auto; border-radius: 0; margin-bottom: 20px; }
.footer-bunn { border-top: 1px solid rgba(159, 211, 207, .2); padding-top: 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
.footer-bunn > :first-child { justify-self: start; }
.footer-bunn small { text-align: center; }
.footer-bunn .laget-av { justify-self: end; margin: 0; }
@media (max-width: 960px) { .footer-bunn { grid-template-columns: 1fr; } .footer-bunn small { text-align: left; } .footer-bunn .laget-av { justify-self: start; } }
.footer-bunn img { height: 40px; width: auto; border-radius: 0; }
.footer-bunn small { color: var(--grunt); }

@media (max-width: 960px) {
  :root { --seksjon: 72px; }
  .nav { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--krem); flex-direction: column; align-items: flex-start; padding: 16px 24px 28px; gap: 12px; border-bottom: 1px solid var(--linje); max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav.apen { display: flex; }
  .nav a { font-size: 18px; }
  .meny-knapp { display: block; }
  .dropdown { width: 100%; flex-wrap: wrap; }
  .dropdown-knapp { width: 36px; height: 36px; }
  .dropdown-meny { flex-basis: 100%; }
  .dropdown-meny { position: static; border: 0; border-left: 1px solid var(--linje); border-radius: 0; padding: 4px 0; margin: 8px 0 4px; min-width: 0; }
  .dropdown-meny a { padding: 7px 16px; font-size: 16px !important; }
  .dropdown-meny .alle { border-top: 0; margin-top: 0; padding-top: 0; }
  .delt, .kolonner, .kontakt .container > div { grid-template-columns: 1fr; }
  .delt { gap: 40px; }
  .kontakt .container > div { padding-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .kolonne { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =========================================================
   Undersider (mal for tjenester og prosjekter)
   ========================================================= */
.side-hero { padding: 48px 0 var(--seksjon); }
.side-hero .delt { position: relative; align-items: center; }
.side-hero h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: 24px; }
.side-hero .ingress { font-size: 19px; margin-bottom: 40px; }
.side-hero img:not(.apple) { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.brodtekst h2 { margin-bottom: 24px; }
.brodtekst p { color: var(--tekst); max-width: 620px; }
.brodtekst p + p { margin-top: 18px; }
.innhold .delt { align-items: start; }
.innhold h3 { margin-bottom: 16px; }

.kolonner.tre { grid-template-columns: repeat(3, 1fr); }
.steg-nr { font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--grunt); }
.mork .topp { margin-bottom: 56px; }

.lenkeliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 1px solid var(--linje); }
.lenkeliste a { display: block; padding: 16px 0; border-bottom: 1px solid var(--linje); color: var(--petrol); font-weight: 600; text-decoration: none; }
.lenkeliste a:hover { color: var(--sjobla); }

/* Kontaktperson med lite rundt portrett */
.personer { display: grid; gap: 28px; }
.person { display: flex; align-items: center; gap: 16px; }
.person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.person b { display: block; color: var(--petrol); font-weight: 600; line-height: 1.3; }
.person small { display: block; color: var(--dempet); font-size: 14px; line-height: 1.4; }
.person .kontaktinfo { font-size: 14px; margin-top: 4px; }
.person .kontaktinfo a { color: var(--petrol); text-underline-offset: 4px; text-decoration-color: var(--oransje); }
.person .kontaktinfo a:hover { color: var(--sjobla); }

@media (max-width: 960px) {
  .side-hero { padding-top: 32px; }
  .kolonner.tre, .lenkeliste { grid-template-columns: 1fr; }
}
.side-hero + .traad-omrade > section:first-of-type { padding-top: 0; }

/* --- Byggeklosser for prosjektsider --- */
.nokkelfakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--linje); }
.nokkelfakta dt { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sjobla); margin-bottom: 6px; }
.nokkelfakta dd { margin: 0; color: var(--petrol); font-weight: 600; }
.tall { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.tall li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.tall b { font-size: 28px; font-weight: 600; color: var(--petrol); line-height: 1; }
.tall span { color: var(--dempet); font-size: 15px; }
.stort-tall { font-size: clamp(40px, 4.4vw, 56px); font-weight: 600; line-height: 1; color: var(--krem); }
.omrader { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.omrade { border-top: 1px solid var(--linje); padding: 28px 0 40px; }
.omrade .steg-nr { color: var(--sjobla); display: block; margin-bottom: 10px; }
.omrade h3 { margin-bottom: 10px; }
.omrade p { color: var(--dempet); max-width: 480px; }
.sitat { margin: 40px 0 0; padding: 0; max-width: 820px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; font-weight: 600; color: var(--petrol); }
.sitat footer { margin-top: 14px; font-size: 14px; font-weight: 400; color: var(--dempet); }
.mork .sitat { color: var(--krem); }
.dokumenter a { display: flex; justify-content: space-between; gap: 24px; }
.dokumenter small { color: var(--dempet); font-weight: 400; font-size: 14px; white-space: nowrap; }
@media (max-width: 960px) {
  .nokkelfakta { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .omrader { grid-template-columns: 1fr; }
}
.mork .sitat footer { color: var(--grunt); }
/* Lenker inne i lister (f.eks. tjenestelista på forsiden) */
.liste a { color: inherit; text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s; }
.liste a:hover { color: var(--sjobla); }
.omrader.tre { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
a.omrade { text-decoration: none; color: inherit; display: block; }
a.omrade:hover h3 { text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 960px) { .omrader.tre { grid-template-columns: 1fr; } }

/* Prosjektkort (forside og prosjektoversikt) */
.prosjekt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.prosjekt { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 16px; }
.prosjekt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prosjekt:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.prosjekt p { color: var(--dempet); font-size: 15px; margin-top: 8px; }
.meta { display: block; font-size: 13px; font-weight: 600; color: var(--sjobla); margin-bottom: 6px; }
@media (max-width: 960px) { .prosjekt-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Mobilmeny: store trykkflater */
@media (max-width: 960px) {
  .nav { gap: 0; padding: 8px 24px 24px; }
  .nav > a:not(.btn), .dropdown-lenke { display: block; padding: 12px 0; min-height: 48px; }
  .nav > a:not(.btn), .dropdown { border-bottom: 1px solid var(--linje); width: 100%; }
  .dropdown-lenke { flex: 1; }
  .dropdown-knapp { width: 48px; height: 48px; margin-left: auto; }
  .dropdown-knapp svg { width: 16px; height: 11px; }
  .dropdown-meny { margin: 0 0 12px; }
  .dropdown-meny a { padding: 10px 16px; min-height: 44px; }
  .nav .btn { margin-top: 20px; text-align: center; width: 100%; padding: 14px 20px; }
  .nav .aktiv > .dropdown-lenke, .nav a.aktiv { text-underline-offset: 6px; }
}

/* --- Portefølje --- */
.logoflate { background: #fff; border-radius: var(--radius); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 10%; min-width: 0; }
.logoflate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
.logoflate.inverter img { filter: invert(1) grayscale(1); }
.filter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 40px; }
.filter button { background: none; border: 0; padding: 6px 0; font: 600 15px Montserrat, sans-serif; color: var(--dempet); cursor: pointer; text-decoration: none; text-underline-offset: 8px; }
.filter button:hover { color: var(--petrol); }
.filter button[aria-pressed="true"] { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 2px; }
.bedriftsgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linje); border-left: 1px solid var(--linje); }
.bedriftsgrid li { border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.bedriftsgrid li[hidden] { display: none; }
.bedriftsgrid a { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: 32px 20px 20px; height: 100%; text-decoration: none; color: var(--petrol); }
.bedriftsgrid .logo-boks { height: 72px; display: flex; align-items: center; }
.bedriftsgrid img { max-height: 72px; max-width: 160px; width: auto; height: auto; border-radius: 0; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .75; transition: filter .25s, opacity .25s; }
.bedriftsgrid li.inverter img { filter: grayscale(1) invert(1) contrast(1.2); }
.bedriftsgrid a:hover img { filter: none; opacity: 1; }
.bedriftsgrid li.inverter a:hover img { filter: grayscale(1) invert(1) contrast(1.2); }
.bedriftsgrid .navn { font-size: 14px; font-weight: 600; text-align: center; }
.bedriftsgrid .sted { display: block; font-size: 12px; font-weight: 400; color: var(--dempet); }
.bedriftsgrid a:hover .navn { text-decoration: underline; text-decoration-color: var(--oransje); text-underline-offset: 4px; }
@media (max-width: 960px) { .bedriftsgrid { grid-template-columns: repeat(2, 1fr); } .bedriftsgrid a { padding: 24px 12px 16px; } }
.side-hero .logoflate img { width: auto; aspect-ratio: auto; object-fit: contain; }

/* --- Om oss --- */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.team-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; margin-bottom: 16px; }
.team-grid b { display: block; color: var(--petrol); font-weight: 600; }
.team-grid small { display: block; color: var(--dempet); font-size: 14px; margin-bottom: 8px; }
.team-grid a { display: block; font-size: 14px; color: var(--petrol); text-decoration: none; }
.team-grid a:hover { color: var(--sjobla); text-decoration: underline; text-decoration-color: var(--oransje); text-underline-offset: 4px; }
.nettverk-grid { grid-template-columns: 1fr 1.35fr; gap: 48px; }
.kart-lenke { display: block; }
.kart { width: 100%; border-radius: 0; mix-blend-mode: multiply; }
.nabolag { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--linje); }
.nabolag li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linje); font-weight: 600; color: var(--petrol); }
.nabolag small { color: var(--dempet); font-weight: 400; font-size: 14px; }
.nabolag li.oss { color: var(--sjobla); }
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .nettverk-grid { grid-template-columns: 1fr; } }

/* --- Kalender: Hva skjer i Båtsfjord --- */
.neste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.neste li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--linje); }
.neste li.tom { display: block; color: var(--dempet); grid-column: 1 / -1; }
.neste-dato { display: flex; flex-direction: column; align-items: flex-start; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sjobla); line-height: 1.1; }
.neste-dato b { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: var(--petrol); line-height: 1; margin-bottom: 4px; }
.neste h3 { font-size: 18px; margin: 2px 0 4px; }
.neste h3 a, .kal-tekst b a { color: inherit; text-decoration: none; }
.neste h3 a:hover, .kal-tekst b a:hover { text-decoration: underline; text-decoration-color: var(--oransje); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.neste small { color: var(--dempet); font-size: 14px; }
.neste .meta { margin-bottom: 0; }
.kal-dag { margin-bottom: 48px; }
.kal-dag-tittel { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sjobla); margin-bottom: 0; padding-bottom: 12px; }
.kal-dag-tittel::first-letter { text-transform: uppercase; }
.kal-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.kal-rad { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linje); }
.kal-tid { font-weight: 600; color: var(--petrol); font-variant-numeric: tabular-nums; }
.kal-tekst b { display: block; color: var(--petrol); font-weight: 600; font-size: 18px; line-height: 1.35; }
.kal-tekst small { display: block; color: var(--dempet); font-size: 14px; margin-top: 2px; }
.kal-info { display: block; color: var(--tekst); font-size: 15px; margin-top: 6px; max-width: 640px; }
.kal-merknad { font-size: 14px; color: var(--dempet); margin-top: 32px; max-width: 720px; }
@media (max-width: 960px) {
  .neste { grid-template-columns: 1fr; }
  .kal-rad { grid-template-columns: 1fr; gap: 4px; }
}
.video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: var(--radius); background: var(--dyphav); }
.invest-topp { margin-bottom: 64px; position: relative; }

/* =========================================================
   Tema: Fiskerihovedstaden (hvit bunn, logoens kalde farger, svømmende fisker)
   Brukes med <body class="tema-fiskeri">
   ========================================================= */
.tema-fiskeri {
  --fisk-bla: #5088C8;
  --fisk-bla-mork: #3B6EA8;
  --fisk-turkis: #80C8C8;
  --fisk-solv: #B8C0C8;
  --fisk-hav: #305070;
  --fisk-is: #F1F6FA;
  --linje: rgba(48, 80, 112, .16);
  --dempet: #4E6478;
  --tekst: #233B52;
  background: #fff;
}
.tema-fiskeri .header, .tema-fiskeri .nav, .tema-fiskeri .dropdown-meny { background: #fff; }
.tema-fiskeri main h1, .tema-fiskeri main h2, .tema-fiskeri main h3 { color: var(--fisk-hav); }
.tema-fiskeri main .eyebrow { color: var(--fisk-bla-mork); }
.tema-fiskeri main .btn { background: var(--fisk-hav); }
.tema-fiskeri main .btn:hover { background: var(--fisk-bla-mork); }
.tema-fiskeri main .lenke { color: var(--fisk-hav); }
.tema-fiskeri main .liste b, .tema-fiskeri main .lenkeliste a, .tema-fiskeri .kal-tid, .tema-fiskeri .kal-tekst b, .tema-fiskeri .neste-dato b { color: var(--fisk-hav); }
.tema-fiskeri .neste-dato, .tema-fiskeri .kal-dag-tittel, .tema-fiskeri main .meta { color: var(--fisk-bla-mork); }
.tema-fiskeri .filter button[aria-pressed="true"] { color: var(--fisk-hav); }
.tema-fiskeri .is { background: var(--fisk-is); }
.tema-fiskeri .mork { background: var(--fisk-hav); }
.tema-fiskeri .mork h2, .tema-fiskeri .mork h3, .tema-fiskeri .mork .lenke { color: #fff; }
.tema-fiskeri .mork .eyebrow { color: var(--fisk-turkis); }
.tema-fiskeri .mork .ingress, .tema-fiskeri .mork .kolonne p { color: #D3E3EF; }
.tema-fiskeri .mork .kolonne { border-left-color: var(--fisk-turkis); }
.tema-fiskeri .video { background: #1F3850; }
.tema-fiskeri .fiskeri-logo { width: 220px; height: auto; border-radius: 0; margin-bottom: 28px; }

/* Fiskene – lagt inn av felles.js i luftrommet mellom seksjonene */
.tema-fiskeri main { position: relative; overflow-x: clip; }
.fiskelag { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.fisk { position: absolute; left: 0; will-change: transform; animation: svom var(--tid, 50s) linear infinite; animation-delay: var(--start, 0s); }
.fisk svg { display: block; width: var(--str, 64px); height: auto; animation: vugg var(--vugg, 4s) ease-in-out infinite alternate; }
@keyframes svom { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@keyframes vugg { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .fisk, .fisk svg { animation: none; }
  .fisk { transform: translateX(var(--ro-x, 50vw)); }
}
.tema-fiskeri .side-hero img.fiskeri-logo { width: 190px; aspect-ratio: auto; object-fit: contain; margin-bottom: 32px; }
.tema-fiskeri .side-hero img.fiskeri-logo-stor { width: min(100%, 380px); aspect-ratio: auto; object-fit: contain; justify-self: center; border-radius: 0; }
@media (max-width: 960px) { .tema-fiskeri .side-hero img.fiskeri-logo-stor { width: 220px; justify-self: start; } }
.sporsmal { border-top: 1px solid var(--linje); padding: 24px 0 32px; }
.sporsmal h3 { margin-bottom: 8px; }
.sporsmal p { color: var(--dempet); max-width: 520px; }
/* «Laget med hjerte i nord av Snefokk» */
.laget-av { margin: 24px 0 0; font-size: 13px; color: var(--grunt); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.laget-av a { display: inline-flex; align-items: center; }
.laget-av img { height: 14px; width: auto; border-radius: 0; filter: brightness(0) invert(1); opacity: .8; transition: opacity .2s; }
.laget-av a:hover img { opacity: 1; }
.footer-bunn .laget-av { flex-wrap: nowrap; white-space: nowrap; }