/* Kartstudio – forside og butikk.
 * Ingen eksterne ressurser: skriftene ligger i ../../fonts/ (de samme som plakatene settes i).
 *
 * Innhold:
 *   1. Grunnlag (farger, skrift, typografi)      5. Forside: hero, stripe, detaljer, steg
 *   2. Topp og bunn                              6. Galleri og kort
 *   3. Knapper og småting                        7. Elvekart (mørk), priser, avslutning
 *   4. Plakat i ramme på vegg (.vegg / .mock)    8. Produktside, juridiske sider, bevegelse
 */

@font-face {
  font-family: "Fraunces";
  src: url("../../fonts/Fraunces%5BSOFT%2CWONK%2Copsz%2Cwght%5D.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Caption";
  src: url("../../fonts/SourceSerif4Caption-It.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ================================================================
   1. Grunnlag
   ================================================================ */
:root {
  --bg: #f5f2ec;            /* papir */
  --flate: #fffdf9;
  --tekst: #1b1e24;
  --brodtekst: #3b3f4a;
  --dempet: #646876;
  --linje: #ddd7cb;
  --linje-sterk: #1b1e24;
  --aksent: #1c2247;        /* mørk blå – samme som elvekartene */
  --aksent-hover: #2d3570;
  --varm: #a8492c;          /* rustrød – som overtittelen på plakatene */
  --vegg-lys: #ece7dd;
  --vegg: #e3dccf;
  --vegg-mork: #d6cebf;
  --natt: #12142a;
  --maks: 1180px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --kursiv: "Source Serif 4 Caption", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ut: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--aksent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--aksent-hover); }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 3px; }
::selection { background: #1c2247; color: #fff; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 420; line-height: 1.12; letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin: 0 0 .55em; }
h3 { font-size: 1.25rem; margin: 0 0 .4em; letter-spacing: -0.005em; line-height: 1.25; }
h1 em, h2 em { font-style: italic; font-weight: 380; font-variation-settings: "SOFT" 100, "WONK" 1; }
p { margin: 0 0 1em; text-wrap: pretty; }

.innhold { max-width: var(--maks); margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .innhold { padding: 0 40px; } }

/* Små merkelapper i kartskrift: overtitler, typer, koordinater */
.overtittel, .kort .type, .produkt .type, legend, .merke {
  font: 400 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dempet);
}
.overtittel { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.overtittel::before { content: ""; width: 28px; height: 1px; background: var(--varm); flex: none; }
.smaa { font-size: .9rem; color: var(--dempet); }

/* ================================================================
   2. Topp og bunn
   ================================================================ */
.topp {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--linje) 70%, transparent);
}
.topp .innhold { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 480; letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--tekst); text-decoration: none;
}
.logo::before {
  content: ""; width: 26px; height: 26px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231b1e24' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M16 2.5c6.5 0 13.5 4 13.5 12.5S23 29.500 15 29.500 2.500 24 2.500 16 8 2.500 16 2.500Z'/%3E%3Cpath d='M16.500 7.500c4.500 0 8.500 3 8.500 8s-4 9-9.500 9S7.500 21 7.500 16s4-8.500 9-8.500Z'/%3E%3Cpath d='M17 12.500c2.200 0 4 1.400 4 3.700s-2 4.300-4.600 4.300-4.400-1.800-4.400-4.200 2.300-3.800 5-3.800Z'/%3E%3Ccircle cx='16.800' cy='16.400' r='.9' fill='%23a8492c' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.logo:hover { color: var(--tekst); }
.meny { display: flex; align-items: center; gap: 28px; font-size: .95rem; }
.meny a { color: var(--brodtekst); text-decoration: none; position: relative; padding: 6px 0; }
.meny a:not(.meny-knapp)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ut);
}
.meny a:not(.meny-knapp):hover { color: var(--tekst); }
.meny a:not(.meny-knapp):hover::after { transform: scaleX(1); }
.meny a.meny-knapp {
  color: #fff; background: var(--aksent); padding: 9px 18px; font-weight: 600; border-radius: 2px;
  transition: background .2s;
}
.meny a.meny-knapp:hover { background: var(--aksent-hover); color: #fff; }
@media (max-width: 720px) {
  .topp .innhold { min-height: 56px; }
  .meny a:not(.meny-knapp) { display: none; }
  .meny a.meny-knapp { padding: 8px 14px; font-size: .9rem; }
  .logo { font-size: 1.25rem; }
}

.bunn { background: var(--natt); color: #b9b8cc; padding: 56px 0 40px; font-size: .9rem; }
.bunn .innhold { display: grid; gap: 32px 48px; grid-template-columns: 1fr 1fr; }
.bunn .innhold > div:first-child { grid-column: 1 / -1; max-width: 34em; }
.bunn .innhold > p:last-child {
  grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  font: 400 .72rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8e8da6;
}
@media (min-width: 860px) {
  .bunn .innhold { grid-template-columns: 2.2fr 1fr 1fr; }
  .bunn .innhold > div:first-child { grid-column: auto; }
}
.bunn .logo { color: #fff; font-size: 1.3rem; margin: 0 0 14px; }
.bunn .logo::before { filter: invert(1) brightness(1.6); }
.bunn nav { display: flex; flex-direction: column; gap: 8px; }
.bunn a { color: #dcdbea; text-decoration: none; }
.bunn a:hover { color: #fff; text-decoration: underline; }
.bunn .innhold > div a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.bunn p { margin: 0; line-height: 1.7; }
.bunn .fyll { color: #1b1e24; }

/* ================================================================
   3. Knapper og småting
   ================================================================ */
.knapp {
  display: block; width: 100%; text-align: center; padding: 16px 22px; border-radius: 2px;
  font: 600 1rem/1.2 var(--sans); letter-spacing: .01em;
  background: var(--aksent); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  transition: background .2s, box-shadow .3s var(--ut), transform .3s var(--ut);
}
.knapp:hover { background: var(--aksent-hover); color: #fff; box-shadow: 0 10px 24px -10px rgba(28,34,71,.55); transform: translateY(-1px); }
.knapp:active { transform: none; box-shadow: none; }
.knapp.stor { display: inline-flex; align-items: center; gap: 12px; width: auto; padding: 18px 30px; font-size: 1.05rem; }
.knapp.stor::after, .lenke-pil::after, .kort .apne::after {
  content: ""; width: 18px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h16M12 1l4.500 4L12 9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h16M12 1l4.500 4L12 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ut);
}
.knapp.stor:hover::after, .lenke-pil:hover::after, .kort:hover .apne::after { transform: translateX(4px); }
.knapp.snart, .knapp.lys { background: transparent; color: var(--aksent); box-shadow: inset 0 0 0 1px var(--aksent); }
.knapp.snart:hover, .knapp.lys:hover { background: var(--aksent); color: #fff; }
.lenke-pil { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--tekst); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.lenke-pil:hover { color: var(--aksent); }
.fyll { background: #fff1c2; padding: 0 .25em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ================================================================
   4. Plakat i ramme på vegg
   .vegg  = veggflate med lys fra venstre.   .mock = rammen (list + ev. passepartout) rundt et <img>.
   Varianter: mock-eik, mock-svart, mock-hvit, mock-valnott · mock-pp (passepartout) · vegg-natt (mørk vegg)
   ================================================================ */
.vegg {
  position: relative; margin: 0; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--vegg-lys) 0%, var(--vegg) 70%, var(--vegg-mork) 100%);
}
.vegg-natt {
  background:
    radial-gradient(110% 80% at 20% 0%, rgba(120,126,190,.22) 0%, rgba(120,126,190,0) 60%),
    linear-gradient(180deg, #23264a 0%, #1b1e3c 100%);
}
/* Rammen er et Blender-render (tools/blender-ramme-eik.py + tools/ramme-webp.py): ekte profil, gjæring,
   åre og skygge mot veggen, som WebP med alfa. Veggen og plakatfeltet i bildet er gjennomsiktige, så
   .vegg-flaten vises rundt og plakaten (<img> eller .mock-bilder) ligger under bildet i vinduet.
   - .mock-boksen = rammens ytre mål (30 x 40 cm-ramme med 20 mm list: 34 x 44 cm).
   - ::after = render-bildet; det stikker utenfor boksen fordi skyggen faller mot høyre og ned.
   - Tallene under kommer fra tools/ramme-webp.py og gjelder alle varianter (samme kamera). */
.mock {
  --ramme: url("../bilder/ramme/blender/eik.webp");
  position: relative; isolation: isolate; aspect-ratio: 0.77275;
  transition: transform .6s var(--ut);
}
.mock::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: -9.973%; top: -6.959%; width: 133.949%; height: 123.993%;
  background: var(--ramme) 0 0 / 100% 100% no-repeat;
}
/* Plakaten i rammeåpningen (uten passepartout) eller i passepartoutvinduet */
.mock > img, .mock > .mock-bilder {
  position: absolute; left: 6.236%; top: 4.919%; width: 87.518%; height: 90.170%;
  display: block; object-fit: cover; background: #ebe7de;
}
.mock-pp > img, .mock-pp > .mock-bilder { left: 17.947%; top: 17.142%; width: 64.106%; height: 65.732%; }
.mock-pp { --ramme: url("../bilder/ramme/blender/eik-pp.webp"); }
/* Svart: beiset eik der åra så vidt synes. Hvit: malt. Valnøtt: mørk og varm. */
.mock-svart { --ramme: url("../bilder/ramme/blender/svart.webp"); }
.mock-svart.mock-pp { --ramme: url("../bilder/ramme/blender/svart-pp.webp"); }
.mock-hvit { --ramme: url("../bilder/ramme/blender/hvit.webp"); }
.mock-hvit.mock-pp { --ramme: url("../bilder/ramme/blender/hvit-pp.webp"); }
.mock-valnott { --ramme: url("../bilder/ramme/blender/valnott.webp"); }
.mock-valnott.mock-pp { --ramme: url("../bilder/ramme/blender/valnott-pp.webp"); }
/* Slank, lys eik til konturkartene: 12 mm list, grunn profil, bred hvit passepartout og svak skygge.
   Egen render (tools/blender-ramme-eik.py --variant lyseik --navn eik-slank --list 0.012 --dybde 0.6 --vindu 0.235),
   derfor egne mål fra tools/ramme-webp.py. Brukes uten .mock-pp. */
.mock-slank { --ramme: url("../bilder/ramme/blender/eik-slank-pp.webp"); aspect-ratio: 0.76413; }
.mock-slank::after { left: -9.991%; top: -7.021%; width: 133.976%; height: 124.025%; }
.mock-slank > img, .mock-slank > .mock-bilder { left: 13.960%; top: 13.454%; width: 72.092%; height: 73.100%; }

/* ================================================================
   5. Forside
   ================================================================ */
/* Hero: teksten og plakatene henger på samme vegg */
.hero-stor {
  position: relative; overflow: hidden; padding: 40px 0 0;
  background:
    radial-gradient(90% 120% at 12% -10%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #efeae1 0%, var(--vegg) 78%, var(--vegg-mork) 100%);
}
.hero-rutenett { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.hero-tekst h1 { font-size: clamp(2.5rem, 9.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: .45em; }
.hero-tekst h1 em { margin-right: .06em; }
.hero-tekst h1 span { display: block; }
.ingress { font-size: 1.12rem; color: var(--brodtekst); max-width: 30em; }
.handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin: 30px 0 26px; }
.hero-fakta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 .72rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dempet); }
.hero-fakta li { display: flex; align-items: center; gap: 8px; }
.hero-fakta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--varm); }

.scene { position: relative; padding: 4px 0 56px; }
.scene-stor { margin: 0 auto; width: min(76%, 420px); position: relative; }
.mock-bilder { overflow: hidden; }
.mock-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.mock-bilder img.aktiv { opacity: 1; }
.scene figcaption { margin-top: 26px; text-align: center; }
.scene figcaption a { text-decoration: none; color: var(--tekst); display: inline-block; }
.scene-tekst { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px; }
.scene .sted { font-family: var(--kursiv); font-style: italic; font-size: 1.05rem; white-space: nowrap; }
.scene .koord { font: 400 .7rem/1.4 var(--mono); letter-spacing: .1em; color: var(--dempet); white-space: nowrap; }
.scene figcaption a:hover .sted { text-decoration: underline; text-underline-offset: 4px; }
.scene-tekst { transition: opacity .5s ease; }
.scene-tekst.bytter { opacity: 0; }
/* Mobil: tre plakater på rad, den midterste litt større, alle midtstilt i høyden mot hverandre. */
/* Skyggene faller ca. 24 % av rammebredden mot høyre, så den midterste står litt til venstre for midten. */
.scene-liten { position: absolute; width: 23%; top: calc(4px + .09 * (100vw - 40px)); }
.scene-kontur { left: 0; }
.scene-elv { right: 0; }
.scene-stor { width: 37%; margin: 0 0 0 30%; }
@media (min-width: 960px) {
  .hero-stor { padding: 0; }
  .hero-rutenett { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; min-height: min(78vh, 740px); }
  .hero-tekst h1 { font-size: clamp(3rem, 4.6vw, 4rem); }
  .hero-tekst { padding: 56px 0 72px; }
  .scene { padding: 64px 0 72px; }
  /* Tre likestilte rammer: den store er bare litt større enn de to små, som står over hverandre til venstre. */
  .scene-stor { width: min(48%, 300px); margin: 0 5% 0 auto; }
  .scene-liten { width: 29%; right: auto; left: 3%; top: auto; }
  .scene-kontur { bottom: 57%; }
  .scene-elv { bottom: 11%; }
  .scene figcaption { text-align: right; }
  .scene-tekst { justify-content: flex-end; }
}
@media (min-width: 1200px) { .scene-stor { margin-right: 7%; } }

/* «Bare illustrasjon»: liten merknad nær rammebildene om at plakaten leveres uten ramme.
   Den stiplede firkanten er en ramme som ikke er der. */
.ramme-merk { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; max-width: 32em; font-size: .92rem; line-height: 1.45; color: var(--brodtekst); }
.ramme-merk::before { content: ""; flex: none; width: 15px; height: 19px; margin-top: 1px; border: 1.5px dashed var(--varm); border-radius: 1px; }
.seksjon-topp p.ramme-merk { font-size: .92rem; margin-top: 4px; }

/* Stripe under heroen: de tre stegene på én rad (stablet på mobil) */
.stripe { border-bottom: 1px solid var(--linje); background: var(--bg); }
.stripe .innhold { display: grid; grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 8px; }
.stripe-tittel { font-size: 1.2rem; margin: 0 0 10px; line-height: 1.25; }
.stripe ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.stripe li { display: grid; grid-template-columns: 2.4em 1fr; padding: 12px 0; border-top: 1px solid var(--linje); font-size: .92rem; color: var(--brodtekst); line-height: 1.4; }
.stripe .steg-nr { font: 400 .74rem/1 var(--mono); letter-spacing: .14em; color: var(--varm); padding-top: .4em; }
.stripe strong { display: block; font-family: var(--serif); font-weight: 480; font-size: 1.06rem; color: var(--tekst); font-variation-settings: "SOFT" 0, "WONK" 0; }
@media (min-width: 860px) {
  .stripe .innhold { grid-template-columns: minmax(0, 12em) minmax(0, 1fr); align-items: center; gap: 36px; padding-top: 0; padding-bottom: 0; }
  .stripe-tittel { margin: 0; }
  .stripe ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stripe li { border-top: 0; border-left: 1px solid var(--linje); padding: 26px 0 26px 24px; }
}

/* Seksjoner */
.seksjon { padding: 56px 0; }
@media (min-width: 900px) { .seksjon { padding: 96px 0; } }
.seksjon + .seksjon:not(.mork):not(.tonet) { border-top: 1px solid var(--linje); }
.seksjon.tonet { background: #eeeae1; }
.seksjon-topp { max-width: 40em; margin-bottom: 32px; }
.seksjon-topp p:not(.overtittel) { color: var(--brodtekst); font-size: 1.08rem; }
@media (min-width: 900px) { .seksjon-topp { margin-bottom: 48px; } }

/* Detaljer: utsnitt av kartet i full størrelse */
.detalj-rutenett { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .detalj-rutenett { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; } }
.mosaikk { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / .92; }
.utsnitt { margin: 0; position: relative; overflow: hidden; background-color: #e9e6df; background-repeat: no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 36px -18px rgba(40,30,20,.35); }
.utsnitt-a { grid-row: 1 / 3; }
.utsnitt figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; background: rgba(255,253,249,.92);
  font: 400 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst);
}
.punkter { margin: 32px 0 0; padding: 0; }
.punkter div { padding: 20px 0; border-top: 1px solid var(--linje); display: grid; gap: 4px 20px; }
.punkter div:last-child { border-bottom: 1px solid var(--linje); }
.punkter dt { font-family: var(--serif); font-size: 1.15rem; font-weight: 480; font-variation-settings: "SOFT" 0, "WONK" 0; }
.punkter dd { margin: 0; color: var(--brodtekst); font-size: .98rem; }
@media (min-width: 560px) { .punkter div { grid-template-columns: 11em 1fr; } }

/* Om kartene + priser i én seksjon: prisene følger rett under, skilt med en linje */
.om-priser .mosaikk { aspect-ratio: 1 / .8; }
.om-priser .punkter { margin-top: 24px; }
.om-priser .punkter div { padding: 14px 0; }
@media (min-width: 560px) { .om-priser .punkter div { grid-template-columns: 9.5em 1fr; } }
.priser { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--linje); }
@media (min-width: 900px) { .priser { margin-top: 64px; padding-top: 56px; } }
.priser .seksjon-topp { margin-bottom: 28px; }
.priser .seksjon-topp h2 { margin-bottom: 0; }

/* ================================================================
   6. Galleri og kort
   ================================================================ */
.galleri, .rutenett { display: grid; gap: 36px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .galleri, .rutenett { gap: 56px 32px; } }
@media (min-width: 960px) { .galleri, .rutenett { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 40px; } }

.kort { text-decoration: none; color: inherit; display: block; min-width: 0; }
.kort:hover { color: inherit; }
.kort .vegg { aspect-ratio: 4 / 5; }
.kort .mock { width: 66%; }
.kort:hover .mock, .kort:focus-visible .mock { transform: translateY(-6px) scale(1.025); }
.kort img { aspect-ratio: 1055 / 1400; object-fit: cover; }
.kort .info { padding: 18px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.kort .type { grid-column: 1 / -1; margin-bottom: 4px; }
.kort h3 { margin: 0; font-size: 1.3rem; }
.kort .under { grid-column: 1 / -1; font-family: var(--kursiv); font-style: italic; color: var(--dempet); font-size: .98rem; }
.kort .pris { color: var(--brodtekst); font-size: .92rem; white-space: nowrap; }
.kort .apne { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; color: var(--aksent); font-weight: 600; font-size: .92rem; margin-top: 10px; }
@media (max-width: 699px) {
  .kort .info { grid-template-columns: 1fr; padding-top: 12px; }
  .kort h3 { font-size: 1.08rem; }
  .kort .under { font-size: .88rem; line-height: 1.35; }
  .kort .apne { font-size: .85rem; margin-top: 6px; }
  .kort .type { font-size: .62rem; }
}

/* «Ditt eget kart»: tomt ark med høydekurver */
.kort-eget .tomt {
  width: 66%; aspect-ratio: 1055 / 1400; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 12%;
  background: var(--flate); position: relative; overflow: hidden;
  box-shadow: 2px 2px 2px rgba(40,28,14,.12), 10px 18px 26px -10px rgba(40,28,14,.3);
  transition: transform .6s var(--ut);
}
.kort-eget:hover .tomt { transform: translateY(-6px) scale(1.025); }
.kort-eget .tomt svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #cfc8ba; transition: transform 1.2s var(--ut); }
.kort-eget:hover .tomt svg { transform: scale(1.08) rotate(3deg); }
.kort-eget .tomt span { position: relative; font-family: var(--serif); font-size: clamp(1.2rem, 3.4vw, 1.9rem); letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; font-variation-settings: "SOFT" 0, "WONK" 0; }
.kort-eget .tomt small { position: relative; font: 400 .62rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dempet); }
.kort-eget .pluss { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--aksent); color: #fff; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
@media (max-width: 699px) { .kort-eget .tomt small { display: none; } .kort-eget .pluss { width: 34px; height: 34px; font-size: 1.2rem; } }

/* ================================================================
   7. Elvekart (mørk), priser, avslutning
   ================================================================ */
.seksjon.mork { background: var(--natt); color: #e6e4f0; position: relative; }
.mork h2, .mork h3 { color: #fff; }
.mork .overtittel, .mork .kort .type { color: #a3a2bd; }
.mork .overtittel::before { background: #f2a03d; }
.mork .seksjon-topp p:not(.overtittel), .mork .brod { color: #c3c2d6; }
.mork .smaa, .mork .kort .under { color: #a3a2bd; }
.mork .kort .pris { color: #e6e4f0; }
.mork a.lenke-pil { color: #fff; }
.elv-rutenett { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: start; }
.elv-rutenett .seksjon-topp { margin: 0; }
.elv-rutenett .rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) {
  .elv-rutenett { grid-template-columns: minmax(0, .82fr) minmax(0, 2fr); gap: 72px; }
  .elv-rutenett .seksjon-topp { position: sticky; top: 120px; }
}
.prisrad { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); font-size: .95rem; }
.prisrad li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16); color: #c3c2d6; }
.prisrad li span:last-child { color: #fff; font-variant-numeric: tabular-nums; }
.kort-produkt { position: relative; }
.kort-produkt > a { text-decoration: none; color: inherit; display: block; }
.kort-produkt:hover .mock { transform: translateY(-6px) scale(1.025); }
.prikker { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.prikk { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; background: var(--p, #888); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.prikk::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid transparent; transition: border-color .2s; }
.prikk:hover::after { border-color: rgba(128,128,128,.6); }
.prikk[aria-pressed="true"]::after { border-color: currentColor; }
.prikker .navn { font: 400 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 4px; opacity: .75; }
.kort-produkt img { transition: opacity .35s ease; }
.kort-produkt img.bytter { opacity: 0; }

/* Priser */
.pristabell { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pristabell { grid-template-columns: repeat(2, 1fr); gap: 24px; } .priskort-spesial { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .pristabell { grid-template-columns: repeat(3, 1fr); } .priskort-spesial { grid-column: auto; } }
.priskort { background: var(--flate); border: 1px solid var(--linje); padding: 26px 22px; display: flex; flex-direction: column; }
@media (min-width: 900px) { .priskort { padding: 36px 36px 32px; } }
/* Egne ønsker: samme kort, men tonet med stiplet kant så det skiller seg ut */
.priskort-spesial { background: #eeeae1; border: 1px dashed #b9b0a0; }
.priskort-spesial p:not(.merke) { color: var(--brodtekst); }
.priskort-spesial .knapp { overflow-wrap: anywhere; }
.priskort h3 { font-size: 1.6rem; margin-bottom: .2em; }
.priskort .merke { margin: 0 0 14px; }
.priskort ul { list-style: none; padding: 0; margin: 14px 0 20px; border-top: 1px solid var(--linje-sterk); }
.priskort li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.priskort li strong { font-family: var(--serif); font-weight: 420; font-size: 1.7rem; font-variation-settings: "SOFT" 0, "WONK" 0; font-variant-numeric: lining-nums; }
.priskort p:not(.merke) { color: var(--dempet); font-size: .93rem; flex: 1; }
@media (max-width: 699px) {
  .priskort h3 { font-size: 1.4rem; }
  .priskort ul { margin: 10px 0 14px; }
  .priskort li { padding: 9px 0; }
  .priskort li strong { font-size: 1.4rem; }
  .priskort .knapp { padding: 13px 18px; }
}
.fakta { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--linje); font-size: .95rem; }
.fakta li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--linje); color: var(--brodtekst); position: relative; }
.fakta li::before {
  content: ""; position: absolute; left: 2px; top: 1.05em; width: 14px; height: 8px;
  border-left: 1.5px solid var(--varm); border-bottom: 1.5px solid var(--varm); transform: rotate(-45deg); transform-origin: 50% 50%; margin-top: -3px;
}
.fakta-rad { display: grid; grid-template-columns: 1fr; border-top: 0; margin-top: 28px; }
.fakta-rad li { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
@media (min-width: 760px) { .fakta-rad { grid-template-columns: repeat(2, 1fr); gap: 0 32px; } }

/* Avslutning */
.avslutning { position: relative; overflow: hidden; background: var(--aksent); color: #fff; padding: 72px 0; text-align: center; }
@media (min-width: 900px) { .avslutning { padding: 110px 0; } }
.avslutning .smaa a { color: #fff; }
.avslutning .innhold { position: relative; }
.avslutning h2 { font-size: clamp(2rem, 5.4vw, 3.6rem); margin: 0 auto 36px; max-width: 14em; color: #fff; }
.avslutning .knapp { background: #fff; color: var(--aksent); }
.avslutning .knapp:hover { background: #f1eee6; color: var(--aksent); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.avslutning .smaa { color: #b9bbdc; margin: 22px 0 0; }
.koter { position: absolute; left: 50%; top: 50%; width: max(1300px, 110vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); color: rgba(255,255,255,.13); pointer-events: none; }

/* ================================================================
   8. Produktside, juridiske sider, bevegelse
   ================================================================ */
.tilbake { display: inline-flex; align-items: center; gap: 8px; font: 400 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); text-decoration: none; margin-top: 28px; }
.tilbake:hover { color: var(--tekst); }
.produkt { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); padding: 24px 0 72px; }
@media (min-width: 900px) { .produkt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; padding: 32px 0 110px; align-items: start; } }
.produkt .bilde { position: relative; }
@media (min-width: 900px) { .produkt .bilde { position: sticky; top: 88px; } }
.produkt .vegg { aspect-ratio: 1 / 1.12; transition: background .4s; }
.produkt .mock { width: 58%; transition: width .5s var(--ut), aspect-ratio .5s var(--ut); }
/* «Bare plakaten»: uten ramme og passepartout */
.produkt .vegg.flat { background: #ebe7de; }
.produkt .vegg.flat .mock { width: 70%; aspect-ratio: 1055 / 1400; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 18px 40px -14px rgba(30,25,20,.45); }
.produkt .vegg.flat .mock::after { display: none; }
.produkt .vegg.flat .mock > img { left: 0; top: 0; width: 100%; height: 100%; }
.visning { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.visning button { font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--linje); background: transparent; color: var(--dempet); cursor: pointer; border-radius: 2px; }
.visning button[aria-pressed="true"] { border-color: var(--tekst); color: var(--tekst); background: var(--flate); }
.visning .smaa { margin: 0 0 0 auto; font-size: .82rem; }
.lupe-hint { margin: 10px 0 0; font-size: .82rem; }

/* Lupe over kartbildet (butikk.js: lupe()). Plasseres med transform i .bilde. */
.lupe {
  position: absolute; left: 0; top: 0; z-index: 6; width: 200px; height: 200px; border-radius: 50%;
  pointer-events: none; background-color: #ebe7de; background-repeat: no-repeat;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(27,30,36,.22), 0 18px 40px -12px rgba(20,15,10,.6);
  opacity: 0; transition: opacity .15s ease; will-change: transform;
}
.lupe.synlig { opacity: 1; }
.vegg.lupe-aktiv { cursor: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 699px) { .lupe { width: 150px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .lupe { transition: none; } }

.produkt .type { margin: 8px 0 12px; }
.produkt h1 { margin-bottom: .1em; font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
.produkt .under { font-family: var(--kursiv); font-style: italic; font-size: 1.25rem; color: var(--dempet); margin-bottom: 1.3em; }
.produkt .beskrivelse p { color: var(--brodtekst); }
.kilde { font: 400 .68rem/1.6 var(--mono); letter-spacing: .06em; color: var(--dempet); }

fieldset { border: 0; padding: 0; margin: 28px 0 22px; min-width: 0; }
legend { margin-bottom: 12px; padding: 0; }
.valg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.valg label { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--linje); background: var(--flate); padding: 14px 16px; cursor: pointer; border-radius: 2px; transition: border-color .15s, box-shadow .15s; }
.valg input { position: absolute; opacity: 0; pointer-events: none; }
.valg label:hover { border-color: #b9b4a8; }
.valg input:checked + label { border-color: var(--tekst); box-shadow: inset 0 0 0 1px var(--tekst); }
.valg input:focus-visible + label { outline: 2px solid var(--aksent); outline-offset: 2px; }
.valg .storrelse { font-weight: 600; }
.valg .liten { font-size: .9rem; color: var(--dempet); }

.farger { margin: 28px 0 0; }
.farger .type { margin-bottom: 12px; }
.fargevalg { display: flex; gap: 12px; flex-wrap: wrap; }
.fargevalg a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; font-size: .82rem; color: var(--dempet); text-decoration: none; }
.fargevalg img { width: 72px; aspect-ratio: 1055 / 1400; object-fit: cover; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.fargevalg a[aria-current="true"] { color: var(--tekst); font-weight: 600; }
.fargevalg a[aria-current="true"] img { outline-color: var(--tekst); }
.fargevalg a:hover img { outline-color: #b9b4a8; }

.kjop { border-top: 1px solid var(--linje-sterk); padding-top: 18px; }
.prislinje { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.prislinje .pris { font-family: var(--serif); font-size: 2.4rem; font-weight: 420; line-height: 1; font-variation-settings: "SOFT" 0, "WONK" 0; }
.prislinje .mva { font: 400 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dempet); }
.merknad { font-size: .88rem; color: var(--dempet); margin: 14px 0 0; }

.flere { border-top: 1px solid var(--linje); padding: 72px 0 96px; }
.flere h2 { margin-bottom: 40px; }

.dokument { max-width: 44em; padding: 56px 0 96px; }
.dokument h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.dokument h2 { font-size: 1.45rem; margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--linje); }
.dokument p, .dokument li { color: var(--brodtekst); }
.dokument li { margin-bottom: .4em; }
.oppdatert { color: var(--dempet); font-size: .9rem; }
.feil { padding: 96px 0; }

/* Elementer som glir inn når de rulles fram (klassen .js settes av js/side.js) */
.js [data-inn] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ut), transform .9s var(--ut); transition-delay: var(--vent, 0s); }
.js [data-inn].inne { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-inn] { opacity: 1; transform: none; transition: none; }
  .mock, .kort-eget .tomt, .kort-eget .tomt svg, .knapp, .mock-bilder img { transition: none; }
  .kort:hover .mock, .kort-produkt:hover .mock, .kort-eget:hover .tomt { transform: none; }
}

/* Konturkart: lys, rolig seksjon med mye luft, hvite rammer og ren typografi. Skilles fra Elvekart (mørk) over. */
.seksjon.kontur-seksjon { background: #f9f9f7; padding: 64px 0 72px; border-top: 0; }
@media (min-width: 900px) { .seksjon.kontur-seksjon { padding: 112px 0 120px; } }
.kontur-seksjon h2 { font-weight: 300; letter-spacing: -0.03em; }
.kontur-seksjon h2 em { font-style: normal; font-weight: 300; color: #7d8a78; font-variation-settings: "SOFT" 0, "WONK" 0; }
.kontur-seksjon .overtittel::before { background: #9aa596; }
.kontur-seksjon .prisrad { border-top-color: #e4e5e0; }
.kontur-seksjon .prisrad li { border-bottom-color: #e4e5e0; color: var(--dempet); }
.kontur-seksjon .prisrad li span:last-child { color: var(--tekst); }
.vegg-kontur { background: linear-gradient(180deg, #f1f1ee 0%, #e9eae5 100%); }
.kontur-seksjon .kort .under { font-style: normal; font-family: var(--sans); font-size: .88rem; }
.kontur-seksjon .kort h3 { font-weight: 360; }

.knapp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-bilder { background: #ebe7de; }

/* Linjevalg på konturkart-produktsiden (fin / kraftig) */
.linjevalg { display: flex; align-items: center; gap: 8px; margin: 18px 0; }
.linjevalg-tittel { font: 400 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); margin-right: 6px; }
.linjevalg a { padding: 8px 16px; border: 1px solid var(--linje); border-radius: 2px; text-decoration: none; color: var(--brodtekst); font-size: .95rem; }
.linjevalg a[aria-current] { border-color: var(--tekst); color: var(--tekst); font-weight: 600; }

/* ---------- Ferdige plakater: større kort, krysstoning og kopisperre ---------- */
/* Plakaten kan ikke dras ut eller lagres med høyreklikk (butikk.js stopper contextmenu/dragstart på .mock).
   Klikk går gjennom til lenken rundt. Dette stopper bare de enkleste forsøkene – skjermbilde går alltid. */
.mock img, .fargevalg img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.kort-produkt .mock > img { transition: opacity .9s ease; }
.kort-produkt .mock > img.inn { opacity: 0; }

/* Større plakater i Elvekart og Konturkart: smalere tekstspalte, rammen fyller mer av veggen,
   og ett kort per rad på mobil (to blir for små til å se kartet). */
.elv-rutenett .rutenett { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.elv-rutenett .kort-produkt .vegg { aspect-ratio: 1 / 1.02; }
.elv-rutenett .kort-produkt .mock { width: 70%; }
@media (min-width: 700px) {
  .elv-rutenett .rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 28px; }
  .elv-rutenett .kort-produkt .vegg { aspect-ratio: 4 / 5; }
  .elv-rutenett .kort-produkt .mock { width: 82%; }
}
@media (min-width: 960px) {
  .elv-rutenett { grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: 64px; }
  .elv-rutenett .rutenett { gap: 80px 36px; }
}
.produkt .mock { width: 72%; }
@media (min-width: 900px) { .produkt .mock { width: 76%; } .produkt .vegg.flat .mock { width: 80%; } }

/* Mobil: Elvekart og Konturkart som en sveipbar rad i stedet for under hverandre. Kortene er like store
   som før (ett kort fyller nesten bredden, det neste stikker fram), men tar én rad i høyden. */
@media (max-width: 699px) {
  .elv-rutenett .rutenett {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; scrollbar-width: none;
  }
  .elv-rutenett .rutenett::-webkit-scrollbar { display: none; }
  .elv-rutenett .rutenett > * { scroll-snap-align: start; }
  .elv-rutenett .kort-produkt .mock { width: 74%; }
}

/* Eksempler: samme oppsett som Elvekart (tekst til venstre, kort til høyre) på bred skjerm, så galleriet tar mindre høyde */
.eks-rutenett { gap: 32px; }
@media (min-width: 960px) {
  .eks-rutenett { gap: 56px; }
  .eks-rutenett .galleri { gap: 48px 28px; }
}

/* ---------- Testbestilling via Gelato (bare med ?testbestilling, se butikk.js) ---------- */
.testbestilling { margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--linje); border-radius: 2px; background: var(--flate); }
.testbestilling summary { cursor: pointer; font: 400 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); }
.testbestilling form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.testbestilling .tb-felt { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--dempet); min-width: 0; }
.testbestilling .tb-adresse1, .testbestilling .tb-adresse2, .testbestilling .tb-epost { grid-column: 1 / -1; }
.testbestilling input { font: inherit; font-size: .95rem; color: var(--tekst); padding: 8px 10px; border: 1px solid var(--linje); border-radius: 2px; background: #fff; min-width: 0; }
.testbestilling button, .testbestilling .tb-svar { grid-column: 1 / -1; }
.testbestilling .tb-svar { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.testbestilling .tb-svar.feil { color: var(--varm); }