/* Lokaler Innlandet — designsystem.
   Uttrykk: varmt papir, blekk og messing. Stor serif-display mot tett grotesk.
   Nesten skarpe hjørner (2px), hårfine linjer, mye luft. Ingen runde bokser,
   ingen skygger som flyter — alt skal se trykt ut, ikke generert. */

:root {
  --papir:      #faf8f5;
  --papir-2:    #f3efe8;
  --papir-3:    #ebe5db;
  --blekk:      #16181c;
  --blekk-2:    #2a2d33;
  --grå:        #6b6760;
  --grå-2:      #97928a;
  --linje:      #e2dbd0;
  --linje-2:    #d3cabc;
  --messing:    #8a6a3b;
  --messing-2:  #c2a172;
  --messing-3:  #f0e7d8;
  --tre:        #ba7649;  /* samplet fra Fåberggata-bildet — brukes i ordmerket */
  --tre-mork:   #915c39;
  --grønn:      #3f6b4e;
  --rød:        #9c3b2e;

  --maks: 1240px;
  --r: 2px;
  --t: 220ms cubic-bezier(.2, .7, .3, 1);

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--blekk);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv05';
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--messing-2); color: var(--blekk); }

:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; }

/* ── Grunnformer ─────────────────────────────────────────────────────────── */

.wrap { max-width: var(--maks); margin: 0 auto; padding: 0 28px; }
.wrap--smal { max-width: 780px; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--messing);
}
.label--lys { color: var(--messing-2); }
.label--grå { color: var(--grå-2); }

.hr { height: 1px; background: var(--linje); border: 0; }

/* ── Topplinje ───────────────────────────────────────────────────────────── */

.topp {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 245, .88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--linje);
}
.topp__rad {
  display: flex; align-items: center; gap: 32px;
  height: 68px;
}
/* Logoen: nøkkelhull i treverksfelt, «Lokaler Innlandet» i Libre Caslon.
   Aldri lavere enn 32 px — se «3 Profil og logo/Profilmanual.html» i kundemappa. */
.merke { display: flex; align-items: center; margin-right: auto; line-height: 0; }
.merke__logo { height: 46px; width: auto; display: block; }
.meny { display: flex; gap: 28px; align-items: center; }
.meny a { font-size: 14.5px; color: var(--grå); transition: color var(--t); }
.meny a:hover, .meny a[aria-current] { color: var(--blekk); }

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border: 1px solid var(--blekk); background: var(--blekk);
  color: var(--papir); border-radius: var(--r); cursor: pointer;
  font-size: 14.5px; font-weight: 500; letter-spacing: .005em;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.knapp:hover { background: var(--messing); border-color: var(--messing); }
.knapp:active { transform: translateY(1px); }
.knapp--linje { background: transparent; color: var(--blekk); }
.knapp--linje:hover { background: var(--blekk); color: var(--papir); border-color: var(--blekk); }
.knapp--lys { background: var(--papir); color: var(--blekk); border-color: var(--papir); }
.knapp--lys:hover { background: var(--messing-2); border-color: var(--messing-2); }
.knapp--liten { padding: 9px 15px; font-size: 13.5px; }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }

.meny-knapp { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { background: var(--blekk); color: var(--papir); padding: 92px 0 0; overflow: hidden; position: relative; }

/* Bilde i toppen: ekte foto med mørkt overlegg, så tekst og søkeboks holder kontrasten */
.hero--bilde { background-size: cover; background-position: center 65%; }
.hero--bilde::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,24,28,.62) 0%, rgba(22,24,28,.74) 45%, rgba(22,24,28,.94) 100%);
  z-index: 0;
}
.hero--bilde > .wrap { position: relative; z-index: 1; }

.hero__inn { display: grid; gap: 22px; max-width: 930px; }
.hero h1 { font-size: clamp(46px, 7.4vw, 88px); }
.hero h1 em { font-style: normal; color: var(--messing-2); }
.hero__ingress {
  font-size: clamp(17px, 1.6vw, 19.5px); color: #c9c4bb; max-width: 62ch; line-height: 1.55;
}
.hero__tall {
  display: flex; flex-wrap: wrap; gap: 44px;
  margin-top: 26px; padding: 26px 0 0; border-top: 1px solid rgba(250,248,245,.14);
}
.hero__tall div { display: grid; gap: 3px; }
.hero__tall b { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; }
.hero__tall span { font-size: 12.5px; color: var(--grå-2); }

/* Søkefelt over bruddet mellom mørk og lys */
.sokeboks {
  margin: 56px 0 -42px; background: var(--papir); color: var(--blekk);
  border: 1px solid var(--linje-2); border-radius: var(--r);
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 0;
}
.sokeboks > * { border-right: 1px solid var(--linje); }
.sokeboks > *:last-child { border-right: 0; }
.sokeboks__felt { display: grid; gap: 2px; padding: 15px 20px; }
.sokeboks__felt label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--grå-2); }
.sokeboks input, .sokeboks select {
  border: 0; background: transparent; font-size: 16px; width: 100%; padding: 2px 0;
}
.sokeboks input:focus, .sokeboks select:focus { outline: none; }
.sokeboks__knapp { display: grid; padding: 10px; }
.sokeboks__knapp .knapp { height: 100%; }

/* ── Seksjoner ───────────────────────────────────────────────────────────── */

.seksjon { padding: 96px 0; }
.seksjon--tett { padding: 64px 0; }
.seksjon--papir2 { background: var(--papir-2); }
.seksjon--mork { background: var(--blekk); color: var(--papir); }

.seksjon__topp {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--linje);
}
.seksjon__topp h2 { font-size: clamp(30px, 3.6vw, 44px); }
.seksjon__topp p { color: var(--grå); font-size: 15.5px; margin-top: 8px; max-width: 58ch; }
.seksjon--mork .seksjon__topp { border-color: rgba(250,248,245,.14); }
.seksjon--mork .seksjon__topp p { color: #b4afa6; }

.lenke-pil { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; white-space: nowrap; border-bottom: 1px solid var(--linje-2); padding-bottom: 3px; transition: border-color var(--t), color var(--t); }
.lenke-pil:hover { color: var(--messing); border-color: var(--messing); }
.lenke-pil::after { content: '→'; transition: transform var(--t); }
.lenke-pil:hover::after { transform: translateX(3px); }

/* ── Lokalekort ──────────────────────────────────────────────────────────── */

.rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
.rutenett--2 { grid-template-columns: repeat(2, 1fr); }
.rutenett--4 { grid-template-columns: repeat(4, 1fr); gap: 28px 22px; }

.kort { display: grid; gap: 14px; position: relative; }
.kort__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--papir-3); border-radius: var(--r);
}
.kort__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms cubic-bezier(.2,.7,.3,1); }
.kort:hover .kort__foto img { transform: scale(1.035); }

/* Plassholder når bildet mangler — bevisst grafisk, ikke en tom boks */
.foto--tom {
  display: grid; align-content: space-between; padding: 18px 20px;
  background:
    repeating-linear-gradient(135deg, rgba(138,106,59,.055) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--papir-3), var(--messing-3));
}
.foto--tom .foto__type { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--messing); }
.foto--tom .foto__adr { font-family: var(--serif); font-size: 27px; line-height: 1.08; color: var(--blekk-2); }

.merkelapp {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  background: var(--blekk); color: var(--messing-2);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r);
}
.merkelapp--lys { background: var(--papir); color: var(--messing); }
.merkelapp--utkast { background: var(--rød); color: #fff; }
/* Utleid og solgt: dempet, ikke rødt. Det er ikke en feil at noe er leid ut —
   det er beviset på at katalogen virker. Kortet dempes litt, men blir stående. */
.merkelapp--tatt { background: var(--grå); color: var(--papir); }
.kort:has(.merkelapp--tatt) .kort__foto { filter: grayscale(.55) brightness(.94); }

/* Beskjeden øverst på et lokale som er ute av markedet */
.tatt {
  margin-top: 14px; padding: 12px 16px;
  background: var(--papir-3); border-left: 3px solid var(--grå);
  font-size: 15.5px; color: var(--blekk-2);
}
.tatt a { color: var(--messing); text-decoration: underline; text-underline-offset: 3px; }
/* Høyre hjørne sier alltid hva lokalet er. Venstre er redaksjonelt (Anbefalt,
   Utkast), så de to kolliderer aldri. */
.merkelapp--hjorne { left: auto; right: 13px; }
.merkelapp--leie { background: var(--papir); color: var(--blekk); }
.merkelapp--salg { background: var(--messing); color: #fff; }

.kort__meta { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grå-2); }
.kort h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.15; }
.kort a.kort__lenke::after { content: ''; position: absolute; inset: 0; }
.kort:hover h3 { color: var(--messing); }
.kort h3 { transition: color var(--t); }
.kort__fakta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--grå);
  padding-top: 11px; border-top: 1px solid var(--linje);
}
.kort__fakta b { font-weight: 500; color: var(--blekk); }

/* ── Kategorirad ─────────────────────────────────────────────────────────── */

.kategorier { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--linje-2); border-radius: var(--r);
  padding: 10px 16px; font-size: 14.5px; background: var(--papir);
  transition: border-color var(--t), background var(--t), color var(--t);
  cursor: pointer;
}
.chip:hover { border-color: var(--blekk); }
.chip[aria-pressed="true"], .chip--aktiv { background: var(--blekk); color: var(--papir); border-color: var(--blekk); }
.chip span { color: var(--grå-2); font-size: 12.5px; }
.chip[aria-pressed="true"] span, .chip--aktiv span { color: var(--messing-2); }

/* ── Detaljside ──────────────────────────────────────────────────────────── */

.detalj { display: grid; grid-template-columns: 1.55fr 1fr; gap: 60px; align-items: start; }
.detalj__galleri { display: grid; gap: 10px; }
.detalj__hoved { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--papir-3); }
.detalj__hoved img { width: 100%; height: 100%; object-fit: cover; }
.detalj__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.detalj__mini img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); cursor: pointer; opacity: .82; transition: opacity var(--t); }
.detalj__mini img:hover { opacity: 1; }

.faktaliste { display: grid; gap: 0; margin: 28px 0; border-top: 1px solid var(--linje); }
.faktaliste div {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--linje); font-size: 15.5px;
}
.faktaliste dt { color: var(--grå); }
.faktaliste dd { font-weight: 500; }

.brodtekst { font-size: 17px; line-height: 1.72; color: var(--blekk-2); }
.brodtekst p + p { margin-top: 15px; }

.sidepanel {
  position: sticky; top: 92px;
  border: 1px solid var(--linje-2); border-radius: var(--r); background: var(--papir);
}
.sidepanel__topp { padding: 24px 26px; border-bottom: 1px solid var(--linje); }
.sidepanel__pris { font-family: var(--serif); font-size: 32px; line-height: 1.1; }
.sidepanel__inn { padding: 22px 26px 26px; display: grid; gap: 14px; }
.sidepanel__eier { display: flex; gap: 13px; align-items: center; font-size: 14.5px; }
.sidepanel__eier .ikon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--r);
  background: var(--messing-3); color: var(--messing);
  display: grid; place-items: center; font-family: var(--serif); font-size: 19px;
}
.sidepanel__note { font-size: 13px; color: var(--grå); line-height: 1.5; }

/* ── Skjema ──────────────────────────────────────────────────────────────── */

.skjema { display: grid; gap: 18px; }
.felt { display: grid; gap: 6px; }
.felt > label { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.felt > label span { color: var(--grå-2); font-weight: 400; }
.felt input, .felt select, .felt textarea {
  border: 1px solid var(--linje-2); border-radius: var(--r); background: var(--papir);
  padding: 12px 14px; font-size: 15.5px; width: 100%;
  transition: border-color var(--t), background var(--t);
}
.felt input:focus, .felt select:focus, .felt textarea:focus {
  outline: none; border-color: var(--blekk); background: #fff;
}
.felt textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.felt__hjelp { font-size: 12.5px; color: var(--grå); }
.felt--to { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Selskapssøk mot Enhetsregisteret */
.selskapssok { position: relative; }
.selskapssok__treff {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--linje-2); border-radius: var(--r);
  max-height: 290px; overflow-y: auto; box-shadow: 0 14px 34px -16px rgba(22,24,28,.34);
}
.selskapssok__treff[hidden] { display: none; }
.selskapssok__treff button {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--linje); background: transparent; cursor: pointer;
}
.selskapssok__treff button:last-child { border-bottom: 0; }
.selskapssok__treff button:hover, .selskapssok__treff button:focus { background: var(--papir-2); }
.selskapssok__treff b { font-size: 15px; font-weight: 500; }
.selskapssok__treff small { font-size: 12.5px; color: var(--grå); }

.valgt-selskap {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  border: 1px solid var(--messing-2); background: var(--messing-3);
  border-radius: var(--r); padding: 13px 15px;
}
.valgt-selskap[hidden] { display: none; }
.valgt-selskap b { font-size: 15.5px; }
.valgt-selskap small { display: block; font-size: 12.5px; color: var(--messing); margin-top: 2px; }
.valgt-selskap button { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--messing); text-decoration: underline; }

.avkrysning { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.avkrysning input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--messing); flex: 0 0 auto; }

.svar { padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; border: 1px solid; }
.svar[hidden] { display: none; }
.svar--ok { border-color: var(--grønn); background: #eef3ee; color: var(--grønn); }
.svar--feil { border-color: var(--rød); background: #f9eeec; color: var(--rød); }

/* ── Priskort ────────────────────────────────────────────────────────────── */

.priser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.pris {
  border: 1px solid var(--linje-2); border-radius: var(--r); background: var(--papir);
  padding: 30px 28px 32px; display: grid; gap: 18px; position: relative;
}
.pris--valgt { border-color: var(--blekk); background: var(--blekk); color: var(--papir); }
.pris--valgt .pris__belop small, .pris--valgt li { color: #c3beb5; }
.pris__navn { font-family: var(--serif); font-size: 26px; }
.pris__belop { font-family: var(--serif); font-size: 44px; line-height: 1; }
.pris__belop small { font-family: var(--sans); font-size: 14px; color: var(--grå); display: block; margin-top: 6px; line-height: 1.45; }
.pris ul { list-style: none; display: grid; gap: 9px; font-size: 14.5px; color: var(--blekk-2); }
.pris li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.pris li::before { content: '—'; color: var(--messing); }
.pris--valgt li::before { color: var(--messing-2); }
.pris__stempel {
  position: absolute; top: -11px; right: 22px;
  background: var(--messing); color: #fff; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r);
}

/* ── Sitat / poeng ───────────────────────────────────────────────────────── */

.poeng { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.poeng > div { display: grid; gap: 10px; align-content: start; }
.poeng__nr { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--messing-2); }
.poeng h3 { font-size: 18px; font-weight: 500; }
.poeng p { font-size: 15px; color: var(--grå); line-height: 1.62; }
.seksjon--mork .poeng p { color: #b4afa6; }

/* ── Bunn ────────────────────────────────────────────────────────────────── */

.bunn { background: var(--blekk); color: #b4afa6; padding: 68px 0 34px; font-size: 14.5px; }
.bunn__rad { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.bunn h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--messing-2); margin-bottom: 14px; font-weight: 500; }
.bunn ul { list-style: none; display: grid; gap: 8px; }
.bunn a:hover { color: var(--papir); }
.bunn__merke { line-height: 0; }
.bunn__logo { height: 58px; width: auto; display: block; }
.bunn__slutt {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(250,248,245,.13);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px; color: var(--grå-2);
}

/* ── Demobanner ──────────────────────────────────────────────────────────── */

.demo-banner {
  background: var(--rød); color: #fff; text-align: center;
  padding: 9px 20px; font-size: 13.5px; letter-spacing: .01em;
}

/* ── Tomtilstand ─────────────────────────────────────────────────────────── */

.tom {
  border: 1px dashed var(--linje-2); border-radius: var(--r);
  padding: 54px 30px; text-align: center; display: grid; gap: 12px; justify-items: center;
}
.tom h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; }
.tom p { color: var(--grå); max-width: 46ch; }

/* ── Responsivt ──────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .rutenett, .rutenett--4 { grid-template-columns: repeat(2, 1fr); }
  .detalj { grid-template-columns: 1fr; gap: 42px; }
  .sidepanel { position: static; }
  .poeng { grid-template-columns: 1fr; gap: 32px; }
  .priser { grid-template-columns: 1fr; }
  .bunn__rad { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .topp__rad { height: auto; padding-block: 11px; gap: 14px; flex-wrap: wrap; row-gap: 9px; }
  .meny { order: 3; width: 100%; gap: 20px; flex-wrap: wrap; }
  .meny a { font-size: 14px; }
  .knapp--liten { white-space: nowrap; }
  .hero { padding-top: 58px; }
  .seksjon { padding: 62px 0; }
  .seksjon__topp { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sokeboks { grid-template-columns: 1fr; margin-bottom: -34px; }
  .sokeboks > * { border-right: 0; border-bottom: 1px solid var(--linje); }
  .sokeboks > *:last-child { border-bottom: 0; }
  .rutenett, .rutenett--2, .rutenett--4 { grid-template-columns: 1fr; gap: 30px; }
  .hero__tall { gap: 26px; }
  .hero__tall b { font-size: 28px; }
  .faktaliste div { grid-template-columns: 1fr; gap: 2px; }
  .felt--to { grid-template-columns: 1fr; }
  .bunn__rad { grid-template-columns: 1fr; }
  .detalj__mini { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .topp, .bunn, .sidepanel, .sokeboks { display: none; }
  body { background: #fff; font-size: 12px; }
}

/* ── Bildeopplasting i innmeldingsskjemaet ───────────────────────────────── */

.felt input[type="file"] {
  padding: 10px 12px; font-size: 14.5px; cursor: pointer;
  background: var(--papir-2);
}
.felt input[type="file"]::file-selector-button {
  font: inherit; font-size: 13.5px; margin-right: 12px; cursor: pointer;
  border: 1px solid var(--blekk); background: var(--blekk); color: var(--papir);
  padding: 7px 13px; border-radius: var(--r);
}
.felt input[type="file"]::file-selector-button:hover { background: var(--messing); border-color: var(--messing); }

.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 12px; }
.bilder[hidden] { display: none; }
.bilde {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  background: var(--papir-3); border: 1px solid var(--linje-2);
}
.bilde img { width: 100%; height: 100%; object-fit: cover; }
.bilde__fjern {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; line-height: 1;
  border: 0; border-radius: 2px; cursor: pointer; font-size: 15px;
  background: rgba(22,24,28,.82); color: var(--papir);
}
.bilde__fjern:hover { background: var(--rød); }
.bilde__nr {
  position: absolute; bottom: 5px; left: 5px; font-size: 10.5px; letter-spacing: .1em;
  background: rgba(22,24,28,.82); color: var(--messing-2); padding: 3px 7px; border-radius: 2px;
}
.bilde--jobber { display: grid; place-items: center; color: var(--grå); font-size: 12.5px; }

/* ── Oppgradering og fototillegg på salgssiden ───────────────────────────── */

.callout-oppgradering {
  margin-top: 30px; padding: 22px 26px; border: 1px solid var(--linje-2);
  border-left: 4px solid var(--messing); border-radius: 0 var(--r) var(--r) 0;
  background: var(--papir-2);
}
.callout-oppgradering p { margin-top: 8px; max-width: 72ch; font-size: 15.5px; color: var(--blekk-2); }

.tillegg { display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linje); font-size: 15px; }
.tillegg strong { font-weight: 500; }

/* ── Veiviser (steg-for-steg søkeskjema) ──────────────────────────────────── */

.veiviser { margin-bottom: 32px; }
.veiviser__fremdrift { display: flex; gap: 6px; margin-bottom: 12px; }
.veiviser__seg {
  flex: 1; height: 4px; border-radius: 2px; background: var(--linje-2);
  transition: background var(--t);
}
.veiviser__seg--aktiv, .veiviser__seg--fullfort { background: var(--blekk); }
.veiviser__seg--fullfort { background: var(--tre, var(--messing)); }
.veiviser__tekst { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grå); }

.steg { border: 0; display: grid; gap: 18px; animation: steg-inn 260ms ease; }
.steg[hidden] { display: none; }
@keyframes steg-inn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.steg-knapper { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }
.steg-knapper .knapp[hidden] { display: none; }
.steg-knapper > :last-child:not([hidden]) { margin-left: auto; }

/* ── Todelt header: tekst til venstre, forespørselskort til høyre ─────────── */

.hero--todelt { padding: 72px 0 84px; }
.hero__rad {
  display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center;
}
.hero--todelt .hero__inn { max-width: none; }
.hero--todelt .hero h1 { font-size: clamp(40px, 5.2vw, 68px); }

.hero__punkter {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 22px; font-size: 14.5px; color: #c9c4bb;
}
.hero__punkter li { display: flex; align-items: center; gap: 8px; }
.hero__punkter li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tre); flex: 0 0 auto;
}

/* Selve kortet — lyst, løftet, står mot fotoet slik Homni gjør det */
.forespørsel--kort {
  background: var(--papir); color: var(--blekk);
  border-radius: 4px; padding: 30px 30px 26px;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.55);
  gap: 16px;
}
.forespørsel__topp { display: grid; gap: 6px; }
.forespørsel__tittel {
  font-family: 'Libre Caslon Text', var(--serif);
  font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
}
.forespørsel__om { font-size: 14.5px; color: var(--grå); line-height: 1.55; }
.forespørsel--kort .kategorier .chip { font-size: 13.5px; padding: 8px 13px; }
.forespørsel--kort .veiviser { margin-bottom: 4px; }

@media (max-width: 1040px) {
  .hero__rad { grid-template-columns: 1fr; gap: 40px; }
  .hero__kort { max-width: 540px; }
}
@media (max-width: 720px) {
  .hero--todelt { padding: 40px 0 56px; }
  .forespørsel--kort { padding: 24px 20px 22px; }
}

/* ── Fire fotopakker på rad, og betalt synlighet ─────────────────────────── */

.priser--fire { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.priser--fire .pris { padding: 26px 22px 28px; }
.priser--fire .pris__navn { font-size: 21px; line-height: 1.2; }
.priser--fire .pris__belop { font-size: 36px; }

.synlighet {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  border: 1px solid var(--linje-2); border-left: 4px solid var(--tre);
  border-radius: 0 var(--r) var(--r) 0; padding: 32px 36px; background: var(--papir);
}
.synlighet__pris { display: grid; gap: 14px; justify-items: end; text-align: right; }

.steg-knapper[hidden], .veiviser[hidden] { display: none; }

@media (max-width: 1040px) {
  .priser--fire { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .priser--fire { grid-template-columns: 1fr; }
  .synlighet { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .synlighet__pris { justify-items: start; text-align: left; }
}

/* ── Finpuss på forespørselskortet ───────────────────────────────────────── */

/* Neste/Send skal alltid ligge til høyre, Tilbake til venstre — uansett hvilke som vises */
.steg-knapper [data-steg-neste], .steg-knapper [data-steg-send] { margin-left: auto; }
.steg-knapper > :last-child:not([hidden]) { margin-left: auto; }

/* Skillelinje over knappene, som i forbildet — gir kortet en tydelig bunn */
.forespørsel .steg-knapper {
  border-top: 1px solid var(--linje); padding-top: 18px; margin-top: 6px;
}

/* Litt strammere rytme inne i kortet */
.forespørsel--kort { gap: 14px; }
.forespørsel--kort .steg { gap: 15px; }
.forespørsel--kort .felt { gap: 5px; }
.forespørsel__om { font-size: 14px; }

/* På mobil: knappene fyller bredden, Neste øverst */
@media (max-width: 480px) {
  .forespørsel .steg-knapper { flex-direction: column-reverse; align-items: stretch; }
  .forespørsel .steg-knapper .knapp { width: 100%; }
  .steg-knapper [data-steg-neste], .steg-knapper [data-steg-send] { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Min side — kundens egne sider
   Roligere enn katalogen: mindre bilde, mer skjema, tydeligere hva som skjer
   når du trykker. Det er et arbeidsverktøy, ikke en utstilling.
   ═══════════════════════════════════════════════════════════════════════════ */

.kortboks {
  background: var(--papir-2); border: 1px solid var(--linje);
  border-radius: var(--r); padding: 32px;
}
.kortboks--midt { max-width: 440px; margin: 0 auto; }
.knapp--bred { width: 100%; justify-content: center; }
.smatekst { font-size: 14px; color: var(--grå); margin-top: 8px; }
.smatekst a { color: var(--messing); text-decoration: underline; text-underline-offset: 3px; }

.minside__handling { display: flex; gap: 10px; align-items: center; }

/* Avtalen øverst: pakke, hvor mange lokaler som er brukt, og hva som er fakturert */
.avtale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px; margin: 26px 0 34px; padding: 24px;
  background: var(--papir-2); border: 1px solid var(--linje); border-radius: var(--r);
}
.avtale__navn { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin-top: 6px; }
.avtale__pris { font-size: 15px; color: var(--grå); }
.avtale__pris span { font-size: 13px; }
.avtale__tall { font-family: var(--serif); font-size: 24px; margin-top: 6px; }
.avtale__tall--fullt { color: var(--tre); }

/* Listen over egne lokaler */
.minside__liste { display: grid; gap: 10px; }
.minside__rad {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  padding: 18px 20px; background: var(--papir-2);
  border: 1px solid var(--linje); border-radius: var(--r);
  text-decoration: none; color: inherit; transition: border-color var(--t), background var(--t);
}
.minside__rad:hover { border-color: var(--messing); background: var(--papir-3); }
.minside__tittel { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.minside__meta { font-size: 13.5px; color: var(--grå); margin-top: 4px; }
.minside__status { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.minside__pil { color: var(--messing); font-size: 18px; }

/* Statuspiller. Fargen sier hva som er ute og hva som venter. */
.pille {
  display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r); background: var(--papir-3);
  color: var(--blekk-2); border: 1px solid var(--linje); white-space: nowrap;
}
.pille--publisert { background: var(--blekk); color: var(--messing-2); border-color: var(--blekk); }
.pille--til_godkjenning { background: var(--messing); color: #fff; border-color: var(--messing); }
.pille--utleid, .pille--solgt { background: var(--grå); color: var(--papir); border-color: var(--grå); }
.pille--inaktiv { color: var(--grå); }
.pille--venter { background: var(--papir); color: var(--tre); border-color: var(--tre); }

.nytt { margin-top: 32px; }
.nytt summary { cursor: pointer; display: inline-flex; list-style: none; }
.nytt summary::-webkit-details-marker { display: none; }
.nytt__skjema {
  margin-top: 20px; padding: 24px; background: var(--papir-2);
  border: 1px solid var(--linje); border-radius: var(--r); max-width: 620px;
}

/* Redigeringssiden */
.rediger { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.rediger__hoved { display: grid; gap: 22px; min-width: 0; }
.boks {
  padding: 26px; background: var(--papir-2);
  border: 1px solid var(--linje); border-radius: var(--r);
}
.boks__tittel { font-family: var(--serif); font-weight: 400; font-size: 23px; }
.boks--fest { position: sticky; top: 24px; }
.boks--fest hr { border: 0; border-top: 1px solid var(--linje); margin: 18px 0; }

/* Statusvalget. Hvert valg sier hva som faktisk skjer, ikke bare hva det heter. */
.statusvalg { display: grid; gap: 8px; margin: 16px 0 6px; }
.statusvalg__valg {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;
  padding: 13px 16px; border: 1px solid var(--linje); border-radius: var(--r);
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.statusvalg__valg:hover { border-color: var(--messing); }
.statusvalg__valg.er-valgt { border-color: var(--blekk); background: var(--papir-3); }
.statusvalg__valg input { margin: 0; }
.statusvalg__navn { font-weight: 500; }
.statusvalg__om { grid-column: 2; font-size: 13.5px; color: var(--grå); }
.statusvalg__valg input:disabled ~ * { opacity: .5; }

/* Bilderaden. Dra for å sortere, kryss for å fjerne. */
.bilderad { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.bilderad__bilde {
  position: relative; width: 116px; height: 88px; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--linje); cursor: grab; background: var(--papir-3);
}
.bilderad__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bilderad__bilde.dras { opacity: .4; }
.bilderad__bilde:first-child::after {
  content: 'Hovedbilde'; position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(22,24,28,.82); color: var(--messing-2);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 6px; text-align: center;
}
.bilderad__bilde--venter { border-color: var(--tre); }
.bilderad__merke {
  position: absolute; inset: auto 0 0 0; background: var(--tre); color: #fff;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; text-align: center;
}
.bilderad__bilde--venter:first-child::after { display: none; }
.bilderad__fjern {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(22,24,28,.75); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.bilderad__fjern:hover { background: var(--rød); }
.bildevelger { cursor: pointer; }

/* Fasiliteter: gruppert, så listen ikke blir en vegg av kryssbokser */
.fasiliteter { border: 0; padding: 0; margin: 26px 0 10px; }
.fasiliteter legend {
  font-family: var(--serif); font-size: 23px; padding: 0; margin-bottom: 14px;
}
.fasiliteter__gruppe { margin-bottom: 18px; }
.fasiliteter__valg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 18px; margin-top: 8px;
}
.huk { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.huk input { margin: 3px 0 0; flex: 0 0 auto; }

/* Adresseforslag fra Kartverket */
.felt { position: relative; }
.forslag {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 3px;
  background: var(--papir); border: 1px solid var(--blekk); border-radius: var(--r);
  box-shadow: 0 14px 34px rgba(22,24,28,.14); max-height: 280px; overflow-y: auto;
}
.forslag__valg {
  display: grid; gap: 1px; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--linje); cursor: pointer; font: inherit;
}
.forslag__valg:last-child { border-bottom: 0; }
.forslag__valg:hover { background: var(--papir-3); }
.forslag__valg b { font-weight: 500; }
.forslag__valg span { font-size: 13px; color: var(--grå); }

.passordboks {
  margin: 28px 0 6px; padding: 22px; border-radius: var(--r);
  background: var(--papir-3); border: 1px solid var(--linje);
}

.callout--vent { border-color: var(--tre); }
.hint { display: block; font-size: 13px; color: var(--grå); margin-top: 5px; }

@media (max-width: 860px) {
  .rediger { grid-template-columns: 1fr; }
  .boks--fest { position: static; }
  .minside__rad { grid-template-columns: 1fr auto; }
  .minside__pil { display: none; }
}

/* Merknadsboks. Fantes bare som .callout-oppgradering før, så alle andre
   callouts sto helt uten ramme. */
.callout {
  margin: 18px 0; padding: 14px 18px; border-radius: var(--r);
  background: var(--papir-3); border-left: 3px solid var(--messing);
}
.callout p { font-size: 15px; color: var(--blekk-2); }
.callout p + p { margin-top: 8px; }

/* Jevn avstand mellom felt i kunde-skjemaene */
.boks .felt, .nytt__skjema .felt, .passordboks .felt { margin-bottom: 17px; }
.boks .felt--to, .nytt__skjema .felt--to { margin-bottom: 0; }
.boks .felt:last-of-type, .nytt__skjema .felt:last-of-type { margin-bottom: 0; }
@media (max-width: 620px) { .felt--to { grid-template-columns: 1fr; } }

/* ── Fasiliteter og kart på lokalesiden ──────────────────────────────────── */

.fasilitetsliste, .kart { margin-top: 44px; }
.fasilitetsliste h2, .kart h2 {
  font-family: var(--serif); font-weight: 400; font-size: 27px; margin-bottom: 18px;
}
.fasilitetsliste__gruppe { margin-bottom: 20px; }
.fasilitetsliste__gruppe ul {
  list-style: none; margin-top: 9px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 5px 20px;
}
.fasilitetsliste__gruppe li {
  position: relative; padding-left: 20px; font-size: 15.5px; color: var(--blekk-2);
}
/* Haken tegnes i CSS — et ikonbibliotek for én hake er ikke verdt vekten */
.fasilitetsliste__gruppe li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 9px; height: 5px; border-left: 1.6px solid var(--messing);
  border-bottom: 1.6px solid var(--messing); transform: rotate(-45deg);
}

.kart__boks {
  height: 340px; border: 1px solid var(--linje); border-radius: var(--r);
  background: var(--papir-3); overflow: hidden;
}
.kart__tekst { padding: 20px; color: var(--grå); }
.kart__kilde { margin-top: 9px; font-size: 12.5px; color: var(--grå-2); }
/* Leaflets egen ramme er grå og rund — den skal ikke bryte med resten */
.kart__boks .leaflet-container { background: var(--papir-3); font: inherit; }
.kart__boks .leaflet-popup-content-wrapper,
.kart__boks .leaflet-popup-tip { border-radius: var(--r); }

/* Smale telefoner: wordmarket må gi plass til knappen ved siden av */
@media (max-width: 460px) {
  .merke__logo { height: 38px; }
  .knapp--liten { padding: 8px 12px; font-size: 12.5px; }
  .meny { gap: 16px; }
}

/* Feltene i innloggingsboksen trengte samme loddrette rytme som resten.
   Uten dette klistret passordfeltet seg til Logg inn-knappen. */
.kortboks .felt { margin-bottom: 16px; }
.kortboks form .svar { margin-bottom: 14px; }

/* Glemt passord ligger sammenfoldet, så det ikke konkurrerer med innloggingen */
.glemt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linje); }
.glemt summary {
  cursor: pointer; font-size: 14px; color: var(--messing);
  text-decoration: underline; text-underline-offset: 3px; list-style: none;
}
.glemt summary::-webkit-details-marker { display: none; }
.glemt form { margin-top: 14px; }
.glemt .felt { margin-bottom: 14px; }

/* ── Forsiden: to valg ─────────────────────────────────────────────────────── */

/* Finn ditt lokale / Si hva du søker etter. Det er de to tingene en leietaker
   kommer for, og de skal være det første de ser. */
.hero__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 4px; }
.knapp--linje-lys { background: transparent; color: var(--papir); border-color: rgba(250,248,245,.55); }
.knapp--linje-lys:hover { background: var(--papir); color: var(--blekk); border-color: var(--papir); }

/* Leie eller kjøpe — to store dører */
.valgpar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.valgpar__valg {
  display: grid; gap: 6px; padding: 26px 26px 24px;
  background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r);
  text-decoration: none; color: inherit; transition: border-color var(--t), transform var(--t);
}
.valgpar__valg:hover { border-color: var(--messing); transform: translateY(-2px); }
.valgpar__tall { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--messing); }
.valgpar__navn { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.valgpar__om { font-size: 15px; color: var(--grå); }

.byrad { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linje); }
.byrad .kategorier { margin-top: 10px; }

@media (max-width: 720px) {
  .valgpar { grid-template-columns: 1fr; }
  .valgpar__tall { font-size: 36px; }
  .valgpar__navn { font-size: 22px; }
  .hero__knapper .knapp { flex: 1 1 auto; }
}

/* ── Lokalesiden: galleri og sidepanel ───────────────────────────────────── */

/* Småbildene er knapper. Det valgte har ramme, så man ser hvilket som vises. */
.detalj__minibilde {
  padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
  border-radius: var(--r); overflow: hidden; line-height: 0;
  transition: border-color var(--t), opacity var(--t);
}
.detalj__minibilde img { width: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: .72; transition: opacity var(--t); }
.detalj__minibilde:hover img, .detalj__minibilde.er-valgt img { opacity: 1; }
.detalj__minibilde.er-valgt { border-color: var(--blekk); }
.detalj__minibilde:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }
.detalj__mini { grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
.detalj__hoved img { transition: opacity .15s; }

/* Det viktigste øverst: areal, type, adresse */
.sidepanel__kjerne { padding: 24px 26px 20px; border-bottom: 1px solid var(--linje); display: grid; gap: 4px; }
.sidepanel__areal { font-family: var(--serif); font-size: 42px; line-height: 1; }
.sidepanel__typer { font-size: 15.5px; color: var(--blekk); margin-top: 6px; }
.sidepanel__adresse { font-size: 14.5px; color: var(--grå); }
.sidepanel__kjerne .merkelapp--inline { justify-self: start; margin-top: 10px; }
.merkelapp--inline {
  display: inline-block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r); border: 1px solid var(--linje);
}
.merkelapp--inline.merkelapp--leie { background: var(--papir-3); color: var(--blekk); }
.merkelapp--inline.merkelapp--salg { background: var(--messing); color: #fff; border-color: var(--messing); }
.merkelapp--inline.merkelapp--tatt { background: var(--grå); color: var(--papir); border-color: var(--grå); }
.sidepanel__eier { display: grid; gap: 2px; }

@media (max-width: 720px) {
  .detalj__mini { grid-template-columns: repeat(4, 1fr); }
  .sidepanel__areal { font-size: 36px; }
}

/* ── Legg ut: rett på skjemaet ───────────────────────────────────────────── */

.legg-ut { padding-top: 46px; }
.legg-ut__tittel { font-size: clamp(34px, 5vw, 54px); margin: 8px 0 6px; }
.legg-ut__ingress { color: var(--grå); font-size: 17px; margin-bottom: 26px; }
.legg-ut__skjema { display: grid; gap: 18px; }
.legg-ut__send { width: 100%; justify-content: center; padding: 16px 22px; font-size: 16px; }
.legg-ut__fot { font-size: 13.5px; color: var(--grå); text-align: center; margin-top: -6px; }

/* Tre nummererte steg. Man ser hvor langt det er igjen, uten en veiviser. */
.stegboks {
  border: 1px solid var(--linje); border-radius: var(--r);
  background: var(--papir-2); padding: 20px 22px 8px; margin: 0; min-width: 0;
}
.stegboks .felt { margin-bottom: 16px; }
.stegboks legend {
  display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-left: -8px;
  font-family: var(--serif); font-size: 22px;
}
.stegboks legend span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blekk); color: var(--papir); font-family: var(--sans, inherit); font-size: 13px;
}

/* Etikett for en gruppe (avkrysning), som ser ut som vanlige feltetiketter */
.felt__etikett { display: block; font-size: 13px; font-weight: 500; letter-spacing: .01em; margin-bottom: 8px; }
.felt__etikett span { color: var(--grå-2); font-weight: 400; }

/* Type lokale: flere kan velges */
.typevalg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.typevalg .huk {
  padding: 10px 12px; border: 1px solid var(--linje-2); border-radius: var(--r);
  background: var(--papir); transition: border-color var(--t), background var(--t);
}
.typevalg .huk:has(input:checked) { border-color: var(--blekk); background: var(--papir-3); }

/* Pakkevalg som tre kort */
.pakkevalg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.pakkevalg__valg {
  position: relative; display: grid; gap: 4px; cursor: pointer;
  padding: 16px 14px; border: 1px solid var(--linje-2); border-radius: var(--r); background: var(--papir);
  transition: border-color var(--t), background var(--t);
}
.pakkevalg__valg input { position: absolute; opacity: 0; pointer-events: none; }
.pakkevalg__valg:hover { border-color: var(--messing); }
.pakkevalg__valg:has(input:checked) { border: 2px solid var(--blekk); padding: 15px 13px; background: var(--papir-3); }
.pakkevalg__valg:has(input:focus-visible) { outline: 2px solid var(--messing); outline-offset: 2px; }
.pakkevalg__navn { font-size: 14px; font-weight: 500; }
.pakkevalg__pris { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.pakkevalg__pris small { font-family: var(--sans, inherit); font-size: 13px; color: var(--grå); }
.pakkevalg__stempel {
  position: absolute; top: -9px; right: 10px; background: var(--messing); color: #fff;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r);
}

@media (max-width: 620px) {
  .pakkevalg { grid-template-columns: 1fr; }
  .pakkevalg__valg { grid-template-columns: 1fr auto; align-items: center; }
  .pakkevalg__navn { grid-column: 1; }
  .pakkevalg__pris { grid-column: 2; grid-row: 1; }
  .stegboks { padding: 16px 14px 4px; }
}

/* ── Min side: foto, film og synlighet ───────────────────────────────────── */

.tilvalg { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--linje); }
.tilvalg__tittel { font-family: var(--serif); font-weight: 400; font-size: 30px; }
.tilvalg__lokale { max-width: 360px; margin-top: 14px; }
.tilvalg__kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 18px; }
.tilvalgkort {
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 18px;
  background: var(--papir-2); border: 1px solid var(--linje); border-radius: var(--r);
}
.tilvalgkort--synlighet { background: var(--blekk); color: var(--papir); border-color: var(--blekk); }
.tilvalgkort--synlighet .tilvalgkort__om { color: var(--grå-2); }
.tilvalgkort--synlighet .knapp { background: var(--messing); border-color: var(--messing); }
.tilvalgkort__navn { font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.tilvalgkort__om { font-size: 13.5px; color: var(--grå); line-height: 1.5; }
.tilvalgkort__bunn { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.tilvalgkort__pris { font-family: var(--serif); font-size: 24px; }
.tilvalgkort .knapp[disabled] { opacity: .7; cursor: default; }

/* .felt input gir full bredde og padding — ikke for avkrysning og radio */
.felt input[type="checkbox"], .felt input[type="radio"] {
  width: auto; padding: 0; border: 0; border-radius: 0; background: none;
  accent-color: var(--blekk); width: 16px; height: 16px;
}
.typevalg .huk { align-items: center; font-size: 14.5px; line-height: 1.25; }
.typevalg .huk input { margin: 0; }

/* Nøkkeltall på /legg-ut/ */
.legg-ut__tall {
  list-style: none; margin: -8px 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: var(--grå);
}
.legg-ut__tall b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--blekk); margin-right: 4px; }
.legg-ut__tall[hidden], .legg-ut__tall li[hidden] { display: none; }

/* Min side: selskap og kontaktinfo */
.kontaktboks { background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; display: grid; gap: 14px; }
.kontaktboks__topp { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; align-items: flex-start; }
.kontaktboks__selskap { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin-top: 4px; }
.kontaktboks__henv { max-width: 42ch; font-size: 14.5px; color: var(--grå); margin: 0; }
.kontaktboks__henv b { color: var(--blekk); font-weight: 500; }
.kontaktboks__felt { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kontaktboks .knapp { justify-self: start; }