.ps-topp {
  --flate: var(--kalk);
  padding: calc(var(--meny-h) + clamp(1.75rem, 4vw, 3.25rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--flate);
}
.ps-hode { display: grid; gap: 1.25rem; }
.ps-hode h1 {
  font-size: var(--str-h2); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.04; text-wrap: balance;
}
.ps-hint { margin-top: 0.9rem; font-size: 0.95rem; color: var(--tekst-dempet); }
@media (min-width: 900px) {
  .ps-hode { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; column-gap: clamp(2rem, 4vw, 4rem); }
}
.ps-oversikt {
  display: grid; gap: 1.5rem 3rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--linje);
}
@media (min-width: 768px) { .ps-oversikt { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.ps-oversikt .merke { margin-bottom: 0.8rem; color: var(--bla-tekst); }
.ps-oversikt ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ps-oversikt a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem;
  border: 1px solid var(--linje-sterk); border-radius: 999px; font-size: 0.95rem; text-decoration: none;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt), border-color 0.25s var(--mykt);
}
.ps-oversikt a:hover { background: var(--natt); color: var(--tekst-lys); border-color: var(--natt); }


.ps-bygget { --flate: var(--natt); color: var(--tekst-lys); --fokus: var(--bla-lys); }
.ps-bygget .merke-linje { color: var(--bla-lys); }
.ps-tegnet { --flate: var(--sand); }
.ps-galleri { --flate: var(--kalk); }
.ps-kontakt { --flate: var(--dis); }
.ps-seksjon-topp { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ps-seksjon-topp .seksjon-tittel { max-width: 16em; }


.pp { scroll-margin-top: calc(var(--meny-h) + 1rem); }
.pp + .pp { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--linje); }
.ps-bygget .pp + .pp { border-top-color: var(--linje-lys); }
.pp-topp { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) {
  .pp-topp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
  
  .pp-snudd .pp-topp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .pp-snudd .pp-tekst { order: 2; }
}
.pp-nr { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; color: var(--bla-tekst); font-variant-numeric: tabular-nums; }
.ps-bygget .pp-nr { color: var(--bla-lys); }
.pp-tekst h2, .pp-tekst h3 {
  margin-top: 0.4rem; font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem); font-weight: var(--vekt-tittel);
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
.pp-fakta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pp-fakta li { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--kalk); font-size: 0.85rem; font-weight: 500; }
.ps-galleri .pp-fakta li, .ps-flere .pp-fakta li { background: var(--hvit); }
.ps-bygget .pp-fakta li { background: var(--natt-3); color: var(--tekst-lys); }
.pp-brod { margin-top: 1.1rem; max-width: 34rem; color: var(--tekst-dempet); }
.ps-bygget .pp-brod { color: var(--tekst-lys-dempet); }


.pp-bilde { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--kalk); cursor: zoom-in; }
.ps-bygget .pp-bilde { background: var(--natt-3); }
.pp-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--bilde-y, 50%); }
.pp-bilde.tegning { background: var(--hvit); }
.pp-bilde.tegning img { object-fit: contain; padding: 0.5rem; }
.pp-bilde:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.pp-hoved { margin: 0; }
.pp-hoved .pp-bilde { width: 100%; aspect-ratio: 3 / 2; }
figure figcaption { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.45; color: var(--tekst-dempet); }
.ps-bygget figure figcaption { color: var(--tekst-lys-dempet); }


.pp-steg { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pp-steg figure { margin: 0; }
.pp-steg .pp-bilde { width: 100%; aspect-ratio: 4 / 3; max-height: 16rem; }
@media (min-width: 900px) {
  .pp-steg { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.25rem; }
  
  .pp-steg .pp-bilde { max-height: calc(64rem / var(--n, 4)); }
}
@media (max-width: 899px) {
  
  .pp-steg > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ps-galleri-rad { margin-top: 0; }
.ps-galleri-rad .pp-bilde { max-height: 22rem; }
@media (max-width: 599px) {
  .ps-galleri-rad { grid-template-columns: minmax(0, 1fr); }
}


.bildevegg { columns: 4 9rem; column-gap: clamp(0.75rem, 1.5vw, 1.1rem); }   
.bildevegg li { break-inside: avoid; margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem); }
.bildevegg figure { margin: 0; }
.bildevegg .pp-bilde img { height: auto; }
.ps-flere .pp-bilde img, .ps-ute .pp-bilde img { aspect-ratio: 4 / 3; }


.ps-kontakt-rad { display: grid; gap: 1.5rem; align-items: end; }
.ps-kontakt-rad .ingress { margin-top: 1rem; }
.ps-kontakt-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) { .ps-kontakt-rad { grid-template-columns: minmax(0, 1.3fr) auto; column-gap: 4rem; } }


html:has(.lysboks[open]) { overflow: hidden; }
.lysboks {
  width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: clamp(3.75rem, 7vw, 4.5rem) clamp(0.75rem, 6vw, 5.5rem) 1.5rem;
  border: 0; background: transparent; color: var(--tekst-lys);
  touch-action: pan-y pinch-zoom;   
}
.lysboks::backdrop { background: var(--lysboks); }
.lysboks[open] { display: grid; place-items: center; }
.lysboks-figur { margin: 0; display: grid; gap: 0.85rem; justify-items: center; max-width: 100%; }
.lysboks-figur img.laster { opacity: 0; }   
.lysboks-figur img {
  display: block; max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto;
  border-radius: var(--radius); background: var(--hvit);
}
.lysboks-figur figcaption { margin: 0; max-width: 46rem; text-align: center; font-size: 1rem; color: var(--tekst-lys); }
.lysboks-teller { position: fixed; top: 1.6rem; left: clamp(1rem, 3vw, 1.75rem); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--tekst-lys-dempet); font-variant-numeric: tabular-nums; }
.lb-knapp {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linje-lys); background: var(--slor); color: var(--tekst-lys); cursor: pointer;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt);
}
.lb-knapp:hover { background: var(--tekst-lys); color: var(--natt); }
.lb-knapp:focus-visible { outline: 2px solid var(--bla-lys); outline-offset: 3px; }
.lb-knapp svg { width: 22px; height: 22px; }
.lysboks-lukk { top: 1rem; right: clamp(0.75rem, 3vw, 1.5rem); }
.lysboks-forrige, .lysboks-neste { top: 50%; margin-top: -24px; }
.lysboks-forrige { left: clamp(0.5rem, 2vw, 1.5rem); }
.lysboks-neste { right: clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 599px) {
  
  .lysboks-forrige, .lysboks-neste { top: auto; bottom: 1rem; margin-top: 0; }
  .lysboks-forrige { left: calc(50% - 60px); }
  .lysboks-neste { right: calc(50% - 60px); }
  .lysboks { padding-bottom: 5rem; }
  .lysboks-figur img { max-height: calc(100svh - 12rem); }
}
.lysboks.en .lysboks-forrige, .lysboks.en .lysboks-neste, .lysboks.en .lysboks-teller { display: none; }