/* ==========================================================================
   Sorgstøttealliansen – prototype-stilark
   Fargene kommer fra kundens logo (grønn) og den gule bakgrunnen kunden
   bruker på Facebook. Kontrast er målt (se README). Struktur, avstander,
   radius, knappetilstander og fokusring følger design_grunnmal.md.
   Token-navnene er ment å gå rett inn i et WordPress child-theme.
   ========================================================================== */

:root {
  /* Farger */
  --farge-gronn:          #1E7A4E;   /* logoens mørke grønne – knapper på hvit/krem (5,3:1 med hvit tekst) */
  --farge-gronn-hover:    #16663F;
  --farge-gronn-mork:     #0F5A38;   /* tekst på gul flate (6,4:1), bunntekst */
  --farge-gronn-lys:      #7FC4A5;   /* logoens lyse grønne – kun dekor, ikke tekst */
  --farge-gronn-lysest:   #E3F2EA;
  --farge-gul:            #F6E2A2;   /* Facebook-bakgrunnen – aksentflater */
  --farge-gul-lys:        #FBF1D3;
  --farge-bakgrunn:       #FBF7EC;   /* varm krem – sideflate */
  --farge-hvit:           #FFFFFF;
  --farge-tekst:          #1F2A24;   /* 13,9:1 på krem */
  --farge-tekst-dempet:   #3D4A43;   /* 8,7:1 på krem */
  --farge-kant:           #E6DDC6;
  --farge-mork:           #1F2A24;   /* tekst, knapper og lenker på den mørke gule flaten (11,5:1) */
  --farge-mork-hover:     #0E1612;
  --farge-varsel-bg:      #FFF1F0;
  --farge-varsel-kant:    #E0A9A2;
  --farge-varsel-tekst:   #7A1F14;

  /* Typografi */
  /* Serif i overskrifter (Fraunces), Plus Jakarta Sans i brødtekst og knapper. */
  --font-overskrift: "Fraunces", Georgia, "Times New Roman", serif;
  --font-brodtekst:  "Plus Jakarta Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --tekst-hero:   clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  --tekst-h2:     clamp(1.65rem, 1.2rem + 1.4vw, 2.4rem);
  --tekst-h3:     1.25rem;
  --tekst-h4:     1.1rem;
  --tekst-brod:   1.125rem;   /* 18 px */
  --tekst-base:   1rem;
  --tekst-liten:  0.875rem;
  --linje-brod:   1.55;
  --linje-tett:   1.15;

  /* Avstand */
  --rom-xs: 4px; --rom-sm: 8px; --rom-md: 16px; --rom-lg: 24px;
  --rom-xl: 32px; --rom-2xl: 48px; --rom-3xl: 64px; --rom-seksjon: 88px;

  /* Radius og skygge */
  --radius-sm: 6px; --radius-md: 10px; --radius-kort: 16px; --radius-stor: 22px; --radius-pill: 9999px;
  --skygge-lett: 0 2px 8px rgba(31, 42, 36, 0.08);
  --skygge-hover: 0 6px 20px rgba(31, 42, 36, 0.14);

  /* Bevegelse */
  --overgang-rask: 150ms ease;
  --overgang: 280ms ease;

  /* Bredder */
  --bredde-innhold: 760px;
  --bredde-bred: 1200px;
}

/* --------------------------------------------------------------------------
   Grunnlag
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-brodtekst);
  font-size: var(--tekst-brod);
  line-height: var(--linje-brod);
  color: var(--farge-tekst);
  background: var(--farge-bakgrunn);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-overskrift); color: var(--farge-tekst); line-height: var(--linje-tett); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--tekst-hero); }
h2 { font-size: var(--tekst-h2); }
h3 { font-size: var(--tekst-h3); font-weight: 600; }
h4 { font-size: var(--tekst-h4); font-family: var(--font-brodtekst); font-weight: 700; }
p, li { max-width: 70ch; }
a { color: var(--farge-gronn-mork); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--overgang-rask); }
a:hover { color: var(--farge-gronn); text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: var(--rom-xs); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--farge-kant); margin: var(--rom-xl) 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; font-size: var(--tekst-base); }
.tabell-rull { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabell-rull table { min-width: 560px; }
td ul { padding-left: 1.1em; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--farge-kant); vertical-align: top; }
th { font-weight: 700; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--farge-gronn-mork); outline-offset: 3px; border-radius: var(--radius-sm); }
.morkt :focus-visible { outline-color: var(--farge-gul); }

.skip-link {
  position: absolute; left: var(--rom-md); top: -100px; z-index: 1000;
  background: var(--farge-gronn-mork); color: var(--farge-hvit);
  padding: 10px 18px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--rom-md); }
.visuelt-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.beholder { width: 100%; max-width: var(--bredde-bred); margin: 0 auto; padding: 0 var(--rom-lg); }
.beholder--smal { max-width: calc(var(--bredde-innhold) + 2 * var(--rom-lg)); }
.seksjon { padding: var(--rom-seksjon) 0; }
.seksjon--tett { padding: var(--rom-2xl) 0; }
.seksjon--gul { background: var(--farge-gul); }
.seksjon--gul-lys { background: var(--farge-gul-lys); }
.seksjon--hvit { background: var(--farge-hvit); }
.seksjon--gronn { background: var(--farge-gronn-mork); color: var(--farge-hvit); }
.seksjon--gronn h2, .seksjon--gronn h3, .seksjon--gronn p { color: var(--farge-hvit); }
.seksjon--gronn a { color: var(--farge-gul); }
.seksjon__topp { margin-bottom: var(--rom-xl); }
.seksjon__topp p { margin-top: var(--rom-sm); color: var(--farge-tekst-dempet); }
.midtstilt { text-align: center; }
.midtstilt p { margin-left: auto; margin-right: auto; }
.rutenett { display: grid; gap: var(--rom-lg); }
.rutenett--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rutenett--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rutenett--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stabel > * + * { margin-top: var(--rom-md); }
.stabel--stor > * + * { margin-top: var(--rom-lg); }
.overlinje { font-family: var(--font-brodtekst); font-size: var(--tekst-liten); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--farge-gronn); margin-bottom: var(--rom-sm); }
.ingress { font-size: 1.25rem; color: var(--farge-tekst-dempet); }
.prosa > * + * { margin-top: var(--rom-md); }
.prosa h2 { margin-top: var(--rom-2xl); }
.prosa h3 { margin-top: var(--rom-xl); }
.prosa h2 + *, .prosa h3 + * { margin-top: var(--rom-md); }
.prosa img { border-radius: var(--radius-kort); }
.liten { font-size: var(--tekst-liten); color: var(--farge-tekst-dempet); }

/* --------------------------------------------------------------------------
   Knapper – alle tilstander (default, hover, fokus, aktiv, deaktivert)
   -------------------------------------------------------------------------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-family: var(--font-brodtekst); font-size: var(--tekst-base); font-weight: 600; line-height: 1.1;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang), transform var(--overgang-rask);
  min-height: 44px;
}
.knapp:active { transform: scale(0.98); }
.knapp[aria-disabled="true"], .knapp:disabled { opacity: 0.45; pointer-events: none; }
.knapp--primar { background: var(--farge-gronn); color: var(--farge-hvit); }
.knapp--primar:hover { background: var(--farge-gronn-hover); color: var(--farge-hvit); }
.knapp--primar:active { background: var(--farge-gronn-mork); }
.knapp--sekundar { background: transparent; color: var(--farge-gronn-mork); border-color: var(--farge-gronn-mork); }
.knapp--sekundar:hover { background: rgba(15, 90, 56, 0.07); color: var(--farge-gronn-mork); }
.knapp--sekundar:active { background: rgba(15, 90, 56, 0.14); }
.knapp--gul { background: var(--farge-gul); color: var(--farge-mork); }
.knapp--gul:hover { background: #F0D585; color: var(--farge-mork); }
.knapp--liten { padding: 9px 18px; font-size: var(--tekst-liten); min-height: 38px; }
.seksjon--gronn .knapp--sekundar { color: var(--farge-hvit); border-color: rgba(255,255,255,0.5); }
.seksjon--gronn .knapp--sekundar:hover { background: rgba(255,255,255,0.1); color: var(--farge-hvit); }
.knapperad { display: flex; flex-wrap: wrap; gap: var(--rom-md); margin-top: var(--rom-lg); }

/* --------------------------------------------------------------------------
   Topptekst og meny
   -------------------------------------------------------------------------- */
.topp { position: sticky; top: 0; z-index: 100; background: var(--farge-hvit); border-bottom: 1px solid var(--farge-kant); }
.topp__rad { display: flex; align-items: center; justify-content: space-between; gap: var(--rom-md); min-height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--farge-tekst); flex-shrink: 0; }
.logo img { height: 64px; width: auto; }
.logo__tekst { font-family: var(--font-overskrift); font-weight: 600; font-size: 1.1rem; line-height: 1.1; letter-spacing: 0.02em; }
.logo__tekst small { display: block; font-family: var(--font-brodtekst); font-weight: 400; font-size: 0.72rem; color: var(--farge-tekst-dempet); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.meny { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; }
.meny > li { position: relative; }
.meny a, .meny button {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-pill);
  background: none; border: 0; font: inherit; font-size: var(--tekst-base); font-weight: 600; color: var(--farge-tekst);
  text-decoration: none; cursor: pointer; transition: background-color var(--overgang-rask), color var(--overgang-rask);
}
.meny a:hover, .meny button:hover, .meny button[aria-expanded="true"] { background: var(--farge-gul-lys); color: var(--farge-gronn-mork); }
.meny a[aria-current="page"] { color: var(--farge-gronn-mork); box-shadow: inset 0 -3px 0 var(--farge-gronn-lys); border-radius: 0; }
.meny button svg { width: 14px; height: 14px; transition: transform var(--overgang-rask); }
.meny button[aria-expanded="true"] svg { transform: rotate(180deg); }
.undermeny {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; list-style: none; padding: 8px; margin: 0;
  background: var(--farge-hvit); border: 1px solid var(--farge-kant); border-radius: var(--radius-kort); box-shadow: var(--skygge-hover);
  display: none;
}
.undermeny[data-open="true"] { display: block; }
.undermeny a { display: flex; width: 100%; border-radius: var(--radius-md); font-weight: 500; padding: 10px 12px; }
.meny__handling { margin-left: 8px; }
.topp__verktoy { display: flex; align-items: center; gap: 6px; }
.ikonknapp {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: none; border: 1.5px solid transparent; cursor: pointer; color: var(--farge-tekst); transition: background-color var(--overgang-rask), border-color var(--overgang-rask);
}
.ikonknapp:hover { background: var(--farge-gul-lys); }
.ikonknapp svg { width: 22px; height: 22px; }
.meny-knapp { 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; }

/* Søkepanel */
.sok { display: none; border-top: 1px solid var(--farge-kant); background: var(--farge-gul-lys); }
.sok[data-open="true"] { display: block; }
.sok__rad { display: flex; gap: var(--rom-md); align-items: center; padding: var(--rom-md) 0; }
.sok__rad label { font-weight: 600; white-space: nowrap; }
.felt {
  width: 100%; padding: 12px 16px; font: inherit; font-size: var(--tekst-base); color: var(--farge-tekst);
  background: var(--farge-hvit); border: 1.5px solid var(--farge-kant); border-radius: var(--radius-md); transition: border-color var(--overgang-rask), box-shadow var(--overgang-rask);
}
.felt:focus { outline: none; border-color: var(--farge-gronn); box-shadow: 0 0 0 3px rgba(30, 122, 78, 0.18); }
.sok__resultat { list-style: none; padding: 0 0 var(--rom-md); margin: 0; display: grid; gap: 6px; }
.sok__resultat li a { display: block; padding: 10px 14px; background: var(--farge-hvit); border-radius: var(--radius-md); text-decoration: none; }
.sok__resultat li a:hover { background: var(--farge-gronn-lysest); }
.sok__resultat li a span { display: block; font-size: var(--tekst-liten); color: var(--farge-tekst-dempet); }
.sok__tom { padding: 0 0 var(--rom-md); color: var(--farge-tekst-dempet); }

@media (max-width: 1023px) {
  .topp__rad { min-height: 72px; }
  .logo img { height: 52px; }
  .logo__tekst { display: none; }
  .meny-knapp { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--farge-hvit); border-bottom: 1px solid var(--farge-kant); box-shadow: var(--skygge-hover); max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav[data-open="true"] { display: block; }
  .meny { flex-direction: column; align-items: stretch; padding: var(--rom-md) var(--rom-lg) var(--rom-lg); gap: 4px; }
  .meny a, .meny button { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 1.05rem; }
  .meny a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--farge-gronn-lys); border-radius: var(--radius-md); }
  .undermeny { position: static; box-shadow: none; border: 0; background: var(--farge-gul-lys); margin-top: 4px; }
  .meny__handling { margin: var(--rom-md) 0 0; }
  .meny__handling .knapp { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--farge-gul); padding: var(--rom-3xl) 0; position: relative; overflow: hidden; }
.hero__rad { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--rom-2xl); align-items: center; }
.hero h1 { color: var(--farge-mork); }
.hero__under { font-family: var(--font-overskrift); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); color: var(--farge-mork); margin-top: var(--rom-md); line-height: 1.3; }
.hero p { color: var(--farge-tekst); }
.hero__bilde { position: relative; }
.hero__bilde img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-stor); box-shadow: var(--skygge-hover); }
.hero__bilde::after { content: ""; position: absolute; inset: auto -18px -18px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--farge-hvit); opacity: 0.7; z-index: -1; }
.hero__bilde figcaption { font-size: var(--tekst-liten); color: var(--farge-tekst-dempet); margin-top: var(--rom-sm); }
@media (max-width: 900px) { .hero__rad { grid-template-columns: 1fr; } .hero { padding: var(--rom-2xl) 0; } }

/* Sidehode for undersider */
.sidehode { background: var(--farge-gul); padding: var(--rom-2xl) 0; }
.sidehode h1 { color: var(--farge-mork); }
.sidehode .ingress { margin-top: var(--rom-md); color: var(--farge-tekst); }
.brodsmuler { list-style: none; padding: 0; margin: 0 0 var(--rom-md); display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--tekst-liten); color: var(--farge-mork); }
.brodsmuler li + li::before { content: "›"; margin-right: 6px; }
.brodsmuler a { color: var(--farge-mork); }

/* --------------------------------------------------------------------------
   Kort
   -------------------------------------------------------------------------- */
.kort {
  background: var(--farge-hvit); border-radius: var(--radius-kort); padding: var(--rom-lg);
  border: 1px solid var(--farge-kant); box-shadow: none;
  transition: transform var(--overgang), box-shadow var(--overgang), border-color var(--overgang);
}
.kort--lenke { display: flex; flex-direction: column; gap: var(--rom-sm); text-decoration: none; color: inherit; height: 100%; }
.kort--lenke:hover { transform: translateY(-4px); box-shadow: var(--skygge-hover); border-color: var(--farge-gronn-lys); color: inherit; }
.kort--lenke:active { transform: scale(0.99); }
.kort h3 { color: var(--farge-gronn-mork); }
.kort p { color: var(--farge-tekst-dempet); font-size: var(--tekst-base); }
.kort__pil { margin-top: auto; padding-top: var(--rom-sm); font-weight: 700; color: var(--farge-gronn); display: inline-flex; gap: 6px; align-items: center; }
.kort--lenke:hover .kort__pil { text-decoration: underline; }
.kort--gul { background: var(--farge-gul-lys); border-color: transparent; }
.kort--gronn { background: var(--farge-gronn-mork); color: var(--farge-hvit); border-color: transparent; }
.kort--gronn h2, .kort--gronn h3, .kort--gronn p { color: var(--farge-hvit); }
.kort--gronn a:not(.knapp) { color: var(--farge-gul); }

/* På den mørke gule flaten (hero, sidehode, gule kort): ingen grønn. Mørk tekst, mørke knapper. */
.hero a:not(.knapp), .sidehode a:not(.knapp), .kort--gul a:not(.knapp) { color: var(--farge-mork); }
.hero a:not(.knapp):hover, .sidehode a:not(.knapp):hover, .kort--gul a:not(.knapp):hover { color: var(--farge-mork-hover); }
.hero .knapp--primar, .kort--gul .knapp--primar { background: var(--farge-mork); color: var(--farge-hvit); }
.hero .knapp--primar:hover, .kort--gul .knapp--primar:hover { background: var(--farge-mork-hover); }
.hero .knapp--sekundar, .kort--gul .knapp--sekundar { color: var(--farge-mork); border-color: var(--farge-mork); }
.hero .knapp--sekundar:hover, .kort--gul .knapp--sekundar:hover { background: rgba(31, 42, 36, 0.07); color: var(--farge-mork); }
.kort--gul .overlinje, .kort--gul h3, .kort--gul .arr__meta { color: var(--farge-mork); }
.kort--gul .arr__dato { background: var(--farge-mork); }
.hero :focus-visible, .sidehode :focus-visible, .kort--gul :focus-visible { outline-color: var(--farge-mork); }

/* Faktaboks */
.fakta { background: var(--farge-hvit); border-left: 5px solid var(--farge-gronn-lys); border-radius: var(--radius-md); padding: var(--rom-lg); }
.fakta dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 18px; font-size: var(--tekst-base); }
@media (max-width: 480px) { .fakta dl { grid-template-columns: 1fr; gap: 2px; } .fakta dd + dt { margin-top: 10px; } }
.fakta dt { font-weight: 700; }

/* Merknad: "må bekreftes" */
.ma-bekreftes {
  display: inline-block; background: var(--farge-varsel-bg); color: var(--farge-varsel-tekst); border: 1px dashed var(--farge-varsel-kant);
  border-radius: var(--radius-sm); padding: 2px 8px; font-size: var(--tekst-liten); font-weight: 700; font-family: var(--font-brodtekst); vertical-align: middle;
}
.merknad { background: var(--farge-varsel-bg); border: 1px dashed var(--farge-varsel-kant); color: var(--farge-varsel-tekst); border-radius: var(--radius-md); padding: var(--rom-md) var(--rom-lg); font-size: var(--tekst-base); }
.merknad strong { display: block; margin-bottom: 4px; }

/* Arrangement-kort */
.arr { display: grid; grid-template-columns: 96px 1fr; gap: var(--rom-lg); align-items: start; }
.arr__dato { background: var(--farge-gronn-mork); color: var(--farge-hvit); border-radius: var(--radius-md); text-align: center; padding: 12px 8px; font-family: var(--font-overskrift); line-height: 1; }
.arr__dato strong { display: block; font-size: 2rem; font-weight: 600; }
.arr__dato span { display: block; font-family: var(--font-brodtekst); font-size: var(--tekst-liten); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.arr__meta { color: var(--farge-tekst-dempet); font-size: var(--tekst-base); margin-top: 4px; }
@media (max-width: 560px) { .arr { grid-template-columns: 1fr; } .arr__dato { width: 96px; } }

/* Program-liste */
.program { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--farge-kant); }
.program li { display: grid; grid-template-columns: 120px 1fr; gap: var(--rom-md); padding: 10px 0; border-bottom: 1px solid var(--farge-kant); margin: 0; max-width: none; font-size: var(--tekst-base); }
.program time { font-weight: 700; color: var(--farge-gronn-mork); white-space: nowrap; }
.program li span { max-width: 70ch; }
@media (max-width: 480px) { .program li { grid-template-columns: 1fr; gap: 2px; } }

/* Utvid/skjul (tidligere arrangementer) */
details.utvid { background: var(--farge-hvit); border: 1px solid var(--farge-kant); border-radius: var(--radius-kort); padding: 0; }
details.utvid + details.utvid { margin-top: var(--rom-md); }
details.utvid summary { cursor: pointer; padding: var(--rom-md) var(--rom-lg); font-weight: 700; font-family: var(--font-overskrift); font-size: var(--tekst-h3); color: var(--farge-gronn-mork); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--rom-md); border-radius: var(--radius-kort); }
details.utvid summary::-webkit-details-marker { display: none; }
details.utvid summary::after { content: "+"; font-family: var(--font-brodtekst); font-size: 1.6rem; line-height: 1; color: var(--farge-gronn); flex-shrink: 0; }
details.utvid[open] summary::after { content: "–"; }
details.utvid summary:hover { background: var(--farge-gul-lys); }
details.utvid summary small { display: block; font-family: var(--font-brodtekst); font-weight: 500; font-size: var(--tekst-base); color: var(--farge-tekst-dempet); }
details.utvid .utvid__innhold { padding: 0 var(--rom-lg) var(--rom-lg); }
details.utvid .utvid__innhold > * + * { margin-top: var(--rom-md); }

/* Styret */
.styre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--rom-lg); }
@media (max-width: 640px) { .styre { grid-template-columns: 1fr 1fr; gap: var(--rom-md); } .styre__kort { padding: var(--rom-md); } .styre__kort img { width: 110px; height: 110px; } }
.styre__kort { text-align: center; }
.styre__kort img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 0 auto var(--rom-md); border: 4px solid var(--farge-gul-lys); }
.styre__kort h3 { font-size: 1.15rem; }
.styre__kort p { font-size: var(--tekst-base); color: var(--farge-tekst-dempet); margin: 4px auto 0; }
.styre__rolle { display: inline-block; background: var(--farge-gul); color: var(--farge-mork); border-radius: var(--radius-pill); padding: 3px 12px; font-size: var(--tekst-liten); font-weight: 700; margin-bottom: 6px; }

/* Deltakere */
.deltaker { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rom-sm); text-decoration: none; color: inherit; }
.deltaker__logo { width: 100%; height: 110px; display: grid; place-items: center; background: var(--farge-hvit); border-radius: var(--radius-md); padding: 10px; }
.deltaker__logo img { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; }
.deltaker h3 { font-size: 1.05rem; font-family: var(--font-brodtekst); font-weight: 700; color: var(--farge-tekst); }
.deltaker__lenke { font-size: var(--tekst-liten); color: var(--farge-gronn-mork); word-break: break-word; }
.deltaker:hover h3 { color: var(--farge-gronn-mork); }

/* Logorutenett (stillestående) */
.logorute { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--rom-md); }
.logorute a { display: grid; place-items: center; height: 92px; padding: 12px; background: var(--farge-bakgrunn); border: 1px solid var(--farge-kant); border-radius: var(--radius-md); transition: border-color var(--overgang-rask), background-color var(--overgang-rask); }
.logorute a:hover { border-color: var(--farge-gronn-lys); background: var(--farge-hvit); }
.logorute img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }

/* Pyramide */
.pyramide { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: var(--rom-2xl); align-items: center; }
.pyramide svg { width: 100%; height: auto; }
.pyramide ol { list-style: none; padding: 0; counter-reset: niva -1; }
.pyramide ol li { display: grid; grid-template-columns: 56px 1fr; gap: var(--rom-md); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--farge-kant); max-width: none; }
.pyramide ol li::before { counter-increment: niva; content: counter(niva); font-family: var(--font-overskrift); font-size: 1.6rem; font-weight: 600; color: var(--farge-hvit); background: var(--farge-gronn); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.pyramide ol li strong { display: block; }
.pyramide ol li p { font-size: var(--tekst-base); color: var(--farge-tekst-dempet); }
@media (max-width: 800px) { .pyramide { grid-template-columns: 1fr; } }

/* Dokumentliste */
.dokumenter { list-style: none; padding: 0; margin: 0; }
.dokumenter li { display: grid; grid-template-columns: 1fr auto; gap: var(--rom-md); align-items: center; padding: var(--rom-md) var(--rom-lg); background: var(--farge-hvit); border: 1px solid var(--farge-kant); border-radius: var(--radius-md); max-width: none; }
.dokumenter li + li { margin-top: var(--rom-sm); }
.dokumenter .dok__type { font-size: var(--tekst-liten); color: var(--farge-tekst-dempet); display: block; }
.dokumenter .dok__handlinger { display: flex; gap: var(--rom-sm); flex-wrap: wrap; }
@media (max-width: 560px) { .dokumenter li { grid-template-columns: 1fr; } }

/* Vedtekter */
.paragraf { scroll-margin-top: 100px; }
.paragraf h2 { font-size: 1.4rem; }
.paragraf h2 span { color: var(--farge-gronn); margin-right: 8px; }
.innholdsliste { background: var(--farge-hvit); border: 1px solid var(--farge-kant); border-radius: var(--radius-kort); padding: var(--rom-lg); columns: 2; column-gap: var(--rom-xl); font-size: var(--tekst-base); }
.innholdsliste ol { padding-left: 1.4em; }
.innholdsliste li { break-inside: avoid; }
@media (max-width: 640px) { .innholdsliste { columns: 1; } }

/* Figurer */
figure { margin: 0; }
figure img { border-radius: var(--radius-kort); }
figcaption { font-size: var(--tekst-liten); color: var(--farge-tekst-dempet); margin-top: var(--rom-sm); }
.bildegalleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--rom-md); }
.bildegalleri img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--farge-kant); }
.to-kolonner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rom-2xl); align-items: start; }
@media (max-width: 800px) { .to-kolonner { grid-template-columns: 1fr; } }
.bilde-tekst { display: grid; grid-template-columns: 200px 1fr; gap: var(--rom-lg); align-items: center; }
@media (max-width: 560px) { .bilde-tekst { grid-template-columns: 1fr; } }

/* CTA-bånd */
.baand { background: var(--farge-gronn-mork); color: var(--farge-hvit); border-radius: var(--radius-stor); padding: var(--rom-2xl); display: grid; grid-template-columns: 1fr auto; gap: var(--rom-lg); align-items: center; }
.baand h2, .baand p { color: var(--farge-hvit); }
.baand p { color: rgba(255,255,255,0.85); }
@media (max-width: 800px) { .baand { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Bunntekst
   -------------------------------------------------------------------------- */
.bunn { background: var(--farge-gronn-mork); color: var(--farge-hvit); padding: var(--rom-3xl) 0 var(--rom-lg); margin-top: var(--rom-seksjon); font-size: var(--tekst-base); }
.bunn a { color: var(--farge-hvit); }
.bunn a:hover { color: var(--farge-gul); }
.bunn h2 { font-size: 1.05rem; font-family: var(--font-brodtekst); font-weight: 700; color: var(--farge-gul); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--rom-md); }
.bunn ul { list-style: none; padding: 0; }
.bunn li + li { margin-top: 6px; }
.bunn__rad { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--rom-xl); }
.bunn__logo { display: flex; align-items: center; gap: 12px; margin-bottom: var(--rom-md); }
.bunn__logo img { height: 64px; width: auto; border-radius: 50%; background: var(--farge-hvit); }
.bunn__logo span { font-family: var(--font-overskrift); font-size: 1.15rem; }
.bunn p { color: rgba(255,255,255,0.85); }
.bunn__linje { border-top: 1px solid rgba(255,255,255,0.18); margin-top: var(--rom-2xl); padding-top: var(--rom-lg); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rom-md); font-size: var(--tekst-liten); color: rgba(255,255,255,0.75); }
.bunn .ma-bekreftes { background: rgba(255,255,255,0.12); color: var(--farge-gul); border-color: var(--farge-gul); }
@media (max-width: 900px) { .bunn__rad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bunn__rad { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Bevegelse – progressivt: innhold er synlig som standard.
   JS legger på .js på <html>; først da skjules elementer før de vises.
   -------------------------------------------------------------------------- */
.js [data-animer] { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.js [data-animer].er-synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-animer] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kort--lenke:hover { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (max-width: 640px) {
  :root { --rom-seksjon: 56px; --tekst-brod: 1.0625rem; }
  .rutenett--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rom-md); }
  .deltaker h3, .deltaker__lenke { overflow-wrap: anywhere; }
  .deltaker { padding: var(--rom-md); }
  .deltaker__logo { height: 84px; }
  .deltaker__logo img { max-height: 66px; }
  .deltaker h3 { font-size: 0.95rem; }
  .beholder { padding: 0 var(--rom-md); }
  .knapperad .knapp { width: 100%; }
}

@media print {
  .topp, .bunn, .skip-link, .sok { display: none !important; }
  body { background: #fff; }
}