/* Renergi Infra: the front page's sections under the hero. The motion follows the scroll through --p and --pi
   (js/sider.js); every hidden start lives behind html.js-anim, so without it the page stands whole. Only transform and
   opacity move. */

/* ---------- who we are: the statement fills in word by word, the DSB registration beside it ---------- */
.intro-rad { display: grid; gap: 1.5rem 3rem; }
.intro-utsagn {
  font-size: clamp(1.75rem, 1.05rem + 2.2vw, 3.1rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.14; max-width: 24em; text-wrap: pretty;
}
html.js-anim .intro-utsagn .ord { opacity: clamp(0.16, calc(var(--pi, 0) * 1.4 * var(--n) - var(--i)), 1); }
.intro-under { display: grid; gap: 1.3rem; margin-top: 1.6rem; max-width: 40rem; }
.intro-tekst { font-size: var(--str-ingress); color: var(--tekst-dempet); }
.intro-under .lenke-pil { justify-self: start; }
.dsb-kort {
  position: relative; align-self: start; padding: 1.5rem 1.5rem 1.6rem; overflow: hidden;
  background: var(--hvit); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linje);
}
.dsb-kort::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--energi); }
.dsb-r { width: 34px; height: 34px; color: var(--rod-tekst); }
.dsb-kort h3 { margin-top: 0.8rem; font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.dsb-kort p { margin-top: 0.55rem; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-dempet); }
.dsb-liste { margin-top: 0.8rem; display: grid; gap: 0.4rem; font-size: var(--str-tekst); }
.dsb-liste li { position: relative; padding-left: 1.4em; }
.dsb-liste li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.75em; height: 2px; background: var(--energi); }
.dsb-kort .lenke-pil { margin-top: 1.2rem; font-size: 0.95rem; }
@media (min-width: 1024px) {
  .intro-rad { grid-template-columns: 10rem minmax(0, 1fr) 21rem; align-items: start; }
  .intro-rad > .merke { margin-top: 0.9rem; }
}
@media (max-width: 1023px) { .dsb-kort { max-width: 32rem; } }

/* ---------- the services: all five in one frame on a computer ---------- */
.tj-rutenett { display: grid; gap: 0.75rem; }
.tj {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 16rem; overflow: hidden;
  isolation: isolate; border-radius: var(--radius); background: var(--natt-2); color: var(--tekst-lys); text-decoration: none;
  box-shadow: 0 0 0 1px var(--linje-lys);
}
.tj-bilde { position: absolute; inset: 0; z-index: -1; transition: transform 0.8s var(--mykt); }
.tj-bilde img { width: 100%; height: 100%; object-fit: cover; }
html.js-anim .tj-bilde img { transform: scale(calc(1.14 - var(--pi, 1) * 0.14)); }
.tj:hover .tj-bilde { transform: scale(1.04); }
.tj-bilde::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 21, 28, 0.95), rgba(14, 21, 28, 0.62) 55%, rgba(14, 21, 28, 0.14));
  transition: opacity 0.5s var(--mykt);
}
.tj:hover .tj-bilde::after { opacity: 0.82; }
.tj-tekst { position: relative; display: grid; gap: 0.45rem; padding: 1.35rem 3.6rem 1.4rem 1.4rem; }
.tj h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; }
.tj-stor h3 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); font-weight: 300; }
.tj-kort { font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys-dempet); max-width: 28rem; }
.tj-pil { position: absolute; right: 1.2rem; bottom: 1.35rem; width: 22px; height: 22px; transition: transform 0.3s var(--mykt); }
.tj:hover .tj-pil { transform: translateX(4px); }
/* construction power: a tile in the logo's gradient with the prices on it */
.tj-pris {
  justify-content: flex-start; color: var(--natt); box-shadow: none; --fokus: var(--natt);
  background: linear-gradient(140deg, var(--gul), var(--oransje) 55%, var(--rod));
}
.tj-pris .tj-kort { color: var(--natt); }
.tj-merke { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; }
.tj-priser { display: grid; gap: 0.15rem; margin-top: 0.35rem; font-size: 0.95rem; }
.tj-priser strong { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.05rem); font-weight: 300; letter-spacing: -0.02em; margin-right: 0.2rem; }
/* street lighting: a drawn street lamp whose light comes on as it comes in */
.tj-veilys { background: radial-gradient(80% 55% at 30% 100%, rgba(242, 184, 65, 0.13), transparent 70%), var(--natt-2); }
.veilys { position: absolute; right: 7%; top: 8%; height: 54%; width: auto; overflow: visible; z-index: -1; }
.veilys path[data-strek] { fill: none; stroke: var(--strek); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
html.js-anim .veilys path[data-strek] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js-anim .veilys-kjegle { opacity: clamp(0, calc((var(--pi, 1) - 0.62) * 4), 1); }
@media (max-width: 699px) { .veilys { top: 6%; right: 5%; height: 42%; } }
/* in a low window the five services must still stand in one frame (Sverre 26.10.2026, Tid Bolig), so there the card
   text keeps its smaller size; accepted deviation from the 18 px body rule, logged in pass 1 */
@media (min-width: 700px) and (max-height: 760px) {
  .tj-kort { font-size: 0.98rem; line-height: 1.45; }
  /* the price tile and the street lamp, tighter, so all of the tile fits and the lamp keeps clear of the text */
  .tj-pris .tj-tekst { gap: 0.3rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .tj-priser strong { font-size: clamp(1.3rem, 0.95rem + 0.8vw, 1.6rem); }
  .veilys { top: 7%; right: 4%; height: 40%; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .tj-priser { font-size: 0.88rem; }
  .tj-pris .tj-merke { font-size: 0.7rem; }
}
@media (min-width: 700px) {
  .tj-rutenett { grid-template-columns: 1fr 1fr; }
  .tj-stor { grid-column: 1 / -1; min-height: 22rem; }
}
@media (min-width: 1024px) {
  .tj-rutenett { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, clamp(13.75rem, 31vh, 18rem)); }
  .tj-stor { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .tj { min-height: 0; }
}
/* 1024 to 1199 px the price tile is narrow, so the two rows are taller (still one frame in a 700 px window) */
@media (min-width: 1024px) and (max-width: 1199px) { .tj-rutenett { grid-template-rows: repeat(2, clamp(16.5rem, 31vh, 18rem)); } }

/* ---------- construction power ---------- */
.bs-rad { display: grid; gap: 2rem 4.5rem; align-items: center; }
.bs-foto { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; max-height: 40rem; }
.bs-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
html.js-anim .bs-foto img { transform: scale(calc(1.12 - var(--p, 0.5) * 0.14)); }
.bs-tekst .ingress { margin-top: 1.1rem; }
.bs-tilbud { margin: 1.6rem 0 0; font-size: 0.92rem; font-weight: 600; }
.bs-tilbud + .bs-priser { margin-top: 0.6rem; }
.bs-priser { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.8rem; }
.bs-priser > div { position: relative; overflow: hidden; padding: 1.1rem 1.2rem 1.2rem; background: var(--hvit); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linje); }
.bs-priser > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--energi); }
.bs-priser dt { font-size: 0.92rem; font-weight: 600; }
.bs-priser dd { margin: 0.3rem 0 0; color: var(--tekst-dempet); font-size: 0.92rem; }
.bs-tall { display: block; color: var(--tekst); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.bs-fakta { margin-top: 1.4rem; display: grid; gap: 0.45rem; }
.bs-fakta li { position: relative; padding-left: 1.6em; }
.bs-fakta li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.9em; height: 2px; background: var(--energi); }
.knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bs-tekst .knapper { margin-top: 1.8rem; }
@media (min-width: 1024px) { .bs-rad { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .bs-foto { aspect-ratio: 5 / 6; } }

/* the order as steps: the power line runs along them and lights each one as it reaches it */
.bs-steg { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); position: relative; }
.steg-tittel { font-size: var(--str-h3); font-weight: 500; }
.steg-linje { position: relative; height: 2px; margin-top: 2rem; background: var(--linje-sterk); }
.steg-linje span { position: absolute; inset: 0; background: var(--energi); transform-origin: left center; transform: scaleX(var(--fyll, 1)); }
.steg-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.steg-liste li { position: relative; padding-top: 1.7rem; }
.steg-prikk {
  position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--stein); border: 2px solid var(--linje-sterk); transition: background-color 0.35s var(--mykt), border-color 0.35s var(--mykt), box-shadow 0.35s var(--mykt);
}
.steg-liste li.tent .steg-prikk { background: var(--rod); border-color: var(--rod); box-shadow: 0 0 0 5px rgba(232, 67, 81, 0.16), 0 0 16px rgba(237, 128, 73, 0.65); }
.steg-liste h4 { font-size: 1.15rem; font-weight: 600; }
.steg-liste p { margin-top: 0.45rem; color: var(--tekst-dempet); font-size: var(--str-tekst); line-height: 1.5; }
html.js-anim .steg-liste li { opacity: 0.55; transition: opacity 0.45s var(--mykt); }
html.js-anim .steg-liste li.tent { opacity: 1; }
@media (max-width: 899px) {
  .steg-linje { position: absolute; left: 6px; top: 4.6rem; bottom: 0.5rem; width: 2px; height: auto; margin: 0; }
  .steg-linje span { transform-origin: center top; transform: scaleY(var(--fyll, 1)); }
  .steg-liste { grid-template-columns: 1fr; gap: 1.7rem; margin-top: 1.6rem; padding-left: 2.3rem; }
  .steg-liste li { padding-top: 0; }
  .steg-prikk { left: -2.3rem; top: 0.3rem; }
}

/* ---------- projects: each card stays while the next slides over it ---------- */
.kortstabel { display: grid; gap: 1.25rem; }
.pr-kort {
  position: relative; display: grid; overflow: hidden;
  border-radius: var(--radius); background: var(--natt-3); box-shadow: 0 -14px 40px -14px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 0;
}
/* each card stays while the next slides over it only where a card fits the window; on a phone held sideways the cards
   just scroll, so every title and caption can be read */
@media (min-height: 560px) {
  .pr-kort { position: sticky; top: calc(var(--meny-h) + 1.25rem); }
  .pr-kort:nth-child(2) { top: calc(var(--meny-h) + 2rem); }
  .pr-kort:nth-child(3) { top: calc(var(--meny-h) + 2.75rem); }
  .pr-kort:nth-child(4) { top: calc(var(--meny-h) + 3.5rem); }
}
html.js-anim .pr-kort { transform: scale(calc(1 - var(--dekk, 0) * 0.05)); }
.pr-kort::after { content: ""; position: absolute; inset: 0; background: var(--natt); opacity: 0; pointer-events: none; }
html.js-anim .pr-kort::after { opacity: calc(var(--dekk, 0) * 0.6); }
.pr-bilde { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.pr-bilde img { width: 100%; height: 100%; object-fit: cover; }
.pr-tekst { display: grid; gap: 0.6rem; align-content: end; padding: 1.4rem 1.5rem 1.7rem; }
.pr-merke {
  display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--str-merke); font-weight: var(--vekt-merke);
  letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--tekst-lys);
}
.pr-merke::before { content: ""; width: 1.4rem; height: 2px; background: var(--energi); }
.pr-kort h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--tekst-lys); }
.pr-kort p:not(.pr-merke) { color: var(--tekst-lys-dempet); max-width: 26rem; }
.pr-alle { margin-top: 2.2rem; color: var(--tekst-lys); }
@media (min-width: 900px) {
  .pr-kort { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); height: min(66vh, 34rem); }
  .pr-bilde { aspect-ratio: auto; height: 100%; }
  .pr-tekst { padding: 2.2rem 2.2rem 2.4rem; }
}

/* ---------- where: the real map with the lines from Lierstranda ---------- */
.omrade-rad { display: grid; gap: 2.2rem 4.5rem; align-items: center; }
.omrade-tekst .ingress { margin-top: 1.1rem; }
.omrade-liste { margin-top: 1.6rem; display: grid; gap: 0.55rem; font-weight: 500; }
.omrade-liste li { display: flex; align-items: center; gap: 0.75rem; }
.omrade-prikk { width: 10px; height: 10px; border-radius: 50%; background: var(--oransje); box-shadow: 0 0 0 4px rgba(237, 128, 73, 0.2); flex: none; }
@media (min-width: 1024px) { .omrade-rad { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* ---------- owned by the employees, and sustainability ---------- */
.eierskap-rad { display: grid; gap: 2.5rem 5rem; }
.eierskap-tekst .ingress { margin-top: 1.1rem; }
.baerekraft-tittel { margin-top: 2.6rem; font-size: var(--str-h3); font-weight: 500; color: var(--tekst-lys); }
.baerekraft { margin-top: 1.1rem; display: grid; }
.baerekraft li { position: relative; padding: 1.05rem 0 1.1rem 2.3rem; border-top: 1px solid var(--linje-lys); }
.baerekraft li::before { content: ""; position: absolute; left: 0; top: 1.62rem; width: 1.35rem; height: 2px; background: var(--energi); }
.baerekraft h3, .baerekraft h4 { font-size: 1.1rem; font-weight: 600; color: var(--tekst-lys); }
.baerekraft p { margin-top: 0.3rem; color: var(--tekst-lys-dempet); }
.eierskap-foto { align-self: start; }
.eierskap-foto > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
html.js-anim .eierskap-foto > img { transform: translateY(calc((0.5 - var(--p, 0.5)) * 6%)); }
.eierskap-foto figcaption { margin-top: 0.8rem; font-size: 0.92rem; color: var(--tekst-lys-dempet); }
@media (min-width: 1024px) {
  .eierskap-rad { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .eierskap-foto { position: sticky; top: calc(var(--meny-h) + 2rem); }
}

/* ---------- careers: the band in the logo's gradient; the words glide with the scroll ---------- */
.karriere-band {
  position: relative; overflow: hidden; color: var(--natt); --fokus: var(--natt);
  background: linear-gradient(115deg, var(--gul), var(--oransje) 52%, var(--rod));
  padding: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem) var(--marg) var(--seksjon-luft);
}
.ka-loper {
  white-space: nowrap; font-size: clamp(3rem, 1.6rem + 6.5vw, 8rem); font-weight: 300; letter-spacing: -0.045em; line-height: 1;
  margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.8rem); opacity: 0.92;
}
.ka-loper span { display: inline-block; }
html.js-anim .ka-loper span { transform: translateX(calc(var(--p, 0.5) * -38%)); }
.ka-rad { display: grid; gap: 2rem 4.5rem; align-items: center; }
.ka-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ka-tekst > p:not(.merke) { margin-top: 1.1rem; font-size: var(--str-ingress); line-height: 1.55; max-width: 34rem; }
.ka-tekst .knapper { margin-top: 1.8rem; }
.karriere-band .knapp-omriss { color: var(--natt); border-color: rgba(14, 21, 28, 0.55); }
.karriere-band .knapp-omriss:hover { background: var(--natt); color: var(--tekst-lys); border-color: var(--natt); }
@media (min-width: 900px) { .ka-rad { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }

/* ---------- contact ---------- */
.kontakt-rad { display: grid; gap: 3rem 5rem; }
.kontakt-info .ingress { margin-top: 1rem; }
.personer { margin-top: 2rem; display: grid; gap: 0.9rem; }
.person {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 0.85rem;
  background: var(--hvit); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linje);
}
.person img { width: 6.5rem; height: 8rem; object-fit: cover; border-radius: var(--radius); }
.person h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.person-rolle { color: var(--tekst-dempet); font-size: 0.95rem; }
.person-linjer { margin-top: 0.5rem; display: grid; gap: 0.1rem; }
.person-linjer a { font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.person-linjer a:hover { text-decoration: underline; }
.kontakt-linjer { margin-top: 1.8rem; display: grid; gap: 0.55rem; }
.kontakt-linjer > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.kontakt-linjer dt { font-weight: 600; }
.kontakt-linjer dd { margin: 0; overflow-wrap: anywhere; }
.kontakt-skjema { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); background: var(--hvit); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linje); }
.kontakt-skjema .felt input, .kontakt-skjema .felt select, .kontakt-skjema .felt textarea, .kontakt-skjema .valg label, .kontakt-skjema .bilder-knapp { background: var(--kalk); }
.skjema-tittel { font-size: var(--str-h3); font-weight: 500; }
@media (min-width: 1024px) { .kontakt-rad { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; } }

/* the map: Kartverket's map in evening tones. The real roads go out from Lierstranda to each town while the camera pulls
   back from Lierstranda to the whole area (sider.js, [data-kart] sets --kz); each town lights up, with its line in the list,
   as its road arrives, and after that a light runs out along each road now and then */
.kart { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: #15171a; box-shadow: 0 30px 60px -32px var(--skygge); container-type: inline-size; }
html.js-anim .kart { --kz: 1.18; }
.kart-flate { position: relative; transform: scale(var(--kz, 1)); transform-origin: var(--kx, 50%) var(--ky, 50%); }
.kart-flate > img { width: 100%; }
.kart-lag { position: absolute; inset: 0; width: 100%; height: 100%; }
.kart-rute { fill: none; stroke: var(--oransje); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(237, 128, 73, 0.75)); }
/* while the roads go out, the stroke is in the map's own units (sider.js sets --kart-strek to 3 screen pixels): Chrome lays
   a non-scaling stroke's dashes in screen pixels, so the road ran ahead of the light at its head */
html.js-anim .kart-rute { vector-effect: none; stroke-width: var(--kart-strek, 6px); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.kart-gnist, .kart-strom-lys { fill: url(#kart-glod); }
.kart-gnist { opacity: 0; }
.kart-strom { opacity: 0; transition: opacity 0.8s var(--mykt); }
.kart-strom.pa { opacity: 1; }
/* the names keep their size while the camera moves */
.kart-sted {
  position: absolute; display: flex; align-items: center; gap: 0.45rem; pointer-events: none;
  transform: translate(-7px, -50%) scale(calc(1 / var(--kz, 1))); transform-origin: 7px 50%;
  color: var(--tekst-lys); font-size: clamp(0.74rem, 0.62rem + 0.4vw, 0.98rem); font-weight: 600; letter-spacing: 0.01em;
}
.kart-sted.venstre { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%) scale(calc(1 / var(--kz, 1))); transform-origin: calc(100% - 7px) 50%; }
.kart-prikk { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--gul); box-shadow: 0 0 0 4px rgba(242, 184, 65, 0.25); flex: none; }
.kart-navn { white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.6); }
/* a town comes in as its road arrives: the name glides out from the dot, and the dot sends out one ring */
html.js-anim .kart-sted:not(.kart-hjem) { opacity: 0; transition: opacity 0.5s var(--mykt); }
html.js-anim .kart-sted:not(.kart-hjem) .kart-navn { transform: translateX(-0.45rem); transition: transform 0.6s var(--mykt); }
html.js-anim .kart-sted.venstre .kart-navn { transform: translateX(0.45rem); }
html.js-anim .kart-sted.tent { opacity: 1; }
html.js-anim .kart-sted.tent .kart-navn { transform: none; }
.kart-sted:not(.kart-hjem) .kart-prikk::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gul); opacity: 0; }
html.js-anim .kart-sted.tent .kart-prikk::after { animation: kart-fram 1.2s var(--mykt); }
@keyframes kart-fram { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
/* the list beside the map: a town's dot fills and its name comes up to full strength as its road arrives */
html.js-anim .omrade-liste li { color: var(--tekst-dempet); transition: color 0.5s var(--mykt); }
html.js-anim .omrade-liste .omrade-prikk { background: transparent; box-shadow: inset 0 0 0 2px var(--oransje); transition: background-color 0.5s var(--mykt), box-shadow 0.5s var(--mykt); }
html.js-anim .omrade-liste li.tent { color: inherit; }
html.js-anim .omrade-liste li.tent .omrade-prikk { background: var(--oransje); box-shadow: 0 0 0 4px rgba(237, 128, 73, 0.2); }
.kart-hjem { font-size: clamp(0.8rem, 0.66rem + 0.45vw, 1.05rem); }
.kart-hjem .kart-prikk { width: 16px; height: 16px; background: var(--rod); box-shadow: none; }
.kart-hjem .kart-prikk::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--rod); animation: kart-puls 2.4s var(--mykt) infinite; }
@keyframes kart-puls { from { transform: scale(1); opacity: 0.85; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kart-hjem .kart-prikk::after { animation: none; opacity: 0; } }
/* a narrow map (a phone, or the column of a window under about 1200 px): Renergi's name stands under its dot, because to
   the right of it the map's edge cut it */
@container (max-width: 624px) {
  .kart-hjem { flex-direction: column; gap: 0.4rem; transform: translate(-50%, -8px) scale(calc(1 / var(--kz, 1))); transform-origin: 50% 8px; }
}
.kart-kilde { position: absolute; right: 0.6rem; bottom: 0.45rem; font-size: 0.7rem; color: rgba(244, 244, 241, 0.62); }