/* Befaringsappen 2.0 (FB1 og FB2). Lastes bare på testflata (src/testflate.js). Bruker appens egne farger og
   skrifter (index.html :root), ingen nye. 390 først, så 1440; ingenting skal sprekke i 760. */

.v2-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v2 .hode h1 { margin-top: 14px; }
.v2-bunn { margin-top: 28px; display: grid; gap: 4px; }
.v2-midt { justify-content: center; }
.v2-under { font-family: Raleway, Manrope, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 30px 0 12px; }
.v2-boks { background: var(--panel); border: 1.5px solid var(--line-2); border-radius: 16px; padding: 4px 18px; }
.v2-fakta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.v2-fakta > div:first-child { border-top: 0; }
.v2-fakta span { color: var(--muted); flex: none; }
.v2-fakta b { text-align: right; overflow-wrap: anywhere; font-weight: 700; }
.v2-tekst { padding: 14px 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- topplinja: «Logg inn», initialene, og på PC menyen --- */
.v2-topp { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.v2-topp:empty { display: none; }
.topp-hoyre:empty + .v2-topp { margin-left: auto; }
.v2-logg-inn { min-height: 44px; padding: 0 2px; border: 0; background: none; font-size: 16px; font-weight: 700; color: var(--fg); }
.v2-meg { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sel-bg); color: var(--sel-fg); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.v2-pc-nav { display: flex; gap: 6px; margin-right: auto; }
.v2-pc-nav button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 700; color: var(--muted); }
.v2-pc-nav button[aria-current="page"] { background: var(--line-2); color: var(--fg); }
.v2-ny { width: auto; min-height: 44px; padding: 0 20px; font-size: 15px; }

/* --- fanene nederst (A-01, A-12, A-15) --- */
.v2-faner {
  position: fixed; left: 50%; bottom: 0; z-index: 6; width: min(100%, 480px); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, 1fr); background: var(--panel); border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.v2-faner button {
  position: relative; min-height: 64px; border: 0; background: none; display: grid; place-items: center; align-content: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.v2-faner button[aria-current="page"] { color: var(--fg); }
.v2-faner button[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 52px; height: 3px; margin-left: -26px; border-radius: 0 0 3px 3px; background: var(--orange); }
.v2-faner .ikon { width: 22px; height: 22px; }
body.v2-med-faner .side { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.v2-med-faner .kant { bottom: calc(64px + env(safe-area-inset-bottom)); }

/* --- innlogging (A-02, A-03) --- */
.v2-epost-tekst { color: var(--fg); overflow-wrap: anywhere; }
.v2-kodefelt { position: relative; display: block; margin-top: 4px; }
.v2-kodefelt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; z-index: 1; }
.v2-ruter { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 2.4vw, 10px); }
.v2-ruter span {
  aspect-ratio: 1 / 1.15; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field);
  font-size: clamp(22px, 7vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums;
}
.v2-kodefelt input:focus + .v2-ruter span.naa { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.v2-kodefelt input[data-ugyldig] + .v2-ruter span { border-color: var(--err); }
.v2-husk {
  margin-top: 22px; min-height: 48px; padding: 0 20px; border-radius: 24px; border: 1.5px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--fg);
}
.v2-husk[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.v2-husk .ikon { width: 18px; height: 18px; }
.v2-husk-tekst { margin-top: 10px; font-size: 14px; }

/* --- ny konto: Brønnøysund --- */
.v2-treff { display: grid; gap: 8px; margin-top: 10px; }
.v2-treff:empty { display: none; }
.v2-treff-rad {
  width: 100%; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--panel);
  display: grid; gap: 2px; text-align: left; color: var(--fg);
}
.v2-treff-rad b { font-size: 15px; font-weight: 800; }
.v2-treff-rad span, .v2-valgt span span { font-size: 13px; color: var(--muted); }
.v2-valgt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--sel-bg); border-radius: 12px; background: var(--panel); }
.v2-valgt > span { display: grid; gap: 2px; min-width: 0; }
.v2-valgt b { font-size: 15px; font-weight: 800; }

/* --- statuskortene (B-03) og lista (A-12) --- */
.v2-hei h1 { font-size: clamp(30px, 9vw, 36px); }
.v2-nett { margin: -8px 0 14px; }
.v2-kortliste { display: grid; gap: 14px; }
.v2-kort, .v2-tkort {
  width: 100%; padding: 18px; border: 1.5px solid var(--line-2); border-radius: 18px; background: var(--panel); color: var(--fg);
  display: grid; gap: 14px; text-align: left;
}
.v2-kort.usendt { border-style: dashed; border-color: var(--line); }
.v2-kort-topp { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; }
.v2-kort-navn { display: grid; gap: 2px; min-width: 0; }
.v2-kort-navn b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.v2-kort-navn span { font-size: 14px; color: var(--muted); }
.v2-kort-status { display: grid; gap: 3px; }
.v2-kort-status b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.v2-kort-status span { font-size: 14px; color: var(--muted); }
.v2-pil { color: var(--muted); }
.v2-pil .ikon { width: 20px; height: 20px; }
.v2-tommel { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--foto); display: block; flex: none; }
.v2-tommel.glyf { display: grid; place-items: center; color: #D5DBCC; }
.v2-tommel.glyf .ikon { width: 22px; height: 22px; }
.v2-fremdrift { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.v2-fremdrift span { height: 5px; border-radius: 3px; background: var(--line-2); }
.v2-fremdrift span.gjort { background: var(--ok); }
.v2-fremdrift span.naa { background: var(--orange); }
.v2-mine-bunn { margin-top: 24px; }
.v2-linjeliste { display: grid; }
.v2-linje {
  width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--fg);
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; text-align: left;
}
.v2-linje .v2-tommel { width: 56px; height: 56px; }
.v2-linje-midt { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.v2-linje-midt b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.v2-linje-midt > span:not(.v2-pille) { font-size: 14px; color: var(--muted); }
.v2-pille { display: inline-block; margin-top: 4px; padding: 4px 11px; border-radius: 14px; font-size: 13px; font-weight: 800; background: var(--line-2); color: var(--fg); }
.v2-pille.arbeid { background: var(--uth); color: var(--fg); }
.v2-pille.tilbud { background: var(--orange); color: var(--on-orange); }
.v2-pille.bestilt { background: var(--ok); color: #fff; }
@media (prefers-color-scheme: dark) { .v2-pille.bestilt { color: #1F2A22; } }

/* --- én forespørsel (A-13) --- */
.v2-en-hode h1 { font-size: clamp(27px, 8vw, 34px); margin: 8px 0 18px; }
.v2-statuskort { background: var(--panel); border: 1.5px solid var(--line-2); border-radius: 18px; padding: 20px 20px 8px; }
.v2-statuskort .v2-pille { margin: 0; }
.v2-statuskort h2 { font-family: Manrope, sans-serif; font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; margin: 12px 0 14px; }
.v2-tidslinje { list-style: none; margin: 0; padding: 0; }
.v2-tidslinje li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 0 0 18px; }
.v2-tidslinje li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line-2); }
.v2-tidslinje li:last-child::before { display: none; }
.v2-tidslinje li.gjort::before { background: var(--ok); }
.v2-prikk { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; }
.v2-tidslinje li.gjort .v2-prikk { background: var(--ok); border-color: var(--ok); color: #fff; }
.v2-tidslinje li.naa .v2-prikk { background: var(--orange); border-color: var(--orange); }
.v2-tidslinje li.naa .v2-prikk::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--on-orange); }
.v2-tidslinje li.slutt .v2-prikk { background: var(--muted); border-color: var(--muted); }
.v2-prikk .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.v2-tidslinje b { font-size: 17px; font-weight: 800; line-height: 30px; }
.v2-tidslinje li:not(.gjort):not(.naa):not(.slutt) b { color: var(--muted); }
.v2-tidslinje li > span:last-child { font-size: 14px; color: var(--muted); }
.v2-innhold-rad { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-2); }
.v2-innhold-rad:first-child { border-top: 0; }
.v2-innhold-rad .v2-tommel { width: 56px; height: 56px; }
.v2-innhold-rad > span { display: grid; gap: 2px; }
.v2-innhold-rad b { font-size: 17px; font-weight: 800; }
.v2-innhold-rad > span > span { font-size: 14px; color: var(--muted); }
.v2-fakta { margin-top: 14px; }

/* --- konto (A-15) --- */
.v2-seg { gap: 10px; }
.v2-seg button { flex: 0 0 auto; min-width: 88px; padding: 0 20px; border-radius: 28px; }
.v2-etter-seg { margin-top: 10px; font-size: 14px; }
.v2-push { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 18px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--panel); }
.v2-push > span { display: grid; gap: 2px; }
.v2-push b { font-size: 16px; font-weight: 800; }
.v2-push > span > span { font-size: 13px; color: var(--muted); }
.v2-push-hjelp { margin-top: 14px; }
/* FB5: trykkflaten er 44 px høy (prøven fb1-skjerm). Skinnen er fortsatt 34 px, tegnet med ::before midt i knappen. */
.v2-bryter { flex: none; width: 56px; height: 44px; border: 0; padding: 0; background: none; position: relative; }
.v2-bryter::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 34px; border-radius: 17px; background: var(--line); }
.v2-bryter span { position: absolute; top: 8px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform 160ms var(--kurve); }
.v2-bryter[aria-checked="true"]::before { background: var(--ok); }
.v2-bryter[aria-checked="true"] span { transform: translateX(22px); }
.v2-kolleger { padding: 4px 18px; }
.v2-kollega { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-2); }
.v2-kollega:first-child { border-top: 0; }
.v2-kollega > span:last-child { display: grid; gap: 2px; }
.v2-kollega b { font-size: 17px; font-weight: 800; }
.v2-kollega > span > span { font-size: 14px; color: var(--muted); }
.v2-ring { width: 48px; height: 48px; border-radius: 50%; background: var(--sel-bg); color: var(--sel-fg); display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.v2-ring.lys { background: var(--line-2); color: var(--fg); }
.v2-pluss { color: var(--fg); }
.v2-kollega-skjema { margin-top: 16px; }
.v2-loggut { margin-top: 26px; }

/* --- kvitteringen (A-11) --- */
.v2-kvit { padding-top: 20px; }
.v2-segl { width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.v2-segl .ikon { width: 30px; height: 30px; stroke-width: 2.4; }
.v2-kvit h1 { font-size: clamp(28px, 8vw, 34px); margin: 22px 0 8px; }
.v2-folg { display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin-top: 14px; padding: 18px; }
.v2-folg > span:last-child { display: grid; gap: 4px; justify-items: start; }
.v2-folg b { font-size: 17px; font-weight: 800; }
.v2-folg > span > span { font-size: 15px; color: var(--muted); }
.v2-folg .lenke { color: var(--fg); padding: 0; font-size: 16px; }
.v2-bjelle { color: var(--orange); }
.v2-bjelle .ikon { width: 26px; height: 26px; }
.v2-kontakt { background: var(--panel); }

/* --- PC (1024 og bredere): tavla (B-13) og delt visning (A-16) --- */
@media (min-width: 1024px) {
  body.v2-bred .app { max-width: none; }
  body.v2-bred .topp { padding: 0 32px; border-bottom: 1px solid var(--line-2); background: var(--panel); }
  body.v2-bred .topp-rad { height: 64px; }
  body.v2-bred .v2-topp { flex: 1; }
  .v2-pc { padding: 28px 32px 48px; }
  .v2-tavle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .v2-kolonne { display: grid; gap: 12px; min-width: 0; }
  .v2-kolonne h2 { font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0; margin: 0 0 4px; }
  .v2-kolonne h2 span { font-weight: 600; color: var(--muted); margin-left: 4px; }
  .v2-tkort { padding: 16px; gap: 12px; border-radius: 14px; }
  .v2-tkort.tilbud { border-color: var(--orange); }
  .v2-tkort .v2-kort-topp { grid-template-columns: 44px 1fr; }
  .v2-tkort .v2-tommel { width: 44px; height: 44px; }
  .v2-tkort .v2-kort-navn b { font-size: 16px; }
  .v2-tkort .v2-kort-status b { font-size: 15px; }
  .v2-tkort .v2-kort-status span { font-size: 14px; }
  .v2-tom { font-size: 14px; color: var(--muted); }
  .v2-pc-hjelp { margin-top: 18px; }
  .v2-delt { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 0; margin: -28px -32px -48px; min-height: calc(100vh - 65px); }
  .v2-venstre { padding: 28px 24px 28px 32px; border-right: 1px solid var(--line-2); }
  .v2-piller { display: flex; gap: 8px; margin-bottom: 12px; }
  .v2-piller button { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--panel); font-size: 15px; font-weight: 700; }
  .v2-piller button[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
  .v2-venstre .v2-linje { padding: 14px 12px; border-radius: 14px; border: 1.5px solid transparent; margin-bottom: 4px; }
  .v2-venstre .v2-linje.valgt { border-color: var(--fg); background: var(--panel); }
  .v2-venstre .v2-linje .v2-pil { display: none; }
  .v2-hoyre { padding: 36px 40px 48px; min-width: 0; }
  .v2-en-hode h1 { font-size: 36px; }
  .v2-to { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .v2-side-kol .v2-under:first-of-type { margin-top: 18px; }
  .v2-bilder-tittel { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
  .v2-bilder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .v2-bilder a, .v2-flere { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--foto); }
  .v2-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .v2-flere { display: grid; place-items: center; background: var(--line-2); font-weight: 800; }
  body.v2-bred .v2-faner { display: none; }
  body.v2-bred .side[data-side="v2konto"] .v2-smal { max-width: 520px; margin: 28px auto 0; }
}
/* 760: telefonens skjermer står sentrert, uten brudd. */
@media (min-width: 600px) and (max-width: 1023px) {
  .v2-faner { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
}

/* ---------- FB2: typen først, ramme, eksempel, sjekk, lapp og tekst ---------- */
.v2-start-hode h1 { margin-top: 6px; }
.v2-utkast .stripe { margin-top: 0; }
.v2-valg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.v2-valg-knapp { min-height: 156px; padding: 12px 8px 14px; font-size: 18px; gap: 4px; text-align: center; }
.v2-valg-knapp .tegn { height: 84px; max-width: 120px; }
.v2-valg-knapp small { font-size: 13px; font-weight: 600; color: var(--muted); }
.v2-valg-knapp[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.v2-neste { margin-top: 22px; }
.v2-soker { position: relative; }
.v2-ramme { position: absolute; inset: 10% 12% 22%; pointer-events: none; border-radius: 8px;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 22px 3px no-repeat, linear-gradient(var(--fg), var(--fg)) left top / 3px 22px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 22px 3px no-repeat, linear-gradient(var(--fg), var(--fg)) right top / 3px 22px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 22px 3px no-repeat, linear-gradient(var(--fg), var(--fg)) left bottom / 3px 22px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 22px 3px no-repeat, linear-gradient(var(--fg), var(--fg)) right bottom / 3px 22px no-repeat; }
.v2-ramme-tekst { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 3px 10px; border-radius: 8px; background: var(--panel); text-align: center; font-size: 14px; font-weight: 800; color: var(--fg); }
.v2-sjekk { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.v2-sjekk .ikon { width: 20px; height: 20px; }
.v2-sjekk.ok { color: var(--ok); }
.v2-sjekk.mork, .v2-sjekk.lys, .v2-sjekk.uskarp, .v2-sjekk.mangler { color: var(--err); }
.v2-eksempler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.v2-eks { margin: 0; display: grid; gap: 8px; }
.v2-eks-bilde { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--panel); border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.v2-eks-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-eks-bilde .tegn { width: 100%; height: 100%; }
.v2-eks.nar .v2-eks-bilde img, .v2-eks.nar .v2-eks-bilde .tegn { transform: scale(2.1); transform-origin: 50% 40%; }
.v2-eks.skraa .v2-eks-bilde img, .v2-eks.skraa .v2-eks-bilde .tegn { transform: perspective(240px) rotateY(38deg) scale(.82); }
.v2-eks.egne .v2-eks-bilde img { transform: none; }
.v2-eks figcaption { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
.v2-eks-merke { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.v2-eks-merke.ja { background: var(--ok); }
.v2-eks-merke.nei { background: var(--err); }
.v2-eks-merke .ikon { width: 14px; height: 14px; stroke-width: 2.6; }
.v2-sider { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.v2-side-flis { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--foto); }
.v2-side-flis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-side-flis.tom { border: 1.5px dashed var(--line); background: var(--panel); color: var(--fg); display: grid; place-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center; }
.v2-side-flis.tom .ikon { width: 28px; height: 28px; }
.v2-side-flis.tom b { font-size: 16px; font-weight: 800; }
.v2-side-flis.tom span { font-size: 14px; color: var(--muted); }
.v2-side-merke { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 8px; background: rgba(20, 26, 22, .78); color: #F5F2E7; font-size: 14px; font-weight: 800; }
.v2-side-flis .hake-merke { position: absolute; right: 8px; bottom: 8px; }
.v2-stor-tekst { min-height: 220px; width: 100%; }
.v2-portfelt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* ---------- FB3: kunden (S-01 til S-09), «La kunden ta bildene» (A-14), «Send til Proffkjøp», kontoforslaget ---------- */
.knapp-lenke { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.v2-k .hode h1 { font-size: clamp(30px, 8.4vw, 40px); }
.v2-trinn { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.v2-trinn li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.v2-trinn li > span { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--on-orange); display: grid; place-items: center; font-weight: 800; }
.v2-trinn b { font-size: 18px; font-weight: 700; }
.v2-tid { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--muted); font-size: 15px; }
.v2-tid .ikon { width: 20px; height: 20px; }
.v2-avsender { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; margin-top: 18px; }
.v2-avsender > span:not(.v2-merke-firma):not(.v2-hake) { display: grid; gap: 2px; min-width: 0; }
.v2-avsender b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.v2-avsender span span { font-size: 14px; color: var(--muted); }
.v2-merke-firma { width: 56px; height: 56px; border-radius: 12px; background: var(--sel-bg); color: var(--sel-fg); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.v2-merke-firma.tom { background: transparent; color: var(--muted); border: 1.5px dashed var(--line); }
.v2-hake { color: var(--ok); }
.v2-hake .ikon { width: 24px; height: 24px; }
.v2-info { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.v2-info .ikon { width: 20px; height: 20px; margin-top: 1px; }
.v2-geo { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 44px; }
.v2-geo .ikon { width: 18px; height: 18px; }
.v2-sok { margin-bottom: 12px; }
.v2-velgliste { display: grid; gap: 10px; }
.v2-velg { display: grid; grid-template-columns: 56px 1fr 28px; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 12px 16px; text-align: left;
  background: var(--panel); color: var(--fg); border: 1.5px solid var(--line-2); border-radius: 16px; font: inherit; }
.v2-velg > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.v2-velg b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.v2-velg span span { font-size: 14px; color: var(--muted); }
.v2-velg .v2-merke-firma:not(.tom) { background: var(--line-2); color: var(--fg); }
.v2-velg.valgt { border-color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.v2-radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); }
.v2-velg.valgt .v2-radio { border: 8px solid var(--fg); }
.v2-k-innhold { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.v2-k-innhold > span { display: grid; gap: 2px; }
.v2-k-innhold b { font-size: 17px; font-weight: 800; }
.v2-k-innhold span span { font-size: 14px; color: var(--muted); }
.v2-k-innhold .v2-tommel, .v2-k-innhold img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.v2-k .v2-fakta { margin-top: 12px; }
.v2-melding { padding: 16px 18px; }
.v2-melding p { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.v2-melding a { color: #1F5FBF; font-weight: 700; }
@media (prefers-color-scheme: dark) { .v2-melding a { color: #9CC2FF; } }
.v2-pille.venter { background: var(--orange); color: var(--on-orange); }
.v2-venter h2 { margin: 12px 0 6px; }
.v2-venter .hoved { margin-top: 14px; }
.v2-forslag { display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin-top: 14px; padding: 18px; }
.v2-forslag > span:nth-child(2) { display: grid; gap: 4px; }
.v2-forslag > span:nth-child(2) > span { color: var(--muted); font-size: 14px; }
.v2-forslag .v2-fakta, .v2-forslag .hoved { grid-column: 1 / -1; }
.v2-forslag .v2-fakta { margin-top: 2px; }
.v2-til-kunde-rad { justify-content: center; margin-top: 18px; }
.v2-til-kunde-rad .ikon { width: 18px; height: 18px; }
.v2-k-maal .antall-rad { margin-top: 8px; }
.v2-k-maal .skjemaknapper { margin-top: 28px; }
.v2-k .v2-kvit .hjelp { margin-top: 14px; }
.v2-statuskort.v2-venter + .v2-bilder-tittel { margin-top: 20px; }
/* FB3: bildene vises også på telefonen når kunden har sendt dem (entreprenøren ser over før «Send til Proffkjøp»). */
.v2-bilder-tittel { font-size: 14px; font-weight: 700; margin: 20px 0 10px; }
.v2-bilder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v2-bilder a, .v2-flere { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--foto); }
.v2-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-flere { display: grid; place-items: center; color: #fff; font-weight: 800; }

/* FB4: invitasjonen til en bedrift (Mine, Konto og kontooppsettet). Personen blir med først ved «Bli med». */
.v2-invitasjon { display: grid; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border: 1.5px solid var(--orange); border-radius: 16px; background: var(--panel); }
.v2-invitasjon > span:first-child { display: grid; gap: 4px; }
.v2-invitasjon b { font-size: 17px; font-weight: 800; line-height: 1.3; }
.v2-invitasjon > span:first-child > span { font-size: 14px; color: var(--muted); }
.v2-inv-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.v2-inv-knapper .hoved { width: auto; min-width: 140px; }
.v2-pc .v2-invitasjon { max-width: 640px; margin: 0 0 18px; }

/* FB5: bedriften er ikke bekreftet av Proffkjøp ennå (Konto). */
.v2-ubekreftet { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ai-bg); color: var(--ai-fg); border: 1.5px solid var(--ai-line); font-size: 15px; line-height: 1.45; }
.v2-ubekreftet svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.v2-ubekreftet b { display: block; margin-bottom: 2px; }

/* ===================================================================================================================
   FB9 (22.10.2026): drakten fra motorrommet, likt lerretet «Befaringsappen 2.0 · design runde 2» (versjon 75).
   Fasiten: Kunder\Proffkjøp\04 …\2026-10-befaringsappen-2.0\lerret-runde2\*.dc.html. Verdiene er lest ut av tavlene.
   Systemfonten, grå bunn #F1F1F3, glass bare på toppfeltet, menyen og bunnlinja. Hovedknappen #F05223 med hvit tekst
   19 px fet, 52 px høy på telefon og 48 px på PC. Kolonneetikett 11,5 px versaler #6B6B73. Lerretet er lyst; appen
   følger det også når telefonen står i mørk modus.
   =================================================================================================================== */
html[data-v2] {
  color-scheme: light;
  --bg: #F1F1F3; --panel: #FFFFFF; --field: #FFFFFF; --fg: #18181B; --muted: #52525B;
  --line: #D4D4D8; --line-2: #E4E4E7; --orange: #F05223; --on-orange: #FFFFFF;
  --sel-bg: #18181B; --sel-fg: #FFFFFF; --ok: #15803D; --err: #B91C1C; --foto: #E4E4E7;
  --ai-bg: #FFF7E6; --ai-line: #FCD9A0; --ai-fg: #713F12; --uth: #FFE4D6; --ill-fill: #FFE4D6;
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #F1F1F3;
}
html[data-v2] body {
  position: relative; overflow-x: hidden; background: #F1F1F3; color: #18181B;
  font-family: var(--sys); font-size: 14.5px; font-weight: 400; font-variant-numeric: tabular-nums;
}
/* Lysene i bakgrunnen, som på tavlene: oransje oppe til høyre, blått til venstre. Tegnet som gradienter i bunnen, så
   ingenting stikker utenfor kanten (en sirkel utenfor gjorde at telefonen zoomet ut siden). */
html[data-v2] body {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 179, 150, .34) 0, rgba(255, 179, 150, .22) 90px, rgba(255, 179, 150, .08) 190px, rgba(255, 179, 150, 0) 270px) no-repeat,
    radial-gradient(circle at 0 570px, rgba(169, 194, 255, .2) 0, rgba(169, 194, 255, .12) 80px, rgba(169, 194, 255, 0) 230px) no-repeat,
    #F1F1F3;
}
html[data-v2] h1, html[data-v2] h2, html[data-v2] h3, html[data-v2] p { text-wrap: wrap; }
html[data-v2] .app { position: relative; z-index: 1; }
html[data-v2] h1, html[data-v2] h2, html[data-v2] h3, html[data-v2] button, html[data-v2] input, html[data-v2] textarea, html[data-v2] select { font-family: var(--sys); }
html[data-v2] :focus-visible { outline: 3px solid rgba(240, 82, 35, .55); outline-offset: 2px; }

/* --- toppfeltet: glass, PROFFKJØP til venstre, «Logg inn» eller initialene til høyre --- */
html[data-v2] .topp { background: transparent; padding: calc(env(safe-area-inset-top) + 10px) 12px 0; }
html[data-v2] .topp-rad {
  height: 56px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 26px rgba(30, 36, 50, .08);
}
html[data-v2] .logo img { display: none; }
html[data-v2] .logo::before { content: "PROFF"; color: #F05223; }
html[data-v2] .logo::after { content: "KJØP"; color: #18181B; }
html[data-v2] .logo { font-family: var(--sys); font-weight: 900; font-size: 19px; letter-spacing: -.03em; text-decoration: none; }
html[data-v2] .v2-meg { width: 44px; height: 44px; background: #18181B; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; }
html[data-v2] .v2-logg-inn { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #18181B; }
html[data-v2] .lagring { font-size: 13px; font-weight: 400; color: #52525B; gap: 6px; }
html[data-v2] .lagring .prikk { width: 8px; height: 8px; background: #15803D; }

/* Skjermer med tilbakeknapp: toppfeltet er tilbakeknappen og tittelen (ingen logo). «Lagret» står til høyre i det. */
html[data-v2] body.v2-tilbake .topp { position: absolute; top: 0; left: 0; right: 0; height: 0; padding: 0; z-index: 7; pointer-events: none; }
html[data-v2] body.v2-tilbake .topp-rad { position: absolute; top: calc(env(safe-area-inset-top) + 6px); right: 30px; height: 44px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: auto; }
html[data-v2] body.v2-tilbake .topp .logo, html[data-v2] body.v2-tilbake #v2-topp { display: none; }
html[data-v2] .tilbakerad {
  position: relative; z-index: 6;
  margin: calc(env(safe-area-inset-top) + 10px) 12px 0; min-height: 56px; padding: 6px 18px 6px 6px; gap: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 26px rgba(30, 36, 50, .08);
  font-size: 15px; font-weight: 600; color: #18181B;
}
html[data-v2] .tilbakerad button { width: 44px; height: 44px; margin: 0; background: rgba(255, 255, 255, .9); color: #18181B; flex: none; }
html[data-v2] .tilbakerad button .ikon { width: 20px; height: 20px; }

/* --- felles: tittel, tekst, etiketter, knapper --- */
html[data-v2] .innhold { padding: 0 16px; }
html[data-v2] .hode h1, html[data-v2] .side h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
html[data-v2] .hode h1 { margin: 20px 2px 0; }
html[data-v2] .ingress { font-size: 14.5px; line-height: 1.45; color: #52525B; margin: 4px 2px 16px; }
html[data-v2] p { line-height: 1.45; }
html[data-v2] .eyebrow, html[data-v2] .seksjon-tittel, html[data-v2] .v2-etikett { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6B6B73; }
html[data-v2] .valgfritt { font-size: 13px; font-weight: 400; color: #6B6B73; }
html[data-v2] .hjelp { font-size: 13.5px; color: #52525B; }
html[data-v2] .hoved, html[data-v2] .andre { min-height: 52px; padding: 0 18px; border-radius: 14px; gap: 8px; line-height: 1.2; }
html[data-v2] .hoved { background: #F05223; color: #fff; border: 1px solid #F05223; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
html[data-v2] .hoved .ikon { width: 20px; height: 20px; stroke-width: 2.2; }
html[data-v2] .andre { background: #fff; color: #18181B; border: 1px solid #D4D4D8; font-size: 15px; font-weight: 500; }
html[data-v2] .andre .ikon { width: 18px; height: 18px; color: #C2410C; }
html[data-v2] .lenke { color: #C2410C; font-size: 14.5px; font-weight: 500; text-decoration-color: rgba(194, 65, 12, .35); text-underline-offset: 3px; }
html[data-v2] .lenke.fare { color: #B91C1C; text-decoration-color: rgba(185, 28, 28, .35); }
html[data-v2] .inndata, html[data-v2] .maalfelt, html[data-v2] .teller { border: 1px solid #D4D4D8; border-radius: 12px; background: #fff; font-weight: 400; }
html[data-v2] .inndata { min-height: 52px; font-size: 16px; padding: 12px 14px; }
html[data-v2] .inndata:focus, html[data-v2] .maalfelt[aria-expanded="true"] { border-color: #F05223; box-shadow: 0 0 0 3px rgba(240, 82, 35, .16); }
html[data-v2] label.felt, html[data-v2] .etikett { font-size: 14.5px; font-weight: 600; }
html[data-v2] label.felt { gap: 7px; }
/* Valgt: hvit bunn, oransje ramme, tekst #9A3412 halvfet. */
html[data-v2] .segmenter button { border: 1px solid #D4D4D8; border-radius: 12px; background: #fff; min-height: 48px; font-size: 15px; font-weight: 400; color: #3F3F46; }
html[data-v2] .segmenter button[aria-pressed="true"], html[data-v2] .v2-valg-knapp[aria-pressed="true"], html[data-v2] .valg-knapp[aria-pressed="true"] {
  background: #fff; color: #9A3412; border-color: #F05223; box-shadow: inset 0 0 0 1px #F05223; font-weight: 600;
}
html[data-v2] .feilmelding { color: #B91C1C; font-weight: 500; }

/* --- steg-linja (komponent): streker med navnet under. Grønn ferdig, oransje nå, grå senere. --- */
html[data-v2] .v2-steg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 20px 0 0; padding: 0 2px; list-style: none; }
html[data-v2] .v2-steg li { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; line-height: 1.2; color: #6B6B73; white-space: nowrap; }
html[data-v2] .v2-steg li i { display: block; height: 4px; border-radius: 2px; background: #D4D4D8; }
html[data-v2] .v2-steg li.d i { background: #15803D; }
html[data-v2] .v2-steg li.c { color: #18181B; font-weight: 600; }
html[data-v2] .v2-steg li.c i { background: #F05223; }
html[data-v2] .v2-steg-under { margin: 10px 2px 0; }
html[data-v2] .side > .v2-steg-boks { padding: 0 16px; }
html[data-v2] .innhold > .v2-steg-boks .v2-steg { margin-top: 20px; }

/* --- bunnlinja: glass, fast nederst, med hovedknappen (og menyen på forsiden) --- */
html[data-v2] .v2-fast {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 6; width: calc(min(100vw, 480px) - 24px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 24px;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 26px rgba(30, 36, 50, .08);
}
/* FB9c (Stian 22.10): menylinja står helt i bunnen av skjermen, full bredde, med plass til hjemmelinja på iPhone. Ikke flytende. */
html[data-v2] .v2-fast.med-meny {
  bottom: 0; width: min(100vw, 480px); gap: 2px; padding: 8px 8px calc(4px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 -6px 24px rgba(30, 36, 50, .08);
}
html[data-v2] .v2-fast.med-lenke { gap: 2px; padding: 8px 8px 2px; }
html[data-v2] .v2-fast > .lenke { align-self: center; justify-content: center; min-height: 44px; }
html[data-v2] .v2-to-knapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-v2] .v2-to-knapper .andre { padding: 0 10px; }
html[data-v2] .v2-fast nav { display: flex; gap: 4px; padding-top: 4px; border-top: 1px solid rgba(24, 24, 27, .07); }
html[data-v2] .v2-fast nav button {
  flex: 1; min-height: 52px; border: 0; border-radius: 18px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11.5px; font-weight: 400; color: #52525B;
}
html[data-v2] .v2-fast nav button .ikon { width: 22px; height: 22px; stroke-width: 1.8; }
html[data-v2] .v2-fast nav button[aria-current="page"] { background: #fff; color: #18181B; font-weight: 600; box-shadow: 0 2px 10px rgba(30, 36, 50, .10); }
html[data-v2] .side.v2-har-fast { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
html[data-v2] .side.v2-har-fast.v2-fast-hoy { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
html[data-v2] body.v2-med-faner .side { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
html[data-v2] .kant, html[data-v2] .v2-faner { display: none; }

/* --- forsiden for innlogget (forside): statuskortene --- */
html[data-v2] .v2-forside { padding: 20px 16px 0; display: flex; flex-direction: column; gap: 12px; }
html[data-v2] .v2-forside-hode { display: flex; flex-direction: column; gap: 4px; padding: 0 2px 4px; }
html[data-v2] .v2-forside-hode h1 { margin: 0; }
html[data-v2] .v2-sub { margin: 0; font-size: 14.5px; line-height: 1.45; color: #52525B; }
html[data-v2] .v2-sc { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid #E4E4E7; border-radius: 16px; color: #18181B; text-align: left; font-size: 14.5px; font-weight: 400; line-height: normal; }
html[data-v2] .v2-sc:active { transform: scale(.99); }
html[data-v2] .v2-sc-topp { display: flex; gap: 12px; align-items: center; }
html[data-v2] .v2-th { width: 48px; height: 48px; border-radius: 10px; background: #F4F4F5; display: grid; place-items: center; flex: none; }
html[data-v2] .v2-th svg { width: 34px; height: 34px; }
html[data-v2] .v2-sc-navn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-v2] .v2-ad { font-size: 15px; font-weight: 600; line-height: 1.3; }
html[data-v2] .v2-mt { font-size: 13px; color: #52525B; }
html[data-v2] .v2-sc-pil { width: 18px; height: 18px; color: #6B6B73; flex: none; }
html[data-v2] .v2-sc-status { display: flex; flex-direction: column; gap: 2px; }
html[data-v2] .v2-pb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
html[data-v2] .v2-pb i { height: 4px; border-radius: 2px; background: #E4E4E7; }
html[data-v2] .v2-pb i.d { background: #15803D; }
html[data-v2] .v2-pb i.c { background: #F05223; }
html[data-v2] .v2-merke { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; align-self: flex-start; }
html[data-v2] .v2-merke .ikon { width: 13px; height: 13px; stroke-width: 3; }
html[data-v2] .v2-merke.ts { background: #FFF1EA; color: #9A3412; border: 1px solid #FBD5C3; }
html[data-v2] .v2-merke.b { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
html[data-v2] .v2-merke.a { background: #F4F4F5; color: #3F3F46; border: 1px solid #E4E4E7; }
html[data-v2] .v2-gruppe { display: flex; align-items: baseline; gap: 6px; margin: 8px 2px -2px; font-size: 15px; font-weight: 600; }
html[data-v2] .v2-gruppe span { font-size: 13px; font-weight: 400; color: #52525B; }

/* --- én befaring (en-tilbud, en-bestilt, en-avsluttet) --- */
html[data-v2] .v2-main { position: relative; padding: 20px 16px 0; display: flex; flex-direction: column; gap: 16px; }
html[data-v2] .v2-hodeblokk { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
html[data-v2] .v2-hodeblokk h1 { margin: 0; }
html[data-v2] .v2-h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
html[data-v2] .v2-card { background: #fff; border: 1px solid #E4E4E7; border-radius: 16px; }
html[data-v2] .v2-status { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
html[data-v2] .v2-stegliste { list-style: none; margin: 6px 0 0; padding: 0; }
html[data-v2] .v2-stegliste li { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
html[data-v2] .v2-stegliste li:last-child { padding-bottom: 0; }
html[data-v2] .v2-stegliste .ln { position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: #E4E4E7; }
html[data-v2] .v2-stegliste .ln.d { background: #BBF7D0; }
html[data-v2] .v2-mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; z-index: 1; }
html[data-v2] .v2-mk .ikon { width: 14px; height: 14px; stroke-width: 3; }
html[data-v2] .v2-mk.d { background: #DCFCE7; color: #15803D; }
html[data-v2] .v2-mk.e { background: #15803D; color: #fff; }
html[data-v2] .v2-mk.c { background: #F05223; }
html[data-v2] .v2-mk.c::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
html[data-v2] .v2-mk.f { background: #fff; border: 2px solid #D4D4D8; }
html[data-v2] .v2-mk.a { background: #52525B; color: #fff; }
html[data-v2] .v2-sn { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-sn.f { font-weight: 500; color: #52525B; }
html[data-v2] .v2-ss { display: block; font-size: 13px; color: #52525B; margin-top: 2px; }
html[data-v2] .v2-it { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #F0F0F2; }
html[data-v2] .v2-it:first-child { border-top: 0; }
html[data-v2] .v2-it .v2-th { width: 52px; height: 52px; }
html[data-v2] .v2-it .v2-th svg { width: 36px; height: 36px; }
html[data-v2] .v2-it-tekst { display: flex; flex-direction: column; gap: 2px; }
html[data-v2] .v2-it-tekst b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-it-tekst span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 16px; border-top: 1px solid #F0F0F2; }
html[data-v2] .v2-row:first-child { border-top: 0; }
html[data-v2] .v2-row .k { color: #52525B; flex: none; }
html[data-v2] .v2-row .v { text-align: right; overflow-wrap: anywhere; }
html[data-v2] .v2-row .v.fet { font-weight: 600; }

/* --- arkene «Bekreft bestillingen» og «Spør om endring» --- */
html[data-v2] .v2-ark-bak { position: fixed; inset: 0; z-index: 20; background: rgba(24, 24, 27, .38); }
html[data-v2] .v2-ark {
  position: fixed; left: 50%; bottom: 0; z-index: 21; width: min(100vw, 480px); transform: translateX(-50%);
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(30, 36, 50, .18);
  display: flex; flex-direction: column; gap: 14px; max-height: 92svh; overflow-y: auto; animation: v2-opp 240ms cubic-bezier(.23, 1, .32, 1);
}
@keyframes v2-opp { from { transform: translate(-50%, 24px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
html[data-v2] .v2-ark-grep { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #D4D4D8; flex: none; }
html[data-v2] .v2-ark h2 { margin: 0; padding: 0 2px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
html[data-v2] .v2-ark .v2-row { padding: 12px 0; }
html[data-v2] .v2-ark-rader { padding: 0 2px; }
html[data-v2] .v2-fl { display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; font-weight: 600; }
html[data-v2] .v2-ta { width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid #D4D4D8; border-radius: 12px; background: #fff; font-family: var(--sys); font-size: 16px; font-weight: 400; color: #18181B; resize: none; }
html[data-v2] .v2-ta.hoy { min-height: 150px; }
html[data-v2] .v2-ta:focus { outline: none; border-color: #F05223; box-shadow: 0 0 0 3px rgba(240, 82, 35, .16); }
html[data-v2] .v2-ta::placeholder { color: #71717A; }
html[data-v2] .v2-ark-knapper { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
html[data-v2] .v2-ark-merk { margin: 0; padding: 0 2px; font-size: 13.5px; color: #52525B; }
html[data-v2] body.v2-ark-apen { overflow: hidden; }

/* --- tilbudet i appen (pdf) --- */
html[data-v2] .tilbakerad.v2-pdf-rad { padding: 6px; gap: 10px; }
html[data-v2] .v2-pdf-tittel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-v2] .v2-pdf-tittel b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-pdf-tittel span { font-size: 12.5px; font-weight: 400; color: #52525B; }
html[data-v2] .v2-ib, html[data-v2] .tilbakerad .v2-ib { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D4D4D8; background: #fff; display: grid; place-items: center; color: #C2410C; flex: none; text-decoration: none; }
html[data-v2] .v2-ib .ikon { width: 19px; height: 19px; }
html[data-v2] .v2-pdf-main { padding: 16px 16px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
html[data-v2] .v2-pdf { width: 100%; max-width: 358px; min-height: 506px; background: #fff; box-shadow: 0 2px 10px rgba(30, 36, 50, .12); padding: 26px 24px; color: #111; font-size: 8.6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
html[data-v2] .v2-pdf p { line-height: 1.5; margin: 22px 0 0; }
html[data-v2] .v2-pdf-to { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
html[data-v2] .v2-pdf table { width: 100%; border-collapse: collapse; margin-top: 20px; }
html[data-v2] .v2-pdf td, html[data-v2] .v2-pdf th { padding: 3px 0; text-align: left; vertical-align: top; }
html[data-v2] .v2-pdf th { font-weight: 600; border-bottom: .8px solid #111; }
html[data-v2] .v2-pdf .r { text-align: right; padding-left: 6px; white-space: nowrap; }
html[data-v2] .v2-pdf .s td { border-top: .6px solid #999; }
html[data-v2] .v2-pdf .t td { border-top: .9px solid #111; font-weight: 700; }
html[data-v2] .v2-pdf-logo { font-weight: 900; font-size: 13px; letter-spacing: -.03em; }
html[data-v2] .v2-pdf-logo b { color: #F05223; font-weight: 900; }
html[data-v2] .v2-side-av { font-size: 13px; color: #52525B; }

/* --- «Noe mer å sende?» (oversikt) --- */
html[data-v2] .v2-lagt-til { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #DCFCE7; color: #14532D; font-size: 14.5px; font-weight: 600; }
html[data-v2] .v2-lagt-til > span { width: 26px; height: 26px; border-radius: 50%; background: #15803D; color: #fff; display: grid; place-items: center; flex: none; }
html[data-v2] .v2-lagt-til .ikon { width: 15px; height: 15px; stroke-width: 3; }
html[data-v2] .v2-blokk { display: flex; flex-direction: column; gap: 8px; }
html[data-v2] .v2-blokk > .v2-etikett { padding: 0 2px; }
html[data-v2] .v2-produkt { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 10px; }
html[data-v2] .v2-produkt + .v2-produkt { border-top: 1px solid #F0F0F2; }
html[data-v2] .v2-produkt .v2-bilde { width: 52px; height: 52px; border-radius: 10px; background: #F4F4F5; object-fit: cover; flex: none; display: grid; place-items: center; overflow: hidden; }
html[data-v2] .v2-produkt .v2-bilde svg { width: 36px; height: 36px; }
html[data-v2] .v2-produkt-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-v2] .v2-produkt-tekst b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-produkt-tekst span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-produkt .lenke { padding: 0 10px; }
html[data-v2] .v2-mini-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-v2] .v2-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 92px; border-radius: 14px; background: #fff; border: 1px solid #E4E4E7; color: #18181B; font-size: 13.5px; font-weight: 600; text-align: center; padding: 0 4px; }
html[data-v2] .v2-mini svg { width: 38px; height: 38px; }

/* --- utfyllingen (lerretet: Main, hva, porttype, bilde1, sjekk, maal, lapp, tekst, levering) --- */
html[data-v2] .v2-start-hode h1 { margin: 16px 2px 16px; }
html[data-v2] .v2-fliser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-v2] .v2-flis, html[data-v2] .valg-knapp, html[data-v2] .v2-valg-knapp {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 128px; padding: 12px 8px;
  border-radius: 16px; background: #fff; border: 1px solid #E4E4E7; color: #18181B; text-align: center; font-size: 15px; font-weight: 400;
}
html[data-v2] .v2-flis b, html[data-v2] .valg-knapp > span { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-flis span, html[data-v2] .valg-knapp small { font-size: 13px; font-weight: 400; color: #52525B; }
html[data-v2] .v2-valg { gap: 10px; margin-top: 0; }
html[data-v2] .side[data-side="v2porttype"] .valg-knapp { min-height: 156px; }
html[data-v2] .valg-knapp .tegn { height: 72px; max-width: 96px; stroke-width: 2; }
html[data-v2] .valg-knapp[aria-pressed="true"] > span { color: #9A3412; }
html[data-v2] .valg-knapp[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #F05223; }
html[data-v2] .slik-rad { padding: 14px 16px 0; }
html[data-v2] .slik-lenke { color: #C2410C; font-size: 14.5px; font-weight: 500; min-height: 44px; text-decoration-thickness: 1px; }
html[data-v2] .slik-lenke .ikon { width: 18px; height: 18px; }
html[data-v2] .signatur { display: none; }
html[data-v2] .v2-signatur { display: block; padding: 6px 0 0; font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: #6B6B73; }

/* Bildesteget: tittelen med merket over, tegningen i et hvitt kort, sjekken som gult varsel. */
html[data-v2] .steg-hode { display: none; }
html[data-v2] .innhold.steg { padding-top: 10px; display: flex; flex-direction: column; }
html[data-v2] .v2-sidemerke { height: 30px; padding: 0 12px; font-size: 14px; margin: 6px 2px 10px; }
html[data-v2] .v2-merke.o { background: #FFF1EA; color: #9A3412; border: 1px solid #FBD5C3; }
html[data-v2] .v2-sidemerke .ikon { width: 16px; height: 16px; stroke-width: 1.8; }
html[data-v2] .innhold.steg h1 { margin: 0 2px; }
html[data-v2] .innhold.steg .ingress { margin: 6px 2px 16px; }
html[data-v2] .tegning.v2-soker { border-radius: 16px; background: #fff; border: 1px solid #E4E4E7; color: #18181B; margin-top: 4px; }
html[data-v2] .tegning.v2-soker.foto { border: 0; background: #3F4A42; margin-top: 14px; }
html[data-v2] .v2-ramme-tekst { position: static; transform: none; display: block; max-width: none; margin: 10px 2px 0; padding: 0; background: none; color: #52525B; font-size: 13px; font-weight: 400; }
html[data-v2] .v2-sjekk { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 400; line-height: 1.4; }
html[data-v2] .v2-sjekk.ok { background: #DCFCE7; border: 1px solid #BBF7D0; color: #14532D; }
html[data-v2] .v2-sjekk.mork, html[data-v2] .v2-sjekk.lys, html[data-v2] .v2-sjekk.uskarp, html[data-v2] .v2-sjekk.mangler { background: #FEF9C3; border: 1px solid #FDE68A; color: #713F12; }
html[data-v2] .v2-sjekk .ikon { flex: none; width: 20px; height: 20px; }
html[data-v2] .hake-merke { background: #15803D; color: #fff; }

/* Hovedknappen fast nederst (etterVis flytter knappene hit). To knapper med ramme står side om side (lerretet: k-bilde). */
html[data-v2] .skjemaknapper.v2-fast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-v2] .skjemaknapper.v2-fast > * { grid-column: 1 / -1; }
html[data-v2] .skjemaknapper.v2-fast > .hoved ~ .andre + .andre, html[data-v2] .skjemaknapper.v2-fast > .hoved ~ .andre:has(+ .andre) { grid-column: auto; }
html[data-v2] .v2-melding { padding: 12px 14px; max-width: 320px; border-radius: 18px 18px 18px 6px; background: #E4E4E7; }
html[data-v2] .v2-melding p { font-size: 14.5px; line-height: 1.45; }
html[data-v2] .v2-melding a, html[data-v2] .v2-melding-lenke { color: #1D4ED8; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
html[data-v2] .v2-lenkepar { display: flex; justify-content: center; gap: 24px; }
html[data-v2] .v2-forslag { display: block; padding: 0; margin-top: 16px; }
html[data-v2] .v2-forslag > .v2-bjelle { float: left; margin: 14px 0 0 16px; }
html[data-v2] .v2-forslag > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 12px 52px; }
html[data-v2] .v2-forslag b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-forslag > span:nth-child(2) > span { font-size: 13.5px; color: #52525B; }
html[data-v2] .v2-forslag .v2-fakta { clear: both; border-top: 1px solid #F0F0F2; }
html[data-v2] .v2-bjelle { color: #C2410C; }
html[data-v2] .v2-bjelle .ikon { width: 22px; height: 22px; }
html[data-v2] .skjemaknapper.v2-fast { margin: 0; }
html[data-v2] .skjemaknapper.v2-neste { margin-top: 22px; }

/* Mål og valg: uten det store bildet og panelet; bildene som en rad øverst, så feltene. */
html[data-v2] .side[data-side="produkt"]:not(.v2-k-maal) .produktbilde { display: none; }
html[data-v2] .side[data-side="produkt"] .ark-panel { margin: 0; padding: 18px 16px 0; background: none; border-radius: 0; animation: none; }
html[data-v2] .side[data-side="produkt"] .ark-panel::before { display: none; }
html[data-v2] .side[data-side="produkt"] .ark-hode span { display: none; }
html[data-v2] .side[data-side="produkt"] .ark-hode h1 { margin: 0 2px; }
html[data-v2] .side[data-side="produkt"]:not(.v2-k-maal) .felter > .hjelp { display: none; }
html[data-v2] .ark-panel { animation: none; }
/* K2: seks bilder av en dør (6 × 78 px + mellomrom) er bredere enn en telefon på 390 px. Uten brytning ble hele siden 524 px bred, og 'fixed'-elementene og siden ble skjøvet sidelengs når målfeltet fikk fokus. */
html[data-v2] .side[data-side="produkt"] .stripe.i-panel { gap: 8px; padding: 16px 0 0; margin: 0; overflow: visible; flex-wrap: wrap; }
html[data-v2] .side[data-side="produkt"] .stripe.i-panel .flis { flex: 0 0 78px; width: 78px; height: 78px; border-radius: 12px; border: 1px solid #E4E4E7; background: #fff; }
html[data-v2] .side[data-side="produkt"] .kol2, html[data-v2] .v2-portfelt { align-items: end; }
html[data-v2] .side[data-side="produkt"] .segmenter.bryt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-v2] .side[data-side="produkt"] .segmenter.bryt button:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-v2] .side[data-side="produkt"] .segmenter.bryt button { min-width: 0; }
html[data-v2] .flis-merke { left: 6px; right: 6px; bottom: 6px; padding: 0; height: 22px; line-height: 22px; border-radius: 7px; background: #F4F4F5; color: #52525B; font-size: 11.5px; font-weight: 400; }
html[data-v2] .hva-rad { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px 0 16px; margin-top: 16px; background: #fff; border: 1px solid #E4E4E7; border-radius: 14px; font-size: 14.5px; font-weight: 400; }
html[data-v2] .maalfelt { height: 52px; min-height: 52px; line-height: 50px; font-size: 17px; font-weight: 400; }
html[data-v2] .maalfelt small { font-size: 14px; font-weight: 400; color: #52525B; }
html[data-v2] .maalfelt.tom { font-size: 15px; color: #6B6B73; }
html[data-v2] .utvid { min-height: 52px; padding: 0 16px; border: 1px solid #E4E4E7; border-radius: 14px; background: #fff; font-size: 14.5px; font-weight: 400; }
html[data-v2] .utvid b { color: #C2410C; font-weight: 400; }
html[data-v2] .teller { min-height: 52px; }

/* Levering og kontakt. */
html[data-v2] .geo { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid #E4E4E7; border-radius: 14px; background: #fff; color: #18181B; font-size: 15px; font-weight: 500; text-align: left; }
html[data-v2] .geo .ikon:first-child { color: #C2410C; width: 20px; height: 20px; }
html[data-v2] .geo .ikon:last-child { margin-left: auto; color: #52525B; width: 18px; height: 18px; }
html[data-v2] .uke { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px; border: 1px solid #E4E4E7; border-radius: 999px; background: #fff; }
html[data-v2] .rundknapp { width: 52px; height: 52px; border: 1px solid #D4D4D8; background: #fff; font-size: 22px; }
html[data-v2] .uke-tall { font-size: 17px; font-weight: 600; }
html[data-v2] .uke-dato { font-size: 13px; color: #52525B; }
html[data-v2] .side[data-side="levering"] .seksjon-tittel { margin: 22px 2px 8px; }
html[data-v2] .v2-kontakt { background: #fff; border: 1px solid #E4E4E7; border-radius: 14px; }

/* Notatene og bare tekst. */
html[data-v2] .v2-side-flis { border-radius: 14px; }
html[data-v2] .v2-side-flis.tom { border: 1px dashed #A1A1AA; background: rgba(255, 255, 255, .5); }
html[data-v2] .v2-side-flis.tom .ikon { color: #C2410C; }
html[data-v2] .v2-side-flis.tom b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-side-flis.tom span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-side-merke { border-radius: 999px; background: rgba(24, 24, 27, .78); color: #fff; font-size: 13px; font-weight: 600; }
html[data-v2] textarea.inndata { min-height: 96px; }

/* --- innloggingen (lerretet: logg-inn, kode) --- */
html[data-v2] .v2-tr-logo { font-weight: 900; font-size: 19px; letter-spacing: -.03em; color: #18181B; }
html[data-v2] .v2-tr-logo b { color: #F05223; font-weight: 900; }
html[data-v2] .side[data-side="v2logginn"] .hode h1, html[data-v2] .side[data-side="v2kode"] .hode h1 { margin-top: 30px; }
html[data-v2] .side[data-side="v2logginn"] .felter { margin-top: 16px; }
html[data-v2] .v2-epost-tekst { color: #18181B; }
html[data-v2] .v2-ruter { gap: 9px; }
html[data-v2] .v2-ruter span { aspect-ratio: 52 / 58; border: 1px solid #D4D4D8; border-radius: 12px; background: #fff; font-size: 22px; font-weight: 400; }
html[data-v2] .v2-kodefelt input:focus + .v2-ruter span.naa { border-color: #F05223; box-shadow: 0 0 0 3px rgba(240, 82, 35, .16); }
html[data-v2] .v2-husk {
  width: 100%; margin-top: 22px; min-height: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid #E4E4E7; background: #fff;
  display: flex; align-items: flex-start; gap: 12px; text-align: left; color: #18181B; font-size: 14.5px; font-weight: 400;
}
html[data-v2] .v2-husk > span:last-child { display: flex; flex-direction: column; gap: 2px; }
html[data-v2] .v2-husk b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-husk > span:last-child > span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-boks-hake { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 1.5px solid #A1A1AA; background: #fff; display: grid; place-items: center; color: #fff; }
html[data-v2] .v2-husk[aria-checked="true"] .v2-boks-hake { background: #F05223; border-color: #F05223; }
html[data-v2] .v2-boks-hake .ikon { width: 16px; height: 16px; }

/* --- Konto (lerretet: konto, konto-ikke-bekreftet) --- */
html[data-v2] .side[data-side="v2konto"] .hode h1 { margin-top: 20px; }
html[data-v2] .side[data-side="v2konto"] .hode .ingress { margin-bottom: 12px; }
html[data-v2] .v2-seksjon { margin: 20px 2px 10px; }
html[data-v2] .lenker + .v2-seksjon { margin-top: 12px; }
html[data-v2] .v2-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; border-radius: 14px; background: #E4E4E7; }
html[data-v2] .v2-seg button { min-width: 0; border: 0; border-radius: 11px; background: transparent; color: #3F3F46; }
html[data-v2] .v2-seg button[aria-pressed="true"] { background: #fff; color: #9A3412; box-shadow: inset 0 0 0 1.5px #F05223; font-weight: 600; }
html[data-v2] .v2-etter-seg { margin: 10px 2px 0; font-size: 13.5px; }
html[data-v2] .v2-push { margin-top: 0; padding: 14px 16px; border: 1px solid #E4E4E7; border-radius: 16px; background: #fff; align-items: center; }
html[data-v2] .v2-push b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-push > span > span { font-size: 13.5px; line-height: 1.4; color: #52525B; }
html[data-v2] .v2-bryter::before { background: #D4D4D8; }
html[data-v2] .v2-bryter[aria-checked="true"]::before { background: #F05223; }
html[data-v2] .v2-bryter:disabled { opacity: 1; }
html[data-v2] .v2-push.laast { background: #F4F4F5; }
html[data-v2] .v2-kolleger { padding: 0 16px; }
html[data-v2] .v2-kollega { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid #F0F0F2; }
html[data-v2] .v2-kollega b { font-size: 15px; font-weight: 400; }
html[data-v2] .v2-kollega > span:nth-child(2) > span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-ring { width: 36px; height: 36px; background: #F4F4F5; color: #3F3F46; font-size: 12px; font-weight: 600; }
html[data-v2] .v2-pluss { color: #C2410C; }
html[data-v2] .v2-loggut { margin-top: 22px; text-align: center; }
html[data-v2] .v2-husket { margin: 10px 0 0; font-size: 13px; color: #52525B; }
html[data-v2] .v2-ikke-bekr { height: 22px; padding: 0 8px; font-size: 12px; margin-left: 6px; vertical-align: 1px; }
html[data-v2] .v2-ubekreftet { background: #F4F4F5; border: 1px solid #E4E4E7; color: #3F3F46; border-radius: 14px; font-size: 14px; }

/* --- forsiden med grupper (lerretet: forside-alle) --- */
html[data-v2] .v2-gr { margin: 8px 2px -4px; }

/* --- huseieren (lerretet: k-velkommen … a-takk) og de felles boksene --- */
html[data-v2] .v2-boks { background: #fff; border: 1px solid #E4E4E7; border-radius: 16px; padding: 0; }
html[data-v2] .v2-fakta > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 16px; border-top: 1px solid #F0F0F2; font-size: 14.5px; }
html[data-v2] .v2-fakta > div:first-child { border-top: 0; }
html[data-v2] .v2-fakta span { color: #52525B; }
html[data-v2] .v2-fakta b { font-weight: 400; text-align: right; }
html[data-v2] .v2-k .hode h1 { font-size: 24px; }
html[data-v2] .side[data-side="kvelkommen"] .innhold { padding-top: 16px; }
html[data-v2] .v2-avsender { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-top: 10px; }
html[data-v2] .v2-avsender > span:not(.v2-merke-firma):not(.v2-hake) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
html[data-v2] .v2-avsender b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-avsender span span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-merke-firma { width: 48px; height: 48px; border-radius: 12px; background: #18181B; color: #fff; font-size: 15px; font-weight: 600; flex: none; }
html[data-v2] .v2-merke-firma.tom { background: #fff; color: #3F3F46; border: 1px dashed #A1A1AA; }
html[data-v2] .v2-hake { width: 28px; height: 28px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: grid; place-items: center; flex: none; margin-left: auto; }
html[data-v2] .v2-hake .ikon { width: 15px; height: 15px; }
html[data-v2] .v2-trinn { margin: 6px 0 0; gap: 14px; }
html[data-v2] .v2-trinn li { grid-template-columns: 32px 1fr; gap: 14px; }
html[data-v2] .v2-trinn li > span { width: 32px; height: 32px; border: 1.5px solid #D4D4D8; background: #fff; color: #3F3F46; font-size: 14px; font-weight: 600; }
html[data-v2] .v2-trinn b { font-size: 15px; font-weight: 400; }
html[data-v2] .v2-tid { margin: 18px 2px 0; font-size: 13.5px; color: #52525B; }
html[data-v2] .v2-tid .ikon { width: 16px; height: 16px; }
html[data-v2] .v2-velgliste { gap: 10px; }
html[data-v2] .v2-velg { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #E4E4E7; font-size: 14.5px; }
html[data-v2] .v2-velg > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
html[data-v2] .v2-velg b { font-size: 15px; font-weight: 500; }
html[data-v2] .v2-velg span span { font-size: 13px; color: #52525B; }
html[data-v2] .v2-velg .v2-merke-firma, html[data-v2] .v2-velg .v2-merke-firma:not(.tom) { width: 44px; height: 44px; border-radius: 11px; background: #F4F4F5; color: #3F3F46; font-size: 14px; }
html[data-v2] .v2-velg .v2-merke-firma.tom { background: #fff; border: 1px dashed #A1A1AA; }
html[data-v2] .v2-velg.valgt { border-color: #F05223; box-shadow: inset 0 0 0 1px #F05223; }
html[data-v2] .v2-velg.valgt b { color: #9A3412; font-weight: 600; }
html[data-v2] .v2-radio { width: 24px; height: 24px; border: 2px solid #D4D4D8; background: #fff; display: grid; place-items: center; flex: none; margin-left: auto; }
html[data-v2] .v2-velg.valgt .v2-radio { border: 2px solid #F05223; }
html[data-v2] .v2-velg.valgt .v2-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #F05223; }
/* K7: «Skal du utføre jobben, eller få den gjort?» og lenkene tilbake */
/* K8 (Stian 29.10): overskriften og valgene midt i høyden, på telefon og PC. Høyden er skjermen under topplinja. */
html[data-v2] .side[data-side="v2hvem"] { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--v2-topp-h, 56px)); }
html[data-v2] .side[data-side="v2hvem"] .innhold { padding-top: 0; padding-bottom: 0; width: 100%; }
html[data-v2] .side[data-side="v2hvem"] .hode { margin-bottom: 18px; }
html[data-v2] .v2-hvem-valg { min-height: 84px; color: #18181B; cursor: pointer; }
html[data-v2] .v2-hvem-valg b { font-size: 16px; font-weight: 600; }
html[data-v2] .v2-hvem-ikon { width: 48px; height: 48px; border-radius: 12px; background: #FFE4D6; color: #C2410C; display: grid; place-items: center; flex: none; }
html[data-v2] .v2-hvem-ikon .ikon { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { html[data-v2] .v2-hvem-valg:hover { border-color: #A1A1AA; } }
html[data-v2] .v2-hvem-valg:active { transform: scale(.98); }
html[data-v2] .lenke.v2-bytt { color: #C2410C; font-size: 14.5px; font-weight: 500; min-height: 44px; }
/* K8: sluttkundens og huseierens første skjerm har stegene fra introen «Slik fungerer det» (tegningene står i index.html). */
html[data-v2] .v2-intro-steg { margin: 8px 0 0; }
html[data-v2] .v2-intro-steg .intro-tekst h2 { color: #18181B; }
html[data-v2] .side.v2-landing .v2-intro-steg { margin-top: 24px; }
html[data-v2] .side[data-side="kvelkommen"] .v2-tid { margin-top: 6px; }
/* K8: entreprenørens egen referanse, øverst på kortet under Mine og på «Én befaring». */
html[data-v2] .v2-ref { display: block; font-size: 13px; font-weight: 600; color: #3F3F46; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-v2] .v2-ref-endre { min-height: 0; padding: 0; margin-left: 6px; font-size: 14px; color: #C2410C; }
html[data-v2] .v2-row.v2-ref-rad { display: block; }
html[data-v2] .v2-ref-rad .hjelp { margin-top: 6px; }
html[data-v2] .v2-ref-knapper { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 10px; }
html[data-v2] .v2-ref-knapper .hoved { width: auto; min-width: 110px; }
html[data-v2] .v2-sok-felt { position: relative; display: block; }
html[data-v2] .v2-sok-felt .ikon { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; color: #52525B; }
html[data-v2] .v2-sok-felt input { padding-left: 46px; }
html[data-v2] .v2-info { margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: #F4F4F5; color: #3F3F46; font-size: 13.5px; }
html[data-v2] .v2-k-innhold { display: flex; align-items: center; gap: 14px; padding: 12px 6px 12px 14px; }
html[data-v2] .v2-k-innhold > span { flex: 1; }
html[data-v2] .v2-k-innhold b { font-size: 15px; font-weight: 600; }
html[data-v2] .v2-k-innhold .lenke { padding: 0 10px; }
html[data-v2] .v2-segl { width: 76px; height: 76px; background: #DCFCE7; color: #15803D; }
html[data-v2] .v2-segl .ikon { width: 34px; height: 34px; }
html[data-v2] .v2-kvit { padding-top: 24px; }
html[data-v2] .v2-kvit h1 { font-size: 24px; margin: 18px 2px 6px; }
html[data-v2] .v2-geo { color: #C2410C; }

/* --- PC, entreprenøren (lerretet: e-tavle, e-en, e-la-kunden) --- */
@media (min-width: 1024px) {
  html[data-v2] body.v2-bred .app { max-width: none; }
  html[data-v2] body.v2-bred .topp { padding: 12px 16px 0; border-bottom: 0; background: transparent; }
  html[data-v2] body.v2-bred .topp-rad { height: 66px; padding: 8px 10px 8px 22px; gap: 14px; }
  html[data-v2] .hoved { min-height: 48px; }
  html[data-v2] .v2-pc-nav { margin-left: 14px; }
  html[data-v2] .v2-pc-nav button { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: #3F3F46; }
  html[data-v2] .v2-pc-nav button[aria-current="page"] { background: #fff; color: #18181B; box-shadow: 0 1px 4px rgba(30, 36, 50, .08); }
  html[data-v2] .v2-ny { width: auto; min-height: 44px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; }
  html[data-v2] .v2-ny.hoved { min-height: 48px; height: 48px; padding: 0 20px; font-size: 19px; }
  html[data-v2] .v2-ny[aria-current="page"] { color: #9A3412; border-color: #F05223; box-shadow: inset 0 0 0 1px #F05223; font-weight: 600; }
  html[data-v2] body.v2-bred .v2-meg { width: 44px; height: 44px; }
  html[data-v2] .v2-pc { padding: 26px 32px 48px; }
  html[data-v2] .v2-pc-hode { margin: 0 0 22px; }
  html[data-v2] .v2-pc-hode h1 { margin: 0 0 6px; }
  html[data-v2] .v2-tavle { gap: 18px; }
  html[data-v2] .v2-kolonne { gap: 12px; }
  html[data-v2] .v2-kolonne h2 { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; margin: 0 0 -2px; font-size: 15px; font-weight: 600; }
  html[data-v2] .v2-kolonne h2 span { font-weight: 400; color: #6B6B73; margin: 0; }
  html[data-v2] .v2-tk .v2-th { width: 44px; height: 44px; }
  html[data-v2] .v2-tk .v2-th svg { width: 30px; height: 30px; }
  html[data-v2] .v2-kolonne .lenker { margin-top: 0; padding: 0 4px; }
  html[data-v2] .v2-delt { grid-template-columns: 352px 1fr; margin: -26px -32px -48px; min-height: calc(100vh - 80px); }
  html[data-v2] .v2-venstre { padding: 24px 0 28px 32px; border-right: 0; }
  html[data-v2] .v2-piller { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: #F4F4F5; border: 1px solid #E4E4E7; margin-bottom: 14px; }
  html[data-v2] .v2-piller button { min-height: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 400; color: #52525B; }
  html[data-v2] .v2-piller button[aria-pressed="true"] { background: #fff; color: #9A3412; font-weight: 600; box-shadow: inset 0 0 0 1.5px #F05223, 0 1px 2px rgba(0, 0, 0, .06); border: 0; }
  html[data-v2] .v2-pcliste { display: flex; flex-direction: column; gap: 10px; }
  html[data-v2] .v2-pcl { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px; background: #fff; border: 1px solid #E4E4E7; border-radius: 14px; text-align: left; color: #18181B; font-size: 14.5px; font-weight: 400; }
  html[data-v2] .v2-pcl .v2-th { width: 44px; height: 44px; }
  html[data-v2] .v2-pcl .v2-th svg { width: 30px; height: 30px; }
  html[data-v2] .v2-pcl .v2-sc-navn { gap: 3px; }
  html[data-v2] .v2-pcl .v2-merke { height: 24px; padding: 0 9px; font-size: 12.5px; margin-top: 4px; }
  html[data-v2] .v2-pcl.valgt { border-color: #F05223; box-shadow: inset 0 0 0 1px #F05223; }
  html[data-v2] .v2-pcl.valgt .v2-ad { color: #9A3412; }
  html[data-v2] .v2-hoyre { padding: 24px 32px 48px 24px; }
  html[data-v2] .v2-hoyre .v2-hodeblokk { margin-bottom: 18px; }
  html[data-v2] .v2-hoyre .v2-hodeblokk h1 { font-size: 26px; }
  html[data-v2] .v2-to { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
  html[data-v2] .v2-midt-kol { display: flex; flex-direction: column; gap: 16px; }
  html[data-v2] .v2-midt-kol > .v2-h2 { display: none; }
  html[data-v2] .v2-midt-kol > .v2-card { margin-top: 0 !important; }
  html[data-v2] .v2-pc-tilbud { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
  html[data-v2] .v2-pc-tilbud-hode { display: flex; justify-content: space-between; align-items: baseline; }
  html[data-v2] .v2-pc-tilbud-hode b { font-size: 15px; font-weight: 600; }
  html[data-v2] .v2-pc-tilbud-hode span { font-size: 13px; color: #52525B; }
  html[data-v2] .v2-pc-pdf { border: 1px solid #E4E4E7; }
  html[data-v2] .v2-pc-pdf .v2-pdf { max-width: none; min-height: 510px; box-shadow: none; font-size: 7.6px; padding: 26px 20px; }
  html[data-v2] .v2-pc-knapper { display: flex; flex-wrap: wrap; gap: 10px; }
  html[data-v2] .v2-pc-knapper .hoved, html[data-v2] .v2-pc-knapper .andre { flex: 1 1 0; min-height: 48px; }
  html[data-v2] .v2-pc-knapper.smaa .andre { flex: 0 0 auto; min-height: 44px; height: 44px; padding: 0 16px; }
  html[data-v2] .v2-pc-merk { margin: 0; font-size: 13.5px; color: #52525B; }
  html[data-v2] .v2-kunde-pc { max-width: 920px; margin: 0 auto; }
  html[data-v2] .v2-brod { min-height: 44px; font-size: 13.5px; gap: 6px; margin-bottom: 14px; }
  html[data-v2] .v2-brod .ikon { width: 14px; height: 14px; }
  html[data-v2] .v2-kunde-to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  html[data-v2] .v2-kunde-skjema { padding: 18px 20px 20px; }
  html[data-v2] .v2-lag { width: auto; margin-top: 18px; padding: 0 20px; }
  html[data-v2] .v2-kunde-to .v2-h2 { margin: 2px 0 12px; font-size: 16px; }
  html[data-v2] .v2-melding i { color: #52525B; }
  html[data-v2] .v2-melding-merk { margin: 10px 0 0; }
  html[data-v2] .v2-pc-knapper .hoved, html[data-v2] .v2-pc-knapper .andre { white-space: nowrap; }
  html[data-v2] body.v2-bred .v2-ark { left: auto; right: 32px; bottom: 32px; transform: none; border-radius: 22px; width: 440px; animation: none; }
  html[data-v2] body.v2-bred .side[data-side="v2konto"] .v2-smal { max-width: 560px; margin: 26px auto 0; }
  html[data-v2] body.v2-bred .v2-fast { position: static; transform: none; width: auto; margin-top: 18px; }
  html[data-v2] body.v2-bred .v2-fast.med-meny { display: none; }
}

/* --- FB9c: landingssiden (første gang på telefonen) og huseierens variant. Logoen i siden, ikke toppfeltet. --- */
html[data-v2] body.v2-landingside .topp { display: none; }
html[data-v2] .v2-landing-inn { display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 56px) 24px 0; }
html[data-v2] .v2-landing-logo { display: block; width: 220px; height: auto; }
html[data-v2] .side.v2-landing h1 { margin: 40px 0 0; font-size: 28px; line-height: 1.22; letter-spacing: -.02em; color: #18181B; }
html[data-v2] .v2-landing-punkter { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
html[data-v2] .v2-landing-punkter li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; color: #18181B; }
html[data-v2] .v2-landing-nr {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #D4D4D8; background: #fff;
  font-size: 15px; font-weight: 600; color: #3F3F46; font-variant-numeric: tabular-nums;
}
@media (max-height: 700px) {
  html[data-v2] .v2-landing-inn { padding-top: calc(env(safe-area-inset-top) + 40px); }
  html[data-v2] .side.v2-landing h1 { margin-top: 28px; font-size: 26px; }
  html[data-v2] .v2-landing-punkter { margin-top: 28px; gap: 12px; }
}

/* --- FB9c: koden på skjermen på testflata, når adressen ikke står på testlista --- */
html[data-v2] .v2-testkode {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 14px; padding: 12px 16px;
  border-radius: 14px; border: 1px dashed #F05223; background: #FFF7ED;
}
html[data-v2] .v2-testkode-merke { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9A3412; }
html[data-v2] .v2-testkode-kode { font-size: 26px; font-weight: 700; letter-spacing: .18em; color: #18181B; font-variant-numeric: tabular-nums; }

/* FB9g: demokontoen. Merket øverst (TEST-merket fra src/testflate.js, som har stilen i style="") blir en tydelig linje. */
#pkfa-flate.v2-demo { height: 20px !important; padding: 0 12px !important; font-size: 12px !important; line-height: 20px !important; letter-spacing: .01em !important; white-space: nowrap; }