/* ANKER-OFFSET. village-editorial.css har regelen paa .village-page [id],
   men kommunesidene er .kv-page — de har aldri vaert dekket. Klikk paa et
   punkt i seksjonsmenyen la derfor overskriften havne UNDER den faste
   stripa. Funnet under bygginga av Sirdal; gjelder alle fire.
   Verdien foelger stripas hoeyde (--nav-height) med litt luft over. */
.kv-page [id] {
  scroll-margin-top: calc(var(--nav-height) + 18px);
}

/* ============================================================
   KOMMUNE V2 («Miks»-malen) — ny mal for kommunesidene.
   Portert fra Claude Design «Flekkefjord Miks». Bygger på tokens
   fra styles.css/lister.css; seksjonsspesifikke stiler her.

   Fargene kan justeres per kommune via CSS-variablene under.
   ============================================================ */

.kv-page {
  --kv-mork: var(--surface-utility);        /* mørk flate (valgt tweak, = --surface-utility) */
  --kv-aksent: var(--color-gold);      /* aksent (= --color-gold) */
  --kv-eyebrow: var(--color-gold-mork);     /* mørk terrakotta for eyebrows/lenke-CTA-er */
  --kv-gronn: #2D6A3F;       /* severdigheter/statistikk */
  --kv-fjord: var(--color-fjord);       /* arbeidsgiver-markører */
  /* To kremtoner. Navnene var foer --cream og --warm, og de var OMVENDT av
     det man tror: «warm» gav den lyseste. Naa som i artikkel.css: krem er
     den varme, papir den lyse. */
  --kv-krem: var(--color-cream);
  --kv-papir: var(--color-warm-white);
  --kv-ink: var(--color-midnight);
  /* Typeskala for HELE kommunesiden — også seksjoner med eget prefiks
   * (f.eks. fs-* på Farsund). Egne seksjoner skal aldri sette egne
   * px/rem-verdier på brødtekst; da fremstår siden som løse biter.
   * Trinnene er navn på nettstedets skala i styles.css, ikke nye verdier. */
  /* De lokale stoerrelsesaliasene er fjernet: --kv-intro, --kv-body,
     --kv-caption, --kv-micro, --kv-serif, --kv-serif-stor. De var navn
     nummer to paa trinn som allerede hadde navn, og da velger hver
     komponent sitt eget. Bruk broedtekstbaandet eller etikettbaandet.
     bestemt hva en ingress ER, saa den ble brukt der noen ville ha
     stoerre tekst. 41 forekomster paa 16 klasser. Bruk --brod. */
  background: var(--kv-papir);
  color: var(--kv-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.kv-page ::selection { background: var(--kv-aksent); color: var(--kv-krem); }

/* ---------- Grunnelementer ---------- */
.kv-section { padding: clamp(56px, 8vh, 104px) clamp(20px, 4vw, 56px); }
.kv-section--krem { background: var(--kv-krem); color: var(--kv-ink); }
/* En seksjon som er loeftet opp rett etter ingressen (tidligeSeksjoner)
 * skal ikke ha full seksjonspadding paa toppen. Den paddingen er laget for
 * aa skille seksjoner med ulik bakgrunn; her ligger jobb rett under
 * innledningen paa samme flate, og da blir 56-104 px bare tomrom.
 * Maalt foer: 96 px mellom faktalinja i oversikten og jobbs eyebrow. */
/* BAKGRUNNSRYTMEN. Krem og papir veksler, med skifer og navy som
   tegnsetting. To naboer skal aldri dele tone — med mindre de er ETT
   kapittel, og det er da et bevisst par.

   Farsund og Flekkefjord har null doble. Lyngdal fikk fire da seksjoner ble
   flyttet: jobb kom opp rett etter oversikt (krem etter krem), og oppvekst
   fulgte etter med papir.

   Begge modifikatorene under settes BARE av Lyngdal — --tidlig av
   tidligeSeksjoner, --lesekolonne av oppsett: stablet. Derfor kan rytmen
   rettes her uten at de to andre kommunene roeres. */
/* Dobbel klasse for aa slaa .kv-section--krem/--papir, som staar senere i
   fila og ellers vinner paa kilderekkefoelge. */
.kv-section.kv-section--tidlig { background: var(--kv-papir); }
.kv-section.kv-section--lesekolonne { background: var(--kv-krem); }

.kv-section--tidlig { padding-top: clamp(16px, 2.2vh, 28px); }

/* Broedteksten i den stablede varianten settes ETT trinn opp paa
 * typeskalaen: --kv-intro (--text-xl, 24 px) i stedet for --kv-body (20 px).
 *
 * Grunnen er linjelengden. Freysta-malen setter 20 px tekst i en spalte paa
 * 996 px og faar omtrent 116 tegn per linje. Vaar innholdsbredde er 1313 px,
 * og samme skriftstoerrelse gir da rundt 156 tegn — for langt til aa lese
 * komfortabelt.
 *
 * Aa smalne kolonnen for bare denne seksjonen ble proevd og forkastet:
 * venstremargen hoppet fra 250 (jobb) til 445 (oppvekst) og tilbake til 418
 * (natur), og sida mistet flyten. Bredden maa vaere den samme hele veien;
 * da er det skriften som maa foelge bredden. */
.kv-section--lesekolonne .kv-intro--brodtekst,
.kv-section--lesekolonne .kv-overgang {
  font-size: var(--brod);
}
.kv-section--papir { background: var(--kv-papir); color: var(--kv-ink); }
.kv-inner { max-width: 1360px; margin: 0 auto; }

/* ---------- Midtstilt lesespalte ----------
   Tekstseksjoner paa kommunesidene setter loepende tekst i en spalte midt
   paa siden (Lyngdal foerst, Tom 19. okt 2026; de andre kommunene 19. okt).
   Regelen for hvilke seksjoner: bare der loepende tekst er hovedsaken.
   Ingress med egen overskrift over bilder, kort eller skoleboksen (Oppvekst
   utenfor Lyngdal, Bo, Kulturminner) staar paa venstrekanten av det den
   presenterer, og todelte seksjoner er uendret.

   Spalten er 60 tegn broedtekst (--lesebredde), regnet om fra --brod saa
   den blir like bred for overskriften som for avsnittene: ch maales i
   elementets egen grad, og en tittel paa 60ch ville blitt mye bredere.
   Hvert stilark velger selv hvilke elementer som faar spalten; mønsteret
   er max-width + margin-left regnet fra spalten, ikke fra elementets egen
   bredde, saa smalere overskrifter flukter med teksten. */
main { --lesespalte: calc(var(--brod) * 34.19); }

/* Natur (bare Flekkefjord rendrer seksjonen): tittel og to avsnitt
   loepende tekst foer bildet i full bredde. */
#natur .kv-inner > .kv-eyebrow,
#natur .kv-inner > .kv-title,
#natur .kv-inner > .kv-intro {
  max-width: var(--lesespalte);
  margin-left: max(0px, calc((100% - var(--lesespalte)) / 2));
  margin-right: auto;
}

.kv-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--kv-eyebrow);
}
.kv-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-seksjonstittel);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  text-wrap: balance; /* unngår enslige ord på siste linje («… vokse / opp») */
}
.kv-intro {
  margin: 0;
  max-width: var(--lesebredde);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: rgba(10, 22, 40, 0.78);
}
/* Luft mellom påfølgende intro-avsnitt (flerledd-intro, f.eks. natur). */
.kv-intro + .kv-intro { margin-top: clamp(14px, 1.8vw, 22px); }

/* Lenker i løpende tekst (f.eks. sykehuset i jobbteksten) skal synes. */
.kv-jobb-intro__text a {
  color: var(--kv-eyebrow, var(--color-gold-mork));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(160, 82, 74, 0.5);
  transition: text-decoration-color 0.2s ease;
}
.kv-jobb-intro__text a:hover { text-decoration-color: var(--kv-eyebrow, var(--color-gold-mork)); }

/* Stillingslista (innfelt paa kommunesidene): egne kort-flater per stilling,
 * ellers drukner radene i seksjonens bakgrunn.
 *
 * Kortet var foer papir paa en krem seksjon — lysere enn bunnen. Da Lyngdal
 * fikk jobb-seksjonen i papir for bakgrunnsrytmens skyld, ble kort og bunn
 * NOEYAKTIG samme farge, og bare den tynne ramma skilte dem.
 *
 * Naa er kortet krem: moerkere enn bunnen, uansett hvilken av de to
 * kremtonene seksjonen har. Hover loefter til hvitt, som foer. */
.kv-page .rl-jobfeat__rail-inner { gap: 0.6rem; }
.kv-page .rl-jobfeat__item {
  background: var(--kv-papir);
  border: 1px solid rgba(210, 200, 182, 0.55);
  border-radius: 14px;
  padding: 1.05rem 1.15rem;
}
/* Kortet velges etter BUNNEN, ikke etter komponenten — samme regel som for
   tekstfarge. Paa en krem seksjon er kortet papir; paa en papir seksjon er
   det krem. Ellers blir de identiske, og bare ramma skiller dem.

   --tidlig staar sist fordi Lyngdals jobb-seksjon har BAADE --krem og
   --tidlig i klasselista, og det er --tidlig som bestemmer flata. */
.kv-page.kv-section--krem .rl-jobfeat__item,
.kv-page .kv-section--krem .rl-jobfeat__item { background: var(--kv-papir); }
.kv-page.kv-section--papir .rl-jobfeat__item,
.kv-page .kv-section--papir .rl-jobfeat__item,
.kv-page.kv-section--tidlig .rl-jobfeat__item,
.kv-page .kv-section--tidlig .rl-jobfeat__item { background: var(--kv-krem); }
.kv-page .rl-jobfeat__item:first-child { border-top: 1px solid rgba(210, 200, 182, 0.55); }
.kv-page .rl-jobfeat__item:hover {
  background: var(--surface-card-light);
  padding-left: 1.6rem;
  box-shadow: 0 6px 18px rgba(31, 36, 33, 0.06);
}
.kv-page .rl-jobfeat__item::before { left: 0.65rem; }
.kv-body { font-size: var(--brod); line-height: var(--linje-brod); color: rgba(10, 22, 40, 0.8); }

.kv-figure { margin: 0; }
.kv-figure__frame { overflow: hidden; border-radius: 14px; }
.kv-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-caption {
  padding-top: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  /* 0,5 ga 3,32 mot krem. 0,62 gir 4,81 — samme farge, mindre gjennomsiktig. */
  color: rgba(10, 22, 40, 0.62);
}

/* Underoverskrifter i seksjoner (lik størrelse overalt — jf. designrunden) */
/* Skriftstoerrelsen er fjernet herfra: den sto med !important og ga
 * 37px der basisregelen i jobb.css ga 38. Naa arves --text-2xl derfra. */
.kv-page .kv-subtitle,
.kv-page .rl-jobfeat__subtitle,
.kv-page .l-jobb__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--linje-display);
}

/* ---------- Hero ---------- */
/* Krediteringen av toppvideoen er .v-hero-credit (village-hero.css). Her lå
   en kopi, .kv-hero-credit, uten mobilregelen, og den la seg over hjørnet
   av tittelboksen på telefon. */
.kv-hero-tagline {
  font-family: var(--font-display) !important;
  font-size: clamp(1.7rem, 1.4535rem + 1.0516vw, 2.4rem) !important;
}

/* ---------- Hverdag: liv-accordion ---------- */
.kv-liv {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  min-height: clamp(460px, 60vh, 640px);
  align-items: stretch;
}
.kv-liv__panel {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  border: 0;
  padding: 0;
  text-align: left;
  background: none;
  flex: 1;
  min-width: 0;
  /* Mørkt/avmettet filter fjernet etter innspill fra innholdsprodusent —
     panelene viser bildene i naturlige farger også når de er inaktive. */
  transition: flex 0.55s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.kv-liv__panel.is-on { flex: 3.2; }
.kv-liv__bg { position: absolute; inset: 0; }
.kv-liv__shade {
  position: absolute;
  inset: 0;
  /* Lettet etter innspill: bare nok mørkning nederst til at teksten leses. */
  background: linear-gradient(to top, rgba(10,22,40,0.82) 0%, rgba(10,22,40,0.42) 34%, rgba(10,22,40,0.08) 62%, rgba(10,22,40,0) 100%);
}
.kv-liv__badge {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-cream);
  text-shadow: 0 1px 6px rgba(10, 22, 40, 0.85);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.kv-liv__panel.is-on .kv-liv__badge { opacity: 0; }
.kv-liv__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 2.4vw, 34px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.18s;
}
.kv-liv__panel.is-on .kv-liv__content { opacity: 1; pointer-events: auto; }
/* Panelets slør (.kv-liv__shade) er regnet i prosent av panelet. Er
   teksten høy, når tittelen opp dit sløret nesten er borte, og «Småbyliv»
   sto på lys himmel (Flekkefjord, 1024 og 1440, og engelsk på telefon).
   Tekstblokken får derfor et eget slør som følger teksten: mørkt bak hele
   teksten, og en myk overgang i luften over tittelen. */
.kv-liv__panel .kv-liv__content {
  padding-top: clamp(48px, 6vw, 88px);
  background: linear-gradient(to top, rgba(10, 22, 40, 0.82) 0%, rgba(10, 22, 40, 0.66) 70%, rgba(10, 22, 40, 0) 100%);
}
.kv-liv__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--color-warm-white);
  text-shadow: 0 1px 6px rgba(10, 22, 40, 0.8);
  margin-bottom: 8px;
}
.kv-liv__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.5127rem + 1.6526vw, 3rem);
  line-height: var(--linje-tett);
  color: var(--color-cream);
  text-shadow: 0 2px 12px rgba(10, 22, 40, 0.6);
}
.kv-liv__text {
  margin: 0 0 14px;
  max-width: 52ch;
  font-size: var(--brod);
  line-height: 1.62;
  color: var(--color-cream);
  text-shadow: 0 1px 8px rgba(10, 22, 40, 0.7);
}
.kv-liv__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kv-liv__chip {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  border: 1px solid rgba(241, 235, 227, 0.35);
  border-radius: 999px;
  color: var(--color-cream);
  padding: 6px 12px;
  white-space: nowrap;
}
.kv-liv__credit {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  /* Hel farge: 55 % alfa ga 2,75 over bildet (pikselmaaling 28. sep 2026). */
  color: var(--color-cream);
}

/* ---------- Hero: lesbar region-linje ---------- */
/* Kommunevaapenet oeverst til venstre i heltebildet (Tom 13. sep 2026).
   Venstrekanten foelger Region Lister-mynten i headeren paa hver bredde —
   samme polstring som .lister-stripe__inner (48 / 24 / 16 px) — og toppen
   ligger under den faste headeren med litt luft. */
/* Plassen våpenet tar, i variabler: helten bruker de samme tallene til å
   holde innholdet under våpenet. Uten det la signaturboksen seg oppå
   våpenet på liggende telefon, der innholdet er høyere enn skjermen
   («LI» i «Lister · Agder» ble dekket). */
.kv-page .v-hero {
  --kv-vaapen-topp: calc(var(--nav-height) + clamp(20px, 2.4vw, 32px));
  --kv-vaapen-hoyde: clamp(58px, 5vw, 72px);
  padding-top: calc(var(--kv-vaapen-topp) + var(--kv-vaapen-hoyde) + var(--space-md));
}
.kv-page .kv-hero-vaapen {
  position: absolute;
  z-index: 3;
  top: var(--kv-vaapen-topp);
  left: var(--space-2xl);
  height: var(--kv-vaapen-hoyde);
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(10, 22, 40, 0.45));
}
@media (max-width: 768px) {
  .kv-page .v-hero { --kv-vaapen-hoyde: 50px; }
  .kv-page .kv-hero-vaapen { left: var(--space-lg); }
}
@media (max-width: 480px) {
  .kv-page .v-hero { --kv-vaapen-hoyde: 46px; }
  .kv-page .kv-hero-vaapen { left: var(--space-md); }
}
/* Region-linjen må være lesbar over både foto og video (innspill fra
   innholdsprodusent: «for lys, går ikkje å lese»). */
.kv-page .v-hero-region {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(10, 22, 40, 0.85), 0 0 18px rgba(10, 22, 40, 0.55);
}

/* Rammeboks («By og land hand i hand») — avrundet, hjørnemerkene er
   fjernet for hjørne-konsistens (bilder 14 / kort 18 / piller 999) */
.kv-frame {
  position: relative;
  margin-top: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(10, 22, 40, 0.25);
  border-radius: 14px;
  padding: clamp(24px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(22px, 3.6vw, 56px);
  align-items: start;
}
.kv-frame__quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 1.5127rem + 1.6526vw, 3rem);
  line-height: var(--linje-display);
  max-width: 13ch;
}
.kv-frame__sub {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* 0,5 ga 3,42 mot lys flate. 0,60 gir 4,6. */
  color: rgba(10, 22, 40, 0.6);
}
.kv-frame__cols {
  columns: 2;
  column-gap: clamp(24px, 3vw, 44px);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: rgba(10, 22, 40, 0.8);
}
.kv-frame__cols p { margin: 0 0 1em; }
.kv-frame__cols p:last-child { margin-bottom: 0; }

/* ---------- Bo ---------- */
.kv-bo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
/* FINN-boksen bruker naa .l-bo__finn fra lister.css — samme uttrykk
 * som regionsiden, kun lenkene er kommune-filtrerte. */

/* ETT boområde (Sirdal, Tom 20. okt 2026): kortet alene i et tredelt
   rutenett lot to tredeler stå tomme, med FINN-boksen midtstilt under.
   Da legges hodet, kortet og FINN-boksen i samme rutenett: kortet
   liggende over to kolonner, FINN-boksen i den tredje med tekst og
   knapper under hverandre, like høy som kortet. Under 1100 px står
   boksen under kortet som før. */
@media (min-width: 1101px) {
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(14px, 2vw, 26px);
  }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) > :first-child { grid-column: 1 / -1; }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) .kv-bo-grid { grid-column: 1 / 3; display: block; }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) .l-bo-card { aspect-ratio: 16 / 10; }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) .l-bo__finn {
    grid-column: 3;
    margin: 0;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(28px, 2.6vw, 40px);
  }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) .l-bo__finn-ctas {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }
  .kv-inner:has(.kv-bo-grid > .l-bo-card:only-child) .l-bo__finn-cta { justify-content: center; }
}

.kv-btn {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px; /* pille — samme knappespråk som kv-pill/ls-stripe */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kv-btn--primary { background: var(--kv-mork); color: var(--color-cream); padding: 12px 20px; }
.kv-btn--primary:hover { background: var(--kv-aksent); color: var(--color-cream); }
.kv-btn--ghost { border: 1px solid var(--kv-ink); color: var(--kv-ink); padding: 11px 19px; }
.kv-btn--ghost:hover { border-color: var(--kv-eyebrow); color: var(--kv-eyebrow); }

/* ---------- Kartet ---------- */
.kv-map-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kv-map-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Lag-velgerne styres av lister-map.js ([data-toggle-marker]): på som
   standard, .is-off når laget er skrudd av. */
.kv-map-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  cursor: pointer;
  padding: 9px 15px;
  transition: all 0.2s ease;
  background: rgba(10, 22, 40, 0.08);
  color: var(--kv-ink);
  border: 1px solid rgba(10, 22, 40, 0.5);
}
.kv-map-chip.is-off {
  background: none;
  color: rgba(10, 22, 40, 0.45);
  border: 1px dashed rgba(10, 22, 40, 0.3);
}
.kv-map-chip__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; opacity: 1; }
.kv-map-chip.is-off .kv-map-chip__dot { opacity: 0.4; }

.kv-map { position: relative; border: 1px solid rgba(10, 22, 40, 0.25); border-radius: 14px; overflow: hidden; }
.kv-map__canvas { height: clamp(420px, 62vh, 640px); background: #48665c; }
.kv-map__hint {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  color: rgba(10, 22, 40, 0.55);
}
/* Fullskjerm (maksimer-knappen): kartflaten fyller hele skjermen. */
.kv-map:fullscreen { border: 0; border-radius: 0; background: var(--color-kort-mork); }
.kv-map:fullscreen .kv-map__canvas { height: 100vh; }

/* Kartkortet gjenbruker Listers .l-map-card fra lister.css; markørene
   tegnes som GL-lag av lister-map.js (felles motor med forsiden). */

/* ---------- Natur / sticky ---------- */
.kv-sticky-wrap { position: relative; }
/* Bildet var bakgrunnen, med samme fokus (se .bakgrunnsbilde i styles.css). */
.kv-sticky > .bakgrunnsbilde { object-position: center 68%; }
.kv-sticky {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  min-height: 550px;
  overflow: hidden;
}
/* INGEN SLØR OVER BILDET (Marion 8. okt 2026, som på stedssidene).
   Overskriften står i teksten som ruller opp (.kv-sticky-tittel), og
   krediteringen i en lys stripe nederst på bildet. */
.kv-sticky-tittel {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--color-midnight);
}
.kv-sticky__credit {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px clamp(20px, 4vw, 56px);
  background: var(--surface-story);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--brod-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
.kv-sticky-after { position: relative; z-index: 1; }

.kv-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.kv-trio article { border-top: 2px solid var(--kv-ink); padding-top: 16px; }
.kv-trio .kv-eyebrow { letter-spacing: var(--sperring-lg); margin-bottom: 8px; }
.kv-trio h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3592rem + 0.6009vw, 1.9rem);
  line-height: var(--linje-hero);
}
.kv-trio p { margin: 0; font-size: var(--brod); line-height: var(--linje-brod); color: rgba(10, 22, 40, 0.75); }

.kv-natur-split {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
}
.kv-natur-split__right { display: flex; flex-direction: column; }
.kv-natur-quote {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod-loft);
  line-height: var(--linje-tittel);
}
.kv-links { display: flex; flex-direction: column; flex: 1; border-top: 1px solid rgba(10, 22, 40, 0.2); }
.kv-links a {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(10, 22, 40, 0.2);
  text-decoration: none;
  color: var(--kv-ink);
  font-size: var(--brod);
  transition: color 0.2s ease;
}
.kv-links a:last-child { border-bottom: 0; }
.kv-links a:hover { color: var(--kv-eyebrow); }

/* ---------- Oppvekst ---------- */
.kv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 36px);
  margin-bottom: clamp(30px, 4.4vw, 52px);
}
.kv-stat { border-top: 2px solid var(--kv-ink); padding-top: 14px; }
.kv-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 2.107rem + 2.1033vw, 4rem);
  line-height: var(--linje-tett);
  color: var(--kv-gronn);
}
.kv-stat--accent .kv-stat__value { color: var(--kv-eyebrow); }
.kv-stat__label {
  display: block;
  margin-top: 8px;
  font-size: var(--brod);
  line-height: var(--linje-etikett);
  color: rgba(10, 22, 40, 0.75);
}

/* Fullbredde-bilde i oppvekst (mellom nøkkeltall og skoleboks) —
 * bredt utsnitt så seksjonen får ett stort, rolig anker. */
.kv-oppvekst-full { margin-bottom: clamp(30px, 4.4vw, 52px); }
/* 16:9 — bredere utsnitt kutter for mye av kildebildet (1600×1232). */
.kv-oppvekst-full .kv-figure__frame { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .kv-oppvekst-full .kv-figure__frame { aspect-ratio: 4 / 3; max-height: none; }
}

/* Videoen under overgangsavsnittene. Full innholdsbredde, samme ramme og
   samme utsnitt som fullbildet over - de skal lese som to like elementer i
   samme spalte, ikke som bilde og «noe annet». */
.kv-oppvekst-video {
  margin-top: clamp(30px, 4.4vw, 52px);
}
.kv-oppvekst-video .kv-figure__frame { aspect-ratio: 16 / 9; }
.kv-oppvekst-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 760px) {
  .kv-oppvekst-video .kv-figure__frame { aspect-ratio: 4 / 3; max-height: none; }
}

.kv-oppvekst-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: stretch;
}
.kv-oppvekst-split__figure { display: flex; min-height: 0; }
.kv-oppvekst-split__figure .kv-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  height: 100%;
}
.kv-oppvekst-split__figure .kv-figure__frame { flex: 1 1 0; min-height: 0; }

/* Stablet: bildet i full lesebredde, skoleboksen i full lesebredde under.
 * Riktig naar boksen har mye innhold — en utvidbar oversikt vokser naar
 * leseren aapner en gruppe, og da blir en smal hoeyrekolonne trang.
 * I full bredde faar bildet sitt naturlige format i stedet for aa strekkes
 * til hoeyden av kolonnen ved siden av. */
.kv-oppvekst-split--stablet {
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 44px);
}
.kv-oppvekst-split--stablet .kv-oppvekst-split__figure .kv-figure {
  min-height: 0;
  height: auto;
}
.kv-oppvekst-split--stablet .kv-oppvekst-split__figure .kv-figure__frame {
  flex: none;
  aspect-ratio: 16 / 9;
}

/* I full bredde staar SKOLETYPENE vannrett, med sine egne skoler under seg.
 * Foer laa de fire typene under hverandre og skolene bredte seg utover i tre
 * kolonner — da ble det mye luft til hoeyre for hvert navn, og aapning av én
 * gruppe skjoev de tre andre nedover.
 *
 * Naa er hver type en egen spalte. Skolene legger seg rett under sin egen
 * type, og aapning flytter bare den spalta — de andre staar i ro.
 * Spaltene starter oeverst (align-items: start) slik at typenavnene ligger
 * paa linje uansett hvor mange skoler hver av dem har. */
@media (min-width: 861px) {
  .kv-oppvekst-split--stablet .kv-skoler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0 clamp(20px, 2.4vw, 36px);
  }
  /* Én strek over hver spalte i stedet for streker tvers over hele boksen. */
  .kv-oppvekst-split--stablet .kv-skoler__gruppe { border-bottom: 0; }
  .kv-oppvekst-split--stablet .kv-skoler__gruppe:last-child { border-bottom: 0; }

  /* Antallet faar egen linje under typenavnet — «Privat grunnskole» og
   * «1 skole» faar ikke plass ved siden av hverandre i en spalte paa 310 px. */
  .kv-oppvekst-split--stablet .kv-skoler__hode { flex-wrap: wrap; row-gap: 2px; }
  .kv-oppvekst-split--stablet .kv-skoler__navn { flex-basis: 100%; }
  .kv-oppvekst-split--stablet .kv-skoler__antall { margin-left: 0; }
  .kv-oppvekst-split--stablet .kv-skoler__pil { margin-left: auto; }

  /* Skolene under sin egen type: én per linje. */
  .kv-oppvekst-split--stablet .kv-skoler__liste { grid-template-columns: 1fr; }
}

/* Under 861 px er det ikke plass til fire spalter — da faller den tilbake
 * til stabelen med skolene i to kolonner, og under 560 px i én.
 * Maalt paa 375 px: to kolonner ga 134 px hver, og «Eilert Sundt
 * videregaaende skole» brakk til tre linjer. */
@media (max-width: 860px) {
  .kv-oppvekst-split--stablet .kv-skoler__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .kv-oppvekst-split--stablet .kv-skoler__liste {
    grid-template-columns: 1fr;
  }
}

/* Skoleboksen (.kv-darkcard, .kv-skoler) ligger i skoleboks.css — den
   deles med stedssidene via komponenten SkoleBoks.astro (11. sep 2026).
   Kommunelayoutens regler for boksen (.kv-oppvekst-split--stablet …)
   staar over. */

/* Innledningen satt som broedtekst i stedet for ingress. Brukes der
 * oppvekst ikke lenger er en kort seksjon med egen aapning, men en del av et
 * lengre kapittel: paa Lyngdal kommer jobb foer og overgangen til natur
 * etter, og da gir en ingress midt i kapittelet to ulike stemmer i samme
 * tekst. Samme stoerrelse, lesebredde og farge som overgangsteksten under,
 * saa hele kapittelet leser med én stemme. */
/* Broedteksten staar i lesebredden (--lesebredde), som all annen loepende
 * tekst (Tom 19. okt 2026). Den fikk hele innholdsbredden i september for
 * aa flukte med bildet og skoleboksen til hoeyre; da sto Oppvekst med
 * linjer paa 1313 px mens resten av sida leste i 752. Na deler tekst og
 * bilde venstrekant, og bildene alene gaar i full innholdsbredde. */
.kv-intro--brodtekst {
  font-size: var(--brod);
  line-height: var(--linje-brod);
  max-width: var(--lesebredde);
  color: var(--kv-ink);
}

/* Overgangsteksten under skoleboksen. Den skal lese som broedtekst i
 * kapittelet, ikke som en ny ingress — derfor --kv-body og ikke --kv-intro.
 * Lesebredde som ellers paa sida: teksten skal ikke gaa i full bredde bare
 * fordi boksen over gjoer det. */
.kv-overgang {
  margin-top: clamp(32px, 4.6vw, 56px);
  max-width: var(--lesebredde);
  font-size: var(--brod);
  line-height: var(--linje-brod);
}
.kv-overgang p { margin: 0; }
.kv-overgang p + p { margin-top: clamp(14px, 1.6vw, 20px); }

.kv-fritid { margin-top: clamp(32px, 4.6vw, 56px); }
.kv-fritid__title {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3831rem + 1.3521vw, 2.6rem);
  line-height: var(--linje-display);
  color: var(--kv-ink);
  max-width: 30ch;
}
.kv-fritid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 36px);
}
.kv-fritid__item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 2px solid var(--kv-ink);
  padding-top: 12px;
}
.kv-fritid__item svg { flex: none; color: var(--kv-gronn); }
.kv-fritid__item span { font-size: var(--brod); line-height: var(--linje-kort); color: rgba(10, 22, 40, 0.85); }

/* ---------- Kulturarv ---------- */
.kv-kultur {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.kv-kultur__text {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  /* Løpende avsnitt, samme rolle som .kv-jobb-intro__text — ikke ingress. */
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: rgba(10, 22, 40, 0.85);
}
.kv-kultur__text p { margin: 0; }
.kv-vaapen {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex;
  /* Stables når teksten ikke får 16em ved siden av skjoldet. Ellers ble den
     ett ord per linje på 320 px, som de to andre våpenboksene unngår. */
  flex-wrap: wrap;
  gap: clamp(16px, 2.2vw, 26px);
  align-items: center;
  background: rgba(10, 22, 40, 0.05);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 26px);
}
.kv-vaapen img {
  width: clamp(70px, 7vw, 96px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 6px 14px rgba(10, 22, 40, 0.4));
}
.kv-vaapen p { flex: 1 1 16em; margin: 0; font-size: var(--brod); line-height: var(--linje-brod-tett); color: rgba(10, 22, 40, 0.85); }
.kv-kultur__figures {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(40px, 7vw, 110px);
}

/* To kolonner: siste figur (dresinen) vokser så bunnen flukter med
   venstre kolonne (samme grep som korpsbildet i Oppvekst — bildene er
   cover-beskåret, så mer høyde viser bare mer av bildet). */
@media (min-width: 1101px) {
  .kv-kultur { align-items: stretch; }
  .kv-kultur__figures .kv-figure:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .kv-kultur__figures .kv-figure:last-child .kv-figure__frame {
    flex: 1 1 0;
    min-height: 280px;
    aspect-ratio: auto !important;
  }
}

/* ---------- Historier ----------
   Flyttet til felleskomponenten HistorierSection.astro +
   public/styles/historier-section.css (hs-prefiks). */

/* ---------- Jobb ---------- */
.kv-jobb-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  /* Var «start», som samlet all restplass under teksten. Er teksten kortere
   * enn bildet, leste det som et hull i leseflyten framfor som luft. Naa
   * fordeles den likt over og under, og det leser som et valg. */
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}
/* Er teksten for kort til aa baere et bilde ved siden av seg, gaar bildet
 * under den i stedet. Da slipper vi bade tomrommet og et bilde som taarner
 * over fire linjer tekst. Komponenten setter klassen ut fra tekstlengden. */
.kv-jobb-intro--stablet {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* Bildet foelger tekstkolonnens bredde framfor aa gaa i full bredde. Et
 * fullbreddes band ser flott ut, men krever motiver som taaler aa bli
 * skaaret vidt — og da mistet turistbildet baade retten og personen. */
.kv-jobb-intro--stablet .kv-figure { max-width: 68ch; font-size: var(--brod); }
/* ch maales i elementets egen grad. Teksten over staar paa --brod, figuren
   arvet en mindre grad, saa «68ch» ga et bilde som var smalere enn
   tekstkolonnen (Farsund, Tom 24. sep 2026: «hele lesebredden»). Samme
   grad gir samme bredde. Bildeteksten har sin egen grad (.kv-caption). */
/* Hele innholdsbredden, kant i kant med «Se alle stillinger» (figure.fullBredde). */
.kv-jobb-intro--stablet .kv-figure.kv-figure--full { max-width: none; }
.kv-jobb-intro__text {
  max-width: var(--lesebredde);
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: rgba(10, 22, 40, 0.8);
}
.kv-jobb-intro__text p { margin: 0; }

/* Naar jobb er loeftet opp som ledende kapittel (kv-section--tidlig settes
 * bare av tidligeSeksjoner, i dag kun Lyngdal) skal broedteksten lese i
 * samme grad og takt som oppvekst-kapittelet rett under: 24 px, 1.85 og
 * samme avsnittsluft. Ellers leser de to som to ulike stemmer. */
.kv-section--tidlig .kv-jobb-intro__text {
  font-size: var(--brod);
  line-height: var(--linje-brod-luftig);
  gap: clamp(14px, 1.6vw, 20px);
  color: var(--kv-ink);
}
/* Sitatet i jobb-seksjonen. Var én kort linje i stor serif; nå bærer den
 * et ekte, flersetnings sitat med kreditering — mindre grad, tettere
 * linjehøyde og en venstre kant som markerer at det er en annen stemme. */
.kv-jobb-quote {
  margin: 1.4em 0 0 !important;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 2px solid var(--kv-gull, #b98d5f);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod);
  line-height: var(--linje-brod-tett);
  color: var(--kv-ink);
}
.kv-jobb-quote p {
  margin: 0;
}
.kv-jobb-quote p + p {
  margin-top: 0.7em;
}
/* Avsnittene i full lesebredde naar sitatraden baerer bildet. */
.kv-jobb-intro__text--full {
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* Sitat + bilde side om side; sitatet baerer mest og faar mest plass. */
.kv-jobb-sitatrad {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}
@media (max-width: 880px) {
  .kv-jobb-sitatrad {
    grid-template-columns: minmax(0, 1fr);
  }
  .kv-jobb-sitatrad .kv-figure {
    max-width: 68ch;
  }
}
.kv-jobb-sitatrad .kv-jobb-quote {
  margin-top: 0 !important;
}

/* Stort bilde, og sitatet alene under med rundt portrett (quotePortrett).
 * Sitatet staar for seg selv og er en uttalelse, saa det faar
 * uttalelsesgraden fra broedtekstbaandet. Portrettet erstatter den
 * loddrette streken som markerte sitatet i side om side-oppsettet. */
.kv-jobb-stort {
  margin: 0 0 clamp(36px, 5vw, 60px);
}
.kv-jobb-sitatportrett {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  max-width: 62rem;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.kv-jobb-sitatportrett__bilde {
  width: clamp(84px, 9vw, 120px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.kv-jobb-sitatportrett .kv-jobb-quote {
  margin: 0 !important;
  padding: 0;
  border-left: 0;
  font-size: var(--brod-loft);
}
@media (max-width: 560px) {
  .kv-jobb-sitatportrett { grid-template-columns: minmax(0, 1fr); }
}
/* Fotokrediteringen for portrettet står inne i sitatet, men er mikrotekst,
 * ikke en del av utsagnet: brødskriften, ikke sitatets kursiv. */
.kv-jobb-sitatportrett .kv-caption {
  display: block;
  margin-top: 0.6em;
  font-family: var(--font-body);
  font-style: normal;
}

/* Krediteringen speiler eyebrow-typografien (samme snitt, vekt og
 * spacing som .kv-eyebrow) ett trinn mindre — men med egen dempet
 * farge, ikke eyebrow-fargen. Marions bestilling 18. aug. */
.kv-jobb-quote__cite {
  display: block;
  margin-top: 1.5em;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--kv-murk, var(--tekst-dempet));
}
.kv-jobb-quote__cite::before {
  content: '— ';
}
.kv-jobb-tail { background: transparent; padding: clamp(40px, 5.6vw, 72px) 0 0; }
.kv-jobb-tail .l-jobb__inner { padding: 0 0 clamp(56px, 8vh, 104px); }

/* ---------- Ta steget ----------
 * Flyttet til /styles/ta-steget.css. Forsidene bruker nå samme seksjon,
 * og den skal ha én kilde. Filen lastes av KommunePageV2 ved siden av
 * denne. Per-kommune-fargene virker som før: reglene der leser
 * --kv-mork og --kv-eyebrow herfra, med fallback for forsiden. */

/* ---------- Footer-justering: mørk flate som fortsetter Ta steget-landingen ---------- */
.kv-page .site-footer--lister {
  background: var(--kv-mork);
  border-top: 1px solid rgba(241, 235, 227, 0.12);
  padding: clamp(18px, 2.2vw, 28px) 24px;
}

/* ============================================================
   Responsivt — designet var 1440-orientert; brekkpunktene her
   følger lister.css-konvensjonene.
   ============================================================ */
@media (max-width: 1100px) {
  .kv-bo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-trio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kv-kultur { grid-template-columns: minmax(0, 1fr); }
  .kv-kultur__figures { margin-top: 0; }
  .kv-jobb-intro { grid-template-columns: minmax(0, 1fr); }
  .kv-oppvekst-split { grid-template-columns: minmax(0, 1fr); }
  .kv-oppvekst-split__figure .kv-figure__frame { aspect-ratio: 16 / 9; flex: none; }
  /* Skoleboksen mellom bildene paa mobil — unngaar to bilder rett etter
   * hverandre. Gjelder BARE der det faktisk ligger et fullbredde-bilde rett
   * over: i dag Flekkefjord. Regelen sto foer paa alle kommunene, og da ble
   * bildet liggende UNDER boksen paa mobil selv der det ikke var noe bilde
   * over — motsatt av rekkefoelgen paa desktop, uten grunn. */
  .kv-oppvekst-split--etter-fullbilde .kv-oppvekst-split__figure { order: 2; }

  /* Boksen staar VISUELT foerst her, men SIST i DOM — det er order: 2 over
   * som bytter dem. Nettleserens scroll-forankring velger anker i
   * DOM-rekkefoelge, og naar boksen vokser ved aapning kompenserer den ved
   * aa flytte rullingen. Resultatet er at innholdet ser ut til aa bli
   * skjoevet OPPOVER i stedet for nedover, som er det naturlige naar noe
   * utvider seg.
   *
   * overflow-anchor: none slaar av kompensasjonen for denne todelingen.
   * Da blir alt over staaende i ro, og det som ligger under skyves ned. */
  .kv-oppvekst-split--etter-fullbilde { overflow-anchor: none; }
}

@media (max-width: 860px) {
  .kv-liv { flex-direction: column; min-height: 0; }
  .kv-liv__panel { min-height: 200px; filter: none; }
  .kv-liv__panel.is-on { min-height: 420px; }
  /* Stablet er det aktive panelet et kort med tekst, og teksten må bestemme
     høyden. Absolutt plassert bidro den ikke, og på 320 px klippet panelet
     bort tittelen og starten av teksten. */
  .kv-liv__panel { display: flex; flex-direction: column; justify-content: flex-end; }
  .kv-liv__panel.is-on .kv-liv__content { position: relative; }
  .kv-liv__badge { display: none; }
  /* Teksten staar hoeyere i panelet her; sloeret maa helt opp (pikselmaaling 29. sep 2026). */
  .kv-liv__shade { background: linear-gradient(to top, rgba(10,22,40,0.9) 0%, rgba(10,22,40,0.75) 55%, rgba(10,22,40,0.35) 85%, rgba(10,22,40,0.2) 100%); }
  .kv-frame { grid-template-columns: minmax(0, 1fr); }
  .kv-frame__cols { columns: 1; }
  .kv-bo-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kv-natur-split { grid-template-columns: minmax(0, 1fr); }
  .kv-sticky { height: 72vh; min-height: 420px; }
}

/* Fanevarianten av skoleboksen (.kv-skoler--faner, __fane, __panel,
   __flis) ligger ogsaa i skoleboks.css. */


/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). «Tidlig»-seksjonene
   beholder sin korte topp. Jobbseksjonen slutter i partnerveggen, og
   veggens egen bunnmarg kom i tillegg til halens bunnluft. */
@media (max-width: 767px) {
  .kv-section { padding-bottom: var(--mobil-seksjon); }
  .kv-section:not(.kv-section--tidlig) { padding-top: var(--mobil-seksjon); }
  .kv-jobb-tail .l-jobb__inner { padding-bottom: var(--mobil-seksjon); }
  .kv-jobb-tail .l-jobb__wall { margin-bottom: 0; }
  .kv-jobb-tail .l-jobb__featured:last-child { margin-bottom: 0; }
  /* Fotografiene går kant i kant uten runde hjørner; bildeteksten blir
     stående på tekstmargen (Tom 20. okt 2026). */
  .kv-figure__frame { margin-inline: calc(50% - 50vw); border-radius: 0; }
}