/* =========================================================
   Easy Eiendom, Genesis-retningen. GRUNNEN.
   Alt som er felles for alle sider: reset, typografi, kortet,
   rutenettet, strekene, toppmenyen, knappene, plassholderen,
   bunnteksten, video-overlegget. Sidene lenker tokens.css og denne,
   og har bare sine egne kort i sin <style>.

   Flyttet ut av de fem sidene 2026-09-10 som ren flytting, verifisert
   piksel for piksel. Regelen fra DESIGN.md: en regel som to sider
   trenger, bor her. En regel bare én side trenger, bor i siden.
   ========================================================= */

/* RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--side-bg) url(gradnett.svg) no-repeat fixed 74% 34%/max(1500px,125vmax) auto;color:var(--blekk);scroll-behavior:smooth;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;font-family:var(--sans)}
img,video,svg{display:block;max-width:100%}
a{color:currentColor;text-decoration:none;position:relative}
button{font:inherit;color:inherit}
h1,h2,h3,p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul{list-style:none;padding:0}

/* HOPP TIL INNHOLDET. Tastaturets snarvei forbi toppmenyen: usynlig til den
   får fokus, da legger den seg øverst til venstre, foran menyen men bak
   overleggene. Lagt til 2026-09-18. */
.hopp-til{position:fixed;top:8px;left:8px;z-index:21;transform:translateY(-200%);background:var(--knapp-moerk);color:var(--hvit);font-size:14px;letter-spacing:-.026rem;line-height:112%;padding:12px 16px;border-radius:6px;transition:transform var(--t-hover)}
.hopp-til:focus{transform:translateY(0)}
main:focus{outline:none}

/* TYPOGRAFI. Ni trinn: mono 11, sans 14, 16, 18, 22, 28, 32, 44 og 52 (bare heroen). To vekter: 400 og 500.
   Sporingen følger størrelsen: 11 0, 14 -.026rem, 16 -.03, 18 -.04, 22 -.05, 28 -.08, 32 -.1, 44 -.12, 52 -.16.
   Linjehøyden er en av seks: 100 % (display og enlinjers), 102 % (titler fra 28), 108 % (titler på 22),
   112 % (små sans), 118 % (mono), 132 % (lesing). Ryddet 2026-09-12 fra 13 størrelser, 4 vekter, 14 linjehøyder. */
/* Mono-etiketten: 11 px, ett trinn opp fra Genesis sine 10 (2026-09-08, lesbarhet). */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;line-height:118%;letter-spacing:0}
.text-s{font-family:var(--sans);font-weight:400;font-size:14px;line-height:112%;letter-spacing:-.026rem}
.text-m{font-family:var(--sans);font-weight:400;font-size:16px;line-height:132%;letter-spacing:-.03rem}
.card-title{font-family:var(--sans);font-weight:400;font-size:22px;line-height:108%;letter-spacing:-.05rem}
@media(min-width:900px){.card-title{font-size:44px;line-height:102%;letter-spacing:-.12rem}}
.text-xl{font-family:var(--sans);font-weight:400;font-size:32px;line-height:102%;letter-spacing:-.1rem}
.brod{font-family:var(--sans);font-weight:400;font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--dempet)}
@media(min-width:900px){.brod{font-size:18px;letter-spacing:-.04rem}}
.verdi{font-family:var(--sans);font-weight:400;font-size:28px;line-height:100%;letter-spacing:-.08rem;font-variant-numeric:tabular-nums}
@media(min-width:900px){.verdi{font-size:32px;letter-spacing:-.1rem}}
.dempet{color:var(--dempet)}
.dempet-lys{color:var(--dempet-lys)}
.tone{color:var(--tone-tekst)}

/* SIDE, KORT, RUTENETT */
.site-padding{max-width:var(--site-maks);margin:auto;padding:0 var(--sidemarg-mobil)}
@media(min-width:900px){.site-padding{padding:0 var(--sidemarg)}}
section.blokk{padding-bottom:var(--kortavstand);position:relative}
section.blokk.er-hero{padding-top:40px}
@media(min-width:900px){section.blokk.er-hero{padding-top:60px}}
.kort{background:var(--kort);border-radius:var(--kortradius);width:100%;position:relative;overflow:hidden}
/* Synlig som standard; skjult til kortet er i bildet bare når avdekking.js har slått på animasjonen (P3-01). */
.avdekk .kort>.innhold{opacity:0}
.avdekk .kort.shown>.innhold{opacity:1}
.kort.moerk{background:var(--blekk);color:var(--lys)}
.kort.tonet{background:var(--lys)}
/* Gradnettet (2026-10-09, eieren: «ikke så sykehushvit, gjerne grid i lengde- og breddegrader»): én jordklode
   som står stille bak siden og synes gjennom de lyse kortene. Teksturen, ikke en skillelinje. */
.kort:not(.moerk):not(.tonet){background:var(--kort) url(gradnett.svg) no-repeat fixed 74% 34%/max(1500px,125vmax) auto}
/* Artikkelkort i tre flater fra paletten (2026-09-13), som Genesis sin blogg der innlegget er ett mørkt kort:
   .moerk (blekk), .tonet (lys) og .graa (knapp-graa). Innholdet setter blekk og dempet innenfor seg, så streker, titler,
   brødtekst, fotnoter og innholdslista følger med uten egne regler. På .innhold, ikke på kortet: kortets egen bakgrunn
   er var(--blekk), og en overstyring på kortet gjorde det mørke kortet lyst. Bare i .artikkel: bunnteksten er urørt. */
.artikkel .kort.moerk>.innhold{--blekk:var(--lys);--dempet:var(--lys-dempet);--tone-lenke:var(--lys-dempet)}
.artikkel .kort.tonet>.innhold{--dempet:var(--tone-tekst)}
.artikkel .kort.graa{background:var(--knapp-graa)}
.artikkel .kort.graa>.innhold{--dempet:var(--tone-tekst)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
@media(min-width:900px){.grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}}
.pad-x{padding-left:18px;padding-right:18px}
.pad-y{padding-top:18px;padding-bottom:18px}
@media(min-width:900px){.pad-x{padding-left:var(--indre);padding-right:var(--indre)}.pad-y{padding-top:var(--indre);padding-bottom:var(--indre)}}
.kol-1{grid-column:1/span 2;position:relative}
.kol-2{grid-column:3/span 2}
.kol-3{grid-column:1/span 4}
.kol-4{display:none}
@media(min-width:900px){
  .kol-1{grid-column:1/span 4}
  .kol-2{grid-column:5/span 4}
  .kol-3{grid-column:9/span 2}
  .kol-4{grid-column:11/span 2;display:flex;flex-direction:column;align-items:flex-end}
}
.hoyre{display:flex;flex-direction:column;align-items:flex-end}
.bare-desktop{display:none}
@media(min-width:900px){.bare-desktop{display:block}}
.strek{display:flex;width:14px;height:1px;background:var(--blekk);margin-bottom:10px;transform-origin:left center}
@media(min-width:900px){.strek{margin-bottom:var(--strek-marg)}}
.strek.bunn{margin-top:8px;margin-bottom:0}
@media(min-width:900px){.strek.bunn{margin-top:12px}}
.strek.lys{background:var(--lys)}
.strekrad-bunn{padding-top:0}

/* TOPPMENY */
header.topp{padding-top:60px;opacity:0;transition:opacity 1s ease-in-out}
header.topp.inn{opacity:1}
@media(min-width:900px){header.topp{padding-top:22px}}
header.topp .rad{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px;align-items:center;padding-left:18px;padding-right:18px}
@media(min-width:900px){header.topp .rad{grid-template-columns:repeat(12,1fr);column-gap:16px;padding-left:22px;padding-right:22px}}
/* Ordmerket slik landingssiden bruker det: den fylte polygonen (ikon.svg) + navnet. Merke 26, navn 22 (trinnet), menygap 44. */
/* Logoen: huset står på navnets grunnlinje, og husets flate topp på versalhøyden (Hanken Grotesk 697/1000: 22 px gir 15,3 px).
   Polygonet er 65,6 × 57,38 enheter, hvorav 32,86 fra flat topp til bunn; 31 × 27 px gir 15,5 px. viewBox er stram, så
   venstrekanten står på kolonnestart 1 (brukeren, 2026-09-17). */
.logo{grid-column:1/span 2;display:flex;align-items:baseline;gap:8px;height:32px;z-index:20;position:relative;font-weight:500}
.logo .merke{width:31px;height:27px;flex:0 0 auto;display:block}
.logo .merke polygon{fill:currentColor}
.logo .navn{font-size:22px;letter-spacing:-.05rem;line-height:100%}
/* Menyen vises fra 1200 px. Mellom 900 og 1200 brakk lenkene («Om oss», «Se deres eget prosjekt») og logonavnet
   over flere linjer i kol 5 til 10; der brukes mobilmenyen, som har alle lenkene (2026-09-19). */
nav.meny{display:none}
@media(min-width:1200px){nav.meny{grid-column:5/span 6;display:flex;justify-content:flex-end;gap:40px;white-space:nowrap}}
.kontakt{display:none}
@media(min-width:1200px){.kontakt{grid-column:11/span 2;display:flex;justify-content:flex-end}}
.logo .navn{white-space:nowrap}
.lenke{color:var(--dempet);transition:color var(--t-hover) ease-in-out}
.lenke.aktiv{color:var(--blekk)}
.lenke::before{content:"";position:absolute;top:calc(100% + 1px);left:50%;width:0;height:1px;background:var(--blekk);opacity:var(--demp-svak);transition:width var(--t-hover) ease-in-out,left var(--t-hover) ease-in-out,opacity var(--t-hover) ease-in-out}
@media(hover:hover){.lenke:hover{color:var(--blekk)}}
@media(hover:hover){.lenke:hover::before{width:100%;left:0;opacity:1}}
.burger{grid-column:4/span 1;justify-self:end;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:8px;z-index:20;position:relative}
@media(min-width:900px){.burger{grid-column:12/span 1}}
@media(min-width:1200px){.burger{display:none}}
.burger span{display:block;width:22px;height:1px;background:var(--blekk);transition:transform var(--t-hover) ease-in-out;transform-origin:50%}
.burger.aapen span:first-child{transform:rotate(19deg) translateY(3.5px)}
.burger.aapen span:last-child{transform:rotate(-19deg) translateY(-3.5px)}
.menyoverlegg{position:fixed;inset:0;height:100svh;background:var(--side-bg);z-index:19;display:none;opacity:0;transition:opacity .6s ease-out}
.menyoverlegg.vis{display:block}
.menyoverlegg.inn{opacity:1}
.menyoverlegg .innh{height:100%;display:grid;grid-template-columns:repeat(2,1fr);padding:22px 28px;padding-top:50vh;align-items:start}
.menyoverlegg .lenker{grid-column:1/span 2}
.menyoverlegg .lenker a{display:inline-block;color:var(--dempet);padding-bottom:4px;transform:translateX(-3px)}
.menyoverlegg .lenker a.aktiv{color:var(--blekk)}
.menyoverlegg .kontakt-liten{grid-column:1/span 2;align-self:end}

/* KNAPPER. 24 px høye, 8 px padding, radius 6. Hover: padding-right 8 → 30 px, pil fader inn etter 0,2 s. */
.knapp-wrap{display:inline-block}
.knapp{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:24px;padding:8px;border:0;border-radius:6px;background:none;cursor:pointer;white-space:nowrap;transition:padding-right var(--t-hover),color var(--t-hover),background-color var(--t-hover)}
.knapp::before{content:"";position:absolute;inset:-2px;border-radius:6px;opacity:0;transition:opacity var(--t-hover)}
/* Større trykkflate på berøringsskjerm (44 px høy) uten at knappen ser annerledes ut. */
@media(pointer:coarse){.knapp::after{content:"";position:absolute;inset:-10px -4px}}
.knapp:focus-visible{outline:none}
.knapp:focus-visible::before{opacity:1}
.knapp .pil{position:absolute;right:8px;opacity:0;transition:opacity .1s;width:7px;height:6px}
.knapp .pil path{fill:currentColor}
@media(hover:hover){.knapp:hover{padding-right:30px}}
@media(hover:hover){.knapp:hover .pil{opacity:1;transition:opacity var(--t-hover) .2s}}
.knapp.graa{background:var(--knapp-graa);color:var(--blekk)}
.knapp.graa::before{border:1px solid var(--knapp-graa)}
.knapp.moerk{background:var(--knapp-moerk);color:var(--hvit)}
.knapp.moerk::before{border:1px solid var(--knapp-moerk)}
.knapp.glass{background:rgba(255,255,255,.2);color:var(--hvit);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.knapp.glass::before{border:1px solid rgba(255,255,255,.2)}
.knapp.hvit{background:color-mix(in srgb,var(--hvit) 70%,transparent);color:var(--blekk);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.knapp.hvit::before{border:1px solid color-mix(in srgb,var(--hvit) 70%,transparent)}

/* PLASSHOLDER. Grå flate, stiplet ramme, mono-tekst. Byttes ut med ekte asset. */
.plassholder{position:relative;background:var(--knapp-graa);color:var(--tone-tekst);display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;border-radius:var(--medieradius);overflow:hidden}
.plassholder::before{content:"";position:absolute;inset:8px;border:1px dashed color-mix(in srgb,var(--tone-tekst) 45%,transparent);border-radius:var(--medieradius);pointer-events:none}
.plassholder .pt{font-family:var(--mono);font-size:12px;line-height:132%;max-width:var(--maal)}
.plassholder .pt b{display:block;font-weight:500;margin-bottom:4px}

/* AVSPILLING. Tekst og nakent play-merke; åpner video-overlegget. */
.spill{display:inline-flex;align-items:center;gap:12px;height:16px;padding:0;border:0;background:none;cursor:pointer;color:var(--blekk);white-space:nowrap;position:relative;font-family:var(--sans);font-size:14px;letter-spacing:-.026rem;line-height:100%}
.spill .ikon{width:9px;height:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .35s cubic-bezier(.33,1,.68,1)}
.spill .ikon svg{width:9px;height:10px}
.spill .ikon svg path{fill:currentColor}
@media(hover:hover){.spill:hover .ikon{transform:translateX(3px)}}
.spill::before{content:"";position:absolute;top:calc(100% + 2px);left:0;width:0;height:1px;background:var(--blekk);opacity:var(--demp-svak);transition:width var(--t-hover) ease-in-out,opacity var(--t-hover) ease-in-out}
.spill:focus-visible::before{width:calc(100% - 19px);opacity:1}
@media(hover:hover){.spill:hover::before{width:calc(100% - 19px);opacity:1}}
.spill:focus-visible{outline:none}

/* HERO, KORT VARIANT (produkt- og undersider). 702 px, film fyller, tekst nede til venstre, som Genesis sin careers-side.
   Bunnraden (.bunn) er sidens egen: Grunnerverv har bare streker, Om oss har fire fakta. Sløret er Om oss sitt (.5 nederst; Grunnerverv hadde .45). */
.produkthero .ramme{position:relative;height:max(560px,72vh)}
@media(min-width:900px){.produkthero .ramme{height:702px}}
.produkthero .ramme{background:var(--blekk)}
.produkthero video.medie{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* SLØRET over film. Én vannrett gradient for begge heroene; den loddrette går nedenfra (tekst nede) eller ovenfra (.ovenfra, tekst midt på). */
.sloer{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.sloer.ovenfra{background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.05) 75%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%)}
.produkthero .overlegg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none;color:var(--hvit)}
.produkthero .overlegg .strek{background:var(--lys)}
.produkthero .overlegg .dempet{color:var(--dempet-lys)}
.produkthero .overlegg .knapp{pointer-events:auto}
.produkthero .topp,.produkthero .senter{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
@media(min-width:900px){.produkthero .topp,.produkthero .senter{grid-template-columns:repeat(12,1fr);column-gap:16px}}
.produkthero .topp{flex:1}
.produkthero .c1{grid-column:1/span 3}
.produkthero .c2{grid-column:5/span 3;display:none}
.produkthero .c3{grid-column:9/span 3;display:none}
.produkthero .c4{grid-column:4/span 1;display:flex;flex-direction:column;align-items:flex-end}
@media(min-width:900px){.produkthero .c1{grid-column:1/span 4}.produkthero .c2,.produkthero .c3{display:block}.produkthero .c4{grid-column:12/span 1}}
.produkthero .senter .c1{grid-column:1/span 4;display:flex;flex-direction:column;justify-content:flex-end}
@media(min-width:900px){.produkthero .senter .c1{grid-column:1/span 5}}
.produkthero .ingress{margin-top:16px;max-width:var(--maal-bred)}
.produkthero .lenker{display:flex;gap:14px;margin-top:16px;padding-bottom:16px;flex-wrap:wrap}

/* VIDEO-FULLSKJERM. Overlegget fader 1 s. Markupen er #videooverlegg nederst på sider som har film.
   Som referansen (GENESIS-AI-ANALYSE.md §2.3, bilde 12): filmen fyller hele rammen kant til kant, strekradene og
   knappene ligger oppå den. Lagt om 2026-09-20 (brukeren): to slør i rammen, øverst og nederst, gjør at hvite
   kontroller og glassknapper leses på både lys og mørk film; framdriftslinja ligger nederst, rett over kontrollraden,
   ikke tvers over midten. Kontrollene fader ut etter 2,5 s uten musebevegelse mens filmen går (.stille), og kommer
   tilbake ved bevegelse. Filmen er <video data-video-film>; knappene data-video-pause og data-video-lyd, tidene
   data-video-tid og data-video-varighet. */
.videooverlegg{position:fixed;inset:0;z-index:100;background:var(--overlegg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity 1s;color:var(--hvit)}
.videooverlegg.vis{display:block}
.videooverlegg.inn{opacity:1}
/* Rammen holder sidens egen sidemarg til kantene og har ett svakt fall av skygge, det eneste stedet i systemet (referansen, 2026-09-14). */
.videooverlegg .ramme{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 2*var(--sidemarg-mobil));aspect-ratio:16/9;max-height:calc(100% - 2*var(--sidemarg-mobil));background:var(--blekk);border-radius:var(--kortradius);overflow:hidden;display:flex;flex-direction:column;padding:22px;box-shadow:0 22px 60px rgba(0,0,0,.35)}
@media(min-width:900px){.videooverlegg .ramme{width:calc(100% - 2*var(--sidemarg));max-height:calc(100% - 2*var(--sidemarg))}}
.videooverlegg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--blekk)}
/* Slørene: gjennomsiktig svart, ikke farge (DESIGN.md §3). Øverst under Lukk, nederst under linja og kontrollene. De fader med kontrollene. */
.videooverlegg .ramme::before,.videooverlegg .ramme::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;transition:opacity var(--t-hover)}
.videooverlegg .ramme::before{top:0;height:28%;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.videooverlegg .ramme::after{bottom:0;height:36%;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.videooverlegg .ramme .rad{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;transition:opacity var(--t-hover)}
.videooverlegg .ramme .midt{flex:1}
/* Framdriftslinja: i flyten nederst i rammen, 22 over kontrollraden, fra kant til kant av rutenettet. 2 px hvit på 25 % hvit,
   håndtak 12 × 4 px på den spilte posisjonen. Spilt del og håndtak flyttes med transform hver frame (rAF i avdekking.js).
   Trykkflaten er 26 px høy rundt linja; klikk hopper, drag søker. */
.videooverlegg .bar{position:relative;z-index:2;height:2px;margin-bottom:22px;background:rgba(255,255,255,.25);cursor:pointer;transition:opacity var(--t-hover)}
.videooverlegg .bar i{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--hvit);transform:scaleX(0);transform-origin:left center}
.videooverlegg .bar::before{content:"";position:absolute;left:0;right:0;top:-12px;height:26px}
.videooverlegg .bar b{position:absolute;top:50%;left:0;width:12px;height:4px;border-radius:2px;background:var(--hvit);transform:translate(-50%,-50%)}
/* Kontrollene er glassknapper (hvit 20 % med slør bak) og tidene ren hvit tekst; slørene i rammen gir kontrasten på lys film. */
.videooverlegg [data-video-tid],.videooverlegg [data-video-varighet]{color:var(--hvit)}
.videooverlegg .ramme.stille{cursor:none}
.videooverlegg .ramme.stille .rad,.videooverlegg .ramme.stille .bar,.videooverlegg .ramme.stille::before,.videooverlegg .ramme.stille::after{opacity:0}
.videooverlegg .strek{background:var(--lys)}
/* PEKERETIKETTEN (2026-09-20, brukeren): over en klikkflate som åpner filmen følger «Åpne i fullskjerm» pekeren, som
   referansens «Play full video»: en glassknapp (hvit 20 %, slør 7 px, radius 6, 24 høy) uten trykk, midtstilt på pekeren
   vannrett og med pekeren på 3/4 av høyden, fader .4 s. Flyttes med transform fra avdekking.js. Bare på pekerskjermer. */
.pekeretikett{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s ease-in-out;will-change:transform}
.pekeretikett.vis{opacity:1}
@media(hover:none){.pekeretikett{display:none}}


/* BUNNTEKST. Ett mørkt kort på alle sider. Fra 2026-10-08 (eieren: «for stor, dårlig strukturert, ha CTA øverst»)
   tre rader i stedet for fire, og uten faste minstehøyder:
   rad 1 (.prat) overskriften i kol 1, ingressen i kol 5, de to knappene stablet i kol 9 til 12;
   rad 2 (.lenker) logoen med org.nr og adresse i kol 1, Kontakt og LinkedIn i kol 5, Produkter og Plattformen
   i kol 9, Innsikt og Selskap høyrestilt mot 12; rad 3 © og Personvern/Vilkår. Forsiden har egne kontaktknapper
   over bunnteksten og bruker bare rad 2 og 3. Bærer id="contact0" på undersidene, så «Kom i gang» virker uten skript. */
/* Luft under kortet lik sidemargen (brukeren 2026-09-26): 14 under 900, 34 fra 900. Bunnteksten er <footer>, så section.blokk sin padding-bottom gjelder ikke. */
.bunntekst{padding-bottom:var(--sidemarg-mobil)}
@media(min-width:900px){.bunntekst{padding-bottom:var(--sidemarg)}}
.bunntekst .rad{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
@media(min-width:900px){.bunntekst .rad{grid-template-columns:repeat(12,1fr);column-gap:16px}}
.bunntekst .rad.prat+.rad.lenker{margin-top:60px}
.bunntekst .rad.nederst{margin-top:60px}
.bunntekst .kol{grid-column:span 2;min-width:0}
@media(min-width:900px){.bunntekst .kol{grid-column:span 4}}
.bunntekst .link{padding-bottom:4px}
/* P3-06 (2026-10-15): trykkflatene i bunnteksten er minst 24 px høye (WCAG 2.5.8). Linjeavstanden er den samme, lenken får høyden. */
.bunntekst .link{padding-bottom:0}
.bunntekst .link a{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
.bunntekst .link a.dod{flex-direction:column;align-items:flex-start;gap:4px}
.bunntekst .link a.dod .kommer-snart{opacity:.8}
.bunntekst .lenke-lys{transition:color var(--t-hover) ease-in-out}
.bunntekst .lenke-lys::before{content:"";position:absolute;top:calc(100% + 1px);left:50%;width:0;height:1px;background:var(--hvit);opacity:var(--demp-svak);transition:width var(--t-hover) ease-in-out,left var(--t-hover) ease-in-out,opacity var(--t-hover) ease-in-out}
.bunntekst .lenke-lys:hover{color:var(--hvit)}
.bunntekst .lenke-lys:hover::before{width:100%;left:0;opacity:1}
.bunntekst .nederst{color:var(--lys-dempet)}
.bunntekst .nederst .kol{align-content:flex-end}
/* Kartverket P0-B (2026-10-15): utleveringsforskriften § 5 tiende ledd. Merkingen om privat register står i kolonne 5 i nederste rad på alle sider. */
.bunntekst .nederst .register p{max-width:36ch;margin-bottom:8px}
/* Undernettet i nederste rad bunnjusteres også, så kol 9-streken står på linje med 1, 5 og 12 (2026-09-20). */
.bunntekst .nederst .f-kol{align-items:end}
/* Personvern og Vilkår på én linje, streken høyrestilt under. */
.bunntekst .nederst .hoyre{display:grid;grid-template-columns:auto auto;justify-content:end;column-gap:22px}
.bunntekst .nederst .hoyre .strek{grid-column:1/-1;justify-self:end}
.bunntekst .logo{color:var(--lys)}
.bunntekst .lenker .logo+.f-linje{margin-top:22px}
.bunntekst .kol .f-linje{padding-bottom:4px;color:var(--lys)}
.bunntekst .f-kol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.bunntekst .h{margin-bottom:8px;color:var(--lys-dempet)}
.bunntekst .h.senere{margin-top:22px}
/* Lenkeraden under 900: logoen og Kontakt side om side, lenkekolonnene på egen linje under. */
/* Under 900: logoen og Kontakt hver på sin linje, lenkekolonnene side om side under; nederst © til venstre og Personvern/Vilkår mot høyre kant. */
@media(max-width:899px){
  .bunntekst .lenker .kol{grid-column:1/-1}
  .bunntekst .lenker .kol+.kol{margin-top:40px}
  .bunntekst .lenker .f-kol{column-gap:14px}
  .bunntekst .nederst .kol:nth-child(2),.bunntekst .nederst .f-kol>div:first-child{display:none}
  /* Kartverket P0-B (2026-10-15): merkingen om privat register står også under 900, på egen linje over ©, uten strek. */
  .bunntekst .nederst .kol.register{display:block;grid-column:1/-1;order:-1;margin-bottom:22px}
  .bunntekst .nederst .kol.register .strek{display:none}
  .bunntekst .nederst .f-kol{grid-template-columns:1fr}
}
/* Rad 1: overskrift, ingress og de to knappene. Under 900 stables alt i én kolonne. */
.bunntekst .prat h2{color:var(--lys)}
.bunntekst .prat .intro{max-width:var(--maal-kort);color:var(--lys)}
.bunntekst .prat .kol-hel{grid-column:1/-1;display:flex;flex-direction:column}
.bunntekst .prat .knapper{display:grid;gap:12px}
.bunntekst .prat .hoyre{display:flex;justify-content:flex-end}
.bunntekst .tg-cta .hjelp{display:block;margin-top:4px;font-size:14px;line-height:112%;letter-spacing:-.026rem;opacity:.72}
@media(max-width:899px){.bunntekst .prat .kol,.bunntekst .prat .f-kol{grid-column:1/-1}.bunntekst .prat .kol+.kol,.bunntekst .prat .kol+.f-kol{margin-top:22px}.bunntekst .prat .f-kol .hoyre{display:none}}
@media(min-width:900px){.bunntekst .prat .f-kol{grid-template-columns:1fr 1fr;align-items:stretch}.bunntekst .prat .f-kol .kol-hel{grid-column:1/span 2;grid-row:1}.bunntekst .prat .f-kol .hoyre{grid-column:2;grid-row:1;align-self:start}}
/* De to brede knappene i bunnteksten (fra forsidens kontaktkort, v18; felles fra 2026-09-26). */
.tg-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:60px;padding:22px;border:1px solid var(--lys);border-radius:6px;background:none;color:var(--lys);cursor:pointer;text-align:left;font-family:var(--sans);font-weight:400;font-size:18px;line-height:112%;letter-spacing:-.04rem;transition:background-color var(--t-hover),color var(--t-hover),border-color var(--t-hover)}
.tg-cta.demo-cta{background:var(--lys);color:var(--blekk)}
.tg-cta.demo-cta:hover{background:var(--hvit);border-color:var(--hvit)}
.tg-cta.inquiry-cta:hover{background:var(--knapp-moerk)}
.tg-cta:focus-visible{outline:1px solid var(--lys);outline-offset:4px}
.tg-cta .pil{width:14px;height:12px;flex:none}
.tg-cta .pil path{fill:currentColor} /* pilen følger tekstfargen: mørk på den lyse knappen, lys på den mørke */

/* DIALOGENE. Lyst kort over et mørkt slør; strekrad øverst med etikett og Lukk. */
/* Dialogens topprad er forsidens .rad med fire celler (r1 til r4); reglene står her fordi dialogene finnes på alle sider (2026-09-26). */
.tg-dialog .rad{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
.tg-dialog .r1{grid-column:1/span 2;min-width:0;position:relative}
.tg-dialog .r2,.tg-dialog .r3{display:none}
.tg-dialog .r4{grid-column:3/span 2;display:flex;flex-direction:column;align-items:flex-end}
@media(min-width:900px){.tg-dialog .rad{grid-template-columns:repeat(12,1fr);column-gap:16px}.tg-dialog .r1{grid-column:1/span 4}.tg-dialog .r2{display:block;grid-column:5/span 4}.tg-dialog .r3{display:block;grid-column:9/span 2}.tg-dialog .r4{grid-column:11/span 2}}
.tg-dialog{width:min(960px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 28px);margin:auto;overflow-y:auto;border:0;border-radius:var(--kortradius);padding:18px;background:var(--kort);color:var(--blekk)}
@media(min-width:900px){.tg-dialog{padding:22px}}
.tg-dialog::backdrop{background:var(--overlegg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tg-dialog .rad.topp{align-items:start}
.tg-dialog .dialog-intro{margin-top:22px;max-width:var(--maal-bred)}
.tg-dialog h2{margin-top:40px;max-width:var(--maal-kort)}
.tg-dialog .tg-lenke{text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;text-decoration-color:var(--tone-lenke);transition:text-decoration-color var(--t-hover),color var(--t-hover)}
.tg-dialog .tg-lenke:hover{color:var(--blekk);text-decoration-color:var(--blekk)}
.tg-dialog a:focus-visible,.tg-dialog button:focus-visible{outline:1px solid var(--blekk);outline-offset:4px}
.tg-dialog .knapp:focus-visible{outline:none}
/* Kalenderen */
.tg-dialog .booking-calendar{display:block;width:100%;height:min(620px,62dvh);min-height:330px;margin-top:22px;border:0;border-radius:var(--medieradius);background:var(--hvit)}
.tg-dialog .calendar-fallback{display:inline-block;margin-top:22px}
/* P0-18 (2026-10-15): uten innebygd kalender er «Velg tidspunkt» (ny fane) dialogens hovedhandling. */
.tg-dialog .booking-handling{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* P1-06 (2026-10-15): to linjer om hva møtet handler om, en lasteflate mens kalenderen henter seg inn, og fullskjerm på
   mobil, så kalenderen fyller dialogen i stedet for å rulle i en ramme inni en dialog. */
.tg-dialog .booking-linjer{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;max-width:var(--maal-bred);color:var(--tone-tekst)}
.tg-dialog .booking-linjer b{font-weight:500;color:var(--blekk)}
.tg-dialog .booking-ramme{position:relative;margin-top:22px;border-radius:var(--medieradius);background:var(--hvit)}
.tg-dialog .booking-ramme .booking-calendar{margin-top:0;opacity:0;transition:opacity .3s}
.tg-dialog .booking-ramme.lastet .booking-calendar{opacity:1}
.tg-dialog .booking-laster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;margin:0}
.tg-dialog .booking-laster::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--regel);border-top-color:var(--blekk);animation:booking-snurr .8s linear infinite}
.tg-dialog .booking-ramme.lastet .booking-laster{display:none}
@keyframes booking-snurr{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tg-dialog .booking-laster::before{animation:none}}
@media(max-width:599px){
  /* Fullskjerm bare når en kalender er bygd inn (P0-18: i dag åpner «Velg tidspunkt» ny fane, og dialogen er et vanlig kort). */
  .tg-dialog.booking-dialog:has(.booking-ramme){width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:16px 16px 12px}
  .tg-dialog.booking-dialog[open]:has(.booking-ramme){display:flex;flex-direction:column}
  .tg-dialog.booking-dialog .dialog-intro,.tg-dialog.booking-dialog .card-title{flex:none}
  .tg-dialog.booking-dialog .booking-ramme{flex:1;min-height:360px;margin-top:16px}
  .tg-dialog.booking-dialog .booking-calendar{height:100%;min-height:360px}
  .tg-dialog.booking-dialog .calendar-fallback{margin-top:12px}
}
/* Skjemaet: mailto, ingen tjener. */
.tg-dialog .form-fields{display:grid;grid-template-columns:1fr;gap:22px 16px;margin-top:40px}
@media(min-width:900px){.tg-dialog .form-fields{grid-template-columns:1fr 1fr}.tg-dialog .field-wide{grid-column:1/-1}}
.tg-dialog .field label{display:block;margin-bottom:8px;color:var(--tone-tekst)}
.tg-dialog .field input,.tg-dialog .field textarea{width:100%;min-width:0;border:1px solid var(--regel);border-radius:6px;background:var(--hvit);color:var(--blekk);padding:12px 14px;font-family:var(--sans);font-weight:400;font-size:16px;line-height:132%;letter-spacing:-.03rem}
.tg-dialog .field textarea{min-height:132px;resize:vertical;display:block}
.tg-dialog .field input:focus-visible,.tg-dialog .field textarea:focus-visible{outline:1px solid var(--blekk);outline-offset:2px}
.tg-dialog .field textarea::placeholder,.tg-dialog .field input::placeholder{color:var(--dempet);opacity:1}
/* Virksomhet: forslag fra Enhetsregisteret under feltet (2026-10-04). */
.tg-dialog .field-virksomhet{position:relative}
.tg-dialog .virksomhet-forslag{position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:4px 0;list-style:none;max-height:288px;overflow:auto;background:var(--hvit);border:1px solid var(--regel);border-radius:6px}
.tg-dialog .virksomhet-forslag li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer}
.tg-dialog .virksomhet-forslag li[aria-selected="true"],.tg-dialog .virksomhet-forslag li:hover{background:var(--kort)}
.tg-dialog .virksomhet-forslag .navn{color:var(--blekk);font-size:16px;line-height:132%;letter-spacing:-.03rem}
.tg-dialog .virksomhet-forslag .detalj{color:var(--dempet)}
.tg-dialog .form-submit{margin-top:22px}
.tg-dialog .feilmelding{margin-top:8px;color:var(--blekk)}
.tg-dialog .feilmelding::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:middle}
.tg-dialog .field input[aria-invalid="true"]{border-color:var(--blekk)}
.tg-dialog .form-note,.tg-dialog .form-status{margin-top:14px;max-width:var(--maal-bred)}
.tg-dialog .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.tg-dialog button:disabled{opacity:.6;cursor:wait}

/* DØDE LENKER. Sider som ikke finnes ennå. Ingen href, så ingenting hopper til toppen; dempet, så det er tydelig hva som er klikkbart. */
a.dod,button.dod{opacity:var(--demp-dod);cursor:default;pointer-events:none}
/* Redusert bevegelse: avdekkingen og hover skjer uten overgang; filmene stoppes i skriptet. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}}

/* =========================================================
   ARTIKKELKORTET (.artikkel). Flyttet hit fra innsikt-artikkel.html 2026-09-12
   fordi fire artikler og malen deler det. Ett langt kort, som Genesis sin blogg
   (referanse/genesis-ai/GENESIS-AI-ANALYSE.md §11.2), men lyst som resten av Easy-sidene. Målt på referansen ved 1440:
   strekrad med metadata, tittel i kol 1 til 8, bilde over hele kortbredden,
   manchett i samme grad som tittelen men dempet, lesespalte 656 px i kol 5 til
   10, fotnoter i kol 11 til 12 på høyde med avsnittet. Nytt hos Easy: innholds-
   fortegnelsen står stille i kol 1 til 3 mens teksten ruller.
   ========================================================= */
.artikkeltittel{font-family:var(--sans);font-weight:400;font-size:28px;line-height:102%;letter-spacing:-.08rem}
@media(min-width:900px){.artikkeltittel{font-size:44px;line-height:102%;letter-spacing:-.12rem}}

/* clip, ikke hidden: hidden gjør kortet til rulleboks og sticky i kol 1 slår aldri inn. */
.artikkel .kort{overflow:clip}
.artikkel .topp{padding-bottom:80px}
@media(min-width:900px){.artikkel .topp{padding-bottom:160px}}
.artikkel .topp .dato{text-align:right}
.artikkel .topp .dato .eyebrow+.eyebrow{margin-top:0}
.artikkel .hode h1{grid-column:1/span 4}
@media(min-width:900px){.artikkel .hode h1{grid-column:1/span 8}}
.artikkel .helte{grid-column:1/span 4;margin-top:28px}
@media(min-width:900px){.artikkel .helte{grid-column:1/span 12;margin-top:40px}}
.artikkel .helte .plassholder{aspect-ratio:16/9}
.artikkel .helte img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--medieradius);display:block}
.artikkel .manchett{grid-column:1/span 4;color:var(--dempet);margin-top:28px;margin-bottom:60px}
@media(min-width:900px){.artikkel .manchett{grid-column:1/span 12;margin-top:40px;margin-bottom:80px}}

/* Kroppen: innholdsfortegnelse i kol 1 til 3, lesespalte i kol 5 til 10. */
.artikkel .kropp{padding-bottom:60px}
@media(min-width:900px){.artikkel .kropp{padding-bottom:120px}}
.innholdsliste{grid-column:1/span 4;margin-bottom:40px}
/* Innholdsfortegnelsen henger midt på skjermen: boksen er viewport-høy og innholdet sentrert i den. */
@media(min-width:900px){.innholdsliste{grid-column:1/span 3;margin-bottom:0;position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;justify-content:center}
/* Kort artikkel (lesespalten lavere enn skjermen): lista står stille øverst, ellers blir kortet en skjermhøyde for høyt. Klassen settes i avdekking.js.
   Heter stille, ikke kort: .kort er kortet, og lista fikk kortets bakgrunn og radius (usynlig på lyst kort, synlig på artikkeltonene). */
.innholdsliste.stille{position:static;height:auto;display:block}}
.innholdsliste .h{margin-bottom:12px}
.innholdsliste .tilbake{display:inline-block;margin-top:28px;color:var(--dempet);text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;transition:color var(--t-hover)}
.innholdsliste .tilbake:hover{color:var(--blekk)}
.lenke-stille{color:inherit}
.lenke-stille:hover{text-decoration:underline;text-underline-offset:var(--understrek-avstand)}
.innholdsliste a{display:block;color:var(--dempet);padding:3px 0;transition:color var(--t-hover) ease-in-out;max-width:var(--maal-kort)}
.innholdsliste a:hover,.innholdsliste a.aktiv{color:var(--blekk)}
.innholdsliste a.aktiv::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:1px;background:var(--blekk)}
.innholdsliste .lenker-i{position:relative;padding-left:14px}
/* align-self:start så høyden er innholdets, ikke radens; avdekking.js måler den for å avgjøre om lista skal henge. */
.lesing{grid-column:1/span 4;min-width:0;align-self:start}
@media(min-width:900px){.lesing{grid-column:5/span 6}}
.lesing p.brod{margin-bottom:22px}
.lesing .brod b{font-weight:500;color:var(--blekk)}
.lesing .brod i{font-style:italic}
.lesing .brod a{text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;text-decoration-color:var(--tone-lenke);transition:text-decoration-color var(--t-hover),color var(--t-hover)}
.lesing .brod a:hover{color:var(--blekk);text-decoration-color:var(--blekk)}
.lesing h2{font-family:var(--sans);font-weight:500;font-size:22px;line-height:108%;letter-spacing:-.05rem;color:var(--blekk);margin:40px 0 22px;scroll-margin-top:70px}
@media(min-width:900px){.lesing h2{margin-top:60px}}
.lesing h3{font-family:var(--sans);font-weight:500;font-size:16px;line-height:112%;letter-spacing:-.03rem;color:var(--blekk);margin:28px 0 2px}
@media(min-width:900px){.lesing h3{font-size:18px;letter-spacing:-.04rem}}
.lesing h2+h3{margin-top:0}
/* Seksjonstittel i tittelens grad. H2 semantisk (siden har én H1), men tegnet som .artikkeltittel. */
.lesing h2.stor{color:var(--blekk);margin:60px 0 28px;scroll-margin-top:70px;font-weight:400;font-size:28px;line-height:102%;letter-spacing:-.08rem}
@media(min-width:900px){.lesing h2.stor{font-size:44px;line-height:102%;letter-spacing:-.12rem}}
@media(min-width:900px){.lesing h2.stor{margin-top:80px}}
.lesing ul,.lesing ol{padding-left:40px;margin:0 0 22px}
.lesing ul{list-style:disc}
.lesing ol{list-style:none;padding-left:0}
.lesing li{margin-bottom:22px}
.lesing li::marker{color:var(--dempet)}
.lesing ol li{display:grid;grid-template-columns:32px 1fr;column-gap:8px}
.lesing ol li .nr{padding-top:4px}
/* Figurer holder spaltebredden. Plassholderne har målene fra referansen (656 bred). */
.lesing figure{margin:40px 0 60px}
.lesing figure .plassholder{width:100%}
.lesing figure.f-lav .plassholder{aspect-ratio:656/247}
.lesing figure.f-middels .plassholder{aspect-ratio:656/350}
.lesing figure.f-film .plassholder{aspect-ratio:16/9}
.lesing figure.f-hoy .plassholder{aspect-ratio:656/878}
.lesing figcaption{margin-top:12px;color:var(--dempet);display:flex;gap:14px;align-items:flex-start}
.lesing figcaption span:first-child{white-space:nowrap}
.lesing .film-knapp{position:absolute;left:18px;bottom:18px;z-index:2}
/* Fotnoter: nummer i mono i teksten, noten i kol 11 til 12 på høyde med avsnittet. På mobil står noten rett under avsnittet sitt, med kortere luft over. */
@media(max-width:899px){.med-fotnote p.brod{margin-bottom:12px}}
.med-fotnote{position:relative}
sup.fn{font-family:var(--mono);font-size:12px;font-weight:500;line-height:0;letter-spacing:0;vertical-align:super;margin-left:4px;color:var(--dempet)}
.fotnote{font-family:var(--sans);font-size:14px;line-height:112%;letter-spacing:-.026rem;color:var(--dempet);margin:0 0 22px;padding-left:40px}
.fotnote .nr{font-family:var(--mono);font-size:12px;font-weight:500;line-height:118%;letter-spacing:0;margin-right:8px}
@media(min-width:900px){
  .fotnote{position:absolute;top:0;left:calc(100% + var(--gap));width:calc((100% - 5*var(--gap))/6*2 + var(--gap));margin:0;padding:0}
}
.artikkel .bunn .eyebrow{color:var(--dempet)}

/* =========================================================
   SPØRSMÅL OG SVAR (`.sporsmaal`). Felles korttype fra 2026-09-21, fordi
   flere sider skal kunne ha spørsmål og svar. Sto sidelokalt i
   grunnerverv.html til da.

   Raden er et nedtrekk (`<details>`), etter ønske fra brukeren: spørsmålet er
   knappen i kol 5, merket står høyrestilt mot kol 12, og svaret kommer fram
   under spørsmålet i samme spalte. Det første står åpent, så
   kortet ikke møter leseren som fire lukkede rader. Svarene ligger i HTML
   uansett, så de leses av søkemotorer og står ordrett i FAQPage i JSON-LD.

   Ingen streker per rad og ingen hårlinje (§9 regel 11 og 12): radene skilles
   av 40 px luft, som før. Merket er en kontroll, ikke en rutenettmarkør, og
   bruker derfor --regel og 10 px, ikke strekens 14. Det står høyrestilt i
   spørsmålets egen spalte, så det hører synlig til spørsmålet.
   ========================================================= */
.sporsmaal .liste{padding-bottom:40px}
@media(min-width:900px){.sporsmaal .liste{padding-bottom:60px}}
.sporsmaal .topp{padding-bottom:40px}
@media(min-width:900px){.sporsmaal .topp{padding-bottom:60px}}
.sporsmaal .rad+.rad{margin-top:40px}
/* Bunnraden: «Sist oppdatert» står over kol 1-streken; cellene bunnjusteres så alle fire streker ligger på samme linje. */
.sporsmaal .bunn{align-items:end}

/* Raden er rutenettet, og nedtrekket står i kol 5 til 12. Rutenettet kan ikke
   ligge på selve <details>: nyere Chrome pakker innholdet i ::details-content,
   så et svar med grid-column der havnet i kol 1 (målt 2026-09-21). Spørsmålet
   og svaret står derfor i samme spalte, med merket høyrestilt mot kol 12. */
.sporsmaal .rad{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
@media(min-width:900px){.sporsmaal .rad{grid-template-columns:repeat(12,1fr);column-gap:16px}}
.sporsmaal details.sp{grid-column:1/span 4}
@media(min-width:900px){.sporsmaal details.sp{grid-column:5/span 8}}
.sporsmaal details.sp>summary{display:flex;gap:14px;align-items:flex-start;
  justify-content:space-between;list-style:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.sporsmaal details.sp>summary::-webkit-details-marker{display:none}
.sporsmaal details.sp>summary::marker{content:""}
.sporsmaal details.sp>summary:focus-visible{outline:1px solid var(--blekk);outline-offset:8px}
.sporsmaal .svar{margin-top:22px}
@media(min-width:900px){.sporsmaal .svar{margin-top:14px}}
.sporsmaal summary h3{max-width:var(--maal);color:var(--blekk)}
.sporsmaal .svar p{max-width:var(--maal-bred)}

/* Merket: pluss som blir minus. Kontrollfarge, 10 px, så det ikke leses som en strek i rutenettet. */
.sporsmaal .tegn{position:relative;flex:0 0 10px;width:10px;height:10px;margin-top:4px}
@media(min-width:900px){.sporsmaal .tegn{margin-top:8px}}
.sporsmaal .tegn::before,
.sporsmaal .tegn::after{content:"";position:absolute;background:var(--regel);transition:background var(--t-hover),opacity var(--t-hover)}
.sporsmaal .tegn::before{left:0;right:0;top:50%;height:1px;transform:translateY(-.5px)}
.sporsmaal .tegn::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px)}
.sporsmaal details.sp[open] .tegn::after{opacity:0}
.sporsmaal details.sp>summary:hover .tegn::before,
.sporsmaal details.sp>summary:hover .tegn::after,
.sporsmaal details.sp[open] .tegn::before{background:var(--blekk)}
@media(prefers-reduced-motion:reduce){
  .sporsmaal .tegn::before,.sporsmaal .tegn::after{transition:none}
}

/* =========================================================
   MENNESKENE (`.folk`). Felles korttype fra 2026-09-21, fordi forsiden
   også skal vise laget. Sto sidelokalt i om-oss.html til da. Laget og
   styret i samme rader, portrett 88 px i kol 1.
   ========================================================= */
.folk .topp{padding-bottom:40px}
@media(min-width:900px){.folk .topp{padding-bottom:80px}}
/* Laget og styret er samme mønster: hode i kol 1 til 3, ingress i 5 til 10, rader med lite portrett under. */
.folk .hode{grid-column:1/span 4;margin-bottom:22px}
@media(min-width:900px){.folk .hode{grid-column:1/span 3;margin-bottom:0}}
.folk .ingress{grid-column:1/span 4;color:var(--dempet);max-width:var(--maal-bred)}
/* Ingressen er smalere enn fire kolonner (44ch), så kol 9 står tom og får strek (2026-09-20). */
@media(min-width:900px){.folk .ingress{grid-column:5/span 4}}
.styret{padding-top:60px}
@media(min-width:900px){.styret{padding-top:120px}}
/* Blokk med egen bredde, så linja er etikettens og ikke brødtekstens: e-posten står på høyde med rollen. */
.rad-p a.epost{display:block;width:fit-content;color:var(--dempet);text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;text-decoration-color:var(--tone-lenke);transition:text-decoration-color var(--t-hover),color var(--t-hover)}
.rad-p a.epost:hover{color:var(--blekk);text-decoration-color:var(--blekk)}
/* Listen er søsken til .styret, ikke barn: regelen må peke på .folk. */
.folk ul{margin-top:40px}
@media(min-width:900px){.folk ul{margin-top:60px}}
.styret{padding-bottom:0}
/* Hoderaden (Laget, Rådgivende styre) er gruppens strekrad; personradene har ingen streker, 40 mellom dem, ingen hårlinje (2026-09-20). */
.rad-p+.rad-p{margin-top:40px}
.folk ul:last-of-type{padding-bottom:40px}
@media(min-width:900px){.folk ul:last-of-type{padding-bottom:60px}}
.rad-p .grid{align-items:start}
/* Under 900 stables hodet og ingressen; ingressens strek ville ligge på egen linje, så den utelates der. */
@media(max-width:899px){.folk .ingress .strek{display:none}}
/* Radene står på kolonnene strekene står på (2026-09-19): portrett i kol 1, navn i 5, rolle i 9 med
   e-post eller bio under i samme kolonne. Under 900: portrett i kol 1, navn og rolle i kol 3, e-post
   eller bio i kol 1 til 4 under. Portrettet er 400 × 400 fra landingssiden, kvadrat med medieradius. */
.rad-p .r0{grid-column:1/span 1;grid-row:1/span 2}
.rad-p .r0 .portrett{width:100%;max-width:88px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;border-radius:var(--medieradius)}
.rad-p .r1{grid-column:3/span 2}
.rad-p .r2{grid-column:3/span 2;margin-top:4px}
/* Bioene er for lange for mono; sans 14 leser bedre. Mono holdes til korte etiketter. */
.rad-p .r3{grid-column:1/span 4;margin-top:12px;color:var(--dempet)}
.rad-p .r3 p{font-family:var(--sans);font-weight:400;font-size:14px;line-height:132%;letter-spacing:-.026rem}
@media(min-width:900px){
  .rad-p .r0{grid-column:1/span 1;grid-row:1/span 2}
  .rad-p .r1{grid-column:5/span 4;grid-row:1}
  .rad-p .r2{grid-column:9/span 4;grid-row:1;margin-top:0}
  .rad-p .r3{grid-column:9/span 4;grid-row:2;margin-top:12px;max-width:var(--maal-bred)}
}
.rad-p .r1 .navn{font-family:var(--sans);font-weight:400;font-size:18px;line-height:112%;letter-spacing:-.04rem}


/* =========================================================
   DATAKORT (.datakort, eieren 2026-10-08, etter Cotality). Ett hvitt kort per datasett eller
   datakategori på kortflaten, på Våre data og i Databiblioteket. Kortene står i tre spalter fra
   900 (kol 1, 5 og 9), to fra 600 og én under; teksten står med kortets egen luft, som flisene
   (.flate, DESIGN.md §4). Tallet og kilden står nederst, så kortene i en rad slutter likt.
   ========================================================= */
.datakorta{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.datakorta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.datakorta{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}}
/* Merket «Særskilt tilgang» (Kartverket, skisse 2026-10-16): samme lille flate som merkene i Databiblioteket. */
.merker{display:flex;flex-wrap:wrap;gap:8px}
.merker .merke{padding:4px 8px;border-radius:6px;background:var(--lys);color:var(--blekk)}
.datakort{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:260px;padding:22px;border-radius:var(--kortradius);background:var(--hvit);color:var(--blekk);text-decoration:none}
.datakort[hidden]{display:none}
.datakort .navn{margin:4px 0 0;font-family:var(--sans);font-weight:400;font-size:22px;line-height:108%;letter-spacing:-.05rem}
@media(min-width:900px){.datakort .navn{font-size:28px;line-height:102%;letter-spacing:-.08rem}}
.datakort .tekst{max-width:var(--maal-kort);line-height:132%;color:var(--tone-tekst)}
.datakort>.eyebrow.dempet{color:var(--tone-tekst)}
.datakort .tall{margin-top:auto;padding-top:22px}
.datakort .les{display:inline-flex;align-items:center;gap:8px;margin-top:14px}
.datakort .les svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
a.datakort:focus-visible{outline:1px solid var(--blekk);outline-offset:4px}
@media(hover:hover){a.datakort:hover .les{text-decoration:underline;text-underline-offset:var(--understrek-avstand)}}
.datakort.moerk{background:var(--blekk);color:var(--hvit)}
/* Databiblioteket (eieren 2026-10-08, etter sammenligningen med Cotality): «Bare hos oss» som en liten merkelapp i kontrollfargen,
   og det som kommer, dempet som de døde lenkene. Kortflaten står, bare innholdet dempes. */
.datakort .unik{align-self:flex-start;padding:4px 8px;border-radius:6px;background:var(--lys);color:var(--blekk)}
article.datakort.kommer>*{opacity:var(--demp-dod)}
.datakort.moerk .tekst,.datakort.moerk>.eyebrow.dempet{color:var(--lys)}
a.datakort.moerk:focus-visible{outline-color:var(--blekk)}

/* Samtykkebanneret (P0-16, 2026-10-15, DESIGN.md §6): et lite hvitt kort nederst til venstre over alt annet, med skygge
   så det skiller seg fra både lyse og mørke kort. To like knapper, så nei er like lett som ja. Ingen streker: det er et
   varsel, ikke et kort i rutenettet. */
.samtykke{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:460px;padding:22px;border-radius:var(--medieradius);background:var(--hvit);color:var(--blekk);box-shadow:0 0 0 1px var(--regel),0 8px 32px rgba(0,0,0,.22)}
.samtykke .text-s{margin:0;max-width:none}
.samtykke a{color:inherit;text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px}
.samtykke .valg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.samtykke .knapp{height:36px;width:100%;background:var(--knapp-graa);color:var(--blekk)}
.samtykke .knapp::before{border:1px solid var(--blekk)}
.samtykke .feil{margin-top:12px}
/* P1-15 (2026-10-15): hver innsiktsartikkel slutter med én neste handling, i lesekolonnen, skilt av luft. */
.artikkel .neste{display:grid;justify-items:start;gap:12px;margin-top:60px}
.artikkel .neste .brod{margin:0}