@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Layout: en fast 3D-scene bak fortellingen. Flaten tegnes på terrenget, skjæring og fylling vokser ut av den,
   og målerne har form som Terrengplan-symbolet: like store buer er massebalanse. Faste innholdsflater tar over etter «Prøv selv».
   Farger, skrift og nivålinja følger profilmanualen v2, Terrengplan-sidene 12 til 14. */
:root {
  --dyp: #0C2430;
  --fyllblaa: #1573C8;
  --oransje: #F2731F;
  --lys-flate: #ECF3F5;
  --hvit: #FFFFFF;
  --graa-petrol: #5A6E76;
  --linjegraa: #C9D4D8;

  /* Dag */
  --bg: #F3F6F9;
  --bg-2: #FFFFFF;
  --flate: #FFFFFF;
  --kant: #D6DEE5;
  --spor: #5A6E76;           /* umarkert spor på skyvebryterne: 5,35:1 mot #FFF, 4,93:1 mot --bg */
  --tekst: #0C2430;
  --tekst-2: #5A6E76;
  --tekst-3: #5A6E76;
  --eyebrow: #0C2430;
  --uthev: #1573C8;
  --lenke: #0C2430;
  --fokus: #1573C8;
  --fylling: #1573C8;
  --skjaering: #F2731F;
  --terreng: #3E8A4A;
  --nivaalinje: #C9D4D8;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-kant: rgba(12, 36, 48, 0.1);
  --nav-bg: rgba(243, 246, 249, 0.92);
  --logo-tekst: #0C2430;
  --logo-plan: #1573C8;
  --logo-fyll: #1573C8;
  --logo-linje: #0C2430;
  --knapp-2: rgba(12, 36, 48, 0.05);
  --knapp-2-sterk: rgba(12, 36, 48, 0.1);
  --skygge: 0 30px 70px -36px rgba(12, 36, 48, 0.35);
  --scrim: rgba(243, 246, 249, 0.72);
  --scene-topp: #FFFFFF;
  --scene-bunn: #D9E4EC;
  --scene-terreng: #E7EEE9;
  --scene-kote: #3E8A4A;
  --scene-side: #DDE5EB;
  --scene-glass: #FFFFFF;
  --scene-flatelinje: #0C2430;
  --scene-gulv: #5A6E76;
  --scene-sky-lav: #17606F;
  --scene-sky-hoy: #1573C8;
  --scene-tekst: #0C2430;
  --scene-tekst-2: #5A6E76;
  --scene-chip: rgba(255, 255, 255, 0.92);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 64px;
  --maks: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
/* Natt: Dyp som flate, fylling i #5BAFF4 som manualen gir for mørk bunn */
:root[data-theme="dark"] {
  --bg: #0C2430; --bg-2: #0A1F29; --flate: #11303D; --kant: rgba(201, 212, 216, 0.16); --spor: #7E949C;
  --tekst: #FFFFFF; --tekst-2: rgba(236, 243, 245, 0.78); --tekst-3: rgba(236, 243, 245, 0.62);
  --eyebrow: #5BAFF4; --uthev: #5BAFF4; --lenke: #5BAFF4; --fokus: #5BAFF4;
  --fylling: #5BAFF4; --skjaering: #F2731F; --terreng: #6CC07A; --nivaalinje: rgba(201, 212, 216, 0.34);
  --glass: rgba(9, 28, 37, 0.68); --glass-kant: rgba(201, 212, 216, 0.16); --nav-bg: rgba(12, 36, 48, 0.9);
  --logo-tekst: #ECF3F5; --logo-plan: #5BAFF4; --logo-fyll: #5BAFF4; --logo-linje: #ECF3F5;
  --knapp-2: rgba(236, 243, 245, 0.08); --knapp-2-sterk: rgba(236, 243, 245, 0.18);
  --skygge: 0 30px 70px -30px rgba(0, 0, 0, 0.6); --scrim: rgba(6, 18, 24, 0.6);
  --scene-topp: #15394A; --scene-bunn: #061218; --scene-terreng: #183F4C; --scene-kote: #6CC07A; --scene-side: #123241;
  --scene-glass: #CFE6F5; --scene-flatelinje: #ECF3F5; --scene-gulv: #2E93A4; --scene-sky-lav: #5BAFF4; --scene-sky-hoy: #ECF3F5;
  --scene-tekst: #FFFFFF; --scene-tekst-2: rgba(236, 243, 245, 0.76); --scene-chip: rgba(8, 26, 35, 0.84);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C2430; --bg-2: #0A1F29; --flate: #11303D; --kant: rgba(201, 212, 216, 0.16); --spor: #7E949C;
    --tekst: #FFFFFF; --tekst-2: rgba(236, 243, 245, 0.78); --tekst-3: rgba(236, 243, 245, 0.62);
    --eyebrow: #5BAFF4; --uthev: #5BAFF4; --lenke: #5BAFF4; --fokus: #5BAFF4;
    --fylling: #5BAFF4; --skjaering: #F2731F; --terreng: #6CC07A; --nivaalinje: rgba(201, 212, 216, 0.34);
    --glass: rgba(9, 28, 37, 0.68); --glass-kant: rgba(201, 212, 216, 0.16); --nav-bg: rgba(12, 36, 48, 0.9);
    --logo-tekst: #ECF3F5; --logo-plan: #5BAFF4; --logo-fyll: #5BAFF4; --logo-linje: #ECF3F5;
    --knapp-2: rgba(236, 243, 245, 0.08); --knapp-2-sterk: rgba(236, 243, 245, 0.18);
    --skygge: 0 30px 70px -30px rgba(0, 0, 0, 0.6); --scrim: rgba(6, 18, 24, 0.6);
    --scene-topp: #15394A; --scene-bunn: #061218; --scene-terreng: #183F4C; --scene-kote: #6CC07A; --scene-side: #123241;
    --scene-glass: #CFE6F5; --scene-flatelinje: #ECF3F5; --scene-gulv: #2E93A4; --scene-sky-lav: #5BAFF4; --scene-sky-hoy: #ECF3F5;
    --scene-tekst: #FFFFFF; --scene-tekst-2: rgba(236, 243, 245, 0.76); --scene-chip: rgba(8, 26, 35, 0.84);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font-family: var(--font); font-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem); line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--lenke); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; color: var(--tekst); text-wrap: balance; }
/* Skriftskala 23.10 (som NivoSite 22.10), clamp() mellom 1440 og 390 px: H1 88/42, H2 i seksjon 44/26, H2 i steg 34/26,
   H3 18/17, ingress 20/18, brødtekst 17/16 */
h2 { font-size: clamp(1.625rem, 1.2071rem + 1.7143vw, 2.75rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; }
h3 { font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
.ramme { width: 100%; max-width: calc(var(--maks) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); }
.hopp { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--fyllblaa); color: #FFFFFF; padding: 12px 16px; line-height: 20px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.hopp:focus { top: 12px; }

/* Nivålinja (s. 18): tynn linje, oransje stripe på første femtedel. Under overskrifter og over bunnteksten. */
.niva::after, .nivaalinje {
  content: ""; display: block; width: min(330px, 72%); height: 3px;
  background:
    linear-gradient(var(--oransje), var(--oransje)) left center / 20% 3px no-repeat,
    linear-gradient(var(--nivaalinje), var(--nivaalinje)) right center / 80% 1px no-repeat;
}
.niva::after { margin-top: 18px; }

/* Logo: farger fra LES-MEG i logopakken */
.tp-logo { display: block; height: 24px; width: auto; }
.tp-fyll { fill: var(--logo-fyll); }
.tp-skj { fill: #F2731F; }
.tp-linje { stroke: var(--logo-linje); fill: none; }
.tp-tekst { fill: var(--logo-tekst); }
.tp-plan { fill: var(--logo-plan); }

/* Navigasjon */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--kant);
}
.nav .ramme { height: var(--nav-h); display: flex; align-items: center; gap: 18px; }
.logo { display: inline-flex; flex: none; padding-block: 10px; }
.avsender { flex: none; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3); padding-left: 18px; border-left: 1px solid var(--kant); line-height: 1.35; }
.merke-konsept { flex: none; font-size: 0.75rem; color: var(--tekst-3); border: 1px dashed var(--kant); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.nav-hoyre { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.meny { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.meny a { color: var(--tekst-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.meny a:hover { color: var(--tekst); }
.tema { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--kant); border-radius: 999px; flex: none; }
.tema button { font: 500 0.8125rem/1 var(--font); color: var(--tekst-2); background: transparent; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.tema button[aria-pressed="true"] { background: var(--knapp-2-sterk); color: var(--tekst); }
.cta-kort { display: none; }

/* Knapper: hvit tekst på Fyll-blå (s. 12 og 16) */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; font: 600 1rem/1.1 var(--font); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.knapp.hoved { background: var(--fyllblaa); color: #FFFFFF; }
.knapp.hoved:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(21, 115, 200, 0.85); }
.knapp.sekundaer { background: var(--knapp-2); color: var(--tekst); border-color: var(--kant); }
.knapp.sekundaer:hover { border-color: var(--tekst-3); }
.knapp.liten { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* Scenen */
.scene { position: fixed; inset: 0; z-index: 0; background: radial-gradient(110% 80% at 68% 36%, var(--scene-topp) 0%, var(--scene-bunn) 80%); }
/* Reservebildet er et stillbilde av startscenen. Det står til scenen er klar (js/side.js starter den når siden er ledig),
   og blir stående når 3D ikke virker. */
.scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../media/scene-reserve-bred-lys.webp") center / cover no-repeat; transition: opacity 1.4s ease; }
:root[data-theme="dark"] .scene::before { background-image: url("../media/scene-reserve-bred-mork.webp"); }
.scene.klar::before { opacity: 0; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.scene.klar canvas { opacity: 1; }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--scrim) 0%, transparent 44%); }
.uten-3d .scene canvas { display: none; }
.uten-3d-melding { display: none; }
/* To feil, to tekster (js/side.js): «webgl» når getContext gir null, «last» når scene.js ikke kunne lastes */
[data-3d-feil="webgl"] .uten-3d-melding[data-feil="webgl"],
[data-3d-feil="last"] .uten-3d-melding[data-feil="last"] { display: block; }
.prov-igjen { pointer-events: auto; color: var(--scene-tekst); text-decoration: underline; text-underline-offset: 2px; }
.hud-feil { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 18px); right: var(--gutter); max-width: calc(100vw - 2 * var(--gutter)); text-align: right; }
.hud { position: absolute; z-index: 3; pointer-events: none; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--scene-tekst-2); font-variant-numeric: tabular-nums; }
.hud-topp { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 18px); right: var(--gutter); display: grid; justify-items: end; gap: 4px; text-align: right; }
.hud-topp b { color: var(--scene-tekst); font-weight: 600; }
.hud-info { display: grid; justify-items: end; gap: 4px; opacity: 0; }
.hud-kort {
  right: var(--gutter); bottom: 24px; width: min(400px, calc(100vw - 2 * var(--gutter)));
  padding: 14px 16px; border-radius: 16px; background: var(--scene-chip); border: 1px solid var(--glass-kant);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; color: var(--scene-tekst);
}
.hud-kort .s3d-tittel { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scene-tekst-2); margin-bottom: 8px; }
.masser { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.m-tall { display: grid; gap: 5px; font-size: 0.8125rem; }
.m-tall .m-rad { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.m-tall .m-rad span { display: inline-flex; align-items: center; gap: 8px; color: var(--scene-tekst-2); }
.m-tall .m-rad i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.m-tall .m-rad b { font-weight: 600; white-space: nowrap; }
.m-tall .m-rad.m-sum { border-top: 1px solid var(--glass-kant); padding-top: 6px; margin-top: 2px; }
.m-tall .m-rad.m-sum b { font-size: 1.0625rem; }
.m-tall .m-tilstand { font-size: 0.75rem; color: var(--scene-tekst-2); text-align: right; }

/* Måleren er Terrengplan-symbolet: blå bue under linja er fylling, oransje over er skjæring. Like store buer: massebalanse. */
.maaler { width: 112px; height: auto; flex: none; overflow: visible; }
.maaler .m-fyll { fill: var(--fylling); }
.maaler .m-skj { fill: var(--skjaering); }
.maaler .m-linje { stroke: var(--scene-tekst); stroke-width: 7; stroke-linecap: round; fill: none; }
.prov-kort .maaler .m-linje { stroke: var(--tekst); }

.snitt { display: grid; gap: 6px; }
.snitt svg { display: block; width: 100%; height: auto; overflow: visible; }
.snitt .s-fyll { fill: var(--fylling); opacity: 0.85; }
.snitt .s-skj { fill: var(--skjaering); opacity: 0.85; }
.snitt .s-terreng { fill: none; stroke: var(--terreng); stroke-width: 1.6; stroke-dasharray: 5 4; }
.snitt .s-flate { fill: none; stroke: var(--scene-tekst); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.prov-kort .snitt .s-flate { stroke: var(--tekst); }
.forklaring { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.6875rem; color: var(--scene-tekst-2); }
.prov-kort .forklaring { color: var(--tekst-3); }
.forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.forklaring i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.forklaring i.strek { height: 0; border-top: 2px dashed var(--terreng); border-radius: 0; }

/* Etiketter i 3D */
.s3d-etiketter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.s3d-etikett { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.s3d-etikett::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--fyllblaa); box-shadow: 0 0 0 4px rgba(21, 115, 200, 0.22); }
/* --dx flytter etiketten innenfor skjermkanten (js/scene.js); streken peker fortsatt på punktet */
.s3d-etikett .s3d-e {
  position: absolute; left: 0; bottom: 14px; transform: translateX(calc(-50% + var(--dx, 0px))); white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; color: var(--scene-tekst);
  background: var(--scene-chip); border: 1px solid var(--glass-kant); border-radius: 999px; padding: 6px 11px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums;
}
.s3d-etikett .s3d-e::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; width: 1px; height: 10px; background: var(--glass-kant); }
.s3d-etikett .s3d-e i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }

/* Fortellingen */
main { position: relative; z-index: 1; }
.steg { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 48px) 72px; }
.steg-kort, .prov-kort {
  width: min(430px, 100%); display: grid; gap: 14px; padding: 28px 28px 30px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--glass-kant);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--skygge);
}
.steg-kort p { color: var(--tekst-2); }
.steg-kort h2, .prov-kort h2 { font-size: clamp(1.625rem, 1.4393rem + 0.7619vw, 2.125rem); }
.stegnr { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); font-variant-numeric: tabular-nums; }
.brikker { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; }
.brikker li { font-size: 0.75rem; font-weight: 600; color: var(--tekst-2); border: 1px solid var(--kant); border-radius: 999px; padding: 4px 10px; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.brikker li.aktiv { background: var(--fyllblaa); border-color: var(--fyllblaa); color: #FFFFFF; }
.brikker li i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.hero-tekst { display: grid; gap: 24px; max-width: 720px; }
.hero h1 { font-size: clamp(2.625rem, 1.5571rem + 4.381vw, 5.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; }
.hero h1 .lett { display: block; margin-top: 0.18em; font-size: 0.46em; font-weight: 400; letter-spacing: -0.03em; line-height: 1.06; color: var(--uthev); }
.ingress { font-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); line-height: 1.45; color: var(--tekst-2); max-width: 31em; }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; }
.fakta { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--tekst-3); }
.fakta li { display: flex; align-items: center; gap: 9px; }
.fakta li::before { content: ""; width: 12px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--fylling) 0 50%, var(--skjaering) 50% 100%); }
.fakta a { color: inherit; }

/* Prøv selv */
.prov { min-height: 116vh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 36px) 56px; }
.prov-kort { width: min(470px, 100%); gap: 16px; }
.prov-kort > p { color: var(--tekst-2); }
.type-velger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border: 1px solid var(--kant); border-radius: 12px; }
.type-velger button { font: 600 0.875rem/1.2 var(--font); color: var(--tekst-2); background: transparent; border: 0; border-radius: 9px; padding: 9px 6px; cursor: pointer; }
.type-velger button[aria-pressed="true"] { background: var(--fyllblaa); color: #FFFFFF; }
.skyvere { display: grid; gap: 12px; }
.skyver { display: grid; gap: 6px; }
.skyver label, .skyver .etikettrad { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; font-weight: 500; }
.skyver output { font-variant-numeric: tabular-nums; font-weight: 600; }
.skyver.av { opacity: 0.45; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--fyllblaa) 0 var(--fyll, 50%), var(--spor) var(--fyll, 50%) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--hvit); border: 3px solid var(--fyllblaa); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--spor); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fyllblaa); }
input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: var(--hvit); border: 3px solid var(--fyllblaa); }
.prov-masser { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding-top: 14px; border-top: 1px solid var(--kant); }
.prov-masser .m-tall .m-rad span { color: var(--tekst-2); }
.prov-masser .m-tall .m-rad b { color: var(--tekst); }
.prov-masser .m-tall .m-tilstand { color: var(--tekst-2); }
.prov-masser .m-tall .m-rad.m-sum { border-top-color: var(--kant); }
.prov-fot { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.prov-fot .knapp { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.vis-alle { display: none; }
.lenkeknapp { background: none; border: 0; padding: 0; font: 600 0.875rem var(--font); color: var(--lenke); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.merknad { font-size: 0.8125rem; color: var(--tekst-3); }
.dra-hint { font-size: 0.8125rem; color: var(--tekst-2); }

/* Faste innholdsflater */
.innhold { position: relative; z-index: 2; background: var(--bg); }
.seksjon { padding-block: clamp(80px, 9vw, 136px); }
.seksjon + .seksjon { border-top: 1px solid var(--kant); }
.hode { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.hode p { color: var(--tekst-2); font-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); line-height: 1.45; }

.bildetekst { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 0.875rem; color: var(--tekst-3); }
.bildetekst p { max-width: 52em; }

.flyt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.flyt-kort { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: var(--flate); border: 1px solid var(--kant); }
.flyt-kort .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eyebrow); }
.flyt-kort ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--tekst-2); font-size: 0.9375rem; }
.flyt-kort li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.flyt-kort li::before { content: ""; width: 10px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--fylling); }
.flyt-kort li strong { color: var(--tekst); font-weight: 600; }

.en-modell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stor { font-size: clamp(1.625rem, 1.2071rem + 1.7143vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.stor em { font-style: normal; color: var(--uthev); }
.en-modell .tekst { display: grid; gap: 18px; }
.en-modell .tekst p { color: var(--tekst-2); max-width: 34em; }
.symbol-stor { justify-self: center; width: min(360px, 100%); }
.symbol-stor .m-linje { stroke: var(--tekst); }

.data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.data .tekst { display: grid; gap: 18px; }
.data .tekst p { color: var(--tekst-2); }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: var(--flate); border: 1px solid var(--kant); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--uthev); font-weight: 500; font-size: 1.375rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--tekst-2); padding-bottom: 20px; max-width: 46em; }

/* Kontaktflaten er Dyp i begge utseender */
.kontakt {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: end;
  padding: clamp(28px, 5vw, 64px); border-radius: 24px; border: 1px solid var(--kant); color: #FFFFFF;
  background: radial-gradient(80% 120% at 88% 0%, rgba(21, 115, 200, 0.4), transparent 60%), #0C2430;
}
.kontakt h2 { color: #FFFFFF; font-size: clamp(1.625rem, 1.2071rem + 1.7143vw, 2.75rem); letter-spacing: -0.03em; }
.kontakt .eyebrow { color: #5BAFF4; }
.kontakt-tekst { display: grid; gap: 18px; }
.kontakt-tekst p { color: rgba(236, 243, 245, 0.8); max-width: 30em; font-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); }
.kontakt .knapp.sekundaer { color: #FFFFFF; border-color: rgba(201, 212, 216, 0.35); background: rgba(236, 243, 245, 0.06); }
.epost { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 1.0625rem; }
.epost span { font-weight: 600; user-select: all; }
.kopier { font: 500 0.8125rem var(--font); background: transparent; color: rgba(236, 243, 245, 0.85); border: 1px solid rgba(201, 212, 216, 0.3); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.kopier:hover { border-color: rgba(236, 243, 245, 0.7); }
.firma { font-style: normal; display: grid; gap: 3px; font-size: 0.9375rem; color: rgba(236, 243, 245, 0.75); }
.firma strong { color: #FFFFFF; }

.fot { position: relative; z-index: 2; background: var(--bg); padding-block: 40px 56px; }
.fot .nivaalinje { margin-bottom: 28px; }
.fot-rad { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 40px; }
.fot-merke { display: grid; gap: 10px; }
.fot p, .fot small { font-size: 0.875rem; color: var(--tekst-3); }
.fot-juss { display: grid; gap: 6px; max-width: 34rem; }
.fot-valg { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.fot-tema { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--tekst-3); }

@media (max-width: 1100px) {
  .nav .meny { display: none; }
  .flyt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .avsender, .merke-konsept { display: none; }
  .en-modell, .data, .kontakt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .steg, .prov { align-items: flex-end; padding-block: calc(var(--nav-h) + 24px) 20px; }
  .steg-kort, .prov-kort { width: 100%; padding: 20px; }
  .prov-kort > p:not(.eyebrow), .dra-hint { display: none; }
  /* Startsiden: 3D-modellen står over teksten, aldri bak (som NivoSite). Teksten begynner minst 180 px under
     navigasjonen, så feltet over den alltid har plass til modellen (js/scene.js, utsnittFor). På lav skjerm blir
     heroen da litt høyere enn skjermen. */
  .hero { padding-top: calc(var(--nav-h) + 180px); padding-bottom: 32px; }
  .hero-tekst { gap: 18px; }
  .hud-topp { display: none; } /* feiltekstene for 3D ligger i .hud-feil og synes også på mobil */
  .hud-kort { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px); bottom: auto; padding: 10px 12px; }
  .hud-kort .s3d-tittel { display: none; }
  .maaler { width: 84px; }
  .m-tall { font-size: 0.875rem; }
  .forklaring { font-size: 0.75rem; }
  .s3d-etikett .s3d-e { font-size: 0.75rem; padding: 5px 9px; }
  .scene::after { background: linear-gradient(0deg, var(--scrim) 0%, transparent 58%); }
  .scene::before { background-image: url("../media/scene-reserve-smal-lys.webp"); background-position: center top; }
  :root[data-theme="dark"] .scene::before { background-image: url("../media/scene-reserve-smal-mork.webp"); }

  /* Stegkortene: hvert steg er 135 % skjermhøyde, og rammen står fast (sticky) i én skjermhøyde med kortet 20 px
     over bunnen. Kortet står helt synlig i 35 % skjermhøyde rulling, glir så opp med siden og er helt synlig
     15 % til før det tones ut over de neste 15 % (js/scene.js, tonKort). Kortet er maks 40 % av skjermen. */
  .steg:not(.hero) { min-height: 135vh; min-height: 135svh; align-items: flex-start; padding-block: 0; }
  .steg:not(.hero) > .ramme {
    position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
    padding-block: calc(var(--nav-h) + 24px) 20px; box-sizing: border-box;
  }
  /* Ankeret til steg 1 lander med toppen av steget i toppen av skjermen, og kortet står da i sin faste plass.
     Den negative margen opphever scroll-padding-top på html (navigasjonen + 16 px); med 0 lander kortet 60 px under bunnen. */
  #slik { scroll-margin-top: calc(-1 * (var(--nav-h) + 16px)); }
  .steg-kort { padding: 14px 16px 16px; gap: 6px; }
  .steg-kort .brikker { display: none; }
  .niva::after { margin-top: 12px; }

  /* «Tegn din egen flate»: maks 60 % av skjermhøyden. Etikett og verdi på én linje over skyveren, og skjæring,
     fylling og netto (summen og de to postene). Snittet, tilstanden og merknaden ligger bak «Vis alle». */
  .prov { align-items: flex-end; }
  .prov-kort { padding: 14px 14px 12px; gap: 4px; }
  .prov-kort .eyebrow { display: none; }
  .prov-kort .niva::after { display: none; }
  .type-velger button { min-height: 44px; padding-block: 6px; }
  .skyvere { gap: 0; }
  .skyver { gap: 0; }
  .skyver .etikettrad { font-size: 0.875rem; line-height: 18px; }
  .skyver input[type="range"] { margin-top: -8px; }
  /* Mengdene på én rad: skjæring, fylling og netto, etikett over verdi */
  .prov-masser { gap: 12px; padding-top: 8px; }
  .prov-masser .maaler { width: 56px; }
  .prov-masser .m-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; }
  .prov-masser .m-tall .m-rad { display: grid; gap: 0; justify-items: start; align-content: start; }
  .prov-masser .m-tall .m-rad b { font-size: 0.9375rem; }
  .prov-masser .m-tall .m-rad.m-sum { border-top: 0; padding-top: 0; margin-top: 0; }
  .prov-masser .m-tall .m-rad.m-sum b { font-size: 0.9375rem; }
  .prov-kort.alle .prov-masser .m-tilstand { grid-column: 1 / -1; text-align: left; }
  .prov-kort:not(.alle) .snitt, .prov-kort:not(.alle) .prov-masser .m-tilstand, .prov-kort:not(.alle) .merknad { display: none; }
  .prov-fot { gap: 4px 20px; }
  .prov-fot .knapp { min-height: 44px; padding: 0 16px; }
  .vis-alle { display: inline-flex; }

  /* Trykkflater minst 44 px, skyvehåndtak 28 px */
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; }
  .lenkeknapp, .kopier { min-height: 44px; }
  .lenkeknapp { display: inline-flex; align-items: center; }
  .kopier { padding: 0 16px; }
  .tema button { min-height: 44px; padding: 0 14px; }
  .fot-juss a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
  .nav .tema:not(.spraak) { display: none; }
  .nav .cta-lang { display: none; }
  .nav .cta-kort { display: inline; }
  .tp-logo { height: 20px; }
  .logo { padding-block: 12px; }
  .nav .ramme { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene canvas, .scene::before { transition: none; }
  .knapp, .knapp:hover { transition: none; transform: none; }
}

/* Fargeprikker (klasser i stedet for style-attributter, så CSP kan stå uten unsafe-inline) */
.f-skj { background: var(--skjaering); }
.f-fyll { background: var(--fylling); }
.f-scene-tekst { background: var(--scene-tekst); }
.f-tekst { background: var(--tekst); }

/* Tilgjengelighet: undertittelen holdes på minst 24 px, så Fyll-blå på dag-bakgrunnen regnes som stor tekst (kontrast 4,48:1 ved 23,6 px på 375 px) */
.hero h1 .lett { font-size: max(0.46em, 1.5rem); }