/* Byggvärme (produkter/byggvarme.html) – byggarbetsplatsen en vinternatt, värme som bygget kan lita på.
   Ovanpå bas.css och sajt.css. Prefix bv-. Inga backdrop-filter, inga mix-blend-mode, inga stora filter. */

/* ---------- datarader (etikett ovanför värde, tunn linje överst) ---------- */
.bv-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 24px; }
.bv-data.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bv-data > div { position: relative; padding-top: 14px; border-top: 1px solid var(--linje-2); }
.bv-data dt { font-size: .8125rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.bv-data dd { margin: 9px 0 0; font-size: clamp(1.125rem, 1.02rem + .3vw, 1.375rem); line-height: 1.3; font-weight: 340; letter-spacing: -.005em; color: var(--is); font-variant-numeric: tabular-nums; text-wrap: balance; }

/* ---------- hjälten: jätteordet till vänster, bygget i full höjd till höger ---------- */
.bv-hero { position: relative; min-height: max(780px, calc(var(--vh) * 100)); display: flex; flex-direction: column; padding-top: 128px; overflow: hidden; isolation: isolate; background: var(--natt); }
.bv-hero-foto { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 54%; margin: 0; }
.bv-hero-foto picture, .bv-hero-foto img { display: block; width: 100%; height: 100%; }
.bv-hero-foto img { object-fit: cover; object-position: 50% 62%; }
.bv-hero-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--natt) 0, rgba(4, 10, 24, .82) 9%, rgba(4, 10, 24, .3) 26%, rgba(4, 10, 24, 0) 42%),
              linear-gradient(180deg, rgba(4, 10, 24, .7) 0, rgba(4, 10, 24, 0) 16%, rgba(4, 10, 24, 0) 82%, rgba(4, 10, 24, .75) 100%); }
.bv-hero-in { position: relative; flex: 1; display: flex; flex-direction: column; }
.bv-hero .smulor { margin-bottom: clamp(32px, 4vw, 60px); }
.bv-hero-text { margin-top: auto; padding-bottom: clamp(36px, 4vw, 64px); max-width: 52%; }
.bv-h1 { margin-top: 22px; font-size: clamp(4rem, .9rem + 9.6vw, 13.5rem); line-height: .9; font-weight: 230; font-variation-settings: "opsz" 96; letter-spacing: -.048em; white-space: nowrap; }
.bv-h1 .rad { padding-bottom: .16em; margin-bottom: -.16em; }
.bv-hero .t-ingress { margin-top: 30px; max-width: 30ch; }
.bv-hero-knappar { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.bv-hero-data { margin-top: clamp(48px, 5vw, 80px); max-width: 640px; }
.bv-hero-data dd { font-size: clamp(1.25rem, 1rem + .7vw, 1.875rem); font-weight: 300; }

/* ---------- 01 premium: tre löften ---------- */
.bv-lofte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 56px; }
.bv-lofte li { position: relative; padding-top: 26px; border-top: 1px solid var(--linje-2); }
.bv-lofte li::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: linear-gradient(90deg, #1f74b8, #9fb4c4); }
.bv-lofte-nr { display: block; font-size: clamp(4.5rem, 2.4rem + 5vw, 8.5rem); line-height: .9; font-weight: 200; font-variation-settings: "opsz" 96; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #6fa8e6 0%, #c8d6e4 60%, #eef3fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bv-lofte h3 { margin-top: 26px; }
.bv-lofte p { margin-top: 14px; font-size: clamp(1rem, .96rem + .15vw, 1.125rem); line-height: 1.55; color: var(--is-2); max-width: 40ch; }

/* ---------- 02 tillgänglighet: jättetalet ---------- */
.bv-tillg-rutnat { align-items: end; row-gap: 40px; }
.bv-tal { --F: clamp(12rem, 1rem + 33vw, 40rem); grid-column: 1 / span 8; position: relative; margin: 0; }
.bv-tal-over { display: block; position: relative; z-index: 1; margin: 0 0 calc(var(--F) * -.15) .1em; font-size: clamp(1.375rem, .9rem + 1.3vw, 2.5rem); line-height: 1; font-weight: 300; letter-spacing: -.01em; color: var(--is-2); }
.bv-tal-yta { position: relative; display: flex; align-items: baseline; padding-bottom: 6px; }
.bv-tal-yta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(31, 116, 184, 0), #1f74b8 12%, #9fb4c4 52%, #f29a3c 82%, rgba(255, 215, 160, .9)); box-shadow: 0 0 14px rgba(120, 170, 230, .3); }
.bv-jatte { display: block; font-size: var(--F); line-height: .8; padding: .1em .02em .04em 0; font-weight: 800; font-stretch: 75%; font-variation-settings: "opsz" 96; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums;
  background: #2b5c92 url(../bild/produktsidor/byggvarme-tex.webp) 0 50% / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; user-select: none; }
.bv-procent { font-size: .52em; margin-left: .05em; }
.bv-tillg-text { grid-column: 9 / span 4; padding-bottom: 14px; }
.bv-tillg-text h2 { margin-top: 30px; }
.bv-tillg-text .t-brod { margin-top: 24px; max-width: 36ch; }
.bv-tillg-data { margin-top: clamp(48px, 5vw, 80px); }

/* ---------- 03 hyra eller köpa ---------- */
.bv-anl { position: relative; margin: 0 auto; max-width: 980px; }
.bv-anl::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 184, .22), rgba(31, 116, 184, 0)); }
.bv-anl img { position: relative; width: 100%; height: auto; }
.bv-ansvar { margin-top: clamp(56px, 6vw, 96px); }
.bv-ansvar-linje { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6px; }
.bv-ansvar-linje li { position: relative; padding-top: 18px; }
.bv-ansvar-linje li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; }
.bv-ansvar-linje .bt::before { background: var(--bla); box-shadow: 0 0 16px rgba(0, 152, 212, .35); }
.bv-ansvar-linje .ni::before { background: var(--is); }
.js .bv-ansvar .bv-ansvar-linje li::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.js .bv-ansvar.syns .bv-ansvar-linje li::before { transform: none; }
.js .bv-ansvar.syns .bv-ansvar-linje li:nth-child(2)::before { transition-delay: .12s; }
.js .bv-ansvar.syns .bv-ansvar-linje li:nth-child(3)::before { transition-delay: .24s; }
.js .bv-ansvar.syns .bv-ansvar-linje li:nth-child(4)::before { transition-delay: .36s; }
.js .bv-ansvar.syns .bv-ansvar-linje li:nth-child(5)::before { transition-delay: .6s; }
.bv-ansvar-linje b { font-size: clamp(1.125rem, .98rem + .45vw, 1.5rem); font-weight: 340; letter-spacing: -.01em; color: var(--is); }
.bv-ansvar-vem { margin-bottom: 16px; display: grid; grid-template-columns: 4fr 1fr; column-gap: 6px; }
.bv-ansvar-vem .bt { color: var(--bla); }
.bv-ansvar-vem .ni { color: var(--is); }
.bv-avtal { margin-top: clamp(64px, 7vw, 120px); padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--linje); align-items: start; row-gap: 32px; }
.bv-avtal-rubrik { grid-column: 1 / span 5; max-width: 16ch; }
.bv-avtal-lista { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); }
.bv-avtal-lista li { padding-top: 14px; border-top: 1px solid var(--linje-2); font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.5rem); line-height: 1.25; font-weight: 340; color: var(--is); }
.bv-avtal-lista .t-etikett { display: block; margin-bottom: 10px; }

/* ---------- 04 vatten eller luft ---------- */
.bv-tva-rutnat { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 120px); row-gap: 64px; }
.bv-tva-rutnat::before { content: ""; position: absolute; left: 50%; top: 4%; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(170, 196, 228, 0), rgba(170, 196, 228, .28) 30%, rgba(170, 196, 228, .28) 70%, rgba(170, 196, 228, 0)); }
.bv-utf-bild { position: relative; height: clamp(280px, 28vw, 460px); margin-bottom: 32px; }
.bv-utf-bild::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 184, .2), rgba(31, 116, 184, 0)); }
.bv-utf-bild img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.bv-utf h3 { margin-top: 12px; }
.bv-utf .t-brod { margin-top: 14px; max-width: 40ch; }
.bv-utf .lank { margin-top: 22px; }
.bv-tva-not { margin-top: 48px; max-width: 80ch; }

/* ---------- 05 användning: bandfoto ---------- */
.bv-band { position: relative; height: clamp(440px, 46vw, 820px); overflow: hidden; isolation: isolate; }
.bv-band-foto { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.bv-band::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--natt) 0, rgba(4, 10, 24, 0) 16%, rgba(4, 10, 24, 0) 66%, var(--natt) 100%); }
.bv-anv-lista { position: relative; margin-top: clamp(-120px, -6vw, -48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 0; }
.bv-anv-lista > div { padding-top: 18px; border-top: 1px solid var(--linje-2); }
.bv-anv-lista dt { font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.75rem); line-height: 1.2; font-weight: 380; letter-spacing: -.01em; color: var(--is); }
.bv-anv-lista dd { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--is-2); }
.bv-anv-lista .effekt dt { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); padding-top: 4px; }
.bv-anv-lista .effekt dd { margin-top: 12px; font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem); line-height: 1; font-weight: 260; letter-spacing: -.025em; color: var(--is); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 06 en kontakt, hela vägen ---------- */
.bv-vag-rutnat { align-items: center; row-gap: 48px; }
.bv-vag-foto { grid-column: 1 / span 6; margin: 0; position: relative; aspect-ratio: 1400 / 1344; border-radius: 24px; overflow: hidden; background: #071430; }
.bv-vag-foto img { width: 100%; height: 100%; object-fit: cover; }
.bv-vag-text { grid-column: 8 / span 5; }
.bv-vag-text h2 { margin-top: 30px; }
.bv-vag-text .t-ingress { margin-top: 26px; }
.bv-steg { position: relative; margin-top: 44px; padding-left: 34px; }
.bv-steg li:not(:last-child)::after { content: ""; position: absolute; left: -28px; top: 22px; bottom: -6px; width: 1px; background: linear-gradient(180deg, #2f6fb0, #6fa8e6); }
.bv-steg li:nth-child(3)::after { background: linear-gradient(180deg, #6fa8e6, #9fb4c4); }
.bv-steg li:nth-child(4)::after { background: linear-gradient(180deg, #9fb4c4, #f29a3c); }
.bv-steg li { position: relative; padding: 0 0 22px; }
.bv-steg li::before { content: ""; position: absolute; left: -34px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--natt); border: 1px solid #6fa8e6; }
.bv-steg li.varm::before { border-color: var(--varm); background: var(--varm); box-shadow: 0 0 0 5px rgba(242, 154, 60, .16), 0 0 18px rgba(242, 154, 60, .55); }
.bv-steg b { display: block; font-size: clamp(1.1875rem, 1.06rem + .4vw, 1.5rem); line-height: 1.25; font-weight: 380; color: var(--is); }
.bv-steg span { display: block; margin-top: 3px; font-size: 1rem; color: var(--is-2); }
.bv-steg li.varm b { color: var(--glod); }

/* ---------- broschyren ---------- */
.bv-dok-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 36px; align-items: center; padding-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--linje); }
.bv-dok-omslag { grid-column: 1 / span 2; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); transform: rotate(-2deg); transition: transform .8s var(--ease); }
.bv-dok-omslag:hover { transform: rotate(0); }
.bv-dok-text { grid-column: 4 / span 6; }
.bv-dok-text .t-brod { margin-top: 14px; max-width: 46ch; }
.bv-dok-lankar { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.lank.dampad { color: var(--is-2); }
.bv-dok-mer { grid-column: 10 / span 3; }
.bv-dok-mer ul { margin-top: 12px; border-top: 1px solid var(--linje); }
.bv-dok-mer a { display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linje); }
.bv-dok-mer b { font-size: 1.0625rem; font-weight: 400; color: var(--is); }
.bv-dok-mer span { grid-column: 1; font-size: .875rem; color: var(--is-3); }
.bv-dok-mer .pil { grid-column: 2; grid-row: 1 / span 2; color: var(--bla); transition: transform .6s var(--ease); }
.bv-dok-mer a:hover .pil, .bv-dok-mer a:focus-visible .pil { transform: translateX(4px); }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .bv-hero-foto { width: 50%; }
  .bv-hero-text { max-width: 56%; }
  .bv-h1 { font-size: 6rem; }
  .bv-lofte { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .bv-lofte li { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--spalt); }
  .bv-lofte-nr { grid-row: span 2; }
  .bv-lofte h3 { margin-top: 6px; }
  .bv-tal, .bv-tillg-text { grid-column: 1 / -1; }
  .bv-avtal-rubrik, .bv-avtal-lista { grid-column: 1 / -1; }
  .bv-anv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .bv-vag-foto { grid-column: 1 / span 5; }
  .bv-vag-text { grid-column: 6 / span 7; }
  .bv-dok-omslag { grid-column: 1 / span 3; }
  .bv-dok-text { grid-column: 5 / span 8; }
  .bv-dok-mer { grid-column: 5 / span 8; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .bv-hero { min-height: auto; padding-top: 0; }
  .bv-hero-foto { position: relative; z-index: 0; width: 100%; aspect-ratio: 1000 / 1027; }
  .bv-hero-foto img { object-position: 50% 50%; }
  .bv-hero-foto::after { background: linear-gradient(180deg, rgba(4, 10, 24, .82) 0, rgba(4, 10, 24, .35) 20%, rgba(4, 10, 24, 0) 34%, rgba(4, 10, 24, 0) 46%, rgba(4, 10, 24, .82) 74%, var(--natt) 90%); }
  .bv-hero-in { position: static; margin-top: -118px; }
  .bv-hero .smulor { position: absolute; top: 84px; left: var(--marg); right: var(--marg); margin: 0; }
  .bv-hero-text { position: relative; z-index: 1; margin-top: 0; padding-bottom: 0; max-width: none; }
  .bv-h1 { font-size: 4.25rem; }
  .bv-hero .t-ingress { font-size: 1.125rem; margin-top: 22px; }
  .bv-hero-knappar { flex-direction: column; align-items: stretch; gap: 18px; }
  .bv-hero-knappar .knapp { width: 100%; }
  .bv-hero-knappar .lank { justify-content: center; }
  .bv-hero-data { margin-top: 36px; margin-bottom: 8px; }
  .bv-data.tre, .bv-data { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bv-data > div { padding: 12px 0 14px; border-top-color: var(--linje); }
  .bv-data dd { margin-top: 6px; }
  .bv-hero-data.tre { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 14px; }
  .bv-hero-data dd { white-space: nowrap; }
  .bv-hero-data > div { border-top-color: var(--linje-2); }
  .bv-hero-data dt { font-size: .6875rem; letter-spacing: .12em; }
  .bv-hero-data dd { font-size: 1.125rem; }
  .bv-lofte li { grid-template-columns: minmax(0, 1fr); }
  .bv-lofte-nr { font-size: 4.5rem; }
  .bv-lofte h3 { margin-top: 18px; }
  .bv-tal { --F: 12.5rem; }
  .bv-tillg-text { order: -1; }
  .bv-ansvar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bv-ansvar-vem, .bv-ansvar-linje { display: contents; }
  .bv-ansvar-vem .bt { order: 1; margin-bottom: 10px; }
  .bv-ansvar-linje .bt { order: 2; }
  .bv-ansvar-vem .ni { order: 3; margin: 22px 0 10px; }
  .bv-ansvar-linje .ni { order: 4; }
  .bv-ansvar-linje li { padding: 12px 0 12px 22px; }
  .bv-ansvar-linje li::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .js .bv-ansvar .bv-ansvar-linje li::before { transform: scaleY(0); transform-origin: 50% 0; }
  .bv-ansvar-vem { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .bv-avtal-lista { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bv-avtal-lista li { padding: 12px 0 14px; display: flex; align-items: baseline; gap: 16px; }
  .bv-avtal-lista .t-etikett { margin: 0; }
  .bv-tva-rutnat { grid-template-columns: minmax(0, 1fr); }
  .bv-tva-rutnat::before { display: none; }
  .bv-utf + .bv-utf { padding-top: 48px; border-top: 1px solid var(--linje); }
  .bv-utf-bild { height: 260px; }
  .bv-band { height: 420px; }
  .bv-band-foto { object-position: 24% 50%; }
  .bv-anv-lista { margin-top: 8px; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bv-anv-lista > div { padding: 14px 0 16px; }
  .bv-vag-foto, .bv-vag-text { grid-column: 1 / -1; }
  .bv-vag-foto { border-radius: 18px; }
  .bv-dok-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bv-dok-omslag { grid-column: 1 / span 2; }
  .bv-dok-text, .bv-dok-mer { grid-column: 1 / -1; }
  .bv-dok-lankar { flex-direction: column; }
}

/* engelska sidan (en/products/construction-heating.html): "Construction site heating" på två rader, något mindre än "Byggvärme" */
html[lang="en"] .bv-h1 { font-size: clamp(3rem, .6rem + 7.4vw, 10.5rem); }
@media (max-width: 1100px) { html[lang="en"] .bv-h1 { font-size: 6rem; } }
@media (max-width: 760px) { html[lang="en"] .bv-h1 { font-size: 3.75rem; } }

/* ================= 2026-10-20: bränslet och beställningen (kalla/bv_2026.py – ändra där och kör om) ================= */
/* ---------- 02 bränslet: två uppslag med bränslets närbild, namnet stort ---------- */
.bv-br-rutnat { margin-top: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--spalt) * 2); row-gap: 64px; }
.bv-br-bild { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: clamp(16px, 1.6vw, 24px); overflow: hidden; }
.bv-br-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bv-br-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 10, 24, 0) 46%, rgba(4, 10, 24, .82) 100%); }
@media (hover: hover) { .bv-br:hover .bv-br-bild img { transform: scale(1.04); } }
/* namnet i texturerat jättetal, över skarven mellan bilden och texten */
.bv-br { display: flex; flex-direction: column; }
.bv-br-namn { position: relative; z-index: 1; align-self: flex-start; margin: -.62em 0 0 clamp(16px, 2vw, 32px);
  font-size: clamp(3.5rem, 1.6rem + 5vw, 7.5rem); line-height: .8; font-weight: 780; font-stretch: 75%; font-variation-settings: "opsz" 96; letter-spacing: -.035em; padding: .06em .02em .02em;
  background: #c47a2c url("../bild/produktsidor/multiauto-tex.webp") 100% 40% / 520% auto no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bv-br-text { position: relative; padding-top: 18px; }
.bv-br-text > p { font-size: 1.125rem; line-height: 1.55; color: var(--is-2); max-width: 42ch; }
.bv-br-text dl { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
.bv-br-text dl > div { padding-top: 12px; border-top: 1px solid var(--linje-2); }
.bv-br-text dt { font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.bv-br-text dd { margin-top: 6px; font-size: 1.1875rem; font-weight: 340; color: var(--is); }

/* ---------- 03 beställningen: klibbig scen (dator), fritt läge på mobil. --p 0 … 1 sätts av byggvarme.js, som också
   räknar fram --niva (förrådets nivå), --sig (signalen), --bil (bilens väg) och --slang ---------- */
.bv-best { --niva: .9; --sig: 1; --bil: 1; --slang: 0; }
.bv-best-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; row-gap: 32px; }
.bv-best-text { grid-column: 1 / span 4; }
.bv-best-text .t-etikett { margin-bottom: 28px; }
.bv-best-text .t-ingress { margin-top: 24px; font-size: clamp(1.0625rem, .98rem + .3vw, 1.25rem); }
.bv-best-steg { margin-top: clamp(24px, calc(var(--vh) * 3.4), 40px); border-top: 1px solid var(--linje); }
.bv-best-steg li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--linje); opacity: .38; transition: opacity .5s ease; }
.bv-best-steg li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--bla); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.bv-best-steg li.pa { opacity: 1; }
.bv-best-steg li.pa::before { transform: none; }
.bv-best-steg .nr { grid-row: 1 / span 2; padding-top: .35em; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; color: var(--bla); }
.bv-best-steg b { font-size: 1.1875rem; font-weight: 420; }
.bv-best-steg li > span:last-child { font-size: .9375rem; line-height: 1.45; color: var(--is-2); }
.bv-best-fig { grid-column: 6 / -1; margin: 0; position: relative; }
.bv-best-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bv-best-fig figcaption { margin-top: 6px; text-align: right; color: var(--is-4); }
.bv-best-status { position: absolute; left: 4%; top: 2%; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 99px; background: rgba(11, 23, 51, .85);
  box-shadow: inset 0 0 0 1px rgba(127, 152, 189, .35); font-size: .9375rem; color: var(--is); }
.bv-best-status i { width: 8px; height: 8px; border-radius: 50%; background: #3fb6ff; box-shadow: 0 0 10px rgba(63, 182, 255, .8); }
.bv-best-status span { display: none; }
.bv-best-status[data-s="0"] span[data-status="0"], .bv-best-status[data-s="1"] span[data-status="1"],
.bv-best-status[data-s="2"] span[data-status="2"], .bv-best-status[data-s="3"] span[data-status="3"] { display: inline; }
.bv-best-status:not([data-s]) span[data-status="3"] { display: inline; }
.bv-best-status[data-s="3"] i, .bv-best-status:not([data-s]) i { background: #34d1a7; box-shadow: 0 0 10px rgba(52, 209, 167, .8); }
.bv-best-status[data-s="1"] i { background: var(--glod); box-shadow: 0 0 12px rgba(242, 154, 60, .9); }
/* SVG-delarna */
.bv-best-namn { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; fill: #7f98bd; }
.bv-best-liten { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; fill: #7f98bd; }
.bv-best-varm { fill: var(--glod); }
.bv-best-tal { font-family: inherit; font-size: 20px; font-weight: 420; fill: #fff; font-variant-numeric: tabular-nums; }
.bv-best-fyll { transform: translateY(calc((1 - var(--niva)) * 240px + 12px)); }
.bv-best-signal { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sig)); opacity: clamp(0, var(--sig) * 1.4, 1); }
.bv-best-bil { transform: translateX(calc((1 - var(--bil)) * 320px)); opacity: clamp(0, var(--bil) * 3, 1); }
.bv-best-slang { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--slang)); }
.bv-best-skarm { transition: fill .4s ease; }
.bv-best-status[data-s="1"] ~ svg .bv-best-skarm { fill: #1f5f8f; }
/* klibbig scen på dator */
.js .bv-best-scen:not(.stilla) { height: max(1500px, calc(var(--vh) * 260)); }
.js .bv-best-scen:not(.stilla) .bv-best-klibb { position: sticky; top: 0; height: max(700px, calc(var(--vh) * 100)); display: flex; align-items: center; padding-top: 64px; overflow: hidden; }
.bv-best-scen.stilla .bv-best-steg li, html:not(.js) .bv-best-steg li { opacity: 1; }

@media (max-width: 1100px) {
  .bv-best-text { grid-column: 1 / span 5; }
  .bv-best-fig { grid-column: 6 / -1; }
  .bv-best-steg li > span:last-child { display: none; }
}
@media (max-width: 760px) {
  .bv-br-rutnat { grid-template-columns: 1fr; row-gap: 56px; }
  .bv-br-namn { font-size: 4.25rem; }
  .js .bv-best-scen:not(.stilla) { height: auto; }
  .js .bv-best-scen:not(.stilla) .bv-best-klibb { position: relative; height: auto; padding-top: 0; overflow: visible; display: block; }
  .bv-best-rutnat { display: flex; flex-direction: column; align-items: stretch; }
  .bv-best-text { display: contents; }
  .bv-best-text > .t-etikett, .bv-best-text > .t-h2, .bv-best-text > .t-ingress { order: 1; }
  .bv-best-fig { order: 2; margin: 28px calc(-1 * var(--marg) + 6px) 0; }
  .bv-best-steg { order: 3; margin-top: 20px; }
  .bv-best-steg li > span:last-child { display: block; }
  .bv-best-status { font-size: .8125rem; padding: 6px 12px 6px 10px; }
}