/* Bestillingssiden.
 *
 * Ligger oppaa temaets stilark og gjelder bare paa .kig. Alt som ikke
 * hoerer til bestillingen er skrudd av i header.php og footer.php.
 *
 * Formen foelger resten av nettstedet: haarfine rammer, liten radius,
 * sort som hovedfarge og gult spart til det ene stedet det skal bety
 * noe. En bestillingsside skal se ut som en kvittering, ikke som en
 * kampanje.
 */

.kig{background:var(--paper-2,#f7f6f3)}
.kig main{min-height:60vh}

/* Menyen er borte. Da skal heller ikke logoen invitere ut.
   Headeren er en kvitteringstopp, ikke en nettstedsmeny: lav, rolig,
   og med telefonen som et tydelig alternativ i egen ramme. */
.kig .site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);
  backdrop-filter:none;
}
.kig .site-header__inner{height:62px;gap:18px}
.kig .site-header__cta{margin-left:auto;gap:0}
.kig .site-header__cta .btn{display:none}
.kig .nav-toggle{display:none}
.kig .logo__img{height:30px}
.kig .link-phone{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  font-family:var(--display);font-weight:800;
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .18s ease;
}
.kig .link-phone:hover{border-color:var(--ink)}

/* ==================================================================
   Baandet med fremdriften
   ================================================================== */
/* Headeren er ogsaa sticky paa top:0. Uten en egen avstand legger
   baandet seg bak den og forsvinner. Hoyden maales i kom-i-gang.js,
   for den endrer seg med kampanjebaandet og med skjermbredden. */
.kig__baand{
  position:sticky;top:var(--kig-hdr,70px);z-index:40;
  background:var(--white,#fff);
  border-bottom:1px solid var(--line);
}
/* .wrap gir sideluften. Nullstilles den her, loper steglinjen helt ut
   i skjermkanten paa mobil. */
.kig__fremdrift{padding:12px 0 11px}
/* Den tynne linjen er borte. Stegviseren under sier det samme,
   og tydeligere: to fremdriftsmaal over hverandre maaler det
   samme to ganger. Elementet blir staaende i markupen, bare
   uten flate. */
.kig__spor{display:none}
.kig__stegtekst{
  display:flex;align-items:center;gap:20px;
  margin:0;
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);
}

/* Alle stegene med navn, ikke bare «1 av 4». Navnene sier hva som
   gjenstaar, og det er det man vil vite naar man vurderer aa begynne.
   Tallet blir staaende ytterst som en rask kontroll. */
.kig__steg{
  display:flex;align-items:center;gap:0;
  list-style:none;margin:0 auto;padding:0;
  counter-reset:kigsteg;
  min-width:0;
}
.kig__steg li{
  counter-increment:kigsteg;
  display:flex;align-items:center;gap:8px;
  padding:0 14px;
  color:var(--ink-3);
  white-space:nowrap;
  transition:color .25s ease;
}
.kig__steg li::before{
  content:counter(kigsteg,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:9px;letter-spacing:0;
  color:var(--ink-3);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.kig__steg li+li{border-left:1px solid var(--line)}
/* Passert: gult merke. Naavaerende: sort. Foran: bare omriss. */
.kig__steg li.er-ferdig{color:var(--ink-2)}
.kig__steg li.er-ferdig::before{
  content:"✓";
  background:var(--brand);border-color:var(--brand);color:var(--ink);
  font-size:10px;
}
.kig__steg li.er-na{color:var(--ink)}
.kig__steg li.er-na::before{
  background:var(--ink);border-color:var(--ink);color:#fff;
}

.kig__teller{
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.kig__teller b{color:var(--ink)}

@media (max-width:760px){
  .kig__steg{display:none}
  .kig__stegtekst{justify-content:space-between}
}
.kig__tilbake{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--ink-2);
  transition:color .18s ease;
}
.kig__tilbake:hover{color:var(--ink)}
.kig__tilbake svg{width:15px;height:15px}
@media (max-width:520px){
  /* «2 av 4 · Taket ditt» ble bredere enn skjermen i versaler med
     sperring. Mindre skrift og mindre sperring holder den paa linjen. */
  .kig__stegtekst{font-size:11px;letter-spacing:.03em;gap:10px}
  .kig__stegtekst>span{text-align:right;min-width:0}
}

/* ==================================================================
   Rutenettet
   ================================================================== */
.kig__rute{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(32px,4vw,64px);
  align-items:start;
  padding-block:clamp(36px,5vw,72px);
}
@media (max-width:900px){
  .kig__rute{grid-template-columns:minmax(0,1fr);gap:28px}
}

.kig__hoved{min-width:0}

/* Skjermene bytter med en kort innglidning. Uten den ser et bytte ut
   som at siden lastet paa nytt. */
.kig__skjerm{animation:kig-inn .34s cubic-bezier(.16,1,.3,1) both}
@keyframes kig-inn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.kig__tittel{
  font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.14;letter-spacing:-.02em;
  margin:10px 0 12px;
  text-wrap:balance;
}
.kig__lead{
  margin:0 0 28px;
  font-size:clamp(15px,1.2vw,17px);line-height:1.6;
  color:var(--ink-2);
  max-width:52ch;
}
.kig__hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.kig__fot{font-size:12.5px;color:var(--muted);text-align:center;margin:14px 0 0}

/* ==================================================================
   Valg av vei
   ================================================================== */
.kig__veier{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-bottom:34px;
}
@media (max-width:720px){.kig__veier{grid-template-columns:1fr}}

.kig__vei{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;text-align:left;
  padding:clamp(24px,2.6vw,32px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  cursor:pointer;
  font:inherit;color:inherit;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.kig__vei:hover{
  border-color:var(--ink);
  box-shadow:0 2px 4px rgba(22,22,29,.04),0 22px 44px -22px rgba(22,22,29,.3);
  transform:translateY(-2px);
}
.kig__vei:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.kig__vei-merke{
  position:absolute;top:14px;right:14px;
  background:var(--brand);color:var(--ink);
  font-family:var(--display);font-weight:800;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--radius-sm,3px);
}
.kig__vei-ic{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:18px;
  background:var(--ink);color:var(--brand);
  border-radius:var(--radius-sm,3px);
}
.kig__vei-ic svg{width:22px;height:22px}
.kig__vei b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,23px);line-height:1.2;
  margin-bottom:9px;
}
.kig__vei-tekst{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:16px}
.kig__vei-punkter{display:grid;gap:7px;margin-bottom:20px;width:100%}
.kig__vei-punkter span{
  position:relative;padding-left:22px;
  font-size:13.5px;color:var(--ink);
}
.kig__vei-punkter span::before{
  content:'';position:absolute;left:0;top:.42em;
  width:11px;height:6px;
  border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:rotate(-45deg);
}
.kig__vei-gaa{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:14px;
  color:var(--ink);
}
.kig__vei-gaa svg{width:17px;height:17px;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.kig__vei:hover .kig__vei-gaa svg{transform:translateX(5px)}

.kig__trygg{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:10px 34px;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
}
.kig__trygg b{
  font-family:var(--display);font-weight:800;color:var(--ink);
  margin-right:5px;
}
.kig__trygg b span{color:var(--brand-edge,#e0b900)}

/* ==================================================================
   Kortene med behandling
   ------------------------------------------------------------------
   To rader med tre. Hvert kort er delt i to: opptaket til venstre,
   valget til hoyre. Filmen gaar naar man er over kortet, saa man ser
   hva behandlingen faktisk er foer man velger den.

   Gruppenavnet staar paa kortet i stedet for som overskrift over en
   egen liste. Overskrifter mellom radene ville brutt rutenettet i tre
   biter, og med seks tjenester er det ingen som trenger et register.
   ================================================================== */
/* Valget faar hele bredden. Med sidespalten ved siden av ble hvert
   kort 231 piksler, og «Diamantbehandling™» brakk midt i ordet ved
   siden av et bilde. Spalten har lite aa si paa dette steget uansett:
   prisen finnes ikke enda, og bestillingen er tom. */
.kig__rute:has([data-kig-skjerm="behandling"]:not([hidden])){
  grid-template-columns:minmax(0,1fr);
}
.kig__rute:has([data-kig-skjerm="behandling"]:not([hidden])) .kig__side{display:none}

/* Samme paa takkesiden, og av samme grunn: bestillingen er sendt, og
   spalten med prisen har ingen jobb igjen. Uten dette sto kortet i
   venstre kolonne med et tomt felt ved siden av, og saa ut som om noe
   manglet. */
.kig__rute:has([data-kig-skjerm="takk"]:not([hidden])){
  grid-template-columns:minmax(0,1fr);
}
.kig__rute:has([data-kig-skjerm="takk"]:not([hidden])) .kig__side{display:none}

.kig__valg{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:8px;
}
@media (max-width:980px){.kig__valg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.kig__valg{grid-template-columns:minmax(0,1fr)}}

.kig__kort{
  position:relative;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.kig__kort:hover{
  border-color:var(--ink-3);
  box-shadow:0 2px 4px rgba(22,22,29,.04),0 18px 34px -18px rgba(22,22,29,.28);
  transform:translateY(-2px);
}
.kig__kort input{position:absolute;opacity:0;pointer-events:none}
.kig__kort:has(input:checked){
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}
.kig__kort:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* ---- Venstre halvdel: opptaket ---- */
.kig__kort-media{
  position:relative;
  overflow:hidden;
  background:var(--paper-3);
  min-height:112px;
}
.kig__kort-plakat,
.kig__kort-film{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* Filmen ligger oppaa plakatbildet og tones inn. Byttet man dem ut,
   ville kortet blinket hvitt i det halve sekundet filmen laster. */
.kig__kort-film{opacity:0;transition:opacity .3s ease}
.kig__kort:hover .kig__kort-film,
.kig__kort:has(input:checked) .kig__kort-film{opacity:1}

/* Uten opptak staar ikonet der i stedet, saa kortet ikke blir et hull. */
.kig__kort-media .kig__kort-ic{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);
}
.kig__kort-media .kig__kort-ic svg{width:26px;height:26px}

/* ---- Hoyre halvdel: valget ---- */
.kig__kort-txt{
  display:flex;flex-direction:column;justify-content:center;
  gap:2px;
  padding:14px 40px 14px 16px;
  min-width:0;
}
.kig__kort-gruppe{
  font-family:var(--display);font-weight:700;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:3px;
  /* Versaler med sperring brekker stygt. Heller avkuttet enn delt. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kig__kort-txt b{
  font-family:var(--display);font-weight:700;
  font-size:15px;line-height:1.25;
  /* Bryt paa mellomrom, ikke midt i ordet. «Diamantbehandling™» skal
     staa helt eller flyte ned paa neste linje. */
  overflow-wrap:break-word;
  hyphens:none;
}
.kig__kort-txt>small{font-size:12.5px;line-height:1.4;color:var(--ink-2)}

/* Merket i hjoernet, ikke i raden: teksten skal ha hele bredden sin
   uansett om kortet er valgt eller ikke. */
/* Avkryssingen staar der hele tiden, ikke bare naar kortet er valgt.
   En rute som dukker opp foerst etter at man har trykket, forteller
   ingen at det gaar an aa trykke. */
.kig__kort-hake{
  position:absolute;top:12px;right:12px;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm,3px);
  background:var(--white);
  color:transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
/* Merket gjenbruker temaets .kalkvelg__hake, som ligger paa opacity:0
   og bare slaas paa av en regel inne i nedtrekkene. Her styrer ruta
   synligheten med farge, saa selve merket maa vaere paa. */
/* Temaet setter ogsaa color paa selve svg-en, saa currentColor loeste
   seg til sort uansett hva ruta rundt sa. Da ble haken sort strek paa
   sort flate. */
.kig__kort-hake svg{width:14px;height:14px;opacity:1;color:inherit}
.kig__kort:hover .kig__kort-hake{border-color:var(--ink-3)}
.kig__kort:has(input:checked) .kig__kort-hake{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

@media (max-width:620px){
  .kig__kort{grid-template-columns:88px minmax(0,1fr)}
  .kig__kort-media{min-height:88px}
}

/* ==================================================================
   Feltene
   ================================================================== */
.kig__felt{border:0;padding:0;margin:0 0 26px}
.kig__felt legend{
  padding:0;margin-bottom:6px;
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-2);
}
/* Spoersmaalene begynner her, etter kartet. De trenger en tydelig luft
   over seg: uten den henger den foerste ledeteksten fast i bunnen av
   kartboksen og ser ut som en del av den. */
.kig__spm{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:30px}
/* Skjult er skjult.
 *
 * Nettleserens egen regel er [hidden]{display:none} — helt uten
 * klassenavn. Enhver av vaare egne regler som setter display slaar den,
 * og elementet blir staaende synlig med hidden paa seg. Det traff foerst
 * .kig__spm (display:grid), og deretter .kig__kort (display:grid): tre
 * tjenester vi hadde merket skjult paa selvbetjeningsveien sto der
 * likevel.
 *
 * Denne regelen gjelder alt i veiviseren og er mer spesifikk enn en
 * enkelt klasse, saa den lukker hullet én gang for alle i stedet for
 * felt for felt. */
.kig [hidden]{display:none}
@media (max-width:640px){.kig__spm{grid-template-columns:1fr}}
.kig__spm .kig__sp[hidden]{display:none}
/* Helning og antall flater kommer fra Norkart. Feltene maa staa i skjemaet
   for aa baere svaret, men de skal ikke vises. */
.kig__spm .kig__sp[data-kig-maalt]{display:none}

/* De fire kompleksitetsspoersmaalene: to per rad.
   Egen beholder og ikke .kig__spm, fordi stellSporsmal skjuler alt med
   klassen .kig__sp som ikke hoerer til den valgte behandlingen — disse
   fire gjelder alle. */
/* minmax(0,1fr) og ikke 1fr: 1fr er minmax(auto,1fr), og da vokser
   spalten til innholdets minstebredde. Med nedtrekkene ble raden 415 og
   295 piksler i stedet for to like. */
.kig__spm-rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 18px;align-items:start}
@media (max-width:640px){.kig__spm-rad{grid-template-columns:1fr}}
/* Ledeteksten bryter her, i motsetning til i .kig__spm. «Er huset et
   sveitserhus, eller har det mye utsmykning?» faar ikke plass paa én
   linje i en halv spalte, og to linjer er bedre enn aa la ett spoersmaal
   sprenge rutenettet. Plassen settes av for begge, saa nedtrekkene staar
   paa linje selv naar bare det ene spoersmaalet bryter. */
/* .kig__felt legend{white-space:nowrap} staar lenger nede i fila og har
   samme spesifisitet, saa den vant. Ett klassenavn til her avgjoer det:
   uten bryting ble sveitserhus-spoersmaalet 415 piksler bredt i en
   spalte paa 355, og la seg utenfor rutenettet. */
.kig__spm-rad .kig__felt legend{white-space:normal;line-height:1.35;min-height:1.35em}
@media (max-width:640px){.kig__spm-rad .kig__felt legend{min-height:0}}

/* Hjelpeteksten under hvert nedtrekk er en begrunnelse, ikke en
   feilmelding. Et infoikon sier hvilken av delene det er foer man har
   lest setningen. Maske og ikke bilde, saa ikonet foelger tekstfargen. */
.kig__spm-rad .kig__hint{display:flex;gap:7px;align-items:center}
.kig__spm-rad .kig__hint::before{
  content:"";
  flex:0 0 auto;
  width:14px;height:14px;
  background:currentColor;
  -webkit-mask:var(--ikon-info) center / contain no-repeat;
  mask:var(--ikon-info) center / contain no-repeat;
}
:root{
  --ikon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
  /* Pekeren, samme form som markoeren over takflatene. */
  --ikon-trykk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 2.5 6 19.2 10.1 15.1 12.9 21.3 15.8 20 13 13.9 18.7 13.4 Z'/%3E%3C/svg%3E");
}

.kig .kalkvelg__knapp{
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  background:var(--white);
  padding:13px 15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.kig .kalkvelg__knapp:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.kig .kalkvelg.er-apen .kalkvelg__knapp{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.kig .kalkvelg__panel{
  top:calc(100% + 6px);padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  box-shadow:0 2px 6px rgba(22,22,29,.06),0 24px 54px -14px rgba(22,22,29,.26);
}
.kig .kalkvelg__opt{border-radius:var(--radius-sm,3px)}
.kig .kalkvelg__opt:has(input:checked){background:var(--paper-2)}

/* Skyveren, som i kalkulatoren: sporet fylles fram til haandtaket. */
.kig input[type=range]{
  height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--ink) 0 var(--pct,22%),var(--paper-3) var(--pct,22%) 100%);
}
.kig input[type=range]::-webkit-slider-thumb{
  width:20px;height:20px;background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
  transition:transform .16s ease;
}
.kig input[type=range]::-moz-range-thumb{
  width:20px;height:20px;background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
}
.kig input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
.kig .range-wrap{gap:20px}
.kig .range-wrap output{font-size:20px;font-variant-numeric:tabular-nums;min-width:96px}

.kig .field input,
.kig .field-rad input{
  border-radius:var(--radius,4px);
  border:1px solid var(--line);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.kig .field input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.kig .field input.is-feil{border-color:var(--error,#ea4747);box-shadow:0 0 0 1px var(--error,#ea4747)}
/* Et ubesvart spoersmaal. Ledeteksten faar fargen ogsaa, for nedtrekket
   alene er lett aa overse naar tre staar ved siden av hverandre. */
.kig__sp.is-feil .kalkvelg__knapp{border-color:var(--error,#ea4747);box-shadow:0 0 0 1px var(--error,#ea4747)}
.kig__sp.is-feil legend{color:var(--error,#ea4747)}

/* Brikker for tidspunkt. Fire korte valg trenger ikke et nedtrekk. */
.kig__brikker{display:flex;flex-wrap:wrap;gap:8px}
.kig__brikke{position:relative;cursor:pointer}
.kig__brikke input{position:absolute;opacity:0;inset:0;cursor:pointer}
.kig__brikke span{
  display:block;padding:10px 15px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius,4px);
  font-size:14px;
  transition:border-color .16s ease,background-color .16s ease;
}
.kig__brikke:hover span{border-color:var(--ink-3)}
.kig__brikke input:checked+span{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.kig__brikke input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}

/* Hvor mange i samme kommune. Hentet fra basen, ikke funnet paa. */
.kig__naerhet{
  /* Laa paa -8px og hang fast i boksen over. Den er en egen beskjed, ikke
     en fotnote til kartet, og trenger aa staa for seg selv. */
  margin:22px 0 26px;
  padding:12px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius,4px);
  font-size:13.5px;color:var(--ink-2);
  animation:kig-inn .4s cubic-bezier(.16,1,.3,1) both;
}
.kig__naerhet b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ==================================================================
   Oppsummeringen rett over bekreftknappen
   ================================================================== */
/* ---- Forbeholdet om undertaket ----
   Egen ramme, ikke smaaskrift under knappen. Punktet gir oss rett til aa
   avlyse en bestilt jobb, og det skal leses foer det hukes av — ikke
   oppdages etterpaa. */
/* Et tillegg som faktureres for seg. Prisen staar uten pluss, og noten
   sier naar den kommer, saa den ikke leses som en del av summen. */
.kig__ekstra--utenfor .kig__ekstra-pris{color:var(--ink-2);font-weight:600}
.kig__ekstra-note{display:block;margin-top:3px;color:var(--ink-3)}

/* Sesongforbeholdet staar i merkefarge, ikke i graatt: det er ikke
   smaaskrift, det er en opplysning som kan endre naar man bestiller. */
/* ---- Hvem du kan ringe ----
   Bilde til venstre, navn og nummer til hoyre. Bildet er rundt og lite:
   det skal si «et menneske», ikke ta plass fra bestillingen. */
.kig__hjelp{display:flex;align-items:center;gap:14px}
.kig__hjelp-bilde{
  flex:0 0 auto;
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  background:var(--paper-2);
}
.kig__hjelp-txt{min-width:0}
.kig__hjelp-navn{margin:0;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink)}
.kig__hjelp-rolle{margin:1px 0 4px;font-size:12.5px;color:var(--ink-3)}
.kig__hjelp-tlf{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--ink);
  border-bottom:1px solid transparent;
}
.kig__hjelp-tlf svg{width:15px;height:15px;color:var(--ink-2)}
.kig__hjelp-tlf:hover{border-bottom-color:currentColor}

.kig__klausul--sesong{background:var(--brand-100,#fffbe0);border-color:var(--brand,#ffd61f)}

.kig__klausul{
  margin:18px 0 16px;
  padding:16px 18px 6px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg,16px);
  background:var(--paper-2);
}
.kig__klausul-tittel{
  margin:0 0 8px;
  font-family:var(--display);font-weight:800;
  font-size:11.5px;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-2);
}
.kig__klausul p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.kig__klausul .samtykke{margin-top:2px}

.kig__oppsum{
  margin:8px 0 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  overflow:hidden;
}
.kig__oppsum-tittel{
  margin:0;padding:13px 18px;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
}
.kig__oppsum dl{margin:0;padding:6px 18px 14px}
.kig__oppsum dl div{
  display:flex;justify-content:space-between;gap:18px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.kig__oppsum dl div:last-child{border-bottom:0}
.kig__oppsum dt{color:var(--ink-2);flex:0 0 auto}
.kig__oppsum dd{
  margin:0;text-align:right;color:var(--ink);
  font-family:var(--display);font-weight:700;
  min-width:0;overflow-wrap:anywhere;
}
.kig__oppsum dl div:last-child dd{font-variant-numeric:tabular-nums}

/* ==================================================================
   Knappene
   ================================================================== */
.kig .btn--primary{
  border-radius:var(--radius,4px);
  box-shadow:none;
  position:relative;overflow:hidden;isolation:isolate;
}
.kig .btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--brand);
  transform:translateY(101%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.kig .btn--primary:hover::before{transform:translateY(0)}
.kig .btn--primary:hover{color:var(--ink);border-color:var(--brand)}
.kig .btn--primary.er-sender{opacity:.6;pointer-events:none}

/* ==================================================================
   Sidepanelet
   ================================================================== */
/* display fra en klasse slaar [hidden], som bare er en
   attributtvelger. Uten dette staar prisen framme allerede for man har
   valgt vei. */
.kig__side{position:sticky;top:calc(var(--kig-hdr,70px) + var(--kig-baand,58px) + 24px);display:grid;gap:14px}
.kig__side[hidden],
.kig__panel[hidden],
.kig__pris[hidden],
.kig__oppsum[hidden],
.kig__felt[hidden],
.kig__skjerm[hidden]{display:none}
@media (max-width:900px){.kig__side{position:static}}

.kig__pris{
  display:grid;gap:5px;
  padding:22px;
  background:var(--ink);color:#fff;
  border-radius:var(--radius,4px);
}
.kig__pris-merke{
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.kig__pris-tall{
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.4vw,27px);
  line-height:1.14;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.kig__pris-under{font-size:13px;color:var(--brand);margin-top:2px}
.kig__pris-holdt{
  margin-top:9px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.6);
}

.kig__side-punkter{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.kig__side-punkter li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.kig__side-punkter svg{
  flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:var(--ink);
}

.kig__knapp-info,
.kig__sesong{
  margin:0;padding:13px 15px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  font-size:13px;color:var(--ink-2);
}
.kig__knapp-info b{
  color:var(--ink);font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ==================================================================
   Kvitteringen
   ================================================================== */
/* Innholdet samles i midten og faar en maalbredde. Uten den strekker
   punktlista seg over hele skjermen paa en stor skjerm. */
.kig__takk{text-align:center;padding:clamp(30px,5vw,60px) 0;max-width:560px;margin-inline:auto}
.kig__takk .kig__etterpa{text-align:left}
.kig__takk-hjem{margin-top:26px}
.kig__takk-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;margin-bottom:22px;
  background:var(--ink);color:var(--brand);
  border-radius:50%;
}
.kig__takk-ic svg{width:28px;height:28px}
.kig__takk .kig__lead{margin-inline:auto}
.kig__etterpa{
  list-style:none;counter-reset:e;
  max-width:460px;margin:26px auto 0;padding:0;
  text-align:left;
}
.kig__etterpa li{
  counter-increment:e;
  position:relative;padding:16px 0 16px 44px;
  border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
}
.kig__etterpa li::before{
  content:counter(e,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.06em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ==================================================================
   Panelene i sidespalten
   ------------------------------------------------------------------
   Spalten sto foer med tre kulepunkter som var like paa alle stegene.
   Naa er den delt i kort med hver sin jobb, og det oeverste endrer seg
   etter hva man har svart.
   ================================================================== */
.kig__panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  padding:18px 20px;
}
.kig__panel-tittel{
  display:flex;align-items:center;gap:9px;
  margin:0 0 14px;
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);
}

/* Bestillingen slik den ser ut saa langt. */
.kig__panel-liste{margin:0}
.kig__panel-liste div{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:13px;
  animation:kig-rad .4s cubic-bezier(.16,1,.3,1) both;
}
.kig__panel-liste div:first-child{border-top:0;padding-top:0}
.kig__panel-liste dt{color:var(--ink-2);flex:0 0 auto}
.kig__panel-liste dd{
  margin:0;text-align:right;min-width:0;
  color:var(--ink);font-family:var(--display);font-weight:700;
  overflow-wrap:anywhere;
}
@keyframes kig-rad{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:var(--o,1);transform:none}
}

.kig__side-punkter{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.kig__side-punkter li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--ink-2);
}
.kig__side-punkter svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--ink);
}

.kig__knapp-info,
.kig__sesong{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);
}
.kig__knapp-info b{
  color:var(--ink);font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------
   Hva som faktisk skjer

   Laa foer som et varsel nede i venstre hjoerne. Der ble det borte bak
   den faste linjen paa mobil, og utenfor blikket paa skrivebord: et
   varsel som popper opp og forsvinner rekker ikke aa bli lest av den
   som holder paa med noe annet. Naa staar det stille i spalten.
   ------------------------------------------------------------------ */
/* Gult paa hvitt er nesten usynlig, og en puls man ikke ser er en
   puls som ikke finnes. Groent leses dessuten som «i drift», som er
   det prikken faktisk sier. */
.kig__prikk{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);
  animation:kig-puls 2.4s ease-out infinite;
}
@keyframes kig-puls{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}
  70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}

.kig__naa-liste{list-style:none;margin:0;padding:0;display:grid}
.kig__naa-liste li{
  padding:10px 0;
  border-top:1px solid var(--line);
  /* Sluttopasiteten maa komme herfra og ikke fra en egen regel.
     animation-fill-mode:both laaser elementet til siste ramme i
     keyframen, og den slaar en vanlig opacity-erklaering. */
  --o:1;
  animation:kig-rad .45s cubic-bezier(.16,1,.3,1) both;
}
.kig__naa-liste li:first-child{border-top:0;padding-top:0}
/* Oeverst er ferskest. Fallende opasitet nedover sier at listen har en
   retning i tid, uten at det trengs en overskrift for aa forklare det.
   Den oeverste staar urort. */
.kig__naa-liste li:nth-child(2){--o:.7}
.kig__naa-liste li:nth-child(3){--o:.48}
.kig__naa-liste li:nth-child(4){--o:.32}
.kig__naa-liste li:nth-child(n+5){--o:.22}
.kig__naa-liste b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:13px;line-height:1.35;color:var(--ink);
}
.kig__naa-liste small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}

/* Slank linje under fremdriften. Paa mobil ligger spalten under
   skjemaet, altsaa utenfor skjermen mens man fyller ut. */
.kig__ticker{
  display:none;
  align-items:center;gap:9px;
  margin:11px 0 0;
  font-size:12px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kig__ticker[hidden]{display:none}
.kig__ticker b{color:var(--ink);font-weight:700}
@media (max-width:900px){
  .kig__ticker:not([hidden]){display:flex}
  /* Spalten hoerer hjemme over skjemaet paa mobil naar den har et
     estimat aa vise, ikke etter det man skal fylle ut. */
  .kig__naa{display:none}
}

/* ==================================================================
   Fast linje nederst paa mobil
   ================================================================== */
.kig__mobil{display:none}
@media (max-width:900px){
  .kig__mobil{
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--white);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(22,22,29,.08);
  }
  .kig__mobil[hidden]{display:none}
  .kig__mobil-tlf{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:46px;height:46px;
    border:1px solid var(--line);border-radius:var(--radius,4px);
    color:var(--ink);
  }
  .kig__mobil-tlf svg{width:20px;height:20px}
  .kig__mobil-knapp{flex:1 1 auto;justify-content:center}
  /* Prisen staar i linjen paa mobil. Sidepanelet ligger under skjemaet
     der, altsaa utenfor skjermen naar man trenger tallet mest. */
  .kig__mobil-pris{
    display:grid;flex:0 1 auto;min-width:0;
    padding-right:4px;
  }
  .kig__mobil-pris[hidden]{display:none}
  .kig__mobil-pris span{
    font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    font-family:var(--display);font-weight:700;color:var(--muted);
  }
  .kig__mobil-pris b{
    font-family:var(--display);font-weight:800;font-size:14px;
    font-variant-numeric:tabular-nums;color:var(--ink);
    white-space:nowrap;
  }
  /* Plass til linjen, saa den ikke ligger oppaa siste knapp. */
  .kig__rute{padding-bottom:96px}
}

@media (prefers-reduced-motion:reduce){
  .kig__skjerm,.kig__naerhet{animation:none}
  .kig__panel-liste div,.kig__naa-liste li{animation:none}
  .kig__prikk{animation:none}
}

/* Nedtrekk uten svar staar dempet, saa det er tydelig hva som
   gjenstaar. Ordet «Velg» i full styrke ville sett ut som et svar. */
.kig .kalkvelg--tom .kalkvelg__txt b{
  color:var(--ink-3);
  font-weight:600;
}

/* ==================================================================
   Tallene i sidespalten
   ------------------------------------------------------------------
   To og to, ikke fire paa rad: spalten er 320 piksler bred, og fire
   tall der ville gitt 70 piksler hver.
   ================================================================== */
.kig__tall{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:0;padding:0;
  list-style:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  overflow:hidden;
}
.kig__tall li{
  padding:15px 16px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  min-width:0;
}
.kig__tall li:nth-child(odd){border-left:0}
.kig__tall li:nth-child(-n+2){border-top:0}
/* Rutenettet staar i to spalter. Er punktene et oddetall, ville det
   siste staatt alene med en tom rute ved siden av seg. Da tar det hele
   raden i stedet. */
.kig__tall li:last-child:nth-child(odd){grid-column:1 / -1}
.kig__tall b{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:19px;line-height:1.05;
  letter-spacing:-.025em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kig__tall b span{color:var(--brand);font-size:.8em;margin-left:.06em}
.kig__tall small{
  display:block;margin-top:6px;
  font-size:10.5px;line-height:1.3;
  color:var(--ink-3);
}

/* ==================================================================
   Ordreboksen
   ------------------------------------------------------------------
   Estimatet og bestillingen laa i hver sin ramme rett over hverandre,
   med samme form og samme farge. To rammer leses som to saker. Det er
   én: hva du har valgt, og hva det koster.
   ================================================================== */
.kig__ordre{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,4px);
  overflow:hidden;
}
/* Prisen er toppen av boksen, ikke et kort inni den. */
.kig__ordre .kig__pris{
  border-radius:0;
  margin:0;
}
/* Bestillingen mister sin egen ramme; skillet mot prisen over holder. */
.kig__ordre .kig__panel{
  border:0;
  border-radius:0;
  background:none;
}
/* Staar prisen der, trengs ingen strek: den moerke flaten skiller alt. */
.kig__ordre .kig__pris:not([hidden])+.kig__panel{border-top:0}

/* Ett varsel, ikke fire. Da faller opasitetstrappen bort av seg selv. */
.kig__naa-liste li:first-child{border-top:0;padding-top:0}

/* Ledetekster staar paa én linje. De som ikke faar plass i en halv
   spalte, tar hele bredden — se maalLedetekster i kom-i-gang.js. */
.kig__felt legend{white-space:nowrap}
.kig__sp--full{grid-column:1 / -1}

/* ===========================================================================
   Detaljskjermen og fastprisen

   Skjermen som gjor at kunden slipper befaringen. Alt her handler om én
   ting: aa gjore et tall til et tilbud. Et tall ber om tillit. Et tilbud
   viser regnestykket og lar deg etterprove det.
   ======================================================================== */

/* ---- Tilleggstjenester ---- */
/* Ledeteksten i et fieldset tegnes i kantlinjen og ikke i innholdet, saa
   padding-top legger seg MELLOM ledeteksten og det foerste avsnittet.
   Med tjueto piksler ble det trettien piksler tomt der. */
.kig__tillegg{border-top:1px solid var(--line);padding-top:0;margin-top:4px}
.kig__tillegg > legend{margin-bottom:6px}
.kig__hint--topp{margin:-2px 0 14px}

.kig__ekstra{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0 14px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.kig__ekstra + .kig__ekstra{margin-top:10px}
.kig__ekstra:hover{border-color:var(--ink-3)}
/* Avkryssingen skjules for oeyet — den tegnes av .kig__ekstra-boks — men
   bare avkryssingen. Metervarene har et tallfelt i samme rad, og det skal
   kunden kunne se og skrive i. */
.kig__ekstra input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}

.kig__ekstra-boks{
  width:22px;height:22px;
  border:2px solid var(--line);
  border-radius:6px;
  position:relative;
  transition:background-color .16s ease,border-color .16s ease;
}
.kig__ekstra input:checked + .kig__ekstra-boks{
  background:var(--brand);
  border-color:var(--ink);
}
.kig__ekstra input:checked + .kig__ekstra-boks::after{
  content:"";position:absolute;left:50%;top:47%;
  width:5px;height:10px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;
  transform:translate(-50%,-55%) rotate(45deg);
}
.kig__ekstra input:focus-visible + .kig__ekstra-boks{outline:2px solid var(--ink);outline-offset:2px}
.kig__ekstra:has(input:checked){border-color:var(--ink);background:var(--paper-2)}

.kig__ekstra-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.kig__ekstra-txt b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.kig__ekstra-txt small{font-size:13px;color:var(--ink-2);line-height:1.4}
.kig__ekstra-pris{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  white-space:nowrap;
}

@media (max-width:520px){
  /* Prisen under teksten i stedet for ved siden av: pa smale skjermer
     presser den ellers navnet til to-tre ord per linje. */
  .kig__ekstra{grid-template-columns:auto 1fr;gap:4px 14px}
  .kig__ekstra-pris{grid-column:2;font-size:14px}
}

/* ---- Regnestykket bak fastprisen ---- */
.kig__spec{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
}
.kig__spec-liste{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 16px;
  margin:0;
  font-size:13.5px;
  line-height:1.35;
}
.kig__spec-liste dt{margin:0;opacity:.72}
.kig__spec-liste dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;opacity:.85}
.kig__spec-liste .kig__spec-sum{
  margin-top:5px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  opacity:1;
}

/* ==================================================================
   Taket paa kartet

   Boksen skal lese som et bevis, ikke som en kontroll. Derfor det
   morke kartet i full bredde med teksten over og summen under: man
   ser huset sitt foerst, og tallet etterpaa.
   ================================================================== */
.kig__kart{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg,18px);
  background:var(--white);
  overflow:hidden;
}
.kig__kart-topp{padding:18px 20px 14px}
.kig__kart-tittel{
  margin:0 0 3px;
  font-family:var(--display);
  font-weight:800;
  font-size:16.5px;
  color:var(--ink);
}
/* Én linje i den halve spalten. Brekker teksten likevel — lengre
   oversettelse, stoerre skrift hos brukeren — kortes den med ellipse i
   stedet for aa skyve kartet nedover. */
.kig__kart-lead{
  margin:0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:900px){
  /* Full bredde igjen naar boksene ligger over hverandre. */
  .kig__kart-lead{white-space:normal;overflow:visible}
}

.kig__kart-flate{
  height:340px;
  background:var(--paper-3,#eceae4);
  /* Leaflet tegner sine egne lag oppaa; uten dette blir hjoernene rette
     mens boksen rundt er avrundet. */
  isolation:isolate;
}
@media (max-width:620px){ .kig__kart-flate{height:270px} }

/* Skjelettet ligger paa .kig__duo.er-laster lenger nede; her holder det
   at kartflaten har en tone aa ligge paa foer Leaflet tegner. */

/* ---- Flatene som liste ---- */
.kig__kart-liste{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
  max-height:232px;
  overflow-y:auto;
}
.kig__kart-liste li + li{border-top:1px solid var(--line)}

.kig__kart-rad{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 20px;
  border:0;
  background:none;
  font-family:inherit;
  font-size:13.5px;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:background-color .14s ease,opacity .14s ease;
}
.kig__kart-rad:hover,
.kig__kart-rad.er-peker{background:var(--paper-2)}

.kig__kart-rad-hake{
  width:20px;height:20px;
  border-radius:6px;
  background:var(--brand);
  border:2px solid var(--ink);
  position:relative;
}
.kig__kart-rad-hake::after{
  content:"";
  position:absolute;left:50%;top:46%;
  width:4px;height:9px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;
  transform:translate(-50%,-55%) rotate(45deg);
}

.kig__kart-rad-navn{font-family:var(--display);font-weight:700}
.kig__kart-rad-tall{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.kig__kart-rad-areal{
  font-family:var(--display);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  min-width:62px;
  text-align:right;
}

/* Fravalgt flate. Raden blir staaende — den skal kunne slaas paa igjen. */
.kig__kart-rad.er-av{opacity:.45}
.kig__kart-rad.er-av .kig__kart-rad-hake{
  background:transparent;
  border-color:var(--ink-3);
}
.kig__kart-rad.er-av .kig__kart-rad-hake::after{display:none}

@media (max-width:560px){
  /* Himmelretningen ryker foerst. Helning og areal er det man velger etter. */
  .kig__kart-rad{grid-template-columns:auto 1fr auto auto;gap:9px;padding:11px 16px}
  .kig__kart-rad-tall:nth-of-type(2){display:none}
}

/* Nedtrekket foelger bredden paa kortet det staar i, og har luft under
   seg saa det ikke klistrer seg til kanten. Et smalere felt ble proevd
   foerst, men da stod det midt i et kort med to tomme tredjedeler ved
   siden av, og bygningstypene fra matrikkelen er lange nok til aa
   trenge plassen. */
.kig__kart-bygg{padding:16px 20px 20px}
/* Beholderen var en rad med brikker, og en flex-rad gir barnet bredden
   sin fra innholdet. Nedtrekket ble da 261 av 720 piksler, og navnet
   brakk over to linjer med tom plass ved siden av. */
.kig__kart-bygg .kig__brikker{display:block}
.kig__kart-bygg .kalkvelg{max-width:none}
.kig__kart-bygg-merke{
  display:block;
  margin-bottom:8px;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.kig__kart-sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 20px;
  border-top:1px solid var(--line);
  margin-top:14px;
}
.kig__kart-sum-merke{
  display:block;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:2px;
}
.kig__kart-sum b{
  font-family:var(--display);
  font-weight:800;
  font-size:22px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kig__kart-alle{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:999px;
  padding:9px 16px;
  font-family:var(--display);
  font-weight:700;
  font-size:13.5px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.kig__kart-alle:hover{border-color:var(--ink);background:var(--paper-2)}

.kig__kart-kilde{
  margin:0;
  padding:0 20px 16px;
  font-size:12.5px;
  color:var(--ink-3);
}

/* «Se bilde» paa metervarene. En lenkeaktig knapp under beskrivelsen —
   den skal vaere lett aa finne, men ikke konkurrere med prisen. */
/* Knappen inne i et svaralternativ. Staar til hoyre for teksten, foer
   haken, og skal lese som en lenke — ikke konkurrere med selve valget. */
.kalkvelg__se{
  margin-left:auto;
  margin-right:10px;
  padding:0;border:0;background:none;
  font:inherit;font-size:12px;font-weight:700;
  color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;flex:0 0 auto;
}
.kalkvelg__se:hover{color:var(--ink)}
.kalkvelg__se:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

/* Avkryssing og tekst i metervarene. Tallfeltet ligger utenfor, saa et
   trykk i feltet ikke huker av varen. */
.kig__ekstra-velg{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;cursor:pointer}

.kig__ekstra-se{
  /* .kig__ekstra-txt er en kolonne-flex. Uten align-self strekkes knappen
     til full bredde, og en <button> sentrerer teksten sin — da la «Se
     bilde» seg midt i raden i stedet for under beskrivelsen. */
  align-self:flex-start;
  display:inline-block;
  margin-top:5px;
  text-align:left;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.kig__ekstra-se:hover{color:var(--ink-2)}
.kig__ekstra-se:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

/* Bildevinduet. Over alt annet, ogsaa over den faste baren nederst. */
.kig__bildevis{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px}
.kig__bildevis[hidden]{display:none}
.kig__bildevis-bakgrunn{position:absolute;inset:0;background:rgba(15,15,20,.72)}
.kig__bildevis-kort{
  position:relative;
  margin:0;
  max-width:min(760px,100%);
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:var(--radius-lg,18px);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.kig__bildevis-kort img{display:block;width:100%;height:auto;max-height:calc(100vh - 120px);object-fit:contain;background:var(--paper-3,#eceae4)}
.kig__bildevis-kort figcaption{
  padding:13px 18px;
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
}
.kig__bildevis-x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(15,15,20,.62);
  color:#fff;font-size:22px;line-height:1;
  cursor:pointer;
}
.kig__bildevis-x:hover{background:rgba(15,15,20,.82)}
.kig__bildevis-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Skjult for oeyet, men lest av skjermlesere. Antallsfeltene trenger en
   ledetekst hver, og «m» alene sier ingenting naar man ikke ser raden. */
.skjult-visuelt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Tillegg som selges per meter. Samme rad som de faste, men med et
   antallsfelt der avkryssingen ellers staar, og enhetsprisen til hoyre. */
.kig__ekstra--meter{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:default;
}
.kig__ekstra--meter .kig__ekstra-txt{flex:1 1 auto;min-width:0}
.kig__ekstra-antall{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.kig__ekstra-antall input{
  width:72px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  font:inherit;
  font-size:14px;
  text-align:right;
  color:var(--ink);
}
.kig__ekstra-antall input:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px;
  border-color:var(--ink);
}
.kig__ekstra-enhet{font-size:13.5px;color:var(--ink-3)}
@media (max-width:560px){
  .kig__ekstra--meter{flex-wrap:wrap;gap:10px}
  .kig__ekstra--meter .kig__ekstra-txt{flex:1 1 100%}
}

/* Foerste flaten paa et uthus. Den tynne linjen over
   sier hvor husets tak slutter og garasjen begynner — flatene velges
   hver for seg, som paa huset. */
.kig__kart-rad--nytt{
  margin-top:6px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}


/* Garasjen som ikke kom med. Feltet staar nederst i maalepanelet, etter
   kilden, fordi det hoerer til det kartet ikke klarte — ikke til det det
   fant. Skillelinjen over markerer nettopp det. */
.kig__kart-tillegg{
  padding:14px 20px 18px;
  border-top:1px solid var(--line);
}
.kig__kart-tillegg-navn{
  display:block;
  font-weight:700;
  font-size:13.5px;
  color:var(--ink);
}
.kig__kart-tillegg-hjelp{
  margin:4px 0 10px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-3);
}
.kig__kart-tillegg-hjelp a{color:var(--ink);text-underline-offset:2px}
/* Tilbudet om hjelp staar for seg selv. Som en setning nummer to i samme
   avsnitt gled den inn i forrige og ble lest som en bisetning. */
.kig__kart-tillegg-hjelp--ring{margin-top:8px}
.kig__kart-tillegg-felt{
  display:flex;
  align-items:center;
  gap:8px;
}
.kig__kart-tillegg-felt input{
  width:104px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  font:inherit;
  font-size:14px;
  color:var(--ink);
}
.kig__kart-tillegg-felt input:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px;
  border-color:var(--ink);
}
.kig__kart-tillegg-felt span{font-size:13.5px;color:var(--ink-3)}

/* Feiler oppslaget, staar dette i stedet for kartet. Flyten gaar
   videre — skyveren gjelder da som foer. */
.kig__kart-feil{
  margin:16px 0 4px;
  padding:13px 16px;
  border-radius:var(--radius);
  background:var(--paper-2);
  border-left:3px solid var(--brand);
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-2);
}

/* Leaflet-verktoeyene i husets egen form. */
.kig__kart .leaflet-control-zoom a{
  border-radius:8px;
  color:var(--ink);
  font-weight:700;
}
.kig__kart .leaflet-tooltip{
  border:0;
  border-radius:8px;
  background:rgba(22,22,29,.92);
  color:#fff;
  font-family:var(--display);
  font-weight:600;
  font-size:12.5px;
  box-shadow:none;
}
.kig__kart .leaflet-tooltip::before{border-top-color:rgba(22,22,29,.92)}

/* Bytte mellom flyfoto og kart. */
.kig__kart-lag{
  display:flex;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(22,22,29,.22);
}
.kig__kart-lag button{
  border:0;
  background:rgba(255,255,255,.94);
  padding:7px 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  color:var(--ink-2);
  cursor:pointer;
}
.kig__kart-lag button.er-paa{background:var(--ink);color:#fff}

/* ==================================================================
   Adressen paa én linje

   Adresse, postnummer og poststed hoerer sammen og skrives i én
   bevegelse. Postnummer trenger fire tegn og poststed ett ord — i full
   bredde tok de like mye plass som adressen og fikk skjemaet til aa se
   lengre ut enn det er.

   Sporene er satt i piksler, ikke brokdeler: fire siffer er fire siffer
   uansett hvor bred skjermen er, og et felt som vokser med vinduet
   inviterer til aa skrive noe annet enn det som skal staa der.
   ================================================================== */
.kig__adr-rad{
  display:grid;
  grid-template-columns:1fr 108px 190px;
  gap:12px;
  align-items:start;
  /* Statuslinja «Postnummer og poststed er fylt ut» staar absolutt under
     feltet, saa den tar ingen hoyde selv. Plassen maa raden holde av:
     med fjorten piksler kolliderte marginen med kartboksens tjue, og
     teksten laa tre piksler over kortet. */
  margin-bottom:34px;
}
/* Adressefeltet baerer forslagslista og maa beholde sin egen
   posisjonering. Bunnmargen tas av raden i stedet. */
.kig__adr-rad .field--adr{margin-bottom:0}
.kig__adr-rad .field{margin-bottom:0}

/* Etikettene skal staa paa samme linje selv naar teksten er ulik lengde,
   ellers hopper feltene i hoyden. */
.kig__adr-rad .field > span,
.kig__adr-rad .field--adr label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--ink-2);
  white-space:nowrap;
}
.kig__adr-rad input{width:100%}

/* Statuslinja maa staa i DOM-en — app.js kobler ikke paa adressesoeket
   uten den — men den skal ikke telle med i hoyden paa boksen. Gjorde den
   det, la forslagslista seg 34 piksler under feltet i stedet for 4, fordi
   lista maaler seg mot .field--adr og ikke mot selve inputen. */
.kig__adr-rad .field--adr .adr-status{
  position:absolute;
  top:calc(100% + 5px);
  left:0;right:0;
  margin:0;
}
/* Postnummer er tall og leses lettere med lik tegnbredde. */
.kig__adr-rad input[name="postnr"]{font-variant-numeric:tabular-nums}

@media (max-width:760px){
  /* Adressen over, de to korte ved siden av hverandre under. Tre spor paa
     en telefon gir et postnummerfelt paa femti piksler. */
  .kig__adr-rad{grid-template-columns:100px 1fr}
  .kig__adr-rad .field--adr{grid-column:1 / -1}
}

/* ==================================================================
   Taket i tre dimensjoner

   Samme boksform som kartet, saa de to leses som to blikk paa det
   samme og ikke som to ulike verktoy.
   ================================================================== */
.kig__tre{
  margin:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg,18px);
  background:var(--white);
  overflow:hidden;
}
.kig__tre-topp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 20px 12px;
}
.kig__tre-tittel{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:15.5px;
  color:var(--ink);
}
.kig__tre-nullstill{
  border:1px solid var(--line);
  background:var(--white);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  color:var(--ink);
  cursor:pointer;
}
.kig__tre-nullstill:hover{border-color:var(--ink);background:var(--paper-2)}

/* Mork flate. Taket er gult, og gult paa hvitt gir ingen form —
   flatene forsvinner i hverandre. Paa morkt staar de fram. */
.kig__tre-flate{
  background:var(--ink,#161620);
  cursor:grab;
  touch-action:none;      /* ellers ruller siden i stedet for aa snu bygget */
  user-select:none;
}
.kig__tre-flate:active{cursor:grabbing}
/* Fast hoyde, som kartet.
   Med height:auto strakk SVG-en seg til sin egen sideforhold og boksen ble
   over 700 piksler hoy — tre ganger kartet, for en modell som ikke trenger
   mer plass enn det. viewBoxen skalerer og sentrerer seg selv inni. */
.kig__tre-flate{height:320px}
.kig__tre-flate svg{display:block;width:100%;height:100%}
@media (max-width:620px){ .kig__tre-flate{height:260px} }

.kig__tre-f{
  stroke:rgba(255,255,255,.55);
  stroke-width:1;
  stroke-linejoin:round;
  transition:stroke-width .12s ease;
  /* Pekefinger over en flate, som over takflatene i kartet. Boksen har
     cursor:grab fordi man snur bygget ved aa dra i den, men den arvet
     grab ned paa flatene ogsaa — og da sa modellen «dra meg» der den
     mente «trykk her». Grab hoerer til den morke bakgrunnen. */
  cursor:pointer;
}
/* Drar man ut fra en flate, skal den fortsatt vise at man drar. */
.kig__tre-flate:active .kig__tre-f{cursor:grabbing}
.kig__tre-f:hover{stroke:#fff;stroke-width:2}
/* Hvit flate trenger en mork kant for aa faa form. Med hvit strek paa
   hvitt fyll ble flatene ett sammenhengende felt. */
.kig__tre-f.er-av{stroke:rgba(22,22,29,.38)}
.kig__tre-f.er-av:hover{stroke:rgba(22,22,29,.75);stroke-width:2}

.kig__tre-hint{
  margin:0;
  padding:12px 20px 15px;
  font-size:12.5px;
  color:var(--ink-3);
}

/* ==================================================================
   De to blikkene side om side

   Flyfotoet svarer paa «er dette huset mitt», modellen paa «hvordan ser
   taket ut». Over hverandre maatte man rulle mellom to bilder av samme
   sak; ved siden av hverandre kan man se begge samtidig.

   Maalene staar under, i full bredde. De hoerer til begge to, og i en
   smal spalte ved siden av et kart ville radene blitt for trange for
   tall.
   ================================================================== */
.kig__duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:20px 0 0;
  align-items:stretch;
}
/* ---- Mens takflatene hentes ----
   Oppslaget tar halvannet til tre sekunder: Geonorge, WAAPI-Bygning og ett
   takflatekall per bygg. Foer dette laa hele boksen paa 55 prosent
   gjennomsiktighet, og siden man akkurat hadde skrevet adressen var det to
   blasse, tomme kort — det ser ut som noe som er i ferde med aa feile.
   Skjelettet viser hvor kartet og modellen kommer, og at det skjer noe. */
.kig__duo.er-laster{opacity:1}
.kig__duo.er-laster .kig__kart-flate,
.kig__duo.er-laster .kig__tre-flate{position:relative}
.kig__duo.er-laster .kig__kart-flate::after,
.kig__duo.er-laster .kig__tre-flate::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 70%);
  background-color:var(--paper-3,#eceae4);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:lm-skjelett 1.25s linear infinite;
}
/* Modellen staar paa morkt, og da maa glansen vaere svakere for ikke aa
   lyse som en lommelykt ved siden av kartet. */
.kig__duo.er-laster .kig__tre-flate::after{
  background-color:var(--ink,#161620);
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,0) 70%);
}
@keyframes lm-skjelett{
  from{background-position:120% 0}
  to{background-position:-120% 0}
}
/* Den som har slaatt av bevegelse skal ikke ha en stripe som gaar fram og
   tilbake i tre sekunder. Flaten alene sier like mye. */
@media (prefers-reduced-motion:reduce){
  .kig__duo.er-laster .kig__kart-flate::after,
  .kig__duo.er-laster .kig__tre-flate::after{animation:none;background-image:none}
}

@media (max-width:900px){
  /* Under 900 er to kart ved siden av hverandre to smale kart. */
  .kig__duo{grid-template-columns:1fr}
}

/* Begge boksene skal ha samme hoyde, saa kartet og modellen staar i linje. */
.kig__duo > *{display:flex;flex-direction:column}
.kig__duo .kig__kart-flate,
.kig__duo .kig__tre-flate{flex:1 1 auto;min-height:300px;height:auto}

/* ---- Maalene, full bredde ---- */
.kig__maal{
  margin:14px 0 4px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg,18px);
  background:var(--white);
  overflow:hidden;
}
.kig__maal .kig__kart-liste{max-height:300px}

/* ---- Detaljene om én flate ---- */
.kig__tre-detalj{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 18px;
  border-top:1px solid var(--line);
  min-height:34px;
}
.kig__tre-detalj-tom{font-size:12.5px;color:var(--ink-3)}

.kig__tre-fakta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin:0;
}
.kig__tre-fakta > div{display:flex;flex-direction:column;gap:1px}
.kig__tre-fakta dt{
  margin:0;
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.kig__tre-fakta dd{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:14.5px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.kig__tre-veksle{
  flex:0 0 auto;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  padding:8px 15px;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
}
.kig__tre-veksle:hover{background:var(--ink-2)}
/* Er flaten alt valgt vekk, tilbyr knappen det motsatte — og skal da
   ikke se ut som den viktigste handlingen i boksen. */
.kig__tre-veksle.er-av{
  background:var(--white);
  color:var(--ink);
  border-color:var(--line);
}
.kig__tre-veksle.er-av:hover{border-color:var(--ink);background:var(--paper-2)}

/* Merknaden staar der verktoylinjen sto, i full bredde under tallene.
   Den sier hva trykket i modellen gjoer — begge veier, for det er ett
   trykk som baade tar vekk og tar med igjen. */
/* ==================================================================
   Den faste linjen paa adressesteget
   ================================================================== */
.kig__fast{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(20,20,30,.07);
}
/* Fargen og streken gaar fra kant til kant; innholdet gjoer det ikke.
   .wrap gir samme bredde og samme sidemarg som siden over, saa taket i
   linjen staar under kartet og knappen under sidespalten. */
.kig__fast-inn{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:10px;
  padding-bottom:10px;
}
.kig__fast[hidden]{display:none}
/* Plass under innholdet, saa linjen ikke dekker det siste man ruller til. */
body.kig--fast .kig__hoved{padding-bottom:86px}

/* Taket i miniatyr. SVG-en er kopiert fra modellen og har sin egen
   viewBox, saa den skalerer seg selv ned i ruten. */
.kig__fast-tak{
  flex:0 0 auto;
  display:block;
  width:64px;height:46px;
  border-radius:9px;
  background:var(--ink,#161620);
  overflow:hidden;
}
.kig__fast-tak svg{display:block;width:100%;height:100%}

.kig__fast-adr{flex:1 1 auto;min-width:0}
.kig__fast-adr b{
  display:block;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kig__fast-adr small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-2)}

.kig__fast-pris{flex:0 0 auto;text-align:right}
.kig__fast-pris small{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.kig__fast-pris small{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.kig__fast-pris b{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}

.kig__fast-knapp{flex:0 0 auto}

@media (max-width:760px){
  /* Paa telefon finnes mobillinjen allerede, og to faste linjer nederst
     er én for mye. */
  .kig__fast{display:none}
  body.kig--fast .kig__hoved{padding-bottom:0}
}

.kig__tre-merk{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  /* Lys merkefarge i stedet for en strek: baandet er en instruksjon og
     ikke en fotnote, og kortet har overflow:hidden, saa fargen foelger
     de runde hjoernene nederst. */
  background:var(--brand-100);
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-2);
}
/* Baandet under kartet. Skal staa paa én linje: bryter den, ser det ut
   som to beskjeder i stedet for en. Paa smal skjerm faar den bryte — da er
   kortet i full bredde og setningen har plass uansett. */
.kig__kart-merk{white-space:nowrap}
.kig__kart-merk a{color:inherit;font-weight:700}
@media (max-width:900px){.kig__kart-merk{white-space:normal}}

.kig__tre-merk::before{
  content:"";
  flex:0 0 auto;
  width:14px;height:14px;
  background:currentColor;
  -webkit-mask:var(--ikon-trykk) center / contain no-repeat;
  mask:var(--ikon-trykk) center / contain no-repeat;
}