/* ================================================================
   ET Bygg AS
   Forsiden er en tro videreføring av dagens nettsted: sort topp,
   gule fullbreddebånd med sort Arial Black, gule fliser, sort
   kontaktflate med gul overskrift, sort bunn med gul strek.
   Det eneste som er nytt er hvordan boliger til salgs presenteres.
   ================================================================ */

@font-face { font-family: 'ArchivoR'; src: url('../fonts/archivo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --gul: #fff212;
  --sort: #000;
  --tekst: #212121;
  --stein: #6a6863;
  --linje: #d8d6d1;
  --linje-lys: rgba(255,255,255,.25);
  --lys: #f7f7f7;

  /* Dagens nettsted bruker Arial og Arial Black. Det videreføres. */
  --brod: Arial, Helvetica, sans-serif;
  --overskrift: 'Arial Black', 'ArchivoR', Arial, sans-serif;

  --bredde: 1240px;
  --marg: 20px;
}
@media (min-width: 760px)  { :root { --marg: 32px; } }
@media (min-width: 1100px) { :root { --marg: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--tekst);
  font-family: var(--brod); font-size: 19px; line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { font-family: var(--overskrift); font-weight: 900; margin: 0; line-height: 1.16; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--gul); color: #000; }

:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; box-shadow: 0 0 0 6px #000; }
.pa-sort :focus-visible { box-shadow: 0 0 0 6px #fff; }
.pa-gul :focus-visible { outline-color: #000; box-shadow: none; outline-offset: 3px; }

.hopp { position: absolute; left: -9999px; background: var(--gul); color: #000; padding: 12px 20px; font-weight: bold; z-index: 300; }
.hopp:focus { left: 8px; top: 8px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.beholder { width: 100%; max-width: var(--bredde); margin-inline: auto; padding-inline: var(--marg); }
.seksjon { padding-block: 52px; }
.seksjon--sort { background: #000; color: #fff; }
.seksjon--lys { background: var(--lys); }
.tall { font-variant-numeric: tabular-nums; }
.meta { font-size: 15px; color: var(--stein); }

/* ---------------------------------------------------------------- Toppfelt */
/* Toppfeltet ligger fast og dekker de oeverste 96 pikslene. Uten dette
   lander «Hopp til innhold» med begynnelsen av innholdet bak headeren —
   maalt: maalet startet paa 0, headeren sluttet paa 96. Det rammer
   nettopp dem hoppelenka er der for. Verdien er hoyden paa feltet.
   scroll-padding gjelder alle hopp i dokumentet, ogsaa nettleserens
   egne, saa den hoerer hjemme paa rota og ikke paa det enkelte maalet. */
html { scroll-padding-top: 96px; }

.topp { background: #000; color: #fff; position: sticky; top: 0; z-index: 100; }
.topp__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 90px; }
.topp__logo img { height: 66px; width: auto; }
@media (max-width: 559px) { .topp__logo img { height: 42px; } }
.topp__nav { display: none; }
@media (min-width: 1080px) { .topp__nav { display: flex; align-items: center; gap: 26px; } }
.topp__nav a { text-decoration: none; font-size: 19px; padding: 33px 0; position: relative; white-space: nowrap; }
.topp__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 26px; height: 2px; background: var(--gul); transition: right 160ms ease; }
.topp__nav a:hover::after { right: 0; }
.topp__nav a[aria-current="page"] { color: var(--gul); }
.topp__nav a[aria-current="page"]::after { right: 0; }
.topp__meny { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid rgba(255,255,255,.5); color: inherit; font-size: 16px; padding: 12px 16px; cursor: pointer; }
@media (min-width: 1080px) { .topp__meny { display: none; } }

/* «Prosjekter» er en gruppe med undersider. Pila viser at det finnes noe
   under; uten den er punktet ikke til å skille fra de andre. Selve lenka
   går fortsatt til oversikten. */
.topp__gruppe { position: relative; display: flex; align-items: center; gap: 4px; }
.topp__pil { background: none; border: 0; color: inherit; cursor: pointer; padding: 33px 2px; display: inline-flex; align-items: center; }
.topp__pil svg { transition: transform 160ms ease; }
.topp__gruppe:hover .topp__pil svg,
.topp__pil[aria-expanded="true"] svg { transform: rotate(180deg); }
.topp__pil:focus-visible { outline: 2px solid var(--gul); outline-offset: -6px; }

/* Undermenyen åpnes av CSS alene for peker og tastatur. Skriptet legger
   bare klikk og berøring til, så den virker uten JavaScript også. */
.topp__under { display: none; list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: -18px; min-width: 268px; background: #000; border-top: 2px solid var(--gul); z-index: 110; }
.topp__gruppe:hover .topp__under,
.topp__gruppe:focus-within .topp__under,
.topp__pil[aria-expanded="true"] + .topp__under { display: block; }
.topp__under a { display: block; padding: 11px 18px; font-size: 17px; white-space: nowrap; }
.topp__under a::after { content: none; }
.topp__under a:hover { background: #141414; color: var(--gul); }

/* Smal skjerm: «Meny» folder ut hele navigasjonen under toppfeltet, og
   undersidene ligger synlige med innrykk i stedet for bak en pil til. */
@media (max-width: 1079px) {
  .topp__nav[data-apen] { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: #000; border-top: 2px solid var(--gul); padding: 6px 0 14px; max-height: calc(100vh - 100%); overflow-y: auto; }
  .topp__nav[data-apen] a { padding: 13px var(--marg); font-size: 18px; }
  .topp__nav[data-apen] a::after { content: none; }
  .topp__nav[data-apen] .topp__gruppe { display: block; }
  .topp__nav[data-apen] .topp__pil { display: none; }
  .topp__nav[data-apen] .topp__under { display: block; position: static; border-top: 0; min-width: 0; padding: 0; }
  .topp__nav[data-apen] .topp__under a { padding-left: calc(var(--marg) + 20px); color: #d5d3ce; font-size: 17px; }
}

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; background: #000; }
.hero img { width: 100%; height: clamp(360px, 62vh, 640px); object-fit: cover; object-position: center 58%; }
.hero__merke {
  position: absolute; right: 5%; bottom: 5%;
  width: 248px; height: 248px; border-radius: 50%;
  background: var(--gul); color: #000; text-decoration: none;
  display: grid; place-content: center; text-align: center;
  padding: 24px; font-size: 18px; line-height: 1.5; z-index: 2;
}
.hero__merke b { font-family: var(--overskrift); font-weight: 900; display: block; margin-bottom: 6px; }
.hero__merke:hover { background: #000; color: var(--gul); }
@media (max-width: 899px) {
  .hero__merke { position: static; width: 100%; height: auto; border-radius: 0; padding: 22px; }
}

/* ---------------------------------------------------------------- Gult bånd */
.gulband { background: var(--gul); color: #000; text-align: center; }
.gulband__inner { padding-block: 46px; }
.gulband h1, .gulband h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; max-width: 34ch; margin-inline: auto; }
.gulband p { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; max-width: 52ch; margin: 18px auto 0; }
.gulband--hode .gulband__inner { padding-block: 26px; }
.gulband--hode h2 { font-size: clamp(24px, 2.7vw, 32px); max-width: none; }
/* Bånd med handling: overskrift til venstre, knapp til høyre */
.gulband--handling { text-align: left; }
.gulband--handling .gulband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 26px; }
.gulband--handling h2 { font-size: clamp(20px, 2.1vw, 26px); max-width: 30ch; margin: 0; }
.gulband--handling h2 small { display: block; font-family: var(--brod); font-size: 13px; font-weight: bold; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 7px; }
.gulband__tlf {
  display: inline-block; margin-top: 14px; text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 3px; text-decoration-skip-ink: none;
  font-family: var(--overskrift); font-weight: 900;
  font-size: clamp(23px, 2.8vw, 33px); font-variant-numeric: tabular-nums;
}
.gulband__tlf:hover { background: #000; color: var(--gul); }

/* ---------------------------------------------------------------- Gule fliser */
.fliser { display: grid; gap: 18px; }
@media (min-width: 760px) { .fliser { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.flis {
  background: var(--gul); color: #000; text-decoration: none;
  display: grid; place-content: center; text-align: center;
  min-height: 200px; padding: 30px 24px;
}
@media (min-width: 760px) { .flis { min-height: 260px; } }
.flis:hover { background: #000; color: var(--gul); }
.flis b { display: block; font-family: var(--overskrift); font-weight: 900; font-size: clamp(20px, 2vw, 26px); text-transform: uppercase; line-height: 1.1; }
.flis span { display: block; margin-top: 12px; font-size: 17px; }

/* ---------------------------------------------------------------- Tekstblokk */
.tekst { max-width: 990px; }
/* Annonseteksten fra FINN kan være sytti avsnitt lang. 990px gir rundt
   hundre tegn på linja — for mye å følge over den lengden. 68ch holder
   seg i det leselige, og følger skriftstørrelsen. */
.tekst--lang { max-width: 68ch; }

/* Resten av annonseteksten. <details> gjør jobben uten JavaScript, men
   ser ut som et glemt notat i standardform — her får den samme vekt som
   en knapp, så det er tydelig at det ligger mer bak. */
.mer { margin-top: 26px; border-top: 1px solid var(--linje); }
.mer summary { cursor: pointer; list-style: none; padding: 16px 0 4px; font-weight: bold; display: inline-flex; align-items: center; gap: 10px; }
.mer summary::-webkit-details-marker { display: none; }
.mer summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 160ms ease; }
.mer[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.mer summary:hover { color: var(--stein); }
.mer summary:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }
.mer summary span { font-weight: normal; color: var(--stein); }
.mer > p:first-of-type { margin-top: 18px; }
.tekst p { margin-bottom: 1.15em; }

/* ---------------------------------------------------------------- Mesterhus */
.mesterhus { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .mesterhus { grid-template-columns: 1fr 1fr; gap: 56px; } }
.mosaikk { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
.mosaikk img { width: 100%; height: 100%; object-fit: cover; }
.mosaikk > :nth-child(1) { aspect-ratio: 3/4; }
.mosaikk > :nth-child(2) { aspect-ratio: 3/2; }
.mosaikk > :nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2.6/1; }
.mesterhus h2 { font-size: clamp(25px, 2.6vw, 32px); margin-bottom: 16px; }

/* ---------------------------------------------------------------- Knapper */
.knapp {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-size: 17px; font-weight: bold; line-height: 1; text-decoration: none;
  padding: 17px 30px; border: 2px solid transparent; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
}
.knapp--sort { background: #000; color: #fff; border-color: #000; }
.knapp--sort:hover { background: var(--gul); color: #000; border-color: var(--gul); }
.knapp--gul { background: var(--gul); color: #000; border-color: var(--gul); text-transform: none; letter-spacing: 0; }
.knapp--gul:hover { background: #fff; border-color: #fff; }
.knapp--kant { background: transparent; color: #000; border-color: #000; text-transform: none; letter-spacing: 0; }
.knapp--kant:hover { background: #000; color: #fff; }
.knapp--lys { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); text-transform: none; letter-spacing: 0; }
.knapp--lys:hover { background: #fff; color: #000; border-color: #fff; }
.knapp--blokk { width: 100%; }

.plenke { display: inline-flex; align-items: center; gap: 9px; font-weight: bold; text-decoration: none; border-bottom: 3px solid var(--gul); padding-bottom: 3px; }
.plenke:hover { background: var(--gul); }

/* ================================================================
   BOLIGER TIL SALGS — den eneste delen som er nytegnet
   ================================================================ */
.boliger { display: grid; gap: 24px; }
@media (min-width: 700px)  { .boliger { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .boliger { grid-template-columns: repeat(3, 1fr); } }

.bkort { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.bkort__bilde { position: relative; aspect-ratio: 3/2; background: var(--linje); overflow: hidden; }
.bkort__bilde img { width: 100%; height: 100%; object-fit: cover; }
/* Overskrifta er h2 på til-salgs og h3 der kortene ligger under en h2.
   Klassen gjør stilen uavhengig av nivået — da nivået ble endret sluttet
   .bkort h3 å treffe, og hele kortet mistet lenka si uten at noe sa fra. */
.bkort__tittel { font-size: 21px; margin-top: 14px; }
.bkort__tittel a { text-decoration: none; }

/* Ett lenkeflak over hele kortet: bildet, prisen og dataene er klikkbare,
   men skjermlesere hører bare én lenke. */
.bkort__tittel a::after { content: ''; position: absolute; inset: 0; }

.bkort:hover .bkort__tittel a { text-decoration: underline; text-decoration-color: var(--gul); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* Bildet trekkes så vidt nærmere ved peking. Nok til å svare på musa,
   lite nok til at det ikke tar oppmerksomhet fra prisen. */
.bkort__bilde img { transition: transform 320ms ease; }
.bkort:hover .bkort__bilde img { transform: scale(1.045); }

/* Tastaturfokus skal ramme hele kortet, ikke bare overskriftsteksten. */
.bkort:has(a:focus-visible) { outline: 3px solid var(--gul); outline-offset: 4px; }
.bkort__tittel a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .bkort__bilde img { transition: none; }
  .bkort:hover .bkort__bilde img { transform: none; }
}
.bkort__sted { font-size: 15px; color: var(--stein); margin: 3px 0 0; }
.bkort__pris { font-family: var(--overskrift); font-weight: 900; font-size: 22px; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.bkort__data { font-size: 15px; color: var(--stein); margin: 5px 0 0; }

.status {
  position: absolute; left: 0; bottom: 0;
  font-size: 12px; font-weight: bold; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1; padding: 9px 12px; border: 1px solid transparent;
}
/* Fristilt merke, ikke plassert over et bilde */
.status--fri { position: static; display: inline-block; }
.status--salgs { background: var(--gul); color: #000; }
.status--kommer { background: #fff; color: #000; border-color: #000; }
.status--reservert { background: #fff; color: #000; border-color: var(--stein); }
.status--solgt { background: #000; color: #fff; }

/* ---------------------------------------------------------------- Kontakt */
.kontakt { display: grid; gap: 40px; }
@media (min-width: 940px) { .kontakt { grid-template-columns: 1fr 1fr; gap: 64px; } }
.kontakt h2 { color: var(--gul); font-size: clamp(30px, 3.6vw, 46px); }
.kontakt__tlf { font-family: var(--overskrift); font-weight: 900; font-size: clamp(26px, 3vw, 34px); text-decoration: none; display: inline-block; margin-top: 18px; font-variant-numeric: tabular-nums; }
.kontakt__tlf:hover { color: var(--gul); }
.kontakt dl { margin: 26px 0 0; border-top: 2px solid #fff; }
.kontakt dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--linje-lys); }
.kontakt dt { color: #a5a29c; font-size: 16px; }
.kontakt dd { margin: 0; text-align: right; }

.skjema { display: grid; gap: 16px; }
@media (min-width: 560px) { .skjema__rad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.felt { display: flex; flex-direction: column; gap: 6px; }
.felt label { font-size: 16px; font-weight: bold; color: var(--gul); }
.felt input, .felt select, .felt textarea { font: inherit; font-size: 16px; background: #fff; color: #000; border: 0; padding: 13px; width: 100%; }
.felt textarea { min-height: 110px; resize: vertical; }
.felt select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
.samtykke { display: flex; gap: 12px; align-items: start; font-size: 16px; }
.samtykke input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--gul); }
.samtykke a { color: var(--gul); }
.hjelp { font-size: 14px; color: #a5a29c; }

/* ---------------------------------------------------------------- Bunntekst */
.bunn { background: #000; color: #fff; padding-block: 54px 26px; font-size: 18px; }
.bunn__rutenett { display: grid; gap: 40px; }
@media (min-width: 860px) { .bunn__rutenett { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; } }
.bunn__om { text-align: center; }
.bunn__om img { height: 74px; width: auto; margin: 0 auto 18px; }
.bunn__om p { color: #d5d3ce; }
.bunn nav { border-left: 3px solid var(--gul); padding-left: 24px; }
.bunn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bunn a { text-decoration: none; }
.bunn a:hover { color: var(--gul); }
.bunn [aria-current="page"] { color: var(--gul); }
.bunn__under { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linje-lys); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; font-size: 14px; color: #a5a29c; }

/* Personvern og informasjonskapsler er lenker, ikke opplysninger. De
   skyves over til hoeyre sammen med «Logg inn», bort fra org.nr. og
   medlemskapet, og understrekes - blant rene spans er understreken det
   eneste som gjoer det tydelig at de gaar et sted. */
.bunn__vilkaar { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.bunn__vilkaar a { text-decoration: underline; text-underline-offset: 3px; }

/* Inngangen til backofficet. Følger vilkårslenkene ut til høyre, men
   holdes dus og uten understrek – den skal ikke konkurrere med noe annet
   i bunnen. Understrekes først ved peking, slik at den er tydelig når
   man først leter etter den. */
/* Inngangen til backofficet holdes med vilje under kontrastkravet: den
   skal være til å finne for dem som skal inn, ikke til å legge merke til
   ellers. 3,96:1 mot svart, der kravet er 4,5:1. Det er et bevisst valg,
   ikke en forglemmelse, og står som kjent avvik i tilgjengelighets-
   erklæringen. Ved peking og tastaturfokus løftes den godt over kravet. */
.bunn__admin { color: #6e6b66; text-decoration: none; font-size: 13px; }
.bunn__admin:hover, .bunn__admin:focus-visible { color: #d6d3cd; text-decoration: underline; }
@media (max-width: 640px) { .bunn__vilkaar { margin-left: 0; } }

/* ================================================================
   BOLIGDETALJSIDE — ny side, samme drakt
   ================================================================ */
.smuler { font-size: 15px; color: var(--stein); padding-block: 16px 0; }
.smuler ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.smuler a { text-decoration: none; }
.smuler a:hover { text-decoration: underline; }
.smuler li + li::before { content: '/'; margin-right: 7px; color: var(--linje); }

.bolig__hoved { position: relative; }
.bolig__hoved img { width: 100%; aspect-ratio: 3/2; object-fit: cover; max-height: 600px; }
.bolig__utvid { position: absolute; right: 14px; bottom: 14px; background: #000; color: #fff; border: 0; font-size: 15px; font-weight: bold; padding: 13px 18px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.bolig__utvid:hover { background: var(--gul); color: #000; }

.galleri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
@media (min-width: 700px) { .galleri { grid-template-columns: repeat(8, 1fr); } }
.galleri button { padding: 0; border: 0; background: var(--linje); cursor: pointer; position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; }
.galleri img { width: 100%; height: 100%; object-fit: cover; }
.galleri button:hover img { opacity: .82; }
.galleri__flere { position: absolute; inset: 0; background: rgba(0,0,0,.76); color: #fff; display: grid; place-items: center; font-weight: bold; font-size: 15px; }

.bolig__hode { display: grid; gap: 28px; align-items: start; }
@media (min-width: 940px) { .bolig__hode { grid-template-columns: 1.4fr 1fr; gap: 52px; } }
.bolig__hode h1 { font-size: clamp(28px, 3.4vw, 40px); }

.pris { background: #000; color: #fff; padding: 22px 26px; margin: 0; }
.pris > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--linje-lys); }
.pris > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.pris dt { font-size: 12px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; color: #a5a29c; }
.pris dd { margin: 0; font-family: var(--overskrift); font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.pris__total { border-top: 3px solid var(--gul) !important; margin-top: 6px; padding-top: 15px !important; }
.pris__total dt { color: var(--gul); }
.pris__total dd { font-size: clamp(25px, 2.8vw, 32px); }

.ntall { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 3px solid #000; }
@media (min-width: 720px) { .ntall--4 { grid-template-columns: repeat(4, 1fr); } .ntall--5 { grid-template-columns: repeat(5, 1fr); } }
.ntall > div { padding: 15px 18px 15px 0; border-bottom: 1px solid var(--linje); }
@media (min-width: 720px) { .ntall > div { border-bottom: 0; } }
.ntall dt { font-size: 12px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; color: var(--stein); margin-bottom: 5px; }
.ntall dd { margin: 0; font-family: var(--overskrift); font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }

.fakta { margin: 0; display: grid; border-top: 3px solid #000; }
@media (min-width: 760px) { .fakta { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } }
.fakta > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--linje); }
.fakta dt { color: var(--stein); font-size: 17px; }
.fakta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.liste-2 { columns: 2; column-gap: 44px; list-style: none; margin: 0; padding: 0; border-top: 3px solid #000; }
@media (max-width: 599px) { .liste-2 { columns: 1; } }
.liste-2 li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--linje); break-inside: avoid; position: relative; font-size: 17px; }
.liste-2 li::before { content: ''; position: absolute; left: 0; top: 21px; width: 11px; height: 3px; background: #000; }

.todelt { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .todelt { grid-template-columns: 1fr 1fr; gap: 60px; } }
.todelt--midt { align-items: center; }
.todelt h2 { font-size: clamp(23px, 2.4vw, 29px); margin-bottom: 14px; }
.prosjektbilde { aspect-ratio: 16/10; object-fit: cover; width: 100%; }

/* ---------------------------------------------------------------- Lightbox */
.lys { position: fixed; inset: 0; background: #000; z-index: 300; display: none; }
.lys.apen { display: grid; grid-template-rows: auto 1fr; }
.lys__topp { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #fff; }
.lys__teller { font-variant-numeric: tabular-nums; font-size: 15px; color: #a5a29c; }
.lys__lukk { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: bold; font-size: 15px; padding: 10px 16px; cursor: pointer; }
.lys__lukk:hover { background: var(--gul); color: #000; border-color: var(--gul); }
.lys__scene { position: relative; display: grid; place-items: center; padding: 0 8px 18px; min-height: 0; }
.lys__scene img { max-width: min(100%, 1400px); max-height: 100%; object-fit: contain; }
.lys__nav { position: absolute; top: 0; bottom: 0; width: 68px; background: none; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center; }
.lys__nav:hover { background: rgba(255,255,255,.1); }
.lys__nav--forrige { left: 0; } .lys__nav--neste { right: 0; }
.lys__nav svg { width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } }
@media print { .topp, .bunn, .lys, .bolig__utvid { display: none !important; } }

/* ================================================================
   Undersider — felles oppsett
   ================================================================ */
.sidehode { text-align: center; padding-block: 46px 30px; }
.sidehode h1 { font-size: clamp(27px, 3.2vw, 38px); max-width: 26ch; margin: 0 auto; }
.sidehode p { font-size: clamp(18px, 1.7vw, 22px); margin: 16px auto 0; max-width: 56ch; }

.kolonner { display: grid; gap: 40px; align-items: start; }
@media (min-width: 940px) { .kolonner { grid-template-columns: 1fr 1fr; gap: 56px; } }
.kolonner h2 { font-size: clamp(23px, 2.5vw, 30px); margin-bottom: 16px; }

.storbilde img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
/* Antall miniatyrer varierer per prosjekt, så kolonnetallet settes av
   markupen med --n. På smal skjerm brytes alt til fire uansett. */
.minibilder { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 8px; margin-top: 8px; }
.minibilder button { padding: 0; border: 0; background: var(--linje); cursor: pointer; display: block; aspect-ratio: 1/1; overflow: hidden; }
.minibilder img { width: 100%; height: 100%; object-fit: cover; }
.minibilder button:hover img { opacity: .82; }
.minibilder button:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.minibilder button[aria-pressed="true"] { outline: 3px solid var(--gul); outline-offset: -3px; }
.bildetekst { text-align: center; margin-top: 20px; }

.personkort { border-top: 3px solid #000; padding-top: 18px; margin-top: 34px; }
.personkort strong { display: block; font-family: var(--overskrift); font-weight: 900; font-size: 20px; margin-bottom: 4px; }
.personkort a { font-weight: bold; }

/* Prosjektoversikt */
.prosjekter { display: grid; gap: 24px; }
@media (min-width: 700px)  { .prosjekter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prosjekter { grid-template-columns: repeat(3, 1fr); } }
.pkort { position: relative; display: block; text-decoration: none; }
.pkort img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pkort h3 { font-size: 21px; margin-top: 14px; }
.pkort:hover h3 { text-decoration: underline; text-decoration-color: var(--gul); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pkort p { color: var(--stein); font-size: 16px; margin: 6px 0 0; }

/* ---------------------------------------------------------------- Karusell */
.karusell__spor { position: relative; }
.karusell__lysbilde { display: none; }
.karusell__lysbilde.aktiv { display: block; }
.karusell img { width: 100%; height: clamp(360px, 62vh, 640px); object-fit: cover; object-position: center 58%; }
.karusell__knapp {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer;
  display: grid; place-items: center; z-index: 3;
}
.karusell__knapp:hover { background: var(--gul); }
.karusell__forrige { left: 20px; }
.karusell__neste { right: 20px; }
@media (max-width: 899px) { .karusell__knapp { width: 44px; height: 44px; } .karusell__forrige { left: 10px; } .karusell__neste { right: 10px; } }
/* Prikkene er 12 px å se på, men knappen rundt er 24 — kravet til
   frittstående kontroller. Selve prikken tegnes som ::before, så den
   holder størrelsen mens treffeflaten vokser rundt den. Mellomrommet er
   trukket ned tilsvarende, ellers ville raden blitt bredere enn før. */
.karusell__prikker { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 0; z-index: 3; }
.karusell__prikk { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; }
.karusell__prikk::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-sizing: border-box; }
.karusell__prikk[aria-current="true"]::before { background: var(--gul); border-color: var(--gul); }
.karusell__prikk:focus-visible { outline: 3px solid var(--gul); outline-offset: -2px; border-radius: 50%; }

/* ================================================================
   Kontaktseksjon — som originalen: rop til venstre, skjema til høyre
   ================================================================ */
.kontakt__venstre { text-align: center; align-self: center; }
.kontakt__rop { color: var(--gul); font-family: var(--overskrift); font-weight: 900; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.12; margin: 0; }
/* Ropet er ogsaa et p-element, og ble tatt av denne regelen: to klasser
   mot én, saa 19px vant over sin egen skriftstoerrelse. Undertittelen er
   det eneste avsnittet som skal ha den. */
.kontakt__venstre p:not(.kontakt__rop) { margin: 14px 0 0; font-size: 19px; }

/* Kontaktside */
.kontaktinfo { text-align: center; max-width: 460px; }
.kontaktinfo > div { margin-bottom: 34px; }
.kontaktinfo strong { display: block; font-weight: bold; margin-bottom: 4px; }
.kontaktinfo p { margin: 0; }
.kontaktinfo a { text-decoration: underline; }

.rundtbilde { width: 100%; max-width: 344px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; margin-inline: auto; }
.rundtbilde img { width: 100%; height: 100%; object-fit: cover; }
.kartboks { width: 100%; aspect-ratio: 3/2; background: var(--lys); border: 1px solid var(--linje); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--stein); font-size: 16px; }

.videoboks { position: relative; max-width: 750px; margin: 0 auto; background: #000; }

.kart { width: 100%; aspect-ratio: 585/802; border: 0; display: block; }
@media (max-width: 939px) { .kart { aspect-ratio: 4/3; } }
.videoboks video { width: 100%; height: auto; display: block; background: #000; }

/* Fullbreddebanner på tjenestesidene */
.bannerbilde img { width: 100%; aspect-ratio: 1920/477; object-fit: cover; }
@media (max-width: 619px) { .bannerbilde img { aspect-ratio: 3/2; } }

/* Prosjektfliser med tekst over bildet */
.prosjektfliser { display: grid; gap: 20px; }
@media (min-width: 820px) { .prosjektfliser { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.pflis { position: relative; display: block; text-decoration: none; color: #fff; background: #000; }
.pflis img { width: 100%; aspect-ratio: 605/375; object-fit: cover; opacity: .82; }
.pflis:hover img { opacity: .62; }
.pflis__tekst { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; }
.pflis__navn { font-family: var(--overskrift); font-weight: 900; color: var(--gul); font-size: clamp(21px, 2.3vw, 29px); line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.pflis__om { margin: 12px 0 0; font-size: 17px; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.9); }

/* Enkeltbilde med lenke (Vingård) */
.enkeltbilde img { width: 100%; max-width: 494px; aspect-ratio: 494/329; object-fit: cover; }
@media (max-width: 700px) { .minibilder { grid-template-columns: repeat(4, 1fr); } }

/* ================================================================
   Samtykkebanner for informasjonskapsler
   ================================================================ */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #000; color: #fff; border-top: 4px solid var(--gul);
  max-height: 88vh; overflow-y: auto;
}
.cookie[hidden] { display: none; }
.cookie__inner { display: grid; gap: 20px; padding-block: 24px; }
@media (min-width: 960px) { .cookie__inner { grid-template-columns: 1fr auto; align-items: center; gap: 44px; } }
.cookie h2 { color: var(--gul); font-size: clamp(20px, 2vw, 25px); }
.cookie p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; max-width: 80ch; }
.cookie a { color: var(--gul); }
.cookie__valg { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie__valg .knapp { padding: 14px 22px; font-size: 16px; text-transform: none; letter-spacing: 0; }

.cookie__panel { padding-bottom: 26px; }
.cookie__panel[hidden] { display: none; }
.cookie__liste { margin: 0; border-top: 3px solid #fff; }
.cookie__rad { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: start; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--linje-lys); }
.cookie__rad div { flex: 1 1 320px; }
.cookie__rad strong { display: block; font-family: var(--overskrift); font-weight: 900; font-size: 17px; margin-bottom: 4px; }
.cookie__rad p { margin: 0; font-size: 15.5px; color: #c9c6c1; }
.cookie__bryter { display: flex; align-items: center; gap: 10px; flex: none; font-size: 15px; white-space: nowrap; }
.cookie__bryter input { width: 22px; height: 22px; accent-color: var(--gul); }
.cookie__bryter input:disabled + span { color: #a5a29c; }
.cookie__panel .knapp { margin-top: 22px; }


/* Tabell over informasjonskapsler */
.kapsler { margin: 0; border-top: 3px solid #000; }
.kapsler > div { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.kapsler dt { font-weight: bold; flex: 1 1 240px; }
.kapsler dd { margin: 0; flex: 2 1 380px; color: var(--stein); font-size: 17px; }

/* Plassholder for innebygd tredjepartsinnhold, vist til samtykke foreligger */
.innebygd { border: 2px solid #000; background: var(--lys); display: grid; place-content: center; align-content: center; text-align: center; gap: 14px; padding: 30px; aspect-ratio: 585/802; }
@media (max-width: 939px) { .innebygd { aspect-ratio: 4/3; } }
.innebygd h3 { font-size: 19px; }
.innebygd p { font-size: 15.5px; color: var(--stein); max-width: 38ch; margin: 0 auto; }
.innebygd__knapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.innebygd .knapp { font-size: 15px; padding: 13px 20px; }
.bunn__mesterhus { height: 46px; width: auto; margin: 20px auto 0; }

/* Vises når det ikke er noen boliger å liste */
.tomt { border: 3px solid #000; padding: 34px; max-width: 62ch; }
.tomt p { font-size: 19px; margin: 0; }

/* Fotografen krediteres under galleriet når bildene ikke er ET Byggs egne. */
.fotokreditt { max-width: 1100px; margin: 10px auto 0; padding: 0 20px; font-size: 13px; color: #6b6b6b; }

/* Stoppknapp for karusellen. WCAG 2.2.2 krever at innhold som skifter av
   seg selv kan stoppes; hover og fokus alene er ikke en tydelig nok måte. */
.karusell__pause { position: absolute; left: 50%; bottom: 22px; transform: translateX(calc(-50% - 84px)); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #000; cursor: pointer; }
.karusell__pause:hover { background: #fff; }
.karusell__pause:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }

/* ------------------------------------------------------ Sosiale medier

   Kortene er ikke identiske med boligkortene: et innlegg kan mangle
   bilde, og teksten er det viktigste. Derfor et eget rutenett, men med
   samme mål og samme gule understrek som resten av nettstedet. */

.folgerad { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.folgerad__knapp {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 22px; min-height: 48px;
  background: #000; color: #fff; text-decoration: none;
  font-weight: bold; letter-spacing: .2px;
  border: 2px solid #000; transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* Merkefargen er kanalens egen og settes per knapp. Den brukes ved
   peking, ikke i hvile — ellers ville radene med fire kanaler blitt en
   fargestripe som konkurrerer med det gule. */
.folgerad__knapp:hover { background: var(--merkefarge); border-color: var(--merkefarge); color: #fff; }
.folgerad__knapp:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }

.sirutenett { display: grid; gap: 24px; }
@media (min-width: 700px)  { .sirutenett { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sirutenett { grid-template-columns: repeat(3, 1fr); } }

.sikort { position: relative; display: flex; flex-direction: column; border: 2px solid var(--linje); background: #fff; }
.sikort__bilde { aspect-ratio: 4/3; overflow: hidden; background: var(--linje); }
.sikort__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms ease; }
.sikort__tekst { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sikort__kanal { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: bold; font-size: 15px; }
.sikort__dato { margin: 0; font-size: 14px; color: var(--stein); }
.sikort__brod { margin: 8px 0 0; font-size: 16.5px; line-height: 1.55; }

/* Et innlegg uten adresse skal ikke se klikkbart ut. Bare de lenkede
   kortene får flaket, hevingen og understreken. */
/* «Les mer» baerer flaket som gjoer hele kortet klikkbart. */
.sikort__mer { margin: 16px 0 0; padding-top: 4px; }
.sikort__mer .plenke { font-size: 16px; }
.sikort--lenket .sikort__mer a::after { content: ''; position: absolute; inset: 0; }
/* Teksten skyves opp saa «Les mer» staar i bunn av kortet, jevnt med de
   andre kortene i raden, uansett hvor lang teksten er. */
.sikort__brod { flex: 1; }
.sikort--lenket { transition: border-color 160ms ease; }
.sikort--lenket:hover { border-color: #000; }
.sikort--lenket:hover .sikort__bilde img { transform: scale(1.045); }
.sikort--lenket:has(a:focus-visible) { outline: 3px solid var(--gul); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sikort__bilde img { transition: none; }
  .sikort--lenket:hover .sikort__bilde img { transform: none; }
}

/* «Følg oss» i bunnteksten. Står som en tredje kolonne ved siden av
   bunnmenyen på brede skjermer, og legger seg under på smale. */
.bunn__folg { border-left: 3px solid var(--gul); padding-left: 24px; }
.bunn__folg h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: .4px; }
.bunn__folg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bunn__folg a { display: inline-flex; align-items: center; gap: 11px; min-height: 24px; }
/* .bunn a nuller understreken, og er mer spesifikk enn en enkel klasse.
   Derfor .bunn__folg foran — ellers stod lenka uten strek. */
.bunn__folg .bunn__innlegg { display: inline-block; margin-top: 18px; text-decoration: underline; text-underline-offset: 3px; font-size: 16px; }
@media (min-width: 860px) { .bunn__rutenett--folg { grid-template-columns: 1.3fr 1fr 1fr; } }