/* Kongsvinger Treningssenter, utkast. Oppsett fra skulptfitness.nl (målt 26.10.2026 ved 1440 px), hero 2 fra phive.pt. */

/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   Tanker: ITF Free Font License. Balboa: DEMO-ONLY, ikke lisensiert for levering. Se assets/fonts/lisenser/
   ---------------------------------------------------------- */
@font-face{font-family:'Tanker';src:url('../assets/fonts/tanker-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Balboa';src:url('../assets/fonts/balboa-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../assets/fonts/clash-display-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/general-sans-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/general-sans-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

/* ---------- Tokens ----------
   To flatesett: --m-* (mørk, som gymmet og logoen) og --l-* (lys). Seksjonene velger sett, paletten bytter verdiene.
   Palett 1: kundens petrol #037E97 som eneste aksent, hvit tekst på aksent 4,7:1. */
:root{
  --m-bg:#111315; --m-flate:#1B1E21; --m-fg:#EEF0EE; --m-muted:#A9B0B3; --m-line:rgba(238,240,238,.16); --m-aksent-tekst:#52C3D7; --m-stjerne:#F2B84B; --m-fokus:#7FD6E5;
  --l-bg:#ECEEEB; --l-flate:#F7F8F6; --l-fg:#141618; --l-muted:#50575B; --l-line:rgba(20,22,24,.16); --l-aksent-tekst:#036A80; --l-stjerne:#9A6A00; --l-fokus:#036A80;
  --aksent:#037E97; --aksent-hover:#026A7F; --aksent-blekk:#FFFFFF;

  --f-display:'Tanker','Arial Narrow',sans-serif; --f-display-w:400; --f-display-lh:1; --f-display-tt:uppercase; --f-display-ls:0;
  --f-tekst:'General Sans',system-ui,sans-serif;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:72px; --s-7:120px;
  --kant:clamp(20px,3.4vw,48px); --maks:1360px; --tekstbredde:46rem;
  --r-pille:100px; --r-kort:6px;
  --topp-h:84px;
  --ease:cubic-bezier(.23,1,.32,1);
  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}
/* Palett 2: lys hovedflate som skulptfitness.nl (settene bytter plass) */
[data-pal="2"]{
  --m-bg:#EEF0ED; --m-flate:#E3E6E2; --m-fg:#141618; --m-muted:#50575B; --m-line:rgba(20,22,24,.16); --m-aksent-tekst:#036A80; --m-stjerne:#9A6A00; --m-fokus:#036A80;
  --l-bg:#16191B; --l-flate:#202427; --l-fg:#EEF0EE; --l-muted:#A9B0B3; --l-line:rgba(238,240,238,.16); --l-aksent-tekst:#52C3D7; --l-stjerne:#F2B84B; --l-fokus:#7FD6E5;
}
/* Palett 3: dyp petrol med korall fra skoene i reklamefilmen */
[data-pal="3"]{
  --m-bg:#0C2026; --m-flate:#123039; --m-fg:#F2EEEA; --m-muted:#AFBDC0; --m-line:rgba(242,238,234,.16); --m-aksent-tekst:#FF8A6B; --m-stjerne:#FFC56B; --m-fokus:#FF8A6B;
  --l-bg:#F3EEE9; --l-flate:#FBF8F5; --l-fg:#1A1918; --l-muted:#5C5650; --l-line:rgba(26,25,24,.16); --l-aksent-tekst:#A93E26; --l-stjerne:#9A5A00; --l-fokus:#A93E26;
  --aksent:#FF7A59; --aksent-hover:#FF9273; --aksent-blekk:#111315;
}
[data-font="2"]{--f-display:'Balboa','Arial Narrow',sans-serif; --f-display-lh:.98}
[data-font="3"]{--f-display:'Clash Display',system-ui,sans-serif; --f-display-w:600; --f-display-lh:.98; --f-display-ls:-.02em}
/* Clash Display er bred: tittelen skaleres ned så den holder seg i sin kolonne */
[data-font="3"] .hero__tittel{font-size:clamp(2.6rem,7.2vw,7rem)}
[data-font="3"] .hero--film .hero__tittel{font-size:clamp(2.8rem,7.6vw,7.6rem)}
[data-font="3"] h2{font-size:clamp(2rem,4vw,3.6rem)}

/* Flatesett per seksjon */
.topp,.hero,.tilbud,.gruppe,.omtaler,.kontakt,.bunn,.dokk,.fakta{--bg:var(--m-bg);--flate:var(--m-flate);--fg:var(--m-fg);--muted:var(--m-muted);--line:var(--m-line);--aksent-tekst:var(--m-aksent-tekst);--stjerne:var(--m-stjerne);--c-fokus:var(--m-fokus)}
.medlem,.ekstra,.sporsmal{--bg:var(--l-bg);--flate:var(--l-flate);--fg:var(--l-fg);--muted:var(--l-muted);--line:var(--l-line);--aksent-tekst:var(--l-aksent-tekst);--stjerne:var(--l-stjerne);--c-fokus:var(--l-fokus)}
.gruppe{--bg:var(--m-flate)}

/* ---------- Grunnlag ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--topp-h)}
body{margin:0;background:var(--m-bg);color:var(--m-fg);font:400 1.0625rem/1.55 var(--f-tekst);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,dl,figure,blockquote,fieldset{margin:0;padding:0}
ul{list-style:none}
fieldset{border:0;min-width:0}
section,footer,header{background:var(--bg);color:var(--fg)}
h2{font:var(--f-display-w) clamp(2.6rem,5.4vw,4.75rem)/calc(var(--f-display-lh) + .06) var(--f-display);text-transform:var(--f-display-tt);letter-spacing:var(--f-display-ls)}
h3{font:600 1.25rem/1.25 var(--f-tekst)}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.vis-skjermleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hopp{position:absolute;left:var(--kant);top:-60px;z-index:var(--z-varsel);background:var(--aksent);color:var(--aksent-blekk);padding:12px 16px;border-radius:var(--r-kort)}
.hopp:focus{top:12px}
.ikon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ikon--stor{width:40px;height:40px}

/* Knapper: pille i versal, som skulptfitness.nl */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:var(--r-pille);font:700 .875rem/1 var(--f-tekst);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.knapp:active{transform:scale(.97)}
.knapp--aksent{background:var(--aksent);color:var(--aksent-blekk)}
.knapp--aksent:hover{background:var(--aksent-hover)}
.knapp--strek{border-color:var(--fg);color:var(--fg);background:transparent}
.knapp--strek:hover{background:var(--fg);color:var(--bg)}
.knapp--full{width:100%}
.lenke{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--aksent-tekst);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- Topp ---------- */
.topp{position:sticky;top:0;z-index:var(--z-sticky);height:var(--topp-h);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--kant);border-bottom:1px solid var(--line)}
.topp__logo{display:flex;min-height:44px;align-items:center}
.topp__logo img{width:auto;height:46px}
.logo-mork{display:none}
[data-pal="2"] .logo-lys{display:none}
[data-pal="2"] .logo-mork{display:block}
.topp__nav{display:flex;gap:var(--s-4);margin-left:auto}
.topp__nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none;color:var(--fg)}
.topp__nav a:hover{color:var(--aksent-tekst)}
.topp__cta{min-height:46px}

/* ---------- Hero, felles ---------- */
.hero{display:none;position:relative}
[data-hero="1"] .hero--delt[data-hero="1"]{display:block}
[data-hero="2"] .hero--film[data-hero="2"]{display:flex}
.hero__tittel{display:flex;flex-direction:column;font:var(--f-display-w) clamp(3.6rem,13vw,12rem)/var(--f-display-lh) var(--f-display);text-transform:var(--f-display-tt);letter-spacing:var(--f-display-ls)}
/* Maske fra website-intelligence Phase 5, flex hindrer margin-kollaps (LAERDOMMER 16.10.2026) */
.hero h1 .hero__line{display:block;overflow:hidden;padding:.2em .25em .26em;margin:-.2em -.25em -.26em}
.hero h1 .hero__line-in{display:block}
.anim-hero .hero__line-in{transform:translateY(150%)}
.anim-hero .hero__sub{opacity:0}
.hero__over{font-weight:600;font-size:.9375rem;letter-spacing:.02em;color:var(--muted);margin-bottom:var(--s-3)}
.hero__ingress{font-size:1.125rem;line-height:1.5;color:var(--fg);max-width:34rem}

.vurdering{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.9375rem;font-weight:500;color:var(--fg);text-decoration:none}
.vurdering:hover span:last-child{text-decoration:underline}
.stjerner{position:relative;display:inline-block;font-size:1.05rem;letter-spacing:2px;line-height:1;color:color-mix(in srgb,var(--stjerne) 30%,transparent);white-space:nowrap}
.stjerner__fylt{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--stjerne)}
.stjerner--stor{font-size:1.6rem}

/* Skjema i heroen */
.skjema{display:grid;gap:12px;padding:var(--s-3);background:var(--flate);border:1px solid var(--line);border-radius:var(--r-kort)}
.skjema__tittel{font:600 1.125rem/1.2 var(--f-tekst)}
.skjema__rad{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.felt{display:grid;gap:6px;font-size:.875rem;font-weight:500;color:var(--muted)}
.felt input,.felt select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-kort);border:1px solid var(--line);background:var(--bg);color:var(--fg);font:400 1rem/1 var(--f-tekst)}
.felt select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.felt input[aria-invalid="true"]{border-color:#E5484D}
.skjema__feil{color:var(--fg);font-size:.9375rem;padding:10px 12px;border-radius:var(--r-kort);background:color-mix(in srgb,#E5484D 22%,transparent)}
.skjema__takk p:first-child{font:600 1.375rem/1.2 var(--f-tekst)}
.skjema__takk p+p{margin-top:6px;color:var(--muted)}
.skjema.er-sendt>:not(.skjema__takk):not(.skjema__tittel){display:none}

/* ---------- Hero 1: delt, typografisk ---------- */
.hero--delt .hero__rute{max-width:var(--maks);margin:0 auto;padding:clamp(28px,4vw,56px) var(--kant) var(--s-5);display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:clamp(32px,5vw,80px);align-items:end}
.hero--delt .hero__side{display:grid;gap:var(--s-2)}
.hero--delt .hero__bilde{max-width:var(--maks);margin:0 auto;padding:0 var(--kant)}
.hero--delt .hero__bilde img{width:100%;height:min(64vh,640px);object-fit:cover;border-radius:var(--r-kort)}

/* ---------- Hero 2: film i hele bakgrunnen ---------- */
.hero--film{min-height:min(calc(100svh - var(--topp-h)),860px);align-items:flex-end;overflow:hidden}
.hero__film{position:absolute;inset:0}
.hero__film video{width:100%;height:100%;object-fit:cover}
.hero__slor{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,13,.84) 0%,rgba(10,12,13,.62) 38%,rgba(10,12,13,.1) 70%),linear-gradient(0deg,rgba(10,12,13,.88) 0%,rgba(10,12,13,.4) 46%,rgba(10,12,13,0) 80%)}
[data-pal="2"] .hero__slor,[data-pal="2"] .hero--film{--fg:#EEF0EE;--muted:#C9CFD1;--flate:#16191B;--bg:#0E1011;--line:rgba(238,240,238,.16);--stjerne:#F2B84B;--aksent-tekst:#52C3D7;--c-fokus:#7FD6E5}
.hero--film .hero__rute{position:relative;width:100%;max-width:var(--maks);margin:0 auto;padding:var(--s-6) var(--kant) var(--s-5);display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-6);align-items:end}
.hero--film .hero__tekst{display:grid;gap:var(--s-2);justify-items:start;color:#EEF0EE}
.hero--film .hero__over{margin:0;color:#C9CFD1}
.hero--film .hero__tittel{font-size:clamp(3.8rem,10.4vw,10.5rem)}
.hero--film .hero__ingress{color:#EEF0EE}
.hero--film .skjema{background:rgba(17,19,21,.94)}
[data-pal="3"] .hero--film .skjema{background:rgba(12,32,38,.94)}

/* ---------- Fakta: aksentbåndet fra skulptfitness.nl, uten bevegelse ---------- */
.fakta{background:var(--flate);border-block:1px solid var(--line)}
.fakta__liste{max-width:var(--maks);margin:0 auto;padding:var(--s-4) var(--kant);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.fakta__liste li{display:flex;gap:14px;align-items:flex-start}
.fakta__liste .ikon{width:28px;height:28px;color:var(--aksent-tekst);margin-top:2px}
.fakta__liste strong,.fakta__liste b{display:block;font-weight:600}
.fakta__liste span span{display:block;color:var(--muted);font-size:.9375rem}

/* ---------- Treningstilbud ---------- */
.tilbud{padding:var(--s-7) var(--kant)}
.tilbud__topp{max-width:var(--maks);margin:0 auto var(--s-5);display:grid;grid-template-columns:1fr minmax(300px,30rem);gap:var(--s-5);align-items:end}
.tilbud__topp p{color:var(--muted)}
.tilbud__kort{max-width:var(--maks);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kort{display:flex;flex-direction:column;gap:12px}
.kort img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-kort)}
.kort h3{font:var(--f-display-w) clamp(1.75rem,2.6vw,2.4rem)/1.04 var(--f-display);text-transform:var(--f-display-tt);letter-spacing:var(--f-display-ls);margin-top:8px}
.kort p{color:var(--muted);max-width:30rem}
.kort__lenke{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--aksent-tekst);text-decoration:none}
.kort__lenke:hover{text-decoration:underline}

/* ---------- Gruppetimer ---------- */
.gruppe{padding:var(--s-7) var(--kant);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:none}
.gruppe__bilde img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-kort)}
.gruppe__tekst{display:grid;gap:var(--s-3);justify-items:start;max-width:36rem}
.gruppe__tekst>p{color:var(--muted)}
.timer{width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-4);border-top:1px solid var(--line)}
.timer li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:500}
.timer small{color:var(--muted);font-size:.8125rem}

/* ---------- Medlemskap ---------- */
.medlem{padding:var(--s-7) var(--kant)}
.medlem__topp{max-width:var(--maks);margin:0 auto var(--s-5);display:grid;grid-template-columns:1fr minmax(300px,30rem);gap:var(--s-5);align-items:end}
.medlem__topp p{color:var(--muted)}
.medlem__rute{max-width:var(--maks);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-4);align-items:start}

.velger{position:relative;padding:var(--s-4);border-radius:var(--r-kort);background:var(--m-bg);color:var(--m-fg);--fg:var(--m-fg);--muted:var(--m-muted);--line:var(--m-line);--bg:var(--m-bg);--aksent-tekst:var(--m-aksent-tekst);--c-fokus:var(--m-fokus);min-height:460px;display:flex;flex-direction:column}
.velger__topp{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-bottom:12px}
.velger__topp h3{font:var(--f-display-w) 1.9rem/1.04 var(--f-display);text-transform:var(--f-display-tt);letter-spacing:var(--f-display-ls)}
.velger__steg{color:var(--muted);font-size:.875rem;white-space:nowrap}
.velger__bar{height:3px;background:var(--line);border-radius:3px;margin-bottom:var(--s-4)}
.velger__bar span{display:block;height:100%;width:100%;transform:scaleX(.25);transform-origin:left;background:var(--aksent);border-radius:3px;transition:transform .25s var(--ease)}
.velger legend{font:600 1.375rem/1.25 var(--f-tekst);margin-bottom:var(--s-2);padding:0}
.velger fieldset{display:grid;gap:10px}
.valg{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-kort);cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.valg:hover{border-color:var(--fg)}
.valg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.valg__b{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line);font-weight:600;font-size:.8125rem}
.valg:has(input:checked){border-color:var(--aksent);background:color-mix(in srgb,var(--aksent) 16%,transparent)}
.valg:has(input:checked) .valg__b{background:var(--aksent);border-color:var(--aksent);color:var(--aksent-blekk)}
.valg:has(input:focus-visible){outline:2px solid var(--c-fokus);outline-offset:3px}
.velger__tilbake{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;margin-top:var(--s-3);background:none;border:0;color:var(--muted);font:500 .9375rem/1 var(--f-tekst);cursor:pointer}
.velger__tilbake .ikon{transform:scaleX(-1)}
.velger__svar{display:grid;gap:10px;outline:none}
.velger__merke{color:var(--aksent-tekst);font-weight:600;font-size:.9375rem}
.velger__navn{font:var(--f-display-w) clamp(2.2rem,3.4vw,3rem)/1.02 var(--f-display);text-transform:var(--f-display-tt);letter-spacing:var(--f-display-ls)}
.velger__pris{font-size:1.25rem;font-weight:600}
.velger__forklaring,.velger__ekstra{color:var(--muted)}
.velger__knapper{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-2)}

.priser{display:grid;gap:var(--s-3)}
.priser__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pris{display:flex;flex-direction:column;gap:6px;padding:var(--s-3);background:var(--flate);border:1px solid var(--line);border-radius:var(--r-kort)}
.pris h3{font-size:1.125rem}
.pris__vilkar{color:var(--muted);font-size:.9375rem}
.pris__belop{font:var(--f-display-w) 2.75rem/1 var(--f-display);letter-spacing:var(--f-display-ls);margin:12px 0 4px}
.pris__belop small{font:500 .9375rem/1 var(--f-tekst);color:var(--muted);margin-left:2px}
.pris__lenke{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--aksent-tekst);font-weight:600;text-decoration:none}
.pris__lenke:hover{text-decoration:underline}
.pris:first-child{background:var(--m-bg);color:var(--m-fg);--muted:var(--m-muted);--aksent-tekst:var(--m-aksent-tekst);border-color:transparent}
.pt{padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-kort);display:grid;grid-template-columns:auto 1fr;gap:12px var(--s-4);align-items:center}
.pt h3{grid-column:1/-1}
.pt__priser{display:grid;grid-template-columns:repeat(4,auto);gap:var(--s-3)}
.pt__priser dt{color:var(--muted);font-size:.875rem}
.pt__priser dd{margin:0;font-weight:600;font-size:1.125rem}
.pt p{color:var(--muted);font-size:.9375rem}
.pt a{color:var(--aksent-tekst);font-weight:600;display:inline-block;padding:12px 0}

/* ---------- Omtaler ---------- */
.omtaler{padding:var(--s-7) var(--kant)}
.omtaler__topp{max-width:var(--maks);margin:0 auto var(--s-5);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s-3)}
.omtaler__snitt{display:flex;align-items:center;gap:14px;color:var(--muted)}
.omtaler__snitt strong,.omtaler__snitt b{color:var(--fg)}
.omtaler__liste{max-width:var(--maks);margin:0 auto var(--s-4);display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:12px}
.omtale{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);background:var(--flate);border-radius:var(--r-kort)}
.omtale blockquote{margin:0;font-size:1.25rem;line-height:1.45}
.omtale figcaption{margin-top:auto;color:var(--muted);font-weight:500}
.omtaler__bilde img{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:var(--r-kort)}
.omtaler>.lenke{display:flex;width:max-content;max-width:var(--maks);margin:0 auto 0 max(0px,calc((100% - var(--maks))/2))}

/* ---------- UngGym, gavekort, Rent Senter ---------- */
.ekstra{padding:var(--s-7) var(--kant);display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;max-width:none}
.ekstra>article{background:var(--flate);border:1px solid var(--line);border-radius:var(--r-kort);padding:var(--s-4);display:grid;gap:12px;align-content:start;justify-items:start}
.ekstra h2{font-size:clamp(1.75rem,2.6vw,2.4rem)}
.ekstra p{color:var(--muted)}
.ekstra__ung{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-4)!important;align-items:center}
.ekstra__ung img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-kort)}
.ekstra__ung>div{display:grid;gap:var(--s-2);justify-items:start}
.ekstra__gave .ikon{color:var(--aksent-tekst)}
.ekstra__rent img{height:48px;width:auto;background:#fff;padding:6px 10px;border-radius:4px}

/* ---------- Spørsmål ---------- */
.sporsmal{padding:0 var(--kant) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-5);align-items:start}
.sporsmal__liste{border-top:1px solid var(--line)}
.sporsmal details{border-bottom:1px solid var(--line)}
.sporsmal summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);min-height:64px;cursor:pointer;font-weight:600;font-size:1.125rem;list-style:none}
.sporsmal summary::-webkit-details-marker{display:none}
.sporsmal summary::after{content:'+';font-size:1.5rem;font-weight:400;color:var(--aksent-tekst);transition:transform .2s var(--ease)}
.sporsmal details[open] summary::after{transform:rotate(45deg)}
.sporsmal details p{padding:0 0 var(--s-3);color:var(--muted);max-width:var(--tekstbredde)}

/* ---------- Kontakt og kart ---------- */
.kontakt{padding:var(--s-7) var(--kant);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s-5);align-items:start}
.kontakt__tekst{display:grid;gap:var(--s-3)}
.kontakt__liste{display:grid;gap:4px}
.kontakt__liste li{display:flex;gap:12px;align-items:center;min-height:44px}
.kontakt__liste .ikon{color:var(--aksent-tekst)}
.kontakt__liste a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid var(--line)}
.kontakt__tid{color:var(--muted);font-size:.9375rem}
.kontakt__sosial{display:flex;gap:8px}
.kontakt__sosial a{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%}
.kontakt__sosial a:hover{border-color:var(--fg)}
.kart{position:relative;margin:0}
.kart__bilde{width:100%;aspect-ratio:1440/640;object-fit:cover;border-radius:var(--r-kort)}
.kart__nal{position:absolute;left:49%;top:calc(50% - 18px);transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--aksent);color:var(--aksent-blekk);border-radius:var(--r-pille);font-weight:600;font-size:.875rem;white-space:nowrap}
.kart figcaption{display:flex;flex-wrap:wrap;gap:4px var(--s-3);margin-top:8px;font-size:.875rem;color:var(--muted)}
.kart figcaption a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Bunn ---------- */
.bunn{padding:var(--s-5) var(--kant) calc(var(--s-5) + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.bunn img{height:40px;width:auto}
[data-pal="2"] .bunn img{content:url('../assets/img/logo-mork.png')}
.bunn nav{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.bunn nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted)}
.bunn nav a:hover{color:var(--fg)}
.bunn__kreditt{margin-left:auto;font-size:.875rem;color:var(--muted)}
.bunn__kreditt a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}

/* ---------- Dokk (bare mobil) ---------- */
.dokk{display:none}

/* ---------- Design Lab ---------- */
.lab{position:fixed;left:16px;bottom:16px;z-index:var(--z-panel);font-family:var(--f-tekst);display:flex;flex-direction:column-reverse;align-items:flex-start;color:#141618}
.lab__veksle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:100px;border:.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(30px) saturate(210%);backdrop-filter:blur(30px) saturate(210%);color:#141618;font:600 .9375rem/1 var(--f-tekst);cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1.5px .5px rgba(255,255,255,.65);transition:transform .16s var(--ease)}
.lab__panel{margin-bottom:10px;padding:14px;border-radius:24px;border:.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(30px) saturate(210%);backdrop-filter:blur(30px) saturate(210%);box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1.5px .5px rgba(255,255,255,.65)}
.lab__gruppe{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lab__merke{width:28px;text-align:center}
.lab__gruppe button{width:44px;height:44px;border-radius:100px;border:1px solid rgba(20,22,24,.16);background:rgba(255,255,255,.5);color:#141618;font:600 1rem/1 var(--f-tekst);cursor:pointer;transition:transform .16s var(--ease),background-color .15s var(--ease)}
.lab__gruppe button[aria-pressed="true"]{background:#141618;color:#fff}
.lab__gruppe button:active,.lab__veksle:active{transform:scale(.96)}
.lab :focus-visible{outline-color:#036A80}
.design-lab__credit{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.75rem;color:#4A5054}
.design-lab__credit-logo{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:#141618;text-decoration:none}
.design-lab__credit-dot{color:#036A80}
.design-lab__credit-spark{width:12px;height:12px;color:#036A80}

/* ---------- Nettbrett ---------- */
@media (max-width:1100px){
  .topp__nav{gap:var(--s-3)}
  .hero--delt .hero__rute{grid-template-columns:1fr}
  .hero--delt .hero__side{max-width:560px}
  .hero--film .hero__rute{grid-template-columns:1fr;gap:var(--s-4)}
  .hero--film .skjema{max-width:480px}
  .fakta__liste{grid-template-columns:1fr 1fr}
  .medlem__rute{grid-template-columns:1fr}
  .ekstra{grid-template-columns:1fr 1fr}
  .ekstra__ung{grid-column:1/-1}
  .omtaler__liste{grid-template-columns:1fr 1fr}
  .omtaler__bilde{display:none}
}

/* ---------- Mobil: ruter i stedet for å ramse opp (regel 2) ---------- */
@media (max-width:760px){
  :root{--topp-h:64px;--s-7:48px}
  body{font-size:1rem}
  .topp{gap:var(--s-2)}
  .topp__logo img{height:36px}
  .topp__nav,.topp__cta{display:none}
  h2{font-size:clamp(2.2rem,11vw,3rem)}

  .hero--delt .hero__rute{padding:var(--s-3) var(--kant) var(--s-3);gap:var(--s-3)}
  .hero__tittel{font-size:clamp(3rem,15vw,4.6rem)}
  .hero__over{margin-bottom:12px;font-size:.875rem}
  .hero__ingress{font-size:1rem}
  .hero--delt .hero__side{gap:12px}
  .skjema{padding:var(--s-2)}
  .hero--delt .hero__bilde img{height:auto;aspect-ratio:16/9}

  .hero--film{min-height:0}
  [data-hero="2"] .hero--film[data-hero="2"]{display:block}
  .hero--film .hero__film{position:absolute;inset:0 0 auto;height:min(50svh,420px)}
  .hero--film .hero__slor{background:linear-gradient(180deg,rgba(10,12,13,0) 0,rgba(10,12,13,.5) min(28svh,240px),#111315 min(50svh,420px),#111315 100%)}
  [data-pal="3"] .hero--film .hero__slor{background:linear-gradient(180deg,rgba(12,32,38,0) 0,rgba(12,32,38,.35) min(28svh,240px),#0C2026 min(50svh,420px),#0C2026 100%)}
  .hero--film .hero__rute{padding:min(36svh,300px) var(--kant) var(--s-3);gap:var(--s-3)}
  .hero--film .hero__tittel{font-size:clamp(3.2rem,16vw,4.8rem)}
  [data-font="3"] .hero__tittel,[data-font="3"] .hero--film .hero__tittel{font-size:clamp(2.4rem,11vw,3.4rem)}
  [data-font="3"] h2{font-size:2rem}

  .fakta__liste{grid-template-columns:1fr 1fr;padding:var(--s-3) var(--kant);gap:var(--s-2) 12px}
  .fakta__liste li{gap:10px;font-size:.875rem;line-height:1.35}
  .fakta__liste .ikon{width:22px;height:22px}
  .fakta__liste span span{font-size:.8125rem}

  .tilbud__topp,.medlem__topp{grid-template-columns:1fr;gap:12px;margin-bottom:var(--s-3)}
  .tilbud__kort,.priser__liste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(-1*var(--kant));padding-inline:var(--kant);scrollbar-width:none;scroll-padding-inline:var(--kant)}
  .tilbud__kort::-webkit-scrollbar,.priser__liste::-webkit-scrollbar{display:none}
  .kort{flex:0 0 78%;scroll-snap-align:start}
  .kort img{aspect-ratio:4/3}
  .kort p{font-size:.9375rem}

  .gruppe{grid-template-columns:1fr;gap:var(--s-3)}
  .gruppe__bilde{display:none}
  .timer{display:flex;flex-wrap:wrap;gap:8px;border:0}
  .timer li{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pille);font-size:.875rem}
  .timer small{display:none}

  .velger{padding:var(--s-3);min-height:0}
  .velger__topp h3{font-size:1.6rem}
  .velger legend{font-size:1.2rem}
  .pris{flex:0 0 62%;scroll-snap-align:start;padding:var(--s-2)}
  .pris__belop{font-size:2.2rem}
  .pt{grid-template-columns:1fr;padding:var(--s-2);gap:8px}
  .pt p{font-size:.875rem}
  .pt__priser{grid-template-columns:repeat(2,auto);gap:8px var(--s-3)}

  .omtaler__topp{margin-bottom:var(--s-3)}
  .omtaler__liste{grid-template-columns:1fr;gap:10px;margin-bottom:var(--s-2)}
  .omtale{padding:var(--s-3)}
  .omtale blockquote{font-size:1.0625rem}

  .ekstra{grid-template-columns:1fr 1fr;gap:10px}
  .ekstra>article{padding:var(--s-2)}
  .ekstra__ung{grid-template-columns:96px 1fr;gap:var(--s-2)!important}
  .ekstra__ung p{font-size:.9375rem}
  .ekstra h2{font-size:1.5rem}
  .ekstra__gave p,.ekstra__rent p{font-size:.875rem}
  .ekstra__rent img{height:36px}
  .ekstra .ikon--stor{width:28px;height:28px}

  .sporsmal{grid-template-columns:1fr;gap:var(--s-3)}
  .sporsmal summary{font-size:1rem;min-height:56px}

  .kontakt{grid-template-columns:1fr;gap:var(--s-3)}
  .kart__bilde{aspect-ratio:16/10}

  .bunn{padding-bottom:calc(96px + env(safe-area-inset-bottom));gap:var(--s-2)}
  .bunn nav{display:none}
  .bunn__kreditt{margin-left:0}

  .dokk{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dokk);display:flex;transition:transform .3s var(--ease);gap:10px;padding:10px var(--kant) calc(10px + env(safe-area-inset-bottom));background:var(--m-bg);border-top:1px solid var(--line)}
  .dokk.er-skjult{transform:translateY(110%)}
  .dokk__ring{display:grid;place-items:center;width:52px;height:52px;flex:none;border:1px solid var(--line);border-radius:50%;color:var(--fg)}
  .dokk__cta{flex:1}

  .lab{left:auto;right:12px;bottom:auto;top:10px;flex-direction:column;align-items:flex-end}
  .lab__veksle-tekst{display:none}
  .lab__veksle{padding:0 14px}
  .lab__panel{margin:10px 0 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}