/* ==========================================================================
   DESIGN-LABB — stilark
   Alt i denne filen er demo. Nettstedet fungerer uten den.

   Hele labben kan fjernes ved å slette mappen design-lab/ og den ene
   <script>-linjen nederst i hver HTML-fil. Ingenting annet peker hit.

   Filen rører aldri en farge direkte. Palettene definerer de samme
   tokennavnene som css/stil.css, og alt annet her bruker var(--...).
   ========================================================================== */


/* ==========================================================================
   1. PALETTER
   Standard-paletten ligger i css/stil.css under :root. De fire under
   overskriver de samme navnene. Alle er maskinelt kontrollert mot
   WCAG 2.1 AA — brødtekst, sekundærtekst, lenker, tekst på fylte flater,
   ikoner og de halvgjennomsiktige bunnfeltfargene.
   ========================================================================== */

/* --- Nordisk ro ---
   Dempet blagra, salvie og varm sand. Kjoligere og mer avdempet enn Standard, med en blagra lenkefarge i stedet for indigo. */
:root[data-palett="nordisk"] {
  --merke:              #3e477b;
  --bg:                 #f8f9f9;
  --bg-gjennomsiktig:   rgba(248, 249, 249, 0.88);
  --flate-ro:           #e6ebed;
  --flate-varm:         #ebe5db;
  --flate-varm-lys:     #f6f3ec;
  --kort:               #ffffff;
  --bunn-bg:            #3a4e57;
  --tekst:              #2d3437;
  --tekst-svak:         #575f63;
  --paa-aksent:         #ffffff;
  --paa-primaer:        #ffffff;
  --paa-bunn:           #ffffff;
  --paa-bunn-mykt:      rgba(255, 255, 255, 0.92);
  --paa-bunn-dempet:    rgba(255, 255, 255, 0.88);
  --paa-bunn-hover:     #ebe5db;
  --aksent:             #294555;
  --aksent-mork:        #1a2d38;
  --primaer:            #4d716c;
  --dekor:              #8aa6a2;
  --kant-svak:          rgba(45, 52, 55, 0.09);
  --kant:               rgba(45, 52, 55, 0.12);
  --kant-knapp:         rgba(45, 52, 55, 0.2);
  --kant-skjema:        rgba(45, 52, 55, 0.52);
  --kant-skjema-sterk:  rgba(45, 52, 55, 0.69);
  --kant-topp:          rgba(138, 166, 162, 0.38);
  --kant-pa-bunn:       rgba(255, 255, 255, 0.18);
  --kant-pa-bunn-sterk: rgba(255, 255, 255, 0.35);
  --skygge:             0 1px 2px rgba(45, 52, 55, 0.05), 0 6px 20px rgba(45, 52, 55, 0.06);
  --feil:               #8a1f1f;
  --feil-flate:         #fdf1f1;
}

/* --- Varm og menneskelig ---
   Terrakotta, krem og dyp petrol. Den eneste paletten med en varm aksentfarge - lenker og knapper er rustrode. */
:root[data-palett="varm"] {
  --merke:              #3e477b;
  --bg:                 #fbf7f3;
  --bg-gjennomsiktig:   rgba(251, 247, 243, 0.88);
  --flate-ro:           #f1e7df;
  --flate-varm:         #eee1d5;
  --flate-varm-lys:     #faf4ee;
  --kort:               #ffffff;
  --bunn-bg:            #1f4a4d;
  --tekst:              #33302d;
  --tekst-svak:         #5f5751;
  --paa-aksent:         #ffffff;
  --paa-primaer:        #ffffff;
  --paa-bunn:           #ffffff;
  --paa-bunn-mykt:      rgba(255, 255, 255, 0.92);
  --paa-bunn-dempet:    rgba(255, 255, 255, 0.88);
  --paa-bunn-hover:     #eee1d5;
  --aksent:             #8a3a1e;
  --aksent-mork:        #672a14;
  --primaer:            #2b6568;
  --dekor:              #c2825f;
  --kant-svak:          rgba(51, 48, 45, 0.09);
  --kant:               rgba(51, 48, 45, 0.12);
  --kant-knapp:         rgba(51, 48, 45, 0.2);
  --kant-skjema:        rgba(51, 48, 45, 0.52);
  --kant-skjema-sterk:  rgba(51, 48, 45, 0.69);
  --kant-topp:          rgba(194, 130, 95, 0.38);
  --kant-pa-bunn:       rgba(255, 255, 255, 0.18);
  --kant-pa-bunn-sterk: rgba(255, 255, 255, 0.35);
  --skygge:             0 1px 2px rgba(51, 48, 45, 0.05), 0 6px 20px rgba(51, 48, 45, 0.06);
  --feil:               #8a1f1f;
  --feil-flate:         #fdf1f1;
}

/* --- Dempet blagronn ---
   Den forrige standardpaletten: gronnfargen dreid mot blagronn sa den henger
   sammen med indigoen, og sanden kjolt ned til en greige. */
:root[data-palett="blagronn"] {
  --merke:              #3e477b;
  --bg:                 #faf9f7;
  --bg-gjennomsiktig:   rgba(250, 249, 247, 0.88);
  --flate-ro:           #e4ecea;
  --flate-varm:         #e9e4dc;
  --flate-varm-lys:     #f6f3ee;
  --kort:               #ffffff;
  --bunn-bg:            #3d5f5c;
  --tekst:              #2f3436;
  --tekst-svak:         #596164;
  --paa-aksent:         #ffffff;
  --paa-primaer:        #ffffff;
  --paa-bunn:           #ffffff;
  --paa-bunn-mykt:      rgba(255, 255, 255, 0.92);
  --paa-bunn-dempet:    rgba(255, 255, 255, 0.88);
  --paa-bunn-hover:     #e9e4dc;
  --aksent:             #2e3560;
  --aksent-mork:        #1f2544;
  --primaer:            #416c68;
  --dekor:              #7ba39d;
  --kant-svak:          rgba(47, 52, 54, 0.09);
  --kant:               rgba(47, 52, 54, 0.12);
  --kant-knapp:         rgba(47, 52, 54, 0.2);
  --kant-skjema:        rgba(47, 52, 54, 0.52);
  --kant-skjema-sterk:  rgba(47, 52, 54, 0.69);
  --kant-topp:          rgba(123, 163, 157, 0.38);
  --kant-pa-bunn:       rgba(255, 255, 255, 0.18);
  --kant-pa-bunn-sterk: rgba(255, 255, 255, 0.35);
  --skygge:             0 1px 2px rgba(47, 52, 54, 0.05), 0 6px 20px rgba(47, 52, 54, 0.06);
  --feil:               #8a1f1f;
  --feil-flate:         #fdf1f1;
}

/* --- Mork og elegant ---
   Mork bakgrunn med myke lyse flater og en varm sandfarge som aksent. Logomerket er lysnet, ellers forsvinner det. */
:root[data-palett="mork"] {
  --merke:              #99a2d6;
  --bg:                 #16191c;
  --bg-gjennomsiktig:   rgba(22, 25, 28, 0.88);
  --flate-ro:           #1f2529;
  --flate-varm:         #232a2e;
  --flate-varm-lys:     #2a3237;
  --kort:               #1e2428;
  --bunn-bg:            #101316;
  --tekst:              #e7eaeb;
  --tekst-svak:         #a8b1b5;
  --paa-aksent:         #16191c;
  --paa-primaer:        #16191c;
  --paa-bunn:           #e7eaeb;
  --paa-bunn-mykt:      rgba(231, 234, 235, 0.92);
  --paa-bunn-dempet:    rgba(231, 234, 235, 0.88);
  --paa-bunn-hover:     #dcb188;
  --aksent:             #dcb188;
  --aksent-mork:        #eecba9;
  --primaer:            #8db5ab;
  --dekor:              #5d7f77;
  --kant-svak:          rgba(255, 255, 255, 0.07);
  --kant:               rgba(255, 255, 255, 0.11);
  --kant-knapp:         rgba(255, 255, 255, 0.18);
  --kant-skjema:        rgba(255, 255, 255, 0.34);
  --kant-skjema-sterk:  rgba(255, 255, 255, 0.51);
  --kant-topp:          rgba(93, 127, 119, 0.38);
  --kant-pa-bunn:       rgba(231, 234, 235, 0.18);
  --kant-pa-bunn-sterk: rgba(231, 234, 235, 0.35);
  --skygge:             0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .45);
  --feil:               #ff9b9b;
  --feil-flate:         #3a2122;
}

/* Logomerket er en SVG-fil med fargen bakt inn, så CSS kan ikke farge den.
   På mørk bakgrunn forsvinner den. Her er den gjort hvit med et filter.
   Skal den mørke paletten tas i bruk på ordentlig, må logoen leveres som
   en egen lys fil — dette er en demo-løsning. */
:root[data-palett="mork"] .logo img,
:root[data-palett="mork"] .helfo-merke img { filter: none; }
:root[data-palett="mork"] .logo img { filter: brightness(0) invert(1) opacity(.9); }


/* ==========================================================================
   2. FORSIDELAYOUT
   Fem varianter av toppen på forsiden. Variant 1 er slik siden ser ut uten
   labben, og har derfor ingen regler her.

   Bildet er 865 px bredt. I variant 2 og 3 strekkes det over hele skjermen,
   og blir da oppskalert på store skjermer. Det er en begrensning i
   kildefilen, ikke i koden.

   Utsnittet er satt til 48 % 12 %: litt til venstre for midten, og høyt
   oppe. Motivene står i venstre halvdel, og hodene ligger øverst — med
   senterutsnitt kuttes toppen av hodet til logopeden på brede skjermer.
   ========================================================================== */

:root[data-hero] .velkomst .bilde-ramme img { object-position: 48% 12%; }

/* --- Variant 2: fullbredde med tekst over --------------------------------
   Bildet fyller skjermen. Bare overskrift, ingress og knapp ligger oppa -
   brodteksten flyttes ned under bildet av lab.js, slik oppdraget beskriver.

   Teksten ligger nede til venstre, ikke midt pa siden. Grunnen star i
   bildet: bade barnet og logopeden har hodet i overste halvdel, og de star
   i venstre halvdel. En tekstblokk sentrert til venstre dekket barnet helt.
   Nederst er bildet rolig, og begge ansiktene blir staende fritt.

   Sloret er to lag: ett fra bunnen og ett svakt fra venstre. Begge bruker
   --bg, sa de folger paletten - i den morke paletten blir sloret morkt og
   teksten lys, uten at noe ekstra ma settes. */

:root[data-hero="2"] .velkomst { padding-block: 0; background: var(--bg); }
:root[data-hero="2"] .velkomst > .ramme { max-width: none; padding-inline: 0; }

:root[data-hero="2"] .velkomst .velkomst-rutenett {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 100svh;
  align-items: end;
}

:root[data-hero="2"] .velkomst .bilde-ramme {
  grid-area: 1 / 1;
  align-self: stretch;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
:root[data-hero="2"] .velkomst .bilde-ramme picture {
  display: block;
  height: 100%;
}
:root[data-hero="2"] .velkomst .bilde-ramme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root[data-hero="2"] .velkomst .velkomst-rutenett::before {
  content: "";
  grid-area: 1 / 1;
  align-self: stretch;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0 6%, rgb(0 0 0 / 0) 46%);
}

/* Tekstblokka star pa sin egen flate, ikke rett pa fotoet. En gradient
   oppa et bilde kan ikke kontrastmales - bakgrunnen er piksler, ikke en
   farge - sa lesbarheten ma garanteres av konstruksjonen og ikke males i
   ettertid. Den store, uskarpe skyggen i samme farge som flaten gjor at
   kanten toner ut i bildet i stedet for a sta som en firkant. */
:root[data-hero="2"] .velkomst .tekst {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  max-width: min(34rem, 54vw);
  margin-inline: clamp(1.5rem, 7vw, 6rem) auto;
  margin-block: 0 clamp(3rem, 8vh, 5.5rem);
  padding: 1.75rem 2rem;
  background: var(--bg);
  border-radius: var(--radius-stor);
  box-shadow: 0 0 4.5rem 2.25rem var(--bg);
}

/* Brodtekstblokken lab.js flytter ned under bildet. */
.lab-under { display: none; }
:root[data-hero="2"] .lab-under {
  display: block;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--bg);
}
:root[data-hero="2"] .lab-under > .ramme {
  max-width: var(--bredde);
  margin-inline: auto;
}

@media (max-width: 52rem) {
  /* Pa telefon er rammen hoy og smal, og da kuttes bildet hardt i bredden.
     Ved full skjermhoyde er det bare plass til 35 % av bredden, mens de to
     ansiktene til sammen dekker 44 % - barnet falt utenfor. Hoyden settes
     derfor til 62 % av skjermen, som gir plass til 56 % av bredden, og
     utsnittet sentreres pa paret i stedet for pa bildet.
     Sloret blir samtidig kraftigere, og teksten tar hele bredden. Egen
     komposisjon, ikke en nedskalert utgave av den brede. */
  :root[data-hero="2"] .velkomst .velkomst-rutenett { min-height: 62svh; }
  :root[data-hero="3"] .velkomst .bilde-ramme { height: 62svh; }
  :root[data-hero="2"] .velkomst .bilde-ramme img,
  :root[data-hero="3"] .velkomst .bilde-ramme img { object-position: 38% 10%; }

  :root[data-hero="2"] .velkomst .velkomst-rutenett::before {
    background: linear-gradient(to top, var(--bg) 0 10%, rgb(0 0 0 / 0) 52%);
  }
  :root[data-hero="2"] .velkomst .tekst {
    max-width: none;
    margin-inline: clamp(.75rem, 3vw, 1.5rem);
    margin-block: 0 clamp(1.25rem, 4vw, 2rem);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 0 3rem 1.5rem var(--bg);
  }
}

/* --- Variant 3: fullbredde, tekst under ----------------------------------
   Ingen tekst oppå bildet. Bildet fyller skjermen, teksten kommer under.
   Bildeteksten nederst legges inn av lab.js, og bare i denne varianten. */

:root[data-hero="3"] .velkomst { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
:root[data-hero="3"] .velkomst > .ramme { max-width: none; padding-inline: 0; }

/* Bildet star etter teksten i HTML-en. Her skal det over, og da ma det
   vaere flex - order virker ikke pa display: block. */
:root[data-hero="3"] .velkomst .velkomst-rutenett {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Grunnstilarket sentrerer rutenettet. I en kolonne betyr det at
     elementene krymper til innholdsbredden i stedet for a fylle. */
  align-items: stretch;
}
:root[data-hero="3"] .velkomst .bilde-ramme {
  order: -1;
  position: relative;
  border-radius: 0;
  box-shadow: none;
  height: 100svh;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
:root[data-hero="3"] .velkomst .bilde-ramme picture {
  display: block;
  height: 100%;
}
:root[data-hero="3"] .velkomst .bilde-ramme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-hero="3"] .velkomst .tekst {
  max-width: var(--bredde-tekst);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Bildeteksten. Står på et slør, ikke rett på bildet, så den er lesbar
   uansett hva som ligger bak. */
.lab-bildetekst {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(44rem, calc(100% - 2.5rem));
  margin: 0;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--tekst);
  font-size: .975rem;
  line-height: 1.5;
  box-shadow: var(--skygge);
}
:root[data-hero="3"] .lab-bildetekst { display: flex; }
.lab-bildetekst .knapp { padding: .5rem 1.1rem; font-size: .95rem; }

/* --- Variant 1: delt, rektangulaer ramme ---------------------------------
   Buet utsnitt ligger i grunnarket som standard. Denne tilbakestiller til
   den rektangulaere rammen. */

:root[data-hero="1"] .velkomst .bilde-ramme {
  border-radius: var(--radius-stor);
  background: var(--flate-varm-lys);
  box-shadow: var(--skygge);
  max-width: none;
}
:root[data-hero="1"] .velkomst .bilde-ramme img { aspect-ratio: auto; }

/* De fullbredde layoutene setter sin egen radius, men ma ha vekk
   maksbredden og det kvadratiske forholdet fra standardlayouten. */
:root[data-hero="2"] .velkomst .bilde-ramme,
:root[data-hero="3"] .velkomst .bilde-ramme,
:root[data-hero="5"] .velkomst .bilde-ramme { max-width: none; }
:root[data-hero="2"] .velkomst .bilde-ramme img,
:root[data-hero="3"] .velkomst .bilde-ramme img { aspect-ratio: auto; }

/* --- Variant 5: overlappende kort ----------------------------------------
   Stort bilde i full bredde av rammen, med tekstkortet trukket opp over
   underkanten. Litt magasin. */

/* Som variant 3: bildet star etter teksten i HTML-en, og ma over. */
:root[data-hero="5"] .velkomst .velkomst-rutenett {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
:root[data-hero="5"] .velkomst .bilde-ramme {
  order: -1;
  border-radius: var(--radius-stor);
}
:root[data-hero="5"] .velkomst .bilde-ramme img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
:root[data-hero="5"] .velkomst .tekst {
  position: relative;
  z-index: 1;
  max-width: min(46rem, 92%);
  margin: -5rem auto 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--kort);
  border: 1px solid var(--kant-svak);
  border-radius: var(--radius-stor);
  box-shadow: var(--skygge);
}

@media (max-width: 52rem) {
  /* Mindre overlapp på mobil, ellers spiser kortet opp hele bildet. */
  :root[data-hero="5"] .velkomst .bilde-ramme img { aspect-ratio: 4 / 3; }
  :root[data-hero="5"] .velkomst .tekst {
    max-width: calc(100% - 1.5rem);
    margin-top: -2.5rem;
  }
}


/* ==========================================================================
   3. SVART/HVITT
   Filter på visningen. Bildefilene er urørt.
   ========================================================================== */

:root[data-sh-profil] .profil-bilde img {
  filter: grayscale(1);
  transition: filter .35s ease;
}
:root[data-sh-profil] .profil:hover .profil-bilde img,
:root[data-sh-profil] .profil:focus-within .profil-bilde img {
  filter: grayscale(0);
}

:root[data-sh-hero] .velkomst .bilde-ramme img {
  filter: grayscale(1);
  transition: filter .5s ease;
}
:root[data-sh-hero] .velkomst .bilde-ramme:hover img { filter: grayscale(0); }


/* ==========================================================================
   4. EFFEKTER
   Hver enkelt slås av og på for seg. Alt som beveger seg er slått av under
   prefers-reduced-motion, nederst i filen.
   ========================================================================== */

/* --- Innglidning ved rulling ---------------------------------------------
   Elementene får plassen sin med en gang; bare opasitet og transform
   endres. Det gir ingen layout-hopp. */
:root[data-fx-inntoning] .lab-tone {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}
:root[data-fx-inntoning] .lab-tone.lab-inne {
  opacity: 1;
  transform: none;
}

/* --- Menylinje som krymper ved rulling ------------------------------------ */
:root[data-fx-krympetopp] .topp {
  transition: box-shadow .25s ease, background-color .25s ease;
}
:root[data-fx-krympetopp] .topp .topp-innhold {
  transition: min-height .25s ease;
}
:root[data-fx-krympetopp] .topp .logo img {
  transition: height .25s ease;
}
:root[data-fx-krympetopp] .topp.lab-rullet .topp-innhold { min-height: 3.5rem; }
:root[data-fx-krympetopp] .topp.lab-rullet .logo img { height: 1.7rem; }
:root[data-fx-krympetopp] .topp.lab-rullet { box-shadow: var(--skygge); }

/* --- Overganger mellom seksjoner -----------------------------------------
   Formen tegnes som et ::before øverst på båndet, i fargen til båndet FOR.
   Da leses den som at det forrige båndet slutter i den formen, i stedet for
   som en strek lagt oppa det nye. Fargen kommer fra --lab-forrige, som
   lab.js setter per bånd — som tokennavn og ikke som utregnet farge, så den
   følger paletten av seg selv.

   Høyden holdes under båndets egen luft oppe, så formen aldri legger seg
   oppa tekst, og alt er pointer-events: none.

   Bølgemaskene er SVG uten faste mål. preserveAspectRatio="none" gjør at de
   strekkes i bredden uten å bli høyere, så bølgen er like høy på telefon
   som på bred skjerm. Hvitt i masken = der forrige farge skal vises. */

:root {
  --lab-bolge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v42c-196 56-414-30-600 2S188 98 0 64Z' fill='%23fff'/%3E%3C/svg%3E");
  --lab-bolge-to: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v28c-240 76-460 2-640 26S150 92 0 52Z' fill='%23fff'/%3E%3C/svg%3E");
}

.lab-overgang { position: relative; }

:root:not([data-overgang="ingen"]) .lab-overgang::before,
:root[data-overgang="dobbel"] .lab-overgang::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background: var(--lab-forrige);
}

/* Skrå: diagonal kant. */
:root[data-overgang="skraa"] .lab-overgang::before {
  height: clamp(1.25rem, 3.5vw, 2.5rem);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Bølge. */
:root[data-overgang="bolge"] .lab-overgang::before,
:root[data-overgang="dobbel"] .lab-overgang::before {
  height: clamp(1.5rem, 4vw, 3.25rem);
  -webkit-mask-image: var(--lab-bolge);
  mask-image: var(--lab-bolge);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
}

/* Dobbel: en bølge til bak den første, forskjøvet og svakere. */
:root[data-overgang="dobbel"] .lab-overgang::after {
  height: clamp(2rem, 5.5vw, 4.25rem);
  opacity: .45;
  -webkit-mask-image: var(--lab-bolge-to);
  mask-image: var(--lab-bolge-to);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Myk bue: én stor bue som henger ned i båndet. */
:root[data-overgang="bue"] .lab-overgang::before {
  /* Buen flater ut pa brede skjermer fordi radien er i prosent av bredden.
     Litt ekstra hoyde holder den synlig uten a gjore den paatrengende. */
  height: clamp(1.75rem, 4.5vw, 3.75rem);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Uttoning: ingen kant i det hele tatt — fargene glir over i hverandre. */
:root[data-overgang="uttoning"] .lab-overgang::before {
  height: clamp(2rem, 6vw, 4rem);
  background: linear-gradient(to bottom, var(--lab-forrige), rgb(0 0 0 / 0));
}

/* Myk skygge: ingen form, bare en antydning av at båndet ligger oppa. */
:root[data-overgang="skygge"] .lab-overgang::before { display: none; }
:root[data-overgang="skygge"] .lab-overgang {
  box-shadow: inset 0 14px 20px -16px rgb(0 0 0 / .45);
}

/* --- Sterkere hover på kort og knapper ------------------------------------
   Grunnstilarket har allerede et lite løft. Dette legger på skygge, litt
   mer bevegelse og en mykere kurve. */
:root[data-fx-hover] .omrade-kort,
:root[data-fx-hover] .profil,
:root[data-fx-hover] .kontaktkort {
  transition: transform .22s cubic-bezier(.22, .8, .3, 1),
              box-shadow .22s ease, background-color .22s ease;
}
:root[data-fx-hover] .omrade-kort:hover,
:root[data-fx-hover] .profil:hover,
:root[data-fx-hover] .kontaktkort:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgb(0 0 0 / .04), 0 14px 34px rgb(0 0 0 / .1);
}
:root[data-fx-hover] .omrade-kort .ikon {
  transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
:root[data-fx-hover] .omrade-kort:hover .ikon { transform: scale(1.08) rotate(-3deg); }
:root[data-fx-hover] .knapp { transition: transform .18s ease, background-color .15s ease; }
:root[data-fx-hover] .knapp:hover { transform: translateY(-2px); }
:root[data-fx-hover] .knapp:active { transform: translateY(0); }

/* --- Myk rulling mellom ankere --------------------------------------------
   Grunnstilarket har dette på. Her kan det slås av, som en variant. */
:root[data-fx-mykrulling="nei"] { scroll-behavior: auto; }

/* --- Parallax -------------------------------------------------------------
   Forskyvningen settes av lab.js som en egen variabel, slik at CSS-en eier
   hvor mye det er lov å bevege seg. */
/* Bildet skaleres litt opp, ellers blottes kanten av rammen nar det
   forskyves. Rammen klipper, sa oppskaleringen synes ikke. */
:root[data-fx-parallax] .lab-parallax {
  will-change: transform;
  transform: translate3d(0, var(--lab-forskyvning, 0), 0) scale(1.08);
}

/* --- Lesefremdrift --------------------------------------------------------
   Tynn strek øverst som viser hvor langt ned på siden man er. Forslag ut
   over listen: den er rolig, og den hjelper faktisk på de lange sidene
   (behandling og priser). */
.lab-fremdrift {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 150;
  background: var(--primaer);
  transform: scaleX(var(--lab-lest, 0));
  transform-origin: 0 50%;
  display: none;
}
:root[data-fx-fremdrift] .lab-fremdrift { display: block; }

/* --- Lys på seksjonen som åpnes -------------------------------------------
   Forslag: når et behandlingsområde foldes ut, får det et kort lysglimt, så
   øyet finner igjen hvor det skjedde. Varer under et halvt sekund. */
@keyframes lab-glimt {
  from { background-color: var(--flate-ro); }
  to   { background-color: var(--kort); }
}
:root[data-fx-apenseksjon] .omrade.lab-nettopp-apnet {
  animation: lab-glimt .45s ease-out;
}

/* --- Bildene toner inn ----------------------------------------------------
   Forslag: bildene går fra flatefargen til bildet når de er ferdig lastet,
   i stedet for å poppe inn. Ingen layout-hopp, fordi plassen allerede er
   satt av med width og height på <img>. */
:root[data-fx-bildeinn] img:not(.lab-lastet) {
  opacity: 0;
}
:root[data-fx-bildeinn] img {
  transition: opacity .6s ease;
}
:root[data-fx-bildeinn] img.lab-lastet { opacity: 1; }


/* ==========================================================================
   5. MYK OVERGANG VED PALETTBYTTE
   Klassen settes av lab.js rett før paletten byttes, og fjernes etterpå.
   Den ligger ikke på hele tiden — da ville hver eneste hover fått en treg
   fargeovergang.
   ========================================================================== */

:root.lab-bytter,
:root.lab-bytter *,
:root.lab-bytter *::before,
:root.lab-bytter *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              fill .3s ease, stroke .3s ease, box-shadow .3s ease !important;
}


/* ==========================================================================
   6. PANELET
   Vises bare når labben er slått på. Alt er prefikset .lab- så ingenting
   kan kollidere med nettstedets egne klasser.
   ========================================================================== */

.lab-knapp {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: 1px solid var(--kant-knapp);
  border-radius: 50%;
  color: var(--tekst);
  cursor: pointer;
  transition: background-color .15s ease;
}
.lab-knapp:hover { background: var(--flate-ro); }
.lab-knapp svg { width: 1.3rem; height: 1.3rem; }
.lab-knapp[aria-expanded="true"] { background: var(--flate-ro); }

/* Menylinja fordeler med space-between. Uten dette havner knappen midt
   mellom logoen og menyen; margin-left: auto skyver den bort til menyen,
   så de to hører visuelt sammen. */
.topp-innhold .lab-knapp { margin-left: auto; margin-right: -.4rem; order: 2; }
.topp-innhold .meny { order: 3; }
.topp-innhold .meny-knapp { order: 4; }

.lab-panel {
  position: fixed;
  top: calc(var(--nav-hoyde) + .5rem);
  right: clamp(.75rem, 3vw, 2rem);
  z-index: 300;
  width: min(21rem, calc(100vw - 1.5rem));
  max-height: min(34rem, calc(100svh - var(--nav-hoyde) - 1.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1.25rem 1.35rem;
  background: var(--kort);
  color: var(--tekst);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgb(0 0 0 / .08), 0 18px 50px rgb(0 0 0 / .18);
  font-size: .95rem;
}
.lab-panel[hidden] { display: none; }

.lab-panel h2 {
  font-size: 1rem;
  margin: 0 0 .2rem;
}
.lab-panel .lab-hjelp {
  color: var(--tekst-svak);
  font-size: .85rem;
  line-height: 1.45;
  margin: 0 0 1rem;
}

.lab-bolk { margin-bottom: 1.15rem; }
.lab-bolk:last-of-type { margin-bottom: .5rem; }
.lab-bolk > h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-svak);
  margin: 0 0 .5rem;
}

/* Radioknapper som flate, trykkbare rader */
.lab-valg { display: grid; gap: .3rem; }

.lab-bolknote {
  margin: -.2rem 0 .6rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tekst-svak);
}

.lab-rad { display: flex; align-items: center; gap: .15rem; }
.lab-rad > label { flex: 1; min-width: 0; }

/* Sporsmalstegnet ved siden av hver effekt */
.lab-sporsmal {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tekst-svak);
  background: none;
  border: 1px solid var(--kant-knapp);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lab-sporsmal:hover { background: var(--flate-ro); color: var(--tekst); }
.lab-sporsmal[aria-expanded="true"] {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--paa-aksent);
}

.lab-forklaring {
  margin: .1rem 0 .55rem 2.3rem;
  padding: .55rem .8rem;
  border-left: 3px solid var(--dekor);
  background: var(--flate-ro);
  border-radius: 0 8px 8px 0;
  font-size: .82rem;
  line-height: 1.5;
}
.lab-forklaring[hidden] { display: none; }
.lab-forklaring p { margin: 0 0 .45rem; }
.lab-forklaring p:last-child { margin-bottom: 0; }
.lab-forklaring strong { color: var(--tekst); }

.lab-valg label {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.5rem;
  padding: .35rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
}
.lab-valg label:hover { background: var(--flate-ro); }
.lab-valg input { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--aksent); }
.lab-valg .lab-navn { flex: 1; min-width: 0; }
.lab-valg .lab-bitte,
.lab-farge-navn .lab-bitte { display: block; font-size: .8rem; color: var(--tekst-svak); }

/* Fargeprøver i palettvelgeren */
.lab-prover { display: flex; gap: 2px; flex-shrink: 0; }
.lab-prove {
  width: .85rem;
  height: 1.5rem;
  border-radius: 2px;
  border: 1px solid rgb(0 0 0 / .12);
}

/* --- Egne farger ---------------------------------------------------------
   Fargevelgeren er nettleserens egen <input type="color">. Den er
   klikkbar, tastaturvennlig og fungerer pa berøring uten at noe må
   bygges fra bunnen. */

.lab-egen[hidden] { display: none; }

.lab-farge {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .2rem .25rem;
  border-radius: 8px;
  cursor: pointer;
}
.lab-farge:hover { background: var(--flate-ro); }

.lab-farge input[type="color"] {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: none;
  border: 1px solid var(--kant-knapp);
  border-radius: 8px;
  cursor: pointer;
}
.lab-farge input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.lab-farge input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.lab-farge input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

.lab-farge-navn { flex: 1; min-width: 0; line-height: 1.3; }
.lab-farge-navn .lab-bitte { line-height: 1.35; margin-top: .05rem; }

.lab-farge-kode {
  flex-shrink: 0;
  font-family: Consolas, "SF Mono", monospace;
  font-size: .78rem;
  color: var(--tekst-svak);
  letter-spacing: -.01em;
}

/* Lopende kontrastmaling. Den som velger farger fritt treffer AA ved et
   uhell, ikke ved design, sa panelet ma si fra med en gang - og med tall,
   ikke bare en advarsel. */
.lab-kontrast {
  margin: .8rem 0 0;
  padding: .7rem .9rem;
  border-radius: 10px;
  border-left: 4px solid;
  font-size: .82rem;
  line-height: 1.5;
}
.lab-kontrast-ok {
  background: var(--flate-ro);
  border-left-color: var(--primaer);
}
.lab-kontrast-feil {
  background: var(--feil-flate);
  border-left-color: var(--feil);
  color: #33302d;
}
.lab-kontrast-topp { margin: 0; font-weight: 600; }
.lab-kontrast ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.lab-kontrast li { margin-bottom: .2rem; }
.lab-kontrast .lab-bitte { margin: .35rem 0 0; }

.lab-egen-bunn {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}
.lab-egen-bunn button {
  font: inherit;
  font-size: .875rem;
  padding: .45rem .9rem;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--kant-knapp);
  background: none;
  color: var(--tekst);
  cursor: pointer;
}
.lab-egen-bunn button:hover { background: var(--flate-ro); }

.lab-css-felt {
  width: 100%;
  margin-top: .7rem;
  padding: .6rem .7rem;
  font-family: Consolas, "SF Mono", monospace;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--tekst);
  background: var(--flate-ro);
  border: 1px solid var(--kant);
  border-radius: 8px;
  resize: vertical;
}

.lab-bunn {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--kant);
}
.lab-bunn button {
  font: inherit;
  font-size: .875rem;
  padding: .45rem .9rem;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--kant-knapp);
  background: none;
  color: var(--tekst);
  cursor: pointer;
}
.lab-bunn button:hover { background: var(--flate-ro); }
.lab-kvittering {
  flex-basis: 100%;
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--tekst-svak);
  min-height: 1.2em;
}

/* Med labbens knapp er det tre ting i menylinja i stedet for to, og pa
   375 px blir det for mye: Meny-knappen ble dyttet ut av skjermen. Da ryker
   ordmerket ved siden av logoen - logoen alene er fortsatt hjemknapp, og
   dette gjelder bare mens labben er pa. */
@media (max-width: 30rem) {
  .lab-pa .logo-navn { display: none; }
  .lab-pa .topp-innhold { gap: .6rem; }
  .lab-pa .lab-knapp { margin-right: 0; }
}

@media (max-width: 34rem) {
  /* På telefon legger panelet seg nederst, der tommelen er. */
  .lab-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 72svh;
    border-radius: var(--radius-stor) var(--radius-stor) 0 0;
    border-bottom: 0;
  }
  .lab-valg label { min-height: 2.75rem; }
  .lab-sporsmal { width: 2.75rem; height: 2.75rem; }
  .lab-farge { min-height: 3.1rem; }
  .lab-farge input[type="color"] { width: 2.75rem; height: 2.75rem; }
  .lab-forklaring { margin-left: 0; font-size: .85rem; }
}


/* ==========================================================================
   7. REDUSERT BEVEGELSE
   Slår av alt som beveger seg. Fargebytte og svart/hvitt er ikke bevegelse
   og får stå.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root[data-fx-inntoning] .lab-tone {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  :root[data-fx-parallax] .lab-parallax { transform: none !important; }
  :root[data-fx-hover] .omrade-kort:hover,
  :root[data-fx-hover] .profil:hover,
  :root[data-fx-hover] .kontaktkort:hover,
  :root[data-fx-hover] .knapp:hover { transform: none !important; }
  :root[data-fx-hover] .omrade-kort:hover .ikon { transform: none !important; }
  :root[data-fx-apenseksjon] .omrade.lab-nettopp-apnet { animation: none !important; }
  :root[data-fx-krympetopp] .topp.lab-rullet .topp-innhold,
  :root[data-fx-krympetopp] .topp.lab-rullet .logo img { transition: none !important; }
  :root.lab-bytter,
  :root.lab-bytter *,
  :root.lab-bytter *::before,
  :root.lab-bytter *::after { transition: none !important; }
  :root[data-fx-bildeinn] img { transition: none !important; opacity: 1 !important; }
}